/* Magtein Science Playable — Run C internal-feedback shell styles (PD-013).
   Isolated stylesheet OUTSIDE the governed production CSS roots, following the
   PD-012 e2e07-feedback.css precedent. Loaded only by internal-feedback pages;
   default mode never requests this file. No governed token module and no
   frozen functional colour is redefined here.

   SCOPING. Every selector is scoped beneath an internal-mode wrapper. The
   landing and pre-play pages carry [data-e2e07-feedback="true"]; the play
   page carries [data-msp-donor-stage="true"] instead (it keeps the ordinary
   .msp-site chrome around the real game). The shared game-navigation block
   therefore matches either wrapper — everything else stays landing/pre-play
   scoped. */

/* PD-014 D1 — the PD-013 D4 selected-icon continuity is WITHDRAWN. The
   `@view-transition { navigation: auto }` opt-in and every paired
   `view-transition-name` are removed: no animated element may survive from one
   page state into the next. Removal is declarative-only — Run C never had any
   JavaScript transition orchestration — so routing is untouched. */

/* ---------------- Hero game strip (PD-014 D4) ----------------
   Small STATIC game cards beneath the 3D brain. Static inline SVG only: no
   game-surface element, no runtime script, no timeline, no JS animation loop,
   no interval, no recurring timer, no per-icon observer. The only motion is
   one short entrance plus a subtle hover/focus lift, both owned here.

   The entrance animates `translate`/`opacity` and the hover uses `transform`,
   deliberately kept on SEPARATE properties: an `animation-fill-mode: both`
   animation keeps overriding whatever property it animates, so reusing
   `transform` for both would leave hover permanently dead after the entrance
   settled. */

/* The compact hero: extra bottom room so the strip sits clearly BENEATH the
   brain rather than under its overlay. Scoped to .runc-hero so the PD-012
   long-form landing's hero padding is untouched. */
[data-e2e07-feedback="true"] .runc-hero {
  padding-bottom: 34px;
}

[data-e2e07-feedback="true"] .runc-hero-strip {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  width: 100%;
}
@media (min-width: 1100px) {
  [data-e2e07-feedback="true"] .runc-hero-strip {
    margin-top: 40px;
  }
}

[data-e2e07-feedback="true"] .runc-hero-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
@media (max-width: 759px) {
  [data-e2e07-feedback="true"] .runc-hero-strip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

[data-e2e07-feedback="true"] .runc-hero-strip-item {
  min-width: 0;
  opacity: 1;
  animation: runc-hero-strip-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--runc-hero-i, 0) * 45ms);
}

@keyframes runc-hero-strip-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

[data-e2e07-feedback="true"] .runc-hero-strip-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(246, 248, 237, 0.16);
  border-radius: 12px;
  background: rgba(10, 32, 61, 0.55);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}

[data-e2e07-feedback="true"] a.runc-hero-strip-link:hover,
[data-e2e07-feedback="true"] a.runc-hero-strip-link:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(113, 219, 113, 0.7);
}

[data-e2e07-feedback="true"] a.runc-hero-strip-link {
  border-color: rgba(113, 219, 113, 0.6);
  background: rgba(113, 219, 113, 0.09);
}

[data-e2e07-feedback="true"] a.runc-hero-strip-link:focus-visible {
  outline: 3px solid #9ce59c;
  outline-offset: 2px;
}

/* The artwork frame holds the canonical 160x104 ratio and the SVG's own
   xMidYMid meet keeps the COMPLETE artwork inside it at every size — no
   cropping, no independent stretch, no hidden content. */
[data-e2e07-feedback="true"] .runc-hero-strip-art {
  display: block;
  width: 100%;
  aspect-ratio: 160 / 104;
  border-radius: 8px;
  background: rgba(10, 32, 61, 0.72);
  border: 1px solid rgba(246, 248, 237, 0.12);
  overflow: hidden;
}
[data-e2e07-feedback="true"] .runc-hero-strip-art > svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-e2e07-feedback="true"] .runc-hero-strip-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  min-height: 2.5em;
}

[data-e2e07-feedback="true"] .runc-hero-strip-locked {
  opacity: 0.62;
}

[data-e2e07-feedback="true"] .runc-hero-strip-state {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.85;
}

[data-e2e07-feedback="true"] .runc-hero-strip-ready {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--e2e07-green);
  color: var(--e2e07-deep);
  font-size: 0.65rem;
  line-height: 1;
  opacity: 1;
}

[data-e2e07-feedback="true"] .runc-hero-strip-ready > svg {
  display: block;
  flex: none;
}

/* Reduced motion: no entrance movement, no hover travel — immediately
   static. */
@media (prefers-reduced-motion: reduce) {
  [data-e2e07-feedback="true"] .runc-hero-strip-item {
    animation: none;
    translate: none;
    opacity: 1;
  }
  [data-e2e07-feedback="true"] .runc-hero-strip-link {
    transition: none;
  }
  [data-e2e07-feedback="true"] a.runc-hero-strip-link:hover,
  [data-e2e07-feedback="true"] a.runc-hero-strip-link:focus-visible {
    transform: none;
  }
}

/* Hero-to-grid breathing room. Run C gave `.runc-games` no padding at all, so
   "Nine games in design." sat hard against the navy hero. These are the
   approved `.e2e07-games` values (60px / 32px), reduced to 40px on narrow
   viewports — comfortably above the 48px desktop / 32px mobile minimums
   without making the landing long again. */
[data-e2e07-feedback="true"] .runc-games {
  background: var(--e2e07-white);
  padding: 40px 0 32px;
}
@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .runc-games {
    padding: 60px 0 32px;
  }
}

[data-e2e07-feedback="true"] .runc-intro {
  max-width: 62ch;
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.92;
}

/* Compact card grid — existing design-system breakpoints (760 / 1100). */
[data-e2e07-feedback="true"] .runc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .runc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  [data-e2e07-feedback="true"] .runc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cards sit on the approved light #games surface (--e2e07-white), so their
   chrome is tuned for it. `height: 100%` plus the fixed-ratio preview below
   keeps every card in a row the same height — a tidy grid rather than a
   ragged one. */
[data-e2e07-feedback="true"] .runc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  height: 100%;
  border: 1px solid rgba(10, 32, 61, 0.16);
  border-radius: 16px;
  background: #e7f5e7;
  box-shadow: 0 1px 3px rgb(10 32 61 / 0.08);
  min-width: 0;
}

[data-e2e07-feedback="true"] .runc-card[data-runc-design-review="true"] {
  background: #cccccc;
  color: #575757;
}

/* PD-014 D5 — the duplicated small icon is gone; the head is name + status
   only and the large preview below is the card's primary visual. */
[data-e2e07-feedback="true"] .runc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

[data-e2e07-feedback="true"] .runc-card-headings {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

[data-e2e07-feedback="true"] .runc-card-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.1;
}

[data-e2e07-feedback="true"] .runc-card-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: #71db71;
  color: #0a1b16;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(10, 32, 61, 0.08);
  white-space: nowrap;
}

[data-e2e07-feedback="true"] .runc-card[data-runc-design-review="true"] .runc-card-state {
  background: #dfe7f0;
  color: #575757;
}

[data-e2e07-feedback="true"] .runc-card-state-lock {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 0.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

/* ---------------- Shared preview-fit frame (PD-014 D5) ----------------

   ONE canonical box for every preview, so rows align and no card is a
   different height from its neighbours, and the COMPLETE preview is visible
   inside it.

   How it works. `.runc-fit` owns the canonical aspect ratio and is an
   responsive frame. `.runc-fit-stage` is laid out at the
   canonical PIXEL size (--runc-fit-w x --runc-fit-h) regardless of how wide
   the card is, and is then scaled by a SINGLE uniform factor — the ratio of
   the frame's usable width to the canonical width. Because the frame's
   aspect ratio equals the canonical box's aspect ratio, that one factor fits
   both axes: width and height are never stretched independently, no
   cover-style cropping happens, and nothing meaningful is hidden to make it
   fit. The safe inset (--runc-fit-inset) is subtracted from the usable width
   before scaling, so meaningful content stays at least that far inside the
   visible frame.

   Run C hid the runtime's status strip and Finish control inside cards
   because they overflowed the frame. PD-014 D5 forbids hiding meaningful
   content to make it fit, and the scale above removes the reason: the whole
   approved frame — status text, result text, targets, numbers, controls and
   lower artwork — is now rendered and visible. */
[data-e2e07-feedback="true"] .runc-card-preview {
  /* The canonical box is the donor 640 px reading width by the TALLEST frame
     any game's approved preview timeline actually produces at that width.
     Measured across all nine games and every frame of their timelines, the
     tallest is Trail Switch at 514 px (Target Rush 513, Signal Control 448,
     the other six 414); 540 px covers the tallest with headroom, so no frame
     of any game is ever clipped and every card in a row is the same height.
     Run C's 16/11 box was 44 px too short for the two tallest games, which is
     why their status rows, targets and lower artwork were being cut off. */
  --runc-fit-w: 640px;
  --runc-fit-h: 540px;
  /* The inset is applied on the WIDTH axis and the single uniform scale
     carries it to the height axis, where it becomes inset * 540/640. 12px
     horizontally therefore yields 10.1px vertically — both above the 8px
     minimum clearance required of meaningful preview content. */
  --runc-fit-inset: 12px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 640 / 540;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(10, 32, 61, 0.6);
}

[data-e2e07-feedback="true"] .runc-fit-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--runc-fit-w);
  height: var(--runc-fit-h);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%)
    scale(calc((100cqw - 2 * var(--runc-fit-inset)) / var(--runc-fit-w)));
  transform-origin: center center;
  overflow: visible;
}

[data-e2e07-feedback="true"] .runc-fit-stage[style*="--runc-fit-scale"] {
  /* Numeric scale avoids CSS length division unsupported by older WebKit. */
  transform: translate(-50%, -50%) scale(var(--runc-fit-scale));
}

[data-e2e07-feedback="true"] .runc-fit-stage > [data-runc-surface] {
  width: 100%;
}

[data-e2e07-feedback="true"]
  [data-runc-surface="preview"]
  [data-gs-status] + div {
  min-height: 420px !important;
}

[data-e2e07-feedback="true"] .runc-fit-stage .runc-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(113, 219, 113, 0.55);
  background: rgba(11, 32, 48, 0.96);
  color: #71db71;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

[data-e2e07-feedback="true"] .runc-fit-stage .runc-replay:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

[data-e2e07-feedback="true"] .runc-fit-stage .runc-replay-icon {
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  font-size: 1.705rem;
  line-height: 1;
}

[data-e2e07-feedback="true"] .runc-fit-stage .runc-replay[hidden] {
  display: none;
}

[data-e2e07-feedback="true"] .runc-fit-stage game-surface-rc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
[data-e2e07-feedback="true"] .runc-fit-stage game-surface-rc > div {
  width: 100%;
}

/* Description grows into the free space so the CTA sits on a common
   baseline across a row. */
[data-e2e07-feedback="true"] .runc-card-desc {
  flex: 1 1 auto;
}

[data-e2e07-feedback="true"] .runc-card-caption {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

[data-e2e07-feedback="true"] .runc-card-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.92;
}

/* Last element of every card, pinned to the bottom of the flex column: with
   equal card heights that lands every CTA in a row on one baseline
   (PD-014 D5). */
[data-e2e07-feedback="true"] .runc-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #71db71;
  color: #0a203d;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

/* MT-02/MT-04 (manual-playtest fix). These colours were authored for the
   original dark card ground; PD-014 D5 moved the cards onto the white #games
   surface, where cream-at-55% text on a white card computes to a contrast of
   ~1.03 — the label disappeared and the control read as a blank outlined
   pill directly below the preview (whose final frame shows the game's
   "Finish run" row, which is why it was also reported beneath Finish run).
   Same layout, ink-on-white colours. */
[data-e2e07-feedback="true"] button.runc-card-cta:disabled {
  background: transparent;
  border-color: rgba(10, 32, 61, 0.35);
  color: rgba(10, 32, 61, 0.65);
  cursor: not-allowed;
}

[data-e2e07-feedback="true"] .runc-card-reason {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.7;
}

/* External Replay preview control — OUTSIDE the inert preview surface. */
[data-e2e07-feedback="true"] .runc-preview-group {
  display: block;
  min-width: 0;
}

[data-e2e07-feedback="true"] .runc-preview-controls {
  display: flex;
  justify-content: flex-end;
  min-height: 48px;
  margin-top: 4px;
}

[data-e2e07-feedback="true"] .runc-preview-controls .runc-replay-labelled {
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--e2e07-deep);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
}

[data-e2e07-feedback="true"] .runc-preview-controls .runc-replay-icon {
  width: 22px;
  height: 22px;
  background: transparent;
  color: inherit;
  font-size: 22px;
}

[data-e2e07-feedback="true"] .runc-preview-controls .runc-replay:hover {
  background: rgba(10, 32, 61, 0.06);
}

[data-e2e07-feedback="true"] .runc-preview-controls .runc-replay:active {
  background: rgba(10, 32, 61, 0.12);
}

[data-e2e07-feedback="true"] .runc-replay[data-preview-ready="false"] {
  visibility: hidden;
}

[data-e2e07-feedback="true"] .runc-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  margin-top: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(113, 219, 113, 0.45);
  border-radius: 14px;
  background: rgba(11, 32, 48, 0.96);
  color: #f6f8ed;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(11, 32, 48, 0.2);
}

[data-e2e07-feedback="true"] .runc-replay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(113, 219, 113, 0.12);
  color: #71db71;
  font-size: 1.05rem;
  line-height: 1;
}

[data-e2e07-feedback="true"] .runc-replay:focus-visible {
  outline: 3px solid #9ce59c;
  outline-offset: 2px;
}

[data-e2e07-feedback="true"] .runc-replay-off {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ---------------- Pre-play page ---------------- */

/* PD-014 D7 — the rail gutter column is gone. The pre-play page is a single
   centred column carrying ONE animated demonstration. */
[data-e2e07-feedback="true"] .runc-preplay-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 48px;
}

[data-e2e07-feedback="true"] .runc-preplay-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* PD-014 D7 — no current-game icon here: the large demonstration below is the
   only game visual, and the only animation, on this page. */
[data-e2e07-feedback="true"] .runc-preplay-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

[data-e2e07-feedback="true"] .runc-preplay-title {
  margin: 0 0 6px;
}

[data-e2e07-feedback="true"] .runc-preplay-about {
  margin: 0;
  max-width: 60ch;
  opacity: 0.92;
}

[data-e2e07-feedback="true"] .runc-preplay-testing {
  margin: 8px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.8;
}

/* The large demonstration occupies the previously underused width.

   MT-06 (manual-playtest fix): the reserved height must cover the TALLEST
   frame of every game's journey timeline, or the box grows and shrinks as
   frames change and the whole pre-play page reflows on every beat — measured
   before the fix, frames ranged 440-573 px against a 480 px reservation, so
   Start and the columns bounced during playback and a collapsed/blank box
   appeared whenever the runtime had not started. 580 px covers the tallest
   measured frame (573 px, Target Rush / Trail Switch) with headroom: the box
   is now one stable rectangle from first paint, whether the demonstration is
   idle, playing, frozen or (in a failure case) absent. */
[data-e2e07-feedback="true"] .runc-journey {
  display: block;
  width: 100%;
  min-height: 580px;
}

[data-e2e07-feedback="true"] .runc-preplay-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 760px) {
  [data-e2e07-feedback="true"] .runc-preplay-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

[data-e2e07-feedback="true"] .runc-preplay-challenge h2,
[data-e2e07-feedback="true"] .runc-preplay-how h2 {
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
}

[data-e2e07-feedback="true"] .runc-preplay-challenge-title {
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 6px;
}

[data-e2e07-feedback="true"] .runc-preplay-reminder {
  opacity: 0.85;
}

[data-e2e07-feedback="true"] .runc-preplay-how ol {
  margin: 0;
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Start game follows the preview disclaimer in the normal page flow. */
[data-e2e07-feedback="true"] .runc-preplay-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
}

[data-e2e07-feedback="true"] .runc-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 40px;
  border-radius: 999px;
  background: #71db71;
  color: #0a203d;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
}

[data-e2e07-feedback="true"] .runc-start:focus-visible {
  outline: 3px solid #9ce59c;
  outline-offset: 3px;
}

[data-e2e07-feedback="true"] .runc-preplay-note {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Pre-deploy fix (2026-08-08): Pair Memory phase-order caption (Section 5
   branch (b) mitigation). Lives INSIDE the caption grid item so the
   pre-play grid's explicit row assignments are untouched. */
[data-e2e07-feedback="true"] .runc-demo-phase-note {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Copy-only run (2026-08-08): Quick Tap's extended pre-play line keeps the
   shared type scale but takes the full head width — inside the default 60ch
   measure the longer sentence wrapped to a third line and pushed the
   demonstration 24px down the page; at full width it stays two lines and the
   demonstration box keeps its measured baseline geometry. */
[data-e2e07-feedback="true"] [data-runc-preplay="quick-tap"] .runc-preplay-about {
  max-width: none;
}

/* Copy-only run (2026-08-08): Quick Tap ramp panel — static text on the
   existing pre-play type scale. At desktop widths it occupies the grid's
   reserved 340px second column beside the demonstration (the column PD-019
   kept in the template so column 1's width never moves — which is exactly
   why adding the panel cannot move the demonstration box or Start); below
   1100px it flows after the demonstration block in the single column. */
[data-e2e07-feedback="true"] .runc-ramp-panel {
  border: 1px solid rgba(10, 32, 61, 0.18);
  border-radius: 12px;
  padding: 18px 20px;
}
[data-e2e07-feedback="true"] .runc-ramp-panel h2 {
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
}
[data-e2e07-feedback="true"] .runc-ramp-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}
[data-e2e07-feedback="true"] .runc-ramp-close,
[data-e2e07-feedback="true"] .runc-ramp-note {
  margin: 12px 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
@media (min-width: 1100px) {
  /* Fix batch (2026-08-10): the panel follows the demonstration's row index
     (3 instead of the old 2/4 span) so it still starts level with the
     demonstration box. Its content, wording, width, padding and type are
     unchanged — only the row number moved with the row it was pinned to. */
  [data-e2e07-feedback="true"] .runc-preplay-main > .runc-ramp-panel {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}

/* ============ Quick Tap pilot rules, GENERALISED (2026-08-07) ============
   The pilot validated these behind [data-runc-pilot="quick-tap"]; the
   propagation run applies them to every internal-feedback page exactly as
   the pilot report proposed. Declarations are byte-identical to the pilot's;
   only the scope moved (Quick Tap's rendering is proven unchanged by the
   before/after equivalence captures in the run evidence).

   1. EXPLICIT PAGE BACKGROUND — owner ruling: internal-feedback mode is
      FIXED-LIGHT. The e2e07 feedback wrapper forces the ink colour
      (--e2e07-deep) but, by its own boundary rules, sets no background;
      under dark appearance the body background becomes the SAME #0a203d and
      every pre-play text element rendered invisible (measured contrast
      1.000; 1.287 under high contrast). The approved e2e07 package is a
      light design, so the wrapper now carries the approved cream surface in
      EVERY appearance mode — including a high-contrast player's chosen
      black, which is deliberately overridden on this design-review surface
      (recorded in the PD entry with the measured contrast). */
[data-e2e07-feedback="true"] {
  background: var(--e2e07-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-e2e07-feedback="true"] .e2e07-footer {
  margin-top: auto;
}

/* 2. REPLAY CONTROL ON LIGHT SURFACES. The original pill border is cream at
      35% — designed for a dark surface — and disappears on the cream page
      and the white landing cards; the ink border keeps it a visible,
      labelled control everywhere the fixed-light ruling applies. */
[data-e2e07-feedback="true"] .runc-replay {
  border-color: rgba(10, 32, 61, 0.45);
}

/* 3. UNIFORM-FIT DEMONSTRATION FRAME on every pre-play page: the canonical
      journey box — 1024x580, covering the tallest approved journey frame
      (573 px) with headroom — so the demonstration is ONE stable rectangle
      at every width and the complete frame scales as a single unit (no
      independent stretching, no cropping, no hidden content). Replaces the
      fixed 580 px reservation. */
[data-e2e07-feedback="true"] .runc-journey {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1024 / 580;
  container-type: inline-size;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(10, 32, 61, 0.06);
  --runc-fit-w: 1024px;
  --runc-fit-h: 580px;
  --runc-fit-inset: 0px;
}

/* 3b. REDUCED MOTION lays the two-panel static preview out naturally instead
      of scaling it into the 1024x580 motion box (where the taller static
      frame was clipped — a pilot-era defect surfaced by the SSR first-frame
      requirement that every mode shows a correct, complete frame). No
      timeline exists in this mode, so the stable-rectangle rule the fit box
      implements has nothing to stabilise. */
@media (prefers-reduced-motion: reduce) {
  [data-e2e07-feedback="true"] .runc-journey {
    aspect-ratio: auto;
    overflow: visible;
  }
  [data-e2e07-feedback="true"] .runc-journey .runc-fit-stage,
  [data-e2e07-feedback="true"] .runc-journey .runc-fit-stage[style*="--runc-fit-scale"] {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }
}

/* 4. ABOVE-THE-FOLD COMPOSITION at desktop widths, revised by the
      pre-review polish (2026-08-07, PD-019 D2): title row, then the
      demonstration with its action row — Start game dominant, Replay
      preview secondary beside it — DIRECTLY BENEATH it, all inside the
      first 1440x900 viewport. How to play and the challenge follow BELOW
      the action row (instructions sit under the thing they describe); the
      science disclosure flows after them. Every wording is unchanged. The
      demonstration keeps its exact pre-change box: the second grid column
      stays in the template solely so column 1's width — and with it the
      demonstration rectangle — is byte-identical to the measured baseline. */
@media (min-width: 1100px) {
  [data-e2e07-feedback="true"] .runc-preplay-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 14px 28px;
    align-items: start;
  }
  [data-e2e07-feedback="true"] .runc-preplay-head {
    grid-column: 1 / -1;
  }
  /* PRE-REVIEW FIX BATCH (2026-08-10), Stage 2. The disclaimer moved from
     the row BELOW the caption to the row ABOVE the demonstration, so the
     explicit row assignments below shift by one and the demonstration's
     two-row span collapses to the single row it now occupies. The rows are
     auto-sized and the grid is `align-items: start`, so the demonstration
     span's own height is unchanged by the collapse — only its row index
     moves. Column 1's width, and with it the demonstration rectangle, is
     untouched: the 340px second column stays in the template exactly as
     PD-019 left it. */
  [data-e2e07-feedback="true"] .runc-preplay-main > .runc-preplay-note {
    grid-column: 1;
    grid-row: 2;
  }
  /* The demo wrapper is the span child of the main column. */
  [data-e2e07-feedback="true"] .runc-preplay-main > span {
    grid-column: 1;
    grid-row: 3;
  }
  [data-e2e07-feedback="true"] .runc-preplay-actions {
    grid-column: 1;
    grid-row: 4;
    margin-top: 0;
  }
  [data-e2e07-feedback="true"] .runc-preplay-columns {
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
  }
  /* How to play before the challenge below the demonstration: wording
     untouched, presentation order only. */
  [data-e2e07-feedback="true"] .runc-preplay-how {
    order: -1;
  }
  [data-e2e07-feedback="true"] .runc-preplay-main > .e2e07-disclosure {
    grid-column: 1 / -1;
    grid-row: 6;
  }
}

/* ============ Pre-review polish (2026-08-07) — Stage 1 ============
   The action row beneath the demonstration. Start game keeps its approved
   dominant treatment (green filled pill, .runc-start above); Replay preview
   keeps its secondary outlined treatment and simply moves into the row. */
[data-e2e07-feedback="true"] .runc-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
[data-e2e07-feedback="true"] .runc-preview-actions .runc-replay,
[data-e2e07-feedback="true"] .runc-preview-actions .runc-replay-off {
  margin-top: 0;
}

/* ============ SSR static first frame (games propagation, 2026-08-07) ======
   The demonstration/preview boxes carry two server-rendered blocks built by
   the SAME approved runtime renderers (e2e07-ssr-frames.ts): the timeline's
   exact first frame for motion users and the approved static frame for
   reduced motion — the identical media query the runtime itself honours.
   The un-upgraded <game-surface-rc> renders nothing, so the SSR frame is the
   first paint; the moment the runtime script defines the element (which
   synchronously repaints the SAME frame in place), both blocks are hidden.
   No flash, no jump, no reflow, no timeline restart. */
[data-e2e07-feedback="true"] .runc-ssr-frame {
  display: block;
  width: 100%;
}
[data-e2e07-feedback="true"] [data-runc-ssr-frame="reduced"] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-e2e07-feedback="true"] [data-runc-ssr-frame="motion"] {
    display: none;
  }
  [data-e2e07-feedback="true"] [data-runc-ssr-frame="reduced"] {
    display: block;
  }
}
[data-e2e07-feedback="true"] game-surface-rc:defined ~ .runc-ssr-frame {
  display: none !important;
}