/* ============================================================
   IMPACT (2026-09-15, builder: impact; the film strip of stills that sat
   under the stage was removed on 2026-09-16 at Adam's request)
   One hairline band, two layers:
     1. the rail: the tracked "Impact type" label, the three types as text
        options (the playing one white with the 1px light bar), and the
        playing type's quiet note on the right;
     2. the stage: one 16:9 black frame, hairline border, 16px radius, the
        page's stage reel (28c in main.js) plays the pressed type's clip.
   The note follows the pressed option with :has(), so the reel needs no
   extra script. Scoped to body.tm-page, prefix .tm-ia-.
   markup: section#exit.tm-ia-sec > .tm-head + .tm-ia.tm-hl-band[data-reel]
   (.tm-ia-rail > .tm-ia-rail-label + .tm-ia-opts > button.tm-hl-opt.tm-ia-opt
   + .tm-ia-notes > span[data-ia-note]) + .tm-frame.tm-ia-stage[data-reel-frame]
   ============================================================ */

.tm-page .tm-ia { padding-bottom: 28px; }

/* ---------- 1. the rail ---------- */
.tm-page .tm-ia-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px 28px;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--tm-rule);
}
.tm-page .tm-ia-rail-label { margin: 0; align-self: center; }
.tm-page .tm-ia-opts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2px 26px; }
.tm-page .tm-ia-opt { display: inline-flex; align-items: center; font-size: 15px; }
/* the options run the rail's full height, so the pressed one's light bar
   lands exactly on the rail's rule (the band's top rule keeps the one light) */
.tm-page .tm-ia-opt::after { bottom: -7px; height: 1px; background: rgba(205, 216, 255, 0.7); }
.tm-page .tm-ia-opt[aria-pressed="true"]::after { opacity: 1; }
.tm-page .tm-ia-notes {
  margin: 0 0 0 auto;
  padding: 6px 0;
  align-self: center;
  max-width: 46ch;
  text-align: right;
  text-wrap: balance;
}
.tm-page .tm-ia-notes .tm-hl-note { display: none; max-width: none; }

/* ---------- 2. the stage ---------- */
.tm-page .tm-ia-stage { margin: 28px 0 0; }
.tm-page .tm-ia-stage > video { object-fit: cover; }

/* ---------- following the pressed type (no script beyond the reel) ---------- */
.tm-page .tm-ia:has(.tm-ia-opt[data-ia-type="shatter"][aria-pressed="true"]) .tm-ia-notes [data-ia-note="shatter"],
.tm-page .tm-ia:has(.tm-ia-opt[data-ia-type="explosion"][aria-pressed="true"]) .tm-ia-notes [data-ia-note="explosion"],
.tm-page .tm-ia:has(.tm-ia-opt[data-ia-type="collapse"][aria-pressed="true"]) .tm-ia-notes [data-ia-note="collapse"] { display: block; }
/* before the reel settles (and without :has support) the first type on the page shows */
.tm-page .tm-ia:not(:has(.tm-ia-opt[aria-pressed="true"])) .tm-ia-notes .tm-hl-note:nth-child(1 of :not([hidden])) { display: block; }

/* ---------- smaller windows ---------- */
@media (max-width: 1100px) {
  .tm-page .tm-ia-notes { max-width: 38ch; }
}
@media (max-width: 820px) {
  .tm-page .tm-ia { padding-bottom: 22px; }
  .tm-page .tm-ia-rail { gap: 2px 18px; padding: 6px 0 4px; }
  .tm-page .tm-ia-rail-label { width: 100%; padding-top: 10px; }
  /* the rail wraps into rows, so the bar goes back under the option's text */
  .tm-page .tm-ia-opt::after { bottom: 4px; }
  .tm-page .tm-ia-notes { width: 100%; margin: 0; padding: 4px 0 12px; max-width: none; text-align: left; }
  .tm-page .tm-ia-stage { margin-top: 20px; }
}
@media (forced-colors: active) {
  .tm-page .tm-ia-opt[aria-pressed="true"]::after { forced-color-adjust: none; background: CanvasText; height: 2px; }
}