/* Dominia — what is left of the how-it-works travel.
 *
 * Section 002 used to be a horizontal four-plate travel built from this file and js/travel.js.
 * It was replaced on 2026-09-27 by the pinned board in css/how.css and js/how.js, and travel.js
 * was deleted. These are the rules the rest of the page still borrows by name:
 *
 *   .window__bar   the caption strip on 002's MG Road tag (.sl-tag) and 004's contest panel
 *   .beat__live    the live square in that strip
 *   .scene__index  the step headings on 002's cards (.sl-card, sized in css/how.css)
 *   .scene__marks  the viewfinder over 004's contest map (js/main.js mountContestBoard)
 *   .scene__view   the satellite plate under 004's contest map (same function)
 *
 * They keep their old names because renaming them touches markup, JS and several stylesheets to
 * gain nothing a note cannot buy; see .contest__map in css/story.css.
 */

.window__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  color: var(--slate);
}

/* The label tracking (css/tokens.css) is held low on a phone: a window bar there is only just
   wide enough for its words set close, and tracked they wrap. */
@media (max-width: 759px) {
  .window__bar { letter-spacing: 0.06em; }
}

/* The status mark: a live square before a bar's title, on the 2s ambient beat. Green where the
   ground is being held, Claim red while it is under attack (js/how.js writes data-state), so the
   warning announces itself before the words do. The same element and the same keyframes as the
   hero's claim HUD (`.hero__hud-live`): a mark that is alive rather than a label saying "live". */
.beat__live {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--alliance);
  animation: live-pulse var(--dur-ambient) ease-in-out infinite;
}

.beat__live[data-state="attack"] { background: var(--claim); }

/* The step name. These are game terms, so per Brand Guidelines v3 they set in the brand face,
   Archivo Black, in Bone. css/how.css sets the size and spacing inside .sl-card. */
.scene__index {
  color: var(--bone);
  font-family: var(--font-brand);
  font-weight: 900;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: var(--s-6);
}

/* ---- the viewfinder ----
 *
 * A hairline frame inset inside a map, with two corner brackets.
 *
 * css/surface.css argues that a Dominia panel gets a CHAMFER rather than HUD brackets, because
 * brackets say you are looking THROUGH a viewfinder at a live scene. A map of live satellite
 * ground with real territories on it is precisely that case — so the panel keeps its chamfer as a
 * physical edge, and the VIEW inside it gets the viewfinder.
 *
 * Two brackets, not eight. hud.css: "enough to say instrument, not enough to say sticker" — and
 * with a full hairline frame already present, four corners would be over-drawn. */
.scene__marks {
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--bone) 26%, transparent);
  --hud-arm: 16px;
  --hud-line: color-mix(in srgb, var(--bone) 62%, transparent);
}

/* ---- the satellite plate ----
 * The wrapper the vector board sits in. Geometry comes in as --plate-size/x/y, written by
 * js/main.js, which documents the arithmetic that registers a CSS background to an SVG viewBox. */
.scene__view {
  position: absolute;
  inset: 0;
}

/* THE GRADE IS ON A PSEUDO-ELEMENT BEHIND THE SVG, NOT ON THE WRAPPER. A filter on the parent
   applies to its children, so `saturate(0.30)` on the wrapper desaturated the TERRITORIES along
   with the photograph — the claim cell measured 0.0% red by any test. */
.scene__view::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/board-satellite.jpg");
  background-repeat: no-repeat;
  background-size: var(--plate-size) auto;
  background-position: var(--plate-x) var(--plate-y);

  /* Darker than the hero's plate, and not by preference. The hero's board carries a scrim; these
     panels carry none, so the same grade left them at median L75 with the p75 at L98 — and the
     road ramp runs L80 to L161. Three of its five classes were therefore at or BELOW the terrain
     they are drawn on, which is why the network read as shadow rather than as an overlay. At 0.42
     the plate sits at p50 45 / p95 79, so the whole ramp clears the ground it has to be legible
     against. sepia(0.20) came off with the move to v3's cool ground: the imagery reads as the cold
     instrument around it rather than as a warm print. */
  filter: saturate(0.30) contrast(1.06) brightness(0.42);
}