/* Per-screen layout (spec §4). Shared component classes live in components.css. */

/* --- entry / phase full-bleed screens --- */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.hero h1 {
  font: 700 28px/1.15 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.02em;
  margin: 0 2px 10px;
}
.hero p {
  font: 400 17px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 0 2px 14px;
}
.disclaimer {
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  padding: 14px 16px;
  font: 400 14px/1.45 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 6px 0 16px;
}
.phase-icon-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--phase-accent) 16%, transparent);
  color: var(--phase-accent);
  margin: 8px 2px 18px;
}
.phase-icon-lg i {
  width: 30px;
  height: 30px;
}
/* Quiz verdict (owner #6): glyph + Верно/Неверно on ONE line; a wrong verdict tints the glyph red
   (var(--system-red)) while a correct one keeps the default green --phase-accent. Only the glyph is
   tinted — the heading text stays neutral. */
.verdict-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}
.verdict-row .phase-icon-lg,
.verdict-row h1 {
  margin: 0;
}
.verdict-row.wrong {
  --phase-accent: var(--system-red);
}
/* entry hero head (D055): the monogram + course title on ONE line (mirrors the quiz .verdict-row / the
   offer .offer-head), with the monogram scaled down from its stacked 72px to sit inline. */
.hero-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 16px;
}
.hero-head .mono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--phase-accent), #0a84ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.hero-head .mono i {
  width: 26px;
  height: 26px;
}
.hero-head h1 {
  margin: 0;
}

/* --- map --- */
.progress-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 9px;
}
.p-count {
  font: 400 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.pips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 2px 18px;
}
.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface-grouped);
}
.pip.done {
  background: var(--phase-accent);
}
.pip.current {
  background: var(--phase-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-accent) 28%, transparent);
}
.bonus {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--text-tertiary);
  font: 500 13px/1 -apple-system, 'Onest', system-ui;
  padding: 15px;
  border: 1px dashed var(--separator);
  border-radius: var(--r-card);
  margin-top: 12px;
}
.bonus i {
  width: 16px;
  height: 16px;
}

/* --- concept --- */
.vid-acc {
  background: var(--surface-grouped);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
}
.vid-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  min-height: 50px;
}
.vid-head .vi {
  color: var(--phase-accent);
  display: flex;
}
.vid-head .vi i {
  width: 22px;
  height: 22px;
}
.vid-head .vlabel {
  flex: 1;
  font: 500 15px/1.2 -apple-system, 'Onest', system-ui;
}
.vid-head .vmeta {
  font: 400 12px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.vid-body {
  padding: 0 14px 16px;
}
/* video CTA — the reliable "Смотреть видео" row (owner smoke-#5 #1): an inline-SVG play that depends on
   nothing external (unlike the old green placeholder whose Lucide glyph rendered as an empty circle on a
   slow CDN). It is the COLLAPSED state of the inline player (.vplayer below) — one tap expands the video
   stage in place (D052), no popup. */
.vid-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: none;
  border-radius: 16px;
  background: var(--surface-grouped);
  cursor: pointer;
  margin: 0 0 18px;
  text-align: left;
  font: inherit;
}
.vid-cta .vic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--phase-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.vid-cta .vic svg {
  margin-left: 2px;
}
.vid-cta .vtext {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vid-cta .vlabel {
  font: 600 16px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.vid-cta .vmeta {
  font: 400 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.vid-cta .vchev {
  color: var(--text-tertiary);
  display: flex;
}
.vid-cta .vchev i {
  width: 18px;
  height: 18px;
}
/* Inline video player (D052) — replaces the full-bleed theater popup. The .vid-cta row above is the
   collapsed affordance; one tap adds .playing, which hides the row and expands .vstage IN PLACE (no
   popup). The content is portrait 9:16 (720x1280), so the revealed <video> is height-capped and centred
   (object-fit:contain → no crop). The <video preload="auto"> is mounted collapsed so it is already
   buffering before the tap (the lag fix). */
.vplayer {
  margin: 0 0 18px;
}
.vplayer .vid-cta {
  margin: 0;
}
.vplayer .vstage {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.vplayer.playing .vid-cta {
  display: none;
}
.vplayer.playing .vstage {
  max-height: 82vh;
}
.vplayer .vstage video {
  display: block;
  margin: 0 auto;
  height: 72vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
}
.vplayer .vfallback {
  display: none; /* shown only on a media error (.vplayer.errored), never on the happy path */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  background: var(--surface-grouped);
  border-radius: 16px;
}
.vplayer .vfallback i {
  width: 40px;
  height: 40px;
}
/* media error → reveal the "watch in chat" plate, drop the row + the broken <video>, in any state */
.vplayer.errored .vid-cta {
  display: none;
}
.vplayer.errored .vstage {
  max-height: none;
  overflow: visible;
}
.vplayer.errored .vstage video {
  display: none;
}
.vplayer.errored .vfallback {
  display: flex;
}
/* collapse control (D055): the .playing stage hides the .vid-cta row, so the only way back was to leave
   the screen. A "Свернуть видео" button under the player removes .playing (and pauses) in place; it shows
   only while playing and never in the errored state. Styled after the .icancel dismiss button. */
.vplayer .vid-collapse {
  display: none;
  width: 100%;
  height: 46px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--surface-grouped);
  color: var(--phase-accent);
  font: 600 15px/1 -apple-system, 'Onest', system-ui;
  cursor: pointer;
}
.vplayer .vid-collapse i {
  width: 17px;
  height: 17px;
}
.vplayer.playing .vid-collapse {
  display: flex;
}
.vplayer.errored .vid-collapse {
  display: none;
}
.def {
  font: 400 17px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 0 2px 22px;
}
.text-plate {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font: 500 14px/1.3 -apple-system, 'Onest', system-ui;
}
.text-plate i {
  width: 20px;
  height: 20px;
  color: var(--phase-accent);
  flex: none;
}
/* the start CTA lifted above the neutral plates (D055): accent-tinted + bold so «напиши наставнику»
   reads as the primary call, not muted body copy. The accent is mixed into the OPAQUE surface (not
   transparent) so the plate stays visible on the pure-black dark-mode body — a 12% tint over transparent
   composited to near-black there (onboarding accent = #007aff). */
.text-plate.accent {
  background: color-mix(in srgb, var(--phase-accent) 22%, var(--surface-grouped));
  color: var(--text);
  font-weight: 600;
}
/* first-step quote (D055): fills the dead gap between the lock note and the dock on the COLD entry only
   (it auto-disappears once profiling starts — the onboarding hero never renders it). margin-top:auto
   pushes it to the bottom of the .hero flex column, just above the dock. */
.hero-quote {
  margin: auto 2px 4px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--phase-accent);
  color: var(--text-secondary);
  font: 400 16px/1.5 -apple-system, 'Onest', system-ui;
}
.hero-quote .qauthor {
  display: block;
  margin-top: 8px;
  color: var(--text-tertiary);
  font: 400 13px/1.3 -apple-system, 'Onest', system-ui;
}

/* discussion chips ("Разобрать тему" — Class B → chat) */
.dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.dchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-grouped);
  color: var(--text);
  font: 500 14px/1 -apple-system, 'Onest', system-ui;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dchip i {
  width: 16px;
  height: 16px;
  color: var(--phase-accent);
}
.dchip.used {
  opacity: 0.4;
  pointer-events: none;
}
.dchip.used i {
  color: var(--text-tertiary);
}

/* neighbor (jump) rows */
.neigh-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.nrow {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface-grouped);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  min-height: 60px;
}
.nrow .ntext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nrow .nrel {
  font: 600 11px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nrow .nname {
  font: 400 16px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.nrow .chev {
  color: var(--text-tertiary);
}
.nrow .chev i {
  width: 18px;
  height: 18px;
}
.empty-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 32px 16px;
  font: 400 15px/1.4 -apple-system, 'Onest', system-ui;
}
.empty-note i {
  width: 32px;
  height: 32px;
}

/* --- longread --- */
.lr h2 {
  font: 600 26px/1.2 -apple-system, 'Onest', system-ui;
  margin: 0 2px 14px;
  letter-spacing: -0.02em;
}
.lr p {
  font: 400 17px/1.6 -apple-system, 'Onest', system-ui;
  color: var(--text);
  margin: 0 2px 15px;
  max-width: 34em;
}
.lr b {
  font-weight: 600;
}
.lr ul {
  margin: 0 2px 15px;
  padding-left: 22px;
}
.lr li {
  font: 400 17px/1.55 -apple-system, 'Onest', system-ui;
  margin-bottom: 6px;
}

/* --- quiz --- */
.q-kicker {
  font: 600 12px/1 -apple-system, 'Onest', system-ui;
  color: var(--system-purple);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-kicker i {
  width: 15px;
  height: 15px;
}
.q-text {
  font: 600 22px/1.3 -apple-system, 'Onest', system-ui;
  margin: 0 2px 18px;
  letter-spacing: -0.01em;
}
.opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 13px 14px;
  border-radius: var(--r-card);
  background: var(--surface-grouped);
  border: 1.5px solid transparent;
  cursor: pointer;
  font: 400 16px/1.3 -apple-system, 'Onest', system-ui;
}
.opt .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.opt.multi .radio {
  border-radius: 6px;
}
.opt.sel {
  border-color: var(--phase-accent);
  background: color-mix(in srgb, var(--phase-accent) 12%, transparent);
}
.opt.sel .radio {
  border-color: var(--phase-accent);
  background: var(--phase-accent);
}
.opt.sel .radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.opt.multi.sel .radio::after {
  border-radius: 1px;
}
.opt.correct {
  border-color: var(--system-green);
  background: color-mix(in srgb, var(--system-green) 14%, transparent);
}
.opt.wrong {
  border-color: var(--graphite);
  background: color-mix(in srgb, var(--graphite) 14%, transparent);
}
.q-result {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--r-card);
  display: flex;
  gap: 10px;
}
.q-result.ok {
  background: color-mix(in srgb, var(--system-green) 14%, transparent);
}
.q-result.no {
  background: color-mix(in srgb, var(--graphite) 14%, transparent);
}
.q-result i {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}
.q-result .qr-t {
  font: 500 15px/1.35 -apple-system, 'Onest', system-ui;
}
.q-result .chat {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: 3px;
}

/* --- offer card / settings --- */
.offer-card {
  background: var(--material-regular);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 8px 0 18px;
}
.offer-card .offer-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.offer-card .gift {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--phase-accent) 16%, transparent);
  color: var(--phase-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.offer-card .gift-label {
  font: 600 14px/1.1 -apple-system, 'Onest', system-ui;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--phase-accent);
}
.offer-card .gift i {
  width: 26px;
  height: 26px;
}
.offer-card .otext {
  font: 400 16px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text);
  white-space: pre-wrap;
}
.set-group {
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 18px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 48px;
  position: relative;
}
.set-row + .set-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 0.5px;
  background: var(--separator);
}
.set-row .k {
  flex: 1;
  font: 400 16px/1.2 -apple-system, 'Onest', system-ui;
}
.set-row .v {
  font: 400 15px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.set-row.tappable {
  cursor: pointer;
}
.set-row.danger .k {
  color: var(--system-red);
}

/* --- profile slots (onboarding) --- */
.slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
}
.slot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-grouped);
  border-radius: 12px;
  padding: 12px 14px;
}
.slot i {
  width: 18px;
  height: 18px;
  flex: none;
}
.slot.filled i {
  color: var(--phase-accent);
}
.slot.empty i {
  color: var(--text-tertiary);
}
.slot .sname {
  font: 400 15px/1.2 -apple-system, 'Onest', system-ui;
}