/* Shared finishing rules, built last for every template. Brand tokens stay intact. */
:root {
  --site-gutter: var(--layout-gutter);
  --section-offset: var(--anchor-offset)
}
html {
  scroll-padding-top: var(--section-offset)
}
header.nav.site-header {
  display: flex;
  min-height: 0;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-4) var(--site-gutter);
  box-sizing: border-box;
  gap: var(--space-5);
  flex-wrap: wrap
}
.shell>.site-header {
  padding-inline: 0
}
.site-header .site-nav,.site-header .nav-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap
}
.site-header .nav-account {
  margin-left: auto
}
.site-header .site-nav a,.site-header .nav-account :is(a,button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box
}
.site-header .site-nav a[aria-current=page] {
  color: var(--navy,var(--color-text));
  font-weight: 750;
  box-shadow: none;
  text-decoration: none;
  border-bottom-color: transparent
}
.site-header a:focus-visible,.edition-distance-links a:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 3px
}
.discovery-home .wise-welcome {
  padding-block: var(--space-6) var(--space-4);
  min-height: 0;
  gap: var(--space-6)
}
.discovery-home .wise-welcome h1 {
  font-size: clamp(2rem,4.2vw,3.8rem);
  line-height: 1.08;
  margin-block: var(--space-2) var(--space-3)
}
.discovery-home .wise-welcome-art {
  margin-block: 0;
  max-width: 155px
}
.discovery-home .wise-welcome-art img {
  height: 170px;
  width: auto;
  max-width: 100%;
  object-fit: contain
}
.discovery-home .wise-welcome-art figcaption {
  display: none
}
.discovery-home .search-panel {
  margin-block: var(--space-2) 0
}
.more-discovery {
  margin: 0 0 var(--space-4);
  border-bottom: 1px solid var(--color-border)
}
.more-discovery .experience-browse {
  margin-top: var(--space-3)
}
.more-discovery .search-invitations {
  margin-block: var(--space-3)
}
.discovery-home #races {
  padding-top: var(--space-3)
}
.edition-distance-links {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-1)
}
.edition-distance-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none
}
.edition-distance-links a:hover {
  background: var(--color-surface-subtle)
}
.past-edition-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--color-border-strong);
  background: var(--soft);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4
}
.race-heading-meta .past-edition-badge {
  align-self: center
}
.race-page [id^=race] {
  scroll-margin-top: var(--section-offset)
}
.race-page .race-planning-more {
  margin-block: var(--space-3)
}
.race-page .race-planning-essentials:empty {
  display: none
}
.fact-note {
  margin-block: var(--space-1);
  color: var(--color-text-muted);
  font-size: 14px
}
.fact-note summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2)
}
.fact-note summary::before {
  content: '▸'
}
.fact-note[open] summary::before {
  content: '▾'
}
.fact-note p {
  margin-block: var(--space-1) var(--space-2)
}
.photo-credit>summary,.race-page .race-showcase-media>.photo-credit>summary,.club-profile-page .club-profile-hero .photo-credit summary,.destination-item .photo-credit summary {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-block: var(--space-2)
}
.race-page .race-showcase-media>.photo-credit {
  max-width: min(360px,calc(100% - 24px))
}
.entry-panel-inner>.btn {
  width: 100%;
  margin-block: var(--space-1);
  box-sizing: border-box;
  white-space: normal;
  text-align: center
}
.collection-hero {
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-4)
}
.collection-hero h1 {
  font-size: clamp(2rem,4vw,3rem);
  margin-block: var(--space-2) var(--space-3)
}
.collection-hero .collection-intro {
  font-size: 1.05rem;
  line-height: 1.5
}
.collection-hero .collection-actions {
  margin-top: var(--space-3)
}
.collection-basis {
  margin-block: var(--space-3) var(--space-5)
}
.collection-note summary,.collection-privacy summary {
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2)
}
.collection-note summary::before,.collection-privacy summary::before {
  content: '▸'
}
.collection-reason {
  color: var(--color-text)
}
.collection-comparison {
  padding: var(--space-4) var(--space-5)
}
.has-selection .collection-comparison {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px,calc(100% - 32px));
  box-sizing: border-box;
  z-index: 20;
  border: 1px solid var(--color-success-border);
  box-shadow: var(--elevation-panel);
  margin-top: var(--space-4)
}
.has-selection .collection-comparison h2 {
  font-size: 1.1rem;
  margin-bottom: var(--space-1)
}
.has-selection .collection-comparison .collection-privacy {
  display: none
}
.has-selection .collection-comparison .collection-actions {
  margin-top: var(--space-1)
}
.collection-page:has(.has-selection) {
  padding-bottom: var(--space-16)
}
.collection-select {
  scroll-margin-bottom: 180px
}
.not-found {
  position: relative;
  max-width: 850px;
  padding-block: var(--space-12);
  min-height: 380px
}
.not-found h1 {
  font: 700 clamp(2rem,4vw,3.4rem)/1.15 Georgia,serif;
  max-width: 650px
}
.not-found p {
  max-width: 560px;
  line-height: 1.6
}
.not-found img {
  max-width: 130px;
  height: auto;
  margin-top: var(--space-6)
}
.recovery-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6)
}
.account-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-6);
  width: min(360px,calc(100vw - 64px))
}
.account-menu::backdrop {
  background: var(--color-backdrop)
}
.account-menu nav {
  display: grid;
  gap: var(--space-3)
}
.account-menu button,.account-menu a {
  min-height: 44px
}
@media(max-width:768px){
:root {
  --section-offset: var(--anchor-offset-compact)
}
.site-header {
  gap: var(--space-2);
  padding-block: var(--space-3)
}
.site-header .brand-logo {
  width: 140px;
  height: auto
}
.site-header .site-nav {
  order: 3;
  width: 100%;
  justify-content: center
}
.site-header .nav-account {
  gap: var(--space-1)
}
.site-header .nav-account a {
  padding-inline: var(--space-2);
  font-size: 13px
}
.discovery-home .wise-welcome-art {
  max-width: 100px
}
.discovery-home .wise-welcome-art img {
  height: 130px
}
.collection-hero {
  padding: var(--space-5)
}
.has-selection .collection-comparison {
  bottom: 8px;
  padding: var(--space-3)
}
.has-selection .collection-comparison .collection-actions {
  gap: var(--space-2)
}
.collection-page:has(.has-selection) {
  padding-bottom: var(--space-16)
}
.collection-select {
  scroll-margin-bottom: 230px
}
}
@media(max-width:390px){
.site-header .brand-logo {
  width: 116px
}
.site-header .nav-account a {
  font-size: 12px;
  padding-inline: var(--space-1)
}
.discovery-home .wise-welcome-art {
  max-width: 80px
}
.discovery-home .wise-welcome-art img {
  height: 110px
}}
@media(prefers-reduced-motion:reduce){
html {
  scroll-behavior: auto
}
.race-page * {
  scroll-behavior: auto!important
}}
html:has(.has-selection) {
  scroll-padding-bottom: 240px
}
.has-selection :focus-visible {
  scroll-margin-bottom: 240px
}
.seo-page>h1 {
  font-size: clamp(2rem,4vw,3rem);
  margin-block: var(--space-3) var(--space-4)
}
.guide-basis {
  margin-block: var(--space-3)
}
.guide-basis>summary,.guide-help>summary {
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 650
}
.guide-help {
  margin-block: var(--space-4)
}

/* The app header keeps its event handlers and shares the static header geometry. */
.site-header .site-nav a {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 0;
  font-size: 16px;
  white-space: nowrap
}
.site-header .site-nav a[aria-current=page]::after {
  display: none
}
.discovery-home .site-header .nav-account .btn {
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  border-radius: var(--radius-pill,var(--radius-pill))
}
@media(max-width:768px){
header.nav.site-header {
  gap: var(--space-2);
  padding-block: var(--space-3)
}
.discovery-home .site-header .nav-account .btn {
  padding-inline: var(--space-2);
  font-size: 13px
}}
@media(max-width:390px){
.discovery-home .site-header .nav-account .btn {
  padding-inline: var(--space-1);
  font-size: 12px
}}

/* Reserve separate rows on compact screens; never squeeze discovery into the logo row. */
@media(max-width:900px){
header.nav.site-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas: "brand account" "explore explore";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3)
}
header.site-header .brand-logo-link {
  grid-area: brand;
  min-width: 0;
  justify-self: start
}
header.site-header .brand-logo {
  width: 140px;
  max-width: 100%;
  height: auto
}
header.site-header .nav-account {
  grid-area: account;
  min-width: 0;
  margin-left: 0;
  justify-self: end;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-content: flex-end
}
header.site-header .nav-account :is(a,button) {
  font-size: 13px;
  padding: var(--space-2) var(--space-2);
  white-space: nowrap
}
header.site-header .site-nav {
  grid-area: explore;
  position: static;
  transform: none;
  width: 100%;
  min-width: 0;
  margin: 0;
  justify-self: stretch;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap
}
header.site-header .site-nav a {
  font-size: 14px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none
}
}
@media(max-width:390px){
header.site-header .brand-logo {
  width: 112px
}
header.site-header .nav-account :is(a,button) {
  font-size: 12px;
  padding-inline: var(--space-1)
}
header.site-header .site-nav {
  gap: var(--space-2)
}
}
@media(max-width:340px){
header.nav.site-header {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "brand" "account" "explore"
}
header.site-header .brand-logo-link,header.site-header .nav-account {
  justify-self: center
}
}

/* Edition distance links remain independent of the card title hit target. */
.race-edition-card .card-title-open:after{content:none}

/* Product experience system: shared roles across every public template.
   Keep layout in CSS, behavior in the existing controllers, and evidence in
   the source renderers. These rules introduce no remote assets or scripts. */
body { font:var(--type-body); }
.shell,:is(.discovery-home,.club-profile-page,.static-page) .shell { max-width:var(--layout-shell); padding-inline:var(--layout-gutter); }
.discovery-home .race-page { width:calc(100% - var(--layout-gutter)*2); max-width:calc(var(--layout-shell) - var(--layout-gutter)*2); padding-inline:0; }
header.nav.site-header { max-width:var(--layout-shell); padding-block:var(--space-4); gap:var(--space-5); }
.site-header .site-nav a[aria-current=page] {
  background:var(--soft); color:var(--color-text); border-radius:var(--radius-control);
}
.site-header .nav-account :is(a,button) { border-radius:var(--radius-control); }
body :is(a,button,input,select,textarea,summary):focus-visible {
  outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset);
}
.btn,.form button,.signin-primary,.signin-secondary,.collection-page .collection-button,.collection-page button {
  min-height:var(--control-default); border-radius:var(--radius-control);
  padding:var(--space-3) var(--space-4); font:var(--type-label);
  white-space:normal; overflow-wrap:anywhere;
  transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease);
}
.btn.dark,.btn.lime,.form button[type=submit],.signin-primary,.collection-page .collection-button:not(.collection-secondary),.collection-page button:not(.collection-secondary) {
  background:var(--color-action); border-color:var(--color-action); color:var(--color-on-action);
}
.btn.dark:hover:not(:disabled),.form button[type=submit]:hover:not(:disabled),.signin-primary:hover:not(:disabled),.collection-page .collection-button:not(.collection-secondary):hover,.collection-page button:not(.collection-secondary):hover:not(:disabled) {
  background:var(--color-action-hover); border-color:var(--color-action-hover);
}
.btn.soft,.signin-secondary,.collection-page .collection-secondary {
  background:transparent; color:var(--color-text); border-color:var(--color-border-strong);
}
button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
body :is(.form,.signin-content,.club-manager,.club-community,.collection-manual,.journal-panel) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) {
  min-height:var(--control-default); min-width:0; max-width:100%;
  border:1px solid var(--color-border-strong); border-radius:var(--radius-control);
  background:var(--color-surface-raised); color:var(--color-text);
  padding:var(--space-3) var(--space-4); font:var(--type-body);
}
body :is(.form,.signin-content,.club-manager) [aria-invalid=true] { border-color:var(--color-danger); }
.form label,.club-manager label,.signin-content label { font:var(--type-label); }
.form { gap:var(--space-4); }
.form textarea,.club-manager textarea { resize:vertical; }
.signin-content :is(h2),.account-menu h2 { font:var(--type-h2); }
.signin-header { padding:var(--space-6) var(--space-6) var(--space-3); }
.signin-content { padding:var(--space-2) var(--space-6) var(--space-6); }
.sign-in-dialog,.account-menu { border-radius:var(--radius-panel); box-shadow:var(--elevation-panel); }
.signin-content .signin-error,.signin-warning {
  background:var(--color-warning-surface); color:var(--color-danger);
  border-color:var(--color-warning-border); border-radius:var(--radius-control); padding:var(--space-3) var(--space-4);
}
.journal-panel { padding:var(--space-6); border-radius:var(--radius-panel); box-shadow:var(--elevation-panel); }
.journal-panel h2 { font:var(--type-h2); }
.journal-panel button {
  min-height:var(--control-default); padding:var(--space-3) var(--space-4); margin:var(--space-1);
  border-radius:var(--radius-control); border-color:var(--color-border-strong); font:var(--type-label);
  white-space:normal; overflow-wrap:anywhere;
}
.journal-panel form { gap:var(--space-4); margin-block:var(--space-5); }
.journal-panel form button:not([type=button]) { background:var(--color-action); border-color:var(--color-action); color:var(--color-on-action); }
.journal-panel details>summary { min-height:var(--control-min); padding-block:var(--space-3); cursor:pointer; }

/* Comfortable discovery density; one search action, subordinate exploration. */
.discovery-home .wise-welcome { padding:var(--space-8); gap:var(--space-8); }
.discovery-home .wise-welcome h1 { font:var(--type-display); margin:var(--space-2) 0 var(--space-3); }
.discovery-home .search-panel { margin-block:var(--space-4) var(--space-6); }
.discovery-home .search-refinements>summary { min-height:var(--control-min); }
.discovery-home .collection-track { gap:var(--space-6); }
.discovery-home :is(.race-result-card,.club-card) .body { gap:var(--space-2); padding-top:var(--space-4); }
.discovery-home :is(.race-result-card,.club-card) .body h3 { font-size:1.125rem; line-height:1.4; }
.discovery-home .collection-heading h2,.discovery-home .sectionhead h2 { font:var(--type-h2); }
.discovery-home .collection-home { margin-block:var(--space-12); padding-block:var(--space-8); }

/* Race and club pages share a readable hero, an action rail and fact rhythm. */
.discovery-home [data-detail-hero] {
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  background:var(--color-surface-subtle); margin-bottom:var(--space-6);
}
.discovery-home [data-detail-hero] [data-detail-copy] { width:100%; padding:var(--space-8); }
.discovery-home [data-detail-hero] [data-detail-copy] h1 { font:var(--type-h1); margin-bottom:var(--space-6); }
.discovery-home [data-detail-hero] [data-detail-media] {
  position:relative; inset:auto; width:100%; height:100%; min-height:240px;
}
.discovery-home [data-detail-media]::after { display:none; }
.discovery-home .club-detail-masthead--text { grid-template-columns:minmax(0,1fr); }
.discovery-home [data-detail-copy] .race-heading-meta { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.discovery-home [data-detail-copy] .race-heading-item { border-top:1px solid var(--color-border); padding-top:var(--space-3); }
.discovery-home [data-detail-copy] .race-heading-label { font:var(--type-label); color:var(--color-text-muted); letter-spacing:0; text-transform:none; }
.discovery-home [data-detail-copy] .race-heading-value { font:var(--type-body); font-weight:650; }
.discovery-home [data-detail-layout] { grid-template-columns:minmax(0,1fr) minmax(280px,var(--layout-action)); gap:var(--space-8); }
.discovery-home [data-detail-layout] [data-detail-action-card] { padding:var(--space-6); border-radius:var(--radius-panel); box-shadow:var(--elevation-control); }
.discovery-home [data-detail-action-card] :is(.entry-panel-action,[data-official-participation]) {
  min-height:var(--control-default); margin-block:var(--space-4) var(--space-3); padding:var(--space-3) var(--space-4);
  background:var(--color-action); border-color:var(--color-action); color:var(--color-on-action); font:var(--type-label);
}
.discovery-home [data-detail-main]>section { margin-bottom:var(--space-8); padding-bottom:var(--space-8); }
.discovery-home [data-detail-main] h2 { font:var(--type-h2); margin-bottom:var(--space-4); }
.discovery-home [data-detail-main] h3 { font-size:1.25rem; line-height:1.35; }
.discovery-home [data-detail-facts] { gap:var(--space-3); margin-bottom:var(--space-6); }
.discovery-home [data-detail-facts]>div { padding:var(--space-4); }
.discovery-home [data-detail-facts] dt { font:var(--type-label); text-transform:none; letter-spacing:0; }
.discovery-home [data-detail-main] p,.discovery-home [data-detail-supporting] p { max-width:var(--layout-reading); }
.discovery-home [data-detail-supporting] .club-primary-link {
  background:transparent; color:var(--color-text); border:1px solid var(--color-border-strong);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-control);
}
.discovery-home :is([data-detail-main],[data-detail-supporting]) details>summary { min-height:var(--control-min); padding-block:var(--space-3); }
.race-page .decision-warning {
  background:var(--color-warning-surface); border:1px solid var(--color-warning-border); color:var(--color-warning-text);
  border-radius:var(--radius-control); padding:var(--space-4); margin-block:var(--space-4);
}
.race-page .decision-warning p { margin:0; }
.race-page .decision-warning ul { margin:var(--space-2) 0 0; padding-left:var(--space-4); }
.race-page .decision-warning a { color:inherit; min-height:var(--control-min); display:inline-flex; align-items:center; }
.past-edition-badge { border-radius:var(--radius-control); font:var(--type-label); background:var(--soft); }

/* Guides, directories, collections and utility forms use the same text roles. */
.static-page .static-content,.seo-page,.collection-page { max-width:var(--layout-content); }
.static-page .static-content h1,.seo-page>h1,.collection-hero h1,.club-manager h1,.media-suggestion-page h1,.not-found h1 { font:var(--type-h1); margin-block:var(--space-6); }
.static-page .static-content h2,.seo-page h2,.club-manager h2 { font:var(--type-h2); }
.static-page .static-content p,.seo-page>p,.seo-page section>p,.legal-page :is(p,ul,ol) { max-width:var(--layout-reading); }
.collection-hero { padding:var(--space-8); background:var(--color-surface-subtle); border-color:var(--color-border); border-radius:var(--radius-panel); }
.collection-grid { gap:var(--space-6); }
.collection-grid>li,.profile.seo-page.static-content .seo-options>li {
  padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-panel);
}
.collection-grid :is(h2,h3) { font-size:1.25rem; line-height:1.35; }
.collection-page .collection-select input { accent-color:var(--color-action); }
.collection-page .collection-manual input { border-color:var(--color-border-strong); }
.collection-comparison { background:var(--color-success-surface); border-radius:var(--radius-panel); }
.half-jump,.guide-checklist { padding:var(--space-6); border-radius:var(--radius-panel); background:var(--color-surface-subtle); }
.half-jump a { border-radius:var(--radius-control); padding:var(--space-2) var(--space-3); color:var(--color-text); border-color:var(--color-border-strong); }
.club-manager,.media-suggestion-page {
  max-width:var(--layout-content); margin:var(--space-8) auto var(--space-12); padding-inline:var(--layout-gutter);
}
.club-manager>p,.media-suggestion-page>p { max-width:var(--layout-reading); }
.club-manager>form,.media-suggestion-page>form { max-width:var(--layout-form); margin-block:var(--space-6); }
.club-manager section { padding-block:var(--space-8); border-color:var(--color-border); }
.club-manager form { margin-block:var(--space-5) var(--space-8); }
.club-manager details { border-color:var(--color-border); border-radius:var(--radius-control); padding:var(--space-2) var(--space-4); }
.club-manager .club-setup { padding:var(--space-6)!important; border-radius:var(--radius-panel); background:var(--color-surface-subtle); }
.club-manager .club-add-record,.club-manager [data-save-feedback] { background:var(--color-success-surface); }
.site-footer { margin-top:var(--space-12); padding-block:var(--space-8); }
.site-footer-group a { min-height:var(--control-min); display:flex; align-items:center; }

@media(max-width:900px) {
  .discovery-home [data-detail-hero] { grid-template-columns:minmax(0,1fr); }
  .discovery-home [data-detail-hero] [data-detail-copy] { padding:var(--space-6); }
  .discovery-home [data-detail-hero] [data-detail-media] { height:160px; min-height:0; }
  .discovery-home [data-detail-layout] { gap:var(--space-6); }
  .discovery-home [data-detail-layout] [data-detail-action-card] { padding:var(--space-6); }
  .discovery-home [data-detail-copy] .race-heading-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px) {
  .discovery-home .wise-welcome { padding:var(--space-5); gap:var(--space-3); }
  .discovery-home [data-detail-hero] [data-detail-copy],.collection-hero { padding:var(--space-5); }
  .discovery-home [data-detail-copy] :is(.race-heading-value,.race-heading-label) { overflow-wrap:anywhere; }
  .collection-grid>li { padding:var(--space-5); }
  .club-manager,.media-suggestion-page { margin-block:var(--space-6) var(--space-8); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}