/*
 * Legionnaire FC — design tokens and shared styles, ported from the
 * Claude Design handoff (project 6a623b7e, "Legionnaire FC.dc.html").
 * Propshaft serves this directly — no build step, no bundler.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --lg-bg: #0f1512;
  --lg-surface: #1b241f;
  --lg-edge: #3a463c;
  --lg-text: #eaf0eb;
  --lg-a100: #eefaf1;
  --lg-a300: #a9e3bf;
  --lg-a400: #6fca8e;
  --lg-a500: #3ea267;
  --lg-a600: #2f8353;
  --lg-a700: #1f6440;
  --lg-a800: #143f2a;
  --lg-a900: #0f2a1d;
  --lg-sec: #123c27;
  --lg-sec2: #0a2016;
  --lg-glow: #13291d;

  --lg-tint: color-mix(in srgb, var(--lg-a500) 16%, transparent);
  --lg-tint2: color-mix(in srgb, var(--lg-a500) 20%, transparent);
  --lg-ring: color-mix(in srgb, var(--lg-a400) 55%, transparent);
  --lg-surface-50: color-mix(in srgb, var(--lg-surface) 55%, transparent);
  --lg-surface-60: color-mix(in srgb, var(--lg-surface) 65%, transparent);
  --lg-bg-86: color-mix(in srgb, var(--lg-bg) 88%, transparent);
  --lg-bg-55: color-mix(in srgb, var(--lg-bg) 58%, transparent);
  --lg-row-hover: color-mix(in srgb, var(--lg-a500) 10%, var(--lg-surface));

  /* spacing scale — 0.7x, per the design's own handoff note */
  --lg-space-1: 2.8px;
  --lg-space-2: 5.6px;
  --lg-space-3: 8.4px;
  --lg-space-4: 11.2px;
  --lg-space-6: 16.8px;
  --lg-space-8: 22.4px;

  --lg-radius-sm: 4px;
  --lg-radius-md: 8px;
  --lg-radius-lg: 14px;
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--lg-space-2);
}

a { color: var(--lg-a400); text-decoration: none; }
a:hover { color: var(--lg-a300); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lg-a400); outline-offset: 2px; }

@keyframes lgpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes lgshimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

.lg-skel {
  background: linear-gradient(90deg, var(--lg-surface) 0%, var(--lg-edge) 40%, var(--lg-surface) 80%);
  background-size: 420px 100%;
  animation: lgshimmer 1.15s linear infinite;
  border-radius: 4px;
}
.lg-row:hover { background: var(--lg-row-hover) !important; }
/* "Show more" / "Full table" dividers: swap the label when the <details> is open */
details[data-more-leagues] .when-open, details[data-full-table] .when-open { display: none; }
details[data-more-leagues][open] .when-open, details[data-full-table][open] .when-open { display: inline; }
details[data-more-leagues][open] .when-closed, details[data-full-table][open] .when-closed { display: none; }
.lg-tile { transition: transform .14s ease, box-shadow .14s ease; }
.lg-tile:hover { box-shadow: 0 0 0 1px var(--lg-a500), 0 10px 30px rgba(0,0,0,.5); transform: translateY(-2px); }
.lg-rail { scrollbar-width: thin; scrollbar-color: var(--lg-edge) transparent; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--lg-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--lg-space-2) calc(var(--lg-space-3) * 1.2);
  border-radius: var(--lg-radius-md);
}
.btn-primary { color: var(--lg-a400); border-color: var(--lg-a500); }
.btn-primary:hover { background: color-mix(in srgb, var(--lg-a500) 12%, transparent); }
.btn-secondary { border-color: rgba(233,233,237,.16); }
.btn-secondary:hover { background: color-mix(in srgb, var(--lg-text) 7%, transparent); }

/* Date strip: one column per visible day; outer days drop off on narrow screens. */
.lg-daystrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.8px; }
.lg-day { display: none; }
.lg-day[data-abs="0"], .lg-day[data-abs="1"], .lg-day[data-abs="2"] { display: flex; }
@media (min-width: 520px)  { .lg-day[data-abs="3"]  { display: flex; } }
@media (min-width: 640px)  { .lg-day[data-abs="4"]  { display: flex; } }
@media (min-width: 760px)  { .lg-day[data-abs="5"]  { display: flex; } }
@media (min-width: 880px)  { .lg-day[data-abs="6"]  { display: flex; } }
@media (min-width: 1000px) { .lg-day[data-abs="7"]  { display: flex; } }
@media (min-width: 1120px) { .lg-day[data-abs="8"]  { display: flex; } }
@media (min-width: 1240px) { .lg-day[data-abs="9"]  { display: flex; } }
@media (min-width: 1360px) { .lg-day[data-abs="10"] { display: flex; } }
.lg-day:hover { filter: brightness(1.15); }

/* League view team rows: summary chevron flips when the row is open. */
details[data-team-row] > summary::-webkit-details-marker { display: none; }
details[data-team-row][open] .lg-chevron { transform: rotate(180deg); }

.btn-block { display: flex; width: 100%; }

/* "Saved to your account" toast: fades in, holds ~1.8s, fades out; never intercepts clicks. */
.lg-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; color: var(--lg-a100); background: var(--lg-a800);
  box-shadow: 0 0 0 1px var(--lg-a600), 0 10px 30px rgba(0,0,0,.5);
  pointer-events: none; opacity: 0; animation: lgtoast 2.2s ease forwards;
}
@keyframes lgtoast {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}