/* Chart-specific styles — patterns that exist to render one
   chart shape. Imported alongside components.css; per-chart marks
   here, generic UI surfaces (chart-card, toggle-group, etc.) live
   in components.css.

   First pass: horizontal-bar chart family (.hbar*), correlation
   matrix grid (.corr-*), and correlation ranked-pair list (.cp-*).
   The .hbar[data-theme] rules add the click-to-filter affordance
   on theme-keyed bars in renderFreqChart / renderPhaseChart.

   Audit follow-ups inside this file:
   - Correlation cell stroke: the previous CSS-grid version had a
     1px var(--card) border per cell (audit A13 — originally
     hardcoded #fff, don't regress to #fff). The Plot.cell migration
     in PR 634 moved that stroke onto the mark's `stroke: card` option
     so the same per-cell separation is now driven by JS reading
     --card live. If you re-introduce a hand-rolled grid here, keep
     the border tied to var(--card), not #fff. */

.hbar {
  display: grid; grid-template-columns: 200px 1fr 50px;
  align-items: center; gap: 10px; padding: 4px 0;
}
@media (max-width: 760px) {
  /* Narrow viewports: shrink the label column so the bar still has
     room to convey magnitude. Labels wrap to two lines when needed. */
  .hbar { grid-template-columns: 110px 1fr 38px; gap: 6px; font-size: 12px; }
  .hbar-num { font-size: 12px; }
}
/* Theme bars in renderFreqChart / renderPhaseChart carry data-theme
   — clicking jumps to Next steps filtered to that theme. Make the
   row read as clickable but stay subtle: cursor and a faint hover,
   not a full button look. */
.hbar[data-theme] { cursor: pointer; border-radius: 3px; }
.hbar[data-theme]:hover { background: var(--rule-2); }
.hbar[data-theme]:hover .hbar-label { color: var(--ink); }
.hbar-label { font-size: 13px; color: var(--ink-2); }
.hbar-track {
  background: var(--rule-2); border-radius: 2px;
  height: 14px; overflow: hidden; position: relative; display: flex;
}
.hbar-seg { height: 100%; transition: width var(--t-slow) ease; position: relative; }
.hbar-num {
  font-variant-numeric: tabular-nums; font-size: 13px;
  color: var(--ink-2); text-align: right; font-weight: 500;
}


/* Correlation matrix — tight, lower-triangle only */
.corr-block { font-size: 12px; }
.corr-block-title {
  font-weight: 500; color: var(--ink-2); margin-bottom: var(--space-2);
  font-size: 13px;
}
.corr-block-title .n { color: var(--ink-3); font-weight: 400; }
.corr-block-too-small {
  color: var(--ink-3);
  font-size: 13px;
  padding: 30px 0;
}
/* Correlation matrix body: the lower-triangle grid was hand-rolled
   CSS Grid + .corr-cell divs before PR 634; Plot.cell now mounts an
   SVG into .corr-block-plot. No styling needed beyond the Plot-
   adapter's .ofsted-chart hook (in components.css) — Plot sizes the
   SVG itself and the surrounding chrome (title / wrap) carries the
   layout. The class is here purely as the JS query target. */
.corr-block-plot { display: block; }
.corr-legend {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 11px; color: var(--ink-3);
}
.corr-legend-bar {
  width: 180px; height: 12px; border-radius: 2px; position: relative;
  /* Gradient stops use the same corr colour recipe (--legend-scale +
     --legend-lo/mid/hi pcts mixed against --card) that the matrix
     cells used to share with .corr-cell. Post-PR 634 the matrix is
     Plot.cell with a JS-baked fill, leaving this legend bar + the
     pair-list .cp-fill as the CSS callers of the recipe. */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--legend-scale, var(--pos)) var(--legend-lo, 0%), var(--card)) 0%,
    color-mix(in srgb, var(--legend-scale, var(--pos)) var(--legend-mid, 50%), var(--card)) 50%,
    color-mix(in srgb, var(--legend-scale, var(--pos)) var(--legend-hi, 100%), var(--card)) 100%
  );
}
.corr-legend-tick {
  position: absolute; top: 14px; transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

/* Correlation ranked pair list — flex-column-gap recipe lives on
   `.stack .stack--gap-0` in components.css. */
.cp-head, .cp-row {
  display: grid;
  grid-template-columns: 28px 220px 1fr 42px 1fr 42px;
  gap: var(--space-3);
  align-items: center;
  padding: 6px 0;
}
.cp-row-single, .cp-head.cp-row-single {
  grid-template-columns: 28px 240px 1fr 50px;
}
.cp-head {
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-1);
}
.cp-head .cp-n {
  text-transform: none; font-weight: 400;
  color: var(--ink-3); margin-left: var(--space-1);
  letter-spacing: 0;
}
.cp-row {
  border-bottom: 1px dotted var(--rule-2);
  font-size: 13px;
}
.cp-row:last-child { border-bottom: none; }
.cp-rank {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 11px;
  text-align: center;
}
.cp-label {
  color: var(--ink-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-x { color: var(--ink-3); font-weight: 400; }
.cp-track {
  height: 14px;
  background: var(--rule-2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.cp-fill {
  height: 100%; transition: width var(--t-slow) ease;
  /* --corr-scale + --corr-pct pass-through driven by corrCellVars()
     in correlation.js. Pre-PR 634 the same recipe was shared with the
     correlation matrix's .corr-cell rule; the matrix now mounts as
     Plot.cell and bakes the colour-mix in JS, leaving the legend bar
     + this .cp-fill rule as the only CSS callers of the recipe. */
  background: color-mix(in srgb, var(--corr-scale, var(--pos)) var(--corr-pct, 0%), var(--card));
}
.cp-num {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-align: right;
}
/* Wrapper for the correlation matrix when toggled — allows horizontal
   scroll if the 8-column grid (~570px wide) doesn't fit in the
   half-width Big-picture card on narrow viewports. */
.corr-matrix-wrap {
  overflow-x: auto;
  margin-top: var(--space-1);
}

/* Stacked-bar segment (.ga-seg) + track (.ga-track) — used by
   schools-list-panel.js to render the grade mini-bar inside school cards.
   .ga-row-badge — pill used by trusts.js for "Not yet inspected" / "No
   open schools" status chips on trust profile cards. */

.ga-track {
  height: 22px;
  border-radius: 3px;
  /* overflow: visible so segment tooltips (data-tip + ::after) can
     render above the bar instead of being clipped. Rounded corners
     are kept by giving the first/last segment their own radius. */
  display: flex;
  background: var(--rule-2);
}
.ga-seg {
  position: relative;
  height: 100%;
  /* Minimum visible sliver so a non-zero segment doesn't render at
     zero px when its pct is tiny (e.g. 1 / 500 = 0.2% → 0.6px floor
     rounds to invisible). The width set inline still drives the
     relative size; min-width just prevents disappearance. */
  min-width: 1px;
  transition: width var(--t-slow) ease;
}
/* Round only the outermost edges of the leftmost / rightmost segment
   so the bar looks like a rounded-rectangle as a whole, even with
   overflow: visible on the track. */
.ga-seg:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.ga-seg:last-child  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.ga-seg:hover {
  filter: brightness(1.08);
  cursor: help;
}
/* Immediate CSS tooltip on stacked-bar segments — replaces the
   ~1s OS delay on the native title attribute. Lifts the hovered
   segment slightly above its siblings so the tooltip isn't
   covered by the next segment's edge. */
.ga-seg[data-tip]:hover { z-index: 1; }
.ga-seg[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-strong);
  color: var(--surface-strong-ink);
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.ga-seg[data-grade="Exceptional"]      { background: var(--g-exceptional); }
.ga-seg[data-grade="Strong standard"]  { background: var(--g-strong); }
.ga-seg[data-grade="Expected standard"]{ background: var(--g-expected); }
.ga-seg[data-grade="Needs attention"]  { background: var(--g-attention); }
.ga-seg[data-grade="Urgent improvement"]{ background: var(--g-urgent); }
.ga-row-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--rule-2);
  color: var(--ink-3);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}

/* Histogram + grade-over-time chrome — the hand-rolled <div>-stack
   markup (.histo / .histo-bar / .histo-bar--stack / .histo-axis +
   .gt-grid / .gt-bar / .gt-bar--empty / .gt-seg) was retired in the
   Phase 4 Plot migration. renderTrendVolume + renderGradeOverTime now
   route through Plot.barY + Plot.stackY (with offset:"expand" for the
   100%-normalised view) and pick up theming via the canonical
   .ofsted-chart selector in components.css. The publication-lag CDF
   chrome (.pub-lag-{wrap,svg,tip,hit}) was retired earlier in Phase 4
   (PR 633) — same pattern. */

/* Clickable y-axis tick labels on the question-explorer leaderboards
   (.leaderboard-chart) — the entity name opens its profile, the same
   target as clicking the bar. charts/leaderboard.js maps the click to its
   row by position; this is affordance-only. The chart-wide cursor:pointer
   already comes from the Plot adapter, so the hover underline is what tells
   a reader the name itself is the link. Scoped to .leaderboard-chart so no
   other chart's axis labels pick up the affordance. */
.leaderboard-chart g[aria-label="y-axis tick label"] text {
  cursor: pointer;
}
.leaderboard-chart g[aria-label="y-axis tick label"] text:hover {
  text-decoration: underline;
}
/* Keyboard focus ring — the labels are focusable buttons (tabindex +
   role="button" re-stamped per render by charts/leaderboard.js's
   decorateAxisLabels) so keyboard users can open a profile; this makes the
   focused name visible. Token outline, per CLAUDE.md (no literal 2px). */
.leaderboard-chart g[aria-label="y-axis tick label"] text:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}