/* KeySign, the phone app. An agent writes, discloses, signs and delivers an offer from a
   buyer's driveway, then answers the counter and opens escrow, on one phone and at any
   signal. The shell (navigation stack, tab bar, sheets, Dynamic Island, Face ID, banner,
   the workbench bar) is the one the Kinetic and Allowance phones run; the colour and type
   are KeySign's own, on Wolf-Rayet.

   Three rules from the field drive the values below. Type is signage: Signika Negative
   for headings, figures and labels, Inter for sentences, nothing smaller than 12.5px.
   Grey is a label colour, never a reading colour. And colour means one thing each:
   blue is the way forward, green is verified, amber needs the agent, red blocks a
   signature, brass is a competitive lever the agent chose to pull. */

/* ───────────── colour: light, the outdoor default ─────────────
   KeySign's navy-led palette, every ink measured against the white card. It is written
   onto the --sys-* names the shell reads, so the shell is unchanged and only the meaning
   of each role is KeySign's. */
:root {
    color-scheme: light;
    --sys-color-bg-canvas: #eef1f6;
    --sys-color-surface: #ffffff;
    --sys-color-surface-raised: #ffffff;
    --sys-color-surface-sunken: #e7ecf3;
    --sys-color-surface-popover: #ffffff;
    --sys-color-surface-hover: rgba(11, 18, 32, .04);
    --sys-color-surface-selected: #e8edfd;
    --sys-color-border: #d5dce6;
    --sys-color-border-strong: #a9b6c7;
    --sys-color-border-focus: #1b3fcc;
    --sys-color-text-primary: #0b1220;
    --sys-color-text-secondary: #24303f;
    --sys-color-text-tertiary: #495769;
    --sys-color-text-inverse: #ffffff;
    --sys-color-accent: #1b3fcc;
    --sys-color-accent-text: #1b3fcc;
    --sys-color-accent-soft: #e8edfd;
    --sys-color-text-on-accent: #ffffff;
    --sys-color-accent-solid: #1b3fcc;
    --sys-color-accent-solid-lift: #2f52dd;
    --sys-color-text-on-accent-solid: #ffffff;
    --sys-color-spark: #1b3fcc;
    --sys-color-pos: #0e7c42;
    /* verified */
    --sys-status-cleared-fg: #0e7c42;
    --sys-status-cleared-bg: #e2f3e9;
    --sys-status-cleared-bd: rgba(14, 124, 66, .3);
    /* needs you */
    --sys-status-pending-fg: #8a5200;
    --sys-status-pending-bg: #fbefd9;
    --sys-status-pending-bd: rgba(138, 82, 0, .3);
    /* the way forward, as a state */
    --sys-status-scheduled-fg: #1b3fcc;
    --sys-status-scheduled-bg: #e8edfd;
    --sys-status-scheduled-bd: #c9d5fa;
    /* blocks a signature */
    --sys-status-declined-fg: #b3211a;
    --sys-status-declined-bg: #fce9e7;
    --sys-status-declined-bd: rgba(179, 33, 26, .28);
    /* on file, quiet */
    --sys-status-refunded-fg: #495769;
    --sys-status-refunded-bg: rgba(11, 18, 32, .05);
    --sys-status-refunded-bd: rgba(11, 18, 32, .13);
    /* the lever the agent pulled: brass */
    --sys-status-flagged-fg: #7a5b12;
    --sys-status-flagged-bg: #f7f0dc;
    --sys-status-flagged-bd: #d9c489;
    --sys-shadow-sm: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 1px rgba(11, 18, 32, .04);
    --sys-shadow-md: 0 6px 18px -6px rgba(11, 18, 32, .12), 0 2px 6px -2px rgba(11, 18, 32, .08);
    --sys-shadow-lg: 0 24px 48px -16px rgba(11, 18, 32, .2), 0 4px 12px rgba(11, 18, 32, .06);
    --sys-shadow-xl: 0 36px 72px -24px rgba(14, 17, 25, .38);
    --sys-gradient-command: linear-gradient(96deg, var(--sys-color-accent-solid) 0%, var(--sys-color-accent-solid-lift) 62%, var(--sys-color-accent-solid) 100%);
    --cta-shadow: 0 10px 24px -10px rgba(27, 63, 204, .55);

    /* Wolf-Rayet's faces, self-hosted (family.css). Figures set in Signika with tabular
       numerals rather than a fetched mono: the app works at zero bars, so it fetches
       nothing to draw itself. Hashes and references take the system's own monospace. */
    --sys-font-sans: var(--wr-family-body, "Inter WR", ui-sans-serif, system-ui, sans-serif);
    --sys-font-display: var(--wr-family-display, "Signika Negative WR", ui-sans-serif, system-ui, sans-serif);
    --sys-font-mono: var(--sys-font-display);
    --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --sys-radius-xs: 7px;
    --sys-radius-sm: 10px;
    --sys-radius-md: 14px;
    --sys-radius-lg: 18px;
    --sys-radius-xl: 24px;
    --sys-radius-pill: 999px;
    --sys-space-1: 4px;
    --sys-space-2: 8px;
    --sys-space-3: 12px;
    --sys-space-4: 16px;
    --sys-space-5: 20px;
    --sys-space-6: 24px;
    --sys-space-8: 32px;
    --sys-space-10: 40px;
    --sys-duration-fast: 140ms;
    --sys-duration-base: 220ms;
    --sys-duration-slow: 360ms;
    --sys-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --sys-ease-emphasized: cubic-bezier(.2, .9, .1, 1);
    --sys-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --sys-focus-ring-default: 0 0 0 2px var(--sys-color-surface), 0 0 0 4px var(--sys-color-border-focus);

    /* the shell's short names, all aliases of the layer above */
    --tint: var(--sys-color-accent-text);
    --tint-fill: var(--sys-color-accent-solid);
    --tint-soft: var(--sys-color-accent-soft);
    --bg: var(--sys-color-bg-canvas);
    --cell: var(--sys-color-surface);
    --cell-2: var(--sys-color-surface-sunken);
    --cell-press: var(--sys-color-surface-sunken);
    --fill: var(--sys-status-refunded-bg);
    --fill-2: var(--sys-status-refunded-bd);
    --label: var(--sys-color-text-primary);
    --label-2: var(--sys-color-text-tertiary);
    --label-3: var(--sys-color-border-strong);
    --sep: var(--sys-color-border);
    --red: var(--sys-status-declined-fg);
    --red-text: var(--sys-status-declined-fg);
    --orange: var(--sys-status-pending-fg);
    --orange-text: var(--sys-status-pending-fg);
    --green: var(--sys-status-cleared-fg);
    --green-text: var(--sys-status-cleared-fg);
    --blue: var(--sys-status-scheduled-fg);
    --gray: var(--sys-color-text-tertiary);
    --glass: color-mix(in srgb, var(--sys-color-surface) 74%, transparent);
    --glass-strong: color-mix(in srgb, var(--sys-color-surface-popover) 90%, transparent);
    --glass-edge: var(--sys-color-border);
    --glass-shadow: var(--sys-shadow-md);
    --material: color-mix(in srgb, var(--sys-color-bg-canvas) 84%, transparent);
    --scrim: rgba(11, 18, 32, .34);
    --font: var(--sys-font-sans);
    --display: var(--sys-font-display);
    --mono: var(--sys-font-mono);
    --spring: var(--sys-ease-emphasized);
    --spring-pop: var(--sys-ease-spring);
    --push: 420ms;
    --island-ok: #b9e2c0;
    --island-info: #b6daff;
}

/* ───────────── colour: dark, Wolf-Rayet interior-dark ─────────────
   Not a second palette made for this app: the interior-dark roles the site's dark mode
   runs on, read role for role. Its inks are compressed near white and its status colours
   all sit at one lightness, which is what a phone read at dusk needs. Interior-dark has no
   fill role, so a filled action inverts: the pale accent is the fill and the substrate is
   its ink. The brass lever is derived on the palette's own ladder. */
html.dark {
    color-scheme: dark;
    --sys-color-bg-canvas: var(--wr-surface-page);
    --sys-color-surface: var(--wr-surface-raised);
    --sys-color-surface-raised: var(--wr-surface-inset);
    --sys-color-surface-sunken: oklch(0.165 0.007 250);
    --sys-color-surface-popover: var(--wr-surface-inset);
    --sys-color-surface-hover: rgba(255, 255, 255, .05);
    --sys-color-surface-selected: color-mix(in srgb, var(--wr-emitter-marked) 14%, var(--wr-surface-raised));
    --sys-color-border: oklch(0.315 0.006 250);
    --sys-color-border-strong: var(--wr-border-subtle);
    --sys-color-border-focus: var(--wr-emitter-directed);
    --sys-color-text-primary: var(--wr-text-primary);
    --sys-color-text-secondary: var(--wr-text-secondary);
    --sys-color-text-tertiary: var(--wr-emitter-ambient);
    --sys-color-text-inverse: var(--wr-surface-page);
    --sys-color-accent: var(--wr-emitter-marked);
    --sys-color-accent-text: var(--wr-emitter-directed);
    --sys-color-accent-soft: color-mix(in srgb, var(--wr-emitter-marked) 15%, var(--wr-surface-raised));
    --sys-color-text-on-accent: var(--wr-surface-page);
    --sys-color-accent-solid: var(--wr-emitter-marked);
    --sys-color-accent-solid-lift: var(--wr-emitter-directed);
    --sys-color-text-on-accent-solid: var(--wr-surface-page);
    --sys-color-spark: var(--wr-emitter-marked);
    --sys-color-pos: var(--wr-status-positive);
    --sys-status-cleared-fg: var(--wr-status-positive);
    --sys-status-cleared-bg: color-mix(in srgb, var(--wr-status-positive) 13%, var(--wr-surface-raised));
    --sys-status-cleared-bd: color-mix(in srgb, var(--wr-status-positive) 34%, var(--wr-surface-raised));
    --sys-status-pending-fg: var(--wr-status-caution);
    --sys-status-pending-bg: color-mix(in srgb, var(--wr-status-caution) 13%, var(--wr-surface-raised));
    --sys-status-pending-bd: color-mix(in srgb, var(--wr-status-caution) 34%, var(--wr-surface-raised));
    --sys-status-scheduled-fg: var(--wr-emitter-directed);
    --sys-status-scheduled-bg: color-mix(in srgb, var(--wr-emitter-marked) 14%, var(--wr-surface-raised));
    --sys-status-scheduled-bd: color-mix(in srgb, var(--wr-emitter-marked) 34%, var(--wr-surface-raised));
    --sys-status-declined-fg: var(--wr-status-critical);
    --sys-status-declined-bg: color-mix(in srgb, var(--wr-status-critical) 13%, var(--wr-surface-raised));
    --sys-status-declined-bd: color-mix(in srgb, var(--wr-status-critical) 36%, var(--wr-surface-raised));
    --sys-status-refunded-fg: var(--wr-emitter-ambient);
    --sys-status-refunded-bg: rgba(255, 255, 255, .06);
    --sys-status-refunded-bd: rgba(255, 255, 255, .14);
    --sys-status-flagged-fg: oklch(0.8742 0.092 58);
    --sys-status-flagged-bg: color-mix(in srgb, oklch(0.8742 0.092 58) 13%, var(--wr-surface-raised));
    --sys-status-flagged-bd: color-mix(in srgb, oklch(0.8742 0.092 58) 34%, var(--wr-surface-raised));
    --sys-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --sys-shadow-md: 0 8px 22px -8px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .5);
    --sys-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .5);
    --sys-shadow-xl: 0 36px 72px -24px rgba(0, 0, 0, .75);
    --cta-shadow: 0 10px 24px -12px rgba(182, 218, 255, .35);
    --cell-press: var(--sys-color-surface-raised);
    --scrim: rgba(0, 0, 0, .55);
}
@media (prefers-reduced-motion: reduce) { :root { --sys-duration-fast: 0ms; --sys-duration-base: 0ms; --sys-duration-slow: 0ms } }

/* ═════════════ the shell, as the Kinetic phone app runs it ═════════════
   Copied from portfolio/design-systems/kinetic/app/app.css and kept in step with it by
   hand; it reads only the --sys-* names above, so the meaning is KeySign's. */

/* ───────────── the page around the device ───────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { margin: 0 }
body {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    background: var(--sys-color-surface-sunken); font-family: var(--font); color: var(--label);
    -webkit-font-smoothing: antialiased;
}
body.bare { background: transparent; padding: var(--sys-space-2) 0 }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit }
a { color: inherit; text-decoration: none }
a, img { -webkit-user-drag: none }
h1, h2, h3, p { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0 }

.stage { display: flex; justify-content: center; padding: var(--sys-space-5) var(--sys-space-3) var(--sys-space-8) }
body.bare .stage { padding: 0 }
/* a card centres the device itself (card-phone.css), so the stage steps out of the way */
html[data-card-mode] .stage { display: contents }
html[data-card-mode] body { flex-direction: row }

/* ───────────── the device ───────────── */
.phone {
    width: 426px; max-width: 100%; flex: none; padding: 12px; border-radius: 55px; position: relative;
    background: linear-gradient(150deg, #2b2d31, #0a0b0d);
    box-shadow: inset 0 0 0 1px #3a3d44, var(--sys-shadow-xl);
}
.screen {
    width: 402px; max-width: 100%; height: 780px; border-radius: 43px; overflow: hidden; position: relative;
    background: var(--bg); color: var(--label); font-family: var(--font); font-size: 16px; line-height: 22px;
    isolation: isolate; user-select: none; -webkit-user-select: none;
}
html[data-card-mode] .screen { border-radius: 38px }

/* the status bar: 54pt, the time centred in the leading ear, the glyphs in the trailing one */
.sb {
    position: absolute; inset: 0 0 auto 0; height: 54px; z-index: 60; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 48px;
    font-size: 16px; font-weight: 600; letter-spacing: -.2px; color: var(--label); transition: color var(--sys-duration-slow);
}
.sb-r { display: flex; align-items: center; gap: 6px }
.sb svg { height: 12px; width: auto; display: block }
.screen.on-dark .sb { color: #f7f8fa }

/* the Dynamic Island, and the confirmations it carries */
.island {
    position: absolute; top: 9px; left: 50%; z-index: 70; width: 123px; height: 31px; border-radius: 20px;
    transform: translateX(-50%); background: #000; color: #f7f8fa; overflow: hidden; display: flex; align-items: center;
    transition: width .5s var(--spring-pop), height .5s var(--spring-pop), border-radius .5s var(--spring), top .5s var(--spring);
}
.island.open { width: 370px; height: 64px; border-radius: 32px; top: 8px }
.island-in {
    display: flex; align-items: center; gap: var(--sys-space-3); width: 100%; padding: 0 var(--sys-space-3);
    opacity: 0; filter: blur(4px); transform: scale(.9); transition: opacity .25s, filter .25s, transform .35s var(--spring);
}
.island.open .island-in { opacity: 1; filter: none; transform: none; transition-delay: .12s }
.island-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .14) }
.island-ic svg { width: 20px; height: 20px }
.island-ic.ok { background: var(--sys-color-accent); color: var(--sys-color-text-on-accent) }
.island-ic.stop { background: #fd736d; color: #0d0e10 }
.island-ic.hold { background: #da950b; color: #0d0e10 }
.island-t { flex: 1; min-width: 0 }
.island-t b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.island-t span { display: block; font-size: 13px; line-height: 18px; color: #aeb4be; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.island-undo { height: 36px; padding: 0 var(--sys-space-4); border-radius: var(--sys-radius-pill); background: rgba(255, 255, 255, .16); color: #f7f8fa; font-size: 15px; font-weight: 600; flex: none }
.island-undo:active { background: rgba(255, 255, 255, .28) }
html[data-card-mode] .island { display: none }

.hi { position: absolute; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -69.5px; border-radius: 3px; background: var(--label); z-index: 65; pointer-events: none }
.screen.on-dark .hi { background: #f7f8fa }

/* ───────────── the navigation stack ───────────── */
.stack { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%; transition: transform .45s var(--spring), border-radius .45s var(--spring), filter .45s }
.screen.sheet-big .stack { transform: scale(.92) translateY(12px); border-radius: var(--sys-radius-xl); overflow: hidden; filter: brightness(.8) }
html.dark .screen.sheet-big .stack { filter: brightness(.55) }
.pg { position: absolute; inset: 0; background: var(--bg); overflow: hidden; will-change: transform }
.pg[hidden] { display: none }
.pg.under { pointer-events: none }
.pg-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30 }
.pg.anim { transition: transform var(--push) var(--spring) }
.pg.anim .pg-dim { transition: opacity var(--push) var(--spring) }
.pg.top-edge { box-shadow: -12px 0 36px rgba(0, 0, 0, .14) }
html.dark .pg.top-edge { box-shadow: -12px 0 36px rgba(0, 0, 0, .6) }
.pg.fade-in { animation: fadeIn var(--sys-duration-base) var(--sys-ease-standard) }
@keyframes fadeIn { from { opacity: .001 } }

/* the scroller clears the bar above (54 status + 52 bar) and the floating tab bar below */
.pg-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 106px 0 120px; scrollbar-width: none }
.pg-scroll::-webkit-scrollbar { display: none }
.pg.no-tabs .pg-scroll { padding-bottom: var(--sys-space-10) }
.pg-body { transition: transform .4s var(--spring) }
.pg-body.pulling { transition: none }

/* the title bar: 52pt under the status bar, its 40pt buttons centred in it with 6pt
   either side, so nothing rests on the bar's edge; transparent over a large title and
   a material once content runs under it */
.nb { position: absolute; inset: 0 0 auto 0; height: 106px; z-index: 20; pointer-events: none }
.nb::before {
    content: ''; position: absolute; inset: 0; background: var(--material);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    opacity: 0; transition: opacity var(--sys-duration-base); border-bottom: 1px solid var(--sep);
}
.nb.edge::before { opacity: 1 }
/* backdrop-filter paints outside the screen's rounded clip, so the material carries the screen's own top corners */
.nb::before { border-radius: 43px 43px 0 0 }
html[data-card-mode] .nb::before { border-radius: 38px 38px 0 0 }
.nb-row { position: absolute; left: 0; right: 0; top: 54px; height: 52px; display: flex; align-items: center; padding: 0 var(--sys-space-4); gap: var(--sys-space-2) }
.nb-t {
    position: absolute; left: 72px; right: 72px; top: 0; height: 52px; display: grid; place-items: center;
    font-size: 17px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap;
    opacity: 0; transform: translateY(4px); transition: opacity var(--sys-duration-base), transform var(--sys-duration-slow) var(--spring);
}
.nb-t > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis }

/* a screen opened from a tab carries its title inline, with its label as a second line */
.nb-t { align-content: center; gap: 1px }
.nb-t > small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; line-height: 15px; font-weight: 600; color: var(--label-2); letter-spacing: .01em }
/* an inline-title screen starts its content a step below the bar, not against it */
.pg:not([data-large="1"]) .pg-body { padding-top: var(--sys-space-3) }
.nb.show-t .nb-t { opacity: 1; transform: none }
.nb-l, .nb-r { display: flex; gap: var(--sys-space-2); align-items: center; pointer-events: auto; position: relative; z-index: 1 }
.nb-r { margin-left: auto }

/* toolbar buttons: Kinetic's icon button, a 40pt circle of accent-soft carrying the accent ink */
.gb {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
    background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text);
    transition: transform .3s var(--spring-pop), background var(--sys-duration-fast);
}
.gb:active { transform: scale(.92) }
.gb svg { width: 20px; height: 20px }
.gb em { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--sys-status-declined-fg); box-shadow: 0 0 0 2px var(--bg) }

/* the large title: Kinetic's display face */
.lt { font-family: var(--display); font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; padding: 0 var(--sys-space-5); margin: var(--sys-space-1) 0 var(--sys-space-2); transform-origin: 0 50%; transition: transform .3s var(--spring) }
.lt-sub { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--label-2); padding: 0 var(--sys-space-5); margin: 0 0 var(--sys-space-4) }

.ptr { position: absolute; left: 0; right: 0; top: 106px; height: 0; display: grid; place-items: center; z-index: 2; pointer-events: none }
.ptr-spin { position: relative; width: 28px; height: 28px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s }
.ptr-spin i { position: absolute; left: 13px; top: 1px; width: 2.6px; height: 7.5px; border-radius: 2px; background: var(--label-2); transform-origin: 1.3px 13px }
.ptr.go .ptr-spin { animation: spin 1s steps(12) infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ───────────── the tab bar: a floating capsule over content ───────────── */
.tabs {
    position: absolute; left: var(--sys-space-4); right: var(--sys-space-4); bottom: 26px; height: 64px; z-index: 40; border-radius: 32px;
    display: flex; align-items: center; padding: var(--sys-space-1);
    background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
    box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-shadow);
    transition: transform .45s var(--spring), opacity .3s;
}
.tabs.away { transform: translateY(120px); opacity: 0 }
.tab-sel { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 28px; background: var(--sys-color-accent-soft); transition: transform .5s var(--spring-pop), width .5s var(--spring-pop) }
.tab {
    flex: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; line-height: 13px; font-weight: 600; color: var(--sys-color-text-secondary); position: relative; z-index: 1;
    transition: color var(--sys-duration-fast), transform .3s var(--spring-pop);
}
.tab:active { transform: scale(.92) }
.tab svg { width: 24px; height: 24px }
.tab.on { color: var(--sys-color-accent-text) }
.tab.on .f { fill: currentColor; fill-opacity: .18 }
.tab em {
    position: absolute; top: 4px; left: 50%; margin-left: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--sys-status-declined-fg); color: var(--sys-color-text-inverse); font: 600 11px/18px var(--mono); font-style: normal; text-align: center;
}

/* ───────────── content: sections of grouped cards ───────────── */
.sec { margin: 0 var(--sys-space-4) var(--sys-space-6) }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sys-space-3); padding: 0 var(--sys-space-1) var(--sys-space-2) }
.sec-h h2 { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.01em }
.sec-h a, .sec-h button { font-size: 15px; font-weight: 600; color: var(--tint) }
.sec-h .cap { font-family: var(--mono); font-size: 13px; color: var(--label-2) }
.sec-hs { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--label-2); text-transform: uppercase; letter-spacing: .06em; padding: 0 var(--sys-space-4) var(--sys-space-2) }
.sec-f { font-size: 13px; line-height: 18px; color: var(--label-2); padding: var(--sys-space-2) var(--sys-space-4) 0 }
.grp { background: var(--cell); border: 1px solid var(--sep); border-radius: var(--sys-radius-lg); overflow: hidden; position: relative; box-shadow: var(--sys-shadow-sm) }
.grp + .grp { margin-top: var(--sys-space-3) }

.cell {
    position: relative; display: flex; align-items: center; gap: var(--sys-space-3); min-height: 52px; padding: var(--sys-space-3) var(--sys-space-4);
    background: var(--cell); width: 100%; color: var(--label); transition: background var(--sys-duration-base);
}
.cell::after { content: ''; position: absolute; left: var(--sep-in, 16px); right: 0; bottom: 0; height: 0; border-top: 1px solid var(--sep); pointer-events: none }
.grp > :last-child > .cell::after, .grp > .cell:last-child::after, .grp > li:last-child .cell::after { display: none }
a.cell:active, button.cell:active, .cell.press { background: var(--cell-press); transition: none }
.cell.has-ava { --sep-in: 68px; min-height: 68px }
.cell.has-ic { --sep-in: 60px }
.cell-b { flex: 1; min-width: 0 }
.cell-t { display: block; font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cell-t.wrap { white-space: normal }
.cell-s { display: block; font-size: 13px; line-height: 18px; color: var(--label-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cell-s.wrap { white-space: normal }
.cell-s.warn { color: var(--orange-text) }
.cell-s.bad { color: var(--red-text) }
.cell-s.ok { color: var(--green-text) }
.cell-s.tint { color: var(--tint) }
.cell-r { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sys-space-1); flex: none; text-align: right }
.cell-r b { font-family: var(--mono); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums }
.cell-r b.in { color: var(--sys-color-pos) }
.cell-v { font-size: 15px; color: var(--label-2); flex: none; max-width: 62%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cell-v.mono { font-size: 14px }
.chev { width: 8px; height: 13px; flex: none; color: var(--label-3); margin-left: var(--sys-space-1) }
.cell-act { color: var(--tint); font-weight: 600 }
.cell-act.red { color: var(--red) }
.cell-act[disabled] { color: var(--label-3); cursor: default }

/* status pills: Kinetic's six intents, a foreground, a ground and an edge each */
.pill { display: inline-flex; align-items: center; gap: var(--sys-space-1); height: 22px; padding: 0 var(--sys-space-2); border-radius: var(--sys-radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.pill.cleared { color: var(--sys-status-cleared-fg); background: var(--sys-status-cleared-bg); border-color: var(--sys-status-cleared-bd) }
.pill.pending { color: var(--sys-status-pending-fg); background: var(--sys-status-pending-bg); border-color: var(--sys-status-pending-bd) }
.pill.scheduled { color: var(--sys-status-scheduled-fg); background: var(--sys-status-scheduled-bg); border-color: var(--sys-status-scheduled-bd) }
.pill.declined { color: var(--sys-status-declined-fg); background: var(--sys-status-declined-bg); border-color: var(--sys-status-declined-bd) }
.pill.refunded { color: var(--sys-status-refunded-fg); background: var(--sys-status-refunded-bg); border-color: var(--sys-status-refunded-bd) }
.pill.flagged { color: var(--sys-status-flagged-fg); background: var(--sys-status-flagged-bg); border-color: var(--sys-status-flagged-bd) }
.pill.spin::before { width: 8px; height: 8px; background: none; border: 1.5px solid currentColor; border-right-color: transparent; animation: rot .8s linear infinite }

/* the leading glyph of a settings row */
.sq { width: 32px; height: 32px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; flex: none; background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text) }
.sq svg { width: 18px; height: 18px }
.sq.declined { background: var(--sys-status-declined-bg); color: var(--sys-status-declined-fg) }
.sq.pending { background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg) }
.sq.flagged { background: var(--sys-status-flagged-bg); color: var(--sys-status-flagged-fg) }
.sq.refunded { background: var(--sys-status-refunded-bg); color: var(--sys-status-refunded-fg) }

/* vendor marks: Kinetic's people component, initials on a soft intent ground */
.ava {
    width: 40px; height: 40px; border-radius: var(--sys-radius-sm); flex: none; display: grid; place-items: center; position: relative;
    font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0;
    background: var(--sys-status-refunded-bg); color: var(--sys-status-refunded-fg); box-shadow: inset 0 0 0 1px var(--sys-status-refunded-bd);
}
.ava.t-cleared { background: var(--sys-status-cleared-bg); color: var(--sys-status-cleared-fg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd) }
.ava.t-pending { background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.ava.t-scheduled { background: var(--sys-status-scheduled-bg); color: var(--sys-status-scheduled-fg); box-shadow: inset 0 0 0 1px var(--sys-status-scheduled-bd) }
.ava.t-flagged { background: var(--sys-status-flagged-bg); color: var(--sys-status-flagged-fg); box-shadow: inset 0 0 0 1px var(--sys-status-flagged-bd) }
.ava.t-accent { background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text); box-shadow: inset 0 0 0 1px var(--sys-color-border) }
.ava.sm { width: 32px; height: 32px; font-size: 12px; border-radius: var(--sys-radius-xs) }
.ava.lg { width: 72px; height: 72px; font-size: 24px; border-radius: var(--sys-radius-lg) }
.ava .dot { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--sys-status-pending-fg); box-shadow: 0 0 0 2px var(--cell); display: grid; place-items: center; color: var(--sys-color-text-inverse) }
.ava .dot svg { width: 10px; height: 10px }
.tx-ic { width: 40px; height: 40px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; flex: none; background: var(--sys-status-refunded-bg); color: var(--sys-status-refunded-fg) }
.tx-ic svg { width: 20px; height: 20px }
.tx-ic.in { background: var(--sys-status-cleared-bg); color: var(--sys-color-pos) }
.tx-ic.agent { background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text) }

/* the switch */
.sw-t { position: relative; width: 51px; height: 31px; border-radius: 16px; background: var(--fill-2); flex: none; transition: background var(--sys-duration-base) }
.sw-t::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #fff;
    box-shadow: var(--sys-shadow-sm); transition: transform .35s var(--spring-pop), width .2s;
}
.sw-t[aria-checked="true"] { background: var(--sys-color-accent) }
.sw-t[aria-checked="true"]::after { transform: translateX(20px) }
.sw-t:active::after { width: 33px }
.sw-t[aria-checked="true"]:active::after { transform: translateX(14px) }
.sw-t[disabled] { opacity: .45 }

/* the segmented control: one indicator that slides between segments */
.seg { position: relative; display: flex; height: 36px; padding: 2px; border-radius: var(--sys-radius-pill); background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep); margin: 0 var(--sys-space-4) var(--sys-space-5) }
.seg-th { position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: var(--sys-radius-pill); background: var(--sys-color-surface-raised); box-shadow: var(--sys-shadow-sm), inset 0 0 0 1px var(--sep); transition: transform .4s var(--spring-pop), width .4s var(--spring-pop) }
html.dark .seg-th { background: var(--sys-color-surface-popover) }
.seg button, .seg a { flex: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--sys-color-text-secondary); white-space: nowrap }
.seg [aria-current="true"], .seg [aria-pressed="true"] { font-weight: 600; color: var(--label) }
.seg .c { font-family: var(--mono); font-size: 12px; color: var(--label-2); font-weight: 500 }
.grp .seg { margin: 0 }

.search { margin: 0 var(--sys-space-4) var(--sys-space-3); height: 40px; border-radius: var(--sys-radius-pill); background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep); display: flex; align-items: center; gap: var(--sys-space-2); padding: 0 var(--sys-space-3) 0 var(--sys-space-4); color: var(--label-2) }
.search svg { width: 17px; height: 17px; flex: none }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 16px var(--font); color: var(--label); user-select: text; -webkit-user-select: text }
.search input::placeholder { color: var(--label-2) }
.search input::-webkit-search-cancel-button { display: none }
.search .clr { width: 20px; height: 20px; border-radius: 50%; background: var(--label-3); color: var(--cell); display: none; place-items: center }
.search .clr svg { width: 10px; height: 10px }
.search.has .clr { display: grid }
.search:focus-within { box-shadow: inset 0 0 0 1px var(--sys-color-border-focus) }
.empty { text-align: center; color: var(--label-2); padding: var(--sys-space-8) var(--sys-space-6); font-size: 15px; line-height: 20px }
.empty b { display: block; color: var(--label); font-size: 17px; line-height: 22px; font-weight: 600; margin-bottom: var(--sys-space-1) }

/* buttons: Kinetic's command (the solid accent, white on it) and its soft and outline siblings */
.btn {
    display: flex; align-items: center; justify-content: center; gap: var(--sys-space-2); width: 100%; height: 48px; padding: 0 var(--sys-space-5); border-radius: var(--sys-radius-pill);
    font-size: 16px; font-weight: 600; background: var(--cell); color: var(--label); box-shadow: inset 0 0 0 1px var(--sys-color-border-strong);
    transition: transform .3s var(--spring-pop), filter var(--sys-duration-fast), opacity var(--sys-duration-base);
}
.btn:active { transform: scale(.97); filter: brightness(.94) }
.btn svg { width: 18px; height: 18px; flex: none }
.btn.fill { background: var(--sys-gradient-command); color: var(--sys-color-text-on-accent-solid); box-shadow: var(--cta-shadow) }
.btn.red { color: var(--sys-status-declined-fg); background: var(--sys-status-declined-bg); box-shadow: inset 0 0 0 1px var(--sys-status-declined-bd) }
.btn.red-fill { background: var(--sys-status-declined-fg); color: var(--sys-color-text-inverse); box-shadow: none }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: default; transform: none }
.btns { display: flex; flex-direction: column; gap: var(--sys-space-3); margin: 0 var(--sys-space-4) var(--sys-space-6) }

/* ───────────── home ───────────── */
.bal { margin: 0 var(--sys-space-4) var(--sys-space-6); padding: var(--sys-space-5); border-radius: var(--sys-radius-xl); background: var(--cell); border: 1px solid var(--sep); box-shadow: var(--sys-shadow-sm); position: relative; overflow: hidden }
.bal::before { content: ''; position: absolute; left: var(--sys-radius-xl); right: var(--sys-radius-xl); top: -1px; height: 2px; border-radius: 0 0 2px 2px; background: var(--sys-color-accent); opacity: .5 }
.bal-l { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--tint) }
.bal-n { display: block; font-family: var(--mono); font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--sys-space-2) }
.bal-n .c { font-size: 22px; color: var(--label-2) }
.bal-x { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sys-space-3); margin-top: var(--sys-space-4); padding-top: var(--sys-space-4); border-top: 1px solid var(--sep); font-size: 13px; line-height: 18px; color: var(--label-2) }
.bal-x b { display: block; font-family: var(--mono); font-size: 15px; line-height: 20px; color: var(--label); font-weight: 500; margin-top: 2px }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--sys-color-accent); flex: none; position: relative; margin: 0 var(--sys-space-2) 0 var(--sys-space-1) }
.pulse::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--sys-color-accent); opacity: 0; animation: pulse 2.4s var(--spring) infinite }
.pulse.off { background: var(--sys-status-pending-fg) }
.pulse.off::after { display: none }
@keyframes pulse { 0% { transform: scale(.4); opacity: .9 } 80%, 100% { transform: scale(1.4); opacity: 0 } }

.meter { padding: var(--sys-space-4) }
.meter-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sys-space-3) }
.meter-h b { font-family: var(--mono); font-size: 17px; font-weight: 600 }
.meter-h span { font-family: var(--mono); font-size: 13px; color: var(--label-2) }
.meter-t { height: 8px; border-radius: 4px; background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep); overflow: hidden; margin: var(--sys-space-3) 0; display: flex }
.meter-t i { display: block; height: 100%; transform-origin: 0 50%; animation: grow .9s var(--spring) both }
.meter-t i.paid { background: var(--sys-color-accent-solid) }
.meter-t i.soon { background: var(--sys-color-accent); opacity: .55; animation-delay: .12s }
@keyframes grow { from { transform: scaleX(0) } }
.meter-f { display: flex; justify-content: space-between; align-items: center; gap: var(--sys-space-3); font-size: 12px; line-height: 16px; color: var(--label-2) }
.meter-f .k { display: inline-flex; align-items: center; gap: 6px }
.meter-f .k i { width: 8px; height: 8px; border-radius: 2px; background: var(--sys-color-accent-solid) }
.meter-f .k i.s { background: var(--sys-color-accent); opacity: .55 }
.meter-f .mono { margin-left: auto }

/* ───────────── a bill ───────────── */
.hd { text-align: center; padding: var(--sys-space-2) var(--sys-space-6) var(--sys-space-6); display: flex; flex-direction: column; align-items: center }
.hd .ava, .hd .tx-ic { margin-bottom: var(--sys-space-3) }
.hd-n { font-size: 15px; line-height: 20px; color: var(--label-2) }
.hd-a { font-family: var(--mono); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: var(--sys-space-1) 0 var(--sys-space-3) }
.hd-a .c { font-size: 24px; color: var(--label-2) }
.hd-name { font-family: var(--display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--sys-space-1) }
.hd .pill { height: 28px; padding: 0 var(--sys-space-3); font-size: 13px }

.why { padding: var(--sys-space-4) }
.why-h { display: flex; gap: var(--sys-space-3); align-items: flex-start }
.why-ic { width: 32px; height: 32px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; flex: none; background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.why-ic svg { width: 18px; height: 18px }
.why-ic.bad { background: var(--sys-status-declined-bg); color: var(--sys-status-declined-fg); box-shadow: inset 0 0 0 1px var(--sys-status-declined-bd) }
.why-ic.ok { background: var(--sys-status-cleared-bg); color: var(--sys-status-cleared-fg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd) }
.why-ic.info { background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text); box-shadow: inset 0 0 0 1px var(--sep) }
.why-ic.mute { background: var(--sys-status-refunded-bg); color: var(--sys-status-refunded-fg); box-shadow: inset 0 0 0 1px var(--sys-status-refunded-bd) }
.why b { display: block; font-size: 16px; line-height: 22px; font-weight: 600 }
.why p { font-size: 14px; line-height: 20px; color: var(--label-2); margin-top: var(--sys-space-1) }

.accts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sys-space-2); padding: 0 var(--sys-space-4) var(--sys-space-4) }
.acct { border-radius: var(--sys-radius-md); padding: var(--sys-space-3); background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep) }
.acct small { display: block; font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--label-2); text-transform: uppercase; letter-spacing: .06em }
.acct b { display: block; font-family: var(--mono); font-size: 18px; line-height: 24px; font-weight: 600; margin: var(--sys-space-1) 0 }
.acct span { display: block; font-size: 12px; line-height: 16px; color: var(--label-2) }
.acct.new { background: var(--sys-status-declined-bg); box-shadow: inset 0 0 0 1px var(--sys-status-declined-bd) }
.acct.new b { color: var(--sys-status-declined-fg) }
.acct.ok { background: var(--sys-status-cleared-bg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd) }
.verified { display: flex; align-items: center; gap: var(--sys-space-2); margin: 0 var(--sys-space-4) var(--sys-space-4); padding: var(--sys-space-3); border-radius: var(--sys-radius-md); background: var(--sys-status-cleared-bg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd); color: var(--sys-status-cleared-fg); font-size: 14px; line-height: 20px; font-weight: 600 }
.verified svg { width: 18px; height: 18px; flex: none }
.verified.bad { background: var(--sys-status-declined-bg); box-shadow: inset 0 0 0 1px var(--sys-status-declined-bd); color: var(--sys-status-declined-fg) }

.ck { --sep-in: 56px; align-items: flex-start }
.ck-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sys-status-cleared-bg); color: var(--sys-status-cleared-fg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd) }
.ck-ic svg { width: 14px; height: 14px }
.ck.warn .ck-ic { background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.ck.bad .ck-ic { background: var(--sys-status-declined-bg); color: var(--sys-status-declined-fg); box-shadow: inset 0 0 0 1px var(--sys-status-declined-bd) }
.ck.run .ck-ic { background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep) }
.ck.run .ck-ic svg { display: none }
.ck.run .ck-ic::after { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--label-3); border-top-color: var(--tint); animation: rot .7s linear infinite }
@keyframes rot { to { transform: rotate(360deg) } }
.ck .cell-t { white-space: normal; font-size: 15px; line-height: 20px; margin-top: 4px }
.ck .cell-s { white-space: normal }
.ck-in { animation: ckIn .5s var(--spring) both }
@keyframes ckIn { from { opacity: 0; transform: translateY(8px) } }
.ck-pop .ck-ic { animation: pop .45s var(--spring-pop) }
@keyframes pop { 0% { transform: scale(.4) } 100% { transform: scale(1) } }

.chart { padding: var(--sys-space-4) }
.chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sys-space-3); margin-bottom: var(--sys-space-5) }
.chart-h b { font-size: 14px; line-height: 20px; font-weight: 600 }
.chart-h span { font-family: var(--mono); font-size: 12px; color: var(--label-2); white-space: nowrap }
.bars { position: relative; height: 120px; display: flex; align-items: flex-end; gap: 6px }
.bars .band { position: absolute; left: 0; right: 0; background: var(--sys-color-accent-soft); border-radius: 4px; border-top: 1px dashed var(--sys-color-accent-text); border-bottom: 1px dashed var(--sys-color-accent-text) }
.bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--sys-color-border-strong); position: relative; transform-origin: 50% 100%; animation: rise .7s var(--spring) both }
.bars i.me { background: var(--sys-color-accent-solid) }
.bars i.me.out { background: var(--sys-status-pending-fg) }
.bars i.me::after { content: attr(data-l); position: absolute; bottom: calc(100% + 4px); right: 0; font: 600 11px/14px var(--mono); font-style: normal; color: var(--label); white-space: nowrap }
@keyframes rise { from { transform: scaleY(0) } }
.chart-f { display: flex; justify-content: space-between; margin-top: var(--sys-space-2); font-family: var(--mono); font-size: 11px; color: var(--label-2) }

.kv { --sep-in: 16px; min-height: 48px }
.kv .cell-t { font-weight: 400; font-size: 15px; color: var(--label-2) }
.kv .cell-v { color: var(--label) }
.kv.total .cell-t, .kv.total .cell-v { font-weight: 600; color: var(--label) }

.tl { padding: var(--sys-space-4) var(--sys-space-4) var(--sys-space-1) }
.tl li { position: relative; padding: 0 0 var(--sys-space-4) var(--sys-space-8) }
.tl li::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; border-radius: 1px; background: var(--sep) }
.tl li:last-child::before { display: none }
.tl li::after { content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--cell); box-shadow: inset 0 0 0 2px var(--label-3) }
.tl li.done::after { background: var(--sys-color-accent-solid); box-shadow: none }
.tl li.done::before { background: var(--sys-color-accent-solid); opacity: .5 }
.tl li.now::after { background: var(--cell); box-shadow: inset 0 0 0 4px var(--sys-color-accent), 0 0 0 4px var(--sys-color-accent-soft) }
.tl b { display: block; font-size: 15px; line-height: 22px; font-weight: 600 }
.tl span { display: block; font-size: 13px; line-height: 18px; color: var(--label-2) }

/* ───────────── a vendor ───────────── */
.qa { display: flex; gap: var(--sys-space-2); padding: 0 var(--sys-space-4) var(--sys-space-6) }
.qa button, .qa a { flex: 1; height: 64px; border-radius: var(--sys-radius-lg); background: var(--cell); border: 1px solid var(--sep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sys-space-1); color: var(--tint); font-size: 12px; font-weight: 600; transition: transform .3s var(--spring-pop), background var(--sys-duration-fast) }
.qa button:active, .qa a:active { transform: scale(.96); background: var(--cell-press) }
.qa svg { width: 20px; height: 20px }

/* ───────────── the agent ───────────── */
.ag { display: flex; gap: var(--sys-space-4); align-items: center; padding: var(--sys-space-4) }
.ag-ic { width: 52px; height: 52px; border-radius: var(--sys-radius-md); display: grid; place-items: center; flex: none; color: var(--sys-color-text-on-accent-solid); background: var(--sys-gradient-command) }
.ag-ic.off { background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.ag-ic svg { width: 26px; height: 26px }
.ag b { display: block; font-family: var(--display); font-size: 20px; line-height: 24px; font-weight: 700 }
.ag p { font-size: 14px; line-height: 20px; color: var(--label-2); margin-top: var(--sys-space-1) }
.lock { color: var(--label-2) }
.hero-ic { width: 76px; height: 76px; border-radius: var(--sys-radius-xl); margin: var(--sys-space-2) auto var(--sys-space-4); display: grid; place-items: center; color: var(--sys-color-text-on-accent-solid); background: var(--sys-gradient-command); box-shadow: var(--cta-shadow) }
.hero-ic svg { width: 40px; height: 40px }
.hero-t { text-align: center; font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; padding: 0 var(--sys-space-6) }
.hero-p { text-align: center; font-size: 15px; line-height: 22px; color: var(--label-2); padding: var(--sys-space-2) var(--sys-space-8) var(--sys-space-6) }
.opts .cell { min-height: 48px }
.opts .tick { width: 18px; height: 18px; color: var(--tint); flex: none; opacity: 0; transform: scale(.5); transition: opacity var(--sys-duration-fast), transform .35s var(--spring-pop) }
.opts [aria-checked="true"] .tick { opacity: 1; transform: none }
.opts [aria-checked="true"] .cell-t { font-weight: 600 }
.log li .cell-s { white-space: normal }

/* ───────────── sheets ───────────── */
.layer { position: absolute; inset: 0; z-index: 80; pointer-events: none }
.layer.on { pointer-events: auto }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .4s var(--spring) }
.layer.on .scrim { opacity: 1 }
.sheet {
    position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: var(--sys-radius-xl) var(--sys-radius-xl) 0 0;
    transform: translateY(105%); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sys-shadow-xl); border-top: 1px solid var(--sep);
    transition: transform .5s var(--spring), height .45s var(--spring), left .45s var(--spring), right .45s var(--spring), bottom .45s var(--spring), border-radius .45s var(--spring);
}
.sheet.medium { height: 480px; left: var(--sys-space-2); right: var(--sys-space-2); bottom: var(--sys-space-2); border-radius: 36px; border: 1px solid var(--sep) }
.sheet.large { height: calc(100% - 60px) }
.sheet.fit { height: auto; max-height: calc(100% - 60px); left: var(--sys-space-2); right: var(--sys-space-2); bottom: var(--sys-space-2); border-radius: 36px; border: 1px solid var(--sep) }
.layer.on .sheet { transform: none }
.sheet.drag { transition: none }
.grab { flex: none; height: 20px; display: grid; place-items: center; cursor: grab; touch-action: none }
.grab::before { content: ''; width: 36px; height: 5px; border-radius: 3px; background: var(--label-3) }
.sh-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sys-space-4) var(--sys-space-3); gap: var(--sys-space-3); touch-action: none }
.sh-top h2 { flex: 1; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600 }
.sh-top .gb { width: 36px; height: 36px; background: var(--cell-2); color: var(--label-2); box-shadow: inset 0 0 0 1px var(--sep) }
.sh-top .gb svg { width: 16px; height: 16px }
.sh-top .sp { width: 36px; flex: none }
.sh-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: var(--sys-space-1) 0 var(--sys-space-6) }
.sh-body::-webkit-scrollbar { display: none }
.sh-body .sec { margin-bottom: var(--sys-space-5) }
.sh-lede { font-size: 15px; line-height: 22px; color: var(--label-2); padding: 0 var(--sys-space-6) var(--sys-space-5); text-align: center }

/* the action sheet */
.as { position: absolute; left: var(--sys-space-2); right: var(--sys-space-2); bottom: var(--sys-space-2); transform: translateY(110%); transition: transform .45s var(--spring); display: flex; flex-direction: column; gap: var(--sys-space-2) }
.layer.on .as { transform: none }
.as-g { border-radius: 28px; overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--sep) }
.as-h { padding: var(--sys-space-4) var(--sys-space-5); text-align: center; font-size: 13px; line-height: 18px; color: var(--label-2); border-bottom: 1px solid var(--sep) }
.as-h b { display: block; font-size: 14px; font-weight: 600; color: var(--label); margin-bottom: 2px }
.as button { display: block; width: 100%; height: 56px; text-align: center; font-size: 17px; font-weight: 500; color: var(--tint); border-bottom: 1px solid var(--sep); transition: background var(--sys-duration-fast) }
.as button:last-child { border-bottom: 0 }
.as button:active { background: var(--fill-2) }
.as button.red { color: var(--sys-status-declined-fg) }
.as .cancel { font-weight: 600; border-radius: 28px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label) }

/* Face ID: the system's own sheet of glass */
.fid { position: absolute; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none }
.fid-box { width: 160px; height: 160px; border-radius: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sys-space-3); background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--sep), var(--sys-shadow-lg); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .4s var(--spring-pop) }
.fid.on .fid-box { opacity: 1; transform: none }
.fid svg { width: 72px; height: 72px; color: var(--label) }
.fid.scan .face { animation: scan 1s ease-in-out infinite }
@keyframes scan { 50% { opacity: .35 } }
.fid .done { color: var(--sys-color-accent) }
.fid .done path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .05s var(--spring) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
.fid-l { font-size: 15px; font-weight: 600; color: var(--label) }

/* the notification banner: it drops in under the Dynamic Island, as the system's does */
.ban {
    position: absolute; left: var(--sys-space-2); right: var(--sys-space-2); top: 50px; z-index: 75; border-radius: 26px; padding: var(--sys-space-3) var(--sys-space-4) var(--sys-space-3) var(--sys-space-3);
    display: flex; gap: var(--sys-space-3); align-items: flex-start; text-align: left;
    background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
    box-shadow: inset 0 0 0 1px var(--sep), var(--sys-shadow-lg); transform: translateY(calc(-100% - 80px)); visibility: hidden;
    transition: transform .55s var(--spring-pop), visibility 0s .55s; touch-action: none;
}
/* at rest it sits wholly above the screen, its shadow too, and is not drawn at all */
.ban.on { transform: none; visibility: visible; transition: transform .55s var(--spring-pop), visibility 0s }
.ban.drag { transition: none }
.ban-ic { width: 38px; height: 38px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; flex: none; color: var(--sys-color-text-on-accent-solid); background: var(--sys-gradient-command) }
.ban-ic svg { width: 20px; height: 20px }
.ban-b { flex: 1; min-width: 0; display: block }
.ban-h { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--label-2) }
.ban-b b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; margin-top: 2px }
.ban-b .ban-s { display: block; font-size: 14px; line-height: 20px }

/* the moment the agent is on */
.done-v { position: absolute; inset: 0; z-index: 85; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--sys-space-8); text-align: center; opacity: 0; transition: opacity .35s }
.done-v.on { opacity: 1 }
.done-ring { width: 112px; height: 112px; margin-bottom: var(--sys-space-6) }
.done-ring circle { stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw .8s .1s var(--spring) forwards }
.done-ring path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw .5s .6s var(--spring) forwards }
.done-v h2 { font-family: var(--display); font-size: 28px; line-height: 34px; font-weight: 700; animation: ckIn .6s .5s var(--spring) both }
.done-v p { font-size: 15px; line-height: 22px; color: var(--label-2); margin: var(--sys-space-3) 0 var(--sys-space-8); animation: ckIn .6s .6s var(--spring) both }
.done-v .btn { animation: ckIn .6s .75s var(--spring) both; max-width: 320px }

.row-new { animation: rowNew .7s var(--spring) both }
@keyframes rowNew { from { opacity: 0; transform: translateY(-14px) } }

/* one focus ring, Kinetic's: a gap, then the ring, following the shape it sits on */
:focus-visible { outline: none; box-shadow: var(--sys-focus-ring-default) }
.cell:focus-visible, .as button:focus-visible, .ctx-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--sys-color-border-focus) }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { box-shadow: none }
html[data-card-mode] :focus-visible { box-shadow: none }

@media (prefers-reduced-motion: reduce) {
    :root { --push: 1ms }
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important }
    .pulse::after { display: none }
}
.sq.cleared { background: var(--sys-status-cleared-bg); color: var(--sys-status-cleared-fg) }
.sq.scheduled { background: var(--sys-status-scheduled-bg); color: var(--sys-status-scheduled-fg) }
.tx-ic.lg { width: 72px; height: 72px; border-radius: var(--sys-radius-lg) }
.tx-ic.lg svg { width: 32px; height: 32px }
.cell .why-ic { width: 40px; height: 40px }

.lt, .hero-t, .hd-name, .why b, .done-v h2, .call-n, .empty b { text-wrap: balance }
.why p, .hero-p, .sec-f, .sh-lede { text-wrap: pretty }


@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
.otp { display: flex; gap: var(--sys-space-2); justify-content: center; padding: var(--sys-space-2) var(--sys-space-4) var(--sys-space-4) }
.otp input { width: 48px; height: 58px; border-radius: var(--sys-radius-md); border: 0; text-align: center; font: 600 24px var(--mono); color: var(--label); background: var(--cell); box-shadow: inset 0 0 0 1px var(--sys-color-border-strong); outline: none; caret-color: var(--sys-color-accent); user-select: text; -webkit-user-select: text; transition: box-shadow var(--sys-duration-fast), transform .3s var(--spring-pop) }
.otp input:focus { box-shadow: inset 0 0 0 2px var(--sys-color-accent) }
.otp input.ok { box-shadow: inset 0 0 0 2px var(--sys-status-cleared-fg); color: var(--sys-status-cleared-fg) }
.otp.bad input { box-shadow: inset 0 0 0 2px var(--sys-status-declined-fg); animation: shake .4s }
.otp.done input { animation: pop .4s var(--spring-pop) both }
.otp.done input:nth-child(2) { animation-delay: .04s } .otp.done input:nth-child(3) { animation-delay: .08s } .otp.done input:nth-child(4) { animation-delay: .12s } .otp.done input:nth-child(5) { animation-delay: .16s } .otp.done input:nth-child(6) { animation-delay: .2s }
.hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none }
.hold::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .22); transform: scaleX(0); transform-origin: 0 50% }
.hold.holding::before { transform: scaleX(1); transition: transform 1.5s linear }
.hold span { position: relative }
.hold-hint { text-align: center; font-size: 13px; color: var(--label-2); margin: calc(var(--sys-space-2) * -1) var(--sys-space-4) var(--sys-space-5) }
.rcpt-ref { display: flex; align-items: center; justify-content: space-between; gap: var(--sys-space-3) }
.rcpt-ref .cell-v { user-select: text; -webkit-user-select: text }
.success { text-align: center; padding: var(--sys-space-4) var(--sys-space-6) var(--sys-space-6) }
.success .ring { width: 88px; height: 88px; margin: 0 auto var(--sys-space-4) }
.success .ring circle { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw .8s .1s var(--spring) forwards }
.success .ring path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .45s .55s var(--spring) forwards }
.success h2 { font-family: var(--display); font-size: 26px; line-height: 32px; font-weight: 700; animation: ckIn .5s .4s var(--spring) both }
.success p { font-size: 15px; line-height: 22px; color: var(--label-2); margin-top: var(--sys-space-2); animation: ckIn .5s .5s var(--spring) both }
.success .hd-a { animation: ckIn .5s .45s var(--spring) both }
.gate { display: flex; gap: var(--sys-space-3); align-items: flex-start; margin: 0 var(--sys-space-4) var(--sys-space-5); padding: var(--sys-space-3) var(--sys-space-4); border-radius: var(--sys-radius-md); background: var(--sys-status-refunded-bg); box-shadow: inset 0 0 0 1px var(--sys-status-refunded-bd); font-size: 13px; line-height: 18px; color: var(--sys-color-text-secondary) }
.gate svg { width: 18px; height: 18px; flex: none; color: var(--label-2) }

/* ═════════════ KeySign's own screens ═════════════ */

/* Read at arm's length in daylight: the shell's smallest sizes move up to KeySign's floor
   of 12.5px, and secondary lines get the room to be read rather than glanced at. */
.screen { font-size: 17px; line-height: 24px }
.tab { font-size: 12.5px; line-height: 14px }
.pill { font-size: 12.5px; height: 24px }
.cell-t { font-size: 17px; line-height: 23px }
.cell-s { font-size: 14px; line-height: 20px }
.cell-v { font-size: 16px }
.sec-f { font-size: 14px; line-height: 20px }
.sec-hs { font-size: 12.5px; letter-spacing: .08em; font-weight: 600 }
.sec-h h2 { font-family: var(--display); font-size: 19px; line-height: 24px; font-weight: 700 }
.lt-sub { font-size: 12.5px; letter-spacing: .08em; font-weight: 600 }
.kv .cell-t { font-size: 16px }
.why p { font-size: 15px; line-height: 21px }
.btn { height: 52px; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.005em }
.btn.fill { box-shadow: var(--cta-shadow) }
.num, .mono, .cell-r b, .hd-a, .bal-n { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums }
.code { font-family: var(--code); font-size: 13px; letter-spacing: 0 }

.lt-eye { font-family: var(--display); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); padding: 0 var(--sys-space-5); margin-top: var(--sys-space-1) }
.lt-eye + .lt { margin-top: 0 }
.lede { font-size: 16px; line-height: 23px; color: var(--sys-color-text-secondary); padding: 0 var(--sys-space-5) var(--sys-space-5); text-wrap: pretty }

/* the listing: the one object the whole app is about */
.lst { margin: 0 var(--sys-space-4) var(--sys-space-5); border-radius: var(--sys-radius-xl); background: var(--cell); border: 1px solid var(--sep); box-shadow: var(--sys-shadow-md); overflow: hidden; display: block; color: inherit }
.lst-top { padding: var(--sys-space-4) var(--sys-space-4) var(--sys-space-3); position: relative }
.lst-top::before { content: ''; position: absolute; left: var(--sys-radius-xl); right: var(--sys-radius-xl); top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sys-color-accent); opacity: .75 }
.lst-a { font-family: var(--display); font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -.015em; margin-top: var(--sys-space-3) }
.lst-c { font-size: 15px; line-height: 20px; color: var(--label-2); margin-top: 2px }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sep); border-bottom: 1px solid var(--sep); background: var(--cell-2) }
.facts div { padding: var(--sys-space-3) var(--sys-space-2); text-align: center }
.facts div + div { border-left: 1px solid var(--sep) }
.facts small { display: block; font-family: var(--display); font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2) }
.facts b { display: block; font-family: var(--display); font-size: 19px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums }
.lst-due { display: flex; align-items: center; gap: var(--sys-space-3); padding: var(--sys-space-3) var(--sys-space-4) }
.lst-due .clk { width: 40px; height: 40px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; flex: none; background: var(--sys-status-pending-bg); color: var(--sys-status-pending-fg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.lst-due .clk svg { width: 20px; height: 20px }
.lst-due b { display: block; font-size: 16px; line-height: 22px; font-weight: 600 }
.lst-due span { display: block; font-size: 14px; line-height: 19px; color: var(--label-2) }
.lst-due .left { margin-left: auto; text-align: right; font-family: var(--display); font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sys-status-pending-fg) }
.lst-due .left small { display: block; font-size: 12.5px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2) }
.lst .btns { margin: 0; padding: 0 var(--sys-space-4) var(--sys-space-4) }

/* where in the transaction the deal is: ten steps, one bar */
.stg { padding: var(--sys-space-4) }
.stg-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sys-space-3) }
.stg-h b { font-family: var(--display); font-size: 18px; line-height: 24px; font-weight: 700 }
.stg-h span { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums }
.stg-t { display: flex; gap: 3px; margin-top: var(--sys-space-3) }
.stg-t i { flex: 1; height: 6px; border-radius: 3px; background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep) }
.stg-t i.on { background: var(--sys-color-accent-solid); box-shadow: none }
.stg-t i.now { background: var(--sys-color-accent); box-shadow: 0 0 0 3px var(--sys-color-accent-soft); animation: nowPulse 2.4s var(--spring) infinite }
@keyframes nowPulse { 50% { box-shadow: 0 0 0 5px var(--sys-color-accent-soft) } }

/* steps of the deal, as rows that open their screen */
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--display); font-size: 15px; font-weight: 700; background: var(--cell-2); color: var(--label-2); box-shadow: inset 0 0 0 1px var(--sep) }
.step-n.done { background: var(--sys-status-cleared-bg); color: var(--sys-status-cleared-fg); box-shadow: inset 0 0 0 1px var(--sys-status-cleared-bd) }
.step-n.done svg { width: 16px; height: 16px }
.step-n.now { background: var(--sys-color-accent-solid); color: var(--sys-color-text-on-accent-solid); box-shadow: none }
.cell.has-step { --sep-in: 60px }

/* terms complete: a ring that fills as the offer does */
.ring-c { display: flex; gap: var(--sys-space-4); align-items: center; padding: var(--sys-space-4) }
.ring { width: 64px; height: 64px; flex: none; position: relative }
.ring svg { width: 64px; height: 64px; transform: rotate(-90deg) }
.ring circle { fill: none; stroke-width: 7 }
.ring .tr { stroke: var(--cell-2) }
.ring .mt { stroke: var(--sys-color-accent-solid); stroke-linecap: round; stroke-dasharray: 169.6; transition: stroke-dashoffset .6s var(--spring), stroke .3s }
.ring.done .mt { stroke: var(--sys-status-cleared-fg) }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums }
.ring-c strong { display: block; font-family: var(--display); font-size: 18px; line-height: 23px; font-weight: 700 }
.ring-c p { font-size: 14px; line-height: 20px; color: var(--label-2); margin-top: 2px }

/* the price: the figure is the control, stepped in five thousands */
.fig { padding: var(--sys-space-4) }
.fig-l { font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2) }
.fig-row { display: flex; align-items: center; gap: var(--sys-space-3); margin-top: var(--sys-space-2) }
.fig-n { flex: 1; font-family: var(--display); font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: center }
.fig-n.drafted { color: var(--label-2) }
.fig-b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text); transition: transform .3s var(--spring-pop) }
.fig-b:active { transform: scale(.9) }
.fig-b svg { width: 20px; height: 20px }
.fig-hint { display: flex; gap: var(--sys-space-2); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--label-2); margin-top: var(--sys-space-3) }
.fig-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px }
.fig-hint.up { color: var(--sys-status-cleared-fg) }
.fig-hint.down { color: var(--sys-status-pending-fg) }
.drafted-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--label-2) }

/* a row that is a decision: a switch, its consequence beneath */
.opt { --sep-in: 16px; align-items: flex-start }
.opt .cell-b { padding-top: 2px }
.opt .sw-t { margin-top: 2px }
.opt.lever .cell-t::after { content: 'Lever'; display: inline-block; vertical-align: 2px; margin-left: var(--sys-space-2); padding: 1px 7px; border-radius: var(--sys-radius-pill); font-family: var(--display); font-size: 12.5px; line-height: 18px; font-weight: 700; color: var(--sys-status-flagged-fg); background: var(--sys-status-flagged-bg); box-shadow: inset 0 0 0 1px var(--sys-status-flagged-bd) }
.opt .cell-s b { color: var(--label); font-weight: 600 }

/* strength against the two known competing offers */
.str { padding: var(--sys-space-4) }
.str-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sys-space-3) }
.str-h b { font-family: var(--display); font-size: 18px; font-weight: 700 }
.str-t { height: 10px; border-radius: 5px; background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep); margin: var(--sys-space-3) 0 var(--sys-space-2); overflow: hidden }
.str-t i { display: block; height: 100%; border-radius: 5px; transition: width .6s var(--spring), background .3s }
.str-f { display: flex; justify-content: space-between; font-family: var(--display); font-size: 14px; color: var(--label-2); font-variant-numeric: tabular-nums }
.str p { font-size: 15px; line-height: 21px; color: var(--sys-color-text-secondary); margin-top: var(--sys-space-3) }

/* the buyers' screen: the phone is turned around, so the type is bigger and the words plainer */
.turn { display: flex; align-items: center; gap: var(--sys-space-2); margin: 0 var(--sys-space-4) var(--sys-space-4); padding: var(--sys-space-2) var(--sys-space-3); border-radius: var(--sys-radius-pill); background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text); font-size: 14px; font-weight: 600; width: max-content }
.turn svg { width: 16px; height: 16px }
.big { text-align: center; padding: var(--sys-space-2) var(--sys-space-5) var(--sys-space-5) }
.big small { display: block; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2) }
.big b { display: block; font-family: var(--display); font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: var(--sys-space-1) 0 }
.big span { display: block; font-size: 16px; line-height: 22px; color: var(--sys-color-text-secondary) }
.ceil { margin: 0 var(--sys-space-4) var(--sys-space-6); padding: var(--sys-space-4); border-radius: var(--sys-radius-lg); background: var(--sys-status-flagged-bg); box-shadow: inset 0 0 0 1px var(--sys-status-flagged-bd) }
.ceil small { display: block; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sys-status-flagged-fg) }
.ceil b { display: block; font-family: var(--display); font-size: 30px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; margin: var(--sys-space-1) 0 var(--sys-space-2) }
.ceil p { font-size: 15px; line-height: 22px; color: var(--sys-color-text-secondary) }
.ceil p b { display: inline; font-size: inherit; line-height: inherit; margin: 0; color: var(--label) }
.kv .cell-s { font-size: 13.5px }
.kv.stack { align-items: flex-start }
.kv.stack .cell-t { color: var(--label); font-weight: 500 }

/* the counter: what they had, what the seller wants, and what it does */
.dif { padding: var(--sys-space-4); display: grid; grid-template-columns: 1fr auto; gap: var(--sys-space-1) var(--sys-space-3); align-items: baseline }
.dif-k { font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); grid-column: 1 / -1 }
.dif-v { display: flex; align-items: baseline; gap: var(--sys-space-2); flex-wrap: wrap; font-family: var(--display); font-variant-numeric: tabular-nums }
.dif-v s { font-size: 16px; color: var(--label-2); text-decoration-thickness: 1.5px }
.dif-v b { font-size: 22px; line-height: 28px; font-weight: 700 }
.dif p { grid-column: 1 / -1; font-size: 14.5px; line-height: 20px; color: var(--sys-color-text-secondary); margin-top: var(--sys-space-1) }

/* signing on glass: one mark at a time, a target the size of a business card */
.pad { position: relative; margin: 0 var(--sys-space-4) var(--sys-space-3); height: 188px; border-radius: var(--sys-radius-lg); background: var(--cell); box-shadow: inset 0 0 0 1.5px var(--sys-color-border-strong); overflow: hidden; touch-action: none }
.pad.ink { box-shadow: inset 0 0 0 2px var(--sys-color-accent) }
.pad.took { box-shadow: inset 0 0 0 2px var(--sys-status-cleared-fg); animation: took .5s var(--spring) }
@keyframes took { 40% { transform: scale(.985) } }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none }
.pad-line { position: absolute; left: 22px; right: 22px; bottom: 46px; border-bottom: 1.5px dashed var(--sys-color-border-strong); pointer-events: none }
.pad-x { position: absolute; left: 22px; bottom: 50px; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--label-3); pointer-events: none }
.pad-ph { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 14px; color: var(--label-2); pointer-events: none; transition: opacity .2s }
.pad.ink .pad-ph { opacity: 0 }
.pad-who { display: flex; align-items: center; justify-content: space-between; gap: var(--sys-space-3); padding: 0 var(--sys-space-5) var(--sys-space-2) }
.pad-who b { font-family: var(--display); font-size: 20px; line-height: 26px; font-weight: 700 }
.pad-who button { font-size: 16px; font-weight: 600; color: var(--tint) }
.pad-who button[disabled] { color: var(--label-3) }
.mk.now { background: var(--sys-color-surface-selected) }
.mk .why-ic { width: 36px; height: 36px }

/* the one-time code arrives the way iOS offers it, above the field */
.qt { display: flex; justify-content: center; margin: calc(var(--sys-space-2) * -1) var(--sys-space-4) var(--sys-space-4) }
.qt button { display: inline-flex; align-items: center; gap: var(--sys-space-2); height: 40px; padding: 0 var(--sys-space-4); border-radius: var(--sys-radius-pill); background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep), var(--sys-shadow-sm); font-size: 15px; animation: ckIn .4s var(--spring) both }
.qt button small { font-size: 13px; color: var(--label-2) }
.qt button b { font-family: var(--display); font-size: 17px; letter-spacing: .12em; font-variant-numeric: tabular-nums }
.who { display: flex; align-items: center; gap: var(--sys-space-3); padding: var(--sys-space-4) var(--sys-space-4) var(--sys-space-2) }
.who b { display: block; font-family: var(--display); font-size: 20px; line-height: 24px; font-weight: 700 }
.who span { display: block; font-size: 14px; color: var(--label-2) }
.who .pill { margin-left: auto }
.grp.locked { opacity: .55 }

/* the three pillars of a signature that holds up */
.pil { display: grid; gap: var(--sys-space-2); margin: 0 var(--sys-space-4) var(--sys-space-6) }

/* the offline state lives in the Dynamic Island, as a live activity does */
.island.live:not(.open) { width: 196px }
.island-live { display: none; position: absolute; inset: 0; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 13px; font-weight: 600; color: #f0d0a5 }
.island-live svg { width: 16px; height: 16px }
.island.live:not(.open) .island-live { display: flex; animation: fadeIn .4s .2s both }
.island.open .island-live { display: none }
.island-ic.ok { background: var(--island-ok); color: #0b1220 }
.island-ic.info { background: rgba(255, 255, 255, .14); color: var(--island-info) }
.island-ic.hold { background: #f0d0a5; color: #160d00 }
.island-ic.stop { background: #ffc5c0; color: #1a0503 }

/* deadlines, as calendar leaves */
.leaf { width: 44px; height: 46px; border-radius: var(--sys-radius-sm); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep); font-family: var(--display); font-variant-numeric: tabular-nums }
.leaf b { font-size: 19px; line-height: 20px; font-weight: 700 }
.leaf small { font-size: 11px; line-height: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label-2) }
.leaf.soon { background: var(--sys-status-pending-bg); box-shadow: inset 0 0 0 1px var(--sys-status-pending-bd) }
.leaf.soon small { color: var(--sys-status-pending-fg) }
.cell.has-leaf { --sep-in: 72px }

/* the escrow officer's account, shown once and only after Face ID */
.acct-no { font-family: var(--code); font-size: 16px; letter-spacing: .04em }
.dots { letter-spacing: .2em }

/* setup: three questions, one at a time */
.dotsrow { display: flex; gap: 6px; justify-content: center; margin: 0 0 var(--sys-space-5) }
.dotsrow i { width: 22px; height: 5px; border-radius: 3px; background: var(--cell-2); box-shadow: inset 0 0 0 1px var(--sep); transition: background .3s }
.dotsrow i.on { background: var(--sys-color-accent-solid); box-shadow: none }

/* inbox rows that have not been read */
.unread .cell-t { font-weight: 700 }
.unread::before { content: ''; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--sys-color-accent); z-index: 2 }

html[data-card-mode] .island.live .island-live { display: none }

/* a switch's label and a choice's detail wrap rather than cut off */
.opt .cell-t, .opt .cell-s, .opts .cell-s { white-space: normal }

/* ───────────── a screen narrower than the device ─────────────
   Below 450px the 426px device plus the stage padding overhangs the viewport and the page scrolls
   sideways. The whole device shrinks to fit, bezel and all, with zoom so layout follows. Three steps
   cover 390 (iPhone), 375 and 360 (Android) and 320 wide screens with the 12px stage padding intact.
   Card mode scales the device itself, so it is left alone. */
@media (max-width: 449px) { html:not([data-card-mode]) .phone { zoom: .85 } }
@media (max-width: 389px) { html:not([data-card-mode]) .phone { zoom: .78 } }
@media (max-width: 359px) { html:not([data-card-mode]) .phone { zoom: .68 } }