/* Hyrox-inspired racing dark theme — original design */

:root {
  --bg: #0a0a0b;
  --bg-2: #111114;
  --bg-3: #18181d;
  --line: #26262e;
  --line-2: #3a3a45;
  --fg: #f4f4f5;
  --fg-2: #a1a1aa;
  --fg-3: #6b6b75;
  --accent: oklch(88% 0.20 130);   /* lime neon */
  --accent-2: oklch(74% 0.18 130);
  --warn: oklch(72% 0.22 28);      /* race red */
  --rest: oklch(70% 0.04 250);

  --display: 'Barlow Condensed', 'Oswald', 'Bebas Neue', sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Responsive scale tokens */
  --pad-x: 24px;
  --display-hero: 88px;
  --display-mega: 76px;
  --gap-md: 16px;
  --gap-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

::selection { background: var(--accent); color: #000; }

/* Display utilities */
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.9; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.tabular { font-variant-numeric: tabular-nums; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* Subtle grid background */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Striped placeholder pattern */
.stripe-bg {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.03) 0,
    rgba(255,255,255,0.03) 8px,
    transparent 8px,
    transparent 16px
  );
}

.stripe-accent {
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(88% 0.20 130 / 0.12) 0,
    oklch(88% 0.20 130 / 0.12) 8px,
    transparent 8px,
    transparent 16px
  );
}

/* Animations */
@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.85); }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.fade-up { animation: fade-up .7s cubic-bezier(.2,.8,.2,1) both; }

/* Marquee */
.marquee {
  display: flex;
  width: max-content;
  animation: scroll-marquee 60s linear infinite;
}
.marquee-fast { animation-duration: 30s; }

/* Hover */
a { color: inherit; text-decoration: none; }

/* Disable internal scrollbars in artboards */
.artboard { overflow: hidden; }

/* ============================================================
   RESPONSIVE LAYER
   ============================================================ */

/* Root container — fluid up to 1200px, padding scales with viewport */
.tc-root {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--pad-x);
}

/* Generic responsive grid utilities — mobile-first via media-query overrides */
/* minmax(0, 1fr) prevents children with min-content > 1fr from blowing the column out */
.r-grid { display: grid; gap: var(--gap-md); }
.r-grid > * { min-width: 0; }
.r-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.r-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.r-grid-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }

/* Visibility */
.r-only-sm { display: none !important; }
.r-only-md { display: none !important; }

/* Horizontal scroll wrapper (for nav/day-selector) */
.r-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.r-scroll-x::-webkit-scrollbar { height: 4px; }

/* History list — desktop grid, mobile flat-card */
.r-history-head,
.r-history-row {
  display: grid;
  grid-template-columns: 70px 80px 1fr 90px 70px 80px 40px;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   TABLET — ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --pad-x: 20px;
    --display-hero: 64px;
    --display-mega: 56px;
  }

  .r-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r-grid-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   MOBILE — ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --pad-x: 16px;
    --display-hero: 48px;
    --display-mega: 38px;
    --gap-md: 12px;
    --gap-sm: 10px;
  }

  /* Stack everything — single column */
  .r-grid-2,
  .r-grid-3,
  .r-grid-4 { grid-template-columns: minmax(0, 1fr); }

  /* 2-col instead of 5 for stat strips, 3-col for day-strip / 9-station */
  .r-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-grid-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-grid-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Hero title: looser line-height + bottom padding so 2 lines never collide with meta */
  .r-display-hero { line-height: 1.02 !important; padding-bottom: 4px; }
  .r-display-mega { line-height: 1.0 !important; }

  /* Sparkline inside ModuleCard — let SVG shrink instead of forcing its width attr */
  .r-grid-3 svg { max-width: 100%; height: auto; }

  /* Inline-grid contexts (not using .r-grid wrapper) — force shrinkable children */
  .r-hero > *,
  .r-hero-countdown > *,
  .r-athlete > *,
  .r-athlete-stats > *,
  .r-today > *,
  .r-agenda-title > *,
  .r-agenda-session > *,
  .r-block-row > *,
  .r-charts > *,
  .r-station-row > *,
  .r-history-row > *,
  .r-storico-query > * { min-width: 0; }

  /* Make all SVGs in known-tight scopes scale */
  .r-charts svg,
  .r-today svg { max-width: 100%; height: auto; }

  /* Program 16-week grid — wrap to 2 rows so cells don't blow the container */
  .r-program-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .r-program-grid > * { min-width: 0; }

  /* Visibility helpers */
  .r-hide-sm { display: none !important; }
  .r-only-sm { display: initial !important; }

  /* Sys bar — only show middle (uplink) */
  .r-sysbar { font-size: 10px !important; gap: 8px; }
  .r-sysbar > *:not(.r-sysbar-mid) { display: none; }

  /* Top nav — horizontal scroll, no shrink */
  .r-topnav-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .r-topnav-meta { display: none; }
  .r-nav-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .r-nav-tabs > a { flex-shrink: 0; }

  /* History row → card layout */
  .r-history-head { display: none !important; }
  .r-history-row {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "type   title  arrow"
      "date   meta   meta";
    row-gap: 6px;
    column-gap: 12px;
    padding: 14px 4px !important;
  }
  .r-history-row > .rh-date    { grid-area: date; }
  .r-history-row > .rh-type    { grid-area: type; }
  .r-history-row > .rh-title   { grid-area: title; min-width: 0; }
  .r-history-row > .rh-load,
  .r-history-row > .rh-dur,
  .r-history-row > .rh-rpe     { display: none; }
  .r-history-row > .rh-meta    { grid-area: meta; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--fg-3); }
  .r-history-row > .rh-arrow   { grid-area: arrow; }

  /* Hero countdown — stack vertically */
  .r-hero { grid-template-columns: 1fr !important; gap: 20px !important; }
  .r-hero-countdown {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px dashed var(--line-2);
    padding-top: 16px !important;
  }
  .r-hero-countdown > div { min-width: 0 !important; }

  /* Athlete strip → stack */
  .r-athlete { grid-template-columns: 1fr !important; gap: 12px !important; }
  .r-athlete-stats {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px dashed var(--line-2);
    padding-top: 12px !important;
  }
  .r-athlete-streak { text-align: left !important; }

  /* Today bar */
  .r-today { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Agenda title pair */
  .r-agenda-title { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Agenda session pair */
  .r-agenda-session { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Agenda block grid */
  .r-block-row {
    grid-template-columns: 50px 1fr 50px !important;
    gap: 10px !important;
  }

  /* Storico search */
  .r-storico-query { grid-template-columns: 1fr !important; gap: 10px !important; }
  .r-storico-filters { flex-wrap: wrap; }

  /* Dashboard charts */
  .r-charts { grid-template-columns: 1fr !important; }

  /* Dashboard stations — card layout */
  .r-station-row {
    grid-template-columns: 50px 1fr 70px !important;
    grid-template-areas:
      "code  name  pct"
      "bar   bar   bar"
      "pb    target target";
    gap: 8px 12px !important;
    padding: 14px 4px !important;
  }
  .r-station-row > .rs-code   { grid-area: code; }
  .r-station-row > .rs-name   { grid-area: name; min-width: 0; }
  .r-station-row > .rs-pb     { grid-area: pb; display: flex; gap: 8px; align-items: baseline; }
  .r-station-row > .rs-target { grid-area: target; display: flex; gap: 8px; align-items: baseline; }
  .r-station-row > .rs-bar    { grid-area: bar; }
  .r-station-row > .rs-pct    { grid-area: pct; text-align: right !important; }

  /* Reduce display sizes already handled via tokens but also one-shot overrides */
  .r-display-hero { font-size: var(--display-hero) !important; }
  .r-display-mega { font-size: var(--display-mega) !important; }

  /* Hide non-essential decorative things */
  .r-hide-sm-strict { display: none !important; }
}

/* Smaller phones */
@media (max-width: 380px) {
  :root {
    --display-hero: 42px;
    --display-mega: 32px;
  }
  .r-grid-5,
  .r-grid-9 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}