/* FLEET-RECORDS-2026 — ship and train cards (.card--ship / .card--train) and the Ship and
   Train Folio modals (.fr-modal). Reads the live era × theme tokens; hotel cards and the
   hotel Folio are untouched. Spec: docs/design/FLEET_RECORDS.md. */

.card--fleet {
  --fr-ink: var(--text);
  --fr-muted: var(--text-muted);
  --fr-line: var(--border);
  --fr-accent: var(--gold);
  --fr-water: #2f6f8f;
  --fr-water-soft: color-mix(in srgb, #2f6f8f 12%, transparent);
}
.card--train { --fr-accent: #8a5a2b; }
:root[data-theme="dark"] .card--fleet { --fr-water: #7fc3e0; --fr-water-soft: color-mix(in srgb, #7fc3e0 14%, transparent); }
:root[data-theme="dark"] .card--train { --fr-accent: #e2b07a; }

/* ---------- card art ---------- */
.fr-card-art { position: relative; }
.fr-ribbon {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 7px; border-radius: 3px;
  font: 700 10px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(12, 22, 30, .72); backdrop-filter: blur(4px);
}
.fr-ribbon svg { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.card--ship .fr-ribbon { background: color-mix(in srgb, #12384c 82%, transparent); }
.fr-status {
  position: absolute; right: 10px; top: 10px; z-index: 2; padding: 4px 8px; border-radius: 3px;
  font: 700 10px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: #3b2a00; background: #f0d68a;
}
.fr-livery {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: 2;
  background: linear-gradient(var(--fr-livery) 0 4px, var(--fr-trim) 4px 6px, var(--fr-livery) 6px);
}

/* ---------- card body ---------- */
.fr-card-body { gap: 10px; }
.fr-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font: 400 .85rem/1.35 var(--font-body); color: var(--fr-muted); }
.fr-where svg { width: 16px; height: 8px; flex: 0 0 auto; fill: none; stroke: var(--fr-water); stroke-width: 1.5; }
.card--train .fr-where svg { stroke: var(--fr-accent); }
.fr-more { font-size: .75rem; color: var(--fr-accent); white-space: nowrap; }

.fr-tier {
  display: inline-flex; align-self: flex-start; align-items: baseline; gap: 7px; padding: 4px 9px;
  border: 1px solid currentColor; border-radius: 3px; font: 600 .72rem/1.3 var(--font-body); color: var(--fr-tier, var(--gold-deep));
}
.fr-tier b { letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.fr-tier span { color: var(--fr-muted); }
.fr-tier i { font-style: normal; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; background: color-mix(in srgb, currentColor 12%, transparent); }
.fr-tier--t6 { --fr-tier: #5a2d8a; } .fr-tier--t5 { --fr-tier: #2a3f9e; } .fr-tier--t4 { --fr-tier: #12897a; }
.fr-tier--t3 { --fr-tier: #9b7f45; } .fr-tier--t2 { --fr-tier: #8a6a2c; } .fr-tier--t1 { --fr-tier: #6a4f17; }
:root[data-theme="dark"] .fr-tier--t6 { --fr-tier: #b394e6; } :root[data-theme="dark"] .fr-tier--t5 { --fr-tier: #8ea3f2; }
:root[data-theme="dark"] .fr-tier--t4 { --fr-tier: #4fd0bb; } :root[data-theme="dark"] .fr-tier--t3 { --fr-tier: #e2ad48; }
:root[data-theme="dark"] .fr-tier--t2 { --fr-tier: #c9b78e; } :root[data-theme="dark"] .fr-tier--t1 { --fr-tier: #b3ad9f; }

.fr-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-block: 1px solid var(--fr-line); }
.fr-facts > div { padding: 8px 4px 7px; text-align: center; }
.fr-facts > div + div { border-left: 1px solid var(--fr-line); }
.fr-facts dt { font: 600 .62rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-muted); }
.fr-facts dd { margin: 3px 0 0; font: 600 1.25rem/1.1 var(--font-serif); color: var(--fr-ink); }

.fr-fare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fr-fare-k { flex: 1 0 100%; font: 700 .62rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--fr-accent); }
.fr-fare-v { font: 600 1.5rem/1.1 var(--font-serif); color: var(--fr-ink); }
.fr-fare-u { font-size: .78rem; color: var(--fr-muted); }
.fr-fare-none { font-size: .85rem; color: var(--fr-muted); font-style: italic; }

.fr-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--fr-line); font-size: .74rem; color: var(--fr-muted); }

/* season strip */
.fr-season { display: inline-flex; align-items: center; gap: 2px; }
.fr-season i { display: inline-grid; place-items: center; width: 15px; height: 15px; font: 600 8px/1 var(--font-body); font-style: normal; color: var(--fr-muted); border-radius: 2px; background: color-mix(in srgb, var(--fr-muted) 10%, transparent); }
.fr-season i.on { color: #fff; background: var(--fr-accent, var(--gold)); }
.card--ship .fr-season i.on, .fr-modal--ship .fr-season i.on { background: var(--fr-water); }
.fr-season em { margin-left: 6px; font-style: normal; font-size: .72rem; }
.fr-season:not(.fr-season--compact) i { width: 26px; height: 26px; font-size: 11px; }

/* ship side profile */
.fr-profile { margin: 0; }
.fr-profile svg { display: block; width: 100%; height: auto; }
.fr-profile figcaption { margin-top: 4px; font: 500 .7rem/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fr-muted); }
.fr-profile--compact { margin: -2px 0 -4px; }
.fr-hull { fill: var(--fr-ink, var(--text)); }
.fr-deck { fill: color-mix(in srgb, var(--fr-ink, var(--text)) 80%, var(--surface)); }
.fr-win { fill: color-mix(in srgb, #ffe7a8 70%, var(--surface)); }
.fr-mast { stroke: var(--fr-ink, var(--text)); stroke-width: 2; }
.fr-sail { fill: color-mix(in srgb, var(--surface) 70%, #d9c79c); stroke: var(--fr-ink, var(--text)); stroke-width: 1; }
.fr-water { fill: none; stroke: var(--fr-water); stroke-width: 2; }
.fr-rule { stroke: var(--fr-muted, var(--text-muted)); stroke-width: 1; }
.fr-rule-t, .fr-span-t { font: 600 10px var(--font-body); fill: var(--fr-muted, var(--text-muted)); }
.fr-span { stroke: var(--fr-water); stroke-width: 1.5; }
.fr-span-t { fill: var(--fr-water); }

/* train route */
.fr-glyph { position: relative; padding: 4px 0 0; }
.fr-routemap { display: block; width: 100%; height: auto; }
.fr-routemap--compact { height: 64px; }
.fr-linediagram { display: block; width: 100%; height: 22px; overflow: visible; }
.fr-ld-body { stroke: var(--fr-livery); stroke-width: 6; stroke-linecap: round; }
.fr-ld-trim { stroke: var(--fr-trim); stroke-width: 1.5; }
.fr-linediagram .fr-stop { fill: var(--surface); stroke: var(--fr-livery); stroke-width: 2; }
.fr-linediagram .fr-stop.is-end { fill: var(--fr-trim); }
.fr-glyph-ends { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .72rem; color: var(--fr-muted); }
.fr-glyph-ends b { font-weight: 600; color: var(--fr-ink); }
.fr-glyph-ends i { font-style: normal; }
.fr-route { fill: none; stroke: color-mix(in srgb, var(--fr-livery) 25%, transparent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fr-route.is-active { stroke: var(--fr-livery); stroke-width: 3.5; }
:root[data-theme="dark"] .fr-route.is-active { stroke: var(--fr-trim); }
.fr-stop { fill: var(--surface); stroke: color-mix(in srgb, var(--fr-livery) 35%, transparent); stroke-width: 1.5; }
.fr-stop.is-on { stroke: var(--fr-livery); stroke-width: 2; }
.fr-stop.is-end { fill: var(--fr-livery); }
:root[data-theme="dark"] .fr-stop.is-on { stroke: var(--fr-trim); }
:root[data-theme="dark"] .fr-stop.is-end { fill: var(--fr-trim); }
.fr-stop-t { font: 500 12px var(--font-body); fill: var(--text); paint-order: stroke; stroke: var(--bg-elevated, var(--surface)); stroke-width: 3px; }
.fr-stop-t.is-end { font-weight: 700; }
.fr-land { fill: color-mix(in srgb, var(--text) 7%, transparent); stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: .6; }
.fr-locator-wrap { margin-top: 14px; }
.fr-loc-halo { fill: color-mix(in srgb, var(--fr-water) 18%, transparent); }
.fr-loc-pin { fill: var(--fr-water); stroke: var(--bg-elevated, #fff); stroke-width: 2; }
.fr-scale line { stroke: var(--text-muted); stroke-width: 1; }
.fr-scale text { font: 500 10px var(--font-body); fill: var(--text-muted); }

/* ================= modal ================= */
.modal.fleet-folio { width: min(1240px, 100%); max-width: 1240px; max-height: 94dvh; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overscroll-behavior: contain; scroll-padding-top: 72px; }
.modal.fleet-folio .modal-close { position: sticky; top: 8px; float: right; margin: 8px 10px -44px 0; z-index: 40; width: 36px; height: 36px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
.modal.fleet-folio .modal-content > :not(.fr-modal),
.modal.fleet-folio .modal-body > :not(.modal-content) { display: none !important; }
.modal.fleet-folio .modal-body, .modal.fleet-folio .modal-content { padding: 0; }
.fr-modal { --fr-ink: var(--text); --fr-muted: var(--text-muted); --fr-line: var(--border); --fr-water: #2f6f8f; --fr-accent: var(--gold-deep, var(--gold)); color: var(--text); }
.fr-modal--train { --fr-accent: #8a5a2b; }
:root[data-theme="dark"] .fr-modal { --fr-water: #7fc3e0; }
:root[data-theme="dark"] .fr-modal--train { --fr-accent: #e2b07a; }
.fr-eyebrow { font: 600 10px/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fr-muted); }

.fr-mast { position: sticky; top: 0; z-index: 30; height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 0 58px 0 24px; background: var(--bg-elevated); border-bottom: 1px solid var(--fr-line); }
.fr-wordmark { font: 600 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--fr-accent); white-space: nowrap; }
.fr-modal--ship .fr-wordmark { color: var(--fr-water); }
.fr-wordmark i { font-style: normal; margin: 0 7px; color: var(--gold); }
.fr-running { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .95rem var(--font-serif); color: var(--fr-muted); }
.fr-mast-actions { display: flex; align-items: center; gap: 10px; }
.fr-rate-pill { padding: 5px 10px; border: 1px solid var(--fr-line); border-radius: 999px; font: 600 .8rem var(--font-body); white-space: nowrap; }
.fr-rate-pill small { font-weight: 400; color: var(--fr-muted); }

.fr-cover { display: grid; grid-template-columns: 42fr 58fr; border-bottom: 1px solid var(--fr-line); }
.fr-identity { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fr-title { margin: 0; font: 600 clamp(1.9rem, 3.2vw, 2.7rem)/1.08 var(--font-serif); color: var(--text); }
.fr-where-l { margin: 0; font-size: .9rem; color: var(--fr-muted); }
.fr-status-l { margin: 0; align-self: flex-start; padding: 3px 8px; border-radius: 3px; font: 700 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #3b2a00; background: #f0d68a; }
.fr-plate { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--fr-tier, var(--gold)) 40%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--fr-tier, var(--gold)) 7%, transparent); }
.fr-plate b { font: 600 1.6rem/1 var(--font-serif); color: var(--fr-tier, var(--gold)); min-width: 36px; text-align: center; }
.fr-plate span { font: 600 .74rem/1.35 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.fr-plate i { font-style: normal; font: 700 .62rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px dashed currentColor; color: var(--fr-tier, var(--gold)); }
.fr-plate--t6 { --fr-tier: #5a2d8a; } .fr-plate--t5 { --fr-tier: #2a3f9e; } .fr-plate--t4 { --fr-tier: #12897a; }
.fr-plate--t3 { --fr-tier: #9b7f45; } .fr-plate--t2 { --fr-tier: #8a6a2c; } .fr-plate--t1 { --fr-tier: #6a4f17; }
:root[data-theme="dark"] .fr-plate--t6 { --fr-tier: #b394e6; } :root[data-theme="dark"] .fr-plate--t5 { --fr-tier: #8ea3f2; }
:root[data-theme="dark"] .fr-plate--t4 { --fr-tier: #4fd0bb; } :root[data-theme="dark"] .fr-plate--t3 { --fr-tier: #e2ad48; }
:root[data-theme="dark"] .fr-plate--t2 { --fr-tier: #c9b78e; } :root[data-theme="dark"] .fr-plate--t1 { --fr-tier: #b3ad9f; }

.fr-figures { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--fr-line); }
.fr-figures > div { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--fr-line); }
.fr-figures dt { font: 600 .6rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fr-muted); }
.fr-figures dd { margin: 3px 0 0; font: 600 1.3rem/1.1 var(--font-serif); }
.fr-figures small { display: block; margin-top: 2px; font-size: .68rem; color: var(--fr-muted); }
.fr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fr-book { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 4px; background: var(--fr-accent); color: #fff; font: 700 .72rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.fr-modal--ship .fr-book { background: var(--fr-water); }
:root[data-theme="dark"] .fr-book { color: #10161b; }
.fr-fare-basis { flex: 1 1 220px; font-size: .78rem; color: var(--fr-muted); }

.fr-photos { min-width: 0; background: #0b0f12; }
.fr-gallery { display: flex; flex-direction: column; height: 100%; }
.fr-g-main { position: relative; margin: 0; flex: 1 1 auto; min-height: 320px; }
.fr-g-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-g-main figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 22px 14px 10px; font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.fr-g-main figcaption span:nth-child(2) { opacity: .75; }
.fr-g-main figcaption span { min-width: 0; overflow-wrap: anywhere; }
.fr-g-main figcaption .fr-g-count { flex-shrink: 0; white-space: nowrap; }
.fr-g-count { margin-left: auto; }
.fr-g-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.42); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.fr-g-nav.prev { left: 10px; } .fr-g-nav.next { right: 10px; }
.fr-g-strip { display: flex; gap: 4px; padding: 4px; overflow-x: auto; background: #0b0f12; scrollbar-width: thin; }
.fr-g-strip button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 2px; background: none; cursor: pointer; opacity: .65; }
.fr-g-strip button[aria-current] { border-color: #fff; opacity: 1; }
.fr-g-strip img { display: block; width: 72px; height: 48px; object-fit: cover; }
.fr-photo-none { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px; background: var(--surface); color: var(--fr-muted); font-size: .8rem; }

.fr-body { padding: 8px 28px 40px; max-width: 920px; }
.fr-chapter { padding: 26px 0 8px; border-bottom: 1px solid var(--fr-line); }
.fr-chapter:last-child { border-bottom: 0; }
.fr-chapter > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.fr-num { font: 600 .7rem var(--font-body); letter-spacing: .14em; color: var(--fr-accent); }
.fr-modal--ship .fr-num { color: var(--fr-water); }
.fr-chapter h3 { margin: 0; font: 600 1.55rem/1.15 var(--font-serif); }
.fr-chapter > header p { margin: 0; flex-basis: 100%; padding-left: 30px; font-size: .8rem; color: var(--fr-muted); }
.fr-lede { margin: 0 0 12px; font: 400 1.12rem/1.6 var(--font-serif); }
.fr-muted { color: var(--fr-muted); font-size: .85rem; }
.fr-note { margin: 8px 0 0; font-size: .74rem; color: var(--fr-muted); }
.fr-facts-list { margin: 0; padding-left: 18px; font-size: .9rem; line-height: 1.55; color: var(--fr-muted); }

.fr-waters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.fr-waters p { margin: 4px 0 0; font-size: .92rem; }
.fr-route-wrap { display: flex; flex-direction: column; gap: 12px; }
.fr-route-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-route-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--fr-line); border-radius: 4px; background: transparent; color: var(--text); font: 600 .82rem var(--font-body); cursor: pointer; text-align: left; }
.fr-route-tabs button small { font-weight: 400; font-size: .7rem; color: var(--fr-muted); }
.fr-route-tabs button[aria-selected="true"] { border-color: var(--fr-accent); box-shadow: inset 0 -2px 0 var(--fr-accent); }
.fr-route-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.fr-route-map { border: 1px solid var(--fr-line); border-radius: 6px; background: color-mix(in srgb, #2f6f8f 5%, var(--bg-elevated)); overflow: hidden; }
.fr-stations { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--fr-accent); }
.fr-stations li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: .88rem; border-bottom: 1px dotted var(--fr-line); }
.fr-stations li::before { content: ""; position: absolute; left: -21px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--fr-accent); }
.fr-stations li.is-end::before { background: var(--fr-accent); }
.fr-stations li.is-end .fr-st-name { font-weight: 700; }
.fr-st-km { font-size: .75rem; color: var(--fr-muted); white-space: nowrap; }

.fr-cabins, .fr-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; }
.fr-cabins li { padding: 8px 12px; border: 1px solid var(--fr-line); border-radius: 4px; font: 600 .95rem var(--font-serif); }
.fr-chips li { padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: .78rem; }
.fr-venues { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fr-venues li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--gold); }
.fr-venues b { font: 600 1.05rem var(--font-serif); }
.fr-venues span { font-size: .8rem; color: var(--fr-muted); }
.fr-exp { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.fr-exp li { padding: 12px; border: 1px solid var(--fr-line); border-radius: 6px; }
.fr-exp b { font: 600 1rem var(--font-serif); }
.fr-exp p { margin: 4px 0 0; font-size: .82rem; line-height: 1.5; color: var(--fr-muted); }
.fr-exp i { display: inline-block; margin-top: 6px; font-style: normal; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fr-accent); }

.fr-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 0 14px; }
.fr-spec > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--fr-line); font-size: .88rem; }
.fr-spec dt { color: var(--fr-muted); }
.fr-spec dd { margin: 0; text-align: right; font-weight: 600; }
.fr-swatches { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.fr-swatches i { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--fr-line); }
.fr-provisional { padding: 12px 14px; border-left: 3px dashed var(--fr-accent); background: color-mix(in srgb, var(--fr-accent) 7%, transparent); font-size: .84rem; line-height: 1.5; }
.fr-sources { margin-top: 12px; font-size: .8rem; color: var(--fr-muted); }
.fr-sources summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.fr-sources a { color: inherit; }

/* Map Mode panel */
.fr-map-panel { display: flex; flex-direction: column; gap: 10px; --fr-ink: var(--text); --fr-muted: var(--text-muted); --fr-line: var(--border); --fr-water: #2f6f8f; --fr-accent: var(--gold-deep, var(--gold)); }
.fr-map-panel--train { --fr-accent: #8a5a2b; }
.fr-map-panel p { margin: 0; }
.fr-map-where { font-size: .85rem; }
.fr-map-fare, .fr-map-pin { font-size: .8rem; color: var(--fr-muted); }

/* ---------- phones (MOBILE-ALLPHONES-2026 band) ---------- */
@media (max-width: 860px) {
  .fr-cover { grid-template-columns: 1fr; }
  .fr-photos { order: -1; }
  .fr-g-main { min-height: 0; aspect-ratio: 4 / 3; flex: 0 0 auto; }
  .fr-route-body { grid-template-columns: 1fr; }
}
@media (max-width: 699.98px) {
  .fr-mast { padding: 0 52px 0 14px; gap: 10px; }
  .fr-rate-pill { display: none; }
  .fr-identity { padding: 18px 16px; }
  .fr-figures { grid-template-columns: repeat(2, 1fr); }
  .fr-body { padding: 4px 16px 32px; }
  .fr-waters, .fr-spec { grid-template-columns: 1fr; }
  .fr-chapter > header p { padding-left: 0; }
  .fr-season:not(.fr-season--compact) i { width: 20px; height: 22px; font-size: 9px; }
  .fr-g-nav { width: 44px; height: 44px; }
  .fr-route-tabs button { flex: 1 1 140px; }
}
@media (max-width: 360px) {
  .fr-facts dd { font-size: 1.1rem; }
  .fr-season--compact i { width: 12px; }
}

/* Keep the close control above the sticky masthead; the shared phone rule uses
   an id selector and otherwise lowers this control to the masthead's z-index. */
#modalBackdrop .modal.fleet-folio .modal-close { z-index:60; }
@media (max-width:699.98px), (max-width:1000px) and (max-height:500px) {
  #modalBackdrop .modal.fleet-folio .modal-close {
    width:44px; height:44px; min-width:44px; min-height:44px;
    margin:8px 8px -52px 0;
  }
}