/* Planwright — instrument light.
   Flat grounds, hairline rules, monospace for whatever a machine produced,
   tabular numerals, no shadows except on things that float over the page. */

:root {
  --bg: #fbfbfc;
  --panel: #ffffff;
  --rail: #f5f6f7;
  --ink: #14161a;
  --ink2: #3b414a;
  --muted: #767d88;
  --faint: #9ba2ac;
  --line: #e4e7ea;
  --hair: #eef0f2;
  --hover: #fafbfb;

  --green: #12703c; --green-bg: #e8f4ec; --green-line: #bfe0cc;
  --red: #b0241b;   --red-bg: #fceceb;   --red-line: #f0c4c1;
  --amber: #8d5512; --amber-bg: #fcf2e3; --amber-line: #eed9b4;
  --blue: #1a4fc4;  --blue-bg: #ebf1fd;  --blue-line: #c6d6f7;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;

  /* Type scale at the default 16px root; rem respects reader preferences. */
  --text-label: .75rem;   /* 12px: uppercase section labels */
  --text-meta: .8125rem; /* 13px: badges, counts, timestamps */
  --text-small: .875rem; /* 14px: supporting text and code */
  --text-ui: .9375rem;   /* 15px: navigation and controls */
  --text-body: 1rem;     /* 16px: task names and prose */
  --text-section: 1.125rem; /* 18px: section headings */
  --text-title: 1.375rem;   /* 22px: detail headings */
  --text-page: 1.75rem;     /* 28px: page headings and metrics */

  --rail-w: 272px;
  --dock-h: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--text-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; opacity: .35; }
code, .mono { font-family: var(--mono); font-size: var(--text-small); letter-spacing: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.18px; }
h3 { font-size: var(--text-section); }
p { margin: 0; }
s { color: var(--faint); }
svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.quiet { color: var(--muted); }
.sep { width: 1px; height: 12px; background: var(--line); }
.empty { padding: 44px 0; color: var(--faint); font-size: var(--text-body); text-align: center; }
.cap { font: 600 var(--text-label) var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.block { margin-top: 24px; }
.block > .cap { display: block; margin-bottom: 9px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--rail);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px 9px 0;
}
.rail-org {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px;
  border-radius: 5px; font-size: var(--text-ui); font-weight: 550; color: var(--ink2);
}
.rail-org svg:last-child { width: 12px; color: var(--faint); }
.rail-org:hover { background: #ebedef; }
.rail-org.on { background: var(--ink); color: #fff; }
.rail-org.on svg { color: #fff; }

.rail-proj { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; margin-top: 4px; border-radius: 5px; }
.rail-proj:hover { background: #ebedef; }
.rail-proj .mark { width: 20px; height: 20px; border-radius: 4px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 var(--text-meta) var(--sans); }
.rail-proj b { font-size: var(--text-body); font-weight: 600; display: block; }
.rail-proj small { display: block; color: var(--muted); font-size: var(--text-meta); }
.rail-proj svg { width: 13px; color: var(--faint); }

.rail-sec { margin-top: 16px; }
.rail-sec > .cap { display: block; padding: 0 8px 5px; }

.rail-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; border-radius: 4px; color: var(--ink2); font-size: var(--text-ui);
}
.rail-row:hover { background: #ebedef; }
.rail-row.on { background: #e3e7ea; color: var(--ink); font-weight: 550; }
.rail-row .rr-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row .rr-n { font-size: var(--text-meta); color: var(--faint); flex: none; }
.rail-row.on .rr-n { color: var(--ink2); }
.rail-row .n { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); width: 16px; flex: none; }
.rail-row.ph.on .n { color: var(--ink2); }
.rail-row.agent { align-items: flex-start; padding-top: 6px; }
.rail-row.agent .dot { margin-top: 5px; }
.rail-row.agent b { display: block; font-size: var(--text-small); font-weight: 550; }
.rail-row.agent small { display: block; color: var(--muted); font-size: var(--text-meta); font-family: var(--mono); }
.rail-none { padding: 4px 8px; font-size: var(--text-small); color: var(--faint); font-style: italic; }
.rail-clear {
  display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 5px;
  padding: 4px 8px; border-radius: 4px; background: var(--ink); color: #fff; font-size: var(--text-meta); font-weight: 550;
}
.rail-clear svg { width: 11px; margin-left: auto; }

.rail-foot { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--line); position: sticky; bottom: 0; background: var(--rail); }
.who { display: flex; align-items: center; gap: 8px; }
.who .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 var(--text-label) var(--sans); color: #fff; background: var(--ink2); }
.who b { font-size: var(--text-ui); display: block; }
.who small { color: var(--muted); font-size: var(--text-meta); }

/* ---------- top ---------- */
.main { display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--dock-h); }
.top {
  position: sticky; top: 0; z-index: 20; min-height: 56px; flex-wrap: wrap; padding-block: 8px; background: rgba(251,251,252,.93);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
}
.top nav { display: flex; gap: 2px; }
.top nav button { padding: 5px 10px; border-radius: 5px; color: var(--muted); font-size: var(--text-body); }
.top nav button:hover { background: #eef0f2; color: var(--ink2); }
.top nav button.on { background: var(--ink); color: #fff; font-weight: 550; }

.role-pick { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff; }
.role-pick button { padding: 4px 9px; font-size: var(--text-small); color: var(--muted); border-right: 1px solid var(--hair); white-space: nowrap; }
.role-pick button:last-child { border-right: 0; }
.role-pick button.on { background: var(--ink); color: #fff; font-weight: 550; }
.role-pick.depth button.on { background: #e3e7ea; color: var(--ink); }

.needs-btn { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: var(--text-ui); }
.needs-btn:hover { border-color: #cfd4d9; }
.needs-btn .n { min-width: 22px; min-height: 22px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 var(--text-label) var(--mono); }
.needs-btn.hot .n { background: var(--red); }

/* ---------- scope bar ---------- */
.scopebar {
  display: flex; align-items: center; gap: 6px; padding: 8px 26px;
  border-bottom: 1px solid var(--line); background: var(--panel); min-height: 42px;
}
.crumb { font-size: var(--text-ui); color: var(--muted); padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; }
.crumb:hover { background: #f1f3f4; color: var(--ink2); }
.crumb.on { color: var(--ink); font-weight: 550; }
.crumb .clear { display: inline-flex; padding: 1px; border-radius: 3px; color: var(--faint); }
.crumb .clear:hover { background: var(--line); color: var(--ink); }
.crumb .clear svg { width: 11px; }
.cs { color: var(--faint); font-size: var(--text-meta); }

/* ---------- page ---------- */
.page { padding: 20px 26px 60px; max-width: 1400px; }
.head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.head h1 { font-size: var(--text-page); }

.strip { display: flex; gap: 34px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.stat b { display: block; font-size: var(--text-page); font-weight: 600; letter-spacing: -.5px; line-height: 1.25; }
.stat span { font-size: var(--text-meta); color: var(--muted); }

/* page-level sections: a rule, air, and a label you can actually read */
.psec { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.psec:first-of-type { margin-top: 22px; padding-top: 0; border-top: 0; }
.psec-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
.psec-h h2 { font-size: var(--text-section); font-weight: 600; letter-spacing: -.15px; }
.psec-h .n { font: 600 var(--text-meta) var(--mono); color: var(--faint); }
.psec-h .note { margin-left: auto; font-size: var(--text-small); color: var(--muted); }

/* ---------- primitives ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 7px;
  border-radius: 3px; border: 1px solid var(--line); background: #fff;
  font: 550 var(--text-meta) var(--sans); color: var(--ink2); white-space: nowrap; vertical-align: middle;
}
.chip.green { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.chip.red   { color: var(--red);   background: var(--red-bg);   border-color: var(--red-line); }
.chip.amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.chip.blue  { color: var(--blue);  background: var(--blue-bg);  border-color: var(--blue-line); }
.chip.grey  { color: var(--muted); background: #f4f5f6; }
.chip.mono  { font-family: var(--mono); font-weight: 500; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; display: inline-block; }
.dot.green { background: var(--green); } .dot.red { background: var(--red); } .dot.amber { background: var(--amber); }
.dot.live { background: var(--green); box-shadow: 0 0 0 0 rgba(18,112,60,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 5px rgba(18,112,60,0); } 100% { box-shadow: 0 0 0 0 rgba(18,112,60,0); } }

.bar { display: block; height: 3px; background: #e9ebee; border-radius: 2px; overflow: hidden; min-width: 62px; flex: 1; max-width: 120px; }
.bar i { display: block; height: 100%; background: var(--green); }

.age { font-family: var(--mono); font-size: var(--text-meta); color: var(--muted); }
.age.hot { color: var(--red); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
  font-size: var(--text-ui); font-weight: 500; color: var(--ink2); white-space: nowrap;
}
.btn:hover { border-color: #ccd1d7; background: var(--hover); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #24272d; }
.btn.danger { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.btn.sm { min-height: 32px; padding: 4px 9px; font-size: var(--text-small); }
.btn.icon-only { padding: 0 6px; }
.btn svg { width: 13px; height: 13px; }

.link { color: var(--blue); font-size: var(--text-ui); border-bottom: 1px solid transparent; }
.link:hover { border-bottom-color: currentColor; }

.field { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; font-size: var(--text-body); background: #fff; resize: vertical; }
.field:focus { outline: none; border-color: var(--ink2); }

.kv { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 9px 14px; font-size: var(--text-body); }
.kv .k { color: var(--faint); font: 600 var(--text-label) var(--sans); letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }

.rowline { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; margin-bottom: 5px; font-size: var(--text-body); }
.rowline:hover { border-color: #ccd1d7; }
.rowline svg { width: 13px; color: var(--faint); }

.codeblock { background: #f7f8f9; padding: 10px; border-radius: 5px; font: var(--text-small)/1.6 var(--mono); overflow: auto; margin: 0; }

/* ---------- sections: depth the person chooses ---------- */
.secs { margin-top: 22px; border-top: 1px solid var(--line); }
.sec { border-bottom: 1px solid var(--hair); }
.sec-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 2px; }
.sec-h:hover { background: var(--hover); }
.sec-c { display: inline-flex; color: var(--faint); transition: transform .12s; }
.sec-c svg { width: 12px; }
.sec.open .sec-c { transform: rotate(90deg); }
.sec-l { font: 600 var(--text-label) var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sec-m { margin-left: auto; color: var(--faint); font-size: var(--text-meta); }
.sec-b { padding: 4px 0 16px 20px; }

/* ---------- split (list + detail) ---------- */
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - 106px); }
.split-list { border-right: 1px solid var(--line); background: var(--panel); }
.split-list .grp { display: flex; align-items: baseline; gap: 6px; padding: 14px 14px 5px; }
.split-list .grp-n { font-family: var(--mono); font-size: var(--text-label); color: var(--faint); }
.split-detail { padding: 22px 28px 80px; min-width: 0; }

.trow { display: block; width: 100%; padding: 9px 14px; border-bottom: 1px solid var(--hair); }
.trow:hover { background: var(--hover); }
.trow.on { background: #f0f3f8; box-shadow: inset 2px 0 0 var(--ink); }
.trow .l1 { display: flex; align-items: baseline; gap: 8px; }
.trow .id { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); }
.trow .t { font-size: var(--text-body); font-weight: 500; flex: 1; }
.trow .l2 { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.trow .who-s { font-size: var(--text-meta); color: var(--muted); }

/* ---------- task detail ---------- */
.td-head h2 { font-size: var(--text-title); margin-top: 4px; }
.idline { display: flex; align-items: center; gap: 8px; }
.td-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 9px; font-size: var(--text-small); color: var(--muted); }
.td-meta b { color: var(--ink2); font-weight: 500; }
.td-trouble { margin-top: 16px; }

.gates { border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.gate { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--hair); }
.gate:last-child { border-bottom: 0; }
.gate .mk { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; }
.gate .mk svg { width: 9px; height: 9px; stroke-width: 2.6; }
.gate.done .mk { background: var(--green); border-color: var(--green); color: #fff; }
.gate.failed .mk, .gate.rejected .mk { background: var(--red); border-color: var(--red); color: #fff; }
.gate.stale .mk { background: var(--amber); border-color: var(--amber); color: #fff; }
.gate.current .mk { border-color: var(--blue); border-style: dashed; }
.gate.blocked { opacity: .45; }
.gate .lbl { font-size: var(--text-ui); }
.gate.todo .lbl, .gate.blocked .lbl { color: var(--faint); }
.gate .at { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); }
.gate.failed .lbl, .gate.rejected .lbl { color: var(--red); font-weight: 550; }
.gate.current .lbl { color: var(--blue); font-weight: 550; }

.promise { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 12px 14px; margin-bottom: 8px; }
.promise.bad { border-color: var(--red-line); background: #fffcfc; }
.promise .txt { font-size: var(--text-body); line-height: 1.45; font-weight: 500; letter-spacing: -.1px; }
.promise .proof { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; font-size: var(--text-small); color: var(--muted); }
.promise .proof .cap { width: 96px; flex: none; line-height: 1.5; }
.promise .verdict { margin-top: 8px; display: flex; align-items: flex-start; gap: 7px; font-size: var(--text-small); line-height: 1.5; }
.promise .verdict svg { margin-top: 1px; }
.promise .verdict.ok { color: var(--green); }
.promise .verdict.bad { color: var(--red); }
.promise .verdict.wait { color: var(--muted); }
.promise .was { margin-top: 7px; font-size: var(--text-small); color: var(--amber); }
.promise .acts { display: flex; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--hair); flex-wrap: wrap; }

.notice { border: 1px solid var(--line); border-left-width: 3px; border-radius: 5px; padding: 11px 13px; background: #fff; }
.notice.red { background: var(--red-bg); border-color: var(--red-line); border-left-color: var(--red); }
.notice.amber { background: var(--amber-bg); border-color: var(--amber-line); border-left-color: var(--amber); }
.notice.blue { background: var(--blue-bg); border-color: var(--blue-line); border-left-color: var(--blue); }
.notice.grey { background: #f7f8f9; border-left-color: var(--faint); }
.notice b { font-size: var(--text-body); }
.notice p { margin-top: 4px; font-size: var(--text-ui); color: var(--ink2); line-height: 1.55; }
.notice .acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.trail { border-left: 1px solid var(--line); margin-left: 3px; }
.trail .ev { position: relative; padding: 0 0 14px 16px; }
.trail .ev:before { content: ''; position: absolute; left: -3.5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.trail .ev.red:before { background: var(--red); }
.trail .ev.green:before { background: var(--green); }
.trail .ev.amber:before { background: var(--amber); }
.trail .hd { display: flex; align-items: baseline; gap: 8px; }
.trail .hd b { font-size: var(--text-small); font-weight: 600; }
.trail .hd .at { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); }
.trail .tx { font-size: var(--text-ui); color: var(--ink2); margin-top: 2px; line-height: 1.5; }

.cmt { display: grid; grid-template-columns: 22px 1fr; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.cmt .av { width: 22px; height: 22px; border-radius: 50%; background: var(--ink2); color: #fff; display: grid; place-items: center; font: 600 var(--text-label) var(--sans); }
.cmt .hd { display: flex; align-items: baseline; gap: 8px; }
.cmt .hd b { font-size: var(--text-small); }
.cmt .hd .at { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); }
.cmt p { font-size: var(--text-body); margin-top: 2px; color: var(--ink2); }
.cmt-new { display: flex; gap: 8px; margin-top: 10px; }
.cmt-new input { flex: 1; border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; font-size: var(--text-body); }
.cmt-new input:focus { outline: none; border-color: var(--ink2); }

/* ---------- tables ---------- */
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font: 600 var(--text-label) var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 0 12px 7px 0; border-bottom: 1px solid var(--line); }
table.t td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: var(--text-body); }
table.t tr.clickable { cursor: pointer; }
table.t tr.clickable:hover td { background: var(--hover); }

/* ---------- plan / phases ---------- */
.phase { border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 6px; overflow: hidden; }
.phase.open { border-color: #ccd1d7; }
.phase > .hd { display: grid; grid-template-columns: 24px minmax(0,1fr) 116px 116px 86px 96px; gap: 14px; align-items: center; padding: 11px 14px; width: 100%; }
.phase > .hd:hover { background: var(--hover); }
.phase .pn { font-family: var(--mono); font-size: var(--text-meta); color: var(--faint); }
.phase .pt { display: block; font-size: var(--text-body); font-weight: 550; }
.phase .po { display: block; font-size: var(--text-small); color: var(--muted); margin-top: 3px; }
.phase .pprog { display: flex; align-items: center; gap: 8px; }
.phase .pprog .mono { font-size: var(--text-meta); }
.phase .pbody { border-top: 1px solid var(--hair); padding: 4px 14px 14px; }
.phase .pline { display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hair); width: 100%; }
.phase .pline:last-of-type { border-bottom: 0; }
.phase .pline:hover { background: var(--hover); }
.phase .pl-t { display: block; font-size: var(--text-body); font-weight: 500; }
.phase .pl-s { display: block; font-size: var(--text-meta); margin-top: 2px; font-family: var(--mono); }

/* ---------- outcomes (product) ---------- */
.planstrip { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pstrip { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 10px 12px; min-width: 212px; }
.pstrip:hover { border-color: #ccd1d7; }
.pstrip.on { border-color: var(--ink); }
.pstrip .ps-t { display: block; font-size: var(--text-body); font-weight: 550; }
.pstrip .ps-p { display: block; font-size: var(--text-meta); color: var(--muted); font-family: var(--mono); margin-top: 2px; }
.pstrip .ps-b { display: block; margin: 8px 0 5px; }
.pstrip .ps-m { display: block; font-size: var(--text-meta); color: var(--muted); }

.outcome { border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 16px 18px; }
.outcome .big { font-size: var(--text-section); font-weight: 550; line-height: 1.45; max-width: 740px; letter-spacing: -.2px; }
.outcome .measure { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: var(--text-ui); color: var(--ink2); flex-wrap: wrap; }
.outcome .measure .cap { flex: none; }

.prow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 5px; }
.prow:hover { border-color: #ccd1d7; }
.prow.primary { border-color: var(--blue-line); background: var(--blue-bg); }
.prow.dashed { border-style: dashed; background: transparent; }
.prow .p-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--faint); }
.prow .p-dot.green { background: var(--green); } .prow .p-dot.red { background: var(--red); }
.prow .p-dot.amber { background: var(--amber); } .prow .p-dot.blue { background: var(--blue); }
.prow .p-txt { flex: 1; font-size: var(--text-body); font-weight: 500; letter-spacing: -.1px; min-width: 0; }
.prow .p-meta { font-size: var(--text-small); color: var(--muted); flex: none; max-width: 260px; text-align: right; }
.prow .p-id { flex: none; width: 48px; text-align: right; font-size: var(--text-meta); }

/* ---------- review ---------- */
.rev-layout { display: grid; grid-template-columns: minmax(0,660px) 250px; gap: 26px; align-items: start; }
.rev-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rev { border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 20px 22px; }
.rev .rev-p { margin-bottom: 16px; }
.rev .q { font-size: var(--text-title); font-weight: 550; line-height: 1.42; letter-spacing: -.25px; }
.rev .rev-pp { display: flex; gap: 10px; margin-top: 7px; font-size: var(--text-small); color: var(--muted); }
.rev .rev-pp .cap { width: 96px; flex: none; }
.rev .ev { margin-top: 18px; border-top: 1px solid var(--hair); }
.rev .evrow { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); }
.rev .evrow .k { color: var(--faint); font: 600 var(--text-label) var(--sans); letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }
.rev .acts { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.rev-side .cap { display: block; margin-bottom: 8px; }
.qitem { display: block; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 6px; }
.qitem:hover { border-color: #ccd1d7; }
.qitem.on { border-color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); }
.qitem .h { display: block; font-size: var(--text-ui); font-weight: 500; line-height: 1.4; }
.qitem .m { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ---------- git ---------- */
.split.git .split-list { padding: 0; }
.gnode { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 4px; padding-right: 12px; width: 100%; align-items: stretch; }
.gnode:hover { background: var(--hover); }
.gnode.on { background: #f0f3f8; }
.gnode .lane { width: 40px; height: 100%; stroke-width: 0; }
.gnode .inner { padding: 11px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.gnode .sha { display: block; font-family: var(--mono); font-size: var(--text-meta); color: var(--blue); }
.gnode .ti { display: block; font-size: var(--text-ui); font-weight: 500; margin-top: 3px; line-height: 1.4; }
.gnode .br { display: block; font-family: var(--mono); font-size: var(--text-label); color: var(--faint); margin-top: 4px; }

.diff { border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.diff .fn { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hair); background: var(--hover); }
.diff .fn code { flex: 1; font-size: var(--text-meta); }
.diff pre { margin: 0; padding: 8px 0; overflow-x: auto; font-family: var(--mono); font-size: var(--text-small); line-height: 1.65; }
.dl { display: block; padding: 0 12px; white-space: pre; }
.dl.add { background: #eaf6ee; color: #0d5c31; }
.dl.del { background: #fdeeed; color: #9d211a; }
.dl.ctx { color: var(--ink2); }
.dl:hover { outline: 1px solid var(--line); cursor: pointer; }

/* ---------- agents ---------- */
.acard { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 13px 15px; margin-bottom: 8px; }
.acard.dim { background: #fafbfb; }
.acard .hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.acard .hd b { font-size: var(--text-body); }
.acard .mm { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-size: var(--text-small); color: var(--muted); }
.acard .mm b { color: var(--ink2); font-weight: 500; }
.acard .arow { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair); font-size: var(--text-body); }
.acard pre { margin: 10px 0 0; padding: 10px 12px; background: #f7f8f9; border-radius: 5px; font-family: var(--mono); font-size: var(--text-meta); line-height: 1.65; overflow-x: auto; color: var(--ink2); }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(20,22,26,.26); display: flex; justify-content: flex-end; }
.sheet { width: 470px; max-width: 100%; height: 100%; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(20,22,26,.09); display: flex; flex-direction: column; animation: slidein .16s ease-out; }
.sheet.wide { width: 620px; }
@keyframes slidein { from { transform: translateX(16px); opacity: .6; } }
.sheet .shd { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.sheet .sbody { overflow: auto; padding: 6px 0 60px; }
.sheet .sbody.pad { padding: 20px 22px 70px; }

.req { display: block; width: 100%; padding: 13px 18px; border-bottom: 1px solid var(--hair); }
.req:hover { background: var(--hover); }
.req .hl { display: block; font-size: var(--text-body); font-weight: 550; line-height: 1.4; letter-spacing: -.1px; }
.req .un { display: block; font-size: var(--text-small); color: var(--muted); margin-top: 5px; }
.req .mm { display: flex; align-items: center; gap: 7px; margin-top: 8px; }

.modal-wrap { align-items: center; justify-content: center; }
.modal { width: 580px; max-width: calc(100% - 32px); max-height: 82vh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 24px 70px rgba(20,22,26,.2); animation: pop .14s ease-out; }
@keyframes pop { from { transform: scale(.985); opacity: .5; } }
.modal .mhd { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.modal .mbody { padding: 18px; }
.modal .mfoot { display: flex; gap: 8px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--line); }

.opt { display: block; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 11px 13px; margin-bottom: 7px; }
.opt:hover { border-color: var(--ink2); }
.opt b { font-size: var(--text-body); }
.opt p { font-size: var(--text-small); color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* ---------- dock ---------- */
.dock { position: fixed; left: var(--rail-w); right: 0; bottom: 0; z-index: 40; background: #10131a; color: #d6dae1; border-top: 1px solid #262b36; }
.dock .dbar { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 14px; font-size: var(--text-small); overflow: hidden; }
.dock .dbar button { color: #aeb6c2; font-size: var(--text-small); display: inline-flex; align-items: center; gap: 6px; }
.dock .dbar button:hover { color: #fff; }
.dock .dpill { display: inline-flex; align-items: center; gap: 6px; color: #8b94a3; white-space: nowrap; }
.dock .dtabs { display: flex; align-items: center; gap: 2px; padding: 0 10px; border-bottom: 1px solid #262b36; }
.dock .dtabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: var(--text-small); color: #8b94a3; font-family: var(--mono); }
.dock .dtabs button.on { color: #fff; box-shadow: inset 0 -2px 0 #5a8dee; }
.dock .dmeta { color: #79828f; font-size: var(--text-meta); margin-right: 10px; }
.dock .dgone { padding: 10px 16px; background: #1b1710; border-bottom: 1px solid #2c2419; }
.dock .dgone b { color: #e8c98a; font-size: var(--text-ui); }
.dock .dgone p { color: #9aa3b0; font-size: var(--text-small); margin-top: 3px; }
.dock pre { margin: 0; padding: 12px 16px; height: 176px; overflow: auto; font-family: var(--mono); font-size: var(--text-small); line-height: 1.7; white-space: pre-wrap; }
.dock pre.faded { opacity: .62; }
.dock pre .ok { color: #6ed49a; } .dock pre .bad { color: #f2867c; } .dock pre .dim { color: #79828f; }
.dock .dinput { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid #262b36; }
.dock .dinput input { flex: 1; background: #171b24; border: 1px solid #2b313d; border-radius: 5px; color: #d6dae1; padding: 6px 10px; font-size: var(--text-ui); }
.dock .dinput input:focus { outline: none; border-color: #3c72d6; }
.dock .dinput button { color: #d6dae1; border: 1px solid #2b313d; border-radius: 5px; padding: 4px 12px; font-size: var(--text-ui); }
.dock .dinput button:hover { border-color: #3a4250; }
.dock .dinput.ro { color: #79828f; font-size: var(--text-small); }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; bottom: calc(var(--dock-h) + 20px); left: 50%; transform: translateX(-50%); z-index: 90; }
.toast { display: flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; padding: 9px 14px; border-radius: 6px; font-size: var(--text-body); box-shadow: 0 10px 30px rgba(20,22,26,.25); animation: pop .15s ease-out; }

/* ---------- narrow ---------- */
@media (max-width: 1240px) {
  .rev-layout { grid-template-columns: minmax(0,1fr); }
  .rev-side { display: none; }
  .phase > .hd { grid-template-columns: 24px minmax(0,1fr) 110px 110px 86px; }
  .phase > .hd > span:last-child { display: none; }
}
@media (max-width: 1080px) {
  .split, .split.git { grid-template-columns: 290px minmax(0,1fr); }
  .strip { gap: 22px; }
}
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .split, .split.git { grid-template-columns: 1fr; }
  .split-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .dock { left: 0; }
  .top { flex-wrap: wrap; height: auto; padding: 6px 14px; gap: 6px; }
}

/* ---------- the password gate ----------
   pw-gate-*, not gate-*: `.gate` is the task gate-ladder row above, and the
   overlay inherited its `grid-template-columns: 22px 1fr auto`. Flex here, so
   there is no track list to pick up even by accident. */
.pw-gate {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.pw-gate-card {
  width: 320px; max-width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; padding: 26px 24px 22px;
  display: flex; flex-direction: column; gap: 10px; text-align: center;
}
.pw-gate-mark {
  width: 30px; height: 30px; margin: 0 auto 4px; border-radius: 7px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font: 600 var(--text-section) var(--sans);
}
.pw-gate-card h1 { font-size: var(--text-title); letter-spacing: -.2px; }
.pw-gate-card p { font-size: var(--text-ui); color: var(--muted); margin-bottom: 6px; }
.pw-gate-card input {
  width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px;
  font-size: var(--text-body); text-align: center; background: #fff;
}
.pw-gate-card input:focus { outline: none; border-color: var(--ink2); }
.pw-gate-card .btn { justify-content: center; min-height: 40px; }
.pw-gate-err { font-size: var(--text-small); color: var(--red); min-height: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Let larger type wrap inside dense detail and toolbar layouts. */
.top nav, .scopebar, .idline, .trow .l2, .req .mm, .qitem .m { flex-wrap: wrap; }
.promise .proof > :last-child, .rev .rev-pp > :last-child { min-width: 0; overflow-wrap: anywhere; }
.gate { grid-template-columns: 22px minmax(0, 1fr) auto; }
.gate .lbl, .kv > *, .rev .evrow > * { overflow-wrap: anywhere; }
.rail-proj > :nth-child(2), .who > :last-child { min-width: 0; }

/* Shared experience components. Layout, spacing and type live here so that
   new views can reuse the same summaries, forms and filters. */
:root { --muted: #59616e; --faint: #68717d; --content-gap: 20px; }
button, a, input, select, textarea { touch-action: manipulation; }
a.btn { text-decoration: none; }
h1, h2, h3 { line-height: 1.25; }
h2 { font-size: var(--text-section); }
summary { cursor: pointer; font-size: var(--text-small); font-weight: 550; padding: 8px 0; }
summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.page > .outcome, .page > .plan-summary { margin-bottom: 24px; }
.plan-summary { padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.plan-summary .head { flex-wrap: wrap; align-items: center; }
.plan-summary h1 { font-size: var(--text-page); }
.summary-goal { max-width: 70ch; font-size: var(--text-section); }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin: 20px 0; }
.summary-grid .cap, .summary-grid strong { display: block; }
.summary-grid strong { font-size: var(--text-ui); font-weight: 550; margin-top: 5px; overflow-wrap: anywhere; }
.summary-risk { border-top: 1px solid var(--line); padding-top: 15px; color: var(--ink2); }
.filterbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.page > .filterbar { padding: 0 0 16px; background: transparent; }
.filter-label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: var(--text-small); }
.filter-label select { min-height: 36px; max-width: 100%; padding: 6px 28px 6px 9px; background: #fff; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); }
.global-scope { min-height: 50px; }
.global-scope .quiet { font-size: var(--text-small); }
.task-context { display: block; margin-top: 6px; color: var(--muted); font-size: var(--text-small); line-height: 1.5; }
.trow .t { line-height: 1.45; }
.trow .l1 { align-items: flex-start; }
.next-action { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 16px; margin-top: 20px; background: var(--blue-bg); border: 1px solid var(--blue-line); border-radius: 7px; }
.next-action p { margin-top: 5px; color: var(--ink2); font-size: var(--text-ui); }
.next-action .acts { display: flex; flex-wrap: wrap; gap: 7px; flex: none; max-width: 45%; }
.proof-details { margin-top: 6px; }
.proof-details:not([open]) { color: var(--muted); }
.promise .proof { margin-top: 4px; }
.section-intro { margin: 28px 0 16px; }
.section-intro p { margin-top: 6px; }
.form-label { display: flex; flex-direction: column; gap: 6px; margin: 15px 0; font-size: var(--text-ui); font-weight: 550; }
.form-label .field { font-weight: 400; }
#search-results { margin-top: 16px; }
.inbox-note { padding: 12px 18px; color: var(--muted); font-size: var(--text-small); }
.review-picker { margin-bottom: 16px; }
.review-picker select { width: 100%; }
.decision-context { border-left: 3px solid var(--blue); padding: 10px 14px; background: var(--blue-bg); margin-bottom: 16px; }
.decision-context p, .approval-note { font-size: var(--text-ui); margin-top: 6px; color: var(--ink2); }
.approval-note { padding-top: 16px; }
.completed-group { border-top: 1px solid var(--line); margin-top: 22px; }
.completed-group .block { margin-top: 8px; }
.project-plans { display: grid; gap: 14px; }
.project-plan { width: 100%; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.project-plan:hover { border-color: var(--blue); }
.project-plan p { margin-top: 9px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { min-width: 640px; }
.demo-note { padding: 8px; font-size: var(--text-label); color: var(--muted); line-height: 1.5; }
.strip { flex-wrap: wrap; }
.phase > .hd { grid-template-columns: 24px minmax(0,1fr) 116px 145px 100px 130px; }
.prow { flex-wrap: wrap; }
.prow .p-meta { flex-shrink: 1; }
.sheet .shd, .modal .mhd, .modal .mfoot, .rev-nav, .trail .hd, .cmt .hd { flex-wrap: wrap; }
.cmt-new input { min-width: 0; }
@media (max-width: 1240px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .phase > .hd { grid-template-columns: 24px minmax(0,1fr) 110px 135px; }
  .phase > .hd > span:nth-last-child(-n+2) { display: none; }
  .next-action { flex-direction: column; }
  .next-action .acts { max-width: 100%; }
}
@media (max-width: 880px) {
  .split-detail { padding: 20px 16px 80px; }
  .page { padding: 20px 16px 60px; }
  .rail-sec { display: none; }
  .rail-foot { position: static; }
  .top nav { flex-wrap: wrap; }
  .filterbar { padding: 12px 16px; }
  .scopebar { padding-inline: 16px; }
  .phase > .hd { grid-template-columns: 20px minmax(0,1fr); }
  .phase > .hd > span:nth-child(n+3) { display: none; }
  .phase .pline { grid-template-columns: 44px minmax(0,1fr); }
  .phase .pline > span:nth-child(n+3) { grid-column: 2; }
}
@media (max-width: 520px) {
  .summary-grid { grid-template-columns: 1fr; }
  .filter-label { width: 100%; }
  .promise .proof, .rev .rev-pp { flex-direction: column; gap: 3px; }
  .rev .evrow, .kv { grid-template-columns: 1fr; gap: 5px; }
  .dock .dmeta { display: none; }
  .dock .dtabs { flex-wrap: wrap; }
}
.project-group th { padding-top: 22px !important; color: var(--ink2) !important; }

/* Iteration tools: compact defaults with depth on demand. */
.saved-views { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.saved-view { display: inline-flex; align-items: center; }
.saved-view .btn { border-radius: 5px 0 0 5px; }
.remove-view { min-height: 32px; min-width: 28px; border: 1px solid var(--line); border-left: 0; text-align: center; border-radius: 0 5px 5px 0; color: var(--muted); }
.remove-view:hover { color: var(--red); background: var(--red-bg); }
.work-filters > summary { padding: 10px 24px; color: var(--ink2); border-bottom: 1px solid var(--line); }
.work-filters .filterbar { border-bottom: 1px solid var(--line); }
.bulk-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 8px 24px; min-height: 44px; font-size: var(--text-small); background: var(--panel); border-bottom: 1px solid var(--line); }
.selectable-task { display: grid; grid-template-columns: 32px minmax(0,1fr); border-bottom: 1px solid var(--hair); }
.selectable-task > input { margin: 19px 0 0 12px; width: 16px; height: 16px; accent-color: var(--blue); }
.selectable-task .trow { border-bottom: 0; padding-left: 7px; }
.selectable-task:has(input:checked) { background: var(--blue-bg); }
.task-properties { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.inline-property { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: var(--text-small); min-width: 0; }
.inline-property select, .inline-property input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); padding: 6px 8px; min-height: 36px; font-size: var(--text-ui); color: var(--ink); }
.next-action.action-blocked { background: var(--amber-bg); border-color: var(--amber-line); }
.next-action { flex-direction: column; }
.next-action .acts { max-width: 100%; }
.next-action .acts .primary { min-height: 40px; }
.criterion-options { margin-top: 6px; }
.criterion-options > summary { color: var(--muted); font-weight: 400; }
.criterion-options .acts { margin-top: 2px; padding-top: 6px; }
.task-dependency-link { padding: 10px 0; }
.inbox-item { border-bottom: 1px solid var(--line); }
.inbox-item .req { border-bottom: 0; }
.inbox-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 18px 12px; font-size: var(--text-small); }
.demo-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.export-json { font-family: var(--mono); font-size: var(--text-small); }
.form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.phase-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--text-small); }
.phase.drop-active { outline: 2px solid var(--blue); outline-offset: 2px; background: var(--blue-bg); }
.pline[draggable=true] { cursor: grab; }
.pline[draggable=true]:active { cursor: grabbing; }
.planning-detail { padding: 4px 0; border-bottom: 1px solid var(--line); }
.timeline { padding: 12px 0; }
.timeline-range { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-label); color: var(--muted); margin-bottom: 10px; }
.timeline-row { display: grid; grid-template-columns: minmax(140px, 30%) minmax(0,1fr); width: 100%; align-items: center; gap: 16px; padding: 12px 8px; border-bottom: 1px solid var(--hair); }
.timeline-row:hover { background: var(--hover); }
.timeline-row small { display: block; color: var(--muted); font-size: var(--text-small); }
.timeline-track { display: block; position: relative; height: 24px; border-radius: 4px; background: repeating-linear-gradient(90deg,var(--hair) 0,var(--hair) 1px,transparent 1px,transparent 14.28%); }
.timeline-bar { position: absolute; top: 3px; height: 18px; min-width: 4px; background: #8daee8; border: 1px solid var(--blue); border-radius: 4px; }
.timeline-bar.done { background: #a9d5b9; border-color: var(--green); }
.timeline > p { margin-top: 14px; font-size: var(--text-small); }
.dependency-edge { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.dependency-options { max-height: 40vh; overflow-y: auto; margin-top: 16px; }
.dependency-options label { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.dependency-options small { display: block; font-size: var(--text-small); color: var(--muted); }
.review-evidence { margin: 24px 0; }
.review-evidence > p { margin: 6px 0 14px; font-size: var(--text-small); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comparison > div { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--rail); }
.comparison .after { background: var(--green-bg); border-color: var(--green-line); }
.comparison h4 { font-size: var(--text-body); margin: 14px 0 10px; }
.comparison p { font-size: var(--text-ui); line-height: 1.6; }
.attach-evidence { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding: 12px; border: 1px dashed var(--line); border-radius: 6px; font-size: var(--text-small); }
.attach-evidence input { max-width: 100%; }
.evidence-images { display: grid; gap: 16px; margin-top: 16px; }
.evidence-images figure { margin: 0; }
.evidence-images img { display: block; max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: 6px; }
.evidence-images figcaption { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 6px; font-size: var(--text-small); overflow-wrap: anywhere; }
.criterion-review > p { margin-top: 5px; font-size: var(--text-small); }
.criterion-check { padding: 14px 0; border-bottom: 1px solid var(--line); }
.criterion-check > label { display: flex; align-items: flex-start; gap: 10px; }
.criterion-check input { margin-top: 5px; flex: none; width: 16px; height: 16px; accent-color: var(--green); }
.criterion-check .row { margin: 10px 0 0 26px; flex-wrap: wrap; font-size: var(--text-small); }
.criterion-feedback { margin: 10px 0 0 26px; padding: 10px; background: var(--rail); font-size: var(--text-small); border-radius: 5px; }
.technical-evidence { margin-top: 18px; }
.technical-evidence .ev { margin-top: 0; }
@media (max-width: 880px) {
  .saved-views, .bulk-toolbar { padding-inline: 16px; }
  .work-filters > summary { padding-inline: 16px; }
  .comparison { grid-template-columns: 1fr; }
  .timeline-range span:nth-child(2) { display: none; }
}
@media (max-width: 520px) {
  .task-properties, .form-columns { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: minmax(100px, 40%) minmax(0,1fr); gap: 8px; }
  .saved-views .grow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.review-task-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.review-task-heading h2 { font-size: var(--text-title); }
.screenshot-thumb { display: block; width: 100%; }
.screenshot-large { display: block; max-width: 100%; height: auto; margin: 0 auto; }

/* Search destinations remain distinct as the demo grows. */
.search-group { margin-top: 20px; }
.search-group h3 { margin-bottom: 8px; color: var(--muted); font-size: var(--text-small); }
.empty .btn { margin: 8px 6px 0 0; }

/* Workspace navigation: search first, bounded lists, and visible delivery history. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.top { gap:8px 12px; }
.top nav { order:2; flex-basis:100%; padding-top:4px; }
.top > .grow { display:none; }
.header-search { position:relative; flex:1 1 260px; min-width:180px; }
.header-search input { width:100%; min-height:42px; padding:9px 12px; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:7px; }
.header-search input:focus { outline:2px solid var(--blue); outline-offset:2px; }
.header-results { position:absolute; top:calc(100% + 8px); left:0; width:max(100%,420px); max-width:calc(100vw - 40px); max-height:65vh; overflow:auto; background:var(--bg); border:1px solid var(--line); border-radius:9px; box-shadow:0 16px 40px #18233225; z-index:30; }
.header-results[hidden] { display:none; }
.search-result { display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.search-result:hover, .directory-card:hover, .completion-row:hover { background:var(--panel); }
.search-result small, .directory-card small, .completion-row small { display:block; color:var(--muted); font-size:var(--text-small); line-height:1.5; }
.search-all { width:100%; padding:14px; font-weight:600; color:var(--blue); text-align:left; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-title h2 { font-size:var(--text-body); margin:0; }
.section-title p { margin:4px 0 0; }
.recent-completions { margin:20px 0 24px; padding:18px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.recent-completions > .section-title { margin-bottom:12px; }
.completion-row { display:flex; width:100%; text-align:left; align-items:center; gap:12px; padding:13px 4px; border-top:1px solid var(--hair); }
.completion-row > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; }
.completion-check { color:var(--green); flex:none; }
.completed-task-note { display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:6px; color:var(--green); background:#eef7f1; font-size:var(--text-small); }
.list-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; color:var(--muted); font-size:var(--text-small); }
.split-list .list-pager { padding:16px 12px; }
.list-query { flex:1; min-width:180px; max-width:460px; }
.list-query input, .directory-filters select { min-height:40px; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); font:inherit; }
.work-searchbar { display:flex; gap:16px; align-items:end; flex-wrap:wrap; padding:12px 24px; border-bottom:1px solid var(--line); }
.modal:has(.directory-tools) { width:800px; }
.directory-tools { position:sticky; top:-18px; z-index:1; padding:12px 0; background:var(--bg); border-bottom:1px solid var(--line); }
.directory-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.directory-filters label { display:flex; flex:1; min-width:130px; flex-direction:column; gap:6px; color:var(--muted); font-size:var(--text-small); }
.directory-count { margin:14px 0; color:var(--muted); font-size:var(--text-small); }
.directory-card { display:flex; flex-direction:column; gap:10px; width:100%; padding:16px; margin-bottom:10px; border:1px solid var(--line); border-radius:8px; text-align:left; background:#fff; overflow-wrap:anywhere; }
.directory-card .section-title { width:100%; }
.directory-description { line-height:1.5; }
.directory-metrics { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--text-small); color:var(--ink2); }
.rail-sec { flex-shrink:0; }
.rail-sec:has(.ph) { max-height:32vh; overflow:auto; }
.project-plans { margin-top:18px; }
@media (max-width:700px) {
  .header-search { flex-basis:100%; }
  .header-results { width:100%; }
  .top nav { overflow-x:auto; flex-wrap:nowrap; }
  .top nav button { white-space:nowrap; }
  .work-searchbar { padding:12px 16px; }
  .completion-row > .chip { display:none; }
  .recent-completions { padding:14px; }
}

/* Workflows: readable procedures, run history and a schema-driven composer. */
.wf-card{border:1px solid var(--line,#dce0e6);border-radius:12px;padding:20px;margin:16px 0;background:var(--surface,#fff)}
.wf-card p{margin:10px 0}.wf-title{font-size:20px;font-weight:650;text-align:left}
.wf-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:32px;margin:24px 0}
.wf-columns>section{min-width:0}.wf-composer{background:var(--surface,#fff);border:1px solid var(--line,#dce0e6);border-radius:12px;padding:24px;align-self:start}
.wf-composer .row{flex-wrap:wrap;margin:16px 0}.wf-composer .form-label{display:block;margin:16px 0}.wf-composer .field{width:100%;margin-top:6px}
.wf-json{white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto;background:var(--bg,#f4f5f7);border-radius:8px;padding:16px;font-size:14px;line-height:1.6}
.wf-steps{padding-left:28px}.wf-steps>li{padding:16px 12px;border-bottom:1px solid var(--line,#dce0e6)}
.wf-steps h3{margin:0}.wf-steps p{margin:8px 0}.wf-assertion{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line,#dce0e6)}
.wf-columns summary{cursor:pointer;padding:12px 0;font-weight:600}.wf-task{margin:20px 0;padding:16px;border:1px solid var(--line,#dce0e6);border-radius:10px}.wf-task .row{flex-wrap:wrap;margin-top:10px}
@media(max-width:1050px){.wf-columns{grid-template-columns:minmax(0,1fr)}.wf-card .section-title{align-items:flex-start;flex-wrap:wrap}}

/* Project → plan → phase summaries share a predictable reading order. */
.overview-page .head p{max-width:850px;line-height:1.6}
.overview-facts{display:flex;flex-wrap:wrap;gap:20px 36px;margin:20px 0}
.overview-facts>div{flex:1 1 150px;min-width:0}.overview-facts dt{font-size:var(--text-small);color:var(--muted);margin-bottom:5px}.overview-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.overview-section{margin:24px 0;padding:20px;border:1px solid var(--line);background:var(--panel);border-radius:12px;min-width:0}
.overview-section h2{margin:0 0 14px}.overview-columns{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px}.overview-columns>.overview-section{margin:0}
.overview-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.overview-card{border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0}.overview-card h2,.overview-card h3{margin:0}.overview-card h2 .link,.overview-card h3 .link{font-size:inherit;text-align:left}.overview-card p{line-height:1.6;margin:12px 0}.overview-card .section-title{flex-wrap:wrap;gap:12px}.overview-card .row{flex-wrap:wrap}
.overview-progress{margin:18px 0}.overview-progress progress{display:block;width:100%;height:12px;margin:10px 0;accent-color:var(--green)}.overview-legend{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink2);font-size:var(--text-small)}
.overview-task{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair)}.overview-task>div{min-width:0}.overview-task .link{text-align:left;line-height:1.5}.overview-task p{margin:6px 0;font-size:var(--text-small);line-height:1.5}.overview-task .chip{flex-shrink:0}
.overview-next{padding:12px 0;border-bottom:1px solid var(--hair)}.overview-next p{margin:6px 0}.overview-next .link{text-align:left}
@media(max-width:1150px){.overview-cards,.overview-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.overview-section,.overview-card{padding:14px}.overview-task{flex-wrap:wrap}.overview-facts{gap:16px}}

/* Shared data tables: keyboard sorting, sticky headings, bounded rows. */
.data-grid{margin:18px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.data-grid-tools{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:16px;background:var(--rail)}
.data-grid-tools label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-small);font-weight:600}.data-grid-tools label:first-child{flex:1 1 240px}.data-grid-tools input,.data-grid-tools select{border:1px solid var(--line);background:var(--panel);padding:9px 12px;border-radius:6px;font:inherit;color:var(--ink)}
.data-grid .table-scroll{max-height:650px;overflow:auto}.data-grid th{position:sticky;top:0;z-index:1;background:var(--rail)}.data-grid td{vertical-align:top;min-width:110px}.data-grid td:first-child{min-width:220px}.data-grid td p{margin:7px 0;line-height:1.5}.data-grid .btn{margin:3px}.data-grid .list-pager{padding:12px 16px;margin:0;border-top:1px solid var(--line)}.table-sort{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;font-weight:650;cursor:pointer}.table-sort:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* Kanban is exploratory: approval and evidence are never bypassed by dragging. */
.kanban-section{padding:20px 0}.kanban-section>.section-title,.kanban-section>.filterbar{padding:0 20px}.kanban-scroll{display:flex;gap:16px;overflow-x:auto;padding:8px 20px 20px;align-items:flex-start;scroll-snap-type:x proximity}.kanban-lane{flex:0 0 300px;min-width:0;background:var(--rail);border:1px solid var(--line);border-radius:10px;scroll-snap-align:start;padding:12px}.kanban-lane>header{padding:4px 4px 12px;min-height:112px}.kanban-lane h3{display:flex;justify-content:space-between;gap:8px;font-size:18px;margin:0 0 10px}.kanban-lane header p{font-size:var(--text-small);line-height:1.5;margin:0;color:var(--ink2)}.kanban-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:12px}.kanban-title{font-size:17px;font-weight:650;line-height:1.45;text-align:left;margin:10px 0}.kanban-card p{font-size:var(--text-small);line-height:1.5;margin:8px 0}.kanban-card summary{font-size:var(--text-small);cursor:pointer}.kanban-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.kanban-empty{padding:16px 4px;color:var(--muted)}.kanban-lane[data-lane=blocked]{border-top:4px solid var(--red)}.kanban-lane[data-lane=approval],.kanban-lane[data-lane=review]{border-top:4px solid var(--amber)}.kanban-lane[data-lane=active]{border-top:4px solid var(--blue)}.kanban-lane[data-lane=done]{border-top:4px solid var(--green)}
.agent-modal{width:min(860px,calc(100vw - 32px))}.agent-context{background:var(--rail);padding:16px;border-radius:8px}.agent-chat .form-label{display:block;margin:16px 0}.agent-chat textarea{width:100%;margin-top:8px;line-height:1.6}.agent-messages{max-height:320px;overflow:auto;margin:16px 0}.agent-message{border-left:3px solid var(--line);padding:12px 16px;margin:10px 0}.agent-message.user{border-color:var(--blue);background:var(--blue-bg)}.agent-message p{white-space:pre-wrap;line-height:1.6;margin:7px 0}.agent-proposal{padding:18px;background:var(--rail);border:1px solid var(--line);border-radius:8px;margin-top:20px}.agent-proposal textarea{font-family:var(--mono);font-size:15px}.agent-proposal .btn{margin:5px}
@media(max-width:650px){.kanban-lane{flex-basis:280px}.data-grid-tools{padding:12px}.data-grid-tools input{width:100%}}
.data-grid tr:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}