/* Request signatures: the envelope builder, the dashboard and the signer's view. The Autonome Design Playbook's tokens
   (light by default, dark when the device asks), scoped to .sg so every panel, dialog and menu takes its text AND its
   surface from the same set. 32px controls, 13px UI labels, 14px body, a 4px grid, one accent action per view. */
.sg {
  --bg: #f6f6f4; --surface: #ffffff; --surface-2: #efefeb; --line: #dcdcd5; --fg: #1a1a17; --muted: #5a5a52;
  --accent: #c2410c; --accent-fg: #ffffff; --ink: #1c1c19; --ink-fg: #ffffff; --brand: #f5a524;
  --ok: #15803d; --warn: #a16207; --err: #b42318; --focus: #1d6fd8;
  --r-ctl: 6px; --r-menu: 10px; --r-dlg: 14px; --pop: 0 12px 32px rgba(24, 24, 22, 0.16), 0 2px 6px rgba(24, 24, 22, 0.08);
  color-scheme: light;
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .sg {
    --bg: #151513; --surface: #1f1f1c; --surface-2: #2a2a26; --line: #3a3a34; --fg: #f2f2ee; --muted: #b7b7ad;
    --accent: #f97316; --accent-fg: #1a1206; --ink: #f2f2ee; --ink-fg: #151513; --ok: #4ade80; --warn: #facc15; --err: #f97066; --focus: #6ea8fe;
    --pop: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
.sg *, .sg *::before, .sg *::after { box-sizing: border-box; }
.sg :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sg [hidden] { display: none !important; }
.sg h1 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; letter-spacing: -0.01em; }
.sg h2 { font-size: 16px; line-height: 1.3; margin: 0 0 8px; }
.sg h3 { font-size: 14px; margin: 0 0 4px; }
.sg p { margin: 0 0 8px; }
.sg a { color: var(--fg); text-decoration-color: var(--brand); text-underline-offset: 0.2em; }
.sg-muted { color: var(--muted); }
.sg-small { font-size: 13px; color: var(--muted); }
.sg-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }

/* Buttons: accent (one per view), primary, secondary, quiet, negative. */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-ctl); font: 500 13px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--fg); transition: background-color 150ms ease, border-color 150ms ease; text-decoration: none; }
.sg-btn:hover { background: var(--surface-2); }
.sg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sg-btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.sg-btn.accent:hover { filter: brightness(1.06); }
.sg-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--ink-fg); }
.sg-btn.quiet { border-color: transparent; background: transparent; }
.sg-btn.quiet:hover { background: var(--surface-2); border-color: var(--line); }
.sg-btn.negative { color: var(--err); }
.sg-btn.small { min-height: 28px; padding: 0 8px; }
.sg-btn.wide { width: 100%; }
@media (prefers-reduced-motion: reduce) { .sg * { transition: none !important; animation: none !important; } }

/* Inputs */
.sg-field { display: grid; gap: 4px; margin: 0 0 12px; }
.sg-field > span { font-size: 13px; font-weight: 500; }
.sg-field .sg-small { margin: 0; }
.sg input[type=text], .sg input[type=email], .sg input[type=number], .sg input[type=date], .sg input[type=search], .sg textarea, .sg select {
  width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); color: var(--fg); font: inherit; font-size: 14px;
}
.sg textarea { min-height: 72px; resize: vertical; }
.sg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.sg-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); }
.sg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-grow { flex: 1 1 auto; }

/* Toast: past tense, no full stop, fades. */
.sg-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--ink-fg); padding: 8px 14px; border-radius: var(--r-menu); font-size: 13px; box-shadow: var(--pop); z-index: 400; max-width: calc(100vw - 32px); }
.sg-toast.err { background: var(--err); color: #ffffff; }
.sg-note { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-menu); padding: 8px 12px; font-size: 13px; }
.sg-note.err { border-color: var(--err); color: var(--err); background: var(--surface); }

/* Dialogs: the same theme as the screen behind them. */
.sg-back { position: fixed; inset: 0; background: rgba(18, 19, 22, 0.5); display: grid; place-items: center; z-index: 300; padding: 16px; }
.sg-dialog { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-dlg); box-shadow: var(--pop); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 24px 24px; }
.sg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.sg-dialog-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.sg-icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--fg); cursor: pointer; }
.sg-icon-btn:hover { background: var(--surface-2); border-color: var(--line); }

/* Tabs */
.sg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 12px; overflow-x: auto; }
.sg-tab { min-height: 32px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 500 13px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.sg-tab[aria-selected=true] { color: var(--fg); border-bottom-color: var(--accent); }
.sg-count { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-2); color: var(--fg); font-size: 11px; }

/* ---- the builder (full screen over the editor) --------------------------------------------------------------------- */
.sg-builder { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr; }
/* Inside the app: the builder sits under the app's top bar (40px), so placing fields is a step in the same shell, not a
   different page. Its own bar holds the request's name, Save draft, Send and Close. */
body.studio-open .sg-builder, body.app-view .sg-builder, body.landing-view .sg-builder { top: 40px; border-top: 1px solid var(--line); }
.sg-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 48px; }
.sg-bar-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sg-bar-title strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-bar-title span { font-size: 12px; color: var(--muted); }
.sg-main { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.sg-side { background: var(--surface); border-right: 1px solid var(--line); overflow: auto; padding: 12px; }
.sg-side section { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.sg-side section:last-child { border-bottom: 0; }
.sg-well { overflow: auto; background: var(--bg); padding: 16px; position: relative; }
.sg-pages { display: grid; gap: 16px; justify-items: center; }
/* What to do next, above the pages: sticky, so it stays in view while the pages scroll. */
.sg-hint { position: sticky; top: 0; z-index: 6; margin: -16px -16px 16px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg); }
.sg-hint.ready { color: var(--ok); }
.sg-page { position: relative; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.sg-page canvas { display: block; width: 100%; height: 100%; }
.sg-page-label { position: absolute; top: -16px; left: 0; font-size: 11px; line-height: 14px; color: var(--muted); background: var(--bg); padding: 0 4px 0 0; }
.sg-guide { position: absolute; background: var(--focus); pointer-events: none; z-index: 5; }
.sg-guide.x { width: 1px; top: 0; bottom: 0; }
.sg-guide.y { height: 1px; left: 0; right: 0; }

.sg-signer { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-menu); margin: 0 0 8px; background: var(--surface); }
.sg-signer.active { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.sg-dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 10px; }
.sg-signer input { margin: 0 0 4px; }
.sg-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sg-palette .sg-btn { justify-content: flex-start; }
.sg-palette .sg-btn[aria-pressed=true] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }

/* A field on a page, coloured by its signer. */
.sg-f { position: absolute; overflow: visible; border: 1.5px solid var(--c, #d97706); background: color-mix(in srgb, var(--c, #d97706) 14%, transparent); border-radius: 4px; color: #1a1a17; font: 500 11px/1.2 Inter, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; text-align: center; user-select: none; touch-action: none; }
.sg-f.draggable { cursor: move; }
.sg-f.selected { box-shadow: 0 0 0 2px var(--focus); }
.sg-f .sg-f-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border: 1.5px solid var(--c, #d97706); border-radius: 999px; background: #ffffff; color: #1a1a17; font: 600 11px/14px Inter, system-ui, sans-serif; cursor: pointer; padding: 0; display: none; }
.sg-f.selected .sg-f-x, .sg-f:hover .sg-f-x, .sg-f:focus-within .sg-f-x { display: block; }
.sg-f .sg-f-grip { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--c, #d97706) 50%); }
.sg-f.opt { border-style: dashed; }
.sg-f.other { opacity: 0.55; border-style: dotted; }
.sg-f.mine { cursor: pointer; background: color-mix(in srgb, var(--c, #d97706) 18%, #ffffff); }
.sg-f.mine.filled { background: rgba(255, 255, 255, 0.4); border-style: solid; }
.sg-f.mine.current { box-shadow: 0 0 0 3px var(--focus); }
.sg-f img { max-width: 100%; max-height: 100%; pointer-events: none; }
.sg-f input[type=text] { width: 100%; height: 100%; min-height: 0; border: 0; background: transparent; color: #1a1a17; padding: 0 4px; font-size: 12px; }
.sg-f input[type=checkbox] { width: 70%; height: 70%; accent-color: #1a1a17; }
@media (max-width: 760px) {
  .sg-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sg-side { border-right: 0; border-bottom: 1px solid var(--line); max-height: 42vh; }
  .sg-bar { flex-wrap: wrap; }
}

/* ---- the builder in three steps (.sg-b): header, stepper, the step's panel, the document on a dark well ----------- */
.sg-b { grid-template-rows: auto auto 1fr; background: var(--bg); }
.sg-b .sg-bar { gap: 4px; }
.sg-b-steps { display: flex; gap: 4px; padding: 6px 12px; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; }
.sg-b-step { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13px/1 inherit; cursor: pointer; white-space: nowrap; }
.sg-b-step:hover { background: var(--surface-2); color: var(--fg); }
.sg-b-step.on { color: var(--fg); background: var(--surface-2); }
.sg-b-num { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; border: 1.5px solid currentColor; font-size: 12px; }
.sg-b-step.on .sg-b-num { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.sg-b-step.done .sg-b-num { background: var(--surface-2); }
.sg-b-main { grid-template-columns: 340px 1fr; }
.sg-b-side { display: grid; grid-template-rows: auto 1fr auto; padding: 0; overflow: hidden; }
.sg-b-hint { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg); background: var(--surface); }
.sg-b-hint.ready { color: var(--ok); }
.sg-b-body { overflow: auto; padding: 16px; }
.sg-b-section h2 { font-size: 14px; margin: 16px 0 8px; }
.sg-b-section h2:first-child { margin-top: 0; }
.sg-b-foot { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.sg-b-icon { display: inline-flex; }
.sg-b-people { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.sg-b-person { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-menu); background: var(--surface); }
.sg-b-people.ordered .sg-b-person { grid-template-columns: auto auto 1fr; }
.sg-b-person-fields { display: grid; gap: 6px; min-width: 0; }
.sg-b-person-fields input { width: 100%; }
.sg-b-person-tools { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.sg-b-person-tools select { min-height: 30px; margin-right: auto; }
.sg-b-chip { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; color: #ffffff; font: 700 11px/1 inherit; margin-top: 6px; }
.sg-b-chip.copy { background: transparent; border: 1.5px dashed var(--muted); }
.sg-b-grip { color: var(--muted); cursor: grab; margin-top: 8px; }
.sg-b-add { margin: 4px 0 12px; }
.sg-b-order { margin: 4px 0 12px; flex-wrap: wrap; }
.sg-b-template { padding-top: 12px; border-top: 1px solid var(--line); }
.sg-b-template select { width: 100%; }
.sg-b-picker { display: grid; gap: 6px; }
.sg-b-pick { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 40px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-menu); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.sg-b-pick .sg-b-chip { margin: 0; }
.sg-b-pick.on { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); background: var(--surface-2); }
.sg-b-pick-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-b-palette { grid-template-columns: 1fr 1fr; }
.sg-b-kind { justify-content: flex-start; gap: 8px; min-height: 40px; }
.sg-b-kind .sg-b-icon { color: var(--c); }
.sg-b-kind[aria-pressed=true] { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); background: var(--surface-2); }
.sg-b-counts { margin-top: 12px; }
.sg-b-summary { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.sg-b-summary li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-menu); }
.sg-b-summary li .sg-b-chip { margin-top: 2px; }
.sg-b-summary p { margin: 2px 0 0; }
.sg-b-section textarea, .sg-b-section input:not([type=checkbox]), .sg-b-section select { width: 100%; }
.sg-b-more { margin: 8px 0 12px; }
.sg-b-more summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.sg-b-menu { position: absolute; z-index: 30; min-width: 200px; padding: 6px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-menu); box-shadow: var(--pop); display: grid; }
.sg-b-menu button { text-align: left; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.sg-b-menu button:hover, .sg-b-menu button:focus-visible { background: var(--surface-2); }
.sg-b-menu button.danger { color: var(--err); }
.sg-b-doc { display: grid; grid-template-columns: 120px 1fr; min-height: 0; background: #3b3b37; }
.sg-b.sg-b-nothumbs .sg-b-doc { grid-template-columns: 0 1fr; }
.sg-b.sg-b-nothumbs .sg-b-thumbs { display: none; }
.sg-b-thumbs { overflow: auto; padding: 12px 8px; background: #30302d; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.sg-b-thumblist { display: grid; gap: 10px; justify-items: center; }
.sg-b-thumb { display: grid; gap: 4px; justify-items: center; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: transparent; color: #d7d7cf; font: 12px/1 inherit; cursor: pointer; }
.sg-b-thumb canvas { display: block; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.sg-b-thumb.on { border-color: #f5a524; }
.sg-b-docmain { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.sg-b-tools { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #30302d; color: #ecece6; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sg-b-tools .sg-btn, .sg-b-tools .sg-icon-btn { color: #ecece6; }
.sg-b-tools .sg-btn:hover, .sg-b-tools .sg-icon-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: transparent; }
.sg-b-count, .sg-b-zoom { font-size: 13px; }
.sg-b-zoom { min-width: 48px; text-align: center; }
.sg-b-well { background: transparent; padding: 20px 24px 40px; }
.sg-b-well .sg-pages { gap: 20px; }
.sg-b-well .sg-page { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.sg-b-ftext { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; padding: 0 4px; }
.sg-b-ftext b { font-weight: 700; }
.sg-b-ftext span { font-size: 10px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-b-fmenu { position: absolute; z-index: 8; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-menu); box-shadow: var(--pop); font-size: 13px; max-width: 360px; }
.sg-b-fmenu select { min-height: 28px; width: auto; max-width: 180px; }
.sg-b-fmenu .sg-check { margin: 0; }
@media (max-width: 760px) {
  .sg-b-main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .sg-b-side { border-bottom: 0; max-height: none; }
  .sg-b[data-step="1"] .sg-b-doc, .sg-b[data-step="3"] .sg-b-doc { display: none; }
  .sg-b[data-step="2"] .sg-b-main { grid-template-rows: auto 1fr; }
  .sg-b[data-step="2"] .sg-b-side { max-height: 46vh; border-bottom: 1px solid var(--line); }
  .sg-b-doc { grid-template-columns: 1fr; }
  .sg-b-thumbs, .sg-b-tools [data-testid=sg-thumbs-toggle] { display: none; }
  .sg-b-well { padding: 12px; }
  .sg-b-step { padding: 0 8px 0 4px; font-size: 12px; }
  .sg-b .sg-bar { flex-wrap: nowrap; }
}

/* Request signatures: the dashboard and the signer's view. The build puts PDF Studio's shared rules first (the tokens,
   controls, dialogs and the builder: ../pdf-studio/src/sign-styles.ts, which the PDF Studio Gadget uses too), then these. */
/* ---- the dashboard ------------------------------------------------------------------------------------------------- */
.sg-dash { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; width: 100%; }
.sg-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin: 0 0 16px; }
.sg-list { display: grid; gap: 8px; }
.sg-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-menu); background: var(--surface); cursor: pointer; text-align: left; color: var(--fg); font: inherit; width: 100%; }
.sg-item:hover { border-color: var(--muted); }
.sg-item strong { display: block; font-size: 14px; }
.sg-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--surface); color: var(--fg); border: 1px solid var(--line); }
.sg-badge.ok { color: var(--ok); }
.sg-badge.warn { color: var(--warn); }
.sg-badge.err { color: var(--err); }
.sg-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
.sg-dash-main { min-width: 0; }
.sg-mine h2 { font-size: 15px; margin: 0 0 10px; }
.sg-mine-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 8px; }
.sg-mine-pic { background: #ffffff; border: 1px solid var(--sg-line, #dcdcd5); border-radius: 8px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; }
.sg-mine-pic img { max-width: 100%; max-height: 100%; }
.sg-mine-pic .sg-small { color: #5a5a52; font-size: 11px; }
.sg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px; align-items: start; }
.sg-panel { border: 1px solid var(--line); border-radius: var(--r-dlg); background: var(--surface); padding: 16px; }
.sg-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sg-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 8px; font-size: 13px; }
.sg-timeline time { color: var(--muted); font-size: 12px; }
.sg-people { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.sg-people li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.sg-empty { padding: 32px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-dlg); color: var(--muted); }

/* ---- the signer's view --------------------------------------------------------------------------------------------- */
.sg-signpage { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; }
.sg-guidebar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sg-signwell { padding: 16px; overflow: auto; }
.sg-finishbar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.sg-card { max-width: 520px; margin: 48px auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-dlg); background: var(--surface); }
.sg-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--muted); }
.sg-legend span { display: inline-flex; gap: 4px; align-items: center; }
.sg-legend i { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }

/* Adopt a signature */
.sg-pad { width: 100%; height: 160px; border: 1px dashed var(--line); border-radius: var(--r-menu); background: #ffffff; touch-action: none; cursor: crosshair; display: block; }
.sg-fonts { display: grid; gap: 6px; }
.sg-font { display: flex; align-items: center; min-height: 56px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-menu); background: #ffffff; color: #1a1a17; cursor: pointer; font-size: 30px; text-align: left; }
.sg-font[aria-pressed=true] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@font-face { font-family: "Sign Dancing Script"; src: url("/fonts/dancing-script-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sign Great Vibes"; src: url("/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sign Caveat"; src: url("/fonts/caveat-latin-400-normal.woff2") format("woff2"); font-display: swap; }

@media (max-width: 760px) {
  .sg-split { grid-template-columns: 1fr; }
  .sg-dash-grid { grid-template-columns: 1fr; }
  .sg-timeline li { grid-template-columns: 1fr; gap: 0; }
}

/* The sponsor line and header on these pages, from the same tokens (the accent stays for the one action). */
/* Never the accent, and never amber on it: amber on the light ink of dark mode was about 2:1. The link takes the bar's own
   text colour, underlined, so it reads in both themes. */
.sg .sponsor { background: var(--ink); color: var(--ink-fg); font-size: 13px; }
.sg .sponsor a, .sg .sponsor a:hover { color: var(--ink-fg); text-decoration: underline; text-underline-offset: 2px; }
.sg .top { background: var(--surface); border-bottom-color: var(--line); }
.sg .brand, .sg .nav a { color: var(--fg); }
.sg-panel, .sg-timeline span, .sg-people li, .sg-item > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .sg .top-row { gap: 8px; }
  .sg .brand { font-size: 15px; white-space: nowrap; }
  .sg .brand .mark { width: 24px; height: 24px; }
  .sg .nav a { padding: 0 6px; font-size: 14px; min-height: 2.5rem; }
}

/* The signer's pages: calm and single-purpose. The mark and what the page is for, nothing to navigate; the sponsor line
   sits quietly at the foot, after the work. Same tokens as the app. */
.sg-quiet { min-height: 100vh; display: flex; flex-direction: column; }
.sg-quiet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sg-quiet-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--fg); }
.sg-quiet-brand .mark { width: 22px; height: 22px; }
.sg-quiet-what { font-size: 13px; color: var(--muted); }
.sg-quiet #signer-app, .sg-quiet main { flex: 1; }
.sg-quiet .sponsor { margin-top: auto; }