@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #1c1b18;
  --ink-soft: #5d5a53;
  --ink-faint: #9a978f;
  --paper: #ecebe6;
  --panel: #fff;
  --panel-soft: #fbfaf7;
  /* Initiative heads: darker = more structural. Projects stay --panel. */
  --initiative-bg: #f0eee8;
  --initiative-nested-bg: #f7f6f2;
  --line: #e4e1d9;
  --line-strong: #d6d3ca;
  --green: #2f7a3a;
  --green-wash: #e7f0e8;
  --amber: #b0722a;
  --red: #b3261e;
  --red-wash: #f3d6d3;
  --mut: #7a776f;
  --tabs-bg: #ebe9e3;
  --estimate-line: #8f8c84;
  --estimate-border: #b5b2a9;
  --month-tick: #b0ada4;
  --badge-bg: #f0eee8;
  --onbar-label: #b8b5ad;
  --line-soft: #efede7;
  --row-hover: #f7f6f2;
  --ink-body: #3a3833;
  --fail-bg: #fff5f4;
  --fail-border: #e1aaa6;
  --fail-strong-bg: #fff1f0;
  --fail-strong-border: #e8b9b5;
  --chip-muted: #f0efeb;
  --outside: #faf9f6;
  --green-border: #cfddd1;
  --highlight: #edf4ee;
  --shadow: 28 27 24;
  --on-ink: #fff;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --label-w: 34%;
  --track-gutter: 90px;
  --calendar-card-h: 78px;
  --badge-col: 40px;
  --name-pad: 20px;
  --name-gap: 9px;
  --name-start: calc(var(--name-pad) + var(--badge-col) + var(--name-gap));
}

/* Option B — Midnight */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f1ec;
  --ink-soft: #b6b0a4;
  --ink-faint: #7d776b;
  --paper: #16140f;
  --panel: #1a1815;
  --panel-soft: #201e1a;
  /* Dark: lighter = stands out more. Top initiative lightest; nested between it and projects. */
  --initiative-bg: #2a271f;
  --initiative-nested-bg: #221f1a;
  --line: #2f2c26;
  --line-strong: #423e35;
  --green: #4fd67a;
  --green-wash: #16281c;
  --amber: #f0a93d;
  --red: #ff6b57;
  --red-wash: #3a1712;
  --mut: #948d80;
  --tabs-bg: #221f1a;
  --estimate-line: #7a7364;
  --estimate-border: #524c40;
  --month-tick: #63594a;
  --badge-bg: #2a271f;
  --onbar-label: #857d6d;
  --line-soft: #2f2c26;
  --row-hover: #25221c;
  --ink-body: #e8e4db;
  --fail-bg: #3a1712;
  --fail-border: #6b3a32;
  --fail-strong-bg: #4a1c16;
  --fail-strong-border: #7a4238;
  --chip-muted: #2a271f;
  --outside: #12110e;
  --green-border: #2a4a34;
  --highlight: #16281c;
  --shadow: 0 0 0;
  --on-ink: #0d0c0a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background .15s ease, color .15s ease;
}
button, input { font: inherit; }
a { color: var(--ink); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.plain-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

main { max-width: 1320px; margin: 0 auto; padding: 22px 118px 80px 32px; }
h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; }
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
}
.page-title { display: grid; gap: 6px; }
.kicker {
  color: var(--mut);
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dept-picker { position: relative; display: inline-block; }
.dept-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 -8px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: background .15s;
}
.dept-trigger:hover,
.dept-trigger[aria-expanded="true"] { background: var(--tabs-bg); }
.dept-current { margin: 0; }
.dept-chev { flex: none; color: var(--ink-faint); transition: transform .15s; }
.dept-trigger[aria-expanded="true"] .dept-chev { transform: rotate(180deg); }
.dept-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 60;
  min-width: 240px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(var(--shadow) / 18%);
}
.dept-menu li[role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  border-radius: 5px;
  color: var(--ink-soft);
  font: 400 15px/1.3 var(--sans);
  cursor: pointer;
}
.dept-menu li[role="option"]:hover { background: var(--panel-soft); color: var(--ink); }
.dept-menu li[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.dept-menu li[aria-selected="true"]::after {
  content: "✓";
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}
.dept-menu-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--line);
}
.linkish {
  border: 0;
  background: none;
  padding: 0;
  color: var(--mut);
  cursor: pointer;
}
.linkish { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); }
.page-stats {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  align-items: baseline;
  gap: 3px 18px;
  color: var(--ink-soft);
  font-size: 14px;
}
.overdue-count { color: var(--red); font-weight: 600; }
.overdue-count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}
.freshness {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: 10px;
  opacity: .85;
}
.freshness.stale { color: var(--red); opacity: 1; }

/* Shared view tabs + per-view actions on one row */
.view-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}
.view-tabs {
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border-radius: 9px;
  background: var(--tabs-bg);
}
.view-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.view-actions .hygiene-counts { margin: 0; }
.view-tab {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 500;
}
.view-tab.active { background: var(--ink); color: var(--on-ink); }
.attention-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  font: 500 11px/1 var(--mono);
}

/* Strategy home + department picker */
.lede { color: var(--ink-soft); max-width: 60ch; }
.home-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}
.home-jump {
  display: grid;
  gap: 6px;
  min-width: 240px;
}
.home-jump-label {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#home-jump-select {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
}
.strategy {
  display: grid;
  gap: 18px;
  max-width: 72ch;
}
.strategy h2 {
  margin: 12px 0 0;
  font-size: 1.15rem;
}
.strategy h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}
.strategy p { color: var(--ink-body); line-height: 1.55; margin: 0; }
.strategy a[data-dept] {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 560;
}
.strategy-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-body);
  line-height: 1.55;
  display: grid;
  gap: 8px;
}
.strategy-actions {
  display: grid;
  gap: 14px;
}
.strategy-actions section {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.dept-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
}
.dept-card:hover { border-color: var(--green); background: var(--green-wash); }
.dept-card input { margin-top: 4px; accent-color: var(--green); }
.dept-card-copy { display: grid; flex: 1; }
.dept-card .name { font-weight: 600; }
.dept-card .stat { color: var(--ink-soft); margin-top: 5px; font-size: 12px; }
.dept-card .bad { color: var(--red); }

/* Filters
   Loudness ladder: solid ink fill = active view tab only.
   Checked pills = selected (border + soft fill). Expanded More filters = outline. */
.controls { margin-bottom: 10px; }
.controls::after { content: ""; display: table; clear: both; }
.lifecycle-filter { float: left; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.pill input {
  /* Form controls don't inherit color in some UAs — force match to pill label. */
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: transparent;
}
.pill input:checked::after {
  content: "✓";
  display: block;
  color: inherit;
  text-align: center;
  font-size: 10px;
  line-height: 13px;
}
.pill:has(input:checked) {
  background: var(--panel-soft);
  border-color: var(--ink);
  color: var(--ink);
}
.pill .n { opacity: .65; font: 500 12px var(--mono); }
.pill:nth-child(n+5):not(:has(input:checked)) { color: var(--ink-faint); border-color: var(--line); }
.more-filters {
  display: inline-flex;
  float: right;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin-top: 0;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.more-filters:hover { border-color: var(--ink); }
.more-filters[aria-expanded="true"],
.more-filters[aria-pressed="true"] {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
/* Collapsed with hidden selections — louder than idle, quieter than the active tab. */
.more-filters.has-active-filters {
  border-color: var(--ink);
  background: var(--panel-soft);
  color: var(--ink);
  font-weight: 600;
}
.more-filters-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.controls-actions {
  display: flex;
  float: right;
  align-items: center;
  gap: 16px;
}
.controls-actions .more-filters { float: none; }
.project-count {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.project-count .overdue-count { font-weight: 600; }
.hygiene-counts {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
}
/* Secondary filter trays — flat row, no dashed island (loudness stays on data surface). */
.extra-filters {
  clear: both;
  position: relative;
  top: 12px;
  margin-bottom: 12px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.filter-row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.filter-row + .filter-row { margin-top: 10px; }
.check-option, .team-option { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.check-option input, .team-option input, .facet-row input { margin: 0; accent-color: var(--green); }
.filter-divider { width: 1px; align-self: stretch; min-height: 20px; background: var(--line); }
.filter-label {
  color: var(--mut);
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dept-teams { display: contents; margin: 0; padding: 0; list-style: none; }
.dept-teams li { display: inline-flex; align-items: center; gap: 4px; }
.team-link { color: var(--ink-faint); text-decoration: none; }
.filter-menu { position: relative; }
.filter-menu summary {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  list-style: none;
}
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  width: min(430px, calc(100vw - 64px));
  max-height: 430px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgb(var(--shadow) / 10%);
}
.filter-options { display: grid; gap: 8px; }
.facet-search, .search, .date-range input {
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
}
/* Constraining value applied — same loudness as collapsed More filters with actives. */
.search:not(:placeholder-shown),
.facet-search:not(:placeholder-shown),
.date-range input.filter-active,
.filter-menu:has(> summary > span:not(:empty)) > summary {
  border-color: var(--ink);
  background: var(--panel-soft);
  color: var(--ink);
  font-weight: 600;
}
.facet-search { position: sticky; top: 0; z-index: 1; width: 100%; }
.filter-help { margin: 7px 0 10px; color: var(--ink-faint); font-size: 11px; }
.facet-group { margin: 0; padding: 0; border: 0; }
.facet-group legend { margin-bottom: 4px; color: var(--ink-faint); font: 500 10px var(--mono); text-transform: uppercase; }
.facet-row { display: flex; align-items: center; gap: 7px; min-height: 26px; border-bottom: 1px solid var(--line); cursor: pointer; }
.date-range { display: flex; align-items: center; gap: 6px; }
.date-range label { display: flex; align-items: center; gap: 6px; }
.search { width: 180px; }

/* Roadmap */
/* Data surfaces — hairline lift off paper/chrome (stronger edge + whisper shadow). */
.roadmap-card,
.hygiene-table-wrap,
.calendar-grid,
.metrics-table-wrap {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 7%);
}
.roadmap-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.grid-head, .group-head, .row {
  display: grid;
  grid-template-columns: minmax(280px, var(--label-w)) minmax(0, 1fr);
}
.grid-head {
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.legend { display: flex; align-items: flex-start; gap: 14px; padding: 13px 20px; color: var(--mut); font-size: 11px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.swatch { display: inline-block; width: 18px; height: 6px; border-radius: 2px; }
.swatch.dated { background: var(--ink); }
.swatch.estimate {
  border: 1px solid var(--estimate-border);
  background: repeating-linear-gradient(-45deg, var(--estimate-line) 0 1.5px, transparent 1.5px 5px);
}
.swatch.overdue { background: repeating-linear-gradient(-45deg, var(--red) 0 2px, var(--red-wash) 2px 5px); }
.quarters { position: relative; height: 68px; margin-right: var(--track-gutter); font: 500 12px var(--mono); color: var(--mut); }
.q-label { position: absolute; top: 8px; bottom: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.month-label { position: absolute; bottom: 6px; padding-left: 4px; border-left: 1px solid var(--line); color: var(--month-tick); font: 400 10px/12px var(--mono); }
.header-today-line, .today-line { position: absolute; top: 0; bottom: 0; border-left: 1.5px solid var(--red); pointer-events: none; }
.today-label {
  position: absolute;
  top: 28px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--red);
  color: white;
  white-space: nowrap;
  font: 500 11px var(--mono);
}
.group + .group { border-top: 1px solid var(--line); }
.group-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, var(--label-w)) minmax(0, 1fr);
  min-height: 60px;
  background: var(--initiative-bg);
}
/* Nesting via edge guide only — names share one left rail (no indent staircase). */
.group { --group-depth: 0; }
.caret {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: var(--name-pad);
  box-sizing: border-box;
  width: var(--badge-col);
  height: var(--badge-col);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mut);
  font: 400 10px var(--mono);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.caret:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.caret:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}
.initiative-hit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(280px, var(--label-w)) minmax(0, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.initiative-hit { cursor: pointer; }
button.initiative-hit:hover {
  /* Skip the caret square; highlight title + status from the name rail onward. */
  background: linear-gradient(
    90deg,
    transparent 0,
    transparent calc(var(--name-pad) + var(--badge-col)),
    color-mix(in srgb, var(--ink) 5%, transparent) calc(var(--name-pad) + var(--badge-col))
  );
}
button.initiative-hit:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}
div.initiative-hit { cursor: default; }
.gname {
  display: block;
  min-width: 0;
  padding: 14px 20px 12px var(--name-start);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.group + .group.nested { border-top-color: var(--line-soft); }
.group.nested > .group-head {
  min-height: 52px;
  background: var(--initiative-nested-bg);
}
.group.nested .gname {
  box-shadow: inset 2px 0 0 var(--line-strong);
  font-size: 13px;
  font-weight: 500;
}
.gcontext {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 84px 96px 64px;
  align-items: center;
  column-gap: 12px;
  padding: 12px 20px;
  color: var(--ink-soft);
  font-size: 12px;
}
.gcontext-health { display: inline-flex; align-items: center; min-width: 0; }
.gcontext-health .health-summary {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; }
.update-age.stale { color: var(--amber); }
.gcontext-priority {
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gcontext-priority:empty,
.gcontext-health:empty { visibility: hidden; }
.gcontext-target {
  font-family: var(--mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gcontext-partial {
  color: var(--amber);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.initiative-detail {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 24px;
  padding: 14px 20px 18px var(--name-start);
  border-top: 1px dashed var(--line);
  background: var(--panel-soft);
}
.initiative-summary { display: grid; gap: 16px; align-content: start; }
.initiative-summary .summary { margin: 0; }
.project-summary { min-height: 40px; border-top: 1px solid var(--line-soft); cursor: pointer; list-style: none; }
.project-summary::-webkit-details-marker { display: none; }
.project-summary:hover { background: var(--row-hover); }
.row { width: 100%; min-height: 40px; }
.cell-name {
  display: grid;
  grid-template-columns: var(--badge-col) minmax(0, 1fr);
  gap: var(--name-gap);
  align-items: start;
  min-width: 0;
  padding: 10px 20px 9px var(--name-pad);
}
.badge {
  box-sizing: border-box;
  width: var(--badge-col);
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--badge-bg);
  color: var(--mut);
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .03em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-copy { display: grid; gap: 2px; min-width: 0; }
.pname { color: var(--ink); font-size: 14px; line-height: 1.35; }
.project-disclosure[open] .pname { font-weight: 600; }
.project-note { color: var(--mut); font-size: 11.5px; }
.track { position: relative; min-height: 40px; margin-right: var(--track-gutter); }
.track .today-line { opacity: .35; }
.bar { position: absolute; top: 13px; height: 14px; border-radius: 3px; }
.bar.solid { background: var(--ink); border-radius: 7px 0 0 7px; }
.bar.solid.undated { border-radius: 7px; opacity: .72; }
.bar.estimate {
  border: 1px solid var(--estimate-border);
  border-radius: 0 7px 7px 0;
  background: repeating-linear-gradient(-45deg, var(--estimate-line) 0 1.5px, transparent 1.5px 5px);
}
.bar.overdue { background: repeating-linear-gradient(-45deg, var(--red) 0 2px, var(--red-wash) 2px 5px); border-radius: 0; }
.bar.done { background: var(--green); opacity: .55; border-radius: 7px; }
.milestone-marker {
  position: absolute;
  z-index: 3;
  top: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  cursor: help;
}
/* On the solid bar a filled dot is done, a ring is open. Over the hatched
   estimate the fill inverts so both stay legible. */
.ms-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--on-ink);
  border-radius: 50%;
  background: var(--ink);
}
.milestone-marker.done .ms-dot { background: var(--on-ink); }
.milestone-marker.on-hatch .ms-dot { border-color: var(--ink); background: var(--on-ink); }
.milestone-marker.on-hatch.done .ms-dot { background: var(--ink); }
.milestone-marker:hover .ms-dot,
.milestone-marker:focus-visible .ms-dot { width: 14px; height: 14px; }
.milestone-marker::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 260px;
  padding: 6px 8px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 5px 16px rgb(var(--shadow) / 12%);
  color: var(--ink);
  font: 400 12px/1.35 var(--sans);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
}
.milestone-marker:hover::after,
.milestone-marker:focus-visible::after { opacity: 1; }
.done-check {
  position: absolute;
  top: 12px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--green);
  color: white;
  text-align: center;
  font: 600 10px/16px var(--sans);
}
.bar-text { position: absolute; top: 13px; color: var(--ink); white-space: nowrap; font: 400 12px/14px var(--mono); }
.bar-text.undated { color: var(--ink-faint); }
.bar-text.estimated { color: var(--mut); font-style: italic; }
.bar-text.overdue { color: var(--red); font-weight: 500; }
.bar-text.done { color: var(--green); }
.bar-text.start { transform: translateX(-100%); color: var(--ink-soft); }
.bar-text.start.on-bar { z-index: 4; transform: none; color: var(--onbar-label); }
.no-date {
  position: absolute;
  top: 12px;
  left: 100%;
  margin-left: 8px;
  color: var(--ink-faint);
  font: 400 11px var(--mono);
  white-space: nowrap;
}
.no-matches { padding: 10px 20px 12px var(--name-start); border-top: 1px solid var(--line-soft); color: var(--ink-faint); font-size: 12.5px; }
.empty { margin: 0; padding: 24px; color: var(--ink-faint); }

/* Expanded rows */
.detail {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  background: var(--panel-soft);
  border-top: 1px dashed var(--line);
}
.detail-left { display: grid; gap: 16px; padding: 18px 20px 22px var(--name-start); }
.detail .summary, .initiative-detail .summary { color: var(--ink-body); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.detail .summary { margin: 0; }
.summary.none { color: var(--ink-faint); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.field .k, .update-card .k { color: var(--ink-faint); font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.field .v { margin: 2px 0 0; font-size: 13px; }
.field .v.none { color: var(--ink-faint); }
.inferred {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-left: 0.15em;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  color: var(--ink-faint);
  font: 600 9px/1 var(--mono);
  vertical-align: 0.1em;
}
.inferred::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: 220px;
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  font: 400 12px/1.35 var(--sans);
  white-space: normal;
  pointer-events: none;
  opacity: 0;
}
.inferred:hover::after,
.inferred:focus-visible::after { opacity: 1; }
.linear-link { color: var(--mut); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.linear-link .external { margin-left: 4px; }
.update-card {
  display: block;
  padding: 18px 24px 22px 20px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.initiative-detail .update-card { padding: 0 0 0 16px; border-left: 2px solid var(--line); }
.update-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.update-health { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; }
.update-date { color: var(--mut); font-size: 12px; }
.update-text { margin-top: 8px; max-width: 68ch; font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.detail .update-text,
.initiative-detail .update-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}
.update-text.none { color: var(--ink-faint); }
.data-note { margin: 14px 0 0; color: var(--ink-faint); font-size: 12px; }

/* Hygiene */
.hygiene-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.hygiene-head h2 { margin: 5px 0 0; font-size: 24px; line-height: 1.15; }
.hygiene-actions { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; }
.hygiene-actions .hygiene-counts { margin: 0; }
.backlog-head,
.hygiene-toolbar {
  justify-content: flex-end;
  align-items: center;
}
.view-extra-filters {
  /* Hygiene/Backlog tray: same .extra-filters surface, always full-width under the tab actions. */
  clear: none;
  top: 0;
}
.h-filter-menus { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hygiene-error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--fail-border);
  border-radius: 6px;
  background: var(--fail-bg);
  color: var(--red);
  font-size: 12px;
}
.hygiene-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 255px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}
/* Tip below icon — above clips under the sticky chrome / wrap overflow. */
.hygiene-table th .inferred::after {
  top: calc(100% + 6px);
  bottom: auto;
  max-width: 280px;
  text-transform: none;
  letter-spacing: normal;
}
.hygiene-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.hygiene-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  min-width: 96px;
  max-width: 128px;
  padding: 8px 7px;
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-soft);
  background: var(--panel-soft);
  color: var(--mut);
  text-align: center;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hygiene-table th.h-project-col,
.hygiene-table th.h-select-col {
  max-width: none;
}
.hygiene-table td {
  position: relative;
  height: 51px;
  max-width: 180px;
  padding: 8px 25px 8px 9px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
}
.hygiene-table tbody tr:hover td { background-color: var(--outside); }
.hygiene-table .h-select-col {
  position: sticky;
  z-index: 2;
  left: 0;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  padding: 0;
  border-left: 0;
  background: var(--panel);
  text-align: center;
  vertical-align: middle;
}
.hygiene-table th.h-select-col { z-index: 4; background: var(--panel-soft); }
.hygiene-table .h-project-col {
  position: sticky;
  z-index: 1;
  left: 38px;
  width: 245px;
  min-width: 245px;
  max-width: 245px;
  background: var(--panel);
  text-align: left;
}
.hygiene-table th.h-project-col { z-index: 3; background: var(--panel-soft); }
.h-row-check {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ink);
}
.h-row-check:disabled { cursor: wait; }
.h-project-name {
  display: grid;
  grid-template-columns: var(--badge-col) minmax(0, 1fr);
  gap: var(--name-gap);
  align-items: start;
}
.h-project-name .badge { margin-top: 2px; }
.h-project-link {
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
}
.h-project-link:hover, .h-resource-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.h-project-meta {
  margin: 3px 0 0 calc(var(--badge-col) + var(--name-gap));
  color: var(--ink-faint);
  font-size: 10.5px;
}
.h-cell-content {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.h-resource-list {
  -webkit-line-clamp: 2;
  line-height: 1.25;
}
.h-fail {
  height: auto;
  min-height: 51px;
  max-width: 220px;
  padding: 8px 28px 8px 9px;
  border-radius: 5px;
  background: var(--fail-strong-bg);
  box-shadow: inset 0 0 0 1px var(--fail-strong-border);
  color: var(--red);
  font-weight: 500;
  vertical-align: top;
}
.h-fail .h-cell-content,
.h-fail .h-resource-list {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
  text-wrap: pretty;
  line-height: 1.4;
  text-align: left;
}
.h-pass {
  color: var(--ink-faint);
  font-weight: 400;
}
.h-pass .h-cell-content { -webkit-line-clamp: 1; opacity: .55; }
.h-skip {
  color: var(--ink-faint);
  font-size: 11px;
}
.h-skip .h-cell-content { opacity: .4; }
.h-resource-link { color: inherit; text-decoration: none; }
.h-cell-action {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  font-size: 15px;
  line-height: 20px;
  opacity: 0;
}
.h-cell:hover .h-cell-action,
.h-cell:focus-within .h-cell-action {
  opacity: .75;
}
.h-cell-action:hover,
.h-cell-action:focus-visible { opacity: 1; }
.h-cell.dismissed {
  background: var(--chip-muted);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-faint);
}
.h-cell.dismissed .h-cell-content { text-decoration: line-through; }

/* Backlog queue — Hygiene table shape, queue columns */
.view-tab-count {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-faint);
  font: 500 11px var(--mono);
}
.backlog-table .b-summary-col {
  position: sticky;
  z-index: 1;
  left: 0;
  width: 490px;
  min-width: 490px;
  max-width: 490px;
  background: var(--panel);
  text-align: left;
}
.backlog-table th.b-summary-col { z-index: 3; background: var(--panel-soft); }
.b-summary-text {
  margin: 4px 0 0 calc(var(--badge-col) + var(--name-gap));
  color: var(--ink-body);
  font-size: 12.5px;
  line-height: 1.45;
  text-wrap: pretty;
  white-space: normal;
}
.b-summary-meta {
  margin: 3px 0 0 calc(var(--badge-col) + var(--name-gap));
  color: var(--ink-faint);
  font-size: 10.5px;
}
.backlog-table td.b-cell {
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 12px;
}
.backlog-table td.b-cell.wrap {
  white-space: normal;
  max-width: 180px;
  text-align: left;
  line-height: 1.35;
  text-wrap: pretty;
}
.backlog-table td.b-cell.muted { color: var(--ink-faint); }
.backlog-table td.b-priority {
  font-variant-numeric: tabular-nums;
}
.backlog-table td.b-priority-urgent,
.backlog-table td.b-priority-high {
  color: var(--ink);
  font-weight: 600;
}
.backlog-table td.b-priority-medium {
  color: var(--ink-soft);
  font-weight: 500;
}
.backlog-table td.b-priority-low,
.backlog-table td.b-priority-none {
  color: var(--ink-faint);
  font-weight: 400;
}
.backlog-table td.b-update-stale {
  color: var(--amber);
  font-weight: 500;
}
.fully-dismissed { opacity: .65; }

/* Release Calendar */
.calendar-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.calendar-filters .extra-filters {
  clear: both;
  top: 0;
  margin: 0;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.calendar-toolbar h2 {
  min-width: 210px;
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 550;
}
.calendar-toolbar .hygiene-counts { margin: 0 0 0 auto; font-weight: 550; }
.calendar-toolbar .more-filters { float: none; }
.calendar-nav {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
}
.calendar-nav:hover { border-color: var(--ink); color: var(--ink); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}
.calendar-grid.cols-5 { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
.calendar-grid.cols-6 { grid-template-columns: repeat(6, minmax(120px, 1fr)); }
.calendar-grid.cols-7 { grid-template-columns: repeat(7, minmax(120px, 1fr)); }
.calendar-weekday {
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink-faint);
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.calendar-weekday:first-child { border-left: 0; }
.calendar-day {
  min-height: 128px;
  padding: 7px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.calendar-grid.cols-5 .calendar-day:nth-child(5n + 6),
.calendar-grid.cols-6 .calendar-day:nth-child(6n + 7),
.calendar-grid.cols-7 .calendar-day:nth-child(7n + 8) { border-left: 0; }
.calendar-day.outside { background: var(--outside); color: var(--ink-faint); }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--red); }
.calendar-day-number {
  display: flex;
  min-height: 20px;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font: 500 11px/1.2 var(--mono);
}
.calendar-day-count { font-size: 9px; letter-spacing: .02em; }
.calendar-day.today .calendar-day-number { color: var(--red); }
/* Three cards stay visible; anything past that scrolls within the day. */
.calendar-day-projects {
  display: grid;
  gap: 5px;
  max-height: calc(3 * var(--calendar-card-h) + 2 * 5px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.calendar-day-projects.scrolls { padding-right: 3px; }
.calendar-project {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--calendar-card-h);
  max-height: var(--calendar-card-h);
  align-items: stretch;
  gap: 2px;
  overflow: hidden;
  margin: 0;
  padding: 5px 6px 5px 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.3;
}
.calendar-project.accent { padding-right: 6px; }
.calendar-tier-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.calendar-tier-bar.t1 { width: 5px; background: #b3261e; }
.calendar-tier-bar.t2 { width: 4px; background: #b0722a; }
.calendar-tier-bar.t3 { width: 3px; background: #c9c5b9; }
.calendar-tier-bar.t4 { width: 2px; background: var(--line); }
.calendar-tier-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 2px 7px 2px 10px;
  border-radius: 0 5px 0 8px;
  font: 700 9px/1.3 var(--mono);
  letter-spacing: .03em;
}
.calendar-tier-ribbon.t1 { background: #b3261e; color: #fff; }
.calendar-tier-ribbon.t2 { background: #b0722a; color: #fff; }
.calendar-tier-ribbon.t3 { background: #ded9cb; color: #5d5a53; }
.calendar-tier-ribbon.t4 { background: transparent; color: #b0ada4; }
.calendar-project-dept {
  flex: none;
  color: var(--ink-faint);
  font: 500 9px/1.45 var(--mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.calendar-project.accent .calendar-project-dept { padding-right: 34px; }
.calendar-project-marks {
  position: absolute;
  right: 5px;
  bottom: 3px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.calendar-missing {
  color: var(--red);
  font: 700 13px/1 var(--mono);
}
.calendar-enablement {
  display: inline-flex;
  color: var(--ink-faint);
  line-height: 0;
}
.calendar-asana-icon {
  display: block;
}
.calendar-project:has(.calendar-project-marks) .calendar-project-owner {
  padding-right: 22px;
}
.calendar-project:has(.calendar-enablement):has(.calendar-missing) .calendar-project-owner {
  padding-right: 30px;
}
.calendar-project:hover {
  border-color: var(--green);
  background: var(--green-wash);
}
.calendar-project.estimated {
  border-style: dashed;
  background: var(--panel);
}
.calendar-project.estimated:hover { background: var(--green-wash); }
.calendar-project-name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.calendar-project-owner {
  flex: none;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.quarter-targets { margin-top: 26px; }
.month-targets { margin-top: 22px; }
.quarter-targets h3 { margin: 5px 0 0; font-size: 18px; }
.calendar-resolution-note {
  margin: 4px 0 0;
  color: var(--ink-faint);
  font: 400 11px/1.3 var(--mono);
}
.quarter-target-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.calendar-project.compact {
  display: flex;
  height: auto;
  max-height: none;
  align-items: start;
  margin: 0;
  padding: 9px 10px 9px 13px;
  background: var(--panel);
  border-color: var(--line);
  font-size: 13px;
}
.calendar-project.compact .calendar-project-name {
  flex: none;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}
.calendar-resource-list { display: inline; }
.calendar-resource-link {
  color: var(--green);
  text-decoration: none;
}
.calendar-resource-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.calendar-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(var(--shadow) / 24%);
}
.calendar-dialog::backdrop { background: rgb(var(--shadow) / 42%); }
.calendar-dialog-close {
  position: sticky;
  z-index: 2;
  top: 10px;
  float: right;
  width: 30px;
  height: 30px;
  margin: 10px 10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tabs-bg);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 20px;
  line-height: 28px;
}
.calendar-detail { display: grid; gap: 18px; padding: 28px 30px 32px; }
.calendar-detail-heading h2 { margin: 7px 36px 0 0; font-size: 24px; line-height: 1.2; }
.calendar-detail-date { margin: 5px 0 0; color: var(--ink-soft); font: 400 12px var(--mono); }
.calendar-detail > .summary { margin: 0; font-size: 14px; line-height: 1.55; }
.calendar-flags {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}
.calendar-flags ul { margin: 9px 0 0; padding-left: 18px; color: var(--red); }
.calendar-flags li + li { margin-top: 5px; }
.calendar-no-flags { margin: 8px 0 0; color: var(--green); }
.calendar-milestones ul { margin: 9px 0 0; padding-left: 18px; }
.calendar-milestones li + li { margin-top: 5px; }
.calendar-milestones li.done { color: var(--ink-faint); }

/* Hidden metrics comparison */
.metrics-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.metrics-intro h2 { margin: 5px 0 0; font-size: 24px; line-height: 1.15; }
.metrics-filters { margin-bottom: 16px; }
.metrics-filters > .pills { float: left; }
.metrics-filters > .more-filters { float: right; }
.metrics-filters::after { content: ""; display: table; clear: both; }
.metrics-filters .extra-filters { top: 12px; margin-bottom: 28px; }
.metrics-filters .filter-help:last-child { margin-bottom: 0; }
.metrics-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
}
.metrics-rollup-wrap { max-height: 68vh; }
.metrics-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.metrics-table th,
.metrics-table td {
  min-width: 145px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.metrics-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--panel-soft);
  color: var(--mut);
  font: 500 10px/1.25 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.metrics-table .metric-row-label {
  position: sticky;
  z-index: 1;
  left: 0;
  min-width: 205px;
  border-left: 0;
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-weight: 500;
}
.metrics-table thead .metric-row-label { z-index: 3; }
.metrics-table .metric-highlight {
  background: var(--highlight);
  box-shadow: inset 2px 0 var(--green), inset -2px 0 var(--green);
}
.metrics-table thead .metric-highlight { background: var(--green-wash); color: var(--green); }
.metric-selected {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font: 500 9px var(--mono);
}
.metric-key-link,
.metric-project-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.metric-key-link:hover,
.metric-project-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.metric-key-detail,
.metric-key-asof { display: block; margin-top: 4px; color: var(--ink-soft); }
.metric-key-asof { color: var(--ink-faint); font-size: 10.5px; }
.metrics-projects-title { margin: 24px 0 9px; font-size: 16px; }
.metrics-project-table th { padding: 0; white-space: nowrap; }
.metrics-project-table td { max-width: 230px; }
.metric-sort,
.table-sort {
  width: 100%;
  padding: 10px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}
.hygiene-table .table-sort {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}
.hygiene-table .table-sort:has(.inferred) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.hygiene-table .h-project-col .table-sort,
.backlog-table .b-summary-col .table-sort {
  text-align: left;
}
.backlog-table .table-sort {
  padding: 0;
}
.metrics-project-table th[aria-sort="ascending"] .metric-sort::after,
.hygiene-table th[aria-sort="ascending"] .table-sort::after,
.backlog-table th[aria-sort="ascending"] .table-sort::after { content: " ↑"; }
.metrics-project-table th[aria-sort="descending"] .metric-sort::after,
.hygiene-table th[aria-sort="descending"] .table-sort::after,
.backlog-table th[aria-sort="descending"] .table-sort::after { content: " ↓"; }

@media (max-width: 900px) {
  :root { --label-w: 280px; --track-gutter: 70px; }
  main { padding-inline: 20px 100px; }
  .roadmap-card { overflow-x: auto; }
  .grid-head, .group, .detail { min-width: 850px; }
  .page-head { align-items: flex-start; }
  .page-stats { text-align: right; }
  .hygiene-table-wrap { max-height: none; }
  .metrics-rollup-wrap { max-height: none; }
  .calendar-grid.cols-5 { grid-template-columns: repeat(5, minmax(110px, 1fr)); }
  .calendar-grid.cols-6 { grid-template-columns: repeat(6, minmax(110px, 1fr)); }
  .calendar-grid.cols-7,
  .calendar-grid { grid-template-columns: repeat(7, minmax(110px, 1fr)); }
}

@media (max-width: 640px) {
  main { padding: 20px 14px 60px; }
  .theme-toggle { top: 10px; right: 10px; height: 30px; padding: 0 10px; font-size: 11px; }
  .controls { width: calc(100vw - 28px); }
  .page-head { display: grid; }
  .page-stats { justify-items: start; text-align: left; }
  .freshness { grid-column: 1 / -1; }
  .lifecycle-filter, .more-filters, .controls-actions { float: none; }
  .lifecycle-filter { width: 100%; }
  .pills { max-width: calc(100vw - 28px); }
  .controls-actions { margin-top: 12px; }
  .more-filters { display: inline-flex; width: auto; margin: 0; text-align: left; }
  .filter-divider { display: none; }
  .hygiene-head { display: grid; align-items: start; }
  .hygiene-actions { flex-wrap: wrap; }
  .metrics-intro { display: grid; }
  .metrics-filters > .pills,
  .metrics-filters > .more-filters { float: none; }
  .metrics-filters > .more-filters { margin-top: 12px; }
  .calendar-toolbar { flex-wrap: wrap; }
  .calendar-toolbar .hygiene-counts { width: auto; margin-left: auto; }
  .calendar-detail { padding: 24px 20px; }
}

/* Theme toggle — fixed top right, all views */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-faint);
  cursor: pointer;
  font: 500 11px var(--sans);
  box-shadow: none;
  opacity: .85;
}
.theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink-soft);
  opacity: 1;
}
.theme-toggle-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(90deg, currentColor 50%, transparent 50%);
}
html[data-theme="dark"] .theme-toggle-icon {
  background: currentColor;
  box-shadow: inset -3px -2px 0 -1px var(--panel);
  border-color: transparent;
}