/* Border-queue page. Layers on top of styles.css and reuses its :root tokens.
   Uses CSS logical properties throughout (inset-inline, margin-inline,
   text-align: start) so the Hebrew RTL variant needs no separate rules. */

/* Queue severity ramp. Three of the four steps are the brand's own warm scale
   — accent amber, primary orange, the dark orange already used for errors — so
   the page reads as this site rather than a generic traffic light. Only the
   calm end needed a new colour, and it is warmed towards olive to sit with the
   cream ground instead of a cold UI green.

   Bands: under 45 min, up to 2 h, up to 4 h, beyond. Colour is always
   redundant with the figure printed beside it, never the sole carrier. */
.bw {
  background: var(--bg); color: var(--ink);
  --q-calm: #4F7A3F;
  --q-moderate: #B45309;
  --q-heavy: var(--primary);
  --q-severe: #9A3412;
}
.bw-wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot: hidden but real — not display:none and not type=hidden, both of
   which bots skip. Hidden without being moved off-canvas. The obvious `inset-inline-start:
   -9999px` is an RTL trap: it resolves to `right: -9999px` on the Hebrew page,
   which is 9999px past the right edge and makes the whole document scroll
   sideways. Clipping in place hides it just as well, is still a real focusable
   input a bot will fill, and cannot affect layout in either direction. */
.hp {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Chrome ------------------------------------------------------------- */
.bw-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0; flex-wrap: wrap;
}
.bw-top .brand-148 { color: var(--primary); font-weight: 700; }
.bw-top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bw-wa {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  font-weight: 600; font-size: var(--fs-sm); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 15px;
}
.bw-wa:hover { border-color: var(--primary); color: var(--primary-dark); }
.bw-langs { display: flex; gap: 6px; }
.bw-lang {
  font-size: var(--fs-sm); color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
.bw-lang:hover { color: var(--ink); border-color: var(--ink); }

.bw-foot {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 24px 0 60px;
  color: var(--mute); font-size: var(--fs-xs);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.bw-foot a { color: var(--mute); }
.bw-foot a:hover { color: var(--ink); }

/* --- Hero --------------------------------------------------------------- */
.bw-hero { padding: 24px 0 8px; }
.bw-kicker {
  display: inline-block; background: var(--accent-soft); color: var(--primary-dark);
  font-weight: 600; font-size: var(--fs-xs); padding: 5px 12px; border-radius: 999px;
}
.bw-hero h1 {
  font-size: var(--fs-3xl); letter-spacing: -0.02em;
  line-height: 1.12; margin: 10px 0 12px;
}
.bw-lead { font-size: var(--fs-lg); color: #3c3026; line-height: 1.65; max-width: 720px; margin: 0 0 14px; }
.bw-updated { font-size: var(--fs-sm); color: var(--mute); margin: 0 0 12px; }
.bw-updated time { font-weight: 600; color: var(--ink); }
.bw-disclaimer {
  background: var(--accent-soft); border: 1px solid #F3D9A4;
  border-radius: var(--radius-sm); padding: 11px 15px;
  font-size: var(--fs-sm); color: #6B4A12; line-height: 1.5; max-width: 720px; margin: 0;
}
.bw-jump { margin: 16px 0 0; }
.bw-cta-sm {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  font-size: var(--fs-base); color: var(--primary-dark);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
}

/* --- Flash messages ----------------------------------------------------- */
.bw-flash {
  border-radius: var(--radius-sm); padding: 13px 16px; font-size: var(--fs-base);
  margin: 20px 0 0; border: 1px solid var(--line); background: var(--surface);
}
.bw-flash-ok { border-color: #9FD8A8; background: #F1FAF2; color: #1F5C2C; }
.bw-flash-err { border-color: #E7B4A0; background: #FDF2EE; color: #9A3412; }

/* --- Sections ----------------------------------------------------------- */
.bw-section { padding: 30px 0; border-top: 1px solid var(--line); margin-top: 30px; }
.bw-section h2 { font-size: var(--fs-xl); letter-spacing: -0.01em; margin: 0 0 6px; }
.bw-sub { color: var(--mute); font-size: var(--fs-base); margin: 0 0 18px; }
.bw-prose p { color: #3c3026; line-height: 1.7; font-size: var(--fs-base); max-width: 760px; margin: 12px 0 0; }

/* --- Collapsible country groups ----------------------------------------- */
.bw-group {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-top: 12px; overflow: hidden;
}
.bw-group[open] { box-shadow: var(--shadow-sm); }
.bw-group-sum {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; cursor: pointer; list-style: none;
  background: color-mix(in oklab, var(--accent-soft) 40%, var(--surface));
  /* Comfortably above the 44px iOS minimum tap target. */
  min-height: 56px;
}
.bw-group-sum::-webkit-details-marker { display: none; }
.bw-group-sum:hover { background: color-mix(in oklab, var(--accent-soft) 65%, var(--surface)); }
.bw-group-sum:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Rubik/Heebo carry no emoji glyphs, so name the platform emoji fonts
   explicitly. Windows has no regional-indicator flag glyphs at all and will
   show the two letters ("PL") — acceptable, since the country name sits
   immediately beside it and the flag is aria-hidden decoration. */
.bw-flag {
  font-size: var(--fs-xl); line-height: 1; flex: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", sans-serif;
}
.bw-group-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); flex: 1 1 auto; }
/* Whole-border estimate on the summary row — the first number most visitors
   read, since every group starts collapsed. */
/* Fixed slots so the estimate and the badge line up vertically down the list.
   Without a min-width each row sizes to its own content — a row with no
   estimate, or a shorter badge, pulls the whole cluster sideways and the
   right-hand edge reads as ragged. */
.bw-group-est {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px;
  margin-inline-start: auto; white-space: nowrap; min-width: 104px;
}
.bw-group-est svg { width: 18px; height: 18px; color: var(--mute); flex: none; }
.bw-group-est b { font-size: var(--fs-lg); font-weight: 600; color: var(--primary-dark); }
.bw-group-est b.is-calm { color: var(--q-calm); }
.bw-group-est b.is-moderate { color: var(--q-moderate); }
.bw-group-est b.is-heavy { color: var(--q-heavy); }
.bw-group-est b.is-severe { color: var(--q-severe); }

.bw-group-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap; font-size: var(--fs-xs); color: var(--mute); min-width: 156px;
}
.bw-group-count { white-space: nowrap; }
.bw-group-reports {
  white-space: nowrap; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-weight: 500; color: var(--primary-dark);
}
.bw-group-reports.is-quiet { color: var(--mute); font-weight: 400; }
/* Chevron rotates on open. Uses a border triangle so it needs no icon font.
   Physical borders on purpose: this points down/up, which carries no direction
   to mirror. With logical properties the corner flips in RTL and an open group
   ends up showing a sideways chevron. */
.bw-chev {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute);
  transform: rotate(45deg); transition: transform .18s ease;
}
.bw-group[open] .bw-chev { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .bw-chev { transition: none; } }
.bw-group-intro {
  font-size: var(--fs-xs); color: var(--mute); line-height: 1.55;
  margin: 0; padding: 12px 16px 0; max-width: 72ch;
}

/* --- Table -------------------------------------------------------------- */
/* Wide content scrolls inside its own container so the page body never does.
   Below 760px the table is re-laid-out as cards instead — see the block at the
   end of this file — so this scroller only ever engages on wider screens. */
.bw-table-scroll { overflow-x: auto; padding: 12px 16px 16px; -webkit-overflow-scrolling: touch; }
.bw-table { width: 100%; border-collapse: collapse; min-width: 580px; }
.bw-table thead th {
  text-align: start; font-size: var(--fs-2xs); font-weight: 600; color: var(--mute);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.bw-th-ico { display: inline-flex; align-items: center; gap: 6px; }
.bw-th-ico svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.bw-th-sub {
  display: block; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: var(--fs-2xs); color: var(--mute); opacity: .75;
}
.bw-table tbody tr { border-top: 1px solid var(--line); }
.bw-table tbody tr:first-child { border-top: 0; }
.bw-table tbody tr:hover { background: color-mix(in oklab, var(--accent-soft) 22%, transparent); }
.bw-table tbody tr:target { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.bw-table td, .bw-rowhead { padding: 11px 12px; vertical-align: top; text-align: start; }
.bw-rowhead { font-weight: 500; }
.bw-name { display: block; font-size: var(--fs-base); }
.bw-pair { display: block; font-size: var(--fs-xs); color: var(--mute); margin-top: 1px; }
/* Same emoji stack as .bw-flag — Rubik/Heebo carry no emoji glyphs. On Windows,
   which has no regional-indicator flags, this degrades to the two letters
   ("UA"/"HU"), which still says which side is which. */
.bw-side-flag {
  font-size: var(--fs-2xs); line-height: 1; margin-inline-end: 5px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", sans-serif;
}
.bw-name .bw-side-flag { font-size: var(--fs-xs); }
.bw-hours { display: block; font-size: var(--fs-2xs); color: var(--mute); opacity: .8; margin-top: 3px; }
.bw-hours.is-limited { color: var(--primary-dark); opacity: 1; font-weight: 500; }
.bw-activity { display: block; font-size: var(--fs-2xs); color: var(--primary-dark); margin-top: 4px; font-weight: 500; }
.bw-activity.is-quiet { color: var(--mute); opacity: .7; font-weight: 400; }

.bw-cell { display: block; min-width: 108px; }
.bw-val { display: block; font-size: var(--fs-lg); font-weight: 600; color: var(--ink); line-height: 1.25; }
/* Digits in the system's data face with tabular figures, so estimates line up
   down a column and read as measurements. The unit stays in the UI font —
   JetBrains Mono has no Hebrew glyphs, and mixing faces mid-word would show. */
.bw-fig {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.bw-unit { font-size: 0.82em; font-weight: 500; opacity: .75; }
.bw-val.is-calm { color: var(--q-calm); }
.bw-val.is-moderate { color: var(--q-moderate); }
.bw-val.is-heavy { color: var(--q-heavy); }
.bw-val.is-severe { color: var(--q-severe); }
.bw-note { display: block; font-size: var(--fs-2xs); color: var(--mute); line-height: 1.45; margin-top: 2px; }
.bw-cell.is-stale .bw-val { color: var(--mute); font-weight: 500; }
.bw-cell.is-stale .bw-note { font-style: italic; }
.bw-cell.is-empty .bw-note { color: var(--mute); opacity: .85; }
.bw-cell.is-na .bw-note { opacity: .55; }
/* Brief highlight when JS patches a cell after a refresh. */
.bw-cell.is-fresh { animation: bw-pulse 1.4s ease-out; }
@keyframes bw-pulse {
  from { background: color-mix(in oklab, var(--accent) 30%, transparent); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .bw-cell.is-fresh { animation: none; } }


/* --- Report form -------------------------------------------------------- */
.bw-form {
  /* Containing block for the clipped honeypot above. */
  position: relative;
  display: grid; gap: 14px; max-width: 620px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm); margin-top: 4px;
}
.bw-field { display: grid; gap: 6px; }
.bw-field > label { font-size: var(--fs-xs); font-weight: 500; color: var(--ink); }
.bw-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .bw-grid-2 { grid-template-columns: 1fr; } }
.bw-hint { font-size: var(--fs-xs); color: var(--mute); }
/* Number + unit sit on one line; the unit select is sized to its content so
   the number keeps the space it needs on a narrow phone. */
.bw-wait-row { display: grid; grid-template-columns: 1fr minmax(112px, auto); gap: 8px; }
.bw-submit { justify-self: start; margin-top: 2px; }
@media (max-width: 520px) { .bw-submit { justify-self: stretch; width: 100%; } }

/* --- FAQ ---------------------------------------------------------------- */
.bw-faq { margin: 12px 0 0; }
.bw-faq dt { font-weight: 600; margin: 16px 0 5px; }
.bw-faq dd { margin: 0; color: #3c3026; line-height: 1.65; font-size: var(--fs-base); max-width: 760px; }

/* --- CTA ---------------------------------------------------------------- */
.bw-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 4px 0 0; }
.bw-cta {
  display: inline-flex; align-items: center; gap: 10px; background: var(--primary);
  color: #fff; font-weight: 600; font-size: var(--fs-md); padding: 13px 24px;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.bw-cta:hover { background: var(--primary-dark); }
.bw-mail { font-weight: 500; }
/* Mirrors .ftr-link-em on the booking page footer. */
.bw-mail-at { color: var(--primary); font-weight: 700; margin-inline-end: 7px; }

/* --- Crossing index ----------------------------------------------------- */
.bw-index {
  display: grid; gap: 20px; grid-template-columns: 1fr;
  border-top: 1px solid var(--line); margin-top: 30px; padding: 26px 0 0;
}
@media (min-width: 560px) { .bw-index { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bw-index { grid-template-columns: repeat(5, 1fr); } }
.bw-index h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); margin: 0 0 8px; }
.bw-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bw-index a { font-size: var(--fs-xs); color: var(--mute); }
.bw-index a:hover { color: var(--primary-dark); }

/* --- Mobile: table becomes cards ---------------------------------------- */
/* Four columns cannot fit a phone, and a horizontally scrolling table hides
   the "out of Ukraine" column with no affordance. Below 760px each row is
   re-laid out as a stacked card and every value carries its own label, so
   nothing is off-screen and the page never scrolls sideways. */
@media (max-width: 760px) {
  .bw-table-scroll { overflow-x: visible; padding: 10px 10px 12px; }
  .bw-table { min-width: 0; }
  .bw-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bw-table, .bw-table tbody, .bw-table tr, .bw-table td, .bw-table th { display: block; }

  .bw-table tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 12px 14px; margin-bottom: 10px; background: var(--surface);
  }
  .bw-table tbody tr:first-child { border-top: 1px solid var(--line); }
  .bw-table tbody tr:last-child { margin-bottom: 0; }
  .bw-table tbody tr:hover { background: var(--surface); }

  .bw-rowhead { padding: 0 0 10px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
  .bw-name { font-size: var(--fs-md); font-weight: 600; }

  .bw-table td { padding: 7px 0; }
  .bw-table td::before {
    content: attr(data-label);
    display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--mute);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
  }
  /* The disclosure already names itself. */
  .bw-table td.bw-more::before { content: none; }
  .bw-table td.bw-more { padding-top: 4px; }
  .bw-cell { min-width: 0; }
  .bw-val { font-size: var(--fs-lg); }
  .bw-note { font-size: var(--fs-xs); }

  /* Two explicit rows, so the chevron stays beside the country name instead of
     being pushed onto a third line by the wrapped meta. */
  .bw-group-sum {
    display: grid; gap: 4px 10px; padding: 13px 14px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "flag title chev" "est est est" "meta meta meta";
    align-items: center;
  }
  .bw-flag { grid-area: flag; }
  .bw-group-title { grid-area: title; font-size: var(--fs-base); }
  .bw-group-est { grid-area: est; margin-inline-start: 0; }
  .bw-chev { grid-area: chev; }
.bw-group-meta { grid-area: meta; margin-inline-start: 0; font-size: var(--fs-xs); }
  .bw-group-intro { padding: 12px 14px 0; font-size: var(--fs-xs); }
  .bw-index { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .bw-wrap { padding: 0 14px; }
  .bw-index { grid-template-columns: 1fr; }
}

/* --- iOS specifics ------------------------------------------------------- */
/* Safari zooms the page when a focused control's font-size is under 16px, which
   on this form would fire on every field. Pin them to 16px and normalise the
   native select chrome, which otherwise renders inconsistently on iOS.
   Deliberately a literal and not a scale token: this is a browser threshold,
   not a typographic choice, and it must not move when the scale does. */
.bw-form input,
.bw-form select {
  font-size: 16px;
  min-height: 46px;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface);
}
/* One symmetric SVG chevron rather than two composed gradient halves: the
   gradient pair only forms a triangle in one direction, and mirroring it for
   RTL swaps the halves and renders a sliver. */
.bw-form select {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236B5A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 8px;
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[dir="rtl"] .bw-form select { background-position: left 14px center; }
/* Keep the sticky-free footer clear of the iPhone home indicator. */
/* --- Per-crossing pages -------------------------------------------------- */
/* Everything here is additive: the crossing pages reuse .bw-table, .bw-cell,
   .bw-section and the form wholesale, so they inherit the mobile card layout
   and the RTL handling already defined above. */

.bw-crumbs { padding: 14px 0 0; font-size: var(--fs-xs); }
.bw-crumbs a { color: var(--mute); }
.bw-crumbs a:hover { color: var(--primary-dark); }

/* The crossing name in a table row is a link to that crossing's own page.
   Underlined only on hover: 22 permanently underlined names would turn the
   table into a wall of rules. */
.bw-rowlink { color: inherit; }
.bw-rowlink:hover { color: var(--primary-dark); text-decoration: underline; }

/* The answer, at the size of the answer.

   This page exists to tell somebody how long the queue is; the h1 asks that
   question and used to be the largest thing on screen, with the figure in a
   small card underneath. Reversed — but the figure kept a container. At 44px
   loose on the page background it had size and no weight, and the top of the
   page read like unstyled markup. The card holds the three things that are all
   about this queue right now: which crossing, how long, how fresh. */
.bw-hero-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px 26px; margin: 4px 0 28px; max-width: 560px;
}
/* Nothing reported here. Softer, because the card is standing in for an
   answer it does not have. */
.bw-hero-card.is-quiet { background: transparent; box-shadow: none; border-style: dashed; }

.bw-place {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: var(--fs-md); font-weight: 500; color: var(--ink);
}
.bw-place-sep { color: var(--mute); }

.bw-answer { margin: 0; }
.bw-answer-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--mute); margin-bottom: 4px;
}
.bw-answer-label svg { width: 15px; height: 15px; }
.bw-answer .bw-val { font-size: var(--fs-figure); line-height: 1.05; }
.bw-answer .bw-note { font-size: var(--fs-xs); margin-top: 6px; }
/* No figure of its own: the empty state should not be set at hero scale. */
.bw-answer .bw-cell.is-empty .bw-note { font-size: var(--fs-md); font-style: normal; }

/* What the neighbours are doing, when this crossing has nothing to say. */
/* display:flex would otherwise beat the hidden attribute the refresh sets. */
.bw-nearby[hidden] { display: none; }
.bw-nearby {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-base);
}
.bw-nearby-label { color: var(--mute); }
.bw-nearby a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); }
.bw-nearby a:hover { color: var(--primary-dark); }
/* The face comes from the shared .bw-fig rule, which is careful to leave the
   unit in the UI font — JetBrains Mono has no Hebrew glyphs. */
.bw-nearby b { font-weight: 600; }
.bw-nearby b.is-calm { color: var(--q-calm); }
.bw-nearby b.is-moderate { color: var(--q-moderate); }
.bw-nearby b.is-heavy { color: var(--q-heavy); }
.bw-nearby b.is-severe { color: var(--q-severe); }

/* The question. Still the h1; no longer shouting over its own answer.

   Selector deliberately carries the element as well as the class: the shared
   `.bw-hero h1` rule above is (0,1,1) and a bare `.bw-question` is (0,1,0), so
   the class alone silently lost and the headline stayed at 40px. */
.bw-hero h1.bw-question {
  font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.3; margin: 0 0 14px; max-width: 720px;
}
.bw-hero-crossing .bw-lead { margin: 0 0 20px; }

/* What the dataset knows, on one line, where somebody deciding whether to
   drive here is actually looking. */
.bw-facts-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: var(--fs-sm); color: var(--mute);
}
.bw-facts-line .is-limited { color: var(--primary-dark); font-weight: 500; }
.bw-facts-line .bw-pickup { color: var(--q-calm); font-weight: 500; }
.bw-dot { color: var(--line); }
.bw-disclaimer-inline {
  margin: 0 0 20px; font-size: var(--fs-xs); color: var(--mute);
}
.bw-hero-crossing .bw-jump { margin: 0; }

/* The quieter-neighbour callout. Only rendered when the gap is real — see
   border_stats.quieter_alternative — so it never has to hedge. */
.bw-alt {
  background: var(--accent-soft); border: 1px solid #F3D9A4;
  border-radius: var(--radius); padding: 14px 18px; margin: 22px 0 0;
  max-width: 620px;
}
.bw-alt b { display: inline; color: #6B4A12; font-size: var(--fs-base); }
/* Which queue the advice is about. A neighbour is only ever quicker in one
   direction at a time, and a callout that did not say which would be worse
   than none. */
.bw-alt-dir {
  display: inline-block; margin-inline-start: 8px; padding: 2px 9px;
  border-radius: 999px; background: rgba(107, 74, 18, 0.1);
  color: #6B4A12; font-size: var(--fs-xs); font-weight: 600; vertical-align: 1px;
}
.bw-alt p { margin: 6px 0 10px; color: #6B4A12; font-size: var(--fs-sm); line-height: 1.55; }

.bw-facts { display: grid; gap: 12px; margin: 14px 0 0; max-width: 720px; }
@media (min-width: 620px) { .bw-facts { grid-template-columns: 1fr 1fr; } }
.bw-fact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 15px;
}
.bw-fact dt {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mute); margin-bottom: 3px;
}
.bw-fact dd { margin: 0; font-size: var(--fs-base); color: var(--ink); line-height: 1.5; }
.bw-fact dd.is-limited { color: var(--primary-dark); font-weight: 500; }

.bw-activity-line { font-size: var(--fs-xs); color: var(--mute); margin: 14px 0 0; }
.bw-activity-line .bw-activity { display: inline; margin-top: 0; }
.bw-activity-label { margin-inline-end: 4px; }

/* Same blurb as the hub's collapsed group, without the disclosure padding. */
.bw-group-intro-flat { padding: 0; margin: 0 0 14px; }

/* --- The hero, on a phone ------------------------------------------------ */
/* Placed here, after the rules it overrides. The first attempt sat higher in
   the file at the same specificity and silently lost — the same tie-break that
   kept the headline at 40px earlier, in the other direction.

   Two things go wrong at 390px. The question at 23px wraps to three lines
   directly under the card and reads as a second headline. And the figure
   clamps to its 30px floor, so the answer outranks the question by 7px, which
   is not a hierarchy. Both are fixed proportionally rather than absolutely. */
@media (max-width: 620px) {
  .bw-hero h1.bw-question { font-size: var(--fs-lg); line-height: 1.35; }
  .bw-hero-card { padding: 18px; }
  /* Two lines of neighbours read as one run without a little more room. */
  .bw-nearby { gap: 6px 18px; }
}

.bw-foot { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }