/* 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. */
/* Scoped copy for the cockpit: every component selector is under .ds. Tokens stay on :root. */
/* 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. */
.ds *, .ds, .ds *::before, .ds::before, .ds *::after, .ds::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ds a { color: var(--accent-ink); text-underline-offset: 2px; }
.ds h1, .ds h2, .ds h3, .ds p { margin: 0; }
.ds h1, .ds h2, .ds h3 { text-wrap: balance; line-height: var(--lh-tight); }
.ds button, .ds input, .ds select { font: inherit; color: inherit; }
.ds button { touch-action: manipulation; }
.ds :focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.ds svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ds svg.i.sm { width: 15px; height: 15px; }
.ds svg.i.lg { width: 24px; height: 24px; }
.ds .mono { font-family: var(--mono); }
.ds .num { font-variant-numeric: tabular-nums; }
.ds .mut { color: var(--mut); }
.ds .dim { color: var(--dim); }
.ds .sp { flex: 1; }
@media (prefers-reduced-motion: reduce) {
.ds *, .ds { transition: none !important; animation: none !important; }
}
/* --- label: mono caps, the product's voice for section names --- */
.ds .label { font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
/* --- buttons --- */
.ds .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); }
.ds .btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.ds .btn:active { filter: brightness(1.08); }
.ds .btn.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ds .btn.go:hover { background: var(--accent2); border-color: var(--accent2); color: var(--on-accent); }
.ds .btn.quiet { background: transparent; border-color: transparent; color: var(--mut); }
.ds .btn.quiet:hover { border-color: var(--line2); color: var(--ink); }
.ds .btn.danger { color: var(--bad); }
.ds .btn.danger:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.ds .btn.wide { width: 100%; }
.ds .btn.sm { min-height: 36px; padding: 0 var(--s3); font-size: 13px; border-radius: var(--r-sm); }
.ds .btn:disabled, .ds .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
@media (pointer: coarse) {
.ds .btn.sm { min-height: var(--tap); }
}
.ds .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; }
.ds .iconbtn:hover { color: var(--accent-ink); border-color: var(--accent); }
.ds .iconbtn.bare { border-color: transparent; }
/* --- fields --- */
.ds .field { display: flex; flex-direction: column; gap: 6px; }
.ds .field > label { font: 600 13px var(--sans); color: var(--mut); }
.ds .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); }
.ds .input::placeholder { color: var(--dim); }
.ds .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds .input.bad { border-color: var(--bad); }
.ds .hint { font-size: var(--fs-xs); color: var(--dim); }
.ds .err { font-size: var(--fs-sm); color: var(--bad); display: flex; gap: 6px; align-items: flex-start; }
.ds 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; }
.ds .select-sm { min-height: 36px; font-size: 13px; width: auto; }
@media (pointer: coarse) {
.ds .select-sm { min-height: var(--tap); }
}
/* 6-digit code */
.ds .otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.ds .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; }
.ds .otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds .otp.bad input { border-color: var(--bad); }
/* --- badges, pills, chips --- */
.ds .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; }
.ds .badge.claude { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.ds .badge.codex { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.ds .badge.shell { color: var(--dim); }
.ds .badge.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.ds .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; }
.ds .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ds .pill.plain::before { display: none; }
.ds .pill.good { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.ds .pill.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.ds .pill.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.ds .pill.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.ds .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.ds .dot.good { background: var(--good); box-shadow: var(--glow-good); }
.ds .dot.warn { background: var(--warn); }
.ds .dot.bad { background: var(--bad); }
.ds .dot.pulse { animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ds kbd { font: 11px var(--mono); background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 0 5px; }
/* segmented control */
.ds .seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-sm); overflow: hidden; }
.ds .seg > * { font: 12px var(--mono); padding: 7px 13px; color: var(--mut); cursor: pointer; background: none; border: 0; }
.ds .seg > .on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* --- avatar --- */
.ds .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; }
.ds .av.round { border-radius: 50%; }
.ds .av.ws { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
/* --- app shell --- */
.ds .app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.ds .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; }
.ds .brand { display: flex; align-items: center; gap: 9px; padding: 15px var(--s4) 12px; }
.ds .brand b { font-weight: 600; font-size: 15px; }
.ds .mark { width: 22px; height: 22px; color: var(--accent); flex: none; }
.ds .mark .mk-s { stroke: var(--ink); }
.ds .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; }
.ds .wsbtn:hover, .ds .wsbtn.open { border-color: var(--accent); }
.ds .wsbtn .nm { flex: 1; min-width: 0; }
.ds .wsbtn .nm b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .wsbtn .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.ds .nav { display: flex; flex-direction: column; gap: 1px; padding: var(--s1) var(--s2); }
.ds .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); }
.ds .nav a:hover { background: var(--panel2); color: var(--ink); }
.ds .nav a.on { background: var(--panel2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.ds .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; }
.ds .side .label { padding: var(--s4) var(--s4) 6px; }
.ds .tree { padding: 0 var(--s2) var(--s4); }
.ds .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); }
.ds .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); }
.ds .sess:hover, .ds .sess.open { background: var(--panel2); color: var(--ink); }
.ds .sess .snm { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .sess .need { font: 600 10px var(--sans); color: var(--on-accent); background: var(--warn); border-radius: var(--r-pill); padding: 2px 7px; flex: none; }
.ds .sidefoot { margin-top: auto; border-top: 1px solid var(--line); padding: var(--s2); display: flex; align-items: center; gap: 10px; }
.ds .sidefoot .who { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .sidefoot .who small { display: block; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .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; }
.ds .topbar b { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .main { min-width: 0; display: flex; flex-direction: column; }
.ds .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); }
.ds .pagehead { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.ds .pagehead .tt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ds .pagehead h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.ds .pagehead p { color: var(--mut); max-width: 62ch; }
.ds .crumb { font: var(--fs-xs) var(--mono); color: var(--dim); display: flex; gap: 6px; align-items: center; }
.ds .crumb a { color: var(--mut); text-decoration: none; }
.ds .crumb a:hover { color: var(--accent-ink); }
.ds .sect { display: flex; flex-direction: column; gap: var(--s3); }
.ds .sect > header { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ds .sect h2 { font-size: var(--fs-md); font-weight: 650; }
@media (max-width: 699px) {
.ds .app { grid-template-columns: minmax(0, 1fr); }
.ds .side { display: none; }
.ds .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); }
.ds .topbar { display: flex; }
.ds .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); }
.ds .pagehead h1 { font-size: var(--fs-lg); }
}
/* --- cards and rows --- */
.ds .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ds .card.pad { padding: var(--s5); }
.ds .rows > .row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 60px; }
.ds .rows > .row + .row { border-top: 1px solid var(--line); }
.ds .row .main-t { flex: 1 1 0; min-width: 0; }
.ds .row .main-t b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.ds .row .main-t small { display: block; color: var(--dim); font: var(--fs-xs)/1.5 var(--mono); overflow-wrap: anywhere; }
.ds .row .acts { display: flex; align-items: center; gap: var(--s2); flex: none; }
.ds a.row { color: inherit; text-decoration: none; }
.ds a.row:hover { background: var(--panel2); }
.ds .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; }
.ds .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--s5); font-size: var(--fs-sm); }
.ds .kv dt { color: var(--dim); font-family: var(--mono); font-size: var(--fs-xs); padding-top: 1px; }
.ds .kv dd { margin: 0; overflow-wrap: anywhere; }
/* banner */
.ds .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); }
.ds .banner b { color: var(--ink); }
.ds .banner .btxt { flex: 1; min-width: 0; }
.ds .banner.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.ds .banner.warn > svg { color: var(--warn); }
.ds .banner.good { background: var(--good-soft); border-color: var(--good-line); }
.ds .banner.good > svg { color: var(--good); }
.ds .banner.accent { background: var(--accent-soft); border-color: var(--accent-line); }
.ds .banner.accent > svg { color: var(--accent-ink); }
.ds .banner.bad { background: var(--bad-soft); border-color: var(--bad-line); }
.ds .banner.bad > svg { color: var(--bad); }
/* code block with copy */
.ds .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; }
.ds .code .tok { color: #e0a24b; }
.ds .code .cm { color: var(--term-dim); }
.ds .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; }
.ds .code .copy:hover { border-color: #d97757; color: #e08a6d; }
.ds .code .copy.done { color: #7fb682; border-color: rgba(127, 182, 130, .5); }
@media (max-width: 699px) {
.ds .code { padding-right: var(--s4); padding-bottom: 60px; }
.ds .code .copy { top: auto; bottom: 10px; left: 10px; right: 10px; justify-content: center; min-height: var(--tap); }
}
/* steps */
.ds .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; }
.ds .steps li { display: flex; align-items: center; gap: 7px; }
.ds .steps li + li::before { content: ""; width: 18px; height: 1px; background: var(--line2); }
.ds .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; }
.ds .steps .on { color: var(--ink); }
.ds .steps .on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.ds .steps .done { color: var(--good); }
.ds .steps .done .n { border-color: var(--good-line); background: var(--good-soft); }
/* countdown ring row */
.ds .count { display: flex; align-items: center; gap: var(--s2); font: var(--fs-sm) var(--mono); color: var(--mut); }
.ds .count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ds .count.low b { color: var(--warn); }
.ds .bar-time { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ds .bar-time i { display: block; height: 100%; background: var(--accent); }
/* waiting line */
.ds .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); }
.ds .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 --- */
.ds .meter { position: relative; height: 12px; border-radius: 6px; background: var(--panel3); }
.ds .meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--good); }
.ds .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); }
.ds .meter .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.ds .meter.warn .fill { background: var(--warn); }
.ds .meter.warn .proj { background: repeating-linear-gradient(135deg, var(--warn-line) 0 4px, transparent 4px 8px); }
.ds .meter.bad .fill { background: var(--bad); }
.ds .meter.bad .proj { background: repeating-linear-gradient(135deg, var(--bad-line) 0 4px, transparent 4px 8px); }
.ds .meter.thin { height: 6px; }
.ds .meter-scale { display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--dim); margin-top: 6px; }
.ds .stat { display: flex; flex-direction: column; gap: 2px; }
.ds .stat .v { font: 650 var(--fs-xl)/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ds .stat .v small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }
/* --- popover and sheet --- */
.ds .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; }
.ds .pop .label { padding: 8px 10px 6px; }
.ds .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; }
.ds .pop .opt:hover { background: var(--panel2); }
.ds .pop .opt .nm { flex: 1; min-width: 0; }
.ds .pop .opt .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.ds .pop .opt.on svg.chk { color: var(--accent-ink); }
.ds .pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.ds .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-scrim); }
.ds .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); }
.ds .sheet.wide { width: min(620px, calc(100vw - 32px)); }
.ds .sheet h2 { font-size: var(--fs-lg); font-weight: 650; }
.ds .sheet .x { position: absolute; top: 10px; right: 10px; }
.ds .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; }
.ds .sheet .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ds .sheet .acts .btn { flex: 1 1 140px; }
.ds .grab { display: none; }
@media (max-width: 699px) {
.ds .sheet, .ds .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; }
.ds .grab { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--line2); margin: 0 auto var(--s1); flex: none; }
.ds .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 --- */
.ds .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)); }
.ds .authcard { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s5); }
.ds .authcard .brand { padding: 0; }
.ds .authcard h1 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.ds .authcard .sub { color: var(--mut); }
.ds .or { display: flex; align-items: center; gap: var(--s3); color: var(--dim); font: var(--fs-micro) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ds .or::before, .ds .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ds .stack { display: flex; flex-direction: column; gap: var(--s3); }
.ds .fine { font-size: var(--fs-xs); color: var(--dim); }
.ds .fine a { color: var(--mut); }
/* --- plans --- */
.ds .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.ds .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); }
.ds .plan.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ds .plan h3 { font-size: var(--fs-md); font-weight: 650; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ds .plan .price { font: 650 var(--fs-2xl)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds .plan .price small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }
.ds .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; }
.ds .plan li { display: flex; gap: 8px; align-items: flex-start; }
.ds .plan li svg { color: var(--good); margin-top: 2px; }
@media (max-width: 899px) {
.ds .plans { grid-template-columns: minmax(0, 1fr); }
}
/* --- empty state --- */
.ds .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); }
.ds .empty h2 { font-size: var(--fs-lg); font-weight: 650; }
.ds .empty p { color: var(--mut); max-width: 56ch; }
.ds .empty .glyph { font: 12px/1.35 var(--mono); color: var(--dim); white-space: pre; }
@media (max-width: 699px) {
.ds .empty { padding: var(--s6) var(--s4); }
}
/* --- additions used by specific screens --- */
.ds .meter .limit { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--bad); }
.ds .cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 899px) {
.ds .cols2 { grid-template-columns: minmax(0, 1fr); }
}
.ds .login { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); }
.ds .login > header { display: flex; align-items: flex-start; gap: var(--s3); }
.ds .login > header .main-t { flex: 1; min-width: 0; }
.ds .login > header b { display: block; font-size: 15px; }
.ds .login > header small { font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .login .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.ds .login .ontrack { font-size: var(--fs-sm); color: var(--mut); }
.ds .login .ontrack b { color: var(--ink); }
.ds .taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .tag { font: 12px var(--mono); color: var(--mut); border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 2px 7px; }
.ds .tag.move { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.ds .inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: end; }
@media (max-width: 699px) {
.ds .inline-form { grid-template-columns: minmax(0, 1fr); }
}
.ds .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; }
.ds .checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--mut); }
.ds .checks li { display: flex; gap: 9px; align-items: flex-start; }
.ds .checks li svg { margin-top: 2px; }
.ds .checks li.yes svg { color: var(--good); }
.ds .checks li.no svg { color: var(--bad); }
.ds .checks b { color: var(--ink); font-weight: 600; }
.ds .phone-only { display: none; }
@media (max-width: 699px) {
.ds .phone-only { display: block; }
.ds .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). */
.ds .page.wide { max-width: 1400px; }
.ds textarea.input { padding: 10px var(--s3); min-height: 72px; line-height: 1.4; resize: vertical; display: block; }
.ds .lk { filter: blur(3px); opacity: .5; pointer-events: none; user-select: none; }
/* tabs: page-level views with counts */
.ds .tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--panel2); }
.ds .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; }
.ds .tab:hover { color: var(--ink); }
.ds .tab.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line2); }
.ds .tab .n { font: 600 11px var(--mono); color: var(--dim); }
.ds .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. */
.ds .sid { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: var(--fs-sm) var(--mono); color: var(--ink); }
.ds .sid b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .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. */
.ds .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; }
.ds .ans.yes { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.ds .ans.no { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.ds .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) */
.ds .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); }
.ds .track li { display: inline-flex; align-items: center; gap: 5px; }
.ds .track li + li::before { content: ""; width: 14px; height: 1px; background: var(--line2); }
.ds .track .ok { color: var(--good); }
.ds .track .pend { color: var(--warn); }
.ds .track .fail { color: var(--bad); }
/* a row icon can carry delivery state */
.ds .row .ico.good { color: var(--good); }
.ds .row .ico.warn { color: var(--warn); }
.ds .row .ico.bad { color: var(--bad); }
.ds .row .main-t .track { margin-top: 4px; }
.ds .row .main-t .said { display: block; font-size: var(--fs-sm); color: var(--mut); margin-top: 2px; }
/* ask card */
.ds .asklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
@media (min-width: 1500px) {
.ds .asklist { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.ds .ask { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5); }
.ds .ask > header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ds .ask .age { margin-left: auto; font: var(--fs-xs) var(--mono); color: var(--dim); white-space: nowrap; }
.ds .ask .q { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ds .ask .ctx { font-size: var(--fs-sm); color: var(--mut); max-width: 72ch; overflow-wrap: anywhere; }
.ds .opts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ds .opts .btn { white-space: normal; text-align: left; padding-block: 8px; }
.ds .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); }
.ds .ask .outcome .track { flex: 1 1 200px; }
/* decisions */
.ds .dcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 1180px) {
.ds .dcols { grid-template-columns: minmax(0, 1fr) 300px; }
}
.ds .dcols > * { min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.ds .runbar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .runbar b { color: var(--ink); font-weight: 600; }
.ds .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; }
.ds .dgroup > header .ct { margin-left: auto; font: var(--fs-xs) var(--mono); color: var(--dim); white-space: nowrap; }
.ds .ditem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s4); padding: var(--s4); align-items: start; }
.ds .ditem + .ditem { border-top: 1px solid var(--line); }
.ds .ditem .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds .ditem .q { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ds .ditem .q .pill { vertical-align: 2px; margin-left: 4px; }
.ds .ditem .ctx { font-size: var(--fs-sm); color: var(--mut); max-width: 72ch; overflow-wrap: anywhere; }
.ds .ditem .rec { font: var(--fs-xs)/1.5 var(--mono); color: var(--dim); }
.ds .ditem .rec b { color: var(--mut); font-weight: 600; }
.ds .ditem .note { grid-column: 1 / -1; }
.ds .choices { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(68px, auto); gap: 6px; }
.ds .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); }
.ds .choice:hover { color: var(--ink); border-color: var(--mut); }
.ds .choice svg { display: none; }
.ds .choice.on svg { display: block; }
.ds .choice.on.yes { color: var(--good); background: var(--good-soft); border-color: var(--good); }
.ds .choice.on.no { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); }
.ds .choice.on.discuss { color: var(--info); background: var(--info-soft); border-color: var(--info); }
.ds .agst { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: 8px var(--s3); min-height: 40px; }
.ds .agst + .agst { border-top: 1px solid var(--line); }
.ds .agst .sid { flex: 0 1 auto; }
.ds .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; }
.ds .agst .st.good { color: var(--good); }
.ds .agst .st.warn { color: var(--warn); }
.ds .agst .st.bad { color: var(--bad); }
.ds .rows.tight > .row { min-height: 48px; padding: 8px var(--s3); }
.ds .rows.tight > .row.on { background: var(--panel2); box-shadow: inset 2px 0 0 var(--accent); }
.ds .cardhead { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s3) var(--s2); }
.ds .cardhead .label { flex: 1; }
/* submit bar: sticks to the bottom of the working column */
.ds .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)); }
.ds .submitbar .in { max-width: 1336px; margin: 0 auto; display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.ds .submitbar .cnt { flex: 1 1 150px; min-width: 0; font: var(--fs-sm) var(--mono); color: var(--mut); }
.ds .submitbar .cnt b { color: var(--ink); }
/* dry-run preview: one block per session, showing the exact text that will be typed */
.ds .wsend { display: flex; flex-direction: column; gap: 6px; }
.ds .wsend > header { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ds .wsend > header .sid { flex: 1 1 0; }
.ds .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; }
.ds .typed .d { color: var(--term-dim); }
/* picker: tick people or agent sessions (decision roster, room members) */
.ds .picker { display: flex; flex-direction: column; }
.ds .picker .boxh { padding-left: var(--s2); }
.ds .pick { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 4px var(--s2); border-radius: var(--r-sm); cursor: pointer; }
.ds .pick:hover { background: var(--panel2); }
.ds .pick input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.ds .pick .nm { flex: 1 1 0; min-width: 0; font: var(--fs-sm) var(--mono); overflow-wrap: anywhere; }
.ds .pick .nm small { display: block; font: 11px var(--mono); color: var(--dim); }
.ds .pick.person .nm { font: 14px var(--sans); }
.ds .pick.off { cursor: default; }
.ds .pick.off .nm { color: var(--dim); }
/* switch and schedule times */
.ds .switchrow { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); }
.ds .switchrow .main-t { flex: 1 1 0; min-width: 0; font-size: var(--fs-sm); }
.ds .switchrow .main-t b { display: block; font-size: 14.5px; }
.ds .switchrow .main-t small { color: var(--dim); font: var(--fs-xs)/1.5 var(--mono); }
.ds .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; }
.ds .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); }
.ds .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.ds .switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--on-accent); }
.ds .timeset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds .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; }
.ds .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); }
.ds .time button:hover { color: var(--bad); }
.ds .timeset .input { width: auto; }
/* rooms: list beside a thread */
.ds .rooms { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100dvh; min-height: 0; }
.ds .roomlist { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); padding-bottom: var(--s4); }
.ds .roomlist > header { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s2) var(--s4); min-height: 56px; }
.ds .roomlist > header h1 { flex: 1; font-size: var(--fs-md); font-weight: 650; }
.ds .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; }
.ds .roomrow:hover, .ds .roomrow.on { background: var(--panel2); }
.ds .roomrow.on { box-shadow: inset 2px 0 0 var(--accent); }
.ds .roomrow .top { display: flex; align-items: baseline; gap: var(--s2); }
.ds .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; }
.ds .roomrow .top time { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.ds .roomrow .last { display: flex; align-items: center; gap: var(--s2); font-size: 12.5px; }
.ds .roomrow .last span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .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; }
.ds .roomrow .who { font: 11px var(--mono); color: var(--dim); }
.ds .thread { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
.ds .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); }
.ds .thead .back { display: none; }
.ds .thead .tt { flex: 1; min-width: 0; }
.ds .thead .tt b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .thead .tt small { display: block; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .avs { display: inline-flex; padding-left: 6px; flex: none; }
.ds .avs .av { width: 26px; height: 26px; font-size: 10px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.ds .posts { overflow-y: auto; padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.ds .posts > * { width: 100%; max-width: 820px; }
.ds .post { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 var(--s3); }
.ds .post > .av { grid-row: 1 / span 2; }
.ds .post .by { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: 22px; font-size: 13.5px; }
.ds .post .by b { font-weight: 600; }
.ds .post .by time { font: 11px var(--mono); color: var(--dim); }
.ds .post .tx { grid-column: 2; overflow-wrap: anywhere; }
.ds .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 */
.ds .post.agent .av { background: var(--term-bg); color: var(--term-ink); border-color: var(--line2); }
.ds .post.agent .by b { font: 600 13px var(--mono); }
.ds .post.agent .by small { font: 11px var(--mono); color: var(--dim); }
.ds .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); }
.ds .post.sys { display: block; text-align: center; font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .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)); }
.ds .composer .msg { font: 16px var(--sans); border-color: var(--line2); }
.ds .composer .msg:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ds .composer .hears { font: 11px var(--mono); color: var(--dim); padding: 0 2px; }
@media (max-width: 699px) {
.ds .submitbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ds .ask { padding: var(--s4); }
.ds .rows > .row.wrap { flex-wrap: wrap; }
.ds .rows > .row.wrap .acts { flex: 1 1 100%; padding-left: 48px; flex-wrap: wrap; }
.ds .track { flex-direction: column; align-items: flex-start; }
.ds .track li { align-items: flex-start; }
.ds .track li svg { margin-top: 1px; }
.ds .track li + li::before { display: none; }
.ds .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) {
.ds .ask .q { font-size: var(--fs-base); }
.ds .opts .btn { min-height: 36px; font-size: 13px; padding-inline: var(--s3); }
.ds .dgroup > header { min-height: 36px; padding-inline: var(--s3); }
.ds .ditem { padding: var(--s3); gap: var(--s2) var(--s3); }
.ds .ditem .q { font-size: 14px; }
.ds .ditem .ctx { font-size: var(--fs-xs); }
.ds .choices { grid-auto-columns: auto; gap: 4px; }
.ds .choice { min-height: 34px; padding: 0 10px; font-size: 12px; }
.ds .submitbar .btn { min-height: 38px; padding: 0 var(--s3); font-size: 13px; }
.ds .submitbar .cnt { flex-basis: 110px; font-size: var(--fs-xs); }
.ds .rooms { grid-template-columns: 172px minmax(0, 1fr); }
.ds .roomlist > header { min-height: 46px; padding-left: var(--s3); }
.ds .roomrow { margin: 1px 4px; padding: 6px var(--s2); }
.ds .roomrow .top b { font-size: 12.5px; }
.ds .roomrow .last { font-size: 11.5px; }
.ds .roomrow .who { display: none; }
.ds .thead { min-height: 46px; padding-left: var(--s3); }
.ds .thead .avs { display: none; }
.ds .posts { padding: var(--s3); gap: var(--s3); }
.ds .post { grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--s2); }
.ds .post .av { width: 26px; height: 26px; font-size: 10px; }
.ds .post .tx { font-size: 14px; }
.ds .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) {
.ds .ditem { grid-template-columns: minmax(0, 1fr); }
.ds .choices { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds .choice { min-height: var(--tap); }
.ds .opts .btn { flex: 1 1 100%; justify-content: flex-start; }
.ds .submitbar .cnt { flex-basis: 100%; }
.ds .submitbar .btn { flex: 1 1 0; }
.ds .rooms { grid-template-columns: minmax(0, 1fr); }
.ds .rooms .roomlist { display: none; border-right: 0; }
.ds .rooms.list .roomlist { display: flex; }
.ds .rooms.list .thread { display: none; }
.ds .thead { padding-left: 4px; gap: var(--s1); }
.ds .thead .back { display: inline-flex; }
.ds .thead .avs { display: none; }
.ds .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. */
.ds #st6:checked ~ .mockbar label[for="st6"] { background: #d97757; border-color: #d97757; color: #191817; font-weight: 600; }
.ds #st6:checked ~ .stage [data-state]:not([data-state~="6"]) { display: none !important; }
.ds .stage .rooms { height: calc(100dvh - 37px); }
@media (max-width: 699px) {
.ds .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. */
.ds .pips { display: inline-flex; gap: 3px; align-items: center; flex: none; }
.ds .pips i { width: 7px; height: 12px; border-radius: 2px; background: var(--accent); }
.ds .pips i.off { background: transparent; border: 1px solid var(--line2); }
.ds .pips i.lock { background: transparent; border: 1px dashed var(--dim); }
.ds .acctsum { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; font: var(--fs-sm) var(--mono); color: var(--mut); }
.ds .acctsum > span { display: inline-flex; align-items: center; gap: 7px; }
.ds .acctsum b { color: var(--ink); font-weight: 600; }
.ds .acols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 1320px) {
.ds .acols { grid-template-columns: minmax(0, 1fr) 340px; }
}
.ds .accts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); align-items: start; }
.ds .acct { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); min-width: 0; }
.ds .acct.low { border-color: var(--warn-line); }
.ds .acct > header { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; }
.ds .acct .nm { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds .acct .nm b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.ds .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. */
.ds .lmts { display: flex; flex-direction: column; gap: var(--s3); }
.ds .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); }
.ds .lmt .k { grid-area: k; font: 500 var(--fs-micro)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ds .lmt .meter { grid-area: m; }
.ds .lmt .pct { grid-area: p; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ds .lmt .note { grid-area: n; font: var(--fs-xs)/1.45 var(--mono); color: var(--dim); }
.ds .lmt .note b { color: var(--mut); font-weight: 600; }
.ds .lmt .note b.over { color: var(--warn); }
/* the agent sessions on an account. Each chip opens "Move to". Filled dot = working, ring = idle. */
.ds .onit { display: flex; flex-direction: column; gap: 6px; }
.ds .schips { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .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; }
.ds .schip:hover { border-color: var(--accent); color: var(--accent-ink); }
.ds .schip .snm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .schip .st { color: var(--dim); }
.ds .schip svg.i { width: 13px; height: 13px; color: var(--dim); }
.ds .dot.idle { background: transparent; border: 1.5px solid var(--dim); box-shadow: none; }
.ds .schip.moving { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); cursor: default; }
.ds .schip.arriving { border-style: dashed; border-color: var(--good-line); background: var(--good-soft); color: var(--good); cursor: default; }
.ds .schip.moving .st, .ds .schip.arriving .st { color: inherit; }
.ds .schip.moving svg.i, .ds .schip.arriving svg.i { color: inherit; }
.ds .chipkey { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; font: 11px var(--mono); color: var(--dim); }
.ds .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 */
.ds .amrow { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); }
.ds .amrow .am { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; }
.ds .amrow .am b { font-size: 13.5px; font-weight: 600; }
.ds .amrow .am small { font: var(--fs-xs)/1.4 var(--mono); color: var(--dim); }
.ds .amrow .ctl { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* an account found on a machine but outside the plan */
.ds .acct.locked { border-style: dashed; background: transparent; }
.ds .acct.locked .nm b { color: var(--mut); }
.ds .acct.locked p { font-size: var(--fs-sm); color: var(--mut); }
.ds .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. */
.ds .moved .mv { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: baseline; padding: var(--s3) var(--s4); }
.ds .moved .mv + .mv { border-top: 1px solid var(--line); }
.ds .mv time { font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .mv .what { font: var(--fs-sm)/1.45 var(--mono); min-width: 0; overflow-wrap: anywhere; }
.ds .mv .what b { font-weight: 600; }
.ds .mv .what .ar { color: var(--dim); }
.ds .mv .how { font: 600 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ds .mv.now .how { color: var(--warn); }
.ds .mv .why { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--dim); }
.ds .mv .why a { color: var(--mut); }
/* "Move to": pick the account a session should run on */
.ds .dests { display: flex; flex-direction: column; gap: 6px; }
.ds .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; }
.ds .dest:hover { border-color: var(--accent); }
.ds .dest b { font: 600 14px var(--mono); }
.ds .dest .meter, .ds .dest small { grid-column: 1 / -1; }
.ds .dest small { font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .dest[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ds .dest[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
/* plan ladder: plans are named by how many Claude accounts they cover */
.ds .ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.ds .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; }
.ds .rung:hover { border-color: var(--accent); }
.ds .rung .nm { font: 600 14px var(--sans); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds .rung .pr { font: 650 var(--fs-lg)/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ds .rung .pr small { font: 500 var(--fs-xs) var(--mono); color: var(--dim); letter-spacing: 0; }
.ds .rung.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ds .rung.cur { background: var(--panel2); }
@media (max-width: 899px) {
.ds .ladder { grid-template-columns: minmax(0, 1fr); }
.ds .rung { flex-direction: row; align-items: center; gap: var(--s3); min-height: var(--tap); padding-block: var(--s2); }
.ds .rung .nm { flex: 1 1 0; }
.ds .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. */
.ds .picker { container: picker / inline-size; }
.ds button.rung { font: inherit; text-align: left; }
.ds .rung[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ds .picker .ladder { grid-template-columns: minmax(0, 1fr); }
.ds .picker .rung { flex-direction: row; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) var(--s4); }
.ds .picker .rung .nm { flex: 1 1 0; }
.ds .picker .rung .pips { order: -1; width: 62px; flex-wrap: wrap; row-gap: 3px; }
.ds .picker .pickq { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.ds .picker .pickq b { font-weight: 600; }
@container picker (min-width: 600px) {
.ds .picker .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds .picker .rung { flex-direction: column; align-items: stretch; gap: 6px; padding: var(--s3); }
.ds .picker .rung .nm { flex: none; }
.ds .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 */
.ds .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; }
.ds .plan.detail:hover { background: var(--panel); }
.ds .plan.detail .buy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
@container picker (max-width: 599px) {
.ds .plan.detail { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
.ds .plan.detail .buy .btn { width: 100%; }
}
/* start panel: the no-plan state. Count your Claude accounts, start the trial, then connect them. */
.ds .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; }
.ds .start > h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.01em; }
.ds .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 */
.ds .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); }
.ds .due .amt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0; }
.ds .due .amt b { font: 650 var(--fs-2xl)/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds .due .amt small { font: var(--fs-xs)/1.4 var(--mono); color: var(--mut); }
@container picker (max-width: 599px) {
.ds .start { padding: var(--s5) var(--s4); gap: var(--s4); }
.ds .start > h2 { font-size: var(--fs-lg); }
.ds .due { padding: var(--s4); }
.ds .due .btn { width: 100%; }
}
/* onboarding: one column, the three steps in the head */
.ds .ob { min-height: 100dvh; display: flex; flex-direction: column; }
.ds .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); }
.ds .obhead .brand { padding: 0; }
.ds .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); }
.ds .obbody h1 { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -.02em; }
.ds .obbody .lede { color: var(--mut); font-size: var(--fs-md); max-width: 58ch; }
.ds .obnext { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.ds .obnext .fine { flex: 1 1 200px; }
.ds .found .row input.input { min-height: 36px; font: 600 14px var(--mono); max-width: 190px; }
.ds .getapp { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s5); align-items: center; }
.ds .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; }
.ds .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) {
.ds .accts { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.ds .acct { padding: var(--s3); gap: var(--s2); }
.ds .acct .nm b { font-size: 13.5px; }
.ds .lmts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.ds .lmt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k p" "m m" "n n"; gap: 3px var(--s2); }
.ds .lmt .pct { font-size: 13px; }
.ds .lmt .note { font-size: 11px; }
.ds .schip { min-height: 28px; font-size: 11.5px; padding: 0 7px; }
.ds .amrow { padding-top: var(--s2); }
.ds .amrow .btn.sm, .ds .amrow .select-sm { min-height: 34px; font-size: 12.5px; }
.ds .amrow .am b { font-size: 12.5px; }
.ds .moved .mv { padding: var(--s2) var(--s3); grid-template-columns: 52px minmax(0, 1fr) auto; }
.ds .mv .what { font-size: 12px; }
.ds .obbody { padding-top: var(--s6); gap: var(--s4); }
.ds .obbody h1 { font-size: var(--fs-xl); }
.ds .obbody .lede { font-size: var(--fs-base); }
}
/* phone, up to 465: one column, sessions become full-width 44 px rows */
@media (max-width: 465px) {
.ds .accts { grid-template-columns: minmax(0, 1fr); }
.ds .schips { flex-direction: column; }
.ds .schip { min-height: var(--tap); width: 100%; padding: 0 var(--s3); font-size: 13px; }
.ds .schip .snm { flex: 1 1 0; }
.ds .amrow .ctl { flex: 1 1 100%; }
.ds .amrow .ctl .btn { flex: 1 1 0; }
.ds .amrow .btn.sm, .ds .amrow .select-sm { min-height: var(--tap); }
.ds .moved .mv { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--s3); }
.ds .mv time { grid-column: 1 / -1; }
.ds .mv .why { grid-column: 1 / -1; }
.ds .obhead { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.ds .obbody { padding: var(--s6) max(16px, env(safe-area-inset-right, 0px)) var(--s12) max(16px, env(safe-area-inset-left, 0px)); }
.ds .obbody h1 { font-size: var(--fs-xl); }
.ds .obnext .btn { flex: 1 1 100%; }
.ds .getapp { grid-template-columns: minmax(0, 1fr); }
.ds .getapp .qr { display: none; }
}
/* mock chrome. Not part of the product. */
.ds .stage .ob { min-height: calc(100dvh - 37px); }
.ds [hidden] { display: none !important; }
.ds .side .wsbtn { width: calc(100% - 2 * var(--s2)); }
.ds .wspop { left: 8px; top: 104px; width: 284px; }
@media (max-width: 699px) {
.ds .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); }
.ds .wspop { left: 0; top: auto; width: auto; }
}
.ds .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); }
.ds .toast.bad { border-color: var(--bad-line); color: var(--bad); }
.ds .row-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ds .ttl-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ds .mt2 { margin-top: var(--s2); }
.ds .mt3 { margin-top: var(--s3); }
.ds .mt6 { margin-top: 6px; }
.ds .gap6 { gap: 6px; }
.ds .gap4 { gap: var(--s4); }
.ds .sess-line { display: flex; align-items: baseline; gap: var(--s2); }
.ds .sess-line .num { font-size: 13px; }
.ds .leg-used { background: var(--good); }
.ds .leg-proj { background: repeating-linear-gradient(135deg, var(--good-line) 0 4px, transparent 4px 8px); border: 1px solid var(--line2); }
.ds .legend i.leg-limit { width: 0; height: 10px; border-left: 2px dashed var(--bad); border-radius: 0; }
.ds .meter .fill.stale { background: var(--dim); }
.ds .ink { color: var(--ink); }
.ds .plan-now { font-size: var(--fs-md); }
.ds .lim-row { display: flex; }
.ds .lim-row .num { font-size: 13px; }
.ds .panel2 { background: var(--panel2); }
.ds .code.stretch { align-self: stretch; }
.ds .sum { cursor: pointer; font-weight: 600; font-size: 14px; }
.ds .bar-time i.low { background: var(--warn); }
.ds .wsname-dim { font-weight: 400; }
.ds .locked-row .main-t b { color: var(--mut); }
.ds #drawer-scrim { z-index: calc(var(--z-side) - 1); }
.ds .sr-copy { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
.ds .page-load { color: var(--dim); font-size: var(--fs-sm); }
.ds .page[data-narrow] { max-width: 760px; }
/* pages that render everything into one #content: keep the page's own gap between the blocks */
.ds .pagegap { display: flex; flex-direction: column; gap: var(--s6); }
@media (max-width: 699px) {
.ds .pagegap { gap: var(--s5); }
}
/* asks, decisions, rooms: the mockups' inline styles as classes, plus what the live pages add */
.ds .gap1 { gap: var(--s1); }
.ds .gap2 { gap: var(--s2); }
.ds .card.pad4 { padding: var(--s4); }
.ds .lblrow { display: flex; align-items: baseline; gap: var(--s2); }
.ds .cnt-s { font: 12px var(--mono); color: var(--dim); }
.ds .sect-top { border-top: 1px solid var(--line); padding-top: var(--s4); }
.ds textarea.input.short { min-height: 44px; }
.ds .choice.on.opt { color: var(--ink); background: var(--panel3); border-color: var(--mut); }
.ds .ditem .src { font: var(--fs-xs) var(--mono); color: var(--dim); }
.ds .composer .inrow { display: flex; gap: var(--s2); align-items: flex-end; }
.ds .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; }
.ds .composer .inrow .msg::placeholder { color: var(--dim); }
.ds .flip { display: inline-flex; transform: rotate(180deg); }
.ds .mentions { display: flex; flex-wrap: wrap; gap: 6px; }
.ds .post .dl { grid-column: 2; margin-top: 4px; font: 11px var(--mono); color: var(--dim); }
.ds .post .tx { white-space: pre-wrap; }
.ds .roomlist .rl-empty { padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--dim); }
.ds .thread .t-empty { margin: auto; color: var(--dim); font-size: var(--fs-sm); text-align: center; }
.ds { font: var(--fs-base)/var(--lh-base) var(--sans); color: var(--ink); }