/* ============================================================
   slotly.tv — design tokens + components
   Source of truth: design_handoff_slotly_marketplace (2026-07-24)
   Brand: modern consumer marketplace. The ON AIR light — warm
   coral on clean paper; one unified marketplace page.
   ============================================================ */

:root {
  /* Color */
  --ink: #16181D;
  --ink-soft: #5A6072;
  --ink-faint: #8B91A0;
  --paper: #FFFFFF;
  --surface: #F7F7F5;
  --line: #E8E9EC;
  --line-hover: #DADCE1;
  --brand: #F04E4E;
  --brand-deep: #D63A3F;
  --brand-tint: #FEEEEE;
  --ok: #12946A;
  --ok-tint: #E4F5EE;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
          "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow-card: 0 1px 2px rgba(22, 24, 29, .05), 0 8px 24px rgba(22, 24, 29, .06);
  --shadow-pop: 0 4px 12px rgba(22, 24, 29, .10), 0 16px 48px rgba(22, 24, 29, .12);
  --shadow-btn: 0 2px 8px rgba(240, 78, 78, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must always win — several components (modals, mobile
   menu, nav account) set display:flex at class level, which would otherwise
   override the UA's [hidden] { display: none }. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 32px; }

/* ---------- Animations ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 32px;
  max-width: 1180px; margin: 0 auto;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }
.nav-logo .mark { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 24px; margin-left: 8px; font-size: 15px; color: var(--ink-soft); font-weight: 500; }
.nav-links a { color: var(--ink-soft); }
.nav-spacer { flex: 1; }

.nav-onair {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px 8px 13px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-tint);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  animation: pulse 2s infinite;
}
.nav-onair .live-dot { box-shadow: 0 0 0 3px rgba(18, 148, 106, .3); animation-duration: 1.6s; }

.nav-signin { font-size: 15px; font-weight: 600; color: var(--ink-soft); background: none; border: none; }

/* Signed-in account chip */
.nav-account { display: flex; align-items: center; gap: 10px; }
.acct-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 650; color: var(--ok); }
.acct-chip .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ok-tint); color: var(--ok);
  display: grid; place-items: center; font-size: 12px;
}
.nav-signout { font-size: 14px; font-weight: 600; color: var(--ink-faint); background: none; border: none; }

/* Hamburger + mobile menu */
.nav-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper);
}
.mobile-menu {
  border-top: 1px solid var(--line);
  padding: 14px 32px 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper);
  animation: fadein .15s ease;
}
/* Menu links are ink-soft/550; the Sign in button is deliberately darker and
   heavier (ink/600) per the design; the CTA keeps its full .btn-brand pill —
   the reset must not clobber .btn's background (specificity!). */
.mobile-menu a { color: var(--ink-soft); font-weight: 550; font-size: 16px; }
.mobile-menu button { color: var(--ink); font-weight: 600; text-align: left; background: none; border: none; font-size: 16px; }
.mobile-menu a.btn { color: #fff; font-weight: 650; font-size: 15px; align-self: flex-start; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px; font-weight: 650;
  transition: background .15s, border-color .15s;
}
.btn-brand { background: var(--brand); color: #fff; box-shadow: var(--shadow-btn); }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-faint); }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }

/* Row-level buttons */
.btn-row-signin {
  display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 650;
  background: var(--paper); color: var(--ink-soft);
  transition: border-color .15s;
}
.btn-row-signin:hover { border-color: var(--ink-faint); }
.btn-req { padding: 9px 18px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  padding: 68px 32px 40px; text-align: center;
  background: linear-gradient(180deg, #FFF6F6, #fff);
}
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 999px; padding: 7px 16px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06; letter-spacing: -.035em; font-weight: 800;
  max-width: 720px; margin: 0 auto 20px;
}
.hero h1 .hl { color: var(--ink); position: relative; white-space: nowrap; z-index: 0; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
  background: var(--brand); opacity: .5; border-radius: 3px; z-index: -1;
}
.hero .sub { font-size: 18px; color: var(--ink-soft); max-width: 560px; margin: 0 auto 32px; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.stats { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; padding: 44px 0 8px; }
.stat { text-align: center; }
.stat .n { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.stat .l { font-size: 14px; color: var(--ink-faint); font-weight: 550; max-width: 200px; margin: 0 auto; }

/* ---------- How it works ---------- */
.hiw {
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 64px 32px;
}
.hiw-head { text-align: center; margin-bottom: 44px; }
.hiw-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.hiw-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.025em; }
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.hiw-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-card);
}
.hiw-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-tint); color: var(--brand-deep);
  font-weight: 800; display: grid; place-items: center; margin-bottom: 16px;
}
.hiw-card h3 { font-weight: 750; font-size: 17px; margin-bottom: 6px; }
.hiw-card p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Inventory ---------- */
.inventory { max-width: 1000px; margin: 0 auto; padding: 48px 32px 80px; }
.inv-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.inv-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.inv-note { font-size: 14px; color: var(--ink-faint); }

/* Filter bar */
.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 24px;
}
.seg { display: inline-flex; background: var(--paper); border-radius: 999px; padding: 4px; border: 1px solid var(--line); }
.seg button {
  border: none; background: transparent; border-radius: 999px;
  padding: 8px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  transition: background .15s;
}
.seg button.active { background: var(--brand); color: #fff; }
.filter-input, .filter-select {
  font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; background: var(--paper); color: var(--ink);
  outline: none;
}
.filter-select { cursor: pointer; }
.filter-input { min-width: 220px; }
.filter-input:focus, .filter-select:focus { border-color: var(--brand); }
.result-count { margin-left: auto; font-size: 14px; color: var(--ink-faint); font-weight: 550; white-space: nowrap; }

.freshness { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.freshness.stale { color: #B45309; }
.freshness .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.freshness.stale .fdot { background: #F59E0B; }

/* Avail rows */
.avail-list { display: flex; flex-direction: column; gap: 12px; }
.avail-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr .95fr 1.5fr .85fr .75fr .95fr;
  gap: 16px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px;
  transition: box-shadow .15s, border-color .15s;
}
.avail-row:hover { box-shadow: var(--shadow-card); border-color: var(--line-hover); }
.a-station .s { font-weight: 700; font-size: 15.5px; }
.a-station .aff { font-size: 13px; color: var(--ink-faint); }
.a-market .m { font-weight: 550; font-size: 14.5px; }
.a-market .rank { font-size: 12.5px; color: var(--ink-faint); }
.a-time .d { font-weight: 600; font-size: 14.5px; }
.a-time .t { font-size: 13.5px; color: var(--ink-soft); }

/* Lead-in program + its average audience — the "who's already watching" pitch */
.a-leadin .li-label {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1px;
}
.a-leadin .li-name {
  font-weight: 600; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.a-leadin .li-aud { font-size: 12.5px; color: var(--ink-faint); }
/* Signed-out: the audience number is a blurred tease — the real value never
   ships in the public feed; this is a deterministic placeholder digit blob. */
.num-blur {
  filter: blur(4.5px);
  user-select: none;
  opacity: .85;
  font-weight: 700;
}
.blur-gated { cursor: pointer; }
.blur-gated:hover { color: var(--brand-deep); }

.chips { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tier { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.tier-Elite    { background: #FDF3E1; color: #9A6A0B; }
.tier-Premium  { background: #EFEBFB; color: #4E3BA6; }
.tier-Standard { background: #EFF1F4; color: #5A6072; }
.st { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.st-Available { background: var(--ok-tint); color: var(--ok); }
.st-Offered   { background: #FDF3E1; color: #9A6A0B; }

.a-rate { text-align: right; }
.rate-n { font-weight: 800; font-size: 16px; }
.rate-cpv { font-size: 12.5px; color: var(--ink-faint); }
.rate-n.rate-na { font-size: 13.5px; font-weight: 700; color: var(--ink-faint); }

.a-action { text-align: right; }
.req-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700;
  color: var(--ok); background: var(--ok-tint);
  border-radius: 999px; padding: 8px 15px;
}

.show-more { margin: 22px auto 0; display: flex; }

/* Empty state */
.empty-state {
  text-align: center; padding: 60px 24px;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.empty-state .glyph { font-size: 34px; margin-bottom: 12px; }
.empty-hook { font-size: 14px; color: var(--ink-soft); max-width: 420px; margin: -6px auto 18px; }
.empty-hook a { color: var(--brand-deep); font-weight: 650; }

/* ---------- Market tease (signed-out search) ---------- */
.tease-head { padding: 4px 2px 14px; }
.th-dma { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.th-rank { font-size: 13px; font-weight: 700; color: var(--ink-faint); margin-left: 6px; }
.th-sub { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.th-also { font-size: 13px; color: var(--ink-faint); margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.also-market { font: inherit; font-size: 12.5px; font-weight: 650; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; }
.also-market:hover { border-color: var(--ink-faint); color: var(--ink); }
.pick { display: inline-flex; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-bottom: 5px; }
.pick-recent { background: var(--brand-tint); color: var(--brand-deep); }
.pick-value  { background: #E4F5EE; color: var(--ok); }
.tease-hook { text-align: center; padding: 34px 24px; margin-top: 4px;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.tease-hook .glyph { font-size: 30px; margin-bottom: 8px; }
.tease-hook h3 { font-size: 17.5px; margin-bottom: 6px; }
.tease-hook p { font-size: 14px; color: var(--ink-soft); max-width: 460px; margin: 0 auto; }
.modal-alt { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }
.modal-alt a { color: var(--brand-deep); font-weight: 650; }

/* ---------- Source Protection agreement modal ---------- */
.terms-modal { max-width: 560px; }
.terms-intro { color: var(--ink-soft); font-size: 14.5px; margin: -6px 0 18px; }
.terms-body {
  max-height: 46vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; margin-bottom: 18px; font-size: 14px; line-height: 1.6;
}
.terms-body p { margin-bottom: 12px; }
.terms-body p:last-child { margin-bottom: 0; }

/* ---------- Coverage map ---------- */
.mapsec { padding: 64px 32px; border-bottom: 1px solid var(--line); }
.map-sub { font-size: 15px; color: var(--ink-soft); margin-top: 8px; }
.map-wrap { position: relative; max-width: 1000px; margin: 28px auto 0; }
/* aspect-ratio, not height:auto — Safari computes height:auto on <svg> as 0
   (viewBox alone gives CSS no intrinsic ratio) → blank map. */
.map-wrap svg { width: 100%; height: auto; aspect-ratio: 975 / 610; display: block; }
.map-loading { text-align: center; color: var(--ink-faint); padding: 80px 0; font-size: 14.5px; }
.map-tip { position: absolute; display: none; pointer-events: none; z-index: 30;
  background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45;
  padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-pop); max-width: 230px; }

/* National networks quick chip */
.nat-chip { font: inherit; font-size: 14px; font-weight: 650; color: var(--brand-deep);
  background: var(--brand-tint); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.nat-chip:hover { border-color: var(--brand); }
.nat-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* "Local broadcast" escape hatch — appears only while the National view is on. */
.local-chip { background: var(--surface); color: var(--ink); }
.local-chip::before { content: "← "; }
/* Ministry-view section subheaders */
.min-sect { font-weight: 800; font-size: 15px; margin: 20px 4px 6px; }
.min-sect .min-n { color: var(--ink-faint); font-weight: 600; font-size: 13px; margin-left: 8px; }
.min-sect .min-hh { color: var(--brand-deep); font-weight: 700; font-size: 13px; margin-left: 8px; }

/* Ministries section */
.ministries .min-sub { max-width: 640px; margin: 12px auto 0; text-align: center;
  color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.min-stats { display: flex; justify-content: center; gap: 56px; margin-top: 24px; flex-wrap: wrap; }
.min-nets { text-align: center; color: var(--ink-faint); font-size: 13.5px; margin-top: 16px; }
.min-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  max-width: 820px; margin: 24px auto 0; }
.min-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.mc-st { font-weight: 800; font-size: 16px; }
.mc-meta { color: var(--ink-faint); font-size: 13px; margin-top: 4px; }
.mc-tier { margin-top: 10px; }
.min-ctas { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .min-examples { grid-template-columns: 1fr; }
  .min-stats { gap: 28px; }
}

/* Chat widget */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex;
  align-items: center; gap: 8px; font: inherit; font-weight: 750; font-size: 14px;
  background: var(--brand); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 18px; cursor: pointer; box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.18)); }
.chat-panel { position: fixed; right: 22px; bottom: 78px; z-index: 91; width: 340px;
  max-width: calc(100vw - 44px); background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-pop, 0 12px 34px rgba(0,0,0,.22));
  display: flex; flex-direction: column; overflow: hidden;
  /* Short windows: the panel is ~490px tall, so cap it and let it scroll
     rather than run off the top of the viewport and cover the nav. */
  max-height: calc(100vh - 96px); overflow-y: auto; }
.cp-head { background: var(--ink); color: #fff; padding: 12px 16px; position: relative; }
.cp-head .cp-sub { display: block; font-size: 12px; color: #C9CCD4; margin-top: 2px; }
.cp-close { position: absolute; right: 10px; top: 8px; background: none; border: 0;
  color: #fff; font-size: 20px; cursor: pointer; }
.cp-body { padding: 12px; max-height: 200px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 8px; }
.cp-msg { font-size: 13.5px; line-height: 1.45; padding: 8px 11px; border-radius: 12px;
  max-width: 90%; }
.cp-bot { background: var(--surface); }
.cp-me { background: var(--brand-tint); align-self: flex-end; }
.cp-ask { display: flex; gap: 8px; padding: 0 12px 10px; }
.cp-ask input { flex: 1; font: inherit; font-size: 13.5px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 9px; }
.cp-contact { border-top: 1px solid var(--line); padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 7px; }
.cp-cap { font-size: 11px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .8px; color: var(--ink-faint); }
.cp-contact input, .cp-contact textarea { font: inherit; font-size: 13.5px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; resize: vertical; }
.cp-btns { display: flex; gap: 8px; }
.cp-btns .btn { flex: 1; font-size: 13.5px; padding: 8px 10px; }
.cp-note { font-size: 12.5px; color: var(--ink-faint); min-height: 16px; }
@media (max-width: 640px) { .chat-panel { right: 12px; bottom: 72px; } .chat-fab { right: 12px; bottom: 14px; } }

/* Market intel panel (buyer-gated Comscore stats above a market's avails) */
.mkt-intel { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; margin: 4px 0 14px; }
.mi-head { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 1px;
  color: var(--brand-deep); }
.mi-head .mi-src { color: var(--ink-faint); font-weight: 600; text-transform: none;
  letter-spacing: 0; margin-left: 8px; }
.mi-teasers { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.mi-stat .n { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.mi-stat .l { font-size: 12px; color: var(--ink-faint); }
.mi-more { font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-tint); border: 0; border-radius: 999px; padding: 6px 14px;
  cursor: pointer; margin-left: auto; }
.mi-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.ms-cap { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-faint); margin-bottom: 6px; }
.ms-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 3px 0; }
.ms-row span { color: var(--ink-soft, #4A4F5A); }

/* T&C consent variant of the terms box */
.tc-ack { background: var(--surface); }
.tc-ack a { color: var(--brand-deep); font-weight: 650; }

/* Filter-bar checkbox (overnight opt-in) */
.filter-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.filter-check input { width: 15px; height: 15px; accent-color: var(--brand); }
.empty-state h3 { font-weight: 750; font-size: 18px; margin-bottom: 6px; }
.empty-state p { font-size: 14.5px; color: var(--ink-soft); max-width: 340px; margin: 0 auto 20px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding: 48px 32px; }
.footer-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap;
}
.footer-brand { flex: 1 1 240px; }
.footer-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; margin-bottom: 12px; }
.footer-tagline {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.footer-brand p { font-size: 14px; max-width: 260px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-col .col-head {
  color: rgba(255, 255, 255, .5); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12px;
}
.footer-col a { color: rgba(255, 255, 255, .8); }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(22, 24, 29, .5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fadein .15s ease;
  /* The backdrop scrolls too, so nothing is ever unreachable even if a browser
     disagrees about how tall the card may be. */
  overflow-y: auto; overscroll-behavior: contain;
}
.modal {
  background: var(--paper); border-radius: var(--r-lg); padding: 34px 34px 30px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow-pop); position: relative;
  animation: pop .2s ease;
  /* The request modal grew past the viewport when the offer field and
     commitment chips were added (Jared, 2026-08-19: header and Submit button
     were both cut off, and it would not scroll). Cap it to the viewport and
     scroll INSIDE the card; margin:auto keeps it centred while scrollable. */
  max-height: calc(100vh - 48px); overflow-y: auto; margin: auto;
}
/* Submit stays reachable without hunting for it at the bottom of a long form. */
#form-request .modal-submit {
  position: sticky; bottom: -30px; margin-top: 4px;
  background: var(--paper); padding: 12px 0 6px;
  box-shadow: 0 -10px 12px -8px rgba(22, 24, 29, .16);
}
@media (max-height: 720px) {
  .modal { padding: 22px 26px 20px; }
  .modal-slot { padding: 12px 14px; margin-bottom: 14px; }
  .modal-field { margin-bottom: 12px; }
}
.modal.modal-auth { max-width: 400px; padding: 40px 36px; border: 1px solid var(--line); }
.modal h2 { font-size: 23px; letter-spacing: -.02em; margin-bottom: 16px; }
.modal-auth h2 { font-size: 28px; letter-spacing: -.03em; font-weight: 800; margin-bottom: 0; }
.modal-x {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; font-size: 26px; color: var(--ink-faint); line-height: 1;
  padding: 1px 6px;   /* UA default the global reset strips — keeps the × off the corner */
}
.modal-slot { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px; }
.ms-station { font-weight: 700; font-size: 16px; }
.ms-detail { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.modal-field .opt { color: var(--ink-faint); font-weight: 500; }
.modal-field input, .modal-field textarea {
  font: inherit; font-size: 15px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: none; resize: vertical;
}
.modal-field input:focus, .modal-field textarea:focus { border-color: var(--brand); }
.terms-ack {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--brand-tint); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.terms-ack input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--brand); }

/* Auth forms (inside the sign-in modal + shared with My Requests page nav) */
.auth-sub { color: var(--ink-soft); font-size: 15px; margin: 8px 0 26px; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.auth-form .opt { color: var(--ink-faint); font-weight: 500; }
.auth-form input, .auth-form textarea {
  font: inherit; font-size: 15px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); outline: none; resize: vertical;
}
.auth-form input:focus, .auth-form textarea:focus { border-color: var(--brand); }
.auth-err { color: var(--brand-deep); font-size: 14px; font-weight: 550; }
.auth-err:empty { display: none; }
.auth-switch { text-align: center; margin-top: 22px; font-size: 14.5px; color: var(--ink-soft); }
.auth-switch a { color: var(--brand-deep); font-weight: 650; }
.auth-ok { text-align: center; padding: 20px 0; }
.auth-ok h2 { font-size: 22px; margin-bottom: 8px; }
.auth-ok p { color: var(--ink-soft); }

/* ---------- My requests page ---------- */
.page-head { padding: 40px 0 6px; }
.page-head h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; font-weight: 800; }
.page-head p { color: var(--ink-soft); margin-top: 6px; }
.req-rows { display: flex; flex-direction: column; gap: 12px; padding: 26px 0 80px; }
.req-row {
  display: grid; grid-template-columns: 1.5fr 1.2fr 1.3fr .9fr .8fr; gap: 18px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 22px;
}
.req-row .s { font-weight: 700; font-size: 15px; }
.req-row .aff { font-size: 13px; color: var(--ink-faint); }
.req-flight { font-size: 13.5px; color: var(--ink-soft); }
.req-when { font-size: 13px; color: var(--ink-faint); text-align: right; }
/* Shared Client Requests queue vocabulary (team panel statuses). Slugged:
   "In Progress" -> In-Progress. */
.status-badge { font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.status-Requested   { background: #EFF1F4; color: #5A6072; }
.status-In-Progress { background: #FDF3E1; color: #9A6A0B; }
.status-Sent        { background: #E3F2FD; color: #1565C0; }
.status-Secured     { background: #E4F5EE; color: #12946A; }
.status-Declined    { background: #FCECEC; color: #C0392B; }

.empty { text-align: center; color: var(--ink-faint); padding: 70px 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .3s, transform .3s; z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .rate-cpv { display: none; }
  .avail-row { grid-template-columns: 1.1fr 1.3fr .95fr 1.4fr .85fr .6fr .95fr; }
}
@media (max-width: 900px) {
  .hiw-grid { grid-template-columns: 1fr; }
  /* Lead-in keeps its audience number; the grid drops to a card reflow sooner
     instead of squeezing seven columns. */
  .avail-row { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .a-rate, .a-action, .avail-row .chips { text-align: left; }
  .avail-row .chips { flex-direction: row; }
  .rate-cpv { display: block; }
}
@media (max-width: 880px) {
  .nav-links, .nav-signin, .nav-onair, .nav-account, .nav-cta { display: none; }
  .nav-menu-btn { display: inline-flex; }
}
@media (max-width: 760px) {
  .stats { gap: 32px; }
  .req-row { grid-template-columns: 1fr 1fr; }
  .req-when { text-align: left; }
}

/* "Name your number" — optional offer + commitment chips in the request modal.
   Deliberately NOT a row-level button: putting a negotiate affordance on every
   row publicly teaches that the whole rate card is soft, and buyers carry that
   lesson into direct station conversations. The door is inside the modal, at
   the moment a buyer has already decided they want the slot. */
.field-help { display: block; font-size: 12.5px; color: var(--ink-faint);
  font-weight: 450; margin-top: 4px; line-height: 1.45; }
.offer-read { display: none; font-size: 12.5px; font-weight: 600; margin-top: 6px;
  padding: 7px 10px; border-radius: 8px; background: var(--surface); color: var(--ink-soft); }
.offer-read.show { display: block; }
.offer-read.warn { background: #FFF4E0; color: #A8690A; }
.commit-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.commit-chip { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 13px; transition: border-color .12s, background .12s, color .12s; }
.commit-chip:hover { border-color: var(--ink-faint); }
.commit-chip.on { background: var(--brand-tint); border-color: var(--brand);
  color: var(--brand-deep); }
/* The one word that reframes a posted rate as a position rather than a verdict. */
.rate-ask { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1; margin-bottom: 2px; }