/* juris citizen surface: Selene-mapped light theme (docs/DESIGN.md). Light only
   for launch, the prior light/dark dual identity is retired. Tokens live in
   tokens.css, loaded before this file; fonts.css is self-hosted Spectral +
   Inter, loaded before both. */

*{box-sizing:border-box}
/* Any rule that sets display beats the UA stylesheet's [hidden]{display:none}.
   That trap shipped three times (the source drawer, the PDF viewer, the Case
   Companion page), and the proof band's stat row had it too. One rule, so the
   hidden attribute always means hidden. */
[hidden]{display:none !important}
html,body{margin:0}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; line-height:1.55; min-height:100vh;
}
a{color:inherit}
::selection{background:var(--accent); color:var(--primary-fg)}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
@media(min-width:640px){ .wrap{padding:0 28px} }
@media(min-width:1024px){ .wrap{padding:0 32px} }

/* ---- ribbon: flag colours from tokens, not hardcoded hex ---- */
.ribbon{display:flex; height:4px}
.ribbon i{flex:1}
.ribbon i:nth-child(1){background:var(--flag-red)}
.ribbon i:nth-child(2){background:var(--flag-blue)}
.ribbon i:nth-child(3){background:var(--flag-yellow)}
.ribbon i:nth-child(4){background:var(--flag-green)}

/* ---- focus: one ring everywhere ------------------------------------------
   Nothing on this surface drew its own focus state, and the primary input set
   outline:0 with no replacement, so a keyboard user could not see where they
   were on the one field that matters. :focus-visible keeps the ring off mouse
   clicks. */
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
button:focus:not(:focus-visible), a:focus:not(:focus-visible){outline:none}

/* ---- nav ----
   One row at every width. It used to wrap to three rows on a phone (about 190px
   before any content), and the Ask / Case Companion toggle kept claiming "Ask"
   while a tool page was open. Now three equal destinations with a real current
   state (aria-current), For chambers as a quieter link, and on a phone the
   destinations fold into a menu while the language control stays in view,
   because language is the first thing a Kreol speaker looks for. */
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; position:relative}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--ink); text-decoration:none; min-height:44px}
.wordmark{white-space:nowrap}
.brand .dot{color:var(--accent-ink)}
.mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:conic-gradient(from 200deg,var(--flag-red),var(--flag-blue),var(--flag-yellow),var(--flag-green))}
.mark .scales{width:16px;height:16px;color:#fff}
.nav-right{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; max-width:100%; min-width:0}
.navlinks{display:flex; align-items:center; gap:4px}
.navtab{font-size:var(--fs-sm); font-weight:600; color:var(--muted); padding:0 14px; min-height:var(--tap); display:inline-flex; align-items:center; border:0; background:transparent; border-radius:999px; cursor:pointer; white-space:nowrap; font-family:inherit; text-decoration:none}
.navtab:hover{color:var(--ink); background:var(--panel)}
.navtab[aria-current="page"]{background:var(--ink); color:var(--canvas)}
.navsep{width:1px; height:20px; background:var(--hair); margin:0 6px}
.navlink{font-size:var(--fs-sm); font-weight:500; color:var(--muted); text-decoration:none; padding:0 10px; min-height:var(--tap); display:inline-flex; align-items:center; white-space:nowrap}
.navlink:hover{color:var(--ink)}
.langs{display:flex; gap:2px; background:var(--panel); border:1px solid var(--hair); border-radius:999px; padding:3px; min-height:var(--tap); box-shadow:var(--shadow-1); flex:none}
.lang{font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; color:var(--muted); padding:0 8px; min-height:38px; min-width:var(--tap); position:relative; border:0; background:transparent; border-radius:999px; cursor:pointer; font-family:inherit}
.lang.active{background:var(--ink); color:var(--canvas)}
/* The pill keeps its 3px inset; each button's tap area reaches the floor
   through the inset, the way inline chips do below. */
.lang::after{content:""; position:absolute; left:0; right:0; top:-3px; bottom:-3px}
.menubtn{display:none; width:44px; height:44px; flex:none; border:1px solid var(--hair); background:var(--panel); border-radius:12px; color:var(--ink); cursor:pointer; place-items:center; box-shadow:var(--shadow-1)}
.menubtn svg{width:20px; height:20px}
@media(max-width:860px){
  .menubtn{display:grid}
  .navlinks{display:none; position:absolute; top:calc(100% - 6px); right:0; left:0; z-index:40;
    flex-direction:column; align-items:stretch; gap:2px; padding:8px;
    background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-2)}
  .navlinks.open{display:flex}
  .navtab, .navlink{min-height:48px; padding:0 14px; font-size:var(--fs-md); border-radius:var(--r-md); justify-content:flex-start}
  .navsep{width:auto; height:1px; margin:4px 8px}
  .lang{padding:0 10px}
}
/* On the narrowest phones (320px) three 44px-wide language buttons push the pill
   over the wordmark, so width falls back to the label there; the 44px height
   stays through ::after. Measured: at 320px the pill starts at 113px and the
   wordmark ends at 105px with these values, as on the page before this pass. */
@media(max-width:380px){ .lang{padding:0 8px; min-width:0} .brand{font-size:20px} }

/* ---- hero ---- */
.hero{padding:48px 0 44px; text-align:center}
body.chat-mode .hero-marketing{display:none}
body.chat-mode .hero-visual{display:none}
body.chat-mode .hero{
  padding:8px 0 16px; text-align:left;
  display:flex; flex-direction:column;
  min-height:calc(100dvh - var(--chrome, 110px));
}
/* The footer and its long disclaimer sat under a pinned composer and read as
   leftover page. In a conversation the answer card carries the disclaimer. */
body.chat-mode .footer{display:none}
.chat-only{display:none}
body.chat-mode .chat-only{display:block}
.eyebrow{display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px}
h1{font-family:var(--font-display); font-weight:300; letter-spacing:-.05em; line-height:1.06; font-size:clamp(2.1rem,6vw,4.5rem); margin:0 auto; max-width:760px; color:var(--ink)}
.sub{font-size:var(--fs-lg); color:var(--muted); max-width:34em; margin:20px auto 0}

/* ---- ask (the composer) ----
   One row at every width: the question field grows, the button stays at its
   foot. On a phone the old rule flipped the form to a column but kept
   align-items:center, so the field shrank to 164px inside a 350px card and the
   placeholder wrapped and clipped ("Ask about your / ri..."). */
.ask{margin:30px auto 0; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; max-width:600px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:7px 7px 7px 18px; box-shadow:var(--shadow-2); text-align:left; transition:box-shadow .15s ease, border-color .15s ease}
.ask:focus-within{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent), var(--shadow-2)}
.ask[hidden]{display:none}
.ask textarea{flex:1 1 0; align-self:center; border:0; background:none; outline:0; font:inherit; font-size:var(--fs-md); color:var(--ink); min-width:0; resize:none; overflow:hidden; line-height:1.45; max-height:6.4em; padding:11px 0; min-height:var(--tap)}
.ask textarea:focus-visible{outline:none}
.ask textarea::placeholder{color:var(--faint)}
.ask-side{display:flex; align-items:center; gap:10px; flex-shrink:0}
.ask-remain{display:none; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.ask button{border:0; font-weight:700; font-size:var(--fs-sm); color:var(--primary-fg); background:var(--primary-fill); border-radius:var(--r-md); padding:0 20px; min-height:44px; cursor:pointer; white-space:nowrap; min-width:88px; font-family:inherit}
.ask button:disabled{opacity:.6; cursor:wait}
body.chat-mode .ask{
  margin:12px auto 0; max-width:720px; width:100%;
  padding:8px 8px 8px 16px; position:sticky; z-index:4;
  /* Above the home indicator, and above the software keyboard when app.js has
     measured one (--kb, 0 otherwise). */
  bottom:calc(max(8px, env(safe-area-inset-bottom, 0px)) + var(--kb, 0px));
}
body.chat-mode .ask textarea{max-height:8.8em}
/* The daily count sits outside the box, just above its top-right corner, so
   the pinned composer stays one row tall. The sticky form is the positioning
   context, so the label travels with it; its own ground keeps it legible over
   the transcript scrolling behind. */
body.chat-mode .ask-remain{display:block; position:absolute; right:10px; bottom:calc(100% + 6px);
  padding:2px 10px; border-radius:999px; background:var(--canvas); box-shadow:var(--shadow-1); line-height:1.5; pointer-events:none}

/* The operator's pause notice, on its own row at the top of the composer. */
.ask-paused{flex:1 1 100%; margin:4px 0 0; padding:10px 12px; border-radius:var(--r-md); background:var(--panel-2); color:var(--ink); font-size:var(--fs-sm); line-height:1.5}
.ask-paused[hidden]{display:none}

/* The operator's banner: in flow under the top bar, dismissible for the session. */
.ops-banner{display:flex; align-items:center; gap:8px; max-width:976px; margin:8px auto 0; padding:4px 4px 4px 16px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1); color:var(--ink)}
.ops-banner[hidden]{display:none}
.ops-banner-text{flex:1 1 auto; min-width:0; margin:0; padding:8px 0; font-size:var(--fs-sm); line-height:1.5; overflow-wrap:anywhere}
.ops-banner-close{flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap); border:0; background:transparent; color:var(--muted); border-radius:999px; cursor:pointer}
.ops-banner-close svg{width:18px; height:18px}
.ops-banner-close:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* Consent is asked where the question is asked, not in 12px footer type. */
.ask-consent{display:flex; align-items:center; justify-content:center; gap:8px; max-width:600px; margin:6px auto 0; min-height:var(--tap); font-size:var(--fs-sm); color:var(--muted); cursor:pointer; text-align:left; line-height:1.45}
.ask-consent input{accent-color:var(--ink); width:18px; height:18px; margin:1px 0 0; flex:none; cursor:pointer}
body.chat-mode .ask-consent{display:none}

.newq{display:none; margin:0 0 12px}
body.chat-mode .newq{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:720px; width:100%; margin:0 auto 12px}
.newq button{font-size:var(--fs-sm); font-weight:600; color:var(--ink); background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-pill); padding:0 16px; min-height:var(--tap); cursor:pointer; font-family:inherit; box-shadow:var(--shadow-1); display:inline-flex; align-items:center; gap:6px}
.newq button:before{content:"+"; font-weight:700; color:var(--accent-ink)}
.langstay{font-size:var(--fs-xs); color:var(--muted); margin:0}

.transcript{display:none}
body.chat-mode .transcript{
  display:flex; flex-direction:column; gap:14px;
  flex:1; min-height:0;
  max-width:720px; width:100%; margin:0 auto; padding:4px 0 8px;
}
.turn-user{align-self:flex-end; max-width:min(82%, 36rem); background:var(--accent-soft); color:var(--ink); border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg); padding:10px 14px; font-size:var(--fs-md); line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.turn-assistant{align-self:stretch; max-width:100%}
.turn-assistant .answer{max-width:none; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--panel)}
.turn-error{align-self:stretch; background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:14px 16px; font-size:var(--fs-md); color:var(--ink); box-shadow:var(--shadow-1)}
.turn-pending{align-self:stretch}
/* Emergency help card (crisis.py). Above the answer, never collapsed, red
   edge because it is the one thing on the page that must not be missed. Every
   number is a full --tap target so a shaking hand can still reach it. */
.turn-crisis{align-self:stretch; background:var(--panel); border:1px solid var(--hair); border-left:4px solid var(--unverified); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-2); color:var(--ink)}
.crisis-title{font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.25; margin:0 0 6px; color:var(--unverified-ink)}
.crisis-lede{font-size:var(--fs-md); line-height:1.5; margin:0 0 12px}
.crisis-lines{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.crisis-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--hair)}
.crisis-line:first-child{border-top:0; padding-top:0}
.crisis-line-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.crisis-name{font-weight:600; font-size:var(--fs-md)}
.crisis-for{font-size:var(--fs-sm); color:var(--muted); line-height:1.4}
.crisis-call{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap); min-width:var(--tap); padding:0 16px; border-radius:var(--r-pill); background:var(--primary-fill); color:var(--primary-fg); font-size:var(--fs-sm); font-weight:600; text-decoration:none; white-space:nowrap}
.crisis-call:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.crisis-kept{font-size:var(--fs-xs); color:var(--muted); margin:12px 0 0; line-height:1.45}
.crisis-gate{border-left:4px solid var(--unverified); padding:2px 0 2px 12px; margin:0 0 14px}
.crisis-gate[hidden]{display:none}
.crisis-gate-title{font-weight:600; color:var(--unverified-ink); margin:0 0 8px; font-size:var(--fs-md)}
.crisis-gate-lines{display:flex; flex-wrap:wrap; gap:8px}
.crisis-gate-name{font-weight:400; opacity:.85}
@media (max-width:480px){
  .crisis-line{flex-direction:column; align-items:stretch}
  .crisis-call{width:100%}
}
body.chat-mode .turn-assistant .q-echo,
body.chat-mode .turn-assistant .q-text{display:none}

.ask-gate{max-width:600px; margin:16px auto 0; background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:18px 20px; box-shadow:var(--shadow-2); text-align:left}
.ask-gate[hidden]{display:none}
body.chat-mode .ask-gate:not([hidden]){max-width:720px; width:100%}
.ask-gate-title{font-family:var(--font-display); font-size:var(--fs-xl); margin:0 0 6px; color:var(--ink)}
.ask-gate-body{font-size:var(--fs-md); color:var(--muted); margin:0 0 14px; line-height:1.55}
.ask-gate-sub{font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink); margin:18px 0 8px}
.ask-gate-tools{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; margin:0 0 6px}
#waitlistForm{display:flex; flex-direction:column; gap:8px}
#waitlistForm input{font:inherit; font-size:var(--fs-md); color:var(--ink); background:var(--canvas); border:1px solid var(--hair); border-radius:var(--r-md); padding:0 12px; min-height:44px}
#waitlistForm button{font:inherit; font-weight:700; font-size:var(--fs-sm); color:var(--primary-fg); background:var(--primary-fill); border:0; border-radius:var(--r-md); padding:0 16px; min-height:44px; cursor:pointer}
.ask-gate-status{font-size:var(--fs-sm); color:var(--verified-ink); min-height:1.2em; margin:8px 0 0}
.ask-gate-business{display:flex; align-items:center; min-height:44px; margin-top:8px; font-size:var(--fs-sm); font-weight:600; color:var(--accent-ink)}
.ask-gate-chambers{display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.qchip{font-size:var(--fs-sm); font-weight:500; color:var(--ink); background:var(--panel); border:1px solid var(--hair); border-radius:999px; padding:0 16px; min-height:var(--tap); cursor:pointer; box-shadow:var(--shadow-1); font-family:inherit; text-align:left; line-height:1.3}
.qchip:hover{border-color:var(--accent)}

/* ---- free tool links ----
   The landing strip that used these is gone; the daily-limit gate still lays
   them out, on its own grid (.ask-gate-tools). */
.toollink{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md); padding:12px 14px; min-height:44px; box-shadow:var(--shadow-1); transition:border-color .15s ease, transform .15s ease}
.toollink:hover{border-color:var(--accent)}
.toollink b{font-weight:600; font-size:var(--fs-sm)}
.toollink span{font-size:var(--fs-xs); color:var(--muted); line-height:1.4}

/* ---- hero visual: the corpus wall, and the claim it proves, as one block.
   "wall" won the 2026-07-29 backdrop bake-off and is authored in the markup
   (<body data-hero="wall">); the losing variants' rules survive below with no
   markup to match them, the switcher itself having been removed. ---- */
.hero-visual{max-width:900px; margin:32px auto 0; position:relative}
.hero-photo{
  position:relative; border-radius:26px; overflow:hidden; padding:30px 20px; min-height:180px;
  display:flex; align-items:center;
  --hero-img: url('img/hero-mauritius.jpg');
  background:
    radial-gradient(120% 70% at 12% -10%, rgba(255,238,199,.95), transparent 55%),
    radial-gradient(100% 80% at 88% 0%, rgba(163,196,150,.6), transparent 60%),
    radial-gradient(140% 100% at 50% 120%, rgba(58,74,45,.85), transparent 65%),
    linear-gradient(180deg, #f6ecc9 0%, #cfe0b8 38%, #7f9a68 68%, #3d4d2c 100%);
}
@supports (background-image: image-set(url('img/hero-mauritius.webp') type("image/webp"))) {
  .hero-photo{ --hero-img: image-set(url('img/hero-mauritius.webp') type('image/webp'), url('img/hero-mauritius.jpg') type('image/jpeg')); }
}
@media(min-width:640px){ .hero-photo{padding:44px 40px; min-height:240px} }

.hv-wall,.hv-photo,.hv-video,.hv-quad{position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none; transition:opacity .2s ease; overflow:hidden; border-radius:inherit}
body[data-hero="wall"] .hv-wall{opacity:1}
body[data-hero="photo"] .hv-photo{opacity:1}
body[data-hero="video"] .hv-video{opacity:1}
body[data-hero="quad"] .hv-quad{opacity:1}

/* A: a drifting wall of real corpus citations, tinted per column. */
/* Was blur(2.2px): blurred type reads as a rendering fault, not as texture.
   Sharp and faint instead, faded out at the top and bottom edges. */
.hv-wall{display:flex; background:linear-gradient(160deg,#10150b 0%,#232a18 34%,#2f2d1d 68%,#11160c 100%)}
/* No top/bottom fade any more. It existed to dissolve a light wall into the
   parchment page; a dark block fading into parchment reads as a smudge, and the
   frame's 26px radius is the edge the claim needs. The frame's own gradient is
   still nulled: the wall paints the background now. */
body[data-hero="wall"] .hero-photo{background:none}
.wallcol{flex:1; position:relative; overflow:hidden; border-right:1px solid rgba(245,239,230,.06)}
.wallcol:last-child{border-right:0}
/* The four flag colours, one per column, painted ABOVE the scrim (z-index 3
   against its 2). Under it they washed to nothing: the scrim is there to quiet
   the citations, not the quadricolour, which is the point of the graphic. */
.wallcol:after{content:"";position:absolute;inset:0;z-index:3;opacity:.44;
  mix-blend-mode:screen; pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% 4%, var(--tint) 0%, transparent 74%),
    linear-gradient(184deg, transparent 18%, var(--tint) 118%);}
/* And a vignette under the tint, so a column has a lit centre and dark edges
   rather than one even wash. This is the texture the flat fill destroyed. */
.wallcol:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%, transparent 28%, rgba(6,8,4,.52) 100%)}
/* The lines are clipped by .wallcol rather than wrapped (a wrapped fragment
   behind the claim reads as noise). On a phone the columns are narrow enough
   that a long Act title is guillotined mid-word, so each column fades its own
   left and right edge: a clipped title dissolves into texture instead of
   looking like broken text. */
.walltrack{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column; gap:20px; padding:16px 9px; animation:walldrift var(--dur) linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.wline{font-family:var(--font-display); font-weight:400; font-size:var(--fs-sm); line-height:1.4; text-align:center; color:#F5EFE6; opacity:.42; white-space:nowrap}
/* The claim sits on the wall now, so the wall needs a scrim for the same reason
   the dark band it replaced had one: the copy is over moving text. Parchment
   rather than ink, and heaviest on the left, where the sentence is. */
.hv-wall:after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg, rgba(16,20,12,.80) 0%, rgba(16,20,12,.66) 46%, rgba(16,20,12,.60) 100%)}
@keyframes walldrift{ from{transform:translateY(0)} to{transform:translateY(-50%)} }

/* The claim, on the wall. This is the dark proofband re-cut for ink on
   parchment: same grid, same two live numbers, one graphic instead of two. */
.hv-proof{position:relative; z-index:1; width:100%; color:#F5EFE6; text-align:left}
.hv-proof .inner{display:grid; grid-template-columns:1fr; gap:24px; align-items:center}
@media(min-width:820px){ .hv-proof .inner{grid-template-columns:1.3fr .7fr; gap:28px} }
.hv-proof .quote{font-family:var(--font-display); font-weight:400; font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.3; margin:0}
.hv-proof .who{font-size:var(--fs-sm); color:#F5EFE6; opacity:.78; margin:10px 0 0}
.hv-proof .stats{display:flex; gap:0}
.hv-proof .stat{flex:1; text-align:center; padding:0 14px; border-left:1px solid rgba(245,239,230,.25)}
.hv-proof .stat:first-child{border-left:none}
.hv-proof .stat .v{font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.1}
.hv-proof .stat .l{font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:#F5EFE6; opacity:.75; margin-top:4px}
@media(max-width:819px){
  .hv-wall:after{background:linear-gradient(180deg, rgba(16,20,12,.78) 0%, rgba(16,20,12,.74) 100%)}
  .hv-proof .stat{padding:0 8px}
}

/* B: one real Mauritius photograph (Le Morne Brabant, Unsplash licence). */
.hv-photo{background-image:var(--hero-img); background-size:cover; background-position:center 55%;
  filter:blur(7px) saturate(1.15) sepia(.32) hue-rotate(-8deg) brightness(1.02) contrast(.96); transform:scale(1.1)}

/* C: the same composition, panning. No clip generated; production would swap
   this for a real muted loop with the poster painting first. */
.hv-video .kb{position:absolute; inset:-8%; background-image:var(--hero-img); background-size:cover; background-position:center 55%;
  filter:blur(6px) saturate(1.15) sepia(.28) hue-rotate(-8deg) brightness(1.02);
  animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{ from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.17) translate(-1.5%,-1%)} }

/* D: four flag-duotoned columns. Kept reachable for the cofounder review, not
   the shipped default: see the plan's rationale (verified/unverified collision). */
.hv-quad{display:flex}
.quadcol{flex:1; position:relative; overflow:hidden; border-right:1px solid rgba(255,255,255,.14)}
.quadcol:last-child{border-right:0}
.quadcol .qc-img{position:absolute; inset:-8%; background-image:var(--hero-img); background-size:cover; background-position:center 55%;
  filter:grayscale(1) contrast(1.08) brightness(1.08) blur(3px); animation:kenburns var(--dur) ease-in-out infinite alternate}
.quadcol:after{content:"";position:absolute;inset:0;mix-blend-mode:color;opacity:.85;background:var(--tint);z-index:1}

/* ---- result / answer card (the frosted glass panel; also the .fb-answer
   guided-fallback card) ---- */
.result{position:relative; z-index:1}
.answer{position:relative; margin:0 auto; max-width:600px; border-radius:var(--r-xl);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  background:rgba(255,255,255,.74); box-shadow:var(--shadow-2); overflow:hidden}
.answer .topedge{height:3px; background:linear-gradient(90deg,var(--flag-red),var(--flag-blue),var(--flag-yellow),var(--flag-green))}
.a-pad{padding:22px 26px}
.q-echo{font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:6px}
.q-text{font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); margin:0 0 14px; color:var(--ink)}
.lead{font-size:var(--fs-md); line-height:1.6; margin:0 0 10px; color:var(--ink)}
.points{list-style:none; margin:0 0 10px; padding:0}
.points-head{font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin:12px 0 2px}
.point{display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--hair); font-size:var(--fs-md); line-height:1.55; color:var(--ink)}
.point .n{font-weight:700; color:var(--accent-ink); font-variant-numeric:tabular-nums}
/* A list the generator wrote that only restates the sentence above it is
   folded, not dropped: nothing the model said is hidden past one click. */
.points-more{margin:4px 0 10px}
.points-more>summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.points-more>summary::-webkit-details-marker{display:none}
.points-more>summary:before{content:"\203a"; font-size:18px; color:var(--accent-ink); transition:transform .18s var(--ease)}
.points-more[open]>summary:before{transform:rotate(90deg)}
.disc{margin-top:14px; padding:11px 14px; border-radius:11px; font-size:var(--fs-sm); color:#8a2330; background:rgba(234,40,57,.08)}
.lead, .point, .claim-text, .fx-hears, .cc-intro p, .tool-head .lede{max-width:70ch}

/* ---- unified citation chip: one spec, matching the back office ---- */
.cite{display:inline-flex; align-items:center; gap:4px; font-weight:600; font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
  padding:2px 9px; border-radius:999px; white-space:nowrap; vertical-align:baseline; box-shadow:var(--shadow-1)}
.cite.v{color:var(--verified-ink); background:color-mix(in srgb, var(--verified) 12%, transparent)} .cite.v:before{content:"\2713"}
.cite.x{color:var(--crossref-ink); background:color-mix(in srgb, var(--crossref) 12%, transparent)} .cite.x:before{content:"\21b3"}
.cite.u{color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 12%, transparent)} .cite.u:before{content:"\26a0"}
/* The second and later mention of the same authority in one answer: still
   the same status colour and still opens the same passage, but a small
   numbered mark instead of the full title repeated six times. */
.cite.mini{padding:1px 7px; font-size:var(--fs-xs); box-shadow:none; vertical-align:1px}

.cite.doc{border:1px dashed var(--doc-cite); color:var(--doc-cite); background:color-mix(in srgb, var(--doc-cite) 8%, transparent); box-shadow:none} .cite.doc:before{content:"\2913"}

.sources{display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding:14px 26px; border-top:1px solid var(--hair); background:rgba(0,0,0,.03)}
.sources .lbl{font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-right:4px}
.src{font-size:var(--fs-sm); color:var(--ink); background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:6px 10px; text-decoration:none; display:inline-flex; gap:6px; align-items:center; min-height:var(--tap)}
.src .dotv{width:6px;height:6px;border-radius:50%;background:var(--verified)}
.src .srcn{min-width:18px; height:18px; border-radius:999px; display:inline-grid; place-items:center; font-size:var(--fs-xs); font-weight:700; color:var(--verified-ink); background:color-mix(in srgb, var(--verified) 12%, transparent); font-variant-numeric:tabular-nums; flex:none}
.src .srct{min-width:0}
/* Rendered only when the citation really has a pdf_url, so the marker never
   over-claims for a link that still goes to an issuing body's listing page. */
.src .pdfmark{font-size:var(--fs-xs); letter-spacing:.04em; font-weight:600; color:var(--muted);
  border:1px solid var(--hair); border-radius:4px; padding:1px 4px; line-height:1.4}
.tbadge{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); border-radius:5px; padding:2px 6px; line-height:1.5}
.tbadge.fr{color:#fff; background:var(--doc-cite)}
.tbadge.plain{color:var(--muted); background:var(--panel-2)}
.guard{font-size:var(--fs-sm); font-weight:600; color:var(--muted); padding:12px 26px}
.guard b{color:var(--verified-ink)}
.guard .cr{color:var(--crossref-ink)}
.guard .u{color:var(--unverified-ink)}

/* ---- statute-resolution banners (previously three inline style="" blocks in
   app.js; now tokens, not a hardcoded blue) ---- */
.banner-info{font-size:var(--fs-sm); color:var(--doc-cite); background:color-mix(in srgb, var(--doc-cite) 8%, transparent); border:1px solid color-mix(in srgb, var(--doc-cite) 20%, transparent); border-radius:8px; padding:8px 12px; margin-bottom:12px}
.dym-block{margin-bottom:12px}
.dym-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.corrected-note{font-size:var(--fs-xs); color:var(--faint); margin-bottom:10px}
/* currency notice: the law an answer states has moved, or is about to. The
   accent, not the unverified red: this is a caution about age, not a doubt about
   the citation, and the two must not read alike. Own glyph, never colour alone. */
.banner-currency{display:block; font-size:var(--fs-sm); color:var(--ink); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius:8px; padding:0; margin-bottom:12px}
.banner-currency>summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:10px; padding:9px 12px; line-height:1.45}
.banner-currency>summary::-webkit-details-marker{display:none}
.banner-currency .cu-glyph{color:var(--accent-ink); font-weight:700; line-height:1.4}
.banner-currency .cu-summary{flex:1 1 auto; min-width:0}
.banner-currency .cu-toggle{flex:none; font-size:var(--fs-xs); font-weight:600; color:var(--accent-ink); white-space:nowrap; padding-top:1px}
.banner-currency .cu-toggle:before{content:"\203a"; display:inline-block; margin-right:4px; font-size:var(--fs-sm); line-height:1; transition:transform .18s var(--ease)}
.banner-currency[open] .cu-toggle:before{transform:rotate(90deg)}
.banner-currency .cu-body{min-width:0; padding:0 12px 10px 32px}
.cu-work{padding:8px 0 4px}
.cu-work + .cu-work{border-top:1px solid color-mix(in srgb, var(--accent) 25%, transparent)}
.cu-work-head{font-weight:600; margin-bottom:4px; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline}
.cu-cited{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.cu-acts{margin:2px 0 6px; padding-left:18px}
.cu-acts li{margin:0 0 2px}
.banner-currency p{margin:0 0 4px}
.banner-currency p:last-child{margin-bottom:0}
.banner-currency .dym-row{margin-top:8px}
.cu-line{font-size:var(--fs-sm); color:var(--muted); margin:6px 0 0}

/* ---- guided fallback inside Ask ---- */
.fb-title{font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1.25; margin:0 0 7px; color:var(--ink)}
.fb-intro{font-size:var(--fs-md); color:var(--muted); margin:0}
.fb-block{border-top:1px solid var(--hair); margin-top:20px; padding-top:18px}
.fb-section{font-weight:700; font-size:var(--fs-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px}
.fb-note{font-size:var(--fs-sm); color:var(--ink); background:var(--accent-soft); border-radius:8px; padding:8px 12px; margin-bottom:12px}
.fb-grounded .answer{box-shadow:none; border-radius:var(--r-lg); backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--panel)}
.fb-grounded .a-pad,.fb-grounded .sources,.fb-grounded .guard{padding-left:20px;padding-right:20px}
.fb-source-list{display:flex;flex-direction:column;gap:8px}
.fb-source{align-items:flex-start;width:100%}
.fb-source-copy{display:flex;flex-direction:column;min-width:0}
.fb-blurb{font-size:var(--fs-sm); color:var(--muted); line-height:1.45; margin-top:3px}
.fb-chips{display:flex;flex-wrap:wrap;gap:8px}
.fb-clarify+.cc-label{margin-top:12px}
.fb-lawyer-bar{margin-top:20px}

/* ---- loading ---- */
.loading{display:flex; align-items:center; gap:12px; padding:24px 26px; color:var(--muted); font-size:var(--fs-sm)}
/* The pending turn: truthful stages on a timer, the elapsed seconds, and how
   long an answer usually takes. It used to be one static line for 50 seconds,
   which on mobile data reads as a hang. */
.pending{padding:20px 24px 22px}
.pending-now{display:flex; align-items:center; gap:12px; font-size:var(--fs-md); color:var(--ink); font-weight:600}
.pending-steps{list-style:none; margin:14px 0 0; padding:0 0 0 28px; display:flex; flex-direction:column; gap:6px}
.pending-steps li{font-size:var(--fs-sm); color:var(--faint); display:flex; gap:8px; align-items:baseline}
.pending-steps li:before{content:""; width:7px; height:7px; border-radius:50%; border:1.5px solid currentColor; flex:none; transform:translateY(-1px)}
.pending-steps li.done{color:var(--muted)}
.pending-steps li.done:before{background:var(--verified); border-color:var(--verified)}
.pending-steps li.now{color:var(--ink); font-weight:600}
.pending-steps li.now:before{border-color:var(--accent); background:var(--accent)}
.pending-meta{margin:14px 0 0 28px; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--hair);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{display:flex; justify-content:space-between; gap:8px 16px; padding:26px 0 60px; color:var(--faint); font-size:var(--fs-sm); border-top:1px solid var(--hair); margin-top:10px; flex-wrap:wrap}
.footer a{color:var(--muted); min-height:var(--tap); display:inline-flex; align-items:center}

/* ---- marketing bands (collapse once the app is in real use) ---- */
body.chat-mode .marketing-only, body.companion-mode .marketing-only{display:none}
.band{padding:56px 0}
.band.alt{background:var(--panel-2)}
.bandhead{max-width:560px; margin:0 auto 32px; text-align:center}
.h2{font-family:var(--font-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(1.6rem,3.8vw,2.5rem); margin:0 0 10px; color:var(--ink)}
.lede{font-size:var(--fs-md); color:var(--muted); margin:0}

/* real-photo decorative band, shared by the proof band, step-card thumbnails
   and the Case Companion split panel (all three reuse the same asset, per
   Selene's own "the photo carries the whole page" technique). */
.photo{
  position:relative; border-radius:22px; overflow:hidden;
  background-image:var(--hero-img, url('img/hero-mauritius.jpg'));
  background-size:cover; background-position:center 55%;
}
@supports (background-image: image-set(url('img/hero-mauritius.webp') type("image/webp"))) {
  .photo{ background-image: image-set(url('img/hero-mauritius.webp') type('image/webp'), url('img/hero-mauritius.jpg') type('image/jpeg')); }
}
.photo.dark-overlay:after{content:"";position:absolute;inset:0;background:rgba(10,12,6,.55)}

.steps{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:641px) and (max-width:759px){ .steps{grid-template-columns:1fr 1fr} }
@media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr)} }
.stepcard{display:flex; flex-direction:column}
/* One image per step, not one image cropped three ways. Until they are
   licensed, STEP_IMAGES in app.js is empty and the card falls back to
   .steplabel, which is a finished card rather than a placeholder. */
.stepshot{
  position:relative; height:140px; margin-bottom:16px; border-radius:22px;
  background-size:cover; background-position:center; overflow:hidden;
}
.stepshot .mini{position:absolute; left:14px; right:14px; bottom:14px; background:rgba(255,255,255,.75); backdrop-filter:blur(10px); border-radius:12px; padding:10px 12px; font-size:var(--fs-xs); font-weight:600; color:var(--ink); box-shadow:var(--shadow-1)}
.steplabel{display:inline-block; margin-bottom:10px}
.stepcard h3{font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); margin:0 0 6px; color:var(--ink)}
.stepcard p{font-size:var(--fs-md); color:var(--muted); margin:0; line-height:1.55}

.split{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:820px){ .split{grid-template-columns:1fr 1fr} }
.panel{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-1)}
/* The Case Companion card. `.panel`'s background shorthand, later in this file
   and equal in specificity, reset the `.photo` image to none, so the card
   rendered as a white-to-black gradient with its heading white on white on a
   phone. The photograph it was reaching for is the Le Morne image the hero and
   the step cards already retired (a memorial to maroonage, not scenery), so
   this is not a photo card any more: it is a dark card on purpose, on the same
   olive the rest of the surface uses, legible at every height. */
.panel.photo-panel{position:relative; padding:0; min-height:220px; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%, rgba(233,217,168,.18), transparent 60%), linear-gradient(160deg, #4a4e2a 0%, var(--accent-2-dark) 55%, #2c2f19 100%);
  border-color:var(--accent-2-dark)}
.panel.photo-panel:before{content:none}
.panel.photo-panel .content{position:relative; z-index:1; width:100%; padding:26px; color:#F5EFE6}
.panel h3{font-family:var(--font-display); font-weight:400; font-size:var(--fs-xl); margin:0 0 8px; color:var(--ink)}
.panel.photo-panel h3{color:#F5EFE6}
.panel p{font-size:var(--fs-md); color:var(--muted); margin:0 0 16px; line-height:1.55}
.panel.photo-panel p{color:rgba(245,239,230,.85)}
.lift{transition:transform .2s ease, box-shadow .2s ease}


/* The centring is the display mode: min-height makes the pill taller than its
   line box, and only inline-flex + align-items:center puts the label in the
   middle of it. An <a> call site carried style="display:inline-block", which
   overrode this and left the label riding 2px from the top of a 44px pill.
   text-decoration lives here now so no call site needs an inline style at all,
   which is how that override got in. */
.pillcta{font-size:var(--fs-sm); font-weight:600; color:var(--primary-fg); background:var(--primary-fill); border:0; border-radius:999px; padding:0 18px; min-height:var(--tap); min-width:var(--tap); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap; transition:transform .15s ease; font-family:inherit; text-decoration:none}
.pillcta:active{transform:scale(.97)}
/* The secondary CTA. It was filled with --panel-2, which is also .band.alt's
   own background, so on that band it was the colour of the page behind its
   card and read as a hole. An outline fixed the collision and introduced a
   worse one: a large-radius hairline box with bold text inside is the shape of
   a text input, and it out-sized the solid primary beside it, inverting the
   hierarchy. A soft accent tint is a button at a glance, is clearly subordinate
   to the solid primary, and shares a token with no band background. */
.pillcta.ghost{color:var(--accent-ink); background:var(--accent-soft); box-shadow:none; border:0; padding:0 22px}
.pillcta.ghost:hover{background:color-mix(in srgb, var(--accent) 22%, transparent)}

.iconrail{display:flex; gap:14px; flex-wrap:wrap; margin:18px 0}
.iconchip{display:flex; flex-direction:column; align-items:center; gap:8px; width:84px}
.iconchip .c{width:44px;height:44px;border-radius:999px;background:var(--accent-2-soft); color:var(--accent-2); display:grid; place-items:center}
.iconchip .l{font-size:var(--fs-xs); color:var(--muted); text-align:center; line-height:1.3}

/* pricing: built, kept hidden for now (app.js SHOW_PRICING) */
.pricing{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:820px){ .pricing{grid-template-columns:repeat(3,1fr)} }
.tier{border-radius:var(--r-xl); padding:26px; background:var(--panel); border:1px solid var(--hair); box-shadow:var(--shadow-1); display:flex; flex-direction:column}
.tier.pop{background:var(--accent-2-dark); border-color:var(--accent-2-dark); color:#F3EFE3}
.tier .tname{font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink)}
.tier.pop .tname{color:#E9D9A8}
.tier .tprice{font-family:var(--font-display); font-weight:400; font-size:22px; margin:8px 0 6px}
.tier .tnote{font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px}
.tier.pop .tnote{color:rgba(243,239,227,.75)}
.tier ul{list-style:none; margin:0 0 20px; padding:0; flex:1}
.tier li{display:flex; gap:8px; font-size:var(--fs-sm); padding:6px 0; align-items:flex-start}
.tier li:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-top:7px;flex-shrink:0;opacity:.6}
.tier .cta{align-self:flex-start}

.faq{max-width:760px; margin:0 auto}
.faqrow{background:var(--panel-3); border-radius:14px; margin-bottom:10px; overflow:hidden}
.faqrow summary{list-style:none; cursor:pointer; padding:16px 20px; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--font-display); font-size:var(--fs-md); color:var(--ink)}
.faqrow summary::-webkit-details-marker{display:none}
.faqrow .ic{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;color:var(--muted)}
.faqrow[open] .ic{transform:rotate(45deg)}
.faqrow .a{padding:0 20px 16px; font-size:var(--fs-md); color:var(--muted); line-height:1.6; max-width:70ch}

/* ---- mode toggle (Ask | Case Companion), reuses the segmented-pill look ---- */
/* .modes / .modebtn styled above, next to the language pills */

/* ---- Case Companion ---- */
.companion{margin:28px 0 50px; display:flex; flex-direction:column; gap:18px}
/* display:flex beats the UA [hidden]{display:none}, the same trap as .drawer:
   once a person had opened Case Companion, its whole page stayed rendered under
   the Ask conversation for the rest of the visit. */
.companion[hidden]{display:none}
.cc-intro{max-width:680px}
.cc-intro h1, .cc-intro h2{font-family:var(--font-display); font-weight:300; letter-spacing:-.03em; font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0 0 8px; color:var(--ink)}
.cc-intro p{font-size:var(--fs-md); color:var(--muted); margin:0}
.cc-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:13px 16px; border-radius:14px; font-size:var(--fs-sm); color:#8a2330; background:rgba(234,40,57,.08); border:1px solid var(--hair)}
.cc-bar .lawyer{font-weight:700; font-size:var(--fs-sm); color:var(--primary-fg); background:var(--primary-fill); border:0; border-radius:999px; padding:0 16px; min-height:var(--tap); cursor:pointer; white-space:nowrap; font-family:inherit}
.cc-note{font-size:var(--fs-sm); color:var(--muted); background:var(--panel); border:1px dashed var(--hair); border-radius:10px; padding:10px 14px}
.cc-step{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--shadow-1); overflow:hidden}
.cc-step>.head{display:flex; align-items:center; gap:10px; padding:18px 24px; border-bottom:1px solid var(--hair)}
.cc-step>.head .num{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);color:var(--primary-fg);background:var(--primary-fill);flex:none}
.cc-step>.head h3{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lg); margin:0; color:var(--ink)}
.cc-body{padding:18px 24px}
.cc-grid{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:var(--fs-md); margin:0 0 8px}
.cc-grid dt{font-weight:700; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-top:2px}
.cc-grid dd{margin:0; color:var(--ink)}
textarea.cc-input, input.cc-input{width:100%; font-family:inherit; font-size:var(--fs-md); color:var(--ink); background:var(--canvas); border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius:12px; padding:12px 14px; min-height:48px; outline:0; resize:vertical}
textarea.cc-input{min-height:96px}
.cc-input:focus{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent)}
.cc-input:focus-visible{outline:none}
.cc-input[aria-invalid="true"]{border-color:var(--unverified-ink)}
/* One field = label, optional hint, control, optional error. The spacing lives
   here so no form can have a label touching the field above it again. */
.field{margin:0 0 18px}
.field:last-child{margin-bottom:0}
.field .tool-note{margin:-2px 0 8px}
.field-err{font-size:var(--fs-sm); color:var(--unverified-ink); margin:6px 0 0}
.cc-label{font-weight:600; font-size:var(--fs-sm); color:var(--ink); display:block; margin:0 0 8px}
.cc-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.cc-btn{font-weight:700; font-size:var(--fs-sm); color:var(--primary-fg); background:var(--primary-fill); border:0; border-radius:12px; padding:0 18px; min-height:44px; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.cc-btn.ghost{color:var(--ink); background:transparent; border:1px solid var(--hair)}
.cc-btn:disabled{opacity:.6; cursor:wait}
.cc-card{border:1px solid var(--hair); border-radius:14px; padding:14px 16px; margin-top:12px; background:var(--canvas)}
.cc-card .q{font-size:var(--fs-md); color:var(--ink); margin:0 0 10px; line-height:1.5}
.cc-reveal{font-weight:600; font-size:var(--fs-sm); color:var(--accent-ink); background:var(--accent-soft); border:0; border-radius:8px; padding:0 12px; min-height:var(--tap); cursor:pointer; font-family:inherit}
.cc-basis{font-size:var(--fs-sm); color:var(--muted); margin:10px 0 0; line-height:1.55}
.cc-list{list-style:none; margin:0; padding:0}
.cc-list li{padding:9px 0; border-top:1px solid var(--hair); font-size:var(--fs-md); line-height:1.55; color:var(--ink)}
.cc-list li:first-child{border-top:0}
.cc-sub{font-weight:700; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin:14px 0 2px}
.cc-sub.risk{color:var(--unverified-ink)}
.cc-loading{display:flex; align-items:center; gap:12px; padding:6px 0; color:var(--muted); font-size:var(--fs-md)}
.cc-empty{font-size:var(--fs-sm); color:var(--muted); padding:4px 0}
.cc-error{font-size:var(--fs-sm); line-height:1.5; color:var(--unverified-ink); padding:8px 0 0}
/* A step that refuses because the corpus cannot support it. Deliberately reads as
   a stated position rather than an error: the left rule and ink-coloured text mark
   it as content, not as something that went wrong. */
.cc-refused{font-size:var(--fs-sm); line-height:1.55; color:var(--ink); padding:10px 12px;
  border-left:3px solid var(--hair); background:var(--canvas); border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---- motion: tiny vocabulary, one easing, killed under reduced-motion ---- */
/* The hidden start state is scoped to .js-motion, set by the inline script in
   index.html's <head>. Unscoped, .rise hid itself and depended on its own
   animation's `both` fill to bring it back, so anything that nulled the
   animation left the hero blank forever. Now JavaScript off, a blocked inline
   script, reduced motion and a nulled animation all resolve to "nothing was
   ever hidden". The reduced-motion rule below is kept as well: belt and
   braces, the same posture chambers.css takes. */
html.js-motion .rise{opacity:0; animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }
/* .rise hides itself and depends on the animation's `both` fill to bring it
   back, but the rule above nulls that animation, so the element stayed at
   opacity:0 forever. The citizen hero copy, the ask composer and the hero
   visual all carry .rise (index.html:45,50,57), which means the entire
   landing hero rendered blank for anyone browsing with reduced motion on.
   Restoring the end state explicitly is the whole fix. Any future hidden
   start state needs the same treatment: see the note in chambers.css, whose
   reveal layer is gated behind a class for exactly this reason. */
@media (prefers-reduced-motion: reduce){ .rise{opacity:1; animation:none} }

@media(max-width:640px){
  .hero{padding:44px 0 32px}
  .ask{border-radius:16px}
  .qchip{min-height:44px}
  .a-pad,.sources,.guard{padding-left:20px;padding-right:20px}
  .cc-intro h1, .cc-intro h2{font-size:1.5rem} .cc-body,.cc-step>.head{padding-left:18px;padding-right:18px}
  .hero-photo{padding:20px 16px}
}

/* =========================================================================
   Phase 2 + 3: the evidence layer and the citizen tools.

   Everything below is built on the tokens already in tokens.css. No new colour
   is introduced: the status pills reuse the citation triad (--verified,
   --unverified, --crossref) so a repealed Act and an unverified citation read
   the same way, and every card is the same white panel on parchment the rest of
   the surface uses.
   ========================================================================= */

/* A label that exists for a screen reader and not for the eye. Used by the ask
   input, whose label was missing entirely, and by the follow-up field. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.linkish{background:none; border:0; padding:0; font:inherit; font-size:var(--fs-sm); font-weight:600;
  color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px; min-height:var(--tap)}
/* The way back from a tool page. It was a bare "Back" 19px tall; it now says
   where it goes ("All tools", "Your rights") and is a real link with a 44px
   target, so the browser's own back and middle-click both behave. */
.backlink{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); text-decoration:none}
.backlink:before{content:"\2039"; font-size:22px; line-height:1; color:var(--accent-ink); transform:translateY(-1px)}
.backlink:hover{text-decoration:underline; text-underline-offset:3px}

/* ---- clickable citation chips ------------------------------------------- */
/* A chip is a <button> only when a passage exists behind it, so the affordance
   is never a lie. It keeps the exact same painted appearance as the <span>
   form; the only added signal is the underline on hover and the focus ring. */
button.cite{font-family:inherit; cursor:pointer; border:0; position:relative}
/* The tap area of an inline chip, not its visible box: extends to the floor
   above and below without touching line rhythm. */
button.cite.open::after{content:""; position:absolute; left:0; right:0;
  top:calc((var(--tap) - 100%) / -2); bottom:calc((var(--tap) - 100%) / -2)}
button.cite.open:hover{text-decoration:underline; text-underline-offset:2px}
button.cite.open:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* ---- status pill --------------------------------------------------------- */
/* Never colour alone: each state carries its own glyph, because the difference
   between "consolidated text" and "repealed" is the whole point and a reader
   who cannot distinguish green from red still has to get it. */
.statuspill{display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.03em; border-radius:999px; padding:3px 9px; margin:2px 0;
  border:1px solid var(--hair); background:var(--canvas); color:var(--muted)}
.statuspill:before{font-weight:700}
.sp-current{color:var(--verified-ink); background:color-mix(in srgb, var(--verified) 10%, transparent);
  border-color:color-mix(in srgb, var(--verified) 30%, transparent)}
.sp-current:before{content:"\2713"}
.sp-repealed{color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 10%, transparent);
  border-color:color-mix(in srgb, var(--unverified) 30%, transparent)}
.sp-repealed:before{content:"\2715"}
.sp-missing{color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 10%, transparent);
  border-color:color-mix(in srgb, var(--unverified) 30%, transparent)}
.sp-missing:before{content:"\2715"}
.sp-stale{color:var(--accent-ink); background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.sp-stale:before{content:"\29d7"}
.sp-historic:before{content:"\29d6"}
.sp-bill:before{content:"\25cb"}
.sp-notlaw:before{content:"\2691"}
.sp-other:before{content:"\2022"}

/* ---- "the law behind this answer" ---------------------------------------- */
.lawbehind{border-top:1px solid var(--hair); padding:0 26px 14px}
.lawbehind>summary{list-style:none; cursor:pointer; padding:13px 0; font-size:var(--fs-sm);
  font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px}
.lawbehind>summary::-webkit-details-marker{display:none}
.lawbehind>summary:before{content:"\203a"; font-size:var(--fs-md); color:var(--accent-ink);
  transition:transform .18s var(--ease)}
.lawbehind[open]>summary:before{transform:rotate(90deg)}
.lb-n{font-size:var(--fs-xs); font-weight:700; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:999px; padding:1px 7px}
.lb-note{font-size:var(--fs-sm); color:var(--muted); margin:0 0 10px; line-height:1.55}
.lb-group{margin-bottom:12px}
.lb-head{font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:6px}
.lb-item{display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; text-align:left;
  background:var(--canvas); border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:8px 11px; margin-bottom:5px; cursor:pointer; font:inherit; min-height:44px}
.lb-item:hover{border-color:var(--accent)}
.lb-cite{font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums; color:var(--doc-cite)}
.lb-title{font-size:var(--fs-sm); color:var(--ink); flex:1 1 220px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-tag{font-size:var(--fs-xs); font-weight:600; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:999px; padding:1px 7px; white-space:nowrap}
.guard .qk{color:var(--muted)}
.guard .none,.guard .rt{color:var(--muted); font-weight:500}

/* ---- first-visit notice -------------------------------------------------- */
/* Above the drawer and the PDF viewer: nothing else is usable until it is
   accepted. A bottom sheet on a phone, a centred card from 640px up. */
.notice-modal{position:fixed; inset:0; z-index:80; background:rgba(36,30,20,.45);
  display:flex; align-items:flex-end; justify-content:center}
.notice-modal[hidden]{display:none}
.notice-card{background:var(--panel); border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-2); width:100%; max-width:600px;
  max-height:92vh; max-height:92dvh; overflow:auto; overscroll-behavior:contain;
  padding:22px max(20px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px))}
.notice-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.notice-title{font-family:var(--font-display); font-size:var(--fs-xl); line-height:1.25; color:var(--ink); margin:0; outline:0}
.notice-lede{color:var(--muted); font-size:var(--fs-sm); line-height:1.5; margin:8px 0 0}
.notice-points{margin:16px 0 0; padding-left:1.3em; display:grid; gap:10px;
  font-size:var(--fs-sm); line-height:1.5; color:var(--ink)}
.notice-points strong{font-weight:700}
.notice-controller{font-size:var(--fs-xs); line-height:1.5; color:var(--muted); margin:14px 0 0}
.notice-more{font-size:var(--fs-xs); line-height:1.5; color:var(--muted); margin:6px 0 0}
.notice-more a{color:var(--accent)}
.legal .card-h{margin-top:22px}
.legal .card-h:first-child{margin-top:0}
.legal-list{margin:0 0 12px; padding-left:20px; line-height:1.55}
.legal-list li{margin:4px 0}
/* Pinned to the bottom of the sheet so the choice is always in view on a phone,
   however far down the points run. */
.notice-actions{display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px;
  position:sticky; bottom:calc(-1 * max(22px, env(safe-area-inset-bottom, 0px))); background:var(--panel);
  padding:12px 0 max(22px, env(safe-area-inset-bottom, 0px)); margin-bottom:calc(-1 * max(22px, env(safe-area-inset-bottom, 0px)))}
.notice-actions .pillcta{white-space:normal; text-align:center; line-height:1.3; padding:10px 18px}
.notice-either{font-size:var(--fs-xs); color:var(--muted); text-align:center; margin:0; grid-column:1 / -1}
@media (min-width:640px){
  .notice-modal{align-items:center; padding:24px}
  .notice-card{border-radius:var(--r-lg); padding:28px 32px}
  .notice-actions{grid-template-columns:1fr 1fr; position:static; padding:0; margin-bottom:0}
}

/* ---- welcome back -------------------------------------------------------- */
/* A whole screen of its own, not a dimmed page: a returning visitor chooses
   before anything else is on show. Just under the notice (80), which is
   always answered first. */
.resume-screen{position:fixed; inset:0; z-index:79; overflow:auto; overscroll-behavior:contain;
  background:radial-gradient(120% 70% at 50% 0%, var(--accent-soft), transparent 70%), var(--canvas);
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.resume-screen[hidden]{display:none}
.resume-inner{min-height:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column}
.resume-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:4px 0}
.resume-top .brand{display:inline-flex; align-items:center; gap:10px}
.resume-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:32px 0 8px}
.resume-title{font-family:var(--font-display); font-size:clamp(28px, 7vw, 40px); line-height:1.15; color:var(--ink); margin:0; outline:0; letter-spacing:-.01em}
.resume-lede{color:var(--muted); font-size:var(--fs-md); line-height:1.5; margin:10px 0 0}
.resume-card{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:18px 20px; margin-top:24px}
.resume-label{font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0}
.resume-q{font-size:var(--fs-md); line-height:1.45; color:var(--ink); margin:4px 0 0; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.resume-q + .resume-label{margin-top:14px}
.resume-q-last{-webkit-line-clamp:2}
.resume-meta{font-size:var(--fs-sm); color:var(--muted); margin:14px 0 0; padding-top:12px; border-top:1px solid var(--hair)}
.resume-actions{display:grid; grid-template-columns:1fr; gap:10px; margin-top:24px}
.resume-actions .pillcta{white-space:normal; text-align:center; line-height:1.3; padding:10px 22px; font-size:var(--fs-md)}
.resume-note{font-size:var(--fs-xs); line-height:1.5; color:var(--muted); text-align:center; margin:14px 0 0}
@media (min-width:640px){
  .resume-screen{padding:24px}
  .resume-actions{grid-template-columns:1fr 1fr}
}
/* Only on open: a language switch re-renders the screen and must not replay it. */
html.js-motion .resume-body.is-entering{animation:rise .5s var(--ease) both}

/* ---- source drawer ------------------------------------------------------- */
.drawer{position:fixed; inset:0; z-index:60; background:rgba(36,30,20,.32);
  display:flex; align-items:flex-end; justify-content:center; padding:0}
/* display:flex beats the UA stylesheet's [hidden]{display:none}, so without this
   the closed drawer stayed a full-screen 32% scrim over every page and ate every
   click underneath it. Caught by rendering the pages, not by reading them. Any
   element that sets display AND relies on [hidden] needs the same line. */
.drawer[hidden]{display:none}
.drawer-card{background:var(--panel); border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-2); padding:22px 24px 28px; width:100%; max-width:620px;
  /* dvh so the close control is inside the visible area under Safari's toolbar;
     the vh line above it is the fallback for an engine without dvh. */
  max-height:82vh; max-height:82dvh; overflow:auto; overscroll-behavior:contain;
  padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px));
  padding-bottom:max(28px, env(safe-area-inset-bottom, 0px))}
.drawer-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.drawer-cite{font-size:var(--fs-xl); font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}
.drawer-title{font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.35;
  color:var(--ink); margin:10px 0 8px}
.drawer-x{background:none; border:0; font-size:26px; line-height:1; color:var(--muted);
  cursor:pointer; padding:0; width:44px; height:44px; flex:none; border-radius:12px; margin:-8px -10px 0 0}
.drawer-x:hover{background:var(--canvas); color:var(--ink)}
/* The passage itself. Corpus text is pre-wrapped statute and judgment prose, so
   it keeps its own line breaks rather than being reflowed into a paragraph. */
.pass{margin:14px 0 4px}
.pass-note{font-size:var(--fs-sm); color:var(--muted); margin:6px 0 8px; line-height:1.5}
.pass-text{font-size:var(--fs-sm); line-height:1.6; color:var(--ink); white-space:pre-wrap;
  background:var(--canvas); border:1px solid var(--hair); border-radius:var(--r-sm);
  padding:12px 14px; overflow-wrap:anywhere}
.pass-text.clamped{max-height:11em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);
  mask-image:linear-gradient(180deg,#000 70%,transparent)}
/* What the verbatim span guard proved is in this source, and nothing else. */
/* ---- the ask-back trial ---------------------------------------------------- */
/* A stacked list, not pills: the options are whole questions of uneven length,
   and pills of random widths read as a tag cloud. "None of these" is a quiet
   text button under the list so it does not compete with the real options. */
.ask-back .eyebrow{margin-bottom:8px}
.ask-back .ab-row{display:flex; flex-direction:column; gap:8px; margin:14px 0 6px}
.ask-back .ab-chip{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  min-height:var(--tap); padding:11px 16px; border:1px solid var(--hair); border-radius:var(--r-md);
  background:var(--panel); color:var(--ink); font:inherit; font-size:var(--fs-sm); font-weight:500;
  line-height:1.4; text-align:left; cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease)}
.ask-back .ab-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ask-back .ab-go{flex:none; font-size:20px; line-height:1; color:var(--accent-ink)}
.ask-back .ab-none{display:inline-flex; align-items:center; min-height:var(--tap); padding:0 2px; border:0;
  background:transparent; color:var(--muted); font:inherit; font-size:var(--fs-sm); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair)}
/* The tool juris read a question as, offered under the answer it gave anyway. */
.route-note p{margin:0; font-size:var(--fs-md); line-height:1.55; color:var(--ink)}
.route-link{display:flex; margin:10px 0 0}
.route-link .route-open span{color:var(--accent-ink); margin-left:4px}
/* ---- the Act's outline inside the drawer ---------------------------------- */
.outline{margin:14px 0 6px}
.ol-act{font-family:var(--font-display); font-size:var(--fs-md); margin:2px 0 8px; color:var(--ink)}
.ol-list{list-style:none; margin:0; padding:0; border-left:2px solid color-mix(in srgb, var(--ink) 12%, transparent)}
.ol-list li{padding:3px 0 3px 12px; font-size:var(--fs-sm); line-height:1.45; color:var(--muted)}
.ol-part{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-top:8px}
.ol-sec .ol-num{display:inline-block; min-width:2.6em; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.ol-sec.is-here{color:var(--ink); background:var(--accent-soft); border-radius:0 8px 8px 0}
.ol-ins,.ol-here{font-size:var(--fs-xs); font-weight:600; color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:1px 7px; white-space:nowrap; margin-left:4px}
.ol-more{color:var(--faint)}
.pass-text mark{background:var(--accent-soft); color:inherit;
  border-radius:2px; padding:0 1px}
.pass-more{margin-top:8px}
/* ---- pdf viewer ---------------------------------------------------------- */
.pdfview{position:fixed; inset:0; z-index:70; background:rgba(36,30,20,.42);
  display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
/* Same trap as .drawer above: display:flex beats the UA stylesheet's
   [hidden]{display:none}, and without this line the closed viewer is a
   full-screen scrim swallowing every click on the page. */
.pdfview[hidden]{display:none}
.pv-card{background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  padding:20px 22px 24px; width:100%; max-width:900px; max-height:92vh; max-height:92dvh;
  overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column}
.pv-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.pv-title{font-family:var(--font-display); font-size:var(--fs-lg); line-height:1.35; color:var(--ink)}
.pv-status{font-size:var(--fs-sm); color:var(--muted); margin:10px 0 12px}
.pv-pages{display:flex; flex-direction:column; gap:14px}
.pv-page{position:relative; line-height:0; border:1px solid var(--hair);
  border-radius:var(--r-sm); overflow:hidden}
/* Painted over the canvas from the text layer's own transforms, so a mark
   cannot drift away from the glyphs it belongs to. */
.pv-mark{position:absolute; background:var(--accent-soft);
  outline:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:2px; pointer-events:none}
/* Fixed at the offset app.js recorded, not overflow:hidden alone, which WebKit
   ignores for scroll chaining; --lock-y keeps the page where it was. */
body.drawer-open{position:fixed; left:0; right:0; width:100%; overflow:hidden; top:calc(-1 * var(--lock-y, 0px))}
.totop{position:fixed; right:max(16px, env(safe-area-inset-right, 0px)); bottom:max(16px, env(safe-area-inset-bottom, 0px)); z-index:30;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px;
  border:1px solid var(--hair); background:var(--panel); color:var(--ink); box-shadow:var(--shadow-2);
  font:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer}
.totop[hidden]{display:none}
.totop svg{width:16px; height:16px}
@media(min-width:721px){
  .drawer{align-items:center}
  .drawer-card{border-radius:var(--r-lg)}
}

/* ---- answer actions: share, print ---------------------------------------- */
/* Part of the answer card's footer now. As a separate card under the answer
   they read as detached from the answer they act on. */
.answer-actions{border-top:1px solid var(--hair); padding:8px 20px 12px}
.fu-on{font-size:var(--fs-xs); color:var(--muted); margin-bottom:8px; display:flex; gap:8px;
  flex-wrap:wrap; align-items:baseline}
.fu-form{display:flex; gap:8px; flex-wrap:wrap}
.fu-form input{flex:1 1 260px; min-width:0; font:inherit; font-size:var(--fs-md); color:var(--ink);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:11px 16px; box-shadow:var(--shadow-1)}
.fu-form input:focus{outline:none; border-color:var(--accent)}
.aa-row{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.aa-btn{display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding:0 10px; border:0; background:transparent; border-radius:10px; font:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer}
.aa-btn:hover{background:var(--canvas); color:var(--ink)}
.aa-btn svg{width:16px; height:16px}
.aa-said{font-size:var(--fs-sm); color:var(--verified-ink); font-weight:600}

/* ---- the tools surface --------------------------------------------------- */
/* Tools take over the page. The hero, the Ask result, the Companion and every
   marketing band are hidden while a tool is open, so a tool is a page and not a
   panel wedged under one. */
body.tools-mode .hero,
body.tools-mode .companion,
body.tools-mode .marketing-only{display:none !important}
.tools{padding:28px 0 60px}
.tool-head{margin-bottom:20px}
.tool-head .h2{margin:4px 0 8px}
.tool-head h1.h2{max-width:none; line-height:1.15}
.tool-head h1:focus{outline:none}
.tool-head .lede{max-width:64ch; font-size:var(--fs-md)}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px}
.tool-tile{display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow-1); font:inherit;
  transition:transform .18s var(--ease), border-color .18s var(--ease)}
.tool-tile:hover{border-color:var(--accent)}
.tt-title{font-family:var(--font-display); font-size:var(--fs-lg); color:var(--ink)}
.tt-blurb{font-size:var(--fs-sm); line-height:1.55; color:var(--muted)}
.tool-card{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-md);
  padding:20px 22px; box-shadow:var(--shadow-1); margin-bottom:14px}
.tool-card h3{font-family:var(--font-display); font-size:var(--fs-lg); color:var(--ink); margin:0 0 10px}
.tool-card h3:not(:first-child){margin-top:20px}
.tool-card.warn{background:var(--canvas); border-style:dashed}
.tool-card.soft{background:var(--canvas); box-shadow:none}
/* Section headings inside a tool page. Real h2s now that the page title is the
   h1; styled as the old card h3 so the page reads the same. */
.card-h{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lg); color:var(--ink); margin:0 0 10px; line-height:1.3}
.tool-card .card-h:not(:first-child){margin-top:22px}
.card-h.small{font-size:var(--fs-md); margin:18px 0 6px}
.card-h.small:first-child{margin-top:0}
.tt-title .fn{font-family:var(--font-body); font-size:var(--fs-sm); color:var(--muted); font-variant-numeric:tabular-nums; margin-left:4px}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl thead th{font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.tbl thead th.n{text-align:right}
.inline-search{display:flex; gap:8px}
.inline-search .cc-input{flex:1; min-width:0}
.fx-also{margin-top:10px}
.fx-also>summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.tool-note{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin:6px 0; max-width:70ch}
/* What a tool will not do. It used to be a dashed card as long as the tool,
   above or below it, open. It is still all there, one tap away, and the tool
   comes first. */
.limits{margin:0 0 14px; background:var(--canvas); border:1px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius:var(--r-md)}
.limits>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:52px; padding:0 18px; font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.limits>summary::-webkit-details-marker{display:none}
.limits>summary:before{content:"\203a"; font-size:18px; color:var(--accent-ink); transition:transform .18s var(--ease)}
.limits[open]>summary:before{transform:rotate(90deg)}
.limits>summary .limits-n{margin-left:auto; font-size:var(--fs-xs); font-weight:700; color:var(--muted); background:var(--panel-2); border-radius:999px; padding:2px 8px}
.limits-body{padding:0 18px 16px}
.limits-body .tool-note:first-child{margin-top:0}
.tool-form .cc-label{margin-top:14px}
.tool-form .cc-label:first-child{margin-top:0}
/* The base .cc-input rule is element-scoped to textarea and input, so a <select>
   inherited none of it and rendered as a bare native control in the middle of a
   styled form. Same for the file input. */
select.cc-input{width:100%; font-family:inherit; font-size:var(--fs-md); color:var(--ink);
  background-color:var(--canvas); border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius:12px;
  padding:12px 14px; min-height:48px; outline:0; text-overflow:ellipsis}
select.cc-input:focus{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent)}
select.cc-input:focus-visible{outline:none}
.pick-cite{font-size:var(--fs-sm); color:var(--muted); margin:8px 0 0; line-height:1.5}
input[type=file].cc-input{padding:10px 12px; font-size:var(--fs-md); cursor:pointer}
input[type=file].cc-input::file-selector-button{font:inherit; font-size:var(--fs-md); font-weight:600;
  color:var(--primary-fg); background:var(--primary-fill); border:0; border-radius:var(--r-pill);
  padding:8px 14px; margin-right:12px; cursor:pointer}
select.cc-input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:40px}
.reviewflag{display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em;
  color:var(--unverified-ink); background:color-mix(in srgb, var(--unverified) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--unverified) 28%, transparent);
  border-radius:999px; padding:3px 10px; margin-top:8px}

/* ---- shared bits: tables, stats, gaps, claims ---------------------------- */
.statrow{display:flex; flex-wrap:wrap; gap:20px}
.statbox{display:flex; flex-direction:column}
.statbox b{font-family:var(--font-display); font-size:2rem; line-height:1.1; color:var(--accent-2)}
.statbox span{font-size:var(--fs-sm); color:var(--muted)}
.tbl{width:100%; border-collapse:collapse; font-size:var(--fs-sm)}
.tbl th, .tbl td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--hair); vertical-align:top}
.tbl th{font-weight:600; color:var(--ink)}
.tbl td.n{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.tbl-gloss{display:block; font-size:var(--fs-xs); font-weight:400; color:var(--muted); line-height:1.5}
.inline-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px; font-size:var(--fs-sm)}
.gap{border-left:3px solid var(--hair); padding:6px 0 6px 12px; margin-bottom:12px}
.gap-what{font-size:var(--fs-sm); font-weight:600; color:var(--ink)}
.gap-status{font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-ink); margin-left:6px}
.gap-why{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin-top:3px}
.claim{border-left:3px solid var(--verified); padding:8px 0 8px 14px; margin-bottom:16px}
.claim.bad{border-left-color:var(--unverified)}
.claim-text{font-size:var(--fs-md); line-height:1.6; color:var(--ink)}
/* A quotation is set apart typographically because it is the one thing on the
   page that is not ours: it is the statute's own words, reproduced verbatim. */
.claim-quote{font-family:var(--font-display); font-size:var(--fs-sm); line-height:1.65; color:var(--muted);
  background:var(--canvas); border-radius:var(--r-sm); padding:11px 14px; margin:8px 0;
  border:1px solid var(--hair)}
.claim-src{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:var(--fs-sm)}
.claim-src a{color:var(--accent-ink); min-height:var(--tap); display:inline-flex; align-items:center}
/* .cite is inline-flex and does not wrap, which is right for a short judgment
   number inside a paragraph. The citations authored in the guides are long
   ("Proclamation No. 20 of 2025, Government Gazette of Mauritius No. 103 of 23
   December 2025") and pushed the page 220px wider than a 390px phone. Scoped to
   the places that carry an authored citation, so the inline chips in an answer
   keep their unbreakable single-line shape. */
.claim-src .cite, .forumcard .cite{max-width:100%; white-space:normal;
  overflow-wrap:anywhere; text-align:left}
.lb-cite, .br-cite, .cit-code, .drawer-cite{overflow-wrap:anywhere}
.warn-list{color:var(--unverified-ink)}

/* ---- browse -------------------------------------------------------------- */
.fchips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.fchip{font-size:var(--fs-sm); font-weight:500; color:var(--ink); background:var(--canvas);
  border:1px solid var(--hair); border-radius:999px; padding:0 14px; min-height:var(--tap); cursor:pointer; font-family:inherit}
.fchip.on{background:var(--primary-fill); color:var(--primary-fg); border-color:var(--primary-fill)}
.fchip .fn{font-variant-numeric:tabular-nums; opacity:.65; margin-left:4px}
.br-count{font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:10px}
.br-row{display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--hair)}
.br-main{min-width:0}
.br-title{font-size:var(--fs-md); line-height:1.45; color:var(--ink)}
.br-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:var(--fs-xs);
  color:var(--muted); margin:4px 0}
.br-cite{font-weight:700; font-variant-numeric:tabular-nums; color:var(--doc-cite)}
.ocrtag{color:var(--accent-2); font-weight:600}
.br-open{font-size:var(--fs-sm); color:var(--accent-ink); white-space:nowrap; min-height:var(--tap); display:inline-flex; align-items:center}
.br-empty p{margin:0 0 10px}
.br-empty .cc-actions{margin-top:6px}

/* ---- citation checker ---------------------------------------------------- */
.cit-res{margin-top:16px; padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--hair)}
.cit-res.held{background:var(--panel)}
.cit-res.notheld{background:color-mix(in srgb, var(--unverified) 6%, var(--canvas))}
.cit-code{font-size:var(--fs-xl); font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink); margin-bottom:8px}

/* ---- forums -------------------------------------------------------------- */
.forumcard{border:1px solid var(--hair); border-radius:var(--r-md); padding:16px 18px;
  margin-bottom:12px; background:var(--panel)}
.fx-name{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lg); color:var(--ink); margin:0; line-height:1.3}
.fx-hears{font-size:var(--fs-md); line-height:1.6; color:var(--ink); margin:6px 0}
.fx-why{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin-bottom:6px}
.fx-note{margin:6px 0}
.fx-note>summary{cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--accent-ink); min-height:var(--tap); display:flex; align-items:center}
.fx-time{font-size:var(--fs-sm); line-height:1.6; color:var(--ink); margin-top:8px}
.fx-time.muted{color:var(--muted)}

/* Font scope only. The serif under comparison applies to this page's title and
   court names; every other rule on these cards is the shared one, so the same
   cards on the rights guides keep their own typography and their own look. */
.forums-page{--forums-serif:'Spectral', Georgia, serif}
.forums-page[data-forums-font="source-serif-4"]{--forums-serif:'Source Serif 4', Georgia, serif}
.forums-page[data-forums-font="newsreader"]{--forums-serif:'Newsreader', Georgia, serif}
.forums-page[data-forums-font="literata"]{--forums-serif:'Literata', Georgia, serif}
.forums-page #toolTitle, .forums-page .fx-name{font-family:var(--forums-serif); font-optical-sizing:auto}
.fo-preview{font-size:var(--fs-sm); line-height:1.6; color:var(--muted); margin:0 0 16px}
.fo-preview a{display:inline-flex; align-items:center; min-height:var(--tap); color:var(--accent-ink)}

/* ---- letters + document text -------------------------------------------- */
/* Monospace and preserved whitespace: the point of both is that what is on
   screen is exactly what will be on the paper. */
.letter{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-sm);
  line-height:1.7; color:var(--ink); background:var(--canvas); border:1px solid var(--hair);
  border-radius:var(--r-sm); padding:18px 20px; white-space:pre-wrap; word-break:break-word;
  margin:14px 0; overflow-x:auto}

/* ---- help ---------------------------------------------------------------- */
.helpgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px}
.helpcard{border:1px solid var(--hair); border-radius:var(--r-md); padding:15px 16px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.hc-name{font-family:var(--font-display); font-weight:400; font-size:var(--fs-lg); color:var(--ink); margin:0; line-height:1.3}
.helpgrid{margin-bottom:14px}
.helpcard{background:var(--panel); box-shadow:var(--shadow-1)}
.hc-for{font-size:var(--fs-sm); line-height:1.55; color:var(--muted)}
.hc-tags{display:flex; flex-wrap:wrap; gap:6px}
.tbadge.urgent{color:#fff; background:var(--unverified-ink)}

/* ---- deadlines ----------------------------------------------------------- */
.dl-res{margin-top:18px}
.dl-set{border:0; margin:16px 0 0; padding:0}
.dl-set legend{padding:0}
.dl-choices{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.dl-choice{display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1px solid var(--hair); border-radius:var(--r-md); background:var(--canvas); cursor:pointer}
.dl-choice:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.dl-choice input{margin-top:3px; accent-color:var(--accent)}
.dl-choice:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 16%, transparent)}
.dl-ask{font-size:var(--fs-sm); color:var(--muted); margin:0 0 14px}
.dl-sentence{font-size:var(--fs-sm); line-height:1.5; margin:12px 0 0; text-align:center}
.dl-unreviewed{font-size:var(--fs-sm); color:var(--muted); margin:8px 0 0; text-align:center}
.dl-big{text-align:center; padding:20px; background:var(--canvas); border-radius:var(--r-md);
  border:1px solid var(--hair)}
.dl-lbl{font-size:var(--fs-xs); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink)}
.dl-day{font-family:var(--font-display); font-size:2.4rem; line-height:1.15;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.dl-wd{font-size:var(--fs-sm); color:var(--muted)}
.dl-sub{font-size:var(--fs-sm); color:var(--muted); margin-top:10px}
.dl-roll{font-size:var(--fs-sm); line-height:1.6; color:var(--ink); background:var(--accent-soft);
  border-radius:var(--r-sm); padding:10px 13px; margin-top:10px}
.dl-refused{border:1px dashed var(--unverified); border-radius:var(--r-md); padding:16px 18px;
  margin-top:18px; background:color-mix(in srgb, var(--unverified) 5%, transparent)}
.dl-refused-head{font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--unverified-ink); margin-bottom:6px}
.daytable{font-variant-numeric:tabular-nums; font-size:var(--fs-sm)}
/* Weekends and public holidays are shown IN the count, marked, not skipped.
   Every business-day calculator does the opposite and lands late. */
.daytable tr.flagged td{background:var(--accent-soft)}
.daytable tr.notcounted td{color:var(--faint); text-decoration:line-through}

/* ---- print --------------------------------------------------------------- */
/* A citizen walking into a Ministry office or a court with paper is the point.
   Everything that cannot be acted on off-screen is dropped. */
@media print{
  .nav, .ribbon, .footer, .no-print, .drawer, .pdfview, .marketing-only,
  .tool-tile, .fchips, .tool-form, .qchip, .cc-actions, .lb-item,
  .ask, .newq, .ask-gate, .hero-visual{display:none !important}
  body{background:#fff}
  .wrap{max-width:none; padding:0}
  .answer, .tool-card, .forumcard, .helpcard{box-shadow:none; border:1px solid #ccc;
    break-inside:avoid; page-break-inside:avoid}
  .lawbehind{display:block}
  .lawbehind>summary{display:none}
  .banner-currency .cu-toggle{display:none}
  .letter{border:0; background:#fff; padding:0}
  a[href^="http"]:after{content:" (" attr(href) ")"; font-size:var(--fs-xs); color:#666; word-break:break-all}
}

@media(max-width:640px){
  .pdfview{padding:8px}
  .pv-card{padding:14px 12px 16px; max-height:96vh; max-height:96dvh}
  .tools{padding:18px 0 44px}
  .tool-card{padding:16px 15px}
  .lawbehind{padding-left:20px; padding-right:20px}
  .drawer-card{padding:18px 16px 24px}
  .dl-day{font-size:1.9rem}
  .br-row{flex-direction:column; gap:2px}
  /* Nine type filters wrapped to six rows on a phone; one row that scrolls. */
  .fchips{flex-wrap:nowrap; overflow-x:auto; margin-left:-15px; margin-right:-15px; padding:0 15px 4px; scrollbar-width:none}
  .fchips::-webkit-scrollbar{display:none}
  .fchip{flex:none; white-space:nowrap}
  .answer-actions{padding-left:14px; padding-right:14px}
}

/* ---- hover, only where a pointer can hover -------------------------------
   A touch screen fires :hover on tap and leaves it set, so a lift that never
   returns is what a phone user saw on every card they touched. Lifts live
   here; colour hovers stay unscoped because a stuck colour is harmless.
   Measured by the qa/ harness with hasTouch on WebKit and Chromium. */
@media (hover:hover) and (pointer:fine){
  .ask-back .ab-chip:hover{border-color:var(--accent); background:var(--canvas)}
  .ask-back .ab-none:hover{color:var(--ink)}
  .ops-banner-close:hover{background:var(--panel-2); color:var(--ink)}
  .toollink:hover{transform:translateY(-1px)}
  .lift:hover{transform:translateY(-2px)}
  .tool-tile:hover{transform:translateY(-2px)}
}