/* =============================================================================
   F1 Predictions — design system
   Mobile-first; on desktop the app sits in a centred mobile-width frame.
   All colours flow from CSS variables defined in base.html (sourced from
   PALETTE in app/config.py).
   ============================================================================= */

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
input, select, textarea, button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

/* ------------------------------------------------------------- Typography */
:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.92rem;
  --fs-md: 1.02rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.45rem;
  --fs-display: 1.75rem;
  --line-tight: 1.2;
  --line-base: 1.45;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --frame-width: 430px;
  --header-height: 52px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--line-base);
  color: var(--c-ink);
  background: var(--c-bg);
  /* Parchment grain — a very subtle radial gradient + noise feel without an asset. */
  background-image:
    radial-gradient(circle at 25% 15%, rgba(120, 95, 50, 0.05), transparent 50%),
    radial-gradient(circle at 75% 85%, rgba(100, 80, 40, 0.04), transparent 55%);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  
  /* RECOMMENDATION: 0.12 for a visible but tasteful paper texture. 
     Adjust between 0.08 and 0.15 based on your preference. */
  opacity: 0.12; 

  /* Lowered baseFrequency from 0.65 to 0.45 to make the "grit" slightly larger */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

body.body--locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: var(--line-tight);
  margin: 0 0 var(--space-3) 0;
}
h1 { font-size: var(--fs-display); font-weight: 600; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--space-3) 0; }
.muted { color: var(--c-ink-muted); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.tabular { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- Mobile app frame */

.frame {
  width: 100%;
  max-width: var(--frame-width);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  /* Desktop: the frame sits in the parchment, gently elevated. */
  .frame {
    min-height: calc(100dvh - 4rem);
    margin: 2rem auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 40px rgba(60, 50, 30, 0.08), 0 2px 4px rgba(60, 50, 30, 0.04);
    overflow: hidden;
  }
}

.frame__header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: var(--header-height);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  position: sticky;
  top: 0;
  z-index: 30;
}

.frame__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  text-align: center;
  text-decoration: none;
  color: var(--c-ink);
  letter-spacing: 0.01em;
}

.frame__main {
  padding: var(--space-4) var(--space-4) var(--space-6);
  flex: 1 1 auto;
}

/* -------------------------------------------------------- Hamburger button */

.menu-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-sm);
}
.menu-btn:hover { background: var(--c-surface-alt); }
.menu-btn__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--c-ink);
  border-radius: 1px;
}
.menu-btn--placeholder { visibility: hidden; }

/* ----------------------------------------------------------------- Drawer */

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(78%, 320px);
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  transform: translateX(-100%);
  transition: transform 220ms ease;
  z-index: 50;
  padding: calc(var(--header-height) + var(--space-4)) var(--space-4) var(--space-5);
  overflow-y: auto;
}
.drawer--open { transform: translateX(0); }

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.drawer__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 500;
}
.drawer__link:hover { background: var(--c-surface-alt); }
.drawer__link--button { font: inherit; cursor: pointer; }
.drawer__signout-form { margin: 0; }

.drawer__footer {
  list-style: none;
  margin: var(--space-5) 0 0 0;
  padding: var(--space-3) 0 0 0;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.drawer__footer-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--c-ink-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.drawer__footer-link:hover {
  background: var(--c-surface-alt);
  color: var(--c-ink);
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(40, 35, 25, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 40;
}
.drawer-scrim--visible { opacity: 1; pointer-events: auto; }

@media (min-width: 600px) {
  .drawer { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}

/* ------------------------------------------------------------- Flash messages */

.flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.flash {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.flash--error   { border-color: rgba(139, 31, 31, 0.4); background: rgba(139, 31, 31, 0.06); color: var(--c-accent); }
.flash--success { border-color: rgba(79, 107, 58, 0.4); background: rgba(79, 107, 58, 0.07); color: var(--c-points-10); }
.flash--info    { border-color: var(--c-border); }

/* ----------------------------------------------------------------- Cards */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.card > h2:first-child,
.card > h3:first-child { margin-top: 0; }
.card__hint {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

/* ----------------------------------------------------------------- Forms */

.form { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-muted);
  letter-spacing: 0.01em;
}
.field__input,
.field__select {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-base);
  color: var(--c-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field__input:focus,
.field__select:focus {
  outline: none;
  border-color: var(--c-ink-muted);
  box-shadow: 0 0 0 3px rgba(110, 100, 80, 0.12);
}
.field__error {
  color: var(--c-accent);
  font-size: var(--fs-xs);
}
.field__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn--primary:hover { background: #1f1d1a; }
.btn--secondary {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-ink);
}
.btn--secondary:hover { background: var(--c-surface-alt); }
.btn--danger {
  background: var(--c-accent);
  color: var(--c-bg);
}
.btn--danger:hover { background: #6f1818; }
.btn--block { width: 100%; }
.btn--small { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }

/* ---------------------------------------------------- Auth-page specifics */

.auth-page { padding-top: var(--space-5); }
.auth-page h1 {
  text-align: center;
  margin-bottom: var(--space-1);
}
.auth-page__subtitle {
  text-align: center;
  color: var(--c-ink-muted);
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
}
.auth-page__links {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.auth-page__links a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ----------------------------------------------------------- Points scale  */
/* Re-usable status pills for points and session statuses. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill--p10 { background: rgba(79, 107, 58, 0.13);  color: var(--c-points-10); }
.pill--p5  { background: rgba(184, 134, 44, 0.14); color: var(--c-points-5); }
.pill--p2  { background: rgba(93, 112, 136, 0.14); color: var(--c-points-2); }
.pill--p0  { background: rgba(156, 150, 138, 0.18); color: var(--c-points-0); }
.pill--neg { background: rgba(168, 90, 77, 0.14); color: var(--c-points-neg); }

.pill--status-upcoming    { background: rgba(111, 106, 94, 0.15);  color: var(--c-status-upcoming); }
.pill--status-in-progress { background: rgba(184, 134, 44, 0.16); color: var(--c-status-in-progress); }
.pill--status-pending     { background: rgba(138, 125, 82, 0.16); color: var(--c-status-pending); }
.pill--status-completed   { background: rgba(79, 107, 58, 0.13);  color: var(--c-status-completed); }

/* ---- Friend-view context strip ---- */
.friend-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--c-ink);
}
.friend-strip__name {
  font-weight: 600;
}
.friend-strip__back {
  color: var(--c-ink-muted);
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
}
.friend-strip__back:hover,
.friend-strip__back:focus {
  color: var(--c-ink);
  text-decoration: underline;
}

/* ----------------------------------------------------------------- Misc */

.divider {
  height: 1px;
  background: var(--c-border);
  margin: var(--space-4) 0;
}
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--space { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ----------------------------------------------------------- Round header */

.round-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4) 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--space-4);
}
.round-header__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}
.round-header__nav:hover { background: var(--c-surface-alt); }
.round-header__nav--disabled { opacity: 0.3; }
.round-header__title {
  text-align: center;
  font-family: var(--font-display);
}
.round-header__name { font-size: var(--fs-lg); font-weight: 500; }
.round-header__circuit { margin-top: 2px; }

/* ---------------------------------------------------------- Prediction rows */

.phase-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pred-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--c-border);
}
.pred-row:last-child { border-bottom: none; }
.pred-row__predicted { font-size: var(--fs-sm); }
.pred-row__actual { text-align: right; }
.pred-row__points { min-width: 44px; text-align: right; }

.round-header--no-nav {
  display: block;
  text-align: center;
}

/* ---------------------------------------------------------- Leaderboard rows */

.leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border);
}
.leaderboard-row--head {
  padding-top: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.leaderboard-row--self {
  background: var(--c-surface-alt);
  border-radius: var(--radius-sm);
  padding-left: 4px;
  padding-right: 4px;
}
.leaderboard-row__name {
  flex: 1 1 auto;
  min-width: 0;
}
.leaderboard-row__cols {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.leaderboard-row__link {
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
}
.leaderboard-row__last-link {
  text-decoration: none;
  color: inherit;
}

/* ----------------------------------------------------------- Status banner */

.status-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.status-banner--live {
  background: rgba(184, 134, 44, 0.10);
  border-color: rgba(184, 134, 44, 0.4);
  color: var(--c-status-in-progress);
}
.status-banner--pending {
  background: rgba(138, 125, 82, 0.10);
  border-color: rgba(138, 125, 82, 0.35);
  color: var(--c-status-pending);
}
.status-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: status-pulse 1.6s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ----------------------------------------------------------- Sticky save bar */

.predictions-form { padding-bottom: 80px; }   /* leave room for the sticky bar */

.sticky-save {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: var(--space-4) calc(-1 * var(--space-4)) 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  /* Above the iOS home-indicator safe area */
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

/* ----------------------------------------------------------- Field error state */

.field--error select,
.field--error .field__input {
  border-color: #b8442c;
  background: rgba(184, 68, 44, 0.04);
}
.field__error {
  font-size: var(--fs-xs, 0.75rem);
  color: #b8442c;
  margin-top: 4px;
}

/* Disabled submit (used while duplicates exist on the predictions form) */
.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------------------------- Rounds list */

.rounds-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  color: inherit;
}
.rounds-list-row:last-child { border-bottom: none; }
.rounds-list-row:hover { background: var(--c-surface-alt); }
.rounds-list-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rounds-list-row__name { font-weight: 500; }
.rounds-list-row__right { display: flex; align-items: center; gap: var(--space-3); }

/* --- Global Car Sketch Variants (Optimized for Trimmed PNG) --- */

/* 1. Main Hero (Login/Invite Pages) */
.auth-page__hero {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.hero-image {
  /* This fulfills your 80% size preference */
  width: 80%;
  max-width: 320px;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.8;
  filter: contrast(1.1) sepia(0.2);
}

/* 2. Brand Header (Hamburger Menu) */
.nav-brand-image {
  display: block;
  width: 175px;
  margin-bottom: var(--space-4);
  margin-left: var(--space-2);
  opacity: 0.5;
  mix-blend-mode: multiply;
  filter: sepia(0.2);
}

/* 3. Empty State Hero (e.g., No Leagues) */
.empty-hero-image {
  display: block;
  width: 200px;
  margin: 4rem auto;
  opacity: 0.7;
  mix-blend-mode: multiply;
  filter: sepia(0.2);
}

/* 4. Maker's Mark (Footer) */
.maker-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-8) 0 var(--space-4);
  opacity: 0.4;
  text-align: center;
}

.maker-mark-image {
  width: 100px; /* Increased size as requested */
  height: auto;
  mix-blend-mode: multiply;
  filter: grayscale(1) sepia(0.2);
  margin-bottom: var(--space-1);
}

.countdown {
  font-variant-numeric: tabular-nums;
  margin-left: 0.15rem;
}

.total-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  background: transparent;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* =============================================================================
   Additions for predictions edit + round view refresh.
   Append to the bottom of main.css. (Replaces any prior additions block.)
   ============================================================================= */

/* --------------------------------------------- Inline positional field row */
/* Used for the sequential Sprint/Quali/Race position picks where the label is
   short (e.g. "P3") and density matters. */

.field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}
.field--inline > .field__label {
  flex: 0 0 32px;
  margin: 0;
}
.field--inline > .field__select,
.field--inline > .field__input,
.field--inline > select,
.field--inline > input {
  flex: 1 1 auto;
  min-width: 0;
}

/* --------------------------------------------- Field-to-field spacing */
/* Gives breathing room between adjacent fields inside the predictions form,
   regardless of block or inline layout. */

.predictions-form .field + .field {
  margin-top: var(--space-3);
}

/* --------------------------------------------- Empty-state indicator */
/* A subtle red bar on the left edge of any prediction field that has no
   value yet — disappears once the user fills it in. Driven by the
   `data-empty` attribute, which is managed by the small inline script
   in edit.html. */

.field--prediction {
  border-left: 2px solid transparent;
  padding-left: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  transition: border-color 160ms ease;
}
.field--prediction[data-empty] {
  border-left-color: var(--c-accent);
}

/* --------------------------------------------- Sub-section header in cards */
/* Used inside the Race card to separate Top-10 picks from Extras. */

.card__subheader {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-ink);
  margin: var(--space-5) 0 var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-border);
}

/* --------------------------------------------- Phase-grid column headers */
/* Used in round.html — one header row at the top of each .phase-grid. */

.pred-row--head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.pred-row--head > div {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ---- Round view: total + global avg ----
   3-column grid: Total sits in the centre column (auto-sized, dead-
   centre on the page); Global avg sits in the left column, right-
   aligned against Total. align-items: end keeps the pill bottoms on
   the same baseline regardless of pill size. */
.round-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  column-gap: var(--space-5);
  margin: 0.25rem 0 1.5rem;
}
.round-total__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.round-total__item--secondary {
  grid-column: 1;
  justify-self: start;
  padding-left: var(--space-3);
}
.round-total__item--primary {
  grid-column: 2;
}
.round-total__label {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.total-score-pill--big {
  font-size: 2.25rem;
  padding: 0.4rem 1.4rem;
  font-weight: 400;
  line-height: 1;
}
.total-score-pill--medium {
  font-size: 1.15rem;
  padding: 0.2rem 0.7rem;
  font-weight: 400;
  line-height: 1;
}
.round-total__item--tertiary {
  grid-column: 3;
  justify-self: end;
  padding-right: var(--space-3);
}
.round-total__value {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.round-total__value .tooltip-trigger {
  margin-left: -0.35rem;
}
.total-score-pill--primary {
  background: var(--c-surface-alt);
}

/* ---- Phase-section score pill (sits next to status label) ---- */
.total-score-pill--phase {
  font-size: 0.95rem;
  padding: 0.1rem 0.55rem;
}

/* ---- Exact-match tick pill (Result column) ---- */
.pill--exact {
  background-color: var(--c-points-10);   /* matches palette.points_10 */
  color: var(--c-surface);               /* matches palette.surface */
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  display: inline-block;
}

/* ---- Substitution star next to a result ---- */
.result-star {
  margin-left: 0.15rem;
  color: #6f6a5e;
  font-weight: 700;
}

/* ---- Example round styling for new users ---- */

.example-round {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.example-round__caption {
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

/* ---- Tooltip component ----
   Generic component: any [data-tooltip="..."] becomes a tap-to-toggle
   trigger; the bubble is appended to <body> on open so it can't be
   clipped by overflow on ancestors. */

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink-muted);
  font-size: 0.7rem;
  font-style: italic;
  font-family: var(--font-display);
  line-height: 1;
  border: 1px solid var(--c-border);
  cursor: pointer;
  vertical-align: middle;
}
.tooltip-trigger:hover,
.tooltip-trigger:focus {
  color: var(--c-ink);
  border-color: var(--c-ink-muted);
  outline: none;
}

.tooltip {
  position: absolute;
  z-index: 100;
  max-width: 220px;
  padding: var(--space-2) var(--space-3);
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(40, 35, 25, 0.18);
  /* Small arrow above */
}
.tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--c-ink);
}

/* --------------------------------------------- Admin: users list */

.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row__main { min-width: 0; }
.admin-user-row__name {
  display: flex;
  align-items: center;
  font-weight: 500;
}
.admin-user-row__tags {
  display: flex;
  gap: var(--space-1);
  margin-top: 3px;
  min-height: 0;
}
.admin-user-row__actions {
  display: flex;
  gap: var(--space-1);
  flex: 0 0 auto;
}
/* Fixed widths so the button column is a straight edge across all rows,
   regardless of toggle state. */
.btn.admin-toggle { min-width: 92px; }
.btn.admin-reset  { min-width: 60px; }

/* --------------------------------------------- Admin: collapsible sessions */

.admin-sessions {
  margin-top: var(--space-2);
}
.admin-sessions__summary {
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  cursor: pointer;
  list-style: none;            /* hide default marker, add our own */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-sessions__summary::-webkit-details-marker { display: none; }
.admin-sessions__summary::before {
  content: "▸";
  font-size: 0.8em;
  transition: transform 120ms ease;
}
.admin-sessions[open] .admin-sessions__summary::before {
  transform: rotate(90deg);
}
.admin-sessions__body {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --------------------------------------------- Leaderboard heatmap */
/* Horizontally scrolling users×rounds score matrix. The Player column is
   frozen; round columns scroll off to the right as the season builds. */

.heatmap-card {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.heatmap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-4);
}
.heatmap {
  border-collapse: separate;
  border-spacing: 4px;
  font-variant-numeric: tabular-nums;
}
.heatmap th,
.heatmap td { padding: 0; }

.heatmap__corner,
.heatmap__round {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  font-weight: 400;
  padding-bottom: 6px;
}
.heatmap__round {
  min-width: 44px;
  text-align: center;
}
.heatmap__corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--c-surface);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  padding-right: var(--space-3);
  box-shadow: 6px 0 6px -6px rgba(60, 50, 30, 0.35);
}

.heatmap__name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-surface);
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
  padding: 0 var(--space-5) 0 2px;
  box-shadow: 6px 0 6px -6px rgba(60, 50, 30, 0.35);
}
.heatmap__name--self {
  background: var(--c-surface-alt);
  border-radius: var(--radius-sm);
}

.heatmap__cell {
  height: 34px;
  min-width: 44px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.heatmap__cell--empty {
  background: transparent;
  color: var(--c-points-0);
}
.heatmap__cell--very-low  { background: var(--heat-very-low-bg);  color: var(--heat-very-low-fg); }
.heatmap__cell--low       { background: var(--heat-low-bg);       color: var(--heat-low-fg); }
.heatmap__cell--medium    { background: var(--heat-medium-bg);    color: var(--heat-medium-fg); }
.heatmap__cell--high      { background: var(--heat-high-bg);      color: var(--heat-high-fg); }
.heatmap__cell--very-high { background: var(--heat-very-high-bg); color: var(--heat-very-high-fg); }

/* --------------------------------------------- Leaderboard tabs (scrollable) */
/* Four tabs overflow the frame on narrow screens; scroll horizontally rather
   than wrap. Scrollbar hidden — the cut-off tab is the affordance. */

.leaderboard-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.leaderboard-tabs::-webkit-scrollbar { display: none; }
.leaderboard-tabs .btn { flex: 0 0 auto; white-space: nowrap; }

/* --------------------------------------------- Leaderboard compare grid */
/* Transposed round view: prediction slots are frozen rows, league members are
   scrolling columns with angled names. Styled to match round.html — muted
   lightweight labels, Fraunces section headers. One scroll container (not a
   card per phase) so the frozen column and horizontal scroll stay in sync. */

.compare-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--c-ink-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}
.compare-back:hover,
.compare-back:focus { color: var(--c-ink); }

.compare-card {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-6) 0 var(--space-4);
}
.compare {
  border-collapse: separate;
  border-spacing: 4px;
  font-variant-numeric: tabular-nums;
}
.compare th,
.compare td { padding: 0; }

.compare__corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--c-surface);
  box-shadow: 6px 0 6px -6px rgba(60, 50, 30, 0.35);
}

/* Angled user names — chart-axis style, ~17° off vertical, rising right.
   Anchored at the bottom so they rise from their column without drifting
   under the frozen label column. Nudge the rotation 194–200deg for 14–20°;
   use 163deg instead if you'd rather they lean the other way. */
.compare__user {
  height: 104px;
  vertical-align: bottom;
  min-width: 36px;
  padding: 0 0 var(--space-1);
}
.compare__user span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.compare__user--self span { color: var(--c-ink); font-weight: 500; }
.compare__user-link { text-decoration: none; color: inherit; }
.compare__user-link:hover { color: var(--c-ink); }

/* Row labels — lightweight + muted, like round.html's .pred-row__label. */
.compare__label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-surface);
  text-align: left;
  padding: 0 var(--space-3) 0 2px;
  box-shadow: 6px 0 6px -6px rgba(60, 50, 30, 0.35);
}
.compare__label-text {
  display: block;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-ink-muted);
}

/* Total row — Fraunces headline numbers, label in ink, breathing room below. */
.compare tbody tr:first-child .compare__cell { padding-bottom: var(--space-2); }
.compare__label--total .compare__label-text { color: var(--c-ink); }
.compare__total {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-ink);
}

/* Phase header rows — Fraunces section titles, like round.html card headers. */
.compare__subhead {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-surface);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--c-ink);
  padding: var(--space-3) var(--space-3) var(--space-2) 2px;
  box-shadow: 6px 0 6px -6px rgba(60, 50, 30, 0.35);
}

/* Cells — pills exactly as round.html; self column gently tinted. */
.compare__cell {
  text-align: center;
  min-width: 36px;
}
.compare__cell--self { background: var(--c-surface-alt); }

/* Spacing between phase headers */
.compare tbody tr:has(.compare__subhead) td {
  padding-top: 50px;
}
.compare__subhead { padding-top: 50px; }