/* Custom tooltip for ov-card hover */
.ov-card-tooltip {
  position: fixed;
  z-index: 99999;
  width: 300px;
  background: #1e2433;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 13px;
  border-radius: 7px;
  border: 1px solid #334155;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 1;
  white-space: normal;
  font-family: var(--font-ui);
  transition: opacity .12s;
}
.ov-card.show-tooltip .ov-card-tooltip {
  opacity: 1;
}
/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Orion180 brand palette */
  --primary:       #D50032;
  --primary-hover: #A20026;
  --primary-dark:  #890020;

  --success:       #008A57;
  --success-hover: #005737;
  --warning:       #FFC107;
  --info:          #17A2B8;
  --info-hover:    #117A8B;
  --danger:        #D50032;

  --bg:            #FDFBFB;
  --surface:       #FFFFFF;
  --surface2:      #F5F5F5;
  --header-bg:     #333333;

  /* Categorical data-viz slots. Assigned in fixed order and never cycled — a 9th
     series folds into "Other" rather than reusing a hue. Validated as a set
     against THIS surface (#FFFFFF): lightness band, chroma floor, adjacent-pair
     CVD separation (worst ΔE 9.1) and normal-vision floor (worst ΔE 19.6) all
     pass. aqua/yellow/magenta sit below 3:1 on white, so anything using them
     must also carry visible labels — the traffic bar's legend does. */
  --viz-1: #2a78d6;   /* blue    */
  --viz-2: #eb6834;   /* orange  */
  --viz-3: #1baf7a;   /* aqua    */
  --viz-4: #eda100;   /* yellow  */
  --viz-5: #e87ba4;   /* magenta */
  --viz-6: #008300;   /* green   */
  --viz-7: #4a3aa7;   /* violet  */
  --viz-8: #e34948;   /* red     */

  --border:        rgba(0,0,0,.125);
  --border2:       #DEE2E6;
  --table-header:  #E7E5E5;

  --text:          #212529;
  --text-dim:      #6C757D;
  --text-bright:   #111928;
  --text-muted:    #C5BFBF;
  /* Subordinate metadata (work-item ID / PR number) — must clear WCAG AA
     4.5:1 on white; --text-muted (#C5BFBF, ~1.9:1) does not. #6B7280 ≈ 4.8:1. */
  --text-meta:     #6B7280;

  /* semantic aliases kept for JS references */
  --cyan:          #17A2B8;
  --blue:          #D50032;
  --blue-light:    #fdecea;
  /* Light-mode status colours — darker shades so they stay readable on white.
     Dark mode overrides these to the high-saturation variants for legibility
     against the dark backgrounds. */
  --green:         #008A57;
  --amber:         #ca8a04;
  --red:           #D50032;
  --purple:        #981E97;
  --revert-blue:   #1d4ed8;

  /* Release Report historic stepper: Sunday release / hotfix / check stamp. */
  --rr-hist-prod-fg:  var(--success);
  --rr-hist-prod-bg:  rgba(0, 138, 87, 0.10);
  --rr-hist-hot-fg:   #8a5a00;
  --rr-hist-hot-bg:   rgba(202, 138, 4, 0.14);
  --rr-hist-check-fg: var(--danger);
  --rr-hist-check-bg: rgba(213, 0, 50, 0.08);

  /* Destructive-chip background + accent — light mode uses a pale pink so the
     chip looks like a soft warning on white; dark mode (below) uses a very
     dark red so the chip stands out against the dark surfaces. */
  --destructive-bg:     #fff0f0;
  --destructive-accent: #a00000;
  --slate:         #8896b3;

  --font-ui:   'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: 'Consolas', 'SF Mono', 'Fira Code', monospace;
  --radius:    0px;
  --shadow:    0 1px 3px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);

  /* AI analysis card severity backgrounds */
  --ai-bg-critical: #fdecea;
  --ai-bg-high:     #fef3c7;
  --ai-bg-medium:   #fef3c7;
  --ai-bg-low:      #ecfdf5;

  /* Table row hover — subtle lift on the surface */
  --row-hover: #f9f9f9;
  --rr-selected-bg: #e8f1ff;
  --rr-selected-accent: #2563eb;

  /* Remaining-work team header progress gradient (light mode = full saturation) */
  --rw-pct-done:      #00b83a;
  --rw-pct-done-dark: #00952f;
  --rw-pct-todo:      #c42200;
}

/* Dark theme — applied when <html data-theme="dark"> */
:root[data-theme="dark"] {
  --bg:            #0d1117;
  --surface:       #161b22;
  --surface2:      #21262d;
  --header-bg:     #010409;

  --border:        rgba(255,255,255,.10);
  --border2:       #30363d;
  --table-header:  #21262d;

  --text:          #c9d1d9;
  --text-dim:      #8b949e;
  --text-bright:   #f0f6fc;

  /* Same eight hues re-stepped for the dark surface (#161b22) — a selected dark
     palette, not an automatic flip. Validated as a set on that surface: worst
     adjacent CVD ΔE 8.4, worst normal-vision ΔE 19.3, and all eight clear 3:1. */
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #d55181;
  --viz-6: #008300;
  --viz-7: #9085e9;
  --viz-8: #e66767;
  --text-muted:    #6e7681;
  /* Subordinate metadata on the dark board surface (~#242433). #9CA3AF ≈ 5.5:1. */
  --text-meta:     #9CA3AF;

  --blue-light:    rgba(213, 0, 50, 0.18);
  --rr-selected-bg: rgba(37, 99, 235, 0.24);
  --rr-selected-accent: #60a5fa;

  --shadow:    0 1px 3px rgba(0,0,0,0.55);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.65);

  /* AI analysis card severity backgrounds — sit in the same value range as
     --surface2 (#21262d) so they harmonize with the cool blue-gray palette,
     with just a faint directional tint to convey severity. */
  --ai-bg-critical: #2a1f24;
  --ai-bg-high:     #262722;
  --ai-bg-medium:   #262722;
  --ai-bg-low:      #1c2624;

  /* Very subtle white overlay so rows don't strobe in dark mode */
  --row-hover: rgba(255, 255, 255, 0.04);

  /* Muted progress gradient so the work-items bars match the dark palette */
  --rw-pct-done:      #1f6b35;
  --rw-pct-done-dark: #18532a;
  --rw-pct-todo:      #5a1f28;

  /* High-saturation status colours for dark mode — they pop against the dark
     surfaces but would be unreadable on white, so they live here, not in :root. */
  --green:           #00ff00;
  --amber:           #fff000;
  --red:             #ff0000;
  --purple:          #d020ff;
  --revert-blue:     #60a5fa;

  --rr-hist-prod-fg:  #3fb950;
  --rr-hist-prod-bg:  rgba(63, 185, 80, 0.14);
  --rr-hist-hot-fg:   #e3b341;
  --rr-hist-hot-bg:   rgba(227, 179, 65, 0.12);
  --rr-hist-check-fg: #ff7b72;
  --rr-hist-check-bg: rgba(255, 123, 114, 0.12);

  /* Destructive-chip background + accent for dark mode */
  --destructive-bg:     #3a0000;
  --destructive-accent: #ff8080;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Links ───────────────────────────────────────────────────── */
/* Base anchor colour so links (e.g. bug/work-item numbers) never fall back
   to the browser default blue/purple, which is unreadable in dark mode.
   Components with their own colour (.drill-table td a, .rp-wi-link, inline
   styles, etc.) keep it via higher specificity. */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

#app { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 0; }

/* ── Header ──────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 64px;
  background: var(--header-bg);
  flex-wrap: wrap; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text {
  font-family: 'Montserrat', var(--font-ui);
  font-size: 20px; font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em;
}
.logo-text span { color: var(--primary); }
.header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-welcome { font-size: 13px; color: rgba(255,255,255,0.85); }
.header-welcome-name { font-weight: 600; color: #ffffff; }
.header-theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.10); color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px; cursor: pointer;
  font-family: var(--font-ui);
  transition: background 0.15s, border-color 0.15s;
}
.header-theme-btn:hover  { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }
.header-theme-btn:active { background: rgba(255,255,255,0.25); }
.header-theme-btn #theme-toggle-icon { font-size: 13px; line-height: 1; }
.auth-user { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.2); }
.auth-user-name { font-size: 12px; color: rgba(255,255,255,0.8); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-signout-btn { font-size: 11px; padding: 3px 8px; opacity: 0.8; }

/* ── Main content area ───────────────────────────────────────── */
#page-body { padding: 0 28px 60px; }

/* --- Embed mode (?embed=1) -------------------------------------------------
   Set by the inline script in index.html before first paint. Hides the shell so
   a single deep-linked tab fills an iframe; the tab content itself is untouched,
   which is what keeps this to three rules instead of an alternate layout.
   Tightened side padding because 28px of gutter is a lot of a 400px widget. */
html[data-embed="1"] header,
html[data-embed="1"] .tab-nav { display: none; }
html[data-embed="1"] #page-body { padding: 12px 14px 24px; }

/* ── Setup banner ────────────────────────────────────────────── */
#setup-banner {
  margin: 16px 0; padding: 16px 20px;
  background: #fff0f0; border: 1px solid #f5c6c6;
  display: none;
}
#setup-banner h3 { color: var(--primary); font-size: 14px; margin-bottom: 6px; }
#setup-banner p  { color: var(--text-dim); line-height: 1.7; }
#setup-banner code {
  font-family: var(--font-mono); font-size: 12px;
  background: rgba(0,0,0,0.06); padding: 2px 6px; color: var(--primary);
}

/* ── Status bar ──────────────────────────────────────────────── */
#status-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; font-size: 13px; color: var(--text-dim); min-height: 36px;
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--primary);
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 12px; font-size: 12px; color: var(--text-dim);
}
.last-refresh { font-size: 12px; color: var(--text-dim); }

/* ── Two-tier Tab Nav ───────────────────────────────────────── */
.tab-nav { padding: 10px 0 0; }
/* Top tier — group pills */
.tab-group-bar {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-bottom: 6px;
}
.tab-group-btn {
  font-family: 'Montserrat', var(--font-ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 16px; border-radius: 6px;
  color: var(--text-dim); background: transparent;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.tab-group-btn:hover { color: var(--text-bright); background: var(--surface); }
.tab-group-btn.active {
  color: var(--primary); background: var(--surface);
  border-color: var(--border2); font-weight: 700;
}
:root[data-theme="dark"] .tab-group-btn.active {
  background: rgba(213, 0, 50, 0.14);
  border-color: var(--primary);
  color: #fff;
}
/* Bottom tier — sub-tabs of the active group */
.tab-subnav {
  display: flex; align-items: flex-end;
  border-bottom: 2px solid var(--border2);
}
.tab-group { display: flex; }
/* Legacy bits no longer rendered, kept harmless if any markup still uses them */
.tab-group-label, .tab-group-sep { display: none; }
.tab-group-tabs { display: flex; }
.tab {
  padding: 7px 13px; font-size: 12px; font-weight: 600;
  color: var(--text-dim); cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; transition: all 0.15s;
  white-space: nowrap; user-select: none;
  margin-bottom: -2px;
  font-family: 'Montserrat', var(--font-ui);
}
.tab .tab-icon { margin-right: 5px; }
.tab:hover { color: var(--primary); background: var(--surface); border-color: var(--border2); }
.tab.active {
  background: var(--surface); color: var(--primary);
  border-color: var(--border2); border-bottom-color: var(--surface);
  font-weight: 700;
}
.tab.tab-loading { opacity: 0.6; pointer-events: none; cursor: default; }
.tab.tab-loading .tab-icon { font-size: 0; display: inline-flex; align-items: center; margin-right: 5px; }
.tab.tab-loading .tab-icon::after {
  content: ''; display: inline-block;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--border2); border-top-color: var(--text-dim);
  animation: spin 0.7s linear infinite;
}

.tab-panel { display: none; padding-top: 24px; }
.tab-panel.active { display: block; }

/* ── Section headers ─────────────────────────────────────────── */
.section-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.section-title {
  font-family: 'Montserrat', var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
  border-left: 3px solid var(--primary); padding-left: 8px;
}
.section-sub { font-size: 12px; color: var(--text-dim); }

/* ── AI Service Status bar (Insights tab) ─────────────────────── */
.ai-status-bar {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border2);
  padding: 6px 14px; margin-bottom: 20px; border-radius: 6px;
  font-size: 12px; box-shadow: var(--shadow);
}
.ai-status-bar .ai-status-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
}
.ai-status-bar .ai-status-divider {
  width: 1px; height: 14px; background: var(--border2);
}
.ai-status-state { display: inline-flex; align-items: center; gap: 8px; }
.ai-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim); transition: background 0.2s, box-shadow 0.2s;
}
.ai-status-state[data-state="ok"]    .ai-status-dot { background: var(--green); box-shadow: 0 0 6px rgba(0,138,87,.55); }
.ai-status-state[data-state="warn"]  .ai-status-dot { background: var(--amber); box-shadow: 0 0 6px rgba(180,83,9,.55); }
.ai-status-state[data-state="error"] .ai-status-dot { background: var(--red);   box-shadow: 0 0 6px rgba(213,0,50,.55); }
.ai-status-text { font-weight: 600; color: var(--text-bright); }
.ai-status-sub  { color: var(--text-dim); font-size: 11px; }

/* ── Metric grid & cards ─────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 28px; }

.metric-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 20px;
  box-shadow: var(--shadow); position: relative; overflow: hidden; transition: box-shadow 0.15s;
}
.metric-card:hover { box-shadow: var(--shadow-md); }
.metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-color, var(--border2));
}
.metric-card.status-good    { --accent-color: var(--success); }
.metric-card.status-warn    { --accent-color: var(--warning); }
.metric-card.status-alert   { --accent-color: var(--primary); }
.metric-card.status-info    { --accent-color: var(--info); }
.metric-card.status-unknown { --accent-color: var(--border2); }

.metric-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
.metric-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text-bright); line-height: 1; margin-bottom: 4px; }
.metric-value.null-val { font-size: 20px; color: var(--text-muted); }
.metric-unit  { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.metric-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.metric-goal { font-size: 11px; color: var(--text-dim); }
.metric-goal span { color: var(--text); font-weight: 600; }

.status-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
}
.status-badge.good    { background: #d4edda; color: var(--success); }
.status-badge.warn    { background: #fff3cd; color: #856404; }
.status-badge.alert   { background: #f8d7da; color: var(--primary); }
.status-badge.info    { background: #d1ecf1; color: var(--info-hover); }
.status-badge.unknown { background: var(--surface2); color: var(--slate); border: 1px solid var(--border2); }

.metric-desc  { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border2); }
.metric-note  { font-size: 10px; color: var(--text-dim); margin-top: 4px; font-style: italic; }
.bug-breakdown { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border2); border-collapse: collapse; width: 100%; }
.bug-breakdown td { padding: 1px 4px; }
.bug-breakdown-lbl { font-size: 10px; color: var(--text-dim); padding-right: 6px !important; white-space: nowrap; }
.bug-breakdown-chip { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-align: center; min-width: 22px; cursor: default; }
.metric-2025  { font-size: 10px; color: var(--primary); margin-top: 4px; }

/* ── Drill-down card affordance ──────────────────────────────── */
.metric-card.drillable { cursor: pointer; }
.metric-card.drillable:hover .metric-drill-hint { opacity: 1; }
.metric-drill-hint {
  font-size: 10px; color: var(--primary); font-weight: 600;
  letter-spacing: 0.03em; margin-top: 6px; opacity: 0; transition: opacity 0.15s;
  text-transform: uppercase;
}

/* ── Drill-down drawer ───────────────────────────────────────── */
.drill-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 1000; cursor: pointer;
}
.drill-overlay.open { display: block; }
.drill-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(700px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 1001; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.drill-drawer.open { transform: translateX(0); }
.drill-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border2); flex-shrink: 0;
}
.drill-title    { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.drill-subtitle { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.drill-close {
  background: none; border: none; cursor: pointer; padding: 2px 8px;
  font-size: 20px; color: var(--text-dim); line-height: 1; flex-shrink: 0;
}
.drill-close:hover { color: var(--text); }
.drill-copy-btn {
  font-size: 11px; padding: 4px 10px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); font-family: var(--font-ui); white-space: nowrap;
}
.drill-copy-btn:hover { background: var(--surface3, var(--surface)); color: var(--text); }
.drill-table tbody tr.drill-row-clickable { cursor: pointer; }
.drill-table tbody tr.drill-row-clickable:hover { background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); }
.drill-body  { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.drill-loading { display: flex; align-items: center; gap: 10px; padding: 32px 0; color: var(--text-dim); font-size: 13px; }
.drill-empty   { padding: 32px 0; color: var(--text-dim); font-size: 13px; text-align: center; }
.drill-count   { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }

/* ── Drill-down: by-team breakdown panel ─────────────────────── */
.team-breakdown {
  border: 1px solid var(--border2); background: var(--surface2);
  padding: 10px 12px 4px; margin-bottom: 16px;
}
.team-breakdown .tb-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.tb-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--text-bright); }
.tb-sub   { font-size: 10px; color: var(--text-dim); }
.tb-clear {
  margin-left: auto; font-size: 10px; padding: 2px 8px; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text-dim); font-family: var(--font-ui); border-radius: 4px;
}
.tb-clear:hover { color: var(--text); }
/* Measured on the live WIP drill: 598 items resolved to 46 teams. Uncapped that
   is ~1000px of panel above the item list. Scrolled rather than truncated to a
   top-N — every team stays clickable, including the small ones someone is
   looking for precisely because they are small. */
.tb-scroll { max-height: 240px; overflow-y: auto; }
.tb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tb-table tr.tb-row { cursor: pointer; }
.tb-table tr.tb-row:hover { background: var(--blue-light); }
.tb-table tr.tb-row.active { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tb-table tr.tb-row.active .tb-team { font-weight: 700; color: var(--text-bright); }
.tb-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tb-table tr:last-child td { border-bottom: none; }
.tb-table td.num { font-family: var(--font-mono); text-align: right; width: 56px; }
.tb-team { color: var(--text); max-width: 260px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
/* Unowned area paths are a gap in attribution, not a team — muted so the row
   is not read as one of the delivery teams it is listed beside. */
.tb-table tr.unowned .tb-team { color: var(--text-dim); font-style: italic; }
.tb-share { width: 45%; position: relative; white-space: nowrap; }
.tb-bar {
  display: inline-block; height: 8px; background: var(--primary);
  opacity: 0.55; vertical-align: middle; max-width: calc(100% - 46px);
}
.tb-table tr.unowned .tb-bar { background: var(--text-dim); opacity: 0.4; }
.tb-pct { font-family: var(--font-mono); font-size: 10px;
          color: var(--text-dim); margin-left: 6px; }

.drill-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.drill-table thead th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 6px 10px; background: var(--table-header);
  border-bottom: 1px solid var(--border2); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.drill-table thead th:hover { color: var(--text); }
.drill-table thead th.sort-asc::after  { content: ' ↑'; }
.drill-table thead th.sort-desc::after { content: ' ↓'; }
.drill-table tbody tr:nth-child(even) { background: var(--surface2); }
.drill-table tbody tr:hover { background: var(--blue-light); }
.drill-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text);
  vertical-align: top; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drill-table td.num { font-family: var(--font-mono); text-align: right; }
.drill-table td a { color: var(--primary); text-decoration: none; }
.drill-table td a:hover { text-decoration: underline; }

/* ── Summary row ─────────────────────────────────────────────── */
.summary-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; }
.summary-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px 16px; text-align: center; box-shadow: var(--shadow);
  border-top: 3px solid var(--primary);
}
.summary-card .s-value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--primary); display: block;
}
.summary-card .s-label    { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.summary-card .s-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* ── WIP by board column ─────────────────────────────────────── */
.wip-col-grid  { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--border2); }
.wip-col-item  { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 7px 10px;
                  background: var(--surface2); border: 1px solid var(--border2); }
.wip-col-done  { opacity: 0.45; }
.wip-col-count { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--amber); }
.wip-col-name  { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; text-align: center; }

/* ── Tables ──────────────────────────────────────────────────── */
.project-table-wrap { border: 1px solid var(--border2); box-shadow: var(--shadow); margin-bottom: 28px; background: var(--surface); overflow-x: auto; }
/* Stale-while-loading: keep the table visible but dimmed during a period refresh */
.project-table-wrap.refreshing { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--table-header); padding: 10px 16px;
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text);
  border-bottom: 2px solid var(--border2); white-space: nowrap;
}
thead th[data-sort] {
  cursor: pointer; user-select: none;
}
thead th[data-sort]:hover { background: var(--border2); }
thead th[data-sort]::after { content: ' ⇅'; opacity: 0.3; font-size: 10px; }
thead th.sort-asc::after  { content: ' ▲'; opacity: 1; color: var(--primary); }
thead th.sort-desc::after { content: ' ▼'; opacity: 1; color: var(--primary); }
thead th .sort-priority   { font-size: 9px; font-weight: 700; color: var(--primary); background: rgba(213,0,50,.1); border-radius: 3px; padding: 0 3px; margin-left: 2px; vertical-align: super; }
tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border2); font-family: var(--font-mono); vertical-align: middle; }
/* Compact layout for the dense 12-column Developer table */
#dev-table { font-size: 12px; }
#dev-table thead th { padding: 8px 8px; }
#dev-table thead th.dev-col-filter-row th { padding: 4px 6px; }
#dev-table tbody td { padding: 7px 8px; font-size: 12px; }
#dev-table .col-filter { font-size: 11px; padding: 3px 5px; width: 100%; box-sizing: border-box; }
#dev-table td:first-child, #dev-table th:first-child { min-width: 140px; max-width: 190px; }
#dev-table td:nth-child(2), #dev-table th:nth-child(2) { min-width: 100px; max-width: 150px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--row-hover); }
tbody tr.dev-org-header:hover td  { background: #fbcfd8; }
tbody tr.dev-team-header:hover td { background: var(--surface3, var(--surface2)); }
.td-project { font-family: var(--font-ui); font-weight: 600; color: var(--text-bright); }
.td-null     { color: var(--text-muted); }
.td-null-ok  { color: var(--text-dim); }
.td-good     { color: var(--success); }
.td-warn     { color: #856404; }
.td-alert    { color: var(--primary); }

/* ── Legend ──────────────────────────────────────────────────── */
.legend { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.legend-dot { width: 8px; height: 8px; }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  margin-top: 32px; padding: 14px 28px;
  border-top: 2px solid var(--primary);
  background: var(--header-bg);
  font-size: 11px; color: #AAAAAA;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ── Form controls ───────────────────────────────────────────── */
select {
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-ui); font-size: 13px;
  padding: 6px 12px; cursor: pointer; outline: none;
}
select:focus { border-color: var(--primary); }

input[type="text"] {
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-ui); font-size: 13px;
  padding: 6px 12px; outline: none;
}
input[type="text"]:focus { border-color: var(--primary); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  padding: 7px 18px; font-family: 'Montserrat', var(--font-ui);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; outline: none;
  transition: background 0.15s, border-color 0.15s; letter-spacing: 0.02em;
}
.btn-primary {
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color: #fff; border-color: var(--primary);
}
.btn-primary:hover { background: linear-gradient(to bottom, var(--primary), var(--primary-hover)); border-color: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
:root[data-theme="dark"] .btn-primary {
  background: rgba(213, 0, 50, 0.12);
  border: 1px solid var(--primary);
  color: #fff;
}
:root[data-theme="dark"] .btn-primary:hover {
  background: rgba(213, 0, 50, 0.22);
  border-color: var(--primary);
}
.btn-ghost {
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ── Release Planning — unified controls strip ──────────────────────────────
   One strip, two zones: LEFT holds the persistent segmented toggles (view +
   grouping) that reshape what you see; RIGHT holds the action buttons that do
   something, which swap with the active view. A quiet count ends the left zone
   and an optional status sub-line sits below. */
.rp-controls-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-strip-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-strip-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rp-strip-right .btn { padding: 5px 12px; font-size: 12px; }
.rp-strip-count { font-size: 12px; color: var(--text-dim); }
.rp-strip-subline { margin-top: 8px; font-size: 12px; color: var(--text-dim); letter-spacing: .03em; }

/* Segmented control (view + grouping toggles). */
.rp-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 6px; overflow: hidden; }
.rp-seg-btn {
  padding: 5px 14px; font-family: 'Montserrat', var(--font-ui);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--surface); color: var(--text-dim);
  border: none; border-left: 1px solid var(--border2);
  transition: background .12s, color .12s;
}
.rp-seg-btn:first-child { border-left: none; }
.rp-seg-btn:hover:not(.active) { color: var(--text); background: var(--surface2); }
.rp-seg-btn.active { background: var(--primary); color: #fff; }
:root[data-theme="dark"] .rp-seg-btn.active {
  background: rgba(213, 0, 50, 0.18); color: #fff;
  box-shadow: inset 0 0 0 1px var(--primary);
}
:root[data-theme="dark"] .rp-seg-btn:first-child.active { border-radius: 5px 0 0 5px; }
:root[data-theme="dark"] .rp-seg-btn:last-child.active  { border-radius: 0 5px 5px 0; }

/* ── Capacity group-by radio selector ───────────────────────────── */
.cap-radio-group { display:flex; border:1px solid var(--border2); border-radius:6px; overflow:hidden; }
.cap-radio-opt { display:flex; align-items:center; cursor:pointer; }
.cap-radio-opt input[type=radio] { display:none; }
.cap-radio-opt span { display:block; padding:4px 12px; font-size:11px; font-weight:600; color:var(--text-dim); transition:background 0.12s,color 0.12s; white-space:nowrap; }
.cap-radio-opt:not(:first-child) span { border-left:1px solid var(--border2); }
.cap-radio-opt:hover span { color:var(--text); background:var(--surface2); }
.cap-radio-opt input[type=radio]:checked + span { background:var(--primary); color:#fff; border-color:var(--primary); }
:root[data-theme="dark"] .cap-radio-opt input[type=radio]:checked + span {
  background: rgba(213, 0, 50, 0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--primary);
}
/* Round the outer corners of the first/last spans so the dark-mode inset
   outline follows the rounded container instead of drawing a square. */
:root[data-theme="dark"] .cap-radio-opt:first-child span { border-radius: 5px 0 0 5px; }
:root[data-theme="dark"] .cap-radio-opt:last-child  span { border-radius: 0 5px 5px 0; }

/* ── Capacity show/hide filter buttons ──────────────────────────── */
.cap-filter-btn { padding:4px 10px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid var(--border2); border-radius:4px; background:var(--surface); color:var(--text-dim); transition:background 0.12s,color 0.12s,border-color 0.12s; white-space:nowrap; }
.cap-filter-btn:hover { border-color:var(--primary); color:var(--text); }
.cap-filter-btn.active { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.cap-filter-btn:not(.active) { opacity:0.45; }

/* ── Team Accordion ──────────────────────────────────────────── */
.teams-container { display:flex;flex-direction:column;gap:4px;margin-bottom:28px; }
.team-row { background:var(--surface);border:1px solid var(--border2);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow 0.15s; }
.team-row:hover,.team-row.expanded { box-shadow:var(--shadow-md); }
.team-row.expanded { border-left: 3px solid var(--primary); }
.team-row-header { display:grid;grid-template-columns:26px 170px 80px 80px 90px 80px 80px 90px 80px 80px 110px 96px;align-items:center;height:64px;padding:0 18px 0 16px;cursor:pointer;user-select:none;gap:0; }
.team-row-header:hover { background:var(--surface2); }
.trh-arrow { color:var(--text-dim);font-size:10px;transition:transform 0.2s; }
.team-row.expanded .trh-arrow { transform:rotate(90deg); }
.trh-name-wrap { padding-right:8px; }
.trh-team-name { font-weight:700;font-size:14px;color:var(--text-bright);font-family:'Montserrat',var(--font-ui); }
.trh-team-meta { font-size:10px;color:var(--text-dim);margin-top:1px; }
.trh-team-lead { font-size:10px;color:var(--amber,#f6ad55);margin-top:2px;font-weight:500; }
/* Pod panels sit under the team that draws on them; the tag names the owner so
   an indent alone never has to carry the meaning. See lib/pods.js. */
.trh-pod-tag { display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;
  font-size:9px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-dim);background:var(--border2);vertical-align:middle; }
.trh-cell-remaining .trh-val { font-size:13px; }
.trh-remaining-of { font-size:9px;color:var(--text-dim);margin-top:1px;font-family:var(--font-mono); }
.trh-remaining-pct { font-size:9px;color:var(--text-dim);margin-top:1px;font-family:var(--font-mono); }
.trh-remaining-bar-bg { width:100%;height:3px;background:var(--border2);border-radius:2px;margin-top:3px;overflow:hidden; }
.trh-remaining-bar-fill { height:100%;background:var(--primary);border-radius:2px;transition:width 0.3s; }
.trh-cell { padding:0 8px;border-left:1px solid var(--border2);height:100%;display:flex;flex-direction:column;justify-content:center; }
.trh-val { font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text-bright);line-height:1; }
.trh-lbl { font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-top:3px; }
.trh-spark { padding:0 10px;border-left:1px solid var(--border2);height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px; }
.trh-spark-lbl { font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap; }
.td-up-txt   { color:#16a34a;font-weight:700; }
.td-down-txt { color:#dc2626;font-weight:700; }
.trend-delta-pill { font-size:9px;font-family:var(--font-mono);font-weight:700;padding:1px 5px;border-radius:10px; }
.trend-delta-pill.td-up   { color:#16a34a;background:rgba(22,163,74,0.12); }
.trend-delta-pill.td-down { color:#dc2626;background:rgba(220,38,38,0.12); }
.team-trend-panel { padding:10px 18px 8px;border-bottom:1px solid var(--border2); }
.team-charts-row { display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border2); }
.team-chart-panel { padding:10px 18px 8px; }
.team-chart-panel + .team-chart-panel { border-left:1px solid var(--border2); }
.team-trend-heading { font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;display:flex;align-items:center;gap:10px; }
.bar-tooltip { position:fixed;pointer-events:none;z-index:9999;display:none;align-items:center;gap:8px;padding:5px 10px;background:var(--surface);border:1px solid var(--border2);border-radius:4px;font-size:11px;font-family:var(--font-mono);box-shadow:var(--shadow-md); }
.bar-tt-week { color:var(--text-dim); }
.bar-tt-val  { color:var(--text-bright);font-weight:700; }
.bar-tt-avg   { color:var(--text-dim);font-size:10px;border-left:1px solid var(--border2);padding-left:8px; }
.bar-tt-bench { color:rgba(148,163,184,0.8);font-size:10px;border-left:1px solid var(--border2);padding-left:8px; }
.team-col-headers { display:grid;grid-template-columns:26px 170px 80px 80px 90px 80px 80px 90px 80px 80px 110px 70px;padding:0 18px 0 16px;margin-bottom:4px;gap:0; }
.tch { font-size:9px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-dim);padding:0 8px; }
.tch:first-child,.tch:nth-child(2) { padding:0; }
.tch-sort { cursor:pointer;user-select:none;white-space:nowrap; }
.tch-sort:hover { color:var(--text-bright); }
.tch-sort.tch-active { color:var(--primary); }
.team-dev-table-wrap { display:none;border-top:1px solid var(--border2);overflow-x:auto;background:var(--surface2); }
.team-row.expanded .team-dev-table-wrap { display:block; }
.tdtable { width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed; }
.tdtable thead tr { display:grid;grid-template-columns:2fr repeat(8,1fr); }
.tdtable tbody tr { display:grid;grid-template-columns:2fr repeat(8,1fr); }
.tdtable[data-tester-team] thead tr { grid-template-columns:2fr repeat(4,1fr); }
.tdtable[data-tester-team] tbody tr { grid-template-columns:2fr repeat(4,1fr); }
.tdtable thead th { background:var(--table-header);padding:7px 14px;text-align:left;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);border-bottom:2px solid var(--border2);white-space:nowrap; }
.tdtable thead th[data-sort] { cursor:pointer; user-select:none; }
.tdtable thead th[data-sort]:hover { color:var(--text-bright); }
.tdtable thead th:not(:first-child) { text-align:center; }
.tdtable tbody td { padding:8px 14px;border-bottom:1px solid var(--border2);vertical-align:middle; }
.tdtable tbody tr:last-child td { border-bottom:none; }
.tdtable tbody tr:hover td { background:var(--surface); }
.tdtable tbody td:not(:first-child) { font-family:var(--font-mono);font-size:12px;text-align:center; }
.dname { font-weight:600;color:var(--text-bright);white-space:nowrap; }

/* ── Active PRs column + slide-in drawer ──────────────────────────── */
.trh-active-val { color:var(--cyan,#22b8cf);font-weight:700; }
.trh-active-clickable { cursor:pointer;border-radius:4px;transition:background .12s; }
.trh-active-clickable:hover { background:var(--surface); }
.trh-active-clickable:hover .trh-lbl { color:var(--cyan,#22b8cf); }

.apr-overlay { display:none;position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,0.45); }
.apr-overlay.open { display:block; }
.apr-panel { position:absolute;top:0;right:0;height:100%;width:560px;max-width:94vw;background:var(--surface);border-left:1px solid var(--border2);box-shadow:-4px 0 16px rgba(0,0,0,0.3);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .18s ease-out; }
.apr-overlay.open .apr-panel { transform:translateX(0); }
.apr-panel-head { position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border2);background:var(--surface); }
.apr-panel-title { font-size:15px;font-weight:800;color:var(--text-bright); }
.apr-panel-sub { font-size:11px;color:var(--text-dim);margin-top:2px; }
.apr-close { background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--text-dim); }
.apr-close:hover { color:var(--text-bright); }
.apr-panel-body { padding:14px 18px;overflow-y:auto; }

.apr-empty { font-size:12px;color:var(--text-dim); }
.apr-list { display:grid;gap:6px; }
.apr-row { padding:8px 11px;border:1px solid var(--border2);background:var(--surface2);border-radius:4px; }
.apr-title { font-size:13px;color:var(--text-bright);font-weight:600; }
.apr-title a { color:var(--text-bright);text-decoration:none; }
.apr-title a:hover { color:var(--cyan,#22b8cf);text-decoration:underline; }
.apr-id { color:var(--text-dim);font-weight:500;font-size:11px;font-family:var(--font-mono); }
.apr-meta { font-size:11px;color:var(--text-dim);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.apr-age-old { color:#e8a13a;font-weight:600; }
.apr-chip { font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:1px 6px;border-radius:3px; }
.apr-draft { background:#3a3f4b;color:#c8cdd6; }
.apr-approved { background:#16351f;color:#4ade80; }
.apr-waiting { background:#3a2f12;color:#fbbf24; }

/* ── Remaining Work view ──────────────────────────────────────────── */
.rw-table { width:100%;border-collapse:collapse;font-size:12px; }
.rw-table thead th { background:var(--table-header);padding:7px 12px;text-align:left;font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);border-bottom:2px solid var(--border2);white-space:nowrap; }
.rw-table thead th[data-sort] { cursor:pointer;user-select:none; }
.rw-table thead th[data-sort]:hover { color:var(--text-bright); }
.rw-table tbody td { padding:8px 12px;border-bottom:1px solid var(--border2);vertical-align:middle; }
.rw-parent-row td { background:var(--surface2); }
.rw-parent-row:hover td { background:var(--surface3,var(--surface)); }
.rw-task-row td { background:var(--bg); }
.rw-task-row:hover td { background:var(--surface); }
.rw-title-cell { min-width:260px;max-width:420px; }
.rw-task-title { padding-left:28px !important; }
.rw-expand-btn { display:inline-block;width:14px;font-size:9px;color:var(--text-dim);margin-right:4px;vertical-align:middle;line-height:1; }
.rw-task-indent { color:var(--text-muted);margin-right:6px;font-size:11px; }
.rw-item-link { color:var(--text-bright);text-decoration:none;font-weight:500; }
.rw-item-link:hover { color:var(--primary);text-decoration:underline; }
.rw-meta { font-size:10px;color:var(--text-dim);margin-left:8px; }
.rw-badge { 
  display: inline-block; font-size: 10px; font-weight: 600; 
  padding: 2px 6px; margin-left: 8px; border-radius: 3px; white-space: nowrap; 
}
.rw-badge-warn { 
  background: rgba(249, 115, 22, 0.12); color: #f97316; 
  border: 1px solid rgba(249, 115, 22, 0.25); 
}
.rw-badge-ok { 
  background: rgba(34, 197, 94, 0.12); color: #22c55e; 
  border: 1px solid rgba(34, 197, 94, 0.25); 
}
.rw-state { font-size:11px;color:var(--text-dim);white-space:nowrap; }

/* ── Scorecard modal rendered markdown ─────────────────────────── */
.scorecard-md { font-size:13px; line-height:1.6; color:var(--text); }
.scorecard-md h1 { font-size:17px; font-weight:700; color:var(--text-bright); margin:0 0 14px; }
.scorecard-md h2 { font-size:15px; font-weight:700; color:var(--text-bright); margin:18px 0 10px; border-bottom:1px solid var(--border2); padding-bottom:6px; }
.scorecard-md h3 { font-size:13px; font-weight:600; color:var(--text-bright); margin:14px 0 6px; }
.scorecard-md p  { margin:4px 0 8px; }
.scorecard-md ul { margin:4px 0 10px; padding-left:20px; }
.scorecard-md li { margin-bottom:3px; }
.scorecard-md strong { color:var(--text-bright); font-weight:600; }
.scorecard-md code   { background:var(--surface2); border:1px solid var(--border2); border-radius:3px; padding:1px 5px; font-size:12px; }
.scorecard-md table  { width:100%; border-collapse:collapse; margin:8px 0 14px; }
.scorecard-md th     { text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); padding:6px 10px; border-bottom:2px solid var(--border2); }
.scorecard-md td     { padding:7px 10px; border-bottom:1px solid var(--border2); vertical-align:top; }
.scorecard-md tr:last-child td { border-bottom:none; }
.scorecard-md td:first-child   { font-weight:500; color:var(--text-bright); white-space:nowrap; width:200px; }
.rw-assignee { font-size:11px;color:var(--text-dim);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis; }
.rw-hours { font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-bright);text-align:right;white-space:nowrap; }
.rw-project { font-size:10px;color:var(--text-dim);white-space:nowrap; }
.rw-table .rw-team-header td { background:#c42200;padding:0;cursor:pointer;border-bottom:1px solid rgba(0,0,0,0.3); }
.rw-table .rw-team-header:hover td { filter:brightness(0.82); }
:root[data-theme="dark"] .rw-table .rw-team-header td       { background: #2a1820; border-bottom-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .rw-table .rw-team-header:hover td { filter: brightness(1.25); }
.rw-team-hdr-inner { display:flex;align-items:center;gap:8px;padding:5px 12px;flex-wrap:wrap;background:linear-gradient(to bottom,rgba(255,255,255,0.13) 0%,transparent 50%,rgba(0,0,0,0.16) 100%); }
.rw-team-caret { font-size:9px;color:rgba(255,255,255,0.6);flex-shrink:0;width:10px;text-align:center; }
.rw-team-name { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.4); }
.rw-team-count { font-size:9px;color:rgba(255,255,255,0.6); }
.rw-team-hours { font-size:10px;font-family:var(--font-mono);color:rgba(255,255,255,0.9);font-weight:600; }
.rw-team-task-hrs { font-size:10px;font-family:var(--font-mono);color:rgba(255,255,255,0.5);font-weight:600; }
.rw-team-done-hrs { opacity:0.75;border-right:1px solid rgba(255,255,255,0.2);padding-right:8px; }
.rw-team-pct-pill { margin-left:auto;display:inline-flex;align-items:baseline;gap:2px;background:rgba(0,0,0,0.28);border-radius:20px;padding:2px 9px;box-shadow:0 1px 3px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.12),inset 0 -1px 0 rgba(0,0,0,0.2); }
.rw-team-pct-num { font-family:var(--font-mono);font-size:12px;font-weight:800;color:#fff;letter-spacing:-0.02em;text-shadow:0 1px 2px rgba(0,0,0,0.4); }
.rw-team-pct-unit { font-size:8px;font-weight:600;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.06em; }
.rw-drag-handle { font-size:13px;color:rgba(255,255,255,0.45);cursor:grab;flex-shrink:0;line-height:1;user-select:none;padding:0 2px; }
.rw-drag-handle:active { cursor:grabbing; }
.rw-team-header[draggable="true"] { cursor:default; }
.rw-team-header.rw-dragging td { opacity:0.45; }
.rw-team-header.rw-drag-above td { box-shadow:inset 0 3px 0 #fff; }
.rw-team-header.rw-drag-below td { box-shadow:inset 0 -3px 0 #fff; }

/* Delivery/Teams accordion drag-to-reorder */
/* When a manager is active, the row gains an extra leading column for the drag handle. */
body.manager-active .team-row-header {
  grid-template-columns: 18px 26px 170px 80px 80px 90px 80px 80px 90px 80px 80px 110px 96px;
}
body.manager-active .team-col-headers {
  grid-template-columns: 18px 26px 170px 80px 80px 90px 80px 80px 90px 80px 80px 110px 70px;
}
body.manager-active .team-col-headers::before { content: ''; }
.tab-drag-handle {
  display:flex; align-items:center; justify-content:center;
  height:100%; font-size:14px; line-height:1;
  color:var(--text-dim); cursor:grab; user-select:none;
}
.tab-drag-handle:active { cursor:grabbing; }
.team-row-header[draggable="true"] { cursor:default; }
.team-row-header.tab-dragging { opacity:0.45; }
.team-row-header.tab-drag-above { box-shadow:inset 0 3px 0 var(--primary); }
.team-row-header.tab-drag-below { box-shadow:inset 0 -3px 0 var(--primary); }
/* Tab bar styles for remaining work section */
.rw-tab-bar td { 
  background: var(--surface2); 
  border-bottom: 1px solid var(--border2); 
  padding: 6px 12px !important; 
}
.rw-tab-btn { 
  background: var(--surface); 
  border: 1px solid var(--border2); 
  color: var(--text-dim); 
  font-size: 10px; 
  font-weight: 600; 
  padding: 4px 12px; 
  margin-right: 6px; 
  cursor: pointer; 
  transition: all 0.15s; 
  border-radius: 3px; 
}
.rw-tab-btn:hover { 
  color: var(--text-bright); 
  border-color: var(--primary); 
}
.rw-tab-btn.rw-tab-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
:root[data-theme="dark"] .rw-tab-btn.rw-tab-active {
  background: rgba(213, 0, 50, 0.18);
  color: #fff;
  border-color: var(--primary);
}
:root[data-theme="dark"] .rw-tab-btn.rw-tab-active:hover {
  background: rgba(213, 0, 50, 0.28);
}

/* Pagination styles for remaining work section */
.rw-pagination-row td {
  padding: 0 !important;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.rw-pagination {
  background: var(--surface2);
  border-top: 1px solid var(--border2);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
}
.rw-pagination-info {
  font-family: var(--font-mono);
  color: var(--text-dim);
}
.rw-pagination-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rw-page-btn {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 3px;
  min-width: 60px;
}
.rw-page-btn:hover:not(:disabled) {
  color: var(--text-bright);
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.rw-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rw-page-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-bright);
  white-space: nowrap;
}

/* Status section dividers inside expanded team rows */
.rw-status-header td { background:var(--surface2,rgba(255,255,255,0.04));padding:4px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);border-bottom:1px solid var(--border2); }
.rw-pct-wrap { display:flex;align-items:center;gap:7px;min-width:110px; }
.rw-pct-bar-bg { flex:1;height:7px;background:var(--border2);border-radius:4px;overflow:hidden; }
.rw-pct-bar-fill { height:100%;border-radius:4px;transition:width .3s; }
.rw-pct-label { font-family:var(--font-mono);font-size:12px;font-weight:700;width:34px;text-align:right;flex-shrink:0; }
/* Type pills */
.rw-type-pill { display:inline-block;font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;white-space:nowrap; }
.rw-type-pbi      { background:rgba(99,102,241,0.12);color:#818cf8;border:1px solid rgba(99,102,241,0.25); }
.rw-type-bug      { background:rgba(239,68,68,0.10);color:#f87171;border:1px solid rgba(239,68,68,0.25); }
.rw-type-storybug { background:rgba(249,115,22,0.10);color:#fb923c;border:1px solid rgba(249,115,22,0.25); }
.rw-type-story    { background:rgba(16,185,129,0.10);color:#34d399;border:1px solid rgba(16,185,129,0.25); }
.rw-type-task     { background:rgba(100,116,139,0.12);color:#94a3b8;border:1px solid rgba(100,116,139,0.2); }
.rw-type-other    { background:rgba(100,116,139,0.10);color:var(--text-dim);border:1px solid var(--border2); }
.demail { font-size:10px;color:var(--text-dim);margin-top:1px; }
.cg { color:var(--success) !important; }
.cw { color:#856404 !important; }
.ca { color:var(--primary) !important; }
.cx { color:var(--slate) !important; }

.team-subnav {
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text-dim);font-family:'Montserrat',var(--font-ui);
  font-size:12px;font-weight:600;padding:7px 16px;
  cursor:pointer;transition:all 0.15s; border-radius:0;
}
.team-subnav:hover { border-color:var(--primary);color:var(--primary); }
.team-subnav.active {
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color:#fff;border-color:var(--primary);
}
:root[data-theme="dark"] .team-subnav.active {
  background: rgba(213, 0, 50, 0.18);
  color: #fff;
  border-color: var(--primary);
}
:root[data-theme="dark"] .team-subnav.active:hover {
  background: rgba(213, 0, 50, 0.28);
  color: #fff;
}

/* ── Trend chart ─────────────────────────────────────────────── */
.compare-bar-wrap { display:flex;align-items:center;gap:8px; }
.compare-bar { height:6px;flex-shrink:0;transition:width 0.4s; }
.compare-val { font-family:var(--font-mono);font-size:11px;white-space:nowrap; }
#trend-chart-wrap { background:var(--surface);border:1px solid var(--border2);padding:20px;margin-bottom:28px;box-shadow:var(--shadow); }
#trend-canvas { width:100%;height:200px;display:block; }
.trend-legend { display:flex;flex-wrap:wrap;gap:12px;margin-top:12px; }
.trend-legend-item { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);cursor:pointer; }
.trend-legend-dot { width:10px;height:10px;flex-shrink:0; }

/* ── AI skill score badge & detail row ────────────────────────── */
.score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 2px 9px; cursor: pointer;
  transition: opacity 0.15s; white-space: nowrap; border: none;
}
.score-badge:hover { opacity: 0.75; }
.score-s  { background: #d4edda; color: var(--success); }
.score-a  { background: #d1ecf1; color: var(--info-hover); }
.score-b  { background: #fff3cd; color: #856404; }
.score-c  { background: #f8d7da; color: var(--primary); }
.score-na { background: var(--surface2); color: var(--slate); border: 1px solid var(--border2); cursor: default; }
:root[data-theme="dark"] .score-s { background: rgba(0,138,87,0.18);   color: #4ade80; }
:root[data-theme="dark"] .score-a { background: rgba(23,162,184,0.18); color: #5bd9e6; }
:root[data-theme="dark"] .score-b { background: rgba(180,83,9,0.20);   color: #fbbf24; }
:root[data-theme="dark"] .score-c { background: rgba(213,0,50,0.20);   color: #ff6b88; }
/* ── Developer detail expand row ─────────────────────────────── */
.dev-name-btn {
  font-family: var(--font-ui); font-weight: 600; color: var(--text-bright);
  white-space: nowrap; pointer-events: none;
}
tr:hover .dev-name-btn { color: var(--primary); }
.dev-name-btn.open  { color: var(--primary); }
.dev-name-btn .dev-caret { display: inline-block; font-size: 9px; margin-right: 4px; transition: transform 0.2s; }
.dev-name-btn.open .dev-caret { transform: rotate(90deg); }
tr.detail-open .dev-caret { transform: rotate(90deg); }
.dev-detail-row td   { padding: 0 !important; border-bottom: 1px solid var(--border2); }
tr.row-expanded td   { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
tr.row-expanded      { outline: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: -1px; }
/* Column filter row */
.dev-col-filter-row th { padding: 3px 4px !important; background: var(--surface2); border-bottom: 2px solid var(--border2); }
.col-filter { width: 100%; box-sizing: border-box; font-size: 10px; padding: 2px 5px; border: 1px solid var(--border2); border-radius: 3px; background: var(--surface); color: var(--text); font-family: var(--font-mono); }
.col-filter:focus { outline: none; border-color: var(--primary); }
.col-filter::placeholder { color: var(--text-muted); font-style: italic; }
.col-filter.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.dev-detail-inner    { background: var(--surface2); }
.dev-detail-grid     { display: grid; grid-template-columns: 260px 1fr; }
.dev-detail-panel    { padding: 14px 16px 16px; }
.dev-detail-panel + .dev-detail-panel { border-left: 1px solid var(--border2); }
.dev-trend-panel { border-top: 1px solid var(--border2); }
.dev-trend-col   { padding: 10px 18px 8px; }
/* Detail row tabs */
/* Column header tooltip */
#col-tip { position: fixed; z-index: 9999; width: 300px; background: #1e2433; color: #e2e8f0; font-size: 12px; line-height: 1.55; padding: 10px 13px; border-radius: 7px; border: 1px solid #334155; box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transition: opacity .12s; white-space: normal; }
#col-tip.visible { opacity: 1; }
#col-tip b { color: #fff; font-weight: 700; display: block; margin-bottom: 4px; }
#col-tip i { color: #94a3b8; font-style: normal; display: block; margin-top: 5px; }
th[data-tip] { cursor: help; }
.dev-detail-tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--border2); background: var(--surface); }
.dev-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 18px; font-size: 12px; font-weight: 500; font-family: var(--font-ui); color: var(--text-dim); cursor: pointer; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.dev-tab-btn:hover  { color: var(--text); }
.dev-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.dev-tab-panel { padding: 14px 16px 16px; }
/* Overview stat cards */
.ov-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.ov-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.ov-card-label  { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-family: var(--font-ui); }
.ov-card-value  { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--text); line-height: 1.2; }
.ov-card-org    { font-size: 9px; color: var(--text-muted); }
.ov-card-score  { display: flex; align-items: center; font-size: 11px; font-family: var(--font-mono); margin-top: 2px; }
.ov-card-weight { font-size: 9px; color: var(--text-muted); }
.ov-section-heading { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-family: var(--font-ui); margin: 12px 0 6px; }
.ov-section-sub     { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 4px; }
.ov-act-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.ov-act-card  { background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 10px 12px; }
.ov-act-card--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ov-act-card--link:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ov-card--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ov-card--link:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ov-act-value { font-size: 22px; font-weight: 700; font-family: var(--font-mono); color: var(--text); line-height: 1.1; }
.ov-act-date  { font-size: 14px; }
.ov-act-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-family: var(--font-ui); margin-top: 3px; }
.ov-act-sub   { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.ov-overall { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border2); padding-top: 10px; }
.ov-overall-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.ov-overall-sub   { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ov-overall-score { font-family: var(--font-mono); font-size: 32px; font-weight: 700; line-height: 1; }
.ov-overall-denom { font-size: 12px; color: var(--text-muted); margin-left: 2px; }
.ov-overall-org   { font-size: 10px; color: var(--text-muted); margin-left: 10px; }
.tester-group-header td { padding:6px 16px 4px; background:var(--primary); border-top:2px solid var(--primary); cursor:pointer; }
.tester-group-caret { font-size:9px; color:rgba(255,255,255,0.7); margin-right:8px; user-select:none; }
.tester-group-name  { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#fff; }
.tester-group-count { font-size:10px; font-weight:400; color:rgba(255,255,255,0.65); margin-left:8px; }
tbody tr.tester-group-header:hover td { background: var(--primary); }
:root[data-theme="dark"] .tester-group-header td           { background: #2a1820; border-top-color: #6b2230; }
:root[data-theme="dark"] tbody tr.tester-group-header:hover td { background: #3a1f28; }
.tester-auto-badge   { font-size:14px; vertical-align:middle; }
.tester-manual-badge { font-size:14px; vertical-align:middle; opacity:0.7; }
.tester-auto-btn {
  background: none; border: 1px solid var(--border2); border-radius: 4px;
  padding: 1px 5px; cursor: pointer; font-size: 13px; opacity: 0.4;
  margin-left: 4px; vertical-align: middle; line-height: 1.4;
  transition: opacity .15s, border-color .15s;
}
.tester-auto-btn:hover  { opacity: 1; border-color: var(--primary); }
.tester-auto-btn.is-automated { opacity: 1; border-color: #0891b2; background: rgba(8,145,178,.1); }
/* PO drill-down */
.po-detail-row td    { padding: 0 !important; border-bottom: 1px solid var(--border2); }
.po-expand-caret     { font-size: 9px; color: var(--text-muted); margin-right: 6px; display: inline-block; transition: transform .15s; user-select: none; }
tr.row-expanded .po-expand-caret { color: var(--primary); }
/* Developer org / team section headers.
   Light mode mirrors the dark-mode treatment: a pale tinted fill with a darker
   red top border, dark red text. (The previous light-mode rule was a solid
   var(--primary) bar with white text, which clashed with everything around it.) */
.dev-org-header td       { padding:8px 16px 4px; background:#fde2e7; border-top:3px solid var(--primary); transition:background 0.15s; }
.dev-org-header.drag-over td { background:color-mix(in srgb,var(--primary) 30%,#fde2e7 70%); outline:2px dashed var(--primary); outline-offset:-3px; }
:root[data-theme="dark"] .dev-org-header td           { background: #2a1820; border-top-color: #6b2230; }
:root[data-theme="dark"] tbody tr.dev-org-header:hover td { background: #3a1f28; }
:root[data-theme="dark"] .dev-org-header.drag-over td { background: #4a2030; outline-color: var(--primary); }

/* Org-header text — dark in light mode (readable on pink), white in dark mode. */
.dev-org-caret           { font-size:9px; color:rgba(0,0,0,0.55); margin-right:8px; user-select:none; }
.dev-org-header          { cursor:pointer; }
.dev-org-name            { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary); }
.dev-org-count           { font-size:10px; font-weight:400; color:rgba(0,0,0,0.55); margin-left:10px; }
.dev-org-drop-hint       { font-size:10px; color:rgba(0,0,0,0.45); margin-left:14px; font-style:italic; opacity:0; transition:opacity 0.15s; }
:root[data-theme="dark"] .dev-org-caret      { color:rgba(255,255,255,0.7); }
:root[data-theme="dark"] .dev-org-name       { color:#fff; }
:root[data-theme="dark"] .dev-org-count      { color:rgba(255,255,255,0.65); }
:root[data-theme="dark"] .dev-org-drop-hint  { color:rgba(255,255,255,0.4); }
.dev-org-header.drag-over .dev-org-drop-hint { opacity:1; }
.dev-team-header td      { padding:4px 16px 3px 28px; background:var(--surface3,var(--surface2)); border-top:1px solid var(--border2); transition:background 0.15s; }
.dev-team-header.drag-over td { background: color-mix(in srgb, var(--primary) 18%, var(--surface2)); outline: 2px dashed var(--primary); outline-offset: -3px; }
.dev-team-name           { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-dim); }
.dev-team-lead           { font-size:10px; color:var(--amber,#f6ad55); margin-left:12px; font-weight:500; }
.dev-team-count          { font-size:10px; font-weight:400; color:var(--text-muted); margin-left:8px; }
tr.dragging              { opacity:0.4; }
.dev-detail-overall { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border2); margin-top: 8px; padding-top: 8px; }
.dev-open-prs { margin-bottom: 14px; }
.dev-detail-section  { margin-bottom: 12px; }
.dev-detail-heading  {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
}
.wip-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border2); font-size: 12px;
}
.wip-item:last-child { border-bottom: none; }
.wip-type-pill {
  font-size: 10px; font-weight: 700; padding: 1px 7px; white-space: nowrap;
  border-radius: 2px; flex-shrink: 0;
}
.wip-type-task  { background: rgba(29,78,216,0.1);  color: #1d4ed8; border: 1px solid rgba(29,78,216,0.2); }
.wip-type-bug   { background: rgba(213,0,50,0.08);  color: var(--primary); border: 1px solid rgba(213,0,50,0.2); }
.wip-type-story { background: rgba(21,128,61,0.08); color: var(--success);  border: 1px solid rgba(21,128,61,0.2); }
.wip-type-other { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border2); }
.wip-title { flex: 1; color: var(--text); font-family: var(--font-ui); }
.wip-title a { color: inherit; text-decoration: none; }
.wip-title a:hover { color: var(--primary); text-decoration: underline; }
.wip-project { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.wip-state   { font-size: 10px; color: var(--text-muted); white-space: nowrap; font-style: italic; }
.wip-skipped-badge { font-size: 10px; font-weight: 600; color: #f59e0b; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.pr-scope-badge    { font-size: 10px; font-weight: 600; color: #6366f1; background: rgba(99,102,241,.1);  border: 1px solid rgba(99,102,241,.3); border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.pr-iter-badge     { color: #0891b2; background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.3); }
.completed-pager-bar { display: flex; align-items: center; gap: 10px; padding: 6px 0 2px; border-top: 1px solid var(--border2); margin-top: 4px; }
.pager-btn { font-size: 11px; padding: 2px 10px; border: 1px solid var(--border2); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; }
.pager-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-info { font-size: 11px; color: var(--text-dim); }
.dev-detail-empty { font-size: 12px; color: var(--text-dim); padding: 8px 0; }

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.po-loading-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border-dim);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes ellipsis {
  0%   { content: '.';   }
  33%  { content: '..';  }
  66%  { content: '...'; }
  100% { content: '.';   }
}
.po-ai-loading {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.po-ai-loading .po-ai-dots::after {
  content: '.';
  animation: ellipsis 1.2s steps(1, end) infinite;
}

/* ── Manager-only elements ───────────────────────────────────── */
.manager-only { display: none !important; }
body.manager-active .manager-only { display: revert !important; }
/* PO mode: data visible, management edit controls hidden */
body.po-active .manager-only { display: none !important; }

/* ── Release-notes-role-only elements (managers, leads, POs, scrum masters) ─ */
.rn-only { display: none !important; }
body.rn-active .rn-only { display: revert !important; }

/* AI-generation-only controls — additionally require a configured provider
   (RELEASE_NOTES_LLM). Hidden when generation is unavailable even if the user
   has the release-notes role; viewing/editing/pushing/exporting stay available. */
.rn-gen-only { display: none !important; }
body.rn-gen-active .rn-gen-only { display: revert !important; }

/* ── Developer Notes ─────────────────────────────────────────── */
.dev-notes-wrap { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; max-width: 720px; }
.dev-note-card { background: var(--surface2, var(--surface)); border: 1px solid var(--border2); border-radius: 6px; padding: 10px 12px; }
.dev-note-mine { border-color: var(--primary); }
.dev-note-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dev-note-author { font-size: 12px; font-weight: 600; color: var(--text); }
.dev-note-date   { font-size: 10px; color: var(--text-dim); }
.dev-note-text   { font-size: 12px; color: var(--text); white-space: pre-wrap; line-height: 1.5; }
.dev-note-textarea { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: inherit; resize: vertical; line-height: 1.5; }
.dev-note-textarea:focus { outline: none; border-color: var(--primary); }
.dev-note-actions { display: flex; gap: 8px; margin-top: 8px; }
.dev-notes-others-heading { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0 2px; }

/* ── Per-project expand row ──────────────────────────────────── */
.proj-name-btn {
  color: var(--text-bright); font-size: 13px; font-weight: 600;
  font-family: var(--font-ui); display: flex; align-items: center; gap: 5px;
  pointer-events: none;
}
tr:hover .proj-name-btn { color: var(--primary); }
.proj-caret { display: inline-block; font-size: 9px; transition: transform 0.2s; color: var(--text-dim); }
.proj-name-btn.open .proj-caret { transform: rotate(90deg); }
.proj-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--border2); }
.proj-detail-inner {
  background: var(--surface2);
  display: flex; gap: 0; padding: 0;
}
.proj-detail-section {
  flex: 1; padding: 14px 18px 16px;
  border-right: 1px solid var(--border2);
}
.proj-detail-section:last-child { border-right: none; }
.proj-detail-heading {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border2);
}
.proj-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.proj-stat { display: flex; flex-direction: column; gap: 1px; }
.proj-stat-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-dim);
}
.proj-stat-val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--text-bright);
}
.proj-stat-val.proj-stat-good { color: #16a34a; }
.proj-stat-val.proj-stat-warn { color: #d97706; }
.proj-stat-val.proj-stat-bad  { color: #dc2626; }
.proj-stat-note { font-size: 10px; color: var(--text-muted); grid-column: 1 / -1; margin-top: 2px; }

.skill-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--border2); }
.skill-detail-inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px; padding: 14px 16px 16px; background: var(--surface2);
}
.skill-stat { display: flex; flex-direction: column; gap: 3px; }
.skill-stat-label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.skill-stat-val { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-bright); }
.skill-stat-bar { height: 3px; background: var(--border2); margin-top: 2px; position: relative; overflow: hidden; }
.skill-stat-fill { position: absolute; top: 0; left: 0; height: 100%; }
.csv-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px dashed var(--border2);
  color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.csv-upload-btn:hover { border-color: var(--primary); color: var(--primary); }
.csv-upload-btn.loaded { border-style: solid; border-color: var(--success); color: var(--success); }

/* ── Period Selector ─────────────────────────────────────────── */
#period-selector {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 8px; border-bottom: 1px solid var(--border2); margin-bottom: 4px;
  font-size: 13px;
}
.period-selector-label { color: var(--text-dim); font-weight: 600; white-space: nowrap; font-size: 12px; }

#period-trigger-wrap { position: relative; }

#period-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  font-family: 'Montserrat', var(--font-ui);
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
#period-trigger:hover { border-color: var(--primary); color: var(--primary); }
#period-trigger.active { border-color: var(--primary); color: var(--primary); }
.period-caret { font-size: 9px; color: var(--text-dim); transition: transform 0.2s; }
#period-trigger.open .period-caret { transform: rotate(180deg); }

#period-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  min-width: 320px;
  /* The month/quarter presets run back to a FIXED floor (Jan 1 2026), so the
     list gets one row longer every three months rather than staying at six
     buttons. Cap the height and scroll instead of letting the panel grow past
     the bottom of the screen and hide the custom-range fields. */
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
#period-dropdown.open { display: block; }

.period-dd-section { padding: 14px 16px; }
.period-dd-heading {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.period-dd-divider { border-top: 1px solid var(--border2); }

#period-presets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
#period-quarters-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.period-preset-btn {
  padding: 6px 4px; font-size: 12px; font-weight: 600; text-align: center;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text-dim);
  cursor: pointer; transition: all 0.12s; font-family: 'Montserrat', var(--font-ui);
}
.period-preset-btn:hover { border-color: var(--primary); color: var(--primary); background: #fff5f7; }
.period-preset-btn.active {
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color: #fff; border-color: var(--primary);
}
/* Default button spans full width */
.period-preset-btn[data-period="default"] { grid-column: 1 / -1; }

/* ── Export dropdown ──────────────────────────────────────────── */
.export-wrap { position: relative; }
.export-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.14); min-width: 180px; padding: 6px 0 8px;
}
.export-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 7px 16px; font-size: 12px; font-family: var(--font-ui);
  background: none; border: none; color: var(--text); cursor: pointer;
}
.export-dropdown button:hover { background: var(--surface2); color: var(--primary); }
.export-section-label {
  padding: 6px 16px 3px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
}
.export-divider { border-top: 1px solid var(--border2); margin: 6px 0; }

/* ── Manager Mode & Team Lead ─────────────────────────────────── */
#manager-mode-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
#lead-mode-btn.active {
  background: #0d9488; color: #fff; border-color: #0d9488;
}
.dev-rank { font-size:10px;font-family:var(--font-mono);color:var(--text-dim);margin-right:5px;min-width:22px;display:inline-block;text-align:right; }
.dev-lead-crown {
  font-size: 13px; margin-right: 4px; vertical-align: middle;
  filter: drop-shadow(0 0 2px rgba(255,180,0,0.6));
}
.dev-lead-btn {
  display: inline-flex; align-items: center;
  margin-left: 6px; padding: 1px 6px; font-size: 12px;
  background: none; border: 1px dashed var(--border2); cursor: pointer;
  color: var(--text-muted); transition: all 0.15s; vertical-align: middle;
  line-height: 1.4;
}
.dev-lead-btn:hover { border-color: var(--amber); color: var(--amber); background: rgba(246,173,85,0.08); }
.dev-lead-btn.is-lead { border-style: solid; border-color: var(--amber); background: rgba(246,173,85,0.12); }
.nb-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 3px; margin-right: 4px; vertical-align: middle;
  background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.3);
}
.nb-btn {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px; margin-left: 4px; border-radius: 4px; cursor: pointer;
  border: 1px dashed var(--border2); background: none; color: var(--text-dim);
  vertical-align: middle; opacity: 0.6;
}
.nb-btn:hover  { opacity: 1; border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.08); }
.nb-btn.is-nb  { opacity: 1; border-style: solid; border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.12); }
/* Manager picker modal */
#manager-picker-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
#manager-picker-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
#manager-picker-box {
  position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); padding: 24px 28px; min-width: 280px; max-width: 360px;
  text-align: center;
}
#manager-picker-title { font-size: 16px; font-weight: 700; font-family: var(--font-heading); margin-bottom: 4px; }
#manager-picker-sub   { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }
#manager-picker-list  { list-style: none; padding: 0; margin: 0 0 4px; text-align: left; }
#manager-picker-list li + li { border-top: 1px solid var(--border2); }
#manager-picker-list button {
  display: block; width: 100%; padding: 10px 12px; font-size: 13px;
  font-family: var(--font-ui); background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left; transition: background 0.12s;
}
#manager-picker-list button:hover { background: var(--surface2); color: var(--primary); }

/* ── Team filter dropdown ─────────────────────────────────────── */
#team-filter-wrap, #company-filter-wrap { position: relative; }
#team-filter-trigger, #company-filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; font-size: 13px; font-weight: 600;
  font-family: 'Montserrat', var(--font-ui);
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
#team-filter-trigger:hover, #company-filter-trigger:hover { border-color: var(--primary); color: var(--primary); }
#team-filter-trigger.active, #company-filter-trigger.active { border-color: var(--primary); color: var(--primary); }
#team-filter-trigger.open .team-filter-caret,
#company-filter-trigger.open .team-filter-caret { transform: rotate(180deg); }
.team-filter-caret { font-size: 9px; color: var(--text-dim); transition: transform 0.2s; }
#team-filter-dropdown, #company-filter-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12); min-width: 200px;
}
#team-filter-dropdown.open, #company-filter-dropdown.open { display: block; }
.team-filter-actions {
  display: flex; gap: 6px; padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border2);
}
.team-filter-actions button {
  font-size: 11px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text-dim); font-family: var(--font-ui);
}
.team-filter-actions button:hover { border-color: var(--primary); color: var(--primary); }
#team-filter-list, #company-filter-list { padding: 6px 0 8px; max-height: 280px; overflow-y: auto; }
.team-check-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; font-size: 12px; color: var(--text);
  cursor: pointer; font-family: var(--font-ui);
}
.team-check-item:hover { background: var(--surface2); }
.team-check-item input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }
.team-check-item input[type="checkbox"] { cursor: pointer; accent-color: var(--primary); }

.period-dd-custom-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.period-dd-custom-row input[type="date"] {
  padding: 5px 8px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text);
  font-family: var(--font-ui); font-size: 12px; outline: none; cursor: pointer; flex: 1;
}
.period-dd-custom-row input[type="date"]:focus { border-color: var(--primary); }
.period-sep { color: var(--text-dim); font-size: 13px; }
.period-apply-btn {
  padding: 5px 14px; font-size: 12px; font-weight: 700;
  font-family: 'Montserrat', var(--font-ui);
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color: #fff; border: 1px solid var(--primary); cursor: pointer;
  transition: opacity 0.15s; white-space: nowrap;
}
.period-apply-btn:hover { opacity: 0.88; }

.period-error {
  display: none; margin-top: 8px; padding: 6px 10px;
  background: #fff0f0; border: 1px solid #f5c6c6;
  color: var(--primary); font-size: 11px; font-weight: 600; line-height: 1.4;
}

/* ── SonarCloud tab ─────────────────────────────────────────── */
#sonar-table th, #sonar-table td { padding: 8px 10px; font-size: 12px; }

/* Project drill-down detail row */
.sonar-detail-row td { padding: 0 !important; }
.sonar-detail-inner {
  padding: 14px 18px 18px;
  background: var(--surface2);
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid var(--border2);
}
.sonar-det-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.sonar-det-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sonar-det-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 8px 14px;
  text-align: center;
  min-width: 80px;
}
.sonar-det-card-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.2;
}
.sonar-det-card-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sonar-det-bad   { color: #dc2626; }
.sonar-det-warn  { color: #f97316; }
.sonar-det-amber { color: #d97706; }
.sonar-det-ok    { color: #16a34a; }
.sonar-det-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* Branch pagination */
.sonar-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 2px;
  flex-wrap: wrap;
}
.sonar-page-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-family: var(--font-ui);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  line-height: 1.4;
}
.sonar-page-btn:hover:not(:disabled) { background: var(--surface2); border-color: var(--text-dim); }
.sonar-page-btn:disabled { opacity: 0.35; cursor: default; }
.sonar-page-btn.sonar-page-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.sonar-page-ellipsis { font-size: 11px; color: var(--text-muted); padding: 0 2px; }
.sonar-pager-info { font-size: 10px; color: var(--text-muted); margin-left: 6px; }

/* ── Utilities ───────────────────────────────────────────────── */
.flex { display: flex; }
.gap-8 { gap: 8px; }
.align-center { align-items: center; }
.hidden { display: none !important; }

/* ── Sticky table headers ───────────────────────────────────────── */
  /*
   * position:sticky must be on <th> elements (not <thead>) for reliable
   * page-level scroll support across all browsers.
   * Two-row theads (label row + filter row) stack via staggered top values.
   */
  #project-table   thead th,
  #dev-table       thead th,
  #tester-table    thead th,
  #sonar-table     thead th,
  .rw-table        thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--table-header);
  }

  /* Filter-input row sits immediately below the 38px label row */
  #dev-table     thead tr.dev-col-filter-row th,
  #tester-table  thead tr.dev-col-filter-row th {
    top: 38px;
    background: var(--surface2, #1e293b);
  }

/* ─── Story Map ─────────────────────────────────────────────────────────── */
.sm-wrap          { overflow-x: auto; padding-bottom: 12px; }
.sm-epic-row      { display: flex; justify-content: center; margin-bottom: 18px; }
.sm-epic          { background: var(--surface2, #1e293b); border: 2px solid var(--accent, #6366f1);
                    border-radius: 8px; padding: 10px 20px; max-width: 600px; text-align: center; }
.sm-feature-row   { display: flex; gap: 12px; align-items: flex-start; }
.sm-feature-col   { flex: 0 0 220px; display: flex; flex-direction: column; gap: 6px; }
.sm-feature       { background: var(--surface2, #1e293b); border: 1px solid var(--border, #334155);
                    border-radius: 6px; padding: 8px 10px; }
.sm-feature.sm-direct { border-style: dashed; color: var(--text-dim); }
.sm-stories       { display: flex; flex-direction: column; gap: 5px; padding-left: 8px;
                    border-left: 2px solid var(--border, #334155); }
.sm-story         { background: var(--surface, #0f172a); border: 1px solid var(--border, #334155);
                    border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.sm-empty         { font-size: 11px; color: var(--text-dim); padding: 4px 8px; font-style: italic; }
.sm-id            { font-size: 10px; color: var(--text-dim); margin-right: 6px; }
.sm-title         { font-size: 12px; color: var(--text-bright, #f8fafc); }
.sm-state         { font-size: 10px; color: var(--text-dim); margin-left: 8px; }
.sm-done          { border-color: var(--green, #16a34a) !important; opacity: 0.7; }
.sm-active        { border-color: var(--cyan, #22d3ee) !important; }
.sm-new           { border-color: var(--border, #334155); }
a.sm-epic, a.sm-feature, a.sm-story {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
}
a.sm-epic:hover, a.sm-feature:hover, a.sm-story:hover { filter: brightness(1.2); }

/* ── New-projects banner ─────────────────────────────────────── */
.new-projects-badge {
  background: rgba(255, 193, 7, 0.15); border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px; padding: 4px 8px; margin-right: 8px;
  font-size: 11px; color: white; font-weight: 500;
  white-space: nowrap; pointer-events: auto;
  transition: all 0.2s ease;
  display: inline-flex; align-items: center;
}
.new-projects-badge:hover {
  background: rgba(255, 193, 7, 0.25);
  border-color: rgba(255, 193, 7, 0.5);
  color: white;
}
:root[data-theme="dark"] .new-projects-badge {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.2);
  color: rgba(200, 180, 140, 0.6);
}
:root[data-theme="dark"] .new-projects-badge:hover {
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.35);
  color: rgba(220, 200, 160, 0.8);
}
.btn-warning { background: #ffc107; color: #212529; border: none; }
.btn-warning:hover { background: #e0a800; }
:root[data-theme="dark"] .btn-warning {
  background: rgba(255, 193, 7, 0.12);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.45);
}
:root[data-theme="dark"] .btn-warning:hover {
  background: rgba(255, 193, 7, 0.22);
  border-color: #ffc107;
}

/* ── Project Config Modal ────────────────────────────────────── */
.pcm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.pcm-dialog {
  background: var(--surface); border-radius: 10px; width: min(900px, 95vw);
  height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.pcm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 15px;
}
.pcm-close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--text-dim); line-height: 1; padding: 0 4px;
}
.pcm-intro { padding: 12px 20px 0; font-size: 13px; color: var(--text-dim); }
.pcm-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.pcm-project { background: var(--surface2); border-radius: 8px; padding: 12px 16px; }
.pcm-project-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.pcm-project-check-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0;
}
.pcm-project-cb { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.pcm-project-name { font-weight: 600; font-size: 14px; }
.pcm-ignore-btn {
  margin-left: auto; flex-shrink: 0;
  background: none; border: 1px solid var(--border2); border-radius: 4px;
  padding: 2px 8px; font-size: 11px; color: var(--text-dim); cursor: pointer;
}
.pcm-ignore-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(213,0,50,.06); }
.pcm-ignore-btn:disabled { opacity: 0.5; cursor: default; }
.pcm-repo-section { margin-left: 24px; }
.pcm-repos-loading { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }
.pcm-repos-err    { color: var(--danger) !important; }
.pcm-repos-empty  { font-size: 12px; color: var(--text-dim); font-style: italic; padding: 4px 0; }
.pcm-repo-actions { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; }
.pcm-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary); font-size: 12px; text-decoration: underline;
}
.pcm-link-btn:hover { color: var(--primary-hover); }
.pcm-sep { color: var(--text-dim); }
.pcm-repo-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px; max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
  background: var(--surface);
}
.pcm-repo-row {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcm-repo-row input[type="checkbox"] { accent-color: var(--primary); flex-shrink: 0; }
.pcm-status { font-size: 12px; margin-top: 8px; min-height: 16px; }
.pcm-status-pending { color: var(--text-dim); }
.pcm-status-ok  { color: var(--success); }
.pcm-status-err { color: var(--danger); }
.pcm-footer {
  display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.pcm-dialog--wide { width: 900px; height: 85vh; }
#pcm-panel-people { flex: 1; min-height: 0; }

/* ── PCM Tabs ────────────────────────────────────────────────── */
.pcm-header { align-items: center; }
.pcm-tabs { display: flex; gap: 4px; flex: 1; }
.pcm-tab-btn {
  background: none; border: none; padding: 6px 14px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  border-bottom: 2px solid transparent; border-radius: 0;
}
.pcm-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.pcm-tab-btn:hover:not(.active) { color: var(--text); }

/* ── Manage tab ──────────────────────────────────────────────── */
.pcm-manage-section { margin-bottom: 20px; }
.pcm-manage-section:last-child { margin-bottom: 0; }
.pcm-manage-heading {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin-bottom: 8px;
}
.pcm-manage-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pcm-manage-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border-radius: 6px; padding: 8px 12px;
  margin-bottom: 6px;
}
.pcm-manage-row-name { font-weight: 500; font-size: 13px; flex-shrink: 0; }
.pcm-manage-row-detail {
  font-size: 12px; color: var(--text-dim); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcm-manage-remove-btn {
  margin-left: auto; flex-shrink: 0; background: none;
  border: 1px solid var(--border2); border-radius: 4px;
  padding: 3px 10px; font-size: 11px; color: var(--text-dim); cursor: pointer;
}
.pcm-manage-remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.pcm-manage-remove-btn:disabled { opacity: 0.5; cursor: default; }
.pcm-manage-unignore-btn:hover { border-color: var(--success); color: var(--success); }
.pcm-empty-msg { font-size: 13px; color: var(--text-dim); font-style: italic; padding: 8px 0; }
.pcm-manage-extra-project { margin-bottom: 12px; }
.pcm-manage-extra-project-name {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  padding: 2px 0 4px 2px;
}
.pcm-manage-extra-row .pcm-manage-row-detail { font-size: 13px; color: var(--text); }

/* ── Header manage button ────────────────────────────────────── */
.pcm-header-manage-btn {
  font-size: 12px; padding: 4px 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: 5px; cursor: pointer; margin-right: 8px;
}

/* ── Release Planning ────────────────────────────────────────── */
.rp-controls-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  padding: 16px 20px 14px;
  margin-bottom: 20px;
}
.rp-controls-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-field-btn { justify-content: flex-end; }
#rp-start-wrap { position: relative; }
.rp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rp-legend-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border2);
}
/* Shared "Cached view" banner. Pages emit it via cachedBannerHtml() (utils.js)
   when the server response carries _cache.cached === true. */
.cached-banner,
.rp-cached-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid rgba(180,83,9,.4);
  background: rgba(180,83,9,.10);
  color: var(--amber);
  font-size: 12px;
  border-radius: 3px;
}
:root:not([data-theme="dark"]) .cached-banner,
:root:not([data-theme="dark"]) .rp-cached-banner {
  border-color: rgba(161,98,7,.45);
  background: rgba(161,98,7,.10);
  color: #a16207;
}
.cached-banner-icon,
.rp-cached-icon { font-size: 14px; line-height: 1; }
/* Banner slots are pinned to the very top of each tab panel (utils.js inserts
   them as the panel's first child). Give the top one a little breathing room. */
.cached-banner-slot:first-child,
.partial-access-slot:first-child { margin-top: 4px; }
.rp-section {
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.rp-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 2px;
}
.rp-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}
.rp-wi-chip {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font-mono);
}
.rp-chip-warn {
  background: rgba(180,83,9,.1);
  color: var(--amber);
  border-color: rgba(180,83,9,.3);
}
:root[data-theme="light"] .rp-chip-warn {
  background: rgba(161,98,7,.15);
  color: #a16207;
  border-color: rgba(161,98,7,.45);
}
.rp-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--font-mono); background: #000; color: #fff; }
.rp-table th {
  background: #000;
  color: #fff;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  text-align: left;
  border-bottom: 2px solid #333;
  white-space: nowrap;
}
.rp-table td {
  padding: 2px 8px;
  border-bottom: 1px solid #333;
  vertical-align: top;
  line-height: 1.4;
  background: #000;
  color: #fff;
}
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tr:hover td { background: #1a1a1a; }
.rp-table th.rp-sortable { user-select: none; }
.rp-table th.rp-sortable:hover { background: #1a1a1a; color: #fff; }
.rp-table th.rp-sortable.sort-asc, .rp-table th.rp-sortable.sort-desc { color: var(--primary); }
/* Light mode overrides - when data-theme attribute is NOT present or not "dark" */
:root:not([data-theme="dark"]) .rp-table {
  background: #fff;
  color: #000;
}
:root:not([data-theme="dark"]) .rp-table th {
  background: #fff;
  color: #000;
  border-bottom: 2px solid #ccc;
}
:root:not([data-theme="dark"]) .rp-table td {
  background: #fff;
  color: #000;
  border-bottom: 1px solid #e0e0e0;
}
:root:not([data-theme="dark"]) .rp-table tr:hover td {
  background: #f5f5f5;
}
:root:not([data-theme="dark"]) .rp-table th.rp-sortable:hover {
  background: #f5f5f5;
  color: #000;
}
/* Light-mode readability — scope darker colour variants to the pinch report
   only, so inline `style="color: var(--amber)"` etc. picks them up via cascade
   without affecting other pages. Without this override, --amber (#ca8a04) and
   --info (#17A2B8) fail WCAG AA contrast on white. */
:root:not([data-theme="dark"]) .rp-section {
  --amber:       #a16207;  /* dark mustard — reads as yellow with WCAG AA contrast on white */
  --info:        #0e7490;
  --green:       #166534;
  --purple:      #6b21a8;
  --revert-blue: #1e40af;
  --primary:     #a20026;
}
:root:not([data-theme="dark"]) .rp-section .rp-author-cell {
  color: #495057;
}
:root:not([data-theme="dark"]) .rp-section .rp-comment-cell {
  color: #212529;
}
:root:not([data-theme="dark"]) .rp-section .rp-hint {
  color: #495057;
}
/* Card text on the work-items grid — the surface2 background is very light,
   so push body text to the high-contrast end. */
:root:not([data-theme="dark"]) .rp-section .rp-fc-card {
  background: #fafafa;
  border-color: #d1d5db;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-title {
  color: #111827;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-parents,
:root:not([data-theme="dark"]) .rp-section .rp-fc-parent-type,
:root:not([data-theme="dark"]) .rp-section .rp-fc-parent-sep {
  color: #4b5563;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-assignee {
  color: #1f2937;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-assignee-empty {
  color: #6b7280;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type {
  color: #374151;
  background: #ffffff;
  border-color: #d1d5db;
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type-bug {
  color: #991b1b;
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.45);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type-pbi {
  color: #1e40af;
  background: rgba(30,64,175,.08);
  border-color: rgba(30,64,175,.45);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type-feature {
  color: #6b21a8;
  background: rgba(107,33,168,.08);
  border-color: rgba(107,33,168,.45);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type-epic {
  color: #a16207;
  background: rgba(161,98,7,.10);
  border-color: rgba(161,98,7,.45);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-type-task {
  color: #166534;
  background: rgba(22,101,52,.08);
  border-color: rgba(22,101,52,.45);
}
/* The multi-repo board (.rp-board-root) lives outside .rp-section, so it misses
   the token overrides above and its chips fall back to the global tokens, which
   fail WCAG AA on white (--amber 2.9:1, --info 3.0:1, --green/attn ~4:1 over the
   tint). Cover both roots with the same vetted values so the two views match. */
:root:not([data-theme="dark"]) .rp-section .rp-fc-flag-ok,
:root:not([data-theme="dark"]) .rp-board-root .rp-fc-flag-ok {
  color: #166534;
  background: rgba(22,101,52,.10);
  border-color: rgba(22,101,52,.40);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-flag-warn,
:root:not([data-theme="dark"]) .rp-board-root .rp-fc-flag-warn {
  color: #8a5900;  /* #a16207 was only 4.2:1 over its own tint; this is 5.1:1 */
  background: rgba(161,98,7,.12);
  border-color: rgba(161,98,7,.45);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-flag-db,
:root:not([data-theme="dark"]) .rp-board-root .rp-fc-flag-db {
  color: #1e40af;
  background: rgba(30,64,175,.10);
  border-color: rgba(30,64,175,.40);
}
:root:not([data-theme="dark"]) .rp-section .rp-fc-flag-attn,
:root:not([data-theme="dark"]) .rp-board-root .rp-fc-flag-attn {
  color: #9f1239;
  background: rgba(159,18,57,.10);
  border-color: rgba(159,18,57,.40);
}
:root:not([data-theme="dark"]) .rp-board-root .rp-fc-flag-type-feature {
  color: #1e40af;
  background: rgba(30,64,175,.10);
  border-color: rgba(30,64,175,.40);
}
:root:not([data-theme="dark"]) .rp-board-root .rp-board-pr-rollup-ok {
  color: #166534;
  background: rgba(22,101,52,.10);
  border-color: rgba(22,101,52,.40);
}
:root:not([data-theme="dark"]) .rp-board-root .rp-board-pr-rollup-warn {
  color: #8a5900;
  background: rgba(161,98,7,.12);
  border-color: rgba(161,98,7,.45);
}
:root:not([data-theme="dark"]) .rp-board-root .rp-board-pr-rollup-attn {
  color: #9f1239;
  background: rgba(159,18,57,.10);
  border-color: rgba(159,18,57,.40);
}
.rp-status-cell {
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  font-family: var(--font-mono);
}
.rp-commit-id { font-size: 12px; font-weight: 700; }
.rp-wi-cell { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.rp-col-resizer:hover, .rp-col-resizer:active { background: var(--primary); opacity: .5; }
.rp-author-cell { color: var(--text-dim); white-space: nowrap; font-size: 11px; }
.rp-comment-cell {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
}
.rp-wi-link {
  color: var(--primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
}
.rp-wi-link:hover { text-decoration: underline; }
.rp-wi-help {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border: 1px solid var(--amber, #f59e0b);
  color: var(--amber, #f59e0b);
  background: transparent;
  border-radius: 3px;
  text-decoration: none;
  font-family: var(--font-ui);
  cursor: pointer;
}
.rp-wi-help:hover { background: var(--amber, #f59e0b); color: var(--surface, #fff); }
.rp-final-list {
  padding-top: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.6;
}

/* Work items for this release — card grid */
.rp-final-grid {
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 8px;
}
.rp-fc-card {
  border: 1px solid var(--border2);
  background: var(--surface2);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rp-fc-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.rp-fc-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rp-fc-type-bug {
  color: var(--red);
  background: rgba(220,38,38,.1);
  border-color: rgba(220,38,38,.35);
}
.rp-fc-type-pbi {
  color: var(--info);
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.35);
}
.rp-fc-type-feature {
  color: var(--purple);
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.35);
}
.rp-fc-type-epic {
  color: var(--amber);
  background: rgba(180,83,9,.1);
  border-color: rgba(180,83,9,.35);
}
.rp-fc-type-task {
  color: var(--green);
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.35);
}
.rp-fc-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  text-decoration: none;
  flex-shrink: 0;
}
.rp-fc-id:hover { text-decoration: underline; }
.rp-fc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.rp-fc-parents {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}
.rp-fc-parent-link { display: inline-flex; align-items: baseline; gap: 4px; }
.rp-fc-parent-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.rp-fc-parent-sep { color: var(--text-muted); margin: 0 2px; }
.rp-fc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
}
.rp-fc-assignee { color: var(--text); }
.rp-fc-assignee-empty { color: var(--text-muted); font-style: italic; }
.rp-fc-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* Board detail rows lay id/area/pr/title/author/flags out as one flex row
   (see .rp-board-detail-item). Every other column has a fixed width, but
   flags didn't — its natural width varies with badge count (e.g. "Not ready"
   alone vs. "Not ready" + "DB script"), and since it's a flex sibling of the
   flex:1 title span, that variation shifted the title's computed width and
   therefore the start of every column after it (author), row to row. Give it
   a fixed footprint like its neighbors; flex-wrap above lets extra badges
   wrap onto a second line inside that footprint instead of resizing it. */
.rp-board-detail-item > .rp-fc-flags { display: flex; flex: 0 0 240px; gap: 4px; justify-content: flex-start; flex-wrap: nowrap; }
/* Within that footprint, the readiness chip ("Ready"/"Not ready"/"No parent…")
   sits in its own fixed-width slot so the PO/DB/hotfix chips after it start
   at the same x on every row, regardless of which readiness label is wider. */
.rp-fc-flags-primary { flex: 0 1 auto; min-width: 64px; }
.rp-fc-flags-secondary { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-fc-flag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.rp-fc-flag-ok {
  color: var(--green);
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
}
.rp-fc-flag-warn {
  color: var(--amber);
  background: rgba(180,83,9,.1);
  border-color: rgba(180,83,9,.3);
}
.rp-fc-flag-db {
  color: var(--info);
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.3);
}
.rp-fc-flag-attn {
  color: #e11d48;
  background: rgba(225,29,72,.1);
  border-color: rgba(225,29,72,.3);
}
.rp-fc-flag-hotfix {
  color: var(--purple);
  background: rgba(147,51,234,.1);
  border-color: rgba(147,51,234,.3);
}
.rp-fc-flag-revert {
  color: var(--revert-blue);
  background: rgba(29,78,216,.1);
  border-color: rgba(29,78,216,.3);
}
.rp-fc-flag-type-epic {
  color: var(--purple);
  background: rgba(147,51,234,.1);
  border-color: rgba(147,51,234,.3);
}
.rp-fc-flag-type-feature {
  color: var(--info);
  background: rgba(59,130,246,.1);
  border-color: rgba(59,130,246,.3);
}
/* Rolled-up Task children folded under their PBI/Bug parent's row
   (readiness-rollup Phase 4/5) — plain links, no badges of their own. */
.rp-fc-subtasks-toggle {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  padding-top: 2px;
}
.rp-fc-subtasks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.rp-fc-subtask-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 0 5px;
}
.rp-fc-subtask-link:hover { color: var(--primary); border-color: var(--primary); }
.rp-ai-btn {
  font-size: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.rp-ai-summary-bar {
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 10px 14px;
  margin-bottom: 6px;
}
.rp-ai-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.rp-ai-risks-list {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
  padding-left: 18px;
}
.rp-ai-rationale {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 360px;
}
.rp-ai-detail-row td.rp-ai-detail-cell {
  padding: 0;
  background: var(--surface2);
  border-bottom: 2px solid var(--border2);
}
.rp-ai-detail-card {
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border2);
}
.rp-ai-detail-card:last-child { border-bottom: none; }
.rp-ai-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rp-ai-detail-rationale {
  font-size: 12px;
  color: var(--text-dim);
  padding-left: 2px;
  line-height: 1.5;
}
/* ── Release Planning — Hierarchy view ──────────────────────── */
.rp-hier-group,
.rp-hier-commit-group {
  border: 1px solid var(--border2);
  background: var(--surface);
  margin-top: 10px;
  border-radius: 4px;
  overflow: hidden;
}
.rp-hier-commit-group + .rp-hier-commit-group { margin-top: 8px; }
.rp-hier-sub-section { border-top: 1px solid var(--border2); }
.rp-hier-sub-section .rp-hier-sub-header { padding: 6px 12px 6px 28px; margin-bottom: 0; }
.rp-hier-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #000; color: #fff; }
.rp-hier-table th {
  background: #000;
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid #333;
}
.rp-hier-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #333;
  vertical-align: top;
  background: #000;
  color: #fff;
}
.rp-hier-table tr:last-child td { border-bottom: none; }
.rp-hier-table tr:hover td { background: #1a1a1a; }
/* Hierarchy view light-mode overrides — mirrors the .rp-table light overrides. */
:root:not([data-theme="dark"]) .rp-hier-table {
  background: #fff;
  color: #212529;
}
:root:not([data-theme="dark"]) .rp-hier-table th {
  background: #f5f5f5;
  color: #212529;
  border-bottom: 1px solid #d1d5db;
}
:root:not([data-theme="dark"]) .rp-hier-table td {
  background: #fff;
  color: #212529;
  border-bottom: 1px solid #e5e7eb;
}
:root:not([data-theme="dark"]) .rp-hier-table tr:hover td {
  background: #f9fafb;
}
.rp-hier-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
  font-size: 12px;
  font-weight: 600;
  flex-wrap: wrap;
}
.rp-hier-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  padding: 1px 6px;
  border-radius: 3px;
}
.rp-hier-type-sub {
  color: var(--text-dim);
  background: var(--border2);
  border-color: transparent;
}
.rp-hier-title {
  color: var(--text);
  font-weight: 600;
}
.rp-hier-sub {
  padding: 8px 12px 8px 28px;
  border-bottom: 1px solid var(--border2);
}
.rp-hier-sub:last-child { border-bottom: none; }
.rp-hier-sub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rp-hier-sub-title {
  color: var(--text-dim);
  font-weight: 600;
}
.rp-hier-wis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.rp-hier-wis-direct {
  padding: 8px 12px;
}
.rp-hier-unlinked {
  border-style: dashed;
}
.rp-hier-unlinked-label {
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.pcm-header-manage-btn:hover { background: rgba(255,255,255,.2); }

/* ── Team config panel (⚙ Setup view) ─────────────────────────────── */
.tc-section { border: 1px solid var(--border2); margin-bottom: 10px; border-radius: 3px; overflow: hidden; }
.tc-header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface); border-bottom: 1px solid var(--border2); }
.tc-team-name { font-weight: 600; font-size: 13px; color: var(--text); flex: 1; }
.tc-badge { font-size: 11px; font-weight: 700; background: rgba(59,130,246,0.12); color: #3b82f6; padding: 1px 7px; border-radius: 10px; }
.tc-members { padding: 0; }
.tc-row { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.tc-row:last-child { border-bottom: none; }
.tc-name { font-weight: 600; color: var(--text-bright); min-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-email { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-move, .tc-assign { font-size: 11px; padding: 2px 5px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); border-radius: 3px; cursor: pointer; max-width: 160px; }
.tc-move:focus, .tc-assign:focus { outline: 1px solid var(--primary); }
.tc-remove { font-size: 13px; line-height: 1; padding: 2px 6px; background: none; border: 1px solid var(--border2); color: var(--text-muted); cursor: pointer; border-radius: 3px; flex-shrink: 0; }
.tc-remove:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.08); }
.tc-empty { padding: 7px 12px; font-size: 12px; color: var(--text-muted); font-style: italic; }
.tc-unassigned .tc-header { background: rgba(217,119,6,0.07); }
.tc-unassigned .tc-row { background: rgba(217,119,6,0.03); }
.tc-add-form { border: 1px solid var(--border2); background: var(--surface); padding: 12px 14px; margin-bottom: 14px; border-radius: 3px; }
.tc-add-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.tc-add-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tc-input { font-size: 12px; padding: 4px 7px; background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: 3px; min-width: 0; }
.tc-input:focus { outline: 1px solid var(--primary); border-color: var(--primary); }
.tc-input-wide { flex: 1; min-width: 160px; }
.tc-sub-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9px; background: rgba(59,130,246,0.1); color: #3b82f6; }
.tc-sub-badge.tc-sub-qa { background: rgba(16,185,129,0.12); color: #059669; }
.tc-row-qa { background: rgba(16,185,129,0.03); }
.tc-type-qa { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 3px; background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); flex-shrink: 0; }

/* ── Admin panel (People & Teams) ────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border2);
}
.filter-bar input[type="text"],
.filter-bar select {
  padding: 5px 9px;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-ui); font-size: 12px; outline: none;
}
.filter-bar input[type="text"]:focus,
.filter-bar select:focus { border-color: var(--primary); }
#filter-search { width: 200px; }
#filter-org, #filter-team, #filter-role { min-width: 120px; }
.filter-count { font-size: 12px; color: var(--text-dim); margin-left: auto; white-space: nowrap; }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: var(--surface);
}
.admin-table thead th {
  background: var(--table-header, #E7E5E5);
  color: var(--text-dim); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px 10px; text-align: left;
  border-bottom: 2px solid var(--border2); white-space: nowrap;
}
.admin-table thead th.th-sortable { cursor: pointer; user-select: none; }
.admin-table thead th.th-sortable:hover { color: var(--text); background: var(--surface2); }
.admin-table thead th.sorted { color: var(--text); }
.admin-table thead th .sort-ind { font-size: 9px; }
.admin-table tbody tr { border-bottom: 1px solid var(--border2); cursor: pointer; transition: background 0.1s; }
.admin-table tbody tr:hover { background: var(--surface2); }
.admin-table td { padding: 7px 10px; vertical-align: middle; }
.admin-table tr.removed-row { opacity: 0.5; }
.admin-table tr.removed-row td:first-child { text-decoration: line-through; }

.roles-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.role-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; white-space: nowrap; }
.role-badge.cat-manager  { background: #f8d7da; color: var(--primary); }
.role-badge.cat-lead     { background: #fde8d0; color: #c0581a; }
.role-badge.cat-tester   { background: #d1ecf1; color: #0c6775; }
.role-badge.cat-po       { background: #ede9fe; color: #5b21b6; }
.role-badge.cat-scrum    { background: #d4edda; color: #006d3f; }
.role-badge.cat-dev      { background: #dbeafe; color: #1e40af; }
.role-badge.cat-nonbill  { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border2); }
.role-badge.cat-removed  { background: #f8d7da; color: #9b2335; text-decoration: line-through; }
/* "other" — Ask Anything only. Given its own colour rather than folded into
   cat-nonbill: it is the one role that carries production-replica access, so it
   should be identifiable at a glance when scanning the people table. */
.role-badge.cat-other    { background: #fff3cd; color: #7a5c00; }
:root[data-theme="dark"] .role-badge.cat-manager { background: rgba(213,0,50,0.20);   color: #ff6b88; }
:root[data-theme="dark"] .role-badge.cat-lead    { background: rgba(192,88,26,0.22);  color: #f6a565; }
:root[data-theme="dark"] .role-badge.cat-tester  { background: rgba(23,162,184,0.20); color: #5bd9e6; }
:root[data-theme="dark"] .role-badge.cat-po      { background: rgba(91,33,182,0.28);  color: #c4b5fd; }
:root[data-theme="dark"] .role-badge.cat-scrum   { background: rgba(0,138,87,0.20);   color: #4ade80; }
:root[data-theme="dark"] .role-badge.cat-dev     { background: rgba(30,64,175,0.24);  color: #93c5fd; }
:root[data-theme="dark"] .role-badge.cat-removed { background: rgba(213,0,50,0.18);   color: #ff8b9f; }
:root[data-theme="dark"] .role-badge.cat-other   { background: rgba(202,138,4,0.22);  color: #fcd34d; }
.tbl-actions { display: flex; gap: 6px; }
.tbl-actions .btn { font-size: 11px; padding: 3px 10px; }

.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 2100;
}
.drawer-overlay.open { display: block; }
.drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 96vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.14);
  z-index: 2101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
}
.drawer-panel.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border2); flex-shrink: 0;
}
.drawer-title { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.drawer-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-dim); line-height: 1; padding: 2px 6px; }
.drawer-close:hover { color: var(--text); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.drawer-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border2); flex-shrink: 0; flex-wrap: wrap;
}

.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 5px; }
.form-control {
  width: 100%; padding: 7px 10px; box-sizing: border-box;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-ui); font-size: 13px; outline: none;
}
.form-control:focus { border-color: var(--primary); }
.form-control:disabled { opacity: 0.55; cursor: not-allowed; }

.roles-group { margin-bottom: 10px; }
.roles-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 5px; padding-bottom: 3px; border-bottom: 1px solid var(--border2); }
.roles-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.role-check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.role-check-item input[type="checkbox"] { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; }

.conditional-field { display: none; margin-top: 8px; }
.conditional-field.shown { display: block; }
.multi-select-list { width: 100%; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); font-family: var(--font-ui); font-size: 12px; padding: 4px; max-height: 120px; overflow-y: auto; }
.multi-select-list option { padding: 3px 6px; }

.tag-input-wrap { display: flex; gap: 6px; margin-bottom: 6px; }
.tag-input-wrap input { flex: 1; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-family: var(--font-ui); font-size: 12px; outline: none; }
.tag-input-wrap input:focus { border-color: var(--primary); }
.tags-container { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.tag-pill { display: flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border2); font-size: 11px; padding: 3px 8px; color: var(--text); }
.tag-pill-remove { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 13px; line-height: 1; padding: 0 1px; }
.tag-pill-remove:hover { color: var(--primary); }

.section-collapse { border: 1px solid var(--border2); margin-top: 20px; }
.section-collapse-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface2); cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); user-select: none; }
.section-collapse-header:hover { background: var(--surface); }
.section-collapse-caret { transition: transform 0.2s; display: inline-block; }
.section-collapse-body { padding: 14px; background: var(--surface); display: none; }
.section-collapse-body.open { display: block; }
.teams-manage-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.team-chip { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border2); padding: 4px 10px; font-size: 12px; }
.team-chip-remove { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 0; }
.team-chip-remove:hover { color: var(--primary); }
.add-team-row { display: flex; gap: 8px; align-items: center; }
.add-team-row input { flex: 1; max-width: 260px; padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-family: var(--font-ui); font-size: 12px; outline: none; }
.add-team-row input:focus { border-color: var(--primary); }

#toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 240px; max-width: 360px; padding: 12px 16px; font-size: 13px; font-family: var(--font-ui); box-shadow: var(--shadow-md); animation: toast-in 0.2s ease; pointer-events: auto; }
.toast.success { background: #d4edda; color: #155724; border-left: 4px solid #28a745; }
.toast.error   { background: #f8d7da; color: #721c24; border-left: 4px solid var(--primary); }
@keyframes toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

.btn-danger {
  background: rgba(213, 0, 50, 0.10);
  color: var(--primary);
  border: 1px solid rgba(213, 0, 50, 0.40);
}
.btn-danger:hover {
  background: rgba(213, 0, 50, 0.18);
  border-color: var(--primary);
}
.btn-danger-confirm { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; }
#toggle-removed-btn { font-size: 11px; }

/* ── PAT Settings ────────────────────────────────────────────── */
#pat-settings-btn {
  opacity: 0.7;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 5px;
}
#pat-settings-btn:hover { opacity: 1; background: rgba(255,255,255,.2); }
#pat-settings-btn.pat-active { opacity: 1; color: #4ade80; border-color: #4ade80; }
.pat-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 3000;
}
.pat-dialog {
  background: var(--surface); border-radius: 10px; width: 420px; max-width: 95vw;
  display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.pat-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; color: var(--text-bright);
}
.pat-dialog-body { padding: 16px 18px; }
.pat-hint { font-size: 12px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.5; }
.pat-field-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 10px 0 4px;
}
.pat-field-label:first-of-type { margin-top: 0; }
.pat-section-divider {
  margin: 18px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border2);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-bright);
}
.pat-section-hint { margin: 0 0 8px; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.pat-input-row { display: flex; gap: 8px; align-items: center; }
/* Show is disabled for a key that is already saved — it can reveal what you are
   typing, never what is stored. There is no global .btn:disabled rule, so
   without this the locked button looks identical to a live one and reads as
   broken rather than deliberate. The tooltip carries the reason. */
.pat-input-row .btn:disabled { opacity: .4; cursor: not-allowed; }
.pat-input {
  flex: 1; padding: 8px 10px;
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-mono, monospace); font-size: 12px; outline: none;
}
.pat-input:focus { border-color: var(--primary); }
.pat-status { font-size: 11px; color: var(--text-dim); margin-top: 8px; min-height: 16px; }
.pat-dialog-footer {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border); justify-content: flex-end;
}

/* Drag-to-reorder team headers on the Developers and Testers tables.
   Shared between tr.dev-org-header (developers) and tr.tester-group-header (testers). */
.dev-team-drag-handle {
  display: inline-block; cursor: grab; user-select: none;
  font-size: 13px; line-height: 1;
  color: var(--text-dim); padding: 0 8px 0 0;
}
.dev-team-drag-handle:active { cursor: grabbing; }
tr.dev-org-header[draggable="true"],
tr.tester-group-header[draggable="true"] { cursor: pointer; }
tr.dev-org-header.dev-team-dragging td,
tr.tester-group-header.dev-team-dragging td { opacity: 0.45; }
tr.dev-org-header.dev-team-drag-above td,
tr.tester-group-header.dev-team-drag-above td { box-shadow: inset 0 3px 0 var(--primary); }
tr.dev-org-header.dev-team-drag-below td,
tr.tester-group-header.dev-team-drag-below td { box-shadow: inset 0 -3px 0 var(--primary); }

/* App Health percentile legend — collapsed by default, footer-style */
.ai-legend {
  margin-top: 28px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ai-legend > summary {
  display: inline-block; cursor: pointer; user-select: none;
  font-size: 11px; color: var(--text-dim);
  list-style: none; padding: 2px 0;
}
.ai-legend > summary::-webkit-details-marker { display: none; }
.ai-legend > summary::before {
  content: '▸ '; display: inline-block; transition: transform 0.15s;
  color: var(--text-muted);
}
.ai-legend[open] > summary::before { content: '▾ '; }
.ai-legend > summary:hover { color: var(--text); }
.ai-legend-list {
  margin: 8px 0 0; padding: 0;
  font-size: 12px; line-height: 1.55; color: var(--text-dim);
  max-width: 720px;
}
.ai-legend-list dt { font-weight: 700; color: var(--text); margin-top: 6px; }
.ai-legend-list dt:first-child { margin-top: 0; }
.ai-legend-list dd { margin: 2px 0 0 0; }

/* App Health Hour / Full-day mode toggle — mirrors the .team-subnav theme */
.ai-mode-btn {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text-dim); font-family: 'Montserrat', var(--font-ui);
  font-size: 12px; font-weight: 600; padding: 7px 16px;
  cursor: pointer; transition: all 0.15s; border-radius: 0;
}
.ai-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
.ai-mode-btn.active {
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color: #fff; border-color: var(--primary);
}
:root[data-theme="dark"] .ai-mode-btn.active {
  background: rgba(213, 0, 50, 0.18);
  color: #fff;
  border-color: var(--primary);
}
:root[data-theme="dark"] .ai-mode-btn.active:hover {
  background: rgba(213, 0, 50, 0.28);
  color: #fff;
}

/* Team-card simple list (Scrum Masters / Product Owners — no stats) */
.tsl-list { display: flex; flex-direction: column; }
.tsl-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.tsl-row:last-child { border-bottom: none; }
.tsl-name { font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.tsl-email { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* People & Teams view toggle (Flat list / By Team) */
.people-view-btn {
  appearance: none; -webkit-appearance: none;
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  background: var(--surface); color: var(--text-dim);
  border: none; border-right: 1px solid var(--border2);
  cursor: pointer; transition: background 0.15s, color 0.15s;
  font-family: var(--font-ui);
}
.people-view-btn:last-child   { border-right: none; }
.people-view-btn:hover        { background: var(--surface2); color: var(--text); }
.people-view-btn.active {
  background: linear-gradient(to bottom, #DB2651, var(--primary));
  color: #fff;
}
:root[data-theme="dark"] .people-view-btn        { background: var(--surface2); }
:root[data-theme="dark"] .people-view-btn:hover  { background: rgba(255,255,255,0.06); color: var(--text-bright); }
:root[data-theme="dark"] .people-view-btn.active {
  background: rgba(213, 0, 50, 0.20);
  color: #fff;
}
:root[data-theme="dark"] .people-view-btn.active:hover { background: rgba(213, 0, 50, 0.30); }

/* By-Team view role sub-sections inside a team card */
.bt-role-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 6px 12px 2px; background: var(--surface2);
  border-top: 1px solid var(--border);
}
.bt-empty {
  padding: 16px; color: var(--text-dim); font-size: 12px;
  text-align: center;
}

/* ── Release Notes view — Source panel & editor ─────────────────────────────
   Source fields are fixed-height, scrollable boxes so a long error blob or an
   embedded screenshot in a work item's Description/Repro Steps can't blow out
   the layout. Embedded images are clamped to the box width. */
.rn-source { font-size: 12px; color: var(--text); }
.rn-src-label { font-weight: 600; color: var(--text-dim); margin: 8px 0 2px; }
.rn-src-label:first-child { margin-top: 0; }
.rn-src-val {
  height: 120px; overflow: auto;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; background: var(--bg-subtle, transparent);
  overflow-wrap: anywhere; word-break: break-word;
}
.rn-src-val img { max-width: 100%; height: auto; }
.rn-src-val pre, .rn-src-val code { white-space: pre-wrap; overflow-wrap: anywhere; }
.rn-editor {
  min-height: 120px; max-height: 300px; overflow: auto;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 8px; font-size: 13px; color: var(--text); background: var(--bg, transparent);
  overflow-wrap: anywhere;
}
.rn-editor img { max-width: 100%; height: auto; }
.rn-note-preview img { max-width: 100%; height: auto; }

/* ── Epic Calendar ────────────────────────────────────────────────── */
.epic-cal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.eg-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.eg-check input { cursor: pointer; margin: 0; }
/* Force a line break inside the flex-wrap toolbar so what follows starts a new row. */
.eg-controls-break { flex-basis: 100%; height: 0; }
#epic-cal-month-label {
  font-size: 16px;
  font-weight: 600;
  min-width: 160px;
  text-align: center;
}
#epic-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 28px;
}
.ec-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid;
  white-space: nowrap;
  color: var(--text);
}
.ec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Calendar table */
.ec-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 560px;
}
.ec-table th {
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--border2);
}
.ec-cell {
  vertical-align: top;
  padding: 6px 4px 4px;
  border: 1px solid var(--border);
  min-height: 76px;
  height: 76px;
}
.ec-cell--empty {
  background: var(--surface2);
  opacity: .5;
}
.ec-cell--today {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.ec-cell--has-epics {
  background: var(--surface);
}
.ec-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 3px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface2));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.ec-day-header--clickable {
  cursor: pointer;
  transition: background .12s;
}
.ec-day-header--clickable:hover {
  background: color-mix(in srgb, var(--primary) 28%, var(--surface2));
}
.ec-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.ec-day-num--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #000;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-weight: 700;
  font-size: 11px;
}
:root[data-theme="dark"] .ec-day-num--today {
  background: #fff;
  color: #000;
}
.ec-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ec-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text) !important;
  transition: opacity .12s;
}
.ec-chip:hover { opacity: .75; }
.ec-chip--dim  { opacity: .45; }
.ec-chip .ec-dot { flex-shrink: 0; }

/* Day-detail dialog: floating, larger-font list of a day's deliverables. */
.ec-day-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
}
.ec-day-dialog {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.ec-day-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface2));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.ec-day-dialog-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.ec-day-dialog-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color .12s;
}
.ec-day-dialog-close:hover { color: var(--text); }
.ec-day-dialog-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ec-day-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: filter .12s;
}
.ec-day-item:hover { filter: brightness(1.12); }
.ec-day-item .ec-dot { width: 10px; height: 10px; }
.ec-day-item-title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.ec-day-item-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* No-date table: plain <a> links need explicit colour so the browser default
   blue doesn't appear on the dark background. */
#epic-cal-nodate a {
  color: var(--text);
  text-decoration: none;
}
#epic-cal-nodate a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Epic search typeahead */
.ec-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
}
.ec-search-item:last-child { border-bottom: none; }
.ec-search-item:hover { background: var(--surface2); }
.ec-search-title {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ec-search-meta {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.ec-search-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Pinch-report link badge on calendar day headers */
.ec-build-badge {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  color: var(--primary) !important;
}
.ec-build-badge:hover {
  text-decoration: underline;
}
.ec-build-badge--next {
  color: var(--primary) !important;
  border: 1.5px dashed var(--primary);
}

/* No-date section wrapper — one per project group */
.ec-nodate-section {
  margin-top: 24px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 8px;
}
/* An expanded group (its body visible) claims the full row so its table has room. */
.ec-nodate-group:has(> div:not([style*="display:none"])) {
  flex: 1 1 100%;
}

/* No-date expander toggle */
.ec-nodate-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 6px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  width: fit-content;
}
.ec-nodate-toggle:hover { border-color: var(--primary); color: var(--primary); }
.ec-nodate-caret {
  font-size: 10px;
  transition: transform .18s;
  display: inline-block;
}
.ec-nodate-toggle--open .ec-nodate-caret { transform: rotate(90deg); }
.ec-nodate-count {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Scrollable table wrapper */
.ec-nodate-scroll {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
  max-width: 760px;
  border: 1px solid var(--border2);
  border-radius: 6px;
}
.ec-nodate-scroll .data-table {
  margin: 0;
}
.ec-nodate-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--table-header);
}

/* =========================================================================
   Backlog Health tab
   ========================================================================= */
#backlog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 16px;
}
.bl-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
}
.bl-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border2);
}
.bl-team { font-weight: 700; font-size: 15px; color: var(--text); }
.bl-runway { text-align: right; }
.bl-runway-val { font-size: 18px; font-weight: 800; font-family: var(--font-mono); }
.bl-runway-lbl { font-size: 10px; color: var(--text-dim); }
.bl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}
.bl-chip {
  flex: 1 0 auto;
  min-width: 78px;
  text-align: center;
  padding: 6px 8px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 5px;
}
.bl-chip[onclick]:hover { border-color: var(--primary); }
.bl-chip-val { display: block; font-size: 17px; font-weight: 700; font-family: var(--font-mono); color: var(--text); }
.bl-chip-lbl { display: block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.bl-breakdown { padding: 0 14px 10px; font-size: 11px; color: var(--text-dim); }
.bl-mini { margin-right: 10px; }
.bl-mini b { color: var(--text); }
.bl-mini-lbl { font-weight: 700; color: var(--text); text-transform: uppercase; font-size: 10px; }
.bl-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border2);
  background: var(--surface2);
}
.bl-ai-status { font-size: 12px; }
.bl-rollup { padding: 0 14px; }
.bl-rollup[style*="block"], .bl-rollup:not([style*="none"]) { padding: 10px 14px; }
.bl-rollup-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.bl-rollup-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-diff {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.bl-list { padding: 6px 14px 14px; overflow-x: auto; }
.bl-list-head { font-size: 12px; font-weight: 700; margin: 6px 0; color: var(--text); }
.bl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bl-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border2);
  color: var(--text-dim);
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
}
.bl-table td { padding: 6px 8px; border-bottom: 1px solid var(--border2); vertical-align: middle; }
.bl-row:hover td { background: var(--surface2); }
.bl-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-detail-body { padding: 8px 10px; background: var(--surface2); display: flex; flex-direction: column; gap: 6px; }
.bl-rationale { font-size: 12px; color: var(--text); font-style: italic; }
.spinner-sm { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: middle; }

/* Backlog Health — drag-and-drop reordering */
.bl-head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  padding: 2px 2px;
  flex-shrink: 0;
}
.bl-card-head[draggable="true"] { cursor: grab; }
.bl-card-head[draggable="true"]:active { cursor: grabbing; }
.bl-card.bl-dragging { opacity: 0.45; }
.bl-card.bl-drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }

/* Backlog Health — clickable AI difficulty pills (open the filtered flyout) */
.bl-diff.bl-clickable { cursor: pointer; }
.bl-diff.bl-clickable:hover { filter: brightness(1.12); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }

/* =========================================================================
   Backlog Health — collapsible board table (overrides the earlier card grid)
   ========================================================================= */
#backlog-grid {
  display: block;
  /* The board must not grow wider than the Production Bugs card above it.
     `.bl-board` asks for width:100%, but width is only a PREFERRED size — the
     team column and a dozen numeric columns are all `white-space: nowrap`, so
     the table's min-content width exceeds the panel and it pushed out past
     everything else on the tab. Scrolling inside the container instead keeps
     every block on this tab the same width, and the overflow becomes a
     scrollbar on the board rather than on the page.
     Safe to introduce a scroll container here: none of the sticky-header rules
     in this stylesheet name .bl-board or .bl-flat-table. */
  overflow-x: auto;
  max-width: 100%;
}

/* Pri 1 active bugs — red count box above the board + its expandable table. */
.bl-pri1-banner { margin: 0 0 12px; }
.bl-pri1-box {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; text-align: left;
  background: rgba(220, 38, 38, .14); border: 1px solid var(--danger);
  color: var(--danger); font-family: var(--font-ui);
}
.bl-pri1-box:hover:not(:disabled) { background: rgba(220, 38, 38, .22); }
.bl-pri1-box:disabled {
  cursor: default; color: var(--text-dim);
  background: var(--surface2); border-color: var(--border2);
}
.bl-pri1-count { flex: 0 0 auto; font-size: 22px; font-weight: 800; line-height: 1; font-family: var(--font-mono); }
.bl-pri1-label { flex: 0 0 auto; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
/* Per-team breakdown: takes the remaining width and truncates with an ellipsis. */
.bl-pri1-teams {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; opacity: .9;
}
.bl-pri1-sep { opacity: .5; }
.bl-pri1-caret { flex: 0 0 auto; font-size: 10px; }
.bl-pri1-panel { margin: 0 0 14px; }
.bl-pri1-empty { padding: 12px 4px; }
.bl-pri1-table { width: 100%; }
.bl-pri1-table th, .bl-pri1-table td { padding: 6px 10px; font-size: 12px; vertical-align: top; }
.bl-pri1-table thead th { white-space: nowrap; }
.bl-pri1-sortable { cursor: pointer; user-select: none; }
.bl-pri1-sortable:hover { color: var(--text); }
.bl-sort-ind { margin-left: 4px; font-size: 9px; }
.bl-pri1-desc { width: 45%; }

.bl-board {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
}
.bl-board thead th {
  text-align: right;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border2);
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bl-board thead th.bl-th-team { text-align: left; }
.bl-team-row { cursor: pointer; }
.bl-team-row td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border2);
}
.bl-team-row:hover td      { background: var(--surface2); }
.bl-team-row.bl-expanded td { background: var(--surface2); }
/* The flex lives on an inner wrapper, not the <td> — a flex <td> loses its
   table-cell height and makes the first column look misaligned with the row. */
.bl-team-cell { vertical-align: middle; }
.bl-team-cell-inner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-caret { color: var(--text-dim); font-size: 10px; width: 12px; flex-shrink: 0; }
.bl-team-name-wrap { min-width: 0; }
.bl-team-name { font-weight: 700; color: var(--text); white-space: nowrap; }
.bl-team-proj { white-space: nowrap; margin-left: 7px; font-weight: 400; }
.bl-team-meta { font-size: 10px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; }
.bl-team-lead { font-size: 10px; color: var(--amber, #f6ad55); margin-top: 2px; font-weight: 500; white-space: nowrap; }
.bl-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; color: var(--text); }
.bl-num.bl-clickable { cursor: pointer; }
.bl-num.bl-clickable:hover { text-decoration: underline; color: var(--primary); }
.bl-runway-cell { font-weight: 700; }
.bl-status-dot { font-size: 10px; }
.bl-detail-row > td { padding: 0; background: var(--surface); border-bottom: 2px solid var(--border2); }
.bl-team-row.bl-dragging td { opacity: 0.45; }
.bl-team-row.bl-drop-target td { box-shadow: inset 0 2px 0 var(--primary); }

/* Backlog Health — inline AI columns + compact analyze button */
.btn.btn-xs { padding: 2px 9px; font-size: 11px; line-height: 1.5; }
.bl-ai-empty { text-align: center; white-space: nowrap; }
.bl-ai-hrs { font-weight: 600; }
.bl-board thead th.bl-th-ai { width: 46px; }

/* Backlog Health — drilled item rows live in the main board table so their
   cells align under the board columns. */
.bl-drill-head td {
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.bl-item-row td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  font-size: 12px;
}
.bl-item-row:hover td { background: var(--surface2); }
/* Priority-tinted rows: the tint lives on the <tr>, so keep cells transparent on
   hover (otherwise surface2 hides it) and brighten the row for hover feedback. */
.bl-item-row.bl-prio:hover td { background: transparent; }
.bl-item-row.bl-prio:hover { filter: brightness(1.12); }
.bl-item-title-cell {
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bl-item-indent { color: var(--text-dim); margin-right: 6px; }
.bl-item-title { margin-left: 6px; color: var(--text); }
.bl-item-meta  { margin-left: 8px; }
/* State + how long the item has been in it, rendered as one unit: the state
   reads at normal weight and the duration trails it dimmed, so scanning a
   column of them shows the states first and the durations on a second look. */
.bl-state { white-space: nowrap; }
.bl-state-age { color: var(--text-dim); }
/* Its own column, not a suffix on the title cell: .bl-item-title-cell clips at
   520px with an ellipsis, so anything appended there vanished on every bug whose
   title was longer than a few words. */
.bl-state-cell    { white-space: nowrap; font-size: 11px; }
.bl-state-summary { white-space: nowrap; font-size: 11px; color: var(--text-dim); }

/* Ungrouped ("☰ Ungroup") view: one flat, sortable table of every item. */
.bl-flat-summary { margin: 6px 0 10px; }
.bl-flat-table td { font-size: 12px; }
.bl-flat-table th { white-space: nowrap; }
/* The only free-width column — cap and ellipsis it so a long title cannot push
   the sortable columns off the right-hand edge (the full text is in the title
   attribute). Everything else is short enough to size itself. */
.bl-flat-title {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Per-column filter row in the flat table's header (same control as the
   Developers / Product Owners tables — .dev-col-filter-row + .col-filter carry
   the shared look). An <input> has a ~20-character intrinsic width, which would
   stretch the narrow numeric columns (Pri, Age, hrs) far past their contents, so
   the min-width is dropped here and the cells size to the data as before. */
.bl-flat-table .dev-col-filter-row th { padding: 3px 4px !important; }
.bl-flat-table .col-filter { min-width: 0; font-size: 10px; }
.bl-flat-table .dev-col-filter-row th.bl-num .col-filter { text-align: right; }
/* Clear-filters button sits inline at the end of the summary line. */
#bl-clear-filters-btn { margin-left: 6px; vertical-align: baseline; }
.bl-flat-row.bl-prio:hover { filter: brightness(1.12); }
.bl-dot { font-size: 11px; }
.bl-item-detail > td { padding: 0; background: var(--surface2); }
.bl-item-aidetail-body {
  padding: 8px 14px 10px 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Backlog Health — per-team hide checkbox */
.bl-hide-cb { cursor: pointer; flex-shrink: 0; margin: 0 2px; }
.bl-team-hidden td { opacity: 0.5; }
.bl-team-hidden:hover td { opacity: 0.75; }

/* Backlog Health — active "Manage teams" button */
.btn.bl-manage-active { border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* =============================================================================
   Epic Roadmap (Gantt)
   ========================================================================== */
.eg-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 14px; }
.eg-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.eg-legend-note { color: var(--text-dim); }
.eg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 1px solid var(--border2); }
.eg-today-swatch { width: 10px; height: 0; border-left: 2px dashed var(--danger); display: inline-block; }
.eg-cur-swatch { width: 12px; height: 12px; display: inline-block; background: var(--primary); opacity: .14; border: 1px solid var(--primary); }

/* Unified swim-lane board. The board is FULL HEIGHT — it grows to fit every team
   lane and the PAGE scrolls vertically, so there is no scrollbar-inside-a-
   scrollbar. Because the board is therefore no longer the vertical scrollport,
   the two pieces of chrome that used to ride its own scrolling — the sprint
   header and the horizontal scrollbar — are siblings pinned to the VIEWPORT
   instead (.eg-head-scroll / .eg-hscroll), each kept in horizontal sync with the
   board by _egBindStickyChrome() in epic-gantt.js. The 48px label width must
   match _EG_LABEL_W there. The team name is printed vertically. */
.eg-board-wrap { position: relative; }
.eg-board {
  position: relative;
  /* Horizontal scroll ONLY. overflow-y must be `hidden`, not `visible`: a box
     with one axis set to auto computes `visible` on the other axis to `auto`,
     which would put the vertical scrollbar straight back. No max-height, so
     `hidden` clips nothing. The X scrollbar is hidden too — .eg-hscroll is the
     one the user drives, and two would be one too many. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
  border: 1px solid var(--border2);
  border-top: none;               /* .eg-head-scroll draws the top edge */
  background: var(--surface);
  box-shadow: var(--shadow);
}
.eg-board::-webkit-scrollbar { display: none; }
.eg-board-grid { position: relative; }

/* Sprint header, pinned to the top of the VIEWPORT (not the board) so it stays
   readable however far down the page the lanes run. overflow is hidden rather
   than auto — it has no scrollbar of its own; its scrollLeft is driven from the
   board. z-index clears .eg-lane-label (8) and .eg-corner (10), which share this
   stacking context because .eg-board is position:relative with z-index:auto. */
.eg-head-scroll {
  position: sticky; top: 0; z-index: 11;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-bottom: none;
  background: var(--surface2);
}
/* Horizontal scrollbar, pinned to the BOTTOM of the viewport so it is reachable
   without scrolling to the end of a very tall board. The inner spacer is sized
   to the board's full grid width by _egBindStickyChrome(), so this scrolls over
   exactly the same range as the board it drives. */
.eg-hscroll {
  position: sticky; bottom: 0; z-index: 12;
  overflow-x: auto; overflow-y: hidden;
  height: 18px;                   /* clears a Windows scrollbar (15–17px) */
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-top-width: 0;
}
.eg-hscroll-inner { height: 1px; }

/* "Ungroup teams": hide the frozen team column so the board reads as one shared
   timeline. The label/corner are dropped from the flex flow; lanes shift left.
   The corner lives in .eg-head-scroll now, so it needs its own modifier. */
.eg-head-scroll--ungrouped .eg-corner,
.eg-board--ungrouped .eg-lane-label { display: none; }
.eg-row { display: flex; }
/* The head row no longer needs position:sticky — .eg-head-scroll around it is
   what pins the header, and a sticky child of a box that never scrolls
   vertically does nothing. */
.eg-row--head { position: relative; z-index: 9; }
.eg-corner {
  position: sticky; left: 0; z-index: 10;
  width: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  background: var(--surface2); border-right: 2px solid var(--border2); border-bottom: 1px solid var(--border2);
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim);
}
.eg-axis { position: relative; flex-shrink: 0; background: var(--surface2); border-bottom: 1px solid var(--border2); }
.eg-lane-label {
  position: sticky; left: 0; z-index: 8;
  width: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 6px 2px;
  /* Greyscale name spine: a high-contrast neutral that auto-flips with the theme
     (near-black in light mode, near-white in dark), zebra-shaded to match lanes. */
  background: color-mix(in srgb, var(--text) 82%, var(--surface));
  border-right: 2px solid var(--border2); border-bottom: 1px solid var(--border2);
}
.eg-lane-label.eg-lane--alt { background: color-mix(in srgb, var(--text) 60%, var(--surface)); }
/* Team name printed vertically (reads bottom-to-top, like a y-axis label), in the
   surface colour so it contrasts the dark/light neutral spine in both themes. */
.eg-lane-name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 700; font-size: 12px; color: var(--surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
}
/* Row header is clickable: collapses the lane (and back). */
.eg-lane-label { cursor: pointer; }
.eg-lane-label:hover { filter: brightness(1.18); }
/* Collapsed lane: a slim horizontal header bar spanning the row, team name pinned
   to the left so it stays visible while the board scrolls. */
.eg-row--collapsed { cursor: pointer; }
.eg-collapsed-bar {
  display: flex; align-items: center; height: 100%; flex-shrink: 0;
  background: color-mix(in srgb, var(--text) 82%, var(--surface));
  border-bottom: 1px solid var(--border2);
}
/* Match the expanded header spine's zebra shading (82% normal / 60% alt). */
.eg-collapsed-bar.eg-lane--alt { background: color-mix(in srgb, var(--text) 60%, var(--surface)); }
.eg-row--collapsed:hover .eg-collapsed-bar { filter: brightness(1.18); }
.eg-collapsed-name {
  position: sticky; left: 0;
  padding: 0 12px;
  font-weight: 700; font-size: 12px; color: var(--surface); white-space: nowrap;
}
.eg-collapsed-sub { font-weight: 400; opacity: .8; margin-left: 8px; font-size: 11px; }
.eg-lane {
  position: relative; flex-shrink: 0; overflow: hidden;
  border-bottom: 1px solid var(--border2);
  /* Neutral (black & white) lanes with subtle zebra striping so adjacent teams
     read apart without colour — the bar colours carry the only signal. */
  background-color: var(--surface);
  background-image: linear-gradient(to right, var(--border2) 0, var(--border2) 1px, transparent 1px);
  background-repeat: repeat-x; background-position: left top;
}
.eg-lane.eg-lane--alt { background-color: color-mix(in srgb, var(--text) 7%, var(--surface)); }
/* Per-lane "solo" button, pinned to the top-right corner of the team label
   column. Shows only this team's lane when active; press again to restore every
   lane. Absolute within the sticky label so it rides along as the board scrolls. */
.eg-solo-btn {
  position: absolute; top: 3px; left: 3px; z-index: 9;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer;
  color: var(--text); background: var(--surface2);
  border: 1px solid var(--border2); border-radius: 4px;
  opacity: .6; transition: opacity .12s ease, filter .12s ease;
}
.eg-lane-label:hover .eg-solo-btn { opacity: .95; }
.eg-solo-btn:hover { opacity: 1; filter: brightness(1.1); }
.eg-solo-btn--active {
  opacity: 1; color: #fff;
  background: var(--accent, #2563eb); border-color: var(--accent, #2563eb);
}
.eg-drag-handle { cursor: grab; color: var(--text-dim); font-size: 13px; user-select: none; flex-shrink: 0; }
.eg-drag-handle:active { cursor: grabbing; }
.eg-hide-cb { cursor: pointer; flex-shrink: 0; margin: 0 4px 0 0; }

/* Manage mode: compact, draggable team list (replaces the charts while editing). */
.eg-manage { border: 1px solid var(--border2); background: var(--surface); box-shadow: var(--shadow); }
.eg-manage-hint { padding: 9px 12px; border-bottom: 1px solid var(--border2); background: var(--surface2); font-size: 12px; }
.eg-manage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border2);
  cursor: grab; background: var(--surface);
}
.eg-manage-row:last-child { border-bottom: none; }
.eg-manage-row:hover { background: var(--surface2); }
.eg-manage-row:active { cursor: grabbing; }
.eg-manage-row.eg-dragging { opacity: 0.45; }
.eg-manage-row.eg-drop-above { box-shadow: inset 0 2px 0 var(--primary); }
.eg-manage-row.eg-drop-below { box-shadow: inset 0 -2px 0 var(--primary); }
.eg-manage-row--hidden { opacity: 0.55; }
.eg-manage-row--hidden:hover { opacity: 0.8; }
.eg-manage-row--hidden .eg-manage-name { text-decoration: line-through; }
.eg-manage-hide {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); cursor: pointer;
}
.eg-manage-name  { font-weight: 700; font-size: 13px; color: var(--text-bright); }
.eg-manage-proj  { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.eg-manage-count { font-size: 11px; color: var(--text-dim); margin-left: auto; }

.eg-empty-note { position: absolute; left: 12px; color: var(--text-dim); font-size: 12px; font-style: italic; }
.eg-cur-col   { position: absolute; top: 0; bottom: 0; background: var(--primary); opacity: .06; pointer-events: none; }
.eg-today-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--danger); pointer-events: none; z-index: 3; }

.eg-head-cell {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-left: 1px solid var(--border2); box-sizing: border-box; padding: 2px;
}
.eg-head-cell--cur   { background: var(--surface2); }
.eg-head-cell--synth .eg-head-name { color: var(--text-dim); font-style: italic; }
.eg-head-name { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.eg-head-date { font-size: 9px; color: var(--text-dim); }

.eg-bar {
  position: absolute; display: flex; align-items: center;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 4px; box-sizing: border-box;
  overflow: hidden; text-decoration: none; z-index: 2; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: box-shadow .12s ease, filter .12s ease;
}
/* Epics without start/target dates: hatched fill matching the undated sub-items in the drawer. */
.eg-bar--undated {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--text) 22%, var(--surface)) 0,
    color-mix(in srgb, var(--text) 22%, var(--surface)) 6px,
    color-mix(in srgb, var(--text) 34%, var(--surface)) 6px,
    color-mix(in srgb, var(--text) 34%, var(--surface)) 12px);
}
/* Draggable undated bars: signal that they can be dropped onto the timeline. */
.eg-bar--draggable { cursor: grab; }
.eg-bar--draggable:active { cursor: grabbing; }
.eg-bar--dragging { opacity: .5; }
/* Draggable child bars inside an open epic drawer. */
.eg-child-bar--draggable { cursor: grab; }
.eg-child-bar--draggable:active { cursor: grabbing; }
/* Drawer accepts a child drop only within its own bounds. */
.eg-child-drawer--drop {
  outline: 2px dashed color-mix(in srgb, var(--primary) 75%, transparent);
  outline-offset: -3px;
}
/* Lane highlight while an undated bar is dragged over it. */
.eg-lane--drop {
  outline: 2px dashed color-mix(in srgb, var(--primary) 70%, transparent);
  outline-offset: -2px;
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* ── Schedule dialog (drop-to-schedule an undated epic) ──────────────────── */
.eg-sched-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px);
}
.eg-sched-dialog {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden;
}
.eg-sched-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--primary) 16%, var(--surface2));
  border-bottom: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.eg-sched-title { font-size: 16px; font-weight: 700; color: var(--text); }
.eg-sched-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .12s;
}
.eg-sched-close:hover { color: var(--text); }
.eg-sched-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.eg-sched-epic { font-size: 15px; font-weight: 600; color: var(--text); }
.eg-sched-team { font-size: 12px; color: var(--text-dim); margin-top: -6px; }
.eg-sched-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); }
.eg-sched-field input {
  padding: 6px 10px; font-size: 14px; font-family: var(--font-ui);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text); border-radius: 4px;
}
.eg-sched-error { font-size: 12px; color: var(--red); }
.eg-sched-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px 16px; border-top: 1px solid var(--border);
}
/* Dark mode: the neutral lanes make solid bars overpowering, so render them
   translucent. opacity (vs a transparent fill) dims fill + label together, so
   the label stays legible against the fill. Hovering restores full opacity. */
:root[data-theme="dark"] .eg-bar { border-color: rgba(255, 255, 255, .16); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); opacity: .7; }
.eg-bar:hover { filter: brightness(1.06); box-shadow: 0 3px 8px rgba(0, 0, 0, .30); z-index: 4; }
:root[data-theme="dark"] .eg-bar:hover { opacity: 1; }
.eg-bar-label {
  font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
  position: relative; z-index: 1;   /* sit above the progress fill */
  display: flex; align-items: center; gap: 6px; width: 100%;
}
/* The epic title fills the label and truncates, pushing the caret and % badge to
   the bar's right edge regardless of whether the caret is present. */
.eg-bar-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Light-filled bars (light-blue Not Sized, amber No Requirements) need a dark,
   unshadowed label to stay legible. The teal In Progress bar keeps a white label. */
.eg-bar--notsized .eg-bar-label,
.eg-bar--noreqs .eg-bar-label { color: #111827; text-shadow: none; }

/* Progress fill: a translucent lighter overlay covering pct% of the bar from the
   left, so the bar doubles as a completion gauge. Sits under the label (z-index)
   and above the bar's solid background. A subtle right edge marks the boundary. */
.eg-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(255, 255, 255, .38);
  border-right: 1px solid rgba(255, 255, 255, .65);
  pointer-events: none;
}
/* On the light-filled bars a white overlay is invisible — darken instead. */
.eg-bar--notsized .eg-bar-fill,
.eg-bar--noreqs .eg-bar-fill {
  background: rgba(0, 0, 0, .18); border-right-color: rgba(0, 0, 0, .35);
}
/* The % badge pinned to the right of the label. */
.eg-bar-pct {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; opacity: .9;
  padding-left: 4px;
}
/* Clickable expand/collapse caret at the right of the bar, just before the % —
   a down chevron that flips up when the drawer is open. The title's flex-grow
   pushes it (and the %) to the right edge of the bar. */
.eg-bar-toggle {
  flex: 0 0 auto;
  width: 16px; height: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85; transition: transform .12s ease, opacity .12s ease;
}
.eg-bar-toggle:hover { opacity: 1; }
.eg-bar-toggle::before {
  content: ""; display: block;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;   /* down chevron */
}
.eg-bar--expanded .eg-bar-toggle::before {
  border-top: none; border-bottom: 5px solid currentColor;   /* flips up when open */
}

/* ── Hover-to-expand child work items ──────────────────────────────────────── */
/* A sustained hover over an epic bar grows its swim lane and draws the epic's
   direct children as bars directly below it, on the same track. */
.eg-bar--expanded { z-index: 5; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); filter: brightness(1.06); }
/* A drawer that appears to slide out of the bottom of the epic bar: same width,
   a lighter shade of the epic's own colour (--eg-drawer-color, set inline), butted
   right up under the bar with a soft cast shadow so it reads as one piece. */
.eg-child-drawer {
  position: absolute; z-index: 2; pointer-events: none;
  background-color: color-mix(in srgb, var(--eg-drawer-color) 40%, #fff);
  /* Sprint column gridlines, sized/positioned inline to match the track. */
  background-image: linear-gradient(to right, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 1px, transparent 1px);
  background-repeat: repeat-x;
  border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .28);
}
:root[data-theme="dark"] .eg-child-drawer {
  background-color: color-mix(in srgb, var(--eg-drawer-color) 55%, #000);
  background-image: linear-gradient(to right, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, .16) 1px, transparent 1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .5);
}
.eg-child-bar {
  position: absolute; display: flex; align-items: center;
  border: 1px solid rgba(0, 0, 0, .18); border-radius: 4px; box-sizing: border-box;
  overflow: hidden; text-decoration: none; z-index: 3; min-width: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
:root[data-theme="dark"] .eg-child-bar { border-color: rgba(255, 255, 255, .16); }
.eg-child-bar:hover { filter: brightness(1.08); z-index: 6; box-shadow: 0 3px 8px rgba(0, 0, 0, .30); }
/* Undated children get a hatched fill so it's clear their placement is inferred
   (an even slot of the epic span), not real scheduled dates. */
.eg-child-bar--undated {
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--text) 22%, var(--surface)) 0,
    color-mix(in srgb, var(--text) 22%, var(--surface)) 6px,
    color-mix(in srgb, var(--text) 34%, var(--surface)) 6px,
    color-mix(in srgb, var(--text) 34%, var(--surface)) 12px);
}
.eg-child-label {
  font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 7px;
  position: relative; z-index: 1;   /* sit above the progress fill, as .eg-bar-label does */
  display: flex; align-items: center; gap: 4px; width: 100%;
}
/* The title takes the slack and truncates, pushing the % badge to the right edge
   — the same arrangement as .eg-bar-title on the epic bar above it. */
.eg-child-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.eg-child-bar--undated .eg-child-label { color: var(--text-bright); text-shadow: none; }
/* Hatched (undated) children carry NO solid background — so the white wash the
   epic bars use for progress is invisible on them, and a wash of black is barely
   better against a hatch. Tint the completed fraction with the item's own state
   colour instead (handed in as --eg-child-color by the renderer): the done part
   reads as solid colour, the rest stays hatched, and the boundary is obvious.
   The rgba fallback covers a bar rendered before the property is set. */
.eg-child-bar--undated .eg-bar-fill {
  background: color-mix(in srgb, var(--eg-child-color, rgba(0, 0, 0, .5)) 72%, transparent);
  border-right: 2px solid var(--eg-child-color, rgba(0, 0, 0, .55));
}

/* Undated epics list under the board. */
.eg-undated { margin-top: 14px; border: 1px solid var(--border2); background: var(--surface); }
.eg-undated-toggle {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 12px; background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--text-dim); font-family: var(--font-ui); text-align: left;
}
.eg-undated-toggle:hover { color: var(--text); }
.eg-undated-caret { font-size: 9px; transition: transform .15s; }
.eg-undated-toggle--open .eg-undated-caret { transform: rotate(90deg); }
.eg-undated-count {
  font-size: 10px; padding: 1px 7px; border-radius: 9px;
  background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border2);
}
.eg-undated-table { width: 100%; margin: 0 0 8px; }
.eg-undated-table th, .eg-undated-table td { padding: 5px 12px; font-size: 12px; }

/* ── Multi-Repo Status Board (All Repos view) ──────────────────── */
#rp-mode-toggle.rp-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 0 0;
}
.rp-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
}
.rp-mode-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-dim);
  border: none;
  border-right: 1px solid var(--border2);
  transition: background .1s, color .1s;
}
.rp-mode-btn:last-child { border-right: none; }
.rp-mode-btn:hover:not(.rp-mode-btn-active) { color: var(--text); background: var(--surface2); }
.rp-mode-btn-active { background: #A4123F !important; color: #fff !important; }

.rp-board-root {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}
.rp-board-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 28px;
  background: #FBF4E6;
  border-bottom: 1px solid #f0e6cc;
  font-size: 12px;
  color: #8a6a16;
  line-height: 1.45;
}
.rp-board-banner-icon { color: #B07A00; font-size: 13px; }
.rp-board-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px 14px;
  border-bottom: 1px solid var(--border2);
}
.rp-board-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
  background: var(--surface);
}
.rp-board-source-btn:hover { border-color: #A4123F; }
.rp-board-ver-select {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 6px 28px 6px 10px;
  background-color: var(--surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 170px;
}
.rp-board-ver-select:focus { outline: none; border-color: #A4123F; }
.rp-board-ver-input {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 6px 10px;
  background-color: var(--surface);
  min-width: 170px;
}
.rp-board-ver-input:focus { outline: none; border-color: #A4123F; }
.rp-board-project-select {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 5px 28px 5px 11px;
  background-color: var(--surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.rp-board-project-select:hover { border-color: #A4123F; }
.rp-board-manage-link {
  margin-left: auto;
  font-size: 12px;
  color: #A4123F;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.rp-board-manage-link:hover { text-decoration: underline; }
.rp-board-manage-panel {
  padding: 16px 28px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.rp-board-manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  margin-bottom: 12px;
}
.rp-board-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--border2);
}
.rp-board-manage-check {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: #fff;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  flex: none;
  cursor: pointer;
}
.rp-board-manage-check-on { background: #A4123F; border-color: #A4123F; }
.rp-board-manage-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rp-board-manage-name-off { color: var(--text-dim); }
.rp-board-manage-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.rp-board-controls-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}
.rp-board-toggle-group { display: flex; align-items: center; gap: 10px; }
.rp-board-toggle-label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.rp-board-toggle-sep { width: 1px; height: 22px; background: var(--border2); }
.rp-board-filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 28px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}
.rp-board-total { font-size: 12.5px; font-weight: 700; color: var(--text-bright); }
.rp-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rp-filter-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 3px;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border2);
  transition: background .1s, color .1s;
}
.rp-filter-chip:hover:not(.rp-filter-chip-active) { color: var(--text); border-color: #A4123F; }
.rp-filter-chip-active { background: #A4123F; color: #fff; border-color: #A4123F; }
.rp-board-col-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 28px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border2);
}
.rp-board-col-chevron { width: 14px; flex: none; }
.rp-board-col-name    { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 8px; }
.rp-board-col-range   { width: 240px; flex: none; }
.rp-board-col-status  { width: 120px; flex: none; }
.rp-board-col-db      { display: none; } /* DB scripts hidden from this view (UI only, backend still computes it) */
.rp-board-col-miss    { width: 44px; text-align: right; flex: none; }
.rp-board-col-open    { width: 64px; text-align: right; flex: none; }
.rp-board-rows { }
.rp-board-row-wrap { border-bottom: 1px solid var(--border2); }
.rp-board-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 28px;
}
.rp-board-row-clickable { cursor: pointer; }
.rp-board-row-clickable:hover { background: var(--surface2); }
.rp-board-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
}
.rp-board-open-link {
  font-size: 11.5px;
  font-weight: 600;
  color: #A4123F;
  cursor: pointer;
}
.rp-board-open-link:hover { text-decoration: underline; }
.rp-board-open-link-disabled { color: #ccc; cursor: default; }
.rp-board-open-link-disabled:hover { text-decoration: none; }
.rp-board-expand {
  /* Single source of truth for the shared left edge (section titles, the
     "Change range" link, and — via .rp-board-detail-item--gutter below — the
     id/title column) plus the two figures that define the badge gutter, so
     the two can't drift out of sync with each other. */
  --rp-content-margin: 54px;
  --rp-badge-width: 15px;
  --rp-row-gap: 12px;
  background: #fcfafb;
  padding: 10px 28px 12px var(--rp-content-margin);
  border-top: 1px solid var(--border2);
}
.rp-board-detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rp-board-detail-item {
  display: flex;
  gap: var(--rp-row-gap, 12px);
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border2);
}
/* Colorblind-accessible letter for the row's status badge — color-only
   would otherwise be the one signal a colorblind viewer can't read, unlike
   the flag chips, which already carry a text label. Fixed size regardless
   of letter so it doesn't perturb the fixed-width columns after it. */
.rp-board-detail-colorcode {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--rp-badge-width, 15px); height: 15px; flex-shrink: 0;
  border-radius: 3px; color: #fff; font-size: 9.5px; font-weight: 700;
}
/* Badge fills — the R/Y/G letter is white, so each needs ≥4.5:1 white-on-fill.
   That's stricter than the --red/--amber/--green tokens (tuned for dark-on-white
   and failing here: amber 2.9:1, green 4.4:1, --red 4.0:1 in dark), so these are
   fixed, same-hue tones vetted for white text — theme-independent, AA in both. */
.rp-board-detail-colorcode.rp-cc-unknown   { background: #6b7280; }  /* 4.83:1 */
.rp-board-detail-colorcode.rp-cc-notready  { background: #D50032; }  /* 5.42:1 */
.rp-board-detail-colorcode.rp-cc-pomissing { background: #8f6100; }  /* 5.42:1 */
.rp-board-detail-colorcode.rp-cc-ready     { background: #00794b; }  /* 5.47:1 */
/* Rows that lead with a status badge (.rp-board-detail-colorcode) hang that
   badge in the gutter to the left of .rp-board-expand's content margin,
   instead of indenting the row's own content past it. Pull the row left by
   exactly badge-width + the row's flex gap — both read from the same
   custom properties the badge and row gap use above, so this can't drift
   out of sync with them — and the next column (the id/title text) lands
   back on the shared content margin: the same left edge as the section
   titles and the "Change range" link, which have no badge and sit at the
   margin directly. */
.rp-board-detail-item--gutter { margin-left: calc(-1 * (var(--rp-badge-width, 15px) + var(--rp-row-gap, 12px))); }
.rp-board-detail-hash   { width: 70px; color: #A4123F; font-family: var(--font-mono); font-size: 11.5px; }
/* ID and PR cells are subordinate to the title via typography (smaller mono
   size + 500 weight), not by dropping contrast — both use --text-meta, which
   clears WCAG AA (≥4.5:1) in light and dark. The title stays dominant because
   it renders in the darker/brighter --text. */
.rp-board-detail-item-id { width: 68px; color: var(--text-meta); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; text-decoration: none; }
.rp-board-detail-item-id:hover { text-decoration: underline; color: var(--primary); }
.rp-board-detail-author { width: 200px; flex-shrink: 0; color: var(--text-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-board-detail-pr     { width: 75px; flex-shrink: 0; }
/* The PR link keeps the .rp-db-pr purple (#6E4AB8 ≈ 6.3:1 on white) — it reads
   as a distinct link accent rather than plain grey metadata, and already clears
   WCAG AA, so it needs no --text-meta override. font-weight matches the ID cell. */
.rp-board-detail-pr .rp-db-pr { font-weight: 500; }
.rp-board-detail-area   { width: 76px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="dark"] .rp-board-detail-area { color: #c9d1d9; }
/* Fixed footprint, always rendered (empty when there's nothing rolled up) so
   its presence/absence doesn't perturb the title/author columns the way a
   variable-width inline element would (see .rp-fc-flags fix above). */
.rp-board-detail-rollup { width: 72px; flex-shrink: 0; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.rp-board-detail-rollup:not(:empty) { cursor: pointer; }
.rp-board-detail-rollup:not(:empty):hover { color: var(--primary); }
.rp-board-detail-change-link {
  font-size: 11.5px;
  font-weight: 600;
  color: #A4123F;
  cursor: pointer;
  margin-top: 10px;
  display: inline-block;
}
.rp-board-detail-change-link:hover { text-decoration: underline; }
/* Groups Epic/Feature rows that share one linked PR (see _rpClusterByPr) so
   the PR number is stated once instead of repeating on every row. The wrapper
   div itself is unpadded/unindented — the item rows inside it (each already
   carrying .rp-board-detail-item--gutter) line up exactly like standalone
   rows, so shifting the wrapper would double the gutter offset on its own
   children. The header below is shifted instead, on its own. */
.rp-board-pr-group { margin: 2px 0 10px; }
.rp-board-pr-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(48,85,218,.04);
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 2px;
  font-size: 11px;
  /* Pulls the header's left edge out to the same gutter the item rows' color
     badge sits in (see .rp-board-detail-item--gutter), so the PR group reads
     as part of the same left-aligned column as the rest of the work items
     instead of starting a badge-width-plus-gap to the right of them. Only
     the header shifts (not .rp-board-pr-group) — as a width:auto block box,
     the negative margin-left grows its own width to match, leaving the
     right edge (and the rollup chips pinned to it, see
     .rp-board-pr-rollup-group) exactly where it already was. */
  margin-left: calc(-1 * (var(--rp-badge-width, 15px) + var(--rp-row-gap, 12px)));
}
.rp-board-pr-header:hover { background: rgba(48,85,218,.08); }
.rp-board-pr-header .rp-db-pr { font-weight: 600; }
.rp-board-pr-chevron {
  width: 10px;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
}
.rp-board-pr-header-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.rp-board-pr-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Pins the rollup chips to the same column as .rp-fc-flags on the item rows
   below (flex: 0 0 190px there — copied here, not re-derived, so the two
   can't drift independently). The negative margin cancels this header's own
   right padding so that fixed width's right edge lands on the row's right
   edge, same as .rp-fc-flags does sitting flush in the unpadded item rows. */
.rp-board-pr-rollup-group {
  display: flex;
  flex: 0 0 190px;
  gap: 4px;
  margin-right: -10px;
}
.rp-board-pr-rollup {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.rp-board-pr-rollup-ok {
  color: var(--green);
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.3);
}
.rp-board-pr-rollup-attn {
  color: #e11d48;
  background: rgba(225,29,72,.1);
  border-color: rgba(225,29,72,.3);
}
.rp-board-pr-rollup-warn {
  color: var(--amber);
  background: rgba(180,83,9,.1);
  border-color: rgba(180,83,9,.3);
}
.rp-board-pr-rollup-neutral {
  color: var(--text-dim);
  background: rgba(107,114,128,.08);
  border-color: rgba(107,114,128,.30);
}
.rp-board-excluded-note {
  background: var(--surface2);
  padding: 12px 28px 13px 54px;
  border-top: 1px solid var(--border2);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.rp-board-excluded-link {
  color: #A4123F;
  font-weight: 600;
  cursor: pointer;
}
.rp-board-excluded-link:hover { text-decoration: underline; }
.rp-board-override-panel {
  background: #f7f9fc;
  padding: 14px 28px 14px 54px;
  border-top: 1px solid #e7eef7;
}
.rp-board-override-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6f86ad;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.rp-board-override-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.rp-board-override-select {
  font-size: 12.5px;
  color: var(--text);
  border: 1px solid #cdd6e3;
  border-radius: 4px;
  padding: 7px 28px 7px 10px;
  background-color: var(--surface);
  min-width: 160px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.rp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.rp-match-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  margin-top: 3px;
}
.rp-db-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  color: #6E4AB8;
  background: #F1ECFA;
}
.rp-db-badge-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  color: #fff;
  font: 700 9px var(--font-mono);
}
.rp-db-id, .rp-db-pr {
  color: #6E4AB8;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.rp-db-section {
  border-top: 5px solid #f0ecf8;
}
.rp-db-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px;
  background: #F1ECFA;
  border-bottom: 1px solid #e6ddf4;
  flex-wrap: wrap;
}
.rp-db-section-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6E4AB8;
  background: #fff;
  border: 1px solid #ddd0f0;
  padding: 2px 7px;
  border-radius: 3px;
}
.rp-db-section-total { font-size: 12.5px; font-weight: 700; color: #3f2e63; }
.rp-db-section-note  { margin-left: auto; font-size: 11px; color: #8a7aae; }
.rp-db-section-svc {
  padding: 8px 28px 10px 40px;
  border-bottom: 1px solid #f5f2fa;
}
.rp-db-section-svc-name {
  font-size: 11px;
  font-weight: 700;
  color: #6E4AB8;
  margin-bottom: 5px;
}
.rp-db-section-item {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 12px;
}
/* Fixed-width columns so GIT and ATTACH rows (both rendered by _scRow) line up
   exactly — each zone always occupies its slot even when empty. */
.rp-db-id    { min-width: 60px; flex: none; }
.rp-db-pr    { white-space: nowrap; }
.rp-db-col-pr { width: 76px; flex: none; font-size: 11.5px; }
.rp-db-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-db-col-naming { width: 66px; flex: none; justify-content: flex-end; }
.rp-db-col-owner {
  width: 150px;
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-db-col-pills {
  width: 210px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.rp-db-col-source { flex: none; }
.rp-db-assignee { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.rp-text-dim { color: var(--text-dim); }

/* ── Git-folder DB scripts (ReleaseScripts/) — source badge, phase groups,
   summary strip. Additive to the .rp-db-section-* styles above; the legacy
   dbProduct-grouped panel is untouched. */
.rp-db-source {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.rp-db-source-git {
  color: #1d7a4c;
  background: rgba(29, 122, 76, .1);
  border-color: rgba(29, 122, 76, .3);
}
.rp-db-source-attachment {
  color: var(--text-dim);
  background: rgba(120, 120, 120, .1);
  border-color: rgba(120, 120, 120, .25);
}
.rp-db-phase {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6E4AB8;
  background: #F1ECFA;
  border: 1px solid #ddd0f0;
  padding: 1px 6px;
  border-radius: 3px;
}
.rp-db-summary-strip {
  font-size: 11px;
  color: #6b7280;
  padding: 4px 0 8px;
}
/* Phase badge on a git-sourced script chip — same shell as .rp-db-source, with
   one accent per ReleaseScripts/ subfolder so Pre/Post/Verification/Rollback are
   tellable apart at a glance in the single flat chip row. */
.rp-db-source-phase-pre          { color: #1d4ed8; background: rgba(29, 78, 216, .1);  border-color: rgba(29, 78, 216, .3); }
.rp-db-source-phase-post         { color: #6E4AB8; background: rgba(110, 74, 184, .1); border-color: rgba(110, 74, 184, .3); }
.rp-db-source-phase-verification { color: #1d7a4c; background: rgba(29, 122, 76, .1);  border-color: rgba(29, 122, 76, .3); }
.rp-db-source-phase-rollback     { color: #a1531b; background: rgba(161, 83, 27, .1);  border-color: rgba(161, 83, 27, .3); }
.rp-db-source-phase-other        { color: var(--text-dim); background: rgba(120, 120, 120, .1); border-color: rgba(120, 120, 120, .25); }

.rp-db-phase-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── GIT section rolled-up stage chips (one row per ticket) ── */
.rp-db-section-svc-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  margin: 2px 0 6px;
}
.rp-db-stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 148px;
  flex: none;
}
.rp-db-stage-chip {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
  background: transparent;
  white-space: nowrap;
}

/* ── Multi-repo board — dark theme overrides ─────────────────────────
   The board markup hard-codes a light palette; these rules re-skin the
   panels, links and the DATABASE SCRIPTS sub-panel for dark mode so they
   stop rendering as light slabs / low-contrast text on the dark page. */
:root[data-theme="dark"] .rp-board-open-link,
:root[data-theme="dark"] .rp-board-detail-hash,
:root[data-theme="dark"] .rp-board-detail-change-link,
:root[data-theme="dark"] .rp-board-excluded-link { color: #ff6b94; }
:root[data-theme="dark"] .rp-board-open-link-disabled { color: var(--text-muted); }

:root[data-theme="dark"] .rp-board-expand { background: var(--surface2); }

:root[data-theme="dark"] .rp-board-override-panel { background: var(--surface2); border-top-color: var(--border2); }
:root[data-theme="dark"] .rp-board-override-title  { color: var(--text-dim); }
:root[data-theme="dark"] .rp-board-override-select { border-color: var(--border2); }

/* DATABASE SCRIPTS sub-panel — purple-tinted dark surfaces */
:root[data-theme="dark"] .rp-db-section        { border-top-color: #2a2335; }
:root[data-theme="dark"] .rp-db-section-header { background: #1d1726; border-bottom-color: #2a2335; }
:root[data-theme="dark"] .rp-db-section-svc    { border-bottom-color: var(--border2); }
:root[data-theme="dark"] .rp-db-section-tag    { background: var(--bg); border-color: #3a2f4d; color: #c4a9f0; }
:root[data-theme="dark"] .rp-db-section-total    { color: var(--text-bright); }
:root[data-theme="dark"] .rp-db-section-note     { color: var(--text-dim); }
:root[data-theme="dark"] .rp-db-section-svc-name { color: #c4a9f0; }
:root[data-theme="dark"] .rp-db-badge { color: #c4a9f0; background: #241c33; }
:root[data-theme="dark"] .rp-db-phase { color: #c4a9f0; background: #241c33; border-color: #3a2f4d; }
:root[data-theme="dark"] .rp-db-source-git { color: #4fd88a; background: rgba(79,216,138,.12); border-color: rgba(79,216,138,.35); }
:root[data-theme="dark"] .rp-db-source-attachment { color: var(--text-dim); background: rgba(200,200,200,.08); border-color: rgba(200,200,200,.2); }
:root[data-theme="dark"] .rp-db-source-phase-pre          { color: #7ea8ff; background: rgba(126,168,255,.12); border-color: rgba(126,168,255,.35); }
:root[data-theme="dark"] .rp-db-source-phase-post         { color: #c4a9f0; background: rgba(196,169,240,.12); border-color: rgba(196,169,240,.35); }
:root[data-theme="dark"] .rp-db-source-phase-verification { color: #4fd88a; background: rgba(79,216,138,.12);  border-color: rgba(79,216,138,.35); }
:root[data-theme="dark"] .rp-db-source-phase-rollback     { color: #e8a15c; background: rgba(232,161,92,.12);  border-color: rgba(232,161,92,.35); }
:root[data-theme="dark"] .rp-db-source-phase-other        { color: var(--text-dim); background: rgba(200,200,200,.08); border-color: rgba(200,200,200,.2); }
:root[data-theme="dark"] .rp-db-id,
:root[data-theme="dark"] .rp-db-pr    { color: #c4a9f0; }

/* ── Categories: backlog heat map ──────────────────────────────────── */
/* Status colours carry the meaning, so each cell also prints its score and
   pairs the fill with a distinct text weight — never colour alone. */
.cat-hm { border-collapse: separate; border-spacing: 2px; width: 100%; }
.cat-hm th {
  font-size: 10px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 4px; text-align: center;
}
.cat-hm th.cat-hm-area { text-align: left; width: 168px; }
.cat-hm td.cat-hm-area {
  font-size: 12px; color: var(--text); padding: 2px 6px; white-space: nowrap;
}
.cat-hm-cell {
  text-align: center; font-size: 11px; font-variant-numeric: tabular-nums;
  padding: 6px 4px; border-radius: 3px; cursor: pointer; min-width: 46px;
  border: 1px solid transparent; transition: outline 0.1s;
}
.cat-hm-cell:hover { outline: 2px solid var(--text-dim); }
.cat-hm-none    { background: transparent;         color: var(--text-dim); cursor: default; }
.cat-hm-grey    { background: rgba(128,128,128,0.16); color: var(--text-dim); }
.cat-hm-green   { background: rgba(46,125,50,0.30);  color: #cdebd0; font-weight: 600; }
.cat-hm-neutral { background: rgba(128,140,155,0.22); color: var(--text); }
.cat-hm-amber   { background: rgba(180,83,9,0.42);   color: #ffe2bd; font-weight: 700; }
.cat-hm-red     { background: rgba(178,34,34,0.55);  color: #ffd9d9; font-weight: 700; }
/* P1 marker is an outline + superscript, layered over the trend colour so it
   never masks whether the area is improving. */
.cat-hm-p1 { border-color: #ff6b6b; box-shadow: inset 0 0 0 1px rgba(255,107,107,0.55); }
.cat-hm-cell sup { color: #ff6b6b; font-weight: 700; }
.cat-hm-delta { font-size: 11px; font-variant-numeric: tabular-nums; padding-left: 8px; }
.cat-hm-key {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 14px;
  font-size: 11px; color: var(--text-dim);
}
.cat-hm-key i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; font-style: normal; }

/* ── Categories: sub-category rows in the Product Areas table ───────── */
.cat-twisty {
  display: inline-block; width: 14px; text-align: center; cursor: pointer;
  color: var(--text-dim); font-size: 10px; user-select: none;
}
.cat-twisty:hover { color: var(--text); }
.cat-twisty-spacer { display: inline-block; width: 14px; }
/* Children read as subordinate: indented, lighter, smaller — so the parent
   rows still scan as the primary list. */
.cat-child-row > td { font-size: 12px; color: var(--text-dim); }
.cat-child-row:hover > td { color: var(--text); }
.cat-child-name { padding-left: 30px !important; }
.cat-child-name::before { content: '└ '; opacity: 0.5; }
/* Definition marker. Deliberately low-contrast until hovered: it appears on every
   area and sub-category row, so at full strength it would out-shout the counts
   that the table exists to show. cursor:help is the affordance that it is hoverable. */
.cat-info {
  cursor: help; color: var(--text-muted); font-size: 11px; margin-left: 5px;
  opacity: 0.55; transition: opacity .12s, color .12s; user-select: none;
}
.cat-info:hover { opacity: 1; color: var(--primary); }
/* Whole-row hover lifts every marker in the row, so it is discoverable without
   having to land on the glyph itself first. */
tr:hover > td > .cat-info { opacity: 0.9; }

/* Heat map sub-category rows: same trend colours, visually subordinate label. */
.cat-hm-childrow td.cat-hm-area {
  font-size: 11px; color: var(--text-dim); padding-left: 26px;
}
.cat-hm-childrow td.cat-hm-area::before { content: '└ '; opacity: 0.5; }
.cat-hm-childrow .cat-hm-cell { font-size: 10px; opacity: 0.88; }

/* Breathing room between the heat map and the Product Areas table below it —
   the legend sits tight to the panel edge otherwise and the two read as one block. */
#cat-heatmap-panel { margin-bottom: 22px; padding-bottom: 6px; }
#cat-heatmap-legend { padding-bottom: 4px; }

/* ── Health Trends: traffic split by server ──────────────────────────────────
   A single 100% stacked bar (part-to-whole). Per the mark spec: capped
   thickness, 4px rounded outer data-ends with square interior edges, and a 2px
   gap in the SURFACE color between touching segments so neighbouring hues never
   share an edge. The gap is drawn as a border-right on each segment rather than
   flex-gap so it lands inside the 100% width and the shares stay true. */
.traffic-split { margin: 0 0 18px; }
.traffic-split-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 7px;
}
.traffic-split-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
}
.traffic-split-sub { font-size: 11px; color: var(--text-dim); }

.traffic-bar {
  display: flex; width: 100%; height: 22px;      /* ≤ 24px per the mark spec */
  border-radius: 4px; overflow: hidden;
  background: var(--surface2);
}
.traffic-seg {
  /* min-width must exceed the 2px gap, or a sub-0.5% segment renders as pure
     border and disappears: 0.43% of a 600px bar is 2.6px, minus the 2px gap
     leaves 0.6px of colour. 6px guarantees >=4px of visible fill at any viewport
     and doubles as a hit target larger than the mark. */
  height: 100%; min-width: 6px;
  border-right: 2px solid var(--surface);        /* the 2px surface gap */
  box-sizing: border-box;
  cursor: default;
  transition: filter .12s ease;
  position: relative;
}
.traffic-seg:last-child { border-right: 0; }
/* Hovered mark lifts so the reader sees it respond. */
.traffic-seg:hover, .traffic-seg:focus-visible { filter: brightness(1.12); outline: none; }
.traffic-seg:focus-visible { box-shadow: inset 0 0 0 2px var(--text-bright); }
/* Marks which server the charts below are currently filtered to. */
.traffic-seg.is-selected { box-shadow: inset 0 0 0 2px var(--text-bright); }

/* In-segment direct label — only rendered when the share is wide enough to fit
   it comfortably; narrower segments rely on the legend and the hover tooltip. */
.traffic-seg-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none; white-space: nowrap;
}

/* Legend. Always present (≥2 series) and carries name + count + share, which is
   also the "relief" the light-mode contrast WARN requires: identity and value are
   never color-alone. */
.traffic-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px;
}
.traffic-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim);
}
.traffic-legend-key { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.traffic-legend-name { color: var(--text); font-weight: 600; }
.traffic-legend-item.is-selected .traffic-legend-name { text-decoration: underline; }

/* Tooltip: values lead, labels follow; series keyed by a short stroke of the
   series color rather than a filled box (data-weight ink doing a label's job). */
.traffic-tip {
  position: fixed; z-index: 3000; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  padding: 7px 10px; font-size: 12px; color: var(--text);
  max-width: 320px; display: none;
}
.traffic-tip-row { display: flex; align-items: center; gap: 7px; }
.traffic-tip-stroke { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.traffic-tip-val { font-weight: 700; font-family: var(--font-mono); }
.traffic-tip-name { color: var(--text-dim); }
.traffic-tip-note { margin-top: 4px; font-size: 11px; color: var(--text-dim); }

/* ── Health Trends: worst failure rates by server ────────────────────────────
   A short ranked list, not a chart: five rows of one number each is a table's
   job, and a bar chart of five wildly different rates (99.88% next to 0.29%)
   would just be one long bar and four stubs. Clicking anywhere opens the full
   per-server list in the shared drill drawer. */
.fail-leaders {
  margin: 0 0 18px; padding: 10px 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  cursor: pointer;
}
.fail-leaders:hover { border-color: var(--primary); }
.fail-leaders:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fail-leaders-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px;
}
.fail-leaders-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim);
}
.fail-leaders-sub { font-size: 11px; color: var(--text-dim); }
.fail-leaders-cta { margin-left: auto; font-size: 11px; color: var(--primary); font-weight: 600; }

.fail-leaders-row {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0; font-size: 12px;
}
.fail-leaders-name {
  color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
/* The rate is always rendered as text, so the colour is emphasis on a value that
   is already readable — never the only carrier of meaning. */
.fail-leaders-rate {
  font-family: var(--font-mono); font-weight: 700; flex: 0 0 auto; min-width: 62px; text-align: right;
}
.fail-leaders-rate.sev-critical { color: var(--danger, #d03b3b); }
.fail-leaders-rate.sev-serious  { color: #ec835a; }
.fail-leaders-rate.sev-warning  { color: #b8860b; }
.fail-leaders-rate.sev-ok       { color: var(--text-dim); }
:root[data-theme="dark"] .fail-leaders-rate.sev-warning { color: #fab219; }
.fail-leaders-counts {
  font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
  flex: 0 0 auto; min-width: 150px; text-align: right;
}
.fail-leaders-empty { font-size: 12px; color: var(--text-dim); }

/* ── Resources tab: environment deletion dialog ──────────────────────────────
   Its own overlay because the app has no shared modal primitive (the drill-down
   drawer is a side panel, wrong shape for a blocking confirmation). Styled to
   read as dangerous without being lurid: red is reserved for the action itself
   and the failure states, so it still means something when it appears. */
.res-del-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(8, 11, 18, 0.68);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px;
  overflow-y: auto;
}
.res-del-modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); padding: 18px 20px 20px;
  width: 100%; max-width: 620px; color: var(--text);
}
.res-del-head { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.res-del-sub  { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.res-del-warn {
  background: rgba(236, 131, 90, 0.12); border-left: 3px solid #ec835a;
  padding: 7px 10px; margin: 8px 0; font-size: 12px; line-height: 1.45;
}
.res-del-count {
  margin: 12px 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim);
}
/* Scrolls rather than truncates: every pipeline in the blast radius must be
   readable, and an environment can legitimately own a dozen. */
.res-del-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border2); }
.res-del-list table { margin: 0; }
.res-del-list td { font-size: 12px; padding: 4px 8px; }
.res-del-label { display: block; margin: 14px 0 5px; font-size: 12px; color: var(--text-dim); }
.res-del-input {
  width: 100%; padding: 7px 10px; font-size: 13px; font-family: var(--font-mono);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
}
.res-del-input:focus { outline: none; border-color: var(--primary); }
.res-del-msg { font-size: 12px; min-height: 16px; margin-top: 5px; }
.res-del-danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.res-del-danger:hover:not(:disabled) { filter: brightness(1.1); }
.res-del-danger:disabled { opacity: 0.45; cursor: not-allowed; }
/* Trash icon before the environment name. Quiet until hovered: it appears on
   every deletable row and should not compete with the names it sits beside.
   The spacer keeps names aligned on rows that are too recent to delete. */
.res-trash {
  display: inline-block; width: 18px; margin-right: 6px; cursor: pointer;
  line-height: 1; user-select: none; text-align: center; vertical-align: -2px;
  /* No opacity fade. Dimming by opacity pushes the icon TOWARDS the page
     background, which made it wash out on white and disappear on dark — the
     exact same rule failing in opposite directions. Contrast is set with an
     explicit per-theme colour instead. */
  color: #5A6570;                       /* 5.6:1 on the light surface */
  transition: color .12s, transform .08s;
}
:root[data-theme="dark"] .res-trash { color: #a9b4c0; }   /* 6.9:1 on the dark surface */
/* Whole-row hover strengthens every icon in the row, so it is findable without
   having to hit the 18px target first. */
tr:hover > td > .res-trash { color: var(--text); }
.res-trash:hover, .res-trash:focus-visible {
  color: var(--red); transform: scale(1.15); outline: none;
}
.res-trash-spacer { display: inline-block; width: 18px; margin-right: 6px; }

/* ── Production Bugs section, top of Planning > Backlog Health ───────────── */
/* Visually a distinct card rather than blending into the backlog tables below:
   it is the only period-scoped thing on this tab, and the boundary is what
   stops a reader assuming the runway numbers underneath share its window. */
.bb-section {
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--purple);
  padding: 12px 14px; margin-bottom: 16px;
}
.bb-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bb-title { font-size: 14px; font-weight: 700; color: var(--text); }
/* The section title IS the population picker. Styled to read as a heading first
   and a control second: no border until hovered, so it does not look like a
   stray form field, but the caret and the pointer make it obviously clickable. */
.bb-title-select {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-family: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
}
.bb-title-select:hover  { border-color: var(--border2); background: var(--surface); }
.bb-title-select:focus  { outline: 2px solid var(--primary); outline-offset: 1px; }
.bb-title-select option { font-weight: 400; background: var(--surface); color: var(--text); }

/* Segmented control for the date range.
   Both options are always visible with the active one filled, so the label never
   has to be read as an instruction. The previous single button was labelled with
   its DESTINATION ("Last 7 days") while the team combo beside it was labelled
   with its CURRENT state ("All teams") — two neighbouring controls reading in
   opposite directions. */
.bb-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 4px; overflow: hidden; }
.bb-seg-btn {
  font-family: var(--font-ui, inherit); font-size: 11px; white-space: nowrap;
  padding: 3px 10px; cursor: pointer;
  background: var(--surface2); color: var(--text-dim); border: none;
}
.bb-seg-btn + .bb-seg-btn { border-left: 1px solid var(--border2); }
.bb-seg-btn:hover:not(.bb-seg-on) { background: var(--surface); color: var(--text); }
.bb-seg-on {
  background: var(--primary); color: #fff; font-weight: 600;
  /* Not just colour: the active segment is also the only one carrying weight,
     so the state survives a colour-blind reader and a greyscale screenshot. */
  cursor: default;
}
/* The window is stated, not implied — this tab has no visible Period strip. */
.bb-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* Names the bug population, because it differs from the Code Quality tab's. */
.bb-scope { font-size: 10px; color: var(--text-muted); margin-top: 3px; cursor: help; }
.bb-actions { margin-left: auto; display: flex; gap: 6px; }
.bb-actions .btn { font-size: 11px; padding: 3px 10px; white-space: nowrap; }

/* Team filter: a button that opens a checkbox list. A dropdown rather than a row
   of chips because the team list is long enough to wrap over several lines and
   push the table down the page. */
.bb-combo { position: relative; }
.bb-combo-btn { white-space: nowrap; }
.bb-caret { font-size: 8px; opacity: .7; margin-left: 2px; }
.bb-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 260px; max-width: 340px;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.bb-menu-head {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid var(--border2); background: var(--surface2);
}
.bb-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--primary);
}
.bb-link:hover { text-decoration: underline; }
.bb-menu-close { margin-left: auto; color: var(--text-dim); font-weight: 700; }
/* Capped so a long roster scrolls inside the menu instead of running off the
   bottom of the viewport. */
.bb-menu-list { max-height: 320px; overflow-y: auto; }
.bb-team-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.bb-team-row:hover { background: var(--surface2); }
.bb-team-row input { cursor: pointer; margin: 0; }
.bb-team-name { flex: 1; overflow-wrap: anywhere; }
/* Activity count, so the list is ordered and readable at a glance rather than
   being an undifferentiated wall of team names. */
.bb-team-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* "only" stays invisible until the row is hovered: it is a shortcut, not a
   competing control next to the checkbox. */
.bb-team-only {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 10px; color: var(--primary); opacity: 0; transition: opacity .1s;
}
.bb-team-row:hover .bb-team-only { opacity: 1; }
.bb-team-only:hover { text-decoration: underline; }

/* The untagged row in the TAG combo. It sits at the top of the list and is not a
   tag — it is the bugs no tag can speak for — so it gets a rule under it rather
   than blending into the tag names above which it sits. No "only" shortcut here:
   "only untagged" is reached by unticking the tags, and a second path to the same
   state in a menu this small is clutter. */
.bb-tag-untagged {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.bb-tag-untagged .bb-team-name em { color: var(--text-dim); font-style: italic; }

.bb-body { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin-top: 10px; }

/* Net movement gets its own tile: "did the backlog grow or shrink" is the one
   number a planning conversation actually starts from. */
.bb-net {
  background: var(--surface); border: 1px solid var(--border2);
  padding: 10px 14px; min-width: 150px; display: flex;
  flex-direction: column; justify-content: center;
}
.bb-net-val { font-size: 26px; font-weight: 800; line-height: 1; }
.bb-net-lab { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.bb-net-sub { font-size: 10px; color: var(--text-muted); margin-top: 5px; }

.bb-table {
  flex: 1; min-width: 320px; border-collapse: collapse; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border2);
}
.bb-table th {
  text-align: left; padding: 7px 12px; background: var(--surface2);
  font-weight: 600; white-space: nowrap;
}
.bb-table td { padding: 6px 12px; }
.bb-table tfoot td { border-top: 2px solid var(--border2); font-weight: 700; }
/* Numeric columns: header AND cells centred, so each count sits under its own
   title. Both selectors are needed and both are qualified with .bb-table —
   the global `thead th` rule sets text-align:left, and a bare `.bb-num` loses
   to `.bb-table th` on specificity, which left the headers aligned left while
   the counts sat hard right. tabular-nums keeps the digits in a column so a
   centred number is still scannable against the rows above and below it. */
.bb-table th.bb-num,
.bb-table td.bb-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bb-opened { color: #dc2626; }
.bb-closed { color: var(--green); }
.bb-pcell { white-space: nowrap; }
.bb-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 8px; vertical-align: middle;
}

.bb-sumbar { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-sumbar .btn { font-size: 12px; padding: 6px 14px; }
.bb-sumnote { font-size: 10px; color: var(--text-muted); }
/* Export status. Lives beside the button rather than in the summary panel below:
   a browser download gives no prompt and no confirmation of its own, so both
   "here is where it went" and "here is why it did not" have to appear at the
   point of the click. Basis is 100% so it takes its own line when the bar wraps,
   keeping a long filename off the end of the buttons. */
.bb-pptnote { font-size: 11px; flex-basis: 100%; }
.bb-pptnote.ok   { color: var(--green); }
.bb-pptnote.err  { color: var(--red); font-weight: 600; }

/* No-activity explanation for the PowerPoint export. Self-contained overlay:
   there is no shared modal in this app, so it carries its own backdrop/card. */
.bb-dialog-overlay {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bb-dialog {
  position: relative;
  background: var(--surface2); border: 1px solid var(--border2);
  max-width: 460px; width: 100%;
  padding: 20px 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.bb-dialog-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 15px; line-height: 1;
}
.bb-dialog-x:hover { color: var(--text-bright); }
.bb-dialog-title {
  font-size: 15px; font-weight: 700; color: var(--text-bright);
  margin-bottom: 12px; padding-right: 20px;
}
.bb-dialog-body { font-size: 13px; line-height: 1.6; color: var(--text); }
.bb-dialog-body p { margin: 0 0 10px; }
.bb-dialog-body p:last-child { margin-bottom: 0; }
.bb-dialog-actions {
  margin-top: 18px; display: flex; justify-content: flex-end;
}
.bb-dialog-actions .btn { font-size: 12px; padding: 6px 18px; }
.bb-note {
  font-size: 12px; color: var(--text-dim); padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border2); margin-top: 10px;
}
.bb-err {
  font-size: 12px; color: var(--red); padding: 10px 12px; margin-top: 10px;
  border-left: 3px solid var(--red); background: var(--surface);
}

/* The AI summary. Its left border echoes the net direction (green = shrank). */
.bb-sum {
  margin-top: 10px; background: var(--surface); border: 1px solid var(--border2);
  border-left: 3px solid var(--green); padding: 14px 16px;
}
.bb-sum-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bb-sum-headline { font-size: 14px; font-weight: 800; color: var(--text); line-height: 1.4; }
.bb-regen { font-size: 10px; padding: 3px 8px; white-space: nowrap; }
.bb-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bb-stat { background: var(--surface2); border: 1px solid var(--border2); padding: 8px 12px; min-width: 90px; }
.bb-stat-l { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.bb-stat-v { font-size: 18px; font-weight: 800; }
.bb-prose { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-top: 10px; }
.bb-p { margin: 0; }
.bb-sec { margin-top: 12px; }
.bb-sec-t {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px;
}
.bb-themes { display: grid; gap: 8px; }
.bb-theme {
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--green); padding: 10px 12px;
}
.bb-theme-t { font-size: 12px; font-weight: 700; color: var(--text); }
.bb-theme-n { font-size: 12px; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.bb-theme-x { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.bb-risk {
  margin-top: 12px; background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid #eab308; padding: 10px 12px;
}
.bb-risk-b { font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.bb-fixes { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.bb-sum-foot { margin-top: 10px; font-size: 10px; color: var(--text-muted); }

/* ── Capacity tab (Quality) ──────────────────────────────────────────────── */
.cap-block { margin-bottom: 26px; }
.cap-h2 {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
/* The window each half uses. First Response follows the global period, but
   utilisation is per calendar month — two different scopes on one tab, so each
   one states its own rather than letting the reader assume they match. */
.cap-win { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.cap-month {
  font-size: 11px; padding: 2px 6px; background: var(--surface2);
  border: 1px solid var(--border2); color: var(--text);
}
/* The formula, written where the number is. Both of these are definitions people
   argue about, and an unexplained percentage invites the wrong argument. */
.cap-def {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.55;
  margin-bottom: 10px; max-width: 900px;
}
.cap-note {
  font-size: 12px; color: var(--text-dim); padding: 10px 12px;
  background: var(--surface2); border: 1px solid var(--border2);
}
.cap-hint { font-size: 10.5px; color: var(--text-muted); }
.cap-gate { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }
.cap-link {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  font-size: 11.5px; color: var(--primary);
}
.cap-link:hover { text-decoration: underline; }

.cap-table { width: 100%; }
/* Header and cells share one alignment so each figure sits under its own title. */
.cap-table th.cap-num,
.cap-table td.cap-num { text-align: center; font-variant-numeric: tabular-nums; }
.cap-table tbody tr:hover td { background: var(--row-hover); }
/* A bar behind the percentage: four people at 43/51/56/66% are hard to rank as
   bare numbers and trivial to rank as lengths. */
.cap-bar {
  height: 4px; background: var(--surface2); border-radius: 2px;
  overflow: hidden; margin-bottom: 3px;
}
.cap-bar-fill { height: 100%; border-radius: 2px; }

/* ── AI Priority tab (Quality) ───────────────────────────────────────────── */
/* Three columns and two of them are prose, so the table is laid out by ratio
   rather than left to shrink-to-fit: without this the Description column takes
   whatever is left after a long title and the rows become unreadable. */
.ap-table { table-layout: fixed; width: 100%; }
/* Ticket / Title / Description / AI Priority. Fixed layout with explicit ratios
   because two of the four columns are prose: left to shrink-to-fit, one long
   title starves the description column and the rows stop being readable. */
.ap-table th:nth-child(1) { width: 96px; }
.ap-table th:nth-child(2) { width: 28%; }
.ap-table th:nth-child(4) { width: 190px; }
.ap-table td { vertical-align: top; }
.ap-idcell { white-space: nowrap; }
.ap-id {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
.ap-id:hover { text-decoration: underline; }
.ap-title { font-weight: 600; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ap-meta { font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
/* The description is the evidence the priority was judged from, so it is shown
   in full-ish rather than truncated to one line — but clamped so one verbose
   ticket cannot push the rest of the table off the screen. */
.ap-desc {
  font-size: 11.5px; line-height: 1.45; color: var(--text);
  max-height: 8.7em; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap;
}
.ap-pri { font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: 1.1; }
.ap-conf {
  font-family: var(--font-sans, inherit); font-size: 10px; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}
.ap-why { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-top: 3px; }
.ap-flags { margin-top: 5px; font-size: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.ap-applied { color: var(--success, #0ca30c); font-weight: 600; }
.ap-pending { color: var(--text-dim); }
.ap-stale   { color: #ec835a; font-weight: 600; }

/* Which wiki revision the priorities were judged against. Quiet, but present:
   "why did this bug change priority" is answered by this line. */
.ap-rules { font-size: 11px; color: var(--text-dim); margin-top: 10px; }
.ap-rules code { font-family: var(--font-mono); font-size: 10.5px; }

/* Run progress. A month is ~900 bugs across ~36 batches, so a bare spinner with
   no numbers reads as a hang. */
.ap-progress {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; margin: 10px 0; color: var(--text);
}
.ap-bar {
  flex: 1; max-width: 320px; height: 6px; border-radius: 3px;
  background: var(--surface2); overflow: hidden;
}
.ap-bar-fill { height: 100%; background: var(--purple); transition: width .3s ease; }

/* ── Branch deployed, and the UAT flag ──────────────────────────────────────
   Branch names in this estate run to 90+ characters
   ("110508_Confirmation-pop-up-not-appearing-after-entering-all-..."), so the
   cell wraps on the separators rather than stretching the table or being
   ellipsised into uselessness — the ticket number at the front and the UAT
   token anywhere in the name are both things people read. */
.res-branch {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.35;
  display: inline-block; max-width: 240px;
  overflow-wrap: anywhere; word-break: break-word;
}
.res-branch-uat { color: var(--red); font-weight: 700; }
/* The UAT branch belongs to a DIFFERENT pipeline than the one shown above, so it
   is labelled instead of just coloured — otherwise the red row would look
   unrelated to its own branch cell. */
.res-branch-alt {
  font-family: var(--font-mono); font-size: 10px; color: var(--red);
  opacity: 0.85; margin-top: 2px; overflow-wrap: anywhere;
}

/* A whole red row for "this environment is holding a UAT branch".
   Tint + a solid left edge rather than red text everywhere: the row still has to
   be readable, and the Status column keeps its own staleness colour, which would
   be lost if the row recoloured every cell. The tint is set with an rgba red over
   the surface so it works in both themes without a second rule. */
tbody tr.res-uat-row > td { background: rgba(213, 0, 50, 0.09); }
tbody tr.res-uat-row > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tbody tr.res-uat-row > td:first-child strong { color: var(--red); }
tbody tr.res-uat-row:hover > td { background: rgba(213, 0, 50, 0.17); }
:root[data-theme="dark"] tbody tr.res-uat-row > td { background: rgba(255, 0, 0, 0.14); }
:root[data-theme="dark"] tbody tr.res-uat-row:hover > td { background: rgba(255, 0, 0, 0.24); }

/* The "On UAT branch" filter chip in its active state. Its own class rather than
   btn-primary: the chip is a red-flag filter, and the primary blue would read as
   an unrelated control sitting among the status chips. */
.res-uat-chip-on {
  background: var(--red); border: 1px solid var(--red); color: #fff; font-weight: 600;
}
.res-uat-chip-on:hover { background: var(--red); color: #fff; opacity: 0.9; }

/* Create-environment dialog: the derived-name preview and the Azure hand-off. */
.res-new-plan { margin-top: 10px; }
.res-new-table { margin: 0 0 4px; }
.res-new-table td { font-size: 12px; padding: 3px 8px; }
.res-new-quota { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.res-new-infra {
  font-size: 12px; line-height: 1.6; background: rgba(148, 163, 184, 0.08);
  border-left: 3px solid var(--text-dim); padding: 8px 10px;
}

/* Environment creation, temporarily switched off (RES_NEW_ENV_ENABLED in
   resources.js). Reads as deliberately unavailable rather than broken: greyed
   and not-allowed, but still legible so people can see the feature is coming. */
.res-new-off {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text-dim); opacity: 0.7; cursor: not-allowed;
}
.res-new-off:hover { background: var(--surface2); color: var(--text-dim); }

/* Exception Summary → Servers cell. Looks like a value, behaves like a link:
   the number itself is the affordance, so the button chrome is stripped. */
.ai-srv-btn {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  border-radius: 3px; transition: background .12s;
}
.ai-srv-btn:hover { background: var(--surface2); text-decoration: underline; }
.ai-srv-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ============================================================================
   Ask Anything tab (public/js/ask.js)
   Cross-source investigator: question box, live tool trace, markdown answer.
   All colours come from the theme variables so light/dark both work.
   ========================================================================= */

.ask-target {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 14px;
}

/* -- composer (below the thread, pinned to the viewport bottom) ------------- */
/* Sticky rather than fixed so it sits in normal flow on an empty thread and only
   pins once the conversation is long enough to scroll — no floating bar hovering
   over a half-empty panel. The opaque background and top border are required:
   answer text scrolls underneath it. */
.ask-composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--bg);
  border-top: 1px solid var(--border2);
  padding: 10px 0 12px;
  margin-top: 18px;
}
/* Fades the last line of answer text as it passes under the composer, so text
   never appears to be cut off mid-stroke at the border. */
.ask-composer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -18px; height: 18px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.ask-input-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }

/* --- Ask Anything image attachments -------------------------------------- */
/* Thumbnail strip above the question box, and the drop-target highlight.
   Colours come from the theme variables so this works in light and dark
   without a second ruleset. */
.ask-attachments {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.ask-attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-alt, var(--panel)); max-width: 260px;
}
.ask-attach-chip img {
  width: 34px; height: 34px; object-fit: cover; border-radius: 4px;
  background: var(--bg); flex: none;
}
.ask-attach-name {
  font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-attach-x {
  border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--text-dim); padding: 0 2px; flex: none;
}
.ask-attach-x:hover { color: var(--red, #d33); }
.ask-attach-total { font-size: 12px; color: var(--text-dim); margin-left: 2px; }

/* Document chips (PDF / text). No thumbnail to show, so the file type badge
   stands in for one and the chip keeps the same height as an image chip —
   otherwise a mixed row of attachments steps up and down. */
.ask-attach-doc { padding-left: 6px; }
.ask-attach-icon {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 4px; border-radius: 3px; flex: none;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--border);
}
/* The question echo's copy of the document chips. Matches
   .ask-exchange-images so attachments line up whichever kind they are. */
.ask-exchange-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ask-exchange-docs .ask-attach-chip { max-width: 320px; }

/* Test Cases tab — the Uncategorized pseudo-row.
   Visually set apart because it is NOT a product area: it is the refinement
   backlog, it is an order of magnitude larger than any real row, and it is
   always drawn last. Muted and italic so it reads as a footnote with numbers
   rather than as the worst-performing area. */
.tcov-uncat-row > td { opacity: 0.82; font-style: italic; }
.tcov-uncat-row > td:first-child { border-left: 3px solid var(--text-dim); padding-left: 6px; }
.tcov-uncat-row .cat-hm-cell { font-style: normal; }

/* Drop target. Outline rather than border: a border would resize the composer
   on dragenter and make the drop zone move away from the cursor. */
.ask-composer.ask-dragover { outline: 2px dashed var(--accent, #4a9); outline-offset: -4px; }

/* Attachments echoed with the question in the thread. */
.ask-exchange-images { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ask-exchange-images img {
  max-height: 120px; max-width: 220px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
}

.ask-textarea {
  flex: 1 1 480px;
  min-height: 92px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font-ui);
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  resize: vertical;
}
.ask-textarea:focus { outline: none; border-color: var(--blue); }

.ask-input-actions { display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; }

.ask-hint { font-size: 11px; color: var(--text-muted); }

/* Hint on the left, thread-level actions on the right. "Save as PDF" lives here
   rather than in the button stack because it acts on the whole thread, not on
   the question being typed — and keeping the stack at three buttons keeps the
   sticky bar short. */
.ask-hint-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px; flex-wrap: wrap;
}
/* Per-thread model picker, in the button stack beside Investigate. Disabled
   once the thread is pinned — the greyed-out state IS the message that the
   choice belongs to the thread, so it stays visible rather than being hidden. */
.ask-model-sel {
  padding: 6px 8px; font-size: 12px; font-family: var(--font-ui);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  max-width: 170px;
}
.ask-model-sel:disabled { opacity: .55; cursor: not-allowed; }

.ask-pdf-btn { font-size: 11px; padding: 4px 10px; }
.ask-pdf-btn:disabled { opacity: .4; cursor: default; }
.ask-hint-actions { display: flex; align-items: center; gap: 8px; }

/* Spend + Notes/History/Save as PDF, held together and pinned RIGHT.
   `margin-left: auto` lives here rather than on the spend figure because that
   figure is hidden until the first turn bills: with the pusher inside a
   display:none element, the actions had nothing holding them right, and once
   the Notes button made the group wide enough to wrap onto its own line
   `justify-content: space-between` left it at the LEFT edge. On the group, the
   auto margin works whether or not the spend figure is showing, and whether or
   not the row wraps. */
.ask-hint-right {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}

/* Running Claude spend. Sits directly beside the thread actions rather than
   next to the hint text — the hint wraps on a narrow window and a cost figure
   trailing a wrapped sentence reads like part of it. Tabular figures so the
   number does not jitter horizontally as it ticks up, which is the whole reason
   it is on screen during a run. */
.ask-cost {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ask-cost .ask-cost-amt { color: var(--text); font-weight: 600; }
/* Month-to-date across all users. Kept visually quieter than the thread figure:
   it is context for "is this tab expensive", not the number you are watching
   move during your own run. */
.ask-cost .ask-cost-month { color: var(--text-dim); }
/* The readout opens the activity panel — but only for an admin, so only an
   admin's copy looks like a control. Everyone else sees a plain figure. */
.ask-cost.is-clickable { cursor: pointer; }
.ask-cost.is-clickable:hover .ask-cost-amt { text-decoration: underline; }
.ask-cost.is-clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* -- Ask activity panel (public/js/ask-activity.js) ------------------------ */
/* Month totals + the question log. Wider and taller than the other modals in
   this app because it is a table of sentences: questions are long, and wrapping
   them into a narrow column makes a 40-row log unreadable. */
.ask-act-overlay {
  position: fixed; inset: 0; z-index: 2100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.ask-act-modal {
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  width: min(1100px, 95vw); max-height: 90vh;
  display: flex; flex-direction: column;
}
.ask-act-head {
  padding: 14px 20px; border-bottom: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: space-between;
}
.ask-act-title { font-size: 14px; font-weight: 700; font-family: var(--font-heading); }
.ask-act-x { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 18px; }
.ask-act-controls {
  padding: 12px 20px; border-bottom: 1px solid var(--border2);
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.ask-act-lbl {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text-dim); font-weight: 600;
}
.ask-act-grow { flex: 1 1 220px; min-width: 0; }
.ask-act-sel, .ask-act-input { padding: 6px; font-size: 12px; font-family: var(--font-ui); }
.ask-act-input { width: 100%; min-width: 0; }
/* The one scrolling region — the header and filters stay put while a long log
   scrolls under them. */
.ask-act-body { overflow: auto; padding: 6px 20px 20px; }
.ask-act-section { margin-top: 14px; }
.ask-act-h2 { font-size: 12px; font-weight: 700; margin: 0 0 6px; }
.ask-act-dim { color: var(--text-dim); font-weight: 400; }
.ask-act-empty { color: var(--text-dim); font-size: 12px; padding: 10px 0; }
.ask-act-note { color: var(--text-dim); font-size: 11px; margin-top: 8px; }
.ask-act-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ask-act-table th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border2);
  color: var(--text-dim); font-size: 11px; position: sticky; top: 0;
  background: var(--surface);   /* opaque, or rows show through while scrolling */
}
.ask-act-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ask-act-r { text-align: right; font-variant-numeric: tabular-nums; }
.ask-act-cur td { background: var(--surface2); }
.ask-act-tag {
  font-size: 10px; color: var(--primary); border: 1px solid var(--primary);
  border-radius: 3px; padding: 0 4px; margin-left: 4px;
}
.ask-act-when { white-space: nowrap; color: var(--text-dim); }
/* Questions wrap; everything else stays on one line. A question can be a
   paragraph, and truncating it would defeat the point of the log. */
.ask-act-q { white-space: pre-wrap; word-break: break-word; min-width: 280px; }
.ask-act-outcome { font-size: 11px; color: var(--text-dim); }
.ask-act-outcome.is-bad { color: var(--danger, #d9534f); }
/* -- Quality > God Mode (public/js/god-mode.js) ----------------------------- */
/* Reuses the ask-act-* table styles above; these are the tab-level extras. */
.gm-views { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.gm-view-btn { background: transparent; border: none; color: var(--text-dim); padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.gm-view-btn + .gm-view-btn { border-left: 1px solid var(--border); }
.gm-view-btn:hover { color: var(--text); }
.gm-view-btn.active { background: var(--surface2); color: var(--text); box-shadow: inset 0 -2px 0 var(--primary); }
.gm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.gm-title { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.gm-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.gm-controls { display: flex; align-items: flex-end; gap: 10px; }
.gm-section { margin-top: 22px; }
.gm-h2 { font-size: 13px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gm-h3 { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
.gm-toggle { font-size: 11px; font-weight: 400; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.gm-scroll { overflow-x: auto; }
.gm-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.gm-sortable:hover { color: var(--text); }
.gm-user, .gm-qrow { cursor: pointer; }
.gm-user:hover td, .gm-qrow:hover td { background: var(--surface2); }
.gm-sel td { background: var(--surface2); }
.gm-sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.gm-idle td { opacity: .55; }
.gm-name { font-weight: 600; }
.gm-email { font-size: 11px; }
.gm-bad { color: var(--danger, #d9534f); font-weight: 600; }
.gm-warn { color: var(--warning); font-weight: 600; }
.gm-back { margin-left: auto; font-size: 11px; padding: 3px 10px; }
.gm-qcontrols { padding: 0 0 10px; border-bottom: none; }
.gm-count { margin: 0 0 6px; }
/* Long questions are truncated in the list and shown in full in the detail row. */
.gm-qtext { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gm-detail-row td { background: var(--surface2); padding: 12px 14px; }
.gm-detail-q { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border2); }
.gm-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; margin-top: 10px; font-size: 12px; }
.gm-kv { display: flex; gap: 8px; }
.gm-kv > span:first-child { color: var(--text-dim); min-width: 84px; flex-shrink: 0; }
.gm-kv code { font-size: 11px; }
.gm-thread { margin: 0; padding-left: 20px; font-size: 12px; }
.gm-thread li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.gm-thread li .ask-act-when { margin-right: 8px; }
.gm-thread li.gm-here { font-weight: 600; }
.gm-thread li.gm-here::marker { color: var(--primary); }

/* -- Oversight > PR Review (public/js/pr-review.js) -------------------------- */
/* Reuses the gm-* layout and ask-act-table; these are the tab-level extras. */
.pr-release { text-align: right; margin-right: 6px; }
.pr-release-name { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.pr-release-date { font-size: 14px; font-weight: 700; }
.pr-run { font-size: 12px; color: var(--text-dim); margin: 4px 0; }
.pr-run.is-live { color: var(--text); }
.pr-err { color: var(--danger, #d9534f); }
.pr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-right: 8px; animation: pr-pulse 1.2s ease-in-out infinite; }
@keyframes pr-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.pr-note { font-size: 11px; margin: 4px 0 8px; }
.pr-filter { margin: 0 0 0 auto; }
.pr-table td { vertical-align: top; }
.pr-nowrap { white-space: nowrap; }
.pr-sev { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; color: #fff; white-space: nowrap; }
.pr-sev-high { background: #c62828; }
.pr-sev-med { background: #e08a00; }
.pr-sev-low { background: #5f7d95; }
.pr-tag { display: inline-block; font-size: 10px; padding: 0 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); white-space: nowrap; }
.pr-ititle { font-weight: 600; }
.pr-isum { font-size: 12px; margin-top: 3px; line-height: 1.45; }
.pr-last { font-size: 11px; margin-top: 4px; }
.pr-status { font-size: 11px; font-weight: 600; }
.pr-st-open { color: var(--danger, #d9534f); }
.pr-st-fix-claimed { color: var(--amber); }
.pr-st-fixed { color: var(--success); }
.pr-st-accepted, .pr-st-wont-fix { color: var(--text-dim); }
.pr-closed td { opacity: .6; }
.pr-acts { white-space: nowrap; }
.pr-act { font-size: 10px; padding: 2px 6px; margin: 0 2px 2px 0; }
.pr-v { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.pr-v-ok { color: var(--success); }
.pr-v-warn { color: var(--amber); }
.pr-v-block { color: var(--danger, #d9534f); }
.pr-v-live { color: var(--primary); }
.pr-summary { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.pr-updates { margin: 0 0 6px; padding-left: 18px; font-size: 12px; }
.pr-finding { border-left: 3px solid var(--border2, var(--border)); padding: 6px 10px; margin: 8px 0; font-size: 12px; line-height: 1.5; background: var(--surface); }
.pr-finding > div + div { margin-top: 3px; }
.pr-ftitle { font-weight: 600; font-size: 13px; }
.pr-fix { white-space: pre-wrap; }
.pr-meta { font-size: 11px; margin-top: 8px; }
/* Release bugs table (PR Review) */
.pr-bug-stop { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.pr-bug-stop.is-yes { background: #c62828; color: #fff; }
.pr-bug-stop.is-no { border: 1px solid var(--border); color: var(--text-dim); }
.pr-bug-effect { font-size: 12px; line-height: 1.45; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-bug-row.is-stopper td:first-child { box-shadow: inset 3px 0 0 #c62828; }
.pr-bug-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12px; line-height: 1.5; margin: 6px 0; }
.pr-bug-grid > b { white-space: nowrap; }
.pr-bug-grid > div { white-space: pre-wrap; }
/* Settings > PR Review Access */
.pra-intro { font-size: 12px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.5; }
.pra-dim { color: var(--text-dim); font-size: 12px; }
.pra-msg { font-size: 12px; margin: 6px 0 10px; }
.pra-foot { margin-top: 12px; }


/* Live during a run, settled once the answer lands — a moving number should look
   different from a final one. */
.ask-cost.is-live .ask-cost-amt { color: var(--primary); }

/* -- saved-conversation history drop-down ---------------------------------- */
/* Opens UPWARD (bottom: 100%) because its trigger sits in the sticky composer at
   the foot of the viewport — a downward panel would render off-screen. Height is
   capped and the list scrolls, so 60 saved conversations cannot cover the answer
   the user is reading. */
.ask-hist-wrap { position: relative; }
.ask-hist-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: 460px;
  max-width: 90vw;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
}
.ask-hist-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--border2); background: var(--surface2);
}
.ask-hist-head-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.ask-hist-head-note { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

.ask-hist-list { max-height: 46vh; overflow-y: auto; }
/* History failed to load or save. Deliberately loud and deliberately inside the
   panel: this is the one message that means "your transcripts may not be where
   you think they are", and it must not be mistakable for an empty list. */
.ask-hist-syncerr {
  margin: 8px 10px; padding: 7px 9px;
  border: 1px solid var(--danger, #d9534f); border-left-width: 3px;
  font-size: 11px; line-height: 1.5; color: var(--danger, #d9534f);
}
.ask-hist-empty { padding: 18px 14px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.ask-hist-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.ask-hist-item:last-child { border-bottom: none; }
.ask-hist-item:hover { background: var(--surface2); }
/* The open conversation is marked rather than hidden — reopening it is a valid
   way to discard unsaved scroll position and get back to a clean render. */
.ask-hist-item.is-active { border-left: 2px solid var(--blue); }

.ask-hist-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; text-align: left;
  background: none; border: none; cursor: pointer; font-family: var(--font-ui);
}
.ask-hist-title {
  font-size: 12.5px; color: var(--text); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-hist-open:hover .ask-hist-title { color: var(--text-bright); }
.ask-hist-sub { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); }

/* Row actions stay visible rather than appearing on hover: delete is the one
   control people look for by eye, and a hidden ✕ reads as "you cannot". */
.ask-hist-actions { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.ask-hist-act {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px; line-height: 1;
  padding: 6px 7px;
}
.ask-hist-act:hover { color: var(--text-bright); background: var(--surface); }
.ask-hist-del:hover { color: var(--red); }

.ask-hist-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-top: 1px solid var(--border2); background: var(--surface2);
}
.ask-hist-foot-btn {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--text-dim); font-family: var(--font-ui); padding: 2px 4px;
}
.ask-hist-foot-btn:hover { color: var(--text-bright); text-decoration: underline; }
.ask-hist-foot-btn.ask-hist-del:hover { color: var(--red); }

/* -- example prompt chips -------------------------------------------------- */
/* Two rows (business / engineering). The label gets a fixed min-width so the
   first chip of each row starts at the same x, despite the labels differing
   in length — otherwise the rows read as unrelated lists. */
.ask-examples {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 14px 0 4px;
}
.ask-examples + .ask-examples { margin-top: 0; }
.ask-examples-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-dim); margin-right: 2px;
  min-width: 136px; flex: 0 0 auto;
}
.ask-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-ui);
}
.ask-chip:hover { color: var(--text); border-color: var(--blue); }

/* The deeper example library. Collapsed by default so the default view stays the
   two starter rows plus the question box; opened, it is five labelled rows of
   cross-source questions. Same chip styling inside — a promoted example should
   look identical whether it sits here or in the visible rows. */
.ask-more { margin: 10px 0 4px; }
.ask-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--text-dim);
  padding: 3px 0;
  user-select: none;
}
.ask-more > summary::-webkit-details-marker { display: none; }
.ask-more > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  font-size: 9px;
  color: var(--text-dim);
}
.ask-more[open] > summary::before { content: '▾'; }
.ask-more > summary:hover { color: var(--text); }
.ask-more-body {
  border-left: 1px solid var(--border2);
  padding-left: 12px;
  margin: 4px 0 2px 4px;
}
/* First row inside the fly-down does not need the 14px top gap the standalone
   rows carry — the summary line already provides the separation. */
.ask-more-body .ask-examples:first-child { margin-top: 6px; }

/* -- working notes panel ---------------------------------------------------- */
/* Shares .ask-hist-panel's geometry (anchored, opens upward out of the sticky
   composer) so the two memory surfaces look like siblings — which they are, with
   the crucial difference stated in the header: History is this browser, Notes go
   to Claude with every question. */
.ask-notes-panel { width: 460px; }
.ask-notes-intro {
  font-size: 11px; color: var(--text-dim); line-height: 1.5;
  padding: 8px 10px; border-bottom: 1px solid var(--border2);
}
.ask-notes-body { max-height: 300px; overflow-y: auto; }
.ask-notes-empty { font-size: 11px; color: var(--text-dim); padding: 14px 10px; line-height: 1.6; }
.ask-notes-group { border-bottom: 1px solid var(--border2); }
.ask-notes-topic {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); padding: 6px 10px 2px; font-weight: 700;
}
.ask-note { padding: 5px 10px 7px; }
.ask-note + .ask-note { border-top: 1px dotted var(--border2); }
.ask-note-text { font-size: 12px; line-height: 1.45; color: var(--text); }
.ask-note-foot { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
/* Source is stated on every row. "Why is it answering like that" needs somewhere
   to look, and an agent-written note is the one most worth double-checking. */
.ask-note-src {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  padding: 0 4px; border: 1px solid var(--border2); color: var(--text-dim);
}
.ask-note-src.is-agent { border-color: var(--blue); color: var(--blue); }
.ask-note-when { font-size: 10px; color: var(--text-meta); }
/* Always vs on demand — the row states which, because that is what decides
   whether the note costs anything on a question it has nothing to do with. */
.ask-note-mode {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  padding: 0 4px; border: 1px solid var(--border2); cursor: pointer;
}
.ask-note-mode.is-pinned   { border-color: var(--warning); color: var(--warning); }
.ask-note-mode.is-ondemand { color: var(--text-meta); }
.ask-note-act {
  margin-left: auto; background: none; border: none; padding: 0 4px;
  font-size: 10px; color: var(--text-dim); cursor: pointer; text-decoration: underline;
}
.ask-note-act:hover { color: var(--blue); }
.ask-note-act + .ask-note-act { margin-left: 0; }

.ask-notes-add { display: flex; gap: 5px; padding: 7px 10px; border-top: 1px solid var(--border2); }
.ask-note-topic, .ask-note-input {
  padding: 4px 7px; font-size: 11px; font-family: var(--font-ui);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  min-width: 0;
}
.ask-note-topic { flex: 0 0 96px; }
.ask-note-input { flex: 1 1 auto; }
.ask-notes-metaline { font-size: 10px; color: var(--text-meta); padding: 0 10px 7px; }
.ask-notes-metaline.is-full { color: var(--warning); font-weight: 700; }

/* Count badge on the button — the notes are invisible otherwise, and "how much
   is being sent with my questions" should not require opening a panel. */
.ask-notes-count {
  display: inline-block; min-width: 14px; padding: 0 3px; margin-left: 2px;
  background: var(--blue); color: #fff; font-size: 9px; line-height: 14px;
  text-align: center; border-radius: 7px;
}

/* "Your notes in this answer" — collapsed by default so it is one quiet line on
   a normal question, expandable when someone actually asks whether a note is
   pulling its weight. */
.ask-notes-used { margin-top: 8px; font-size: 11px; }
.ask-notes-used > summary {
  cursor: pointer; color: var(--text-dim); padding: 3px 0;
  list-style: none; user-select: none;
}
.ask-notes-used > summary::-webkit-details-marker { display: none; }
.ask-notes-used > summary::before { content: '▸ '; }
.ask-notes-used[open] > summary::before { content: '▾ '; }
.ask-notes-used > summary:hover { color: var(--blue); }
.ask-notes-used-body {
  border-left: 2px solid var(--border2); padding: 4px 0 4px 10px; margin-top: 3px;
}
.ask-notes-used-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; line-height: 1.5; }
.ask-notes-used-row.is-cited .ask-notes-used-text { color: var(--text); }
.ask-notes-used-text { color: var(--text-dim); }
.ask-notes-used-how, .ask-notes-used-cited {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  padding: 0 4px; border: 1px solid var(--border2); color: var(--text-meta);
  white-space: nowrap; flex: 0 0 auto;
}
.ask-notes-used-how.is-loaded { border-color: var(--blue); color: var(--blue); }
/* Deliberately styled as a claim, not a metric — see the comment in ask-notes.js. */
.ask-notes-used-cited { border-color: var(--success); color: var(--success); }
.ask-notes-used-foot {
  font-size: 10px; color: var(--text-meta); line-height: 1.5;
  margin-top: 6px; padding-top: 5px; border-top: 1px dotted var(--border2);
}

/* "Saved N notes" block, printed under the answer that produced them. */
.ask-notes-saved {
  margin-top: 10px; padding: 8px 10px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--blue);
}
.ask-notes-saved-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); font-weight: 700; margin-bottom: 4px;
}
.ask-notes-saved-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; color: var(--text); line-height: 1.5; padding: 2px 0;
}
.ask-notes-saved-row.is-removed { opacity: .5; text-decoration: line-through; }
.ask-note-removed { margin-left: auto; font-size: 10px; color: var(--text-dim); }

/* -- continue-after-turn-budget control ------------------------------------ */
/* Sits inside the exchange it belongs to, under the partial report, so it is
   unambiguous WHICH run it would continue — a single control in the composer
   would keep offering to resume a run the thread had already moved past. */
.ask-continue {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--warning);
}
.ask-continue-note { font-size: 11px; color: var(--text-dim); flex: 1 1 240px; }
.ask-continue-turns {
  padding: 4px 8px; font-size: 12px; font-family: var(--font-ui);
  background: var(--surface); border: 1px solid var(--border2); color: var(--text);
}
.ask-continue-btn { font-size: 12px; padding: 5px 12px; }

/* Duplicate-question notice — shown when a typed question is already answered
   in saved history and the transcript was reopened instead of re-run. Same
   shape as .ask-continue (it is the same kind of thing: an explanation plus the
   one action that overrides it), but keyed to --blue rather than --warning
   because reusing an answer is the good outcome, not a degraded one. */
.ask-history-hit {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--blue);
}
.ask-history-hit-note { font-size: 11px; color: var(--text-dim); flex: 1 1 240px; }
.ask-history-hit-btn { font-size: 12px; padding: 5px 12px; }

/* A continuation's echo is a label, not a typed question — italic so scrolling
   back through a thread does not read it as something the user asked. */
.ask-exchange.is-continuation .ask-question-echo { font-style: italic; opacity: .8; }

/* -- pre-flight clarification panel ---------------------------------------- */
/* Shown only when the question has a reading that would change the answer (see
   lib/ask-clarify.js). It sits at the TOP of the sticky composer, above the
   status line and the question box, so the choice is between the asker and the
   Investigate button rather than off in a corner of the page. Accent border,
   not a modal: it must not block re-reading the answer above it, which is
   usually where the follow-up question came from. */
.ask-clarify {
  border: 1px solid var(--blue);
  border-left-width: 3px;
  background: var(--surface2);
  padding: 12px 14px;
  margin-bottom: 10px;
  max-height: 46vh;
  overflow-y: auto;
}
.ask-clarify-head strong { font-size: 13px; color: var(--text); }
.ask-clarify-interp {
  font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.5;
}
.ask-clarify-q { margin-top: 12px; }
.ask-clarify-qtext { font-size: 12px; font-weight: 700; color: var(--text); }
/* The consequence, not decoration: a question that cannot say what changes if it
   is guessed wrong is dropped server-side, so this line is always populated and
   is what makes the panel worth reading rather than clicking past. */
.ask-clarify-why { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ask-clarify-opts { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ask-clarify-opt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text); cursor: pointer; line-height: 1.5;
}
.ask-clarify-opt input[type="radio"] { flex: 0 0 auto; margin: 0; }
.ask-clarify-other {
  flex: 1 1 auto; min-width: 0;
  padding: 3px 7px; font-size: 12px; font-family: var(--font-ui);
  background: var(--surface); border: 1px solid var(--border2); color: var(--text);
}
/* Marks the reading that would be taken if nobody answers. Nothing is
   preselected on purpose — this labels the default rather than choosing it, so
   an answer sent to the agent is always one a person actually picked. */
.ask-clarify-dflt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); border: 1px solid var(--border2);
  padding: 0 5px; white-space: nowrap;
}
.ask-clarify-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border2);
}
.ask-clarify-actions .btn { font-size: 12px; padding: 5px 12px; }
.ask-clarify-off {
  margin-left: auto; font-size: 11px; color: var(--text-dim);
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}

/* What the pre-flight settled, printed under the question echo in the thread so
   scrolling back shows why two similar questions produced different numbers. */
.ask-clarify-summary {
  list-style: none; margin: 4px 0 0; padding: 0 0 0 10px;
  border-left: 2px solid var(--border2);
}
.ask-clarify-summary li { font-size: 11px; color: var(--text-dim); line-height: 1.6; }
.ask-clarify-summary li.is-assumed { font-style: italic; }
.ask-cs-q { color: var(--text-meta); }

.ask-precheck-toggle {
  font-size: 11px; color: var(--text-dim);
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}

/* -- live status + tool trace ---------------------------------------------- */
/* Top line of the composer. Keeps its height when empty so the sticky bar does
   not change height (and shift the text under it) the moment a question starts. */
.ask-status {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  min-height: 16px;
  font-family: var(--font-mono);
}

.ask-trace {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 8px 10px;
}
.ask-trace-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; font-family: var(--font-mono);
  padding: 2px 0; line-height: 1.6;
}
.ask-trace-tool { color: var(--text); font-weight: 700; white-space: nowrap; }
.ask-trace-detail {
  color: var(--text-dim); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-trace-result { color: var(--text-muted); white-space: nowrap; }
.ask-trace-errtext { color: var(--red); }

/* status pip: spinning while in flight, then a solid pass/fail dot */
.ask-trace-spin, .ask-trace-ok, .ask-trace-bad {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; display: inline-block;
}
.ask-trace-spin {
  border: 1.5px solid var(--border2);
  border-top-color: var(--blue);
  animation: ask-spin .7s linear infinite;
  border-radius: 50%;
  background: none;
}
.ask-trace-ok  { background: var(--green); }
.ask-trace-bad { background: var(--red); }
@keyframes ask-spin { to { transform: rotate(360deg); } }

/* -- conversation + answer ------------------------------------------------- */
.ask-thread { margin-top: 18px; }
.ask-question-echo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  background: var(--surface2);
  border-left: 3px solid var(--blue);
  padding: 8px 12px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.ask-answer { margin-top: 4px; font-size: 13px; color: var(--text); line-height: 1.65; }
.ask-answer:empty { display: none; }

.ask-p { margin: 0 0 10px; }
.ask-h {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: .02em;
}
.ask-hr { border: none; border-top: 1px solid var(--border2); margin: 16px 0; }
.ask-list { margin: 0 0 10px; padding-left: 22px; }
.ask-list li { margin: 3px 0; }

.ask-code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 1px 4px;
}
.ask-pre {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 12px;
  line-height: 1.5;
}
.ask-pre code { background: none; border: none; padding: 0; }

/* Mermaid diagram host — ask.js swaps the source text for an SVG in place. */
.ask-mermaid {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  overflow-x: auto;
  text-align: center;
}
.ask-mermaid svg { max-width: 100%; height: auto; }
/* Before render (or on a parse failure) the raw source shows as a code block. */
.ask-mermaid:not([data-rendered]) { white-space: pre; font-family: var(--font-mono); font-size: 12px; text-align: left; }
.ask-mermaid-err { margin-top: 8px; font-size: 11px; color: var(--danger, #d9534f); font-family: var(--font-mono); text-align: left; }

/* Inline images from ![alt](https://…) — click opens the full image in a new tab. */
.ask-img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border2);
  border-radius: 6px;
  margin: 4px 0;
  vertical-align: middle;
}

.ask-table-wrap { overflow-x: auto; margin: 0 0 12px; }
.ask-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.ask-table th, .ask-table td {
  border: 1px solid var(--border2);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.ask-table th { background: var(--surface2); font-weight: 700; color: var(--text-bright); }

.ask-meta { font-size: 11px; color: var(--text-muted); margin-top: 14px; font-family: var(--font-mono); }

.ask-error {
  font-size: 12px;
  color: var(--red);
  padding: 10px 12px;
  border-left: 3px solid var(--red);
  background: var(--surface2);
  /* pre-line, because the transport-failure message in _askExplainError() is
     two paragraphs: what happened and what to check. The text is escaped
     through _askH(), so a <br> cannot be injected and the newline has to be
     honoured here instead. `pre-line` (not `pre-wrap`) keeps long lines
     wrapping and still collapses the indentation of the source string. */
  white-space: pre-line;
}

/* Interim commentary shown while the agent is still calling tools; replaced by
   the final answer. Dimmed so it never reads as the conclusion. */
.ask-interim { opacity: .6; font-style: italic; border-left: 2px solid var(--border2); padding-left: 12px; }

/* One question + its trace, answer and meta. Appended per question so earlier
   exchanges stay on screen while drilling down. */
.ask-exchange { padding-bottom: 20px; }
.ask-exchange + .ask-exchange {
  border-top: 1px solid var(--border2);
  padding-top: 20px;
}
.ask-exchange .ask-trace  { margin-bottom: 12px; }
.ask-exchange .ask-answer { margin-top: 0; }

/* No-personal-key gate on the Ask Anything tab. */
.ask-nokey {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--amber);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 720px;
}
.ask-nokey-title {
  font-size: 13px; font-weight: 700; color: var(--text-bright); margin-bottom: 8px;
}
.ask-nokey p { margin: 0 0 8px; }
.ask-nokey a { color: var(--blue); }

/* Grays out the controls while the key is missing. The banner itself keeps full
   contrast — dimming the explanation of why things are disabled is the one thing
   that must stay readable. */
.ask-disabled .ask-input-row,
.ask-disabled .ask-examples,
.ask-disabled .ask-hint-row,
.ask-disabled .ask-hint { opacity: .45; pointer-events: none; }
.ask-disabled .ask-nokey { opacity: 1; pointer-events: auto; }
/* Exporting is not asking, and neither is reading back an old answer. If a key
   is removed mid-session, the answers already on screen must still be saveable
   and the archive must still open — neither spends a token. */
.ask-disabled .ask-pdf-btn,
.ask-disabled .ask-hist-wrap { opacity: 1; pointer-events: auto; }
/* ...but drafting a bug DOES spend a token (on the caller's key), so it dims
   with the composer. */
.ask-disabled .ask-bug-btn { opacity: .45; pointer-events: none; }

/* Fine print at the very bottom of the Ask Anything tab: the privacy limits and
   the accuracy caveat, collapsed to a single dim line. These were two full-width
   panels above the composer and dominated a tab whose whole point is the question
   box, so they are now footnote-weight and open on demand. Deliberately not
   dimmed by .ask-disabled — what is safe to ask, and what an answer is worth,
   must stay readable whether or not the controls are live. */
.ask-finePrint {
  margin: 14px 0 4px;
  border-top: 1px solid var(--border2);
  padding-top: 8px;
  max-width: 900px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
}
.ask-finePrint > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--text-dim);
  opacity: .75;
  padding: 2px 0;
  user-select: none;
}
.ask-finePrint > summary::-webkit-details-marker { display: none; }
.ask-finePrint > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  font-size: 9px;
  color: var(--text-dim);
}
.ask-finePrint[open] > summary { opacity: 1; margin-bottom: 4px; }
.ask-finePrint[open] > summary::before { content: '▾'; }
.ask-finePrint > summary:hover { opacity: 1; color: var(--text); }
.ask-finePrint-body p { margin: 0 0 6px; }
.ask-finePrint-body p:last-child { margin-bottom: 0; }
.ask-finePrint-body strong { color: var(--text); font-weight: 600; }
.ask-finePrint-body code {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface2); border: 1px solid var(--border2); padding: 0 3px;
}
.ask-disabled .ask-finePrint { opacity: 1; }

/* =============================================================================
   Planning → Metrics (VMO scorecard)
   The objective text is the row's identity and is often a full sentence, so it
   gets the width and wraps; the supporting columns (measurement, timeframe,
   baseline, notes) are dimmed reference material and are capped so they cannot
   push the value columns off screen.
   ========================================================================== */
.vmo-summary { margin: 6px 0 14px; }
.vmo-table { table-layout: fixed; width: 100%; }
.vmo-table th, .vmo-table td { vertical-align: top; font-size: 12px; }
.vmo-table .vmo-obj { width: 30%; white-space: normal; line-height: 1.45; }
.vmo-table .vmo-dim {
  color: var(--text-dim);
  white-space: normal;
  font-size: 11px;
  line-height: 1.4;
  max-width: 220px;
}
.vmo-current { min-width: 92px; }

/* "auto" marks a row the server computes from ADO. The overridden variant is a
   different colour on purpose: a typed number sitting in an auto row must never
   read as a measured one. */
.vmo-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--success);
  color: var(--success);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.vmo-auto--overridden { border-color: var(--warning); color: var(--warning); }
/* "withheld" = the server could compute something but refused to report it
   because the inputs are too thin to stand behind (e.g. 1% of the backlog is
   estimated). Muted rather than alarming: it is an honest gap, not a fault. */
.vmo-auto--blocked { border-color: var(--text-dim); color: var(--text-dim); }

/* The computed figure sits above the override box so both are visible at once —
   you can see what ADO says and what was typed instead. */
.vmo-autoval {
  font-weight: 700;
  color: var(--success);
  margin-bottom: 3px;
}
/* Direction only, never coloured good/bad: for "reduce non-starts <= 3%" a fall
   is an improvement, and nothing in the data says which way each row should go. */
.vmo-trend { color: var(--text-dim); white-space: nowrap; }

/* Measure type (value / productivity / quality / risk) — colour comes from the
   inline style so one rule serves every type. */
.vmo-type {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.vmo-input {
  width: 84px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-ui);
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  text-align: right;
}
.vmo-input:focus { outline: none; border-color: var(--primary); }
/* Save feedback lives on the cell, not a toast: the point is to be sure THIS
   number was stored. */
.vmo-input--saved { border-color: var(--success); }
.vmo-input--error { border-color: var(--danger); background: rgba(220,38,38,0.08); }

/* ── 9-Box talent rating (owner only) ─────────────────────────────
   The column is hidden by default and revealed by `nine-box-active` on <body>,
   mirroring the existing `manager-active` pattern. Presentation only — every
   read and write is 404'd server-side for non-owners. */
.nine-box-col { display: none; }
body.nine-box-active .nine-box-col { display: table-cell; }

.nb-cell { display: flex; align-items: center; justify-content: center; gap: 3px; }

.nb-set-btn {
  font-family: var(--font-ui); font-size: 10px; padding: 3px 9px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  border: 1px dashed var(--border); border-radius: 11px;
}
.nb-set-btn:hover { color: var(--text-bright); border-color: var(--blue); border-style: solid; }

.nb-chip {
  display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; color: #fff; max-width: 118px; overflow: hidden;
  text-overflow: ellipsis;
}
.nb-band-high { background: #15803d; }
.nb-band-med  { background: #a16207; }
.nb-band-low  { background: #b91c1c; }

.nb-icon {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: 12px; line-height: 1; padding: 2px 3px; border-radius: 3px;
}
.nb-icon:hover:not(:disabled) { color: var(--text-bright); background: var(--border2); }
.nb-icon:disabled { opacity: 0.3; cursor: not-allowed; }
.nb-icon-done { color: var(--green, #16a34a); }

/* Popover: picker + document chooser */
.nb-popover {
  position: fixed; z-index: 2100; width: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5); padding: 13px 15px;
}
.nb-pop-head { margin-bottom: 10px; }
.nb-pop-title { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.nb-pop-sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.nb-pop-note {
  font-size: 10px; color: var(--text-dim); margin-top: 10px;
  border-top: 1px solid var(--border2); padding-top: 8px; line-height: 1.45;
}
.nb-pop-actions { display: flex; gap: 6px; margin-top: 10px; }
.nb-danger { color: var(--red) !important; }

/* The 3x3 grid. Potential runs high→low top to bottom so it reads conventionally. */
.nb-grid {
  display: grid; grid-template-columns: 52px repeat(3, 1fr); gap: 3px; align-items: stretch;
}
.nb-grid-corner {
  font-size: 8px; color: var(--text-dim); line-height: 1.25; align-self: center; text-align: center;
}
.nb-grid-axis-top {
  font-size: 9px; color: var(--text-dim); text-align: center; text-transform: uppercase;
  letter-spacing: 0.04em; padding-bottom: 2px;
}
.nb-grid-axis-label {
  font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 5px;
}
.nb-grid-cell {
  border: 1px solid var(--border); border-radius: 5px; cursor: pointer; color: #fff;
  padding: 7px 4px; display: flex; flex-direction: column; gap: 2px; align-items: center;
  justify-content: center; min-height: 50px; opacity: 0.62; transition: opacity 0.12s;
}
.nb-grid-cell:hover { opacity: 1; }
.nb-grid-cell.nb-grid-sel { opacity: 1; outline: 2px solid var(--text-bright); outline-offset: 1px; }
.nb-grid-cell-label { font-size: 9.5px; font-weight: 650; text-align: center; line-height: 1.2; }
.nb-grid-cell-band { font-size: 8px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }

/* Document chooser */
.nb-doc-list { display: flex; flex-direction: column; gap: 7px; }
.nb-doc-btn {
  text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.nb-doc-btn:hover { border-color: var(--blue); }
.nb-doc-btn-title { font-size: 12px; font-weight: 650; color: var(--text-bright); }
.nb-doc-btn-sub { font-size: 10px; color: var(--text-dim); line-height: 1.4; }

/* Justification modal fields */
.nb-field-label {
  display: block; font-size: 11px; font-weight: 650; color: var(--text-bright);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
.nb-optional {
  font-size: 9px; font-weight: 500; color: var(--text-dim); text-transform: none;
  letter-spacing: 0; margin-left: 5px;
}
.nb-field-help { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 7px; }
.nb-textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 11px; font-family: var(--font-ui); font-size: 12.5px;
  line-height: 1.55; resize: vertical;
}
.nb-textarea:focus { outline: none; border-color: var(--blue); }

/* 9-Box: Claude drafting controls */
.nb-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nb-field-row .nb-field-label { margin-bottom: 0; }
.nb-field-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.nb-draft-btn {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: 13px; white-space: nowrap;
  background: rgba(124, 58, 237, 0.14); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.45);
}
.nb-draft-btn:hover:not(:disabled) { background: rgba(124, 58, 237, 0.26); color: #c4b5fd; }
.nb-draft-btn:disabled { opacity: 0.55; cursor: wait; }

.nb-undo {
  font-family: var(--font-ui); font-size: 10.5px; cursor: pointer; padding: 4px 9px;
  border-radius: 13px; background: transparent; color: var(--text-dim); border: 1px solid var(--border);
}
.nb-undo:hover { color: var(--text-bright); border-color: var(--text-dim); }

.nb-leak-warning {
  margin-top: 8px; padding: 9px 11px; border-radius: 6px; font-size: 11.5px; line-height: 1.55;
  background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.45); color: #fbbf24;
}
.nb-leak-warning code {
  background: rgba(0,0,0,0.28); padding: 1px 5px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10.5px;
}

/* 9-Box: note explaining the derived developer copy */
.nb-derived-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 6px; font-size: 11.5px; line-height: 1.55;
  background: rgba(37, 99, 235, 0.10); border: 1px solid rgba(37, 99, 235, 0.35); color: var(--text);
}
.nb-derived-sub { margin-top: 6px; font-size: 11px; color: var(--text-dim); }

/* Copy-link confirmation flash on the Developers toolbar */
#dev-copy-link-btn.copied { color: var(--green, #16a34a); border-color: var(--green, #16a34a); }

/* Board scoping is dropping bugs. Amber, not red: the scope is a deliberate
   choice, but a total that omits 82% of its population must say so out loud
   rather than looking complete. */
.bb-warn {
  font-size: 10.5px; color: #b45309; margin-top: 4px; cursor: help;
  background: rgba(234, 179, 8, .12); border-left: 3px solid #eab308;
  padding: 3px 8px; display: inline-block;
}
:root[data-theme="dark"] .bb-warn { color: #fbbf24; }

/* ── Epic Roadmap: state filter chips ────────────────────────────── */
.eg-state-filter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eg-state-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); margin-right: 2px;
}
.eg-state-chip {
  font-size: 11px; padding: 3px 9px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); font-family: var(--font-ui); white-space: nowrap;
  /* Hidden states read as struck-through so "off" is legible without colour
     alone — the chip row is the only signal that epics are missing. */
  text-decoration: line-through; opacity: 0.65;
}
.eg-state-chip.on {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--text); text-decoration: none; opacity: 1;
}
.eg-state-chip:hover { color: var(--text); border-color: var(--primary); }
.eg-chip-n { font-family: var(--font-mono); font-size: 10px; opacity: 0.75; margin-left: 3px; }
.eg-state-note { font-size: 10px; color: var(--text-dim); font-style: italic; margin-left: 4px; }

/* ── Ask Anything: thread-level notice ───────────────────────────
   Used when a conversation had to be rebuilt after the server dropped it (a
   deploy, a restart, or the 2h TTL). Lives IN the thread rather than in the
   status line, which the retry overwrites within milliseconds — and it has to
   persist, because the answer below it was produced on rebuilt context. */
.ask-thread-note {
  margin: 10px 0; padding: 8px 12px;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 12px; color: var(--text-dim); line-height: 1.5;
}
.ask-thread-note.is-warn {
  border-left-color: var(--amber, #d97706);
  background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
  color: var(--text);
}

/* ── Management Report: per-user team filter ─────────────────────── */
.mgmt-teams-wrap { position: relative; display: inline-block; }
#mgmt-teams-btn.is-filtered {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.mgmt-teams-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 360px; max-height: 460px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.mgmt-teams-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px 6px; border-bottom: 1px solid var(--border);
}
.mgmt-teams-title { font-size: 12px; font-weight: 700; color: var(--text-bright); }
.mgmt-teams-note  { font-size: 10px; color: var(--text-dim); margin-left: auto; }
.mgmt-teams-actions { display: flex; gap: 6px; padding: 8px 12px 4px; }
.mgmt-teams-mini {
  font-size: 10px; padding: 2px 8px; cursor: pointer; border-radius: 4px;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); font-family: var(--font-ui);
}
.mgmt-teams-mini:hover { color: var(--text); }
.mgmt-teams-list { flex: 1; overflow-y: auto; padding: 4px 6px 8px; }
.mgmt-team-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; font-size: 12px; cursor: pointer;
}
.mgmt-team-row:hover { background: var(--blue-light); }
.mgmt-team-name { color: var(--text); flex: 1; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.mgmt-team-proj { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.mgmt-team-n    { font-family: var(--font-mono); font-size: 10px;
                  color: var(--text-dim); min-width: 28px; text-align: right; }
.mgmt-teams-empty { padding: 14px 8px; font-size: 12px; color: var(--text-dim); }
.mgmt-teams-foot {
  padding: 8px 12px 10px; border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-dim); line-height: 1.5;
}
/* On a tile the filter could not reach. Deliberately visible rather than a
   tooltip: the risk is reading a filtered number beside an org-wide one. */
.metric-allteams {
  margin-top: 6px; display: inline-block;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border2); color: var(--text-dim); background: var(--surface2);
}

/* ── Investigation > Code Quality (public/js/code-quality.js) ─────────────────
   Per-PR movement in build warnings / SonarCloud / Snyk. Prefixed `cqp-`
   (code quality PER-PR) to stay clear of the `cap-*` / `cq-*` families.

   The colour rules here ARE the semantics, not decoration:
     .cqp-na    "—"  not measured. Dim and italic so it cannot be skim-read as a
                     number; it must never look like 0 or like an absolute value.
     .cqp-flat  "0"  measured, unchanged. Neutral.
     .cqp-up    "+n" growth — red, because naming growth is the point of the tab.
     .cqp-down  "-n" improvement — green.
     .cqp-dim   the same figure with NO verdict colour, for background Snyk
                movement: the count moved but it is nobody's doing, and painting
                it red would accuse whoever happened to merge that day.
   ------------------------------------------------------------------------- */
.cqp-block { margin-bottom: 26px; }
.cqp-h2 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text);
  padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cqp-win { font-size: 11px; font-weight: 400; text-transform: none; color: var(--text-dim); }
.cqp-def {
  font-size: 12px; line-height: 1.6; color: var(--text-dim);
  margin-bottom: 10px; max-width: 105ch;
}
.cqp-def code { font-family: var(--font-mono); font-size: 11px; }
.cqp-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; }
.cqp-sub  { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
.cqp-title {
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cqp-days {
  padding: 5px 8px; font-size: 12px; font-family: var(--font-ui);
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
}

/* Button spinner for the "Collect now" run. */
.cqp-spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite; vertical-align: -1px; margin-right: 4px;
}

.cqp-table th.cqp-n,
.cqp-table td.cqp-n { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cqp-table td { vertical-align: top; }
/* A row where a count grew. Deliberately a bar rather than a wash: the row still
   has to be readable, and the point is to find these by scanning. */
.cqp-table tr.cqp-grew td:first-child { box-shadow: inset 3px 0 0 0 var(--red); }

/* The absolute count, beside its delta. Quieter than the delta on purpose — the
   movement is the news, the level is context. */
.cqp-abs { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

.cqp-na   { color: var(--text-muted); font-style: italic; cursor: help; }
.cqp-flat { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.cqp-up   { color: var(--red);   font-weight: 700; font-variant-numeric: tabular-nums; }
.cqp-down { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; }
.cqp-dim  { color: var(--text-dim); font-weight: 400; font-variant-numeric: tabular-nums; }

.cqp-tag {
  display: inline-block; font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 999px;
  border: 1px solid var(--border2); white-space: nowrap; cursor: help;
}
.cqp-tag-attr  { color: var(--amber);    border-color: var(--amber); }
/* Background Snyk drift: no verdict colour, and visibly quieter than the
   surrounding text. It must read as an explanation, never as an accusation. */
.cqp-tag-bg    { color: var(--text-dim); background: var(--surface2); }
.cqp-tag-first { color: var(--cyan);     border-color: var(--cyan); }

/* recordingSince — prominent by requirement. The tab shows a partial history by
   construction and a reader must not mistake a short table for a short month. */
.cqp-since {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; margin-bottom: 12px;
  font-size: 12px; line-height: 1.6;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--cyan); color: var(--text);
}
.cqp-since-icon { color: var(--cyan); font-size: 11px; line-height: 1.7; }
.cqp-runnote { font-size: 11.5px; color: var(--text-dim); margin-bottom: 14px; }

/* The empty state. Styled as information, NOT as an error box — an empty tab
   here is the expected first day, and it must not look like a failed load. */
.cqp-empty {
  padding: 22px 24px; margin-bottom: 20px;
  background: var(--surface2); border: 1px dashed var(--border2);
}
.cqp-empty-h { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cqp-empty-b { font-size: 12px; line-height: 1.7; color: var(--text-dim); max-width: 95ch; }

/* Tracked pipelines, live and dormant. Dormant ones are dimmed but PRESENT —
   an absent pipeline is indistinguishable from a broken collector. */
.cqp-pipes { margin-bottom: 18px; }
.cqp-pipes-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px;
}
.cqp-pipes-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cqp-pipes-foot {
  margin-top: 6px; font-size: 10.5px; line-height: 1.6;
  color: var(--text-dim); max-width: 95ch;
}
.cqp-pipe {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 5px 10px; font-size: 11px;
  background: var(--surface2); border: 1px solid var(--border2);
}
.cqp-pipe-name  { font-weight: 700; color: var(--text); }
.cqp-pipe-proj  { font-size: 10px; color: var(--text-dim); }
.cqp-pipe-last  { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); }
.cqp-pipe-state {
  font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px; border: 1px solid transparent;
}
.cqp-pipe-live            { border-left: 3px solid var(--green); }
.cqp-pipe-live  .cqp-pipe-state    { color: var(--green); border-color: var(--green); }
.cqp-pipe-dormant         { border-left: 3px solid var(--amber); opacity: 0.75; }
.cqp-pipe-dormant .cqp-pipe-state  { color: var(--amber); border-color: var(--amber); }

/* The legend earns its space: "—" vs "0" is the most consequential distinction
   on the page and neither symbol explains itself. */
.cqp-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px; margin-top: -8px;
  font-size: 11px; line-height: 1.7; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border);
}

/* ── Code Quality: cell-specific drill affordances ───────────────────────────
   The rollup tables answer TWO questions and the cells are the only place the
   difference can be expressed: the PRs figure opens the PR list, the Warnings
   figure opens the warnings that were added and removed. Sonar and Snyk are
   deliberately inert — only their counts are captured — so they get the plain
   cursor and a title saying so, rather than looking live and opening nothing.
   ------------------------------------------------------------------------- */
.cqp-cell-go {
  cursor: pointer;
  /* A dotted rule under the FIGURE, not a whole-row highlight: the point is
     that this cell is clickable and its neighbours are not. */
  box-shadow: inset 0 -1px 0 0 var(--border2);
}
.cqp-cell-go:hover     { background: var(--surface2); }
.cqp-cell-go:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: -2px; background: var(--surface2);
}
.cqp-go {
  margin-left: 5px; font-size: 12px; color: var(--text-muted); opacity: 0.55;
}
.cqp-cell-go:hover .cqp-go { opacity: 1; color: var(--cyan); }
.cqp-cell-static { cursor: default; }

/* ── Code Quality: the warning-detail fly-out (inside #drill-body) ───────────
   Warning detail is captured FORWARD ONLY, so the most important state here is
   the one with NO rows in it: `.cqp-wnone` must read as "not captured", never
   as a clean bill of health. It is styled as a statement, not as an empty
   table and not as an error.
   ------------------------------------------------------------------------- */
.cqp-wsum {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim);
}
.cqp-wsum-i { display: inline-flex; gap: 6px; align-items: baseline; }
.cqp-wnote {
  font-size: 11.5px; line-height: 1.6; color: var(--text-dim);
  margin-bottom: 10px; max-width: 95ch;
}
/* Partial capture. A list covering 18 of 21 builds looks exactly like a
   complete one, so the shortfall is stated above the lists, in amber. */
.cqp-wmissing {
  padding: 9px 12px; margin-bottom: 10px;
  font-size: 11.5px; line-height: 1.6; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--amber); max-width: 95ch;
}
.cqp-wnone {
  padding: 18px 20px; margin-bottom: 12px;
  background: var(--surface2); border: 1px dashed var(--border2);
  border-left: 3px solid var(--amber);
}
.cqp-wnone-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cqp-wnone-b { font-size: 12px; line-height: 1.7; color: var(--text-dim); max-width: 90ch; }
.cqp-wreason {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text);
  padding: 6px 9px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border2);
}

.cqp-wsec { margin-bottom: 18px; }
.cqp-wsec-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); padding-bottom: 5px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cqp-wsec-n { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); }

/* One warning CODE, collapsed. The code is the actionable unit; 186 flat file
   rows is not something anyone reads. <details> so no JS is needed to expand. */
.cqp-wgrp { border: 1px solid var(--border); margin-bottom: 6px; background: var(--surface); }
.cqp-wgrp > summary {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; cursor: pointer; font-size: 12px; list-style: none;
}
.cqp-wgrp > summary::-webkit-details-marker { display: none; }
.cqp-wgrp > summary::before {
  content: '\25B8'; color: var(--text-muted); font-size: 10px;
}
.cqp-wgrp[open] > summary::before { content: '\25BE'; }
.cqp-wgrp > summary:hover { background: var(--surface2); }
.cqp-wcode {
  font-family: var(--font-mono); font-weight: 700; color: var(--text);
  min-width: 8ch;
}
.cqp-wfiles { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.cqp-wex {
  font-size: 10.5px; color: var(--text-muted); flex: 1 1 20ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cqp-wtable { width: 100%; border-collapse: collapse; }
.cqp-wtable td {
  padding: 5px 10px; font-size: 11.5px; vertical-align: top;
  border-top: 1px solid var(--border);
}
.cqp-wtable td.cqp-n {
  text-align: right; white-space: nowrap; width: 6ch; font-variant-numeric: tabular-nums;
}
.cqp-wfile {
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  display: inline-block; max-width: 64ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
/* The message carries user code identifiers and generics; clipped, with the
   full text on hover. */
.cqp-wmsg { max-width: 78ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cqp-wbuilds { white-space: nowrap; text-align: right; }
.cqp-wbuild {
  display: inline-block; margin-left: 4px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border2); border-radius: 3px; text-decoration: none;
}
a.cqp-wbuild:hover { color: var(--cyan); border-color: var(--cyan); }
.cqp-wbuild-more { margin-left: 4px; font-size: 10px; color: var(--text-muted); }
.cqp-wmore {
  padding: 5px 10px; font-size: 10.5px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.cqp-whint {
  font-size: 10.5px; line-height: 1.6; color: var(--text-muted);
  max-width: 90ch; margin-top: 4px;
}
/* "Detail was captured and nothing changed" — the OPPOSITE finding to
   .cqp-wnone above, so it must not look like it. Neutral, no amber rule: this
   one really is a clean bill of health for the builds it covers. */
.cqp-wmeasured {
  padding: 18px 20px; margin-bottom: 12px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-left: 3px solid var(--green);
}
/* ══════════════════════════════════════════════════════════════════
   RELEASE REPORT (rr-*) — the second-generation Pinch Report.
   Everything here is built on the theme variables above, so dark mode
   needs no second palette. The design source is the Claude Design
   prototype, whose literal hexes were deliberately NOT copied: they
   were light-mode only.
   ══════════════════════════════════════════════════════════════════ */

/* ── header strip ───────────────────────────────────────────────── */
.rr-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding: 4px 0 14px;
}
.rr-head-label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
  border-left: 3px solid var(--primary); padding-left: 8px;
  font-family: 'Montserrat', var(--font-ui);
}
.rr-app-select {
  font-size: 15px; font-weight: 700; color: var(--text-bright);
  background: var(--surface); border: 1px solid var(--border2);
  padding: 6px 10px; cursor: pointer; font-family: var(--font-ui);
  border-radius: 4px;
}
.rr-head-meta { font-size: 12px; color: var(--text-dim); }
.rr-build-marker {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  border: 1px solid var(--border2); padding: 2px 5px; border-radius: 3px;
}
.rr-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.rr-link {
  font-size: 12px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-ui);
}
.rr-link:hover { text-decoration: underline; }
.rr-link[disabled] { color: var(--text-muted); cursor: default; text-decoration: none; }
.rr-refresh-status {
  display: flex; align-items: center; gap: 9px; min-height: 38px;
  padding: 8px 14px; margin-bottom: 10px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text); font-size: 12px; font-weight: 600;
  border-radius: 4px;
}
.rr-refresh-loading { border-color: var(--primary); }
.rr-refresh-success { border-color: var(--success); color: var(--success); }
.rr-refresh-error { border-color: var(--danger); color: var(--danger); }
.rr-refresh-spinner {
  width: 13px; height: 13px; flex: none; border: 2px solid var(--border2);
  border-top-color: var(--primary); border-radius: 50%; animation: rr-spin .8s linear infinite;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rr-refresh-spinner { animation: none; } }

/* ── scope rail ─────────────────────────────────────────────────── */
.rr-rail-card {
  min-width: 0;
  border: 1px solid var(--border2); background: var(--surface);
  cursor: pointer; overflow: hidden; text-align: left;
  padding: 0; font-family: var(--font-ui); border-radius: 4px;
}
/* Lead scopes (Since production + every cut) in a fixed column on the left;
   release history in a one-row lane beside them, newest nearest the cut. */
.rr-rail-wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 14px; align-items: stretch;
}
.rr-rail-wrap--lead-only { grid-template-columns: minmax(0, 1fr); }
/* Every lead card stays on one row — a second cut sits beside the first, never
   below it — and the history lane stretches to the same height. */
.rr-rail-lead { display: grid; grid-auto-flow: column; grid-auto-columns: 224px; gap: 10px; align-items: stretch; }
.rr-rail-wrap--lead-only .rr-rail-lead { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 224px)); }
.rr-rail-history { min-width: 0; display: flex; flex-direction: column; }
.rr-rail-history-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.rr-rail-controls { order: 1; margin-left: auto; text-transform: none; letter-spacing: 0; }
.rr-rail-axis--end { order: 2; }
.rr-rail-earlier {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--primary);
}
.rr-rail-earlier:hover { text-decoration: underline; }
.rr-rail-earlier:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-rail-axis--none { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.rr-rail-controls .rr-link { font-size: 11.5px; }
.rr-rail-sep { margin: 0 6px; color: var(--text-dim); }
.rr-rail-lane {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  flex: 1 1 auto; gap: 10px; overflow-x: auto;
}
.rr-rail-lane:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
/* A stretched button centres its content; keep the tag on the top line. */
.rr-rail-card--compact { display: flex; flex-direction: column; justify-content: flex-start; }
.rr-rail-card--compact .rr-rail-body { padding: 8px 11px 9px; }
.rr-rail-facts {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 5px;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rr-rail-facts > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rr-rail-count { font-weight: 700; color: var(--text-bright); }
.rr-badge-recon { color: var(--text-dim); border-color: var(--border2); background: transparent; font-weight: 500; }
.rr-dot-hollow { background: transparent; border: 1px solid var(--text-dim); box-sizing: border-box; }
.rr-rail-drawer {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
.rr-rail-month + .rr-rail-month { margin-top: 12px; }
.rr-rail-month-label {
  margin-bottom: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.rr-rail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rr-rail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rr-rail-chip { font-family: var(--font-mono); padding: 2px 8px; }
@media (max-width: 820px) {
  .rr-rail-wrap { grid-template-columns: minmax(0, 1fr); }
  .rr-rail-lead { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .rr-rail-lane {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow-x: visible;
  }
}

/* Per-repo production: which release line each service is running. */
.rr-composition {
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface);
}
.rr-composition-head { margin-bottom: 8px; font-size: 12.5px; color: var(--text-dim); }
.rr-composition-head strong { color: var(--text-bright); }
.rr-comp-warn { color: var(--amber); }
.rr-comp-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.rr-comp-table th {
  text-align: left; padding: 3px 20px 5px 0; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.rr-comp-table td { padding: 4px 20px 4px 0; color: var(--text); white-space: nowrap; }
.rr-comp-table tr.rr-comp-first td { border-top: 1px solid var(--border); }
.rr-comp-table tbody tr:first-child td { border-top: 0; }
.rr-comp-table td.rr-comp-name { white-space: normal; width: 100%; }
.rr-comp-line { font-weight: 600; color: var(--text-bright); }
.rr-comp-tag, .rr-comp-date, .rr-comp-age { color: var(--text-dim); }
.rr-comp-date { white-space: nowrap; }
.rr-comp-table th:last-child, .rr-comp-table td:last-child { padding-right: 0; }
.rr-comp-prefix { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rr-comp-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--border2); vertical-align: 1px; }
.rr-comp-dot.rr-comp-fresh { background: var(--green); }
.rr-comp-dot.rr-comp-aging { background: color-mix(in srgb, var(--green) 45%, var(--amber)); }
.rr-comp-dot.rr-comp-stale { background: var(--amber); }
.rr-comp-dot.rr-comp-old   { background: var(--red); }
.rr-comp-missing { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rr-comp-missing-head { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.rr-comp-count { display: inline-block; padding: 0 6px; border-radius: 8px; background: var(--border); font-size: 10.5px; color: var(--text); }
.rr-comp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.rr-comp-chips li { padding: 1px 7px; border: 1px solid var(--border); border-radius: 3px; font-size: 11.5px; color: var(--text-dim); }
.rr-rail-accent { height: 3px; background: transparent; }
.rr-rail-card.rr-on .rr-rail-accent { background: var(--primary); }
.rr-rail-card.rr-on.rr-cut-ready .rr-rail-accent { background: var(--success); }
.rr-rail-card.rr-cut-ready { background: var(--success-bg); border-color: var(--success); }
.rr-rail-card.rr-hotfix-cut { border-color: var(--warning); }
.rr-rail-card.rr-hotfix-cut .rr-rail-accent { background: var(--warning); }
.rr-rail-body { padding: 11px 14px 12px; }
.rr-rail-kicker {
  margin-bottom: 7px; color: var(--primary); font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.rr-rail-card.rr-cut-ready .rr-rail-kicker { color: var(--success); }
.rr-rail-card.rr-hotfix-cut .rr-hotfix-kicker { color: var(--warning); }
.rr-rail-top {
  display: flex; align-items: center; gap: 6px; row-gap: 4px;
  flex-wrap: wrap; min-height: 18px;
}
.rr-rail-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-bright);
  font-family: 'Montserrat', var(--font-ui);
}
.rr-rail-title.rr-mono { font-family: var(--font-mono); font-size: 11.5px; text-transform: none; }
.rr-rail-title.rr-cut-version { font-size: 15px; }
.rr-rail-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.rr-rail-card[disabled] { cursor: default; opacity: .62; }
.rr-rail-card[disabled]:hover { background: var(--surface); }
.rr-rail-card:not([disabled]):hover { background: var(--row-hover); }
/* The flag/unlinked-commit line only exists once a scope's report has been
   built, so it only ever appears on the currently-loaded card. */
.rr-rail-flag {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; font-weight: 600; color: var(--amber);
}

/* ── generic surfaces ───────────────────────────────────────────── */
.rr-panel { background: var(--surface); border: 1px solid var(--border); margin-top: 16px; border-radius: 4px; overflow: hidden; }
.rr-scroll-target { scroll-margin-top: 12px; }
.rr-scroll-target:focus { outline: none; }
.rr-scroll-target:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-panel-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 20px; background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}
.rr-panel-title { font-size: 12.5px; font-weight: 700; color: var(--text-bright); font-family: 'Montserrat', var(--font-ui); }
.rr-panel-hint { font-size: 13px; color: var(--text); }
/* Two rows: title, hint and Team on the first, the status chips on their own
   full-width row. On one nowrap row the chips (up to eight) squeezed the
   title and hint into a narrow wrapped column. */
.rr-cut-filter-line { flex-wrap: wrap; gap: 8px 10px; }
.rr-cut-filter-line .rr-panel-title { white-space: nowrap; }
.rr-cut-filter-line .rr-panel-hint { flex: 1 1 220px; min-width: 0; }
.rr-cut-filter-line .rr-chips {
  order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 2px;
}
.rr-team-filter {
  display: flex; align-items: center; gap: 7px; margin-left: auto;
  color: var(--text-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.rr-team-filter select {
  min-width: 150px; padding: 5px 28px 5px 8px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text-bright); font: 600 12px var(--font-ui);
  text-transform: none; letter-spacing: 0; border-radius: 4px;
}
.rr-cut-table-meta {
  padding: 7px 20px; border-bottom: 1px solid var(--border2);
  color: var(--text-dim); font-size: 11.5px;
}
.rr-cut-table-meta strong { color: var(--text-bright); }
@media (max-width: 720px) {
  .rr-cut-filter-line { align-items: flex-start; flex-wrap: wrap; padding: 10px 12px; }
  .rr-cut-filter-line .rr-panel-title { width: 100%; }
  .rr-cut-filter-line .rr-chips {
    order: 3; width: 100%; margin-left: 0; padding-bottom: 3px;
    overflow-x: auto; flex-wrap: nowrap;
  }
  .rr-team-filter { width: 100%; margin-left: 0; }
  .rr-team-filter select { flex: 1; min-width: 0; }
  .rr-cut-table-meta { padding: 7px 12px; }
}
.rr-section-copy {
  margin-left: auto; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text-bright); font: 700 17px/1 var(--font-ui);
  cursor: pointer; border-radius: 4px;
}
.rr-section-copy:hover { border-color: var(--primary); color: var(--primary); }
.rr-section-copy:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-scroll-top {
  position: fixed; right: 78px; bottom: 20px; z-index: 40;
  width: 42px; height: 42px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text-bright);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); font: 700 22px/1 var(--font-ui);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
  border-radius: 4px;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.rr-scroll-top.rr-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.rr-scroll-top:hover { border-color: var(--primary); color: var(--primary); }
.rr-scroll-top:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
@media (max-width: 620px) { .rr-scroll-top { right: 76px; bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { .rr-scroll-top { transition: none; } }
.rr-cards { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-top: 16px; }
.rr-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 20px 24px; flex: 1 1 260px; border-radius: 4px;
}
.rr-card-lead { flex: 2 1 380px; }
.rr-card-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.rr-big {
  font-family: 'Montserrat', var(--font-ui); font-size: 52px; font-weight: 700;
  line-height: 1; color: var(--text-bright);
}
.rr-med {
  font-family: 'Montserrat', var(--font-ui); font-size: 28px; font-weight: 700;
  line-height: 1; color: var(--text-bright);
}
.rr-baseline-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.rr-card-note { font-size: 12px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }
.rr-divider { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border2); }
.rr-flags { display: flex; gap: 22px; font-size: 12.5px; flex-wrap: wrap; }
.rr-flag-ready { color: var(--revert-blue); font-weight: 700; }
.rr-flag-po    { color: var(--amber);       font-weight: 700; }
.rr-flag-po-missing { color: var(--danger); font-weight: 700; }
.rr-flag-unassigned { color: var(--danger); font-weight: 700; }
.rr-flag-dacpac { color: #c2410c; font-weight: 700; }
.rr-flag-unl   { color: var(--viz-2);       font-weight: 700; }
.rr-cut-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rr-cut-state {
  padding: 1px 7px; border: 1px solid; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 3px;
}
.rr-cut-state-blocked { color: var(--amber); border-color: var(--warning); background: var(--ai-bg-high); }
.rr-cut-state-ready { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.rr-readiness-bar { display: flex; height: 10px; margin-top: 18px; overflow: hidden; background: var(--surface2); }
.rr-readiness-segment { min-width: 2px; }
.rr-readiness-signed { background: var(--success); }
.rr-readiness-awaiting { background: var(--amber); }
.rr-readiness-not-ready { background: var(--danger); }
.rr-readiness-unknown { background: var(--text-muted); }
.rr-readiness-no-signable { background: #b77900; }
.rr-readiness-legend { display: flex; gap: 8px 18px; margin-top: 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; align-items: center; }
.rr-readiness-legend button.rr-readiness-label {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700;
}
.rr-readiness-legend button.rr-readiness-label:hover { text-decoration: underline; }
.rr-readiness-text-signed { color: var(--success); }
.rr-readiness-text-awaiting { color: var(--amber); }
.rr-readiness-text-not-ready { color: var(--danger); }
.rr-readiness-text-unknown { color: var(--text-muted); }
.rr-readiness-text-no-signable { color: #b77900; }
.rr-readiness-text-static { color: var(--text-dim); font-weight: 700; }
.rr-cut-summary { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.rr-cut-summary .rr-cut-panel { flex: 2 1 650px; margin-top: 0; }
.rr-blocker-card { flex: 1 1 320px; background: var(--ai-bg-high); border-color: var(--warning); }
.rr-blocker-card-ready { background: var(--success-bg); border-color: var(--success); }
.rr-cut-panel { margin-top: 16px; }
.rr-cut-grid { display: flex; align-items: stretch; flex-wrap: wrap; }
.rr-cut-col {
  flex: 1 1 220px; padding: 20px 24px; min-width: 0;
  border-left: 1px solid var(--border2);
}
.rr-cut-col:first-child { border-left: none; }
.rr-cut-col-lead { flex: 2 1 380px; }
.rr-cut-readiness-col { display: flex; flex: 2 1 420px; flex-direction: column; justify-content: center; }
.rr-cut-col-warning { background: var(--ai-bg-high); }
.rr-cut-panel-foot {
  padding: 8px 24px; border-top: 1px solid var(--border2);
  font-size: 11px; color: var(--text-dim);
}
.rr-deployment-details {
  margin-top: 14px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 4px; overflow: hidden;
}
.rr-deployment-summary {
  display: flex; align-items: center; gap: 14px; min-height: 62px;
  padding: 9px 16px; cursor: pointer; list-style: none;
}
.rr-deployment-summary::-webkit-details-marker { display: none; }
.rr-deployment-summary:hover { background: var(--row-hover); }
.rr-deployment-summary:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: -3px; }
.rr-deployment-heading {
  flex: 0 0 88px; color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.rr-deployment-track { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.rr-deployment-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; flex: 1; padding: 8px 11px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text-dim);
}
.rr-deployment-cell-current { border-color: var(--success); background: var(--success-bg); }
.rr-deployment-cell-production { background: var(--surface); }
.rr-deployment-cell-label {
  color: var(--text-bright); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; white-space: nowrap;
}
.rr-deployment-environment-link { color: inherit; text-decoration: none; }
.rr-deployment-environment-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.rr-deployment-environment-link:focus-visible { outline: 2px solid var(--revert-blue); outline-offset: 2px; }
.rr-deployment-cell strong {
  min-width: 0; overflow: hidden; color: var(--text); font-size: 11px;
  font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap;
}
.rr-deployment-cell-current strong { color: var(--success); }
.rr-deployment-chevron { color: var(--text-muted); font-size: 17px; line-height: 1; }
.rr-deployment-details-link {
  flex: 0 0 auto; color: var(--primary); font-size: 11px; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap;
}
.rr-deployment-detail-body { border-top: 1px solid var(--border2); }
.rr-deployment-table-scroll { max-width: 100%; overflow-x: auto; }
.rr-deployment-table {
  width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed;
  font-size: 12px;
}
.rr-deployment-table th {
  padding: 8px 16px; color: var(--text-dim); border-bottom: 1px solid var(--border2);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-align: left;
  text-transform: uppercase; white-space: nowrap;
}
.rr-deployment-table td {
  padding: 9px 16px; color: var(--text); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rr-deployment-table tbody tr:last-child td { border-bottom: none; }
.rr-deployment-table tbody tr:hover { background: var(--row-hover); }
.rr-deployment-table th:nth-child(1) { width: 36%; }
.rr-deployment-table th:nth-child(2) { width: 24%; }
.rr-deployment-table th:nth-child(3) { width: 14%; }
.rr-deployment-table th:nth-child(4) { width: 16%; }
/* Environment cell carries app + pipeline detail: wrap it rather than spill into Version. */
.rr-deployment-table td:nth-child(1) { white-space: normal; overflow-wrap: anywhere; }
.rr-deployment-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.rr-scheduled-pipelines .rr-deployment-table th:nth-child(1) { width: 25%; }
.rr-scheduled-pipelines .rr-deployment-table th:nth-child(2) { width: 12%; }
.rr-scheduled-pipelines .rr-deployment-table th:nth-child(3) { width: 37%; }
.rr-scheduled-pipelines .rr-deployment-table th:nth-child(4) { width: 18%; }
.rr-scheduled-pipelines .rr-deployment-table th:nth-child(5) { width: 8%; }
.rr-scheduled-pipelines .rr-deployment-table td { overflow: hidden; text-overflow: ellipsis; }
.rr-schedule-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-scheduled-pipelines > summary { cursor: pointer; list-style: none; }
.rr-scheduled-pipelines > summary::-webkit-details-marker { display: none; }
.rr-scheduled-pipelines > summary::before { content: '▸'; color: var(--primary); font-size: 11px; }
.rr-scheduled-pipelines[open] > summary::before { content: '▾'; }
.rr-scheduled-pipelines > summary:hover { color: var(--text-bright); }
.rr-scheduled-pipelines > summary:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: -3px; }
.rr-deployment-version { color: var(--text-bright); font-family: var(--font-mono); font-size: 11px; }
.rr-deployment-row-detail { margin-left: 4px; color: var(--text-dim); font-size: 11px; }
.rr-deployment-relative-badge {
  margin-left: 6px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text-dim); font-family: var(--font-base, inherit);
  font-size: 10px; font-weight: 600; white-space: nowrap;
}
.rr-deployment-group + .rr-deployment-group { margin-top: 16px; }
.rr-deployment-group-label {
  padding: 0 16px 6px; color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.rr-deployment-noise-note {
  margin: 0; padding: 6px 16px 10px; color: var(--text-muted); font-size: 11px;
}
.rr-deployment-history-heading td {
  padding: 8px 16px; color: var(--text-dim); background: var(--surface2);
  border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.rr-deployment-history-heading span { margin-left: 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.rr-deployment-history-details { border-top: 1px solid var(--border2); }
.rr-deployment-history-details > summary {
  display: flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer;
  list-style: none; color: var(--text-dim); background: var(--surface2);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.rr-deployment-history-details > summary::-webkit-details-marker { display: none; }
.rr-deployment-history-details > summary::before { content: '▸'; color: var(--primary); font-size: 11px; }
.rr-deployment-history-details[open] > summary::before { content: '▾'; }
.rr-deployment-history-details > summary:hover { color: var(--text-bright); }
.rr-deployment-history-details > summary:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: -3px; }
.rr-deployment-history-details > summary > span { font-weight: 400; letter-spacing: 0; }
.rr-deployment-history-details > summary > small {
  margin-left: 8px; color: var(--text-muted); font-size: 10px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
.rr-deployment-history-details > summary > .rr-deployment-history-time-note { margin-left: auto; }
.rr-deployment-history-run td:nth-child(4) { white-space: normal; }
.rr-preprod-run-outcome { display: block; color: var(--text-bright); font-size: 11px; }
.rr-preprod-stage-list { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.rr-preprod-stage { font-size: 10px; font-weight: 600; white-space: nowrap; }
.rr-preprod-stage-ok { color: var(--success); }
.rr-preprod-stage-warning { color: var(--amber); }
.rr-preprod-stage-muted { color: var(--text-muted); }
.rr-deployment-history-footer {
  display: flex; align-items: center; gap: 18px; padding: 9px 16px;
  border-top: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); font-size: 11px;
}
.rr-deployment-history-note { margin-left: auto; }
.rr-staging-pipeline { margin-top: 10px; }
.rr-staging-heading { display: flex; align-items: center; gap: 12px; }
.rr-staging-heading .rr-staging-history-link { margin-left: auto; }
.rr-staging-environment-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.rr-staging-environment-link:hover { color: var(--text-bright); }
.rr-staging-environment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.rr-staging-environment { min-width: 0; padding: 12px; border: 1px solid var(--border2); background: var(--surface2); }
.rr-staging-environment-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rr-staging-version { color: var(--text-bright); font-family: var(--font-mono); font-size: 16px; overflow-wrap: anywhere; text-align: right; }
.rr-staging-environment-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--text-dim); font-size: 11px; }
.rr-staging-history { margin-top: 16px; border-top: 1px solid var(--border2); padding-top: 12px; }
.rr-staging-history summary { color: var(--text-bright); cursor: pointer; font-size: 12px; font-weight: 700; }
.rr-staging-history-count { color: var(--text-dim); font-weight: 400; }
.rr-staging-history-list { display: grid; gap: 7px; margin-top: 10px; }
.rr-staging-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; font-size: 11.5px; }
.rr-staging-history-tag { color: var(--text-bright); font-family: var(--font-mono); overflow-wrap: anywhere; }
.rr-staging-history-date { color: var(--text-dim); white-space: nowrap; }
.rr-staging-history-link { color: var(--primary); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rr-staging-history-link:hover { text-decoration: underline; }
.rr-staging-subsection { margin-top: 18px; border-top: 1px solid var(--border2); padding-top: 16px; }
.rr-staging-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.rr-staging-slot { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--border2); }
.rr-staging-slot span, .rr-staging-last-deploy .rr-card-label { color: var(--text-dim); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.rr-staging-slot-link { color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
.rr-staging-slot-link:hover { color: var(--text-bright); }
.rr-staging-slot strong { color: var(--text-bright); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.rr-staging-last-deploy { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.rr-staging-last-deploy > div:first-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rr-staging-last-deploy > div:first-child > strong { color: var(--text-bright); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.rr-staging-last-deploy-meta { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.rr-staging-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; }
.rr-staging-row-label { font-weight: 600; color: var(--text-bright); min-width: 78px; }
.rr-staging-row-date { color: var(--text-dim); margin-left: auto; }
.rr-staging-row-status { white-space: nowrap; }
@media (max-width: 620px) {
  .rr-deployment-summary { flex-wrap: wrap; gap: 8px 12px; padding: 9px 12px; }
  .rr-deployment-heading { flex-basis: auto; }
  .rr-deployment-details-link { margin-left: auto; }
  .rr-deployment-track { flex-basis: 100%; order: 3; overflow-x: auto; padding-bottom: 2px; }
  .rr-deployment-cell { flex: 0 0 190px; }
  .rr-deployment-history-footer { align-items: flex-start; flex-wrap: wrap; gap: 7px 14px; padding: 9px 12px; }
  .rr-deployment-history-note { flex-basis: 100%; margin-left: 0; }
  .rr-staging-environment-grid, .rr-staging-slot-grid { grid-template-columns: 1fr; }
  .rr-staging-environment-head, .rr-staging-last-deploy { align-items: flex-start; flex-direction: column; }
  .rr-staging-version { text-align: left; }
  .rr-staging-last-deploy-meta { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .rr-staging-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rr-staging-history-row strong { justify-self: end; }
}
@media (max-width: 900px) {
  .rr-cut-col { border-left: none; border-top: 1px solid var(--border2); flex: 1 1 100%; }
  .rr-cut-col:first-child { border-top: none; }
}

/* Identity strip: who/what/where for this cut, folded into one line. */
.rr-identity-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; margin-top: 14px; border-radius: 4px;
  border: 1px solid var(--border2); background: var(--surface2);
  font-size: 12.5px; color: var(--text-dim);
}
.rr-identity-label { font-weight: 700; color: var(--text-bright); }
.rr-identity-badge {
  padding: 2px 8px; border-radius: 3px; font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--primary);
}
.rr-identity-item { display: flex; align-items: center; gap: 5px; }
.rr-id-inline { font-size: 11px; }
.rr-kebab { position: relative; margin-left: auto; }
.rr-kebab > summary {
  list-style: none; cursor: pointer; padding: 3px 9px; border-radius: 4px;
  color: var(--text-dim); font-size: 16px; line-height: 1;
}
.rr-kebab > summary::-webkit-details-marker { display: none; }
.rr-kebab > summary:hover, .rr-kebab[open] > summary { background: var(--surface); color: var(--text-bright); }
.rr-kebab-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  display: flex; flex-direction: column; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15); overflow: hidden;
}
.rr-kebab-menu button {
  text-align: left; padding: 9px 14px; border: none; background: none;
  color: var(--text-bright); font: 600 12.5px/1.4 var(--font-ui); cursor: pointer;
}
.rr-kebab-menu button:hover { background: var(--surface2); color: var(--primary); }
@media (max-width: 720px) {
  .rr-identity-strip { padding: 10px 12px; }
}

.rr-note-card { background: var(--blue-light); border-color: var(--border2); }
.rr-note-head { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-bright); margin-top: 10px; line-height: 1.45; }
.rr-review-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.rr-review-pair { display: inline-flex; align-items: center; gap: 6px; }
.rr-review-pair .rr-group-copy { margin-left: 0; color: var(--text); }
.rr-contents-copy {
  padding: 4px 10px; border: 1px solid var(--border2); border-radius: 3px;
  background: var(--surface); color: var(--text-bright); font: 600 12px/1.4 var(--font-ui); cursor: pointer;
}
.rr-contents-copy:hover { border-color: var(--primary); color: var(--primary); }
.rr-contents-copy:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }

/* Source-of-truth banner: says where the dates came from. */
.rr-source {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 16px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); margin-top: 14px; border-radius: 4px;
}
.rr-source.rr-source-weak { background: var(--ai-bg-high); border-color: var(--warning); color: var(--text); }
.rr-config-warning {
  margin-top: 14px; padding: 12px 16px; border: 1px solid var(--warning);
  border-left-width: 4px; border-radius: 4px; background: var(--ai-bg-high);
  color: var(--text); font-size: 12px; line-height: 1.5;
}
.rr-config-warning-head { display: flex; gap: 8px; align-items: center; color: var(--text-bright); }
.rr-config-warning-copy { margin-top: 5px; }
.rr-config-warning ul { margin: 8px 0 0 18px; padding: 0; }
.rr-config-warning li + li { margin-top: 4px; }
.rr-config-warning strong { color: var(--text-bright); }

/* ── tables ─────────────────────────────────────────────────────── */
.rr-table-scroll { max-width: 100%; overflow-x: auto; }
.rr-table-scroll:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
/* Density and weight here mirror the release-report prototype: proportional
   body text at 12.5px, roomier row padding, and only the id/PR columns kept
   in monospace — not the Pinch Report's tighter, all-monospace .rp-table. */
.rr-tbl { width: 100%; min-width: 950px; table-layout: fixed; border-collapse: collapse; font-family: var(--font-ui); font-size: 12.5px; }
.rr-tbl th {
  text-align: left; padding: 7px 20px 7px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
  border-bottom: 1px solid var(--border2); white-space: nowrap;
}
.rr-tbl th:first-child, .rr-tbl td:first-child { padding-left: 20px; }
.rr-tbl th:last-child, .rr-tbl td:last-child { padding-right: 20px; }
.rr-sort-button {
  border: 0; padding: 0; background: transparent; color: inherit;
  font: inherit; font-weight: inherit; cursor: pointer;
}
.rr-sort-button:hover { color: var(--text-bright); text-decoration: underline; }
.rr-sort-button:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 3px; }
.rr-tbl td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
  line-height: 1.4; overflow: hidden; font-weight: 400;
  white-space: nowrap; text-overflow: ellipsis;
}
/* The flags/status cell legitimately holds several badges that should wrap
   onto more than one line, so it opts back out of the single-line default. */
.rr-flags-cell { white-space: normal; }
.rr-tbl tbody tr:hover { background: var(--row-hover); }
.rr-id, .rr-pr {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--text-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rr-pr { color: var(--viz-7); overflow: visible; }
.rr-pr-links { display: inline-flex; align-items: flex-start; gap: 5px; max-width: 100%; }
.rr-pr-links > a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rr-pr-links > a:hover { color: var(--text-bright); }
.rr-pr-links > a:focus-visible,
.rr-related-prs-inline a:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-related-prs-inline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rr-related-prs-inline a:hover { color: var(--text-bright); }
.rr-title-cell { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-owner-unassigned { color: var(--danger); font-weight: 600; }
.rr-title-cell a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rr-title-cell a:hover { color: var(--text-bright); text-decoration-thickness: 2px; }
.rr-title-cell a:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
/* Wraps at the <wbr> _rrServiceChip puts after each dot, so a long repo name
   takes a second line instead of losing its distinguishing tail; anywhere is
   the fallback for a single undotted segment wider than the column. */
.rr-repo-chip {
  display: inline-block; max-width: 100%; overflow: hidden;
  white-space: normal; overflow-wrap: anywhere; font-size: 10.5px;
  font-weight: 600; color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border2); padding: 1px 7px; border-radius: 3px;
}
.rr-service-scope .rr-repo-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.rr-dim { color: var(--text-dim); }
.rr-badge-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
/* Leading readiness column in the Cut view's contents table — mirrors the
   prototype's leftmost square badge, ahead of the item id. Most rows carry
   just the compact letter square; reverted/landed rows carry a wider text
   pill instead, so the column isn't width-locked to the square's size.
   The width has to cover the cell's own 20px/10px padding plus the 16px
   square, or the square overflows a content box squeezed to nothing. */
.rr-status-head { width: 46px; min-width: 46px; }
/* Out-specifies `.rr-tbl td` deliberately: that rule's overflow:hidden +
   text-overflow:ellipsis otherwise applies here too, and anything wider than
   the content box (the letter square, the reverted pill) then makes Chrome
   paint a clipped ellipsis stub — the stray "two dots" beside the badge. */
.rr-tbl td.rr-status-cell { white-space: nowrap; overflow: visible; text-overflow: clip; }
.rr-col-id { width: 96px; }
.rr-col-repo { width: 150px; }
.rr-col-area { width: 140px; }
.rr-col-owner { width: 170px; }
.rr-col-pr { width: 90px; }
.rr-flags-head, .rr-flags-cell { width: 170px; min-width: 170px; }
.rr-relnote-head, .rr-relnote-cell { width: 110px; min-width: 110px; }

/* group headers inside a table */
.rr-group-row td {
  padding: 8px 20px; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--border2); cursor: pointer;
}
.rr-group-shipped  td { background: var(--ai-bg-medium); color: var(--purple); }
.rr-group-reverted td { background: var(--blue-light);   color: var(--revert-blue); }
.rr-group-landed td { background: var(--surface2); color: var(--text-dim); }
.rr-group-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim); margin-left: 10px; }
.rr-group-note a.rr-group-help { color: inherit; text-decoration: underline; font-weight: 600; }

/* Historic view, stepper layout (plans/release-report-historic-stepper.md) */
.rr-hist-prod {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px; border-radius: 4px;
  border: 1px solid var(--border2); background: var(--surface);
}
.rr-hist-prod-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); margin-right: 4px;
}
.rr-hist-prod-btn {
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font: 500 12.5px/1.4 var(--font-ui); text-align: left;
  border: 1px solid currentColor;
}
.rr-hist-prod-btn strong { font-family: var(--font-mono); margin-right: 4px; }
.rr-hist-prod-sunday { color: var(--rr-hist-prod-fg); background: var(--rr-hist-prod-bg); }
.rr-hist-prod-hot    { color: var(--rr-hist-hot-fg);  background: var(--rr-hist-hot-bg); }
.rr-hist-prod-btn:hover { filter: brightness(0.95); }

/* Sticky: must sit outside .rr-panel and .rr-table-scroll — both set
   overflow, which turns sticky off. The app header is not sticky, so top: 0. */
.rr-hist-stepper {
  position: sticky; top: 0; z-index: 4;
  margin-top: 14px; padding: 8px 0;
  background: var(--bg); border-bottom: 1px solid var(--border2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.rr-hist-stepper ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.rr-hist-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 108px; padding: 6px 10px; border-radius: 4px; cursor: pointer; text-align: left;
  border: 1px solid var(--border2); background: var(--surface); color: var(--text);
  font: 500 11.5px/1.35 var(--font-ui);
}
.rr-hist-step:hover { border-color: var(--text-dim); }
.rr-hist-step:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 1px; }
.rr-hist-step-tag { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--text-bright); }
.rr-hist-step-role { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.rr-hist-step-meta { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.rr-hist-step-prod { border-color: var(--rr-hist-prod-fg); background: var(--rr-hist-prod-bg); }
.rr-hist-step-prod .rr-hist-step-tag, .rr-hist-step-prod .rr-hist-step-role { color: var(--rr-hist-prod-fg); }
.rr-hist-step-hot { border-color: var(--rr-hist-hot-fg); background: var(--rr-hist-hot-bg); }
.rr-hist-step-hot .rr-hist-step-tag, .rr-hist-step-hot .rr-hist-step-role { color: var(--rr-hist-hot-fg); }
.rr-hist-step-after { opacity: .6; border-style: dashed; }
.rr-hist-step-check { border-color: var(--rr-hist-check-fg); }
.rr-hist-step-check .rr-hist-step-tag, .rr-hist-step-check .rr-hist-step-role { color: var(--rr-hist-check-fg); }
.rr-hist-step-stamp { border-style: dashed; }

.rr-hist-evidence > summary { cursor: pointer; list-style: none; }
.rr-hist-evidence > summary::-webkit-details-marker { display: none; }
.rr-hist-evidence > summary .rr-panel-title::before { content: '▸ '; }
.rr-hist-evidence[open] > summary .rr-panel-title::before { content: '▾ '; }

.rr-hist-group td { cursor: default; background: var(--surface2); color: var(--text-bright); }
.rr-hist-group { scroll-margin-top: 96px; }
.rr-hist-group-label { font-family: var(--font-mono); }
.rr-hist-group .rr-group-note a.rr-hist-run-link,
.rr-hist-group .rr-group-note a.rr-hist-ticket-link { color: inherit; text-decoration: underline; }
.rr-hist-group .rr-group-note .rr-hist-ticket-missing { font-style: italic; opacity: .8; }
.rr-group-prod  td { background: var(--rr-hist-prod-bg);  color: var(--rr-hist-prod-fg); }
.rr-group-hot   td { background: var(--rr-hist-hot-bg);   color: var(--rr-hist-hot-fg); }
.rr-group-check td { background: var(--rr-hist-check-bg); color: var(--rr-hist-check-fg); }
.rr-group-after td, .rr-group-stamp td { color: var(--text-dim); }
.rr-hist-group:focus { outline: none; }
.rr-hist-group:focus-visible td { outline: 2px solid var(--revert-blue); outline-offset: -2px; }
.rr-hist-flash td { animation: rr-hist-flash 1.6s ease-out; }
@keyframes rr-hist-flash { 0%, 30% { box-shadow: inset 4px 0 0 var(--revert-blue); filter: brightness(1.08); } 100% { box-shadow: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .rr-hist-flash td { animation: none; box-shadow: inset 4px 0 0 var(--revert-blue); } }
.rr-badge-check { color: var(--rr-hist-check-fg); border-color: var(--rr-hist-check-fg); background: transparent; }
/* Reconstructed lines (#137255): a step whose repositories disagree, or whose
   deploy evidence is incomplete, and the per-row hotfix badge. */
.rr-hist-step-mixed { border-style: dotted; }
.rr-group-mixed td { color: var(--text-dim); }
.rr-badge-hotfix { color: var(--rr-hist-hot-fg); border-color: var(--rr-hist-hot-fg); background: var(--rr-hist-hot-bg); }
@media (max-width: 720px) {
  .rr-hist-prod { padding: 8px 10px; }
  .rr-hist-step { min-width: 96px; }
}
.rr-release-unit-row td {
  background: var(--surface); border-top: 1px solid var(--border2);
}
.rr-release-unit-toggle {
  width: 15px; height: 15px; padding: 0; margin-right: 5px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 2px; background: transparent;
  color: var(--text-dim); font: 600 12px/1 var(--font-ui); cursor: pointer; vertical-align: -1px;
}
.rr-release-unit-toggle:hover { color: var(--primary); }
.rr-release-unit-toggle:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-release-unit-toggle-empty { margin-right: 5px; cursor: default; }
.rr-release-unit-type {
  color: var(--text-dim); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.rr-release-unit-id { font-family: var(--font-mono); font-size: 11px; font-weight: 400; }
.rr-release-unit-id a { color: var(--text-meta); text-decoration: none; }
.rr-release-unit-id a:hover { color: var(--primary); text-decoration: underline; }
.rr-release-unit-item { display: inline-flex; align-items: center; white-space: nowrap; }
.rr-release-unit-title { color: var(--text); font-weight: 400; }
.rr-release-unit-links { color: var(--text-dim); font-size: 10px; margin-left: 8px; white-space: nowrap; }
.rr-release-child-row td { background: var(--surface); }
.rr-release-child-row td.rr-status-cell { background: var(--surface); }

/* Shared-PR bundle: one row standing in for every parent item whose primary
   PR is the same. Members sit indented under it with a left rule. */
.rr-pr-bundle-row td {
  background: var(--surface2); border-top: 1px solid var(--border2);
}
.rr-pr-bundle-row, .rr-release-unit-expandable { cursor: pointer; }
.rr-pr-bundle-row:hover td { background: var(--row-hover); }
.rr-pr-bundle-row.rr-pr-bundle-urgent td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.rr-pr-bundle-count { color: var(--text-dim); font-size: 11px; font-weight: 600; }
.rr-pr-bundle-title { color: var(--text); font-weight: 600; }
.rr-pr-bundle-blocker, .rr-pr-bundle-clear { color: var(--text-dim); font-size: 10px; margin-left: 8px; }
.rr-pr-bundle-blocker strong { color: var(--text-meta); font-weight: 600; }
.rr-pr-bundle-member td:first-child { box-shadow: inset 3px 0 0 var(--border2); }
/* Collapsed bundle: rows pinned because they need action, then a footer. */
.rr-pr-bundle-pinned td { background: #fef2f2; }
.rr-pr-bundle-pinned td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
:root[data-theme="dark"] .rr-pr-bundle-pinned td { background: #2a1215; }
.rr-pr-bundle-footer td { padding: 4px 20px 6px; background: var(--surface2); border-bottom: 1px solid var(--border2); }
.rr-pr-bundle-footer td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.rr-pr-bundle-more {
  border: 0; padding: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font: 600 11px/1.4 var(--font-ui);
}
.rr-pr-bundle-more:hover { color: var(--primary); text-decoration: underline; }
.rr-pr-bundle-more:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }

/* Readiness banners inside the Cut view's contents table — one per status,
   reusing the same tinted color pairs as the badges below so a color always
   means the same thing everywhere on the page. */
.rr-cut-group-banner td {
  padding: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--border2);
}
.rr-group-banner-row { display: flex; align-items: center; gap: 10px; padding: 9px 20px; }
.rr-group-copy {
  margin-left: auto; width: 22px; height: 22px; padding: 0; flex: none;
  display: grid; place-items: center; border: 1px solid var(--border2);
  background: var(--surface); color: inherit; font: 400 13px/1 var(--font-ui);
  text-transform: none; letter-spacing: 0; cursor: pointer; border-radius: 3px;
}
.rr-group-copy:hover { border-color: var(--primary); color: var(--primary); }
.rr-group-copy:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }

/* ── badges ─────────────────────────────────────────────────────── */
.rr-badge {
  display: inline-block; font-size: 10px; line-height: 1.3; font-weight: 600;
  padding: 1px 6px; white-space: nowrap; border: 1px solid;
  margin: 0; border-radius: 3px;
}
.rr-badge-ready   { color: #1e40af; border-color: #3b82f6; background: #eff6ff; }
.rr-badge-unassigned { color: #991b1b; border-color: #dc2626; background: #fef2f2; }
.rr-badge-po      { color: #7a4d00; border-color: #b77900; background: #fff4d6; }
.rr-badge-po-missing { color: #991b1b; border-color: #dc2626; background: #fef2f2; }
.rr-badge-shipped { color: var(--purple);      border-color: var(--purple);      background: transparent; }
.rr-badge-derived { color: var(--text-dim);    border-color: var(--border2);     background: transparent; }
.rr-badge-stamp   { color: var(--text-dim);    border-color: var(--border2);     background: transparent; font-weight: 500; }
.rr-badge-also-linked { color: var(--text-dim); border-color: var(--border2); background: transparent; text-decoration: none; }
.rr-badge-revert  { color: var(--revert-blue); border-color: var(--revert-blue); background: transparent; }
.rr-badge-db      { color: #166534; border-color: #22c55e; background: #f0fdf4; }
.rr-badge-dacpac  { color: #9a3412; border-color: #f97316; background: #fff7ed; }
.rr-badge-tagged  { color: #075985; border-color: #0ea5e9; background: #f0f9ff; }
.rr-badge-live    { color: var(--green);       border-color: var(--green);       background: transparent; }
.rr-badge-team-ready { color: #166534; border-color: #22c55e; background: #f0fdf4; }
.rr-badge-po-signed  { color: #166534; border-color: #22c55e; background: #f0fdf4; }
.rr-status-missing { color: #7a4d00; border-color: #b77900; background: #fff4d6; }
.rr-status-not-ready { color: #991b1b; border-color: #dc2626; background: #fef2f2; }
.rr-status-awaiting { color: #7a4d00; border-color: #d69e00; background: #fffbeb; }
.rr-status-signed { color: #166534; border-color: #22c55e; background: #f0fdf4; }

/* Release Note column — Cut and Historic views only. */
.rr-relnote-cell { white-space: nowrap; }
.rr-badge-relnote-available { color: #166534; border-color: #22c55e; background: #f0fdf4; }
.rr-badge-relnote-empty     { color: #7a4d00; border-color: #d69e00; background: #fffbeb; }
.rr-badge-relnote-excluded  { color: var(--text-dim); border-color: var(--border); background: transparent; }
button.rr-relnote-open { font-family: inherit; cursor: pointer; }
button.rr-relnote-open:hover, button.rr-relnote-open[aria-expanded="true"] { text-decoration: underline; }
button.rr-relnote-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Release-note popover opened from an "Available" badge. */
.rr-relnote-pop {
  position: absolute; z-index: 50; max-height: 320px; overflow: auto;
  background: var(--surface); color: var(--text-bright);
  border: 1px solid var(--border2); border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  font: 13px/1.5 var(--font-ui);
}
.rr-relnote-pop-head {
  position: sticky; top: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.rr-relnote-pop-title { flex: 1; font-weight: 600; }
.rr-relnote-pop-close {
  border: none; background: none; color: var(--text-dim); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.rr-relnote-pop-close:hover { color: var(--primary); }
.rr-relnote-pop-body { padding: 8px 12px; overflow-wrap: anywhere; }
.rr-relnote-pop-body > :first-child { margin-top: 0; }
.rr-relnote-pop-body > :last-child { margin-bottom: 0; }
.rr-relnote-pop-body ul, .rr-relnote-pop-body ol { padding-left: 20px; }
.rr-relnote-pop-msg { padding: 8px 12px; color: var(--text-dim); font-style: italic; }

/* Per-row readiness badge inside a banner-grouped table: the banner already
   names the status in full, so the row only needs a compact colored square. */
.rr-status-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; border-radius: 3px;
  /* Bold white text this small on a saturated background is prone to
     ClearType sub-pixel fringing on Windows (reads as a stray mark next to
     the letter) — antialiasing plus a slightly larger box avoids it. */
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff; border: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.rr-status-letter.rr-status-missing   { background: #b77900; }
.rr-status-letter.rr-status-not-ready { background: #dc2626; }
.rr-status-letter.rr-status-awaiting  { background: #d69e00; }
.rr-status-letter.rr-status-signed    { background: #16a34a; }
.rr-status-letter.rr-status-shipped   { background: var(--purple); }
.rr-status-letter.rr-status-revert    { background: var(--revert-blue); }

:root[data-theme="dark"] .rr-badge-ready { color: #bfdbfe; border-color: #60a5fa; background: #172554; }
:root[data-theme="dark"] .rr-badge-unassigned { color: #fecaca; border-color: #f87171; background: #450a0a; }
:root[data-theme="dark"] .rr-badge-po    { color: #fde68a; border-color: #f59e0b; background: #422006; }
:root[data-theme="dark"] .rr-badge-po-missing { color: #fecaca; border-color: #f87171; background: #450a0a; }
:root[data-theme="dark"] .rr-badge-db    { color: #bbf7d0; border-color: #4ade80; background: #052e16; }
:root[data-theme="dark"] .rr-badge-dacpac { color: #fed7aa; border-color: #fb923c; background: #431407; }
:root[data-theme="dark"] .rr-badge-tagged { color: #bae6fd; border-color: #38bdf8; background: #082f49; }
:root[data-theme="dark"] .rr-status-missing,
:root[data-theme="dark"] .rr-status-awaiting { color: #fde68a; border-color: #f59e0b; background: #422006; }
:root[data-theme="dark"] .rr-status-not-ready { color: #fecaca; border-color: #f87171; background: #450a0a; }
:root[data-theme="dark"] .rr-status-signed { color: #bbf7d0; border-color: #4ade80; background: #052e16; }
:root[data-theme="dark"] .rr-badge-team-ready,
:root[data-theme="dark"] .rr-badge-po-signed { color: #bbf7d0; border-color: #4ade80; background: #052e16; }
:root[data-theme="dark"] .rr-badge-relnote-available { color: #bbf7d0; border-color: #4ade80; background: #052e16; }
:root[data-theme="dark"] .rr-badge-relnote-empty     { color: #fde68a; border-color: #f59e0b; background: #422006; }

/* ── filter chips ───────────────────────────────────────────────── */
.rr-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.rr-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 11px;
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border2); cursor: pointer; font-family: var(--font-ui);
  white-space: nowrap; border-radius: 4px;
}
.rr-chip.rr-on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── PIQ application tier ──────────────────────────────────────── */
.rr-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); }
.rr-app-row {
  display: grid; grid-template-columns: minmax(150px, 1fr) 90px 58px 66px auto;
  gap: 12px; align-items: center; min-height: 64px; padding: 10px 20px;
  width: 100%; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: var(--surface); color: inherit;
  text-align: left; font-family: var(--font-ui); cursor: pointer;
}
.rr-app-row-shared { background: var(--surface2); }
.rr-app-row:hover:not(:disabled) { background: var(--row-hover); }
.rr-app-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.rr-app-row:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(1); }
.rr-app-row-selected,
.rr-app-row-selected.rr-app-row-shared { background: var(--rr-selected-bg); box-shadow: inset 3px 0 0 var(--rr-selected-accent); }
.rr-app-all {
  padding: 3px 5px; margin: -3px -5px; border: 1px solid transparent;
  border-radius: 2px; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.rr-app-all:hover { color: var(--primary); }
.rr-app-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rr-app-all-selected { border-color: var(--primary); color: var(--primary); }
.rr-app-name { min-width: 0; }
.rr-app-name strong { display: block; font-size: 12.5px; color: var(--text-bright); }
.rr-app-name span, .rr-app-repos { font-size: 11px; color: var(--text-dim); }
.rr-app-repos { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-app-count { text-align: right; }
.rr-app-count strong { display: block; font-size: 14px; color: var(--text-bright); }
.rr-app-count span { font-size: 10px; color: var(--text-dim); }
.rr-app-flags { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }
.rr-app-not-in-cut { color: var(--text-dim); border-color: var(--border2); background: var(--surface2); }
.rr-app-warning {
  grid-column: 1 / -1; font-size: 11px; line-height: 1.4; color: var(--text-dim);
  padding-top: 6px; border-top: 1px solid var(--border2);
}

@media (max-width: 620px) {
  .rr-app-grid { grid-template-columns: 1fr; }
  .rr-app-row { grid-template-columns: minmax(130px, 1fr) 54px 62px; }
  .rr-app-repos { grid-column: 1; }
  .rr-app-flags { grid-column: 2 / -1; grid-row: 2; }
}

/* ── "where this came from" ─────────────────────────────────────── */
/* Two columns at most: three squeezed the repo name down to "Orion1…", and the
   name is the one thing in the row that must stay readable. */
.rr-repo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); }
/* Each repo is one grid cell that may carry a warning line under its row, so
   the row and its warning stay together when the grid reflows. */
.rr-repo-item { border-bottom: 1px solid var(--border); }
.rr-repo-item-warn { background: var(--ai-bg-high); }
.rr-repo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
}
.rr-repo-warn {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 0 20px 10px 20px; font-size: 11.5px; line-height: 1.5;
  color: var(--text); 
}
.rr-repo-warn strong { font-family: var(--font-mono); font-weight: 600; }
.rr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.rr-dot-changed    { background: var(--green); }
.rr-dot-quiet      { background: var(--border2); }
.rr-dot-unreadable { background: var(--amber); }
.rr-dot-error      { background: var(--red); }
.rr-repo-name { font-size: 12.5px; font-weight: 600; color: var(--text-bright);
                flex: 1 1 auto; min-width: 150px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-repo-name:hover { color: var(--accent); text-decoration: underline; }
/* The range is the part that gives way when space runs short, not the name. */
.rr-repo-range { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
                 flex: 0 1 auto; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.rr-repo-count { font-size: 12px; font-weight: 700; color: var(--text-bright); width: 26px; text-align: right; }

/* ── unlinked commits drill-down ────────────────────────────────── */
.rr-unlinked-repo { padding: 10px 20px; border-bottom: 1px solid var(--border); }
.rr-unlinked-head { font-size: 12.5px; font-weight: 600; color: var(--text-bright); }
.rr-commit {
  display: flex; gap: 12px; align-items: baseline;
  padding: 5px 0 5px 16px; font-size: 12px; border-bottom: 1px solid var(--border);
}
.rr-commit:last-child { border-bottom: none; }
.rr-commit-sha { font-family: var(--font-mono); font-size: 11px; color: var(--viz-7); white-space: nowrap; }
.rr-commit-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rr-commit-who { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }

.rr-empty { padding: 22px 20px; font-size: 13px; color: var(--text-dim); text-align: center; }
.rr-error {
  padding: 14px 18px; font-size: 13px; color: var(--text);
  background: var(--ai-bg-critical); border: 1px solid var(--danger);
}

/* Git-folder release script inventory. */
.rr-script-row {
  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 2fr) auto;
  gap: 12px; align-items: start; padding: 10px 20px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.rr-script-ticket { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rr-script-ticket a { color: var(--text-bright); font-weight: 600; text-decoration: none; }
.rr-script-ticket a:hover, .rr-script-file:hover { text-decoration: underline; }
.rr-script-ticket span { color: var(--text-dim); }
.rr-script-files { display: flex; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.rr-script-file { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.rr-script-row-badges { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.rr-script-phase { margin-right: 6px; }
.rr-script-pre { color: var(--viz-7); border-color: var(--viz-7); }
.rr-script-post { color: var(--viz-6); border-color: var(--viz-6); }
.rr-script-stagingonly { color: var(--viz-5); border-color: var(--viz-5); }
.rr-script-file .rr-badge-po { margin-left: 6px; }
.rr-script-verification { color: var(--green); border-color: var(--green); }
.rr-script-rollback { color: var(--amber); border-color: var(--amber); }
.rr-script-donotrun { color: var(--text-dim); border-color: var(--border2); }
.rr-script-file-donotrun { color: var(--text-dim); text-decoration: line-through; }
.rr-script-copy {
  margin-left: auto; padding: 4px 9px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text-bright); font: 600 11.5px/1.4 var(--font-ui);
  cursor: pointer; white-space: nowrap;
}
.rr-script-copy:hover { border-color: var(--primary); color: var(--primary); }
.rr-script-copy:focus-visible { outline: 3px solid var(--revert-blue); outline-offset: 2px; }
.rr-script-copy:disabled { cursor: default; opacity: .5; }
.rr-handoff-ticket, .rr-handoff-candidates a { color: var(--text-bright); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.rr-handoff-ticket:hover, .rr-handoff-candidates a:hover { text-decoration: underline; }
.rr-handoff-ok { color: var(--success); font-size: 11px; }
.rr-handoff-warning { color: var(--amber); font-size: 11px; line-height: 1.45; }
.rr-handoff-muted { color: var(--text-dim); font-size: 11px; line-height: 1.45; }
div.rr-handoff-ok, div.rr-handoff-warning, div.rr-handoff-muted { display: block; margin-top: 5px; }
.rr-handoff-candidates { margin-top: 6px; line-height: 1.6; }
.rr-script-group {
  padding: 7px 20px; border-bottom: 1px solid var(--border2); background: var(--surface2);
  color: var(--text-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.rr-script-group-warning, .rr-script-warning { background: var(--ai-bg-high); }

@media (max-width: 760px) {
  .rr-script-row { grid-template-columns: 1fr; }
}

/* Per-repo production deploy, shown when the application deploys each service
   on its own pipeline (see PROD_SOURCE.DEPLOY_PIPELINE). */
.rr-repo-deployed {
  font-size: 10px; font-weight: 600; color: var(--green);
  border: 1px solid var(--green); padding: 1px 6px; white-space: nowrap;
}
/* A production deploy with no release tag (pipeline mid-rework). Real record,
   but no version to quote — muted so it cannot be misread as a version. */
.rr-repo-deployed-untagged {
  color: var(--text-dim); border-color: var(--border2);
  font-family: var(--font-mono);
}

/* ── Executive > Bug Status (js/bug-status.js) ─────────────────────────────── */
.bs-ask { background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; }
.bs-ask-row { display: flex; gap: 8px; }
.bs-q { flex: 1; padding: 9px 12px; font-size: 14px; border: 1px solid var(--border2); border-radius: 6px; background: var(--bg); color: var(--text); }
.bs-q:focus { outline: 2px solid var(--viz-1); outline-offset: -1px; }
.bs-examples { margin-top: 8px; font-size: 12px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bs-chip { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: pointer; }
.bs-chip:hover { border-color: var(--viz-1); }
.bs-answer { margin-top: 14px; border-top: 1px solid var(--border2); padding-top: 12px; }
.bs-answer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bs-answer-q { font-weight: 700; font-size: 15px; color: var(--text-bright); flex: 1; }
.bs-answer-body, .bs-brief { font-size: 14px; line-height: 1.55; color: var(--text); }
.bs-answer-body p, .bs-brief p { margin: 0 0 8px; }
.bs-answer-body ul, .bs-brief ul { margin: 0 0 8px 18px; padding: 0; }
.bs-md-h { font-weight: 700; margin: 10px 0 4px; }
.bs-answer-meta { font-size: 12px; color: var(--text-dim); margin: 8px 0; }
.bs-answer-meta code { background: var(--surface2); padding: 0 4px; border-radius: 3px; }
.bs-answer-counts { font-size: 13px; margin: 10px 0 6px; }
.bs-brief { background: var(--surface); border-left: 3px solid var(--viz-1); padding: 10px 14px; margin: 10px 0 18px; border-radius: 0 6px 6px 0; }
.bs-brief-loading { display: flex; gap: 10px; align-items: center; color: var(--text-dim); font-size: 13px; }
.bs-window { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.bs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1000px) { .bs-cols { grid-template-columns: 1fr; } }
.bs-count { display: inline-block; min-width: 20px; padding: 0 7px; margin-left: 6px; border-radius: 10px; background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: center; }
.bs-p12 { font-size: 11px; font-weight: 700; color: var(--danger); margin-left: 6px; }
.bs-list { list-style: none; margin: 0; padding: 0; }
.bs-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.bs-list li:last-child { border-bottom: none; }
.bs-id { font-weight: 600; margin: 0 6px 0 4px; }
.bs-title { color: var(--text); }
.bs-meta { font-size: 11px; color: var(--text-meta); margin: 2px 0 0 36px; }
.bs-dim { color: var(--text-dim); font-size: 12px; }
.bs-prio { display: inline-block; min-width: 24px; text-align: center; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 4px; background: var(--surface2); color: var(--text-dim); }
.bs-prio-1 { background: var(--danger); color: #fff; }
.bs-prio-2 { background: var(--viz-2); color: #fff; }
.bs-team { border: 1px solid var(--border2); border-radius: 6px; padding: 6px 12px; margin-bottom: 8px; background: var(--surface); }
.bs-team summary { cursor: pointer; padding: 4px 0; }
.bs-table td { vertical-align: top; }
.bs-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.bs-b-work  { background: rgba(42,120,214,.14); color: var(--viz-1); }
.bs-b-new   { background: rgba(237,161,0,.18); color: #8a5d00; }
.bs-b-fixed { background: rgba(0,138,87,.14); color: var(--success); }
.bs-b-old   { background: var(--surface2); color: var(--text-dim); }
:root[data-theme="dark"] .bs-b-new { color: var(--viz-4); }
.bs-new { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--viz-2); margin-left: 4px; }
.bs-phase { font-size: 10px; color: var(--text-dim); border: 1px solid var(--border2); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.bs-yes, .bs-no { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 0 6px; border-radius: 8px; cursor: help; }
.bs-yes { background: rgba(0,138,87,.14); color: var(--success); }
.bs-no  { background: var(--surface2); color: var(--text-dim); }
.bs-yes-link { text-decoration: none; }
.bs-rel-sum { font-size: 12px; margin: -2px 0 6px; color: var(--text); }
.bs-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border2); margin: -4px 0 16px; }
.bs-tab { font-size: 14px; font-weight: 600; padding: 9px 18px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: var(--text-dim); cursor: pointer; margin-bottom: -2px; }
.bs-tab:hover { color: var(--text); background: var(--surface); }
.bs-tab.active { color: var(--text-bright); background: var(--surface); border-color: var(--border2); border-bottom: 2px solid var(--surface); box-shadow: inset 0 3px 0 var(--viz-1); }
.bs-ask-scope { font-weight: 600; color: var(--text); }
/* Answers now sit at the top of the selected tab, not inside the Ask box. */
.bs-tab-body .bs-answer { margin: 0 0 18px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; }
.bs-ps-controls { display: flex; gap: 18px; align-items: center; margin: 14px 0 4px; font-size: 12px; color: var(--text-dim); }
.bs-ps-controls label { display: inline-flex; gap: 6px; align-items: center; }
.bs-ps-controls select { font-size: 12px; padding: 3px 6px; background: var(--surface); border: 1px solid var(--border2); color: var(--text); }
.bs-ps-dev { white-space: nowrap; min-height: 18px; }
.bs-clusters li.bs-cluster { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 10px 8px; border-radius: 6px; }
.bs-clusters li.bs-cluster:hover, .bs-clusters li.bs-cluster:focus-visible { background: var(--surface2); outline: none; }
.bs-cluster-n { flex: 0 0 56px; text-align: center; font-size: 20px; font-weight: 700; color: var(--viz-2); line-height: 1.1; }
.bs-cluster-n small { display: block; font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.bs-cluster-body { flex: 1; min-width: 0; }
.bs-cluster-body .bs-meta { margin-left: 0; }
.bs-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.bs-sortable:hover { color: var(--viz-1); }
.bs-sorted { color: var(--viz-1); }
.bs-sort-hint { margin: 10px 0 4px; }
.bs-back { margin: -6px 0 12px; padding-left: 0; font-weight: 600; color: var(--viz-1); }
.bs-rel-btn { font: inherit; font-weight: 700; color: var(--viz-1); background: none; border: 1px solid transparent; border-radius: 4px; padding: 0 6px; cursor: pointer; text-decoration: underline dotted; }
.bs-rel-btn:hover { border-color: var(--viz-1); text-decoration: none; }
.bs-ps-dev + .bs-ps-dev { border-top: 1px dashed var(--border); padding-top: 2px; margin-top: 2px; }
.bs-card-click { cursor: pointer; transition: border-color .12s, transform .12s; }
.bs-card-click:hover { border-color: var(--viz-1); transform: translateY(-1px); }
.bs-card-click:focus-visible { outline: 2px solid var(--viz-1); outline-offset: 2px; }
.bs-dr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.bs-dr-stat { background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 10px; }
.bs-dr-stat b { display: block; font-size: 18px; color: var(--text-bright); }
.bs-dr-stat span { font-size: 11px; color: var(--text-dim); }
.bs-dr-line { font-size: 12px; color: var(--text); margin: 4px 0; }
.bs-dr-line .bs-dim { margin-right: 4px; }

/* ── Oldest Open Bugs, bottom of Planning > Backlog Health ───────────────── */
.ob-section { border-left-color: var(--danger, #dc2626); }
.ob-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 8px; font-size: 12px; }
.ob-filters label { display: inline-flex; gap: 6px; align-items: center; color: var(--text-dim); }
.ob-filters select {
  font-size: 12px; padding: 3px 6px; background: var(--surface);
  border: 1px solid var(--border2); color: var(--text); font-family: var(--font-ui, inherit);
}
.ob-count { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.ob-note  { font-size: 12px; color: var(--text-dim); padding: 10px 12px; }
.ob-table { width: 100%; }
.ob-table td { border-top: 1px solid var(--border); vertical-align: top; }
.ob-table th.ob-sortable { cursor: pointer; user-select: none; }
.ob-table th.ob-sortable:hover { color: var(--primary); }
.ob-table th.ob-sorted { color: var(--primary); }
.ob-title { overflow-wrap: anywhere; }
.ob-nowrap { white-space: nowrap; }
.ob-dim { color: var(--text-muted); }
.ob-aging { color: var(--warning, #ca8a04); font-weight: 600; }
.ob-old   { color: var(--danger, #dc2626); font-weight: 700; }
.ob-more  { padding: 8px 2px 0; }

/* ── Platform Service (Delivery) — order-board tiles ─────────────────────── */
.ps-board { display: flex; flex-direction: column; gap: 12px; }
.ps-header { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ps-actions { margin-left: auto; display: flex; gap: 6px; }
.ps-rules { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.ps-warn  { font-size: 11px; color: var(--danger); margin-top: 4px; }
.ps-note  { font-size: 12px; color: var(--text-dim); padding: 12px; }
.ps-dim   { color: var(--text-dim); }

.ps-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ps-cols { grid-template-columns: 1fr; } }
.ps-col { background: var(--surface2); border: 1px solid var(--border2); padding: 10px; }
.ps-col-serving { border-top: 4px solid var(--success); }
.ps-col-waiting { border-top: 4px solid var(--amber); }
.ps-col-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ps-col-title { font-size: 18px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ps-col-count {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border2); padding: 0 8px; border-radius: 10px;
}
.ps-col-overdue { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--danger); }

.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ps-tile {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--border2);
  border-left: 5px solid var(--text-muted);
  padding: 9px 11px; color: var(--text); text-decoration: none;
  min-height: 130px;
}
.ps-tile:hover { border-color: var(--primary); }
.ps-tile.ps-p1 { border-left-color: #dc2626; }
.ps-tile.ps-p2 { border-left-color: #ea580c; }
.ps-tile.ps-p3 { border-left-color: #ca8a04; }
.ps-tile.ps-p4 { border-left-color: #64748b; }
.ps-tile-top { display: flex; align-items: baseline; justify-content: space-between; }
/* The ticket number is the thing read from across the room. */
.ps-num  { font-family: var(--font-mono); font-size: 22px; font-weight: 800; line-height: 1; }
.ps-prio { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 3px; background: var(--surface2); }
.ps-p1 .ps-prio { background: #dc2626; color: #fff; }
.ps-p2 .ps-prio { background: #ea580c; color: #fff; }
.ps-meta  { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.ps-title { font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ps-desc  {
  font-size: 11px; color: var(--text-dim); line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ps-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-dim); border-top: 1px dashed var(--border2); padding-top: 5px;
}
.ps-age   { color: var(--text); font-variant-numeric: tabular-nums; }
.ps-who   { font-weight: 600; color: var(--text); }
.ps-timer {
  margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 800;
  color: var(--success); font-variant-numeric: tabular-nums;
}

/* Overdue. The flash is a background pulse plus a thick red border — the
   border stays when motion is reduced, so the state never depends on the
   animation alone. */
.ps-tile.ps-flash { border-color: var(--danger); border-width: 2px; border-left-width: 5px; }
.ps-tile.ps-flash .ps-timer { color: var(--danger); }
@keyframes ps-flash {
  0%, 100% { background: var(--surface); }
  50%      { background: rgba(213, 0, 50, .22); }
}
.ps-tile.ps-flash { animation: ps-flash 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ps-tile.ps-flash { animation: none; background: rgba(213, 0, 50, .12); }
}

/* Platform Service overview table: state x ticket age */
.ps-summary { background: var(--surface2); border: 1px solid var(--border2); padding: 10px; overflow-x: auto; }
.ps-sum-table { border-collapse: collapse; font-size: 12px; background: var(--surface); border: 1px solid var(--border2); min-width: 640px; }
.ps-sum-table th { text-align: left; padding: 6px 12px; background: var(--surface2); font-weight: 600; white-space: nowrap; }
.ps-sum-table td { padding: 5px 12px; border-top: 1px solid var(--border); }
.ps-sum-table th.ps-sum-num, .ps-sum-table td.ps-sum-num { text-align: center; font-variant-numeric: tabular-nums; }
.ps-sum-state { white-space: nowrap; padding-left: 22px !important; }
.ps-sum-group td { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; background: var(--surface2); padding-left: 12px; }
.ps-sum-sub td { font-weight: 800; border-top: 2px solid var(--border2); }
.ps-sum-done td { border-top: 2px solid var(--border2); color: var(--success); }
.ps-sum-table tfoot td { border-top: 2px solid var(--border2); font-weight: 800; }
.ps-sum-aging { color: var(--amber); font-weight: 600; }
.ps-sum-old   { color: var(--danger); font-weight: 700; }
.ps-sum-total { font-weight: 800; }
.ps-sum-overdue { color: var(--danger); font-weight: 800; }
.ps-sum-note { font-size: 10px; color: var(--text-muted); margin-top: 6px; }

/* Platform Service — By person swim lanes. Every lane on screen at once
   (equal columns, no horizontal scroll), so the blocks are compact. */
.ps-lanes-note { font-size: 11px; color: var(--text-dim); }
.ps-lanes { display: grid; gap: 8px; align-items: start; }
.ps-lane { background: var(--surface2); border: 1px solid var(--border2); border-top: 4px solid var(--primary); min-width: 0; }
.ps-lane-head { padding: 6px 8px; border-bottom: 1px solid var(--border2); position: sticky; top: 0; background: var(--surface2); z-index: 1; }
.ps-lane-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-lane-stats { font-size: 10px; color: var(--text-dim); }
.ps-lane-overdue { color: var(--danger); font-weight: 700; }
/* Blocks wrap two-across in a wide lane and fall back to one when narrow. */
.ps-lane-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; padding: 6px; }
.ps-lane-divider {
  grid-column: 1 / -1; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); border-top: 1px dashed var(--border2); padding-top: 4px; margin-top: 2px;
}
.ps-tile.ps-mini { min-height: 0; padding: 4px 6px; gap: 2px; border-left-width: 4px; }
.ps-mini-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.ps-mini-num { font-family: var(--font-mono); font-size: 12px; font-weight: 800; }
.ps-mini .ps-prio { font-size: 9px; padding: 0 4px; }
.ps-mini-title {
  font-size: 10.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ps-mini-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 9.5px; color: var(--text-dim); }
.ps-mini-col { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-mini .ps-timer { font-size: 10.5px; margin-left: 0; }
.ps-mini .ps-age   { font-variant-numeric: tabular-nums; color: var(--text); }
.ps-tile.ps-mini.ps-flash { border-width: 2px; border-left-width: 4px; }
/* Velocity line ABOVE each person's name in the By person lanes. */
.ps-lane-vel { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; margin-bottom: 1px; }
.ps-lane-vel b { color: var(--success); font-variant-numeric: tabular-nums; }
/* Priority dot in the fix-time table, reusing the tile priority colours. */
.ps-prio-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--text-muted); vertical-align: 0; }
.ps-prio-dot.ps-p1 { background: #dc2626; } .ps-prio-dot.ps-p2 { background: #ea580c; }
.ps-prio-dot.ps-p3 { background: #ca8a04; } .ps-prio-dot.ps-p4 { background: #64748b; }
/* Count beside each group label inside a swim lane (Doing 3, On Hold 1, Queued 12). */
.ps-lane-divider-n { font-family: var(--font-mono); font-weight: 700; color: var(--text); margin-left: 3px; }
.ps-lane-body > .ps-lane-divider:first-child { border-top: none; margin-top: 0; padding-top: 0; }
/* Team velocity line, below the fix-time-by-priority table. */
.ps-team-vel {
  display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-top: 8px;
  padding: 7px 12px; background: var(--surface); border: 1px solid var(--border2);
  border-left: 4px solid var(--success); font-size: 13px; cursor: help;
}
.ps-team-vel-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.ps-team-vel b { font-size: 16px; color: var(--success); font-variant-numeric: tabular-nums; }
.ps-team-vel .ps-dim { font-size: 11px; }
/* Backlog clearance forecast — deliberately big print. */
.ps-clear {
  margin-top: 10px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--border2); border-left: 6px solid var(--primary);
}
.ps-clear.ps-clear-growing { border-left-color: var(--danger); }
.ps-clear-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.ps-clear-big { font-size: 48px; font-weight: 900; line-height: 1.05; color: var(--primary); font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.ps-clear-big.ps-clear-bad { color: var(--danger); }
.ps-clear-span { font-size: 20px; font-weight: 700; color: var(--text-dim); margin-left: 8px; }
.ps-clear-sub { font-size: 14px; color: var(--text); }
.ps-clear-sub b { font-variant-numeric: tabular-nums; }
.ps-clear-best { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
/* Priority swim lanes inside Waiting and Now Serving: VERTICAL columns side by
   side (P1 | P2 | P3 …), one ticket wide, as long as each lane needs. */
.ps-planes { display: grid; gap: 8px; align-items: start; }
.ps-plane { min-width: 0; background: var(--surface); border: 1px solid var(--border2); border-top: 4px solid var(--text-muted); }
.ps-plane.ps-p1 { border-top-color: #dc2626; }
.ps-plane.ps-p2 { border-top-color: #ea580c; }
.ps-plane.ps-p3 { border-top-color: #ca8a04; }
.ps-plane.ps-p4 { border-top-color: #64748b; }
/* Pinned while a long lane scrolls, so the priority is always in view. */
.ps-plane-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid var(--border2);
  position: sticky; top: 0; z-index: 1; background: var(--surface);
}
.ps-plane-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.ps-plane-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--surface2); border: 1px solid var(--border2); padding: 0 6px; border-radius: 9px;
}
.ps-plane-overdue { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--danger); white-space: nowrap; }
/* Single file: one tile per row, full lane width. */
.ps-plane-body { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.ps-plane .ps-tile { background: var(--surface2); min-height: 0; }
/* The ticket number shrinks a touch — lanes are narrower than the old grid. */
.ps-plane .ps-num { font-size: 18px; }
@keyframes ps-flash-lane { 0%, 100% { background: var(--surface2); } 50% { background: rgba(213, 0, 50, .22); } }
.ps-plane .ps-tile.ps-flash { animation-name: ps-flash-lane; }
@media (prefers-reduced-motion: reduce) { .ps-plane .ps-tile.ps-flash { animation: none; background: rgba(213, 0, 50, .12); } }
/* Queue | By person switch — sits between the backlog forecast and the view it changes. */
.ps-viewbar { display: flex; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px solid var(--border2); }
.ps-viewbar-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.ps-viewbar .bb-seg-btn { font-size: 12px; padding: 4px 14px; }

/* ── Settings > Roster Sync ─────────────────────────────────────────────── */
.pcm-dialog.pcm-dialog--roster { width: min(1320px, 96vw); height: 90vh; }
#pcm-panel-roster { display: flex; flex-direction: column; gap: 12px; }
.rs-head { display: flex; gap: 14px; align-items: flex-start; }
.rs-title { font-size: 15px; font-weight: 800; }
.rs-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.rs-dim { font-size: 11px; color: var(--text-dim); }
.rs-note { font-size: 12px; color: var(--text-dim); padding: 10px 0; }
.rs-error { font-size: 12px; color: var(--danger); border-left: 3px solid var(--danger); background: var(--surface2); padding: 8px 10px; }
.rs-error ul { margin: 6px 0 0 18px; }
.rs-warn  { font-size: 12px; color: var(--amber); border-left: 3px solid var(--amber); background: var(--surface2); padding: 8px 10px; }
.rs-ok    { font-size: 13px; color: var(--success); border-left: 3px solid var(--success); background: var(--surface2); padding: 10px 12px; }
.rs-summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12px; background: var(--surface2); border: 1px solid var(--border2); padding: 8px 12px; }
.rs-sheetpick { margin-left: auto; font-size: 12px; }
.rs-sheetpick select { font-size: 12px; }
.rs-section { border: 1px solid var(--border2); border-left: 4px solid var(--border2); background: var(--surface); }
.rs-section-reinstate { border-left-color: var(--amber); }
.rs-section-probable  { border-left-color: var(--primary); }
.rs-section-add       { border-left-color: var(--success); }
.rs-section-remove    { border-left-color: var(--danger); }
.rs-section-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; background: var(--surface2); border-bottom: 1px solid var(--border2); }
.rs-section-title { font-size: 13px; font-weight: 800; white-space: nowrap; }
.rs-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; border: 1px solid var(--border2); background: var(--surface); padding: 0 7px; border-radius: 9px; }
.rs-section-ctl { margin-left: auto; white-space: nowrap; }
.rs-link { background: none; border: none; padding: 0 4px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--primary); }
.rs-link:hover { text-decoration: underline; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rs-table th { text-align: left; font-weight: 600; padding: 5px 8px; background: var(--surface2); white-space: nowrap; }
.rs-table td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.rs-table input[type="text"], .rs-table input[type="email"], .rs-table select {
  font-size: 12px; padding: 2px 5px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border2); max-width: 100%;
}
.rs-table input[type="text"] { width: 190px; }
.rs-email input[type="email"], .rs-email select { width: 280px; display: block; margin-bottom: 3px; }
.rs-flagged td { background: color-mix(in srgb, var(--amber) 8%, transparent); }
.rs-flag { display: inline-block; font-size: 10px; padding: 0 6px; margin: 2px 4px 0 0; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text-dim); }
.rs-flag-warn { color: var(--amber); border-color: var(--amber); }
.rs-decide label { display: block; white-space: nowrap; font-size: 12px; }
.rs-subrow > td { background: var(--surface2); padding: 4px 8px 8px 28px; }
.rs-inner td { border-top: none; }
.rs-roles { position: relative; }
.rs-roles summary { cursor: pointer; font-size: 12px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.rs-roles[open] .rs-roles-list {
  position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); padding: 6px 10px; min-width: 220px; max-height: 260px; overflow: auto;
}
.rs-roles-list label { display: block; font-size: 12px; padding: 2px 0; white-space: nowrap; }
.rs-footer {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 2px; background: var(--surface); border-top: 1px solid var(--border2);
}
.rs-footer #rs-result { flex-basis: 100%; }
.rs-footer #rs-tally { margin-left: auto; }

/* ── Investigation > CBG Check ──────────────────────────────────────────── */
/* Chart colours validated with the dataviz palette validator (all six checks
   pass): blue #2a78d6 / red #e34948 on the light surface, their own steps
   #3987e5 / #e66767 on the dark surface — a selected dark mode, not a flip.
   The brand red is NOT used for data: it is also the danger colour. */
:root {
  --cbg-accent: #2a78d6;
  --cbg-neg:    #e34948;
  --cbg-track:  #e9e8e4;   /* neutral gray: meter tracks, diverging midline */
  --cbg-muted:  #b4b2ab;   /* de-emphasis: "could not compare" */
}
:root[data-theme="dark"] {
  --cbg-accent: #3987e5;
  --cbg-neg:    #e66767;
  --cbg-track:  #383835;
  --cbg-muted:  #6e6d68;
}
.cbg-wrap { display: flex; flex-direction: column; gap: 14px; }
.cbg-head { display: flex; gap: 12px; }
.cbg-dim  { font-size: 11px; color: var(--text-dim); }
.cbg-note { font-size: 12px; color: var(--text-dim); padding: 8px 0; }
.cbg-error { font-size: 12px; color: var(--danger); border-left: 3px solid var(--danger); background: var(--surface2); padding: 8px 10px; }
.cbg-mono { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }
.cbg-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; }
.cbg-controls label { display: inline-flex; gap: 6px; align-items: center; color: var(--text-dim); }
.cbg-controls select { font-size: 12px; padding: 3px 6px; background: var(--surface); color: var(--text); border: 1px solid var(--border2); }
.cbg-runpick { margin-left: auto; }
.cbg-runpick select { max-width: 420px; }
.cbg-progress { display: flex; align-items: center; gap: 10px; }
.cbg-progress-track { flex: 0 0 280px; height: 8px; background: var(--cbg-track); border-radius: 4px; overflow: hidden; }
.cbg-progress-fill { height: 100%; background: var(--cbg-accent); transition: width .4s; }
.cbg-runmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.cbg-runmeta .btn { margin-left: auto; }
.cbg-env { font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); cursor: help; }
.cbg-env-warn { border-color: var(--amber); color: var(--amber); font-weight: 700; }

/* Stat tiles — label / value / sub; one hero value. Proportional figures. */
.cbg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cbg-tile { background: var(--surface); border: 1px solid var(--border2); padding: 10px 12px; }
.cbg-tile-label { font-size: 11px; color: var(--text-dim); }
.cbg-tile-value { font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--text); margin: 2px 0; }
.cbg-tile-hero .cbg-tile-value { font-size: 48px; }
.cbg-tile-sub { font-size: 11px; color: var(--text-dim); }

.cbg-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.cbg-card { margin: 0; background: var(--surface); border: 1px solid var(--border2); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cbg-card figcaption { font-size: 13px; font-weight: 700; color: var(--text); }

/* Horizontal bars: <=24px thick (here 14), 4px rounded data end, square at the
   baseline, value at the tip in a text token — never the bar colour. */
.cbg-hbar-row, .cbg-meter-row, .cbg-div-row {
  display: grid; grid-template-columns: minmax(150px, 34%) 1fr; align-items: center; gap: 10px;
  padding: 3px 0; font-size: 12px; cursor: default; border-radius: 3px;
}
.cbg-meter-row { grid-template-columns: minmax(150px, 34%) 1fr 110px; }
.cbg-hbar-row:hover, .cbg-meter-row:hover, .cbg-div-row:hover,
.cbg-hbar-row:focus, .cbg-meter-row:focus, .cbg-div-row:focus { background: var(--surface2); outline: none; }
.cbg-hbar-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbg-hbar-track { position: relative; display: flex; align-items: center; gap: 6px; min-height: 18px; }
.cbg-hbar { display: block; height: 14px; background: var(--cbg-accent); border-radius: 0 4px 4px 0; min-width: 0; }
.cbg-hbar-muted { background: var(--cbg-muted); }
.cbg-hbar-value { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Meters: fill on a lighter track of the same neutral scale. */
.cbg-meter-track { position: relative; height: 12px; background: var(--cbg-track); border-radius: 4px; overflow: hidden; }
.cbg-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cbg-accent); border-radius: 0 4px 4px 0; }
.cbg-meter-value { color: var(--text); font-variant-numeric: tabular-nums; }

/* Diverging bars around a neutral midline: blue = Census CBG higher, red = lower. */
.cbg-div-track { position: relative; height: 18px; }
.cbg-div-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border2); }
.cbg-div-bar { position: absolute; top: 3px; height: 12px; }
.cbg-div-pos { background: var(--cbg-accent); border-radius: 0 4px 4px 0; }
.cbg-div-neg { background: var(--cbg-neg); border-radius: 4px 0 0 4px; }
.cbg-div-value { position: absolute; top: 1px; font-size: 11px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbg-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; vertical-align: 0; margin: 0 2px 0 6px; }
.cbg-key-pos { background: var(--cbg-accent); }
.cbg-key-neg { background: var(--cbg-neg); }

/* Line chart: 2px line, >=8px markers with a 2px surface ring, hairline grid. */
.cbg-line-chart { width: 100%; max-width: 760px; height: auto; }
.cbg-grid { stroke: var(--border2); stroke-width: 1; }
.cbg-axis { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.cbg-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.cbg-line { fill: none; stroke: var(--cbg-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cbg-dot { fill: var(--cbg-accent); stroke: var(--surface); stroke-width: 2; }
.cbg-hit { fill: transparent; cursor: default; }
.cbg-pt:hover .cbg-dot, .cbg-pt:focus .cbg-dot { r: 5; }
.cbg-pt:focus { outline: none; }

/* Table */
.cbg-table-ctl { display: flex; gap: 8px; align-items: center; }
.cbg-table-wrap { overflow-x: auto; }
.cbg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cbg-table th { text-align: left; font-weight: 600; padding: 5px 8px; background: var(--surface2); white-space: nowrap; }
.cbg-table td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.cbg-flag { display: inline-block; font-family: var(--font-ui, inherit); font-size: 10px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border2); color: var(--text-dim); background: var(--surface2); }
.cbg-flag-warn { color: var(--amber); border-color: var(--amber); cursor: help; }
/* Result is a label with a marker, never colour alone. */
.cbg-result { white-space: nowrap; }
.cbg-result::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--cbg-muted); vertical-align: 0; }
.cbg-result-exact::before { background: var(--cbg-accent); }
.cbg-result-blockGroup::before, .cbg-result-tract::before,
.cbg-result-county::before, .cbg-result-state::before { background: var(--cbg-neg); }

.cbg-tip {
  position: fixed; z-index: 1000; max-width: 320px; pointer-events: none;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 6px 9px; font-size: 12px; line-height: 1.35;
}

/* -- Oversight > FlexLuxe Deploy (public/js/flexluxe-deploy.js) ------------- */
/* Reuses gm-* layout, metric-card tiles and ask-act-table; these are the extras. */
.flx-views { margin-bottom: 0; }
.flx-status { font-size: 12px; color: var(--text-dim); margin: -6px 0 10px; min-height: 16px; }
.flx-tiles { margin-bottom: 8px; }
.flx-banner { font-size: 13px; line-height: 1.5; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--border2); border-left: 4px solid var(--info); border-radius: 4px; background: var(--surface); }
.flx-banner-err { border-left-color: var(--danger); }
.flx-note { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.5; }
.flx-ba { margin-right: 14px; white-space: nowrap; color: var(--text); }
.flx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-bottom: 14px; }
.flx-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; min-width: 0; }
.flx-chart-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.flx-chart-note { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.flx-canvas { position: relative; height: 220px; margin-top: 6px; }
.flx-data { margin-top: 6px; font-size: 12px; }
.flx-data summary { cursor: pointer; color: var(--text-dim); font-size: 11px; }
.flx-data > div { max-height: 240px; overflow: auto; margin-top: 6px; }
.flx-empty { font-size: 12px; color: var(--text-dim); padding: 8px 0; }
.flx-link { font-size: 11px; font-weight: 400; margin-left: auto; }
.flx-funnel th[scope="row"] { width: 36px; text-align: left; }
.flx-fbar { height: 8px; background: var(--table-header); border-radius: 4px; overflow: hidden; margin-bottom: 3px; }
.flx-fbar > span { display: block; height: 100%; background: var(--text-dim); border-radius: 4px; }
.flx-fnum { font-family: var(--font-mono); font-size: 11px; }
.ask-act-table td.num, .ask-act-table th.num { text-align: right; font-family: var(--font-mono); }