:root {
  --ink: #202521;
  --muted: #6b736d;
  --line: #d9ded8;
  --surface: #ffffff;
  --canvas: #f3f5f1;
  --soft: #e8ece7;
  --green: #2f695b;
  --green-dark: #235247;
  --amber: #d68b2d;
  --blue: #4b6f91;
  --red: #a84e43;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }

.app-header {
  height: 64px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { color: inherit; text-decoration: none; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: white; font-family: Georgia, serif; }
/* Centred while the tabs fit, left-aligned and scrollable once they do not,
   so a narrow header clips neither the brand nor the status pills. */
.view-tabs { display: flex; height: 100%; gap: 24px; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); padding: 0 2px; font-size: 13px; font-weight: 600; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.estimation-tab { display: inline-flex; align-items: center; gap: 6px; }
.tab-badge { padding: 2px 5px; border-radius: 4px; background: var(--amber); color: #24170a; font-size: 9px; line-height: 1.2; }
.estimation-tab.attention:not(.active) { color: #855313; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.agent-health { font-size: 12px; color: var(--muted); margin-right: 8px; }
.agent-health i, .live-indicator i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4d9c72; margin-right: 5px; }
.refresh-pacing { font-size: 11px; font-weight: 700; color: #855313; background: #fdf3df; border: 1px solid #e8d5a6; border-radius: 999px; padding: 3px 9px; white-space: nowrap; cursor: default; }
.github-health { min-height: 30px; border: 0; background: transparent; color: var(--muted); padding: 0 7px; font-size: 11px; font-weight: 700; }
.github-health::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #929b94; }
.github-health.healthy::before { background: #4d9c72; }
.github-health.expired::before { background: var(--red); }
.github-health.unavailable::before { background: var(--amber); }
.github-alert { padding: 10px 28px; border-bottom: 1px solid #e4c47c; background: #fff6df; color: #704b18; font-size: 12px; font-weight: 650; }
.github-alert.auth-required { border-bottom-color: #dca49d; background: #fff0ee; color: #7c352d; }
.agent-action-status { padding: 9px 28px; border-bottom: 1px solid #b6c0d8; background: #eef1f8; color: #33436b; font-size: 12px; font-weight: 650; }
.agent-action-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: agent-action-spin .8s linear infinite; }
.task-action { display: grid; gap: 3px; margin: 8px 0 14px; padding: 10px 12px; border-left: 3px solid var(--blue); background: #eef3f7; color: #334b61; font-size: 11px; }
.task-action.failed { border-left-color: var(--red); background: #fff0ee; color: #7c352d; }
.task-action details { margin-top: 3px; }
.task-action summary { cursor: pointer; font-weight: 700; }
.task-action pre { max-height: 180px; margin: 6px 0 0; overflow: auto; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.65); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes agent-action-spin { to { transform: rotate(360deg); } }
.defer-health { min-height: 30px; border: 0; background: transparent; color: var(--muted); padding: 0 7px; font-size: 11px; font-weight: 700; }
.defer-health::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #929b94; }
.defer-health.free::before { background: var(--blue); }
.defer-health.idle::before { background: #4d9c72; }
.defer-health.expired::before { background: var(--amber); }
.defer-health.attention::before { background: var(--red); }
/* Last, so a subscription that is not delivering never shows a healthy dot. */
.defer-health.offline::before { background: var(--amber); }
.defer-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dca49d; background: #fff0ee; color: #7c352d; font-size: 12px; font-weight: 650; }
.defer-alert.expired { border-bottom-color: #e4c47c; background: #fff6df; color: #704b18; }
.defer-alert span { font-weight: 500; margin-left: 6px; }
.defer-alert-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.log-off-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e4c47c; background: #fff6df; color: #704b18; font-size: 12px; font-weight: 650; }
.log-off-alert.blocking { border-bottom-color: #b6c0d8; background: #eef1f8; color: #33436b; }
.log-off-alert.override { border-bottom-color: #dca49d; background: #fff0ee; color: #7c352d; }
.log-off-alert span { font-weight: 500; margin-left: 6px; }
.log-off-alert-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.off-hours-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #b9cbb6; background: #f2f8ef; color: #38562f; font-size: 12px; font-weight: 650; }
.off-hours-alert.blocking { border-bottom-color: #c6bfa0; background: #faf6e8; color: #5d5327; }
.off-hours-alert span { font-weight: 500; margin-left: 6px; }
.off-hours-alert-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.settings-view .section-heading { margin-bottom: 18px; }
.settings-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 20px 22px; }
.settings-panel + .settings-panel { margin-top: 18px; }
.admission-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.admission-settings-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.admission-settings-grid small { font-weight: 500; line-height: 1.35; }
.model-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.model-provider { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; display: grid; gap: 10px; margin: 0; }
.model-provider legend { font-size: 12px; font-weight: 700; padding: 0 6px; }
.model-provider p { margin: 0; font-size: 11px; line-height: 1.45; }
.model-provider label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.settings-panel-heading h2 { margin: 0; font-size: 16px; }
.settings-panel-heading p { color: var(--muted); margin: 6px 0 0; max-width: 620px; line-height: 1.55; font-size: 13px; }
.log-off-windows { display: flex; flex-direction: column; gap: 10px; }
.log-off-window { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.log-off-window label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.log-off-window-enabled { flex-direction: row !important; align-items: center; gap: 7px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; }
.log-off-window-note { color: var(--muted); font-size: 12px; margin-right: auto; }
.log-off-settings-row { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.log-off-settings-row label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.log-off-settings-row .log-off-lead { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.log-off-settings-row input { width: 90px; }
.log-off-settings-row button { margin-left: auto; }
.log-off-settings-note { color: var(--muted); font-size: 12px; margin: 14px 0 0; line-height: 1.55; }
.log-off-settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.off-hours-days { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.off-hours-day { flex-direction: row !important; align-items: center; gap: 5px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 500 !important; }
.slow-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.slow-action-list li { display: grid; gap: 4px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; padding: 10px 14px; font-size: 12px; color: var(--muted); }
.slow-action-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.slow-action-headline strong { color: var(--ink); font-size: 13px; word-break: break-word; }
.slow-action-duration { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--amber); flex: 0 0 auto; }
.latency-history { display: grid; gap: 8px; margin-bottom: 12px; }
.latency-history p { margin: 0; font-size: 12px; color: var(--muted); }
.latency-day-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.latency-day { display: grid; justify-items: center; gap: 2px; min-width: 40px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--muted); }
.latency-day-count { font-weight: 700; font-size: 12px; color: var(--ink); }
.latency-day.clean { border-color: #bcd9c2; background: #f2f9f4; }
.latency-day.background { border-color: #e4c47c; background: #fff6df; }
.latency-day.breached { border-color: #dca49d; background: #fff0ee; }
.latency-day.breached .latency-day-count { color: #7c352d; }
.latency-day-rate { font-size: 10px; color: var(--muted); }
.project-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dca49d; background: #fff0ee; color: #7c352d; font-size: 12px; font-weight: 650; }
.project-alert.warning, .project-alert.info, .project-alert.unrecognized { border-bottom-color: #e4c47c; background: #fff6df; color: #704b18; }
.project-alert span { font-weight: 500; margin-left: 6px; }
.project-alert-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.deploy-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dca49d; background: #fff0ee; color: #7c352d; font-size: 12px; font-weight: 650; }
.deploy-alert span { font-weight: 500; margin-left: 6px; }
.deploy-alert-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#authCodeInput { flex: 0 0 auto; width: 240px; min-width: 200px; padding: 4px 8px; font-size: 12px; border: 1px solid #dca49d; border-radius: 4px; }
.health-alert { padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #dca49d; background: #fff0ee; color: #7c352d; font-size: 12px; font-weight: 650; }
.health-alert span { font-weight: 500; margin-left: 6px; }
.health-panel { border: 1px solid var(--line); background: var(--surface); padding: 20px 22px; }
.health-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.health-panel-heading h2 { margin: 3px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 500; }
.health-overall { border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.health-overall.healthy { background: #e5f1eb; color: var(--green-dark); }
.health-overall.degraded { background: #f7e4e1; color: #873a31; }
.health-overall.unknown { background: #eceeed; color: #5d655f; }
.health-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.health-check { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; }
.health-check > div { display: flex; align-items: center; gap: 7px; }
.health-check i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #4d9c72; }
.health-check.degraded i { background: var(--red); }
.health-check.unknown i { background: #929b94; }
.health-check strong { font-size: 12px; }
.health-check span { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.health-check p { margin: 7px 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.watchdog-status { margin: 10px 0 0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.watchdog-status:empty { display: none; }

.deployment-banner { padding: 18px 34px; border-bottom: 1px solid #d7c187; background: #fff8e8; }
.deployment-banner-inner { max-width: 1472px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, .65fr) minmax(320px, 1.35fr); gap: 36px; align-items: center; }
.deployment-summary h2 { margin: 4px 0 3px; font-size: 16px; letter-spacing: 0; }
.deployment-summary p { margin: 0; color: #735424; font-size: 12px; line-height: 1.45; }
.deployment-summary .deployment-hold { margin-top: 6px; color: #6b4b12; font-weight: 600; }
.deployment-summary #deploymentForce { margin-top: 10px; }
.deployment-banner ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; color: #4d4639; font-size: 12px; line-height: 1.45; }
.deployment-banner li { break-inside: avoid; padding: 2px 0 2px 3px; }
.deployment-banner li::marker { color: var(--amber); }

.supervisor-banner { padding: 18px 34px; border-bottom: 1px solid #c6cbd6; background: #f2f4f9; }
.supervisor-banner-inner { max-width: 1472px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, .65fr) minmax(220px, 1fr) auto; gap: 28px; align-items: center; }
.supervisor-summary h2 { margin: 4px 0 3px; font-size: 16px; letter-spacing: 0; }
.supervisor-summary p { margin: 0; color: #4a5163; font-size: 12px; line-height: 1.45; }
.supervisor-banner ul { margin: 0; padding-left: 18px; color: #4d4639; font-size: 12px; line-height: 1.45; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.supervisor-banner li { padding: 2px 0 2px 3px; }
/* A promoted revision that is not in service. The one state in this panel that is
   an alarm rather than a status, and the only thing the recovery procedure is for. */
#releaseBanner.attention { background: #fff5f4; border-bottom-color: var(--red); }
#releaseBanner.attention .supervisor-summary h2 { color: var(--red); }
#releaseActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

main { max-width: 1540px; margin: 0 auto; padding: 32px 34px 70px; }
/* Six board columns inside a 1540px page are narrower than the text they hold,
   while a wide display leaves hundreds of pixels empty either side of them. The
   dashboard widens so that the sections built out of small cards — the board
   and the health grid — can use that room. The two that hold prose or a list of
   rows keep a readable measure and the page's left edge. */
main:has(#dashboardView:not(.hidden)) { max-width: 2280px; }
.focus-section, .foreground-section { max-width: 1472px; }
section + section { margin-top: 40px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading h1, .section-heading h2 { margin: 3px 0 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0; }
.section-heading h1 { font-size: 30px; }
.section-heading h2 { font-size: 25px; }
.eyebrow { text-transform: uppercase; font-size: 10px; line-height: 1.2; letter-spacing: .13em; color: var(--muted); font-weight: 800; }
.muted { color: var(--muted); font-size: 12px; }
.hidden { display: none !important; }

button { border-radius: 5px; min-height: 38px; border: 1px solid transparent; }
.primary { background: var(--ink); color: white; border-color: var(--ink); padding: 0 16px; font-weight: 700; }
.primary:hover { background: #363d38; }
.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); padding: 0 16px; font-weight: 650; }
.secondary:hover { background: var(--soft); }
.compact { min-height: 34px; font-size: 12px; display: inline-flex; align-items: center; gap: 7px; }
.compact svg { width: 14px; }
.icon-button { width: 34px; height: 34px; min-height: 34px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--muted); border-color: transparent; }
.icon-button:hover { background: var(--soft); color: var(--ink); }
.icon-button svg { width: 16px; height: 16px; }
.icon-button svg, .compact svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.focus-section { background: #e6ebe5; border: 1px solid #d0d7d0; padding: 26px 28px 28px; }
.focus-heading { align-items: center; }
.focus-heading-actions { display: flex; align-items: center; gap: 12px; }
.live-indicator { color: var(--green-dark); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.live-indicator i { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.focus-defer { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-defer h3 { margin: 10px 0 0; font-size: 20px; }
.focus-defer p { color: var(--muted); max-width: 640px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.focus-defer.attention h3 { color: var(--red); }
.focus-defer.expired h3 { color: #855313; }
.defer-focus-actions { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; }
.focus-alert { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-alert h3 { margin: 10px 0 0; font-size: 20px; }
.focus-alert p { color: var(--muted); max-width: 640px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.focus-alert.critical h3 { color: var(--red); }
.focus-alert.warning h3 { color: #855313; }
.alert-focus-actions { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; }
.auth-device-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15em; letter-spacing: .08em; user-select: all; }
.auth-code-form { display: flex; align-items: end; gap: 10px; margin-top: 16px; }
.auth-code-form label { display: grid; gap: 6px; }
.error-text { color: var(--red); }
.agent-auth-grid { display: flex; flex-direction: column; gap: 10px; }
.agent-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.agent-auth-detail { display: grid; gap: 4px; font-size: 12px; }
.agent-auth-detail strong { font-size: 13px; }
/* Scoped to the status line: a bare `span` here outranks .error-text and would
   render the failure reason in the muted grey rather than the error colour. */
.agent-auth-detail span[data-auth-status] { color: var(--muted); }
.agent-auth-detail a { word-break: break-all; }
.agent-auth-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.agent-auth-actions input { width: 220px; }
.focus-log-off { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-log-off h3 { margin: 10px 0 0; font-size: 20px; color: #33436b; }
.focus-log-off p { color: var(--muted); max-width: 640px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.focus-morning-protocol { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-morning-protocol h3 { margin: 10px 0 0; font-size: 20px; color: #33436b; }
.focus-morning-protocol p { color: var(--muted); max-width: 640px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.morning-protocol-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 220px; }
.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.log-off-override { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; width: 280px; }
.log-off-override label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.log-off-override input { width: 100%; }
.focus-off-hours { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-off-hours h3 { margin: 10px 0 0; font-size: 20px; color: #4a5a33; }
.focus-off-hours p { color: var(--muted); max-width: 560px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.off-hours-check-in { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 320px; }
.off-hours-condition { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--ink); }
.off-hours-condition input { margin-top: 2px; flex: 0 0 auto; }
.off-hours-check-back { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.off-hours-check-back .off-hours-lead { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.off-hours-check-back input { width: 90px; }
.focus-empty { min-height: 132px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-empty p { color: var(--muted); max-width: 640px; margin: 7px 0 0; line-height: 1.55; font-size: 13px; }
.focus-empty .focus-empty-eta { color: var(--ink); font-weight: 700; }
.focus-empty-actions { display: grid; gap: 8px; }
.focus-task { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 28px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-task.manual { grid-template-columns: minmax(0, 760px); }
.focus-foreground { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-foreground h3 { margin: 10px 0 0; font-size: 20px; }
.foreground-progress { margin: 8px 0 0; color: #555e58; font-size: 12px; }
.foreground-progress span::before { content: "·"; margin: 0 7px; }
.foreground-focus-actions { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; }
.focus-orgr { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #cbd3cb; padding-top: 20px; }
.focus-orgr h3 { margin: 10px 0 0; font-size: 20px; }
.orgr-actions { display: flex; align-items: end; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: end; }
.orgr-minimum-form, .orgr-completion-form { display: flex; align-items: end; gap: 8px; }
.foreground-completion-form { display: flex; align-items: end; gap: 8px; }
.completion-amount { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.completion-amount input { width: 116px; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 7px; }
.task-kicker { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; }
.project-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.task-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focus-task h3 { margin: 10px 0 8px; font-size: 20px; letter-spacing: 0; }
.danger-button { flex: 0 0 auto; color: var(--red); }
.danger-button:hover { background: #f7e4e1; color: #873a31; }
.danger-button:disabled { cursor: not-allowed; opacity: .35; background: transparent; }
.wont-review-button { color: var(--red); margin-left: auto; }
.task-description-editor { display: block; margin-bottom: 8px; }
.task-description-editor > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.task-description-editor textarea { min-height: 94px; }
.task-description-actions { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.task-description-actions button:disabled { cursor: default; opacity: .5; }
.focus-task p { margin: 0 0 18px; color: #555e58; line-height: 1.55; font-size: 13px; }
.task-flow-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; color: var(--muted); font-size: 11px; }
.task-flow-meta span + span::before { content: "·"; margin-right: 8px; }
.priority-label { text-transform: capitalize; font-weight: 800; }
.priority-label.emergency { color: #a51d13; }
.priority-label.high { color: var(--red); }
.priority-label.low { color: #66716a; }
.model-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.task-focus-actions { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.task-setup-editor { display: flex; align-items: end; gap: 8px; margin: 0 0 12px; }
.task-setup-editor label { min-width: 0; display: grid; flex: 1; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.task-setup-editor select { min-width: 0; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.8); }
.task-dependency-editor { max-width: 430px; display: grid; gap: 5px; margin: -4px 0 14px; color: var(--muted); font-size: 10px; font-weight: 700; }
.task-dependency-editor select { min-width: 0; border: 1px solid #c7cec7; border-radius: 5px; padding: 4px; color: var(--ink); background: rgba(255,255,255,.8); font-size: 12px; font-weight: 500; }
.task-dependency-editor .field-note { margin: 0; font-weight: 500; }
.task-startup-editor { display: flex; align-items: end; gap: 8px; margin: 0 0 12px; }
.task-startup-editor label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.task-startup-editor input { width: 70px; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.8); }
.priority-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.priority-control select { height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.8); }
.defer-minutes { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.defer-minutes input { width: 58px; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 6px; color: var(--ink); background: rgba(255,255,255,.8); }
.task-blocker-control { max-width: 430px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; margin: 0 0 18px; color: var(--muted); font-size: 10px; font-weight: 700; }
.task-blocker-control select { min-width: 0; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.8); }
.external-blocker-editor { max-width: 620px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, auto) auto; align-items: end; gap: 8px; margin: -6px 0 18px; }
.external-blocker-editor label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.external-blocker-editor input { min-width: 0; height: 34px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 8px; color: var(--ink); background: rgba(255,255,255,.8); }
.external-blocker-review { min-width: 0; }
.blocker-review-presets { display: flex; gap: 4px; margin-top: 5px; }
.blocker-review-presets button { min-height: 24px; padding: 2px 6px; border-color: #c7cec7; background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; }
.external-blocker-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr); gap: 12px; }
.blocked-notice { max-width: 620px; margin: -6px 0 18px; padding: 10px 12px; border-left: 3px solid var(--amber); background: #fff7e8; color: #68491f; font-size: 11px; line-height: 1.45; }
.blocked-notice button { min-height: 0; border: 0; padding: 0; background: transparent; color: inherit; font-weight: 750; text-decoration: underline; }
.blocked-notice strong { margin-right: 4px; }
.blocked-notice span { display: block; margin-top: 3px; color: #80643c; }
.blocked-notice .usage-switch-actions { display: flex; gap: 12px; margin-top: 5px; }
.blocked-notice.review-due { border-left-color: var(--red); background: #fff2ef; color: #71352e; }
.status-actions { margin-top: 4px; }
.prompt-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; margin-bottom: 7px; }
textarea { width: 100%; resize: vertical; min-height: 142px; border: 1px solid #c7cec7; border-radius: 5px; padding: 12px; background: rgba(255,255,255,.8); color: var(--ink); line-height: 1.5; }
textarea:focus, input:focus, select:focus { outline: 2px solid rgba(47,105,91,.2); border-color: var(--green); }
/* The settings and the launch buttons wrap rather than overflow: a picker
   widens with the model names a provider offers, and the buttons have to stay
   reachable at every width the card is laid out at. */
.prompt-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 10px; gap: 14px; }
.prompt-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.prompt-buttons { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.agent-select { display: flex; background: #d8ded8; border-radius: 5px; padding: 3px; }
.model-select { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.model-select select { min-height: 30px; min-width: 130px; max-width: 220px; }
.agent-select button { min-height: 30px; border: 0; background: transparent; padding: 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.agent-select button.active { background: white; color: var(--ink); box-shadow: 0 1px 3px rgba(20,30,20,.1); }
.turn-estimate { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.turn-estimate input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.turn-estimate input[type="number"] { width: 58px; height: 32px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 6px; color: var(--ink); background: rgba(255,255,255,.8); }
.turn-estimate input[type="number"]:disabled { opacity: .45; }
.turn-estimate.dark { color: #aeb9b0; }
.turn-estimate.dark input[type="number"] { border-color: #4b574e; background: #29312b; color: #eef3ef; }
.run-panel { background: #1f2521; color: #dce4dd; min-height: 220px; padding: 16px; display: flex; flex-direction: column; }
.run-panel.needs-input { border-top: 3px solid var(--amber); }
.run-panel-header { display: flex; align-items: center; justify-content: space-between; color: #aeb9b0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.run-panel-header > span { min-width: 0; overflow-wrap: anywhere; }
.conversation { flex: 1; max-height: 320px; overflow: auto; margin-top: 14px; }
.message { border-top: 1px solid #39413b; padding: 12px 0; }
.message:first-child { border-top: 0; padding-top: 0; }
.message > span { display: block; color: #8f9b92; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.message > div, .run-empty { white-space: pre-wrap; word-break: break-word; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.message.user > div { color: #aeb9b0; }
/* A reply the report above already states, kept for the record rather than read. */
.message-detail summary { color: #8f9b92; cursor: pointer; font-size: 10px; font-weight: 700; }
.message-detail > div { margin-top: 8px; white-space: pre-wrap; word-break: break-word; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.run-activity { border-top: 1px solid #39413b; margin-top: 10px; padding-top: 9px; }
.run-activity summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c3cdc5; cursor: pointer; font-size: 10px; font-weight: 750; }
.run-activity summary::marker { color: #758078; }
.activity-summary { color: #758078; font-size: 9px; font-weight: 600; }
.activity-log { max-height: 220px; overflow: auto; margin-top: 9px; border: 1px solid #39413b; border-radius: 5px; background: #1a201c; }
.activity-entry { position: relative; padding: 8px 10px 8px 17px; border-top: 1px solid #303832; }
.activity-entry:first-child { border-top: 0; }
.activity-entry::before { content: ""; position: absolute; top: 12px; left: 8px; width: 4px; height: 4px; border-radius: 50%; background: #718078; }
.activity-entry > span { display: block; color: #aeb9b0; font-size: 9px; font-weight: 750; letter-spacing: .03em; }
.activity-entry pre { margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; color: #d5ddd7; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.activity-entry.status::before { background: #5d9c85; }
.activity-entry.tool::before { background: #c38a43; }
.activity-entry.message::before { background: #6f93b4; }
.activity-entry.error::before { background: #d16b5e; }
.activity-entry.error pre { color: #efb1aa; }
.reply-box { display: block; border-top: 1px solid #465048; padding-top: 12px; margin-top: 10px; }
.reply-box > span { display: block; color: #aeb9b0; font-size: 10px; font-weight: 700; margin-bottom: 6px; }
.reply-box textarea { min-height: 78px; max-height: 150px; background: #29312b; border-color: #4b574e; color: #eef3ef; }
.reply-box .pr-description-editor { min-height: 260px; max-height: none; }
.reply-box input { width: 100%; height: 38px; border: 1px solid #4b574e; border-radius: 5px; padding: 0 10px; background: #29312b; color: #eef3ef; }
.reply-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
/* Pasted screenshots waiting for the next turn. The tray appears both in the
   light prompt area and inside the dark run panel, so the panel restates the
   few colours rather than the layout. */
.attachment-tray { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; background: var(--soft); }
.attachment-tray-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.attachment-note { text-transform: none; letter-spacing: 0; font-weight: 600; }
.attachment-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.attachment-list li { display: flex; align-items: center; gap: 9px; min-width: 0; }
.attachment-list img { width: 46px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); }
.attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 650; }
.attachment-size { color: var(--muted); font-size: 10px; font-weight: 600; }
.attachment-tray.empty { border-style: dashed; padding: 7px 10px; }
.attachment-add { display: flex; align-items: center; gap: 7px; margin-top: 8px; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 650; }
.attachment-tray.empty .attachment-add { margin-top: 0; }
.attachment-add:hover { color: var(--ink); }
.attachment-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-add span { text-decoration: underline; text-underline-offset: 2px; }
.attachment-add:focus-within span { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.run-panel .attachment-tray { border-color: #465048; background: #262e28; }
.run-panel .attachment-add { color: #aeb9b0; }
.run-panel .attachment-add:hover { color: #dfe6e1; }
.run-panel .attachment-tray-header { color: #aeb9b0; }
.run-panel .attachment-name { color: #dfe6e1; }
.run-panel .attachment-size { color: #8f9b92; }
.run-panel .attachment-list img { border-color: #465048; background: #1a201c; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachments img { width: 96px; height: 66px; object-fit: cover; border-radius: 4px; border: 1px solid #465048; }
.fresh-session-agent { display: flex; align-items: center; gap: 7px; color: #cbd4cf; font-size: 11px; font-weight: 700; }
.fresh-session-agent select { min-height: 30px; border: 1px solid #5a6760; border-radius: 5px; background: #26332d; color: white; padding: 0 26px 0 9px; }
.queued-reply { margin-top: 14px; }
.queued-reply textarea { min-height: 68px; }
.reply-actions .turn-estimate { margin-right: auto; }
/* The location row sits in the dark run panel, where the light pill the start
   card uses would be the brightest thing on the card. */
.agent-select.dark-select { background: #26332d; border: 1px solid #5a6760; }
.agent-select.dark-select button { color: #aeb9b0; }
.agent-select.dark-select button.active { background: #3c4a42; color: white; box-shadow: none; }
/* What continuing would do to a task that is about to change machines. It
   stands between the reply and the button that sends it, because it is a
   consequence of pressing that button rather than a status of the task. */
.switch-notice { margin-top: 10px; padding: 9px 11px; border-left: 3px solid var(--blue); background: #29312b; color: #b9c5bc; font-size: 11px; line-height: 1.5; }
.resume-button { justify-content: center; background: #edf2ee; border-color: #edf2ee; color: var(--ink); }
.resume-button:hover { background: white; }
.review-reply { margin-top: 16px; }
.review-overall-choice { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: #aeb9b0; font-size: 10px; font-weight: 700; }
.review-overall-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.review-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.review-actions .turn-estimate { margin-right: auto; }
.self-review { margin-top: 16px; padding: 14px 0; border-top: 1px solid #465048; border-bottom: 1px solid #465048; }
.self-review-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.self-review-header > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.self-review-header strong { font-size: 11px; }
.self-review-status { color: #8f9b92; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.self-review-status.complete { color: #9bc5aa; }
.self-review-status.needs_input, .self-review-status.failed { color: #e4c47c; }
.self-review-rounds { margin-top: 12px; }
.self-review-rounds details { border-top: 1px solid #39413b; padding: 9px 0; }
.self-review-rounds summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; color: #c8d0c9; font-size: 10px; font-weight: 750; text-transform: capitalize; }
.self-review-rounds > details > p { margin: 9px 0 0; color: #b9c5bc; font-size: 11px; line-height: 1.5; }
.self-review-finding { padding: 10px 0; border-bottom: 1px solid #303832; }
.self-review-finding > div:first-child { display: flex; align-items: center; gap: 7px; }
.self-review-finding code { color: #c8dff5; font-size: 10px; overflow-wrap: anywhere; }
.self-review-finding p { margin: 7px 0; color: #dce4dd; font-size: 11px; line-height: 1.5; }
.self-review-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding-left: 9px; border-left: 2px solid #5b665e; color: #aeb9b0; font-size: 10px; line-height: 1.5; }
.self-review-decision strong { color: #e4c47c; text-transform: uppercase; font-size: 9px; }
.self-review-response { padding-left: 9px; border-left: 2px solid #648372; }
.self-review-question { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border-left: 3px solid var(--amber); background: #29312b; }
.self-review-question strong { color: #e4c47c; font-size: 11px; line-height: 1.5; }
.self-review-question textarea { min-height: 76px; background: #202722; border-color: #4b574e; color: #eef3ef; }
.self-review-question button { justify-self: end; }
.self-review-activity { margin-top: 12px; }
.feedback-wait-control { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.feedback-wait-duration { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: #aeb9b0; font-size: 9px; font-weight: 700; white-space: nowrap; }
.feedback-wait-duration input { width: 52px; height: 27px; border: 1px solid #4b574e; border-radius: 5px; padding: 0 6px; background: #29312b; color: #eef3ef; }
.github-compare-link { margin-right: auto; color: #c8dff5; font-size: 12px; font-weight: 650; }
.dark-secondary { background: transparent; border-color: #5b665e; color: #dce4dd; }
.dark-secondary:hover { background: #303832; }
.light-primary { background: #edf2ee; border-color: #edf2ee; color: var(--ink); }
.light-primary:hover { background: white; }
.pull-request-link { display: block; color: #c8dff5; font-size: 12px; margin-top: 16px; word-break: break-word; }
.review-waiting { margin-top: 16px; padding: 12px; border-left: 3px solid var(--blue); background: #29312b; color: #b9c5bc; font-size: 11px; line-height: 1.5; }
.github-feedback { margin-top: 14px; border-top: 1px solid #465048; }
.github-feedback > div { padding: 11px 0; border-bottom: 1px solid #39413b; }
.github-feedback strong { color: #c8dff5; font-size: 10px; }
.github-feedback p { margin: 5px 0 0; color: #dce4dd; white-space: pre-wrap; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.review-plan { margin-top: 14px; border-top: 1px solid #465048; }
.review-plan-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; color: #dce4dd; font-size: 11px; }
.review-plan-heading span { color: #8f9b92; }
.review-suggestion, .critical-area { padding: 12px 0; border-bottom: 1px solid #39413b; }
.review-choice { display: flex; align-items: center; gap: 8px; color: #c8d0c9; font-size: 10px; }
.review-choice input { width: 16px; height: 16px; }
.review-choice code, .critical-area code { color: #c8dff5; overflow-wrap: anywhere; }
.severity { padding: 3px 5px; border-radius: 3px; color: #18201a; background: #aeb9b0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.severity.critical { background: #e8a39a; }
.severity.warning { background: #e4c47c; }
.severity.suggestion { background: #9fc3df; }
.review-suggestion textarea, .critical-area textarea { min-height: 76px; margin-top: 9px; background: #29312b; border-color: #4b574e; color: #eef3ef; }
.review-suggestion textarea:disabled { opacity: .45; }
.critical-area p { margin: 7px 0 0; color: #b9c5bc; font-size: 11px; }
.code-context { margin-top: 9px; overflow: hidden; border: 1px solid #465048; background: #181d1a; }
.code-context-lines { max-height: 320px; overflow: auto; }
.code-context-status { display: block; padding: 10px; color: #8f9b92; font-size: 10px; }
.code-context-status.error { color: #e8a39a; }
.code-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 20px; font: 10px/20px ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-line > span { padding: 0 8px; border-right: 1px solid #303832; color: #718078; text-align: right; user-select: none; }
.code-line code { min-width: max-content; padding: 0 9px; color: #b9c5bc; white-space: pre; }
.code-line.selected { background: #313b33; }
.code-line.selected > span { color: #a9b8ae; background: #3b493f; }
.code-line.selected code { color: #eef3ef; }
.code-expand { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 0; background: #252c27; color: #9daba1; font-size: 9px; font-weight: 700; }
.code-expand:hover { background: #303832; color: #dce4dd; }
.code-expand:disabled { cursor: wait; opacity: .5; }
.code-expand svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.review-plan-empty { padding: 14px 0; border-bottom: 1px solid #39413b; color: #8f9b92; font-size: 11px; }
.post-merge { margin-top: 14px; border-top: 1px solid #465048; }
/* Both post-merge cards sit inside .focus-task, whose paragraph colour is for
   the light column and would leave this line near-black on the dark panel. */
.post-merge .post-merge-summary, .post-merge-report .post-merge-summary { margin: 8px 0 0; color: #dce4dd; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.post-merge-steps { margin: 9px 0 0; padding-left: 18px; color: #b9c5bc; font-size: 11px; line-height: 1.6; }
.post-merge-steps li { margin-top: 3px; }
/* The report of what the steps did sits above the conversation, so the outcome
   and anything left for the user are read before the turn's own prose. */
.post-merge-report { margin-top: 12px; padding-bottom: 13px; border-bottom: 1px solid #39413b; }
.post-merge-report .review-plan-heading { margin-top: 0; }
.post-merge-report-steps { margin-top: 11px; }
.post-merge-report-steps strong, .post-merge-user-actions strong { display: block; color: #8f9b92; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.post-merge-report-steps ol { margin: 6px 0 0; padding-left: 18px; color: #b9c5bc; font-size: 11px; line-height: 1.6; }
.post-merge-report-steps li { margin-top: 3px; }
.post-merge-user-actions { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #5b665e; border-radius: 5px; background: #252c27; }
.post-merge-user-actions p { margin: 6px 0 0; color: #b9c5bc; font-size: 11px; line-height: 1.5; }
.post-merge-user-actions ul { margin: 7px 0 0; padding-left: 18px; color: #f0dcc6; font-size: 11px; line-height: 1.6; }
.post-merge-user-actions ul li { margin-top: 3px; }
.post-merge-user-actions.needed { border-left-color: var(--amber); background: #2c2720; }
.post-merge-user-actions.needed strong { color: #e3b978; }
/* The optional description is usually a line, so this box stays out of the way
   of the review controls it sits under. Its label border already separates it. */
.follow-up-task textarea { min-height: 52px; }
.address-plan { margin-top: 14px; border-top: 1px solid #465048; }
.address-item { padding: 13px 0; border-bottom: 1px solid #39413b; }
.address-source strong { color: #c8dff5; font-size: 10px; }
.address-source p, .address-outcome p { margin: 6px 0 0; color: #dce4dd; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.address-source p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.address-outcome { margin-top: 10px; padding-left: 10px; border-left: 2px solid #5b665e; }
.resolution { display: inline-block; padding: 3px 5px; border-radius: 3px; background: #9fc3df; color: #18201a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.resolution.pushback { background: #e4c47c; }
.resolution.ambiguous { background: #e8a39a; }
.address-route { margin: 12px 0 0; padding: 0; border: 0; }
.address-route legend, .address-response > span { color: #8f9b92; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.address-route-options { display: inline-flex; max-width: 100%; margin-top: 6px; padding: 3px; border-radius: 5px; background: #181d1a; }
.address-route-options label { min-width: 0; cursor: pointer; }
.address-route-options input { position: absolute; opacity: 0; pointer-events: none; }
.address-route-options span { display: block; min-height: 30px; padding: 8px 10px; border-radius: 4px; color: #9eaaa1; font-size: 9px; font-weight: 700; line-height: 1.4; text-align: center; }
.address-route-options input:checked + span { background: #39443c; color: #eef3ef; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.address-route-options input:focus-visible + span { outline: 2px solid #9fc3df; outline-offset: 1px; }
.address-response { display: block; margin-top: 11px; }
.address-response textarea { min-height: 76px; margin-top: 6px; background: #29312b; border-color: #4b574e; color: #eef3ef; }
.address-editor { border-top: 0; padding-top: 0; }
.branch-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

.board-actions { display: flex; align-items: center; gap: 14px; }
.kanban { display: grid; grid-template-columns: repeat(6, minmax(230px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.column { min-height: 330px; background: #e9ece8; border-top: 3px solid var(--column-color); padding: 13px; }
.column-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.column-title { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; font-weight: 800; }
.column-count { color: var(--muted); font-size: 11px; }
/* The cards ask the column how much room they were given, so a card in a
   narrow column can stack the parts of its meta row instead of squeezing
   them into columns too thin to hold a word. */
.column-body { container: board-column / inline-size; display: flex; flex-direction: column; gap: 9px; min-height: 260px; }
.column.drag-over { background: #dde4de; outline: 1px dashed var(--green); outline-offset: -5px; }
.task-card { background: white; border: 1px solid #d7dcd7; border-radius: 6px; padding: 13px; cursor: pointer; box-shadow: 0 1px 1px rgba(20,30,20,.03); }
.task-card:hover { border-color: #aeb8af; }
.task-card.subtask { margin-left: calc(var(--subtask-depth, 1) * 13px); border-left: 3px solid #c2cdc4; }
.subtask-parent { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; border: 0; background: none; padding: 0 0 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; }
.subtask-parent span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subtask-parent:hover { color: var(--green); }
.task-card.blocked { border-left: 3px solid var(--amber); }
.task-card.dragging { opacity: .45; }
.task-card h3 { font-size: 13px; line-height: 1.35; margin: 8px 0 7px; }
.task-card p { font-size: 11px; line-height: 1.45; color: var(--muted); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subtask-summary { border-top: 1px solid #e5e8e5; margin: 10px 0; padding-top: 8px; display: grid; gap: 5px; font-size: 11px; }
.subtask-summary button { border: 0; background: #f5f7f5; border-radius: 4px; padding: 6px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px; text-align: left; align-items: center; color: inherit; }
.subtask-summary button span:last-child { color: var(--muted); text-transform: capitalize; }
.subtask-summary .subtask-alert { color: #8a5a12; font-weight: 700; }
.subtask-summary button.needs-attention { background: #fff4e3; box-shadow: inset 2px 0 0 var(--amber); }
.subtask-summary button.needs-attention span:last-child { color: #8a5a12; }
.priority-badge { margin-left: auto; border: 1px solid #c5ccc6; border-radius: 4px; padding: 2px 5px; color: #59635c; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.priority-badge.emergency { border-color: #a51d13; color: #fff; background: #a51d13; }
.priority-badge.high { border-color: #d7a7a0; color: var(--red); background: #fff5f3; }
.priority-badge.low { color: #717a74; background: #f4f6f4; }
/* The model and the status line sit left of the card's actions. Both used to
   carry `overflow-wrap: anywhere`, which reports a one-character minimum width
   to the grid: whenever the actions wanted more room than the column had, the
   text column collapsed and the card rendered a vertical strip of single
   letters. `break-word` still breaks a word too long for the line, without
   offering the grid a one-character column. */
.card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; font-size: 10px; color: var(--muted); }
.provider { display: inline-flex; min-width: 0; align-items: center; gap: 5px; overflow-wrap: break-word; }
.provider::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.provider.manual::before { background: var(--muted); }
/* A blocker or a queue reason can run to a paragraph; the card shows the start
   of it and the full text stays on the element's title. */
.task-estimates { grid-column: 1; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-action { border: 0; background: none; min-height: 22px; padding: 0; color: var(--green); font-size: 10px; font-weight: 800; }
.card-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.card-action.stop-action { color: var(--red); }
/* Below this the two halves cannot both hold a line, so the actions take a row
   of their own rather than starving the text beside them. */
@container board-column (max-width: 300px) {
  .card-meta { grid-template-columns: minmax(0, 1fr); }
  .card-actions { grid-column: 1; grid-row: auto; }
}
.task-more-actions { position: relative; }
.task-more-actions summary { cursor: pointer; list-style: none; }
.task-more-actions summary::-webkit-details-marker { display: none; }
.task-actions-menu { position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); width: 218px; padding: 5px; border: 1px solid #cdd4ce; border-radius: 6px; background: white; box-shadow: 0 8px 24px rgba(20,30,20,.14); }
.task-actions-menu button { width: 100%; border: 0; border-radius: 4px; padding: 9px 10px; background: none; color: var(--ink); font-size: 10px; font-weight: 700; text-align: left; }
.task-actions-menu button:hover { background: var(--soft); }
.task-actions-menu button:disabled { color: var(--muted); cursor: default; }

.agent-jobs-section { border-top: 1px solid var(--line); padding-top: 28px; }
.agent-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.agent-job { min-width: 0; position: relative; border: 1px solid var(--line); border-left: 3px solid #929b94; border-radius: 8px; background: var(--surface); padding: 13px 14px; }
.agent-job.active { border-left-color: var(--blue); }
.agent-job.attention { border-left-color: var(--red); background: #fff9f8; }
.agent-job-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.agent-job-status { display: inline-flex; align-items: center; gap: 5px; color: #68716a; }
.agent-job-status i { width: 7px; height: 7px; border-radius: 50%; background: #929b94; }
.agent-job.active .agent-job-status { color: #315f87; }
.agent-job.active .agent-job-status i { background: var(--blue); }
.agent-job.attention .agent-job-status { color: var(--red); }
.agent-job.attention .agent-job-status i { background: var(--red); }
.agent-job h3 { margin: 9px 0 4px; font-size: 13px; }
.agent-job p { min-height: 30px; margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.agent-job .card-action { display: block; margin-left: auto; }
.agent-jobs-empty { grid-column: 1 / -1; margin: 0; border: 1px dashed var(--line); padding: 18px; color: var(--muted); font-size: 11px; text-align: center; }

.foreground-section { border-top: 1px solid var(--line); padding-top: 28px; }
.suggestion { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: #fff8e9; border-left: 3px solid var(--amber); padding: 13px 16px; margin-bottom: 12px; }
.suggestion-icon { color: var(--amber); font-size: 18px; }
.suggestion strong { font-size: 13px; }
.suggestion span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.time-pill { white-space: nowrap; font-size: 11px; color: #80551e; border: 1px solid #e8c98f; padding: 5px 8px; border-radius: 4px; }
.foreground-list { background: var(--surface); border: 1px solid var(--line); }
.foreground-item { min-height: 52px; padding: 0 10px 0 15px; display: grid; grid-template-columns: 32px 1fr auto 48px 34px; gap: 8px; align-items: center; border-bottom: 1px solid #e7eae7; }
.foreground-item:last-child { border: 0; }
.foreground-item.disabled { opacity: .5; }
.toggle { width: 18px; height: 18px; min-height: 18px; border: 1px solid #aeb6af; background: white; border-radius: 3px; padding: 0; }
.toggle.on { background: var(--green); border-color: var(--green); }
.toggle.on::after { content: "✓"; color: white; font-size: 12px; }
.foreground-summary { min-width: 0; padding: 9px 0; }
.foreground-summary strong { display: block; font-size: 12px; }
.foreground-summary span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.foreground-item time { color: var(--muted); font-size: 11px; }
.waiting-work-actions { display: flex; align-items: center; gap: 10px; }
.waiting-work-source, .board-project-filter { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.waiting-work-source select, .board-project-filter select { height: 28px; border: 1px solid #c7cec7; border-radius: 5px; padding: 0 6px; font-size: 11px; }
.board-project-filter select { max-width: 190px; }
.orgr-item { min-height: 52px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-left: 3px solid var(--muted); }
.orgr-item.status-red { border-left-color: #b4452f; }
.orgr-item.status-yellow { border-left-color: #c08a1e; }
.orgr-item.status-green { border-left-color: #3f7c6c; }
.orgr-item.status-purple { border-left-color: #6c5fa8; }
.orgr-item.status-blue { border-left-color: #3a6ea5; }
.orgr-summary { min-width: 0; }
.orgr-summary strong { display: block; font-size: 12px; }
.orgr-summary span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.orgr-error { display: block; margin-top: 6px; color: #b4452f; font-size: 11px; }
/* Full width inside the wrapping action row, so a notice sits under the
   buttons rather than beside them, and reads the same in the panel. */
.orgr-action-notices { flex: 1 0 100%; display: grid; gap: 6px; margin-top: 8px; text-align: left; }
.orgr-action { display: grid; gap: 3px; padding: 9px 11px; border-left: 3px solid var(--blue); background: #eef3f7; color: #334b61; font-size: 11px; }
.orgr-action.failed { border-left-color: var(--red); background: #fff0ee; color: #7c352d; }
.orgr-action button { justify-self: start; margin-top: 5px; }
.foreground-focus:disabled { color: var(--muted); cursor: default; }
.foreground-edit { color: var(--muted); }

.projects-view, .history-view, .estimation-view, .notes-view, .recurring-view, .usage-view { max-width: 1050px; margin: 0 auto; }
.usage-providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.usage-provider { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 20px; }
.usage-provider h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 16px; font-size: 17px; }
.usage-check { display: flex; align-items: center; gap: 10px; }
.usage-provider-age { color: var(--muted); font-size: 10px; font-weight: 600; }
.usage-provider.unavailable { border-style: dashed; }
.usage-provider-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.usage-provider-stale { margin: 0 0 14px; padding: 9px 11px; border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; background: #fff7e8; color: #68491f; font-size: 11px; line-height: 1.45; }
.usage-windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usage-window { border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.usage-window > span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.usage-window strong { display: block; margin-top: 7px; font-size: 20px; }
.usage-window small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.usage-meter { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 9px; background: #e5e9e5; }
.usage-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.usage-window.warning .usage-meter i { background: var(--amber); }
.usage-window.exhausted .usage-meter i { background: var(--red); }
.usage-history-heading { display: flex; align-items: end; justify-content: space-between; margin: 32px 0 12px; }
.usage-history-heading h2 { margin: 3px 0 0; font-size: 18px; }
.usage-history { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.usage-event { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.usage-event:last-child { border-bottom: 0; }
.usage-event-agent { border-radius: 10px; padding: 3px 7px; background: #eef1f8; color: #33436b; font-size: 10px; font-weight: 750; text-align: center; }
.usage-event-agent.claude { background: #fff1e8; color: #864b27; }
.usage-event strong, .usage-event small { display: block; }
.usage-event small, .usage-event time { margin-top: 3px; color: var(--muted); font-size: 10px; }
.notes-heading { align-items: center; }
.scratchpad-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); border: 1px solid var(--line); background: var(--surface); }
.scratchpad-editor-panel { min-width: 0; padding: 18px; border-right: 1px solid var(--line); }
.scratchpad-editor-panel > textarea { min-height: 520px; resize: vertical; border: 0; border-radius: 0; padding: 2px; background: transparent; font-size: 14px; line-height: 1.65; }
.scratchpad-editor-panel > textarea:focus { outline: 0; }
.scratchpad-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.scratchpad-results { min-width: 0; padding: 20px; background: #f7f8f5; }
.scratchpad-results-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.scratchpad-results-heading h2 { margin: 4px 0 0; font-size: 17px; letter-spacing: 0; }
.scratchpad-summary { margin: 15px 0; color: #505953; font-size: 12px; line-height: 1.55; }
.scratchpad-notice, .scratchpad-error { margin: 14px 0; padding: 10px 12px; border-left: 3px solid var(--amber); background: #fff7e8; color: #68491f; font-size: 11px; line-height: 1.45; }
.scratchpad-error { border-left-color: var(--red); background: #fff0ee; color: #7c352d; }
.scratchpad-loading { min-height: 300px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--green-dark); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.scratchpad-loading i { width: 8px; height: 8px; border-radius: 50%; background: #4d9c72; animation: pulse 1.6s infinite; }
.scratchpad-suggestions { display: grid; gap: 10px; }
.scratchpad-suggestion { padding: 14px; border: 1px solid #d7dcd7; border-radius: 6px; background: white; }
.scratchpad-suggestion.applied, .scratchpad-suggestion.dismissed { opacity: .65; }
.suggestion-heading { display: flex; align-items: center; gap: 8px; }
.suggestion-kind { color: var(--green-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.suggestion-heading .priority-badge { margin-left: auto; }
.suggestion-target { min-width: 0; margin-left: auto; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.scratchpad-suggestion h3 { margin: 9px 0 5px; font-size: 13px; line-height: 1.4; }
.scratchpad-suggestion p { margin: 0; color: #555e58; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.suggestion-meta { margin-top: 8px; color: var(--muted); font-size: 10px; }
.suggestion-rationale { margin-top: 10px; padding-left: 9px; border-left: 2px solid #b9c8bc; color: #59635c; font-size: 10px; line-height: 1.45; }
.suggestion-changes { margin-top: 12px; border-top: 1px solid #e7eae7; }
.suggestion-change { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #e7eae7; }
.suggestion-change span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.suggestion-change strong { overflow-wrap: anywhere; font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
.suggestion-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.suggestion-actions button:disabled { cursor: not-allowed; opacity: .45; }
.suggestion-resolution { color: var(--green-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.scratchpad-feedback { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.scratchpad-feedback label { grid-column: 1 / -1; color: #505953; font-size: 10px; font-weight: 750; }
.scratchpad-feedback textarea { min-height: 74px; max-height: 150px; background: white; }
.scratchpad-acceptance { display: flex; justify-content: flex-end; margin-top: 12px; }
.scratchpad-acceptance button:disabled { cursor: not-allowed; opacity: .45; }
.scratchpad-history { margin-top: 28px; border-top: 1px solid var(--line); }
.scratchpad-history-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 12px; }
.scratchpad-history-heading h2 { margin: 4px 0 0; font-size: 17px; letter-spacing: 0; }
.scratchpad-history-entry { border-bottom: 1px solid var(--line); background: var(--surface); }
.scratchpad-history-entry:first-child { border-top: 1px solid var(--line); }
.scratchpad-history-entry > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 16px; cursor: pointer; }
.scratchpad-history-entry > summary::marker { color: var(--green); }
.scratchpad-history-entry > summary span { min-width: 0; }
.scratchpad-history-entry > summary strong, .scratchpad-history-entry > summary small { display: block; }
.scratchpad-history-entry > summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.scratchpad-history-entry > summary small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.scratchpad-history-entry > summary time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.scratchpad-history-body { padding: 0 16px 16px; }
.scratchpad-history-body pre { max-height: 360px; margin: 0; overflow: auto; border-left: 2px solid #b9c8bc; padding: 12px; background: #f7f8f5; color: #374039; font: inherit; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.scratchpad-history-agent-message { margin: 12px 0 0; color: #555e58; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.scratchpad-history-meta { display: flex; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.estimation-table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.estimation-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12px; }
.estimation-table th, .estimation-table td { height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.estimation-table thead th { height: 38px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.estimation-table tbody th { font-size: 12px; font-weight: 700; }
.bucket-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 2px; }
.bucket-very-small { background: #4d9c72; }
.bucket-small { background: #78a865; }
.bucket-medium { background: #d4a23c; }
.bucket-high { background: #cf7540; }
.bucket-very-high { background: #a84e43; }
.bucket-almost-done { background: #4d9c72; }
.bucket-few-more-minutes { background: #78a865; }
.bucket-medium-work-left { background: #d4a23c; }
.bucket-high-work-left { background: #cf7540; }
.bucket-very-high-work-left { background: #a84e43; }
.estimation-recent-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 12px; }
.estimation-recent-heading h2 { margin: 0; font: 500 22px Georgia, "Times New Roman", serif; letter-spacing: 0; }
.estimation-turns th strong, .estimation-turns th span { display: block; }
.estimation-turns th span { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.estimation-turns time { white-space: nowrap; color: var(--muted); font-size: 10px; }
.estimate-status { display: inline-block; padding-left: 9px; border-left: 3px solid var(--green); font-weight: 700; }
.estimate-status.pending { border-left-color: var(--amber); color: #855313; }
.estimate-status.failed { border-left-color: var(--red); color: var(--red); }
.estimator-detail { max-width: 180px; overflow-wrap: anywhere; color: var(--muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.history-list { border-top: 1px solid var(--line); }
.history-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 18px; min-height: 84px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.history-summary { min-width: 0; }
.history-summary h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
.history-summary p { margin: 5px 0 0; color: #555e58; font-size: 11px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-summary > span, .history-row time { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.history-row time { margin-top: 0; white-space: nowrap; }
.knowledge-heading-actions { display: flex; align-items: center; gap: 10px; }
.knowledge-controls { display: flex; gap: 14px; align-items: flex-end; padding: 4px 0 16px; }
.knowledge-controls .field { margin: 0; }
.knowledge-search-field { flex: 1; min-width: 0; }
.knowledge-proposal-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0 10px; }
.knowledge-proposal-heading h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.knowledge-proposals { margin-bottom: 18px; }
.knowledge-proposal { padding: 14px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.015); }
.knowledge-list { border-top: 1px solid var(--line); }
.knowledge-entry { padding: 14px 0; border-bottom: 1px solid var(--line); }
.knowledge-entry-heading { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.knowledge-entry-heading h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
.knowledge-entry-heading time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.knowledge-entry p { margin: 8px 0 0 24px; color: #555e58; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.knowledge-entry-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.knowledge-entry-footer .muted { font-size: 10px; }
.knowledge-entry-actions { display: flex; gap: 8px; }
.knowledge-title-editor { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; }
.knowledge-body-editor { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; }
/* Maintenance: the "Fix this" agent's jobs, in the tab and on the focus card. */
.maintenance-view { max-width: 1050px; margin: 0 auto; }
.maintenance-intro { max-width: 700px; margin: -6px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.maintenance-list { display: grid; gap: 14px; }
.maintenance-job { border: 1px solid var(--line); border-left: 3px solid #929b94; border-radius: 10px; background: var(--surface); padding: 16px 18px; }
.maintenance-job.active { border-left-color: var(--blue); }
.maintenance-job.attention { border-left-color: var(--red); background: #fff9f8; }
.maintenance-job-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.maintenance-job.active .agent-job-status { color: #315f87; }
.maintenance-job.active .agent-job-status i { background: var(--blue); }
.maintenance-job.attention .agent-job-status { color: var(--red); }
.maintenance-job.attention .agent-job-status i { background: var(--red); }
.maintenance-job-body h3 { margin: 9px 0 6px; font-size: 15px; }
.maintenance-job-body .task-kicker { margin-top: 4px; }
.maintenance-detail { margin: 0 0 8px; font-size: 12px; line-height: 1.5; }
.maintenance-note, .maintenance-problem, .maintenance-verification, .maintenance-code-change, .maintenance-filed {
  margin: 0 0 8px; color: #555e58; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere;
}
.maintenance-code-change { padding: 9px 11px; border-left: 3px solid var(--amber); background: #fff7e8; color: #68491f; }
.maintenance-steps { margin: 0 0 10px; }
.maintenance-steps strong { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.maintenance-steps ul { margin: 6px 0 0; padding-left: 18px; color: #555e58; font-size: 12px; line-height: 1.55; }
.maintenance-steps.user-steps ul { color: #71352e; }
.maintenance-transcript { margin: 0 0 10px; }
.maintenance-transcript summary { color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.maintenance-transcript > div { margin-top: 8px; max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.015); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.maintenance-reply { border-top: 1px solid var(--line); }
.maintenance-reply > span { color: var(--muted); }
.maintenance-reply textarea { width: 100%; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; }
.maintenance-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.focus-maintenance { max-width: 720px; }
.blocked-notice.fixing { border-left-color: var(--blue); background: #f2f6fb; color: #2f4a68; }
.blocked-notice.fixing span { color: #47617e; }
.fix-this { max-width: 620px; margin: -4px 0 18px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.fix-this summary { color: var(--ink); font-size: 12px; font-weight: 750; cursor: pointer; }
.fix-this p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.fix-this .reply-box { border-top: 0; padding-top: 8px; margin-top: 6px; }
.fix-this .reply-box > span { color: var(--muted); }
.fix-this .reply-box textarea { width: 100%; min-height: 48px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font: inherit; font-size: 12px; resize: vertical; }
.fix-this button { margin-top: 8px; }
.fix-agent-select { margin-top: 10px; }
.fix-agent-note { margin: 6px 0 0 !important; color: #68491f !important; }
.maintenance-job-body .fix-agent-select { margin: 0 0 10px; }
.tab-badge.attention { background: var(--red); color: white; }

.project-list { border-top: 1px solid var(--line); }
.project-row { display: grid; grid-template-columns: 12px 1fr 1.5fr auto auto auto; align-items: center; gap: 20px; min-height: 78px; border-bottom: 1px solid var(--line); }
.project-row h3 { margin: 0 0 4px; font-size: 14px; }
.project-row p { margin: 0; color: var(--muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.project-row .project-stats { color: var(--muted); font-size: 11px; }
.project-row.deployment-failed { box-shadow: inset 3px 0 0 var(--red); }
.project-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.priority-chip { border: 1px solid #c5ccc6; border-radius: 4px; padding: 2px 6px; color: #59635c; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.priority-chip.high { border-color: #d7a7a0; color: var(--red); background: #fff5f3; }
.priority-chip.low { color: #717a74; background: #f4f6f4; }
.priority-chip.maintenance { color: #717a74; background: #f4f6f4; font-style: italic; }
.milestone-chip { border: 1px solid #c5ccc6; border-radius: 4px; padding: 2px 6px; color: #59635c; font-size: 10px; font-weight: 700; }
.milestone-chip.urgent, .milestone-chip.overdue, .milestone-chip.review { border-color: #d7a7a0; color: var(--red); background: #fff5f3; }
.project-backlog { color: var(--muted); font-size: 10px; }
.milestone-badge { border: 1px solid #d7a7a0; border-radius: 4px; padding: 2px 5px; color: var(--red); background: #fff5f3; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.milestone-badge.review { border-color: #c5ccc6; color: #59635c; background: #f4f6f4; }
.focus-milestone { display: grid; gap: 18px; }
.focus-milestone h3 { margin: 8px 0 6px; font-size: 17px; }
.focus-milestone p { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.milestone-actions { display: grid; gap: 10px; }
.milestone-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.milestone-actions .field { margin: 0; max-width: 220px; }
.planning-policy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.milestone-report { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.milestone-report.at_risk { color: var(--red); }
.planning-milestone { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.planning-milestone-form { display: grid; gap: 8px; }
.planning-milestone-form span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.policy-grid { display: grid; gap: 10px; margin-bottom: 14px; }
.policy-row { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); align-items: end; gap: 10px; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); }
.policy-row legend { padding: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.policy-cell { display: grid; gap: 4px; }
.policy-cell-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.policy-cell.checkbox-field { display: flex; align-items: center; gap: 8px; margin: 0; }
.policy-cell.checkbox-field span { color: var(--muted); font-size: 11px; }
.policy-globals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 4px; }
.policy-globals label { display: grid; gap: 4px; }
.policy-globals small { color: var(--muted); font-size: 10px; }
@media (max-width: 900px) {
  .policy-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-row legend { grid-column: 1 / -1; }
}
.project-row .project-checkout-error { grid-column: 1 / -1; margin: 0 0 16px; color: var(--red); font-family: inherit; font-size: 11px; word-break: normal; overflow-wrap: anywhere; }
.deployment-run { grid-column: 1 / -1; margin: 0 0 16px; color: var(--muted); font-size: 11px; }
.deployment-run summary { cursor: pointer; font-weight: 650; }
.deployment-run.failed summary { color: var(--red); }
.deployment-run.succeeded summary { color: var(--green); }
/* Amber, not green: the commands are over and the result is not proven yet. */
.deployment-run.verifying summary { color: var(--amber); }
.deployment-preparation { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.deployment-verification { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.deployment-steps { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.deployment-step code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.deployment-step-status { margin-left: 8px; text-transform: lowercase; }
.deployment-step.failed .deployment-step-status { color: var(--red); }
.deployment-step.succeeded .deployment-step-status { color: var(--green); }
.deployment-step.skipped { opacity: .55; }
.deployment-step pre { max-height: 160px; margin: 6px 0 0; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--soft); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.field-note { margin: -6px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.field-note code { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-planning-workspace { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.project-planning-workspace .section-heading { margin-bottom: 16px; }
.project-planning-workspace .section-heading h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: 0; }
.planning-output { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); border-top: 1px solid var(--line); }
.planning-output.compact { width: 100%; }
.planning-output-main, .planning-inbox { min-width: 0; padding: 20px 0; }
.planning-output-main { padding-right: 24px; }
.planning-inbox { border-left: 1px solid var(--line); padding-left: 24px; }
.planning-output h3 { margin: 10px 0; font-size: 17px; letter-spacing: 0; }
.planning-resources { max-height: 120px; margin: 10px 0; overflow: auto; color: var(--muted); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.planning-plan { max-height: 420px; margin: 16px 0 0; overflow: auto; border-left: 2px solid #9ab4a1; padding: 12px 14px; background: #f7f8f5; color: #374039; font: inherit; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A failure is written as one short sentence, but the box holds whatever the
   harness stored, including errors an older build wrote before that was true.
   Bounding it here keeps one bad run from burying the plan below it. */
.planning-error { margin: 12px 0; border-left: 3px solid var(--red); padding: 10px 12px; background: #fff0ee; color: #7c352d; font-size: 11px; line-height: 1.5; max-height: 120px; overflow-y: auto; overflow-wrap: anywhere; }
.planning-running { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--green-dark); font-size: 11px; font-weight: 750; }
.planning-running i { width: 8px; height: 8px; border-radius: 50%; background: #4d9c72; animation: pulse 1.6s infinite; }
.planning-questions { margin-bottom: 18px; border-left: 3px solid var(--amber); padding: 10px 12px; background: #fff7e8; }
.planning-questions p { margin: 7px 0 0; color: #68491f; font-size: 12px; line-height: 1.5; }
.planning-suggestions { display: grid; gap: 10px; }
.planning-suggestion { display: grid; gap: 8px; border: 1px solid #d7dcd7; border-radius: 6px; padding: 12px; background: white; }
.planning-suggestion input { font-weight: 750; }
.planning-suggestion textarea { min-height: 70px; resize: vertical; }
.planning-suggestion > div { display: flex; align-items: center; gap: 10px; }
.planning-suggestion > div span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.planning-suggestion select { width: auto; min-width: 92px; }
.planning-suggestion select[name="projectId"] { max-width: 45%; }
.planning-suggestion .planning-suggestion-target span:last-child {
  color: var(--ink);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.planning-suggestion .planning-suggestion-blocker span { font-style: italic; }
.planning-suggestion .planning-suggestion-actions { justify-content: flex-end; }
.planning-response { display: grid; gap: 8px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.planning-response label span { display: block; margin-bottom: 6px; color: #505953; font-size: 10px; font-weight: 750; }
.planning-response textarea { min-height: 82px; resize: vertical; }
.planning-response .primary { justify-self: end; }
.planning-secondary-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.planning-history { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.planning-history summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 750; }
.planning-history .message { margin-top: 10px; }
.project-edit { color: var(--muted); }
.recurring-list { border-top: 1px solid var(--line); }
.recurring-row {
  min-height: 88px;
  display: grid;
  grid-template-columns: 24px minmax(220px, 1.5fr) minmax(140px, 1fr) 120px 60px 34px 34px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.recurring-row.disabled { opacity: .55; }
.recurring-summary { min-width: 0; }
.recurring-summary > div { display: flex; align-items: center; gap: 8px; }
.recurring-summary h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
.recurring-summary p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.recurring-row > span, .recurring-row > strong { font-size: 11px; }
.recurring-row > span { color: var(--muted); }
.review-actions button:disabled { cursor: not-allowed; opacity: .45; }
.empty-list { padding: 50px 10px; text-align: center; color: var(--muted); font-size: 13px; }

dialog { width: min(560px, calc(100vw - 28px)); border: 0; border-radius: 7px; padding: 0; box-shadow: 0 25px 80px rgba(15,20,16,.25); }
dialog::backdrop { background: rgba(25,30,26,.45); }
#modalForm { padding: 24px; }
.modal-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 22px; }
.modal-header h2 { margin: 3px 0 0; font: 500 26px Georgia, serif; }
.field { display: block; margin-bottom: 15px; }
.field > span, .field > label { display: block; color: #505953; font-size: 11px; font-weight: 750; margin-bottom: 6px; }
.field input, .field select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #cdd3cd; border-radius: 5px; background: white; color: var(--ink); }
.field textarea { min-height: 94px; background: white; }
.checkbox-field { display: flex; align-items: center; gap: 9px; margin: -2px 0 15px; color: #505953; font-size: 11px; font-weight: 750; }
.checkbox-field input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.minute-adjustments { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.minute-adjustments button { min-height: 30px; border-color: var(--line); background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700; }
.minute-adjustments button:hover { background: var(--soft); color: var(--ink); }
.form-error { min-height: 18px; color: var(--red); font-size: 11px; margin: 4px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
#toast { position: fixed; bottom: 22px; right: 22px; background: var(--ink); color: white; padding: 11px 15px; border-radius: 5px; font-size: 12px; opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none; z-index: 50; }
#toast.show { opacity: 1; transform: translateY(0); }

/* The check-in list. A row is deliberately plain: a label saying what kind of
   answer it wants, how much it unblocks, how long it has waited, and at most
   three controls. The one-press rows are tinted so a check-in can be read as
   "these I can clear now, these I have to read". */
.attention-section { max-width: 1472px; }
.attention-list { border-top: 1px solid var(--line); }
.attention-empty { margin: 16px 0 0; }
.attention-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 2px; }
.attention-row.one-press { background: #f3f6f2; }
.attention-main { min-width: 0; display: grid; gap: 3px; }
.attention-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.attention-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.attention-blocks { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #7c352d; background: #fff0ee; border-radius: 999px; padding: 2px 7px; }
.attention-age { font-size: 10px; font-weight: 700; color: var(--muted); }
.attention-title { font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.attention-project { font-size: 11px; }
.attention-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.attention-link { align-items: center; display: inline-flex; min-height: 34px; border: 1px solid var(--line); border-radius: 5px; padding: 0 12px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 650; text-decoration: none; }
.attention-link:hover { background: var(--soft); }

@media (max-width: 900px) {
  .app-header { padding: 0 16px; grid-template-columns: 1fr auto; }
  .view-tabs { position: fixed; bottom: 0; left: 0; right: 0; height: 52px; justify-content: center; background: white; border-top: 1px solid var(--line); z-index: 30; }
  .header-actions .agent-health, #refreshButton { display: none; }
  .github-alert { padding: 10px 16px; }
  .defer-alert { padding: 10px 16px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .project-alert { padding: 10px 16px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .log-off-alert { padding: 10px 16px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .off-hours-alert { padding: 10px 16px; align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-panel { padding: 16px; }
  .log-off-window { align-items: stretch; flex-direction: column; }
  .log-off-settings-row { align-items: stretch; flex-direction: column; }
  .log-off-settings-row button { margin-left: 0; }
  .deployment-banner { padding: 16px; }
  .deployment-banner-inner { grid-template-columns: 1fr; gap: 10px; }
  .supervisor-banner { padding: 16px; }
  .supervisor-banner-inner { grid-template-columns: 1fr; gap: 10px; justify-items: start; }
  main { padding: 24px 16px 80px; }
  /* On a phone the check-in comes first.
     Measured on a 390-point viewport over a 300 ms link
     (scripts/measure-phone-checkin.mjs): the health panel is about 1200px tall
     and the focus card about 6000px, so the first thing waiting on the user sat
     7649px — nine screens — below the top of the page. Nothing about the
     desktop layout changes; this is the order of the same sections when there
     is only one column to put them in. The health panel keeps its place at the
     top of a desktop window and goes last here, because nine healthy checks are
     a glance on a wide screen and a scroll on a narrow one. */
  #dashboardView { display: flex; flex-direction: column; }
  #dashboardView .attention-section { order: 1; margin-top: 0; }
  #dashboardView .focus-section { order: 2; }
  #dashboardView .board-section { order: 3; }
  #dashboardView .agent-jobs-section { order: 4; }
  #dashboardView .foreground-section { order: 5; }
  #dashboardView .health-panel { order: 6; }
  #dashboardView > * + * { margin-top: 40px; }
  .focus-task { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(5, 270px); margin-right: -16px; }
  .scratchpad-workspace { grid-template-columns: 1fr; }
  .usage-providers, .usage-windows { grid-template-columns: 1fr; }
  .scratchpad-editor-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .scratchpad-editor-panel > textarea { min-height: 360px; }
  .recurring-list { overflow-x: auto; }
  .recurring-row { min-width: 880px; }
}
@media (max-width: 560px) {
  .app-header { height: 56px; }
  .brand > span:last-child { display: none; }
  .view-tabs { justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 0 8px; }
  .tab { flex: 0 0 auto; font-size: 10px; }
  .tab-badge { font-size: 0; width: 7px; height: 7px; padding: 0; border-radius: 50%; }
  .deployment-banner ul { columns: 1; }
  .focus-section { padding: 20px 16px; margin: 0 -16px; border-left: 0; border-right: 0; }
  .focus-heading { align-items: flex-start; }
  .focus-heading-actions { align-items: flex-end; flex-direction: column-reverse; }
  #returnFocusButton { max-width: 150px; text-align: left; }
  .section-heading h1 { font-size: 26px; }
  .focus-empty { grid-template-columns: 1fr; }
  .focus-empty button { width: 100%; }
  /* Stacked, because a row's title is the part worth reading and squeezing it
     next to three controls on a 390px screen left it two words wide. The
     controls grow to a thumb-sized target rather than staying compact. */
  /* The heading and its summary stack: side by side in a 390-point column the
     heading wrapped to "Waiting / on you" to make room for a count. */
  .attention-section .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .attention-row { align-items: stretch; flex-direction: column; gap: 10px; padding: 14px 0; }
  .attention-actions { gap: 8px; }
  .attention-actions > * { flex: 1; justify-content: center; min-height: 44px; }
  .focus-defer { align-items: stretch; flex-direction: column; }
  .focus-log-off { align-items: stretch; flex-direction: column; }
  .focus-morning-protocol { align-items: stretch; flex-direction: column; }
  .morning-protocol-actions { min-width: 0; }
  .focus-off-hours { align-items: stretch; flex-direction: column; }
  .off-hours-check-in { width: auto; }
  .log-off-override { width: auto; }
  .defer-focus-actions button { flex: 1; justify-content: center; }
  .focus-alert { align-items: stretch; flex-direction: column; }
  .alert-focus-actions button { flex: 1; justify-content: center; }
  .focus-foreground, .focus-orgr { align-items: stretch; flex-direction: column; }
  .orgr-actions { align-items: end; flex-wrap: wrap; }
  .orgr-actions button { flex: 1; justify-content: center; }
  .foreground-focus-actions { align-items: end; flex-wrap: wrap; }
  .foreground-completion-form { flex: 1 1 100%; }
  .completion-amount { flex: 1; }
  .completion-amount input { width: 100%; }
  .foreground-focus-actions button { flex: 1; justify-content: center; }
  .prompt-actions { align-items: stretch; flex-direction: column; }
  .scratchpad-toolbar { align-items: stretch; flex-direction: column; }
  .scratchpad-toolbar .primary { justify-content: center; }
  .scratchpad-feedback { grid-template-columns: 1fr; }
  .scratchpad-feedback label { grid-column: auto; }
  .scratchpad-history-entry > summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .task-focus-actions { align-items: stretch; flex-direction: column; }
  .task-setup-editor { align-items: stretch; flex-direction: column; }
  .external-blocker-editor, .external-blocker-fields { grid-template-columns: 1fr; }
  .external-blocker-editor > button { justify-content: center; }
  .task-focus-actions button { justify-content: center; }
  .prompt-settings { align-items: stretch; flex-direction: column; }
  .prompt-buttons { align-items: stretch; flex-direction: column; margin-left: 0; }
  .prompt-actions .primary, .prompt-buttons .secondary { justify-content: center; }
  .reply-actions, .review-actions { align-items: stretch; flex-direction: column; }
  .review-actions .turn-estimate { margin-right: 0; }
  .self-review-header { align-items: stretch; flex-direction: column; }
  .self-review-decision { grid-template-columns: 1fr; }
  .address-route-options { display: grid; grid-template-columns: 1fr; width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .suggestion { grid-template-columns: auto 1fr; }
  .time-pill { grid-column: 2; justify-self: start; }
  .project-row { grid-template-columns: 10px 1fr; padding: 15px 0; gap: 10px; }
  .project-row .project-stats { grid-column: 2; }
  .project-row > button { grid-column: 2; justify-self: start; }
  .planning-output { grid-template-columns: 1fr; }
  .planning-output-main { padding-right: 0; }
  .planning-inbox { border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
  .history-row { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; }
  .history-row time { grid-column: 2; }
  .history-row .card-action { grid-column: 3; grid-row: 1 / span 2; }
}

/* Worker daemons. One card per enrolled daemon, plus a list of work whose
   outcome could not be determined — which is the part that needs a person, so it
   is styled to be found rather than skimmed past. */
.workers-view .section-heading { align-items: flex-end; }
.view-description { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.worker-fleet-panel { margin-top: 18px; }
.worker-list { display: grid; gap: 10px; }
.worker-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 13px; }
.worker-card-heading { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.worker-card-heading strong { font-size: 13px; }
.worker-card-heading code { color: var(--muted); font-size: 10px; }
.worker-state { margin-left: auto; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: #eceeed; color: #5d655f; }
.worker-state.ready { background: #e5f1eb; color: var(--green-dark); }
.worker-state.busy, .worker-state.draining, .worker-state.upgrading { background: #fff4df; color: #7a5410; }
.worker-state.offline, .worker-state.unavailable { background: #f7e4e1; color: #873a31; }
.worker-facts { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 11px; }
.worker-blockers { margin: 8px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.45; color: #7c352d; }
.worker-blockers li { padding: 1px 0; }
.worker-blockers b { font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: .05em; margin-right: 5px; }
.worker-actions { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
.worker-slots { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.worker-reconciliation { margin-top: 14px; border: 1px solid #dca49d; border-radius: 8px; background: #fff0ee; padding: 12px 13px; }
.worker-reconciliation h3 { margin: 0 0 6px; font-size: 12px; color: #7c352d; }
.worker-reconciliation p { margin: 0 0 8px; font-size: 11px; line-height: 1.45; color: #7c352d; }
.worker-reconciliation li { margin-bottom: 10px; font-size: 11px; line-height: 1.45; }
/* Waiting is not a failure, so it is not the reconciliation panel's red: a job
   queued because a laptop is signed out is information, not an incident. */
/* A machine that is off on purpose reads as a statement, not as an alarm; one
   whose absence nobody accounted for keeps the colour the blockers use. */
.worker-absences { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; padding: 12px 13px; }
.worker-absences h3 { margin: 0 0 6px; font-size: 12px; color: var(--ink); }
.worker-absences ul { margin: 0; padding-left: 16px; }
.worker-absence { margin-bottom: 5px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.worker-absence.incident { color: #7c352d; }
.worker-waiting { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf7; padding: 12px 13px; }
.worker-waiting h3 { margin: 0 0 6px; font-size: 12px; color: var(--ink); }
.worker-waiting ul { margin: 0; padding-left: 16px; }
.worker-waiting li { margin-bottom: 5px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.worker-enrolment { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.worker-enrolment .worker-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .05em; }

/* Where a turn ran, and the controls for the next one. Deliberately quiet: on an
   install with one worker the block is absent, and on one with two it is a line of
   metadata rather than a panel competing with the task. */
.task-placement {
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  background: var(--surface-2, rgba(127, 127, 127, 0.12));
  font-size: 0.8rem;
}
.task-placement.pinned { font-weight: 600; }
.task-placement-block {
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--surface-3, rgba(127, 127, 127, 0.3));
  font-size: 0.85rem;
  display: grid;
  gap: 0.4rem;
}
.task-relocations ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.worker-grants { margin-top: 0.9rem; }
.worker-grants > ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.worker-grants > ul > li {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--surface-3, rgba(127, 127, 127, 0.25));
  border-radius: 0.5rem;
  display: grid;
  gap: 0.35rem;
}
.worker-grant-heading { display: flex; gap: 0.5rem; align-items: baseline; }
.worker-state.granted { color: var(--ok, #2f7d32); }
.worker-state.cleared { color: var(--warn, #9a6700); }
.worker-state.pinned { color: var(--muted, #6b7280); }