/*
 * Model Accuracy page styles (Task 1.26). Loaded only by
 * templates/predictions/model_accuracy.html, on top of
 * predictions-listing.css (reused for the shared header/switcher/filter
 * layout - .predictions-listing__*). Built entirely from existing
 * tokens/primitives (.card, .metric-row, .table-wrapper, .badge, ...) -
 * no new colors, no new spacing scale. The trend bar-chart mirrors
 * homepage.css's own .homepage-trend pattern (same visual approach,
 * kept as separate page-scoped classes rather than a cross-stylesheet
 * dependency).
 */

.accuracy-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--grid-gap);
  margin-bottom: var(--space-32);
}

.accuracy-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.accuracy-kpi-card__value {
  font-size: var(--font-size-stat);
}

.accuracy-kpi-card__sample {
  color: var(--color-text-secondary);
}

.accuracy-section {
  margin-bottom: var(--space-40);
}

.accuracy-section__header {
  margin-bottom: var(--space-16);
}

/* Launch polish: the weekly bars carry fixed-width captions ("No scored predictions"), so on a phone the chart was
   208-263 px wider than the screen and widened the whole page. The chart now scrolls inside its own card (a focusable
   region, with the shared .scroll-affordance arrow beside the heading); the page itself never scrolls sideways. Each
   bar has a 5rem floor, and on wide screens the bars still grow to fill the card exactly as before. */
.accuracy-trend-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-card);
}

.accuracy-trend-scroll:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.accuracy-trend {
  display: flex;
  align-items: flex-end;
  gap: var(--space-12);
  height: 160px;
  padding: var(--space-16);
  width: max-content;
  min-width: 100%;
}

.accuracy-trend__bar {
  flex: 1 0 5rem;
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  height: 100%;
}

.accuracy-trend__bar-fill {
  width: 100%;
  max-width: 32px;
  background: var(--color-intelligence);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 2px;
}

.accuracy-trend__bar-fill--empty {
  background: var(--color-border);
}

.accuracy-methodology {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.accuracy-methodology ul {
  margin: var(--space-12) 0 0;
  padding-left: var(--space-20);
}

.accuracy-methodology li {
  margin-bottom: var(--space-8);
}

/* An inline link inside running text is identified by its underline, never by colour alone (WCAG 1.4.1). */
.accuracy-methodology p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}