/* Hallmark · shape: Index-First, the member directory with a page per country and the contact desk · genre: editorial · theme: custom (design.md) · job: attend · idea: "Every member nation as a plate: its NOC code set huge, one tap from its officials and contacts." · vibe: "arena-dark, poster-loud, scoreboard-exact"
 * paper: oklch(98.5% 0.004 91.4) · accent: oklch(43.3% 0.178 29.2) · display: Barlow Condensed 800 · body: Inter · hero: poster, the lead story's photograph full-bleed with the head low-left; the live centre while a championship runs · nav: slab, a red bar on a yellow rule · footer: mast, the logo large over the offices · imagery: photographs, AWF's own · signature: the results desk, medals set like a scoreboard
 * axes: warm-paper/condensed-caps/red-yellow · posture: full palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a directory is a list by nature; each entry became a plate with its NOC code set huge so the list reads as the roll call of Asian weightlifting */

/* Loaded on every page after site.css: every selector here is scoped to fed-, contact- or a section of these templates. */

/* ---------- Directory: the arena head ---------- */
.fed-head { padding-block: var(--space-2xl) var(--space-xl); }
.fed-head__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: end; }
.fed-head__title { max-width: 12ch; }
.fed-head__lead { max-width: 34ch; padding-bottom: var(--space-xs); color: var(--color-on-arena-2); }

.fed-tools { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-lg) var(--space-2xl); align-items: end; padding-top: var(--space-lg); border-top: 1px solid var(--color-arena-3); }
html:not(.js) .fed-tools { display: none; }
.fed-search { display: grid; gap: var(--space-xs); }
.fed-search__label, .fed-zones__legend { font-weight: 600; }
.fed-search__input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 2px solid var(--color-on-arena-2); border-radius: var(--radius-input); background: var(--color-arena-2); color: var(--color-on-arena); font-size: var(--text-md); outline: 3px solid transparent; outline-offset: 2px; }
.fed-search__input:hover { border-color: var(--color-on-arena); }
.fed-search__input:focus-visible { outline-color: var(--color-focus); }
.fed-search__input:disabled { opacity: 0.55; cursor: not-allowed; }

.fed-zones { min-width: 0; margin: 0; padding: 0; border: 0; }
.fed-zones__legend { margin-bottom: var(--space-xs); padding: 0; }
.fed-zones__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fed-zone { position: relative; display: inline-flex; }
.fed-zone input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.fed-zone__text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-on-arena-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; }
.fed-zone:hover .fed-zone__text { border-color: var(--color-on-arena); }
.fed-zone input:checked + .fed-zone__text { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-arena); --color-selection: var(--color-ink); --color-on-selection: var(--color-yellow); }
.fed-zone input:focus-visible + .fed-zone__text { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.fed-zone input:active + .fed-zone__text { background: var(--color-arena-3); }
.fed-zone input:checked:active + .fed-zone__text { background: var(--color-yellow); }

/* ---------- Directory: the plates ---------- */
.fed-dir { padding-block: var(--space-lg) var(--section-gap-s); }
.fed-dir__status { margin-bottom: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }
.fed-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.fed-grid > .is-unmatched { display: none; }
.fed-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "noc flag" "name name" "zone zone" "since since"; align-items: center; column-gap: var(--space-sm); padding-top: var(--space-md); border-top: 2px solid var(--color-ink); color: inherit; text-decoration: none; }
.fed-tile__noc { grid-area: noc; font: 800 var(--text-display-s)/0.9 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.fed-tile__flag { grid-area: flag; width: 48px; height: 48px; }
.fed-tile__name { grid-area: name; margin-top: var(--space-sm); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
.fed-tile__zone, .fed-tile__since { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.fed-tile__zone { grid-area: zone; margin-top: var(--space-2xs); }
.fed-tile__since { grid-area: since; }
.fed-tile:hover { border-top-color: var(--color-red); }
.fed-tile:hover .fed-tile__noc { color: var(--color-red); }
.fed-tile:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.fed-tile:active .fed-tile__noc { color: var(--color-red-deep); }

.fed-empty { display: grid; justify-items: start; gap: var(--space-md); padding-block: var(--space-xl); }
.fed-empty__text { font-size: var(--text-lead); }

/* ---------- Country: the arena hero, the NOC code set huge ---------- */
.fed-hero { padding-block: var(--space-2xl); }
.fed-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: end; }
/* The code fills its column: the widest code (KUW) is 1.7em and the flag matches the cap height (0.72em). */
.fed-hero__plate { container-type: inline-size; --fed-noc: min(20rem, calc((100cqi - var(--space-lg)) / 2.42)); display: flex; align-items: center; gap: var(--space-lg); min-width: 0; margin: 0; }
.fed-hero__flag { width: calc(var(--fed-noc) * 0.72); height: auto; aspect-ratio: 1; }
.fed-hero__noc { font: 800 var(--fed-noc)/0.8 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.fed-hero__text { display: grid; gap: var(--space-md); justify-items: start; }
.fed-hero__title { max-width: 14ch; font-size: var(--text-display-s); }
.fed-hero__name { max-width: 34ch; color: var(--color-on-arena-2); }
.fed-hero__actions { margin: 0; padding-top: var(--space-xs); }

/* ---------- Country: officials and contacts ---------- */
.fed-contact { padding-block: var(--section-gap-s); }
.fed-contact__title { margin-bottom: var(--space-xl); }
.fed-contact__sheet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-xl) var(--space-2xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.fed-specs { display: grid; gap: var(--space-lg); align-content: start; margin: 0; }
.fed-specs--details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.fed-spec { display: grid; gap: var(--space-2xs); align-content: start; }
.fed-spec dt { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }
.fed-spec dd { margin: 0; font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere; }
.fed-spec--year dd { font: 800 var(--text-display-s)/1 var(--font-display); overflow-wrap: normal; }
.fed-spec--person dd { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.fed-lines { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.fed-lines--row { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
/* The coordinator: the name as large as the officials', the numbers under it at reading size */
.fed-spec__name { display: block; }
.fed-lines--sub { margin-top: var(--space-xs); font-size: var(--text-md); font-weight: 400; line-height: 1.5; }
.fed-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.fed-link:hover { text-decoration-color: var(--color-red); text-decoration-thickness: 2px; }
.fed-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.fed-link:active { color: var(--color-red); }

/* ---------- Country: events, news, the way back ---------- */
.fed-events, .fed-news { padding-block: var(--section-gap-s); }
.fed-events .link-strong:focus-visible, .fed-news .link-strong:focus-visible, .fed-back .link-strong:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.fed-year + .fed-year { margin-top: var(--space-xl); }
.fed-year__label { margin-bottom: var(--space-xs); font: 800 var(--text-2xl)/1 var(--font-display); }
.fed-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.fed-back { padding-block: var(--space-2xl) var(--section-gap-s); }

/* ---------- Contact: the two offices on the arena ---------- */
.contact-head { padding-block: var(--space-3xl) var(--space-2xl); }
.contact-head__title { max-width: none; margin-bottom: var(--space-2xl); }
.contact-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.contact-office { display: grid; gap: var(--space-lg); align-content: start; padding-top: var(--space-lg); border-top: 4px solid var(--color-yellow); }
.contact-office__title { max-width: none; font-size: var(--text-3xl); }
.contact-office__list { display: grid; gap: var(--space-md); margin: 0; }
.contact-office__row { display: grid; gap: var(--space-2xs); }
.contact-office__row dt { color: var(--color-on-arena-2); font-size: var(--text-sm); font-weight: 600; }
.contact-office__row dd { display: grid; justify-items: start; gap: 0; margin: 0; font-size: var(--text-lg); line-height: 1.4; }
.contact-office__phone, .contact-office__mail { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-color: var(--color-on-arena-2); text-decoration-thickness: 2px; }
.contact-office__phone { font: 800 var(--text-3xl)/1.15 var(--font-display); text-underline-offset: 0.12em; }
.contact-office__mail { font: 600 var(--text-xl)/1.3 var(--font-body); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.contact-office__note { color: var(--color-on-arena-2); font-size: var(--text-sm); }
.contact-office__phone:hover, .contact-office__mail:hover { text-decoration-color: var(--color-mark); }
.contact-office__phone:focus-visible, .contact-office__mail:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.contact-office__phone:active, .contact-office__mail:active { color: var(--color-mark); }

/* ---------- Contact: the form, posting nowhere yet ---------- */
.contact-write { padding-block: var(--section-gap-s); }
.contact-write__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.contact-write__head { display: grid; gap: var(--space-md); }
.contact-write__aside { max-width: 36ch; color: var(--color-ink-2); }
.contact-write__link { color: var(--color-ink); font-weight: 600; }
.contact-write__link:hover { text-decoration-color: var(--color-mark); text-decoration-thickness: 2px; }
.contact-write__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.contact-write__link:active { color: var(--color-mark); }
.contact-form { display: grid; gap: var(--space-xs); max-width: 40rem; }
/* Said before anyone writes: the form sends nothing yet, and where to write instead */
.contact-form__note { max-width: 40rem; margin-bottom: var(--space-md); padding-block: var(--space-sm); border-block: 1px solid var(--color-rule); line-height: 1.5; }
.contact-form__note .contact-write__link { overflow-wrap: anywhere; }
.contact-field { display: grid; gap: var(--space-xs); }
.contact-field label { font-weight: 600; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.4; outline: 3px solid transparent; outline-offset: 2px; }
.contact-field textarea { height: auto; min-height: 10rem; padding-block: var(--space-sm); resize: vertical; }
.contact-field input:hover, .contact-field select:hover, .contact-field textarea:hover { border-color: var(--color-ink); }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible { outline-color: var(--color-focus); }
.contact-field [aria-invalid="true"] { border-color: var(--color-error); }
.contact-field input:disabled, .contact-field select:disabled, .contact-field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.contact-field__error { min-height: 1lh; color: var(--color-error); font-size: var(--text-sm); }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-top: var(--space-xs); }
.contact-form__status { min-height: 1lh; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 80rem) {
  .fed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .fed-head__inner, .fed-tools, .fed-hero__inner, .contact-write__inner, .fed-news__grid { grid-template-columns: minmax(0, 1fr); }
  .fed-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fed-contact__sheet { grid-template-columns: minmax(0, 1fr); }
  .fed-specs--facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fed-specs--details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .fed-head { padding-block: var(--space-2xl) var(--space-xl); }
  .fed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); }
  .fed-tile__flag { width: 36px; height: 36px; }
  .fed-tile__name { font-size: var(--text-md); }
  .fed-hero { padding-block: var(--space-xl) var(--space-2xl); }
  .fed-hero__plate { gap: var(--space-md); }
  .contact-offices, .fed-specs--details { grid-template-columns: minmax(0, 1fr); }
  .fed-specs--details { gap: var(--space-lg); }
  .fed-specs--facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-head { padding-block: var(--space-2xl) var(--space-xl); }
}