/* 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;}
.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. There was no focus-visible rule anywhere on the firm side, so a keyboard
   user had nothing to follow. One rule, everything. */
:focus-visible{outline:3px solid #0e7357;outline-offset:2px;border-radius:4px;}
.dlg :focus-visible,.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);}
.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(--green);}
.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;}
.tour-scrim{position:fixed;inset:0;background:rgba(16,26,22,.42);z-index:60;}
.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;}
.acct-card:hover{border-color:var(--ledger);transform:none;}
.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;}}

/* 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{margin-top:2px;color:var(--ink55);font-size:.92rem;}
.bigcta .orlogin 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;}
/* 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;}
.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;}