/*
 * Nabd Football Design System 3.5
 * Shared visual tokens and accessible UI primitives for public and admin surfaces.
 * Loaded after legacy bundles so that one coherent layer controls typography,
 * spacing, focus, states, responsive density and safe areas.
 */

:root {
  /* Runtime values are supplied by views/partials/design-system-head.php. */
  --nds-brand: #087f73;
  --nds-navy: #071426;
  --nds-accent: #17b8a6;
  --nds-live: #df2638;
  --nds-page: #f3f6f8;
  --nds-text: #0d1b2d;
  --nds-font: Alexandria, "Noto Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nds-font-scale: 1;
  --nds-content-max: 1280px;
  --nds-card-radius: 16px;

  /* Semantic colors. */
  --nds-surface-0: #ffffff;
  --nds-surface-1: #f8fafb;
  --nds-surface-2: #f1f5f7;
  --nds-surface-3: #e9eff2;
  --nds-text-strong: var(--nds-text);
  --nds-text-body: #334155;
  --nds-text-muted: #64748b;
  --nds-text-faint: #8290a3;
  --nds-border: #d9e2e7;
  --nds-border-strong: #bccbd3;
  --nds-brand-soft: color-mix(in srgb, var(--nds-brand) 10%, #fff);
  --nds-brand-softer: color-mix(in srgb, var(--nds-brand) 5%, #fff);
  --nds-live-soft: color-mix(in srgb, var(--nds-live) 10%, #fff);
  --nds-success: #138a55;
  --nds-success-soft: #e9f8f0;
  --nds-warning: #a96800;
  --nds-warning-soft: #fff6dd;
  --nds-danger: #c62d3e;
  --nds-danger-soft: #fff0f2;
  --nds-info: #2463a9;
  --nds-info-soft: #edf5ff;

  /* Type scale. */
  --nds-fs-2xs: calc(.6875rem * var(--nds-font-scale));
  --nds-fs-xs: calc(.75rem * var(--nds-font-scale));
  --nds-fs-sm: calc(.875rem * var(--nds-font-scale));
  --nds-fs-md: calc(1rem * var(--nds-font-scale));
  --nds-fs-lg: calc(1.125rem * var(--nds-font-scale));
  --nds-fs-xl: calc(1.375rem * var(--nds-font-scale));
  --nds-fs-2xl: calc(1.75rem * var(--nds-font-scale));
  --nds-fs-3xl: calc(2.25rem * var(--nds-font-scale));
  --nds-line-tight: 1.28;
  --nds-line-heading: 1.38;
  --nds-line-body: 1.75;
  --nds-weight-regular: 400;
  --nds-weight-medium: 500;
  --nds-weight-semibold: 650;
  --nds-weight-bold: 750;
  --nds-weight-black: 850;

  /* 4px spacing rhythm. */
  --nds-space-0: 0;
  --nds-space-1: .25rem;
  --nds-space-2: .5rem;
  --nds-space-3: .75rem;
  --nds-space-4: 1rem;
  --nds-space-5: 1.25rem;
  --nds-space-6: 1.5rem;
  --nds-space-8: 2rem;
  --nds-space-10: 2.5rem;
  --nds-space-12: 3rem;
  --nds-space-16: 4rem;

  /* Shape and elevation. */
  --nds-radius-xs: 6px;
  --nds-radius-sm: 9px;
  --nds-radius-md: 12px;
  --nds-radius-lg: var(--nds-card-radius);
  --nds-radius-xl: calc(var(--nds-card-radius) + 6px);
  --nds-radius-pill: 999px;
  --nds-shadow-xs: 0 1px 2px rgba(7, 20, 38, .05);
  --nds-shadow-sm: 0 5px 16px rgba(7, 20, 38, .07);
  --nds-shadow-md: 0 12px 32px rgba(7, 20, 38, .10);
  --nds-shadow-lg: 0 22px 55px rgba(7, 20, 38, .16);
  --nds-ring: 0 0 0 3px color-mix(in srgb, var(--nds-brand) 24%, transparent);

  /* Layout and controls. */
  --nds-container-gutter: clamp(12px, 2.2vw, 28px);
  --nds-section-gap: clamp(24px, 4vw, 48px);
  --nds-control-height: 44px;
  --nds-control-height-sm: 36px;
  --nds-control-height-lg: 52px;
  --nds-touch-target: 44px;
  --nds-header-height: 68px;
  --nds-mobile-dock-height: 68px;
  --nds-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nds-transition-fast: 150ms ease;
  --nds-transition: 220ms ease;
  --nds-z-header: 900;
  --nds-z-dock: 1000;
  --nds-z-overlay: 1100;
  --nds-z-modal: 1200;

  /* Compatibility aliases used by the older public/admin bundles. */
  --brand: var(--nds-brand);
  --brand-soft: var(--nds-brand-soft);
  --navy: var(--nds-navy);
  --accent: var(--nds-accent);
  --live: var(--nds-live);
  --danger: var(--nds-danger);
  --success: var(--nds-success);
  --warning: var(--nds-warning);
  --surface: var(--nds-surface-0);
  --surface-2: var(--nds-surface-1);
  --surface-3: var(--nds-surface-2);
  --text: var(--nds-text-strong);
  --text-2: var(--nds-text-body);
  --muted: var(--nds-text-muted);
  --border: var(--nds-border);
  --sp-primary: var(--nds-brand);
  --sp-navy: var(--nds-navy);
  --sp-accent: var(--nds-accent);
  --sp-live: var(--nds-live);
  --sp-bg: var(--nds-page);
  --sp-surface: var(--nds-surface-0);
  --sp-surface-2: var(--nds-surface-1);
  --sp-text: var(--nds-text-strong);
  --sp-muted: var(--nds-text-muted);
  --sp-border: var(--nds-border);
  --sp-font: var(--nds-font);
  --sp-radius: var(--nds-card-radius);
  --sp-shadow: var(--nds-shadow-sm);
  --sp-shadow-lg: var(--nds-shadow-lg);
}

html[data-density="compact"] {
  --nds-section-gap: clamp(18px, 3vw, 36px);
  --nds-control-height: 40px;
  --nds-control-height-sm: 34px;
  --nds-control-height-lg: 48px;
}

html[data-corners="crisp"] {
  --nds-card-radius: 10px;
  --nds-radius-xs: 4px;
  --nds-radius-sm: 6px;
  --nds-radius-md: 8px;
}

html[data-border-contrast="strong"] {
  --nds-border: #c7d3da;
  --nds-border-strong: #9fb2bd;
}

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

[data-theme="dark"] {
  --nds-page: #07111f;
  --nds-surface-0: #0d1a2a;
  --nds-surface-1: #122237;
  --nds-surface-2: #172a41;
  --nds-surface-3: #1d324c;
  --nds-text-strong: #f4f8fb;
  --nds-text-body: #c8d4df;
  --nds-text-muted: #99a9ba;
  --nds-text-faint: #788b9f;
  --nds-border: #263a50;
  --nds-border-strong: #3b526b;
  --nds-brand-soft: color-mix(in srgb, var(--nds-brand) 20%, var(--nds-surface-0));
  --nds-brand-softer: color-mix(in srgb, var(--nds-brand) 10%, var(--nds-surface-0));
  --nds-live-soft: color-mix(in srgb, var(--nds-live) 18%, var(--nds-surface-0));
  --nds-success-soft: #0d3022;
  --nds-warning-soft: #33270c;
  --nds-danger-soft: #35151d;
  --nds-info-soft: #112943;
  color-scheme: dark;
}

html {
  font-family: var(--nds-font);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nds-header-height) + 16px);
}

body {
  font-family: var(--nds-font);
  color: var(--nds-text-strong);
  background: var(--nds-page);
}

:is(button, input, select, textarea) { font: inherit; }
:is(button, [role="button"], a) { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--nds-brand);
  outline-offset: 3px;
  box-shadow: var(--nds-ring);
}

::selection { color: #fff; background: var(--nds-brand); }

/* Layout primitives */
.nds-container,
.hm-container {
  width: min(calc(100% - (var(--nds-container-gutter) * 2)), var(--nds-content-max));
  margin-inline: auto;
}

.nds-stack { display: flex; flex-direction: column; gap: var(--nds-stack-gap, var(--nds-space-4)); }
.nds-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nds-cluster-gap, var(--nds-space-3)); }
.nds-grid { display: grid; grid-template-columns: repeat(var(--nds-grid-cols, 12), minmax(0, 1fr)); gap: var(--nds-grid-gap, var(--nds-space-4)); }
.nds-section { padding-block: var(--nds-section-gap); }
.nds-flow > * + * { margin-block-start: var(--nds-flow-space, var(--nds-space-4)); }
.nds-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.nds-ltr { direction: ltr; unicode-bidi: isolate; }
.nds-number { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* Typography */
.nds-eyebrow { margin: 0; color: var(--nds-brand); font-size: var(--nds-fs-xs); font-weight: var(--nds-weight-black); letter-spacing: .02em; }
.nds-title-1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: var(--nds-line-tight); font-weight: var(--nds-weight-black); }
.nds-title-2 { margin: 0; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: var(--nds-line-heading); font-weight: var(--nds-weight-black); }
.nds-title-3 { margin: 0; font-size: var(--nds-fs-xl); line-height: var(--nds-line-heading); font-weight: var(--nds-weight-bold); }
.nds-body { color: var(--nds-text-body); font-size: var(--nds-fs-sm); line-height: var(--nds-line-body); }
.nds-muted { color: var(--nds-text-muted); }
.nds-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--nds-space-4); margin-block-end: var(--nds-space-5); }
.nds-section-heading > div { min-width: 0; }
.nds-section-heading p { margin: var(--nds-space-1) 0 0; color: var(--nds-text-muted); font-size: var(--nds-fs-sm); }

/* Buttons */
.nds-button,
.nds-icon-button {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--nds-radius-sm);
  min-height: var(--nds-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nds-space-2);
  font-size: var(--nds-fs-sm);
  font-weight: var(--nds-weight-bold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--nds-transition-fast), border-color var(--nds-transition-fast), color var(--nds-transition-fast), transform var(--nds-transition-fast), box-shadow var(--nds-transition-fast);
}
.nds-button { padding-inline: var(--nds-space-4); }
.nds-button:hover:not(:disabled) { transform: translateY(-1px); }
.nds-button:active:not(:disabled) { transform: translateY(0); }
.nds-button:disabled,
.nds-icon-button:disabled { opacity: .48; cursor: not-allowed; }
.nds-button--primary { background: var(--nds-brand); border-color: var(--nds-brand); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--nds-brand) 18%, transparent); }
.nds-button--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--nds-brand) 88%, #000); border-color: color-mix(in srgb, var(--nds-brand) 88%, #000); }
.nds-button--navy { background: var(--nds-navy); border-color: var(--nds-navy); color: #fff; }
.nds-button--secondary { background: var(--nds-surface-0); border-color: var(--nds-border); color: var(--nds-text-strong); }
.nds-button--secondary:hover:not(:disabled) { border-color: var(--nds-brand); color: var(--nds-brand); background: var(--nds-brand-softer); }
.nds-button--ghost { background: transparent; color: var(--nds-text-body); }
.nds-button--ghost:hover:not(:disabled) { background: var(--nds-surface-2); color: var(--nds-text-strong); }
.nds-button--danger { background: var(--nds-danger-soft); border-color: color-mix(in srgb, var(--nds-danger) 25%, var(--nds-border)); color: var(--nds-danger); }
.nds-button--sm { min-height: var(--nds-control-height-sm); padding-inline: var(--nds-space-3); font-size: var(--nds-fs-xs); }
.nds-button--lg { min-height: var(--nds-control-height-lg); padding-inline: var(--nds-space-6); font-size: var(--nds-fs-md); }
.nds-icon-button { width: var(--nds-control-height); min-width: var(--nds-touch-target); padding: 0; background: var(--nds-surface-0); border-color: var(--nds-border); color: var(--nds-text-body); }
.nds-icon-button:hover:not(:disabled) { color: var(--nds-brand); border-color: color-mix(in srgb, var(--nds-brand) 42%, var(--nds-border)); background: var(--nds-brand-softer); }
.nds-icon-button .icon { width: 20px; height: 20px; }

/* Cards and media */
.nds-card {
  position: relative;
  border: 1px solid var(--nds-border);
  border-radius: var(--nds-radius-lg);
  background: var(--nds-surface-0);
  box-shadow: var(--nds-shadow-xs);
  overflow: clip;
}
.nds-card--interactive { transition: transform var(--nds-transition), border-color var(--nds-transition), box-shadow var(--nds-transition); }
.nds-card--interactive:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nds-brand) 28%, var(--nds-border)); box-shadow: var(--nds-shadow-sm); }
.nds-card__body { padding: var(--nds-space-5); }
.nds-card__header,
.nds-card__footer { padding: var(--nds-space-4) var(--nds-space-5); }
.nds-card__header { border-block-end: 1px solid var(--nds-border); }
.nds-card__footer { border-block-start: 1px solid var(--nds-border); }
.nds-media { position: relative; overflow: hidden; background: var(--nds-surface-2); }
.nds-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.nds-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Badges, chips, status */
.nds-badge,
.nds-chip {
  min-height: 26px;
  border-radius: var(--nds-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
  white-space: nowrap;
  font-size: var(--nds-fs-2xs);
  font-weight: var(--nds-weight-black);
}
.nds-badge { color: var(--nds-brand); background: var(--nds-brand-soft); }
.nds-badge--live { color: var(--nds-live); background: var(--nds-live-soft); }
.nds-badge--success { color: var(--nds-success); background: var(--nds-success-soft); }
.nds-badge--warning { color: var(--nds-warning); background: var(--nds-warning-soft); }
.nds-badge--danger { color: var(--nds-danger); background: var(--nds-danger-soft); }
.nds-badge--neutral { color: var(--nds-text-muted); background: var(--nds-surface-2); }
.nds-chip { border: 1px solid var(--nds-border); color: var(--nds-text-body); background: var(--nds-surface-0); cursor: pointer; }
.nds-chip[aria-pressed="true"],
.nds-chip.is-active { color: #fff; background: var(--nds-navy); border-color: var(--nds-navy); }
.nds-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nds-live); box-shadow: 0 0 0 4px var(--nds-live-soft); animation: ndsPulse 1.6s infinite; }

/* Form controls */
.nds-field { display: grid; gap: var(--nds-space-2); }
.nds-field > span,
.nds-label { color: var(--nds-text-body); font-size: var(--nds-fs-xs); font-weight: var(--nds-weight-bold); }
.nds-input,
.nds-select,
.nds-textarea {
  width: 100%;
  min-height: var(--nds-control-height);
  border: 1px solid var(--nds-border);
  border-radius: var(--nds-radius-sm);
  padding-inline: var(--nds-space-3);
  color: var(--nds-text-strong);
  background: var(--nds-surface-0);
  transition: border-color var(--nds-transition-fast), box-shadow var(--nds-transition-fast), background var(--nds-transition-fast);
}
.nds-textarea { min-height: 120px; padding-block: var(--nds-space-3); resize: vertical; }
.nds-input::placeholder,
.nds-textarea::placeholder { color: var(--nds-text-faint); opacity: 1; }
.nds-input:hover,
.nds-select:hover,
.nds-textarea:hover { border-color: var(--nds-border-strong); }
.nds-input:focus,
.nds-select:focus,
.nds-textarea:focus { outline: 0; border-color: var(--nds-brand); box-shadow: var(--nds-ring); }
.nds-help { color: var(--nds-text-muted); font-size: var(--nds-fs-2xs); line-height: 1.6; }
.nds-check { display: inline-flex; align-items: flex-start; gap: var(--nds-space-2); color: var(--nds-text-body); font-size: var(--nds-fs-sm); cursor: pointer; }
.nds-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--nds-brand); flex: 0 0 auto; }

/* Tabs */
.nds-tabs { display: flex; gap: var(--nds-space-1); overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--nds-border); }
.nds-tabs::-webkit-scrollbar { display: none; }
.nds-tab {
  position: relative;
  min-height: var(--nds-control-height);
  border: 0;
  background: transparent;
  color: var(--nds-text-muted);
  padding-inline: var(--nds-space-4);
  white-space: nowrap;
  font-weight: var(--nds-weight-bold);
  cursor: pointer;
}
.nds-tab::after { content: ""; position: absolute; inset-inline: var(--nds-space-3); inset-block-end: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.nds-tab[aria-selected="true"],
.nds-tab.is-active { color: var(--nds-brand); }
.nds-tab[aria-selected="true"]::after,
.nds-tab.is-active::after { background: var(--nds-brand); }
.nds-tab-panel[hidden] { display: none !important; }

/* Tables */
.nds-table-wrap { border: 1px solid var(--nds-border); border-radius: var(--nds-radius-lg); background: var(--nds-surface-0); overflow: auto; }
.nds-table { width: 100%; border-collapse: collapse; font-size: var(--nds-fs-sm); }
.nds-table th { color: var(--nds-text-muted); background: var(--nds-surface-1); font-size: var(--nds-fs-xs); font-weight: var(--nds-weight-black); text-align: start; }
.nds-table th,
.nds-table td { min-height: 44px; padding: 12px 14px; border-block-end: 1px solid var(--nds-border); vertical-align: middle; }
.nds-table tbody tr:last-child td { border-block-end: 0; }
.nds-table tbody tr:hover { background: var(--nds-brand-softer); }
.nds-table .is-number { direction: ltr; unicode-bidi: isolate; text-align: center; font-variant-numeric: tabular-nums; }

/* Honest data states */
.nds-state {
  min-height: 132px;
  border: 1px dashed var(--nds-border-strong);
  border-radius: var(--nds-radius-lg);
  padding: var(--nds-space-6);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--nds-surface-1);
}
.nds-state__icon { width: 48px; height: 48px; border-radius: var(--nds-radius-md); display: grid; place-items: center; color: var(--nds-brand); background: var(--nds-brand-soft); }
.nds-state__icon .icon { width: 24px; height: 24px; }
.nds-state h3 { margin: var(--nds-space-3) 0 var(--nds-space-1); font-size: var(--nds-fs-md); }
.nds-state p { max-width: 50ch; margin: 0; color: var(--nds-text-muted); font-size: var(--nds-fs-sm); line-height: var(--nds-line-body); }
.nds-state--error { border-color: color-mix(in srgb, var(--nds-danger) 38%, var(--nds-border)); background: var(--nds-danger-soft); }
.nds-state--error .nds-state__icon { color: var(--nds-danger); background: color-mix(in srgb, var(--nds-danger) 12%, #fff); }
.nds-state--stale { border-color: color-mix(in srgb, var(--nds-warning) 38%, var(--nds-border)); background: var(--nds-warning-soft); }
.nds-state--stale .nds-state__icon { color: var(--nds-warning); background: color-mix(in srgb, var(--nds-warning) 12%, #fff); }
.nds-state--offline { border-color: color-mix(in srgb, var(--nds-info) 34%, var(--nds-border)); background: var(--nds-info-soft); }

/* Skeletons */
.nds-skeleton { position: relative; overflow: hidden; color: transparent !important; background: var(--nds-surface-2); border-radius: var(--nds-radius-xs); }
.nds-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: ndsShimmer 1.4s infinite; }
[dir="rtl"] .nds-skeleton::after { transform: translateX(100%); animation-name: ndsShimmerRtl; }
.nds-skeleton--text { width: 100%; height: .9em; }
.nds-skeleton--title { width: 70%; height: 1.35em; }
.nds-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
.nds-skeleton--media { width: 100%; aspect-ratio: 16/9; }

/* Accessible disclosure */
.nds-disclosure { border-block-end: 1px solid var(--nds-border); }
.nds-disclosure summary { min-height: var(--nds-control-height); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--nds-space-3); cursor: pointer; font-weight: var(--nds-weight-bold); }
.nds-disclosure summary::-webkit-details-marker { display: none; }
.nds-disclosure summary .icon { transition: transform var(--nds-transition); }
.nds-disclosure[open] summary .icon { transform: rotate(180deg); }
.nds-disclosure__body { padding-block: 0 var(--nds-space-4); color: var(--nds-text-body); font-size: var(--nds-fs-sm); line-height: var(--nds-line-body); }

/* Existing media homepage aligned to the system. */
.sp-body { background: var(--nds-page); color: var(--nds-text-strong); }
.sp-header { min-height: var(--nds-header-height); border-block-end-color: var(--nds-border); background: color-mix(in srgb, var(--nds-surface-0) 96%, transparent); }
.sp-header[data-sticky="0"] { position: relative !important; top: auto !important; }
.sp-header-main { min-height: var(--nds-header-height); }
.sp-brand > span { border-radius: var(--nds-radius-md); box-shadow: 0 8px 20px color-mix(in srgb, var(--nds-brand) 18%, transparent); }
.sp-main-nav a { min-height: var(--nds-touch-target); border-radius: var(--nds-radius-sm); }
.sp-main-nav a.active { background: var(--nds-brand-soft); color: var(--nds-brand); }
.sp-icon-btn,
.sp-lang-btn { min-width: var(--nds-touch-target); min-height: var(--nds-touch-target); }
.sp-section-head h2 { letter-spacing: -.015em; }
.sp-section-head > a { min-height: var(--nds-touch-target); display: inline-flex; align-items: center; }
.sp-score-card,
.sp-latest,
.sp-side-card,
.sp-featured-card,
.sp-newsletter,
.sp-data-grid > div { border-color: var(--nds-border); border-radius: var(--nds-card-radius); box-shadow: var(--nds-shadow-xs); }
.sp-score-card:hover,
.sp-news-row:hover { border-color: color-mix(in srgb, var(--nds-brand) 30%, var(--nds-border)); }
.sp-news-row h3,
.sp-side-card h3,
.sp-transfer-list h3,
.sp-league-grid h3 { color: var(--nds-text-strong); }
.sp-news-row p,
.sp-news-row footer,
.sp-side-card small { color: var(--nds-text-muted); }
.sp-news-tabs button { min-height: var(--nds-control-height-sm); }
.sp-bottom-nav { height: calc(var(--nds-mobile-dock-height) + var(--nds-safe-bottom)); padding-bottom: var(--nds-safe-bottom); z-index: var(--nds-z-dock); }
.sp-bottom-nav a,
.sp-bottom-nav button { min-width: var(--nds-touch-target); min-height: var(--nds-touch-target); }
.sp-bottom-nav a[aria-current="page"] { color: var(--nds-brand); font-weight: var(--nds-weight-black); }
.sp-body.has-mobile-dock { padding-bottom: calc(var(--nds-mobile-dock-height) + var(--nds-safe-bottom)); }
.sp-demo-notice button,
.sp-breaking-controls button { min-width: var(--nds-touch-target); min-height: var(--nds-touch-target); }
.sp-drawer { z-index: var(--nds-z-overlay); }
.sp-search { z-index: var(--nds-z-modal); }
.hm-consent { z-index: calc(var(--nds-z-modal) + 10); }

/* Common legacy components receive the same shape and focus treatment. */
:is(.card, .panel, .section-card, .article-card, .widget-card, .admin-form-card, .design-preview-card) {
  border-color: var(--nds-border);
  border-radius: var(--nds-card-radius);
}
:is(.primary-button, .admin-primary-button) { min-height: var(--nds-control-height); border-radius: var(--nds-radius-sm); }
:is(.header-icon-button, .icon-action) { min-width: var(--nds-touch-target); min-height: var(--nds-touch-target); }

/* Design system catalogue */
.nds-catalogue { display: grid; gap: var(--nds-space-6); }
.nds-catalogue-hero { padding: clamp(20px, 4vw, 34px); border-radius: var(--nds-radius-xl); color: #fff; background: linear-gradient(135deg, var(--nds-navy), color-mix(in srgb, var(--nds-brand) 46%, var(--nds-navy))); box-shadow: var(--nds-shadow-md); }
.nds-catalogue-hero p { max-width: 72ch; color: rgba(255,255,255,.78); }
.nds-token-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--nds-space-3); }
.nds-token { border: 1px solid var(--nds-border); border-radius: var(--nds-radius-md); background: var(--nds-surface-0); overflow: hidden; }
.nds-token i { display: block; height: 76px; background: var(--token-color); }
.nds-token div { padding: var(--nds-space-3); }
.nds-token strong,
.nds-token small { display: block; }
.nds-token small { color: var(--nds-text-muted); font-size: var(--nds-fs-2xs); direction: ltr; text-align: start; }
.nds-catalogue-section { padding: var(--nds-space-5); }
.nds-component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nds-space-4); }
.nds-demo-panel { border: 1px solid var(--nds-border); border-radius: var(--nds-radius-md); padding: var(--nds-space-4); background: var(--nds-surface-1); }
.nds-demo-panel > h3 { margin: 0 0 var(--nds-space-4); font-size: var(--nds-fs-md); }
.nds-type-sample { display: grid; gap: var(--nds-space-3); }
.nds-spacing-scale { display: flex; align-items: end; flex-wrap: wrap; gap: var(--nds-space-4); }
.nds-spacing-scale div { display: grid; gap: 6px; justify-items: center; color: var(--nds-text-muted); font-size: var(--nds-fs-2xs); }
.nds-spacing-scale i { display: block; width: var(--space); height: var(--space); min-width: 4px; min-height: 4px; background: var(--nds-brand); border-radius: 3px; }
.nds-match-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--nds-space-3); align-items: center; padding: var(--nds-space-3); border: 1px solid var(--nds-border); border-radius: var(--nds-radius-md); background: var(--nds-surface-0); }
.nds-match-team { display: flex; align-items: center; gap: var(--nds-space-2); min-width: 0; }
.nds-match-team:last-child { flex-direction: row-reverse; text-align: end; }
.nds-match-team i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--nds-surface-2); color: var(--nds-text-muted); font-style: normal; font-weight: var(--nds-weight-black); }
.nds-match-team strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nds-match-score { text-align: center; }
.nds-match-score b { display: block; direction: ltr; font-variant-numeric: tabular-nums; }
.nds-match-score small { color: var(--nds-live); font-size: var(--nds-fs-2xs); font-weight: var(--nds-weight-black); }

@keyframes ndsPulse { 50% { opacity: .42; transform: scale(.8); } }
@keyframes ndsShimmer { to { transform: translateX(100%); } }
@keyframes ndsShimmerRtl { to { transform: translateX(-100%); } }

@media (max-width: 1023px) {
  :root { --nds-content-max: 100%; }
  .nds-token-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nds-component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root {
    --nds-container-gutter: 10px;
    --nds-section-gap: 24px;
    --nds-header-height: 58px;
    --nds-card-radius: min(var(--nds-card-radius), 14px);
  }
  html[data-density="compact"] { --nds-section-gap: 18px; }
  .nds-section-heading { align-items: center; margin-block-end: var(--nds-space-4); }
  .nds-section-heading p { display: none; }
  .nds-card__body { padding: var(--nds-space-4); }
  .nds-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nds-catalogue-section { padding: var(--nds-space-4); }
  .nds-match-row { grid-template-columns: minmax(0,1fr) 66px minmax(0,1fr); gap: var(--nds-space-2); }
  .nds-match-team { flex-direction: column; text-align: center; font-size: var(--nds-fs-xs); }
  .nds-match-team:last-child { flex-direction: column; text-align: center; }
  .sp-body.has-mobile-dock { padding-bottom: calc(var(--nds-mobile-dock-height) + var(--nds-safe-bottom)); }
}

@media (max-width: 479px) {
  :root { --nds-container-gutter: 8px; }
  .nds-token-grid { grid-template-columns: 1fr 1fr; gap: var(--nds-space-2); }
  .nds-token i { height: 58px; }
  .nds-button { width: 100%; }
  .nds-cluster > .nds-button { width: auto; }
  .nds-catalogue-hero { border-radius: var(--nds-radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (forced-colors: active) {
  .nds-button,
  .nds-card,
  .nds-state,
  .nds-input,
  .nds-select,
  .nds-textarea,
  .sp-bottom-nav { border: 1px solid CanvasText; }
  .nds-live-dot { forced-color-adjust: none; }
}

/* Runtime preview states inside the administration screen. */
[data-design-preview-v350][data-density="compact"] { --nds-control-height: 40px; --nds-space-5: 1rem; }
[data-design-preview-v350][data-corners="crisp"] { --nds-card-radius: 10px; --nds-radius-md: 8px; --nds-radius-sm: 6px; }
[data-design-preview-v350][data-border-contrast="strong"] { --nds-border: #b9c8d1; }

@media (max-width: 767px) {
  body.has-mobile-dock { padding-bottom: calc(var(--nds-mobile-dock-height) + var(--nds-safe-bottom)) !important; }
  .sp-header-actions #themeToggle,
  .sp-header-actions .sp-account-link { display: none; }
}

/* Explicit QA bands used by the responsive acceptance checklist. */
@media (max-width: 359px) {
  :root { --nds-container-gutter: 6px; }
  .nds-match-row { grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr); }
}
@media (min-width: 480px) and (max-width: 767px) {
  :root { --nds-container-gutter: 14px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --nds-container-gutter: 20px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  :root { --nds-container-gutter: 24px; }
}
@media (min-width: 1366px) {
  :root { --nds-container-gutter: 28px; }
}

/* Mobile interaction contract: dense sports navigation stays compact visually,
   while the complete hit area remains at least 44px for touch and switch users. */
@media (max-width: 767px), (pointer: coarse) {
  .sp-brand,
  .sp-league-nav a,
  .sp-score-head nav a,
  .sp-news-tabs button,
  .sp-most-tabs button,
  .sp-side-tabs button,
  .sp-footer-main nav a,
  .sp-footer-bottom nav a,
  .sp-newsletter-consent,
  .hm-consent button {
    min-height: var(--nds-touch-target);
  }
  .sp-league-nav a,
  .sp-score-head nav a,
  .sp-footer-main nav a,
  .sp-footer-bottom nav a,
  .sp-newsletter-consent {
    display: inline-flex;
    align-items: center;
  }
  .sp-news-tabs button,
  .sp-most-tabs button,
  .sp-side-tabs button {
    min-width: var(--nds-touch-target);
    padding-block: 0;
  }
  .sp-newsletter-consent {
    gap: var(--nds-space-2);
    cursor: pointer;
  }
}