/* Site-wide refinement layer: rhythm, accessibility, touch targets, and responsive polish. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: clamp(32px, 5vw, 64px);
  --space-panel: clamp(20px, 3vw, 32px);
  --space-inline: clamp(16px, 2.4vw, 32px);
  --color-action-text: #a83b1d;
  --focus-color: #0d5f60;
  --sticky-global-offset: 98px;
  --sticky-local-offset: 150px;
}

html { scroll-padding-top: var(--sticky-global-offset); }
body:has(.community-local-nav),
body:has(.tools-local-nav) { scroll-padding-top: var(--sticky-local-offset); }

p, li { line-height: 1.65; }
.meta,
.meta-note,
.community-summary-strip span,
.community-activity-row span,
.home-v2 .home-community-links span,
.ranking-v2 .ranking-progression small { line-height: 1.45; }
.eyebrow,
.hero-kicker,
.panel-title {
  font-size: max(.75rem, 12px);
  color: var(--color-action-text);
}

.community-local-nav a[aria-current="page"],
.community-local-nav a:hover,
.tools-local-nav a[aria-current="page"],
.tools-local-nav a:hover,
.community-profile-back:hover,
.community-destination .destination-link,
.community-directory-results .community-person-cta,
.tools-hub .tool-entry .tool-cta,
.home-v2 .home-run-preview > span,
.home-v2 .home-steps li::before,
.ranking-v2 .player-cell a:hover { color: var(--color-action-text); }

.button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-color) !important;
  outline-offset: 3px;
}
.topbar a:focus-visible,
.topbar button:focus-visible,
.topbar summary:focus-visible { outline-color: #8bd3d4 !important; }

.nav a,
.site-nav-toggle,
.button,
button.button,
.community-local-nav a,
.tools-local-nav a,
.community-profile-back,
.command-copy,
.ranking-v2 .ranking-sort-button,
.community-account-menu summary { min-height: 44px; }

.community-local-nav,
.tools-local-nav {
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
}
.community-local-nav a,
.tools-local-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 3px solid transparent;
  font-size: .875rem;
}
.community-local-nav a[aria-current="page"],
.tools-local-nav a[aria-current="page"] { border-bottom-color: var(--color-action); }
.community-profile-back {
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}
.command-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: .75rem;
}

.home-v2 .home-section,
.community-page-section { padding-block: var(--space-section); }
.home-v2 .home-section-head,
.community-page-section .section-head,
.ranking-v2 .ranking-standings-head { margin-bottom: var(--space-5); }
.home-v2 .home-role-grid,
.community-directory-results,
.tools-hub .tools-grid { gap: var(--space-4); }
.home-v2 .home-role-card,
.community-destination,
.tools-hub .tool-entry,
.community-board-action { padding: var(--space-panel); }

.home-v2 .home-hero h1 { line-height: .99; }
.home-v2 .home-hero-actions .button { min-width: 150px; }

[id] { scroll-margin-top: var(--sticky-global-offset); }
body:has(.community-local-nav) [id],
body:has(.tools-local-nav) [id] { scroll-margin-top: var(--sticky-local-offset); }

@media (max-width: 640px) {
  .ranking-v2 .ranking-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .ranking-v2 #leaderboard {
    min-width: 0;
    display: block;
    background: transparent;
  }
  .ranking-v2 #leaderboard thead {
    display: block;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    overflow-x: auto;
    background: var(--color-ink);
  }
  .ranking-v2 #leaderboard thead tr {
    display: flex;
    min-width: max-content;
  }
  .ranking-v2 #leaderboard thead th {
    display: block;
    width: auto;
    flex: 0 0 auto;
  }
  .ranking-v2 #leaderboard thead th:first-child { display: none; }
  .ranking-v2 #leaderboard .ranking-sort-button {
    width: auto;
    min-width: 104px;
  }
  .ranking-v2 #leaderboard tbody,
  .ranking-v2 #leaderboard tbody tr,
  .ranking-v2 #leaderboard tbody td {
    display: block;
    width: 100%;
  }
  .ranking-v2 #leaderboard tbody {
    display: grid;
    gap: var(--space-3);
  }
  .ranking-v2 #leaderboard tbody tr {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(251,247,239,.82);
  }
  .ranking-v2 #leaderboard tbody td {
    display: grid;
    grid-template-columns: minmax(96px, .72fr) minmax(0, 1.28fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-2) 0;
    border: 0;
    text-align: left !important;
  }
  .ranking-v2 #leaderboard tbody td::before {
    color: var(--color-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .ranking-v2 #leaderboard tbody td:nth-child(1)::before { content: "Rank"; }
  .ranking-v2 #leaderboard tbody td:nth-child(2)::before { content: "Player"; }
  .ranking-v2 #leaderboard tbody td:nth-child(3)::before { content: "Score"; }
  .ranking-v2 #leaderboard tbody td:nth-child(4)::before { content: "Essence"; }
  .ranking-v2 #leaderboard tbody td:nth-child(5)::before { content: "Progression"; }
  .ranking-v2 #leaderboard tbody td:nth-child(6)::before { content: "Brand Ranks"; }
  .ranking-v2 #leaderboard .player-cell {
    padding-top: 0;
    font-size: 1.08rem;
  }
  .ranking-v2 #leaderboard .ranking-score { font-size: 1.05rem; }
  .ranking-v2 #leaderboard tbody tr.rank-1,
  .ranking-v2 #leaderboard tbody tr.rank-2,
  .ranking-v2 #leaderboard tbody tr.rank-3 { border-color: rgba(196,73,38,.22); }
}

@media (max-width: 760px) {
  :root {
    --sticky-global-offset: 78px;
    --sticky-local-offset: 124px;
  }
  .community-local-nav,
  .tools-local-nav { margin-inline: -2px; }
  .community-local-nav a,
  .tools-local-nav a { padding-inline: var(--space-3); }
  .home-v2 .home-section,
  .community-page-section { padding-block: var(--space-6); }
  .home-v2 .home-hero,
  .tools-hub .tools-hero,
  .ranking-v2 .ranking-header { gap: var(--space-5); }
}

@media (max-width: 420px) {
  .community-account-menu summary {
    min-width: 44px;
    justify-content: center;
  }
  .home-v2 .home-hero-actions .button,
  .home-v2 .home-season .button { width: 100%; }
}