/* The approved Order Confirmation v1 design's stylesheet (https://claude.ai/artifact/VdcD1R2x8zHvcYBknQMnc8),
   lifted as is. The Console's own additions are in console-extra.css. */
/* Order confirmation v1 (wa-agents): design review. Layout: a sticky review bar with five sections ->
   reading pages (Overview, Architecture, Flow, Decisions & tests) or the framed portal mock (Experience),
   which reuses prototype v3's shell, tokens, type, components, light/dark, phone tab bar and motion. */
/* ---- Design system: copied from prototype v3 (wag-platform/docs/reviews/platform-experience.html) so both pages are one product ---- */
:root {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #fbfbfd; --sunk: #f2f2f5; --fill: #e8e8ed;
  --ink: #1d1d1f; --ink-2: #3a3a3c; --muted: #636366; --faint: #6e6e73;
  --line: #d9d9de; --line-soft: #ebebef;
  --accent: #0066cc; --accent-fill: #0071e3; --accent-fill-hover: #0077ed; --accent-ink: #ffffff;
  --accent-soft: #eaf2fd; --accent-ring: rgba(0, 113, 227, .32);
  --ok: #187a40; --ok-soft: #e4f4ea; --warn: #9a5b00; --warn-soft: #fcf0dc;
  --bad: #c42d1c; --bad-soft: #fde9e6; --idle: #636366; --idle-soft: #efeff2;
  --bar: rgba(255, 255, 255, .84); --bar-solid: rgba(250, 250, 252, .94); --side: #f0f0f3; --banner: #fff6e5; --banner-ink: #7a4a00;
  --shadow-1: none;
  --shadow-2: 0 18px 44px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .06);
  --toast: rgba(29, 29, 31, .94); --toast-ink: #f5f5f7;
  --on-fill: rgba(255, 255, 255, .25); --knob: 0 1px 3px rgba(0, 0, 0, .25); --seg-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  --qr-bg: #ffffff; --qr-ink: #1d1d1f; --scrim: rgba(0, 0, 0, .28);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Type scale: the only font sizes on the page. */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px;
  /* Spacing: 4-pt base on an 8-pt rhythm. Hairlines (1-3px) are the only other values. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  /* Motion: short and ease-out. prefers-reduced-motion turns all of it off. */
  --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-1: 160ms; --dur-2: 280ms;
  --tabbar-h: 50px;
  --mark-top: #2b8bff; --mark-bottom: #0060d4; --skel-hi: rgba(255, 255, 255, .6);
  --imp-bg: #b54a00; --imp-ink: #ffffff; --imp-chip: rgba(255, 255, 255, .2);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #212123; --sunk: #161618; --fill: #2c2c2e;
    --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6; --faint: #8e8e93;
    --line: #3a3a3c; --line-soft: #2a2a2c;
    --accent: #4da3ff; --accent-fill: #0b6fe0; --accent-fill-hover: #1a7bea; --accent-ink: #ffffff;
    --accent-soft: #0f2944; --accent-ring: rgba(10, 132, 255, .5);
    --ok: #4fd27f; --ok-soft: #0f2e1b; --warn: #ffb340; --warn-soft: #33240a;
    --bad: #ff6b5e; --bad-soft: #3a1512; --idle: #a1a1a6; --idle-soft: #2a2a2c;
    --bar: rgba(22, 22, 24, .84); --bar-solid: rgba(20, 20, 22, .94); --side: #0d0d0f; --banner: #2e2108; --banner-ink: #ffcf7a;
    --shadow-1: none;
    --shadow-2: 0 18px 50px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .4);
    --toast: rgba(245, 245, 247, .95); --toast-ink: #1d1d1f; --scrim: rgba(0, 0, 0, .6);
    --mark-top: #3d95ff; --mark-bottom: #0a62d6; --skel-hi: rgba(255, 255, 255, .07);
    --imp-bg: #ff9f0a; --imp-ink: #1d1d1f; --imp-chip: rgba(0, 0, 0, .14);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --surface-2: #212123; --sunk: #161618; --fill: #2c2c2e;
  --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6; --faint: #8e8e93;
  --line: #3a3a3c; --line-soft: #2a2a2c;
  --accent: #4da3ff; --accent-fill: #0b6fe0; --accent-fill-hover: #1a7bea; --accent-ink: #ffffff;
  --accent-soft: #0f2944; --accent-ring: rgba(10, 132, 255, .5);
  --ok: #4fd27f; --ok-soft: #0f2e1b; --warn: #ffb340; --warn-soft: #33240a;
  --bad: #ff6b5e; --bad-soft: #3a1512; --idle: #a1a1a6; --idle-soft: #2a2a2c;
  --bar: rgba(22, 22, 24, .84); --bar-solid: rgba(20, 20, 22, .94); --side: #0d0d0f; --banner: #2e2108; --banner-ink: #ffcf7a;
  --shadow-1: none;
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .4);
  --toast: rgba(245, 245, 247, .95); --toast-ink: #1d1d1f; --scrim: rgba(0, 0, 0, .6);
  --mark-top: #3d95ff; --mark-bottom: #0a62d6; --skel-hi: rgba(255, 255, 255, .07);
  --imp-bg: #ff9f0a; --imp-ink: #1d1d1f; --imp-chip: rgba(0, 0, 0, .14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-15)/1.47 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bar); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: var(--fs-32); line-height: 1.12; font-weight: 700; letter-spacing: -.022em; }
h2 { font-size: var(--fs-20); line-height: 1.25; font-weight: 600; letter-spacing: -.012em; }
h3 { font-size: var(--fs-15); line-height: 1.3; font-weight: 600; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: var(--fs-13); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--fs-13); }
.tiny { font-size: var(--fs-12); }
.tnum { font-variant-numeric: tabular-nums; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); border-color: var(--accent-fill); }
.ob-n svg, .tn svg, .over svg, .celebrate .ico svg, .auth-card .mark svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-soft); }
.top-in { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); min-height: 54px; padding-block: var(--sp-2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font: 600 var(--fs-17)/1 var(--font-display); letter-spacing: -.01em; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* Product mark: a P whose bowl sends out one sound wave (messages that become calls). Drawn, not an icon. */
.mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(180deg, var(--mark-top), var(--mark-bottom)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .22); }
.mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ws { display: flex; align-items: center; padding-left: var(--sp-2); border-left: 1px solid var(--line); min-width: 0; max-width: 40vw; }
.top-ctl { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.viewas { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--muted); }
.viewas select { width: auto; min-height: 32px; padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--sp-3); font-size: var(--fs-13); }
.ex { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 24px; font: 500 var(--fs-12)/1 var(--font); color: var(--muted); background: var(--fill); padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: 999px; white-space: nowrap; cursor: default; }
.ex::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.ex .long { display: inline; }
.iconbtn { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--ink-2); }
.iconbtn:hover { background: var(--fill); }
.iconbtn:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.avatar { all: unset; box-sizing: border-box; cursor: pointer; width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 600 var(--fs-13)/1 var(--font); }
.avatar:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.menu { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: calc(100% + 6px); width: 260px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-2); padding: var(--sp-2); z-index: 35; }
.menu .who { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-1); }
.menu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 9px; font-size: var(--fs-15); color: var(--ink); }
.menu button:hover, .menu button:focus-visible { background: var(--sunk); outline: none; }
.banner { background: var(--banner); color: var(--banner-ink); border-bottom: 1px solid var(--line-soft); }
.banner-in { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding-block: var(--sp-2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: var(--fs-13); }
.banner b { font-weight: 600; }

/* Shell */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 55px); }
.side { background: var(--side); border-right: 1px solid var(--line-soft); padding: var(--sp-4) var(--sp-3) var(--sp-12); padding-left: max(10px, env(safe-area-inset-left, 0px)); }
.side-in { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 70px); display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 78px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 72px; margin-bottom: -72px; }
.app.imp-on .side-in { top: calc(env(safe-area-inset-top, 0px) + 116px); max-height: calc(100vh - 124px); }
.side h4 { font: 600 var(--fs-12)/1 var(--font); color: var(--muted); letter-spacing: .02em; padding: var(--sp-4) var(--sp-3) var(--sp-2); }
.side h4:first-child { padding-top: var(--sp-1); }
.nav { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 8px; color: var(--ink-2); font-size: var(--fs-15); text-decoration: none; }
.nav:hover { background: var(--fill); text-decoration: none; }
.nav[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav[aria-current="page"]:hover { background: var(--accent-soft); }
.nav[aria-current="page"] .count { background: var(--surface); color: var(--accent); }
.nav .count { margin-left: auto; font: 600 var(--fs-12)/1 var(--font); padding: 3px var(--sp-2); border-radius: 999px; background: var(--fill); color: var(--muted); }
.nav .count.live, .nav[aria-current="page"] .count.live { background: var(--bad-soft); color: var(--bad); }
.side .gap { display: block; height: var(--sp-2); }
.side .foot { display: none; }
.main { min-width: 0; padding-block: var(--sp-8) calc(var(--sp-12) * 2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 861px) { .main { padding-left: var(--sp-8); padding-right: max(36px, env(safe-area-inset-right, 0px)); } }
.page { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }
.page.narrow { max-width: 760px; margin-left: max(0px, calc((100% - 1060px) / 2)); margin-right: auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.page-head > div:first-child { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.eyebrow { font-size: var(--fs-13); color: var(--muted); }
.sub { color: var(--muted); font-size: var(--fs-15); max-width: 64ch; }
.back { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-15); }
.back svg { width: 16px; height: 16px; }
.app.auth .shell { display: block; }
.app.auth .side, .app.auth .tabbar, .app.auth .top-ctl .viewas, .app.auth .avatar, .app.auth .ws { display: none; }

/* Phone tab bar (Apple pattern): four main places + More, fixed to the bottom, clear of the home indicator. */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--bar-solid); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line-soft);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { all: unset; box-sizing: border-box; cursor: pointer; position: relative; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font: 500 var(--fs-11)/1.1 var(--font); letter-spacing: .01em; text-align: center; -webkit-tap-highlight-color: transparent; transition: color var(--dur-1) var(--ease-out); }
.tab:hover { text-decoration: none; color: var(--ink-2); }
.tab svg.i { width: 24px; height: 24px; stroke-width: 1.6; transition: transform var(--dur-1) var(--ease-out); }
.tab:active svg.i { transform: scale(.9); }
.tab[aria-current="page"] { color: var(--accent); font-weight: 600; }
.tab[aria-current="page"] svg.i { stroke-width: 2; }
.tab:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -4px; border-radius: 12px; }
.tab .tb-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 var(--sp-1); border-radius: 999px; background: var(--bad); color: #fff; font: 600 var(--fs-11)/16px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.tab .tb-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 7px; left: calc(50% + 8px); }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .tabbar { display: grid; }
  h1 { font-size: var(--fs-24); }
  .ws { display: none; }
  .main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 96px); }
}
@media (max-width: 560px) {
  .top-ctl { display: contents; }
  .top-ex { margin-right: auto; }
  .viewas > span, .ex .long, #theme-btn { display: none; }
  .viewas select { max-width: 170px; }
  .top-in { gap: var(--sp-2); }
}
@media (max-width: 440px) { .brand > span:last-child { display: none; } }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-1); padding: var(--sp-6); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.card-head .sub { font-size: var(--fs-13); }
.card.flush > .card-head { padding: var(--sp-4) var(--sp-6) var(--sp-3); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); align-items: start; }
.cols-2-1 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 960px) { .cols-2-1 { grid-template-columns: minmax(0, 1fr); } .call-cols > .stack { order: -1; } }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hstack { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-4); }
.tile { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow-1); padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); color: var(--ink); text-decoration: none; min-width: 0; }
a.tile:hover { text-decoration: none; border-color: var(--line); }
.tile .lbl { font-size: var(--fs-13); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.tile .val { font: 600 var(--fs-32)/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .hint { font-size: var(--fs-13); color: var(--muted); }
.card .tiles .tile { background: var(--sunk); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--idle); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.accent { background: var(--accent-fill); }
.dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .55; } }

/* Grouped list (inset) */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; min-width: 0; }
.list > .row:first-child { border-top: 0; }
a.row:hover, button.row:hover { background: var(--sunk); text-decoration: none; }
button.row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); cursor: pointer; width: 100%; }
.row .main-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.row .main-t b { font-weight: 600; font-size: var(--fs-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .main-t span { font-size: var(--fs-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .end { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.row .chev { color: var(--faint); width: 16px; height: 16px; }
.row .amt { font-variant-numeric: tabular-nums; font-size: var(--fs-15); color: var(--ink-2); white-space: nowrap; min-width: 72px; text-align: right; }
.row .st-cell { display: flex; justify-content: flex-end; min-width: 120px; }
.row .when { min-width: 40px; text-align: right; }
@media (max-width: 560px) { .row .st-cell { min-width: 0; } }
.ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--sunk); color: var(--ink-2); }
.ico.ok { background: var(--ok-soft); color: var(--ok); } .ico.warn { background: var(--warn-soft); color: var(--warn); }
.ico.bad { background: var(--bad-soft); color: var(--bad); } .ico.accent { background: var(--accent-soft); color: var(--accent); }
.list .row > .ico, .ladder .ico { background: var(--sunk); color: var(--ink-2); }
@media (max-width: 560px) {
  .row, button.row { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .row .hide-s { display: none; }
  .list .row > .ico { display: none; }
  .card.flush > .card-head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
}

/* Badges */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 22px; font: 600 var(--fs-12)/1 var(--font); padding: 0 var(--sp-2); border-radius: 999px; white-space: nowrap; background: var(--idle-soft); color: var(--idle); }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge .dot { width: 6px; height: 6px; background: currentColor; }
.badge svg.i { width: 12px; height: 12px; stroke-width: 2.2; }

/* Buttons */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 36px; padding: var(--sp-2) var(--sp-4); border-radius: 999px; font: 500 var(--fs-15)/1.2 var(--font); color: var(--accent); background: var(--sunk); white-space: nowrap; transition: background-color .15s, transform .1s; text-align: center; }
.btn:hover { background: var(--fill); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.btn.primary { background: var(--accent-fill); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-fill-hover); }
.btn.lg { min-height: 46px; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-17); }
.btn.sm { min-height: 30px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-13); }
.btn.plain { background: transparent; padding-inline: var(--sp-2); }
.btn.plain:hover { background: var(--sunk); }
.btn.danger { color: var(--bad); }
.btn.danger.primary { background: var(--bad); color: var(--accent-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn.block { width: 100%; }

/* Forms */
label, .lbl-t { font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=time], input[type=search], select, textarea {
  width: 100%; font: var(--fs-15)/1.35 var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-2) var(--sp-3); min-height: 40px; transition: box-shadow .15s, border-color .15s; }
select { appearance: none; -webkit-appearance: none; padding-right: var(--sp-8); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[readonly] { background: var(--sunk); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field .help { font-size: var(--fs-13); color: var(--muted); }
.field .err { font-size: var(--fs-13); color: var(--bad); }
.field.bad input { border-color: var(--bad); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--line-soft); }
.form-row:first-child { border-top: 0; padding-top: 0; }
.form-row:last-child { padding-bottom: 0; }
.form-row .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.form-row .t b { font-weight: 500; font-size: var(--fs-15); }
.form-row .t span { font-size: var(--fs-13); color: var(--muted); }
.form-row .c { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.form-row .c input, .form-row .c select { width: auto; }
.inline-in { display: flex; gap: var(--sp-2); align-items: stretch; }
.inline-in input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  .form-row { flex-wrap: wrap; }
  .form-row .c { width: 100%; }
  .form-row .c.end { width: auto; }
  .inline-in { flex-wrap: wrap; }
  .inline-in .btn { flex: 1 1 auto; }
}
.switch { position: relative; width: 46px; height: 28px; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--fill); transition: background-color .2s; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--knob); transition: transform .2s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-ring); }
.switch input:disabled { cursor: default; }
.switch input:disabled + span { opacity: .55; }
.seg { align-self: flex-start; display: inline-flex; background: var(--fill); border-radius: 10px; padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { all: unset; box-sizing: border-box; cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: 8px; font: 500 var(--fs-13)/1.2 var(--font); color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--seg-shadow); }
.seg button:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -2px; }
.seg.wide { display: flex; align-self: stretch; }
.seg.wide button { flex: 1 1 0; text-align: center; }
.choice { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4); border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); min-width: 0; }
.choice:hover { border-color: var(--faint); }
.choice[aria-pressed="true"] { border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-ring); }
.choice:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.choice[aria-disabled="true"] { cursor: default; opacity: .55; }
.choice .ct { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-weight: 600; }
.choice .cd { font-size: var(--fs-13); color: var(--muted); }
.choices .stack > .btn { align-self: flex-start; }
.vchoice { position: relative; display: flex; min-width: 0; }
.vchoice .choice { flex: 1 1 auto; }
.vchoice .ct { padding-right: var(--sp-12); min-height: 44px; }
.vplay { all: unset; box-sizing: border-box; cursor: pointer; position: absolute; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--accent); transition: background-color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.vplay:hover { background: var(--fill); }
.vplay:active { transform: scale(.94); }
.vplay:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.vplay svg { width: 14px; height: 14px; fill: currentColor; stroke: none; margin-left: 2px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-3); }
.chipset { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { all: unset; box-sizing: border-box; cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-13); color: var(--ink-2); background: var(--surface); }
.chip[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.chip:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }

/* Inline confirm / notices */
.confirm { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-4); border-radius: 14px; background: var(--accent-soft); color: var(--ink); }
.confirm.danger { background: var(--bad-soft); }
.confirm .grow { font-size: var(--fs-15); }
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--sunk); font-size: var(--fs-13); color: var(--ink-2); }
.notice svg { margin-top: 1px; color: var(--muted); }
.notice .grow { flex: 1 1 200px; }
.notice.act { align-items: center; padding-block: var(--sp-2); }
.notice.act > svg { margin-top: 0; }
.notice .btn { background: var(--surface); }
.notice .btn:hover { background: var(--fill); }
.oklist { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-13); color: var(--ink-2); }
.oklist span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.oklist svg { width: 15px; height: 15px; color: var(--ok); stroke-width: 2.2; }
.notice.warn { background: var(--warn-soft); color: var(--ink); }
.notice.warn svg { color: var(--warn); }
.notice.ok { background: var(--ok-soft); color: var(--ink); }
.notice.ok svg { color: var(--ok); }
.notice.bad { background: var(--bad-soft); color: var(--ink); }
.notice.bad svg { color: var(--bad); }
.secret { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: 14px; border: 1.5px dashed var(--accent-fill); background: var(--accent-soft); }
.secret input { font-family: var(--mono); font-size: var(--fs-13); background: var(--surface); }

/* Empty, loading */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); }
.empty .ico { width: 48px; height: 48px; border-radius: 50%; }
.empty .ico svg { width: 22px; height: 22px; }
.empty p { color: var(--muted); font-size: var(--fs-15); max-width: 42ch; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent-fill); animation: spin .8s linear infinite; flex: none; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Skeletons: the shape of the list that's coming, with a soft sweep. */
.skel { display: block; height: 12px; border-radius: 6px; background: var(--fill); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-hi), transparent); animation: sweep 1.2s var(--ease-out) infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.skel-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); min-height: 62px; }
.list > .skel-row:first-child { border-top: 0; }
.skel-row .skel.sq { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.skel-row .lines { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.skel-row .pill { width: 76px; height: 22px; border-radius: 999px; flex: none; }
@media (max-width: 560px) { .skel-row { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); } .skel-row .skel.sq { display: none; } }

/* Motion: a page settles in; list rows follow, a few ms apart; leaving rows fold away. */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.page.enter { animation: page-in var(--dur-2) var(--ease-out) both; }
.page.enter .list > .row, .list.reveal > .row { animation: row-in var(--dur-2) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }
.row.leaving { overflow: hidden; }

/* Tables */
.tw { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-15); }
.tw table { min-width: 620px; }
th, td { text-align: left; padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); vertical-align: middle; }
th { font: 500 var(--fs-13)/1.2 var(--font); color: var(--muted); border-top: 0; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .s, th .s { display: block; font-size: var(--fs-13); font-weight: 400; color: var(--muted); }
th .s { margin-top: 3px; }
td > b { font-weight: 500; }
th.c, td.c { text-align: center; }

/* Timeline */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; position: relative; padding-bottom: var(--sp-4); }
.tl li:not(:last-child)::before { content: ""; position: absolute; left: 16.5px; top: 36px; bottom: 2px; width: 1.5px; background: var(--line); }
.tl li:last-child { padding-bottom: 0; }
.tl .tt { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-2); min-width: 0; }
.tl .tt b { font-weight: 600; font-size: var(--fs-15); }
.tl .tt span { font-size: var(--fs-13); color: var(--muted); }
.tl time { font-size: var(--fs-13); color: var(--faint); padding-top: var(--sp-2); font-variant-numeric: tabular-nums; }

/* Transcript */
.tx { display: flex; flex-direction: column; gap: var(--sp-3); }
.msg { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
.msg .bub { padding: var(--sp-2) var(--sp-3); border-radius: 18px; font-size: var(--fs-15); line-height: 1.42; background: var(--fill); color: var(--ink); }
.msg.a { align-self: flex-start; }
.msg.a .bub { border-bottom-left-radius: 6px; }
.msg.c { align-self: flex-end; align-items: flex-end; }
.msg.c .bub { background: var(--accent-soft); border-bottom-right-radius: 6px; }
.msg.h { align-self: flex-end; align-items: flex-end; }
.msg.h .bub { background: var(--accent-fill); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg .meta { font-size: var(--fs-12); color: var(--faint); padding-inline: var(--sp-2); }
.msg .gl { font-size: var(--fs-13); color: var(--muted); padding-inline: var(--sp-2); }
.msg.dim .bub { opacity: .45; }
.msg.now .bub { box-shadow: 0 0 0 2px var(--accent-ring); }
.sys { align-self: center; font-size: var(--fs-12); color: var(--muted); background: var(--sunk); padding: var(--sp-1) var(--sp-3); border-radius: 999px; text-align: center; max-width: 100%; }
.tool { align-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); line-height: 1.4; color: var(--muted); padding: 2px var(--sp-2); overflow-wrap: anywhere; text-align: center; }
.tool svg { width: 14px; height: 14px; color: var(--ok); stroke-width: 2.2; }
.typing { align-self: flex-start; display: inline-flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: 18px; background: var(--fill); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { transform: translateY(-3px); opacity: .5; } }
.replies { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* Player */
.player { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--sunk); }
.play { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.play:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 3px; }
.play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
input[type=range] { width: 100%; accent-color: var(--accent-fill); min-width: 0; }
.wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.wave i { width: 3px; border-radius: 2px; background: var(--accent-fill); height: 30%; animation: wave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .15s; } .wave i:nth-child(3) { animation-delay: .3s; } .wave i:nth-child(4) { animation-delay: .45s; } .wave i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 50% { height: 100%; } }

/* Metrics */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-15); margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.meter { height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); }
.meter.warn i { background: var(--warn); }
.spark { width: 100%; height: 40px; display: block; color: var(--accent-fill); overflow: visible; }
.spark.warn { color: var(--warn); } .spark.ok { color: var(--ok); }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; height: 120px; }
.bars div { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); height: 100%; justify-content: flex-end; }
.bars i { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--fill); }
.bars div.today i { background: var(--accent-fill); }
.bars span { font-size: var(--fs-12); color: var(--muted); }
.big { font: 600 var(--fs-40)/1.05 var(--font-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

/* Tabs (agent editor) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: var(--sp-3) var(--sp-4); font: 500 var(--fs-15)/1.2 var(--font); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-fill); }
.tabs button:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -2px; border-radius: 6px; }
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); counter-reset: l; }
.ladder li { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.ladder li.off { opacity: .55; }
.ladder .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 600 var(--fs-13)/1 var(--font); flex: none; }
.team-tree { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }
.team-tree .node { padding: var(--sp-3) var(--sp-4); border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-13); text-align: center; }
.team-tree .node.main { border-color: var(--accent-fill); color: var(--accent); font-weight: 600; }
.team-tree .kids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--sp-3); width: 100%; }
.team-tree .node.here { background: var(--accent-soft); }
details.disclose { border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow-1); }
details.disclose > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-radius: 16px; }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
details.disclose > summary .chev { transition: transform .2s; color: var(--faint); }
details.disclose[open] > summary .chev { transform: rotate(90deg); }
details.disclose .body { padding: 0 var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
pre.code { margin: 0; padding: var(--sp-4) var(--sp-4); border-radius: 12px; background: var(--sunk); font: var(--fs-13)/1.6 var(--mono); color: var(--ink-2); overflow-x: auto; white-space: pre; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-4); }
.plan-grid .choice .price { font: 600 var(--fs-24)/1.1 var(--font-display); }

/* Toast + tour */
.toast { position: fixed; left: 50%; width: max-content; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 0); z-index: 60; background: var(--toast); color: var(--toast-ink); padding: var(--sp-3) var(--sp-4); border-radius: 18px; font-size: var(--fs-15); font-weight: 500; box-shadow: var(--shadow-2); display: flex; gap: var(--sp-2); align-items: center; max-width: calc(100vw - 32px); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.toast svg { width: 16px; height: 16px; stroke-width: 2.4; }
.toast.off { transform: translate(-50%, 24px); opacity: 0; visibility: hidden; transition: transform var(--dur-1) ease-in, opacity var(--dur-1), visibility 0s var(--dur-1); }
/* Read-only, sheet, feature states */
fieldset.ro { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.btn:disabled, .choice:disabled, .chip:disabled, .seg button:disabled { opacity: .45; cursor: default; pointer-events: none; }
fieldset.ro[disabled] .choice, fieldset.ro[disabled] .chip, fieldset.ro[disabled] .seg button, fieldset.ro[disabled] .btn { opacity: .72; }
fieldset.ro[disabled] input, fieldset.ro[disabled] textarea, fieldset.ro[disabled] select { background: var(--sunk); color: var(--ink-2); }
.row a.main-t { color: var(--ink); text-decoration: none; }
.row a.main-t:hover b { text-decoration: underline; }
.nav .lock { margin-left: auto; color: var(--faint); width: 15px; height: 15px; }
.nav[aria-current="page"] .lock { color: var(--accent); }
.nav.locked { color: var(--muted); }
button.nav { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 8px; color: var(--muted); font-size: var(--fs-15); width: 100%; }
button.nav:hover { background: var(--fill); }
button.nav:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.beta { font: 600 var(--fs-11)/1 var(--font); letter-spacing: .02em; padding: 3px var(--sp-2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-left: auto; }
.nav[aria-current="page"] .beta { background: var(--surface); color: var(--accent); }
.scrim { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: grid; place-items: center; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: var(--sp-6); }
.sheet { width: 100%; max-width: 440px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); max-height: calc(100vh - 48px); overflow-y: auto; }
.sheet .x { margin-left: auto; }
.sheet-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.sheet-ico svg { width: 24px; height: 24px; }
.scrim { animation: fade-in var(--dur-1) ease-out both; }
.scrim .sheet { animation: pop-in var(--dur-2) var(--ease-out) both; }
/* More: the rest of the menu, as a bottom sheet (phones). */
.scrim.bottom { place-items: end center; padding: 0; padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-12)); }
.more { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-2);
  padding: var(--sp-2) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + var(--sp-4)) max(16px, env(safe-area-inset-left, 0px)); animation: sheet-up var(--dur-2) var(--ease-out) both; }
.more .grab { width: 36px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto var(--sp-3); }
.more-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-1) var(--sp-2); }
.more h4 { font: 600 var(--fs-13)/1 var(--font); color: var(--muted); padding: var(--sp-4) var(--sp-1) var(--sp-2); margin: 0; }
.more .group { background: var(--sunk); border-radius: 14px; overflow: hidden; }
.more-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: 0 var(--sp-4); color: var(--ink); font-size: var(--fs-17); border-top: 1px solid var(--line-soft); }
.more .group > .more-row:first-child { border-top: 0; }
.more-row:hover, .more-row:focus-visible { background: var(--fill); text-decoration: none; }
.more-row:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -2px; }
.more-row .ri { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); flex: none; }
.more-row[aria-current="page"] { color: var(--accent); font-weight: 600; }
.more-row[aria-current="page"] .ri { background: var(--accent-soft); color: var(--accent); }
.more-row .end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); color: var(--faint); }
.more-row .end svg.i { width: 16px; height: 16px; }
.more-row .beta { margin-left: 0; }
.search { flex: 1 1 220px; max-width: 320px; }
@media (max-width: 560px) { .search { max-width: none; flex-basis: 100%; } .card-head > .seg { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } }
.pstack { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.mini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); font: 600 var(--fs-13)/1 var(--font); flex: none; }
.state-sel { width: auto; min-width: 136px; min-height: 34px; padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--sp-3); font-size: var(--fs-13); }
input.cell-n { width: 136px; min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-13); text-align: right; }
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-13); color: var(--muted); }
.mgmt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; }
@media (max-width: 560px) { .mgmt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .btn, .btn.sm { min-height: 44px; }
  .btn.sm { padding-inline: var(--sp-4); }
  .iconbtn, .avatar { width: 44px; height: 44px; }
  .seg button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .chip { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--sp-4); }
  .tabs button { min-height: 44px; display: inline-flex; align-items: center; }
  input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=time], input[type=search], select { min-height: 44px; font-size: var(--fs-17); }
  .viewas select { min-height: 44px; }
  .state-sel, .cell-n { min-height: 44px; }
  .switch { width: 51px; height: 31px; }
  .switch span::after { width: 27px; height: 27px; }
  .switch input:checked + span::after { transform: translateX(20px); }
  .card { padding: var(--sp-4); }
}
/* ---------- v3 ---------- */
/* Brand switch (top bar) and brand marks: a brand's initials on its own colour. */
.ws-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; max-width: 100%; padding: var(--sp-1) var(--sp-2); border-radius: 8px; font: 500 var(--fs-13)/1 var(--font); color: var(--ink-2); }
.ws-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-btn:hover { background: var(--fill); }
.ws-btn:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.ws-btn.static { cursor: default; color: var(--muted); }
.ws-btn.static:hover { background: transparent; }
.ws-btn svg.i { width: 14px; height: 14px; color: var(--faint); }
.bmark { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--bm, var(--accent-fill)); color: #fff; font: 700 9px/1 var(--font); letter-spacing: .02em; }
.bmark.md { width: 30px; height: 30px; border-radius: 9px; font-size: var(--fs-11); }
.bmark.lg { width: 48px; height: 48px; border-radius: 13px; font-size: var(--fs-15); }
.menu.bm { right: auto; left: var(--mx, 16px); width: 280px; }
.menu .mh { font: 600 var(--fs-12)/1 var(--font); color: var(--muted); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-1) 0; }
.menu button .ck { margin-left: auto; color: var(--accent); }
.menu button .sub { display: block; font-size: var(--fs-12); color: var(--muted); }
.app.auth #wn-btn { display: none; }
.nb-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bar-solid); }

/* Viewing as (impersonation): a solid band plus a thin frame round the whole window, so it can't be missed. */
.banner.imp { background: var(--imp-bg); color: var(--imp-ink); border-bottom: 0; }
.banner.imp .btn { background: var(--imp-ink); color: var(--imp-bg); font-weight: 600; }
.banner.imp .btn:hover { opacity: .92; }
.banner.imp .btn:focus-visible { outline-color: var(--imp-ink); }
.banner .ichip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 22px; padding: 0 var(--sp-2); border-radius: 999px; background: var(--imp-chip); font: 600 var(--fs-12)/1 var(--font); white-space: nowrap; }
.banner .ichip svg.i { width: 13px; height: 13px; }
.app.imp-on::after { content: ""; position: fixed; inset: 0; border: 3px solid var(--imp-bg); pointer-events: none; z-index: 46; }
/* Agent flow: who acts, under which rules, on which channel. Columns on a desktop, stacked on a phone. */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1.15fr) 18px minmax(0, 1fr) 18px minmax(0, .9fr); gap: var(--sp-2); align-items: center; }
.flow-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.flow-col > h4 { font: 600 var(--fs-12)/1 var(--font); color: var(--muted); padding-bottom: var(--sp-1); }
.farrow { color: var(--faint); display: grid; place-items: center; }
.farrow svg.i { width: 18px; height: 18px; }
.fnode { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-13); min-width: 0; transition: border-color var(--dur-1), background-color var(--dur-1); }
.fnode b { font-weight: 600; display: flex; align-items: center; gap: var(--sp-1); }
.fnode b svg.i { width: 13px; height: 13px; color: var(--faint); }
.fnode > span { color: var(--muted); font-size: var(--fs-12); line-height: 1.35; }
.fnode:hover { border-color: var(--faint); }
.fnode:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.fnode.main { border-width: 1.5px; border-color: var(--accent-fill); }
.fnode.gate { border-color: var(--ok); }
.fnode.off { border-style: dashed; background: var(--surface-2); }
.fnode.lit { background: var(--accent-soft); border-color: var(--accent-fill); }
.fnode[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-ring); }
.flow-detail { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .farrow svg.i { transform: rotate(90deg); }
  .flow-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .flow-col > h4 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .skel::after { display: none; }
}
/* v3 sign-in */
/* Sign-in */
.auth-wrap { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 400px; padding: var(--sp-8) var(--sp-8); gap: var(--sp-4); box-shadow: var(--shadow-2); border-radius: 22px; }
.auth-card .mark { width: 52px; height: 52px; border-radius: 14px; }
.auth-card .mark svg { width: 36px; height: 36px; stroke-width: 2.1; }
.code6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.code6 input { text-align: center; font: 600 var(--fs-24)/1 var(--font-display); padding: var(--sp-3) 0; min-height: 52px; }
.code6.bad input { border-color: var(--bad); }
.quick { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
/* Sign-in suite */
.divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--faint); font-size: var(--fs-13); }
.divider::before, .divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.btn.outline { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.outline:hover { background: var(--sunk); }
.gmark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 var(--fs-12)/1 var(--font); background: var(--ink); color: var(--surface); }
.lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.lbl-row .btn.plain { min-height: 0; padding: 0; font-size: var(--fs-13); }
.lbl-row .btn.plain:hover { background: transparent; text-decoration: underline; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-13); color: var(--muted); }
.rules li { display: flex; gap: var(--sp-2); align-items: center; }
.rules li.ok { color: var(--ok); }
.rules svg.i { width: 14px; height: 14px; stroke-width: 2.2; }
.strength { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.strength i { height: 4px; border-radius: 2px; background: var(--fill); }
.strength i.on { background: var(--ok); }
.strength.weak i.on { background: var(--warn); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); padding: var(--sp-4); border-radius: 14px; background: var(--sunk); font: 600 var(--fs-15)/1.4 var(--mono); text-align: center; font-variant-numeric: tabular-nums; }
.secret-key { font-family: var(--mono); font-size: var(--fs-13); letter-spacing: .06em; overflow-wrap: anywhere; color: var(--ink-2); }
.auth-foot { text-align: center; font-size: var(--fs-13); color: var(--muted); }
.auth-foot .btn.plain { min-height: 0; padding: 0 var(--sp-1); font-size: var(--fs-13); }
.auth-card .sheet-ico { margin: 0 auto; }
.inline-code input { font: 600 var(--fs-20)/1 var(--mono); letter-spacing: .3em; text-align: center; }

/* ---- This page: review bar + reading pages + the framed portal mock ---- */
:root { --rbar-h: 54px; --hatch: rgba(0, 0, 0, .07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hatch: rgba(255, 255, 255, .08); } }
:root[data-theme="dark"] { --hatch: rgba(255, 255, 255, .08); }

/* Review bar: the page's own sections, always on top. */
.rbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line-soft); }
.rbar-in { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: var(--rbar-h); padding-block: var(--sp-2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); flex-wrap: wrap; }
.rtitle { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--ink); text-decoration: none; }
.rtitle:hover { text-decoration: none; }
.rtitle b { font: 600 var(--fs-17)/1.1 var(--font-display); letter-spacing: -.01em; white-space: nowrap; }
.rtitle .tag { font: 500 var(--fs-12)/1 var(--font); color: var(--muted); white-space: nowrap; padding-left: var(--sp-2); border-left: 1px solid var(--line); }
.rtabs { display: inline-flex; background: var(--fill); border-radius: 10px; padding: 2px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-inline: auto; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs a { display: inline-flex; align-items: center; min-height: 32px; padding: var(--sp-1) var(--sp-3); border-radius: 8px; font: 500 var(--fs-13)/1.2 var(--font); color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.rtabs a:hover { color: var(--ink); text-decoration: none; }
.rtabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--seg-shadow); }
.rtabs a:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: -2px; }
.rctl { display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 960px) {
  .rbar-in { padding-bottom: var(--sp-2); }
  .rtabs { order: 3; width: 100%; margin: 0; }
  .rtabs a { flex: 1 0 auto; justify-content: center; min-height: 36px; }
  .rctl { margin-left: auto; }
}
@media (max-width: 560px) {
  .rtabs { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .rtabs a { min-height: 40px; }
  .rtitle .tag { display: none; }
  .rctl .ex .long { display: none; }
}

/* Reading pages */
.doc { max-width: 1060px; margin: 0 auto; padding-block: var(--sp-8) calc(var(--sp-12) * 2); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: var(--sp-12); }
.doc.enter { animation: page-in var(--dur-2) var(--ease-out) both; }
.hero { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero h1 { font-size: var(--fs-40); letter-spacing: -.028em; }
.lede { font-size: var(--fs-17); color: var(--muted); max-width: 66ch; line-height: 1.5; }
.sec { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.sec-h { display: flex; flex-direction: column; gap: var(--sp-1); }
.sec-h h2 { font-size: var(--fs-24); letter-spacing: -.018em; }
.sec-h p { color: var(--muted); max-width: 70ch; }
.kicker { font: 600 var(--fs-12)/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.prose { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink-2); max-width: 70ch; }
.prose li { margin: 0; }
ul.clean, ol.clean { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--ink-2); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-2); align-items: start; color: var(--ink-2); }
.checks li svg.i { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.2; }
.checks.ok svg.i { color: var(--ok); } .checks.no svg.i { color: var(--faint); }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); }
.stepc { gap: var(--sp-3); }
.stepc .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 600 var(--fs-13)/1 var(--font); flex: none; }
.vis { border-radius: 12px; background: var(--sunk); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 112px; justify-content: center; }
.wa-b { align-self: flex-end; max-width: 92%; background: var(--accent-soft); color: var(--ink); border-radius: 16px 16px 6px 16px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-13); line-height: 1.4; }
.wa-b.in { align-self: flex-start; background: var(--surface); border-radius: 16px 16px 16px 6px; }
.next-nav { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: var(--sp-6); }
.next-nav a { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink); min-width: 200px; text-decoration: none; }
.next-nav a:hover { border-color: var(--line); text-decoration: none; }
.next-nav a span { font-size: var(--fs-13); color: var(--muted); }
.next-nav a b { font-weight: 600; color: var(--accent); }
.next-nav a.fwd { margin-left: auto; text-align: right; }

/* Lines picture */
.lines-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-6); align-items: center; }
.lpill { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--sunk); font-size: var(--fs-13); min-width: 0; }
.lpill b { font-weight: 600; }
.lpill.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.lpill .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .lines-vis { grid-template-columns: minmax(0, 1fr); } }

/* 80 / 20 bar */
.split { display: flex; height: 52px; border-radius: 14px; overflow: hidden; font: 600 var(--fs-13)/1.2 var(--font); }
.split > div { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--sp-4); min-width: 0; }
.split .code { flex: 80 1 0; background: var(--fill); color: var(--ink); }
.split .ai { flex: 20 1 0; background: var(--accent-fill); color: var(--accent-ink); padding-inline: var(--sp-3); }
.split span { font-weight: 400; font-size: var(--fs-12); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .split .code span { display: none; } }
.tag-code, .tag-ai { display: inline-flex; align-items: center; gap: 3px; font: 600 var(--fs-11)/1 var(--font); padding: 3px 6px; border-radius: 6px; letter-spacing: .02em; white-space: nowrap; }
.tag-code { background: var(--fill); color: var(--ink-2); }
.tag-ai { background: var(--accent-fill); color: var(--accent-ink); }
.fnode .tag-code, .fnode .tag-ai { margin-left: auto; }
.fnode.ai { border-color: var(--accent-fill); border-style: dashed; }

/* Voice path chips */
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); }
.chain .lk { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); font-size: var(--fs-13); min-width: 0; flex: 1 1 150px; }
.chain .lk b { font-weight: 600; font-family: var(--mono); font-size: var(--fs-12); color: var(--accent); }
.chain .lk span { color: var(--muted); font-size: var(--fs-12); }
.chain .ar { display: grid; place-items: center; color: var(--faint); flex: none; }
.chain .ar svg.i { width: 16px; height: 16px; }
@media (max-width: 560px) { .chain { flex-direction: column; } .chain .ar svg.i { transform: rotate(90deg); } .chain .lk { flex-basis: auto; } }

/* Failure cards */
.fail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); }
.fail { flex-direction: row; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); }
.fail .grow { display: flex; flex-direction: column; gap: var(--sp-1); }
.fail .grow span { color: var(--muted); font-size: var(--fs-13); }

/* Tenancy tree */
.ten { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.ten-n { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.ten-n .h { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; flex-wrap: wrap; }
.ten-n .k { font: 600 var(--fs-11)/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ten-n p { font-size: var(--fs-13); color: var(--muted); }
.ten-n.top { border-color: var(--ink-2); }
.ten-n.org { border-color: var(--accent-fill); border-width: 1.5px; }
.ten-link { width: 1.5px; height: 22px; background: var(--line); margin-left: 32px; }
.ten-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); position: relative; padding-top: 22px; }
.ten-stores::before { content: ""; position: absolute; top: 0; left: 32px; right: calc(50% - 32px - var(--sp-3) / 2); height: 22px; border: 1.5px solid var(--line); border-bottom: 0; border-right-width: 1.5px; border-radius: 0 10px 0 0; border-left: 0; }
.ten-stores::after { content: ""; position: absolute; top: 0; left: 32px; width: 1.5px; height: 22px; background: var(--line); }
.mini-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.mini-chips span { font-size: var(--fs-12); padding: 3px var(--sp-2); border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.ten-share { margin-top: var(--sp-3); border: 1.5px dashed var(--accent-fill); border-radius: 12px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-13); color: var(--ink-2); display: flex; gap: var(--sp-2); align-items: center; }
.ten-share svg.i { color: var(--accent); }
@media (max-width: 560px) {
  .ten-stores { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 20px; border-left: 1.5px solid var(--line); margin-left: 32px; }
  .ten-stores::before, .ten-stores::after { display: none; }
  .ten-stores > .ten-n { position: relative; }
  .ten-stores > .ten-n::before { content: ""; position: absolute; left: -21px; top: 24px; width: 20px; height: 1.5px; background: var(--line); }
  .ten-stores { padding-block: var(--sp-3) 0; }
}

/* Tables that become cards on a phone */
.tcard { overflow: hidden; }
.tcard table { font-size: var(--fs-15); }
.tcard th, .tcard td { padding: var(--sp-3) var(--sp-4); vertical-align: top; }
.tcard td.k { font-weight: 600; }
@media (max-width: 640px) {
  .stack-t table, .stack-t tbody, .stack-t tr, .stack-t td { display: block; width: 100%; }
  .stack-t thead { display: none; }
  .stack-t tr { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-soft); }
  .stack-t tr:first-child { border-top: 0; }
  .stack-t td { border: 0; padding: 2px 0; }
  .stack-t td[data-l]::before { content: attr(data-l) " · "; color: var(--muted); font-size: var(--fs-13); }
  .stack-t tr.grp td { padding: var(--sp-2) 0; background: transparent; }
}

/* Flow chart (HTML, so it reads at any width) */
.fc { display: flex; flex-direction: column; position: relative; }
.fc-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: center; }
.fc-node { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 14px; border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }
.fc-node .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--sunk); color: var(--ink-2); }
.fc-node .ic svg.i { width: 16px; height: 16px; }
.fc-node .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fc-node .tx b { font-weight: 600; font-size: var(--fs-15); line-height: 1.25; }
.fc-node .tx span { font-size: var(--fs-12); color: var(--muted); line-height: 1.35; }
.fc-node.q { background: var(--surface-2); border-style: dashed; }
.fc-node.q .ic { background: transparent; border: 1.5px solid var(--line); border-radius: 50%; }
.fc-node.start .ic { background: var(--ink); color: var(--surface); }
.fc-node.end .ic { background: var(--warn-soft); color: var(--warn); }
.fc-br { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fc-b { position: relative; display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); font-size: var(--fs-13); color: var(--ink-2); line-height: 1.4; transition: opacity var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2); }
.fc-b::before { content: ""; position: absolute; left: -17px; top: 50%; width: 16px; height: 1.5px; background: var(--line); }
.fc-b .dot { margin-top: 6px; }
.fc-b b { font-weight: 600; color: var(--ink); }
.fc-down { display: flex; align-items: center; gap: var(--sp-2); height: 30px; padding-left: 26px; position: relative; font-size: var(--fs-12); color: var(--muted); }
.fc-down::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 6px; width: 1.5px; background: var(--line); transition: background-color var(--dur-2); }
.fc-down::after { content: ""; position: absolute; left: 22.5px; bottom: 2px; border: 4.5px solid transparent; border-top: 6px solid var(--line); border-bottom: 0; transition: border-color var(--dur-2); }
.fc-down span { margin-left: 14px; }
.fc-any { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px dashed var(--line); }
.fc-any h4 { grid-column: 1 / -1; font: 600 var(--fs-12)/1 var(--font); color: var(--muted); }
.fc.on .fc-node, .fc.on .fc-b { opacity: .38; }
.fc.on .fc-down { opacity: .5; }
.fc .lit { opacity: 1 !important; }
.fc-node.lit, .fc-b.lit { background: var(--accent-soft); border-color: var(--accent-fill); }
.fc-node.lit .ic { background: var(--accent-fill); color: var(--accent-ink); border-color: var(--accent-fill); }
.fc-down.lit { color: var(--accent); }
.fc-down.lit::before { background: var(--accent-fill); }
.fc-down.lit::after { border-top-color: var(--accent-fill); }
.fc .cur { box-shadow: 0 0 0 4px var(--accent-ring); }
@media (max-width: 700px) {
  .fc-row { grid-template-columns: minmax(0, 1fr); }
  .fc-br { padding-left: 26px; margin-left: 0; position: relative; gap: var(--sp-2); }
  .fc-br:not(:empty) { padding-top: var(--sp-2); }
  .fc-b { margin-left: 18px; }
  .fc-b::before { left: -19px; width: 18px; }
  .fc-br:not(:empty)::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 18px; width: 1.5px; background: var(--line); }
}

/* Scenario player */
.flow-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.flow-grid > .player-col { position: sticky; top: calc(var(--rbar-h) + 16px); }
@media (max-width: 960px) { .flow-grid { grid-template-columns: minmax(0, 1fr); } .flow-grid > .player-col { position: static; order: -1; } }
.scen-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.scen-pick .chip { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pl-ctl { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.prog { height: 4px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--accent-fill); transition: width var(--dur-2) var(--ease-out); }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); position: relative; padding-bottom: var(--sp-4); }
.st:not(:last-child)::before { content: ""; position: absolute; left: 16.5px; top: 36px; bottom: 2px; width: 1.5px; background: var(--line); }
.st:last-child { padding-bottom: 0; }
.st .ico { width: 34px; height: 34px; }
.st .ico svg.i { width: 16px; height: 16px; }
.st .bd { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; min-width: 0; }
.st .meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-12); color: var(--faint); }
.st .meta b { color: var(--muted); font-weight: 600; }
.st .bd > b { font-weight: 600; }
.st .bd > span { font-size: var(--fs-13); color: var(--muted); }
.st .wa-b { align-self: flex-start; margin-top: var(--sp-1); }
.st .wa-b.in { background: var(--sunk); }
.st.now .ico { box-shadow: 0 0 0 3px var(--accent-ring); }
.st.reveal { animation: row-in var(--dur-2) var(--ease-out) both; }
.outc { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--sunk); flex-wrap: wrap; }

/* Hours bars */
.hrs { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
.hrs .lb { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-13); }
.hrs .lb b { font-weight: 600; font-size: var(--fs-15); }
.hrs .lb span { color: var(--muted); font-variant-numeric: tabular-nums; }
.hbar { position: relative; height: 26px; border-radius: 8px; background: var(--sunk); overflow: hidden; }
.hbar i { position: absolute; top: 0; bottom: 0; background: var(--accent-fill); opacity: .85; }
.hbar i.msg { background: var(--ok); opacity: .7; }
.hbar i.brk { background: repeating-linear-gradient(135deg, var(--hatch) 0 4px, transparent 4px 8px), var(--surface); opacity: 1; box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line); }
.hticks { position: relative; height: 16px; font-size: var(--fs-11); color: var(--faint); font-variant-numeric: tabular-nums; }
.hticks span { position: absolute; transform: translateX(-50%); }
.hticks span:first-child { transform: none; } .hticks span:last-child { transform: translateX(-100%); }
@media (max-width: 560px) { .hrs { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1) 0; } .hrs .hbar { margin-bottom: var(--sp-2); } }

/* ---- The portal mock ---- */
.xwrap { max-width: 1440px; margin: 0 auto; padding-block: var(--sp-4) var(--sp-12); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: var(--sp-3); }
.mockbar { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); border: 1.5px dashed var(--line); border-radius: 14px; font-size: var(--fs-13); color: var(--muted); }
.mockbar > b { font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--sp-2); }
.mockbar .grp { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mockbar select { width: auto; min-height: 32px; padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--sp-3); font-size: var(--fs-13); }
.mockbar .seg button { padding: 6px var(--sp-3); }
.frame { position: relative; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--bg); overflow: clip; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 40px rgba(0, 0, 0, .05); }
.frame.imp-on { box-shadow: 0 0 0 3px var(--imp-bg); }
.frame .top { position: relative; top: auto; z-index: 20; background: var(--bar-solid); }
.frame .shell { min-height: 780px; }
.frame .side-in { top: calc(var(--rbar-h) + 16px); max-height: calc(100vh - var(--rbar-h) - 32px); }
.frame .main { padding-top: var(--sp-6); }
.portal-ro { pointer-events: auto; }
@media (max-width: 960px) { .frame .side-in { top: calc(var(--rbar-h) + 60px); } }
@media (max-width: 860px) {
  .xwrap { padding-left: 0; padding-right: 0; padding-top: var(--sp-3); }
  .mockbar { margin-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .frame { border-radius: 0; border-inline: 0; box-shadow: none; }
  .frame.imp-on { box-shadow: inset 0 0 0 3px var(--imp-bg); }
}
body:not(.in-x) .tabbar { display: none !important; }
body:not(.in-x) .toast { bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.fbanner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--warn-soft); color: var(--ink); font-size: var(--fs-15); }
.fbanner > svg.i { color: var(--warn); }
.fbanner.bad { background: var(--bad-soft); } .fbanner.bad > svg.i { color: var(--bad); }
.fbanner .grow { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; }
.fbanner .grow span { font-size: var(--fs-13); color: var(--ink-2); }
.fbanner .btn { background: var(--surface); }
.spill { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-3); border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft); font: 500 var(--fs-13)/1 var(--font); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.spill:hover { text-decoration: none; border-color: var(--line); }

/* Orders board */
.ofilters { display: flex; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; align-items: center; padding: var(--sp-4) var(--sp-6) var(--sp-3); }
.ofilters .search { flex: 1 1 240px; max-width: 360px; position: relative; }
.ofilters .search svg.i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.ofilters .search input { padding-left: 36px; }
.ofilters .state-sel { min-width: 0; width: auto; }
.statebar { padding: 0 var(--sp-6) var(--sp-3); }
.statebar .seg button .c { color: var(--faint); margin-left: 4px; font-variant-numeric: tabular-nums; }
.statebar .seg button[aria-pressed="true"] .c { color: var(--muted); }
.ogrid { display: grid; grid-template-columns: 28px minmax(0, 1.5fr) 148px minmax(0, 1.25fr) 92px 136px 16px; gap: var(--sp-3); align-items: center; }
.ohead { padding: var(--sp-2) var(--sp-6); border-top: 1px solid var(--line-soft); font: 500 var(--fs-12)/1.2 var(--font); color: var(--muted); background: var(--surface-2); }
.orow { padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); cursor: pointer; min-height: 64px; transition: background-color var(--dur-1); }
.orow:hover { background: var(--sunk); }
.orow.sel { background: var(--accent-soft); }
.ck { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; cursor: pointer; }
.ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-fill); cursor: pointer; }
.oname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oname a { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oname a:hover { text-decoration: underline; }
.oname > span { font-size: var(--fs-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onext { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.onext .ni { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sunk); color: var(--ink-2); flex: none; }
.onext .ni svg.i { width: 15px; height: 15px; }
.onext .ni.live { background: var(--bad-soft); color: var(--bad); }
.onext .ni.task { background: var(--warn-soft); color: var(--warn); }
.onext .ni.pause { background: var(--fill); color: var(--muted); }
.onext .nt { display: flex; flex-direction: column; min-width: 0; }
.onext .nt b { font-weight: 500; font-size: var(--fs-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onext .nt span { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onext.done .nt b { color: var(--muted); font-weight: 400; }
.att { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-12); color: var(--muted); font-variant-numeric: tabular-nums; }
.att span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.att svg.i { width: 12px; height: 12px; }
.who { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink-2); min-width: 0; }
.who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 var(--fs-11)/1 var(--font); background: var(--fill); color: var(--ink-2); flex: none; }
.av.agent { background: var(--accent-soft); color: var(--accent); }
.av.agent svg.i { width: 14px; height: 14px; }
.lbadge { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--fs-11)/1 var(--font); padding: 3px 6px; border-radius: 6px; white-space: nowrap; vertical-align: 1px; margin-left: var(--sp-1); }
.lbadge.grey { background: var(--fill); color: var(--ink-2); }
.lbadge.black { background: var(--ink); color: var(--surface); }
.lbadge.hv { background: var(--accent-soft); color: var(--accent); }
.o-m { display: none; }
@media (max-width: 1180px) { .ogrid { grid-template-columns: 28px minmax(0, 1.5fr) 140px minmax(0, 1.3fr) 136px 16px; } .ogrid > .c-att { display: none; } }
@media (max-width: 760px) {
  .ofilters, .statebar { padding-inline: var(--sp-4); }
  .ogrid { grid-template-columns: 28px minmax(0, 1fr) 16px; }
  .ogrid > .c-st, .ogrid > .c-next, .ogrid > .c-who, .ogrid > .c-att { display: none; }
  .ohead { display: none; }
  .orow { padding: var(--sp-3) var(--sp-4); align-items: start; }
  .o-m { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); font-size: var(--fs-13); color: var(--ink-2); }
  .o-m svg.i { width: 14px; height: 14px; color: var(--muted); }
  .ofilters .search { max-width: none; flex-basis: 100%; }
  .ofilters .state-sel { flex: 1 1 140px; }
}
.bulk { position: sticky; bottom: var(--sp-4); z-index: 10; margin: 0 var(--sp-4) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: 16px; background: var(--toast); color: var(--toast-ink); box-shadow: var(--shadow-2); animation: pop-in var(--dur-2) var(--ease-out) both; }
.bulk b { font-weight: 600; margin-right: auto; }
.bulk .btn { background: var(--on-fill); color: inherit; }
.bulk .btn:hover { background: var(--on-fill); opacity: .9; }
:root[data-theme="dark"] .bulk .btn { background: rgba(0, 0, 0, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bulk .btn { background: rgba(0, 0, 0, .08); } }
@media (max-width: 860px) { .bulk { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3)); } }

.kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--sp-6) var(--sp-4); scroll-padding-inline: var(--sp-6); }
.kcol { scroll-snap-align: start; background: var(--sunk); border-radius: 16px; padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); min-height: 220px; min-width: 0; }
.kcol h3 { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-1); font-size: var(--fs-13); }
.kcol h3 .c { margin-left: auto; font: 600 var(--fs-12)/1 var(--font); color: var(--muted); }
.kcard { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); background: var(--surface); border-radius: 12px; border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; min-width: 0; transition: border-color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.kcard:hover { text-decoration: none; border-color: var(--line); }
.kcard:active { transform: scale(.99); }
.kcard b { font-weight: 600; display: flex; align-items: center; gap: var(--sp-1); }
.kcard .s { font-size: var(--fs-12); color: var(--muted); }
.kcard .onext { margin-top: var(--sp-1); }
.kcard .onext .ni { width: 24px; height: 24px; }
.kempty { font-size: var(--fs-13); color: var(--faint); padding: var(--sp-3) var(--sp-2); text-align: center; }
@media (max-width: 760px) { .kb { padding-inline: var(--sp-4); scroll-padding-inline: var(--sp-4); grid-auto-columns: minmax(78%, 1fr); } }

/* Order detail */
.plan { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.plan .ni { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.plan .ni.live { background: var(--bad-soft); color: var(--bad); }
.plan .ni.task { background: var(--warn-soft); color: var(--warn); }
.plan .ni.pause, .plan .ni.done { background: var(--fill); color: var(--muted); }
.plan .ni svg.i { width: 20px; height: 20px; }
.plan .grow { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.plan .grow .k { font-size: var(--fs-13); color: var(--muted); }
.plan .grow b { font: 600 var(--fs-20)/1.2 var(--font-display); letter-spacing: -.01em; }
.plan .grow span.s { font-size: var(--fs-13); color: var(--muted); }
.plan .acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 560px) { .plan { padding: var(--sp-4); } .plan .acts { width: 100%; } .plan .acts .btn { flex: 1 1 auto; } }
.otl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ev { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); position: relative; padding-bottom: var(--sp-6); }
.ev:not(:last-child)::before { content: ""; position: absolute; left: 16.5px; top: 38px; bottom: 4px; width: 1.5px; background: var(--line-soft); }
.ev:last-child { padding-bottom: 0; }
.ev > .ico { width: 34px; height: 34px; }
.ev > .ico svg.i { width: 16px; height: 16px; }
.ev .bd { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding-top: 6px; }
.ev .hd { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.ev .hd b { font-weight: 600; }
.ev .hd time { font-size: var(--fs-12); color: var(--faint); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.ev .sub { font-size: var(--fs-13); color: var(--muted); }
.ev.nx > .ico { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.ev.nx .hd b { color: var(--ink-2); }
.ev.add { animation: row-in var(--dur-2) var(--ease-out) both; }
.bub { max-width: min(520px, 100%); padding: var(--sp-2) var(--sp-3); border-radius: 16px; font-size: var(--fs-15); line-height: 1.42; background: var(--fill); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 6px; overflow-wrap: anywhere; }
.bub.ag { background: var(--accent-soft); }
.bub.tm { background: var(--accent-fill); color: var(--accent-ink); }
.bmeta { font-size: var(--fs-12); color: var(--faint); display: flex; align-items: center; gap: var(--sp-1); }
.bmeta svg.i { width: 14px; height: 14px; color: var(--accent); stroke-width: 2.2; }
.dec { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface-2); }
.dec .why { font-size: var(--fs-13); color: var(--ink-2); }
.dec .why b { font-weight: 600; }
.menu-pick { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.menu-pick span { font-size: var(--fs-12); padding: 3px var(--sp-2); border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.menu-pick span.on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
.callc { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--sunk); }
.callc .player { padding: 0; background: transparent; }
.callc details summary { cursor: pointer; font-size: var(--fs-13); color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: var(--sp-1); }
.callc details summary::-webkit-details-marker { display: none; }
.callc details summary svg.i { width: 14px; height: 14px; transition: transform .2s; }
.callc details[open] summary svg.i { transform: rotate(90deg); }
.callc .tx { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 12px; background: var(--surface); max-height: 360px; overflow-y: auto; }
.tx .msg.a { align-self: flex-end; align-items: flex-end; }
.tx .msg.a .bub2, .tx .msg .bub2 { padding: var(--sp-2) var(--sp-3); border-radius: 16px; font-size: var(--fs-13); line-height: 1.42; background: var(--fill); }
.tx .msg.a .bub2 { background: var(--accent-soft); border-bottom-right-radius: 6px; }
.tx .msg.c { align-self: flex-start; align-items: flex-start; }
.tx .msg.c .bub2 { border-bottom-left-radius: 6px; }
.tx .msg.now .bub2 { box-shadow: 0 0 0 2px var(--accent-ring); }
.tx .gl { font-size: var(--fs-12); color: var(--muted); padding-inline: var(--sp-2); }
.livec { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 14px; background: var(--bad-soft); flex-wrap: wrap; }
.livec .grow { display: flex; flex-direction: column; gap: 2px; }
.composer { display: flex; flex-direction: column; gap: var(--sp-2); }
.composer textarea { min-height: 76px; }
.composer .row2 { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.composer .row2 .help { font-size: var(--fs-13); color: var(--muted); flex: 1 1 220px; }
.ccard dl.kv { font-size: var(--fs-15); }
.cust-h { display: flex; align-items: center; gap: var(--sp-3); }
.cust-h .av { width: 44px; height: 44px; font-size: var(--fs-15); }
.fu { display: flex; flex-direction: column; gap: var(--sp-2); }
.fu-i { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-2); font-size: var(--fs-13); padding: var(--sp-2) 0; border-top: 1px solid var(--line-soft); }
.fu-i:first-child { border-top: 0; }
.fu-i svg.i { width: 16px; height: 16px; margin-top: 2px; }
.fu-i b { font-weight: 600; font-size: var(--fs-15); display: block; }
.fu-i.open svg.i { color: var(--warn); } .fu-i.done svg.i { color: var(--ok); }

/* Hand-over queue */
.sla { font: 600 var(--fs-13)/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sla svg.i { width: 14px; height: 14px; }
.sla.ok { color: var(--ok); } .sla.warn { color: var(--warn); } .sla.bad { color: var(--bad); }
.hq-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); }
.hq-row:first-child { border-top: 0; }
.hq-row .acts { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.hq-row .acts select { width: auto; min-height: 34px; padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--sp-3); font-size: var(--fs-13); }
@media (max-width: 860px) { .hq-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-3) var(--sp-4); } .hq-row .c-who { display: none; } .hq-row .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* Lists, settings, health, admin */
.mrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); }
.mrow:first-child { border-top: 0; }
.mrow .src { font-size: var(--fs-13); color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.mrow .src b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px) { .mrow { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-3) var(--sp-4); } .mrow .src { grid-column: 1 / -1; grid-row: 2; } }
.addform { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4); border-radius: 14px; background: var(--sunk); }
.numin { display: inline-flex; align-items: center; gap: var(--sp-2); }
.numin input { width: 92px; text-align: right; }
.numin span { font-size: var(--fs-13); color: var(--muted); white-space: nowrap; }
.form-row .c .numin input[type=time] { width: 118px; text-align: left; }
.ladder li .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.ladder li .grow span { font-size: var(--fs-13); color: var(--muted); }
.ladder li.end .n { background: var(--warn-soft); color: var(--warn); }
.vrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.vrow:first-child { border-top: 0; }
.vrow .grow { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.vrow .grow span { font-size: var(--fs-13); color: var(--muted); }
.diff { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.diff li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--sunk); font-size: var(--fs-13); }
.diff li b { font-weight: 600; font-size: var(--fs-15); }
.diff del { color: var(--muted); }
.diff ins { text-decoration: none; color: var(--accent); font-weight: 600; }
.hl-big { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hl-big .ico { width: 52px; height: 52px; border-radius: 16px; }
.hl-big .ico svg.i { width: 24px; height: 24px; }
.hl-big .grow { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.hl-big .grow b { font: 600 var(--fs-20)/1.2 var(--font-display); }
.org-h { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); }
.org-h .grow { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 560px) { .org-h { padding: var(--sp-4); } .vrow { padding: var(--sp-3) var(--sp-4); } }
.choices.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.ro-note { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-13); color: var(--muted); }
.ro-note svg.i { width: 15px; height: 15px; }
.row-confirm { display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--bad-soft); font-size: var(--fs-13); }
.row-confirm .grow { flex: 1 1 200px; }
.radio-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-list .choice { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.radio-list .choice .rd { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; margin-top: 1px; display: grid; place-items: center; }
.radio-list .choice[aria-checked="true"] { border-color: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-ring); }
.radio-list .choice[aria-checked="true"] .rd { border-color: var(--accent-fill); }
.radio-list .choice[aria-checked="true"] .rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-fill); }
.radio-list .choice .grow { display: flex; flex-direction: column; gap: 2px; }
.radio-list .choice .grow span { font-size: var(--fs-13); color: var(--muted); font-weight: 400; }
.err-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); }
.err-box .ico { width: 48px; height: 48px; border-radius: 50%; }
.err-box p { color: var(--muted); max-width: 44ch; }
.tl-skel { display: flex; flex-direction: column; gap: var(--sp-6); }
.tl-skel > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); }
.tl-skel .skel.sq { width: 34px; height: 34px; border-radius: 10px; }
.tl-skel .lines { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: 6px; }
.def-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--sp-4); }
.q-list { counter-reset: q; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.q-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); }
.q-list li::before { counter-increment: q; content: counter(q); width: 26px; height: 26px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); display: grid; place-items: center; font: 600 var(--fs-13)/1 var(--font); }
.q-list li div { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.q-list li span { color: var(--muted); font-size: var(--fs-13); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); align-items: start; }
.statechips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.statechips svg.i { width: 14px; height: 14px; color: var(--faint); }
.approve { background: var(--accent-soft); border-color: transparent; }

/* Sana as a teammate, layered settings, misc */
.av.sana { background: var(--accent-fill); color: var(--accent-ink); font-size: var(--fs-12); }
.av.sana.lg { width: 44px; height: 44px; font-size: var(--fs-17); }
.av.sana.xl { width: 56px; height: 56px; font-size: var(--fs-24); border-radius: 50%; }
.pres { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink-2); padding: 2px var(--sp-3) 2px 2px; border-radius: 999px; background: var(--sunk); white-space: nowrap; vertical-align: middle; }
.pres .av { width: 22px; height: 22px; font-size: 9px; }
.lockt { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--fs-12)/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.lockt svg.i { width: 13px; height: 13px; }
.okc { color: var(--ok); display: inline-grid; place-items: center; }
.okc svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.sheet-ico.bad { background: var(--bad-soft); color: var(--bad); }
.frame .avatar { cursor: default; }
#doc-root:focus, #main:focus { outline: none; }
.tcard th.c, .tcard td.c { text-align: center; }
@media (max-width: 860px) { .frame .ws { display: flex; } }
@media (max-width: 640px) { .stack-t td.c { text-align: left; } }
.woo { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; color: var(--accent); border-radius: 4px; }
.woo:hover { text-decoration: underline; }
.woo:focus-visible { outline: 2px solid var(--accent-fill); outline-offset: 2px; }
.woo svg.i { width: 12px; height: 12px; }
@media (max-width: 440px) { .frame .avatar { display: none; } }
/* Phone: "Viewing as" gets its own full-width row so the label never cuts off */
@media (max-width: 560px) {
  .frame .ws { margin-right: auto; }
  .frame .viewas { order: 9; flex: 1 1 100%; }
  .frame .viewas > span { display: inline; white-space: nowrap; }
  .frame .viewas select { max-width: none; flex: 1 1 auto; }
}
/* Ctrl+K search */
.scrim.top { place-items: start center; padding-top: 12vh; }
.sheet.pal { max-width: 580px; padding: var(--sp-2); gap: 0; }
.pal-in { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.pal-in input { border: 0; background: transparent; padding-left: 0; font-size: var(--fs-17); min-height: 48px; }
.pal-in input:focus-visible { box-shadow: none; }
.kbd { font: 500 var(--fs-11)/1 var(--font); padding: 4px 6px; border-radius: 6px; background: var(--fill); color: var(--muted); margin-left: var(--sp-1); white-space: nowrap; }
#pal-list { display: flex; flex-direction: column; gap: 1px; padding: var(--sp-2) 0; max-height: 50vh; overflow-y: auto; }
.pal-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px; min-width: 0; }
.pal-row .grow { display: flex; flex-direction: column; min-width: 0; }
.pal-row .grow b { font-weight: 600; }
.pal-row .grow span { font-size: var(--fs-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-row[aria-selected="true"], .pal-row:hover { background: var(--accent-soft); }
.pal-row[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.pal-row .ico { width: 30px; height: 30px; }
.pal-empty, .pal-foot { padding: var(--sp-2) var(--sp-3); }
/* Banner toggle */
.banner button.ichip { border: 0; cursor: pointer; color: inherit; font: 600 var(--fs-12)/1 var(--font); }
.banner button.ichip:focus-visible { outline: 2px solid var(--imp-ink); outline-offset: 2px; }
/* Report card trend */
.trend { width: 100%; height: 120px; display: block; }
.trend .ln { fill: none; stroke: var(--accent-fill); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.trend .ar { fill: var(--accent-fill); opacity: .1; }
.trend .gd { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.trend-ax { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--faint); gap: var(--sp-2); }
/* Contact strip on an order */
.contact { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: 16px; background: var(--surface); border: 1px solid var(--line-soft); }
.contact .grow { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.contact .grow b { font-variant-numeric: tabular-nums; }
.contact .grow span { font-size: var(--fs-13); color: var(--muted); }
.contact .acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 560px) { .contact .acts { width: 100%; } .contact .acts .btn { flex: 1 1 auto; } }
/* Round 3: identifiers, messages, sign-in */
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.page-head h1 .cp, .contact .cp { width: 30px; height: 30px; vertical-align: middle; margin-left: var(--sp-1); color: var(--muted); }
.page-head h1 .cp svg.i, .contact .cp svg.i { width: 16px; height: 16px; }
.contact .idk { font-size: var(--fs-12); color: var(--muted); }
.contact .big { font: 600 var(--fs-24)/1.15 var(--font-display); letter-spacing: -.01em; display: flex; align-items: center; flex-wrap: wrap; }
.bub, .wa-b { white-space: pre-line; }
.msg-ed-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.wa-prev { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: 14px; background: var(--sunk); min-width: 0; }
.wa-prev .bub { max-width: 100%; }
.msg-ed textarea { font-size: var(--fs-13); line-height: 1.5; }
@media (max-width: 860px) { .msg-ed-in { grid-template-columns: minmax(0, 1fr); } }
.app.auth #pal-btn, .app.auth #nt-btn, .app.auth .banner { display: none; }
body.auth-x .tabbar { display: none !important; }
.auth-card .mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.auth-card .mark svg { width: 36px; height: 36px; }
@media (max-width: 560px) { .page-head h1 .cp, .contact .cp { width: 44px; height: 44px; } }
.page-head h1 .cp { display: inline-grid; }
/* Round 4: template labels, next-step card */
.tlabel { font: 600 var(--fs-11)/1 var(--font); padding: 3px 7px; border-radius: 999px; background: var(--fill); color: var(--ink-2); white-space: nowrap; }
.nextc { gap: var(--sp-3); }
.nextc .then { border-top: 1px solid var(--line-soft); padding-top: var(--sp-3); }
.nextc .wa-prev { align-items: flex-start; }
.wa-prev .tlabel { align-self: flex-start; }
/* Round 5: dashboards, store badges in rows */
.trend.sm { width: 120px; height: 28px; }
.oname .bmark { display: inline-grid; vertical-align: -5px; margin-right: 2px; }
.tcard th .bmark { display: inline-grid; vertical-align: -5px; }
.tcard td .bmark { display: inline-grid; vertical-align: -5px; }
/* ---- the Console: the design's portal, full page (no review frame) ---- */
:root {
  --rbar-h: 0px;
}
.xwrap {
  max-width: none;
  padding: 0;
  gap: 0;
}
.frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: var(--bg);
}
.frame .top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
}
.frame .shell {
  min-height: calc(100vh - 55px);
}
.frame .side-in {
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  max-height: calc(100vh - 78px);
}
.frame.imp-on {
  box-shadow: inset 0 0 0 3px var(--imp-bg);
}
.frame .avatar {
  cursor: default;
}
.hide {
  display: none;
}
tr.click,
.orow {
  cursor: pointer;
}

.page-head > div.hstack:first-child {
  flex-direction: row;
  align-items: center;
}

/* ---- people: images inside avatars and store marks fill their frame ---- */
.frame a.avatar {
  overflow: hidden;
  text-decoration: none;
}
.avatar img,
.logo-tile img,
.pv-mark img,
.jn-mark img,
.av.ph img,
.bmark.logo img,
.mark.has-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.av.ph img,
.frame a.avatar img {
  object-fit: cover;
  border-radius: 50%;
}

/* ---- people: avatars (photo, or initials on the person's colour) and Sana's face ---- */
.av.pc {
  background: var(--avc, var(--fill));
  color: var(--avi, var(--ink-2));
}
.av.ph {
  background: var(--fill);
  overflow: hidden;
  padding: 0;
}
.frame a.avatar.pc {
  background: var(--avc, var(--accent-soft));
  color: var(--avi, var(--accent));
}
.av.sana {
  background: linear-gradient(160deg, var(--mark-top), var(--mark-bottom));
  color: #fff;
}
.av.sana .sana-face {
  width: 82%;
  height: 82%;
  display: block;
}
.avstack {
  display: flex;
  align-items: center;
  margin-top: var(--sp-1);
}
.avstack .av {
  box-shadow: 0 0 0 2px var(--surface);
  margin-right: -4px;
}
.avstack .tiny {
  margin-left: var(--sp-3);
}
/* a store's logo wherever its mark shows */
.bmark.logo,
.mark.has-logo {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
/* ---- Team ---- */
.row.prow {
  align-items: center;
}
.row.prow .end {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-4);
}
.role-c {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}
.cbx-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.cbx {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.cbx:hover {
  border-color: var(--faint);
}
.cbx input {
  accent-color: var(--accent-fill);
  width: 18px;
  height: 18px;
  margin: 0;
}
.copyrow {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
/* A link or key shown as text: long tokens wrap anywhere inside the box, never widening the dialog. */
.copyrow code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-size: var(--fs-12);
  line-height: 1.5;
  background: var(--fill);
  border-radius: 8px;
  padding: 8px 10px;
  user-select: all;
}
.sheet {
  overflow-x: hidden;
}
.copyrow input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-12);
}
.sheet .err,
.auth-card .err {
  color: var(--bad);
  font-size: var(--fs-13);
}
hr.sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-1) 0;
  width: 100%;
}
.btn.danger-t {
  color: var(--bad);
  align-self: flex-start;
}

/* ---- profile and brand ---- */
.prof-h {
  gap: var(--sp-4);
}
.prof-n {
  font-size: var(--fs-17);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.swatch {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sw);
  display: grid;
  place-items: center;
  color: #fff;
  /* a ring both themes can see, so black and white swatches don't vanish */
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.5);
}
.swatch[aria-checked="true"] {
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 0 4px var(--sw);
}
.swatch:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 4px;
}
.swatch svg.i {
  width: 16px;
  height: 16px;
}
.hexrow {
  margin-top: var(--sp-2);
}
.hexrow input.mono {
  width: 120px;
}
.hexrow input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.help svg.i {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}
.logo-tile {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  color: var(--muted);
  flex: none;
}
.pv {
  --pa-soft: var(--pa-soft-l);
  --pa-ink: var(--pa-ink-l);
  gap: var(--sp-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv {
    --pa-soft: var(--pa-soft-d);
    --pa-ink: var(--pa-ink-d);
  }
}
:root[data-theme="dark"] .pv {
  --pa-soft: var(--pa-soft-d);
  --pa-ink: var(--pa-ink-d);
}
.pv-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: 14px;
  background: var(--bar-solid, var(--surface-2));
  border: 1px solid var(--line);
}
.pv-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font: 700 11px / 1 var(--font);
  overflow: hidden;
  flex: none;
}
.pv-mark.logo {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pv-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: 14px;
  background: var(--pa-soft);
}
.pv-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.pv .av.sana {
  background: var(--pa);
  width: 32px;
  height: 32px;
}
.pv-btn {
  background: var(--pa);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: var(--fs-13);
}
.pv-link {
  color: var(--pa-ink);
  font-weight: 600;
  font-size: var(--fs-13);
}

/* ---- the join page ---- */
.auth-card.join h1 {
  font-size: var(--fs-24);
  text-wrap: balance;
}
.jn-marks {
  display: flex;
  justify-content: center;
  align-items: center;
}
.jn-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font: 700 var(--fs-17) / 1 var(--font);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  margin-right: -8px;
  border: 3px solid var(--surface);
}
.jn-mark.logo {
  background: var(--surface);
}
.av.sana.jn-sana {
  width: 56px;
  height: 56px;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-1);
}
.pw-meter {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.pw-meter .bars {
  display: flex;
  gap: 4px;
}
.pw-meter i {
  display: block;
  flex: none;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
}
.pw-meter[data-s="1"] i:nth-child(1) {
  background: var(--warn);
}
.pw-meter[data-s="2"] i:nth-child(-n + 2) {
  background: var(--accent-fill);
}
.pw-meter[data-s="3"] i {
  background: var(--ok);
}
.pw-meter .mt {
  color: var(--muted);
}

/* ---- the top bar on phones and the join page: the avatar opens your profile (Sign out is there) ---- */
.app.auth #so-btn {
  display: none;
}
@media (max-width: 560px) {
  #so-btn {
    display: none;
  }
  .row.prow {
    flex-wrap: wrap;
  }
  .row.prow .end {
    flex-basis: 100%;
    justify-content: flex-start;
    padding-left: calc(38px + var(--sp-4));
  }
}
@media (max-width: 440px) {
  .frame a.avatar {
    display: grid;
  }
}

/* ---- the AI area: setup, test results, keys ---- */
.kchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--fill);
  font-size: var(--fs-12);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kchip svg.i {
  width: 13px;
  height: 13px;
  flex: none;
}
.row.ai-step .lvl {
  flex: 0 0 92px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--muted);
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.ai-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-4);
}
.ai-test {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 14px;
  background: var(--sunk);
}
.ai-test .score {
  font: 700 var(--fs-32) / 1 var(--font-display);
  min-width: 84px;
}
.ai-test.ok .score {
  color: var(--ok);
}
.ai-test.warn .score {
  color: var(--warn);
}
.ai-test.bad .score {
  color: var(--bad);
}
.ai-test summary {
  cursor: pointer;
  color: var(--accent);
}
.ai-test .row.tc {
  padding-inline: 0;
}
.vnum {
  flex: 0 0 44px;
  font-weight: 600;
  color: var(--muted);
}
.kcard {
  gap: var(--sp-3);
}
.chip.static {
  cursor: default;
  font-size: var(--fs-12);
}
.choices.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.chip.static.on {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.more-models summary {
  cursor: pointer;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/* ---------- final round (6 Nov) ---------- */
/* nobody has the order yet: an empty, dashed place for a person */
.av.none {
  background: transparent;
  border: 1.5px dashed var(--line);
}
/* hand-over: the reason is the point of the row, so it wraps instead of being cut off */
.oname > span.hq-why {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hq-row .acts select.hq-as {
  width: 9.5rem;
}
@media (max-width: 860px) {
  .hq-row .c-who {
    display: flex;
    grid-column: 1 / -1;
  }
}
/* a customer's messages in a row sit under one header */
.otl .ev:has(+ .ev.cont) {
  padding-bottom: var(--sp-2);
}
.otl .ev.cont .bd {
  padding-top: 0;
}
.otl .ev.cont > .ico {
  visibility: hidden;
}
/* the customer's unanswered message, at the top of the order */
.waitc {
  border-color: var(--warn);
  gap: var(--sp-3);
}
.waitc .bub {
  align-self: flex-start;
  max-width: 100%;
}
/* the today tiles two by two on phones */
@media (max-width: 520px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
}
/* activity: day headings, the sentence in full, the time never cut off */
.au-day {
  padding: var(--sp-3) var(--sp-6) var(--sp-1);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
}
.au-list .au-day:first-child {
  border-top: 0;
}
.au-what {
  white-space: normal;
  color: var(--ink);
}
.au-t {
  flex: none;
  font-size: var(--fs-12);
  color: var(--faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* profile: Sign out lives in the top bar on wide screens; the card has it only on phones */
@media (min-width: 561px) {
  .pf-so {
    display: none;
  }
}
.pw-box summary {
  cursor: pointer;
  color: var(--accent);
  margin-top: var(--sp-3);
}
/* AI: model names wrap instead of running off the card; the key chip wraps too */
.mtag {
  font-weight: 600;
}
.vmodels,
.row.ai-step .main-t b {
  white-space: normal;
}
.kchip {
  white-space: normal;
  flex-wrap: wrap;
}
.row.ai-step .end {
  min-width: 0;
  flex-shrink: 1;
}
/* switches: a white knob in both themes; the off track keeps an edge on dark cards */
.switch span {
  box-shadow: inset 0 0 0 1px var(--btn-ring);
}
.switch span::after {
  background: #fff;
}
/* alerts: icon | what happened | when — long text wraps in the middle */
.row.al-row {
  align-items: flex-start;
}
.al-row .main-t span {
  white-space: normal;
}
.al-d summary {
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--muted);
}
/* directory on phones: the store's details get the full width, its buttons go underneath */
@media (max-width: 560px) {
  .row.dir-row {
    flex-wrap: wrap;
  }
  .row.dir-row .main-t {
    flex: 1 1 calc(100% - 56px);
  }
  .row.dir-row .end {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* ---------- dark mode and phones, everywhere (final round) ---------- */
:root {
  --btn-ring: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --btn-ring: rgba(255, 255, 255, 0.16);
  }
}
:root[data-theme="dark"] {
  --btn-ring: rgba(255, 255, 255, 0.16);
}
/* quiet buttons keep an edge on dark cards */
.btn:not(.primary):not(.plain) {
  box-shadow: inset 0 0 0 1px var(--btn-ring);
}
/* the keyboard shortcut means nothing on a phone */
@media (hover: none) {
  .kbd {
    display: none;
  }
}
/* tab strips wrap on phones instead of hiding tabs off the edge */
@media (max-width: 560px) {
  .tabs {
    flex-wrap: wrap;
  }
  .tabs button {
    padding: var(--sp-2) var(--sp-3);
  }
  .seg {
    flex-wrap: wrap;
  }
  .card-head {
    flex-wrap: wrap;
  }
}
/* phones: fingers, not mouse pointers — bigger checkboxes and taller small links */
@media (max-width: 560px) {
  .orow .ck input {
    width: 22px;
    height: 22px;
  }
  a.small,
  .oname a,
  .back {
    display: inline-block;
    padding-block: 5px;
  }
}

/* ---------- AI area ---------- */
/* the last 7 days: one bar per day, today in the accent */
.spend7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: var(--sp-3);
  height: 176px;
  margin-top: var(--sp-4);
}
.bar-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  height: 100%;
}
.bar {
  width: 100%;
  max-width: 44px;
  border-radius: 8px 8px 3px 3px;
  background: var(--fill);
  transition: background-color 0.15s;
}
.bar-c:hover .bar {
  background: var(--accent-soft);
}
.bar-c.now .bar {
  background: var(--accent-fill);
}
.bar-v {
  font-size: var(--fs-11);
  color: var(--muted);
  white-space: nowrap;
}
.bar-c.now .bar-v {
  color: var(--ink);
  font-weight: 600;
}
.bar-l {
  font-size: var(--fs-12);
  color: var(--muted);
}
/* a job: what it does, the models, then four numbers in a row */
.card.job .card-head {
  align-items: flex-start;
}
.card.job .card-head p {
  max-width: 62ch;
  margin-top: 2px;
}
.job-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line-soft);
}
.job-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.job-stats .jv {
  font-size: var(--fs-17);
}
/* changing a job safely: test, try on the side, make live */
.ai-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
.ai-steps li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3);
  border-radius: 12px;
  background: var(--sunk);
  border: 1px solid transparent;
}
.ai-steps .as-d {
  font-size: var(--fs-12);
  color: var(--muted);
}
.ai-steps li.on {
  border-color: var(--accent-fill);
  background: var(--accent-soft);
}
.ai-steps li.done b::after {
  content: " ✓";
  color: var(--ok);
}
@media (max-width: 560px) {
  .ai-steps {
    grid-template-columns: 1fr;
  }
  .spend7 {
    gap: var(--sp-1);
  }
  .bar-v {
    display: none;
  }
}

/* ---------- one page layout (final design round) ---------- */
.ph-t {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ph-help {
  position: relative;
}
.ph-help summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.ph-help summary::-webkit-details-marker {
  display: none;
}
.ph-help summary:hover,
.ph-help[open] summary {
  background: var(--fill);
  color: var(--ink);
}
.ph-help summary svg.i {
  width: 18px;
  height: 18px;
}
.ph-pop {
  position: absolute;
  z-index: 30;
  top: 34px;
  left: -8px;
  width: min(420px, calc(100vw - 32px));
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  font-size: var(--fs-14, 14px);
  line-height: 1.5;
  color: var(--ink-2);
}
/* tabs between the parts of a page: under the header, staying in view while the page scrolls */
.ptabs {
  position: sticky;
  top: var(--top-h, 56px);
  z-index: 20;
  background: var(--bg);
  margin-inline: calc(var(--sp-1) * -1);
  padding-inline: var(--sp-1);
}
.ptabs a {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font: 500 var(--fs-15) / 1.2 var(--font);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.ptabs a:hover {
  color: var(--ink);
}
.ptabs a[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent-fill);
}
.ptabs a:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: -2px;
  border-radius: 6px;
}
@media (max-width: 560px) {
  .ptabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .ptabs a {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* ---------- the alive layer ---------- */
/* customers have faces: the avatar beside the name in lists */
.oname.with-av {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}
.oname-in {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.oname.with-av .oname-in > span {
  font-size: var(--fs-13);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oname.with-av .oname-in > span.hq-why {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.av.cust {
  width: 34px;
  height: 34px;
  font-size: 13px;
  flex: none;
}
.lbadge.rep {
  background: var(--accent-soft);
  color: var(--accent);
}
/* today in one sentence */
.card.hello {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
}
.hello-t {
  display: block;
  font-size: var(--fs-17);
  margin-bottom: 2px;
}
.av.sana.lg {
  width: 44px;
  height: 44px;
}
.av.sana.lg svg {
  width: 30px;
  height: 30px;
}
.empty.calm .av.sana {
  margin-inline: auto;
}
.toast-undo {
  margin-left: var(--sp-2);
  color: inherit;
  text-decoration: underline;
}

/* the order page on phones: Conversation | Details */
.otabs {
  display: none;
}
@media (max-width: 860px) {
  .otabs {
    display: block;
  }
  .cols-2-1.ot-conv > .stack {
    display: none;
  }
  .cols-2-1.ot-details > .card:first-child {
    display: none;
  }
}
.steps-ol {
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

/* the order page: who else is looking; read receipts */
.presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--sp-2);
  padding: 2px 10px 2px 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 500;
}
.presence .av {
  box-shadow: 0 0 0 2px var(--surface);
}
.presence .av + .av {
  margin-left: -10px;
}
.otl .bmeta svg.i {
  color: var(--faint);
}
.otl .bmeta.read svg.i {
  color: var(--accent);
}
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14, 14px);
  color: var(--ink-2);
}
.bub .att-chip svg.i {
  width: 16px;
  height: 16px;
}

/* ---------- page header stats: what matters now; each one opens its view ---------- */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: calc(var(--sp-2) * -1);
}
.stat-strip .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-13);
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.stat-strip .stat b {
  font-size: var(--fs-17);
  color: var(--ink);
}
.stat-strip .stat:hover {
  border-color: var(--accent-fill);
}
.stat-strip .stat.hot {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}
.stat-strip .stat.hot b {
  color: var(--accent);
}
.ptabs a .c {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.ptabs a[aria-selected="true"] .c {
  background: var(--accent-soft);
  color: var(--accent);
}
/* the time column fits "22 h 22 min overdue" */
@media (min-width: 861px) {
  .hq-row {
    grid-template-columns: minmax(0, 1.6fr) 170px minmax(0, 1fr) auto;
  }
}

/* ---------- tables: a person cell, clickable rows ---------- */
.tperson {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.tperson > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tcard tr.trow {
  cursor: pointer;
}
.tcard tr.trow:hover td {
  background: var(--sunk);
}
.tcard tr.trow:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: -2px;
}
/* ---------- side panel: quick work on one thing without leaving the list ---------- */
.scrim:has(.drawer) {
  place-items: stretch end;
  padding: 0;
}
.sheet.drawer {
  width: min(440px, 100vw);
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 20px 0 0 20px;
  overflow-y: auto;
  animation: drawer-in 0.22s var(--ease-out, ease-out) both;
}
@keyframes drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.dlist {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}
.drow {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.drow > span {
  display: flex;
  flex-direction: column;
}
.drow > span > span {
  font-size: var(--fs-13);
  color: var(--muted);
}
.drow:hover b {
  color: var(--accent);
}
.drow.danger b {
  color: var(--bad);
}
@media (max-width: 560px) {
  .sheet.drawer {
    border-radius: 0;
  }
}

/* ---------- the header: numbers band, status beside the title, "more" menu ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  margin-top: calc(var(--sp-2) * -1);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-2);
  text-decoration: none;
  border-left: 1px solid var(--line-soft);
  transition: background-color 0.15s;
}
.kpi:first-child {
  border-left: 0;
}
.kpi:hover {
  background: var(--sunk);
}
.kpi-l {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-v {
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 650;
}
.kpi-h {
  font-size: var(--fs-12);
  color: var(--muted);
}
.kpi.hot {
  background: var(--accent-soft);
}
.kpi.hot .kpi-l,
.kpi.hot .kpi-v {
  color: var(--accent);
}
.ph-t .pill,
.ph-t .hpill {
  margin-left: var(--sp-1);
}
.more-menu {
  position: relative;
}
.more-menu summary {
  list-style: none;
}
.more-menu summary::-webkit-details-marker {
  display: none;
}
.menu-pop {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 40;
  min-width: 260px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
}
.menu-pop button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-14, 14px);
  color: var(--ink);
}
.menu-pop button:hover {
  background: var(--fill);
}
@media (max-width: 560px) {
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .kpi:nth-child(3) {
    border-left: 0;
  }
  .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }
  .kpi-v {
    font-size: 22px;
  }
}

/* ---------- the page header in the store's colour: a soft gradient, strong at the corner, fading out ---------- */
.page > .page-head:first-child {
  position: relative;
  padding: var(--sp-6);
  border-radius: 22px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent-fill) 26%, transparent) 0%, transparent 52%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent-fill) 10%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--accent-soft), var(--surface) 85%);
  overflow: visible;
}
.page > .page-head:first-child::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 30%, transparent));
}
.page > .page-head:first-child + .kpis {
  margin-top: calc(var(--sp-3) * -1);
}
@media (max-width: 560px) {
  .page > .page-head:first-child {
    padding: var(--sp-4);
    border-radius: 18px;
  }
}

/* ---------- one header block ---------- */
.page > .page-head:first-child {
  background:
    radial-gradient(110% 170% at 0% 0%, color-mix(in srgb, var(--accent-fill) 34%, transparent) 0%, transparent 50%),
    radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--accent-fill) 14%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 9%, var(--surface)), var(--surface) 92%);
}
.page > .page-head:first-child:has(+ .kpis) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.page > .page-head:first-child + .kpis {
  margin-top: calc(var(--sp-6) * -1);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-fill) 18%, var(--line-soft));
}
.ph-av {
  display: inline-flex;
  vertical-align: middle;
  margin-right: var(--sp-3);
}
@media (max-width: 560px) {
  .page > .page-head:first-child + .kpis {
    margin-top: calc(var(--sp-6) * -1);
  }
}

/* the team's to-do after Sana hands an order over */
.card.todo {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line-soft));
}
.todo-steps {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 6px;
  font-size: var(--fs-15);
}

/* features not built yet stay hidden until the LATER switch is on (live.js); what shows is what works */
.no-later .later,
.no-later [data-later] {
  display: none !important;
}
.yes-later .nolater {
  display: none !important;
}

/* ---------- you, at the bottom of the side menu ---------- */
.side-in {
  min-height: calc(100vh - 86px);
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-me {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.me-menu {
  position: relative;
}
.me-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
}
.me-menu summary::-webkit-details-marker {
  display: none;
}
.me-menu summary:hover,
.me-menu[open] summary {
  background: var(--fill);
}
.me-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.me-t b {
  font-size: var(--fs-14, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-t span {
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-menu summary svg.chev {
  transform: rotate(-90deg);
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.menu-pop.up {
  top: auto;
  bottom: 60px;
  left: 0;
  right: 0;
  min-width: 0;
}
.menu-pop a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-14, 14px);
}
.menu-pop a:hover {
  background: var(--fill);
}
.me-theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 4px 0;
  padding: 2px;
  border-radius: 10px;
  background: var(--fill);
}
.me-theme button {
  all: unset;
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.me-theme button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--seg-shadow);
}
/* desktop: you are in the side menu, so the top bar keeps the store, search and alerts */
@media (min-width: 861px) {
  #avatar,
  #so-btn,
  #theme-btn {
    display: none !important;
  }
}

/* super admin: view as anyone */
.va-btn {
  gap: 6px;
}
.va-sheet .va-list {
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
.va-sheet .search {
  flex: none;
  max-width: none;
  position: relative;
}
.va-sheet .search svg.i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--faint);
  pointer-events: none;
}
.va-sheet .search input {
  padding-left: 36px;
}

/* Need a person: who it's for, in one row of choices */
.need-f {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6) 0;
}
.need-f .nf {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink-2);
  font-size: var(--fs-13);
  font-weight: 500;
  text-decoration: none;
}
.need-f .nf .c {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.need-f .nf.on {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.need-f .nf.on .c {
  color: var(--accent-ink);
  opacity: 0.8;
}

/* ---- order list: the time placed on two tidy lines; the next step may use two lines ---- */
.c-att .placed {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  line-height: 1.3;
}
.c-att .placed b {
  font-weight: 500;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.c-att .placed span {
  font-size: var(--fs-12);
  color: var(--muted);
}
.onext .nt b {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

/* ---- phone: search, bell and you sit on the right; the customer's face sits beside the name ---- */
@media (max-width: 560px) {
  .top-in > .brand {
    margin-right: auto;
  }
}
@media (max-width: 760px) {
  .oname.with-av {
    align-items: flex-start;
  }
}

/* ---- technical tools: every card the same shape ---- */
.card.tl-card {
  justify-content: space-between;
}
.card.tl-card .tl-h {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}

/* ---- activity: the person's face, with a small mark for the kind of change ---- */
.au-face {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}
.au-face .au-k {
  position: absolute;
  right: -7px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-soft);
}
.au-face .au-k.warn {
  color: var(--warn);
}
.au-face .au-k svg.i {
  width: 10px;
  height: 10px;
}
.au-store {
  display: block;
  font-size: var(--fs-12);
  color: var(--muted);
}

/* ---- phone: a tab bar with one tab is no choice at all; the avatar in the top bar opens the rest ---- */
.tabbar:has(> .tab:only-child) {
  display: none;
}

/* ---- organizations, platform staff and setting up (decision 0008) ---- */
.ico.info {
  background: var(--accent-soft);
  color: var(--accent);
}
.choice[aria-checked="true"] {
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.choice:disabled {
  cursor: default;
  opacity: 0.6;
}
.linkbtn {
  all: unset;
  cursor: pointer;
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
  border-radius: 4px;
}
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent-fill);
  animation: spin 0.8s linear infinite;
  flex: none;
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation-duration: 2.4s;
  }
}
.og-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.og-row {
  text-decoration: none;
  color: inherit;
}
.og-row .main-t > b {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.og-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: 2px;
}
.og-prog {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.og-prog i {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--fill);
}
.og-prog i.done,
.og-prog i.skipped {
  background: var(--ok);
}
.og-prog i.doing {
  background: var(--accent-fill);
}
.og-prog i.blocked {
  background: var(--warn);
}
.og-prog i.waiting {
  background: var(--accent-soft);
}
.og-cols {
  align-items: start;
}
.og-cols > * {
  min-width: 0;
}
.og-pad {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.og-review {
  border: 1.5px solid var(--warn);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.og-review h2 {
  font-size: var(--fs-17);
  margin: 0 0 var(--sp-1);
}
.og-review p {
  margin: 0;
}
.og-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.og-checks li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.og-checks li .i {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--muted);
}
.og-checks li.ok .i {
  color: var(--ok);
}
.og-checks li.bad .i {
  color: var(--warn);
}
.og-meter {
  display: grid;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.og-meter > span:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}
.meter.hot i {
  background: var(--warn);
}
.og-plan {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-17);
}
.og-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  font-size: var(--fs-13);
}
.og-dl dt {
  color: var(--muted);
}
.og-dl dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.og-steps,
.og-cl,
.og-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}
.og-step {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line-soft);
}
.og-step:first-child {
  border-top: 0;
}
.og-step .main-t {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.og-step .main-t > span {
  color: var(--muted);
  font-size: var(--fs-13);
}
.og-step .end {
  flex: none;
  align-self: center;
}
.og-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font: 600 var(--fs-13) / 1 var(--font);
  background: var(--fill);
  color: var(--ink-2);
}
.og-n .i {
  width: 16px;
  height: 16px;
}
.done > .og-n {
  background: var(--ok);
  color: var(--on-fill);
}
.skipped > .og-n {
  background: var(--fill);
  color: var(--muted);
}
.blocked > .og-n {
  background: var(--warn);
  color: var(--on-fill);
}
.og-step.cur,
.og-c.cur {
  background: var(--accent-soft);
}
.og-step.cur > .og-n,
.og-c.cur > .og-n {
  background: var(--accent-fill);
  color: var(--on-fill);
}
.og-step.done .main-t > b {
  color: var(--ink-2);
}
.og-sw {
  cursor: pointer;
}
.og-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}
.og-save {
  position: sticky;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.og-save.on {
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-2);
}
.og-save .grow {
  min-width: 0;
}
@media (max-width: 860px) {
  .og-save {
    bottom: calc(var(--tabbar-h, 64px) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
}
.og-dots {
  display: inline-flex;
  gap: 5px;
  margin-inline: auto;
}
.og-dots i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
}
.og-dots i.on {
  background: var(--accent-fill);
}
.og-wa {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  border-radius: 12px;
  background: var(--sunk);
}
.og-hero {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.og-hero h1 {
  font: 600 var(--fs-32) / 1.15 var(--font-display);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}
.og-hero .sub {
  margin: 0;
  color: var(--ink-2);
  max-width: 60ch;
}
.og-ring {
  --p: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(closest-side, var(--bg) 78%, transparent 79% 100%),
    conic-gradient(var(--ok) calc(var(--p) * 1%), var(--fill) 0);
}
.og-ring b {
  font: 600 var(--fs-24) / 1 var(--font-display);
}
.og-ring span {
  font-size: var(--fs-11);
  color: var(--muted);
}
@media (max-width: 560px) {
  .og-hero {
    gap: var(--sp-4);
  }
  .og-hero h1 {
    font-size: var(--fs-24);
  }
  .og-ring {
    width: 64px;
    height: 64px;
  }
  .og-ring b {
    font-size: var(--fs-20);
  }
}
.og-help {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.og-help .i {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.og-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
}
.og-cl {
  display: grid;
  gap: 0;
}
.og-c {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: 12px;
}
.og-c .grow {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}
.og-c p {
  margin: 0;
}
.og-c-b {
  display: grid;
  gap: var(--sp-3);
}
.og-c-b .hstack {
  flex-wrap: wrap;
}
.og-c:not(.cur):not(.done) {
  opacity: 0.72;
}
.og-code {
  font: 600 var(--fs-20) / 1.2 var(--mono);
  letter-spacing: 0.08em;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 10px;
  background: var(--sunk);
}
.og-ok,
.og-wait {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.og-ok > div,
.og-wait > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.og-wait .spin {
  margin-top: 2px;
}
.og-live {
  display: grid;
  gap: var(--sp-4);
}
.og-alt summary {
  cursor: pointer;
  display: grid;
  gap: 2px;
  list-style: none;
}
.og-alt summary::-webkit-details-marker {
  display: none;
}
.og-alt[open] {
  display: grid;
  gap: var(--sp-3);
}
.og-alt p {
  margin: 0;
}
.og-qr {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.og-qr-box {
  padding: var(--sp-3);
  border-radius: 16px;
  background: var(--qr-bg, #fff);
  box-shadow: var(--shadow-1);
  line-height: 0;
}
.og-qr-box svg {
  width: min(220px, 60vw);
  height: auto;
}
.row.og-col {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
}
.row.og-col textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: var(--sp-3);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}
.og-feed {
  display: grid;
  gap: var(--sp-4);
}
.og-feed h2 {
  margin: 0;
}
.og-tl {
  display: grid;
  gap: var(--sp-3);
}
.og-tl li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.og-tl li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.og-tl .ico {
  width: 30px;
  height: 30px;
}
.ok-c {
  color: var(--ok);
  display: inline-flex;
}
.ok-c .i {
  width: 18px;
  height: 18px;
}

.og-cols .row .main-t span,
.og-steps .main-t > span,
.og-row .main-t > span {
  white-space: normal;
}
.og-h1 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.og-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--fs-13);
}
.og-more .i {
  width: 14px;
  height: 14px;
}
.og-fi {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--fill);
  color: var(--muted);
}
.og-fi.on {
  background: var(--ok-soft);
  color: var(--ok);
}
.og-fi .i {
  width: 16px;
  height: 16px;
}
.og-n > span {
  color: inherit;
  font-size: var(--fs-13);
  font-weight: 600;
}
.og-step.cur > .og-n,
.og-c.cur > .og-n {
  color: #fff;
}
.og-c .grow > .btn,
.og-c-b > .btn,
.og-c-b > a.btn {
  justify-self: start;
}
.og-pad .numin,
.row .numin {
  width: 120px;
}
#wp table th,
#wp table td {
  font-size: 13px;
}
.og-cl,
.og-c,
.og-c .grow {
  min-width: 0;
}
.og-c-b .btn {
  white-space: normal;
  text-align: left;
  max-width: 100%;
  height: auto;
}
@media (max-width: 560px) {
  .og-c {
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  .og-cols > .card:has(.og-cl) {
    padding: var(--sp-2);
  }
}
.badge.info {
  background: var(--accent-soft);
  color: var(--accent);
}
.done > .og-n,
.blocked > .og-n {
  color: var(--bg);
}

/* ---------- Server: the machine, its lanes and every part (web/server.js) ---------- */
#sv {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sv-top {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sv-state {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  min-width: 0;
  flex: 1 1 320px;
}
.sv-state > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sv-state .dot {
  width: 10px;
  height: 10px;
  flex: none;
}
.sv-hint {
  font-size: var(--fs-12);
  color: var(--muted);
  line-height: 1.4;
}
.sv-pill {
  font: 500 var(--fs-11) / 1 var(--font);
  padding: 4px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.sv-pill.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.sv-pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.sv-pill.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.sv-meter {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--fill);
  overflow: hidden;
}
.sv-meter > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--ok);
}
.sv-meter.warn > i {
  background: var(--warn);
}
.sv-meter.bad > i {
  background: var(--bad);
}
.sv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 760px) {
  .sv-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sv-kpi {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.sv-kpi-l {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--muted);
}
.sv-kpi b {
  font: 600 22px / 1.1 var(--font-display);
}
.sv-kpi b small {
  font: 400 var(--fs-13) var(--font);
  color: var(--muted);
}
.sv-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.sv-legend {
  display: flex;
  gap: 6px 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-12);
  color: var(--muted);
}
.sv-ln {
  display: inline-block;
  width: 24px;
  border-top: 2px solid var(--line);
  margin-right: -8px;
}
.sv-ln.on {
  border-top: 2px dashed var(--accent-fill);
}
.sv-lanes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sv-lane {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sv-lane.production {
  border-left: 4px solid var(--accent-fill);
}
.sv-lane.staging {
  border-left: 4px solid var(--idle);
}
.sv-lh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.sv-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "shop sana wa cust" "console db calls cust";
  gap: 26px 40px;
}
@media (max-width: 760px) {
  .sv-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "shop console" "sana db" "wa calls" "cust cust";
    gap: 22px 16px;
  }
}
.sv-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.sv-wires .w {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}
.sv-wires .w.on {
  stroke: var(--accent-fill);
  stroke-dasharray: 5 7;
}
.sv-wires .e {
  fill: var(--line);
}
.sv-wires .e.on {
  fill: var(--accent-fill);
}
@media (prefers-reduced-motion: no-preference) {
  .sv-wires .w.on {
    animation: sv-flow 1.1s linear infinite;
  }
}
@keyframes sv-flow {
  to {
    stroke-dashoffset: -24;
  }
}
.sv-node {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ok);
}
.sv-node.warn {
  border-top-color: var(--warn);
}
.sv-node.bad {
  border-top-color: var(--bad);
}
.sv-node:hover {
  border-color: var(--faint);
}
.sv-node:focus-visible,
.sv-shared:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
}
.sv-node[aria-pressed="true"],
.sv-shared[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent-fill);
}
.sv-node.out {
  border: 1px dashed var(--faint);
  background: var(--fill);
  justify-content: center;
}
.sv-nt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.sv-does {
  font-size: var(--fs-12);
  color: var(--muted);
  line-height: 1.35;
}
.sv-mb {
  font-size: var(--fs-11);
  color: var(--muted);
}
.sv-now {
  font: 500 var(--fs-11) / 1.3 var(--mono);
  color: var(--accent);
}
.sv-shared {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fill);
  flex-wrap: wrap;
}
.sv-shared .sv-hint {
  flex: 1 1 auto;
}
.sv-detail {
  gap: var(--sp-3);
}
.sv-detail p {
  margin: 0;
}
.sv-dh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.sv-list {
  gap: 0;
}
.sv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
}
.sv-row:last-child {
  border-bottom: 0;
}
.sv-detail .sv-row {
  padding-inline: 0;
}
.sv-rn,
.sv-rc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sv-chart {
  grid-column: 1 / -1;
}
@media (max-width: 620px) {
  .sv-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sv-rc {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.sv-spark {
  width: 100%;
  height: 64px;
  display: block;
}
.sv-spark .g {
  stroke: var(--line);
  stroke-width: 1;
}
.sv-spark .cap {
  stroke: var(--bad);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}
.sv-spark .a {
  fill: var(--accent-soft);
}
.sv-spark .l {
  fill: none;
  stroke: var(--accent-fill);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sv-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-11);
  color: var(--muted);
}
.sv-empty {
  padding: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-13);
}

.sv-wrow {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.sv-wrow .dot {
  margin-top: 6px;
  flex: none;
}
.sv-wtext {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: 1.45;
  overflow-wrap: anywhere;
}