/* ══════════════════════════════════════════════════════════════════════
 *  Shared components — topbar, nav, footer, pricing cards, toasts.
 *  All values reference semantic tokens from theme.css so the site
 *  flips cleanly between dark and light themes.
 * ══════════════════════════════════════════════════════════════════════ */

.topbar{
  height:56px;
  width:100%;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:12px;
  position:sticky;
  top:0;
  z-index:200;
}

.logo{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--gold);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo-word{display:inline-block;line-height:1;}
.logo-recruit{color:var(--text-primary);opacity:.6;font-weight:400;margin-left:1px;}
.logo-mark{transition:transform .25s ease;}
.logo:hover .logo-mark{transform:rotate(-6deg);}

.topbar-nav{display:flex;gap:1px;flex:1;overflow:visible;}
.tnav{
  background:none;
  border:none;
  cursor:pointer;
  padding:7px 14px;
  border-radius:7px;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  color:var(--text-secondary);
  transition:all .15s;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-body);
}
.tnav:hover{color:var(--text-primary);background:var(--bg-hover);}
.tnav.on{color:var(--text-on-accent);background:var(--accent);font-weight:700;}

/* .nav-tab — used by topbar.js for tab-style buttons (Dashboard, Schools, Email, Profile). */
.nav-tab{padding:7px 12px;font-size:13px;font-weight:500;line-height:1.2;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;border-radius:7px;transition:all .15s;white-space:nowrap;font-family:var(--font-body);}
.nav-tab.active{color:var(--text-on-accent);background:var(--accent);font-weight:700;}
.nav-tab:hover:not(.active){color:var(--text-primary);background:var(--bg-hover);}

/* Light-mode active-nav softening: a solid --accent (navy) pill on ivory
 * visually dominates the topbar — it reads as a heavy button, not a subtle
 * "you are here" marker. Swap to a tinted pill with navy text + weight so
 * the active state is still unmistakable but sits in the bar calmly. */
[data-theme="light"] .tnav.on,
[data-theme="light"] .nav-tab.active{
  background:rgba(15,26,46,.09);
  color:var(--accent);
  font-weight:700;
}
[data-theme="light"] .tnav.on:hover,
[data-theme="light"] .nav-tab.active:hover{
  background:rgba(15,26,46,.13);
}

.tnav-dropdown{position:relative;}
.tnav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;padding-top:6px;padding-bottom:4px;min-width:190px;box-shadow:var(--shadow-lg);z-index:300;}
.tnav-dropdown:hover .tnav-dropdown-menu{display:block;}
.tnav-dropdown-menu a{display:flex;align-items:center;gap:6px;padding:10px 16px;color:var(--text-secondary);text-decoration:none;font-size:13px;font-family:var(--font-body);transition:all .12s;}
.tnav-dropdown-menu a:hover{background:var(--bg-hover);color:var(--accent);}

.t-badge{
  background:rgba(0,0,0,.22);
  border-radius:10px;
  padding:1px 6px;
  font-size:10px;
  font-weight:700;
  line-height:1.2;
}
.tnav.on .t-badge{background:rgba(0,0,0,.18);color:var(--text-on-accent);}

/* ── Nav links ─────────────────────────────────────────── */
.nav-link {
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  text-decoration: none; padding: 6px 12px; border-radius: 7px;
  transition: all .15s;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-link[aria-current="page"] { color: var(--text-primary); }
.nav-cta {
  padding: 8px 18px; border-radius: 8px;
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border: none; cursor: pointer; transition: all .2s;
}
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ── Topbar scroll blur ────────────────────────────────── */
.topbar { transition: background .3s, backdrop-filter .3s; }
.topbar.scrolled {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ── Hamburger & mobile nav ────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-secondary); border-radius: 2px; transition: all .2s;
}
.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
  padding: 12px 16px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a, .mobile-nav button {
  color: var(--text-secondary); font-size: 14px; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; background: none;
  border: none; cursor: pointer; text-align: left;
  transition: all .15s;
}
.mobile-nav a:hover, .mobile-nav button:hover { color: var(--text-primary); background: var(--bg-hover); }
.mobile-nav .mnav-cta {
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-display); font-weight: 700; margin-top: 4px;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .desktop-nav { display: none !important; }
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-app); border-top: 1px solid var(--border-subtle);
  padding: 40px 20px 28px;
}
.footer-inner { max-width: 1020px; margin: 0 auto; }
.footer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 10px; }
.footer-brand p { font-size: 13px; color: var(--text-secondary); max-width: 26ch; line-height: 1.6; }
.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--text-primary); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: 13px; color: var(--text-secondary);
  text-decoration: none; margin-bottom: 10px; transition: color .15s;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 12px; color: var(--text-muted); }
.footer-links-inline { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links-inline a { font-size: 12px; color: var(--text-secondary); text-decoration: none; transition: color .15s; }
.footer-links-inline a:hover { color: var(--text-primary); }

/* ── Pricing cards ─────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 32px 28px;
  position: relative; transition: all .2s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card.popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(240,180,41,.25), 0 8px 32px rgba(240,180,41,.1);
}
/* Light mode: gold-yellow glow is invisible on ivory. Use burgundy glow
 * (matches the rest of the warm-accent treatment) so the popular card still
 * reads as "highlighted" without yellow wash. */
[data-theme="light"] .price-card.popular {
  box-shadow: 0 0 0 1px rgba(193,39,45,.35), 0 8px 32px rgba(193,39,45,.08);
}
[data-theme="light"] .price-btn.gold:hover { box-shadow: 0 6px 20px rgba(15,26,46,.18); }
.popular-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: .06em; padding: 4px 16px; border-radius: 20px;
  white-space: nowrap; line-height: 1.2;
}
.price-plan {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  line-height: 1.3;
  color: var(--text-secondary); margin-bottom: 8px; letter-spacing: .06em;
  text-transform: uppercase;
}
.price-amount {
  display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px;
}
.price-amount .amount {
  font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--text-primary);
}
.price-amount .per { font-size: 14px; color: var(--text-secondary); }
.price-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.price-features {
  list-style: none; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.price-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-primary);
}
.price-features li::before {
  content: '\2713'; color: var(--accent); font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.price-btn {
  width: 100%; padding: 13px; border-radius: 10px; border: none;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.price-btn.outline {
  background: transparent; border: 1px solid var(--border-subtle); color: var(--text-primary);
}
.price-btn.outline:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.price-btn.gold { background: var(--accent); color: var(--text-on-accent); }
.price-btn.gold:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,180,41,.3); }
.price-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

/* ── Spinner ───────────────────────────────────────────── */
.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin-it .6s linear infinite; display: inline-block;
}
@keyframes spin-it { to { transform: rotate(360deg); } }

/* ── PAYWALL DISABLED — single kill-switch ──────────────────
 * Hides all upgrade/pro UI sitewide. To re-enable billing UI,
 * delete this block. Pair with navGuard.js PAYWALL_DISABLED flag
 * and server/src/middleware/entitlements.js. */
.pro-badge,
.pro-badge-nav,
#logo-pro-badge,
.upgrade-cta,
.upgrade-overlay,
.upgrade-modal,
.upgrade-banner,
.pro-gate-overlay,
#pro-gate-overlay,
#upgrade-overlay,
#upgrade-banner,
#nav-upgrade-overlay,
#pro-btn,
#pro-btn-hero,
.pricing-link,
.pricing-section,
.pricing-grid,
.price-card,
.popular-badge,
a[href="#pricing"],
a[href="/pricing"],
a[href="pricing.html"],
a[href="/pricing.html"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
 *  Coach Portal — read-only view mode
 *
 *  When a coach iframes a student page with ?coachView=<athleteId>, the
 *  page sets `body.coach-view`. Everything tagged `.edit-only` (save
 *  buttons, add-school, paste-emails, send-message, calendar-add, etc.)
 *  is hidden so the coach can browse but never mutates the athlete's
 *  data. apiClient.setUserData is also a no-op in coach view as a
 *  belt-and-suspenders guard — the CSS is the visible signal.
 *
 *  We also hide the student dashboard's OWN navigation chrome inside the
 *  iframe — topbar, top-level tab nav, sub-tab shells, and the upgrade
 *  popup — because the Coach Portal already has its own tab bar above
 *  the iframe. Without this, the iframe re-renders the whole student
 *  dashboard navigation on every tab change and the coach can't tell
 *  which Coach Portal tab they're on vs. which dashboard tab is active.
 * ══════════════════════════════════════════════════════════════════════ */
html.coach-view .edit-only,
html.coach-view #topbar-mount,
html.coach-view .topbar,
html.coach-view #schools-subtab-shell,
html.coach-view #email-subtab-shell,
html.coach-view .subtab-bar,
html.coach-view #upgrade-overlay,
html.coach-view #upgrade-banner,
html.coach-view #nav-upgrade-overlay,
html.coach-view #gate-loading,
body.coach-view .edit-only,
body.coach-view #topbar-mount,
body.coach-view .topbar,
body.coach-view #schools-subtab-shell,
body.coach-view #email-subtab-shell,
body.coach-view .subtab-bar,
body.coach-view #upgrade-overlay,
body.coach-view #upgrade-banner,
body.coach-view #nav-upgrade-overlay,
body.coach-view #gate-loading { display: none !important; }

/* When the dashboard SPA renders inside the Coach Portal iframe, remove
 * the body margin/padding the topbar reserved so the active tab content
 * starts at the top of the iframe with no whitespace. */
html.coach-view, body.coach-view { margin: 0 !important; padding: 0 !important; }
html.coach-view .main, body.coach-view .main { padding-top: 16px !important; }

/* Belt-and-suspenders: any tab-content div not marked .active stays hidden
 * in coach view. The dashboard SPA already does this with its own classList,
 * but if showTab() somehow flips back to scanner mid-load, the user wouldn't
 * see scanner content peek through. */
html.coach-view .tab-content:not(.active),
body.coach-view .tab-content:not(.active) { display: none !important; }

/* Anti-flash: the dashboard SPA hardcodes tab-dashboard as `.tab-content
 * active` so it paints first while JS catches up. In coach view that means
 * the Emails tab (no hash → scanner-only branch) briefly shows the dashboard
 * overview before the coach-view branch swaps to tab-scanner. Hide ALL
 * tab-content (including the default-active one) until coachView.js adds
 * `.coach-view-ready` after picking the correct tab. */
html.coach-view:not(.coach-view-ready) .tab-content,
html.coach-view:not(.coach-view-ready) .tab-content.active { display: none !important; }
html.coach-view:not(.coach-view-ready) #coach-view-loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-app, #0a0f1a); z-index: 998; flex-direction: column; gap: 14px;
}
html.coach-view.coach-view-ready #coach-view-loading { display: none !important; }
#coach-view-loading .cv-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(240,180,41,.15); border-top-color: #f0b429;
  animation: cv-spin .8s linear infinite;
}
#coach-view-loading .cv-label {
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8896a8;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

html.coach-view #coach-view-banner,
body.coach-view #coach-view-banner {
  display: flex !important; align-items: center; gap: 10px;
  padding: 8px 16px; font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #f0b429; background: rgba(240,180,41,.10);
  border-bottom: 1px solid rgba(240,180,41,.30);
  position: sticky; top: 0; z-index: 9999;
}