/* Kinetic, the phone app. The system's Layer 4 screens as one working app: the same tokens,
   type and components as portfolio/design-systems/kinetic/system/, driven the way a person
   would use them, with the navigation, gestures and motion of an iOS app.

   The shell (navigation stack, title bar, tab bar, sheets, Dynamic Island, Face ID) is the
   one Allowance's phone uses, which is itself built from Kinetic; this copy carries the
   additions Kinetic's own screens need after it. */

/* ───────────── colour: Kinetic, Electric Emerald ─────────────
   These are the values Kinetic's brand engine resolves for its default seed, #05cf82,
   on its neutral chassis (portfolio/design-systems/kinetic/system/, Foundations §09
   and brandVars). They are copied as resolved rather than re-derived, so this app and
   the system page show the same ink on the same ground. Everything below reads the
   --sys-* layer; the short names after it are aliases, never new colours. */
:root {
    color-scheme: light;
    --sys-color-bg-canvas: #f6f7f8;
    --sys-color-surface: #ffffff;
    --sys-color-surface-raised: #ffffff;
    --sys-color-surface-sunken: #eef0f2;
    --sys-color-surface-popover: #ffffff;
    --sys-color-surface-hover: rgba(20, 22, 26, .04);
    --sys-color-surface-selected: rgba(5, 207, 130, .1);
    --sys-color-border: rgba(20, 22, 26, .10);
    --sys-color-border-strong: rgba(20, 22, 26, .18);
    --sys-color-border-focus: #00a063;
    --sys-color-text-primary: #0d0f13;
    --sys-color-text-secondary: #282c33;
    --sys-color-text-tertiary: #464b54;
    --sys-color-text-inverse: #ffffff;
    --sys-color-accent: #05cf82;
    --sys-color-accent-text: #007144;
    --sys-color-accent-soft: rgba(0, 113, 68, .1);
    --sys-color-text-on-accent: #0b0f14;
    --sys-color-accent-solid: #007b4b;
    --sys-color-accent-solid-lift: #008854;
    --sys-color-text-on-accent-solid: #ffffff;
    --sys-color-spark: #00a063;
    --sys-color-pos: #00736e;
    --sys-status-cleared-fg: #00736e;
    --sys-status-cleared-bg: rgba(0, 115, 110, .14);
    --sys-status-cleared-bd: rgba(0, 115, 110, .3);
    --sys-status-pending-fg: #865900;
    --sys-status-pending-bg: rgba(134, 89, 0, .14);
    --sys-status-pending-bd: rgba(134, 89, 0, .3);
    --sys-status-scheduled-fg: #1666aa;
    --sys-status-scheduled-bg: rgba(22, 102, 170, .12);
    --sys-status-scheduled-bd: rgba(22, 102, 170, .28);
    --sys-status-declined-fg: #b02a2d;
    --sys-status-declined-bg: rgba(176, 42, 45, .1);
    --sys-status-declined-bd: rgba(176, 42, 45, .26);
    --sys-status-refunded-fg: #464b54;
    --sys-status-refunded-bg: rgba(20, 22, 26, .05);
    --sys-status-refunded-bd: rgba(20, 22, 26, .13);
    --sys-status-flagged-fg: #7c3aed;
    --sys-status-flagged-bg: rgba(124, 58, 237, .1);
    --sys-status-flagged-bd: rgba(124, 58, 237, .26);
    --sys-shadow-sm: 0 1px 2px rgba(20, 24, 33, .05), 0 2px 6px rgba(20, 24, 33, .04);
    --sys-shadow-md: 0 6px 18px -6px rgba(20, 24, 33, .12), 0 2px 6px rgba(20, 24, 33, .05);
    --sys-shadow-lg: 0 24px 48px -16px rgba(20, 24, 33, .20), 0 4px 12px rgba(20, 24, 33, .06);
    --sys-shadow-xl: 0 36px 72px -24px rgba(30, 27, 90, .28);
    --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%);
    --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: "IBM Plex Mono", ui-monospace, 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 app'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) 72%, transparent);
    --glass-strong: color-mix(in srgb, var(--sys-color-surface-popover) 88%, transparent);
    --glass-edge: var(--sys-color-border);
    --glass-shadow: var(--sys-shadow-md);
    --material: color-mix(in srgb, var(--sys-color-bg-canvas) 82%, transparent);
    --scrim: rgba(13, 15, 19, .32);
    --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;
}
html.dark {
    color-scheme: dark;
    --sys-color-bg-canvas: #0d0e10;
    --sys-color-surface: #17181b;
    --sys-color-surface-raised: #1e2024;
    --sys-color-surface-sunken: #0a0b0d;
    --sys-color-surface-popover: #22242a;
    --sys-color-surface-hover: rgba(255, 255, 255, .05);
    --sys-color-surface-selected: rgba(5, 207, 130, .16);
    --sys-color-border: rgba(255, 255, 255, .10);
    --sys-color-border-strong: rgba(255, 255, 255, .18);
    --sys-color-border-focus: #31df91;
    --sys-color-text-primary: #f7f8fa;
    --sys-color-text-secondary: #d2d6dc;
    --sys-color-text-tertiary: #aeb4be;
    --sys-color-text-inverse: #0d0e10;
    --sys-color-accent-text: #24d88a;
    --sys-color-accent-soft: rgba(36, 216, 138, .16);
    --sys-color-spark: #31df91;
    --sys-color-pos: #00bdb6;
    --sys-status-cleared-fg: #00bdb6;
    --sys-status-cleared-bg: rgba(0, 189, 182, .16);
    --sys-status-cleared-bd: rgba(0, 189, 182, .34);
    --sys-status-pending-fg: #da950b;
    --sys-status-pending-bg: rgba(218, 149, 11, .16);
    --sys-status-pending-bd: rgba(218, 149, 11, .36);
    --sys-status-scheduled-fg: #60aaf3;
    --sys-status-scheduled-bg: rgba(96, 170, 243, .16);
    --sys-status-scheduled-bd: rgba(96, 170, 243, .34);
    --sys-status-declined-fg: #fd736d;
    --sys-status-declined-bg: rgba(253, 115, 109, .16);
    --sys-status-declined-bd: rgba(253, 115, 109, .34);
    --sys-status-refunded-fg: #aeb4be;
    --sys-status-refunded-bg: rgba(255, 255, 255, .06);
    --sys-status-refunded-bd: rgba(255, 255, 255, .14);
    --sys-status-flagged-fg: #c4b5fd;
    --sys-status-flagged-bg: rgba(139, 92, 246, .18);
    --sys-status-flagged-bd: rgba(139, 92, 246, .34);
    --sys-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
    --sys-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --sys-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45);
    --sys-shadow-xl: 0 36px 72px -24px rgba(0, 0, 0, .7);
    --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 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-ic.info { background: rgba(255, 255, 255, .14); color: #31df91 }
.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: 0 10px 24px -10px rgba(0, 123, 75, .6) }
.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] { 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: 0 12px 30px -10px rgba(0, 123, 75, .6) }
.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 vendor's own invoice, drawn as a sheet of their paper: it is their document, not ours,
   so it keeps paper colours in both themes */
.paper { margin: 0 var(--sys-space-4) var(--sys-space-5); background: #fff; color: #1d1f23; border-radius: 6px; padding: var(--sys-space-5); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .08); font-size: 13px; line-height: 18px; font-family: var(--font) }
.paper h3 { font-size: 16px; line-height: 22px; font-weight: 700 }
.paper .meta { color: #5b616b; margin: var(--sys-space-1) 0 var(--sys-space-4) }
.paper .ln { display: flex; justify-content: space-between; gap: var(--sys-space-3); padding: 6px 0; border-bottom: 1px solid #e4e6ea }
.paper .ln span:last-child { font-family: var(--mono); white-space: nowrap }
.paper .ln.t { font-weight: 700; border-bottom: 0; padding-top: 10px }
.paper .pay { margin-top: var(--sys-space-4); padding: var(--sys-space-3); border-radius: 6px; background: #f2f3f5 }
.paper .pay.odd { background: #fdeceb; box-shadow: inset 0 0 0 1.5px #b02a2d }
.paper .pay i { display: block; color: #b02a2d; margin-top: var(--sys-space-1) }

/* 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) }

/* the context menu */
.ctx-bg { position: absolute; inset: 0; background: rgba(13, 15, 19, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s }
html.dark .ctx-bg { background: rgba(0, 0, 0, .4) }
.layer.on .ctx-bg { opacity: 1 }
.ctx-prev { position: absolute; left: var(--sys-space-4); right: var(--sys-space-4); border-radius: var(--sys-radius-lg); overflow: hidden; background: var(--cell); border: 1px solid var(--sep); box-shadow: var(--sys-shadow-lg); transition: transform .45s var(--spring-pop) }
.ctx-prev .cell::after { display: none }
.ctx-menu { position: absolute; left: var(--sys-space-4); width: 250px; border-radius: var(--sys-radius-lg); 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), var(--sys-shadow-lg); transform: scale(.5); opacity: 0; transition: transform .45s var(--spring-pop), opacity .2s }
.layer.on .ctx-menu { transform: none; opacity: 1 }
.ctx-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sys-space-3); height: 44px; padding: 0 var(--sys-space-4); font-size: 16px; border-bottom: 1px solid var(--sep) }
.ctx-menu button:last-child { border-bottom: 0 }
.ctx-menu button:active { background: var(--fill-2) }
.ctx-menu button svg { width: 18px; height: 18px; color: var(--label-2) }
.ctx-menu button.red, .ctx-menu button.red svg { color: var(--sys-status-declined-fg) }
.ctx-menu .gap { height: var(--sys-space-2); background: var(--fill) }

/* swipe actions */
.swr { position: relative; overflow: hidden; touch-action: pan-y }
.swr > .cell { position: relative; z-index: 1; will-change: transform; transition: transform .45s var(--spring), background var(--sys-duration-base) }
.swr.dragging > .cell { transition: none }
.sw-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0; visibility: hidden }
.swr.reveal .sw-acts { visibility: visible }
.sw-acts button { width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sys-space-1); font-size: 12px; font-weight: 600; color: var(--sys-color-text-inverse) }
.sw-acts button svg { width: 20px; height: 20px }
.sw-acts .stop { background: var(--sys-status-declined-fg) }
.sw-acts .hold { background: var(--sys-status-pending-fg) }
.sw-acts .call { background: var(--sys-status-scheduled-fg) }

/* 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) }

/* a phone call: the system's screen, over everything */
.call {
    position: absolute; inset: 0; z-index: 90; color: #f7f8fa; display: flex; flex-direction: column; align-items: center; padding: 120px var(--sys-space-8) 72px;
    background: linear-gradient(180deg, #2b2d31 0%, #17181b 60%, #0a0b0d 100%); transform: translateY(100%); transition: transform .5s var(--spring);
}
.call.on { transform: none }
.call .ava { width: 96px; height: 96px; font-size: 32px; border-radius: 50%; margin-bottom: var(--sys-space-4) }
.call-n { font-family: var(--display); font-size: 30px; line-height: 36px; font-weight: 700; text-align: center }
.call-s { font-family: var(--mono); font-size: 15px; color: #aeb4be; margin-top: var(--sys-space-2) }
.call-k { margin-top: auto; display: grid; grid-template-columns: repeat(3, 72px); gap: var(--sys-space-5) var(--sys-space-8); justify-content: center }
.call-k span { display: flex; flex-direction: column; align-items: center; gap: var(--sys-space-2); font-size: 12px; color: #d2d6dc }
.call-k i { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14) }
.call-k i svg { width: 28px; height: 28px }
.call-end { margin-top: var(--sys-space-8); width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #e5243f; color: #fff; transition: transform .3s var(--spring-pop) }
.call-end:active { transform: scale(.92) }
.call-end svg { width: 32px; height: 32px; transform: rotate(135deg) }
.call-script { margin-top: var(--sys-space-6); padding: var(--sys-space-3) var(--sys-space-4); border-radius: var(--sys-radius-lg); background: rgba(255, 255, 255, .1); font-size: 15px; line-height: 22px; color: #d2d6dc; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--spring) }
.call-script.on { opacity: 1; transform: none }

/* 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 }

/* asking the agent */
.chat { padding: var(--sys-space-1) var(--sys-space-4) var(--sys-space-2); display: flex; flex-direction: column; gap: var(--sys-space-2) }
.msg { max-width: 84%; padding: var(--sys-space-2) var(--sys-space-3); border-radius: var(--sys-radius-lg); font-size: 15px; line-height: 22px; animation: msgIn .45s var(--spring-pop) both; transform-origin: 0 100% }
.msg.me { align-self: flex-end; background: var(--sys-gradient-command); color: var(--sys-color-text-on-accent-solid); border-bottom-right-radius: var(--sys-radius-xs); transform-origin: 100% 100% }
.msg.ai { align-self: flex-start; background: var(--cell); border: 1px solid var(--sep); border-bottom-left-radius: var(--sys-radius-xs) }
.msg.ai a { color: var(--tint); font-weight: 600 }
@keyframes msgIn { from { opacity: 0; transform: scale(.7) } }
.typing { align-self: flex-start; display: flex; gap: var(--sys-space-1); padding: var(--sys-space-3) var(--sys-space-4); border-radius: var(--sys-radius-lg); border-bottom-left-radius: var(--sys-radius-xs); background: var(--cell); border: 1px solid var(--sep); animation: msgIn .3s var(--spring-pop) both }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); animation: dot 1.2s infinite }
.typing i:nth-child(2) { animation-delay: .15s }
.typing i:nth-child(3) { animation-delay: .3s }
@keyframes dot { 30% { transform: translateY(-4px); background: var(--label-2) } 60% { transform: none } }
.sugg { display: flex; gap: var(--sys-space-2); overflow-x: auto; padding: var(--sys-space-2) var(--sys-space-4); scrollbar-width: none; flex: none }
.sugg::-webkit-scrollbar { display: none }
.sugg button { flex: none; height: 34px; padding: 0 var(--sys-space-3); border-radius: var(--sys-radius-pill); background: var(--sys-color-accent-soft); color: var(--tint); font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform .3s var(--spring-pop) }
.sugg button:active { transform: scale(.95) }
.chat-foot { flex: none; padding: var(--sys-space-2) var(--sys-space-4) var(--sys-space-5); border-top: 1px solid var(--sep) }
.chat-in { display: flex; align-items: center; gap: var(--sys-space-2); height: 44px; border-radius: var(--sys-radius-pill); padding: 0 var(--sys-space-1) 0 var(--sys-space-4); background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep) }
.chat-in input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 16px var(--font); color: var(--label); user-select: text; -webkit-user-select: text }
.chat-in input::placeholder { color: var(--label-2) }
.chat-send { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--sys-gradient-command); color: var(--sys-color-text-on-accent-solid) }
.chat-send svg { width: 16px; height: 16px }

/* 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 }

/* ═════════════ Kinetic's own screens ═════════════ */

.lt-eye { font-family: var(--mono); font-size: 13px; line-height: 18px; color: var(--label-2); padding: 0 var(--sys-space-5); margin-top: var(--sys-space-1) }
.lt-eye + .lt { margin-top: 0 }

/* the virtual card: Kinetic's balance surface, the emerald dark in both themes so it reads as an object */
.vcard {
    position: relative; margin: 0 var(--sys-space-4) var(--sys-space-5); padding: var(--sys-space-5); border-radius: var(--sys-radius-xl); overflow: hidden;
    /* Mixed from the accent rather than written as Emerald, so a card on the system's
       Screens route takes Trust Blue or a white label with the rest of the app. */
    color: #f7f8fa; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sys-color-accent) 28%, transparent), transparent 55%),
        linear-gradient(150deg, color-mix(in srgb, var(--sys-color-accent) 22%, #08130f) 0%, color-mix(in srgb, var(--sys-color-accent) 7%, #08130f) 60%, #08130f 100%);
    box-shadow: 0 24px 40px -22px color-mix(in srgb, color-mix(in srgb, var(--sys-color-accent) 30%, #000) 70%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s var(--spring), filter .4s;
}
html:not(.dark) .vcard { color: #0d0f13; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sys-color-accent) 35%, transparent), transparent 55%), linear-gradient(150deg, color-mix(in srgb, var(--sys-color-accent) 10%, #ffffff) 0%, #ffffff 70%); box-shadow: var(--sys-shadow-lg), inset 0 0 0 1px var(--sep) }
.vcard:active { transform: scale(.985) }
.vc-top { display: flex; justify-content: space-between; align-items: center }
.vc-chip { width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) }
html:not(.dark) .vc-chip { background: linear-gradient(135deg, #cfd6dd, #eef0f2); box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .12) }
.vc-l { font-size: 13px; font-weight: 600; color: var(--sys-color-accent); margin-top: var(--sys-space-4) }
html:not(.dark) .vc-l { color: var(--sys-color-accent-text) }
.vc-amt { display: block; font-family: var(--mono); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.02em; margin-top: var(--sys-space-1) }
.vc-num { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; margin-top: var(--sys-space-4); opacity: .9 }
.vc-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; margin-top: var(--sys-space-2); opacity: .8 }
.vcard.frozen { filter: saturate(.2) }
.vc-frost { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(180, 210, 230, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s; pointer-events: none }
.vc-frost span { display: inline-flex; align-items: center; gap: var(--sys-space-2); padding: var(--sys-space-2) var(--sys-space-3); border-radius: var(--sys-radius-pill); background: rgba(13, 14, 16, .7); color: #f7f8fa; font-size: 13px; font-weight: 600 }
.vc-frost svg { width: 16px; height: 16px }
.vcard.frozen .vc-frost { opacity: 1 }

/* quick actions under the card */
.qx { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sys-space-2); padding: 0 var(--sys-space-4) var(--sys-space-6) }
.qx a, .qx button { display: flex; flex-direction: column; align-items: center; gap: var(--sys-space-2); font-size: 12px; font-weight: 600; color: var(--sys-color-text-secondary) }
.qx i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sys-color-accent-soft); color: var(--sys-color-accent-text); transition: transform .3s var(--spring-pop) }
.qx a:active i, .qx button:active i { transform: scale(.9) }
.qx svg { width: 22px; height: 22px }
.qx [aria-disabled="true"] { opacity: .4 }

/* spending tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sys-space-2); margin: 0 var(--sys-space-4) var(--sys-space-6) }
.tile { padding: var(--sys-space-3); border-radius: var(--sys-radius-lg); background: var(--cell); border: 1px solid var(--sep); box-shadow: var(--sys-shadow-sm) }
.tile i { width: 32px; height: 32px; border-radius: var(--sys-radius-sm); display: grid; place-items: center; margin-bottom: var(--sys-space-3) }
.tile i svg { width: 17px; height: 17px }
.tile b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600 }
.tile span { display: block; font-size: 12px; color: var(--label-2); margin-top: 2px }

/* amount entry: the figure is the input, cents a step down, the balance checked on every key */
.amt-in { text-align: center; padding: var(--sys-space-4) var(--sys-space-4) var(--sys-space-2) }
.amt-fig { display: inline-flex; align-items: baseline; font-family: var(--mono); font-weight: 600; letter-spacing: -.03em; transition: color var(--sys-duration-fast) }
.amt-fig .cur { font-size: 28px; color: var(--label-2); margin-right: 2px; align-self: flex-start; margin-top: 8px }
.amt-fig .whole { font-size: 56px; line-height: 64px }
.amt-fig .cents { font-size: 26px; color: var(--label-2) }
.amt-fig.over { color: var(--sys-status-declined-fg) }
.amt-fig.bump { animation: bump .25s var(--spring-pop) }
@keyframes bump { 50% { transform: scale(1.04) } }
.amt-fig.shake { animation: shake .4s }
@keyframes shake { 20%, 60% { transform: translateX(-6px) } 40%, 80% { transform: translateX(6px) } }
.amt-avail { font-family: var(--mono); font-size: 13px; color: var(--label-2); margin-top: var(--sys-space-1) }
.amt-avail.over { color: var(--sys-status-declined-fg) }
.quick { display: flex; gap: var(--sys-space-2); justify-content: center; padding: var(--sys-space-3) var(--sys-space-4) 0 }
.quick button { height: 32px; padding: 0 var(--sys-space-3); border-radius: var(--sys-radius-pill); font-family: var(--mono); font-size: 13px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep); color: var(--label) }
.quick button:active { background: var(--cell-press) }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sys-space-1); padding: var(--sys-space-3) var(--sys-space-6) var(--sys-space-4) }
.keys button { height: 52px; border-radius: var(--sys-radius-md); font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--label); transition: background var(--sys-duration-fast), transform .2s var(--spring-pop) }
.keys button:active { background: var(--fill-2); transform: scale(.94) }
.keys svg { width: 24px; height: 24px }

/* people */
.people { display: flex; gap: var(--sys-space-4); overflow-x: auto; padding: var(--sys-space-1) var(--sys-space-4) var(--sys-space-4); scrollbar-width: none }
.people::-webkit-scrollbar { display: none }
.people button { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 56px; font-size: 12px; color: var(--sys-color-text-secondary) }
.people .ava { width: 52px; height: 52px; border-radius: 50%; font-size: 15px; transition: box-shadow .25s, transform .3s var(--spring-pop) }
.people [aria-pressed="true"] .ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sys-color-accent) }
.people [aria-pressed="true"] { color: var(--label); font-weight: 600 }
.people .add .ava { background: var(--cell); box-shadow: inset 0 0 0 1px var(--sys-color-border-strong); color: var(--tint) }
.ava.round { border-radius: 50% }

/* one-time code */
.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 to confirm: the fill sweeps for a second and a half; let go and nothing happens */
.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) }

/* the rate lock */
.lock-t { font-family: var(--mono); font-variant-numeric: tabular-nums }
.fx { display: grid; grid-template-columns: 1fr; gap: 0 }
.fx-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sys-space-4) }
.fx-row + .fx-row { border-top: 1px solid var(--sep) }
.fx-row small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--label-2); text-transform: uppercase }
.fx-row b { font-family: var(--mono); font-size: 28px; font-weight: 600 }
.fx-swap { display: grid; place-items: center; margin: -18px auto; position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep), var(--sys-shadow-sm); color: var(--tint) }
.fx-swap svg { width: 18px; height: 18px }

/* the cheque */
.cheque { margin: 0 var(--sys-space-4) var(--sys-space-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sys-space-2) }
.cheque button { aspect-ratio: 1.9; border-radius: var(--sys-radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sys-space-2); font-size: 12px; font-weight: 600; color: var(--label-2); background: var(--cell); box-shadow: inset 0 0 0 1.5px var(--sys-color-border-strong); position: relative; overflow: hidden }
.cheque button.empty { box-shadow: none; background-image: linear-gradient(var(--cell), var(--cell)); outline: 1.5px dashed var(--sys-color-border-strong); outline-offset: -1.5px; color: var(--tint) }
.cheque button.got { color: var(--sys-status-cleared-fg); background: linear-gradient(135deg, #f3efe2, #e8e1cc); }
html.dark .cheque button.got { background: linear-gradient(135deg, #2b2a24, #1f1e1a) }
.cheque button.got::before { content: ''; position: absolute; left: 12%; right: 30%; top: 30%; height: 2px; background: rgba(0, 0, 0, .15); box-shadow: 0 10px 0 rgba(0, 0, 0, .1), 0 20px 0 rgba(0, 0, 0, .1) }
.cheque svg { width: 22px; height: 22px; flex: none }
.flash { position: absolute; inset: 0; background: #fff; z-index: 99; pointer-events: none; animation: flash .45s ease-out forwards }
@keyframes flash { from { opacity: .9 } to { opacity: 0 } }

/* the limit slider: the consequence sits under the handle, not beside it */
.lim { padding: var(--sys-space-4) }
.lim-h { display: flex; justify-content: space-between; align-items: baseline }
.lim-h b { font-family: var(--mono); font-size: 22px; font-weight: 600 }
.lim input[type="range"] { width: 100%; margin: var(--sys-space-4) 0 var(--sys-space-2); accent-color: var(--sys-color-accent-solid); height: 28px }
.lim-f { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--label-2) }
.lim p { font-size: 13px; line-height: 18px; color: var(--label-2); margin-top: var(--sys-space-3) }

/* insights */
.week { padding: var(--sys-space-4) }
.week-bars { height: 140px; display: flex; align-items: flex-end; gap: var(--sys-space-2); margin-top: var(--sys-space-4) }
.week-bars div { flex: 1; display: flex; gap: 3px; align-items: flex-end; height: 100% }
.week-bars i { flex: 1; border-radius: 4px 4px 2px 2px; transform-origin: 50% 100%; animation: rise .7s var(--spring) both }
.week-bars i.a { background: var(--sys-color-accent-solid) }
.week-bars i.b { background: var(--sys-color-border-strong) }
.week-x { display: flex; gap: var(--sys-space-2); margin-top: var(--sys-space-2) }
.week-x span { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--label-2) }
.legend { display: flex; gap: var(--sys-space-4); font-size: 12px; color: var(--label-2) }
.legend span { display: inline-flex; align-items: center; gap: 6px }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--sys-color-accent-solid) }
.legend i.b { background: var(--sys-color-border-strong) }
.catbar { height: 6px; border-radius: 3px; background: var(--cell-2); margin-top: var(--sys-space-2); overflow: hidden }
.catbar i { display: block; height: 100%; border-radius: 3px; background: var(--sys-color-accent-solid); transform-origin: 0 50%; animation: grow .8s var(--spring) both }
.net { padding: var(--sys-space-5) var(--sys-space-4) }
.net small { font-family: var(--mono); font-size: 12px; color: var(--label-2); text-transform: uppercase; letter-spacing: .06em }
.net b { display: block; font-family: var(--mono); font-size: 34px; line-height: 42px; font-weight: 600; color: var(--sys-color-pos); margin-top: var(--sys-space-1) }
.net span { font-size: 13px; color: var(--label-2) }

/* the receipt */
.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 }

/* roles */
.perm .cell-v svg { width: 18px; height: 18px }
.perm .yes { color: var(--sys-status-cleared-fg) }
.perm .no { color: var(--sys-status-declined-fg) }
.masked { letter-spacing: .1em }
.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) }

/* ───────────── 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 } }