/* Loaded last: both media queries here override rules declared in the
 * other stylesheets (base.css's :root tokens, typing-test.css's
 * #test-area, stats.css's .stat, certification.css's .cert-stat-group dl),
 * so this file's <link> must come after theirs in index.html for the
 * cascade to resolve the way it reads here. */
@media (max-width: 600px) {
  #test-config {
    align-items: stretch;
    flex-direction: column;
  }

  #restart-btn {
    align-self: flex-start;
  }

  .test-area-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }

  #test-focus-detail {
    text-align: left;
  }

  #typing-legend {
    column-gap: 0.7rem;
  }

  #stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cert-stat-group dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7;
    --panel-bg: #ffffff;
    --text: #1b1d22;
    --muted: #6b7280;
    --panel-border: rgba(27, 29, 34, 0.12);
  }

  #test-area,
  .stat {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  #raw-state-panel {
    background: #12141a;
  }
}