/* ASRouteMap 2.0 — aircraft card (M-08 T2, C1).
 *
 * A separate stylesheet rather than a section of shell.css, because the
 * card is a separate module and a separate DOM subtree. Every colour and
 * size comes from tokens.css; nothing here is a literal, so the card
 * cannot drift from the shell it is drawn over.
 *
 * The layout rule that shapes all of it: **no content state changes the
 * box.** The aircraft photo is missing roughly one click in twelve
 * (the two pilot worlds' row-weighted photo coverage is in the low
 * nineties per cent), remarks can be empty or a
 * paragraph, an airport may have no IATA code. Every variable-height
 * thing is either a fixed-size frame with the variable thing *inside*
 * it, or a line that is present-or-absent rather than present-empty. A
 * card that reflows when the photo 404s makes the popup jump under the
 * cursor at the moment the user is aiming at it.
 */

/* --- type weight, one rule for the whole card ----------------------
 *
 * The owner's complaint was measured, not tasted: this stylesheet used to
 * carry six bold declarations and five `text-transform: uppercase` rules
 * across 348 lines, which made every element equally loud and therefore
 * none of them emphatic. The rule now:
 *
 *   bold (weight >= 600) is spent on exactly two things —
 *     .asrm-fc-airline     the airline name, the card's subject
 *     .asrm-fc-prog-pct    the percentage, the number being read
 *   everything else is normal weight. `check-flightcard.mjs` counts the
 *   >=600 declarations in this file and fails if a third appears, so
 *   "at most two" cannot rot back to six.
 *
 * `text-transform: uppercase` is gone outright. It is not coming back on
 * the ORIGIN/DESTINATION labels or the fact terms: an all-caps 11.5px
 * label with letter-spacing is the loudest-looking thing on a 320px card,
 * and it was applied to the two least important strings on it.
 *
 * The airport code and the size numbers sit at 500 (medium) — deliberately
 * below the 600 line. They read as *stronger than prose* without being
 * bold, which is what a code needs; promoting either to 600 would be a
 * third bold element and the guard fails.
 */

/* The card pop-ups' own type scale (owner, 2026-10-02: "On the pop-ups, I
 * want to reduce the font size from the current 12 to 10px and the weight
 * from 400 to 300. That will make everything a bit smaller giving it more
 * space"). Every string in a card is sized off the shell's type tokens, so
 * the ruling lands as a scoped rescale of the three of them — a base size
 * alone would leave the fact rows at 12.8px over 10px prose, which reads
 * as a bug rather than as a smaller card — and the ratios follow the base
 * step (10 / 12.8). The shell's 11px readable floor is a rule about chrome
 * the visitor reads for orientation; a card is a document the visitor
 * opened, and the owner set its size with the cards open in front of them.
 * Emphasis weights (500/600) stay: hierarchy inside the card is not what
 * felt cramped. */
.asrm-fc-popup {
  --asrm-fs-body: 0.625rem; /* 10px — was the shell's 12.8 */
  --asrm-fs-title: 0.6rem; /* 9.6px — uppercase labels, was 11.5 */
  --asrm-fs-value: 0.74rem; /* 11.8px — titles and value cells, was 15.2 */
}

/* MapLibre paints its own popup chrome; we replace it rather than fight
 * it. Without killing the default white background and border the card
 * would be a dark box inset in a white one. */
.asrm-fc-popup .maplibregl-popup-content {
  padding: 0;
  background: var(--asrm-panel-bg);
  color: var(--asrm-fg);
  border: 1px solid var(--asrm-line);
  border-radius: 6px;
  font-size: var(--asrm-fs-body);
  font-weight: 300;
  box-shadow: 0 4px 16px rgb(0 0 0 / 55%);
}

.asrm-fc-popup .maplibregl-popup-close-button {
  /* The default close button is a black × on our dark panel — invisible.
   * Recoloured rather than replaced, so its position and hit target stay
   * whatever MapLibre decided they should be. */
  color: var(--asrm-fg-muted);
  background: transparent;
  font-size: 1.1rem;
  padding: 2px 8px;
}

.asrm-fc-popup .maplibregl-popup-tip {
  border-top-color: var(--asrm-panel-bg) !important;
  border-bottom-color: var(--asrm-panel-bg) !important;
}

/* Once the visitor has dragged a card, its anchor is a point they chose on
 * the map, not the object the card describes — the tip would point at
 * whatever ocean the card was moved over while claiming to point at the
 * plane. Owner ruling 2026-09-30: once dragged, the tip goes. The class is
 * added by `popupdrag.js` on the first pixel of the first drag and dies
 * with the popup, so a freshly opened card still points at its aircraft. */
.asrm-fc-popup.asrm-popup-dragged .maplibregl-popup-tip {
  display: none;
}

.asrm-fc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  /* 316px of content inside a 340px floor: wide enough that airline names
   * measured in the pilot data ("Air Suomi0", the long real ones) do not
   * ellipsis, narrow enough that the card never covers the route it is
   * describing. The floor was 260px inside a 320px popup until the owner
   * reported (2026-09-30) the ICAO suffix and the size pair overlapping and
   * airport names running out of room — both are the big code row refusing
   * to fit a ~144px half-column, so the floor and the popup's maxWidth
   * (400px, in `flightcard.js`) moved together. `min()` keeps a phone
   * viewport from being told to be narrower than it is. */
  min-width: min(340px, calc(100vw - 44px));
  line-height: 1.35;
}

/* --- 1. flag + airline ------------------------------------------- */

.asrm-fc-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 22px; /* clear the close button */
}

/* Fixed 20×15 frame. The flag is inside it, not beside it, so a world
 * with no country on the airline costs zero width rather than shifting
 * the name left by twenty pixels. */
.asrm-fc-flag {
  flex: 0 0 20px;
  width: 20px;
  height: 15px;
  display: inline-block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--asrm-panel-bg-raised);
}

.asrm-fc-flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asrm-fc-airline {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asrm-fc-airline-code {
  flex: none;
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-title);
  letter-spacing: 0.04em;
}

/* --- 2. aircraft photo + type ------------------------------------ */

/* The frame is always here and always this tall. That is the entire
 * no-jump guarantee: the placeholder is a property of the frame, and
 * the <img> either covers it or is not in the DOM at all. */
.asrm-fc-ac-frame {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--asrm-panel-bg-raised), var(--asrm-panel-bg));
  border: 1px solid var(--asrm-line);
}

/* The "no photo" state, painted by CSS so it needs no JS and cannot be
 * forgotten. A silhouette glyph would need a font; a centred caption
 * needs nothing, and says plainly what is absent. */
.asrm-fc-ac-frame::after {
  content: "no photo";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-title);
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.asrm-fc-ac-img {
  position: relative; /* above the ::after placeholder */
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crops the airframe */
  display: block;
  background: var(--asrm-panel-bg-raised);
}

.asrm-fc-ac-name {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 3. progress bar -------------------------------------------- */

.asrm-fc-prog {
  /* Fixed width, per the owner's "fixed-width horizontal bar": the bar
   * is always the full card width and the marker moves along it, rather
   * than a bar that grows. A growing bar makes the number next to it
   * move, and a moving number is hard to read. */
  width: 100%;
}

/* #15 — "the full line of the flight progress is impossible to see".
 *
 * Measured, not guessed. The unfilled track was `--asrm-panel-bg-raised`
 * (#2c2c2c) on the card's `--asrm-panel-bg` (#222222): **1.14 : 1**.
 * That is not a dim line, that is an invisible line — it is below the
 * 3:1 floor WCAG 2.1 SC 1.4.11 sets for a graphical object a user has
 * to perceive at all, and it is why the owner could not see the bar rather
 * than finding it faint.
 *
 * The fix is a token-derived mix, not a hex literal, so the card keeps its
 * rule that no colour here is a bare constant: 40 % of `--asrm-fg-muted`
 * into `--asrm-panel-bg` resolves to ~#717273 = **3.30 : 1 against the
 * card** (passes 1.4.11) while still sitting 2.39 : 1 below the accent
 * fill, so the travelled/untravelled boundary stays readable. Going
 * lighter buys the track and sells that boundary; 40 % is where both hold.
 *
 * The doubled `background` declaration is the fallback: an engine without
 * `color-mix()` keeps `--asrm-line` (1.40:1 — no worse than the old
 * value) rather than falling back to transparent and losing the track
 * entirely.
 *
 * `check-flightcard.mjs` recomputes both ratios from `tokens.css` itself
 * rather than trusting this comment, so rotating the palette cannot
 * silently un-fix the thing this fixed.
 */
.asrm-fc-prog-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--asrm-line);
  background: color-mix(in srgb, var(--asrm-fg-muted) 40%, var(--asrm-panel-bg));
  border: 1px solid color-mix(in srgb, var(--asrm-fg-muted) 40%, var(--asrm-panel-bg));
}

.asrm-fc-prog-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px 0 0 4px;
  background: var(--asrm-accent);
  transition: width 200ms linear;
}

/* The fallback marker: still a dot, used when the atlas is unavailable.
 * Kept on purpose — a failed sprite load must cost the silhouette and
 * nothing else, and a track with *no* marker at all reads as a broken card
 * rather than a card without plane art. */
.asrm-fc-prog-marker {
  position: absolute;
  top: 50%;
  translate: -50% -50%; /* centre on the point, not the corner */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--asrm-fg);
  border: 2px solid var(--asrm-accent);
  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
  transition: left 200ms linear;
}

/* #4 — the marker is the flight's own airframe, not a circle.
 *
 * The silhouette is one cell cropped out of the **served** act atlas
 * (`/img/act-sprite.png` + `act-sprite.json`) by `markerBackgroundStyle()`
 * in `flightcard.js`; the inline `background-*` values come from the
 * manifest rect, and the `rotate()` is the same heading the map drew the
 * plane with. See the helper's comment for why `static/assets/act/*.svg`
 * is not reachable in this stack.
 *
 * All of the box chrome (background, border, radius) is dropped here so
 * only the art is visible; `filter: drop-shadow` replaces the box-shadow
 * because the silhouette must stay readable over a bright basemap tile as
 * well as a dark one, and a shadow on a box that no longer exists would
 * paint a square.
 */
.asrm-fc-prog-marker--plane {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 85%));
}

.asrm-fc-prog-marker-icon {
  display: block;
  transform-origin: 50% 50%;
}

.asrm-fc-prog-times {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-size: var(--asrm-fs-caption);
}

.asrm-fc-prog-elapsed {
  color: var(--asrm-fg);
}

.asrm-fc-prog-pct {
  color: var(--asrm-accent);
  font-weight: 600;
}

.asrm-fc-prog-total {
  color: var(--asrm-fg-muted);
}

/* --- 4. origin / destination ------------------------------------ */

.asrm-fc-route {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid var(--asrm-line);
}

.asrm-fc-endpoint {
  min-width: 0; /* so the ellipsis on the name can actually work */
}

/* 1. THE CAPTION ABOVE THE COLUMN (M-08-T4 defect #6).
 *
 * The label used to trail the code on the same line (`CIA/LIRA Origin`);
 * the mock-up puts `Origin` / `Destination` small, on top. Kept at
 * `--asrm-fs-title` (11.5px) — the shell's accessibility floor is
 * 11px rendered, and `--asrm-fs-caption` is defined *at body size*
 * (12.8px), i.e. larger than the caption should be. Normal weight, no
 * transform: uppercase+letter-spacing is what made this the loudest
 * thing on the card while being its least important string.
 *
 * The full column order — caption, big code row, times, name — is built
 * by `endpointBlock()` in one array literal and pinned by
 * `check-flightcard.mjs`. */
.asrm-fc-end-label {
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-title);
  letter-spacing: 0.02em;
}

/* 2. THE BIG ROW: huge IATA + smaller ICAO suffix + the `6/3` pair.
 * Baseline-aligned so the three sizes ride one line as in the mock-up.
 *
 * `flex-wrap: wrap` is what keeps the widest possible endpoint — a
 * three-letter IATA, a four-letter ICAO and a `10/10` size pair, all at
 * 1.9rem — inside a ~182px half-column without pushing the popup into a
 * horizontal scrollbar. At that width the size pair drops to its own
 * line; every ordinary endpoint (`HEL` + `10/8`) stays on one line. The
 * alternative — leaving `nowrap` — reproduces on this card exactly the
 * fault the owner reported on the airport card: content wider than its
 * box, chrome scrolling sideways. */
.asrm-fc-end-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

/* ADR-0048 — the two codes are their own group so they can sit closer
 * together without moving the size pair.
 *
 * `.asrm-fc-end-row`'s `gap` is shared by every child on the line, so
 * tightening the code adjacency there would drag `6/3` toward the codes as
 * a side effect the owner did not ask for. Grouping the pair gives the
 * codes their own 3px and leaves the row's 6px between the group and the
 * size pair exactly where it was.
 *
 * 3px, not 0: with the `/` gone, spacing is the only thing separating two
 * adjacent uppercase codes, and at 0 `CIA LIRA` starts to read as one
 * garbled token. 3px is the tightest that still reads as two codes. */
.asrm-fc-end-codes {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.asrm-fc-end-code {
  /* The mock-up's "huge" code — hierarchy spent on *size*, not weight.
   * Promoting this to 600 would make it a third bold element and fail
   * the two-bold rule this file's header states and the checker enforces.
   * 1.9rem (30.4px) is what still fits `CTA LICC 7/2` inside the widened
   * popup's ~184px half-column (400px maxWidth, owner 2026-09-30); at the
   * old 320px popup the same row put the ICAO suffix under the size pair
   * and the name on one ellipsised word. */
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/* The ICAO stays (asked by M-08-T3 #7; the T4 card rules the mock-up's
 * single-code rendering is a space constraint, not a removal). It rides
 * the big code's line as a subordinate suffix: `CIA` + smaller `LIRA`,
 * muted so the mock-up's single-code hierarchy still holds. The leading
 * slash was dropped on 2026-09-30 (ADR-0048) — see `.asrm-fc-end-codes`
 * for how the two are kept apart now. */
.asrm-fc-end-icao {
  color: var(--asrm-fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.asrm-fc-end-name {
  /* 3. THE NAME, directly under the big code (owner, 2026-10-04 — "the
   * airport names should be just below the IATA codes"). It sat last, under
   * the times, from the M-08-T4 reorder until now; the reorder is reversed
   * because code and name describe the same place and should read as one
   * unit. `margin-top` stays small so the pair reads tight. */
  color: var(--asrm-fg-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The separator between `Rome Ciampino` and `Italy` is its own element
 * rather than a character glued into a string, so an endpoint with no
 * country never leaves a trailing dash behind: there is simply no
 * separator node when there is no second segment. */
.asrm-fc-end-sep {
  color: var(--asrm-fg-muted);
  opacity: 0.7;
}

.asrm-fc-end-country {
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* The size pair, on the big-code row: `6/3` — pax first in red, cargo
 * second in green, the `/10` denominators and the `Size` word dropped
 * per the M-08-T4 mock-up.
 *
 * **Why order alone is legal under SPEC §28.5 here:** red/green is the
 * single worst pair for colour-vision deficiency, and on these exact
 * tokens it is worse than intuition suggests — measured,
 * `--asrm-pax` (#e5484d) and `--asrm-cargo` (#46a758) have greyscale
 * luminances of **56 vs 76**, ~20 levels apart. In a greyscale
 * screenshot the two are nearly the same grey. So colour cannot be
 * carrying this, and it never could have. What carries it:
 *   1. **Position** — pax is always the first number, cargo always the
 *      second. Never varied, never reordered by data availability.
 *   2. **The tooltip** — restates the order in plain words, and says
 *      the numbers are the airport's size, not the aircraft's capacity.
 *   3. Colour, on top — the fast path for the majority of readers.
 *
 * The slash between them is a separate, *neutral* element: the mock-up
 * draws it white, and keeping it out of either colour means the slash
 * never doubles as a third signal. Both numbers keep
 * `tabular-nums` so they align and stay legible **without any colour
 * at all**, which is the part §28.5 actually demands.
 */
.asrm-fc-end-size {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  white-space: nowrap;
}

.asrm-fc-size {
  /* **Same size as the big IATA code** (owner, 2026-10-04). This pair was
   * 1.15rem, a subordinate annotation; the owner reads the airport's
   * pax/cargo level as a headline fact about the endpoint, on a par with
   * its name. Hierarchy inside the row therefore now comes from position
   * and colour, not from size — which is exactly the load-bearing scheme
   * SPEC §28.5 already requires here (see the block comment above:
   * `--asrm-pax` and `--asrm-cargo` are ~20 greyscale levels apart, so
   * colour was never carrying pax-vs-cargo on its own).
   *
   * Weight stays 500, matching `.asrm-fc-end-code`. Going to 600 would
   * make this a third bold element and break the two-bold rule this file's
   * header states and `check-flightcard.mjs` enforces. */
  font-weight: 500;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
}

.asrm-fc-size--pax {
  color: var(--asrm-pax);
}

.asrm-fc-size--cargo {
  color: var(--asrm-cargo);
}

/* The neutral slash — deliberately uncoloured, see the block comment. */
.asrm-fc-size-sep {
  color: var(--asrm-fg);
}

/* 3./4. THE TIMES (M-08-T4: big local + small basis word, small UTC).
 *
 * The local time is raised to the big-code size (1.9rem) per the mock-up
 * — it is the value a player reads against the schedule. The **basis
 * word stays in the card**: `hub local` and `local` are two genuinely
 * different clocks (C9/R6 — every displayed timestamp must declare its
 * basis), and the smaller size keeps it subordinate without deleting
 * the disclosure. Same for `+1`: `arrives_next_day` is load-bearing
 * because the source schedule page carries no next-day marker of its
 * own, so a 23:03 → 00:40 flight really does land tomorrow and this
 * `+1` is the only thing on the card saying so.
 *
 * Local and UTC stay on **separate rows** so neither can push the other
 * (the old complaint was them "not being on the same line" — wrapping
 * inside a half-column): big local first, small UTC under it. Every
 * time is `white-space: nowrap` so the pair inside a row can never
 * break mid-value.
 */
.asrm-fc-end-times {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.asrm-fc-time {
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  line-height: 1.15;
  white-space: nowrap;
}

.asrm-fc-time-basis {
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-body);
  letter-spacing: 0.02em;
}

.asrm-fc-time-next {
  color: var(--asrm-accent);
  font-size: var(--asrm-fs-body);
  letter-spacing: 0.02em;
}

.asrm-fc-time--utc {
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-body);
}

/* #12 + M-08-T4 — flight number and frequency on one line, straight
 * under the progress track, in a clearly larger face:
 * `YY 333 - Days: 1234567`.
 *
 * 1.25rem (20px) against 12.8px body — the mock-up's flight line is
 * ~1.4× its own body text, and this keeps that ratio while staying
 * clearly under the 1.9rem big-code/time so the card keeps one
 * hierarchy: codes and times are the loudest, the flight identity is
 * second, everything else is prose.
 *
 * `Days:` keeps the mask exactly as stored (index 0 = Monday, each
 * position its own digit or `_`). `tabular-nums` plus a slight letter
 * space is what makes the gaps in `123__6_` actually readable as gaps —
 * proportional spacing collapses `_` and makes the mask lie about which
 * days operate. */
.asrm-fc-flightline {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--asrm-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ADR-0048 — `Days` is a label, not part of the figure, so it takes the
 * same treatment as the facts grid's `Distance` label rather than the
 * flight-line face: same token, same muted colour. Matching on the token
 * rather than on a copied size is what keeps "similar to the Distance
 * label" true after the next type scale change.
 *
 * The mask keeps the flightline's own 1.25rem + tabular-nums + letter
 * spacing, because that spacing is what makes `123__6_` readable as gaps;
 * shrinking the mask with the label would have broken the thing the line
 * exists to show. */
.asrm-fc-days-k {
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-title);
  white-space: nowrap;
}

/* --- 5. facts ---------------------------------------------------- */

.asrm-fc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--asrm-line);
}

.asrm-fc-fact-k {
  color: var(--asrm-fg-muted);
  font-size: var(--asrm-fs-title);
  white-space: nowrap;
}

.asrm-fc-fact-v {
  margin: 0;
  /* Remarks can be a sentence. Wrapped rather than ellipsised, because
   * unlike a name a truncated remark loses the thing it said. */
  overflow-wrap: break-word;
  white-space: normal;
}

/* --- failed lookup ---------------------------------------------- */

.asrm-fc--failed {
  /* The failure box says one sentence and stays compact even though
   * `.asrm-fc`'s floor grew for the code row it does not have. min-width
   * beats max-width when both apply, so the floor is lifted here. */
  min-width: 0;
  max-width: 280px;
}

.asrm-fc-fail-title {
  color: var(--asrm-warn);
}

.asrm-fc-fail-body {
  margin: 4px 0 0;
  color: var(--asrm-fg-muted);
}

/* #13 — the drag handle.
 *
 * `touch-action: none` is **functional, not cosmetic**: without it a
 * touch or pen drag is claimed by the browser's own pan/scroll gesture,
 * the `pointermove` events never reach the handler, and the card drags
 * fine with a mouse while being completely stuck on a phone. The cursor
 * values give the grab affordance; the JS sets `grabbing` during the drag
 * and this `:active` rule covers the gap between pointerdown and the
 * first move.
 *
 * `user-select: none` stops a drag from selecting the airline name, which
 * would otherwise paint the title blue every time anyone moves the card.
 */
.asrm-fc-title,
.asrm-fc-fail-title {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.asrm-fc-title:active,
.asrm-fc-fail-title:active {
  cursor: grabbing;
}

/* --- via journeys (owner, 2026-10-05) -------------------------------
 *
 * A via flight's route block is the ordered legs the aircraft actually
 * flies, not the summary pair: `HEL - ZRH` hid the TFU it stopped at.
 * Every IATA printed here — and every `via <IATA>` inside Remarks —
 * carries its airport's name as a title, resolved server-side inside the
 * world the card belongs to, so a code is never a dead end.
 *
 * Weight stays at 500 like the endpoint codes: the >=600 budget in this
 * file is spent on exactly two elements and check-flightcard.mjs counts.
 */
.asrm-fc-viaroute {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asrm-fc-viaseg {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.asrm-fc-via-code {
  font-weight: 500;
  color: var(--asrm-fg);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.asrm-fc-via-time {
  color: var(--asrm-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asrm-fc-via-arrow {
  color: var(--asrm-fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  /* The bar tracks a moving aircraft, so it animates continuously.
   * For a viewer who has asked for no motion, the transitions are the
   * thing they asked us to stop doing.
   *
   * `.asrm-fc-prog-marker-icon` joins the block with the plane silhouette
   * (#4) — but only its *transitions*. The `rotate()` on it is not
   * motion, it is the aircraft's heading: freezing that would leave every
   * plane pointing north, which is information destroyed rather than
   * motion removed. Hence `transition: none` / `animation: none` and no
   * `transform: none` anywhere near it. */
  .asrm-fc-prog-fill,
  .asrm-fc-prog-marker,
  .asrm-fc-prog-marker-icon {
    transition: none;
    animation: none;
  }
}