/* ============================================================
   GTD LEAGUE — UNIFIED THEME  (merged build)
   Design: Home + Draft Day glass nav system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  /* ⚠️ LOAD-BEARING — DO NOT recolor these to a new brand (learned the hard way, v4.6.25→v4.6.28).
     These are NOT just a first-paint flash. The LEGACY tenants (gtd/test2/thickslicepi, stored
     var(--gtd-primary,#241a3d)/var(--gtd-accent,#d9a441)) are deliberately left on THIS :root by the legacy guard in js/site.js
     (isLegacyBrand) and admin/index.html (applyAdminTheme, line ~2371) — they render FROM these
     values and never re-apply their stored colors. So changing this block REPAINTS GTD's live
     public site AND admin console. v4.6.25 flipped it to navy and turned GTD navy on prod; v4.6.28
     reverted it. New leagues do NOT need this changed — they store navy (#0B132B/#1565FF) as a
     column default and apply it at runtime via applyLeagueTheme/applyAdminTheme; the login flash is
     handled by the anti-flash localStorage cache (`hqpal`), not by this default. If you want a navy
     platform default, first remove the legacy palette guard so GTD applies its own stored purple —
     never repaint the guarded tenants by editing this block. */
  --gtd-primary:       #241a3d;
  --gtd-primary-dark:  #150f26;
  --gtd-primary-light: #362a54;
  --gtd-accent:        #d9a441;
  --gtd-accent-light:  #f0c675;
  --gtd-on-accent:     var(--gtd-primary-dark,#150f26);  /* readable text/icon on the accent (JS recomputes per tenant) */
  --gtd-text:          #f5f2ec;
  --gtd-text-dim:      #b9aecf;
  --gtd-border:        rgba(255,255,255,0.12);
  --gtd-card:          color-mix(in srgb,var(--gtd-primary,#241a3d) 72%,transparent);
  /* v4.9.35: both now Lato (Izhar's call, applies everywhere these vars are read -- public site,
     commissioner admin, mobile and desktop). font-display keeps the heavier 900 weight at its
     call sites (most --font-display usages already set their own font-weight/size, e.g.
     .award-value{font-family:var(--font-display);font-size:24px}) so the size/weight hierarchy
     built on top of Anton's always-bold look is preserved even though both vars are now the same
     family -- only the typeface itself changed, not each usage's own size/weight/letter-spacing. */
  --font-display: 'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:    'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Per-page overlay (applied in each page's inline style) */
  --page-overlay: linear-gradient(180deg,rgba(20,16,42,0.55),rgba(20,16,42,0.78) 55%,rgba(20,16,42,0.94));
}

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

body.help-hidden .gtd-help { display: none !important; }


html { height: 100%; }
body {
  margin: 0; padding: 0;
  min-height: 100%;
  background-color: var(--gtd-primary-dark);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  color: var(--gtd-text);
  font-family: var(--font-body);
}
a { color: var(--gtd-accent-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Glass Nav ─────────────────────────────────────────────── */
/* Env banner (non-prod only): push the fixed floating header down by the
   banner height so it never sits under the red bar. Normal-flow pages (admin,
   platform-admin) are handled by body padding-top in each banner script. */
.has-env-banner .site-header { top: 40px; }
@media (max-width:640px) { .has-env-banner .site-header { top: 34px; } }
.site-header {
  position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  z-index: 100; width: calc(100% - 32px); max-width: 1100px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 10px 10px;
  background: color-mix(in srgb,var(--gtd-primary-dark,#150f26) 55%,transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  flex-wrap: wrap; gap: 10px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--gtd-text);
}
.brand img { height: 38px; width: 38px; object-fit: contain; border-radius: 50%; transition: transform .12s ease; }
.brand:active img { transform: scale(.92); }   /* v4.23.0 (Home-return option A): the logo is the Home button -- it now has a pressed state */
/* ...and on phones, on every page except Home, it wears a small house badge so it reads as a button. Home itself stays plain. The hamburger is unchanged. */
@media (max-width: 700px) {
  .brand[data-home="0"] { position: relative; }
  /* v4.27.1: on phones the header logo is the SAME size as the profile photo (32px; it was 38px, so it looked bigger and crowded the Insider hero card below it). The house badge is re-placed for the smaller logo. */
  .site-header .brand img { width: 32px; height: 32px; }
  .brand[data-home="0"]::after {
    content: ''; position: absolute; left: 19px; top: 19px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--gtd-accent, #d9a441) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23150f26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
    box-shadow: 0 0 0 2px var(--gtd-primary, #1a0a30);
    pointer-events: none;
  }
}
.brand .name {
  font-family: var(--font-display); font-size: 16px; letter-spacing: 1px;
  color: var(--gtd-text); line-height: 1;
}
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  padding: 8px 13px; border-radius: 999px;
  font-weight: 600; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gtd-text-dim); text-decoration: none;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: rgba(255,255,255,0.08); color: var(--gtd-text); text-decoration: none; }
.site-nav a.active { background: var(--gtd-accent); color: var(--gtd-primary-dark); }
.gear-btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--gtd-text-dim); flex-shrink: 0; padding: 0;
  transition: background .15s, color .15s;
}
.gear-btn:hover { color: var(--gtd-text); background: rgba(255,255,255,0.14); }

/* ── Page structure ─────────────────────────────────────────── */
.page-wrap {
  max-width: 1100px; margin: 0 auto;
  padding: 110px 24px 60px;
}
.page-hero { text-align: center; margin-bottom: 32px; }
.page-hero .eyebrow,
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px; letter-spacing: 4px; font-weight: 600;
  color: var(--gtd-accent); text-transform: uppercase; margin-bottom: 8px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px,5vw,52px); margin: 0; letter-spacing: 2px; line-height: 1;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Card ───────────────────────────────────────────────────── */
.card {
  background: var(--gtd-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gtd-border);
  border-radius: 16px; padding: 24px; margin-bottom: 20px;
}
/* Shared small circular manager avatar (js/site.js gtdAvatar) */
.gtd-avatar { border-radius:50%; object-fit:cover; flex:none; vertical-align:middle; }
.gtd-avatar-fallback { display:inline-flex; align-items:center; justify-content:center; background:var(--gtd-primary-light, rgba(255,255,255,0.12)); color:var(--gtd-text); font-weight:700; }
.gtd-name-with-avatar { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.card h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gtd-accent-light); margin: 0 0 18px;
}
.empty-note {
  color: var(--gtd-text-dim); text-align: center; padding: 40px 20px;
  font-size: 14px;
}
/* Shared 3-state data messages (loading / empty / errored) — see gtdRenderState.
   Distinct so an outage never reads as "no content yet". */
.gtd-state { text-align: center; padding: 22px 18px; font-size: 13.5px; line-height: 1.5; border-radius: 12px; }
.gtd-state-loading { color: var(--gtd-text-dim); }
.gtd-state-empty { color: var(--gtd-text-dim); }
.gtd-state-error { color: #e6a2a2; background: rgba(224,97,107,0.08); border: 1px solid rgba(224,97,107,0.22); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer:empty { display: none; }   /* v4.20.1: js/site.js empties and hides the footer after load; never show the empty bordered box before that */
.site-footer {
  margin-top: 60px; padding: 24px 28px; text-align: center;
  color: var(--gtd-text-dim); font-size: 12px; letter-spacing: 0.5px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: color-mix(in srgb,var(--gtd-primary-dark,#150f26) 60%,transparent); backdrop-filter: blur(10px);
}

/* ── Forms ──────────────────────────────────────────────────── */
button, input, select, textarea { font-family: var(--font-body); font-size: 14px; }
input, select, textarea {
  background: rgba(255,255,255,0.05); border: 1px solid var(--gtd-border);
  color: var(--gtd-text); border-radius: 10px; padding: 9px 12px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gtd-accent); }
/* v4.10.6 (desktop UX pass, session 1): ONE keyboard-focus system for the public site and the admin console.
   :where() keeps specificity at zero, so any component that already draws its own focus style (e.g. .la-card) simply wins.
   Buttons/links/summaries get a gold ring; fields keep their border change and add a soft halo. Mouse clicks never trigger it (:focus-visible). */
:where(a[href], button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--gtd-accent-light, #f0c675); outline-offset: 2px; }
:where(input, select, textarea):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gtd-accent, var(--gtd-accent,#d9a441)) 38%, transparent); }
/* v4.10.10: Text size preference on DESKTOP (phones use text-size-adjust, which desktop browsers ignore). Scales the content areas only. */
@media (min-width: 761px) { .page-wrap, .hero-inner, .league-archive { zoom: var(--gtd-font-zoom, 1); } }
/* Shared hover for things that are clickable but had no hover state. Fine pointers only, so phones never get a stuck hover. */
@media (hover: hover) and (pointer: fine) {
  :where([onclick]:not(button, a, input, select, textarea), summary, [role="button"], .po-summary, .sched-card, .nav-row, .dd-util-tile, .pmt-navcard, .survey-review-row, .hist-item-summary, .mgr-health-tile, .tma-season, .agd-item-card, .hq-bcard, .rc-card, .rc-row, .award-card):hover { filter: brightness(1.13); border-color: color-mix(in srgb, var(--gtd-accent, var(--gtd-accent,#d9a441)) 45%, transparent); }
  :where([onclick]:not(button, a, input, select, textarea), summary, [role="button"], .po-summary, .sched-card, .nav-row, .dd-util-tile, .pmt-navcard, .survey-review-row, .hist-item-summary, .mgr-health-tile, .tma-season, .agd-item-card, .hq-bcard, .rc-card, .rc-row, .award-card) { transition: filter .12s ease, border-color .12s ease; }
}
button {
  background: rgba(255,255,255,0.06); border: 1px solid var(--gtd-border);
  color: var(--gtd-text); border-radius: 10px; padding: 10px 18px; cursor: pointer;
  transition: background .15s;
}
button:hover { background: rgba(255,255,255,0.12); }
button.primary {
  background: var(--gtd-accent); border-color: var(--gtd-accent);
  color: var(--gtd-primary-dark); font-weight: 700;
}
button.primary:hover { filter: brightness(1.08); }
button.danger { color: #ff9090; }

.field-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.field-row label { width: 180px; font-size: 13px; color: var(--gtd-text-dim); flex-shrink: 0; }
.field-row input:not([type="checkbox"]):not([type="radio"]), .field-row select, .field-row textarea { flex: 1; min-width: 200px; }
.field-row input[type="checkbox"], .field-row input[type="radio"] { width: 16px; height: 16px; flex: none; min-width: 0; margin: 0; accent-color: var(--gtd-accent); cursor: pointer; }
/* P2-19: native date inputs carry their own metrics (picker widget, box model),
   so a type=date sat taller/offset from the text inputs next to it in the Draft
   Day Info panel. Match the box model + height so it aligns with its siblings. */
.field-row input[type="date"] { box-sizing: border-box; min-height: 38px; }
/* v4.9.112: iOS Safari gives native date/time inputs an intrinsic width wider than a phone card, so the
   Draft date field ran off the right edge (and centered its value). Strip the native appearance so the
   normal width:100% rules win, cap at the container, and left-align the value like the text inputs. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 0; box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  background: rgba(255,255,255,0.05); border: 1px solid var(--gtd-border);
  color: var(--gtd-text-dim); padding: 8px 16px; border-radius: 10px; cursor: pointer;
}
.tab-btn.active {
  color: var(--gtd-primary-dark); border-color: var(--gtd-accent);
  background: var(--gtd-accent); font-weight: 700;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Status messages ─────────────────────────────────────────── */
.status-msg { font-size: 13px; color: var(--gtd-text-dim); }
.status-msg.error { color: #ff9090; }
.status-msg.ok { color: #7be0a1; }

/* ── Help icons ─────────────────────────────────────────────── */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--gtd-text-dim);
  font-size: 11px; font-weight: 700; font-style: normal;
  font-family: var(--font-body);
  margin-left: 6px; cursor: pointer; vertical-align: middle; flex-shrink: 0;
}
.help-icon:hover { background: rgba(255,255,255,0.16); color: var(--gtd-text); }
/* Keeps the icon glued to its preceding label text -- without this, a plain
   inline .help-icon can legitimately line-wrap onto its own line on narrow
   viewports, since it's just inline flow like any other text, visually
   disconnecting it from the header it's meant to annotate. Applies globally
   to any short label/header containing one, rather than patching each page
   individually. */
:is(h1, h2, h3, h4, .hero-label, .l):has(> .help-icon) { white-space: nowrap; }
.help-tip {
  position: fixed; z-index: 9999; width: 240px;
  background: var(--gtd-card); border: 1px solid var(--gtd-border);
  border-radius: 10px; padding: 12px 14px; font-size: 12px; font-weight: 400;
  line-height: 1.5; color: var(--gtd-text-dim);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fade-in-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fade-in-up 0.4s ease-out both; }
.card, .hero-card, .record-card, .manager-card, .season-block, .quick-item {
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.manager-card:hover, .quick-item:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion:reduce) {
  .fade-in { animation:none; }
  .card, .hero-card, .record-card, .manager-card, .season-block, .quick-item { transition:none; }
  .manager-card:hover, .quick-item:hover { transform:none; }
}


/* ================================================================
   MOBILE — Sprint 3
   ================================================================ */

/* Nav: horizontal scroll on small screens */
@media (max-width: 700px) {
  .site-header {
    top: 8px; padding: 8px 10px 8px 8px;
    flex-wrap: nowrap; gap: 6px;
  }
  .brand .name { display: none; }   /* hide text, keep owl */
  .site-nav {
    overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 12px 12px; font-size: 11px; white-space: nowrap; }  /* Phase 11.3: taller tap target */
  .page-wrap { padding: 90px 14px 40px; }
  .page-title { font-size: clamp(26px,8vw,42px); }
}

/* Records: 3+3 grid → 1 col on mobile */
@media (max-width: 640px) {
  .records-content { grid-template-columns: 1fr !important; }
  .rec-stat-card { flex: 0 0 auto !important; }
  .rec-center-card { min-height: 300px; }
}

/* HOF: 4-col → 2-col → 1-col */
@media (max-width: 900px) {
  .managers-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .managers-grid { grid-template-columns: 1fr; }
}

/* Seasons: banner grid responsive */
@media (max-width: 700px) {
  .banners-grid { grid-template-columns: repeat(3, 100px) !important; gap: 10px 12px !important; }
  .banner-img { width: 100px !important; }
  .season-banner { width: 100px !important; }
}
@media (max-width: 400px) {
  .banners-grid { grid-template-columns: repeat(2, 110px) !important; }
  .banner-img { width: 110px !important; }
}

/* Seasons detail: single column on mobile */
@media (max-width: 700px) {
  .sea-detail.open { grid-template-columns: 1fr !important; }
  .sea-cards-grid { grid-template-columns: 1fr !important; }
  .sea-year-list { flex-direction: row !important; flex-wrap: wrap !important; }
  .yr-item { padding: 6px 12px !important; font-size: 15px !important; }
  .sea-quad-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* HOF modal: full-width on mobile */
@media (max-width: 560px) {
  .mgr-panel { padding: 20px 16px; }
  .mgr-stat-grid { grid-template-columns: repeat(2,1fr); }
}

/* Bug fix: the global min-height:44px tap-target (below) was stretching the
   fixed-size header burger/gear (34-38px wide) to 44px tall -> ovals. Lock them
   to a 44x44 flex-centered tap target; keeps the touch size. Borderless per the
   Record Book design (no circular outline / background chip -- just the icon). */
@media (max-width: 700px) {
  .site-header .nav-burger, .site-header .gear-btn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    border: none; background: none; border-radius: 0; padding: 0; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    color: var(--gtd-text);
  }
}

/* General mobile touch targets */
@media (max-width: 640px) {
  button { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
  .card { padding: 16px 14px; }
}

/* Rules: ensure content readable on mobile */
@media (max-width: 640px) {
  .rules-outer { padding-top: 90px !important; }
  .rules-mid { padding: 16px 14px 40px !important; }
}

/* Home: countdown responsive */
@media (max-width: 480px) {
  .cd-unit .n { font-size: clamp(28px,10vw,44px); }
  .cd-sep { font-size: clamp(20px,8vw,32px); padding-top: 14px; }
  .cta-btn-home { padding: 14px 22px; font-size: 13px; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px) {
  .page-wrap { padding: 100px 18px 40px; }
  .site-header { max-width: calc(100% - 24px); }
}
@media (max-width:640px) {
  .site-header { padding: 8px 12px 8px 8px; top: calc(8px + env(safe-area-inset-top, 0px)); }
  .brand .name { font-size: 13px; }
  .site-nav a { padding: 12px 12px; font-size: 12px; }  /* Phase 11.3: taller tap target */
  .page-wrap { padding: 88px 14px 30px; }
  .page-hero h1 { font-size: 28px; }
  .card { padding: 16px; }
  .field-row { flex-direction: column; align-items: stretch; }
  .field-row label { width: auto; margin-bottom: 2px; }
}
/* .hq-desktop / .hq-mobile visibility gate — also kept here in the global
   stylesheet (not only the JS-injected framework style) so the split holds even
   if the framework JS hasn't run yet or errored, preventing the desktop layout
   from showing on mobile. */
.hq-mobile { display: none; }
@media (max-width:700px) { .hq-desktop { display: none !important; } .hq-mobile { display: block; } }

/* #7: on mobile, the wired pages (those carrying a static .hq-mobile section)
   show their image in the hero CARD, so the full-page tenant body background —
   set inline by _applyTenantBackground + the anti-flash replay, or by a page's
   own body CSS — would duplicate it. Suppress it here (html+:has outranks the
   inline/!important); the body stays a solid dark ground. Desktop keeps its bg,
   and non-framework mobile pages (index/draft/keepers/surveys) are untouched. */
@media (max-width:700px) {
  html body:has(.hq-mobile) { background-image: none !important; background-color: var(--gtd-primary-dark, #080c17) !important; }
}
/* #6: on mobile the header bar is transparent so the hero-card image shows
   through behind it (no opaque pill). Controls get a shadow to stay legible. */
@media (max-width:700px) {
  .site-header {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: transparent; box-shadow: none;
  }
  .site-header .brand .name,
  .site-header #gtd-mobile-wordmark { text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
  .site-header .nav-burger svg,
  .site-header .gear-btn svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.85)); }
}

/* ── OVR Badge ── */
.ovr-badge {
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:8px;min-width:52px;padding:5px 9px;font-family:var(--font-display);font-weight:900;letter-spacing:-1px;
}
.ovr-badge .ovr-num { font-size:26px;line-height:1; }
.ovr-badge .ovr-lbl { font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-top:1px; }
.ovr-elite  { background:linear-gradient(135deg,#b8860b,#ffd700);color:#1a0a00; }
.ovr-gold   { background:linear-gradient(135deg,#cd7f32,var(--gtd-accent,#d9a441));color:#1a0a00; }
.ovr-silver { background:linear-gradient(135deg,#708090,#c0c0c0);color:#1a0a00; }
.ovr-bronze { background:linear-gradient(135deg,#8b4513,#cd853f);color:#fff; }
.ovr-low    { background:linear-gradient(135deg,#2d2d2d,#555);color:#aaa; }

/* ── OVR progress bar ── */
.m-progress-wrap { height:7px;background:rgba(255,255,255,0.08);border-radius:999px;overflow:hidden;margin:4px 0; }
.m-progress-fill { height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gtd-accent-light,#f0c675),var(--gtd-accent,#d9a441));transition:width 0.8s cubic-bezier(0.22,0.8,0.25,1);width:0; }

/* ── Award cards ── */
.awards-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px; }
.award-card {
  /* Tenant-driven: was a hard-coded dark purple from the old template, which
     ignored the league's branding colors. Now uses the palette tokens so the
     award "square" follows the commissioner's primary color. */
  background:linear-gradient(160deg,var(--gtd-primary),var(--gtd-primary-dark));
  border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;
  position:relative;overflow:hidden;transition:all 0.2s ease;
}
.award-card:hover { border-color:color-mix(in srgb,var(--gtd-accent,#d9a441) 40%,transparent);transform:translateY(-2px); }
.award-card::after { content:attr(data-icon);position:absolute;right:-6px;bottom:-8px;font-size:64px;opacity:0.06;pointer-events:none;line-height:1; }
.award-icon { font-size:26px;margin-bottom:6px; }
.award-type { font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gtd-accent);margin-bottom:3px; }
.award-title { font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:0.5px;color:#fff;line-height:1.2; }
.award-winner { font-size:13px;font-weight:700;color:var(--gtd-accent-light);margin-top:5px; }
.award-value { font-family:var(--font-display);font-size:24px;color:var(--gtd-accent-light);line-height:1;margin:3px 0; }
.award-year { font-size:11px;color:var(--gtd-text-dim);margin-top:2px; }
@keyframes scale-in { from{opacity:0;transform:scale(0.94)} to{opacity:1;transform:scale(1)} }
.scale-in { animation:scale-in 0.35s ease-out both; }
@media(max-width:640px) { .awards-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Prevent horizontal scroll on mobile ── */
@media (max-width: 768px) {
  /* v4.9.89: "Audit Log's sticky filter header still scrolls away" (Izhar, confirmed again after
     the v4.9.87 fix) -- root cause found here, not in the sticky element itself. `overflow-x:hidden`
     on an ancestor, even with overflow-y left unset, makes that axis compute to `auto` per the CSS
     Overflow spec (non-'visible' on one axis forces the other off 'visible' too) -- so .page-wrap
     silently became position:sticky's containing block instead of the viewport, for EVERY sticky
     element anywhere inside it (.dd-sticky-controls on Draft Room has almost certainly had this
     same bug, just never reported). Since .page-wrap has no height cap of its own, it never actually
     produces a real scrollbar, so nothing inside it can ever visibly "stick". `overflow: clip`
     blocks the same horizontal overflow without establishing a scroll container, so sticky childen
     correctly resolve against the real viewport instead. */
  body { overflow-x: hidden; }
  .page-wrap { overflow-x: clip; }

  /* Tables scroll horizontally within container. Framework mobile tables
     (.hq-stand, .mini-standings) manage their own layout/scroll wrapper, so
     display:block here would stop their columns from filling the width. */
  .standings, table:not(.hq-stand):not(.mini-standings) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Records grid: 1-col on mobile */
  .records-grid { grid-template-columns: 1fr !important; }

  /* Card padding tighter on mobile */
  .card { padding: 14px 12px; }

  /* Admin field rows stack on mobile */
  .field-row { flex-direction: column; align-items: flex-start; }
  .field-row label { width: auto; margin-bottom: 4px; }
  .field-row input, .field-row select, .field-row textarea { width: 100%; min-width: 0; }

  /* Combine control grid: 1-col on mobile */
  #adminActiveSection > div[style*="grid-template-columns"] {
    display: flex !important; flex-direction: column !important;
  }

  /* Draft room timer big display smaller on mobile */
  #adminTimerDisplay { font-size: 48px !important; }
  #commTimerDisplay  { font-size: 48px !important; }
  .big-timer { font-size: clamp(40px,12vw,80px) !important; }

  /* Phase 11.4: wrap the admin tab bar to multiple rows on mobile so ALL tabs
     stay visible. The previous horizontal-scroll strip silently hid the
     commissioner console's tabs 6-8 (Records/Seasons/Navigation) off-screen
     with no scroll affordance. Platform-admin's 3 tabs are unaffected (they fit). */
  .tabs { flex-wrap: wrap; }

  /* Draft room 3-col grid: 1-col on mobile */
  #setupGrid, #setupGrid + div { grid-template-columns: 1fr !important; }
}

/* v4.17.0: form controls do not inherit the page font on their own -- keep them on Lato like everything else (public site + commissioner admin). */
button,input,select,textarea{font-family:inherit}