/* ============================================================================
   Saul — design system

   Designed around one act: reading statute for a long time without fatigue.
   That drives everything here.

   - Statutory text is set in a serif at a generous measure, because it is read
     in paragraphs, not scanned. Interface chrome is sans, so the two never
     compete for the eye.
   - The palette is low-chroma. A study tool used for three hours should recede;
     saturated accents belong on the two or three things that carry meaning
     (an exact match, an ungrounded citation, a failed rubric item).
   - Motion is short and only confirms a state change. Nothing decorative moves
     while someone is reading a section.

   Hierarchy is carried by TYPE and SPACE, not by colour or ornament. Controls
   are differentiated by shape so the eye can tell a mode (changes behaviour)
   from an example (fills the box) without reading either.
   ========================================================================= */

/* --- tokens ------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Light — "the printed act".
     Paper ground, hairline brass rules, ink that reads like a bare act rather
     than like an application. The accent is brass rather than the blue this
     had before, because in this palette the one thing allowed to be coloured
     is a citation, and a statutory reference printed in blue reads as a
     hyperlink to somewhere else rather than as the provision itself. */
  --bg:            #FAF8F3;
  --bg-tint:       #F5F2EA;
  --bg-sunken:     #F2EEE4;
  --surface:       #FFFFFF;
  --surface-2:     #FBF9F4;
  --surface-3:     #F2EEE4;
  --surface-hover: #F2EEE4;
  --line:          #E3DDCE;
  --line-strong:   #DDD5C3;
  /* A border that identifies a control (WCAG 1.4.11): 3.52 on surface, 3.31 on bg. */
  --line-input:    #8F887A;

  --ink:           #14161A;
  --ink-2:         #565D68;
  --ink-3:         #626975;   /* 5.21 / 5.53 / 4.77 on bg / surface / surface-3 */
  --ink-faint:     #8A8F99;

  --accent:        #8A6212;
  --accent-ink:    #6B4B0D;
  --accent-bright: #A2762A;
  --accent-wash:   #F5EEDD;
  --accent-line:   #D8CFBB;
  --quote-bg:      #FBF5E7;
  --on-accent:     #FFFFFF;

  --good:          #1B6F49;
  --good-wash:     #E3F2E8;
  --warn:          #96470f;
  --warn-wash:     #fbeee1;
  --bad:           #a12a1e;
  --bad-wash:      #fbe9e7;

  /* "Paper, not product": flat surfaces, hairline rules, depth from the type
     rather than from the shadows. These are kept as names because the whole
     stylesheet refers to them, and cut to almost nothing -- only the things
     that genuinely float above the page (a palette, a dialog) still cast
     anything a reader would notice. */
  --shadow:    0 1px 2px rgb(20 22 26 / .04);
  --shadow-md: 0 2px 8px rgb(20 22 26 / .07);
  --shadow-lg: 0 10px 34px rgb(20 22 26 / .13);
  /* The focus ring every component draws with box-shadow. Solid accent:
     5.16:1 light, 7.85:1 dark (it was 16-26% alpha, 1.66:1 on the dark rail). */
  --ring:      0 0 0 2px var(--accent);
  --elev:      0 8px 28px rgb(20 22 26 / .12);

  /* Three voices, and each has exactly one job.

     Newsreader carries the law and the display type: a statutory reader has
     to feel like a printed act. Archivo is the interface and never the law.
     IBM Plex Mono is the CITATION, and nothing else -- so a statutory
     reference is recognisable as one before it has been read. The system
     falls back through the old stacks, because a font that has not loaded
     should still read like a bare act rather than like a default. */
  --font-ui: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", sans-serif;
  --font-text: Newsreader, "Iowan Old Style", "Source Serif 4", Charter,
               Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
               Consolas, monospace;

  /* 640px, close to the measure of a printed bare act. Was 66ch, which moves
     with the font size and drifted wider the moment the serif changed. */
  /* The official logo (frontend/brand, built by admin/brand_assets.py from the
     supplied artwork). Each theme names its own variant, so the logo follows
     data-theme and the system preference through the same tokens as every
     colour: switching is immediate, and only the active variant downloads. */
  --logo-lockup: url("/static/brand/saul-lockup-light.png");
  --logo-mark:   url("/static/brand/saul-mark-light.png");
  --logo-full:   url("/static/brand/saul-logo-light.png");

  --measure: 640px;
  --shell:  1160px;

  /* Aliases for names the stylesheet already uses but never declared. An
     undeclared custom property makes the whole declaration invalid, so
     `background: color-mix(in srgb, var(--paper) 88%, transparent)` on the
     docked composer resolved to no background at all -- the answer scrolled
     visibly underneath the bar. Declared once, by reference: --bg and
     --line-strong are themselves redefined per theme, and var() resolves at
     use, so these follow both themes without being restated. */
  --paper: var(--bg);
  --line-firm: var(--line-strong);
  --cluster: 880px;

  /* One easing curve everywhere, so unrelated things feel like one system. */
  /* Breakpoints (spec §5.1), the same in script.js: a phone below 600px
     (max-width: 599px; panelForm "bottom"), the drawer below 1100px
     (max-width: 1099px; wideScreen), the pushed source panel from 1360px,
     and a short landscape phone (max-height: 500px). Nothing else. */
  /* Phase 1 scales (spec §5.1). Seven type roles, weights 400/500/600 only. */
  --t-display:  500 34px/40px var(--font-text);
  --t-title:    600 17px/24px var(--font-ui);
  --t-body:     400 14.5px/22px var(--font-ui);
  --t-meta:     500 12.5px/18px var(--font-ui);
  --t-law:      400 18px/30px var(--font-text);
  --t-law-lead: 600 19px/30px var(--font-text);
  --t-cite:     500 12.5px/18px var(--font-mono);
  --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px;
  --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;

  --ease:  cubic-bezier(.22, .72, .28, 1);
  --fast:  120ms var(--ease);
  --step:  190ms var(--ease);
  --slow:  320ms var(--ease);
}

/* Dark palette. Defined for BOTH the system preference and the explicit
   toggle, so the switch wins in either direction. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Must track :root[data-theme="dark"] exactly. These two blocks are the
       system preference and the explicit toggle, and a palette that landed in
       only one of them would give a system-dark visitor the previous look. */
    --bg:            #14110E;
    --bg-tint:       #1B1814;
    --bg-sunken:     #0F0D0A;
    --surface:       #1B1814;
    --surface-2:     #221E1A;
    --surface-3:     #2A2520;
    --surface-hover: #2A2520;
    --line:          #38312A;
    --line-strong:   #4A4138;
    --line-input:    #7F7466;   /* 3.87 on surface, 4.11 on bg */

    --ink:           #EEE9E0;
    --ink-2:         #B5AC9F;
    --ink-3:         #A69D8F;   /* 7.02 / 6.60 / 5.67 on bg / surface / surface-3 */
    --ink-faint:     #6B6358;

    --accent:        #D4A64A;
    --accent-ink:    #E3BC6E;
    --accent-bright: #E3BC6E;
    --accent-wash:   #2E2416;
    --accent-line:   #4E4026;
    --quote-bg:      #1E1A15;
    --on-accent:     #14110E;
    --logo-lockup: url("/static/brand/saul-lockup-dark.png");
    --logo-mark:   url("/static/brand/saul-mark-dark.png");
    --logo-full:   url("/static/brand/saul-logo-dark.png");

    --good:          #6FC79A;
    --good-wash:     #17291F;
    --warn:          #e0a06a;
    --warn-wash:     #2E2013;
    --bad:           #e08a7f;
    --bad-wash:      #301A16;
    --shadow:    0 1px 2px rgb(0 0 0 / .3);
    --shadow-md: 0 2px 10px rgb(0 0 0 / .4);
    --shadow-lg: 0 12px 38px rgb(0 0 0 / .55);
    --ring:      0 0 0 2px var(--accent);
    --elev:      0 8px 28px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* Dark — "reading at midnight". The same token set; only the ramp flips.
     Warm neutrals (an ink-brown black, a cream-grey ink), so dark mode is the
     same paper-and-brass product rather than a blue-black one. */
  --bg:            #14110E;
  --bg-tint:       #1B1814;
  --bg-sunken:     #0F0D0A;
  --surface:       #1B1814;
  --surface-2:     #221E1A;
  --surface-3:     #2A2520;
  --surface-hover: #2A2520;
  --line:          #38312A;
  --line-strong:   #4A4138;
  --line-input:    #7F7466;

  --ink:           #EEE9E0;
  --ink-2:         #B5AC9F;
  --ink-3:         #A69D8F;
  --ink-faint:     #6B6358;

  --accent:        #D4A64A;
  --accent-ink:    #E3BC6E;
  --accent-bright: #E3BC6E;
  --accent-wash:   #2E2416;
  --accent-line:   #4E4026;
  --quote-bg:      #1E1A15;
  --on-accent:     #14110E;
  --logo-lockup: url("/static/brand/saul-lockup-dark.png");
  --logo-mark:   url("/static/brand/saul-mark-dark.png");
  --logo-full:   url("/static/brand/saul-logo-dark.png");

  --good:          #6FC79A;
  --good-wash:     #17291F;
  --warn:          #e0a06a;
  --warn-wash:     #2E2013;
  --bad:           #e08a7f;
  --bad-wash:      #301A16;
  --shadow:    0 1px 2px rgb(0 0 0 / .3);
  --shadow-md: 0 2px 10px rgb(0 0 0 / .4);
  --shadow-lg: 0 12px 38px rgb(0 0 0 / .55);
  --ring:      0 0 0 2px var(--accent);
  --elev:      0 8px 28px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* Each theme names its scheme, so form controls, scrollbars and unstyled links
   follow the page rather than the OS: a dark OS on the light landing gave
   links Chrome's dark-scheme blue, 2.25:1 on paper (audit SAUL-15). */
:root[data-theme="light"] { color-scheme: light; }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] is a user-agent rule; any author-level `display` beats it, and most
   panels here are flex containers toggled with el.hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14.5px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

/* The page used to carry a soft accent glow across its top 420 pixels. It is
   gone deliberately: "paper, not product" -- flat surfaces, hairline rules, no
   gradients, and depth that comes from the type rather than from the light.
   Nothing replaces it; the ground is simply the ground. */

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--accent-wash); color: var(--accent-ink); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- shell -------------------------------------------------------------- */
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  /* Solid: it was translucent over a blur, and without the blur (audit §3)
     the answer showed through it while scrolling. */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--step), background var(--step);
}
/* The rule only appears once the page has moved, so the masthead reads as one
   piece with the page at rest. Toggled by the client. */
.topbar.stuck { border-bottom-color: var(--line); }

.topbar-inner { display: flex; align-items: center; gap: 16px; height: 62px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-radius: var(--r-1); }
.brand:focus-visible, .sb-brand:focus-visible, .public-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* The logo: one element everywhere, its artwork from the theme's tokens. The
   box takes the artwork's own proportions (aspect-ratio), so it is never
   stretched or cropped; height is the only size a surface sets. */
.brand-logo {
  display: block; flex: none; height: var(--logo-h, 28px);
  aspect-ratio: 1190 / 415;
  background: var(--logo-lockup) left center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.brand-logo--mark { aspect-ratio: 300 / 415; background-image: var(--logo-mark); }
.brand-logo--full { aspect-ratio: 1200 / 415; background-image: var(--logo-full); }
/* Forced colours drop background images: keep the logo as drawn. */
@media (forced-colors: active) { .brand-logo { forced-color-adjust: none; } }
.topbar .brand { --logo-h: 30px; }
@media (max-width: 1099px) { .topbar .brand { --logo-h: 26px; } }
.brand-sub {
  font-size: 12px; color: var(--ink-3); padding-left: 12px; margin-left: 1px;
  border-left: 1px solid var(--line-strong);
  letter-spacing: .01em;
}
@media (max-width: 1099px) { .brand-sub { display: none; } }

.topbar-spacer { flex: 1; }

.kbd-hint {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-3); font-size: 12.5px;
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.kbd-hint:hover { border-color: var(--line-strong); color: var(--ink-2); background: var(--surface-hover); }
kbd {
  font: 10.5px/1 var(--font-mono); padding: 4px 6px; border-radius: var(--r-1);
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-2);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
@media (max-width: 1099px) { .kbd-hint { display: none; } }

.icon-btn {
  display: grid; place-items: center; width: 35px; height: 35px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-2);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--line-strong); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 17px; height: 17px; transition: transform var(--slow); }
.icon-btn:hover svg { transform: rotate(-14deg); }

/* --- the shell (spec §6.1) ----------------------------------------------
   The rail is the only navigation. Above 1100px the top bar is not shown at
   all (the rail carries the name) unless the rail is folded away; below it, a
   52px bar holds the menu button, the name, where you are, and New. Inside
   the app the bar no longer carries the palette, Sign in, Get started or the
   gear: the rail has the search row and the account menu. The landing keeps
   its own bar untouched. */
.topbar-place, .topbar-new { display: none; }
body:not(.landing-open) .topbar #open-palette,
body:not(.landing-open) .topbar #auth-slot,
body:not(.landing-open) .topbar #open-settings,
body:not(.landing-open) .topbar .brand-sub { display: none; }
@media (max-width: 1099px) {
  .topbar-inner { height: 52px; padding-block: 0; }
  body:not(.landing-open) .topbar-place { display: block; font: var(--t-meta); color: var(--ink-2); }
  body:not(.landing-open) .topbar-new { display: grid; }
}
@media (min-width: 1100px) {
  /* The app's bar only: a policy page has no rail, and its bar is its header. */
  body:not(.landing-open):not(.sb-collapsed) :where(#topbar) { display: none; }
  body.sb-collapsed:not(.landing-open) .topbar-place { display: block; font: var(--t-meta); color: var(--ink-2); }
  body.sb-collapsed:not(.landing-open) .topbar-new { display: grid; }
}

/* Skip links: invisible until focused, then plainly there. */
.skip:focus {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 100;
  width: auto; height: auto; margin: 0; padding: var(--s-3) var(--s-5);
  clip: auto; overflow: visible; white-space: nowrap;
  font: var(--t-body); font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--r-2);
}

/* The drawer's "Go to question" exists only where the rail is a drawer. By id:
   .btn, declared later, would otherwise show it on the pinned rail. It stops
   short of the drawer's close button in the top corner. */
#drawer-go-q { width: calc(100% - 48px); margin-bottom: var(--s-3); }
@media (min-width: 1100px) { #drawer-go-q { display: none; } }

/* The search row: the palette's door in the rail. */
.sb-find {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  margin: var(--s-3) 0 var(--s-2); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-input); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink-3); font: var(--t-meta); font-weight: 400;
  text-align: left; cursor: pointer;
}
.sb-find span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-find svg { width: 15px; height: 15px; flex: none; }
.sb-find:hover { color: var(--ink-2); background: var(--surface-2); }
@media (hover: none) { .sb-find kbd { display: none; } }

/* The account menu opens upward from the foot of the rail. */
.sb-foot { position: relative; }
.sb-signin { width: 100%; margin-bottom: var(--s-3); }
.acct-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--s-2)); z-index: 5;
  display: flex; flex-direction: column; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--r-2);
  box-shadow: var(--elev);
}
.acct-item {
  display: block; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink); font: var(--t-body); text-align: left;
  text-decoration: none; cursor: pointer;
}
.acct-item:hover, .acct-item:focus-visible { background: var(--surface-2); }
.acct-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-2) 0; }

/* The disclaimer under the composer, not floating in the conversation. */
.composer-note { margin: var(--s-3) 0 0; font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.composer-note a { color: var(--ink-2); }
body.docked .composer-note { display: none; }
body[data-tab="ask"] main > footer, body[data-tab="case"] main > footer { display: none; }

/* --- hero --------------------------------------------------------------- */
main { padding: 0 0 90px; }

.hero {
  max-width: var(--cluster); margin: 0 auto;
  padding: 46px 0 30px; text-align: center;
  animation: rise-lg var(--slow) both;
}
.hero h1 {
  margin: 0 0 12px;
  font-family: var(--font-text);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.16;
  text-wrap: balance;
  letter-spacing: -.022em;
  font-weight: 600;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-3);
  text-wrap: pretty;
}
@media (max-width: 599px) { .hero { padding: 34px 0 22px; } }

/* --- search ------------------------------------------------------------- */
.ask,
#quickstart,
#answer,
#provisions,
#search-meta,
footer {
  max-width: var(--cluster);
  margin-left: auto; margin-right: auto;
}

.searchbar { margin-bottom: 16px; }

/* The submit sits INSIDE the field. One object, one focal point — rather than
   a text box next to a coloured slab competing for the same attention. */
.search-field {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: var(--r-3);
  transition: border-color var(--step), box-shadow var(--step);
}
/* One shape in every state, and no shadow at rest (readiness audit §3): the
   composer is a field on the page, not a floating card. */
.search-field:hover { border-color: var(--ink-3); }
.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.search-field > svg {
  position: absolute; left: 19px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
  transition: color var(--step);
}
.search-field:focus-within > svg { color: var(--accent); }

#q {
  flex: 1; min-width: 0;
  padding: 19px 8px 19px 18px;
  font-size: 16px;
  background: transparent; color: var(--ink);
  border: 0; border-radius: var(--r-3);
}
#q:focus { outline: none; }
#q::placeholder { color: var(--ink-3); }
#q::-webkit-search-cancel-button { display: none; }

#go {
  flex: none; margin: 7px 7px 7px 4px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-2);
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--on-accent); font-size: 14px; font-weight: 500;
  letter-spacing: -.005em;
  transition: background var(--fast), transform var(--fast);
}
#go:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
#go:active:not(:disabled) { transform: scale(.97); }
#go:disabled { opacity: .55; cursor: default; }
#go .go-key { font: 10.5px/1 var(--font-mono); opacity: .62; }
@media (max-width: 599px) {
  #go { padding: 11px 15px; }
  #go .go-key { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--r-2);
  border: 1px solid var(--line-input); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 500;
  transition: background var(--fast), border-color var(--fast), transform var(--fast);
}
.btn:hover:not(:disabled) {
  background: var(--surface-hover); border-color: var(--line-strong);
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  padding: 10px 22px; font-weight: 500;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: var(--r-1); box-shadow: none; }

/* --- the style menu (spec §6.3) -----------------------------------------
   One control for the kind of reply. Answer styles are written by the model
   and counted; research tools read stored statute and are free -- two groups,
   each with its caption, so they never read as one list of the same thing. */
/* Always there, quietly (the brief: every style discoverable at every size);
   it used to appear only once something was typed. */
.style-row { position: relative; display: block; margin: var(--s-3) 0 var(--s-5); }
.style-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); min-height: 36px;
  border: 1px solid var(--line-input); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); font: var(--t-meta);
  cursor: pointer;
}
.style-btn-key { color: var(--ink-3); font-weight: 400; }
.style-btn svg { width: 14px; height: 14px; color: var(--ink-3); }
.style-btn:hover { background: var(--surface-2); }
.style-menu {
  position: absolute; left: 0; top: calc(100% + var(--s-2)); z-index: 30;
  width: min(360px, calc(100vw - 32px)); padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--r-3);
  box-shadow: var(--elev);
}
body.docked .style-menu { top: auto; bottom: calc(100% + var(--s-2)); }
.style-group + .style-group { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.style-caption { margin: 0 var(--s-3) var(--s-1); font: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.style-note { margin: 0 var(--s-3) var(--s-3); font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.style-item {
  display: block; width: 100%; padding: var(--s-3); min-height: 44px;
  border: 0; border-radius: var(--r-2); background: none; text-align: left; cursor: pointer;
}
/* Selected is the wash and a check mark; focus is the ring alone, so the
   two never read as one (readiness audit §2.9). */
.style-item { position: relative; padding-left: calc(var(--s-3) + 20px); }
.style-item:hover { background: var(--surface-2); }
.style-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.style-item[aria-checked="true"] { background: var(--accent-wash); }
.style-item[aria-checked="true"] .style-item-label { color: var(--accent-ink); }
.style-item[aria-checked="true"]::before {
  content: "✓"; position: absolute; left: var(--s-3); top: var(--s-3);
  font: 600 14px/22px var(--font-ui); color: var(--accent-ink);
}
.style-item[disabled] { cursor: not-allowed; }
.style-item[disabled] .style-item-label::after { content: " — unavailable here"; color: var(--ink-3); font-weight: 400; }
.style-item-label { display: block; font: var(--t-body); font-weight: 500; color: var(--ink); }
.style-item-desc { display: block; font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.style-free {
  margin-left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-1);
  font: var(--t-meta); color: var(--good); border: 1px solid currentColor;
}

/* --- Exact text: stored statute, no model -------------------------------- */
/* The answer body keeps whitespace (pre-wrap) for prose; this block is markup,
   so only the statute itself keeps its line breaks. Controls are interface
   type, not the reading serif. */
.exact-result { white-space: normal; font: var(--t-body); }
.exact-actions .btn { font-family: var(--font-ui); }
.exact-cite { margin: 0; font: var(--t-cite); color: var(--ink-2); }
.exact-heading { margin: var(--s-2) 0; font: var(--t-title); }
.exact-source { margin: 0 0 var(--s-5); font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.exact-source a { color: var(--ink-2); }
.exact-repealed { color: var(--bad); font-weight: 600; }
.exact-text { font: var(--t-law); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.exact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.exact-said { font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.exact-guidance p { margin: 0 0 var(--s-4); font: var(--t-body); }

/* --- starters ----------------------------------------------------------- */
.examples {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  font-size: 13.5px;
}
.case-cta {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-top: 22px; padding: 14px 16px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3);
  transition: border-color var(--fast), background var(--fast);
}
.case-cta:hover { border-color: var(--accent-line); background: var(--surface-2); }
.case-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-cta > svg { flex: none; color: var(--accent); }
.case-cta-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.case-cta-text b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.case-cta-go { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); }
body.docked .case-cta { display: none; }
@media (max-width: 599px) { .case-cta-go { display: none; } }
.examples-label {
  color: var(--ink-3); font-size: 11px; font-weight: 600;
  margin-right: 2px;
}
.ex {
  position: relative;
  color: var(--ink-3); text-decoration: none;
  padding: 5px 2px; font-size: 13.5px;
  transition: color var(--fast);
}
.ex::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--step);
}
.ex:hover { color: var(--accent); }
.ex:hover::after { transform: scaleX(1); }
.ex + .ex::before {
  content: "·"; color: var(--ink-3); margin-right: 8px; margin-left: 0;
}

/* --- quick access ------------------------------------------------------- */
/* The first paint should demonstrate what the corpus holds, not sit empty. */
.quickgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
}
.qcard {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 15px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); color: inherit;
  transition: transform var(--step), box-shadow var(--step), border-color var(--step);
  animation: rise var(--slow) both;
}
.qcard:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}
.qcard:active { transform: translateY(0); }
.qcard-code {
  font: 11px/1 var(--font-mono); font-weight: 600;
  color: var(--accent);
}
.qcard-name { font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; }
.qcard-note { font-size: 12px; color: var(--ink-3); }

/* Stagger, so the grid assembles rather than snapping in as a block. */
.qcard:nth-child(1) { animation-delay: 40ms; }
.qcard:nth-child(2) { animation-delay: 80ms; }
.qcard:nth-child(3) { animation-delay: 120ms; }
.qcard:nth-child(4) { animation-delay: 160ms; }
.qcard:nth-child(5) { animation-delay: 200ms; }
.qcard:nth-child(6) { animation-delay: 240ms; }

.quick-label {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  margin: 34px 0 -22px;
}

/* --- panels ------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-3); padding: 26px 28px; margin-top: 22px;
  animation: rise var(--step) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-lg {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.panel-head h2 {
  font-size: 17px; margin: 0; font-weight: 600; letter-spacing: -.016em;
}
.panel-note, .note { font-size: 13px; color: var(--ink-3); }

/* --- status ------------------------------------------------------------- */
.status {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px auto 0; max-width: var(--cluster);
  padding: 12px 15px; border-radius: var(--r-2);
  background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid var(--accent-line); font-size: 13.5px;
  animation: rise var(--step) both;
}
.status.error {
  background: var(--bad-wash); color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
}
.status .spin { width: 15px; height: 15px; flex: none; margin-top: 1px; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- answer ------------------------------------------------------------- */
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tag {
  font: 12px/1 var(--font-ui);
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--ink-3); border: 1px solid var(--line);
}
.tag.ok   { background: var(--good-wash); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.tag.warn { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

.prose {
  font-family: var(--font-text); font-size: 17.5px; line-height: 1.7;
  max-width: var(--measure); color: var(--ink); white-space: pre-wrap;
  letter-spacing: -.002em;
}
.prose h3 {
  font: var(--t-title); color: var(--ink);
  margin: 30px 0 9px; white-space: normal;
  display: flex; align-items: center; gap: 10px;
}
/* A hairline that runs out from each label, so the answer scans as a document
   with sections rather than a wall with bold bits. */
.prose h3::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line);
}
.prose h3:first-child { margin-top: 0; }
.prose h4 {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--ink); margin: 22px 0 6px; white-space: normal;
}
.prose h3 + h4 { margin-top: 4px; }
.prose strong { font-weight: 600; }

/* An explanation's later sections, behind a row of buttons (script.js,
   gatherMore). The statute, plain words and example stay in the reading
   flow; these open one at a time beneath the row. */
.ans-more { margin-top: 26px; white-space: normal; }
.ans-more-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ans-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13.5px/1 var(--font-ui); color: var(--ink-2);
  padding: 9px 12px 9px 14px; min-height: 36px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--step), border-color var(--step), color var(--step);
}
.ans-more-btn svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--step);
}
.ans-more-btn:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.ans-more-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ans-more-btn[aria-expanded="true"] {
  background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink);
}
.ans-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ans-more-panel {
  margin-top: 12px; padding: 16px 20px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2);
  white-space: pre-wrap; animation: rise var(--step) both;
}
.ans-more-panel h3 { margin-top: 0; }
/* Split from the answer by the provision chips (script.js, messageTurn):
   the chips already make the break the tray's top margin was for. */
.prose-more .ans-more { margin-top: 12px; }

/* The provisions under an answer (script.js, sourceChips). Slimmer and plainer
   than the buttons below them: a line of references, not a second toolbar. */
.ans-cites { margin-top: 16px; max-width: 72ch; }
.ans-cites .ans-more-bar { gap: 6px; }
.cite-chip, .cite-more {
  min-height: 30px; padding: 5px 11px; gap: 0;
  font: 500 13px/1.3 var(--font-ui); color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-2);
  max-width: 100%; white-space: normal; text-align: left;
}
.cite-chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.chip-cite { font: var(--t-cite); color: var(--ink); }
.chip-h { overflow-wrap: anywhere; }
.cite-more { cursor: pointer; border-style: dashed; color: var(--ink-3); }
.cite-more:hover { color: var(--accent-ink); border-color: var(--accent-line); }
/* The first sentence of the plain answer: the answer itself. */
.ans-lead { font: var(--t-law-lead); }
@media (max-width: 599px) {
  .cite-chip, .cite-more, .ans-more-btn { min-height: 40px; }
}

/* Where an example came from. The Act's own Illustration is the legislature's
   example and wears the accent; Saul's is marked plainly as ours; the edge
   case, where the rule stops applying, is set apart from both. */
.ex-tag {
  display: inline-block; vertical-align: 1px; margin-right: 4px;
  font: 600 11px/1 var(--font-ui);
  padding: 4px 7px; border-radius: var(--r-1); white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg-sunken); color: var(--ink-2);
}
.ex-tag-act { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
/* The reader's own facts, worked through: the example that matters most to them. */
.ex-tag-yours { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
.ex-tag-edge { background: var(--warn-wash); color: var(--warn);
               border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

.ans-more-note {
  margin: 12px 0 0; font: 13px/1.5 var(--font-ui); color: var(--ink-3); white-space: normal;
}
@media (max-width: 599px) {
  .ans-more-panel { padding: 14px 14px; }
}

.caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom;
  background: var(--accent); animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- provisions --------------------------------------------------------- */
.provisions { margin-top: 24px; }
.provisions > h2 { font-size: 17px; margin: 0 0 3px; font-weight: 600; letter-spacing: -.016em; }

.prov {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 19px 21px; margin-top: 12px;
  transition: border-color var(--step), box-shadow var(--step), transform var(--step);
  animation: rise var(--step) both;
}
.prov:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.prov-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 3px; }
/* Principle 01, "the citation is the interface": every statutory reference is
   mono and brass, and mono is used for nothing else -- so a citation is
   recognisable as one before it has been read. */
.prov-cite {
  font-family: var(--font-mono); font-weight: 500;
  color: var(--accent); font-size: 14px; letter-spacing: -.01em;
}
.prov-badge {
  font: 12px/1 var(--font-ui);
  padding: 4px 7px; border-radius: var(--r-1); background: var(--good-wash); color: var(--good);
}
.prov-actions {
  margin-left: auto; display: flex; gap: 5px;
  opacity: 0; transform: translateX(4px);
  transition: opacity var(--step), transform var(--step);
}
.prov:hover .prov-actions, .prov:focus-within .prov-actions { opacity: 1; transform: none; }
@media (hover: none) { .prov-actions { opacity: 1; transform: none; } }

.prov-heading { color: var(--ink-3); font-style: italic; font-size: 14px; margin-bottom: 11px; }
.prov-text {
  /* The signature element of the system. A brass rule rather than the pale
     one it had: this is the statute, and it should be what your eye lands on. */
  font-family: var(--font-text); font-size: 17px; line-height: 1.7;
  white-space: pre-wrap; max-width: var(--measure);
  background: var(--quote-bg); border-left: 3px solid var(--accent);
  padding: 16px 20px; border-radius: 0 var(--r-2) var(--r-2) 0;
  max-height: 22em; overflow-y: auto;
  scrollbar-width: thin;
}
.prov-refs { margin-top: 12px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.xref {
  color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--accent-line);
  background: var(--accent-wash); font-size: 12.5px;
  transition: background var(--fast), transform var(--fast);
}
.xref:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
.prov-foot {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font: 12px/1.5 var(--font-ui); color: var(--ink-3);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.prov-foot a { color: var(--ink-3); }

/* --- skeletons ---------------------------------------------------------- */
.skeleton { border-radius: var(--r-1); background: var(--bg-sunken); position: relative; overflow: hidden; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
  animation: sweep 1.4s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-line { height: 13px; margin: 9px 0; }

/* --- command palette ---------------------------------------------------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(8 9 11 / .5);
  display: grid; place-items: start center; padding-top: 12vh;
  animation: fade var(--fast) both;
}

.palette {
  width: min(640px, 92vw);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop var(--step) both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.palette-input {
  width: 100%; padding: 18px 21px; font-size: 16px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
}
.palette-input:focus { outline: none; }
.palette-list { max-height: 52vh; overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.palette-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 0; border-radius: var(--r-2);
  background: none; text-align: left; color: var(--ink); font-size: 14.5px;
  transition: background var(--fast), color var(--fast);
}
.palette-item:hover, .palette-item[aria-selected="true"] { background: var(--accent-wash); color: var(--accent-ink); }
.palette-item .pi-sub { color: var(--ink-3); font-size: 12.5px; margin-left: auto; white-space: nowrap; }
.palette-empty { padding: 28px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* --- revise ------------------------------------------------------------- */
.revise-stats { font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
/* A card reads in order: what it asks and which provision, the question in
   the law's own type, then -- once revealed -- the answer, set apart by a
   rule rather than a box inside a box. */
.card {
  border: 1px solid var(--line); border-radius: var(--r-3);
  padding: var(--s-6); margin-top: var(--s-5); background: var(--surface);
  max-width: calc(var(--measure) + 2 * var(--s-6));
  animation: rise var(--step) both;
}
.card-kind { margin: 0; font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.card-cite { margin: var(--s-1) 0 var(--s-4); font: var(--t-cite); color: var(--accent-ink); overflow-wrap: anywhere; }
.card-cite:empty { display: none; }
.card-front { font: var(--t-law); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-back {
  font: 400 17px/28px var(--font-text); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line);
  animation: rise var(--step) both;
}
.card-actions { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
#grade-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.grade { min-width: 6.5rem; justify-content: space-between; }
.grade[data-grade="0"]:hover { border-color: var(--bad); color: var(--bad); }
.grade[data-grade="3"]:hover { border-color: var(--warn); color: var(--warn); }
.grade[data-grade="4"]:hover, .grade[data-grade="5"]:hover { border-color: var(--good); color: var(--good); }
/* The key that does the same thing, legible: ink-2 on the surface (5.7:1+),
   in a key outline, not a 10px grey hint. */
.g-key {
  display: inline-block; min-width: 1.6em; padding: 0 var(--s-2); margin-left: var(--s-2);
  font: var(--t-cite); font-size: 11.5px; line-height: 18px; text-align: center; color: var(--ink-2);
  border: 1px solid var(--line-input); border-radius: var(--r-1); background: var(--surface-2);
}
@media (pointer: coarse) { .g-key { display: none; } .grade, #show-back { min-height: 44px; } }

/* --- practice ----------------------------------------------------------- */
.row { display: flex; gap: 8px; margin: 17px 0; align-items: center; flex-wrap: wrap; }
.row input[type="text"] {
  flex: 1; min-width: 190px; padding: 11px 14px;
  border: 1px solid var(--line-input); border-radius: var(--r-2); background: var(--surface);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.row input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.row input.narrow { flex: 0 0 130px; min-width: 100px; }

.question-prompt { font: var(--t-law); color: var(--ink); max-width: var(--measure); margin-bottom: var(--s-3); }
.question-guidance {
  font: var(--t-body); color: var(--ink-2);
  border-left: 2px solid var(--accent-line); padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin-bottom: var(--s-5); max-width: var(--measure);
}
#practice-answer {
  width: 100%; padding: 17px; border-radius: var(--r-2);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-text); font-size: 16.5px; line-height: 1.7; resize: vertical;
  transition: border-color var(--fast), box-shadow var(--fast);
}
#practice-answer:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.wordcount { font: 12px var(--font-ui); color: var(--ink-3); }

.result { margin-top: 23px; border-top: 1px solid var(--line); padding-top: 21px; }
.score { font-size: 32px; font-weight: 600; letter-spacing: -.028em; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.score.good { color: var(--good); }
.score.poor { color: var(--warn); }
.score-bar { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; margin-bottom: 19px; max-width: 340px; }
.score-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--good); width: 0; transition: width 620ms var(--ease); }
.score-bar.poor span { background: var(--warn); }

.rubric { list-style: none; padding: 0; margin: 0 0 17px; }
.rubric li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rubric li:last-child { border-bottom: none; }
.rubric .mark { font: 12px/1.5 var(--font-ui); flex: 0 0 40px; }
.rubric li.pass .mark { color: var(--good); }
.rubric li.miss .mark { color: var(--warn); }
.rubric .why { color: var(--ink-3); font-size: 12.5px; display: block; margin-top: 2px; }

/* --- empty states ------------------------------------------------------- */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty svg { width: 34px; height: 34px; color: var(--ink-3); margin-bottom: 15px; }
.empty h3 { margin: 0 0 7px; font-size: 16px; color: var(--ink-2); font-weight: 600; letter-spacing: -.012em; }
.empty p { margin: 0 auto; font-size: 14px; max-width: 42ch; line-height: 1.6; }

/* --- footer ------------------------------------------------------------- */
footer { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.disclaimer { margin: 0; font-size: 12.5px; color: var(--ink-3); max-width: 78ch; line-height: 1.62; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 599px) {
  .wrap { padding: 0 16px; }
  .panel { padding: 21px 18px; border-radius: var(--r-2); }
  .prose { font-size: 16.5px; }
  .score { font-size: 27px; }
  .card { padding: 21px 18px; }
  #q { padding: 16px 6px 16px 16px; font-size: 15.5px; }
  .quickgrid { grid-template-columns: 1fr; }
}

@media (max-width: 1099px) and (min-width: 600px) {
  .quickgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Quoted statutory text inside a generated answer. The models return the
   provision as a markdown blockquote; it should read as the statute speaking,
   visually distinct from the explanation around it. */
.prose blockquote {
  margin: 14px 0;
  padding: 13px 18px;
  border-left: 3px solid var(--accent-line);
  background: var(--surface-2);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.prose blockquote em { font-style: italic; }

/* --- accounts ------------------------------------------------------------ */
.auth-slot { display: flex; align-items: center; }
.account { display: flex; align-items: center; gap: 9px; }
.avatar {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font: 600 12px/1 var(--font-ui);
}
.account-name {
  font-size: 13px; color: var(--ink-2); max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1099px) { .account-name { display: none; } }

/* --- overview ------------------------------------------------------------ */
.tiles {
  display: grid; gap: 10px; margin: 18px 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Figures the learner can act on, so these DO earn the big-number treatment. */
.tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border-radius: var(--r-2);
  background: var(--bg-tint); border: 1px solid var(--line);
}
.tile-n {
  font-size: 26px; font-weight: 600; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1;
}
.tile-l { font: var(--t-meta); color: var(--ink-2); }
.tile-h { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

.overview-cols {
  display: grid; gap: 30px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ov-h {
  margin: 0 0 10px; font-size: 11px; font-weight: 600; color: var(--ink-3);
}

.weaklist { list-style: none; margin: 0; padding: 0; }
.weaklist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.weaklist li:last-child { border-bottom: 0; }
.weak-title { color: var(--ink); min-width: 0; }
.weak-rate {
  flex: none; font: 12px var(--font-ui); color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.spark { width: 100%; max-width: 300px; height: 60px; color: var(--accent); display: block; }

.actchips { display: flex; flex-wrap: wrap; gap: 7px; }
.actchip {
  font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  color: var(--accent-ink);
}

/* --- payments ------------------------------------------------------------ */
.upgrade {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; margin: 26px 0 6px;
  border: 1px solid var(--accent-line); border-radius: var(--r-2);
  background: var(--accent-wash);
}
.upgrade.paid { border-color: color-mix(in srgb, var(--good) 34%, transparent); background: var(--good-wash); }
.upgrade + .upgrade { margin-top: 10px; }
/* The plan block ends in small print; the next section's heading sat on it. */
#upgrade:not([hidden]) { margin-bottom: 30px; }
.up-title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.up-sub { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.upgrade.paid .up-title { color: var(--good); }
.up-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-3); }
.up-error { margin: 8px 0 0; color: var(--bad); font-size: 13px; }

/* --- case analysis -------------------------------------------------------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 40px 24px; margin: 18px 0 4px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2); text-align: center;
  transition: border-color var(--step), background var(--step), transform var(--step);
}
.dropzone:hover { border-color: var(--accent-line); background: var(--surface-hover); }
.dropzone.over {
  border-color: var(--accent); background: var(--accent-wash);
  transform: scale(1.006);
}
.dropzone svg { width: 30px; height: 30px; color: var(--ink-3); margin-bottom: 6px; }
.dz-main { margin: 0; font-size: 15px; color: var(--ink); }
.dz-sub { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}

/* An issue and the provisions found for it, as one object. */
.issue {
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.issue:last-of-type { border-bottom: 0; }
.issue-head { display: flex; gap: 12px; align-items: flex-start; }
.issue-n {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  color: var(--accent); font: 600 12px/1 var(--font-ui);
}
.issue-q { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.issue-why { font-size: 13px; color: var(--ink-3); margin-top: 3px; font-style: italic; }
.issue-provs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 34px; }
.issue-prov { cursor: pointer; }

.casegrid { display: grid; gap: 12px; }
#case-result .prose { margin-bottom: 26px; }

/* --- conversation threads ------------------------------------------------- */
.thread-picker {
  flex: 1 1 220px; min-width: 0; max-width: 340px;
  padding: 7px 10px; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.thread-picker:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.thread-hint { font-size: 12.5px; color: var(--ink-3); }

.transcript {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 18px;
}
.turn { animation: rise var(--step) both; }
/* The student's own words sit right and tight; the answer runs full width as a
   document, because that is what it is. */
.turn-user {
  align-self: flex-end; max-width: 76%;
  margin: 14px 0 2px;
  padding: 2px 12px 2px 0;
  border-right: 2px solid var(--accent-line);
  color: var(--ink); font: 500 15px/22px var(--font-ui); text-align: right;
  overflow-wrap: anywhere;
}
.turn-assistant {
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--line);
}
.turn-assistant:last-child { border-bottom: 0; }
.turn-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.turn-cite { cursor: pointer; }

/* --- data controls --------------------------------------------------------
   The panel these styled moved into the settings sheet; what is left is the
   note (still used by the plan card) and the danger button. */
/* Deletion is destructive and irreversible, so it does not get to look like
   the other buttons until the user has confirmed they mean it. */
.btn-danger { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.btn-danger:hover:not(:disabled) {
  background: var(--bad-wash); border-color: var(--bad);
}
.datactl-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.privacy-link { margin-left: 8px; color: var(--accent); }

/* --- caveat banner --------------------------------------------------------
   Persistent, unlike .status. A repeal warning rendered in the status line was
   overwritten the moment the answer arrived, so the reader never saw it. This
   sits with the answer it qualifies and is the loudest thing on the page when
   it is present -- which is correct: it is usually saying the provisions below
   are about the wrong statute. */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--warn);
  border-left-width: 3px;
  border-radius: 0 8px 8px 0;
  background: var(--warn-wash);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
}
.notice svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--warn);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.notice p { margin: 0; max-width: 68ch; }

/* --- which legislature made it -------------------------------------------
   The corpus spans 16 jurisdictions and a State search routinely returns other
   States' Acts. Central is styled quietly because it applies everywhere and is
   never the wrong State; a State chip is the one that needs to be noticed. */
.prov-juris {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.prov-juris.central {
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.prov-juris.state {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
}

.dropzone.unavailable { opacity: .6; cursor: not-allowed; }

/* --- a page with nothing on it yet ---------------------------------------
   Four zeroes in a row read as a broken page rather than a new account. This
   says what the page becomes and offers the two actions that fill it. */
/* Not a dashed card inside the page (readiness audit §2.7): a ruled block. */
.firstrun {
  grid-column: 1 / -1;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.firstrun h3 { margin: 0 0 8px; font-size: 17px; }
.firstrun p { margin: 0 0 12px; max-width: 56ch; color: var(--ink-3); font-size: 14.5px; }
.firstrun-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.firstrun .note { margin: 0; font-size: 13px; }

/* Visually hidden, still read aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Conversation history and a composer that stays reachable
   ==========================================================================

   Two problems this solves, both reported as friction rather than found by
   testing:

   1. Asking a follow-up meant scrolling back to the top of a long answer. The
      composer now docks to the bottom of the viewport for as long as there is
      an answer on screen, so the next question is always one click away.

   2. Conversation history was a <select>. You could not see your own titles
      side by side, could not tell which was recent, and could not delete one
      without opening it first.
   ========================================================================== */

/* --- the history rail ----------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16.5rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Off-canvas by default; the media query below pins it open on wide screens. */
  transform: translateX(-100%);
  transition: transform 200ms var(--ease);
}
.sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }

.sidebar-head { padding-bottom: 6px; }
.btn-block { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 7px; }
.btn-block svg { width: 15px; height: 15px; flex: none; }

.sidebar-label {
  margin: 10px 4px 4px;
  font: 500 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--ink-3);
}

.sb-list { display: flex; flex-direction: column; gap: 2px; }

.sb-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.sb-item:hover { background: var(--surface-2); }
.sb-item:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-item.active { background: var(--accent-wash); border-color: var(--accent-line); }

.sb-title {
  font-size: 13.5px;
  line-height: 1.35;
  /* Two lines then ellipsis: one line truncates most legal questions into
     uselessness ("What is the punishment for…"). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-when { grid-column: 1; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.sb-del {
  grid-row: 1 / span 2;
  align-self: start;
  opacity: 0;
  border: none;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--r-1);
  line-height: 0;
}
.sb-item:hover .sb-del, .sb-del:focus-visible { opacity: 1; }
.sb-del:hover { color: var(--caution, #a33); background: var(--surface); }
.sb-del svg { width: 14px; height: 14px; }

.sb-empty { margin: 8px 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .38);
  border: 0;
}

/* --- the composer, docked ------------------------------------------------- */
/* Applied once there is an answer on screen. Fixed rather than sticky because
   the composer sits ABOVE the answer in the document, where sticky-bottom
   cannot reach. */
body.docked .ask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin: 0;
  padding: 10px 0 12px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
body.docked .ask > * { max-width: 64rem; margin-left: auto; margin-right: auto; padding: 0 28px; }
body.docked .searchbar { margin-bottom: 8px; }

/* The mode row is a full segmented control while composing a first question and
   a compact strip once docked, where vertical space is the answer's. */
body.docked .examples { display: none; }

/* Room for the docked bar, so the last provision is not hidden behind it. */
body.docked main { padding-bottom: 9.5rem; }

/* --- wide screens: history is simply present ------------------------------ */
@media (min-width: 1100px) {
  .sidebar { transform: none; box-shadow: none; }
  .sidebar-scrim { display: none !important; }
  .sidebar-toggle { display: none; }
  body { padding-left: 16.5rem; }
  body.docked .ask { left: 16.5rem; }
}

@media (max-width: 1099px) {
  .sidebar { width: min(19rem, 84vw); }
}

/* The toggle only belongs where the rail is hidden. */
.sidebar-toggle { margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}


/* --- attaching a document -------------------------------------------------
   Was a tab with its own drop target and empty state. A whole destination for
   something most people use rarely pushed the thing they DO use further away,
   so it is a control on the composer instead. */
.attach {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 2px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 120ms var(--ease), background 120ms var(--ease);
}
.attach svg { width: 17px; height: 17px; }
.attach:hover { color: var(--ink); background: var(--surface-2); }
.attach:focus-visible { outline: none; box-shadow: var(--ring); }
.attach.unavailable, .attach[disabled] { opacity: .35; cursor: not-allowed; }

/* A file dragged anywhere over the window. Without this the browser navigates
   away and opens the PDF, losing whatever the reader was looking at. */
body.dropping::after {
  content: "Drop to read this document for the provisions it raises";
  position: fixed;
  inset: 12px;
  z-index: 90;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent);
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  font-size: 15px;
  color: var(--ink);
  pointer-events: none;
}

/* --- Study's sub-nav ------------------------------------------------------
   Progress, Revise and Practice were three of six top-level tabs. They are all
   "how am I doing at learning this", so they are one destination with a
   sub-nav -- and the reader meets three choices on arrival instead of six. */
.subtabs {
  display: flex; gap: var(--s-1); margin: var(--s-5) 0 0;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: none; min-height: 40px; padding: var(--s-3) var(--s-4);
  font: 500 14px/20px var(--font-ui); color: var(--ink-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.subtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-1); }
@media (pointer: coarse) { .subtab { min-height: 44px; } }

/* The number a citation in the prose points at, in the same figures
   wherever it is shown. */
.prov-n, .cite-n {
  font: 600 10.5px/1 var(--mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

/* --- the steps ------------------------------------------------------------
   A record of what happened, so the states have to be distinguishable at a
   glance: waiting is hollow, running pulses, done is filled, skipped is muted
   and dashed, failed takes the warning colour. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.step {
  display: grid;
  grid-template-columns: 11px 1fr;
  gap: 2px 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-2);
}
.step-dot {
  width: 7px; height: 7px; margin-left: 2px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: transparent;
}
.step-label { line-height: 1.3; }
.step-detail {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.step.is-waiting { color: var(--ink-3); }
.step.is-running .step-dot {
  border-color: var(--accent);
  background: var(--accent);
  animation: step-pulse 1.1s var(--ease) infinite;
}
.step.is-done .step-dot { border-color: var(--good); background: var(--good); }
.step.is-skipped { color: var(--ink-3); }
.step.is-skipped .step-dot { border-style: dashed; }
.step.is-failed .step-dot { border-color: var(--warn); background: var(--warn); }
.step.is-failed .step-detail { color: var(--warn); }
@keyframes step-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* --- details -------------------------------------------------------------- */
.props { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.prop { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.prop dt { font-size: 11.5px; color: var(--ink-3); }
.prop dd {
  margin: 0; font-size: 11.5px; color: var(--ink-2); text-align: right;
  overflow-wrap: anywhere;
}

/* --- citations in the prose -----------------------------------------------
   Underlined rather than coloured. A statutory citation is already a proper
   noun in the sentence; turning eight of them accent-blue makes a link farm of
   the paragraph and the eye stops reading the argument. */
.cite {
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  color: inherit;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.cite-in:hover { color: var(--accent-ink); border-bottom-style: solid; }
.cite-in:focus-visible, a.src-id:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.cite-n {
  font-size: 9px;
  margin-left: 0;     /* after a space (markCitations), so "103 1" never reads "1031" */
  padding: 0 3px;
  border-radius: var(--r-1);
  background: var(--bg-sunken);
  color: var(--ink-3);
  vertical-align: super;
  line-height: 1;
  /* A marker, not text: copied, "Section 13" plus its source number 1 read
     as "Section 131". */
  user-select: none;
}
.cite-in:hover .cite-n { background: var(--accent); color: var(--on-accent); }

/* Not in the sources. Stated, not shouted: the audit found this number was not
   among the retrieved provisions, which is a reason to check it rather than
   proof that it is wrong. */
.cite-out {
  border-bottom: 1px dashed var(--warn);
  background: color-mix(in srgb, var(--warn-wash) 60%, transparent);
  cursor: help;
}
.cite-echo { border-bottom: 1px dotted var(--ink-faint); cursor: help; }
/* Given to the wrong Act: as a number not shown, a reason to check. */
.cite-mis {
  border-bottom: 1px dashed var(--warn);
  background: color-mix(in srgb, var(--warn-wash) 60%, transparent);
  cursor: help;
}
/* Matched by number only: neither checked nor suspect. */
.cite-num { border-bottom: 1px dotted var(--ink-faint); cursor: help; }

/* A source identifier, shown as the citation the server holds for it.
   Quiet: the sentence already names the law; this says which record. */
/* The one citation treatment (readiness audit §2.2): the citation in Plex
   Mono, dotted underline, opening its source -- no tinted pill, no superscript. */
.src-id {
  font: var(--t-cite);
  color: var(--ink-2);
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.src-id { cursor: pointer; }
a.src-id:hover { color: var(--accent-ink); border-bottom-style: solid; }
.src-id-bad { color: var(--warn); border-bottom: 1px dashed var(--warn); }

/* --- provisions, numbered ------------------------------------------------- */
.prov-n {
  flex: none;
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  background: var(--bg-sunken);
  color: var(--ink-3);
}

/* Arriving from a citation. The card says "this is the one you clicked" and
   then gets out of the way. */
.prov.flash { animation: prov-flash 1.4s var(--ease); }
@keyframes prov-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  12%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .prov.flash { animation: none; outline: 2px solid var(--accent); outline-offset: 3px; }
}

/* ==========================================================================
   THE SIGN-IN SHEET
   ==========================================================================
   One dialog for signing in and for creating an account: they ask for the same
   two things, and two separate pages sends half of each group to the wrong one. */
.sheet {
  width: min(27rem, calc(100vw - 2rem));
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.sheet::backdrop {
  background: color-mix(in srgb, #05070a 62%, transparent);
}
/* Dialogs open instantly by default, which on a modal reads as a jump cut. */
.sheet[open] { animation: sheet-in 200ms var(--ease); }
.sheet[open]::backdrop { animation: fade-in 200ms var(--ease); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet[open]::backdrop { animation: none; }
}

.sheet-close-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.sheet-close {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: var(--r-2);
  background: none; color: var(--ink-3);
  transition: background var(--fast), color var(--fast);
}
.sheet-close svg { width: 15px; height: 15px; }
.sheet-close:hover { background: var(--bg-sunken); color: var(--ink); }

.sheet-title { margin: 0 0 5px; font-size: 20px; letter-spacing: -.018em; }
.sheet-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; max-width: 34ch; }

.sheet-providers { display: flex; flex-direction: column; gap: 8px; }
.provider {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px; font-weight: 500;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
.provider svg { width: 17px; height: 17px; flex: none; }
.provider:hover { border-color: var(--line-strong, var(--ink-faint)); background: var(--bg-sunken); }
.provider:active { transform: translateY(1px); }
.provider:focus-visible { outline: none; box-shadow: var(--ring); }

/* A rule with a word in it, rather than the word floating over a line. */
.sheet-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
  font-size: 11.5px;
  color: var(--ink-3);
}
.sheet-or::before, .sheet-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.sheet-form { display: flex; flex-direction: column; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.field-hint { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink);
  font-size: 14.5px;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.field-wrap { position: relative; display: block; }
.field-wrap input { padding-right: 62px; }
.reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  padding: 5px 8px;
  border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink-3);
  font-size: 12px; font-weight: 500;
}
.reveal:hover { background: var(--bg-sunken); color: var(--ink); }

.sheet-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--r-2);
  background: var(--bad-wash);
  color: var(--bad);
  font-size: 13px; line-height: 1.45;
}
.sheet-switch {
  margin: 15px 0 0;
  font-size: 13px; color: var(--ink-3);
  display: flex; gap: 6px; justify-content: center;
}
.linkish {
  border: 0; background: none; padding: 0;
  color: var(--accent); font-size: inherit; font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.sheet-fine {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}


/* ==========================================================================
   THE HISTORY RAIL, REWORKED
   ==========================================================================
   It slid in on a linear transform and every row was the same weight, so a
   list of twelve conversations read as twelve identical bars. */
.sidebar {
  /* Overshoots very slightly and settles, which reads as a panel being pushed
     rather than a rectangle being moved. */
  transition: transform 260ms cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

.sb-item {
  position: relative;
  transition: background 130ms var(--ease), color 130ms var(--ease);
}
/* The active conversation gets a spine, not a fill: a filled row competes with
   the answer for attention every second it is on screen. */
.sb-item.active::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: var(--r-1);
  background: var(--accent);
}
.sb-item:hover { background: var(--bg-sunken); }

/* Rows arrive staggered when the list is (re)built, so the rail reads as
   filling in rather than flashing. Capped: past the first handful it is just
   latency. */
.sb-list > * { animation: sb-in 260ms var(--ease) backwards; }
.sb-list > *:nth-child(1) { animation-delay: 0ms; }
.sb-list > *:nth-child(2) { animation-delay: 26ms; }
.sb-list > *:nth-child(3) { animation-delay: 52ms; }
.sb-list > *:nth-child(4) { animation-delay: 78ms; }
.sb-list > *:nth-child(5) { animation-delay: 104ms; }
.sb-list > *:nth-child(n+6) { animation-delay: 120ms; }
@keyframes sb-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-list > * { animation: none; }
}

/* A date heading every time the day changes, so "yesterday" is findable
   without reading twelve titles. */
.sb-group {
  margin: 14px 4px 5px;
  font: 500 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--ink-3);
}
.sb-list > .sb-group:first-child { margin-top: 2px; }

/* ==========================================================================
   DENSITY
   ==========================================================================
   Measured on the first screen before this block: 46px of padding above a 40px
   headline, a 58px-tall composer, then six cards at 78px each over two rows.
   Something like 380px of furniture before the first answer could appear — on
   a 760px laptop viewport that is half the screen spent introducing a tool the
   reader is already using.

   Nothing here removes a control. It takes the space back from chrome:
   smaller headline, shallower padding, the code grid as one row of chips
   instead of two rows of cards, and shadows that stop pretending each card is
   a floating object. */

/* Left, not centre. Centred text under a centred headline reads as a landing
   page, and there is a landing page now; this is the tool. */
.hero {
  padding: 26px 0 18px;
  text-align: left;
  max-width: var(--cluster);
}
.hero h1 {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -.019em;
}
.hero p {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* The composer is still the biggest thing on the screen -- it should be -- but
   it was tall enough to look like a form field rather than a place to type. */
#q { padding: 14px 8px 14px 16px; font-size: 15.5px; }
.search-field { box-shadow: none; border-color: var(--line-input); }
.search-field:focus-within { box-shadow: var(--ring); }

/* --- the code grid, as chips ---------------------------------------------
   Six cards, each with a code, a name and a description, laid out three across
   in two rows. The description was the part nobody needed: anyone typing "BNS"
   knows it is the penal code, and anyone who does not will not learn it from
   three words. The code and the name are the target. */
#quickstart { margin-top: 22px; }
.quick-label { margin: 0 0 9px; }
.quickgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 0;
  grid-template-columns: none;
}
.qcard {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-2);
  animation: none;
}
.qcard:hover {
  transform: none;
  border-color: var(--accent);
  background: var(--bg-sunken);
}
.qcard-note { display: none; }
.qcard-code { font-size: 10.5px; }
.qcard-name { font-size: 13px; font-weight: 500; }

/* --- chrome, generally ----------------------------------------------------
   A border and a fill already say "this is a separate object". The shadow
   under every one of them said it twice, and on a page that is mostly cards
   the result reads as bubble wrap. Depth is kept for the things that genuinely
   float: the sheet, the palette, the docked composer. */
.prov, .tile, .qcard {
  box-shadow: none;
}
.prov { border-radius: var(--r-2); }
.provisions { margin-top: 26px; }
.provisions h2 { font-size: 15px; letter-spacing: -.012em; }

/* Answers are the reason for the page, so they keep their measure and their
   serif -- the density pass is about everything AROUND the reading. */
.panel-head { margin-bottom: 14px; }
.panel-head h2 { font-size: 17px; }

/* --- topbar --------------------------------------------------------------- */
.topbar-inner { padding-block: 10px; }

@media (max-width: 599px) {


  /* One account button, not two. The sheet offers both jobs anyway -- it opens
     with a switch between them -- so the second button buys nothing and costs
     the width the brand needs. */
  #sign-up { display: none; }   /* one fits: Sign in, whose sheet also creates an account */

  .wrap { padding-inline: 16px; }
  .hero { padding: 18px 0 14px; }
  .hero h1 { font-size: 20px; }

  /* Chips, one per line rather than a row that cannot wrap tightly enough. */
  .qcard { width: 100%; }

  /* The landing page's own narrow rules live with the landing block below;
     keeping a second copy here meant two places to change and one of them
     silently losing. */
  .landing-h1 { font-size: clamp(26px, 8vw, 34px); }
  .landing-how { gap: 22px; padding-top: 26px; margin-top: 32px; }
}

/* No overflow-x guard on <body>. One was added here while chasing an overflow
   that turned out to be a measurement artifact -- Chrome on Windows will not
   make a window narrower than about 500px, so a screenshot requested at 414px
   is a 500px layout cropped to 414. At a real 500px nothing overflows.
   `overflow-x: hidden` on body makes it a scroll container, which is a good
   way to break the sticky topbar, and it hides exactly the kind of bug it
   looks like it is fixing. */
#dir-list, .provisions, .prose { max-width: 100%; }

/* An answer in a conversation ran the full width of the column: 127
   characters a line at desktop width, about twice what reads comfortably.
   Held to a measure here, after the rule above, which is about overflow and
   would otherwise win. */
.turn-assistant .prose { max-width: 72ch; }

/* --- a claim about the document, pointed at the document ------------------
   A pleaded provision now carries the paragraphs that plead it. The quote is
   the evidence; clicking it opens the whole paragraph. */
.pleaded-at { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.para-ref {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left;
  padding: 6px 8px;
  border: 0; border-left: 2px solid var(--line-strong);
  border-radius: 0 6px 6px 0;
  background: var(--bg-sunken);
  color: var(--ink-2);
  font: inherit; font-size: 12.5px; line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}
.para-ref:hover { border-left-color: var(--accent); color: var(--ink); }
.para-ref:focus-visible { outline: none; box-shadow: var(--ring); }
/* The same button inside the note's running text: "(¶12)" stays in the
   sentence, looking like a link to the paragraph rather than a card. */
.prose .para-ref {
  display: inline; width: auto; padding: 0 2px;
  border: 0; border-bottom: 1px dotted var(--accent); border-radius: 0;
  background: none; color: var(--accent);
  font-size: inherit; line-height: inherit;
}
.prose .para-ref:hover { color: var(--ink); border-bottom-style: solid; }
.para-n {
  flex: none;
  font: 600 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--accent);
}
.para-quote {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.sheet-para { width: min(42rem, calc(100vw - 2rem)); }
.sheet-para-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-para-head .sheet-close { position: static; }
.para-text {
  margin: 14px 0 0;
  padding: 14px 16px;
  max-height: 60vh; overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-sunken);
  font-family: var(--font-text);
  font-size: 14.5px; line-height: 1.62;
  white-space: pre-wrap;
  color: var(--ink);
}

/* The way from a finished note into a conversation about it. */
.case-follow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 18px 0 6px; padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.case-follow .note { margin: 0; max-width: 46ch; }

/* ==========================================================================
   PASS: answers that read as documents, and a composer that floats
   ========================================================================== */

/* --- lists inside an answer ----------------------------------------------
   The prose block is `white-space: pre-wrap`, which is right for statutory
   text but wrong for a list: without `normal` here every item keeps the
   model's own line breaks and the bullets stagger. */
.prose .ans-list {
  white-space: normal;
  margin: 10px 0 20px;
  padding-left: 1.3em;
}
.prose .ans-list li { margin-bottom: 8px; }
.prose .ans-list li:last-child { margin-bottom: 0; }
/* The marker is the only coloured thing in a paragraph of statute, so it is
   enough to carry the list without a bullet glyph competing with the text. */
.prose ul.ans-list li::marker { color: var(--accent); }
.prose ol.ans-list li::marker {
  color: var(--accent); font-family: var(--font-ui);
  font-weight: 600; font-size: .82em;
}
.prose .ans-list + h3 { margin-top: 26px; }

/* --- the masthead stops squeezing itself ---------------------------------
   Every child of a flex row shrinks by default. With the history rail taking
   16.5rem off the left there was not enough room left, so "Bare Act
   Intelligence", "Jump to" and "Sign out" each wrapped onto two lines inside a
   62px bar -- the single most unfinished-looking thing on the page. */
.topbar-inner > * { flex: none; }
.topbar-spacer { flex: 1 1 auto; min-width: 8px; }
.brand-sub, .kbd-hint { white-space: nowrap; }
.auth-slot { white-space: nowrap; }
.auth-slot button, .auth-slot .btn { white-space: nowrap; }
@media (max-width: 1359px) {
  .topbar-inner { gap: 10px; }
  .kbd-hint kbd { display: none; }
}

/* --- the composer, floating ----------------------------------------------
   It was a full-bleed slab: edge-to-edge background, a hairline across the
   whole page, the field sitting inside it. That reads as chrome bolted to the
   bottom of the window. Floating it instead -- one rounded object with air
   around it -- makes it read as a thing you use, not a border of the app.

   Only the treatment changes here. `left` and `right` stay with the media
   queries above, which is what keeps the island clear of the history rail and
   the sources column. */
body.docked .ask {
  padding: 0 0 22px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  /* The gutter around the island is page, not composer: clicks belong to the
     answer behind it. */
  pointer-events: none;
}
body.docked .ask > * { pointer-events: auto; max-width: 53rem; }

/* Long answers scroll under the island. A short fade keeps the last line
   legible without drawing a hard rule across the page. */
body.docked .ask::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(100% + 34px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--paper) 38%,
    color-mix(in srgb, var(--paper) 72%, transparent) 70%,
    transparent 100%);
}

body.docked .searchbar { margin-bottom: 0; }
body.docked .search-field { border-color: var(--line-input); }
body.docked .search-field:focus-within { box-shadow: var(--ring); }
body.docked #q { padding-top: 16px; padding-bottom: 16px; }
body.docked #go { padding: 10px 20px; }


/* --- example questions, as chips -----------------------------------------
   They were dot-separated text links. The separator was a ::before on the
   FOLLOWING link, so whenever the row wrapped the dot travelled with it and
   line two opened with an orphaned "·". Chips carry their own edges, so the
   row can wrap anywhere without leaving punctuation stranded. */
.ex {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-3);
  line-height: 1.25;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.ex::after { display: none; }          /* the underline swipe was for a text link */
.ex + .ex::before { content: none; }   /* and this was the orphan */
.ex:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-wash);
}
.examples { gap: 7px; }

/* --- the history rail, finished -------------------------------------------
   It read as a button with a list under it rather than as a column of the
   application: the mark was in the topbar, which starts to the RIGHT of this
   rail, so the window's own top-left corner was a bare primary button. */
.sb-brand {
  display: flex; align-items: center; align-self: flex-start;
  padding: 4px 6px 14px; border-radius: var(--r-1);
  text-decoration: none; color: inherit;
  --logo-h: 30px;
}

@media (min-width: 1100px) {
  /* One mark on screen, not two. Where the rail is pinned open the rail's copy
     is the one in the corner, so the topbar's is the duplicate. Only the app's
     bar (#topbar) has a rail beside it: the policy pages' bar is their only
     mark. :where keeps the specificity of a class, so the landing still wins. */
  :where(#topbar) .brand { display: none; }
  /* The subtitle qualifies the mark. With the mark moved into the rail it was
     left sitting in the bar on its own, reading as a stray line of text. */
  .topbar .brand-sub { display: none; }
}
@media (max-width: 1099px) {
  /* Off-canvas: the topbar carries the mark and this one would be the second. */
  .sb-brand { display: none; }
  /* ...and without the mark's row, the close button (absolute, top right) sat
     on the last 33px of "New conversation". Room is made for it beside. */
  .sidebar-head { padding-right: 42px; }
}

/* The primary action does not need to be 54px tall to be found. */
#sb-new { padding: 9px 14px; font-size: 13px; }

/* "HISTORY" sat directly above "TODAY" -- two labels stacked, one of which
   says nothing the groups below do not already say. */
.sidebar-label { display: none; }

/* Tighter rows: the rail is worth more when it shows more of the week. */
.sb-item { padding: 7px 9px; row-gap: 1px; }
.sb-when { font-size: 10.5px; opacity: .85; }
.sb-group {
  margin: 14px 5px 4px;
  font: 600 10px/1 var(--font-ui);
  color: var(--ink-3);
}
.sb-list > .sb-group:first-child { margin-top: 2px; }

/* ==========================================================================
   PROVISIONS THAT ARE NO LONGER IN FORCE
   694 sections in this corpus are dead text. They read exactly like live law
   -- same structure, same register, same confident citation -- so nothing but
   an explicit mark distinguishes them. These rules are the mark.
   ========================================================================== */

.notice-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.notice-grave { font-weight: 500; }

/* A repeal is graver than the advisory notices this banner usually carries,
   so it takes the danger colour rather than the caution one. */
.notice-repealed { border-color: var(--bad, #b3261e); }
.notice-repealed svg { stroke: var(--bad, #b3261e); }

.prov-badge-dead {
  background: var(--bad-wash, color-mix(in srgb, #b3261e 12%, transparent));
  color: var(--bad, #b3261e);
  border-color: color-mix(in srgb, var(--bad, #b3261e) 34%, transparent);
  text-transform: lowercase;
  letter-spacing: .01em;
}

.prov-dead {
  margin: 8px 0 2px;
  padding: 9px 12px;
  border-left: 3px solid var(--bad, #b3261e);
  border-radius: 0 6px 6px 0;
  background: var(--bad-wash, color-mix(in srgb, #b3261e 8%, transparent));
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* The card keeps the statutory text legible -- it is still the source, and
   greying it out would make a provision someone deliberately looked up harder
   to read. The mark is what changes, not the text. */
.prov-badge-dead + .prov-actions { margin-left: auto; }

/* A number the QUOTED STATUTE names, not one the answer asserted. It is
   neither verified nor suspect, so it gets the quietest mark of the three --
   enough that hovering explains where it came from, not so much that it reads
   as a problem. */
.cite-ref {
  border-bottom: 1px dotted var(--line-strong);
  cursor: help;
  color: inherit;
}

/* --- what a provision takes back with its other hand --------------------- */
/*
   Carve-outs and related provisions, on the case cards.

   Both are set apart from the statutory text above rather than folded into it.
   The text is what the statute says; these are two different claims about it --
   "part of this section cuts against the rest" and "another section governs
   this too" -- and a reader has to be able to tell all three apart at a glance.
*/
.prov-carveouts {
  margin-top: 13px; padding: 11px 13px;
  background: var(--bg-tint); border-radius: var(--r-2);
  border-left: 2px solid var(--accent-line);
}
.carveout-head {
  font: 600 11.5px/1.4 var(--font-ui); color: var(--accent); margin-bottom: 8px;
}
.carveout { font-size: 13.5px; line-height: 1.58; color: var(--ink-2); }
.carveout + .carveout { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.carveout-label {
  font-weight: 600; color: var(--ink); margin-right: 6px;
  /* The label is the reader's handle on it -- "Exception 4" is what a defence
     gets argued under -- so it does not wrap away from its own text. */
  white-space: nowrap;
}
.carveout-text { color: var(--ink-2); }

/* --- amendment history ----------------------------------------------------
   Closed by default and quiet when closed: on most provisions the honest
   answer is "never amended", and a control that shouts on the 6% that were
   would shout on a search page full of them. Open, it is a printed list of
   footnotes and reads like one. */
.prov-amend { margin-top: 11px; }
.amend-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; margin-left: -9px;
  border: 0; background: none; border-radius: var(--r-2);
  font: 500 12.5px/1.4 var(--font-ui); color: var(--ink-3);
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}
.amend-toggle:hover { color: var(--ink); background: var(--bg-tint); }
.amend-caret {
  width: 13px; height: 13px; flex: none;
  transition: transform var(--fast);
}
.amend-toggle[aria-expanded="true"] .amend-caret { transform: rotate(90deg); }

.amend-body { margin-top: 9px; }
.amend-list {
  list-style: none; margin: 0; padding: 0 0 0 13px;
  border-left: 2px solid var(--line);
}
.amend-item { padding: 0 0 12px 12px; position: relative; }
.amend-item:last-child { padding-bottom: 2px; }
/* The tick on the rule is the timeline: these are printed in the order the
   statute prints them, which is not always date order -- 40% carry no date. */
.amend-item::before {
  content: ""; position: absolute; left: -18px; top: 6px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--line-strong);
}
.amend-meta {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 3px;
}
.amend-verb {
  font: 600 12px/1 var(--font-ui); text-transform: lowercase;
  padding: 4px 7px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--ink-3);
  border: 1px solid var(--line);
}
/* Only the two that REMOVE text are coloured. An insertion or a substitution
   is ordinary legislative housekeeping; an omission or a repeal is the reader
   losing something they may be relying on. */
.amend-omitted, .amend-repealed {
  color: var(--warn); background: var(--warn-wash);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.amend-when { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.amend-undated { color: var(--ink-3); font-style: italic; }
.amend-by { font-size: 12px; color: var(--ink-3); }
.amend-note {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.amend-dead {
  margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-2);
  background: var(--warn-wash); color: var(--warn);
  font-size: 12.5px; line-height: 1.5;
}
.amend-empty { margin: 0; font-size: 12.5px; color: var(--ink-3); }
/* The caveat is the panel's honesty and is set to be read, not skimmed past. */
.amend-caveat {
  margin: 11px 0 0; padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}

/* --- what the provision requires -----------------------------------------
   Sits above the carve-outs, because it reads in that order: what the section
   demands, then what it takes back. Deliberately quieter than the carve-out
   block -- no accent rule down the side -- so the two do not compete, and
   because a carve-out is always law while the match against a document is only
   ever a prompt. */
.prov-elements {
  margin-top: 13px; padding: 11px 13px;
  background: var(--bg-tint); border-radius: var(--r-2);
}
.element-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 11.5px/1.4 var(--font-ui); color: var(--ink-3); margin-bottom: 8px;
}
.element-count {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 11px; color: var(--ink-3); margin-left: auto;
}
.element {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.58; color: var(--ink-2);
}
.element + .element { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.element-body { flex: 1; min-width: 0; }
.element-label {
  font-weight: 600; color: var(--ink); margin-right: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.element-text { color: var(--ink-2); }

/* The badge states what was observed about WORDS. It is not a verdict on the
   pleading, so "not found" is marked in the warning colour rather than the
   error one -- this is something to check, not something that has gone wrong. */
.element-badge {
  flex: none;
  font: 600 12px/1 var(--font-ui);
  padding: 4px 7px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.element-badge.found {
  color: var(--good); background: var(--good-wash);
  border: 1px solid color-mix(in srgb, var(--good) 25%, transparent);
}
.element-badge.missing {
  color: var(--warn); background: var(--warn-wash);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.element.is-missing .element-text { color: var(--ink); }

/* Deliberately not the faintest ink available. This line is what stops a
   reader taking "words not found" for "you failed to plead this", so it is the
   last thing on the card that should be hard to read. It is small because it
   is a caveat, not quiet because it is unimportant. */
.element-caveat {
  margin: 9px 0 0; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}

/* On a phone the badge beside the text leaves the statute a column about six
   words wide. The badge goes under it instead: the condition is what has to be
   read, and the verdict on it is one line of furniture. */
@media (max-width: 599px) {
  .element { flex-direction: column; align-items: flex-start; gap: 5px; }
  .element-badge { align-self: flex-start; }
  .element-count { margin-left: 0; }
}

.prov-related { margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line); }
.related-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 600 11.5px/1.4 var(--font-ui); color: var(--ink-3); margin-bottom: 7px;
}
/* Said on the card, not only in the docs: this is the statute's own citation
   graph and there are no judgments in this corpus. A reader who takes it for
   precedent has been misled by the interface. */
.related-note {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 11px; color: var(--ink-3);
}
.related-item {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 9px; margin: 0 -9px; border-radius: var(--r-2);
  text-decoration: none; color: inherit;
  transition: background var(--fast);
}
.related-item:hover { background: var(--accent-wash); }
.related-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.related-cite {
  font-weight: 600; font-size: 13px; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.related-heading { font-size: 13px; color: var(--ink-3); font-style: italic; }
.related-dead {
  font: 600 10px/1 var(--font-ui);
  color: var(--bad); background: var(--bad-wash);
  padding: 3px 6px; border-radius: var(--r-1); white-space: nowrap;
}

@media (max-width: 599px) {
  /* The citation and its heading stop sharing a line before either has to
     break mid-phrase. */
  .related-item { flex-direction: column; gap: 3px; }
}

/* ==========================================================================
   THE LANDING PAGE
   ==========================================================================
   Same design system as the app — warm paper, the navy accent, the serif kept
   for statutory text and nothing else. The only thing the landing page adds is
   a demo, and the demo exists because this product's claim is unusually hard
   to make in prose: that every sentence is traceable to text it retrieved
   first. Easier to show three beats of it than to assert it in a paragraph.

   Everything here is legible at rest. Nothing waits on an observer to become
   visible, so the first frame — a screenshot, a slow connection, a reader with
   reduced motion — is a finished page rather than a blank one. */

.landing { padding: 26px 0 72px; }
.landing-inner { max-width: 54rem; margin: 0 auto; }

/* --- hero ----------------------------------------------------------------
   Two columns where there is room: the argument on the left, the evidence on
   the right. Below 940px the demo goes under the copy rather than beside it,
   because a 300px-wide statutory quotation is not readable. */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: start;
  padding-bottom: 46px;
}
@media (max-width: 1099px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

.landing-copy { min-width: 0; }

.landing-h1 {
  margin: 0 0 18px;
  font-family: var(--font-text);
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.07;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--ink);
}
.landing-h1 em { font-style: italic; color: var(--accent); }

.landing-lede {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* The box is the product, so it is the largest control on the page and it
   works from here — a question asked on the landing page carries straight into
   the app rather than being retyped. */
.landing-ask {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  background: var(--surface);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.landing-ask:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.landing-ask-icon { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.landing-ask input {
  flex: 1; min-width: 0;
  padding: 11px 6px;
  border: 0; background: none; color: var(--ink);
  font-size: 15.5px;
}
.landing-ask input:focus { outline: none; }
.landing-ask input::placeholder { color: var(--ink-3); }
.landing-ask .btn { padding-inline: 20px; }

.landing-tries {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  margin: 6px 0 0;
  font-size: 13.5px; color: var(--ink-3);
}
.landing-tries .ex {
  /* Padding, not size: the suggestions were 17px tall, too small a target for
     a thumb. The underline stays under the words. */
  border: 0; background: none; padding: 8px 0;
  color: var(--ink-2); font-size: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.landing-tries .ex:hover { color: var(--accent); text-decoration-color: currentColor; }

/* --- the demo ------------------------------------------------------------
   Shaped like the thing it depicts: a provision as a statute book sets one,
   with the section number in the margin. */
.demo {
  margin: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface);
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--font-ui);
  color: var(--ink-3);
}
.demo-dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--accent);
  animation: demo-pulse 1.6s var(--ease) infinite;
}
.demo-step { color: var(--ink-3); }
.demo-count { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes demo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

.demo-q {
  margin: 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

/* The answer as the product gives it: plain words, a labelled example, and
   the provision it rests on -- the same tags (.ex-tag) as a real answer. */
.demo-plain {
  margin: 0;
  font-family: var(--font-text); font-size: 15.5px; line-height: 1.6;
  color: var(--ink);
}
.demo-example {
  margin: 0;
  font-family: var(--font-text); font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
}
.demo-source {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: auto 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.demo-chip {
  font: 500 12.5px/1.2 var(--font-ui); color: var(--ink-2);
  padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.demo-source-note { font-size: 12px; color: var(--ink-3); }

/* Each beat fades its content in rather than the whole card, so the card never
   collapses and the layout never jumps. */
.demo-q, .demo-plain, .demo-example, .demo-source { transition: opacity 260ms var(--ease); }
.demo.swapping .demo-q,
.demo.swapping .demo-plain,
.demo.swapping .demo-example,
.demo.swapping .demo-source { opacity: .18; }

/* --- the figures ---------------------------------------------------------
   Four numbers, and the last one is the argument: zero citations taken on
   trust. It sits in the same row as the corpus counts because it is the same
   kind of fact about the corpus. */
.landing-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 18px 26px;
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.figure dt {
  font-family: var(--font-text);
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.figure dd {
  margin: 5px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-3);
}

/* --- the three claims ----------------------------------------------------- */
.landing-how {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 28px 36px;
  margin: 44px 0 0; padding: 0;
}
.landing-how li { margin: 0; }
.how-n {
  display: block;
  margin-bottom: 12px;
  font: 600 12px/1 var(--font-ui);
  color: var(--accent);
}
.landing-how h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.012em; }
.landing-how p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.landing-features { margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--line); }
.landing-h2 {
  margin: 0 0 20px; font-family: var(--font-text); font-weight: 500;
  font-size: clamp(22px, 3.2vw, 28px); letter-spacing: -.015em; line-height: 1.2;
  text-wrap: balance;
}
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px;
}
.feature {
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-3);
}
.feature h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.012em; }
.feature p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.landing-legal {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  margin-top: 30px; padding: 18px 0 8px; border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.landing-legal a { color: var(--ink-3); text-decoration: none; }
.landing-legal a:hover { color: var(--accent); text-decoration: underline; }
.landing-legal span { color: var(--ink-3); margin-left: auto; }
@media (max-width: 599px) { .landing-legal span { margin-left: 0; flex-basis: 100%; } }
/* "Not somebody's summary of / it." left one word on its own line. */
.landing-h1 { text-wrap: balance; }

.landing-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.landing-note {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* The app's furniture has no business on the front door. */
body.landing-open .ask,
body.landing-open .hero,
body.landing-open #quickstart,
body.landing-open .subtabs,
body.landing-open footer { display: none; }
body.landing-open .sidebar { transform: translateX(-100%); }
@media (min-width: 1100px) {
  body.landing-open { padding-left: 0; }
}

/* Motion is an enhancement here, never load-bearing: with it switched off the
   demo simply stops rotating on whatever beat it is showing, which is a
   complete and readable state because the markup ships one. */
@media (prefers-reduced-motion: reduce) {
  .demo-dot { animation: none; }
  .demo-q, .demo-plain, .demo-example, .demo-source { transition: none; }
  .demo.swapping .demo-q,
  .demo.swapping .demo-plain,
  .demo.swapping .demo-example,
  .demo.swapping .demo-source { opacity: 1; }
}

@media (max-width: 599px) {
  .landing { padding-top: 14px; }
  .landing-h1 { font-size: clamp(27px, 8vw, 34px); }
  /* The button drops to its own line; the icon stays with the field it
     belongs to. A 100% basis on the input pushed the icon onto a line by
     itself, where it read as a stray glyph. */
  .landing-ask { flex-wrap: wrap; padding-bottom: 8px; }
  .landing-ask input { flex: 1 1 8rem; }
  .landing-ask .btn { flex-basis: 100%; width: 100%; margin-top: 4px; }
  .demo { min-height: 0; padding: 16px; }
}

/* --- the landing page keeps its mark --------------------------------------
   The topbar's brand is hidden where the rail is pinned open, because the rail
   carries the mark and one is enough. The landing page hides the rail — which
   left the page introducing the product with the product's name nowhere on it.
   Put the topbar's mark back for exactly that case. */
body.landing-open .topbar .brand { display: flex; }
body.landing-open .topbar .brand-sub { display: block; }
/* ...but not on a phone. This rule outranked the one that hides the subtitle
   below 780px, so on the landing page at 390px the topbar was 453px wide:
   "Get started" and Settings off the edge, and the whole page scrolled
   sideways. Measured with device emulation, 2026-09-24. */
@media (max-width: 1099px) {
  body.landing-open .topbar .brand-sub { display: none; }
}

/* --- the eyebrow ----------------------------------------------------------
   A small pill above the headline carrying the corpus scale. It reads as a
   status, which is what it is: a live figure from the running service, not a
   claim typed into the page. These rules were lost when the previous landing
   block was retired. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 20px;
  padding: 5px 13px 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  flex: none;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent);
}


/* --- settings sheet -------------------------------------------------------
 *
 * One panel behind one icon, holding the three things an account holder has
 * to be able to see: what today's allowance has left, which plan is in force,
 * and what is stored about them with a way to take it out or remove it. The
 * last of those existed in the API from the beginning and had never been
 * given a button anywhere a person would look.
 *
 * Wider than the auth sheet because it holds rows rather than a form, and
 * scrollable because on a phone the four sections do not fit a viewport.
 */
.sheet-wide {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(84vh, 46rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Settings: a list of its four destinations beside the one open. */
#settings-dialog { width: min(46rem, calc(100vw - 2rem)); }
.set-layout { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-4); }
.set-tabs { display: flex; flex-direction: column; gap: var(--s-1); align-self: start; position: sticky; top: 0; }
.set-tab {
  display: flex; align-items: center; min-height: 36px; padding: var(--s-2) var(--s-4);
  font: 500 14px/20px var(--font-ui); color: var(--ink-2); text-align: left;
  background: none; border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.set-tab:hover { background: var(--surface-2); color: var(--ink); }
.set-tab[aria-selected="true"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.set-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-panel { min-width: 0; }
.set-panel > .set-section:first-child, #set-prefs-body > .set-section:first-child { border-top: 0; padding-top: 0; }
@media (pointer: coarse) { .set-tab { min-height: 44px; } }
/* A phone: the whole screen, the four as tabs across the top. */
@media (max-width: 599px) {
  #settings-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .set-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line);
              position: sticky; top: calc(-1 * var(--s-6)); background: var(--surface); z-index: 1; gap: 0; }
  .set-tab { flex: none; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .set-tab[aria-selected="true"] { background: none; border-bottom-color: var(--accent); color: var(--ink); }
}

.set-section { padding-top: 18px; border-top: 1px solid var(--line); }
.set-section + .set-section { margin-top: 18px; }
.set-head { margin: 0 0 var(--s-3); font: var(--t-title); color: var(--ink); }
.set-head:focus { outline: none; }

.set-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.set-row-title { font-size: 14px; color: var(--ink); }
.set-row-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.set-row-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 14px; color: var(--ink);
}

/* A meter, not a progress bar: it reads left-to-right as "what is left",
   so the filled part is what has been used and the empty part is the head-
   room. Turning amber near the end is the whole point of showing it at all
   -- the wall should be visible before you hit it. */
/* The track's edge is --line-input (3.5:1 on the surface) and the fill the
   accent (5.2:1), so both are visible (WCAG 1.4.11); it was a 1.1:1 tint. */
.set-meter {
  flex: none; width: 96px; height: 8px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-input);
  overflow: hidden;
}
.set-meter-fill { height: 100%; background: var(--accent); border-radius: inherit; }
.set-meter-fill.low { background: var(--warn); }

.set-seg {
  flex: none;
  display: inline-flex; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg-sunken);
}
.set-seg-btn {
  padding: 5px 14px;
  border: 0; border-radius: var(--r-pill);
  background: none; color: var(--ink-3);
  font: inherit; font-size: 12.5px;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.set-seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-input); }

.set-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* Never-metered items are stated as plainly as the metered ones. A reader
   deciding whether the limit matters needs to know what the limit does not
   touch, and that list is most of what the site does. */
.set-free { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.set-free li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--ink-3);
}
.set-free li::before { content: "·"; color: var(--accent); }

/* The delete confirmation. Set apart because everything in it is one-way. */
.set-danger {
  margin-top: 12px; padding: 14px 15px;
  border: 1px solid var(--bad); border-radius: var(--r-3);
  background: var(--bad-wash);
}
.set-danger p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.set-danger label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--ink-2); }
.set-danger code { font-size: 12.5px; color: var(--bad); }
.set-danger input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.set-danger input:focus-visible { outline: none; box-shadow: var(--ring); }

.set-skel { height: 13px; border-radius: var(--r-pill); background: var(--bg-sunken); }


/* --- the citation audit ---------------------------------------------------
 *
 * The Pleading Auditor's verdict on the provisions a document cites. It sits
 * above the brief because the event carrying it is the fastest thing the
 * analysis stream produces, and because a citation that is no longer law is
 * the most useful sentence this tool can print.
 *
 * Three levels, and only one of them is loud. A clean document gets the same
 * layout in the neutral palette, because a tool that sounds the alarm when
 * nothing is wrong stops being read.
 */
.audit {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 0 var(--r-3) var(--r-3) 0;
  background: var(--surface-2);
}
.audit-ok   { border-left-color: var(--good); }
.audit-warn { border-left-color: var(--warn); background: var(--warn-wash); }
.audit-bad  { border-left-color: var(--bad);  background: var(--bad-wash); }

.audit-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.audit-badge {
  flex: none;
  font: 500 12px/1 var(--font-ui);
  color: var(--ink-3);
}
.audit-summary {
  flex: 1 1 22ch;
  margin: 0;
  font-size: 15px; line-height: 1.5;
  color: var(--ink);
}
.audit-bad .audit-summary { font-weight: 600; }

.audit-group { margin-top: 14px; }
.audit-h {
  margin: 0 0 6px;
  font: 600 12px/1 var(--font-ui);
  color: var(--ink-3);
}
.audit-list { margin: 0; padding: 0; list-style: none; }

/* Citation left, what happened to it right. On a phone they stack, and the
   citation keeps its own line rather than wrapping into the explanation. */
.audit-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.audit-row:first-child { border-top: 0; }
.audit-cite {
  flex: none;
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.audit-what { flex: 1 1 18ch; color: var(--ink-2); line-height: 1.5; }

/* The caveat is not fine print. It is the difference between a tool that
   reports and a tool that presumes to decide the case. */
.audit-caveat {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-2);
}

/* The collapsed provisions header. */
.prov-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.prov-bar h2 { margin: 0; }

/* ============================================================================
   The sidebar, as a column you work from
   ============================================================================
   It held a button and a list. Now it holds where you are, what you are
   looking for, and who you are signed in as -- with the history between them,
   because the history is the part that grows and so it is the part that
   scrolls. The column itself no longer scrolls: a footer that slides away
   when there are thirty conversations is a footer nobody finds.
   ========================================================================= */
.sidebar { overflow-y: hidden; }
.sb-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }

/* --- section nav --- */
.sb-nav { display: flex; flex-direction: column; gap: 1px; margin: 8px 0 2px; }
.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  font: 500 13px/1.2 var(--font-ui);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.sb-nav-item svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.sb-nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.sb-nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-nav-item.active {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

/* --- search --- */
.sb-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 0 2px;
}
.sb-search svg {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  pointer-events: none;
}
.sb-search input {
  width: 100%;
  padding: 7px 9px 7px 29px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  font: 400 12.5px/1.3 var(--font-ui);
  color: var(--ink);
}
.sb-search input::placeholder { color: var(--ink-3); }
.sb-search input:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: var(--ring);
}
/* The browser's own clear affordance, which would otherwise sit on a
   background it was not drawn for. */
.sb-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }

/* --- history rows: rename as well as delete --- */
.sb-row-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--fast);
}
.sb-item:hover .sb-row-actions,
.sb-item:focus-within .sb-row-actions { opacity: 1; }
.sb-act {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.sb-act:hover { background: var(--surface); color: var(--ink); }
.sb-act:focus-visible { outline: none; box-shadow: var(--ring); opacity: 1; }
.sb-act svg { width: 14px; height: 14px; }

/* Renaming happens in place. A dialog for one short string is a trip. */
.sb-rename {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-1);
  background: var(--surface);
  font: 500 13px/1.3 var(--font-ui);
  color: var(--ink);
}
.sb-rename:focus-visible { outline: none; box-shadow: var(--ring); }

.sb-group {
  margin: 12px 6px 3px;
  font: 500 10.5px/1 var(--font-ui);
  color: var(--ink-3);
}
.sb-list .sb-group:first-child { margin-top: 4px; }

/* --- the account row --- */
.sb-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.sb-acct {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast);
}
.sb-acct:hover { background: var(--surface-hover); }
.sb-acct:focus-visible { outline: none; box-shadow: var(--ring); }
.sb-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent-ink);
  font: 600 11.5px/1 var(--font-ui);
  text-transform: uppercase;
}
.sb-acct-text { min-width: 0; }
.sb-acct-name {
  display: block;
  font: 500 12.5px/1.3 var(--font-ui);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-acct-sub { display: block; font-size: 11px; color: var(--ink-3); }
.sb-acct-chev { width: 14px; height: 14px; color: var(--ink-3); }


/* ============================================================================
   Judgments
   ============================================================================
   Visibly not provisions. The provisions above are set in the serif this
   product reads statute in, on paper-coloured cards with a numbered rail; a
   case is set the same way for its passage but headed by a party name rather
   than a citation, and carries a line about treatment that a provision has no
   equivalent of. Two kinds of thing that must never be confused should not
   look alike.
   ========================================================================= */
.judgments { margin-top: 28px; }

/* A judgment is a ruled row, under an answer and in the Library alike. */
.jud { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }

.jud-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.jud-n {
  font: 500 11px/1 var(--font-ui);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.jud-name {
  font: 600 15px/1.35 var(--font-ui);
  color: var(--ink);
}
.jud-year {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.jud-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.jud-cites span { font: var(--t-cite); color: var(--ink-2); }
.jud-cites span + span::before { content: "·"; margin: 0 var(--s-2); color: var(--ink-3); }

.jud-text {
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-wrap;
}

/* The line that decides whether this feature is honest. A case with recorded
   treatment says so; a case without says it has no RECORD, in a source that
   stopped in 1992 -- never that it is good law. The muted variant is the one
   that must not read as reassurance, so it is grey rather than green. */
.jud-treat {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
  font: 500 12px/1.5 var(--font-ui);
  color: var(--accent-ink);
}
.jud-treat.is-unknown { color: var(--ink-3); font-weight: 400; }

/* The citator's line (retrieval/citator.py). Overruled is the one a lawyer
   must not miss; "check" sends them to a sentence not yet read. "Cited" and
   "uncited" state a scope and stay grey: there is no green. */
.jud-treat.lvl-overruled { color: var(--bad); font-weight: 600; }
.jud-treat.lvl-check,
.jud-treat.lvl-doubted { color: var(--warn); }
.jud-treat.lvl-cited,
.jud-treat.lvl-uncited { color: var(--ink-3); font-weight: 400; }
.jud.is-overruled { border-left: 3px solid var(--bad); padding-left: var(--s-4); }

.jud-history-toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 12px/1.5 var(--font-ui);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.jud-history { margin-top: 10px; }
.jud-history h4 {
  margin: 12px 0 6px;
  font: 600 12px/1.4 var(--font-ui);
  color: var(--ink-3);
}
.jud-cite-row {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font: 400 13px/1.5 var(--font-ui);
  color: var(--ink);
}
.jud-cite-row .who { font-weight: 600; }
.jud-cite-row .how { color: var(--ink-3); }
.jud-cite-row .how.t-overruled,
.jud-cite-row .how.t-noted-as-overruled { color: var(--bad); font-weight: 600; }
.jud-cite-row .how.t-distinguished { color: var(--warn); }
.jud-cite-row q {
  display: block;
  margin-top: 3px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink-2, var(--ink));
  overflow-wrap: anywhere;
}
.jud-scope { margin-top: 10px; font: 400 12px/1.5 var(--font-ui); color: var(--ink-3); }

.jud-more { margin: var(--s-3) 0 0; }
.jud-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  font: 400 12px/1.5 var(--font-ui);
  color: var(--ink-3);
}
.jud-meta .matched { color: var(--accent-ink); font-weight: 500; }

/* --- the legal pages: /privacy, /terms, /refunds, /contact ------------------
   One set of rules for all four. They were inline in privacy.html while it was
   the only one. */
.legal { max-width: 70ch; margin: 0 auto; padding: 44px 0 90px; }
.legal h1 { font-family: var(--font-text); font-size: clamp(27px, 4vw, 36px);
            letter-spacing: -.02em; margin: 0 0 8px; font-weight: 600; }
.legal .updated { color: var(--ink-3); font-size: 13.5px; margin: 0 0 34px; }
.legal h2 { font-size: 12px; font-weight: 600; color: var(--accent);
            margin: 38px 0 12px; }
.legal p, .legal li { font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.legal li { margin: 8px 0; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0 4px; }
.legal th { text-align: left; font: 600 12px/1.4 var(--font-ui);
            color: var(--ink-3); padding: 8px 12px 8px 0;
            border-bottom: 1px solid var(--line); }
.legal td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line);
            font-size: 14px; vertical-align: top; color: var(--ink-2); }
/* Measured 2026-11-02 on saul.co.in, with its web fonts, at explicit phone
   viewports: the pricing table (and the terms' allowances, with the same four
   columns) is 365px wide -- past a 320, 360 or 375px screen, so the whole page
   scrolled sideways and "Saul Max" was cut off. On phones, narrower gaps and
   text bring it to 343px, which fits from 375px up; narrower than that the
   table scrolls inside its own box and the page never does (measured: 0px of
   page scroll at 320-430px). Nothing is hidden or broken mid-word. (Width
   breakpoints are 600, 1100 and 1360 only.) */
.legal .table-scroll { overflow-x: auto; margin: 14px 0 4px; }
.legal .table-scroll table { margin: 0; }
.legal .table-scroll:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
@media (max-width: 599px) {
  .legal th, .legal td { padding-right: 8px; }
  .legal td { font-size: 13px; }
}
.back { display: inline-block; margin-bottom: 26px; font-size: 13.5px;
        color: var(--accent); text-decoration: none; }
.back:hover { text-decoration: underline; }
.legal dl { margin: 14px 0; }
.legal dt { font: 600 12px/1.4 var(--font-ui); color: var(--ink-3); margin-top: 14px; }
.legal dd { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 44px;
             padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.legal-links a { color: var(--accent); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* ==========================================================================
   UI REVIEW, 2026-09-24
   ==========================================================================
   Written against a reviewer's notes on the live site: too much text all at
   once, the question box not standing out, three copies of the same
   navigation, list rows packed tight, the stats summary at the bottom of the
   page it summarises, a search box over an empty history, and a composer that
   did not stay put the way every other chat tool's does. Last in the file on
   purpose -- it is the newest layer, and it wins. */

/* 1. Hierarchy on Ask. The page has one job, so the heading is large, the
   line beneath it recedes, and the empty page gives the box real air above
   it instead of starting it a third of the way down a list. */
body:not(.docked) .hero { padding-top: clamp(40px, 14vh, 140px); padding-bottom: 28px; }
.hero h1 {
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.hero p { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); max-width: 54ch; }
.examples { margin-top: 20px; }

/* 2. The composer, pinned. It was a translucent strip: the answer showed
   through it, and the mode row, scaled down, hung half outside the bar. Now a
   solid bar with a soft fade above it, so text scrolls away beneath it the
   way it does in any chat client, and the modes sit inside it at full size. */
body.docked .ask {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
  padding: 12px 0 14px;
  box-shadow: 0 -22px 22px -4px var(--bg);
}
/* Full width, content centred on the answer's own column. The bar inherited
   the undocked composer's max-width, and the dock's `margin: 0` cancelled the
   auto margins that would have centred it, so on a wide page it sat as a
   narrow strip against the left edge with the footer showing beside it. */
body.docked .ask { max-width: none; }
body.docked .ask > * { max-width: var(--cluster); }
body.docked main { padding-bottom: 11rem; }

/* 3. The rail folds away. Wide screens pin it open; now it can be collapsed to
   give the answer the whole width, and the topbar's menu button -- hidden
   while the rail is showing -- brings it back. */
.sb-collapse { position: absolute; top: 12px; right: 10px; z-index: 1; }
@media (min-width: 1100px) {
  body.sb-collapsed { padding-left: 0; }
  body.sb-collapsed .sidebar { transform: translateX(-100%); }
  body.sb-collapsed .sidebar-toggle { display: inline-flex; }
  body.sb-collapsed.docked .ask { left: 0; }
  /* With the rail folded the topbar is the only place the name can be. */
  body.sb-collapsed .topbar .brand { display: flex; }
}

.sb-list .sb-item { padding: 10px 11px; }

/* Cases ran the full shell width while every other part of an answer keeps
   to the reading column. */
#judgments { max-width: var(--cluster); margin-left: auto; margin-right: auto; }

/* The 18+ confirmation on the create-account form. */
.field-check {
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 10px; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.field-check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* The warning before a first upload. */
.upload-rules { margin: 4px 0 18px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.upload-rules li { margin: 6px 0; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* "Forgot password?" under the sign-in button, and the two reset panels. */
.auth-forgot { display: block; margin: 10px auto 0; font-size: 13px; }
.auth-panel { display: flex; flex-direction: column; gap: 12px; }
.auth-panel .sheet-fine { margin: 2px 0 0; }

/* Help & support, in Settings. */
.support-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.support-form textarea {
  width: 100%; resize: vertical; min-height: 90px; padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
}
.support-form textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
/* .thread-picker grows along its flex row; in this column that made it 220px tall. */
.support-form .field select { flex: none; width: 100%; max-width: none; }

/* A table in an answer or case note. Models are told not to write them and
   sometimes do; scrolled sideways on a phone rather than squeezed. */
.ans-table { overflow-x: auto; margin: 10px 0 14px; white-space: normal; }
.ans-table table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.ans-table th, .ans-table td {
  padding: 7px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
.ans-table th { background: var(--bg-sunken); font-weight: 600; }

/* --- was this useful? ------------------------------------------------------ */
.fb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 18px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fb-q { color: var(--ink-2); font-size: 13.5px; margin-right: 4px; }
.fb-open { flex-direction: column; align-items: stretch; }
.fb-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-reason {
  padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.fb-reason:hover { background: var(--surface-hover); }
.fb-reason.on {
  color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-line);
}
.fb-note {
  width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
}
.fb-consent { margin: 0; font-size: 12.5px; }
.fb-actions { display: flex; gap: 8px; }
.fb-done { color: var(--ink-2); font-size: 13.5px; }

/* --- the pricing table's buttons ------------------------------------------- */
.plan-buttons td { padding-top: 16px; vertical-align: top; }
.plan-buttons .btn { display: inline-block; text-decoration: none; white-space: nowrap; }
@media (max-width: 599px) {
  .plan-buttons .btn { padding: 6px 8px; font-size: 12px; }
}

/* --- the month's allowance, when it is running low -------------------------- */
.nudge {
  margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); background: var(--accent-wash);
  border: 1px solid var(--accent-line); border-radius: var(--r-2);
}
.nudge a { color: var(--accent-ink); font-weight: 600; }


.state-hint { margin: 0 0 14px; }
.linklike {
  padding: 0; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--accent-ink); background: none; border: 0; text-decoration: underline;
}
.home-state { max-width: 12rem; }
.landing-h1 em { display: inline-block; text-wrap: balance; }

/* --- the line that says what the answer is doing ---------------------------- */
.lead-in {
  margin: 0 0 12px; min-height: 1.5em;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.lead-in:not(.settled)::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  vertical-align: text-bottom; background: var(--accent);
  animation: blink 1s steps(2) infinite;
}
.lead-in.settled { font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   The new-conversation screen (empty-state.js)
   Greeting and purpose above the composer; ways to start below it. Tokens
   only, so it follows the theme; the reduced-motion rule at the top of this
   file stills every animation here.
   ========================================================================== */
.ncs-hero { text-align: left; }
.ncs-hero .ncs-brand {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--accent);
  letter-spacing: .01em;
}
.ncs-hero .ncs-brand span { color: var(--ink-3); font-weight: 500; }
.ncs-hero .ncs-greeting {
  margin: 0 0 10px;
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.022em;
  color: var(--ink); text-wrap: balance;
  animation: rise-lg var(--slow) both;
}
.ncs-hero .ncs-subtitle {
  margin: 0; max-width: 60ch;
  font-size: 15.5px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty;
  animation: rise-lg var(--slow) both; animation-delay: 50ms;
}

.ncs-starters { margin-top: 6px; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.ncs-starters.ncs-leaving { opacity: 0; transform: translateY(4px); }
body.docked .ncs-starters { display: none; }
.ncs-label {
  margin: var(--s-6) 0 var(--s-2);
  font: var(--t-meta); color: var(--ink-3);
}
/* Starters as ruled rows (readiness audit §2.1): an icon, a title and one
   line, the whole row the target. No card borders; two columns from 1024px,
   one below, and on a phone a plain vertical list -- never a sideways
   scroller that cuts the titles off. */
.ncs-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6);
}
.ncs-item { min-width: 0; border-top: 1px solid var(--line); animation: rise var(--step) both;
            animation-delay: calc(90ms + var(--i, 0) * 40ms); }
.ncs-card {
  display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--s-4); align-items: center;
  width: 100%; min-height: 56px; padding: var(--s-4) var(--s-2);
  font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  background: none; border: 0; border-radius: var(--r-2);
  transition: background var(--fast);
  -webkit-tap-highlight-color: transparent;
}
.ncs-card:hover { background: var(--surface-2); }
.ncs-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ncs-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--accent); }
.ncs-card-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ncs-title { font: 500 14.5px/20px var(--font-ui); }
.ncs-desc { font: 400 13px/18px var(--font-ui); color: var(--ink-3); }
.ncs-action { font: var(--t-meta); color: var(--ink-3); white-space: nowrap; }
.ncs-card:hover .ncs-action { color: var(--accent-ink); }

.ncs-tools { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-4);
             padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ncs-tool {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: var(--s-2) var(--s-1);
  font: 400 13.5px/18px var(--font-ui); color: var(--ink-2);
  background: none; border: 0; cursor: pointer;
  transition: color var(--fast);
}
.ncs-tool svg { width: 17px; height: 17px; }
.ncs-tool:hover { color: var(--accent-ink); }
.ncs-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }

@media (max-width: 1099px) {
  .ncs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .ncs-hero .ncs-greeting { font-size: clamp(27px, 8vw, 34px); }
  .ncs-hero .ncs-subtitle { font-size: 14.5px; }
  .ncs-action { display: none; }
}
@media (pointer: coarse) { .ncs-card { min-height: 56px; } .ncs-tool { min-height: 44px; } }
/* A phone on its side: little height, so less of everything above the box. */
@media (max-height: 500px) and (orientation: landscape) {
  .ncs-hero { padding-top: 12px; padding-bottom: 10px; }
  .ncs-hero .ncs-greeting { font-size: 26px; margin-bottom: 4px; }
  .ncs-hero .ncs-subtitle { display: none; }
}

/* --- the composer, as a text area that grows ------------------------------ */
textarea#q {
  display: block; resize: none; overflow-y: hidden;
  min-height: 0; max-height: 200px;
  font-family: inherit; line-height: 1.45;
  background: transparent;
}
#go.is-stop { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
#go.is-stop:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }
.mic.listening { color: var(--bad); }
.mic.listening svg { animation: blink 1.2s steps(2) infinite; }
.turn-stopped { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
/* On a phone the greeting sits near the top: 14vh of a tall screen is a
   thumb's length of nothing above it, pushing the starters below the fold. */
@media (max-width: 599px) {
  body:not(.docked) .hero.ncs-hero { padding-top: 26px; padding-bottom: 18px; }
}

/* What belongs to Ask stays with Ask. script.js (showTab) sets data-tab on the
   body; the conversation, the answer and the source panel are hidden on every
   other tab here, so a conversation that finishes loading after the switch
   cannot put itself back over Study or Library. */
body[data-tab]:not([data-tab="ask"]):not([data-tab="case"]) :is(
  #transcript, #answer, #provisions, #source-panel, #search-meta
) { display: none !important; }

/* A coming change to the reader's allowance, in Settings: set apart from the
   routine notes around it so it is read. */
.set-notice {
  padding: 10px 12px; border-radius: var(--r-2);
  background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--ink);
}

/* "What if...?" -- questions that change one fact of Saul's example, under the
   examples. Tapping one asks it (script.js, whatIfChips). Dashed, because each
   is a question not yet asked, not a section to open. */
.whatif {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 18px; white-space: normal;
}
.whatif-label { font: var(--t-meta); font-weight: 600; color: var(--ink-2); margin-right: 2px; }
.whatif-q {
  font: 500 13.5px/1.3 var(--font-ui); color: var(--ink-2); text-align: left;
  padding: 7px 12px; min-height: 34px; cursor: pointer;
  background: transparent; border: 1px dashed var(--accent-line); border-radius: var(--r-pill);
  transition: background var(--step), color var(--step), border-color var(--step);
}
.whatif-q:hover { background: var(--accent-wash); color: var(--accent-ink); border-style: solid; }
.whatif-q:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 599px) { .whatif-q { min-height: 40px; } }

/* The one action a status message can carry (script.js, statusAction). */
.status-action {
  display: inline-block; margin-left: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  font: 600 12.5px/1.2 var(--font-ui); text-decoration: none;
  background: var(--accent); color: var(--on-accent);
}
.status-action:hover { filter: brightness(1.06); }

/* A section whose stored copy is scanner garbage (script.js, statuteText):
   said plainly, with the official copy one tap away, and the garbage kept
   behind a disclosure because some sections are readable in part. */
.unreadable-note {
  display: block;
  white-space: normal;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-2);
}
.unreadable-note a { color: var(--accent); }
.unreadable-raw { margin-top: 8px; white-space: normal; }
.unreadable-raw summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-3);
}
.unreadable-raw[open] { white-space: pre-wrap; color: var(--ink-3); }

/* Public law pages (/law/<slug>): one column, readable without the app. */
.public { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.public h1 { font-size: 28px; line-height: 1.25; margin: 12px 0 4px; }
.public-law, .public-by, .public-crumb, .public-fine { color: var(--ink-3); font-size: 13px; }
.public-crumb { display: flex; align-items: center; gap: 12px; }
.public-brand { display: inline-flex; border-radius: var(--r-1); --logo-h: 28px; }
.public-text { white-space: pre-wrap; font: inherit; background: var(--accent-wash);
  padding: 14px; border-radius: var(--r-2); }
/* ===================== Landing, 2026-09-28: "the printed act" ===============
   Set against harvey.ai: one idea in large serif type, room around it, proof
   before features, and the questions a careful reader asks answered on the
   page. The palette is the light one the app already has (the landing forces
   it while open: see showLanding); nothing here introduces a colour. */
.landing { padding: 40px 0 88px; }
.landing-h1 {
  font-size: clamp(38px, 5.8vw, 68px);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin-bottom: 22px;
}
.landing-lede { font-size: 17px; line-height: 1.6; max-width: 34em; }
.landing-h2 {
  font-family: var(--font-text);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 26px;
}

.landing-trust, .landing-faq {
  margin-top: 88px; padding-top: 44px; border-top: 1px solid var(--line);
}
/* The figures above already end in a rule; a second would only double it. */
.landing-audience { margin-top: 72px; }

/* Who it is for: three cards, each ending in a question it asks. */
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.audience-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.audience {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface);
}
.audience-who {
  margin: 0; font-size: 12px;
  color: var(--accent); font-weight: 600;
}
.audience h3 { margin: 0; font-family: var(--font-text); font-size: 21px; line-height: 1.2; }
.audience p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.audience-ask {
  margin-top: auto; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line);
  border-radius: 0;   /* .ex is a pill elsewhere; here it is a line under the card */
  background: none; text-align: left; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--accent-ink); cursor: pointer;
}
.audience-ask:hover, .audience-ask:focus-visible { color: var(--accent); text-decoration: underline; }

/* Why trust it: four claims, each one something the code does. */
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 44px; }
.trust h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em; }
.trust h3::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px;
  border-radius: 50%; background: var(--accent); vertical-align: 2px;
}
.trust p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* Price, on the first page and not only in the footer. */
.landing-price {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 64px; padding: 22px 26px; border-radius: var(--r-3);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
}
.price-line { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.price-more { color: var(--ink-2); }
.landing-price .btn { flex-shrink: 0; white-space: nowrap; }

/* Questions, as <details>: readable with no script. */
.landing-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.landing-faq summary {
  cursor: pointer; font-size: 16px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; color: var(--accent); font-weight: 400; }
.landing-faq details[open] summary::after { content: "\2212"; }
.landing-faq details p { margin: 10px 0 0; color: var(--ink-2); line-height: 1.65; max-width: 44em; }

@media (max-width: 1099px) {
  .audience-grid, .audience-grid.two { grid-template-columns: minmax(0, 1fr); }
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .landing-price { flex-direction: column; align-items: flex-start; }
  .landing-trust, .landing-faq { margin-top: 64px; padding-top: 34px; }
  .landing-audience { margin-top: 56px; }
}

/* How Saul read the question, what the answer stands on, and what to do next
   (script.js, readingLine / evidenceBlock / nextSteps; agent/reading.py).
   One quiet line above the answer; the evidence one tap away below it; the
   strength in words and a checklist, never a confidence number. */
/* Saul's check of the answer (script.js, verificationLine): one quiet line,
   the status in words; anything short of a pass in the warning colour. */
.check-line { margin: 0 0 10px; font: 500 12.5px/1.5 var(--font-ui); color: var(--ink-3); }
.check-label { font: var(--t-meta); font-weight: 600; }
.check-ok .check-label { color: var(--good); }
.check-limited .check-label, .check-open .check-label { color: var(--warn); }
.check-failed .check-label { color: var(--bad); }
.check-more { display: inline; margin-left: 8px; }
.check-more > summary {
  display: inline; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.check-more[open] { display: block; margin: 6px 0 0; }
.check-more ul { margin: 6px 0 0; padding-left: 18px; }
.check-more p { margin: 6px 0 0; }

.reading-line {
  margin: 0 0 10px; font: 500 12.5px/1.5 var(--font-ui); color: var(--ink-3);
}
.reading-label { font: var(--t-meta); font-weight: 600; color: var(--ink-2); margin-right: 4px; }
.reading-fix {
  font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); background: none; border: 0;
  padding: 2px 0; margin-left: 4px; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.reading-fix:hover { color: var(--accent-ink); }
/* 56x17px on a phone (measured 2026-11-02, every width from 320 to 430): a
   target a thumb misses. The padding makes it 24px tall, the margin gives the
   line its height back, so nothing around it moves. */
@media (max-width: 599px), (pointer: coarse) {
  .reading-fix { padding: 6px 2px; margin: -6px 0 -6px 2px; }
}

/* --- what a reader can do with one answer (spec §6.7) ----------------------
   Always in the page for keyboards and screen readers (never display:none);
   quieter on a mouse until the turn is hovered or the row is focused. */
.turn-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 0; white-space: normal;
}
.turn-act {
  min-height: 36px; padding: 0 var(--s-4);
  border: 1px solid var(--line-input); border-radius: var(--r-2);
  background: var(--surface); color: var(--ink); font: var(--t-meta); cursor: pointer;
}
.turn-act:hover { background: var(--surface-2); }
.turn-act:focus-visible { outline: none; box-shadow: var(--ring); }
.turn-act[disabled] { cursor: progress; }
.turn-act-pro { margin-left: var(--s-1); color: var(--ink-2); font-weight: 600; }
.turn-act-said { margin: 0; font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.turn-act-said:empty { display: none; }
.turn-act-said a, .turn-act-said .linkish { color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .turn-actions .turn-act { border-color: var(--line); color: var(--ink-2); }
  .turn-assistant:hover .turn-act, .turn-actions:focus-within .turn-act {
    border-color: var(--line-input); color: var(--ink);
  }
}
@media (max-width: 599px) { .turn-act { min-height: 44px; } }

/* --- what the check found (spec §6.5) --------------------------------------
   The status word in its colour, first on the read-as line and as the check
   block's heading; findings in view directly under the answer; a questioned
   claim marked where the answer makes it. Nothing here dims the answer. */
.reading-status { font-weight: 600; }
.check-ok .check-word, .reading-status.check-ok { color: var(--good); }
.check-limited .check-word, .reading-status.check-limited { color: var(--ink-2); }
.check-open .check-word, .reading-status.check-open { color: var(--warn); }
.check-failed .check-word, .reading-status.check-failed { color: var(--bad); }
.check-block {
  margin: var(--s-4) 0 0; padding: var(--s-1) 0 var(--s-1) var(--s-4);
  border-left: 2px solid var(--line-input);
  font: var(--t-body); color: var(--ink); white-space: normal; max-width: var(--measure);
}
.check-block.check-open { border-left-color: var(--warn); }
.check-block.check-failed { border-left-color: var(--bad); }
.check-block.check-ok { padding: 0; border: 0; }
.check-status { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.check-word { font-weight: 600; }
.check-list, .check-limits { margin: var(--s-2) 0 0; padding-left: 18px; }
.check-list li, .check-limits li { margin: var(--s-1) 0; }
.check-item.check-hard::marker { color: var(--bad); }
.check-item.check-material::marker { color: var(--warn); }
.check-item q { font-style: italic; }
.check-warning { margin: var(--s-2) 0 0; }
.check-block .check-more { display: block; margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--ink-2); }
.claim { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.claim-material { text-decoration: underline dotted var(--warn); }
.claim-hard { text-decoration: underline wavy var(--bad); }
.claim::after { content: " ⚠"; font-size: .8em; }
.claim-material::after { color: var(--warn); }
.claim-hard::after { color: var(--bad); }
.claim-note {
  display: block; margin: var(--s-1) 0 var(--s-2); white-space: normal;
  font: var(--t-meta); font-weight: 500; color: var(--ink);
}
.claim-note-material { border-left: 3px solid var(--warn); padding-left: var(--s-3); }
.claim-note-hard { border-left: 3px solid var(--bad); padding-left: var(--s-3); }
.failed-band {
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--bad); background: var(--bad-wash);
  font: var(--t-body); font-weight: 600; color: var(--ink);
}
.reading-fix:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }

.evidence {
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface); white-space: normal;
}
.evidence > summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer;
  font: 500 13.5px/1.3 var(--font-ui); color: var(--ink-2); list-style: none;
}
.evidence > summary::-webkit-details-marker { display: none; }
.evidence > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-2); }
.ev-label { font: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.evidence b { font-weight: 600; }
.ev-why { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.evidence[open] .ev-why { color: var(--accent-ink); }
.ev-checks, .ev-change { margin: 0; padding: 0 14px 12px; list-style: none; }
.ev-checks li, .ev-change li {
  display: flex; gap: 8px; padding: 4px 0; font: 400 13.5px/1.45 var(--font-ui); color: var(--ink-2);
}
.ev-checks .ev-mark { width: 14px; flex: none; text-align: center; font-weight: 600; }
.ev-ok .ev-mark { color: var(--good); }
.ev-warn .ev-mark { color: var(--warn); }
.ev-open .ev-mark { color: var(--accent); }
.ev-change li::before { content: "•"; color: var(--accent); width: 14px; flex: none; text-align: center; }
.ev-sub { margin: 4px 14px 4px; font: var(--t-meta); font-weight: 600; color: var(--ink-2); }

.next-steps {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
}
.next-step {
  font: 500 13.5px/1.3 var(--font-ui); color: var(--ink-2);
  padding: 7px 12px; min-height: 34px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: background var(--step), color var(--step), border-color var(--step);
}
.next-step:hover { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent-line); }
.next-step:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 599px) {
  .next-step { min-height: 40px; }
  .ev-why { display: none; }
}

/* The answer's footing when it is weak, first on the line (script.js,
   readingLine); the four states' colours in the evidence summary; the
   reader's Known / Assumed / Missing; the kind of authority on each source. */
.reading-warn {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: var(--r-pill);
  font: 600 11.5px/1.4 var(--font-ui); color: var(--warn); background: var(--warn-wash);
}
/* "Direct answer" says what kind of answer this is, not that it passed a
   check: neutral, so it is never read as the check's verdict beside it. */
.ev-direct b { color: var(--ink-2); }
.ev-qualified b { color: var(--accent-ink); }
.ev-research b, .ev-insufficient b { color: var(--warn); }
.ev-matter { padding-bottom: 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ev-missing { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 14px 12px; }
.ev-ask {
  font: 500 13px/1.3 var(--font-ui); color: var(--ink-2); text-align: left;
  padding: 6px 11px; min-height: 32px; cursor: pointer;
  background: transparent; border: 1px dashed var(--accent-line); border-radius: var(--r-pill);
  transition: background var(--step), color var(--step), border-color var(--step);
}
.ev-ask::before { content: "! "; color: var(--warn); font-weight: 600; }
.ev-ask:hover { background: var(--accent-wash); color: var(--accent-ink); border-style: solid; }
.ev-ask:focus-visible { outline: none; box-shadow: var(--ring); }
.tier-label {
  display: inline-flex; align-items: center; margin: 0 4px 0 0;
  font: var(--t-meta); font-weight: 600; color: var(--ink-2);
}
.ans-more-panel > .tier-label { display: block; margin: 0 0 10px; white-space: normal; }
@media (max-width: 599px) { .ev-ask { min-height: 40px; } }

/* Memory (script.js, memoryLine / memorySection; agent/memory.py): an answer
   that used it says so first; Settings lists what is held, to change. */
.memory-line {
  margin: 0 0 6px; font: 500 12.5px/1.5 var(--font-ui); color: var(--accent-ink);
}
.memory-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.answer-fresh {
  font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); background: none; border: 0;
  padding: 2px 0; margin-left: 6px; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.answer-fresh:hover { color: var(--accent-ink); }
.answer-fresh:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
.memory-first { margin: 10px 0 0; font: 400 12.5px/1.5 var(--font-ui); color: var(--ink-3); }
.ev-remembered {
  font: 600 10.5px/1 var(--font-ui);
  color: var(--accent); margin-left: 4px;
}
.memory-edit, .link-btn {
  font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); background: none; border: 0;
  padding: 2px 0; margin-left: 6px; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.memory-edit:hover, .link-btn:hover { color: var(--accent-ink); }
.mem-sub {
  margin: 14px 0 6px; font: 600 11px/1 var(--font-ui); color: var(--ink-3);
}
.mem-list { margin: 0; padding: 0; list-style: none; }
.mem-item { padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 13.5px/1.45 var(--font-ui); color: var(--ink-2); }
.mem-title { display: block; font-weight: 600; color: var(--ink); }
.mem-facts { color: var(--ink-3); }
.mem-field { width: 100%; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); color: var(--ink); }
.mem-add { display: flex; gap: 8px; margin-top: 8px; }
.mem-add input { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--surface); color: var(--ink); }
.mem-controls { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
textarea.mem-field { resize: vertical; line-height: 1.5; }
.mem-save { margin-top: 6px; }

/* The reader's documents (script.js, renderDocChips / attachmentChips /
   draftChip / documentRow; api/documents.py): files waiting to go with the
   next message, the ones a message brought, a draft to download, the list. */
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.doc-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-2);
}
.doc-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.doc-chip-state { color: var(--ink-3); font-weight: 400; }
.doc-uploading .doc-chip-state { color: var(--accent-ink); }
.doc-failed { border-color: var(--warn); background: var(--warn-wash); }
.doc-failed .doc-chip-state { color: var(--warn); }
.doc-chip-retry, .doc-chip-remove {
  font: 600 12.5px/1 var(--font-ui); color: var(--ink-3); background: none; border: 0;
  padding: 2px 4px; cursor: pointer; border-radius: var(--r-1);
}
.doc-chip-retry:hover, .doc-chip-remove:hover { color: var(--accent-ink); }
.doc-chip-retry:focus-visible, .doc-chip-remove:focus-visible { outline: none; box-shadow: var(--ring); }

.turn-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.turn-doc {
  font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-2); cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.turn-doc::before { content: "📄 "; }
.turn-doc:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.turn-doc:focus-visible { outline: none; box-shadow: var(--ring); }
/* Phase 5: a file read for one question and kept nowhere -- waiting in the
   composer, or on the message that sent it: dashed, and nothing to open. */
.doc-local { border-style: dashed; }
.turn-doc-once { cursor: default; border-style: dashed; }
.turn-doc-once:hover { border-color: var(--line); color: var(--ink-2); }
.turn-doc-once small { color: var(--ink-3); font-weight: 400; }
.doc-menu {
  display: inline-flex; gap: 10px; align-items: center; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2);
}
.doc-menu a.link-btn { margin-left: 0; }

.thread-docs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px;
}
.thread-docs .turn-docs { margin-top: 0; justify-content: flex-start; }
.thread-docs-label {
  font: 600 11px/1 var(--font-ui); color: var(--ink-3);
}

.draft-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-2);
  background: var(--accent-wash); font: 500 13.5px/1.4 var(--font-ui); color: var(--accent-ink);
}
.draft-title { font-weight: 600; margin-right: 6px; }
.draft-chip a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.docs-search {
  width: 100%; margin: 4px 0 12px; font: 400 14px/1.4 var(--font-ui); color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
}
.docs-search:focus-visible { outline: none; box-shadow: var(--ring); }
.doc-list { margin: 0; padding: 0; list-style: none; }
.doc-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.doc-row-main { display: flex; flex-direction: column; flex: 1 1 240px; min-width: 0; }
.doc-row-title { font: 600 14px/1.4 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.doc-row-meta { font: 400 12.5px/1.4 var(--font-ui); color: var(--ink-3); }
.doc-row-actions { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.doc-row-actions .link-btn, .doc-menu .link-btn { margin-left: 6px; }
a.link-btn { color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 3px; font: 500 12.5px/1 var(--font-ui); }
a.link-btn:hover { color: var(--accent-ink); }
.doc-confirm {
  flex-basis: 100%; font: 400 13px/1.5 var(--font-ui); color: var(--warn);
}
@media (max-width: 599px) {
  .doc-chip-name { max-width: 150px; }
  .doc-row-actions .link-btn { min-height: 32px; }
}

/* ============================================================================
   The source panel (spec §6.6)
   ============================================================================
   Pushed beside the conversation from 1360px: the column gives up the
   panel's width rather than being covered. Below that a modal sheet: at the
   side to 600px, from the bottom on a phone, so the question stays in view
   above it. The statute is read in the text face, citations in mono. */
:root { --panel-w: 400px; }
body.panel-pushed { padding-right: var(--panel-w); }
body.panel-pushed.docked .ask { right: var(--panel-w); }
.source-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  width: var(--panel-w); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-6) var(--s-6) var(--s-8);
  background: var(--surface); border-left: 1px solid var(--line);
}
.source-sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; z-index: 60;
  width: min(440px, 92vw); max-width: none; height: 100%; max-height: none;
  padding: var(--s-6) var(--s-6) var(--s-8); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 0; border-left: 1px solid var(--line); box-shadow: var(--elev);
}
.source-sheet::backdrop { background: rgb(0 0 0 / .38); }
.source-sheet.sheet-bottom {
  inset: auto 0 0 0; width: 100%; height: 88vh;
  border-left: 0; border-top: 1px solid var(--line);
  border-radius: var(--r-3) var(--r-3) 0 0;
  padding-top: var(--s-4);
}
.sheet-handle { display: none; }
.sheet-bottom .sheet-handle {
  display: block; width: 40px; height: 4px; margin: 0 auto var(--s-4);
  border-radius: var(--r-1); background: var(--line-input);
}
.sp-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.sp-title { flex: 1; min-width: 0; margin: 0; }
.sp-title:focus { outline: none; }
.sp-title:focus-visible { box-shadow: var(--ring); border-radius: var(--r-1); }
.sp-cite { display: block; font: var(--t-cite); color: var(--ink-2); overflow-wrap: anywhere; }
.sp-heading { display: block; margin-top: var(--s-2); font: var(--t-title); color: var(--ink); }
.sp-close { flex: none; }
.sp-meta, .sp-source, .sp-status {
  margin: var(--s-3) 0 0; font: var(--t-meta); font-weight: 400; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.sp-source a { color: var(--ink-2); }
.sp-repealed { color: var(--bad); font-weight: 600; }
.sp-text {
  margin: var(--s-6) 0 0; font: var(--t-law); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sp-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.sp-actions .btn { font-family: var(--font-ui); }
.sp-said { margin: var(--s-3) 0 0; font: var(--t-meta); font-weight: 400; color: var(--ink-2); }
.sp-said:empty { display: none; }
.sp-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.sp-pos { font: var(--t-meta); color: var(--ink-2); }
.cite-chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.ev-build { padding: 0 14px 12px; }
.ev-build .ev-sub { margin-left: 0; margin-right: 0; }

/* ============================================================================
   Progress, failure and search rows (spec §6.6, §6.8)
   ============================================================================ */
/* The stage line, with the wait's length beside it once it passes ten seconds. */
.lead-in-row { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 12px; min-height: 1.5em; }
.lead-in-row .lead-in { margin: 0; min-height: 0; }
.lead-elapsed { font: var(--t-meta); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* What went wrong, under the question it concerns, with the way back. */
.turn-failure {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin: var(--s-3) 0 var(--s-5); padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--warn); background: var(--warn-wash);
  font: var(--t-body); color: var(--ink);
}
.turn-failure p { margin: 0; }
.turn-failure-plans { color: var(--accent-ink); font-weight: 600; }
.turn-failure-stopped { background: none; padding-left: var(--s-3); }
.turn-failure-stopped .turn-stopped { color: var(--warn); font-weight: 600; }
.turn-failure-stopped .linkish { color: var(--accent-ink); font-weight: 600; }
/* Search results as ruled rows: every title in view, the text one tap away. */
.search-count { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.prov.prov-row {
  padding: 0; margin: 0; background: none; box-shadow: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; animation: none;
}
.prov.prov-row:hover { box-shadow: none; transform: none; }
.prov-row > summary {
  list-style: none; cursor: pointer; padding: var(--s-4) 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
}
.prov-row > summary::-webkit-details-marker { display: none; }
.prov-row > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-1); }
.prov-row .prov-cite { overflow-wrap: anywhere; }
.prov-row .prov-heading { margin: 0; flex-basis: 100%; font-style: normal; font: var(--t-body); color: var(--ink-2); }
.prov-row .prov-body { padding: 0 0 var(--s-5); }
.prov-row .prov-actions { opacity: 1; transform: none; position: static; margin-bottom: var(--s-3); display: flex; gap: var(--s-3); }

/* ============================================================================
   One answer, one column (readiness audit, Task 1)
   ============================================================================
   A conversation is one reading column at the measure, centred on the
   composer's axis: the question at its right edge, every block of an answer
   at its left. The actions and how the answer was built are one quiet group:
   one row where there is room, the evidence across the column once opened,
   and on a phone the evidence on a row of its own. Specificity is above the
   Task 9 rules below, so this block holds although it comes first. */
.transcript { width: 100%; max-width: var(--measure); margin-inline: auto; }
.turn-assistant .prose, .turn-assistant .ans-cites { max-width: 100%; }
.turn-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
}
.turn-tools .turn-actions { margin: 0; }
.turn-tools .evidence {
  flex: 1 1 0; min-width: 12rem; margin: 0; border: 0; border-radius: var(--r-2); background: none;
}
.turn-tools .evidence > summary {
  flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s-2); min-height: 36px; padding: 0;
  font: var(--t-meta); color: var(--ink-2); text-align: right;
}
.turn-tools .evidence > summary .ev-why { margin-left: var(--s-2); font: var(--t-meta); }
.turn-tools .evidence[open] {
  flex-basis: 100%; border: 1px solid var(--line); background: var(--surface);
}
.turn-tools .evidence[open] > summary { justify-content: flex-start; padding: var(--s-3) var(--s-4); }
.turn-tools .evidence[open] > summary .ev-why { margin-left: auto; }
@media (max-width: 599px) {
  .turn-tools .evidence { flex-basis: 100%; }
  .turn-tools .evidence > summary { justify-content: flex-start; padding: 0; }
  .turn-tools .evidence > summary .ev-why { margin-left: auto; }
}
@media (pointer: coarse) { .turn-tools .evidence > summary { min-height: 44px; } }
/* The status line says the status and the reading, nothing to open, and
   wraps rather than run off a narrow screen. What was checked sits after the
   answer, just above what the check found. */
.reading-line { overflow-wrap: anywhere; }
.turn-assistant > .check-more {
  display: block; margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--ink-2);
}
.turn-assistant > .check-more > summary:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-1);
}

/* ============================================================================
   On the scale (Task 9; spec §5.1)
   ============================================================================
   The Ask screen's spacing, radii and weights brought onto the tokens: the
   rules above grew one value at a time, and nineteen spacing values, five
   radii and five weights read as nineteen decisions. Specificity matches the
   rules each line replaces, so this block wins by coming last. */
#q { padding: 16px 8px 16px 18px; }
body.docked #q { padding-top: 16px; padding-bottom: 16px; }
#go { margin: 8px 8px 8px 4px; padding: 12px 24px; font-weight: 600; }
body.docked #go { padding: 12px 24px; }
@media (max-width: 599px) { #go, body.docked #go { padding: 12px 16px; } }
.attach { padding: 0; }
body.docked .ask { padding: 12px 0 16px; }
body.docked .ask > * { padding: 0 24px; }
.transcript { margin-top: 16px; }
.turn-user { margin: 24px 0 4px; }
.turn-assistant { padding: 8px 0 16px; }
.reading-line { margin: 0 0 8px; }
.ans-cites .ans-more-bar { gap: 8px; }
.cite-chip, .cite-more { padding: 4px 12px; }

.check-more > summary { display: inline-block; min-height: 24px; line-height: 24px; }
.check-more[open] { margin: 8px 0 0; }
.check-more ul, .check-list, .check-limits { margin: 8px 0 0; padding-left: 16px; }
.check-more p { margin: 8px 0 0; }
.evidence { margin-top: 16px; border-radius: var(--r-2); }
.evidence > summary { padding: 8px 12px; min-height: 24px; }
.ev-checks, .ev-change, .ev-build { padding: 0 12px 12px; }
.ev-checks .ev-mark { font-weight: 600; }
.steps { gap: 8px; }
.props, .prop { gap: 8px; }
/* Where the pointer is a finger, every control is at least 44px (SC 2.5.8, and
   the spec's touch rule). */
@media (pointer: coarse) {
  .attach { width: 44px; height: 44px; }
  .cite-chip, .cite-more, .turn-act, .evidence > summary, .prov-row > summary { min-height: 44px; }
  .check-more > summary { min-height: 44px; line-height: 44px; }
}
/* SC 2.4.11: a control reached by Tab never sits under the docked composer
   or the top bar. 11rem is what main already reserves for the composer. */
html:has(body.docked) { scroll-padding-bottom: 11rem; }
@media (max-width: 1099px) { html { scroll-padding-top: 4.5rem; } }

/* ============================================================================
   The Library and the Act Reader (readiness audit §2.5, §2.6)
   ============================================================================
   One page, not cards inside cards: a title, one line of figures, the tabs,
   and ruled rows. Every result row has the same structure -- a citation in
   mono, a title in Archivo, a line of meta, the text -- whatever its source. */
.panel.lib { background: none; border: 0; box-shadow: none; padding: 0; margin-top: var(--s-6); }
.lib-head { display: flex; flex-direction: column; gap: var(--s-2); }
.lib-title { margin: 0; font: var(--t-display); font-size: 30px; line-height: 36px; letter-spacing: -.01em; }
.lib-figures { margin: 0; font: var(--t-meta); color: var(--ink-3); }
.lib-figures:empty { display: none; }

.lib-tabs {
  display: flex; gap: var(--s-1); margin: var(--s-5) 0 var(--s-5);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.lib-tabs::-webkit-scrollbar { display: none; }
.lib-tab {
  flex: none; min-height: 40px; padding: var(--s-3) var(--s-4);
  font: 500 14px/20px var(--font-ui); color: var(--ink-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  transition: color var(--fast), border-color var(--fast);
}
.lib-tab:hover { color: var(--ink); }
.lib-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.lib-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-1); }
@media (pointer: coarse) { .lib-tab { min-height: 44px; } }

.lib-panel { max-width: 52rem; }
.directory-controls, .lib-search {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-4);
}
.lib-field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lib-field-grow { flex: 1 1 16rem; }
.lib-field-year { width: 7rem; }
.lib-field-label { font: var(--t-meta); color: var(--ink-2); }
.lib-input, .lib-select {
  min-height: 40px; padding: var(--s-3) var(--s-4); width: 100%;
  font: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--r-2);
}
.lib-input:focus-visible, .lib-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
@media (pointer: coarse) { .lib-input, .lib-select { min-height: 44px; } }
.lib-go { min-height: 40px; }
.lib-note { margin: 0 0 var(--s-3); font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.lib-note:empty { display: none; }
.lib-source { margin: var(--s-5) 0 0; font: 400 12.5px/18px var(--font-ui); color: var(--ink-3); max-width: var(--measure); }
.lib-source:empty { display: none; }

/* The directory: the title in full, wrapping; the facts on the line below. */
.dir-list { border-top: 1px solid var(--line); }
.dir-list[aria-busy="true"] { opacity: .55; }
.dir-row { border-bottom: 1px solid var(--line); }
.dir-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1);
  width: 100%; min-height: 48px; padding: var(--s-4) var(--s-3);
  font: inherit; text-align: left; color: var(--ink);
  background: none; border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background var(--fast);
}
.dir-item:hover { background: var(--surface-2); }
.dir-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dir-name { font: 500 15px/22px var(--font-ui); overflow-wrap: anywhere; }
.dir-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-1); font: 400 12.5px/18px var(--font-ui); color: var(--ink-3); }
.dir-count { font: inherit; color: inherit; }
.dir-repealed, .dir-partial { color: var(--warn); }

/* Rows of results: cases, instruments and saved provisions alike. */
.lib-results { border-top: 1px solid var(--line); }
.lib-results:empty { border-top: 0; }
.lib-row { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); animation: rise var(--step) both; }
.lib-row-cite { margin: 0 0 var(--s-1); font: var(--t-cite); color: var(--accent-ink); overflow-wrap: anywhere; }
.lib-row-title { margin: 0; font: 600 15.5px/22px var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.lib-row-meta { margin: var(--s-1) 0 0; font: 400 12.5px/18px var(--font-ui); color: var(--ink-3); }
.lib-row-flag { margin: var(--s-2) 0 0; font: 400 12.5px/18px var(--font-ui); color: var(--warn); }
.lib-row-text, .lib-text {
  margin: var(--s-3) 0 0; max-width: var(--measure);
  font: 400 15.5px/26px var(--font-text); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.lib-text { max-height: 15em; overflow-y: auto; }
.lib-row-more > summary { list-style: none; cursor: pointer; }
.lib-row-more > summary::-webkit-details-marker { display: none; }
.lib-row-more[open] > summary .lib-row-text { display: none; }
.lib-row-open { display: inline-block; margin-top: var(--s-2); font: var(--t-meta); color: var(--accent-ink);
                text-decoration: underline; text-underline-offset: 3px; }
.lib-row-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.lib-label { margin: var(--s-1) 0 0; font: italic 400 12.5px/18px var(--font-ui); color: var(--ink-3); }
.lib-notes { margin: var(--s-3) 0 0; padding-left: var(--s-5); font: var(--t-body); }
.lib-notes li { margin: var(--s-2) 0; }
.lib-actions { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lib-saved-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.lib-saved-head .lib-note { margin: 0; }
.lib-empty { padding: var(--s-6) 0; max-width: var(--measure); }
.lib-empty-title { margin: 0 0 var(--s-2); font: var(--t-title); }
.lib-empty p { margin: 0 0 var(--s-4); color: var(--ink-2); }


/* --- the Act Reader ------------------------------------------------------- */
.reader { margin-top: var(--s-5); }
.reader-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.reader-back svg { width: 16px; height: 16px; }
.reader-contents { display: none; }
.reader-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.reader-toc {
  position: sticky; top: var(--s-5); max-height: calc(100vh - 2 * var(--s-5)); overflow-y: auto;
  padding-right: var(--s-2); overscroll-behavior: contain;
}
.reader-filter { margin-bottom: var(--s-3); }
.reader-toc-list { list-style: none; margin: 0; padding: 0; }
.reader-toc-link {
  display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-2) var(--s-3); min-height: 32px; border-radius: var(--r-2);
  font: 400 13px/18px var(--font-ui); color: var(--ink-2); text-decoration: none;
}
.reader-toc-link:hover { background: var(--surface-2); color: var(--ink); }
.reader-toc-link[aria-current="true"] { background: var(--accent-wash); color: var(--accent-ink); }
.reader-toc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.reader-toc-n { font: var(--t-cite); font-size: 12px; color: inherit; }
.reader-toc-h { overflow-wrap: anywhere; }
.reader-toc-none { padding: var(--s-3); font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
@media (pointer: coarse) { .reader-toc-link { min-height: 44px; align-items: center; } }

.reader-doc { min-width: 0; max-width: calc(var(--measure) + 40px); }
.reader-head { padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-2); }
.reader-title { margin: 0; font: var(--t-display); font-size: 30px; line-height: 38px; overflow-wrap: anywhere; }
/* Focused by script to move the reader there, not controls: no ring (the
   contents mark where the reader is). */
.reader-title:focus, .reader-sec-head:focus { outline: none; }
.reader-meta { margin: var(--s-3) 0 0; font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.reader-meta a { color: var(--accent-ink); }
.reader-note { margin: var(--s-4) 0 0; padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: 2px solid var(--warn);
               font: 400 13.5px/20px var(--font-ui); color: var(--ink-2); max-width: var(--measure); }
.reader-repealed { border-left-color: var(--bad); color: var(--bad); }
.reader-long, .reader-preamble { margin: var(--s-4) 0 0; font: italic 400 16px/26px var(--font-text); color: var(--ink-2); }
.reader-loading { margin: 0; font: var(--t-meta); color: var(--ink-3); }
.reader-section { padding: var(--s-6) 0 var(--s-5); border-bottom: 1px solid var(--line); scroll-margin-top: var(--s-6); }
.reader-sec-head { margin: 0 0 var(--s-3); font: 600 18px/26px var(--font-text); color: var(--ink); }
.reader-sec-n { font: var(--t-cite); font-size: 13px; color: var(--accent-ink); margin-right: var(--s-2); }
.reader-text { font: var(--t-law); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Quiet text actions: four boxed buttons on every one of 531 sections was
   more chrome than law. */
.reader-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); margin-top: var(--s-3); margin-left: calc(-1 * var(--s-3)); }
.reader-actions .btn {
  min-height: 32px; padding: var(--s-2) var(--s-3); border: 0; background: none; box-shadow: none;
  font: 500 13px/18px var(--font-ui); color: var(--accent-ink);
}
.reader-actions .btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.reader-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse) { .reader-actions .btn { min-height: 44px; } }
.reader-more { margin: var(--s-6) 0; text-align: center; }
.reader-sheet { width: min(30rem, calc(100vw - 2rem)); max-height: min(80vh, 44rem); overflow-y: auto; }
.reader-sheet .reader-toc-list { margin-top: var(--s-3); }

/* Narrow: the text has the width; the contents are a sheet. */
@media (max-width: 1099px) {
  .reader-grid { grid-template-columns: minmax(0, 1fr); }
  .reader-toc { display: none; }
  .reader-contents { display: inline-flex; }
  .reader-bar { position: sticky; top: 52px; z-index: 5; background: var(--bg); padding: var(--s-2) 0; margin-bottom: var(--s-3); }
}
@media (max-width: 599px) {
  .lib-title, .reader-title { font-size: 26px; line-height: 32px; }
  .reader-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-3) var(--r-3) 0 0; max-height: 85vh; }
  .lib-field-year { width: calc(50% - var(--s-4) / 2); }
  .lib-field { flex: 1 1 100%; }
  .lib-field-year { flex: 1 1 calc(50% - var(--s-4)); }
}

/* The optional case filters, folded until wanted. */
.lib-filters { flex: 1 1 100%; }
.lib-filters > summary {
  display: inline-flex; align-items: center; min-height: 36px; cursor: pointer;
  font: var(--t-meta); color: var(--accent-ink);
}
.lib-filters > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.lib-filters[open] > summary { margin-bottom: var(--s-3); }
.lib-filters-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (pointer: coarse) { .lib-filters > summary { min-height: 44px; } }

/* ============================================================================
   Study: Today, and its views as pages rather than cards (readiness audit §2.7)
   ============================================================================ */
.panel.study { background: none; border: 0; box-shadow: none; padding: 0; margin-top: var(--s-5); }
.study-head { margin-bottom: var(--s-5); }
.study-title { margin: 0; font: var(--t-display); font-size: 30px; line-height: 36px; }
.study-sub { margin: var(--s-2) 0 0; color: var(--ink-2); }
.today { display: grid; gap: 0; max-width: 46rem; border-top: 1px solid var(--line); }
.today-block { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.today-h { margin: 0 0 var(--s-2); font: var(--t-title); }
.today-line { margin: 0 0 var(--s-3); color: var(--ink-2); max-width: var(--measure); }
.today-line strong { color: var(--ink); font-weight: 600; }
.today-starts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.today-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.today-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; }
.today-link {
  padding: 0; border: 0; background: none; cursor: pointer; min-height: 24px;
  font: 500 14.5px/22px var(--font-ui); color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.today-link:hover { color: var(--ink); }
.today-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.today-meta { font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
.today-note { margin: var(--s-3) 0 0; font: var(--t-meta); font-weight: 400; color: var(--ink-3); }
@media (pointer: coarse) { .today-link { min-height: 44px; } }
@media (max-width: 599px) { .study-title { font-size: 26px; line-height: 32px; } }

/* A cut-off answer, said in its turn: the left-ruled notice of the failure band. */
.turn-partial {
  margin: var(--s-4) 0 0; padding: var(--s-1) 0 var(--s-1) var(--s-4);
  border-left: 2px solid var(--warn); font: var(--t-body); color: var(--ink-2); max-width: var(--measure);
}

/* A law-only reply's note: a calm left-ruled line above the law, not a box. */
.turn-assistant > .status {
  margin: 0 0 var(--s-4); padding: var(--s-1) 0 var(--s-1) var(--s-4); max-width: var(--measure);
  background: none; border: 0; border-left: 2px solid var(--accent-line); border-radius: 0;
  color: var(--ink-2); font: var(--t-body);
}

/* Search results as rows (readiness audit §2.4): the reference in mono at the
   citation size, the title in the interface face, one colour for every title,
   a meta line only where it adds something. */
.prov-row > .prov-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.prov-row .prov-cite { font: var(--t-cite); color: var(--accent-ink); overflow-wrap: anywhere; }
.prov-row .prov-heading { font: 600 15.5px/22px var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.prov-row .prov-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font: 400 12.5px/18px var(--font-ui); color: var(--ink-3); }
.prov-exact { color: var(--good); }

/* The overview's header is the app's brand row (readiness audit §2.10): the
   mark and name, then a way in. The hero's Ask is the page's one primary
   action, so the account buttons are secondary, with room between them; the
   palette's "Jump to" belongs to the app, not to the front door. */
.auth-slot { gap: var(--s-3); }
body.landing-open .topbar #open-palette { display: none; }
@media (pointer: coarse) { .style-btn { min-height: 44px; } }
/* "What was checked" is tapped on a phone too: 44px there, as every control. */
@media (pointer: coarse) { .check-more > summary { display: inline-flex; align-items: center; min-height: 44px; } }

/* The overview, shorter (about 2.5 screens on a desktop, 4 on a phone): one
   rhythm between sections, cards that say who, what and the question, the
   two "what it does" sections as one list, price and the way in together. */
.landing { padding: var(--s-7) 0 var(--s-8); }
.landing-figures { padding: var(--s-5) 0; gap: var(--s-4) var(--s-6); }
.landing-audience { margin-top: var(--s-8); }
.landing-advocates { margin-top: var(--s-7); }
.landing-h2 { margin-bottom: var(--s-5); font-size: clamp(24px, 2.6vw, 30px); }
.audience { gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-4); }
.audience h3 { font-size: 19px; line-height: 1.25; }
.audience-grid.two { margin-top: var(--s-4); }
.landing-what, .landing-trust, .landing-faq { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.what-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.what-list li { margin: 0; }
.what-list h3, .trust h3 { margin: 0 0 var(--s-2); font: 600 15.5px/22px var(--font-ui); }
.what-list p, .trust p { margin: 0; font: 400 14px/21px var(--font-ui); color: var(--ink-2); }
.trust-grid { gap: var(--s-5) var(--s-7); }
.landing-faq details { padding: var(--s-3) 0; }
.landing-foot { margin-top: var(--s-7); padding-top: var(--s-5); align-items: center; }
.landing-foot .price-line { flex-basis: 100%; margin: 0 0 var(--s-2); }
.landing-foot .price-line a { color: var(--accent-ink); }
.landing-legal { margin-top: var(--s-5); }
@media (max-width: 1099px) {
  .what-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-what, .landing-trust, .landing-faq { margin-top: var(--s-7); padding-top: var(--s-5); }
}
@media (max-width: 599px) {
  .landing { padding: var(--s-5) 0 var(--s-7); }
  .landing-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
  .figure dt { font-size: 22px; }
  .figure dd { font-size: 11.5px; }
  .what-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .landing-audience { margin-top: var(--s-7); }
  .audience-grid, .audience-grid.two { gap: var(--s-3); }
  .audience { padding: var(--s-4); }
  .audience h3 { font-size: 17px; }
  .trust-grid { gap: var(--s-4); }
}
/* On a phone the cards are ruled rows, not boxes: who, the claim, the question. */
@media (max-width: 599px) {
  .audience { padding: var(--s-4) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  .audience-grid, .audience-grid.two { gap: 0; }
  .audience-ask { padding-top: var(--s-2); border-top: 0; }
  .landing-hero { gap: var(--s-6); }
}
@media (min-width: 1100px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .landing-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); align-items: start; }
  .landing-faq > .landing-h2 { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .landing-lede { font-size: 16px; line-height: 1.55; }
  .landing-h1 { margin-bottom: var(--s-4); }
}