/* NAS components. Items marked Proposed are not designed in the PDF (see 05-UI-UX spec). */

/* ---------- Header (NAS-UI-020, Proposed): clean three-zone bar ---------- */
/* Brand at the start, page links in the centre, account actions and language at the end.
   Frosted white everywhere; on the home page it starts fully transparent over the hero and frosts on scroll. */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(35, 31, 64, .08);
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .88); box-shadow: 0 1px 0 rgba(35, 31, 64, .06), 0 8px 24px -16px rgba(35, 31, 64, .35); }
.site-header__bar {
  display: flex; align-items: center; gap: var(--space-5);
  min-block-size: var(--header-height);
  transition: min-block-size .3s ease;
}
.site-header.is-scrolled .site-header__bar { min-block-size: calc(var(--header-height) - 12px); }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--nas-purple); flex: none; }
.site-header__brand img { inline-size: 48px; transition: inline-size .3s ease; }
.site-header.is-scrolled .site-header__brand img { inline-size: 42px; }
.site-header__brand-text { font-family: var(--font-display); font-weight: 800; font-style: italic; letter-spacing: .01em; line-height: 1.1; font-size: 1.1rem; }
.site-header__brand-text small { display: block; font-style: normal; font-weight: 600; font-size: var(--fs-caption); letter-spacing: .08em; color: var(--nas-blue); }
:root[lang|="ar"] .site-header__brand-text { font-style: normal; }

.site-nav { flex: 1; display: flex; align-items: center; gap: var(--space-4); }
.site-nav__list { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0 auto; padding: 0; }
.site-nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 2px;
  color: var(--nas-ink); text-decoration: none; font-weight: 600;
  background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
  transition: color .2s ease;
}
.site-nav__link::after { /* sliding underline */
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 6px; block-size: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nas-teal), var(--nas-green));
  transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.site-nav__link:hover { color: var(--nas-purple); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--nas-purple); }
.site-nav__cta {
  display: inline-flex; align-items: center; min-block-size: 42px; padding-inline: var(--space-4);
  border-radius: var(--radius-pill); background: var(--nas-purple); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(63, 46, 129, .7);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-nav__cta:hover { color: #fff; background: var(--nas-purple-700); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(63, 46, 129, .8); }
.site-nav__link:focus-visible, .site-nav__cta:focus-visible, .lang-switch button:focus-visible { outline: 3px solid var(--nas-teal); outline-offset: 3px; }
/* Higher specificity than .btn-nas (declared later, display:inline-flex) so the toggle stays hidden on desktop. */
.site-header .site-nav__toggle { display: none; }

/* Language: quiet text button with a globe */
.lang-switch { display: inline-flex; margin: 0; }
.lang-switch button {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: var(--space-2);
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--nas-ink);
  font: inherit; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.lang-switch button::before {
  content: ""; inline-size: 18px; block-size: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9M12 3C9.5 5.6 8.2 8.6 8.2 12s1.3 6.4 3.8 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9M12 3C9.5 5.6 8.2 8.6 8.2 12s1.3 6.4 3.8 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lang-switch button:hover { color: var(--nas-purple); background: rgba(63, 46, 129, .06); }
.lang-switch [lang="ar"] { font-family: var(--font-arabic); }

/* Home: transparent over the hero until the page scrolls */
.page-home #main-content { margin-block-start: calc(var(--header-height) * -1); }
.page-home .hero--live { padding-block-start: calc(var(--space-5) + var(--header-height)); min-block-size: 100svh; }
.page-home .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 960px) {
  .site-header .site-nav__toggle { display: inline-flex; margin-inline-start: auto; border-radius: var(--radius-pill); }
  .site-nav {
    display: none;
    position: absolute; inset-inline: var(--space-3); inset-block-start: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding: var(--space-4); border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: 0 24px 48px -20px rgba(35, 31, 64, .45);
  }
  .site-nav.is-open { display: flex; animation: nas-drop .25s cubic-bezier(.16, 1, .3, 1); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-nav__link::after { inset-inline: 0 auto; inline-size: 24px; inset-block-end: 4px; transform-origin: left; }
  .site-nav__actions { flex-wrap: wrap; justify-content: space-between; padding-block-start: var(--space-3); border-block-start: 1px solid rgba(35, 31, 64, .08); }
  .site-nav__cta { flex: 1 1 100%; justify-content: center; }
}
@keyframes nas-flow { to { background-position: 300% 0; } }
@keyframes nas-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .site-nav__link::after, .site-header, .site-nav__cta { transition: none; } }

/* ---------- Buttons (Proposed) ---------- */
.btn-nas {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 44px; padding: var(--space-3) var(--space-5);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color var(--duration), color var(--duration), box-shadow var(--duration);
}
.btn-nas:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-nas--primary { background: var(--nas-purple); color: #fff; }
.btn-nas--primary:hover { background: var(--nas-purple-700); color: #fff; }
.btn-nas--secondary { background: #fff; color: var(--nas-purple); border-color: var(--nas-purple); }
.btn-nas--secondary:hover { background: var(--nas-surface-alt); color: var(--nas-purple-700); }
.btn-nas--accent { background: var(--nas-gradient); color: #fff; font-size: 1.125rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.btn-nas--accent:hover { color: #fff; filter: brightness(1.05); }
.btn-nas--danger { background: var(--nas-danger); color: #fff; }
.btn-nas--ghost { background: transparent; color: var(--nas-ink); }
.btn-nas--sm { min-block-size: 36px; padding: var(--space-1) var(--space-3); font-size: var(--fs-small); }
.btn-nas--block { inline-size: 100%; }
.btn-nas:disabled, .btn-nas[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- Hero (PDF p14 variant A / p16, p19 variant B; mobile p21/p22) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--nas-hero-top) 0%, #ececef 45%, #fff 100%);
  padding-block: var(--space-6) var(--space-5);
  min-block-size: clamp(220px, 30vw, 520px); /* PDF p19: hero ~27% of page width; p21: ~57% on phones */
  text-align: center;
}
/* Strokes are traced from PDF p14 and scale with the hero height so the stroke weight stays constant. */
.hero__strokes { position: absolute; inset: 0; pointer-events: none; }
.hero__strokes svg { position: absolute; inset-block: 0; block-size: 100%; inline-size: auto; max-inline-size: 50%; }
.hero__strokes .stroke-start { inset-inline-start: 0; }
.hero__strokes .stroke-end { inset-inline-end: 0; }
:root[dir="rtl"] .hero__strokes svg { transform: scaleX(-1); }
.hero__inner { position: relative; z-index: 1; }
.hero__logo { inline-size: clamp(96px, 11vw, 170px); margin-inline: auto; display: block; }
/* Variant B athletes sit in the two top corners over the strokes (PDF p16/p19/p22). */
.hero__athletes { position: absolute; inset: 0; pointer-events: none; }
.hero__athlete { position: absolute; inset-block-start: 4%; block-size: 80%; inline-size: auto; max-inline-size: 24%; object-fit: contain; }
.hero__athlete--start { inset-inline-start: 0; object-position: left top; }
.hero__athlete--end { inset-inline-end: 3%; object-position: right top; }
:root[dir="rtl"] .hero__athlete { transform: scaleX(-1); }
/* PDF p21/p22: on phones the strokes hug the outer edges and never cross the heading or intro text. */
@media (max-width: 575.98px) {
  .hero__inner { padding-inline: 14vw; }
  /* Pull the verticals towards the edges: p21 puts them at ~10% / ~89% of the width. */
  .hero__strokes .stroke-start { translate: -10% 0; }
  .hero__strokes .stroke-end { translate: 24% 0; }
  :root[dir="rtl"] .hero__strokes .stroke-start { translate: 10% 0; }
  :root[dir="rtl"] .hero__strokes .stroke-end { translate: -24% 0; }
  .hero__athlete { block-size: 38%; max-inline-size: 20%; }
}
/* PDF p17/p19/p21: "CHOOSE YOUR SPORT 2026 / #NASSPORTS" is a small two-line caption in ink, medium weight,
   the hashtag on its own line at the same size with "#NAS" bold. */
.hero__title {
  margin-block: var(--space-4) 0;
  font-family: var(--font-body); font-size: clamp(1rem, .85rem + .6vw, 1.5rem);
  font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; color: var(--nas-ink);
}
.hero__title strong { font-weight: 700; }
.hero__tag { margin-block: 0 var(--space-3); font-size: clamp(1rem, .85rem + .6vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: .01em; }
.hero__tag b { font-weight: 700; }
.hero .prose { font-size: var(--fs-small); max-inline-size: 46ch; }
/* PDF p17/p19: the tile grid starts right under the hero, no extra band. */
.hero + .section { padding-block-start: var(--space-3); }
.hero--compact { min-block-size: 0; padding-block: var(--space-6) var(--space-5); }
.hero--compact .hero__logo { inline-size: 88px; }

/* ---------- Wide banner (PDF p1/p2/p15) ---------- */
.banner {
  position: relative; display: flex; align-items: center; gap: var(--space-5);
  min-block-size: 160px; padding: var(--space-6);
  background: var(--nas-gradient); color: #fff;
  border-radius: 0; overflow: hidden; /* PDF p1/p2/p15: square-cornered banner */
}
.banner h1, .banner h2 { color: #fff; margin: 0; }
.banner__image { inline-size: clamp(90px, 18vw, 180px); margin-inline-start: auto; }

/* ---------- Sport card grid (PDF p17-22, NAS-UI-010/011/030/031) ---------- */
.sport-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 3.5vw, 3.125rem); /* PDF p17/p21: ~50px at 1440, ~13px at 375 */
  max-inline-size: var(--container-max); margin-inline: auto;
  list-style: none; padding: 0;
}
.sport-card {
  position: relative; display: block; aspect-ratio: 7 / 8;
  background: var(--nas-card-bg); box-shadow: var(--shadow-card);
  color: var(--nas-ink); text-decoration: none; overflow: hidden;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.sport-card:hover, .sport-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.sport-card:focus-visible { outline: 3px solid var(--nas-teal); outline-offset: 3px; }
.sport-card__stroke { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
:root[dir="rtl"] .sport-card__stroke { transform: scaleX(-1); }
.sport-card__image { position: absolute; inset: 6% 8% 14%; inline-size: 84%; block-size: 80%; object-fit: contain; }
.sport-card__name {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--space-2) var(--space-3);
  font-weight: 700; font-size: clamp(.7rem, 1.6vw, 1rem); text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
}
.sport-card__ribbon {
  position: absolute; inset-block-start: var(--space-3); inset-inline-end: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--nas-ink); color: #fff; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
}
/* Closed sports: greyscale until hover, then colour with "Coming soon". Open sports: colour, "Register now" on hover. */
.sport-card__image { transition: filter .45s ease, opacity .45s ease, transform .45s var(--ease-out); }
.sport-card--closed .sport-card__image { filter: grayscale(1); opacity: .8; }
.sport-card--closed:hover .sport-card__image, .sport-card--closed:focus-visible .sport-card__image { filter: none; opacity: 1; }
.sport-card:hover .sport-card__image, .sport-card:focus-visible .sport-card__image { transform: scale(1.05); }
/* Status action bar: slides up from the bottom edge on hover/focus, replacing the name strip. */
.sport-card__name { transition: opacity .3s ease, translate .35s var(--ease-out); }
.sport-card__hover {
  position: absolute; inset-inline: 8%; inset-block-end: 6%;
  display: flex; align-items: center; gap: .6em;
  padding: .55em .55em .55em 1em; border-radius: var(--radius-pill);
  color: #fff; font-weight: 700; font-size: clamp(.68rem, 1.3vw, .92rem); letter-spacing: .02em; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 14px 30px -12px rgba(35, 31, 64, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
  opacity: 0; translate: 0 120%; transition: opacity .3s ease, translate .45s cubic-bezier(.2, .9, .25, 1.15);
}
:root[dir="rtl"] .sport-card__hover { padding: .55em 1em .55em .55em; }
.sport-card__hover--open { background: linear-gradient(110deg, rgba(63, 46, 129, .94), rgba(18, 125, 118, .94)); }
.sport-card__hover--soon { background: linear-gradient(110deg, rgba(35, 31, 64, .88), rgba(63, 46, 129, .78)); }
.sport-card__hover-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sport-card__hover-dot { inline-size: .55em; block-size: .55em; border-radius: 50%; flex: none; }
.sport-card__hover--open .sport-card__hover-dot { background: #8be36b; box-shadow: 0 0 0 0 rgba(139, 227, 107, .7); animation: sc-pulse 1.6s ease-out infinite; }
.sport-card__hover--soon .sport-card__hover-dot { background: #f5b942; }
.sport-card__hover-icon {
  display: grid; place-items: center; flex: none; inline-size: 2.1em; block-size: 2.1em; border-radius: 50%;
  background: rgba(255, 255, 255, .18); transition: background .3s ease, translate .3s var(--ease-out);
}
.sport-card__hover-icon svg { inline-size: 1.15em; block-size: 1.15em; }
:root[dir="rtl"] .sport-card__hover--open .sport-card__hover-icon svg { transform: scaleX(-1); }
.sport-card__hover--open .sport-card__hover-icon { background: #fff; color: var(--nas-purple); }
.sport-card:hover .sport-card__hover, .sport-card:focus-visible .sport-card__hover { opacity: 1; translate: 0 0; }
.sport-card:hover .sport-card__name, .sport-card:focus-visible .sport-card__name { opacity: 0; translate: 0 40%; }
.sport-card:hover .sport-card__hover--open .sport-card__hover-icon { translate: .15em 0; }
:root[dir="rtl"] .sport-card:hover .sport-card__hover--open .sport-card__hover-icon { translate: -.15em 0; }
@keyframes sc-pulse { 70% { box-shadow: 0 0 0 .5em rgba(139, 227, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 227, 107, 0); } }
/* Touch: no hover, so closed sports keep a compact "Coming soon" chip at the top. */
@media (hover: none) {
  .sport-card--closed .sport-card__hover {
    opacity: 1; translate: none; inset-block: var(--space-2) auto; inset-inline: auto var(--space-2);
    padding: .35em .8em; font-size: .7rem; box-shadow: none;
  }
  .sport-card--closed .sport-card__hover-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sport-card__image, .sport-card__hover, .sport-card__name, .sport-card__hover-icon { transition: none; }
  .sport-card__hover-dot { animation: none !important; }
}
@media (max-width: 359px) { .sport-grid { grid-template-columns: repeat(2, 1fr); } } /* NAS-UI-011: needs approval */

/* ---------- Hexagon badge (PDF p23-41, NAS-UI-032) ---------- */
.hex-badge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); inline-size: 140px; text-align: center; }
.hex-badge__shape {
  display: grid; place-items: center;
  inline-size: 96px; aspect-ratio: 1 / 1.1547;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--nas-purple); color: #fff;
}
.hex-badge__shape > * { inline-size: 56%; }
.hex-badge__label { font-size: var(--fs-small); font-weight: 600; line-height: 1.25; }
.hex-badge--male .hex-badge__shape { background: var(--nas-cyan); color: var(--nas-ink); }
.hex-badge--female .hex-badge__shape { background: var(--nas-magenta); }
.hex-badge--star .hex-badge__shape { background: var(--nas-star); color: var(--nas-ink); }
.hex-badge--gradient .hex-badge__shape { background: var(--nas-gradient-vertical); }

/* radio-card use of badges (Proposed) */
.badge-choice { position: relative; }
.badge-choice input { position: absolute; opacity: 0; }
.badge-choice label { cursor: pointer; padding: var(--space-3); border: 2px solid transparent; border-radius: var(--radius-md); display: block; }
.badge-choice input:checked + label { border-color: var(--nas-purple); background: var(--nas-surface-alt); }
.badge-choice input:focus-visible + label { box-shadow: var(--focus-ring); }

/* ---------- Cards / panels (Proposed) ---------- */
.card-nas {
  background: var(--nas-surface); border: 1px solid #e3e3e6; border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); padding: var(--space-5);
}
.card-nas__title { font-size: var(--fs-h3); margin-block-end: var(--space-3); }
.card-nas--accent { border-block-start: 4px solid transparent; border-image: var(--nas-gradient) 1; }

/* ---------- Forms (Proposed, 05 section 8) ---------- */
.form-nas { display: grid; gap: var(--space-4); }
.form-nas__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: grid; gap: var(--space-1); }
.field__label { font-weight: 600; }
.field__label .required { color: var(--nas-danger); margin-inline-start: .15em; }
.field__help { font-size: var(--fs-small); color: var(--nas-muted); }
.field__input, .form-nas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .form-nas select, .form-nas textarea {
  inline-size: 100%; min-block-size: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--nas-border); border-radius: var(--radius-sm);
  font: inherit; color: var(--nas-ink); background: #fff;
}
.form-nas input:focus, .form-nas select:focus, .form-nas textarea:focus, .field__input:focus {
  outline: none; border-color: var(--nas-purple); box-shadow: 0 0 0 3px rgba(63, 46, 129, .2);
}
.field-validation-error, .field__error { color: var(--nas-danger); font-size: var(--fs-small); }
.input-validation-error { border-color: var(--nas-danger) !important; }
.check { display: flex; align-items: flex-start; gap: var(--space-2); }
.check input { inline-size: 20px; block-size: 20px; margin-block-start: .15em; accent-color: var(--nas-purple); }
.form-nas__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.validation-summary-valid { display: none; }

/* ---------- Alerts (Proposed) ---------- */
.alert-nas {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-sm);
  border-inline-start: 5px solid currentColor; margin-block-end: var(--space-4);
}
.alert-nas > :last-child { margin-block-end: 0; }
.alert-nas ul { margin: 0; padding-inline-start: var(--space-5); }
.alert-nas--info { background: var(--nas-info-bg); color: var(--nas-info); }
.alert-nas--success { background: var(--nas-success-bg); color: var(--nas-success); }
.alert-nas--warning { background: var(--nas-warning-bg); color: var(--nas-warning); }
.alert-nas--danger { background: var(--nas-danger-bg); color: var(--nas-danger); }
.alert-nas__body { color: var(--nas-ink); }

/* ---------- Status badges (Proposed, 05 section 9) ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2em .7em; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 700; white-space: nowrap;
  background: var(--nas-surface-alt); color: var(--nas-ink);
}
.status-badge::before { content: ""; inline-size: .55em; block-size: .55em; border-radius: 50%; background: currentColor; }
.status-badge--success { background: var(--nas-success-bg); color: var(--nas-success); }
.status-badge--warning { background: var(--nas-warning-bg); color: var(--nas-warning); }
.status-badge--danger { background: var(--nas-danger-bg); color: var(--nas-danger); }
.status-badge--info { background: var(--nas-info-bg); color: var(--nas-info); }
.status-badge--neutral { color: var(--nas-muted); }

/* ---------- Tables (Proposed) ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.table-nas { inline-size: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-small); }
.table-nas th, .table-nas td { padding: var(--space-3); text-align: start; border-block-end: 1px solid #ececef; vertical-align: middle; }
.table-nas thead th { position: sticky; inset-block-start: 0; background: var(--nas-purple); color: #fff; font-weight: 600; }
.table-nas tbody tr:nth-child(even) { background: var(--nas-surface-alt); }
.table-nas tbody tr:hover { background: #eeeaf7; }

/* ---------- Pagination ---------- */
.pagination-nas { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin-block: var(--space-5); justify-content: center; }
.pagination-nas a, .pagination-nas span {
  display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: var(--space-2);
  border: 1px solid var(--nas-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--nas-ink);
}
.pagination-nas a:hover { border-color: var(--nas-purple); color: var(--nas-purple); }
.pagination-nas [aria-current="page"] { background: var(--nas-purple); border-color: var(--nas-purple); color: #fff; }
.pagination-nas .is-disabled { opacity: .4; }

/* ---------- Stepper (Proposed) ---------- */
.stepper { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin-block-end: var(--space-6); counter-reset: step; }
.stepper__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: var(--fs-small); color: var(--nas-muted); position: relative; counter-increment: step; }
.stepper__item::before {
  content: counter(step); display: grid; place-items: center;
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  border: 2px solid var(--nas-border); background: #fff; font-weight: 700; z-index: 1;
}
.stepper__item:not(:last-child)::after {
  content: ""; position: absolute; inset-block-start: 17px; inset-inline-start: calc(50% + 18px); inline-size: calc(100% - 36px + var(--space-2));
  block-size: 2px; background: var(--nas-border);
}
.stepper__item.is-complete::before { content: "\2713"; background: var(--nas-teal); border-color: var(--nas-teal); color: #fff; }
.stepper__item.is-complete::after { background: var(--nas-teal); }
.stepper__item[aria-current="step"] { color: var(--nas-purple); font-weight: 700; }
.stepper__item[aria-current="step"]::before { border-color: var(--nas-purple); background: var(--nas-purple); color: #fff; }

/* ---------- Dashboard tiles (Proposed) ---------- */
.tile-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); border-radius: var(--radius-md);
  background: #fff; box-shadow: var(--shadow-soft); border-inline-start: 5px solid var(--nas-purple);
  color: var(--nas-ink); text-decoration: none;
}
a.tile:hover { box-shadow: var(--shadow-card); }
.tile__label { font-size: var(--fs-small); color: var(--nas-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tile__value { font-size: 2rem; font-weight: 800; line-height: 1; }
.tile--teal { border-inline-start-color: var(--nas-teal); }
.tile--green { border-inline-start-color: var(--nas-green); }
.tile--blue { border-inline-start-color: var(--nas-blue); }

/* ---------- Footer (NAS-UI-060, Proposed) ---------- */
.site-footer { margin-block-start: var(--space-7); background: #fff; border-block-start: 1px solid #ececef; }
.site-footer::before { content: ""; display: block; block-size: 4px; background: var(--nas-gradient); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-block: var(--space-6); }
.site-footer__logo { inline-size: 64px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: var(--nas-ink); text-decoration: none; font-weight: 600; }
.site-footer__links a:hover { color: var(--nas-purple); text-decoration: underline; }
.site-footer__copy { margin: 0; margin-inline-start: auto; font-size: var(--fs-small); color: var(--nas-muted); }

/* ---------- Admin shell (Proposed) ---------- */
.admin-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-block-size: 100vh; }
.admin-sidebar { background: var(--nas-purple); color: #fff; padding: var(--space-5) var(--space-4); }
.admin-sidebar__brand { display: flex; align-items: center; gap: var(--space-3); color: #fff; text-decoration: none; font-weight: 800; margin-block-end: var(--space-6); }
.admin-sidebar__brand img { inline-size: 44px; background: #fff; border-radius: 50%; padding: 4px; }
.admin-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.admin-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: #e8e4f6; text-decoration: none; font-weight: 500; }
.admin-nav a:hover, .admin-nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.admin-main { display: flex; flex-direction: column; min-inline-size: 0; background: var(--nas-surface-alt); }
.admin-topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: #fff; box-shadow: var(--shadow-soft); }
/* min-width:0 lets the flex item shrink; a long unbroken title (e.g. an e-mail) then wraps instead of widening the page on phones. */
.admin-topbar__title { margin: 0; font-size: var(--fs-h3); min-width: 0; overflow-wrap: anywhere; }
.admin-topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }
.admin-content { padding: var(--space-5); }
.admin-sidebar-toggle { display: none; }
@media (max-width: 960px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-sidebar.is-open { display: block; }
  .admin-sidebar-toggle { display: inline-flex; }
}

/* ---------- Page header for inner pages ---------- */
.page-head { padding-block: var(--space-6) var(--space-4); }
.page-head__eyebrow { font-size: var(--fs-small); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--nas-muted); }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--nas-muted); }

/* Sport landing content blocks (A-027/P-027): plain text, keep admin line breaks. */
.sport-content__body { white-space: pre-line; overflow-wrap: anywhere; }


/* Arabic script must never be letter-spaced or uppercased: spacing breaks the joined letters. */
:root[lang|="ar"] [class*="eyebrow"], :root[lang|="ar"] .sport-facts__label, :root[lang|="ar"] .site-header__brand-text { letter-spacing: 0; text-transform: none; }
.sport-card--closed { cursor: default; }