/* Product Control Tower — styles (SWHW-75/80/96).
   Reproduces the approved mockup (2026-07-18-pm-control-tower-v2.html §7) verbatim:
   Atlassian Design System tokens + components, per PRD §5. All colour lives in the
   --ct-* token definitions below (the CT design-token layer); component rules use
   only those tokens. Everything is scoped under .ct-page so it stays independent of
   the website's global kit (which uses its own indigo/Inter tokens). */

.ct-page {
  /* Atlassian DS tokens (PRD §5) — the CT token layer */
  --ct-text:#172B4D; --ct-subtle:#626F86; --ct-disabled:#A5ADBA;
  --ct-bg:#FAFBFC; --ct-surface:#FFFFFF; --ct-border:#DFE1E6; --ct-border-bold:#C1C7D0;
  --ct-primary:#0052CC; --ct-primary-text:#FFFFFF;
  --ct-success:#36B37E; --ct-success-bg:#E3FCEF; --ct-success-text:#006644;
  --ct-warning:#FF991F; --ct-warning-bg:#FFFAE6; --ct-warning-text:#974F0C;
  --ct-danger:#DE350B; --ct-danger-bg:#FFEBE6; --ct-danger-text:#BF2600;
  --ct-info:#0065FF; --ct-info-bg:#DEEBFF;
  --ct-new:#5243AA; --ct-new-bg:#EAE6FF; --ct-new-text:#403294;
  --ct-s-xs:4px; --ct-s-sm:8px; --ct-s-md:12px; --ct-s-lg:16px; --ct-s-xl:24px;
  --ct-r-sm:3px; --ct-r-md:6px; --ct-shadow-sm:0 1px 2px rgba(9,30,66,.08);
  --ct-font:"Atlassian Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  font-family: var(--ct-font);
  color: var(--ct-text);
  padding: var(--ct-s-xl);
  font-size: 14px; line-height: 1.428;
}
.ct-page *, .ct-page *::before, .ct-page *::after { box-sizing: border-box; }

/* Page head */
.ct-head { margin-bottom: var(--ct-s-lg); }
.ct-head h2 { margin: 0 0 2px; font-size: 20px; font-weight: 600; color: var(--ct-text); }
.ct-head .ct-q { font-size: 12px; color: var(--ct-subtle); }

/* Report sub-nav (PRD §2/§7 surface) */
.ct-subnav { display: flex; flex-wrap: wrap; gap: 2px; background: #EBECF0; border-radius: var(--ct-r-md); padding: 3px; width: fit-content; margin-bottom: var(--ct-s-lg); }
.ct-subnav-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 16px; border-radius: var(--ct-r-sm); border: 0; background: transparent; color: var(--ct-subtle); white-space: nowrap; }
.ct-subnav-btn:hover { color: var(--ct-text); }
.ct-subnav-btn.active { background: var(--ct-surface); color: var(--ct-primary); box-shadow: var(--ct-shadow-sm); }
.ct-subnav-btn .soon { font-size: 10px; color: var(--ct-disabled); margin-left: 5px; text-transform: uppercase; }

/* Section header (.shd) */
.ct-shd { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ct-s-lg); }
.ct-shd .num { width: 26px; height: 26px; border-radius: var(--ct-r-md); background: var(--ct-primary); color: var(--ct-primary-text); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ct-shd h2 { font-size: 18px; font-weight: 600; }
.ct-shd .q { font-size: 12px; color: var(--ct-subtle); margin-left: auto; max-width: 46%; text-align: right; font-style: italic; }

/* callout */
.ct-callout { background: var(--ct-info-bg); border: 1px solid #B3D4FF; border-radius: var(--ct-r-md); padding: var(--ct-s-md) var(--ct-s-lg); font-size: 13px; color: #0747A6; margin-bottom: var(--ct-s-lg); }

/* cards & tiles */
.ct-card { background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: var(--ct-r-md); box-shadow: var(--ct-shadow-sm); }
.ct-grid { display: grid; gap: var(--ct-s-lg); }
.ct-tiles { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--ct-s-lg); }
.ct-tile { padding: var(--ct-s-lg); }
.ct-tile .k { font-size: 11px; color: var(--ct-subtle); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.ct-tile .v { font-size: 28px; font-weight: 700; margin: 2px 0; }
.ct-tile .v.warn { color: var(--ct-warning); } .ct-tile .v.bad { color: var(--ct-danger); } .ct-tile .v.new { color: var(--ct-new); }
.ct-tile .d { font-size: 12px; color: var(--ct-subtle); }
.ct-tile .d.bad { color: var(--ct-danger); }
/* Adoption count carries its percentage inline, at the note's weight so the count stays
   the headline and the ratio reads as its qualifier (SWHW-131). */
.ct-tile-pct { font-size: 15px; font-weight: 600; color: var(--ct-subtle); }

/* Cache-freshness strip: how old the Jira data is, plus Sync now (SWHW-131). Sits between
   the heading and the tiles, so it qualifies the numbers before they are read. */
.ct-syncrow { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-s-lg); margin-bottom: var(--ct-s-lg); }
.ct-sync-msg { color: var(--ct-subtle); }
.ct-sync-msg.bad { color: var(--ct-danger); }

/* card head strip */
.ct-cardhead { padding: 12px var(--ct-s-lg); border-bottom: 1px solid var(--ct-border); font-weight: 700; }
.ct-cardhead .mini { font-weight: 400; }
.ct-mini { font-size: 11px; color: var(--ct-subtle); }
.ct-muted { color: var(--ct-subtle); }

/* table */
.ct-util { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-util th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ct-subtle); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--ct-border); }
.ct-util td { padding: 9px 10px; border-bottom: 1px solid var(--ct-border); vertical-align: middle; }
.ct-util tr:hover td { background: #F7F8FA; }

/* utilization bar (.bar>i) */
.ct-bar { height: 7px; border-radius: 4px; background: #EBECF0; overflow: hidden; min-width: 110px; display: inline-block; vertical-align: middle; }
.ct-bar > i { display: block; height: 100%; }
.ct-bar-i.ok { background: var(--ct-success); } .ct-bar-i.high { background: var(--ct-warning); } .ct-bar-i.over { background: var(--ct-danger); } .ct-bar-i.low { background: var(--ct-border-bold); }

/* lane allocation (.laneb) */
.ct-laneb { display: flex; height: 14px; width: 130px; border-radius: var(--ct-r-sm); overflow: hidden; font-size: 9px; font-weight: 700; color: #fff; }
.ct-laneb > div { display: grid; place-items: center; overflow: hidden; }
.ct-laneb .f { background: var(--ct-primary); } .ct-laneb .e { background: var(--ct-warning); } .ct-laneb .b { background: var(--ct-danger); } .ct-laneb .o { background: var(--ct-border-bold); }
.ct-lane-empty { color: var(--ct-subtle); }

/* human vs AI split (.aisplit) */
.ct-aisplit { display: flex; height: 16px; width: 150px; border-radius: var(--ct-r-sm); overflow: hidden; font-size: 8.5px; font-weight: 700; color: #fff; }
.ct-aisplit .hum { background: var(--ct-primary); display: grid; place-items: center; white-space: nowrap; overflow: hidden; }
.ct-aisplit .ai { background: var(--ct-new); display: grid; place-items: center; white-space: nowrap; overflow: hidden; }

/* lozenges */
.ct-lz { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px; border-radius: var(--ct-r-sm); line-height: 1.4; white-space: nowrap; }
.ct-lz.green { background: var(--ct-success-bg); color: var(--ct-success-text); }
.ct-lz.red { background: var(--ct-danger-bg); color: var(--ct-danger-text); }
.ct-lz.amber { background: var(--ct-warning-bg); color: var(--ct-warning-text); }
.ct-lz.grey { background: #F4F5F7; color: #42526E; }

/* AI badge + sample tag */
.ct-ai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ct-new-text); background: var(--ct-new-bg); padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }
.ct-sample { font-size: 9px; font-weight: 700; color: var(--ct-warning-text); background: var(--ct-warning-bg); padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: .3px; margin-left: 6px; }

/* two-col footer + flowbar + annotations + AI insight panel */
.ct-two { grid-template-columns: 2fr 1fr; }
.ct-op { padding: var(--ct-s-lg); }
.ct-op h3 { font-size: 14px; margin-bottom: 6px; }
.ct-flowbar { display: flex; height: 26px; border-radius: var(--ct-r-sm); overflow: hidden; font-size: 11px; font-weight: 700; color: #fff; }
.ct-flowbar > div { display: grid; place-items: center; }
.ct-fb-cap { background: #DFE1E6; color: #42526E; } .ct-fb-committed { background: var(--ct-primary); } .ct-fb-over { background: var(--ct-danger); }
.ct-annot { background: #FFF7E6; border-left: 3px solid var(--ct-warning); padding: 6px 10px; font-size: 11.5px; color: #7A4F01; border-radius: 0 3px 3px 0; margin-top: 8px; }
.ct-hfix { background: var(--ct-new-bg); border-left: 3px solid var(--ct-new); padding: 6px 10px; font-size: 11.5px; color: var(--ct-new-text); border-radius: 0 3px 3px 0; margin-top: 8px; }
.ct-aip { border: 1px solid #C0B6F2; background: linear-gradient(180deg,#F7F5FF,#FFF); border-radius: var(--ct-r-md); padding: 0; }
.ct-aip ul { list-style: none; margin: 0; padding: 0; }
.ct-aip li { font-size: 12.5px; padding: 3px 0; display: flex; gap: 7px; align-items: flex-start; color: var(--ct-new-text); line-height: 1.5; }

/* empty / coming / loading states */
.ct-empty, .ct-coming { text-align: center; padding: 48px 20px; color: var(--ct-subtle); font-size: 13px; }
.ct-empty .empty-icon, .ct-coming .empty-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.ct-coming code, .ct-empty code { background: #F4F5F7; padding: 1px 6px; border-radius: 4px; }
.ct-dash { color: var(--ct-subtle); }

/* Weekly Status (⑤) — 2-col card grid (mockup .wk) */
.ct-wk { grid-template-columns: 1fr 1fr; }
.ct-wk-box { padding: var(--ct-s-lg); }
.ct-wk-box h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--ct-subtle); margin: 0 0 10px; }
.ct-wk-box ul { list-style: none; margin: 0; padding: 0; }
.ct-wk-box li { padding: 7px 0; border-bottom: 1px solid var(--ct-border); font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.ct-wk-box li:last-child { border: 0; }
.ct-wk-box li .ct-lz { flex: none; margin-top: 1px; }
.ct-lz.blue { background: var(--ct-info-bg); color: #0747A6; }

/* Weekly Status — live-AI narrative card (SWHW-103). Same visual language as .ct-aip. */
.ct-narr { border: 1px solid #C0B6F2; background: linear-gradient(180deg,#F7F5FF,#FFF); border-radius: var(--ct-r-md); padding: var(--ct-s-lg); margin-bottom: var(--ct-s-lg); }
.ct-narr-top { display: flex; align-items: center; gap: var(--ct-s-md); margin-bottom: 8px; }
.ct-narr-top .sp { margin-left: auto; }
.ct-narr p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ct-new-text); }
.ct-narr-meta { font-size: 11px; color: var(--ct-subtle); margin-top: 8px; }
.ct-btn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 5px 12px; border: 0; border-radius: var(--ct-r-sm); background: var(--ct-primary); color: var(--ct-primary-text); }
.ct-btn:hover { filter: brightness(1.06); }
.ct-btn[disabled] { background: var(--ct-border-bold); cursor: default; filter: none; }

/* Command Board (①) — SWHW-78 */

/* capacity-distribution card: title + the CARD-SCOPED range picker on one line */
.ct-dist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ct-s-md); }
.ct-rangesel { font: inherit; font-size: 11px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--ct-border-bold); border-radius: var(--ct-r-sm); background: var(--ct-surface); color: var(--ct-text); cursor: pointer; }

/* sortable headers + pager (SWHW-116) */
.ct-util th.ct-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ct-util th.ct-th-sort:hover { color: var(--ct-text); }
.ct-util th.ct-th-sort.on { color: var(--ct-primary); }
.ct-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--ct-s-md); padding: 8px var(--ct-s-lg); border-top: 1px solid var(--ct-border); }
.ct-pager .ct-btn { padding: 3px 10px; font-size: 11px; }

/* period picker + custom range row (SWHW-118). Hennie's rule: any date range offers a custom option. */
.ct-period-custom { display: flex; align-items: center; gap: var(--ct-s-md); flex-wrap: wrap; margin-top: var(--ct-s-md); padding: 8px 10px; background: #FCFCFD; border: 1px dashed var(--ct-border-bold); border-radius: var(--ct-r-sm); }
.ct-period-custom label { font-size: 11px; font-weight: 600; color: var(--ct-subtle); display: inline-flex; align-items: center; gap: 6px; }
.ct-period-custom input[type="date"] { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--ct-border-bold); border-radius: var(--ct-r-sm); background: var(--ct-surface); color: var(--ct-text); }
.ct-periodsel { max-width: 220px; }

/* flowbar lane segments (same lane colours as .ct-laneb) */
.ct-flowbar .ct-fb-f { background: var(--ct-primary); }
.ct-flowbar .ct-fb-e { background: var(--ct-warning); }
.ct-flowbar .ct-fb-b { background: var(--ct-danger); }
.ct-flowbar .ct-fb-o { background: var(--ct-subtle); }

/* lane-health row dot */
.ct-lane-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--ct-border-bold); }
.ct-lane-dot.feature { background: var(--ct-primary); }
.ct-lane-dot.enhancement { background: var(--ct-warning); }
.ct-lane-dot.bug { background: var(--ct-danger); }
.ct-lane-dot.other { background: var(--ct-subtle); }

/* exceptions rows (mockup .exrow) — reason right-aligned so the eye scans rule → key → why */
.ct-exrow { display: flex; gap: 10px; align-items: center; padding: 9px var(--ct-s-lg); border-bottom: 1px solid var(--ct-border); font-size: 13px; }
.ct-exrow:last-child { border-bottom: 0; }
.ct-exrow .ct-lz { flex: none; }
.ct-exrow .why { font-size: 12px; color: var(--ct-subtle); margin-left: auto; text-align: right; }

/* Delivery Cadence · Features (②) — SWHW-79 */

/* sub-tabs + Summary/Detail toggle on one line (mockup §2) */
.ct-subtabs-row { display: flex; align-items: center; gap: var(--ct-s-lg); justify-content: space-between; margin-bottom: var(--ct-s-lg); flex-wrap: wrap; }
.ct-subtabs { display: flex; gap: 2px; background: #EBECF0; border-radius: var(--ct-r-md); padding: 3px; width: fit-content; }
.ct-subtabs .ct-st { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--ct-subtle); border-radius: var(--ct-r-sm); cursor: pointer; white-space: nowrap; }
.ct-subtabs .ct-st.on { background: var(--ct-surface); color: var(--ct-primary); box-shadow: var(--ct-shadow-sm); }
/* Tier-3 stub: visibly present, visibly not available */
.ct-subtabs .ct-st.disabled { color: var(--ct-disabled); cursor: not-allowed; }
.ct-subtabs .ct-st .soon { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-left: 6px; color: var(--ct-disabled); }
.ct-toggle2 { display: flex; border: 1px solid var(--ct-border-bold); border-radius: var(--ct-r-sm); overflow: hidden; width: fit-content; }
.ct-toggle2 .ct-tg { padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--ct-subtle); cursor: pointer; background: var(--ct-surface); }
.ct-toggle2 .ct-tg.on { background: var(--ct-primary); color: var(--ct-primary-text); }

/* clickable epic key */
.ct-key { color: var(--ct-primary); cursor: pointer; font-size: 12.5px; }
.ct-key:hover { text-decoration: underline; }
.ct-row-delivered td { background: #FBFCFD; }

/* Stage bar — four equal segments, D | B | Q | P, coloured by state (SWHW-135).
   Replaces both the three stacked lanes (three lines tall per row) and the
   date-proportional gantt that briefly replaced them.

   Equal widths are the whole point. The gantt put 3-week phases on a portfolio-wide
   16-month axis, so every bar compressed into a sliver and abutting bars smeared
   together. Fixed widths mean the letter always fits and every row reads alike.

   The column's width now lives in ONE place — the <th style="min-width"> in
   summaryTable(). There is deliberately no min-width here: the old `.ct-tl-cell`
   rule pinned the <td> to 280px, which silently overrode the narrower <th> and kept
   the column at its pre-SWHW-135 width. `.ct-timeline` went with the gantt. */
.ct-stagebar { display: flex; gap: 2px; align-items: center; }
.ct-stagebar > i {
  flex: 1; height: 18px; border-radius: 3px; display: grid; place-items: center;
  cursor: help; font-style: normal; min-width: 18px;
}
.ct-stagebar > i > b { font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .3px; }

/* State palette. Green/blue/grey is the conventional done / active / pending reading, and
   it does not collide with the Health column's verdict: this says "which stage is the epic
   in", that says "is the epic in trouble". `late` is the one alarming state and it means
   only "the planned release date has passed and it has not shipped".

   Scoped as `.ct-stagebar > i.<state>` on purpose. The first cut used a `.ct-st` base
   class, which ALREADY belongs to the subtabs above (`.ct-subtabs .ct-st`, the
   Features / Enhancements switcher) — two unrelated components sharing one name. Scoping
   to the container drops the collision and keeps bare state words like `complete` and
   `late` from leaking anywhere else. */
.ct-stagebar > i.complete    { background: var(--ct-success-bg); }
.ct-stagebar > i.complete    > b { color: var(--ct-success-text); }
.ct-stagebar > i.in-progress { background: var(--ct-primary); }
.ct-stagebar > i.in-progress > b { color: #fff; }
.ct-stagebar > i.not-started { background: #F1F2F4; }
.ct-stagebar > i.not-started > b { color: var(--ct-disabled); }
.ct-stagebar > i.late        { background: var(--ct-danger-bg); box-shadow: inset 0 0 0 1px var(--ct-danger); }
.ct-stagebar > i.late        > b { color: var(--ct-danger-text); }
.ct-stagebar > i.no-plan     { background: transparent; box-shadow: inset 0 0 0 1px var(--ct-border-bold); }
.ct-stagebar > i.no-plan     > b { color: var(--ct-disabled); }

/* Header key — one swatch + label per state. */
.ct-stage-key { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.ct-stage-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ct-stage-sw.complete { background: var(--ct-success-bg); box-shadow: inset 0 0 0 1px var(--ct-success); }
.ct-stage-sw.in-progress { background: var(--ct-primary); }
.ct-stage-sw.not-started { background: #F1F2F4; box-shadow: inset 0 0 0 1px var(--ct-border-bold); }
.ct-stage-sw.late { background: var(--ct-danger-bg); box-shadow: inset 0 0 0 1px var(--ct-danger); }
.ct-stage-sw.no-plan { background: transparent; box-shadow: inset 0 0 0 1px var(--ct-border-bold); }

/* variance / slip emphasis */
.ct-var { font-weight: 700; } .ct-var.late { color: var(--ct-danger); }
.ct-slip-late { color: var(--ct-danger); } .ct-slip-early { color: var(--ct-success); }

/* self-reported percentages — shown, but visibly not trusted */
.ct-untrusted { color: var(--ct-disabled); text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

/* drill-in modal (mockup §2) */
.ct-modal-ov { position: fixed; inset: 0; background: rgba(9,30,66,.54); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; z-index: 60; overflow: auto; }
.ct-modal { background: var(--ct-surface); border-radius: var(--ct-r-md); box-shadow: 0 4px 8px rgba(9,30,66,.08), 0 0 1px rgba(9,30,66,.16); width: 100%; max-width: 760px; overflow: hidden; }
.ct-modal .ct-mh { padding: 14px var(--ct-s-lg); border-bottom: 1px solid var(--ct-border); display: flex; align-items: center; gap: 10px; }
.ct-modal .ct-mh h3 { font-size: 16px; font-weight: 600; margin: 0; }
.ct-modal .ct-modal-x { margin-left: auto; color: var(--ct-subtle); font-size: 20px; line-height: 1; cursor: pointer; }
.ct-modal .ct-mb { padding: var(--ct-s-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--ct-s-lg); }
.ct-kv { display: flex; justify-content: space-between; gap: var(--ct-s-md); font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid #F1F2F4; }
.ct-kv span:first-child { color: var(--ct-subtle); }
.ct-tl-hist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.ct-tl-hist li { padding: 5px 0 5px 14px; border-left: 2px solid var(--ct-border); position: relative; }
.ct-tl-hist li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ct-primary); }

/* ── Product catch-up 2026-08-04 (SWHW-134) ─────────────────────────────────── */

/* Jira deep links. `.ct-jira` replaces the key text on surfaces where the key had no
   other job; `.ct-jira-only` is the bare ↗ used on Delivery Cadence, where .ct-key
   already owns the click. The arrow is dimmed until hover so a table of 15 keys does
   not read as 15 pieces of chrome. */
.ct-jira { color: var(--ct-primary); font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.ct-jira:hover { text-decoration: underline; }
.ct-jira-out { font-size: 9px; margin-left: 2px; opacity: .45; vertical-align: super; }
.ct-jira:hover .ct-jira-out { opacity: 1; }
.ct-jira-only { color: var(--ct-disabled); font-size: 10px; text-decoration: none; vertical-align: super; }
.ct-jira-only:hover { color: var(--ct-primary); }
/* The exceptions row is a flex line and the key replaced a <b>; without flex:none a long
   summary can squeeze the key narrower than its own text. */
.ct-exrow .ct-jira { flex: none; }

/* Row accent for the committed table. Only the settled half of the colour convention —
   green on-time, red variance (Maddy owes the rest). A 3px left edge rather than a
   background wash: it restores the health signal the Health column used to carry
   without tinting text or costing a column.

   EVERY row is marked, healthy ones included — deliberate, not an oversight. The
   alternative (red only, healthy rows plain) was put to Mustafa on 2026-08-04 and he
   chose to keep both, as the literal reading of "green for on-time and red for
   variances" + "apply color to table rows". Don't quietly drop .ct-row-ontime on the
   grounds that a column of green bars is noisy — that trade was considered and made. */
.ct-util tr.ct-row-late td:first-child { box-shadow: inset 3px 0 0 var(--ct-danger); }
.ct-util tr.ct-row-ontime td:first-child { box-shadow: inset 3px 0 0 var(--ct-success); }

/* Flowbar legend — names the segments too narrow to label in place. */
.ct-fb-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 11px; color: var(--ct-subtle); }
.ct-fb-key { display: inline-flex; align-items: center; gap: 5px; }
.ct-fb-key b { color: var(--ct-text); font-weight: 700; }
/* The lane colours at the top of this file are scoped to `.ct-flowbar`, and a legend
   swatch lives outside the bar — so it needs the same four colours restated here.
   Keep these in step with the `.ct-flowbar .ct-fb-*` rules above. */
.ct-fb-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.ct-fb-sw.ct-fb-f { background: var(--ct-primary); }
.ct-fb-sw.ct-fb-e { background: var(--ct-warning); }
.ct-fb-sw.ct-fb-b { background: var(--ct-danger); }
.ct-fb-sw.ct-fb-o { background: var(--ct-subtle); }
/* Segments carry a title= for hover, so give them a help cursor to advertise it. */
.ct-flowbar > div[title] { cursor: help; }

@media (max-width: 900px) { .ct-tiles { grid-template-columns: repeat(2, 1fr); } .ct-two { grid-template-columns: 1fr; } .ct-wk { grid-template-columns: 1fr; } .ct-modal .ct-mb { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ct-exrow { flex-wrap: wrap; } .ct-exrow .why { margin-left: 0; text-align: left; width: 100%; } }