/*
 * Visual layer for the learning shell.
 *
 * Skin, not mode (§7.0-C): everything here is cosmetic — palette, character,
 * celebration level. Session length, difficulty and review schedule live in the
 * engine and are untouched by any of this.
 *
 * Budget of §7.3a is respected literally: CSS transitions only, no animation
 * engine, no sound, and the character is four static SVG states.
 */

:root {
  --ink: #1f2a24;
  --ink-soft: #55635b;
  --paper: #fbfaf5;
  --card: #ffffff;
  --line: #e2e6df;
  --accent: #2f7a52; /* notebook green (§7.0-A, gimnaziu) */
  --accent-soft: #e8f2ec;
  --warm: #d98324;
  --warm-soft: #fdf1e2;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(31, 42, 36, 0.06), 0 8px 24px rgba(31, 42, 36, 0.06);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* §7.0-A — liceu drops the character and cools the palette; the student can
   also choose this skin at any age (§7.0-C). */
body[data-skin="clean"],
body[data-skin="focus"] {
  --accent: #3a5a7a;
  --accent-soft: #e8eef4;
  --warm: #6b7280;
  --warm-soft: #f1f2f4;
  --paper: #fafafa;
}

body[data-skin="focus"] {
  --radius: 8px;
  --shadow: none;
}

* {
  box-sizing: border-box;
}

/* Author rules beat the user-agent's [hidden] { display: none }, so say it
   here once rather than tracking down every element that sets display. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}

.app {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  min-height: 100vh;
}

.screen {
  animation: rise 220ms ease-out;
}

/* The only motion in the product: a short rise as each micro-lesson block
   appears (§7.4). Disabled outright for anyone who asked for less motion. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

.hero {
  text-align: center;
  margin-bottom: 2rem;
}

.hero__title {
  font-size: 2rem;
  margin: 0.5rem 0 0.25rem;
}

.hero__sub,
.summary__line {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.guide {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.guide svg {
  width: 104px;
  height: 104px;
  transition: transform 200ms ease-out;
}

body[data-skin="clean"] .guide,
body[data-skin="focus"] .guide {
  display: none;
}

.button {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  background: var(--accent);
  color: #fff;
}

.button--primary:hover {
  background: #276645;
}

.button--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.button--flag {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: underline;
  width: auto;
  margin: 0.5rem auto 0;
}

.button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.streak {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.block__kicker,
.item__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.block__title {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

.read {
  background: var(--warm-soft);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.read__page {
  font-weight: 700;
  color: var(--warm);
}

.progressbar {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.progressbar__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 300ms ease-out;
}

.item__stem {
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

/* §7.0-A — checking your own answer against the key. Visually quieter than
   the outcome buttons below it: this is a tool, not the decision. */
.answer-check {
  margin: 0 0 1rem;
}

.answer-check__label {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.answer-check__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.answer-check__row .textinput {
  flex: 1 1 8rem;
  min-width: 0;
}

.answer-check__verdict {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.answer-check__verdict--match {
  color: var(--accent);
}

.answer-check__verdict--nomatch {
  color: var(--ink-soft);
}

.item__form {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

/* §4.6a — the drawing a statement depends on. Given a light card of its own so
   a scanned figure with a transparent or white background stays readable, and
   capped in height so a tall geometry drawing cannot push the answer form off
   the screen on a phone. */
.figures {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.figure {
  margin: 0;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.figure img {
  max-width: 100%;
  max-height: 45vh;
  height: auto;
}

/* A formula is a piece of the sentence, not an exhibit: no frame, no card, sat
   flush with the text it belongs to (§4.6a `kind`). It is an image only
   because the shell has no math typesetting of its own. */
.figure--formula {
  padding: 0;
  background: none;
  border: none;
  text-align: left;
}

.figure--formula img {
  max-height: 12vh;
}

.figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* K8 steps[] — a multi-skill item worked through step by step (§7.0-A's
   hint-ladder pedagogy, applied to a curriculum item's own procedure). */
.item__step-indicator {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0 0 0.25rem;
}

.item__step-instruction {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.hints {
  margin-bottom: 1.25rem;
}

.hints__list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.hints__list li {
  background: var(--warm-soft);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.option:hover {
  border-color: var(--accent);
}

.option input {
  accent-color: var(--accent);
  width: 1.1rem;
  height: 1.1rem;
}

.option--picked {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.textinput,
.select {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

.textinput:focus,
.select:focus,
.option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pairrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
}

.pairrow__label {
  padding: 0.5rem 0.25rem;
}

.orderlist {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.orderitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.orderitem__buttons button {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  font: inherit;
  cursor: pointer;
}

.feedback {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--accent-soft);
}

/* An error is a normal step, not an alarm (§7.2): warm, informative, never a
   red flash or a shaking animation. */
.feedback--wrong {
  background: var(--warm-soft);
}

.feedback__headline {
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.feedback__answer {
  margin: 0 0 0.5rem;
}

.feedback__evidence,
.feedback__review {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.feedback__review {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--warm);
}

.skills {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.skill {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.skill__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.skill__name {
  font-size: 0.95rem;
}

.skill__status {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.skill__bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.skill__fill {
  height: 100%;
  background: var(--accent);
  transition: width 400ms ease-out;
}

.skill__page {
  font-size: 0.85rem;
  color: var(--warm);
  margin-top: 0.4rem;
}

/* §7.0-A competition profile — a curated problem, not a generated item:
   technique tags instead of a skill_id, a soft time expectation instead of a
   progress bar, and three honest outcomes instead of a check/wrong verdict. */
.techniques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.timebox {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.outcome-actions {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.outcome-actions__partial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.outcome-actions__label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* §7.0-A theory-first extension (K16) — the primer read before a technique's
   problems: a plain paragraph, deliberately not styled like a card or a
   solution, since nothing here is being revealed after an attempt. */
.theory__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.25rem;
  white-space: pre-line;
}

/* §7.0-F — the didactic contract, made visible. The beats are not decoration
   on a paragraph: a nine-grader reading an undifferentiated wall has nothing
   telling them where to pause, and the one actionable line (how to recognise
   the technique) weighs exactly as much as everything around it. Each beat is
   a different kind of sentence, so each gets a different weight. */
.lesson {
  margin: 0 0 1.25rem;
}

.lesson__hook {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 1rem;
}

.lesson__beat {
  margin: 0 0 1.1rem;
}

.lesson__beat p,
.lesson__markers {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.lesson__beat-title {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

/* The idea itself carries the lesson; it gets the one block of colour. */
.lesson__beat--idea {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.lesson__beat--pitfall {
  background: var(--warm-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.lesson__beat--pitfall .lesson__beat-title {
  color: var(--warm);
}

.lesson__markers {
  padding-left: 1.1rem;
}

.lesson__markers li {
  margin-bottom: 0.35rem;
}

.lesson__reminder {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.lesson__takeaway {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.lesson__example-statement {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.lesson__try {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}

/* Numbered, because a derivation is a sequence of moves and the student has to
   be able to point at the one that lost them. */
.lesson__steps {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.lesson__steps li {
  margin-bottom: 0.6rem;
}

.lesson__check {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-bottom: 1.25rem;
}

.lesson__check-intro {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}

.lesson__check-question {
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.lesson__check-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.lesson__check-option {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.lesson__check-option--correct {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lesson__check-option--wrong {
  border-color: var(--warm);
}

.lesson__check-feedback {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

/* §4.6a — a rendered fraction sitting inside its own sentence, not exhibited
   in a card at the bottom of the screen where the sentence cannot reach it. */
.formula-inline {
  height: 1.15em;
  vertical-align: -0.28em;
  margin: 0 0.1em;
}

.solutions {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

.solution {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.solution__approach {
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.solution__insight,
.solution__commentary {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

.transparency {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}

.transparency summary {
  cursor: pointer;
  font-weight: 600;
}

.transparency p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.transparency__subhead {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* §11 P17 — the student panel: teachers, per-course progress/assignment,
   and the catalog of courses not yet enrolled in. */
.panelsection {
  margin-bottom: 1.5rem;
}

.panelsection__title {
  font-size: 1rem;
  margin: 0 0 0.6rem;
}

.panel-teachers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.panel-teachers li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
}

.coursecards {
  display: grid;
  gap: 0.75rem;
}

.coursecard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.coursecard__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.coursecard__stats {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0;
}

.coursecard__assignment {
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.coursecard__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.coursecard__actions .button {
  width: auto;
  margin: 0;
}

.skinpicker {
  display: block;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.skinpicker .select {
  width: auto;
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------- portals
   Login, teacher and admin pages (§DEVELOPMENT_PLAN_STAGE2 P10). Same tokens
   as the student shell, wider layout since these are tables and forms rather
   than one card at a time. */

.app--narrow {
  max-width: 24rem;
  padding-top: 4rem;
}

.app--wide {
  max-width: 64rem;
}

.authcard {
  text-align: left;
}

.field {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.field .textinput,
.field .select {
  margin-top: 0.35rem;
}

.field-error {
  color: #b3441f;
  font-size: 0.9rem;
  margin: -0.5rem 0 1rem;
}

.field-note {
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.field-note--success {
  border: 1px solid var(--accent);
}

.badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.portalheader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.portalheader .button {
  width: auto;
  margin: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.cardheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cardheader .button {
  width: auto;
  margin: 0;
}

.inlineform {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.inlineform .field {
  flex: 1 1 12rem;
  margin-bottom: 0;
}

.inlineform .button {
  width: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th,
.table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

.table th {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.muted {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.button--small {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.doctabs {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.tab {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-soft);
}

.tab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.doc {
  white-space: pre-wrap;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  max-height: 32rem;
  overflow-y: auto;
}

.mapview {
  max-height: 32rem;
  overflow-y: auto;
}

.mapview .field-note {
  margin: 0 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.mapunit {
  margin-bottom: 1.25rem;
}

.mapunit__title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.mapskill {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}

.mapskill__status {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mapview .field {
  margin: 1rem 0 0.5rem;
}

.checkgroup {
  border: 0;
  padding: 0;
  margin: 0;
  flex: 1 1 12rem;
}

.checkgroup legend {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0 0 0.3rem;
}

.checkgroup label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}

.teachersview .teacherrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.teacherrow .button {
  width: auto;
  margin: 0;
}

.teachersview .field-note {
  margin: 1rem 0 0;
}

.teachersview__add {
  margin-top: 1rem;
}

/* ------------------------------------------------------------- langswitch */

.langswitch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.langswitch__btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.langswitch__btn--active {
  background: var(--accent);
  color: #fff;
}

/* §4.11 — where the student is in a sitting. Sticky, so "where am I" is never
   a scroll away; one chip per step, primers then problems. The step on screen
   is filled, the live step is ringed, passed steps are tinted and carry their
   outcome, steps ahead are dashed and closed. */
.sitnav {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -2rem -1.25rem 1.25rem;
  padding: 0.75rem 1.25rem 0.55rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.sitnav__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sitnav__steps {
  list-style: none;
  margin: 0;
  padding: 7px 6px 4px 2px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sitnav__steps::-webkit-scrollbar {
  display: none;
}

.sitnav__sep {
  flex: none;
  width: 1px;
  height: 1.4rem;
  background: var(--line);
  margin: 0 0.2rem;
}

.sitnav__step {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: 2.1rem;
  min-width: 2.1rem;
  padding: 0 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.sitnav__step--task {
  width: 2.1rem;
  padding: 0;
}

/* Passed and upcoming primers stay short so the problems keep their place on a
   phone; the one on screen gets room for its name. */
.sitnav__label {
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sitnav__step.is-done {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.sitnav__step.is-live {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sitnav__step.is-viewing .sitnav__label {
  max-width: 8.5rem;
}

.sitnav__step.is-viewing {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sitnav__step.is-locked {
  background: transparent;
  border-style: dashed;
  opacity: 0.5;
  cursor: default;
}

.sitnav__step:not(.is-locked):not(.is-viewing):hover {
  border-color: var(--accent);
}

/* A worked problem's outcome, as a small badge on its chip. */
.sitnav__step.is-solved::after,
.sitnav__step.is-partial::after,
.sitnav__step.is-gaveup::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--paper);
  font-size: 0.6rem;
  line-height: 0.75rem;
  text-align: center;
  color: #fff;
}

.sitnav__step.is-solved::after {
  content: "✓";
  background: var(--accent);
}

.sitnav__step.is-partial::after {
  content: "½";
  background: var(--warm);
}

.sitnav__step.is-gaveup::after {
  content: "–";
  background: var(--ink-soft);
}

.sitnav__arrow {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.sitnav__arrow:not([disabled]):hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sitnav__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
}

.sitnav__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.sitnav__position {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--line);
  border-radius: 999px;
  padding: 0 0.45rem;
}

.sitnav__where--back .sitnav__text {
  color: var(--warm);
  font-weight: 600;
}

.sitnav__link {
  border: none;
  background: none;
  padding: 0.15rem 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sitnav__link:last-child {
  margin-left: auto;
}

.sitnav__link--strong {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  text-decoration: none;
}

.sitnav__step:focus-visible,
.sitnav__arrow:focus-visible,
.sitnav__link:focus-visible,
.jstep__head:focus-visible,
.jentry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A problem already worked on, looked at again. */
.review__outcome {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  margin: 0 0 1rem;
}

.review__outcome--partial {
  background: var(--warm-soft);
  color: var(--warm);
}

.review__outcome--gaveup,
.review__outcome--none {
  background: var(--line);
  color: var(--ink-soft);
}

.hints__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

/* §4.11 — the path through the course. */
.journey__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--warm-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.journey__resume-text {
  display: grid;
  font-size: 0.9rem;
}

.journey__resume .button {
  width: auto;
  margin: 0;
  flex: none;
}

.journey__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.jstat {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}

.jstat__value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.jstat__value small {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.jstat__label {
  font-size: 0.78rem;
  margin-top: 0.2rem;
  line-height: 1.25;
}

.jstat__sub {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* One segment per technique, in path order: the whole course at a glance. */
.journey__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  height: 8px;
  margin-bottom: 1rem;
  align-items: center;
}

.jstrip__seg {
  height: 8px;
  border-radius: 2px;
  background: var(--line);
}

.jstrip__seg--read {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.jstrip__seg--working {
  background: var(--warm);
}

.jstrip__seg--solved {
  background: var(--accent);
}

.jstrip__seg--here {
  height: 14px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink);
}

.jpath {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  position: relative;
}

/* The line the dots sit on. */
.jpath::before {
  content: "";
  position: absolute;
  left: calc(0.4rem + 0.95rem - 1px);
  top: 1.2rem;
  bottom: 1.2rem;
  width: 2px;
  background: var(--line);
}

.jstep {
  position: relative;
  margin-bottom: 0.2rem;
}

.jstep__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.4rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.jstep__head:hover {
  background: var(--card);
}

.jstep__dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.jstep--read .jstep__dot {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.jstep--working .jstep__dot {
  border-color: var(--warm);
  background: var(--warm-soft);
  color: var(--warm);
}

.jstep--solved .jstep__dot {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.jstep--here .jstep__dot {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--accent);
}

.jstep__main {
  flex: 1;
  min-width: 0;
  display: grid;
}

.jstep__name {
  font-size: 0.95rem;
  font-weight: 600;
}

.jstep--ahead .jstep__name {
  color: var(--ink-soft);
  font-weight: 500;
}

.jstep__meta {
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.jstep__here {
  display: inline-block;
  vertical-align: 0.1em;
  margin-left: 0.3rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jstep__badge {
  flex: none;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.jstep--solved .jstep__badge {
  color: var(--accent);
  font-weight: 600;
}

.jstep--working .jstep__badge {
  color: var(--warm);
  font-weight: 600;
}

.jstep__body {
  margin: 0.1rem 0 0.75rem 3.05rem;
  padding: 0.75rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.jstep__title {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.jstep__read {
  display: inline-block;
  width: auto;
  margin: 0 0 0.4rem;
}

.jstep__note {
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.jstep__subhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.8rem 0 0.4rem;
}

.jentries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.jentry {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.jentry:hover {
  border-color: var(--accent);
}

.jmark {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--line);
}

.jmark--solved {
  background: var(--accent);
}

.jmark--partial {
  background: var(--warm);
}

.jmark--gaveup {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-soft);
}

.jentry__main {
  flex: 1;
  min-width: 0;
  display: grid;
}

.jentry__preview {
  font-size: 0.88rem;
}

.jentry__meta {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.jentry__chevron {
  flex: none;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1.2;
}

.jhistory__date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1rem 0 0.45rem;
}

.jhistory__date:first-child {
  margin-top: 0.25rem;
}

/* §7.0-G — the same navigator, carried to every profile. */
.sitnav__group {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0 0.1rem;
}

.sitnav__step.is-wrong::after,
.sitnav__step.is-answered::after,
.sitnav__step.is-skipped::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--paper);
  font-size: 0.6rem;
  line-height: 0.75rem;
  text-align: center;
  color: #fff;
}

/* A wrong answer is a normal step (§7.2): marked, not alarmed. */
.sitnav__step.is-wrong::after {
  content: "×";
  background: var(--ink-soft);
}

/* A mock-exam answer: given, not graded — nothing is revealed until the end. */
.sitnav__step.is-answered::after {
  content: "•";
  background: var(--accent);
}

.sitnav__step.is-skipped::after {
  content: "";
  background: var(--line);
}

/* An item already answered, looked at again. */
.lookback {
  margin: 0 0 1rem;
}

.lookback__answer {
  margin: 0 0 0.5rem;
}

.lookback__answer span {
  color: var(--ink-soft);
}

.lookback__verdict {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin: 0 0 0.5rem;
  background: var(--accent-soft);
  color: var(--accent);
}

.lookback__verdict--partial {
  background: var(--warm-soft);
  color: var(--warm);
}

.lookback__verdict--wrong {
  background: var(--line);
  color: var(--ink-soft);
}

.lookback__evidence {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  margin: 0.75rem 0;
}

.lookback__steps {
  padding-left: 1.2rem;
  margin: 0 0 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.lookback__step-title {
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.3rem;
}

/* A curriculum path is grouped by the textbook's units. */
.jpath__unit {
  position: relative;
  z-index: 1;
  background: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.9rem 0 0.35rem;
}

.jpath__unit:first-child {
  padding-top: 0.2rem;
}

.jmark--wrong {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ink-soft);
}

/* §7.0-G — the same bar when something is opened from "Drumul meu": the way
   back to the path, where this is in the list it came from, its neighbours. */
.sitnav__bar--trail {
  gap: 0.5rem;
}

.sitnav__crumb {
  flex: none;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.sitnav__crumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sitnav__trail-where {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.sitnav__trail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}

.sitnav__trail-where .sitnav__position {
  flex: none;
  white-space: nowrap;
}