/* Coordinator dashboard — operator console look.
   One visual language: color always means workflow/approval state, applied as
   a left rail on cards, a spine on graph nodes, a dot in tables, and a badge
   tint. Machine data (principals, SHAs, globs, ages, digests) always speaks
   monospace; prose and controls speak the system sans. State is text first —
   color is the secondary channel (05 §4).

   Status palette (validated, see notes in graph.js): every status appears
   with its text label; parked/cancelled are deliberately low-chroma (inert). */

:root {
  --ink: #171b21;
  --ink-2: #4a5563;
  /* Muted/label text: dark enough for WCAG AA (>=4.5:1) on canvas and both
     surfaces — the audit (test/audit.mjs) enforces this. */
  --ink-3: #646d7a;
  --canvas: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --line: #d8dee6;
  --line-strong: #aeb8c4;
  --accent: #1d4ed8;
  --focus: #0b5fff;
  --danger: #b00020;

  --st-proposed: #8a5a00;
  --st-rejected: #526a8c;
  --st-ready: #1d4ed8;
  --st-in_progress: #9333ea;
  --st-blocked: #b00020;
  --st-review: #0b7a94;
  --st-changes_requested: #b45309;
  --st-done: #146c2e;
  --st-parked: #526a8c;
  --st-cancelled: #526a8c;
  --st-unknown: #7c8694;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-radius: 2px; }

h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; margin: 0.2rem 0 0.6rem; }
h2 { font-size: 1.05rem; font-weight: 650; margin: 1.4rem 0 0.5rem; }
h3 { font-size: 0.95rem; font-weight: 650; margin: 1rem 0 0.35rem; }
h4 { font-size: 0.85rem; font-weight: 650; margin: 0.8rem 0 0.25rem; }

.muted { color: var(--ink-3); }
.small { font-size: 0.82rem; }

.mono, code { font-family: var(--mono); font-size: 0.86em; }

/* Work-item key (04 §4.1): the human-readable task name — QUANT-14. Machine
   data speaks monospace; --ink-2 keeps AA contrast on canvas and surfaces. */
.task-key { font-family: var(--mono); font-size: 0.8em; color: var(--ink-2); white-space: nowrap; }

/* Uppercase section eyebrow: "BLOCKED · 2" */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.6rem 0 0.6rem;
}
.eyebrow .dot { flex: none; }

/* ------------------------------------------------------------------ shell */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 1.1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand {
  font-weight: 750;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.topbar-project { display: flex; align-items: center; gap: 0.45rem; }
.topbar-project label { font-size: 0.78rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.topbar-project select { padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface); }

.topbar-spacer { flex: 1; }

/* Jump box: paste a task key or UUID, land on the task (04 §4.1). Always in
   the shell header, so it is reachable from every page. */
.jump-form { display: flex; align-items: center; gap: 0.45rem; }
.jump-form label { font-size: 0.78rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.jump-form input { width: 10.5rem; padding: 0.25rem 0.4rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface); }
.jump-message { font-size: 0.8rem; color: var(--danger); }

.draft-count { font-weight: 600; text-decoration: none; font-size: 0.85rem; }
.draft-count:hover { text-decoration: underline; }

.body { display: flex; min-height: calc(100vh - 3rem); }

.sidebar {
  min-width: 11rem;
  padding: 0.9rem 0.6rem;
  position: sticky;
  top: 2.6rem;
  align-self: flex-start;
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0.1rem 0; }

.sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: var(--radius);
  font-weight: 550;
}

.sidebar a:hover { background: var(--surface-2); color: var(--ink); }
.sidebar a.nav-active { background: var(--ink); color: var(--surface); }

.nav-count {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--mono);
  background: var(--st-proposed);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.45rem;
  line-height: 1.5;
}
.sidebar a.nav-active .nav-count { background: var(--surface); color: var(--ink); }

.content { flex: 1; padding: 1.1rem 1.6rem 4rem; max-width: 77.5rem; min-width: 0; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-row { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

.badge-approval-proposed  { color: #7c5100; background: #fdf1d7; }
.badge-approval-approved  { color: #146c2e; background: #e2f3e7; }
.badge-approval-rejected  { color: #44546b; background: #e8edf3; text-decoration: line-through; }

.badge-wf-ready             { color: #173fb4; background: #e5eafb; }
.badge-wf-in_progress       { color: #7a22c7; background: #f2e7fd; }
.badge-wf-blocked           { color: #b00020; background: #fbe3e6; }
.badge-wf-review            { color: #0b6b82; background: #ddf1f6; }
.badge-wf-changes_requested { color: #9e4a08; background: #fdeeda; }
.badge-wf-done              { color: #146c2e; background: #e2f3e7; }
.badge-wf-parked            { color: #44546b; background: #e8edf3; }
.badge-wf-cancelled         { color: #44546b; background: #e8edf3; text-decoration: line-through; }

.badge-auth-authoritative    { color: #173fb4; background: #e5eafb; }
.badge-auth-nonoverridable   { color: #b00020; background: #fbe3e6; }
.badge-auth-observational    { color: #44546b; background: #e8edf3; }
.badge-auth-truncated        { color: #7c5100; background: #fdf1d7; }

.badge-stale    { color: #b00020; background: #fbe3e6; }
.badge-overlap  { color: #b00020; background: #fbe3e6; }
.badge-relation { color: #173fb4; background: #e5eafb; }
.badge-env      { color: #146c2e; background: #e2f3e7; }

.badge-run-active    { color: #7a22c7; background: #f2e7fd; }
.badge-run-blocked   { color: #b00020; background: #fbe3e6; }
.badge-run-submitted { color: #0b6b82; background: #ddf1f6; }
.badge-run-abandoned { color: #44546b; background: #e8edf3; }

.badge-note-system   { color: #44546b; background: #e8edf3; }
.badge-note-progress { color: #173fb4; background: #e5eafb; }
.badge-note-finding  { color: #146c2e; background: #e2f3e7; }
.badge-note-log      { color: #44546b; background: #e8edf3; }
.badge-note-question { color: #7c5100; background: #fdf1d7; }

.kind {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* State dot: always sits beside text, never alone. */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--st-unknown);
  vertical-align: 0;
}
.dot.state-proposed { background: var(--st-proposed); }
.dot.state-rejected { background: var(--st-rejected); }
.dot.state-ready { background: var(--st-ready); }
.dot.state-in_progress { background: var(--st-in_progress); }
.dot.state-blocked { background: var(--st-blocked); }
.dot.state-review { background: var(--st-review); }
.dot.state-changes_requested { background: var(--st-changes_requested); }
.dot.state-done { background: var(--st-done); }
.dot.state-parked { background: var(--st-parked); }
.dot.state-cancelled { background: var(--st-cancelled); }

/* ------------------------------------------------------------------ chips */

.chip-row { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin: 0.3rem 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.75rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 100%;
}

.chip .dot { flex: none; }
.chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip-mono { font-family: var(--mono); font-size: 0.72rem; background: var(--surface); }

/* ------------------------------------------------------------- stat strip */

.stat-strip { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.8rem 0 0.4rem; }

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-width: 8.5rem;
  padding: 0.55rem 0.9rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.12s ease;
}
.stat:hover { border-color: var(--line-strong); }

.stat-num {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ------------------------------------------------------------------ cards */

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.6rem 0;
  background: var(--surface);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.card-head h2, .card-head h3 { margin: 0; }

.card-actions { margin-top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.card-log { margin-top: 0.4rem; }

.note-system { background: var(--canvas); }
.note-pinned { border-left: 4px solid var(--st-proposed); }

/* State rail: 3px left edge carrying the workflow state color. */
.rail-proposed, .rail-rejected, .rail-ready, .rail-in_progress, .rail-blocked,
.rail-review, .rail-changes_requested, .rail-done, .rail-parked,
.rail-cancelled, .rail-unknown { border-left: 3px solid var(--st-unknown); }
.rail-proposed { border-left-color: var(--st-proposed); }
.rail-rejected { border-left-color: var(--st-rejected); }
.rail-ready { border-left-color: var(--st-ready); }
.rail-in_progress { border-left-color: var(--st-in_progress); }
.rail-blocked { border-left-color: var(--st-blocked); }
.rail-review { border-left-color: var(--st-review); }
.rail-changes_requested { border-left-color: var(--st-changes_requested); }
.rail-done { border-left-color: var(--st-done); }
.rail-parked { border-left-color: var(--st-parked); }
.rail-cancelled { border-left-color: var(--st-cancelled); }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 0.7rem;
  margin: 0.4rem 0 0.6rem;
}

.run-card {
  margin: 0;
  padding: 0.65rem 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.run-card .who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}

.run-card .who .principal { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.run-card .who .age { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }

.run-card .task-title { font-size: 0.95rem; font-weight: 650; line-height: 1.3; }
.run-card .task-title a { color: var(--ink); text-decoration: none; }
.run-card .task-title a:hover { text-decoration: underline; }

.run-card .checkout { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); margin: 0; padding: 0; list-style: none; }
.run-card .checkout li { margin: 0.05rem 0; }

.note-line {
  border-top: 1px solid var(--line);
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-2);
  display: flow-root;
}
.note-line .when { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); margin-right: 0.4rem; }

.reason-line { font-size: 0.85rem; color: var(--ink); }
.reason-line strong { color: var(--st-blocked); }

.meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.8rem;
  margin: 0.4rem 0;
}

.meta-grid dt { font-weight: 600; color: var(--ink-3); font-size: 0.8rem; }
.meta-grid dd { margin: 0; font-size: 0.86rem; }

/* --------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0.4rem 0 1rem; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.timeline li { position: relative; padding: 0.18rem 0 0.18rem 1.5rem; }

.timeline .tl-dot {
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 2px solid var(--canvas);
  box-sizing: content-box;
  margin-left: -2px;
}

.tl-dot.note-progress { background: var(--st-ready); }
.tl-dot.note-finding { background: var(--st-done); }
.tl-dot.note-log { background: var(--ink-3); }
.tl-dot.note-question { background: var(--st-proposed); }
.tl-dot.note-system { background: var(--line-strong); }
.tl-dot.note-verdict { background: var(--st-in_progress); }

.timeline .tl-head { font-size: 0.8rem; color: var(--ink-3); }
.timeline .tl-head time, .timeline .tl-head .author { font-family: var(--mono); font-size: 0.74rem; }
.timeline .tl-body { font-size: 0.86rem; color: var(--ink-2); }

/* ----------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }

table.data { border-collapse: collapse; width: 100%; margin: 0; }

table.data caption {
  text-align: left;
  font-weight: 650;
  padding: 0.55rem 0.8rem 0.1rem;
  caption-side: top;
}

table.data th, table.data td {
  border-bottom: 1px solid var(--line);
  padding: 0.42rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

table.data th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface);
  white-space: nowrap;
}

table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: #f7f9fb; }

/* Plain nested tables inside cards keep the old boxed look lightly. */
.card table.data { border: 1px solid var(--line); border-radius: 6px; margin: 0.4rem 0 0.8rem; }

.inline-list { list-style: none; margin: 0; padding: 0; }
.link-list { margin: 0.2rem 0 0.8rem; padding-left: 1.1rem; }
.link-list li { margin: 0.15rem 0; }

/* ------------------------------------------------------------------ graph */

.graph-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface);
  background-image: radial-gradient(circle, #dfe5eb 1px, transparent 1px);
  background-size: 18px 18px;
  padding: 0.4rem;
  margin: 0.5rem 0 0.3rem;
}

.dep-graph { display: block; }

.dep-graph .node-box {
  fill: var(--surface);
  stroke: var(--line-strong);
  stroke-width: 1;
}
.dep-graph .node:hover .node-box { stroke: var(--ink-2); }
.dep-graph .node-center .node-box { stroke: var(--ink); stroke-width: 1.6; }

.dep-graph .node-spine { fill: var(--st-unknown); }
.dep-graph .node-spine.state-proposed { fill: var(--st-proposed); }
.dep-graph .node-spine.state-rejected { fill: var(--st-rejected); }
.dep-graph .node-spine.state-ready { fill: var(--st-ready); }
.dep-graph .node-spine.state-in_progress { fill: var(--st-in_progress); }
.dep-graph .node-spine.state-blocked { fill: var(--st-blocked); }
.dep-graph .node-spine.state-review { fill: var(--st-review); }
.dep-graph .node-spine.state-changes_requested { fill: var(--st-changes_requested); }
.dep-graph .node-spine.state-done { fill: var(--st-done); }
.dep-graph .node-spine.state-parked { fill: var(--st-parked); }
.dep-graph .node-spine.state-cancelled { fill: var(--st-cancelled); }

.dep-graph .node-kind {
  font-family: system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

.dep-graph .node-title {
  font-family: system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--ink);
}

.dep-graph a { text-decoration: none; }
.dep-graph a:focus-visible .node-box { stroke: var(--focus); stroke-width: 2; }

.dep-graph .edge { fill: none; stroke-width: 1.4; }
.dep-graph .edge-blocks { stroke: var(--st-blocked); stroke-width: 2; }
.dep-graph .edge-informs { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.dep-graph .edge-implements { stroke: var(--ink-2); }
.dep-graph .edge-tests { stroke: var(--ink-3); stroke-dasharray: 1.5 3; stroke-linecap: round; }
.dep-graph .edge-fixes { stroke: var(--ink-2); stroke-dasharray: 9 3; }
.dep-graph .edge-supersedes { stroke: var(--line-strong); stroke-dasharray: 3 3; }

.dep-graph .edge.edge-resolved { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 3; }

.dep-graph marker path { fill: var(--ink-2); }
.dep-graph marker.edge-blocks path { fill: var(--st-blocked); }
.dep-graph marker.edge-informs path,
.dep-graph marker.edge-tests path { fill: var(--ink-3); }
.dep-graph marker.edge-supersedes path { fill: var(--line-strong); }
.dep-graph marker.edge-resolved path { fill: var(--line-strong); }

.graph-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.3rem 0 0.8rem; font-size: 0.78rem; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }

.edge-sample { display: inline-block; width: 26px; border-top: 2px solid var(--ink-2); }
.edge-sample.edge-blocks { border-top-color: var(--st-blocked); border-top-width: 2.5px; }
.edge-sample.edge-informs { border-top-style: dashed; border-top-color: var(--ink-3); }
.edge-sample.edge-tests { border-top-style: dotted; border-top-color: var(--ink-3); }
.edge-sample.edge-fixes { border-top-style: dashed; }
.edge-sample.edge-supersedes { border-top-style: dotted; border-top-color: var(--line-strong); }

/* ------------------------------------------------------------------ meter */

.meter { width: min(100%, 22rem); height: 12px; border-radius: 3px; display: block; }
.meter rect { fill: var(--st-unknown); }
.meter rect.state-ready { fill: var(--st-ready); }
.meter rect.state-in_progress { fill: var(--st-in_progress); }
.meter rect.state-blocked { fill: var(--st-blocked); }
.meter rect.state-review { fill: var(--st-review); }
.meter rect.state-changes_requested { fill: var(--st-changes_requested); }
.meter rect.state-done { fill: var(--st-done); }
.meter rect.state-parked { fill: var(--st-parked); }
.meter rect.state-cancelled { fill: var(--st-cancelled); }
.meter rect.state-proposed { fill: var(--st-proposed); }

.meter-row { display: grid; grid-template-columns: 7rem minmax(10rem, 22rem) 1fr; gap: 0.8rem; align-items: center; margin: 0.35rem 0; }
.meter-row .meter-label { font-size: 0.8rem; font-weight: 650; color: var(--ink-2); }
.meter-row .meter-counts { font-size: 0.8rem; color: var(--ink-2); }

/* ------------------------------------------------------------------- tree */

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 1.6rem; border-left: 1px solid var(--line); margin-left: 0.6rem; }
.tree > li, .tree ul > li { margin: 0.45rem 0; position: relative; }
.tree ul > li::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 1.05rem;
  width: 1rem;
  border-top: 1px solid var(--line);
}

.tree-node {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
}

.tree-node .tree-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.tree-node .tree-title { font-weight: 650; font-size: 0.95rem; }
.tree-node .tree-goal { font-size: 0.84rem; color: var(--ink-2); margin: 0.15rem 0 0.3rem; }

/* ----------------------------------------------------------------- drawer */

details.drawer { margin: 0.4rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
details.drawer > summary {
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  font-size: 0.83rem;
  font-weight: 650;
  color: var(--ink-2);
  user-select: none;
}
details.drawer > summary:hover { color: var(--ink); }
details.drawer[open] > summary { border-bottom: 1px solid var(--line); }
details.drawer .drawer-body { padding: 0.5rem 0.9rem 0.8rem; }

/* -------------------------------------------------------------------- pre */

.pre {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  margin: 0.3rem 0 0.8rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.pre.scroll { max-height: 22rem; overflow: auto; }
.pre.brief { max-height: 34rem; }

/* ------------------------------------------------------------------ forms */

.field { margin: 0.5rem 0; }

.field label { display: block; font-weight: 600; font-size: 0.84rem; margin-bottom: 0.15rem; }

.field label.toggle, .toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 450;
  margin-right: 1rem;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea,
.login-form input,
.edit-form input[type="text"],
.edit-form input[type="url"],
.edit-form input[type="number"],
.edit-form select,
.edit-form textarea {
  width: 100%;
  max-width: 42rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  background: var(--surface);
}

.field textarea { font-family: var(--mono); font-size: 0.82rem; }

.field-hint { color: var(--ink-3); font-size: 0.8rem; margin-top: 0.15rem; }
.field-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.15rem; }

.inline-field { display: flex; align-items: center; gap: 0.4rem; }
.inline-field label { margin: 0; }

.btn {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-primary:hover { background: #2b3542; border-color: #2b3542; }

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: #fbe3e6; }

.btn-link { border: none; background: none; color: var(--accent); text-decoration: underline; padding: 0.2rem 0.3rem; font-weight: 450; }
.btn-link:hover { background: none; }

.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.filter-bar, .toggle-bar, .saved-links, .action-bar, .context-controls, .context-copy {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.filter-bar label { font-weight: 600; font-size: 0.84rem; }
.filter-bar select { padding: 0.3rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; }

.saved-links { gap: 0.4rem; }
.saved-links a {
  padding: 0.16rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--ink-2);
  background: var(--surface);
}
.saved-links a:hover { border-color: var(--ink-3); color: var(--ink); }
.saved-links a.nav-active { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* ------------------------------------------------------------------- tabs */

.tabs {
  display: flex;
  gap: 0.1rem;
  border-bottom: 1px solid var(--line);
  margin: 1rem 0 0.9rem;
  flex-wrap: wrap;
}

.tabs a {
  padding: 0.4rem 0.85rem;
  text-decoration: none;
  color: var(--ink-2);
  font-weight: 550;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tabs a:hover { color: var(--ink); }
.tabs a.tab-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 650; }

.tabs a.tab-context { margin-left: auto; color: var(--accent); }

/* ----------------------------------------------------------------- alerts */

.error-summary {
  border: 1px solid var(--danger);
  border-left-width: 4px;
  background: #fdf0f0;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 0.7rem 0;
}

.error-summary h2 { margin-top: 0; color: var(--danger); font-size: 1rem; }

.alert {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0;
  background: var(--surface);
}

.alert-conflict { border-left-color: var(--danger); background: #fdf0f0; }
.alert-info { border-left-color: var(--st-ready); background: #eef4fd; }

.dialog-warning {
  border: 1px solid var(--st-proposed);
  border-left-width: 4px;
  background: #fdf6e3;
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0;
}

.reconcile-note { font-weight: 600; }

.conflict-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.warning-list { color: var(--st-proposed); }

/* ----------------------------------------------------------------- dialog */

.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 27, 33, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 10;
}

.dialog {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(23, 27, 33, 0.25);
  padding: 1rem 1.2rem;
  width: min(34rem, 92vw);
}

.dialog h2 { margin-top: 0; }

.dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.8rem; }

/* Per-territory settlement blocks in the close-refused dialog. */
.settle-territory {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0.6rem 0;
  padding: 0.5rem 0.8rem 0.7rem;
  background: var(--surface);
}

.settle-territory legend { font-weight: 650; padding: 0 0.3rem; font-size: 0.88rem; }

.settle-territory textarea { width: 100%; }

/* Rail card: territory bindings on the task detail. */
.territory-binding { border-top: 1px solid var(--line); padding: 0.4rem 0; }
.territory-binding:first-child { border-top: none; padding-top: 0; }
.territory-binding .line { padding: 0.1rem 0; }
.territory-declare { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.5rem; }
.territory-declare select { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ scope editor */

.assoc-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  background: var(--surface);
}

.assoc-block legend { font-weight: 650; padding: 0 0.3rem; font-size: 0.88rem; }

.assoc-controls { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.4rem; }

.assoc-controls input[type="text"] { width: 10rem; padding: 0.25rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }

.scope-row { display: flex; gap: 0.4rem; align-items: center; margin: 0.25rem 0; }

.scope-row select { width: 6rem; padding: 0.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.scope-row .glob-input { flex: 1; max-width: 30rem; padding: 0.28rem 0.45rem; font-family: var(--mono); font-size: 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }

.assoc-add { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }

/* ------------------------------------------------------------------ login */

.login-wrap {
  max-width: 26rem;
  margin: 14vh auto 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 34px rgba(23, 27, 33, 0.08);
  padding: 1.4rem 1.6rem;
}

.login-form h1 { margin-top: 0; }

/* ------------------------------------------------------------------- misc */

.verification { margin: 0.4rem 0; }

.repo-activity { margin-top: 0.7rem; }

.task-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 1rem 0.6rem;
  margin-bottom: 0.7rem;
}
.task-head .page-head { margin: 0; }
.task-head h1 { margin: 0 0 0.15rem; }
.task-head .task-meta { color: var(--ink-3); font-size: 0.82rem; margin: 0.15rem 0 0; }
.task-head .task-meta .mono { font-family: var(--mono); font-size: 0.78rem; }

.board-empty { color: var(--ink-3); font-size: 0.85rem; margin: 0.2rem 0 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 52rem) {
  .body { flex-direction: column; }
  .sidebar { position: static; border-bottom: 1px solid var(--line); min-width: 0; padding: 0.4rem 0.6rem; }
  .sidebar ul { display: flex; flex-wrap: wrap; gap: 0.15rem; }
  .sidebar li { margin: 0; }
  .conflict-columns { grid-template-columns: 1fr; }
  .content { padding: 0.8rem; }
  .meter-row { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* ============================================================ redesign: IA */
/* Page skeleton, breadcrumbs, section cards, task two-column layout, track
   map, and nav groups. Tokens and badges above are unchanged. */

.page-header { margin-bottom: 0.2rem; }
.page-header .page-head { margin: 0.1rem 0 0.2rem; }
.page-subtitle { margin: 0 0 0.5rem; max-width: 72ch; font-size: 0.88rem; }
.page-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Breadcrumbs: hierarchy visible on every page. */
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.1rem;
  padding: 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.crumbs li { display: flex; align-items: baseline; gap: 0.3rem; }
.crumbs li + li::before { content: "›"; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumb-current { color: var(--ink-2); font-weight: 600; }

/* Section cards: every content block on every page. */
.section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0.8rem 0;
  padding: 0.65rem 1rem 0.85rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 650;
}
.section-count {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.45rem;
  line-height: 1.5;
}
.section-actions { display: inline-flex; gap: 0.5rem; align-items: center; }
.section-body { min-width: 0; }

details.section { padding: 0; }
details.section > summary.section-head {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 0.65rem 1rem 0.65rem 2rem;
  position: relative;
  margin-bottom: 0;
}
details.section > summary.section-head::-webkit-details-marker { display: none; }
details.section > summary.section-head::before {
  content: "▸";
  position: absolute;
  left: 0.85rem;
  top: 0.65rem;
  color: var(--ink-3);
  transition: transform 0.12s ease;
}
details.section[open] > summary.section-head::before { transform: rotate(90deg); }
details.section[open] > summary.section-head { border-bottom: 1px solid var(--line); }
details.section > .section-body { padding: 0.55rem 1rem 0.85rem; }

/* Stat chips: active filter state + link variant. */
a.stat { text-decoration: none; color: inherit; }
.stat-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Sidebar group labels. */
.nav-group {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0.9rem 0 0.25rem;
  padding: 0 0.7rem;
}
.nav-group-block:first-child .nav-group { margin-top: 0; }

/* Task detail: two-column layout, main 2fr / rail 1fr. */
.task-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.8rem;
}
.task-main { min-width: 0; }
.task-rail { min-width: 0; }
.task-rail .section { margin: 0 0 0.8rem; }
.task-head .crumbs { margin-bottom: 0.25rem; }

/* Track map: nested cards with visible connector lines. */
.track-map { list-style: none; margin: 0; padding: 0; }
.track-map .track-map { padding-left: 1.7rem; border-left: 1px solid var(--line); margin-left: 0.7rem; }
.track-map > li { margin: 0.5rem 0; position: relative; }
.track-map .track-map > li::before {
  content: "";
  position: absolute;
  left: -1.7rem;
  top: 1.15rem;
  width: 1.05rem;
  border-top: 1px solid var(--line);
}
.track-node { display: flex; gap: 0.45rem; align-items: flex-start; }

.tree-toggle {
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: 0.45rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
}
.tree-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.tree-toggle .caret { display: inline-block; transition: transform 0.12s ease; }
.tree-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }

.track-card {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.85rem 0.6rem;
}
.track-card-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.track-title { font-weight: 650; font-size: 0.95rem; color: var(--ink); text-decoration: none; }
.track-title:hover { text-decoration: underline; }
.track-rollup { margin-top: 0.3rem; }
.track-rollup .meter-counts { font-size: 0.78rem; color: var(--ink-2); margin-left: 0.2rem; }

.map-items { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.map-items li { padding: 0.12rem 0; font-size: 0.85rem; }
.map-items .dot { margin-right: 0.3rem; }
.map-items ul { list-style: none; padding-left: 1.2rem; border-left: 1px solid var(--line); margin-left: 0.45rem; }

.track-children { margin-top: 0.1rem; }

/* Clickable-card hover. */
.track-card:hover, a.stat:hover { border-color: var(--line-strong); }

@media (max-width: 62.5rem) {
  .task-layout { grid-template-columns: 1fr; }
  .task-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.8rem; }
  .task-rail .section { margin: 0; }
}


/* Documents tree + track document attachments (02 §4.1). */
.doc-tree > li { margin: 0.25rem 0; }
.doc-tree .track-map { margin-left: 0.45rem; padding-left: 1.2rem; }
.doc-tree .track-map > li::before { left: -1.2rem; top: 0.75rem; width: 0.8rem; }
.doc-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; padding: 0.12rem 0; }
.doc-row > a:first-child { font-weight: 550; }

.track-docs { border-top: 1px dashed var(--line); margin-top: 0.45rem; padding-top: 0.2rem; }
.track-docs .eyebrow { margin: 0.35rem 0 0.3rem; }
.track-docs .dialog-warning.small { font-size: 0.8rem; padding: 0.35rem 0.6rem; }


/* ============================================================ instrument */
/* Instrument-panel register (06-dashboard-design-brief round 2): typography
   and hairlines do the work of chrome; tabular numerals for measures; state
   palette only on state; scope colors only on chips/segments; deferred reads
   hatched, never like inlined. */

:root {
  --sc-global: #475569;
  --sc-project: #0369a1;
  --sc-repository: #9a3412;
  --sc-path: #4d7c0f;
  --sc-track: #7e22ce;
  --sc-task: #0f172a;
  --sc-obs: #64748b;
}

/* Eyebrow with trailing rule. */
.eyebrow-ruled .rule { flex: 1; border-top: 1px solid var(--line); transform: translateY(-2px); }

/* Figures band: big tabular numerals over small labels. */
.figures {
  display: flex;
  gap: 2.2rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0.45rem 0 0.55rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0.5rem 0 0.2rem;
}
.figure { display: flex; flex-direction: column; gap: 0; }
a.figure { text-decoration: none; color: inherit; }
a.figure:hover .num { color: var(--accent); }
.figure .num {
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.figure .num .unit { font-size: 0.85rem; font-weight: 550; color: var(--ink-2); }
.figure .lbl {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.figure.warn .num { color: var(--st-blocked); }
.figure.deferred .num { color: var(--ink-2); }
.figure.active .num { color: var(--accent); }
.figure.active .lbl { color: var(--accent); text-decoration: underline; }

/* Scope identity: categorical color, always beside a text label. */
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sc-chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sc-global::before { background: var(--sc-global); }
.sc-project::before { background: var(--sc-project); }
.sc-repository::before { background: var(--sc-repository); }
.sc-path::before { background: var(--sc-path); }
.sc-track::before { background: var(--sc-track); }
.sc-task::before { background: var(--sc-task); }
.sc-obs::before { background: var(--sc-obs); }
.sc-global { color: var(--sc-global); }
.sc-project { color: var(--sc-project); }
.sc-repository { color: var(--sc-repository); }
.sc-path { color: var(--sc-path); }
.sc-track { color: var(--sc-track); }
.sc-task { color: var(--sc-task); }
.sc-obs { color: var(--sc-obs); }

/* Composition bar + cap gauge + deferred strip (SVG). */
.comp-bar { display: block; width: 100%; }
.comp-seg { cursor: pointer; }
.comp-seg:focus-visible .seg-rect { stroke: var(--focus); stroke-width: 2; }
.seg-rect.dim { opacity: 0.22; }
.comp-chrome-seg { fill: #e2e8f0; }
.comp-cap-track { fill: #eef1f5; }
.comp-cap-fill { fill: #c7d0db; }
.comp-cap-tick { stroke: var(--ink); stroke-width: 1.4; }
.comp-label { font-size: 9.5px; font-weight: 600; fill: #ffffff; letter-spacing: 0.02em; }
.comp-label-dark { fill: var(--ink-2); }
.comp-group-label { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; fill: var(--ink-3); }
.comp-tick-label { font-size: 9px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }

.f-global { fill: var(--sc-global); }
.f-project { fill: var(--sc-project); }
.f-repository { fill: var(--sc-repository); }
.f-path { fill: var(--sc-path); }
.f-track { fill: var(--sc-track); }
.f-task { fill: var(--sc-task); }
.f-obs { fill: var(--sc-obs); }
.f-defer-tint { fill: #e6ebf2; }
.hatch-bg { fill: transparent; }
.hatch-line { stroke: #7c8694; }
.defer-hatch-rect { fill: url(#ins-hatch); }

/* Ledger: the item table, density-first. */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.ledger td { padding: 0.3rem 0.5rem 0.3rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.ledger tr:last-child td { border-bottom: none; }
.ledger .bytes {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.ledger .title-cell a { color: var(--ink); font-weight: 550; text-decoration: none; }
.ledger .title-cell a:hover { text-decoration: underline; }
.ledger .why { color: var(--ink-3); font-size: 0.78rem; }
.ledger .row-deferred td { color: var(--ink-2); }
.ledger .row-deferred .title-cell a { color: var(--ink-2); }
.ledger-group {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.55rem 0 0.2rem;
}
.ledger-meter { display: inline-block; height: 6px; border-radius: 2px; vertical-align: 1px; margin-right: 0.4rem; }
.ledger-meter.m-global { background: var(--sc-global); }
.ledger-meter.m-project { background: var(--sc-project); }
.ledger-meter.m-repository { background: var(--sc-repository); }
.ledger-meter.m-path { background: var(--sc-path); }
.ledger-meter.m-track { background: var(--sc-track); }
.ledger-meter.m-task { background: var(--sc-task); }
.ledger-meter.m-obs { background: var(--sc-obs); }
.ledger-meter.m-deferred {
  background-image: repeating-linear-gradient(45deg, rgba(100,116,139,0.5) 0 2px, transparent 2px 5px);
  border: 1px solid var(--line-strong);
}

/* Byte meter width steps (CSP: pre-defined classes). */
.w-0 { width: 4px; } .w-1 { width: 8px; } .w-2 { width: 14px; } .w-3 { width: 22px; }
.w-4 { width: 32px; } .w-5 { width: 46px; } .w-6 { width: 64px; } .w-7 { width: 88px; }
.w-8 { width: 120px; } .w-9 { width: 160px; } .w-10 { width: 210px; }

/* Narrowed-by-track-attachment tag. */
.narrow-tag {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-track);
}

/* Attention band: what is stuck, worst first. */
.attention { border-left: 3px solid var(--st-blocked); padding: 0.1rem 0 0.1rem 0.7rem; margin: 0.35rem 0 0.8rem; }
.attention .line { padding: 0.14rem 0; font-size: 0.86rem; }

/* Ruled overview groups (instrument treatment). */
.ov-track { border-top: 1px solid var(--line-strong); padding: 0.45rem 0 0.35rem; }
.ov-track-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.ov-track-title { font-weight: 650; font-size: 0.98rem; }
.ov-track-title a { color: inherit; text-decoration: none; }
.ov-track-title a:hover { text-decoration: underline; }
.ov-track-children { border-left: 1px solid var(--line); margin-left: 0.45rem; padding-left: 0.9rem; margin-top: 0.3rem; }
.ov-items { margin: 0.25rem 0 0; }
.ov-item { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.14rem 0; font-size: 0.84rem; border-bottom: 1px solid var(--line); }
.ov-item-wrap:last-child > .ov-item:last-child { border-bottom: none; }
.ov-item .dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-3px); }
.ov-children { border-left: 1px solid var(--line); margin-left: 0.45rem; padding-left: 0.8rem; }
.ov-meter-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.25rem; }
.ov-meter-row .meter { flex: 0 1 20rem; height: 8px; }
.ov-counts { font-variant-numeric: tabular-nums; font-size: 0.76rem; color: var(--ink-2); white-space: nowrap; }

/* Repository scope map. */
.scope-map { font-size: 0.82rem; margin: 0.2rem 0 0.4rem; }
.scope-branch { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.1rem 0; }
.scope-branch .branch { font-family: var(--mono); font-size: 0.78rem; white-space: nowrap; }
.scope-branch .markers { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.scope-marker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 0 0.3rem;
  color: var(--ink-2);
  text-decoration: none;
}
.scope-marker:hover { border-color: var(--ink-2); color: var(--ink); }
.scope-branch.is-overlap .branch { font-weight: 700; }
.scope-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.78rem; margin: 0.15rem 0 0.3rem; }
.scope-branch.bd-1 { padding-left: 0.9rem; }
.scope-branch.bd-2 { padding-left: 1.8rem; }
.scope-branch.bd-3 { padding-left: 2.7rem; }
.scope-branch.bd-4 { padding-left: 3.6rem; }
.scope-branch.bd-5 { padding-left: 4.5rem; }
.scope-branch.bd-6 { padding-left: 5.4rem; }

@media (max-width: 62.5rem) {
  .figures { gap: 1.2rem; }
}


/* Document form teaching layout (01 §4.5): form main + reach-preview rail. */
.doc-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 0.6rem;
}
.doc-form-main { min-width: 0; }
.doc-form-rail { min-width: 0; position: sticky; top: 3rem; }
.doc-form-rail .section { margin-top: 0; }
.doc-form-rail .figures { gap: 1.4rem; }
.doc-form-rail .figure .num { font-size: 1.35rem; }

@media (max-width: 62.5rem) {
  .doc-form-layout { grid-template-columns: 1fr; }
  .doc-form-rail { position: static; }
}


/* Kanban board (02 §5 true workflow view). Horizontal scroll with usable
   column widths; drop affordance is class-driven (legal vs refusal). */
.kb-board {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: 0.6rem;
  margin-top: 0.4rem;
}
.kb-col { flex: 0 0 17rem; min-width: 0; }
.kb-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  border-top: 2px solid var(--line-strong);
  padding-top: 0.3rem;
}
.kb-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kb-col-n { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kb-dropnote { font-size: 0.72rem; min-height: 1.05rem; color: var(--ink-2); padding-top: 0.1rem; }
.kb-col-body { min-height: 4rem; padding-top: 0.25rem; border-radius: 6px; }
.kb-col-body.kb-ok { outline: 2px dashed var(--st-ready); outline-offset: 2px; background: #eef4fd; }
.kb-col-body.kb-no {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(45deg, rgba(100, 116, 139, 0.07) 0 6px, transparent 6px 12px);
}
.kb-lane-body.kb-ok { outline: 2px dashed var(--st-ready); outline-offset: 2px; background: #eef4fd; }
.kb-lane-body.kb-no {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(45deg, rgba(100, 116, 139, 0.07) 0 6px, transparent 6px 12px);
}

.kb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.55rem 0.45rem;
  margin-bottom: 0.5rem;
  cursor: grab;
}
.kb-card:active { cursor: grabbing; }
.kb-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.kb-top { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.kb-top .kb-badges { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.kb-title { display: block; font-weight: 600; font-size: 0.86rem; margin: 0.12rem 0; text-decoration: none; color: var(--ink); }
.kb-title:hover { text-decoration: underline; }
.kb-meta { font-size: 0.73rem; color: var(--ink-3); }
.kb-note { font-size: 0.76rem; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.22rem; }
.kb-note .when { font-size: 0.7rem; color: var(--ink-3); }
.kb-reason {
  font-size: 0.78rem;
  border-left: 3px solid var(--st-blocked);
  padding-left: 0.4rem;
  margin-top: 0.3rem;
  color: var(--ink);
}
.kb-reason strong { color: var(--st-blocked); }
.kb-move { margin-top: 0.25rem; }
.kb-move > summary {
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--ink-3);
  user-select: none;
  list-style: none;
}
.kb-move > summary::before { content: "▸ "; }
.kb-move[open] > summary::before { content: "▾ "; }
.kb-move > summary:hover { color: var(--ink); }
.kb-move-body { display: flex; gap: 0.2rem; flex-wrap: wrap; padding-top: 0.15rem; }
.kb-lane { margin-top: 0.9rem; border-top: 1px solid var(--line-strong); padding-top: 0.4rem; }
.kb-lane > summary { cursor: pointer; user-select: none; list-style: none; }
.kb-lane > summary::before { content: "▸ "; color: var(--ink-3); }
.kb-lane[open] > summary::before { content: "▾ "; }
.kb-lane-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.5rem;
  padding-top: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .kb-card { cursor: default; }
}

/* ------------------------------------------------ reference preview (peek)
   06 §"Following a link should not cost a page": a fixed side panel rather
   than a hover card — strict CSP forbids the inline geometry a card beside
   its trigger needs, and a fixed panel cannot be clipped by the scroll
   containers (table, board, graph) dense pages live in. Non-interactive
   (pointer-events: none): it swallows no clicks; the link still navigates.
   Hidden with visibility (not display) so the open transition can run; the
   global reduced-motion block above neutralizes that transition. */
.peek {
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  width: min(22rem, 92vw);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(23, 27, 33, 0.18);
  padding: 0.7rem 0.9rem 0.6rem;
  z-index: 8; /* below dialogs (10) */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms;
}

.peek.peek-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.peek-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.peek-title {
  font-size: 0.98rem;
  font-weight: 650;
  margin: 0.25rem 0 0.35rem;
}

.peek .badge-row { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.2rem 0; }

.peek-meta {
  margin: 0.4rem 0 0;
  border-top: 1px solid var(--line);
  padding-top: 0.35rem;
}

.peek-body {
  font-size: 0.85rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 0.35rem;
  margin: 0.45rem 0 0;
}

.peek-loading { margin: 0.3rem 0; }

.peek-hint {
  border-top: 1px solid var(--line);
  padding-top: 0.3rem;
  margin: 0.5rem 0 0;
}

/* -------------------------------------------------- task list affordances
   05 §5.3: the copyable task UUID is the product of the task list (the full
   UUID stays out of the resting layout), and the relations line answers "is
   this connected to something?" in one followable line. */
.id-cell { white-space: nowrap; }

.copy-btn { white-space: nowrap; }

.copy-scratch {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rel-line {
  font-size: 0.78rem;
  margin-top: 0.1rem;
}

.rel-line a { color: var(--accent); }

@media (max-width: 52rem) {
  .peek {
    top: auto;
    bottom: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: 45vh;
  }
}