/* ==========================================================================
   Hiking v3 — routeCardV3 (Wave 5 Task 5.2)
   static/js/globe/routeCardV3.js renders one `<article class="rc3">` per
   route into whichever host renderRoutesChips() resolves (the legacy
   #ag-routes popup, or the Trip Studio panel's #bm-dir-routes), replacing
   the audit's unstyled inline-text badge rows for a v3 hiking payload only
   (data.engine === "surface-v3"): name, hero stats, leg bar, elevation
   profile, "Before you go" list.

   Self-contained: every rule is scoped under the .rc3 namespace with
   LITERAL colour values — no design-tokens.css edits, no dependency on the
   custom properties chrome.css defines in its `.bm-first-light` scope (this
   card has to render correctly wherever routeCardV3.js runs, independent of
   whichever chrome scope happens to be loaded around it). No [data-theme]
   branches — the globe page is single-look (dark mode is removed).

   Logical properties only (scripts/check_logical_css.sh gates every file in
   this directory) — no bare physical inset/margin/padding/border shorthands.
   ========================================================================== */

.rc3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-block-end: 10px;
  border-radius: 12px;
  background: rgba(10, 14, 22, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: #e7ecf5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}

.rc3:last-child { margin-block-end: 0; }

.rc3:hover {
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}

.rc3:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.rc3--selected {
  border-color: rgba(96, 165, 250, .55);
  background: rgba(16, 22, 34, .82);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(96, 165, 250, .25);
}

/* Overall safety band (cardModel's bandLevel, from safety.band) — a thin
   accent on the card's leading edge; the byg list below already carries the
   per-hazard detail, so this is a glance-level signal, not a re-paint. */
.rc3--band-danger { border-inline-start: 3px solid #f87171; }
.rc3--band-caution { border-inline-start: 3px solid #fbbf24; }
.rc3--band-clear { border-inline-start: 3px solid #34d399; }

.rc3__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc3__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: #f5f7fb;
  letter-spacing: -0.01em;
}

.rc3__subtitle {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #9aa7bd;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── 4-stat hero grid: distance / time / ascent / descent ────────────── */
.rc3__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.rc3__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: 7px;
  padding-inline: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  text-align: center;
}

.rc3__stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #f5f7fb;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rc3__stat-label {
  font-size: 9.5px;
  font-weight: 600;
  color: #7c8aa3;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Leg bar: 10px, one flex segment per terrain leg, in route order ──── */
.rc3__legs {
  display: flex;
  block-size: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

.rc3__leg {
  block-size: 100%;
  min-inline-size: 2px;
}

.rc3__leg--trail { background: #34d399; }
.rc3__leg--track { background: #a3e635; }
.rc3__leg--road { background: #f59e0b; }
.rc3__leg--open_ground { background: #60a5fa; }

/* ── Elevation profile: 120px sparkline, drawn 0–100 × 0–32 ───────────── */
.rc3__profile {
  display: block;
  block-size: 120px;
  inline-size: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.rc3__profile polyline {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ── Before you go ─────────────────────────────────────────────────────── */
.rc3__byg-heading {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #7c8aa3;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.rc3__byg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc3__byg-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-block: 6px;
  padding-inline: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  font-size: 12.5px;
  line-height: 1.35;
}

.rc3__byg-item--danger {
  border-inline-start: 2px solid #f87171;
  background: rgba(248, 113, 113, .08);
}

.rc3__byg-item--caution {
  border-inline-start: 2px solid #fbbf24;
  background: rgba(251, 191, 36, .07);
}

.rc3__byg-item--info { border-inline-start: 2px solid #60a5fa; }

.rc3__byg-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1.35;
}

.rc3__byg-item--danger .rc3__byg-icon { color: #f87171; }
.rc3__byg-item--caution .rc3__byg-icon { color: #fbbf24; }
.rc3__byg-item--info .rc3__byg-icon { color: #60a5fa; }

.rc3__byg-text { flex: 1 1 auto; color: #d8deeb; }

.rc3__byg-meta {
  flex: 0 0 auto;
  color: #7c8aa3;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Refusal card (Wave 5 Task 5.5) ────────────────────────────────────
   templates/globe/index.html's renderHikeRefusal() upgrades the engine's
   refusal ({reason, detail, alternatives}) from a bare status sentence
   into a card in this same .rc3 family — reusing .rc3/.rc3__head/
   .rc3__title for the shell and .rc3__byg* for the alternatives list
   (each row tappable, unlike the route card's own read-only "before you
   go" list), so a refusal reads as one visual language with the route
   cards it replaces rather than a second, unrelated style. Unlike a route
   .rc3, the card itself is not a button (only the alternative rows, if
   any, are) — .rc3--refusal cancels the base .rc3's click/hover affordance
   rather than fighting cursor/transform rule by rule. */
.rc3--refusal {
  cursor: default;
}

.rc3--refusal:hover {
  border-color: rgba(255, 255, 255, .08);
  transform: none;
}

.rc3__detail {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #d8deeb;
}

/* .rc3__byg-item reused as an actual <button> — a real alternative
   re-fires the request — rather than the read-only <li> the route card's
   own "before you go" list builds. Resets the button's native chrome to
   keep it visually identical to that list, and adds the cursor/hover/
   focus affordance plain text never needed. */
.rc3__byg-item--action {
  inline-size: 100%;
  border: 0;
  margin: 0;
  font: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
}

.rc3__byg-item--action:hover,
.rc3__byg-item--action:focus-visible {
  background: rgba(255, 255, 255, .08);
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}