/* The Acceptie customer app (/app/*, templates/acceptie/): the AC-27 design system (Nov 9, 2026; decision D-36,
 * design/app-2026-11-09 in the Signing Service folder). Acceptie Q4 tokens (brand/acceptie/brand.md), six status tones,
 * one shell (top bar, side navigation from 1024px, tab bar on phones), cards, lists, forms, chips, sheets. The app alone
 * has the dark theme, which follows the OS. WCAG AA, phones first. Served by nginx from public/; the app's CSP allows it
 * (style-src 'self', font-src 'self', img-src 'self'). The "legacy" block at the end styles the pages whose templates
 * still carry the plain markup from before AC-27; each of PR 2-4 (Home/Documents, Templates/Bulk, Organization/You)
 * deletes the rules its pages no longer need. */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
/* ---------- tokens ---------- */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-cream: #FFF8F1;
  --color-page: var(--color-cream);
  --color-sunken: #F6F1EB;
  --color-border: #707985;
  --color-divider: #E6E2DC;
  --color-text: #1F2430;
  --color-text-muted: #59616B;
  --color-accent: #B83A14;
  --color-accent-hover: #962D0E;
  --color-accent-soft: #FBECE5;
  --color-on-accent: #FFFFFF;
  --color-focus: #B83A14;
  --color-error: #B3261E;
  --color-error-soft: #FDECEA;
  /* status tones: tint / text (4.5:1 on tint) / dot (3:1 on surface) */
  --tone-accent-bg: #FBECE5;  --tone-accent-fg: #962D0E;  --tone-accent-dot: #B83A14;
  --tone-success-bg: #E3F3E8; --tone-success-fg: #1B5E3A; --tone-success-dot: #2E8B57;
  --tone-warning-bg: #FFF1D6; --tone-warning-fg: #7A4B00; --tone-warning-dot: #C77D00;
  --tone-info-bg: #E4EEF9;    --tone-info-fg: #1E4E8C;    --tone-info-dot: #2F6DB5;
  --tone-error-bg: #FDECEA;   --tone-error-fg: #8F1F17;   --tone-error-dot: #B3261E;
  --tone-neutral-bg: #EEF0F3; --tone-neutral-fg: #3F4854; --tone-neutral-dot: #707985;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ring-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 8px 24px rgba(31,36,48,.16), 0 1px 3px rgba(31,36,48,.10);
  --topbar-h: 56px; --tabbar-h: 56px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
/* signer colours (AC-06): D-43 teal, indigo, olive; signer n wears ((n-1) % 3) + 1 and its number tells 4 and up apart
   (D-53). A PDF page is white in both themes, so whatever sits on the paper uses the -paper shades. D-52: dark mode lightens
   the shades on the app's own surfaces (>= 3:1 on #171C23, #1D232B and #242C35); --signer-on is the text on a signer
   colour (>= 4.5:1 on every shade it sits on: white in light mode, ink in dark). */
:root {
  --signer-1-paper: #0F766E; --signer-2-paper: #4338CA; --signer-3-paper: #4D7C0F;
  --signer-1-paper-tint: rgb(15 118 110 / .12); --signer-2-paper-tint: rgb(67 56 202 / .12); --signer-3-paper-tint: rgb(77 124 15 / .12);
  --signer-1: var(--signer-1-paper); --signer-2: var(--signer-2-paper); --signer-3: var(--signer-3-paper);
  --signer-1-tint: var(--signer-1-paper-tint); --signer-2-tint: var(--signer-2-paper-tint); --signer-3-tint: var(--signer-3-paper-tint);
  --signer-on: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root[data-product="acceptie-app"]:not([data-theme="light"]) {
    --signer-1: #2DD4BF; --signer-2: #A5B4FC; --signer-3: #9BC46A;
    --signer-1-tint: rgb(45 212 191 / .16); --signer-2-tint: rgb(165 180 252 / .16); --signer-3-tint: rgb(155 196 106 / .16);
    --signer-on: #171C23;
  }
}
@media (prefers-color-scheme: dark) {
  :root[data-product="acceptie-app"]:not([data-theme="light"]) {
    --color-bg: #171C23; --color-surface: #242C35; --color-page: #171C23; --color-sunken: #1D232B;
    --color-border: #A0AAB5; --color-divider: #3A444F; --color-text: #F7F8FA; --color-text-muted: #B9C4CD;
    --color-accent: #FFAE8F; --color-accent-hover: #FFC5AF; --color-accent-soft: #482C24; --color-on-accent: #171C23;
    --color-focus: #FFAE8F; --color-error: #FFB4AB; --color-error-soft: #3F2422;
    --tone-accent-bg: #482C24;  --tone-accent-fg: #FFC5AF;  --tone-accent-dot: #FFAE8F;
    --tone-success-bg: #1F3A2B; --tone-success-fg: #9BD8B2; --tone-success-dot: #6CC592;
    --tone-warning-bg: #3E3018; --tone-warning-fg: #F3C77A; --tone-warning-dot: #E0A94A;
    --tone-info-bg: #1F2E42;    --tone-info-fg: #A9C8F0;    --tone-info-dot: #7FAEE6;
    --tone-error-bg: #3F2422;   --tone-error-fg: #FFB4AB;   --tone-error-dot: #FF8C7F;
    --tone-neutral-bg: #2E3742; --tone-neutral-fg: #C5CDD6; --tone-neutral-dot: #8A95A3;
    --shadow: 0 8px 24px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display, so the attribute needs priority */
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--color-page); color: var(--color-text);
  font: 400 16px/1.5 var(--font-sans);
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: var(--font-mono); font-size: .9375em; background: var(--color-accent-soft); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
strong { font-weight: 700; }
.muted { color: var(--color-text-muted); }
.small { font-size: 14px; line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--color-surface); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring-focus); border-radius: 4px; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.lg { width: 24px; height: 24px; }
.icon.filled { fill: currentColor; stroke: none; }
.icon.xl { width: 40px; height: 40px; stroke-width: 1.75; }
@media (prefers-reduced-motion: no-preference) {
  a, button, .chip, .tab { transition: background-color .15s, color .15s, border-color .15s; }
}

/* ---------- shell: top bar, side nav (desktop), tab bar (phone) ---------- */
/* minmax(0,1fr) + min-width:0: a wide non-wrapping child (a scrolling segmented control, a long code) must scroll inside
   its box, not widen the page past a 360 px phone */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--topbar-h) + var(--sat)); padding: var(--sat) 12px 0 16px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
}
.topbar .brand { display: inline-flex; flex: none; padding: 4px; border-radius: 6px; margin-left: -4px; }
.topbar .brand img { display: block; height: 26px; width: auto; }
.topbar .brand .mark { display: none; height: 28px; }
.topbar .spacer { flex: 1; }
.org-switch {
  /* min-width 0: a long organization name gives way (ellipsis) instead of pushing the account menu off a 360 px screen */
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 46vw; min-width: 0;
  padding: 6px 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text); font-weight: 700;
}
.org-switch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switch:hover { background: var(--color-sunken); }
.avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; flex: none;
  background: var(--color-accent-soft); color: var(--tone-accent-fg); font-size: 13px; font-weight: 800; letter-spacing: .02em;
}
button.avatar { border: 0; width: 40px; height: 40px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.n1 { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.avatar.n2 { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.avatar.n3 { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }

.sidenav { display: none; }
.tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + var(--sab)); padding-bottom: var(--sab);
  background: var(--color-surface); border-top: 1px solid var(--color-divider);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--color-text-muted); font-size: 12px; font-weight: 600; border-radius: 6px; margin: 4px;
}
.tab .icon { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--color-accent); }
.tab[aria-current="page"] .icon { stroke-width: 2.5; }
.no-tabbar .tabbar { display: none; }

main.content { width: 100%; min-width: 0; max-width: 720px; margin: 0 auto; padding: 16px 16px 32px; }
main.content.wide { max-width: 960px; }

@media (min-width: 1024px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .topbar { grid-column: 1 / -1; padding-left: 20px; }
  .sidenav {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h));
    padding: 16px 12px; border-right: 1px solid var(--color-divider); background: var(--color-surface);
  }
  .sidenav a {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px;
    border-radius: var(--radius); text-decoration: none; color: var(--color-text); font-weight: 600;
  }
  .sidenav a:hover { background: var(--color-sunken); }
  .sidenav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--tone-accent-fg); }
  .sidenav .group { margin: 18px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
  .sidenav .send { margin: 0 0 12px; }
  .sidenav .send .btn { width: 100%; }
  .tabbar { display: none; }
  main.content { padding: 32px 40px 64px; }
}

/* ---------- auth frame (signed out) ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--color-page); }
.auth .authhead { display: flex; justify-content: center; padding: calc(28px + var(--sat)) 16px 8px; }
.auth .authhead img { height: 32px; width: auto; display: block; }
.auth main { width: 100%; max-width: 440px; margin: 0 auto; padding: 12px 16px 32px; align-self: center; }
.auth .card { padding: 28px 20px; }
.auth h1 { font-size: 24px; margin-bottom: 4px; }
.auth .lede { margin-bottom: 20px; }
.auth .btn--primary { width: 100%; }
.auth .authfoot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 16px 16px calc(24px + var(--sab)); font-size: 14px; }
.auth .authfoot a { color: var(--color-text-muted); text-decoration: none; }
.auth .authfoot a:hover { color: var(--color-accent); text-decoration: underline; }
@media (min-width: 600px) { .auth .card { padding: 36px; } .auth main { padding-top: 24px; } }
.auth .alt { text-align: center; margin-top: 20px; }
.auth .links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 14px; }
.auth .statepic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); margin: 0 0 16px; }

/* ---------- page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin: 4px 0 16px; }
.page-header .titles { flex: 1 1 240px; min-width: 0; }
.page-header h1 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.page-header .lede { color: var(--color-text-muted); margin-top: 4px; }
.page-header .actions { display: flex; gap: 8px; align-items: center; flex: none; }
.page-header .actions.full { flex: 1 0 100%; }
.page-header .actions.full .btn { flex: 1; }
.crumb { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--color-text-muted); }
.crumb:hover { color: var(--color-accent); }
.crumb .icon { width: 18px; height: 18px; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (min-width: 1024px) { .page-header h1 { font-size: 28px; } .page-header { margin-bottom: 24px; } }

/* ---------- cards and sections ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 16px; }
.card + .card, .card + .section, .section + .card, .section + .section { margin-top: 16px; }
.card h2, .section h2 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card .card-head .sub { color: var(--color-text-muted); font-size: 14px; margin-top: 2px; }
.card.accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.card.accent .muted, .card.accent .lede { color: var(--color-on-accent); opacity: .9; }
.card.flat { background: var(--color-sunken); border-color: transparent; }
/* Home's Send card: the whole card is the link */
.sendcard { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; text-decoration: none; }
.sendcard b { display: block; font-size: 20px; }
.sendcard .icon { width: 32px; height: 32px; }
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt24 { margin-top: 24px; } .mb4 { margin-bottom: 4px; } .mb20 { margin-bottom: 20px; } .center { text-align: center; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 8px; }
.section-title h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.section-title a { font-size: 14px; font-weight: 600; text-decoration: none; }
.grid-2 { display: grid; gap: 12px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.shortcuts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .shortcuts { grid-template-columns: repeat(4, 1fr); } }
.shortcut { display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 84px; text-decoration: none; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); font-weight: 700; }
.shortcut .icon { color: var(--color-accent); width: 24px; height: 24px; }
.shortcut:hover { border-color: var(--color-border); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--radius); border: 1px solid transparent;
  font-weight: 700; text-decoration: none; text-align: center; background: transparent; color: var(--color-text);
}
.qr-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 520px) { .qr-grid { grid-template-columns: auto minmax(0, 1fr); } }
.btn .icon { width: 20px; height: 20px; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
.btn--secondary { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }
.btn--secondary:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.btn--text { color: var(--color-accent); padding-inline: 10px; }
.btn--text:hover { background: var(--color-accent-soft); }
.btn--danger { color: var(--tone-error-fg); border-color: var(--tone-error-dot); background: var(--color-surface); }
.btn--danger:hover { background: var(--tone-error-bg); }
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn--icon { width: 44px; min-height: 44px; padding: 0; border-radius: 999px; color: var(--color-text-muted); }
.btn--icon:hover { background: var(--color-sunken); color: var(--color-text); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-divider); border-color: var(--color-divider); color: var(--color-text-muted); cursor: not-allowed; }
.btn.block { width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btnrow .btn { flex: 1 1 auto; }
@media (min-width: 600px) { .btnrow .btn { flex: 0 0 auto; } }

/* pinned action bar (phone) */
.pinbar {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--sab)); z-index: 10;
  display: flex; gap: 10px; margin: 16px -16px -16px; padding: 12px 16px calc(12px);
  background: var(--color-surface); border-top: 1px solid var(--color-divider);
}
.no-tabbar .pinbar { bottom: 0; padding-bottom: calc(12px + var(--sab)); }
.pinbar .btn { flex: 1; }
@media (min-width: 1024px) { .pinbar { position: static; margin: 24px 0 0; padding: 0; border: 0; background: transparent; justify-content: flex-start; } .pinbar .btn { flex: 0 0 auto; } }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px 2px 8px;
  border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  background: var(--tone-neutral-bg); color: var(--tone-neutral-fg);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--tone-neutral-dot); flex: none; }
.chip--accent { background: var(--tone-accent-bg); color: var(--tone-accent-fg); } .chip--accent::before { background: var(--tone-accent-dot); }
.chip--success { background: var(--tone-success-bg); color: var(--tone-success-fg); } .chip--success::before { background: var(--tone-success-dot); }
.chip--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); } .chip--warning::before { background: var(--tone-warning-dot); border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
.chip--info { background: var(--tone-info-bg); color: var(--tone-info-fg); } .chip--info::before { background: var(--tone-info-dot); }
.chip--error { background: var(--tone-error-bg); color: var(--tone-error-fg); } .chip--error::before { background: var(--tone-error-dot); border-radius: 1px; }
.chip--neutral::before { background: transparent; border: 2px solid var(--tone-neutral-dot); width: 6px; height: 6px; }
.chip--outline { background: transparent; border: 1px solid var(--color-border); }
.chip.nodot::before { display: none; }
.chip.nodot { padding-left: 10px; }

/* ---------- segmented control ---------- */
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--color-sunken); border-radius: 10px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button, .segmented a {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted);
  font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.segmented [aria-pressed="true"], .segmented [aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(31,36,48,.12); }
.segmented .count { font-size: 12px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); min-width: 20px; text-align: center; }
.segmented [aria-pressed="true"] .count.hot, .segmented [aria-current="page"] .count.hot { background: var(--color-accent); color: var(--color-on-accent); }
/* the Documents search: a plain GET form above the tabs */
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar .control { flex: 1; min-width: 0; }
.searchbar .control:focus-visible { border-color: var(--color-focus); box-shadow: var(--ring-focus); outline: 0; }

/* ---------- list rows ---------- */
.list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden; }
.row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "lead title chip" "lead meta chip"; column-gap: 12px; row-gap: 2px; align-items: center;
  min-height: 64px; padding: 12px 12px 12px 16px; text-decoration: none; color: var(--color-text); border-top: 1px solid var(--color-divider); position: relative;
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--color-sunken); }
.row .lead { grid-area: lead; display: grid; place-items: center; }
.row .lead:empty { display: none; }
.row:not(:has(.lead)) { grid-template-columns: 1fr auto; grid-template-areas: "title chip" "meta chip"; }
.row .row-title { grid-area: title; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .row-meta { grid-area: meta; font-size: 14px; color: var(--color-text-muted); line-height: 1.4; }
.row .row-end { grid-area: chip; display: flex; align-items: center; gap: 8px; }
.row .row-end .chev { color: var(--color-text-muted); width: 20px; height: 20px; }
.row .row-end .btn--icon { margin: -6px -6px -6px 0; }
.row.static:hover { background: transparent; }
.row .chip { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 600px) { .row .chip { max-width: none; } }
.list .more { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--color-divider); }

/* ---------- empty state ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 32px 20px; color: var(--color-text-muted); }
.empty .statepic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); }
.empty h2, .empty h3 { color: var(--color-text); font-size: 17px; line-height: 1.3; font-weight: 700; }
.empty .btn { margin-top: 8px; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label, .field .label { font-weight: 700; }
.field .help { font-size: 14px; color: var(--color-text-muted); }
.field .err { font-size: 14px; color: var(--tone-error-fg); display: flex; gap: 6px; align-items: flex-start; }
.field .err .icon { width: 18px; height: 18px; margin-top: 2px; }
.field.invalid .control { border-color: var(--color-error); }
.control, .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px;
  color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .control:focus-visible { border-color: var(--color-focus); box-shadow: var(--ring-focus); outline: 0; }
.withbtn { position: relative; }
.withbtn input { padding-right: 76px; }
.withbtn .btn--text { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; padding-inline: 10px; font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--color-accent); }
.check .help { display: block; }
.choice-cards { display: grid; gap: 10px; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); cursor: pointer; }
.choice input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-accent); }
.choice b { display: block; }
.choice .small { color: var(--color-text-muted); }
.choice:has(input:checked) { border: 2px solid var(--color-accent); padding: 13px 15px; background: var(--color-accent-soft); }
.rule { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-text-muted); }
.rule .icon { width: 16px; height: 16px; }
.rule.ok { color: var(--tone-success-fg); }
.dropzone { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; text-align: center; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-text-muted); }
.dropzone .icon { width: 32px; height: 32px; color: var(--color-accent); }
.dropzone b { color: var(--color-text); }
.filechip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: var(--radius); background: var(--color-bg); }
.filechip .icon { color: var(--color-accent); }
.filechip .name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.filechip { text-decoration: none; color: var(--color-text); }
a.filechip:hover { border-color: var(--color-border); }
.code-input { display: block; width: 100%; max-width: 320px; min-height: 56px; padding: 10px 0 10px 14px; font: 800 28px/1 var(--font-mono); letter-spacing: 16px; text-align: left; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--color-border); position: relative; flex: none; margin: 0; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--color-accent); }
.switch input:checked::after { transform: translateX(20px); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 36px; height: 36px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-surface); }
.step-indicator { display: flex; gap: 6px; align-items: center; margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); flex-wrap: wrap; }
.step-indicator .step { display: inline-flex; align-items: center; gap: 6px; }
.step-indicator .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: 12px; }
.step-indicator .step[aria-current="step"] { color: var(--color-text); }
.step-indicator .step[aria-current="step"] .n { background: var(--color-accent); color: var(--color-on-accent); }
.step-indicator .step.done .n { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.step-indicator .sep { width: 16px; height: 1px; background: var(--color-divider); }

/* ---------- meter ---------- */
.meter { display: grid; gap: 6px; }
.meter .meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.meter .meter-head b { font-size: 20px; font-weight: 800; }
.meter .track { height: 8px; border-radius: 999px; background: var(--color-sunken); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: var(--color-accent); width: var(--v, 0%); }
.meter.warn .fill { background: var(--tone-warning-dot); }
.meter .small { color: var(--color-text-muted); }
/* the native bar (no inline width under style-src 'self'): same track and fill as .track/.fill */
.meter progress { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-sunken); color: var(--color-accent); }
.meter progress::-webkit-progress-bar { background: var(--color-sunken); }
.meter progress::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }
.meter progress::-moz-progress-bar { background: var(--color-accent); border-radius: 999px; }

/* ---------- timeline (recipients) ---------- */
.timeline { display: grid; gap: 0; }
.tl { display: grid; grid-template-columns: 28px 1fr auto; column-gap: 12px; padding: 10px 0; position: relative; align-items: start; }
.tl + .tl::before { content: ""; position: absolute; left: 13px; top: -14px; height: 24px; width: 2px; background: var(--color-divider); }
.tl .dot { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); }
.tl .dot .icon { width: 16px; height: 16px; }
.tl.done .dot { background: var(--tone-success-dot); border-color: var(--tone-success-dot); color: #fff; }
.tl.now .dot { border-color: var(--color-accent); color: var(--color-accent); }
.tl.later .dot { border-style: dashed; }
.tl.stopped .dot { background: var(--tone-error-dot); border-color: var(--tone-error-dot); color: #fff; }
.tl-action { margin: -4px 0 6px 40px; }
.tl .who b { display: block; }
.tl .who .small { color: var(--color-text-muted); overflow-wrap: anywhere; }
.tl .when { font-size: 14px; color: var(--color-text-muted); text-align: right; white-space: nowrap; }

/* ---------- stacked tables ---------- */
.stack-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.stack-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--color-divider); }
.stack-table td { padding: 10px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
@media (max-width: 719px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; }
  .stack-table tr { padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
  .stack-table td { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 4px 0; border: 0; }
  .stack-table td::before { content: attr(data-l); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 3px; }
  .stack-table td.full { grid-template-columns: 1fr; } .stack-table td.full::before { display: none; }
}

/* ---------- receipt ---------- */
.receipt { display: grid; gap: 8px; }
.receipt .line { display: flex; justify-content: space-between; gap: 12px; }
.receipt .line.total { border-top: 1px solid var(--color-divider); padding-top: 8px; font-weight: 800; font-size: 18px; }
.plan-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 12px; margin: 0 -16px; scrollbar-width: none; }
.plan-scroll::-webkit-scrollbar { display: none; }
.plan { flex: 0 0 82%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface); }
.plan.current { border-color: var(--color-border); }
.plan.rec { border: 2px solid var(--color-accent); }
.plan .price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan .price span { font-size: 14px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0; }
.plan ul { display: grid; gap: 6px; font-size: 14px; color: var(--color-text-muted); }
.plan ul li { display: flex; gap: 8px; align-items: flex-start; }
.plan ul .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--tone-success-dot); }
.plan .btn { margin-top: auto; }
@media (min-width: 720px) { .plan-scroll { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible; margin: 0; padding: 0; } .plan { flex: auto; } }

/* ---------- menus, sheets, toasts ---------- */
.menu { position: absolute; right: 8px; top: calc(100% - 8px); z-index: 30; min-width: 220px; padding: 6px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: none; }
.menu[data-open] { display: block; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text); text-align: left; text-decoration: none; font-weight: 600; }
.menu button:hover, .menu a:hover { background: var(--color-sunken); }
.menu .danger { color: var(--tone-error-fg); }
.menu hr { border: 0; border-top: 1px solid var(--color-divider); margin: 6px 0; }
.has-menu { position: relative; }

dialog.sheet { border: 0; padding: 0; background: transparent; max-width: none; width: 100%; margin: auto 0 0; }
dialog.sheet::backdrop { background: rgba(31,36,48,.4); }
.sheet .panel { background: var(--color-surface); color: var(--color-text); border-radius: 16px 16px 0 0; padding: 8px 16px calc(16px + var(--sab)); max-height: 88dvh; overflow: auto; }
.sheet .handle { width: 40px; height: 4px; border-radius: 999px; background: var(--color-border); margin: 4px auto 12px; }
.sheet .panel h2 { font-size: 20px; margin-bottom: 4px; }
.sheet .panel .lede { color: var(--color-text-muted); margin-bottom: 16px; }
.sheet .sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet .sheet-actions .btn { flex: 1; }
@media (min-width: 720px) {
  dialog.sheet { width: 480px; margin: auto; }
  .sheet .panel { border-radius: 16px; padding: 20px 24px 24px; }
  .sheet .handle { display: none; }
}
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--sab) + 12px); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow); font-weight: 600; }
.toast .btn--text { color: var(--color-accent); min-height: 32px; }
:root[data-product="acceptie-app"] .toast .btn--text { color: #FFAE8F; }
.toast[hidden] { display: none; }
@media (min-width: 1024px) { .toast { bottom: 24px; } }

/* ---------- alerts (inline) ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; background: var(--tone-info-bg); color: var(--tone-info-fg); }
.alert .icon { width: 20px; height: 20px; margin-top: 2px; }
.alert--success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.alert--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.alert--error { background: var(--tone-error-bg); color: var(--tone-error-fg); }
.alert a { color: inherit; font-weight: 700; }

/* ---------- misc ---------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codes code { display: block; padding: 10px; text-align: center; font-size: 15px; background: var(--color-sunken); }
.preview-mail { border: 1px solid var(--color-divider); border-radius: var(--radius); overflow: hidden; background: var(--color-bg); font-size: 14px; }
.preview-mail .mh { display: grid; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--color-divider); background: var(--color-sunken); }
.preview-mail .mb { padding: 14px 12px; display: grid; gap: 10px; }
.preview-mail .mbtn { display: inline-block; justify-self: start; padding: 8px 14px; border-radius: 6px; color: #fff; font-weight: 700; background: var(--brand, var(--color-accent)); }
.big-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
hr.div { border: 0; border-top: 1px solid var(--color-divider); margin: 16px 0; }
.qr { display: block; width: 168px; height: 168px; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 8px; padding: 8px; }
.danger-zone { border-color: var(--tone-error-dot); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 16px 0; color: var(--color-muted); font-size: 14px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--color-border); }

/* ---------- shell extras the real app needs (AC-27 PR 1) ---------- */
a.org-switch { text-decoration: none; }
details.has-menu > summary { list-style: none; cursor: pointer; }
details.has-menu > summary::-webkit-details-marker { display: none; }
details.has-menu[open] > .menu { display: block; }
.menu .who { padding: 8px 10px 10px; }
.menu form { margin: 0; }
.auth .alert { margin-bottom: 16px; }
.auth form .links { align-items: center; }
.auth .links .link { font-size: 14px; }

/* ---------- AC-27 Organization and You (separate from AC-06) ---------- */
.org-usage { display: grid; gap: 16px; margin-top: 16px; }
.org-usage p { margin-block: 8px; }
@media (min-width: 600px) { .org-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-members { display: grid; gap: 12px; }
.org-members .card + .card { margin-top: 0; }
.org-members .card-head > div { min-width: 0; }
.org-members h3, .org-members p, .org-settings, .org-table, .org-disclosure { overflow-wrap: anywhere; }
.org-disclosure > summary { cursor: pointer; font-weight: 700; min-height: 44px; padding-block: 10px; }
.org-disclosure > form, .org-disclosure > p { margin-top: 12px; }
.org-form { margin-block: 16px; }
.org-form p { margin-block: 12px; }
.org-fieldset { min-width: 0; padding: 0; border: 0; }
.org-fieldset legend { font-weight: 700; margin-bottom: 12px; }
.org-check { display: flex; gap: 10px; align-items: start; margin-block: 16px; }
.org-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-accent); }
.org-check label { font-weight: 400; }
.org-settings .choice { margin-bottom: 10px; }
.org-receipt { padding-left: 20px; }
.org-receipt li { margin-bottom: 10px; }
.org-qr { width: 240px; max-width: 100%; background: white; }
.org-qr svg { display: block; width: 100%; height: auto; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.recovery-grid li { padding: 12px; background: var(--color-sunken); border-radius: var(--radius); text-align: center; overflow-wrap: anywhere; }
.org-switch-row { width: 100%; background: transparent; border: 0; text-align: left; }
.list form + form { border-top: 1px solid var(--color-divider); }
.org-table table { table-layout: fixed; width: 100%; overflow-wrap: anywhere; }
.org-table td { min-width: 0; }
.brand-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.brand-swatch { border-left-width: 12px; }
.brand-swatch[aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.brand-swatch--terracotta { border-left-color: #b83a14; }
.brand-swatch--teal { border-left-color: #0f766e; }
.brand-swatch--navy { border-left-color: #1e4e8c; }
.brand-swatch--olive { border-left-color: #4d7c0f; }
.brand-swatch--plum { border-left-color: #7a1f57; }
.brand-swatch--ink { border-left-color: #1f2430; }
.brand-sample { padding: 16px; border: 1px solid var(--color-divider); border-radius: var(--radius); margin-block: 16px; }
.brand-sample-page { background: white; color: #1f2430; border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.brand-sample-page img { max-width: 100%; object-fit: contain; }
.brand-sample-page p { margin-block: 12px; }
.brand-sample-button { display: inline-block; padding: 12px 16px; border-radius: var(--radius); background: var(--brand-preview-accent, #b83a14); color: white; font-weight: 700; }
.brand-preview { display: grid; gap: 6px; margin-block: 12px; }
.brand-preview dt { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.brand-preview dd { margin: 0 0 8px; overflow-wrap: anywhere; }
.brand-preview img { max-width: 100%; object-fit: contain; }

/* ---------- AC-27 Templates and Bulk (kept separate from AC-06 editor styles) ---------- */
.template-use fieldset, .template-fields { min-width: 0; }
.template-use legend, .template-fields legend { font-weight: 700; padding: 0 6px; }
.template-use fieldset + fieldset { margin-top: 16px; }
.template-links { display: grid; gap: 12px; }
.template-link { padding: 16px 0; border-top: 1px solid var(--color-divider); }
.template-disclosure > summary { cursor: pointer; font-weight: 700; min-height: 44px; padding-block: 10px; }
.template-disclosure p, .template-link-action { margin-top: 12px; }
.template-link-action .control { display: block; margin-block: 6px; }
.template-gallery .card { min-width: 0; overflow-wrap: anywhere; }
.template-gallery .card + .card { margin-top: 0; }
.template-limitations, .bulk-receipt { padding-left: 20px; margin-top: 12px; }
.template-limitations li, .bulk-receipt li { margin-top: 8px; }
.signing-link-qr { background: white; width: 240px; max-width: 100%; }
.signing-link-qr svg { display: block; width: 100%; height: auto; }
.bulk-table { table-layout: fixed; overflow-wrap: anywhere; }
.bulk-table select { min-width: 0; max-width: 100%; }
.bulk-table td { min-width: 0; }
@media (max-width: 719px) { .bulk-table caption { display: block; text-align: left; font-weight: 700; } }

/* ---------- legacy: pages not yet restyled (plain markup inside main.content > .card.legacy) ---------- */
.legacy h1 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 16px; }
.legacy h2 { font-size: 18px; line-height: 1.3; margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--color-divider); }
.legacy p { margin: 0 0 16px; }
.legacy p:last-child { margin-bottom: 0; }
.legacy ul { margin: 0 0 16px; padding-left: 1.25rem; list-style: disc; }
.legacy ol { margin: 0 0 16px; padding-left: 1.25rem; list-style: decimal; }
.legacy li { margin-bottom: 8px; }
.legacy p[role="status"], .legacy p[role="alert"] { padding: 12px 14px; border-radius: 6px; margin-bottom: 20px; }
.legacy p[role="status"] { border-left: 4px solid var(--color-accent); background: var(--color-accent-soft); }
.legacy p[role="alert"] { border-left: 4px solid var(--color-error); background: var(--color-error-soft); }
.legacy form { margin: 0 0 16px; }
.legacy label { font-weight: 600; }
.legacy input[type="text"], .legacy input[type="email"], .legacy input[type="password"], .legacy input[type="number"], .legacy input[type="url"],
.legacy input[type="tel"], .legacy input:not([type]), .legacy select, .legacy textarea {
  width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 12px; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.legacy input[type="text"], .legacy input[type="email"], .legacy input[type="password"], .legacy select { max-width: 420px; }
.legacy td select { width: auto; min-height: 40px; margin: 0 8px 0 0; }
.legacy input[type="checkbox"], .legacy input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--color-accent); }
.legacy p:has(> input[type="checkbox"]:not([hidden])), .legacy p:has(> input[type="radio"]) { display: flex; gap: 10px; align-items: flex-start; }
.legacy p:has(> input[type="checkbox"]) > label, .legacy p:has(> input[type="radio"]) > label { font-weight: 400; }
.legacy fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.legacy legend { font-weight: 700; font-size: 1.0625rem; margin-bottom: 12px; padding: 0; }
.legacy fieldset p:has(> input[type="radio"]) { padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.legacy fieldset p:has(> input[type="radio"]:checked) { border: 2px solid var(--color-accent); padding: 13px 15px; background: var(--color-accent-soft); }
.legacy button:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; font-weight: 700;
  color: var(--color-on-accent); background: var(--color-accent); border: 0; border-radius: var(--radius);
}
.legacy button:not(.btn):hover { background: var(--color-accent-hover); }
.legacy td button, .legacy li button { min-height: 36px; padding: 6px 14px; font-size: 0.875rem; color: var(--color-accent); background: transparent; border: 1px solid var(--color-accent); }
.legacy td button:hover, .legacy li button:hover { color: var(--color-on-accent); background: var(--color-accent); }
.legacy td form, .legacy li form { display: inline-flex; align-items: center; margin: 4px 8px 4px 0; }
.legacy li form { margin-left: 4px; }
/* a link's revoke form takes its own row below the action buttons: the label above, then the confirmation and its button (AC-10, #142) */
.legacy li form.revoke { display: block; margin: 12px 0 4px; }
.legacy li form.revoke input { max-width: 260px; margin-bottom: 8px; }
.legacy button.link, button.link { min-height: 0; padding: 0; font-weight: 600; color: var(--color-text); background: none; border: 0; text-decoration: none; }
.legacy button.link:hover, button.link:hover { color: var(--color-accent); background: none; text-decoration: underline; }
.legacy button:disabled { background: var(--color-divider); color: var(--color-text-muted); cursor: not-allowed; }
.legacy input:focus-visible, .legacy select:focus-visible, .legacy textarea:focus-visible { border-color: var(--color-focus); }
/* tables sit in a .table-scroll wrapper (tabindex="0" + role="region": Safari keyboard-scrolls only a focusable box) */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 16px; border-radius: 6px; }
.table-scroll:focus-visible { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus); outline: 0; }
.legacy table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.9375rem; }
.legacy th, .legacy td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--color-divider); }
.legacy th { font-weight: 700; color: var(--color-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.legacy td label { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pending-features { color: var(--color-text-muted); }
.pending-features span { font-size: .875rem; margin-left: .5rem; }
.document-list li { padding: .75rem 0; border-bottom: 1px solid var(--color-divider); overflow-wrap: anywhere; }
.document-list span { display: block; color: var(--color-text-muted); }
#document-composer .legacy label:not([hidden]) { display: block; }
#document-composer .legacy > label, #other-signer > label { margin-top: 16px; }
/* the PDF picker as one large card (the mockup's "Choose a PDF"), its button a 44 px target; AC-27 PR 5 frames the steps */
#document-composer input[type="file"] { display: block; width: 100%; max-width: 420px; min-height: 96px; margin: 6px 0 24px; padding: 16px; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-sunken); color: var(--color-text-muted); font-size: 14px; cursor: pointer; }
#document-composer input[type="file"]:hover:not(:disabled) { border-color: var(--color-accent); }
#document-composer input[type="file"]:focus-visible { border-color: var(--color-focus); box-shadow: var(--ring-focus); outline: 0; }
#document-composer input[type="file"]::file-selector-button { display: block; min-height: 44px; margin: 0 0 8px; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--color-accent); color: var(--color-on-accent); font: 700 16px/1 var(--font-sans); cursor: pointer; }
#document-composer input[type="file"]:disabled::file-selector-button { opacity: .5; }
/* AC-09b: a text template's wording, and its preview drawn one page per canvas */
#template-text label { display: block; margin-top: 16px; }
#template-source { display: block; width: 100%; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.5; }
#marker-help { margin: 1.5rem 0; padding: 0 1rem; border: 1px solid var(--color-divider); border-radius: var(--radius); overflow-wrap: anywhere; }
.document-list .limitations { margin: .25rem 0 .5rem; padding-left: 1.25rem; color: var(--color-text-muted); }
.document-list .limitations li { padding: 0; border: 0; list-style: disc; }
.template-preview canvas { display: block; width: 100%; height: auto; margin: 1rem 0; background: white; border: 1px solid var(--color-divider); }

/* ---------- AC-27 Send frame (shared with the AC-06 builder) ---------- */
.flow-steps { padding: 0; list-style: none; }
.flow-steps .step:not(:last-child)::after { content: ""; width: 12px; height: 1px; background: var(--color-divider); }
#document-composer > .card { margin-bottom: 16px; }
#document-composer > .card h2 { margin-bottom: 16px; }
.flow-group { min-width: 0; padding: 0; margin: 0; border: 0; }
.flow-group.card { padding: 16px; border: 1px solid var(--color-divider); }
.flow-group legend { float: left; width: 100%; margin-bottom: 16px; font-size: 18px; font-weight: 700; }
.flow-group legend + * { clear: both; }
.flow-recipient { margin-top: 20px; }
.flow-merge { border-top: 1px solid var(--color-divider); padding-top: 16px; margin-top: 16px; }
.flow-entry { padding-bottom: 72px; }
.flow-entry .pinbar .btn { margin: 0; }
.flow-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 16px; }
.flow-summary dt { color: var(--color-text-muted); }
.flow-summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.flow-builder-head { grid-area: top; background: var(--color-surface); padding-top: var(--sat); }
.flow-builder-head .flow-steps { padding: 8px 12px 0; margin: 0; }
.flow-builder-head .b-top { height: 56px; padding-top: 0; }
.flow-review-steps { display: none; }
.b-sheet:has(#review-document:not([hidden])) .flow-review-steps { display: block; }
.builder:has(> .flow-builder-head) { grid-template-rows: auto minmax(0, 1fr) auto; }
@media (min-width: 1024px) {
  .flow-entry { padding-bottom: 0; }
  .builder:has(> .flow-builder-head) .b-mode { top: calc(100px + var(--sat)); }
  .builder:has(> .flow-builder-head) { grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-height: 500px) and (max-width: 1023px) {
  .builder:has(> .flow-builder-head) { grid-template-rows: auto minmax(0, 1fr); }
  .flow-builder-head .flow-steps { display: none; }
  .flow-builder-head .b-top { height: 48px; }
}

/* ---------- AC-06 field builder ---------- */
/* The Fields step of the document and template composer (templates/acceptie/_field_builder.html.twig, documents.js),
   full screen over the app while it is open. Phone first: top bar, the pages in one scroll, one 156 px bottom bar in
   thumb reach. 1024 px and up: a left rail (who new fields are for, the field palette, pages), a right panel (the
   selected field's options, else every field) and a toolbar beside the selected field. The paper and everything drawn
   on it (fields, the terracotta selection ring) keep their light colours in dark mode: a PDF page is always white. */
.builder-open { overflow: hidden; }
.builder-open .topbar, .builder-open .tabbar, .builder-open .sidenav { display: none; }
.b-entry { margin-top: 24px; }
.b-entry .b-summary:empty { display: none; }
.b-entry .btn { margin-bottom: 16px; }
.builder {
  position: fixed; inset: 0; z-index: 30; display: grid; height: 100dvh;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top" "stage" "dock";
  background: var(--color-bg); color: var(--color-text);
}
.b-top { grid-area: top; display: flex; align-items: center; gap: 2px; height: calc(56px + var(--sat)); padding: var(--sat) 8px 0 4px; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.b-top .btn--icon:disabled { background: transparent; border-color: transparent; opacity: .4; }
.b-top .btn--sm { margin-left: 4px; min-height: 44px; }
.b-back .icon { transform: rotate(180deg); }
.b-doc { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text); text-align: left; }
.b-doc:hover { background: var(--color-sunken); }
.b-doc-tx { min-width: 0; }
.b-doc-t { display: block; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-doc-s { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.b-doc .icon { width: 16px; height: 16px; color: var(--color-text-muted); }

/* the stage: pages in one vertical scroll; pan-x pan-y lets a two-finger pinch zoom the document, not the app */
.b-stagewrap { grid-area: stage; position: relative; z-index: 0; min-height: 0; background: var(--color-sunken); } /* its own stacking context: a selected field stays under the Options sheet */
.b-stage { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.b-pages { width: max-content; min-width: 100%; padding: 8px 8px 72px; }
.b-pages.pinching { will-change: transform; }
.builder:has(.b-options[open]) .b-pages { padding-bottom: 58vh; }
.b-page, .b-tbox { /* the paper: signer shades stay the paper ones in dark mode (D-52) */
  --signer-1: var(--signer-1-paper); --signer-2: var(--signer-2-paper); --signer-3: var(--signer-3-paper);
  --signer-1-tint: var(--signer-1-paper-tint); --signer-2-tint: var(--signer-2-paper-tint); --signer-3-tint: var(--signer-3-paper-tint); --signer-on: #FFFFFF;
}
.b-page { position: relative; margin: 0 auto 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .08); }
.b-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-pagenote { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: #59616B; font-size: 14px; }
.b-layer { position: absolute; inset: 0; }
.b-stage.armed .b-page { outline: 2px dashed #B83A14; outline-offset: 2px; cursor: crosshair; } /* outside the page: the canvas covers its inside */
.b-stage.armed .b-field { pointer-events: none; opacity: .5; }
.b-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow); }
.b-zoom button { display: grid; place-items: center; min-width: 44px; height: 44px; border: 0; background: transparent; color: var(--color-text); font-weight: 700; font-size: 18px; }
.b-zoom #zoom-fit { min-width: 56px; font-size: 13px; border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); }
.b-zoom button:focus-visible { box-shadow: inset 0 0 0 3px var(--color-focus); border-radius: 9px; } /* inside: .b-zoom clips an outer ring */
.b-zoom button:disabled { color: var(--color-text-muted); opacity: .45; cursor: not-allowed; }
.b-zoom button:hover:not(:disabled) { background: var(--color-sunken); }
/* the same − level + as a segmented control: the desktop top bar and the Pages sheet */
.b-zoomrow { display: inline-flex; align-items: center; border: 1.5px solid var(--color-divider); border-radius: 10px; overflow: hidden; }
.b-zoomrow button { display: grid; place-items: center; min-width: 44px; height: 40px; border: 0; background: transparent; color: var(--color-text); font-weight: 700; font-size: 18px; }
.b-zoomrow .lvl { min-width: 64px; font-size: 13px; border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); }
.b-zoomrow button:hover:not(:disabled) { background: var(--color-accent-soft); }
.b-zoomrow button:disabled { color: var(--color-text-muted); opacity: .45; cursor: not-allowed; }
.b-zoomrow button:focus-visible { box-shadow: inset 0 0 0 3px var(--color-focus); border-radius: 9px; }
.b-top .b-zoomrow { display: none; }

/* fields: a 12% tint and a border in the signer's colour, the signer's number in a block of that colour */
.b-field {
  position: absolute; display: block; margin: 0; padding: 0; border: 1.5px solid var(--c); border-radius: 3px; background: var(--t); color: #1F2430;
  text-align: left; font: 600 11px/1 var(--font-sans); touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
}
.b-field::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.b-field .in { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; padding-right: 3px; overflow: hidden; pointer-events: none; white-space: nowrap; }
.b-field .num { flex: none; align-self: stretch; display: grid; place-items: center; min-width: 14px; padding: 0 2px; background: var(--c); color: #FFFFFF; font: 700 11px/1 var(--font-sans); }
.b-field .in .icon { width: 12px; height: 12px; margin-left: 3px; color: var(--c); }
.b-field.tall { font-size: 12px; }
.b-field.tall .in .icon { width: 14px; height: 14px; }
.b-field.tall .num { min-width: 16px; font-size: 12px; }
.b-field .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b-field .req { color: var(--c); font-weight: 700; }
.b-field.cb .cbmark { position: absolute; inset: 10%; width: 80%; height: 80%; stroke: var(--c); stroke-width: 3; }
.b-field.cb .tag { position: absolute; right: calc(100% + 3px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; height: 14px; padding: 0 3px; border-radius: 3px; background: var(--c); color: #FFFFFF; font: 700 11px/1 var(--font-sans); pointer-events: none; }
.b-field:hover { box-shadow: 0 0 0 1px var(--c); }
.b-field:focus-visible { border-radius: 3px; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #B83A14; }
.b-field.sel { z-index: 40; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #B83A14; }
.b-field.sel.tiny { box-shadow: 0 0 0 8px rgb(255 255 255 / .92), 0 0 0 10px #B83A14; }
.b-field.sel:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #B83A14, 0 0 0 6px #FFFFFF, 0 0 0 8px #B83A14; }
.b-field.lift { cursor: grabbing; transform: scale(1.02); box-shadow: 0 10px 24px rgb(0 0 0 / .28), 0 0 0 2px #FFFFFF, 0 0 0 4px #B83A14; }
.b-field .handle { position: absolute; right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: #B83A14; border: 2.5px solid #FFFFFF; box-shadow: 0 1px 3px rgb(0 0 0 / .4); touch-action: none; cursor: nwse-resize; }
.b-field .handle.hz { cursor: ew-resize; }
.b-field .handle::before { content: ""; position: absolute; inset: -12px; }
.b-placer { position: absolute; border: 1.5px solid var(--c); border-radius: 3px; background: var(--t); opacity: .6; pointer-events: none; }

/* the bottom bar: the same height in every state (idle, placing, selected) */
.b-dock { grid-area: dock; display: flex; flex-direction: column; gap: 8px; height: calc(156px + var(--sab)); padding: 8px 0 var(--sab); background: var(--color-surface); border-top: 1px solid var(--color-divider); box-shadow: 0 -6px 20px rgb(31 36 48 / .07); }
.b-sec { margin: 16px 0 6px; font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.b-desk, .b-panel { display: none; }
.b-tray { display: flex; gap: 6px; padding: 0 16px; }
.b-chip {
  position: relative; flex: 1 1 0; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 2px;
  border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 600; line-height: 1.1; touch-action: manipulation;
}
.b-chip > span:not(.b-start) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-chip .icon { color: var(--c); }
.b-chip:hover:not(:disabled) { border-color: var(--color-border); }
.b-chip[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 0 0 1px var(--color-accent); }
.b-chip:disabled { opacity: .45; cursor: not-allowed; }
.b-start { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); padding: 2px 6px; border-radius: 8px; background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; font-weight: 700; white-space: nowrap; }
.b-ctx { height: 84px; padding: 0 16px; display: flex; flex-direction: column; }
.b-ctx > div { display: none; flex-direction: column; gap: 4px; height: 100%; }
.b-dock[data-mode="idle"] .b-idle, .b-dock[data-mode="placing"] .b-mode, .b-dock[data-mode="moving"] .b-mode, .b-dock[data-mode="selected"] .b-sel { display: flex; }
.b-line { display: flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 600; }
.b-idle:has(.b-limit:not([hidden])) .b-line { display: none; }
.b-limit { min-height: 32px; display: flex; align-items: center; color: var(--tone-warning-fg); font-weight: 600; }
.b-ready { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--color-text); text-align: left; font-size: 14px; font-weight: 600; }
.b-ready .rt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-ready .icon { width: 16px; height: 16px; color: var(--color-text-muted); }
.b-ready .b-ri { width: 18px; height: 18px; color: var(--color-accent); }
.b-hint { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-text); }
.b-row { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.b-for { display: flex; align-items: center; gap: 6px; max-width: 70%; min-height: 44px; padding: 0 10px 0 6px; border: 1.5px solid var(--c); border-radius: 22px; background: var(--t); color: var(--color-text); font-weight: 700; font-size: 14px; }
.b-for .fl { color: var(--color-text-muted); font-weight: 600; }
.b-for .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-for .icon { width: 16px; height: 16px; }
.b-badge { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--c); color: var(--signer-on); font: 700 12px/1 var(--font-sans); }
.b-mtext { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: 10px; border-left: 4px solid var(--c, var(--color-accent)); background: var(--color-accent-soft); font-size: 14px; font-weight: 700; line-height: 1.2; }
.b-mtext > .icon { width: 18px; height: 18px; color: var(--color-accent); }
.b-mtext > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-mtext .nm { display: inline-block; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.b-mfor { position: relative; flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px 0 3px; border: 1.5px solid var(--c); border-radius: 14px; background: var(--color-surface); color: var(--color-text); }
.b-mfor::before { content: ""; position: absolute; inset: -8px -6px; }
.b-mfor .icon { width: 14px; height: 14px; color: var(--color-text-muted); }
.b-mbtns { display: flex; gap: 8px; }
.b-mbtns .btn { flex: 1; min-height: 44px; padding: 0 12px; line-height: 1.15; }
.b-mbtns .btn:first-child { flex: 2; }
.b-fbhead { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.b-done { flex: none; min-height: 44px; margin: -4px 0; }
.b-fbtitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.b-fbtitle .fbt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-fbtitle .l1 { line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-fbtitle .muted { font-weight: 600; }
.b-fbtitle .tip { font-size: 12px; line-height: 1.25; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-acts { display: flex; gap: 2px; }
.b-act { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 2px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text); font-size: 12px; font-weight: 600; }
.b-act .al { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-act:hover { background: var(--color-accent-soft); }
.b-act .b-badge { min-width: 20px; height: 20px; font-size: 11px; }
.b-tile { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--c); border-radius: 8px; background: var(--color-surface); color: var(--c); }
.b-tile .icon { width: 16px; height: 16px; }

/* Options (not modal, so the field stays in view above it) and the modal sheets */
.b-options { position: fixed; inset: auto 0 0 0; z-index: 35; width: 100%; max-width: none; max-height: 52dvh; margin: 0; padding: 0 16px calc(16px + var(--sab)); overflow: auto; border: 0; border-radius: 16px 16px 0 0; background: var(--color-surface); color: var(--color-text); box-shadow: 0 -10px 40px rgb(0 0 0 / .25); }
.b-options-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 0; background: var(--color-surface); }
.b-options-head .btn--icon { margin-left: auto; }
.b-opts .field { margin: 12px 0 0; }
.b-switch { min-height: 52px; }
.b-tune { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.b-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 2px; }
.b-pad button, .b-steps button { display: grid; place-items: center; border: 1.5px solid var(--color-divider); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 20px; font-weight: 700; }
.b-pad .u { grid-area: 1 / 2; } .b-pad .l { grid-area: 2 / 1; } .b-pad .r { grid-area: 2 / 3; } .b-pad .d { grid-area: 3 / 2; }
.b-pad .u .icon { transform: rotate(-90deg); } .b-pad .l .icon { transform: rotate(180deg); } .b-pad .d .icon { transform: rotate(90deg); }
.b-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.b-steps > span { min-width: 64px; font-size: 14px; font-weight: 600; }
.b-steps button { width: 44px; height: 44px; }
.b-remove { margin-top: 16px; }
.b-sheet-head { display: flex; align-items: center; gap: 8px; }
.b-sheet-head h2 { flex: 1; }
.b-sheet .sheet-actions:has(#review-document[hidden]) { display: none; }
.b-radios { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.b-rchip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); font-weight: 700; cursor: pointer; }
.b-rchip input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c); }
.b-rchip:has(input:checked) { border-color: var(--c); background: var(--t); }
.b-rchip:has(input:focus-visible) { box-shadow: var(--ring-focus); }
.b-rchip .muted { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-rchip .b-badge + span { min-width: 0; overflow-wrap: anywhere; }
.b-list { display: flex; flex-direction: column; }
.b-li { display: flex; align-items: center; gap: 4px; min-height: 52px; border-bottom: 1px solid var(--color-divider); }
.b-li:last-child { border-bottom: 0; }
.b-li .main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0; border: 0; background: transparent; color: var(--color-text); text-align: left; }
.b-li .tx { min-width: 0; display: flex; flex-direction: column; }
.b-li .t1 { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-li .t2 { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.b-fix { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 6px 0; padding: 8px 12px; border: 1px solid var(--color-divider); border-left: 4px solid var(--color-error); border-radius: 10px; background: var(--color-error-soft); color: var(--color-text); text-align: left; font-weight: 700; }
.b-fix .icon:last-child { margin-left: auto; color: var(--color-text-muted); }
.b-okrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.b-okrow > div { min-width: 0; overflow-wrap: anywhere; }
.b-fornote { margin: 6px 0 0; color: var(--color-text-muted); }
.b-fornote.invis { visibility: hidden; }
.b-thumbs { display: flex; flex-direction: column; gap: 4px; }
.b-thumb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text); text-align: left; }
.b-thumb:hover { background: var(--color-accent-soft); }
.b-thumb .tt { min-width: 0; display: flex; flex-direction: column; }
.b-thumb[aria-current="true"] .b-tbox { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
.b-tbox { position: relative; display: block; flex: none; width: 68px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--color-divider); border-radius: 2px; }
.b-tbox .b-tcanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-tbox .b-mk { position: absolute; border: 1px solid var(--c); background: var(--t); }
.b-rthumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-rthumb { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-muted); font-size: 12px; font-weight: 600; text-align: center; }
.b-rthumb:hover { background: var(--color-accent-soft); }
.b-rthumb .b-tbox { width: 100%; }
.b-keys summary { padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.b-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 14px; }
.b-keys dd { margin: 0; }
.b-keys kbd { padding: 1px 6px; border: 1px solid var(--color-divider); border-radius: 5px; background: var(--color-bg); font: 12px var(--font-mono); }
/* the toast sits above the bottom bar and the zoom pill; ink in light and dark alike, so its Undo keeps its contrast */
.builder-open .toast.b-toast { bottom: calc(156px + var(--sab) + 66px); width: max-content; min-height: 52px; padding: 4px 4px 4px 16px; background: #1F2430; color: #FFFFFF; }
.builder-open .toast.b-toast .btn--text { color: #FFAE8F; min-height: 44px; }
/* while a modal sheet is open the toast moves into it (outside it would be inert): it shows at the top, above the backdrop */
.builder-open dialog.b-sheet .toast.b-toast { top: calc(12px + var(--sat)); bottom: auto; }

/* desktop: the bar becomes a left rail; a right panel holds the selected field's options */
@media (min-width: 1024px) {
  .builder { grid-template-columns: 280px minmax(0, 1fr) 320px; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "top top top" "dock stage panel"; }
  .b-top { height: 64px; padding: 0 16px; gap: 8px; }
  .b-top .b-zoomrow { display: inline-flex; margin-right: 8px; }
  .b-zoom { display: none; }
  .b-dock { height: auto; padding: 16px 0 64px; gap: 12px; overflow: auto; border-top: 0; border-right: 1px solid var(--color-divider); box-shadow: none; }
  .b-desk { display: block; padding: 0 16px; margin: 0; }
  .b-thumbs.b-desk { display: flex; flex-direction: column; gap: 4px; }
  .b-rail-for { padding: 0 16px; border: 0; margin: 0; min-width: 0; }
  .b-rail-for .b-sec { margin-top: 0; }
  .b-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .b-chip { height: 48px; flex-direction: row; justify-content: flex-start; gap: 6px; padding: 0 8px; font-size: 14px; cursor: grab; }
  .b-start { left: auto; right: -4px; transform: translateY(-55%); }
  .b-ctx { height: auto; }
  .b-ctx > div { height: auto; }
  .b-dock .b-idle { display: flex; }
  .b-row { display: none; }
  .b-ready { align-items: flex-start; }
  .b-ready .rt { white-space: normal; }
  .b-mode { position: fixed; top: 76px; left: calc(280px + (100vw - 600px) / 2); transform: translateX(-50%); z-index: 36; flex-direction: row !important; align-items: center; padding: 6px; border-radius: 14px; background: var(--color-surface); box-shadow: var(--shadow); }
  .b-mode .b-mbtns .btn { flex: none; }
  .b-sel { position: fixed; z-index: 36; padding: 4px; border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface); box-shadow: var(--shadow); }
  .b-sel.offscreen, .b-sel.dragging { visibility: hidden; }
  .b-fbhead { display: none; }
  .b-act { flex: none; min-height: 40px; flex-direction: row; gap: 6px; padding: 0 10px; font-size: 14px; }
  .b-panel { display: block; grid-area: panel; overflow: auto; padding: 16px 16px 64px; border-left: 1px solid var(--color-divider); background: var(--color-surface); }
  .b-pages { padding: 20px 24px 80px; }
  .builder-open .toast.b-toast { bottom: 24px; }
}
/* phone landscape: the bar becomes a side rail so the page keeps its height */
@media (max-height: 500px) and (max-width: 1023px) {
  .builder { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top" "stage dock"; }
  .b-top { height: calc(48px + var(--sat)); }
  .b-dock { height: auto; overflow: auto; padding: 8px 0 calc(8px + var(--sab)); border-top: 0; border-left: 1px solid var(--color-divider); }
  .b-tray { display: grid; grid-template-columns: repeat(3, 1fr); }
  .b-ctx { height: auto; min-height: 96px; }
  .builder-open .toast.b-toast { bottom: 66px; left: calc(50% - 150px); }
  .b-fbtitle .l1 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .b-fbtitle .tip { white-space: normal; }
  .b-options { right: 300px; width: auto; }
}
@media (max-width: 374px) { .b-chip { font-size: 11px; } }
@media (forced-colors: active) { .b-field { border-color: CanvasText; } .b-field.sel, .b-field:focus-visible { outline: 3px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .b-field.lift { transform: none; } }