:root{
  /* v3.11: the website's Premium ramp (Brand-Assets/CODESKETCH-PALETTE.md,
     18 Oct 2026; same values as the live site's main.css). Dark app
     screens; PRINT_CSS keeps its own separate, untouched paper tokens.
     Old names kept so every rule below picks the new values up:
     --red = site btn-primary (fills), --red-soft = site accent (links,
     small red text), --line = site accent-dim (decorative rules). */
  --ink:#170E0C;--ink-deep:#0F0908;--surface:#261915;--surface-2:#33231E;--line:#3B2722;
  --rule-strong:#8A6054;--gold-line:rgba(200,162,92,.35);
  --red:#B3271E;--red-hover:#C22F25;--red-deep:#A51921;--red-soft:#F04735;
  --cream:#F3EBE1;--muted:#AB9A90;--gold:#C8A25C;
  --card-lit:linear-gradient(180deg,rgba(243,235,225,.045),rgba(243,235,225,0) 45%);
  --inset-lit:inset 0 1px 0 rgba(243,235,225,.06);
  --shadow-btn-primary:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px -10px rgba(179,39,30,.65);
  --shadow-glow-gold:0 0 0 1px rgba(200,162,92,.35),0 8px 22px rgba(0,0,0,.45);
  --shadow-glow-accent:0 8px 22px rgba(0,0,0,.35);
  /* Status green (v3.3, Lance's answer 16 Sep: green allowed for done/paid).
     v3.11: the site's success token #6FBF8E, 8.62:1 on --ink, 7.72:1 on --surface. */
  --green:#6FBF8E;
  /* One small radius family, used everywhere in this stylesheet. */
  --radius:10px;
  /* Aliases kept for anything still reading the old names. */
  --bg:var(--ink);--panel:var(--surface);
  /* Paper tokens (v3.3): the on-screen quote/invoice card, styled to read
     like the printed PDF (PRINT_CSS's own palette), inside the dark page. */
  --paper:#FAF5EF;--paper-ink:#241511;--paper-muted:#776B60;--paper-line:#E2DCCF;
}
*{box-sizing:border-box}
/* v3.3 fix: several inputs further down set their own display (block,
   flex, grid...), which otherwise silently overrides the browser's own
   [hidden]{display:none} default: toggling .hidden from JS then did
   nothing, so the shared "Label" field stayed visible in "Label each
   file" mode. This makes the hidden attribute always win, whatever an
   element's own display rule says. */
[hidden]{display:none!important}
html{overflow-x:clip;color-scheme:dark}
body{margin:0;overflow-x:clip;background:radial-gradient(ellipse 80% 55% at 18% 0%,rgba(179,39,30,.20),transparent 70%) no-repeat,var(--ink);background-size:100% 520px,auto;color:var(--cream);-webkit-font-smoothing:antialiased;font:16px/1.6 'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;padding:1.4rem 1rem 3rem;max-width:760px;margin-inline:auto}
h1,h2,h3{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:500;letter-spacing:-0.015em;line-height:1.12;margin:.3em 0}
h1,h2{letter-spacing:-0.025em;line-height:1.06}
h1{font-size:clamp(1.5rem,5.5vw,2.1rem)}
h2{font-size:1.05rem}
a{color:var(--cream);text-decoration-color:var(--red-soft);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
small{opacity:.75}
.mono{font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--cream);font-family:'Space Grotesk',sans-serif;font-weight:600;margin-bottom:1.1rem}
.brand{font-size:1.15rem;letter-spacing:-0.01em}
.topbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
/* v3.4 fix: no horizontal scrollbar on any tab row (Windows Chrome shows
   the scrollbar even when overlay scrollbars hide it elsewhere). Tabs wrap
   onto as many rows as needed instead of scrolling sideways. */
.tabs{display:flex;flex-wrap:wrap;gap:.4rem;font:500 .8rem/1 'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:.01em;
  margin:0;padding:0 0 .3rem}
.tabs a{padding:.4rem .55rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--cream);opacity:.8;
  flex:0 0 auto;text-decoration:none}
.tabs a:hover,.tabs a.on{opacity:1;border-color:var(--gold);color:var(--cream)}
.tabs a.on{background:var(--surface-2)}
/* Project sub-tabs (Overview, Checklist, ...): wraps onto more than one
   row on a narrow phone instead of ever widening the page past the
   viewport or scrolling sideways. */
.tab-bar{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 1.1rem;padding:0 0 .6rem;border-bottom:1px solid var(--line)}
.tab-bar a{flex:0 0 auto;padding:.5rem .8rem;border-radius:var(--radius) var(--radius) 0 0;color:var(--cream);opacity:.7;text-decoration:none;font-size:.85rem;font-weight:600;border:1px solid transparent;min-width:44px;min-height:44px;display:flex;align-items:center}
.tab-bar a.active{opacity:1;color:var(--cream);box-shadow:inset 0 2px 0 var(--gold);border-color:var(--line);border-bottom-color:var(--surface);background:var(--surface)}
/* Admin preview role switcher (spec v3.4 #1): three buttons, wrapping,
   each with a one-line muted description underneath instead of a
   parenthetical, and never a horizontal scroller. */
.role-switch{display:flex;flex-wrap:wrap;gap:.7rem}
.role-switch-opt{flex:1 1 160px;min-width:140px}
.role-switch-opt a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--radius);color:var(--cream);opacity:.85;text-decoration:none;font-weight:600}
.role-switch-opt a:hover,.role-switch-opt a.on{opacity:1;border-color:var(--gold);color:var(--cream)}
.role-switch-opt a.on{background:var(--surface-2)}
.role-switch-opt .help{text-align:center;margin-top:.25rem}
.docket{font:500 .75rem/1.3 'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--gold);letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}
.docket::before{content:"";flex:0 0 28px;height:1px;background:var(--gold)}
span.docket{display:inline-flex}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;margin:.9rem 0;background:var(--card-lit),var(--surface);box-shadow:var(--inset-lit);min-width:0}
.card.next{border-color:var(--gold-line)}
.grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.stack>*+*{margin-top:.6rem}
label{display:block;font-size:.85rem;margin:.5rem 0 .25rem;opacity:.9}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],textarea,select{
  display:block;width:100%;padding:.65rem .75rem;border-radius:var(--radius);border:1px solid var(--rule-strong);
  background:var(--ink-deep);color:var(--cream);font:inherit;font-size:16px;line-height:1.4;min-width:0}
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=number]:focus-visible,input[type=password]:focus-visible,input[type=date]:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold-line);outline-offset:1px;border-color:var(--gold)}
::placeholder{color:var(--muted);opacity:.85}
input[type=file]{width:100%;font-size:.95rem;color:var(--muted);min-height:44px}
input[type=file]::file-selector-button{margin:0 .75rem 0 0;padding:.6em 1.2em;border-radius:var(--radius);border:1px solid var(--rule-strong);background:var(--surface);color:var(--cream);
  font:600 .875rem/1.2 'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer;min-height:44px}
input[type=file]::file-selector-button:hover{border-color:var(--gold);background:var(--surface-2)}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:20px;height:20px;margin:0 .5rem 0 0;vertical-align:middle;
  display:inline-grid;place-content:center;border:1.5px solid var(--rule-strong);background:var(--ink-deep);border-radius:5px;cursor:pointer;
  transition:background-color 120ms ease,border-color 120ms ease}
input[type=radio]{border-radius:50%}
input[type=checkbox]::before{content:"";width:10px;height:6px;border:solid var(--cream);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cream);opacity:0}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--red);border-color:var(--red)}
input[type=checkbox]:checked::before,input[type=radio]:checked::before{opacity:1}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--gold)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
textarea{min-height:5rem;resize:vertical}
fieldset{border:0;padding:0;margin:0}
.opt-row{display:flex;align-items:flex-start;gap:.4rem;padding:.3rem 0;flex-wrap:wrap}
.opt-row label{margin:0;flex:1 1 auto;min-width:0}
/* A checkbox (or radio) and its own text, as one clickable row: the input
   never grows past its own size, and the text is a real flex item (not a
   bare text node, whose unwrapped width would otherwise push the input
   onto its own line) so it wraps beside the input at any width. */
.check-row{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer}
.check-row input[type=checkbox],.check-row input[type=radio]{flex:0 0 auto;margin:.15rem 0 0}
.check-row span{flex:1 1 auto;min-width:0}
/* v3.11: the website's button (main.css .btn): Space Grotesk 600, 10px
   radius, lit primary fill, a sheen that sweeps across on hover. */
button,.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;
  margin-top:.5rem;padding:.8em 1.6em;border-radius:var(--radius);border:1px solid var(--red);
  background:var(--red);color:var(--cream);font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:1rem;font-weight:600;line-height:1.2;
  box-shadow:var(--shadow-btn-primary);cursor:pointer;text-decoration:none;
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
button::after,.btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(243,235,225,.22),transparent);transform:skewX(-18deg);transition:left 450ms ease}
@media (hover:hover){button:hover::after,.btn:hover::after{left:125%}}
@media (prefers-reduced-motion:reduce){button::after,.btn::after{display:none}button,.btn{transition:none}}
button:hover,.btn:hover{background:var(--red-hover);border-color:var(--red-hover);color:var(--cream);box-shadow:var(--shadow-glow-gold)}
button:active,.btn:active{filter:brightness(.94)}
button:disabled{opacity:.6;cursor:progress}
button.ghost,.btn.ghost{background:transparent;border-color:var(--rule-strong);color:var(--cream);box-shadow:none}
button.ghost:hover,.btn.ghost:hover{background:var(--surface);border-color:var(--gold);color:var(--cream);box-shadow:var(--shadow-glow-accent)}
button.ghost.on,.btn.ghost.on{border-color:var(--gold);color:var(--cream);background:var(--surface-2)}
/* Brand rule: one solid-red CTA per screen. Everything else that submits
   or opens a picker (Save, Save choice, Yes that's right, Choose files)
   is this filled-but-quiet style instead, never transparent like .ghost
   (which stays for lower-weight actions such as Delete/Revoke). */
button.secondary,.btn.secondary{background:var(--surface);border-color:var(--rule-strong);color:var(--cream);box-shadow:var(--inset-lit)}
button.secondary:hover,.btn.secondary:hover{border-color:var(--gold);background:var(--surface-2);box-shadow:var(--shadow-glow-accent)}
button.secondary:focus-visible,.btn.secondary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.small,.btn.small{padding:.6em 1.2em;font-size:.875rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:99px;font:600 .66rem/1.7 'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--rule-strong);white-space:nowrap}
.paper-card .pill{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-weight:400;letter-spacing:.05em}
code,kbd{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.9em}
.pill.open{color:var(--muted);border-color:transparent;padding-right:0}
.pill.answered{color:var(--green);border-color:var(--green)}
.pill.escaped{color:var(--muted);border-color:var(--muted)}
.pill.lance{color:var(--cream);opacity:.75}
.pill.locked{color:var(--red-soft);border-color:var(--red-soft)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--line);padding-bottom:.4rem;margin:2.2rem 0 .8rem}
.section-head:first-child{margin-top:0}
.section-head h2{margin:0;font-size:1.35rem;letter-spacing:-0.015em}
/* v3.4.3: a month or section heading has to read as a heading, not as another line of text. */
.section-head.period{border-bottom:none;margin:2.4rem 0 .6rem}
.section-head.period h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);background:var(--surface);border-left:3px solid var(--gold);padding:.35rem .6rem;border-radius:0 4px 4px 0}
.on-record{margin:.35rem 0 .6rem;padding:.5rem .65rem;background:var(--surface);border-left:3px solid var(--line);border-radius:0 4px 4px 0}
.on-record-tag{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.15rem}
.item{border-top:1px dashed var(--line);padding:.75rem 0}
/* v3.6: after a save the checklist opens at the next question (#item-<id>).
   A little room above it, and a soft ring so the eye lands on it. */
.item[id]{scroll-margin-top:1rem}
.item:target{outline:2px solid var(--gold);outline-offset:6px;border-radius:var(--radius)}
/* v3.6: the note form's attach box sits a little apart from the textarea. */
.dropzone.note-attach{margin-top:.75rem}
.item:first-child{border-top:0}
.item .label{font-weight:600}
/* A muted, small note under something, wherever it appears: this used to
   be scoped to .item alone, leaving "help" text everywhere else (landing
   cards, the print hint below) with no styling at all. */
.help{font-size:.85rem;opacity:.75;margin-top:.15rem}
.item .help{margin-top:.15rem}
.item .answer{margin-top:.4rem;padding:.5rem .6rem;background:var(--ink-deep);border-radius:var(--radius);font-size:.92rem}
details{margin-top:.5rem}
details>summary{cursor:pointer;color:var(--cream);font-size:.88rem;font-weight:500;list-style:none}
details>summary:hover{text-decoration:underline;text-decoration-color:var(--red-soft);text-decoration-thickness:2px;text-underline-offset:4px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";display:inline-block;width:1.1em;text-decoration:none;color:var(--red-soft)}
details[open]>summary::before{content:"\2212"}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{border-bottom:1px solid var(--line);padding:.5rem .6rem;text-align:left;vertical-align:top;overflow-wrap:break-word}
th{font:500 .72rem/1.3 'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-wrap>table td{min-width:5.5rem}
table.audit td:first-child{white-space:nowrap}
table.audit td:nth-child(4){min-width:16rem;overflow-wrap:anywhere;font-size:.8rem}
/* client statement: on a phone each line becomes a small block, label beside each figure */
@media (max-width:520px){
  table.stack tr:has(th){display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%;min-width:0}
  table.stack tr{padding:.6rem 0;border-bottom:1px solid var(--line)}
  table.stack td{border:0;padding:.15rem 0;display:flex;justify-content:space-between;gap:1rem;text-align:left}
  table.stack td:empty{display:none}
  table.stack td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.85rem}
  table.stack td.num{text-align:right}
}
.tbl-wrap{overflow-x:auto}
/* v3.5 Leads: tables scroll sideways on phones instead of breaking words */
.tbl-wrap.leads td,.tbl-wrap.leads th{white-space:nowrap}
.msg{padding:.7rem .8rem;border-radius:var(--radius);border:1px solid var(--line);margin:.8rem 0}
.msg.err{border-color:var(--red);color:var(--red-soft)}
.msg.ok{border-color:var(--green);color:var(--green)}
.flash-token{font:.9rem/1.4 'JetBrains Mono',ui-monospace,Menlo,monospace;word-break:break-all;padding:.6rem .7rem;background:var(--ink-deep);border:1px solid var(--gold);border-radius:var(--radius)}
.foot{margin-top:2rem;border-top:1px solid var(--line);padding-top:1rem;font-size:.8rem;opacity:.7}
.file-thumb{width:48px;height:48px;object-fit:cover;border-radius:4px}
.file-name{min-width:0;flex:1 1 auto}
.between{justify-content:space-between}
.mt{margin-top:.6rem}
.mt-lg{margin-top:1rem}
.mb{margin-bottom:.6rem}
.lg{font-size:1.05rem}
.inline-form{display:inline-flex;margin:0}
.two-col{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
@media (max-width:420px){.two-col{grid-template-columns:1fr}}

/* Compact status timeline (Change 1): a one-line summary, with the full
   row-by-row list behind a details. Its own bar moved to the checklist
   progress card below (v2.2), so the page never shows two bars. */
.timeline-line{font-weight:600;margin:0 0 .4rem}

/* Checklist progress bar (v2.2, spec 1.5 "Progress is visible"): the only
   <progress> left on the page, filled in --green, chosen for a 3:1+ WCAG
   contrast against its own track (rendered from --surface over --ink). */
progress.progress-done{appearance:none;-webkit-appearance:none;width:100%;height:10px;border:0;border-radius:99px;background:var(--ink-deep);display:block;margin-bottom:.3rem}
progress.progress-done::-webkit-progress-bar{background:var(--ink-deep);border-radius:99px}
progress.progress-done::-webkit-progress-value{background:var(--green);border-radius:99px}
progress.progress-done::-moz-progress-bar{background:var(--green);border-radius:99px}
.progress-pct{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:1.6rem;font-weight:600;color:var(--green);margin:.2rem 0}

/* Done section (Change 2): collapsed by default, opened on demand. */
details.done-section{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.6rem}
details.done-section>summary{font-size:1rem;font-weight:600;color:var(--cream);opacity:.85}
details.done-section>summary::before{content:"+"}
details.done-section[open]>summary::before{content:"\2212"}
.item details>summary{font-size:.82rem}

/* Escape option (Change 3): a plain secondary text action under the main
   button, never a second button of equal weight. */
button.escape-btn{display:inline-block;background:transparent;border:0;color:var(--cream);opacity:.75;box-shadow:none;
  font:inherit;font-size:.875rem;line-height:1.35;font-weight:500;text-align:left;text-decoration:underline;text-decoration-color:var(--red-soft);text-underline-offset:4px;padding:.6rem 0;margin-top:.1rem;cursor:pointer;min-height:44px}
button.escape-btn:hover{opacity:1;color:var(--cream);background:transparent;box-shadow:none}
button.escape-btn::after{display:none}

/* Accessible hidden file input (Change 5): the real input stays focusable
   and keyboard-operable, a styled label carries the visible button, and a
   visible focus ring lands on the label whenever the input has focus. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.file-btn{width:100%;display:flex;align-items:center;justify-content:center;min-height:48px;text-align:center}
input.visually-hidden:focus + .file-btn{outline:3px solid var(--gold);outline-offset:2px}
.file-chosen{word-break:break-word}
/* v3.4.4: the upload control has to say what it is. A client who sees only the
   item name and a quiet grey button does not know a file is wanted, so the
   label becomes a bordered drop zone with an icon, an instruction, and the name
   of whatever was chosen. The native input stays visually hidden and keyboard
   operable, exactly as the button did, so no-JS posting is unaffected. */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:112px;padding:20px 14px;margin:0 0 10px;text-align:center;cursor:pointer;
  border:2px dashed var(--rule-strong);border-radius:var(--radius);background:var(--surface);color:var(--cream)}
.dropzone:hover,.dropzone.is-over{border-color:var(--gold)}
.dropzone.is-over{border-style:solid}
.dz-icon{width:30px;height:30px;opacity:.9}
.dz-main{font-weight:600;line-height:1.3}
.dz-sub{font-size:.9em;opacity:.75;line-height:1.3}
.dz-chosen{font-size:.92em;font-weight:600;word-break:break-word}
input.visually-hidden:focus + .dropzone{outline:3px solid var(--gold);outline-offset:2px}

/* Tap targets (Change 7, de-ai-design/mobile-fit): every control a thumb
   might hit grows to at least 44px on phone widths without bulking up the
   desktop admin console. */
@media (max-width:480px){
  button,.btn{min-height:44px}
  button.small,.btn.small{min-height:44px;padding:.6em 1.1em}
  form>button[type=submit]:not(.ghost):not(.secondary):not(.small):not(.escape-btn){width:100%}
  .tabs a{min-height:44px;display:inline-flex;align-items:center}
  .brand{min-height:44px}
  .item .label>a,.waiting-list a,.foot a{display:inline-block;padding:.6rem 0}
  .opt-row label,.check-row{min-height:44px;display:flex;align-items:center}
  .check-row{align-items:flex-start;padding-top:.6rem}
  .check-row input[type=checkbox],.check-row input[type=radio]{margin-top:0}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .opt-row{min-height:44px;align-items:center}
  details>summary{min-height:44px;display:flex;align-items:center}
}
.doc-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.doc-card .item-body{margin-top:.35rem}

/* v3.3: the client landing screen ("Your project"), up to six cards. A
   card is a plain link styled like .card so it needs no JS; hover/focus
   only ever move a border colour, never a lift or a shadow. The card is a
   flex row (text on the left, the arrow a fixed-size item on the right)
   so the arrow sits beside the text at any length, never over it. */
.cs-cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin:1rem 0}
a.cs-card{display:flex;align-items:flex-start;gap:.75rem;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--card-lit),var(--surface);box-shadow:var(--inset-lit);color:var(--cream);text-decoration:none;min-height:44px}
a.cs-card:hover{border-color:var(--gold-line)}
a.cs-card:focus-visible{border-color:var(--gold-line);outline:2px solid var(--gold);outline-offset:2px}
.cs-card-body{flex:1 1 auto;min-width:0}
a.cs-card .docket{margin-bottom:.3rem}
.cs-card-title{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:500;font-size:1.15rem;margin:0}
.cs-card-arrow{flex:0 0 auto;align-self:center;color:var(--gold);opacity:.8}
.cs-cards>a.cs-card:last-child:nth-child(odd){grid-column:1/-1}
.field-label{font-size:.8rem;color:var(--muted);margin:.7rem 0 .1rem}
.card.next-step{border-color:var(--gold-line);padding:1.2rem 1.25rem 1.3rem;margin:1rem 0 1.1rem}
.next-step-title{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:500;font-size:1.3rem;line-height:1.2;letter-spacing:-0.015em;margin:.55rem 0 .25rem}
.next-step .help{margin:0 0 .5rem}
.next-step .btn{margin-top:.6rem}
@media (max-width:480px){.next-step .btn{width:100%}}
.field-label+p{margin:0}
.total-figure{font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:1.5rem;text-align:right;font-variant-numeric:tabular-nums;margin:.2rem 0 .4rem}
.privacy-card{font-size:.92rem}
a.cs-card:hover .cs-card-arrow,a.cs-card:focus-visible .cs-card-arrow{opacity:1}

/* v3.3: quotes and invoices render on a cream paper card inside the dark
   page, the same paper the printed PDF uses (PRINT_CSS is untouched; this
   only reskins the existing .item/.pill/.help/.doc-card classes while
   they sit inside .paper-card). */
.paper-card{color-scheme:light;background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-radius:var(--radius);padding:1.1rem 1.2rem 1.3rem;margin:1rem 0}
.paper-card h1,.paper-card h2{color:var(--paper-ink)}
.paper-card .label,.paper-card .doc-label{color:var(--paper-muted)}
.paper-card .help{color:var(--paper-muted);opacity:1}
.paper-card .item{border-top:1px dashed var(--paper-line)}
.paper-card .item:first-child{border-top:0}
.paper-card .pill{border-color:var(--paper-line)}
.paper-card .pill.open{color:var(--paper-muted);border-color:var(--paper-line)}
.paper-card .pill.answered{color:#1B6B3C;border-color:#1B6B3C}
.paper-card .pill.locked{color:var(--red-deep);border-color:var(--red-deep)}
.paper-card a{color:var(--red-deep)}
.paper-card .doc-card{border-color:var(--paper-line)}
.paper-card .doc-card.accent{border-left:3px solid var(--red)}
/* v3.3 fix: bankCard()'s own inner classes (.bank/.brow/.bv/.pay-note/
   .fine) were only ever defined in PRINT_CSS, so on screen (SHELL_CSS,
   which never loads PRINT_CSS) a bank row had no layout at all and its
   label and value ran together. A two-column grid keeps the label on the
   left and the value on the right, stacking below 360px, where a bank
   account number is too wide to sit beside its own label. */
.paper-card .bank{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.5rem}
.paper-card .bank>div{flex:1 1 200px;min-width:0}
.paper-card .brow{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:baseline;padding:.22rem 0;border-bottom:1px dashed var(--paper-line)}
.paper-card .brow:last-child{border-bottom:0}
.paper-card .brow .label{color:var(--paper-muted);margin:0}
.paper-card .brow .bv{font-weight:600;font-size:.85rem;word-break:break-word;text-align:right}
.paper-card .pay-note{font-size:.9rem;margin-top:.4rem}
.paper-card .fine{font-size:.78rem;color:var(--paper-muted);margin-top:.6rem}
@media (max-width:360px){
  .paper-card .brow{grid-template-columns:1fr}
  .paper-card .brow .bv{text-align:left}
}
/* The bank card also carries .card (the on-screen-frame fix, spec section
   3), which elsewhere means the dark app surface. Nested in .paper-card
   that would read as a dark box on the paper, so it gets its own light
   tint here instead, never the dark --surface. */
.paper-card .card{background:#F1EADD;border-color:var(--paper-line);color:var(--paper-ink)}
.paper-card .thanks{color:var(--paper-ink)}
.paper-card .section-head{border-bottom-color:var(--paper-line)}

/* v3.3 addendum 1: a visual bar under each queued upload's status text,
   filled in solid --red (never a gradient). */
.upload-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:.35rem}
.upload-bar>span{display:block;height:100%;width:0%;background:var(--red)}

/* v3.3 fix: the "same label / label each" choice as a two-option
   segmented control. Built on real radios (Change 5's pattern: the input
   stays focusable and keyboard-operable, visually hidden, its sibling
   label carries the look), so it keeps working with no JS at all, just
   without the file list either radio would otherwise drive. */
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--radius);overflow:hidden;margin:.5rem 0}
.seg-opt{margin:0;padding:.55rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer;background:var(--surface);color:var(--cream);opacity:.8;min-height:44px;display:flex;align-items:center}
.seg-opt:not(:first-of-type){border-left:1px solid var(--line)}
.seg-radio:checked+.seg-opt{background:var(--surface-2);color:var(--cream);box-shadow:inset 0 -2px 0 var(--gold);opacity:1}
.seg-radio:focus-visible+.seg-opt{outline:2px solid var(--gold);outline-offset:-2px}

/* v3.3 fix: one list serves both "files you just chose" and "files
   uploading now", so the client watches the same rows the whole way
   through instead of a second list appearing after the first vanishes.
   The name is a real flex item with its own min-width:0 (the same fix as
   .check-row) so a long file name ellipsizes instead of pushing the size
   or wrapping onto its own line; the label input, when shown, is a
   second, full-width line under the name row rather than squeezed
   beside it. */
.upload-list{margin:.6rem 0}
.upload-row{border-top:1px dashed var(--line);padding:.6rem 0}
.upload-row:first-child{border-top:0}
.upload-row-head{display:flex;align-items:center;gap:.5rem}
.upload-row-head .check-row{flex:1 1 auto;min-width:0}
.upload-row-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row-size{flex:0 0 auto;color:var(--muted)}
.upload-row .row-label{margin-top:.4rem}
.upload-row-progress{margin-top:.4rem}
.upload-row-progress .help{margin:0}

/* v3.3 fix: a sticky mini-bar for labelling several ticked files at once
   in "Label each file" mode, only ever shown once 2+ rows are ticked. */
.bulk-bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem .7rem;margin-top:.6rem}
.bulk-bar input[type=text]{flex:1 1 160px;width:auto;margin:0}
.bulk-bar .help{flex:0 0 auto;margin:0}