/* ==========================================================================
   Erskine YFC redesign layer — loaded after sports.css.
   Geist for the interface; Barlow Condensed only for match cards and
   scoreboards. Yellow = main action and highlight, red = live and unread.
   ========================================================================== */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-var.woff2) format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/geist-mono-var.woff2) format("woff2");
}

:root {
  --font-ui: "Geist", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-match: "Barlow Condensed", "Arial Narrow", sans-serif;
  --yellow: #ffe500;
  --accent: #ffe500;
  --on-accent: #141200;
  --live: #ff2d46;
  --win: #2fbf71;
  --loss: #f04452;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --face: #0b0b0c;
  --radius: 32px;
  --r-panel: 20px;
  --r-tile: 16px;
  --r-ctl: 12px;
  /* Dark (default) */
  --bg: #09090a;
  --surface: #121214;
  --surface-2: #1a1a1d;
  --s3: #242428;
  --s4: #2e2e33;
  --border: rgba(255, 255, 255, .08);
  --hairline: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --text: #f6f6f5;
  --muted: #a4a4ac;
  --faint: #a0a0a8;
  --chrome: rgba(9, 9, 10, .76);
  --draw: #8b8b94;
  --stub: #161618;
  --stub-ink: #f4f4f2;
  --stub-muted: #8e8e96;
  --stub-line: rgba(255, 255, 255, .08);
  --stub-perf: rgba(255, 255, 255, .12);
  --panel-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px -18px rgba(0, 0, 0, .8);
  --backdrop-image: var(--backdrop-dark, none);
  --backdrop-opacity: .42;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f2f2ef;
  --surface: #ffffff;
  --surface-2: #f5f5f3;
  --s3: #eaeae6;
  --s4: #deded9;
  --border: rgba(12, 12, 13, .08);
  --hairline: rgba(12, 12, 13, .08);
  --line-2: rgba(12, 12, 13, .14);
  --text: #0d0d0e;
  --muted: #55555d;
  --faint: #606068;
  --chrome: rgba(242, 242, 239, .82);
  --draw: #9a9aa2;
  --stub: #fffdf5;
  --stub-ink: #121212;
  --stub-muted: #6c695e;
  --stub-line: rgba(0, 0, 0, .1);
  --stub-perf: rgba(0, 0, 0, .14);
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -20px rgba(0, 0, 0, .22);
  --backdrop-image: var(--backdrop-light, none);
  --backdrop-opacity: .3;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #f2f2ef;
    --surface: #ffffff;
    --surface-2: #f5f5f3;
    --s3: #eaeae6;
    --s4: #deded9;
    --border: rgba(12, 12, 13, .08);
    --hairline: rgba(12, 12, 13, .08);
    --line-2: rgba(12, 12, 13, .14);
    --text: #0d0d0e;
    --muted: #55555d;
    --faint: #606068;
    --chrome: rgba(242, 242, 239, .82);
    --draw: #9a9aa2;
    --stub: #fffdf5;
    --stub-ink: #121212;
    --stub-muted: #6c695e;
    --stub-line: rgba(0, 0, 0, .1);
    --stub-perf: rgba(0, 0, 0, .14);
    --panel-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -20px rgba(0, 0, 0, .22);
    --backdrop-image: var(--backdrop-light, none);
    --backdrop-opacity: .3;
    color-scheme: light;
  }
}

/* ---------- Type: one interface face, sentence case ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, b, em, small, label, legend, button, input, select, textarea, th, td, dt, dd, li, summary, caption, time, div, nav, output):not(:where(.tk, .tk *, .sb, .sb *, .livebar *, .goal *, .wdl, .disc, .disc *, .stat-num)) {
  font-family: var(--font-ui) !important;
}
body :is(h1, h2, h3, h4, .eyebrow, .btn, .badge, .tabs a, label, label > span, .field > span, legend, th, dt, summary, nav a, .stat > span, .rail-season, .metric > span, .kicker):not(:where(.tk *, .sb *, .livebar *, .goal *, .rail-label)) {
  text-transform: none !important;
}
body :is(h1, h2, h3):not(:where(.tk *, .sb *, .goal *)) {
  letter-spacing: -0.025em !important;
  font-weight: 700;
}
body :is(.eyebrow, .btn, .badge, .tabs a, label, label > span, .field > span, legend, th, dt, summary, nav a, .stat > span, .metric > span):not(:where(.tk *, .sb *, .livebar *, .goal *, .rail-label)) {
  letter-spacing: normal !important;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon, .ui-icon { stroke-width: 1.75; }
:focus-visible { outline: 2px solid var(--yellow) !important; outline-offset: 2px !important; }

/* ---------- Shell ---------- */
.app-shell { display: block; min-height: 100dvh; padding-bottom: 0; }
.app-rail { display: none; }
.app-main { min-width: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  min-height: 0; height: 56px; padding: 0 10px 0 16px;
  background: var(--chrome);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.wordmark { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.wordmark img { width: 30px; height: 30px; border-radius: 50%; }
.wordmark span { display: block; font-size: 15px; letter-spacing: -0.01em; line-height: 1.15; text-transform: none; }
.wordmark b { display: block; font-weight: 650; color: var(--text); }
.wordmark small { display: block; font-size: 12px; font-weight: 400; letter-spacing: normal; color: var(--faint); text-transform: none; }
.app-topbar-right { display: flex; align-items: center; gap: 4px; }
.app-topbar .icon-button {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text); box-shadow: none;
}
.app-topbar .icon-button:hover { background: var(--surface-2); }
.count-badge {
  position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--live); color: #fff;
  font-size: 10.5px; font-weight: 650; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg);
}
.avatar {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--s3); color: var(--text); font-size: 12px; font-weight: 650; letter-spacing: .02em;
}
.topbar-signin.btn { min-height: 44px; height: 44px; padding: 0 16px; font-size: 14px; margin-left: 4px; }
.page-content {
  position: relative; isolation: isolate;
  max-width: 1200px; margin: 0 auto;
  padding: 8px 16px calc(104px + env(safe-area-inset-bottom));
}
.app-footer { padding: 24px 16px calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); color: var(--faint); font-size: 12.5px; letter-spacing: normal; }
.app-footer nav { gap: 16px; }

.app-shell > .mobile-nav, .mobile-nav {
  position: fixed; inset: auto 0 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  width: auto; max-width: none; margin: 0; padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
  background: var(--chrome);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  box-shadow: none; transform: none;
}
.mobile-nav > a {
  display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  width: auto; min-width: 0; height: auto; min-height: 52px; padding: 4px 0; border-radius: 0; background: none !important;
  color: var(--faint); font-size: 11.5px; font-weight: 550; box-shadow: none !important;
}
.mobile-nav > a[aria-current] { flex-basis: 0; width: auto; border-radius: 0; }
.mobile-nav > a > span:not(.sr-only) { display: block; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: nowrap; }
.mobile-nav > a .icon { width: 56px; height: 30px; padding: 5px 0; border-radius: 999px; transition: background .2s var(--ease); }
.mobile-nav > a[aria-current] { color: var(--text) !important; }
.mobile-nav > a[aria-current] .icon { background: var(--s3); }

@media (min-width: 761px) {
  .app-shell { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .app-shell > .mobile-nav, .mobile-nav { display: none !important; }
  .app-rail {
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 16px 10px; background: var(--bg); border-right: 1px solid var(--hairline);
  }
  .club-brand { display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: auto; padding: 4px 0 18px; background: none; border-radius: 0; overflow: visible; }
  .club-brand img { width: 40px; height: 40px; border-radius: 50%; }
  .club-brand .brand-text { display: none; }
  .app-rail nav { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; }
  .app-rail nav a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 58px; padding: 8px 4px; border-radius: 12px;
    color: var(--muted); font-size: 11.5px; font-weight: 550; background: none; box-shadow: none !important;
  }
  html .app-rail nav a { color: var(--muted) !important; opacity: 1 !important; }
  .app-rail nav a:hover { background: var(--surface) !important; color: var(--text) !important; }
  .app-rail nav a[aria-current] { background: var(--surface-2) !important; color: var(--text) !important; }
  .app-rail nav a em { position: absolute; top: 6px; right: 14px; width: 8px; height: 8px; overflow: hidden; border-radius: 9px; background: var(--live); color: transparent; font-size: 0; }
  .rail-secondary, .rail-label, .rail-identity { display: none !important; }
  .wordmark { display: flex; }
  .app-topbar { padding: 0 24px; height: 64px; }
  .page-content { padding: 12px 28px 64px; }
  .app-footer { padding: 24px 28px 40px; }
}
@media (min-width: 1100px) {
  .app-shell { grid-template-columns: 252px minmax(0, 1fr); }
  .app-rail { padding: 18px 14px; }
  .club-brand { justify-content: flex-start; padding: 4px 8px 22px; }
  .club-brand .brand-text { display: block; line-height: 1.15; }
  .club-brand .brand-text b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
  .club-brand .brand-text small { display: block; font-size: 12px; color: var(--faint); }
  .app-rail nav a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; }
  .app-rail nav a em { position: static; margin-left: auto; width: auto; height: 20px; min-width: 20px; padding: 0 6px; border-radius: 99px; color: #fff; font-size: 11px; font-style: normal; line-height: 20px; text-align: center; }
  .rail-secondary { display: grid !important; gap: 2px; }
  .rail-label { display: block !important; margin: 18px 12px 6px; font: 500 11px/1 var(--font-mono) !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--faint); }
  .rail-identity { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline); font-size: 13.5px; }
  .rail-identity > span:not(.avatar) { flex: 1; min-width: 0; }
  .rail-identity strong { display: block; font-weight: 600; }
  .rail-identity small { color: var(--faint); }
  .rail-identity .btn { width: 100%; }
  .rail-season { display: none; }
  .app-topbar .wordmark { visibility: hidden; }
  .page-content { padding: 16px 32px 72px; margin: 0; }
}

/* ---------- Page headings: data first, no slogans ---------- */
.page-head { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 12px; margin: 0 0 18px; padding-top: 12px; text-align: left; }
.page-head > div:first-child { min-width: 0; }
@media (min-width: 761px) { .page-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } }
.page-head h1 { margin: 0; font-size: clamp(28px, 4vw, 34px) !important; line-height: 1.12 !important; letter-spacing: -0.03em !important; }
.page-head .eyebrow { display: block; margin: 0 0 4px; color: var(--faint); font-size: 13px; font-weight: 500; }
.page-head .eyebrow::before { display: none; }
.page-head .lede { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 560px; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.section-head, .home-section-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.section-head h2, .home-section-heading h2, .section-heading h2, .panel > h2, .panel h2 { font-size: 17px !important; font-weight: 650 !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; }
.section-head h2::before, .home-section-heading h2::before { display: none !important; }

/* ---------- Surfaces and controls ---------- */
.panel { border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--panel-shadow); filter: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-ctl);
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; filter: none;
  transition: transform .12s var(--ease), background .2s, border-color .2s;
}
.btn:hover { transform: none; filter: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--yellow); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: #fff04d; }
.match-management-nav > .btn-primary { color: var(--on-accent); }
.match-management-nav > .btn-primary:hover { background: #fff04d; color: var(--on-accent); }
.btn-secondary { background: var(--s3); color: var(--text); border-color: transparent; }
.btn-secondary:hover { background: var(--s4); border-color: transparent; }

/* Keep supporting navigation out of the coaching task's first screen. */
.workspace-navigation, .page-content > details.workspace-navigation { margin-bottom: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.workspace-navigation > summary, .page-content > .workspace-navigation > summary, .matchday-fixture-options > summary { min-height: 44px; padding: 10px 0; display: list-item; list-style-position: inside; color: var(--muted); cursor: pointer; }
.page-content > .workspace-navigation > :not(summary) { margin-inline: 0; padding-bottom: 0; }
.workspace-navigation .tabs { margin: 4px 0 12px; }
.matchday-fixture { display: grid; gap: 4px 20px; margin-bottom: 16px; }
.matchday-fixture h2 { margin: 0 0 4px; font-size: 18px; }
.matchday-fixture p { margin: 0; color: var(--muted); font-size: 14px; }
.matchday-fixture-options[open] { grid-column: 1 / -1; }
.matchday-fixture-options form { max-width: 640px; }
.matchday-fixture-options .actions { margin-top: 12px; }
.tabs[data-matchday-tabs] { display: block; margin-bottom: 12px; }
.tabs[data-matchday-tabs] .workflow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tabs[data-matchday-tabs] .workflow-steps a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "s"; gap: 4px; min-height: 60px; padding: 10px; }
.tabs[data-matchday-tabs] .workflow-steps a::before { display: none; }
.tabs[data-matchday-tabs] .workflow-steps a > span { font-size: 14px; }
.tabs[data-matchday-tabs] .workflow-steps a > small { font-size: 12px; }
.email-review > input[type="hidden"] { display: none; }
.email-confirmation { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.email-confirmation p { margin: 8px 0 0; }
.email-confirmation [data-recipient-selection-status] { font-weight: 600; }
@media (max-width: 600px) {
  [data-matchday-workspace] > .panel { padding: 16px; }
  [data-matchday-workspace] .form-grid { gap: 10px; }
  [data-matchday-workspace] .stack { gap: 16px; }
  [data-matchday-workspace] > [role="alert"] { display: block; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; font-size: 14px; }
  [data-matchday-workspace] > [role="alert"] strong, [data-matchday-workspace] > [role="alert"] span { display: inline; }
  [data-matchday-workspace] .metrics { gap: 6px; }
  [data-matchday-workspace] .metrics > span { padding: 4px 8px; font-size: 12px; }
  .tabs[data-matchday-tabs] .workflow-steps a > small { display: none; }
  .email-confirmation .actions { width: 100%; }
}
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-text, .btn-quiet { min-height: 40px; padding: 0 4px; background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 550; }
.btn-text:hover, .btn-quiet:hover { color: var(--text); }
.tabs { gap: 2px; padding: 3px; margin-bottom: 16px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 12px; }
.tabs a, .home-games-nav .tabs a { min-height: 34px; padding: 0 16px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 550; }
.tabs a:hover:not([aria-current]) { background: transparent; color: var(--text); }
.tabs a[aria-current] { background: var(--s4); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
html[data-theme="light"] .tabs a[aria-current] { background: var(--surface); }
.badge { border-radius: 999px; background: var(--s3); color: var(--muted); font-size: 12.5px; font-weight: 550; padding: 3px 10px; }
.badge.live, .badge.red { background: var(--live); color: #fff; }
.badge.yellow { background: var(--yellow); color: var(--on-accent); }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 46px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background-color: var(--surface); color: var(--text); font-size: 16px;
}
.season-picker select, .browse-heading select { min-height: 44px; border-radius: 12px; font-size: 14px; }

/* ---------- Stadium atmosphere ---------- */
.backdrop {
  position: absolute; z-index: -1; left: 0; right: 0; top: -56px; height: 620px;
  background: var(--backdrop-image) center 35% / cover no-repeat;
  opacity: var(--backdrop-opacity); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}
.rd-greet { position: relative; padding: 14px 2px 18px; }
.rd-greet small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 13px; }
.rd-greet h1 { margin: 0; font-size: clamp(26px, 4vw, 32px) !important; line-height: 1.15 !important; letter-spacing: -0.03em !important; }
.rd-greet p { margin: 6px 0 0; color: var(--muted); }
@media (min-width: 761px) { .backdrop { top: -64px; height: 680px; } }

/* ---------- Layout grids for redesigned pages ---------- */
.rd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rd-grid > * { min-width: 0; }
.rd-grid > aside { display: contents; }
.rd-section { margin-top: 28px; }
.rd-section-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.rd-section-h h2 { margin: 0; font-size: 17px !important; font-weight: 650 !important; letter-spacing: -0.015em !important; }
.rd-section-h a { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 14px; font-weight: 500; }
.rd-section-h a:hover { color: var(--text); }
.rd-section-h .icon { width: 16px; height: 16px; }
.rd-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.rd-two > * { min-width: 0; }
@media (min-width: 1100px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .rd-grid > aside { display: grid; align-content: start; }
  .rd-grid > aside > .rd-section:first-child { margin-top: 0; }
  .rd-two { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Results, form, stats ---------- */
.wdl { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; color: #fff; font: 700 12px/1 var(--font-ui); }
.wdl-w { background: var(--win); color: #071c11; } .wdl-d { background: var(--draw); color: #111; } .wdl-l { background: var(--loss); color: #210407; }
.wdl.lg { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.rd-card { padding: 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--panel-shadow); }
.rd-form { display: flex; gap: 8px; }
.rd-form a { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 8px; border-radius: 12px; }
.rd-form a:hover { background: var(--surface-2); }
.rd-form small { color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rd-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); text-align: center; }
.rd-stats b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rd-stats small { color: var(--faint); font-size: 12px; }
.rd-muted { color: var(--muted); }
.rd-stats div { display: flex; flex-direction: column-reverse; }
.rd-stats dd, .rd-stats dt { margin: 0; }
.rd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rd-table th { padding: 0 6px 10px; color: var(--faint); font: 500 11px/1 var(--font-mono) !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-align: center; }
.rd-table th:nth-child(2) { text-align: left; }
.rd-table abbr { text-decoration: none; }
.rd-table td { padding: 9px 6px; border-top: 1px solid var(--hairline); text-align: center; font-size: 14px; }
.rd-table td:first-child { width: 30px; color: var(--muted); font-weight: 600; }
.rd-table td:nth-child(2) { text-align: left; }
.rd-table tr.is-erskine td { background: color-mix(in srgb, var(--yellow) 9%, transparent); font-weight: 650; }
.rd-table tr.is-erskine td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.rd-club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-club span:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-table td:nth-child(2) { width: 100%; max-width: 0; }
.rd-league { padding: 14px 10px 10px; }
.rd-source { display: flex; align-items: center; gap: 6px; margin: 10px 6px 0; color: var(--faint); font-size: 12.5px; }
.rd-source .icon { width: 14px; height: 14px; }
.rd-empty { color: var(--faint); font-size: 14px; }

/* ---------- Member task card ---------- */
.rd-task { position: relative; overflow: hidden; padding: 18px; border-radius: var(--r-panel); background: var(--surface); border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--hairline)); }
.rd-task::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 55%); }
.rd-task > * { position: relative; }
.rd-task .rd-k { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rd-task .rd-k::before { content: ""; width: 8px; height: 8px; border-radius: 9px; background: var(--yellow); }
.rd-task h2 { margin: 10px 0 6px; font-size: 20px !important; line-height: 1.2 !important; }
.rd-task p { margin: 0 0 14px; color: var(--muted); }

/* ==========================================================================
   Matchday ticket — broadcast face over a detail stub. Sized by its container.
   ========================================================================== */
.tk { display: block; position: relative; container-type: inline-size; border-radius: 26px; overflow: hidden; background: var(--stub); color: var(--stub-ink); isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 44px -26px rgba(0, 0, 0, .85); transition: transform .2s var(--ease); }
.tk:has(.tk-link):hover { transform: translateY(-2px); }
.tk.hl { box-shadow: 0 0 0 2px var(--yellow), 0 26px 50px -28px rgba(255, 229, 0, .45); }
html[data-theme="light"] .tk { box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -28px rgba(0, 0, 0, .45); }
html[data-theme="light"] .tk.hl { box-shadow: 0 0 0 2px var(--yellow), 0 26px 50px -28px rgba(0, 0, 0, .45); }
.tk-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.tk-face { --mid: clamp(58px, 17cqw, 124px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--mid) minmax(0, 1fr); background: var(--face); color: #fff; overflow: hidden; }
.tk-face:has(.match-score) { --mid: clamp(104px, 30cqw, 210px); }
.tk-side { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(10px, 3cqw, 16px); min-width: 0; padding: clamp(40px, 11cqw, 58px) 6px clamp(18px, 5cqw, 28px); }
.tk-bg { position: absolute; z-index: -1; top: 0; bottom: 0; overflow: hidden; background: linear-gradient(180deg, #2b2b2f, #131315 78%); }
.tk-side.l .tk-bg { left: 0; right: calc(var(--mid) / -2 - 1px); }
.tk-side.r .tk-bg { right: 0; left: calc(var(--mid) / -2 - 1px); }
.tk-side.us .tk-bg { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 229, 0, .34), transparent 62%), linear-gradient(180deg, #3d3611, #14130b 80%); }
.tk-side.team .tk-bg { background: radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--team) 52%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--team) 32%, #19191c), #111113 82%); }
.tk-wm { position: absolute; top: 50%; width: 150%; max-width: none; height: auto; opacity: .09; filter: grayscale(1) contrast(1.3); pointer-events: none; }
.tk-side.l .tk-wm { left: -62%; transform: translateY(-46%) rotate(-10deg); }
.tk-side.r .tk-wm { right: -62%; transform: translateY(-46%) rotate(10deg); }
.tk-side.us .tk-wm { opacity: .13; filter: grayscale(1) sepia(1) saturate(4); }
.tk-side.team .tk-wm { opacity: .12; filter: grayscale(.4) brightness(1.2); }
.tk-mid { position: relative; z-index: 1; display: grid; place-items: center; }
.tk-mid::before { content: ""; position: absolute; inset: -4px 9%; z-index: -1; background: #040404; transform: skewX(-9deg); box-shadow: -1.5px 0 0 rgba(255, 229, 0, .75), 1.5px 0 0 rgba(255, 229, 0, .75), 0 0 46px 6px rgba(0, 0, 0, .75); }
.tk-vs { font: italic 800 clamp(32px, 11cqw, 64px)/1 var(--font-match); letter-spacing: -0.01em; color: #fff; text-shadow: 0 4px 18px #000; transform: skewX(-4deg); }
.tk-mid .match-score { display: flex; align-items: center; gap: clamp(6px, 2cqw, 14px); font: 800 clamp(44px, 15cqw, 96px)/.9 var(--font-match); font-style: normal; transform: none; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 6px 22px #000; }
.tk-mid .match-score b { font: inherit; color: inherit; }
.tk-mid .match-score i { display: block; width: clamp(10px, 3.6cqw, 24px); height: clamp(3px, 1cqw, 7px); border-radius: 9px; background: var(--yellow); font-size: 0; color: transparent; }
.tk-tab { --tab: var(--yellow); position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: clamp(6px, 1.6cqw, 9px) clamp(14px, 4cqw, 22px); border-radius: 0 0 14px 14px; background: var(--tab); color: #111; font: 700 clamp(13px, 3.8cqw, 18px)/1 var(--font-match); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tk-tab::before, .tk-tab::after { content: ""; position: absolute; top: 0; width: 14px; height: 14px; }
.tk-tab::before { left: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--tab) 14px); }
.tk-tab::after { right: -14px; background: radial-gradient(circle at 100% 100%, transparent 13.5px, var(--tab) 14px); }
.tk-tab.w { --tab: #f4f4f2; }
.tk-tab.r { --tab: var(--live); color: #fff; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.is-live .dot, .livebar .dot { animation: rd-pulse 1.4s ease-in-out infinite; }
@keyframes rd-pulse { 50% { opacity: .25; } }
.disc { display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: #fff; }
.disc img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(calc(var(--fit, 1) * 1.08)); }
.disc.initials { background: #1f1f23; color: #fff; }
.disc.initials b { font: 700 13px/1 var(--font-match); letter-spacing: .04em; }
.tk .disc { width: clamp(58px, 21cqw, 108px); height: clamp(58px, 21cqw, 108px); box-shadow: 0 0 0 3px var(--face), 0 0 0 5px rgba(255, 255, 255, .6), 0 16px 30px rgba(0, 0, 0, .7); }
.tk .us .disc { box-shadow: 0 0 0 3px var(--face), 0 0 0 5.5px var(--yellow), 0 16px 30px rgba(0, 0, 0, .7); }
.tk .team .disc { box-shadow: 0 0 0 3px var(--face), 0 0 0 5.5px color-mix(in srgb, var(--team) 70%, #fff), 0 16px 30px rgba(0, 0, 0, .7); }
.tk-name { display: flex; flex-direction: column; align-items: center; max-width: 100%; text-align: center; font: 700 clamp(18px, 6.6cqw, 34px)/.95 var(--font-match); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px #000; }
.tk-name span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-name em { margin-top: 4px; font-size: .78em; font-style: normal; letter-spacing: .07em; color: var(--yellow); }
.tk .team .tk-name em { color: color-mix(in srgb, var(--team) 35%, #fff); }
.tk-name i { width: clamp(26px, 8cqw, 42px); height: 3px; margin-top: 8px; border-radius: 3px; background: var(--yellow); }
.tk-stub { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; padding: clamp(14px, 4cqw, 20px) 0; background: var(--stub); color: var(--stub-ink); border-top: 2px dashed var(--stub-perf); }
.tk-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0 clamp(6px, 2cqw, 14px); text-align: center; }
.tk-cell + .tk-cell { border-left: 1px solid var(--stub-line); }
.tk-cell > .icon { width: clamp(20px, 6cqw, 30px); height: clamp(20px, 6cqw, 30px); margin-bottom: 3px; }
.tk-cell strong { font: 700 clamp(13px, 4.2cqw, 20px)/1.05 var(--font-match); letter-spacing: .05em; text-transform: uppercase; color: var(--stub-ink); }
.tk-cell small { font: 400 clamp(11.5px, 3.3cqw, 14px)/1.3 var(--font-ui); color: var(--stub-muted); }
.tk-dd { display: flex; align-items: center; gap: clamp(5px, 1.5cqw, 9px); }
.tk-dd b { font: 800 clamp(44px, 15cqw, 78px)/.8 var(--font-match); letter-spacing: -0.02em; color: var(--stub-ink); font-variant-numeric: tabular-nums; }
.tk-dd span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tk-dd em { padding: 3px 6px 2px; border-radius: 7px; background: var(--yellow); color: #111; font: 700 clamp(16px, 5.4cqw, 28px)/1 var(--font-match); font-style: normal; letter-spacing: .02em; text-transform: uppercase; }
.tk-dd small { padding-left: 3px; color: var(--stub-ink); font: 700 clamp(12px, 3.9cqw, 18px)/1 var(--font-match); letter-spacing: .08em; text-transform: uppercase; }
.tk-date strong { margin-top: clamp(6px, 2cqw, 10px); }
.tk-venue { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font: 600 clamp(11.5px, 3.3cqw, 14.5px)/1.2 var(--font-ui); text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; color: var(--stub-ink); }
.tk-third .wdl { margin-bottom: 4px; }
.tk-note { display: flex; align-items: flex-start; gap: 10px; margin: 10px 2px 0; color: var(--muted); font-size: 14px; }
.tk-note .icon { width: 18px; height: 18px; color: var(--faint); }
.card-caption { margin: 8px 2px 0; }
.card-management { margin-top: 8px; }
.tk + .live-update-status, .sb + .live-update-status { margin: 6px 4px 0; color: var(--faint); font-size: 12.5px; }

/* ---------- Scoreboard rows ---------- */
.sbs { display: grid; gap: 8px; }
.sb { position: relative; z-index: 0; overflow: hidden; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "date teams board" "date meta meta"; column-gap: 12px; row-gap: 8px; padding: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hairline); transition: background .2s, transform .15s var(--ease); }
.sb:hover { background: var(--surface-2); }
.sb-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sb-wm { position: absolute; z-index: -1; right: -26px; top: 50%; width: 136px; height: auto; transform: translateY(-50%) rotate(-12deg); opacity: .07; filter: grayscale(1); pointer-events: none; }
.sb-date { grid-area: date; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; background: var(--s3); font-family: var(--font-match); line-height: 1; text-transform: uppercase; }
.sb-date span { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; }
.sb-date b { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.sb.next { border-color: color-mix(in srgb, var(--yellow) 45%, var(--hairline)); }
.sb.next .sb-date { background: var(--yellow); }
.sb.next .sb-date span, .sb.next .sb-date b { color: #111; }
.sb-teams { grid-area: teams; display: grid; gap: 6px; min-width: 0; }
.sb-t { display: flex; align-items: center; gap: 10px; min-width: 0; height: 32px; }
.sb-t .nm { overflow: hidden; color: var(--muted); font: 700 19px/1 var(--font-match); letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sb-t.us .nm { color: var(--text); }
.sb-t.lose .nm { opacity: .55; }
.disc.sm { width: 32px; height: 32px; box-shadow: 0 0 0 1px var(--line-2); }
.sb-t.us .disc.sm { box-shadow: 0 0 0 2px var(--yellow); }
.disc.xs { width: 22px; height: 22px; }
/* Score box: digits trimmed to their cap height so the spacing above, between and below is even. */
.sb-board { grid-area: board; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; min-width: 52px; padding: 0 12px; border-radius: 12px; background: #050505; color: #fff; font-family: var(--font-match); text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sb-board b { display: block; color: #cfcfd4; font: 800 28px/1 var(--font-match); font-variant-numeric: tabular-nums; text-box: trim-both cap alphabetic; }
.sb-board b.win { color: var(--yellow); }
.sb-board i { display: none; }
.sb-board.ko span { font: 700 23px/1 var(--font-match); letter-spacing: .01em; text-box: trim-both cap alphabetic; }
.sb.next .sb-board.ko span { color: var(--yellow); }
.sb-board.pp span { color: #ffb020; font: 700 19px/1 var(--font-match); }
.sb-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; color: var(--faint); font-size: 12.5px; }
.sb-meta .wdl { width: 18px; height: 18px; border-radius: 5px; font-size: 10.5px; }
.sb-note { display: inline-flex; align-items: flex-start; gap: 5px; flex-basis: 100%; color: var(--muted); line-height: 1.35; }
.sb-note .icon { margin-top: 1px; }
.sb-note .icon { width: 14px; height: 14px; }
.sb-footage { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--text); font-weight: 600; }
.sb-footage .icon { width: 14px; height: 14px; }
.sb.dim { opacity: .62; }
@media (min-width: 1100px) {
  .sb { grid-template-columns: 62px minmax(0, 1fr) auto; padding: 12px 14px 12px 12px; }
  .sb-t .nm { font-size: 21px; }
  .sb-wm { right: -30px; width: 170px; }
}
.match-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
.match-month { margin-top: 24px; }
.match-month .section-head { margin-bottom: 10px; }
.match-month .section-head h2 { font-size: 15px !important; }
.game-card-group { min-width: 0; }
.game-card-group + .game-card-group { margin-top: 0; }

/* ---------- Live score bar ---------- */
.livebar { position: sticky; top: 56px; z-index: 35; display: flex; align-items: center; gap: 10px; margin: 6px 12px 0; padding: 8px 10px 8px 8px; border-radius: 14px; background: #050505; color: #fff; box-shadow: 0 0 0 1px rgba(255, 45, 70, .5), 0 12px 30px -12px rgba(255, 45, 70, .55); font: 700 16px/1 var(--font-match); letter-spacing: .05em; text-transform: uppercase; }
.lb-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--live); color: #fff; font: 600 12.5px/1 var(--font-ui); letter-spacing: .02em; }
.lb-phase { color: #ff8b98; font: 600 13px/1 var(--font-ui); letter-spacing: normal; text-transform: none; white-space: nowrap; }
.lb-score { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.lb-digits { display: inline-flex; align-items: center; gap: 6px; }
.lb-digits b { color: var(--yellow); font: 800 22px/1 var(--font-match); }
.lb-digits i { width: 8px; height: 2px; border-radius: 2px; background: #888; font-size: 0; }
.livebar > .icon { width: 18px; height: 18px; color: #888; }
@media (max-width: 420px) { .lb-phase { display: none; } }
@media (min-width: 761px) { .livebar { top: 64px; margin: 8px 24px 0; } }
@media (min-width: 1100px) { .livebar { margin: 8px 32px 0; max-width: 1136px; } }

/* ---------- Goal moment ---------- */
.goal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(circle at 50% 45%, rgba(255, 229, 0, .38), rgba(5, 5, 5, .94) 62%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rd-fade-in .3s ease-out both; }
.goal.out { animation: rd-fade-out .4s ease-in forwards; }
.goal-rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; translate: -50% -50%; background: repeating-conic-gradient(rgba(255, 229, 0, .12) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0 18%, transparent 52%); mask-image: radial-gradient(circle, #000 0 18%, transparent 52%); animation: rd-spin 14s linear infinite; }
.goal-in { position: relative; padding: 0 16px; color: #fff; text-align: center; }
.goal .goal-crest { width: 116px; height: 116px; margin: 0 auto 6px; box-shadow: 0 0 0 4px #050505, 0 0 0 8px var(--yellow), 0 0 70px rgba(255, 229, 0, .65); animation: rd-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.goal h2 { margin: 0; color: var(--yellow); font: italic 800 clamp(84px, 24vw, 190px)/.9 var(--font-match); letter-spacing: -0.01em; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); transform: skewX(-6deg); animation: rd-slam-big .55s .1s cubic-bezier(.2, 1.4, .4, 1) both; }
.goal p { margin: 6px 0 0; font: 700 22px/1.2 var(--font-match); letter-spacing: .08em; text-transform: uppercase; animation: rd-rise .4s .4s both; }
.goal-score { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 18px; border-radius: 14px; background: #050505; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); animation: rd-rise .4s .55s both; }
.goal-score b { font: 800 40px/1 var(--font-match); }
.goal-score b:first-child { color: var(--yellow); }
.goal-score i { width: 10px; height: 3px; border-radius: 3px; background: var(--yellow); }
.confetti { position: absolute; top: -24px; width: 8px; height: 14px; border-radius: 2px; animation: rd-fall linear both; }
@keyframes rd-fall { to { transform: translateY(115vh) rotate(760deg); } }
@keyframes rd-slam-big { from { opacity: 0; transform: skewX(-6deg) scale(2.4); } }
@keyframes rd-pop { from { opacity: 0; transform: scale(.3) rotate(-30deg); } }
@keyframes rd-fade-in { from { opacity: 0; } }
@keyframes rd-fade-out { to { opacity: 0; } }
@keyframes rd-spin { to { rotate: 360deg; } }

/* ---------- Matchday motion: plays once when a page opens ---------- */
@keyframes rd-in-l { from { opacity: 0; transform: translateX(-26px); } }
@keyframes rd-in-r { from { opacity: 0; transform: translateX(26px); } }
@keyframes rd-crest { from { opacity: 0; transform: scale(.55) rotate(-14deg); } }
@keyframes rd-slam { 0% { opacity: 0; transform: scale(1.9); } 55% { opacity: 1; transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes rd-drop { from { transform: translate(-50%, -110%); } }
@keyframes rd-bg-l { from { opacity: .4; transform: translateX(-12%); } }
@keyframes rd-bg-r { from { opacity: .4; transform: translateX(12%); } }
@keyframes rd-sheen { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
@keyframes rd-rise { from { opacity: 0; transform: translateY(10px); } }
.enter .tk-side.l .tk-bg { animation: rd-bg-l .7s var(--ease) both; }
.enter .tk-side.r .tk-bg { animation: rd-bg-r .7s var(--ease) both; }
.enter .tk .disc { animation: rd-crest .65s .08s cubic-bezier(.3, 1.5, .5, 1) both; }
.enter .tk-side.l .tk-name { animation: rd-in-l .55s .16s var(--ease) both; }
.enter .tk-side.r .tk-name { animation: rd-in-r .55s .16s var(--ease) both; }
.enter .tk-mid > span { animation: rd-slam .55s .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.enter .tk-tab { animation: rd-drop .45s .4s var(--ease) both; }
.enter .tk-stub > * { animation: rd-rise .45s .45s var(--ease) both; }
.enter .sb { animation: rd-rise .45s var(--ease) both; }
.enter .sbs .sb:nth-child(2), .enter .match-grid > :nth-child(2) .sb { animation-delay: .06s; }
.enter .sbs .sb:nth-child(3), .enter .match-grid > :nth-child(3) .sb { animation-delay: .12s; }
.enter .sbs .sb:nth-child(n+4), .enter .match-grid > :nth-child(n+4) .sb { animation-delay: .18s; }
.tk-face::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); transform: translateX(-140%) skewX(-18deg); pointer-events: none; }
.enter .tk-face::after { animation: rd-sheen 1.1s .7s ease-out both; }
.tk:has(.tk-link):hover .tk-face::after { animation: rd-sheen .9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .enter *, .tk-face::after, .goal, .goal *, .is-live .dot, .livebar .dot { animation: none !important; }
  .tk, .sb { transition: none; }
}

/* ---------- Matches browser ---------- */
.browse-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.browse-heading .tabs { margin: 0; }
.rd-chips { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.rd-chips::-webkit-scrollbar { display: none; }
.rd-chips a { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--muted); font-size: 14px; font-weight: 500; }
.rd-chips a:hover { color: var(--text); }
.rd-chips a[aria-current] { background: var(--text); color: var(--bg); box-shadow: none; }
.match-filters { margin-bottom: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline); }
details.match-filters > summary { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px; min-height: 46px; padding: 0 14px !important; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
details.match-filters > summary > span { margin-left: auto; color: var(--faint); font-size: 13px !important; font-weight: 400; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-filters > summary .icon { width: 18px; height: 18px; color: var(--muted); }
.match-filters .filter-form { padding: 4px 14px 14px; }
.month-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.month-navigation .btn { min-height: 44px; height: 44px; padding: 0 14px; font-size: 14px; }
.month-navigation select, .browse-heading select { min-height: 44px !important; height: 44px; padding: 0 34px 0 14px !important; line-height: 1.2; font-size: 14px !important; }
@media (min-width: 761px) { .rd-chips { margin: 0 0 14px; padding: 2px 0; } }

/* ---------- Detail lists and stat tiles: calmer numbers ---------- */
.fact-list > div, .detail-list > div { align-items: baseline; }
.fact-list dt, .detail-list dt { color: var(--muted); font-size: 14px !important; font-weight: 450; }
.fact-list dd, .detail-list dd { font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: right; letter-spacing: normal !important; }
.stat > strong, .metric > strong { font-weight: 700 !important; letter-spacing: -0.03em !important; }
.stat > span, .metric > span { font-size: 13px !important; font-weight: 550; color: var(--muted); }
.stat.yellow, .metric.yellow { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 45%, var(--hairline)); }
.stat.yellow > span, .stat.yellow small { color: var(--muted); }
.field > span { color: var(--muted); font-size: 13.5px !important; font-weight: 550; }

.rd-greet-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rd-greet-actions .btn { min-height: 44px; height: 44px; font-size: 14px; }
.rd-task { margin-bottom: 16px; }
.rd-task .btn { min-height: 48px; }
@media (min-width: 1100px) { .match-month, .month-navigation, .match-filters { max-width: 860px; } }

/* ---------- League table ---------- */
.standings-table { font-variant-numeric: tabular-nums; }
.standings-table th[scope="row"] { text-align: left; font-weight: 550; }
.standings-table th[scope="row"] .rd-club span:last-child { max-width: none; }
.standings-table td, .standings-table th { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 14px !important; }
.standings-table td:last-child { font-weight: 700 !important; }
.standings-table tr.is-erskine > * { background: color-mix(in srgb, var(--yellow) 9%, transparent) !important; color: var(--text) !important; }
.standings-table tr.is-erskine > :first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.standings-table tr.is-erskine th[scope="row"] { font-weight: 700; }

.password-toggle, button.password-toggle { min-height: 44px; min-width: 56px; }
.password-control input { min-height: 52px !important; }
.password-control .password-toggle { min-height: 44px; right: 4px; padding: 0 14px; border-radius: 10px; background: var(--s3); }
.password-control .password-toggle:hover { background: var(--s4); color: var(--text); }
/* Segmented tabs wrap rather than hide options off-screen. */
.tabs { flex-wrap: wrap; overflow: visible; max-width: 100%; }
@media (max-width: 760px) { .tabs { display: flex; width: 100%; } .tabs a { flex: 1 0 auto; justify-content: center; } }
.section-head .btn, .page-head .btn { min-height: 44px; }

/* Keep live entry focused on one decision at a time. */
.live-editor details[data-live-entry] { padding: 0; margin: 0; background: none; border-radius: 0; }
.live-main-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.live-main-actions .btn { min-height: 64px; font-size: 20px; }
.live-editor fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.live-editor legend { margin-bottom: 16px; font-size: 18px; font-weight: 650; }
.live-editor [data-live-step="review"] { display: grid; gap: 16px; }
.live-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.live-choices label { position: relative; display: flex; flex: 1 1 130px; cursor: pointer; }
.live-choices input { position: absolute; top: 50%; left: 14px; margin: 0; transform: translateY(-50%); accent-color: var(--text); }
.live-choices span { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 12px 16px 12px 42px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--surface); overflow-wrap: anywhere; }
.live-choices input:checked + span { border-color: var(--text); background: var(--surface-2); }
.live-choices input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 3px; }
.live-entry-summary { font-weight: 600; overflow-wrap: anywhere; }
.live-editor .check-row { display: flex; align-items: center; gap: 10px; }
.live-editor .check-row input { flex: none; }

.pwa-revalidating .mobile-nav { visibility: hidden; }

.timeline-item > .live-event-marker { display: flex; flex: 0 0 36px; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; color: var(--text); line-height: 1; }
.live-event-marker .icon { width: 24px; height: 24px; }
.live-event-marker .live-card-badge { width: 16px; height: 24px; margin: 0; }
.live-event-marker .live-card-second_yellow { position: relative; isolation: isolate; }
.live-event-marker .live-card-second_yellow::before { content: ''; position: absolute; inset: -5px 3px 3px -5px; z-index: -1; border: 1px solid #ad9500; border-radius: 2px; background: var(--accent); }
.live-event-marker .live-event-minute { color: var(--muted); font: 600 13px/1 var(--font-ui); white-space: nowrap; }
.timeline-item[data-live-event-kind] > div { min-width: 0; }
.timeline-item[data-live-event-kind="goal"][data-live-event-side="erskine"] .icon { color: #229954; }
.timeline-item[data-live-event-kind="goal"][data-live-event-side="opponent"] .icon { color: var(--red); }

/* Recipient review cards must fit the form, including its narrow desktop column. */
[data-recipient-review] {
  min-width: 0;
}
[data-recipient-review] .selection-row {
  grid-template-columns: minmax(0, 1fr);
}
[data-recipient-review] .selection-row > * {
  min-width: 0;
  grid-column: 1;
  overflow-wrap: anywhere;
}
[data-recipient-review] .check-row {
  align-items: center;
  padding: 0;
  border: 0;
}
[data-recipient-review] .check-row > span {
  min-width: 0;
}
[data-recipient-review] .badge {
  max-width: 100%;
  white-space: normal;
}
[data-recipient-review] summary {
  padding-block: 12px;
  cursor: pointer;
}
[data-recipient-review] details > span,
[data-recipient-review] details > span > span {
  display: block;
}
[data-recipient-review] .check-row .stack {
  grid-template-columns: minmax(0, 1fr);
}