/**
 * TubeRaker — Analytics sub-app page styles
 * ---------------------------------------------------------------------------
 * Root cause of the "out of place" look: the 6 analytics templates load only
 * reset/variables/base/layout/components/forms/modals/animations, yet nearly
 * every structural class they emit (stat-card, stats-grid, chart-container,
 * the many *-list containers, wizard, export cards, health meters, sr-only,
 * etc.) is undefined in those shared sheets — so the pages rendered as
 * full-width, unstyled browser stacks. This file defines all of them.
 *
 * Rules honoured throughout:
 *   - token-only: every colour / size uses a var(--...) from variables.css
 *   - rem-only: no px anywhere (tokens are already rem)
 *   - mobile-first from 22.5rem, progressive 2/3/4/6-up at 40rem / 64rem
 *   - touch targets >= 2.75rem on every interactive row / control
 *   - both themes: tokens flip on [data-theme], so token-only rules pass in
 *     light AND dark automatically
 *
 * Loaded last on the 6 analytics pages. Structural augmentations to the shared
 * .card / .progress-bar / .card-header are scoped under .app-main so the
 * shared header (aside) and footer chrome are never touched, and so the
 * override is confined to analytics content.
 */

/* ===========================================================================
   1. Page shell + header
   =========================================================================== */
.app-main {
  padding: var(--spacing-lg);
  max-width: var(--content-max-width);
  margin-inline: auto;
  width: 100%;
}

@media (max-width: 40rem) {
  .app-main {
    padding: var(--spacing-md);
  }
}

.page-header {
  margin-bottom: var(--spacing-xl);
}

.page-header h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

@media (max-width: 40rem) {
  .page-header h1 {
    font-size: var(--font-size-2xl);
  }
}

.page-subtitle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-xs);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}

/* Header row: title block on the left, an action (e.g. realtime auto-refresh
   toggle) on the right, wrapping below the title on narrow screens. */
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* ===========================================================================
   2. Section rhythm + titles
   =========================================================================== */
.dashboard-stats,
.dashboard-section {
  margin-bottom: var(--spacing-xl);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-md);
}

.subsection-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm);
}

/* ===========================================================================
   3. Card system (extend shared .card)
   =========================================================================== */
/* Shared .card ships without a border/shadow — add framing, scoped to
   analytics content so shared chrome cards elsewhere are untouched. */
.app-main .card {
  border: 0.0625rem solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}

/* Shared .card-header only sets a bottom divider; add the flex layout the
   templates rely on (title flush-left, actions/badge right). */
.app-main .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.card-header .section-title {
  margin-bottom: 0;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  font-size: var(--font-size-base);
}

/* ===========================================================================
   4. Grids (mobile-first, single column then up)
   =========================================================================== */
.stats-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  /* auto-fit lets 3-up and 4-up KPI rows both flow naturally */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

/* Six compact live tiles: 2-up mobile -> 3-up -> 6-up */
.stats-grid--6 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40rem) {
  .stats-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64rem) {
  .stats-grid--6 {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

.content-grid {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
  .content-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .content-grid--2-1 {
    grid-template-columns: 2fr 1fr;
  }
}

/* ===========================================================================
   5. Stat cards
   =========================================================================== */
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

@media (hover: hover) {
  .stat-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-md);
    border-color: var(--border-secondary);
  }
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.stat-detail {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Solid colour coding for compact live values */
.stat-value--primary { color: var(--color-brand-primary); }
.stat-value--success { color: var(--color-success); }
.stat-value--info    { color: var(--color-info); }
.stat-value--warning { color: var(--color-warning); }
.stat-value--danger  { color: var(--color-error); }

/* Icon chip + semantic colour pairs */
.stat-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-size: var(--font-size-xl);
  background: var(--color-info-bg);
  color: var(--color-brand-primary);
}

.stat-icon--primary   { background: var(--color-info-bg);    color: var(--color-brand-primary); }
.stat-icon--success   { background: var(--color-success-bg); color: var(--color-success); }
.stat-icon--warning   { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-icon--info      { background: var(--color-info-bg);    color: var(--color-info); }
.stat-icon--danger    { background: var(--color-error-bg);   color: var(--color-error); }
.stat-icon--secondary { background: var(--bg-tertiary);      color: var(--text-secondary); }

/* Compact tiles: value stacked over label, left aligned */
.stat-card--compact {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: var(--spacing-md);
  text-align: left;
}

.stat-card--compact .stat-value {
  font-size: var(--font-size-2xl);
}

/* "Gradient" insight cards reinterpreted as token-only accent cards: a left
   accent rail + a faint semantic wash, keeping text on --text-primary so both
   themes pass contrast with zero hardcoded colours. */
.stat-card--gradient-primary {
  border-inline-start: 0.25rem solid var(--color-brand-primary);
}
.stat-card--gradient-primary .stat-icon {
  background: var(--color-info-bg);
  color: var(--color-brand-primary);
}

.stat-card--gradient-success {
  border-inline-start: 0.25rem solid var(--color-success);
}
.stat-card--gradient-success .stat-icon {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.stat-card--gradient-info {
  border-inline-start: 0.25rem solid var(--color-info);
}
.stat-card--gradient-info .stat-icon {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* ===========================================================================
   6. Chart container (sized, framed slot so Chart.js — or an empty canvas —
      reads as an intentional panel and can size responsively)
   =========================================================================== */
.chart-container {
  position: relative;
  width: 100%;
  height: 18rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm);
}

@media (max-width: 40rem) {
  .chart-container {
    height: 15rem;
  }
}

.chart-container canvas {
  max-width: 100%;
}

/* Optional no-data overlay (JS may toggle [data-empty] / inject .chart-empty) */
.chart-container[data-empty]::after {
  content: "No data available";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--text-tertiary);
}

/* ===========================================================================
   7. List surfaces (activity / status / contest / performer / stream /
      contest-earnings / journey / segment / geo) — one shared row pattern
   =========================================================================== */
.activity-stream,
.status-list,
.contest-list,
.performer-list,
.stream-list,
.contest-earnings-list,
.journey-list,
.segment-list,
.geo-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Rows the templates render statically, plus any JS-built rows — but never the
   empty-state placeholder, which stays centred. */
.status-item,
.activity-stream > *:not(.empty-state),
.contest-list > *:not(.empty-state),
.performer-list > *:not(.empty-state),
.stream-list > *:not(.empty-state),
.contest-earnings-list > *:not(.empty-state),
.journey-list > *:not(.empty-state),
.segment-list > *:not(.empty-state),
.geo-list > *:not(.empty-state) {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 2.75rem;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

@media (hover: hover) {
  .status-item:hover,
  .activity-stream > *:not(.empty-state):hover,
  .contest-list > *:not(.empty-state):hover,
  .performer-list > *:not(.empty-state):hover,
  .stream-list > *:not(.empty-state):hover,
  .contest-earnings-list > *:not(.empty-state):hover,
  .journey-list > *:not(.empty-state):hover,
  .segment-list > *:not(.empty-state):hover,
  .geo-list > *:not(.empty-state):hover {
    background: var(--bg-hover);
  }
}

/* Push a trailing metric to the right edge of a row */
.status-name {
  color: var(--text-primary);
}

.status-value {
  margin-inline-start: auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Left-edge status tint */
.status-item--ok    { border-inline-start: 0.1875rem solid var(--color-success); }
.status-item--warn  { border-inline-start: 0.1875rem solid var(--color-warning); }
.status-item--error { border-inline-start: 0.1875rem solid var(--color-error); }

/* Live activity stream scrolls within a fixed height with a thin scrollbar */
.activity-stream {
  max-height: 22rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-secondary) transparent;
}

.activity-stream::-webkit-scrollbar {
  width: 0.375rem;
}

.activity-stream::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: var(--radius-full);
}

/* New stream rows fade/slide in (disabled under reduced-motion below) */
.activity-stream > *:not(.empty-state) {
  animation: analytics-fade-in var(--transition-slow) ease-out;
}

@keyframes analytics-fade-in {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================================
   8. Status dots
   =========================================================================== */
.status-dot {
  position: relative;
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
}

.status-dot--live    { background: var(--color-success); }
.status-dot--warning { background: var(--color-warning); }
.status-dot--danger  { background: var(--color-error); }

/* Pulsing ring for the live indicator — token-only via a scaling pseudo ring */
.status-dot--live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-success);
  animation: analytics-pulse-ring 1.8s ease-out infinite;
}

@keyframes analytics-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ===========================================================================
   9. Data tables
   =========================================================================== */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.data-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 0.0625rem solid var(--border-primary);
  color: var(--text-primary);
}

@media (hover: hover) {
  .data-table tbody tr:hover {
    background: var(--bg-hover);
  }
}

/* An empty-state used as a full-width placeholder cell centres its text */
.data-table td.empty-state {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--spacing-xl);
}

/* ===========================================================================
   10. Empty / loading / error states
   =========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  color: var(--text-tertiary);
  text-align: center;
}

.empty-state i {
  font-size: var(--font-size-3xl);
  opacity: 0.6;
}

.empty-state p {
  margin: 0;
}

.empty-state--loading i {
  animation: analytics-spin 1s linear infinite;
}

@keyframes analytics-spin {
  to { transform: rotate(360deg); }
}

.empty-state--error {
  color: var(--color-error);
}

/* ===========================================================================
   11. Health meters (reuse shared .progress-bar as the track — see override)
   =========================================================================== */
.health-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .health-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.health-item {
  background: var(--bg-elevated);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.health-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.health-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The templates use .progress-bar as a TRACK wrapping .progress-bar-fill.
   components.css styles .progress-bar as a fill; override for analytics pages
   (this sheet only loads here) so the wrapper is a track and the fill fills it. */
.app-main .progress-bar {
  height: 0.5rem;
  width: 100%;
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0;
  background: var(--color-brand-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-bar-fill--success { background: var(--color-success); }
.progress-bar-fill--info    { background: var(--color-info); }
.progress-bar-fill--primary { background: var(--color-brand-primary); }
.progress-bar-fill--warning { background: var(--color-warning); }
.progress-bar-fill--danger  { background: var(--color-error); }

/* ===========================================================================
   12. AI insights list
   =========================================================================== */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.insight-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border-inline-start: 0.25rem solid var(--color-info);
}

.insight-item--success { border-inline-start-color: var(--color-success); }
.insight-item--warning { border-inline-start-color: var(--color-warning); }
.insight-item--info    { border-inline-start-color: var(--color-info); }

.insight-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--color-info-bg);
  color: var(--color-info);
}

.insight-item--success .insight-icon {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.insight-item--warning .insight-icon {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.insight-body {
  min-width: 0;
}

.insight-body h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

.insight-body p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* ===========================================================================
   13. Export wizard
   =========================================================================== */
.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.wizard-steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-tertiary);
}

.wizard-step-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: var(--radius-full);
  border: 0.125rem solid var(--border-secondary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.wizard-step.active {
  color: var(--text-primary);
}

.wizard-step.active .wizard-step-number {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--text-inverse);
}

.wizard-step.completed .wizard-step-number {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--text-inverse);
}

.wizard-step-divider {
  flex: 1;
  min-width: 1.5rem;
  height: 0.125rem;
  background: var(--border-primary);
}

@media (max-width: 40rem) {
  .wizard-step-divider {
    display: none;
  }
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

/* ===========================================================================
   14. Export cards
   =========================================================================== */
.export-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .export-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .export-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.export-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  min-height: 2.75rem;
  background: var(--bg-elevated);
  border: 0.125rem solid var(--border-primary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .export-card:hover {
    border-color: var(--border-secondary);
  }
}

.export-card:focus-within {
  outline: 0.1875rem solid var(--border-focus);
  outline-offset: 0.125rem;
}

.export-card:has(.export-checkbox:checked) {
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
}

/* Visually hide the checkbox but keep it focusable */
.export-checkbox {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  margin: 0;
}

/* Visible check badge in the corner when selected */
.export-card:has(.export-checkbox:checked)::after {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: var(--spacing-sm);
  inset-inline-end: var(--spacing-sm);
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-xs);
}

.export-card h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}

.export-card p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.export-card-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  font-size: var(--font-size-xl);
  background: var(--color-info-bg);
  color: var(--color-brand-primary);
}

.export-card-icon--primary   { background: var(--color-info-bg);    color: var(--color-brand-primary); }
.export-card-icon--success   { background: var(--color-success-bg); color: var(--color-success); }
.export-card-icon--info      { background: var(--color-info-bg);    color: var(--color-info); }
.export-card-icon--warning   { background: var(--color-warning-bg); color: var(--color-warning); }
.export-card-icon--danger    { background: var(--color-error-bg);   color: var(--color-error); }
.export-card-icon--secondary { background: var(--bg-tertiary);      color: var(--text-secondary); }

.export-size {
  margin-top: auto;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   15. Radio cards + form bits (format & options, preview)
   =========================================================================== */
.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
}

.form-fieldset legend {
  padding-inline: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

.form-fieldset > label[for] {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.radio-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-height: 2.75rem;
  padding: var(--spacing-md);
  border: 0.125rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.radio-card:has(input:checked) {
  border-color: var(--color-brand-primary);
  background: var(--color-info-bg);
}

.radio-card:focus-within {
  outline: 0.1875rem solid var(--border-focus);
  outline-offset: 0.125rem;
}

.radio-card > i {
  font-size: var(--font-size-xl);
  color: var(--text-secondary);
  width: 1.75rem;
  text-align: center;
}

.radio-card strong {
  display: block;
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.radio-card span {
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}

.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 2.75rem;
  color: var(--text-primary);
  cursor: pointer;
}

.summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.summary-list label {
  color: var(--text-secondary);
}

.summary-list .summary-value {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.code-preview {
  max-height: 20rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.code-preview .empty-state {
  padding: var(--spacing-lg);
}

/* ===========================================================================
   16. Utilities the templates use but shared CSS lacks
   =========================================================================== */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--text-secondary);
}

/* Small select sized for card-actions (double-dash variant is undefined in
   shared forms.css, which only ships .form-select-sm). Auto width so it does
   not stretch across the card header. */
.form-select--sm {
  width: auto;
  min-height: 2.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
}

/* .btn-success is referenced by export.html's "Start Export" but is missing
   from components.css — define it here in the shared button idiom. */
.btn-success {
  background-color: var(--color-success);
  color: var(--text-inverse);
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* ===========================================================================
   17. Accessibility: visible keyboard focus + reduced-motion
   =========================================================================== */
.stat-card:focus-visible,
.health-item:focus-visible,
.data-table tbody tr:focus-visible {
  outline: 0.1875rem solid var(--border-focus);
  outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .export-card,
  .radio-card,
  .progress-bar-fill {
    transition: none;
  }

  .stat-card:hover {
    transform: none;
  }

  .status-dot--live::after,
  .activity-stream > *:not(.empty-state),
  .empty-state--loading i {
    animation: none;
  }
}