/*
 * Page-owned CSS for the Best Truck Stops ranking pilot
 * (/locations/truck-stops/best-rated). Ranking navigation and the
 * review modal live here — shared claim-listing presentation and other basics
 * comes from the shared Foundation (locations.css) and the
 * components.site.data.* candidate stylesheet (data-pages.css). No hex
 * values below; every color is a Foundation token from locations.css's
 * :root block, read directly rather than copied, per
 * docs/design-system.md's "don't duplicate token values" rule.
 *
 * Content and structure restored from the approved Texas Best prototype
 * (see the fidelity note in ranking/truck-stops-best.blade.php); the
 * destination URL and attribution were fixed to match this repo's real
 * app-link convention, which the prototype did not use.
 */

/* Reuse the real Locations empty panel and decorative location illustration.
   The toolbar already owns the gap above the results; do not add the
   Locations answer-to-panel margin a second time. State semantics stay separate. */
.tp-ranking-page .tpl-empty.tpl-ranking-state {
  margin-top: 0;
}

.tp-ranking-page .tpl-ranking-state__title {
  margin: 0 0 12px;
  font-size: var(--tp-type-heading-5-size);
  line-height: var(--tp-type-heading-5-line);
  font-weight: var(--tp-type-heading-5-weight);
  color: var(--tpl-ink);
}

.tp-ranking-page .tpl-ranking-state__description {
  margin: 0 auto 24px;
  max-width: 62ch;
  font-size: var(--tp-type-body-size);
  line-height: var(--tp-type-body-line);
  color: var(--tpl-ink-muted);
}

.tp-ranking-page .tpl-ranking-state__description:last-child { margin-bottom: 0; }

.tp-ranking-page .tpl-review-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Exact parity with the shared Site Chrome Demo and Product Picker modals. */
  background: rgba(0, 0, 0, 0.8);
}

.tp-ranking-page .tpl-review-modal.is-open {
  display: flex;
}

.tp-ranking-page .tpl-review-modal__box {
  width: 100%;
  max-width: 400px;
  background: var(--tpl-white);
  border-radius: var(--tpl-radius);
  padding: 28px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
}

.tp-ranking-page .tpl-review-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--tpl-ink-muted);
  cursor: pointer;
}

.tp-ranking-page .tpl-review-modal__close:focus-visible {
  outline: 2px solid var(--tpl-blue);
  outline-offset: 2px;
}

.tp-ranking-page .tpl-review-modal__eyebrow {
  font-size: var(--tp-type-caption-size);
  line-height: var(--tp-type-caption-line);
  font-weight: var(--tp-type-heading-5-weight);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tpl-blue);
  margin: 0 32px 8px 0;
}

.tp-ranking-page .tpl-review-modal__title {
  font-size: var(--tp-type-heading-5-size);
  line-height: var(--tp-type-heading-5-line);
  font-weight: var(--tp-type-heading-5-weight);
  color: var(--tpl-ink);
  margin: 0 0 12px;
}

.tp-ranking-page .tpl-review-modal__body {
  font-size: var(--tp-type-body-small-size);
  line-height: var(--tp-type-body-small-line);
  color: var(--tpl-ink-muted);
  margin: 0 0 20px;
}

.tp-ranking-page .tpl-review-modal__cta {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Shared footnote geometry and Foundation small-copy typography. */
.tp-ranking-page .tpl-claim,
.tp-ranking-page .tpl-fine-print {
  font-size: var(--tp-type-body-small-size);
  line-height: var(--tp-type-body-small-line);
  color: var(--tpl-ink-soft);
}

/* Foundation small-copy shrinks at tablet widths; keep readable metadata at
   the existing 14px body role at this breakpoint, without changing tokens. */
@media (min-width: 810px) and (max-width: 1199px) {
  .tp-ranking-page .tpl-claim,
  .tp-ranking-page .tpl-fine-print {
    font-size: var(--tp-type-body-size);
  }
}

/* Hero metadata uses the shared dark-surface roles. Statistics deliberately
   keep the real Locations `.tpl-stats` / `.tpl-stat` treatment unchanged. */
.tp-ranking-page .tpl-lastupdated {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: var(--tp-type-body-small-line);
  color: var(--tpl-on-dark-secondary);
}

.tp-ranking-page .tpl-lastupdated a {
  /* Prototype used an invented, non-token cyan (#12dfff) specifically so
     this link would pop against the muted surrounding text, not blend in.
     --tpl-blue-bright is the real token for exactly that job ("accents,
     highlights" per locations.css's own comment). */
  color: var(--tpl-blue-bright);
  font-weight: 600;
}

/*
 * Ranking controls belong to the result they change, not to the marketing
 * Hero. The state selector consumes the shared Foundation field/select.
 * Best <-> Most Visited is URL navigation, so it uses nav links with
 * aria-current rather than ARIA tabs that would imply an in-page tab panel.
 */
.tp-ranking-page .tpl-ranking-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin: 0 0 18px;
}

.tp-ranking-page .tpl-modetabs {
  display: inline-flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border-radius: var(--tpl-radius);
  background: var(--tpl-surface-alt);
}

.tp-ranking-page .tpl-modetabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--tpl-radius-sm);
  color: var(--tpl-ink-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.tp-ranking-page .tpl-modetabs a.is-active {
  background: var(--tpl-white);
  color: var(--tpl-ink);
  box-shadow: inset 0 0 0 1px var(--tpl-line);
}

.tp-ranking-page .tpl-modetabs a:not(.is-active):hover {
  color: var(--tpl-blue-strong);
}

.tp-ranking-page .tpl-modetabs a:focus-visible {
  outline: 2px solid var(--tpl-blue);
  outline-offset: 2px;
}

.tp-ranking-page .tpl-statejump {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tp-ranking-page .tpl-statejump label {
  white-space: nowrap;
}

.tp-ranking-page .tpl-statejump .tp-site-select {
  width: 220px;
}

/* Ranking's waiting composition reuses the shared Locations shimmer while
   preserving this surface's own hero/table anatomy. Every target-dependent
   value becomes a placeholder, so old ranking content cannot masquerade as
   the destination while the complete SSR document is arriving. */
.tp-ranking-page .tpl-ranking-transition-hero__content,
.tp-ranking-page .tpl-ranking-transition-main {
  position: relative;
}

.tp-ranking-page .tpl-ranking-transition-crumb {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.tp-ranking-page .tpl-ranking-transition-crumb .tpl-transition-line:nth-child(1) { width: 58px; height: 8px; }
.tp-ranking-page .tpl-ranking-transition-crumb .tpl-transition-line:nth-child(2) { width: 78px; height: 8px; }
.tp-ranking-page .tpl-ranking-transition-crumb .tpl-transition-line:nth-child(3) { width: 62px; height: 8px; }

.tp-ranking-page .tpl-ranking-transition-title,
.tp-ranking-page .tpl-ranking-transition-subtitle,
.tp-ranking-page .tpl-ranking-transition-meta,
.tp-ranking-page .tpl-ranking-transition-heading {
  display: flex;
  align-items: center;
}

.tp-ranking-page .tpl-ranking-transition-title { min-height: 54px; }
.tp-ranking-page .tpl-ranking-transition-title .tpl-transition-line { width: min(540px, 62vw); height: 34px; border-radius: var(--tpl-radius); }
.tp-ranking-page .tpl-ranking-transition-subtitle { min-height: 34px; margin-top: 6px; }
.tp-ranking-page .tpl-ranking-transition-subtitle .tpl-transition-line { width: min(430px, 58vw); height: 12px; }
.tp-ranking-page .tpl-ranking-transition-stats { display: flex; gap: 20px; margin-top: 30px; }
.tp-ranking-page .tpl-ranking-transition-stats span {
  display: block;
  width: 168px;
  height: 64px;
  border-radius: var(--tpl-radius);
  background: var(--tpl-on-dark-surface);
}
.tp-ranking-page .tpl-ranking-transition-meta { margin-top: 16px; }
.tp-ranking-page .tpl-ranking-transition-meta .tpl-transition-line { width: 210px; height: 9px; }
.tp-ranking-page.tpl-ranking-transition-main { min-height: 650px; }
.tp-ranking-page .tpl-ranking-transition-heading { min-height: 36px; margin-bottom: 14px; }
.tp-ranking-page .tpl-ranking-transition-heading .tpl-transition-line { width: min(430px, 70vw); height: 20px; }
.tp-ranking-page .tpl-ranking-transition-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.tp-ranking-page .tpl-ranking-transition-control {
  display: block;
  width: 174px;
  height: 48px;
  border-radius: var(--tpl-radius);
  background: var(--tpl-placeholder);
}
.tp-ranking-page .tpl-ranking-transition-control--state { width: 290px; }

@media (max-width: 720px) {
  .tp-ranking-page .tpl-ranking-toolbar {
    display: grid;
    align-items: stretch;
    gap: 18px;
  }

  .tp-ranking-page .tpl-modetabs,
  .tp-ranking-page .tpl-statejump {
    width: 100%;
  }

  .tp-ranking-page .tpl-statejump .tp-site-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .tp-ranking-page .tpl-modetabs a {
    flex: 1 1 0;
  }

  .tp-ranking-page .tpl-ranking-transition-title .tpl-transition-line { width: 84vw; height: 28px; }
  .tp-ranking-page .tpl-ranking-transition-subtitle .tpl-transition-line { width: 76vw; }
  .tp-ranking-page .tpl-ranking-transition-stats { gap: 12px; }
  .tp-ranking-page .tpl-ranking-transition-stats span { width: min(42vw, 168px); }
  .tp-ranking-page .tpl-ranking-transition-toolbar { display: grid; gap: 14px; }
  .tp-ranking-page .tpl-ranking-transition-control,
  .tp-ranking-page .tpl-ranking-transition-control--state { width: 100%; }
}