/* The company OS console: the Ledger design Jordon chose (2026-10-02). White and near-black, one emerald accent, Geist. */
:root {
  --bg: #f4f5f3; --rail: #ffffff; --panel: #ffffff; --hover: #f1f3f0; --line: rgba(15,23,20,.08); --line-strong: rgba(15,23,20,.14);
  --ink: #0d1411; --muted: #59635e; --faint: #8b948f; --track: #eceeeb;
  --acc: #0f9f6e; --acc-text: #0b7f57; --acc-soft: rgba(15,159,110,.09); --acc-line: rgba(15,159,110,.28);
  --warn: #e8910c; --warn-soft: rgba(232,145,12,.10); --warn-line: rgba(232,145,12,.35); --warn-text: #a25f00;
  --risk: #e5484d; --risk-soft: rgba(229,72,77,.07); --risk-line: rgba(229,72,77,.28); --risk-text: #c4292e;
  --sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --shadow: 0 1px 2px rgba(13,20,17,.04), 0 10px 30px -12px rgba(13,20,17,.10);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100%; }
.rail { background: var(--rail); border-right: 1px solid var(--line); padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--sans); letter-spacing: .02em; }
.brand-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.brand-name .brand-line { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.on { background: var(--ink); color: #fff; }
.nav .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.badge { margin-left: auto; background: var(--acc); color: #fff; border-radius: 999px; font: 600 11px/1 var(--mono); padding: 4px 7px; }
.nav.on .badge { background: #fff; color: var(--ink); }
.me { margin-top: auto; padding: 12px; border-radius: var(--r); background: var(--hover); font-size: 12px; color: var(--muted); }
.me b { display: block; color: var(--ink); font-size: 13px; }

.main { padding: 28px 36px 60px; min-width: 0; }
.top h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.top .sub { margin: 4px 0 22px; color: var(--muted); }
.view { display: grid; gap: 20px; }

.label { font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px 20px; display: grid; gap: 6px; }
.stat .n { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat.warn .n { color: var(--warn-text); }
.stat.risk .n { color: var(--risk-text); }

.panel { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px; min-width: 0; }
.panel > h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.desks { display: grid; gap: 16px; }
.desk-row { display: grid; gap: 10px; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.seat { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; }
.seat .who { font-weight: 600; }
.seat.empty .who { color: var(--faint); font-weight: 500; }
.seat .state { font-size: 12.5px; color: var(--muted); }
button.seat { font: inherit; text-align: left; background: var(--panel); color: inherit; cursor: pointer; }
.seat.picked { border-color: var(--acc-line); box-shadow: 0 0 0 2px var(--acc-soft); }
.side { display: grid; gap: 16px; align-content: start; }
.written-brief .brief-text { white-space: pre-wrap; margin: 6px 0 0; }
.ask .qa { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; display: grid; gap: 6px; }
.ask .qa p { margin: 0; white-space: pre-wrap; }
.hand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.desk-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 4px; }
.desk-panel .state { margin: 8px 0 0; font-weight: 600; }
.seat .state.working, .seat .state.done { color: var(--acc-text); }
.seat .state.waiting { color: var(--warn-text); }
.seat .state.stuck, .seat .state.problem { color: var(--risk-text); font-weight: 600; }
.desk-group.empty .group-title { color: var(--faint); }
.desk-group.empty .empty-note { margin: 0; color: var(--faint); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 9px; font: 500 11px/1.3 var(--mono); border: 1px solid var(--line-strong); color: var(--muted); width: fit-content; }
.chip.person { border-color: var(--acc-line); color: var(--acc-text); background: var(--acc-soft); }
.chip.ai_worker { border-color: var(--line-strong); color: var(--ink); background: var(--track); }
.chip.warn { border-color: var(--warn-line); color: var(--warn-text); background: var(--warn-soft); }
.chip.risk { border-color: var(--risk-line); color: var(--risk-text); background: var(--risk-soft); }
.chip.ok { border-color: var(--acc-line); color: var(--acc-text); background: var(--acc-soft); }

.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
.feed time { font: 12px/1.4 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.feed .refs { font: 11px/1.4 var(--mono); color: var(--faint); overflow-wrap: anywhere; }

.tasks { display: grid; gap: 12px; }
.task { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 10px; border-left: 4px solid var(--acc); }
.task.approval { border-left-color: var(--warn); }
.task.blocker, .task.reconcile { border-left-color: var(--risk); }
.task.review { border-left-color: var(--warn); }
.task .held { margin: 0; max-width: 72ch; }
.task .about { font-weight: 600; }
.search { padding: 0 4px 14px; }
.search input { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; background: var(--panel); color: var(--ink); }
.desk-group { display: grid; gap: 10px; }
.group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 0; }
.brief h2 { margin-top: 0; }
.pipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; align-items: start; }
.pipe-col { display: grid; gap: 10px; }
.pipe-card { display: grid; gap: 6px; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.pipe-card:hover { outline: 1px solid var(--line-strong); }
.pipe-steps { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
/* A deal, stage by stage (ADR-0156): the board reuses the pipeline's columns; the deal's page is its stages along the top,
   each stage below (open, folded or to come), and who it is with, its emails and documents beside it. Plain: a look dresses it. */
.pipe-card.late { outline: 1px solid var(--risk-line); }
.dp-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px; align-items: start; }
.dp-main, .dp-side { display: grid; gap: 12px; min-width: 0; }
.dp-line { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow-x: auto; }
.dp-pill { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--muted); font-size: 13px; min-width: 84px; }
.dp-pill b { color: var(--ink); }
.dp-pill.now { border-color: var(--ink); }
.dp-pill.ahead, .dp-pill.not_recorded { border-style: dashed; background: transparent; }
.dp-pill.late .meta { color: var(--risk-text); }
.dp-stage > summary { cursor: pointer; }
.dp-stage.now { outline: 2px solid var(--ink); }
.dp-stage.ahead, .dp-stage.not_recorded { opacity: .75; }
.dp-stage.late { outline-color: var(--risk-line); }
@media (max-width: 860px) { .dp-page { grid-template-columns: minmax(0, 1fr); } .dp-line { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }
.mail-text { white-space: pre-wrap; font: inherit; margin: 0; }
.panel.mail.sent { border-left: 4px solid var(--acc); }
.task .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task .step { font-weight: 600; font-size: 16px; }
.task .meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #24302b; }
.btn.danger { color: var(--risk-text); border-color: var(--risk-line); }
.btn:disabled { opacity: .5; cursor: progress; }

.detail { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 12px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 500 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 0 10px 10px; }
td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: top; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--hover); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; color: var(--muted); cursor: pointer; font-weight: 500; }
.seg button.on { background: var(--ink); color: var(--panel); }
.seg button.on.ask, .seg button.on.never { color: #fff; }
.seg button.on.ask { background: var(--warn); }
.seg button.on.never { background: var(--risk); }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.style-audience { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.style-audience h3 { margin: 0; }
.field.check { display: flex; align-items: center; gap: 8px; }
.field.check input { width: auto; }
.setting:first-of-type { border-top: 0; }

.field { display: grid; gap: 6px; }
.field input, .field select, .field textarea { font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; background: #fff; color: var(--ink); width: 100%; }
.form { display: grid; gap: 14px; max-width: 560px; }
.empty-note { color: var(--muted); padding: 8px 0; }

.toast { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--r); box-shadow: var(--shadow); max-width: min(420px, calc(100vw - 40px)); }
.toast.error { background: var(--risk-text); }
.offline { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--warn-line); background: var(--warn-soft); color: var(--warn-text); border-radius: var(--r); font-weight: 500; }

@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--line); z-index: 5; }
  .brand, .me { display: none; }
  .nav { position: relative; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 12px; }
  .nav .dot { display: none; }
  .badge { position: absolute; top: -4px; right: -6px; margin: 0; padding: 3px 6px; font-size: 10px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px 16px; }
  .stat .n { font-size: 28px; }
  .main { padding: 20px 16px 96px; }
  .top h1 { font-size: 24px; }
  .detail { grid-template-columns: 1fr; gap: 2px 0; }
  .detail dd { margin-bottom: 8px; }
}

/* ---- Phases 6 to 8 (TASK-079): threads, invitations, drafts for review, learning, setup, and the portal ---- */
.thread { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.msg { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--panel); }
.msg.mine { border-color: var(--acc-line); background: var(--acc-bg, #f3faf6); }
.msg .meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.form textarea, .form input, .form select { font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 8px 10px; background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.link-box { font: 13px/1.5 var(--mono); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 10px 12px; overflow-wrap: anywhere; background: var(--hover); }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 10px 0; }
.draft { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.draft .label { display: block; margin-bottom: 6px; }
.q { border-top: 1px solid var(--line); padding: 14px 0; display: grid; gap: 8px; }
.q:first-of-type { border-top: 0; }
.q .reason { color: var(--muted); font-size: 13px; }
.q .suggest { border-left: 3px solid var(--line-strong); padding: 6px 10px; color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plan li { padding: 6px 0; border-top: 1px solid var(--line); }
.plan li:first-child { border-top: 0; }
.plan .reason { color: var(--muted); font-size: 13px; }
.problem { color: var(--risk-text); }
.table-wrap table td.num, .table-wrap table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.portal .portal-main { max-width: 820px; margin: 0 auto; padding: 24px 16px 60px; }
.portal .top .brand { padding: 0 0 14px; }
.portal .ask { border-left: 4px solid var(--acc); }
.decision { display: grid; gap: 8px; padding: 8px 0; }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }
/* A read that failed says so (TASK-098); it is never shown as an empty state. */
.unread { border: 1px dashed var(--risk-line); background: var(--risk-soft); color: var(--risk-text); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 10px; justify-items: start; }
.unread p { margin: 0; }
/* The client's options side by side (TASK-091): one card each, wrapping to one column on a phone. */
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.option { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.option h3 { margin: 0; font-size: 15px; }
.option textarea { width: 100%; font: inherit; }

/* A stored document as text (TASK-107): wrapped, as stored. */
.document { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; }

/* On a phone (TASK-123): a wide table scrolls inside its own box, never the page. */
@media (max-width: 640px) {
  .panel table { display: block; overflow-x: auto; max-width: 100%; }
  .hand select { max-width: 60%; }
}

/* Your companies (TASK-130): a tile each. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 22px; }
/* Each company as its own app looks (TASK-160): a picture of it, then what waits there. */
.tile { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .10); border-color: var(--line-strong); }
.tile.here { cursor: default; border-color: var(--acc-line); box-shadow: 0 0 0 3px var(--acc-soft); }
.tile.here:hover { transform: none; }
.tile-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--track); border-bottom: 1px solid var(--line); }
.tile-shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top left; }
.tile-here { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.tile-body { display: grid; gap: 8px; padding: 14px 16px 16px; align-content: start; }
.tile-body h2 { margin: 0; font-size: 16px; }
.tile-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.tile-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-counts .warn b { color: var(--warn-text); }
.tile-counts .risk b { color: var(--risk-text); }
.tile-body p { margin: 0; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile-open { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.tile:hover .tile-open { text-decoration: underline; text-underline-offset: 3px; }
/* A company with no look of its own: a plain sketch of the console (no picture in the core). */
.tile-sketch { position: absolute; inset: 0; display: grid; grid-template-columns: 22% 1fr; gap: 10px; padding: 12px; }
.tile-sketch span, .tile-sketch i { display: block; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
.sk-main { background: transparent !important; border: 0 !important; display: grid !important; gap: 8px; grid-template-rows: 14px 34px 1fr 1fr; }
.sk-title { width: 40%; }
.sk-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; background: transparent !important; border: 0 !important; }
/* Signing up and in (TASK-157). */
.welcome .portal-main { max-width: 520px; }
.welcome .offers { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.welcome .offer { align-items: flex-start; }

/* The two demo costumes (TASK-087): applied by a demo's sign-in link for the browser session, never by the product. */
.mode-banner { margin: 0 0 14px; padding: 8px 14px; border-radius: var(--r); font-size: 12px; letter-spacing: .02em; }
body[data-mode="blank"] .mode-banner { background: #eeefed; color: var(--muted); border: 1px dashed var(--line-strong); }
.ghost { border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; color: var(--muted); background: #fafbfa; }
.ghost p { margin: 0; }
.ghost-shape { height: 56px; border-radius: var(--r); background: repeating-linear-gradient(135deg, #e1e4e0, #e1e4e0 6px, #f0f2ef 6px, #f0f2ef 12px); }
/* Blank: white and grey, like a blueprint; the shapes are there, the colour and the words of an industry are not. */
body[data-mode="blank"] { --bg: #ffffff; --panel: #fbfbfb; --ink: #3a4440; }
body[data-mode="blank"] .seat { border-style: dashed; background: #f3f4f2; }
body[data-mode="blank"] .seat .who, body[data-mode="blank"] .stat .n, body[data-mode="blank"] .feed time { color: var(--faint); }
body[data-mode="blank"] .mark, body[data-mode="blank"] .nav.on, body[data-mode="blank"] .btn.primary { background: #c3c8c5; border-color: #c3c8c5; color: #fff; }
body[data-mode="blank"] .chip.ok, body[data-mode="blank"] .chip.warn, body[data-mode="blank"] .chip.risk { background: #f0f2ef; color: var(--muted); border-color: var(--line); }
/* Finished: the console as it is (TASK-365: the line's neutral foundation, never blue); only the banner says it is an example. */
body[data-mode="finished"] .mode-banner { background: var(--acc-soft); color: var(--ink); border: 1px solid var(--acc-line); }

/* A signer's page (ADR-0353): the document on the page, the consent, a typed name and an optional drawing. */
.sign .view { display: grid; gap: 16px; margin-top: 18px; }
.sign .muted { color: var(--muted); }
.sign .small { font-size: 12px; margin: 10px 0 0; overflow-wrap: anywhere; }
.sign-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sign-doc-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sign-frame { width: 100%; height: min(78vh, 980px); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--track); display: block; }
.sign-consent { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--hover); font-size: 13px; }
.sign-consent p { margin: 0 0 6px; }
.sign-consent ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.sign-typed { min-height: 44px; font: 30px/1.2 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', 'Segoe Script', cursive; border-bottom: 1px solid var(--line-strong); padding: 4px 2px; overflow-wrap: anywhere; }
.sign-pad-box { display: grid; gap: 8px; justify-items: start; }
.sign-ask { display: grid; gap: 8px; }
.sign-ask textarea { font: inherit; width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; }
.sign-pad { width: 100%; aspect-ratio: 4 / 1; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: #fff; touch-action: none; cursor: crosshair; }
.sign textarea { font: inherit; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 8px 10px; width: 100%; margin: 0 0 12px; }