:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1c2430; --muted: #5f6b7a; --line: #e3e7ed;
  --accent: #2456d6; --green: #1f9d55; --amber: #d98a00; --red: #cf3a2f;
  --nomad: #2456d6; --spot: #c2410c; --ops: #7c3aed;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
nav.top { background: var(--ink); color: #fff; padding: 0 20px; display: flex; gap: 18px; align-items: center; height: 46px; }
nav.top a { color: #d6dce6; } nav.top a.active, nav.top a:hover { color: #fff; text-decoration: none; }
nav.focus { background: var(--panel); border-bottom: 1px solid var(--line); padding: 5px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; min-height: 38px; }
nav.focus form { display: flex; gap: 10px; align-items: center; margin: 0; }
nav.focus label { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--muted); }
nav.focus select { padding: 3px 6px; font-size: 13px; }
nav.focus .ws-switch select { min-width: 160px; font-weight: 600; color: var(--ink); }
nav.focus .ws-switch { padding-right: 14px; border-right: 1px solid var(--line); }
.mode-sm a { padding: 3px 9px; font-size: 12px; }
.filter-bar .search { min-width: 160px; }
.explainer summary { cursor: pointer; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.explainer summary small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.explainer[open] summary { margin-bottom: 10px; }
.explainer h3 { font-size: 13px; margin: 10px 0 4px; }
.explainer p { margin: 0 0 6px; }
nav.top .brand { font-weight: 700; color: #fff; margin-right: 10px; }
main { max-width: 1240px; margin: 0 auto; padding: 20px; }
main.wide { max-width: 1800px; }
h1 { font-size: 22px; margin: 0 0 14px; } h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tile .label { color: var(--muted); font-size: 12px; } .tile .value { font-size: 24px; font-weight: 600; margin-top: 2px; }
.tile .sub { color: var(--muted); font-size: 12px; }
table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.muted td { color: var(--muted); }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef1f5; color: var(--ink); white-space: nowrap; }
.sign-in { max-width: 420px; margin: 80px auto; text-align: center; } .sign-in form { display: inline-block; margin-top: 8px; }
nav.top .sign-out { margin-left: 8px; }
.chip-prio { background: #e8ebf7; color: #2456d6; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-green { background: #e3f5ea; color: var(--green); } .chip-amber { background: #fdf0d5; color: var(--amber); } .chip-red { background: #fbe3e1; color: var(--red); }
.chip-nomad { background: #e4eafc; color: var(--nomad); } .chip-spot { background: #fde8dd; color: var(--spot); } .chip-ops { background: #ede9fe; color: var(--ops); }
.chip-goal-ok { background: #e3f5ea; color: var(--green); } .chip-goal-under, .chip-goal-over { background: #fbe3e1; color: var(--red); } .chip-goal-none { color: var(--muted); }
.chip-status-bet { background: #e4eafc; color: var(--nomad); } .chip-status-shaped { background: #ece6fb; color: #5b3fb8; } .chip-status-completed { background: #e3f5ea; color: var(--green); } .chip-status-dropped { color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.bar { background: #eef1f5; border-radius: 4px; height: 8px; width: 100%; min-width: 80px; overflow: hidden; }
.bar-fill { background: var(--accent); height: 100%; } .bar-breach .bar-fill { background: var(--red); }
form.filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 16px; }
form.filters label, form.form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
input[type=text], input[type=number], input[type=date], input[type=url], select, textarea { font: inherit; padding: 6px 8px; border: 1px solid #c9d0da; border-radius: 6px; background: #fff; min-width: 120px; }
textarea { min-width: 100%; }
.btn { display: inline-block; font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid #c9d0da; background: #fff; cursor: pointer; color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-danger { color: var(--red); } .btn-sm { padding: 2px 8px; font-size: 12px; }
form.form label.window .dates { display: flex; gap: 6px; align-items: center; } form.form label.window .dates input { min-width: 0; }
form.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
form.form .actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.mode { display: inline-flex; border: 1px solid #c9d0da; border-radius: 6px; overflow: hidden; }
.mode a { padding: 5px 12px; color: var(--ink); } .mode a.active { background: var(--ink); color: #fff; }
/* Multi-select filters: a button that reads like a select, a panel of checkboxes under it. */
.multiselect { position: relative; }
.ms-button { font: inherit; padding: 6px 26px 6px 8px; border: 1px solid #c9d0da; border-radius: 6px; background: #fff; min-width: 120px; max-width: 260px; text-align: left; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-button::after { content: ""; position: absolute; right: 10px; bottom: 13px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.ms-button[aria-expanded=true] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(36, 86, 214, .15); }
.ms-panel { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; min-width: 220px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; padding: 6px; background: var(--panel); border: 1px solid #c9d0da; border-radius: 8px; box-shadow: 0 8px 24px rgba(28, 36, 48, .14); font-size: 13px; color: var(--ink); }
.ms-panel-right { left: auto; right: 0; }
form.filters .ms-option, .ms-option { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 13px; color: var(--ink); }
.ms-option:hover { background: var(--bg); } .ms-option input { margin: 0; }
.ms-all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.ms-done { display: block; margin: 6px 4px 2px auto; }
@media (max-width: 600px) { .ms-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; max-height: 50vh; } .ms-panel-right { left: 16px; } }
.errors { background: #fbe3e1; color: var(--red); padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.notice { background: #e3f5ea; color: var(--green); padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.chart-box { position: relative; height: 300px; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.flag { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; }
.flag .meta { color: var(--muted); font-size: 12px; }
small, .muted { color: var(--muted); }
/* Drafter */
.plate { margin-bottom: 18px; overflow-x: auto; }
.plate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.plate-head h2 { margin: 0; } .plate-head .stats { color: var(--muted); font-size: 12px; }
.side h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 4px; }
.drow { display: grid; grid-template-columns: minmax(240px, 1fr) 68px 150px 130px 96px 86px 90px 36px 100px; gap: 8px; align-items: center; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.drow.head { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--line); padding-top: 0; }
.drow.view { cursor: pointer; } .drow.view:hover { background: #f3f6fb; }
.drow .cell-title .t { font-weight: 500; }
.drow .meta { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.drow .meta > * { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
.drow .meta .note { font-style: italic; }
.drow .cell-title { min-width: 0; }
.drow .cat { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .lead { font-size: 12px; } .drow .lead.muted { font-style: italic; }
.drow .pts { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.drow .acts { display: flex; gap: 4px; justify-content: flex-end; visibility: hidden; }
.drow.view:hover .acts { visibility: visible; }
.drow-edit { background: #f3f6fb; border: 1px solid #c9d6ee; border-radius: 8px; padding: 10px 12px; margin: 4px 0; }
.drow-edit.invalid { border-color: var(--red); }
.drow-edit .line { margin-bottom: 8px; } .drow-edit .line:last-child { margin-bottom: 0; }
.drow-edit .title { width: 100%; font-size: 14px; font-weight: 500; }
.drow-edit .fields { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.drow-edit .fields label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.drow-edit .fields select, .drow-edit .fields input { min-width: 110px; padding: 4px 6px; font-size: 13px; }
.drow-edit textarea { width: 100%; font-size: 13px; }
.drow-edit .actions { display: flex; gap: 8px; align-items: center; }
.drow-edit.quick { margin-top: 8px; }
.add-btn { margin-top: 8px; }
.side .pick { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: center; }
.side .pick .what { min-width: 0; } .side .pick .t { font-size: 13px; } .side .pick .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.side .pick form.pull { flex-shrink: 0; }
.side .inline-form select { padding: 3px 6px; font-size: 12px; min-width: 100px; }
.drafter-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
/* The row grid needs about 960px; below 1400px the pull-in panel drops under the plates, and narrower still the plate scrolls sideways. */
@media (max-width: 1400px) { .drafter-grid { grid-template-columns: minmax(0, 1fr); } }
/* Resourcing plans */
.steps { display: flex; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.steps span { padding: 3px 10px; border-radius: 999px; background: #eef1f5; } .steps span.on { background: var(--ink); color: #fff; }
.cycle { margin-bottom: 14px; }
.cycle h3 { margin: 0 0 4px; font-size: 14px; } .cycle h3 small { color: var(--muted); font-weight: 400; }
.cycle.cooldown { background: #fbfbfc; }
.load { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin: 6px 0; }
.load span { background: #eef1f5; padding: 1px 8px; border-radius: 999px; } .load span.over { background: #fbe3e1; color: var(--red); }
.qa label { display: block; margin-bottom: 8px; font-size: 13px; } .qa input { width: 100%; }
.prefs .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.people-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.rationale { background: #f3f6fb; border-radius: 6px; padding: 10px 12px; font-size: 13px; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.inline-check { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.inline-check input { width: auto; }
.plate-head .stats form { display: inline; }
.chip-appetite { background: #e8f1ff; color: #1d4ed8; }

/* Roadmap page: the plan on one page. */
.roadmap-board { display: grid; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow-x: auto; }
.roadmap-board .rhead { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 10px 12px; border-bottom: 2px solid var(--line); border-right: 1px solid var(--line); font-weight: 600; }
.roadmap-board .rhead small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.roadmap-board .rcorner { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.roadmap-board .rgroup { padding: 10px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-weight: 600; font-size: 13px; background: #fafbfc; }
.roadmap-board .rcell { padding: 8px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 44px; display: flex; flex-direction: column; gap: 6px; }
.roadmap-board > :nth-last-child(-n+1) { border-bottom: 0; }
.rcard { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: #fff; font-size: 13px; }
.rcard .t { font-weight: 500; line-height: 1.3; } .rcard .t a.plain { color: inherit; }
.rcard .meta { color: var(--muted); font-size: 11px; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rcard .booking { background: #eef1f5; border-radius: 4px; padding: 0 5px; }
.rcard .window { color: var(--muted); font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rcard-big { border-left: 4px solid var(--accent); background: #f3f6ff; } .rcard-big .t { font-weight: 700; font-size: 14px; }
.rcard-unshaped { border-style: dashed; background: transparent; } .rcard-unshaped .t { font-weight: 400; color: var(--muted); } .rcard-unshaped .t a.plain { color: var(--muted); }
.rcard-completed .t { text-decoration: line-through; color: var(--muted); }
.rkey { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); vertical-align: -1px; margin-right: 2px; }
.rkey-big { background: #f3f6ff; border-left: 3px solid var(--accent); } .rkey-small { background: #fff; } .rkey-unshaped { border-style: dashed; background: transparent; }
.roadmap-legend { margin-top: 10px; }
body.clean nav.top, body.clean .roadmap-controls { display: none; }
@media print { nav.top, .roadmap-controls, .toolbar a { display: none !important; } .roadmap-board { overflow: visible; } }

/* Roadmap presentation view: a Gantt-like timeline. */
.gantt { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.gantt .g-head { position: relative; height: 30px; margin-left: var(--group-w); border-bottom: 1px solid var(--line); }
.gantt .g-q { position: absolute; top: 0; height: 30px; padding: 6px 8px; border-left: 1px solid var(--line); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; }
.gantt .g-q:first-child { border-left: 0; } .gantt .g-q small { color: var(--muted); font-weight: 400; }
.gantt .g-cycles { position: relative; height: 18px; margin-left: var(--group-w); border-bottom: 1px solid var(--line); background: #fff; }
.gantt .g-c { position: absolute; top: 0; height: 18px; padding: 1px 5px; font-size: 10px; color: var(--muted); border-left: 1px dashed #cfd6df; background: #eef3fb; white-space: nowrap; overflow: hidden; }
.gantt .g-c.cool { background: repeating-linear-gradient(135deg, #eef1f5 0 4px, #fff 4px 8px); }
.gantt .g-months { position: relative; height: 16px; margin-left: var(--group-w); border-bottom: 1px solid var(--line); background: #fff; }
.gantt .g-m { position: absolute; top: 0; height: 16px; padding: 1px 5px; font-size: 10px; line-height: 14px; color: var(--muted); border-left: 1px solid #e3e7ec; white-space: nowrap; overflow: hidden; }
.gantt .g-m.q { border-left-color: var(--line); } .gantt .g-m:first-child { border-left: 0; }
.gantt .g-w { position: absolute; bottom: 0; height: 4px; border-left: 1px solid #cfd6df; }
.gantt .g-row { display: flex; border-bottom: 1px solid var(--line); } .gantt .g-row:last-child { border-bottom: 0; }
.gantt .g-group { width: var(--group-w); flex: none; padding: 8px 12px; font-weight: 600; font-size: 13px; background: #fafbfc; border-right: 1px solid var(--line); }
.gantt .g-tracks { position: relative; flex: 1; min-width: 0; padding: 3px 0; }
.gantt .g-track { position: relative; height: 30px; }
.gantt .g-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.gantt .g-grid.month { border-left: 1px dashed #e9edf2; }
.gantt .g-today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--red); z-index: 2; }
.gbar { position: absolute; top: 3px; height: 24px; line-height: 22px; padding: 0 8px; border-radius: 4px; border: 1px solid transparent; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); z-index: 1; }
.gbar:hover { text-decoration: none; z-index: 3; min-width: max-content; }
.gbar .who { opacity: .8; font-weight: 400; }
.gbar-big { background: var(--accent); color: #fff; font-weight: 600; }
.gbar-small { background: #dbe5ff; border-color: #c3d2f7; }
.gbar-unshaped { background: #fff; border: 1px dashed #b7c0cc; color: var(--muted); }
.gbar-completed { background: var(--green); color: #fff; }
@media print { .gantt { overflow: visible; } }

/* Settings area: a left-hand sub-nav beside the page. */
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.subnav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.subnav a { padding: 6px 10px; border-radius: 6px; color: var(--ink); font-size: 13px; }
.subnav a:hover { background: #e8ecf2; text-decoration: none; } .subnav a.active { background: var(--ink); color: #fff; }
.subnav h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 10px 4px; font-weight: 600; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .subnav { position: static; flex-direction: row; flex-wrap: wrap; } .subnav h3 { width: 100%; margin: 6px 10px 2px; } }
.settings-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.settings-cards .tile .label a { font-weight: 600; font-size: 14px; color: var(--ink); }
.feature-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 0; } .feature-row input { margin-top: 3px; }
.chip-lane { background: #f1f5f9; color: #334155; }
.chip-off { background: #f6f7f9; color: var(--muted); }
/* The activity log's source chips (decision 27): people's doors blue, the assistant's purple, mechanical ones grey. */
.chip-source-form, .chip-source-drafter, .chip-source-bulk_import, .chip-source-soap_align { background: #e4eafc; color: var(--nomad); }
.chip-source-agent_chat, .chip-source-agent_api, .chip-source-agent_mcp { background: #ede9fe; color: var(--ops); }
.chip-source-plan_apply { background: #e3f5ea; color: var(--green); }
.chip-source-import, .chip-source-snapshot, .chip-source-system { background: #f1f5f9; color: #334155; }
table.activity td { vertical-align: top; } .activity-changes div { line-height: 1.5; }

/* Reservations: placeholder bookings against a quarter's budget. */
.rcard-reserved { border: 1px dashed #b7c0cc; background: repeating-linear-gradient(135deg, #f6f7f9 0 4px, #fff 4px 8px); }
.rcard-reserved .t { color: var(--muted); } .rcard-reserved .t a.plain { color: var(--muted); }
.gbar-reserved { background: repeating-linear-gradient(135deg, #e8ecf2 0 4px, #fff 4px 8px); border: 1px dashed #b7c0cc; color: var(--muted); }
.reserved-line { padding: 6px; border-bottom: 1px solid var(--line); } .reserved-line form { display: inline; }
table.breakdown tr.combo td { color: var(--ink); }

/* Themes (decision 23): a folded row on the board and the timeline, open on click. */
.rrow { display: contents; }
.rgroup-theme, .g-group-theme, .rcard-theme, .gbar-theme { cursor: pointer; }
.caret { display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin-left: 4px; vertical-align: middle; transition: transform .15s; }
.theme-row.expanded .caret { transform: rotate(45deg); }
.theme-row .rcard-item, .theme-row .g-track-item { display: none; }
.theme-row.expanded .rcard-item, .theme-row.expanded .g-track-item { display: block; }
.theme-row.expanded .rcard-theme, .theme-row.expanded .g-track-theme { display: none; }
.rcard-theme { border-left: 4px solid var(--ink); background: #fafbfc; }
.rcard-theme .titles { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.35; }
.rcard-theme .meta .rkey { margin-right: -2px; }
.gbar-theme { background: color-mix(in srgb, var(--theme, var(--ink)) 18%, #fff); border-color: var(--theme, var(--ink)); border-left-width: 4px; font-weight: 600; }
.gbar .dep { opacity: .8; font-weight: 700; }

/* The Slide view (ROAP): one presentable page, larger type, no controls. */
body.clean .focus, body.clean .filter-bar, body.clean .roadmap-tiles { display: none; }
.roap { max-width: 1600px; margin: 0 auto; }
.roap-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.roap-legend { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.roap-gantt .g-group { font-size: 14px; padding: 10px 12px; line-height: 1.3; }
.roap-gantt .g-group small { font-weight: 400; font-size: 11px; }
.roap-gantt .g-track-theme { height: 32px; }
.roap-gantt .g-track-nested { height: 24px; }
.roap-gantt .g-track-nested .gbar { top: 2px; height: 19px; line-height: 17px; font-size: 11px; }
.roap-gantt .g-tracks { padding: 4px 0 6px; }
.roap-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
@media print { body.clean nav, body.clean .toolbar .mode, body.clean .toolbar .muted { display: none !important; } .roap { max-width: none; } }

/* Archived workspace: a banner under the top nav on every page while reviewing it. */
.archived-banner { background: #fdf0d5; color: #7a4b00; border-bottom: 1px solid #f2d79a; padding: 7px 20px; font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.archived-banner form { margin: 0; }
.form-static { font-size: 13px; color: var(--ink); padding: 6px 0; }
.actions-cell form { display: inline; }

/* The Summary view's prose. */
.summary .prose { max-width: 820px; font-size: 15px; line-height: 1.55; }
.summary .prose h2, .summary .prose h3 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 16px; margin: 18px 0 6px; }
.summary .prose h4 { font-size: 14px; margin: 14px 0 4px; }
.summary .prose p { margin: 0 0 10px; } .summary .prose ul { margin: 0 0 10px; padding-left: 20px; } .summary .prose li { margin-bottom: 4px; }

/* The item editor dialog: double-click a roadmap card or bar. */
.item-dialog { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 48px rgba(28, 36, 48, .22); background: var(--panel); color: var(--ink); }
.item-dialog::backdrop { background: rgba(28, 36, 48, .35); }
.item-dialog turbo-frame { display: block; }
.item-modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fafbfc; position: sticky; top: 0; }
.item-modal-head strong { font-size: 15px; }
.item-modal-body { padding: 16px; max-height: calc(100vh - 120px); overflow-y: auto; }
[data-item-edit] { cursor: default; }
.rcard[data-item-edit]:hover { border-color: var(--accent); }

/* SOAP (decision 26): the page read against the plate. */
.soap-north { margin: 0 0 10px; font-size: 15px; }
.soap-metrics { margin-bottom: 0; }
.soap-priority h2 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 16px; }
.soap-num { color: var(--muted); font-weight: 400; margin-right: 4px; }
.soap-initiatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.soap-initiative { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; font-size: 13px; }
.soap-initiative .t { font-weight: 500; margin-bottom: 6px; line-height: 1.35; }
.soap-initiative ul { margin: 0; padding-left: 18px; } .soap-initiative li { margin-bottom: 3px; }
.soap-initiative.unfunded { border-style: dashed; background: #fffaf0; }
.soap-empty { color: var(--amber); font-size: 12px; font-weight: 600; }
.soap-unaligned-list { columns: 2; margin: 0; padding-left: 18px; } .soap-unaligned-list li { margin-bottom: 3px; break-inside: avoid; }
@media (max-width: 900px) { .soap-unaligned-list { columns: 1; } }


.soap-bars { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr minmax(120px, auto); gap: 6px 12px; align-items: center; font-size: 13px; }
.soap-bar { display: contents; } .soap-bar .b { height: 10px; background: #eef1f5; border-radius: 5px; overflow: hidden; } .soap-bar .f { height: 100%; background: var(--accent); }
.soap-bar.unaligned .f { background: #b7c0cc; } .soap-bar .v { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* The SOAP slide: priorities as rows, initiatives as labelled sub-rows, bars beneath. */
.roap-switch { vertical-align: middle; margin: 0 2px; }
.roap-soap-head .g-group { background: var(--ink); color: #fff; } .roap-soap-head .g-group small { color: #c9d0da; }
.roap-north { padding: 10px 12px; font-size: 13px; }
.roap-gantt .g-track-initiative { height: 22px; display: flex; align-items: center; padding-left: 8px; font-size: 12px; color: var(--ink); background: #f7f8fa; border-top: 1px solid var(--line); }
.roap-gantt .g-track-initiative:first-child { border-top: 0; }
.roap-gantt .g-track-initiative.unfunded { background: #fffaf0; } .roap-gantt .g-track-initiative.unfunded em { color: var(--amber); font-style: normal; font-weight: 600; }
.roap-initiative { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; position: relative; z-index: 1; }
.roap-initiative small { color: var(--muted); }
.roap-unaligned .g-group { color: var(--muted); }

/* Comments on items. */
.comments h2 { margin-bottom: 8px; }
.comment { padding: 8px 0; border-top: 1px solid var(--line); }
.comment-meta { font-size: 13px; display: flex; gap: 8px; align-items: center; }
.comment-remove { margin-left: auto; }
.comment-body { font-size: 14px; } .comment-body p { margin: 4px 0; }
.comment-form { margin-top: 10px; } .comment-form textarea { width: 100%; }
.item-modal-comments { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.comment-badge { font-size: 11px; color: var(--muted); white-space: nowrap; }
.gbar .comment-badge { color: inherit; opacity: .85; }

/* Parked items and the Simple slide. */
.item-fate { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pull-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.chip-status-parked { background: #eef1f5; color: var(--muted); }
.simple-toggles { margin: 0 0 8px; }
.simple-slide { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.simple-slide th, .simple-slide td { vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.simple-slide th:first-child, .simple-slide td:first-child { border-left: 0; }
.simple-slide th { font-size: 14px; color: var(--ink); font-weight: 600; background: #fafbfc; }
.simple-theme { width: 190px; font-weight: 600; font-size: 14px; background: #fafbfc; }
.simple-rocks { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.simple-rocks li.big { font-weight: 600; }
.simple-rocks li.small { font-weight: 400; }
.simple-rocks li.unshaped { color: var(--muted); }
.simple-rocks li.fold { list-style: none; margin-left: -18px; font-size: 12px; }
.simple-foot { margin-top: 12px; font-size: 12px; color: var(--muted); }
.simple-foot-q { margin-bottom: 6px; }

/* Comment mode on the roadmap and the Review comments page (decision 29). */
.comment-tools { display: inline-flex; gap: 6px; align-items: center; }
.comment-mode-toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.comment-mode [data-item-edit] { cursor: pointer; }
.comment-mode .rcard:hover, .comment-mode .gbar:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.comment-mode .comment-badge { font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 0 6px; opacity: 1; }
.comment-mode .gbar .comment-badge { color: #fff; }
.comment-popover { position: fixed; z-index: 60; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 36px rgba(28, 36, 48, .2); padding: 10px 12px 12px; font-size: 13px; }
.comment-popover[hidden] { display: none; }
.comment-popover-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; }
.comment-thread-head { padding-right: 20px; margin-bottom: 4px; } .comment-thread-head strong a.plain { color: inherit; } .comment-thread-head small { display: block; }
.comment-thread .comment { padding: 6px 0; } .comment-thread .comment:first-child { border-top: 0; }
.comment-thread .comment-body { font-size: 13px; }
.comment-thread-error { color: var(--red); margin: 4px 0; }
.comment-thread .comment-form { margin-top: 6px; } .comment-thread .comment-form textarea { font-size: 13px; }
.comment-thread .comment-form .actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.comment-group { padding: 10px 0 4px; border-top: 2px solid var(--line); } .comment-group:first-child { border-top: 0; padding-top: 0; }
.comment-group-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; } .comment-group-head strong a.plain { color: inherit; }
.comment-group .comment { padding-left: 12px; }
.comment-summary .prose { max-width: 820px; }

/* The comment tools as a group; disabled where nothing can be clicked. */
.comment-tools { display: inline-flex; gap: 6px; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.comment-tools.is-disabled { opacity: .55; background: #f3f5f8; }
.comment-tools.is-disabled .comment-mode-toggle { cursor: not-allowed; }
nav.focus .focus-team { padding-left: 10px; border-left: 1px solid var(--line); }
nav.focus .focus-team .multiselect label { flex-direction: row; }
.simple-cell-text { margin: 0; font-size: 14px; line-height: 1.45; }
.simple-toggles .mode { vertical-align: middle; margin-right: 6px; }
.simple-regen { display: inline; margin: 0 6px; }