/* GENERATED by scripts/build-web-assets.js from design/tokens.css, design/app.css and the mockup meta CSS.
   Edit the design sources and rerun; do not edit this file. */
/* Orpheus design tokens. Source of truth: design/DESIGN.md.
   Dark is the home theme (the cockpit grew up dark). Light is a full second theme.
   Theme resolution: system by default; <html data-theme="dark|light"> overrides either way. */

:root {
  color-scheme: dark;

  /* surfaces, warm neutrals biased toward the accent hue */
  --bg: #1a1917;        /* page ground */
  --panel: #211f1d;     /* sidebar, cards, panes */
  --panel2: #262523;    /* raised: pane heads, inputs, hover rows */
  --panel3: #2d2b28;    /* pressed, selected, code blocks */
  --line: #35322f;      /* hairlines */
  --line2: #423e3a;     /* control borders */

  /* text */
  --ink: #eceae7;       /* primary text, 13.6:1 on --bg */
  --mut: #a49f98;       /* secondary text, 6.6:1 */
  --dim: #938d86;       /* labels and meta, 5.2:1 (never below this for text) */

  /* accent: the one orange. Not a status color. */
  --accent: #d97757;
  --accent2: #e08a6d;   /* hover, links on dark */
  --accent-ink: #e08a6d;/* accent used as text */
  --on-accent: #191817; /* text on an accent fill */
  --accent-soft: rgba(217, 119, 87, .14);
  --accent-line: rgba(217, 119, 87, .45);

  /* status: separate from the accent */
  --good: #7fb682;  --good-soft: rgba(127, 182, 130, .13);  --good-line: rgba(127, 182, 130, .40);
  --warn: #d9a441;  --warn-soft: rgba(217, 164, 65, .13);   --warn-line: rgba(217, 164, 65, .45);
  --bad:  #e5736b;  --bad-soft:  rgba(229, 115, 107, .13);  --bad-line:  rgba(229, 115, 107, .45);
  --info: #8ab4f0;  --info-soft: rgba(138, 180, 240, .13);  --info-line: rgba(138, 180, 240, .32);

  /* terminal panes keep their own ground in both themes */
  --term-bg: #161514;
  --term-ink: #e6e3df;
  --term-dim: #8f8982;

  --scrim: rgba(0, 0, 0, .62);
  --shadow-pop: 0 14px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --glow-good: 0 0 6px var(--good);

  /* type */
  --mono: ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Code', 'Roboto Mono', monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-micro: 10.5px;  /* mono caps labels, letter-spacing .14em */
  --fs-xs: 12px;       /* meta, badges */
  --fs-sm: 13px;       /* sidebar rows, table cells */
  --fs-base: 15px;     /* body */
  --fs-md: 17px;       /* page titles in the app, lead text */
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-read: 19px;     /* Read view on desktop; 17.5px on phones */
  --lh-tight: 1.2;
  --lh-base: 1.5;

  /* space: 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* radius */
  --r-xs: 5px;    /* badges, kbd */
  --r-sm: 8px;    /* sidebar rows, segmented controls, small inputs */
  --r-md: 10px;   /* buttons, fields */
  --r-lg: 12px;   /* panes, cards */
  --r-xl: 16px;   /* sheets, dialogs */
  --r-pill: 999px;

  /* sizes */
  --tap: 44px;          /* minimum touch target */
  --side-w: 300px;      /* app sidebar */
  --page-w: 920px;      /* settings-type pages */

  /* layers */
  --z-side: 40; --z-pop: 60; --z-scrim: 70; --z-sheet: 80; --z-toast: 90;

  /* motion */
  --t-fast: 80ms; --t: 160ms; --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Light values. Same token names; components never branch on theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f3f0; --panel: #fbfaf8; --panel2: #efece8; --panel3: #e6e2dd;
    --line: #dcd7d0; --line2: #c6c0b8;
    --ink: #1f1d1a; --mut: #5c5750; --dim: #746e66;
    --accent: #c2552f; --accent2: #a8431f; --accent-ink: #a8431f; --on-accent: #ffffff;
    --accent-soft: rgba(194, 85, 47, .10); --accent-line: rgba(194, 85, 47, .42);
    --good: #3b7a42; --good-soft: rgba(59, 122, 66, .10); --good-line: rgba(59, 122, 66, .38);
    --warn: #8f6410; --warn-soft: rgba(176, 124, 20, .12); --warn-line: rgba(176, 124, 20, .45);
    --bad: #b8382f;  --bad-soft: rgba(184, 56, 47, .09);  --bad-line: rgba(184, 56, 47, .40);
    --info: #2c66b3; --info-soft: rgba(44, 102, 179, .09); --info-line: rgba(44, 102, 179, .32);
    --scrim: rgba(31, 29, 26, .42);
    --shadow-pop: 0 14px 40px rgba(31, 29, 26, .16), 0 2px 6px rgba(31, 29, 26, .10);
    --glow-good: none;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3f0; --panel: #fbfaf8; --panel2: #efece8; --panel3: #e6e2dd;
  --line: #dcd7d0; --line2: #c6c0b8;
  --ink: #1f1d1a; --mut: #5c5750; --dim: #746e66;
  --accent: #c2552f; --accent2: #a8431f; --accent-ink: #a8431f; --on-accent: #ffffff;
  --accent-soft: rgba(194, 85, 47, .10); --accent-line: rgba(194, 85, 47, .42);
  --good: #3b7a42; --good-soft: rgba(59, 122, 66, .10); --good-line: rgba(59, 122, 66, .38);
  --warn: #8f6410; --warn-soft: rgba(176, 124, 20, .12); --warn-line: rgba(176, 124, 20, .45);
  --bad: #b8382f;  --bad-soft: rgba(184, 56, 47, .09);  --bad-line: rgba(184, 56, 47, .40);
  --info: #2c66b3; --info-soft: rgba(44, 102, 179, .09); --info-line: rgba(44, 102, 179, .32);
  --scrim: rgba(31, 29, 26, .42);
  --shadow-pop: 0 14px 40px rgba(31, 29, 26, .16), 0 2px 6px rgba(31, 29, 26, .10);
  --glow-good: none;
}

@media (max-width: 699px) {
  :root { --fs-read: 17.5px; }
}

/* Orpheus app components. Needs tokens.css first. Class names are the contract for the web UI port.
   Layout idea: a fixed sidebar (workspace, nav, sessions) and one working column; on phones the sidebar is a drawer. */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: var(--fs-base)/var(--lh-base) var(--sans); }
a { color: var(--accent-ink); text-underline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; line-height: var(--lh-tight); }
button, input, select { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 24px; height: 24px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); } .dim { color: var(--dim); }
.sp { flex: 1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- label: mono caps, the product's voice for section names --- */
.label { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* --- buttons --- */
.btn { min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn:active { filter: brightness(1.08); }
.btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.go:hover { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--mut); }
.btn.quiet:hover { border-color: var(--line2); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 36px; padding: 0 var(--s3); font-size: 13px; border-radius: var(--r-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
@media (pointer: coarse) { .btn.sm { min-height: var(--tap); } }
.iconbtn { width: var(--tap); height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line2); background: transparent; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.iconbtn:hover { color: var(--accent-ink); border-color: var(--accent); }
.iconbtn.bare { border-color: transparent; }

/* --- fields --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font: 600 13px var(--sans); color: var(--mut); }
.input { min-height: var(--tap); width: 100%; padding: 0 var(--s3); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); font: 16px var(--sans); }
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.bad { border-color: var(--bad); }
.hint { font-size: var(--fs-xs); color: var(--dim); }
.err { font-size: var(--fs-sm); color: var(--bad); display: flex; gap: 6px; align-items: flex-start; }
select.input { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.select-sm { min-height: 36px; font-size: 13px; width: auto; }
@media (pointer: coarse) { .select-sm { min-height: var(--tap); } }

/* 6-digit code */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.otp input { min-width: 0; height: 56px; text-align: center; font: 600 24px var(--mono); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); padding: 0; }
.otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.otp.bad input { border-color: var(--bad); }

/* --- badges, pills, chips --- */
.badge { font: 700 10px/1.4 var(--mono); letter-spacing: .06em; padding: 1px 6px; border-radius: var(--r-xs); border: 1px solid var(--line2); color: var(--mut); white-space: nowrap; flex: none; }
.badge.claude { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.badge.codex { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.badge.shell { color: var(--dim); }
.badge.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-xs)/1 var(--sans); padding: 5px 9px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--mut); white-space: nowrap; flex: none; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.plain::before { display: none; }
.pill.good { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.pill.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.pill.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.good { background: var(--good); box-shadow: var(--glow-good); }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.dot.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
kbd { font: 11px var(--mono); background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 0 5px; }

/* segmented control */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; }
.seg > * { font: 12px var(--mono); padding: 7px 13px; color: var(--mut); cursor: pointer; background: none; border: 0; }
.seg > .on { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* --- avatar --- */
.av { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--panel3); border: 1px solid var(--line2); color: var(--ink); font: 700 12px var(--mono); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.av.round { border-radius: 50%; }
.av.ws { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }

/* --- app shell --- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 9px; padding: 15px var(--s4) 12px; }
.brand b { font-weight: 600; font-size: 15px; }
.mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.mark .mk-s { stroke: var(--ink); }
.wsbtn { margin: 0 var(--s2) var(--s2); display: flex; align-items: center; gap: 10px; padding: 7px 9px; min-height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); cursor: pointer; text-align: left; position: relative; }
.wsbtn:hover, .wsbtn.open { border-color: var(--accent); }
.wsbtn .nm { flex: 1; min-width: 0; }
.wsbtn .nm b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsbtn .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.nav { display: flex; flex-direction: column; gap: 1px; padding: var(--s1) var(--s2); }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--mut); text-decoration: none; font-size: var(--fs-sm); }
.nav a:hover { background: var(--panel2); color: var(--ink); }
.nav a.on { background: var(--panel2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.nav a .ct { margin-left: auto; font: 600 11px var(--mono); color: var(--on-accent); background: var(--warn); border-radius: var(--r-pill); padding: 1px 7px; }
.side .label { padding: var(--s4) var(--s4) 6px; }
.tree { padding: 0 var(--s2) var(--s4); }
.boxh { display: flex; align-items: center; gap: 8px; padding: 9px 8px 5px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.sess { display: flex; align-items: center; gap: 9px; padding: 7px 10px; margin: 2px 0; border-radius: var(--r-sm); cursor: pointer; color: var(--mut); font: var(--fs-sm) var(--mono); }
.sess:hover, .sess.open { background: var(--panel2); color: var(--ink); }
.sess .snm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess .need { font: 600 10px var(--sans); color: var(--on-accent); background: var(--warn); border-radius: var(--r-pill); padding: 2px 7px; flex: none; }
.sidefoot { margin-top: auto; border-top: 1px solid var(--line); padding: var(--s2); display: flex; align-items: center; gap: 10px; }
.sidefoot .who { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidefoot .who small { display: block; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { display: none; align-items: center; gap: var(--s2); padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar b { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main { min-width: 0; display: flex; flex-direction: column; }
.page { width: 100%; max-width: calc(var(--page-w) + 2 * var(--s8)); margin: 0 auto; padding: var(--s8) max(var(--s8), env(safe-area-inset-right, 0px)) var(--s16) max(var(--s8), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--s6); }
.pagehead { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.pagehead .tt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pagehead h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.pagehead p { color: var(--mut); max-width: 62ch; }
.crumb { font: var(--fs-xs) var(--mono); color: var(--dim); display: flex; gap: 6px; align-items: center; }
.crumb a { color: var(--mut); text-decoration: none; } .crumb a:hover { color: var(--accent-ink); }
.sect { display: flex; flex-direction: column; gap: var(--s3); }
.sect > header { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sect h2 { font-size: var(--fs-md); font-weight: 650; }

@media (max-width: 699px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .side.drawer { display: flex; position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: var(--z-side); box-shadow: var(--shadow-pop); }
  .topbar { display: flex; }
  .page { padding: var(--s5) max(16px, env(safe-area-inset-right, 0px)) var(--s12) max(16px, env(safe-area-inset-left, 0px)); gap: var(--s5); }
  .pagehead h1 { font-size: var(--fs-lg); }
}

/* --- cards and rows --- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card.pad { padding: var(--s5); }
.rows > .row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 60px; }
.rows > .row + .row { border-top: 1px solid var(--line); }
.row .main-t { flex: 1 1 0; min-width: 0; }
.row .main-t b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.row .main-t small { display: block; color: var(--dim); font: var(--fs-xs)/1.5 var(--mono); overflow-wrap: anywhere; }
.row .acts { display: flex; align-items: center; gap: var(--s2); flex: none; }
a.row { color: inherit; text-decoration: none; }
a.row:hover { background: var(--panel2); }
.row .ico { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--panel2); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--mut); flex: none; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s5); font-size: var(--fs-sm); }
.kv dt { color: var(--dim); font-family: var(--mono); font-size: var(--fs-xs); padding-top: 1px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* banner */
.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); font-size: var(--fs-sm); color: var(--mut); }
.banner b { color: var(--ink); }
.banner .btxt { flex: 1; min-width: 0; }
.banner.warn { background: var(--warn-soft); border-color: var(--warn-line); } .banner.warn > svg { color: var(--warn); }
.banner.good { background: var(--good-soft); border-color: var(--good-line); } .banner.good > svg { color: var(--good); }
.banner.accent { background: var(--accent-soft); border-color: var(--accent-line); } .banner.accent > svg { color: var(--accent-ink); }
.banner.bad { background: var(--bad-soft); border-color: var(--bad-line); } .banner.bad > svg { color: var(--bad); }

/* code block with copy */
.code { position: relative; background: var(--term-bg); color: var(--term-ink); border: 1px solid var(--line2); border-radius: var(--r-md); font: 13px/1.6 var(--mono); padding: var(--s4); padding-right: 104px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .tok { color: #e0a24b; }
.code .cm { color: var(--term-dim); }
.code .copy { position: absolute; top: 10px; right: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid #4a4541; background: #262523; color: #eceae7; font: 600 13px var(--sans); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.code .copy:hover { border-color: #d97757; color: #e08a6d; }
.code .copy.done { color: #7fb682; border-color: rgba(127, 182, 130, .5); }
@media (max-width: 699px) { .code { padding-right: var(--s4); padding-bottom: 60px; } .code .copy { top: auto; bottom: 10px; left: 10px; right: 10px; justify-content: center; min-height: var(--tap); } }

/* steps */
.steps { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0; font: var(--fs-xs) var(--mono); color: var(--dim); flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--line2); }
.steps .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.steps .on { color: var(--ink); } .steps .on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.steps .done { color: var(--good); } .steps .done .n { border-color: var(--good-line); background: var(--good-soft); }

/* countdown ring row */
.count { display: flex; align-items: center; gap: var(--s2); font: var(--fs-sm) var(--mono); color: var(--mut); }
.count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.count.low b { color: var(--warn); }
.bar-time { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar-time i { display: block; height: 100%; background: var(--accent); }

/* waiting line */
.wait { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border: 1px dashed var(--line2); border-radius: var(--r-md); color: var(--mut); font-size: var(--fs-sm); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--accent); animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- usage meter: fill = used now, tick = on track for at reset, right edge = 100% of the limit --- */
.meter { position: relative; height: 12px; border-radius: 6px; background: var(--panel3); }
.meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--good); }
.meter .proj { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--good-line) 0 4px, transparent 4px 8px); }
.meter .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.meter.warn .fill { background: var(--warn); } .meter.warn .proj { background: repeating-linear-gradient(135deg, var(--warn-line) 0 4px, transparent 4px 8px); }
.meter.bad .fill { background: var(--bad); } .meter.bad .proj { background: repeating-linear-gradient(135deg, var(--bad-line) 0 4px, transparent 4px 8px); }
.meter.thin { height: 6px; }
.meter-scale { display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--dim); margin-top: 6px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .v { font: 650 var(--fs-xl)/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .v small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }

/* --- popover and sheet --- */
.pop { position: absolute; z-index: var(--z-pop); min-width: 260px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 6px; }
.pop .label { padding: 8px 10px 6px; }
.pop .opt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: var(--tap); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.pop .opt:hover { background: var(--panel2); }
.pop .opt .nm { flex: 1; min-width: 0; }
.pop .opt .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.pop .opt.on svg.chk { color: var(--accent-ink); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-scrim); }
.sheet { position: fixed; z-index: var(--z-sheet); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.sheet.wide { width: min(620px, calc(100vw - 32px)); }
.sheet h2 { font-size: var(--fs-lg); font-weight: 650; }
.sheet .x { position: absolute; top: 10px; right: 10px; }
.sheet .sheet-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; }
.sheet .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sheet .acts .btn { flex: 1 1 140px; }
.grab { display: none; }
@media (max-width: 699px) {
  .sheet, .sheet.wide { left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; border-width: 1px 0 0; padding: var(--s3) max(16px, env(safe-area-inset-right, 0px)) calc(var(--s5) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); max-height: 88dvh; }
  .grab { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto var(--s1); flex: none; }
  .pop.as-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-width: 0; z-index: var(--z-sheet); border-radius: var(--r-xl) var(--r-xl) 0 0; border-width: 1px 0 0; padding: var(--s3) 10px calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
}

/* --- auth pages --- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: var(--s8) max(16px, env(safe-area-inset-right, 0px)) var(--s8) max(16px, env(safe-area-inset-left, 0px)); }
.authcard { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s5); }
.authcard .brand { padding: 0; }
.authcard h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.authcard .sub { color: var(--mut); }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--dim); font: var(--fs-micro) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.fine { font-size: var(--fs-xs); color: var(--dim); }
.fine a { color: var(--mut); }

/* --- plans --- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.plan { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.plan.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan h3 { font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.plan .price { font: 650 var(--fs-2xl)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-sm); color: var(--mut); flex: 1; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { color: var(--good); margin-top: 2px; }
@media (max-width: 899px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* --- empty state --- */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s10) var(--s8); border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.empty h2 { font-size: var(--fs-lg); font-weight: 650; }
.empty p { color: var(--mut); max-width: 56ch; }
.empty .glyph { font: 12px/1.35 var(--mono); color: var(--dim); white-space: pre; }
@media (max-width: 699px) { .empty { padding: var(--s6) var(--s4); } }

/* --- additions used by specific screens --- */
.meter .limit { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--bad); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 899px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.login { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.login > header { display: flex; align-items: flex-start; gap: var(--s3); }
.login > header .main-t { flex: 1; min-width: 0; }
.login > header b { display: block; font-size: 15px; }
.login > header small { font: var(--fs-xs) var(--mono); color: var(--dim); }
.login .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.login .ontrack { font-size: var(--fs-sm); color: var(--mut); }
.login .ontrack b { color: var(--ink); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font: 12px var(--mono); color: var(--mut); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 2px 7px; }
.tag.move { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: end; }
@media (max-width: 699px) { .inline-form { grid-template-columns: minmax(0, 1fr); } }
.quote { font: 13px/1.5 var(--mono); color: var(--mut); background: var(--panel2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-sm); padding: var(--s3); overflow-wrap: anywhere; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--mut); }
.checks li { display: flex; gap: 9px; align-items: flex-start; }
.checks li svg { margin-top: 2px; }
.checks li.yes svg { color: var(--good); } .checks li.no svg { color: var(--bad); }
.checks b { color: var(--ink); font-weight: 600; }
.phone-only { display: none; }
@media (max-width: 699px) { .phone-only { display: block; } .desk-only { display: none !important; } }

/* --- asks, decisions, rooms (added with the three feature screens) ---
   Three widths: desktop (700+), Duo two-pane (466 to 699, dense on purpose), phone (up to 465). */
.page.wide { max-width: 1400px; }
textarea.input { padding: 10px var(--s3); min-height: 72px; line-height: 1.4; resize: vertical; display: block; }
.lk { filter: blur(3px); opacity: .5; pointer-events: none; user-select: none; }

/* tabs: page-level views with counts */
.tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--panel2); }
.tab { min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; color: var(--mut); font: 600 13px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line2); }
.tab .n { font: 600 11px var(--mono); color: var(--dim); }
.tab .n.hot { color: var(--on-accent); background: var(--warn); border-radius: var(--r-pill); padding: 1px 7px; }

/* session identity: state dot, session name, server, agent kind. One line everywhere a session is named. */
.sid { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: var(--fs-sm) var(--mono); color: var(--ink); }
.sid b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sid small { font-size: 11px; color: var(--dim); white-space: nowrap; }

/* the answer someone gave. Yes, no and discuss carry state colors plus the word. */
.ans { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--sans); padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel3); color: var(--ink); overflow-wrap: anywhere; }
.ans.yes { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.ans.no { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.ans.discuss { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }

/* delivery track: answered, then typed into the session (or queued, or failed) */
.track { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; font: var(--fs-xs)/1.4 var(--mono); color: var(--dim); }
.track li { display: inline-flex; align-items: center; gap: 5px; }
.track li + li::before { content: ""; width: 14px; height: 1px; background: var(--line2); }
.track .ok { color: var(--good); } .track .pend { color: var(--warn); } .track .fail { color: var(--bad); }

/* a row icon can carry delivery state */
.row .ico.good { color: var(--good); } .row .ico.warn { color: var(--warn); } .row .ico.bad { color: var(--bad); }
.row .main-t .track { margin-top: 4px; }
.row .main-t .said { display: block; font-size: var(--fs-sm); color: var(--mut); margin-top: 2px; }

/* ask card */
.asklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 1500px) { .asklist { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ask { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5); }
.ask > header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ask .age { margin-left: auto; font: var(--fs-xs) var(--mono); color: var(--dim); white-space: nowrap; }
.ask .q { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ask .ctx { font-size: var(--fs-sm); color: var(--mut); max-width: 72ch; overflow-wrap: anywhere; }
.opts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.opts .btn { white-space: normal; text-align: left; padding-block: 8px; }
.ask .outcome { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); }
.ask .outcome .track { flex: 1 1 200px; }

/* decisions */
.dcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 1180px) { .dcols { grid-template-columns: minmax(0, 1fr) 300px; } }
.dcols > * { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.runbar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; font: var(--fs-xs) var(--mono); color: var(--dim); }
.runbar b { color: var(--ink); font-weight: 600; }
.dgroup > header { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s4); min-height: var(--tap); border-bottom: 1px solid var(--line); background: var(--panel2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dgroup > header .ct { margin-left: auto; font: var(--fs-xs) var(--mono); color: var(--dim); white-space: nowrap; }
.ditem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); padding: var(--s4); align-items: start; }
.ditem + .ditem { border-top: 1px solid var(--line); }
.ditem .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ditem .q { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ditem .q .pill { vertical-align: 2px; margin-left: 4px; }
.ditem .ctx { font-size: var(--fs-sm); color: var(--mut); max-width: 72ch; overflow-wrap: anywhere; }
.ditem .rec { font: var(--fs-xs)/1.5 var(--mono); color: var(--dim); }
.ditem .rec b { color: var(--mut); font-weight: 600; }
.ditem .note { grid-column: 1 / -1; }
.choices { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, auto); gap: 6px; }
.choice { min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--mut); font: 600 13px var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.choice:hover { color: var(--ink); border-color: var(--mut); }
.choice svg { display: none; }
.choice.on svg { display: block; }
.choice.on.yes { color: var(--good); background: var(--good-soft); border-color: var(--good); }
.choice.on.no { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.choice.on.discuss { color: var(--info); background: var(--info-soft); border-color: var(--info); }
.agst { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: 8px var(--s3); min-height: 40px; }
.agst + .agst { border-top: 1px solid var(--line); }
.agst .sid { flex: 0 1 auto; }
.agst .st { margin-left: auto; font: var(--fs-xs) var(--mono); color: var(--dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.agst .st.good { color: var(--good); } .agst .st.warn { color: var(--warn); } .agst .st.bad { color: var(--bad); }
.rows.tight > .row { min-height: 48px; padding: 8px var(--s3); }
.rows.tight > .row.on { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.cardhead { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2); }
.cardhead .label { flex: 1; }

/* submit bar: sticks to the bottom of the working column */
.submitbar { position: sticky; bottom: 0; z-index: 20; margin-top: auto; background: var(--panel); border-top: 1px solid var(--line); padding: 10px max(var(--s8), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--s8), env(safe-area-inset-left, 0px)); }
.submitbar .in { max-width: 1336px; margin: 0 auto; display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.submitbar .cnt { flex: 1 1 150px; min-width: 0; font: var(--fs-sm) var(--mono); color: var(--mut); }
.submitbar .cnt b { color: var(--ink); }

/* dry-run preview: one block per session, showing the exact text that will be typed */
.wsend { display: flex; flex-direction: column; gap: 6px; }
.wsend > header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.wsend > header .sid { flex: 1 1 0; }
.typed { background: var(--term-bg); color: var(--term-ink); border: 1px solid var(--line2); border-radius: var(--r-sm); font: 12.5px/1.55 var(--mono); padding: var(--s3); white-space: pre-wrap; overflow-wrap: anywhere; }
.typed .d { color: var(--term-dim); }

/* picker: tick people or agent sessions (decision roster, room members) */
.picker { display: flex; flex-direction: column; }
.picker .boxh { padding-left: var(--s2); }
.pick { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 4px var(--s2); border-radius: var(--r-sm); cursor: pointer; }
.pick:hover { background: var(--panel2); }
.pick input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.pick .nm { flex: 1 1 0; min-width: 0; font: var(--fs-sm) var(--mono); overflow-wrap: anywhere; }
.pick .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.pick.person .nm { font: 14px var(--sans); }
.pick.off { cursor: default; } .pick.off .nm { color: var(--dim); }

/* switch and schedule times */
.switchrow { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); }
.switchrow .main-t { flex: 1 1 0; min-width: 0; font-size: var(--fs-sm); }
.switchrow .main-t b { display: block; font-size: 14.5px; }
.switchrow .main-t small { color: var(--dim); font: var(--fs-xs)/1.5 var(--mono); }
.switch { position: relative; width: 46px; height: 28px; flex: none; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--panel3); cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mut); transition: transform var(--t) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.timeset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.time { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 2px 0 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.time button { width: 30px; height: 30px; border: 0; background: none; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-xs); }
.time button:hover { color: var(--bad); }
.timeset .input { width: auto; }

/* rooms: list beside a thread */
.rooms { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100dvh; min-height: 0; }
.roomlist { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); padding-bottom: var(--s4); }
.roomlist > header { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); min-height: 56px; }
.roomlist > header h1 { flex: 1; font-size: var(--fs-md); font-weight: 650; }
.roomrow { display: flex; flex-direction: column; gap: 2px; margin: 1px var(--s2); padding: 9px var(--s3); border-radius: var(--r-sm); color: var(--mut); text-decoration: none; cursor: pointer; }
.roomrow:hover, .roomrow.on { background: var(--panel2); }
.roomrow.on { box-shadow: inset 2px 0 0 var(--accent); }
.roomrow .top { display: flex; align-items: baseline; gap: var(--s2); }
.roomrow .top b { flex: 1; min-width: 0; font: 600 13.5px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomrow .top time { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.roomrow .last { display: flex; align-items: center; gap: var(--s2); font-size: 12.5px; }
.roomrow .last span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomrow .unread { font: 700 11px var(--mono); color: var(--ink); background: var(--panel3); border: 1px solid var(--line2); border-radius: var(--r-pill); padding: 0 7px; flex: none; }
.roomrow .who { font: 11px var(--mono); color: var(--dim); }
.thread { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.thead { display: flex; align-items: center; gap: var(--s3); padding: 6px var(--s3) 6px var(--s5); min-height: 56px; border-bottom: 1px solid var(--line); background: var(--panel); }
.thead .back { display: none; }
.thead .tt { flex: 1; min-width: 0; }
.thead .tt b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thead .tt small { display: block; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avs { display: inline-flex; padding-left: 6px; flex: none; }
.avs .av { width: 26px; height: 26px; font-size: 10px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.posts { overflow-y: auto; padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.posts > * { width: 100%; max-width: 820px; }
.post { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 var(--s3); }
.post > .av { grid-row: 1 / span 2; }
.post .by { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 22px; font-size: 13.5px; }
.post .by b { font-weight: 600; }
.post .by time { font: 11px var(--mono); color: var(--dim); }
.post .tx { grid-column: 2; overflow-wrap: anywhere; }
.post .tx code { font: .86em var(--mono); background: var(--panel3); border-radius: var(--r-xs); padding: 1px 5px; }
/* an agent session's post: square terminal avatar, mono name with server and kind, boxed text */
.post.agent .av { background: var(--term-bg); color: var(--term-ink); border-color: var(--line2); }
.post.agent .by b { font: 600 13px var(--mono); }
.post.agent .by small { font: 11px var(--mono); color: var(--dim); }
.post.agent .tx { margin-top: 4px; padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg); }
.post.sys { display: block; text-align: center; font: var(--fs-xs) var(--mono); color: var(--dim); }
.composer { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); background: var(--panel); padding: 9px var(--s3) calc(9px + env(safe-area-inset-bottom, 0px)); }
.composer .msg { font: 16px var(--sans); border-color: var(--line2); }
.composer .msg:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer .hears { font: 11px var(--mono); color: var(--dim); padding: 0 2px; }

@media (max-width: 699px) {
  .submitbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .ask { padding: var(--s4); }
  .rows > .row.wrap { flex-wrap: wrap; }
  .rows > .row.wrap .acts { flex: 1 1 100%; padding-left: 48px; flex-wrap: wrap; }
  .track { flex-direction: column; align-items: flex-start; }
  .track li { align-items: flex-start; }
  .track li svg { margin-top: 1px; }
  .track li + li::before { display: none; }
  .rooms { height: calc(100dvh - 57px); }
}
/* Duo two-pane, 466 to 699: stays side by side and gets denser. Do not enlarge. */
@media (min-width: 466px) and (max-width: 699px) {
  .ask .q { font-size: var(--fs-base); }
  .opts .btn { min-height: 36px; font-size: 13px; padding-inline: var(--s3); }
  .dgroup > header { min-height: 36px; padding-inline: var(--s3); }
  .ditem { padding: var(--s3); gap: var(--s2) var(--s3); }
  .ditem .q { font-size: 14px; }
  .ditem .ctx { font-size: var(--fs-xs); }
  .choices { grid-auto-columns: auto; gap: 4px; }
  .choice { min-height: 34px; padding: 0 10px; font-size: 12px; }
  .submitbar .btn { min-height: 38px; padding: 0 var(--s3); font-size: 13px; }
  .submitbar .cnt { flex-basis: 110px; font-size: var(--fs-xs); }
  .rooms { grid-template-columns: 172px minmax(0, 1fr); }
  .roomlist > header { min-height: 46px; padding-left: var(--s3); }
  .roomrow { margin: 1px 4px; padding: 6px var(--s2); }
  .roomrow .top b { font-size: 12.5px; }
  .roomrow .last { font-size: 11.5px; }
  .roomrow .who { display: none; }
  .thead { min-height: 46px; padding-left: var(--s3); }
  .thead .avs { display: none; }
  .posts { padding: var(--s3); gap: var(--s3); }
  .post { grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--s2); }
  .post .av { width: 26px; height: 26px; font-size: 10px; }
  .post .tx { font-size: 14px; }
  .post.agent .tx { padding: var(--s2) var(--s3); }
}
/* phone, up to 465: one column, full-width choices, rooms show the list or the thread */
@media (max-width: 465px) {
  .ditem { grid-template-columns: minmax(0, 1fr); }
  .choices { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice { min-height: var(--tap); }
  .opts .btn { flex: 1 1 100%; justify-content: flex-start; }
  .submitbar .cnt { flex-basis: 100%; }
  .submitbar .btn { flex: 1 1 0; }
  .rooms { grid-template-columns: minmax(0, 1fr); }
  .rooms .roomlist { display: none; border-right: 0; }
  .rooms.list .roomlist { display: flex; }
  .rooms.list .thread { display: none; }
  .thead { padding-left: 4px; gap: var(--s1); }
  .thead .back { display: inline-flex; }
  .thead .avs { display: none; }
  .posts { padding: var(--s4) max(16px, env(safe-area-inset-right, 0px)) var(--s4) max(16px, env(safe-area-inset-left, 0px)); }
}

/* mock chrome for the added screens. Not part of the product. */
#st6:checked ~ .mockbar label[for="st6"] { background: #d97757; border-color: #d97757; color: #191817; font-weight: 600; }
#st6:checked ~ .stage [data-state]:not([data-state~="6"]) { display: none !important; }
.stage .rooms { height: calc(100dvh - 37px); }
@media (max-width: 699px) { .stage .rooms { height: calc(100dvh - 37px - 57px); } }

/* --- accounts board and onboarding (added with the multi-account plans) ---
   Accounts is the app's first screen: one card per connected Claude account, the agents on it, and where
   they were moved. Three widths again: desktop 700+, Duo 466 to 699 (dense on purpose), phone up to 465. */

/* account slots: one pip per account on the plan. Filled = connected, hollow = free slot. */
.pips { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.pips i { width: 7px; height: 12px; border-radius: 2px; background: var(--accent); }
.pips i.off { background: transparent; border: 1px solid var(--line2); }
.pips i.lock { background: transparent; border: 1px dashed var(--dim); }

.acctsum { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; font: var(--fs-sm) var(--mono); color: var(--mut); }
.acctsum > span { display: inline-flex; align-items: center; gap: 7px; }
.acctsum b { color: var(--ink); font-weight: 600; }

.acols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 1320px) { .acols { grid-template-columns: minmax(0, 1fr) 340px; } }
.accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); align-items: start; }

.acct { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); min-width: 0; }
.acct.low { border-color: var(--warn-line); }
.acct > header { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.acct .nm { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct .nm b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.acct .nm small { font: var(--fs-xs)/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }

/* one limit: name, meter, percent, then the forecast line. Named .lmt because billing already has .lim. */
.lmts { display: flex; flex-direction: column; gap: var(--s3); }
.lmt { display: grid; grid-template-columns: 50px minmax(0, 1fr) 42px; grid-template-areas: "k m p" ". n n"; align-items: center; gap: 4px var(--s3); }
.lmt .k { grid-area: k; font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lmt .meter { grid-area: m; }
.lmt .pct { grid-area: p; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.lmt .note { grid-area: n; font: var(--fs-xs)/1.45 var(--mono); color: var(--dim); }
.lmt .note b { color: var(--mut); font-weight: 600; }
.lmt .note b.over { color: var(--warn); }

/* the agent sessions on an account. Each chip opens "Move to". Filled dot = working, ring = idle. */
.onit { display: flex; flex-direction: column; gap: 6px; }
.schips { display: flex; flex-wrap: wrap; gap: 6px; }
.schip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 0 8px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--panel2); color: var(--ink); font: 12px var(--mono); cursor: pointer; text-decoration: none; }
.schip:hover { border-color: var(--accent); color: var(--accent-ink); }
.schip .snm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schip .st { color: var(--dim); }
.schip svg.i { width: 13px; height: 13px; color: var(--dim); }
.dot.idle { background: transparent; border: 1.5px solid var(--dim); box-shadow: none; }
.schip.moving { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); cursor: default; }
.schip.arriving { border-style: dashed; border-color: var(--good-line); background: var(--good-soft); color: var(--good); cursor: default; }
.schip.moving .st, .schip.arriving .st { color: inherit; }
.schip.moving svg.i, .schip.arriving svg.i { color: inherit; }
.chipkey { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; font: 11px var(--mono); color: var(--dim); }
.chipkey span { display: inline-flex; align-items: center; gap: 6px; }

/* auto-move: the switch, what it will do in words, the threshold, and the manual button */
.amrow { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); }
.amrow .am { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; }
.amrow .am b { font-size: 13.5px; font-weight: 600; }
.amrow .am small { font: var(--fs-xs)/1.4 var(--mono); color: var(--dim); }
.amrow .ctl { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* an account found on a machine but outside the plan */
.acct.locked { border-style: dashed; background: transparent; }
.acct.locked .nm b { color: var(--mut); }
.acct.locked p { font-size: var(--fs-sm); color: var(--mut); }
.acct.locked > header > svg { color: var(--dim); margin-top: 2px; }

/* moved agents: newest first. Session, from and to, why, and who or what moved it. */
.moved .mv { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: baseline; padding: var(--s3) var(--s4); }
.moved .mv + .mv { border-top: 1px solid var(--line); }
.mv time { font: var(--fs-xs) var(--mono); color: var(--dim); }
.mv .what { font: var(--fs-sm)/1.45 var(--mono); min-width: 0; overflow-wrap: anywhere; }
.mv .what b { font-weight: 600; }
.mv .what .ar { color: var(--dim); }
.mv .how { font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.mv.now .how { color: var(--warn); }
.mv .why { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--dim); }
.mv .why a { color: var(--mut); }

/* "Move to": pick the account a session should run on */
.dests { display: flex; flex-direction: column; gap: 6px; }
.dest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); align-items: center; width: 100%; min-height: var(--tap); padding: var(--s3); border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--panel2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.dest:hover { border-color: var(--accent); }
.dest b { font: 600 14px var(--mono); }
.dest .meter, .dest small { grid-column: 1 / -1; }
.dest small { font: var(--fs-xs) var(--mono); color: var(--dim); }
.dest[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.dest[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }

/* plan ladder: plans are named by how many Claude accounts they cover */
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.rung { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; }
.rung:hover { border-color: var(--accent); }
.rung .nm { font: 600 14px var(--sans); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rung .pr { font: 650 var(--fs-lg)/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rung .pr small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }
.rung.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.rung.cur { background: var(--panel2); }
@media (max-width: 899px) {
  .ladder { grid-template-columns: minmax(0, 1fr); }
  .rung { flex-direction: row; align-items: center; gap: var(--s3); min-height: var(--tap); padding-block: var(--s2); }
  .rung .nm { flex: 1 1 0; }
  .rung .pips { order: -1; width: 62px; flex-wrap: wrap; }
}

/* plan picker: the ladder as buttons, sized by its own box (the cockpit placeholder and the billing page are
   narrower than the viewport). Rows when narrow, five columns from 600px. Used by .start and the billing page. */
.picker { container: picker / inline-size; }
button.rung { font: inherit; text-align: left; }
.rung[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.picker .ladder { grid-template-columns: minmax(0, 1fr); }
.picker .rung { flex-direction: row; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) var(--s4); }
.picker .rung .nm { flex: 1 1 0; }
.picker .rung .pips { order: -1; width: 62px; flex-wrap: wrap; row-gap: 3px; }
.picker .pickq { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.picker .pickq b { font-weight: 600; }
@container picker (min-width: 600px) {
  .picker .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .picker .rung { flex-direction: column; align-items: stretch; gap: 6px; padding: var(--s3); }
  .picker .rung .nm { flex: none; }
  .picker .rung .pips { order: 0; width: auto; min-height: 27px; align-content: flex-start; }
}
/* one plan in full under the ladder: price and action on the left, what it includes on the right */
.plan.detail { padding: var(--s5) var(--s6); border-radius: var(--r-lg); min-height: 0; cursor: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s8); align-items: start; }
.plan.detail:hover { background: var(--panel); }
.plan.detail .buy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
@container picker (max-width: 599px) {
  .plan.detail { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
  .plan.detail .buy .btn { width: 100%; }
}

/* start panel: the no-plan state. Count your Claude accounts, start the trial, then connect them. */
.start { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s8); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); font: var(--fs-base)/var(--lh-base) var(--sans); text-align: left; }
.start > h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.start > .lede { color: var(--mut); max-width: 60ch; margin-top: calc(-1 * var(--s2)); }
/* due today: the checkout's own line, shown before the click */
.due { display: flex; align-items: center; gap: var(--s3) var(--s6); flex-wrap: wrap; padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); }
.due .amt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0; }
.due .amt b { font: 650 var(--fs-2xl)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.due .amt small { font: var(--fs-xs)/1.4 var(--mono); color: var(--mut); }
@container picker (max-width: 599px) {
  .start { padding: var(--s5) var(--s4); gap: var(--s4); }
  .start > h2 { font-size: var(--fs-lg); }
  .due { padding: var(--s4); }
  .due .btn { width: 100%; }
}

/* onboarding: one column, the three steps in the head */
.ob { min-height: 100dvh; display: flex; flex-direction: column; }
.obhead { display: flex; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; padding: var(--s3) max(var(--s6), env(safe-area-inset-right, 0px)) var(--s3) max(var(--s6), env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--panel); }
.obhead .brand { padding: 0; }
.obbody { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s10) max(var(--s6), env(safe-area-inset-right, 0px)) var(--s16) max(var(--s6), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--s5); }
.obbody h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; }
.obbody .lede { color: var(--mut); font-size: var(--fs-md); max-width: 58ch; }
.obnext { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.obnext .fine { flex: 1 1 200px; }
.found .row input.input { min-height: 36px; font: 600 14px var(--mono); max-width: 190px; }
.getapp { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.qr { width: 132px; height: 132px; border: 1px solid var(--line2); border-radius: var(--r-md); background: repeating-conic-gradient(var(--panel3) 0 25%, var(--panel) 0 50%) 0 0 / 22px 22px; display: flex; align-items: center; justify-content: center; }
.qr span { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 2px 6px; font: 10.5px var(--mono); color: var(--dim); }

/* Duo, 466 to 699: week and 5-hour sit side by side, controls drop to 34 px. Do not enlarge. */
@media (min-width: 466px) and (max-width: 699px) {
  .accts { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .acct { padding: var(--s3); gap: var(--s2); }
  .acct .nm b { font-size: 13.5px; }
  .lmts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
  .lmt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "m m" "n n"; gap: 3px var(--s2); }
  .lmt .pct { font-size: 13px; }
  .lmt .note { font-size: 11px; }
  .schip { min-height: 28px; font-size: 11.5px; padding: 0 7px; }
  .amrow { padding-top: var(--s2); }
  .amrow .btn.sm, .amrow .select-sm { min-height: 34px; font-size: 12.5px; }
  .amrow .am b { font-size: 12.5px; }
  .moved .mv { padding: var(--s2) var(--s3); grid-template-columns: 52px minmax(0, 1fr) auto; }
  .mv .what { font-size: 12px; }
  .obbody { padding-top: var(--s6); gap: var(--s4); }
  .obbody h1 { font-size: var(--fs-xl); }
  .obbody .lede { font-size: var(--fs-base); }
}
/* phone, up to 465: one column, sessions become full-width 44 px rows */
@media (max-width: 465px) {
  .accts { grid-template-columns: minmax(0, 1fr); }
  .schips { flex-direction: column; }
  .schip { min-height: var(--tap); width: 100%; padding: 0 var(--s3); font-size: 13px; }
  .schip .snm { flex: 1 1 0; }
  .amrow .ctl { flex: 1 1 100%; }
  .amrow .ctl .btn { flex: 1 1 0; }
  .amrow .btn.sm, .amrow .select-sm { min-height: var(--tap); }
  .moved .mv { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--s3); }
  .mv time { grid-column: 1 / -1; }
  .mv .why { grid-column: 1 / -1; }
  .obhead { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .obbody { padding: var(--s6) max(16px, env(safe-area-inset-right, 0px)) var(--s12) max(16px, env(safe-area-inset-left, 0px)); }
  .obbody h1 { font-size: var(--fs-xl); }
  .obnext .btn { flex: 1 1 100%; }
  .getapp { grid-template-columns: minmax(0, 1fr); }
  .getapp .qr { display: none; }
}
/* mock chrome. Not part of the product. */
.stage .ob { min-height: calc(100dvh - 37px); }

/* --- per-screen CSS from the mockups --- */
.mscale{position:relative;height:16px;margin-top:6px;font:10.5px var(--mono);color:var(--dim)} .mscale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .mscale span:first-child{transform:none} .mscale span.end{transform:translateX(-100%)} .legend{display:flex;gap:var(--s4);flex-wrap:wrap;font:11px var(--mono);color:var(--dim)} .legend i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle} .lk{filter:blur(3px);opacity:.5;pointer-events:none;user-select:none}
.lim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} @media (max-width:699px){.lim{grid-template-columns:minmax(0,1fr)}} .lim .meter{margin-top:6px}
/* --- live-page additions --- */
[hidden] { display: none !important; }
.side .wsbtn { width: calc(100% - 2 * var(--s2)); }
.wspop { left: 8px; top: 104px; width: 284px; }
@media (max-width: 699px) {
  .side.drawer-open { display: flex; position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: var(--z-side); box-shadow: var(--shadow-pop); }
  .wspop { left: 0; top: auto; width: auto; }
}
.toast { position: fixed; left: 50%; bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast); background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--s3) var(--s4); font-size: var(--fs-sm); max-width: calc(100vw - 32px); }
.toast.bad { border-color: var(--bad-line); color: var(--bad); }
.row-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ttl-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt6 { margin-top: 6px; }
.gap6 { gap: 6px; } .gap4 { gap: var(--s4); }
.sess-line { display: flex; align-items: baseline; gap: var(--s2); }
.sess-line .num { font-size: 13px; }
.leg-used { background: var(--good); }
.leg-proj { background: repeating-linear-gradient(135deg, var(--good-line) 0 4px, transparent 4px 8px); border: 1px solid var(--line2); }
.legend i.leg-limit { width: 0; height: 10px; border-left: 2px dashed var(--bad); border-radius: 0; }
.meter .fill.stale { background: var(--dim); }
.ink { color: var(--ink); }
.plan-now { font-size: var(--fs-md); }
.lim-row { display: flex; }
.lim-row .num { font-size: 13px; }
.panel2 { background: var(--panel2); }
.code.stretch { align-self: stretch; }
.sum { cursor: pointer; font-weight: 600; font-size: 14px; }
.bar-time i.low { background: var(--warn); }
.wsname-dim { font-weight: 400; }
.locked-row .main-t b { color: var(--mut); }
#drawer-scrim { z-index: calc(var(--z-side) - 1); }
.sr-copy { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
.page-load { color: var(--dim); font-size: var(--fs-sm); }
.page[data-narrow] { max-width: 760px; }
/* pages that render everything into one #content: keep the page's own gap between the blocks */
.pagegap { display: flex; flex-direction: column; gap: var(--s6); }
@media (max-width: 699px) { .pagegap { gap: var(--s5); } }
/* asks, decisions, rooms: the mockups' inline styles as classes, plus what the live pages add */
.gap1 { gap: var(--s1); } .gap2 { gap: var(--s2); }
.card.pad4 { padding: var(--s4); }
.lblrow { display: flex; align-items: baseline; gap: var(--s2); }
.cnt-s { font: 12px var(--mono); color: var(--dim); }
.sect-top { border-top: 1px solid var(--line); padding-top: var(--s4); }
textarea.input.short { min-height: 44px; }
.choice.on.opt { color: var(--ink); background: var(--panel3); border-color: var(--mut); }
.ditem .src { font: var(--fs-xs) var(--mono); color: var(--dim); }
.composer .inrow { display: flex; gap: var(--s2); align-items: flex-end; }
.composer .inrow .msg { flex: 1; min-width: 0; min-height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel2); color: var(--ink); padding: 11px 12px; }
.composer .inrow .msg::placeholder { color: var(--dim); }
.flip { display: inline-flex; transform: rotate(180deg); }
.mentions { display: flex; flex-wrap: wrap; gap: 6px; }
.post .dl { grid-column: 2; margin-top: 4px; font: 11px var(--mono); color: var(--dim); }
.post .tx { white-space: pre-wrap; }
.roomlist .rl-empty { padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--dim); }
.thread .t-empty { margin: auto; color: var(--dim); font-size: var(--fs-sm); text-align: center; }