/* All-Access — presentation layer.
 *
 * Conformance target is WCAG 2.2 AA, checked by tools/a11y_audit.py rather than
 * asserted here. The rules that shaped this file:
 *
 * - Every text and non-text pair below is measured, not eyeballed. The audit
 *   recomputes the contrast ratios from these declarations and fails the build
 *   if one drops under 4.5:1 for text or 3:1 for a UI boundary.
 * - Nothing is conveyed by colour alone. Every status colour is paired with a
 *   word, and the status chips carry text, not just a dot.
 * - Sizing is in rem so the browser's own text size is respected; the "Large
 *   text" control raises the root size rather than swapping a stylesheet.
 * - Reflow to a single column at 320 px with no horizontal scrolling of the
 *   page. Wide tables scroll inside their own container, which is a labelled,
 *   focusable region so a keyboard user can reach the scroll.
 *
 * The visual language is a console: a fixed app bar, a grouped rail, and a
 * content column of cards. Density is deliberate — this is a screen a first AD
 * reads standing up, under time pressure, so the answer is always in the first
 * card and the evidence is always one disclosure below it.
 */

:root {
  color-scheme: light dark;

  /* -- surfaces ---------------------------------------------------------- */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-3: #e4e7ec;

  /* -- ink --------------------------------------------------------------- */
  --ink: #16181c;            /* 15.9:1 on --surface */
  --ink-muted: #4a4f57;      /*  8.3:1 on --surface */
  --line: #d3d7de;
  --line-strong: #7b828c;

  /* -- accent ------------------------------------------------------------ */
  --accent: #0b4fbd;         /*  7.4:1 on --surface */
  --accent-ink: #ffffff;
  --accent-soft: #e8effb;
  --accent-line: #b6ccf0;
  --focus: #a63a00;
  --focus-inner: #ffffff;    /* the second ring; see :focus-visible */

  /* -- status ------------------------------------------------------------ */
  --ok: #1c5c34;             /*  6.6:1 on --surface */
  --ok-bg: #e2f0e6;
  --warn: #7a4a00;           /*  6.4:1 on --surface */
  --warn-bg: #fbeed6;
  --bad: #a01523;            /*  6.5:1 on --surface */
  --bad-bg: #fbe3e5;
  --quiet: #4a4f57;
  --quiet-bg: #eceef0;

  /* -- graphics ----------------------------------------------------------
   * Chart and diagram fills. These carry meaning that is also written out in
   * a label or a legend entry beside them, so they are held to the 3:1
   * non-text boundary rather than the 4.5:1 text minimum. */
  --graph-1: #0b4fbd;
  --graph-2: #7a4a00;
  --graph-3: #1c5c34;
  --graph-4: #6b3fa0;
  --graph-track: #dfe3e9;
  --graph-ink: #16181c;

  --radius: 8px;
  --radius-lg: 14px;
  --gap: 1rem;
  --measure: 68ch;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-2: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 24px rgba(16, 24, 40, 0.10);

  --rail: 15.5rem;
  --bar: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101318;
    --surface: #1a1e25;
    --surface-2: #232830;
    --surface-3: #2c323b;

    --ink: #f2f3f5;          /* 14.6:1 on --surface */
    --ink-muted: #b9bec7;    /*  8.2:1 on --surface */
    --line: #39404a;
    --line-strong: #7c8794;

    --accent: #9cc9f0;
    --accent-ink: #0d1218;
    --accent-soft: #17293c;
    --accent-line: #2f4a63;
    --focus: #ffb066;
    --focus-inner: #10161c;

    --ok: #7fd39b;
    --ok-bg: #16301f;
    --warn: #ecbe6d;
    --warn-bg: #33280f;
    --bad: #f2909a;
    --bad-bg: #37171b;
    --quiet: #b9bec7;
    --quiet-bg: #262a31;

    --graph-1: #9cc9f0;
    --graph-2: #ecbe6d;
    --graph-3: #7fd39b;
    --graph-4: #c4a6ec;
    --graph-track: #2c323b;
    --graph-ink: #f2f3f5;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.36), 0 12px 24px rgba(0, 0, 0, 0.44);
  }
}

html { font-size: 100%; }
html[data-textsize="large"] { font-size: 125%; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto,
               -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Focus is always visible and never removed.
 *
 * Two-tone, and that is not decoration. A single-colour ring has to contrast
 * with every background it can land on, and this ring lands on the page, on a
 * card and on the selected tab — which is the accent colour. Orange on that
 * blue measures 1.47:1. The inner ring in --focus-inner sits between the two, so
 * whichever side has poor contrast, the other side carries the indicator.
 * tools/a11y_audit.py checks both rings against both themes. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  z-index: 60;
}
.skip-link:focus { left: 0; }

/* -- app bar ------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: center;
  justify-content: space-between;
  min-height: var(--bar);
  padding: 0.55rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.masthead-identity { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.mark {
  margin: 0;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
}

.wordmark {
  display: block;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.wordmark span { font-weight: 400; color: var(--ink-muted); }

.production {
  display: block;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 1rem 1.75rem;
}
.footer p { margin: 0; color: var(--ink-muted); font-size: 0.82rem; }

.masthead-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.field { display: flex; flex-direction: column; gap: 0.15rem; }
.field label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

select, input, textarea {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  min-height: 2.5rem;
  max-width: 24rem;
}

.button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.95rem;
  min-height: 2.5rem;   /* target size, WCAG 2.2 SC 2.5.8 */
  min-width: 2.75rem;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.button:hover { background: var(--surface-2); }
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.button.primary:hover { box-shadow: var(--shadow-2); }
.button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.statusbar {
  position: sticky;
  top: var(--bar);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  padding: 0.4rem 1.25rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.statusbar p { margin: 0; font-size: 0.85rem; color: var(--ink-muted); }

/* The workflow rail: the coordinator's own macro phases, with the one this
 * disruption reached marked. It is read from the state history, not hard-coded,
 * so a run that stops at "no feasible plan" shows exactly that. */
.phases { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.phase {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.phase::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--line-strong);
}
.phase.done { color: var(--ok); }
.phase.done::before { background: var(--ok); }
.phase.here {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.phase.here::before { background: var(--accent); }

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

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.tabs {
  position: sticky;
  top: calc(var(--bar) + 2.4rem);
  max-height: calc(100vh - var(--bar) - 2.4rem);
  overflow-y: auto;
  padding: 0.9rem 0.6rem 2rem;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }

.navgroup {
  margin: 0.9rem 0 0.3rem;
  padding: 0 0.7rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.navgroup:first-child { margin-top: 0; }

[role="tab"] {
  font: inherit;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  min-height: 2.5rem;
  transition: background 120ms ease;
}
[role="tab"]:hover { background: var(--surface-2); }
[role="tab"][aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
/* A glyph, not an icon font: two characters of geometry that survive a text-only
 * rendering and never become the only carrier of meaning — the label is always
 * beside it. */
.tabmark {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0.9;
}

main { padding: 1.6rem 1.75rem 5rem; min-width: 0; max-width: 84rem; }
main:focus { outline: none; }

h1 { font-size: 1.55rem; margin: 0 0 0.2rem; letter-spacing: -0.02em; font-weight: 700; }
h2 {
  font-size: 0.82rem;
  margin: 2.2rem 0 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
h3 { font-size: 1rem; margin: 1.2rem 0 0.35rem; font-weight: 700; }
.lede { margin: 0 0 1.5rem; color: var(--ink-muted); max-width: var(--measure); font-size: 0.95rem; }

.loading { color: var(--ink-muted); font-style: italic; }

/* -- headline ------------------------------------------------------------
 * One sentence at the top of a view that says what the screen concluded, so
 * the reader is never left to derive it from a table. */

.headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  align-items: baseline;
  padding: 1rem 1.15rem;
  margin: 0 0 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  border-left: 5px solid var(--accent);
}
.headline.ok { border-left-color: var(--ok); }
.headline.warn { border-left-color: var(--warn); }
.headline.bad { border-left-color: var(--bad); }
.headline .h-verdict { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.headline .h-detail { color: var(--ink-muted); font-size: 0.95rem; max-width: var(--measure); }

/* -- cards and metrics ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-1);
}
.card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 800;
}
.card .value {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card .note { font-size: 0.82rem; color: var(--ink-muted); margin: 0.25rem 0 0; line-height: 1.4; }
.card.emphatic { border-color: var(--accent-line); background: var(--accent-soft); }
.card.emphatic .value { color: var(--accent); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1rem;
  box-shadow: var(--shadow-1);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* Status is always a word plus a colour, never a colour alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.chip.ok { color: var(--ok); background: var(--ok-bg); }
.chip.warn { color: var(--warn); background: var(--warn-bg); }
.chip.bad { color: var(--bad); background: var(--bad-bg); }
.chip.quiet { color: var(--quiet); background: var(--quiet-bg); }

/* A cell whose value is a real answer that happens to be the default — "as
   emitted" in the replay log. Recessed, but `--quiet` is a 4.5:1 token, not a
   decorative grey, so it stays readable. */
.quiet-cell { color: var(--quiet); font-style: italic; }

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

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin: 0 0 1rem;
  box-shadow: var(--shadow-1);
}

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
caption {
  text-align: left;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
th, td {
  text-align: left;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-muted);
}
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.selected td { background: var(--ok-bg); }
tr.selected td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
tr.selected:hover td { background: var(--ok-bg); }

/* -- details -------------------------------------------------------------- */

details {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin: 0 0 0.6rem;
  box-shadow: var(--shadow-1);
}
summary {
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-radius: var(--radius-lg);
}
summary:hover { background: var(--surface-2); }
details[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
details > *:not(summary) { padding: 0 0.9rem 0.9rem; }
details > .table-scroll { margin: 0.75rem 0.9rem 0.9rem; padding: 0; width: auto; }

dl.pairs { margin: 0; display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 0.3rem 1rem; }
dl.pairs dt { color: var(--ink-muted); font-size: 0.84rem; }
dl.pairs dd { margin: 0; font-size: 0.9rem; }

code, .mono {
  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  background: var(--surface-2);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}
pre.mono {
  overflow-x: auto;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius);
  line-height: 1.5;
}

ul.plain { list-style: none; margin: 0.4rem 0; padding: 0; }
ul.plain li { padding: 0.2rem 0; }

.evidence { color: var(--ink-muted); font-size: 0.87rem; margin: 0.4rem 0 0; max-width: var(--measure); }

.bar {
  height: 0.5rem;
  background: var(--graph-track);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.bar > span { display: block; height: 100%; background: var(--accent); }

.note-block {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.7rem 0.95rem;
  margin: 1rem 0 1.25rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  max-width: var(--measure);
}

/* -- toolbar (view-local controls) ---------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  margin: 0 0 1rem;
}
.toolbar .spacer { flex: 1 1 auto; }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.segmented .button { border: none; border-radius: 0; box-shadow: none; }
.segmented .button + .button { border-left: 1px solid var(--line-strong); }

/* -- diagrams ------------------------------------------------------------
 * Every diagram in this product is inline SVG generated from the same payload
 * the table beside it uses, with a deterministic layout — no physics, no random
 * seed, no animation that changes what is measured. Each carries a <desc> that
 * states in words what the picture shows, and each is paired with the table, so
 * a screen-reader user is never sent to an image for a number. */

figure.figure { margin: 0 0 1.25rem; }
figure.figure svg { display: block; width: 100%; height: auto; }
figure.figure figcaption { color: var(--ink-muted); font-size: 0.85rem; margin-top: 0.5rem; max-width: var(--measure); }

.diagram {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}

.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink-muted); }
.legend .swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 1px solid var(--line-strong); }

/* Gantt-style schedule strip. Rows are absolute-positioned inside a track whose
 * width is the shooting window, so a bar's left edge is its call time. */
.gantt { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: center; }
.gantt .g-label { font-size: 0.83rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt .g-track { position: relative; height: 1.6rem; background: var(--graph-track); border-radius: 5px; }
.gantt .g-bar {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  border-radius: 4px;
  background: var(--graph-1);
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  overflow: hidden;
  white-space: nowrap;
}
.gantt .g-bar.exterior { background: var(--graph-2); color: var(--accent-ink); }
.gantt .g-bar.narrow { min-width: 3px; padding: 0; }
/* The label for a bar too narrow to hold it, printed just outside the bar and
   flipped to the inside edge once the bar is far enough right that the label
   would leave the track. */
.gantt .g-cap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gantt .g-cap.left { margin-left: 0; margin-right: 0.4rem; }
.gantt .g-axis { position: relative; height: 1.2rem; }
.gantt .g-tick { position: absolute; top: 0; font-size: 0.7rem; color: var(--ink-muted); transform: translateX(-50%); white-space: nowrap; }
.gantt .g-tick.day { font-weight: 800; color: var(--ink); }
.gantt .g-rule { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-strong); opacity: 0.55; }

/* Plan cards: the comparison a producer actually makes, three abreast. */
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.9rem; margin: 0 0 1.25rem; }
.plancard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-1);
}
.plancard.chosen { border-color: var(--ok); box-shadow: var(--shadow-2); }
.plancard .p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.plancard .p-title { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.plancard .p-why { color: var(--ink-muted); font-size: 0.86rem; margin: 0; }
.plancard.rejected { border-color: var(--bad); background: var(--bad-bg); }

.metric { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.6rem; align-items: center; font-size: 0.82rem; }
.metric .m-name { color: var(--ink-muted); }
.metric .m-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.metric .m-bar { grid-column: 1 / -1; }

/* A step-by-step flow with the blocking step marked. Used for the saga and for
 * the coordinator timeline. */
.flow { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; margin: 0 0 1rem; }
.flow .step {
  flex: 1 1 9rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  box-shadow: var(--shadow-1);
}
.flow .step .s-name { font-weight: 700; display: block; }
.flow .step .s-note { color: var(--ink-muted); }
.flow .step.ok { border-left-color: var(--ok); }
.flow .step.warn { border-left-color: var(--warn); }
.flow .step.bad { border-left-color: var(--bad); background: var(--bad-bg); }

/* -- reflow --------------------------------------------------------------- */

@media (max-width: 75rem) {
  .phases { width: 100%; margin-left: 0; }
}

@media (max-width: 60rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .tabs { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
  .tabs ul { flex-direction: row; flex-wrap: wrap; }
  .navgroup { width: 100%; margin-top: 0.6rem; }
  [role="tab"] { width: auto; }
  .masthead { position: static; }
  .statusbar { position: static; }
  main { padding: 1.2rem 1rem 3rem; }
}

@media (max-width: 30rem) {
  .masthead { flex-direction: column; align-items: stretch; }
  .masthead-controls { width: 100%; }
  select { max-width: none; width: 100%; }
  dl.pairs { grid-template-columns: minmax(0, 1fr); }
  dl.pairs dt { margin-top: 0.45rem; font-weight: 600; }
  .gantt { grid-template-columns: minmax(0, 1fr); }
}

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

@media print {
  .tabs, .masthead-controls, .statusbar { display: none; }
  [role="tabpanel"][hidden] { display: block !important; }
  .card, .panel, .diagram, details, .table-scroll { box-shadow: none; }
}