/* 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); } }

/* --- cockpit --- */
.cockpit { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
.grid { display: grid; gap: var(--s2); padding: var(--s2); min-height: 0; overflow: auto; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); grid-auto-rows: minmax(270px, 1fr); }
.pane { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 0; min-width: 0; }
.pane.target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pane .head { display: flex; align-items: center; gap: var(--s2); padding: 5px 6px 5px 10px; min-height: var(--tap); border-bottom: 1px solid var(--line); background: var(--panel2); }
.pane .head .nm { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.pane .head .nm b { font: 600 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane .head .nm small { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.pane .head .seg > * { padding: 5px 10px; font-size: 11px; }
.read { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4) 26px; font: var(--fs-read)/1.58 var(--sans); }
.read .turn { margin: 0 0 18px; }
.read .rl { display: block; font: 600 var(--fs-micro) var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.read .turn.you { border-left: 2px solid var(--accent); padding-left: 13px; } .read .turn.you .rl { color: var(--accent-ink); }
.read .turn.agent .rl { color: var(--good); }
.read code { font: .82em var(--mono); background: var(--panel3); border-radius: var(--r-xs); padding: 1px 5px; }
.term { flex: 1; min-height: 0; overflow: hidden; background: var(--term-bg); color: var(--term-ink); font: 12.5px/1.5 var(--mono); padding: var(--s3) var(--s4); white-space: pre-wrap; }
.term .d { color: var(--term-dim); } .term .g { color: #7fb682; } .term .o { color: #e08a6d; }
.livestrip { display: flex; align-items: center; gap: var(--s2); padding: 6px 10px; border-top: 1px solid var(--line); font: 11.5px var(--mono); color: var(--dim); }
.livestrip .k { border: 1px solid var(--line2); border-radius: var(--r-xs); padding: 3px 8px; color: var(--mut); background: var(--panel2); }
.sendbar { border-top: 1px solid var(--line); background: var(--panel); padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s2); }
.sendto { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip { font: 12px var(--mono); padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--mut); white-space: nowrap; cursor: pointer; background: none; flex: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.inrow { display: flex; gap: var(--s2); align-items: flex-end; }
.inrow .msg { flex: 1; min-width: 0; min-height: var(--tap); border-radius: var(--r-md); border: 1px solid var(--accent-line); background: var(--panel2); color: var(--ink); padding: 11px 12px; font: 15px var(--mono); }
.inrow .msg::placeholder { color: var(--dim); }
@media (max-width: 699px) {
  .cockpit { height: calc(100dvh - 57px); }
  .grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); padding: 0; gap: 0; }
  .grid .pane { display: none; border: 0; border-radius: 0; }
  .grid .pane.target { display: flex; box-shadow: none; }
  .read { padding: var(--s3) 17px; }
  .inrow .hide-s { display: none; }
}

/* --- mock chrome: the strip at the top of each mockup. Not part of the product. --- */
.mockbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 6px 12px; background: #0f0e0d; color: #a49f98; font: 11px var(--mono); border-bottom: 1px solid #35322f; }
.mockbar b { color: #eceae7; font-weight: 600; }
.mockbar a { color: #a49f98; text-decoration: none; } .mockbar a:hover { color: #e08a6d; }
.mockbar label, .mockbar button { border: 1px solid #423e3a; border-radius: 6px; padding: 4px 9px; cursor: pointer; background: none; color: #a49f98; font: 11px var(--mono); }
.mock-st { position: absolute; opacity: 0; pointer-events: none; }
#st1:checked ~ .mockbar label[for="st1"], #st2:checked ~ .mockbar label[for="st2"], #st3:checked ~ .mockbar label[for="st3"], #st4:checked ~ .mockbar label[for="st4"], #st5:checked ~ .mockbar label[for="st5"] { background: #d97757; border-color: #d97757; color: #191817; font-weight: 600; }
#st1:checked ~ .stage [data-state]:not([data-state~="1"]), #st2:checked ~ .stage [data-state]:not([data-state~="2"]), #st3:checked ~ .stage [data-state]:not([data-state~="3"]), #st4:checked ~ .stage [data-state]:not([data-state~="4"]), #st5:checked ~ .stage [data-state]:not([data-state~="5"]) { display: none !important; }
.stage { position: relative; }
.stage .app, .stage .auth { min-height: calc(100dvh - 37px); }
.stage .side { top: 37px; height: calc(100dvh - 37px); }
.stage .topbar { top: 37px; }
.stage .cockpit { height: calc(100dvh - 37px); }
@media (max-width: 699px) { .stage .cockpit { height: calc(100dvh - 37px - 57px); } }

/* --- 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); }