/* Futurewagon assistant console. Tokens and rules: /.stitch/DESIGN.md. Density compact. Elevation: borders only.
   Signature element: the Route (live line of stops a message travels). Light theme only. */
@font-face { font-family: "Geist"; src: url("/admin/static/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/admin/static/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --color-bg-canvas: #f3f2ec;
  --color-bg-surface: #ffffff;
  --color-bg-raised: #eceae2;
  --color-bg-ink: #0f1c1b;
  --color-fg-primary: #131c1b;
  --color-fg-secondary: #3d4a48;
  --color-fg-muted: #5b6866;
  --color-fg-on-accent: #ffffff;
  --color-fg-on-ink: #d6dfdd;
  --color-fg-on-ink-muted: #93a4a1;
  --color-accent: #0b5d5b;
  --color-accent-hover: #094a49;
  --color-accent-pressed: #073a39;
  --color-accent-soft: #e2efed;
  --color-live: #129189;
  --color-success: #1d6a3a;
  --color-success-bg: #dff1e4;
  --color-warning: #8a5a00;
  --color-warning-bg: #fdf0cf;
  --color-danger: #a8231b;
  --color-danger-bg: #fbe5e2;
  --color-border-subtle: #e1dfd6;
  --color-border-strong: #a9a89e;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px;

  --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-deliberate: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --stagger: 30ms;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { background: var(--color-bg-canvas); }
body { margin: 0; color: var(--color-fg-primary); background: var(--color-bg-canvas);
  font: 400 15px/1.5 "Geist", system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent); text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: 40px; letter-spacing: -0.03em; }
h2 { font-size: 18px; letter-spacing: -0.01em; }
h3 { font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-muted); }
.ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.ico.sm { width: 16px; height: 16px; }
[hidden] { display: none !important; }

/* ---- page transitions --------------------------------------------- */
@view-transition { navigation: auto; }
.page { view-transition-name: page; }
/* Only the page content animates. The menu and top bar belong to the root snapshot, which is swapped without a fade, so nothing in the dark menu can flash. */
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root) { display: none; }
::view-transition-old(page) { animation: vt-out var(--duration-fast) var(--ease-exit) both; }
::view-transition-new(page) { animation: vt-in var(--duration-base) var(--ease-standard) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- shell -------------------------------------------------------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; background: linear-gradient(90deg, var(--color-bg-ink) 236px, transparent 236px); }
.side { background: var(--color-bg-ink); color: var(--color-fg-on-ink); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-5); color: #fff; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-accent); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 20px; height: 20px; }
.brand b { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 12px; color: var(--color-fg-on-ink-muted); }
.nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-title { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-on-ink-muted); padding: var(--space-5) var(--space-3) var(--space-2); }
.nav a { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); margin-bottom: 2px;
  border-radius: var(--radius-sm); color: var(--color-fg-on-ink); text-decoration: none; font-size: 14px;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.nav a .ico { color: var(--color-fg-on-ink-muted); transition: color var(--duration-fast) var(--ease-standard); }
.nav a:hover { background: rgba(255, 255, 255, 0.06); }
.nav a:hover .ico { color: var(--color-fg-on-ink); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 500; }
.nav a[aria-current="page"] .ico { color: #7fd3ca; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #7fd3ca; }
.nav-flag { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #e2b04a; }
.nav-flag.bad { background: #f07a6f; }
.side-foot { flex: none; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-2) var(--space-3) env(safe-area-inset-bottom, 0); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: 13px; }
.side-foot .trunc { max-width: 14ch; color: var(--color-fg-on-ink); }
.side-foot a { color: var(--color-fg-on-ink-muted); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 44px; }
.side-foot a:hover { color: #fff; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: 56px; padding: 0 var(--space-9); background: rgba(243, 242, 236, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border-subtle); }
.crumbs { display: flex; align-items: center; gap: var(--space-2); }
.crumbs .ico { color: var(--color-fg-muted); }
.top-right { display: flex; align-items: center; gap: var(--space-3); }
.state { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  text-decoration: none; font-size: 13px; font-weight: 500; color: var(--color-fg-primary); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  transition: border-color var(--duration-fast) var(--ease-standard); }
.state:hover { border-color: var(--color-border-strong); }
.state.warn { background: var(--color-warning-bg); color: var(--color-warning); border-color: #ecd391; }
.state.bad { background: var(--color-danger-bg); color: var(--color-danger); border-color: #eab2ac; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); flex: none; }
.state.ok .state-dot, .banner.ok .state-dot, .status-row.ok .state-dot { background: var(--color-success); }
.state.warn .state-dot, .banner.warn .state-dot, .status-row.warn .state-dot { background: var(--color-warning); }
.state.bad .state-dot, .banner.bad .state-dot, .status-row.bad .state-dot { background: var(--color-danger); animation: beat-red 1.6s var(--ease-standard) infinite; }
.state.ok .state-dot { animation: beat 2.4s var(--ease-standard) infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(18, 145, 137, 0.45); } 70% { box-shadow: 0 0 0 7px rgba(18, 145, 137, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 145, 137, 0); } }
@keyframes beat-red { 0% { box-shadow: 0 0 0 0 rgba(168, 35, 27, 0.4); } 70% { box-shadow: 0 0 0 7px rgba(168, 35, 27, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 35, 27, 0); } }
.page { padding: var(--space-8) var(--space-9) var(--space-10); max-width: 1280px; }
.page.wide { max-width: none; }
.page.flush { max-width: none; padding: 0; }
.page.flush > .note { margin: var(--space-4); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-7); }
.head p { margin: var(--space-2) 0 0; color: var(--color-fg-secondary); max-width: 64ch; }
section { margin-top: var(--space-9); }
section > h2 { margin-bottom: var(--space-2); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-4); }
.sec-head p, .lede { color: var(--color-fg-secondary); margin: var(--space-1) 0 0; max-width: 70ch; font-size: 14px; }
.lede { margin: 0 0 var(--space-4); }

/* ---- tables ------------------------------------------------------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; font-size: 14px; overflow-wrap: anywhere; }
th { font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-muted); background: #faf9f5; overflow-wrap: normal; white-space: nowrap; }
td code { overflow-wrap: normal; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--duration-fast) var(--ease-standard); animation: rise var(--duration-base) var(--ease-standard) both; }
tbody tr:hover { background: #faf9f5; }
tbody tr:nth-child(2) { animation-delay: 30ms; } tbody tr:nth-child(3) { animation-delay: 60ms; } tbody tr:nth-child(4) { animation-delay: 90ms; }
tbody tr:nth-child(5) { animation-delay: 120ms; } tbody tr:nth-child(6) { animation-delay: 150ms; } tbody tr:nth-child(7) { animation-delay: 180ms; }
tbody tr:nth-child(n+8) { animation-delay: 210ms; }
td.n, th.n { text-align: right; }
tr.link-row { cursor: pointer; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ---- controls ----------------------------------------------------- */
label { display: block; font-size: 13px; color: var(--color-fg-secondary); margin-bottom: var(--space-1); }
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=url], input[type=date], select, textarea {
  width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); font: inherit; font-size: 14px; color: inherit;
  background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
input:hover, select:hover, textarea:hover { border-color: var(--color-fg-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(11, 93, 91, 0.18); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #6fb0ac; outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4);
  font: 500 14px/1 "Geist", system-ui, sans-serif; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--color-border-strong);
  background: var(--color-bg-surface); color: var(--color-fg-primary); text-decoration: none; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
.btn:hover { background: var(--color-bg-raised); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-fg-on-accent); }
.btn.primary:hover { background: var(--color-accent-hover); }
.btn.primary:active { background: var(--color-accent-pressed); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--color-accent); padding: 0 var(--space-2); }
.btn.quiet:hover { background: var(--color-accent-soft); }
.btn.danger { color: var(--color-danger); }
.btn.icon { padding: 0; width: 40px; }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.btn[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); align-items: end; margin-bottom: var(--space-4); }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.check input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.inline { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline select, .inline input { width: auto; }
.seg-ctl { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--color-bg-raised); }
.seg-ctl a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--space-3); border-radius: 6px; font-size: 13px; color: var(--color-fg-secondary); text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.seg-ctl a:hover { color: var(--color-fg-primary); }
.seg-ctl a[aria-current="true"] { background: var(--color-bg-surface); color: var(--color-fg-primary); font-weight: 500; }

/* ---- chips, notes, empty ------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: 13px; background: var(--color-bg-raised); color: var(--color-fg-secondary); margin: 0 var(--space-1) var(--space-1) 0; white-space: nowrap; }
.chip.ok { background: var(--color-success-bg); color: var(--color-success); }
.chip.warn { background: var(--color-warning-bg); color: var(--color-warning); }
.chip.bad { background: var(--color-danger-bg); color: var(--color-danger); }
.chip.live { background: var(--color-accent-soft); color: var(--color-accent); }
.note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-5); border: 1px solid var(--color-border-subtle); font-size: 14px; }
.note.ok { background: var(--color-success-bg); color: var(--color-success); border-color: #bfe0c9; animation: fade-away 5s var(--ease-exit) forwards; }
.note.bad { background: var(--color-danger-bg); color: var(--color-danger); border-color: #eab2ac; }
.note.calm { background: var(--color-bg-surface); color: var(--color-fg-secondary); }
@keyframes fade-away { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-6) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.empty .ico { width: 28px; height: 28px; color: var(--color-accent); }
.empty h3 { font-size: 18px; }
.empty p { margin: 0 0 var(--space-2); color: var(--color-fg-secondary); max-width: 60ch; }
.skel { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--color-bg-raised) 0%, #f6f5f0 50%, var(--color-bg-raised) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- overview ----------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); overflow: hidden; }
.figure { padding: var(--space-5); border-right: 1px solid var(--color-border-subtle); animation: rise var(--duration-base) var(--ease-standard) both; }
.figure:nth-child(2) { animation-delay: 30ms; } .figure:nth-child(3) { animation-delay: 60ms; } .figure:nth-child(4) { animation-delay: 90ms; } .figure:nth-child(5) { animation-delay: 120ms; }
.figure:last-child { border-right: 0; }
.figure b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--space-1); }
.figure span { font-size: 13px; color: var(--color-fg-muted); }
.budget { margin-top: var(--space-4); display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center; font-size: 14px; color: var(--color-fg-secondary); }
.meter { grid-column: 1 / -1; height: 6px; border-radius: var(--radius-full); background: var(--color-bg-raised); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--color-accent); border-radius: inherit; transform-origin: left; animation: grow-x var(--duration-deliberate) var(--ease-emphasized) both; }
@keyframes grow-x { from { transform: scaleX(0); } }
.pulse { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.pulse-row { display: grid; grid-template-columns: 20px minmax(160px, 1fr) 260px 130px; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.pulse-row:last-child { border-bottom: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.dot.collecting { background: var(--color-live); animation: beat 1.2s var(--ease-standard) infinite; }
.dot.responding { background: var(--color-warning); animation: beat 0.8s var(--ease-standard) infinite; }
.dot.paused { background: transparent; border: 2px solid var(--color-border-strong); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.bars i { flex: 1; min-height: 3px; background: var(--color-accent); border-radius: 2px 2px 0 0; transform-origin: bottom; animation: grow var(--duration-slow) var(--ease-emphasized) both; }
.bars i:nth-child(odd) { animation-delay: 30ms; }
.bars i.zero { background: var(--color-border-subtle); }
@keyframes grow { from { transform: scaleY(0.05); } }
.pulse-meta { font-size: 13px; color: var(--color-fg-muted); text-align: right; }
.attn { display: grid; gap: 0; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.attn-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); animation: rise var(--duration-base) var(--ease-standard) both; }
.attn-row:last-child { border-bottom: 0; }
.attn-row .ico { color: var(--color-warning); }
.attn-row span { flex: 1; }

/* ---- the Route (signature) ---------------------------------------- */
.route-panel { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-5); position: relative; overflow: hidden; }
.route-panel .sec-head { margin-bottom: var(--space-6); }
.route { position: relative; height: 132px; margin: 0 40px; }
.route .track { position: absolute; left: 0; right: 0; top: 35px; height: 2px; background: var(--color-border-subtle); border-radius: 2px; }
.route .track-lit { position: absolute; left: 0; top: 35px; height: 2px; background: var(--color-accent); border-radius: 2px; transform-origin: left; animation: grow-x var(--duration-deliberate) var(--ease-emphasized) both; }
.route .runner { position: absolute; top: 30px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 0 5px rgba(18, 145, 137, 0.18); pointer-events: none; z-index: 2; }
.route svg.track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route .stop { position: absolute; top: 18px; width: 96px; margin-left: -48px; display: grid; justify-items: center; text-decoration: none; color: inherit; z-index: 1; }
.route .stop:hover .pin { border-color: var(--color-accent); }
.route .pin { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-surface); border: 2px solid var(--color-border-strong); color: var(--color-fg-muted);
  transform: translateX(0); transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); }
.route .pin .ico { width: 16px; height: 16px; }
.route .stop.used .pin { border-color: var(--color-accent); color: var(--color-accent); }
.route .stop.hit .pin { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.route .stop.hit-stop .pin { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.route .stop.hit-err .pin { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.route .stop b { margin-top: var(--space-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.route .stop small { font: 500 12px/1.3 var(--mono); color: var(--color-fg-muted); white-space: nowrap; }
.route .stop small.stopped { color: var(--color-warning); }
.route-foot { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 13px; color: var(--color-fg-muted); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* route strip: one message's progress */
.strip { display: inline-flex; align-items: center; gap: 0; height: 16px; }
.strip i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-subtle); flex: none; position: relative; }
.strip i + i { margin-left: 7px; }
.strip i + i::before { content: ""; position: absolute; right: 8px; top: 3.5px; width: 7px; height: 1px; background: var(--color-border-subtle); }
.strip i.ok { background: var(--color-accent); }
.strip i.ok + i.ok::before { background: var(--color-accent); }
.strip i.stop { background: var(--color-warning); box-shadow: 0 0 0 3px var(--color-warning-bg); }
.strip i.err { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-bg); }
.strip.big { height: auto; display: grid; grid-template-columns: repeat(13, 1fr); width: 100%; }
.strip.big > div { display: grid; justify-items: center; gap: var(--space-2); position: relative; text-align: center; }
.strip.big > div::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--color-border-subtle); z-index: 0; }
.strip.big > div:first-child::before { display: none; }
.strip.big > div.ok::before, .strip.big > div.stop::before, .strip.big > div.err::before { background: var(--color-accent); transform-origin: left; animation: grow-x var(--duration-slow) var(--ease-standard) both; }
.strip.big .pin { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-bg-surface); border: 2px solid var(--color-border-subtle); color: var(--color-border-strong);
  animation: pop var(--duration-base) var(--ease-emphasized) both; }
.strip.big .pin .ico { width: 15px; height: 15px; }
.strip.big .ok .pin { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.strip.big .stop .pin { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.strip.big .err .pin { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.strip.big span { font-size: 12px; color: var(--color-fg-muted); line-height: 1.25; }
.strip.big .ok span, .strip.big .stop span, .strip.big .err span { color: var(--color-fg-primary); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }

/* ---- flow map canvas ---------------------------------------------- */
.mapshell { display: grid; grid-template-columns: 1fr 320px; height: calc(100vh - 56px); border-top: 0; transition: grid-template-columns var(--duration-base) var(--ease-standard); }
.mapshell.wide { grid-template-columns: 1fr 0px; }
.mapshell.wide .inspector { overflow: hidden; padding: 0; border: 0; }
.topright-tools { position: absolute; right: var(--space-4); top: var(--space-4); z-index: 3; display: flex; gap: var(--space-2); align-items: center; }
.lp-text { display: grid; text-align: left; line-height: 1.15; }
.lp-text b { font-size: 13px; font-weight: 600; }
.lp-text small { font-size: 11px; color: var(--color-fg-muted); font-weight: 400; }
.livepill.lost .state-dot { background: var(--color-danger); animation: none; }
.livepill.lost b { color: var(--color-danger); }
.canvas { position: relative; overflow: hidden; background-color: #f7f6f1; cursor: grab; touch-action: none;
  background-image: radial-gradient(circle, #cfcdc3 1px, transparent 1.2px); background-size: 22px 22px; }
.canvas.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.edge { fill: none; stroke: #c4c2b8; stroke-width: 2; transition: stroke var(--duration-base) var(--ease-standard); }
.edge.dashed { stroke-dasharray: 5 6; }
.edge.active { stroke: var(--color-accent); stroke-dasharray: 6 6; animation: march 0.5s linear infinite; }
@keyframes march { to { stroke-dashoffset: -12; } }
.edge-over { fill: none; stroke: var(--color-accent); stroke-width: 3; }
.lane { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); }
.node { position: absolute; width: 196px; height: 72px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; user-select: none;
  transition: border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }
.node:hover { border-color: var(--color-fg-muted); }
.node.sel { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(11, 93, 91, 0.16); }
.node .tile { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); flex: none; }
.node .tile .ico { width: 20px; height: 20px; }
.node b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node small { display: block; font: 500 12px/1.4 var(--mono); color: var(--color-fg-muted); white-space: nowrap; }
.node .badge { position: absolute; top: -9px; right: 10px; font: 600 11px/1 var(--mono); padding: 4px 7px; border-radius: var(--radius-full); background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid #ecd391; }
.node .badge.bad { background: var(--color-danger-bg); color: var(--color-danger); border-color: #eab2ac; }
.node .ring { position: absolute; inset: -4px; border-radius: 15px; pointer-events: none; opacity: 0; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.node.hit .ring { opacity: 1; padding: 2px; background: conic-gradient(from var(--spin), transparent 0 55%, var(--color-live) 80%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 1.1s linear infinite; }
.node.hit-stop .ring { opacity: 1; border: 2px solid var(--color-warning); }
.node.hit-err .ring { opacity: 1; border: 2px solid var(--color-danger); }
@keyframes spin { to { --spin: 360deg; } }
.tools { position: absolute; left: var(--space-4); top: var(--space-4); display: flex; gap: var(--space-2); z-index: 3; }
.tools .group { display: inline-flex; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.tools .group .btn { border: 0; min-height: 36px; }
.tools .group .btn + .btn { border-left: 1px solid var(--color-border-subtle); border-radius: 0; }
.livepill { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 42px; cursor: pointer; padding: 0 var(--space-3);
  border-radius: var(--radius-full); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); font-size: 13px; }
.livepill .state-dot { background: var(--color-live); animation: beat 1.6s var(--ease-standard) infinite; }
.livepill.off .state-dot { background: var(--color-border-strong); animation: none; }
.howto { position: absolute; left: var(--space-4); top: 64px; z-index: 3; width: 380px; padding: var(--space-4) var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); font-size: 14px;
  animation: rise var(--duration-base) var(--ease-standard) both; }
.howto ol { margin: var(--space-2) 0 0; padding-left: 20px; display: grid; gap: var(--space-2); color: var(--color-fg-secondary); }
.dock { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 3; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); animation: rise var(--duration-base) var(--ease-standard) both; }
.dock input[type=range] { flex: 1; accent-color: var(--color-accent); }
.dock .cap { min-width: 280px; font-size: 13px; color: var(--color-fg-secondary); }
.inspector { border-left: 1px solid var(--color-border-subtle); background: var(--color-bg-surface); overflow-y: auto; padding: var(--space-6) var(--space-5); }
.inspector h2 { display: flex; align-items: center; gap: var(--space-3); font-size: 18px; }
.inspector h2 .tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); }
.inspector p { color: var(--color-fg-secondary); font-size: 14px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; margin: var(--space-4) 0; }
.kv div { background: var(--color-bg-surface); padding: var(--space-3); }
.kv b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.kv span { font-size: 12px; color: var(--color-fg-muted); }
.replay-list { display: grid; gap: 2px; margin-top: var(--space-3); }
.replay-list button { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); text-align: left; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: inherit;
  transition: background var(--duration-fast) var(--ease-standard); animation: rise var(--duration-base) var(--ease-standard) both; }
.replay-list button:hover { background: var(--color-bg-canvas); }
.replay-list button[aria-pressed="true"] { background: var(--color-accent-soft); border-color: #b9d8d4; }
.replay-list small { grid-column: 1 / -1; color: var(--color-fg-muted); font-size: 13px; }

/* ---- trace page ---------------------------------------------------- */
.quote { padding: var(--space-4) var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm); font-size: 15px; margin: 0 0 var(--space-7); white-space: pre-wrap; }
.wf { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.wf-scale { display: grid; grid-template-columns: 300px 1fr 80px; padding: var(--space-2) var(--space-4); background: #faf9f5; border-bottom: 1px solid var(--color-border-subtle); }
.wf-scale .ticks { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--color-fg-muted); }
.wf-row { border-bottom: 1px solid var(--color-border-subtle); animation: rise var(--duration-base) var(--ease-standard) both; }
.wf-row:last-child { border-bottom: 0; }
.wf-row > summary { list-style: none; display: grid; grid-template-columns: 300px 1fr 80px; align-items: center; min-height: 48px; padding: 0 var(--space-4); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.wf-row > summary::-webkit-details-marker { display: none; }
.wf-row > summary:hover { background: #faf9f5; }
.wf-row[open] > summary { background: var(--color-accent-soft); }
.wf-name { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wf-name .ico { color: var(--color-fg-muted); }
.wf-name b { font-weight: 500; font-size: 14px; white-space: nowrap; }
.wf-name em { font-style: normal; color: var(--color-fg-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-lane { position: relative; height: 10px; margin: 0 var(--space-4); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--color-border-subtle) calc(25% - 1px) 25%); }
.wf-bar { position: absolute; top: 0; height: 10px; min-width: 10px; border-radius: 5px; background: var(--color-accent); transform-origin: left; animation: grow-x var(--duration-slow) var(--ease-emphasized) both; }
.wf-bar.stopped, .wf-bar.warn, .wf-bar.skipped { background: var(--color-warning); }
.wf-bar.error { background: var(--color-danger); }
.wf-ms { text-align: right; font: 500 12px/1 var(--mono); color: var(--color-fg-muted); }
.wf-div { padding: var(--space-2) var(--space-4); background: #faf9f5; border-bottom: 1px solid var(--color-border-subtle); }
.wf-detail { padding: var(--space-3) var(--space-4) var(--space-4) 52px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-5); font-size: 14px; }
.wf-detail div span { display: block; font-size: 12px; color: var(--color-fg-muted); }
.ctxbar { display: flex; height: 36px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-raised); gap: 2px; }
.ctxbar .seg { height: 100%; transform-origin: left; animation: grow-x var(--duration-deliberate) var(--ease-emphasized) both; }
.ctxbar .seg:nth-child(2) { animation-delay: 60ms; } .ctxbar .seg:nth-child(3) { animation-delay: 120ms; } .ctxbar .seg:nth-child(4) { animation-delay: 180ms; } .ctxbar .seg:nth-child(5) { animation-delay: 240ms; }
.seg.sys, .sw.sys { background: #3d4a48; } .seg.card, .sw.card { background: #b88a2e; } .seg.sum, .sw.sum { background: #3e8e5d; }
.seg.tail, .sw.tail { background: #0b5d5b; } .seg.rest, .sw.rest { background: #a9a89e; }
.ctxkey { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-3); font-size: 13px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.proof { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid #bfe0c9; background: var(--color-success-bg); color: var(--color-success); }
.proof.bad { border-color: #eab2ac; background: var(--color-danger-bg); color: var(--color-danger); }
.proof .ico { width: 24px; height: 24px; }
.proof p { margin: var(--space-1) 0 0; color: var(--color-fg-secondary); }
details.more { margin-top: var(--space-4); }
details.more > summary { cursor: pointer; color: var(--color-accent); font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- control room -------------------------------------------------- */
.settings { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.setting { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(380px, 1.3fr); gap: var(--space-6); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border-subtle); animation: rise var(--duration-base) var(--ease-standard) both; }
.setting:last-child { border-bottom: 0; }
.setting h3 { font-size: 15px; margin-bottom: var(--space-1); }
.setting p { margin: 0; color: var(--color-fg-secondary); font-size: 14px; }
.setting .now { margin-top: var(--space-3); font-size: 13px; color: var(--color-fg-muted); }
.setting .now code { color: var(--color-fg-primary); }
.setting form { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-content: start; }
.setting form .why { grid-column: 1 / -1; }
.dryout { grid-column: 1 / -1; font-size: 14px; }
.dryout:empty { display: none; }
.dryout .reply { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-canvas); animation: rise var(--duration-base) var(--ease-standard) both; }
.hist { display: grid; }
.hist-row { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 14px; }
.hist-row:last-child { border-bottom: 0; }
.hist-row .arrow { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hist-row code { padding: 2px 6px; border-radius: 6px; background: var(--color-bg-raised); }

/* ---- sign in -------------------------------------------------------- */
.auth-grid { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
.auth-intro { padding: var(--space-10) var(--space-9); background: var(--color-bg-ink); color: var(--color-fg-on-ink); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
.auth-intro .brand { padding: 0; font-size: 18px; }
.auth-intro h1 { font-size: 48px; max-width: 14ch; color: #fff; }
.auth-intro p { margin: 0; font-size: 17px; max-width: 44ch; opacity: 0.88; }
.auth-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: var(--space-5); }
.auth-bars i { width: 10px; background: #7fd3ca; opacity: 0.6; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: grow var(--duration-slow) var(--ease-emphasized) both; }
.auth-bars i:nth-child(1) { height: 30%; } .auth-bars i:nth-child(2) { height: 55%; animation-delay: 30ms; } .auth-bars i:nth-child(3) { height: 40%; animation-delay: 60ms; }
.auth-bars i:nth-child(4) { height: 80%; animation-delay: 90ms; } .auth-bars i:nth-child(5) { height: 65%; animation-delay: 120ms; } .auth-bars i:nth-child(6) { height: 95%; animation-delay: 150ms; }
.auth-bars i:nth-child(7) { height: 50%; animation-delay: 180ms; } .auth-bars i:nth-child(8) { height: 72%; animation-delay: 210ms; } .auth-bars i:nth-child(9) { height: 35%; animation-delay: 240ms; }
.auth-bars i:nth-child(10) { height: 60%; animation-delay: 270ms; } .auth-bars i:nth-child(11) { height: 85%; animation-delay: 300ms; } .auth-bars i:nth-child(12) { height: 45%; animation-delay: 330ms; }
.auth-form { display: grid; place-items: center; padding: var(--space-7); }
.auth-form form { width: min(380px, 100%); }
.auth-form h2 { font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.auth-form p.muted { margin: 0 0 var(--space-6); }
.auth-form label { margin-top: var(--space-4); }
.btn.wide { width: 100%; margin-top: var(--space-6); min-height: 44px; }
.auth-form .alt { margin: var(--space-5) 0 0; text-align: center; font-size: 14px; }
.auth-grid > section { margin-top: 0; }

/* ---- shared older pages -------------------------------------------- */
.scroll { overflow-x: auto; border-radius: var(--radius-md); }
table.browse th, table.browse td { white-space: nowrap; }
table.browse td.wrap { white-space: normal; min-width: 220px; max-width: 420px; }
table.cols { margin-top: var(--space-2); }
table.cols td:nth-child(2) { white-space: nowrap; }
.pager { display: flex; gap: var(--space-4); align-items: center; justify-content: center; margin-top: var(--space-5); font-size: 14px; }
details.row { border-top: 1px solid var(--color-border-subtle); padding: var(--space-3) 0; }
details.row summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-height: 44px; }
.list { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0 var(--space-5); }
.list details.row:first-child { border-top: 0; }
.muted { color: var(--color-fg-muted); }
.trunc { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
code, .mono { font-family: var(--mono); font-size: 13px; }
.labnote { margin: 0 0 var(--space-6); }
.labhead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.labhead audio { height: 40px; max-width: 100%; }
form.rate { display: flex; gap: var(--space-1); }
form.rate .btn { min-width: 36px; padding: 0 var(--space-2); }
.refbox { margin-top: var(--space-3); }
.refbox summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--color-accent); }
.refbox textarea { width: 100%; margin: var(--space-2) 0; }
.banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-7); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-fg-primary); text-decoration: none; min-height: 60px;
  transition: border-color var(--duration-fast) var(--ease-standard); }
.banner:hover { border-color: var(--color-border-strong); }
.banner.warn { background: var(--color-warning-bg); border-color: #ecd391; }
.banner.bad { background: var(--color-danger-bg); border-color: #eab2ac; }
.banner > span:nth-child(2) { flex: 1; }
.banner-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-accent); }
.status-list { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.status-row { display: grid; grid-template-columns: 16px 1fr 190px; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.status-row:last-child { border-bottom: 0; }
.status-row strong { display: block; }
.status-row .muted { font-size: 14px; }
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); text-decoration: none; color: var(--color-fg-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--duration-fast) var(--ease-standard); }
.tabs a[aria-selected="true"] { color: var(--color-fg-primary); font-weight: 500; border-bottom-color: var(--color-accent); }
.filters { display: block; margin-bottom: var(--space-5); }
.filters .form-row { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.filters input, .filters select { width: 100%; }
.nowrap { white-space: nowrap; }
.list-stack { display: grid; gap: var(--space-4); }
.msg-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-5); animation: rise var(--duration-base) var(--ease-standard) both; }
.msg-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.msg-subject { font-weight: 600; margin: 0 0 var(--space-2); }
.msg-body { white-space: pre-wrap; font: inherit; margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--color-bg-canvas); border-radius: var(--radius-sm); }

@media (max-width: 1100px) { .mapshell { grid-template-columns: 1fr; height: auto; } .canvas { height: 70vh; } .inspector { border-left: 0; border-top: 1px solid var(--color-border-subtle); } }
@media (max-width: 860px) {
  .shell, .side-min .shell { grid-template-columns: 1fr; background: none; }
  .side { position: static; height: auto; }
  .nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .nav-title, .side-foot { display: none; }
  .topbar, .page { padding-left: var(--space-5); padding-right: var(--space-5); }
  h1 { font-size: 34px; }
  .pulse-row { grid-template-columns: 20px 1fr; }
  .pulse-row .bars, .pulse-row .pulse-meta { grid-column: 2; text-align: left; }
  .status-row { grid-template-columns: 16px 1fr; } .status-row .pulse-meta { grid-column: 2; text-align: left; }
  .auth-grid { grid-template-columns: 1fr; } .auth-intro { padding: var(--space-7) var(--space-5); } .auth-intro h1 { font-size: 40px; } .auth-bars { display: none; }
  .setting { grid-template-columns: 1fr; }
  .wf-scale, .wf-row > summary { grid-template-columns: 1fr 60px; } .wf-lane, .wf-scale .ticks { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .edge.active { animation: none; }
}

/* ---- People ------------------------------------------------------------ */
.ico.xs { width: 13px; height: 13px; vertical-align: -2px; }
.sec-head { margin-bottom: var(--space-4); }
.sec-head.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sec-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.sec-head p { margin: var(--space-1) 0 0; }
.count { font: 500 12px/1 var(--mono); padding: 4px 8px; border-radius: var(--radius-full); background: var(--color-bg-raised); color: var(--color-fg-secondary); }
.search { position: relative; display: flex; align-items: center; margin: 0; }
.search .ico { position: absolute; left: 12px; color: var(--color-fg-muted); pointer-events: none; }
.search input { padding-left: 36px !important; width: 300px; }
.avatar { --h: 172; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; font: 600 14px/1 var(--mono); letter-spacing: 0.02em;
  color: hsl(var(--h) 45% 26%); background: hsl(var(--h) 40% 90%); }
.avatar.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.avatar[data-hue="1"] { --h: 28; } .avatar[data-hue="2"] { --h: 210; } .avatar[data-hue="3"] { --h: 280; } .avatar[data-hue="4"] { --h: 340; } .avatar[data-hue="5"] { --h: 96; }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.person { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); animation: rise var(--duration-base) var(--ease-standard) both; }
.person:hover { border-color: var(--color-border-strong); box-shadow: 0 6px 18px rgba(19, 28, 27, 0.06); }
.person.off { opacity: 0.7; }
.person header { display: flex; align-items: center; gap: var(--space-3); }
.p-name { flex: 1; min-width: 0; }
.p-name b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-name small { color: var(--color-fg-muted); font-size: 13px; }
.chan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.chan li { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; font-size: 14px; }
.chan li.none { color: var(--color-fg-muted); }
.ch-val { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.ch-val .mono { font-size: 13px; overflow-wrap: anywhere; }
.ch-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; }
.ch-ico.whatsapp { background: #def3e6; color: #17703f; }
.ch-ico.slack { background: #efe4f4; color: #6b2c86; }
.ch-ico.email { background: #e3ecf7; color: #24528a; }
.chan li.none .ch-ico { background: var(--color-bg-raised); color: var(--color-fg-muted); }
.ch-add { border: 1px dashed var(--color-border-strong); background: none; border-radius: var(--radius-full); padding: 4px 12px; font: inherit; font-size: 13px; color: var(--color-fg-secondary); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard); }
.ch-add:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }
.person footer { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.person footer .chip { margin: 0; }
.newcomers { padding: var(--space-5); border-radius: var(--radius-md); background: #fbf6e6; border: 1px solid #efdfae; }
.nc-list { display: grid; gap: 2px; background: var(--color-bg-surface); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); overflow: hidden; }
.nc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.nc-row:last-child { border-bottom: 0; }
.nc-who { flex: 1; min-width: 0; }
.nc-who b { display: block; font-weight: 600; }
.nc-who small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--color-fg-muted); font-size: 13px; }
.nc-act { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.nc-link { display: flex; align-items: center; gap: 4px; margin: 0; }
.nc-link select { min-width: 150px; }
/* side panel */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); max-height: none; height: 100vh; padding: 0; border: 0; border-left: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface); color: var(--color-fg-primary); box-shadow: -24px 0 60px rgba(15, 28, 27, 0.18); overflow-y: auto; }
dialog.drawer[open] { animation: drawer-in var(--duration-base) var(--ease-emphasized); }
dialog.drawer::backdrop { background: rgba(15, 28, 27, 0.32); backdrop-filter: blur(2px); animation: fade-in var(--duration-base) var(--ease-standard); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.drawer-body { display: grid; gap: var(--space-4); padding: var(--space-6); align-content: start; min-height: 100%; }
.drawer-body > header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.drawer-body > header h2 { flex: 1; margin: 0; font-size: 20px; }
.drawer-body h3.sub { margin: var(--space-3) 0 0; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.drawer-body h3.sub .muted { font-weight: 400; font-size: 13px; }
.drawer-body small { display: block; margin-top: 4px; font-size: 12px; color: var(--color-fg-muted); }
.drawer-body input[type=text], .drawer-body input[type=email], .drawer-body select { width: 100%; }
.field label, .ch-field label { font-weight: 500; color: var(--color-fg-primary); }
.ch-field { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3); align-items: start; }
.ch-field .ch-ico { margin-top: 24px; }
.from-group { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); font-size: 13px; }
details.more { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
details.more summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--color-fg-secondary); }
details.more[open] summary { margin-bottom: var(--space-3); }
.role-row { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.role-row > div { flex: 1; min-width: 160px; }
.role-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; }
.inline-save { display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; }
.inline-save .field { flex: 1; }
.drawer-body footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--color-border-subtle); position: sticky; bottom: 0; background: var(--color-bg-surface); }
.drawer-body footer.danger-zone { justify-content: space-between; align-items: center; position: static; }
.drawer-body footer.danger-zone form { margin: 0; }
.id-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.id-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.id-list li:last-child { border-bottom: 0; }
.id-list li > div { flex: 1; min-width: 0; display: grid; }
.id-list b { font-size: 12px; font-weight: 500; color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
.id-list .mono { font-size: 14px; overflow-wrap: anywhere; }
.id-list form { margin: 0; }
.add-chan { display: grid; gap: var(--space-2); margin: 0; }
fieldset.pick { display: flex; gap: 4px; padding: 3px; margin: 0; border: 0; border-radius: var(--radius-sm); background: var(--color-bg-raised); }
fieldset.pick label { flex: 1; margin: 0; }
fieldset.pick input { position: absolute; opacity: 0; pointer-events: none; }
fieldset.pick span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: 6px; font-size: 13px; color: var(--color-fg-secondary); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard); }
fieldset.pick span:hover { color: var(--color-fg-primary); }
fieldset.pick input:checked + span { background: var(--color-bg-surface); color: var(--color-fg-primary); font-weight: 500; box-shadow: 0 1px 2px rgba(19, 28, 27, 0.1); }
fieldset.pick input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.add-row { display: flex; gap: var(--space-2); }
.add-row input { flex: 1; }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open], dialog.drawer::backdrop, .person { animation: none; } }

/* ---- Groups ------------------------------------------------------------ */
.group-list { display: grid; gap: var(--space-5); max-width: 920px; }
.gcard { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); animation: rise var(--duration-base) var(--ease-standard) both; }
.gcard > header { display: flex; align-items: center; gap: var(--space-3); }
.g-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-bg-raised); color: var(--color-fg-muted); flex: none; }
.g-tile.on { background: var(--color-accent-soft); color: var(--color-accent); }
.g-title { flex: 1; min-width: 0; }
.g-title h2 { margin: 0; font-size: 18px; }
.g-title small { color: var(--color-fg-muted); font-size: 13px; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse-dot 2s var(--ease-standard) infinite; }
@keyframes pulse-dot { 50% { opacity: 0.35; } }
.note.warn-note { margin: 0; background: var(--color-warning-bg); color: var(--color-warning); border-color: #ecd391; }
.g-form, .g-about { display: grid; gap: var(--space-4); margin: 0; }
.g-form .field input { width: 100%; }
.switches { display: grid; gap: 2px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.switch { position: relative; display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: var(--space-3) var(--space-4); cursor: pointer; background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle); transition: background var(--duration-fast) var(--ease-standard); }
.switch:last-child { border-bottom: 0; }
.switch:hover { background: #faf9f5; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { position: relative; width: 40px; height: 24px; flex: none; border-radius: 12px; background: var(--color-border-strong); transition: background var(--duration-fast) var(--ease-standard); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--duration-base) var(--ease-emphasized); }
.switch input:checked + .track { background: var(--color-accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sw-text { display: grid; gap: 2px; }
.sw-text b { font-weight: 500; color: var(--color-fg-primary); font-size: 14px; }
.sw-text small { color: var(--color-fg-muted); font-size: 13px; }
details.adv, details.members { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
details.adv > summary, details.members > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
details.adv > summary::-webkit-details-marker, details.members > summary::-webkit-details-marker { display: none; }
details.adv > summary small { margin-left: auto; color: var(--color-fg-muted); font-weight: 400; font-size: 13px; }
details.adv[open] > summary, details.members[open] > summary { margin-bottom: var(--space-4); }
details.adv > .switches { margin-bottom: var(--space-4); }
.timings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.timings small { color: var(--color-fg-muted); font-size: 12px; }
.unit { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-fg-muted); }
.unit input { width: 84px; }
fieldset.pick.wide { flex-wrap: wrap; }
fieldset.pick legend { width: 100%; font-size: 13px; color: var(--color-fg-secondary); padding: 0 0 var(--space-2); }
fieldset.pick.wide { background: none; padding: 0; gap: 0; }
fieldset.pick.wide label { flex: 1 1 0; }
fieldset.pick.wide span { background: var(--color-bg-raised); border-radius: 0; min-height: 40px; padding: 0 var(--space-3); text-align: center; }
fieldset.pick.wide label:nth-of-type(1) span { border-radius: 6px 0 0 6px; }
fieldset.pick.wide label:last-of-type span { border-radius: 0 6px 6px 0; }
fieldset.pick.wide input:checked + span { background: var(--color-accent); color: #fff; box-shadow: none; }
.savebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.savebar .btn:disabled { opacity: 0.45; cursor: default; }
.warn-text { color: var(--color-warning) !important; font-weight: 500; }
.g-about label { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--color-fg-primary); }
.g-about textarea { width: 100%; resize: vertical; }
details.members ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
details.members li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
details.members li:last-child { border-bottom: 0; }
details.members li > div { flex: 1; min-width: 0; display: grid; }
details.members li small { color: var(--color-fg-muted); font-size: 12px; }
.small-note { font-size: 12px; margin: var(--space-3) 0 0; }
@media (max-width: 760px) { .timings { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gcard, .chip .dot { animation: none; } .switch .track::after { transition: none; } }

/* ---- Logs -------------------------------------------------------------- */
.log-sum { display: grid; grid-template-columns: repeat(3, 160px) 1fr; gap: var(--space-3); margin-bottom: var(--space-6); }
.ls-tile { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); text-decoration: none; color: var(--color-fg-secondary);
  transition: border-color var(--duration-fast) var(--ease-standard); }
.ls-tile:hover { border-color: var(--color-border-strong); }
.ls-tile span { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ls-tile b { font-size: 28px; font-weight: 600; color: var(--color-fg-primary); }
.ls-tile.bad .ico { color: var(--color-danger); } .ls-tile.warn .ico { color: var(--color-warning); }
.ls-top { display: grid; gap: 6px; align-content: start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); min-width: 0; }
.ls-top > div { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; min-width: 0; }
.ls-top .chip { margin: 0; flex: none; }
@media (max-width: 1000px) { .log-sum { grid-template-columns: repeat(3, 1fr); } .ls-top { grid-column: 1 / -1; } }

/* ---- Collapsible menu -------------------------------------------------- */
.side-toggle { width: 32px; min-height: 32px; margin-right: var(--space-1); color: var(--color-fg-muted); }
.side-min .shell { grid-template-columns: 68px 1fr; background: linear-gradient(90deg, var(--color-bg-ink) 68px, transparent 68px); }
.side-min .side { padding-left: var(--space-2); padding-right: var(--space-2); }
.side-min .brand > span:not(.brand-mark), .side-min .nav a > span:not(.nav-flag), .side-min .side-foot .trunc { display: none; }
.side-min .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.side-min .nav-title { font-size: 0; padding: var(--space-3) 0 var(--space-2); border-top: 1px solid rgba(255, 255, 255, 0.08); margin: var(--space-2) var(--space-2) 0; }
.side-min .nav a { justify-content: center; padding: 0; }
.side-min .nav a .nav-flag { position: absolute; top: 8px; right: 10px; }
.side-min .nav a[aria-current="page"]::before { left: -8px; }
.side-min .side-foot { justify-content: center; padding-left: 0; padding-right: 0; }
.side-min .side-foot a { font-size: 0; gap: 0; }

/* ---- Data tiles -------------------------------------------------------- */
.sec-title { display: flex; align-items: center; gap: var(--space-3); }
.sec-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); }
.sec-title .count { margin-left: var(--space-1); }
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-3); }
.dtile { min-width: 0; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); animation: rise var(--duration-base) var(--ease-standard) both; }
.dtile.l { grid-column: span 2; }
.dtile:hover { border-color: var(--color-border-strong); box-shadow: 0 6px 18px rgba(19, 28, 27, 0.05); }
.dtile[open] { grid-column: 1 / -1; border-color: var(--color-accent); }
.dtile.s { background: transparent; border-style: dashed; }
.dtile > summary { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-3); height: 100%; padding: var(--space-4); cursor: pointer; list-style: none; }
.dtile > summary::-webkit-details-marker { display: none; }
.dt-top { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.dt-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--color-bg-raised); color: var(--color-fg-secondary); }
.dtile:hover .dt-ico, .dtile[open] .dt-ico { background: var(--color-accent-soft); color: var(--color-accent); }
.dtile.l .dt-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent); }
.dt-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dt-title span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-title .ico { flex: none; color: var(--color-warning); }
.dt-count { flex: none; text-align: right; line-height: 1.1; }
.dt-count b { display: block; font-size: 20px; font-weight: 600; }
.dtile.l .dt-count b { font-size: 28px; }
.dt-count small { font-size: 12px; color: var(--color-fg-muted); }
.dtile.s .dt-count b { color: var(--color-fg-muted); }
.dt-purpose { margin: 0; color: var(--color-fg-muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dtile[open] .dt-purpose { -webkit-line-clamp: unset; }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.dt-foot .btn { min-height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.dt-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--color-fg-muted); }
.dtile[open] .dt-more .ico { transform: rotate(90deg); }
.dt-meter { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--color-bg-raised); overflow: hidden; }
.dt-meter i { display: block; height: 100%; width: var(--w, 0%); background: var(--color-accent); border-radius: inherit; }
.dt-body { padding: 0 var(--space-4) var(--space-4); }
.dt-links { margin: 0 0 var(--space-3); }
@media (max-width: 1280px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } .dtile.l { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .dtile { animation: none; } }

/* ---- access ---------------------------------------------------------- */
.acc-list { display: grid; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.acc-row { display: grid; grid-template-columns: 34px 180px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); }
.acc-row:last-child { border-bottom: 0; }
.acc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-grants { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.grant { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 4px 4px 4px 12px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); font-size: 13px; }
.grant small { color: var(--color-fg-secondary); }
.grant .x { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.grant .x:hover { background: rgba(168, 35, 27, 0.12); color: var(--color-danger); }
.dur { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-2); }
.dur input, .dur select { width: 100%; }
@media (max-width: 760px) { .acc-row { grid-template-columns: 34px 1fr auto; } .acc-grants { grid-column: 1 / -1; } }
.sec-head.stack { display: block; }

/* Run status: test or live, and pause everything */
.runbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-bg-surface); margin-bottom: var(--space-5); }
.runbar.is-paused { border-color: #eab2ac; background: var(--color-danger-bg); }
.run-state { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.run-state b { display: block; }
.run-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); flex: none; }
.runbar.is-paused .run-icon { background: #fff; color: var(--color-danger); }
.run-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.seg2 { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); overflow: hidden; background: var(--color-bg-surface); }
.seg2 button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--color-fg-secondary); font: inherit; cursor: pointer; }
.seg2 button[aria-pressed="true"] { background: var(--color-accent); color: #fff; }
.seg2 button:not([aria-pressed="true"]):hover { background: var(--color-bg-raised); }
.runchip { text-decoration: none; margin: 0; }

/* Add-a-fact bar: one row, equal heights, the sentence takes the spare width */
.addbar { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin-top: var(--space-4);
  padding: var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
.addbar label { margin-bottom: var(--space-1); }
@media (max-width: 760px) { .addbar { grid-template-columns: 1fr; } }

/* A tall window shows the whole menu; a short one scrolls it with a soft fade instead of a hard cut */
.nav { -webkit-mask-image: linear-gradient(#000 calc(100% - 20px), transparent); mask-image: linear-gradient(#000 calc(100% - 20px), transparent); padding-bottom: 16px; }
@media (min-width: 901px) and (max-height: 980px) {
  .nav a { min-height: 34px; margin-bottom: 1px; font-size: 13.5px; }
  .nav-title { padding: var(--space-3) var(--space-3) var(--space-1); }
  .brand { padding-bottom: var(--space-2); }
}

.cmd { display: block; margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); background: var(--color-bg-ink); color: var(--color-fg-on-ink); border-radius: var(--radius-sm); font: 13px/1.5 var(--mono); user-select: all; overflow-x: auto; white-space: nowrap; }

/* One size for every field and button: 40px tall, same radius. Selects drop the native look (which ignores height in Safari) and get our own arrow. */
input:not([type]), input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input[type=url], input[type=date], select { height: 40px; }
select { -webkit-appearance: none; appearance: none; padding-right: 36px; line-height: 1.2; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select[multiple] { height: auto; background-image: none; padding-right: var(--space-3); }

/* Settings: the form on the left, the voice lab on the right where the page had spare room. */
.settings-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(300px, 380px); gap: var(--space-7); align-items: start; }
.settings-side { position: sticky; top: var(--space-5); }
@media (max-width: 1180px) { .settings-grid { grid-template-columns: minmax(0, 640px); } .settings-side { position: static; } }

/* Voice lab: the orb moves with the sample that is playing. */
.voicelab { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); }
.vl-stage { width: 220px; height: 220px; flex: none; position: relative; }
.vl-stage canvas { width: 100%; height: 100%; display: block; }
.vl-stage[data-shape="round"] canvas { border-radius: 50%; }
.vl-stage[data-shape="tile"] { background: #05060a; border-radius: var(--radius-lg, 20px); overflow: hidden; }
.vl-list { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; width: 100%; }
.vl-controls { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.vl-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.vl-langs .btn { padding: 0 var(--space-2); }
.vl-langs .btn.on { background: var(--color-accent-soft); border-color: var(--color-accent); }
.vl-status { min-height: 1.2em; }
.decide { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.decide > div { flex: 1; display: grid; gap: 2px; }
.decide small { color: var(--color-text-muted); }
#waiting { max-width: 920px; margin-bottom: var(--space-5); }

/* Flow map: message detail in the side panel */
.msgcard { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-bg-canvas); }
.msgblock { margin: var(--space-3) 0; }
.msgblock .mtext { margin: 4px 0; padding: var(--space-3); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-fg-primary, inherit); }
.msgblock audio { width: 100%; margin-top: 6px; }
.steplist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.steplist button { width: 100%; display: grid; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: inherit; border-left: 3px solid #0b5d5b; }
.steplist button.stopped, .steplist button.skipped, .steplist button.warn { border-left-color: #8a5a00; }
.steplist button.error { border-left-color: #a8231b; }
.steplist button:hover { background: var(--color-bg-surface); }
.steplist small { color: var(--color-fg-muted); font-size: 12px; }
.stp { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-canvas); border-left: 3px solid #0b5d5b; }
.stp.stopped, .stp.skipped, .stp.warn { border-left-color: #8a5a00; }
.stp.error { border-left-color: #a8231b; }
.stp-h { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.stp-h span { color: var(--color-fg-muted); font-size: 12px; white-space: nowrap; }
.stp pre { margin: 4px 0 8px; padding: 8px; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: 6px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.stp dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 13px; }
.stp dt { color: var(--color-fg-muted); } .stp dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.eyebrow { display: block; }

/* Agenda board */
.agtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.agtiles div { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.agtiles b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.agtiles span { color: var(--color-fg-muted); font-size: 13px; }
.agboard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.agday h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-fg-muted); margin: var(--space-5) 0 var(--space-2); }
.agitem { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-left: 4px solid #8a5a00; border-radius: var(--radius-sm); }
.agitem.event { border-left-color: #0b5d5b; }
.agtime { font-weight: 600; font-size: 18px; } .agtime small { display: block; font-weight: 400; font-size: 12px; color: var(--color-fg-muted); }
.agmain { display: grid; gap: 3px; min-width: 0; } .agmain b { overflow-wrap: anywhere; }
.agdone { margin-top: var(--space-5); color: var(--color-fg-secondary); font-size: 14px; }
.agnotes { display: grid; gap: var(--space-3); }
.agnote { background: #fffbea; border: 1px solid #ecd391; border-radius: var(--radius-md); padding: var(--space-4); }
.agnote header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: var(--space-2); }
.agbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; margin-bottom: var(--space-2); }
@media (max-width: 1000px) { .agboard { grid-template-columns: 1fr; } }