/*
=========================================================
OPEN1031 MOBILE CANON — phone-frame chrome on the app token contract
=========================================================
Load tokens.css FIRST, then this file:

  <link rel="stylesheet" href="../tokens.css" />
  <link rel="stylesheet" href="./_mobile.css" />
  <script src="../theme-toggle.js" defer></script>

Every color in this sheet resolves through tokens.css (the same contract the
app ships in packages/web-app/src/index.css) or through the Neela-mark values
copied verbatim from that file. Light and dark are both first-class: the sheet
never assumes a theme, it reads the tokens.

THE FIVE PIECES OF MOBILE CHROME (each frame renders the pieces that apply):
  .m-header        the Open1031 mark on EVERY frame — full lockup on tab
                   screens, icon-only .m-mark beside the back affordance
  .m-deadline      ONE compact deadline strip that never wraps at 390px —
                   on every frame with an active exchange clock
  .m-stepper       three journey segments, all fully visible — never scrolls;
                   hub flow frames only
  .m-dock          persistent bottom action bar — the screen's ONE primary
                   CTA, on frames that have one
  .m-tabbar        the uniform 5-slot tab bar, NeelaMark in the center slot —
                   on every frame except where a half/full sheet occludes it

HUB ACCENT — STATIC LOOKUP ONLY. Page markup sets one .is-{hub} modifier on
.m-screen; custom properties cascade. Never dynamic class interpolation.

NEELA — never a letter "N" in a circle. The mark is the NeelaMark spark
(components/ui/NeelaMark.tsx) on its avatar disc (mint in light, sapphire in
dark — NEVER teal). Markup embeds the static SVG; this sheet carries the disc
and the spark-gradient tokens.
=========================================================
*/

/* ── Neela mark tokens — copied from packages/web-app/src/index.css ── */
:root {
  --neela-spark-1: #14b8a6;
  --neela-spark-2: #0f766e;
  --neela-spark-3: #115e59;
  --neela-glow:    #0f766e;
  --neela-eye:     #08312f;
  --neela-moon-a:  #fbbf24;
  --neela-moon-b:  #5eead4;
  --neela-orbit:   rgba(51,65,85,0.53);
  --neela-disc-a:  #f0fdfa;
  --neela-disc-b:  #ccfbf1;
  --neela-disc-c:  #99f6e4;
  --neela-disc-ring: rgba(15,118,110,0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --neela-spark-1: #7ff0e0;
    --neela-spark-2: #2dd4bf;
    --neela-spark-3: #6366f1;
    --neela-glow:    #2dd4bf;
    --neela-orbit:   rgba(148,163,184,0.35);
    --neela-disc-a:  #15294a;
    --neela-disc-b:  #102040;
    --neela-disc-c:  #0b1424;
    --neela-disc-ring: rgba(255,255,255,0.12);
  }
}

:root[data-theme="dark"] {
  --neela-spark-1: #7ff0e0;
  --neela-spark-2: #2dd4bf;
  --neela-spark-3: #6366f1;
  --neela-glow:    #2dd4bf;
  --neela-orbit:   rgba(148,163,184,0.35);
  --neela-disc-a:  #15294a;
  --neela-disc-b:  #102040;
  --neela-disc-c:  #0b1424;
  --neela-disc-ring: rgba(255,255,255,0.12);
}

/* ── Mobile-scoped scale tokens ── */
:root {
  --m-radius-card: 16px;
  --m-radius-ctl: 12px;
  --m-header-h: 52px;
  --m-tabbar-h: 76px;
  --m-dock-h: 76px;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'rlig' 1, 'calt' 1;
  background: var(--surface-sunk);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

svg { display: block; }

button { font: inherit; }

/* --------------------------------------------------
   STAGE — page scaffolding around the phone frames
-------------------------------------------------- */
.stage {
  min-height: 100vh;
  padding: 0 24px 56px;
}
.stage-toolbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0 4px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.stage-toolbar .stage-logo { height: 26px; width: auto; }
.stage-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.stage-sub { font-size: 12.5px; color: var(--ink-3); }
.stage-toolbar .theme-switch { margin-left: auto; }
.stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 36px;
}
.frame-col { display: flex; flex-direction: column; align-items: center; }
.frame-caption {
  width: 390px;
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.frame-caption strong { color: var(--ink-2); font-weight: 600; }

/* notes block — hidden by demo-surface.js in demo context */
.notes {
  max-width: 860px;
  margin: 24px auto 0;
  border: 1px solid var(--line-2);
  border-radius: var(--m-radius-ctl);
  background: var(--surface);
  padding: 14px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.notes strong { color: var(--ink); }

/* theme-swapped logo image pair */
.logo-dark { display: none; }
.logo-light { display: block; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}

/* --------------------------------------------------
   PHONE — 390x844 hardware bezel. The bezel is hardware:
   near-black in both themes. Everything inside .m-screen themes.
-------------------------------------------------- */
.phone {
  width: 390px;
  height: 844px;
  background: #0b0d12;
  border-radius: 56px;
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.28),
    0 30px 70px -18px rgba(2,6,23,0.55);
  flex-shrink: 0;
  position: relative;
}
.m-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--page-bg);
  border-radius: 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  background: #0b0d12;
  border-radius: 20px;
  z-index: 80;
}
.m-statusbar {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px 0 34px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
}
.m-statusbar .status-icons { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.9;
  z-index: 70;
  pointer-events: none;
}

/* --------------------------------------------------
   HUB ACCENT — static lookup resolving through tokens.css.
   One .is-{hub} modifier per screen; components read --hub-*.
-------------------------------------------------- */
.is-id       { --hub: var(--hub-id);           --hub-text: var(--hub-id-ink);           --hub-wash: var(--hub-id-wash);           --hub-line: var(--hub-id-line); }
.is-sales    { --hub: var(--hub-sales);        --hub-text: var(--hub-sales-ink);        --hub-wash: var(--hub-sales-wash);        --hub-line: var(--hub-sales-line); }
.is-escrow   { --hub: var(--hub-escrow);       --hub-text: var(--hub-escrow-ink);       --hub-wash: var(--hub-escrow-wash);       --hub-line: var(--hub-escrow-line); }
.is-purchase { --hub: var(--hub-purchase);     --hub-text: var(--hub-purchase-ink);     --hub-wash: var(--hub-purchase-wash);     --hub-line: var(--hub-purchase-line); }
.is-disburse { --hub: var(--hub-disbursement); --hub-text: var(--hub-disbursement-ink); --hub-wash: var(--hub-disbursement-wash); --hub-line: var(--hub-disbursement-line); }
.is-irs      { --hub: var(--hub-irs);          --hub-text: var(--hub-irs-ink);          --hub-wash: var(--hub-irs-wash);          --hub-line: var(--hub-irs-line); }
.is-reverse  { --hub: var(--hub-reverse);      --hub-text: var(--hub-reverse-ink);      --hub-wash: var(--hub-reverse-wash);      --hub-line: var(--hub-reverse-line); }

/* --------------------------------------------------
   .m-header — app header. Two variants, one hierarchy, and the
   Open1031 mark is top-left on BOTH:
   --brand  top-level tab screens: full logo lockup left, actions right
   --screen pushed screens: icon-only .m-mark at the left edge, then the
            back chevron and title
   .m-mark clips the arch icon out of the theme-swapped lockup PNGs —
   the offsets below are the measured icon bounds of each asset.
-------------------------------------------------- */
.m-header {
  flex-shrink: 0;
  height: var(--m-header-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--surface);
}
.m-header .m-logo { height: 24px; width: auto; }
.m-mark {
  position: relative;
  width: 24px;
  height: 26px;
  overflow: hidden;
  flex-shrink: 0;
}
.m-mark img { position: absolute; max-width: none; width: auto; }
.m-mark .logo-light { height: 42.5px; left: -5.5px; top: -8.3px; }
.m-mark .logo-dark { height: 31px; left: -2.6px; top: -2.5px; }
.m-header-spacer { flex: 1; }
.m-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.m-icon-btn:hover { background: var(--surface-2); }
.m-icon-btn svg { width: 21px; height: 21px; }
.m-icon-btn .dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  border: 2px solid var(--surface);
}
.m-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-wash);
  border: 1px solid var(--teal-line);
  color: var(--teal-ink);
  font-size: 12.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-header--screen { gap: 4px; }
.m-back {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-back:hover { background: var(--surface-2); }
.m-back svg { width: 22px; height: 22px; }
.m-header-title { min-width: 0; }
.m-header-title h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-header-title .m-header-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-hub-glyph {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--hub-wash);
  border: 1px solid var(--hub-line);
  color: var(--hub-text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-hub-glyph svg { width: 18px; height: 18px; }

/* --------------------------------------------------
   .m-deadline — the ONE compact deadline treatment.
   A full-width strip on its own row: label left, count + date right.
   Fixed 40px line, nowrap both sides, 3px progress flush beneath,
   tap expands the two-clock drawer. Never shares a row with the
   title or the logo, so it can never wrap or crowd at 390px.
-------------------------------------------------- */
.m-deadline {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.m-deadline-row {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.m-deadline-row .deadline-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.m-deadline-row .deadline-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.m-deadline-row .deadline-count {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.m-deadline-row .deadline-date {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.m-deadline-row .deadline-chevron { width: 15px; height: 15px; color: var(--ink-4); flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-standard); }
.m-deadline.open .deadline-chevron { transform: rotate(180deg); }
.m-deadline.is-safe    .deadline-label svg, .m-deadline.is-safe    .deadline-count { color: var(--good-ink); }
.m-deadline.is-warning .deadline-label svg, .m-deadline.is-warning .deadline-count { color: var(--warn-ink); }
.m-deadline.is-critical .deadline-label svg, .m-deadline.is-critical .deadline-count { color: var(--bad-ink); }
.m-deadline-track {
  height: 3px;
  background: var(--line);
  overflow: hidden;
}
.m-deadline-fill { height: 100%; }
.m-deadline.is-safe    .m-deadline-fill { background: var(--good); }
.m-deadline.is-warning .m-deadline-fill { background: var(--warn); }
.m-deadline.is-critical .m-deadline-fill { background: var(--bad); }
.m-deadline-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-standard);
  background: var(--surface);
}
.m-deadline.open .m-deadline-drawer { max-height: 150px; border-top: 1px solid var(--line); }
.m-deadline-drawer-inner { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.m-clock-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.m-clock-line .clock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.m-clock-line .clock-dot.warn { background: var(--warn); }
.m-clock-line .clock-dot.good { background: var(--good); }
.m-clock-line .clock-name { color: var(--ink-2); font-weight: 600; flex: 1; min-width: 0; }
.m-clock-line .clock-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-clock-line .clock-count.warn { color: var(--warn-ink); }
.m-clock-line .clock-count.good { color: var(--good-ink); }
.m-clock-line .clock-date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.m-clock-anchor { font-size: 11.5px; color: var(--ink-3); }

/* --------------------------------------------------
   .m-stepper — the journey strip: three equal segments, single-word
   labels, state carried by the icon + fill. Everything is fully
   visible at 390px — the strip NEVER scrolls, clips, or truncates.
-------------------------------------------------- */
.m-stepper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.m-step {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
}
.m-step svg { width: 13px; height: 13px; flex-shrink: 0; }
.m-step.done {
  border-color: var(--hub-line);
  background: var(--hub-wash);
  color: var(--hub-text);
}
.m-step.current {
  border-color: var(--hub, hsl(var(--primary)));
  background: var(--hub, hsl(var(--primary)));
  color: var(--hub-on);
}
.m-step.locked { color: var(--ink-4); background: var(--surface-2); cursor: default; }

/* --------------------------------------------------
   .m-scroll — the scrolling content column. Bottom padding clears
   the dock + tab bar so the last card is never trapped beneath them.
-------------------------------------------------- */
.m-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-scroll::-webkit-scrollbar { display: none; }
.m-content {
  padding: 16px 16px calc(var(--m-dock-h) + var(--m-tabbar-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.m-content--no-dock { padding-bottom: calc(var(--m-tabbar-h) + 20px); }

/* --------------------------------------------------
   Cards + shared content primitives
-------------------------------------------------- */
.m-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--m-radius-card);
  padding: 16px;
  box-shadow: var(--app-shadow-sm);
}
.m-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.m-card-title svg { width: 17px; height: 17px; color: var(--ink-3); }
.m-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.m-meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.m-body { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.m-divider { height: 1px; background: var(--line); border: none; margin: 12px 0; }

.m-row { display: flex; align-items: center; gap: 10px; }
.m-row .grow { flex: 1; min-width: 0; }

/* status pill */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.m-pill svg { width: 12px; height: 12px; }
.m-pill.good { background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good-ink); }
.m-pill.warn { background: var(--warn-wash); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.m-pill.bad  { background: var(--bad-wash);  border: 1px solid var(--bad-line);  color: var(--bad-ink); }
.m-pill.hub  { background: var(--hub-wash);  border: 1px solid var(--hub-line);  color: var(--hub-text); }
.m-pill.neutral { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }

/* mono id caption */
.m-mono {
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* read-only field pair */
.m-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-field .f-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.m-field .f-value { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.m-field .f-source { font-size: 11.5px; color: var(--good-ink); display: inline-flex; align-items: center; gap: 4px; }
.m-field .f-source svg { width: 11px; height: 11px; }
.m-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.m-field-grid .span-2 { grid-column: span 2; }

/* --------------------------------------------------
   Countdown ring — the dashboard hero. One ring, one number.
-------------------------------------------------- */
.m-ring { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.m-ring svg { width: 100%; height: 100%; }
.m-ring .ring-track { stroke: var(--line-2); }
.m-ring.warn .ring-fill { stroke: var(--warn); }
.m-ring.good .ring-fill { stroke: var(--good); }
.m-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.m-ring-days {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-ring.warn .m-ring-days { color: var(--warn-ink); }
.m-ring.good .m-ring-days { color: var(--good-ink); }
.m-ring-unit { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 3px; }

/* --------------------------------------------------
   Journey list (dashboard + journey screens)
-------------------------------------------------- */
.m-journey { display: flex; flex-direction: column; }
.m-journey-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  position: relative;
}
.m-journey-row + .m-journey-row { border-top: 1px solid var(--line); }
.m-journey-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-journey-dot svg { width: 15px; height: 15px; }
.m-journey-dot.done { background: var(--good-wash); border: 1px solid var(--good-line); color: var(--good-ink); }
.m-journey-dot.current { background: var(--hub-wash); border: 1px solid var(--hub-line); color: var(--hub-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub) 18%, transparent); }
.m-journey-dot.locked { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-4); }
.m-journey-name { font-size: 14px; font-weight: 600; }
.m-journey-name.locked { color: var(--ink-3); font-weight: 500; }
.m-journey-meta { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.m-journey-meta.warn { color: var(--warn-ink); font-weight: 600; }
.m-journey-meta.good { color: var(--good-ink); }
.m-journey-chevron { width: 16px; height: 16px; color: var(--ink-4); flex-shrink: 0; }

/* --------------------------------------------------
   Activity / automation rows
-------------------------------------------------- */
.m-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
}
.m-activity-row + .m-activity-row { border-top: 1px solid var(--line); }
.m-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.m-activity-icon svg { width: 16px; height: 16px; }
.m-activity-icon.good { background: var(--good-wash); border-color: var(--good-line); color: var(--good-ink); }
.m-activity-icon.warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.m-activity-icon.hub  { background: var(--hub-wash);  border-color: var(--hub-line);  color: var(--hub-text); }
.m-activity-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.m-activity-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* live dot for running automation */
.m-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); position: relative; flex-shrink: 0; }
.m-live-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--good);
  opacity: 0.55;
  animation: m-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes m-ping { 75%, 100% { transform: scale(2.1); opacity: 0; } }

/* vectr workflow chip */
.m-wf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  background: var(--admin-wash);
  border: 1px solid var(--admin-line);
  color: var(--admin-ink);
  white-space: nowrap;
}

/* --------------------------------------------------
   Buttons (in-flow). The dock button lives in .m-dock below.
-------------------------------------------------- */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--m-radius-ctl);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.m-btn svg { width: 16px; height: 16px; }
.m-btn--secondary {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.m-btn--secondary:hover { background: var(--surface-2); }
.m-btn--ghost { background: transparent; color: var(--ink-2); }
.m-btn--ghost:hover { background: var(--surface-2); }
.m-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* form primitives */
.m-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.m-input {
  width: 100%;
  height: 44px;
  border-radius: var(--m-radius-ctl);
  border: 1px solid hsl(var(--input));
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  font-family: inherit;
  padding: 0 14px;
  outline: none;
}
.m-input::placeholder { color: var(--ink-3); }
.m-input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px color-mix(in srgb, hsl(var(--ring)) 25%, transparent); }
.m-suggest {
  border: 1px solid var(--line-2);
  border-radius: var(--m-radius-ctl);
  background: var(--surface);
  box-shadow: var(--app-shadow);
  overflow: hidden;
  margin-top: 6px;
}
.m-suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
}
.m-suggest-row + .m-suggest-row { border-top: 1px solid var(--line); }
.m-suggest-row svg { width: 15px; height: 15px; color: var(--ink-4); flex-shrink: 0; }
.m-suggest-row.active { background: var(--surface-2); color: var(--ink); }
.m-suggest-row strong { font-weight: 650; color: var(--ink); }
.m-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.m-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.m-choice svg { width: 13px; height: 13px; }
.m-choice.selected {
  border-color: hsl(var(--primary));
  color: var(--teal-ink);
  background: var(--teal-wash);
  box-shadow: 0 0 0 1px hsl(var(--primary));
}

/* --------------------------------------------------
   .m-dock — the persistent bottom action bar.
   Docked ABOVE the tab bar. One full-width primary button; an
   upward scrim + hairline keep scrolled content legible beneath it.
   Secondary actions never live here — they stay in the content flow.
-------------------------------------------------- */
.m-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--m-tabbar-h);
  z-index: 40;
  padding: 18px 16px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 0%, transparent) 0%, var(--page-bg) 42%);
  pointer-events: none;
}
.m-dock::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
.m-dock-btn {
  pointer-events: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border: none;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  cursor: pointer;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 10px 22px -8px color-mix(in srgb, hsl(var(--primary)) 55%, transparent);
}
.m-dock-btn svg { width: 18px; height: 18px; }
.m-dock-btn:disabled {
  background: var(--surface-2);
  color: var(--ink-4);
  box-shadow: none;
  border: 1px solid var(--line-2);
  cursor: not-allowed;
}
.m-dock-hint {
  pointer-events: auto;
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: center;
}

/* --------------------------------------------------
   .m-tabbar — the uniform 5-slot tab bar.
   Home · Journey · Neela (center, NeelaMark on its disc) · Docs · Market.
   Identical order, icons, and active treatment on EVERY app frame.
-------------------------------------------------- */
.m-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--m-tabbar-h);
  z-index: 50;
  display: flex;
  align-items: stretch;
  padding: 6px 8px 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  border-radius: 12px;
  padding: 0;
}
.m-tab svg { width: 22px; height: 22px; }
.m-tab.active { color: hsl(var(--primary)); }
.m-tab .tab-badge {
  position: absolute;
  top: 3px;
  right: calc(50% - 15px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bad);
  border: 2px solid var(--surface);
}

/* Neela center slot — the mark on its avatar disc, never on teal */
.m-tab--neela { color: var(--ink-3); }
.m-tab--neela.active { color: hsl(var(--primary)); }
.neela-disc {
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 36%, var(--neela-disc-a) 0%, var(--neela-disc-b) 55%, var(--neela-disc-c) 100%);
  box-shadow:
    inset 0 0 0 1px var(--neela-disc-ring),
    inset 0 -6px 14px rgba(15,118,110,0.10),
    0 1px 4px rgba(15,23,42,0.14);
}
.neela-disc--tab { width: 34px; height: 34px; margin-top: -6px; }
.neela-disc--tab svg { width: 26px; height: 26px; }
.neela-disc--sm { width: 30px; height: 30px; }
.neela-disc--sm svg { width: 22px; height: 22px; }
.neela-disc--md { width: 38px; height: 38px; }
.neela-disc--md svg { width: 28px; height: 28px; }

/* --------------------------------------------------
   Confirmation control — an honest two-state control.
   DISABLED: visually inert (muted track, muted text, lock glyph,
   hint states the precondition). ENABLED/ON: good wash + filled track.
   A control can never render "on" while its hint says it is locked.
-------------------------------------------------- */
.m-confirm {
  border-radius: var(--m-radius-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
  padding: 14px 16px;
}
.m-confirm-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
}
.m-confirm-text { font-size: 13.5px; font-weight: 550; line-height: 1.45; color: var(--ink-2); }
.m-confirm-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-confirm-hint svg { width: 13px; height: 13px; flex-shrink: 0; }
.m-switch {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}
.m-switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15,23,42,0.25);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.m-confirm.is-locked { background: var(--surface-2); }
.m-confirm.is-locked .m-confirm-label { cursor: not-allowed; }
.m-confirm.is-locked .m-confirm-text { color: var(--ink-3); font-weight: 500; }
.m-confirm.is-locked .m-switch { background: var(--line); opacity: 0.6; }
.m-confirm.is-locked .m-switch .knob { background: var(--surface-2); }
.m-confirm.is-ready .m-confirm-label { cursor: pointer; }
.m-confirm.is-on { border-color: var(--good-line); background: var(--good-wash); }
.m-confirm.is-on .m-confirm-text { color: var(--good-ink); font-weight: 600; }
.m-confirm.is-on .m-switch { background: var(--good); }
.m-confirm.is-on .m-switch .knob { transform: translateX(20px); background: var(--good-on); }
.m-confirm.is-on .m-confirm-hint { color: var(--good-ink); }

/* --------------------------------------------------
   Neela conversational surfaces
-------------------------------------------------- */
.m-neela-brief {
  border-radius: var(--m-radius-card);
  border: 1px solid var(--neela-line);
  background: var(--neela-wash);
  padding: 14px 16px;
}
.m-neela-brief .brief-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.m-neela-brief .brief-name { font-size: 13.5px; font-weight: 700; color: var(--neela-ink); }
.m-neela-brief .brief-role { font-size: 11px; color: var(--ink-3); }
.m-neela-brief .brief-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.m-neela-brief .brief-body strong { color: var(--ink); font-weight: 650; }

/* compact one-row Neela tip for dense screens */
.m-neela-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--m-radius-card);
  border: 1px solid var(--neela-line);
  background: var(--neela-wash);
  cursor: pointer;
}
.m-neela-row .row-text { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.m-neela-row .row-text strong { color: var(--neela-ink); font-weight: 650; }
.m-neela-row .row-chevron { width: 16px; height: 16px; color: var(--ink-4); flex-shrink: 0; margin-left: auto; }

/* bottom sheet */
.m-scrim {
  position: absolute;
  inset: 0;
  z-index: 55;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.m-scrim.open { opacity: 1; pointer-events: auto; }
.m-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: var(--app-shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1), height var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1);
  height: 0;
  overflow: hidden;
}
.m-sheet.peek { transform: translateY(0); height: 226px; }
.m-sheet.half { transform: translateY(0); height: 67%; }
.m-sheet.full { transform: translateY(0); height: 90%; }
.m-sheet.above-tab { bottom: var(--m-tabbar-h); box-shadow: 0 -10px 30px -12px rgba(15,23,42,0.25); }
.m-sheet-handle {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-2);
  margin: 10px auto 4px;
  flex-shrink: 0;
  cursor: grab;
}
.m-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.m-sheet-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.m-sheet-byline { font-size: 11.5px; color: var(--ink-3); }
.m-sheet-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.m-sheet-close svg { width: 16px; height: 16px; }
.m-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
}
.m-thread::-webkit-scrollbar { display: none; }

.msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.neela { align-self: flex-start; align-items: flex-start; }
.msg-bubble {
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
}
.msg.neela .msg-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-top-left-radius: 6px;
}
.msg.neela .msg-bubble strong { font-weight: 650; }
.msg.user .msg-bubble {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-top-right-radius: 6px;
}
.msg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.msg-cite {
  font-size: 11px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.msg-cite::before { content: '§'; color: var(--admin-ink); font-weight: 700; }
.msg-listen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}
.msg-listen svg { width: 13px; height: 13px; }
.msg-listen:hover { color: var(--ink-2); }

/* option list inside a Neela answer */
.m-option-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.m-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--m-radius-ctl);
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
}
.m-option.selected { border-color: var(--hub, hsl(var(--primary))); box-shadow: 0 0 0 1px var(--hub, hsl(var(--primary))); background: var(--hub-wash); }
.m-option-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-option.selected .m-option-num { background: var(--hub); border-color: var(--hub); color: var(--hub-on); }
.m-option-title { font-size: 13.5px; font-weight: 650; }
.m-option.selected .m-option-title { color: var(--hub-text); }
.m-option-desc { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 1px; }

/* prompt chips + composer */
.m-prompts {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px 4px;
  flex-shrink: 0;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
}
.m-prompts::-webkit-scrollbar { display: none; }
.m-prompt-chip {
  flex-shrink: 0;
  white-space: nowrap;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}
.m-prompt-chip:hover { border-color: var(--teal-line); color: var(--teal-ink); background: var(--teal-wash); }
.m-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
}
.m-composer-input {
  flex: 1;
  height: 42px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0 16px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
}
.m-composer-input::placeholder { color: var(--ink-3); }
.m-composer-input:focus { border-color: hsl(var(--ring)); }
.m-composer .mic, .m-composer .send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
.m-composer .mic { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.m-composer .send { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.m-composer svg { width: 18px; height: 18px; }

/* permanent capability footer — the constructive-receipt firewall, visible */
.m-guardrail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px calc(9px + 14px);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.m-guardrail svg { width: 15px; height: 15px; color: var(--admin-ink); flex-shrink: 0; }
.m-sheet.above-tab .m-guardrail { padding-bottom: 9px; }
.m-guardrail--inline { padding: 0; background: transparent; border-top: none; }
.m-neela-brief .m-guardrail--inline { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--neela-line); }

/* --------------------------------------------------
   Camera capture (document scan)
-------------------------------------------------- */
/* The viewport is a live camera feed — hardware-dark in both themes, like
   the phone bezel — so everything drawn over it (brackets, document, hint)
   uses constant near-light values, never theme tokens, to stay visible on
   the constant-dark feed. */
.m-capture-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--m-radius-card);
  background: repeating-linear-gradient(135deg, #10161f 0 10px, #141b26 10px 20px);
  overflow: hidden;
}
.m-capture-corner { position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(248, 250, 252, 0.95); }
.m-capture-corner.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.m-capture-corner.tr { top: 14px; right: 14px; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.m-capture-corner.bl { bottom: 14px; left: 14px; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.m-capture-corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; border-bottom-right-radius: 8px; }
.m-capture-doc {
  position: absolute;
  inset: 44px 38px;
  background: rgba(248, 250, 252, 0.94);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: rotate(-1.2deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.m-capture-doc .doc-line { height: 6px; border-radius: 999px; background: rgba(15, 23, 42, 0.18); }
.m-capture-doc .doc-line.strong { background: rgba(15, 23, 42, 0.42); height: 8px; }
.m-capture-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(248, 250, 252, 0.92);
  background: rgba(2, 6, 23, 0.55);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
}

/* Neela reading shimmer */
.m-reading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--m-radius-card);
  background: var(--neela-wash);
  border: 1px solid var(--neela-line);
}
.m-reading-text { font-size: 13.5px; font-weight: 600; color: var(--neela-ink); }
.m-shimmer {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line-2) 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: m-shimmer 1.3s ease-in-out infinite;
}
@keyframes m-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.m-processed-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--neela-ink);
  background: var(--neela-wash);
  border: 1px solid var(--neela-line);
  white-space: nowrap;
}
.m-processed-pill svg { width: 11px; height: 11px; }

/* --------------------------------------------------
   Document list + signing (e-sign flow)
-------------------------------------------------- */
.m-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}
.m-doc-row + .m-doc-row { border-top: 1px solid var(--line); }
.m-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--m-radius-ctl);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.m-doc-icon svg { width: 19px; height: 19px; }
.m-doc-icon.pending { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }
.m-doc-icon.signed { background: var(--good-wash); border-color: var(--good-line); color: var(--good-ink); }
.m-doc-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.m-doc-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* legal document preview */
.m-doc-page {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--m-radius-ctl);
  padding: 18px 16px;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
}
.m-doc-page h2 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; }
.m-doc-page .doc-sub { font-size: 11.5px; color: var(--ink-3); font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.m-doc-page p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.m-doc-page .sig-slot {
  margin-top: 14px;
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.m-sig-script {
  font-family: 'Snell Roundhand', 'Segoe Script', cursive;
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
}
.m-sig-pad {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--m-radius-ctl);
  background: var(--surface-2);
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.m-sig-pad.signed { border-style: solid; border-color: var(--good-line); background: var(--good-wash); color: var(--ink); }

/* checkbox row (eSign intent) */
.m-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--m-radius-ctl);
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
}
.m-check-row.checked { border-color: var(--good-line); background: var(--good-wash); }
.m-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: transparent;
  margin-top: 1px;
}
.m-check-row.checked .m-checkbox { background: var(--good); border-color: var(--good); color: var(--good-on); }
.m-checkbox svg { width: 13px; height: 13px; }
.m-check-text { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.m-check-row.checked .m-check-text { color: var(--ink); }

/* audit trail */
.m-audit-row { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.m-audit-row:last-child { padding-bottom: 0; }
.m-audit-row::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -2px;
  width: 1.5px;
  background: var(--line);
}
.m-audit-row:last-child::before { display: none; }
.m-audit-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--good-wash);
  border: 1px solid var(--good-line);
  color: var(--good-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.m-audit-dot svg { width: 11px; height: 11px; }
.m-audit-dot.pending { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-4); }
.m-audit-title { font-size: 13px; font-weight: 600; line-height: 1.35; }
.m-audit-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* compliance / disclosure footnote */
.m-disclosure {
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-3);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.m-disclosure svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: var(--ink-4); }

/* empty ID slot */
.m-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-radius: var(--m-radius-ctl);
  border: 1.5px dashed var(--line-2);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 550;
}
.m-slot .slot-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-2);
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* property card (identified) */
.m-property {
  border: 1px solid var(--line);
  border-radius: var(--m-radius-card);
  background: var(--surface);
  overflow: hidden;
}
.m-property-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}
.m-property-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--m-radius-ctl);
  background: var(--hub-wash);
  border: 1px solid var(--hub-line);
  color: var(--hub-text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.m-property-thumb svg { width: 21px; height: 21px; }
.m-property-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.m-property-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}