/* Roseway HQ. Colours, type, radius, spacing and shadows come from tokens.css (the Roseway AI platform's own tokens,
   copied from xero-platform/ui/theme/tokens.css): Figtree, brand teal #1b7890, light and dark (html[data-theme]). */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--rw-bg); color: var(--rw-text); font-family: var(--rw-font-sans); font-size: 14px; line-height: 1.5;
  -webkit-text-size-adjust: 100%; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--rw-title-size); font-weight: var(--rw-title-weight); letter-spacing: var(--rw-title-tracking); line-height: 1.15; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
a { color: var(--rw-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--rw-font-mono); font-size: 12px; }
code { background: var(--rw-rail); padding: 1px 6px; border-radius: 6px; color: var(--rw-text-2); word-break: break-all; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rw-focus); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--rw-muted); }
.small { font-size: 12.5px; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.good-ink { color: var(--rw-good-ink); }
.bad-ink { color: var(--rw-bad-ink); }
.no-scroll { overflow: hidden; }

/* ── buttons and inputs ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--rw-radius-pill); padding: 8px 16px;
  font-weight: 600; font-size: 13.5px; cursor: pointer; border: 1px solid transparent; text-decoration: none !important; line-height: 1.2; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--rw-accent); color: var(--rw-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--rw-accent-hover); }
.btn-ghost { background: var(--rw-surface-2); color: var(--rw-text-2); border-color: var(--rw-line); }
.btn-ghost:hover:not(:disabled) { background: var(--rw-accent-faint); color: var(--rw-accent-ink); border-color: var(--rw-accent-line); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-block { width: 100%; padding: 11px 16px; }
.input { background: var(--rw-surface-2); color: var(--rw-text); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); padding: 8px 12px;
  font: inherit; width: 100%; min-width: 0; }
.input:hover { border-color: var(--rw-line-strong); }
.input:focus { outline: none; border-color: var(--rw-accent); box-shadow: 0 0 0 3px var(--rw-accent-soft); }
select.input { cursor: pointer; }
.input-sm { padding: 5px 10px; font-size: 13px; width: auto; }
textarea.input { resize: vertical; }
.lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--rw-muted); margin: 12px 0 6px; }

/* ── sign-in page ── */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(1200px 600px at 10% -10%, var(--rw-accent-soft), transparent 60%), var(--rw-bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 20px; padding: 32px 28px;
  box-shadow: var(--rw-shadow-lg); display: flex; flex-direction: column; gap: 14px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.auth-brand img { width: 32px; height: 32px; border-radius: 8px; }
.auth-card h1 { margin-top: 8px; }
.auth-error { background: var(--rw-bad-soft); color: var(--rw-bad-ink); border: 1px solid var(--rw-bad-line); border-radius: var(--rw-radius-sm); padding: 10px 12px; font-size: 13px; }
.auth-glass { border-top: 1px solid var(--rw-line-soft); padding-top: 12px; }
.auth-glass summary { cursor: pointer; color: var(--rw-muted); font-size: 13px; }
.auth-glass form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form .lbl { margin-top: 8px; }
.auth-form .btn-block { margin-top: 14px; }
.auth-help { font-size: 12.5px; color: var(--rw-muted); margin-top: 6px; }
.auth-note { background: var(--rw-accent-soft); color: var(--rw-accent-ink); border: 1px solid var(--rw-accent-line); border-radius: var(--rw-radius-sm); padding: 10px 12px; font-size: 13px; }
.auth-note a { color: inherit; font-weight: 600; }
.auth-note code { font-size: 12px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--rw-muted); font-size: 12.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--rw-line-soft); }
@media (max-width: 480px) { .auth-card { padding: 24px 18px; border-radius: 16px; } }
/* settings: your account */
.acct { padding: 0; }
.acct .kv { padding: 4px 16px; }
.acct-pw { border-top: 1px solid var(--rw-line-soft); padding: 12px 16px; }
.acct-pw > summary { list-style: none; display: inline-flex; }
.acct-pw > summary::-webkit-details-marker { display: none; }
.acct-pw[open] > summary { margin-bottom: 4px; }
.acct-form { max-width: 380px; }

/* ── shell ── */
.shell { display: flex; min-height: 100vh; }
.side { width: var(--rw-sidebar-width); flex: none; background: var(--rw-surface); border-right: 1px solid var(--rw-line); position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; padding: 18px 12px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 15px; color: var(--rw-text); text-decoration: none !important; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--rw-radius-pill); color: var(--rw-text-2); font-weight: 500;
  text-decoration: none !important; }
.nav-item svg { width: 18px; height: 18px; flex: none; color: var(--rw-muted); }
.nav-item:hover { background: var(--rw-hover); }
.nav-item.on { background: var(--rw-accent-soft); color: var(--rw-accent-ink); font-weight: 600; }
.nav-item.on svg { color: var(--rw-accent-ink); }
.nav-item span:first-of-type { flex: 1; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rw-accent); color: var(--rw-on-accent); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.side-foot { display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rw-line-soft); }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 32px; min-height: 52px;
  background: color-mix(in srgb, var(--rw-bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rw-line-soft); }
.brand-sm { display: none; padding: 0; }
.crumb { display: flex; align-items: center; gap: 8px; color: var(--rw-muted); font-size: 13.5px; min-width: 0; }
.crumb b { color: var(--rw-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb a { color: var(--rw-muted); }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rw-line-strong); flex: none; }
.dot-up { background: var(--rw-good); box-shadow: 0 0 0 4px var(--rw-good-soft); }
.dot-down { background: var(--rw-bad); box-shadow: 0 0 0 4px var(--rw-bad-soft); animation: pulse 1.6s infinite; }
.dot-unknown { background: var(--rw-line-strong); }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
.view { padding: 28px 32px 80px; max-width: 1320px; width: 100%; outline: none; }
.tabbar { display: none; }

/* ── page header and sections ── */
.page-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-h > div:first-child { min-width: 0; flex: 1 1 420px; }
.eyebrow { font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 600; margin-bottom: 6px; }
.lede { color: var(--rw-muted); margin-top: 6px; max-width: 72ch; font-size: 14.5px; }
.sec { margin-bottom: 28px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-link { font-size: 13px; font-weight: 600; }
.sub-h { font-size: 13px; font-weight: 700; color: var(--rw-text-2); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.count { display: inline-flex; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--rw-rail); color: var(--rw-muted); font-size: 11.5px;
  font-weight: 700; align-items: center; justify-content: center; letter-spacing: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.more-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.card { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-sm); padding: 16px; }
.empty { border: 1px dashed var(--rw-line-strong); border-radius: var(--rw-radius-lg); padding: 28px 20px; text-align: center; color: var(--rw-muted); }
.empty-t { font-weight: 600; color: var(--rw-text-2); }
.empty-s { font-size: 13px; margin-top: 4px; }
.loading { display: flex; gap: 6px; justify-content: center; padding: 48px 0; }
.loading.sm { padding: 12px 0; }
.loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--rw-accent); opacity: .3; animation: blink 1s infinite; }
.loading span:nth-child(2) { animation-delay: .15s; } .loading span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: 1; } }

/* ── pills ── */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--rw-radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; text-decoration: none !important; }
.pill.sm { padding: 0 7px; font-size: 11px; }
.pill-good { background: var(--rw-good-soft); color: var(--rw-good-ink); }
.pill-warn { background: var(--rw-warn-soft); color: var(--rw-warn-ink); }
.pill-bad { background: var(--rw-bad-soft); color: var(--rw-bad-ink); }
.pill-accent { background: var(--rw-accent-soft); color: var(--rw-accent-ink); }
.pill-muted { background: var(--rw-rail); color: var(--rw-muted); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rw-muted); white-space: nowrap; }
.health i { width: 7px; height: 7px; border-radius: 50%; background: var(--rw-line-strong); }
.health-good i { background: var(--rw-good); } .health-warn i { background: var(--rw-warn); } .health-bad i { background: var(--rw-bad); }
.health-warn { color: var(--rw-warn-ink); } .health-bad { color: var(--rw-bad-ink); }

/* ── progress and task ticks ── */
.prog { flex: 1; height: 6px; border-radius: 3px; background: var(--rw-rail); overflow: hidden; min-width: 60px; display: inline-block; vertical-align: middle; }
.prog span { display: block; height: 100%; background: linear-gradient(90deg, var(--rw-brand-600), var(--rw-brand)); border-radius: 3px; transition: width .3s; }
.prog-n { font-size: 12px; color: var(--rw-muted); margin-left: 8px; font-weight: 600; }
.tick { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none;
  border: 1.5px solid var(--rw-line-strong); color: transparent; }
.tick-done { background: var(--rw-good); border-color: var(--rw-good); color: #fff; }
.tick-doing { border-color: var(--rw-accent); color: var(--rw-accent); font-size: 9px; }
.tick-skip { color: var(--rw-faint); border-style: dashed; }
.tick-blocked { background: var(--rw-bad-soft); border-color: var(--rw-bad); color: var(--rw-bad-ink); }
.tick-btn { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 50%; }
.tick-btn:disabled { cursor: default; }
.tick-btn:hover:not(:disabled) .tick { box-shadow: 0 0 0 4px var(--rw-accent-soft); }

/* ── build cards and board ── */
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bcard { display: flex; flex-direction: column; gap: 8px; color: var(--rw-text); text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bcard:hover { border-color: var(--rw-accent-line); box-shadow: var(--rw-shadow); transform: translateY(-1px); }
.bcard-top { display: flex; gap: 6px; flex-wrap: wrap; }
.bcard-title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.bcard-now { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--rw-text-2); }
.bcard-now .tick { width: 16px; height: 16px; margin-top: 2px; }
.bcard-goal { font-size: 13px; color: var(--rw-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-foot { display: flex; align-items: center; }
.bcard-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--rw-faint); }
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--rw-rail); border-radius: var(--rw-radius-lg); padding: 10px; min-width: 240px; }
.col-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; padding: 4px 6px 10px; color: var(--rw-text-2); }
.col-h span { color: var(--rw-muted); font-weight: 600; }
.col-b { display: flex; flex-direction: column; gap: 10px; }
.col-b .bcard { box-shadow: none; }
.col-more { display: block; text-align: center; font-size: 13px; font-weight: 600; padding: 8px; }
.col-empty { color: var(--rw-faint); font-size: 13px; text-align: center; padding: 14px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: flex; gap: 8px; }
.filters .input { width: 200px; }
.filters select.input { width: auto; }
.toolbar .filters select.input { max-width: 340px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .chips { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--rw-radius-pill); background: var(--rw-surface); border: 1px solid var(--rw-line);
  color: var(--rw-text-2); font-weight: 600; font-size: 13px; text-decoration: none !important; white-space: nowrap; }
.chip span { color: var(--rw-faint); font-weight: 600; }
.chip:hover { border-color: var(--rw-accent-line); }
.chip.on { background: var(--rw-accent); border-color: var(--rw-accent); color: var(--rw-on-accent); }
.chip.on span { color: inherit; opacity: .8; }
.chip-sm { padding: 4px 11px; font-size: 12.5px; }
.seg { display: inline-flex; background: var(--rw-rail); padding: 3px; border-radius: var(--rw-radius-pill); gap: 2px; }
.seg a, .seg button { padding: 6px 14px; border-radius: var(--rw-radius-pill); color: var(--rw-muted); font-weight: 600; font-size: 13px; text-decoration: none !important;
  border: 0; background: none; cursor: pointer; }
.seg .on { background: var(--rw-surface); color: var(--rw-text); box-shadow: var(--rw-shadow-sm); }
.seg-wide { display: flex; flex-wrap: wrap; }
.seg-wide button { flex: 1 1 auto; }
.verdict .on.v-approved { background: var(--rw-good); color: #fff; }
.verdict .on.v-changes_requested { background: var(--rw-bad); color: #fff; }
.verdict .on.v-reviewed { background: var(--rw-accent); color: var(--rw-on-accent); }

/* ── tables ── */
.tbl-card { padding: 0; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rw-faint); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--rw-line); background: var(--rw-hover); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--rw-line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-act] { cursor: pointer; }
.tbl tbody tr[data-act]:hover td { background: var(--rw-hover); }
.tbl-title { font-weight: 600; color: var(--rw-text); }
.tbl-sm td, .tbl-sm th { padding: 7px 10px; font-size: 13px; }
.num { text-align: right; }
.show-sm { display: none; }
.tbl td .prog { width: 90px; flex: none; }
.tbl-scroll { overflow-x: auto; margin: 8px 0 14px; }

/* ── questions ── */
.qcard { display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--rw-warn); }
.qcard.answered { border-left-color: var(--rw-good); }
.qhead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.qbuild { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rw-accent-ink); }
.qmeta { font-size: 12px; color: var(--rw-faint); }
.qtext { font-size: 15px; font-weight: 600; line-height: 1.4; }
.qctx { font-size: 13.5px; line-height: 1.55; color: var(--rw-text-2); border-left: 2px solid var(--rw-line, var(--rw-hover)); padding: 2px 0 2px 12px; max-width: 72ch; }
.qctx summary { cursor: pointer; font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 700; list-style: none; }
.qctx summary::-webkit-details-marker { display: none; }
.qctx summary::before { content: '▸ '; } .qctx[open] summary::before { content: '▾ '; }
.qctx p { margin: 6px 0; } .qctx ul { margin: 6px 0; padding-left: 18px; } .qctx li { margin: 2px 0; }
.qdefault { font-size: 13px; color: var(--rw-text-2); background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 8px 12px; }
.qdefault span { display: block; font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 700; margin-bottom: 2px; }
.qmedias { display: flex; gap: 10px; overflow-x: auto; }
.qmedia { margin: 0; flex: none; width: 220px; }
.qmedia img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--rw-radius-sm); border: 1px solid var(--rw-line); cursor: zoom-in; background: var(--rw-rail); }
.qmedia figcaption { font-size: 12px; color: var(--rw-muted); margin-top: 4px; }
.qmedia.missing img { display: none; }
.qmedia.missing::before { content: "Picture from the old Build HQ page (not imported yet)"; display: flex; align-items: center; justify-content: center; text-align: center;
  height: 130px; border-radius: var(--rw-radius-sm); border: 1px dashed var(--rw-line-strong); color: var(--rw-faint); font-size: 12px; padding: 12px; }
.qanswer { display: flex; gap: 10px; align-items: flex-start; background: var(--rw-good-soft); border-radius: var(--rw-radius-sm); padding: 10px 12px; }
.qnote { white-space: pre-wrap; margin-top: 2px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { border: 1.5px solid var(--rw-accent-line); background: var(--rw-surface); color: var(--rw-accent-ink); border-radius: var(--rw-radius-pill); padding: 8px 16px;
  font-weight: 600; cursor: pointer; text-align: left; font-size: 13.5px; line-height: 1.3; }
.opt:hover:not(:disabled) { background: var(--rw-accent); color: var(--rw-on-accent); border-color: var(--rw-accent); }
.opt.on { background: var(--rw-accent); color: var(--rw-on-accent); border-color: var(--rw-accent); }
.opt-ghost { border-color: var(--rw-line); color: var(--rw-muted); }
.opt-ghost:hover:not(:disabled) { background: var(--rw-hover); color: var(--rw-text); border-color: var(--rw-line-strong); }
.qform { display: flex; flex-direction: column; gap: 8px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }
.qgroup { margin-bottom: 26px; }
.send-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.send-bar .send-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.send-bar.waiting { border-color: var(--rw-accent, currentColor); }
@media (max-width: 640px) { .send-bar .send-main { flex-direction: column; align-items: stretch; } }
/* the send pill on pages without the full bar */
#send-fab { position: fixed; right: 24px; bottom: 24px; z-index: 30; }
#send-fab .send-fab { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
#send-fab .send-fab svg { width: 16px; height: 16px; }
@media (max-width: 640px) { #send-fab { right: 12px; bottom: 76px; } }
/* where a question is answered in the platform (build mode) */
.qplace { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; color: var(--rw-accent-ink); text-decoration: none; }
.qplace svg { width: 14px; height: 14px; }
.qplace code { font-size: 12px; }
a.qplace:hover { text-decoration: underline; }
.qplace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 2px; }
.qplace-row .qplace { margin: 0; color: var(--rw-faint); }
.qopen { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.qopen svg { width: 14px; height: 14px; }
.qtext-link { color: inherit; text-decoration: none; }
.qtext-link:hover { color: var(--rw-accent-ink); text-decoration: underline; }
.switch-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.switch { width: 46px; height: 26px; border-radius: 13px; background: var(--rw-line-strong); border: 0; position: relative; cursor: pointer; flex: none; transition: background .2s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--rw-shadow-sm); transition: left .2s; }
.switch.on { background: var(--rw-accent); }
.switch.on span { left: 23px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ── review library ── */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.rcard { padding: 0; overflow: hidden; color: var(--rw-text); text-decoration: none !important; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.rcard:hover { box-shadow: var(--rw-shadow); transform: translateY(-1px); }
.rthumb-wrap { position: relative; aspect-ratio: 16 / 10; background: var(--rw-rail); overflow: hidden; }
.rthumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.rthumb-icon { display: flex; align-items: center; justify-content: center; color: var(--rw-accent-ink); background: linear-gradient(135deg, var(--rw-accent-faint), var(--rw-rail)); }
.kicon { width: 44px; height: 44px; }
.play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: 15px; padding-left: 3px; }
.rbody { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.rtitle { font-weight: 700; line-height: 1.3; }
.rmeta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--rw-faint); flex-wrap: wrap; }
.upload-btn { cursor: pointer; }
.upl { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.upl .prog { width: 100%; }
.player { background: #000; border-radius: var(--rw-radius-lg); overflow: hidden; margin-bottom: 22px; display: flex; justify-content: center; }
.player video { width: 100%; max-height: 78vh; display: block; background: #000; }
.audio { width: 100%; margin-bottom: 22px; }
.frame-wrap { border: 1px solid var(--rw-line); border-radius: var(--rw-radius-lg); overflow: hidden; background: var(--rw-surface); margin-bottom: 22px; display: flex; flex-direction: column; }
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--rw-line); font-size: 13px; color: var(--rw-muted); }
.frame-bar span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-wrap iframe { width: 100%; height: 72vh; border: 0; background: #fff; display: block; }
.frame-wrap.doc iframe { height: 80vh; }
.frame-close { display: none; }
.frame-wrap.fs { position: fixed; inset: 0; z-index: 100; border-radius: 0; margin: 0; border: 0; }
.frame-wrap.fs iframe { flex: 1; height: auto; }
.frame-wrap.fs .frame-close { display: inline-flex; }
.img-view { margin-bottom: 22px; text-align: center; }
.img-view img { max-width: 100%; max-height: 80vh; border-radius: var(--rw-radius-lg); border: 1px solid var(--rw-line); cursor: zoom-in; }
.preview { margin-bottom: 22px; max-height: 75vh; overflow: auto; }
.preview h3, .preview h4, .preview h5 { margin: 16px 0 6px; }
.preview p { margin: 0 0 8px; }
.preview-note { font-size: 12px; color: var(--rw-faint); margin-bottom: 10px; }
.slide { border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); padding: 12px 14px 12px 44px; margin-bottom: 10px; position: relative; }
.slide-n { position: absolute; left: 12px; top: 12px; font-weight: 700; color: var(--rw-faint); }
.text-view { white-space: pre-wrap; font-family: var(--rw-font-mono); font-size: 12.5px; margin: 0; }
.sheet th { position: sticky; top: 0; }
.file-only { display: flex; gap: 14px; align-items: center; color: var(--rw-muted); margin-bottom: 22px; }
.comments { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); padding: 10px 14px; white-space: pre-wrap; }
.comment-h { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 2px; }
.comment-h span { color: var(--rw-faint); }
.comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ── build detail ── */
.build-h { align-items: stretch; }
.meta-line { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--rw-muted); font-size: 13px; margin-top: 10px; }
.build-prog { min-width: 220px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.build-prog > .prog-n { margin: 0; }
.big-pct { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.build-ctl { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.review-grid { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); }
.tasks { list-style: none; margin: 0; padding: 6px 0; }
.task { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; }
.task + .task { border-top: 1px solid var(--rw-line-soft); }
.task-t { font-weight: 500; }
.task-done .task-t { color: var(--rw-muted); }
.task-skipped .task-t { color: var(--rw-faint); text-decoration: line-through; }
.task-in_progress .task-t { font-weight: 700; }
.task-d { font-size: 12.5px; color: var(--rw-muted); }
.blockers { margin: 0; padding: 12px 16px 12px 34px; border-left: 3px solid var(--rw-bad); }
.links { margin: 0; padding: 12px 16px 12px 34px; }

/* ── activity ── */
.acts { list-style: none; margin: 0; padding: 4px 16px; }
.act { display: flex; gap: 12px; padding: 10px 0; }
.act + .act { border-top: 1px solid var(--rw-line-soft); }
.act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--rw-line-strong); }
.act-good { background: var(--rw-good); } .act-warn { background: var(--rw-warn); } .act-accent { background: var(--rw-accent); }
.act-body { min-width: 0; }
.act-text { overflow-wrap: anywhere; }
.act-meta { font-size: 12px; color: var(--rw-faint); margin-top: 2px; }
.act-meta b { color: var(--rw-muted); font-weight: 600; }
.more-btn { margin: 14px auto 0; display: flex; }

/* ── home ── */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.live-card { display: flex; flex-direction: column; gap: 14px; }
.live-row { display: flex; gap: 12px; align-items: center; }
.big-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--rw-line-strong); flex: none; }
.big-dot.dot-up { background: var(--rw-good); box-shadow: 0 0 0 5px var(--rw-good-soft); }
.big-dot.dot-down { background: var(--rw-bad); box-shadow: 0 0 0 5px var(--rw-bad-soft); }
.live-state { font-weight: 700; font-size: 15px; }
.live-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.live-kpis div { background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 8px 10px; }
.live-kpis b { display: block; font-size: 20px; font-weight: 700; }
.live-kpis span { font-size: 11.5px; color: var(--rw-muted); }
.ships { list-style: none; margin: 0; padding: 0; }
.ship { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; }
.ship + .ship { border-top: 1px solid var(--rw-line-soft); }
.ship-n { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rw-text); }
.ship-t { color: var(--rw-faint); font-size: 12px; white-space: nowrap; }
.ships-h { font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 700; margin: 14px 0 4px; }
.mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
.mini-stats a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--rw-radius-sm); background: var(--rw-hover); color: var(--rw-text); text-decoration: none !important; }
.mini-stats a:hover { background: var(--rw-accent-faint); }
.mini-stats b { font-size: 22px; line-height: 1.1; }
.mini-stats span { font-size: 12px; color: var(--rw-muted); }

/* ── feedback ── */
.fb { display: flex; gap: 14px; align-items: flex-start; }
.fb-shot { width: 150px; height: 96px; object-fit: cover; object-position: top; border-radius: var(--rw-radius-sm); border: 1px solid var(--rw-line); flex: none; cursor: zoom-in;
  background: var(--rw-rail); }
.fb-noshot { display: flex; align-items: center; justify-content: center; color: var(--rw-faint); font-size: 12px; cursor: default; }
.fb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-h { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-note { font-size: 13px; background: var(--rw-good-soft); color: var(--rw-good-ink); border-radius: var(--rw-radius-sm); padding: 6px 10px; }
.fb-ctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fb-ctl .input { max-width: 260px; }
.sync-line { margin: -12px 0 14px; }

/* ── releases ── */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--rw-line); }
.tl { position: relative; margin-bottom: 12px; }
.tl-dot { position: absolute; left: -25px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--rw-accent); box-shadow: 0 0 0 4px var(--rw-bg); }
.tl-card { display: flex; flex-direction: column; gap: 6px; }
.tl-card .meta-line { margin-top: 0; }
.tl-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* ── status ── */
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.scard { display: flex; flex-direction: column; gap: 12px; }
.scard.wide { grid-column: 1 / -1; }
.scard-h { font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 700; }
.placeholder { border: 1px dashed var(--rw-line-strong); border-radius: var(--rw-radius-sm); padding: 14px; color: var(--rw-muted); font-size: 13px; }
.coming { display: flex; gap: 8px; }
.errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.errs li { background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.errgroups .mono { overflow-wrap: anywhere; }
.latest summary { cursor: pointer; font-weight: 600; font-size: 13px; margin-bottom: 8px; }

/* ── settings and more ── */
.kv { display: flex; flex-direction: column; gap: 0; padding: 4px 16px; }
.kv > div { display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
.kv > div + div { border-top: 1px solid var(--rw-line-soft); }
.kv > div > span:first-child { flex: 1; min-width: 180px; }
.keys { list-style: none; padding: 0; margin: 0 0 10px; }
.keys li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; }
.more-list { padding: 4px 0; }
.more-g { margin-bottom: 18px; }
.more-g .eyebrow { margin: 0 4px 8px; }
.more-list a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; color: var(--rw-text); text-decoration: none !important; font-weight: 500; }
.more-list a + a { border-top: 1px solid var(--rw-line-soft); }
.more-list svg { width: 20px; height: 20px; color: var(--rw-muted); }
.more-list span:nth-of-type(1) { flex: 1; }
.chev { color: var(--rw-faint); font-size: 20px; line-height: 1; }

/* ── overlays ── */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); opacity: 0; transition: all .2s; background: var(--rw-text); color: var(--rw-bg);
  padding: 10px 18px; border-radius: var(--rw-radius-pill); font-size: 13.5px; font-weight: 500; z-index: 200; pointer-events: none; max-width: calc(100vw - 32px); box-shadow: var(--rw-shadow-lg); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--rw-bad); color: #fff; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: var(--rw-scrim); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--rw-radius-md); box-shadow: var(--rw-shadow-lg); background: #fff; }
.lb-close { position: absolute; top: 16px; right: 16px; }

/* ── jobs ── */
.jtiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
.jtile { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); padding: 10px 14px; display: flex; flex-direction: column; }
.jtile b { font-size: 24px; line-height: 1.1; }
.jtile span { font-size: 12px; color: var(--rw-muted); }
.jt-bad b { color: var(--rw-bad-ink); } .jt-warn b { color: var(--rw-warn-ink); } .jt-good b { color: var(--rw-good-ink); }
.jobs-tbl td.msg, .runs-tbl td.msg { color: var(--rw-text-2); font-size: 12.5px; max-width: 380px; overflow-wrap: anywhere; }
.jobs-tbl tr.child td:first-child { padding-left: 28px; }
.jobs-tbl tr.child .tbl-title { font-weight: 500; }
.chips-inline { margin: 0; }
.alert { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--rw-warn); }
.alert-bad { border-left-color: var(--rw-bad); }
.alert-good { border-left-color: var(--rw-good); opacity: .8; }
.alert-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.alert-t { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.alert-d { font-size: 12px; color: var(--rw-text-2); background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 6px 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.run-log { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--rw-font-mono); font-size: 12.5px; line-height: 1.55; margin: 0; max-height: 70vh; overflow: auto; }
.raw summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.settings-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.settings-form .lbl { margin: 6px 0 0; }
.settings-form .input-sm { width: 160px; }
.sec-h { flex-wrap: wrap; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--rw-accent); }
.links-card { display: flex; flex-direction: column; gap: 8px; }
.links-card a { display: flex; gap: 8px; align-items: center; color: var(--rw-text); }
.break { overflow-wrap: anywhere; }
.badge-bad { background: var(--rw-bad); color: #fff; }

/* ── the build is the hub: what hangs off it (7 Oct 2026) ── */
.warn-ink { color: var(--rw-warn-ink); }
.hub-counts { display: flex; gap: 12px; font-size: 12.5px; color: var(--rw-muted); }
.hub-counts span { display: inline-flex; align-items: center; gap: 4px; }
.hub-counts svg { width: 14px; height: 14px; }
.bchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 10px 2px 8px; border-radius: var(--rw-radius-pill);
  background: var(--rw-accent-faint, var(--rw-accent-soft)); border: 1px solid var(--rw-accent-line); color: var(--rw-accent-ink); font-size: 12px; font-weight: 600;
  text-decoration: none !important; line-height: 1.5; min-width: 0; }
.bchip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.bchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.bchip:hover { background: var(--rw-accent-soft); }
.bchip-none { background: var(--rw-warn-soft); border-color: transparent; color: var(--rw-warn-ink); }
.sub-h .bchip { font-size: 13px; padding: 3px 12px 3px 9px; }
.qlink { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--rw-warn-ink); }
.qlink .input { max-width: 100%; }
.note-bar { margin-bottom: 16px; background: var(--rw-warn-soft); border-color: transparent; color: var(--rw-text); padding: 12px 16px; }
.rcard { cursor: pointer; }
.rtitle { color: var(--rw-text); text-decoration: none !important; }
.rgrid-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hub-strip { display: flex; gap: 8px; margin: -6px 0 22px; overflow-x: auto; scrollbar-width: none; }
.hub-strip::-webkit-scrollbar { display: none; }
.hub-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 16px; border-radius: var(--rw-radius-md);
  background: var(--rw-surface); border: 1px solid var(--rw-line); cursor: pointer; text-align: left; }
.hub-tab b { font-size: 15px; }
.hub-tab span { font-size: 12px; color: var(--rw-muted); font-weight: 600; }
.hub-tab:hover { border-color: var(--rw-accent-line); }
.hub-warn { background: var(--rw-warn-soft); border-color: transparent; }
.hub-warn b { color: var(--rw-warn-ink); }
details.fold { margin-top: 12px; padding: 12px 16px; }
details.fold > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--rw-text-2); display: flex; align-items: center; gap: 8px; }
details.fold[open] > summary { margin-bottom: 12px; }

/* ── roadmap ── */
.rm-board { display: grid; grid-template-columns: repeat(5, minmax(236px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.rm-col { background: var(--rw-rail); border-radius: var(--rw-radius-lg); padding: 10px; min-width: 0; border: 2px dashed transparent; transition: border-color .12s, background .12s; }
.rm-col.over { border-color: var(--rw-accent); background: var(--rw-accent-soft); }
.rm-col-h { padding: 4px 6px 10px; }
.rm-col-t { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rm-col-on_hold .rm-col-t b { color: var(--rw-warn-ink); }
.rm-col-done { opacity: .92; }
.rm-col-b { display: flex; flex-direction: column; gap: 10px; }
.rm-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; box-shadow: none; }
.rm-card[draggable="true"] { cursor: grab; }
.rm-card.dragging { opacity: .45; }
.rm-hold { border-left: 3px solid var(--rw-warn); }
.rm-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rm-top .pill { font-size: 11px; padding: 0 8px; }
.rm-month { font-size: 11.5px; color: var(--rw-muted); font-weight: 600; margin-left: auto; }
.rm-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.rm-title a { color: var(--rw-text); }
.rm-desc { font-size: 12.5px; color: var(--rw-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rm-reason { font-size: 12.5px; color: var(--rw-text-2); background: var(--rw-bg); border-radius: var(--rw-radius-sm); padding: 6px 8px; }
.rm-reason b { color: var(--rw-warn-ink); margin-right: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.rm-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rm-move { max-width: 100%; font-size: 12.5px; padding: 4px 8px; }
.rm-hint { margin-top: 8px; }
.rm-col:not(.show-all) .rm-extra { display: none; }
.rm-col .col-more { width: 100%; }
.rm-jump { display: none; }
.rm-col { scroll-margin-top: 12px; }
.rm-side { display: flex; flex-direction: column; gap: 10px; }
.rm-side-h { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rm-edit summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--rw-accent-ink); }
.rm-edit .settings-form { margin-top: 10px; }
.rm-edit .input-sm { width: 100%; }

/* ── a form in a dialog ── */
.modal-back { position: fixed; inset: 0; z-index: 140; background: var(--rw-scrim); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--rw-shadow-lg); }
.modal-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal .lbl { margin-top: 6px; }
.modal .row-end { margin-top: 12px; flex-wrap: wrap; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.export-text { width: 100%; font-size: 12.5px; margin-top: 6px; }

/* ── questions for others ── */
.operson-card { padding: 0; overflow: hidden; }
.operson-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--rw-line); background: var(--rw-surface-2, var(--rw-bg)); }
.olist { display: flex; flex-direction: column; }
.card.olist { padding: 0; }
.orow { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--rw-line-soft, var(--rw-line)); }
.orow:last-child { border-bottom: 0; }
.orow-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.orow-h .qmeta { margin-left: auto; }
.operson { font-size: 13px; }
.otext { font-weight: 600; }
.orow-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.orow .qform { margin-top: 4px; }
/* sent to the person's My Work on Roseway AI (platform_questions.py) */
.osel { width: 16px; height: 16px; accent-color: var(--rw-accent); cursor: pointer; margin: 0; }
.oplat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--rw-muted); }
.oplat-warn { color: var(--rw-warn-ink); }
.oproc { margin-top: 4px; }
.oproc a { color: var(--rw-accent-ink); }
.oproc-wait { color: var(--rw-warn-ink); }
.pp-list { display: flex; flex-direction: column; max-height: min(46vh, 380px); overflow-y: auto; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); margin-top: 6px; background: var(--rw-surface-2); }
.pp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rw-line-soft, var(--rw-line)); cursor: pointer; }
.pp-row:last-child { border-bottom: 0; }
.pp-row:hover { background: var(--rw-accent-soft); }
.pp-row:has(input:checked) { background: var(--rw-accent-soft); }
.pp-row input { accent-color: var(--rw-accent); margin: 0; flex: none; }
.pp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-who .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-empty { padding: 12px; }
/* The build page's Rollout people picker (16 Oct 2026): chips + a search box with a listbox under it */
.rp-field, .rp { width: 100%; }
.rp-field[hidden] { display: none; }
.rp .lbl { margin: 6px 0 6px; }
.rp-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: var(--rw-radius-pill);
  background: var(--rw-accent-soft); color: var(--rw-accent-ink); border: 1px solid var(--rw-accent-line); font-size: 12.5px; font-weight: 600; }
.rp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-chip-warn { background: var(--rw-warn-soft); color: var(--rw-warn-ink); border-color: var(--rw-warn-line); }
.rp-x { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 15px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rp-x:hover { background: var(--rw-surface); }
.rp-none { padding: 2px 0; }
.rp-box { position: relative; }
.rp-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; list-style: none; margin: 0; padding: 4px 0;
  max-height: 260px; overflow-y: auto; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); box-shadow: var(--rw-shadow-lg); }
.rp-opt { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; cursor: pointer; min-width: 0; }
.rp-opt b { font-weight: 600; font-size: 13px; color: var(--rw-text); }
.rp-opt .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-opt:hover, .rp-opt.on { background: var(--rw-accent-soft); }
.rp-opt.on { box-shadow: inset 3px 0 0 var(--rw-accent); }
.rp-empty { padding: 8px 12px; }
.rp-msg:empty { display: none; }
/* Questions for others: the working view (HQ 921) and files on answers (HQ 922) */
.ostrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.ostat { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm); padding: 12px 14px; border-top: 3px solid var(--rw-line); }
.ostat-n { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ostat-l { font-size: 13px; font-weight: 600; margin-top: 2px; }
.ostat-to_send { border-top-color: var(--rw-warn-ink); }
.ostat-waiting { border-top-color: var(--rw-accent); }
.ostat-answered { border-top-color: var(--rw-good-ink); }
.ostat-processed { border-top-color: var(--rw-muted); }
.operson-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.operson-who h2 { margin: 0; }
.oacct { font-size: 13px; color: var(--rw-text-2); }
.oacct .muted { font-size: 12px; }
.btn-link { background: none; border: 0; padding: 0 2px; color: var(--rw-accent-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--rw-accent); }
.ocounts { display: flex; flex-wrap: wrap; gap: 6px; }
.ocount { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--rw-radius-pill); background: var(--rw-rail); color: var(--rw-muted); }
.ocount-to_send { background: var(--rw-warn-soft); color: var(--rw-warn-ink); }
.ocount-waiting { background: var(--rw-accent-soft); color: var(--rw-accent-ink); }
.ocount-answered { background: var(--rw-good-soft); color: var(--rw-good-ink); }
.ostage-h { display: flex; align-items: center; gap: 8px; padding: 9px 16px 7px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--rw-muted); background: var(--rw-bg); border-bottom: 1px solid var(--rw-line-soft, var(--rw-line)); }
.ostage-h .muted { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 4px; }
.owait-warn { color: var(--rw-warn-ink); font-weight: 600; }
.owait-bad { color: var(--rw-bad-ink); font-weight: 600; }
.ofiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ofile { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-pill); background: var(--rw-surface-2); color: var(--rw-text); font-size: 12.5px; text-decoration: none; max-width: 100%; }
.ofile:hover { border-color: var(--rw-accent-line); }
.ofile svg { width: 14px; height: 14px; flex: none; color: var(--rw-accent-ink); }
.ofile-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.btn .rcount { font-weight: 500; opacity: .75; }
.btn svg { width: 15px; height: 15px; }
.modal-sm { max-width: 480px; }
.remind-preview { border: 1px solid var(--rw-line); border-left: 3px solid var(--rw-accent); border-radius: var(--rw-radius-sm); padding: 10px 12px; background: var(--rw-surface-2); display: flex; flex-direction: column; gap: 4px; }

/* ── board columns worked out from facts, and why a card sits where it is (12 Oct 2026) ── */
.why { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--rw-muted); min-width: 0; }
.why i { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--rw-line-strong); }
.why span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.why-warn { color: var(--rw-warn-ink); } .why-warn i { background: var(--rw-warn); }
.why-accent { color: var(--rw-accent-ink); } .why-accent i { background: var(--rw-accent); box-shadow: 0 0 0 3px var(--rw-accent-soft); }
.why-good { color: var(--rw-good-ink); } .why-good i { background: var(--rw-good); }
.build-h .why { margin-top: 8px; font-size: 14px; }
.build-h .why span { -webkit-line-clamp: 3; }
.bcard-needs_you { border-left: 3px solid var(--rw-warn); }
.col-h { align-items: flex-start; gap: 8px; }
.col-t { font-weight: 700; }
.col-sub { font-size: 11.5px; font-weight: 500; color: var(--rw-faint); margin-top: 1px; }
.bcard-meta { gap: 10px; }
.bcard-meta .hub-counts { display: inline-flex; }
.hc { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.hc svg { width: 14px; height: 14px; }
.hc-you { color: var(--rw-bad-ink); }
.hc-done { color: var(--rw-faint); }
.sub-h .hc svg, details.fold > summary .hc svg { width: 16px; height: 16px; }
.fold-note { margin: 0 0 4px; }
.tbl-hc { margin-top: 4px; }
.tbl-hc .hub-counts { font-size: 12px; }
.tbl-why { min-width: 180px; }
.tbl-why .pill { margin-bottom: 3px; }
.tbl-why-sm { margin-top: 4px; }
.tbl-why-sm .pill { margin-right: 4px; }

/* ── Claude's jobs ── */
.cj-note { white-space: normal; max-width: 300px; overflow-wrap: anywhere; }
.cj-help { margin-top: 10px; }
.sync-line.sync-in { margin: 0 0 12px; }
.kv b { font-weight: 600; }

/* ── release steps: evidence per release, and how a release works ── */
.tl-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.steps-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.stps { display: flex; gap: 4px; flex-wrap: wrap; }
.stp { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none;
  border: 1.5px solid transparent; }
.stp-good { background: var(--rw-good-soft); color: var(--rw-good-ink); border-color: var(--rw-good-line); }
.stp-warn { background: var(--rw-warn-soft); color: var(--rw-warn-ink); border-color: var(--rw-warn-line); }
.stp-bad { background: var(--rw-bad-soft); color: var(--rw-bad-ink); border-color: var(--rw-bad-line); }
.stp-muted { background: transparent; color: var(--rw-faint); border-color: var(--rw-line-strong); border-style: dashed; }
.ev-detail summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--rw-accent-ink); }
.ev-list { list-style: none; margin: 10px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ev { display: flex; gap: 10px; align-items: flex-start; }
.ev > div { min-width: 0; overflow-wrap: anywhere; }
.process { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 960px; }
.pstep { display: flex; gap: 16px; align-items: flex-start; }
.pstep-n { width: 34px; height: 34px; border-radius: 50%; background: var(--rw-accent); color: var(--rw-on-accent); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pstep-b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pstep-text { color: var(--rw-text-2); line-height: 1.55; overflow-wrap: anywhere; }
.pstep-text p { margin: 0 0 6px; }
.pstep-text ul { margin: 0 0 6px; padding-left: 18px; }
.pstep-text li { margin: 3px 0; }
.pstep-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pstep-k { font-size: var(--rw-label-size); letter-spacing: var(--rw-label-tracking); text-transform: uppercase; color: var(--rw-faint); font-weight: 700; margin-right: 4px; }
.pstep-ev { background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 8px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; color: var(--rw-text-2); }
.pstep-rb { border-left: 3px solid var(--rw-warn); }
.pstep-rb .pstep-n { background: var(--rw-warn-soft); color: var(--rw-warn-ink); }

/* ── responsive ── */
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: 1fr; }
  .detail-grid, .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .side { display: none; }
  .brand-sm { display: flex; }
  .topbar { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .view { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  .page-h { margin-bottom: 16px; }
  .page-h > div:first-child { flex-basis: 100%; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in srgb, var(--rw-surface) 92%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--rw-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--rw-muted); font-size: 11px; font-weight: 600;
    text-decoration: none !important; position: relative; }
  .tab svg { width: 22px; height: 22px; }
  .tab.on { color: var(--rw-accent-ink); }
  .tab .badge { position: absolute; top: -2px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  .tab .dot { position: absolute; top: 3px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--rw-accent); }
  .board { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; }
  .col { scroll-snap-align: start; }
  .bgrid { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rbody { padding: 10px; }
  .hide-sm { display: none; }
  .show-sm { display: block; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > * { min-width: 0; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; min-width: 0; max-width: calc(100% + 32px); }
  .chips { min-width: 0; max-width: 100%; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  /* nothing may widen the page past the screen (a wide page makes the phone zoom everything out): wide content
     scrolls inside its own box instead (2 Oct 2026) */
  .main-col, .view { overflow-x: clip; }
  .view { overflow-wrap: anywhere; }
  .chips.tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; max-width: calc(100% + 32px); }
  .filters .input { width: auto; flex: 1 1 140px; min-width: 0; }
  .filters select.input { flex: 0 0 auto; min-width: 9.5em; }
  .fb { flex-direction: column; }
  .fb-shot { width: 100%; height: 160px; }
  .status-grid { grid-template-columns: 1fr; }
  .opt { width: 100%; text-align: center; padding: 11px 16px; }
  .frame-wrap iframe { height: 70vh; }
  .player { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .build-prog { width: 100%; }
  .qmedia { width: 75vw; }
  .switch-card { align-items: flex-start; }
  .tbl td .prog { width: 60px; }
  .jtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jobs-tbl { min-width: 560px; }
  .jobs-tbl td.msg { display: none; }
  .tab .dot-bad { background: var(--rw-bad); }
  .seg-wide { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--rw-radius-md); }
  .seg-wide button { border-radius: var(--rw-radius-sm); padding: 10px 8px; }
  .flight .bcard:nth-child(n+5) { display: none; }
}
@media (max-width: 1100px) {
  .rm-board { grid-template-columns: repeat(5, minmax(250px, 1fr)); }
}
@media (max-width: 760px) {
  /* phones: the roadmap's columns stack, one section each; cards move with their "Move to" menu */
  .rm-board { grid-template-columns: 1fr; overflow: visible; }
  .rm-col { padding: 8px; }
  .rm-hint { display: none; }
  .rm-jump { display: flex; position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 5; background: var(--rw-bg); padding-top: 6px; padding-bottom: 8px; margin-bottom: 10px; }
  .rm-col { scroll-margin-top: 130px; }
  .rm-card[draggable="true"] { cursor: default; }
  .hub-strip { margin: -4px -16px 18px; padding: 0 16px; }
  .hub-tab { padding: 7px 12px; }
  .form-2 { grid-template-columns: 1fr; }
  .modal-back { padding: 12px; }
  .rgrid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orow-h .qmeta { margin-left: 0; width: 100%; }
  .pstep { gap: 12px; }
  .pstep-n { width: 28px; height: 28px; font-size: 13px; }
  .cjobs-tbl { min-width: 0; }
  .cj-note { max-width: 60vw; }
  .operson-h .row-gap { width: 100%; }
  .operson-h .row-gap .btn { flex: 1; }
  .ostrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qlink select { flex: 1 1 100%; }
}

/* the handbook (13 Oct 2026): contents on the left, the sections on the right; tables scroll in their own box */
.hb{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.hb-toc{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;padding:10px;max-height:calc(100vh - 40px);overflow:auto}
.hb-toc a{padding:6px 8px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13px;line-height:1.3}
.hb-toc a:hover{background:var(--surface-2,rgba(127,127,127,.08))}
.hb-q{margin-bottom:8px;width:100%}
.hb-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.hb-sec{padding:16px 20px;line-height:1.55;font-size:14px}
.hb-sec h2{margin:0 0 10px;font-size:18px}
.hb-sec h3{margin:16px 0 6px;font-size:15px}
.hb-sec p{margin:0 0 10px;max-width:80ch}
.hb-sec ul,.hb-sec ol{margin:0 0 10px;padding-left:22px}
.hb-sec li{margin:2px 0}
.hb-sec code{font-size:12.5px;padding:1px 4px;border-radius:4px;background:var(--surface-2,rgba(127,127,127,.1))}
.hb-sec pre{overflow-x:auto;padding:10px 12px;border-radius:8px;background:var(--surface-2,rgba(127,127,127,.08));font-size:12px}
.hb-table{overflow-x:auto;margin:0 0 12px}
.hb-table table{border-collapse:collapse;font-size:13px;min-width:60%}
.hb-table th,.hb-table td{border-bottom:1px solid var(--line,rgba(127,127,127,.2));padding:6px 8px;text-align:left;vertical-align:top}
.hb-note{border-left:3px solid var(--accent,#2e8b8b);padding:6px 10px;margin:0 0 10px;font-size:13.5px}
@media (max-width:820px){.hb{grid-template-columns:1fr}.hb-toc{position:static;max-height:none}}

/* ── module areas (area.html, build hq-module-areas) ── */
.area-top-ctl { display: none; gap: 6px; }
.chip .badge { color: var(--rw-on-accent); margin-left: 2px; }
.chip.on .badge { background: var(--rw-on-accent); color: var(--rw-accent-ink); opacity: 1; }
.warn-ink { color: var(--rw-warn-ink); }
.area-card .bcard-meta { justify-content: flex-start; gap: 4px; flex-wrap: wrap; }
.area-archived { opacity: .7; }
.area-help { margin-bottom: 14px; }
.area-upl { margin-bottom: 18px; }
.note-row { display: flex; flex-direction: column; gap: 6px; color: var(--rw-text); text-decoration: none !important; }
.note-row:hover { border-color: var(--rw-accent-line); }
.note-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.note-h h2 { margin: 0; }
.note-view { display: flex; flex-direction: column; gap: 8px; }
.note-old { margin-bottom: 12px; border-left: 3px solid var(--rw-warn); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.note-ed { display: flex; flex-direction: column; gap: 8px; }
.ed-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ed-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-tools .btn { min-width: 34px; padding: 4px 9px; }
.ed-text { font-family: var(--rw-font-mono); font-size: 13px; line-height: 1.55; min-height: 280px; resize: vertical; }
.ed-preview { min-height: 280px; background: var(--rw-surface-2); }
.md { font-size: 14px; line-height: 1.6; color: var(--rw-text); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 10px; }
.md h3, .md h4, .md h5 { margin: 16px 0 6px; line-height: 1.3; }
.md h3 { font-size: 18px; } .md h4 { font-size: 16px; } .md h5 { font-size: 14px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md blockquote { margin: 0 0 10px; padding: 4px 12px; border-left: 3px solid var(--rw-line-strong); color: var(--rw-text-2); }
.md code { font-family: var(--rw-font-mono); font-size: 12.5px; background: var(--rw-hover); border-radius: 4px; padding: 1px 5px; }
.md .md-code, .md pre { font-family: var(--rw-font-mono); font-size: 12.5px; background: var(--rw-hover); border-radius: var(--rw-radius-sm); padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 0 0 10px; }
.md a { color: var(--rw-accent-ink); text-decoration: underline; }
.comment .md { font-size: 13.5px; }
.comment .md p:last-child { margin-bottom: 0; }
.msg-collaborator { border-left: 3px solid var(--rw-accent); }
.thread-title { margin: 6px 0 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.batch-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.batch-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rw-line-soft); }
.batch-item > div { min-width: 0; flex: 1; }
.batch-preview { max-height: 46vh; overflow-y: auto; }
.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rw-line-soft); }
.link-form { margin-top: 12px; }
.link-form select { flex: 1; min-width: 0; }
.review-a { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .area-top-ctl { display: inline-flex; }
  .ed-text, .ed-preview { min-height: 220px; }
}

/* ── the four-column board, task freshness and the review queue (17 Oct 2026) ── */
.pill-purple { background: var(--rw-purple-soft); color: var(--rw-purple-ink); }
.why-purple { color: var(--rw-purple-ink); } .why-purple i { background: var(--rw-purple-ink); }
.bcard-waiting_for_review { border-left: 3px solid var(--rw-purple-ink); }
.bcard .bcard-top { gap: 5px; }
.bcard.bstate-on_hold, .bcard.bstate-not_started { opacity: .86; }
.bcard-foot { gap: 10px; }
.tasks-at { font-size: 11.5px; color: var(--rw-faint); white-space: nowrap; margin-left: auto; }
.tasks-at.bad-ink { color: var(--rw-bad-ink); font-weight: 600; }
.state-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-bar.note-bad { background: var(--rw-bad-soft); }
.send-list { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.send-fabs { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.review-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 14px; position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 6; }
.review-pos { font-size: 13px; font-weight: 600; color: var(--rw-text-2); text-align: center; }
.kbd-hint { color: var(--rw-faint); font-weight: 500; }
.btn.disabled { opacity: .45; pointer-events: none; }
.verdict-state { font-size: 13px; margin-top: 10px; }
.verdict-send { margin-top: 10px; align-items: center; flex-wrap: wrap; }
.outbox-item { display: flex; flex-direction: column; gap: 8px; }
.outbox-item .md { max-height: 220px; overflow: auto; }
.go-ahead { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
@media (max-width: 760px) {
  .review-nav { top: calc(52px + env(safe-area-inset-top)); }
  .review-nav .btn { padding: 8px 12px; }
  .tasks-at { margin-left: 8px; }
}
.rgrid + .sec { margin-top: 28px; }

/* ── build hq-overhaul (17 Oct 2026): who acts, the Needs you queue ─────────────────────────────────────────── */
.task-main { flex: 1; min-width: 0; }
.task .tick-btn { cursor: default; }
.task-mine { background: var(--rw-warn-soft); }
.task-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.task-main .qform { margin-top: 8px; }
.steer { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--rw-line-soft); padding-top: 10px; margin-top: 4px; }
.steer-h { font-weight: 600; font-size: 13px; }
.steer-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.steer-d > summary { list-style: none; cursor: pointer; }
.steer-d > summary::-webkit-details-marker { display: none; }
.steer-d[open] { flex-basis: 100%; }
.steer-f { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.oacts { margin-bottom: 16px; padding: 12px 16px; }
.oacts > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.oacts ul { list-style: none; margin: 10px 0 0; padding: 0; }
.oact { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.oact + .oact { border-top: 1px solid var(--rw-line-soft); }
.qsum { padding: 0; overflow: hidden; margin-bottom: 8px; }
.qsum-row { display: flex; gap: 14px; align-items: center; padding: 12px 16px; color: var(--rw-text); text-decoration: none !important; }
.qsum-row + .qsum-row { border-top: 1px solid var(--rw-line-soft); }
.qsum-row:hover { background: var(--rw-hover); }
.qsum-row > b { font-size: 20px; min-width: 34px; text-align: right; color: var(--rw-warn-ink); }
.qsum-row > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.qsum-l { font-weight: 600; }
.qsum-row .chev { color: var(--rw-faint); }
.needs-sec .effect { font-size: 13px; color: var(--rw-text-2); background: var(--rw-accent-soft); border-radius: var(--rw-radius-sm); padding: 8px 12px; margin-bottom: 12px; }
.qitem-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.qitem .qitem-h:empty { display: none; }
.qtask { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.operson-sm .operson-h { padding: 10px 14px; }
.operson-name { margin: 0; font-size: 15px; }
.flash { outline: 2px solid var(--rw-accent); outline-offset: 2px; transition: outline-color 1s; }
@media (max-width: 760px) {
  .qsum-row { padding: 10px 12px; gap: 10px; }
  .task-ctl .muted { flex-basis: 100%; }
}
.ofold { border-top: 1px solid var(--rw-line); }
.ofold > summary { cursor: pointer; padding: 10px 16px; font-size: 13px; color: var(--rw-text-2); }
.ofold-none { padding: 12px 16px; }

/* ── the Action queue's cards on other pages (the queue itself: static/queue.css) ── */
.aq-done-mark { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; background: var(--rw-good-soft); color: var(--rw-good-ink); }
.aq-mark-warn { background: var(--rw-warn-soft); color: var(--rw-warn-ink); font-size: 16px; }
.aq-start { margin-bottom: 12px; }
.aq-start svg { width: 14px; height: 14px; }
.aq-bcard { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; color: var(--rw-text); text-decoration: none !important; border-color: var(--rw-warn-line); }
.aq-bcard > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aq-bcard:hover { box-shadow: var(--rw-shadow); }
@media (max-width: 760px) { .aq-bcard { flex-wrap: wrap; } }

/* ══ HQ v2: the shell in the new design language (18 Oct 2026; tokens.css) ═══════════════════════════════════
   The action queue is the sidebar's hero; the pages are grouped by what you do there; a group can fold (remembered).
   Display type (Instrument Serif) for page titles; everything else Instrument Sans. Every page keeps its own layout. */
body { font-family: var(--rw-font-sans); font-size: 14.5px; letter-spacing: -.003em; }
h1 { font-family: var(--rw-font-display); font-weight: 400; font-size: var(--rw-title-size); letter-spacing: -.01em; line-height: 1.08; }
h2 { letter-spacing: -.01em; }
::selection { background: color-mix(in srgb, var(--rw-accent) 22%, transparent); }
.lede { font-size: 15px; line-height: 1.55; }
.eyebrow { font-weight: 600; color: var(--rw-muted); }
.btn { transition: background var(--hq-fast) var(--hq-ease), border-color var(--hq-fast) var(--hq-ease), transform var(--hq-fast) var(--hq-ease), box-shadow var(--hq-fast) var(--hq-ease); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px color-mix(in srgb, var(--rw-accent) 70%, transparent); }
.card { transition: box-shadow var(--hq-mid) var(--hq-ease), border-color var(--hq-mid) var(--hq-ease); }
kbd, .kbd { font-family: var(--rw-font-mono); font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--rw-line-strong);
  border-bottom-width: 2px; background: var(--rw-surface-2); color: var(--rw-text-2); line-height: 1.5; }

.side { background: var(--rw-surface); border-right: 1px solid var(--rw-line); padding: 16px 12px 12px; }
.brand { padding: 2px 8px 16px; font-size: 15px; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--rw-text); color: var(--rw-bg); font-family: var(--rw-font-display); font-size: 21px !important; line-height: 1; padding-top: 2px;
  box-shadow: inset 0 -3px 0 var(--rw-accent); }
.brand span:not(.brand-mark) { font-family: var(--rw-font-display); font-size: 21px; font-weight: 400; letter-spacing: -.01em; }
.nav { gap: 4px; scrollbar-width: thin; }
.nav > * { flex: none; }
.nav-hero { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k k" "n go" "s s"; gap: 2px 8px; margin: 0 0 14px;
  padding: 14px 14px 13px; border-radius: 16px; background: var(--rw-text); color: var(--rw-bg); text-decoration: none !important; overflow: hidden;
  box-shadow: var(--rw-shadow); transition: transform var(--hq-mid) var(--hq-ease), box-shadow var(--hq-mid) var(--hq-ease); }
.nav-hero::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rw-brand-400) 55%, transparent), transparent); pointer-events: none; }
.nav-hero:hover { transform: translateY(-1px); box-shadow: var(--rw-shadow-lg); }
.nav-hero.on { box-shadow: 0 0 0 2px var(--rw-surface), 0 0 0 4px var(--rw-accent); }
.nav-hero-k { grid-area: k; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.nav-hero-n { grid-area: n; font-family: var(--rw-font-display); font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.nav-hero-s { grid-area: s; font-size: 12.5px; opacity: .78; }
.nav-hero-go { grid-area: go; align-self: end; display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; padding: 5px 11px;
  border-radius: 999px; background: color-mix(in srgb, var(--rw-bg) 16%, transparent); position: relative; z-index: 1; }
html[data-theme="dark"] .nav-hero { background: linear-gradient(150deg, #262470, #17163f 70%); color: #f0f0ff; }
.nav-g { display: flex; flex-direction: column; }
.nav-g + .nav-g { margin-top: 8px; }
.nav-g-h { display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px 10px 4px; color: var(--rw-faint);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 8px; text-align: left; }
.nav-g-h span { flex: 1; }
.nav-g-h:hover { color: var(--rw-text-2); }
.nav-g-h svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--hq-mid) var(--hq-ease); }
.nav-g.folded .nav-g-h svg { transform: rotate(-90deg); }
.nav-g-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw-accent); }
.nav-g-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--hq-mid) var(--hq-ease); }
.nav-g-items > * { min-height: 0; }
.nav-g.folded .nav-g-items { display: none; }
.nav-item { padding: 7px 10px; border-radius: 10px; font-size: 14px; gap: 11px; transition: background var(--hq-fast) var(--hq-ease), color var(--hq-fast) var(--hq-ease); }
.nav-item svg { width: 17px; height: 17px; }
.nav-item.on { background: var(--hq-ink-soft); color: var(--rw-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--rw-accent); }
.nav-item.on svg { color: var(--rw-accent-ink); }
.badge { background: var(--rw-rail); color: var(--rw-text-2); font-family: var(--rw-font-mono); font-weight: 600; font-size: 10.5px; }
.nav-item.on .badge { background: var(--rw-accent); color: var(--rw-on-accent); }
.badge-bad { background: var(--rw-bad-soft); color: var(--rw-bad-ink); }
.nav-cat { padding-left: 38px; font-size: 13px; color: var(--rw-muted); }
.nav-cat-n { font-family: var(--rw-font-mono); font-size: 10.5px; color: var(--rw-faint); }
.side-foot { border-top: 1px solid var(--rw-line-soft); }
.topbar { background: color-mix(in srgb, var(--rw-bg) 82%, transparent); }
.crumb b { font-weight: 600; }
.toast { border-radius: 14px; font-weight: 500; box-shadow: var(--rw-shadow-lg); }
@media (max-width: 760px) {
  h1 { font-size: 26px; }
  .tab { font-weight: 500; }
  .tab-queue { margin-top: -18px; }
  .tab-q { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--rw-text); color: var(--rw-bg);
    font-family: var(--rw-font-display); font-size: 21px; letter-spacing: -.02em; box-shadow: 0 0 0 4px var(--rw-surface), var(--rw-shadow); }
  .tab-queue.on .tab-q { background: var(--rw-accent); color: var(--rw-on-accent); }
}
/* full screen (the queue's F): no chrome at all */
html.hq-focus .side, html.hq-focus .topbar, html.hq-focus .tabbar, html.hq-focus #send-fab { display: none !important; }
html.hq-focus .view { max-width: none; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Settings: the send mode (18 Oct 2026) */
.send-modes { display: flex; flex-direction: column; gap: 10px; }
.send-mode { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--rw-line); background: var(--rw-surface-2);
  color: var(--rw-text); font: inherit; cursor: pointer; }
.send-mode:hover { border-color: var(--rw-accent-line); }
.send-mode.on { border-color: var(--rw-accent); box-shadow: var(--hq-ring); }
.send-mode b { display: block; font-size: 15px; margin-bottom: 2px; }
.send-mode .muted { display: block; line-height: 1.45; }
.send-mode-dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--rw-line-strong); background: var(--rw-surface); }
.send-mode.on .send-mode-dot { border-color: var(--rw-accent); background: radial-gradient(circle, var(--rw-accent) 0 45%, var(--rw-surface) 50%); }

/* ── Operating rules, API keys and sessions, the hand-over card (build claude-operating-rules, 18 Oct 2026) ── */
.presence { display: flex; align-items: center; gap: 12px; }
.presence .big-dot { margin: 0 2px; }
.presence-bad b { color: var(--rw-bad-ink); }
.keys-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.gate-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keys-tbl td { vertical-align: top; }
.keys-tbl .row-off td { color: var(--rw-muted); }
.key-form { max-width: 760px; }
.key-form .input { width: 100%; }
.modal-wide { max-width: 760px; }
.setup-b { border-top: 1px solid var(--rw-line-soft); padding-top: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.setup-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-h .btn { margin-left: auto; }
.setup-pre { margin: 0; padding: 10px 12px; background: var(--rw-rail); border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm);
  font-family: var(--rw-font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--rw-text); max-height: 260px; overflow: auto; }
.key-pre { font-size: 13px; user-select: all; }
.rules-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.rules-side .hb-toc { position: static; max-height: 50vh; }
.rules-versions { padding: 12px 14px; }
.rules-versions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 32vh; overflow: auto; }
.rv a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; color: var(--rw-text); }
.rv.on a b { color: var(--rw-accent-ink); }
.rv .small { color: var(--rw-text-2); overflow-wrap: anywhere; }
.rules-edit { margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.rules-edit[hidden] { display: none; }
.rules-md { width: 100%; font-size: 12.5px; line-height: 1.5; min-height: 420px; }
.hb-sec pre { background: var(--rw-rail); padding: 10px 12px; border-radius: var(--rw-radius-sm); overflow: auto; }
.ho-card { padding: 4px 0 10px; }
.ho-card > .muted.small { padding: 10px 16px 4px; }
.ho-kv > div > span:first-child { flex: 0 0 96px; min-width: 96px; color: var(--rw-muted); font-size: 12.5px; }
.ho-kv > div > span:last-child, .ho-kv > div > code { flex: 1 1 160px; min-width: 0; }
.ho-run { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }
.ho-at { padding: 0 16px; }
code.wrap { word-break: break-all; }
@media (max-width: 760px) { .keys-top { grid-template-columns: 1fr; } .gate-card { flex-direction: column; align-items: flex-start; } .rules-side { position: static; } }

/* ── the theme menu in the top bar (build hq-review-viewer: Light / Dark / Match system; static/theme.js) ── */
.theme-slot { display: inline-flex; }
.topbar .brand-sm span { white-space: nowrap; }
.th-wrap { position: relative; display: inline-flex; }
.th-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--rw-line); background: var(--rw-surface);
  color: var(--rw-text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.th-btn:hover { border-color: var(--rw-line-strong); color: var(--rw-text); }
.th-btn:focus-visible, .th-pop button:focus-visible { outline: none; box-shadow: var(--hq-ring); }
.th-btn svg, .th-pop svg { width: 16px; height: 16px; flex: none; }
.th-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: none; flex-direction: column; min-width: 190px; padding: 6px; border-radius: 14px;
  background: var(--rw-surface); border: 1px solid var(--rw-line); box-shadow: var(--rw-shadow-lg); }
.th-pop.open { display: flex; animation: th-in var(--hq-fast) var(--hq-ease); }
.th-pop button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; color: var(--rw-text);
  cursor: pointer; text-align: left; }
.th-pop button:hover { background: var(--rw-hover); }
.th-pop button span { flex: 1; }
.th-tick { font-style: normal; color: var(--rw-accent-ink); visibility: hidden; }
.th-pop button[aria-checked="true"] .th-tick { visibility: visible; }
.th-pop button[aria-checked="true"] { font-weight: 600; }
@keyframes th-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.more-theme { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.more-theme > span { flex: 1; }
@media (max-width: 760px) { .th-btn .th-l { display: none; } .th-btn { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { .th-pop.open { animation: none; } }

/* Google Cloud card (build hq-platform-health): the frozen Railway app is one quiet line under it */
.rw-frozen { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rw-line, rgba(127,127,127,.2)); }
.scard .presence + .live-kpis, .scard .presence { margin-bottom: 10px; }

/* ── Go live (build hq-go-live): one card per rollout key; tokens only, so both themes follow ── */
.gl-sum { margin-bottom: 22px; }
.gl-sum-ready .snt-sum-n { color: var(--rw-warn-ink); }
.gl-sum-live .snt-sum-n { color: var(--rw-good-ink); }
.gl-sec .sec-h { margin-bottom: 4px; }
.gl-sub { margin: 0 0 12px; }
.gl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.gl-row { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.gl-ready { border-color: var(--rw-warn-line); box-shadow: inset 4px 0 0 var(--rw-warn), var(--rw-shadow-sm); }
.gl-live { box-shadow: inset 4px 0 0 var(--rw-good), var(--rw-shadow-sm); }
.gl-building { background: var(--rw-bg); }
.gl-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gl-t { min-width: 0; }
.gl-title { font-size: 16px; font-weight: 650; color: var(--rw-text); text-decoration: none; line-height: 1.35; }
.gl-title:hover { color: var(--rw-accent-ink); text-decoration: underline; }
.gl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.gl-meta code { font-family: var(--rw-font-mono); font-size: 12px; padding: 1px 7px; border-radius: var(--rw-radius-xs); background: var(--rw-rail); color: var(--rw-text-2); }
.gl-state { flex: none; }
.gl-gets { margin: 0; color: var(--rw-text-2); font-size: 14px; line-height: 1.5; }
.gl-gets .gl-fact-k { display: block; margin-bottom: 2px; }
.gl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gl-fact { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: var(--rw-radius-md); background: var(--rw-surface-2); border: 1px solid var(--rw-line-soft); min-width: 0; }
.gl-fact-k { font-size: 11.5px; font-weight: 650; letter-spacing: .02em; color: var(--rw-faint); text-transform: uppercase; }
.gl-fact-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--rw-text); min-width: 0; overflow-wrap: anywhere; }
.gl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gl-more { flex: 0 1 auto; }
.gl-more > summary { list-style: none; cursor: pointer; }
.gl-more > summary::-webkit-details-marker { display: none; }
.gl-more[open] { flex: 1 1 100%; order: 3; }
.gl-more[open] > summary { margin-bottom: 4px; }
.gl-form { max-width: 520px; padding: 4px 14px 14px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); background: var(--rw-surface-2); }
.gl-form .input-sm { width: 100%; max-width: 360px; }
.gl-form-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gl-later { font-size: 13px; }
.gl-ap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rw-line-soft); font-size: 13px; color: var(--rw-text-2); }
.gl-ap-c { display: inline-flex; gap: 8px; align-items: center; }
.gl-ap-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rw-faint); }
.gl-modal .gl-form { max-width: none; border: 0; padding: 0; background: none; }
@media (max-width: 760px) {
  .gl-facts { grid-template-columns: 1fr; }
  .gl-row { padding: 16px; }
  .gl-acts .btn-primary { width: 100%; }
}

/* ── "Updated <time>" on every card (build hq-card-updated; static/stamp.js): the card's last line, bottom right ── */
.upd-row { display: flex; justify-content: flex-end; margin-top: 10px; min-width: 0; }
.upd { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.3; color: var(--rw-faint); white-space: nowrap; cursor: default; }
.upd svg { width: 12px; height: 12px; flex: none; opacity: .85; }
.upd time { font-variant-numeric: tabular-nums; }
.upd-none { font-style: italic; }
.q-item > .upd-row { margin-top: 14px; }
.bcard > .upd-row, .rcard .upd-row { margin-top: 8px; }
.qsum > .upd-row { padding: 0 16px 12px; margin-top: 4px; }
.q-ctx .upd { flex: none; }
.q-ctx-n, .q-ctx-min { white-space: nowrap; }

/* Claude's work list (build hq-mandatory-record, 19 Oct 2026): Now / Next / Promised, overdue in red */
.wl-upd { align-self: flex-end; }
.wl-behind { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--rw-radius-lg); border: 1px solid var(--rw-bad-line); background: var(--rw-bad-soft); color: var(--rw-bad-ink); font-size: 14px; line-height: 1.5; }
.snt-sum.wl-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.wl-sum-bad { border-color: var(--rw-bad-line); background: var(--rw-bad-soft); }
.wl-sum-bad .snt-sum-n { color: var(--rw-bad-ink); }
.wl-sec .sec-h { margin-bottom: 4px; }
.wl-sub { margin: 0 0 12px; }
.wl-list { list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--rw-radius-lg); min-height: 44px; }
.wl-list.wl-over { outline: 2px dashed var(--rw-accent-line); outline-offset: 2px; }
.wl-empty { padding: 12px 14px; border: 1px dashed var(--rw-line); border-radius: var(--rw-radius-md); }
.wl-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.wl-row[draggable="true"] { cursor: grab; }
.wl-row.wl-dragging { opacity: .45; }
.wl-row.wl-over { box-shadow: inset 0 3px 0 var(--rw-accent), var(--rw-shadow-sm); }
.wl-in_progress { box-shadow: inset 4px 0 0 var(--rw-accent), var(--rw-shadow-sm); }
.wl-waiting { box-shadow: inset 4px 0 0 var(--rw-warn), var(--rw-shadow-sm); }
.wl-overdue { border-color: var(--rw-bad-line); box-shadow: inset 4px 0 0 var(--rw-bad), var(--rw-shadow-sm); }
.wl-h { display: flex; align-items: flex-start; gap: 10px; }
.wl-grip { flex: none; width: 18px; height: 24px; color: var(--rw-faint); display: inline-flex; align-items: center; }
.wl-grip svg { width: 18px; height: 18px; fill: currentColor; }
.wl-n { flex: none; min-width: 24px; height: 24px; border-radius: var(--rw-radius-pill); background: var(--rw-rail); color: var(--rw-text-2); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.wl-t { flex: 1 1 auto; min-width: 0; }
.wl-title { font-size: 15px; font-weight: 650; color: var(--rw-text); line-height: 1.4; }
.wl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.wl-build { font-size: 13px; color: var(--rw-accent-ink); text-decoration: none; }
.wl-build:hover { text-decoration: underline; }
.wl-ctrl { flex: none; display: flex; align-items: center; gap: 6px; }
.wl-ctrl .q-icon-btn { height: 30px; padding: 0 7px; }
.wl-ctrl .q-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.wl-pr { width: auto; min-width: 84px; }
.wl-facts { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 10px; }
.wl-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl-fact-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rw-muted); }
.wl-fact-v { font-size: 13.5px; color: var(--rw-text-2); overflow-wrap: anywhere; }
.wl-eta { font-variant-numeric: tabular-nums; color: var(--rw-text); font-weight: 600; }
.wl-eta-late { color: var(--rw-bad-ink); }
.wl-late { display: block; font-size: 12px; font-weight: 600; color: var(--rw-bad-ink); }
.wl-note { margin: 0; font-size: 13px; color: var(--rw-text-2); line-height: 1.5; }
.wl-moved { margin: 0; font-size: 12.5px; color: var(--rw-warn-ink); }
.wl-done summary { cursor: pointer; list-style: none; }
.wl-done summary h2 { display: inline; }
.wl-done-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-done-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-md); background: var(--rw-surface); }
.wl-done-t { font-weight: 600; color: var(--rw-text); }
@media (max-width: 720px) {
  .snt-sum.wl-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-facts { grid-template-columns: minmax(0, 1fr); }
  .wl-h { flex-wrap: wrap; }
  .wl-ctrl { width: 100%; justify-content: flex-end; }
}