:root{
  --ink:#15171c; --paper:#fcfbf9; --card:#ffffff; --body:#413f39; --faint:#6f6b63; --faint-ink:#77736b; --hair:#e2ded6; --accent:#1a49d4; --rule:#20222a; --ok:#1a9e5f; --warn:#b8791a; --violet:#7a5cf0; --pink:#d64f86; --hl:#ffe6a1; --shadow:30 32 36;
  --mono:"SF Mono",ui-monospace,Menlo,monospace;
  --serif:ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ink:#edeae4; --paper:#0c0d10; --card:#14161b; --body:#c3c0ba; --faint:#8a877f; --faint-ink:#9a968e; --hair:#22242a; --accent:#7ea2ff; --rule:#c9c6c0; --ok:#4ade9e; --warn:#e0a64b; --violet:#a48bff; --pink:#ff86b3; --hl:#4a4326; --shadow:0 0 0; }
}
:root[data-theme="dark"]{ --ink:#edeae4; --paper:#0c0d10; --card:#14161b; --body:#c3c0ba; --faint:#8a877f; --faint-ink:#9a968e; --hair:#22242a; --accent:#7ea2ff; --rule:#c9c6c0; --ok:#4ade9e; --warn:#e0a64b; --violet:#a48bff; --pink:#ff86b3; --hl:#4a4326; --shadow:0 0 0; }
:root[data-theme="light"]{ --ink:#15171c; --paper:#fcfbf9; --card:#ffffff; --body:#413f39; --faint:#6f6b63; --faint-ink:#77736b; --hair:#e2ded6; --accent:#1a49d4; --rule:#20222a; --ok:#1a9e5f; --warn:#b8791a; --violet:#7a5cf0; --pink:#d64f86; --hl:#ffe6a1; --shadow:30 32 36; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{overflow-x:clip}
body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; letter-spacing:-0.011em;
  overflow:hidden; position:relative;
}
::selection{ background:var(--hl); color:var(--ink); }

/* a11y: visually-hidden (present for screen readers + document outline, off-screen
   visually) and a keyboard skip link that only shows when focused. */
.vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skiplink{ position:absolute; left:12px; top:-48px; z-index:100; background:var(--accent); color:#fff;
  padding:8px 14px; border-radius:8px; font-size:13px; text-decoration:none; transition:top .15s; }
.skiplink:focus{ top:12px; outline:2px solid var(--ink); outline-offset:2px; }

/* ---- site-wide atmosphere: engineered-paper grain + a calm flowing wash ---- */
/* grain — the same feTurbulence soft-light speckle as the homepage */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04; mix-blend-mode:soft-light;
}
/* wash — blurred multi-radial colour drift, dialled DOWN (this is a work tool) */
body::after{
  content:""; position:fixed; top:-30vh; left:50%; width:130vw; height:110vh;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  filter:blur(70px); opacity:.22; will-change:transform;
  background:
    radial-gradient(34% 40% at 26% 30%,color-mix(in srgb,var(--accent) 60%,transparent),transparent 70%),
    radial-gradient(32% 38% at 74% 26%,color-mix(in srgb,var(--violet) 50%,transparent),transparent 70%),
    radial-gradient(36% 40% at 66% 72%,color-mix(in srgb,var(--pink) 42%,transparent),transparent 70%),
    radial-gradient(30% 34% at 32% 74%,color-mix(in srgb,var(--ok) 34%,transparent),transparent 70%);
  animation:appwash 30s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::after{opacity:.28} }
:root[data-theme="dark"] body::after{opacity:.28}
@keyframes appwash{from{transform:translateX(-50%) rotate(-7deg) scale(1)}to{transform:translateX(-50%) rotate(9deg) scale(1.12)}}

.stage{ display:grid; grid-template-columns:1fr 1px 1fr; height:100vh; position:relative; z-index:1; }

/* THE SINGLE RULE */
.rule{background:var(--rule);position:relative}
.gutter-source{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl; white-space:nowrap;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--faint); background:var(--paper); padding:16px 3px; max-height:80vh; overflow:hidden;
}
.gutter-source a{color:var(--accent);font-weight:600;text-decoration:none}
.gutter-source a:hover{text-decoration:underline}
.gutter-source .dot{color:var(--hair);padding:0 3px}

.half{ display:flex; flex-direction:column; padding:clamp(44px,7vh,96px) clamp(30px,6vw,100px); overflow-y:auto; }
/* both columns top-align on a shared band so question and answer relate spatially */
.half>:first-child{ margin-top:0; }
.half>:last-child{ margin-bottom:0; }

/* right column: answer scrolls internally, citation footer stays pinned */
.half.right{ padding:0; overflow:hidden; position:relative; }
.half.right>:first-child{ margin-top:0; }
.half.right>:last-child{ margin-bottom:0; }
.ans-scroll{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; padding:clamp(44px,7vh,96px) clamp(30px,6vw,100px); }
.ans-scroll>.answer{ margin:0; }
.cbar{ flex:none; display:flex; align-items:center; gap:12px; padding:13px clamp(30px,6vw,100px);
  border-top:1px solid var(--hair); background:var(--paper); }
.cbar[hidden]{ display:none; }
.cbar .code{ font-family:var(--mono,"SF Mono",ui-monospace,Menlo,monospace); font-size:12px; color:var(--accent); font-weight:600; }
.cbar .code,.cbar .host,.cbar .eff{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbar .host{ font-size:12px; color:var(--faint-ink); }
.cbar .eff{ font-size:12px; color:var(--ok); flex:none; }
.cbar .sep{ width:4px; height:4px; border-radius:50%; background:var(--hair); flex:none; }
.cbar .actions{ margin-left:auto; display:flex; gap:8px; flex:none; }
.cbar button,.cbar a.p{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--hair); background:transparent; color:var(--ink); border-radius:8px; padding:8px 12px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.cbar a.p{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cbar button:hover{ border-color:var(--accent); color:var(--accent); }
.cbar button:focus-visible,.cbar a.p:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* scroll-for-more fade over a long answer */
.scroll-fade{ position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none; z-index:2;
  background:linear-gradient(transparent, var(--paper)); opacity:0; transition:opacity .25s; }
.scroll-fade.on{ opacity:1; }

/* keyboard hint + kbd chips */
.kbd-hint{ font-size:11px; color:var(--faint-ink); margin-left:auto; white-space:nowrap; }
kbd{ font-family:var(--mono,"SF Mono",ui-monospace,Menlo,monospace); font-size:10px; line-height:1;
  border:1px solid var(--hair); border-radius:5px; padding:3px 5px; color:var(--faint-ink); background:var(--paper); }

/* answer button working state */
.go.busy{ opacity:.5; pointer-events:none; }
.go.busy svg{ animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

/* LEFT */
.jurwrap{display:inline-flex}
.jurwrap select{
  font:inherit; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
  background:transparent; border:1px solid var(--hair); border-radius:20px; padding:5px 10px; cursor:pointer; outline:none;
  max-width:150px; text-overflow:ellipsis;
}
.jurwrap select:focus-visible{border-color:var(--accent)}

.qlabel,.alabel,.plabel{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint-ink); }
.qlabel{margin-bottom:14px; transition:color .2s ease}
.askgroup:focus-within .qlabel{color:var(--accent)}

.ask{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  color:var(--ink); font-family:var(--serif); font-size:clamp(22px,2.5vw,33px);
  font-weight:500; letter-spacing:-0.018em; line-height:1.25;
  padding:0 0 16px; resize:none; outline:none; overflow:hidden; caret-color:var(--accent);
}
.ask::placeholder{color:var(--faint);opacity:.6;transition:opacity .2s}
.ask:focus::placeholder{opacity:.35}
/* the question underline draws in from the left on focus */
.askwrap{position:relative;display:block}
.askwrap::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.askwrap:focus-within::after{transform:scaleX(1)}

/* opening showcase — a "typed" example question with a blinking cursor */
.demoq{
  display:none; position:absolute; left:0; top:0; right:0; pointer-events:none;
  font-family:var(--serif); font-size:clamp(22px,2.5vw,33px); font-weight:500; letter-spacing:-0.018em; line-height:1.25;
  color:var(--faint); white-space:pre-wrap; overflow-wrap:anywhere;
}
body.showcase .demoq{display:block}
.clearrec{display:inline-block;margin-top:8px;padding:4px 0;border:0;background:transparent;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--faint);cursor:pointer}
.clearrec:hover{color:var(--accent)}
.clearrec:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}
.caret{
  display:inline-block; width:2px; height:1.02em; background:var(--accent);
  margin-left:3px; vertical-align:-0.12em; animation:caretBlink 1.05s steps(1,end) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* the live answer preview on the right — a specimen, visibly not a real answer */
.preview{opacity:.94; padding:20px 22px; border-radius:14px; border:1px dashed var(--hair);
  background:color-mix(in srgb, var(--accent) 5%, transparent)}
.preview .quote{font-size:clamp(18px,1.9vw,26px); max-width:28ch; letter-spacing:-0.02em; line-height:1.28}
.pv-label{display:inline-flex; align-items:center; gap:9px}
.pv-label::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:dotpulse 1.7s ease-in-out infinite}
.pv-hint{margin-top:clamp(18px,3vh,30px); padding-top:14px; border-top:1px solid var(--hair); font-size:12px; color:var(--faint-ink); max-width:40ch}

.askrow{display:flex;align-items:baseline;gap:18px;margin-top:22px;flex-wrap:wrap}
.go{
  background:transparent; border:0; color:var(--accent); font:inherit;
  font-size:13px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600;
  cursor:pointer; padding:6px 0; display:inline-flex; align-items:center; gap:9px; outline:none;
}
.go:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.go svg{width:15px;height:15px}
.hint{font-size:12px;color:var(--faint-ink)}

/* recent searches — no container; a plain minimal list under the field, on focus/typing */
.suggest{ margin-top:clamp(16px,3vh,26px); animation:sugIn .16s ease; }
.suggest[hidden]{ display:none; }
@keyframes sugIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.suggest .reclist{ display:flex; flex-direction:column; }
.suggest .chip{
  display:block; padding:8px 10px; border-radius:7px; text-align:left; cursor:pointer;
  background:transparent; border:0; font:inherit; font-size:16px; letter-spacing:-0.01em; color:var(--faint-ink); outline:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .12s, background .12s;
}
.suggest .chip:hover{ color:var(--ink); }
.suggest .chip.active{ color:var(--ink); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.suggest .chip:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* RIGHT */
.answer{max-width:40ch}
.alabel{margin-bottom:16px}
.lead{ font-size:clamp(16px,1.5vw,19px); color:var(--ink); line-height:1.45; margin-bottom:clamp(18px,3.2vh,28px); max-width:42ch; }
.lead .hl{color:var(--accent);font-weight:600}
.empty{color:var(--faint-ink);font-size:16px;max-width:34ch}

.quote{
  font-family:var(--serif); font-feature-settings:"liga" 1,"kern" 1;
  font-size:clamp(26px,3.3vw,43px); font-weight:500;
  letter-spacing:-0.022em; line-height:1.2; color:var(--ink);
  padding-left:24px; max-width:28ch; position:relative;
}
.quote::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--accent);border-radius:2px}

.srclink{
  display:inline-flex; align-items:center; gap:7px; margin-top:clamp(16px,3vh,26px);
  font-size:13px; letter-spacing:0.01em; color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding-bottom:2px;
}
.srclink:hover{border-bottom-color:var(--accent)}
.srclink .ext{font-size:12px}
.srclink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* scenario decomposition — a cited passage per topic */
.part{ margin:0 0 clamp(22px,3.5vh,34px); padding-bottom:clamp(18px,2.6vh,26px); border-bottom:1px solid var(--hair); }
.part:last-of-type{ border-bottom:0; }
.part-topic{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.quote.pquote{ font-size:clamp(16px,1.8vw,21px); max-width:48ch; line-height:1.32; }
.quote.pquote::before{ top:0; bottom:0; }

.example{ margin-top:clamp(24px,5vh,42px); font-size:14px; color:var(--faint-ink); max-width:46ch;
  padding-left:18px; border-left:1px solid var(--warn); }
.example .etag{ display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--warn); margin-bottom:8px; }
.example b{color:var(--ink);font-weight:600}

/* Conversational plain-language answer line — leads the card, then hands off
   to the "Verified verbatim" citation + quote below. Mirrors the landing-page
   demo (public/index.html renderCard) so both surfaces read alike. NO color-only
   meaning: the dot is a secondary cue alongside the "Yes/No/It depends" text,
   and "no" stays neutral (an exemption is good news, not a warning). */
.answer-say{ display:flex; align-items:baseline; gap:10px; margin:clamp(10px,2vh,16px) 0 6px;
  font-size:clamp(16px,1.6vw,19px); line-height:1.45; color:var(--ink); font-weight:500; }
.answer-say .vdot{ position:relative; top:-1px; width:9px; height:9px; border-radius:50%; background:var(--faint-ink); flex:none; align-self:center; }
.answer-say b{ font-weight:800; }
.answer-say .say-t{ max-width:46ch; }
.v-yes .vdot{ background:color-mix(in srgb, var(--ok) 62%, var(--paper)); }
.v-no .vdot{ background:var(--faint-ink); }               /* neutral, NOT red — an exemption is good news */
.v-depends .vdot{ background:color-mix(in srgb, var(--warn) 62%, var(--paper)); }
.read-hint{ font-size:14px; color:var(--faint-ink); margin:clamp(10px,2vh,16px) 0 clamp(14px,2.4vh,20px); }
/* reveal-stagger: the conversational line fades in before the full quote (.18s) */
.answer .answer-say{ animation-delay:.13s; }
.answer .read-hint{ animation-delay:.13s; }

.also{ margin-top:clamp(22px,4vh,36px); }
.also .plabel{margin-bottom:10px; color:var(--violet)}
.also a{ display:flex; align-items:center; gap:10px; color:color-mix(in srgb, var(--ink) 76%, var(--paper)); font-size:14px; text-decoration:none;
  padding:6px 0; transition:color .15s, transform .15s; }
.also a::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--violet); flex:none; opacity:.85; }
.also a::after{ content:"↗"; margin-left:auto; color:var(--hair); opacity:0; transform:translate(-4px,4px);
  transition:opacity .15s, transform .15s, color .15s; }
.also a:hover,.also a:focus-visible{ color:var(--violet); transform:translateX(3px); }
.also a:hover::after,.also a:focus-visible::after{ opacity:1; transform:none; color:var(--violet); }
.also a:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:2px; }

/* B: related passages as snippet cards — label + a teaser of that passage's own
   text, so when the top answer is adjacent the right passage is visible here. */
.related{ margin-top:clamp(22px,4vh,36px); }
.related .plabel{ margin-bottom:12px; color:var(--violet); }
.related .rel{ display:block; padding:12px 14px; margin-bottom:10px; border:1px solid var(--hair);
  border-radius:9px; text-decoration:none; transition:border-color .15s, transform .15s, background .15s; }
.related .rel::before,.related .rel::after{ content:none; display:none; }
.related .rel-label{ display:block; font-weight:600; font-size:14px; line-height:1.35;
  color:color-mix(in srgb, var(--ink) 90%, var(--paper)); }
.related .rel-snip{ display:block; margin-top:5px; font-size:13px; line-height:1.5; color:var(--faint-ink); }
.related .rel-src{ display:block; margin-top:7px; font-size:11.5px; letter-spacing:.02em; color:var(--violet); }
.related .rel:hover,.related .rel:focus-visible{ border-color:var(--violet); transform:translateX(2px);
  background:color-mix(in srgb, var(--violet) 5%, transparent); }
.related .rel:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

/* Cited eligibility assessment — verdict + condition rows + open items */
.verdict{ display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:clamp(20px,2.6vw,26px);
  line-height:1.15; margin:2px 0 4px; letter-spacing:-0.01em; }
.verdict-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.v-ok{ color:#127a4a; } .v-ok .verdict-dot{ background:#1a9c5e; }
.v-info{ color:#9a6a00; } .v-info .verdict-dot{ background:#c99000; }
.v-no{ color:#a3272b; } .v-no .verdict-dot{ background:#cf3438; }
@media (prefers-color-scheme:dark){ .v-ok{color:#4fd08a} .v-info{color:#ecc158} .v-no{color:#f0797d} }
:root[data-theme="dark"] .v-ok{color:#4fd08a} :root[data-theme="dark"] .v-info{color:#ecc158} :root[data-theme="dark"] .v-no{color:#f0797d}
:root[data-theme="light"] .v-ok{color:#127a4a} :root[data-theme="light"] .v-info{color:#9a6a00} :root[data-theme="light"] .v-no{color:#a3272b}

.conds{ margin-top:clamp(18px,3vh,28px); display:flex; flex-direction:column; gap:2px; }
.cond{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--hair); }
.cond:last-child{ border-bottom:1px solid var(--hair); }
.cond-mark{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; margin-top:1px; }
.s-met .cond-mark{ background:color-mix(in srgb,#1a9c5e 16%,transparent); color:#127a4a; }
.s-fail .cond-mark{ background:color-mix(in srgb,#cf3438 16%,transparent); color:#a3272b; }
.s-unk .cond-mark{ background:color-mix(in srgb,var(--ink) 9%,transparent); color:var(--faint-ink); }
.cond-body{ min-width:0; }
.cond-label{ font-weight:600; font-size:14.5px; color:color-mix(in srgb,var(--ink) 90%,var(--paper)); }
.cond-status{ font-weight:500; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--faint-ink); margin-left:6px; }
.cond-reason{ margin:4px 0 6px; font-size:13px; line-height:1.5; color:var(--faint-ink); }
.srclink-sm{ font-size:12px; }
.missing{ margin-top:clamp(18px,3vh,26px); }
.missing .plabel{ margin-bottom:8px; color:var(--violet); }
.missing ul{ margin:0; padding-left:18px; }
.missing li{ font-size:13.5px; line-height:1.6; color:color-mix(in srgb,var(--ink) 80%,var(--paper)); }
.disclaimer.warn{ color:color-mix(in srgb,#a3272b 78%, var(--ink)); border-top-color:color-mix(in srgb,#cf3438 30%,var(--hair)); }
@media (prefers-color-scheme:dark){ .disclaimer.warn{ color:#e8a0a2; } }

/* pinned "not a determination" line directly under the verdict (always visible) */
.not-determination{ margin:2px 0 12px; font-size:12.5px; line-height:1.45; color:var(--faint-ink);
  padding:7px 11px; border:1px solid var(--hair); border-radius:8px; background:color-mix(in srgb,var(--warn) 7%, transparent); }
.not-determination strong{ color:color-mix(in srgb,var(--ink) 88%, var(--paper)); }

/* what the tool did NOT check — honesty block so a positive verdict isn't read as complete */
.notchecked{ margin-top:clamp(18px,3vh,26px); }
.notchecked .plabel{ margin-bottom:8px; color:var(--faint-ink); }
.notchecked p{ font-size:13px; color:var(--faint-ink); margin-bottom:8px; max-width:52ch; }
.notchecked ul{ margin:0; padding-left:18px; }
.notchecked li{ font-size:13px; line-height:1.55; color:var(--faint-ink); }

/* case-note export button */
.copy-note{ margin-top:clamp(18px,3vh,26px); font-size:12px; letter-spacing:.06em; font-weight:600;
  border:1px solid var(--hair); background:transparent; color:var(--ink); border-radius:8px; padding:9px 14px; cursor:pointer;
  transition:border-color .15s, color .15s; }
.copy-note:hover{ border-color:var(--violet); color:var(--violet); }
.copy-note:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.copy-note.copied{ border-color:var(--ok); color:var(--ok); }

/* jurisdiction/availability note shown above a cited answer when assessment isn't available */
.assess-note{ font-size:13px; line-height:1.5; color:var(--faint-ink); margin-bottom:18px; padding:9px 12px;
  border-left:2px solid var(--violet); background:color-mix(in srgb,var(--violet) 5%, transparent); border-radius:0 6px 6px 0; }

.disclaimer{
  margin-top:clamp(26px,6vh,50px); font-size:12px; letter-spacing:0.01em;
  color:var(--faint-ink); max-width:44ch; padding-top:16px; border-top:1px solid var(--hair);
}
.source-inline{display:none}
.unmatched{ margin-top:14px; font-size:13px; color:var(--faint-ink); max-width:46ch; }
.unmatched .um-term{
  font-family:var(--mono,"SF Mono",ui-monospace,Menlo,monospace); font-size:12px;
  color:var(--warn); padding:1px 6px; border:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius:4px; white-space:nowrap;
}

/* ---------- life: motion & micro-interaction ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes growBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rail{0%{top:-30%;opacity:0}14%{opacity:.5}86%{opacity:.5}100%{top:102%;opacity:0}}
@keyframes dotpulse{0%,80%,100%{opacity:.18}40%{opacity:1}}
@keyframes gutterIn{from{opacity:0}to{opacity:1}}
.answer:focus{outline:none}
.gs-in{animation:gutterIn .55s ease both}

/* entrance — left column staggers up, rule fades in */
.half.left>*{opacity:0;animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.half.left>*:nth-child(1){animation-delay:.05s}
.half.left>*:nth-child(2){animation-delay:.17s}
.half.left>*:nth-child(3){animation-delay:.29s}
.rule{animation:fadeIn 1.1s both}

/* a living hairline — a soft accent comet drifts down the rule */
.rule::after{
  content:""; position:absolute; left:0; width:100%; height:22%; top:-30%;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);
  opacity:0; pointer-events:none; animation:rail 7s ease-in-out 1.1s 3;
}

/* answer reveal — parts fade up in sequence whenever content is injected */
.answer>*{opacity:0;animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
.answer .alabel{animation-delay:.02s}
.answer .lead{animation-delay:.10s}
.answer .quote{animation-delay:.18s}
.answer .example{animation-delay:.26s}
.answer .also{animation-delay:.34s}
.answer .disclaimer{animation-delay:.42s}
.answer .empty{animation-delay:0s}
/* "also in the manual" links reveal one-by-one, after the block */
.answer .also a{opacity:0;animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.answer .also a:nth-of-type(1){animation-delay:.34s}
.answer .also a:nth-of-type(2){animation-delay:.39s}
.answer .also a:nth-of-type(3){animation-delay:.44s}
/* scenario parts reveal as a group after the lead */
.answer .part{animation-delay:.16s}
/* the quote's accent bar draws down as the quote arrives */
.quote::before{transform:scaleY(0);transform-origin:top;animation:growBar .55s .22s cubic-bezier(.2,.7,.2,1) both}

/* searching dots */
.dots i{font-style:normal;animation:dotpulse 1.3s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}

/* searching — a scan line sweeps the passage (same stroke language) */
.search-art{width:150px; height:auto; overflow:visible; margin-bottom:22px}
.search-art path{stroke-width:3; stroke-linecap:round}
.search-art .hair{stroke:var(--hair)}
.search-art .scan{stroke:var(--accent); animation:scan 1.5s ease-in-out infinite}
@keyframes scan{0%{transform:translateY(0);opacity:.35}50%{transform:translateY(56px);opacity:1}100%{transform:translateY(0);opacity:.35}}

/* the answer arrow nudges forward on hover */
.go svg{transition:transform .16s ease}
.go:hover svg,.go:focus-visible svg{transform:translateX(4px)}

/* ---------- brand lockup (in-column, not a bar) + hand-drawn mark ---------- */
.brandline{display:flex; align-items:center; gap:12px; margin-bottom:clamp(30px,7vh,66px)}
.brandctl{display:flex; align-items:center; gap:12px; margin-left:auto}
/* compact header menu (Coverage / Settings / Sign out) */
.menu{position:relative; flex:none}
.menubtn{width:30px; height:30px; display:inline-grid; place-items:center; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--hair); border-radius:999px; color:var(--faint-ink); outline:none;
  transition:border-color .15s, color .15s}
.menubtn:hover,.menubtn[aria-expanded="true"]{border-color:var(--accent); color:var(--accent)}
.menubtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.menubtn svg{width:16px; height:16px}
.menulist{position:absolute; top:calc(100% + 8px); right:0; z-index:40; min-width:168px;
  background:var(--paper); border:1px solid var(--hair); border-radius:10px;
  box-shadow:0 12px 30px -14px rgba(20,20,25,.30); padding:5px; animation:sugIn .14s ease}
.menulist[hidden]{display:none}
.menulist a{display:block; padding:9px 11px; border-radius:7px; font-size:13px; color:var(--ink); text-decoration:none; white-space:nowrap}
.menulist a:hover,.menulist a:focus-visible{background:color-mix(in srgb, var(--accent) 7%, transparent)}
.menulist a.out{color:var(--warn)}
.mark{width:28px; height:28px; flex:none; overflow:visible}
.mark path{fill:none; stroke-linecap:round; stroke-width:2.3}
.mark .accent{stroke:var(--accent)}
.mark .hair{stroke:var(--faint)}
.mark .ln{stroke-dasharray:1; stroke-dashoffset:1; animation:draw1 .6s ease forwards}
.mark .l1{animation-delay:.15s}
.mark .l2{animation-delay:.30s}
.mark .l4{animation-delay:.58s}
.mark .l3{animation:draw1 .6s ease .44s forwards}
.wm{font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); font-weight:600; white-space:nowrap}
.wm b{color:var(--accent); font-weight:600}
.wm .wm-tag{color:var(--faint-ink); font-weight:400}
.wordmark-link{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.wordmark-link:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}
.themetoggle{
  width:30px; height:30px; flex:none; display:inline-grid; place-items:center;
  padding:0; cursor:pointer; background:transparent; border:1px solid var(--hair); border-radius:999px;
  color:var(--ink); outline:none; transition:border-color .15s, color .15s, transform .15s;
}
.themetoggle:hover{border-color:var(--accent); color:var(--accent)}
.themetoggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.themetoggle svg{width:16px; height:16px; overflow:visible}
.themetoggle .body{fill:currentColor}
.themetoggle .maskcirc{cx:28px; cy:8px; transition:cx .4s ease, cy .4s ease}
.themetoggle .rays{transform-box:fill-box; transform-origin:center; transition:opacity .32s ease, transform .32s ease}
/* dark → moon: rays retract, mask carves a crescent (mirrors the palette rules above) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themetoggle .rays{opacity:0; transform:scale(.3)}
  :root:not([data-theme="light"]) .themetoggle .maskcirc{cx:16.5px; cy:7.5px}
}
:root[data-theme="dark"] .themetoggle .rays{opacity:0; transform:scale(.3)}
:root[data-theme="dark"] .themetoggle .maskcirc{cx:16.5px; cy:7.5px}

/* ---------- empty / no-match "cited passage" specimen ---------- */
@keyframes draw1{to{stroke-dashoffset:0}}
@keyframes hlSweep{to{transform:scaleX(1)}}
.empty-wrap{display:flex; flex-direction:column; gap:32px; align-items:flex-start}
.empty-art{width:min(324px,80%); height:auto; overflow:visible}
.empty-art path,.empty-art circle{fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2}
.empty-art .hair{stroke:var(--faint); opacity:.6}
.empty-art .bar{stroke:var(--accent); stroke-width:3}
.empty-art .barmuted{stroke:var(--faint); stroke-width:3}
.empty-art .quote{stroke:color-mix(in srgb, var(--ink) 66%, transparent); stroke-width:2.4}
.empty-art .slash{stroke:var(--accent)}
.empty-art .srcline{stroke:var(--accent); opacity:.5; stroke-width:1.5}
.empty-art text{font-family:inherit; font-size:12px; letter-spacing:0.14em; font-weight:600;
  fill:var(--accent); opacity:0; animation:fadeIn .6s 1.4s forwards}
/* the highlighter block sweeps in from the left, like a real marker */
.empty-art .hl{fill:var(--hl); stroke:none; opacity:.9;
  transform-box:fill-box; transform-origin:left center; transform:scaleX(0);
  animation:hlSweep .7s .8s cubic-bezier(.5,0,.1,1) forwards}
.empty-art .dashline{stroke:var(--faint); stroke-width:2; stroke-dasharray:2 7; opacity:0; animation:fadeIn .6s .9s forwards}
.empty-art .d{stroke-dasharray:1; stroke-dashoffset:1; animation:draw1 .8s ease forwards}

/* reusable self-drawing stroke (glyphs) */
.inkdraw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw1 .7s ease forwards}

/* small cited-source glyph shown above the quote — same mark, same language */
.citeline{display:flex; align-items:center; gap:10px; margin-bottom:22px; flex-wrap:wrap;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint-ink)}
.citeline .ok{color:var(--ok); font-weight:600}
.answer .citeline{animation-delay:.14s}
.cbar button.copied{color:var(--ok); border-color:var(--ok)}
.citeglyph{width:20px; height:20px; flex:none; overflow:visible}
.citeglyph path{fill:none; stroke-linecap:round; stroke-width:2.3}
.citeglyph .accent{stroke:var(--accent)}
.citeglyph .hair{stroke:var(--faint)}

/* view-source link — reveal + arrow nudge (base styling defined above) */
.answer .srclink{animation-delay:.24s}
.srclink .ext{transition:transform .16s ease}
.srclink:hover .ext,.srclink:focus-visible .ext{transform:translate(2px,-2px)}

/* ---------- elevated life: animated gradient brand + action + verbatim badge ---------- */
@keyframes huemove{to{background-position:250% 0}}
@keyframes drawline{to{transform:scaleX(1)}}

/* wordmark "ratio" flows through the site's accent→violet→pink gradient */
.wm b{
  background:linear-gradient(100deg,var(--accent),var(--violet),var(--pink),var(--accent));
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:huemove 7s linear infinite;
}

/* the ASK action label picks up the same living gradient (svg arrow keeps its accent stroke) */
.go-tx{
  background:linear-gradient(100deg,var(--accent),var(--violet),var(--pink),var(--accent));
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; animation:huemove 7s linear infinite;
}

/* verbatim badge — a breathing "live" dot + a drawn accent underline under the word */
.citeline .ok{ position:relative; display:inline-flex; align-items:center; gap:7px; padding-bottom:2px; }
.citeline .ok::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;
  animation:livepulse 2.3s ease-in-out infinite;
}
.citeline .ok::after{
  content:""; position:absolute; left:13px; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--pink),var(--accent));
  background-size:250% 100%; transform:scaleX(0); transform-origin:left;
  animation:drawline .7s .5s cubic-bezier(.16,1,.3,1) both, huemove 6s linear infinite;
}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 0%,transparent)}}

@media (max-width:820px){
  html,body{height:auto}
  body{overflow:visible}
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1px auto;height:auto;min-height:0}
  .half{overflow:visible}
  .half>:first-child{margin-top:0}
  .half>:last-child{margin-bottom:0}
  .rule{height:1px}
  .gutter-source{display:none}
  .half{padding:clamp(28px,8vw,58px);justify-content:flex-start;min-width:0}
  .stage{min-width:0}
  .jurwrap select{max-width:132px}
  .half.left{padding-top:clamp(24px,8vw,52px);padding-bottom:clamp(10px,4vw,20px)}
  .half.right{padding:0;overflow:visible}
  .ans-scroll{overflow:visible;padding:clamp(14px,5vw,26px) clamp(28px,8vw,58px) 0}
  .ans-scroll>.answer{margin:0}
  .cbar{flex-wrap:wrap;padding:16px clamp(28px,8vw,58px)}
  .answer,.quote{max-width:none}
  .brandline{margin-bottom:34px; flex-wrap:wrap; gap:12px}
  .brandctl{margin-left:0}
  .wm{font-size:11px; letter-spacing:0.16em}
  .askrow{display:none}   /* after Enter the answer shows; the button/hints just eat space on mobile */
  .empty-art{width:min(300px,88%)}
  .source-inline{ display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); margin-top:24px; }
  .source-inline a{color:var(--accent);font-weight:600;text-decoration:none}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .half.left>*,.answer *{opacity:1 !important;transform:none !important}
  .quote::before{transform:none !important}
  .rule::after{display:none}
  .citeline .ok::after{transform:scaleX(1) !important}
  .empty-art .d,.mark .ln,.inkdraw{stroke-dashoffset:0 !important}
}