tracker/static/style.css

/* Progress tracker. Tokens first; components below use only tokens. */
:root {
  --page: #F3F5F9;
  --surface: #FFFFFF;
  --ink: #172238;
  --muted: #56627A;
  --line: #DCE2EC;
  --row-line: #EEF1F6;
  --thead: #F8F9FC;
  --code-bg: #EDF0F6;
  --accent: #14306E;
  --link: #14306E;
  --link-hover: #1D3F8A;
  --done: #1F7A4D;
  --on-done: #FFFFFF;
  --gold: #F2B705;
  --violet: #7B5BD6;
  --violet-2: #A08BE6;
  --todo: #E4E8F0;
  --todo-edge: #B9C2D3;
  --track: #E6EAF2;
  --lane-gap: #FFFFFF;
  --lane-no-bg: #FFFFFF;
  --reviewed: #14306E;
  --on-reviewed: #FFFFFF;
  --btn-bg: #14306E;
  --on-btn: #FFFFFF;
  --on-gold: #172238;
  --side-ink: #DCE4F5;
  --side-muted: #A9B8D8;
  --side-bg: #14306E;
  --side-edge: transparent;
  --good: #1F7A4D;
  --good-bg: #E6F4EC;
  --bad: #B42318;
  --bad-bg: #FEE4E2;
  --alert-bg: #FEF3F2;
  --alert-line: #F1C7C2;
  --review-a: #EEE8FC;
  --review-b: #E2D9FA;
  --review-ink: #4B2FA8;
  --review-bg: #F4F1FD;
  --flash: #FFF6D6;
  color-scheme: light;

  --font-head: "Bai Jamjuree", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", system-ui, sans-serif;
  --radius: 10px;
}

/* Dark theme: follows the OS unless the viewer picked a theme (html[data-theme]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark: GitHub-style, one step darker. Layers step up: page < menu < cards < raised.
       Contrast checked with WCAG: text >= 4.5:1, status segments and outlines >= 3:1. */
    --page: #05070a;
    --surface: #0d1117;
    --ink: #e6edf3;
    --muted: #9198a1;
    --line: #2a313c;
    --row-line: #1b222c;
    --thead: #151b23;
    --code-bg: rgba(110, 118, 129, .25);
    --accent: #f0f6fc;
    --link: #4493f8;
    --link-hover: #79c0ff;
    --done: #2ea043;
    --reviewed: #388bfd;
    --on-reviewed: #05070a;
    --on-done: #05070a;
    --gold: #d29922;
    --violet: #8957e5;
    --violet-2: #a371f7;
    --todo: #1b222c;
    --todo-edge: #5d6876;
    --track: #0d1117;
    --lane-gap: #05070a;
    --lane-no-bg: #151b23;
    --btn-bg: #1f6feb;
    --on-gold: #05070a;
    --side-ink: #e6edf3;
    --side-muted: #9198a1;
    --side-bg: #0a0d12;
    --side-edge: #1f252e;
    --good: #3fb950;
    --good-bg: rgba(46, 160, 67, .15);
    --bad: #f85149;
    --bad-bg: rgba(248, 81, 73, .15);
    --alert-bg: rgba(248, 81, 73, .1);
    --alert-line: rgba(248, 81, 73, .4);
    --review-a: rgba(163, 113, 247, .15);
    --review-b: rgba(163, 113, 247, .28);
    --review-ink: #d2a8ff;
    --review-bg: rgba(163, 113, 247, .1);
    --flash: rgba(210, 153, 34, .15);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* Dark: GitHub-style, one step darker. Layers step up: page < menu < cards < raised.
       Contrast checked with WCAG: text >= 4.5:1, status segments and outlines >= 3:1. */
  --page: #05070a;
  --surface: #0d1117;
  --ink: #e6edf3;
  --muted: #9198a1;
  --line: #2a313c;
  --row-line: #1b222c;
  --thead: #151b23;
  --code-bg: rgba(110, 118, 129, .25);
  --accent: #f0f6fc;
  --link: #4493f8;
  --link-hover: #79c0ff;
  --done: #2ea043;
  --reviewed: #388bfd;
  --on-reviewed: #05070a;
  --on-done: #05070a;
  --gold: #d29922;
  --violet: #8957e5;
  --violet-2: #a371f7;
  --todo: #1b222c;
  --todo-edge: #5d6876;
  --track: #0d1117;
  --lane-gap: #05070a;
  --lane-no-bg: #151b23;
  --btn-bg: #1f6feb;
  --on-gold: #05070a;
  --side-ink: #e6edf3;
  --side-muted: #9198a1;
  --side-bg: #0a0d12;
  --side-edge: #1f252e;
  --good: #3fb950;
  --good-bg: rgba(46, 160, 67, .15);
  --bad: #f85149;
  --bad-bg: rgba(248, 81, 73, .15);
  --alert-bg: rgba(248, 81, 73, .1);
  --alert-line: rgba(248, 81, 73, .4);
  --review-a: rgba(163, 113, 247, .15);
  --review-b: rgba(163, 113, 247, .28);
  --review-ink: #d2a8ff;
  --review-bg: rgba(163, 113, 247, .1);
  --flash: rgba(210, 153, 34, .15);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.65 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.25; margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
code { font-size: .875em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* Shell */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.shell > * { min-width: 0; } /* let the scrolling menu and wide tables shrink instead of stretching the grid */
.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 14px;
  background: var(--side-bg); color: var(--side-ink);
  border-right: 1px solid var(--side-edge);
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 0 8px; }
.brand:hover { color: #fff; }
.brand-mark svg { fill: var(--gold); display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text b { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.brand-text span { font-size: 12.5px; color: var(--side-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 42px; padding: 0 12px;
  border-radius: 8px; border-left: 3px solid transparent;
  color: var(--side-ink); text-decoration: none; font-size: 14.5px;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.is-on { background: rgba(255, 255, 255, .1); border-left-color: var(--gold); color: #fff; font-weight: 500; }
.badge { font-size: 12px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; white-space: nowrap; }
.badge-alert { background: var(--gold); color: var(--on-gold); font-weight: 600; }

.live { margin: 0 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #8A97B2; }
.live[data-state="open"] .live-dot { background: #4CC38A; box-shadow: 0 0 0 0 rgba(76, 195, 138, .6); animation: pulse 2.4s infinite; }
.live[data-state="closed"] .live-dot { background: var(--gold); }
.side-note { margin: 0 8px; font-size: 12.5px; color: var(--side-muted); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0); } }

.main { padding: 32px clamp(16px, 4vw, 48px) 64px; max-width: 1180px; width: 100%; margin: 0 auto; } /* centred in the space beside the menu */
.main:focus { outline: none; }
.main.is-wide { max-width: none; } /* Timeline: use the full width up to the browser edge */

/* Page header */
.page-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.page-head h1 { font-size: 30px; font-weight: 700; color: var(--accent); }
.lede { margin: 0; color: var(--muted); max-width: 70ch; }

.alert { border: 1px solid var(--alert-line); background: var(--alert-bg); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 22px; }
.alert p { margin: 4px 0 0; }
.empty { padding: 20px; border: 1px dashed var(--todo-edge); border-radius: var(--radius); color: var(--muted); background: var(--surface); }

/* Stats */
.stats { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 34px; }
.stat {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
.stat:hover { border-color: var(--accent); color: inherit; }
.stat-label { font-size: 15px; font-weight: 600; color: var(--muted); }
.stat-num { margin: 0; font: 700 44px/1 var(--font-head); color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-note { margin: 0; font-size: 14px; color: var(--muted); }
.mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--todo); }
.mix-done { background: var(--done); }
.mix-reviewed { background: var(--reviewed); }
.mix-in_progress { background: var(--gold); }
.mix-review { background: var(--violet); }
.mix-todo { background: var(--todo); }
.stat-break { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 18px; margin: 4px 0 0; justify-content: start; }
.stat-break div { display: flex; flex-direction: column; }
.stat-break dt { font-size: 12.5px; color: var(--muted); }
.stat-break dd { margin: 0; font: 600 18px/1.2 var(--font-head); }

/* Blocks */
.block { margin-bottom: 38px; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 14px; }
.block-head h2 { font-size: 20px; font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }

/* Status fills, shared by legend swatches and segments.
   Review is hatched and Todo outlined, so status never depends on colour alone. */
.sw-done, .seg-done { background: var(--done); }
.sw-reviewed, .seg-reviewed { background: var(--reviewed); }
.sw-in_progress, .seg-in_progress { background: var(--gold); }
.sw-review, .seg-review { background: repeating-linear-gradient(135deg, var(--violet) 0 5px, var(--violet-2) 5px 9px); }
.sw-todo, .seg-todo { background: var(--todo); box-shadow: inset 0 0 0 1px var(--todo-edge); }

/* Lanes: milestones drawn as running-track lanes */
.lanes { background: var(--track); border-radius: var(--radius); overflow: hidden; }
.lane {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 60px; align-items: center; gap: 16px;
  padding: 14px 18px 14px 0;
  border-bottom: 2px solid var(--lane-gap);
}
.lane:last-child { border-bottom: 0; }
.lane-no {
  align-self: stretch; display: grid; place-items: center;
  background: var(--lane-no-bg); color: var(--accent);
  font: 700 26px/1 var(--font-head); font-variant-numeric: tabular-nums;
  border-right: 2px solid var(--lane-gap);
  margin: -14px 0;
}
.lane-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin-bottom: 8px; }
.lane-title { font-size: 16px; font-weight: 600; }
.lane-title a { color: var(--ink); text-decoration: none; }
.lane-title a:hover { text-decoration: underline; }
.lane-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lane-target { margin-left: 8px; }
.lane-pct { font: 600 18px/1 var(--font-head); color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.lane-empty { margin: 0; font-size: 13px; color: var(--muted); }
.segs { display: flex; gap: 3px; height: 18px; margin: 0; padding: 0; list-style: none; }
/* Milestone bar: one group of segments per epic, groups separated by a wider gap */
.segs-grouped { display: flex; gap: 10px; }
.segs-grouped .segs { min-width: 0; }

/* Epic rows under a milestone lane */
.epic-rows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.epic-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(120px, 34%) 44px; align-items: center; gap: 12px; font-size: 14px; }
.epic-code { font: 600 13px/1 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.epic-name { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epic-name:hover { text-decoration: underline; }
.epic-bar { display: flex; }
.epic-bar .segs { height: 10px; gap: 2px; flex: 1 1 auto !important; }
.epic-meta { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.seg { flex: 1 1 0; min-width: 6px; border-radius: 3px; transition: background-color .4s ease; }

/* Milestone page wraps a single lane in a white frame */
.ms > .lane { background: var(--track); border-radius: var(--radius); border: 0; margin-bottom: 10px; }
.ms > .lane .lane-no { border-radius: var(--radius) 0 0 var(--radius); }
.ms-goal { margin: 0 0 18px; color: var(--muted); max-width: 75ch; }
.epic { margin: 0 0 26px; padding-left: 16px; border-left: 3px solid var(--line); }
.epic-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.epic-head h3 { font-size: 17px; font-weight: 600; }
.epic-head .epic-code { margin-right: 6px; }
.epic-goal { margin: 4px 0 0; color: var(--muted); max-width: 75ch; }
.epic-bar-wide { display: flex; margin: 10px 0 12px; }
.epic-bar-wide .segs { flex: 1 1 auto !important; height: 12px; }

/* Current task */
.current { display: flex; flex-direction: column; gap: 14px; }
.task-now { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; }
.task-now-head h3 { font-size: 19px; font-weight: 600; margin: 2px 0 4px; }
.task-now-ms { margin: 0; font-size: 13px; color: var(--muted); }
.task-now-ms a { color: var(--muted); }
.task-now-meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.task-now-sum { margin: 8px 0 0; max-width: 75ch; }
.tid { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 10px; margin-top: 16px; background: var(--todo); border-radius: 5px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--gold); transition: width .5s ease; }
.meter-text { margin: 6px 0 14px; font-size: 13.5px; color: var(--muted); }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.steps h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.step-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.step-list li { position: relative; padding-left: 26px; }
.step-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 4px; }
.step-done::before { background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.step-left::before { box-shadow: inset 0 0 0 1.5px var(--todo-edge); background: var(--surface); }
.step-done { color: var(--muted); }

/* Tables */
.tasks { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.tasks th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--thead); }
.tasks td { padding: 12px 14px; border-bottom: 1px solid var(--row-line); vertical-align: top; }
.tasks tr:last-child td { border-bottom: 0; }
.tasks .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasks .dates { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tasks .bad { color: var(--bad); font-weight: 600; }
.more { margin-top: 6px; }
.more summary { cursor: pointer; font-size: 13px; color: var(--link); }
.more p { margin: 6px 0; max-width: 75ch; }
.more .step-list { margin: 8px 0; }

.chip { display: inline-block; font-size: 12.5px; line-height: 1.2; padding: 4px 9px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.chip-done { background: var(--done); color: var(--on-done); }
.chip-reviewed { background: var(--reviewed); color: var(--on-reviewed); }
.chip-reviewed::before { content: "✓ "; }
.chip-in_progress { background: var(--gold); color: var(--on-gold); }
.chip-review { background: repeating-linear-gradient(135deg, var(--review-a) 0 5px, var(--review-b) 5px 9px); color: var(--review-ink); box-shadow: inset 0 0 0 1px var(--violet-2); }
.chip-todo { background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 1px var(--todo-edge); }
.chip-pass { background: var(--good-bg); color: var(--good); }
.chip-fail { background: var(--bad-bg); color: var(--bad); }

.refs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.fail-list { margin: 6px 0; padding-left: 20px; color: var(--bad); }

/* Checkpoints */
.timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); margin-left: 8px; }
.cp { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 0 0 18px 22px; }
.cp::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--done); }
.cp:first-child::before { background: var(--gold); box-shadow: inset 0 0 0 3px var(--done); }
.cp-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cp-title { margin: 0; font-size: 16px; font-weight: 600; }
.cp-summary { margin: 6px 0 0; max-width: 75ch; }
.cp-changes { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; max-width: 80ch; }
.cp-tasks { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp-task { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--code-bg); color: var(--ink); text-decoration: none; }
.cp-task:hover { color: var(--link); }
.cp-commit { margin-left: 8px; }
.cp-meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.cp-stat { margin-left: 8px; }
.plus { color: var(--good); }
.minus { color: var(--bad); }

/* Problems and reviews */
.problems, .reviews { display: flex; flex-direction: column; gap: 14px; }
.problem, .review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.problem.is-open { border-left: 5px solid var(--bad); }
.problem-head h2, .review h2 { font-size: 17px; font-weight: 600; }
.problem-meta { margin: 6px 0 10px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.problem-body { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.problem-body div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.problem-body dt { font-weight: 600; font-size: 14px; color: var(--muted); }
.problem-body dd { margin: 0; max-width: 75ch; }
.review { border-left: 5px solid var(--violet); }
.review-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 10px 0; }
.review-meta div { display: flex; gap: 6px; font-size: 14px; }
.review-meta dt { color: var(--muted); }
.review-meta dd { margin: 0; }

/* Milestone sub-list under "Milestone & Tasks" in the sidebar */
.nav-subs { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px 14px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .14); }
.nav-sub { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; border-radius: 6px; color: var(--side-muted); text-decoration: none; font-size: 13px; }
.nav-sub:hover { background: rgba(255, 255, 255, .07); color: var(--side-ink); }
.nav-sub.is-on { color: var(--side-ink); background: rgba(255, 255, 255, .08); }
.nav-sub-no { font: 600 12px/1 var(--font-head); color: var(--gold); text-align: center; }
.nav-sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-sub-pct { font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.crumbs [aria-current] { color: var(--ink); }

/* Page kicker: which milestone / epic / task this is */
.kicker { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.kicker-no { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; background: var(--lane-no-bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent); font: 700 15px/1 var(--font-head); }

/* Summary panel on milestone and epic pages */
.summary { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; margin-bottom: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.summary-main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.summary-pct { margin: 0; font: 700 38px/1 var(--font-head); color: var(--accent); font-variant-numeric: tabular-nums; }
.summary-text { margin: 0; color: var(--muted); }
.summary-bar .segs { height: 16px; }
.summary .epic-bar-wide { margin: 0; }
.countline { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Epic cards on the milestone page */
.epic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.epic-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.epic-card:hover { border-color: var(--link); color: var(--ink); }
.epic-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.epic-card-pct { font: 600 16px/1 var(--font-head); color: var(--accent); font-variant-numeric: tabular-nums; }
.epic-card-title { font: 600 16.5px/1.35 var(--font-head); }
.epic-card-goal { font-size: 13.5px; color: var(--muted); }
.epic-card .epic-bar-wide { margin: 4px 0 0; }
.epic-card-meta { font-size: 13px; color: var(--muted); }

/* Epic page task table */
.tasks-epic { table-layout: fixed; }
.tasks-epic th:nth-child(1) { width: 150px; }
.tasks-epic th:nth-child(3) { width: 130px; }
.tasks-epic th:nth-child(4) { width: 84px; }
.tasks-epic th:nth-child(5) { width: 150px; }
.task-link { font-weight: 600; color: var(--ink); }
.task-link:hover { color: var(--link); }
.task-sum { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); max-width: 70ch; }

/* Task page */
.facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.task-summary { margin: 0 0 22px; max-width: 75ch; }
.review-box { margin-bottom: 26px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--violet); border-radius: var(--radius); }
.review-box h2 { font-size: 16px; font-weight: 600; }
.task-steps .meter { margin-top: 0; }
.task-steps .steps h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.task-now-head h3 a, .review h2 a { color: inherit; text-decoration: none; }
.task-now-head h3 a:hover, .review h2 a:hover { color: var(--link); text-decoration: underline; }

/* Test page: audience tabs, runs, grouped human-readable checks */
.view-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; padding: 4px; width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.view-tabs a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 14px; }
.view-tabs a:hover { color: var(--ink); }
.view-tabs a[aria-current] { background: var(--thead); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.badge-plain { font-size: 12px; padding: 2px 7px; border-radius: 999px; background: var(--code-bg); color: var(--ink); font-variant-numeric: tabular-nums; }

.run { margin-bottom: 18px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--good); border-radius: var(--radius); }
.run.is-failing { border-left-color: var(--bad); }
.run-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.run-title { display: flex; align-items: center; gap: 10px; }
.run-title h2 { font-size: 18px; font-weight: 600; }
.run-meta { margin: 0; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.run-summary { margin: 10px 0 0; max-width: 78ch; }
.run-groups { margin-top: 14px; }
.run-groups > summary, .run-tech > summary { cursor: pointer; font-size: 14px; color: var(--link); }
.run-tech { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--row-line); }
.tech-facts { margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.tech-facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.tech-facts dt { color: var(--muted); }
.tech-facts dd { margin: 0; }

.tgroup { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--row-line); }
.tgroup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tgroup-head h3 { font-size: 15.5px; font-weight: 600; }
.tgroup-purpose { margin: 4px 0 0; font-size: 14px; color: var(--muted); max-width: 78ch; }
.aud { font-size: 12px; padding: 2px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.aud-ba { color: var(--review-ink); box-shadow: inset 0 0 0 1px var(--violet-2); }
.aud-tech { color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.check-icon { width: 18px; height: 18px; margin-top: .2em; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font-body); }
.check-pass .check-icon { background: var(--good-bg); color: var(--good); }
.check-pass .check-icon::before { content: "✓"; }
.check-fail .check-icon { background: var(--bad-bg); color: var(--bad); }
.check-fail .check-icon::before { content: "✕"; }
.check-skip .check-icon { background: var(--code-bg); color: var(--muted); }
.check-skip .check-icon::before { content: "–"; }
.check-fail .check-text { color: var(--bad); font-weight: 500; }
.check-detail { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }

/* Review states: dot colour plus the tab label, so state never relies on colour alone */
.rs { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.rs-todo { background: var(--violet-2); }
.rs-rejected { background: var(--bad); }
.rs-hold { background: var(--gold); }
.rs-done { background: var(--good); }
.review.review-rejected, .review-box.review-rejected { border-left-color: var(--bad); }
.review.review-hold, .review-box.review-hold { border-left-color: var(--gold); }
.review.review-done, .review-box.review-done { border-left-color: var(--good); }
.review-sum { margin: 8px 0 0; max-width: 78ch; }
.review-meta dd { display: flex; align-items: center; }
.decision, .review-focus { margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; max-width: 86ch; }
.review-focus { background: var(--review-bg); }
.decision { background: var(--code-bg); }
.decision-rejected { background: var(--bad-bg); }
.decision-done { background: var(--good-bg); }
.decision-label { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* Reviewer checklist: numbered steps with a tick box */
.checklist { margin: 4px 0 6px; max-width: 86ch; }
.checklist-head { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.checklist-head .muted { font-size: 13px; }
.checklist-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 8px; }
.checklist-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.checklist-steps li::before { content: counter(step) "."; font: 600 14px/1.65 var(--font-head); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cl-box { width: 18px; height: 18px; margin-top: .25em; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--todo-edge); background: var(--surface); }
.cl-done .cl-box { background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: none; }
.cl-done .md { color: var(--muted); }

/* Rendered Markdown */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 4px 0 8px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md h3, .md h4, .md h5 { margin: 10px 0 4px; font-size: 15px; font-weight: 600; }
.md pre { margin: 6px 0 10px; padding: 10px 12px; background: var(--code-bg); border-radius: 6px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--line); color: var(--muted); }

/* In Progress segments shimmer so ongoing work reads as moving.
   The reduced-motion rule at the end of this file turns it off. */
.seg-in_progress, .mix-in_progress, .meter span, .epic-bar .seg-in_progress {
  background-color: var(--gold);
  background-image: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: progress-shimmer 1.8s ease-in-out infinite;
}
@keyframes progress-shimmer {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

/* Wait for review segments: the hatching slides steadily (a different rhythm
   from the In Progress shimmer, so the two states stay distinguishable).
   One tile = one stripe period: 9px across the stripes = 12.728px along x at 45 degrees. */
.seg-review, .mix-review, .epic-bar .seg-review {
  background-color: var(--violet);
  background-image: repeating-linear-gradient(135deg, var(--violet) 0 5px, var(--violet-2) 5px 9px);
  background-size: 12.728px 12.728px;
  background-repeat: repeat;
  animation: review-stripes 1s linear infinite;
}
@keyframes review-stripes {
  from { background-position: 0 0; }
  to { background-position: 12.728px 0; }
}

/* Review form */
.notice { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; background: var(--good-bg); color: var(--ink); border: 1px solid var(--good); }
.review-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--row-line); display: flex; flex-direction: column; gap: 14px; max-width: 86ch; }
.review-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.review-form legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.form-error { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-weight: 500; }
.checklist-steps .cl-input { width: 18px; height: 18px; margin: .3em 0 0; accent-color: var(--done); cursor: pointer; }
.checklist-steps label { cursor: pointer; }
.checklist-steps li:has(.cl-input:checked) label { color: var(--muted); }
.outcome-options { display: flex; flex-wrap: wrap; gap: 8px; }
.oc { position: relative; cursor: pointer; }
.oc input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.oc span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; color: var(--ink); }
.oc input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.oc-approve input:checked + span { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.oc-reject input:checked + span { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.oc-hold input:checked + span { background: var(--flash); border-color: var(--gold); color: var(--ink); }
.oc input:checked + span::before { content: "✓"; margin-right: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 600; font-size: 14px; }
.field-label .muted { font-weight: 400; font-size: 13px; }
.review-form textarea, .review-form input[type="text"] {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--page); color: var(--ink); font: 400 14.5px/1.6 var(--font-body);
}
.review-form textarea { resize: vertical; min-height: 110px; }
.review-form textarea:focus, .review-form input[type="text"]:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.field-name { flex: 1 1 220px; }
.btn-save { min-height: 42px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--btn-bg); color: #fff; font: 600 14.5px/1 var(--font-body); cursor: pointer; }
.btn-save:hover { filter: brightness(1.08); }
.history { margin: 0 0 12px; }
.history > summary { cursor: pointer; font-size: 14px; color: var(--link); }
.history-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.history-meta { margin: 0 0 2px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.history-meta b { color: var(--ink); }

/* Attached-file links */
.ref-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.ref-link code { color: var(--link); }
.ref-link:hover code { text-decoration: underline; }
.ref-ext { font-size: 11px; color: var(--muted); }

/* Markdown tables (reviews and the file viewer) */
.md-table { overflow-x: auto; margin: 10px 0 16px; border: 1px solid var(--line); border-radius: 8px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--row-line); }
.md th { position: sticky; top: 0; background: var(--thead); font-weight: 600; white-space: nowrap; z-index: 1; }
.md tr:last-child td { border-bottom: 0; }
.md tbody tr:hover td { background: var(--review-bg); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.md pre.mermaid { background: var(--surface); border: 1px solid var(--line); text-align: center; }

/* File viewer: a reading page opened from refs */
.viewer { min-height: 100vh; }
.viewer-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px clamp(16px, 3vw, 32px); background: var(--side-bg); color: var(--side-ink); border-bottom: 1px solid var(--side-edge); }
.viewer-home { color: #fff; font: 600 15px/1 var(--font-head); text-decoration: none; }
.viewer-bar .crumbs ol { margin: 0; color: var(--side-muted); }
.viewer-bar .crumbs a, .viewer-bar .crumbs li + li::before { color: var(--side-muted); }
.viewer-bar .crumbs a:hover { color: #fff; }
.viewer-bar .crumbs [aria-current] { color: #fff; }
.viewer-raw { margin-left: auto; font-size: 13.5px; color: var(--side-ink); }
.viewer-shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1320px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 64px; gap: 32px; }
.viewer-shell.has-toc { grid-template-columns: 250px minmax(0, 1fr); }
.viewer-toc { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; font-size: 13.5px; }
.viewer-toc-head { margin: 0 0 8px; font-weight: 600; color: var(--muted); }
.viewer-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.viewer-toc a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.viewer-toc a:hover { background: var(--surface); color: var(--link); }
.viewer-toc .toc-l3 a { padding-left: 20px; color: var(--muted); font-size: 13px; }
.viewer-main { min-width: 0; }
.viewer-filter { position: sticky; top: 52px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.viewer-filter label { font-weight: 600; font-size: 14px; }
.viewer-filter input { flex: 1 1 240px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--page); color: var(--ink); font: 400 14.5px/1.4 var(--font-body); }
.viewer-filter input:focus { outline: 2px solid var(--link); border-color: var(--link); }
.viewer-filter-count { font-size: 13.5px; color: var(--muted); }
.doc { max-width: none; font-size: 15.5px; line-height: 1.75; }
.doc h1 { font-size: 30px; color: var(--accent); margin: 0 0 16px; }
.doc h2 { font-size: 22px; margin: 34px 0 10px; padding-top: 8px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.doc h3 { font-size: 18px; margin: 24px 0 8px; scroll-margin-top: 70px; }
.doc h4 { font-size: 16px; margin: 18px 0 6px; }
.doc p, .doc ul, .doc ol, .doc blockquote { max-width: 90ch; }
.doc blockquote { background: var(--surface); border-left-color: var(--gold); padding: 8px 14px; border-radius: 0 8px 8px 0; color: var(--ink); }
.viewer-title { font-size: 22px; margin: 0 0 14px; word-break: break-all; }
.viewer-code { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.viewer-dir { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.viewer-dir li { border-bottom: 1px solid var(--row-line); }
.viewer-dir li:last-child { border-bottom: 0; }
.viewer-dir a { display: block; padding: 9px 14px; color: var(--ink); text-decoration: none; }
.viewer-dir a:hover { color: var(--link); background: var(--review-bg); }
.viewer-dir .is-dir a { font-weight: 600; }
@media (max-width: 900px) {
  .viewer-shell.has-toc { grid-template-columns: minmax(0, 1fr); }
  .viewer-toc { position: static; max-height: none; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface); }
}

/* Timeline (Gantt): sticky label column on the left, time axis on the right */
.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.tl-toolbar .view-tabs { margin: 0; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-btn { min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13.5px/1 var(--font-body); cursor: pointer; }
.tl-btn:hover { border-color: var(--link); color: var(--link); }
.tl-note { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.tl { --tl-label: 380px; position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.tl-head, .tl-body, .tl-row { min-width: max-content; }
.tl-head { display: flex; border-bottom: 1px solid var(--line); }
.tl-corner { position: sticky; left: 0; z-index: 5; flex: none; width: var(--tl-label); display: flex; align-items: flex-end; padding: 0 12px 8px; background: var(--thead); border-right: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.tl-axis { position: relative; flex: 1 0 var(--tl-min); height: 54px; background: var(--thead); }
/* Drag handle on the line between the labels and the chart. */
/* Every label cell also has a grab zone on its right border (see timeline.js). */
.tl-split, .tl-label::after { position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; cursor: col-resize; touch-action: none; z-index: 6; }
.tl-label::after { content: ""; }
.tl-split:focus-visible { outline: none; }
.tl-split:hover, .tl-split:focus-visible { background: linear-gradient(var(--link), var(--link)) center / 3px 100% no-repeat; }
.tl.is-resizing .tl-corner, .tl.is-resizing .tl-label { border-right-color: var(--link); box-shadow: inset -2px 0 0 var(--link); }
.tl.is-resizing, .tl.is-resizing * { cursor: col-resize !important; user-select: none; }
.tl-major, .tl-minor { position: relative; height: 27px; }
.tl-major span, .tl-minor span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border-left: 1px solid var(--row-line); }
.tl-major span { overflow: visible; font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--row-line); }
/* The label stays at the left edge while its day or month is on screen. */
.tl-major b { position: sticky; left: calc(var(--tl-label) + 8px); padding: 0 8px; font-weight: 600; white-space: nowrap; }
.tl-minor span { justify-content: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-minor span.is-weekend { color: var(--bad); }
.tl-body { position: relative; }
.tl-grid { position: absolute; top: 0; bottom: 0; left: var(--tl-label); right: 0; pointer-events: none; z-index: 0; }
.tl-weekend { position: absolute; top: 0; bottom: 0; background: var(--row-line); opacity: .55; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); z-index: 1; }
.tl-row { position: relative; display: flex; height: 36px; border-bottom: 1px solid var(--row-line); }
.tl-row[hidden] { display: none; } /* folded rows; display: flex above would otherwise win over [hidden] */
.tl-row:hover .tl-track { background-color: var(--review-bg); }
/* The label sits over the chart when it scrolls, so its hover tint is laid on
   an opaque base; a see-through tint (dark theme) would show the bars behind. */
.tl-row:hover .tl-label { background: linear-gradient(var(--review-bg), var(--review-bg)), var(--surface); }
.tl-row.tl-milestone:hover .tl-label { background: linear-gradient(var(--review-bg), var(--review-bg)), var(--thead); }
.tl-row.tl-milestone { height: 44px; }
.tl-row.tl-milestone .tl-label { font-weight: 600; background: var(--thead); }
.tl-row.tl-epic .tl-label { font-weight: 500; }
.tl-label { position: sticky; left: 0; z-index: 3; flex: none; width: var(--tl-label); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 calc(6px + var(--level) * 18px); background: var(--surface); border-right: 1px solid var(--line); font-size: 13.5px; }
.tl-toggle, .tl-toggle-space { flex: none; width: 20px; height: 20px; }
.tl-toggle { display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; }
.tl-toggle::before { content: "▾"; font-size: 13px; }
.tl-toggle[aria-expanded="false"]::before { content: "▸"; }
.tl-toggle:hover { background: var(--code-bg); color: var(--ink); }
.tl-code { flex: none; min-width: 44px; font: 600 12px/1 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.tl-name:hover { color: var(--link); text-decoration: underline; }
.tl-status { flex: none; font-size: 11px; padding: 3px 7px; }
.tl-pct { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; flex: 1 0 var(--tl-min); z-index: 1; }
.tl-bar { position: absolute; top: 10px; height: 16px; min-width: 3px; border-radius: 4px; } /* keep very short work visible */
.tl-milestone .tl-bar { top: 13px; height: 18px; }
.tl-sum { background: var(--todo); box-shadow: inset 0 0 0 1px var(--todo-edge); overflow: hidden; }
.tl-sum-fill { display: block; height: 100%; background: var(--done); }
.tl-plan { position: absolute; top: 6px; bottom: 6px; border: 1.5px dashed var(--muted); border-radius: 6px; }
.tl-marker { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold); box-shadow: 0 0 0 2px var(--surface); }
.tl-dur { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-none { position: sticky; left: calc(var(--tl-label) + 10px); display: inline-flex; align-items: center; height: 100%; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .tl:not([style*="--tl-label"]) { --tl-label: 220px; } .tl-status { display: none; } }

/* Flash a section that changed after a live update */
.updated { animation: flash 1.2s ease-out; }
@keyframes flash { from { background-color: var(--flash); } }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; gap: 10px; padding: 14px 16px; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .nav-link { flex: 0 0 auto; border-left: 0; border-bottom: 3px solid transparent; }
  .nav-link.is-on { border-bottom-color: var(--gold); }
  .live { margin: 0 4px; }
  .side-note { display: none; }
  .main { padding-top: 22px; }
  .stats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cp { grid-template-columns: 1fr; gap: 0; }
  .lane { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-right: 12px; }
  .lane-no { grid-row: 1 / span 2; font-size: 22px; }
  .lane-pct { grid-column: 2; text-align: left; font-size: 15px; }
  .epic-row { grid-template-columns: 38px minmax(0, 1fr) 36px; gap: 4px 8px; }
  .epic-name { white-space: normal; }
  .epic-row .epic-bar { grid-column: 2 / 4; grid-row: 2; }
  .epic { padding-left: 10px; }
  .nav-subs { display: none; } /* the milestone list page covers this on small screens */
  .epic-cards { grid-template-columns: 1fr; }
  .tasks-epic { table-layout: auto; }
  .tech-facts div { grid-template-columns: 1fr; gap: 0; }
  .run { padding: 16px; }
  .tasks thead { display: none; }
  .tasks, .tasks tbody, .tasks tr, .tasks td { display: block; width: 100%; }
  .tasks tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .tasks td { border: 0; padding: 4px 14px; text-align: left; }
  .tasks .num { text-align: left; }
}

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

/* Same column widths in every milestone table */
.ms .tasks { table-layout: fixed; }
.ms .tasks th:nth-child(1) { width: 150px; }
.ms .tasks th:nth-child(3) { width: 130px; }
.ms .tasks th:nth-child(4) { width: 84px; }
.ms .tasks th:nth-child(5) { width: 150px; }
@media (max-width: 860px) { .ms .tasks { table-layout: auto; } }

/* Theme switch in the sidebar */
.theme { display: flex; gap: 2px; margin: auto 8px 0; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.theme button {
  flex: 1; min-height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: var(--side-muted); font: 500 12.5px/1 var(--font-body); cursor: pointer;
}
.theme button:hover { color: #fff; }
.theme button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 860px) { .theme { margin: 0 4px; max-width: 280px; } }

/* Actionable preparation briefs and stakeholder questions. */
.task-brief,.task-questions{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}.task-brief h3{font-size:15px;margin:22px 0 10px}.task-brief .md{line-height:1.85}.task-proposed-owner{font-size:13px;background:var(--thead);padding:12px;border-radius:8px}.task-dependency{display:inline-block;background:var(--code-bg);padding:3px 8px;border-radius:5px;font-size:12px;text-decoration:none}.task-deliverables{padding-left:22px;line-height:1.9}.task-deliverables li{margin:8px 0}.task-questions>.muted{font-size:13px;line-height:1.8}.task-question-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:16px}.task-question-list>li{padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--thead)}.task-question-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.task-question-state{font-size:11px;color:var(--muted);padding:3px 9px;background:var(--code-bg);border-radius:16px}.task-question-state.is-answered{color:var(--good);background:var(--good-bg)}.task-question-list h3{font-size:15px;line-height:1.75;margin:12px 0}.task-question-list p{font-size:13px;line-height:1.8;margin:8px 0;overflow-wrap:anywhere}.task-question-answer{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.task-question-answer>.md{margin-top:8px}@media(max-width:600px){.task-brief,.task-questions{padding:16px}.task-question-list>li{padding:14px}}