/* Factory site styles.

   One meaning, one color, everywhere (design section 5). The tokens below
   are the whole palette: the page's surfaces and text, the meaning colors
   every chart reuses (value-adding, necessary, each waste, agents working
   but not labeled, not labeled yet, no session running), the alarm red that
   only abnormal states use, and one accent. Light and dark each define
   every token; hatches are built from the tokens, so they follow the theme.

   No decorative cards: a border or a box appears only around something the
   reader can click. Section intros and explanations are plain text. */

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --page-plane: #f9f9f7;
  --text-primary: #161614;
  --text-secondary: #52514e;
  --text-muted: #6f6e69;
  --gridline: #e7e6df;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.12);
  --focus: #2a78d6;
  --link: #1f63b8;

  /* Meaning colors. Each is at least 3:1 against the page in both themes,
     except the deliberately faint "no session running" band, which always
     carries a hatch and a label. */
  --c-value: #2f8a4e;
  --c-necessary: #86857e;
  --c-waste-waiting: #d1661f;
  --c-waste-defects: #b23a2a;
  --c-waste-extra-processing: #b8860b;
  --c-waste-overproduction: #9a5b2e;
  --c-waste-motion: #c0704f;
  --c-waste-transportation: #7f4f35;
  --c-waste-inventory: #a8742c;
  --c-waste-talent: #8e6a4a;
  --c-waste-unknown: #958a7f;
  --c-agents-working: #5f7f9e;
  --c-not-labeled: #6f6e69;
  --c-no-session: #b9b7ad;
  /* Waiting (idle time) by what it waited on: one warm family, darkest for
     the operator's next prompt; "cause not recorded" is hatched. */
  --c-wait-next_prompt: #c25a17;
  --c-wait-api_retry: #e08a3c;
  --c-wait-tool_failure: #7a2e2e;
  --c-wait-long_tool_call: #d6772a;
  --c-wait-queue_before_start: #e9b96a;
  --c-wait-no_session: #f3dcc0;
  --c-wait-unknown: #d1661f;
  /* The agent was working on another task: the family's rose shade. */
  --c-wait-other_task: #b53a6a;
  --c-alarm: #c62f2f;
  --c-accent: #6b4fd8;
  /* The human-agent clock: an operator prompt whose why is not known, and
     a pull request time. A known why takes the next-prompt waiting color. */
  --c-op: #3d3c38;
  --c-pr: #1f63b8;
  /* Why the agent stopped before a wait for the next prompt (addendum §4):
     one color per actionable class, one brown for the three human gates,
     which their patterns tell apart; "why not known" is an outline. Stopped short is teal with a
     checkerboard so an unsplit next-prompt bar (orange, solid) can never
     read as all stopped short; the gate brown stays clear of the pull
     request blue. Checked with the dataviz validator on this page's
     surface; pairs below its floors are told apart by pattern and label. */
  --c-why-stopped_short: #008a90;
  --c-why-question: #9b3fb5;
  --c-why-error_limit: #614989;
  --c-why-interrupted: #6b7a00;
  --c-why-gate: #7e5401;
  --c-why-not_known: #6f6e69;

  /* Hatches from the tokens: a stripe of the meaning color over the page. */
  --hatch-agents-working: repeating-linear-gradient(135deg, var(--c-agents-working) 0 2px, transparent 2px 6px);
  --hatch-no-session: repeating-linear-gradient(135deg, var(--c-no-session) 0 2px, transparent 2px 6px);

  /* Other series colors for charts that are not about meaning (tools, models). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-8: #e34948;

  --status-good: #2f8a4e;
  --status-warning: #c98500;
  --status-serious: #d1661f;
  --status-critical: #c62f2f;

  --radius: 8px;
  --max-width: 1080px;
  --prose-width: 70ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --surface-2: #201f1e;
    --page-plane: #111110;
    --text-primary: #f4f4f1;
    --text-secondary: #c3c2b7;
    --text-muted: #a8a7a0;
    --gridline: #2c2c2a;
    --baseline: #45443f;
    --border: rgba(255, 255, 255, 0.14);
    --focus: #6ea8ff;
    --link: #79aef5;

    --c-value: #4fb874;
    --c-necessary: #8f8e88;
    --c-waste-waiting: #e8833c;
    --c-waste-defects: #e0604c;
    --c-waste-extra-processing: #d9a93a;
    --c-waste-overproduction: #c98a55;
    --c-waste-motion: #e09878;
    --c-waste-transportation: #b98a6a;
    --c-waste-inventory: #d0a060;
    --c-waste-talent: #bfa080;
    --c-waste-unknown: #9b9189;
    --c-agents-working: #7f9fbf;
    --c-not-labeled: #a8a7a0;
    --c-no-session: #5a5953;
    --c-wait-next_prompt: #f08a3e;
    --c-wait-api_retry: #f8dcae;
    --c-wait-tool_failure: #a64a2c;
    --c-wait-long_tool_call: #a86a8a;
    --c-wait-queue_before_start: #9a8148;
    --c-wait-no_session: #6a4f36;
    --c-wait-unknown: #e8833c;
    --c-wait-other_task: #e57a9a;
    --c-op: #d6d4cc;
    --c-pr: #6aa7ee;
    --c-why-stopped_short: #1ea3aa;
    --c-why-question: #b277cf;
    --c-why-error_limit: #6f6de8;
    --c-why-interrupted: #8f9a26;
    --c-why-gate: #886e1f;
    --c-why-not_known: #a8a7a0;
    --c-alarm: #ef5a5a;
    --c-accent: #9d88f0;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-8: #e66767;

    --status-good: #4fb874;
    --status-warning: #d9a93a;
    --status-serious: #e8833c;
    --status-critical: #ef5a5a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a, a:visited { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }

/* Keyboard focus is always visible. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
main:focus, h1:focus { outline: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 560px) { .wrap { padding: 0 16px; } }

/* ---------- Top bar: the site, the four steps, Why Lean? ---------- */

.topbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 12px;
  padding-bottom: 8px;
}
.site-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary) !important;
  text-decoration: none;
  margin-right: 8px;
}
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
}
/* The tabs are links, so they are the one boxed thing in the bar. */
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-secondary) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  white-space: nowrap;
}
.step:hover { border-color: var(--border); color: var(--text-primary) !important; }
.step[aria-current="page"] {
  color: var(--text-primary) !important;
  border-color: var(--text-primary);
  background: var(--surface-2);
}
.step-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
}
.why-link {
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
}
.why-link[aria-current="page"] { text-decoration: underline; }

/* At phone width the four steps sit two to a row, so nothing scrolls
   sideways. A step whose name no longer fits half the row (larger text)
   takes a row of its own instead of being cut. */
@media (max-width: 600px) {
  .topbar-row { gap: 6px 12px; }
  .site-name { flex: 1 1 auto; }
  .steps { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .step { flex: 1 1 calc(50% - 3px); justify-content: flex-start; padding: 6px 10px; font-size: 14px; white-space: normal; border-color: var(--border); border-radius: var(--radius); }
}

/* ---------- The status line: quiet when normal, loud when abnormal ---------- */

.status-line {
  margin: 0;
  padding: 6px 0 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
.status-word { font-weight: 650; }
.status-normal .status-word { color: var(--c-value); }
.status-not_monitored .status-word { color: var(--text-primary); }
.status-abnormal { color: var(--text-primary); }
.status-abnormal .status-word, .status-abnormal .status-owner { color: var(--c-alarm); font-weight: 700; }
/* An owner the build could not check is unknown, not absent: plain text. */
.status-abnormal .status-owner.status-owner-unchecked { color: inherit; font-weight: 600; }
.status-abnormal { border-left: 4px solid var(--c-alarm); padding-left: 10px; }

/* ---------- Views and their text ---------- */

main { padding: 28px 0 48px; display: block; }
.view[hidden] { display: none; }

/* Process learning: conclusions first, evidence at its own level of detail. */
.reader-wrap { max-width: 1240px; }
.material-warning { margin: .35rem 0; font-size: .85rem; line-height: 1.4; max-width: 90ch; }
.reader-conclusion { margin: 0 0 .65rem; max-width: 68ch; font-size: 1.2rem; line-height: 1.5; font-weight: 600; }
.reader-limit { color: var(--text-secondary); max-width: 76ch; margin: .65rem 0; }
.reader-next { display: inline-block; padding: .45rem 0; font-weight: 650; margin: 0 0 .8rem; }
.reader-section { margin: 1.8rem 0; min-width: 0; }
.reader-section > p, .reader-behavior > p, .reader-finding > p, .reader-improvement > p { max-width: 76ch; }
.reader-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; align-items: start; }
.reader-columns > .reader-section { margin-top: 0; }
.reader-finding, .reader-improvement { min-width: 0; border-top: 1px solid var(--border); padding: 1rem 0; }
.reader-finding h3, .reader-improvement h3, .reader-behavior h3 { margin: .2rem 0 .6rem; line-height: 1.4; }
.reader-eyebrow { color: var(--text-muted); font-size: .85rem; margin: 0; }
.reader-result { font-weight: 650; margin-bottom: .3rem; }
.reader-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .9rem 1.5rem; margin: 1rem 0; }
.reader-figures > div { min-width: 0; }
.reader-figures dt { color: var(--text-secondary); font-size: .9rem; }
.reader-figures dd { margin: .2rem 0; font-size: 1.05rem; }
.reader-details { margin: 1rem 0; }
.reader-details > summary, .task-breakdown > summary { cursor: pointer; font-weight: 600; padding: .45rem 0; min-height: 2rem; }
.reader-details[open] > summary { margin-bottom: .75rem; }
.reader-details .copy-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.reader-behavior { margin: 1.2rem 0; padding: .6rem 0; border-top: 1px solid var(--border); }
.reader-stop { margin: .8rem 0; }
.reader-evidence { padding-left: 1.25rem; }
.reader-evidence li { margin: .65rem 0; }
.reader-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.reader-control select { padding: .35rem; font: inherit; max-width: 100%; background: var(--surface-1); color: var(--text-primary); }
.reader-table td, .reader-table th { overflow-wrap: anywhere; }
.reader-story-link { display: inline-block; padding: .4rem 0; }
.task-story-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .8rem 0 1rem; }
.task-story-links a { padding: .4rem 0; }
.task-outcome-basis { color: var(--text-secondary); max-width: 76ch; }
.task-public-reference { display: block; }
#overview-state:empty { display: none; }
#overview-guide { margin-top: 1.5rem; }
@media (max-width: 760px) {
  .reader-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reader-conclusion { font-size: 1.1rem; }
  .reader-section { margin: 1.4rem 0; }
}

.step-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
h1.view-title {
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.2;
  margin: 0 0 10px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.task-more { font-weight: 450; color: var(--text-secondary); font-size: 0.6em; }
.lede {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: var(--prose-width);
  margin: 0 0 24px;
}
.block { margin: 36px 0 0; position: relative; }
.block:first-of-type { margin-top: 24px; }
h2.block-title, .bars-title {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 8px;
  font-weight: 650;
}
h3.bars-title, h3.sub-title { font-size: 16px; margin: 24px 0 8px; }
.bars-title:first-child { margin-top: 0; }
.bars-scale { font-weight: 450; font-size: 13px; color: var(--text-muted); }
.chart-caption {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 8px 0 12px;
  max-width: var(--prose-width);
}
.chart-empty { font-size: 14.5px; color: var(--text-secondary); padding: 8px 0; margin: 0; }
.muted { color: var(--text-secondary); }

.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 0 40px;
}
.block-grid > * { min-width: 0; }

/* Prose pages: Why Lean? and About. */
.prose p, .prose li, .prose dd { max-width: var(--prose-width); }
.prose h2.block-title { margin-top: 36px; }
.plain-list { padding-left: 22px; margin: 8px 0 16px; max-width: var(--prose-width); }
.plain-list li { margin: 0 0 8px; }
.limit-text { font-size: 16px; margin: 0 0 16px; }

.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--sw);
  vertical-align: -1px;
}
.swatch-hatch { background: repeating-linear-gradient(135deg, var(--sw) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--sw); }
.swatch-outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sw); }
.waste-list { margin: 12px 0 0; display: grid; gap: 10px; max-width: var(--prose-width); }
.waste-list > div { display: grid; grid-template-columns: minmax(10em, 13em) 1fr; gap: 2px 16px; }
.waste-list dt { font-weight: 650; }
.waste-list dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 560px) { .waste-list > div { grid-template-columns: 1fr; } }
.glossary { margin: 12px 0 0; max-width: var(--prose-width); }
.glossary dt { font-weight: 650; margin-top: 14px; }
.glossary dd { margin: 2px 0 0; color: var(--text-secondary); }

/* ---------- Bar lists: linear from zero on a stated scale ---------- */
/* The label and the value sit on one line, the track below spans the full
   width, and the fill sits inside the track, so the track's edge stays
   visible even behind a full bar. */

.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: block; font-size: 14px; border-radius: 4px; }
/* Label and value share one line in every row. The label keeps a readable width; the value takes the rest and wraps between its parts (figure, flag, "n of N"), never inside one, so no row squeezes its label and every row of a list looks alike. */
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bar-label { color: var(--text-primary); flex: 0 1 auto; min-width: min(9em, 45%); overflow-wrap: break-word; }
.bar-value { flex: 1 1 0; min-width: 5em; font-variant-numeric: tabular-nums; font-weight: 650; white-space: normal; text-align: right; }
.bar-value .num-value { white-space: nowrap; }
.bar-value .num-flag { white-space: normal; }
.bar-track {
  position: relative;
  height: 12px;
  background: var(--gridline);
  box-shadow: inset 0 0 0 1px var(--baseline);
  border-radius: 3px;
}
.bar-fill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  max-width: calc(100% - 4px);
  border-radius: 2px;
}
/* The 75th percentile is a neutral outline behind the median's fill: no hatch and no warm color, which belong to meanings of their own. */
.bar-fill.secondary {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
}
/* A figure that was not measured has no track: an italic "no data" and its reason stand in its place, so it never looks like a measured zero. */
.bar-nodata { margin: 0; font-size: 13px; color: var(--text-secondary); }
.bar-nodata .num-value { font-style: italic; }
.bar-flag { color: var(--text-muted); font-size: 12.5px; }
.bar-trust { margin: -6px 0 4px; }

/* simple SVG time-series chart */
.svg-chart { width: 100%; height: auto; overflow: visible; }
.svg-chart .axis-line { stroke: var(--baseline); stroke-width: 1; }
.svg-chart .gridline { stroke: var(--gridline); stroke-width: 1; }
.svg-chart .tick-label { fill: var(--text-muted); font-size: 10px; }
.svg-chart .mark:hover { opacity: 0.85; }
#chart-intake { max-width: 640px; }

.tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.08s ease;
  max-width: 260px;
}
.tooltip.visible { opacity: 1; }
.tooltip .tt-title { font-weight: 700; margin-bottom: 2px; }
.tooltip .tt-row { color: var(--text-secondary); }
.tooltip .tt-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}
table.data-table th, table.data-table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table td.num, table.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table thead th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--page-plane);
  position: sticky;
  top: 0;
}
table.data-table tbody tr:hover { background: var(--surface-1); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.finish-pos { font-variant-numeric: tabular-nums; }

/* ---------- Task page ---------- */

.task-walk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--text-secondary);
}
.task-walk-step:empty { display: none; }
.task-select-label { flex: 1 1 100%; order: -1; }
.fix-action.task-do { margin-top: 16px; }
.task-select {
  max-width: min(100%, 48em);
  font: inherit;
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .task-select-label { margin-left: 0; flex: 1 1 100%; }
  .task-select { width: 100%; max-width: 100%; }
}
.task-key { color: var(--text-secondary); font-size: 14px; margin: 0 0 18px; overflow-wrap: anywhere; max-width: var(--prose-width); }
.task-status { margin: 0 0 16px; }
.task-name { font-weight: 600; overflow-wrap: anywhere; }
.back-link { margin: 0 0 12px; font-size: 14px; }
.pr-list { margin: 0; padding-left: 18px; columns: 2 220px; }
.outcome { white-space: normal; }

/* A row of facts: label, figure, note. Plain text, no boxes. */
.facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 16px 24px;
  margin: 0 0 12px;
}
.fact { min-width: 0; }
.fact dt { font-size: 13.5px; color: var(--text-secondary); }
.fact dd { margin: 0; }
.fact-value { font-size: 22px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.fact-note { font-size: 13px; color: var(--text-muted); margin-top: 2px !important; }
.fact-value .num-flag { font-size: 11px; vertical-align: middle; }

.facts-list { display: grid; grid-template-columns: minmax(10em, 16em) 1fr; gap: 6px 20px; margin: 0; }
.facts-list dt { color: var(--text-secondary); }
.facts-list dd { margin: 0; }
.fact-note { color: var(--text-muted); }
@media (max-width: 560px) { .facts-list { grid-template-columns: 1fr; } .facts-list dt { margin-top: 8px; } }

/* The answer on the store page: plain figures with their notes. */
.answer-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 32px; margin: 0 0 8px; }
.answer-line { min-width: 0; }
.answer-label { margin: 0; color: var(--text-secondary); font-size: 14px; }
.big-figure { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin: 2px 0 4px; line-height: 1.2; }
.big-figure .num-flag { font-size: 11px; vertical-align: middle; }
.big-figure .num-reason { font-size: 14px; }
.big-figure .num-nofn { display: block; font-size: 12px; margin-top: 4px; }
.stat-note { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.stat-trust { margin: 6px 0 0; }
.counts-line { margin: 8px 0 0; font-size: 15px; }
.counts-label { color: var(--text-secondary); }

/* ---------- Lists that replaced the cards ---------- */

.featured-list li { margin-bottom: 14px; }
.featured-list p { margin: 0; }
.featured-head strong { font-size: 17px; }
.featured-stats, .featured-merge { font-size: 14px; color: var(--text-secondary); }
.takeaway-trust { display: block; margin-top: 2px; }

.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li {
  display: flex;
  justify-content: space-between;
  gap: 4px 16px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.issue-list a { font-weight: 550; }
.issue-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.issue-num { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.issue-resolution { color: var(--text-secondary); font-size: 13.5px; }
@media (max-width: 560px) { .issue-list li { flex-direction: column; align-items: flex-start; } .issue-right { align-items: flex-start; text-align: left; } }

.fix-list { list-style: none; margin: 0; padding: 0; }
.fix-item { padding: 12px 0 12px 14px; border-left: 3px solid var(--baseline); margin: 0 0 10px; }
.fix-alarm { border-left-color: var(--c-alarm); }
.fix-act { border-left-color: var(--c-waste-waiting); }
.fix-improve { border-left-color: var(--c-necessary); }
.fix-signal { border-left-style: dashed; }
.fix-head { margin: 0 0 4px; }
.fix-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
  color: var(--text-secondary);
}
.fix-tag-alarm { color: var(--c-alarm); }
.fix-count { color: var(--text-secondary); }
.fix-action { margin: 0 0 4px; max-width: var(--prose-width); }
.fix-do { font-weight: 700; }
.fix-examples { display: flex; flex-wrap: wrap; gap: 2px 18px; list-style: none; padding-left: 0; margin: 4px 0 0; font-size: 14px; }

.harness + .harness { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.harness-name { margin: 0 0 8px; font-size: 1rem; }
.harness-unproven { font-weight: 400; color: var(--text-secondary); }
.harness-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.harness-facts dt { color: var(--text-secondary); }
.harness-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .harness-facts { grid-template-columns: 1fr; gap: 0; }
  .harness-facts dd { margin-bottom: 8px; }
}

/* ---------- Footer ---------- */

footer { padding: 28px 0 56px; color: var(--text-muted); font-size: 13.5px; border-top: 1px solid var(--border); }
footer a, footer a:visited { color: var(--text-secondary); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--link); color: #fff !important; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---- Number states: a measured figure, a partial one, and no data. None
   relies on color alone: the partial figure carries the word "partial", the
   no-data figure says "no data" with its reason, and the verdict has a shape
   and a word. ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.num { white-space: normal; }
.num-flag {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 4px;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  vertical-align: middle;
}
.num-unavailable .num-value { font-style: italic; font-weight: 500; color: var(--text-secondary); }
.num-reason { margin-left: 0.4em; font-size: 0.75em; font-weight: 400; color: var(--text-secondary); }
.num-nofn { display: inline-block; margin-left: 0.5em; font-size: 0.75em; font-weight: 400; color: var(--text-secondary); }
.num-nofn::before { content: "("; }
.num-nofn::after { content: ")"; }
.num-basis { display: inline-block; margin-left: 0.4em; font-size: 0.75em; font-style: italic; color: var(--text-secondary); }

.trust { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.trust-ok { color: var(--text-secondary); }
.trust-partial { font-style: italic; }
.trust-thin_sample, .trust-low_coverage, .trust-coverage_unknown { text-decoration: underline dotted; text-underline-offset: 3px; }

.health-panel { margin-top: 8px; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.verdict-mark, .verdict-word { font-size: 17px; }
.verdict-alive .verdict-word { color: var(--c-value); }
.verdict-stale .verdict-word, .verdict-broken .verdict-word { color: var(--c-alarm); }
.verdict-unknown .verdict-word { color: var(--text-primary); }
.health-facts { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.health-facts dt { color: var(--text-secondary); }
.health-facts dt, .health-facts dd { min-width: 0; overflow-wrap: break-word; }
.health-facts dd { margin: 0; }
@media (max-width: 640px) {
  /* One column on a phone: each label on its own line, its value below it. */
  .health-facts { grid-template-columns: 1fr; }
  .health-facts dt { margin-top: 6px; }
}

/* ---- Job page: the state in words, beside every figure. Not color alone:
   a word, a border style and the reason in text. ---- */
.job-detail-table td.state-why { color: var(--text-secondary); font-size: 13px; white-space: normal; }
.state-word { display: inline-block; padding: 0 0.45em; border-radius: 4px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.state-measured { border-style: solid; }
.state-partial { border-style: dashed; }
.state-unavailable { border-style: dotted; font-style: italic; }
.job-detail-table td.num-unavailable .num-value { font-style: italic; color: var(--text-secondary); }

/* Sign-off and rework */
.outcome-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px 32px; margin-bottom: 12px; }
.outcome-block { margin-bottom: 20px; min-width: 0; }
.outcome-block h4 { margin: 0 0 8px; font-size: 1em; }
/* The label column never shrinks below a readable width; a long value wraps instead. */
.outcome-block .health-facts { grid-template-columns: minmax(min(12em, 100%), 1fr) minmax(0, max-content); margin-top: 10px; }
/* This rule is more specific than the phone rule for .health-facts, so it needs its own phone rule. */
@media (max-width: 640px) { .outcome-block .health-facts { grid-template-columns: 1fr; } }

/* Capture coverage */
.capture-total { margin: 4px 0 12px; }
.capture-notes { margin: 12px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 0.9em; max-width: var(--prose-width); }
.capture-alarms { margin: 10px 0 0; color: var(--text-secondary); }
.capture-alarms-on { color: var(--c-alarm); font-weight: 600; }
.slot-detail { color: var(--text-secondary); }
.capture-unverified { font-weight: 600; }
.scroll-cue { margin: 0 0 6px; color: var(--text-secondary); font-size: 0.9em; }
.scroll-cue[hidden] { display: none; }
.capture-table td, .capture-table th { padding-left: 8px; padding-right: 8px; }
table.capture-table th { white-space: normal; vertical-align: bottom; }
table.capture-table td.capture-records { white-space: normal; min-width: 7em; }
table.capture-table td .num-reason { display: block; white-space: normal; max-width: 9em; margin-left: auto; }

.more-details { margin: 16px 0 0; }
.more-details > summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 6px 0; }

.table-notes { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.table-notes ul { list-style: none; margin: 6px 0 0; padding: 0; }
.table-notes li { margin: 2px 0; }
.table-notes-head { font-weight: 600; cursor: pointer; }
.task-table { width: 100%; min-width: 0 !important; }
.task-table td { vertical-align: top; }

/* When its holder is narrow for its text (a phone, or larger text) a table
   row becomes a stacked list item: each cell says what it is. The row holds
   a link, so it keeps a hairline divider. The switch point is in em, so it
   moves with the reader's text size: 42.5em is a 720px window at 16px. */
#jobs-table, #trend, .block:has(> table.task-table) { container-type: inline-size; }
@container (width <= 42.5em) {
  .task-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .task-table, .task-table tbody, .task-table tr, .task-table td { display: block; width: 100%; }
  .task-table tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
  .task-table td { border: 0; padding: 2px 0; text-align: right; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .task-table td.num { text-align: right; }
  .task-table td::before { content: attr(data-label); color: var(--text-secondary); font-size: 13px; text-align: left; flex: none; }
  /* A card's value wraps inside the card instead of pushing the page sideways. */
  table.data-table.task-table td { white-space: normal; }
  .task-table td > * { min-width: 0; overflow-wrap: anywhere; }
  .task-table td.task-cell { display: block; text-align: left; font-size: 16px; padding-bottom: 4px; }
  .task-table td.task-cell::before { content: none; }
}
@container (width > 42.5em) {
  /* A figure stays on one line; its "partial" flag may drop below it, so the number columns do not crowd out the task name. */
  .task-table .outcome, .task-table .top-waste { white-space: nowrap; }
  table.data-table.task-table td.num { white-space: normal; }
  .task-table td.num .num-value, .task-table td.num .num-flag { white-space: nowrap; }
  table.data-table.task-table th, table.data-table.task-table td { padding-left: 6px; padding-right: 6px; }
  table.data-table.task-table th { white-space: normal; }
  .task-table .num-flag { margin-left: 0.25em; }
}

/* No view scrolls the page sideways: a wide table scrolls inside its own box,
   and that box is the positioning context for the screen-reader text in its
   cells, which would otherwise widen the page. Between phone and full width,
   the task table's text cells wrap. */
#jobs-table, .block:has(> table.data-table) { overflow-x: auto; }
#jobs-table, .block, .table-wrap { position: relative; }
@container (width > 42.5em) {
  table.data-table.task-table td:not(.num) { white-space: normal; }
  /* A task name (or anonymous key) wraps between words only, in a column wide enough to read. */
  table.data-table.task-table td.task-cell { min-width: 18ch; max-width: 30ch; }
  table.data-table.task-table td.task-cell a { overflow-wrap: normal; word-break: normal; }
}

/* ================= Step 1: follow a task =================
   The lede's numbers are buttons that light up their part of the map. The
   map is drawn as Lean draws a value stream map: process boxes (clickable,
   so boxed), inventory triangles between them, data boxes beneath, and the
   timeline ladder at the bottom with the summary at the right. Boxes appear
   only around things that open the evidence. */

.task-lede { font-size: 17px; line-height: 1.7; margin-bottom: 8px; }
.task-lede dfn { font-style: italic; color: var(--text-primary); }
.lede-missing { font-style: italic; }
/* A lede number is a control: a tinted chip with a solid underline. */
.lede-num {
  font: inherit;
  color: var(--text-primary);
  font-weight: 650;
  background: color-mix(in srgb, var(--focus) 9%, transparent);
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--focus) 55%, transparent);
  border-radius: 3px 3px 0 0;
  padding: 0 3px;
  cursor: pointer;
  line-height: inherit;
}
.lede-num:hover { background: color-mix(in srgb, var(--focus) 16%, transparent); border-bottom-color: var(--focus); }
.lede-num[aria-pressed="true"] { background: color-mix(in srgb, var(--focus) 16%, transparent); border-bottom: 2px solid var(--focus); }

/* The task picker: a compact list, the latest to finish first. */
.picker { margin: 0 0 22px; font-size: 14px; }
.picker-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 6px; }
/* The search box starts at 8em and grows; with larger text it moves under
   its label rather than past the window's edge. */
.picker-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--text-secondary); flex: 1 1 260px; min-width: 0; }
.picker-search {
  font: inherit;
  flex: 1 1 auto;
  min-width: 0;
  width: 8em;
  max-width: 22em;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
}
.picker-count { margin: 0; color: var(--text-muted); font-size: 13px; }
.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 10.5rem;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.picker-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 14px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--gridline);
  text-decoration: none;
  color: var(--text-primary);
}
.picker-row:hover { background: var(--surface-1); }
.picker-row[aria-current="page"] { background: var(--surface-1); box-shadow: inset 3px 0 0 var(--focus); font-weight: 600; }
.picker-name { flex: 1 1 18em; min-width: 0; overflow-wrap: anywhere; }
.picker-key { color: var(--text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.picker-group { padding: 10px 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.picker-meta { display: flex; flex-wrap: wrap; gap: 0 12px; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 400; }
/* No text cell narrower than 60px, even at 320px. */
.picker-meta > span { min-width: 60px; }
/* A badge is a note on the row, not a control of its own: plain text. */
.picker-badge { font-size: 12px; color: var(--text-muted); font-style: italic; }
.picker-badge::before { content: "· "; font-style: normal; }

/* Read the numbers; choose a separate, named action to inspect evidence. */
.task-conclusion { font-size: 1.1rem; line-height: 1.6; font-weight: 600; max-width: 65ch; }
.task-caveat { color: var(--text-secondary); max-width: 65ch; margin: -.3rem 0 .8rem; }
.clock-relation { max-width: 70ch; color: var(--text-secondary); margin: .6rem 0 0; }
.comparison-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; padding: 1rem 0; }
.comparison-control { display: flex; flex-direction: column; gap: .4rem; min-width: 0; font-size: .9rem; }
.comparison-control select, .comparison-control input { box-sizing: border-box; width: 100%; min-width: 0; font: inherit; padding: .5rem; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; }
.comparison-actions, .comparison-scope { grid-column: 1 / -1; }
.comparison-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.comparison-actions button, .findings-clear { font: inherit; padding: .5rem; cursor: pointer; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border); }
.comparison-scope, .comparison-question, .comparison-conclusion, .findings-conclusion { max-width: 70ch; line-height: 1.6; overflow-wrap: anywhere; }
.comparison-conclusion, .findings-conclusion { font-weight: 600; }
.category-muted { opacity: .22; }
.comparison-taxonomy, .comparison-history, .improvement-prompt { margin: 1rem 0; }
.compact-legend { max-width: 70ch; color: var(--text-secondary); line-height: 1.6; }
.triage-coverage { max-width: 70ch; min-width: 0; margin: 1rem 0; }
.triage-coverage p { overflow-wrap: anywhere; }
.improvement-facts { margin: 0.5rem 0; }
.improvement-row { padding: 1rem 0; border-bottom: 1px solid var(--border); min-width: 0; max-width: 70ch; }
.improvement-row p, .improvement-row pre, .finding-prompt .prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.finding-improvements { display: inline-block; margin: .75rem 0; }
.task-summary { margin: 1.25rem 0; }
.journey-overview { margin: 1rem 0 2rem; }
.journey-total { font-weight: 600; }
.journey-scale { display: flex; height: 1.5rem; width: 100%; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.journey-scale > span { display: block; flex-shrink: 0; }
.journey-period { background: var(--series-1); }
.journey-pause { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--text-secondary) 4px 5px); opacity: .45; }
.journey-totals { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1rem 0; }
.journey-totals > div { min-width: 0; }
.journey-totals dt { color: var(--text-secondary); font-size: .875rem; }
.journey-totals dd { margin: .2rem 0 0; font-weight: 600; }
.journey-periods { padding-left: 1.5rem; }
.journey-periods > li { padding: .5rem 0; }
.journey-evidence { text-align: left; padding: .5rem .75rem; white-space: normal; }
.journey-periods p { margin: .4rem 0; overflow-wrap: anywhere; }
.journey-status { font-weight: 600; }
.journey-limits { max-width: 75ch; }
.is-followed-task td:first-child { border-left: 3px solid var(--link); font-weight: 600; }
.task-summary-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.task-summary-figures > div { padding: .9rem; border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.task-summary-figures dt { color: var(--text-secondary); margin-bottom: .4rem; }
.task-summary-figures dd { margin: 0 0 .75rem; overflow-wrap: anywhere; font-weight: 600; }
.journey-show, .journey-clear { font: inherit; font-size: .85rem; padding: .5rem .7rem; white-space: normal; text-align: left; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.journey-show[aria-pressed="true"] { outline: 2px solid var(--focus); }
.task-definitions, .task-reading-details, .drawer-technical, .drawer-evidence { margin: 1rem 0; }
.task-reading-details .task-lede { max-width: 70ch; margin-top: 1rem; }
.prompt-payload { margin-top: .75rem; }
.prompt-payload .prompt-text { overflow-wrap: anywhere; }
/* The in-task picker has real headings, and mobile cells carry those labels. */
.picker-list { max-height: 22rem; }
table.data-table.picker-table { min-width: 0; width: 100%; table-layout: fixed; }
table.data-table.picker-table th, table.data-table.picker-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; padding: .8rem; }
.picker-table th:first-child, .picker-table td:first-child { width: 32%; }
.picker-table .picker-row { display: table-row; }
.picker-table .picker-row:has([aria-current="page"]) { background: var(--surface-1); }
.picker-table .picker-name { display: block; line-height: 1.6; }
.picker-table .picker-badge::before { content: ""; }
.picker-table .picker-group { text-align: left; }
@media (max-width: 639px) {
  .picker-table, .picker-table tbody, .picker-table tr, .picker-table td { display: block; width: 100% !important; }
  .picker-table .picker-row { display: block; padding: .8rem; }
  .picker-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .picker-table td { padding: .3rem 0; }
  .picker-table td::before { content: attr(data-label) ": "; display: block; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
  .picker-table .picker-group { display: block; width: 100% !important; }
}

/* ---------- The value stream map ---------- */
.vsm { margin: 18px 0 10px; }
.vsm-wide {
  display: grid;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}
.vsm button { font: inherit; color: inherit; cursor: pointer; }
.vsm-info { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 0 6px 8px; min-height: 26px; justify-content: flex-end; }
.vsm-status { font-size: 12px; color: var(--text-secondary); border-left: 2px solid var(--baseline); padding-left: 6px; line-height: 1.3; }
.vsm-customer {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.vsm-customer-name { font-weight: 650; color: var(--text-primary); font-size: 14px; }
.vsm-customer-outcome { color: var(--text-primary); }

.vsm-box {
  margin: 0 6px;
  padding: 10px 10px 9px;
  border: 1.5px solid var(--text-secondary);
  border-radius: 4px;
  background: var(--surface-2);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 74px;
  position: relative;
}
.vsm-box:hover { border-color: var(--text-primary); }
.vsm-box-title { font-weight: 650; font-size: 14px; line-height: 1.3; }
.vsm-box-work { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vsm-rework { display: flex; gap: 4px; align-items: flex-start; font-size: 12px; line-height: 1.3; color: var(--c-waste-defects); margin-top: 3px; }
.vsm-rework-icon { flex: none; stroke: var(--c-waste-defects); margin-top: 1px; }

.vsm-wait {
  margin: 0 2px;
  padding: 4px 2px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
}
.vsm-wait:hover { border-color: var(--border); }
.vsm-tri path { fill: color-mix(in srgb, var(--c-waste-waiting) 18%, transparent); stroke: var(--c-waste-waiting); }
.vsm-tri-i { fill: var(--c-waste-waiting); font-size: 13px; font-weight: 700; font-family: system-ui, sans-serif; }
.vsm-wait-dur { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vsm-wait-what { font-size: 12px; line-height: 1.3; color: var(--text-secondary); overflow-wrap: anywhere; }
.vsm-wait.is-longest .vsm-wait-dur::after { content: " \2190 longest"; font-weight: 500; font-size: 11px; color: var(--text-muted); }

.vsm-data { min-width: 0; margin: 6px 6px 0; padding: 6px 2px 4px; border-top: 1px solid var(--gridline); font-size: 12px; }
.vsm-data-list { margin: 0; display: grid; gap: 1px; }
/* A value never wraps inside a narrow cell: when label and value do not fit
   on one line, the value takes its own line, right-aligned. */
.vsm-data-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 6px; line-height: 1.35; }
.vsm-data-list dt { color: var(--text-muted); flex: 0 1 auto; }
.vsm-data-list dd { margin: 0 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vsm-data-toggle { display: none; }

/* The ladder: low is working, high is waiting. Each step is a button. */
.vsm-lad { display: flex; align-items: stretch; height: 46px; margin-top: 14px; }
/* The ladder's clock marks: a strip above each item's ladder (beside it on a
   phone), with each mark at its time inside the item. */
.vsm-ladcol { display: flex; flex-direction: column; min-width: 0; }
.vsm-ladcol .vsm-lad { margin-top: 0; }
/* Two thin lanes: prompt ticks (the first), pull request glyphs (the second). */
.vsm-marks { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.mark-lane { position: relative; height: 14px; }
.mark-lane-pr { height: 16px; }
.lad-mark { position: absolute; top: 0; height: 100%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 8px; padding: 0; background: none; border: 0; border-radius: 3px; color: var(--text-secondary); z-index: 1; }
.lad-mark-multi { z-index: 2; }
.lad-mark:hover, .lad-mark:focus-visible { background: color-mix(in srgb, var(--focus) 14%, transparent); }
.lad-tick { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--c-op); flex: none; }
.lad-tick.why-stopped_short { background: var(--c-why-stopped_short); }
.lad-tick.why-question { background: var(--c-why-question); }
.lad-tick.why-error_limit { background: var(--c-why-error_limit); }
.lad-tick.why-interrupted { background: var(--c-why-interrupted); }
.lad-tick.why-decision { background: var(--c-why-gate); }
.lad-tick.why-approval { background: var(--c-why-gate); }
.lad-tick.why-acceptance { background: var(--c-why-gate); }
.lad-span { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--text-secondary) 45%, transparent); border-radius: 1px; }
.lad-mark-count { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 650; line-height: 1; padding: 1px 4px 1px 3px; border-radius: 7px; border: 1.25px solid var(--c-op); color: var(--text-primary); background: var(--page-plane); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lad-mark-count.count-pr { border-color: var(--c-pr); }
.lad-mark-count .count-tick { display: inline-block; width: 2px; height: 9px; border-radius: 1px; background: var(--c-op); }
.lad-mark-count .clock-glyph { width: 9px; height: 9px; }
.lad-mark-multi.is-partial .lad-mark-count { border-style: dashed; }
/* The margins for marks outside the lead window. */
.vsm-margin { align-self: start; margin: 8px 6px 0; padding: 6px 8px; border: 1.25px dashed var(--baseline); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.vsm-margin-title { font-weight: 650; color: var(--text-primary); }
.vsm-margin-marks { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lad-mark-inline { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px 2px; border-radius: 3px; font-size: 12px; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.lad-mark-inline:hover, .lad-mark-inline:focus-visible { background: color-mix(in srgb, var(--focus) 14%, transparent); }
.pr-line { font-size: 13px; line-height: 1.6; margin: 4px 0 0; }
.clock-glyph { flex: none; display: block; overflow: visible; }
.clock-glyph.glyph-prompt { fill: var(--c-op); }
.clock-glyph.glyph-prompt.why-stopped_short { fill: var(--c-why-stopped_short); }
.clock-glyph.glyph-prompt.why-question { fill: var(--c-why-question); }
.clock-glyph.glyph-prompt.why-error_limit { fill: var(--c-why-error_limit); }
.clock-glyph.glyph-prompt.why-interrupted { fill: var(--c-why-interrupted); }
.clock-glyph.glyph-prompt.why-decision { fill: var(--c-why-gate); }
.clock-glyph.glyph-prompt.why-approval { fill: var(--c-why-gate); }
.clock-glyph.glyph-prompt.why-acceptance { fill: var(--c-why-gate); }
.clock-glyph.glyph-opened, .clock-glyph.glyph-merged, .clock-glyph.glyph-pr { fill: var(--c-pr); }
.clock-glyph.glyph-multi { fill: var(--c-op); }
.clock-glyph.is-partial path, .clock-glyph.is-partial circle, .clock-glyph.is-partial rect { fill: var(--page-plane); stroke: var(--c-pr); stroke-width: 1.4; stroke-dasharray: 2 1.2; }
.vsm-op { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; background: none; border: 0; padding: 2px 4px 2px 0; font-size: 12px; color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 2px; line-height: 1.3; }
.vsm-op-text { min-width: 0; overflow-wrap: anywhere; }
.vsm-key-glyph, .lane-key-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.lane-key-glyph { width: 14px; }
.clock-section { margin-top: 14px; }
table.data-table.handoffs-table td, table.data-table.pr-clock-table td { white-space: normal; }
table.data-table.handoffs-table td:first-child, table.data-table.pr-clock-table td:first-child { white-space: nowrap; }
table.data-table.handoffs-table th { white-space: normal; vertical-align: bottom; }
/* On a narrow screen each row stacks into labeled lines, so the table never
   scrolls sideways. */
@media (max-width: 720px) {
  .handoffs-table thead, .pr-clock-table thead { display: none; }
  table.handoffs-table, table.pr-clock-table { min-width: 0; }
  .handoffs-table, .handoffs-table tbody, .handoffs-table tr, .pr-clock-table, .pr-clock-table tbody, .pr-clock-table tr { display: block; width: 100%; }
  .handoffs-table tr, .pr-clock-table tr { padding: 6px 0; border-bottom: 1px solid var(--gridline); }
  table.data-table.handoffs-table td, table.data-table.pr-clock-table td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 8px; padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  table.data-table.handoffs-table td:first-child, table.data-table.pr-clock-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
  .handoffs-table td::before, .pr-clock-table td::before { content: attr(data-label); color: var(--text-secondary); font-size: 12px; }
}
.lad {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  height: 46px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 4px;
}
/* Each step is a control: its label is underlined, and it tints on hover. */
.lad:hover, .lad:focus-visible { background: color-mix(in srgb, var(--focus) 9%, transparent); }
.lad::before { content: ""; position: absolute; left: 0; right: 0; border-top: 2.5px solid var(--text-secondary); }
.lad-high::before { top: 6px; border-color: var(--c-waste-waiting); }
.lad-low::before { bottom: 6px; }
.lad-turn::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; border-left: 1.5px solid var(--baseline); }
.lad-folded { flex: 0 0 auto; width: 34%; max-width: 46px; }
.lad-label { position: absolute; left: 0; right: 0; font-size: 12px; text-align: center; color: var(--link); white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 2px; }
.lad-high .lad-label { top: 12px; }
.lad-low .lad-label { top: 8px; }
.lad-folded .lad-label { color: var(--text-muted); font-size: 11px; }
.lad:hover::before { border-top-width: 4px; }

.vsm-summary {
  margin: 0 0 0 14px;
  padding: 2px 0 0 12px;
  border-left: 2px solid var(--baseline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  align-self: end;
}
.vsm-sum-cell { position: relative; min-width: 0; }
.vsm-sum-cell > .vsm-summary { position: absolute; top: 0; left: 0; right: 0; }
.sum-line { display: flex; flex-direction: column; line-height: 1.3; padding: 1px 4px; }
.sum-label { color: var(--text-secondary); }
.sum-value-text { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }
.sum-note { color: var(--text-muted); font-size: 12px; }
.sum-value { padding-left: 14px; }
.sum-reason { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }

/* Highlighting from the lede: the chosen parts stay, the rest steps back. */
.vsm[data-hl]:not([data-hl=""]) .vsm-box,
.vsm[data-hl]:not([data-hl=""]) .vsm-wait,
.vsm[data-hl]:not([data-hl=""]) .lad,
.vsm[data-hl]:not([data-hl=""]) .sum-line { opacity: 0.32; transition: opacity 0.15s; }
.vsm .is-hl { opacity: 1 !important; }
.vsm .vsm-box.is-hl, .vsm .vsm-wait.is-hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.vsm .sum-line.is-hl { background: color-mix(in srgb, var(--focus) 12%, transparent); }

.vsm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 4px 24px; margin: 14px 0 4px; font-size: 13px; color: var(--text-secondary); }
.vsm-legend-item { margin: 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.vsm-key { flex: none; width: 18px; height: 14px; margin-top: 2px; }
.key-box { border: 1.5px solid var(--text-secondary); border-radius: 2px; }
.key-tri { background: var(--c-waste-waiting); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.key-ladder { border-top: 2.5px solid var(--c-waste-waiting); border-bottom: 2.5px solid var(--text-secondary); border-left: 1.5px solid var(--baseline); }
.key-rework { border: 1.8px solid var(--c-waste-defects); border-bottom-color: transparent; border-radius: 9px 9px 0 0; }
.vsm-table td { white-space: normal; }

/* The map on a phone: it runs down the page. The ladder is a strip on the
   left (a line on the left is working, on the right waiting); data boxes
   show two rows and open on tap. */
.vsm-phone { display: flex; flex-direction: column; }
.vsm-phone .vsm-customer { padding: 0 0 10px; border-bottom: 1px solid var(--gridline); margin-bottom: 4px; }
.vsm-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 8px; }
.vsm-phone .vsm-margin-row { display: block; }
.vsm-phone .vsm-margin { margin: 6px 0; }
.vsm-phone .vsm-ladcol { flex-direction: row; }
.vsm-phone .vsm-marks { order: 2; flex-direction: row; gap: 2px; width: 46px; margin: 0; flex: none; }
.vsm-phone .mark-lane { height: auto; width: 22px; }
.vsm-phone .mark-lane-pr { width: 22px; }
/* On a phone a merged mark stacks its glyph over its count, to fit its lane. */
.vsm-phone .lad-mark-count { flex-direction: column; gap: 1px; padding: 2px 1px; border-radius: 6px; min-width: 18px; }
.vsm-phone .lad-mark-count .count-tick { width: 9px; height: 2px; }
.vsm-phone .lad-mark { top: auto; left: 0; width: 100%; height: auto; min-height: 8px; transform: translateY(-50%); }
.vsm-phone .lad-tick { width: 12px; height: 2px; }
.vsm-phone .lad-span { top: auto; left: 50%; width: 2px; height: auto; margin: 0 0 0 -1px; }
.vsm-row-body { padding: 6px 0; min-width: 0; }
.vsm-phone .vsm-info { padding: 0 0 4px; min-height: 0; }
.vsm-phone .vsm-box { margin: 0; width: 100%; }
.vsm-phone .vsm-wait { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; margin: 0; width: 100%; padding: 2px 4px; }
.vsm-phone .vsm-wait .vsm-tri { width: 30px; height: 26px; flex: none; }
.vsm-phone .vsm-wait-what { font-size: 13px; }
.vsm-phone .vsm-data { margin: 4px 0 0; }
.vsm-phone .vsm-data-more { display: none !important; }
.vsm-phone .vsm-data.is-open .vsm-data-more { display: flex !important; }
.vsm-phone .vsm-data-toggle { display: inline-block; margin-top: 4px; background: none; border: 0; padding: 2px 0; color: var(--link); text-decoration: underline; font-size: 13px; }
.vsm-phone .vsm-lad { flex-direction: column; height: auto; margin: 0; }
.vsm-phone .lad { height: auto; flex: 1 1 auto; min-height: 30px; width: 64px; max-width: none; }
.vsm-phone .lad::before { left: auto; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2.5px solid var(--text-secondary); }
.vsm-phone .lad-low::before { left: 6px; }
.vsm-phone .lad-high::before { left: 54px; border-color: var(--c-waste-waiting); }
.vsm-phone .lad-turn::after { left: 6px; right: 8px; top: 0; bottom: auto; border-left: 0; border-top: 1.5px solid var(--baseline); width: 50px; }
.vsm-phone .lad-folded { min-height: 18px; width: 64px; }
.vsm-phone .lad-label { top: 50%; transform: translateY(-50%); text-align: left; }
.vsm-phone .lad-low .lad-label { left: 12px; top: 50%; }
.vsm-phone .lad-high .lad-label { left: 0; right: 14px; text-align: right; top: 50%; }
.vsm-phone .vsm-summary { margin: 14px 0 0; align-self: stretch; }

/* ---------- Where this task's time went ---------- */
.tw-title { margin-bottom: 6px; }
.tw-bar { display: flex; width: 100%; height: 26px; background: var(--surface-1); border-left: 1.5px solid var(--text-secondary); }
.tw-group { display: flex; height: 100%; min-width: 0; }
.tw-unsplit { background: repeating-linear-gradient(135deg, var(--gridline) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1.5px var(--baseline); }
.tw-group + .tw-group { border-left: 2px solid var(--text-primary); }
.tw-seg { height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; font: inherit; display: block; }
.tw-seg:hover { filter: brightness(0.92); }
.tw-seg:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; position: relative; z-index: 1; }
.tw-seg[aria-pressed="true"] { outline: 3px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }
.tw-seg + .tw-seg { border-left: 1px solid var(--page-plane); }
.tw-group-head { margin: 14px 0 0; font-size: 14px; color: var(--text-secondary); }
.tw-group-head strong { color: var(--text-primary); }
.tw-group-head + .tw-legend { margin-top: 4px; }
/* Waiting causes: the warm family, each its own token. */
.wait-next_prompt { --sw: var(--c-wait-next_prompt); background: var(--sw); }
.wait-api_retry { --sw: var(--c-wait-api_retry); background: var(--sw); }
.wait-tool_failure { --sw: var(--c-wait-tool_failure); background: var(--sw); }
.wait-long_tool_call { --sw: var(--c-wait-long_tool_call); background: var(--sw); }
.wait-queue_before_start { --sw: var(--c-wait-queue_before_start); background: var(--sw); }
.wait-no_session { --sw: var(--c-wait-no_session); background: var(--sw); }
.wait-other_task { --sw: var(--c-wait-other_task); background: var(--sw); }
.wait-unknown { --sw: var(--c-wait-unknown); background: repeating-linear-gradient(135deg, var(--sw) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--sw); }
.tw-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 4px 24px; font-size: 14px; }
.tw-legend li { display: flex; align-items: baseline; gap: 8px; }
/* The task bar's legend rows are buttons that light the map. Every row
   has one shape at every width: the swatch, then the name, then the figure
   under the name; a waiting cause's "Rank this cause" link has its own
   column, so nothing in one row can run into the next. */
.tw-legend-buttons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.tw-legend-buttons li { display: flex; flex-wrap: wrap; align-items: start; gap: 0 12px; }
.tw-legend-buttons li > .tw-row { flex: 1 1 10em; }
/* With larger text the link moves under the row rather than off screen. */
.tw-legend-buttons li > .tw-cause-link { flex: 0 1 auto; min-width: 0; }
.tw-row { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 8px; font: inherit; color: inherit; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; margin-left: -6px; cursor: pointer; }
.tw-row > .swatch { align-self: start; margin-top: 0.3em; }
.tw-row > .tw-ms { grid-column: 2; white-space: normal; }
.tw-row:hover { background: var(--surface-1); border-color: var(--border); }
.tw-row[aria-pressed="true"] { background: color-mix(in srgb, var(--focus) 12%, transparent); border-color: var(--focus); }
.tw-cause-link { font-size: 13px; padding-top: 4px; }
.tw-name { min-width: 0; }
.tw-ms { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cause-list { margin: 6px 0 4px; padding-left: 22px; }
.cause-list li { margin: 4px 0; }
.cause-list li .swatch { margin-right: 6px; }
.cause-ms { margin-left: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- The evidence drawer ---------- */
.drawer {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: min(86vh, 900px);
  margin: auto 12px auto auto;
  background: var(--surface-2);
  color: var(--text-primary);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.drawer::backdrop { background: rgba(10, 10, 10, 0.35); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px 8px; border-bottom: 1px solid var(--gridline); position: sticky; top: 0; background: var(--surface-2); }
.drawer-title { margin: 0; font-size: 18px; }
.drawer-close { font: inherit; font-size: 14px; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; color: var(--text-primary); cursor: pointer; }
#drawer-body { padding: 12px 18px 18px; }
.drawer-what { margin: 0 0 10px; font-size: 15px; }
.drawer-task { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); }
.picker-sort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.picker-finish { white-space: nowrap; }
.drawer-what .swatch { margin-right: 8px; }
.drawer-facts { margin: 0 0 10px; display: grid; gap: 4px; font-size: 14px; }
.drawer-facts > div { display: grid; grid-template-columns: minmax(8em, 34%) minmax(0, 1fr); gap: 10px; }
.drawer-facts dt { color: var(--text-secondary); }
.drawer-facts dd { margin: 0; }
.drawer-sub { font-size: 15px; margin: 14px 0 6px; }
.drawer-table td { white-space: normal; }
table.data-table.drawer-table th, table.data-table.drawer-table td { padding: 4px 6px; font-size: 13px; }
.nowrap { white-space: nowrap; }
.drawer-failed { color: var(--c-alarm); font-weight: 600; }
.drawer-links { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }
.drawer-load, .copy-prompt, .lane-btn, .link-button {
  font: inherit;
  font-size: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text-primary);
  cursor: pointer;
}
.drawer-load { margin-top: 6px; }
.drawer-prompt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gridline); }
.copy-status { margin-left: 10px; font-size: 13px; color: var(--text-secondary); }
.prompt-text { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.stretch-list { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.stretch-row { min-height: 24px; font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 1px solid var(--gridline); width: 100%; text-align: left; padding: 5px 2px; cursor: pointer; color: var(--text-primary); display: flex; gap: 8px; align-items: baseline; }
.stretch-row:hover { background: var(--surface-1); }
.link-button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-align: left; min-height: 24px; }
@media (max-width: 640px) {
  .drawer { margin: auto; width: calc(100vw - 16px); max-height: 90vh; }
  .drawer-facts > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- The session swimlane ---------- */
.lane-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.lane-btn:disabled { opacity: 0.45; cursor: default; }
.lane-frame { overflow: auto; max-height: 70vh; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; position: relative; }
.lane-inner { display: flex; width: max-content; min-width: 100%; }
.lane-labels { position: sticky; left: 0; z-index: 2; width: 112px; flex: none; background: var(--page-plane); border-right: 1px solid var(--border); }
/* Two full-size label lines fit the renderer's 26px row per 12px of text. */
.lane-label { position: absolute; left: 0; right: 0; font-size: 12px; line-height: 1; color: var(--text-secondary); display: flex; align-items: center; padding-right: 6px; overflow: hidden; }
.lane-label-labels { font-weight: 650; color: var(--text-primary); }
.lane-plot { flex: none; }
.lane-svg { display: block; }
.lane-grid { stroke: var(--gridline); stroke-width: 1; }
.lane-rule { stroke: var(--gridline); stroke-width: 1; }
.lane-tick { fill: var(--text-muted); font-size: 11px; font-family: system-ui, sans-serif; }
.lane-band { opacity: 0.3; }
.lane-outside { fill: var(--text-muted); opacity: 0.12; }
.lane-outside-label { fill: var(--text-muted); font-size: 11px; font-family: system-ui, sans-serif; }
.lane-act { fill: var(--text-secondary); }
.lane-fail { fill: var(--c-alarm); }
.lane-op { cursor: pointer; outline: none; fill: var(--c-op); }
.lane-op.why-stopped_short { fill: var(--c-why-stopped_short); }
.lane-op.why-question { fill: var(--c-why-question); }
.lane-op.why-error_limit { fill: var(--c-why-error_limit); }
.lane-op.why-interrupted { fill: var(--c-why-interrupted); }
.lane-op.why-decision { fill: var(--c-why-gate); }
.lane-op.why-approval { fill: var(--c-why-gate); }
.lane-op.why-acceptance { fill: var(--c-why-gate); }
.lane-op-band { fill: var(--c-wait-next_prompt); opacity: 0.16; }
.lane-hit { fill: transparent; }
.lane-pr { cursor: pointer; outline: none; }
.lane-pr path { fill: var(--c-pr); }
.lane-pr.is-partial path { fill: var(--page-plane); stroke: var(--c-pr); stroke-width: 1.4; stroke-dasharray: 2 1.2; }
.lane-pr-label { fill: var(--text-secondary); font-size: 11px; font-family: system-ui, sans-serif; }
.lane-key-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 14px; border: 1.25px solid var(--c-pr); border-radius: 7px; font-size: 10.5px; font-weight: 650; color: var(--text-primary); }
.lane-op-badge { fill: var(--page-plane); stroke: var(--c-op); stroke-width: 1.25; }
.lane-op-span { stroke: var(--c-op); stroke-width: 2; opacity: 0.5; }
.lane-op-multi { cursor: pointer; outline: none; }
.lane-op-multi:focus-visible .lane-op-badge, .lane-op-multi:hover .lane-op-badge { stroke: var(--focus); stroke-width: 2.5; }
.lane-pr-badge { fill: var(--page-plane); stroke: var(--c-pr); stroke-width: 1.25; }
.lane-pr-count { fill: var(--text-primary); font-size: 10.5px; font-weight: 650; font-family: system-ui, sans-serif; }
.lane-pr-span { stroke: var(--c-pr); stroke-width: 2; opacity: 0.5; }
.lane-pr-multi:focus-visible .lane-pr-badge, .lane-pr-multi:hover .lane-key-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 14px; border: 1.25px solid var(--c-pr); border-radius: 7px; font-size: 10.5px; font-weight: 650; color: var(--text-primary); }
.lane-pr-badge { stroke: var(--focus); stroke-width: 2.5; }
.lane-op:focus-visible circle, .lane-op:hover circle, .lane-pr:focus-visible path, .lane-pr:hover path { stroke: var(--focus); stroke-width: 2.5; }
.lane-stretch { cursor: pointer; outline: none; }
.lane-stretch:focus-visible .lane-stretch-rect, .lane-stretch:hover .lane-stretch-rect { stroke: var(--focus); stroke-width: 2.5; }
.lane-stretch-rect.seg-not_labeled { fill: none; stroke: var(--c-not-labeled); stroke-width: 1; }
.lane-wait-label { fill: var(--text-primary); font-size: 11px; font-family: system-ui, sans-serif; paint-order: stroke; stroke: var(--page-plane); stroke-width: 3px; }
.lane-legend { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--text-secondary); }
.lane-legend li { display: flex; align-items: center; gap: 6px; }
.lane-key { display: inline-block; flex: none; width: 14px; height: 12px; }
.lane-key-wait { background: repeating-linear-gradient(135deg, var(--c-waste-waiting) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(45deg, var(--c-waste-waiting) 0 1.5px, transparent 1.5px 5px); }
.lane-key-outside { background: var(--text-muted); opacity: 0.25; }
.lane-key-act { height: 6px; background: var(--text-secondary); }
.lane-key-fail { width: 3px; height: 14px; background: var(--c-alarm); }

/* ---------- Steps 2 to 4: compare, rank, act ---------- */
.compare-lede, .causes-lede { color: var(--text-primary); }
/* The choices wrap onto a second line rather than run past the page. */
.mode-toggle { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0; margin: 4px 0 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-btn, .ot-btn { font: inherit; font-size: 14px; padding: 6px 12px; min-height: 36px; background: var(--surface-1); color: var(--text-secondary); border: 0; cursor: pointer; }
.mode-btn + .mode-btn, .ot-btn + .ot-btn { border-left: 1px solid var(--border); }
.mode-btn[aria-pressed="true"], .ot-btn[aria-pressed="true"] { background: var(--text-primary); color: var(--page-plane); font-weight: 600; }
.mode-btn:focus-visible, .ot-btn:focus-visible { outline-offset: -3px; }
/* A chart that is wider than the page scrolls inside its own frame. */
.chart-frame { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; min-width: 0; }
.sb-row { display: flex; align-items: flex-start; }
.sb-row .sb-frame { flex: 1 1 auto; }
.sb-axis { flex: none; display: block; }
.sb-plot, .pareto { display: block; }
.axis-tick { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.axis-title { font-size: 12px; fill: var(--text-secondary); font-weight: 600; }
.sb-grid { stroke: var(--gridline); stroke-width: 1; }
.sb-base { stroke: var(--baseline); stroke-width: 1.2; }
.sb-divider { stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; }
.sb-group { font-size: 12px; fill: var(--text-muted); font-weight: 600; }
.sb-value { font-size: 10.5px; fill: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-name { font-size: 11px; fill: var(--text-secondary); }
.sb-open { fill: none; stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 3 2; }
.sb-nodata { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 2; }
.sb-nodata-q { font-size: 11px; fill: var(--text-muted); font-weight: 700; }
.chart-link { cursor: pointer; }
.chart-link .hit { fill: transparent; }
.chart-link:hover .hit, .chart-link:focus .hit { fill: color-mix(in srgb, var(--focus) 8%, transparent); }
.chart-link:focus { outline: none; }
.chart-link:focus-visible .hit { stroke: var(--focus); stroke-width: 2; }
.chart-link:hover .sb-name, .chart-link:focus .sb-name, .chart-link:hover .pareto-name, .chart-link:focus .pareto-name { fill: var(--link); }
.sb-legend { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 10px; }
.sb-legend-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.sb-legend .tw-legend { grid-template-columns: 1fr; margin-top: 4px; }
.sb-key { display: inline-block; flex: none; width: 12px; height: 12px; vertical-align: -1px; }
.sb-key-unsplit { background: repeating-linear-gradient(135deg, var(--baseline) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--baseline); }
.sb-key-open { border: 1.5px dashed var(--text-secondary); }
.sb-key-nodata { border: 1px dashed var(--text-muted); font-size: 10px; font-weight: 700; line-height: 10px; text-align: center; color: var(--text-muted); }
.sb-key-star::before { content: "*"; display: block; font-weight: 700; line-height: 12px; text-align: center; color: var(--text-primary); }
.sb-day { font-size: 10.5px; fill: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-key-day { width: auto; height: auto; font-size: 10.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.vsm-finish { font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.cell-day { display: block; white-space: normal; font-size: 12.5px; color: var(--text-secondary); }
/* Compare: over time */
.ot-base { margin: 6px 0 10px; font-size: 15px; max-width: 72ch; }
.ot-base p { margin: 0 0 6px; }
.ot-base-more summary { cursor: pointer; min-height: 24px; }
.ot-base-more p { font-size: 14px; }
.ot-controls { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.ot-toggle { flex-wrap: wrap; }
.ot-scroll { overflow-x: auto; }
.ot-cue { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.ot-plot { display: block; }
.ot-partial-line { fill: url(#ot-partial); }
.ot-hatch { fill: var(--page-plane); }
.ot-empty { fill: none; stroke: var(--baseline); stroke-width: 1; stroke-dasharray: 3 3; }
.ot-empty-text { font-size: 11px; fill: var(--text-muted); }
.ot-value { font-size: 11px; fill: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ot-thin { font-style: italic; }
.ot-median { stroke: var(--text-primary); stroke-width: 2; }
.ot-median-text { font-size: 10.5px; fill: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ot-range { stroke: var(--text-primary); stroke-width: 2; }
.ot-range-unknown { stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ot-q { font-size: 10px; fill: var(--text-secondary); font-weight: 700; }
.ot-bracket { fill: none; stroke: var(--text-secondary); stroke-width: 1.3; }
.ot-undated { margin-top: 14px; }
.ot-undated summary { cursor: pointer; font-size: 14.5px; min-height: 24px; }
.ot-undated-title { margin: 8px 0 4px; font-size: 14px; font-weight: 600; }
table.data-table.ot-cause-table { width: auto; }
table.data-table.ot-cause-table th, table.data-table.ot-cause-table td { min-width: 0; padding: 6px 6px; vertical-align: bottom; }
table.data-table.ot-cause-table th:first-child, table.data-table.ot-cause-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--page-plane); min-width: 9.5em; max-width: 13em; white-space: normal; text-align: left; }
.ot-col-head { display: block; font-size: 11.5px; line-height: 1.3; text-align: center; white-space: nowrap; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ot-col-sub { display: block; font-weight: 400; color: var(--text-muted); }
.ot-cell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 52px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ot-cell-bar { display: block; height: 6px; background: var(--gridline); border-radius: 1px; position: relative; overflow: hidden; }
.ot-cell-bar > span { position: absolute; left: 0; top: 0; bottom: 0; }
.ot-cell-bar > span.is-partial { background-image: repeating-linear-gradient(135deg, var(--page-plane) 0 1.5px, transparent 1.5px 4px); }
.ot-cell-empty { color: var(--text-muted); font-style: italic; }
.ot-cause-name { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; }
table.data-table.ot-table td, table.data-table.ot-table th { white-space: normal; min-width: 0; }
table.data-table.ot-table td.ot-fe { max-width: 14em; }
table.data-table.ot-table td:first-child { white-space: nowrap; }
.fe-dot { fill: var(--text-primary); stroke: var(--text-primary); stroke-width: 1.5; }
.fe-hollow { fill: var(--page-plane); }
.sb-table td:first-child { white-space: normal; min-width: 14em; max-width: 24em; }
.sb-table td.sb-note { white-space: normal; min-width: 12em; color: var(--text-secondary); }
.pareto-bar { stroke-width: 0; }
.pareto-name { font-size: 11.5px; fill: var(--text-secondary); }
.pareto-line { fill: none; stroke: var(--text-primary); stroke-width: 1.6; }
.pareto-dot { fill: var(--page-plane); stroke: var(--text-primary); stroke-width: 1.6; }
.pareto-key { display: flex; align-items: center; gap: 8px; }
/* The Pareto's frame shrinks to its bars, so the right axis sits beside them. */
.pareto-row .pareto-frame { flex: 0 1 auto; }
/* The direct label on the finished task with the most waste. */
.sb-callout { font-size: 12px; font-weight: 700; fill: var(--text-primary); paint-order: stroke; stroke: var(--page-plane); stroke-width: 3px; stroke-linejoin: round; }
.sb-callout-line { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 2 2; }
.chart-other:focus { outline: none; }
.chart-other:focus-visible .hit { fill: transparent; stroke: var(--focus); stroke-width: 2; }
.chart-other .hit { fill: transparent; }
.unlabeled-note a { white-space: normal; }
#act-unlabeled { font-size: 15px; color: var(--text-secondary); margin-top: 14px; }
/* On a phone the ranking list keeps Rank, Cause, Time and Share; the chart
   and each cause's page carry the running total and the task count. */
@media (max-width: 599px) {
  table.data-table.pareto-table { min-width: 0; }
  table.data-table.pareto-table th:nth-child(n+5), table.data-table.pareto-table td:nth-child(n+5) { display: none; }
  table.data-table.pareto-table { font-size: 13px; }
  table.data-table.pareto-table th, table.data-table.pareto-table td { padding: 8px 5px; white-space: normal; }
  table.data-table.pareto-table th:first-child, table.data-table.pareto-table td:first-child { padding-left: 0; }
  table.data-table.pareto-table th:nth-child(4), table.data-table.pareto-table td:nth-child(4) { padding-right: 0; }
  /* A fade at the Pareto frame's right edge says more bars lie beyond. */
  .pareto-frame.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* Compare's phone table: three columns that fit the screen. */
table.data-table.sb-compact { min-width: 0; font-size: 13px; }
table.data-table.sb-compact th, table.data-table.sb-compact td { padding: 5px 6px; }
/* The task's name takes the room the two figures leave and wraps there (spec 4.3). */
table.data-table.sb-compact td:first-child { width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* The two figures' headings wrap between words, so the name keeps the most room. */
table.data-table.sb-compact th { white-space: normal; }
table.data-table.sb-compact th:first-child, table.data-table.sb-compact td:first-child { padding-left: 0; }
table.data-table.sb-compact th:last-child, table.data-table.sb-compact td:last-child { padding-right: 0; }
details.full-table { margin-top: 10px; }
details.full-table > summary, details.unlabeled-list > summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.full-table[open] > summary { margin-bottom: 8px; }
details.full-table > summary::-webkit-details-marker, details.unlabeled-list > summary::-webkit-details-marker { display: none; }
details.full-table > summary { list-style: none; }
details.unlabeled-list > summary { list-style: none; }
details.full-table > summary::before, details.unlabeled-list > summary::before { content: "▸"; display: inline-block; width: 1.1em; }
details.full-table[open] > summary::before, details.unlabeled-list[open] > summary::before { content: "▾"; }
.unlabeled-note .unlabeled-words { margin: 0; }
.unlabeled-note .plain-list { margin: 4px 0 0; }
.unlabeled-note .plain-list li { margin: 4px 0; }
.pareto-line-key { display: inline-block; flex: none; width: 22px; height: 0; border-top: 1.6px solid var(--text-primary); position: relative; }
.pareto-line-key::after { content: ""; position: absolute; left: 7px; top: -5px; width: 6px; height: 6px; border-radius: 50%; border: 1.6px solid var(--text-primary); background: var(--page-plane); }
.pareto-table td:nth-child(2) { white-space: normal; min-width: 14em; }
.cause-title { display: flex; align-items: center; gap: 4px; }
.cause-title .swatch { width: 16px; height: 16px; flex: none; }
.a3-block .copy-prompt { font-weight: 600; padding: 6px 14px; }
.a3-block .drawer-prompt { border-top: 0; padding-top: 0; margin-top: 8px; }
.cause-tasks td:first-child { white-space: normal; min-width: 14em; }
.cause-spans { padding-left: 22px; margin: 6px 0; }
.cause-spans li { margin: 4px 0; }
.cause-span-name { font-weight: 550; }
.cause-group { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.cause-group + .cause-list, .cause-group + .chart-empty { margin-top: 2px; }
.act-list { list-style: none; margin: 8px 0 0; padding: 0; }
.act-row { border-bottom: 1px solid var(--gridline); padding: 10px 0; }
.act-head { margin: 0 0 4px; font-weight: 600; }
.act-ref { font-weight: 450; color: var(--text-muted); font-size: 14px; }
.act-facts { margin: 0; display: grid; gap: 2px; font-size: 14px; }
/* The term and its value sit side by side; with larger text the value moves under the term. */
.act-facts > div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.act-facts dt { flex: 0 0 auto; width: min(10em, 100%); }
.act-facts dd { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.act-facts dt { color: var(--text-secondary); }
.act-facts dd { margin: 0; }
.owner-list li { margin-bottom: 4px; }
.next-step { margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--gridline); font-size: 15px; color: var(--text-secondary); }
.next-step a { font-weight: 600; }
.next-step .step-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 700; margin: 0 5px 0 4px; vertical-align: 1px; }
.step-label a { color: inherit; }
/* On a phone the cause column gives way, so Share stays on screen. */
@media (max-width: 599px) {
  table.data-table.pareto-table td:nth-child(2) { min-width: 8em; }
}

/* ---------- S6: whole-walk review fixes ---------- */

/* The status line is one line; the full alarm text sits behind "Health details". */
.status-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.status-summary { min-width: 0; }
.status-term { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.status-details { font-size: 13px; }
.status-details > summary { cursor: pointer; color: var(--link); }
.status-details[open] { flex: 1 1 100%; }
.status-full { margin: 4px 0 0; color: var(--text-secondary); }

/* "Skip to the map", before the picker's rows. */
.skip-map { display: inline-block; font-size: 13px; margin: 0 0 4px; }

/* A glossary entry opened by a link. */
.glossary dt.is-target { background: color-mix(in srgb, var(--focus) 14%, transparent); border-radius: 4px; padding: 0 4px; margin-left: -4px; }
.glossary dt .swatch { margin-right: 6px; }

/* A session the task shared with other tasks. */
.session-shared { display: block; font-size: 12px; color: var(--text-muted); }

/* A cause already taken on, and Act's count. */
.taken-on { font-weight: 600; margin: 4px 0 6px; }
.act-summary { margin: 0 0 10px; color: var(--text-secondary); }

/* A day with no intake keeps the running total and is drawn lighter. */
.svg-chart .mark-quiet { opacity: 0.35; }
/* Over time tables fit their frame: the weekly tables never need a 640px floor, and the cause × week table keeps its names narrow on a phone so the newest weeks stay in view. */
table.data-table.ot-table, table.data-table.ot-cause-table { min-width: 0; }
table.data-table.ot-table { width: 100%; }
@media (max-width: 640px) {
  table.data-table.ot-cause-table th:first-child, table.data-table.ot-cause-table td:first-child { min-width: 6.5em; max-width: 7.5em; }
  .ot-cause-name { font-size: 12px; }
  table.data-table.ot-table td:first-child { white-space: normal; }
}
/* A cause's task table fits a phone: the day sits under the name, so the table needs no 640px floor. */
table.data-table.cause-tasks { min-width: 0; width: 100%; }
@media (max-width: 640px) { table.data-table.cause-tasks td:first-child { min-width: 9em; } table.data-table.cause-tasks th { white-space: normal; } }

/* Why the agent stopped: a fill per class, a color and a pattern (the SVG
   charts use the matching patterns in index.html, why-pat-*). A
   checkerboard for stopped short, dots for a question, horizontal lines for an error or a
   limit, vertical lines for an interruption; the gates share one brown,
   with diagonal lines (decision), the other diagonal (approval) and a
   cross-hatch (acceptance); why not known is an outline. */
.why-fill-stopped_short { --wc: var(--c-why-stopped_short); background: repeating-conic-gradient(var(--wc) 0 25%, color-mix(in srgb, var(--wc) 30%, transparent) 0 50%) 0 0 / 6px 6px; box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-question { --wc: var(--c-why-question); background: radial-gradient(circle, var(--wc) 1.6px, transparent 1.9px) 0 0 / 5px 5px, color-mix(in srgb, var(--wc) 35%, transparent); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-error_limit { --wc: var(--c-why-error_limit); background: repeating-linear-gradient(0deg, var(--wc) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-interrupted { --wc: var(--c-why-interrupted); background: repeating-linear-gradient(90deg, var(--wc) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-decision { --wc: var(--c-why-gate); background: repeating-linear-gradient(45deg, var(--wc) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-approval { --wc: var(--c-why-gate); background: repeating-linear-gradient(135deg, var(--wc) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-acceptance { --wc: var(--c-why-gate); background: repeating-linear-gradient(45deg, var(--wc) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(135deg, var(--wc) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 0 0 1.5px var(--wc); }
.why-fill-not_known { --wc: var(--c-why-not_known); background: transparent; box-shadow: inset 0 0 0 1.5px var(--wc); }
.swatch.why-fill-stopped_short, .swatch.why-fill-question, .swatch.why-fill-error_limit, .swatch.why-fill-interrupted, .swatch.why-fill-decision, .swatch.why-fill-approval, .swatch.why-fill-acceptance, .swatch.why-fill-not_known { width: 14px; height: 14px; }
/* A wait for the next prompt on the map takes its class's color on the
   triangle's outline; its label names the class. */
.vsm-wait.why-stopped_short .vsm-tri path { stroke: var(--c-why-stopped_short); }
.vsm-wait.why-question .vsm-tri path { stroke: var(--c-why-question); }
.vsm-wait.why-error_limit .vsm-tri path { stroke: var(--c-why-error_limit); }
.vsm-wait.why-interrupted .vsm-tri path { stroke: var(--c-why-interrupted); }
.vsm-wait.why-decision .vsm-tri path, .vsm-wait.why-approval .vsm-tri path, .vsm-wait.why-acceptance .vsm-tri path { stroke: var(--c-why-gate); }
.vsm-wait.why-not_known .vsm-tri path { stroke-dasharray: 3 2; }
/* The Pareto's split toggle sits beside the mode buttons. */
.why-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.why-toggle[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.pareto-why-seg { stroke: var(--page-plane); stroke-width: 1; }
.pareto-why-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--text-secondary); }
.pareto-why-legend li { display: inline-flex; align-items: center; gap: 6px; }
.why-sub-row td:first-child, .why-sub-row td:nth-child(2) { padding-left: 22px; }
.why-key { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-secondary); }
.why-key li { display: inline-flex; align-items: center; gap: 6px; }
.why-waits { margin: 8px 0 0; padding-left: 1.4em; }
.why-waits li { margin: 0 0 8px; line-height: 1.5; }
.why-waits .why-wait-facts { display: block; font-size: 13px; color: var(--text-secondary); }

/* On a phone the Pareto bars carry numbers; their names are this list. */
.pareto-num { font-weight: 600; }
.pareto-names { margin: 4px 0 8px; padding-left: 1.6em; font-size: 0.85rem; color: var(--text-secondary); }
.pareto-names li { margin: 2px 0; }
.ot-unsplit { font-size: 10px; }
.display-preferences { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding-bottom: .35rem; }
.display-preferences select { max-width: 100%; min-width: 0; padding: .4rem; font: inherit; }
.display-preferences [role="status"] { font-size: .8rem; color: var(--text-muted); }
.briefing-wrap .lede, .visit-note { max-width: 70ch; }
.briefing-columns { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.briefing-columns > * { min-width: 0; }
.briefing-columns > .block { margin-top: 24px; }
.briefing-list { list-style: none; margin: 0; padding: 0; }
.briefing-item { padding: 1rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.briefing-item h3 { margin: .2rem 0 .6rem; font-size: 1.1rem; }
.briefing-family { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.briefing-item p { margin: .5rem 0; max-width: 65ch; }
.briefing-action { font-weight: 600; }
.guide-stops { padding-left: 1.5rem; }
.guide-stops li { padding: .6rem 0; }
.guide-stops p { margin: .3rem 0; }
.guide button, .navigation-context button, .briefing-item button { min-height: 44px; padding: .5rem .75rem; font: inherit; cursor: pointer; }
.navigation-context { padding: .7rem 0; overflow-wrap: anywhere; }
.navigation-context a { margin-right: 1rem; }
.navigation-context p { margin: .35rem 0; }
.copy-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: .85rem; }
table.data-table.task-list-table { width: 100%; min-width: 0; table-layout: fixed; }
table.data-table.task-list-table td, table.data-table.task-list-table th { white-space: normal; overflow-wrap: anywhere; padding: .8rem; vertical-align: top; }
.task-list-table td:first-child, .task-list-table th:first-child { width: 35%; }
@media (min-width: 1000px) { .briefing-columns { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 600px) {
  .task-list-table, .task-list-table tbody, .task-list-table tr, .task-list-table td { display: block; width: 100% !important; }
  .task-list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .task-list-table tr { margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
  .task-list-table td { padding: .35rem 0; }
  .task-list-table td::before { content: attr(data-label) ": "; display: block; font-weight: 600; font-size: .8rem; }
}

/* ---------- Tables that do not fit wrap, then become stacked cards ----------
   First, a wide table's text cells wrap (fit-wrap). Each column keeps a
   text-sized minimum, so a table only stays a table while every column has
   room for a few words; long identifiers may break inside the word. */
.fit-wrap > table.data-table td, .fit-wrap > table.data-table th { min-width: 3.5em; max-width: none; white-space: normal !important; overflow-wrap: normal; }
.fit-wrap > table.data-table td { overflow-wrap: anywhere; }
.fit-wrap > table.data-table td:first-child { min-width: 6em; }
.fit-wrap > table.data-table td.num .num-value { white-space: nowrap; }
.table-wrap { container-type: inline-size; }

/* app.js adds .stacked to a table's holder when the wrapped table is still
   wider than it. Each row becomes a card and each cell starts with its
   column heading, on the same line as its value. app.js keeps the table
   roles (table, row, cell, columnheader) so screen readers keep the
   structure that display: block would drop. */
.stacked > table.data-table { min-width: 0 !important; width: 100%; }
.stacked > table.data-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stacked > table.data-table, .stacked > table.data-table > tbody, .stacked > table.data-table > tbody > tr, .stacked > table.data-table > tbody > tr > td, .stacked > table.data-table > tbody > tr > th, .stacked > table.data-table > tfoot, .stacked > table.data-table > tfoot > tr, .stacked > table.data-table > tfoot > tr > td { display: block; width: 100% !important; max-width: none; }
.stacked > table.data-table > caption { display: block; text-align: left; }
.stacked > table.data-table tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
.stacked > table.data-table td, .stacked > table.data-table tbody th { border: 0; padding: 1px 0; text-align: left; white-space: normal !important; overflow-wrap: anywhere; min-width: 0 !important; }
.stacked > table.data-table td::before, .stacked > table.data-table tbody th::before { content: attr(data-label) ": "; color: var(--text-secondary); font-size: .8em; font-weight: 600; }
.stacked > table.data-table td:not([data-label])::before, .stacked > table.data-table tbody th:not([data-label])::before, .stacked > table.data-table td[data-label=""]::before { content: none; }
/* On a wide holder the cards sit side by side. */
@container (width > 560px) {
  .stacked > table.data-table > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 24px; }
}


/* Reader-defect fixes (cold walk, 2026-10-12). */
.display-settings { margin: 0 0 .4rem; font-size: .9rem; }
.display-settings > summary { cursor: pointer; min-height: 32px; padding: 4px 0; box-sizing: border-box; color: var(--text-secondary); overflow-wrap: anywhere; }
.display-settings[open] > summary { margin-bottom: .3rem; }
.display-settings .chart-caption { margin: .2rem 0 .4rem; }
.map-selection { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: .2rem 0 .6rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; overflow-wrap: anywhere; }
.map-selection[hidden] { display: none; }
.map-selection button { min-height: 44px; padding: .5rem .75rem; font: inherit; cursor: pointer; }
.other-tasks { margin: 36px 0 0; border-top: 1px solid var(--border); padding-top: .75rem; }
.other-tasks > summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; min-height: 44px; display: flex; align-items: center; }
.improvement-alarms:focus { outline: 2px solid var(--link); outline-offset: 4px; }
.improvement-alarms:focus:not(:focus-visible) { outline: none; }
.alarm-list { list-style: none; margin: 0; padding: 0; }
.alarm-row { padding: .8rem 1rem; margin: 0 0 .75rem; border-left: 4px solid var(--c-alarm); background: var(--surface-2); overflow-wrap: anywhere; }
.alarm-row .alarm-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.alarm-row .act-facts { margin: 0; }
.vsm-legend-more { margin-top: .4rem; }
.vsm-legend-more > summary { cursor: pointer; min-height: 32px; }

/* Production clocks on the task page (spec 4.3). */
.task-clocks { margin: 1.5rem 0 0; }
.task-clocks-title { margin: 0 0 .6rem; font-size: 1.05rem; }
.task-clocks-sub { margin: 1rem 0 .4rem; font-size: .95rem; }
.clock-figure.is-unavailable dd { font-weight: 400; color: var(--text-secondary); }
.production-journey { margin: 0; padding-left: 1.4rem; overflow-wrap: anywhere; }
.production-journey li { margin: .3rem 0; }
.production-journey .journey-between { color: var(--text-secondary); }
.overview-conclusion { font-weight: 600; color: var(--text-primary); }