/* ============================================================
   REPORTING & ANALYSIS — Page-specific styles
   Extends wiki.css from Phase 04 for data visualisation components
   ============================================================ */

/* ---- Pillar tag ---- */
.pillar-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  background: var(--grey-100);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: var(--space-md);
}

/* ---- Stat panel (dashboard card with large stat + chart) ---- */
.stat-panel {
  border: 1px solid var(--grey-100);
  border-radius: 6px;
  padding: var(--space-lg);
}
.stat-panel__label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  margin-bottom: var(--space-sm);
}
.stat-panel__value {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--near-black);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.stat-panel__value--sm {
  font-size: 1.75rem;
}
.stat-panel__sub {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.stat-panel__chart {
  margin-top: var(--space-md);
}

/* ---- Donut chart (conic-gradient) ---- */
.donut-chart {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* conic-gradient set via inline style */
}
.donut-chart--lg {
  width: 140px;
  height: 140px;
}
.donut-chart__inner {
  position: absolute;
  width: 72%;
  height: 72%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.donut-chart__value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--near-black);
  line-height: 1;
}
.donut-chart--lg .donut-chart__value {
  font-size: 1.75rem;
}
.donut-chart__label {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-400);
  margin-top: 2px;
}
.donut-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.donut-row__detail {
  flex: 1;
}

/* ---- Stacked bar ---- */
.stacked-bar-group {
  margin: var(--space-lg) 0;
}
.stacked-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: 6px;
}
.stacked-bar-row__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stacked-bar {
  display: flex;
  height: 24px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--grey-100);
}
.stacked-bar__seg {
  height: 100%;
  transition: flex 0.4s ease;
  min-width: 0;
}
.stacked-bar__seg--value { background: var(--exeter-yellow); }
.stacked-bar__seg--failure { background: var(--near-black); }
.stacked-bar__seg--green { background: #009592; }
.stacked-bar__seg--amber { background: #7000FF; }
.stacked-bar__seg--red { background: #BF0092; }
.stacked-bar-row__value {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--charcoal);
  white-space: nowrap;
}

/* Legend */
.chart-legend {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-sm) 0 var(--space-md);
}
.chart-legend__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--charcoal);
}
.chart-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- Sparkline row ---- */
.sparkline-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.sparkline-card {
  border: 1px solid var(--grey-100);
  border-radius: 6px;
  padding: var(--space-lg);
}
.sparkline-card__label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  margin-bottom: var(--space-xs);
}
.sparkline-card__value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--near-black);
  margin-bottom: var(--space-sm);
}
.sparkline {
  width: 100%;
  height: 40px;
}
.sparkline polyline {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- RAG grid ---- */
.rag-grid {
  display: grid;
  gap: 2px;
  margin: var(--space-lg) 0;
  font-size: 0.6875rem;
}
.rag-grid--10x7 {
  grid-template-columns: 140px repeat(7, 1fr);
}
.rag-cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rag-cell--header {
  background: var(--grey-50, #FCFCFB);
  color: var(--grey-400);
  font-weight: 700;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rag-cell--row-label {
  text-align: right;
  padding-right: var(--space-sm);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rag-cell--green { background: #e6f4ea; color: #1e7e34; }
.rag-cell--amber { background: #fef7e0; color: #b45309; }
.rag-cell--red { background: #fce8e6; color: #c5221f; }
.rag-cell--grey { background: var(--grey-100); color: var(--grey-400); }

/* ---- Heatmap ---- */
.heatmap {
  display: grid;
  gap: 2px;
  margin: var(--space-lg) 0;
  font-size: 0.6rem;
}
.heatmap--6x8 {
  grid-template-columns: 140px repeat(8, 1fr);
}
.heatmap__cell {
  padding: 6px 4px;
  text-align: center;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6rem;
}
.heatmap__cell--header {
  background: var(--grey-50, #FCFCFB);
  color: var(--grey-400);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heatmap__cell--row-label {
  text-align: right;
  padding-right: var(--space-sm);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heatmap__cell--high { background: #950071; color: #fff; }
.heatmap__cell--med { background: #5400BF; color: #fff; }
.heatmap__cell--low { background: #E9D8FF; color: #410095; }
.heatmap__cell--none { background: var(--grey-50, #FCFCFB); color: var(--grey-200); }

/* ---- Priority matrix (2x2) ---- */
.priority-matrix {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 28px;
  gap: 3px;
  margin: var(--space-xl) 0;
  max-width: 560px;
}
.priority-matrix__corner {
  /* empty top-left */
}
.priority-matrix__col-label {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-400);
  padding: var(--space-xs) 0;
}
.priority-matrix__row-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-400);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: center;
  padding: 0 var(--space-xs);
}
.priority-matrix__cell {
  border-radius: 4px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
}
.priority-matrix__cell--red { background: #FDDCDC; }
.priority-matrix__cell--amber { background: #FFF0CC; }
.priority-matrix__cell--green { background: #D6F5D6; }
.priority-matrix__cell--blue { background: #DCE8FF; }
.priority-matrix__cell-title {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-400);
  margin-bottom: 2px;
}
.priority-matrix__task {
  font-size: 0.75rem;
  color: var(--charcoal);
  line-height: 1.4;
}
.priority-matrix__axis-label {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-400);
  grid-column: 2 / -1;
  padding-top: var(--space-xs);
}

/* ---- Trend indicators ---- */
.trend--up { color: #006A69; }
.trend--down { color: #BF0092; }
.trend--flat { color: var(--grey-400); }
.trend-arrow {
  font-size: 0.875rem;
  vertical-align: middle;
  margin-right: 2px;
}

/* ---- Pillar dots ---- */
.pillar-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.pillar-dot--primary { background: var(--near-black); }
.pillar-dot--secondary { background: var(--grey-300); }

/* ---- Decision cadence flow ---- */
.cadence-flow {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: var(--space-lg) 0;
}
.cadence-flow__step {
  background: var(--grey-50, #FCFCFB);
  border: 1px solid var(--grey-200);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  min-width: 120px;
}
.cadence-flow__step-title {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 2px;
}
.cadence-flow__step-desc {
  font-size: 0.6875rem;
  color: var(--grey-400);
}
.cadence-flow__arrow {
  font-size: 1rem;
  color: var(--grey-300);
  padding: 0 4px;
}

/* ---- Audience cards ---- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.audience-card {
  border: 1px solid var(--grey-100);
  border-top: 3px solid var(--exeter-yellow);
  border-radius: 4px;
  padding: var(--space-lg);
}
.audience-card__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: var(--space-sm);
}
.audience-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.audience-card__list li {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.audience-card__list li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--exeter-yellow);
}

/* ---- Formula callout ---- */
.formula-callout {
  background: var(--near-black);
  color: #fff;
  border-radius: 6px;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
}
.formula-callout__label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--exeter-yellow);
  margin-bottom: var(--space-sm);
}
.formula-callout__formula {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  word-break: break-word;
}

/* ---- Derived metric cards ---- */
.derived-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.derived-card {
  border: 1px solid var(--grey-100);
  border-radius: 6px;
  padding: var(--space-lg);
}
.derived-card__title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: var(--space-xs);
}
.derived-card__formula {
  font-family: 'Courier New', monospace;
  font-size: 0.6875rem;
  color: var(--near-black);
  background: var(--grey-50, #FCFCFB);
  padding: 4px 8px;
  border-radius: 3px;
  margin-bottom: var(--space-sm);
  display: block;
  line-height: 1.5;
}
.derived-card__desc {
  font-size: 0.8125rem;
  color: var(--near-black);
  line-height: 1.6;
}

/* ---- Derived mini dashboard ---- */
.derived-dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.derived-dash__tile {
  background: var(--grey-50, #FCFCFB);
  border-radius: 6px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1px solid var(--grey-100);
}
.derived-dash__label {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin-bottom: var(--space-xs);
}
.derived-dash__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--near-black);
  line-height: 1.1;
  margin-bottom: 4px;
}
.derived-dash__sub {
  font-size: 0.6875rem;
  color: var(--grey-400);
}
.derived-dash__bar {
  height: 6px;
  background: var(--grey-100);
  border-radius: 3px;
  margin-top: var(--space-sm);
  overflow: hidden;
}
.derived-dash__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.derived-dash__fill--green { background: #1e7e34; }
.derived-dash__fill--amber { background: #b45309; }
.derived-dash__fill--red { background: #c5221f; }

/* ---- Time horizon cards ---- */
.horizon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.horizon-card {
  border: 1px solid var(--grey-100);
  border-radius: 6px;
  padding: var(--space-lg);
  text-align: center;
}
.horizon-card__period {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--exeter-yellow);
  line-height: 1;
  margin-bottom: 2px;
}
.horizon-card__unit {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-400);
  margin-bottom: var(--space-sm);
}
.horizon-card__title {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: var(--space-xs);
}
.horizon-card__desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---- Progress-to-target bars ---- */
.target-grid {
  display: grid;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.target-row {
  display: grid;
  grid-template-columns: 140px 1fr 100px;
  gap: var(--space-md);
  align-items: center;
}
.target-row__label {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--near-black);
  text-align: right;
}
.target-row__bar {
  position: relative;
  height: 28px;
  background: var(--grey-100);
  border-radius: 4px;
  overflow: visible;
}
.target-row__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.target-row__fill--green { background: #009592; }
.target-row__fill--amber { background: #7000FF; }
.target-row__fill--red { background: #BF0092; }
.target-row__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: var(--near-black);
  border-radius: 2px;
}
.target-row__marker-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--near-black);
  white-space: nowrap;
}
.target-row__values {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.target-row__current {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--near-black);
  line-height: 1.2;
}
.target-row__gap {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.target-row__gap--on-track { color: #009592; }
.target-row__gap--close { color: #7000FF; }
.target-row__gap--behind { color: #BF0092; }

/* ---- Process flow (reuse from wiki.css with overrides) ---- */
.process-flow--reporting {
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
}
.process-flow--reporting .process-flow__step {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  text-align: center;
  min-width: 100px;
}
.process-flow--reporting .process-flow__step--active {
  border-color: var(--exeter-yellow);
  background: rgba(255, 237, 0, 0.1);
  color: var(--near-black);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .sparkline-panel { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .derived-dash { grid-template-columns: repeat(2, 1fr); }
  .derived-grid { grid-template-columns: 1fr; }
  .horizon-grid { grid-template-columns: repeat(2, 1fr); }
  .priority-matrix { max-width: 100%; }
  .stacked-bar-row { grid-template-columns: 100px 1fr 50px; }
  .target-row { grid-template-columns: 100px 1fr 80px; }
  .rag-grid--10x7 { overflow-x: auto; min-width: 600px; }
  .heatmap--6x8 { overflow-x: auto; min-width: 600px; }
  .donut-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .horizon-grid { grid-template-columns: 1fr; }
  .stacked-bar-row { grid-template-columns: 80px 1fr 40px; }
  .target-row { grid-template-columns: 80px 1fr 70px; }
  .target-row__label { font-size: 0.75rem; }
  .sparkline-panel { grid-template-columns: 1fr; }
  .donut-chart { width: 100px; height: 100px; }
  .donut-chart__value { font-size: 1.25rem; }
}