/* ─────────────────────────────────────────────────────────────────────────
   AUDIENCE TOGGLE — two-hero switch on the landing hero.
   "For carriers & service providers" (default, the existing quote-tool hero)
   ⇄ "For shippers" (the FMCSA carrier-directory search hero).

   Style contract: QuoteFleet dark brand, Maersk-clean, LEFT-aligned headers
   (the shared .hero centers text — overridden here), blue (white-on-blue) +
   dark-grey buttons only (no cream / no orange). Tokens + on-ramp spacing so
   the color + spacing guards stay green. Loaded AFTER style.css so it wins.
   ───────────────────────────────────────────────────────────────────────── */

/* The audience hero is left-aligned regardless of the shared .hero centering. */
.qf-aud-hero { text-align: left; }
.qf-aud-hero .hero-grid { text-align: left; }

/* ── Segmented control ─────────────────────────────────────────────────── */
.qf-aud-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  max-width: 100%;
}
.qf-aud-seg {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: transparent;
  padding: 8px 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: all .2s ease;
}
.qf-aud-seg:hover { color: var(--ink-soft); }
/* (REMOVED) `.qf-aud-seg.is-active` — opaque-white label on `var(--accent-fill)`
   — the first-wave "selected half floods with the brand fill" chip. Wave 12
   (#576) made the selected state a sliding knob behind the labels and gave the
   segment `background: none !important`, so this rule has painted nothing since;
   it was only still here waiting for a specificity change to put a blue box
   back under one of the two labels. The `.is-active` hook stays in the markup
   and in landing-hero-fixes-v2.css, which is where the selected state is drawn. */
/* KEPT DELIBERATELY. landing-hero-fixes-v2.css rings focus in `--hero-wash-ink`
   at (0,5,2), which out-specifies this, so on the landing page this rule is the
   one that never fires. It is kept anyway because it is the ONLY focus ring on
   `.qf-aud-seg` that does not depend on `body.landing-v2.qf-wft` — deleting it
   is the single removal here that could leave a keyboard user with no visible
   focus indicator at all. The offset is negative to match the v2 rule rather
   than fight it: with the Wave 12 track unpainted there is no rim for an outset
   ring to sit inside, so an outset ring straddles the control's silhouette. */
.qf-aud-seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ── Panels + cross-fade ───────────────────────────────────────────────── */
.qf-aud-panel { display: block; }
.qf-aud-panel[hidden] { display: none; }@media (prefers-reduced-motion: reduce) {
  .qf-aud-panel.is-entering { animation: none; }
  .qf-aud-seg { transition: none; }
}

/* ── Shippers hero ─────────────────────────────────────────────────────── */
.qf-shipper-hero { max-width: 820px; }
.qf-shipper-hero .eyebrow { text-align: left; }
.qf-shipper-hero h1 {
  text-align: left;
  margin: 0 0 16px 0;
}
.qf-shipper-lead {
  text-align: left;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 24px 0;
}
.qf-shipper-lead strong { color: var(--ink-soft); font-weight: 700; }

/* Screen-reader-only labels (margin-free so the spacing guard stays green). */
.qf-shipper-hero .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Search bar */
.qf-dir-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 760px;
}
.qf-dir-field {
  position: relative;
  display: flex;
  flex: 1 1 160px;
  min-width: 0;
}
/* Company-name free-text field spans the full first row of the search bar, above
   the port/equipment/safety selects. Submits to /directory?q=<name>. */
.qf-dir-field--text {
  flex: 1 1 100%;
}
/* Higher specificity than `.qf-dir-field::after` (defined below) so the select
   chevron never renders on the free-text company-name field. */
.qf-dir-search .qf-dir-field--text::after { content: none; }
.qf-dir-name {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  min-height: 44px;
}
.qf-dir-name::placeholder { color: var(--muted); }
.qf-dir-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.qf-dir-field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 8px 32px 8px 12px;
  min-height: 44px;
  cursor: pointer;
}
.qf-dir-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.qf-dir-field::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.qf-dir-search .qf-dir-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  background: var(--accent-fill);
  border: 1px solid var(--accent-fill);
  border-radius: var(--radius-btn);
  padding: 8px 24px;
  min-height: 44px;
  cursor: pointer;
  transition: all .2s ease;
}
.qf-dir-search .qf-dir-submit:hover {
  background: var(--accent-strong);
}
.qf-dir-search .qf-dir-submit:active { transform: translateY(0); }

/* Stat row */
.qf-dir-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 24px 0 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}
.qf-dir-stats li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.qf-dir-stats li strong {
  color: var(--ink);
  font-weight: 700;
}
.qf-dir-stats li + li::before {
  content: "·";
  color: var(--muted-soft);
  margin-right: 8px;
}

.qf-shipper-browse {
  margin: 16px 0 0 0;
  font-size: 14px;
}
.qf-shipper-browse a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.qf-shipper-browse a:hover { text-decoration: underline; }
.qf-shipper-browse .arr { margin-left: 4px; }

/* Contextual header CTA swap keeps the secondary button styling; no extra CSS. */

/* ── Responsive (375px) ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qf-aud-toggle {
    display: flex;
    width: 100%;
  }
  .qf-aud-seg {
    flex: 1 1 0;
    padding: 8px 8px;
    font-size: 13px;
    text-align: center;
    white-space: normal;
  }
  .qf-shipper-hero h1 { font-size: 32px; }
  .qf-shipper-lead { font-size: 16px; }
  .qf-dir-search { flex-direction: column; }
  .qf-dir-field { flex: 1 1 auto; }
  .qf-dir-search .qf-dir-submit { width: 100%; }
  .qf-dir-stats { font-size: 12px; }
}

/* ── "Find your company" carrier finder (carrier hero) ─────────────────────
   The trucker-facing typeahead that opens the demo prefilled as THEIR carrier.
   The field reuses .qf-dir-name (design-system input); this adds the anchored
   listbox + option rows. Left-aligned, theme-token colors, 8px-ramp spacing.
   ───────────────────────────────────────────────────────────────────────── */
.qf-finder {
  margin: 0 0 24px 0;
  max-width: 480px;
  text-align: left;
}
.qf-finder__field {
  position: relative;
}
.qf-finder__micro {
  margin: 8px 0 0 0;
  color: var(--muted);
}
/* Screen-reader-only live status (results count) — margin/border-free so the
   spacing guard stays green. */
.qf-finder__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Anchored results listbox. */
.qf-finder__listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  margin: 4px 0 0 0;
  padding: 4px;
  list-style: none;
  max-height: 336px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.qf-finder__listbox[hidden] { display: none; }

.qf-finder__opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.qf-finder__opt.is-active,
.qf-finder__opt:hover {
  background: var(--accent-soft);
}
.qf-finder__opt-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.qf-finder__opt-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.qf-finder__msg {
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Each directory stat is one atomic fact — the row may wrap BETWEEN stats, but
   a single stat must never break across lines ("18,000+" on one line, "Cities"
   on the next). Appended at EOF rather than merged into the .qf-dir-stats block
   above on purpose: the spacing/colour guards baseline by LINE NUMBER, so a
   mid-file insertion renumbers every violation below it. See
   docs/design-refactor/baseline-protocol.md.
   Motivated by the FMCSA-freshness fix: that stat now renders the real data
   vintage ("Aug 31, 2026 FMCSA data"), which is longer than the cadence word it
   replaced and so is the item most likely to straddle a line break at 375px. */
.qf-dir-stats li { white-space: nowrap; }