/* ASM://PROTOCOL — landing, scene 08 «Два режима».
   One real lesson (M3.2) in both modes of the course behind one switch.
   Without modes.js both takes are shown side by side (stacked on phones);
   modes.js adds .is-live: the takes share one grid cell, the inactive one keeps its
   space (visibility: hidden), so switching never moves the switch under the cursor.
   Builds on kit.css tokens and landing.css keyframes (hard-cut, phosphor, appear). */

.scene--modes .scene__body { max-width: 1180px; }

.modes { max-width: clamp(1060px, 61.5vw, 1180px); margin: 0 auto; }

/* ---------- the lesson card ---------- */
.modes__card {
  border: 1px solid var(--line-2); border-radius: 3px;
  background: rgb(8 12 10 / 0.72);
}
body.skin-tty .modes__card { border-radius: 0; background: var(--panel); }
.modes__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  padding: 13px clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--caption);
}
.modes__head span:first-child { color: var(--body); }

.modes__stage {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(18px, 3.2vh, 34px) clamp(18px, 2.4vw, 32px);
  column-gap: clamp(24px, 3.4vw, 48px);
}
.modes__take { display: grid; align-content: start; gap: clamp(14px, 2.2vh, 22px); min-width: 0; }

/* no JS: the takes stand side by side, each signed with its mode */
.modes__label {
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--caption);
}
.modes__label b { display: block; margin-bottom: 4px; font-size: 14px; letter-spacing: 0.06em; text-transform: none; color: var(--heading); }
.modes__take--cowboy .modes__label b { color: var(--green); }
.modes__bar, .modes__switch { display: none; }

/* ---------- take content ---------- */
.modes__prompt {
  font: 300 clamp(20px, min(2.05vw, 3.4vh), 34px)/1.3 var(--mono);
  letter-spacing: -0.02em; color: var(--heading); text-wrap: pretty;
}
body.skin-operator .modes__prompt { text-shadow: 0 0 18px rgb(var(--fx-glow-rgb) / 0.12); }
.modes:not(.is-live) .modes__prompt { font-size: clamp(18px, min(1.75vw, 3vh), 28px); }

.modes__code {
  font: 300 clamp(16px, min(1.55vw, 2.7vh), 25px)/1.62 var(--mono);
  color: var(--heading); letter-spacing: -0.01em; white-space: pre; overflow-x: auto;
}
.modes__code .ln { display: inline-block; }
.modes__code .ln > i:first-child {
  display: inline-block; width: 2.7em; font-size: 0.5em; vertical-align: 0.24em; color: var(--dimtext); letter-spacing: 0.1em;
}

.modes__matter { display: grid; align-content: start; gap: clamp(12px, 2vh, 20px); min-width: 0; }

.modes__hint {
  max-width: 40ch; padding: clamp(12px, 2vh, 18px) 20px;
  border-left: 1px solid var(--amber); background: var(--site-warning-surface);
  font: 300 clamp(16px, min(1.4vw, 2.5vh), 22px)/1.45 var(--sans); color: var(--site-hint-text);
}
.modes__hint > span:first-child {
  display: block; margin-bottom: 8px;
  font: 500 11px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber);
}
body.skin-tty .modes__hint { background: transparent; color: var(--ink); }

.modes__options { display: grid; gap: clamp(6px, 1vh, 8px); align-content: start; }
.modes__options li {
  display: flex; align-items: baseline; gap: 14px;
  padding: clamp(8px, 1.45vh, 12px) 14px;
  border: 1px solid var(--line-2); border-radius: 3px;
  font: 400 clamp(15px, min(1.2vw, 2.2vh), 18.5px)/1.45 var(--sans); color: var(--ink);
}
.modes__options li > span { flex: none; font: 500 12px/1 var(--mono); color: var(--muted); }
.modes__nobr { white-space: nowrap; }
.modes__line { display: block; }
body.skin-tty .modes__options li { border-radius: 0; }

/* ---------- live: one take at a time ---------- */
.modes.is-live .modes__stage { grid-template-columns: minmax(0, 1fr); }
.modes.is-live .modes__take {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas: "prompt prompt" "matter options";
  column-gap: clamp(24px, 3.4vw, 48px);
}
.modes.is-live .modes__take[hidden], .modes.is-live .modes__guide[hidden] { display: grid; visibility: hidden; }
.modes.is-live .modes__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.modes.is-live .modes__prompt { grid-area: prompt; max-width: 64ch; }
.modes.is-live .modes__matter { grid-area: matter; align-self: start; }
.modes.is-live .modes__options { grid-area: options; }

/* the bar: a plain-words cue and the switch itself */
.modes.is-live .modes__bar {
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 14px clamp(24px, 3vw, 40px);
  margin-top: clamp(14px, 2.6vh, 28px);
}
.modes__guide {
  grid-area: 1 / 1; max-width: 46ch; text-align: right;
  font: 300 clamp(15px, 1.2vw, 18px)/1.5 var(--sans); color: var(--body); text-wrap: balance;
}
.modes.is-live .modes__switch {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 3px;
}
.modes__btn {
  display: grid; gap: 5px; justify-items: start; min-width: 0;
  padding: 10px 18px 11px; border: 0; border-radius: 2px; background: transparent; cursor: pointer; text-align: left;
  transition: background-color var(--fx-transition-duration) ease, color var(--fx-transition-duration) ease;
}
.modes__name { font: 400 clamp(15px, 1.25vw, 20px)/1.1 var(--mono); letter-spacing: -0.01em; color: var(--body); white-space: nowrap; }
.modes__gloss { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--caption); white-space: nowrap; }
.modes__btn:hover { background: var(--site-control-hover); }
.modes__btn:hover .modes__name { color: var(--heading); }
.modes__btn[aria-pressed="true"] { background: var(--site-mode-active); cursor: default; }
.modes__btn[aria-pressed="true"] .modes__name { color: var(--green); }
body.skin-operator .modes__btn[aria-pressed="true"] .modes__name { text-shadow: var(--glow-text); }
.modes__btn:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
body.skin-tty .modes__switch, body.skin-tty .modes__btn { border-radius: 0; }

.scene--modes .modes__thesis { display: block; }
.scene--modes .sub .modes__foot {
  margin-top: 14px; font: 500 12px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--caption);
}

/* ---------- the cut: once per switch, never on a loop ---------- */
html.motion body.skin-operator .modes__take.is-cut { animation: hard-cut var(--glitch-duration) steps(1, end) backwards; }
html.motion body.skin-operator .modes__take.is-cut .modes__prompt { animation: phosphor 1200ms ease-out var(--glitch-duration) backwards; }
html.motion body.skin-tty .modes__take.is-cut { animation: appear 260ms ease-out both; }

/* ---------- fit: the scene stays one screen ---------- */
@media (min-width: 561px) {
  .scene--modes .scene__body { padding: clamp(8px, 2vh, 44px) 0; }
}
@media (max-width: 900px) {
  .modes__stage { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .modes__take + .modes__take { padding-top: 24px; border-top: 1px solid var(--line); }
  .modes.is-live .modes__take + .modes__take { padding-top: 0; border-top: 0; }
  .modes.is-live .modes__take { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prompt" "matter" "options"; }
  .modes.is-live .modes__bar { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .modes__guide { grid-area: auto; text-align: center; }
  .modes.is-live .modes__guide { grid-area: 1 / 1; }
}
@media (max-width: 560px) {
  .modes__head { padding: 11px 14px; letter-spacing: 0.14em; font-size: 11px; }
  .modes__stage { padding: 16px 14px 18px; }
  .modes__take, .modes__matter { gap: 10px; }
  .modes__prompt { font-size: 17px; line-height: 1.32; }
  .modes__code { font-size: 15px; line-height: 1.5; }
  .modes__hint { padding: 11px 14px; font-size: 15.5px; }
  .modes__hint > span:first-child { margin-bottom: 6px; }
  .modes__options { gap: 6px; }
  .modes__options li { padding: 8px 12px; gap: 12px; font-size: 14.5px; line-height: 1.4; }
  .modes__options--short { grid-template-columns: 1fr 1fr; }
  .modes.is-live .modes__bar { gap: 12px; margin-top: 14px; }
  .modes__guide { font-size: 14.5px; max-width: none; }
  .scene--modes .sub .modes__foot { display: none; }
  .modes.is-live .modes__switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .modes__btn { justify-items: center; text-align: center; padding: 9px 8px 10px; }
  .modes__name { font-size: 15px; }
  .modes__gloss { font-size: 10px; letter-spacing: 0.12em; }
}