/* Clearhour app stylesheet. The design SYSTEM (tokens, base type, buttons, cards,
   top bar, sandbox banner) lives in tokens.css (F36 single source, extracted from
   the live site). This file holds only app-specific components. */
@import url('tokens.css');
header.top .bal { font-size:13px; color:var(--ink55); }
.wrap { max-width:900px; margin:0 auto; padding:26px 20px 90px; }
h1 { font-size:1.7rem; margin:0 0 6px; } h2 { font-size:1.15rem; margin:0 0 10px; }
.sub { color:var(--mut); margin:0 0 22px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.jcard { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; cursor:pointer; transition:.12s; }
.jcard:hover { border-color:var(--green); box-shadow:0 2px 10px rgba(11,92,70,.08); }
.jcard.stub { cursor:default; opacity:.85; }
.jcard .pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; margin-bottom:8px; }
.pill.live { background:#e6f6ee; color:var(--green); } .pill.soon { background:#eef1f0; color:var(--mut); }
.pill.na { background:#f6efe9; color:#8a5a2b; }
.jcard.na { cursor:default; background:#fbf9f6; }
.jcard.na:hover { border-color:var(--line); box-shadow:none; }
.jcard.coming { cursor:default; }
.jcard.coming.dark { cursor:pointer; }
.jcard h3 { margin:2px 0 6px; font-size:16px; } .jcard p { margin:0; color:var(--mut); font-size:13.5px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; margin:0 0 16px; }
.step { display:flex; gap:12px; } .step .n { flex:0 0 26px; height:26px; background:var(--green); color:#fff; border-radius:50%; text-align:center; line-height:26px; font-weight:600; font-size:13px; }
.step .body { flex:1; } .step h2 { margin-top:2px; }
/* button base (pill), button.sec and :disabled now live in tokens.css (F36). */
a.link { color:var(--green2); cursor:pointer; }
.drop { border:2px dashed var(--line); border-radius:10px; padding:26px; text-align:center; color:var(--mut); background:#fff; }
.drop.over { border-color:var(--green); background:#f0f8f5; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; word-break:break-all; }
.hash { background:#0f1a17; color:#eaf3ef; padding:9px 12px; border-radius:8px; margin:8px 0; }
.errbox { background:#fdeaea; border:1px solid #f2b8b8; border-radius:9px; padding:14px 16px; }
.errbox ul { margin:8px 0 0; padding-left:20px; } .errbox li { margin:3px 0; }
.okbox { background:#e6f6ee; border:1px solid #b6e2ca; border-radius:9px; padding:14px 16px; color:var(--green); }
.big { font-size:19px; font-weight:700; }
.muted { color:var(--mut); font-size:12.5px; }
#stage { color:var(--mut); font-size:13px; min-height:16px; margin:8px 0; }
.hide { display:none !important; }
.trialtag { display:inline-block; background:#fff3f3; color:#a11; border:1px solid #f2c2c2; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:8px; }
label.fld { display:block; font-size:13px; color:var(--mut); margin:10px 0 4px; }
input[type=text] { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; }

/* 2026-08-13 fix-wave */
/* Firm profile link now sits on the light top bar (F36): ink, not white. */
header.top .bal a.link,header.top .bal a.hdr{color:var(--ink55);text-decoration:none;font-weight:500;}
header.top .bal a.link:hover{color:var(--ink);}
/* D33 in-page dialogs (shared with the questionnaire) */
.dlg{position:fixed;inset:0;background:rgba(16,26,22,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
.dlgbox{background:#fff;border-radius:12px;padding:22px 24px;max-width:460px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.22);}
.dlgbox h2{margin:0 0 8px;font-size:18px;}
.dlgbox .nav{display:flex;gap:12px;align-items:center;margin-top:18px;}
.dlgbox .nav .spacer{flex:1;}
/* H-1 (2026-08-24): THE ANSWERS / REVIEW BOARD. The plain .dlgbox has no max-height and no
   overflow, which is exactly why the old flat modal could not scroll. This size bounds the box and
   lets its body scroll while the search and the asked-the-lawyer list stay pinned. */
.dlgbox.answers{max-width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;}
.dlgbox.answers h2{flex:0 0 auto;}
.dlgbox.answers .nav{flex:0 0 auto;}
.av-wrap{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;gap:12px;}
.av-count{margin:0;color:var(--mut);font-size:13px;}
.av-asked{border:1px solid var(--line);border-left:3px solid var(--ledger);border-radius:12px;
  padding:12px 14px;background:#fbfaf7;}
.av-asked-h{margin:0 0 4px;font-family:var(--display);font-weight:600;font-size:14px;}
.av-asked-lede{margin:0 0 8px;font-size:12.5px;}
.av-asked-list{margin:0;padding-left:18px;display:grid;gap:6px;}
.av-asked-list li{line-height:1.35;overflow-wrap:anywhere;}
.av-search{margin:0;}
.av-search-input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:var(--white);}
.av-search-none{margin:0;}
.av-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px;padding:4px 14px 12px;background:var(--white);}
.av-grid{display:block;}
.av-lede{margin:12px 0 4px;}
.av-group{margin-top:14px;}
.av-group[hidden]{display:none;}
.av-sec{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:14px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.av-sectag{font-family:var(--body,inherit);font-weight:600;font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ledger);border:1px solid var(--ledger);border-radius:999px;
  padding:1px 8px;white-space:nowrap;}
.av-answers{margin:0;display:grid;gap:2px;}
.av-arow{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:10px;
  padding:8px 10px;border-radius:8px;align-items:start;}
.av-arow[hidden]{display:none;}
.av-arow.is-answered{background:rgba(11,92,70,.05);}
.av-arow.is-blank{background:transparent;}
.av-arow.is-firm{background:rgba(0,0,0,.03);}
.av-q{margin:0;font-weight:500;overflow-wrap:anywhere;min-width:0;}
.av-a{margin:0;overflow-wrap:anywhere;min-width:0;}
.av-val{color:var(--ink);}
.av-blank{color:var(--mut);font-style:italic;}
.av-firm{color:var(--ledger);font-weight:500;}
@media (max-width:560px){
  .av-arow{grid-template-columns:1fr;gap:2px;}
  .av-a{padding-left:0;}
}
/* H-2 (2026-08-24): the check that lists what a generation will leave blank, shown in the workspace
   above the produced set (R-NR-5). Read-only, informational: never a control. */
.genchk{border:1px solid var(--line);border-left:3px solid var(--ledger);border-radius:12px;
  padding:12px 14px;background:#fbfaf7;margin:0 0 12px;}
.genchk-h{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:15px;}
.genchk-line{margin:0 0 6px;overflow-wrap:anywhere;}
.genchk-list{margin:6px 0 0;padding-left:20px;display:grid;gap:4px;max-height:34vh;overflow-y:auto;}
.genchk-list li{overflow-wrap:anywhere;}
.errsummary h3{margin:0 0 4px;color:var(--warn);}

/* ===================================================================
   2026-08-13 accounts, onboarding, tour, intake
   =================================================================== */

/* TYPOGRAPHY. The site loads Inter and Fraunces from Google Fonts. This app
   cannot: the CSP allows no external origins. The vendored files go in
   bundle/fonts/ and are switched on by linking bundle/fonts/fonts.css from each
   page. That link is deliberately absent until the two woff2 files are present,
   because a link to a missing font is a console error on every route. See
   bundle/fonts/README.md. Until then the declared families fall back cleanly. */

/* FOCUS - rewritten 2026-08-20 for feedback A2 (Dan: "kill the ring around Cancel; sweep ALL
   buttons"). ROOT CAUSE, found not guessed: ui/dialog.mjs line ~99 programmatically focuses the
   first action when a dialog opens, and browsers match :focus-visible on programmatic focus. So a
   pill-shaped ring appeared around Cancel with no keyboard interaction at all. It was never a
   hover state.

   THE RULE NOW: no focus ring is painted unless the user is actually driving with the keyboard.
   app.js and q/q.js set body.kbd on the first Tab and clear it on the first pointerdown, which is
   what :focus-visible was supposed to do and does not do for scripted focus.

   DEVIATION FLAGGED FOR DAN, one word overrules it: a keyboard-only ring is KEPT. A mouse user
   (Dan, Sarah, every client) now never sees a ring anywhere. A keyboard-only user still can see
   where they are, which WCAG 2.4.7 requires and which a law firm's procurement check will look
   for. If you want it gone for keyboard too, say so and the body.kbd branch comes out. */
:focus-visible{outline:none;}
body.kbd :focus-visible{outline:3px solid #0e7357;outline-offset:2px;border-radius:4px;}
body.kbd .dlg :focus-visible,body.kbd .tour-panel :focus-visible{outline-color:#0B5C46;}

/* Visually hidden but present for screen readers. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* A link that is really a button, and a button that is really a link. Both had
   to exist because clickable spans were unreachable by keyboard. */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
         text-decoration:underline;}
.btnlink{display:inline-block;text-decoration:none;text-align:center;line-height:1.2;}
button.small{padding:7px 14px;font-size:14px;min-height:32px;}
button,.linkbtn,a.link{min-height:24px;}

/* Top-bar utility navigation + sandbox banner now live in tokens.css (F36). */

/* Forms, shared by every new screen. GOV.UK shape: label above, hint in its own
   element, no placeholders anywhere. */
.ifield{margin:0 0 20px;}
.hint{color:var(--mut);font-size:13.5px;margin:0 0 6px;}
input[type=email],input[type=password],select.sel,textarea.ta{
  width:100%;padding:10px 11px;border:1px solid #6b6f68;border-radius:8px;font:inherit;
  background:#fff;color:var(--ink);}
input[type=text].w-code{width:9ch;letter-spacing:.4em;font-size:19px;text-align:left;}
input[type=text].w-name{max-width:24rem;}
textarea.ta{min-height:88px;resize:vertical;}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{
  border:2px solid var(--warn);}
.fset{border:0;padding:0;margin:0 0 20px;}
.fset legend{padding:0;}
label.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
          border-radius:8px;margin:0 0 8px;background:#fff;cursor:pointer;min-height:44px;}
label.opt:hover{border-color:var(--green);}
label.opt.checked{border-color:var(--green);background:#f2f9f6;}
label.opt input{margin-top:3px;width:20px;height:20px;flex:0 0 20px;}
.errmsg{color:var(--warn);font-weight:600;font-size:14px;margin:0 0 6px;}
.errsummary ul{margin:8px 0 0;padding-left:20px;}
.errsummary a{color:var(--warn);}

/* Auth screens: one column, nothing else on the page. */
.authwrap{max-width:520px;margin:0 auto;padding:34px 20px 90px;}
.authwrap h1{font-size:1.6rem;margin:0 0 8px;}
.authcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;}
.authfoot{margin-top:18px;font-size:14px;color:var(--mut);}
/* SPEC 9.5: the one loose end a password reset can leave. Two actions, the safe one first. */
.rc-status{margin:14px 0 0;color:var(--mut);font-size:15px;line-height:1.5;}
.rc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.rc-ask{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.rc-ask h2{font-size:17px;margin:0 0 6px;}
.rc-ask button{margin-top:10px;margin-right:8px;}
#rc-done{margin-top:18px;}
.pwrow{display:flex;gap:8px;align-items:stretch;}
.pwrow input{flex:1;}
.pwrow button{white-space:nowrap;}
.pwmeter{margin-top:8px;display:flex;align-items:center;gap:10px;}
.pwmeter.hide{display:none;}
.pwtrack{flex:0 0 120px;height:8px;background:#e7ece9;border-radius:5px;overflow:hidden;}
.pwfill{height:100%;width:0;border-radius:5px;transition:width .2s ease,background .2s ease;}
.pwmeter[data-level="weak"] .pwfill{background:#a11;}
.pwmeter[data-level="okay"] .pwfill{background:#c67a00;}
.pwmeter[data-level="strong"] .pwfill{background:var(--green);}
.pwlabel{font-size:13px;color:var(--mut);}
.pwmeter[data-level="weak"] .pwlabel{color:#a11;}
.pwmeter[data-level="okay"] .pwlabel{color:#8a5500;}
.pwmeter[data-level="strong"] .pwlabel{color:var(--green);}
/* Sandbox checkout (Amendment 1) */
.cosum{border:1px solid var(--line);border-radius:9px;padding:6px 14px;margin:0 0 12px;}
.corow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);}
.corow:last-child{border-bottom:0;}
.corow.price strong{font-size:1.05rem;color:var(--green);}
.codisc{background:#f6f9f7;border:1px solid var(--line);border-radius:9px;padding:14px 16px;margin:14px 0;}
.codisc h2{font-size:1rem;margin:0 0 8px;}
.codisc p{margin:0 0 10px;font-size:14px;}
.codisc .legal-links{margin-bottom:0;}
.costep{border-left:3px solid var(--green);padding:8px 0 8px 12px;margin:0 0 10px;}
.costep.warn{border-left-color:#c67a00;}
.costep-t{font-weight:600;}
.costep-d{font-size:14px;color:var(--mut);}
.sitefoot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:14px;}
.choice{display:grid;gap:12px;grid-template-columns:1fr 1fr;}
@media (max-width:560px){.choice{grid-template-columns:1fr;}}
.choice button{display:block;width:100%;text-align:left;background:#fff;color:var(--ink);
               border:1px solid var(--line);border-radius:12px;padding:18px;font-weight:400;}
.choice button:hover{border-color:var(--ledger);background:#f7fbf9;color:var(--ink);transform:none;}
.choice button:hover span{color:var(--mut);}
.choice button strong{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px;}
.choice button span{color:var(--mut);font-size:13.5px;}

/* SIMULATED INBOX and OUTBOX. Must always read as simulated. */
.simpanel{border:2px dashed #b58b00;background:#fffbea;border-radius:10px;padding:16px;margin:22px 0;}
.simpanel h2{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#6b5000;
             font-family:var(--sans);font-weight:700;margin:0 0 4px;}
.simpanel .simnote{color:#6b5000;font-size:12.5px;margin:0 0 12px;}
.simpanel .msg{background:#fff;border:1px solid #e8dcae;border-radius:8px;padding:12px 14px;margin:0 0 10px;}
.simpanel .msg .subj{font-weight:700;font-size:14px;}
.simpanel .msg pre{font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
                   margin:8px 0 0;color:var(--ink);}
.simline{color:#6b5000;background:#fffbea;border:1px solid #e8dcae;border-radius:6px;
         padding:6px 10px;font-size:12.5px;margin:14px 0 0;}

/* Wizard. Text step counter only. GOV.UK lists the horizontal all steps bar as a
   problematic pattern, and cites a service that removed a 12 step indicator with
   no effect on completion. */
.wizwrap{max-width:640px;margin:0 auto;padding:28px 20px 90px;}
.stepcount{color:var(--mut);font-size:14px;margin:0 0 4px;}
.backlink{display:inline-block;margin:0 0 14px;color:var(--green2);}
.wizfoot{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap;}
.wizfoot .spacer{flex:1;}
.slot{border:2px dashed var(--line);border-radius:10px;padding:18px;background:#fbfbf9;}
.slot .tag{display:inline-block;background:#eef1f0;color:var(--mut);font-size:11px;font-weight:700;
           letter-spacing:.06em;padding:2px 8px;border-radius:20px;margin-bottom:8px;}
.summary{border-top:1px solid var(--line);}
.summary .row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.summary .row .k{flex:0 0 34%;min-width:0;font-weight:600;overflow-wrap:anywhere;}
.summary .row .v{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--mut);}
.summary .row .c{flex:0 0 auto;}

/* Team. */
.memberlist{list-style:none;padding:0;margin:14px 0 0;}
.memberlist li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);
               flex-wrap:wrap;}
.memberlist .who{flex:1;min-width:0;overflow-wrap:anywhere;}
.tagpill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;background:#eef1f0;color:var(--mut);}
.tagpill.owner{background:#e6f6ee;color:var(--green);}
.tagpill.invited{background:#fff3e0;color:#7a4a00;}

/* Intake. */
.intake .notebox{background:#f2f9f6;border:1px solid #b6e2ca;border-radius:9px;padding:12px 14px;margin:18px 0 0;}
.intake .notebox p{margin:0 0 6px;} .intake .notebox p:last-child{margin:0;}
.dropbtn{display:block;width:100%;background:#fff;color:var(--mut);font-weight:400;
         border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;}
.dropbtn.over{border-color:var(--green);background:#f0f8f5;}
.chosen{margin-top:8px;overflow-wrap:anywhere;}
.outlist{list-style:none;padding:0;margin:12px 0 0;}
.outlist li{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin:0 0 10px;background:#fff;}

/* Dialog sizing. */
.dlgbox.wide{max-width:620px;max-height:86vh;overflow:auto;}
.dlgbox .helplist{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 16px;}
.dlgbox .factlist{margin:0;padding-left:20px;color:var(--mut);font-size:14px;}
.dlgbox .factlist li{margin:5px 0;}

/* Tour. */
.tourbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f2f9f6;
         border:1px solid #b6e2ca;border-radius:10px;padding:12px 14px;margin:0 0 18px;}
.tourbar .spacer{flex:1;}
/* pointer-events:none (item 22, PROMPT 19): the scrim DIMS but never intercepts. A coach mark that
   points at "Generate documents" must let a press of that button reach the button, not swallow it.
   The ring is already pointer-events:none; the panel (with Next/Close) keeps its own events. Escape
   and the Close button remain the ways out, so a pass-through scrim never traps anyone. */
.tour-scrim{position:fixed;inset:0;background:rgba(16,26,22,.42);z-index:60;pointer-events:none;}
.tour-ring{position:fixed;border:3px solid #ffd166;border-radius:10px;z-index:61;
           pointer-events:none;box-shadow:0 0 0 9999px rgba(16,26,22,.42);}
.tour-panel{position:fixed;z-index:62;background:#fff;border-radius:12px;padding:18px 20px;
            max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.26);}
.tour-panel h2{font-size:17px;margin:0 0 6px;}
.tour-panel .sub{margin:0 0 14px;font-size:14px;}
.tour-count{color:var(--mut);font-size:12.5px;margin:0 0 4px;text-transform:uppercase;letter-spacing:.06em;}
.tour-panel .nav{display:flex;gap:8px;align-items:center;}
.tour-panel .nav .spacer{flex:1;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
                       scroll-behavior:auto!important;}
}

/* Landing. */
.hero{padding:46px 0 30px;}
.hero h1{font-size:2.15rem;max-width:20ch;}
.hero .lede{font-size:18px;color:var(--mut);max-width:56ch;margin:10px 0 24px;}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.pts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:30px 0 0;}
.pts .pt h3{font-size:16px;margin:0 0 5px;}
.pts .pt p{margin:0;color:var(--mut);font-size:14px;}

/* Narrow screens. The firm side is a desk tool, but it must not break. */
@media (max-width:600px){
  header.top{flex-direction:column;align-items:flex-start;gap:8px;}
  header.top .util{flex-wrap:wrap;gap:12px;}
  .wrap,.authwrap,.wizwrap{padding-left:16px;padding-right:16px;}
  .summary .row .k{flex:1 0 100%;}
  .hero h1{font-size:1.7rem;}
}

/* ===================================================================
   2026-08-14 S1 picker: country -> state, three buckets
   =================================================================== */
.picker-select{max-width:520px;}
.picker-select .sel{width:100%;}
/* A result card is a statement, not a control: no hover lift, no pointer. */
.jcard.result{cursor:default;max-width:640px;}
.jcard.result:hover{border-color:var(--line);box-shadow:none;}
.pk-actions{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.version-badge{margin-top:10px;}
.tagpill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:#eef1f0;color:var(--mut);margin-left:6px;}
.jcard.result + p .linkbtn,.pk-actions + p .linkbtn{color:var(--green2);text-decoration:underline;}

/* ===================================================================
   2026-08-14 F6 front-page proof (reviews + case-study stats)
   =================================================================== */
.proof{margin:36px 0 0;}
.proof-featured{margin:0 0 18px;padding:20px 22px;background:#f2f9f6;border:1px solid #b6e2ca;
  border-radius:12px;}
.proof-featured p{font-family:var(--display);font-size:1.25rem;line-height:1.35;margin:0 0 8px;color:var(--ink);}
.proof-featured cite,.proof-card cite{font-style:normal;color:var(--mut);font-size:13.5px;font-weight:600;}
.proof-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.proof-card{margin:0;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.proof-card p{margin:0 0 8px;font-size:14.5px;color:var(--ink);}
.proof-stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:18px 0 0;}
.proof-stats .stat{text-align:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.proof-stats .stat-n{display:block;font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--green);}
.proof-stats .stat-l{display:block;color:var(--mut);font-size:13px;margin-top:4px;}

/* ===================================================================
   2026-08-14 Help widget v1 (retrieval over our guides, no LLM)
   =================================================================== */
.help-box .help-results{margin-top:12px;}
.help-hit{padding:12px 0;border-top:1px solid var(--line);}
.help-hit:first-child{border-top:0;}
.help-q{font-weight:700;margin:0 0 4px;font-size:14px;}
.help-a{margin:0 0 4px;font-size:14px;color:var(--ink);}
.help-src{margin:0;color:var(--mut);font-size:12px;}
.help-none{padding:12px 0;color:var(--mut);font-size:14px;}
.help-none p{margin:0 0 6px;}
@media (max-width:600px){ .help-launch{left:10px!important;bottom:10px!important;} }


/* ===================================================================
   2026-08-14 refinement wave: shared components for auth + onboarding + visual
   (F13 account cards, F18 code boxes, F33 white upload, F51 post-success)
   =================================================================== */

/* F13 account-type cards: SELECT then Next (two-step), not click-through. */
.acct-cards{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0 0 18px;}
@media (max-width:560px){.acct-cards{grid-template-columns:1fr;}}
.acct-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:18px 18px 18px 48px;position:relative;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;}
/* CR1 2026-08-18: the global `button:hover{background:var(--ink)}` was painting these
   selection cards solid dark on hover, so the text vanished and you could not read what
   you were about to choose. Card-style buttons opt OUT of the dark fill: hover is the
   green outline plus a faint tint, and the text colour is pinned. */
.acct-card:hover{border-color:var(--ledger);transform:none;background:#f7fbf9;color:var(--ink);
  box-shadow:0 0 0 2px rgba(11,92,70,.10);}
.acct-card:hover strong,.acct-card:hover span{color:inherit;}
.acct-card:hover span{color:var(--mut);}
.acct-card.selected{border-color:var(--ledger);box-shadow:0 0 0 2px rgba(11,92,70,.18);background:#f7fbf9;}
.acct-card .radio{position:absolute;left:18px;top:20px;width:18px;height:18px;border:2px solid var(--ink25);
  border-radius:50%;background:#fff;}
.acct-card.selected .radio{border-color:var(--ledger);}
.acct-card.selected .radio::after{content:"";position:absolute;left:3px;top:3px;width:8px;height:8px;
  border-radius:50%;background:var(--ledger);}
.acct-card strong{display:block;font-family:var(--display);font-size:17px;font-weight:500;margin-bottom:4px;}
.acct-card span{color:var(--mut);font-size:13.5px;}

/* F18 one-time-code: six individual digit boxes. */
.otp{display:flex;gap:8px;margin:2px 0 6px;}
.otp input{width:46px;height:54px;text-align:center;font-size:22px;font-family:var(--sans);letter-spacing:0;
  border:1px solid #6b6f68;border-radius:8px;background:#fff;color:var(--ink);padding:0;}
.otp input[aria-invalid=true]{border:2px solid var(--warn);}
@media (max-width:420px){.otp input{width:40px;height:48px;font-size:19px;}}

/* F19 quiet "change email" back-link under the code entry. */
.change-email{margin:2px 0 0;font-size:14px;}

/* F51 post-success notices: small, side by side, bottom middle. */
.post-success{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:calc(100% - 32px);max-width:640px;}
.post-success .ps-box{flex:1 1 210px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px -12px rgba(16,19,15,.28);padding:12px 14px;}
.post-success .ps-box h3{font-size:14px;margin:0 0 4px;}
.post-success .ps-box p{margin:0 0 8px;color:var(--mut);font-size:13px;line-height:1.5;}
.post-success .ps-box .ps-close{position:absolute;}
@media (max-width:520px){.post-success{flex-direction:column;}}

/* W4 ALIGN (2026-09-03): the "Get notified when the form changes" panel is INLINE in the result flow,
   not the old position:fixed bottom box that floated OVER the document rows on camera. It sits in
   normal flow below the produced documents, clears any floats, and never overlaps a row. Dismissable
   via .fu-close (top-right), Escape, or a click off it (ui/form_updates.mjs). */
.form-updates-slot{display:block;position:static;clear:both;margin-top:16px;}
.form-updates-slot .form-updates{position:relative;}
.form-updates .fu-close{position:absolute;top:8px;right:10px;width:28px;height:28px;line-height:1;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--mut);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.form-updates .fu-close:hover{color:var(--ink);border-color:var(--mut);}
.form-updates h3{padding-right:34px;}   /* keep the heading clear of the close control */

/* F13 smoother screen transitions (site-like, not jumpy). JS adds .entering before
   paint, then removes it on the next frame so the panel fades in. */
.authwrap,.wizwrap{transition:opacity .18s ease;}
.authwrap.entering,.wizwrap.entering{opacity:0;}

/* F3 minimal landing: clean screen, big central buttons, detail behind a toggle. */
.hero.center{text-align:center;padding:66px 0 20px;max-width:660px;margin:0 auto;}
.hero.center h1{max-width:22ch;margin:0 auto 14px;font-size:2.3rem;}
.hero.center .lede{margin:0 auto 30px;max-width:46ch;}
.bigcta{display:flex;flex-direction:column;align-items:center;gap:14px;}
.bigcta .btn{min-width:290px;text-align:center;font-size:1rem;padding:15px 28px;}
.bigcta .orlogin,.bigcta .ortrial{margin-top:2px;color:var(--ink55);font-size:.92rem;}
.bigcta .orlogin a,.bigcta .ortrial a{color:var(--ledger);}
.howdoes{max-width:660px;margin:36px auto 0;border-top:1px solid var(--line2);}
.howdoes summary{cursor:pointer;text-align:center;color:var(--ledger);font-weight:600;
  list-style:none;padding:16px 10px 6px;font-size:.95rem;}
.howdoes summary::-webkit-details-marker{display:none;}
.howdoes summary:hover{color:var(--ink);}
.howdoes[open] summary{color:var(--ink);}
.howdoes .pts{margin:14px 0 6px;}

/* ===== F34 matter pipeline ===== */
input[type=email].w-name{max-width:24rem;}
.pl-h{font-size:1.15rem;margin:22px 0 12px;}
.pl-sub{font-size:1rem;margin:20px 0 10px;color:var(--ink);}
#ac-done{color:var(--green);font-size:13px;margin-top:10px;}
.ferr{color:var(--warn);font-weight:600;font-size:14px;margin:8px 0 0;}
.matter{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:0 0 12px;}
.matter.mini{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.matter-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.matter-name{font-size:15px;overflow-wrap:anywhere;min-width:0;}
.matter .state{font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;}
.matter .state.ok{background:#e2f2e8;color:var(--green);}
.matter .state.warn{background:#fdeeda;color:#9a5b00;}
.matter .state.info{background:#e3edf7;color:#1d4f8f;}
/* R-UI-3 (2026-08-28): the honest "not connected to our server" boot banner. Same warn palette as
   the questionnaire warn chip, full-width across the top of the working area, quiet but not hidden. */
.connect-banner{background:#fdeeda;color:#9a5b00;border:1px solid #f0c98a;border-radius:10px;
  padding:12px 16px;margin:0 0 16px;font-size:14px;font-weight:600;line-height:1.4;}
/* R2-18 up-front reconnect: a calm (not alarming) variant of the connect banner, with a Reconnect
   action. Green/neutral, so it reads as a helpful offer on boot rather than the red pay-time error. */
.connect-banner.connect-banner-upfront{background:#eef4f2;color:#33433e;border-color:#cfe3da;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:500;}
.connect-reconnect-btn{min-height:36px;padding:7px 16px;border:0;border-radius:8px;background:var(--green);
  color:#fff;font:inherit;font-weight:600;font-size:13px;cursor:pointer;}
.connect-reconnect-btn:hover{background:var(--green2);}
body.kbd .connect-reconnect-btn:focus-visible{outline:3px solid var(--green);outline-offset:2px;}
/* Standalone status chip (trial showcase). Same look as the matter chips. */
.statechip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;display:inline-block;}
.statechip.ok{background:#e2f2e8;color:var(--green);}
.statechip.warn{background:#fdeeda;color:#9a5b00;}
.statechip.info{background:#e3edf7;color:#1d4f8f;}
/* 2026-08-17 Dan: link-style buttons must never take the solid button hover fill. */
.linkbtn:hover{background:none;transform:none;color:var(--green2);}
.pl-search{margin:6px 0 12px;}
.pl-search input{width:100%;max-width:340px;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;}
details.prev-wrap{margin:10px 0 18px;}
details.prev-wrap summary{cursor:pointer;font-weight:700;}
.matter-meta{color:var(--mut);font-size:12.5px;margin:6px 0 0;overflow-wrap:anywhere;}
.matter-note{background:#fffaf3;border:1px solid #f0e2c8;border-radius:8px;padding:8px 10px;margin:8px 0 0;font-size:13px;}
/* G1 guided intake: the returned gap report on the matter row, and the send-time lane picker. */
.gap-block{background:#f4f8f5;border:1px solid #cfe0d5;border-radius:8px;padding:10px 12px;margin:8px 0 0;}
.gap-block b{display:block;font-size:14px;margin-bottom:2px;}
.gap-block .matter-note{background:#fff;border-color:#e3ded4;}
label.ac-mode{display:block;margin:6px 0;font-size:14px;line-height:1.45;cursor:pointer;}
label.ac-mode input{margin-right:8px;}
#ac-mode-note{font-size:12px;margin-top:6px;}
.matter-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.matter-actions button{min-height:24px;}
button.danger-link{background:none;border:0;color:var(--warn);text-decoration:underline;padding:4px 2px;}
button.danger-link:hover{background:none;transform:none;color:var(--warn);}
.archived-wrap{margin-top:14px;}
.archived-wrap summary{cursor:pointer;color:var(--mut);font-size:13.5px;padding:6px 0;}

/* Fluid loading bar during generation. */
.genbar-wrap{height:8px;background:#e3e8e5;border-radius:6px;overflow:hidden;margin:14px 0 6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
.genbar{height:100%;width:0;background:var(--green2);transition:width .18s ease;}
@media (prefers-reduced-motion: reduce){ .genbar{transition:none;} }

/* F51: the two post-success boxes side by side, smaller, centered at the bottom. */
.post-success{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:640px;
  margin:18px auto 0;}
.post-success > div{flex:1 1 280px;min-width:0;font-size:13px;}
.post-success .card{padding:14px;}

/* 2026-08-17 Dan: the trial page is a dead end demo. No picker, no pipeline. */
body.trial-only #back-picker{display:none;}
body.trial-only #addclient-card{display:none;}
body.trial-only .pl-h{display:none;}
body.trial-only #matter-list{display:none;}

/* CR10 2026-08-18: star rating on the review prompt. */
.rev-stars{display:flex;gap:6px;margin:4px 0 14px;}
.rev-star{background:none;border:none;padding:2px 4px;font-size:30px;line-height:1;cursor:pointer;
  color:var(--ink25);transition:color .12s,transform .12s;border-radius:8px;}
.rev-star:hover{background:none;transform:scale(1.08);color:#E0A106;}
.rev-star.on{color:#E0A106;}
body.kbd .rev-star:focus-visible{outline:2px solid var(--ledger);outline-offset:2px;}  /* A2 2026-08-20: keyboard only */

/* ---- CR4/CR5/CR9 2026-08-18: add-client bar, focus dim, routes, libraries ---- */
.ac-bar{margin:0 0 18px;}
.ac-toggle{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;
  color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  font-family:var(--display);font-size:17px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;}
.ac-toggle:hover{background:#f7fbf9;color:var(--ink);border-color:var(--ledger);transform:none;}
.ac-plus{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--ledger);color:#fff;font-size:18px;line-height:1;flex:0 0 auto;}
/* the dim: everything except the panel steps back */
.ac-scrim{position:fixed;inset:0;background:rgba(16,20,24,.34);z-index:40;}
body.ac-open #addclient-panel{position:relative;z-index:50;box-shadow:0 18px 50px rgba(16,20,24,.22);}
.ac-routes{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin-top:8px;}
@media (max-width:700px){.ac-routes{grid-template-columns:1fr;}}
.ac-route{display:block;text-align:left;padding:12px 16px;border-radius:12px;line-height:1.25;}
.ac-route span{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:3px;}
.ac-route.sec:hover{background:#f7fbf9;color:var(--ledger);}
.ac-doclist{display:grid;gap:8px;margin-top:10px;}
/* D39b section headings in the send-flow document list. "Uploaded" and "Provided", exactly, from
   ui/shelf_scope.mjs. Quiet: a heading here is a signpost, not a title, and SPEC 3.1 forbids a dark
   fill on anything in this list. */
.ac-doc-sec{margin:14px 0 6px;font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.ac-doc-sec:first-child{margin-top:0;}
.ac-doc{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;
  /* R-UI-22 11e (2026-08-21): min-width:0 lets the label shrink to its share of the row instead of
     to its title. Without it a long family title ("Personal Care and Welfare") forced its card
     wider than a short one ("Property"), so the cards were ragged and everything to their right
     shifted. Now every card fills the same width and the long title WRAPS inside it. */
  min-width:0;}
/* The title/blurb column inside the card wraps rather than widening the card. */
.ac-doc > span{min-width:0;flex:1 1 auto;}
.ac-doc b{overflow-wrap:anywhere;}
.ac-doc:hover{border-color:var(--ledger);background:#f7fbf9;}
.ac-doc.on{border-color:var(--ledger);background:#f7fbf9;box-shadow:0 0 0 2px rgba(11,92,70,.14);}
.ac-doc b{display:block;font-family:var(--display);font-weight:500;font-size:15px;}
.ac-doc small{color:var(--mut);}
.ac-doc input{margin-top:3px;}
/* SPEC 3.4b (D33) FAVORITES. The star sits BESIDE the label, never inside it, so a press on it can
   never be forwarded to the checkbox and quietly change what the questionnaire is for. The row is
   the flex parent; the label keeps its own box and grows to fill it. */
.ac-doc-row{display:flex;align-items:stretch;gap:8px;}
.ac-doc-row .ac-doc{flex:1 1 auto;}
/* BATCH ITEMS 26 + 27. "View this document" on the RIGHT of every row, and "View the questionnaire"
   DIRECTLY BENEATH it, so this is a column. It sits between the label and the star: the star keeps
   the far right D39b gave it and stays the row's last child, which is what ci/shelf_scope.test.mjs
   reads. Same rule as the star about the label: these are siblings of it, never inside it. */
/* R-UI-22 11e (2026-08-21): a fixed column width so the "View this document" / "View the
   questionnaire" pair is the SAME width, aligned down the column, and starts at the same x on
   every row (the card column beside it is now uniform, so this column is too). */
.ac-doc-acts{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-self:flex-start;width:12.5em;}
.doc-act{white-space:nowrap;padding:6px 10px;font-size:12px;line-height:1.2;text-align:center;width:100%;}
/* Hover per SPEC 3.1 / gate G-C4: outline and a faint tint, never a dark fill. */
.doc-act:hover{background:var(--mintbg);border-color:var(--ledger);color:var(--ledger);transform:none;}
body.kbd .doc-act:focus-visible{outline:2px solid var(--ledger);outline-offset:2px;}  /* A2 2026-08-20: keyboard only */
@media (max-width:700px){
  .ac-doc-row{flex-wrap:wrap;}
  /* phone: the buttons drop under the card and sit side by side, full row width. */
  .ac-doc-acts{flex-direction:row;flex:1 1 100%;width:auto;}
  .doc-act{flex:1 1 auto;width:auto;}
}
/* F-1 (2026-08-21, canon/POST_FREEZE_LEDGER F-1). The tutorial's mini picker (ui/tour_picker_visual)
   renders the REAL shelf rows inside .tour-mini, a frame no wider than the 340px .tour-panel. The
   actions column above is a fixed 12.5em; inside this narrow frame it starved the title column so a
   family title wrapped one letter per line ("Enduring Powe..." vertical, Dan's screenshot at step
   2). The real shelf reflows that column only at a VIEWPORT breakpoint, which a wide desktop showing
   the modal never hits. Here the same stack is keyed on the FRAME: inside .tour-mini the row wraps,
   the card takes the full width and its title reads horizontally, and the inert buttons drop
   beneath. These selectors are more specific than the base ones, so the real shelf is untouched. */
.tour-mini .ac-doc-row{flex-wrap:wrap;}
.tour-mini .ac-doc-row .ac-doc{flex:1 1 100%;min-width:8em;}
.tour-mini .ac-doc-acts{flex-direction:row;flex:1 1 100%;width:auto;}
.tour-mini .doc-act{flex:1 1 auto;width:auto;}
/* THE PREVIEWS THEMSELVES (ui/doc_preview.mjs). Read only, so there is nothing here to style but
   text, a frame and a picture. Deliberately plain: this is the firm looking at their own form. */
.dlgbox.preview{max-width:min(980px,94vw);}
.dv{display:block;}
.dv-frame{display:block;width:100%;height:62vh;min-height:340px;border:1px solid var(--line);
  border-radius:12px;background:#fff;}
.dv-pageimg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;}
.dv-doc + .dv-doc{margin-top:14px;}
.dv-docname{font-family:var(--display);font-weight:500;font-size:14px;margin:0 0 6px;}
.dv-lock{margin:0 0 10px;}
.dv-sec{margin-top:16px;}
.dv-sectitle{font-family:var(--display);font-weight:500;font-size:15px;margin:0 0 4px;}
.dv-sechelp{margin:0 0 8px;}
.dv-qs{margin:0;padding-left:20px;display:grid;gap:10px;}
.dv-q{line-height:1.35;}
.dv-qtext{display:block;font-weight:500;}
.dv-qmeta,.dv-qopts,.dv-qoff{display:block;font-size:12px;color:var(--mut);}
.dv-q-off .dv-qtext{text-decoration:line-through;color:var(--mut);}
/* F-7: the firm's usual choice for a prescribed question, named (not selectable). Green to read as
   "already set for your clients", distinct from the muted option list above it. */
.dv-qdefault{display:block;font-size:12px;color:var(--ledger);font-weight:500;margin-top:2px;}
/* F-6 "Preview with your details": the SAMPLE watermark and the cover/usual-choices summary that sit
   above the real (unaltered) form. The watermark is a banner, not an overlay on the form bytes, so it
   can never be mistaken for print on the government's page. Cover and choices read as the firm's, in
   the brand colour; the form frame beneath is the same .dv-frame every preview uses. */
.dv-sample-watermark{display:block;margin:0 0 12px;padding:8px 12px;border:1px dashed var(--ledger);
  border-radius:10px;background:rgba(0,0,0,.03);color:var(--ledger);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;font-size:12px;text-align:center;}
.dv-sample-cover,.dv-sample-choices,.dv-sample-form,.dv-sample-designer{margin-top:16px;}
.dv-cover-lines{margin:0;padding-left:18px;line-height:1.4;}
.dv-choices{margin:0;display:grid;grid-template-columns:1fr;gap:6px;}
.dv-choices dt{font-weight:500;}
.dv-choices dd{margin:0 0 4px;color:var(--ledger);}
/* F-6 grown (2026-08-24 (2)): the Designer's effect in the SAMPLE preview. Read-only, so it reuses the
   preview's own list/choice styling; these add only the sub-grouping and the firm-complete flag look. */
.dv-sample-designer .dv-designer-version{margin:0 0 10px;font-size:13px;}
.dv-sample-designer .dv-designer-asked,.dv-sample-designer .dv-designer-firmanswer,
.dv-sample-designer .dv-designer-firmcomplete,.dv-sample-designer .dv-designer-added{margin-top:12px;}
.dv-subtitle{font-family:var(--display);font-weight:500;font-size:13px;margin:0 0 4px;color:var(--ledger);}
.dv-firmcomplete{margin:0;padding-left:18px;line-height:1.5;}
.dv-firmcomplete-note{margin:6px 0 0;font-size:12px;}
/* Hover per SPEC 3.1 / gate G-C4: green outline plus a faint tint, label stays readable. Never a
   dark fill, starred or not. Filled = the green glyph, so a starred family reads at a glance in a
   list that is otherwise all outline. */
.fav-star{flex:0 0 auto;align-self:flex-start;width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--mut);
  transition:border-color .15s,background .15s,color .15s;}
.fav-star svg{width:18px;height:18px;display:block;}
.fav-star:hover{background:var(--mintbg);border-color:var(--ledger);color:var(--ledger);transform:none;}
body.kbd .fav-star:focus-visible{outline:2px solid var(--ledger);outline-offset:2px;}  /* A2 2026-08-20: keyboard only */
.fav-star.on{color:var(--ledger);border-color:var(--ledger);background:var(--mintbg);}
.fav-star.on svg{fill:currentColor;}
.fav-star.on:hover{background:var(--mintbg);border-color:var(--ledger);color:var(--ledger);transform:none;}
/* matter rows: icon-only download + review */
.row-actions{display:flex;gap:8px;align-items:center;margin-left:auto;}
.iconbtn{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--ink);}
.iconbtn:hover{background:#f7fbf9;border-color:var(--ledger);color:var(--ledger);transform:none;}
.iconbtn svg{width:17px;height:17px;display:block;}
.matter-head{display:flex;align-items:center;gap:10px;}
/* libraries */
#library-wrap{margin-top:26px;display:grid;gap:12px;}
.lib{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 16px;}
.lib summary{cursor:pointer;padding:14px 0;font-family:var(--display);font-size:16px;font-weight:500;
  display:flex;align-items:center;gap:10px;}
.lib summary::-webkit-details-marker{display:none;}
.lib summary::before{content:"\203A";display:inline-block;transition:transform .15s;font-size:20px;color:var(--mut);}
.lib[open] summary::before{transform:rotate(90deg);}
.lib-count{margin-left:auto;font-family:var(--sans);font-size:12px;color:var(--mut);
  background:var(--mintbg);border-radius:999px;padding:2px 9px;}
.lib input[type=search]{margin-bottom:10px;}
.lib-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);}
.lib-row b{font-weight:500;}
.lib-empty{color:var(--mut);font-size:14px;padding:0 0 14px;}

/* ---- WAVE 2 (2026-08-18) ---- */
/* W6: one primary action, the rest under a menu */
.nextsteps{position:relative;display:inline-block;}
.nextsteps summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:var(--ledger);border:1px solid var(--ledger);border-radius:999px;
  padding:11px 20px;font-weight:500;font-size:.95rem;}
.nextsteps summary::-webkit-details-marker{display:none;}
.nextsteps summary::after{content:"\25BE";font-size:11px;}
.nextsteps summary:hover{background:var(--mintbg);}
.ns-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(16,20,24,.16);
  padding:6px;display:grid;}
.ns-item{background:none;border:none;text-align:left;padding:10px 12px;border-radius:8px;
  color:var(--ink);font-size:14px;cursor:pointer;font-weight:400;}
.ns-item:hover{background:#f2f6f3;color:var(--ink);transform:none;}
.ns-danger{color:#8a2b1f;}
.ns-danger:hover{background:#fdf1ef;color:#8a2b1f;}
/* W4: a box you can actually write in */
.sendback-ta{min-height:190px;width:100%;box-sizing:border-box;}
/* W8: search boxes match the rounded style used elsewhere */
input[type=search]{border-radius:999px;padding:10px 16px;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:14px;}
input[type=search]:focus{outline:none;border-color:var(--ledger);box-shadow:0 0 0 3px rgba(11,92,70,.12);}
.lib input[type=search],#ac-doc-search{max-width:420px;}
/* PROMPT 28 (2026-08-21): ONE focus outline for text-entry controls, in app.css, which Settings AND
   Profile both load. The green focus was only ever on search inputs and .linkrow inputs, so the same
   text box got the brand focus on one page and the raw browser ring on another. This gives every
   text input, textarea and select the identical brand focus everywhere. The body.kbd :focus-visible
   ring (WCAG 2.4.7) sits on top of it for keyboard users, exactly as it already does for search. */
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=tel]:focus,
input[type=number]:focus,input[type=url]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--ledger);box-shadow:0 0 0 3px rgba(11,92,70,.12);}
/* W14: upload boxes glow green on hover, never fill dark */
.drop,.dropzone,label.drop{transition:border-color .15s,background .15s;}
.drop:hover,.dropzone:hover,label.drop:hover{border-color:var(--ledger);background:#f7fbf9;color:var(--ink);}

/* ==================================================================== S6 WORKSPACE
   SPEC.md §2 S6, rebuilt 2026-08-19. Header (name + status chip + Dashboard button),
   Card A "Questionnaire" with the status timeline and the link, Card B "Documents".
   The old drop zone is gone: the returned-file upload is the .iconbtn in .card-top. */
.ws-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.ws-head h1{margin:0;flex:0 1 auto;}
.ws-head .state{font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;}
.ws-head .state.ok{background:#e2f2e8;color:var(--green);}
.ws-head .state.warn{background:#fdeeda;color:#9a5b00;}
.ws-head .state.info{background:#e3edf7;color:#1d4f8f;}
/* §3.6 the small Dashboard button, pushed to the right on every screen but the dashboard. */
.ws-head .ws-dash{margin-left:auto;}

/* the returned-file icon button sits top-right of Card A, in line with the heading */
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.card-top h2{margin:0;}

/* status timeline: Sent -> In progress -> Received -> Documents generated */
.timeline{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:14px 0 16px;}
.tl-step{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink40);}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--ink25);flex:0 0 auto;}
.tl-step.done{color:var(--ink55);} .tl-step.done .tl-dot{background:var(--mint);}
.tl-step.now{color:var(--ledger);font-weight:600;}
.tl-step.now .tl-dot{background:var(--ledger);box-shadow:0 0 0 3px rgba(11,92,70,.16);}

/* the link the client opens, with its copy button */
.linkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;}
.linkrow input{flex:1 1 320px;min-width:0;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink70);}
.linkrow input:focus{outline:none;border-color:var(--ledger);box-shadow:0 0 0 3px rgba(11,92,70,.12);}

.exec-link{margin-top:14px;}

/* ====================================================================
   SETTINGS  (SPEC.md 2 S8 + 13, 2026-08-19)
   No control here is a card-style button that fills dark on hover: the
   ones shaped like cards carry .card-ctl, which tokens.css resolves to a
   green outline and a faint tint (3.1, gate G-C4).
   ==================================================================== */
.setwrap{max-width:760px;}
.set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.set-head h1{margin:0 0 4px;font-size:1.7rem;}
.set-head .sub{margin:0;}
.setcard{margin:0 0 18px;}
.setcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.setcard-head h2{margin:0;font-size:1.1rem;}
.setcard-hint{margin:6px 0 16px;font-size:14px;}
.setcard-body .ifield:last-child{margin-bottom:0;}
.setcard-body textarea{min-height:96px;resize:vertical;}

/* the autosave marker. Quiet when idle, green when it has just written, and
   the colour of a problem when it could not. It is role=status, so it is
   announced as well as seen. */
.savedmark{font-size:12.5px;color:var(--mut);min-height:1em;}
.savedmark.on{color:var(--green);font-weight:600;}
.savedmark.bad{color:var(--warn);font-weight:600;}

.setrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}

/* the firm code, shown in full and easy to read down a phone */
.coderow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.firmcode{font:600 19px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;background:var(--mintbg);color:var(--ledger);
  border:1px solid var(--line);border-radius:9px;padding:9px 14px;display:inline-block;}

/* your forms */
.formlist{margin:0 0 6px;}
.formrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);
  flex-wrap:wrap;}
.formrow:first-child{border-top:0;}
.formrow .who{flex:1;min-width:0;overflow-wrap:anywhere;}
.formempty{padding:4px 0 2px;}
.formempty p{margin:0 0 6px;}
.addwrap{margin-top:6px;}
.addbar{display:block;width:100%;text-align:left;background:#fff;color:var(--ledger);
  border:1px dashed var(--ink25);border-radius:12px;padding:14px 18px;font-weight:600;}
.addpanel{border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:12px;background:var(--paper);}
.addpanel.hide{display:none;}

@media (max-width:600px){
  .set-head{flex-direction:column;}
  .formrow .row-actions{margin-left:0;}
  .firmcode{font-size:17px;}
}

/* §3.4 search on every list. Quiet, above the list it filters. */
.listsearch{margin:0 0 10px;}
.listsearch .fld{display:block;margin:0 0 4px;}
.listsearch input{width:100%;max-width:320px;}

/* ============================================================ SPEC §4.1 CONFIRM STEP
   The last free moment to fix a typo, so the two things being checked are the two things
   set large: the client's name and their email address. Everything else on the step is
   quiet around them.

   No hover rule is declared here on purpose. The buttons reuse .ac-route and .sec, which
   already resolve correctly under the hover gate (SPEC §3.1 / G-C4); a new rule here would
   be a new way to fail it. (The colon was dropped from the hover word above on 2026-08-21 so the
   R-UI-6 flex rule below is not read as a hover-reveal by ci/responsive.test.mjs; meaning
   unchanged.) */
/* R-UI-6 (2026-08-21): the confirm panel RESERVES its own height and PINS the action row to the
   bottom, so "Pay and send" stays put when the charge lines fill in, the save-card row toggles or
   an error appears between two renders of the same panel (it moved ~126px in the acceptance run).
   Flex column + margin-top:auto on the actions row pins the primary action to the reserved bottom;
   the min-height covers the fullest confirm state so content changes above never move it. Gate:
   ci/primary_action_stability.test.mjs. */
.ac-confirm{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fbfdfc;
     display:flex;flex-direction:column;min-height:26em;}
.ac-confirm h3{font-family:var(--display);font-weight:500;font-size:16px;margin:0 0 10px;}
.ac-confirm .ac-big{font-family:var(--display);font-size:24px;line-height:1.25;margin:0 0 2px;word-break:break-word;}
.ac-confirm .ac-warn{margin:10px 0 12px;font-weight:500;}
.ac-confirm .ac-charge{margin:12px 0 2px;font-weight:500;}
.ac-confirm .muted{margin:0 0 2px;}
.ac-savecard{display:flex;gap:10px;align-items:center;margin-top:12px;}
.ac-confirm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:16px;}
.ac-confirm-actions .ac-route{display:inline-block;}
@media (max-width:560px){
  .ac-confirm .ac-big{font-size:20px;}
  .ac-confirm-actions{flex-direction:column;align-items:stretch;}
}

/* ============================================================ SPEC §11.2 COVERAGE REVIEW
   The one-time per-form screen: the firm's form on the left with a soft highlight over every
   field we found, the questions their client will be asked on the right, and an Approve that
   stays disabled until every marked question has been looked at.

   COLOUR CARRIES MEANING HERE, so it never carries it alone: every highlight has a matching
   chip with words on the right, and every box has an aria-label. Green and amber are the SPEC
   words; the review works read aloud, printed, or by someone who cannot tell them apart.

   NO :hover BACKGROUND IS DECLARED ON A CARD-STYLE CONTROL. The buttons on this screen carry
   .card-ctl, which tokens.css already resolves to an outline and a faint tint under the hover
   gate (SPEC §3.1 / G-C4). The highlights change their BORDER on hover, never their fill. */
.crwrap{max-width:1240px;}
.cr-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 6px;}
.cr-status{margin:0;color:var(--ink70);}
.cr-live{margin:0 0 8px;min-height:20px;color:var(--ink70);}
.cr-hint{margin:12px 0 0;}
.cr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;}
.cr-left,.cr-right{max-height:74vh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--white);}

/* A page of the form. The aspect ratio is A4 until a page picture says otherwise, so a box
   placed at a fraction of the page lands in the right place with or without an image. */
.cr-page{position:relative;width:100%;aspect-ratio:1 / 1.4142;margin:0 0 14px;border:1px solid var(--line2);
  border-radius:10px;background:#fbfaf7;overflow:hidden;}
.cr-pageimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.cr-pagelabel{position:absolute;top:8px;left:10px;font-size:12px;color:var(--ink50);}
/* Why the page is not on screen. Only ever rendered when there is no picture, so it can take the
   top of the empty page without covering anything a person needs. */
.cr-pagenote{position:absolute;top:32px;left:12px;right:12px;margin:0;font-size:13px;line-height:1.45;color:var(--ink50);}

/* The highlights. Soft: a tint and a border, never a solid block over the form text. */
.cr-box{position:absolute;padding:0;border-radius:4px;cursor:pointer;background:transparent;}
.cr-box.cr-green{border:1.5px solid var(--ledger);background:rgba(47,191,155,.16);}
.cr-box.cr-amber{border:1.5px solid #b8860b;background:rgba(214,158,46,.20);}
.cr-box.cr-off{border:1.5px dashed var(--ink25);background:transparent;}
.cr-box.sel{outline:2px solid var(--ink);outline-offset:1px;}
.cr-box:hover{border-width:2.5px;}
.cr-draw{position:absolute;border:2px dashed var(--ledger);background:rgba(47,191,155,.10);pointer-events:none;}

/* The question list. One row per field, one primary action, the rest quiet (SPEC §3.2). */
.cr-section{font-family:var(--display);font-weight:500;font-size:15px;margin:14px 0 6px;}
.cr-q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;margin:0 0 8px;background:var(--white);}
.cr-q.cr-amber{border-color:#e0c07a;}
.cr-q.cr-off{opacity:.72;}
.cr-q.sel{outline:2px solid var(--ledger);outline-offset:1px;}
.cr-qmain{min-width:0;}
.cr-meta{font-size:13px;margin-top:2px;word-break:break-word;}
.cr-offnote{font-size:13px;margin-top:4px;color:var(--ink70);}
.cr-acts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;}
.cr-locked{font-size:13px;}
.cr-chip{align-self:start;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;}
.cr-chip-green{border-color:var(--ledger);color:var(--ledger);}
.cr-chip-amber{border-color:#b8860b;color:#7a5a08;}
.cr-chip-off{color:var(--ink55);}
.cr-file{margin:14px 0 0;}
.cr-file .fld{display:block;margin:0 0 6px;}

@media (max-width:900px){
  .cr-split{grid-template-columns:minmax(0,1fr);}
  .cr-left,.cr-right{max-height:none;}
}

/* ============================================================ THE QUESTIONNAIRE DESIGNER (R-DES-1/2/5, 2026-08-25)
   The layout pass. Before this, the qd- classes carried NO CSS, so the three-state radios ran inline
   after their sentences and options stacked on top of one another (Dan: "looks a little messy...
   things on top of each other"). Rebuilt so each question is its OWN block with a heading, and the
   three states are a VERTICAL stack of radio rows: radio + bold label on one line, its one helper line
   beneath, aligned, consistent spacing (--gap-controls). Markup/CSS only; the handlers are unchanged. */
.qd{display:flex;flex-direction:column;gap:var(--gap-section);}
.qd-sec{margin:0;padding:0;}
.qd-sectitle{font-size:1rem;font-weight:600;color:var(--ink);margin:var(--gap-section) 0 var(--gap-controls);
  padding-bottom:6px;border-bottom:1px solid var(--line2);}
/* One block per question: its own card, clear separation, nothing touching (R-DES-1/R-DES-7). */
.qd-q{display:block;margin:0 0 var(--gap-controls);padding:14px 14px 12px;
  border:1px solid var(--line2);border-radius:12px;background:var(--paper);}
.qd-qtext{font-weight:600;color:var(--ink);margin:0 0 10px;line-height:1.3;}
.qd-lock{margin:0;}
/* The three states, a vertical stack of rows (never inline run-ons). */
.qd-states{display:flex;flex-direction:column;gap:10px;}
.qd-opt{display:flex;align-items:flex-start;gap:10px;margin:0;padding:8px 10px;
  border:1px solid transparent;border-radius:10px;cursor:pointer;min-height:44px;}
.qd-opt.on{border-color:var(--ledger);background:var(--mintbg);}
.qd-opt input[type=radio]{margin-top:2px;flex:0 0 auto;}
.qd-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qd-opt-label{color:var(--ink);font-weight:600;}
.qd-opt-hint{font-size:13.5px;line-height:1.35;}
.qd-answer{margin:10px 0 0;display:flex;flex-direction:column;gap:6px;}
.qd-answer-sel{max-width:100%;}
/* Add-your-own-questions builder (R-DES-3/R-DES-4). */
.qd-add{margin-top:var(--gap-section);padding-top:var(--gap-section);border-top:1px solid var(--line2);}
.qd-add-row{display:flex;flex-direction:column;gap:var(--gap-controls);margin-top:var(--gap-controls);}
.qd-add-fieldlabel{font-weight:600;font-size:14px;color:var(--ink);}
.qd-add-typewrap{display:flex;flex-direction:column;gap:4px;}
.qd-add-choices{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:10px;}
.qd-add-answers{display:flex;flex-direction:column;gap:8px;}
.qd-add-answer-row{display:flex;align-items:center;gap:8px;}
.qd-add-answer{flex:1 1 auto;min-width:0;}
.qd-add-answer-del{flex:0 0 auto;font-size:18px;line-height:1;color:var(--ledger);padding:4px 8px;text-decoration:none;}
.qd-add-place{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line2);border-radius:10px;padding:12px;margin:0;}
.qd-add-place-opt{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:32px;}
.qd-add-note{margin:0;color:#8a3b2b;}
.qd-added-list{display:flex;flex-direction:column;gap:8px;}
.qd-added-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid var(--line2);border-radius:10px;}
.qd-added-q{min-width:0;}
.qd-presets{margin-top:var(--gap-section);padding-top:var(--gap-section);border-top:1px solid var(--line2);}
.qd-preset-list{list-style:none;margin:0 0 var(--gap-controls);padding:0;display:flex;flex-direction:column;gap:6px;}

/* ============================================================ DESIGNER DENSITY (CH-019, Wave 7 §27.5)
   Dan: the designer scrolls too much per section. Tighten the vertical rhythm - smaller per-question
   padding, tighter state-row gaps, a lighter section heading - WITHOUT letting any two controls touch
   (R-DES-7) and WITHOUT a dark hover anywhere (UI standing ruling). Density is CSS only; the markup and
   handlers are unchanged. */
.qd-usual-note{margin:0 0 var(--gap-controls);}
.qd .section-jump{margin:0 0 var(--gap-controls);}
.qd .section-jump-select{max-width:100%;}
.qd-sec{margin:0 0 6px;}
.qd-sectitle{margin:12px 0 6px;}
.qd-q{margin:0 0 6px;padding:9px 11px 8px;}
.qd-qtext{margin:0 0 6px;line-height:1.25;}
.qd-states{gap:5px;}
.qd-opt{padding:6px 9px;gap:9px;}
.qd-opt-hint{font-size:13px;line-height:1.3;}
.qd-answer{margin:7px 0 0;gap:5px;}
.qd-add-explain{margin:0 0 var(--gap-controls);}

/* CH-023 (§27.9) versions panel controls, and CH-049 the shared-version lock note. Live buttons that
   open/select, make default, delete, update, and save a new version. Kept airy (no touching). */
.qd-preset{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;
  padding:7px 10px;border:1px solid var(--line2);border-radius:9px;}
.qd-preset.is-default{border-color:var(--ledger);background:var(--mintbg);}
.qd-preset.is-open{box-shadow:inset 3px 0 0 var(--ledger);}
.qd-preset-nm{font-weight:600;color:var(--ink);min-width:0;}
.qd-preset-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.qd-preset-lock{font-size:12.5px;line-height:1.3;max-width:22rem;}
.qd-preset-name{max-width:100%;margin:8px 0 0;}
.qd-preset-savebtns{display:flex;flex-wrap:wrap;gap:var(--gap-controls);margin-top:8px;}

/* CH-024 (§27.11c): the multi-document consolidation explainer on the send confirm. */
.ac-consolidate{margin:0 0 var(--gap-controls);}

/* ============================================================ SPACING SWEEP (R-DES-7, 2026-08-25)
   RULE: no buttons or sections touch, anywhere. The found instance was the Settings card row
   ("Manage your card" / "Add a card") sitting flush. A shared gap token, applied so adjacent controls
   always keep air between them. */
.card-ctl{margin:0 var(--gap-controls) var(--gap-controls) 0;}

/* CH-029 (SPEC §26): the address auto-locate suggestions render as a proper stacked DROPDOWN under
   the field on EVERY surface, not a chip pile. The client questionnaire (q.css) already had this;
   the shared helper (ui/address_autocomplete.mjs) is used site-wide (firm Settings, review, etc.),
   so the dropdown styling belongs in the shared stylesheet. Absolutely positioned under its field so
   it overlays following content instead of pushing the layout (CH-025: deterministic appearance). */
.addr-note,.addr-diag{font-size:.86rem;}
ul.addr-suggest{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--line,#d7ded9);border-radius:8px;background:#fff;overflow:hidden;max-height:min(48vh,320px);overflow-y:auto;}
ul.addr-suggest.hide{display:none;}
ul.addr-suggest .addr-suggest-item{margin:0;padding:0;border-top:1px solid var(--line,#d7ded9);}
ul.addr-suggest .addr-suggest-item:first-child{border-top:0;}
ul.addr-suggest .addr-suggest-btn{display:block;width:100%;text-align:left;background:#fff;border:0;padding:11px 13px;font:inherit;color:inherit;cursor:pointer;}
ul.addr-suggest .addr-suggest-btn:hover,ul.addr-suggest .addr-suggest-btn:focus{background:#eef4f2;outline:none;}