/* ============================================================
   Sightline — shared design system ("Signal" direction)
   One stylesheet powers the marketing site, the app, and the
   style guide. Per-vertical theming = override --accent + name.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* surfaces */
  --paper:#FCFBF9; --surface:#FFFFFF; --surface-sunken:#F4F2ED;
  /* ink */
  --ink:#16181D; --ink-2:#353A42; --muted:#6A707A; --faint:#969BA3;
  /* lines */
  --line:#E7E3DB; --line-strong:#D7D2C8;
  /* accent (per-vertical override target) */
  --accent:#2563EB; --accent-press:#1D4FD7; --accent-ink:#1B47B8; --accent-wash:#EEF3FE;
  /* risk */
  --high:#C2362B; --high-wash:#FBEDEB; --high-line:#F1D3CF;
  --med:#B26A00;  --med-wash:#FBF2E1;  --med-line:#EFDFBE;
  --low:#2E7D4F;  --low-wash:#EBF5EE;  --low-line:#CDE7D6;
  /* type */
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-ui:"Hanken Grotesk",system-ui,sans-serif;
  --font-read:"Spectral",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  /* shape */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(20,24,29,.05);
  --shadow:0 8px 28px -14px rgba(20,24,29,.18);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);background:var(--paper);color:var(--ink-2);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent-wash)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:5px;border:2px solid var(--paper)}
a{color:var(--accent-ink);text-decoration:none}
.mono{font-family:var(--font-mono)}
.read{font-family:var(--font-read)}

/* ── wordmark ─────────────────────────────── */
.sl-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.sl-mark .eye{width:22px;height:22px;flex:none;display:block}
.sl-mark .eye circle{fill:none;stroke:var(--accent);stroke-width:2}
.sl-mark .eye .pupil{fill:var(--accent);stroke:none}

/* ── type helpers ────────────────────────── */
.h-display{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.08}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-ink)}
.label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);letter-spacing:-.015em;font-weight:700}

/* ── buttons ─────────────────────────────── */
.btn{font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1;border:1px solid transparent;border-radius:var(--r);padding:11px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .16s var(--ease);background:var(--surface);color:var(--ink)}
.btn svg{width:16px;height:16px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-press)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--muted)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-sunken)}
.btn-sm{padding:8px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── inputs ──────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:13px;font-weight:600;color:var(--ink-2)}
.input{font-family:var(--font-ui);font-size:14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

/* ── dropzone ────────────────────────────── */
.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface);padding:40px 28px;text-align:center;transition:all .2s var(--ease);cursor:pointer}
.dropzone:hover{border-color:var(--muted)}
.dropzone.over{border-color:var(--accent);background:var(--accent-wash);transform:scale(1.008)}
.dropzone.has{border-style:solid;border-color:var(--low);background:var(--low-wash)}
.dropzone .dz-ico{width:48px;height:48px;border-radius:12px;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4)}
.dropzone.has .dz-ico{background:#fff}
.dropzone .dz-ico svg{width:24px;height:24px;color:var(--accent)}
.dropzone.has .dz-ico svg{color:var(--low)}

/* ── card / panel ────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}

/* ── risk badge ──────────────────────────── */
.risk{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:4px 9px;border-radius:var(--pill);border:1px solid}
.risk::before{content:"";width:7px;height:7px;border-radius:50%}
.risk.high{color:var(--high);background:var(--high-wash);border-color:var(--high-line)}.risk.high::before{background:var(--high)}
.risk.med{color:var(--med);background:var(--med-wash);border-color:var(--med-line)}.risk.med::before{background:var(--med)}
.risk.low{color:var(--low);background:var(--low-wash);border-color:var(--low-line)}.risk.low::before{background:var(--low)}

/* ── page-ref chip + clause tag (mono machine-truth layer) ── */
.pageref{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-sm);padding:2px 7px;white-space:nowrap}
.clausetag{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 7px}

/* ── finding card (collapsed → expanded) ──── */
.finding{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.finding:hover{border-color:var(--line-strong)}
.finding.open{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.finding-head{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);cursor:pointer}
.finding-head .ftitle{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.finding-head .fmeta{display:flex;align-items:center;gap:10px;margin-top:3px}
.finding-head .chev{color:var(--faint);transition:transform .2s var(--ease)}
.finding.open .chev{transform:rotate(90deg);color:var(--accent)}
.finding-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease)}
.finding.open .finding-body{grid-template-rows:1fr}
.finding-body > .inner{overflow:hidden}
.finding-detail{padding:0 var(--s5) var(--s5);border-top:1px solid var(--line-soft,transparent)}
.finding-detail .row{padding-top:var(--s4)}
.finding-detail .row .label{margin-bottom:5px;display:block}
.finding-detail .summary{font-family:var(--font-read);font-size:15px;color:var(--ink);line-height:1.6}
.finding-detail .why{font-size:13.5px;color:var(--muted);line-height:1.6}
.finding-detail .action{font-size:14px;color:var(--ink);font-weight:500}

/* ── citation / quote viewer (the centerpiece) ── */
.quote{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s4) var(--s4) var(--s5);position:relative}
.quote .qbar{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent);opacity:.5}
.quote .qtext{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.quote .qfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:var(--s3)}
.quote .qfoot .src{font-size:12px;color:var(--muted)}
.viewdoc{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--accent-ink);cursor:pointer}
.viewdoc svg{width:13px;height:13px}

/* ── chat panel ──────────────────────────── */
.chat{display:flex;flex-direction:column;height:100%}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5)}
.bubble{max-width:88%;font-size:14px;line-height:1.6;border-radius:var(--r-lg)}
.bubble.user{align-self:flex-end;background:var(--accent);color:#fff;padding:10px 14px;border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:12px 14px;border-bottom-left-radius:4px}
.bubble.bot .cite{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--r-sm);padding:3px 7px;cursor:pointer}
.chat-input{display:flex;gap:8px;padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
.chat-input .input{flex:1}

/* ── processing tracker ──────────────────── */
.steps{display:flex;flex-direction:column;gap:var(--s2)}
.step{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);opacity:.5;transition:all .35s var(--ease)}
.step.on,.step.done{opacity:1}
.step .sdot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-strong);flex:none;display:flex;align-items:center;justify-content:center;transition:all .3s}
.step.on .sdot{border-color:var(--accent);animation:slpulse 1.1s infinite}
.step.done .sdot{border-color:var(--low);background:var(--low)}
.step .sdot svg{width:11px;height:11px;color:#fff;opacity:0}.step.done .sdot svg{opacity:1}
.step .stext{font-size:14px;font-weight:500;color:var(--ink-2)}
@keyframes slpulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 0 0 6px rgba(37,99,235,0)}}

/* ── toast ───────────────────────────────── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:500;font-size:13.5px;padding:11px 18px;border-radius:var(--r);display:flex;align-items:center;gap:8px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:80}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:15px;height:15px;color:#86efac}

/* utility */
.muted{color:var(--muted)} .faint{color:var(--faint)}
.divider{height:1px;background:var(--line);border:0}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}