/* Watchkeep console, page layouts (C22). Every color comes from the tokens in style.css; this file has no literal color.
   One section per page, in the order of the sidebar. */

/* ---------- the projects board (Overview) ---------- */
.card.project .title { font-size: 15px; }
.card.project .meta.spend.warn { color: var(--amber); }
.card.project .meta.spend.over { color: var(--red); }
.card .meta.forecast { color: var(--muted); }
.figures { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 24px; margin-top: 6px; }
.spark .day { flex: 1 1 0; min-height: 1px; background: var(--accent); border-radius: 2px 2px 0 0; opacity: .8; }
.cap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; }
.cap-row button { margin-left: 0; }

/* ---------- task board, run controls and the drawer's question ---------- */
.tasks-board .col { flex-basis: 240px; min-width: 230px; }
.tasks-board .col.is-empty { flex: 0 0 170px; min-width: 150px; }
.write-section { margin: 0 0 18px; }
.write-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.write-controls h3, .write-controls .note, .write-controls ol, .write-controls .owner-flow, .write-controls > div { flex-basis: 100%; margin: 4px 0; }
.write-controls h3 { margin-top: 0; font-size: 13px; }
.write-controls input[type="text"], .owner-flow textarea { flex: 1 1 100%; }
.owner-flow { display: flex; flex-direction: column; gap: 8px; }
.question { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.options { margin: 8px 0; padding: 0; list-style: none; }
.options li { margin: 0 0 4px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r); overflow-wrap: anywhere; color: var(--text-2); font-size: 13px; }
.options li.rec, .choices li.rec { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* ---------- requests, threads and decision cards ---------- */
.pagehead select { min-width: 180px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.row input { flex: 1 1 200px; width: auto; }
.card-like, .decision { padding: 16px 18px; margin: 0 0 12px; max-width: 820px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.decision.is-open { border-left: 3px solid var(--accent); }
.decision > .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.decision .question { font-size: 15px; font-weight: 550; margin: 10px 0; }
.decision textarea { margin: 8px 0; }
.choices { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.choices li { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.choices li.rec { background: var(--accent-soft); }
.choices li .meta { color: var(--text-2); }
.choices li button { justify-self: start; margin-bottom: 4px; }
.answered { font-weight: 600; overflow-wrap: anywhere; color: var(--green); }
.words { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.thread { list-style: none; padding: 0; margin: 10px 0 16px; max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.thread li { position: relative; max-width: 88%; padding: 10px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); overflow-wrap: anywhere; }
.thread li.orch { align-self: flex-start; border-bottom-left-radius: 4px; }
.thread li.person { align-self: flex-end; background: var(--accent-soft); border-color: transparent; color: var(--text); border-bottom-right-radius: 4px; }
.thread li .meta { display: inline; margin-left: 4px; }
.thread li .state { color: var(--muted); font-style: italic; }
.composer { max-width: 820px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.composer .row { margin-bottom: 0; }
.form { max-width: 640px; }
.flash:empty { display: none; }
.text.body { padding: 12px 14px; margin: 10px 0 18px; max-width: 820px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.drawer > ul { padding-left: 20px; }

@media (min-width: 1200px) {
  .requests-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: visible; }
  .requests-board .col, .requests-board .col.is-empty { min-width: 0; }
}

/* ---------- chat: the panel on every page, the full page ---------- */
.chat-toggle { position: fixed; right: 24px; bottom: 24px; z-index: 35; min-height: 44px; padding: 0 20px; border-radius: var(--r-full); box-shadow: var(--shadow-lg); }
.chat-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 34; width: min(560px, 100vw); padding: 14px 14px 80px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; }
.chat-page { height: calc(100vh - 57px); padding: 16px 28px; }
.chat-shell { display: flex; gap: 16px; height: 100%; min-height: 0; }
.chat-panel .chat-shell { flex-direction: column; gap: 10px; }
.chat-side { display: flex; flex-direction: column; gap: 8px; width: 300px; flex: none; max-height: 100%; }
.chat-panel .chat-side { width: auto; max-height: 30%; }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 2px; }
.chat-item { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 8px 10px; text-align: left; border: 1px solid transparent; border-radius: var(--r); background: transparent; box-shadow: none; color: var(--text); }
.chat-item:hover { background: var(--hover); }
.chat-item.chat-on { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.chat-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; min-height: 0; }
.chat-banner { padding: 8px 12px; border-radius: var(--r); background: var(--blue-soft); color: var(--blue); font-size: 13px; }
.chat-banner.chat-owner { background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.chat-status { color: var(--muted); font-size: 12.5px; }
.chat-meta { color: var(--muted); font-size: 12px; }
.chat-note { padding: 8px 12px; border-radius: var(--r); background: var(--amber-soft); color: var(--amber); }
.chat-empty { margin: auto; width: 100%; }
.chat-empty .chat-actions { justify-content: center; margin-top: 12px; }
.chat-transcript { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: var(--r-lg); overflow-wrap: anywhere; }
.chat-msg p { margin: 4px 0; }
.chat-user { align-self: flex-end; background: var(--accent); color: var(--accent-text); border-bottom-right-radius: 4px; }
.chat-user .chat-who { color: var(--accent-text); background: var(--accent); }
.chat-assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-who { font-size: 11px; font-weight: 600; color: var(--muted); }
.chat-plain { white-space: pre-wrap; }
.chat-tool { align-self: stretch; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 12px; color: var(--muted); }
.chat-tool summary { cursor: pointer; min-height: 24px; font-family: var(--mono); overflow-wrap: anywhere; color: var(--text-2); }
.chat-error, .chat-bad { color: var(--red); }
.chat-msg.chat-error { background: var(--red-soft); }
.chat-approval { align-self: stretch; max-width: 100%; background: var(--surface); border: 1px solid var(--border); }
.chat-approval-pending { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.chat-approval-head { margin: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.chat-waiting { color: var(--amber); font-size: 12px; font-weight: 600; }
.chat-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.chat-form textarea { min-height: 64px; border: 0; padding: 4px; box-shadow: none; }
.chat-form textarea:focus { box-shadow: none; }
.chat-form:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-panel[hidden], .chat-shell [hidden] { display: none; }

/* ---------- findings ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.findings-view table.findings td { overflow-wrap: anywhere; }
.findings-view .panel { margin-top: 16px; }
.findings-view .review, .findings-view .feature { margin: 8px 0; }
.findings-view input.reason { display: block; width: 100%; min-width: 8em; max-width: 18em; margin-bottom: 4px; }

/* ---------- docs: a two-pane list and reader; the timeline ---------- */
.docs-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
.docs-list-col { min-width: 0; position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.docs-body-col { min-width: 0; }
.doc-group h3 { margin: 12px 6px 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.doc-row { margin: 0 0 4px; padding: 8px 10px; border-color: transparent; background: transparent; box-shadow: none; }
.doc-row:hover { background: var(--hover); }
.doc-row[aria-current="true"] { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.doc-body h3 { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.doc-text { padding: 8px 20px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow-wrap: anywhere; }
.timeline-page, .timeline { max-width: 920px; }
.pinned { margin: 8px 0 16px; padding: 10px 14px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-lg); overflow-wrap: anywhere; }
.pinned summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.tl-list { position: relative; padding-left: 22px; border-left: 2px solid var(--border); margin-left: 6px; }
.tl-day { position: relative; margin: 20px 0 10px; font-size: 13px; color: var(--text); }
.tl-day::before { content: ""; position: absolute; left: -29px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.tl-entry { position: relative; margin: 0 0 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.tl-entry::before { content: ""; position: absolute; left: -27px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.tl-time { margin-right: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-text { overflow-wrap: anywhere; }
.tl-more { margin: 12px 0; }

/* ---------- setup checklist, the onboarding list, the new-project wizard ---------- */
.setup .step, .onboarding-list .card { max-width: 820px; margin: 0 0 10px; cursor: default; }
.setup .step { position: relative; padding-left: 44px; }
.setup .step::before { content: ""; position: absolute; left: 16px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); }
.setup .step:has(.chip.ok)::before { background: var(--green); border-color: var(--green); }
.setup .step:has(.chip.bad)::before { border-color: var(--red); }
.stepper { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 550; font-size: 13px; counter-increment: step; }
.stepper li::before { content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 11px; }
.stepper li + li::before { margin-left: 0; }
.stepper li:not(:last-child)::after { content: ""; width: 32px; height: 1.5px; margin: 0 10px; background: var(--border-strong); }
.stepper li.now { color: var(--text); }
.stepper li.now::before { border-color: var(--accent); box-shadow: var(--ring); color: var(--accent-ink); }
.setup .step button { margin: 6px 6px 0 0; }
.wizard .form, .wizard .stack { max-width: 640px; }
.wizard label.stack { gap: 4px; margin: 0; }
.wizard .stack span { color: var(--text-2); font-size: 12.5px; font-weight: 550; }
.wizard input[type="text"], .wizard input[type="number"], .wizard select, .wizard textarea { width: 100%; }
.wizard textarea { min-height: 56px; }
.wizard fieldset { margin: 0 0 12px; background: var(--surface); }

/* ---------- the Next feature panel ---------- */
.launch { max-width: 1100px; }
.launch-candidates { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-width: 820px; }
.launch-candidate { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 2px 8px; margin: 0; }
.launch-candidate[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.launch-key { font-weight: 650; }
.launch-reason { flex-basis: 100%; font-size: 12px; margin: 0; }
.launch-plan { max-width: 920px; margin: 12px 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.launch-plan h3, .launch-plan h4 { margin: 10px 0 6px; overflow-wrap: anywhere; }
.launch-gates { list-style: none; padding: 0; margin: 6px 0; }
.launch-gate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.launch-gate:last-child { border-bottom: 0; }
.launch-detail { flex-basis: 100%; font-size: 12px; }
.launch-prompt { padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }

/* ---------- attention and registry ---------- */
.attention-view { max-width: 920px; }
.attention-list { display: grid; gap: 10px; }
.card.attention { cursor: default; margin: 0; }
.card.attention .title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.card.attention button { margin-top: 8px; }
.registry-view { overflow-x: auto; }

/* ---------- playbooks and standing decisions ---------- */
.playbooks { max-width: 1000px; }
.playbooks .pb-row { padding: 14px 16px; margin: 0 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.playbooks .pb-row h3 { margin: 0 0 4px; font-size: 14px; }
.playbooks .pb-row select, .playbooks .pb-row button { margin: 6px 6px 0 0; }
.playbooks .pb-act, .playbooks .pb-waiter { padding: 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.playbooks .pb-act.escalated .title, .playbooks .pb-act.relayed .title { color: var(--amber); }
.pb-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; max-width: 820px; margin-top: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pb-form .field { min-width: 160px; }
.standing { margin-top: 24px; }

/* ---------- health and fleet ---------- */
.health, .fleet { max-width: 1200px; }
.health .stats { margin: 14px 0 12px; }
.health .stat .value { overflow-wrap: anywhere; }
.hl-run { padding: 8px 0; border-bottom: 1px solid var(--border); }
.hl-run:last-child { border-bottom: 0; }
.hl-run .title { font-weight: 600; overflow-wrap: anywhere; }
.hl-run.warn .title { color: var(--amber); }
.fleet .mono, .fleet .panel-line.mono { font-family: var(--mono); font-size: 12px; }
.fleet-portal > .stats { margin: 12px 0; }
.fleet-portal > .panels { margin-top: 0; }
.fleet details.fold { margin-top: 16px; }
.fleet details.fold > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }

/* ---------- Conversations: the list on the left, the open conversation on the right (C21a, C21b, C33) ---------- */
.split { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.listpane { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-height: calc(100vh - 110px); overflow-y: auto; position: sticky; top: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.listpane .search { width: 100%; margin-bottom: 6px; }
.listpane .group { margin: 12px 6px 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.listpane .group[hidden], .listpane .row[hidden] { display: none; }
.listpane .row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin: 0; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--r); color: var(--text); }
.listpane .row:hover { background: var(--hover); text-decoration: none; }
.listpane .row[aria-current="true"] { background: var(--accent-soft); }
.listpane .row .t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listpane .row .age { color: var(--muted); font-size: 12px; white-space: nowrap; }
.listpane .row .s { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.listpane .row .chip { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.listpane .row .chip svg.i { width: 12px; height: 12px; vertical-align: 0; }
.listpane .row.more { display: block; text-align: center; color: var(--muted); font-size: 12.5px; }
.detail-hint { padding: 24px; text-align: center; }
.sess-detail { min-width: 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.sess-back { display: none; }
.dhead h2 { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.dhead .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--muted); font-size: 13px; }
.dhead .facts .details { margin: 0; }
.sess-state { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 550; }
.sess-tabs { margin: 16px 0 14px; }
.tab .count { margin-left: 6px; padding: 0 6px; border-radius: var(--r-full); background: var(--grey-soft); font-size: 11px; line-height: 17px; }
.sess-detail .banner.readonly { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 400; }
.toolline { flex: none; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.toolline-head { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 10px; color: var(--text-2); cursor: pointer; list-style: none; }
.toolline-head::-webkit-details-marker { display: none; }
.toolline-head > svg.i:last-child { margin-left: auto; }
.toolline[open] .toolline-head > svg.i:last-child { transform: rotate(180deg); }
.toolline-body { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; }
/* the conversation: its own scroller, the newest entry at the bottom */
.sess-conv { position: relative; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 300px); min-height: 320px; overflow-y: auto; padding-right: 4px; }
.sess-conv > .sess-older { align-self: center; }
.sess-msg { max-width: 92%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow-wrap: anywhere; }
.sess-msg.user, .sess-bubble { align-self: flex-end; max-width: 80%; background: var(--accent-soft); border-color: transparent; }
.sess-msg.assistant { align-self: flex-start; border-color: transparent; padding-left: 0; }
.sess-when { margin: 0 0 4px; color: var(--muted); font-size: 11.5px; }
.sess-tool, .sess-thinking, .sess-group, .sess-cmd { flex: none; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.sess-group > .sess-tool { margin: 4px 0; background: var(--surface); }
.sess-tool-head, .sess-group-head, .sess-thinking summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); min-width: 0; cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.sess-tool-head .chip { margin: 0; }
.sess-tool-name { flex: none; font-weight: 600; color: var(--text); }
.sess-tool-sum { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.sess-dur { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sess-result, .sess-thinking pre { max-height: 420px; overflow: auto; padding: 10px 12px; border-radius: var(--r); background: var(--term-bg); color: var(--term-text); font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.sess-result.error { color: var(--term-bad); background: var(--term-bg); }
.sess-event { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.sess-pill { position: sticky; bottom: 8px; align-self: center; box-shadow: var(--shadow-lg); }
.sess-pill[hidden] { display: none; }
.sess-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
/* plan, tasks, agents, workflows */
.sess-plan-count { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.sess-plan-list { margin: 0; padding: 0; list-style: none; }
.sess-plan-list li, .sess-phase { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sess-plan-list li { padding: 7px 10px; border-radius: var(--r); overflow-wrap: anywhere; }
.sess-plan-list li.done { color: var(--text-2); }
.sess-plan-list li.now { background: var(--accent-soft); color: var(--text); font-weight: 550; }
.sess-detail .pip { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface); font-size: 11px; }
.sess-detail .done > .pip { background: var(--green); border-color: var(--green); color: var(--surface); }
.sess-detail .done > .pip svg.i { width: 12px; height: 12px; vertical-align: 0; }
.sess-detail .now > .pip { border-color: var(--accent); box-shadow: var(--ring); }
.sess-task { margin: 0 0 8px; padding: 2px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.sess-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: var(--tap); padding: 6px 0; cursor: pointer; }
.sess-task-name { display: flex; flex-direction: column; min-width: 0; }
.sess-task-name b { overflow-wrap: anywhere; }
.sess-id, .sess-kind { color: var(--muted); font-size: 12px; }
.sess-cmdline { flex: 1 1 200px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.sess-wf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 18px 0 10px; font-weight: 650; font-size: 13px; }
.sess-wf-head:first-child { margin-top: 0; }
.sess-wf-facts { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.sess-wf-what { margin: -4px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.sess-wf-group { margin: 8px 0; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } /* C36 Q4: the runs of one workflow, folded */
.sess-wf-grouphead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: var(--tap); padding: 10px 0; cursor: pointer; font-size: 13px; }
.sess-wf-grouphead .sess-wf-count { color: var(--muted); font-size: 12.5px; }
.sess-wf-grouphead .sess-wf-what { flex-basis: 100%; margin: 0; }
.sess-wf-group .sess-wf-head { margin: 10px 0; font-weight: 500; }
.sess-event { flex-wrap: wrap; } /* C36 Q6: a line with its Details beside it */
.tl-entry > .details { margin-top: 6px; } /* C36 Q2: the whole text of an entry is under its Details */
.sess-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 14px; }
.sess-phase { font-weight: 550; font-size: 13px; }
.sess-phase.done { color: var(--text-2); }
.sess-phase.now { color: var(--text); }
.sess-phase + .sess-phase::before { content: ""; width: 28px; height: 1.5px; margin: 0 10px; background: var(--border-strong); }
.sess-wf-result summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; font-size: 13px; }
.sess-detail table, .sess-detail .tablewrap { margin: 8px 0; }

/* ---------- admin ---------- */
.admin section { margin: 0 0 28px; }
.admin .scroller { display: block; overflow-x: auto; padding: 0; }
.admin table.grid select { min-width: 110px; }
.admin form.stack { max-width: 560px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.admin label.stack { gap: 4px; margin: 0; }
.ppl td.who { min-width: 190px; } /* C35 P1: the name column never shrinks below a name (the phone's card drops the floor) */

/* ---------- the sign-in page: a centred card ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(420px, 100%); padding: 28px 28px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.auth-card .logo { justify-content: center; padding: 0 0 18px; font-size: 17px; }
.auth-card h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; text-align: center; }
.auth-card section > .note { text-align: center; }
.auth-card .input { width: 100%; }
.providers:empty { display: none; }
.providers a.button { width: 100%; }
.providers:not(:empty) + form { padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .docs-layout, .split, .grid2, .stats.three { grid-template-columns: minmax(0, 1fr); }
  .docs-list-col { position: static; max-height: 50vh; }
  .chat-page { height: auto; min-height: calc(100vh - 61px); padding: 12px 16px; }
  .chat-shell { flex-direction: column; }
  .chat-side { width: auto; max-height: 30vh; }
  .chat-page .chat-transcript { min-height: 50vh; }
  body.chat-open .chat-panel { width: 100vw; padding: 12px 12px 80px; border-left: 0; }
  .chat-toggle { right: 16px; bottom: 16px; }
  .chat-msg { max-width: 100%; }
  .thread li { max-width: 100%; }
  .sess-detail { padding: 14px; }
  .split.has-detail .listpane { display: none; }
  .split:not(.has-detail) .detail { display: none; }
  .sess-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -4px 0 6px; }
  /* C35 P16: a session's tabs, System's tabs and the Logs sub-tabs scroll sideways inside their bar: never two lines, never cut off */
  .sess-tabs, .ptabs, .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .sess-tabs .tab, .ptabs .tab, .subtabs a { flex: none; white-space: nowrap; }
  .sess-conv { max-height: 70vh; }
  .sess-msg, .sess-msg.user, .sess-bubble { max-width: 100%; }
  .sess-detail .tablewrap { overflow-x: visible; }
  .sess-table, .sess-table tbody, .sess-table tr, .sess-table td { display: block; width: 100%; }
  .sess-table thead { display: none; }
  .sess-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .sess-table td { display: flex; gap: 10px; min-width: 0; padding: 3px 12px; border: 0; overflow-wrap: anywhere; }
  .sess-table td::before { content: attr(data-label); flex: 0 0 96px; color: var(--muted); font-size: 12px; }
  .pagehead select { min-width: 0; flex: 1 1 100%; }
  .findings-view table.findings td, table.grid td { min-width: 96px; overflow-wrap: break-word; }
  .tl-list { padding-left: 16px; }
  .tl-day::before { left: -23px; }
  .tl-entry::before { left: -21px; }
}

/* ---------- a page that opens with a back link: its title is the page title ---------- */
.content > .back + h2 { margin: 0 0 8px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }
.content > .row, .content > .note, .content > .meta { max-width: 820px; }
.admin section > h2 { font-size: 16px; margin: 0 0 10px; }
.col > h3 { padding: 4px 6px 10px; }

/* C31: Details toggles (ids and machine names), folded boards, the read-only banner, grouped findings */
.details { margin-top: 6px; font-size: 12.5px; }
.details > summary { display: inline-block; cursor: pointer; color: var(--muted); list-style: none; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before { content: "\25B8\00a0"; }
.details[open] > summary::before { content: "\25BE\00a0"; }
.details-body { margin-top: 4px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.details-body .dlabel { color: var(--muted); }
.board-empty { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.banner.readonly { background: var(--amber-soft); color: var(--amber); }
.findings-view .lead { font-size: 16px; font-weight: 650; }
.findings .hits .hit { margin: 4px 0; }

/* ---------- C33: Security, People and System in the approved mockup's shape ---------- */
.small { font-size: 12.5px; }
.muted { color: var(--muted); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.toolrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: none; margin: 0 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.strip .problems { flex: 1 0 100%; }
.findings-view .seg { display: inline-flex; height: auto; margin: 0; padding: 3px; gap: 2px; overflow: visible; background: var(--grey-soft); border-radius: var(--r); }
.findings-view .seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-weight: 550; box-shadow: none; }
.findings-view .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.findings-view .seg .count { margin-left: 6px; color: var(--muted); font-size: 12px; }
.filterfold > summary { display: inline-block; padding: 4px 10px; color: var(--text-2); cursor: pointer; border: 1px solid var(--border); border-radius: var(--r); }
.filterfold .filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.table td.wh, .table th.wh { color: var(--muted); font-size: 12.5px; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.toolrow .toggle { position: relative; }
.toolrow .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.table td.nw, .table td.act { white-space: nowrap; }
.table tr.more td { color: var(--muted); text-align: center; cursor: pointer; }
.finding-open td { background: var(--surface-2); }
.finding-open .finding-body { display: grid; gap: 4px; }
.finding-open .hit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finding-open input.reason { max-width: 24em; }
button.det { min-height: 26px; padding: 0 6px; border: 0; border-radius: var(--r); background: transparent; color: var(--text-2); font-size: 12.5px; }
button.det:hover { background: var(--hover); }
.rolekey { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px; color: var(--text-2); font-size: 13px; }
.rolekey b { color: var(--text); }
.ppl td { vertical-align: middle; }
.ppl td select { min-width: 112px; }
.ppl td select.noaccess { color: var(--muted); }
.ppl .row-actions { width: 1%; white-space: nowrap; text-align: right; }
details.menu { position: relative; display: inline-block; }
details.menu > summary { padding: 2px 10px; border-radius: var(--r); color: var(--muted); cursor: pointer; list-style: none; font-size: 18px; line-height: 1.2; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover { background: var(--hover); }
.menu-pop { position: absolute; right: 0; z-index: 5; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 190px; margin-top: 4px; padding: 6px; text-align: left; white-space: normal; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.menu-pop .btn { justify-content: flex-start; }
.sechead { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.sechead h2 { margin: 0; font-size: 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 18px 0; align-items: start; }
.grid2 > section > .sechead:first-child { margin-top: 0; }
.kv { display: flex; flex-direction: column; gap: 12px; }
.kv .k { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kv .k span:last-child { color: var(--muted); text-align: right; }
.kv .meter { margin-top: 6px; }
.meter.amber > i { background: var(--amber); }
.meter.red > i { background: var(--red); }
.overage-card { max-width: 560px; }
.health .name { font-weight: 550; }
.health .table td { vertical-align: middle; }
@media (max-width: 900px) {
  .grid2, .stats.three { grid-template-columns: minmax(0, 1fr); }
  .listpane { position: static; max-height: none; }
  /* C35 P1: People on a phone is one card per person: the name, then a row per project with its role */
  .people { overflow: visible; }
  .ppl, .ppl tbody { display: block; width: 100%; border: 0; background: none; }
  .ppl thead { display: none; }
  .ppl tr { display: block; position: relative; margin: 0 0 12px; padding: 10px 0 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .ppl td { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 6px 14px; border: 0; }
  .ppl td.who { display: block; min-width: 0; padding-right: 56px; overflow-wrap: normal; }
  .ppl td[data-label]::before { content: attr(data-label); flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 13px; }
  .ppl td select { flex: 0 0 auto; min-width: 128px; }
  .ppl td[colspan] { display: block; }
  .ppl .row-actions { position: absolute; top: 6px; right: 6px; width: auto; padding: 0; }
}