/* The rescue-costs companion (docs/in-depth-rescue-costs-page-standard.md, Rounds 5 and 7): the film under the dateline
   (Round 7, at the end of this file, scoped under .rcf) and the zone map with its chips, panel, key and the east coast
   trip as an example; scoped under .rcg. House look tokens
   (docs/graphics-library/house-look/README.md); light only. The interactive map is the default when script runs; the
   static zone map shows with reduced motion, without script (the article's noscript style repeats these rules) and when
   the runtime could not start (.still). */
.rcg, .rczones, .rcf {
  --rc-paper: #fbfbfa; --rc-ink: #121518; --rc-ink2: #353a41; --rc-quiet: #646b74;
  --rc-rule: #c3c8ce; --rc-tint: #e6e8eb; --rc-accent: #e8600a; --rc-accent-ink: #b84a00;
  --rc-data: var(--f-data, "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif);
  --rc-serif: var(--f-serif, Georgia, serif);
}

/* ---------------------------------------------------------------- the figure: title, chips, map, key, panel */
.rczones { margin-top: 30px; }
.rcg-zh { font: 600 20px/25px var(--rc-serif); margin: 0 0 12px; color: var(--rc-ink); }
.rcg-whorow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.rcg-who { font: 600 14px/18px var(--rc-data); color: var(--rc-ink); margin: 0; }
.rcg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rcg-chip { font: 14px/18px var(--rc-data); color: var(--rc-ink); background: var(--rc-paper); border: 1px solid rgba(18, 21, 24, .26);
  border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.rcg-chip:hover { border-color: var(--rc-ink); }
.rcg-chip[aria-pressed="true"] { background: var(--rc-ink); color: var(--rc-paper); border-color: var(--rc-ink); }

.rcg-zgrid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "ex" "panel" "key"; gap: 0; }
@media (min-width: 760px) {
  .rcg-zgrid { grid-template-columns: minmax(0, 11fr) minmax(300px, 8fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "head panel" "map panel" "ex panel" "key panel"; column-gap: 32px; align-items: start; }
}
.rcg-zhead { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; }
.rcg-zmap { grid-area: map; }
.rcg-ex { grid-area: ex; }
.rcg-key { grid-area: key; }
.rcg-zgrid > .rcg-panel { grid-area: panel; }
.rcg-tap { font: 14px/19px var(--rc-data); color: var(--rc-quiet); margin: 0; }
.rcg-exbtn { font: 600 14px/18px var(--rc-data); color: var(--rc-accent-ink); background: var(--rc-paper); border: 1px solid var(--rc-accent);
  border-radius: 999px; padding: 6px 14px; min-height: 44px; cursor: pointer; }
.rcg-exbtn:hover, .rcg-exbtn[aria-pressed="true"] { background: #fdf0e6; }
.rcg-zmap svg { display: block; width: 100%; height: auto; touch-action: manipulation; }

.rcg-area { cursor: pointer; transition: filter .18s ease; outline: none; }
.rcg-area:hover { filter: brightness(.96); }
.rcg-area.sel { filter: saturate(1.9) brightness(.9); }
.rcg-area:focus-visible { stroke: var(--rc-ink); stroke-width: 6; }
.rcg-zl { font-family: var(--rc-data); fill: var(--rc-ink2); stroke: var(--rc-paper); paint-order: stroke; stroke-linejoin: round; cursor: pointer; }
.rcg-zl.sel { fill: var(--rc-ink); font-weight: 600; }

/* the example: the trip's line in the accent with a white casing, four points with haloed labels */
.rcg-pt { outline: none; }
.rcg-pt.tap { cursor: pointer; }
.rcg-ptl { font-family: var(--rc-data); font-weight: 600; fill: var(--rc-ink); stroke: var(--rc-paper); paint-order: stroke; stroke-linejoin: round; }
.rcg-pt.tap .rcg-ptl { text-decoration: underline; text-decoration-thickness: 1px; }
.rcg-pt:focus-visible .rcg-ptdot { stroke: var(--rc-accent); }
.rcg-ex { margin: 14px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--rc-accent); }
.rcg-ex p { font: 15px/21px var(--rc-data); color: var(--rc-ink); margin: 0 0 8px; }
.rcg-ex .rcg-exline { font-weight: 600; }
.rcg-ex .rcg-exafter { font-size: 13px; line-height: 18px; color: var(--rc-quiet); margin: 0; }

/* the key under the map: four swatches in the map's fills, then the line on what a cap is */
.rcg-key { margin: 14px 0 0; font-family: var(--rc-data); }
.rcg-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rcg-key li { display: flex; align-items: center; gap: 7px; font: 14px/19px var(--rc-data); color: var(--rc-ink); }
.rcg-sw { flex: none; display: inline-block; width: 16px; height: 16px; border: 1px solid rgba(18, 21, 24, .22); }
.rcg-key p { font: 13px/18px var(--rc-data); color: var(--rc-quiet); margin: 8px 0 0; }

/* the panel: place, the rows, the extra line, the line under it */
.rcg-panel { margin: 18px 0 0; padding: 12px 0 0; border-top: 2px solid var(--rc-ink); }
@media (min-width: 760px) { .rcg-zgrid > .rcg-panel { margin-top: 0; } }
.rcg-place { font: 600 18px/23px var(--rc-serif); margin: 0 0 6px; color: var(--rc-ink); }
.rcg-rows { margin: 0; }
.rcg-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--rc-tint); }
.rcg-row dt { font: 600 13px/19px var(--rc-data); color: var(--rc-ink2); }
.rcg-row dd { margin: 0; font: 14px/19px var(--rc-data); color: var(--rc-ink); }
.rcg-row[data-row="cap"] dd { font-weight: 600; }
.rcg-extra { font: 14px/19px var(--rc-data); color: var(--rc-ink2); margin: 0; padding: 8px 0 0; border-top: 1px solid var(--rc-tint); }
.rcg-always { font: 12px/16px var(--rc-data); color: var(--rc-quiet); margin: 10px 0 0; }
.rcg-panel.swap .rcg-pb, .rcg-panel.swap .rcg-place { animation: rcg-in .2s ease-out; }
@keyframes rcg-in { from { opacity: 0; translate: 0 4px; } }

.rcg-credit { font: 12px/16px var(--rc-data); color: var(--rc-quiet); margin: 14px 0 0; }

/* the phone: chips two by two with touch targets of 44 px */
@media (max-width: 759px) {
  .rcg-chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .rcg-chip { min-height: 44px; border-radius: 8px; padding: 5px 10px; text-align: left; line-height: 16px; }
  .rcg-row { grid-template-columns: 84px minmax(0, 1fr); }
}

/* "How this was made", a closed drop-down directly under the zone map */
.rcg-how { margin: 14px 0 0; font-family: var(--rc-data); }
.rcg-how summary { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rc-quiet); cursor: pointer; padding: 6px 0; }
.rcg-how p { font-size: 14px; line-height: 1.45; color: var(--rc-ink2); margin: 4px 0 0; }

/* the reserved height until the runtime has drawn (the figure's measured height at its widths) */
.idg-zones:not([data-ready]):not(.still) { min-height: 1240px; }
@media (min-width: 760px) { .idg-zones:not([data-ready]):not(.still) { min-height: 860px; } }

/* the static zone map (no script, reduced motion, a runtime that could not start) */
.rcz-fallback { display: none; }
.rcz-fallback .rcg-zimg { display: block; width: 100%; max-width: 620px; height: auto; }
.idg-zones.still { display: none; }
.idg-zones.still ~ .rcz-fallback { display: block; }
@media (prefers-reduced-motion: reduce) {
  .idg-zones { display: none; }
  .rcz-fallback { display: block; }
  .rcg *, .rczones * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- the film (Round 7) */
/* One video in a figure no wider than the page's format (V1: .idfig, at most 1040 px), 16:10; the page's own player
   under the picture (V2): play and pause, the time, the bar in six parts in the four fills and paper, the full screen
   button; "The film in words" a closed drop-down (V3); under 760 px the text of the part on show stands under the bar.
   All of it is server markup, so nothing moves when the runtime starts. */
.rcf { font-family: var(--rc-data); color: var(--rc-ink); }
.rcf-player { background: #fbfaf6; }
.rcf-stage { position: relative; aspect-ratio: 16 / 10; background: #e9eef1; }
.rcf-v { display: block; width: 100%; height: 100%; object-fit: contain; background: #e9eef1; cursor: pointer; }
.rcf-ctl { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; }
.rcf-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--rc-ink); background: #fff;
  border: 1px solid var(--rc-rule); cursor: pointer; }
.rcf-btn:hover { border-color: var(--rc-ink2); }
.rcf-btn svg { width: 18px; height: 18px; fill: currentColor; }
.rcf-btn .rcf-i-pause, .rcf-btn[data-on="pause"] .rcf-i-play, .rcf-full .rcf-i-out, .rcf-full[data-on="out"] .rcf-i-in { display: none; }
.rcf-btn[data-on="pause"] .rcf-i-pause, .rcf-full[data-on="out"] .rcf-i-out { display: block; }
/* R6: at the end the play button reads "Play again" beside its icon; nothing covers the last frame */
.rcf-again { display: none; }
.rcf-play[data-on="again"] { width: auto; grid-auto-flow: column; gap: 6px; padding: 0 12px; }
.rcf-play[data-on="again"] .rcf-again { display: inline; font: 600 14px/18px var(--rc-data); white-space: nowrap; }
.rcf-time { flex: none; min-width: 84px; font: 14px/18px var(--rc-data); font-variant-numeric: tabular-nums; color: var(--rc-ink2); text-align: center; }
.rcf-bar { position: relative; flex: 1 1 auto; min-width: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.rcf-segs { display: flex; gap: 2px; }
.rcf-seg { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 2px 4px; display: grid; place-items: center; font: 600 12px/14px var(--rc-data);
  color: var(--rc-ink); text-align: center; overflow-wrap: anywhere; background: #fbfaf6; border: 1px solid rgba(0, 0, 0, .14); cursor: pointer; }
.rcf-seg.on { outline: 2px solid var(--rc-ink); outline-offset: -2px; }
.rcf-track { position: relative; height: 10px; margin-top: 4px; background: var(--rc-tint); cursor: pointer; }
.rcf-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rc-ink2); pointer-events: none; }
.rcf-head { position: absolute; top: -46px; bottom: -2px; left: 0; width: 2px; margin-left: -1px; background: var(--rc-ink); pointer-events: none; }
.rcf-track:focus-visible, .rcf-btn:focus-visible, .rcf-seg:focus-visible { outline: 2px solid var(--rc-accent-ink); outline-offset: 2px; }
.rcf-under { display: none; }
.rcf-ul { list-style: none; margin: 0; padding: 0; }
.rcf-wt { display: none; }
.rcf-pn { display: block; font: 700 13px/18px var(--rc-data); color: var(--rc-ink2); margin: 0 0 2px; }
.rcf-pt { font: 16px/24px var(--rc-serif); color: var(--rc-ink); margin: 0; }
.rcf-words { margin: 12px 0 0; }
.rcf-words summary { font: 600 12px/18px var(--rc-data); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-quiet); cursor: pointer; padding: 6px 0; }
.rcf-words li + li, .rcf-box .rcf-under li + li { margin-top: 10px; }
.rcf-credit { margin: 10px 0 0; font: 12px/16px var(--rc-data); color: var(--rc-quiet); }
.rcf-player:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 0 16px 12px; background: #fbfaf6; }
.rcf-player:fullscreen .rcf-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
/* under 760 px: the bar on a row of its own, the buttons and the time under it; the text of the part on show under them
   (V3), every part in the same grid cell so the block keeps the height of the longest and nothing below moves */
@media (max-width: 759.98px) {
  .rcf-ctl { flex-wrap: wrap; gap: 6px 10px; }
  .rcf-bar { order: -1; flex: 1 1 100%; }
  .rcf-seg { font-size: 11px; line-height: 13px; padding: 2px 2px; }
  .rcf-time { margin-right: auto; text-align: left; }
  .rcf-under { display: block; margin-top: 12px; }
  .rcf-under .rcf-ul { display: grid; }
  .rcf-under .rcf-ul > li { grid-area: 1 / 1; visibility: hidden; }
  .rcf-under .rcf-ul > li.on { visibility: visible; }
  .rcf-box .rcf-under li + li { margin-top: 0; }
}
/* without script (the article's noscript style repeats these), under reduced motion, or when the film cannot play: the
   poster with the browser's own controls, no player of the page, "The film in words" open (V4) */
.rcf-box.still .rcf-ctl, .rcf-box.still .rcf-again, .rcf-box.still .rcf-words { display: none; }
.rcf-box.still .rcf-under { display: block; margin-top: 12px; }
.rcf-box.still .rcf-wt { display: block; font: 600 12px/18px var(--rc-data); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-quiet); margin: 0 0 6px; }
.rcf-box.still .rcf-under .rcf-ul { display: block; }
.rcf-box.still .rcf-under .rcf-ul > li { visibility: visible; }
.rcf-box.still .rcf-under li + li { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .rcf-box .rcf-ctl, .rcf-box .rcf-again, .rcf-box .rcf-words { display: none; }
  .rcf-box .rcf-under { display: block; margin-top: 12px; }
  .rcf-box .rcf-wt { display: block; font: 600 12px/18px var(--rc-data); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-quiet); margin: 0 0 6px; }
  .rcf-box .rcf-under .rcf-ul { display: block; }
  .rcf-box .rcf-under .rcf-ul > li { visibility: visible; }
  .rcf-box .rcf-under li + li { margin-top: 10px; }
}