/* Switchyard — one file, no framework. Clarity over decoration. */

/* Tokens */
:root {
  --bg: #ffffff; --fg: #111111; --muted: #666666; --line: #e3e3e3; --fill: #f7f7f7;
  --accent: #0a58ca; --accent-contrast: #ffffff;
  --bad: #b00020; --warn: #8a5a00; --ok: #1e6b35;
  /* Dark palette, defined once: the media query and .theme-dark resolve from */
  --d-bg: #111111; --d-fg: #e8e8e8; --d-muted: #9a9a9a; --d-line: #333333; --d-fill: #1b1b1b;
  --d-accent: #6ea8fe; --d-accent-contrast: #111111;
  --d-bad: #ff6b81; --d-warn: #e0b050; --d-ok: #6fcf8f;
  --fs-0: 13px; --fs-1: 15px; --fs-2: 16px; --fs-3: 19px; --fs-4: 23px;
  --lh-0: 20px; --lh-1: 20px; --lh-2: 24px; --lh-3: 24px; --lh-4: 28px; /* T-GRID: every size has a 4px-grid line height */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 3px; --bp: 640px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: var(--d-bg); --fg: var(--d-fg); --muted: var(--d-muted); --line: var(--d-line);
  --fill: var(--d-fill); --accent: var(--d-accent); --accent-contrast: var(--d-accent-contrast);
  --bad: var(--d-bad); --warn: var(--d-warn); --ok: var(--d-ok);
 }
}

/* Base */
* { box-sizing: border-box; }
html { font: var(--fs-2)/var(--lh-2) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg); background: var(--bg); }
body { margin: 0; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
h1 { font-size: var(--fs-4); line-height: var(--lh-4); }
h2, h3 { font-size: var(--fs-3); line-height: var(--lh-3); }
p, li, dd { max-width: 75ch; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-0); line-height: var(--lh-0); }
/* T-JIRA */
.jira { display: inline-block; min-width: 9ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.meta { font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); overflow-wrap: break-word; }
.error { color: var(--bad); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layout (L-WIDTH; §3 section rhythm) */
main.wrap { max-width: 1200px; margin: 0 auto; padding: var(--sp-4); }
@media (min-width: 640px) { main.wrap { padding: var(--sp-5); } }
main.wrap > section { margin: 0 0 var(--sp-6); }
/* §3 / C-LOG-4 — a section after a long scroll gets a hairline boundary */
main.wrap > section.rule { border-top: 1px solid var(--line);
  padding-top: var(--sp-4); }
form.narrow { max-width: 420px; }
.prose { max-width: 70ch; }
input, select, textarea, button { max-width: 100%; }

/* C-NAV */
header { display: flex; align-items: center; gap: var(--sp-4); min-width: 0;
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); }
header .brand { font-weight: 700; color: var(--fg); }
header nav.nav-wide { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  flex: 1; min-width: 0; }
header nav.nav-wide a { color: var(--fg); padding: var(--sp-2) 0; }
header .me { color: var(--muted); font-size: var(--fs-0); line-height: var(--lh-0); margin: 0;
  display: flex; gap: var(--sp-2); align-items: center; }
details.menu { display: none; margin-left: auto; position: relative; }
/* C-NAV-4 */
details.menu summary { list-style: none; cursor: pointer; color: var(--fg);
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-2); user-select: none;
  display: flex; align-items: center; justify-content: flex-end; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::marker { display: none; content: ""; }
details.menu .menu-body { position: absolute; right: 0; top: 100%; z-index: 10;
  min-width: 220px; max-width: calc(100vw - 2 * var(--sp-4));
  padding: var(--sp-2) var(--sp-4); background: var(--bg); border: 1px solid var(--line); }
details.menu .menu-body nav { display: flex; flex-direction: column; }
details.menu .menu-body a { color: var(--fg); min-height: 44px;
  display: flex; align-items: center; }
details.menu .menu-body .meta { margin: var(--sp-2) 0; }
details.menu .menu-body form { margin: 0 0 var(--sp-2); }
@media (max-width: 639px) {
  header { gap: var(--sp-2); }
  header nav.nav-wide, header > .me { display: none; }
  details.menu { display: block; }
}

/* C-PAGE */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.page-head h1 { margin: 0; }
.page-head .meta { margin: var(--sp-1) 0 0; }
.page-head .primary-action { flex: 0 0 auto; }
@media (max-width: 639px) { .page-head { flex-direction: column; align-items: flex-start; } } /* C-PAGE-6: phones always put the context line under the heading */
ul.items .kv .v.wrap { white-space: normal; }

/* C-BTN */
button, input[type="submit"] { font: inherit; font-size: var(--fs-2); line-height: var(--lh-2); min-height: 44px;
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-contrast); cursor: pointer;
  transition: background-color 120ms, color 120ms, border-color 120ms; }
button:hover { filter: brightness(.92); }
button:active { border-radius: 0; filter: brightness(.85); }
button.secondary { background: transparent; color: var(--accent); }
button.secondary:hover { filter: none;
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
button.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
button.danger:hover { filter: none;
  background: color-mix(in srgb, var(--bad) 8%, transparent); }
button.link { border: 0; background: none; color: var(--accent); padding: 0;
  font-size: var(--fs-0); line-height: var(--lh-0);
  min-height: 0; border-radius: 0; }
button.link:hover, button.link:active { filter: none; background: none; border-radius: 0; }
button.link:hover { text-decoration: underline; }
button:disabled { color: var(--muted); border-color: var(--line);
  background: transparent; cursor: not-allowed; filter: none; }
@media (hover: none) { button { min-height: 44px; } }
/* C-BTN-8 */
.requesters-actions { margin: 0 0 var(--sp-4); }
@media (max-width: 639px) { .requesters-actions button { width: 100%; } }

/* C-FIELD */
label { display: block; margin: 0 0 var(--sp-3); font-weight: 600; }
label .hint, label .field-error { display: block; font-size: var(--fs-0); line-height: var(--lh-0);
  font-weight: 400; margin-top: var(--sp-1); }
label .hint { color: var(--muted); }
label .field-error { color: var(--bad); }
input, select, textarea { display: block; width: 100%; margin-top: var(--sp-1);
  padding: var(--sp-2); font: inherit; font-size: var(--fs-2); line-height: var(--lh-2); min-height: 44px;
  color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); }
input[aria-invalid="true"] { border-color: var(--bad); }
input:disabled, select:disabled, textarea:disabled { background: var(--fill);
  color: var(--muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto;
  margin: 0 var(--sp-2) 0 0; accent-color: var(--accent); }
input[type="date"] { appearance: none; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
textarea { min-height: 5em; }
/* C-FIELD-9 / M10 */
.count-unit { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.count-unit input { margin-top: 0; }
.count-unit input.num { width: 7ch; flex: none; }
.count-unit input:not(.num) { flex: 1; min-width: 0; }

/* C-CHOICE */
fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-3); }
legend { font-weight: 600; padding: 0; margin-bottom: var(--sp-2); }
label.choice { display: flex; align-items: center; min-height: 44px; margin: 0;
  font-weight: 400; cursor: pointer; }
.scale { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* C-ROWS */
.rows { border-top: 1px solid var(--line); }
.rows .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.rows .row label { flex: 1 1 200px; margin: 0; }
.rows .row label.num { flex: 0 1 140px; }
.rows .row button.link { align-self: center; }

/* C-NOTICE */
.notice { font-size: var(--fs-2); line-height: var(--lh-2); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 4px solid var(--accent); }
.notice.warning { border-left-color: var(--warn); }
.notice.error { border-left-color: var(--bad); }
.notice.ok { border-left-color: var(--ok); }
p.error[role="alert"] { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--bad); margin: 0 0 var(--sp-3); }

/* C-SIM */
ul.similar { list-style: none; margin: 0; padding: 0; }
ul.similar li { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
ul.similar .sim-text { flex: 1 1 200px; min-width: 0; }
ul.similar .sim-text .meta { margin-top: var(--sp-1); }
/* C-SIM-4 */
@media (max-width: 639px) {
  ul.similar li { display: block; }
  ul.similar button { width: 100%; margin-top: var(--sp-2); }
}

/* C-ACTIONS */
.actions { position: sticky; bottom: 0; z-index: 5; display: flex;
  flex-direction: column; gap: var(--sp-2);
  margin-top: var(--sp-6); /* C-ACTIONS-5 */
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--line); }
.actions button { width: 100%; }
@media (min-width: 640px) {
  .actions { flex-direction: row; justify-content: flex-start; }
  .actions button { width: auto; }
}

/* C-TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); line-height: var(--lh-1); }
th, td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--line);
  vertical-align: top; white-space: nowrap; }
th { font-size: var(--fs-0); line-height: var(--lh-0); font-weight: 600; color: var(--muted); }
/* C-TABLE-3 */
td.c-title, th.c-title { white-space: normal; width: 100%; min-width: 8rem; }
.cell-sub { display: block; font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted);
  margin-top: var(--sp-1); white-space: normal; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .tag { margin-right: var(--sp-1); }
td.grip, th.grip { width: 44px; min-width: 44px; text-align: center;
  color: var(--muted); cursor: grab; }
/* C-TABLE-8 */
.move-form { display: inline-flex; gap: var(--sp-1); align-items: center; margin: 0; }
.move-form input { width: 4ch; flex: none; height: 32px; min-height: 0; margin: 0;
  padding: var(--sp-1) var(--sp-2); text-align: right; font-variant-numeric: tabular-nums; }
.move-form button { flex: none; white-space: nowrap; height: 32px; min-height: 0;
  padding: 0 8px; font-size: var(--fs-0); line-height: var(--lh-0); }
/* C-TABLE-4 */
@media (max-width: 639px) {
  .table-wrap table:not(.board):not(.swap) thead { display: none; }
  .table-wrap table:not(.board):not(.swap), .table-wrap table:not(.board):not(.swap) tbody,
  .table-wrap table:not(.board):not(.swap) tr, .table-wrap table:not(.board):not(.swap) td {
  display: block; width: 100%; }
  .table-wrap table:not(.board):not(.swap) tr { padding: var(--sp-2) 0; }
  .table-wrap table:not(.board):not(.swap) td { border-bottom: 0; padding: var(--sp-1) 0; }
  .table-wrap table:not(.board):not(.swap) td::before { content: attr(data-label); display: block;
  font-size: var(--fs-0); line-height: var(--lh-0); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-1); }
  .table-wrap table:not(.board):not(.swap) td.num { text-align: left; }
}
/* C-TABLE-5 */
@media (max-width: 639px) {
  .table-wrap:has(> table.board), .table-wrap:has(> table.swap) { overflow-x: visible; }
  table.board, table.swap { display: none; }
  ul.items { display: block; }
}
@media (min-width: 640px) {
  ul.items { display: none; }
}

/* C-ITEM */
ul.items { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
/* C-ITEM-6 */
ul.items li.item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
ul.items li.item p { margin: 0; }
ul.items li.item p + p { margin-top: var(--sp-1); }
ul.items .l1, ul.items .l4 { display: block; }
ul.items .rank { display: inline-block; min-width: 3ch; color: var(--muted);
  font-variant-numeric: tabular-nums; }
ul.items .sep { color: var(--muted); margin: 0 var(--sp-2); }
ul.items .vwords { color: var(--muted); }
ul.items .l2, ul.items .l3, ul.items .l4 { font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); }
ul.items .warn { font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); }
/* C-ITEM-8 */
ul.items .kv.span2 { grid-column: span 2; white-space: normal; }
ul.items .l2, ul.items .l3 { display: grid;
  grid-template-columns: 6fr 5fr 5fr; gap: var(--sp-2); align-items: start; }
ul.items .l2 > span, ul.items .l3 > span { min-width: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.items .kv .k { display: block; font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); }
ul.items .kv .v { display: block; color: var(--fg); font-variant-numeric: tabular-nums; }

/* T-VALUE (owner) */
td.c-value .tag { display: block; width: max-content; }
td.c-wrap { white-space: normal; min-width: 14ch; }
td.c-value .tag + .tag { margin-top: var(--sp-1); }
/* C-STATUS / C-VALUE */
.tag { display: inline-block; font-size: var(--fs-0); line-height: var(--lh-0); padding: 0 var(--sp-2);
  border: 1px solid var(--line); border-radius: 2px; color: var(--fg);
  background: transparent; white-space: nowrap; }
.tag-in-progress { color: var(--accent); border-color: var(--accent); }
.tag-on-deck { color: var(--accent); }
.tag-status-parked, .tag-status-rejected { color: var(--muted); }

/* C-STEP */
p.step-line { font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); margin: 0 0 var(--sp-1); }
/* C-STEP-5 */
progress.step-bar { display: block; width: 100%; height: 2px; margin: 0 0 var(--sp-4);
  appearance: none; border: 0; background: var(--muted); }
progress.step-bar::-webkit-progress-bar { background: var(--muted); }
progress.step-bar::-webkit-progress-value { background: var(--accent); }
progress.step-bar::-moz-progress-bar { background: var(--accent); }
/* C-STEP-6 */
progress.step-bar + h1 { margin-bottom: var(--sp-5); }

/* C-SUM */
dl.sum { margin: 0 0 var(--sp-4); }
/* C-SUM-2 */
dl.sum dt { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-2); font-size: var(--fs-0); line-height: var(--lh-0); font-weight: 600; color: var(--muted);
  margin: var(--sp-3) 0 var(--sp-1); }
dl.sum dt .link { flex: none; font-weight: 400; }
dl.sum dd { font-size: var(--fs-2); line-height: var(--lh-2); margin: 0; }
/* C-SUM-6 */
dl.sum.review dt { margin-top: var(--sp-5); }
dl.sum.review dt:first-child { margin-top: 0; }

/* C-FACT */
ul.facts { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
ul.facts li { padding: var(--sp-1) 0; }
ul.facts .f-label { display: inline-block; min-width: 8rem; margin-right: var(--sp-2);
  color: var(--muted); }
/* C-FACT-3 */
ul.facts .f-value { font-variant-numeric: tabular-nums; }
/* C-FACT-5 */
@media (max-width: 639px) {
  ul.facts li { padding: var(--sp-2) 0; }
  ul.facts .f-label { display: block; min-width: 0; margin: 0 0 var(--sp-1);
  font-size: var(--fs-0); line-height: var(--lh-0); }
  ul.facts .f-value { display: block; }
}

/* C-EMPTY */
p.empty { color: var(--muted); margin: var(--sp-3) 0; }

/* C-MOVE */
form.move-reason { margin: 0; padding: var(--sp-2) 0 0;
  border-bottom: 1px solid var(--line); }
form.move-reason p.meta { margin: 0 0 var(--sp-2); }
form.move-reason .move-row { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: flex-end; }
form.move-reason label { flex: 1 1 220px; margin: 0; }
form.move-reason label.cat { flex: 0 1 200px; }
/* C-MOVE-6 */
@media (max-width: 639px) {
  form.move-reason .move-row { flex-direction: column; align-items: stretch; }
  form.move-reason label, form.move-reason label.cat { flex: none; width: 100%; }
}

/* C-GATE */
.gate-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.gate-list li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); column-gap: var(--sp-1);
  padding: var(--sp-1) 0; color: var(--fg); }
.gate-list .g-pass { color: var(--ok); }
.gate-list .g-fail { color: var(--bad); }
/* C-GATE-4 */
.gate-list li button { margin-left: var(--sp-2); }
@media (max-width: 639px) {
  .gate-list li button { display: block; width: 100%; margin: var(--sp-2) 0 0; }
}
}

/* C-COMMENT */
.comment { margin: 0 0 var(--sp-4); }
.comment .meta { margin: 0 0 var(--sp-1); }

/* C-LOG */
ul.log { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
ul.log li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
ul.log li .meta { margin: 0 0 var(--sp-1); }

/* C-TIME */
.timeline { overflow-x: auto; }
.timeline svg { display: block; }
.timeline text { font: 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  fill: var(--fg); }
.timeline .milestone-label { fill: var(--muted); }
.timeline .today-label { fill: var(--fg); font-weight: 600; }
.timeline .bar-in-progress { fill: var(--accent); }
.timeline .bar-on-deck { fill: var(--line); }
.timeline .bar-released { fill: var(--fill); stroke: var(--line); stroke-width: 1; }
.timeline .slipped { fill: none; stroke: var(--muted); stroke-dasharray: 4 3;
  stroke-width: 1; }
.timeline .month-line, .timeline .milestone-line { stroke: var(--line); stroke-width: 1; }
.timeline .today-line { stroke: var(--fg); stroke-width: 1; }
@media (max-width: 639px) {
  .timeline { display: none; }
  .timeline-list { display: block; }
}
@media (min-width: 640px) {
  .timeline-list { display: none; }
}
/* C-TIME-5 */
.timeline-list h3 { font-size: var(--fs-0); line-height: var(--lh-0); color: var(--muted); font-weight: 600;
  margin: var(--sp-5) 0 var(--sp-1); }
.timeline-list h3:first-child { margin-top: 0; }
.timeline-list ul { list-style: none; margin: 0; padding: 0; }
.timeline-list li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); }

/* C-TOKENS */

/* Misc */
.inline { display: inline; }
.inline input, .inline select { display: inline; width: auto; }
details summary { cursor: pointer; }
details.collapse-phone summary h2 { display: inline; margin: 0; }
@media (max-width: 639px) { header a.brand, button.link, a.link, details > summary { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } details > summary { display: flex; } }
select { line-height: var(--lh-2); }
.link.edit { color: var(--muted); }
details.menu summary { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--sp-3); }
label { font-size: var(--fs-2); line-height: var(--lh-2); } /* C-FIELD: one size wherever a field sits */