/* Terminuity UI: the one stylesheet for the Portal, Console and Dashboard.
   Rules live in docs/design.md (section 3). Visual language follows stageshow:
   a warm off-white ground, white cards on hairlines, three inks, one accent.
   Pages are built only from src/ui/kit.ts; add a component here, never a
   page-specific override. */

@font-face { font-family: "TT Hoves"; font-weight: 400; font-style: normal; font-display: swap; src: url("/portal/fonts/tt-hoves-400.woff2") format("woff2"); }
@font-face { font-family: "TT Hoves"; font-weight: 500; font-style: normal; font-display: swap; src: url("/portal/fonts/tt-hoves-500.woff2") format("woff2"); }

:root {
  --canvas: #f5f5f3;
  --surface: #ffffff;
  --well: #efefec;
  --line: rgba(10, 13, 17, 0.07);
  --line-strong: rgba(10, 13, 17, 0.13);
  --text-strong: #0a0d11;
  --text: #5c5f5b;
  --text-faint: #74777a;
  --icon: #6b6e6a;
  --icon-faint: #b6b8b3;
  --hover: #efefec;
  --hover-chip: #e4e5e1;
  --accent: #00d1a7;
  --accent-ink: #007f69;
  --accent-soft: #e6f8f3;
  --good: #0b7a4f;   --good-soft: #e5f5ec;
  --waiting: #8a5a00; --waiting-soft: #fbf1dc;
  --problem: #b42318; --problem-soft: #fcebea;
  --neutral: #5c5f5b; --neutral-soft: #efefec;
  --dark: #0a0d11;
  --dark-raised: #16191d;
  --dark-line: rgba(255, 255, 255, 0.09);
  --dark-text: #ffffff;
  --dark-muted: #a3a7a1;
  --font: "TT Hoves", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
  --control: 36px;
  --shadow-card: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 13, 17, 0.04);
  --shadow-raised: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(10, 13, 17, 0.08);
  --shadow-pop: 0 0 0 1px rgba(10, 13, 17, 0.08), 0 4px 16px rgba(10, 13, 17, 0.1), 0 12px 32px rgba(10, 13, 17, 0.08);
  --shadow-sheet: 0 0 0 1px rgba(10, 13, 17, 0.06), 0 24px 64px -12px rgba(10, 13, 17, 0.28);
  --track-hero: -0.0361em;
  --track-figure: -0.0255em;
  --track-inline: -0.0145em;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --side: 236px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text-strong); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
main:focus, h1:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; letter-spacing: var(--track-inline); }
.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--dark); color: var(--dark-text); padding: 8px 12px; border-radius: var(--r-md); }
.skip:focus { top: 12px; }
.ink-link { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ink-link:hover { text-decoration-color: currentColor; }

/* ---------- Shell (Mercury's frame in our colors, November 7) ---------- */
.app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--canvas) calc(var(--side) - 1px), var(--line) calc(var(--side) - 1px), var(--line) var(--side), transparent var(--side)); }
.app[data-product="console"], .app[data-product="dashboard"] { background: linear-gradient(to right, var(--dark) var(--side), transparent var(--side)); }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 16px; background: var(--canvas); border-right: 1px solid var(--line); }
.side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; min-height: 30px; }
.side-brand img { height: 18px; width: auto; }
.side-chip { margin-left: auto; font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm); background: var(--well); color: var(--text); }
.side-biz { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; min-width: 0; font-size: 14px; color: var(--text); }
.side-biz span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-biz .avatar { width: 22px; height: 22px; font-size: 10px; }
/* White label: the licensee's mark in Terminuity's place. */
.side-brand.is-label img.label-wordmark { height: 24px; width: auto; max-width: 168px; object-fit: contain; object-position: left center; }
.side-brand.is-label img.label-logo { height: 24px; width: 24px; border-radius: 6px; object-fit: cover; }
.side-brand.is-label .label-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.nav-hr { border: 0; height: 1px; background: var(--line); margin: 8px 8px; flex: none; }
.nav-link { display: flex; align-items: center; gap: 10px; height: 32px; flex: none; padding: 0 8px; border-radius: var(--r-sm); color: var(--text); font-size: 15px; transition: background 140ms var(--ease), color 140ms var(--ease); }
.nav-link svg { width: 16px; height: 16px; color: var(--icon-faint-ui, var(--text-faint)); flex: none; }
.nav-link:hover { background: var(--well); color: var(--text-strong); }
.nav-link[aria-current="page"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-card); }
.nav-link[aria-current="page"] svg { color: var(--accent); }
.nav-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--well); color: var(--text-strong); font-size: 13px; font-weight: 500; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.nav-sub .nav-link { height: 28px; padding-left: 34px; font-size: 14px; }
.app[data-product] .nav-sub .nav-link[aria-current="page"] { background: transparent; box-shadow: none; color: var(--text-strong); }

.work { min-width: 0; display: flex; flex-direction: column; position: relative; }
.load-line { position: fixed; top: 0; left: var(--side); right: 0; height: 2px; z-index: 30; pointer-events: none; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: 0; }
.load-line.is-loading { opacity: 1; animation: load-line 1.6s var(--ease) forwards; }
.load-line.is-done { opacity: 0; transform: scaleX(1); transition: opacity 200ms var(--ease) 80ms; }
@keyframes load-line { 0% { transform: scaleX(0); } 30% { transform: scaleX(.5); } 100% { transform: scaleX(.85); } }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 24px; background: color-mix(in srgb, var(--canvas) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.top.is-scrolled { border-bottom-color: var(--line); }
.top .top-menu, .top .top-biz { display: none; }
.biz { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; }
.biz span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-btn { display: flex; align-items: center; gap: 8px; height: 34px; width: 360px; max-width: 40vw; padding: 0 8px 0 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); border: 0; color: var(--text-faint); transition: box-shadow 140ms var(--ease); }
.search-btn:hover { box-shadow: 0 0 0 1px rgba(10, 13, 17, 0.22); }
.search-btn svg { width: 14px; height: 14px; color: var(--text-faint); }
.search-btn kbd { margin-left: auto; font: 400 11px var(--font); color: var(--text-faint); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; }
.top .iconbtn { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text); position: relative; }
.top .iconbtn:hover { background: var(--well); color: var(--text-strong); }
.top .iconbtn[aria-current="page"], .top .iconbtn[aria-pressed="true"] { color: var(--text-strong); background: var(--well); }
.top .iconbtn svg { width: 16px; height: 16px; }
.top .top-money .btn { height: 34px; }
.avatar-btn { border: 0; padding: 0; background: none; border-radius: var(--r-md); display: grid; }
.avatar-btn .avatar { width: 34px; height: 34px; border-radius: var(--r-md); font-size: 13px; }
.avatar-btn:hover .avatar { background: #22272c; }
.pop-money { min-width: 200px; }
.pop-money a { gap: 10px; }
.pop-ico { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--well); display: grid; place-items: center; color: var(--text); flex: none; }
.pop-ico svg { width: 16px; height: 16px; }
.pop-notices { width: 360px; }
.pop-head .more { margin-left: auto; font-weight: 400; }
.main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 8px 32px 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
/* Hide balances (the eye): every amount blurred until shown again. */
.app.hide-money .main .num, .app.hide-money .main .money-amount, .app.hide-money .main .amt { filter: blur(7px); user-select: none; }

.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; background: var(--dark); color: var(--dark-text); flex: none; letter-spacing: 0.01em; }
.avatar.square { border-radius: var(--r-sm); }

.tabbar { display: none; }
.scrim { display: none; }

/* Ask AI: the floating button (Mercury's Command) and its panel over the page. */
.ask-fab { position: fixed; right: 28px; bottom: 28px; z-index: 22; width: 44px; height: 44px; border-radius: var(--r-lg); border: 0; background: var(--dark); color: var(--accent); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(10, 13, 17, 0.18); transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); }
.ask-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(10, 13, 17, 0.24); }
.ask-fab svg { width: 20px; height: 20px; }
dialog.ask-panel { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(420px, 100%); padding: 0; border: 0; background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sheet); }
dialog.ask-panel[open] { display: flex; animation: sheet-in 200ms var(--ease); }
dialog.ask-panel::backdrop { background: rgba(10, 13, 17, 0.18); }
.ask-panel-form { display: flex; flex-direction: column; width: 100%; }
.ask-panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.ask-panel-head h2 { font-size: 17px; margin-right: auto; }
.ask-panel-body { flex: 1; overflow-y: auto; padding: 28px 20px; display: grid; gap: 16px; align-content: end; }
.ask-panel-hello { font-size: 22px; letter-spacing: -0.02em; color: var(--text-strong); }
.ask-panel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 30px; padding: 0 10px; border-radius: var(--r-md); border: 0; background: var(--well); color: var(--text-strong); font-size: 14px; transition: background 140ms var(--ease); }
.chip:hover { background: var(--hover-chip); }
.ask-panel-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.ask-panel-input textarea { resize: none; min-height: 44px; }

/* Console and Dashboard: the same shell with the dark side (always). */
.app[data-product="console"] .side, .app[data-product="dashboard"] .side { background: var(--dark); border-right-color: var(--dark); }
.app[data-product="console"] .nav-link, .app[data-product="dashboard"] .nav-link, .app[data-product="console"] .side-biz, .app[data-product="dashboard"] .side-biz { color: var(--dark-muted); }
.app[data-product="console"] .side-biz, .app[data-product="dashboard"] .side-biz { color: #e6e8e3; }
.app[data-product="console"] .side-biz .avatar, .app[data-product="dashboard"] .side-biz .avatar { background: var(--accent); color: var(--dark); }
.app[data-product="console"] .nav-link svg, .app[data-product="dashboard"] .nav-link svg { color: #6f736e; }
.app[data-product="console"] .nav-link:hover, .app[data-product="dashboard"] .nav-link:hover { background: var(--dark-raised); color: var(--dark-text); }
.app[data-product="console"] .nav-link[aria-current="page"], .app[data-product="dashboard"] .nav-link[aria-current="page"] { background: var(--dark-raised); color: var(--dark-text); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.app[data-product="console"] .nav-link[aria-current="page"] svg, .app[data-product="dashboard"] .nav-link[aria-current="page"] svg { color: var(--accent); }
.app[data-product="console"] .nav-hr, .app[data-product="dashboard"] .nav-hr { background: var(--dark-line); }
.app[data-product="console"] .side-chip, .app[data-product="dashboard"] .side-chip { background: rgba(255, 255, 255, 0.1); color: var(--dark-muted); }
.app[data-product="dashboard"] .side-brand.is-label .label-name { color: var(--dark-text); }
.app[data-product="console"] .ask-fab, .app[data-product="dashboard"] .ask-fab { background: var(--accent); color: var(--dark); }

/* ---------- Page header ---------- */
.ph { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; min-height: 48px; }
.ph-text { display: grid; gap: 4px; min-width: 0; }
.ph-eyebrow { font-size: 14px; color: var(--text); }
.ph h1 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.ph-back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text); }
.ph-back svg { width: 14px; height: 14px; }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Layout ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cols-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.stack { display: grid; gap: 24px; align-content: start; min-width: 0; }
.stack-sm { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* ---------- Card ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 20px; }
.card-head h2 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.card-head .card-meta { font-size: 14px; color: var(--text); }
.card-body { padding: 0 20px 20px; }
.card > .card-body:first-child { padding-top: 20px; }
.card-head + .rows { border-top: 1px solid var(--line); }
.card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; color: var(--text-strong); white-space: nowrap; }
.more svg { width: 14px; height: 14px; color: var(--icon); transition: transform 140ms var(--ease); }
.more:hover svg { transform: translateX(2px); }

/* ---------- Money card (dark, the one big number) ---------- */
.money { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 24px; color: var(--dark-text); background: radial-gradient(120% 90% at 85% 0%, rgba(0, 209, 167, 0.16), transparent 55%), var(--dark); box-shadow: 0 1px 2px rgba(10, 13, 17, 0.2); display: grid; gap: 20px; }
.money-label { font-size: 14px; color: var(--dark-muted); }
.money-amount { font-size: 44px; line-height: 1; font-weight: 400; letter-spacing: var(--track-hero); font-variant-numeric: tabular-nums; margin-top: 8px; }
.money-sub { font-size: 14px; color: var(--dark-muted); margin-top: 8px; }
.money-figures { display: flex; gap: 32px; flex-wrap: wrap; }
.money-figures div { display: grid; gap: 2px; }
.money-figures dt { font-size: 13px; color: var(--dark-muted); }
.money-figures dd { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: var(--track-inline); font-variant-numeric: tabular-nums; }
.money-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { display: grid; gap: 4px; padding: 16px 20px; align-content: start; }
.stat + .stat { box-shadow: inset 1px 0 0 var(--line); }
.stat dt { font-size: 14px; color: var(--text); }
.stat dd { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: var(--track-figure); font-variant-numeric: tabular-nums; }
/* One big number per row (design.md): the first figure leads; the rest read as lines. */
.stat + .stat dd { font-size: 20px; line-height: 1.3; letter-spacing: var(--track-inline); }
.card-head + .stats .stat { padding-top: 0; }
.nav-count.problem { background: var(--problem-soft); color: var(--problem); }
.stat .stat-note { font-size: 13px; color: var(--text); }

/* ---------- Rows ---------- */
.rows { display: grid; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 20px; transition: background 140ms var(--ease); }
.row + .row { box-shadow: inset 0 1px 0 var(--line); }
a.row:hover { background: var(--hover); }
.row-lead { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--well); display: grid; place-items: center; color: var(--icon); flex: none; overflow: hidden; }
.row-lead svg { width: 18px; height: 18px; }
.row-lead img { width: 100%; height: 100%; object-fit: contain; }
/* Ads play full screen on mostly portrait terminals: show them in that shape, cropped as they play. */
.row-lead.is-screen { width: 27px; height: 48px; }
.row-lead.is-screen img { object-fit: cover; }
.row-lead.is-good { background: var(--good-soft); color: var(--good); }
.row-lead.is-waiting { background: var(--waiting-soft); color: var(--waiting); }
.row-lead.is-problem { background: var(--problem-soft); color: var(--problem); }
.row-text { display: grid; gap: 2px; min-width: 0; }
.row-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { display: flex; align-items: center; gap: 8px; }
.row-end-stack { display: flex; align-items: center; justify-content: flex-end; gap: 12px; text-align: right; }
@media (max-width: 560px) { .row-end-stack { display: grid; justify-items: end; gap: 4px; } .row-end-stack > .row-value { order: -1; } }
/* A row with its own controls (Route: move a stop): on a phone the controls take their own line under the text. */
@media (max-width: 560px) {
  .row:has(.inline-form), .row:has(.ask-decide) { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .row:has(.inline-form) > .row-end, .row:has(.ask-decide) > .row-end { grid-column: 2; }
  .row:has(.inline-form) .row-end-stack, .row:has(.ask-decide) .row-end-stack { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; text-align: left; }
  .row:has(.inline-form) .row-end-stack > .row-value { order: -1; flex-basis: 100%; }
}
.row-value { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: var(--track-inline); white-space: nowrap; }
.row-chevron { width: 16px; height: 16px; color: var(--icon-faint); }
.row.no-lead { grid-template-columns: minmax(0, 1fr) auto; }
.day { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 20px 8px; font-size: 14px; color: var(--text); }
.day b { font-weight: 500; color: var(--text-strong); }
.day + .row { box-shadow: none; }

/* ---------- Status ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.good { background: var(--good-soft); color: var(--good); }
.status.waiting { background: var(--waiting-soft); color: var(--waiting); }
.status.problem { background: var(--problem-soft); color: var(--problem); }
.status.neutral { background: var(--neutral-soft); color: var(--neutral); }
.status.plain { background: transparent; padding: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control); padding: 0 14px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background 140ms var(--ease), box-shadow 140ms var(--ease), color 140ms var(--ease), transform 140ms var(--ease); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--dark); color: var(--dark-text); }
.btn.primary:hover:not([disabled]) { opacity: 0.88; }
.btn.secondary { background: var(--surface); color: var(--text-strong); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 1px rgba(10, 13, 17, 0.04); }
.btn.secondary:hover:not([disabled]) { background: var(--hover); }
.btn.quiet { background: transparent; color: var(--text-strong); }
.btn.quiet:hover:not([disabled]) { background: var(--well); }
.btn.danger { background: var(--surface); color: var(--problem); box-shadow: 0 0 0 1px var(--line-strong); }
.btn.danger:hover:not([disabled]) { background: var(--problem-soft); }
.btn.mint { background: var(--accent); color: var(--dark); }
.btn.mint:hover:not([disabled]) { background: #00bd97; }
.btn.on-dark { background: rgba(255, 255, 255, 0.08); color: var(--dark-text); box-shadow: inset 0 0 0 1px var(--dark-line); }
.btn.on-dark:hover:not([disabled]) { background: rgba(255, 255, 255, 0.16); }
/* A second dark control (kit lift 2): Onyx with white ink on light, raised #2a2f35 on dark; only where a board uses it. */
.btn.onyx { background: #0a0d11; color: #ffffff; }
.btn.onyx:hover:not([disabled]) { opacity: 0.88; }
:root[data-theme="dark"] .btn.onyx { background: #2a2f35; color: #ffffff; }
:root[data-theme="dark"] .btn.onyx:hover:not([disabled]) { opacity: 1; background: #343a41; }
.btn.small { height: 30px; padding: 0 10px; font-size: 14px; gap: 6px; }
.btn.small svg { width: 14px; height: 14px; }
.btn.full { width: 100%; }
.btn[data-busy] { color: transparent; position: relative; pointer-events: none; }
.btn[data-busy]::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--text-strong); animation: spin 700ms linear infinite; }
.btn.primary[data-busy]::after { border-color: rgba(255, 255, 255, 0.3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn { width: var(--control); height: var(--control); display: grid; place-items: center; border-radius: var(--r-md); border: 0; background: var(--surface); color: var(--icon); box-shadow: var(--shadow-card); position: relative; transition: background 140ms var(--ease), color 140ms var(--ease); }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { color: var(--text-strong); background: var(--hover); }
.iconbtn .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.iconbtn.bare { box-shadow: none; background: transparent; }

/* ---------- Segmented and tabs ---------- */
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-md); background: var(--well); }
.seg a, .seg button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: 14px; color: var(--text); display: inline-flex; align-items: center; white-space: nowrap; }
.seg [aria-current="true"], .seg [aria-current="page"], .seg [aria-pressed="true"] { background: var(--surface); color: var(--text-strong); font-weight: 500; box-shadow: var(--shadow-card); }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 0; font-size: 15px; color: var(--text); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.tabs a:hover { color: var(--text-strong); }
.tabs a[aria-current="page"] { color: var(--text-strong); font-weight: 500; box-shadow: inset 0 -2px 0 var(--text-strong); }

/* ---------- Fields ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.input, .select select, textarea.input { width: 100%; height: var(--control); padding: 0 12px; border-radius: var(--r-md); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 15px; color: var(--text-strong); transition: box-shadow 140ms var(--ease); }
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input::placeholder { color: var(--text-faint); }
.input:hover, .select select:hover { box-shadow: inset 0 0 0 1px rgba(10, 13, 17, 0.22); }
.input:focus, .select select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent-ink), 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--problem), 0 0 0 3px var(--problem-soft); }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; }
.select svg { position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--icon); pointer-events: none; }
.hint { font-size: 13px; color: var(--text); }
.error { font-size: 13px; color: var(--problem); }
.error:empty { display: none; }
.search { position: relative; display: block; min-width: 0; }
.search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--icon); pointer-events: none; }
.search .input { padding-left: 34px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--dark); flex: none; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .search { flex: 1 1 240px; max-width: 360px; }
.filters .select { flex: 0 0 auto; }
.filters .select select { width: auto; min-width: 140px; }

/* ---------- Empty, notice, steps ---------- */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--text); }
.notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.notice b { font-weight: 500; color: var(--text-strong); }
.notice.is-good svg { color: var(--good); }
.notice.is-waiting svg { color: var(--waiting); }
.notice.is-problem { background: var(--problem-soft); box-shadow: none; }
.notice.is-problem svg { color: var(--problem); }
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 20px; }
.empty-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--well); display: grid; place-items: center; color: var(--icon); margin-bottom: 4px; }
.empty-icon svg { width: 20px; height: 20px; }
.empty h3 { font-size: 16px; }
.empty p { font-size: 14px; color: var(--text); max-width: 36ch; }
.empty .btn { margin-top: 8px; }
.steps { display: grid; }
.step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; }
.step + .step { box-shadow: inset 0 1px 0 var(--line); }
.step-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--surface); }
.step-mark svg { width: 13px; height: 13px; }
.step.is-done .step-mark { background: var(--accent); box-shadow: none; color: var(--dark); }
.step.is-done .row-title { color: var(--text); font-weight: 400; }
/* A row that opens a sheet. */
.row.is-press { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.row.is-press:hover { background: var(--hover); }
.row.is-press:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tracker-mini { display: grid; gap: 6px; justify-items: end; }
.tracker-mini-bars { display: grid; grid-template-columns: repeat(5, 18px); gap: 3px; }
.tracker-mini-bars span { height: 4px; border-radius: 2px; background: var(--well); }
.tracker-mini-bars span.is-done { background: var(--accent); }
.tracker-mini-label { font-size: 13px; color: var(--text); white-space: nowrap; }
/* The money card with the thing being paid for beside the amount (an ad offer). */
.money.has-media { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
.money.has-media > :not(.money-media) { grid-column: 1; }
.money-media { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 99px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); background: var(--dark-raised); }
@media (max-width: 560px) { .money-media { width: 63px; grid-row: 1; } }
/* File chooser drawn as a drop area. */
.drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: background 140ms var(--ease); }
.drop:hover { background: var(--well); }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon, .drop-preview { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--well); display: grid; place-items: center; color: var(--icon); object-fit: contain; }
.drop-preview:not([hidden]) + .drop-icon { display: none; }
.drop-text { display: grid; gap: 2px; min-width: 0; }
.drop-title { font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-name { font-size: 14px; color: var(--text); }
.drop.has-file { border-style: solid; }
/* Things to pick, one per line. */
.picker { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.picker legend { padding: 0; margin-bottom: 8px; }
.pick-group { font-size: 13px; color: var(--text); margin: 6px 0 -2px; }
.pick-list { display: grid; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; cursor: pointer; }
.pick + .pick { box-shadow: inset 0 1px 0 var(--line); }
.pick:hover { background: var(--hover); }
.pick input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--dark); }
.sheet-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tracker { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.tracker li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.tracker-bar { height: 4px; border-radius: 2px; background: var(--well); }
.tracker li.is-done .tracker-bar { background: var(--accent); }
.tracker-label { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 600px) { .tracker { gap: 4px; } .tracker-label { font-size: 13px; letter-spacing: -0.01em; } }
.tracker li.is-done .tracker-label { color: var(--text); }
.tracker-meta { font-size: 13px; color: var(--text-faint); }
.progress { height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.progress .w0 { width: 0; } .progress .w25 { width: 25%; } .progress .w33 { width: 33.3%; } .progress .w50 { width: 50%; } .progress .w67 { width: 66.7%; } .progress .w75 { width: 75%; } .progress .w100 { width: 100%; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text); padding: 10px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .end { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot td { font-weight: 500; border-top: 1px solid var(--line-strong); }

/* ---------- Chart ---------- */
.chart { width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--accent); }
.chart .bar.is-quiet { fill: #d9ebe6; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart text { font: 400 13px var(--font); fill: var(--text-faint); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-faint); }
.facts { display: grid; margin: 0; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; }
.facts div + div { box-shadow: inset 0 1px 0 var(--line); }
.facts dt { color: var(--text); }
.facts dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.sheet-body:focus { outline: none; }
.chart-total { font-size: 28px; letter-spacing: var(--track-figure); font-variant-numeric: tabular-nums; }

/* ---------- Menus and sheets ---------- */
.pop-wrap { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; padding: 4px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); display: none; }
.pop.is-open { display: grid; }
.pop-head { padding: 10px 10px 8px; display: grid; gap: 2px; }
.pop-head b { font-weight: 500; }
.pop-head span { font-size: 14px; color: var(--text); }
.pop a, .pop button { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: 15px; }
.pop a:hover, .pop button:hover { background: var(--well); }
.pop svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.pop .row { padding: 8px 10px; min-height: 0; border-radius: var(--r-sm); }
.pop .row + .row { box-shadow: none; }
dialog.sheet { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(460px, 100%); padding: 0; border: 0; background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--text-strong); border-radius: var(--r-xl) 0 0 var(--r-xl); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in 200ms var(--ease); }
dialog.sheet::backdrop { background: rgba(10, 13, 17, 0.32); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 17px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start; }
.sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
dialog.palette { width: min(560px, calc(100% - 32px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sheet); color: var(--text-strong); }
dialog.palette::backdrop { background: rgba(10, 13, 17, 0.24); }
.palette-input { position: relative; border-bottom: 1px solid var(--line); }
.palette-input svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--icon); }
.palette-input input { width: 100%; height: 52px; border: 0; padding: 0 16px 0 44px; font-size: 16px; background: transparent; outline: none; }
.palette-list { max-height: 360px; overflow-y: auto; padding: 6px; display: grid; }
.palette-list a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--r-sm); }
.palette-list a svg { width: 16px; height: 16px; color: var(--icon); }
.palette-list a[aria-selected="true"], .palette-list a:hover { background: var(--well); }
.palette-empty { padding: 16px; font-size: 14px; color: var(--text); }


/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app, .app[data-product] { grid-template-columns: minmax(0, 1fr); background: none; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 280px; transform: translateX(-100%); transition: transform 200ms var(--ease); box-shadow: var(--shadow-sheet); }
  .app.menu-open .side { transform: none; }
  .app.menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(10, 13, 17, 0.32); border: 0; }
  .top { padding: 0 16px; gap: 10px; }
  .top .top-menu { display: grid; }
  .top .top-biz { display: flex; flex: 1; font-size: 16px; }
  .top .top-biz .avatar { width: 22px; height: 22px; font-size: 10px; }
  .top .top-wide, .top .top-money { display: none; }
  .search-btn { order: 3; width: 34px; max-width: none; padding: 0; justify-content: center; color: var(--text); }
  .search-btn svg { color: var(--text); }
  .search-btn span, .search-btn kbd { display: none; }
  .top-end { order: 4; margin-left: 0; }
  .load-line { left: 0; }
  .main { padding: 4px 16px 96px; gap: 12px; }
  .ask-fab { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 40px; height: 40px; }
  .main { padding-bottom: 136px; }
  .pop-notices { width: min(360px, calc(100vw - 32px)); }
  .cols-even { grid-template-columns: minmax(0, 1fr); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 6px 0; border: 0; background: transparent; border-radius: var(--r-md); font-size: 13px; color: var(--text); }
  .tabbar svg { width: 20px; height: 20px; color: var(--text-faint); }
  .tabbar [aria-current="page"] { color: var(--text-strong); }
  .tabbar [aria-current="page"] svg { color: var(--accent); }
  dialog.sheet { margin: auto 0 0; width: 100%; height: auto; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
}
@media (max-width: 560px) {
  .card-head { padding: 12px 16px; min-height: 52px; }
  .card-body { padding: 0 16px 16px; }
  .card > .card-body:first-child { padding-top: 16px; }
  .row { padding: 10px 16px; }
  .day { padding: 12px 16px 6px; }
  .stat { padding: 14px 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { box-shadow: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .money { padding: 20px; }
  .money-amount { font-size: 40px; }
  .money-actions .btn { flex: 1; }
  .table th, .table td { padding-left: 16px; padding-right: 16px; }
  .filters .search { max-width: none; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

.sheet-form { display: contents; }
.card-tools { padding-bottom: 12px; }
.card-tools .search { max-width: 360px; }
.sheet-image { width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--r-md); background: var(--well); }
.sheet-image.is-screen { display: block; width: auto; height: 320px; max-height: none; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; margin-inline: auto; background: #000; }
.sheet-section { font-size: 15px; font-weight: 500; margin-top: 4px; }
.sheet-body .rows { margin: 0 -20px; }
.row[hidden] { display: none; }
.sheet-status { display: flex; align-items: center; gap: 10px; }
.sheet-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-lede { font-size: 15px; line-height: 1.5; color: var(--text); }
.sheet-body > .status { justify-self: start; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 560px) { .field-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Guided tasks (add a product, connect a tablet) ---------- */
.guide-wrap { max-width: 480px; width: 100%; margin: 8px auto 0; display: grid; gap: 12px; }
.guide { display: grid; gap: 20px; padding: 28px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.guide section { display: grid; gap: 16px; }
.guide h2 { font-size: 24px; font-weight: 400; letter-spacing: var(--track-inline); }
.guide h2:focus { outline: none; }
.guide-lede { font-size: 15px; line-height: 1.5; color: var(--text); margin-top: -8px; }
.guide-progress { display: grid; grid-auto-flow: column; gap: 6px; }
.guide-progress span { height: 4px; border-radius: 2px; background: var(--well); }
.guide-progress span.is-on { background: var(--accent); }
.guide-count { font-size: 13px; color: var(--text); margin-top: -12px; }
.guide-code { font-size: 44px; letter-spacing: 0.08em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.guide-center { text-align: center; }
.guide-photo { display: grid; place-items: center; min-height: 180px; border-radius: var(--r-md); background: var(--well); overflow: hidden; }
.guide-photo img { max-height: 220px; object-fit: contain; }
.guide-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.guide-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.guide-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.guide-list li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); flex: none; }
.guide-list li.is-done::before { background: var(--accent); box-shadow: none; }
.guide-status { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md); background: var(--well); font-size: 15px; }
.guide-status > span:last-child { display: grid; gap: 2px; }
.guide-status > span:last-child span { font-size: 14px; color: var(--text); }
.guide-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--waiting); animation: guide-pulse 1.6s ease-in-out infinite; }
.guide-status.is-done .guide-dot { background: var(--good); animation: none; }
@keyframes guide-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .guide-dot { animation: none; } }
.guide-product { display: flex; gap: 12px; align-items: center; }
.guide-product > span:last-child { display: grid; gap: 2px; }
.guide-product-art { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--well); display: grid; place-items: center; overflow: hidden; font-weight: 500; }
.guide-product-art img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .guide { padding: 20px; } .guide-wrap { margin-top: 0; } }

/* ---------- Reports ---------- */
.report-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.report-bar .filters { margin: 0; }
.report-bar > .search { flex: 1 1 280px; max-width: 360px; }
.row-end .select select { height: 32px; font-size: 14px; width: auto; min-width: 0; padding-right: 28px; }
.row-end .inline-form { display: inline-flex; }
.row-end .link { white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; font-size: 14px; }
.card-head > .link, .card-title-row > .link { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 2px; }
.filters input[type=date], .filters input[type=month] { width: auto; }
.input.date { width: auto; }
.share { display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.share span { display: block; height: 100%; background: var(--accent); }
.split { display: block; height: 8px; border-radius: 4px; background: var(--dark); overflow: hidden; }
.split span { display: block; height: 100%; background: var(--accent); }
.share .w0, .split .w0 { width: 0%; } .share .w5, .split .w5 { width: 5%; } .share .w10, .split .w10 { width: 10%; } .share .w15, .split .w15 { width: 15%; } .share .w20, .split .w20 { width: 20%; } .share .w25, .split .w25 { width: 25%; } .share .w30, .split .w30 { width: 30%; } .share .w35, .split .w35 { width: 35%; } .share .w40, .split .w40 { width: 40%; } .share .w45, .split .w45 { width: 45%; } .share .w50, .split .w50 { width: 50%; } .share .w55, .split .w55 { width: 55%; } .share .w60, .split .w60 { width: 60%; } .share .w65, .split .w65 { width: 65%; } .share .w70, .split .w70 { width: 70%; } .share .w75, .split .w75 { width: 75%; } .share .w80, .split .w80 { width: 80%; } .share .w85, .split .w85 { width: 85%; } .share .w90, .split .w90 { width: 90%; } .share .w95, .split .w95 { width: 95%; } .share .w100, .split .w100 { width: 100%; }
@media (max-width: 560px) { .share { display: none; } }

/* ---------- Forms in cards ---------- */
.card-lede { font-size: 15px; line-height: 1.5; color: var(--text); max-width: 60ch; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-body > .form-actions, .form > .form-actions { margin-top: 4px; }
.card-body.form, .card-body > .form { max-width: 560px; }
.disclosure { border-top: 1px solid var(--line); padding-top: 12px; }
.disclosure > summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--text-strong); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "+"; color: var(--icon); font-weight: 400; }
.disclosure[open] > summary::after { content: "−"; }
.disclosure[open] > summary { margin-bottom: 12px; }
.disclosure form { display: grid; gap: 12px; }
label.field > span:first-child { font-size: 14px; font-weight: 500; color: var(--text-strong); }
textarea.input { min-height: 80px; padding-top: 8px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--text-strong); }
.check input { width: 16px; height: 16px; accent-color: var(--dark); }
.row-actions { display: flex; gap: 6px; }
.page-lede { font-size: 15px; line-height: 1.5; color: var(--text); max-width: 72ch; }
.suggestion { padding: 20px; display: grid; gap: 10px; }
.suggestion h3 { font-size: 17px; font-weight: 500; }
.suggestion-head { display: flex; align-items: center; gap: 10px; }
.suggestion .facts { margin: 4px 0; }
.card-disclosure { background: var(--surface); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 16px 20px; display: grid; gap: 12px; }
.card-disclosure[open] > summary { margin-bottom: 0; }
.campaign { display: grid; gap: 12px; }
.campaign-img { width: 100%; max-height: 200px; object-fit: contain; border-radius: var(--r-md); background: var(--well); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.inline-field { display: flex; gap: 8px; align-items: flex-start; }
.inline-field .field { flex: 1; max-width: 360px; }
.inline-field .btn { margin-top: 26px; }
.card-head > h2 { margin-right: auto; }
.suggestion .facts { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.suggestion .facts > div { display: grid; gap: 2px; padding: 0; border: 0; box-shadow: none; }
.suggestion .facts dt { font-size: 13px; color: var(--text); }
.suggestion .facts dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-strong); text-align: left; font-variant-numeric: tabular-nums; }
.quote { margin: 0; padding: 10px 14px; border-left: 2px solid var(--line-strong); color: var(--text-strong); font-size: 15px; background: var(--well); border-radius: 0 var(--r-md) var(--r-md) 0; }
.ledger { display: grid; padding: 0 20px 8px; }
.ledger-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ledger-line > span { display: grid; gap: 2px; color: var(--text-strong); }
.ledger-line b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
.ledger-line.is-total { border-top: 1px solid var(--line-strong); }
.ledger-line.is-total > span > span:first-child, .ledger-line.is-total b { font-weight: 500; font-size: 16px; }
.ph-actions form { display: contents; }
/* ---------- Layouts (slot grid) ---------- */
.slot-rows { display: grid; gap: 14px; }
.slot-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.slot-rowname { font-size: 13px; font-weight: 500; color: var(--text); padding-top: 12px; }
.slots { list-style: none; margin: 0; padding: 0 0 2px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 10px; overflow-x: auto; }
.card-body > .slots { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); overflow: visible; }
.slot { position: relative; display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-height: 88px; align-content: start; }
.slot-code { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.slot-name { font-size: 14px; font-weight: 500; color: var(--text-strong); line-height: 1.3; }
.slot-meta { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.slot-bar { width: 100%; margin-top: 2px; }
.slot-badge { order: -1; justify-self: start; font-size: 13px; font-weight: 500; padding: 1px 6px; border-radius: 5px; background: var(--well); color: var(--text-strong); }
.slot.is-empty { background: var(--well); box-shadow: none; }
.slot.is-empty .slot-name { color: var(--text); font-weight: 400; }
.slot.is-low { box-shadow: inset 0 0 0 1px var(--waiting); }
.slot.is-low .slot-badge { background: var(--waiting-soft); color: var(--waiting); }
.slot.is-out, .slot.is-fault { box-shadow: inset 0 0 0 1px var(--problem); }
.slot.is-out .slot-badge, .slot.is-fault .slot-badge { background: var(--problem-soft); color: var(--problem); }
.slot.is-old .slot-badge { background: var(--waiting-soft); color: var(--waiting); }
.slot.is-old:not(.is-low):not(.is-out):not(.is-fault) { box-shadow: inset 0 0 0 1px var(--line); outline: 1.5px dashed var(--waiting); outline-offset: -1.5px; }
.slot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--text); justify-content: flex-start; }
.slot-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -8px; }
.slot-key.is-low { background: var(--waiting); } .slot-key.is-old { background: none; box-shadow: inset 0 0 0 1.5px var(--waiting); } .slot-key.is-out, .slot-key.is-fault { background: var(--problem); }
.toggles { display: grid; }
.toggle-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--dark); flex: none; }
.toggle-row > span { display: grid; gap: 2px; font-size: 15px; }
.toggle-row b { font-weight: 500; color: var(--text-strong); }
.toggle-row > span > span { font-size: 14px; color: var(--text); }
.picks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.picks li + li { border-top: 1px solid var(--line); }
.pick { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; cursor: pointer; }
.pick input { width: 18px; height: 18px; accent-color: var(--dark); }
.pick-text, .pick-bring { display: grid; gap: 2px; font-size: 15px; }
.pick-text b, .pick-bring b { font-weight: 500; color: var(--text-strong); }
.pick-text span, .pick-bring span { font-size: 13px; color: var(--text); }
.pick-bring { text-align: right; font-variant-numeric: tabular-nums; }
.picks li.is-done .pick-text b { text-decoration: line-through; color: var(--text); }
/* ---------- Support conversation ---------- */
.thread { display: grid; gap: 12px; padding: 20px; max-height: 60vh; overflow-y: auto; }
.msg { max-width: 72ch; display: grid; gap: 4px; justify-self: start; }
.msg.is-self { justify-self: end; }
.msg-who { font-size: 13px; color: var(--text); }
.msg.is-self .msg-who { text-align: right; }
.msg-body { white-space: pre-wrap; font-size: 15px; line-height: 1.5; padding: 10px 14px; border-radius: var(--r-lg); background: var(--well); color: var(--text-strong); }
.msg.is-self .msg-body { background: var(--dark); color: var(--dark-text); }
.reply { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.reply-closed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
.verify { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; flex-wrap: wrap; } .verify h2 { font-size: 17px; margin-bottom: 4px; }
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(480px, calc(100vw - 32px)); padding: 10px 16px; border-radius: var(--r-md); background: var(--dark); color: var(--dark-text); font-size: 15px; box-shadow: 0 8px 24px rgba(10, 13, 17, 0.24); }
.toast.is-problem { background: var(--problem); }
.card-padded { padding: 20px; display: grid; gap: 14px; align-content: start; }
.card-padded > h2, .card-title-row h2 { font-size: 17px; font-weight: 500; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label { font-size: 14px; font-weight: 500; color: var(--text-strong); }
fieldset.field { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
fieldset.field legend { font-size: 14px; font-weight: 500; color: var(--text-strong); margin-bottom: 4px; }
.disclosure-body { display: grid; gap: 12px; }
.row-check { font-size: 13px; color: var(--text); white-space: nowrap; }
.input-narrow { width: 76px; }
.row-text .hint, .row-text .row-title { display: block; }
.card-padded > .rows { margin: 0 -20px -20px; }
.cols-even > .money { min-height: 0; }
.section-title { font-size: 17px; font-weight: 500; margin-top: 8px; }
.seg [aria-selected="true"] { background: var(--surface); color: var(--text-strong); font-weight: 500; box-shadow: var(--shadow-card); }
.seg button { cursor: pointer; font: inherit; font-size: 14px; }
.tabset { display: grid; gap: 16px; }
.tabset > .seg { justify-self: start; max-width: 100%; overflow-x: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
select.input { appearance: auto; }
fieldset.field > .check { display: inline-flex; margin-right: 14px; }
.card-padded .card-head { padding: 0; min-height: 0; }
.card-padded > form { display: grid; gap: 14px; }
/* ---------- Shared names used by the Dashboard and Console sections ---------- */
.page-body { display: grid; gap: 16px; min-width: 0; }
.legacy-body { min-width: 0; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: 14px; }
.muted { color: var(--text); }
.strong { font-weight: 500; color: var(--text-strong); }
.h3 { font-size: 17px; font-weight: 500; }
.grow { flex: 1; min-width: 0; }
.block { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.callout { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.callout-err { background: var(--problem-soft); box-shadow: none; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.fig { background: var(--surface); padding: 16px 20px; display: grid; gap: 4px; align-content: start; }
.fig-label { font-size: 14px; color: var(--text); }
.fig-value { font-size: 24px; line-height: 1.15; letter-spacing: var(--track-inline); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.fig + .fig .fig-value { font-size: 20px; line-height: 1.3; }
.fig-sub { font-size: 13px; color: var(--text); }
.card.flush { padding: 0; }
.pd-form, .pd-sheet-form, .pd-new { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.pd-form > label, .pd-sheet-form > label, .pd-new > label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.pd-form > .btn, .pd-sheet-form > .btn, .pd-new > .btn, .pd-form > button, .pd-sheet-form > button, .pd-new > button { justify-self: start; width: auto; }
.card > .pd-form, .card > .pd-sheet-form, .card > .pd-new { padding: 0 20px 20px; }
.pd-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.pd-period > label { display: flex; align-items: center; gap: 8px; }
.pd-period > label > span { font-size: 14px; color: var(--text); font-weight: 400; }
.pd-period .input { width: auto; }
.pd-code { max-width: 100%; overflow-x: auto; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--well); font-size: 13px; line-height: 1.5; }
.pd-secret { word-break: break-all; }
.pd-person { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-person > .grow { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.pd-person > .grow > .row-title { font-weight: 500; }
.pd-person .pd-inline select { width: auto; }
.pd-roles { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 4px 0 0; font-size: 14px; }
.pd-roles > div { display: contents; }
.pd-roles dt { color: var(--text-strong); font-weight: 500; }
.pd-roles dd { margin: 0; color: var(--text); }
.pd-form fieldset, .pd-sheet-form fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pd-form legend, .pd-sheet-form legend { font-size: 14px; font-weight: 500; color: var(--text-strong); padding: 0; margin-bottom: 8px; width: 100%; }
.pd-form fieldset label, .pd-sheet-form fieldset label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 400; color: var(--text-strong); }
.pd-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.pd-wide { grid-column: 1 / -1; }
.crumbs { font-size: 14px; color: var(--text); display: flex; gap: 6px; }
.crumbs a { color: var(--text); }
.atts { display: grid; margin: 0 -20px -20px; }
.atts > .row { border-top: 1px solid var(--line); }
.card-padded > .card-body { padding: 0; }
.row-lead .initials { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.pd-filters { padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.pd-filters .pd-filter-q { grid-column: 1 / -1; }
.pd-filters label.field > span, .pd-filters .field > span:first-child { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.pd-filter-actions { display: flex; gap: 8px; }
.pd-filters details > summary { cursor: pointer; font-size: 14px; color: var(--text-strong); }

/* ---------- Sign-in, sign-up and invitations ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--canvas); }
.auth-art { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 40px 0 0 48px; overflow: hidden; background: var(--dark); color: var(--dark-text); }
.auth-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 70%, rgba(0, 209, 167, 0.18), transparent 65%); pointer-events: none; }
.auth-art .logo { height: 28px; width: auto; filter: brightness(0) invert(1); align-self: flex-start; position: relative; z-index: 1; }
.auth-pitch { display: grid; gap: 20px; padding-right: 48px; position: relative; z-index: 1; }
.auth-title { font-size: 44px; line-height: 1.04; letter-spacing: -0.035em; max-width: 13ch; font-weight: 400; margin: 0; color: var(--dark-text); }
.auth-lede { margin: 0; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--dark-muted); }
.auth-card, .auth-main { display: grid; place-items: center; padding: 48px max(24px, 6vw); }
.auth-card > .logo { display: none; }
.auth-card > .card { width: 100%; max-width: 380px; background: none; box-shadow: none; border-radius: 0; display: grid; }
.auth-card h1, .auth-form h1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin: 0; color: var(--text-strong); }
.auth-sub, .auth-lead { margin: 8px 0 28px; font-size: 16px; color: var(--text); }
.auth-form { display: grid; gap: 16px; width: 100%; max-width: 380px; }
.auth-form .btn.full { margin-top: 4px; height: 46px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-link, .auth-switch a, .auth-alt a { color: var(--text-strong); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; font-size: 14px; }
.auth-switch { margin-top: 20px; font-size: 15px; color: var(--text); text-align: center; }
.auth-switch a { font-size: 15px; }
.auth-alt { display: flex; gap: 16px; justify-content: center; margin-top: 12px; }
.auth-mobile-logo { display: none; }
.field-error:empty { display: none; }
.field-error { font-size: 13px; color: var(--problem); }
.rule.is-unmet { color: var(--problem); } .rule.is-met { color: var(--good); }
.ts-stage { position: relative; z-index: 1; flex: 1; min-height: 340px; overflow: hidden; }
.ts-window { position: absolute; left: 64px; top: 8px; width: 760px; height: 720px; border-radius: 12px 0 0 0; background: #f4f5f1; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; color: var(--text-strong); }
.ts-chrome { height: 38px; display: flex; align-items: center; padding-left: 132px; background: #fff; border-bottom: 1px solid #e3e6df; }
.ts-url { font-size: 13px; color: #5d635e; background: #f4f5f1; padding: 3px 14px; border-radius: 6px; }
.ts-body { display: grid; grid-template-columns: 120px 340px 1fr; height: 100%; }
.ts-aside { display: grid; align-content: start; gap: 14px; padding: 18px 0; }
.ts-card { display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e3e6df; border-radius: 12px; }
.ts-side { display: grid; align-content: start; gap: 18px; padding: 20px 16px; background: #fff; border-right: 1px solid #e3e6df; }
.ts-main { display: grid; align-content: start; gap: 14px; padding: 18px 20px; }
.ts-bar { display: block; height: 6px; border-radius: 3px; background: #d9ddd5; }
.ts-w26{width:26px}.ts-w30{width:30px}.ts-w34{width:34px}.ts-w36{width:36px}.ts-w38{width:38px}.ts-w44{width:44px}.ts-w48{width:48px}.ts-w50{width:50px}.ts-w56{width:56px}.ts-w62{width:62px}.ts-w70{width:70px}
.ts-balance { display: grid; gap: 4px; padding: 18px 20px; border-radius: 12px; color: #fff; background: radial-gradient(120% 140% at 85% 20%, rgba(0, 209, 167, 0.28), transparent 55%), #0a0d11; }
.ts-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.ts-amount { font-size: 34px; line-height: 1.05; letter-spacing: var(--track-hero); font-variant-numeric: tabular-nums; }
.ts-head { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.ts-strong { font-size: 14px; font-weight: 500; }
.ts-list { list-style: none; margin: 0; padding: 0 14px; background: #fff; border: 1px solid #e3e6df; border-radius: 12px; }
.ts-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 44px; border-bottom: 1px solid #eef0ea; }
.ts-row:last-child { border-bottom: 0; }
.ts-dot { width: 22px; height: 22px; border-radius: 50%; background: #eef0ea; }
.ts-dot-on { background: #e7f9f4; box-shadow: inset 0 0 0 6px #e7f9f4, inset 0 0 0 11px #00d1a7; }
.ts-name { font-size: 14px; font-weight: 500; }
.ts-val { font-size: 14px; font-variant-numeric: tabular-nums; }
.ts-plus { color: #007f69; font-weight: 500; }
.ts-new { animation: ts-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes ts-in { from { opacity: 0; transform: translateY(-10px); } }
.ts-sale { position: absolute; left: 0; top: 196px; min-width: 168px; width: max-content; max-width: 224px; display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: #fff; color: var(--text-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateX(-12px); transition: opacity 300ms ease, transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.ts-sale.is-in { opacity: 1; transform: none; }
.ts-sale-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 6px; }
.ts-machine { font-size: 13px; color: #5d635e; }
.ts-status { font-size: 13px; font-weight: 500; padding: 2px 6px; border-radius: 5px; background: #fff7e7; color: #76551c; transition: background 200ms ease, color 200ms ease; }
.ts-sale.is-paid .ts-status { background: #e7f9f4; color: #007f69; }
.ts-sale-item { font-size: 14px; font-weight: 500; }
.ts-sale-amt { font-size: 24px; letter-spacing: var(--track-inline); font-variant-numeric: tabular-nums; }
.ts-sale-how { font-size: 13px; color: #5d635e; }
@media (prefers-reduced-motion: reduce) { .ts-sale, .ts-new { transition: none; animation: none; } }
/* Tablet and phone portrait: the form on top, the live product scene filling the bottom (Bryan, November 5),
   the way the landing page puts the phone under its headline. */
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .auth-art { order: 2; gap: 20px; padding: 32px 0 0 20px; min-height: 420px; }
  .auth-art > .logo { display: none; }
  .auth-pitch { padding-right: 20px; gap: 10px; }
  .auth-title { font-size: 30px; max-width: none; }
  .auth-lede { font-size: 16px; }
  .ts-stage { min-height: 300px; }
  .ts-window { left: 48px; }
  .ts-sale { top: 150px; }
  .auth-card, .auth-main { order: 1; place-items: start center; align-content: start; padding: 28px 20px 36px; }
  .auth-card > .logo, .auth-mobile-logo { display: flex; height: 28px; width: 100%; max-width: 380px; object-fit: contain; object-position: left center; margin-bottom: 28px; justify-self: center; }
  .auth-mobile-logo { gap: 8px; align-items: center; font-size: 16px; }
  .auth-mobile-logo img { height: 28px; width: 28px; }
  .auth-sub, .auth-lead { margin-bottom: 24px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .auth-art { padding: 44px 0 0 max(48px, calc((100% - 380px) / 2)); }
  .auth-pitch { padding-right: max(48px, calc((100% - 380px) / 2)); }
  .auth-title { font-size: 38px; }
  .ts-window { left: 64px; }
}

/* ---------- Welcome (first-run setup) ---------- */
.ob { display: grid; gap: 14px; width: min(100%, 520px); text-align: left; }
.ob > * { width: 100%; }
.ob-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ob-progress span { height: 4px; border-radius: 2px; background: var(--well); transition: background 200ms ease; }
.ob-progress span.is-on { background: var(--accent); }
.ob-count { font-size: 13px; color: var(--text); margin: 4px 0 0; }
.ob section { display: grid; gap: 18px; }
.ob-title { font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; margin: 0; color: var(--text-strong); }
.ob-title:focus { outline: none; }
.ob-lead { font-size: 16px; line-height: 1.5; color: var(--text); margin: -6px 0 0; }
.ob-form { display: grid; gap: 16px; }
.ob-types { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-types legend { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.ob-type { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ob-type:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--dark); }
.ob-type input { margin-top: 3px; accent-color: var(--dark); }
.ob-type > span { display: grid; gap: 2px; font-size: 15px; }
.ob-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-steps, .ob-how, .ob-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-steps li, .ob-check li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; color: var(--text); }
.ob-tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.ob-steps li.is-busy .ob-tick { border-color: var(--dark) transparent var(--dark) var(--dark); animation: ob-spin 0.9s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-steps li.is-done, .ob-check li.is-done { color: var(--text-strong); }
.ob-steps li.is-done .ob-tick, .ob-check li.is-done::before { background: var(--accent); border-color: var(--accent); }
.ob-check li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.ob-steps li.is-err .ob-tick { border-color: var(--problem); }
@media (prefers-reduced-motion: reduce) { .ob-steps li.is-busy .ob-tick { animation: none; } }
.ob-how li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.ob-num { width: 24px; height: 24px; border-radius: 50%; background: var(--well); display: grid; place-items: center; font-size: 14px; font-weight: 500; flex: none; }
.ob-how .mono { word-break: break-all; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.ob-alt { display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: var(--r-lg); background: var(--well); }
.ob-sale { font-size: 14px; color: var(--text); }
.ob-sale.is-done { color: var(--accent-ink); font-weight: 500; }
@media (max-width: 600px) { .ob-types, .ob-pair { grid-template-columns: 1fr; } .ob-title { font-size: 24px; } }
.center-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--canvas); }
.error-card { max-width: 440px; width: 100%; }
.error-card h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.error-logo { height: 24px; width: auto; justify-self: start; margin-bottom: 8px; }
.simple-top { position: static; justify-content: space-between; } .simple-main { max-width: 1040px; margin: 0 auto; padding: 24px; }
/* Sections that place fields and text straight inside a card get the card's inner margin. */
.legacy-body .card:not(.card-padded):not(.flush) > :not(.card-head):not(.rows):not(.table-wrap):not(.card-foot):not(.card-body):not(.atts):not(.facts):not(script):not(dialog) { margin-left: 20px; margin-right: 20px; }
.legacy-body .card:not(.card-padded):not(.flush) > :last-child:not(.rows):not(.table-wrap):not(.card-foot):not(.atts) { margin-bottom: 20px; }
.legacy-body .card:not(.card-padded) > form, .legacy-body .card:not(.card-padded) > .pd-form { display: grid; gap: 12px; }
.legacy-body .card > .facts { padding: 0 20px; }

/* ---------- Audit log (Console) ---------- */
.report-bar > .hint { margin: 0; }
.audit-entry > summary { list-style: none; cursor: pointer; }
.audit-entry > summary::-webkit-details-marker { display: none; }
.audit-entry > summary:hover { background: var(--hover); }
.audit-entry + .audit-entry { box-shadow: inset 0 1px 0 var(--line); }
.audit-entry .row-chevron { transition: transform 160ms var(--ease); }
.audit-entry[open] .row-chevron { transform: rotate(180deg); }
.audit-entry.is-linked > summary { background: var(--accent-soft); }
.audit-entry > .facts { padding: 0 20px 8px 68px; }
.audit-entry > .facts dd { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 14px; }
.audit-entry > .facts .iconbtn { width: 28px; height: 28px; }
@media (max-width: 640px) { .audit-entry > .facts { padding-left: 20px; } .audit-entry > .facts div { flex-wrap: wrap; } }
.fact-copy { display: inline-flex; align-items: center; gap: 4px; }
.fact-copy .iconbtn { width: 28px; height: 28px; }
.admin-release { display: grid; gap: 16px; }
.admin-release .facts dd { font-size: 14px; max-width: 60%; }
.admin-release .rows { margin: 0 -20px; }
.sheet-body progress { width: 100%; }
.campaign-terminals { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.campaign-terminals legend { margin-bottom: 8px; padding: 0; }
.campaign-business { display: grid; gap: 6px; }
.cregrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cre { overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
.cre[draggable="true"] { cursor: grab; }
.cre-media { position: relative; aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: center; background: var(--well); border: 0; padding: 12px; cursor: zoom-in; }
.cre-media img { width: 100%; height: 100%; object-fit: contain; }
.cre-ph { color: var(--icon-faint); }
.cre-ph svg { width: 28px; height: 28px; }
.cre-kind { position: absolute; left: 10px; bottom: 10px; font-size: 13px; font-weight: 500; padding: 2px 6px; border-radius: var(--r-sm); background: var(--dark); color: var(--dark-text); }
.cre-body { display: grid; gap: 4px; padding: 12px 14px; align-content: start; min-width: 0; }
.cre-title .row-title { min-width: 0; }
.cre-title .status { flex: none; }
.cre-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.cre-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.creative-order-controls { margin-left: auto; display: flex; }
.creative-order-controls .iconbtn { width: 28px; height: 28px; }
.creative-order-controls [data-move="up"] svg { transform: rotate(180deg); }
.report-bar .form-actions { flex: none; }
.content-check { background: transparent; cursor: pointer; }
.content-check input { width: 16px; height: 16px; accent-color: var(--dark); }

/* ---------- Phone fit ---------- */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .row:has(.row-end .input) { grid-template-columns: auto minmax(0, 1fr); }
  .row.no-lead:has(.row-end .input) { grid-template-columns: minmax(0, 1fr); }
  .row:has(.row-end .input) > .row-end { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
}
.card-padded, .stack, .stack-sm { grid-template-columns: minmax(0, 1fr); }
.card.flush:has(> table) { overflow-x: auto; }
@media (max-width: 640px) {
  .card-head { flex-wrap: wrap; }
  .facts div { gap: 12px; }
}

/* ---------- Sign-in rhythm: heading and its line read as one unit, then the form ---------- */
.auth-form .auth-step { display: grid; gap: 20px; }
.auth-form .auth-step[hidden] { display: none; }
.auth-form > h1 + .auth-lead, .auth-form > h1 + .auth-sub { margin: -8px 0 12px; }
.auth-form .field { gap: 8px; }
.auth-form > .error:empty { display: none; }
.auth-form > .btn.full { margin-top: 8px; }
.auth-card > .card { gap: 0; padding: 0; }
.auth-card h1 + .auth-sub { margin: 8px 0 28px; }
.auth-form { gap: 20px; }
.auth-form .label-row { margin: 0; }
.auth-switch { margin-top: 24px; }
.auth-title { max-width: none; }
.auth-title .auth-line { display: inline-block; white-space: nowrap; }

/* Search palette groups: a quiet label over each group; a record's detail sits after its name. */
.palette-group { margin: 8px 10px 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.palette-group:first-child { margin-top: 4px; }
.palette-list a { min-width: 0; }
.palette-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-list a small { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }

/* Inventory: one grid, products down and terminals across (November 5 review). */
.stock-grid-wrap { overflow-x: auto; max-width: 100%; }
#inventory-rows, #inventory-rows > .card { min-width: 0; max-width: 100%; }
.stock-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; }
.stock-grid th, .stock-grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.stock-grid tr:last-child th, .stock-grid tr:last-child td { border-bottom: 0; }
.stock-grid thead th { font-weight: 500; color: var(--text-strong); white-space: nowrap; vertical-align: bottom; padding-top: 12px; }
.stock-grid .sg-product { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; padding-left: 20px; min-width: 210px; }
.stock-grid tbody .sg-product { font-weight: 500; color: var(--text-strong); }
.sg-name { display: flex; align-items: center; gap: 10px; }
.sg-thumb { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--well); display: grid; place-items: center; overflow: hidden; flex: none; font-size: 13px; color: var(--text); }
.sg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sg-term { display: block; }
.sg-sub { display: block; font-size: 13px; font-weight: 400; color: var(--text); }
.sg-restock { margin-top: 4px; font: inherit; font-size: 13px; color: var(--accent-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.stock-cell { display: inline-flex; align-items: baseline; justify-content: center; min-width: 48px; height: 30px; padding: 0 8px; border-radius: var(--r-sm); border: 0; font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 30px; background: var(--well); color: var(--text-strong); }
.stock-cell small { font-size: 13px; font-weight: 400; color: var(--text); margin-left: 1px; }
button.stock-cell { cursor: pointer; transition: box-shadow 140ms var(--ease); }
button.stock-cell:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
button.stock-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stock-cell.is-out { background: var(--problem-soft); color: var(--problem); }
.stock-cell.is-low { background: var(--waiting-soft); color: var(--waiting); }
.stock-cell.is-ok { background: var(--good-soft); color: var(--good); }
.stock-cell.is-none, .stock-cell.is-paused { color: var(--text-faint); }
.stock-cell.is-empty { background: none; }
.stock-cell + .stock-cell { margin-left: 4px; }
.stock-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.stock-legend .stock-cell { min-width: 28px; height: 22px; line-height: 22px; font-size: 13px; margin-left: 6px; }
.stock-legend .stock-cell:first-child { margin-left: 0; }
.sg-hint { margin-left: auto; color: var(--text-faint); }
tr[hidden] { display: none; }

/* Invoice pay page (engine/invoices.ts): one narrow column, the amount first, then how to pay. */
.pay-body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.pay { max-width: 480px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-left, 0px)) 48px; display: grid; gap: 16px; }
.pay-from { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-strong); }
.pay-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 24px; display: grid; gap: 16px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-number { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-amount { margin: 0; font-size: 44px; line-height: 1; letter-spacing: var(--track-hero); color: var(--text-strong); font-weight: 400; }
.pay-due { margin: -8px 0 0; font-size: 15px; }
.pay-lines { display: grid; border-top: 1px solid var(--line); }
.pay-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-strong); }
.pay-qty { color: var(--text); }
.pay-total { font-weight: 500; border-bottom: 0; }
.pay-memo, .pay-note { margin: 0; font-size: 14px; color: var(--text); }
.pay-seg { justify-self: start; }
.pay-assets { display: grid; gap: 8px; }
.pay-asset { height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); font: inherit; font-size: 15px; font-weight: 500; color: var(--text-strong); text-align: left; cursor: pointer; }
.pay-asset:hover { background: var(--well); }
.pay-request { display: grid; gap: 12px; justify-items: center; text-align: center; }
.pay-qr { width: 220px; height: 220px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.pay-asset-line { margin: 0; font-size: 20px; font-weight: 500; color: var(--text-strong); }
.pay-wait { margin: 0; font-size: 14px; color: var(--waiting); }
.pay-rate { margin: 0; font-size: 14px; color: var(--text); }
@media (pointer: coarse) { .pay-open-hint { display: none; } }
.pay-error { margin: 0; font-size: 14px; color: var(--problem); }
.pay-error:empty { display: none; }
.pay-done { text-align: center; }
.pay-done-title { margin: 0; font-size: 22px; font-weight: 500; color: var(--good); }
.pay-foot { margin: 0; text-align: center; font-size: 13px; color: var(--text-faint); }
.field-trio { display: grid; grid-template-columns: minmax(0, 1fr) 64px 96px; gap: 8px; align-items: end; }
.field-trio .field label:empty { display: none; }
.check-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.price-line { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 6px 0; font-size: 15px; color: var(--text-strong); }

/* Pages outside the Portal frame: the host's page and the driver app (engine/hosts.ts, engine/driver.ts). */
.solo-body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.solo { max-width: 640px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.solo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 8px; }
.solo-from { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.solo-title { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: var(--text-strong); }

/* Driver app (engine/driver.ts). Big touch targets: it is used standing at a machine. */
.drv .btn.small { height: 40px; padding: 0 12px; }
.drv-tabs { justify-self: start; }
.drv-progress { height: 6px; border-radius: 3px; background: var(--well); overflow: hidden; }
.drv-progress span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 200ms var(--ease); }
.drv-stop { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.drv-stop .row-lead { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.drv-chev { font-size: 22px; color: var(--icon-faint); }
.drv-stop-name { margin: 0; font-size: 22px; color: var(--text-strong); }
.drv-slot .row-lead { font-size: 13px; font-weight: 500; color: var(--text-strong); }
.drv-slot { grid-template-columns: auto minmax(0, 1fr); }
.drv-slot .row-end { grid-column: 1 / -1; justify-content: flex-end; }
.drv-back { justify-self: start; }
.drv-note { margin: 0; text-align: center; color: var(--good); font-size: 15px; }
.drv-out { justify-self: center; }
.drv-form .row-actions { justify-content: flex-end; }
.drv-sheet { max-width: 420px; }
#drv-view { display: grid; gap: 12px; }
.drv .card-head h2 { color: var(--text-strong); }

/* ---------- Ask Terminuity ---------- */
.ask-form { display: flex; gap: 8px; }
.ask-form .input { flex: 1; min-width: 0; height: 46px; font-size: 16px; }
.ask-form .btn { height: 46px; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-thread { display: grid; gap: 12px; }
.ask-thread:empty { display: none; }
.ask-turn { display: grid; gap: 12px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.ask-q { margin: 0; font-weight: 500; color: var(--text-strong); }
.ask-a { display: grid; gap: 6px; }
.ask-a > p { margin: 0; line-height: 1.55; color: var(--text-strong); max-width: 72ch; }
.ask-a > .ask-li { padding-left: 16px; position: relative; }
.ask-a > .ask-li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: var(--icon); }
.ask-a > .ask-wait { color: var(--text); }
.ask-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ask-actions { margin: 6px -20px -18px; border-top: 1px solid var(--line); }
.ask-decide { display: inline-flex; gap: 8px; }
@media (max-width: 560px) { .ask-form .btn { padding: 0 14px; } }
.ask-actions .row-title, #ask-pending .row-title { white-space: normal; overflow: visible; text-overflow: clip; }
.report-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.report-groups > .card { margin: 0; }
.key-once { display: block; margin-top: 6px; word-break: break-all; font-size: 14px; }

/* ---------- Guided demo (engine/demo.ts) ---------- */
.gd-body { margin: 0; background: var(--canvas); color: var(--text-strong); font-family: var(--font); }
.gd { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.gd-rail { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--dark); color: var(--dark-text); overflow-y: auto; }
.gd-brand img { height: 25px; width: auto; filter: brightness(0) invert(1); display: block; }
.gd-who { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.gd-title { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; color: var(--dark-text); }
.gd-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.gd-progress-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--dark-raised); overflow: hidden; }
.gd-progress-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 500ms var(--ease); }
.gd-chapters { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.gd-chapters button { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--dark-muted); text-align: left; font: inherit; cursor: pointer; }
.gd-chapters button:hover { background: var(--dark-raised); }
.gd-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--dark-line, rgba(255,255,255,0.18)); color: var(--dark-muted); }
.gd-ch-text { display: grid; gap: 3px; min-width: 0; }
.gd-ch-text b { font-size: 15px; font-weight: 500; color: var(--dark-text); }
.gd-ch-text span { font-size: 12.5px; line-height: 1.4; display: none; }
.gd-chapters .is-active button { background: var(--dark-raised); }
.gd-chapters .is-active .gd-ch-text span { display: block; }
.gd-chapters .is-active .gd-mark { background: var(--dark-text); color: var(--dark); box-shadow: none; }
.gd-chapters .is-done .gd-mark { background: var(--accent); color: var(--dark); box-shadow: none; }
.gd-cta { margin-top: auto; display: grid; gap: 10px; padding-top: 16px; }
.gd-cta .btn.primary { background: var(--accent); color: var(--dark); justify-content: center; }
.gd-other { font-size: 14px; color: var(--dark-muted); text-align: center; text-decoration: none; }
.gd-other:hover { color: var(--dark-text); }
.gd-main { display: grid; align-content: center; gap: 14px; padding: 28px max(16px, 3vw); min-width: 0; }
.gd-tip-line { margin: 0; min-height: 44px; display: flex; align-items: flex-end; font-size: 16px; color: var(--text); max-width: 72ch; }
.gd-viewport { position: relative; width: 100%; max-width: 1040px; overflow: hidden; border-radius: 18px; }
.gd-viewport.is-narrow { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.gd-small-note { display: none; margin: 0; font-size: 12.5px; color: var(--text); }
.gd-stage { position: absolute; top: 0; left: 0; width: 1040px; height: 620px; transform-origin: 0 0; background: var(--canvas); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.gd-stage.gd-enter > * { animation: gd-rise 420ms var(--ease) both; }
@keyframes gd-rise { from { opacity: 0; transform: translateY(8px); } }
.gd-in { animation: gd-rise 380ms var(--ease) both; }
.gd-ring { position: absolute; z-index: 30; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(0, 209, 167, 0.2); pointer-events: none; animation: gd-breathe 1800ms ease-in-out infinite; }
@keyframes gd-breathe { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 11px rgba(0, 209, 167, 0.08); } }
.gd-tip { position: absolute; z-index: 31; width: 240px; padding: 10px 12px; border-radius: 10px; background: var(--dark); color: var(--dark-text); font-size: 14px; line-height: 1.4; box-shadow: var(--shadow-sheet); pointer-events: none; animation: gd-rise 260ms var(--ease) both; }
.gd-tip.is-above { transform: translateY(-100%); }
.gd-target { cursor: pointer; position: relative; z-index: 29; }
.gd-pressed { transform: scale(0.97); transition: transform 120ms; }
@media (prefers-reduced-motion: reduce) { .gd-ring, .gd-in, .gd-tip, .gd-stage.gd-enter > * { animation: none; } }
/* The product, drawn small */
.gd-app { display: grid; grid-template-columns: 150px minmax(0, 1fr); height: 100%; }
.gd-side { display: grid; align-content: start; gap: 14px; padding: 22px 18px; border-right: 1px solid var(--line); }
.gd-side-logo { height: 18px; width: auto; margin-bottom: 14px; }
.gd-side i { display: block; height: 7px; border-radius: 4px; background: var(--well); }
.gd-content { display: grid; align-content: start; gap: 14px; padding: 24px 28px; min-width: 0; overflow: hidden; }
.gd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gd-h1 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.gd-eyebrow { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.gd-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; }
.gd-split > .gd-app { grid-template-columns: minmax(0, 1fr); }
.gd-split > .gd-app .gd-side { display: none; }
.gd-split.gd-split-r { grid-template-columns: minmax(0, 1fr) 340px; }
.gd-split.gd-center { grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; }
.gd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.gd-vans { display: contents; }
.gd-cols.gd-cols-side { grid-template-columns: minmax(0, 1fr) 280px; }
.gd-side-card { display: grid; align-content: start; gap: 12px; padding: 20px; min-height: 200px; }
.gd-side-empty { font-size: 14px; color: var(--text); }
.gd-out { opacity: 0.25; transition: opacity 200ms; }
.gd-figure { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.gd-figure span { font-size: 14px; color: var(--text); }
.gd-figure b { font-size: 28px; font-weight: 400; letter-spacing: var(--track-figure); font-variant-numeric: tabular-nums; }
.gd-figure em { font-style: normal; font-size: 14px; color: var(--text); margin-left: auto; }
.gd-rule { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 15px; }
.gd-rule svg { width: 18px; height: 18px; color: var(--icon); flex: none; }
.gd-rule span:first-of-type { flex: 1; min-width: 0; }
.gd-rule b { font-weight: 500; margin-right: 6px; }
.gd-sent { border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
/* Terminal */
.gd-tablet, .gd-kiosk { display: grid; place-items: center; padding: 28px; background: var(--dark); }
.gd-kiosk { height: 100%; }
.gd-screen { width: 244px; min-height: 420px; display: grid; align-content: start; gap: 16px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 10px #15191f; }
.gd-screen.gd-big { width: 560px; min-height: 480px; padding: 24px; gap: 18px; }
.gd-term-head { font-size: 13px; color: var(--text); }
.gd-term-item { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--well); }
.gd-term-item b { font-size: 20px; font-weight: 500; }
.gd-term-item span { font-size: 14px; color: var(--text); }
.gd-term-item .gd-term-price { font-size: 26px; color: var(--text-strong); margin-top: 6px; font-variant-numeric: tabular-nums; }
.gd-term-pay .btn { width: 100%; justify-content: center; height: 48px; white-space: normal; line-height: 1.2; }
.gd-term-ok { display: grid; justify-items: center; gap: 6px; padding: 26px 0; text-align: center; }
.gd-term-ok svg { width: 44px; height: 44px; color: var(--good); }
.gd-term-ok b { font-size: 22px; font-weight: 500; }
.gd-term-ok span { font-size: 14px; color: var(--text); }
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gd-tile { display: grid; gap: 6px; padding: 18px; border: 0; border-radius: 14px; background: var(--well); text-align: left; font: inherit; color: inherit; }
.gd-tile b { font-size: 17px; font-weight: 500; }
.gd-tile span { font-size: 20px; font-variant-numeric: tabular-nums; }
.gd-tile.is-picked { box-shadow: inset 0 0 0 2px var(--text-strong); }
.gd-cart { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--well); font-weight: 500; }
.gd-ways, .gd-assets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gd-way { display: grid; gap: 4px; padding: 18px; border: 0; border-radius: 14px; background: var(--well); text-align: left; font: inherit; color: inherit; }
.gd-way svg { width: 20px; height: 20px; color: var(--icon); margin-bottom: 4px; }
.gd-way b { font-size: 17px; font-weight: 500; }
.gd-way span { font-size: 14px; color: var(--text); }
.gd-scan { display: flex; align-items: center; gap: 22px; }
.gd-scan > div:last-child { display: grid; gap: 6px; }
.gd-scan b { font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }
.gd-scan span { font-size: 14px; color: var(--text); }
.gd-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 112px; height: 112px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); justify-self: center; }
.gd-qr i { border-radius: 2px; background: var(--well); }
.gd-qr i.on { background: var(--text-strong); }
.gd-qr.gd-qr-big { grid-template-columns: repeat(9, 1fr); width: 168px; height: 168px; }
/* Map and phone */
.gd-mapwrap { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.gd-map { width: 100%; height: 100%; background: #eef1ec; }
.gd-streets line { stroke: #fff; stroke-width: 9; }
.gd-route { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.gd-pin circle { fill: #fff; stroke: var(--text-strong); stroke-width: 2.5; }
.gd-pin text { font-size: 13px; font-weight: 600; text-anchor: middle; fill: var(--text-strong); font-family: var(--font); }
.gd-pin.is-done circle { fill: var(--good); stroke: var(--good); }
.gd-pin.is-done text { fill: #fff; }
.gd-pin.is-arrived circle { stroke: var(--accent); stroke-width: 4; }
.gd-van circle { fill: var(--dark); stroke: #fff; stroke-width: 3; }
.gd-maplegend { position: absolute; left: 20px; top: 20px; width: 330px; }
.gd-phone { display: grid; place-items: center; padding: 20px; background: var(--canvas); }
.gd-phone-screen { width: 250px; min-height: 470px; display: grid; align-content: start; gap: 12px; padding: 26px 18px 18px; border-radius: 34px; background: #fff; box-shadow: 0 0 0 9px #15191f, var(--shadow-sheet); }
.gd-ph-from { margin: 0; font-size: 13px; color: var(--text); }
.gd-ph-title { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.gd-ph-sub { font-size: 12.5px; color: var(--text); }
.gd-ph-card { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--well); }
.gd-ph-card b { font-size: 16px; font-weight: 500; }
.gd-ph-card span { font-size: 14px; color: var(--text); }
.gd-ph-count { display: flex; align-items: baseline; gap: 6px; margin: 6px 0; }
.gd-ph-count span:first-child { font-size: 34px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gd-ph-list { display: grid; gap: 2px; margin-top: 4px; }
.gd-ph-list div { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; border-bottom: 1px solid var(--line); }
.gd-ph-list svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
.gd-ph-list .is-done { color: var(--text); }
.gd-ph-list .is-done svg { color: var(--good); }
.gd-ph-sync { margin: 0; font-size: 13px; color: var(--text); text-align: center; }
.gd-ph-sync.is-good { color: var(--good); font-weight: 500; }
.gd-phone .btn.full { width: 100%; justify-content: center; }
.gd-points { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--well); }
.gd-points b { font-size: 22px; font-weight: 500; color: var(--good); font-variant-numeric: tabular-nums; }
.gd-points span { font-size: 14px; color: var(--text); }
.gd-pass { display: grid; gap: 6px; width: 300px; padding: 22px; border-radius: 18px; background: var(--dark); color: var(--dark-text); box-shadow: var(--shadow-sheet); }
.gd-pass span { font-size: 13px; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }
.gd-pass b { font-size: 30px; font-weight: 400; }
.gd-pass em { font-style: normal; font-size: 14px; color: var(--dark-muted); }
/* Processor */
.gd-sheet, .gd-detail { position: absolute; right: 24px; top: 24px; bottom: 24px; width: 340px; display: grid; align-content: start; gap: 14px; padding: 22px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-sheet); z-index: 5; }
.gd-sheet label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.gd-sheet-title { font-size: 20px; font-weight: 500; }
.gd-timeline { margin: 0; padding: 0 0 0 18px; display: grid; gap: 10px; font-size: 15px; }
.gd-timeline li::marker { color: var(--good); }
.gd-toggle { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--well-strong, #d8dcd4); position: relative; transition: background 200ms; }
.gd-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 220ms var(--ease); }
.gd-toggle.is-on { background: var(--good); }
.gd-toggle.is-on i { transform: translateX(18px); }
.gd-mini { display: grid; grid-template-columns: 130px minmax(0, 1fr); height: 300px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.gd-mini-side { display: grid; align-content: start; gap: 12px; padding: 18px 14px; border-right: 1px solid var(--line); background: var(--canvas); }
.gd-mini-side i { display: block; height: 6px; border-radius: 3px; background: var(--well); }
.gd-mini-brand { height: 22px; margin-bottom: 10px; display: flex; align-items: center; transition: opacity 200ms; }
.gd-mini-brand img { height: 16px; width: auto; }
.gd-mini-brand.gd-swap { opacity: 0; }
.gd-label-mark { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #1d4ed8; }
.gd-mini-main { display: grid; align-content: start; gap: 8px; padding: 22px; }
.gd-mini-title { font-size: 20px; font-weight: 500; }
.gd-mini-money { margin-top: 6px; padding: 18px; border-radius: 14px; background: var(--dark); color: var(--dark-text); font-size: 28px; }
.gd-mini-foot { margin-top: auto; font-size: 13px; color: var(--text); }
/* The list of tours */
.gd-index { max-width: 1040px; margin: 0 auto; padding: 56px max(16px, 4vw); display: grid; gap: 32px; }
.gd-index-head { display: grid; gap: 10px; }
.gd-index-head img { height: 30px; width: auto; margin-bottom: 18px; }
.gd-index-head h1 { margin: 0; font-size: 40px; font-weight: 500; letter-spacing: -0.03em; }
.gd-index-head p { margin: 0; font-size: 17px; color: var(--text); }
.gd-index-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gd-index-card { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: box-shadow 160ms; }
.gd-index-card:hover { box-shadow: var(--shadow-sheet); }
.gd-index-card b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.gd-index-card > span { font-size: 15px; line-height: 1.5; color: var(--text); }
.gd-index-who { font-size: 13px !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--good) !important; }
.gd-index-meta { margin-top: 8px; font-size: 14px !important; }
@media (max-width: 900px) {
  .gd { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .gd-small-note { display: block; }
  .gd-rail { position: static; height: auto; gap: 10px; padding: 20px max(16px, env(safe-area-inset-left)); }
  .gd-who { margin-top: 10px; }
  .gd-title { font-size: 22px; }
  .gd-chapters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .gd-chapters li { flex: none; }
  .gd-chapters button { grid-template-columns: 24px auto; padding: 8px 10px; }
  .gd-chapters .gd-ch-text span { display: none !important; }
  .gd-chapters li:not(.is-active) .gd-ch-text { display: none; }
  .gd-cta { margin-top: 4px; grid-template-columns: 1fr auto; align-items: center; padding-top: 0; }
  .gd-main { padding: 16px max(12px, env(safe-area-inset-left)); align-content: start; }
  .gd-tip-line { font-size: 15px; }
  .gd-viewport, .gd-stage { border-radius: 12px; }
}

.drop-preview:not([hidden]) { width: 36px; height: 64px; object-fit: cover; background: #000; }
.drop.is-wide .drop-name { color: var(--waiting); }
.pop-notices .pop-head { display: flex; align-items: center; gap: 8px; }
.pop-notices .pop-head .more { min-height: 0; padding: 0; font-size: 14px; color: var(--accent-ink); }
.pop-notices .pop-head .more:hover { background: none; text-decoration: underline; }

/* ---------- November 7 kit (design.md, Components and copy) ---------- */
/* Amounts: cents small and raised; money in Mint ink with ↗, money out problem ink with ↘. */
.amt { font-variant-numeric: tabular-nums; letter-spacing: var(--track-inline); white-space: nowrap; display: inline-flex; align-items: baseline; }
.amt .cents { font-size: 0.62em; position: relative; top: -0.52em; letter-spacing: 0; margin-left: 0.04em; }
.amt.is-big { font-size: 34px; letter-spacing: var(--track-hero); line-height: 1.1; }
.amt.is-in { color: var(--accent-ink); }
.amt.is-out { color: var(--problem); }
.amt-arrow { width: 12px; height: 12px; margin-right: 2px; align-self: center; stroke-width: 2; }
/* Marks: every way to pay shows its real mark. */
.mark { display: inline-block; vertical-align: middle; flex: none; object-fit: contain; }
.mark.is-card { border-radius: 3px; box-shadow: 0 0 0 1px var(--line); background: #fff; padding: 1px 2px; }
.mark.is-unknown { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--well); color: var(--text); }
.method { display: inline-flex; align-items: center; gap: 8px; }
/* Status with evidence. */
.evidence { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; color: var(--text-strong); }
.evidence .dot { position: static; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); box-shadow: none; }
.evidence .dot.is-good { background: #00b893; } .evidence .dot.is-waiting { background: #d08a00; } .evidence .dot.is-problem { background: #d9534f; }
.evidence-fact { display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
a.evidence-fact:hover { color: var(--accent-ink); }
.evidence-fact svg { width: 12px; height: 12px; }
/* Table (Mercury 05). */
.dt-wrap { display: grid; gap: 12px; }
.dt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 320px; }
.dt-search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
.dt-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); outline: none; }
.dt-search input:focus { box-shadow: 0 0 0 1px var(--text-strong); }
.dt-select { position: relative; display: inline-flex; align-items: center; }
.dt-select select { appearance: none; height: 34px; padding: 0 30px 0 12px; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text-strong); cursor: pointer; }
.dt-select select:hover { box-shadow: 0 0 0 1px rgba(10, 13, 17, 0.22); }
.dt-select svg { position: absolute; right: 10px; width: 14px; height: 14px; color: var(--text); pointer-events: none; }
.dt-export { margin-left: auto; height: 34px; }
.dt-summary { display: flex; flex-wrap: wrap; gap: 32px; padding: 2px 4px; }
.dt-summary div { display: grid; gap: 2px; }
.dt-summary span { font-size: 13px; color: var(--text-faint); }
.dt-summary b { font-weight: 500; font-size: 17px; }
/* An amount in the summary keeps the figure's size and ink (the label rule above is for the label only). */
.dt-summary b .amt { font-size: inherit; color: var(--text-strong); }
.dt-summary b .amt .cents { font-size: 0.62em; color: inherit; }
.dt-card { overflow: hidden; }
.table.dt th { font-weight: 400; font-size: 13px; color: var(--text-faint); height: 36px; }
.table.dt td { height: 44px; padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
.table.dt tbody tr[data-panel-open], .table.dt tbody tr[data-row-href] { cursor: pointer; transition: background 140ms var(--ease); }
.table.dt tbody tr[data-panel-open]:hover, .table.dt tbody tr[data-row-href]:hover, .table.dt tbody tr.is-selected { background: var(--well); }
.dt-count { padding: 12px 20px; font-size: 14px; color: var(--text-faint); border-top: 1px solid var(--line); }
/* Side panel (Mercury 06). */
dialog.panel { margin: 64px 16px 16px auto; height: calc(100% - 80px); max-height: none; width: min(400px, calc(100% - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--text-strong); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 40px rgba(10, 13, 17, 0.18); }
dialog.panel[open] { display: flex; flex-direction: column; animation: sheet-in 200ms var(--ease); }
dialog.panel::backdrop { background: transparent; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; }
.panel-head h2 { font-size: 15px; color: var(--text); font-weight: 400; }
.panel-body { flex: 1; overflow-y: auto; padding: 0 20px 20px; display: grid; gap: 18px; align-content: start; }
.panel-figure { display: grid; gap: 4px; }
.panel-figure .amt { font-size: 28px; letter-spacing: var(--track-figure); }
.panel-figure > span { font-size: 14px; color: var(--text); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; }
.tl li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.tl li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 1px; background: var(--line-strong); }
.tl-dot { width: 9px; height: 9px; border-radius: 50%; margin: 4px 2px 0; background: #fff; box-shadow: inset 0 0 0 1.5px #c9ccc6; }
.tl li.is-done .tl-dot { background: var(--accent); box-shadow: none; }
.tl b { display: block; font-weight: 500; font-size: 14px; }
.tl span, .tl a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--text); margin-right: 8px; }
.tl a:hover { color: var(--accent-ink); }
.tl a svg { width: 11px; height: 11px; }
.panel-sec h3 { font-size: 13px; font-weight: 400; color: var(--text-faint); margin-bottom: 4px; }
.panel-facts { margin: 0; display: grid; }
.panel-facts div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.panel-facts dt { color: var(--text); }
.panel-facts dd { margin: 0; text-align: right; color: var(--text-strong); min-width: 0; }
.panel-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }
/* Settings row (Mercury 12, 17). */
.set-list { display: grid; }
.set-row { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.set-k { display: grid; gap: 4px; }
.set-k span { font-size: 15px; }
.set-k small { font-size: 14px; color: var(--text); }
.set-v { min-width: 0; color: var(--text-strong); }
.set-edit { border: 0; background: none; padding: 0; color: var(--accent-ink); font-size: 15px; white-space: nowrap; }
.set-edit:hover { text-decoration: underline; }
/* Empty state that sells (Mercury 04). */
.card.sell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; padding: 24px; }
.sell-text h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 12px; }
.sell-text ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.sell-text li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
.sell-text li svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.sell-actions { display: flex; gap: 8px; }
.sell-pic { height: 150px; border-radius: var(--r-lg); background: radial-gradient(90% 80% at 70% 20%, rgba(0, 209, 167, 0.25), rgba(0, 209, 167, 0) 60%), var(--well); position: relative; overflow: hidden; }
.sell-pic-card { position: absolute; left: 40px; top: 28px; right: -30px; bottom: -30px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-card); padding: 14px; display: grid; gap: 8px; align-content: start; }
.sell-pic-card i { display: block; height: 8px; border-radius: 4px; background: var(--well); }
.sell-pic-card i:first-child { width: 40%; background: var(--accent-soft); }
/* Focused flow (Mercury 10, 11, 22). */
.flow { min-height: 100vh; background: var(--canvas); }
.flow-top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 24px; }
.flow-biz { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); }
.flow-biz img { height: 18px; width: auto; }
.flow-grid { display: grid; grid-template-columns: 220px minmax(0, 560px); gap: 48px; justify-content: center; padding: 40px 24px 80px; }
.flow-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; border-left: 2px solid var(--line-strong); }
.flow-rail li { display: flex; align-items: center; gap: 6px; padding-left: 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; color: var(--text-faint); }
.flow-rail li.is-current { color: var(--text-strong); border-left-color: var(--text-strong); }
.flow-rail li.is-done { color: var(--text); }
.flow-rail svg { width: 12px; height: 12px; color: var(--accent-ink); }
.flow-main { display: grid; gap: 16px; align-content: start; }
.flow-main h1 { font-size: 24px; letter-spacing: -0.02em; }
.flow-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; }
@media (max-width: 900px) {
  dialog.panel { margin: auto 0 0; width: 100%; height: auto; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.panel::backdrop { background: rgba(10, 13, 17, 0.32); }
  .set-row { grid-template-columns: minmax(0, 1fr) auto; }
  .set-row .set-v { grid-column: 1; grid-row: 2; }
  .set-row .set-edit { grid-column: 2; grid-row: 1 / span 2; }
  .card.sell { grid-template-columns: minmax(0, 1fr); }
  .sell-pic { display: none; }
  .flow-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 16px 48px; }
  .flow-rail { display: flex; gap: 12px; border-left: 0; overflow-x: auto; }
  .flow-rail li { padding-left: 0; border-left: 0; white-space: nowrap; }
  .table.dt .wide-only { display: none; }
  .dt-export { margin-left: 0; }
}
dialog.panel:not(:modal) { position: fixed; inset: 64px 16px 16px auto; margin: 0; height: auto; z-index: 30; }
/* On a phone every panel is a bottom sheet across the full width, opened modal or not. */
@media (max-width: 900px) { dialog.panel, dialog.sheet { max-width: none; } dialog.panel:not(:modal) { inset: auto 0 0 0; width: 100%; max-height: 88vh; } }

/* ---------- Portal Home (reset package 2, Main.dc.html) ---------- */
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.home-top + .cols-even, .main > .cols-even { gap: 16px; }
.money.home-money { gap: 6px; padding: 18px 20px 12px; align-content: start; background: radial-gradient(120% 90% at 100% 0%, rgba(0, 209, 167, 0.22), rgba(0, 209, 167, 0) 55%), linear-gradient(180deg, #0f1418, var(--dark)); }
.home-money-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--dark-muted); }
.instant { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: rgba(0, 209, 167, 0.16); color: var(--accent); font-size: 13px; font-weight: 500; }
.instant svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.home-available { font-size: 40px; line-height: 1.1; }
.balance-card .home-available { font-size: 44px; }
.home-available .amt { letter-spacing: var(--track-hero); }
.home-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 14px; color: var(--dark-muted); font-variant-numeric: tabular-nums; }
.home-flow .in { color: var(--accent); margin-right: 12px; }
.home-flow .out { color: #ff8a80; }
.home-chart { position: relative; height: 120px; margin-top: 6px; cursor: crosshair; touch-action: pan-y; }
.home-chart svg { width: 100%; height: 100%; display: block; }
.home-scrub-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.home-scrub-tip { position: absolute; top: -4px; transform: translateX(-50%); padding: 3px 8px; border-radius: var(--r-sm); background: var(--dark-raised); box-shadow: 0 0 0 1px var(--dark-line); color: var(--dark-text); font-size: 12px; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.home-axis { display: flex; justify-content: space-between; color: #6f736e; font-size: 13px; padding: 2px 2px 0; }
.home-circles { display: none; }
.home-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.home-split-cell { padding: 12px 20px 16px; display: grid; gap: 4px; }
.home-split-cell + .home-split-cell { border-left: 1px solid var(--line); }
.home-split-cell p { font-size: 22px; font-weight: 500; }
.home-split-meta { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text); margin-top: 2px; }
.home-split-meta span { margin-left: 4px; }
.home-recent { display: grid; gap: 0; }
.home-recent > .card-head { padding: 4px 4px 10px; }
.home-recent > .card-head h2 { font-size: 17px; }
@media (max-width: 900px) {
  .home-actions { display: none; }
  .home-top { grid-template-columns: minmax(0, 1fr); }
  .money.home-money { padding: 16px 16px 14px; }
  .home-chart { height: 90px; }
  .home-circles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; text-align: center; font-size: 13px; color: var(--dark-muted); }
  .home-circle { display: grid; justify-items: center; gap: 6px; }
  .home-circle span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background 140ms var(--ease); }
  .home-circle.is-first span { background: var(--accent); color: var(--dark); }
  .home-circle:active span { background: rgba(255, 255, 255, 0.18); }
  .home-split-cell { padding: 12px 16px 14px; }
}
.table.dt td { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .table.dt td { max-width: 200px; } }

/* ---------- Balance and the money flows (reset package 3) ---------- */
.balance-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dark-line); }
.balance-figs div { display: grid; gap: 2px; padding: 0 16px; border-left: 1px solid var(--dark-line); }
.balance-figs div:first-child { padding-left: 0; border-left: 0; }
.balance-figs small { font-size: 13px; color: var(--dark-muted); }
.balance-figs span { font-size: 13px; color: var(--dark-muted); }
.balance-figs b { font-weight: 500; font-size: 20px; }
.balance-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.money.balance-card { padding-bottom: 18px; }
.balance-chart { display: grid; gap: 8px; }
.home-chart.is-light .home-scrub-line { background: var(--line-strong); }
.home-chart.is-light .home-scrub-tip { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-pop); }
.home-chart.is-light + .home-axis { color: var(--text-faint); }
.balance-lower { align-items: start; }
.card-facts { padding: 0 20px 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: 0; }
.receive { display: grid; gap: 12px; text-align: center; min-width: 0; }
.receive .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
.receive-qr { margin: 0 auto; }
.receive-qr { width: 220px; height: 220px; border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.receive-address { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); text-align: left; }
.receive-address .mono { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.flow-card { padding: 20px; display: grid; gap: 14px; }
.flow-figure { font-size: 34px; line-height: 1.1; }
.flow-link { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.bank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bank-tile { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 15px; transition: box-shadow 140ms var(--ease); }
.bank-tile:hover { box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(10, 13, 17, 0.06); }
.bank-tile .avatar { width: 26px; height: 26px; }
.pick-list { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.pick-row:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--text-strong); }
.pick-row span { display: grid; gap: 2px; }
.pick-row small { font-size: 14px; color: var(--text); }
.flow-card .set-row { grid-template-columns: 180px minmax(0, 1fr) auto; padding: 12px 0; }
@media (max-width: 900px) {
  .balance-acts { display: none; }
  .balance-figs { gap: 18px; }
  .bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-card .set-row { grid-template-columns: minmax(0, 1fr) auto; }
}
.row-lead .mark { max-width: 22px; max-height: 16px; }
.row-lead .mark.is-card { max-width: 24px; padding: 1px; }
button.home-circle { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pick-row input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--text-strong); box-shadow: none; }
.pick-row > span { flex: 1; min-width: 0; }

/* ---------- Sales (reset package 4) ---------- */
.views { display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.views a { padding: 6px 0 10px; color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; }
.views a:hover { color: var(--text-strong); }
.views a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.panel-refund { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.panel-refund .btn { justify-self: start; }
.dt-filters, .dt-phone { display: none; }
@media (max-width: 900px) {
  .dt-controls .dt-select, .dt-controls .dt-export { display: none; }
  .dt-filters { display: inline-flex; height: 34px; }
  .dt-search { max-width: none; }
  .dt-wide { display: none; }
  .dt-phone { display: block; }
  .dt-sheet .dt-select, .dt-sheet .dt-select select { width: 100%; }
}
.dt-select-full, .dt-select-full select { width: 100%; }
.set-sub { display: block; font-size: 13px; color: var(--text); margin-top: 2px; }

/* ---------- Tasks and Ask AI (reset package 5) ---------- */
.seg-nav { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: #e9ebe6; }
.seg-nav a { height: 28px; line-height: 28px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--text); }
.seg-nav a:hover { color: var(--text-strong); }
.seg-nav a[aria-current="page"] { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 2px rgba(10, 13, 17, 0.08); }
.ask-hero { padding: 40px 0 4px; text-align: center; }
.ask-hero h1 { font-size: 24px; letter-spacing: -0.02em; }
.ask-form { max-width: 680px; width: 100%; margin: 0 auto; }
.ask-form .input { border-radius: var(--r-lg); }
.ask-examples { justify-content: center; max-width: 760px; margin: 0 auto; }
.ask-examples .btn { font-weight: 400; background: var(--well); box-shadow: none; }
.ask-examples .btn:hover { background: var(--hover-chip); }
.ask-thread { max-width: 760px; width: 100%; margin: 0 auto; }
.idea-decide { display: flex; gap: 6px; }
@media (max-width: 900px) { .ask-hero { padding-top: 16px; } .idea-decide { flex-wrap: wrap; justify-content: flex-end; } }
.dt-thumb { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; background: var(--well); display: grid; place-items: center; font-size: 13px; color: var(--text); }
.table.dt td:first-child:has(.dt-thumb) { width: 48px; padding-right: 0; }
.badge-good, .badge-neutral { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; }
.badge-good { background: var(--accent-soft); color: var(--accent-ink); }
.badge-neutral { background: var(--well); color: var(--text); }
/* A guide inside a focused flow: the rail already shows the steps. */
.flow-main .guide-wrap { max-width: none; margin: 0; }
.flow-main .guide-progress, .flow-main .guide-count { display: none; }
.flow-main .guide { padding: 24px; }

.dt-thumb { position: relative; overflow: hidden; color: var(--text); font-weight: 500; }
.dt-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--well); }
.dt-thumb img { background: transparent; }
@media (max-width: 1180px) { .table.dt th, .table.dt td { padding-left: 12px; padding-right: 12px; font-size: 14px; } .table.dt td { max-width: 200px; } }
/* A record sheet opened as the side panel over its list (Mercury 06). */
@media (min-width: 901px) {
  dialog.sheet.as-panel:not(:modal) { position: fixed; inset: 64px 16px 16px auto; margin: 0; height: auto; max-height: none; width: min(400px, calc(100% - 32px)); z-index: 30; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 40px rgba(10, 13, 17, 0.18); }
}

.stock-cell.is-storage { background: var(--well); color: var(--text-strong); }
.sg-storage { border-left: 1px solid var(--line); }

.cell-sub { display: block; font-size: 13px; color: var(--text); margin-top: 2px; }

.ph-note { margin-right: 4px; white-space: nowrap; }
/* Routes: a stop's truck choice and Earlier show on hover or focus; the sales at stake always shows. */
@media (hover: hover) and (min-width: 901px) {
  .route-stops .row-end form { opacity: 0; transition: opacity 140ms var(--ease); }
  .route-stops .row:hover .row-end form, .route-stops .row:focus-within .row-end form { opacity: 1; }
}

.panel-name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.panel-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Storage stays in view while the terminal columns scroll (tech-lead review 22). */
.stock-grid .sg-storage { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--line); }

/* Accounting documents: the selection bar shows once something is ticked (Mercury 29). */
.doc-list { display: grid; gap: 12px; }
.doc-list .table.dt td:first-child { width: 36px; }
.doc-bar { display: none; position: sticky; bottom: 16px; z-index: 5; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: var(--r-lg); background: var(--dark); color: var(--dark-text); box-shadow: 0 12px 32px rgba(10, 13, 17, 0.2); }
.doc-list.has-selection .doc-bar { display: flex; }
.doc-bar .btn.primary { background: var(--accent); color: var(--dark); }

/* Payment links (reset package 7): the panel's link row, payments received, the Done step, the pay page's payer fields. */
.views-sub { margin-top: -4px; }
.pl-payer { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pl-payer > span { display: grid; min-width: 0; }
.pl-payer small { color: var(--text); font-size: 13px; }
.pl-link { display: grid; gap: 8px; }
.pl-link .input { font-size: 14px; color: var(--text-strong); }
.pl-payments { list-style: none; margin: 0; padding: 0; display: grid; }
.pl-payments li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pl-payments li:last-child { border-bottom: 0; }
.pl-done { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: center; }
.pl-done .pl-link, .pl-done > .row-meta { grid-column: 1 / -1; }
.pl-qr { width: 136px; height: 136px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.pl-done-text { display: grid; gap: 4px; }
.flow-foot-pair { display: inline-flex; gap: 8px; }
.pay-for { margin: 0; font-size: 16px; color: var(--text-strong); }
.pay-who { display: grid; gap: 12px; }
.pay-who[hidden] { display: none; }
@media (max-width: 520px) { .pl-done { grid-template-columns: 1fr; justify-items: start; } .pl-qr { width: 160px; height: 160px; } }

/* Rewards (reset package 7, Rewards.dc.html): the Vendpass card's four figures, then the program column. */
.rw-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rw-brand { display: flex; align-items: center; }
.rw-brand img { height: 18px; width: auto; display: block; }
.rw-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rw-fig { display: grid; gap: 4px; align-content: start; padding: 16px 20px; min-width: 0; }
.rw-fig + .rw-fig { border-left: 1px solid var(--line); }
.rw-fig span { font-size: 14px; color: var(--text); }
.rw-fig b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); }
.rw-fig small { font-size: 13px; color: var(--text-faint); }
.rw-sub { margin: 0; padding: 12px 20px 4px; font-size: 13px; color: var(--text-faint); }
.sheet .rw-sub { padding: 8px 0 0; }
.rw-pts { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-pts.is-in { color: var(--good); }
.rw-pts.is-out { color: var(--problem); }
@media (max-width: 900px) {
  .rw-grid { grid-template-columns: minmax(0, 1fr); }
  .rw-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-fig:nth-child(3) { border-left: 0; }
  .rw-fig:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Advertising (reset package 7, Advertising.dc.html): 9:16 thumbnails in the table, the campaign panel. */
.ad-thumb { width: 20px; height: 36px; object-fit: cover; border-radius: 4px; display: block; box-shadow: 0 0 0 1px var(--line); }
.ad-name { font-weight: 400; color: var(--text-strong); }
.ad-panel-top { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.ad-preview { width: 120px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); max-width: 100%; }
.ad-panel-top .panel-facts { margin: 0; }
.ad-screens { list-style: none; margin: 0; padding: 0; display: grid; }
.ad-screens li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-strong); }
.ad-screens li:last-child { border-bottom: 0; }
.panel-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.panel-actions-end { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
.panel-actions-split { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.btn.is-danger { color: var(--problem); }

/* Automation (reset package 7, Automation.dc.html; Mercury 23, 24): rule cards, Create a rule, the drafted note. */
.mr-add { display: grid; gap: 10px; }
.mr-add-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-strong); }
.mr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mr-card { display: grid; gap: 6px; align-content: start; text-align: left; padding: 16px; min-height: 120px; border: 0; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text); font: inherit; cursor: pointer; }
.mr-card:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--line-strong); }
.mr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mr-card b { font-weight: 500; font-size: 15px; color: var(--text-strong); margin-top: 4px; }
.mr-card > span:last-child { font-size: 14px; line-height: 1.4; }
.mr-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--well); color: var(--text-strong); }
.mr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text-strong); font: inherit; font-size: 14px; cursor: pointer; }
.mr-chip:hover { background: var(--well); }
.mr-or { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 13px; color: var(--text-faint); }
.mr-or::before, .mr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mr-words { min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.field label .icon { vertical-align: -2px; color: var(--accent-ink); }
.mr-drafted { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--well); font-size: 14px; line-height: 1.45; color: var(--text-strong); }
.mr-drafted .icon { flex: none; margin-top: 2px; color: var(--accent-ink); }
.mr-run-end { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.row[data-panel-open] { cursor: pointer; }
@media (max-width: 900px) { .mr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mr-cards { grid-template-columns: minmax(0, 1fr); } .mr-card { min-height: 0; } }

/* Reports (reset package 7, Reports.dc.html): the report list on the left, one report at a time. */
.rp-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.rp-rail { display: grid; gap: 20px; align-content: start; position: sticky; top: 16px; }
.rp-cat { display: grid; gap: 6px; }
.rp-group { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); }
.rp-items { display: grid; gap: 1px; margin-left: 3px; border-left: 1px solid var(--line); }
.rp-rail a { padding: 5px 12px 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--text); text-decoration: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rp-rail a:hover { color: var(--text-strong); background: var(--well); }
.rp-rail a[aria-current="page"] { color: var(--text-strong); border-left-color: var(--text-strong); font-weight: 500; }
.rp-main { display: grid; gap: 16px; min-width: 0; }
.rp-pick { display: none; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-title { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); }
.report-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rp-seg { display: inline-flex; padding: 2px; border-radius: var(--r-md); background: var(--well); }
.rp-seg a { padding: 5px 12px; border-radius: calc(var(--r-md) - 2px); font-size: 14px; color: var(--text); text-decoration: none; }
.rp-seg a[aria-current="true"] { background: var(--surface); color: var(--text-strong); box-shadow: 0 0 0 1px var(--line); }
.rp-top { display: grid; gap: 12px; }
.rp-figs { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.rp-figs div { display: grid; gap: 2px; }
.rp-figs span { font-size: 14px; color: var(--text); }
.rp-figs b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-strong); }
.rp-figs b.is-up { color: var(--accent-ink); }
.rp-figs b.is-down { color: var(--problem); }
.rp-figs small { font-size: 13px; color: var(--text); }
.rp-figs small.is-up, .rp-main td .is-up { color: var(--accent-ink); }
.rp-figs small.is-down, .rp-main td .is-down { color: var(--problem); }
.rp-define { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); max-width: 72ch; }
.rp-note { margin: -4px 0 0; font-size: 14px; color: var(--text); }
.rp-chart { height: 160px; }
.rp-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); }
.rp-bars { list-style: none; margin: 0; padding: 4px 20px 12px; display: grid; }
.rp-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rp-bars li:last-child { border-bottom: 0; }
.rp-bar-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-strong); }
.rp-bar-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar-name small { font-size: 13px; color: var(--text-faint); white-space: nowrap; }
.rp-bar { grid-column: 1 / -1; width: 100%; height: 4px; display: block; }
.rp-bar-bg { fill: var(--well); }
.rp-bar-fill { fill: var(--accent); }
.rp-figs b.is-quiet { font-size: 16px; font-weight: 400; color: var(--text); padding-top: 6px; }
@media (max-width: 900px) {
  .rp-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rp-rail { display: none; }
  .rp-pick { display: block; }
  .rp-pick .select, .rp-pick select { width: 100%; }
  .rp-chart { height: 120px; }
}
.field label .icon { display: inline-block; margin-right: 4px; }
@media (max-width: 900px) {
  .report-bar .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .report-bar .filters > * { min-width: 0; width: 100%; }
  .report-bar .filters .select select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}

/* ---------- Kit lift (reset canvas, reset-canvas/gen.py; tech lead and Bryan, November 7) ----------
   The canvas kit's measures, as is: 220 sidebar, 34 controls, 44 rows with a 28 neutral icon well,
   14px card headings, the kit table, 16 gaps. Color only on the exception. */
:root { --side: 220px; --control: 34px; }
.cols, .cols-even { gap: 16px; }
.stack { gap: 16px; }
.card-head { min-height: 0; padding: 14px 20px; }
.card-head h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.card-head .card-meta { font-size: 14px; }
.row { min-height: 48px; padding: 10px 20px; }
.row + .row { box-shadow: none; border-top: 1px solid var(--line); }
.card-head + .rows, .card > .rows:first-child { border-top: 1px solid var(--line); }
.row-title { font-weight: 400; }
.row-lead { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--well); color: var(--text); }
.row-lead svg { width: 14px; height: 14px; }
.row-lead.is-good, .row-lead.is-waiting, .row-lead.is-problem { background: var(--well); color: var(--text); }
.row-lead.is-screen { width: 20px; height: 36px; border-radius: 4px; }
.table th { font-weight: 400; color: var(--text-faint); padding: 8px 20px; border-bottom: 0; border-top: 1px solid var(--line); }
.table td { padding: 12px 20px; border-bottom: 0; border-top: 1px solid var(--line); white-space: nowrap; }
.table thead tr:first-child th { border-top: 0; }
.btn.small { font-weight: 400; font-size: 15px; }
.ask-fab svg { width: 18px; height: 18px; }
/* Panels, figures and controls as the kit draws them. */
.panel-head .iconbtn { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text); }
.panel-head .iconbtn svg { width: 14px; height: 14px; }
.panel-body:focus { outline: none; }
.panel-foot { justify-content: space-between; padding: 12px 16px; }
.dt-summary { gap: 36px; padding: 0 4px; }
.dt-summary span { font-size: 14px; color: var(--text); }
.dt-summary b { font-size: 20px; font-weight: 500; }
.dt-search input, .dt-select select { height: 30px; font-size: 15px; }
.dt-controls .btn { height: 30px; font-weight: 400; }
.home-recent > .card-head { padding: 14px 20px; }
.home-recent > .card-head h2 { font-size: 15px; }
.home-recent .dt-card { box-shadow: none; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.home-recent .dt-wrap { gap: 0; }
/* Small dialogs are the kit's centered 520 modal on a desktop (Create a rule, Receive, Refund, Edit); a row's
   detail stays a 400 side panel (as-panel). On a phone both stay bottom sheets. */
@media (min-width: 901px) {
  dialog.sheet:not(.as-panel) { margin: auto; height: fit-content; max-height: min(86vh, 760px); width: min(520px, calc(100% - 32px)); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
  dialog.sheet:not(.as-panel)[open] { animation: modal-in 180ms var(--ease); }
  dialog.sheet:not(.as-panel)::backdrop { background: rgba(10, 13, 17, 0.45); }
  dialog.sheet:not(.as-panel) .sheet-head { border-bottom: 0; padding: 22px 24px 4px; }
  dialog.sheet:not(.as-panel) .sheet-head h2 { font-size: 20px; letter-spacing: -0.02em; }
  dialog.sheet:not(.as-panel) .sheet-head .iconbtn { width: 28px; height: 28px; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line-strong); }
  dialog.sheet:not(.as-panel) .sheet-body { padding: 12px 24px; }
  dialog.sheet:not(.as-panel) .sheet-foot { border-top: 0; padding: 8px 24px 22px; }
}
@keyframes modal-in { from { transform: translateY(8px) scale(0.99); opacity: 0; } }
/* Focused flows as the kit draws them: the rail and one narrow column from the left, title with its line,
   Back then Next together, the close in a ringed square. */
.flow-top .iconbtn { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.flow-biz > span { padding-left: 10px; border-left: 1px solid var(--line-strong); }
@media (min-width: 901px) {
  .flow-grid { grid-template-columns: 220px minmax(0, 360px); gap: 12px; justify-content: start; padding: 40px 24px 80px 90px; }
  .flow-main h1 { font-size: 20px; font-weight: 500; }
  .flow-foot { justify-content: flex-start; padding-top: 0; }
  .flow-foot > span:empty { display: none; }
}
.flow-foot .btn.secondary { order: 0; }
.dt-tally { margin-left: auto; font-size: 14px; color: var(--text); white-space: nowrap; }
.ph-actions .seg { align-self: center; }
/* Inventory as the board: one-line names without photos, the kit's small count pills, quiet headers. */
.stock-grid { font-size: 15px; }
.stock-grid th, .stock-grid td { padding: 8px 10px; }
.stock-grid thead th { font-weight: 400; font-size: 13px; color: var(--text-faint); }
.stock-grid thead th small, .stock-grid thead th .sg-sub { font-size: 13px; color: var(--text-faint); }
.stock-grid tbody .sg-product { font-weight: 400; white-space: nowrap; min-width: 0; }
.stock-grid .sg-product img, .stock-grid .sg-thumb { display: none; }
.stock-cell { min-width: 38px; height: 22px; padding: 0 6px; font-size: 13px; font-weight: 500; align-items: center; }
.stock-cell small { font-size: 13px; }
@media (min-width: 901px) {
  dialog.sheet:not(.as-panel) .sheet-form { height: auto; }
  dialog.sheet:not(.as-panel) .sheet-body { flex: none; }
  .flow-grid { grid-template-columns: 200px minmax(0, 460px); gap: 100px; padding-left: 92px; }
}
/* Field labels as the kit's: 12px, secondary ink. */
.field > label { font-size: 13px; font-weight: 400; color: var(--text); }
/* Accounting: the selection bar floats at the bottom as the kit's toast; the Year filter sits in the row. */
.doc-bar { position: fixed; left: calc(var(--side) + (100vw - var(--side)) / 2); bottom: 36px; transform: translateX(-50%); width: auto; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 32px rgba(10, 13, 17, 0.18); z-index: 25; font-size: 14px; }
.doc-bar .btn.primary { background: var(--dark); color: var(--dark-text); height: 30px; }
.doc-bar-kind { margin-left: -6px; color: var(--text); }
.ac-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.ac-filter form { display: inline-flex; }
@media (max-width: 900px) { .doc-bar { left: 50%; bottom: 84px; } }
/* Ask AI as the board: the stage in the middle of the page, the input as one ringed box. */
.ask-stage { display: grid; justify-items: center; gap: 14px; padding: 120px 0 80px; }
.ask-hero { padding: 0; }
.ask-hero h1 { font-size: 22px; font-weight: 500; }
.ask-form { width: min(440px, 100%); display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text-strong); margin-top: 12px; }
.ask-form > svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.ask-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--text-strong); }
.ask-form input::placeholder { color: var(--text-faint); }
.ask-send { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 16px; }
.ask-send:hover { background: var(--well); }
.ask-try { margin: 2px 0 0; font-size: 13px; color: var(--text-faint); }
.ask-examples { justify-content: center; max-width: 460px; }
@media (max-width: 900px) { .ask-stage { padding: 40px 0 24px; } }
.ph-aside { font-size: 14px; color: var(--text); }
.mint-link { color: var(--accent-ink); font-size: 15px; white-space: nowrap; }
.mint-link:hover { opacity: 0.8; }
.rw-brand { gap: 8px; font-size: 15px; font-weight: 500; }
.rw-v { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--accent); color: var(--dark); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
/* Layouts: the shelves wrap as the board's grid of six, every slot with its fill bar. */
.slots { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
.slot { min-height: 76px; }
@media (max-width: 900px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* PhoneHome.dc.html: the phone shows Today in place of the chart, Accounts and Money in. */
.phone-only { display: none; }
@media (max-width: 900px) {
  .phone-only { display: block; }
  section.card.phone-only { display: block; }
  .home-onway { font-size: 14px; color: var(--dark-muted); }
  .desk-only { display: none; }
  .home-money .home-chart { height: 96px; }
  .home-top > .card, .home-mid > .card:first-child { display: none; }
}
.more { color: var(--accent-ink); font-weight: 400; }
.more svg { color: var(--accent-ink); }
/* Flows as Send.dc.html: title with its line, one card with its own Back and Next, a quiet link row under it. */
.flow-title { display: grid; gap: 6px; }
.flow-sub { font-size: 14px; color: var(--text); }
.flow-card-title { font-size: 15px; font-weight: 500; }
.flow-card-actions { display: flex; gap: 8px; }
.flow-foot:has(> span:only-child:empty) { display: none; }
.input-affix { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.input-affix:focus-within { box-shadow: inset 0 0 0 1.5px var(--text-strong); }
.input-affix > span { color: var(--text); }
.input-affix .input { flex: 1; min-width: 0; height: 34px; padding: 0; box-shadow: none; background: transparent; }
.input-affix .input:focus { box-shadow: none; }
.input-affix small { font-size: 13px; color: var(--text); white-space: nowrap; }
.flow-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }

/* ---------- Settings (reset package 8, Settings.dc.html) ---------- */
.nav-back { display: block; padding: 2px 8px 12px; font-size: 15px; color: var(--text-strong); }
.nav-group { margin: 8px 0 4px; padding: 0 8px; font-size: 13px; color: var(--text-faint); }
.set-page { display: grid; gap: 16px; }
.set-head { display: flex; align-items: center; gap: 12px; padding-top: 14px; }
.set-head h1 { font-size: 22px; letter-spacing: -0.02em; }
.set-head .btn { margin-left: auto; }
.set-avatar { width: 36px; height: 36px; font-size: 14px; }
.set-page > .set-list { border-top: 1px solid var(--line); }
.set-none { color: var(--text-faint); }
.set-lede { font-size: 14px; color: var(--text); margin: -4px 0 0; }
.set-edit { color: var(--accent-ink); background: none; border: 0; padding: 0; font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.act-strip { width: 100%; height: 28px; display: block; }
.act-strip rect { fill: var(--well); }
.act-strip rect.is-on { fill: var(--accent); }
/* The bell as a feed: unread dot, Mark all read, All notifications. */
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pop-read { margin-left: auto; }
.pop-read .more { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 14px; }
.pop-foot { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line); }
/* Support (Support.dc.html): the list beside the conversation; their side grey at the left, yours mint at the right. */
.sp-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-list .sp-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.sp-row .row-lead { background: var(--dark); color: var(--dark-text); font-size: 13px; font-weight: 500; }
.sp-row.is-selected { background: var(--well); }
.sp-title { white-space: normal; }
.sp-pane { display: flex; flex-direction: column; min-height: 520px; }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.sp-head h2 { font-size: 15px; font-weight: 500; }
.sp-pane .thread { flex: 1; max-height: none; padding: 4px 20px 20px; }
.msg-body { background: var(--well); border-radius: var(--r-lg); }
.msg.is-self .msg-body { background: var(--accent-soft); color: var(--text-strong); }
.sp-reply { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.sp-reply .input { flex: 1; }
.sp-error { padding: 0 20px 8px; }
@media (max-width: 900px) { .sp-grid { grid-template-columns: minmax(0, 1fr); } .sp-pane { min-height: 0; } }
/* Driver app (Driver.dc.html): route header, figure strip, the next stop as one card, a tab bar at the bottom. */
.drv { padding-bottom: 88px; }
.drv-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.drv-av { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--accent); color: var(--dark); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.drv-title { font-size: 16px; font-weight: 500; }
.drv-sub { font-size: 14px; color: var(--text); }
.drv-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drv-figs > div { display: grid; gap: 2px; padding: 14px 14px; }
.drv-figs > div + div { border-left: 1px solid var(--line); }
.drv-figs span { font-size: 14px; color: var(--text); }
.drv-figs b { font-size: 22px; font-weight: 500; color: var(--text-strong); }
.drv-figs small { font-size: 14px; font-weight: 400; color: var(--text); }
.drv-next { overflow: hidden; }
.drv-next-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 2px; }
.drv-next-head .mint-link { margin-left: auto; }
.drv-next-sub { padding: 0 16px 10px; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--line); }
.drv-sec { padding: 8px 16px 4px; font-size: 13px; color: var(--text-faint); border-bottom: 1px solid var(--line); }
.drv-next .row { padding: 10px 16px; }
.drv-n { font-weight: 500; font-variant-numeric: tabular-nums; }
.drv-n.is-out { color: var(--problem); }
.drv-next-foot { display: grid; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.drv-next-foot .btn.quiet { justify-self: center; }
.drv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
.drv-bar button { display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); }
.drv-bar button[aria-current="true"] { color: var(--text-strong); }
.drv-bar button[aria-current="true"] svg { color: var(--accent); }
.sp-pane .thread { align-content: start; }
.sp-pane .msg { max-width: 72%; }
.sp-pane .msg-body { padding: 8px 12px; font-size: 14px; }
/* The hosted pay page in the kit (tech-lead review of package 8): initials beside the name, raised cents, kit ring and controls. */
.pay-from { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pay-from .avatar { width: 24px; height: 24px; font-size: 10px; }
.pay-card { border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 20px; gap: 14px; }
.pay-amount .amt.is-big { font-size: 40px; color: var(--text-strong); }
.pay-for { color: var(--text); font-size: 15px; }
.pay-card-form { display: grid; gap: 12px; }
.cc-number { position: relative; }
.cc-number .input { padding-right: 120px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cc-brand { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 500; color: var(--text); }
.cc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pay-card-form .field .error:empty { display: none; }
.pay-done { display: grid; justify-items: center; gap: 10px; }
.pay-asset { border-radius: var(--r-md); height: 40px; }
/* The Done step's line wraps (it is a sentence, not a row's detail). */
.pl-done > .row-meta { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- Dashboard on the kit (reset package 9, boards Dashboard, Merchants, Payouts, Software, Support) ---------- */
.pd-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pd-figs > div { display: grid; gap: 2px; padding: 16px 20px; min-width: 0; }
.pd-figs > div + div { border-left: 1px solid var(--line); }
.pd-figs > div > span { font-size: 14px; color: var(--text); }
.pd-figs b { font-size: 22px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.01em; }
.pd-figs b small { font-size: 15px; font-weight: 400; color: var(--text); }
.pd-figs small { font-size: 13px; color: var(--text-faint); }
.pd-figs .in, .rp-note .in { color: var(--accent-ink); }
.pd-figs .out { color: var(--problem); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-list { padding: 0 20px; }
.pd-merchant { display: flex; align-items: center; gap: 10px; }
.pd-merchant .avatar { width: 32px; height: 32px; }
.dt-summary b small { font-size: 14px; font-weight: 400; color: var(--text); }
.sw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 20px 6px; }
.sw-head b { font-weight: 500; }
.sw-notes { padding: 0 20px 12px; font-size: 14px; color: var(--text); }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 10px; }
.btn.mint { background: var(--accent); color: var(--dark); }
@media (max-width: 900px) { .pd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-figs > div:nth-child(3) { border-left: 0; } .pd-figs > div:nth-child(n + 3) { border-top: 1px solid var(--line); } .pd-grid { grid-template-columns: minmax(0, 1fr); } }
/* Treasury (Treasury.dc.html): underlined tabs, black cards with raised cents, the add-up lines with their records. */
.tabset > .seg { display: flex; gap: 18px; padding: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabset > .seg button { height: auto; padding: 8px 0 10px; border-radius: 0; background: none; box-shadow: none; color: var(--text); font-weight: 400; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabset > .seg button[aria-selected="true"] { background: none; box-shadow: none; color: var(--text-strong); font-weight: 400; border-bottom-color: var(--text-strong); }
.tr-cards { gap: 16px; }
.tr-money { padding: 18px 20px; gap: 4px; }
.tr-amount { margin: 4px 0 0; }
.tr-amount .amt.is-big { font-size: 34px; color: var(--dark-text); }
.tr-link { color: var(--dark-muted); }
.tr-link:hover { color: var(--accent); }
.tr-adds .tr-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 20px; border-top: 1px solid var(--line); }
.tr-line > div { display: grid; gap: 2px; }
.tr-line span { font-size: 15px; color: var(--text-strong); }
.tr-line small { font-size: 13px; color: var(--text-faint); }
.tr-line b { font-weight: 400; font-size: 15px; }
.tr-line.is-strong span, .tr-line.is-strong b { font-weight: 500; }
.tr-ledger { color: var(--text-strong); }
.tr-note { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
/* Dashboard · Settlement (reset package 9): pick rows for Export, the total row, fee statements below. */
.st-body { display: grid; gap: 16px; }
.st-pick { display: inline-flex; align-items: center; }
.st-pick input { width: 14px; height: 14px; margin: 0; accent-color: var(--dark); }
.st-total { font-weight: 500; }
.card.tr-adds { padding: 0; }
.tr-adds .card-head { padding: 14px 16px; }
.tr-adds .tr-line { padding: 9px 16px; }
.tr-line span, .tr-line b { font-size: 14px; }
.tr-line small { font-size: 11.5px; }
.tr-note { padding: 12px 16px 14px; font-size: 12.5px; }
/* Sub-links in the always-dark sidebar (Dashboard, Console): the current one in the sidebar's own light ink. */
.app[data-product="console"] .nav-sub .nav-link[aria-current="page"], .app[data-product="dashboard"] .nav-sub .nav-link[aria-current="page"] { background: transparent; box-shadow: none; color: var(--dark-text); }
.sp-head .sp-actions { flex-wrap: nowrap; padding: 0; margin-left: auto; }
.sp-head .sp-actions form { margin: 0; }
.sp-head:has(.sp-actions) { flex-wrap: wrap; }
.sp-head:has(.sp-actions) > div:first-child { min-width: 0; flex: 1 1 260px; }
/* Treasury › Collection accounts: held time, sell status and amount line up per asset. */
.ca-card .row-end { gap: 12px; }
.ca-held { min-width: 84px; text-align: right; }
.ca-amt { min-width: 110px; text-align: right; font-weight: 500; font-size: 14px; }
.po-notice { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--text-strong); }
.sheet-foot form { margin: 0; }
/* Underline tabs as links (Admin › Money): same as the button tabs. */
.tabset > .seg a { display: inline-flex; align-items: center; padding: 8px 0 10px; border-bottom: 2px solid transparent; color: var(--text); text-decoration: none; white-space: nowrap; font-size: 14px; }
.tabset > .seg a[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--text-strong); }
/* Payouts: the sale name gives way so the row action stays inside the card. */
.table.dt[aria-label="Payouts"] td:nth-child(3) { max-width: 200px; }

/* ---------- Dark mode (reset package 11; boards DarkHome, DarkSales, DarkTreasury) ----------
   The theme is resolved before first paint by kit-helpers.js (System, Light or Dark from the account menu) and set
   as data-theme on <html>. Every component reads the tokens; the few rules below cover what draws with a literal. */
:root[data-theme="dark"] {
  --canvas: #0a0d11;
  --surface: #16191d;
  --well: #1c2126;
  --hover: #1c2126;
  --hover-chip: #262b31;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text-strong: #ffffff;
  --text: #a3a7a1;
  --text-faint: #858982;
  --icon: #8a8c88;
  --icon-faint: #4b4f53;
  --accent: #00d1a7;
  --accent-ink: #00d1a7;
  --accent-soft: rgba(0, 209, 167, 0.14);
  --good: #00d1a7;   --good-soft: rgba(0, 209, 167, 0.14);
  --waiting: #f3c45a; --waiting-soft: rgba(255, 200, 80, 0.14);
  --problem: #ff8a80; --problem-soft: rgba(255, 138, 128, 0.14);
  --neutral: #a3a7a1; --neutral-soft: #1c2126;
  --dark: #0a0d11;
  --dark-raised: #16191d;
  --dark-line: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-raised: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 64px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}
/* Primary actions turn Mint with Onyx ink, as on the dark boards. */
:root[data-theme="dark"] .btn.primary { background: var(--accent); color: #0a0d11; }
:root[data-theme="dark"] .btn.primary:hover:not([disabled]) { opacity: 1; background: #00bd97; }
:root[data-theme="dark"] .btn.primary[data-busy]::after { border-color: rgba(10, 13, 17, 0.3); border-top-color: #0a0d11; }
:root[data-theme="dark"] .btn.secondary { box-shadow: 0 0 0 1px var(--line-strong); }
:root[data-theme="dark"] .ask-fab { background: var(--accent); color: #0a0d11; }
/* Black cards sit one step above the canvas so they keep their edge. */
:root[data-theme="dark"] .money { background: radial-gradient(120% 90% at 85% 0%, rgba(0, 209, 167, 0.16), transparent 55%), var(--surface); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .toast { background: #f5f5f3; color: #0a0d11; }
:root[data-theme="dark"] .search-btn:hover, :root[data-theme="dark"] .input:hover, :root[data-theme="dark"] .select select:hover, :root[data-theme="dark"] .dt-select select:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .seg-nav { background: var(--well); }
:root[data-theme="dark"] .seg-nav a[aria-current="page"] { box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .tl-dot { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .bank-tile:hover { box-shadow: 0 0 0 1px var(--line-strong); }
/* The Portal's sidebar shares the canvas; its current row is the raised surface. */
:root[data-theme="dark"] .app:not([data-product="console"]):not([data-product="dashboard"]) { background: linear-gradient(to right, var(--canvas) calc(var(--side) - 1px), var(--line) calc(var(--side) - 1px), var(--line) var(--side), transparent var(--side)); }
/* The theme choice in the account menu. */
.theme-choice { display: grid; gap: 6px; padding: 6px 10px 8px; }
.theme-choice > span { font-size: 13px; color: var(--text-faint); }
.theme-choice .seg { width: 100%; }
.theme-choice .seg button { flex: 1; justify-content: center; }

/* Dark mode: the white logo, tiled avatars, and the black marks (XRP, Apple Pay) drawn light. */
.on-dark:not(.btn) { display: none; }
:root[data-theme="dark"] .on-light:not(.btn) { display: none; }
:root[data-theme="dark"] .on-dark:not(.btn) { display: block; }
:root[data-theme="dark"] .avatar { background: #2a2f35; color: #ffffff; }
:root[data-theme="dark"] .avatar-btn:hover .avatar { background: #343a41; }
:root[data-theme="dark"] img.mark[src*="/xrp.svg"] { filter: invert(1); }
:root[data-theme="dark"] img.mark.is-card[src*="/applepay.svg"] { background: #ffffff; }

/* ---------- Motion with a cause (reset package 11; design.md: 140ms state, 200ms sheets, a short cross-fade) ---------- */
.toast:not([hidden]) { animation: toast-in 180ms var(--ease); }
.toast.is-out { opacity: 0; transform: translate(-50%, 6px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.main.is-entering { animation: page-in 140ms var(--ease); }
@keyframes page-in { from { opacity: 0.4; } }
.home-scrub-line, .home-scrub-tip { transition: left 60ms linear; }
dialog.panel[open], dialog.sheet.as-panel[open] { animation: panel-in 220ms var(--ease); }
@keyframes panel-in { from { transform: translateX(32px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-out, .main.is-entering, dialog.panel[open], dialog.sheet.as-panel[open], .home-scrub-line, .home-scrub-tip { animation: none; transition: none; } }
/* Phone: Ask AI lives in the tab bar, so no floating button covers a row's amount (tech lead, r83 check). */
@media (max-width: 900px) {
  .tabbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ask-fab { display: none; }
  .main { padding-bottom: 96px; }
}
.ph-sub { color: var(--text); font-weight: 400; }
.pay-desc { margin: 2px 0 0; font-size: 15px; color: var(--text); white-space: pre-line; }
.field .optional { color: var(--text-faint); font-weight: 400; margin-left: 4px; }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
/* Hosts (Portal audit 1, R6): the contract record in the host panel. */
.host-file { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.host-terms { margin: 10px 0 0; padding: 12px; border-radius: var(--r-md); background: var(--well); font-size: 14px; color: var(--text-strong); white-space: pre-line; }
.file-btn { cursor: pointer; }

/* Withdraw and Connect a bank (Portal audit 1, R10). */
.flow-more { display: flex; margin-top: 12px; }
.bank-search { margin: 12px 0; }
.bank-mark { width: 28px; height: 28px; flex: none; border-radius: var(--r-sm); object-fit: contain; }
.bank-mark.is-plain { display: grid; place-items: center; background: var(--well); color: var(--icon); }
.bank-results { padding: 4px 0; }
.bank-results .row { gap: 12px; padding: 10px 16px; }
.bank-none { padding: 12px 16px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.guide-countdown { text-align: center; font-size: 16px; color: var(--text-strong); margin: 0; }
.tm-online { display: inline-flex; align-items: center; gap: 10px; color: var(--icon); }
.tm-online > span { display: grid; gap: 1px; }
.tm-online b { font-weight: 400; color: var(--text-strong); }
.tm-online small { font-size: 14px; color: var(--text); }
.panel-name + .btn { margin-left: 8px; vertical-align: middle; }
/* Layouts (Portal audit 1, R9): counted slots carry their state; tap one to count it. */
.slot.is-stocked { box-shadow: inset 0 0 0 1px var(--good); }
.slot.is-stocked .slot-badge { display: none; }
.slot.is-uncounted { box-shadow: inset 0 0 0 1px var(--line-strong); }
.slot.is-uncounted .slot-badge { background: var(--well); color: var(--text); }
.slot.is-countable { cursor: pointer; transition: box-shadow 140ms var(--ease), background 140ms var(--ease); }
.slot.is-countable:hover { background: var(--hover); }
.slot-key.is-stocked { background: var(--good); }
.slot-key.is-uncounted { background: var(--well); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sw-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.window-days { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.window-days legend { font-size: 14px; color: var(--text); margin-bottom: 6px; }
/* A switch (Portal audit 1, R10): Selling at a terminal. */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-strong); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--line-strong); transition: background 140ms var(--ease); flex: none; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 140ms var(--ease); }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.5; }
/* Ask AI as a chat (Portal audit 1, R11; layout boards AskAIChat/AskAIPanel come in batch 2). */
dialog.ask-panel[open] { flex-direction: column; }
.ask-panel-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ask-panel-head h2 { margin-right: 0; }
.ask-panel-body { align-content: start; }
.ask-hello { display: grid; gap: 14px; align-self: end; }
.ask-log { display: grid; gap: 14px; }
.ask-log:empty { display: none; }
.ask-msg { display: grid; gap: 4px; max-width: 92%; }
.ask-msg.is-person { justify-self: end; }
.ask-who { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.ask-msg.is-person .ask-who { justify-content: flex-end; }
.ask-who svg { width: 14px; height: 14px; color: var(--accent-ink); }
.ask-body { display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--well); color: var(--text-strong); font-size: 15px; line-height: 1.5; }
.ask-msg.is-person .ask-body { background: var(--dark); color: var(--dark-text); }
.ask-msg.is-wait .ask-body { color: var(--text); }
.ask-body p { margin: 0; }
.ask-body .ask-li::before { content: "· "; }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 15px; }
.ask-act-do { display: flex; gap: 6px; }
.ask-histlist { display: grid; gap: 2px; }
.ask-hist-row { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-strong); font-size: 15px; }
.ask-hist-row:hover { background: var(--hover); }
.ask-hist-row small { font-size: 14px; color: var(--text); }
/* The composer: the spark inside, Mint focus ring, Mint send once there is text. */
.ask-compose { display: flex; align-items: flex-end; gap: 8px; margin: 12px 16px 16px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow 140ms var(--ease); }
.ask-compose > svg { width: 16px; height: 16px; flex: none; margin-bottom: 8px; color: var(--icon); transition: color 140ms var(--ease); }
.ask-compose textarea { flex: 1; min-width: 0; min-height: 32px; max-height: 160px; resize: none; border: 0; outline: 0; padding: 6px 0; background: transparent; font-size: 15px; line-height: 1.45; color: var(--text-strong); }
.ask-compose:focus-within { box-shadow: 0 0 0 1.5px var(--accent); }
.ask-compose:focus-within > svg { color: var(--accent); }
.ask-submit { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-md); background: var(--well); color: var(--text); font-size: 17px; transition: background 140ms var(--ease), color 140ms var(--ease); }
.ask-compose.has-text .ask-submit { background: var(--accent); color: #0a0d11; }
/* The full page: the same chat, centered. */
.ask-chat-page { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: stretch; gap: 8px; padding: 24px 0 24px; max-width: 720px; margin: 0 auto; width: 100%; min-height: calc(100vh - 140px); }
.ask-chat-tools { display: flex; justify-content: flex-end; gap: 4px; }
.ask-page-scroll { overflow-y: auto; display: grid; align-content: start; gap: 16px; padding: 8px 0; }
.ask-chat-page .ask-hero { padding: 80px 0 8px; display: grid; justify-items: center; gap: 14px; }
.ask-chat-page .ask-compose { margin: 0; width: 100%; }
.ask-chat-page .ask-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
[data-row-href]:not(tr) { cursor: pointer; }
.row[data-row-href]:hover { background: var(--hover); }
/* The hosted pay page (boards PayPage, PayPageQR, PhonePay; kit lift 2). Always light. */
.pay { max-width: 520px; gap: 12px; }
.pay-card { padding: 24px; }
.pay-top { gap: 6px; }
.pay-biz { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pay-tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--dark); color: #fff; font-size: 15px; font-weight: 500; }
.pay-biz-name { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-strong); }
.pay-biz-line { margin: 2px 0 0; font-size: 15px; color: var(--text); }
.pay-top .pay-amount { font-size: 44px; }
.pay-sub { margin: 0; font-size: 15px; color: var(--text); }
.pay-state { margin-top: 6px; }
.pay-methods { padding: 0; gap: 0; overflow: hidden; }
.pay-with { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.pay-with b { font-weight: 500; font-size: 16px; }
.pay-pad { padding: 16px 24px; }
.pay-assets { display: grid; gap: 0; }
.pay-asset { display: flex; align-items: center; gap: 14px; width: 100%; height: auto; min-height: 64px; padding: 10px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; border-top: 1px solid var(--line); color: var(--text-strong); }
.pay-assets > :first-child, .pay-assets > :first-child .pay-asset { border-top: 0; }
.pay-asset:hover { background: var(--hover); }
.pay-asset .mark { width: 26px; height: 26px; flex: none; border-radius: 6px; }
.pay-asset > svg { margin-left: auto; color: var(--icon); flex: none; }
.pay-asset-text { display: grid; gap: 2px; }
.pay-asset-text b { font-weight: 400; font-size: 16px; }
.pay-asset-text small { font-size: 15px; color: var(--text); }
.pay-asset-nets { display: flex; gap: 8px; padding: 0 24px 14px 64px; }
.pay-request { padding: 20px 24px 24px; gap: 10px; }
.pay-chosen { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 15px; }
.pay-chosen b { font-weight: 500; }
.pay-chosen span { color: var(--text); }
.pay-chosen .mark { width: 20px; height: 20px; border-radius: 5px; }
.pay-qr-wrap { position: relative; width: 200px; height: 200px; padding: 0; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); background: #fff; overflow: hidden; }
.pay-qr-wrap .pay-qr { width: 200px; height: 200px; box-shadow: none; }
.pay-qr-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 7px; border-radius: 6px; background: #fff; display: grid; place-items: center; }
.pay-request .pay-asset-line { font-size: 24px; }
.pay-copy { display: grid; gap: 6px; width: 100%; text-align: left; }
.pay-copy-label { font-size: 14px; color: var(--text); }
.pay-copy-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 4px 4px 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pay-copy-box .mono { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pay-back { border: 0; background: none; padding: 6px; font-size: 15px; color: var(--accent-ink); cursor: pointer; }
.pay-back:hover { text-decoration: underline; }
.pay-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; color: var(--text); font-size: 14px; }
.pay-foot img { height: 16px; width: auto; }
#pay-who-card .pay-who { gap: 14px; }
@media (max-width: 560px) { .pay { padding-top: 16px; } .pay-card, .pay-pad, .pay-with { padding-left: 16px; padding-right: 16px; } .pay-asset { padding-left: 16px; padding-right: 16px; } }
.pay-request { grid-template-columns: minmax(0, 1fr); }
.pay-request > * { max-width: 100%; min-width: 0; }
.pay-copy-box { min-width: 0; }
@media (max-width: 560px) { .pay-request { padding-left: 16px; padding-right: 16px; } }
/* Ask AI to the boards AskAIChat / AskAIPanel (kit lift 2). */
.ask-panel-head h2 { display: flex; align-items: center; gap: 8px; }
.ask-panel-head h2 svg { width: 16px; height: 16px; color: var(--accent-ink); }
.ask-msg { max-width: 100%; }
.ask-msg.is-person { max-width: 85%; }
.ask-msg.is-person .ask-body { background: var(--well); color: var(--text-strong); border-radius: var(--r-lg); padding: 10px 14px; }
.ask-msg.is-assistant .ask-body { background: none; padding: 0; border-radius: 0; font-size: 15px; }
.ask-who { font-size: 14px; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
dialog.ask-panel .ask-acts { display: grid; }
dialog.ask-panel .ask-acts .btn { justify-content: flex-start; width: 100%; }
.ask-compose { min-height: 48px; border-radius: 12px; align-items: center; }
.ask-compose > svg { margin-bottom: 0; }
.ask-submit { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent); color: #0a0d11; }
.ask-chat-page { max-width: 760px; }
.ask-chat-tools { justify-content: space-between; align-items: center; }
.ask-when { font-size: 15px; color: var(--text); }
.ask-tool-btns { display: flex; gap: 8px; }
.ask-note { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--text-faint); }
.ac-figs { margin-bottom: 12px; }
.ac-figs .fig-label { font-size: 13px; }
.ac-figs .fig-value, .ac-figs .fig + .fig .fig-value { font-size: 20px; font-weight: 400; }
.balance-figs b .amt, .balance-figs b { font-size: 20px; color: var(--dark-text); }
.panel-rename { display: inline-grid; width: 28px; height: 28px; vertical-align: middle; margin-left: 4px; }
.sw-acts { display: flex; gap: 8px; }
.panel-figure:has(.panel-rename) { grid-template-columns: auto auto 1fr; align-items: center; }
.panel-figure:has(.panel-rename) > :not(.panel-name):not(.panel-rename) { grid-column: 1 / -1; }
/* Service (Package C board). */
.tk-title { display: grid; gap: 2px; }
.tk-title b { font-weight: 400; color: var(--text-strong); }
.tk-title small { font-size: 14px; color: var(--text); }
.tk-foot { margin: 8px 0 0; font-size: 14px; }
.tk-note { display: grid; gap: 8px; justify-items: start; }
.panel-text { margin: 0; font-size: 15px; color: var(--text-strong); line-height: 1.5; }
.tk-more { position: relative; margin-left: auto; }
.tk-more > summary { list-style: none; min-width: 40px; }
.tk-more > summary::-webkit-details-marker { display: none; }
.tk-pop { position: absolute; right: 0; bottom: calc(100% + 6px); display: grid; min-width: 200px; padding: 6px; }
.tk-pop .btn { width: 100%; justify-content: flex-start; }
/* Inventory › Warehouse (Package C board). */
.inv-tabs { margin: -4px 0 4px; }
.cover { display: inline-grid; justify-items: end; gap: 4px; min-width: 128px; }
.cover-bar { display: block; width: 128px; height: 4px; border-radius: 2px; background: var(--well); overflow: hidden; }
.cover-bar i { display: block; height: 100%; border-radius: 2px; background: var(--good); }
.cover-bar.is-low i { background: var(--waiting); }
.cover-bar.is-out i { background: var(--problem); }
.table th.end, .table td.end { text-align: right; }
.fig-pct { font-size: 15px; color: var(--text); font-weight: 400; }
.panel-note { margin: 8px 0 0; font-size: 14px; color: var(--text); }
/* Routes (Package C board): vehicles left, why and how right. */
.rt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 16px; align-items: start; }
.rt-main, .rt-side { display: grid; gap: 16px; min-width: 0; }
.rt-acts { display: flex; align-items: center; gap: 12px; }
.rt-change { border: 0; background: none; cursor: pointer; font-size: 15px; }
@media (max-width: 1100px) { .rt-grid { grid-template-columns: minmax(0, 1fr); } }
.rt-main .card-head h2 { white-space: nowrap; }
.route-stops .row-meta, .route-stops .row-title { white-space: normal; overflow: visible; text-overflow: clip; }