/* ASM://PROTOCOL — scene 07 «Прогноз сверяется с машиной».
   A real lesson question (M2 · lesson 4 · Console Cowboy) the visitor can answer; the verdict
   comes from the machine snapshots. Loaded after landing.css; every rule is scoped to #s7.
   Without verdict.js the scene shows a static example verdict (option A, «ответ неверный»).
   State hooks set by verdict.js: #s7[data-vd] (beats, listing) and .vd-shot[data-vd] (answer area):
   idle · fail · ok · reveal. */

#s7 [hidden] { display: none !important; }
#s7 {
  --vd-val: clamp(18px, min(1.75vw, 2.9vh), 27px);
  --vd-pad-y: clamp(8px, 1.35vh, 14px);
  /* one grid for the rail and the stage: «Практика» starts where the answer column starts */
  --vd-gap: clamp(32px, 5.2vw, 96px);
  --vd-left: 48;
}

/* the body is centred in its row; a shorter safety padding leaves room for the answer area on laptop heights */
@media (min-width: 561px) { #s7 .scene__body { padding: clamp(8px, 2.4vh, 56px) 0; } }
@media (max-width: 560px) { #s7 .scene__body { padding: 10px 0; } }

/* ---------- beats: the lesson's three steps, now a progress rail ---------- */
#s7 .vd-beats {
  display: grid; max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--line-2);
  grid-template-columns: calc(var(--vd-left) * 1% + var(--vd-gap) * (100 - var(--vd-left)) / 100) minmax(0, 1fr) minmax(0, 1fr);
}
#s7 .vd-beats li { position: relative; display: grid; align-content: start; gap: clamp(4px, 0.7vh, 6px); padding: clamp(10px, 1.5vh, 18px) 18px 0 0; }
#s7 .vd-beats li + li::before {
  content: "→"; content: "→" / ""; /* decoration: not read aloud */
  position: absolute; left: -9px; top: -13px; width: 18px; text-align: center;
  font: 400 16px/26px var(--mono); color: var(--dimtext); background: var(--film);
}
#s7 .vd-beats li::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: transparent; transition: background-color 300ms ease;
}
#s7 .vd-beats li + li::after { left: 9px; }
#s7 .vd-beats b {
  font: 300 clamp(20px, min(2.35vw, 3.7vh), 36px)/1.1 var(--mono); letter-spacing: -0.02em;
  color: var(--heading); transition: color 300ms ease;
}
#s7 .vd-beats span {
  font: 300 clamp(13px, min(1.05vw, 1.8vh), 15px)/1.4 var(--sans); color: var(--caption);
  transition: color 300ms ease;
}
/* with JS the rail follows the visitor: one beat is lit */
#s7[data-vd] .vd-beats b { color: var(--dimtext); }
#s7[data-vd] .vd-beats [aria-current] b { color: var(--heading); }
#s7[data-vd] .vd-beats [aria-current] span { color: var(--body); }
#s7[data-vd] .vd-beats [aria-current]::after { background: var(--green); }
body.skin-operator #s7[data-vd] .vd-beats [aria-current]::after { box-shadow: 0 0 10px rgb(var(--fx-glow-rgb) / 0.45); }

/* ---------- stage: listing | question + answer ---------- */
#s7 .vd-stage {
  display: grid; align-items: start; gap: var(--vd-gap);
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); /* = --vd-left */
  max-width: 1180px; margin: clamp(18px, 3.3vh, 52px) auto 0;
}

/* listing — the same five lines the machine ran */
#s7 .vd-code { min-width: 0; align-self: center; } /* three short lines: centred against the answer column */
#s7 .vd-code__head {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: clamp(8px, 1.2vh, 12px); border-bottom: 1px solid var(--line);
  font: 500 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--caption);
}
#s7 .vd-code__head span:first-child { text-transform: none; letter-spacing: 0.08em; color: var(--body); }
#s7 .vd-lines {
  margin-top: clamp(6px, 1.2vh, 14px);
  font: 300 clamp(18px, min(2.4vw, 3.8vh), 36px)/1.55 var(--mono); letter-spacing: -0.01em; color: var(--heading);
}
#s7 .vd-line {
  position: relative; display: flex; align-items: baseline;
  margin: 0 -12px; padding: 0 12px; white-space: pre; border-radius: 2px;
}
#s7 .vd-ln { flex: 0 0 auto; width: 2.8em; font-size: 0.42em; letter-spacing: 0.1em; color: var(--dimtext); position: relative; top: -0.5em; }
#s7 .vd-mk { flex: 0 0 auto; width: 1.4em; font-size: 0.5em; color: var(--green); position: relative; top: -0.3em; }
#s7 .vd-src { flex: 0 0 auto; min-width: 13.5ch; } /* longest line «add eax, eax» + air */
#s7 .vd-ann {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 clamp(11px, min(1vw, 1.7vh), 14px)/1.2 var(--mono); letter-spacing: 0.02em; color: var(--body);
}
/* wrong forecast: where the machine had your value, and where to look */
#s7 .vd-line.is-was .vd-ann { color: var(--amber); }
#s7 .vd-line.is-look { background: color-mix(in srgb, var(--green) 7%, transparent); }
#s7 .vd-line.is-look .vd-ann { color: var(--caption); }
/* verdict / reveal: the machine's own notes, line by line */
#s7 .vd-line.is-run .vd-ann { color: var(--body); }
#s7 .vd-line.is-final .vd-ann { color: var(--green); }
body.skin-operator #s7 .vd-line.is-final .vd-ann { text-shadow: var(--glow-text); }

/* question */
#s7 .vd-task { position: relative; min-width: 0; }
#s7 .vd-q {
  font: 300 clamp(20px, min(2.15vw, 3.5vh), 34px)/1.22 var(--mono); letter-spacing: -0.02em;
  color: var(--heading); text-wrap: balance;
}
#s7 .vd-q span { display: inline-block; } /* the second sentence moves as a whole */
#s7 .vd-zone { margin-top: clamp(14px, 2.6vh, 28px); }

/* options: tap only selects; the answer goes after «Ответить» */
#s7 .vd-opts { display: grid; gap: clamp(6px, 1vh, 10px); }
#s7 .vd-opt {
  display: grid; grid-template-columns: 1.2em calc(var(--vd-val) * 3.3) minmax(0, 1fr);
  align-items: baseline; column-gap: clamp(10px, 1.1vw, 16px);
  width: 100%; margin: 0; padding: var(--vd-pad-y) 16px; text-align: left;
  border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color var(--fx-transition-duration) ease, border-color var(--fx-transition-duration) ease;
}
#s7 .vd-opt__key { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--caption); }
#s7 .vd-opt__val { font: 300 var(--vd-val)/1 var(--mono); letter-spacing: -0.03em; color: var(--heading); white-space: nowrap; }
/* «EAX =» is the register label, the number is the forecast */
#s7 .vd-opt__reg { font: 400 0.5em/1 var(--mono); letter-spacing: 0.08em; color: var(--caption); vertical-align: 0.22em; text-shadow: none; }
#s7 .vd-opt__why { font: 300 clamp(14px, min(1.15vw, 1.95vh), 17px)/1.4 var(--sans); color: var(--body); }
#s7 .vd-opt:disabled { cursor: default; }
#s7 .vd-opt:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
#s7 .vd-shot[data-vd="idle"] .vd-opt:hover { background: var(--site-option-hover); border-color: var(--site-control-hover-border); }
#s7 .vd-opt[aria-checked="true"] {
  border-color: var(--green); background: var(--primary-surface); box-shadow: inset 2px 0 0 var(--green);
}
#s7 .vd-opt[aria-checked="true"] .vd-opt__key,
#s7 .vd-opt[aria-checked="true"] .vd-opt__val { color: var(--green); }
body.skin-operator #s7 .vd-opt[aria-checked="true"] .vd-opt__val { text-shadow: var(--glow-text); }
/* after the verdict the chosen line keeps the machine's colour */
#s7 .vd-opt.is-wrong { border-color: var(--site-danger-border); background: rgb(244 119 119 / 0.03); box-shadow: inset 2px 0 0 var(--red); }
#s7 .vd-opt.is-wrong .vd-opt__key, #s7 .vd-opt.is-wrong .vd-opt__val { color: var(--red); }
body.skin-operator #s7 .vd-opt.is-wrong .vd-opt__val { text-shadow: none; }
#s7 .vd-opt.is-right { border-color: var(--ok-border); }
/* the answer area shows the chosen line only once the machine has answered */
#s7 .vd-shot[data-vd]:not([data-vd="idle"]) .vd-opt[aria-checked="false"] { display: none; }

/* static (no verdict.js): a denser, non-interactive list, so question, options and the example verdict share one screen */
#s7 .vd-shot:not([data-vd]) { --vd-pad-y: clamp(5px, 0.7vh, 8px); }
#s7 .vd-shot:not([data-vd]) .vd-opts { gap: clamp(4px, 0.7vh, 8px); }
#s7 .vd-shot:not([data-vd]) .vd-verdict.is-shown { padding-top: clamp(10px, 1.6vh, 18px); padding-bottom: clamp(10px, 1.6vh, 18px); }

#s7 .vd-submit { margin-top: clamp(12px, 2.2vh, 22px); }
#s7 .btn { min-height: clamp(42px, 5.4vh, 50px); padding: 0 24px; }
#s7 .btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; text-shadow: none; border-color: var(--line-2); }

/* verdict */
#s7 .vd-verdict.is-shown {
  margin-top: clamp(8px, 1.4vh, 14px); padding: clamp(12px, 2vh, 20px) clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--line-2); border-radius: 3px;
}
#s7 .vd-verdict.is-fail { border-color: var(--site-danger-border); background: rgb(244 119 119 / 0.03); }
#s7 .vd-verdict.is-ok { border-color: var(--ok-border); background: rgb(114 242 176 / 0.03); }
#s7 .vd-verdict__title { font: 500 12px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
#s7 .is-fail .vd-verdict__title { color: var(--red); }
#s7 .is-ok .vd-verdict__title { color: var(--green); }
body.skin-operator #s7 .is-ok .vd-verdict__title { text-shadow: var(--glow-text); }
#s7 .vd-verdict__body {
  margin-top: clamp(6px, 1.1vh, 10px);
  font: 400 clamp(15px, min(1.3vw, 2.2vh), 19px)/1.5 var(--mono); color: var(--heading);
}
#s7 .vd-verdict__body b { font-weight: 400; color: var(--amber); }
#s7 .vd-verdict__why {
  margin-top: clamp(6px, 1.1vh, 10px);
  font: 300 clamp(14px, min(1.2vw, 2.05vh), 18px)/1.5 var(--sans); color: var(--ink);
}
#s7 .vd-verdict__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: clamp(10px, 1.8vh, 16px);
}
#s7 .vd-verdict__actions .btn { min-height: clamp(40px, 5vh, 46px); padding: 0 18px; font-size: 11px; letter-spacing: 0.16em; }
#s7 .vd-verdict__src {
  margin-left: auto; font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption);
}

/* ---------- montage: one cut per verdict (kit keyframes), TTY stays calm ---------- */
html.motion body.skin-operator #s7 .vd-shot.is-cut { animation: hard-cut var(--glitch-duration) steps(1, end) backwards; }
html.motion body.skin-operator #s7 .vd-shot.is-cut .is-ok .vd-verdict__title {
  animation: phosphor 1400ms ease-out var(--glitch-duration) backwards;
}
html.motion body.skin-tty #s7 .vd-shot.is-cut { animation: appear 220ms ease-out backwards; }

/* ---------- TTY: flat, no glow ---------- */
body.skin-tty #s7 .vd-opt, body.skin-tty #s7 .vd-verdict.is-shown, body.skin-tty #s7 .vd-line { border-radius: 0; }
body.skin-tty #s7 .vd-verdict.is-fail, body.skin-tty #s7 .vd-opt.is-wrong { background: transparent; }
body.skin-tty #s7 .vd-verdict.is-ok { background: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #s7 .vd-stage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #s7 .vd-beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #s7 { --vd-val: 19px; --vd-pad-y: 9px; }
  #s7 .scene__mark .scene__ref { display: none; }
  #s7 .vd-beats li { padding: 10px 6px 0 0; }
  #s7 .vd-beats b { font-size: 15px; }
  #s7 .vd-beats span { display: none; }
  #s7 .vd-stage { margin-top: 18px; gap: 16px; }
  #s7 .vd-code__head { padding-bottom: 6px; }
  #s7 .vd-lines { margin-top: 4px; font-size: 18px; line-height: 1.5; }
  #s7 .vd-line { margin: 0 -8px; padding: 0 8px; }
  #s7 .vd-ann { font-size: 11px; }
  #s7 .vd-q { font-size: 18px; }
  #s7 .vd-zone { margin-top: 12px; }
  #s7 .vd-opts { gap: 6px; }
  #s7 .vd-opt { column-gap: 10px; padding-left: 12px; padding-right: 12px; }
  #s7 .vd-opt__why { font-size: 14px; line-height: 1.35; }
  #s7 .vd-submit { margin-top: 12px; }
  #s7 .vd-submit .btn { width: 100%; }
  #s7 .vd-verdict.is-shown { padding: 12px 14px; }
  #s7 .vd-verdict__body { font-size: 14px; }
  #s7 .vd-verdict__why { font-size: 14px; line-height: 1.45; }
  #s7 .vd-verdict__src { display: none; }
}