/* ============================================================
   HurdleCalls: light-only surfaces (2026-09-30, no dark backgrounds).
   Loaded last. Navy stays as text and on small controls; every former
   navy section becomes white, mist grey or a pale royal tint. Gold moves
   to its text-safe shade (#8A6410, 4.8:1 on the tint) wherever it is text.
   ============================================================ */
:root {
  --tint: #eef3fc;
  --tint-line: #d6e0f2;
}
.hero :focus-visible, .footer :focus-visible, .detail-hero :focus-visible, .dash-head :focus-visible,
.cta-band :focus-visible, .feedstrip :focus-visible { outline-color: var(--royal-500); }
.btn-ghost.on-dark { color: var(--navy-800); border-color: #b9c5dc; background: #fff; }
.btn-ghost.on-dark:hover { color: var(--royal-700); border-color: var(--royal-600); background: #fff; }
.btn-navy { background: var(--royal-600); }
.btn-navy:hover { background: var(--royal-700); }

/* Desk feed strip */
.feedstrip { background: #f3f5fa; color: var(--slate); border-bottom: 1px solid var(--line); }
.feedstrip::after { background: linear-gradient(90deg, transparent, #f3f5fa); }
.feed-chip b { color: var(--ink); }
.feed-chip .handle { color: var(--royal-600); }

/* Hero */
.hero { background: linear-gradient(170deg, var(--tint) 0%, #f7f9fd 70%, #fff 100%); color: var(--ink); border: 1px solid var(--tint-line); }
.hero::before { background: repeating-linear-gradient(180deg, rgba(10,26,69,.045) 0 1px, transparent 1px 56px); }
.hero::after { background: radial-gradient(closest-side, rgba(31,69,200,.10), transparent 70%); }
.hero h1 { color: var(--navy-900); }
.hero h1 .accent { color: var(--gold-700); }
.hero-sub { color: var(--slate); }
.hero-meta { color: var(--slate); }
.hero-meta > div, .hero-meta > div:last-child { background: #fff; border: 1px solid var(--tint-line); }
.hero-meta b { color: var(--navy-900); }

/* On-air ticket */
.onair { border: 1px solid var(--tint-line); box-shadow: 0 2px 6px rgba(6,15,41,.05), 0 30px 70px -28px rgba(6,15,41,.28); }
.onair-top { background: #f3f5fa; color: var(--slate); border-bottom: 1px solid var(--line); }
.stub::before, .stub::after { background: #f2f5fc; box-shadow: inset 0 0 0 1px var(--tint-line); }

/* Trust chips */
.trustbar-inner > span { background: #fff; color: var(--slate); border: 1px solid var(--line); }
.trustbar-inner > span:last-child { border: 1px solid var(--line); }
.trustbar b { color: var(--ink); }

/* Quote panel */
.split-visual { background: var(--tint); color: var(--ink); border: 1px solid var(--tint-line); }
.split-visual .q { color: var(--navy-900); }
.split-visual .who { color: var(--gold-700); border-top-color: var(--tint-line); }
.split-visual .who small { color: var(--slate); }

/* CTA */
.cta-band { background: var(--tint); color: var(--ink); border: 1px solid var(--tint-line); }
.cta-band h2 { color: var(--navy-900); }
.cta-band p { color: var(--slate); }

/* Footer */
.footer { background: #f3f5fa; color: var(--slate); border-top: 1px solid var(--line); }
.footer .brand-name { color: var(--navy-800); }
.footer .brand-name span { color: var(--royal-600); }
.footer h4 { color: var(--ink); }
.footer a:not(.btn) { color: var(--slate); }
.footer a:not(.btn):hover { color: var(--ink); }
.footer .tagline { color: var(--slate); }
.scope-cta { background: #fff; border-color: var(--line); }
.scope-cta .t { color: var(--ink); }
.scope-cta p { color: var(--slate); }
.footer-bottom { border-top-color: var(--line); color: var(--muted); }
.powered b { color: var(--gold-700); }

/* Inner-page heroes */
.detail-hero, .dash-head { background: linear-gradient(170deg, var(--tint) 0%, #f7f9fd 100%); color: var(--ink); border: 1px solid var(--tint-line); }
.detail-hero::before { background: repeating-linear-gradient(180deg, rgba(10,26,69,.045) 0 1px, transparent 1px 56px); }
.detail-hero h1, .dash-head h1 { color: var(--navy-900); }
.detail-hero .hero-sub, .dash-head p { color: var(--slate); }
.detail-meta { color: var(--slate); border-top-color: var(--tint-line); }
.detail-meta > span { border-right-color: var(--tint-line); }
.detail-meta b { color: var(--navy-900); }
.detail-hero .badge-upcoming { background: #dfe7fb; color: var(--royal-700); }
.detail-hero .badge-past { background: var(--line); color: var(--slate); }
.balance-card { background: #fff; border-color: var(--tint-line); }
.balance-num { color: var(--gold-700); }

/* Auth aside */
.auth-aside { background: var(--tint); color: var(--ink); border-right: 1px solid var(--tint-line); }
.auth-aside::before { background: repeating-linear-gradient(180deg, rgba(10,26,69,.04) 0 1px, transparent 1px 56px); }
.auth-aside .auth-aside-title { color: var(--navy-900); }
.auth-aside p { color: var(--slate); }
.auth-aside li { color: var(--ink); }
.auth-aside li .ck { color: var(--gold-700); }

/* Avatars */
.avatar { background: var(--tint); color: var(--navy-800); border: 1px solid var(--tint-line); }

/* Wide screens: a little more room for the grid. */
@media (min-width: 1600px) { :root { --maxw: 1320px; } }

/* Tablet: rundown rows stack meter + price under the title instead of squeezing it. */
@media (max-width: 1080px) and (min-width: 641px) {
  .run { grid-template-columns: 130px minmax(0, 1fr); gap: 16px 24px; }
  .run .meter { grid-column: 2; max-width: 360px; }
  .run-cta { grid-column: 2; justify-content: flex-start; }
}