/* app.css — the firm's look, shared with the booking site (approved 2026-10-24; quieter top 2026-10-25)
   One slim white line on top (firm, menu, initials), Playfair Display titles, Lora text, square corners,
   hairline borders, navy for what to do next, status colours that also differ in lightness.
   Light and dark ride on tokens; components never use hex values. 44px touch targets. */

/* The fonts come from /assets/fonts/fonts.css, linked just before this file in each page's <head>.
   A direct link starts the font downloads a step sooner than an @import here would. */

:root {
  --ground: #F5F6F8;
  --surface: #FFFFFF;
  --surface-2: #F8F9FA;
  --paper-bg: #E9ECF0;
  --line: #E2E5EA;
  --line-soft: #EEF0F3;
  --line-strong: #C9CED6;
  --ink: #1A1F2B;
  --ink-2: #3A4150;
  --muted: #596070;
  --accent: #23304E;
  --accent-ink: #23304E;
  --accent-soft: #E8EBF2;
  --on-accent: #FFFFFF;
  --band: #23304E; --on-band: #FFFFFF; --on-band-2: #DCE1EC;
  /* The band is deep navy in both themes, so the amber count and green tick on it keep one colour. */
  --on-band-alert: #F5B979; --on-band-alert-ink: #3A1E00; --on-band-ok: #7DDBA9;
  --ok: #1F7A4A; --ok-ink: #156038; --ok-soft: #E3F4EA;
  --warn: #C25E00; --warn-ink: #8A3B00; --warn-soft: #FDF0DC;
  --bad: #B42318; --bad-ink: #A11B1B; --bad-soft: #FCE8E8;
  --info-ink: #23304E; --info-soft: #E8EBF2;
  --neutral-soft: #EEF0F3;
  --shadow: 0 1px 2px rgba(20,22,26,.06), 0 4px 14px rgba(20,22,26,.06);
  --shadow-paper: 0 1px 3px rgba(20,22,26,.10), 0 8px 24px rgba(20,22,26,.06);
  --radius: 2px;
  --r-ctl: 2px;
  --font: "Lora", Georgia, "Times New Roman", serif;
  --display: "Playfair Display UI", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  /* The document pages are always white paper, so what sits on them keeps these colours in dark mode too. */
  --paper: #FFFFFF; --paper-ink: #111111; --paper-accent: #2446D8; --paper-ok: #1F7A4A; --sig-ink: #1A2B8F; --on-signer: #FFFFFF;
  /* The focus ring on paper: the dark-mode accent is too pale to see on a white page, so paper keeps firm navy. */
  --paper-focus: #23304E; --paper-muted: #596070;
  /* Shadows beyond the two above: a pressed segment, a dialog and its backdrop, a panel pinned to the bottom edge. */
  --shadow-seg: 0 1px 2px rgba(20,22,26,.12);
  --shadow-dialog: 0 20px 60px rgba(0,0,0,.25); --backdrop: rgba(10,12,16,.45);
  --shadow-up: 0 -6px 20px rgba(20,28,48,.06); --shadow-sheet-up: 0 -8px 24px rgba(20,22,26,.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1115; --surface: #171A20; --surface-2: #1B1F26; --paper-bg: #0B0D10;
    --line: #2A2F38; --line-soft: #232831; --line-strong: #363C47;
    --ink: #ECEEF2; --ink-2: #C3C8D2; --muted: #9AA1AE;
    --accent: #A9B8E0; --accent-ink: #C7D1EE; --accent-soft: #1E2638; --on-accent: #0F1115;
    --band: #1E2840; --on-band: #FFFFFF; --on-band-2: #C9D1E3;
    --ok: #4CC38A; --ok-ink: #7DDBA9; --ok-soft: #12301F;
    --warn: #F0A050; --warn-ink: #F5B979; --warn-soft: #3A2610;
    --bad: #F2786D; --bad-ink: #F59D94; --bad-soft: #3B1716;
    --info-ink: #C7D1EE; --info-soft: #1E2638; --neutral-soft: #232831;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-paper: 0 2px 12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; font-variant-numeric: lining-nums; }
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A file picker is a button-styled label around a hidden input: the ring goes on the label. */
label:has(> input.sr:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On paper (pages, boxes, handwriting choices) the ring stays navy in both themes, and sits inside a
   handwriting choice so it lands on the white, not on the dark dialog around it. */
.sheet :focus-visible { outline-color: var(--paper-focus); }
.font-opts button:focus-visible { outline-color: var(--paper-focus); outline-offset: -5px; }
/* Headings take focus when a step changes; they need no ring. */
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3 { margin: 0; }
h1 { font-family: var(--display); font-size: 36px; font-weight: 400; line-height: 1.15; }
h1.compact { font-size: 26px; }
h2 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- header: one quiet white line — the firm's name, the menu, the person's initials (approved 2026-10-25) ---- */
.top { background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.firm { font-family: var(--display); font-size: 20px; color: var(--ink); text-decoration: none; }
.firm:hover { color: var(--ink); }
.nav { display: flex; gap: 2px 20px; flex: 1 1 auto; flex-wrap: wrap; }
.nav a { padding: 16px 0 14px; color: var(--ink-2); text-decoration: none; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.nav .count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.me { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.me:hover, .me[aria-expanded="true"] { border-color: var(--accent); }
.me-email { padding: 8px 12px 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.practice { background: var(--warn-soft); color: var(--warn-ink); text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }

.page { max-width: 1280px; margin: 0 auto; padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 22px; }
.page.narrow { max-width: 880px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.split > .main { flex: 999 1 560px; min-width: 0; }
.split > .side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--accent-ink); font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.25); color: var(--on-accent); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.btn.quiet:hover { border-color: transparent; }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.icon { width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.icon.danger { color: var(--bad); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn svg { flex: 0 0 auto; }

/* ---- inputs ---- */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.input, select.input, textarea.input { height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; min-width: 0; }
textarea.input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input.small { height: 36px; }
.search { width: 320px; max-width: 100%; gap: 8px; color: var(--muted); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search input { border: 0; outline: none; flex: 1; min-width: 0; font: inherit; background: transparent; color: var(--ink); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }

/* ---- cards ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.card.flush { padding: 0; overflow: hidden; gap: 0; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; }
.st-needs { color: var(--warn-ink); background: var(--warn-soft); } .st-needs .dot { background: var(--warn); }
.st-waiting { color: var(--info-ink); background: var(--info-soft); } .st-waiting .dot { background: var(--accent); }
.st-draft { color: var(--ink-2); background: var(--neutral-soft); } .st-draft .dot { background: var(--muted); }
.st-completed { color: var(--ok-ink); background: var(--ok-soft); } .st-completed .dot { background: var(--ok); }
.st-declined { color: var(--bad-ink); background: var(--bad-soft); } .st-declined .dot { background: var(--bad); }
.st-voided, .st-expired { color: var(--ink-2); background: var(--neutral-soft); } .st-voided .dot, .st-expired .dot { background: var(--ink-2); }

/* contract list: titles and the chain of signer circles */
.title-link { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.title-link:hover { color: var(--accent); }
.chain { display: flex; align-items: center; }
.chain .ln { width: 14px; height: 2px; background: var(--line-strong); }
.chain .ln.done { background: var(--ok); }
.bubble { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 2px solid var(--neutral-soft); background: var(--neutral-soft); color: var(--ink-2); }
.bubble.signed { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.bubble.turn { background: var(--surface); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.bubble.declined { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.bubble.closed { background: var(--surface); border: 2px dashed var(--line-strong); color: var(--ink-2); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }

/* drop zone */
.drop { border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 220px; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.icon-box { width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }

/* document pages */
.sheet { position: relative; width: 100%; max-width: 760px; background: var(--paper); box-shadow: var(--shadow-paper); }
.sheet > img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* Until a page's image arrives, the paper says so (paper colours, so it reads the same in dark mode). */
.sheet.loading::before { content: attr(data-loading); position: absolute; inset: 0; display: grid; place-items: center; color: var(--paper-muted); font-size: 14px; }
.sheet-label { width: 100%; max-width: 760px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }

/* fields on a page */
.fld { position: absolute; border: 2px solid var(--c, var(--paper-accent)); background: color-mix(in srgb, var(--c, var(--paper-accent)) 12%, transparent); border-radius: 4px; color: var(--c, var(--paper-accent));
  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; overflow: hidden; padding: 0 2px; }
/* Text inside a box scales with the box, so it fits on a phone as on a big screen. */
.fld { container-type: size; }
.fld > span { font-size: clamp(9px, 62cqh, 13px); line-height: 1.1; }
.fld input[type="text"] { font-size: clamp(10px, 60cqh, 14px) !important; }
.fld span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fld.edit { cursor: move; touch-action: none; }
.fld.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); }
.fld .grip { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; background: var(--c); cursor: nwse-resize; border-radius: 4px 0 4px 0; }
.fld.done { border-style: solid; background: color-mix(in srgb, var(--c) 6%, transparent); }
.fld.todo { border-style: dashed; cursor: pointer; animation: pulse 2.2s ease-in-out infinite; overflow: visible; z-index: 1; }
/* A box on a phone can be smaller than a fingertip: its tappable area reaches 10px past the edge. */
.fld.todo::after { content: ""; position: absolute; inset: -10px; z-index: -1; }
.fld.filled { border-style: solid; animation: none; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.fld input[type="text"] { width: 100%; height: 100%; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--paper-ink); padding: 0 4px; }
.fld input[type="checkbox"] { width: 70%; height: 70%; margin: 0; accent-color: var(--paper-accent); }
.fld img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
@keyframes pulse { 50% { background: color-mix(in srgb, var(--c) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .fld.todo { animation: none; } }

/* signer badges, evidence and audit lists */
.num-badge { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--on-signer); }
.kv { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }
.audit { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.audit li { display: flex; gap: 12px; }
.audit .dot { width: 10px; height: 10px; margin-top: 6px; }

/* signer editor rows */
.signer-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.signer-row .badge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: var(--on-signer); }
.seg { display: flex; padding: 3px; gap: 3px; background: var(--paper-bg); border-radius: var(--r-ctl); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-seg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* notices */
.note { border-radius: var(--radius); padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.note.info { background: var(--accent-soft); color: var(--ink); }
.note.warn { background: var(--warn-soft); color: var(--warn-ink); }
.note.bad { background: var(--bad-soft); color: var(--bad-ink); }
.note.ok { background: var(--ok-soft); color: var(--ok-ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: var(--radius); font-size: 14px; box-shadow: var(--shadow); z-index: 100; max-width: calc(100% - 32px); }
.toast:has(.toast-act) { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; }
.toast-act { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: var(--r-ctl); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.toast-act:hover, .toast-act:focus-visible { background: var(--surface); color: var(--ink); }
.agent-flash { outline: 3px solid var(--warn) !important; outline-offset: 3px; transition: outline-color 1.2s; }

/* modal */
dialog { border: 0; border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 0; background: var(--surface); color: var(--ink); width: min(520px, calc(100% - 32px)); box-shadow: var(--shadow-dialog); }
dialog::backdrop { background: var(--backdrop); }
dialog .dlg { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
dialog h2 { font-family: var(--display); font-size: 24px; font-weight: 400; }

/* signature pad */
.pad-wrap { display: flex; flex-direction: column; gap: 10px; }
.pad { width: 100%; height: 180px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); touch-action: none; cursor: crosshair; display: block; }
.typed { height: 120px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--sig-ink); display: flex; align-items: center; justify-content: center; font-size: 46px; overflow: hidden; white-space: nowrap; }
.font-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.font-opts button { min-height: 44px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--paper); color: var(--sig-ink); font-size: 22px; cursor: pointer; }
/* The chosen handwriting sits on paper, so its border stays firm navy in dark mode too. */
.font-opts button[aria-pressed="true"] { border: 2px solid var(--paper-focus); }

.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }


@media (max-width: 640px) {
  .page { padding: 20px 16px 48px; }
  .top-in { padding: 0 16px; gap: 0 12px; }
  .firm { font-size: 18px; flex: 1 1 auto; }
  /* Phones: the firm's name and the initials on one line; the menu is one scrolling row under them. */
  .me-wrap { order: 2; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; padding: 10px 0 8px; }
  h1 { font-size: 28px; }
}

/* ---- document pages: one line on top, the page in the middle, everything else folded UNDER it
   at every width, never beside it (approved mockups 2026-10-25) ---- */
.page:has(> .docbar) { max-width: 1120px; }
.docbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.docbar-back { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); border-radius: var(--r-ctl); }
.docbar-back:hover { background: var(--surface); color: var(--ink); }
.docbar-title { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.docbar-title .row { flex-wrap: nowrap; gap: 10px; min-width: 0; }
.docbar-title h1 { font-size: 24px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Before the title arrives it still takes one line, so the page under it doesn't drop when it fills in. */
.docbar-title h1:empty::before { content: "\00a0"; }
/* The status beside the title is plain coloured text with its dot, not a filled pill. */
.docbar-title .pill { flex: 0 0 auto; font-size: 13px; font-weight: 500; background: none; padding: 0; }
.btn.icon-line { width: 44px; padding: 0; color: var(--ink-2); }
.ok-ink { color: var(--ok-ink) !important; }
.docbar-actions { display: flex; align-items: center; gap: 8px; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.menu > button, .menu > a { text-align: left; min-height: 44px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.menu > button:hover, .menu > a:hover, .menu > button:focus-visible, .menu > a:focus-visible { background: var(--surface-2); }
.menu > .danger { color: var(--bad-ink); }
.menu > hr { border: 0; height: 1px; background: var(--line-soft); margin: 4px 0; }
.doc-layout { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.doc-col { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.doc-col .sheet { max-width: 820px; }
/* A one-page viewer's sheet holds a letter shape (or the page's own, set inline) before its image arrives,
   so nothing under it jumps; it still grows if an image turns out taller. */
#sheet { aspect-ratio: 8.5 / 11; }
.pager { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); }
.pager .btn { width: 44px; min-height: 44px; padding: 0; }
.pager span { min-width: 112px; text-align: center; }
.rail { width: 100%; min-width: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; min-height: 56px; padding: 10px 2px; display: flex; align-items: center; gap: 12px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > .fold-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fold-title { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 600; }
.fold-title .count { font-weight: 400; font-size: 13px; color: var(--muted); }
.fold-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-bar { height: 4px; background: var(--neutral-soft); display: flex; }
.fold-bar > span { background: var(--ok); }
.fold .chev { flex: 0 0 auto; color: var(--muted); display: flex; transition: transform 160ms ease; }
.fold[open] .chev { transform: rotate(180deg); }
.fold-body { padding: 0 2px 16px; display: flex; flex-direction: column; gap: 12px; }
/* Wide screens: a fold's title and its one-line summary sit on one line. */
@media (min-width: 641px) {
  .fold > summary > .fold-head { flex-direction: row; align-items: center; gap: 16px; }
  .fold-head > .fold-title { flex: 0 0 240px; }
  .fold-head > .fold-sub { flex: 1 1 auto; min-width: 0; }
  .fold-head > .fold-bar { flex: 0 1 220px; }
}
.signer-line { display: flex; gap: 12px; }
.signer-line .num-badge { width: 26px; height: 26px; font-size: 12px; }
.signer-line .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.signer-line .who-top { display: flex; justify-content: space-between; gap: 8px; }
.signer-line .state { font-size: 12px; font-weight: 600; white-space: nowrap; }
.textbtn { padding: 0; min-height: 32px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
.textbtn.danger { color: var(--bad-ink); }
.hash { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
@media (prefers-reduced-motion: reduce) { .fold .chev { transition: none; } }
@media (max-width: 640px) {
  .docbar { gap: 10px 8px; }
  .docbar-back { margin-left: -10px; align-self: flex-start; }
  .docbar-title { flex: 1 1 0; }
  .docbar-actions { flex: 1 1 100%; }
  .docbar-title .row { flex-wrap: wrap; }
  /* Phones: the status always takes its own line under the title, held open before it arrives. */
  .docbar-title .row > #status { flex-basis: 100%; min-height: 23px; }
  .docbar-title h1 { white-space: normal; font-size: 22px; }
}

/* ---- dashboard: the list is the document (approved mockup 2026-10-25) ---- */
.list-page { max-width: 1080px; gap: 14px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.fchip .n { color: var(--muted); font-weight: 400; }
.fchip[aria-pressed="true"] { background: var(--band); color: var(--on-band); border-color: var(--band); }
.fchip[aria-pressed="true"] .n { color: var(--on-band-2); }
.clist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.crow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.crow-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crow-main .title-link { font-size: 16px; }
.crow-main .chain .bubble { width: 24px; height: 24px; font-size: 10px; }
.crow-main .chain .ln { width: 10px; }
.crow-state { flex: 0 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.crow-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.clist .empty { padding: 40px 0; text-align: center; }
.fchip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--on-band); }

/* ---- new contract: document first (approved mockup 2026-10-25) ---- */
.title-line { display: flex; min-width: 0; }
.title-line input { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px dashed var(--line-strong); background: transparent; font-family: var(--display); font-size: 24px; line-height: 1.25; color: var(--ink); padding: 2px 0; }
.title-line input:focus { outline: none; border-bottom: 1px solid var(--band); }
.title-line input:focus-visible { box-shadow: 0 2px 0 0 var(--band); }
.drop-page { width: 100%; max-width: 820px; height: min(1060px, calc(100vh - 300px)); min-height: 440px; gap: 18px; padding: 40px; }
.drop-page h2 { font-size: 26px; }
.or-line { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; font-size: 13px; color: var(--muted); }
.or-line span { flex: 1; height: 1px; background: var(--line); }
.gdoc-row { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.gdoc-row .input { flex: 1 1 auto; min-width: 0; }
.doc-col > #preview { max-width: 820px; }
.rail-empty { padding: 16px 2px; display: flex; flex-direction: column; gap: 10px; }
.rail-foot { padding: 12px 2px; }
.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.checklist .ok .mark { background: var(--ok-soft); color: var(--ok-ink); }
.checklist .bad .mark { background: var(--warn-soft); color: var(--warn-ink); }
.checklist .bad > span:last-child { color: var(--warn-ink); }
.fold-title .count.warn-ink { color: var(--warn-ink); }
.fields-layout { gap: 20px; }
/* The field tools are one bar above the page: who, then which box. It stays in view while scrolling. */
.vtools { position: sticky; top: 8px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.vtools #signer-pick, .vtools #palette { display: flex; flex-wrap: wrap; gap: 6px; }
.vsep { width: 1px; height: 32px; background: var(--line); margin: 0 4px; }
/* Each signer's colour stays solid so the white initials stay readable; the chosen one wears a ring. */
.vwho { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: var(--c); color: var(--on-signer); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vwho:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); }
.vwho[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.vtool { min-width: 64px; min-height: 40px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.vtool:hover { border-color: var(--ink-2); }
.vtool[aria-pressed="true"] { border: 2px solid var(--c, var(--accent)); color: var(--ink); background: color-mix(in srgb, var(--c, var(--accent)) 10%, var(--surface)); }
.fields-layout #pages { width: 100%; display: flex; justify-content: center; }
.fields-layout #pages .sheet { max-width: 780px; }
@media (max-width: 720px) {
  .vtools { position: static; }
  .drop-page { height: auto; min-height: 360px; padding: 28px 16px; }
}
.sheet.changed { box-shadow: var(--shadow-paper), 0 0 0 2px var(--warn); }

/* Touch screens: every control gets a fingertip-sized (44px) target; mouse screens keep the denser sizes.
   Last in the file on purpose, so it wins over the component rules above. */
@media (pointer: coarse) {
  .btn.small, .chip, .seg button, .vtool, .toast-act, .textbtn { min-height: 44px; }
  .me, .vwho { width: 44px; height: 44px; }
  .input.small { height: 44px; }
  /* 16px text in every typing box: phones zoom the whole page into anything smaller. */
  .input, select.input, textarea.input { font-size: 16px; }
  /* A box on the page can be a few pixels tall on a phone. While someone types in one,
     it grows to a readable 16px line on white, above the page, and shrinks back after. */
  .fld:has(> input[type="text"]:focus) { min-height: 36px; z-index: 3; background: var(--paper); box-shadow: var(--shadow); }
  .fld input[type="text"]:focus { font-size: 16px !important; }
}