/* Load after base rules so equal-specificity responsive overrides win. */


@media (max-width: 900px) {
  .page-corner-decor { display: none; }
}
@media (max-width: 900px) {
  .home-tire-track { display: none; }
}
@media (max-width: 900px) {
  .tire-track-rail { display: none; }
}

@media (max-width: 620px) {
  .fo-driver { padding: 24px; grid-template-columns: 1fr; }
  .fo-driver-id { align-items: flex-start; gap: 14px; }
  .fo-driver .fo-avatar { width: 56px; height: 56px; }
  .fo-stats { grid-template-columns: 1fr; }
  .fo-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 20px; }
  .fo-stat strong { font-size: 1.6rem; }
}


@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .account-name { display: none; }
  .account-trigger { padding: 6px; border: none; }
  .nav-account-guest { display: none; }
}

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; gap: var(--gap-xl); }
  .auth-context {
    padding-right: 0;
    padding-bottom: var(--gap-xl);
    border-right: 0;
    border-bottom: var(--border-w) solid var(--fo-line);
  }
  .auth-form-panel { max-width: none; }
  .rules-layout { grid-template-columns: 1fr; gap: var(--gap-32); }
  .rules-nav { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-nav-title { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .site-header-inner { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .brand-logo { height: 36px; max-width: 154px; }
  .site-main { padding-top: var(--gap-lg); padding-bottom: var(--gap-xl); }
  .site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .footer-about { min-width: 0; }
  .site-footer-bottom { align-items: center; flex-direction: row; gap: var(--gap-md); }
  .footer-disclaimer { max-width: 250px; }
  h1 { font-size: var(--fs-h1-sm); }
  h2 { margin-top: var(--gap-lg); }
  .page-heading { margin-bottom: var(--gap-lg); }
  .page-description { font-size: var(--fs-body); }
  .auth-page-head { margin-bottom: var(--gap-lg); }
  .auth-layout { gap: var(--gap-lg); padding: var(--gap-lg) 0; }
  .auth-context { padding-bottom: var(--gap-lg); }
  .auth-feature-list { gap: var(--gap-md); margin-top: var(--gap-lg); }
  .auth-form .fo-btn[type=submit] { width: 100%; }
  .page-meta { align-items: flex-start; flex-direction: column; gap: var(--gap-xs); }
  .meta-item + .meta-item::before { display: none; }
  .stat-grid { gap: var(--gap-sm); }
  .match-score { grid-template-columns: 1fr auto 1fr; gap: var(--gap-sm); font-size: var(--fs-ui); }
  .stat-card { padding: var(--gap-12); }
  .stat-value { font-size: 20px; }
  .rules-principles, .rules-case-grid { grid-template-columns: 1fr; }
  .rules-principles > div { min-height: 0; padding: var(--gap-md); }
  .rules-section { grid-template-columns: 32px minmax(0, 1fr); gap: var(--gap-sm); }
  .rules-sidebar { min-width: 0; }
  .rules-nav {
    display: flex; flex-direction: row; gap: var(--gap-sm); overflow-x: auto;
    padding: var(--gap-sm); scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  .rules-nav-title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .rules-nav a {
    flex: 0 0 auto; grid-template-columns: auto auto; white-space: nowrap;
    background: var(--fo-surface-hover); border: var(--border-w) solid var(--fo-line);
  }
  .scoring-formula { grid-template-columns: 1fr; }
  .scoring-formula > b { transform: rotate(90deg); }
  .scoring-formula > span { min-height: 0; }
  .rules-footer-cta { align-items: stretch; flex-direction: column; }
  .rules-footer-cta .fo-btn { text-align: center; }
  .fo-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-pagination-info { grid-column: 1 / -1; grid-row: 1; }
  .fo-page-list { display: none; }
  .fo-page--arrow { width: 100%; }
  .sav-intro { align-items: flex-start; flex-direction: column; gap: var(--gap-sm); }
  .nickname-table, .nickname-table tbody, .nickname-table tr, .nickname-table td { display: block; width: 100%; }
  .nickname-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .nickname-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-sm) var(--gap-md);
    padding: var(--gap-md); border-top: var(--border-w) solid var(--fo-line);
  }
  .nickname-table tr:first-child { border-top: none; }
  .nickname-table td { height: auto; padding: 0; border: 0; }
  .nickname-table .nickname-name { min-width: 0; font-weight: 600; }
  .nickname-table .nickname-name a { overflow-wrap: anywhere; }
  .nickname-table .nickname-races { color: var(--fo-muted); font-size: var(--fs-small); }
  .nickname-table .nickname-status { width: auto; }
  .nickname-table .nickname-download { grid-column: 1 / -1; margin-top: var(--gap-xs); }
  .nickname-table .sav-download { justify-content: center; width: 100%; }
  .nickname-table .nickname-actions { grid-column: 1 / -1; }
  .nickname-table .nickname-actions-row button { flex: 1; }
  .mobile-label { display: inline; }
  .card { padding: var(--gap-md); }
  .home-intro { padding: var(--gap-lg) var(--gap-md); }
  .page-art { display: none; }
  details.card > summary { padding: var(--gap-sm) var(--gap-md); }
  details.card > .card-body { padding: var(--gap-sm) var(--gap-md) var(--gap-md); }
  .field-grid, .filter-grid { grid-template-columns: 1fr; }
  .filter-actions { width: 100%; }
  .filter-actions .fo-btn { flex: 1; }
  .list-item { padding: var(--gap-12) var(--gap-md); }
  .nick { max-width: 180px; }
  dialog:not(.nav-dialog) { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .fo-dialog-head, .fo-dialog-body, .fo-dialog-actions { padding-left: var(--gap-md); padding-right: var(--gap-md); }
  .fo-dialog-actions > button, .fo-dialog-actions > .btn, .fo-dialog-actions > a { flex: 1; }
  .delete-impact-grid { grid-template-columns: 1fr; }
}

@media (pointer: coarse) {
  th, td { padding-top: 12px; padding-bottom: 12px; }
}