/* Direction: a calm instrument panel. Ink-navy agent console, pale blue evidence panels,
   Instrument Serif for the one-line verdicts, Plex Sans for reading, Plex Mono for every number.
   One accent (signal blue) marks the client and anything live. */

@layer reset, tokens, base, components, motion, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ol, ul, figure, fieldset { margin: 0; padding: 0; }
  ol, ul { list-style: none; }
  fieldset { border: 0; min-width: 0; }
  button, input, select { font: inherit; color: inherit; }
  img, svg { display: block; }
}

@layer tokens {
  :root {
    --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-text: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    --bg: oklch(0.975 0.01 250);
    --surface: oklch(0.995 0.004 250);
    --panel: oklch(0.955 0.022 252);
    --panel-2: oklch(0.925 0.035 254);
    --line: oklch(0.87 0.03 255);
    --text: oklch(0.24 0.05 262);
    --text-2: oklch(0.42 0.04 260);
    --muted: oklch(0.52 0.03 258);

    --deep: oklch(0.27 0.075 263);
    --deep-2: oklch(0.33 0.08 262);
    --deep-line: oklch(0.42 0.07 262);
    --on-deep: oklch(0.97 0.01 250);
    --on-deep-2: oklch(0.8 0.04 250);

    --accent: oklch(0.52 0.19 262);
    --accent-soft: oklch(0.88 0.06 255);
    --on-accent: #fff;
    --signal: oklch(0.8 0.12 230);
    --neutral-bar: oklch(0.76 0.03 258);
    --seq-2: oklch(0.62 0.15 258);
    --seq-3: oklch(0.74 0.1 252);
    --seq-4: oklch(0.86 0.05 250);

    --good: oklch(0.55 0.13 155);
    --warn: oklch(0.62 0.14 70);
    --bad: oklch(0.55 0.18 27);

    --r-s: 6px; --r-m: 10px; --r-l: 16px;
    --shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0.3 0.06 262 / 0.08), 0 8px 24px -12px oklch(0.3 0.06 262 / 0.18);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --gutter: clamp(16px, 3vw, 40px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: oklch(0.17 0.03 262);
      --surface: oklch(0.21 0.035 262);
      --panel: oklch(0.23 0.045 262);
      --panel-2: oklch(0.28 0.055 262);
      --line: oklch(0.34 0.05 262);
      --text: oklch(0.95 0.01 250);
      --text-2: oklch(0.8 0.03 252);
      --muted: oklch(0.7 0.03 255);
      --deep: oklch(0.13 0.03 262);
      --deep-2: oklch(0.19 0.045 262);
      --deep-line: oklch(0.3 0.06 262);
      --accent: oklch(0.7 0.15 258);
      --accent-soft: oklch(0.36 0.09 260);
      --on-accent: oklch(0.16 0.04 262);
      --neutral-bar: oklch(0.5 0.04 258);
      --seq-2: oklch(0.6 0.13 258);
      --seq-3: oklch(0.5 0.1 258);
      --seq-4: oklch(0.4 0.06 258);
      --good: oklch(0.72 0.13 155);
      --warn: oklch(0.78 0.13 75);
      --bad: oklch(0.7 0.16 27);
      --shadow: 0 0 0 1px oklch(1 0 0 / 0.03), 0 8px 24px -12px oklch(0 0 0 / 0.5);
    }
  }
  :root[data-theme="dark"] {
      --bg: oklch(0.17 0.03 262);
      --surface: oklch(0.21 0.035 262);
      --panel: oklch(0.23 0.045 262);
      --panel-2: oklch(0.28 0.055 262);
      --line: oklch(0.34 0.05 262);
      --text: oklch(0.95 0.01 250);
      --text-2: oklch(0.8 0.03 252);
      --muted: oklch(0.7 0.03 255);
      --deep: oklch(0.13 0.03 262);
      --deep-2: oklch(0.19 0.045 262);
      --deep-line: oklch(0.3 0.06 262);
      --accent: oklch(0.7 0.15 258);
      --accent-soft: oklch(0.36 0.09 260);
      --on-accent: oklch(0.16 0.04 262);
      --neutral-bar: oklch(0.5 0.04 258);
      --seq-2: oklch(0.6 0.13 258);
      --seq-3: oklch(0.5 0.1 258);
      --seq-4: oklch(0.4 0.06 258);
      --good: oklch(0.72 0.13 155);
      --warn: oklch(0.78 0.13 75);
      --bad: oklch(0.7 0.16 27);
      --shadow: 0 0 0 1px oklch(1 0 0 / 0.03), 0 8px 24px -12px oklch(0 0 0 / 0.5);
  }

}

@layer base {
  html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  button, input, select, textarea { font: inherit; color: inherit; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    min-height: 100dvh;
  }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--surface); padding: 8px 12px; }
  [hidden] { display: none !important; }
}

@layer components {
  /* ---------- canvas + chrome ---------- */
  #bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity 900ms var(--ease-out); }
  body[data-view="chat"] #bg { opacity: 0.55; }
  body[data-view="print"] #bg { display: none; }

  .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; letter-spacing: 0.01em; }
  .logo svg { width: 26px; height: 26px; flex: none; }
  .logo rect { fill: var(--deep); }
  .logo circle { fill: none; stroke: var(--signal); stroke-width: 3; }
  .logo b { color: var(--accent); font-weight: 600; }

  .corner {
    position: fixed; inset: 0 0 auto; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--gutter);
  }
  body:not([data-view="landing"]) .corner { display: none; }

  .icon-btn {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
  }
  .icon-btn:hover { background: color-mix(in oklch, var(--surface) 70%, transparent); border-color: var(--line); color: var(--text); }
  .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- landing: a title and a bar ---------- */
  .landing {
    position: relative; z-index: 1; min-height: 100dvh;
    display: grid; grid-template-columns: min(1240px, 100%); place-content: center; justify-items: center; gap: clamp(28px, 6vh, 56px);
    padding: 96px var(--gutter) 72px; text-align: center;
  }
  .hero {
    display: grid; justify-items: center;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.8rem); line-height: 1.04; letter-spacing: -0.022em;
  }
  .hero-lead { display: block; }
  .hero-rot { display: block; position: relative; min-height: 1.1em; width: 100%; }
  .rot { display: inline-block; color: var(--accent); font-style: italic; white-space: nowrap; will-change: transform, opacity, filter; }
  .rot.in { animation: rot-in 700ms var(--ease-out) both; }
  .rot.out { animation: rot-out 380ms ease-in both; }

  .launchbar { width: min(880px, 100%); perspective: 1600px; }
  .flip { display: grid; transform-style: preserve-3d; transition: transform 760ms cubic-bezier(0.3, 1.25, 0.4, 1); }
  .flip.flipped { transform: rotateX(180deg); }
  .face {
    grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-height: 70px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: color-mix(in oklch, var(--surface) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--line); border-radius: 999px; padding: 10px 10px 10px 8px;
    box-shadow: 0 1px 0 oklch(1 0 0 / 0.5) inset, 0 24px 60px -30px oklch(0.3 0.1 262 / 0.45);
    transition: border-color 200ms, box-shadow 200ms;
  }
  .face:focus-within { border-color: color-mix(in oklch, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 14%, transparent), 0 24px 60px -30px oklch(0.3 0.1 262 / 0.45); }
  .back { transform: rotateX(180deg); border-radius: 28px; flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; }
  .front { align-self: center; }
  .bar-prefix { padding-left: 18px; color: var(--muted); font-size: 15px; }
  .front input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 1.2rem; padding: 12px 4px; color: var(--text); }
  .front input::placeholder { color: var(--muted); }
  .bar-site { font-size: 13px; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-note { min-height: 1.5em; margin-top: 14px; font-size: 13px; color: var(--muted); }
  .bar-note.error { color: var(--bad); }

  .round {
    display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%;
    border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer;
    transition: transform 160ms var(--ease-out), filter 160ms, background 160ms;
  }
  .round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .round:hover { filter: brightness(1.08); transform: translateX(1px); }
  .round:active { transform: scale(0.94); }
  .round:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
  .round.ghost { width: 44px; height: 44px; background: transparent; color: var(--text-2); border: 1px solid var(--line); }

  .pick { display: grid; gap: 3px; text-align: left; }
  .pick > span, .pick > legend { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }
  select {
    appearance: none; min-width: 0; font-size: 14px; color: var(--text);
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%237a8bb0' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center / 12px;
    border: 1px solid var(--line); border-radius: 12px; padding: 9px 30px 9px 11px; cursor: pointer;
  }
  select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .runs { display: grid; grid-template-columns: repeat(3, auto); column-gap: 0; border: 0; padding: 0; }
  .runs legend { grid-column: 1 / -1; margin-bottom: 3px; }
  .runs label, .seg-group label { position: relative; }
  .runs input, .seg-group input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
  .runs span { display: grid; place-items: center; width: 38px; height: 38px; font-family: var(--font-mono); font-size: 14px; background: var(--panel); border: 1px solid var(--line); margin-left: -1px; transition: background 150ms, color 150ms; }
  .runs label:first-of-type span { border-radius: 12px 0 0 12px; margin-left: 0; }
  .runs label:last-of-type span { border-radius: 0 12px 12px 0; }
  .runs input:checked + span, .seg-group input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .runs input:focus-visible + span, .seg-group input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

  .go {
    margin-left: auto; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px;
    border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 1rem; cursor: pointer;
    transition: transform 160ms var(--ease-out), filter 160ms;
  }
  .go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
  .go:hover { filter: brightness(1.08); }
  .go:hover svg { transform: translateX(3px); }
  .go:disabled { opacity: 0.6; cursor: progress; }

  /* the bar flying down into the composer */
  .bar-ghost { position: fixed; z-index: 20; pointer-events: none; transition: transform 700ms cubic-bezier(0.5, 0, 0.15, 1), opacity 700ms; }
  .landing.leaving .hero { animation: hero-out 520ms ease-in both; }

  /* ---------- app: sidebar + conversation ---------- */
  .app { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100dvh; }
  .sidebar {
    display: flex; flex-direction: column; gap: 6px; padding: 18px 14px;
    background: color-mix(in oklch, var(--surface) 78%, transparent); backdrop-filter: blur(16px);
    border-right: 1px solid var(--line); z-index: 4;
  }
  .sidebar .logo { padding: 4px 8px 18px; }
  .side-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px;
    border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font-size: 14px; text-align: left;
    transition: background 150ms, border-color 150ms;
  }
  .side-btn:hover { background: var(--panel); border-color: var(--line); }
  .side-btn.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
  .side-btn.primary:hover { filter: brightness(1.08); }
  .side-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .side-foot { margin-top: auto; padding: 8px; font-size: 11px; color: var(--muted); }
  .menu-toggle { display: none; }

  .convo { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; min-width: 0; }
  .thread { overflow-y: auto; padding: 36px var(--gutter) 24px; display: flex; flex-direction: column; gap: 22px; scrollbar-width: thin; }
  .thread > .msg { width: min(860px, 100%); margin-inline: auto; }
  .thread > .msg.wide { width: min(1120px, 100%); }

  .msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; animation: rise 420ms var(--ease-out) both; }
  .msg .who { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); border: 1px solid var(--deep-line); }
  .msg .who i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
  body[data-busy] .msg:last-child .who i { animation: breathe 1.6s ease-in-out infinite; }
  .msg-body { display: grid; gap: 12px; min-width: 0; }
  .msg.user { grid-template-columns: minmax(0, 1fr); justify-items: end; }
  .msg.user .msg-body { background: var(--panel-2); border: 1px solid var(--line); padding: 12px 16px; border-radius: 18px 18px 4px 18px; max-width: min(640px, 88%); }
  .msg.user .chipline { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }

  .say { font-size: 15.5px; line-height: 1.6; max-width: 72ch; }
  .say p + p, .say ul, .say ol { margin-top: 10px; }
  .say ul { list-style: disc; padding-left: 20px; }
  .say ol { list-style: decimal; padding-left: 22px; }
  .say li + li { margin-top: 4px; }
  .say strong { font-weight: 600; }
  .say.error { color: var(--bad); }
  .typing-dots { display: inline-flex; gap: 5px; padding: 12px 0; }
  .typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
  .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
  .typing-dots i:nth-child(3) { animation-delay: 0.3s; }

  /* agent at work */
  .thinking { background: var(--deep); color: var(--on-deep); border-radius: 18px; padding: 16px 18px; box-shadow: 0 20px 50px -30px oklch(0.2 0.1 262 / 0.6); }
  .think-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .think-head h3 { font-size: 14px; font-weight: 600; }
  .think-head .model { font-family: var(--font-mono); font-size: 11.5px; color: var(--on-deep-2); }
  .think-head .toggle-steps { margin-left: auto; background: none; border: 1px solid var(--deep-line); color: var(--on-deep-2); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; }
  .think-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
  .progress { flex: 1; height: 4px; border-radius: 4px; background: var(--deep-line); overflow: hidden; }
  .progress i { display: block; height: 100%; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out); }
  .think-status { font-family: var(--font-mono); font-size: 12px; color: var(--on-deep-2); white-space: nowrap; }
  .steps { display: grid; gap: 14px; margin-top: 16px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--deep-line) transparent; padding-right: 4px; }
  .thinking.collapsed .steps { display: none; }

  .step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
  .step-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--deep-line); display: grid; place-items: center; margin-top: 1px; }
  .step-mark svg { width: 12px; height: 12px; fill: none; stroke: var(--deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .step[data-status="running"] .step-mark { border-color: var(--signal); border-top-color: transparent; animation: spin 0.9s linear infinite; }
  .step[data-status="done"] .step-mark { background: var(--signal); border-color: var(--signal); }
  .step[data-status="done"] .step-mark path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: draw 350ms 80ms var(--ease-out) forwards; }
  .step[data-status="error"] .step-mark { border-color: oklch(0.7 0.16 27); }
  .step h4 { font-size: 14px; font-weight: 600; }
  .step .detail { font-size: 12px; color: var(--signal); font-family: var(--font-mono); margin-top: 2px; }
  .bubbles { display: grid; gap: 6px; margin-top: 8px; }
  .bubble { font-size: 13.5px; color: var(--on-deep-2); background: var(--deep-2); border: 1px solid var(--deep-line); padding: 7px 11px; border-radius: 4px 12px 12px 12px; width: fit-content; max-width: 100%; }
  .bubble b { color: var(--on-deep); font-weight: 500; }
  .typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
  .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--on-deep-2); animation: blink 1.2s infinite both; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }

  /* report inside the conversation */
  .report-card { border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow: hidden; box-shadow: var(--shadow); }
  .report-card-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: color-mix(in oklch, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .report-card-head h3 { font-size: 14px; font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: 8px; }
  .report-card-head h3 .pill { font-weight: 400; }
  .report-card-body { position: relative; }
  .report-card.collapsed .report-card-body { max-height: 560px; overflow: hidden; }
  .report-card.collapsed .report-card-body::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  .report.in-chat { max-width: none; padding: 20px clamp(14px, 2.5vw, 28px) 36px; }
  .report.in-chat .rsec-side { position: static; }
  .report.in-chat .rsec { padding-top: 40px; }

  /* composer */
  .composer { padding: 10px var(--gutter) 20px; background: linear-gradient(transparent, var(--bg) 38%); }
  .composer > * { width: min(860px, 100%); margin-inline: auto; }
  .suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
  .suggest:empty { display: none; }
  .chip { border: 1px solid var(--line); background: color-mix(in oklch, var(--surface) 90%, transparent); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: 13.5px; cursor: pointer; transition: border-color 150ms, transform 150ms var(--ease-out); animation: rise 400ms var(--ease-out) both; }
  .chip:hover { border-color: var(--accent); transform: translateY(-1px); }
  .composer-bar {
    display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 20px;
    background: color-mix(in oklch, var(--surface) 92%, transparent); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 28px;
    box-shadow: 0 24px 60px -32px oklch(0.3 0.1 262 / 0.45);
    transition: border-color 200ms, box-shadow 200ms, opacity 200ms;
  }
  .composer-bar:focus-within { border-color: color-mix(in oklch, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent) 12%, transparent); }
  .composer textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none; font: inherit; font-size: 15.5px; line-height: 1.5; padding: 12px 0; max-height: 180px; color: var(--text); }
  .composer textarea::placeholder { color: var(--muted); }
  .composer textarea:disabled { cursor: progress; }
  .composer .round { width: 44px; height: 44px; }
  .composer.arriving .composer-bar { animation: land 500ms var(--ease-out) both; }

  /* ---------- settings ---------- */
  .settings { width: min(680px, 94vw); max-height: min(720px, 90dvh); padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 40px 120px -40px oklch(0.1 0.05 262 / 0.6); }
  .settings::backdrop { background: oklch(0.15 0.04 262 / 0.35); backdrop-filter: blur(6px); }
  .settings[open] { animation: rise 280ms var(--ease-out) both; }
  .settings-inner { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: inherit; }
  .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
  .settings-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; }
  .tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; font-size: 14px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
  .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
  .tab-panel { padding: 20px; overflow-y: auto; }
  .field { display: grid; gap: 8px; margin-bottom: 18px; justify-items: start; }
  .field > span { font-size: 13px; font-weight: 600; }
  .field select { min-width: 240px; }
  .muted { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
  .seg-group { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .seg-group span { display: block; padding: 8px 14px; font-size: 13.5px; background: var(--panel); border-right: 1px solid var(--line); cursor: pointer; }
  .seg-group label:last-child span { border-right: 0; }
  .history { display: grid; gap: 8px; }
  .history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
  .history .h-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .history .h-meta { grid-column: 1; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .history .h-actions { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 6px; }
  .history .h-actions .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
  .history .h-status.running { color: var(--warn); } .history .h-status.done { color: var(--good); } .history .h-status.error { color: var(--bad); }
  .history .empty-row { border-style: dashed; color: var(--muted); grid-template-columns: 1fr; }
  .about-logo { font-weight: 600; font-size: 1.4rem; margin-bottom: 6px; }
  .about-logo b { color: var(--accent); }
  .tab-panel h3 { font-size: 13px; font-weight: 600; margin: 20px 0 8px; }
  .health li { font-size: 14px; padding: 4px 0; }
  .health li::before { content: "● "; }
  .health li.ok::before { color: var(--good); } .health li.no::before { color: var(--warn); }

  @media (max-width: 860px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-102%); transition: transform 280ms var(--ease-out); box-shadow: 20px 0 60px -30px oklch(0 0 0 / 0.5); }
    .sidebar.open { transform: none; }
    .menu-toggle { display: grid; position: fixed; top: 12px; left: 12px; z-index: 5; background: color-mix(in oklch, var(--surface) 85%, transparent); border-color: var(--line); }
    .thread { padding-top: 64px; }
  }
  @media (max-width: 640px) {
    .face { border-radius: 26px; }
    .front { border-radius: 999px; }
    .bar-site { display: none; }
    .go { margin-left: 0; flex: 1; justify-content: center; }
    .back .pick { flex: 1 1 40%; }
    .back select { width: 100%; }
    .hero-rot { min-height: 2.2em; width: 100%; }
    .rot { white-space: normal; }
    .msg { grid-template-columns: minmax(0, 1fr); }
    .msg .who { display: none; }
  }

  /* ---------- evidence cards (inside agent messages) ---------- */
  .evidence { display: grid; gap: 20px; min-width: 0; }
  .panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
    padding: 22px; box-shadow: var(--shadow); min-width: 0;
  }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .panel h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
  .kicker { font-size: 12px; color: var(--muted); }

  .profile-top { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-top: 10px; }
  .brand-name { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; }
  .profile .one-liner { margin-top: 8px; color: var(--text-2); max-width: 64ch; }
  .pill { display: inline-block; font-family: var(--font-mono); font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .chips .pill { font-family: var(--font-text); font-size: 12.5px; }
  .chips .pill.comp { border-style: dashed; }

  .persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .persona { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; }
  .persona .pid { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
  .persona h4 { font-size: 15px; margin-top: 4px; }
  .persona p { font-size: 13px; color: var(--text-2); margin-top: 6px; }
  .persona .budget { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }

  .legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
  .legend li { display: flex; align-items: center; gap: 6px; }
  .qlist { display: grid; }
  .q { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
  .q:first-child { border-top: 0; }
  .q .qid { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .q .qtext { font-size: 14px; }
  .q .qmeta { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
  .q .qmeta .pill { font-size: 11px; padding: 1px 7px; }
  .q .qmeta .pill.branded { color: var(--warn); }
  .runs { display: flex; gap: 6px; }
  .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; position: relative; transition: all 250ms var(--ease-out); }
  .dot.asking { border-color: var(--accent); border-right-color: transparent; animation: spin 0.8s linear infinite; }
  .dot.judging { border-color: var(--accent); background: var(--accent-soft); animation: breathe 1s ease-in-out infinite; }
  .dot.rec { border-color: var(--accent); background: var(--accent); }
  .dot.men { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
  .dot.abs { border-color: var(--neutral-bar); background: transparent; }
  .dot.abs::after { content: ""; position: absolute; inset: 4px 1px auto; height: 2px; background: var(--neutral-bar); transform: translateY(-1px); }
  .dot.err { border-color: var(--bad); }
  .dot.pop { animation: pop 350ms var(--ease-out); }

  /* ---------- shared bits ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 500; font-size: 14px; color: var(--text); text-decoration: none; white-space: nowrap; min-height: 40px; }
  .btn:hover { border-color: var(--accent); }
  .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.ghost { background: transparent; }
  .btn:disabled { opacity: 0.7; cursor: progress; }
  .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .report-tools { margin-left: auto; display: flex; gap: 8px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .empty { font-size: 14px; color: var(--muted); padding: 8px 0; }
  .ai-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }
  .error-panel { border-color: var(--bad); }
  .error-panel h3 { color: var(--bad); }
  .error-panel p { margin-top: 8px; }
  .actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .loading { padding: 80px 0; text-align: center; color: var(--muted); }
  .tip {
    position: fixed; z-index: 20; pointer-events: none; white-space: pre-line;
    background: var(--deep); color: var(--on-deep); font-size: 12.5px; line-height: 1.45;
    padding: 8px 10px; border-radius: 8px; max-width: 300px; box-shadow: 0 8px 20px -8px oklch(0 0 0 / 0.4);
  }

  /* recent reports on the start page */
  .recent { grid-column: 1 / -1; margin-top: 8px; }
  .recent h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
  .recent ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  .recent a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color 150ms, transform 150ms var(--ease-out); }
  .recent a:hover { border-color: var(--accent); transform: translateY(-1px); }
  .r-brand { font-weight: 600; }
  .r-meta { grid-column: 1; font-size: 12px; color: var(--muted); }
  .r-score { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.3rem; color: var(--accent); }
  .r-score small { display: block; font-size: 11px; color: var(--muted); text-align: right; }

  /* live: real shopper quotes */
  .voice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
  .voice { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-s); padding: 12px 14px; }
  .voice blockquote { margin: 0; font-size: 14px; font-style: italic; color: var(--text); }
  .voice p { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

  /* ---------- report ---------- */
  .report { max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 120px; }

  .cover {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px);
    padding: clamp(28px, 4vw, 48px); border-radius: var(--r-l);
    background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden;
  }
  .cover::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.8 0.12 230 / 0.14), transparent); pointer-events: none; }
  .cover .eyebrow { color: var(--signal); margin-bottom: 14px; }
  .cover h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2rem + 4vw, 5.4rem); line-height: 0.95; letter-spacing: -0.02em; }
  .cover-meta { margin-top: 14px; font-size: 13px; color: var(--on-deep-2); }
  .headline { margin-top: 28px; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.2; max-width: 30ch; border-left: 2px solid var(--signal); padding-left: 16px; }
  .verdict { align-self: end; }
  .v-label { font-size: 13px; color: var(--on-deep-2); }
  .v-big { font-family: var(--font-mono); font-size: clamp(4.2rem, 3rem + 4vw, 7rem); line-height: 1; letter-spacing: -0.04em; }
  .v-big small { font-size: 0.4em; color: var(--on-deep-2); margin-left: 4px; }
  .v-frac { font-size: 13px; color: var(--on-deep-2); margin-top: 6px; }
  .v-sentence { margin-top: 26px; font-size: 15px; line-height: 1.5; }
  .v-range { margin-top: 6px; font-size: 13px; color: var(--on-deep-2); }
  .ci { position: relative; height: 30px; margin-top: 14px; }
  .ci .track { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--deep-line); }
  .ci .band { position: absolute; top: 8px; height: 10px; border-radius: 4px; background: oklch(0.8 0.12 230 / 0.4); }
  .ci .pt { position: absolute; top: 4px; width: 3px; height: 18px; border-radius: 2px; background: var(--signal); margin-left: -1.5px; }
  .ci .ticks { position: absolute; top: 24px; left: 0; right: 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--on-deep-2); }

  .howto { margin: 20px 0 8px; }
  .howto ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .howto li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); }
  .howto b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 13px; }
  .howto strong { font-size: 14.5px; }
  .howto p { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }

  .rsec { padding: 56px 0 8px; border-bottom: 1px solid var(--line); }
  .rsec:last-child { border-bottom: 0; }
  .rsec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
  .rsec-head .num { font-size: 13px; color: var(--accent); min-width: 24px; }
  .rsec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.7rem); line-height: 1.05; letter-spacing: -0.01em; }
  .rsec-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start; }
  .rsec-body { display: grid; gap: 22px; min-width: 0; }
  .rsec-side { display: grid; gap: 14px; position: sticky; top: 84px; }
  .why { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; }
  .why h3, .our-reading .ai-label { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
  .why p { font-size: 14px; color: var(--text-2); margin-top: 6px; }
  .our-reading { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; }
  .our-reading .ai-label { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
  .our-reading p { font-size: 15px; margin-top: 6px; }

  .facts { display: grid; gap: 8px; }
  .facts li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; max-width: 70ch; }
  .facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }

  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: flex; flex-direction: column; }
  .kpi .k-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
  .kpi .k-val { font-family: var(--font-mono); font-size: 1.9rem; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1; }
  .kpi .k-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
  .kpi .k-help { font-size: 12.5px; color: var(--text-2); margin-top: auto; padding-top: 10px; }

  .matrix { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; }
  .matrix figcaption { font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-bottom: 10px; }
  .matrix figcaption strong { color: var(--text); }
  .matrix .legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); }
  .matrix .legend span { display: inline-flex; align-items: center; gap: 5px; }
  .matrix li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
  .m-q { font-size: 13.5px; }
  .m-stage { font-size: 11px; color: var(--muted); white-space: nowrap; }
  .m-cells { display: flex; gap: 4px; }
  .cell { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--accent); }
  .cell.rec { background: var(--accent); }
  .cell.men { background: linear-gradient(135deg, var(--accent) 50%, transparent 50%); }
  .cell.abs { border-color: var(--neutral-bar); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 4px); }
  .matrix .legend .cell { width: 12px; height: 12px; border-width: 1.5px; border-radius: 3px; }

  .chart { margin: 0; }
  .chart figcaption { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
  .bars { display: grid; gap: 9px; }
  .bar-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 36px; gap: 12px; align-items: center; font-size: 14px; }
  .bar-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
  .bar-row .pos { font-size: 11px; color: var(--muted); min-width: 24px; }
  .bar-row.client .name { font-weight: 600; }
  .bar-row .val { font-size: 13px; text-align: right; color: var(--text-2); }
  .bar-wrap { display: block; padding: 3px 0; }
  .bar { display: block; height: 14px; border-radius: 0 4px 4px 0; background: var(--neutral-bar); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out); min-width: 3px; }
  .bar-row.client .bar { background: var(--accent); }
  .shown .bar { transform: scaleX(1); }
  .you { font-family: var(--font-mono); font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; }
  .kind { font-family: var(--font-mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

  .mini { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
  .mini i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease-out); }
  .shown .mini i { transform: scaleX(var(--v)); }

  .persona-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  .pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; display: grid; gap: 8px; align-content: start; }
  .p-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
  .p-head h4 { font-size: 15px; }
  .p-rate { color: var(--accent); font-size: 14px; }
  .pcard > p { font-size: 13.5px; color: var(--text-2); }
  .p-sub { font-size: 11px; color: var(--muted); }
  .pcard blockquote { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--text-2); border-left: 2px solid var(--line); padding-left: 10px; }
  .pcard cite { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
  .sub { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); margin: 6px 0 -8px; }
  .seg-bars { display: grid; gap: 10px; }
  .sb-row { display: grid; grid-template-columns: minmax(140px, 34%) 1fr 48px; gap: 12px; align-items: center; font-size: 14px; }
  .sb-row .mono { font-size: 13px; text-align: right; color: var(--text-2); }

  .said { display: grid; gap: 12px; }
  .said figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
  .said figcaption { font-size: 12.5px; color: var(--muted); }
  .said blockquote { margin: 8px 0 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
  .sent { font-size: 11px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
  .sent.positive { color: var(--good); } .sent.negative { color: var(--bad); } .sent.neutral { color: var(--muted); }
  .errors { border: 1px solid var(--bad); border-radius: var(--r-m); padding: 14px 16px; }
  .errors h4 { color: var(--bad); font-size: 14px; }
  .errors li { font-size: 14px; margin-top: 6px; }

  .actions { display: grid; gap: 12px; }
  .actions li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 20px; }
  .a-top { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: baseline; }
  .a-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; }
  .a-top h3 { font-size: 17px; }
  .actions p { font-size: 14.5px; color: var(--text-2); margin: 8px 0 0 42px; max-width: 75ch; }
  .actions strong { color: var(--text); font-weight: 600; }
  .next .ai-label { display: block; margin-top: 12px; }

  .lead-in { color: var(--text-2); margin-bottom: 14px; }
  .qtable { width: 100%; border-collapse: collapse; font-size: 14px; }
  .qtable th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 8px 10px; white-space: nowrap; }
  .qtable td { padding: 12px 8px; border-top: 1px solid var(--line); vertical-align: top; }
  .qtable td.num { white-space: nowrap; }
  .qtable tr.qrow { cursor: pointer; }
  .qtable tr.qrow:hover td { background: color-mix(in oklch, var(--panel-2) 50%, transparent); }
  .qtable .toggle { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
  .qtable .toggle::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform 200ms; }
  .qtable tr[aria-expanded="true"] .toggle::before { transform: rotate(90deg); }
  .qmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
  .qmeta .pill { font-size: 11px; padding: 1px 7px; }
  .pill.review { color: var(--warn); border-color: var(--warn); }
  .ans-row td { background: var(--panel); }
  .answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
  .answer { border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; background: var(--surface); font-size: 13.5px; }
  .answer header { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
  .answer .body { white-space: pre-wrap; max-height: 340px; overflow: auto; line-height: 1.5; }
  .answer mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
  .srcs { margin-top: 10px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
  .srcs span { font-family: var(--font-mono); background: var(--panel); border-radius: 3px; padding: 0 5px; }
  .flag { color: var(--bad); font-size: 12.5px; margin-top: 4px; }
  .flag::before { content: "⚠ "; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .two-col .sub { margin: 0 0 12px; }
  .two-col .facts + .sub { margin-top: 24px; }
  .two-col .facts li { font-size: 14px; }
  .glossary dt { font-weight: 600; font-size: 14px; margin-top: 12px; }
  .glossary dt:first-child { margin-top: 0; }
  .glossary dd { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
  .colophon { margin-top: 32px; font-size: 11px; color: var(--muted); }

  @media (max-width: 900px) {
    .cover, .rsec-grid, .two-col { grid-template-columns: 1fr; }
    .rsec-side { position: static; }
    .howto ol { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-tools .ghost { display: none; }
  }
  @media (max-width: 560px) {
    .matrix li { grid-template-columns: 1fr auto; }
    .m-stage { display: none; }
    .qtable .hide-sm { display: none; }
    .answers { grid-template-columns: 1fr; }
    .actions p { margin-left: 0; }
    .bar-row { grid-template-columns: minmax(90px, 40%) 1fr 30px; }
  }

}

@layer motion {
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes breathe { 50% { opacity: 0.45; transform: scale(0.85); } }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
  @keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes rot-in { from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes rot-out { to { opacity: 0; transform: translateY(-0.4em); filter: blur(8px); } }
  @keyframes hero-out { to { opacity: 0; transform: translateY(-24px); filter: blur(6px); } }
  @keyframes land { from { transform: translateY(12px) scale(0.98); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

  .enter { animation: rise 450ms var(--ease-out) both; }
  .bubble, .step { animation: slide-in 300ms var(--ease-out) both; }

  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  }
}

/* PDF / print: A4, light palette always, everything expanded except raw answers, no motion. */
@layer print {
  @page { size: A4; margin: 14mm 13mm 16mm; }
  @media print {
    :root {
      --bg: #fff; --surface: #fff; --panel: oklch(0.965 0.016 252); --panel-2: oklch(0.93 0.03 254); --line: oklch(0.88 0.025 255);
      --text: oklch(0.22 0.05 262); --text-2: oklch(0.38 0.04 260); --muted: oklch(0.5 0.03 258);
      --deep: oklch(0.27 0.075 263); --accent: oklch(0.5 0.19 262); --neutral-bar: oklch(0.72 0.03 258);
    }
    html, body { background: #fff !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    body { font-size: 11pt; }
    #bg, .corner, .skip, .tip, #landing, #app, .settings, .qtable .toggle::before { display: none !important; }
    .report { max-width: none; padding: 0; }
    .cover { break-inside: avoid; border-radius: 10px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; }
    .cover h1 { font-size: 46pt; }
    .v-big { font-size: 60pt; }
    .howto ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cover::after { display: none; }
    .rsec { padding: 0 0 6px; border-bottom: 0; break-before: page; }
    .rsec-head { break-after: avoid; }
    .rsec-side { position: static; }
    .rsec-grid { grid-template-columns: 1fr; gap: 16px; }
    .rsec-side { grid-template-columns: 1fr 1fr; align-items: start; }
    .rsec-head h2 { font-size: 24pt; }
    .kpi, .why, .our-reading, .pcard, .actions li, .said figure, .matrix li, .bar-row, .howto li, .errors, .chart, .facts li, .glossary dd { break-inside: avoid; }
    .matrix figcaption, .chart figcaption, .sub { break-after: avoid; }
    .two-col { grid-template-columns: 1fr 1fr; gap: 24px; }
    .ans-row { display: none !important; }
    .qtable tr { break-inside: avoid; }
    .bar, .mini i { transition: none !important; }
    .bar { transform: none !important; }
    .mini i { transform: scaleX(var(--v)) !important; }
    a { color: inherit; text-decoration: none; }
    *, *::before, *::after { animation: none !important; }
  }
}