/* PR-93 / DIP-177 — Reports page.
   Rides on dashboard.css for the HUD tokens; everything here is scoped to
   .reports-page so it can never reach the dashboard. */

/* D1 IA — tokens, skip, sticky meta, bands, collapse */
.reports-page {
  --reports-gap: var(--gap-element, 1rem);
  --reports-band-gap: calc(var(--gap-component, 1.5rem) + 0.25rem);
  --reports-cyan: var(--hud-cyan, #3de0ff);
}

/* Section jump nav lives on features.html only — not Reports.
   Sticky meta chrome removed — back link + Generated live in the hero header. */

.reports-page .reports-band {
  display: flex;
  flex-direction: column;
  gap: var(--reports-gap);
  margin-bottom: var(--reports-band-gap);
}

/* Compact top: hero → // CAPACITY / Board analytics → attention */
.reports-page .reports-band--top {
  gap: var(--gap-tight);
  margin-bottom: var(--reports-gap);
}

.reports-page .reports-band__head--under-hero {
  padding: 0.15rem var(--gap-micro) 0;
  gap: 0.05rem;
}

.reports-page .reports-band__head--under-hero .reports-band__title {
  font-size: var(--type-body, 0.95rem);
}

.reports-page .reports-band__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0 var(--gap-micro);
}

.reports-page .reports-band__head--toggle {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-element);
}

/* Matched Show analytics / Show usage pair under matrix pack */
.reports-page .reports-expand-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0.35rem 0 0.65rem;
  max-width: 16rem;
}
.reports-page .reports-expand-rail .reports-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.35rem;
  margin: 0;
  border: 1px solid rgba(61, 224, 255, 0.35);
  border-radius: var(--radius-control, 6px);
  background: rgba(5, 12, 24, 0.55);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-caption);
  letter-spacing: var(--track-wide, 0.06em);
  text-transform: uppercase;
  box-sizing: border-box;
}
.reports-page .reports-expand-rail .reports-collapse-btn[aria-expanded="true"] {
  color: var(--text-display);
  border-color: rgba(61, 224, 255, 0.55);
  box-shadow: 0 0 10px rgba(61, 224, 255, 0.12);
}

.reports-page .reports-band__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--reports-cyan);
  opacity: 0.85;
}

.reports-page .reports-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-title, 1rem);
  font-weight: 600;
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-display);
  text-transform: uppercase;
}

.reports-page .reports-band__lede {
  margin: 0.15rem 0 0;
  max-width: 72ch;
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--text-muted);
}

.reports-page .reports-collapse-btn,
.reports-page .matrix-md-btn {
  min-height: 36px;
  padding: 0 var(--gap-element);
  border: 1px solid var(--border-default);
  background: rgba(5, 12, 24, 0.55);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-caption);
  letter-spacing: var(--track-wide, 0.04em);
  text-transform: uppercase;
  cursor: pointer;
}

.reports-page .reports-collapse-btn:hover,
.reports-page .reports-collapse-btn:focus-visible,
.reports-page .matrix-md-btn:hover,
.reports-page .matrix-md-btn:focus-visible {
  color: var(--text-display);
  border-color: var(--border-strong);
  box-shadow: 0 0 12px rgba(61, 224, 255, 0.15);
}

.reports-page .matrix-md-btn.is-copied {
  color: var(--ok, #3dff9a);
  border-color: rgba(61, 255, 154, 0.45);
}

.reports-page .reports-collapse.is-collapsed,
.reports-page .reports-collapse[hidden] {
  display: none;
}

.reports-page .reports-attention {
  margin: 0;
  padding: var(--gap-tight) var(--gap-element);
  border: 1px solid rgba(232, 184, 74, 0.45);
  border-left: 3px solid var(--hud-gold, #e8b84a);
  background: rgba(232, 184, 74, 0.08);
  font-size: var(--type-caption);
  color: var(--text-primary);
  line-height: 1.4;
}

.reports-page .reports-attention.is-hidden { display: none; }

.reports-page .reports-attention--danger {
  border-color: rgba(255, 61, 90, 0.45);
  border-left-color: var(--danger, #ff3d5a);
  background: rgba(255, 61, 90, 0.08);
}

/* PR-0197 — Board analytics real-time banners (IN PROGRESS + ATTENTION:) */
.reports-page .reports-attention--live {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.reports-page .reports-attention__banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-control, 6px);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-left-width: 3px;
  background: linear-gradient(90deg, rgba(0, 80, 140, 0.28) 0%, rgba(0, 20, 40, 0.75) 45%, rgba(0, 40, 72, 0.55) 100%);
  box-shadow: 0 0 18px rgba(0, 136, 255, 0.12), inset 0 1px 0 rgba(0, 229, 255, 0.12);
  animation: reports-attention-enter 0.45s ease-out;
}

.reports-page .reports-attention__banner--progress {
  border-left-color: var(--hud-electric, #00a8ff);
}

.reports-page .reports-attention__banner--attention {
  border-color: rgba(232, 184, 74, 0.5);
  border-left-color: var(--hud-gold, #e8b84a);
  background: linear-gradient(90deg, rgba(120, 80, 10, 0.35) 0%, rgba(24, 16, 4, 0.85) 42%, rgba(40, 28, 8, 0.65) 100%);
  box-shadow: 0 0 20px rgba(232, 184, 74, 0.16), inset 0 1px 0 rgba(255, 220, 120, 0.12);
}

.reports-page .reports-attention__banner--attention.is-danger,
.reports-page .reports-attention--danger .reports-attention__banner--attention {
  border-color: rgba(255, 61, 90, 0.55);
  border-left-color: var(--danger, #ff3d5a);
  background: linear-gradient(90deg, rgba(90, 12, 24, 0.45) 0%, rgba(28, 6, 12, 0.88) 45%, rgba(40, 10, 18, 0.7) 100%);
  box-shadow: 0 0 22px rgba(255, 61, 90, 0.2), inset 0 1px 0 rgba(255, 120, 140, 0.14);
  animation: reports-attention-enter 0.45s ease-out, reports-attention-pulse 2.4s ease-in-out infinite;
}

.reports-page .reports-attention__label {
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reports-page .reports-attention__label--progress {
  color: var(--hud-cyan, #3de0ff);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.reports-page .reports-attention__label--attention {
  color: var(--hud-gold, #e8b84a);
  text-shadow: 0 0 12px rgba(232, 184, 74, 0.45);
}

.reports-page .reports-attention__banner--attention.is-danger .reports-attention__label--attention {
  color: #ff8a9a;
  text-shadow: 0 0 12px rgba(255, 61, 90, 0.45);
}

.reports-page .reports-attention__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: rgba(0, 40, 72, 0.45);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--text-display, #e8f4ff);
}

.reports-page .reports-attention__viewport {
  flex: 1 1 10rem;
  min-width: 0;
  overflow: hidden;
  /* Wider solid zone so text does not sit under the edge fade */
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  padding-inline: 0.65rem;
}

/* Single banner (1 in-progress chip or 1 ATTENTION line): no roll, no edge fade */
.reports-page .reports-attention__banner.is-static .reports-attention__viewport,
.reports-page .reports-attention--single .reports-attention__viewport {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 0.5rem 0.75rem;
}

.reports-page .reports-attention__banner.is-static .reports-attention__track {
  animation: none;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  white-space: normal;
}

.reports-page .reports-attention__banner.is-static .reports-attention__status {
  display: inline;
  white-space: normal;
  line-height: 1.35;
  padding: 0.1rem 0;
}

.reports-page .reports-attention__track {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.reports-page .reports-attention__track--ticker {
  gap: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f5e6c8;
}

.reports-page .reports-attention__status {
  color: #f5e6c8;
}

.reports-page .reports-attention__sep {
  opacity: 0.45;
  color: var(--hud-gold, #e8b84a);
  padding: 0 0.35rem;
}

.reports-page .reports-attention__banner.is-scrolling .reports-attention__track {
  animation: reports-attention-slide 28s linear infinite;
}

.reports-page .reports-attention__banner.is-scrolling:hover .reports-attention__track {
  animation-play-state: paused;
}

.reports-page .reports-attention__banner--attention.is-scrolling .reports-attention__track {
  animation-duration: 32s;
}

@keyframes reports-attention-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes reports-attention-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reports-attention-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 61, 90, 0.16), inset 0 1px 0 rgba(255, 120, 140, 0.1); }
  50% { box-shadow: 0 0 28px rgba(255, 61, 90, 0.32), inset 0 1px 0 rgba(255, 160, 170, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .reports-page .reports-attention__banner.is-scrolling .reports-attention__track {
    animation: none;
  }
  .reports-page .reports-attention__banner {
    animation: none;
  }
  .reports-page .reports-attention__banner--attention.is-danger {
    animation: none;
  }
  .reports-page .reports-attention__viewport {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }
  .reports-page .reports-attention__track--ticker {
    white-space: normal;
    width: auto;
    flex-wrap: wrap;
  }
  .reports-page .reports-attention__track--ticker .reports-attention__status:last-of-type,
  .reports-page .reports-attention__track--ticker .reports-attention__sep {
    display: none;
  }
}

.reports-page .reports-attention__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(0, 20, 40, 0.55);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
}

.reports-page .reports-attention__pr {
  color: var(--hud-cyan, #3de0ff);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* DIP replaces agent name on the blue in-progress card */
.reports-page .reports-attention__dip {
  color: var(--hud-gold, #e8b84a);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

.reports-page .reports-attention__agent {
  color: var(--text-muted, #8aa0b4);
  font-weight: 500;
  text-transform: lowercase;
}

.reports-page .reports-attention__pr {
  color: var(--hud-cyan, #3de0ff);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.reports-page .reports-attention__agent {
  color: var(--text-muted, #8aa0b4);
  font-weight: 500;
  text-transform: lowercase;
}

/* Schedule calendar cells */
.reports-page .matrix-cell--fire {
  color: var(--text-display);
}

.reports-page .matrix-cell--idle {
  color: var(--text-muted);
  opacity: 0.55;
}

.reports-page .matrix-cell--off {
  color: var(--text-muted);
  opacity: 0.7;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reports-page .report-matrix tr.is-greyed {
  opacity: 0.72;
  filter: grayscale(0.45);
}

.reports-page .report-matrix tr.is-greyed .matrix-label {
  color: var(--text-muted);
}

/* SuperGrok Heavy seat — always visible gold rail on Agent matrix */
.reports-page .report-matrix tr.is-heavy-seat:not(.is-greyed) {
  background: rgba(232, 184, 74, 0.07);
}

.reports-page .report-matrix tr.is-heavy-seat:not(.is-greyed) .matrix-label {
  color: #e8b84a;
  font-weight: 600;
}

.reports-page .report-matrix tr.is-heavy-seat th[scope="row"] {
  box-shadow: inset 3px 0 0 #e8b84a;
}

/* SuperGrok Secondary seat — purple rail */
.reports-page .report-matrix tr.is-secondary-seat:not(.is-greyed) {
  background: rgba(155, 123, 255, 0.06);
}

.reports-page .report-matrix tr.is-secondary-seat:not(.is-greyed) .matrix-label {
  color: #c4b0ff;
}

.reports-page .report-matrix tr.is-secondary-seat th[scope="row"] {
  box-shadow: inset 3px 0 0 #9b7bff;
}

/* Seat row weekly reset + low-usage countdown (Agent matrix) */
.reports-page .matrix-seat__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-top: 0.22rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: normal;
  max-width: 11.5rem;
}

.reports-page .matrix-seat__pct {
  color: var(--text-secondary);
}

.reports-page .matrix-seat__reset {
  color: var(--text-muted);
}

.reports-page .matrix-seat__timer,
.reports-page .matrix-seat__meta .plan-pie__timer {
  color: #e8b84a;
  font-weight: 600;
}

.reports-page .matrix-seat__meta.is-usage-low .matrix-seat__pct,
.reports-page .report-matrix tr.is-usage-low .matrix-seat__pct {
  color: #ff8a9a;
}

.reports-page .matrix-seat__meta.is-usage-low .matrix-seat__timer,
.reports-page .matrix-seat__meta.is-usage-low .plan-pie__timer {
  color: #ff3d5a;
}

.reports-page .report-matrix tr.is-usage-low:not(.is-greyed) {
  background: rgba(255, 61, 90, 0.05);
}

.reports-page .matrix-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(90, 101, 112, 0.55);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a96a3;
  vertical-align: middle;
}

.reports-page .matrix-badge--limit {
  border-color: rgba(255, 61, 90, 0.45);
  color: #ff8a9a;
}

.reports-page .matrix-badge--ready {
  border-color: rgba(61, 255, 154, 0.4);
  color: var(--ok, #3dff9a);
}

.reports-page .matrix-scroll {
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 28px), transparent 100%);
}

.reports-page .matrix-scroll:not(.is-scrollable) {
  mask-image: none;
  -webkit-mask-image: none;
}

.reports-page .stat-tile__value {
  font-variant-numeric: tabular-nums;
}

.reports-page .stat-tile {
  min-height: 4.5rem;
}

.reports-page .reports-card__title {
  font-size: var(--type-title, 1rem);
}

.reports-page .reports-card__hint {
  line-height: 1.4;
  max-width: 72ch;
}

.reports-page .reports-card__hint code {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border-subtle);
  background: rgba(5, 12, 24, 0.45);
}

.reports-page .reports-generated {
  font-size: 0.72rem;
  color: rgba(61, 224, 255, 0.72);
}

.reports-page .reports-generated.is-live-pulse {
  animation: reports-live-pulse 0.9s ease-out;
}

@keyframes reports-live-pulse {
  0% { color: var(--reports-cyan); text-shadow: 0 0 10px rgba(61, 224, 255, 0.55); }
  100% { color: rgba(61, 224, 255, 0.72); text-shadow: none; }
}

.reports-page .reports-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.reports-page .reports-back:focus-visible {
  text-decoration: underline;
  outline: 1px solid var(--reports-cyan);
  outline-offset: 2px;
}

.reports-page .matrix-mode__btn,
.reports-page .matrix-step__btn {
  min-height: 44px;
}

.reports-page .matrix-mode__btn.is-active {
  box-shadow: inset 0 0 14px rgba(61, 224, 255, 0.14), 0 0 10px rgba(61, 224, 255, 0.12);
}

.reports-page .matrix-step__btn:focus-visible,
.reports-page .matrix-mode__btn:focus-visible {
  outline: 1px solid var(--reports-cyan);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .reports-page .plan-pie__heat-cell.is-on,
  .reports-page .reports-generated.is-live-pulse,
  .reports-page .matrix-cell__seg--overdue-high,
  .reports-page .matrix-cell__seg--overdue-medium,
  .reports-page .matrix-cell__seg--overdue-low,
  .reports-page .matrix-legend__item--flash i.is-flash-high {
    animation: none !important;
  }
}

@media (max-width: 640px) {
  .reports-page .pie-row--hero {
    flex-direction: column;
  }

  .reports-page .pie-row--hero .plan-pie {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .reports-page .reports-card {
    padding: var(--gap-tight) var(--gap-element);
  }

  .reports-page .glass.dashboard-card,
  .reports-page .glass.header-card {
    backdrop-filter: blur(4px);
  }

  .reports-page .matrix-scroll {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* DIP-183 / PR-99 — hero: REPORTS + back + Generated (compact).
   Beat dashboard .header-card row flex + large margins. */
.reports-page .glass.header-card.reports-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-tight);
  margin-top: 0 !important;
  margin-bottom: 0;
  padding: var(--gap-tight) var(--gap-element);
  overflow: visible;
}

.reports-page .reports-hero {
  width: 100%;
  box-sizing: border-box;
}

.reports-page .reports-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tight) var(--gap-element);
  width: 100%;
}

.reports-page .reports-hero .hc-title {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

/* R-001 — tighten kicker tracking to balance Orbitron REPORTS h1 (was 0.1em via .header-card) */
.reports-page .reports-hero .hc-title .header-kicker {
  margin-bottom: 0.1rem;
  letter-spacing: 0.06em;
}

/* R-002 — fluid H1 scale 360–1440px (rem+vw preferred; old pure 3.2vw only flexed ~750–1000) */
.reports-page .reports-hero .hc-title h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  white-space: nowrap;
}

.reports-page .reports-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-tight);
}

.reports-page .reports-header__plans {
  display: flex;
  flex-direction: column;
  gap: var(--gap-micro);
  width: 100%;
  padding-top: var(--gap-micro);
  border-top: 1px solid var(--border-subtle);
}

.reports-page .reports-plans-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-micro) var(--gap-element);
}

.reports-page .reports-plans-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.reports-page .reports-plans-hint {
  margin: 0;
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.reports-page .pie-row--hero {
  margin-top: 0;
  gap: var(--gap-tight);
  /* PR-0193: four plan pies — Heavy / Secondary / Codex / Claude backup */
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.reports-page .pie-row--hero .plan-pie {
  min-width: min(100%, 140px);
  flex: 1 1 140px;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  box-sizing: border-box;
  padding: var(--gap-micro) var(--gap-tight);
  background: transparent;
  border-color: var(--border-default);
  /* Shared outer card height so all four lanes bottom-align */
  min-height: 148px;
  height: 100%;
}

.reports-page .pie-row--hero .plan-pie[data-provider*="Codex"],
.reports-page .pie-row--hero .plan-pie[data-provider*="codex"] {
  border-color: rgba(16, 163, 127, 0.45);
}

.reports-page .pie-row--hero .plan-pie[data-state="heavy"] {
  border-color: rgba(232, 184, 74, 0.45);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.12);
}

.reports-page .pie-row--hero .plan-pie[data-state="secondary"] {
  border-color: rgba(155, 123, 255, 0.5);
  box-shadow: 0 0 14px rgba(155, 123, 255, 0.1);
}

.reports-page .pie-row--hero .plan-pie[data-state="limit-hit"] {
  border-color: rgba(255, 61, 90, 0.5);
}

.reports-page .pie-row--hero .plan-pie[data-state="activation-in-progress"] {
  border-color: rgba(61, 224, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(61, 224, 255, 0.12);
}

/* Claude Pro greyed backup — ready for activation */
.reports-page .pie-row--hero .plan-pie[data-state="backup"] {
  border-color: rgba(90, 101, 112, 0.55);
  opacity: 0.72;
  filter: grayscale(0.55);
  box-shadow: none;
}

.reports-page .pie-row--hero .plan-pie[data-state="backup"] .plan-pie__name,
.reports-page .pie-row--hero .plan-pie[data-state="backup"] .plan-pie__state,
.reports-page .pie-row--hero .plan-pie[data-state="backup"] .plan-pie__remain {
  color: var(--text-muted);
}

.reports-page .pie-row--hero .plan-pie[data-state="backup"] .plan-pie__state {
  color: #8a96a3;
  letter-spacing: 0.02em;
}

.reports-page .pie-row--hero .plan-pie__timer {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #10a37f;
  margin-top: 2px;
}

/* PR-0196 / DIP-0206 — Codex reset heatmap countdown */
.reports-page .plan-pie__heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
  min-width: 0;
}

.reports-page .plan-pie__heat-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 9.5rem;
}

.reports-page .plan-pie__heat-cell {
  height: 8px;
  border-radius: 2px;
  background: rgba(16, 163, 127, 0.12);
  border: 1px solid rgba(16, 163, 127, 0.22);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.reports-page .plan-pie__heat-cell.is-on {
  background: #10a37f;
  border-color: rgba(16, 163, 127, 0.85);
  box-shadow: 0 0 6px rgba(16, 163, 127, 0.35);
}

/* Heat intensifies as reset approaches (data-heat 0 far → 4 urgent) */
.reports-page .plan-pie__heatmap[data-heat="1"] .plan-pie__heat-cell.is-on {
  background: #2dd4a0;
  box-shadow: 0 0 6px rgba(45, 212, 160, 0.4);
}
.reports-page .plan-pie__heatmap[data-heat="2"] .plan-pie__heat-cell.is-on {
  background: #e8b84a;
  border-color: rgba(232, 184, 74, 0.75);
  box-shadow: 0 0 7px rgba(232, 184, 74, 0.4);
}
.reports-page .plan-pie__heatmap[data-heat="3"] .plan-pie__heat-cell.is-on {
  background: #f97316;
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
}
.reports-page .plan-pie__heatmap[data-heat="4"] .plan-pie__heat-cell.is-on {
  background: #ff3d5a;
  border-color: rgba(255, 61, 90, 0.85);
  box-shadow: 0 0 10px rgba(255, 61, 90, 0.5);
  animation: plan-heat-pulse 1.1s ease-in-out infinite;
}

@keyframes plan-heat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

.reports-page .plan-pie__heat-clock {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #10a37f;
  line-height: 1.2;
}

/* Non-Codex pies that hit limit OR usage-low (≥90% used) use heatmap; brand clock to danger */
.reports-page .plan-pie[data-state="limit-hit"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="0"] .plan-pie__heat-clock,
.reports-page .plan-pie[data-state="limit-hit"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="1"] .plan-pie__heat-clock,
.reports-page .plan-pie[data-state="usage-low"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="0"] .plan-pie__heat-clock,
.reports-page .plan-pie[data-state="usage-low"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="1"] .plan-pie__heat-clock {
  color: #ff3d5a;
}

.reports-page .plan-pie[data-state="limit-hit"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="0"] .plan-pie__heat-cell.is-on,
.reports-page .plan-pie[data-state="limit-hit"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="1"] .plan-pie__heat-cell.is-on,
.reports-page .plan-pie[data-state="usage-low"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="0"] .plan-pie__heat-cell.is-on,
.reports-page .plan-pie[data-state="usage-low"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heatmap[data-heat="1"] .plan-pie__heat-cell.is-on {
  background: #ff3d5a;
  border-color: rgba(255, 61, 90, 0.85);
  box-shadow: 0 0 8px rgba(255, 61, 90, 0.4);
}

.reports-page .plan-pie[data-state="limit-hit"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heat-cell,
.reports-page .plan-pie[data-state="usage-low"]:not([data-provider*="Codex"]):not([data-provider*="codex"]) .plan-pie__heat-cell {
  background: rgba(255, 61, 90, 0.1);
  border-color: rgba(255, 61, 90, 0.22);
}

.reports-page .plan-pie__heatmap[data-heat="2"] .plan-pie__heat-clock { color: #e8b84a; }
.reports-page .plan-pie__heatmap[data-heat="3"] .plan-pie__heat-clock { color: #f97316; }
.reports-page .plan-pie__heatmap[data-heat="4"] .plan-pie__heat-clock { color: #ff3d5a; }

.reports-page .plan-pie__heat-caption {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #7a8899);
  line-height: 1.2;
}

.reports-page .pie-row--hero .plan-pie__heatmap {
  margin-top: auto;
}

.reports-page .pie-row--hero .plan-pie__heatmap + .plan-pie__reset {
  margin-top: 2px;
  min-height: 1.1em;
}

.reports-page .pie-row--hero .plan-pie__svg {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  align-self: center;
}

/* Meta column = “bottom cell”: same height on every plan, reset/timer pinned low */
.reports-page .pie-row--hero .plan-pie__meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 9.25rem;
  height: 100%;
  justify-content: flex-start;
  gap: 2px;
}

.reports-page .pie-row--hero .plan-pie__name {
  font-size: var(--type-caption);
}

.reports-page .pie-row--hero .plan-pie__window,
.reports-page .pie-row--hero .plan-pie__state,
.reports-page .pie-row--hero .plan-pie__subline,
.reports-page .pie-row--hero .plan-pie__remain,
.reports-page .pie-row--hero .plan-pie__reset,
.reports-page .pie-row--hero .plan-pie__timer,
.reports-page .pie-row--hero .plan-pie__heat-caption,
.reports-page .pie-row--hero .plan-pie__note {
  font-size: 0.7rem;
  line-height: 1.25;
}

/* Reserve bottom rows so shorter lanes (Claude backup) match Heavy/Secondary/Codex */
.reports-page .pie-row--hero .plan-pie__remain {
  margin-top: 2px;
}

.reports-page .pie-row--hero .plan-pie__timer,
.reports-page .pie-row--hero .plan-pie__reset {
  margin-top: auto;
  min-height: 1.1em;
}

.reports-page .pie-row--hero .plan-pie__timer + .plan-pie__reset {
  margin-top: 0;
  min-height: 1.1em;
}

.reports-page .pie-row--hero .plan-pie__note {
  display: none;
}

.reports-page .pie-row--hero .plan-pie__state {
  font-family: var(--font-mono);
  color: var(--hud-cyan);
  min-height: 1.1em;
}

.reports-page .pie-row--hero .plan-pie__subline {
  min-height: 1.1em;
}

.reports-page .pie-row--hero .chart-note {
  width: 100%;
  flex-basis: 100%;
  margin-top: var(--gap-micro);
  font-size: 0.7rem;
}

.reports-page .reports-generated {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.reports-page .reports-back {
  font-family: var(--font-display);
  font-size: var(--type-caption);
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--hud-cyan);
  text-decoration: none;
  padding: var(--gap-micro) var(--gap-tight);
  border: 1px solid var(--border-default);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.reports-page .reports-back:hover,
.reports-page .reports-back:focus-visible {
  border-color: var(--border-strong);
  color: var(--text-display);
  box-shadow: 0 0 12px var(--hud-glow-soft);
}

.reports-page .reports-error {
  margin: var(--gap-element) 0;
  padding: var(--gap-tight) var(--gap-element);
  border: 1px solid var(--danger);
  background: rgba(255, 61, 90, 0.1);
  color: var(--text-primary);
  font-size: var(--type-caption);
}

.reports-page .reports-error.is-hidden { display: none; }

.reports-page .reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap-element);
  margin-top: var(--gap-element);
}

.reports-page .reports-card {
  padding: var(--gap-element) var(--gap-component);
}

.reports-page .reports-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-display);
  text-transform: uppercase;
}

.reports-page .reports-card__hint {
  margin: var(--gap-micro) 0 0;
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.reports-page .reports-card__hint code {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.reports-page .reports-card__subhead {
  margin: var(--gap-component) 0 0;
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.reports-page .reports-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-element);
}

.reports-page .chart { margin-top: var(--gap-element); }

.reports-page .chart--compact {
  margin-top: var(--gap-tight);
}

.reports-page .chart-empty {
  margin: 0;
  padding: var(--gap-tight) 0;
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.reports-page .chart-note {
  margin: var(--gap-tight) 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-secondary);
}

/* PR-0206 — Claude free-tier out of messages (footer pie) */
.reports-page .plan-pie[data-state="free-limit"] .plan-pie__state--free-limit,
.reports-page .plan-pie__state--free-limit {
  color: #e8b84a;
  border-color: rgba(196, 122, 58, 0.45);
}
.reports-page .plan-pie[data-state="free-limit"] .plan-pie__remain {
  color: #ffb070;
  font-weight: 600;
}
.reports-page .plan-pie[data-state="free-limit"] .plan-pie__heatmap {
  margin-top: 0.2rem;
}

/* PR-0206 — Fable credits callout (usage.json / claude-fable-5) */
.reports-page .reports-fable-callout {
  margin: 0.55rem 0 0.75rem;
}

.reports-page .reports-fable-callout__inner {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(232, 184, 74, 0.35);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(232, 184, 74, 0.12), rgba(5, 20, 40, 0.55));
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.12);
}

.reports-page .reports-fable-callout__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(232, 184, 74, 0.9);
  margin-bottom: 0.25rem;
}

.reports-page .reports-fable-callout__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}

.reports-page .reports-fable-callout__model {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-display, #e8f6ff);
}

.reports-page .reports-fable-callout__cost {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hud-gold, #e8b84a);
  text-shadow: 0 0 12px rgba(232, 184, 74, 0.35);
}

.reports-page .reports-fable-callout__meta,
.reports-page .reports-fable-callout__note,
.reports-page .reports-fable-callout__empty {
  margin: 0.28rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.reports-page .reports-fable-callout__note code,
.reports-page .reports-fable-callout__empty code {
  color: var(--hud-cyan, #3de0ff);
}

/* Stat tiles */

.reports-page .stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--gap-tight);
  margin-top: var(--gap-element);
}

.reports-page .stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--gap-micro);
  padding: var(--gap-tight) var(--gap-element);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--hud-cyan);
  background: var(--surface-elevated);
}

.reports-page .stat-tile--ok { border-left-color: var(--ok); }
.reports-page .stat-tile--warn { border-left-color: var(--hud-gold); }
.reports-page .stat-tile--danger { border-left-color: var(--danger); }

/* DIP-290 #6: threshold callout under the stat tiles when overdue/smoke-queue
   share crosses ALERT_PCT in reports.js renderTiles(). */
.reports-page .stat-tiles__alert {
  margin-top: var(--gap-tight);
  padding: var(--gap-micro) var(--gap-tight);
  border-left: 3px solid var(--danger);
  background: rgba(255, 61, 90, 0.08);
  color: var(--text-primary);
}

/* PR-95: a model id is far longer than a number — let it wrap instead of
   overflowing the tile. */
.reports-page .stat-tile--text .stat-tile__value {
  font-size: var(--type-body);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reports-page .stat-tile__value {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-display);
}

.reports-page .stat-tile__label {
  font-size: var(--type-caption);
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Bar charts */

.reports-page .bars {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

.reports-page .bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 30%) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--gap-tight);
}

/* DIP-290 #9: this used to ellipsis-truncate with only a hover `title` as
   fallback (agent/verifier names like "orchestrator-overseer" got cut to
   "orchestrator-..."), which isn't discoverable on touch/mobile. Wrap to two
   lines instead so the full name is always visible. */
.reports-page .bar-label {
  font-size: var(--type-caption);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reports-page .bar-track {
  display: flex;
  height: 14px;
  min-width: 2px;
  background: var(--surface-track);
  border: 1px solid var(--border-subtle);
}

.reports-page .bar-fill,
.reports-page .bar-seg {
  display: block;
  height: 100%;
  min-width: 2px;
}

.reports-page .bar-value {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.reports-page .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-element);
  margin-top: var(--gap-tight);
}

.reports-page .legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  font-size: var(--type-caption);
  color: var(--text-muted);
}

.reports-page .legend-item i {
  width: 10px;
  height: 10px;
  display: inline-block;
}

/* Weekly plan limit pies (DIP-182 / PR-98) */

.reports-page .reports-card--wide {
  grid-column: 1 / -1;
}

.reports-page .pie-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-component, 1.5rem);
  align-items: flex-start;
  justify-content: flex-start;
}

.reports-page .plan-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-element);
  min-width: min(100%, 280px);
  flex: 1 1 280px;
  padding: var(--gap-tight) var(--gap-element);
  border: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
}

.reports-page .plan-pie__svg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.reports-page .plan-pie__center {
  fill: var(--text-display);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.reports-page .plan-pie__center-sub {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reports-page .plan-pie__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reports-page .plan-pie__name {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 600;
  letter-spacing: var(--track-wide, 0.04em);
  color: var(--text-display);
  text-transform: uppercase;
}

.reports-page .plan-pie__window {
  font-size: var(--type-caption);
  color: var(--text-secondary);
}

.reports-page .plan-pie__subline {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--hud-gold);
  letter-spacing: 0.02em;
}

.reports-page .plan-pie[data-state="heavy"] .plan-pie__name {
  color: var(--hud-gold);
}

.reports-page .plan-pie[data-state="limit-hit"] .plan-pie__state {
  color: var(--danger);
  font-weight: 600;
}

.reports-page .plan-pie[data-state="limit-hit"] .plan-pie__remain {
  color: var(--danger);
}

.reports-page .plan-pie__remain {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--ok);
}

.reports-page .plan-pie__reset,
.reports-page .plan-pie__note {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
}

/* Plan usage meters */

.reports-page .usage-meter + .usage-meter {
  margin-top: var(--gap-element);
}

.reports-page .usage-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-tight);
  margin-bottom: var(--gap-micro);
}

.reports-page .usage-meter__name {
  font-size: var(--type-caption);
  color: var(--text-secondary);
}

.reports-page .usage-meter__pct {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--text-display);
}

.reports-page .usage-meter .bar-track {
  width: 100%;
}

.reports-page .usage-meter__foot {
  margin: var(--gap-micro) 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
}

/* Column chart */

.reports-page .col-chart {
  width: 100%;
  height: 120px;
  display: block;
}

.reports-page .col-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--gap-micro);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
}

/* Matrix reports */

.reports-page .matrix-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-tight);
  min-width: min(100%, 420px);
}

.reports-page .matrix-mode,
.reports-page .matrix-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-default);
  background: rgba(5, 12, 24, 0.55);
}

.reports-page .matrix-mode__btn,
.reports-page .matrix-step__btn {
  min-height: 32px;
  padding: 0 var(--gap-tight);
  border: 0;
  border-right: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-caption);
  letter-spacing: var(--track-wide, 0.04em);
  text-transform: uppercase;
  cursor: pointer;
}

.reports-page .matrix-mode__btn:last-child,
.reports-page .matrix-step__btn:last-child {
  border-right: 0;
  border-left: 1px solid var(--border-subtle);
}

.reports-page .matrix-mode__btn.is-active,
.reports-page .matrix-step__btn:hover,
.reports-page .matrix-step__btn:focus-visible,
.reports-page .matrix-mode__btn:hover,
.reports-page .matrix-mode__btn:focus-visible {
  color: var(--text-display);
  background: rgba(61, 224, 255, 0.12);
  box-shadow: inset 0 0 12px rgba(61, 224, 255, 0.1);
}

.reports-page .matrix-step__btn:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.45;
  background: transparent;
  box-shadow: none;
}

.reports-page .matrix-range {
  min-width: 178px;
  padding: 0 var(--gap-tight);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.reports-page .matrix-scroll {
  overflow: auto;
  border: 1px solid var(--border-subtle);
  background: rgba(5, 12, 24, 0.42);
  /* sticky thead/tfoot/total need a scrollport */
  max-height: inherit;
  position: relative;
}

.reports-page .report-matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: separate; /* required for sticky corners */
  border-spacing: 0;
  table-layout: fixed;
}

.reports-page .report-matrix--month {
  min-width: 1540px;
}

.reports-page .report-matrix th,
.reports-page .report-matrix td {
  /* Compact day cells; digits are large, bars short */
  min-height: 36px;
  padding: 0.2rem var(--gap-micro);
  border: 1px solid var(--border-subtle);
  text-align: center;
  vertical-align: middle;
}

.reports-page .report-matrix thead th,
.reports-page .report-matrix tfoot th,
.reports-page .report-matrix tfoot td {
  font-family: var(--font-display);
  font-size: var(--type-caption);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Sticky chrome: day headers, grand total footer, Total column always visible while scrolling */
.reports-page .report-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(6, 16, 32, 0.97);
  box-shadow: 0 1px 0 rgba(61, 224, 255, 0.2);
}

.reports-page .report-matrix tfoot th,
.reports-page .report-matrix tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: rgba(4, 14, 28, 0.98);
  box-shadow: 0 -1px 0 rgba(61, 224, 255, 0.28), 0 -6px 14px rgba(0, 0, 0, 0.35);
}

/* Right: Total done/due column pins while scrolling days */
.reports-page .report-matrix th.matrix-total-head,
.reports-page .report-matrix td.matrix-total,
.reports-page .report-matrix tbody td.matrix-total,
.reports-page .report-matrix tfoot td.matrix-total,
.reports-page .report-matrix tfoot td:last-child {
  position: sticky;
  right: 0;
  z-index: 5;
  min-width: 5.5rem;
  background: rgba(6, 18, 34, 0.97);
  box-shadow: -1px 0 0 rgba(61, 224, 255, 0.22), -8px 0 16px rgba(0, 0, 0, 0.28);
}

.reports-page .report-matrix thead th.matrix-total-head {
  z-index: 8;
  background: rgba(6, 16, 32, 0.99);
}

.reports-page .report-matrix tfoot td.matrix-total,
.reports-page .report-matrix tfoot td:last-child {
  z-index: 8;
  background: rgba(4, 18, 36, 0.99);
}

.reports-page .report-matrix tbody th {
  width: 168px;
  min-width: 148px;
  text-align: left;
  vertical-align: top;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.reports-page .report-matrix--seats tbody th {
  width: 190px;
  min-width: 170px;
}

.reports-page .report-matrix--subs-skills tbody th {
  width: 200px;
  min-width: 180px;
}

.reports-page .matrix-label {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--type-caption);
  color: var(--text-display);
  text-transform: uppercase;
}

.reports-page .matrix-label i {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex: 0 0 auto;
}

/* One row per sub: skills listed under plan name only (no skill cell rows) */
.reports-page .report-matrix tr.matrix-plan-row th[scope="row"] {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  vertical-align: middle;
}

.reports-page .matrix-sub-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}

.reports-page .matrix-label--plan {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.reports-page .matrix-skill-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.reports-page .matrix-skill-list li {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-secondary);
  line-height: 1.25;
  position: relative;
}

.reports-page .matrix-skill-list li::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 0.45em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.reports-page .report-matrix tr.matrix-sub-group--multi th[scope="row"] {
  box-shadow: inset 3px 0 0 rgba(61, 224, 255, 0.35);
}

.reports-page .report-matrix tr.matrix-sub-group--operator .matrix-skill-list {
  display: none;
}

/* Project Schedule Matrix: Project (cyber) | Sub · Skills | day bars aligned to skills */
.reports-page .report-matrix--project-cyber {
  border-collapse: separate;
  border-spacing: 0;
}

.reports-page .report-matrix th.matrix-col-project {
  width: 7.5rem;
  min-width: 6.5rem;
}

.reports-page .report-matrix th.matrix-col-sub {
  min-width: 9.5rem;
}

/* Big left project cell — cyber HUD block spanning all sub/skill rows */
.reports-page .report-matrix th.matrix-project-cyber {
  vertical-align: top;
  padding: 0.55rem 0.45rem 0.55rem 0.4rem;
  width: 7.5rem;
  min-width: 6.5rem;
  max-width: 8.5rem;
  background:
    linear-gradient(165deg, rgba(0, 40, 72, 0.55) 0%, rgba(4, 14, 28, 0.92) 55%, rgba(2, 10, 20, 0.96) 100%);
  border-right: 1px solid rgba(61, 224, 255, 0.28);
  border-bottom: 1px solid rgba(61, 224, 255, 0.12);
  box-shadow:
    inset 3px 0 0 var(--hud-cyan, #3de0ff),
    inset 0 1px 0 rgba(61, 224, 255, 0.18),
    inset 0 0 24px rgba(0, 120, 200, 0.12);
  position: sticky;
  left: 0;
  z-index: 4;
}

/* Sub · Skills sticky so horizontal day scroll keeps labels + totals */
.reports-page .report-matrix--project-cyber th.matrix-sub-cell {
  position: sticky;
  left: 7.5rem;
  z-index: 3;
  background: rgba(5, 14, 26, 0.96);
  box-shadow: 1px 0 0 rgba(61, 224, 255, 0.12);
}

.reports-page .report-matrix--project-cyber thead th.matrix-col-project {
  position: sticky;
  left: 0;
  z-index: 9;
  background: rgba(6, 16, 32, 0.99);
}

.reports-page .report-matrix--project-cyber thead th.matrix-col-sub {
  position: sticky;
  left: 7.5rem;
  z-index: 9;
  background: rgba(6, 16, 32, 0.99);
}

.reports-page .report-matrix--project-cyber tfoot th[colspan="2"] {
  position: sticky;
  left: 0;
  z-index: 7;
  background: rgba(4, 14, 28, 0.99);
}

.reports-page .matrix-project-cyber__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 100%;
  padding: 0.15rem 0.1rem;
}

.reports-page .matrix-project-cyber__bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  box-shadow: 0 0 10px currentColor;
  opacity: 0.95;
}

.reports-page .matrix-project-cyber__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-display, #e8f6ff);
  line-height: 1.15;
  text-shadow: 0 0 12px rgba(61, 224, 255, 0.35);
  writing-mode: horizontal-tb;
}

.reports-page .matrix-project-cyber__meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(61, 224, 255, 0.75);
  margin-top: auto;
}

.reports-page .report-matrix th.matrix-sub-cell {
  vertical-align: middle;
  padding: 0.28rem 0.45rem 0.28rem 0.55rem;
  text-align: left;
  font-weight: 500;
}

.reports-page .report-matrix tr.matrix-plan-under-project th.matrix-sub-cell,
.reports-page .report-matrix tr.matrix-skill-under-project th.matrix-sub-cell {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.reports-page .matrix-sub-block--nested {
  padding-left: 0.35rem;
  border-left: 2px solid rgba(61, 224, 255, 0.28);
}

.reports-page .matrix-sub-block--skill-only {
  border-left-color: rgba(61, 224, 255, 0.12);
  padding-top: 0;
}

.reports-page .matrix-label--sub {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text-secondary);
}

/* Sub row: skill bullets in left cell; day cells use matching-height bar lanes */
.reports-page .report-matrix--project-cyber {
  --matrix-skill-lane-h: 1.35rem; /* keep in sync with .matrix-skill-list li line box */
}

.reports-page .report-matrix--project-cyber .matrix-skill-list {
  margin-top: 0.2rem;
  padding-left: 1.05rem;
  gap: 0;
}

.reports-page .report-matrix--project-cyber .matrix-skill-list li {
  font-size: 0.68rem;
  line-height: var(--matrix-skill-lane-h);
  height: var(--matrix-skill-lane-h);
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.reports-page .report-matrix--project-cyber .matrix-label--sub {
  font-size: 0.72rem;
  line-height: 1.25;
  margin-bottom: 0.05rem;
}

.reports-page .report-matrix tr.matrix-sub-with-skills th.matrix-sub-cell {
  vertical-align: top;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.reports-page .report-matrix tr.matrix-sub-with-skills td.matrix-skill-lanes-td {
  vertical-align: top;
  padding: 0.35rem 0.2rem 0.35rem;
  background: rgba(0, 20, 40, 0.15);
}

/* Day cell: one horizontal bar per skill — same order as bullets */
.reports-page .matrix-skill-lanes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* first lane aligns under plan name offset: plan label ~1.25rem + gap */
  padding-top: 1.35rem; /* ≈ sub label block so lanes line up with first skill bullet */
  gap: 0;
  min-height: 0;
}

.reports-page .matrix-skill-lane {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--matrix-skill-lane-h);
  min-height: var(--matrix-skill-lane-h);
  box-sizing: border-box;
}

.reports-page .matrix-skill-lane__track {
  flex: 1 1 auto;
  min-width: 0;
  height: 7px;
  border-radius: 2px;
  background: rgba(0, 40, 70, 0.45);
  border: 1px solid rgba(61, 224, 255, 0.12);
  overflow: hidden;
  position: relative;
}

.reports-page .matrix-skill-lane__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(77, 163, 255, 0.35);
}

.reports-page .matrix-skill-lane--empty .matrix-skill-lane__track {
  opacity: 0.35;
}

.reports-page .matrix-skill-lane__val {
  flex: 0 0 auto;
  min-width: 1.6rem;
  text-align: right;
}

.reports-page .matrix-skill-lane__val .matrix-cell__value {
  font-size: 0.72rem; /* slightly under 14px so multi-lane fits */
  font-weight: 500;
}

.reports-page .matrix-skill-lane.is-overdue .matrix-skill-lane__fill {
  animation: matrix-overdue-high 1.1s ease-in-out infinite;
}

/* No "31d · 7u" project meta */
.reports-page .matrix-project-cyber__meta {
  display: none !important;
}

.reports-page .report-matrix tr.matrix-plan-under-project .matrix-cell {
  min-height: 1.55rem;
  opacity: 0.98;
  vertical-align: middle;
}

.reports-page .report-matrix tr.matrix-plan-under-project .matrix-total--sub,
.reports-page .report-matrix tr.matrix-skill-under-project .matrix-total {
  opacity: 0.95;
}

.reports-page .report-matrix tr.matrix-project-row th[scope="row"] {
  padding-top: 0.45rem;
}

/* Subtle row band per skill for scanability */
.reports-page .report-matrix tr.matrix-skill-under-project:nth-child(even) td {
  background: rgba(0, 40, 70, 0.08);
}

.reports-page .report-matrix tr.matrix-skill-under-project:hover td,
.reports-page .report-matrix tr.matrix-skill-under-project:hover th.matrix-sub-cell {
  background: rgba(0, 80, 120, 0.1);
}

.reports-page .matrix-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Compact row height — big digits sit on short bars */
  min-height: 34px;
  padding: 0.12rem 0.15rem;
  overflow: hidden;
}

.reports-page .matrix-cell__bar {
  position: absolute;
  right: 5px;
  bottom: 3px;
  left: 5px;
  z-index: 0;
  height: 0;
  min-height: 0;
  border-radius: 2px 2px 0 0;
  opacity: 0.48;
  box-shadow: 0 0 10px rgba(61, 224, 255, 0.14);
  pointer-events: none;
}

.reports-page .matrix-cell.has-value .matrix-cell__bar {
  min-height: 6px;
}

/* Project schedule: stacked done (blue) + due priority segments */
.reports-page .matrix-cell__stack {
  position: absolute;
  right: 5px;
  bottom: 3px;
  left: 5px;
  z-index: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1px;
  pointer-events: none;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  opacity: 0.55;
}

.reports-page .matrix-cell__seg {
  display: block;
  width: 100%;
  min-height: 2px;
  opacity: 0.9;
  box-shadow: 0 0 6px rgba(61, 224, 255, 0.1);
}

.reports-page .matrix-cell__seg--done {
  opacity: 0.92;
  box-shadow: 0 0 8px rgba(77, 163, 255, 0.28);
}

.reports-page .matrix-cell__seg--due-high {
  box-shadow: 0 0 10px rgba(255, 61, 90, 0.35);
}

/* Overdue open segments: pulse in priority tonality (not done/blue) */
@keyframes matrix-overdue-high {
  0%, 100% { opacity: 0.95; filter: brightness(1); box-shadow: 0 0 8px rgba(255, 61, 90, 0.45); }
  50% { opacity: 0.45; filter: brightness(1.35); box-shadow: 0 0 16px rgba(255, 61, 90, 0.85); }
}
@keyframes matrix-overdue-medium {
  0%, 100% { opacity: 0.95; filter: brightness(1); box-shadow: 0 0 8px rgba(240, 192, 64, 0.4); }
  50% { opacity: 0.45; filter: brightness(1.35); box-shadow: 0 0 16px rgba(240, 192, 64, 0.85); }
}
@keyframes matrix-overdue-low {
  0%, 100% { opacity: 0.95; filter: brightness(1); box-shadow: 0 0 8px rgba(0, 255, 170, 0.35); }
  50% { opacity: 0.45; filter: brightness(1.3); box-shadow: 0 0 14px rgba(0, 255, 170, 0.75); }
}

.reports-page .matrix-cell__seg--overdue-high {
  animation: matrix-overdue-high 1.1s ease-in-out infinite;
  opacity: 1;
}
.reports-page .matrix-cell__seg--overdue-medium {
  animation: matrix-overdue-medium 1.25s ease-in-out infinite;
  opacity: 1;
}
.reports-page .matrix-cell__seg--overdue-low {
  animation: matrix-overdue-low 1.4s ease-in-out infinite;
  opacity: 1;
}

/* Due digits flash when open work is on a past day (dynamic overdue) */
.reports-page .matrix-cell__due--overdue-high {
  animation: matrix-overdue-high 1.1s ease-in-out infinite;
}
.reports-page .matrix-cell__due--overdue-medium {
  animation: matrix-overdue-medium 1.25s ease-in-out infinite;
}
.reports-page .matrix-cell__due--overdue-low {
  animation: matrix-overdue-low 1.4s ease-in-out infinite;
}

.reports-page .matrix-cell--overdue {
  outline: 1px solid rgba(255, 100, 120, 0.35);
  outline-offset: -1px;
  border-radius: 3px;
}

/* Shared digit size + outline: day cells and Total column match.
   0.875rem = 14px at the browser default root (16px). Use rem, not px. */
.reports-page .report-matrix {
  --matrix-digit-size: 0.875rem;
  --matrix-digit-shadow:
    0 0 1px #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.75),
    0 0 18px rgba(0, 0, 0, 0.45);
}

.reports-page .matrix-legend__item--flash i.is-flash-high {
  background: var(--danger);
  animation: matrix-overdue-high 1.1s ease-in-out infinite;
}

.reports-page .matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-element, 1rem);
  margin-top: var(--gap-tight, 0.5rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.reports-page .matrix-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.reports-page .matrix-legend__item i {
  width: 12px;
  height: 10px;
  display: inline-block;
  border-radius: 2px;
}

/* Day digits + Total column: same size, weight, split styling */
.reports-page .matrix-cell__value,
.reports-page .matrix-total__split {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--matrix-digit-size);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #f2f7ff;
  text-shadow: var(--matrix-digit-shadow);
  line-height: 1;
  letter-spacing: -0.02em;
}

.reports-page .matrix-cell__value--split,
.reports-page .matrix-total__split {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.06rem;
  font-size: var(--matrix-digit-size);
  letter-spacing: -0.02em;
}

.reports-page .matrix-cell__done,
.reports-page .matrix-total__done {
  color: #8ec8ff;
  font-weight: 500;
  text-shadow:
    var(--matrix-digit-shadow),
    0 0 12px rgba(100, 180, 255, 0.55);
}

.reports-page .matrix-cell__sep,
.reports-page .matrix-total__sep {
  color: rgba(220, 230, 245, 0.75);
  font-weight: 500;
  font-size: 0.85em;
  opacity: 1;
  text-shadow: var(--matrix-digit-shadow);
}

/* Day-cell due digits: priority tonality (totals keep plain gold) */
.reports-page .matrix-cell__due {
  font-weight: 500;
  text-shadow: var(--matrix-digit-shadow);
}

.reports-page .matrix-cell__due--high {
  color: #ff6b84;
  text-shadow:
    var(--matrix-digit-shadow),
    0 0 12px rgba(255, 61, 90, 0.55);
}

.reports-page .matrix-cell__due--medium {
  color: #ffd56a;
  text-shadow:
    var(--matrix-digit-shadow),
    0 0 12px rgba(255, 200, 80, 0.5);
}

.reports-page .matrix-cell__due--low {
  color: #5dffc0;
  text-shadow:
    var(--matrix-digit-shadow),
    0 0 12px rgba(0, 255, 170, 0.45);
}

/* Mixed-priority due split: 2·1 (high · medium) */
.reports-page .matrix-cell__pri-sep {
  color: rgba(220, 230, 245, 0.55);
  font-weight: 600;
  font-size: 0.75em;
  margin: 0 0.04rem;
  text-shadow: var(--matrix-digit-shadow);
}

.reports-page .matrix-total__due {
  color: #ffd56a;
  font-weight: 500;
  text-shadow:
    var(--matrix-digit-shadow),
    0 0 12px rgba(255, 200, 80, 0.5);
}

.reports-page .matrix-cell--done-due {
  min-width: 2.75rem;
}

.reports-page .matrix-cell--empty,
.reports-page .matrix-cell__value--empty {
  min-width: 0;
  min-height: 1.2rem;
  color: transparent;
  text-shadow: none;
  user-select: none;
}

/* Nested plan rows stay compact under big digits */
.reports-page .report-matrix tr.matrix-plan-under-project .matrix-cell {
  min-height: 32px;
}

.reports-page .matrix-total {
  font-family: var(--font-mono);
  font-size: var(--matrix-digit-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-display);
  background: rgba(61, 224, 255, 0.06);
}

.reports-page .matrix-total--grand {
  color: var(--hud-gold);
}

/* Project Schedule Matrix: TOTAL DONE/DUE column — same digit size as day cells */
.reports-page .matrix-total-head {
  white-space: nowrap;
  min-width: 5.5rem;
}

.reports-page .matrix-total--split {
  min-width: 4.75rem;
}

.reports-page .matrix-total--grand .matrix-total__done {
  color: #a8d4ff;
}

.reports-page .matrix-total--grand .matrix-total__due {
  color: #ffe08a;
}

/* Footer — PR-0201 / DIP-0211: plan-usage dock on reports.html
   Desktop/TV (≥701px): fixed persistent dock + full details.
   Mobile (≤700px): NOT persistent — scrolls with page + short meta (easy scroll). */

body.reports-page {
  --footer-bar-height: 12.75rem;
}

/* Shared chrome (position set per breakpoint below) */
body.reports-page .reports-footer.reports-footer--pies,
body.reports-page.dashboard-test-page .dashboard-footer.reports-footer--pies,
body.reports-page #reportsFooterDock {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border-top: 1px solid rgba(0, 229, 255, 0.28);
  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.25rem) 0.3rem;
  padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 12, 24, 0.88);
  z-index: 45;
}

/* Desktop / TV: pin dock while scrolling matrices */
@media (min-width: 701px) {
  body.reports-page,
  body.reports-page.dashboard-test-page {
    padding-bottom: calc(var(--footer-bar-height) + env(safe-area-inset-bottom, 0px));
  }

  body.reports-page .reports-footer.reports-footer--pies,
  body.reports-page.dashboard-test-page .dashboard-footer.reports-footer--pies,
  body.reports-page #reportsFooterDock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    box-shadow:
      0 -10px 28px rgba(0, 8, 20, 0.5),
      0 -1px 0 rgba(0, 229, 255, 0.14),
      inset 0 1px 0 rgba(0, 229, 255, 0.06);
    backdrop-filter: blur(18px) saturate(1.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.55);
  }
}

.reports-page .reports-footer__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  width: 100%;
  max-width: 80rem;
  min-height: 1.15rem;
  padding: 0 0.15rem;
}

.reports-page .reports-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.55rem;
}

.reports-page .reports-footer__kicker {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--reports-cyan, var(--hud-cyan, #00e5ff));
  opacity: 0.85;
}

.reports-page .reports-footer__title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text, #e8f6ff);
}

.reports-page .reports-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
}

.reports-page .reports-footer--pies .reports-back {
  min-height: 28px;
  font-size: 0.62rem;
}

.reports-page .reports-source {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* Centered lane cards: big donut + full detail column (hero parity) */
.reports-page .pie-row--footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 auto;
  width: 100%;
  max-width: 78rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 229, 255, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}

.reports-page .pie-row--footer .plan-pie {
  flex: 1 1 15rem;
  min-width: 13.5rem;
  max-width: 18.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  background: rgba(4, 14, 28, 0.55);
  border: 1px solid var(--border-default);
  min-height: 0;
  height: auto;
  text-align: left;
}

.reports-page .pie-row--footer .plan-pie[data-provider*="Codex"],
.reports-page .pie-row--footer .plan-pie[data-provider*="codex"] {
  border-color: rgba(16, 163, 127, 0.45);
}

.reports-page .pie-row--footer .plan-pie[data-state="heavy"] {
  border-color: rgba(232, 184, 74, 0.5);
}

.reports-page .pie-row--footer .plan-pie[data-state="secondary"] {
  border-color: rgba(155, 123, 255, 0.5);
}

.reports-page .pie-row--footer .plan-pie[data-state="limit-hit"] {
  border-color: rgba(255, 61, 90, 0.55);
}

.reports-page .pie-row--footer .plan-pie[data-state="backup"] {
  border-color: rgba(90, 101, 112, 0.45);
  opacity: 0.78;
  filter: grayscale(0.35);
}

.reports-page .pie-row--footer .plan-pie__svg {
  width: 5.75rem;
  height: 5.75rem;
  flex: 0 0 auto;
  align-self: center;
}

/* Larger center % inside donut for TV */
.reports-page .pie-row--footer .plan-pie__center {
  font-size: 1.05rem;
  font-weight: 700;
}

.reports-page .pie-row--footer .plan-pie__center-sub {
  font-size: 0.52rem;
  letter-spacing: 0.06em;
}

.reports-page .pie-row--footer .plan-pie__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
  flex: 1 1 auto;
}

.reports-page .pie-row--footer .plan-pie__name {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text, #e8f6ff);
  line-height: 1.2;
  max-width: 100%;
}

/* Full usage details — same fields as hero pies */
.reports-page .pie-row--footer .plan-pie__window,
.reports-page .pie-row--footer .plan-pie__state,
.reports-page .pie-row--footer .plan-pie__subline,
.reports-page .pie-row--footer .plan-pie__remain,
.reports-page .pie-row--footer .plan-pie__reset,
.reports-page .pie-row--footer .plan-pie__timer,
.reports-page .pie-row--footer .plan-pie__heat-caption,
.reports-page .pie-row--footer .plan-pie__note {
  display: block;
  font-size: 0.68rem;
  line-height: 1.25;
  max-width: 100%;
}

.reports-page .pie-row--footer .plan-pie__window {
  color: var(--text-muted);
}

.reports-page .pie-row--footer .plan-pie__state {
  font-family: var(--font-mono);
  color: var(--hud-cyan, #00e5ff);
}

.reports-page .pie-row--footer .plan-pie__subline {
  color: var(--text-muted);
  /* allow two lines of billing/host detail */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reports-page .pie-row--footer .plan-pie__remain {
  color: var(--reports-cyan, var(--hud-cyan, #00e5ff));
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
}

.reports-page .pie-row--footer .plan-pie__reset,
.reports-page .pie-row--footer .plan-pie__timer {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.reports-page .pie-row--footer .plan-pie__heatmap {
  margin-top: 0.15rem;
  max-width: 100%;
  align-items: flex-start;
}

.reports-page .pie-row--footer .plan-pie__heat-row {
  gap: 2px;
  justify-content: flex-start;
}

.reports-page .pie-row--footer .plan-pie__heat-cell {
  width: 8px;
  height: 8px;
}

.reports-page .pie-row--footer .plan-pie__heat-clock {
  font-size: 0.68rem;
}

.reports-page .pie-row--footer .plan-pie__heat-caption {
  font-size: 0.6rem;
  color: var(--text-muted);
}

.reports-page .pie-row--footer .plan-pie__note {
  display: none; /* note stays on title hover via plan-pie title attr */
}

.reports-page .pie-row--footer .chart-note {
  display: none;
}

@media (max-width: 1100px) {
  body.reports-page {
    --footer-bar-height: 14rem;
  }

  .reports-page .pie-row--footer .plan-pie {
    flex: 1 1 14rem;
    min-width: 12.5rem;
  }
}

/* Tablet/narrow desktop: keep FOUR pie cards in one row (no 2×2 stack) */
@media (max-width: 900px) {
  body.reports-page {
    --footer-bar-height: 11.5rem;
  }

  .reports-page .pie-row--footer,
  .reports-page .pie-row--footer-short {
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .reports-page .pie-row--footer .plan-pie,
  .reports-page .pie-row--footer-short .plan-pie {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    gap: 0.35rem;
    padding: 0.35rem 0.4rem;
  }

  .reports-page .pie-row--footer .plan-pie__svg,
  .reports-page .pie-row--footer-short .plan-pie__svg {
    width: 4.25rem;
    height: 4.25rem;
  }
}

/* Mobile: plan-usage footer is NOT persistent (scrolls with page).
   Short meta · four pie cards stay ONE row (equal columns). TV dock fixed ≥701. */
@media (max-width: 700px) {
  body.reports-page,
  body.reports-page.dashboard-test-page {
    --footer-bar-height: 0px;
    /* undo dashboard fixed-footer body pad — pies are in document flow */
    padding-bottom: var(--gap-section, 1.5rem);
  }

  body.reports-page .reports-footer.reports-footer--pies,
  body.reports-page.dashboard-test-page .dashboard-footer.reports-footer--pies,
  body.reports-page #reportsFooterDock {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
    margin: var(--gap-element, 1rem) 0 0;
    max-width: none;
    width: 100%;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border-top: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    padding: 0.35rem clamp(0.35rem, 1.5vw, 0.65rem) 0.45rem;
    padding-bottom: calc(0.45rem + env(safe-area-inset-bottom, 0px));
  }

  .reports-page .reports-footer__rail {
    min-height: 1rem;
    gap: 0.15rem 0.5rem;
  }

  /* One row of four equal pie cards — never wrap/stack */
  .reports-page .pie-row--footer,
  .reports-page .pie-row--footer-short {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    gap: 0.28rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .reports-page .pie-row--footer .plan-pie,
  .reports-page .pie-row--footer-short .plan-pie {
    flex: 1 1 0;
    min-width: 4.5rem;
    max-width: none;
    width: 0; /* equal fourths of the row */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 0.3rem 0.2rem;
  }

  .reports-page .pie-row--footer .plan-pie__svg,
  .reports-page .pie-row--footer-short .plan-pie__svg {
    width: 3.1rem;
    height: 3.1rem;
  }

  .reports-page .pie-row--footer .plan-pie__center,
  .reports-page .pie-row--footer-short .plan-pie__center {
    font-size: 0.72rem;
  }

  .reports-page .pie-row--footer .plan-pie__center-sub,
  .reports-page .pie-row--footer-short .plan-pie__center-sub {
    font-size: 0.4rem;
  }

  .reports-page .pie-row--footer .plan-pie__meta,
  .reports-page .pie-row--footer-short .plan-pie__meta {
    align-items: center;
    width: 100%;
  }

  /* Short description: hide long TV meta */
  .reports-page .pie-row--footer .plan-pie__window,
  .reports-page .pie-row--footer .plan-pie__subline,
  .reports-page .pie-row--footer .plan-pie__heatmap,
  .reports-page .pie-row--footer .plan-pie__heat-caption,
  .reports-page .pie-row--footer .plan-pie__reset,
  .reports-page .pie-row--footer-short .plan-pie__window,
  .reports-page .pie-row--footer-short .plan-pie__subline,
  .reports-page .pie-row--footer-short .plan-pie__heatmap,
  .reports-page .pie-row--footer-short .plan-pie__heat-caption,
  .reports-page .pie-row--footer-short .plan-pie__reset {
    display: none !important;
  }

  .reports-page .pie-row--footer .plan-pie__name,
  .reports-page .pie-row--footer-short .plan-pie__name {
    font-size: 0.52rem;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reports-page .pie-row--footer .plan-pie__state,
  .reports-page .pie-row--footer .plan-pie__remain,
  .reports-page .pie-row--footer .plan-pie__timer,
  .reports-page .pie-row--footer-short .plan-pie__state,
  .reports-page .pie-row--footer-short .plan-pie__remain,
  .reports-page .pie-row--footer-short .plan-pie__timer {
    font-size: 0.52rem;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reports-page .pie-row--footer .plan-pie__remain,
  .reports-page .pie-row--footer-short .plan-pie__remain {
    font-size: 0.56rem;
  }

  .reports-page .reports-footer__title {
    font-size: 0.58rem;
  }

  .reports-page .reports-footer__kicker {
    font-size: 0.52rem;
  }

  .reports-page .reports-header,
  .reports-page .reports-header__meta {
    align-items: flex-start;
  }

  .reports-page .pie-row--hero .plan-pie {
    gap: var(--gap-tight);
  }

  .reports-page .pie-row--hero .plan-pie__svg {
    width: 76px;
    height: 76px;
  }

  .reports-page .bar-row {
    grid-template-columns: minmax(64px, 40%) minmax(0, 1fr) auto;
  }

  .reports-page .matrix-controls {
    justify-content: stretch;
    min-width: 100%;
  }

  .reports-page .matrix-mode,
  .reports-page .matrix-step {
    width: 100%;
  }

  .reports-page .matrix-mode__btn,
  .reports-page .matrix-step__btn {
    flex: 1 1 0;
  }

  .reports-page .matrix-range {
    flex: 2 1 auto;
    min-width: 120px;
  }
}

/* ========== PR-0206 — dual matrices FIT (TV + gamer common) ==========
   Content-first: pack max-height = residual (hero→footer); height auto until
   overflow, then internal matrix scroll. Full width on large displays.
   Both Project + Agent matrices always open in one block.
*/

.reports-page .reports-viewport-pack {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 0;
  width: 100%;
}

.reports-page .reports-band--viewport-pack {
  margin-bottom: 0.25rem;
  gap: 0;
  width: 100%;
}

.reports-page .reports-matrix-block {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 0;
  width: 100%;
}

.reports-page .reports-band__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-tight, 0.5rem);
}

.reports-page .reports-band--collapsible {
  margin-bottom: var(--gap-element, 1rem);
}

.reports-page .reports-band--collapsible .reports-band__head--toggle {
  padding: 0.35rem var(--gap-micro, 0.25rem);
  border: 1px solid rgba(61, 224, 255, 0.14);
  border-radius: var(--radius-control, 6px);
  background: rgba(5, 16, 32, 0.45);
}

.reports-page .reports-band--collapsible .reports-band__lede {
  font-size: 0.72rem;
}

@media (min-width: 701px) {
  /* Tight body chrome so pack gets max vertical + horizontal room */
  body.reports-page,
  body.reports-page.dashboard-test-page {
    padding-top: 0.35rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* bottom pad matches live footer height (JS also updates --footer-bar-height) */
    padding-bottom: calc(var(--footer-bar-height, 12.75rem) + env(safe-area-inset-bottom, 0px));
  }

  /* Use nearly full display width — no narrow centered column on TV */
  .reports-page .container {
    max-width: min(100%, 160rem);
    width: 100%;
  }

  .reports-page .reports-band--top {
    margin-bottom: 0.15rem;
    gap: 0.12rem;
  }

  .reports-page .glass.header-card.reports-hero {
    padding: 0.22rem 0.55rem;
  }

  .reports-page .reports-hero .hc-title h1 {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.05;
    margin: 0;
  }

  .reports-page .reports-hero .hc-title .header-kicker {
    font-size: 0.5rem;
  }

  .reports-page .reports-attention--live {
    gap: 0.15rem;
  }

  .reports-page .reports-attention__banner {
    padding: 0.22rem 0.45rem;
  }

  /*
   * Pack: content-first. JS sets max-height = residual (hero→footer).
   * height stays auto so glass hugs tables — no empty void under short matrices.
   * .is-overflow only when content exceeds residual (internal matrix scroll).
   */
  .reports-page .reports-viewport-pack {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 0;
    overflow: hidden;
  }

  .reports-page .reports-viewport-pack.is-fit {
    max-height: var(--pack-max, none);
  }

  .reports-page .reports-viewport-pack.is-fit:not(.is-overflow) {
    /* hug content — do not stretch empty glass to fill the TV */
    height: auto !important;
    flex: 0 0 auto;
  }

  .reports-page .reports-viewport-pack.is-overflow {
    /* residual filled; matrices internal-scroll */
    overflow: hidden;
  }

  .reports-page .reports-viewport-pack .reports-card--tiles {
    flex: 0 0 auto;
    padding: 0.28rem 0.45rem;
  }

  .reports-page .reports-viewport-pack .reports-card--pack {
    padding: 0.28rem 0.45rem;
  }

  .reports-page .reports-viewport-pack .reports-card__title {
    font-size: 0.76rem;
    margin: 0;
  }

  .reports-page .reports-viewport-pack .stat-tiles {
    margin-top: 0.18rem;
    gap: 0.22rem;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .reports-page .reports-viewport-pack .stat-tile {
    min-height: 0;
    padding: 0.16rem 0.28rem;
    gap: 0.02rem;
  }

  .reports-page .reports-viewport-pack .stat-tile__value {
    font-size: clamp(0.82rem, 1vw, 1rem);
  }

  .reports-page .reports-viewport-pack .stat-tile__label {
    font-size: 0.5rem;
    letter-spacing: 0.03em;
  }

  .reports-page .reports-viewport-pack .chart--pack {
    margin-top: 0.12rem;
    min-height: 0;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .reports-page .reports-viewport-pack .matrix-controls {
    gap: 0.22rem;
  }

  .reports-page .reports-viewport-pack .matrix-mode__btn,
  .reports-page .reports-viewport-pack .matrix-step__btn,
  .reports-page .reports-viewport-pack .matrix-md-btn {
    min-height: 28px;
    padding: 0 0.38rem;
    font-size: 0.6rem;
  }

  .reports-page .reports-viewport-pack .matrix-cell {
    min-height: 1.5rem;
    padding: 0.05rem 0.08rem;
  }

  .reports-page .reports-viewport-pack .report-matrix tr.matrix-plan-under-project .matrix-cell,
  .reports-page .reports-viewport-pack .report-matrix tr.matrix-skill-under-project .matrix-cell {
    min-height: 1.4rem;
  }

  .reports-page .reports-viewport-pack .report-matrix th.matrix-sub-cell {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
  }

  .reports-page .reports-viewport-pack .report-matrix th.matrix-project-cyber {
    padding: 0.35rem 0.3rem;
  }

  .reports-page .reports-viewport-pack .matrix-project-cyber__label {
    font-size: 0.7rem;
  }

  .reports-page .reports-viewport-pack .matrix-skill-list--row li {
    font-size: 0.65rem;
  }

  .reports-page .reports-viewport-pack .matrix-label--sub {
    font-size: 0.58rem;
  }

  .reports-page .reports-viewport-pack .report-matrix {
    --matrix-digit-size: 0.875rem; /* 14px */
  }

  .reports-page .reports-viewport-pack .matrix-cell__value,
  .reports-page .reports-viewport-pack .matrix-cell__value--split,
  .reports-page .reports-viewport-pack .matrix-total__split,
  .reports-page .reports-viewport-pack .matrix-cell__done,
  .reports-page .reports-viewport-pack .matrix-cell__due,
  .reports-page .reports-viewport-pack .matrix-total__done,
  .reports-page .reports-viewport-pack .matrix-total__due {
    font-size: var(--matrix-digit-size);
  }

  /*
   * Dual matrices: stack and hug content (no forced 1.22fr/0.78fr empty glass).
   * When pack is-overflow, JS assigns max-heights per card for internal scroll.
   */
  .reports-page .reports-matrix-block {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    overflow: hidden;
    justify-content: flex-start;
  }

  .reports-page .reports-viewport-pack.is-overflow .reports-matrix-block {
    flex: 1 1 auto;
  }

  .reports-page .reports-matrix-block .reports-card--matrix {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .reports-page .reports-matrix-block .reports-card__head {
    flex: 0 0 auto;
  }

  .reports-page .reports-matrix-block .chart--pack {
    flex: 0 1 auto;
    min-height: 0;
    margin-top: 0.12rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .reports-page .reports-matrix-block .matrix-scroll {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: auto;
  }

  /* Overflow mode: scroll regions fill assigned card budget */
  .reports-page .reports-viewport-pack.is-overflow .reports-matrix-block .chart--pack {
    flex: 1 1 auto;
  }

  .reports-page .reports-viewport-pack.is-overflow .reports-matrix-block .matrix-scroll {
    flex: 1 1 auto;
  }

  .reports-page .reports-viewport-pack .report-matrix--project-cyber tr.matrix-skill-under-project .matrix-cell {
    min-height: 1.35rem;
  }

  .reports-page .reports-viewport-pack .report-matrix--project-cyber th.matrix-sub-cell {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
  }

  .reports-page .reports-viewport-pack .report-matrix--project-cyber .matrix-project-cyber__label {
    font-size: 0.68rem;
  }

  .reports-page .reports-viewport-pack .report-matrix--project-cyber .matrix-skill-list--row li {
    font-size: 0.62rem;
  }
}

/* TV / ultrawide / 4K: edge-to-edge usable width, denser chrome */
@media (min-width: 1600px) {
  body.reports-page,
  body.reports-page.dashboard-test-page {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  /* Beat dashboard .container { max-width: 90vw } at 2560+ */
  .reports-page .container {
    max-width: none !important;
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .reports-page .reports-viewport-pack,
  .reports-page .reports-band,
  .reports-page .reports-matrix-block,
  .reports-page .reports-card--matrix {
    width: 100%;
    max-width: none;
  }

  .reports-page .reports-viewport-pack .report-matrix {
    --matrix-digit-size: 0.9rem;
    min-width: 100%;
    width: 100%;
  }

  .reports-page .reports-viewport-pack .stat-tile__value {
    font-size: clamp(0.9rem, 0.95vw, 1.15rem);
  }

  .reports-page .reports-viewport-pack .reports-card__title {
    font-size: 0.82rem;
  }

  .reports-page .reports-viewport-pack .matrix-cell {
    min-height: 1.45rem;
  }
}

@media (min-width: 2560px) {
  body.reports-page,
  body.reports-page.dashboard-test-page {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .reports-page .container {
    max-width: none !important;
    width: 100%;
  }

  .reports-page .reports-viewport-pack .report-matrix {
    --matrix-digit-size: 0.95rem;
  }
}

@media (min-width: 1600px) and (min-height: 900px) {
  .reports-page .reports-viewport-pack .report-matrix--project-cyber tr.matrix-skill-under-project .matrix-cell {
    min-height: 1.3rem;
  }

  .reports-page .reports-viewport-pack .matrix-cell {
    min-height: 1.4rem;
  }

  /* Skill lane alignment: slightly taller lanes on big TV for readability */
  .reports-page .report-matrix--project-cyber {
    --matrix-skill-lane-h: 1.4rem;
  }
}

@media (min-width: 701px) and (max-height: 960px) {
  .reports-page .reports-viewport-pack .stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reports-page .reports-viewport-pack .stat-tile__value {
    font-size: 0.85rem;
  }

  .reports-page .reports-viewport-pack .matrix-cell {
    min-height: 1.4rem;
  }

  .reports-page .reports-viewport-pack .matrix-cell__stack {
    opacity: 0.38;
  }
}

@media (min-width: 701px) and (max-height: 800px) {
  .reports-page .reports-attention__label {
    font-size: 0.56rem;
  }

  .reports-page .reports-viewport-pack .reports-card--pack {
    padding: 0.2rem 0.38rem;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .reports-page .reports-viewport-pack .stat-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .reports-page .reports-viewport-pack {
    height: auto !important;
    max-height: none !important;
  }

  .reports-page .reports-viewport-pack .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-page .reports-matrix-block {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .reports-page .reports-matrix-block .reports-card--matrix {
    max-height: none;
  }

  .reports-page .reports-matrix-block .matrix-scroll {
    max-height: 48vh;
    flex: none;
  }
}