/* SPDX-License-Identifier: MIT */
/*
 * Layout and components of the cockpit. Colors only through the
 * DESIGN.md tokens in tokens.css (var(--token)); no hex value lives here.
 * Motion only on transform, opacity, background-color and border-color, 200ms
 * ease-out, switched off under prefers-reduced-motion.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--secondary); text-underline-offset: 3px; }
code, kbd, pre, .mono { font-family: var(--font-mono); }
code { font-size: 12px; overflow-wrap: anywhere; }

:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 12px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.skip:focus { top: 8px; }

.muted { color: var(--on-surface-muted); }
.small { font-size: var(--text-sm); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hint { margin-top: 20px; font-size: var(--text-sm); }
.noscript { padding: 24px; }

.eyebrow {
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary);
}
.label-caps {
  display: block; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-surface-muted); margin-bottom: 8px;
}
.mono-label {
  font-family: var(--font-mono); font-size: var(--text-mono-label); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-surface-muted);
}

/* ---------------------------------------------------------------- tone tokens */

.tk-danger { --tk: var(--danger); }
.tk-warning { --tk: var(--warning); }
.tk-success { --tk: var(--success); }
.tk-info { --tk: var(--info); }
.tk-secondary { --tk: var(--secondary); }
.tk-on-surface-muted { --tk: var(--on-surface-muted); }

.dot {
  display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--tk, var(--on-surface-muted));
}

.state-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--on-surface-muted); }
.state-line > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.state-line.is-strong { font-weight: 600; color: var(--on-surface); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color var(--motion), border-color var(--motion);
}
.btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--text-sm); }
.btn-xs { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
.btn .icon { flex: 0 0 auto; }
.btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary-edge); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--accent-subtle); }
.btn-ghost { background: transparent; color: var(--secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-muted); }
.btn-danger { background: var(--surface-raised); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised)); }
.btn-danger-solid { background: color-mix(in srgb, var(--danger) 16%, var(--surface-raised)); color: var(--danger);
  border-color: var(--danger); font-weight: 600; }
.btn-danger-solid:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 24%, var(--surface-raised)); }
.btn[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent-line); color: var(--ink); }
.btn:disabled {
  cursor: not-allowed; background: var(--surface-muted); color: var(--on-surface-muted); border-color: var(--border);
}
.btn[aria-busy="true"] .btn-label::after { content: " …"; }
.btn-ghost:disabled { background: transparent; border-color: transparent; }

.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--secondary);
  font-size: var(--text-sm); font-weight: 600; text-align: left;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-surface-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-muted); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 0 7px; min-height: 20px; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--on-surface-muted); font-size: 12px; line-height: 1.4; white-space: nowrap;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip-active { background: var(--accent-subtle); color: var(--ink); border-color: var(--accent-line); }
.chip-mark { color: var(--on-surface); font-weight: 600; }
.chip-done { border-style: dashed; }
.chip-warn-outline { border-color: var(--warning); color: var(--on-surface); }
.prio {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--on-surface); padding: 0 6px; min-height: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.prio::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--tk); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------- inputs */

.input {
  min-width: 0; padding: 5px 10px; min-height: 30px; font-size: var(--text-sm);
  background: var(--surface-raised); color: var(--on-surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--motion);
}
.input::placeholder { color: var(--on-surface-muted); }
.input:focus { border-color: var(--secondary); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input-date { width: 120px; }
.textarea { display: block; width: 100%; min-height: 58px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.field-row .input:not(.input-date) { flex: 1 1 180px; }
.field-err { margin-top: 6px; font-size: var(--text-sm); }

.seg {
  display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); overflow: hidden;
}
.seg-btn {
  border: 0; background: transparent; padding: 4px 12px; min-height: 28px; cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; color: var(--on-surface-muted);
  transition: background-color var(--motion);
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover:not(:disabled) { background: var(--surface-muted); }
.seg-btn.is-on { background: var(--accent-subtle); color: var(--ink); }
.seg-btn:disabled { cursor: not-allowed; }

kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--on-surface);
}

/* ---------------------------------------------------------------- frame */

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--surface-raised); border-bottom: 1px solid var(--border);
}
.hdr-id { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 0 auto; }
.hdr-id .eyebrow { font-size: 10.5px; line-height: 1.2; }
.hdr-title { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--on-surface); white-space: nowrap; }
/* mock mode only (the website demo): says the data is invented, always visible, never loud */
.hdr-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hdr-demo {
  flex: 0 0 auto; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: 10.5px; line-height: 16px; color: var(--on-surface-muted); white-space: nowrap;
}
.hdr-demo-short { display: none; }
/* a cockpit on a copy of the Bridge or with a state folder of its own: what is started here does not stay */
.hdr-scratch { border-color: var(--warning); color: var(--on-surface); font-weight: 600; }
.ai-returns { margin-bottom: 16px; }
.ai-group + .ai-group { margin-top: 12px; }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 6px; }
.hdr-headline {
  flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.hdr-status, .hdr-asof, .hdr-relay {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; min-width: 0;
}
.hdr-status > span { overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.hdr-relay { padding: 0 4px; flex: 0 0 auto; }
/* what works in this Bridge's tabs now; a click opens the Sessions page */
.hdr-agents { flex: 0 0 auto; padding: 0 4px; font-size: 12.5px; white-space: nowrap; color: var(--on-surface-muted); }
.hdr-agents:hover { color: var(--ink); }
/* only the loading line and the as-of time give way; buttons and the relay word never overlap */
.hdr-right > .btn, .hdr-right > .cmd { flex: 0 0 auto; }
.hdr-status, .hdr-asof { flex: 0 1 auto; overflow: hidden; }
/* the right side never grows wider than its buttons plus one short loading line, so it stays off the page tabs */
.hdr-status { max-width: min(300px, 22vw); }
.hdr-status > span { max-width: 100%; }

.cmd { position: relative; display: flex; align-items: center; }
.cmd-input {
  width: 150px; min-height: 32px; padding: 4px 26px 4px 10px; font-size: 12.5px;
  background: var(--surface); color: var(--on-surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--motion);
}
.cmd-input:focus { border-color: var(--secondary); }
.cmd-input::placeholder { color: var(--on-surface-muted); }
.cmd-kbd { position: absolute; right: 6px; pointer-events: none; padding: 0 5px; }

.pagebar {
  position: sticky; top: var(--header-h); z-index: 40; height: var(--pagebar-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.pagebar-tabs { display: flex; align-items: stretch; gap: 2px; height: 100%; padding: 0 12px; }
.ptab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--on-surface-muted);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: background-color var(--motion), border-color var(--motion);
}
.ptab:hover { background: var(--surface-muted); }
.pagebar-tabs { position: relative; }
.ptab.is-active { color: var(--on-surface); }
/* the active line glides between tabs (TabMarker); 100px wide, scaled to the tab */
.ptab-marker {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--secondary);
  transform-origin: 0 50%; pointer-events: none; will-change: transform; z-index: 1;
}
.pbadge {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; min-height: 18px;
  border-radius: var(--radius-full); background: var(--surface-muted); color: var(--on-surface);
  font-size: 11px; font-weight: 600;
}
.pbadge.is-quiet { background: transparent; color: var(--on-surface-muted); font-weight: 500; }

.mobile-switch {
  position: sticky; top: calc(var(--header-h) + var(--pagebar-h)); z-index: 30;
  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.mobile-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; min-width: 0;
}
.mobile-status .hdr-asof, .mobile-status .hdr-relay { white-space: normal; flex-wrap: wrap; padding: 0; }
.mobile-switch .seg { display: flex; width: 100%; }
.mobile-switch .seg-btn { flex: 1 1 0; }

/* ---------------------------------------------------------------- main grid */

.main { flex: 1 1 auto; min-height: 0; }
.main.layout-wide, .main.layout-medium {
  display: grid; gap: 16px; padding: 16px;
  height: calc(100vh - var(--header-h) - var(--pagebar-h));
  height: calc(100dvh - var(--header-h) - var(--pagebar-h));
}
.main.layout-wide { grid-template-columns: minmax(var(--col-left), 1fr) minmax(0, 1fr) var(--col-right); }
/* the work tab with no row picked: the list takes two thirds, the overview beside it one; a picked row's detail gets half */
.main.layout-wide.no-pick:not(.on-page) { grid-template-columns: minmax(var(--col-left), 2fr) minmax(0, 1fr) var(--col-right); }
.main.layout-wide.on-page { grid-template-columns: minmax(0, 1fr) var(--col-right); }
.main.layout-medium { grid-template-columns: var(--col-left) minmax(0, 1fr); }
.main.layout-medium.on-page { grid-template-columns: minmax(0, 1fr); }
.main.layout-wide.on-page.with-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--col-right); }
.main.layout-wide.no-rail { grid-template-columns: minmax(var(--col-left), 1fr) minmax(0, 1fr); }
.main.layout-wide.no-rail.no-pick:not(.on-page) { grid-template-columns: minmax(var(--col-left), 2fr) minmax(0, 1fr); }
.main.layout-wide.on-page.no-rail { grid-template-columns: minmax(0, 1fr); }
.main.layout-wide.on-page.no-rail.with-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.main.layout-medium.on-page.with-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.layout-narrow[data-pane="detail"] .col-page { display: none; }
.info-open { text-align: left; font: inherit; color: inherit; }
/* the page column is narrow while a detail stands beside it: buttons stack instead of running off the edge */
.with-detail .col-page .c-acts .btn-row { flex-direction: column; align-items: flex-end; }
.main.layout-wide > .col, .main.layout-medium > .col { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.main.layout-narrow { padding: 12px 16px 96px; }
.layout-narrow[data-pane="day"] .col-detail,
.layout-narrow[data-pane="detail"] .col-day,
.layout-narrow[data-pane="tabs"] .col-day,
.layout-narrow[data-pane="tabs"] .col-detail,
.layout-narrow[data-pane="tabs"] .col-page { display: none; }

.col { min-width: 0; }
.col-tabs:focus { outline: none; }

.panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.panel-pad { padding: 16px 20px; }

.col-detail { display: flex; flex-direction: column; gap: 16px; }
.layout-wide .col-detail, .layout-medium .col-detail { overflow: hidden !important; }
.detail-scroll { min-height: 0; }
.layout-wide .detail-scroll, .layout-medium .detail-scroll { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }

/* ---------------------------------------------------------------- day column */

.day-panel { padding: 6px 6px 10px; }
/* what happened today (a profile page of group day) under the day list: commits and log, quieter than the work */
.day-more { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.day-more-title { margin: 0 4px; color: var(--on-surface-muted); }
.day-counts { padding: 8px 10px 2px; font-size: 12.5px; }
.layout-wide .day-counts { display: none; }
/* a narrow day column puts a row's buttons under its title, so the title keeps the full width */
.col-day { container-type: inline-size; }
@container (max-width: 520px) {
  .col-day .row { grid-template-columns: 22px 16px minmax(0, 1fr); row-gap: 6px; }
  .col-day .row-acts { grid-column: 3; justify-content: flex-start; }
}

.sec { padding: 4px 0 6px; }
.sec + .sec { border-top: 1px solid var(--border); }
.sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 6px;
}
.sec-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.sec-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sec-count {
  display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--surface-muted); color: var(--counter); font-size: 11px; letter-spacing: 0; font-weight: 600;
}
.sec-tools { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 22px 16px minmax(0, 1fr) auto; align-items: start; column-gap: 8px;
  padding: 8px 8px 8px 6px; border: 1px solid transparent; border-bottom-color: var(--border);
  border-radius: var(--radius-md);
  transition: background-color var(--motion), border-color var(--motion);
}
.rows > .row:last-child { border-bottom-color: transparent; }
.row:hover { background: var(--surface-muted); }
.row.is-selected { background: var(--accent-subtle); border-color: var(--accent-line); }
.row.is-focused { border-color: var(--secondary); }
.row-num {
  padding-top: 2px; text-align: right; font-size: 11px; font-weight: 600; color: var(--counter);
}
.row-pick { margin: 3px 0 0; width: 14px; height: 14px; accent-color: var(--secondary); cursor: pointer; }
.row-pick-gap { width: 14px; }
/* a calm list: with a pointer the box and the main button come in full only on the row in reach (hover, focus,
   picked); while any row is picked every box stands. Touch screens keep everything as it was */
@media (hover: hover) {
  .day-panel:not(.is-picking) .row:not(:hover):not(:focus-within):not(.is-selected):not(.is-focused) .row-pick { opacity: 0; }
  .row:not(:hover):not(:focus-within):not(.is-selected):not(.is-focused) .row-acts .btn-primary {
    background: transparent; color: var(--ink); border-color: var(--border-strong);
  }
}
.row-gist { display: block; margin-top: 1px; color: var(--on-surface-muted); font-size: var(--text-sm); line-height: 1.35; }
.chip-topic { background: var(--surface-muted); color: var(--on-surface); border-color: var(--border); }
.row-main {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0;
  background: transparent; text-align: left; cursor: pointer; color: inherit;
}
.row-main:focus-visible { outline-offset: 3px; border-radius: var(--radius-sm); }
.row-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--on-surface);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--on-surface-muted);
}
.meta-why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.meta-area { font-weight: 600; }
.row-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-self: center; }

.tabminis { display: flex; flex-direction: column; gap: 6px; padding: 0 6px 6px; }
.tabmini {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.tabmini-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12.5px; }
.tabmini-name { font-weight: 600; color: var(--on-surface); overflow-wrap: anywhere; }
.tabmini-age { font-size: 11px; color: var(--on-surface-muted); }
.tabmini-acts { display: flex; gap: 4px; }

.selbar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 10px; margin: 2px 2px 6px; padding: 8px 10px;
  background: var(--accent-subtle); border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.selbar-acts { display: flex; flex-wrap: wrap; gap: 4px; }

.alarm {
  margin: 6px 4px; padding: 8px 12px; border: 1px solid var(--danger); border-radius: var(--radius-lg);
  background: var(--surface-raised); display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm);
}
.alarm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }

.callout {
  margin: 8px 6px; padding: 12px 14px; background: var(--accent-subtle); border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg); color: var(--on-surface); font-size: var(--text-sm);
}
.empty { padding: 4px 10px 8px; font-size: var(--text-sm); color: var(--on-surface-muted); }

.hidden-rows { margin: 4px 6px 0; border-top: 1px solid var(--border); padding-top: 6px; }
.hidden-rows summary {
  cursor: pointer; padding: 6px 4px; font-size: var(--text-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-surface-muted);
}
.hidden-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 4px; font-size: var(--text-sm); }
.hidden-title { flex: 1 1 160px; color: var(--on-surface); font-weight: 600; }

.skeleton { display: flex; flex-direction: column; gap: 12px; padding: 8px; }
.skel-line {
  display: block; height: 12px; border-radius: var(--radius-sm); background: var(--surface-muted);
  animation: skel 1.4s ease-out infinite alternate;
}
.skel-line:nth-child(3n) { width: 62%; }
.skel-line:nth-child(3n+1) { width: 88%; }
@keyframes skel { from { opacity: 1; } to { opacity: 0.45; } }

.spinner {
  display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: var(--radius-full);
  border: 2px solid var(--border); border-top-color: var(--secondary); vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- detail column */

.detail-title { font-size: var(--text-h3); font-weight: 600; line-height: 1.35; color: var(--on-surface); overflow-wrap: anywhere; }
.detail-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.next-up { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); }
.idrawer > .next-up { border-radius: 0; border-width: 1px 0 0; padding: 8px 20px; }
.next-up-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.next-up-pos { flex: 0 0 auto; font-size: 12px; color: var(--on-surface-muted); }
.next-up-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
.next-up-text > .label-caps { flex: 0 0 auto; white-space: nowrap; }
.next-up-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.next-up-later { margin: 0; padding: 0 0 0 calc(28px + 8px); display: flex; flex-direction: column; gap: 1px; font-size: 13px;
  color: var(--on-surface-muted); }
.next-up-later li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-up-later li::marker { font-variant-numeric: tabular-nums; }
.next-up-later .btn-link { color: inherit; font-size: inherit; }
/* a phone: the title gets the whole line; the label "next" would leave it a few letters */
@media (max-width: 899px) {
  .next-up-text > .label-caps { display: none; }
  .next-up-later { padding-left: 4px; }
  .next-up-later li:nth-child(n+2) { display: none; }
}
.detail-eyebrow { display: flex; align-items: center; gap: 8px; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-chips:empty { display: none; }
.detail > .btn-ghost:first-child { margin: -4px 0 8px -8px; }

.link-out {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: var(--text-sm); font-weight: 600;
  overflow-wrap: anywhere;
}
.link-text { overflow: hidden; text-overflow: ellipsis; }
.link-file { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.link-file code, .link-file .btn-link { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }

.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px 16px; }
.meta-item { min-width: 0; }
.meta dt {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.meta dd { font-size: var(--text-sm); color: var(--on-surface); overflow-wrap: anywhere; }

.block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sub-block { margin-top: 12px; }
.sub-title { font-size: 12.5px; font-weight: 600; color: var(--on-surface); margin-bottom: 6px; }
.why { display: flex; flex-wrap: wrap; gap: 6px; }
.why li {
  font-size: 12.5px; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius-full);
  color: var(--on-surface-muted);
}

.inbox-summary { font-weight: 600; margin-bottom: 6px; }
.runs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; padding: 8px 10px;
  background: var(--surface-muted); border-radius: var(--radius-md);
}
.runs .label-caps { margin: 0; }
.runs-cmd { font-size: 12px; color: var(--on-surface); }
.events summary, .task-sections summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; padding: 6px 0; }
.event-list li, .log-rows li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; font-size: 12.5px;
  border-top: 1px solid var(--border);
}
.lines { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: 12.5px; }
.line-kind { font-weight: 600; color: var(--on-surface-muted); }
.task-headline { font-weight: 600; margin-bottom: 8px; }
.task-sections { margin-top: 12px; }
.task-sections details { border-top: 1px solid var(--border); }
.task-sections details > .pre { padding: 2px 0 10px; font-size: var(--text-sm); color: var(--on-surface); }
.entries { display: flex; flex-direction: column; }
.entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); }

.team-state { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: var(--text-sm); }
.roles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.roles li { display: inline-flex; align-items: center; gap: 6px; }

.tab-info-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--text-sm); }
.tab-last { margin: 6px 0; font-size: 12.5px; color: var(--on-surface); overflow-wrap: anywhere; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tab-ctl { display: flex; flex-direction: column; gap: 6px; }
.tab-ctl .field-row { margin-top: 0; }

.overview .detail-title { margin: 4px 0 4px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
.ov-block { margin-top: 18px; }
.agenda li, .status-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
.agenda li { justify-content: flex-start; }
.agenda-when { color: var(--counter); font-size: 12px; font-weight: 600; min-width: 44px; }
.plain li { padding: 3px 0; font-size: var(--text-sm); }

/* ---------------------------------------------------------------- ask box */

.ask-fallback { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------------- tabs column */

.tabs-panel { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tabs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 2px 0; }
.tabs-head .sec-title { margin-right: auto; }
.tabs-head-acts { display: inline-flex; align-items: center; gap: 4px; }
.tabs-head-acts:empty { display: none; }
.banner {
  padding: 8px 12px; border: 1px solid var(--warning); border-radius: var(--radius-lg);
  background: var(--surface-raised); font-size: var(--text-sm);
}
.tabgroup { display: flex; flex-direction: column; gap: 8px; }
.tabgroup > .mono-label { padding: 0 2px; }
.tabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.tabcard {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; min-width: 0;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--motion);
}
.tabcard.st-needs-you { border-color: var(--danger); }
.tabcard.st-waiting { border-color: var(--warning); }
.tabcard.is-shell { border-style: dashed; border-color: var(--border-strong); }
.tabcard.is-control { border-color: var(--border); background: var(--surface-muted); }
.tabcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; }
.tabcard-age { margin-left: auto; font-size: 11px; color: var(--on-surface-muted); }
.tabcard-name { font-size: 13.5px; font-weight: 600; color: var(--on-surface); overflow-wrap: anywhere; }
.tabcard-name .btn-link { font-size: 13.5px; color: var(--on-surface); }
.tabcard-name .btn-link:hover { color: var(--secondary); }
.tabcard .tab-last { margin: 0; color: var(--on-surface-muted); }
.tabcard { position: relative; }
/* slim: two lines, the state with its age and "more" above, the name with its one next step below */
.tabcard.is-slim {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "head head more" "name acts acts";
  align-items: center; column-gap: 8px; row-gap: 2px; padding: 6px 10px;
}
.tabcard.is-slim > * { grid-column: 1 / -1; }
.tabcard.is-slim .tabcard-head { grid-area: head; }
.tabcard.is-slim .tabcard-name { grid-area: name; min-width: 0; }
.tabcard.is-slim .tabcard-name .btn-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.tabcard.is-slim > .btn-row { grid-area: acts; justify-self: end; }
.tabcard.is-slim .tabcard-more { grid-area: more; position: static; }
.tabgrid:has(.is-slim) { gap: 6px; }
.tabcard-more { position: absolute; right: 12px; bottom: 8px; font-size: 11.5px; color: var(--on-surface-muted); }
.tabcard:not(.is-slim) .tabcard-more { position: static; align-self: flex-end; }

.snap { padding: 12px 2px 4px; border-top: 1px solid var(--border); }
.snap .pre { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--on-surface-muted); }

/* ---------------------------------------------------------------- pages */

.col-page { display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.psec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.psec-head .sec-title { margin-right: auto; }
.psec-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px; }
.psec-quiet .sec-title { margin: 0 auto 0 0; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-surface-muted); white-space: nowrap;
}
.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.tbl tbody tr:nth-child(even) td { background: var(--surface-muted); }
.c-when { width: 80px; white-space: nowrap; color: var(--on-surface-muted); font-size: 12px; }
.c-acts { width: 1%; white-space: nowrap; text-align: right; }
.c-acts .btn-row { justify-content: flex-end; flex-wrap: nowrap; }
.detail-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.info-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; color: var(--on-surface); }
.info-title .state-line, .info-title .state-line > span:last-child { color: var(--on-surface); }
.info-detail { margin-top: 2px; font-size: 12.5px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed; inset: 0; z-index: 80; background: var(--scrim);
  animation: fade 200ms ease-out;
}
.overlay-center { display: flex; align-items: center; justify-content: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { transform: translateX(24px); } to { transform: translateX(0); } }
.drawer {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(440px, 100vw); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-float);
  padding: 16px; animation: slide 200ms ease-out;
}
.drawer-tabs { padding: 16px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dialog {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float); padding: 20px 22px;
}
.dialog-wide { width: min(880px, 100%); }
.dialog .sec-title { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--on-surface); }
.dialog-acts { justify-content: flex-end; margin-top: 18px; }
.close-list { margin: 6px 0 12px; padding-left: 18px; }
.close-reasons { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.radio-line { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.field { display: grid; gap: 4px; }
.field textarea.input { min-height: 64px; resize: vertical; }

/* sessions page (SessionsPage, SessionCard) */
.sess-intro { margin: 0 4px; }
/* workspaces side by side while they fit: a group with one card stays narrow, a full one takes the row */
.sess-groups { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
.sess-groups > .psec { min-width: 0; margin: 0; }
.sess-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sess { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--surface-raised); align-content: start; }
.sess.is-busy { border-color: var(--success); }
.sess.is-alert { border-color: var(--danger); }
.sess-head, .sess-where, .sess-agents { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sess-title { font-weight: 600; text-align: left; font-size: var(--text-md, 15px); }
.sess-count { font-size: var(--text-sm); color: var(--on-surface-muted); }
.sess-count .mono { font-size: 18px; font-weight: 600; }
.sess-count.is-on { color: var(--ink); }
.sess-count.is-on .mono { color: var(--success); }
.sess-agent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sess-agent-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--text-sm); }
.sess-agent-desc { flex: 1 1 140px; min-width: 0; }

/* motion and drawings (motion.js): only transform and opacity move */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.row-in { animation: row-in 360ms ease-out backwards; animation-delay: calc(var(--i, 0) * 120ms); }
@keyframes row-in { from { transform: translateX(-22px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.hit {
  position: absolute; inset: -1px; border: 2px solid var(--success); border-radius: inherit; pointer-events: none;
  animation: hit 900ms ease-out both;
}
.hit-alert { border-color: var(--danger); }
@keyframes hit { 0% { transform: scale(1); opacity: 0; } 9% { opacity: 1; } 100% { transform: scale(1.035); opacity: 0; } }
.sess { position: relative; }

.stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 4px; }
.stats > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.stats dt { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-muted); }
.stats dd { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--counter); }

.lane { display: grid; gap: 3px; padding: 6px 0 0; border-top: 1px solid var(--border); }
.lane-row { position: relative; height: 6px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.lane-bar {
  position: absolute; inset: 0; background: var(--success); border-radius: var(--radius-full);
  transform-origin: 0 50%; will-change: transform;
}
.lane-bar.is-older { border-left: 2px dashed var(--surface-raised); }
.lane-axis { display: flex; justify-content: space-between; font-size: var(--text-mono-label); color: var(--on-surface-muted); }

.meter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.meter-track {
  position: relative; flex: 1 1 180px; max-width: 360px; height: 8px;
  background: var(--border); border-radius: var(--radius-full);
}
.meter-fill {
  position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--tk);
  transform-origin: 0 50%; will-change: transform;
}
/* where the time window stands: a 2px mark that reaches over the track, so it reads without color */
.meter-pace {
  position: absolute; top: -3px; bottom: -3px; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px;
  background: var(--on-surface); border-radius: 1px;
}
.meter-text { font-size: var(--text-sm); font-weight: 600; min-width: 7ch; }

.gtiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gtile {
  display: grid; gap: 6px; align-content: start; padding: 12px 14px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.gtile-title { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.gtile-foot { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.gauge { width: 100%; max-width: 300px; justify-self: center; }
.g-band { fill: none; stroke: var(--tk); stroke-width: 9; }
.g-band-none { stroke: var(--border); }
.g-track { fill: none; stroke: var(--border); stroke-width: 15; }
/* a flat end: a round cap would add half the stroke and show 7 % as more than 10 % */
.g-value { fill: none; stroke: var(--tk); stroke-width: 15; }
.g-pace { stroke: var(--on-surface); stroke-width: 3; stroke-linecap: round; }
.g-label { font-family: var(--font-mono); font-size: 10px; fill: var(--on-surface-muted); }
.g-num { font-family: var(--font-mono); font-size: 30px; font-weight: 600; fill: var(--counter); font-variant-numeric: tabular-nums; }

/* Dates as an agenda (views/dates.js): figures, filters, agenda by day, week grid, month overview */
.cal { display: grid; gap: 14px; margin: 4px 0 8px; }
.calf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.calf-wide { grid-column: span 2; }
.calf-tile {
  width: 100%; height: 100%; display: grid; gap: 2px; justify-items: start; align-content: start; padding: 10px 12px; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--on-surface); font: inherit;
  cursor: pointer;
}
.calf-tile:hover { border-color: var(--border-strong); }
.calf-tile:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.calf-tile.is-on { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); }
.calf-tile.is-loud { border-left: 3px solid var(--tk); }
.calf-tile.is-loud .calf-n { color: var(--tk); }
.calf-tile.is-static { cursor: default; }
.calf-tile.is-static:hover { border-color: var(--border); }
.calf-n { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--counter); }
.calf-label { font-size: var(--text-sm); }
.calf-title { font-weight: 600; overflow-wrap: anywhere; }
.calf-sub { font-size: 11px; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.calbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-search {
  min-width: 200px; flex: 0 1 260px; padding: 5px 10px; font: inherit; font-size: var(--text-sm); color: var(--on-surface);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.cal-search:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.cal-agenda { display: grid; gap: 16px; }
.cal-day { display: grid; gap: 6px; }
.cal-dayhead { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.cal-dayname { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.cal-day.is-today .cal-dayname { color: var(--secondary); }
.cal-daybar { position: relative; height: 8px; min-width: 120px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.cal-block { position: absolute; top: 0; bottom: 0; background: var(--secondary); border-radius: 2px; }
.cal-block.is-info { background: var(--border-strong); }
.cal-block.is-clash { background: var(--tk); }
.cal-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--danger); }
.cal-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cal-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 4px 14px; align-items: start; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.cal-row.is-info { background: var(--surface-muted); }
.cal-row.is-info .cal-title { color: var(--on-surface-muted); font-weight: 500; }
.cal-row.is-past { opacity: 0.6; }
.cal-row.is-running { border-left: 3px solid var(--success); }
.cal-time { display: grid; font-size: var(--text-sm); }
.cal-dur { font-size: 11px; }
.cal-main { display: grid; gap: 3px; min-width: 0; }
.cal-title { font-weight: 600; overflow-wrap: anywhere; }
.cal-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--on-surface-muted); }
.cal-cal { font-weight: 500; }
.cal-acts { justify-content: flex-end; }
.cal-week { display: grid; gap: 4px; overflow-x: auto; }
.cal-wk-head, .cal-wk-allday { display: grid; grid-template-columns: 44px repeat(7, minmax(96px, 1fr)); gap: 2px; }
.cal-wk-day { font-size: var(--text-sm); font-weight: 600; padding: 4px 6px; }
.cal-wk-day.is-today { color: var(--secondary); }
.cal-wk-cell { display: grid; gap: 2px; align-content: start; min-height: 6px; }
.cal-wk-chip, .cal-ev {
  font: inherit; font-size: 11px; text-align: left; color: var(--on-surface); cursor: pointer;
  border: 1px solid var(--secondary); border-left-width: 3px; border-radius: var(--radius-md);
  background: var(--accent-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-wk-chip { padding: 2px 6px; }
.cal-wk-chip.is-info, .cal-ev.is-info { border-color: var(--border-strong); background: var(--surface-muted); color: var(--on-surface-muted); }
.cal-ev.is-clash { border-color: var(--warning); }
.cal-ev.is-past { opacity: 0.6; }
.cal-wk-chip:focus-visible, .cal-ev:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.cal-wk-body { position: relative; display: grid; grid-template-columns: 44px repeat(7, minmax(96px, 1fr)); gap: 2px; }
.cal-wk-hours { display: grid; align-content: start; }
.cal-wk-hours span { border-top: 1px solid var(--border); padding-right: 6px; text-align: right; }
.cal-wk-col {
  position: relative; border-left: 1px solid var(--border);
  background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 40px);
}
.cal-wk-col.is-today { background-color: var(--accent-subtle); }
.cal-ev { position: absolute; padding: 2px 4px; white-space: normal; line-height: 1.25; }
.cal-wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; }
.cal-month { display: grid; gap: 2px; }
.cal-mo-head, .cal-mo-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-mo-head span { padding: 2px 6px; }
.cal-mo-day {
  display: grid; align-content: start; gap: 2px; min-height: 92px; padding: 6px; text-align: left; font: inherit; color: var(--on-surface);
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; min-width: 0;
}
.cal-mo-day:disabled { cursor: default; }
.cal-mo-day.is-out { background: var(--surface-muted); color: var(--on-surface-muted); }
.cal-mo-day.is-today { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); }
.cal-mo-day.has-events:hover { border-color: var(--border-strong); }
.cal-mo-day:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.cal-mo-num { font-weight: 600; }
.cal-mo-count { justify-self: end; margin-top: -18px; font-size: 11px; color: var(--counter); }
.cal-mo-title { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mo-title.is-info { color: var(--on-surface-muted); }
.cal-facts { display: grid; gap: 12px; }
.cal-people { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--text-sm); }
@media (max-width: 760px) {
  .calf-wide { grid-column: span 1; }
  .cal-row { grid-template-columns: 64px 1fr; }
  .cal-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .cal-dayhead { grid-template-columns: 1fr; }
  .cal-mo-day { min-height: 64px; }
  .cal-mo-title { display: none; }
}

/* GitHub work (views/github.js): figures, boards with their switch, an opened issue or pull request */
.ghb { display: grid; gap: 14px; margin: 4px 0 14px; }
.ghb-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.ghb-figure {
  width: 100%; display: grid; gap: 2px; justify-items: start; padding: 10px 12px; cursor: pointer; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--on-surface); font: inherit;
}
.ghb-figure:hover { border-color: var(--border-strong); }
.ghb-figure:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.ghb-figure.is-on { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); }
.ghb-figure.is-loud { border-left: 3px solid var(--tk); }
.ghb-figure.is-loud .ghb-n { color: var(--tk); }
.ghb-figure.is-done { cursor: default; background: var(--surface-muted); }
.ghb-n { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--counter); }
.ghb-label { font-size: var(--text-sm); }
.ghb-sub { font-size: var(--text-xs, 11px); }
.ghb-boards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ghb-board {
  display: grid; gap: 8px; align-content: start; padding: 12px 14px;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.ghb-board.is-on { border-color: var(--secondary); box-shadow: inset 0 0 0 1px var(--secondary); }
.ghb-board.is-off { background: var(--surface-muted); }
.ghb-board.is-off .ghb-board-name { color: var(--on-surface-muted); }
.ghb-board-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none;
  color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
}
.ghb-board-head:disabled { cursor: default; }
.ghb-board-head:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; border-radius: 4px; }
.ghb-board-name { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.ghb-board .ghb-n { font-size: 20px; }
.ghb-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.ghb-seg { flex-basis: 0; min-width: 4px; background: var(--tk); }
.ghb-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.ghb-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--tk); vertical-align: 0; }
.ghb-off { margin: 0; }
.ghb-mode { display: inline-flex; justify-self: start; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ghb-mode-btn {
  padding: 3px 10px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--on-surface-muted);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.ghb-mode-btn:last-child { border-right: 0; }
.ghb-mode-btn:hover { background: var(--surface-muted); color: var(--on-surface); }
.ghb-mode-btn.is-on { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.ghb-mode-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.ghb-filter { display: flex; align-items: center; gap: 8px; margin: 0; }
.ghb-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ghl { display: grid; gap: 12px; }
.ghl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ghl-search {
  flex: 1 1 260px; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--on-surface); font: inherit; font-size: var(--text-sm);
}
.ghl-search:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
.ghl-group { display: grid; gap: 4px; }
.ghl-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
}
.ghl-head:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; }
.ghl-head-name { font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; }
.ghl-head-bar { flex: 0 1 160px; height: 6px; margin-left: auto; }
.ghl-chev { display: inline-block; width: 1em; color: var(--on-surface-muted); transition: transform 120ms ease-out; }
.ghl-chev.is-open { transform: rotate(90deg); }
.ghl-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ghl-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px;
  padding: 10px 8px; border-bottom: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
}
.ghl-row:hover { background: var(--surface-muted); }
.ghl-row:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.ghl-row.is-quiet .ghl-title { color: var(--on-surface-muted); }
.ghl-icon { color: var(--tk); align-self: start; margin-top: 2px; }
.ghl-main { min-width: 0; display: grid; gap: 4px; }
.ghl-title { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ghl-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-xs, 11px); }
.ghl-state { display: inline-flex; align-items: center; gap: 5px; color: var(--on-surface); }
.ghl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tk); }
.ghl-chip { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--on-surface-muted); }
.ghl-chip-task { border-color: var(--secondary); color: var(--on-surface); }
.ghl-chip-quiet { border-color: var(--warning); color: var(--on-surface); }
.ghl-chip-untasked { border-color: var(--warning); border-style: dashed; color: var(--on-surface); }
.ghl-chip-draft { border-style: dashed; }
.ghl-side { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.ghl-people { display: flex; gap: 6px; }
.ghl-acts { justify-content: flex-end; flex-wrap: nowrap; }
@media (max-width: 860px) {
  .ghl-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ghl-side { grid-column: 2; justify-items: start; text-align: left; display: flex; gap: 8px; }
  .ghl-acts { grid-column: 2; justify-content: flex-start; flex-wrap: nowrap; gap: 4px; }
}
.gh-detail { display: grid; gap: 14px; }
.gh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gh-label {
  display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: var(--text-xs, 11px); line-height: 18px;
  border: 1px solid var(--lc, var(--border)); color: var(--on-surface);
  background: color-mix(in srgb, var(--lc, transparent) 18%, transparent);
}
.gh-facts { margin: 0; }
.gh-person { font-size: var(--text-sm); }
.gh-add { color: var(--success); }
.gh-del { color: var(--danger); }
.gh-list { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.gh-body, .gh-comments { display: grid; gap: 6px; }
.gh-prose { overflow-wrap: anywhere; }
.gh-prose img { max-width: 100%; height: auto; }
.gh-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gh-comment { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); }
.gh-comment-head { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) {
  .ghb-figures { grid-template-columns: repeat(2, 1fr); }
  .ghb-boards { grid-template-columns: 1fr; }
}

.settle { position: relative; display: inline-flex; }
.settle-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; display: grid; gap: 2px; min-width: 210px; padding: 6px;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); animation: rise 160ms ease-out;
}
.settle-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--on-surface); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.settle-item:hover, .settle-item:focus-visible { background: var(--surface-muted); }
.settle-hint { padding: 4px 10px 2px; max-width: 240px; }
.settle-menu.is-left { left: 0; right: auto; }
/* a table row shows its main button; copy, ask and unfold appear when the row is pointed at or focused.
   Without a pointer that hovers (a phone) they stay in view */
@media (hover: hover) {
  .tbl tr:not(:hover):not(:focus-within) .act-quiet { visibility: hidden; }
}
/* a card or row that opens its detail on a click anywhere but its own controls */
.card-opens { cursor: pointer; }
.card-opens:hover { border-color: var(--border-strong); }
.card-opens:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.info-detail-full { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.send-btns { display: flex; flex-direction: column; gap: 6px; }
.chat-hint { margin: 6px 0 0; }
/* the chat's one input: where Enter goes, and once handed on, how that went (views/chat.js ChatFoot) */
.route-line { margin: 6px 0 0; }
.route-chip { cursor: pointer; }
.route-chip.is-tab { font-weight: 600; }
.handoff-status { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ptab-more { display: inline-flex; }
.more-menu { position: fixed; right: auto; min-width: 220px; z-index: 70; }
.more-menu .settle-item { justify-content: space-between; }
.more-menu .settle-item.is-on { font-weight: 600; background: var(--accent-subtle); }
.status-quiet summary { cursor: pointer; padding: 6px 0; font-size: var(--text-sm); border-top: 1px solid var(--border); }

.tabview {
  width: min(980px, calc(100vw - 32px)); height: min(86vh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0; overflow: hidden;
}
.tabview-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.tabview-title { margin: 0; }
.tabview-live { margin-left: auto; }
.tabview-body {
  overflow-y: auto; padding: 14px 18px; background: var(--surface); font-family: var(--font-mono);
  font-size: var(--text-code); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tl { min-height: 1.5em; }
.tl-gap { min-height: 0.75em; }
.tl-user { color: var(--ink); font-weight: 600; background: var(--accent-subtle); border-radius: var(--radius-sm); padding: 0 6px; margin: 2px -6px; }
.tl-claude { color: var(--on-surface); }
.tl-tool, .tl-frame { color: var(--on-surface-muted); }
.tabview-off { display: grid; gap: 8px; padding: 16px; align-content: start; }
.tabview .ask-fallback { margin: 8px 16px 0; }
.quick-convs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.quick-conv { cursor: pointer; white-space: nowrap; border: 1px solid var(--border); background: var(--surface-raised); font: inherit; font-size: var(--text-label); }
.quick-conv.is-on { border-color: var(--secondary); background: var(--accent-subtle); }
.quick-body { font-family: var(--font-ui); font-size: var(--text-body); white-space: normal; display: grid; gap: 16px; align-content: start; }
.quick-empty { padding: 24px 8px; max-width: 60ch; }
.qturn { display: grid; gap: 8px; }
.qq {
  justify-self: end; max-width: 80%; padding: 8px 12px; border-radius: var(--radius-lg); background: var(--accent-subtle);
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.qa { max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.qmeta { margin-top: -4px; }
.qremind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.qremind-text { font-weight: 600; }
.quick-total { margin-left: auto; }
.qcaret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: var(--secondary); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { opacity: 0; } }
/* the Chat tab: kept chats on the left, the open one on the right */
.chatpage .page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.chat-list { display: grid; gap: 2px; padding: 8px; max-height: calc(100dvh - 220px); overflow-y: auto; }
.chat-item { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.chat-item:hover { background: var(--surface-raised); }
.chat-item.is-on { border-color: var(--secondary); background: var(--accent-subtle); }
.chat-item-q { overflow-wrap: anywhere; }
.chat-new { color: var(--secondary); font-weight: 600; }
.chat-none { padding: 8px 10px; }
.chat-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: calc(100dvh - 220px); min-height: 360px; padding: 0; }
.chat-main .quick-body { overflow-y: auto; padding: 16px; }

/* the chat as cmux (chat_layout: workspaces): the sidebar of workspaces, tabs, Bridges, agents; the pane on the right */
.rooms-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rooms-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px; max-height: calc(100dvh - 180px); overflow-y: auto; align-content: start; }
.rooms-side > .room-item { padding-left: 12px; }
.room-group { margin: 12px 10px 4px; }
/* the workspaces heading with the order toggle (terminal order or the most urgent first) */
/* it needs about 374 px and the sidebar gives 268 to 326: the label takes its own line when the buttons do
   not fit beside it, and the buttons wrap, never cut */
.room-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 4px 4px 10px; }
.room-group-head > .room-group { margin: 0; flex: 1 1 auto; }
/* the order of the tabs, three ways, on top of the sidebar: the choice wraps inside the narrow sidebar
   rather than being cut */
.room-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 10px 4px; }
.room-order > .seg { max-width: 100%; }
/* by status: each group under its status word with its count, Next on top */
.room-status > .room-group { display: flex; align-items: center; gap: 6px; }
/* what runs in a tab or a workspace: subagents and workflows, each with its icon */
.room-load { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: 400;
  color: var(--on-surface-muted); }
.room-load-n { display: inline-flex; align-items: center; gap: 2px; }
.room-ws { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1px; padding-left: 6px; border-left: 3px solid var(--ws-color, var(--border)); margin: 4px 0 6px; }
.room-item { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; border: 1px solid transparent;
  border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; width: 100%; overflow: hidden; }
.room-item:hover { background: var(--surface-raised); }
.room-item.is-on { border-color: var(--secondary); background: var(--accent-subtle); }
.room-ws-head { flex-wrap: wrap; font-weight: 600; }
.room-ws-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-pin { color: var(--on-surface-muted); }
.room-tab, .room-chat { padding-left: 16px; }
.room-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-meta { flex: none; }
/* a new name typed in place of a tab's or a workspace's row (views/rooms.js RenameField) */
.room-rename { display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-width: 0; }
.room-rename-input { flex: 1 1 auto; }
/* a quick chat leaves the list by the × beside its row (into the archive); it shows on hover, always on touch */
.room-chat-row { display: flex; align-items: center; min-width: 0; }
.room-x { flex: none; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-md); background: none;
  color: var(--on-surface-muted); font: inherit; cursor: pointer; opacity: 0; }
.room-chat-row:hover .room-x, .room-x:focus-visible { opacity: 1; }
.room-x:hover { color: var(--ink); background: var(--surface-raised); }
@media (hover: none) { .room-x { opacity: 1; } }
.room-glyph { display: inline-flex; width: 12px; justify-content: center; color: var(--on-surface-muted); flex: none; }
.room-badge { flex: none; min-width: 20px; padding: 0 6px; border-radius: var(--radius-full); border: 1px solid var(--secondary);
  color: var(--secondary); font-size: var(--text-label); text-align: center; }
.room-bridge { font-weight: 400; }
.room-more { justify-self: start; margin: 2px 0 4px 16px; }
.rooms-main { height: calc(100dvh - 180px); grid-template-rows: auto minmax(0, 1fr) auto; }
.rooms-main.rooms-agent { display: block; }
.rooms-main > .tabview-body { overflow-y: auto; padding: 12px 16px; }
.room-ws-pane { border-top: 3px solid var(--ws-color, var(--border)); }
/* what a waiting tab asks, and the answers to it (views/reply.js) */
.reply-group { display: grid; gap: 6px; margin: 0 0 8px; }
.reply-group > .room-group { margin-bottom: 0; }
.reply-row { display: grid; gap: 4px; min-width: 0; padding: 6px 8px; margin: 0 4px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-raised); }
.reply-row.is-left { opacity: 0.55; }
/* the whole row opens its tab (a control in it does its own work) */
.reply-row.is-pickable { cursor: pointer; }
.reply-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: none; background: none;
  color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.reply-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-ask { margin: 0; font-size: 12.5px; white-space: pre-line; overflow-wrap: anywhere; }
.reply-done, .reply-draft, .reply-note { margin: 0; }
.reply-note { color: var(--danger); }
.reply-btns { flex-wrap: wrap; }
.reply-field { display: flex; gap: 6px; align-items: flex-end; }
.reply-field .input { flex: 1 1 auto; min-width: 0; resize: vertical; }
.reply-pane { display: grid; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
/* a waiting tab's pane: the reply block gets a row of its own above the terminal and scrolls inside it,
   so a long reading never runs over the terminal; with the reading only, it takes the whole pane */
.rooms-main.has-reply { grid-template-rows: auto auto minmax(0, 1fr); }
.rooms-main.has-reply > .reply-pane { max-height: 48vh; overflow-y: auto; }
.rooms-main.is-guide-only { grid-template-rows: auto minmax(0, 1fr); }
.rooms-main.is-guide-only > .reply-pane { max-height: none; }
/* the walk bar at the foot of an open tab (TabWalk): one more row, never over the terminal */
.rooms-main.has-reply.has-walk { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.rooms-main.is-guide-only.has-walk { grid-template-rows: auto minmax(0, 1fr) auto; }
/* it stays in view: at the pane's foot, or at the screen's edge when the page scrolls (narrow), as in the lists */
.rooms-main > .next-up { border-radius: 0; border-width: 1px 0 0; }
.room-list { display: grid; gap: 6px; padding-left: 18px; }
.rooms-agent { overflow: hidden; }
.rooms-agent .agentspage.is-embedded, .rooms-agent .agents-grid { height: 100%; }
.rooms-agent .chat-main { height: 100%; border: 0; }
.thinking { display: inline-flex; align-items: center; gap: 10px; }
.thinking-dots { display: inline-flex; gap: 4px; }
.thinking-dots span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--secondary); display: block; will-change: transform; }
.tabview-foot { display: grid; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.tabview-send { align-items: flex-end; }
.tabview-send textarea { flex: 1 1 auto; resize: vertical; min-height: 44px; font-family: var(--font-mono); }

/* drawn sections: filter bar, tiles in groups, mosaic */
.rview { display: grid; gap: 14px; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fbar-q { flex: 0 1 220px; min-width: 140px; height: 32px; }
.fbar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-raised); color: var(--on-surface); font: inherit;
  font-size: var(--text-label); cursor: pointer; transition: background-color var(--motion), border-color var(--motion);
}
.fchip:hover { border-color: var(--border-strong); }
.fchip.is-on { border-color: var(--secondary); background: var(--accent-subtle); }
.fchip:disabled { cursor: default; color: var(--on-surface-faint); }
.fdot, .rdot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex: none; }
.fdot-ok, .rdot-ok { background: var(--success); }
.fdot-warn, .rdot-warn { background: var(--warning); }
.fdot-bad { background: var(--danger); }
.rdot-bad { background: var(--danger); outline: 1.5px solid var(--danger); outline-offset: 2px; }
.fdot-dim, .rdot-dim { background: var(--border-strong); }
.rgroup { display: grid; gap: 10px; }
.rgroup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rgroup-head.is-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px;
  background: var(--surface-raised); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-xl);
}
.rgroup-main { display: grid; gap: 4px; min-width: 0; }
.rgroup-title { margin: 0; font-size: var(--text-h4); font-weight: 600; }
.rgroup-count { display: flex; flex-wrap: wrap; gap: 10px; }
.rgroup-n { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-label); color: var(--on-surface-muted); }
.rtiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rtile {
  display: grid; gap: 6px; align-content: start; padding: 12px 14px; min-width: 0;
  background: var(--surface-raised); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-lg);
  transition: border-color var(--motion);
}
.rview .rt-ok { border-left-color: var(--success); }
.rview .rt-warn { border-left-color: var(--warning); }
.rview .rt-bad { border-left-color: var(--danger); }
.rview .rt-dim { border-left-color: var(--border-strong); }
.rt-dim .rtile-title { color: var(--on-surface-muted); }
.rtile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.rtile-icon { display: inline-flex; color: var(--secondary); }
.rt-dim .rtile-icon { color: var(--on-surface-faint); }
.rtile-title { margin: 0; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtile-detail { margin: 0; font-size: var(--text-label); color: var(--on-surface-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rtile-foot { display: flex; gap: 4px; margin-top: 2px; }
.rtile-foot:empty { display: none; }
.mosaic-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 360px); align-items: center; gap: 16px; padding: 14px 16px;
  background: var(--surface-raised); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-xl);
}
.mosaic { display: grid; grid-template-columns: repeat(auto-fill, 22px); gap: 5px; }
.mcell {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; position: relative;
  animation: mcell-in 420ms ease-out both; animation-delay: calc(var(--i, 0) * 12ms);
  transition: transform var(--motion);
}
.mcell:hover, .mcell.is-picked { transform: scale(1.25); z-index: 1; }
.mcell.is-picked { outline: 2px solid var(--on-surface); outline-offset: 2px; }
.mcell-sm { width: 12px; height: 12px; border-radius: 3px; cursor: default; animation: none; }
.mc-ok { background: var(--success); }
.mc-warn { background: repeating-linear-gradient(135deg, var(--warning) 0 4px, var(--surface-raised) 4px 6px); }
.mc-bad { background: var(--danger); }
.mc-bad::after { content: ""; position: absolute; inset: 7px; border-radius: var(--radius-full); background: var(--surface-raised); }
.mcell-sm.mc-bad::after { inset: 3px; }
.mc-dim { background: repeating-linear-gradient(45deg, var(--border-strong) 0 2px, var(--surface-muted) 2px 5px); }
@keyframes mcell-in { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mosaic-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.mosaic-sub { margin: 4px 0 0; }

/* workers tab */
.wfilters { display: grid; gap: 10px; }
.wfacet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wfacet .label-caps { min-width: 72px; }
.wgroup { display: grid; gap: 10px; }
.wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wrow { border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-lg); background: var(--surface-raised); }
.wrow-main {
  width: 100%; display: grid; grid-template-columns: auto minmax(180px, 2fr) minmax(170px, 1.4fr) minmax(120px, 1fr) auto;
  align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.wrow-main:hover { background: var(--surface-muted); }
.wrow-name { display: grid; gap: 2px; min-width: 0; }
.wrow-name strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow-when { display: grid; gap: 4px; min-width: 0; }
.dayaxis { position: relative; display: block; height: 14px; }
.dayaxis-line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--border); border-radius: 1px; }
.dayaxis-q { position: absolute; top: 3px; width: 1px; height: 8px; left: calc(var(--p) * 100%); background: var(--border-strong); }
.dayaxis-m { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; left: calc(var(--p) * 100%);
  border-radius: var(--radius-full); background: var(--secondary); animation: mcell-in 360ms ease-out both; }
.dayaxis-t { position: absolute; top: 0; left: calc(var(--p) * 100%); margin-left: -5px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--success); }
.dayaxis-now { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; left: calc(var(--p) * 100%); background: var(--danger); }
.dayaxis-note { font-size: var(--text-label); color: var(--on-surface-muted); }
.strip { display: inline-flex; flex-wrap: wrap; gap: 3px; font-size: 13px; line-height: 1; }
.strip-m { width: 14px; text-align: center; }
.sm-ok { color: var(--success); }
.sm-bad { color: var(--danger); font-weight: 700; }
.sm-warn { color: var(--warning); }
.sm-dim { color: var(--on-surface-faint); }
.wrow-detail { display: grid; gap: 10px; padding: 4px 14px 14px 34px; animation: rise 200ms ease-out; }
.wmeta { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin: 0; }
.wmeta div { display: grid; gap: 1px; min-width: 0; }
.wmeta dt { font-size: var(--text-mono-label); color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.wmeta dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.wweek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wday { font-size: var(--text-label); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--on-surface-faint); }
.wday.is-on { border-color: var(--secondary); color: var(--ink); background: var(--accent-subtle); font-weight: 600; }
.wfind { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wfind-hint { margin: 2px 0 0 16px; }

.flow-wrap { display: grid; gap: 10px; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.flow-st {
  position: relative; flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 2px; padding: 10px 12px;
  background: var(--surface-raised); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg);
}
.flow-st.is-end { border-color: var(--secondary); }
.flow-st-label { font-size: var(--text-label); color: var(--on-surface-muted); overflow-wrap: anywhere; }
.flow-num { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--counter); }
.flow-glow {
  position: absolute; inset: -1.5px; border-radius: inherit; background: var(--accent-subtle);
  border: 1.5px solid var(--accent); pointer-events: none; z-index: 0;
}
.flow-st > :not(.flow-glow) { position: relative; z-index: 1; }
.flow-rail { position: relative; flex: 0 0 56px; min-height: 40px; align-self: center; }
.flow-line { position: absolute; left: 4px; right: 8px; top: 50%; height: 0; border-top: 2px solid var(--border-strong); }
.flow-rail.is-exception .flow-line { border-top-style: dashed; }
.flow-arrow {
  position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg);
}
.flow-dot { position: absolute; left: 4px; right: 12px; top: 50%; height: 0; transform: translateX(calc(var(--u, 0) * 100%)); }
.flow-dot::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: var(--radius-full); background: var(--accent);
}
.flow-rail-label {
  position: absolute; left: 0; right: 0; top: calc(50% + 6px); text-align: center;
  font-size: var(--text-mono-label); color: var(--on-surface-muted); line-height: 1.2;
}
.flow-progress { display: grid; gap: 4px; }
.flow-track { display: block; height: 4px; background: var(--surface-muted); border-radius: var(--radius-full); overflow: hidden; }
.flow-fill { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; will-change: transform; }

.vbar { position: relative; height: 10px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.vbar-seg { position: absolute; inset: 0; transform-origin: 0 50%; cursor: pointer; will-change: transform; }
.vs-close { background: var(--danger); }
.vs-stale { background: var(--warning); }
.vs-unclear { background: repeating-linear-gradient(135deg, var(--warning) 0 3px, var(--surface-raised) 3px 5px); }
.vs-waiting { background: var(--info); }
.vs-continue { background: var(--success); }

/* task check (ReviewStrip, ReviewBlock, ReviewPage) */
.review-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.review-top { display: grid; gap: 10px; }
.review-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.review-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; position: sticky; top: 0; z-index: 2; }
.review-rec { display: grid; gap: 6px; margin-bottom: 8px; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.review-reason { margin: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tbl-review .c-pick { width: 28px; }
.tbl-review .c-quiet { white-space: nowrap; }
.tbl-review .c-verdict { white-space: nowrap; }
.tbl-review .c-verdict .chip { margin-left: 4px; }
.tbl-review .c-task { min-width: 220px; }
.tbl-review .c-task .row-meta { display: flex; gap: 6px; margin-top: 2px; }
.conf { margin-left: 6px; letter-spacing: 1px; }
.tbl-review .c-reason { min-width: 220px; }
.tbl-review tr.is-kept td { opacity: 0.75; }
.help-dialog { width: min(760px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.help-tabs { align-self: flex-start; margin-bottom: 12px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; flex-shrink: 0; }
.help-tabs .seg-btn { white-space: nowrap; }
.help-pane { overflow-y: auto; height: min(52vh, 460px); padding-right: 4px; }
.help-pane > p { margin: 0 0 10px; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0 0 14px; }
.help-cards > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface); }
.help-cards dt { font-weight: 600; font-size: var(--text-sm); }
.help-cards dd { margin: 2px 0 0; color: var(--on-surface-muted); font-size: var(--text-sm); }
.help-sub { margin: 6px 0 8px; }
.keys > div, .help-text > div {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 0;
  border-top: 1px solid var(--border); font-size: var(--text-sm);
}
.help-text > div { grid-template-columns: 1fr; gap: 2px; }
.help-text dt { font-weight: 600; }
.help-text dd { color: var(--on-surface-muted); }
.notes { display: flex; flex-direction: column; }
.note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }

.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 10px 10px 10px 12px; pointer-events: auto;
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float); font-size: var(--text-sm); animation: rise 200ms ease-out;
}
.toast-text { overflow-wrap: anywhere; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.auth { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; }
.code-block {
  margin: 0; padding: 10px 12px; background: var(--surface-muted); border-radius: var(--radius-md);
  font-size: 12.5px; overflow-x: auto;
}

/* ---------------------------------------------------------------- widths */

/* ---------------------------------------------------------------- page overview (Betrieb) */

.oboard { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 16px; }
.otile {
  width: 100%; height: 100%; display: grid; gap: 4px; align-content: start; text-align: left; cursor: pointer;
  padding: 12px 14px; background: var(--surface-raised); border: 1px solid var(--border); border-top: 3px solid var(--border-strong);
  border-radius: var(--radius-lg); transition: border-color var(--motion), background-color var(--motion);
}
.otile.tk-danger, .otile.tk-warning, .otile.tk-success { border-top-color: var(--tk); }
.otile:hover { border-color: var(--border-strong); }
.otile.tk-danger:hover, .otile.tk-warning:hover, .otile.tk-success:hover { border-top-color: var(--tk); }
.otile-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.otile-title { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otile-big { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.otile.tk-danger .otile-big, .otile.tk-warning .otile-big { color: var(--tk); }
.otile-sub { font-size: var(--text-sm); color: var(--on-surface-muted); }
.otile-note { font-size: var(--text-label); color: var(--on-surface); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.usage { scroll-margin-top: 12px; }
.noise { scroll-margin-top: 12px; }
.noise-sub { margin-top: 12px; }
.psec { scroll-margin-top: 12px; }
.ubars { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 8px; align-items: end; margin: 8px 0 4px; }
.ubar {
  display: grid; grid-template-rows: auto 160px auto; gap: 4px; justify-items: center; padding: 6px 4px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--motion), background-color var(--motion);
}
.ubar:hover { background: var(--surface-muted); }
.ubar.is-on { border-color: var(--border-strong); background: var(--surface-muted); }
.ubar-n { font-size: var(--text-mono-label); color: var(--on-surface-muted); white-space: nowrap; }
.ubar-col { width: min(44px, 100%); height: 160px; display: flex; flex-direction: column-reverse; gap: 1px;
  background: var(--surface-muted); border-radius: var(--radius-sm); overflow: hidden; }
.ubar.is-on .ubar-col { background: var(--surface-raised); }
.ubar-part { display: block; width: 100%; background: var(--us); min-height: 2px; }
.ubar-day { font-size: var(--text-label); font-weight: 600; }
.ulegend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--text-sm); margin: 6px 0 12px; }
.ulegend li { display: inline-flex; align-items: center; gap: 6px; }
.ukey { width: 10px; height: 10px; border-radius: 2px; background: var(--us); }
.uday { display: grid; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.uday-cols { display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.uday-title { font-size: var(--text-sm); font-weight: 600; }
.ulist { display: grid; gap: 2px; font-size: var(--text-sm); }
.ulist li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.ulist li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otile-bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-top: 2px; }
.otile-bar { flex: 1; min-height: 2px; background: var(--secondary); border-radius: 1px; }
.otile-bar.is-provisional { opacity: 0.5; }
/* the series of a stacked chart: the three largest and the rest (DESIGN.md: at most four). The palettes
   reuse tokens (secondary is also on-surface-faint, accent-line is also the dark track), so the series are
   picked to differ in every mode: the accent, the secondary, a pale accent, and the rest hatched, so it can
   never look like a named series (scripts/tests/test_cockpit_costs_contract.py measures all four) */
.sr-0 { --us: var(--accent); }
.sr-1 { --us: color-mix(in srgb, var(--accent) 50%, var(--on-surface)); }   /* not --secondary: a palette may set it close to the accent */
.sr-2 { --us: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.sr-3 { --us: repeating-linear-gradient(135deg, var(--on-surface-muted) 0 1.5px, transparent 1.5px 4px); }
.ubars.is-dense { gap: 1px; }
.ubars.is-dense .ubar { grid-template-rows: 160px auto; padding: 4px 0; }
.ubars.is-dense .ubar-col { width: 100%; }
.ubars.is-dense .ubar-day { font-size: 10px; font-weight: 500; }
.ubar.is-provisional .ubar-part { opacity: 0.5; }
.ubar.is-provisional .ubar-part:last-child { border-top: 1px dashed var(--on-surface); }
.ukey-provisional { background: none; border: 1px dashed var(--on-surface-muted); }
.chip-pick { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.usage > .chip-pick { margin: 4px 0; }
.costs { scroll-margin-top: 12px; }
.costs-sub { margin-top: 14px; }
.costs-total { margin-top: 10px; font-size: var(--text-sm); font-weight: 600; }
.clist, .blist { display: grid; }
.crow {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto minmax(120px, 1fr); gap: 4px 18px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
}
.crow.is-failed { color: var(--on-surface-muted); }
.crow-why { grid-column: 2 / -1; display: grid; gap: 4px; }
.crow-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crow-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow-fig { display: grid; justify-items: end; gap: 2px; }
.crow-budget { display: grid; gap: 3px; }
.crow-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crow-cmd code { padding: 2px 6px; background: var(--surface-muted); border-radius: var(--radius-sm); color: var(--ink); }
.cbudget { position: relative; display: block; height: 8px; margin: 3px 0; background: var(--surface-muted); border-radius: var(--radius-sm); }
.cbudget-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tk); border-radius: inherit; }
.cbudget-fc { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--tk); }
.cbudget-cap { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--ink); }
.brow {
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) 60px; gap: 4px 18px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
}
.brow.is-failed { grid-template-columns: 1fr; }
.brow-models { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { display: block; overflow: visible; }
.spark polyline { fill: none; stroke: var(--secondary); stroke-width: 1.5; stroke-linejoin: round; }
@media (max-width: 640px) {
  .oboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .otile { padding: 10px; }
  .otile-big { font-size: 22px; }
  .ubars { gap: 2px; }
  .ubar { grid-template-rows: auto 120px auto; padding: 4px 0; }
  .ubar-col { height: 120px; }
  .ubar-n { font-size: 9px; }
  .ubars.is-dense .ubar { grid-template-rows: 120px auto; }
  .ubars.is-dense .ubar-day { font-size: 8px; }
  .crow { grid-template-columns: minmax(0, 1fr) auto; }
  .crow-budget, .crow-why { grid-column: 1 / -1; }
  .brow { grid-template-columns: minmax(0, 1fr) auto 60px; }
  .brow-models { display: none; }
}

@media (max-width: 1279px) {
  .hdr-headline { display: none; }
  /* icons only for reload and history, so the header fits beside the command box */
  .hide-narrow { display: none; }
  /* the as-of time moves into the day column (.day-counts), the header keeps its buttons in view */
  .hdr .hdr-asof { display: none; }
  .hdr-right { min-width: 0; }
  .hdr-right { flex: 1 1 auto; justify-content: flex-end; }
}

@media (max-width: 899px) {
  .chat-grid { grid-template-columns: 1fr; }
  .rooms-grid { grid-template-columns: 1fr; }
  .rooms-side { max-height: 260px; }
  .rooms-main { height: auto; min-height: 420px; }
  .chat-list { max-height: 200px; }
  .hdr { gap: 8px; padding: 0 12px; }
  .hdr-id .eyebrow { display: none; }
  .hdr-title { font-size: 15px; }
  /* the demo badge goes under the title where the eyebrow was, so the buttons keep their room */
  .hdr-name { flex-direction: column; align-items: flex-start; gap: 0; }
  .hdr-demo { font-size: 10px; line-height: 14px; padding: 0 5px; }
  .hdr-demo-long { display: none; }
  .hdr-demo-short { display: inline; }
  .hdr-right { gap: 2px; }
  /* relay state and warnings get their own line under the header (components.js MobileSwitch) */
  .hide-narrow, .hdr-status > span:not(.spinner) { display: none; }
  .cmd-input { width: 64px; }
  .cmd-kbd { display: none; }
  .cmd-input { padding-right: 8px; }
  .btn-sm { min-height: 34px; padding: 0 9px; }
  .pagebar-tabs { padding: 0 8px; }
  .panel-pad { padding: 14px 14px; }
  .main.layout-narrow .col-page, .main.layout-narrow .col-detail { gap: 12px; }
  .tabgrid { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 22px 16px minmax(0, 1fr); row-gap: 6px; }
  .row-acts { grid-column: 3; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .flow { flex-direction: column; }
  .wrow-main { grid-template-columns: auto minmax(0, 1fr); }
  .wrow-when, .wrow-strip, .wrow-state { grid-column: 2; }
  .wrow-detail { padding-left: 14px; }
  .mosaic-head { grid-template-columns: 1fr; }
  .rtiles { grid-template-columns: 1fr; }
  .tabview { width: 100vw; height: 100dvh; border-radius: 0; }
  /* a shade at the right edge says the bar scrolls; a mask here would hide the More menu inside it as well */
  .pagebar { box-shadow: inset -18px 0 14px -14px var(--border-strong); }
  .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gtile { padding: 10px; }
  .gtile-foot { font-size: var(--text-label); }
  .flow-rail { flex: 0 0 34px; min-height: 34px; align-self: stretch; }
  .flow-line { left: 24px; right: auto; top: 2px; bottom: 8px; height: auto; border-top: 0; border-left: 2px solid var(--border-strong); }
  .flow-rail.is-exception .flow-line { border-left-style: dashed; }
  .flow-arrow { left: 21px; right: auto; top: auto; bottom: 2px; margin-top: 0; transform: rotate(135deg); }
  .flow-dot { left: 25px; right: auto; top: 2px; bottom: 12px; width: 0; height: auto; transform: translateY(calc(var(--u, 0) * 100%)); }
  .flow-dot::before { left: -4px; top: -4px; }
  .flow-rail-label { left: 40px; right: auto; top: 50%; transform: translateY(-50%); text-align: left; }
  /* page tables stack per item (when, item, then its buttons), so the actions stay in view */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl td { display: block; width: 100%; }
  .tbl tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .tbl td { border: 0; padding: 2px 0; }
  .tbl .c-acts { width: 100%; white-space: normal; text-align: left; }
  .tbl .c-acts .btn-row { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .tbl-review .c-pick { width: auto; }
  .tbl-review .c-reason, .tbl-review .c-task { min-width: 0; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .spinner, .skel-line { animation: none !important; }
}

/* an account's services as a filterable list */
.fbar-facet { align-items: center; }
.fbar-key { font-size: var(--text-label); color: var(--on-surface-muted); margin-right: 2px; }
.rgroup-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rgroup-acts { align-self: start; justify-content: flex-end; }
.rdrawer {
  width: min(1100px, calc(100vw - 32px)); height: min(88vh, 940px); display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0; overflow: hidden;
}
.rdrawer-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); border-left: 4px solid var(--border-strong);
}
.rdrawer-head.rt-ok { border-left-color: var(--success); }
.rdrawer-head.rt-warn { border-left-color: var(--warning); }
.rdrawer-head.rt-bad { border-left-color: var(--danger); }
.rdrawer-title { margin: 0; }
.rdrawer-filter { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.rdrawer-body { overflow: auto; padding: 0 8px; }
.rdrawer-tbl { width: 100%; }
.rdrawer-tbl thead th { position: sticky; top: 0; background: var(--surface-raised); z-index: 1; }
.rdrawer-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rdrawer-name .res-icon { color: var(--secondary); flex: none; }
.rdrawer-tag { font-size: var(--text-label); }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.linkish:hover, .linkish:focus-visible { text-decoration: underline; }
.rdrawer-foot { padding: 8px 16px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .rdrawer-head { grid-template-columns: auto minmax(0, 1fr); }
  .rdrawer-head .btn-row { grid-column: 1 / -1; }
}

/* rows under their group: today's log under its task */
.gview { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.gview-group {
  display: grid; gap: 6px; padding: 12px 14px; background: var(--surface-raised);
  border: 1px solid var(--border); border-left: 4px solid var(--secondary); border-radius: var(--radius-lg);
}
.gview-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gview-title { margin: 0; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gview-count { color: var(--counter); font-weight: 600; }
.gview-head .muted { margin-left: auto; white-space: nowrap; }
.gview-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gview-row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: var(--text-label); }
.gview-row.is-dim { color: var(--on-surface-muted); }
.gview-when { color: var(--on-surface-muted); }
.gview-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* a row or tile with an open menu: its appear animation makes it a stacking context of its own,
   so it has to come forward, or the next tile paints over the menu */
.row-in:has(.settle-menu), .rtile:has(.settle-menu), .rgroup-head:has(.settle-menu) { position: relative; z-index: 30; }
/* the row panel stands fixed in the window; a transform on an ancestor would pin it to that ancestor instead,
   so a card does not lift while its panel is open */

/* the chat window: head, the strip of chats, the thread that grows, the send box; the grid of
   .tabview has three rows and would hand the growing one to the strip */
.quickchat { display: flex; flex-direction: column; }
.quickchat > .quick-body { flex: 1 1 auto; min-height: 0; }
.quickchat > .quick-convs { flex: none; align-items: center; }
.quick-conv { flex: none; max-width: 280px; overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; border-radius: var(--radius-full); }

/* A2A agents: the agents as cards on the left, the conversation with one on the right */
.agents-grid { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.agents-list { display: grid; gap: 8px; max-height: calc(100dvh - 200px); overflow-y: auto; }
.agent-card {
  display: grid; gap: 8px; padding: 12px 14px; color: var(--on-surface);
  background: var(--surface-raised); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius-lg);
}
.agent-card.rt-ok { border-left-color: var(--success); }
.agent-card.rt-warn { border-left-color: var(--warning); }
.agent-card.is-on { border-color: var(--secondary); background: var(--accent-subtle); }
.agent-pick { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.agent-card-profile { justify-self: start; }
.agent-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.agent-id { margin-left: auto; flex: none; }
.agent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-sum { font-size: var(--text-label); color: var(--on-surface-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.agent-mode { font-size: 11px; }
.agentspage .chat-main { display: flex; flex-direction: column; }
.agentspage .chat-main > .quick-body { flex: 1 1 auto; min-height: 0; }
.agent-convs { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--border); flex: none; }
.agent-modes { align-items: center; }
@media (max-width: 760px) { .agents-grid { grid-template-columns: 1fr; } .agents-list { max-height: 260px; } }

/* an agent's card as a profile; a card in the list says whether its last call went through */
.agent-card.rt-bad { border-left-color: var(--danger); }
.agent-card.rt-dim { border-left-color: var(--border-strong); }
.agent-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.agent-reach.is-bad { color: var(--danger); font-weight: 600; }
.agent-reach.is-warn { color: var(--warning); font-weight: 600; }
.agent-reach.is-dim { color: var(--on-surface-muted); }
.agent-card .agent-id { margin-left: 0; }
.agent-profile {
  display: grid; gap: 12px; padding: 14px 16px; margin-bottom: 14px; background: var(--surface-raised);
  border: 1px solid var(--border); border-left: 4px solid var(--secondary); border-radius: var(--radius-lg);
}
.agent-profile-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.agent-profile-name { margin: 0; font-size: var(--text-h4); font-weight: 600; }
.agent-profile-desc { margin: 4px 0 0; color: var(--on-surface-muted); max-width: 72ch; }
.agent-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0; }
.agent-facts div { display: grid; gap: 2px; min-width: 0; }
.agent-facts dt { font-size: var(--text-label); color: var(--on-surface-muted); }
.agent-facts dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.agent-skill-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agent-skill { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; display: grid; gap: 4px; }
.agent-skill.is-open { border-color: var(--secondary); background: var(--accent-subtle); }
.agent-skill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.agent-skill-chev { margin-left: auto; color: var(--on-surface-muted); }
.agent-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.agent-tags .chip { font-size: 11px; }
.agent-skill-desc { margin: 0; font-size: var(--text-sm); color: var(--on-surface-muted); }
.agent-skill-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.agent-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.agent-bar-who { display: grid; min-width: 0; flex: 1 1 12em; }
.agent-bar-name { font-size: var(--text-h4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-bar-card { margin-left: auto; }
.agent-trouble { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--warning); border-radius: var(--radius-md); }
.agent-trouble.is-danger { border-color: var(--danger); }
.agent-trouble-hint { margin: 0; font-size: var(--text-sm); max-width: 72ch; }
.agent-trouble-raw summary { cursor: pointer; }
.agent-trouble-raw code { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.agent-held { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--warning); border-radius: var(--radius-md); }
.agent-held p { margin: 0; }

/* the history: what was closed, by day, each with its way back */
.hist-day { display: grid; gap: 6px; margin-top: 14px; }
.hist-day h3 { margin: 0; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist-item { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); background: var(--surface-raised); }
.hist-item.is-undone { border-left-color: var(--success); opacity: 0.75; }
.hist-main { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.hist-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-label); }
.hist-what .chip { font-size: 11px; }
.hist-did { font-weight: 600; }
.hist-declined, .hist-not_doing, .hist-dropped { color: var(--on-surface-muted); }
.hist-title { font-size: var(--text-sm); overflow-wrap: anywhere; }

/* triage on the task and inbox pages: what a row is, whether it can go, who does it (scripts/web/triage.js) */
.tri-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tri-run { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* a work page in the order of Jev: the strip, the rank of a row and its label */
.jorder .tri-run { flex-wrap: wrap; justify-content: flex-end; }
.jerr { flex-basis: 100%; margin: 0; }
.jrank {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  margin-right: 6px; border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 700; cursor: help; vertical-align: middle;
}
.jlabel { margin-right: 6px; vertical-align: middle; }
@media (max-width: 640px) { .jleft { display: block; } .jsep { display: none; } .jorder .tri-run { margin-left: 0; justify-content: flex-start; } }
.tri { display: grid; gap: 4px; margin-bottom: 4px; }
.tri-gist { font-weight: 600; color: var(--on-surface); }
.tri-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tri-mark {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.tri-close { color: var(--success); border-color: var(--success); }
.tri-ai { color: var(--info); border-color: var(--info); }
.tri-either { color: var(--on-surface-muted); border-color: var(--border-strong); }
.tri-model { color: var(--on-surface-muted); border-style: dashed; }
.tri-you { color: var(--warning); border-color: var(--warning); white-space: normal; }
.tri-unclear { color: var(--on-surface-muted); border-color: var(--border); border-style: dashed; }
.tri-dots { display: inline-flex; gap: 2px; }
.tri-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; opacity: 0.22; }
.tri-dots i.on { opacity: 1; }
.has-gist .info-title { font-size: var(--text-label); color: var(--on-surface-muted); }
.has-gist .info-title .btn-link { color: var(--on-surface-muted); }

.settle-list { margin: 0 0 6px; padding: 4px 10px 6px 24px; max-height: 220px; overflow-y: auto; font-size: var(--text-label);
  color: var(--on-surface-muted); border-bottom: 1px solid var(--border); }
.agent-forget { margin-left: auto; }
.agent-forget.is-armed { color: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------------- item drawer (Inbox and Tasks pages) */

.row-opens { cursor: pointer; }
.row-opens:hover td { background: color-mix(in srgb, var(--secondary) 6%, transparent); }
.row-opens:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
.idrawer { width: min(680px, 100vw); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.idrawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 20px 10px; border-bottom: 1px solid var(--border);
}
.idrawer-head-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.idrawer-title { font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--on-surface); overflow-wrap: anywhere; }
.idrawer-actions { flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.idrawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px 24px; }
.idrawer-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.idrawer-sec:last-child { border-bottom: 0; }
.idrawer-sec > .label-caps { display: block; margin-bottom: 8px; }
.idrawer-text, .idrawer-next { font-size: var(--text-sm); color: var(--on-surface); line-height: 1.55; }
.idrawer-text a, .idrawer-next a, .idrawer-note a, .idrawer-origin a, .idrawer .task-sections a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.idrawer-sec > .label-caps code { text-transform: none; letter-spacing: 0; }
.idrawer-facts { margin-bottom: 10px; }
.idrawer-closes { margin-top: 0; }
.idrawer-ids { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; overflow-wrap: anywhere; }
.idrawer-task { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.idrawer-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.idrawer-task-head .label-caps { margin: 0; }
.idrawer-task-title { font-weight: 600; font-size: var(--text-sm); }
.idrawer-tri .tri { margin-bottom: 4px; }
.idrawer .event-list li:first-child, .idrawer .log-rows li:first-child { border-top: 0; }
@media (max-width: 640px) {
  .idrawer-head, .idrawer-actions { padding-left: 16px; padding-right: 16px; }
  .idrawer-body { padding: 4px 16px 24px; }
}

/* ---------------------------------------------------------------- the start page */

.tk-accent { --tk: var(--accent); }

.home { gap: var(--space-xl); max-width: 1320px; width: 100%; margin: 0 auto; padding-bottom: var(--space-2xl); }
.home > * { flex-shrink: 0; }   /* the page scrolls; nothing on it gets squeezed */

.home-hero { padding: var(--space-xl) 0 0; display: flex; flex-direction: column; gap: 12px; }
.home-eyebrow {
  margin: 0; color: var(--secondary); font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.home-title {
  margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4vw, 44px);
  line-height: 1.12; color: var(--ink); overflow-wrap: break-word;
}
.home-lead { margin: 0; max-width: 68ch; color: var(--on-surface-muted); font-size: 17px; line-height: 1.5; }

.home-ask {
  display: flex; align-items: center; gap: 10px; max-width: 720px; margin-top: 8px;
  padding: 6px 6px 6px 16px; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--on-surface-muted);
  transition: border-color var(--motion);
}
.home-ask:focus-within { border-color: var(--border-strong); }
.home-ask-input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--on-surface);
  font: inherit; font-size: var(--text-body); padding: 8px 0; outline: none;
}
.home-ask .btn { border-radius: var(--radius-full); }

.home-signals { display: flex; flex-wrap: wrap; gap: 8px; }
.home-signal {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: inherit; font-size: var(--text-sm);
  border: 1px solid var(--tk); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--on-surface);
  cursor: pointer; transition: background-color var(--motion);
}
.home-signal:hover { background: var(--surface-muted); }

.home-chips {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 0; margin: -10px 0; background: var(--surface);
}
.home-chips::-webkit-scrollbar { display: none; }
.home-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted);
  color: var(--on-surface); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion);
}
.home-chip:hover { border-color: var(--border-strong); }
.home-chip.is-on { background: var(--on-surface); border-color: var(--on-surface); color: var(--surface); }
.home-chip-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--tk); }

.home-shelf { display: flex; flex-direction: column; gap: 14px; }
.home-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-shelf-title { margin: 0; font-size: var(--text-h3); font-weight: 600; color: var(--on-surface); }
.home-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-sm); }

.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.hcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised);
  transition: transform var(--motion), border-color var(--motion);
}
.hcard:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
/* after the hover: an open panel keeps its card still, a lifted card would carry the fixed panel along */
.hcard:has(.row-panel) { transform: none; }

.hcard-thumb {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 104px; padding: 40px 14px 12px; border: 0; text-align: left; cursor: pointer; font: inherit;
  color: var(--on-surface); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--tk) 22%, var(--surface-raised));
}
.hcard-thumb:disabled { cursor: progress; }
.hcard-ws {
  position: absolute; top: 12px; left: 14px; font-size: var(--text-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface);
}
.hcard-screen {
  font-size: 11.5px; line-height: 1.45; color: var(--on-surface-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hcard-badge {
  position: absolute; top: 9px; right: 10px; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--surface-raised); font-size: var(--text-label);
}
.hcard-age {
  position: absolute; bottom: 10px; right: 10px; padding: 1px 6px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--on-surface-muted); font-size: var(--text-mono-label);
}
.hcard.st-needs-you { border-color: var(--warning); }

.hcard-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; flex: 1; }
.hcard-title { margin: 0; font-size: var(--text-body); font-weight: 600; line-height: 1.35; color: var(--on-surface); }
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hcard-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; }

.hcard-row { padding: 14px; gap: 10px; }
.hcard-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hcard-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-full);
  border: 1px solid var(--accent-line); background: var(--accent-subtle); color: var(--counter); font-size: 12px;
}
.hcard-proj {
  padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--text-label); font-weight: 600;
  background: color-mix(in srgb, var(--tk) 18%, var(--surface-raised)); color: var(--on-surface);
}
.hcard-row-main { border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hcard-row-main:hover .hcard-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* the day on Start: a card per block, as tall as its content, and no lift, since a card here is to read, not to click */
.home-shelf:has(#home-day) .home-grid { align-items: start; }
.day-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
.day-card .hcard-body { gap: 8px; }
.day-card-title { margin: 0; color: var(--on-surface-muted); }
.day-card .agenda, .day-card .plain { margin: 0; }
.day-card .row-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.home-shelf.day-more { margin-top: 0; gap: 14px; }
.day-card.day-status { grid-column: span 2; }
@media (max-width: 640px) { .day-card.day-status { grid-column: auto; } }

.home-starts { display: flex; flex-wrap: wrap; gap: 10px; }
.home-start {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font: inherit; font-size: var(--text-sm); font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--on-surface); cursor: pointer;
  transition: border-color var(--motion), background-color var(--motion);
}
.home-start:hover { border-color: var(--border-strong); background: var(--surface-muted); }

@media (max-width: 640px) {
  .home-hero { padding-top: var(--space-md); }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hcard:hover { transform: none; }
}
/* the card's head already names the project and the priority; the meta line keeps the rest */
.hcard-row .row-meta .prio, .hcard-row .row-meta .meta-area { display: none; }

/* the overview of the start page: quotas and counts as tiles, each one a way in */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ktile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-top: 3px solid var(--tk, var(--border)); border-radius: var(--radius-xl);
  background: var(--surface-raised); color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--motion), border-color var(--motion);
}
.ktile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ktile-quota { grid-column: span 2; }
.ktile-big { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1; color: var(--ink); }
.ktile-big small { font-family: var(--font-ui); font-size: 18px; color: var(--on-surface-muted); }
.ktile-label { font-size: var(--text-sm); font-weight: 600; color: var(--on-surface); }
.ktile-quota .ktile-label { color: var(--on-surface-muted); font-weight: 500; }
.ktile-parts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--text-label); color: var(--on-surface-muted); }
.ktile-bar {
  position: relative; display: block; width: 100%; height: 8px; margin: 8px 0 6px; overflow: visible;
  border-radius: var(--radius-full); background: var(--surface-muted);
}
.ktile-fill {
  position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--tk);
  transform-origin: left center; transition: transform var(--motion);
}
.ktile-time { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--on-surface); }
.ktile-line { font-size: var(--text-sm); }
.ktile-sub { font-size: var(--text-label); color: var(--on-surface-muted); }

@media (max-width: 640px) {
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ktile-quota { grid-column: 1 / -1; }
  .ktile-big { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ktile:hover { transform: none; }
}

/* the start page, second round: the next step, pins, a quota's days, trends, order */
.home-focus { display: grid; grid-template-columns: minmax(0, 720px); }
.hcard-focus { padding: 18px 20px; border-color: var(--accent-line); background: var(--accent-subtle); }
.hcard-focus .hcard-title { font-size: var(--text-h4); }
.hcard-head-end { margin-left: auto; }
.pin-star {
  border: 0; background: none; padding: 0 4px; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--on-surface-faint); transition: color var(--motion);
}
.pin-star:hover, .pin-star.is-on { color: var(--warning); }
.ktile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; width: 100%; }
.ktile-today { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--text-sm); }
.daybars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.daybar {
  display: block; width: 9px; height: 100%; border-radius: 2px 2px 0 0; background: var(--success);
  transform-origin: bottom center; transition: transform var(--motion);
}
.daybar.is-over { background: var(--warning); }
.daybars-budget { position: absolute; left: -2px; right: -2px; height: 0; border-top: 1px dashed var(--on-surface-muted); }
.ktile-big-sm { font-size: 30px; }
.ktile-trend { font-size: var(--text-label); color: var(--on-surface-muted); }
.ktile-trend.is-up { color: var(--warning); }
.ktile-trend.is-down { color: var(--success); }
.ktile-list { flex-direction: column; gap: 2px; }

/* ---------------------------------------------------------------- the bridge stage (as in the explainer films) */

.tk-muted { --tk: var(--border-strong); }
.bridge-home { max-width: 2560px; gap: var(--space-lg); }
.bridge-home .home-shelf-title {
  font-family: var(--font-ui); font-size: var(--text-label); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-surface-muted);
}

.stage {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; overflow: hidden; padding: 28px 32px 24px;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface);
}
.stage > *:not(.stage-sky) { position: relative; }
.stage-sky { position: absolute; inset: 0; }
.stage-svg { display: block; width: 100%; height: 100%; }
.stage-sky .stage-svg { position: absolute; inset: 0; }
.dust { fill: var(--on-surface-faint); }

.stage-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
/* the room below the box holds the hub line and the core modes, so neither lies over a station */
.stage-bridge-box { position: relative; aspect-ratio: 680 / 520; margin-bottom: 70px; container: bridge / inline-size; }
.stage-bridge { position: absolute; inset: 0; }
.core-name { font-family: var(--font-display); font-weight: 500; font-size: 22px; fill: var(--ink); }

.link-line { fill: none; stroke: var(--accent-line); stroke-width: 1; opacity: 0.8; }
.link.tk-danger .link-line { stroke: var(--danger); opacity: 0.55; }
.packet { fill: var(--tk); }
.tick { stroke: var(--accent-line); stroke-width: 1; }
.ring { fill: none; stroke: var(--accent-line); stroke-width: 1; }
.ring-inner { opacity: 0.8; }
.core-fill { fill: var(--accent-subtle); stroke: var(--accent); stroke-width: 1; }
.sweep { animation: stage-sweep 16s linear infinite; transform-origin: 0 0; }
.sweep-arc { fill: var(--accent-line); opacity: 0.45; }
@keyframes stage-sweep { to { transform: rotate(360deg); } }

.stage-hub {
  position: absolute; left: 0; top: calc(100% + 8px); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-surface-muted); white-space: nowrap; pointer-events: none;
}

.station {
  position: absolute; transform: translate(-50%, -50%); display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: 200px;   /* its own width: placed near the edge it would get only what is left */
  padding: 8px 13px 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent); color: var(--on-surface); font: inherit; text-align: left;
  transition: border-color var(--motion), background-color var(--motion);
}
.station:hover { border-color: var(--tk); background: var(--surface-raised); }
.station.is-still { cursor: default; }
.station b {
  flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: var(--radius-full); background: var(--tk);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk) 22%, transparent);
}
.station.tk-muted b { box-shadow: none; }
.station-text { display: flex; flex-direction: column; min-width: 0; }
/* a long name (a meeting series) wraps onto a second line before it is cut; the title attribute has it whole */
.station-label {
  font-size: 14px; font-weight: 600; line-height: 1.2; overflow: hidden; overflow-wrap: break-word; hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.station-value { font-family: var(--font-mono); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.station small { font-size: 12px; line-height: 1.3; color: var(--on-surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the greeting on the left; the news band drops below it, and stands beside it once the stage is wide
   (the @container home rule below the stage's other breakpoints) */
.stage-term { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 32px; align-items: start; }
.stage-greet { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stage-term > .ticker { min-width: 0; margin: 0; }
.stage-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-muted); }
.stage-prompt { display: flex; align-items: center; gap: 12px; max-width: 760px; border-bottom: 1px solid var(--border); transition: border-color var(--motion); }
.stage-prompt:focus-within { border-bottom-color: var(--accent-line); }
.stage-prompt.is-listening { border-bottom-color: var(--accent); }
.stage-prompt .btn { flex: none; width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--radius-full); }
.stage-prompt .btn-ghost { border: 1px solid var(--border); color: var(--on-surface-muted); }
.stage-prompt .btn-ghost:hover { border-color: var(--accent-line); color: var(--on-surface); }
.stage-prompt .btn .icon { width: 18px; height: 18px; }
.stage-prompt.is-listening .btn[aria-pressed="true"] { animation: core-glow-btn 1s ease-in-out infinite alternate; }
@keyframes core-glow-btn { from { box-shadow: 0 0 0 0 var(--accent-subtle); } to { box-shadow: 0 0 0 6px var(--accent-subtle); } }
.stage-voice { margin: -4px 0 0 40px; max-width: 720px; }
.stage-voice.tk-warning { color: var(--warning); }
.stage-caret { font-family: var(--font-mono); font-size: 28px; color: var(--accent); }
.stage-field { position: relative; flex: 1; min-width: 0; }
.stage-input {
  width: 100%; border: 0; border-bottom: 1px solid transparent; background: transparent; outline: none; padding: 4px 0;
  font-family: var(--font-mono); font-size: 28px; color: var(--on-surface); caret-color: var(--accent);
  transition: border-color var(--motion);
}
.stage-ghost {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  font-family: var(--font-mono); font-size: 28px; color: var(--on-surface);
}
.stage-ghost.is-hint { color: var(--on-surface-faint); font-size: 20px; }
.stage-cursor {
  display: inline-block; width: 14px; height: 30px; margin-left: 6px; vertical-align: -5px; background: var(--accent);
  animation: stage-blink 1.1s steps(1) infinite;
}
@keyframes stage-blink { 50% { opacity: 0; } }
.stage-lead { margin: 0; color: var(--on-surface-muted); font-size: var(--text-sm); }
.stage-tools { position: absolute; top: 0; right: 0; }
.stage-term { position: relative; }

.stage-side { padding-top: 12px; }
.stage-card { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-raised); padding: 20px 22px 12px; }
.stage-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.stage-card-head h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink); }
.stage-card-head small { font-size: 12px; color: var(--on-surface-muted); }
.stage-card-tools { display: inline-flex; align-items: center; gap: 10px; }
.stage-row { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--border); }
.stage-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: var(--radius-full); background: var(--tk); }
.stage-row-main { border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.stage-row-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--on-surface); }
.stage-row-title em { font-style: normal; font-weight: 700; color: var(--tk); }
.stage-row-main:hover .stage-row-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.stage-row-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--on-surface-muted); }
.stage-pill {
  align-self: start; padding: 4px 9px; border: 1px solid var(--accent); border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.stage-row-acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.stage-row.is-lead .stage-row-title { font-size: 17px; }
.stage-more { display: inline-flex; align-items: center; gap: 2px; margin: 8px 0 4px; font-size: var(--text-sm); }

/* the stage follows its own width, not the window's: beside an open detail it is narrower than the screen */
.bridge-home { container-type: inline-size; container-name: home; }
/* a wide stage has room right of the greeting (at most 760px): the news band stands there, level with the
   greeting line, below the Customise button in the corner */
@container home (min-width: 1100px) {
  .stage-term { grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); }
  .stage-greet { grid-column: 1; grid-row: 1; }
  /* level with the greeting: the band's head on the eyebrow's line (clear of Customise in the corner), its
     line on the prompt's, both ending on one hairline */
  .stage-term > .ticker { grid-column: 2; grid-row: 1; align-self: start; padding-right: 120px; }
  .stage-term > .ticker .ticker-viewport { margin-right: -120px; }
}
@container home (max-width: 1040px) {
  .stage-body { grid-template-columns: minmax(0, 1fr); }
  .stage-side { order: -1; padding-top: 0; }
}
@container home (max-width: 700px) {
  .stage { padding: 20px 16px; }
  .stage-bridge-box { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stage-bridge, .stage-hub { display: none; }
  .station { position: static; transform: none; max-width: none; }
  .stage-input, .stage-ghost { font-size: 20px; }
  .stage-caret { font-size: 20px; }
  .stage-cursor { height: 22px; width: 10px; }
  .stage-tools { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .sweep, .stage-cursor { animation: none; }
  .packet { display: none; }
}

/* the bridge, interactive: a station lights its link, the one looked at keeps it; the inspector beside */
.link.is-hot .link-line { stroke: var(--accent); stroke-width: 2; opacity: 1; }
.link.is-hot .packet { fill: var(--accent); }
.station.is-sel { border-color: var(--accent); background: var(--accent-subtle); }
.station.is-sel b { background: var(--accent); }
.station:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inspect-close { display: inline-grid; place-items: center; padding: 4px; color: var(--on-surface-muted); }
.inspect-big { margin: 0 0 6px; font-family: var(--font-mono); font-size: 34px; line-height: 1.1; color: var(--ink); }
.inspect-side { align-self: start; font-family: var(--font-mono); font-size: 12px; color: var(--on-surface-muted); white-space: nowrap; }
.inspect-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.inspect-foot { display: flex; justify-content: flex-end; padding: 12px 0 6px; border-top: 1px solid var(--border); }
.inspect .ktile-bar { margin: 4px 0 12px; }
.inspect-row .daybars { margin-top: 2px; }

/* the core as a control: a click runs its chosen modes; waves go out, the sweep races while collecting */
.core-button {
  position: absolute; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--radius-full);
  border: 1px solid transparent; background: transparent; cursor: pointer; transition: border-color var(--motion);
}
.core-button:hover, .core-button.is-sel { border-color: var(--accent); }
.core-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.wave { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-origin: 0 0; animation: core-wave 1.8s ease-out 1 both; }
@keyframes core-wave { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.stage.is-scan .sweep { animation-duration: 1.6s; }
.stage.is-scan .core-fill { animation: core-glow 1.2s ease-in-out infinite alternate; }
@keyframes core-glow { from { fill: var(--accent-subtle); } to { fill: var(--accent-line); } }

/* a station lights up once when fresh data came in */
.station { overflow: hidden; }
.station-flash {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--accent);
  opacity: 0; animation: station-flash 1.2s ease-out 1;
}
@keyframes station-flash { 0% { opacity: 0.18; } 100% { opacity: 0; } }

/* the heart line: red beats fast, green slow */
.heart { display: block; width: 100%; min-width: 96px; height: 14px; margin-top: 3px; overflow: hidden; }
.heart path { fill: none; stroke: var(--tk); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.85; }
.heart-run { animation: heart-run linear infinite; }
@keyframes heart-run { from { transform: translateX(0); } to { transform: translateX(-60px); } }


/* the core's panel */
.core-sub { margin: 14px 0 2px; }
.core-brief { padding: 8px 0; border-top: 1px solid var(--border); max-height: 320px; overflow: auto; }
.core-ask { display: flex; align-items: center; gap: 6px; padding: 10px 0 4px; border-top: 1px solid var(--border); }
.core-ask-input {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--on-surface); font: inherit; font-size: var(--text-sm);
}

@container home (max-width: 700px) {
  .core-button { position: static; transform: none; }
  .core-button { display: none; }
  .heart { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .heart-run, .station-flash, .stage.is-scan .core-fill, .stage-prompt .btn { animation: none; }
}

/* the return channel: what became of each start handed to a tab */
.rlist { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.rcard {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--tk); border-radius: var(--radius-lg); background: var(--surface-raised);
}
.rcard-head { display: flex; align-items: center; gap: 8px; }
.rcard-head .inspect-close { margin-left: auto; }
.rcard-mode { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-muted); }
.rcard-title {
  border: 0; padding: 0; background: none; text-align: left; font: inherit; font-size: var(--text-body); font-weight: 600;
  line-height: 1.35; color: var(--on-surface); cursor: pointer;
}
.rcard-title:disabled { cursor: default; }
.rcard-title:not(:disabled):hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.rcard-answer { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--on-surface); }
.rcard-answer .label-caps { margin-right: 6px; color: var(--tk); }
.rcard-last { margin: 0; font-size: 12px; color: var(--on-surface-muted); }
.rsteps { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.rsteps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rsteps li::before {
  content: ""; position: absolute; top: 4px; left: 10px; right: 0; height: 1px; background: var(--border);
}
.rsteps li:last-child::before { display: none; }
.rsteps li.is-past::before { background: var(--accent-line); }
.rstep-dot { position: relative; width: 9px; height: 9px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface-raised); }
.rsteps li.is-past .rstep-dot { background: var(--accent-line); border-color: var(--accent-line); }
.rsteps li.is-now .rstep-dot { background: var(--tk); border-color: var(--tk); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk) 22%, transparent); }
.rstep-label { font-size: 11px; color: var(--on-surface-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rsteps li.is-past .rstep-label { color: var(--on-surface-muted); }
.rsteps li.is-now .rstep-label { color: var(--on-surface); font-weight: 600; }
.rsteps.is-lost .rstep-dot { border-style: dashed; }
.rchip { font-size: 11px; }
.home-shelf:has(#home-returns) .home-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* more than ten stations: smaller, the line under the number goes, the heart line stays */
.station.is-compact { max-width: 150px; padding: 6px 10px 6px 9px; gap: 8px; }
.station.is-compact .station-label { font-size: 12.5px; }
.station.is-compact .station-value { font-size: 15px; }
.station.is-compact small { display: none; }
.station.is-compact .heart { min-width: 70px; height: 10px; }
.station-value { white-space: nowrap; }
.station.is-compact { max-width: 180px; }
/* a narrow bridge (a window of 1280 or less) draws every station compact, whatever their number */
@container bridge (max-width: 820px) {
  .station { max-width: 150px; padding: 6px 10px 6px 9px; gap: 8px; }
  .station .station-label { font-size: 12.5px; }
  .station .station-value { font-size: 15px; }
  .station small { display: none; }
  .station .heart { min-width: 70px; height: 10px; }
}

/* the return channel inside a task or an inbox item */
.return-panel {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding: 12px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--tk); border-radius: var(--radius-lg); background: var(--surface);
}
.return-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.return-panel-head .label-caps { margin: 0; }
.idrawer-body .return-panel, .return-panel { margin: 12px 0; }


/* the live feed of the card "Today" */
.feed { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.feed-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.feed-live { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); animation: core-glow-dot 1.6s ease-in-out infinite alternate; }
@keyframes core-glow-dot { from { opacity: 1; } to { opacity: 0.3; } }
.feed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.feed-line { display: grid; grid-template-columns: 42px 10px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 13px; animation: feed-in 0.5s ease-out 1; }
.feed-line .stage-dot { margin-top: 5px; width: 7px; height: 7px; }
.feed-time { font-size: 11px; color: var(--on-surface-muted); padding-top: 1px; }
.feed-text { border: 0; padding: 0; background: none; text-align: left; font: inherit; color: var(--on-surface); cursor: pointer; line-height: 1.35; }
button.feed-text:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.feed-text b { font-weight: 600; color: var(--tk); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* a row that just came in */
.stage-row.is-new { animation: row-in 0.7s ease-out 1; }
@keyframes row-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.new-tag {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: var(--radius-full); vertical-align: 1px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-primary); background: var(--accent);
}

/* a station whose number moved */
.station-bubble {
  position: absolute; top: -9px; right: -6px; padding: 0 6px; border-radius: var(--radius-full); font-family: var(--font-mono);
  font-size: 11px; line-height: 18px; color: var(--on-primary); background: var(--warning); animation: feed-in 0.4s ease-out 1;
}
.station-bubble.is-down { background: var(--success); }
.station { overflow: visible; }
.station-flash { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .feed-live, .feed-line, .stage-row.is-new, .station-bubble { animation: none; }
}


/* the inner room: held down, the core charges, then the page dives into the net behind the bridge (inner.js) */
.core-button::after {
  content: ""; position: absolute; inset: -6px; border-radius: var(--radius-full); border: 2px solid var(--accent);
  opacity: 0; transform: scale(0.55); pointer-events: none;
}
.core-button.is-charging::after { animation: core-charge 0.8s ease-in 1 both; }
@keyframes core-charge { 0% { opacity: 0; transform: scale(0.55); } 80% { opacity: 0.9; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1.3); } }

.inner {
  position: fixed; inset: 0; z-index: 400; background: var(--void); color: var(--void-text);
  font-family: var(--font-ui); animation: inner-in 0.6s ease-out 1 both; overflow: hidden;
}
@keyframes inner-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
.inner-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.inner-canvas:active { cursor: grabbing; }
.inner-canvas.is-pointing { cursor: pointer; }
.inner .label-caps { color: var(--void-muted); }

.inner-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) 20px; pointer-events: none;
}
.inner-top > * { pointer-events: auto; }
.inner-head { flex: 0 1 auto; min-width: 0; }
.inner-title { margin: 2px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--void-text); }
.inner-count { margin: 4px 0 0; font-size: var(--text-sm); color: var(--void-muted); }
.inner-search { position: relative; flex: 0 1 280px; margin-left: auto; }
.inner-search-input {
  width: 100%; height: 36px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--void-line);
  background: var(--void-raised); color: var(--void-text); font: inherit; font-size: var(--text-sm);
}
.inner-search-input::placeholder { color: var(--void-faint); }
.inner-search-input:focus { outline: none; border-color: var(--void-identity); }
.inner-found {
  position: absolute; top: 40px; left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
  background: var(--void-raised); border: 1px solid var(--void-line); border-radius: var(--radius-md);
}
.inner-tools { display: flex; gap: var(--space-sm); }
.inner-btn {
  height: 36px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--void-line);
  background: var(--void-raised); color: var(--void-text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: border-color var(--motion), background-color var(--motion);
}
.inner-btn:hover { border-color: var(--void-muted); }
.inner-btn.is-on { border-color: var(--void-identity); background-color: var(--void-line); }
.inner-btn:focus-visible, .inner-region:focus-visible, .inner-link:focus-visible, .inner-x:focus-visible { outline: 2px solid var(--void-identity); outline-offset: 2px; }
.inner-btn:disabled { opacity: 0.5; cursor: default; }
.inner-state { position: absolute; top: 50%; left: 0; right: 0; text-align: center; color: var(--void-muted); }

.g-core { --g: var(--void-core); }
.g-identity { --g: var(--void-identity); }
.g-infra { --g: var(--void-infra); }
.g-workflow { --g: var(--void-workflow); }
.g-work { --g: var(--void-work); }
.g-docs { --g: var(--void-docs); }
.g-other { --g: var(--void-other); }
.inner-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--g, var(--void-muted)); flex: none; }

.inner-legend { position: absolute; left: 20px; bottom: 44px; display: flex; flex-wrap: wrap; gap: 6px; max-width: min(640px, calc(100% - 40px)); }
.inner-region {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-full);
  border: 1px solid var(--void-line); background: var(--void-raised); color: var(--void-text); font: inherit;
  font-size: var(--text-sm); cursor: pointer; transition: opacity var(--motion), border-color var(--motion);
}
.inner-region .num { color: var(--void-faint); }
.inner-region:hover { border-color: var(--g); }
.inner-region.is-off { opacity: 0.4; }

.inner-panel {
  position: absolute; top: 96px; right: 20px; bottom: 20px; width: min(400px, calc(100% - 40px)); overflow: auto;
  padding: var(--space-md); border-radius: var(--radius-lg); border: 1px solid var(--void-line);
  border-top: 3px solid var(--g); background: var(--void-raised); animation: inner-panel-in 0.3s ease-out 1 both;
}
@keyframes inner-panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.inner-panel-head { display: flex; align-items: center; gap: var(--space-sm); }
.inner-x {
  margin-left: auto; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--void-muted); font-size: 18px; cursor: pointer;
}
.inner-x:hover { border-color: var(--void-line); }
.inner-node { margin: 8px 0 0; font-size: 20px; font-weight: 600; color: var(--void-text); overflow-wrap: anywhere; }
.inner-node-title { margin: 4px 0 0; color: var(--void-muted); font-size: var(--text-sm); }
.inner-path { margin: 6px 0 0; color: var(--void-faint); font-size: 12px; overflow-wrap: anywhere; }
.inner-path b { color: var(--void-muted); font-weight: 500; }
.inner-open { margin-top: var(--space-sm); }
.inner-sub { margin: var(--space-md) 0 6px; }
.inner-links { margin: 0; padding: 0; list-style: none; }
.inner-link {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 5px 6px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--void-text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
  transition: background-color var(--motion);
}
.inner-link:hover { background-color: var(--void-line); }
.inner-link-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inner-link small { color: var(--void-faint); font-size: 11px; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inner-muted { color: var(--void-faint); font-size: var(--text-sm); }
.inner-text {
  margin: 0; padding: var(--space-sm); max-height: 320px; overflow: auto; border-radius: var(--radius-sm);
  background: var(--void); color: var(--void-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.inner-hint { position: absolute; left: 20px; bottom: 12px; margin: 0; color: var(--void-faint); font-size: 12px; pointer-events: none; }

@media (max-width: 720px) {
  .inner-top { flex-wrap: wrap; padding: var(--space-md); }
  .inner-search { flex: 1 1 100%; order: 3; }
  .inner-panel { top: auto; left: 16px; right: 16px; width: auto; height: 46%; }
  .inner-legend { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .inner, .inner-panel, .core-button.is-charging::after { animation: none; }
}

/* the picture of the day: a board of the day's questions, then Claude's verdict in three rows */
.sit-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--space-sm); }
.sit-field {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label n" "line line"; align-items: baseline; gap: 2px 8px;
  min-width: 0; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--on-surface); font: inherit; text-align: left;
  transition: border-color var(--motion), background-color var(--motion);
}
button.sit-field { cursor: pointer; }
button.sit-field:hover { border-color: var(--accent); background-color: var(--accent-subtle); }
button.sit-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sit-field.is-wide { grid-column: 1 / -1; }
.sit-field.tk-warning.is-wide { border-color: var(--warning); }
.sit-label { grid-area: label; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sit-n { grid-area: n; font-size: 18px; font-weight: 600; }
.sit-line { grid-area: line; min-width: 0; font-size: var(--text-sm); color: var(--on-surface-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-field.is-wide .sit-line { white-space: normal; color: var(--on-surface); font-weight: 500; }
.verdict { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.verdict-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: baseline; padding: 8px 10px;
  border-radius: var(--radius-md); background: var(--surface-muted); font-size: var(--text-sm); line-height: 1.45;
}
.verdict-row.is-first { background: var(--accent-subtle); }
.verdict-row .label-caps { color: var(--on-surface-muted); }
.inner-live-n { color: var(--void-live-answer); font-weight: 500; }
.inner-live {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0 0; padding: 8px 10px;
  border-radius: var(--radius-md); background: var(--void); font-size: var(--text-sm);
}
.inner-live .inner-btn { height: 28px; margin-left: auto; }
.inner-live.is-working { --g: var(--void-live-working); }
.inner-live.is-asks, .inner-live.is-warn { --g: var(--void-live-asks); }
.inner-live.is-answer { --g: var(--void-live-answer); }
.inner-live.is-lost, .inner-live.is-alarm { --g: var(--void-live-alarm); }

/* a wide screen is used: the bridge grows only as far as the window is tall; beside it stands one block,
   Today or the station looked at (Today is a station of the ring and brings it back) */
.stage-bridge-box { width: 100%; max-width: max(560px, calc((100vh - 260px) * 680 / 520)); justify-self: center; }
@container home (min-width: 2100px) {
  .stage-body { grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr); }
}

/* a task list in lanes (Work page): a quiet head row per lane, the runs-on lane a little dimmer */
.tbl .lane-head th { padding: 14px 8px 6px; text-align: left; border-bottom: 1px solid var(--border); background: transparent; }
.tbl .lane-runs td { color: var(--on-surface-muted); }
.input-date { width: auto; min-height: 30px; padding: 2px 8px; }
/* a session's task (Sessions page) and a task's sessions (row details) */
.sess-foot { margin-top: 4px; }
.sess-task { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.sess-task .sess-task-pick { width: auto; max-width: 210px; color: var(--on-surface-muted); }
.chip-task { border-color: var(--secondary); color: var(--secondary); }
.input-sm { min-height: 28px; padding: 2px 8px; font-size: var(--text-sm); max-width: 100%; }
.task-sessions li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.task-session-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the model an agent tab starts with (views/launch.js) and the settings page (views/settings.js) */
.launch-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.selbar .launch-pick, .review-bulk .launch-pick { margin-top: 0; flex-basis: 100%; }
.idrawer .launch-pick { margin: 0; padding: 6px 20px 10px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.launch-rec { cursor: help; }
.set-bad { color: var(--danger); }
.set-table-wrap { display: grid; gap: 10px; overflow-x: auto; max-width: 100%; }
.set-table { width: auto; }
.set-table td, .set-table th { padding: 4px 8px; }
.set-num { width: 84px; }

/* the news ticker on the start page (views/ticker.js): a head like the stage's eyebrow over one line with no
   box, a hairline under it like the greeting's and its ends fading out. Two equal tracks run left, the second
   a copy for the seamless loop; hover, keyboard focus and the Pause button stop it, reduced motion makes it
   a row that scrolls by hand */
.ticker { display: grid; gap: 10px; margin-block: var(--space-md); min-width: 0; }
/* as tall as the stage's eyebrow, so the band's line sits on the greeting's; its small buttons overhang it */
.ticker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 17px; }
.ticker-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-surface-muted); }
.ticker-count { font-size: 11px; font-weight: 600; color: var(--accent); }
.ticker-tools { display: inline-flex; align-items: center; gap: 2px; }
.ticker-tools .btn { min-height: 22px; margin-block: -3px; padding: 2px 5px; color: var(--on-surface-muted); }
.ticker-tools .btn:hover { color: var(--on-surface); }
.ticker-tools .btn .icon { width: 14px; height: 14px; }
.ticker-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--on-surface-muted); }
.ticker-viewport {
  display: flex; overflow: hidden; min-height: 52px; align-items: center; border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor 28px, currentColor calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor 28px, currentColor calc(100% - 48px), transparent);
}
.ticker-track {
  display: flex; flex: none; align-items: center; gap: 0; margin: 0; padding: 0 0 0 28px;
  list-style: none; white-space: nowrap; font-size: 15px;
  animation: ticker-run 100s linear infinite; will-change: transform;
}
.ticker-track > li { flex: none; display: flex; align-items: center; }
/* a quiet mark between two entries, never a box around them */
.ticker-track > li + li::before { content: ""; width: 4px; height: 4px; margin: 0 18px; border-radius: var(--radius-full); background: var(--border-strong); }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-slow, .ticker-normal, .ticker-fast { animation-timing-function: linear; }
.ticker-item {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--on-surface); font: inherit; text-decoration: none; cursor: pointer;
}
span.ticker-item { cursor: default; }
a.ticker-item:hover, button.ticker-item:hover { background: var(--surface-muted); }
a.ticker-item:hover .ticker-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.ticker-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ticker-title { color: var(--on-surface); }
/* opened in this browser: it steps back, it stays readable */
.ticker-read .ticker-title { color: var(--on-surface-muted); }
/* a feed's source in a colour of its own (logic.js tickerSourceToken): small capitals after a dot of the
   colour, the text the surface's own so it reads in light and dark. Each token tints to a strength of its
   own, since a palette may put secondary and accent close together */
.ticker-src {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-surface-muted);
}
.ticker-src::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: var(--radius-full); background: var(--tk, var(--border-strong)); }
.ticker-src.tk-secondary { --tk: var(--secondary); --tk-mix: 24%; }
.ticker-src.tk-accent { --tk: var(--accent); --tk-mix: 10%; }
.ticker-src.tk-on-surface { --tk: var(--on-surface); --tk-mix: 8%; }
.ticker-new {
  align-self: center; padding: 0 6px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; line-height: 16px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); background: var(--accent-subtle);
}
.ticker-also {
  align-self: center; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: 11px; line-height: 16px; color: var(--on-surface-muted);
}
.ticker-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-full); background: var(--tk, var(--on-surface-muted)); }
.ticker-status.tk-danger, .ticker-status.tk-warning { font-weight: 600; }
/* the status, standing still in the live section (and under the news band on the tiles view) */
.ticker-status-box { margin: 0 0 8px; }
.home > .ticker-status-box { margin: 0 0 var(--space-md); }
.ticker-status-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ticker-status-list .ticker-item { width: 100%; padding: 3px 4px; text-align: left; font-size: 13px; line-height: 1.35; }
.ticker-status-list .ticker-dot { width: 7px; height: 7px; }
.ticker-status-more { margin-top: 4px; font-size: var(--text-sm); }
.ticker-interests { width: 100%; max-width: 680px; flex-wrap: nowrap; align-items: flex-start; }
.ticker-interests textarea, .ticker-interests input { flex: 1 1 auto; min-width: 0; }
.ticker-interests textarea { resize: vertical; }
.ticker-interests-box { display: grid; gap: var(--space-sm); }
.ticker-profile { display: grid; gap: 6px; }
.ticker-proposal { display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.ticker-proposal p { margin: 0; }
.ticker-feeds .ticker-feed-id { width: 120px; }
.ticker-feeds .ticker-feed-url { width: min(360px, 60vw); }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; overflow-x: auto; flex: 1 1 auto; }
  .ticker-copy { display: none; }
}

/* the settings page: the areas on the left, the cards of the one chosen beside them */
.settings-head { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 4px 0; }
.set-warnings { display: flex; flex-direction: column; gap: 4px; margin: 0 4px; }
.set-warnings-list { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.settings-layout {
  display: grid; grid-template-columns: 236px minmax(0, 760px); gap: var(--space-xl); align-items: start;
}
.settings-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; }
.settings-nav-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; text-align: left;
  border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--on-surface-muted); cursor: pointer;
  transition: background-color var(--motion);
}
.settings-nav-item .icon { margin-top: 2px; }
.settings-nav-item:hover { background: var(--surface-muted); }
.settings-nav-item.is-on { background: var(--accent-subtle); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.settings-nav-text { display: flex; flex-direction: column; min-width: 0; }
.settings-nav-text b { font-weight: 600; color: var(--on-surface); }
.settings-nav-text small { font-size: var(--text-label); color: var(--on-surface-muted); }
.settings-body { display: grid; gap: var(--space-md); min-width: 0; animation: fade 200ms ease-out; }

/* a card of one subject and its rows: name and explanation left, the control right */
.set-card { padding: 20px 24px; }
.set-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.set-card-title { display: grid; gap: 2px; min-width: 0; }
.set-card-name { font-size: var(--text-h4); font-weight: 600; color: var(--on-surface); }
.set-card-tool { display: flex; align-items: center; gap: 8px; flex: none; }
.set-head-switch { display: inline-flex; align-items: center; gap: 8px; }
.set-card-body { display: grid; margin-top: 14px; }
.set-card.is-off .set-card-body { opacity: 0.5; }
.set-card-body > .seg { justify-self: start; }
.set-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.set-card-body > .set-row:first-child, .set-card-body > .view-pick:first-child + .set-row { border-top: 0; padding-top: 4px; }
.set-row.is-wide { grid-template-columns: minmax(0, 1fr); }
.set-text { display: grid; gap: 2px; min-width: 0; }
.set-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; color: var(--on-surface); }
.set-explain { max-width: 60ch; }
.set-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.set-row.is-wide .set-control { justify-content: flex-start; }
.set-row.is-wide .set-table-wrap { width: 100%; }
.set-table-wrap .tbl, .set-table-wrap .field-row { justify-self: start; }
.set-aside { max-width: 240px; text-align: right; }
.set-count {
  padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-muted);
  font-size: var(--text-label); font-weight: 600; color: var(--on-surface-muted); white-space: nowrap;
}
.set-count.is-over { color: var(--warning); }
.set-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 16px;
  border: 1px solid var(--warning); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-raised)); color: var(--on-surface);
}

/* a switch: the track carries the state, the thumb slides */
.switch {
  position: relative; flex: none; width: 40px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-muted);
  transition: background-color var(--motion), border-color var(--motion);
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--on-surface-muted); transition: transform var(--motion), background-color var(--motion);
}
.switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(16px); background: var(--on-primary); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* the view of the start page as two pictures to pick from */
.view-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.view-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: inherit;
  transition: border-color var(--motion), background-color var(--motion);
}
.view-opt:hover { border-color: var(--border-strong); }
.view-opt.is-on { border-color: var(--accent); background: var(--accent-subtle); }
.view-name { font-weight: 600; color: var(--on-surface); }
.view-thumb {
  position: relative; display: block; width: 100%; height: 84px; overflow: hidden;
  border-radius: var(--radius-md); background: var(--surface-muted);
}
.view-thumb i, .view-thumb b, .view-thumb em { position: absolute; display: block; }
.view-thumb-stage b {
  left: calc(50% - 16px); top: calc(50% - 16px); width: 32px; height: 32px;
  border: 2px solid var(--accent); border-radius: var(--radius-full);
}
.view-thumb-stage i { width: 22px; height: 12px; border-radius: 3px; background: var(--border-strong); opacity: 0.7; }
.view-thumb-stage i:nth-of-type(1) { left: calc(50% - 11px); top: 6px; }
.view-thumb-stage i:nth-of-type(2) { left: calc(50% + 34px); top: 22px; }
.view-thumb-stage i:nth-of-type(3) { left: calc(50% + 34px); top: 52px; }
.view-thumb-stage i:nth-of-type(4) { left: calc(50% - 11px); top: 66px; }
.view-thumb-stage i:nth-of-type(5) { left: calc(50% - 56px); top: 52px; }
.view-thumb-stage i:nth-of-type(6) { left: calc(50% - 56px); top: 22px; }
.view-thumb-tiles em { left: 10px; top: 12px; width: 45%; height: 8px; border-radius: 4px; background: var(--border-strong); }
.view-thumb-tiles i { top: 34px; width: 20%; height: 36px; border-radius: 4px; background: var(--border-strong); opacity: 0.7; }
.view-thumb-tiles i:nth-of-type(1) { left: 10px; }
.view-thumb-tiles i:nth-of-type(2) { left: calc(10px + 23%); }
.view-thumb-tiles i:nth-of-type(3) { left: calc(10px + 46%); }
.view-thumb-tiles i:nth-of-type(4) { left: calc(10px + 69%); }

/* the stations: one list in their order, a grip to drag, two arrows, a switch */
.st-group { margin: 14px 0 8px; }
.set-card-body > .st-group:first-child { margin-top: 0; }
.st-list { display: grid; gap: 6px; }
.st-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised);
  transition: border-color var(--motion), opacity var(--motion);
}
.st-list:not(.is-hidden) .st-row { cursor: grab; }
.st-list.is-hidden .st-row { grid-template-columns: minmax(0, 1fr) auto auto; border-style: dashed; background: transparent; }
.st-row.is-drag { opacity: 0.4; }
.st-row.is-over { border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.st-grip {
  width: 10px; height: 16px; color: var(--on-surface-faint);
  background-image: radial-gradient(currentColor 1.2px, transparent 1.6px); background-size: 5px 5px;
}
.st-pos {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: var(--radius-full); background: var(--surface-muted); font-size: 11.5px; color: var(--on-surface-muted);
}
.st-name { display: flex; flex-direction: column; min-width: 0; font-weight: 500; color: var(--on-surface); overflow-wrap: anywhere; }
.st-row.is-full .st-name { color: var(--on-surface-muted); }
.st-full { font-size: var(--text-label); font-weight: 400; color: var(--warning); }
.st-kind {
  padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius-full);
  font-size: 11px; letter-spacing: 0.04em; color: var(--on-surface-muted); white-space: nowrap;
}
.st-move { display: inline-flex; gap: 2px; }
.st-move .icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }

/* the rating scale 0 to 3 above the Jev and Haiku tables */
.scale { display: grid; gap: 4px; width: 100%; min-width: 280px; }
.scale-bar { display: flex; height: 40px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.scale-band {
  display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 8px;
  background: color-mix(in srgb, var(--tk) 22%, var(--surface-raised)); border-right: 1px solid var(--surface);
  box-shadow: inset 0 3px 0 var(--tk); white-space: nowrap;
}
.scale-band:last-child { border-right: 0; }
.scale-band b, .scale-band small { overflow: hidden; text-overflow: ellipsis; }
.scale-band b { font-size: 12.5px; font-weight: 600; color: var(--on-surface); }
.scale-band small { font-size: 11px; color: var(--on-surface-muted); }
.scale-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--on-surface-muted); }

/* "Customise" beside the start page: a wider drawer, the page behind it unshaded so a change shows there */
.overlay.is-clear { background: transparent; }
.drawer.drawer-wide { width: min(520px, 100vw); padding: 20px; }
.customize-lead { margin: -4px 0 14px; }
.customize-body { display: grid; gap: 12px; }
.drawer-wide .set-card { padding: 16px 18px; }
.drawer-wide .set-row { padding: 12px 0; }
.customize-foot { display: flex; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 899px) {
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; }
  .settings-nav-item { width: auto; flex: none; align-items: center; padding: 8px 12px; }
  .settings-nav-item.is-on { box-shadow: inset 0 -2px 0 var(--accent); }
  .settings-nav-text small { display: none; }
}
@media (max-width: 640px) {
  .set-card { padding: 16px; }
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-control { justify-content: flex-start; }
  .set-aside { text-align: left; }
  .view-pick { grid-template-columns: minmax(0, 1fr); }
  .st-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .st-grip, .st-kind { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .switch, .switch-thumb, .settings-body, .settings-nav-item, .view-opt, .st-row { transition: none; animation: none; }
}

/* an answer drawn from its Markdown (views/prose.js): the blocks keep the chat's rhythm, code and
   tables scroll inside the bubble instead of widening it */
.qa.md { white-space: normal; min-width: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .md-pre, .md .md-table { margin: 0 0 10px; }
.md ul, .md ol { padding-left: 1.4em; }
.md li { margin: 2px 0; }
.md li > p { margin: 0; }
.md li > ul, .md li > ol { margin: 2px 0 4px; }
.md li.md-task { list-style: none; margin-left: -1.3em; display: flex; gap: 6px; align-items: baseline; }
.md li.md-task > p { display: inline; }
.md-h { margin: 14px 0 6px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.md-h1 { font-size: var(--text-h4); }
.md-h2, .md-h3 { font-size: var(--text-body); }
.md-h4, .md-h5, .md-h6 { font-size: var(--text-sm); }
.md-code-run { font-family: var(--font-mono); font-size: 0.92em; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--border); overflow-wrap: anywhere; }
.md-pre {
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-code); line-height: 1.5; white-space: pre; overflow-x: auto; max-width: 100%;
}
.md-pre code { font: inherit; }
.md blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); color: var(--on-surface-muted); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.md a { color: var(--secondary); overflow-wrap: anywhere; }
.md-table { overflow-x: auto; max-width: 100%; }
.md-table table { border-collapse: collapse; font-size: var(--text-sm); }
.md-table th, .md-table td { padding: 4px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.md-table th { background: var(--surface-raised); font-weight: 600; }
.qa.is-live .qcaret { margin-left: 0; }

/* the list of agents folds away: the conversation takes the whole width */
.agents-grid.is-wide { grid-template-columns: minmax(0, 1fr); }
.agent-convs { align-items: center; }
.agents-list-toggle { flex: none; }

/* organize with AI (views/organize.js): the proposal grouped by workspace, one checkbox per item */
.org-groups { display: grid; gap: 14px; margin-top: 12px; }
.org-group { border-top: 1px solid var(--border); padding-top: 10px; }
.org-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dialog .org-group-title { font-size: 14px; }
.org-group-tick { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.org-items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.org-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; cursor: pointer; min-width: 0; }
.org-line input { align-self: center; }
.org-subject { font-weight: 500; overflow-wrap: anywhere; }
.org-from, .org-to { overflow-wrap: anywhere; }
.org-why { margin: 2px 0 0 26px; }
.org-busy { display: flex; align-items: center; gap: 8px; }
.org-result { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.org-list { margin: 4px 0 8px; padding-left: 18px; }
/* the start button and its ▾: one row bar on every view (views/day.js StartMenu) */
.start { gap: 2px; }
.start-note { display: grid; gap: 4px; padding: 4px 4px 6px; }
.start-note textarea { width: 100%; min-height: 3.2em; resize: vertical; font: inherit; font-size: var(--text-sm);
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--on-surface); }
/* the row panel: one sentence field, then the four groups (views/day.js RowPanel) */
/* the panel's origin: fixed at 0,0 in the same containing block, without the panel's own entrance animation */
.fixed-origin { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.row-panel { position: fixed; right: auto; z-index: 80; overflow-y: auto; width: min(400px, calc(100vw - 16px)); gap: 6px; }
.panel-group { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.panel-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px; }
/* a group's buttons side by side, wrapping: the panel stays short */
.panel-group-body { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.row-panel .settle-item { padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.panel-group-body .panel-day { flex-basis: 100%; padding: 2px 0 0; }
.panel-model { padding: 0 4px; }
.panel-model summary { cursor: pointer; }
.panel-model[open] summary { margin-bottom: 4px; }
.row-panel .launch-pick { font-size: var(--text-label); }
.settle-item:disabled { opacity: .45; cursor: default; }
/* what a row is (views/day.js KindTag): an outlined mark, apart from the filled state chips */
.kind { display: inline-flex; align-items: baseline; gap: 4px; padding: 0 6px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); font-size: var(--text-label); font-weight: 600; color: var(--on-surface); white-space: nowrap; }
.kind-mark { color: var(--on-surface-muted); }
.kind-about { font-weight: 400; color: var(--on-surface-muted); white-space: normal; }
.kind-stream .kind-mark { color: var(--secondary); }
.kind-inbox .kind-mark { color: var(--warning); }
.kind-issue .kind-mark { color: var(--info, var(--secondary)); }
.detail-kind { margin: 4px 0 0; }
.stage-row-sub .kind { margin-right: 4px; }
.help-list { display: grid; gap: 2px; margin: 0; }
/* the board section by repo (views/day.js Section) */
.row-group-head { margin: 10px 0 2px; font-size: var(--text-label); font-weight: 600; color: var(--on-surface-muted); }

/* the decision guide (views/guide.js): the reading of a waiting tab as a small tree, the root on the left,
   one branch per next step on the right, joined by a spine; stacked in a narrow column */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 22px; align-items: center; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); }
.guide.is-empty, .guide.is-running, .guide.is-error { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.guide.is-stale { opacity: 0.7; }
.guide-empty { margin: 0; flex: 1 1 220px; }
.guide-root { position: relative; display: grid; gap: 4px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); }
.guide-root::after { content: ''; position: absolute; top: 50%; right: -23px; width: 22px; border-top: 1px solid var(--border-strong); }
.guide-cap { display: inline-flex; align-items: center; gap: 4px; color: var(--on-surface-muted); }
.guide-where { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.guide-waits { margin: 0; overflow-wrap: anywhere; }
.guide-branches { position: relative; display: grid; gap: 6px; margin: 0; padding: 0 0 0 14px; list-style: none; min-width: 0; }
.guide-branches::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 1px solid var(--border-strong); }
.guide-branch { position: relative; min-width: 0; }
.guide-branch::before { content: ''; position: absolute; left: -14px; top: 18px; width: 14px; border-top: 1px solid var(--border-strong); }
.guide-branch.is-none { padding: 6px 0 6px 10px; }
.guide-opt { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--on-surface); font: inherit; text-align: left; cursor: pointer; }
.guide-opt:hover:not(:disabled), .guide-opt:focus-visible { border-color: var(--accent); }
.guide-opt:disabled { cursor: default; opacity: 0.6; }
.guide-branch.is-picked .guide-opt { border-color: var(--accent-line); background: var(--accent-subtle); }
.guide-branch.is-risky .guide-opt { border-style: dashed; }
.guide-opt.is-armed { border-color: var(--warning); border-style: solid; }
.guide-opt.is-own { color: var(--on-surface-muted); background: none; border-style: dashed; }
.guide-opt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.guide-opt-label { font-weight: 600; overflow-wrap: anywhere; }
.guide-chip { font-size: var(--text-label); }
.guide-why, .guide-send { overflow-wrap: anywhere; }
.guide-send { color: var(--on-surface-muted); }
.guide-compose { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--accent-line);
  border-radius: var(--radius-md); background: var(--surface); }
.guide-box { width: 100%; min-width: 0; resize: vertical; font-family: var(--font-mono); }
.guide-branch.is-chosen .guide-opt { border-color: var(--accent); border-style: solid; }
.guide-foot-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.guide-ways { display: inline-flex; flex-wrap: wrap; gap: 2px 4px; }
.guide-read { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); max-height: 360px; overflow-y: auto; }
.guide-read h4 { margin: 0 0 2px; }
.guide-read-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.guide-read-text { font-family: var(--font-mono); }
.guide.is-running, .guide.is-error, .guide.is-empty { row-gap: 8px; }
.guide-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px;
  margin-top: 8px; }
.guide-line { display: flex; gap: 4px; align-items: baseline; margin: 0; overflow-wrap: anywhere; }
.guide-line-text { display: grid; gap: 1px; min-width: 0; }
.guide-line-about { font-weight: 600; overflow-wrap: anywhere; }
.guide-line-where { color: var(--on-surface-muted); }
.guide-head { display: grid; gap: 2px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.guide.is-running .guide-head, .guide.is-error .guide-head { flex: 1 1 100%; border-bottom: 0; padding-bottom: 0; }
.guide-about { margin: 0; font-size: var(--text-body); font-weight: 650; overflow-wrap: anywhere; }
.guide-topic { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.guide-fact { overflow-wrap: anywhere; }
.guide-fact + .guide-fact::before { content: '·'; margin-right: 10px; }
.guide-line .icon { flex: none; align-self: flex-start; margin-top: 3px; }
.guide.is-compact { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.guide.is-compact .guide-root::after { display: none; }
.guide-board { margin-bottom: 12px; }
.guide-board-intro { margin: 0 0 10px; }
.guide-board-list { display: grid; gap: 12px; }
.guide-card { display: grid; gap: 6px; min-width: 0; }
.guide-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.guide-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 760px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .guide-root::after { display: none; }
}

/* the first-run tour (views/tour.js): the lit area cuts a hole into the scrim, the box stands beside it */
.tour { position: fixed; inset: 0; z-index: 95; }
.tour-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade 200ms ease-out; }
.tour-spot {
  position: fixed; border-radius: var(--radius-lg); box-shadow: 0 0 0 100vmax var(--scrim);
  outline: 2px solid var(--accent); outline-offset: 0; pointer-events: none;
  transition: top var(--motion), left var(--motion), width var(--motion), height var(--motion);
}
.tour-box {
  position: fixed; width: min(380px, calc(100vw - 32px)); background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float);
  padding: 18px 20px 16px; animation: fade 200ms ease-out;
}
.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-count { margin: 0 0 6px; color: var(--on-surface-muted); }
.tour-title { margin: 0 0 8px; font-size: 17px; color: var(--on-surface); }
.tour-body { margin: 0; color: var(--on-surface); line-height: 1.5; }
.tour-dots { display: flex; gap: 6px; margin: 14px 0 0; }
.tour-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--border-strong); }
.tour-dot.is-on { background: var(--accent); width: 16px; }
.tour-acts { margin-top: 14px; align-items: center; }
.tour-gap { flex: 1; }
.help-head { flex-wrap: wrap; }
.help-tour { margin-left: auto; }
@media (max-width: 599px) {
  .help-tour { order: 3; width: 100%; margin-left: 0; }
}
.tour-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: none; }
  .tour-scrim, .tour-box { animation: none; }
}

/* the explain overlay (views/hints.js): rings and arrows in one svg over a light scrim, the notes above them */
.hints { position: fixed; inset: 0; z-index: 94; cursor: pointer; }
.hints-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0.55; animation: fade 200ms ease-out; }
.hints-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.hints-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 5; }
.hints-arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.hints-head { fill: var(--accent); }
.hints-note {
  position: fixed; background: var(--surface-raised); border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 10px 12px 10px 38px;
  animation: fade 220ms ease-out; cursor: default;
}
.hints-n {
  position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--accent); color: var(--surface-raised); font-size: 11px; line-height: 20px; text-align: center;
}
.hints-title { display: block; color: var(--on-surface); font-size: var(--text-sm); }
.hints-body { margin: 2px 0 0; color: var(--on-surface-muted); font-size: 12.5px; line-height: 18px; }
.hints-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px); background: var(--surface-raised); border: 1px solid var(--border); cursor: default;
  border-radius: var(--radius-full); box-shadow: var(--shadow-float); padding: 6px 8px 6px 16px;
}
.hints-bar .btn { white-space: nowrap; }
.hints-where, .hints-bar-text { white-space: nowrap; }
@media (max-width: 599px) {
  .hints-bar-text { display: none; }
  .hints-bar { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hints-scrim, .hints-note { animation: none; }
}