/*
  Aqonix components. Every value comes from tokens.css roles, so components
  follow whichever surface they sit on (.aq-dark or the light default).
*/

/* ---- Text ---- */
.aq-eyebrow{font:600 var(--aq-text-xs)/1.4 var(--aq-font-mono);letter-spacing:var(--aq-tracking-label);text-transform:uppercase;color:var(--aq-accent);margin:0 0 var(--aq-space-4)}
.aq-display{font-family:var(--aq-font-sans);font-weight:560;letter-spacing:var(--aq-tracking-tight);line-height:var(--aq-leading-tight);margin:0}
.aq-display em,.aq-serif{font-family:var(--aq-font-display);font-style:italic;font-weight:400;letter-spacing:-.01em}
.aq-lead{font-size:var(--aq-text-lg);line-height:1.5;color:var(--aq-text-2);margin:0}
.aq-mono{font-family:var(--aq-font-mono);font-feature-settings:"zero" 1}
.aq-num{font-variant-numeric:tabular-nums}

/* ---- Buttons ---- */
.aq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:var(--aq-radius-pill);padding:13px 22px;font:600 var(--aq-text-sm)/1 var(--aq-font-sans);text-decoration:none;cursor:pointer;transition:transform var(--aq-dur-1) var(--aq-ease-out),background var(--aq-dur-2),box-shadow var(--aq-dur-2),color var(--aq-dur-2)}
.aq-btn:hover{transform:translateY(-1px)}
.aq-btn:active{transform:translateY(0)}
.aq-btn--primary{background:var(--aq-signal-300);color:var(--aq-ink-900);box-shadow:0 0 0 0 rgb(158 213 255 / 0)}
.aq-btn--primary:hover{background:#b8e1ff;box-shadow:0 10px 40px rgb(158 213 255 / .35)}
.aq-btn--ink{background:var(--aq-ink-800);color:#fff}
.aq-btn--ink:hover{background:var(--aq-ink-700)}
.aq-btn--ghost{background:transparent;color:var(--aq-text);border-color:var(--aq-border)}
.aq-btn--ghost:hover{border-color:var(--aq-accent)}
.aq-btn:focus-visible,.aq-link:focus-visible{outline:3px solid var(--aq-focus);outline-offset:4px}
.aq-link{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---- Badges & chips ---- */
.aq-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--aq-radius-pill);font:600 var(--aq-text-2xs)/1.3 var(--aq-font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--aq-border);color:var(--aq-text-2);background:var(--aq-surface);white-space:nowrap}
.aq-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aq-signal-400);box-shadow:0 0 0 0 rgb(107 188 247 / .6);animation:aq-ping 2s infinite}
.aq-badge--planned{border-color:rgb(149 140 247 / .45);color:var(--aq-iris-500);background:rgb(149 140 247 / .08)}
.aq-dark .aq-badge--planned{color:var(--aq-iris-300)}
.aq-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--aq-radius-sm);background:var(--aq-surface-2);color:var(--aq-text-2);font:500 var(--aq-text-xs)/1.3 var(--aq-font-sans)}
.aq-chip svg{width:12px;height:12px;flex:none}

/* ---- Status marks (never color alone: always icon + label) ---- */
.aq-status{display:inline-flex;align-items:center;gap:6px;font:600 var(--aq-text-xs)/1.2 var(--aq-font-sans);color:var(--aq-text)}
.aq-status i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--aq-font-sans);font-style:normal;color:var(--aq-ink-900);flex:none}
.aq-status--ok i{background:var(--aq-status-ok);color:#fff}
.aq-status--review i{background:var(--aq-status-review)}
.aq-status--missing i{background:transparent;border:1.5px dashed var(--aq-status-missing);color:var(--aq-status-missing)}

/* ---- Product window (used for every fictional product illustration) ---- */
.aq-window{margin:0;position:relative;background:var(--aq-surface);color:var(--aq-text);border:1px solid var(--aq-border);border-radius:var(--aq-radius-lg);box-shadow:var(--aq-shadow-3);overflow:hidden;isolation:isolate}
.aq-dark .aq-window,.aq-window.aq-dark{box-shadow:var(--aq-glow)}
.aq-window__bar{display:flex;align-items:center;gap:var(--aq-space-3);padding:12px 16px;border-bottom:1px solid var(--aq-border);font:600 var(--aq-text-xs)/1 var(--aq-font-sans);color:var(--aq-text-2)}
.aq-window__dots{display:flex;gap:6px}
.aq-window__dots i{width:9px;height:9px;border-radius:50%;background:var(--aq-surface-2);border:1px solid var(--aq-border)}
.aq-window__title{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aq-window__title img,.aq-window__title .aq-logo{width:18px;height:18px;flex:none}
.aq-window__tag{margin-left:auto;font:600 10px/1.2 var(--aq-font-mono);letter-spacing:.1em;color:var(--aq-text-3);text-transform:uppercase;white-space:nowrap}
.aq-window__body{padding:var(--aq-space-6)}

/* ---- KPI tile ---- */
.aq-kpi{display:flex;flex-direction:column;gap:4px;min-width:0}
.aq-kpi__label{font:500 var(--aq-text-xs)/1.3 var(--aq-font-sans);color:var(--aq-text-3)}
.aq-kpi__value{font:600 clamp(1.25rem,.9rem + 1.2vw,1.75rem)/1.1 var(--aq-font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--aq-text)}
.aq-kpi__delta{font:500 var(--aq-text-xs)/1.2 var(--aq-font-mono);color:var(--aq-text-2)}

/* ---- Finding / flag card ---- */
.aq-flag{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 16px;border-radius:var(--aq-radius-md);background:color-mix(in srgb,var(--aq-status-review) 10%,var(--aq-surface));border:1px solid color-mix(in srgb,var(--aq-status-review) 45%,transparent)}
.aq-flag__icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--aq-status-review);color:var(--aq-ink-900);font:800 14px/1 var(--aq-font-sans)}
.aq-flag h4{margin:2px 0 4px;font:600 var(--aq-text-sm)/1.3 var(--aq-font-sans)}
.aq-flag p{margin:0;font-size:var(--aq-text-xs);line-height:1.5;color:var(--aq-text-2)}

/* ---- Chart scaffolding ---- */
.aq-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 var(--aq-text-xs)/1.2 var(--aq-font-sans);color:var(--aq-text-2)}
.aq-legend span{display:inline-flex;align-items:center;gap:6px}
.aq-legend i[style]{width:10px;height:10px;border-radius:3px;background:var(--c)}
.aq-legend i.line{height:2px;border-radius:2px}
.aq-chart text{font:500 10px var(--aq-font-sans);fill:var(--aq-text-3)}
.aq-chart .grid{stroke:var(--aq-viz-grid);stroke-width:1}
.aq-note{font:500 var(--aq-text-2xs)/1.5 var(--aq-font-mono);letter-spacing:.02em;color:var(--aq-text-3);margin:0}

/* ---- Tooltip (one shared instance, positioned by script) ---- */
.aq-tooltip{position:fixed;z-index:50;pointer-events:none;max-width:240px;padding:8px 10px;border-radius:var(--aq-radius-sm);background:var(--aq-ink-900);color:#fff;border:1px solid rgb(158 213 255 / .25);font:500 var(--aq-text-xs)/1.45 var(--aq-font-sans);box-shadow:var(--aq-shadow-2);opacity:0;transform:translateY(4px);transition:opacity var(--aq-dur-1),transform var(--aq-dur-1)}
.aq-tooltip.is-on{opacity:1;transform:none}
.aq-tooltip b{display:block;font-weight:650;margin-bottom:2px}

/* ---- Card ---- */
.aq-card{background:var(--aq-surface);border:1px solid var(--aq-border);border-radius:var(--aq-radius-lg);padding:var(--aq-space-6);box-shadow:var(--aq-shadow-1)}

@keyframes aq-ping{0%{box-shadow:0 0 0 0 rgb(107 188 247 / .55)}80%,100%{box-shadow:0 0 0 7px rgb(107 188 247 / 0)}}
@media (prefers-reduced-motion:reduce){.aq-badge--live::before{animation:none}.aq-btn{transition:none}}