/* ============================================================
   SignatureConfirm shared design system (TASK-036)
   Direction A "Evolved Mint" per DESIGN-SPEC.md. Contents:
     1. Design tokens (primitives + semantic) and dark scheme
     2. Reduced motion
     3. Reset, base typography, focus
     4. Layout utilities
     5. Skip link
     6. Header / nav / footer chrome, impersonation bar
     7. Buttons
     8. Forms
     9. Cards
    10. Tables
    11. Alerts / flashes
    12. Badges / status pills
    13. Filter tabs
    14. Step indicators
    15. Pricing cards
    16. Hero variants
    17. Price flag + meter band (marketing only)
    18. Stat tiles, receipt card, seal, usage bar, charts
    19. Signature pad frame
    20. Empty states
    21. Ceremony scope + ceremony header/footer
    22. Area sections (marketing / auth / app / billing / signing /
        admin): page-specific rules, folded in here so app.css stays
        the single stylesheet (spec 2.1; assets/*.js unchanged per
        DO-NOT-TOUCH 7.12). Shared components live in sections 1-21.
   ============================================================ */

/* ============================================================
   SignatureConfirm design tokens (TASK-036)
   RULES:
   - Outside this block, reference SEMANTIC tokens only.
   - HAZARDS:
     --mint-500 #0cbfb3: DECORATIVE ONLY. Never text, never a sole
       state indicator (2.30:1 on white).
     --mint-600 #0a9a90: large text (24px+/19px bold) and glyphs only.
     --slate-400 #8c95a3: non-text only.
   - CONTRAST TABLE (WCAG 2.x, computed 2026-07-17):
     #067d76 on #ffffff .............. 5.00:1  (accent/light)
     #067d76 on #f4f6f8 .............. 4.61:1
     #056059 on #eceff3 .............. 6.45:1  (accent on sunken/light)
     #45d6c9 on #101319 ............. 10.37:1  (accent on sunken/dark)
     #ffffff on #067d76 .............. 5.00:1  (btn primary light)
     #072a27 on #2ecfbf .............. 7.88:1  (btn primary dark)
     #232830 on #ffffff ............. 14.81:1  (text/light)
     #e8ebf0 on #14171c ............. 15.03:1  (text/dark)
     #5d6672 on #f4f6f8 .............. 5.37:1  (muted/light)
     #a6aeba on #1b202a .............. 7.29:1  (muted/dark raised)
     #45d6c9 on #1b202a .............. 9.11:1  (accent/dark raised)
     #1e7b3f on #e9f6ee .............. 4.77:1  (success light)
     #815409 on #fdf4e0 .............. 5.99:1  (warning light)
     #b3362b on #fdeeed .............. 5.35:1  (error light)
     #206577 on #e8f4f7 .............. 5.87:1  (info light)
     #7dd89c on #152a1e .............. 8.81:1  (success dark)
     #e3bd72 on #2f2712 .............. 8.30:1  (warning dark)
     #f0a099 on #331b1a .............. 7.77:1  (error dark)
     #7cc7da on #14282e .............. 8.04:1  (info dark)
     #62dcce on #262b34 .............. 8.56:1  (price flag)
     #ffffff on #353b47 ............. 11.24:1  (chrome text)
   - DEPTH + LEDGER BLEND pairs (WCAG 2.x, computed 2026-07-23):
     #ffffff on #056059 .............. 7.44:1  (gradient primary, light stop)
     #072a27 on #45d6c9 .............. 8.55:1  (gradient primary, dark light stop)
     #ffffff on #043f3b ............. 11.80:1  (page-band heading, worst stop)
     #45d6c9 on #043f3b .............. 6.58:1  (page-band link, worst stop)
     #6ee0d5 on #043f3b .............. 7.47:1  (page-band link hover)
     #056059 on #ecfbf8 .............. 6.98:1  (card strip heading, light)
     #a5ebe0 on #043f3b .............. 8.74:1  (card strip heading, dark)
     #ffffff on #1e7b3f .............. 5.30:1  (solid signed/paid pill)
     #ffffff on #206577 .............. 6.58:1  (solid sent pill)
     #ffffff on #815409 .............. 6.55:1  (solid awaiting pill)
     #ffffff on #b3362b .............. 6.04:1  (solid overdue/declined/failed pill)
     #ffffff on #434955 .............. 9.04:1  (solid draft/archived/expired pill)
     #353b47 on #eceff3 .............. 9.75:1  (ledger table header ink, light)
     #a6aeba on #101319 .............. 8.31:1  (ledger table header ink, dark)
     #dae7e6 on #056059 .............. 5.86:1  (H2 chrome idle nav, composited)
     #d9e2e2 on #043f3b .............. 8.95:1  (H2 chrome idle nav, darker stop)
     #072a27 on #2ecfbf .............. 7.88:1  (H2 chrome active-nav pill)
     #e8ebf0 on #101319 ............. 15.56:1  (announcement message ink)
     #45d6c9 on #101319 ............. 10.37:1  (announcement action link)
     #45d6c9 on #353b47 .............. 6.27:1  (builder tower-rail link)
     #7dd89c on #353b47 .............. 6.52:1  (builder tower-rail check glyph)
   ============================================================ */
:root {
  color-scheme: light dark;

  /* --- primitives: mint (hue locked to heritage ~180deg) --- */
  --mint-050: #ecfbf8;  --mint-100: #d3f5ef;  --mint-200: #a5ebe0;
  --mint-300: #62dcce;  --mint-400: #2ecfbf;  --mint-500: #0cbfb3;
  --mint-600: #0a9a90;  --mint-700: #067d76;  --mint-800: #056059;
  --mint-900: #043f3b;

  /* --- primitives: slate --- */
  --slate-050: #f4f6f8; --slate-100: #e8ecf0; --slate-200: #d9dee6;
  --slate-300: #b7bfca; --slate-400: #8c95a3; --slate-500: #5d6672;
  --slate-600: #434955; --slate-700: #353b47; --slate-800: #262b34;
  --slate-850: #1b202a; --slate-900: #14171c; --slate-950: #101319;

  /* --- semantic: surfaces (LIGHT; dark overrides below) --- */
  --surface-page: #f4f6f8;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-sunken: #eceff3;

  /* --- semantic: text --- */
  --text-primary: #232830;
  --text-muted: #5d6672;

  /* --- semantic: interactive --- */
  --accent: #067d76;
  --accent-hover: #056059;
  --accent-hover: color-mix(in oklab, var(--accent) 85%, var(--text-primary));
  --accent-on-sunken: #056059;      /* accent TEXT over --surface-sunken */
  --brand-mark: #0cbfb3;            /* decorative only, see HAZARDS */
  --btn-primary-bg: #067d76;
  --btn-primary-ink: #ffffff;
  --ceremony-action-bg: #067d76;    /* the one accent on ceremony pages */
  --ceremony-action-ink: #ffffff;
  --focus-ring: #067d76;

  /* --- semantic: borders --- */
  --border: #e2e6ec;
  --border-hairline: rgb(35 40 48 / 0.12);
  --border-hairline: color-mix(in oklab, var(--text-primary) 12%, transparent);

  /* --- semantic: ledger table treatment (Direction A) --- */
  --ledger-th-ink: #353b47;             /* slate-700, 9.75:1 on sunken */
  --ledger-row-hover: #ecfbf8;          /* mint-050 row tint (decorative) */

  /* --- semantic: constant chrome (BOTH schemes, never overridden) --- */
  --chrome-bg: #353b47;
  --chrome-text: rgb(255 255 255 / 0.85);
  --chrome-text-strong: #ffffff;

  /* --- semantic: signature surfaces (BOTH schemes, never overridden) --- */
  --pad-surface: #ffffff;
  --pad-ink: #14171c;

  /* --- semantic: status --- */
  --ok-bg: #e9f6ee;   --ok-fg: #1e7b3f;   --ok-border: #bfe3cb;
  --warn-bg: #fdf4e0; --warn-fg: #815409; --warn-border: #edd6a4;
  --err-bg: #fdeeed;  --err-fg: #b3362b;  --err-border: #f1c0bc;
  --info-bg: #e8f4f7; --info-fg: #206577; --info-border: #c2e2ea;

  /* --- type --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.33vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 1.9rem);
  --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --text-display: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem);

  /* --- spacing (8px grid, 4px half-steps) --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 56px; --space-10: 64px; --space-11: 80px; --space-12: 96px;

  /* --- radii --- */
  --radius-sm: 6px;   /* inputs, buttons, chips */
  --radius-md: 10px;  /* cards, tables, alerts */
  --radius-lg: 16px;  /* hero band, ceremony sheet, featured plan */
  --radius-full: 999px;

  /* --- depth (dark scheme zeroes the shadows with transparent shadows,
     never `none`: `none` is invalid inside a composed shadow list such as
     `var(--shadow-1), var(--glow-mint)` and would drop the whole value) --- */
  --shadow-1: 0 1px 2px rgb(21 24 30 / 0.05), 0 1px 3px rgb(21 24 30 / 0.07);
  --shadow-2: 0 2px 4px rgb(21 24 30 / 0.05), 0 8px 24px rgb(21 24 30 / 0.09);
  --glow-mint: 0 8px 32px rgb(12 191 179 / 0.18); /* hero CTA + featured plan ONLY */

  /* --- layout (W2: chrome and content share one 1240px edge) --- */
  --page-max-marketing: 1240px;
  --page-max-app: 1240px;

  /* --- motion --- */
  --motion-duration: 180ms;
  --motion-ease: ease-out;
}

/* The two dark blocks below MUST remain byte-identical (edit both or
   neither). Chrome, pad, and glow tokens are intentionally absent
   (constant across schemes). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #14171c;
    --surface-raised: #1b202a;
    --surface-overlay: #232833;
    --surface-sunken: #101319;
    --text-primary: #e8ebf0;
    --text-muted: #a6aeba;
    --accent: #45d6c9;
    --accent-hover: #6ee0d5;
    --accent-hover: color-mix(in oklab, var(--accent) 85%, #ffffff);
    --accent-on-sunken: #45d6c9;
    --brand-mark: #2ecfbf;
    --btn-primary-bg: #2ecfbf;
    --btn-primary-ink: #072a27;
    --ceremony-action-bg: #2ecfbf;
    --ceremony-action-ink: #072a27;
    --focus-ring: #45d6c9;
    --border: #2a303b;
    --border-hairline: rgb(232 235 240 / 0.12);
    --border-hairline: color-mix(in oklab, var(--text-primary) 12%, transparent);
    --ledger-th-ink: #a6aeba;
    --ledger-row-hover: rgb(69 214 201 / 0.08);
    --ok-bg: #152a1e;   --ok-fg: #7dd89c;   --ok-border: #2a4d36;
    --warn-bg: #2f2712; --warn-fg: #e3bd72; --warn-border: #524220;
    --err-bg: #331b1a;  --err-fg: #f0a099;  --err-border: #5a302d;
    --info-bg: #14282e; --info-fg: #7cc7da; --info-border: #24505c;
    --shadow-1: 0 0 #0000;
    --shadow-2: 0 0 #0000;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  /* byte-identical copy of the media-query dark block above */
  --surface-page: #14171c;
  --surface-raised: #1b202a;
  --surface-overlay: #232833;
  --surface-sunken: #101319;
  --text-primary: #e8ebf0;
  --text-muted: #a6aeba;
  --accent: #45d6c9;
  --accent-hover: #6ee0d5;
  --accent-hover: color-mix(in oklab, var(--accent) 85%, #ffffff);
  --accent-on-sunken: #45d6c9;
  --brand-mark: #2ecfbf;
  --btn-primary-bg: #2ecfbf;
  --btn-primary-ink: #072a27;
  --ceremony-action-bg: #2ecfbf;
  --ceremony-action-ink: #072a27;
  --focus-ring: #45d6c9;
  --border: #2a303b;
  --border-hairline: rgb(232 235 240 / 0.12);
  --border-hairline: color-mix(in oklab, var(--text-primary) 12%, transparent);
  --ledger-th-ink: #a6aeba;
  --ledger-row-hover: rgb(69 214 201 / 0.08);
  --ok-bg: #152a1e;   --ok-fg: #7dd89c;   --ok-border: #2a4d36;
  --warn-bg: #2f2712; --warn-fg: #e3bd72; --warn-border: #524220;
  --err-bg: #331b1a;  --err-fg: #f0a099;  --err-border: #5a302d;
  --info-bg: #14282e; --info-fg: #7cc7da; --info-border: #24505c;
  --shadow-1: 0 0 #0000;
  --shadow-2: 0 0 #0000;
}

/* ---------- 2. Reduced motion (movement always pairs with opacity so
   the reduced case degrades to a fade or static state, never a jump) */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Reset, base typography, focus ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-page);
  overflow-x: clip; /* full-bleed bands use 100vw; never let the body scroll sideways */
}

img, svg, canvas { max-width: 100%; }
img { height: auto; }
/* The hidden attribute must win over component display rules (e.g. .btn is
   display:inline-flex, which otherwise outranks the UA [hidden] rule and
   leaves toggled-off buttons like the save-retry visible). */
[hidden] { display: none !important; }

h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; text-wrap: balance; margin-block: 0 var(--space-4); }
h2 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.01em;
  line-height: 1.2; text-wrap: balance; margin-block: var(--space-6) var(--space-3); }
h3 { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.01em;
  line-height: 1.2; margin-block: var(--space-5) var(--space-2); }
h4 { font-size: var(--text-lg); font-weight: 650; line-height: 1.2;
  margin-block: var(--space-4) var(--space-2); }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

code { font-family: var(--font-mono); font-size: 0.9em;
  background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- 4. Layout utilities ---------- */
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.row     { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between;
               gap: var(--space-3); flex-wrap: wrap; }
.measure    { max-width: 65ch; }
.maxw-sm    { max-width: 28rem; }   /* auth cards */
.maxw-md    { max-width: 36rem; }   /* single-form pages */
.maxw-sheet { max-width: 720px; }   /* ceremony sheet */
.center     { margin-inline: auto; }
.text-muted { color: var(--text-muted); }
.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Page containers: app width by default; marketing pages add
   .container-marketing on the main element via the main_class block. */
.container { width: 100%; max-width: var(--page-max-app);
  margin-inline: auto; padding-inline: var(--space-4); }
.container-marketing { max-width: var(--page-max-marketing); }
main.container { padding-block: var(--space-6) var(--space-10); }

/* Marketing section rhythm + full-bleed bands */
.section { padding-block: clamp(64px, 6vw, 112px); }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.band-sunken { background: var(--surface-sunken); }
/* Accent text on the sunken surface needs the darker accent step:
   #067d76 on #eceff3 is only 4.33:1 (below the 4.61:1 floor) */
.band-sunken a { color: var(--accent-on-sunken); }

/* ---------- 5. Skip link (first focusable element on every page) ---------- */
.skip-link { position: absolute; left: -9999px; z-index: 100; }
.skip-link:focus { left: var(--space-3); top: var(--space-3);
  background: var(--surface-raised); color: var(--accent);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- 6. Header / footer chrome (H2 "Deep teal" control-tower
   chrome, constant BOTH schemes: opaque #043f3b->#056059 gradient, solid
   #2ecfbf keyline, solid active-nav pill, seal + wordmark brand lockup) ---------- */
.site-header { position: sticky; top: 0; z-index: 50;
  background: #056059; /* static fallback (lighter stop) */
  background: linear-gradient(135deg, #043f3b, #056059);
  backdrop-filter: none;
  border-bottom: 0; }
.site-header::after { content: ""; display: block; height: 2px;
  background: #2ecfbf; } /* solid keyline, decorative (6.07:1 vs #043f3b) */
.site-header .header-inner { max-width: var(--page-max-marketing);
  margin-inline: auto; padding: var(--space-2) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3); }
.site-header .brand { color: var(--chrome-text-strong); font-weight: 700;
  text-decoration: none; font-size: var(--text-lg);
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; }
/* Brand lockup: seal mark (agreement/summary geometry) + wordmark from
   {{ site_name }}. Mark is decorative, monochrome white on chrome. */
.site-header .brand-seal { display: block; width: 28px; height: 28px;
  flex: none; color: #ffffff; }
.site-header .brand-word { white-space: nowrap; font-weight: 700; }
.site-header nav { display: flex; align-items: center; gap: var(--space-1);
  margin-inline-start: auto; }
.site-header nav a { color: var(--chrome-text); text-decoration: none;
  padding: var(--space-2) var(--space-3); min-height: 44px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; }
/* Hover pill: 8% white composited over the chrome gradient. */
.site-header nav a:hover,
.site-header .header-actions > a:not(.btn):hover {
  background: rgb(255 255 255 / 0.08); /* static fallback */
  background: color-mix(in srgb, #ffffff 8%, transparent);
  color: var(--chrome-text-strong); }
/* Active nav: solid #2ecfbf pill, #072a27 ink (7.88:1). Declared after
   :hover on equal specificity so the active link keeps its pill hovered. */
.site-header nav a[aria-current="page"] { background: #2ecfbf;
  color: #072a27; }
.site-header .header-actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header .header-actions > a:not(.btn) { color: var(--chrome-text);
  text-decoration: none; padding: var(--space-2) var(--space-3); min-height: 44px;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; white-space: nowrap; }
.site-header .btn-primary { background: var(--btn-primary-bg);
  color: var(--btn-primary-ink); } /* G14: flips per scheme inside chrome */

/* Mobile: no JS, no hamburger. Two rows - brand + auth actions, then the
   nav links in a horizontally scrollable strip. All links stay in the DOM. */
@media (max-width: 719px) {
  .site-header .header-inner { flex-wrap: wrap; justify-content: space-between; }
  .site-header nav { flex-basis: 100%; order: 10; overflow-x: auto;
    white-space: nowrap; -webkit-overflow-scrolling: touch; margin-inline-start: 0; }
}

/* Announcement bar: constant near-black broadcast strip above the header
   (both schemes, like chrome). Half height (16px) when empty and
   aria-hidden; grows to ~32px for one message line. Inner constrained to
   the marketing edge so it lines up with the brand and content. */
.announcement-bar { background: #101319; color: #e8ebf0;
  font-size: 0.8rem; line-height: 1.5;
  border-bottom: 1px solid #434955; /* decorative hairline under the strip */ }
.announcement-inner { max-width: var(--page-max-marketing);
  margin-inline: auto; min-height: 16px; /* empty resting: half of 32px */
  padding-inline: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3); }
.announcement-bar.is-active .announcement-inner {
  min-height: 32px; padding-block: 6px; }
.announcement-msg { margin: 0; }
.announcement-bar a { color: #45d6c9; text-decoration: underline; }
.announcement-bar a:hover { color: #6ee0d5; }
.announcement-tag { flex: none; background: #45d6c9; color: #072a27;
  font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 8px; border-radius: var(--radius-full); }
.announcement-dismiss { flex: none; margin-inline-start: auto;
  background: transparent; border: 0; color: #a6aeba; cursor: pointer;
  min-height: 32px; min-width: 44px; padding: 0 var(--space-2);
  display: inline-flex; align-items: center; justify-content: center; }
.announcement-dismiss:hover { color: #e8ebf0; }
.announcement-dismiss svg { display: block; }
.announcement-bar :focus-visible { outline: 2px solid #45d6c9;
  outline-offset: -2px; border-radius: 2px; }

/* Impersonation banner (admin "view as") */
.impersonation-bar { background: var(--warn-bg); color: var(--warn-fg);
  border-bottom: 1px solid var(--warn-border); text-align: center;
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.impersonation-bar a { color: var(--warn-fg); text-decoration: underline;
  font-weight: 600; }

/* Footer: slate chrome both schemes, two tiers, mint keyline on top */
.site-footer { background: var(--chrome-bg); color: var(--chrome-text);
  margin-block-start: var(--space-10); }
.site-footer::before { content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--brand-mark), transparent 70%); }
.site-footer .footer-inner { max-width: var(--page-max-marketing);
  margin-inline: auto; padding: var(--space-8) var(--space-4) var(--space-6); }
.footer-cta { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; color: var(--chrome-text-strong);
  padding-block-end: var(--space-6); margin-block-end: var(--space-6);
  border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.footer-cols { display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.footer-heading { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: var(--chrome-text);
  margin-block: 0 var(--space-2); }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--chrome-text); text-decoration: none; }
.footer-col a:hover { color: var(--chrome-text-strong); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-legal { margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  color: var(--chrome-text); font-size: var(--text-sm); }

/* ---------- 7. Buttons (one rule per variant, semantic tokens only) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 var(--text-base)/1 var(--font-sans); cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Depth gradient primary. Light scheme: #056059->#067d76 white ink
   (worst stop 5.00:1). Dark scheme overrides below (BOTH dark forms). */
.btn-primary { background: #067d76; /* static fallback (lighter stop) */
  background: linear-gradient(135deg, #056059, #067d76);
  color: #ffffff; box-shadow: var(--shadow-1); }
/* Hover stays a GRADIENT. Setting a flat colour here reset background-image
   to none, which cannot be transitioned and so snapped instantly, exposing
   the background-color underneath while THAT animated on the .btn
   transition -- read as a flash on every hover. Gradient to gradient swaps
   cleanly, and the colour beneath is never visible either way. */
.btn-primary:hover { background: #04524c;
  background: linear-gradient(135deg, #04524c, #056059); color: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary {
    background: #2ecfbf;
    background: linear-gradient(135deg, #2ecfbf, #45d6c9);
    color: #072a27; }
  :root:not([data-theme="light"]) .btn-primary:hover {
    background: #6ee0d5;
    background: linear-gradient(135deg, #6ee0d5, #8ae8df); color: #072a27; }
}
:root[data-theme="dark"] .btn-primary {
  background: #2ecfbf;
  background: linear-gradient(135deg, #2ecfbf, #45d6c9);
  color: #072a27; }
:root[data-theme="dark"] .btn-primary:hover {
  background: #6ee0d5;
  background: linear-gradient(135deg, #6ee0d5, #8ae8df); color: #072a27; }
.btn-secondary { background: var(--surface-raised); color: var(--accent);
  border-color: var(--border); border-color: var(--border-hairline); }
.btn-secondary:hover { background: var(--surface-sunken);
  color: var(--accent-on-sunken); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--surface-sunken);
  color: var(--accent-on-sunken); }
.btn-danger { background: transparent; color: var(--err-fg);
  border-color: var(--err-border); }
.btn-danger:hover { background: var(--err-bg); }

.btn-sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg);
  width: 100%; } /* ceremony sign button, hero CTA */

/* ---------- 8. Forms (native controls themed by color-scheme, G6) ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1);
  margin-block-end: var(--space-4); }
.field label { font-weight: 600; font-size: 0.9rem; }
.field-help { color: var(--text-muted); font-size: var(--text-sm); }
.field-error { color: var(--err-fg); font-size: var(--text-sm); }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], select, textarea {
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); min-height: 44px;
  font: inherit; width: 100%; }
textarea { min-height: 6rem; }
:is(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-4); }
legend { font-weight: 600; padding-inline: var(--space-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent);
  width: 20px; height: 20px; }
input[type="file"] { font: inherit; color: var(--text-primary); max-width: 100%; }

/* ---------- 9. Cards (never nest cards). Depth: hairline border, 12px
   radius, layered shadow-2. Optional .card-head is a tinted header strip
   flush to the card edges. ---------- */
.card { background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 12px; box-shadow: var(--shadow-2);
  padding: var(--space-5); }
.card > h2:first-child, .card > h3:first-child { margin-block-start: 0; }

/* Card header strip: mint tint bleeds to the card edges (light: #056059
   heading on --mint-050 6.98:1; dark: #a5ebe0 on #043f3b 8.74:1). */
.card-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  background: var(--mint-050); border-bottom: 1px solid var(--mint-200);
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: 11px 11px 0 0; }
.card-head h2 { margin-block: 0; font-size: var(--text-lg); color: #056059; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-head { background: #043f3b;
    border-bottom-color: rgb(165 235 224 / 0.25); }
  :root:not([data-theme="light"]) .card-head h2 { color: #a5ebe0; }
}
:root[data-theme="dark"] .card-head { background: #043f3b;
  border-bottom-color: rgb(165 235 224 / 0.25); }
:root[data-theme="dark"] .card-head h2 { color: #a5ebe0; }

/* ---------- 10. Tables (always wrapped in .table-wrap; scroll in place,
   never column-hiding - row action forms must stay intact) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-raised); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; /* Ledger mono-numeral discipline */ }
.table th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: var(--ledger-th-ink);
  background: var(--surface-sunken); padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-hairline); }
.table td { padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border); border-top-color: var(--border-hairline); }
.table tbody tr:hover { background: var(--ledger-row-hover); }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: right; }
.table td form { display: inline-block; margin: 0; }

/* ---------- 11. Alerts / flashes (.alert-error is test-pinned; each alert
   opens with a text glyph span - state is never color alone) ---------- */
.alert { display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border: 1px solid;
  border-radius: var(--radius-md); font-size: var(--text-sm); }
.alert-success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.alert-error   { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); }
.alert-warning { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.alert-info    { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.alert-glyph { font-weight: 700; flex: none; }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }
.alert:not(:last-child) { margin-block-end: var(--space-3); }

/* ---------- 12. Badges / status pills (text is always the status word) ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; border: 1px solid; }
/* Depth: solid fills, constant both schemes, white ink (status word text
   always present, never color-only). Ratios in the blend table above. */
.pill-signed   { background: #1e7b3f; color: #ffffff; border-color: #1e7b3f; }
.pill-awaiting { background: #815409; color: #ffffff; border-color: #815409; }
.pill-sent     { background: #206577; color: #ffffff; border-color: #206577; }
.pill-overdue, .pill-declined, .pill-failed
               { background: #b3362b; color: #ffffff; border-color: #b3362b; }
.pill-draft, .pill-archived, .pill-expired
               { background: #434955; color: #ffffff; border-color: #434955; }
.pill-paid     { background: #1e7b3f; color: #ffffff; border-color: #1e7b3f; }
/* "Most popular" plan badge: solid mint, #072a27 ink (7.88:1).
   Marketing only; FORBIDDEN in ceremony. */
.pill-pop      { background: #2ecfbf; color: #072a27;
                 border-color: #2ecfbf; }

/* ---------- 13. Filter tabs (links, not ARIA tabs; wrap in
   <nav aria-label="Contract filters">, aria-current="page" on active) ---------- */
.tab-bar { display: flex; gap: var(--space-1); overflow-x: auto;
  border-bottom: 1px solid var(--border); }
.tab-bar a { padding: var(--space-2) var(--space-4); white-space: nowrap;
  color: var(--text-muted); text-decoration: none; border-bottom: 2px solid
  transparent; min-height: 44px; display: inline-flex; align-items: center; }
.tab-bar a:hover { color: var(--text-primary); }
.tab-bar a[aria-current="page"] { color: var(--accent);
  border-bottom-color: var(--accent); font-weight: 600; }

/* ---------- 14. Step indicators (builder + ceremony variants; each li
   carries visually-hidden state text for screen readers) ---------- */
.steps-rail { display: flex; gap: var(--space-2); position: relative;
  list-style: none; padding: 0; counter-reset: step; }
.steps-rail::before { content: ""; position: absolute; left: 0; right: 0;
  top: 50%; height: 2px; background: var(--border-hairline); z-index: 0; }
.steps-rail li { position: relative; z-index: 1; background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
/* Spec-sanctioned exception to the semantic-tokens-only rule: done-state
   uses --mint-050/--mint-200 with fixed ink #043f3b (11.08:1 on mint-050). */
.steps-rail li[data-state="done"] { background: var(--mint-050);
  color: #043f3b; border-color: var(--mint-200); }
.steps-rail li[data-state="done"]::before { content: "\2713\0020"; }
.steps-rail li[data-state="active"] { background: #067d76;
  background: linear-gradient(135deg, #056059, #067d76);
  color: #ffffff; border-color: transparent; font-weight: 600;
  box-shadow: var(--shadow-1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps-rail li[data-state="active"] {
    background: #2ecfbf;
    background: linear-gradient(135deg, #2ecfbf, #45d6c9);
    color: #072a27; border-color: transparent; }
}
:root[data-theme="dark"] .steps-rail li[data-state="active"] {
  background: #2ecfbf;
  background: linear-gradient(135deg, #2ecfbf, #45d6c9);
  color: #072a27; border-color: transparent; }
.steps-rail li[data-state="todo"] { color: var(--text-muted); }

/* ---------- 15. Pricing cards (use with .card: class="card plan") ---------- */
.pricing-grid { display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan .price { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-3xl); font-weight: 700; }
.plan .price small { font-size: var(--text-sm); color: var(--text-muted); }
.plan.featured { border: 1px solid var(--brand-mark);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2), var(--glow-mint); }
.pricing-grid:has(.plan.featured) .plan:not(.featured) { opacity: 0.92; }
.plan.featured .pill-pop { background: #2ecfbf; color: #072a27;
  border-color: #2ecfbf; } /* "Most popular", #072a27 ink 7.88:1 */

/* ---------- 16. Hero variants ---------- */
/* Marketing hero (home only): constant dark band in both schemes */
.hero-marketing { border-radius: var(--radius-lg); color: #ffffff;
  background: linear-gradient(135deg, #262b34, #0b3f3b 70%, #067d76);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px); }
.hero-marketing h1 { font-size: var(--text-display); color: #ffffff; }
.hero-marketing .lede { font-size: var(--text-lg); color: rgb(255 255 255 / 0.85);
  max-width: 65ch; }
/* Hero CTA: fixed bright-mint fill + dark ink (7.9:1) so it reads
   identically on the dark band in both schemes; permitted glow 1 of 2 */
.hero-marketing .btn-primary { background: #2ecfbf; color: #072a27;
  box-shadow: var(--glow-mint); }
.hero-microcopy { color: rgb(255 255 255 / 0.75); font-size: var(--text-sm); }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
/* Radial mint glow behind the hero CTA: wrap the CTA in .hero-glow */
.hero-glow { position: relative; display: inline-block; }
.hero-glow::before { content: ""; position: absolute; inset: -40px;
  background: radial-gradient(closest-side, rgb(12 191 179 / 0.15), transparent);
  pointer-events: none; }
.hero-glow > * { position: relative; }
/* Hero signature stroke (G5): pure-CSS draw-on of an inline SVG path.
   Give the path pathLength="320". Under reduced motion the animation
   collapses and the full stroke shows statically. */
.hero-stroke { display: block; width: min(320px, 60%); height: auto; }
.hero-stroke path { fill: none; stroke: #2ecfbf; stroke-width: 4;
  stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: hero-stroke-draw 600ms var(--motion-ease) forwards; }
@keyframes hero-stroke-draw { to { stroke-dashoffset: 0; } }

/* Page hero (all other marketing/prose pages): plain page-bg band */
.hero-page { padding-block: var(--space-8) var(--space-6); }
.hero-page h1 { font-size: var(--text-3xl); }
.hero-page .lede, .lede { font-size: var(--text-lg); color: var(--text-muted);
  margin-block: 0 var(--space-4); }

/* Page band (Depth): mint-900-to-slate-850 gradient head, constant both
   schemes like chrome. Light-on-dark; ratios in the blend table above.
   CSS-only for now; templates adopt it in a later stage. */
.page-band { background: #043f3b;
  background: linear-gradient(135deg, #043f3b, #1b202a);
  color: rgb(255 255 255 / 0.85);
  border-radius: 12px; box-shadow: var(--shadow-2);
  padding: var(--space-5) var(--space-6);
  margin-block-end: var(--space-5); }
.page-band h1, .page-band h2 { color: #ffffff; }
.page-band .lede { color: rgb(255 255 255 / 0.85); }
.page-band a:not(.btn) { color: #45d6c9; }
.page-band a:not(.btn):hover { color: #6ee0d5; }
.page-band :focus-visible { outline-color: #2ecfbf; }
.page-band > p:first-child { margin-block-start: 0; }
.hero-page.page-band { padding-block: var(--space-7); }
.hero-page.page-band .lede { margin-block-end: 0; }

/* ---------- 17. Price flag + meter band (marketing ONLY; both are
   FORBIDDEN in app chrome and ceremony templates) ---------- */
/* Fixed colors in both schemes (lives on/near dark bands): #62dcce on
   #262b34 = 8.6:1 */
.price-flag { display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); background: #262b34; color: #62dcce;
  border: 1px solid #353b47; border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4); }
/* Full-bleed dark band (constant both schemes) on home + pricing */
.meter-band { background: #262b34; color: rgb(255 255 255 / 0.72);
  padding-block: var(--space-8); }
.meter-band h2, .meter-band h3 { color: #ffffff; }
/* The ledger scrolls inside its own max-height container so the sticky
   ours-row stays visible while competitor rows scroll past (G9) */
.meter-ledger { max-height: 300px; overflow-y: auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); border: 1px solid #353b47;
  border-radius: var(--radius-md); }
.meter-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 0.08); }
.meter-row:first-child { border-top: 0; }
.meter-source { font-size: var(--text-xs); color: rgb(255 255 255 / 0.55); }
.meter-row-ours { position: sticky; bottom: 0; background: #262b34;
  border-left: 3px solid #0cbfb3; color: #62dcce; }

/* ---------- 18. Stat tiles, receipt card, seal, usage bar, charts ---------- */
/* .dash-grid is the container-query wrapper (existing class kept);
   .stat-grid is the grid of .card.stat tiles inside it */
.dash-grid { container-type: inline-size; margin-block: var(--space-2) var(--space-5); }
.stat-grid { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat .stat-label { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: var(--text-muted); }
.stat .stat-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 2.25rem; font-weight: 700; color: var(--text-primary);
  line-height: 1.1; } /* no color on numbers */

/* Receipt card (post-sign confirmation, billing/transaction; use with
   .card): mono definition rows separated by hairlines */
.receipt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.receipt .receipt-row { display: flex; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; padding-block: var(--space-2);
  border-top: 1px solid var(--border-hairline); }
.receipt .receipt-row:first-child { border-top: 0; }
.receipt dl { margin: 0; }
.receipt dt { color: var(--text-muted); }
.receipt dd { margin: 0; }

/* Completion seal (inline SVG ~48px): ring in .seal-ring, check in
   .seal-check; never animated beyond a single opacity fade-in */
.seal { width: 48px; height: 48px; flex: none;
  animation: seal-in var(--motion-duration) var(--motion-ease) both; }
.seal .seal-ring { stroke: var(--brand-mark); fill: none; }
.seal .seal-check { stroke: var(--ok-fg); fill: none; }
@keyframes seal-in { from { opacity: 0; } to { opacity: 1; } }

/* Plan-usage bar (dashboard quota card). Spec-sanctioned primitive use:
   mint gradient fill is non-text. Add .usage-bar-warn at >=75% - always
   paired with the existing upgrade alert text, never color alone. */
.usage-bar { height: 12px; border-radius: var(--radius-full);
  background: var(--surface-sunken); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: var(--radius-full);
  background: #0cbfb3;
  background: linear-gradient(90deg, #0cbfb3, #056059); }
.usage-bar-warn span { background: var(--warn-fg);
  background: linear-gradient(90deg, #e3bd72, #815409); }

/* Dashboard charts (templates/dashboard/_charts.html.twig; svg.donut and
   .chart-legend/.barchart class names are pinned). Recolor only:
   sent = --brand-mark, signed = --ok-fg. */
.chart-wrap { container-type: inline-size; }
.chart-cards { display: grid; grid-template-columns: 1fr 1.4fr;
  gap: var(--space-4); align-items: start; }
.chart-card h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.chart-card .chart-body { display: flex; flex-direction: column;
  align-items: center; gap: var(--space-2); }
.donut { max-width: 180px; height: auto; }
.donut-num { font-family: var(--font-sans); font-size: 32px; font-weight: 700;
  fill: var(--text-primary); }
.donut-cap { font-size: 12px; fill: var(--text-muted); }
.chart-legend { list-style: none; padding: 0; margin: var(--space-3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  justify-content: center; font-size: var(--text-sm); color: var(--text-muted); }
.chart-legend li { margin: 0; display: inline-flex; align-items: center;
  gap: var(--space-2); }
.chart-legend strong { color: var(--text-primary); }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--border); }
.swatch-sent { background: #0cbfb3;
  background: linear-gradient(135deg, #2ecfbf, #067d76); }
.swatch-signed { background: #1e7b3f;
  background: linear-gradient(135deg, #7dd89c, #1e7b3f); }
.barchart { display: flex; align-items: flex-end; gap: var(--space-3);
  height: 180px; width: 100%; padding-top: var(--space-2); }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; }
.barcol .bars { flex: 1; width: 100%; display: flex; align-items: flex-end;
  justify-content: center; gap: 3px; }
.bar { position: relative; width: 42%; min-height: 2px;
  border-radius: 3px 3px 0 0;
  transition: height var(--motion-duration) var(--motion-ease); }
.bar-sent { background: #0cbfb3;
  background: linear-gradient(180deg, #2ecfbf, #067d76); }
.bar-signed { background: #1e7b3f;
  background: linear-gradient(180deg, #7dd89c, #1e7b3f); }
.bar .bar-tip { position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); background: var(--chrome-bg);
  color: var(--chrome-text-strong); font-size: var(--text-xs);
  padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-duration) var(--motion-ease);
  margin-bottom: var(--space-1); }
.bar:hover .bar-tip { opacity: 1; }
.barlabel { margin-top: var(--space-2); font-size: var(--text-xs);
  color: var(--text-muted); }
@container (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .chart-cards { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .chart-cards { grid-template-columns: 1fr; }
}

/* ---------- 19. Signature pad frame (G2). Signature strokes and stored
   signature images stay dark-ink-on-white in BOTH schemes - dark mode
   must NEVER invert or dim them. Canvas ids and the inline script in
   sign/index.html.twig are untouched by styling. ---------- */
.sig-frame { background: var(--pad-surface); /* forced white BOTH schemes */
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3); }
.sig-frame:focus-within { border: 2px solid var(--ceremony-action-bg);
  padding: calc(var(--space-3) - 1px); }
/* The canvas renders at its intrinsic attribute size (500x150): the
   DO-NOT-TOUCH inline script maps pointer coordinates 1:1 to canvas
   pixels, so the displayed size must match the attribute size. The
   max-width guard only engages below ~530px viewports. */
.sig-frame canvas { display: block; width: auto; max-width: 100%;
  touch-action: none; background: var(--pad-surface); }
.sig-line { border-top: 1px solid var(--pad-ink); margin-top: var(--space-2);
  position: relative; color: var(--pad-ink); }
.sig-line::before { content: "X"; position: absolute; top: -1.4em; left: 0;
  font-size: var(--text-sm); }
img.signature, .signature-event img, .signature-block img {
  background: #ffffff; } /* preserve existing forced-white rule */
#signature-pad { background: var(--pad-surface); touch-action: none;
  max-width: 100%; } /* safety: forced white even before .sig-frame wraps it */

/* ---------- 20. Empty states (use with .card; text only, one heading,
   one sentence, one .btn-primary) ---------- */
.empty-state { max-width: 36rem; margin-inline: auto; text-align: center;
  padding: var(--space-7) var(--space-5); }

/* ---------- 21. Ceremony scope (G1, G7). Applied as body class on
   review/index, sign/index, review/unavailable. The ONLY accent-colored
   element inside is the primary action button (reads --ceremony-action-*,
   deliberately not remapped); the completion seal is the sanctioned
   post-signature exception. Marketing components (.price-flag,
   .meter-band, .hero-marketing, .pill-pop) are FORBIDDEN here. ---------- */
.ceremony {
  --accent: var(--text-primary);        /* links become ink, underlined */
  --accent-hover: var(--text-primary);
  --accent-on-sunken: var(--text-primary);
  --brand-mark: var(--text-muted);      /* keylines go quiet */
  --focus-ring: var(--text-primary);    /* ink focus ring, 14:1 */
  --glow-mint: none;                    /* no glows, ever */
  background: var(--surface-sunken);    /* sheet backdrop, section 4.7 */
}
.ceremony a { text-decoration: underline; }
.ceremony .btn-primary { background: var(--ceremony-action-bg);
  color: var(--ceremony-action-ink); box-shadow: none; }
.ceremony .btn-primary:hover { background: #056059;
  background: color-mix(in oklab, var(--ceremony-action-bg) 85%,
    var(--ceremony-action-ink)); }
/* Freeze guard: the shared Depth gradients on .btn-primary (section 7) and
   .steps-rail li[data-state="active"] (section 14) hardcode mint and, in the
   dark scheme, outrank the ceremony's token-remapped monochrome. Re-assert
   the flat action fill and the ink active step so the recipient ceremony
   renders exactly as it did before this restyle. */
.ceremony .steps-rail li[data-state="active"] { background: var(--accent);
  color: var(--btn-primary-ink); border-color: var(--accent); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ceremony .btn-primary {
    background: var(--ceremony-action-bg); color: var(--ceremony-action-ink); }
  :root:not([data-theme="light"]) .ceremony .btn-primary:hover {
    background: color-mix(in oklab, var(--ceremony-action-bg) 85%,
      var(--ceremony-action-ink)); }
  :root:not([data-theme="light"]) .ceremony .steps-rail li[data-state="active"] {
    background: var(--accent); color: var(--btn-primary-ink);
    border-color: var(--accent); }
}
:root[data-theme="dark"] .ceremony .btn-primary {
  background: var(--ceremony-action-bg); color: var(--ceremony-action-ink); }
:root[data-theme="dark"] .ceremony .btn-primary:hover {
  background: color-mix(in oklab, var(--ceremony-action-bg) 85%,
    var(--ceremony-action-ink)); }
:root[data-theme="dark"] .ceremony .steps-rail li[data-state="active"] {
  background: var(--accent); color: var(--btn-primary-ink);
  border-color: var(--accent); }

/* Ceremony header: quiet strip, no nav links */
.ceremony-header { background: var(--surface-page);
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-4); text-align: center; }
.ceremony-header .wordmark { font-weight: 700; font-size: var(--text-sm);
  color: var(--text-muted); letter-spacing: 0.02em; }
.ceremony-header .wordmark a { color: inherit; text-decoration: none; }
.ceremony-header .wordmark a:hover { text-decoration: underline; }
.ref-chip { display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 2px var(--space-3); }

/* Quiet ceremony footer line (G8) - the product's only self-reference */
.ceremony-footer { text-align: center; color: var(--text-muted);
  font-size: var(--text-sm); padding: var(--space-6) var(--space-4); }
/* ============================================================   22. Area sections (folded from the former per-area files in   the original import order: marketing, auth, app-ui, billing,   signing, admin - the cascade is unchanged).   ============================================================ *//* Marketing-area styles (TASK-036): page-specific rules for the static
   marketing templates (home, how it works, features, pricing, about, faq,
   support, terms, privacy) and the contact page. Shared components live in
   app.css; only semantic tokens are referenced here, except the fixed colors
   sanctioned for the constant-dark hero and meter bands (spec 3.13/3.14). */

/* ---------- Section rhythm helpers ---------- */
.section > h2:first-child { margin-block-start: 0; }
.cta-microcopy { font-size: var(--text-sm); margin-block-start: var(--space-2); }

/* ---------- Home hero (constant dark band; fixed colors sanctioned) ---------- */
.hero-marketing .btn-lg { width: auto; }
.hero-marketing .btn-ghost { color: #ffffff; }
.hero-marketing .btn-ghost:hover { background: rgb(255 255 255 / 0.10); color: #ffffff; }
.hero-marketing :focus-visible { outline-color: #2ecfbf; } /* 7.3:1 on #262b34 */
.hero-marketing .hero-stroke { margin-block: calc(-1 * var(--space-2)) var(--space-4); }
.hero-marketing .lede { margin-block: 0 var(--space-5); }
.hero-marketing .hero-microcopy { margin-block: var(--space-3) 0; }

/* ---------- Trust strip (home) ---------- */
.trust-list { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.trust-list li { position: relative; padding-inline-start: var(--space-5);
  color: var(--text-muted); }
.trust-list li::before { content: "\2713"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700; }

/* ---------- Step cards (home band + how-it-works page) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step; }
.steps .step { counter-increment: step; background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); padding: var(--space-5); }
.steps .step::before { content: counter(step); display: inline-flex;
  align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--radius-full); background: var(--surface-sunken);
  color: var(--accent); font-weight: 700;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.steps .step h2, .steps .step h3 { margin-block: var(--space-2);
  font-size: var(--text-lg); }
.steps .step p { margin: 0; color: var(--text-muted); }
/* Real product screenshots inside the home step cards. Fixed-height crop
   window so the three differently shaped shots read as one row; the
   screenshots are light-scheme UI by design, framed in both schemes. */
.steps .step .step-shot { display: block; margin: var(--space-3) 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff; }
.steps .step .step-shot img { display: block; width: 100%; height: 170px;
  object-fit: cover; object-position: left top; }
.steps-more { margin-block: var(--space-5) 0; }

/* ---------- Bento feature grids (home + features) ---------- */
.bento-grid { display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bento-tile h3 { margin-block: 0 var(--space-2); font-size: var(--text-lg); }
.bento-tile p { margin: 0; color: var(--text-muted); }
@media (min-width: 720px) {
  .bento-grid .bento-wide { grid-column: span 2; }
}

/* ---------- Meter band extras (band itself lives in app.css) ---------- */
.meter-band .meter-name { color: #ffffff; flex: 0 0 9rem; } /* constant dark band */
.meter-band .meter-detail { flex: 1 1 20rem; }
.meter-band :focus-visible { outline-color: #2ecfbf; }
.meter-flag-row { margin-block: var(--space-4) 0; }

/* ---------- Founder line (home) ---------- */
.founder-line { text-align: center; }
.founder-line p { max-width: 55ch; margin-inline: auto;
  font-size: var(--text-lg); }
.founder-line p + p { margin-block-start: var(--space-3); }

/* ---------- Closing CTA sections ---------- */
.closing-cta { text-align: center; }
.closing-cta .cta-row { justify-content: center; }
.closing-cta .btn-lg { width: auto; }

/* ---------- Footer price restatement (footer_cta block) ---------- */
.footer-price { margin: 0; font-weight: 600; }

/* ---------- Plan card extras (pricing) ---------- */
.plan .plan-name { margin-block: 0; font-size: var(--text-xl); }
.plan .price { margin-block: var(--space-3) var(--space-4); }
.plan-bullets { list-style: none; margin: 0 0 var(--space-5); padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2); }
.plan-bullets li { position: relative; padding-inline-start: var(--space-5); }
.plan-bullets li::before { content: "\2713"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700; }
.plan .btn { width: 100%; }
.plan-note { font-size: var(--text-sm); margin-block: var(--space-3) 0;
  text-align: center; }
.no-meter { text-align: center; color: var(--text-muted);
  margin-block: var(--space-6); }

/* ---------- FAQ items (faq page + pricing billing questions) ---------- */
.faq-item { padding-block: var(--space-5);
  border-top: 1px solid var(--border-hairline); }
.faq-item:first-of-type { border-top: 0; }
.faq-item h2, .faq-item h3 { margin-block: 0 var(--space-2);
  font-size: var(--text-lg); }
.faq-item p { margin: 0; color: var(--text-muted); max-width: 65ch; }
.faq-links { margin-block: var(--space-6) 0; }

/* ---------- Prose pages (about, support, terms, privacy) ---------- */
.prose p { margin-block: var(--space-4); }
.prose h2 { margin-block: var(--space-7) var(--space-3);
  padding-block-start: var(--space-5);
  border-top: 1px solid var(--border-hairline); }
.prose ol { margin-block: var(--space-4); padding-inline-start: var(--space-5); }
.prose ol li { margin-block: var(--space-2); }
.about-highlight { background: var(--surface-sunken);
  border-inline-start: 3px solid var(--brand-mark); /* decorative keyline */
  border-radius: var(--radius-md); padding: var(--space-5); }

/* ---------- Contact ---------- */
.contact-reply-note { margin-block: var(--space-4) 0; }
/* Auth-area styles (TASK-036): login, signup, and password reset pages.
   Each page renders as one centered card composed from the shared
   foundation classes (card, maxw-sm, center, stack, field). Tokens and
   components live in app.css; only auth-specific rules belong here. */

.auth-card {
  margin-block-start: var(--space-7);
  padding: var(--space-6);
}

/* The form's .stack gap owns the vertical rhythm inside the card. */
.auth-card .field { margin-block-end: 0; }
.auth-card .field-help { margin: 0; }

/* One clear primary action: the submit button spans the card. */
.auth-card button[type="submit"] {
  width: 100%;
  margin-block-start: var(--space-2);
}

/* Decorative brand mark above the heading. --brand-mark is decorative
   only (see the token hazards in app.css); the SVG is aria-hidden. */
.auth-mark { display: block; margin-block-end: var(--space-4); }
.auth-mark-stroke { stroke: var(--brand-mark); }
.auth-mark-line { stroke: var(--text-muted); opacity: 0.5; }

/* Subhead directly under the h1. */
.auth-sub { margin-block: 0 var(--space-5); }

/* Checkbox rows: remember-me and the terms agreement. */
.auth-check { display: flex; align-items: center; gap: var(--space-2); }
.auth-check label,
.auth-agree label { font-size: var(--text-sm); }
.auth-agree label { display: flex; align-items: flex-start; gap: var(--space-2); }
.auth-agree input[type="checkbox"] { flex: none; margin-block-start: 1px; }

/* Cross-links between the auth pages, under the form. */
.auth-links {
  margin-block: var(--space-5) 0;
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.auth-links p { margin-block: 0 var(--space-1); }
.auth-links p:last-child { margin-block-end: 0; }
/* ============================================================
   App-area styles (TASK-036): page-specific rules for the
   signed-in sender surfaces - dashboard, contracts list,
   contract builder, summary, and account settings/preferences.
   Shared components live in app.css. Semantic tokens only.
   ============================================================ */

/* ---------- Shared page scaffolding (app area) ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-block-end: var(--space-2); }
.page-head h1 { margin-block: 0; }

.status-line { display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-block-end: var(--space-2); }
.status-line h1 { margin-block: 0; }

/* ---------- Dashboard ---------- */
.quota-card { margin-block-end: var(--space-5); }
.quota-caption { margin-block: 0 var(--space-2); }
.quota-card .usage-bar { margin-block-end: var(--space-4); }
/* Quiet always-on upgrade link under the quota bar (TASK-075 C4). */
.quota-link { margin-block: 0 var(--space-4); font-size: var(--text-sm); }

/* ---------- Upgrade CTA hooks (TASK-075 C1/C2; templates in a later
   stage). Cap-hit door = a warn-tinted alert that replaces the Send
   button at quota; quota-line = the muted quota sentence in the builder
   checklist/rail. Sanctioned status tints, light/dark parity via tokens. */
.cap-door { background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  color: var(--warn-fg); }
.cap-door h3 { margin-block: 0 var(--space-2); color: inherit;
  font-size: var(--text-lg); }
.cap-door p { margin-block: 0 var(--space-3); font-size: var(--text-sm); }
.cap-door .cap-door-caption { font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; }
.cap-door .cap-door-actions { display: flex; gap: var(--space-3);
  flex-wrap: wrap; margin-block-end: var(--space-3); }
.cap-door .cap-door-saved { margin-block-end: 0; }
.quota-line { color: var(--text-muted); }

.chart-wrap { margin-block: var(--space-5); }

/* Donut + legend segment colors. The controller supplies legacy color
   strings as fallback attributes; these label-derived classes govern.
   Non-text chart fills: signed mirrors .bar-signed/.swatch-signed
   (--ok-fg), awaiting mirrors the mint "sent" family (--brand-mark),
   drafts are muted. */
/* Donut segments take SVG gradient fills defined in dashboard/_charts.html
   .twig (<defs> grad-donut-signed / grad-donut-sent). Decorative: the
   legend swatches + captions carry the meaning. */
.donut .donut-seg-signed { stroke: url(#grad-donut-signed); }
.donut .donut-seg-awaiting-signature { stroke: url(#grad-donut-sent); }
.donut .donut-seg-drafts { stroke: var(--text-muted); }
.swatch-awaiting-signature { background: #0cbfb3;
  background: linear-gradient(135deg, #2ecfbf, #067d76); }
.swatch-drafts { background: var(--text-muted); }

/* ---------- Contracts list ---------- */
.list-controls { display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; border-bottom: 1px solid var(--border);
  margin-block: var(--space-4) var(--space-5); }
.list-controls .tab-bar { border-bottom: 0; flex: 1 1 auto; min-width: 0; }

.search-form { display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; padding-block: var(--space-1); }
.search-form input[type="text"] { width: 15rem; max-width: 100%; }

/* Row actions: 36px .btn-sm targets with 8px spacing between adjacent
   targets (WCAG 2.5.8 pass via spacing) */
.actions-cell { white-space: nowrap; }
.actions-cell > form, .actions-cell > a, .actions-cell > details {
  margin-inline-end: var(--space-2); vertical-align: middle; }
.actions-cell > :last-child { margin-inline-end: 0; }
.actions-cell > details { display: inline-block; white-space: normal; }

.empty-cell { text-align: center; padding: var(--space-8) var(--space-5); }
.empty-cell h2 { margin-block: 0 var(--space-2); }
.empty-cell p { margin-block: 0 var(--space-3); }

/* ---------- Contract builder ---------- */
.builder { margin-block-start: var(--space-5); }
.builder .table-wrap { margin-block-end: var(--space-4); }

.field-pair { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.field-pair > .field { flex: 1 1 220px; }

.builder-part { border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-4); }
.builder-part > small { display: block; margin-block-start: var(--space-2); }
.part-actions { margin-block-start: var(--space-2); }

/* Depth in-place builder (TASK-074 flow; templates/controllers land in a
   later stage). Two-column grid with a sticky control-tower rail. */
.builder-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  align-items: start; margin-block-start: var(--space-5); }
.builder-main { display: flex; flex-direction: column; gap: var(--space-5);
  min-width: 0; }
@media (min-width: 980px) {
  .builder-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .builder-rail { position: sticky; top: 48px; }
}
/* Control-tower rail: rides the constant chrome surface, light text BOTH
   schemes (rail link 6.27:1, check glyph 6.52:1 on #353b47). */
.builder-rail .card { background: var(--chrome-bg);
  border-color: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow-2), var(--glow-mint); }
.builder-rail .card h2 { color: #ffffff; }
.builder-rail .card .text-muted { color: rgb(255 255 255 / 0.72); }
.builder-rail .card a:not(.btn) { color: #45d6c9; }
.builder-rail .card a:not(.btn):hover { color: #6ee0d5; }
.builder-rail .check-glyph { color: #7dd89c; }
.builder-rail .check-glyph.check-todo { color: rgb(255 255 255 / 0.72); }
.builder-rail .rail-quota { color: rgb(255 255 255 / 0.72);
  border-top-color: rgb(255 255 255 / 0.14); }
.builder-rail .btn-primary { width: 100%; }
.builder-rail .card :focus-visible { outline-color: #2ecfbf; }

/* Rail readiness quota line */
.rail-quota { border-top: 1px solid var(--border-hairline);
  margin-block-start: var(--space-2); padding-block-start: var(--space-2);
  color: var(--text-muted); }

/* Save-state chip at each card (idle hidden; saving info; saved ok) */
.save-chip { display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: var(--radius-full);
  padding: 2px var(--space-3); font-size: var(--text-xs); font-weight: 600;
  min-height: 22px; }
.save-chip[data-state="idle"] { visibility: hidden; }
.save-chip[data-state="saving"] { background: var(--info-bg);
  color: var(--info-fg); border-color: var(--info-border); }
.save-chip[data-state="saved"] { background: var(--ok-bg);
  color: var(--ok-fg); border-color: var(--ok-border); }
.save-chip[data-state="error"] { background: var(--err-bg);
  color: var(--err-fg); border-color: var(--err-border); }
.save-status { display: inline-flex; align-items: center; gap: var(--space-2); }
/* Each builder card is wrapped in its own Turbo frame; keep the frame
   layout-transparent so the card flows exactly as before. */
turbo-frame { display: block; }

/* Section cards + inline composer inside the Sections card */
.part-card { border: 1px solid var(--border-hairline); border-radius: 10px;
  padding: var(--space-4); background: var(--surface-raised);
  box-shadow: var(--shadow-1); }
.part-card + .part-card { margin-block-start: var(--space-3); }
.part-editor { border-top: 1px solid var(--border-hairline);
  margin-block-start: var(--space-3); padding-block-start: var(--space-3); }
.btn-icon { min-width: 36px; padding: 0; }
.composer { border-top: 1px solid var(--border-hairline);
  margin-block-start: var(--space-4); padding-block-start: var(--space-4); }
.composer h3 { margin-block: 0 var(--space-2); }

/* Inline editor rows inside the recipients table */
.editor-row form { margin: 0; }
.editor-row .field-error { margin-block: 0 var(--space-3); }

/* Disclosure panels (Edit section / Add a section / inline recipient edit) */
.disclose > summary { cursor: pointer; color: var(--accent); font-weight: 600;
  padding-block: var(--space-2); }
.disclose > summary:hover { color: var(--accent-hover); }
.disclose[open] > summary { margin-block-end: var(--space-2); }

/* Pre-send checklist */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.check-glyph { display: inline-block; min-width: 1.2em; font-weight: 700;
  color: var(--ok-fg); margin-inline-end: var(--space-1); }
.check-glyph.check-todo { color: var(--text-muted); }

/* ---------- Contract summary ---------- */
.history-list { list-style: none; padding: 0; margin: 0; }
.history-list li { padding-block: var(--space-2);
  border-top: 1px solid var(--border-hairline); }
.history-list li:first-child { border-top: 0; }
.history-list .mono { color: var(--text-muted); font-size: var(--text-sm);
  margin-inline-end: var(--space-2); }

/* Signature images stay dark-ink-on-white in both schemes; the forced
   white background comes from the shared .signature-event img rule. */
.signature-event { display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline); }
.signature-event:first-of-type { border-top: 0; }
.signature-event img { max-height: 60px; width: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); }
.signature-event small { color: var(--text-muted); }
/* Billing-area styles (TASK-036): billing history, transaction receipt,
   and the upgrade checkout. Shared tokens and components live in app.css;
   only page-specific composition belongs here. */

/* ---------- Shared: back link above the page title ---------- */
.billing-backlink { font-size: var(--text-sm); margin-block: 0 var(--space-2); }

/* ---------- Billing history ---------- */
/* Amount header aligns right with its .num cells but keeps the sans
   table-header face (.table .num would set mono). */
.billing-history .table th.num { font-family: var(--font-sans); }
.billing-history .billing-empty {
  color: var(--text-muted);
  text-align: center;
  padding-block: var(--space-6);
}

/* ---------- Transaction receipt ---------- */
.receipt-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}
.receipt-head h1 { margin-block-end: 0; }
.receipt-ref {
  color: var(--text-muted);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}
.receipt .num { font-variant-numeric: tabular-nums; }

/* Printable invoice: hide the chrome, black on white, no shadows. */
@media print {
  body.billing-receipt { background: #ffffff; color: #000000; }
  body.billing-receipt .site-header,
  body.billing-receipt .site-footer,
  body.billing-receipt .impersonation-bar,
  body.billing-receipt .skip-link,
  body.billing-receipt .billing-backlink { display: none; }
  body.billing-receipt .card {
    box-shadow: none;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
  }
  body.billing-receipt .receipt dt { color: #000000; }
  body.billing-receipt .receipt .receipt-row { border-top-color: #000000; }
  body.billing-receipt .receipt-head h1 { color: #000000; }
  body.billing-receipt .receipt-ref { color: #000000; border-color: #000000; }
  body.billing-receipt .pill {
    background: #ffffff;
    color: #000000;
    border-color: #000000;
  }
}

/* ---------- Upgrade checkout ---------- */
/* Two columns at >=900px: card form left, order summary right. Below
   that everything stacks with the summary first (DOM order). */
.checkout-grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  margin-block-start: var(--space-5);
}
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  .checkout-pay { order: 1; }
  .checkout-aside { order: 2; position: sticky; top: 88px; }
}

.order-summary h2 { font-size: var(--text-xl); }
.order-rows { margin: 0; }
.order-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-2);
  border-top: 1px solid var(--border-hairline);
}
.order-row:first-child { border-top: 0; }
.order-row dt { color: var(--text-muted); }
.order-row dd { margin: 0; }
.order-row dd small { font-size: var(--text-sm); color: var(--text-muted); }
.order-desc { font-size: var(--text-sm); margin-block: var(--space-3) 0; }
.order-note { font-size: var(--text-sm); margin-block: var(--space-3) 0; }

.pay-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-block: 0 var(--space-4);
}
.pay-lock { flex: none; }

.card-exp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 479px) {
  .card-exp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pay-cancel-note { margin-block: var(--space-3) 0; text-align: center; }
/* Signing-area styles (TASK-036): page-specific rules for the ceremony
   templates (review/index, sign/index, review/unavailable). Everything
   here composes the shared foundation in app.css and lives inside the
   .ceremony token scope - no marketing components, no new accents. */

/* ---------- Paper sheet (spec 4.7): compose card maxw-sheet center ---------- */
.ceremony-sheet { border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: clamp(24px, 5vw, 64px); font-size: var(--text-lg); }
/* The signing document uses the full app content width, not the narrow gate
   sheet; the review code-entry sheet stays narrow (it holds a small form). */
.ceremony-sheet-doc { max-width: var(--page-max-app); }

/* Links styled as buttons keep button styling inside the ceremony
   underline scope (e.g. the post-sign Download signed PDF action) */
.ceremony a.btn { text-decoration: none; }

/* Per-section action callouts on the signing page: a type decorator plus the
   value, or (for initials) the input, styled as an intentional action. */
.action-callout { display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--surface-sunken); }
.action-decorator { font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-on-sunken); }
.action-value { color: var(--text-primary); font-size: var(--text-sm); }
.action-field { width: 5rem; }

/* Signer roster on the signing page: who else is agreeing, and their status. */
.signer-roster { margin-block: var(--space-5); }
.signer-roster h2 { font-size: var(--text-lg); margin-block: 0 var(--space-3); }
.roster-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2); }
.roster-item { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
.roster-name { font-weight: 600; }
.roster-you { font-weight: 400; color: var(--text-muted); }

/* ---------- Ceremony header details (strip base lives in app.css) ---------- */
.ceremony-header h1 { font-size: var(--text-2xl); margin: var(--space-2) 0 0; }
.ceremony-sender { color: var(--text-muted); font-size: var(--text-sm);
  margin: var(--space-1) 0 0; }
.ceremony-ref { margin: var(--space-2) 0 0; }

/* ---------- Steps rail: centered between header and sheet, sheet-width ---------- */
.ceremony .steps-rail { justify-content: center; max-width: 720px;
  margin-inline: auto; margin-block: var(--space-2) var(--space-6); }

/* ---------- Review gate ---------- */
.gate-caution { font-size: var(--text-sm); }

/* ---------- Contract body: document-like, hairline-separated parts ---------- */
.contract-doc { margin-block: var(--space-4); }
.part { padding-block: var(--space-4); }
.part + .part { border-top: 1px solid var(--border-hairline); }
.part-text { overflow-wrap: break-word; }
.part-text img { max-width: 100%; height: auto; }
.part-initial { display: flex; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-3); }
.part-initial input[type="text"] { width: auto; max-width: 12ch;
  text-align: center; font-family: var(--font-mono); }

/* ---------- Attachments ---------- */
.attachment-list { list-style: none; margin: 0; padding: 0; }
.attachment-list li { padding-block: var(--space-2);
  border-top: 1px solid var(--border-hairline); }
.attachment-list li:first-child { border-top: 0; }

/* ---------- Prior signatures (images stay forced white via app.css).
   Scoped under .ceremony: the app area (contract summary) and admin
   define their own .signature-event variants, so each area's rules
   must not leak into the others. max-height: none undoes the app-area
   60px cap - ceremony signatures render up to 240px wide. ---------- */
.signature-history { display: flex; flex-direction: column; }
.ceremony .signature-event { display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3); padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline); }
.ceremony .signature-event:first-child { border-top: 0; }
.ceremony .signature-event img { max-width: min(240px, 100%); max-height: none;
  height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1); }
.ceremony .signature-event small { color: var(--text-muted);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.signature-text { font-style: italic; }

/* ---------- Signing panel: distinct sunken band inside the sheet ---------- */
.sign-panel { margin-block-start: var(--space-6); padding: var(--space-5);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-md); }
.sign-panel > h2:first-child { margin-block-start: 0; }
.sig-label { font-weight: 600; font-size: 0.9rem; margin: 0; }
.sig-reset { align-self: flex-start; }
.ceremony .btn-reject { color: var(--text-muted); }
.sign-actions { margin-block-start: var(--space-2); }

/* ---------- Post-sign receipt (G11) ---------- */
.ceremony-receipt { margin: 0; padding: var(--space-2) var(--space-4);
  background: var(--surface-page); border: 1px solid var(--border);
  border-radius: var(--radius-md); }

/* Admin-area styles (TASK-036): page-specific rules for the admin console
   templates. Composes the shared system in app.css; semantic tokens only.
   Admin is internal: denser tables, .btn-sm actions, no marketing polish. */

/* ---------- Page header: crumb link + h1 (+ optional subtitle/status) ---------- */
.admin-head { margin-block-end: var(--space-5); }
.admin-head h1 { margin-block: 0; }
.admin-crumb { margin-block: 0 var(--space-2); font-size: var(--text-sm); }
.admin-crumb a { color: var(--text-muted); text-decoration: none; }
.admin-crumb a:hover { color: var(--accent); text-decoration: underline; }
.admin-sub { margin-block: var(--space-1) 0; color: var(--text-muted); }
.admin-head .admin-status { margin-block-start: var(--space-3); }

/* ---------- GET filter/search forms (.row above the table) ---------- */
.admin-filter { margin-block-end: var(--space-4); }
.admin-filter label:not(.visually-hidden) { font-weight: 600; font-size: var(--text-sm); }
.admin-filter input[type="text"] { width: auto; flex: 1 1 16rem; max-width: 32rem; }
.admin-filter input[type="number"] { width: auto; max-width: 7rem; }

/* ---------- Filter tabs and result-count footnotes ---------- */
.admin-tabs { margin-block-end: var(--space-4); }
.admin-note { margin-block-start: var(--space-3); font-size: var(--text-sm); }

/* ---------- Action button rows (36px .btn-sm targets, 8px+ spacing
   between adjacent targets per WCAG 2.5.8 spacing pass) ---------- */
.admin-actions { margin-block-end: var(--space-5); }
.admin-actions form { margin: 0; }

/* ---------- User-status pills (compose .pill; Depth solid fills, white
   ink, constant both schemes, matching the shared status set. Ratios:
   #1e7b3f 5.30:1, #815409 6.55:1, #434955 9.04:1 - all clear.) ---------- */
.pill-active      { background: #1e7b3f; color: #ffffff; border-color: #1e7b3f; }
.pill-unconfirmed { background: #815409; color: #ffffff; border-color: #815409; }
.pill-inactive    { background: #434955; color: #ffffff; border-color: #434955; }

/* ---------- Manage links card (admin console) ---------- */
.admin-links { list-style: none; margin: 0; padding: 0; }
.admin-links li { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-1) var(--space-3); padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline); }
.admin-links li:first-child { border-top: 0; }
.admin-links li:last-child { padding-block-end: 0; }
.admin-links a { font-weight: 600; }
.admin-links .text-muted { font-size: var(--text-sm); }

/* ---------- Read-only contract detail (mirrors agreement/summary) ---------- */
/* Signature rows: images keep the forced-white rule from app.css
   (.signature-event img) - never inverted or dimmed in dark mode.
   Scoped under .admin (body class on all admin templates): the app
   area and ceremony define their own .signature-event / .history-list
   variants, so admin's must not leak into those pages. */
.admin .signature-event { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4); padding-block: var(--space-3);
  border-top: 1px solid var(--border-hairline); }
.admin .signature-event:first-of-type { border-top: 0; padding-block-start: 0; }
.admin .signature-event:last-of-type { padding-block-end: 0; }
.admin .signature-event img { max-height: 60px; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-1); }
.admin .signature-event small { color: var(--text-muted);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-xs); }

/* Hairline-ruled history list with .mono timestamps */
.admin .history-list { list-style: none; margin: 0; padding: 0; }
.admin .history-list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2); border-top: 1px solid var(--border-hairline);
  font-size: var(--text-sm); }
.admin .history-list li:first-child { border-top: 0; }
.admin .history-list .mono { color: var(--text-muted); white-space: nowrap; }

/* Attachments card. Three files at most, so a compact row beats a table:
   type badge, name and size on one line, the destructive action pushed to
   the far edge where it cannot be hit by accident. */
.attachment-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.attachment-row { display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-3); border-top: 1px solid var(--border-hairline); }
.attachment-row:first-child { border-top: 0; }
.attachment-row form { margin-left: auto; }
.file-badge { flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  color: var(--text-muted); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.04em; }
.attachment-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attachment-name { overflow-wrap: anywhere; }
.attachment-empty { padding-block: var(--space-3); }
.attachment-count { margin: 0 0 var(--space-3); color: var(--text-muted);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Attachment drop zone. The dashed edge is the only affordance at rest; the
   active state has to read at a glance while the pointer is holding files, so
   it moves border, background and hint together. */
.dropzone { position: relative; border: 1px dashed var(--border);
  border-radius: var(--radius-md); padding: var(--space-4);
  transition: border-color 120ms ease, background-color 120ms ease; }
.dropzone.is-dragging { border-color: var(--accent); border-style: solid;
  background-color: color-mix(in oklab, var(--accent) 8%, transparent); }
.dropzone-hint { margin: var(--space-2) 0 var(--space-3);
  color: var(--text-muted); font-size: var(--text-sm); }
.dropzone.is-dragging .dropzone-hint { color: var(--accent-on-sunken); }

@media (prefers-reduced-motion: reduce) {
  .dropzone { transition: none; }
}
.dropzone-limits { margin: 0 0 var(--space-3); color: var(--text-muted);
  font-size: var(--text-xs); }

/* Sender's preview of the signing ceremony.

   The page below this strip is a pixel-accurate copy of what the recipient
   sees, so the strip is the only thing telling the sender which of the two
   they are looking at. It deliberately borrows the announcement bar's
   constant near-black chrome: fixed colours that read as system furniture in
   both themes. The first attempt used --surface-sunken, which lands within a
   few percent of the ceremony header's --surface-page underneath it, so the
   two blended into one block and the bar whispered when it needed to speak. */
.preview-bar { background: #101319; color: #e8ebf0;
  border-bottom: 1px solid #434955;
  font-size: 0.8rem; line-height: 1.5; }
.preview-inner { max-width: var(--page-max-app); margin-inline: auto;
  min-height: 32px; padding: 6px var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3); }
.preview-badge { flex: none; background: #45d6c9; color: #072a27;
  font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 8px; border-radius: var(--radius-full); }
.preview-bar a { margin-inline-start: auto; color: #45d6c9; text-decoration: underline; }
.preview-bar a:hover { color: #6ee0d5; }
.preview-bar :focus-visible { outline: 2px solid #45d6c9;
  outline-offset: -2px; border-radius: 2px; }
/* Disabled controls in the preview should read as scenery, not as broken. */
.preview .sign-panel input[disabled],
.preview .sign-panel button[disabled],
.preview .action-field[disabled] { opacity: 0.55; cursor: not-allowed; }
.preview .sig-frame { opacity: 0.55; }
.send-preview { margin-block: var(--space-3); }

/* The native file button is the only control on a card that ignores the
   theme: on a dark surface it renders as light OS chrome and reads as a
   rendering fault. Styling the pseudo-element leaves the real input in
   place -- still focusable, still the keyboard path the drop zone only
   enhances -- rather than hiding it behind a fake button. */
input[type="file"] { color: var(--text-muted); font-size: var(--text-sm); }
input[type="file"]::file-selector-button {
  margin-inline-end: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text-primary);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease; }
input[type="file"]::file-selector-button:hover {
  background: var(--surface-overlay); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  input[type="file"]::file-selector-button { transition: none; }
}

/* Account settings: two columns.

   It was a single 36rem stack on a 1240px page, so two thirds of the width
   sat empty while five short forms scrolled past 2500px. The forms keep that
   same 36rem measure -- a password field stretched to 800px is worse, not
   better -- and the rail takes what you came to CHECK rather than edit.
   Subscription goes first there: it is the money, and it used to sit below
   four forms. The pair is centred so the page reads as composed rather than
   as a column with something parked beside it. */
.settings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  align-items: start; margin-block-start: var(--space-5); }
.settings-main, .settings-rail { display: flex; flex-direction: column;
  gap: var(--space-5); min-width: 0; }
@media (min-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 36rem) minmax(0, 22rem);
    justify-content: center; }
}
/* .row wraps by default, which in a 22rem rail drops the label text onto its
   own line under the checkbox. Keep them on one line and let the text wrap
   against the checkbox instead. */
.settings-rail .field .row { flex-wrap: nowrap; align-items: flex-start; }
.settings-rail .field .row input[type="checkbox"] { flex: none;
  margin-block-start: 2px; }
.settings-rail .card p:last-child { margin-bottom: 0; }

/* Contract summary: actions sit with the title, and signatures are shown
   against the recipient they belong to rather than floating on their own. */
.summary-actions { display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-block: var(--space-4); }
.signature-img { display: block; max-width: 220px; height: auto;
  margin-block-end: var(--space-1); }
.signature-text { font-weight: 600; }

/* Signature attribution: who gave it, before what they wrote. */
.signature-by { margin: 0 0 var(--space-1); font-weight: 600; }