/* ═══════════════════════════════════════════════════════════════════════════
   Aqua Suite — inblock palette: orange #E55B1F, white, black.
   Layout language follows Zoho Invoice: black rail, warm off-white ground,
   white cards with a hairline and a tinted header strip, generous air.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --brand:#E55B1F;
  --brand-deep:#C2470F;
  --brand-soft:#FFF3EC;
  --brand-line:#F6CDB6;

  /* Neutrals — warm, biased toward the accent rather than a flat grey */
  --ground:#F6F5F3;
  --surface:#FFFFFF;
  --surface-2:#FAF9F7;
  --surface-3:#F0EEEA;
  --ink:#141414;
  --ink-2:#4A4744;
  --ink-3:#8A857E;
  --line:#E7E3DE;
  --line-strong:#D2CCC4;

  /* Rail — black is a brand colour, so the rail is black, not navy */
  --rail:#141414;
  --rail-2:#232323;
  --rail-ink:#A8A29A;
  --rail-ink-hi:#FFFFFF;
  --rail-line:#2C2C2C;

  /* Semantic — kept clear of the accent so "overdue" never reads as "brand" */
  --ok:#2E7D4F;      --ok-soft:#E6F2EA;
  --warn:#E55B1F;    --warn-soft:#FFF3EC;
  --crit:#B3261E;    --crit-soft:#FBE9E7;
  /* A third semantic colour, for the comment zone. Slate rather than a fourth
     hue: the README keeps red for overdue, green for settled and orange for
     the brand, and a comment is none of those. */
  --note:#41566B;    --note-soft:#EAEFF4;

  --on-brand:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(20,20,20,.05);
  --shadow:0 1px 3px rgba(20,20,20,.06), 0 8px 24px -16px rgba(20,20,20,.22);
  --r:6px;
  --r-lg:10px;

  --ui:'IBM Plex Sans',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --doc:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* Light is the default and the brand. Dark is chosen per person on the profile
   page, and `base.html` stamps data-theme="dark" on the page when they have.
   It is deliberately not wired to prefers-color-scheme: a reviewer on a dark
   desktop still sees the brand unless they ask otherwise. */
:root[data-theme="dark"]{
  --ground:#121110; --surface:#1A1917; --surface-2:#211F1D; --surface-3:#2A2724;
  --ink:#F4F1EE; --ink-2:#B5AFA8; --ink-3:#847E76;
  --line:#2E2B27; --line-strong:#403C37;
  --brand:#FF7A3D; --brand-deep:#E55B1F; --brand-soft:#2E1A10; --brand-line:#54301C;
  --rail:#0C0C0B; --rail-2:#1A1918; --rail-line:#262523;
  --ok:#5FB484; --ok-soft:#14261C;
  --warn:#FF7A3D; --warn-soft:#2E1A10;
  --crit:#E1685C; --crit-soft:#301715;
  --note:#9DB4C8; --note-soft:#18222B;
  --on-brand:#1A0E07;
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
/* The rail and the top bar run to the edges of the window, so the page cannot
   carry the browser's default 8px body margin — it shows up as a pale gutter
   down the left of the black rail and makes every screen scroll by 16px. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:14px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.012em}
p{margin:0}
a{color:var(--brand-deep);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-size:.79rem;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* Pages are full-bleed. No card-inside-a-card. */
.stage{display:block}
.frame{display:block;background:var(--ground)}

/* ── app shell ───────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.side{background:var(--rail);padding:14px 0 18px;display:flex;flex-direction:column;gap:1px}
.side .mark{display:flex;align-items:center;gap:9px;padding:2px 16px 14px}
.side .mark .glyph{width:26px;height:26px;border-radius:7px;background:var(--brand);display:grid;
  place-items:center;color:var(--on-brand);font-weight:700;font-size:13px;flex:none}
.side .mark b{color:var(--rail-ink-hi);font-size:14.5px;letter-spacing:-.02em;font-weight:600}

/* The "Getting Started" card from the reference — a raised block, not a nav row. */
.side .started{margin:0 12px 12px;padding:10px 12px;border-radius:8px;background:var(--rail-2);
  border:1px solid var(--rail-line);display:flex;align-items:center;gap:9px}
.side .started b{color:var(--rail-ink-hi);font-size:12.5px;font-weight:600}
.side .started .chev{margin-left:auto;color:var(--rail-ink);font-size:13px}
.side .started .bar{height:3px;border-radius:2px;background:var(--rail-line);margin-top:7px;overflow:hidden}
/* Width is set inline from the setup list — see Deck::setup_pct. */
.side .started .bar i{display:block;height:100%;background:var(--brand)}
a.started{text-decoration:none}
a.started:hover{border-color:var(--brand)}
/* The same bar, at page width, on the setup screen itself. */
.bar.wide{height:4px;border-radius:0;background:var(--surface-3);overflow:hidden}
.bar.wide i{display:block;height:100%;background:var(--brand)}

.side .grp{padding:15px 20px 6px;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#6A645C;font-weight:600}
.nav{display:flex;align-items:center;gap:11px;margin:0 10px;padding:7px 10px;font-size:13.5px;
  color:var(--rail-ink);border-radius:7px}
.nav:hover{color:var(--rail-ink-hi);background:var(--rail-2)}
.nav.on{background:var(--brand);color:var(--on-brand);font-weight:600}
.nav.on:hover{background:var(--brand)}
.nav .ic{width:15px;flex:none;opacity:.9;font-size:13px}
.nav .tag{margin-left:auto;font-size:10px;font-weight:600;padding:0 6px;border-radius:99px;
  background:var(--rail-2);color:var(--rail-ink)}
.nav.on .tag{background:rgba(255,255,255,.22);color:var(--on-brand)}
a.nav{text-decoration:none}
a.nav.dead,span.nav.dead{cursor:default;opacity:.5}
a.nav.dead:hover{background:none;color:var(--rail-ink)}
.side .foot{margin-top:auto;padding:14px 20px 0;margin-top:auto;border-top:1px solid var(--rail-line);
  font-size:11.5px;color:#6A645C}

.main{display:flex;flex-direction:column;min-width:0;background:var(--ground)}
.top{display:flex;align-items:center;gap:14px;padding:0 22px;height:52px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.top .srch{flex:1;max-width:360px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--r);padding:6px 11px;color:var(--ink-3);font-size:13px}
.top .who{margin-left:auto;position:relative;display:flex;align-items:center;gap:10px;font-size:13px;
  color:var(--ink-2)}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);
  display:grid;place-items:center;font-weight:600;font-size:11.5px;border:1px solid var(--brand-line)}
button.avatar{padding:0}
button.avatar:hover,button.avatar[aria-expanded="true"]{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.avatar.lg{width:36px;height:36px;font-size:13.5px}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.xl{width:72px;height:72px;font-size:24px}

/* ── account menu ────────────────────────────────────────────────────────── */
/* The organisation used to be spelt out beside the avatar on every screen. It
   is the same string on all sixteen, so it was costing a permanent slice of the
   bar to say something that never changes. It moves in here, where it sits with
   the person it belongs to and is read when someone goes looking. */
.who-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:70;min-width:252px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.who-menu .head{display:flex;align-items:center;gap:11px;padding:9px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.who-menu .head b{display:block;font-size:13px;color:var(--ink);font-weight:600}
/* `> div span`, not `span`: the avatar in this row is a span too, and the
   broader rule out-ranked `.avatar` — display:block pushed the initials off
   centre and ink-3 greyed them out. */
.who-menu .head > div span{display:block;font-size:11.5px;color:var(--ink-3)}
.who-menu .org{padding:2px 10px 9px;font-size:11.5px;color:var(--ink-3)}
.who-menu .org b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.who-menu a,.who-menu .row{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13px;
  border-radius:var(--r);color:var(--ink-2);text-decoration:none}
.who-menu a:hover{background:var(--surface-2);color:var(--ink)}
.who-menu .ic{width:15px;flex:none;font-size:13px;opacity:.85;text-align:center}
.who-menu .row.dead{opacity:.5;cursor:default}
.who-menu .sep{height:1px;background:var(--line);margin:6px 2px}
.who-menu a.out{color:var(--crit)}
.who-menu a.out:hover{background:var(--crit-soft);color:var(--crit)}

.pane{padding:22px;display:flex;flex-direction:column;gap:18px;min-width:0;flex:1}
.pane-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pane-head h2{font-size:20px}
.pane-head .sub{font-size:13px;color:var(--ink-3);margin-top:3px}
.pane-head .acts{margin-left:auto;display:flex;gap:8px}

/* Greeting banner, as in the dashboard reference. */
.greet{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 22px 0}
.greet .who-line{display:flex;align-items:center;gap:12px}
.greet .badge{width:38px;height:38px;border-radius:9px;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:grid;place-items:center;font-size:17px;flex:none}
.greet h2{font-size:18px}
.greet .org{font-size:12.5px;color:var(--ink-3)}
.tabs{display:flex;gap:22px;margin-top:14px}
.tabs a{padding:0 0 9px;font-size:13.5px;color:var(--ink-3);border-bottom:2px solid transparent}
.tabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}

/* ── controls ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:7px 14px;
  border-radius:var(--r);border:1px solid var(--line-strong);color:var(--ink);background:var(--surface)}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.btn.pri:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn.ghost{border-color:transparent;color:var(--ink-2);background:none}
.btn.ghost:hover{background:var(--surface-3);border-color:transparent}
.btn.wide{width:100%;justify-content:center;padding:10px}
/* The one action with nothing behind it to restore from. It is red because
   it is not the same kind of thing as the button beside it, and it sits
   behind a disclosure so it is never on the way to something else. */
.btn.danger{border-color:var(--crit);color:var(--crit);background:var(--crit-soft)}
.btn.danger:hover{background:var(--crit);color:#fff;border-color:var(--crit)}
details.panel > summary.ph{cursor:pointer;list-style:none;user-select:none}
details.panel > summary.ph::-webkit-details-marker{display:none}
details.panel > summary.ph::after{content:"\25BE";margin-left:auto;color:var(--ink-3);font-size:11px}
details.panel[open] > summary.ph::after{content:"\25B4"}
details.panel > summary.ph .r{margin-left:0}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:0}
.field label .req{color:var(--crit)}
.inp{border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 11px;background:var(--surface);
  color:var(--ink);font-size:13.5px;min-height:38px;display:flex;align-items:center;width:100%}
.inp.ph{color:var(--ink-3)}
/* A field nobody may change has to look like one. The rule above sets both the
   background and the colour, so the browser's own greying of a disabled input
   never lands: without this, a member reading company details they cannot edit
   sees a live-looking form that silently swallows every keystroke. */
.inp:disabled{background:var(--surface-2);color:var(--ink-2);cursor:not-allowed}
/* The signing ceremony has no screen of its own: it runs over whatever page
   the action came from, and this line at the foot is all it draws. */
.record-notice{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));
  padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.record-notice span{flex:1;min-width:0}
.record-notice.crit{border-color:var(--crit,#B3261E)}
.record-notice .btn{flex:0 0 auto;white-space:nowrap}
/* Dropdowns are real <select>s. They used to be a div with a chevron drawn by a
   pseudo-element: it looked right, and it was the first thing anyone clicked in
   a dialog and the first thing that did nothing. The arrow is drawn here rather
   than left native so the control matches the other fields in both themes. */
select.inp{display:block;width:100%;height:38px;cursor:pointer;appearance:none;
  -webkit-appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% - 1px),calc(100% - 11px) calc(50% - 1px);
  background-size:5px 5px;background-repeat:no-repeat}
select.inp:hover{border-color:var(--ink-3)}
div.inp.sel::after,button.inp.sel::after{content:"⌄";margin-left:auto;color:var(--ink-3);
  font-size:13px;line-height:0;position:relative;top:-3px}
input.inp{font-family:inherit}
input.inp::placeholder{color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}

/* ── badges ──────────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;
  border-radius:99px;white-space:nowrap;line-height:1.5}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--brand-deep)}
.chip.crit{background:var(--crit-soft);color:var(--crit)}
.chip.neu{background:var(--surface-3);color:var(--ink-2)}
.chip.acc{background:var(--brand-soft);color:var(--brand-deep)}
.chip .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.lvl{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  border:1px solid currentColor;border-radius:3px;padding:1px 5px}
.lvl.ses{color:var(--ink-3)} .lvl.ades{color:var(--brand-deep)} .lvl.qes{color:var(--ok)}

/* ── panels & tables ─────────────────────────────────────────────────────── */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-sm);overflow:hidden}
.panel > .ph{padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}
.panel > .ph .r{margin-left:auto;font-weight:400;color:var(--ink-3);font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px}
.panel .pb{padding:16px;display:flex;flex-direction:column;gap:14px}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
  font-weight:600;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);
  white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
/* A list row that opens its record: the whole row is the target (wf.js). */
tr[data-href]{cursor:pointer}
td.r,th.r{text-align:right}
.who-cell{display:flex;align-items:center;gap:10px}
.who-cell .avatar{width:24px;height:24px;font-size:10px}
.panel .tbl-wrap{border:0;border-radius:0;box-shadow:none}
/* A panel sets the width; a table inside it must not force its own floor, or a
   half-width card scrolls its last column out of sight. */
.panel table{min-width:0}

/* ── dashboard: receivables ageing band ──────────────────────────────────── */
.aging-bar{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--surface-3)}
.aging-bar i{display:block;height:100%}
.aging-bar i.cur{background:var(--ok)}
.aging-bar i.late{background:var(--brand)}
.aging{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.aging .bucket{padding:14px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.aging .bucket:first-child{border-left:0}
.aging .bucket .k{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  color:var(--ink-3)}
.aging .bucket.is-current .k{color:var(--ok)}
.aging .bucket.is-late .k{color:var(--brand-deep)}
.aging .bucket .v{font-size:18px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.aging .bucket.zero .v{color:var(--ink-3);font-weight:500}
.aging .bucket .r{font-size:11px;color:var(--ink-3)}
@media(max-width:860px){.aging{grid-template-columns:repeat(2,1fr)}
  .aging .bucket{border-left:0;border-top:1px solid var(--line)}}

/* ── dashboard: chart ────────────────────────────────────────────────────── */
.chart-row{display:grid;grid-template-columns:1fr 190px;gap:0}
@media(max-width:860px){.chart-row{grid-template-columns:1fr}}
.chart-plot{padding:14px 6px 6px 6px;min-width:0;overflow-x:auto}
/* A guard for very wide windows: past this the drawing would keep growing with
   the card. It letterboxes by a few pixels rather than scaling on forever. */
.chart-plot svg{display:block;width:100%;height:auto;min-width:520px;max-height:340px}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-axis{fill:var(--ink-3);font-family:var(--ui);font-size:10px}
.chart-axis-x{fill:var(--ink-2);font-family:var(--ui);font-size:10px;text-anchor:middle}
.chart-axis-x tspan{fill:var(--ink-3);font-size:8.5px}
.chart-area{fill:var(--brand);opacity:.10}
.chart-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-line-2{fill:none;stroke:var(--ok);stroke-width:1.75;stroke-dasharray:4 3;stroke-linejoin:round}
.chart-end{fill:var(--brand);stroke:var(--surface);stroke-width:2}
.chart-legend{border-left:1px solid var(--line);padding:18px 16px;display:flex;flex-direction:column;gap:16px}
@media(max-width:860px){.chart-legend{border-left:0;border-top:1px solid var(--line);
  flex-direction:row;flex-wrap:wrap}}
.chart-legend .item .k{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)}
.chart-legend .item .k i{width:14px;height:2.5px;border-radius:2px;flex:none}
.chart-legend .item .k i.a{background:var(--brand)}
.chart-legend .item .k i.b{background:var(--ok)}
.chart-legend .item .k i.c{background:var(--ink-3)}
.chart-legend .item .v{font-size:19px;font-weight:600;letter-spacing:-.03em;margin-top:2px;
  font-variant-numeric:tabular-nums}

/* ── tiles ───────────────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.tile{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:15px 16px;
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-sm)}
.tile .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);font-weight:600}
.tile .big{font-size:24px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tile .note{font-size:11.5px;color:var(--ink-3)}
.tile.hl{border-color:var(--brand-line);background:var(--brand-soft)}
.tile.hl .big,.tile.hl .lbl{color:var(--brand-deep)}

/* ── proof rail ──────────────────────────────────────────────────────────── */
.with-rail{display:grid;grid-template-columns:1fr 282px;gap:18px;align-items:start}
@media(max-width:960px){.with-rail{grid-template-columns:1fr}}
.rail{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.rail h4{font-size:13px;font-weight:600;color:var(--ink);padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;gap:8px}
.rail h4 .seal{width:13px;height:13px;border-radius:50%;border:2px solid var(--ok);flex:none;position:relative}
.rail h4 .seal::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--ok)}
.rail .body{padding:16px;display:flex;flex-direction:column;gap:14px}
.kv{display:flex;flex-direction:column;gap:3px}
.kv dt{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);font-weight:600}
.kv dd{margin:0;font-size:12.5px;color:var(--ink)}
.chain{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.chain li{display:grid;grid-template-columns:13px 1fr;gap:10px;padding-bottom:12px;position:relative}
.chain li:last-child{padding-bottom:0}
.chain li::before{content:"";position:absolute;left:6px;top:13px;bottom:0;width:1px;background:var(--line-strong)}
.chain li:last-child::before{display:none}
.chain .node{width:12px;height:12px;border-radius:50%;border:2px solid var(--brand);background:var(--surface);
  margin-top:3px;z-index:1}
.chain .node.fill{background:var(--brand)}
.chain b{display:block;font-size:12.5px;font-weight:600}
.chain span{display:block;font-size:11px;color:var(--ink-3);font-family:var(--mono)}

/* ── printed document surfaces (serif — invoices and contracts) ──────────── */
/* Paper stays paper. An invoice preview, a PDF page and the signature pad
   stand for something printed, so they keep the light palette in the dark
   theme — and anything inside them that reads a token gets the light one,
   rather than light-grey text on a white page. */
:root[data-theme="dark"] :is(.doc,.page-canvas,.pdf-page){
  --surface:#FFFFFF; --surface-2:#FAF9F7; --surface-3:#F0EEEA;
  --ink:#141414; --ink-2:#4A4744; --ink-3:#8A857E;
  --line:#E7E3DE; --line-strong:#D2CCC4;
  --brand:#E55B1F; --brand-deep:#C2470F; --brand-soft:#FFF3EC; --brand-line:#F6CDB6;
  --ok:#2E7D4F; --ok-soft:#E6F2EA; --crit:#B3261E; --crit-soft:#FBE9E7;
  --note:#41566B; --note-soft:#EAEFF4; --on-brand:#FFFFFF;
  color-scheme:light;
}
:root[data-theme="dark"]{color-scheme:dark}

.doc{background:#fff;color:#111;border:1px solid var(--line-strong);border-radius:3px;padding:28px 30px;
  font-family:var(--doc);font-size:13.5px;line-height:1.65;box-shadow:var(--shadow)}
.doc .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid #111;padding-bottom:13px;margin-bottom:17px}
.doc h3{font-family:var(--doc);font-size:23px;letter-spacing:-.01em;font-weight:600}
.doc .meta{text-align:right;font-size:11.5px;color:#555;font-family:var(--ui);line-height:1.55}
.doc table{min-width:0;font-family:var(--ui);font-size:12.5px}
.doc th{background:transparent;color:#666;border-bottom:1px solid #CFCFCF;padding:6px 0;
  letter-spacing:.06em}
.doc td{border-bottom:1px solid #EAEAEA;padding:9px 0;color:#111}
.doc tbody tr:hover{background:transparent}
.doc .totals{margin-left:auto;width:236px;font-family:var(--ui);font-size:13px;margin-top:13px}
.doc .totals div{display:flex;justify-content:space-between;padding:5px 0}
.doc .totals .grand{border-top:2px solid #111;margin-top:5px;padding-top:9px;font-weight:700;font-size:15px}
/* You sign *on* the line: the mark sits above the rule, the caption below it.
   A rule above the name reads as the bottom of the paragraph before it. */
.doc .sigline{margin-top:24px;width:212px;font-family:var(--ui);font-size:10px;
  text-transform:uppercase;letter-spacing:.11em;color:#666}
.doc .sigline .ink{font-family:var(--doc);font-style:italic;font-size:22px;color:#111;
  text-transform:none;letter-spacing:0;transform:rotate(-2deg);display:inline-block;
  margin-bottom:-2px}
.doc .sigline .rule{display:block;border-bottom:1px solid #111;margin:2px 0 6px}
.doc a{color:inherit}
.paper-stack{background:var(--surface-3);padding:24px;border-radius:var(--r-lg);display:flex;
  justify-content:center;border:1px solid var(--line)}
.skel{height:8px;border-radius:2px;background:#E8E8E8;margin-bottom:9px}

/* ── centred setup card (org-setup reference) ────────────────────────────── */
.setup{position:relative;min-height:100vh;padding:38px 24px 56px;overflow:hidden;
  background:var(--surface-2)}
.bg-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bg-shapes i{position:absolute;display:block;border-radius:50%;background:var(--brand);opacity:.09}
.bg-shapes i.a{width:300px;height:300px;top:-120px;right:-70px}
.bg-shapes i.b{width:180px;height:180px;bottom:-70px;left:-50px;opacity:.13}
.bg-shapes i.c{width:96px;height:96px;bottom:90px;left:150px;opacity:.07}
.bg-shapes u{position:absolute;display:block;background:var(--brand);opacity:.045;
  width:150%;height:190px;transform:rotate(-11deg);text-decoration:none}
.bg-shapes u.one{top:60px;left:-25%}
.bg-shapes u.two{bottom:-40px;left:-25%;opacity:.03}

.setup-card{position:relative;max-width:880px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.setup-card .card-head{display:flex;align-items:center;gap:14px;padding:20px 34px;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.setup-card .card-head .glyph{width:32px;height:32px;border-radius:8px;background:var(--brand);
  display:grid;place-items:center;color:var(--on-brand);font-weight:700;font-size:15px;flex:none}
.setup-card .card-head b{font-size:15px;font-weight:600}
.setup-card .card-head .divide{width:1px;height:24px;background:var(--line-strong)}
.setup-card .card-head .what{font-size:15px;color:var(--ink-2)}
.setup-body{padding:30px 34px 34px;display:flex;flex-direction:column;gap:22px}
.setup-body h2{font-size:22px}
.note-block{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:9px}
.note-block b{font-size:12.5px}
.note-block ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.note-block li{font-size:12.5px;color:var(--ink-2)}
.note-links{display:flex;gap:26px;flex-wrap:wrap;padding-top:4px}
.note-links a{font-size:12.5px;color:var(--brand-deep);display:inline-flex;align-items:center;gap:6px}
.note-links a::before{content:"★";color:var(--brand);font-size:10px}
.setup-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);
  padding-top:20px}
.setup-foot .right{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--ink-3)}
/* Named in the product, not written yet. Same treatment as an unwireframed
   sidebar entry: visible, legibly inert, and not a link that eats a click. */
.setup-foot .right .dead,.note-links .dead{opacity:.55;cursor:default}

/* ── onboarding split (identity) ─────────────────────────────────────────── */

.method{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);border-radius:8px;
  padding:11px 13px;text-align:left;width:100%;background:var(--surface)}
.method:hover{border-color:var(--ink-3)}
.method.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
/* A row whose claim is verified. Mirrors `.on` with the success colour rather
   than the brand one, so "chosen" and "proved" do not look like the same thing. */
.method.ok{border-color:var(--ok);background:var(--ok-soft)}
.method .ic{width:31px;height:31px;border-radius:8px;background:var(--surface-2);display:grid;
  place-items:center;font-size:14px;flex:none;border:1px solid var(--line)}
.method b{display:block;font-size:13.5px;font-weight:600}
.method small{display:block;font-size:11.5px;color:var(--ink-3)}
.method .mark{margin-left:auto}
/* A choice made with a radio: the chosen card looks chosen with no script,
   and the radio itself stays for keyboards and screen readers. */
label.method{cursor:pointer}
label.method input[type=radio]{accent-color:var(--brand);margin:0;flex:none}
label.method:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.use-cases{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0}
.use-cases legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}

/* ── empty state + lifecycle ─────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;gap:13px;padding:56px 22px;text-align:center;
  background:var(--surface)}
.empty h3{font-size:19px}
.empty p{max-width:48ch;color:var(--ink-2);font-size:13.5px}
.life{border-top:1px solid var(--line);background:var(--surface-2);padding:28px 22px;display:flex;
  flex-direction:column;align-items:center;gap:18px}
.life .cap{font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);font-weight:600}
.flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.node-box{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--r);padding:6px 12px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.node-box.ok{border-color:var(--ok);color:var(--ok)}
.node-box.warn{border-color:var(--brand);color:var(--brand-deep)}
.node-box.crit{border-color:var(--crit);color:var(--crit)}
.node-box.acc{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.arr{color:var(--ink-3);font-size:13px}
.branch{display:flex;flex-direction:column;gap:6px}

/* ── prepare canvas ──────────────────────────────────────────────────────── */
/* The document gets the room. Two columns, not three, and the panel folds
   away entirely — a floor plan is the whole point of the screen it is on and
   was the smallest thing on it. See docs/PLAN-sign-layout.md. */
/* 320px, not 264: at 264 the rail was narrower than what it now holds, so
   "They choose which of their own" ran to two lines and a signer's DID to
   two more. 300 is where every one of those unwraps and 320 is where the rail
   stops getting shorter; past that the document pays width for nothing. It
   costs the page 56px of 1050 — 5% — and buys back a rail that reads. */
.prep{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.prep.folded{grid-template-columns:1fr 0}
.prep.folded > .panel-rail{display:none}
/* Both screens are exactly two children now — the document and one panel.
   "Place a zone" was a full-width strip above the document, which is the one
   direction a portrait page cannot spare: it cost 137px of height on every
   prepare screen. It is a section of the rail instead, which was already there
   and already 264px, so it costs the document nothing. */
.panel-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Sections inside one panel, rather than a panel each. A second box costs a
   header, a border and 14px of gap to say something about the same subject. */
.panel .sect{display:flex;flex-direction:column;gap:8px}
.panel .sect + .sect, .panel .pb > form.sect + .sect{margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.panel .sect > h4{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:6px}
/* "2 places" beside the heading it counts — Aquafier's spots counter, which
   answers "how much is left of this" without reading the list under it. */
.panel .sect > h4 .count{margin-left:auto;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--ink-2)}
@media(max-width:900px){.prep,.prep.folded{grid-template-columns:1fr}
  .prep.folded > .panel-rail{display:flex}}

/* Paging and zoom. One strip over the document, not a control panel.
   Over, not under: at any readable zoom a page is taller than the window, so
   a strip underneath it meant scrolling past the whole page to reach the
   button that turns it — the hunting L1 set out to remove. */
.pdf-nav{display:flex;align-items:center;gap:12px;padding:9px 11px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.pdf-nav .at{font-variant-numeric:tabular-nums}
/* The file's name, centred in its own bar. `margin:auto` on both sides is what
   centres it against two groups of different widths — a flex `justify-content`
   would centre the *gaps*, not the name. It truncates rather than wrapping,
   because a second line here is a row of chrome the page pays for. */
.pdf-nav .name{margin:0 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink-2);text-decoration:none}
.pdf-nav a.name:hover{color:var(--brand);text-decoration:underline}
/* A square button for a control with no room for a word — and the panel it
   toggles, drawn rather than spelled. `\u25a3` is "white square containing black
   small square", which at 13px is a dot in a box and reads as nothing. Two
   pseudo-elements are a picture of the thing: a pane, with its right-hand
   column filled while the panel is showing and empty once it is folded away.
   No glyph, so no font to disagree about it. */
.pdf-nav .ico{width:30px;height:26px;padding:0;position:relative;color:var(--ink-3)}
.pdf-nav .ico:hover{color:var(--ink)}
.pdf-nav .ico::before{content:"";position:absolute;inset:6px 7px;
  border:1.5px solid currentColor;border-radius:2px}
.pdf-nav .ico::after{content:"";position:absolute;top:7.5px;bottom:7.5px;right:8.5px;
  width:5px;background:currentColor}
.pdf-nav .ico[aria-expanded="false"]::after{background:none}
.pdf-nav input[type=range]{width:140px;accent-color:var(--brand)}
.pdf-nav .zoom{margin-left:auto;display:flex;align-items:center;gap:8px}
.pdf-nav button[disabled]{opacity:.4;cursor:default}
.page-canvas{position:relative;background:#fff;border:1px solid var(--line-strong);border-radius:3px;
  min-height:430px;padding:26px;box-shadow:var(--shadow);overflow:hidden}
.pdf-page{position:relative;margin:0 auto;background:#fff;border:1px solid var(--line-strong);
  border-radius:3px;box-shadow:var(--shadow);overflow:hidden;line-height:0}
.pdf-page canvas{width:100%;height:auto;display:block}
.pdf-page.placing{cursor:crosshair}

/* The screen's one action, under the panel that lists what it saves, and the
   full width of that rail: it is the only thing this screen does, so it is not
   competing with anything for the room.

   Sticky rather than static, so a panel taller than the window cannot put Save
   below the fold — and opaque rather than bare, because a floating button
   hovered across the zone row it was covering. */
.page-acts{position:sticky;bottom:0;display:flex;background:var(--ground);
  padding:12px 0;margin-top:-12px}
.page-acts > .btn{flex:1;justify-content:center;padding-top:11px;padding-bottom:11px}

/* A mark shown back to the person who made it. Capped by *height*, and never
   enlarged: `max-width:100%` alone stretched a 420x140 signature to the width
   of whatever column it landed in — 1018px, three times the size it was drawn
   at and larger than the document beside it. A signature is read at the size
   of a signature. */
.mark-shot{display:block;max-width:100%;max-height:72px;width:auto;height:auto;object-fit:contain}
.mark-shot.stamp{max-height:96px}
.pdf-page .drop{cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden}
/* A mark previewed in its box: the signer sees what will be put there, at the
   size it will be put, inside an outline that is still dashed because nothing
   is on the document until it is signed for. */
.pdf-page .drop img{width:100%;height:100%;object-fit:contain;display:block}
/* Signed for, and so part of the document rather than a proposal about it: the
   dashed outline that says "not yet" comes off. */
.pdf-page .drop.done{border-color:transparent;background:none;cursor:default}
.pdf-page .drop.done.comment{border-color:var(--note);background:var(--note-soft)}

/* One colour per kind of zone, on the page and in the list beside it. Three
   boxes that all looked alike is what this answers: a signature and a stamp
   are different promises, and telling them apart should not need reading.
   Orange is the signature because it is the one every document has; `--note`
   is a slate kept clear of the semantic red and green. */
.drop.stamp{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.drop.comment{border-color:var(--note);background:var(--note-soft);color:var(--note)}

/* The zones on the page, listed beside it. `.placed` was a wireframe list
   with a flex row and a `.pgno`; nothing else uses it any more, so there is
   one definition of it rather than two that disagreed about `display`. */
.placed{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.placed .none{padding:17px;text-align:center;font-size:12px;color:var(--ink-3);font-style:italic}

/* A zone row carries four things and the rail is 250px wide, so they do not
   go on one line: the kind truncated to "Si…", "page 1" wrapped, and the
   signer's name was cut off inside its own select. Two rows instead — what
   the zone *is* above, who it is *for* below, with the select given the whole
   width because a name is the longest thing here. Explicit placement, so the
   order on screen does not depend on the order in the markup. */
.placed .item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px 9px;
  align-items:center;border-bottom:1px solid var(--line);padding:9px 11px;font-size:12.5px}
.placed .item .swatch{grid-column:1;grid-row:1;width:11px;height:11px;border-radius:3px;
  border:2px dashed var(--brand);background:var(--brand-soft)}
.placed .item .swatch.stamp{border-color:var(--ok);background:var(--ok-soft)}
.placed .item .swatch.comment{border-color:var(--note);background:var(--note-soft)}
.placed .item .meta{grid-column:2;grid-row:1;min-width:0;display:flex;align-items:baseline;gap:7px}
.placed .item b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.placed .item small{font-size:11px;color:var(--ink-3);white-space:nowrap}
.placed .item .x{grid-column:3;grid-row:1}
.placed .item .sel{grid-column:1/-1;grid-row:2;width:100%;min-height:30px;
  padding:4px 8px;font-size:11.5px}
/* After the rule that draws the border, not before it. */
.placed .item:last-child{border-bottom:0}
.drop{position:absolute;border:2px dashed var(--brand);background:var(--brand-soft);border-radius:5px;
  padding:6px 9px;font-size:10.5px;font-weight:600;color:var(--brand-deep);letter-spacing:.03em}
.drop.done{border-style:solid;border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.recipient{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface)}
.recipient .ord{width:20px;height:20px;border-radius:50%;background:var(--brand);color:var(--on-brand);
  font-size:10.5px;font-weight:600;display:grid;place-items:center;flex:none}
.recipient b{font-size:12.5px;display:block;font-weight:600}
.recipient small{font-size:11px;color:var(--ink-3);display:block}

/* ── map ─────────────────────────────────────────────────────────────────── */
.map{padding:30px 26px 44px;display:flex;flex-direction:column;gap:26px;max-width:1180px;margin:0 auto}
.map .hero{display:flex;flex-direction:column;gap:10px;max-width:66ch}
.map .hero h1{font-size:32px;letter-spacing:-.035em;line-height:1.15}
.map .hero p{color:var(--ink-2);font-size:14.5px}
.map .flowgrp h3{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:14px 15px;
  text-align:left;display:flex;flex-direction:column;gap:6px;width:100%;box-shadow:var(--shadow-sm);
  color:inherit;text-decoration:none}
.card:hover{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-sm)}
.card:hover b{color:var(--brand-deep)}
.card b{font-size:13.5px;font-weight:600}
.card p{font-size:12px;color:var(--ink-2);line-height:1.5}
.card .refs{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:auto;padding-top:5px}

/* ── signer workspace ────────────────────────────────────────────────────── */
/* Borrowed from AquaSign's signer view, which had already settled the hard
   part: the document gets the room, and everything you can do to it lives in
   one column beside it. What is not borrowed is the five buttons that view
   started with — its own #148 collapsed those into a single "Add to document",
   and that is the version taken here. */
.signer{display:grid;grid-template-columns:1fr 352px;height:100vh;
  min-height:560px}
@media(max-width:960px){.signer{grid-template-columns:1fr;height:auto}}
.signer .work{display:flex;flex-direction:column;min-width:0;background:var(--surface-3)}

.doc-bar{display:flex;align-items:center;gap:7px;flex:none;height:46px;padding:0 12px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.doc-bar .tool{display:grid;place-items:center;width:30px;height:28px;border-radius:var(--r);
  color:var(--ink-2);font-size:13px}
.doc-bar .tool:hover{background:var(--surface-3);color:var(--ink)}
.doc-bar .tool:disabled{opacity:.3}
.doc-bar .pg{font-size:12.5px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-bar .div{width:1px;height:20px;background:var(--line);margin:0 4px}
.doc-bar .sp{flex:1}
.doc-bar input[type=range]{width:96px;accent-color:var(--brand)}
.doc-scroll{flex:1;overflow:auto;padding:22px;display:flex;justify-content:center;align-items:flex-start}
.doc-page{position:relative;width:100%;max-width:540px}

.signer .side{display:flex;flex-direction:column;overflow-y:auto;background:var(--surface);
  border-left:1px solid var(--line)}
@media(max-width:960px){.signer .side{border-left:0;border-top:1px solid var(--line)}}
.side-block{padding:16px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
.side-block:last-child{border-bottom:0}
.side-block > h4{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;
  letter-spacing:.13em;color:var(--ink-3);font-weight:600}
.side-block > h4 .spots{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11.5px}

.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600}
.btn.dark:hover{background:#000;border-color:#000}
/* In the dark theme the button inverts to light-on-dark, so black would be
   dark text on black. */
:root[data-theme="dark"] .btn.dark:hover{background:var(--ink-2);border-color:var(--ink-2)}
.theme-pick{display:flex;gap:8px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line-strong);background:var(--surface)}

/* A form reads as a column, not as a wall. Panels stretched to a 1900px
   window put the label at one end of the room and the field at the other, so
   anything that is a single sequence of questions is held to a measure and
   centred — the width a person reads at, whatever the window does.

   Width only, so it composes: `.pane-head` is a flex *row*, and a class that
   also set `flex-direction: column` would stack a title on top of its own
   buttons. Pair it with `.stack` where the children should run downwards. */
.measure{width:100%;max-width:720px;margin-inline:auto}
.stack{display:flex;flex-direction:column;gap:18px}

.hint{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid var(--brand-line);font-size:12px;
  color:var(--brand-deep);line-height:1.45}
.hint .btn{margin-left:auto;flex:none}
.side-note{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.addr{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* ── dialogs ─────────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(20,20,20,.45);display:flex;
  align-items:center;justify-content:center;padding:20px}
.dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;
  max-height:88vh;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden}
.dialog.wide{max-width:880px}
.dialog-head{display:flex;align-items:center;gap:13px;flex:none;padding:17px 20px;
  border-bottom:1px solid var(--line)}
.dialog-head .glyph{width:34px;height:34px;border-radius:9px;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:grid;place-items:center;font-size:15px;flex:none}
.dialog-head h3{font-size:16px}
.dialog-head .sub{font-size:12.5px;color:var(--ink-3)}
.dialog-head .x{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;
  place-items:center;color:var(--ink-3);font-size:15px;flex:none}
.dialog-head .x:hover{background:var(--surface-3);color:var(--ink)}
.dialog-body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.dialog-foot{display:flex;align-items:center;gap:10px;flex:none;padding:15px 20px;
  border-top:1px solid var(--line);background:var(--surface-2)}
.dialog-foot .sp{flex:1}
.dialog h5{font-size:14.5px;text-align:center}
.dialog .lede{font-size:12.5px;color:var(--ink-3);text-align:center}

/* Wizard progress. Three steps named, so nobody wonders how long this is. */
.steps{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.steps .s{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.steps .s .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--ink-3)}
.steps .s.on{color:var(--brand-deep);font-weight:600}
.steps .s.on .n{background:var(--brand);color:var(--on-brand)}
.steps .s.done .n{background:var(--ok);color:#fff}
.steps .bar{width:32px;height:1px;background:var(--line-strong)}
@media(max-width:620px){.steps .bar{display:none}}

/* Tabs inside a dialog. */
.tabs-row{display:flex;flex:none;border-bottom:1px solid var(--line)}
.tabs-row button{flex:1;padding:12px 8px;font-size:13px;color:var(--ink-3);
  border-bottom:2px solid transparent}
.tabs-row button[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--brand)}

.drop-zone{border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-2);
  padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.drop-zone .big{font-size:22px;color:var(--ink-3)}
.drop-zone b{font-size:13.5px}
.drop-zone small{font-size:12px;color:var(--ink-3)}
.picked{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--brand-line);background:var(--brand-soft)}
.picked b{font-size:13px;display:block}
.picked small{font-size:11.5px;color:var(--ink-3)}

.mark-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)}
.mark-tile.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.mark-tile .ink-mark{font-family:var(--doc);font-style:italic;font-size:21px;color:var(--ink);
  transform:rotate(-2deg)}
.mark-tile small{display:block;font-size:11.5px;color:var(--ink-3)}

/* A step behind you is a tick, not a number you might mistake for the one you
   are on. */
.steps .s.done .n{font-size:0}
.steps .s.done .n::after{content:"✓";font-size:12px;font-weight:700}

/* Each wizard step carries its own footer, because the buttons differ per step.
   The negative margin lets it reach the dialog's edges from inside the padded
   body. */
.dialog-body > [data-step]{display:flex;flex-direction:column}
.dialog-body > [data-step] > .dialog-foot{margin:20px -20px -20px}

/* ── reports centre ──────────────────────────────────────────────────────── */
/* Zoho's shape: a searchable banner, then a sheet of folders two reports to a
   row. The sheet overlaps the banner so the page reads as one object rather
   than a header with a table under it. */
.rpt-hero{position:relative;overflow:hidden;padding:34px 24px 40px;text-align:center;
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.rpt-hero h2,.rpt-hero p,.rpt-hero .find{position:relative}
.rpt-hero h2{font-size:23px}
.rpt-hero .find{max-width:400px;margin:15px auto 0}
.rpt-hero .find .inp{background:var(--surface);box-shadow:var(--shadow-sm)}

.rpt-sheet{position:relative;max-width:1000px;margin:-20px auto 30px;padding:24px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:22px}
.rpt-grp > h3{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:6px}
.rpt-grp > h3 .fold{color:var(--ink-3);font-size:13px}
.rpt-grp > h3 .n{font-size:11px;font-weight:500;color:var(--ink-3);
  background:var(--surface-3);border-radius:99px;padding:1px 7px}
.rpt-list{display:grid;grid-template-columns:1fr 1fr;column-gap:46px}
@media(max-width:760px){.rpt-list{grid-template-columns:1fr}}
.rpt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:13px;
  padding:9px 2px;color:var(--brand-deep);border-bottom:1px dotted var(--line-strong)}
.rpt:hover{color:var(--ink)}
.rpt .star{margin-left:auto;font-size:12px;color:var(--line-strong)}
.rpt:hover .star{color:var(--ink-3)}
.rpt .star.on{color:var(--brand)}

/* The setup screen's shapes are sized for a full-height page. Here they sit in
   a 130px band behind a title, so they are smaller and much fainter — this is
   texture, not decoration competing with the search field. */
.rpt-hero .bg-shapes i{opacity:.06}
.rpt-hero .bg-shapes i.a{width:170px;height:170px;top:-64px;right:7%}
.rpt-hero .bg-shapes i.b{width:112px;height:112px;bottom:-46px;left:6%;opacity:.075}
.rpt-hero .bg-shapes i.c{width:58px;height:58px;top:24px;left:21%;opacity:.05}
.rpt-hero .bg-shapes u{opacity:.022;height:130px;top:34px}

/* ── report view ─────────────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);margin-bottom:5px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand-deep)}
.filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filters .inp{width:auto;min-height:32px;padding:5px 11px;font-size:12.5px;border-radius:99px;
  background:var(--surface);color:var(--ink-2)}
.filters .inp:hover{border-color:var(--ink-3);color:var(--ink)}
.filters .sp{flex:1}
.filters .rowcount{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* The totals line is part of the table, not a row of it: no hover, and it holds
   its own weight so the eye stops there. */
tfoot td{border-top:1.5px solid var(--line-strong);border-bottom:0;font-weight:600;
  background:var(--surface-2)}
tfoot tr:hover{background:var(--surface-2)}

/* ── sign in / signed out ────────────────────────────────────────────────── */
/* The setup card is sized for a three-column wizard. These two pages are one
   column of short decisions, so they take a narrower one. */
.setup-card.narrow{max-width:452px}
.setup-card.narrow .card-head{padding:16px 26px}
.setup-card.narrow .setup-body{padding:24px 26px 26px;gap:18px}

/* What the passkey ceremony is doing. One line, under the methods, so a
   prompt that was cancelled or a device that was declined says so where the
   button that started it is — not in a dialog the person has to dismiss. */
.passkey-status{margin:0;font-size:12.5px;color:var(--ink-2);text-align:center}
.passkey-status.bad{color:var(--warn)}

.or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:11.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.facts{display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:16px 0}
.fact{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start}
.fact .ic{width:26px;height:26px;border-radius:7px;background:var(--surface-3);display:grid;
  place-items:center;font-size:12px;color:var(--ink-2)}
.fact b{display:block;font-size:13px}
.fact span{display:block;font-size:12px;color:var(--ink-3);line-height:1.5}

/* ── registry lookup result ──────────────────────────────────────────────── */
/* What the registry answered, shown beside what was typed rather than as a tick
   on the field. The address and the date are the parts that make the claim
   defensible later, and neither fits in a validation icon. */
.lookup{border:1px solid var(--ok);border-radius:var(--r);background:var(--ok-soft);padding:12px 14px;
  display:flex;flex-direction:column;gap:10px}
.lookup-head{display:flex;align-items:center;gap:9px}
.kv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0}

/* A row's checkbox in a dialog table. Drawn rather than native, to match the
   chips and badges around it. */
.tick{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;
  border:1px solid var(--line-strong);background:var(--surface);font-size:10px;color:transparent}
.tick.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:700}

/* A money column must not wrap: "€" alone on one line and the figure on the
   next reads as two values. */
td.num,tfoot td.num{white-space:nowrap}

/* ── marketing pages ─────────────────────────────────────────────────────── */
/* Built from the app's own components. What is added here is only what a
   marketing page needs and an app screen does not: a wide band, a hero, a
   footer. Everything inside them is a panel, a chip or a tile. */
.mkt{background:var(--surface)}
.mkt-in{max-width:1080px;margin:0 auto;padding:0 26px;width:100%}
.mkt-section{padding:52px 26px}

.mkt-nav{display:flex;align-items:center;gap:22px;height:60px;padding:0 26px;
  border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:50}
.mkt-nav nav{display:flex;gap:20px;margin-left:14px;flex:1;flex-wrap:wrap}
.mkt-nav nav a{font-size:13.5px;color:var(--ink-2)}
.mkt-nav nav a:hover{color:var(--brand-deep)}
.brandmark{display:flex;align-items:center;gap:9px;color:inherit}
.brandmark .glyph{width:26px;height:26px;border-radius:7px;background:var(--brand);display:grid;
  place-items:center;color:var(--on-brand);font-weight:700;font-size:13px;flex:none}
.brandmark b{font-size:14.5px;letter-spacing:-.02em;color:var(--ink)}

.mkt-hero{position:relative;overflow:hidden;background:var(--surface-2);
  border-bottom:1px solid var(--line);padding:56px 26px 60px}
.mkt-hero-in{position:relative;max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:900px){.mkt-hero-in{grid-template-columns:1fr}}
.mkt-hero-copy{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.mkt-hero h1{font-size:42px;line-height:1.07;letter-spacing:-.04em;max-width:16ch}
@media(max-width:620px){.mkt-hero h1{font-size:32px}}
.lede-lg{font-size:15.5px;color:var(--ink-2);max-width:54ch;line-height:1.6}
.fineprint{font-size:12px;color:var(--ink-3)}
.waitlist{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.waitlist .inp{min-width:238px;width:auto}

.mkt-hero-art{display:flex;flex-direction:column;align-items:center;gap:12px}
.mkt-hero-art .doc{width:100%;max-width:308px;padding:20px}
.proof-tag{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3)}

.mkt-band{background:var(--surface-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:34px 0}
.mkt-band .mkt-section{padding-top:18px;padding-bottom:18px}
.mkt-h2{font-size:26px;letter-spacing:-.03em}
.mkt-sub{font-size:14px;color:var(--ink-2);max-width:62ch;margin:8px 0 22px}

.mkt-card .pb{gap:13px}
.mkt-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ticks li{position:relative;padding-left:21px;font-size:13px;color:var(--ink-2);line-height:1.5}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:700;
  font-size:12px}
.mkt-card .btn{align-self:flex-start;margin-top:3px}

.mkt-point{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.mkt-point b{font-size:15px}
.mkt-point p{font-size:13px;color:var(--ink-2);line-height:1.6}

.mkt-cta{background:var(--rail);color:var(--rail-ink);padding:48px 0;text-align:center}
.mkt-cta h2{font-size:27px;letter-spacing:-.03em;color:#fff;max-width:22ch;margin:0 auto}
.mkt-cta p{font-size:14px;margin:11px auto 20px;max-width:52ch;color:var(--rail-ink)}
.mkt-cta .waitlist{justify-content:center}
.mkt-cta .inp{background:var(--rail-2);border-color:var(--rail-line);color:#fff}
.mkt-cta .inp::placeholder{color:#6A645C}

.mkt-foot{background:var(--surface);border-top:1px solid var(--line);padding:38px 0 44px}
.mkt-foot .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:26px}
@media(max-width:760px){.mkt-foot .cols{grid-template-columns:1fr 1fr}}
.mkt-foot .cols > div{display:flex;flex-direction:column;gap:7px}
.mkt-foot b{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.mkt-foot a{font-size:13px;color:var(--ink-2)}
.mkt-foot a:hover{color:var(--brand-deep)}
.mkt-foot p{font-size:12.5px;color:var(--ink-3);max-width:34ch;line-height:1.55}
.mkt-foot .dim{font-size:13px;color:var(--ink-3)}

/* The footer's column headings are uppercase labels; the brandmark in the first
   column is a name and must not inherit that. */
.mkt-foot .brandmark b{text-transform:none;letter-spacing:-.02em;font-size:14.5px;color:var(--ink)}

/* ── verify: nothing to check yet ────────────────────────────────────────── */
.find-page{max-width:640px;margin:0 auto;padding:38px 26px 54px;display:flex;
  flex-direction:column;gap:20px}
.find-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.find-head h2{font-size:24px}
.find-head p{font-size:13.5px;color:var(--ink-2);max-width:46ch;line-height:1.6}
.find-glyph{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);
  border:1px solid var(--brand-line);display:grid;place-items:center;font-size:20px;
  color:var(--brand-deep)}
.find-form{display:flex;gap:9px;flex-wrap:wrap}
.find-form .inp{flex:1;min-width:240px}
.find-foot{font-size:12.5px;color:var(--ink-3);line-height:1.6;text-align:center}

/* The banner for a reference we hold no record of. Amber, never red: silence is
   not a verdict, and a red page would read as an accusation. */
.notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--warn-soft);border:1px solid var(--brand-line)}
.notice b{font-size:13.5px;display:block}
.notice p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:4px}

/* ── activity feed ───────────────────────────────────────────────────────── */
/* A timeline, not a table: the day is the heading and the entries hang off one
   rule, so scanning down answers "what changed" without reading columns. */
.feed-day{display:flex;flex-direction:column;gap:9px}
.feed-day > h4{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);
  font-weight:600}
.feed{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.feed li{display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0}
.feed li:hover{background:var(--surface-2)}
.feed-ic{width:26px;height:26px;border-radius:7px;background:var(--surface-3);display:grid;
  place-items:center;font-size:12px;color:var(--ink-2);flex:none}
.feed-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0;flex:1}
.feed-body b{font-size:13px;font-weight:600}
.feed-body a,.feed-body .obj{font-size:12.5px;color:var(--ink-3)}
.feed-body a:hover{color:var(--brand-deep)}
.feed-who{font-size:12px;color:var(--ink-3);white-space:nowrap}
.feed-time{font-size:12px;color:var(--ink-3);white-space:nowrap;min-width:38px;text-align:right}
@media(max-width:700px){.feed-who{display:none}}

/* ── plans ───────────────────────────────────────────────────────────────── */
.plan-card.current{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.plan-card .price b{font-size:28px;letter-spacing:-.03em;display:block}
.plan-card .price small{font-size:12px;color:var(--ink-3)}
.plan-card .blurb{font-size:13px;color:var(--ink-2)}
.plan-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2)}
.plan-note{font-size:12px;color:var(--ink-3)}
.plan-buy{display:flex;gap:8px;flex-wrap:wrap}
/* The company form's optional settings, folded away on a first visit. */
details.org-more > .pb{gap:12px}
/* The landing page's "what we keep / what we never have". A cross, in the
   ink rather than the alarm red: it is a promise, not a warning. */
.ticks.no li::before{content:"✕";color:var(--ink-3)}
.keys-held > div{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface)}
.keys-held b{font-size:14px}
#why-keys .flow{flex-wrap:wrap}
/* Arriving by the #why-keys link lands the heading below the sticky bar. */
#why-keys{scroll-margin-top:64px}
/* On a phone the bar's links wrapped past its fixed height and over the
   page. They are all in the footer too, so the bar keeps brand and Sign in. */
@media(max-width:620px){.mkt-nav nav{display:none}.mkt-nav .btn{margin-left:auto}}
.formats td{font-size:13px;color:var(--ink-2)}
.formats td.r{white-space:nowrap;width:1%}
#features,#formats{scroll-margin-top:64px}
/* The landing cards' module lists, drawn like the app's sidebar rows. */
.mod-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.mod-list li{display:grid;grid-template-columns:24px 84px 1fr;align-items:baseline;gap:8px;font-size:13px}
.mod-list .ic{color:var(--ink-3);text-align:center}
.mod-list b{font-weight:600}
.mod-list span:last-child{color:var(--ink-2)}
@media(max-width:620px){.mod-list li{grid-template-columns:24px 1fr}.mod-list span:last-child{grid-column:2}}

/* ── profile: marks as two cards ─────────────────────────────────────────── */
.mark-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}
@media(max-width:620px){.mark-cards{grid-template-columns:1fr}}
.mark-card{border:1px solid var(--line);border-radius:var(--r-lg);display:flex;flex-direction:column;
  background:var(--surface)}
.mark-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:13px}
.mark-card-art{height:96px;display:grid;place-items:center;padding:10px;background:var(--surface-2)}
.mark-card-art img{max-width:100%;max-height:76px;object-fit:contain}
.mark-card-art .dead{font-size:12.5px}
.mark-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;
  font-size:12px}
.mark-card-foot .sub{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── danger, kept out of the way ─────────────────────────────────────────── */
.danger-foot{display:flex;justify-content:flex-end;padding:6px 2px 0}
.link-danger{background:none;border:0;padding:0;font-size:12.5px;color:var(--ink-3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.link-danger:hover{color:var(--crit)}
/* A native <dialog> wearing the house dialog: no browser padding or border,
   and a dimmed page behind it. */
dialog.dialog{padding:0;margin:auto;color:inherit}
/* `.dialog` sets display:flex, which beat the browser's own rule hiding a
   closed <dialog>, so it rendered in the table row. Closed is hidden. */
dialog.dialog:not([open]){display:none}
dialog.dialog::backdrop{background:rgba(20,20,20,.45)}
dialog.dialog > form{display:flex;flex-direction:column;min-height:0}

/* ── a row's actions: a <details> popover ────────────────────────────────── */
.row-menu{display:inline-block;position:relative;margin-left:6px;text-align:left}
.row-menu > summary{list-style:none;padding:4px 10px;line-height:1}
.row-menu > summary::-webkit-details-marker{display:none}
.row-menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:200px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:4px;display:flex;flex-direction:column}
.row-menu-list form{margin:0}
.row-menu-list button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--ink);cursor:pointer}
.row-menu-list button:hover{background:var(--surface-2)}
.row-menu-list button.danger{color:var(--crit)}
/* The table's wrapper scrolls sideways, which clips anything that pokes out
   of it — the row's menu among them. While one is open, nothing is clipped. */
/* The panel around it clips too, to keep its rounded corners. */
.tbl-wrap:has(.row-menu[open]),.panel:has(.row-menu[open]){overflow:visible}