/* ASM://PROTOCOL — landing, scene «Языки» (#s-langs), right after the title card.
   The positioning line and what can be learned right now: four languages as a billing,
   the Systems track under them, Go in plans, one entry button.
   Builds on kit.css tokens and landing.css (.scene, .h2, .sub, .cta, .btn; keyframes rise,
   phosphor, hard-cut, appear). No own JS: landing.js reveals [data-reveal]/[data-cut] once,
   as in every scene; without JS and with prefers-reduced-motion everything is visible at once. */

@media (min-width: 561px) {
  .scene--langs .scene__body { padding: clamp(8px, 2.2vh, 28px) 0; }
}

/* ---------- the line: the question, then the answer ---------- */
.langs__title { display: grid; justify-items: center; gap: clamp(6px, 1.3vh, 14px); }
.langs__q {
  display: block;
  font: 300 clamp(18px, min(2vw, 3.4vh), 30px)/1.25 var(--mono); letter-spacing: -0.02em; color: var(--caption);
}
.langs__a {
  display: block;
  font: 300 clamp(29px, min(4.6vw, 7vh), 68px)/1.06 var(--mono); letter-spacing: -0.035em; color: var(--green);
}
body.skin-operator .langs__q { text-shadow: none; }
body.skin-operator .langs__a { text-shadow: 0 0 1px rgb(var(--fx-glow-rgb) / 0.5), 0 0 22px rgb(var(--fx-glow-rgb) / 0.28); }

/* ---------- the billing: what can be learned right now ---------- */
.langs { margin-top: clamp(16px, calc(5vh - 12px), 52px); }
.langs__head, .langs__next {
  display: flex; justify-content: space-between; align-items: center; gap: 6px 18px;
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--caption);
}
/* the label sits on the rule, like the scene mark: ■ now ———— volume */
.langs__head { padding-bottom: clamp(4px, 0.9vh, 10px); }
.langs__head span { white-space: nowrap; }
.langs__head span:first-child { flex: 1; display: flex; align-items: center; gap: 14px; color: var(--body); }
.langs__head span:first-child::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--line-2); }
/* status squares: filled — open now, hollow — in plans */
.langs__head span:first-child::before, .langs__next span:first-child::before {
  content: ""; flex: none; display: inline-block; width: 7px; height: 7px; box-sizing: border-box;
}
.langs__head span:first-child::before { background: var(--green); }
body.skin-operator .langs__head span:first-child::before { box-shadow: 0 0 8px rgb(var(--fx-glow-rgb) / 0.55); }
.langs__next span:first-child { display: inline-flex; align-items: center; gap: 14px; }
.langs__next span:first-child::before { border: 1px solid currentColor; }

/* one set of columns for every row: name · what is studied · volume */
.langs__list {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: clamp(20px, 2.8vw, 44px);
}
.lang {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding: clamp(6px, calc(2.2vh - 8px), 14px) 0; border-bottom: 1px solid var(--line);
}
.lang__name {
  font: 300 clamp(24px, min(2.9vw, 4.7vh), 42px)/1.08 var(--mono); letter-spacing: -0.03em; color: var(--heading);
  white-space: nowrap;
}
.lang__tag {
  margin-left: 0.5em; vertical-align: 0.95em;
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--caption);
}
.lang__what {
  font: 300 clamp(15px, min(1.3vw, 2.3vh), 18px)/1.4 var(--sans); color: var(--body); text-wrap: pretty;
}
.lang__count { align-self: center; display: grid; justify-items: end; gap: 4px; text-align: right; }
.lang__count b { font: 400 clamp(15px, min(1.2vw, 2.1vh), 18px)/1.1 var(--mono); color: var(--heading); white-space: nowrap; }
.lang__count span {
  font: 500 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--caption); white-space: nowrap;
}

/* the Systems track runs under the languages, not beside them */
.lang--track { border-top: 1px solid var(--line-2); margin-top: -1px; }
.lang--track .lang__name { color: var(--body); }

.langs__next { flex-wrap: wrap; padding-top: clamp(8px, 1.4vh, 14px); color: var(--dimtext); }

.scene--langs .scene__foot .sub { max-width: 64ch; color: var(--body); }
.scene--langs .cta { margin-top: clamp(12px, calc(3vh - 8px), 28px); }

/* ---------- montage: the answer cuts in after the question, the billing follows ---------- */
html.js.motion body.skin-operator .scene--langs.is-on .langs__a[data-cut] {
  animation-delay: 520ms, calc(520ms + var(--glitch-duration));
}
html.js.motion body.skin-tty .scene--langs.is-on .langs__a[data-cut] { animation-delay: 420ms; }
html.js.motion .scene--langs.is-on :is(.langs, .scene__foot) [data-reveal] {
  animation-delay: calc(var(--i, 0) * 90ms + 540ms);
}

/* ---------- tty: calm, flat; --sans is the mono face here, so topics run a size smaller ---------- */
body.skin-tty .langs__a { text-shadow: none; }
body.skin-tty .lang__what { font-size: clamp(13px, min(1.1vw, 2vh), 16px); }

/* ---------- narrower screens: name and volume on one line, topics under them ---------- */
@media (max-width: 900px) {
  .langs__list { display: block; }
  .lang {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name count" "what what";
    row-gap: 4px; column-gap: 16px;
  }
  .lang__name { grid-area: name; }
  .lang__count { grid-area: count; align-self: baseline; display: flex; align-items: baseline; gap: 12px; }
  .lang__what { grid-area: what; }
}

@media (max-width: 560px) {
  .langs__title { gap: 8px; }
  .langs__q { font-size: 17px; }
  .langs__a { font-size: 29px; }
  .langs { margin-top: 20px; }
  .langs__head { padding-bottom: 8px; }
  .langs__head span:last-child { display: none; }
  .lang { padding: 8px 0 9px; row-gap: 2px; }
  .lang__name { font-size: 24px; }
  .lang__tag { margin-left: 0.4em; font-size: 10px; letter-spacing: 0.12em; }
  .lang__count b { font-size: 14px; }
  .lang__count span { display: none; }
  .lang__what { font-size: 14px; line-height: 1.4; }
  .langs__next { padding-top: 9px; letter-spacing: 0.14em; }
  .langs__next span:last-child { display: none; }
  .scene--langs .scene__foot .sub { font-size: 15px; }
  .scene--langs .cta { margin-top: 14px; }
}

/* small phones (375 px): keep every topic on one line so the scene stays one screen */
@media (max-width: 380px) {
  .lang__what { font-size: 13px; }
  .lang__name { font-size: 23px; }
}