/* ============================================================
   PACY — APP SHELL
   Header, sport selector, date/status controls, bottom nav.
   ============================================================ */

.shell { background: var(--shell); color: var(--on-shell); }

/* --- header -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--shell-strong);
  border-bottom: 1px solid var(--shell-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--header-h);
  min-width: 0;   /* lets children shrink instead of forcing a scrollbar */
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  margin-inline-end: var(--s-3);
}
.brand:hover { text-decoration: none; }
/* The lightning mark is drawn by script. Its box is reserved here so the
   header does not grow by 7px when it arrives and push the entire page —
   summary, live rail and board — down with it. */
#brand-slot {
  display: inline-flex;
  width: 34px;
  height: 41px;
  align-items: center;
  flex: none;
}

.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  flex: none;
}

.brand-word {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--on-shell);
}

/* Primary nav collapses into the bottom bar on small screens. */
.primary-nav { display: flex; align-items: center; gap: var(--s-1); }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--on-shell-mid);
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.nav-link:hover { color: var(--on-shell); background: var(--shell-hover); text-decoration: none; }

/* The selected nav state borrows the logo's facet: a hard-edged
   plane rather than a filled pill. */
.nav-link[aria-current="page"] {
  color: var(--white);
  background:
    linear-gradient(126deg, rgba(37,99,235,.85) 0%, rgba(37,99,235,.85) 38%, transparent 38.4%),
    linear-gradient(300deg, rgba(23,74,126,.9) 0%, rgba(23,74,126,.9) 52%, transparent 52.4%),
    var(--navy-600);
}

/* The page nav gets the same life as the sport chips below it: an accent
   underline that springs in on hover, and on the current page glows and
   breathes with the same charge line the selected chip carries. */
.nav-link::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 5px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, var(--electric) 30%, var(--blue-300) 50%, var(--electric) 70%, transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform var(--d-med) var(--ease-spring),
              opacity var(--d-fast) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(.66); opacity: .9; }
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  opacity: 1;
  background: linear-gradient(90deg, transparent, #60a5fa 22%, #fff 50%, #60a5fa 78%, transparent);
  box-shadow: 0 0 7px #2563eb, 0 0 16px rgba(59,130,246,.6);
  animation: sportChipCurrent 1.8s ease-in-out infinite;
}

.nav-link .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  margin-inline-start: var(--s-2);
  animation: livePulse 1.8s var(--ease-in-out) infinite;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
}

/* Signed-in account control, shared by Scores and My Pacy. */
.account-menu-wrap { position: relative; flex: none; }
.account-avatar {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid rgba(127,165,248,.38);
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(145deg, rgba(37,99,235,.34), transparent 48%), var(--navy-600);
  font: 700 var(--t-meta) var(--font-display);
  transition: border-color var(--d-fast), box-shadow var(--d-med), transform var(--d-med) var(--ease-spring);
}
.account-avatar:hover, .account-avatar[aria-expanded="true"] {
  border-color: var(--blue-300);
  box-shadow: 0 0 18px rgba(37,99,235,.42);
  transform: scale(1.05);
}
.account-menu-popover {
  position: absolute;
  z-index: 100;
  left: 50%;
  right: auto;
  top: calc(100% + var(--s-3));
  width: 238px;
  max-width: calc(100vw - var(--s-6));
  translate: -50% 0;
  padding: var(--s-2);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-lg);
  color: var(--on-shell);
  background: var(--shell-raised);
  box-shadow: var(--sh-shell);
  animation: accountMenuIn 180ms var(--ease-out) both;
}
.account-menu-identity { padding: var(--s-3); margin-bottom: var(--s-1); border-bottom: 1px solid var(--shell-line); }
.account-menu-identity strong, .account-menu-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity small { margin-top: 2px; color: var(--on-shell-mid); font-size: var(--t-micro); }
.account-menu-popover a, .account-menu-popover button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--on-shell-mid);
  font-size: var(--t-meta);
  font-weight: 600;
  text-align: start;
}
.account-menu-popover a:hover, .account-menu-popover button:hover { color: var(--on-shell); background: var(--shell-hover); text-decoration: none; }
.account-menu-popover button { margin-top: var(--s-1); border-top: 1px solid var(--shell-line); color: #ff9b96; }
@keyframes accountMenuIn { from { opacity: 0; transform: translateY(-7px) scale(.98); } }

/* Search trigger reads as a field, not a button, so its purpose
   is obvious before it is opened. */
.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--tap);
  min-width: 220px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--shell-hover);
  border: 1px solid var(--shell-line);
  color: var(--on-shell-soft);
  font-size: var(--t-meta);
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.search-trigger:hover {
  background: var(--shell-hover-2);
  border-color: var(--shell-hover-2);
}
.search-trigger svg { width: 18px; height: 18px; flex: none; }
.search-trigger .kbd {
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: var(--t-micro);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--shell-hover-2);
  border: 1px solid var(--shell-line);
}

/* --- mode toggles (Focus / Spoiler) -------------------------- */
.mode-toggle[aria-pressed="true"] {
  background: rgba(37,99,235,.22);
  color: var(--blue-300);
}

/* A thin band states plainly when a mode is altering the page,
   because a mode the user forgot about looks like a bug. */
.mode-banner {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-size: var(--t-meta);
  color: var(--blue-300);
  border-bottom: 1px solid var(--shell-line);
  background: rgba(37,99,235,.10);
}
.mode-banner.on { display: flex; }
.mode-banner .page { display: flex; align-items: center; gap: var(--s-3); width: 100%; }
.mode-banner button {
  margin-inline-start: auto;
  color: var(--white);
  font-weight: 600;
  font-size: var(--t-meta);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
  padding-inline: var(--s-2);
}

/* --- sports selector ----------------------------------------- */
.sports-bar {
  background: var(--shell);
  border-bottom: 1px solid var(--shell-line);
}

.sports-scroller {
  position: relative;
  display: flex;
  gap: var(--s-2);
  padding-block: var(--s-3);
  /* One row of chips, reserved. The chips are drawn by script into an empty
     bar; without this the bar was 0 high until they arrived and then 44,
     pushing <main> — and therefore the whole page — down by that much. It was
     the largest single layout shift on the site. */
  min-height: var(--tap);
  box-sizing: content-box;
}

.sport-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  flex: none;
  scroll-snap-align: start;
  color: var(--on-shell-mid);
  font-size: var(--t-meta);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.sport-chip:hover {
  color: var(--on-shell);
  background: var(--shell-hover);
  transform: translateY(-1px);
}
.sport-chip[aria-selected="true"] {
  color: var(--white);
  border-color: rgba(37,99,235,.55);
  background:
    linear-gradient(126deg, rgba(37,99,235,.75) 0%, rgba(37,99,235,.75) 30%, transparent 30.4%),
    var(--navy-600);
  box-shadow: 0 8px 24px rgba(37,99,235,.22), inset 0 0 16px rgba(96,165,250,.08);
}
.sport-chip[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -45%;
  width: 34%;
  z-index: -1;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: sportChipSweep 3.2s ease-in-out infinite;
}
.sport-chip[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: auto 13px 3px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, #60a5fa 25%, #fff 50%, #60a5fa 75%, transparent);
  box-shadow: 0 0 8px #3b82f6, 0 0 16px rgba(59,130,246,.65);
  animation: sportChipCurrent 1.8s ease-in-out infinite;
}
.sport-chip .glyph { width: 18px; height: 18px; flex: none; opacity: .9; }
.sport-chip[aria-selected="true"] .glyph {
  filter: drop-shadow(0 0 5px rgba(191,219,254,.8));
  animation: sportGlyphCharge 2.2s ease-in-out infinite;
}
.sport-chip .count {
  font-size: var(--t-micro);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--shell-hover-2);
}
.sport-chip[aria-selected="true"] .count { background: rgba(255,255,255,.22); }
.sport-chip-arrive { animation: sportChipArrive .48s var(--ease-out); }

.sport-switch-charge {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 5px;
  width: 54px;
  height: 2px;
  pointer-events: none;
  border-radius: var(--r-pill);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #60a5fa 22%, #fff 50%, #60a5fa 78%, transparent);
  box-shadow: 0 0 7px #2563eb, 0 0 18px rgba(59,130,246,.8);
}
.sport-switch-charge::after {
  content: "";
  position: absolute;
  left: 23px;
  top: -5px;
  width: 8px;
  height: 12px;
  background: #fff;
  clip-path: polygon(55% 0, 100% 0, 65% 42%, 100% 42%, 25% 100%, 43% 54%, 0 54%);
  filter: drop-shadow(0 0 4px #60a5fa);
}

@keyframes sportChipSweep {
  0%, 58% { left: -45%; opacity: 0; }
  66% { opacity: 1; }
  86%, 100% { left: 115%; opacity: 0; }
}
@keyframes sportChipCurrent {
  50% { opacity: .45; transform: scaleX(.72); }
}
@keyframes sportGlyphCharge {
  50% { transform: translateY(-1px) scale(1.08); }
}
@keyframes sportChipArrive {
  0% { transform: scale(.96); }
  45% { transform: translateY(-2px) scale(1.025); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sport-chip[aria-selected="true"]::before,
  .sport-chip[aria-selected="true"]::after,
  .sport-chip[aria-selected="true"] .glyph,
  .sport-chip-arrive { animation: none; }
}
[data-motion="off"] .sport-chip[aria-selected="true"]::before,
[data-motion="off"] .sport-chip[aria-selected="true"]::after,
[data-motion="off"] .sport-chip[aria-selected="true"] .glyph,
[data-motion="off"] .sport-chip-arrive { animation: none; }

/* --- date + status controls ---------------------------------- */
.controls-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 55;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-line);
}

.controls-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  border: 1px solid var(--surface-line);
}
.seg button {
  min-height: 38px;
  padding: 0 var(--s-4);
  border-radius: 7px;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
}
.seg button[aria-pressed="true"][data-status="live"] { color: var(--live); }

.seg .n {
  font-size: var(--t-micro);
  font-weight: 700;
  margin-inline-start: 6px;
  color: var(--ink-faint);
}
.seg button[aria-pressed="true"] .n { color: inherit; }

.controls-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}

.date-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink-mid);
  font-size: var(--t-meta);
  font-weight: 600;
}
.date-jump { position: relative; cursor: pointer; }
.date-jump:hover { background: var(--blue-050); color: var(--ink); }
.date-jump:focus-within {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
.date-jump-value { white-space: nowrap; }
/* The native control keeps every one of its behaviours — keyboard entry,
   the platform picker, the accessible name — but stops rendering its own
   locale-guessed "mm/dd/yyyy" placeholder over the top of the chosen day.
   It is laid over the label rather than hidden, because display:none or
   visibility:hidden would take it out of the accessibility tree and off
   the tab order with it. */
.date-jump input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: var(--t-meta);
  opacity: 0;
  cursor: pointer;
}

/* --- connection / freshness strip ---------------------------- */
/* Never let stale data pass as current: when polling fails the
   strip states it plainly and keeps the last-known timestamp. */
.conn-strip {
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  font-size: var(--t-meta);
  font-weight: 500;
}
.conn-strip.on { display: block; }
.conn-strip .page { display: flex; align-items: center; gap: var(--s-3); }
.conn-strip[data-state="offline"] { background: var(--warn-soft); color: var(--warn); }
.conn-strip[data-state="delayed"] { background: var(--upcoming-soft); color: var(--upcoming); }
.conn-strip[data-state="restored"] { background: var(--good-soft); color: var(--good); }
.conn-strip svg { width: 18px; height: 18px; flex: none; }
.conn-strip .retry {
  margin-inline-start: auto;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
}

/* --- bottom navigation (mobile) ------------------------------ */
.bottom-nav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  background: var(--shell-strong);
  border-top: 1px solid var(--shell-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--bottomnav-h);
  font-size: 11px;
  font-weight: 600;
  color: var(--on-shell-soft);
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: var(--blue-300); }
.bottom-nav svg { width: 22px; height: 22px; }
.bottom-nav .nav-badge {
  position: absolute;
  transform: translate(14px, -10px);
  min-width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--live);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
  padding-inline: 4px;
}

/* --- footer --------------------------------------------------- */
.site-footer {
  background: var(--shell-strong);
  color: var(--on-shell-mid);
  padding-block: var(--s-9) var(--s-8);
  font-size: var(--t-meta);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-8);
}
.site-footer h3 {
  font-size: var(--t-meta);
  color: var(--on-shell);
  margin-bottom: var(--s-4);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 700;
}
/* Footer links are list navigation, not prose, so they carry a
   real target rather than the 17px an inline link would give. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-block: 2px;
}
.site-footer a:hover { color: var(--on-shell); }
.footer-base {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--shell-line);
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
  color: var(--on-shell-soft);
}
.footer-base .provider { margin-inline-start: auto; }
.homepage-announcement {
  background: var(--electric);
  color: var(--white);
  min-height: 44px;
  padding: 11px var(--s-4);
  text-align: center;
  font-weight: 750;
}
.homepage-announcement[data-tone="breaking"] { background: var(--live); }
.homepage-announcement[data-tone="maintenance"] {
  background: var(--warn); color: var(--midnight);
}
.homepage-announcement a { color: inherit; text-decoration: underline; }

/* --- analytics consent --------------------------------------
   Fixed, and therefore out of flow: it is appended to <body> after
   the page has laid out, and nothing on the page moves when it
   appears or when it is dismissed. Zero CLS by construction rather
   than by tuning.

   It is also deliberately narrow and anchored to one corner on a
   desktop, so it never spans the content. The version this replaced
   stretched the full page width across the bottom of the viewport,
   which on a phone meant it sat on top of the match list. */
.analytics-consent {
  position: fixed;
  z-index: 95;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(380px, calc(100vw - 32px));
  /* Reserved so the panel does not resize under itself when the web font
     arrives and reflows its copy. */
  min-height: 150px;
  padding: var(--s-4);
  border: 1px solid var(--shell-line);
  border-radius: var(--r-lg);
  background: var(--shell-strong);
  color: var(--on-shell);
  box-shadow: var(--sh-3);
}
.analytics-consent h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-body);
  color: var(--on-shell);
}
.analytics-consent p {
  margin: 0;
  color: var(--on-shell-mid);
  font-size: var(--t-meta);
}
.consent-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
/* Equal weight. Both are the same size, the same target and the same
   prominence: a decline styled as an afterthought is not a free choice. */
.consent-btn {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid rgba(127, 196, 255, .3);
  border-radius: var(--r-md);
  background: rgba(37, 99, 235, .14);
  color: var(--on-shell);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.consent-btn:hover { background: rgba(37, 99, 235, .26); }
.consent-btn:focus-visible {
  outline: 2px solid var(--bolt-core);
  outline-offset: 2px;
}
/* On a phone it becomes a bottom sheet, clear of the bottom navigation, and
   as short as it can be while staying legible: a sheet tall enough to cover
   the live rail is the obstruction this replaced, not a smaller version of
   it. Title and copy share one line-and-a-bit; the buttons keep their 44px. */
@media (max-width: 620px) {
  .analytics-consent {
    inset-inline: 8px;
    width: auto;
    min-height: 0;
    bottom: calc(var(--bottomnav-h) + 8px);
    padding: var(--s-3) var(--s-4);
  }
  .analytics-consent h2 { font-size: var(--t-meta); margin-bottom: 2px; }
  .analytics-consent p { font-size: var(--t-micro); }
  .consent-actions { margin-top: var(--s-3); gap: var(--s-2); }
}