/* ──────────────────────────────────────────────────────────────────────────
   AI Future FLL Hub — premium polish layer

   Refinement only: typography rendering, elevation, motion, focus states and
   touch ergonomics. It deliberately does NOT set page/card colours, so it can
   be linked by pages that have the light/dark tokens and by pages that do not.
   Every token reference carries a fallback for exactly that reason.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --fll-ease: cubic-bezier(.22, .61, .36, 1);
  --fll-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fll-fast: 140ms;
  --fll-base: 220ms;

  /* layered elevation reads richer than a single flat shadow */
  --fll-e1: 0 1px 2px rgba(16, 35, 63, .05), 0 1px 3px rgba(16, 35, 63, .04);
  --fll-e2: 0 2px 4px rgba(16, 35, 63, .05), 0 6px 16px rgba(16, 35, 63, .07);
  --fll-e3: 0 4px 8px rgba(16, 35, 63, .06), 0 14px 34px rgba(16, 35, 63, .11);
}

/* ── 1. Type rendering ──────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
h1, h2, h3, .hero-title, .page-title, .ta-title, .form-title, .card-title {
  letter-spacing: -0.014em;   /* large text reads tighter at display sizes */
  text-wrap: balance;         /* avoids a single orphan word on a heading */
}
p, li, .ta-lesson-body, .panel-sub, .page-sub, .form-sub {
  text-wrap: pretty;
}
/* tabular figures keep countdowns and scores from jittering as they change */
.countdown-days, .big-num, .online-num, .hud-stat b, .points-total,
.landing-info-value, .att-iter-count, .cat-open-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 2. Elevation + surface polish ──────────────────────────────────────── */
.card, .panel, .visibility-card, .sub-card, .team-card, .cat-card,
.landing-info-card, .preseason-section, .bi-card, .rp-row, .ta-detail {
  box-shadow: var(--fll-e1);
  transition: box-shadow var(--fll-base) var(--fll-ease),
              transform var(--fll-base) var(--fll-ease),
              border-color var(--fll-base) var(--fll-ease);
}
.cat-card:hover, .bi-card:hover, .sub-card:hover, .team-card:hover {
  box-shadow: var(--fll-e2);
}

/* ── 3. Motion ──────────────────────────────────────────────────────────── */
button, .btn, .btn-mini, .tab-btn, .filter-chip, a.bi-card, a.link-chip,
.visibility-bulk-btn, .submit-btn, .ta-submit-btn, .ta-save-btn {
  transition: background-color var(--fll-fast) var(--fll-ease),
              border-color var(--fll-fast) var(--fll-ease),
              color var(--fll-fast) var(--fll-ease),
              box-shadow var(--fll-base) var(--fll-ease),
              transform var(--fll-fast) var(--fll-ease);
}
button:active, .btn:active, .submit-btn:active, .ta-submit-btn:active,
.tab-btn:active, .bi-card:active {
  transform: translateY(1px) scale(.995);
}

/* ── 4. Focus — visible for keyboards, quiet for mouse users ────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--af-blue, #2563FF);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0;
}

/* ── 5. Reading comfort ─────────────────────────────────────────────────── */
::selection {
  background: rgba(37, 99, 255, .18);
  color: inherit;
}
.ta-lesson-body p, .ta-lesson-body li {
  max-width: 74ch;          /* long lines are the main thing that reads cheap */
}

/* ── 6. Scrollbars (desktop only; iPadOS uses its own) ──────────────────── */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--s-line-2, #dadce0);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--s-line-3, #bdc1c6); }
}

/* ── 7. iPad / touch ────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* comfortable targets, without inflating the small inline controls that
     sit inside table headings and cards */
  button, .btn, .tab-btn, .submit-btn, .visibility-bulk-btn,
  .ta-submit-btn, .ta-save-btn, .filter-chip, select {
    min-height: 44px;
  }
  a.bi-card, .online-chip, .sh-chip, .visibility-toggle { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px;
  }
  input[type="text"], input[type="number"], input[type="date"],
  input[type="password"], textarea, select {
    font-size: 16px;         /* stops iOS zooming the page on focus */
  }
  /* hover styles latch on touch — don't let them stick */
  .cat-card:hover, .bi-card:hover, .sub-card:hover { transform: none; }
  /* the tiny utility buttons stay small on purpose */
  .ta-col-del, .att-iter-delete, .att-delete-btn, .sub-caret { min-height: 0; }
}
html, body { -webkit-tap-highlight-color: rgba(37, 99, 255, .12); }
.ta-table-wrap, .md-table-wrap, .sub-tablewrap, .bi-grid, .tabs, .filters {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
/* respect the notch / home indicator when installed to the home screen */
body { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ── 8. Print (coaches do print rosters and rubrics) ────────────────────── */
@media print {
  .appbar, .topbar, .tabs, .theme-toggle, #logoutButton,
  .ta-submit-row, .sim-spotlight { display: none !important; }
  body { background: #fff; }
  .card, .panel, .ta-detail { box-shadow: none; border: 1px solid #ccc; }
}

/* ── 9. Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}