/* ==========================================================================
   Learn: Skills (Mastery.dc.html), the weekly review, the course player
   (Course.dc.html) and the level moment (Milestone.dc.html, light since
   2026-10-22: direction A, CertificatePage.dc.html).
   Built on app.css tokens and classes; no colors, shadows, radii or motion
   of its own. Every feature stylesheet loads on every page, so each rule is
   scoped to a learn page root (.learn-skills, .learn-review, .learn-course,
   .level-moment) or carries the learn- prefix.
   ========================================================================== */

/* Shared: the Substack line and a question with its choices */

.learn-substack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

.learn-substack-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  font-weight: 500;
}

.learn-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.learn-question-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.learn-question-prompt {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.learn-options {
  display: flex;
  flex-direction: column;
}

.learn-option {
  padding: 8px 0;
}

.learn-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--navy-800);
}

.learn-explain {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-900);
}

/* Skills: header, achievements, stats, map, legend, up next, rail */

/* The achievements (2026-10-23, owner decision; the design canvas's Achievements.dc.html): a white card right under
   the header, its head (the H2, a 13/20 line, the mono count at the right) over one tile per level and the Full
   Program, four in a row from 1024 px, two from 560, one on phones (measured in headless Chrome at 360 px: two compact
   tiles leave 'Intermediate' and the tick bar no room). Tiles in a row share one height. A complete tile is the
   navy-800 ground with the 48 x 1 gold rule (app.css .gold-rule; gold only there, a dark ground), white bars and
   name, ink-300 lines; the others white with a 1px ink-200 border and outlined bars. */
.learn-skills .ach {
  gap: 24px;
  margin-top: 32px;
  padding: 32px;
}

.learn-skills .ach-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.learn-skills .ach-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.learn-skills .ach-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.learn-skills .ach-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 288px;
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.learn-skills .ach-tile-done {
  border-color: var(--navy-800);
  background: var(--navy-800);
}

/* The tier bars: 8 x 22, gap 4, at the logo's angle; the level's rungs filled, the others a 1px outline. */
.learn-skills .ach-bars {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
}

.learn-skills .ach-bar {
  display: block;
  flex: none;
  width: 8px;
  height: 22px;
  border: 1px solid var(--ink-400);
  transform: var(--slant);
}

.learn-skills .ach-bar-done {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

/* The Full Program's: 6 x 16 inside a 1px frame, padded 3 by 6, as Programs' switch draws them. The frame is 24 tall;
   its -1 px margins keep it on the 22 px row of the other tiles' bars, so its micro and name start where theirs do. */
.learn-skills .ach-bars-full {
  margin-block: -1px;
  padding: 3px 6px;
  border: 1px solid var(--ink-400);
}

.learn-skills .ach-bars-full .ach-bar {
  width: 6px;
  height: 16px;
}

.learn-skills .ach-tile-done .ach-bar {
  border-color: var(--white-40);
}

.learn-skills .ach-tile-done .ach-bar-done {
  border-color: var(--white);
  background: var(--white);
}

.learn-skills .ach-tile-done .ach-bars-full {
  border-color: var(--white-40);
}

.learn-skills .ach-tile .gold-rule {
  margin-top: 20px;
}

/* The white tiles' micro sits where a complete tile's does: the rule's 20 + 1 and its 14 below. */
.learn-skills .ach-micro {
  margin-top: 35px;
}

/* In a row of tiles (from 560 px) the micro keeps two lines' room, its words on the lower line, so every name in the
   row shares one line whether or not a neighbour's micro wraps: 'Certificado de finalización' takes two lines at
   every four-column width, 'Certificate of completion' and 'Listo · Lo emite Carlos' at 1024 and 560 (measured
   2026-10-23). One tile a row on phones needs no room. */
@media (min-width: 560px) {
  .learn-skills .ach-micro {
    display: flex;
    align-items: flex-end;
    min-height: 32px;
  }
}

.learn-skills .ach-tile-done .ach-micro {
  margin-top: 14px;
}

.learn-skills .ach-name {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  color: var(--navy-800);
}

.learn-skills .ach-tile-done .ach-name {
  color: var(--white);
}

.learn-skills .ach-line {
  margin-top: 4px;
}

/* A white tile's line right under the name (the Full Program's, a level not started) sits 8 below it, as the canvas
   draws the Full Program's; a complete tile's date line keeps its 4. */
.learn-skills .ach-tile:not(.ach-tile-done) .ach-name + .ach-line {
  margin-top: 8px;
}

/* The tick bar's marks at 20 x 8 (gap 4) in a tile; on a tile narrower than its 188 px they narrow together, so the
   bar never wraps or leaves the tile. */
.learn-skills .ach-tile .pips {
  flex-wrap: nowrap;
  margin-top: 12px;
}

.learn-skills .ach-tile .pip {
  flex: 0 1 20px;
  width: 20px;
  min-width: 0;
}

.learn-skills .ach-tile .pips + .ach-line {
  margin-top: 8px;
}

.learn-skills .ach-tile-done .ach-id {
  color: var(--ink-300);
}

/* The distinction (private to this page; complete tiles only): 13/20 white weight 500 with the 16 px check. */
.learn-skills .ach-tile-done .ach-distinction {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--white);
}

/* The foot at the tile's bottom, 12 at least under what comes before it and outside its 44 px target, as the canvas
   draws it: the label centred in a full 44, the focus ring around the target only. The before-the-portal note takes
   the same 44 px box, so its line sits on the links' line in a row. */
.learn-skills .ach-foot {
  align-self: flex-start;
  margin-top: auto;
}

.learn-skills .ach-tile > :has(+ .ach-foot) {
  margin-bottom: 12px;
}

.learn-skills .ach-note {
  display: flex;
  align-items: center;
  min-height: var(--target);
}

/* Forced colors (as the certificate's tier bars and the level mark, app.css): the filled bars and the held ticks are
   backgrounds, which the browser drops while the outlines stay, so the marks keep their own drawing in the system's
   text color: a filled bar or a held tick CanvasText, an open bar or a booked tick a CanvasText outline on Canvas, a
   tick to book GrayText. The dark tile's selectors are listed too, so its white and white-40 bars never outrank this.
   The complete tiles' gold rule is a background too: it keeps its line in CanvasText, as the certificate's rules do,
   so a complete tile still reads apart from a white one when both grounds turn to Canvas. */
@media (forced-colors: active) {
  .learn-skills .ach-bar,
  .learn-skills .ach-tile-done .ach-bar {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: Canvas;
  }

  .learn-skills .ach-bar-done,
  .learn-skills .ach-tile-done .ach-bar-done {
    background: CanvasText;
  }

  .learn-skills .ach-tile .pip {
    forced-color-adjust: none;
    background: GrayText;
  }

  .learn-skills .ach-tile .pip-held {
    background: CanvasText;
  }

  .learn-skills .ach-tile .pip-booked {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .learn-skills .ach-tile .gold-rule {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* Four stats since Studied counts (2026-10-19): Confirmed, Studied, Study weeks, Review due; in their own card under
   the achievements since 2026-10-23, as the canvas shows them. */
.learn-skills .skills-summary {
  margin-top: 32px;
  padding: 24px 32px;
}

.learn-skills .skills-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
}

.learn-skills .skills-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}

.learn-skills .skills-stat dd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.learn-skills .skills-body {
  margin-top: 48px;
}

.learn-skills .skills-main,
.learn-skills .skills-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.learn-skills .skills-rail {
  gap: 24px;
}

.learn-skills .skill-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.learn-skills .skill-steps {
  display: flex;
  margin: 0 0 -6px -8px;
}

.learn-skills .skill-step {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: var(--target);
  padding: 6px 0;
  border-radius: var(--radius-control);
  text-decoration: none;
}

.learn-skills .skill-step:hover {
  background: var(--ink-50);
}

.learn-skills .skill-step:active {
  transform: scale(0.98);
}

.learn-skills .track-mastered .skill-step:hover {
  background: var(--white-8);
}

.learn-skills .skills-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 24px;
}

.learn-skills .up-next {
  gap: 8px;
  margin-top: 32px;
  padding-bottom: 12px;
}

.learn-skills .up-next-list {
  display: flex;
  flex-direction: column;
}

.learn-skills .up-next-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px 0;
  border-top: 1px solid var(--ink-200);
}

.learn-skills .up-next-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.learn-skills .up-next-title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ink-900);
}

.learn-skills .review-due-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.learn-skills .review-due {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
}

.learn-skills .weeks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.learn-skills .weeks-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Step and levels sheets */

.learn-skills .sheet-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.learn-skills .sheet-body {
  gap: 0;
  padding-top: 8px;
}

.learn-skills .step-sheet-state {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.learn-skills .step-sheet-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.learn-skills .step-sheet-state-line,
.learn-skills .step-sheet-where {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.learn-skills .step-sheet .voice {
  margin-top: 16px;
}

.learn-skills .step-sheet .inset {
  margin-top: 24px;
}

.learn-skills .step-sheet-next {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-900);
}

.learn-skills .step-sheet-taught {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-200);
}

.learn-skills .step-sheet-where {
  margin-top: 4px;
}

.learn-skills .step-sheet-lesson {
  margin-top: 8px;
}

/* A lesson's title inside a quiet button (the step sheet's lesson link, the course's 'Done · Next: 1.2 ...'): its
   words wrap rather than run off a phone, in either language. Measured at 320 px in IBM Plex Sans Medium 15 px:
   'Hecho · Siguiente: 1.2 Reading a factor test' needs 321 px of 288, 'Lesson 1.4 · A universe you can defend' 291. */
.learn-skills .step-sheet-lesson,
.learn-course .lesson-done .btn-quiet {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.learn-skills .step-sheet-action {
  display: flex;
  margin-top: 24px;
}

.learn-skills .levels-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.learn-skills .levels-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
}

.learn-skills .levels-row-mastered {
  border-color: var(--navy-800);
  background: var(--navy-800);
}

.learn-skills .levels-row-mastered .level {
  color: var(--white);
}

.learn-skills .levels-steps {
  display: flex;
  gap: 8px;
}

.learn-skills .levels-list + .text-small {
  margin-top: 12px;
}

.learn-skills .levels-evidence {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-200);
}

.learn-skills .levels-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.learn-skills .levels-evidence-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.learn-skills .levels-evidence-text {
  display: flex;
  flex-direction: column;
}

/* Weekly review */

.learn-review {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 760px;
}

.learn-review .review-form,
.learn-review .review-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learn-review .review-result {
  gap: 8px;
}

.learn-review .review-result-prompt {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.learn-review .review-result-link {
  align-self: flex-start;
}

/* Course player and waitlist */

.learn-course {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.learn-course .course-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.learn-course .course-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.learn-course .lesson-video {
  display: flex;
  flex-direction: column;
  gap: 16px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ink-900);
  color: var(--white);
}

.learn-course .lesson-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 0;
}

.learn-course .lesson-player {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-control);
  background: var(--black);
}

.learn-course .lesson-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--white-40);
  border-radius: var(--radius-control);
  color: var(--white);
}

/* 'Guess first': a white island inside the dark frame. */
.learn-course .guess {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--white);
  color: var(--ink-700);
}

.learn-course .guess-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Inside the dark frame, app.css turns micro labels light; the white island takes them back. */
.learn-course .guess .micro {
  color: var(--ink-500);
}

.learn-course .guess-prompt {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.learn-course .guess-made {
  display: none;
}

.learn-course .guess:has(.choice-input:checked) .guess-open {
  display: none;
}

.learn-course .guess:has(.choice-input:checked) .guess-made {
  display: inline;
}

.learn-course .lesson-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 32px;
}

.learn-course .lesson-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.learn-course .quick-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  min-height: var(--target);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-500);
  list-style: none;
}

.learn-course .quick-check-row::-webkit-details-marker {
  display: none;
}

.learn-course summary.quick-check-row {
  align-self: flex-start;
}

.learn-course .quick-check-start {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-800);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--ink-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.learn-course summary.quick-check-row:hover .quick-check-start {
  text-decoration-color: currentColor;
}

.learn-course .quick-check[open] .quick-check-start {
  display: none;
}

.learn-course .quick-check-passed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--navy-800);
}

.learn-course .quick-check-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-top: 8px;
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.learn-course .quick-check-form .learn-question {
  align-self: stretch;
}

.learn-course .exercise {
  margin-top: 24px;
}

.learn-course .exercise-text {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
}

.learn-course .exercise-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learn-course .self-check {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.learn-course .self-check-items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
}

/* The field follows the 'Submit as' choice; without :has() all three stay visible and usable. */
.learn-course .exercise-form:has(.segmented-input:checked) .exercise-field {
  display: none;
}

.learn-course .exercise-form:has(#exercise-kind-link:checked) .exercise-field-link,
.learn-course .exercise-form:has(#exercise-kind-file:checked) .exercise-field-file,
.learn-course .exercise-form:has(#exercise-kind-text:checked) .exercise-field-text {
  display: block;
}

.learn-course .exercise-submit {
  margin-top: 8px;
}

.learn-course .exercise-state {
  gap: 8px 16px;
}

.learn-course .exercise-verdict {
  font-weight: 600;
  color: var(--navy-800);
}

.learn-course .lesson-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 24px;
  margin-top: 16px;
}

.learn-course .lesson-done-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--navy-800);
}

.learn-course .course-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.learn-course .course-outline-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.learn-course .course-outline-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 400;
}

.learn-course .outline-lessons {
  display: flex;
  flex-direction: column;
  margin: 0 -12px;
}

.learn-course .outline-lesson {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  padding: 12px;
  border-radius: var(--radius-control);
  text-decoration: none;
}

.learn-course .outline-lesson:hover,
.learn-course .outline-lesson[aria-current="page"] {
  background: var(--ink-50);
}

.learn-course .outline-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  color: var(--navy-800);
}

/* Lessons still to come lean like the other progress marks: an outline, navy when current. */
.learn-course .outline-dot {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink-400);
  transform: var(--slant);
}

.learn-course .outline-mark.is-current .outline-dot {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

.learn-course .outline-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.learn-course .outline-title {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-700);
}

.learn-course .outline-lesson[aria-current="page"] .outline-title {
  font-weight: 600;
  color: var(--ink-900);
}

.learn-course .outline-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.learn-course .course-outline-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.learn-course .in-production {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.learn-course .in-production-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-500);
}

.learn-course.course-waitlist {
  max-width: 760px;
}

.learn-course .waitlist-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* The level moment (2026-10-22, owner decision: direction A): the light ground, its own slim white bar and its own
   footer. Navy and ink only: no dark ground and no gold on this page. The certificate is app.css's .cert-doc. */

body:has(.level-moment) > .site-footer {
  display: none;
}

.level-moment {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-700);
}

.level-moment .moment-bar {
  border-bottom: 1px solid var(--ink-200);
  background: var(--white);
}

.level-moment .moment-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--bar-h);
}

.level-moment .moment-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.level-moment .moment-brand img {
  display: block;
  width: auto;
  height: 24px;
}

.level-moment .moment-bar-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-moment .moment-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 80px;
}

.level-moment .moment-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.level-moment .moment-line {
  font-size: 17px;
  line-height: 28px;
  color: var(--ink-700);
}

.level-moment .moment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

/* The certificate's card: white, the ink-200 hairline, the preview over its two actions. */
.level-moment .moment-cert {
  display: flex;
  flex: 999 1 640px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.level-moment .moment-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.level-moment .moment-aside {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.level-moment .moment-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.level-moment .moment-modules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-700);
}

/* The next level, made light: white with the full navy-900 hairline (the emphasis card), an outline button. */
.level-moment .next-level {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--navy-900);
  border-radius: var(--radius-card);
  background: var(--white);
}

.level-moment .next-level-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.level-moment .next-level-line {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-700);
}

.level-moment .next-level-prices {
  display: flex;
  flex-direction: column;
}

.level-moment .price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.level-moment .moment-footer {
  border-top: 1px solid var(--ink-200);
  background: var(--white);
}

.level-moment .moment-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: 32px;
  padding-bottom: 40px;
}

.level-moment .moment-legal {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Responsive */

/* Under 1280 px the achievements tighten (measured 2026-10-23): at 1024 four tiles padded 24 in a card padded 32 left
   'Intermediate' (162 px at 28/34) 160 px; with 24, 16 and 20 a tile keeps 178 px (174 beside a classic scrollbar),
   and at 560 two tiles keep 192, the tick bar's 188 at full size. */
@media (max-width: 1279px) {
  .learn-skills .ach {
    padding: 24px;
  }

  .learn-skills .ach-grid {
    gap: 16px;
  }

  .learn-skills .ach-tile {
    padding: 20px;
  }
}

@media (max-width: 1023px) {
  .learn-skills .ach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learn-skills .skills-summary {
    padding: 24px;
  }

  .learn-skills .skills-rail {
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .learn-skills .ach,
  .learn-skills .skills-summary {
    margin-top: 24px;
  }

  .learn-skills .skills-body {
    margin-top: 32px;
  }

  .learn-skills .skills-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }

  .learn-skills .skill-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Phones: one row per track, name and level beside the four steps. */
  .learn-skills .skill-tile {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding: 16px;
  }

  .learn-skills .skill-tile .track-head {
    flex: 1;
    min-width: 0;
  }

  .learn-skills .skill-steps {
    margin: 0 -8px -6px 0;
  }

  .learn-skills .up-next-row {
    flex-wrap: wrap;
  }

  .learn-course .lesson-video {
    aspect-ratio: auto;
    padding: 16px;
  }

  .learn-course .lesson-screen {
    min-height: 180px;
  }

  .learn-course .guess {
    padding: 16px;
  }

  .level-moment .moment-main {
    padding-top: 32px;
    padding-bottom: 48px;
    gap: 32px;
  }

  .level-moment .moment-cert {
    padding: 16px;
  }
}

/* Phones (under 560 px): one tile a row, as tall as its content. Two compact tiles (16 padding, the name at 22/28)
   would leave each 110 px at 360: 'Intermediate' needs 129 and the tick bar 188 (measured 2026-10-23). */
@media (max-width: 559px) {
  .learn-skills .ach-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .learn-skills .ach-tile {
    min-height: 0;
  }
}

/* Print (Save as PDF, 2026-10-22, direction A): exactly one A4 landscape page holding only the certificate, edge to
   edge, white, its navy marks kept. render() links every stylesheet on every page and has no per-page one, so the
   sheet's size and zero margin go on a named page: only the certificate's frame on this page asks for it (page:
   certificate), and every other page of the portal, Close out's preview of the same certificate included, prints
   as it did. */
@page certificate {
  size: A4 landscape;
  margin: 0;
}

@media print {
  body:has(.level-moment) {
    display: block;
    min-height: 0;
    background: var(--white);
  }

  .level-moment .moment-bar,
  .level-moment .moment-head,
  .level-moment .moment-links,
  .level-moment .moment-aside,
  .level-moment .moment-substack,
  .level-moment .moment-footer,
  body:has(.level-moment) .skip-link,
  body:has(.level-moment) .toast {
    display: none !important;
  }

  .level-moment,
  .level-moment .moment-main,
  .level-moment .moment-row,
  .level-moment .moment-cert {
    display: block;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--white);
  }

  .level-moment .cert-doc-frame {
    page: certificate;
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;
    overflow: hidden;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}