:root{
  color-scheme: light dark;

  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --font-heading: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-heading-weight: 600;
  --font-body: "Lora", "Iowan Old Style", Georgia, serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* The design's own: private (warm), shared (blue), document paper, the build. */
  --pv-bg: #fff3e4;
  --pv-line: #c28d41;
  --pv-ink: #5a3b0a;
  --pv-edge: color-mix(in srgb, #c28d41 60%, transparent);
  --sh-bg: oklch(0.965 0.016 235);
  --sh-line: oklch(0.52 0.07 235);
  --sh-ink: oklch(0.36 0.07 235);
  --sh-mark: oklch(0.9 0.05 235);
  --paper: #fbfaf8;
  --dev: #a3281f;

  /* State tones (S22, html.ts STATUS_TONE): a filled pill per kind of state.
     Each ink passes WCAG AA (4.5:1) on its own bg, in both themes; the line is
     the stepper's fill and a pill's edge. private and shared are the zone
     colours under the tone names. The differs amber leans orange so it is
     never read as the private ochre. stylesheet.test.ts measures them. */
  --tone-agreed-bg: #e3f1e4;
  --tone-agreed-ink: #1f5b2a;
  --tone-agreed-line: #3f8a4e;
  --tone-differs-bg: #fbe3d0;
  --tone-differs-ink: #87400d;
  --tone-differs-line: #c4692c;
  --tone-waiting-bg: #e6e4e3;
  --tone-waiting-ink: #4a4747;
  --tone-waiting-line: #8d8989;
  --tone-private-bg: var(--pv-bg);
  --tone-private-ink: var(--pv-ink);
  --tone-private-line: var(--pv-line);
  --tone-shared-bg: var(--sh-bg);
  --tone-shared-ink: var(--sh-ink);
  --tone-shared-line: var(--sh-line);

  /* Ink for a primary button and a link: accent-700 on light paper. */
  --btn-ink: var(--color-accent-700);
  /* A solid primary button, where a flow has one action: ochre fill, pale ink. */
  --btn-solid-bg: var(--color-accent-700);
  --btn-solid-bg-hover: var(--color-accent-800);
  --btn-solid-ink: #fffaf3;

  /* v1 aliases. Inline style attributes across the render files still name
     these, so each one points at the v2 token that means the same thing. */
  --ink: var(--color-text);
  --ink-2: var(--color-neutral-800);
  --ink-3: var(--color-neutral-700);
  --rule: var(--color-divider);
  --surface: var(--color-bg);
  --private-bg: var(--pv-bg);
  --private-rule: var(--pv-line);
  --private-hatch: var(--pv-line);
  --private-label: var(--pv-ink);
  --mark-bg: var(--color-accent-200);
  --shared-bg: var(--sh-bg);
  --shared-rule: var(--sh-line);
  --shared-label: var(--sh-ink);
  --shared-card: var(--sh-mark);
  --dev-banner: var(--dev);
  --err-rule: var(--color-neutral-400);
  --err-bg: color-mix(in srgb, var(--color-neutral-100) 60%, transparent);
  --disabled-ink: var(--color-neutral-500);
  --disabled-rule: var(--color-neutral-300);
  --ui: var(--font-body);
  --voice: var(--font-body);
  --raw: var(--font-body);
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:40px;

  /* The page's measure: a single topic or the board reads in 640-720px. */
  --measure: 720px;
  --gutter: 20px;
}
/* Dark follows the device unless this browser chose a theme (theme.ts puts
   data-theme on <html>); the same tokens apply when dark is chosen outright. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){

  --color-bg: #1b1a19;
  --color-surface: #262423;
  --color-text: #ece8e3;
  --color-accent: #e1ad66;
  --color-divider: color-mix(in srgb, #ece8e3 18%, transparent);
  --color-neutral-100: #2d2b2b;
  --color-neutral-200: #444141;
  --color-neutral-300: #605d5d;
  --color-neutral-400: #7d7979;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #bab6b6;
  --color-neutral-700: #d7d3d3;
  --color-neutral-800: #eae7e7;
  --color-neutral-900: #f8f4f4;
  --color-accent-100: #3a270d;
  --color-accent-200: #5a3b0a;
  --color-accent-300: #7d5411;
  --color-accent-400: #a06f24;
  --color-accent-500: #c28d41;
  --color-accent-600: #e1ad66;
  --color-accent-700: #facb8d;
  --color-accent-800: #ffe3bf;
  --color-accent-900: #fff3e4;
  --pv-bg: #2e2416;
  --pv-line: #c28d41;
  --pv-ink: #facb8d;
  --pv-edge: color-mix(in srgb, #c28d41 70%, transparent);
  --sh-bg: oklch(0.27 0.03 235);
  --sh-line: oklch(0.72 0.07 235);
  --sh-ink: oklch(0.87 0.05 235);
  --sh-mark: oklch(0.38 0.06 235);
  --paper: #232120;
  --dev: #e0685c;
  --tone-agreed-bg: #1d3322;
  --tone-agreed-ink: #a8dcb2;
  --tone-agreed-line: #5c9a69;
  --tone-differs-bg: #3a2414;
  --tone-differs-ink: #f5b98e;
  --tone-differs-line: #c0773f;
  --tone-waiting-bg: #2e2c2b;
  --tone-waiting-ink: #d0cbca;
  --tone-waiting-line: #7d7979;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 3px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  --btn-ink: var(--color-accent);
  --btn-solid-bg: var(--color-accent-600);
  --btn-solid-bg-hover: var(--color-accent-700);
  --btn-solid-ink: #1b1a19;
  --mark-bg: var(--color-accent-300);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;

  --color-bg: #1b1a19;
  --color-surface: #262423;
  --color-text: #ece8e3;
  --color-accent: #e1ad66;
  --color-divider: color-mix(in srgb, #ece8e3 18%, transparent);
  --color-neutral-100: #2d2b2b;
  --color-neutral-200: #444141;
  --color-neutral-300: #605d5d;
  --color-neutral-400: #7d7979;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #bab6b6;
  --color-neutral-700: #d7d3d3;
  --color-neutral-800: #eae7e7;
  --color-neutral-900: #f8f4f4;
  --color-accent-100: #3a270d;
  --color-accent-200: #5a3b0a;
  --color-accent-300: #7d5411;
  --color-accent-400: #a06f24;
  --color-accent-500: #c28d41;
  --color-accent-600: #e1ad66;
  --color-accent-700: #facb8d;
  --color-accent-800: #ffe3bf;
  --color-accent-900: #fff3e4;
  --pv-bg: #2e2416;
  --pv-line: #c28d41;
  --pv-ink: #facb8d;
  --pv-edge: color-mix(in srgb, #c28d41 70%, transparent);
  --sh-bg: oklch(0.27 0.03 235);
  --sh-line: oklch(0.72 0.07 235);
  --sh-ink: oklch(0.87 0.05 235);
  --sh-mark: oklch(0.38 0.06 235);
  --paper: #232120;
  --dev: #e0685c;
  --tone-agreed-bg: #1d3322;
  --tone-agreed-ink: #a8dcb2;
  --tone-agreed-line: #5c9a69;
  --tone-differs-bg: #3a2414;
  --tone-differs-ink: #f5b98e;
  --tone-differs-line: #c0773f;
  --tone-waiting-bg: #2e2c2b;
  --tone-waiting-ink: #d0cbca;
  --tone-waiting-line: #7d7979;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 3px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  --btn-ink: var(--color-accent);
  --btn-solid-bg: var(--color-accent-600);
  --btn-solid-bg-hover: var(--color-accent-700);
  --btn-solid-ink: #1b1a19;
  --mark-bg: var(--color-accent-300);
}
:root[data-theme="light"]{color-scheme: light}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--color-bg)}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--btn-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--color-accent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}
svg.i{display:inline-block;flex:none;vertical-align:-0.15em}
.serif{font-family:var(--font-body)}
.mono{font-family:var(--font-body);overflow-wrap:anywhere}
.amt,.val,.tnum{font-feature-settings:"tnum"}
.skip{position:absolute;left:8px;top:-80px;z-index:60;padding:10px 16px;border-radius:var(--radius-md);background:var(--color-accent-700);color:var(--color-bg);font-size:14px;font-weight:600;text-decoration:none}
.skip:focus{top:8px}
main:focus{outline:none}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ widths */
.wrap{max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
body.measure-narrow{--measure:560px;--gutter:24px}
body.lawyer{--measure:860px}
body.document{--measure:794px}
main{padding:32px 0 48px}
/* The right rail (S22, html.ts LayoutInput.aside): after the content in
   source order and in normal flow, then beside it from 1100px up. */
.rail{margin-top:32px}
@media(min-width:1100px){
  .wrap.has-rail{max-width:calc(var(--measure) + 300px + 36px + 2 * var(--gutter));display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:36px;align-items:start}
  .wrap.has-rail>.rail{margin-top:0;position:sticky;top:24px}
}

/* ------------------------------------------------------------- dev banner */
.banner.stub{background:var(--dev);color:#fff}
.banner.stub .row{margin:0 auto;padding:4px 12px;max-width:none;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;flex-direction:row}
.banner.stub .tag{font-size:10.5px;letter-spacing:.06em;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-sm);padding:0 6px;flex:none;line-height:1.6}
.banner.stub .msg{font-size:11.5px;line-height:1.45;flex:1;min-width:0;border:0;padding:0;margin:0}

/* -------------------------------------------------------- synthetic banner */
/* Every page while the server runs as a demo (decisions.md A, 28 Sep). Ink on
   paper, inverted: not warm (private), not blue (shared), not red (the build),
   so it can only mean the deployment. It prints — see the print block. */
.synthetic{background:var(--color-text);color:var(--color-bg)}
.synthetic .row{margin:0 auto;padding:5px 16px;max-width:none;flex-direction:row;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.synthetic .tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:var(--radius-sm);padding:0 6px;flex:none;line-height:1.6}
.synthetic .msg{font-size:12.5px;line-height:1.45;flex:1;min-width:0;border:0;padding:0;margin:0}

/* ---------------------------------------------------------------- header */
.topbar{position:sticky;top:0;z-index:10;background:var(--color-bg);border-bottom:1px solid var(--color-divider)}
.shell{max-width:960px;margin:0 auto;padding:8px 20px}
.bar{display:flex;align-items:center;gap:4px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-heading);font-weight:600;font-size:19px;color:var(--color-text);text-decoration:none;margin-right:auto;padding:6px 0;min-height:44px}
a.brand:hover{color:var(--color-text)}
.brandmark{width:22px;height:22px;border:1.5px solid var(--color-accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none}
.brandmark span{width:9px;height:1.5px;background:var(--color-accent);display:block}
.nav{display:flex;align-items:center;gap:0}
.nav a{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--color-text);text-decoration:none;padding:10px 12px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--color-accent-700)}
.nav a.on{border-bottom-color:var(--color-accent)}
.nav a .nbadge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--color-accent-700);color:var(--color-bg);font-size:12px;font-weight:600;line-height:1}
.nav a svg.i{display:none}
.concern{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:6px;border-radius:var(--radius-md);color:var(--color-neutral-700);text-decoration:none}
.concern:hover{color:var(--color-accent-700);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.whoami{display:inline-flex;align-items:center;font-size:13px;color:var(--color-text);border:1px solid var(--color-divider);border-radius:999px;padding:5px 12px;margin-left:4px;white-space:nowrap}
.tools{display:flex;align-items:center;gap:2px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:40px;height:40px;padding:0 10px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-neutral-700);font:inherit;font-size:14px;cursor:pointer}
.theme-toggle:hover{color:var(--color-accent-700);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
/* Your devices borrows the switch's look (S18 Step 5): a link, so no underline. */
a.theme-toggle{text-decoration:none}
.theme-toggle .tlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Sign out (S18): a form only so it can POST; its button sits in the tools row
   as the theme switch does. */
.signout{display:contents}
/* The user menu (S22, html.ts userMenu()): theme, devices, sign out and the
   name chip in one disclosure. Wide, the summary is hidden and the contents
   sit where they always did, through ::details-content; a browser without it
   keeps the Menu button, which still opens. The phone rules are in the
   responsive block at the foot. */
details.usermenu{border:0;padding:0;position:relative}
details.usermenu>summary{min-height:40px;gap:6px}
details.usermenu>summary::before{display:none}
details.usermenu>summary .mlabel{font-size:14px}
.menu-items{display:flex;align-items:center;gap:2px}
@supports selector(::details-content){
  @media(min-width:721px){
    details.usermenu,details.usermenu::details-content,.menu-items{display:contents;content-visibility:visible}
    details.usermenu>summary{display:none}
  }
}

body.has-nav > .session-notes,body.has-nav > .lastsignin{grid-column:1 / -1}
/* The idle warning and the twelve-hour notice: hidden until session.js shows one. */
.session-notes{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;width:min(520px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;pointer-events:none}
.session-note{pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-divider);border-radius:var(--radius-md);box-shadow:0 8px 28px color-mix(in srgb,var(--color-text) 22%,transparent)}
.session-note[hidden]{display:none}
.session-note p{margin:0;line-height:1.5}
/* The one-shot "last signed in" line on the first page after sign-in. */
.lastsignin{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-bg));border-bottom:1px solid var(--color-divider);font-size:14px}
.lastsignin .shell{padding:10px 20px}
/* Your devices. */
.device-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.device{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.device.this{border-color:var(--color-accent)}
.device-out{margin-top:6px}

/* The menu is a column on the left from 721px up (24 Sep): brand at the top,
   the pages under it with their icons, and the concern shield, the theme
   switch and whose window this is at the foot. Pages with no nav (the landing
   and join pages) keep the plain top bar. Below 721px the phone layout below
   takes over and the nav is the bottom tab bar. */
@media(min-width:721px){
  body.has-nav{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
  body.has-nav > .banner,body.has-nav > .synthetic{grid-column:1 / -1}
  body.has-nav > .topbar{position:sticky;top:0;height:100vh;border-bottom:0;border-right:1px solid var(--color-divider);overflow-y:auto}
  body.has-nav > .topbar .shell{max-width:none;margin:0;padding:18px 12px;height:100%}
  body.has-nav > .topbar .bar{flex-direction:column;align-items:stretch;gap:0;height:100%}
  body.has-nav .brand{margin:0 0 18px;padding:6px 10px}
  body.has-nav .nav{flex-direction:column;align-items:stretch;gap:2px}
  body.has-nav .nav a{gap:12px;padding:10px 12px;border-bottom:0;border-radius:var(--radius-md);color:var(--color-neutral-700)}
  body.has-nav .nav a:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 6%,transparent)}
  body.has-nav .nav a.on{color:var(--color-text);background:color-mix(in srgb,var(--color-accent) 16%,transparent)}
  body.has-nav .nav a svg.i{display:block;flex:none;width:20px;height:20px}
  body.has-nav .nav a .nbadge{margin-left:auto}
  body.has-nav .tools{margin-top:auto;flex-direction:column;align-items:stretch;gap:2px;padding-top:12px;border-top:1px solid var(--color-divider)}
  body.has-nav .concern,body.has-nav .theme-toggle{width:auto;margin:0;justify-content:flex-start;gap:12px;padding:0 12px;height:42px}
  body.has-nav .concern .vh,body.has-nav .theme-toggle .tlabel{position:static !important;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  body.has-nav .whoami{align-self:flex-start;margin:8px 0 0 10px}
}

/* -------------------------------------------------------------------- type */
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--color-text);letter-spacing:-.01em}
h1{font-size:clamp(30px,5vw,40px);line-height:1.12;font-weight:400;text-wrap:balance;margin-top:26px}
h1.hero{font-size:clamp(36px,7vw,50px);line-height:1.08}
h2{font-size:26px;line-height:1.2;font-weight:400;margin-top:28px}
h3{font-size:19px;line-height:1.3;font-weight:600;margin-top:20px}
:where(h1,h2,h3):first-child{margin-top:0}
.zlabel + :where(h1,h2,h3){margin-top:0}
p{margin-top:10px;font-size:16px;color:var(--color-text)}
.lead{font-size:18px}
.muted{color:var(--color-neutral-700)}
.kicker{font-family:var(--font-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin-bottom:12px}
.meta{font-size:15px;color:var(--color-neutral-800)}
.meta b{color:var(--color-text)}
.subgrey{font-size:14px;color:var(--color-neutral-700)}
.subnote{font-size:14px;color:var(--color-neutral-700)}
.stack{display:flex;flex-direction:column;gap:12px}

/* ------------------------------------------------------------- stage rail */
/* The step count of a flow, as the design draws it: a line of text naming the
   current step, then one 3px segment per step. Done and current are the
   private line colour, because every flow that carries a rail is a private one. */
.stagerail-current{display:block;font-size:14px;color:var(--color-neutral-700);margin-top:18px}
.stagerail-current::before{content:"Step "}
.stagerail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:10px;padding:0}
.stagerail .step{height:3px;border-radius:2px;background:var(--color-neutral-300);font-size:0;line-height:0;color:transparent;overflow:hidden;white-space:nowrap}
.stagerail .step.current,.stagerail .step.done{background:var(--pv-line)}

/* ----------------------------------------------------------------- zones */
/* Private: a paper card, a warm edge, a lock on the label. Shared: blue
   fill, a blue edge, the two-people mark. The warm fill was the whole form's
   ground and read as a stain in both themes; it is kept only for highlights. html.ts zone() puts the icon
   inside .zlabel before the words. */
.zone{padding:18px 20px;border-radius:var(--radius-lg);margin-top:18px}
.zone.private{background:var(--paper);border:1px solid var(--pv-edge);box-shadow:var(--shadow-sm)}
.zone.shared{background:var(--sh-bg);border:1px solid var(--sh-line)}
.zlabel{display:flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:13px;line-height:1.4;margin-bottom:12px}
.zone.private .zlabel{color:var(--pv-ink)}
.zone.shared .zlabel{color:var(--sh-ink)}
.zone p{font-size:16px;line-height:1.55}
.zone .serif{font-size:17px;line-height:1.55;color:var(--color-text)}
.zone.private textarea,.zone.private input[type=text],.zone.private select{background:var(--color-bg);border:1px solid var(--color-divider)}
.zone.private textarea:focus-visible,.zone.private input[type=text]:focus-visible,.zone.private select:focus-visible{border-color:var(--color-accent);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 22%,transparent)}
.zone.private .actions-sticky{background:var(--paper)}


/* The quiet private tier: same promise, one tier down. A state with nothing
   to decide gets a warm left rule and the label, not the full box. */
.zone.private.quiet{background:transparent;box-shadow:none;border:0;border-left:2px solid var(--pv-edge);border-radius:0;padding:2px 0 2px 16px;margin-top:24px}
.zone.private.quiet .zlabel{margin-bottom:5px}
.zone.private.quiet :where(h2,h3){font-family:var(--font-body);font-size:16px;line-height:1.45;font-weight:600;margin-top:0;letter-spacing:0}
.zone.private.quiet p{font-size:15px}
.zone.private.quiet details{margin-top:14px}

/* The third kind (S14): a party's own words, sent to their own solicitor and
   to nobody else. It must not read as either of the two above — the private
   card promises that nothing in it has left the reader, and the blue band
   promises the other party can see it — so it borrows the paper ground and
   takes a dashed edge and neutral ink: the same paper, visibly opened. The
   briefcase on the label is html.ts zone()'s, inside .zlabel before the
   words, like the lock and the two-people mark. */
.zone.lawyer-only{background:var(--paper);border:1px dashed var(--pv-edge);box-shadow:var(--shadow-sm)}
.zone.lawyer-only .zlabel{color:var(--color-neutral-700)}
.zone.lawyer-only .mono{font-size:16px}
/* The two S14 screens show words nothing rewrites, so nothing reflows them
   either: a blank line the author left is a blank line, and leading spaces
   stay. .mono alone collapses both, which on a screen whose whole claim is
   "word for word" would be the page quietly editing the words. */
.exactwords{font-family:var(--font-body);font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.exactsend{margin-top:20px;padding-top:18px;border-top:1px solid var(--color-divider)}
.exactsend:first-of-type{margin-top:0;padding-top:0;border-top:0}

/* The two small labels a block carries when it is not a whole zone:
   privateLabel() and sharedLabel() in html.ts. */
.plabel{display:inline-flex;align-items:center;gap:7px;font-size:13px;line-height:1.4}
.plabel.pv{color:var(--pv-ink)}
.plabel.sh{color:var(--sh-ink)}
.pv-box,.sh-box{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;border-radius:var(--radius-lg);color:var(--color-text)}
.pv-box{background:var(--paper);border:1px solid var(--pv-edge)}
.sh-box{background:var(--sh-bg);border:1px solid var(--sh-line)}

.threshold{display:flex;align-items:center;gap:10px;margin:22px 0}
.threshold span.rule{flex:1;height:1px;background:var(--sh-line)}

/* ----------------------------------------------------------------- chips */
/* A status is an icon and words (html.ts chip()), never colour alone. */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:14px;line-height:1.35;color:var(--color-neutral-700)}
.chip.unavailable span.txt{border-bottom:1px solid var(--color-neutral-500);padding-bottom:1px}

/* ----------------------------------------------------------- state tones */
/* S22: one class per tone sets three local properties, and every toned thing
   (the status pill, the stepper, the compact dots) reads those. A new toned
   component needs no new colour rules. */
.tone-agreed{--t-bg:var(--tone-agreed-bg);--t-ink:var(--tone-agreed-ink);--t-line:var(--tone-agreed-line)}
.tone-differs{--t-bg:var(--tone-differs-bg);--t-ink:var(--tone-differs-ink);--t-line:var(--tone-differs-line)}
.tone-waiting{--t-bg:var(--tone-waiting-bg);--t-ink:var(--tone-waiting-ink);--t-line:var(--tone-waiting-line)}
.tone-private{--t-bg:var(--tone-private-bg);--t-ink:var(--tone-private-ink);--t-line:var(--tone-private-line)}
.tone-shared{--t-bg:var(--tone-shared-bg);--t-ink:var(--tone-shared-ink);--t-line:var(--tone-shared-line)}
/* The status chip as a filled pill in its tone, icon first. Wins over the
   older page rules that set a chip's colour, so a chip reads the same on Home,
   the topic header, the lawyer's board and the sheet. */
.chip[class*="tone-"]{background:var(--t-bg);color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-line) 45%,transparent);border-radius:13px;padding:2px 11px 2px 8px;font-weight:500;max-width:100%}
.chip[class*="tone-"] svg.i{color:var(--t-ink)}

/* --------------------------------------------------------------- stepper */
/* render/stepper.ts. Five steps on a line: a dot and a word each, joined by a
   rule. Done steps are filled in the tone, the current one is ringed in it
   with the status's icon, upcoming ones are hollow grey. Words under the dots
   when the bar has room; in a narrow container (a phone, the right rail) the
   words leave the screen, staying in the DOM for a screen reader, and one
   line under the dots says where the topic is (.stepper-now, aria-hidden,
   since the current step already says it). A container query, not a media
   query, so the same bar works in the rail at desktop width. */
.stepper{container-type:inline-size;margin-top:14px}
.stepper-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.stepper ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:1 1 360px;min-width:0;padding:0;margin:0}
.stepper .step{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font-size:13px;line-height:1.3;color:var(--color-neutral-700);margin:0;min-width:0}
.stepper .step::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:var(--color-neutral-300)}
.stepper .step:first-child::before{display:none}
.stepper .step.done::before,.stepper .step.current::before{background:var(--t-line)}
.stepper .dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--color-neutral-400);background:var(--color-bg);color:var(--t-ink)}
.stepper .step.done .dot{background:var(--t-line);border-color:var(--t-line)}
.stepper .step.done .tick{width:9px;height:5px;border-left:2px solid var(--color-bg);border-bottom:2px solid var(--color-bg);transform:rotate(-45deg) translate(1px,-1px)}
.stepper .step.current .dot{background:var(--t-bg);border-color:var(--t-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-line) 25%,transparent)}
.stepper .step.current .lbl{color:var(--t-ink);font-weight:600}
.stepper .lbl{overflow-wrap:normal}
.stepper-now{display:none;margin-top:6px;font-size:14px;font-weight:600;color:var(--t-ink)}
.stepper.outside .dot{border-style:dashed}
.stepper-note{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--t-ink);background:var(--t-bg);border-radius:999px;padding:2px 11px 2px 8px}
/* Compact: dots only and one label, for a list row. */
.stepdots{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:1.3;color:var(--t-ink)}
.stepdots .dots{display:inline-flex;gap:3px}
.stepdots .d{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--color-neutral-400)}
.stepdots .d.done{background:var(--t-line);border-color:var(--t-line)}
.stepdots .d.current{background:var(--t-bg);border-color:var(--t-line);box-shadow:0 0 0 2px color-mix(in srgb,var(--t-line) 30%,transparent)}
.stepdots.outside .d{border-style:dashed}
/* The turn marker: per-reader words the caller passes, never computed here. */
.turn{display:inline-flex;align-items:center;font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap}
.turn-yours{background:var(--pv-bg);color:var(--pv-ink);border:1px solid var(--pv-edge)}
.turn-waiting{background:transparent;color:var(--color-neutral-700);border:1px solid var(--color-divider)}
@container (max-width:479px){
  .stepper .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .stepper-now{display:block}
}

/* ------------------------------------------------------------- help note */
/* html.ts helpNote(): a "?" that opens to the explanation it holds. Closed it
   is one inline icon; open, the words sit under the line as a quiet note. */
details.help{display:inline-block;vertical-align:middle;border:0;padding:0;margin:0 0 0 4px}
details.help>summary{display:inline-flex;align-items:center;justify-content:center;min-height:0;width:28px;height:28px;padding:0;border-radius:50%;color:var(--color-neutral-700)}
details.help>summary::before{display:none}
details.help>summary:hover{color:var(--color-accent-700);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
details.help[open]{display:block;margin:6px 0 0}
details.help[open]>summary{color:var(--color-accent-700)}
details.help .help-body{margin-top:4px;font-size:14px;line-height:1.5;color:var(--color-neutral-800);border-left:2px solid var(--color-divider);padding:2px 0 2px 12px}
details.help .help-body>:first-child{margin-top:0}
details.help .help-body p{font-size:14px}
@media print{
  details.help::details-content{content-visibility:visible;display:block}
  details.help>summary{display:none}
}

/* -------------------------------------------------------- lists and cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.category{font-family:var(--font-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin:28px 0 4px}
/* The design's list row: full width, a hairline under it, the title at 17px
   and its status under it at 14px. */
.row-link,.issue{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:16px 2px;min-height:68px;border-bottom:1px solid var(--color-divider);color:inherit;text-decoration:none;background:transparent}
.row-link:hover,.issue:hover{color:inherit;background:color-mix(in srgb,var(--color-text) 3%,transparent)}
.row-link .t,.issue .t{font-family:var(--font-body);font-size:17px;color:var(--color-text);flex:1;min-width:0}
.row-link .s{font-size:14px;color:var(--color-neutral-700);display:flex;align-items:center;gap:6px}
.issue .t .sub{display:block;font-size:14px;color:var(--color-neutral-700);margin-top:2px}
.issue.errcard{border-bottom:1px solid var(--color-neutral-500)}
.module{background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:16px 18px;margin-top:16px}
.module h3{margin-bottom:8px}
.paper{background:var(--paper);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);padding:22px 24px}

/* ------------------------------------------------- what two positions differ about */
.dims{list-style:none;margin-top:14px}
.dims>li{border-top:1px solid var(--color-divider);padding-top:12px;margin-top:12px}
.dims>li:first-child{border-top:0;padding-top:0;margin-top:0}
.dname{font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--color-text)}
.dq{list-style:none;margin-top:8px}
.dq>li{display:flex;gap:10px;align-items:baseline;margin-top:6px}
.dq .who{font-size:13px;color:var(--sh-ink);flex:none;min-width:78px}
.dq .serif{font-size:16px;line-height:1.5;color:var(--color-text)}
.mech{border-top:1px solid var(--color-divider);padding-top:14px;margin-top:14px}

/* --------------------------------------------------------------- buttons */
/* Classical's btn-primary at the design's sizes: an accent outline, heading
   face, 48px tall. ghost is btn-secondary, link is btn-ghost. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:17px;line-height:1.2;min-height:48px;padding:0 22px;color:var(--btn-ink);background:transparent;border:1px solid var(--color-accent);border-radius:var(--radius-md);text-align:center}
.btn:hover{color:var(--btn-ink);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.btn:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.btn svg{display:block}
.btn.ghost{color:var(--color-text);border-color:var(--color-divider)}
.btn.ghost:hover{color:var(--color-text);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn.link{color:var(--btn-ink);border-color:transparent;padding-inline:4px}
.btn.link:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.btn.sm{min-height:40px;font-size:15px;padding:0 14px}
.btn.lg{min-height:56px;font-size:19px;padding:0 28px}
.btn.full{width:100%}
/* A screen's one main action — the large full-width button, or the button in a
   private card's sticky action row — is filled, not outlined. */
.btn.lg.full:not(.ghost):not(.link),.zone.private .actions-sticky .btn:not(.ghost):not(.link){background:var(--btn-solid-bg);border-color:var(--btn-solid-bg);color:var(--btn-solid-ink)}
.btn.lg.full:not(.ghost):not(.link):hover,.zone.private .actions-sticky .btn:not(.ghost):not(.link):hover{background:var(--btn-solid-bg-hover);border-color:var(--btn-solid-bg-hover);color:var(--btn-solid-ink)}
/* The wizard's Share, filled as on the topic page (audit, 15 Oct: one review pattern). */
.flow .zone.shared form .btn:not(.ghost):not(.link){background:var(--btn-solid-bg);border-color:var(--btn-solid-bg);color:var(--btn-solid-ink)}
.flow .zone.shared form .btn:not(.ghost):not(.link):hover{background:var(--btn-solid-bg-hover);border-color:var(--btn-solid-bg-hover);color:var(--btn-solid-ink)}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover,.btn.disabled:hover{background:transparent}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.actions-sticky{position:sticky;bottom:0;z-index:5;background:var(--color-bg);padding:12px 0 20px}

/* ---------------------------------------------------------------- forms */
textarea,input[type=text],input[type=search],select{width:100%;font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--color-text);caret-color:var(--color-accent);background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-md);min-height:48px;padding:10px 14px}
textarea:hover,input[type=text]:hover,input[type=search]:hover,select:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
textarea:focus-visible,input[type=text]:focus-visible,input[type=search]:focus-visible,select:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea{min-height:150px;resize:vertical}
select{width:auto;max-width:100%}
label{display:block;font-size:14px;color:var(--color-neutral-700);margin-top:20px;margin-bottom:8px}
.choices{display:grid;gap:10px;margin-top:14px}
.choice{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 18px;margin:0;cursor:pointer;font-size:17px;color:var(--color-text);background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.choice:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.choice.on,.choice:has(input:checked){border-color:var(--color-accent);color:var(--color-accent-700);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.choice input,.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choice:has(input:focus-visible),.pick label:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
.pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pick label{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;min-height:44px;padding:0 16px;border:1px solid var(--color-divider);border-radius:999px;background:transparent;cursor:pointer;font-size:15px;color:var(--color-text)}
.pick label:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.pick label:has(:checked){border-color:var(--color-accent);color:var(--color-accent-700);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
/* The add-line form's sold choice follows the checked section, with no script
   (sheet.ts, addLineForm): a debt reads "Paid out of the sale proceeds", and
   superannuation has no sold choice. The router refuses the pair regardless. */
.addline .sold-debt,.addline .super-sold{display:none}
.addline:has(option[value=liabilities]:checked) .sold-debt{display:inline}
.addline:has(option[value=liabilities]:checked) .sold-asset{display:none}
.addline:has(option[value=superannuation]:checked) .keep-sold{display:none}
.addline:has(option[value=superannuation]:checked):has(input[name=keep][value=sold]:checked) .super-sold{display:block}
/* A topic about a balance-sheet line (S11 D6). The wizard's select is hidden while a category other than
   Property is picked; a browser without :has() shows it always, and the server drops the slot on a
   non-property topic either way. */
.about-line{margin-top:4px}
form:has(input[name=category]:checked:not([value=property])) .about-line{display:none}
.check{display:flex;align-items:flex-start;gap:12px;border-top:1px solid var(--color-divider);padding-top:16px;margin-top:16px;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--color-accent)}
.check span{font-size:16px;line-height:1.5;color:var(--color-text)}

/* --------------------------------------------------------------- callouts */
.callout{border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:transparent;padding:16px 18px;margin-top:16px}
.callout b{color:var(--color-text)}
.callout.ok,.callout.notice{background:var(--sh-bg);border:1px solid var(--sh-line)}
.foot-accent{border-left:2px solid var(--color-accent);padding-left:14px;margin-top:16px;font-size:15px;line-height:1.6;color:var(--color-neutral-800)}
/* Who reads a wording once it crosses, and the one check before it does:
   the block directly above every approve button that sends a reworded text. */
.audience{border-left:2px solid var(--color-accent);padding-left:14px;margin-top:16px}
.audience p{margin:0;font-size:15px;line-height:1.6}
.audience .audience-who{color:var(--color-text)}
.audience .audience-check{margin-top:6px;color:var(--color-neutral-800)}
.problem{margin-top:16px;border:1px solid var(--color-accent-600);border-radius:var(--radius-lg);background:transparent;padding:14px 16px;color:var(--color-text)}
.problem b{color:var(--color-text)}

/* ------------------------------------------------------------ clauses */
/* A clause is a sheet of paper: document white, a hairline, a small shadow,
   the words in the heading face. The AI-drafted label is body text under it. */
.clause{margin-top:16px;background:var(--paper);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);padding:22px 24px 16px}
.clause.ph{background:transparent;box-shadow:none;border:1px solid var(--color-neutral-500);color:var(--color-neutral-700)}
.clause .ch{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:flex-start}
.clause .ct{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--color-text)}
.clause .body{font-family:var(--font-heading);font-size:19px;line-height:1.5;text-align:left;white-space:pre-wrap;margin-bottom:6px;color:var(--color-text)}
.clause.ph .body{color:var(--color-neutral-700)}
.draftlbl{font-family:var(--font-body);font-size:12px;color:var(--color-neutral-700);margin-top:12px}
.draftlbl.blue{color:var(--sh-ink)}
.clause>.draftlbl{border-top:1px solid var(--color-divider);padding-top:10px}
.prov{display:inline-flex;align-items:center;font-size:12px;padding:3px 10px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-800);white-space:nowrap}
.stamp{margin-top:14px;font-size:14px;color:var(--pv-ink);background:var(--paper);border:1px solid var(--pv-edge);border-radius:var(--radius-lg);padding:10px 14px}
.divider{border-top:1px solid var(--color-divider);padding-top:16px;margin-top:16px}
/* One entry per asset in the working agreement (S11 D5): the line's heading, then its sub-clauses indented under it. */
.asset{margin-top:22px;border-top:1px solid var(--color-divider);padding-top:14px}
.asset>.ch{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.asset>.ch .ct{font-family:var(--font-heading);font-size:21px;font-weight:600;color:var(--color-text)}
.asset .clause{margin-left:18px}

/* ---------------------------------------------------------------- redlines
   A solicitor's proposed wording, drawn against the clause it would replace.
   del and ins carry both a colour and a shape — a strike and an underline —
   so a reader who cannot tell the colours apart still reads the change. */
.redlines{border-top:1px solid var(--color-divider);margin-top:16px;padding-top:4px}
.redline{border-left:2px solid var(--sh-line);padding:2px 0 2px 14px;margin-top:14px}
.redline.stale{border-left-color:var(--color-divider);color:var(--color-neutral-700)}
/* On a party's own review screen the rule turns the private colour: the block
   sits inside a private zone, and a shared-coloured edge would say the diff
   had crossed. What crosses is the rewrite, once they approve it. */
.redline.own{border-left-color:var(--pv-line)}
.whatchanged{border-top:none;padding-top:0;margin-top:10px}
.whatchanged summary{font-size:14px;color:var(--pv-ink)}
.redline .diff{font-family:var(--font-body);font-size:16px;line-height:1.75;margin-top:6px;white-space:pre-wrap}
.redline del{text-decoration:line-through;text-decoration-thickness:1px;color:var(--color-neutral-600)}
.redline ins{text-decoration:underline;text-decoration-color:var(--color-neutral-700);text-underline-offset:3px;color:var(--color-text);font-weight:600;background:var(--pv-bg)}
mark{background:var(--mark-bg);box-shadow:0 0 0 2px var(--mark-bg);border-bottom:1px solid var(--pv-ink);color:inherit}
.anchor{font-size:14px;color:var(--color-neutral-700);margin-top:4px}
.anchor.stale{font-style:italic}
.proposebox{margin-top:16px}
.blockers{margin:8px 0 0 18px;font-size:15px;color:var(--color-neutral-800)}
.blockers li{margin-top:4px}
.proposebox summary{font-size:15px;color:var(--sh-ink)}

/* One message in the thread. The two senders are told apart by a small label,
   never by side or by a bubble: in this product they never talk to each other. */
.msg{border-top:1px solid var(--color-divider);padding-top:14px;margin-top:14px}
.msg:first-child{border-top:0;padding-top:0;margin-top:0}
.msg .who{font-size:13px;color:var(--color-neutral-700)}
.msg.mine .who{color:var(--sh-ink)}
.msg .serif{margin-top:6px}
.msg.resolved{opacity:.55}
.comments{margin-top:34px;border-top:1px solid var(--color-divider);padding-top:20px}
.comments h2{margin-top:0}
.comments .stream{margin-top:12px}

.apr{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;align-items:center}
.apr .albl{font-size:13px;color:var(--color-neutral-700);margin-right:2px}
.aprchip{font-size:12px;padding:3px 10px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-800)}
.aprchip.ok{background:transparent;border:1px solid var(--color-accent);color:var(--btn-ink)}

.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--color-text);font-size:15px;text-decoration:none;min-height:44px}
.backlink:hover{color:var(--color-accent-700)}
.titlerow{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}

/* ------------------------------------------------------------- disclosure */
/* The composer is folded away in every state where writing is not the task.
   It stays one click deep and on the page. The chevron is a drawn border, not
   an icon file, so it needs no url(). */
details{border-top:1px solid var(--color-divider);padding-top:14px}
details.module{border-top:1px solid var(--color-divider)}
details summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;color:var(--color-text);list-style:none;padding:4px 0;min-height:36px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;margin-left:2px}
details[open]>summary::before{transform:rotate(45deg)}
details summary:hover{color:var(--color-accent-700)}
/* Still to settle (23 Oct): the matched sentence once, with numbered markers,
   and one native disclosure per question behind it. */
.gap-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.gap-head h3{margin-top:0;margin-bottom:0}
.gap-count{flex:none;font-size:14px;color:var(--color-neutral-700)}
.gap-sentence{margin-top:14px;font-size:18px;line-height:1.6;overflow-wrap:anywhere}
/* The house highlight (the global mark rule), a little apart from its neighbour. */
.gap-sentence mark{padding:0 2px;margin:0 1px}
.gap-marks{font-size:.7em;line-height:0;margin-left:2px;white-space:nowrap}
/* Inline, not inline-block: a block-ish marker is a place the line may break,
   and the number would wrap away from its phrase. The padding is the touch target. */
.gap-mark{display:inline;padding:.5em .3em;font-weight:600;color:var(--color-accent-700);text-decoration:none}
ol.gaps{list-style:none;padding:0;margin-top:14px}
ol.gaps>li{margin:0}
details.gap{border-top:1px solid var(--color-divider);padding:0;scroll-margin-top:12px}
ol.gaps>li:last-child>details.gap:not([open]){border-bottom:1px solid var(--color-divider)}
details.gap:target>summary{color:var(--color-accent-700)}
.gap>summary{align-items:flex-start;gap:10px;padding:12px 0;min-height:52px}
.gap>summary::before{margin-top:.55em}
.gap .num{font-size:12px;color:var(--color-neutral-700);border:1px solid var(--color-divider);border-radius:999px;padding:0 8px;flex:none;margin-top:.25em}
.gap .gap-q{flex:1;min-width:0;font-size:16px;overflow-wrap:anywhere}
.gap .gap-state{flex:none;max-width:7.5em;margin-top:.2em;text-align:right;font-size:13px;line-height:1.3;color:var(--color-neutral-700)}
.gap .gap-state.turn{color:var(--color-accent-700);font-weight:600}
.gap-body{padding:0 0 14px 34px}
.gap-body>*+*{margin-top:10px}
.gap-body .row{margin-top:12px}
.gap-why .serif{color:var(--color-text)}
details.gap-sample{border-top:0;padding:0}
details.gap-sample>summary{font-size:14px;color:var(--color-neutral-700);min-height:36px}
.gap-sample .gap-option{margin-top:8px;font-size:16px;line-height:1.5;border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:12px 16px}
.gap-sample .subnote{margin-top:6px}
.gap-sample .row{margin-top:10px}
.gap-actions details.gap-answer[open]{flex-basis:100%}
details.gap-answer{border-top:0;padding:0}
details.gap-answer>summary{display:inline-flex;justify-content:center;font-family:var(--font-heading);font-weight:600;font-size:17px;min-height:48px;padding:0 22px;color:var(--btn-ink);border:1px solid var(--color-accent);border-radius:var(--radius-md)}
details.gap-answer>summary::before{display:none}
details.gap-answer>label{display:block;margin-top:12px;font-weight:600;font-size:15px}
details.gap-answer>.subnote{margin-top:4px}
details.gap-answer>textarea{min-height:96px;margin-top:6px}
.answer-put .btn{min-height:40px;padding:0 16px;margin-left:8px;font-size:15px}
ul.opts{list-style:none;padding:0;margin-top:10px}
ul.opts>li.opt{margin-top:8px}
ul.opts .btn.opt{display:block;width:100%;text-align:left;font-family:var(--font-body);font-weight:400;padding:12px 16px;color:var(--color-text);border-color:var(--color-divider)}
ul.opts .btn.opt:hover{border-color:var(--color-accent)}
ul.opts .btn.opt .serif{font-size:16px;line-height:1.5}
ul.opts p.serif{font-size:16px;line-height:1.5;border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:12px 16px}
.origin{font-size:13px;color:var(--color-neutral-700);margin:4px 0 0 16px}
details.why{margin:6px 0 10px}
details.why summary{font-size:14px;color:var(--color-neutral-700)}
details.why .dq{margin-top:6px}

/* ------------------------------------------------------------------ update */
/* Inserted by the poll when the shared state actually changed. */
.updated{font-size:14px;color:var(--sh-ink);background:color-mix(in srgb,var(--sh-line) 10%,var(--color-bg));border-radius:var(--radius-md);padding:10px 14px;margin:0 0 18px}

/* --------------------------------------------------------------- progress */
.progress{height:3px;background:var(--color-divider);border-radius:2px;overflow:hidden}
.progress span{display:block;height:100%;width:38%;background:var(--sh-line);animation:etSlide 1.5s ease-in-out infinite}
@keyframes etSlide{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}
@media (prefers-reduced-motion: reduce){ .progress span{animation:none;width:100%;opacity:.5} }

/* --------------------------------------------------------- balance sheet */
/* One line on the sheet: name and status on one row, provenance under it, then
   the two value cells side by side, stacking at phone width. The status pill
   is text in a tag: agreed, differs and awaiting are separable in greyscale. */
.ssec{margin-top:24px}
.ssec:first-child{margin-top:0}
.ssec h3{font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);border-bottom:1px solid var(--color-divider);padding-bottom:6px;margin:0 0 4px}
.sline{border-bottom:1px solid var(--color-divider);background:transparent;padding:14px 2px;margin-top:0}
.sline-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.sline .dname{font-family:var(--font-body);font-size:17px;font-weight:400;margin:0}
.pill{display:inline-flex;align-items:center;font-size:12px;padding:3px 10px;border-radius:3px;background:var(--color-neutral-100);color:var(--color-neutral-800);white-space:nowrap}
.pill.agreed{background:transparent;border:1px solid var(--color-accent);color:var(--btn-ink)}
.pill.differs{background:var(--color-accent-100);color:var(--color-accent-800)}
.pill.awaiting{background:transparent;border:1px solid var(--color-neutral-500);color:var(--color-neutral-700)}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.val{border-top:1px solid var(--color-divider);padding-top:8px}
.val.own{border-top-color:var(--sh-line)}
.val .who,.tcol .draftlbl{font-size:13px;color:var(--color-neutral-700);display:block;margin-top:0}
.val .amt{font-family:var(--font-heading);font-size:22px;color:var(--color-text);display:block;margin-top:2px}
.sline.leftoff{color:var(--color-neutral-800)}
.sline.leftoff .dname{color:var(--color-neutral-800)}
.sline-act{margin-top:12px}
.sline details{border-top:1px solid var(--color-divider);padding-top:10px;margin-top:10px}
.halfway{border-top:1px solid var(--color-divider);margin-top:14px;padding-top:12px}
.halfway.topic-halfway{margin-top:16px}
.amountbox{margin-top:16px}
.amountbox .subnote{margin-top:8px}
.amountgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}
.amountgrid label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--color-neutral-700)}
.amountline{margin-top:6px}
/* An adopted proposal, quoted as its author's words (6 Oct). Pseudo-elements, so a selection quoting the text never picks the marks up. */
.quoted::before{content:'“'}
.quoted::after{content:'”'}
.skeep{border-top:1px solid var(--color-divider);margin-top:14px;padding-top:2px}
.stopics{border-top:1px solid var(--color-divider);margin-top:14px;padding-top:2px}
.stopics .tlist{display:grid;gap:6px;margin-top:6px}
.stopics .tlist a{display:flex;justify-content:space-between;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:16px}
.val .amt.keepw{font-family:var(--font-body);font-size:16px}
.stotals .sline-head h3{margin:0}
.stotals{border-top:2px solid var(--color-text);margin-top:26px;padding-top:14px}
.stotals h3{margin:0}
.tcol .trow{display:flex;justify-content:space-between;gap:12px;font-size:15px;margin-top:6px;color:var(--color-neutral-800)}
.tcol .trow.net{color:var(--color-text);font-weight:600;border-top:1px solid var(--color-divider);padding-top:6px}
.tcol .trow .amt{font-feature-settings:"tnum"}

/* ------------------------------------------------------ working agreement */
/* The draft label is body text, not chrome: it is in the flow at the top and
   the bottom so it prints and copies with the clauses. */
.draftlabel{font-family:var(--font-body);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);border-bottom:1px solid var(--color-divider);padding:0 0 10px;margin-top:16px;background:transparent}
.part{margin-top:34px}
.part h2{border-bottom:1px solid var(--color-divider);padding-bottom:8px}
.clause .ct .num{font-family:var(--font-body);font-size:14px;color:var(--color-accent-700);margin-right:6px}
.chips .pill{font-size:11px}
.ph-inline{color:var(--color-neutral-700);border-left:2px solid var(--color-neutral-500);padding-left:12px}
body.document main{padding-top:24px}

/* ===== group:entry ===== */
/* Entry, set-up, safety and system pages (design screens 01, 03, 04, 05, 12
   engage, 13, 17). All single-column: the narrow measure, big type, one
   full-width primary at the bottom. Landing and invite carry the brand in
   their own column, so the top bar goes on those two pages only. */
body:has(.entry-landing) .topbar,body:has(.entry-invite) .topbar{display:none}
.entry{display:flex;flex-direction:column}
.entry>h1{margin-top:0}
.entry-landing,.entry-invite{padding-top:16px;gap:32px}
.entry-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:600;font-size:20px}
.entry-brand .brandmark{width:24px;height:24px}
.entry-brand .brandmark span{width:10px}
.entry h1.hero{margin:0;font-weight:400}
.entry-invite h1.hero{font-size:clamp(32px,6vw,44px);line-height:1.1}
.entry-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;font-size:18px}
.entry-points li{display:flex;gap:14px;align-items:center;margin:0}
.entry-points svg.i{flex:none}
.entry-points .pv svg.i{color:var(--pv-line)}
.entry-points .ac svg.i{color:var(--color-accent)}
.entry-points .sh svg.i{color:var(--sh-line)}
.entry-steps{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:12px;font-size:18px}
.entry-steps li{margin:0}
.entry-legal{margin:0;font-size:15px;color:var(--color-neutral-800)}
.entry-go{display:flex;flex-direction:column;gap:12px;margin:8px 0 0}
.entry-cap{text-align:center;font-size:14px;color:var(--color-neutral-700)}
.entry-cap.pv{color:var(--pv-ink)}
.entry-email{margin:0;text-align:center;font-size:15px;color:var(--color-neutral-800)}
.entry-notices h2{margin:0 0 -20px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)}
.entry-note{margin:0;font-size:14px;line-height:1.5;color:var(--color-neutral-700)}
.entry-landing .entry-note,.entry-invite .entry-note{margin-top:-20px}
.entry-landing .entry-note+.entry-note,.entry-invite .entry-note+.entry-note{margin-top:-24px}
/* Audit, 15 Oct: the brand row carries the theme switch on the pages that hide the top bar. */
.entry-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.entry-head .entry-theme{margin-right:0}
.entry-front .lead{margin:-12px 0 0}
.entry-helpline{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--color-neutral-800)}
.entry-helpline a{color:inherit}
.entry-matters li{flex-wrap:wrap;gap:4px 12px;font-size:17px}
.entry-matters .subgrey{font-size:14px}
.entry-matters .entry-remove{font-size:14px;color:var(--color-neutral-700);margin-left:auto}
.entry-sent-link,.entry-invite-waiting{margin:0}
.entry .notice{margin:0;font-size:15px;color:var(--sh-ink);background:color-mix(in srgb,var(--sh-line) 10%,var(--color-bg));border-radius:var(--radius-md);padding:10px 14px}
.entry-invite-waiting{display:flex;flex-direction:column;gap:12px}
.entry-invite-waiting p{margin:0}
.entry-go .btn.ghost{align-self:stretch}
.entry-notices h2{margin:0 0 -20px}
.entry-notices > p:not(.lead):not(.entry-note){margin:0;line-height:1.6}
.entry-notices > p:not(.entry-note) + p:not(.entry-note){margin-top:-16px}
.entry-more{margin:0;font-size:14px;color:var(--color-neutral-700)}
.entry-more summary{font-size:14px;color:var(--color-neutral-700)}
.entry-more p{font-size:14px;line-height:1.55;margin-top:8px}
.entry-more h2{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-neutral-800);margin-top:16px}

/* 04 Safety check: the private zone is the whole page, so it loses its box
   and keeps its label, which sits in the top row opposite the count. The
   segmented bar replaces the set-up rail visually; the rail stays in the
   markup. */
.entry-safety .stagerail,.entry-safety .stagerail-current,.entry-done .stagerail,.entry-done .stagerail-current{display:none}
.entry-safety>.zone.private,.entry-concern>.zone.private{position:relative;background:transparent;box-shadow:none;border:0;border-radius:0;padding:0;margin-top:0}
.entry-safety .zlabel{margin-bottom:10px;padding-right:118px}
.entry-count{position:absolute;top:0;right:0;font-size:14px;line-height:1.4;color:var(--color-neutral-700);font-variant-numeric:tabular-nums}
.entry-segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.entry-segs span{height:3px;border-radius:2px;background:var(--color-neutral-300)}
.entry-segs span.on{background:var(--pv-line)}
.entry-safety h1{font-size:clamp(28px,5vw,36px);line-height:1.2;font-weight:400;margin-top:28px}
.entry-safety .choices{margin-top:28px}
.entry-safety .choice{min-height:60px;font-size:19px;justify-content:center;text-align:center}
.entry-told{margin-top:24px;font-size:14px;color:var(--color-neutral-700)}
.entry-backnext{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:20px}
.entry-backnext.solo{grid-template-columns:1fr}
.entry-backnext .btn{min-height:56px}
.entry-backnext .btn.ghost{padding:0 22px;font-size:17px}
.entry-placeholder{margin-top:20px;padding:12px 14px}
.entry-placeholder h3{font-family:var(--font-body);font-size:13px;font-weight:600;margin:0;color:var(--color-neutral-700)}
.entry-placeholder p{font-size:14px;line-height:1.5;margin-top:4px;color:var(--color-neutral-700)}

/* 05 Set-up finished, 12 engage */
.entry-done{padding-top:40px;gap:20px}
.entry-done h1{font-size:44px;line-height:1.1;margin:0}
.entry-done .lead,.entry-engage .lead{margin:0}
.entry-done .meta,.entry-engage .meta{margin:0}
.entry-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.entry-engage{padding-top:8px;gap:22px}
.entry-engage h1{font-size:36px;margin:0}
.entry-warn{margin:0;font-size:16px;color:var(--color-neutral-800)}
.entry-notnow{align-self:center}

/* 13 Private concern */
.entry-concern .backlink{align-self:flex-start;margin-bottom:12px}
.entry-concern h1{font-size:36px;margin-top:6px}
.entry-sys-lead{font-size:17px;margin-top:14px}
.entry-concern .choices{margin-top:22px}
.entry-concern .choice{min-height:56px;font-size:17px}
.entry-note-field{display:block;margin-top:14px}
.entry-concern textarea{min-height:90px;background:var(--color-bg);border:1px solid var(--color-divider)}
.entry-concern form .btn.full{margin-top:16px}
.concern-notice:empty{display:none}
.notice-done{margin:0 0 16px;padding:12px 16px;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-accent) 10%,transparent);font-weight:600}
.entry-concern .entry-help{margin-top:20px;margin-bottom:24px;padding:14px 16px;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.entry-concern:has(input[value=not_safe]:checked) .entry-help{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.entry-concern:has(input[value=not_safe]:checked) .entry-help a{font-size:19px}
.entry-help h2{margin:0;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)}
.entry-recorded form{margin:4px 0 0}
.entry-help{display:flex;flex-direction:column;gap:2px;margin-top:28px;padding-top:14px;border-top:1px solid var(--color-divider)}
.entry-help h3{margin:0;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)}
.entry-help .subgrey{margin:2px 0 4px;font-size:13px}
.entry-help a{display:block;min-height:44px;padding:10px 0;font-size:16px;line-height:1.5}
.entry-kicker{font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin-top:28px}
.entry-kicker+.subgrey{margin-top:6px}
.entry-recorded{list-style:none;margin:6px 0 0;padding:0}
.entry-recorded li{padding:10px 0;border-bottom:1px solid var(--color-divider);font-size:15px;margin:0}
.entry-recorded .what b{font-weight:400}
.entry-recorded .note{margin-top:4px;white-space:pre-wrap;color:var(--color-neutral-800)}

/* 17 Bad link, Couldn't be shown */
.entry-sys{padding-top:64px;gap:16px}
.entry-sys h1{font-size:36px;margin:0}
.entry-sys .entry-sys-lead,.entry-sys .meta,.entry-sys .subgrey{margin:0}
.entry-sys-btn{min-height:52px;padding:0 28px}
@media(max-width:560px){
  .entry-landing,.entry-invite{padding-top:0}
  .entry-done{padding-top:16px}
  .entry-done h1{font-size:38px}
  .entry-sys{padding-top:32px}
  .entry-backnext .btn{width:auto}
}
/* ===== end group:entry ===== */

/* ===== group:home ===== */
/* Home (07), the waiting room (02/06), the raise and write flow (08/09) and
   the lawyer's home (14). Classes are set by pages.ts overviewPage,
   newTopicPage, reviewTitlePage, lawyerBox, observingLines and position.ts. */
/* -- the board: a 640px column with 32px between its blocks */
.home{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.home > *{margin-top:0}
.home.lawyer-home{max-width:none;gap:18px}
.home > .problem{margin-top:0}
/* Next for you: the quiet private band is the hero */
.home > .zone.private.quiet{margin-top:0;padding:4px 0 4px 18px}
.home .zone.private.quiet .zlabel{margin-bottom:14px}
.next-kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 12px}
h1.next-title{font-size:clamp(30px,5vw,40px);font-weight:400;line-height:1.12;margin:0}
p.next-need,.home .zone.quiet p.next-need{font-size:18px;margin-top:12px}
.next-need::first-letter{text-transform:uppercase}
.btn.next-go{min-height:52px;padding:0 32px;font-size:18px;margin-top:18px}
.next-more{margin-top:24px;border-top:1px solid var(--color-divider)}
.next-more .row-link .s{color:var(--color-neutral-700)}
.next-more .row-link .rc .s.next-need{font-size:14px;margin:0;display:block}
#send{scroll-margin-top:120px}
p.next-also,.home .zone.quiet p.next-also{font-size:15px;margin-top:6px;color:var(--color-accent-700)}
.next-more .row-link .rc .s.next-also{font-size:13px;margin:0;display:block;color:var(--color-accent-700)}
/* No topics yet */
.home-empty{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.home-empty h1{font-size:36px;margin:0}
.home-empty p{font-size:17px;margin:0}
.home-empty .btn{align-self:flex-start;min-height:52px;padding:0 28px;font-size:18px;margin-top:6px}
/* The list: a kicker per category and one row per topic */
.board-list{display:flex;flex-direction:column}
.board-list .same-list{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sh-ink);margin:0 0 10px}
.board-list h2.category{font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin:28px 0 4px;line-height:1.4}
.issue .rc,.row-link .rc{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.issue .rc .t,.row-link .rc .t{flex:none}
.issue .s,.row-link .rc .s{font-size:14px;color:var(--color-neutral-700);display:flex;align-items:center;gap:6px;min-width:0}
.issue .s > svg.i{align-self:flex-start;margin-top:2px}
.issue .s .chip{font-size:14px}
.issue > svg.i,.row-link > svg.i{color:var(--color-neutral-500)}
.board-list .btn.add-topic{align-self:flex-start;margin-top:18px;min-height:48px;padding:0 20px;font-size:16px}
/* The quiet folds at the bottom, and the Your lawyer page's heading */
.home details.fold{border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);padding:6px 2px;margin-top:0}
.home details.fold + details.fold{border-top:0;margin-top:-32px}
.home details.fold summary{min-height:48px;font-size:16px}
.fold-body{padding:4px 0 16px;display:flex;flex-direction:column;gap:12px}
.fold-body > *{margin-top:0}
.fold-body .row{margin-top:0}
.fold-head{font-family:var(--font-heading);font-size:24px;line-height:1.2}
/* A link in a box, with its copy action on the right */
.linkbox{flex-wrap:wrap;margin:0}
.linkbox .lk,.linkbox > a{flex:1;min-width:0;font-size:15px;color:var(--color-text);text-decoration:none;overflow-wrap:anywhere}
.linkbox .copy{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;background:none;border:0;font:inherit;font-size:14px;cursor:pointer}
.pv-box .copy{color:var(--pv-ink)}
.sh-box .copy{color:var(--sh-ink)}
.linkbox .copy:hover{text-decoration:underline}
/* Who else is reading: a quiet shared note */
.sh-box.observing{align-items:flex-start;padding:14px 16px}
.sh-box.observing > svg.i{color:var(--sh-ink);margin-top:3px}
.sh-box.observing p{margin:0;font-size:15px}
.sh-box.observing p.subgrey{margin-top:6px;font-size:14px}
/* -- the waiting room (pre-live) */
.waitroom{max-width:560px;display:flex;flex-direction:column;gap:20px;padding-top:32px}
.waitroom > *{margin-top:0}
.waitroom h1{font-size:40px;font-weight:400;margin:0}
.waitroom .lead{font-size:18px}
.linkblock{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.linkblock > *{margin-top:0}
/* The nav's own pages (Your lawyer, and the invite page): one column, the same
   rhythm as the waiting room. */
.navpage{max-width:560px;display:flex;flex-direction:column;gap:16px}
.navpage > *{margin-top:0}
.navpage .row{margin-top:4px}
/* The operator's page (S18 Step 3): a card per place waiting for a check,
   Checked above and Not checked below a hairline. */
.op-place h3{margin-top:0}
.op-place .op-not{border-top:1px solid var(--color-divider);margin-top:20px;padding-top:12px}
.op-place .op-not summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.op-search .row{flex-wrap:nowrap;align-items:stretch}
.op-search .row input{flex:1 1 auto;min-width:0}
.waitroom .row{margin-top:0}
.waitroom .btn svg{flex:none}
/* A waiting party's check reference (S18 follow-ups, item 3): read aloud on a call. */
.check-reference p{margin:0}
.check-reference .check-reference-code{font-size:28px;letter-spacing:.14em;margin:6px 0 10px;color:var(--color-text)}
/* -- the lawyer's home: a wider, denser list */
.lawyer-home h1.lawyer-title{font-size:32px;margin:0}
.lawyer-home > p.subgrey{margin-top:-8px}
.lawyer-home .board-list h2.category{margin-top:22px}
.lawyer-home .issue{min-height:0;padding:12px 2px}
.lawyer-home .issue .rc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center}
.lawyer-home .issue .t{font-size:16px}
.lawyer-home .issue .s,.lawyer-home .issue .s .chip{font-size:13px}
.lawyer-home .issue > svg.i{display:none}
/* -- the raise and write flow: one 560px column */
.flow{max-width:560px;margin:0 auto}
.flowbar{display:flex;align-items:center;gap:8px;min-height:48px;margin-top:-16px}
/* A refusal above the bar no longer sits flush on the back link (audit, 15 Oct). */
.flow > .problem + .flowbar,.flow > .callout + .flowbar{margin-top:12px}
/* Phone: the sticky main button stays one line, so it covers less of the form (audit, 15 Oct). */
@media(max-width:560px){.flow .actions-sticky .btn.lg{font-size:16px;padding:0 14px;min-height:50px}}
.flowbar .backlink{margin-left:-2px}
.flowbar .iconlink{width:44px;height:44px;justify-content:center;margin-left:-10px}
.flowtitle{font-size:14px;color:var(--color-neutral-700);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
p.flowtitle{margin-top:14px;white-space:normal}
.flow h1.ask{font-size:clamp(28px,5vw,34px);font-weight:400;line-height:1.2;margin-top:24px}
.flow .zone h1.ask{margin-top:0}
.flow .zone > .muted{font-size:15px}
.flow .zone h2.prompt{font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.45;margin:0;letter-spacing:0}
.flow input.title-in{font-size:18px;min-height:56px;padding:0 16px;background:var(--color-bg)}
.flow textarea.write{min-height:220px;font-size:17px;margin-top:14px}
.flow .subnote,.flow .zone p.subnote{margin-top:8px;font-size:14px}
.flow .pick label{min-height:44px}
.flow .pick label:has(:checked){border-color:var(--color-accent);color:var(--color-accent-700);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.flow .actions-sticky{margin-top:22px;padding-bottom:4px}
/* A flow's private card sits a little roomier than an inline one. */
.flow .zone.private{padding:22px 24px}
.flow .actions-sticky.stack{display:flex;flex-direction:column;gap:6px}
.flow .btn.link.again{align-self:center}
.flow .filed{margin-top:18px}
/* reviewTitlePage: what they typed, quiet; the name that crosses, large */
.own-quiet > .zone.private{background:transparent;box-shadow:none;border:0;border-left:2px solid var(--pv-edge);border-radius:0;padding:2px 0 2px 16px;margin-top:24px}
.own-quiet > .zone.private .zlabel{margin-bottom:5px}
.own-quiet .mono{font-size:15px;color:var(--color-neutral-800);margin:0}
.flow p.name-big{font-family:var(--font-heading);font-size:clamp(28px,5vw,34px);line-height:1.2;margin:0;color:var(--color-text)}
/* positionReviewPage: the rewrite that crosses, at 20px */
.flow p.rewrite-big{font-family:var(--font-body);font-size:20px;line-height:1.5;margin:0;color:var(--color-text)}
.flow > p.rewrite-big{margin-top:18px}
.flow .zone.private .mono{font-size:16px}
/* The two check-before-sharing screens (a topic's name, a position's wording):
   the title with "n of m" at its right, then two labelled lines — what the
   reader typed, and the draft that will be shown. The rule at the left of each
   line keeps the private warm edge and the shared blue the zones use. */
.stepcount{font-size:14px;color:var(--color-neutral-700);white-space:nowrap;margin-left:auto}
.steptitle{display:flex;align-items:baseline;gap:12px;margin-top:24px}
.steptitle h1.ask,.steptitle h2{margin:0}
.steprow{display:flex;margin-top:8px}
.typed-draft{margin:18px 0 0}
.typed-draft .td-row{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:4px 14px;align-items:baseline;padding-left:14px;border-left:2px solid var(--pv-edge)}
.typed-draft .td-row + .td-row{margin-top:14px;border-left-color:var(--sh-line)}
.typed-draft dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700)}
.typed-draft dd{margin:0}
.typed-draft .td-typed dd{font-size:15px;color:var(--color-neutral-800)}
.typed-draft p.name-big{font-family:var(--font-heading);font-size:clamp(22px,4vw,26px);line-height:1.25;margin:0;color:var(--color-text)}
.typed-draft p.rewrite-big{font-family:var(--font-body);font-size:20px;line-height:1.5;margin:0;color:var(--color-text)}
.amountbox h2{font-family:var(--font-body);font-size:16px;font-weight:600;margin:0}
.amountbox .amountgrid label{margin:0}
/* Folded behind a link on every topic (23 Oct): the summary reads as one, not as a heading. */
details.amountfold>summary{color:var(--color-accent-700);font-size:15px}
/* Share on these two screens is the screen's one main action: filled, as the zone-held Share was. */
.shareform .btn:not(.ghost):not(.link){background:var(--btn-solid-bg);border-color:var(--btn-solid-bg);color:var(--btn-solid-ink)}
.shareform .btn:not(.ghost):not(.link):hover{background:var(--btn-solid-bg-hover);border-color:var(--btn-solid-bg-hover);color:var(--btn-solid-ink)}
@media (max-width: 560px){
  .home{gap:28px}
  .waitroom{padding-top:16px}
  .waitroom h1{font-size:34px}
  .home-empty .btn,.board-list .btn.add-topic,.btn.next-go{align-self:stretch}
  .lawyer-home .issue .rc{grid-template-columns:1fr}
  .flowbar{margin-top:-20px}
}
/* ===== end group:home ===== */

/* ===== group:topic ===== */
/* ── group: C — Topic page (party and lawyer) ── */
/* Design screens 09 Topic and 15 Lawyer topic. Everything is scoped to the
   topic page's own wrapper, so the classes it shares with the record and the
   agreement keep their foundation look there. The barrier stays visible: the
   shared band is a labelled blue box of the two wordings, the private band
   the warm-edged zone with its lock, and nothing that is private sits on a
   blue ground or the reverse. */
.topic{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.topic>*{margin-top:0;margin-bottom:0}
.topic>.backlink{align-self:flex-start;margin-left:-4px;min-height:48px;font-size:16px}
.topic>.backlink svg{flex:none}
.topic>h1{font-size:clamp(30px,5vw,40px);font-weight:400;line-height:1.12;text-wrap:balance}
.topic>h1+.titlerow{margin-top:-18px}
.topic .titlerow .chip{font-size:15px;gap:7px}
.topic .about-band{margin-top:0 !important;font-size:14px;line-height:1.5;color:var(--sh-ink);background:var(--sh-bg);border-left:2px solid var(--sh-line);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:10px 14px}
.topic .about-band b{font-weight:600;color:var(--color-text)}
.topic>details[data-fold=about]{margin-top:-10px !important}
.topic .titlerow .rename-link{font-size:14px;color:var(--color-neutral-700)}
.topic .about-siblings a{color:inherit}
/* The composer of a topic about an item (A1): the sheet's facts above the box, in the shared tint */
.flow .about-item{margin-top:18px;font-size:14px;line-height:1.5;color:var(--sh-ink);background:var(--sh-bg);border-left:2px solid var(--sh-line);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:10px 14px}
.flow .about-item p{margin:0}
.flow .about-item p+p{margin-top:4px}
.flow .about-item b{font-weight:600;color:var(--color-text)}
.flow .about-link{margin-top:6px}
.flow .dup-note{margin-top:18px}
.topic>div.row{margin-top:-10px}

/* The next step: a sentence, not a heading. */
.nextstep .say{font-family:var(--font-body);font-size:18px;line-height:1.45;color:var(--color-text);margin:0}
.nextstep .blurb{font-size:16px;line-height:1.55;color:var(--color-neutral-800);margin-top:6px}

/* The one primary action in each stance, at the design's size. Ghost, small,
   link and option buttons keep theirs. */
.topic .btn:not(.ghost):not(.sm):not(.link):not(.opt),.topic-absent .btn{min-height:52px;padding:0 32px;font-size:18px}
/* The topic page's main actions are its large buttons; filled, like every screen's. */
.topic .btn:not(.ghost):not(.sm):not(.link):not(.opt){background:var(--btn-solid-bg);border-color:var(--btn-solid-bg);color:var(--btn-solid-ink)}
.topic .btn:not(.ghost):not(.sm):not(.link):not(.opt):hover{background:var(--btn-solid-bg-hover);border-color:var(--btn-solid-bg-hover);color:var(--btn-solid-ink)}
.topic .row{margin-top:14px}

/* The shared band. On the topic the zone itself is the label row and the
   blue box is the two wordings, one row each, the way design 09 draws
   "Both of you see this". The zone's label and id are unchanged. */
.topic #shared{background:transparent;border:0;border-radius:0;padding:0}
.topic #shared>.zlabel{font-size:13px;color:var(--sh-ink);margin-bottom:10px;gap:7px}
.topic #shared>p{font-size:17px}
.topic #shared>.grid{display:block;margin-top:0 !important;background:var(--sh-bg);border:1px solid var(--sh-line);border-radius:var(--radius-lg);padding:4px 20px}
.topic #shared>.grid>.module{display:flex;flex-direction:column;gap:4px;background:transparent;border:0;border-radius:0;padding:14px 0;margin:0 !important}
.topic #shared>.grid>.module+.module{border-top:1px solid var(--color-divider)}
.topic #shared>.grid>.module h3{font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--sh-ink);margin:0}
.topic #shared>.grid>.module p.serif{font-size:17px;line-height:1.55;margin:0}
.topic #shared>.grid>.module .subgrey{font-size:13px;color:var(--color-neutral-700);margin-top:2px !important}
.topic #shared>p.meta{margin-top:12px !important;font-size:15px}
/* Commentary on the wordings sits under the box on the page ground, as
   sentences, and reads in neutral ink: warm ink is kept for private text. */
.topic #shared .subnote{color:var(--color-neutral-800);font-size:15px}
.topic #shared>.module:not([data-joint]),.topic #shared>.callout:not(.verdictbox){background:transparent;border:0;border-top:1px solid var(--color-divider);border-radius:0;padding:20px 0 0;margin-top:24px}
.topic #shared>.module>h3{font-size:20px;font-weight:600;margin:0 0 8px}
.topic #shared>.module>p{margin-top:8px}
.topic #shared>.module>.lead-sentence{font-size:18px;line-height:1.5}
.topic #shared>.module>.lead-sentence b{font-weight:600}
.topic #shared>p.meta:last-child{margin-bottom:0}

/* The verdict and the confirm panel: an 18px sentence, the tick box, the
   primary. */
.topic .callout.verdictbox{background:transparent;border:0;border-radius:0;padding:0;margin-top:22px}
.topic .verdict{font-size:18px;line-height:1.45;color:var(--color-text);margin:0}
.topic .verdictbox .progress{margin-top:12px}
.topic .verdictbox .apr{margin-top:12px}
.topic .verdictbox form{margin-top:12px}
.topic .verdictbox>p:not(.verdict){font-size:16px;color:var(--color-neutral-800)}
.topic .verdictbox .check{margin-top:14px}
.topic .module .progress{margin-top:12px}

/* A solicitor's record: a briefcase label over paper, the wording in the
   heading face. */
.topic #shared .module[data-joint]{background:transparent;border:0;border-radius:0;padding:0;margin-top:24px !important}
.topic #shared .module[data-joint] h3{display:flex;align-items:center;gap:7px;font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:0;color:var(--sh-ink);margin:0 0 10px}
.topic #shared .module[data-joint] .jointtext{background:var(--paper);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);padding:22px 24px;font-family:var(--font-heading);font-size:20px;line-height:1.5;color:var(--color-text);margin:0}
.topic #shared .module[data-joint] .subgrey{font-size:14px;color:var(--color-neutral-700)}

/* The clause: paper, the heading face at 21px, justified, and the AI label as
   a caption line inside the paper. */
.topic .topic-clause{margin-top:24px;background:var(--paper);border:1px solid var(--color-divider);box-shadow:var(--shadow-sm);padding:26px 28px 16px}
.topic .topic-clause>.ct{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 10px}
.topic .topic-clause>.body{font-size:21px;line-height:1.5;text-align:justify;hyphens:auto;margin:0}
.topic .topic-clause>.ch{display:block;border-top:1px solid var(--color-divider);padding-top:10px;margin:14px 0 0}
.topic .topic-clause>.ch .prov{display:inline;font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--color-neutral-700);background:transparent;border:0;padding:0}
.topic .topic-clause>.clausenote{font-size:12px;color:var(--color-neutral-700);margin-top:4px}
.topic .topic-clause>.subgrey{font-size:13px}
.topic .topic-clause .redlines{margin-top:18px}

/* Still to settle: the sample orders' wordings (here and in the amount-gap
   block) and the doors as pill buttons. */
.topic ul.opts .btn.opt,.topic .gap .row .btn.ghost,.topic .mech .row .btn.ghost{min-height:40px;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.4;color:var(--color-text);border-color:var(--color-divider);border-radius:22px;padding:8px 18px}
.topic ul.opts .btn.opt .serif{font-size:14px}
.topic .gap .row,.topic .mech .row{flex-direction:row;flex-wrap:wrap;gap:8px}
.topic .gap .row .btn,.topic .mech .row .btn{width:auto}
.topic .gap .origin{margin-left:0;font-size:12.5px}

/* The private band: the warm zone and its lock; the composer is large. */
.topic .zone.private>.zlabel{font-size:13px;gap:7px}
.topic .zone.private:not(.quiet) textarea{min-height:200px;font-size:17px}
.topic .zone.private .divider{border-top:1px solid var(--color-divider)}
.topic .zone.private .divider .draftlbl:not(.blue){color:var(--pv-ink)}
.topic .zone.private .divider .mono{font-size:16px}
.topic .zone.private h2{font-size:22px;font-weight:400}

/* The one fold: the design's More affordance, the ellipsis, then the
   pinned summary text. Its contents are rows. */
.topic details.rest{border-top:1px solid var(--color-divider);padding-top:4px}
.topic details.rest>summary{min-height:56px;font-size:17px;gap:12px}
.topic details.rest>summary::before{width:20px;height:20px;border:0;transform:none;margin:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
.topic details.rest[open]>summary{color:var(--color-accent-700)}
.topic details.rest>:not(summary){margin-top:22px}
.topic details.rest>details{margin-top:22px !important}

/* Comments: a who-and-when line in blue ink over the text, divider rows, the
   composer under them. Nobody's comment is a bubble. */
.topic .comments{margin-top:0;border-top:1px solid var(--color-divider);padding-top:20px}
.topic details.rest>.comments{margin-top:22px}
.topic .comments h2{font-size:22px;font-weight:400}
.topic .comments .stream{margin-top:6px}
.topic .comments .msg{border-top:1px solid var(--color-divider);padding:12px 0;margin:0}
.topic .comments .msg:first-child{border-top:0}
.topic .comments .msg .who{font-size:13px;color:var(--sh-ink)}
.topic .comments .msg p.serif,.topic .comments .msg p.sans{font-size:16px;margin-top:2px}
.topic .comments .msg .anchor{font-size:13px;color:var(--color-neutral-700);margin-top:2px}
.topic .comments>.zone{margin-top:16px}

/* A solicitor's topic: wider, 15px, the two wordings side by side with a
   hairline between them. No fold. */
.topic.reviewer{max-width:none;gap:20px;font-size:15px}
.topic.reviewer>h1{font-size:30px}
.topic.reviewer>h1+.titlerow{margin-top:-16px}
.topic.reviewer .titlerow .chip{font-size:14px}
.topic.reviewer #shared>.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--sh-line);padding:0;overflow:hidden}
.topic.reviewer #shared>.grid>.module{background:var(--sh-bg);padding:16px 18px}
.topic.reviewer #shared>.grid>.module+.module{border-top:0}
.topic.reviewer #shared>.grid>.module h3{font-size:12.5px}
.topic.reviewer #shared>.grid>.module p.serif{font-size:16px}
.topic.reviewer .topic-clause{padding:18px 22px 14px}
.topic.reviewer .topic-clause>.body{font-size:18px}
.topic.reviewer .recordform h2,.topic.reviewer .comments h2{font-size:20px;font-weight:600;margin:0 0 8px}
.topic.reviewer .recordform textarea{min-height:90px}
.topic.reviewer .recordform form+form{margin-top:4px}
.topic.reviewer .comments textarea{min-height:80px}
.topic.reviewer .comments{border-top:0;padding-top:0}
/* A solicitor has no private band, so nothing on their topic is in warm ink. */
.topic.reviewer .subnote{color:var(--color-neutral-800)}

/* No such topic. */
.topic-absent{padding-top:72px;max-width:560px;margin:0 auto}
.topic-absent h1{font-size:36px;font-weight:400;margin:0}
.topic-absent p{font-size:17px;margin-top:16px}
.topic-absent .row{margin-top:20px}

@media(max-width:560px){
  .topic{gap:22px}
  .topic>h1+.titlerow{margin-top:-14px}
  .topic #shared>.grid{padding:2px 16px}
  .topic .topic-clause{padding:20px 18px 14px}
  .topic .topic-clause>.body{font-size:19px;text-align:left}
  .topic .gap .row .btn,.topic .mech .row .btn{width:auto}
  .topic-absent{padding-top:40px}
}
/* ===== end group:topic ===== */

/* ===== group:sheet-agreement ===== */
/* 10 Balance sheet, 11 Agreement and its print version, the record (16 for a
   lawyer) and the clash check. Presentation only: every figure and status is
   still the fold's, and the private band keeps its warm box and lock. */

/* -- 10 Balance sheet. 640px, the shared band unboxed under its blue label,
   one row per line that opens to the card. */
.sheetpage{max-width:640px;margin:0 auto}
.sheetpage>h1{margin-top:0}
.sstate{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--color-neutral-800);margin-top:14px}
.sstate svg.i{margin-top:2px;color:var(--color-neutral-700)}
.sstate.ok,.sstate.ok svg.i{color:var(--sh-ink)}
.sstate b{color:inherit}
.sheetpage>.zone.private{margin-top:28px}
.sheetpage .ssec{margin-top:26px}
.sheetpage .ssec:first-of-type{margin-top:0}
.sheetpage .ssec h3{border-bottom:0;padding-bottom:0;margin:0 0 2px}
.sheetpage .ssec>.subgrey{margin:4px 0 6px}
/* The items as cards (Izza, 23 Oct): name, one line of facts, the status and
   the controls the item asks of this reader, and a small Details fold. */
.sitems{margin-top:22px}
.snone{font-size:17px;color:var(--color-neutral-800);margin:0}
.scard{border-bottom:1px solid var(--color-divider);padding:14px 2px;min-width:0}
.scard .sc-name{font-size:17px;line-height:1.35;color:var(--color-text);margin:0;overflow-wrap:anywhere}
.scard .sc-facts{font-size:14px;line-height:1.45;color:var(--color-neutral-700);margin:3px 0 0;overflow-wrap:anywhere}
.scard.leftoff .sc-name{color:var(--color-neutral-800)}
.sc-status{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
.sc-status>.pill+.pill{margin-left:6px}
.sc-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.sc-ask form{display:inline;margin:0}
.sc-ask .sc-q{font-size:15px;color:var(--color-text)}
.sc-ask-keep{width:100%}
.sc-ask-keep form{display:block;flex:1 1 15em;min-width:0}
.sc-ask-keep .seg{margin-top:0}
.sc-status .foot-accent{margin:0}
details.sc-enter{border-top:0;padding:0;margin:0}
details.sc-enter>summary{display:inline-flex;justify-content:center;min-height:40px;padding:0 14px;font-family:var(--font-heading);font-weight:600;font-size:15px;color:var(--color-text);border:1px solid var(--color-divider);border-radius:var(--radius-md)}
details.sc-enter>summary::before{display:none}
details.sc-enter[open]{flex-basis:100%}
details.sc-enter label{margin-top:10px}
details.sc-more{border-top:0;padding-top:0;margin-top:6px}
details.sc-more>summary{font-size:14px;color:var(--color-neutral-700);min-height:36px}
.sc-body{padding:2px 0 8px}
.sc-body>details{border-top:0;padding-top:0;margin-top:8px}
.sc-body .stopics .tlist a{min-height:44px;border-bottom:1px solid var(--color-divider)}
/* + Add an item: one button; the form opens under it. */
.smine{margin-top:22px}
details.sadd{border-top:0;padding:0;margin-top:18px}
details.sadd>summary{display:inline-flex;justify-content:center;font-family:var(--font-heading);font-weight:600;font-size:17px;min-height:48px;padding:0 22px;color:var(--btn-ink);border:1px solid var(--color-accent);border-radius:var(--radius-md)}
details.sadd>summary::before{display:none}
.addline select{width:100%;min-height:52px;font-size:17px}
/* Totals: one line, the breakdown folded, Add a split small under it. */
.ttotal{font-size:17px;margin:6px 0 0;font-feature-settings:"tnum";overflow-wrap:anywhere}
details.sbreak{border-top:0;padding-top:0;margin-top:8px}
details.sbreak>summary,details.ssplit>summary{font-size:14px;color:var(--color-neutral-700);min-height:36px}
details.ssplit{border-top:0;padding-top:0;margin-top:6px}
.zone .sbody p.draftlbl,.zone .sdiv p.draftlbl,.zone .stotals p.draftlbl{font-size:13px;color:var(--color-neutral-700)}
.zone .sbody p.subgrey,.zone .sdiv p.subgrey,.zone .stotals p.subgrey,.zone .ssec>p.subgrey{font-size:14px;color:var(--color-neutral-700)}
.zone p.sempty{font-size:14px;color:var(--color-neutral-700)}
.halfway>p:not(.draftlbl){font-size:17px;line-height:1.5}
.halfway .subnote,.sbody .subnote{font-size:13px;color:var(--color-neutral-700)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:10px}
.seg .btn{min-height:44px;padding:4px 8px;font-family:var(--font-body);font-weight:400;font-size:14px;line-height:1.25;white-space:normal;color:var(--color-text);border-color:var(--color-divider)}
.seg .btn.on{border-color:var(--color-accent);color:var(--color-accent-700);background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.stopics .tlist a{min-height:44px;border-bottom:1px solid var(--color-divider)}
.sdiv{margin-top:30px;border-top:1px solid var(--color-divider);padding-top:14px}
.sdiv .sline-head{align-items:center}
.sdiv .sline-head h3{font-family:var(--font-body);font-size:17px;font-weight:400;letter-spacing:0;margin:0}
.sdiv .vals{margin-top:12px}
.sdiv .val{border-top:0;padding-top:0}
.sdiv .val .amt.keepw{font-size:16px}
.sdiv>.meta{font-size:15px;margin:0}
.sdiv>details{border-top:0;padding-top:0}
/* When the Equalisation Sum is paid (S9 D7): two choices with a field inside each, so the radios stay visible. */
.tpick{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}
.tpick .topt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;margin:0}
.tpick .topt input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.tpick .topt input[type=text]{width:5em;min-height:40px;padding:6px 10px}
.tpick .topt{min-width:0}
.tpick .topt select{min-height:40px;padding:6px 10px;width:auto;min-width:0;max-width:100%;flex:1 1 10em;text-overflow:ellipsis}
.tpick .subnote{font-size:13px;color:var(--color-neutral-700);margin:0}
.sheetpage .stotals{border-top:2px solid var(--color-text);margin-top:26px;padding-top:12px}
.sheetpage .stotals h3{font-family:var(--font-body);font-size:17px;font-weight:400;letter-spacing:0}
.sheetpage .stotals .tcol .draftlbl{font-size:13px}
.sheetpage .stotals .trow{font-size:14px}
.sheetpage .stotals .trow.net{font-weight:400;font-size:17px;align-items:baseline}
.sheetpage .stotals .trow.net .amt{font-family:var(--font-heading);font-size:26px;line-height:1.1}
.sheetpage .stotals .val{border-top:0;padding-top:0}
.sconfirm-note{margin-top:26px;font-size:15px;color:var(--color-neutral-800)}
.sconfirm-why{margin-top:22px}
.sconfirm-bar{margin-top:14px;border-top:1px solid var(--color-divider);padding:12px 0 16px;display:flex;flex-direction:column;gap:12px}
.sconfirm-bar .check{border-top:0;padding-top:0;margin-top:0}
.sconfirm-bar:has(.sconfirm-state){flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sconfirm-state{display:inline-flex;align-items:center;gap:8px;font-size:16px}
.sconfirm-state svg.i{color:var(--sh-ink)}
.sheetpage #settlement{margin-top:22px}
/* The private band: the design's add-line sheet, inline. */
.sheetpage .zone.private .saddh{font-size:24px;margin:4px 0 0}
.saddp{font-size:15px;line-height:1.5;margin-top:8px;max-width:52ch}
.addline input[type=text]{min-height:52px;font-size:17px}
.addline .pick.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.addline .pick.seg3 label{justify-content:center;text-align:center;border-radius:var(--radius-md);padding:6px 8px;line-height:1.25;min-height:48px;background:var(--color-bg)}
.addline .pick.seg3 label:has(:checked){background:color-mix(in srgb,var(--color-accent) 8%,var(--color-bg))}
.addline .pick:not(.seg3) label{background:var(--color-bg)}
.sdraft{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--color-divider)}
.sdraft + details{border-top:0;padding-top:0}
.sdraft .draftlbl{margin-top:0}
.sdraft .sown{font-size:17px;line-height:1.5;margin-top:6px}
.spreview{margin-top:14px;background:var(--sh-bg);border:1px solid var(--sh-line);border-radius:var(--radius-lg);padding:14px 16px}
.spreview .draftlbl.blue{display:flex;align-items:center;gap:7px;margin:0;font-size:13px}
.spreview .sname{font-size:19px;line-height:1.4;margin-top:6px}
.spreview .subgrey{margin-top:4px;color:var(--color-neutral-800)}

/* -- The annex: the sheet as a table, in the document. */
.annex-scroll{overflow-x:auto;margin-top:12px}
table.annex{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4}
table.annex th,table.annex td{padding:7px 6px;border-bottom:1px solid var(--color-divider);text-align:left;vertical-align:top}
table.annex thead th{font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);border-bottom-color:var(--color-neutral-500)}
table.annex .num{text-align:right;font-feature-settings:"tnum";white-space:nowrap}
table.annex tr.asec th{font-size:11.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);padding-top:14px}
table.annex .asub{display:block;font-size:12px;color:var(--color-neutral-700)}
table.annex tfoot th{font-weight:400;color:var(--color-neutral-800)}
table.annex tfoot tr.net th,table.annex tfoot tr.net td{font-weight:600;color:var(--color-text);border-top:1px solid var(--color-text)}
/* At phone width each row stacks: the item across the top, then its four
   cells two by two, each with its own small heading (15 Oct audit: the
   Status column started past the right edge). */
@media(max-width:560px){
  table.annex,table.annex tbody,table.annex tfoot{display:block}
  table.annex thead{display:none}
  table.annex tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:8px 0;border-bottom:1px solid var(--color-divider)}
  table.annex th,table.annex td{border-bottom:0;padding:2px 0}
  table.annex tbody td:first-child,table.annex tfoot th{grid-column:1 / -1}
  table.annex tr.asec{display:block;border-bottom:0;padding:10px 0 0}
  table.annex td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700)}
  table.annex .num{text-align:left}
  table.annex td:empty{display:none}
  /* Who keeps it beside the status, then the two values side by side. */
  table.annex tbody td:nth-child(2){order:1}
  table.annex tbody td:nth-child(5){order:2}
  table.annex tbody td.num{order:3}
  table.annex tfoot tr.net th,table.annex tfoot tr.net td{border-top:0}
  table.annex tfoot tr.net{border-top:1px solid var(--color-text)}
}
/* How the Equalisation Sum is worked out (15 Oct audit): a small two-column
   table under the sum, on the sheet and in the document. */
.working{margin-top:10px}
.working-t{border-collapse:collapse;margin-top:8px;font-size:14.5px;line-height:1.45;width:100%;max-width:460px}
.working-t th{font-weight:400;text-align:left;padding:4px 12px 4px 0;color:var(--color-neutral-800)}
.working-t td{text-align:right;white-space:nowrap;font-feature-settings:"tnum";padding:4px 0}
.working-t tr.net th,.working-t tr.net td{font-weight:600;color:var(--color-text);border-top:1px solid var(--color-divider)}
.aout{margin-top:8px}

/* -- 11 Agreement: the document as one sheet of paper with a DRAFT mark. */
.agreepage>h1{margin-top:0}
.aready{font-size:17px;line-height:1.5;margin-top:10px;color:var(--color-text)}
.aready b{font-weight:600}
.atools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ahead{display:flex;justify-content:space-between;align-items:baseline;gap:4px 16px;flex-wrap:wrap}
.ahead>h1{margin:0}
.astatus{margin:0;font-size:14px;color:var(--color-neutral-700)}
.atools{align-items:flex-start}
.aleft{flex:1 1 100%;min-width:0}
/* Print / Save as PDF sits on the fold's summary line, the list opens full width under both. */
.atools{position:relative}
.atools>.btn{flex:0 0 auto}
.aleft+.btn{position:absolute;top:8px;right:0;margin:0}
.aleft>summary{padding-right:200px}
.aleft-list .btn,.atools>.btn,.aprove-line .btn{width:auto}
.adetails{border-top:0;padding-top:0}
.doc .astand{font-weight:400}
.aleft>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.aleft-list{list-style:none;margin:4px 0 0;padding:0}
.aleft-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0;border-top:1px solid var(--color-divider);font-size:14.5px;line-height:1.45}
.aleft-list li .lt{flex:1 1 220px;min-width:0}
.aleft-list form{margin:0}
.doc .alabel{margin-top:10px !important}
.aprove-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px;font-size:14px;color:var(--color-neutral-800)}
.aprove-line .aprove{margin:0}
.aprove-line .aprove .btn{min-height:44px;padding:0 18px;font-size:15px}
.adetails{margin-top:8px}
.adetails>summary{cursor:pointer;font-size:14px;color:var(--color-neutral-700);min-height:36px;display:flex;align-items:center}
.adetails>p:first-of-type{margin-top:4px !important}
.doc .clause.arow{margin-top:14px}
.doc .clause.arow .ch{margin-bottom:0}
.doc .clause.arow .ct{font-weight:400}
.doc .asub{margin-top:2px !important;font-size:13px}
.doc .asettle{margin-top:22px;font-size:15px}
.doc .asset>.ch .ct a,.doc .clause .ct a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-divider);text-underline-offset:3px}
.doc{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--color-divider);box-shadow:var(--shadow-md);padding:clamp(24px,6vw,52px);margin-top:22px}
.doc>*{position:relative}
.doc>.watermark{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-family:var(--font-heading);font-size:160px;letter-spacing:.1em;color:var(--color-text);opacity:.035;pointer-events:none;user-select:none;line-height:1}
.doc .draftlabel{margin-top:0}
.doc .draftlabel:last-child{margin-top:34px;border-bottom:0;border-top:1px solid var(--color-divider);padding:10px 0 0}
.doc .draftlabel b{font-weight:400}
.doc .doc-definitions{margin:14px 0 0;font-size:14px;color:var(--color-neutral-700)}
.aintro{font-size:14px;color:var(--color-neutral-700);margin-top:14px}
.doc .part{margin-top:30px}
.doc .part:first-of-type{margin-top:24px}
.doc .part>h2{font-size:19px;font-weight:600;line-height:1.3;border-bottom:0;padding-bottom:0;margin:0}
.doc .part>h2+.subgrey{margin-top:2px;font-size:13px}
.doc .part>h3{font-size:17px;margin-top:26px}
.doc .clause{background:transparent;border:0;box-shadow:none;padding:0 0 0 48px;margin-top:20px;position:relative}
.doc .clause .ch{margin-bottom:6px;align-items:baseline}
.doc .clause .ct{font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.4}
.doc .clause .ct .num{position:absolute;left:0;top:1px;font-size:15px;font-weight:400;font-feature-settings:"tnum";color:var(--color-accent-700);margin:0}
.doc .clause .body{font-family:var(--font-body);font-size:16px;line-height:1.65;text-align:left}
.doc .clause.ph .body,.doc .clause.ph>.meta,.doc .ph-inline{font-size:14.5px;color:var(--color-neutral-700)}
.doc .clause.ph .ct{font-weight:400;color:var(--color-neutral-800)}
.doc .clause .subnote,.doc .tail .subnote{font-size:12px;line-height:1.5;color:var(--color-neutral-700);margin-top:8px !important}
.doc .clause>.draftlbl{border-top:0;padding-top:0}
.doc .prov,.recpage .prov{background:transparent;border:1px solid var(--color-divider);color:var(--color-neutral-700);font-size:11.5px;padding:1px 8px}
.doc .chips{margin-top:8px !important;gap:6px !important}
.doc .chips .pill{font-size:11.5px}
.doc .clause .row .btn.ghost,.doc .asset>.row .btn.ghost,.doc .clause .row .btn.ghost.sm{min-height:36px;padding:0 2px;border-color:transparent;color:var(--btn-ink);font-family:var(--font-body);font-weight:400;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.doc .row{margin-top:8px}
.doc .stamp,.recpage .stamp{background:transparent;border:1px solid var(--color-neutral-500);color:var(--color-neutral-800)}
.aprove{margin-top:12px}
.aprove .btn{min-height:44px;padding:0 20px;font-size:16px}
.aprove .anote{font-size:12.5px;line-height:1.5;color:var(--color-neutral-700);margin-top:6px}
/* A lawyer's open notes over the button that approves a clause (26 Oct 2026):
   text with a rule beside it, nothing that looks like a block or a warning
   light on the button below. */
.clausenotes{margin-top:12px;padding:2px 0 2px 14px;border-left:3px solid var(--color-neutral-500);font-size:14.5px;line-height:1.5;color:var(--color-neutral-800)}
.clausenotes .cn-head{margin:0}
.clausenotes .cnote{margin-top:14px}
.clausenotes .cnote .who{font-size:13px;color:var(--sh-ink);margin:0}
.clausenotes .cnote .anchor{margin:2px 0 0}
.clausenotes .cnote .sans{font-size:15px;margin:2px 0 0}
.clausenotes+.aprove,.clausenotes+.aprove-line{margin-top:12px}
/* The count beside a What's left approve button, on its own line under the row's words. */
.cn-pointer{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--color-neutral-700)}
/* The sentence under the message composer: a message is not an agreement. */
.not-agreement{margin-top:10px}
.not-agreement a{display:block;margin-top:4px}
.doc .asset{border-top:1px solid var(--color-divider);margin-top:24px;padding:14px 0 0 48px;position:relative}
.doc .asset>.ch .ct{font-family:var(--font-body);font-size:16px}
.doc .asset>.ch .ct .num{position:absolute;left:0;top:15px;font-size:15px;font-weight:400;color:var(--color-accent-700);margin:0}
.doc .asset .clause{margin-left:0;padding-left:48px}
.doc .asset .clause .ct .num{font-size:13px}
.doc .asset>.subgrey{font-size:13px;margin-top:4px}
.doc .tail .meta,.doc .part>.meta{font-size:14px}

/* -- 11 Print version: white paper on a grey surround on screen, plain
   paper when printed. No watermark, no page numbers. */
body.document{background:var(--color-neutral-300)}
html:has(body.document){background:var(--color-neutral-300)}
body.document main{padding:20px 12px 48px}
body.document .wrap{padding:0}
.doc.print{background:#fff;color:#201f1d;border:0;box-shadow:var(--shadow-md);padding:64px 72px;font-size:13px;line-height:1.6;margin:0 auto;max-width:794px;min-height:1123px;--color-text:#201f1d;--color-neutral-700:#605d5d;--color-neutral-800:#4d4a4a;--color-neutral-500:#9b9797;--color-divider:#d7d3d3;--color-accent-700:#7d5411;--btn-ink:#7d5411;--paper:#fff}
.doc.print h1,.doc.print h2,.doc.print h3,.doc.print p,.doc.print b{color:#201f1d}
.doc.print .subgrey,.doc.print .meta,.doc.print .aintro{color:#605d5d}
.doc.print>.draftlabel{font-size:9.5px;color:#7d5411;border-bottom-color:#d7d3d3;padding-bottom:8px}
.doc.print>.draftlabel:last-child{font-size:9.5px;color:#7d7979;border-top-color:#d7d3d3;padding-top:8px}
.doc.print>h1{font-size:28px;margin-top:14px}
.doc.print .aready{font-size:13px}
.doc.print p,.doc.print .clause .body{font-size:13px}
.doc.print .part>h2{font-size:16px}
.doc.print .clause{padding-left:40px;margin-top:14px}
.doc.print .clause .ct,.doc.print .clause .ct .num{font-size:13px}
.doc.print .clause .subnote{font-size:10px}
.doc.print table.annex{font-size:12px}
.doc.print .asset>.ch .ct,.doc.print .asset>.ch .ct .num,.doc.print .asettle{font-size:13px}
.doc.print .asset{padding-left:40px}
.doc.print .aprove-line,.doc.print .aleft-list li,.doc.print .adetails>summary{font-size:12px}
.doc.print .pill,.doc.print .prov{font-size:10px;color:#605d5d;border-color:#d7d3d3;background:transparent}

/* -- The record (16 for a lawyer): the same document language, and the
   design's What's left list. */
.recpage>h1{margin-top:0}
.leftbox{margin-top:18px}
.leftbox.ok .aready{display:flex;gap:8px;align-items:baseline;color:var(--sh-ink)}
.leftbox.ok .aready b{color:inherit}
.leftlist{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--color-divider)}
.leftlist li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-divider);font-size:16px;line-height:1.45;margin:0}
.leftlist li svg.i{color:var(--color-neutral-600,var(--color-neutral-700))}
.leftlist li.you svg.i{color:var(--color-accent)}
.leftlist .lt{flex:1;min-width:0}
.leftlist .lw{flex:none;font-size:13px;color:var(--color-neutral-700)}
.leftlist li.you .lw{color:var(--color-accent-700)}
.rwhat{margin-top:16px;font-size:14px;color:var(--color-neutral-700)}
.rwhat p{font-size:14px;color:var(--color-neutral-700)}
.rwhat b{color:var(--color-text);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700);display:block;margin-bottom:4px}
.checkform{margin-top:16px}
.checkform>.subgrey{margin:0 0 8px}
.checkrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:transparent;cursor:pointer;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--color-text);text-align:left}
.checkrow:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 6%,transparent)}
.checkrow .box{width:22px;height:22px;flex:none;border:1.5px solid var(--color-accent);border-radius:3px;background:var(--color-bg)}
.checkrow.sm{width:auto;min-height:44px;font-size:14px;padding:6px 12px}
.checkrow.sm .box{width:18px;height:18px}
.subgrey.reviewed{display:flex;gap:6px;align-items:center;color:var(--sh-ink)}
.recpage .clause{margin-top:18px}
.recpage .clause .ch .ct{font-family:var(--font-body);font-size:17px;font-weight:600}
.recpage .clause>.body,.recpage .clause .divider>.body{font-family:var(--font-body);font-size:16px;line-height:1.65}
.recpage .clause .subnote{font-size:12.5px;color:var(--color-neutral-700)}

/* -- The clash check. */
.revpage h1{margin-top:6px}
.rnote{margin-top:18px}
.rrun{margin-top:22px}
.rrun form{margin-top:12px}
.rgroup{margin-top:30px}
.rgroup .rkicker{font-family:var(--font-body);font-size:12.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;margin:0}
.rgroup.det .rkicker{color:var(--color-accent-700)}
.rgroup.adv .rkicker{color:var(--color-neutral-700)}
.rgroup>.subgrey{margin-top:6px}
.findings{margin-top:8px;border-top:1px solid var(--color-divider)}
.findings>.meta{padding:12px 0;margin:0;font-size:15px}
.finding{padding:12px 0;border-bottom:1px solid var(--color-divider)}
.finding .fh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.finding .fref{font-size:15px;font-weight:600}
.finding .fref .num{color:var(--color-accent-700);font-weight:400;font-feature-settings:"tnum"}
.finding .fbody{margin-top:4px;font-size:16px;line-height:1.55}
.rgroup.adv .fbody{color:var(--color-neutral-800)}

@media(max-width:720px){
  .sconfirm-bar.actions-sticky{padding-bottom:12px}
}
@media(max-width:560px){
  .srow .sv{font-size:15px}
  .sbody .vals{grid-template-columns:1fr 1fr}
  .sheetpage .stotals .vals{grid-template-columns:1fr}
  .doc .clause,.doc .asset,.doc .asset .clause{padding-left:40px}
  .doc .clause .body{font-size:16px;text-align:left}
  .doc>.watermark{font-size:96px}
  .atools .btn.link{width:100%}
  .sconfirm-bar:has(.sconfirm-state){flex-direction:column;align-items:stretch}
  .checkrow.sm{width:100%}
}
@media print{
  html:has(body.document),body.document{background:#fff}
  body.document main{padding:0}
  .doc,.doc.print{box-shadow:none;border:0;padding:0;background:#fff;min-height:0;max-width:none;overflow:visible}
  .doc>.watermark{display:none}
  .sconfirm-bar{display:none}
  table.annex tr{break-inside:avoid;page-break-inside:avoid}
  .doc .clause,.doc .asset{background:#fff}
}
/* ===== end group:sheet-agreement ===== */

/* -------------------------------------------------------------------- print */
/* The print view is the same fold with no chrome and no forms. One page
   break, before the annex (since 15 Oct not before Part B: page 1 held only
   the title and Part A). Tints go: a reader with a printout has the label in
   the body to tell them what it is. */
@media print{
  :root{color-scheme:light}
  /* Ctrl+P on a screen page: the side menu is hidden, so its grid goes too,
     or the page prints in the 232px column (15 Oct audit). */
  body.has-nav{display:block}
  html,body{background:#fff;color:#000;font-size:11.5pt}
  .topbar,.nav,.banner,.backlink,.noprint,form,.btn,script{display:none !important}
  .smine,details.sc-more,details.sc-enter,details.ssplit,.sc-q{display:none !important}
  .synthetic{background:#fff;color:#000;border:1pt solid #000;margin:0 0 12pt;break-inside:avoid;page-break-inside:avoid}
  .synthetic .row{padding:4pt 8pt}
  .synthetic .msg{font-size:10pt}
  .wrap{max-width:none;padding:0}
  main{padding:0}
  .page-break{break-before:page;page-break-before:always}
  .part{margin-top:18pt}
  .clause,.callout,.sline,.stotals,.draftlabel,.tail{break-inside:avoid;page-break-inside:avoid;background:#fff;box-shadow:none}
  .tail{break-before:avoid;page-break-before:avoid}
  .clause.ph{background:#fff}
  .zone.private{display:none}
  a{color:inherit;text-decoration:none}
  /* Still to settle on paper: every question open, no chevrons, and the
     highlight kept as a rule under the words (browsers drop background colours). */
  .gap>summary::before,.gap-sample>summary::before{display:none}
  .gap-sentence mark{background:none;box-shadow:none;border-bottom:1.5pt solid #000}
  details.gap,details.gap-sample{break-inside:avoid;page-break-inside:avoid}
}
/* A separate rule: a browser without ::details-content drops only this one. */
@media print{
  details.gap::details-content,details.gap-sample::details-content{content-visibility:visible;display:block}
}

/* -------------------------------------------------------------- responsive */
/* Below 720px the design's phone layout: the header keeps the brand, the
   concern shield and the name chip, and the nav becomes a tab bar fixed to the
   bottom with the icon over a small label. */
@media(max-width:720px){
  .shell{padding:4px 10px 4px 16px}
  .brand{min-height:48px}
  .concern{width:48px;height:48px}
  .concern svg.i{width:19px;height:19px}
  /* Phone (S22): one row — the brand, Private concern with its words (the
     safety route stays one tap), and Menu, which opens theme, devices, sign
     out and the name chip as a panel under the bar. */
  .topbar .tools{flex:none;gap:0 2px}
  .topbar .concern,.topbar .theme-toggle{width:auto;height:40px;margin:0;gap:6px;padding:0 8px;font-size:13px}
  .topbar .concern .vh,.topbar .theme-toggle .tlabel{position:static !important;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  details.usermenu{position:static}
  details.usermenu>summary{height:40px;padding:0 8px;font-size:13px}
  details.usermenu>summary .mlabel{font-size:13px}
  details.usermenu[open]>summary{color:var(--color-accent-700);background:color-mix(in srgb,var(--color-text) 7%,transparent)}
  details.usermenu .menu-items{position:absolute;right:12px;top:calc(100% - 2px);z-index:20;flex-direction:column;align-items:stretch;gap:2px;min-width:210px;padding:8px;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
  details.usermenu .menu-items .theme-toggle{justify-content:flex-start;height:44px;font-size:15px;gap:12px;padding:0 12px}
  details.usermenu .menu-items .whoami{align-self:flex-start;margin:8px 0 4px 10px}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--color-bg);border-top:1px solid var(--color-divider)}
  .nav a{flex-direction:column;justify-content:center;gap:4px;min-height:62px;padding:6px 4px;font-size:12px;color:var(--color-neutral-700);border-bottom:0;text-align:center}
  .nav a.on{color:var(--color-accent-700)}
  .nav a{position:relative}
  .nav a .nbadge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px;padding:0 5px}
  .nav a svg.i{display:block}
  body.has-nav main{padding-bottom:80px}
  body.has-nav .actions-sticky{bottom:62px}
  body.has-nav > .session-notes{bottom:74px}
  /* The person chip keeps the 16px gutter on the right too (15 Oct audit). */
  .topbar .bar{padding-right:16px}
  .lastsignin .shell{padding:10px 16px}
}
/* With Your devices in the tools row, a phone's matter pages have no room for
   the wordmark beside the person's chip: the mark stays, and the word is still
   the link's name to a screen reader. The set-up screens have no nav but the
   same tools and chip, so the same holds there; the concern and operator
   pages, a chip and no nav but one tool fewer, drop the word too. */
@media(max-width:430px){
  body.has-nav .brand,.bar:has(.whoami) .brand{font-size:0;gap:0}
}
@media(max-width:560px){
  :root{--gutter:16px}
  body.measure-narrow{--gutter:20px}
  main{padding-top:24px}
  .zone{padding:16px}
  .grid{grid-template-columns:1fr}
  /* At phone width the two value cells stack rather than squeeze. */
  .vals{grid-template-columns:1fr}
  .btn{width:100%}
  .btn.link{width:auto}
  .row{flex-direction:column;align-items:stretch}
  .issue{flex-wrap:wrap}
  .clause{padding:18px 18px 14px}
  .clause .body{font-size:18px;text-align:left}
  .whoami{padding:4px 10px}
}

/* ===== group:s22-topic ===== */
/* Header: the five-step bar where the status line was, the rename link
   beside it. */
.topic>h1+.titlerow.topic-stage{margin-top:-16px}
.topic .titlerow.topic-stage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 14px}
.topic .titlerow.topic-stage .stepper{flex:1 1 420px;min-width:0;margin-top:0}
.topic .titlerow.topic-stage .rename-link{margin-top:4px}

/* The next step: a "?" beside the heading holds the explanation. */
.nextstep .say-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0 2px}
.nextstep .say-row>.say{flex:0 1 auto;min-width:0}
.nextstep .say-row:has(>details.help[open]){flex-wrap:wrap}
.nextstep .say-row details.help[open]{flex-basis:100%}
.nextstep .say-row .help-body .blurb{margin:0}

/* A band heading with a "?" after it. */
.topic .h-row{display:flex;flex-wrap:nowrap;align-items:center;gap:0 2px;margin:0 0 8px}
.topic .h-row:has(>details.help[open]){flex-wrap:wrap}
.topic .h-row>h3{margin:0 !important}
.topic .h-row details.help[open]{flex-basis:100%}

/* The What-differs paragraph is private to its reader: a quiet private zone,
   its label in the private ink (it sits in markup that is inside the shared
   zone), and the module inside it drawn without its own frame. */
.topic .zone.private.quiet>.module,.topic #shared .zone.private.quiet>.module{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.topic .zone.shared .zone.private .zlabel{color:var(--pv-ink)}
.topic .zone.private.quiet .h-row{margin-bottom:4px}
.topic #shared>.zone.private.quiet{margin-top:18px}

/* The two wordings side by side (stacked on a phone), as a solicitor's
   window has had them, with a hairline between them. */
.topic #shared>.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--sh-line);padding:0;overflow:hidden}
.topic #shared>.grid>.module{background:var(--sh-bg);padding:16px 18px}
.topic #shared>.grid>.module+.module{border-top:0}
/* The words one wording does not share with the other. */
.topic .quotable .dw{background:var(--tone-differs-bg);color:var(--tone-differs-ink);border-bottom:1.5px solid var(--tone-differs-line);border-radius:2px;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* The page's action under the wordings. */
.topic .write-different{margin-top:0}

/* Below the action: one heading over labelled rows, each opening alone. */
.topic .more{border-top:1px solid var(--color-divider);padding-top:18px;display:flex;flex-direction:column}
.topic .more>.more-h{font-family:var(--font-body);font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 4px}
.topic .more>*{margin-top:0}
.topic .more>.zone.private.quiet{margin-top:6px;margin-bottom:6px}
.topic .more>.zone.private.quiet>details{margin-top:0 !important;padding-top:2px}
.topic .more>.zone.private.quiet>details>summary{min-height:44px;font-size:16px}
.topic .more>.zone.private.quiet>.zlabel{margin-bottom:0}
.topic .more>details{border-top:1px solid var(--color-divider);padding-top:2px;margin-top:0 !important}
.topic .more>details>summary{min-height:44px;font-size:16px}
.topic .more>.line-offer{margin:8px 0 !important}
.topic .more>.zone.shared{margin:6px 0 12px}
.topic .more>.row{margin:6px 0 10px}
.topic .more-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12.5px;background:var(--sh-bg);color:var(--sh-ink);border:1px solid var(--sh-line)}
.topic .more .comments-fold>.comments{border-top:0;padding-top:4px}
.topic .more .comments-fold>.comments>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Still to settle: each question a card — number, question, a coloured state
   pill — with its buttons before the sample wordings. */
.topic .still-to-settle .gap-head{align-items:center}
.topic .still-to-settle .gap-head .gap-count{margin-left:auto}
.topic .still-to-settle .gap-head details.help[open]{order:3;flex-basis:100%}
.topic .still-to-settle .gap-head{flex-wrap:wrap;justify-content:flex-start}
.topic ol.gaps{display:flex;flex-direction:column;gap:10px}
.topic ol.gaps>li>details.gap{border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:0 14px;background:var(--color-bg)}
.topic ol.gaps>li:last-child>details.gap:not([open]){border-bottom:1px solid var(--color-divider)}
.topic details.gap>summary{align-items:center;padding:10px 0}
.topic details.gap>summary::before{margin-top:0}
.topic .gap .gap-state{max-width:none;margin-top:0;text-align:center;font-size:12.5px;font-weight:600;color:var(--t-ink);background:var(--t-bg);border:1px solid var(--t-line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.topic .gap .gap-state.turn{color:var(--t-ink)}
.topic .gap-body{padding:0 0 14px 4px}

/* The rail: the topic at a glance. */
.topic-rail{border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:14px 16px}
.topic-rail .rail-h{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 4px}
.topic-rail .rail-list{margin:0}
.topic-rail .rail-row{padding:9px 0;border-top:1px solid var(--color-divider)}
.topic-rail .rail-row:first-child{border-top:0;padding-top:4px}
.topic-rail dt{font-size:12.5px;color:var(--color-neutral-700);margin:0}
.topic-rail dd{margin:3px 0 0;font-size:14.5px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
.topic-rail dd .chip{align-self:flex-start}
.topic-rail .rail-who{display:flex;justify-content:space-between;gap:10px}
.topic-rail .rail-mark{color:var(--color-neutral-700);text-align:right}
.topic-rail .rail-mark.ok{color:var(--tone-agreed-ink);font-weight:600}
.topic-rail .rail-next{font-weight:600;color:var(--color-accent-700)}
/* Under 1100px the rail would land after the whole page, repeating what the
   stepper, the Who-has-agreed row and the page's own button already say at
   the top; it is a wide-screen summary, so narrower screens leave it out. */
@media(max-width:1099px){
  .rail:has(>.topic-rail){display:none}
}

/* Phones (S22 phase 3): tighter vertical rhythm, so the polish of phase 2 does
   not make the page taller than it was. */
@media(max-width:560px){
  /* The turn marker shares a line with the state's words instead of taking its own. */
  .topic .stepper{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:10px}
  .topic .stepper-row{display:contents}
  .topic .stepper-row>ol{flex:1 1 100%}
  .topic .stepper-now{order:1;margin-top:0}
  .topic .stepper-row>.turn,.topic .stepper-row>.stepper-note{order:2}
  .topic .callout.verdictbox{margin-top:12px}
  .topic .verdict{font-size:17px;line-height:1.4}
  .apr{margin-top:8px;gap:4px}
  .apr .albl{font-size:12px;margin-right:0}
  .aprchip{font-size:11.5px;padding:3px 6px}
  .topic .verdictbox .apr{margin-top:6px}
  .topic>.backlink{min-height:40px}
  .topic>h1{margin-top:12px}
  .topic>h1+.titlerow.topic-stage{margin-top:-8px}
  .gap-actions a.btn{min-height:38px}
  .topic #shared>.module:not([data-joint]),.topic #shared>.callout:not(.verdictbox){padding-top:14px;margin-top:14px}
  .topic #shared>.grid>.module{padding:12px 14px}
  .topic ol.gaps{gap:6px}
  .gap-body{padding:0 0 10px 0}
  .gap-body>*+*{margin-top:8px}
  .gap-body .row{margin-top:8px}
  .gap-actions{gap:6px 8px}
  .gap-actions .btn,details.gap-answer>summary{min-height:40px;padding-top:0;padding-bottom:0}
  details.gap-sample>summary{min-height:28px}
  .topic details.gap>summary{padding:6px 0}
  .topic .more{padding-top:10px}
  .topic .more>.zone.private.quiet{margin-top:2px;margin-bottom:2px}
  .topic .gap-body{padding-bottom:8px}
  .topic .more>details>summary,.topic .more>.zone.private.quiet>details>summary{min-height:40px}
}
/* ===== end group:s22-topic ===== */

/* ===== group:s22-home ===== */
/* The matter summary: "4 topics", the counts as tone pills, a thin bar in the
   same tones. Shared statuses only. */
.msum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.msum-head{display:flex;align-items:center;gap:2px}
.msum-total{margin:0;font-family:var(--font-heading);font-size:22px;line-height:1.2;color:var(--color-text)}
.msum-pills{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.msum-pill{display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 11px 2px 8px;border-radius:13px;font-size:14px;line-height:1.35;font-weight:500;background:var(--t-bg);color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-line) 45%,transparent)}
.msum-pill svg.i{color:var(--t-ink)}
.msum-pill b{font-weight:700}
.msum-bar{display:flex;flex:1 0 100%;gap:2px;height:8px;border-radius:4px;overflow:hidden;background:var(--color-neutral-300)}
.msum-seg{flex-basis:0;min-width:6px;background:var(--t-line)}
/* The list: a group per state, each with a toned heading and a count. */
.board-list .grp{margin-top:24px}
.board-list .same-list + .grp{margin-top:6px}
.board-list .grp-head{display:flex;align-items:center;gap:8px;margin:0 0 2px;padding:6px 0;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--t-ink);border-bottom:2px solid var(--t-line)}
.board-list .grp-name{display:inline-flex;align-items:center;gap:7px}
.board-list .grp-name svg.i{color:var(--t-ink)}
.board-list .grp-n{margin-left:auto;font-weight:600;font-feature-settings:"tnum";min-width:22px;text-align:center;padding:0 7px;border-radius:11px;background:var(--t-bg);letter-spacing:0}
.board-list details.grp{border-top:0;padding-top:0}
.board-list details.grp>summary.grp-head{cursor:pointer;min-height:44px;list-style:none}
.board-list details.grp>summary.grp-head::-webkit-details-marker{display:none}
.board-list details.grp>summary.grp-head::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-left:4px;flex:none}
.board-list details.grp[open]>summary.grp-head::after{transform:rotate(45deg)}
.board-list details.grp>summary.grp-head::before{display:none}
/* A topic row: a bar in its tone at the left, then the title and its stage. */
.board-list .issue{border-left:3px solid var(--t-line);padding-left:12px}
.issue .s{flex-wrap:wrap;gap:2px 12px}
.issue .s .cat{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-neutral-700)}
.issue .s .stepdots{font-weight:500}
/* The lawyer's dense row keeps its one line: title left, stage and category right. */
.lawyer-home .issue .s{justify-content:flex-end;flex-wrap:nowrap}
.lawyer-home .issue .s .cat{order:-1}
/* Next for you: one row per action, the verb as a button. */
.next-more{display:flex;flex-direction:column}
.next-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid var(--color-divider)}
.next-row:last-child{border-bottom:0}
.next-row .rc{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.next-row .rc .t{font-size:17px;color:var(--color-text)}
.next-row .rc .s.next-need{font-size:14px;color:var(--color-neutral-700);display:block}
.next-row .rc .s.next-also{font-size:13px;color:var(--color-accent-700);display:block}
.next-row .btn.next-verb{flex:none;width:auto;min-width:84px;min-height:44px;justify-content:center;margin:0}
@media (max-width: 560px){
  .next-row .btn.next-verb{width:auto;min-width:76px;padding:0 16px}
}
/* The working agreement (S22 phase 2B): the status line as tone pills over a
   thin bar, the open items as pills, the approval standing in a tone. On paper
   (the print page and @media print) all of it goes back to plain text. */
.aprog{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:0}
.astatus{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.apill{display:inline-flex;align-items:center;padding:2px 11px;border-radius:13px;font-size:13.5px;line-height:1.35;font-weight:500;color:var(--color-neutral-800);border:1px solid var(--color-divider);background:transparent}
.apill[class*="tone-"]{background:var(--t-bg);color:var(--t-ink);border-color:color-mix(in srgb,var(--t-line) 45%,transparent)}
.abar{display:flex;gap:2px;width:100%;min-width:160px;height:6px;border-radius:3px;overflow:hidden;background:var(--color-neutral-300)}
.aseg{flex-basis:0;min-width:6px;background:var(--t-line)}
.doc .clause.arow .ct .chip{margin-right:8px;font-size:13px;vertical-align:1px}
.aprove-line[class*="tone-"] .apst:last-child{background:var(--t-bg);color:var(--t-ink);border-radius:13px;padding:2px 10px;font-weight:500}
@media (max-width: 560px){
  .aprog{align-items:flex-start;flex:1 0 100%}
  .astatus{justify-content:flex-start}
}
.asep{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.doc.print .asep{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
.doc.print .astatus{gap:0}
.doc.print .abar,.doc.print .clause.arow .chip svg{display:none}
.doc.print .apill,.doc.print .clause.arow .chip,.doc.print .aprove-line .apst:last-child{background:none;border:0;padding:0;border-radius:0;color:inherit;font-weight:400}
.doc.print .clause.arow .ct .chip{margin-right:4px;font-size:inherit}
.doc.print .aprog{align-items:flex-start}
@media print{
  .abar,.doc .clause.arow .chip svg{display:none}
  .apill,.doc .clause.arow .chip,.aprove-line .apst:last-child{background:none;border:0;padding:0;border-radius:0;color:inherit;font-weight:400}
  .doc .clause.arow .ct .chip{margin-right:4px;font-size:inherit}
  .asep{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
  .astatus{gap:0}
}
/* ===== end group:s22-home ===== */

/* ===== group:s22-sheet ===== */
/* The balance sheet as a table (S22 phase 2C). The annex's table in the
   agreement is the pattern: Item, Who keeps it, the two values, Status; a
   sub-header row per section; and at phone width each row stacks instead of
   scrolling sideways. Rendering only: every figure and status is the fold's. */
.sheetpage{max-width:none}
.stable-wrap{margin-top:14px}
table.stable{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
table.stable thead th{font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);text-align:left;padding:6px 10px;border-bottom:1px solid var(--color-neutral-500);white-space:nowrap}
table.stable thead th.num{text-align:right}
table.stable td,table.stable th{vertical-align:top}
tbody.ssec{margin:0}
tr.ssec-h th{font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);text-align:left;padding:20px 10px 4px}
.sheetpage tbody.ssec tr.ssec-h h3{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border:0;padding:0;margin:0}
tbody.scard{border-bottom:1px solid var(--color-divider)}
tbody.scard tr.srow>td{padding:11px 10px 8px;min-width:0}
tbody.scard.proposed .s-name,tbody.scard.leftoff .s-name{color:var(--color-neutral-800)}
.s-name{display:block;font-size:17px;line-height:1.3;color:var(--color-text);overflow-wrap:anywhere}
.s-sub{display:block;font-size:13px;line-height:1.35;color:var(--color-neutral-700);margin-top:2px}
td.sk{width:23%}
.sk-ans{display:block;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.sdash{color:var(--color-neutral-600)}
td.sv{text-align:right;white-space:nowrap;font-feature-settings:"tnum";font-size:16px;width:12%}
td.sv.v-agreed,.sk-ans.v-agreed{color:var(--tone-agreed-ink)}
td.sv.v-differs,.sk-ans.v-differs{color:var(--tone-differs-ink)}
td.sv.v-differs{font-weight:600}
td.sstat{width:24%}
td.sstat>.spill{margin:0 0 6px}
/* The status pill: a filled pill in its state tone, icon first. */
.spill{display:flex;width:fit-content;max-width:100%;align-items:center;gap:5px;background:var(--t-bg);color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-line) 45%,transparent);border-radius:13px;padding:2px 11px 2px 7px;font-size:13px;font-weight:500;line-height:1.35}
.spill svg.i{flex:none;color:var(--t-ink)}
/* The halfway offer, in the status cell of a row whose values differ: one
   compact line, the figure and a small button, wrapping only when the cell is narrow. */
.shalf-row{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.shalf{font-size:13.5px;color:var(--color-neutral-800);font-feature-settings:"tnum";white-space:nowrap}
.shalf-row form{display:block;margin:0}
.shalf-row .btn{height:auto;min-height:32px;padding:4px 10px;font-size:14px;white-space:nowrap;line-height:1.3}
/* An answer's author, and a wait that is about that answer. */
.sk-by{color:var(--color-neutral-700);font-size:13px}
.sk-wait{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:13px;color:var(--tone-waiting-ink)}
.sk-wait svg.i{flex:none}
/* The thin row under an item: what is owed now, in the open, and one Edit. */
tbody.scard tr.sact>td{padding:0 10px 10px}
.sact-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-width:0}
.sact-in>.foot-accent{flex:1 1 100%;margin:0}
.sact-in>.sc-ask{flex:0 1 auto}
.sact-in>.sc-ask-keep{width:auto;flex:1 1 20em}
.sact-in details.sc-enter[open]{flex-basis:100%}
details.sedit{border-top:0;padding:0;margin:0 0 0 auto}
details.sedit>summary{font-size:14px;color:var(--color-neutral-700);min-height:36px;padding:0 6px}
details.sedit[open]{flex:1 1 100%;margin-left:0}
/* A closed Edit shrinks to its summary, so its folded forms would lay out
   beside it and past the viewport's edge: they take no space until it opens. */
details.sedit:not([open])>.sedit-body{display:none}
.sedit-body{display:grid;gap:16px;padding:4px 0 6px;max-width:34em}
.sedit-h{font-size:13px;letter-spacing:.04em;color:var(--color-neutral-700);margin:0 0 6px}
.sedit-body .stopics .tlist a{min-height:44px;border-bottom:1px solid var(--color-divider)}
.sedit-sec{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.sedit-sec>.sedit-h{flex:1 1 100%;margin:0}
.sedit-sec form{margin:0!important;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.sedit-sec form>label{flex:1 1 100%;margin:0}
.sedit-sec form .row{margin:0!important}
.sedit-sec input[type=text]{max-width:12em;flex:0 1 12em;min-width:0}
.sedit-body details{border-top:0;padding-top:0;margin-top:0}
/* Left off the sheet: the same table, under its own heading. */
.ssec#left-off{margin-top:28px}
.ssec#left-off h3{display:flex;align-items:center;gap:4px}
/* The right rail: where the sheet stands, then Totals. */
.sready{display:flex;gap:10px;align-items:flex-start;background:var(--t-bg);color:var(--t-ink);border:1px solid color-mix(in srgb,var(--t-line) 45%,transparent);border-radius:var(--radius-md);padding:12px 14px;font-size:15px;line-height:1.45;margin:0 0 18px}
.sready svg.i{flex:none;margin-top:2px}
.stotals{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:14px 16px 12px;margin-top:0}
.stotals h3{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700);margin:0 0 6px}
table.ttab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
table.ttab thead th{font-size:12px;font-weight:400;color:var(--color-neutral-700);text-align:right;padding:2px 0 6px 8px}
table.ttab tbody th{font-weight:400;text-align:left;color:var(--color-neutral-800);padding:5px 8px 5px 0}
table.ttab td.amt{text-align:right;font-feature-settings:"tnum";white-space:nowrap;padding:5px 0 5px 6px}
table.ttab tr.net th,table.ttab tr.net td{font-weight:600;color:var(--color-text);border-top:1px solid var(--color-text);padding-top:7px}
table.ttab tr.net td.amt{font-family:var(--font-heading);font-size:16px}
table.ttab tr.sup th,table.ttab tr.sup td{color:var(--color-neutral-700);font-size:13.5px}
@media(max-width:560px){
  table.stable,table.stable tbody{display:block}
  table.stable thead{display:none}
  .stable-wrap{margin-top:0}
  tbody.scard{padding-bottom:0}
  tr.ssec-h{display:block}
  tr.ssec-h th{display:block;padding:6px 0 0}
  .sheetpage details.sadd{margin-top:8px}
  .sheetpage details.sadd>summary{min-height:44px}
  /* One item: name, the two values side by side, then one full-width line for
     who keeps it and one for the status, so nothing wraps in a half column. */
  tbody.scard tr.srow{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:4px 0 0}
  tbody.scard tr.srow>td{display:block;padding:0;width:auto;text-align:left;white-space:normal}
  tbody.scard td.s-item{grid-column:1 / -1}
  tbody.scard td.s-item .s-name,tbody.scard td.s-item .s-sub{display:inline}
  tbody.scard td.s-item .s-sub{margin-left:8px}
  .s-name{font-size:16.5px}
  tbody.scard tr.srow>td.sv{order:1;display:flex;align-items:baseline;gap:8px;font-size:15px}
  tbody.scard tr.srow>td.sk{order:2;grid-column:1 / -1}
  tbody.scard tr.srow>td.sstat{order:3;grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
  td.sstat>.spill{margin:0}
  tbody.scard td.sv[data-label]::before{content:attr(data-label);display:inline;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-neutral-700);font-weight:400}
  tbody.scard td.sk[data-label]::before,tbody.scard td.sstat[data-label]::before{display:none}
  .sk-wait{display:inline-flex;margin:0 0 0 8px;vertical-align:baseline}
  .shalf-row{margin:0}
  tbody.scard tr.sact{display:block;padding:0}
  tbody.scard tr.sact>td{display:block;padding:0 0 2px}
  details.sedit>summary{min-height:26px}
  .sact-in{gap:4px 12px}
  .sact-in>.sc-ask-keep{flex-basis:100%}
  .ssec#left-off{margin-top:12px}
  .sheetpage>h1{margin-top:10px}
  .sready{padding:7px 12px;margin:0 0 10px;font-size:13.5px;line-height:1.4}
  .sready svg.i{display:none}
  .stotals{padding:8px 14px 6px}
  table.ttab tbody th,table.ttab td.amt{padding-top:1px;padding-bottom:1px}
  .stotals h3{margin-bottom:2px}
  table.ttab thead th{padding-bottom:3px}
}
/* ===== end group:s22-sheet ===== */