/* Edited by Ali Falakah. */

@font-face {
  font-family: "Readex Pro Local";
  src: url("./assets/ReadexPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* One scoped token system: everything the site draws lives under .study-app. */
.study-app {
  --petrol: #0B4447;
  --teal: #0E7C7B;
  --mint: #6FBDB3;
  --ivory: #FFFDFA;
  --sand: #EEE8DC;
  --peach: #E8B59A;
  --paper: #FFFFFF;
  --ink: var(--petrol);
  --muted: #527172;
  --alert: #A8462C;
  --good: #2F6D53;

  --line: color-mix(in srgb, var(--petrol) 13%, transparent);
  --line-soft: color-mix(in srgb, var(--petrol) 8%, transparent);

  --shadow-card: 0 1px 1px color-mix(in srgb, var(--petrol) 5%, transparent),
                 0 14px 30px -24px color-mix(in srgb, var(--petrol) 55%, transparent);
  --shadow-tile: inset 0 1px 0 rgba(255, 255, 255, .85),
                 0 1px 2px color-mix(in srgb, var(--petrol) 8%, transparent),
                 0 8px 16px -10px color-mix(in srgb, var(--petrol) 40%, transparent);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .9),
                 0 2px 3px color-mix(in srgb, var(--petrol) 9%, transparent),
                 0 16px 26px -14px color-mix(in srgb, var(--petrol) 42%, transparent);

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2, .8, .25, 1);
  --t-fade: 280ms;
  --t-move: 460ms;
  --t-flip: 350ms;

  box-sizing: border-box;
  display: block;
  min-block-size: 100vh;
  max-inline-size: 82rem;
  margin-inline: auto;
  padding: clamp(.75rem, 3vw, 1.6rem) clamp(.9rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
  font-family: "Readex Pro Local", system-ui, "Segoe UI", sans-serif;
  font-synthesis: none;
  font-size: clamp(1rem, 2.6vw, 1.06rem);
  line-height: 1.75;
  color: var(--ink);
  background:
    radial-gradient(110% 55% at 88% -6%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 62%),
    radial-gradient(85% 45% at 4% 1%, color-mix(in srgb, var(--peach) 15%, transparent), transparent 58%),
    var(--ivory);
}

@media (prefers-reduced-motion: reduce) {
  .study-app { --t-fade: 0ms; --t-move: 0ms; --t-flip: 0ms; }
}

/* The explicit toggle wins over the media query, in both directions. */
.study-app[data-motion="off"] { --t-fade: 0ms; --t-move: 0ms; --t-flip: 0ms; }
.study-app[data-motion="on"] { --t-fade: 280ms; --t-move: 460ms; --t-flip: 350ms; }

/* One entrance per route change, never on a setting change inside a view. */
@keyframes s-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

.study-app[data-motion="on"] .s-enter > * { animation: s-in var(--t-fade) var(--ease) both; }

.study-app *,
.study-app *::before,
.study-app *::after { box-sizing: border-box; }

.study-app p, .study-app h1, .study-app h2, .study-app h3, .study-app h4,
.study-app ol, .study-app ul, .study-app dl, .study-app dd, .study-app pre,
.study-app figure, .study-app blockquote { margin: 0; padding: 0; }

.study-app ol, .study-app ul { list-style: none; }

.study-app :focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 16%, transparent);
}

.study-app code, .study-app pre { font-family: var(--mono); }
.study-app [hidden] { display: none !important; }
.study-app img, .study-app svg { max-inline-size: 100%; }

.s-noscript {
  max-inline-size: 44rem;
  margin: 1rem auto;
  padding: .9rem 1.1rem;
  font-family: "Readex Pro Local", system-ui, sans-serif;
  line-height: 1.7;
  background: #FDF1E8;
  border: 1px solid #E8B59A;
  border-radius: 18px;
}

/* ---------- skip link ---------- */

.study-app .s-skip {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.study-app .s-skip:focus-visible {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  display: inline-block;
  min-block-size: 44px;
  padding: .6rem 1rem;
  color: var(--petrol);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.study-app .s-live {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- header ---------- */

.study-app .s-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem clamp(.6rem, 2.5vw, 1.4rem);
  padding-block-end: .9rem;
  border-block-end: 1px solid var(--line-soft);
}

.study-app .s-top__brand { display: inline-flex; align-items: center; min-block-size: 44px; }
.study-app .s-top__logo { block-size: clamp(24px, 6vw, 32px); inline-size: auto; }

.study-app .s-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .25rem;
  margin-inline-start: auto;
  background: color-mix(in srgb, var(--sand) 40%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 16px;
}

.study-app .s-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: .4rem .95rem;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 13px;
  transition: color var(--t-fade) var(--ease), background var(--t-fade) var(--ease), box-shadow var(--t-fade) var(--ease);
}

.study-app .s-nav__link:hover { color: var(--petrol); background: color-mix(in srgb, var(--mint) 14%, transparent); }

.study-app .s-nav__link[aria-current="page"] {
  color: var(--petrol);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
}

/* On a phone the three sections take their own full row under the logo. */
@media (max-width: 599px) {
  .study-app .s-nav { inline-size: 100%; margin-inline-start: 0; justify-content: space-between; }
  .study-app .s-nav__link { flex: 1 1 auto; }
}

.study-app .s-top__tag { flex: 1 1 10rem; font-size: .88rem; color: var(--muted); }

.study-app .s-tools { position: relative; }

.study-app .s-tools__summary {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: .3rem .8rem;
  font-size: .88rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.study-app .s-tools__summary:hover { color: var(--petrol); background: color-mix(in srgb, var(--mint) 12%, var(--paper)); }

.study-app .s-tools__body {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem .8rem;
  margin-block-start: .4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

@media (min-width: 600px) {
  .study-app .s-tools[open] .s-tools__body {
    position: absolute;
    inset-inline-end: 0;
    z-index: 3;
    min-inline-size: max-content;
  }
}

.study-app .s-tools__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: .6rem;
  font-size: .88rem;
  color: var(--teal);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.study-app .s-tools__link:hover { text-decoration: underline; }

.study-app .s-lang {
  min-block-size: 44px;
  padding-inline: 1rem;
  font: inherit;
  font-size: .88rem;
  color: var(--petrol);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.study-app .s-lang:hover { background: color-mix(in srgb, var(--mint) 12%, var(--paper)); }

.study-app .s-switch {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-block-size: 44px;
  padding-inline: .3rem;
  font-size: .85rem;
  color: var(--muted);
  cursor: pointer;
}

.study-app .s-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.study-app .s-switch__track {
  inline-size: 40px;
  block-size: 24px;
  padding: 2px;
  display: inline-flex;
  border-radius: 999px;
  background: color-mix(in srgb, var(--petrol) 16%, var(--paper));
  border: 1px solid var(--line);
  transition: background var(--t-fade) var(--ease);
}

.study-app .s-switch__dot {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: translate var(--t-fade) var(--ease);
}

.study-app .s-switch input:checked + .s-switch__track { background: var(--mint); }
.study-app .s-switch input:checked + .s-switch__track .s-switch__dot { translate: 16px 0; }
.study-app[dir="rtl"] .s-switch input:checked + .s-switch__track .s-switch__dot { translate: -16px 0; }

.study-app .s-switch input:focus-visible + .s-switch__track {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 16%, transparent);
}

/* ---------- main + footer ---------- */

.study-app .s-main { display: block; padding-block-start: clamp(1rem, 3.5vw, 2rem); }
.study-app .s-main:focus-visible { outline: none; box-shadow: none; }
.study-app .s-boot { color: var(--muted); }

.study-app .s-foot {
  display: grid;
  gap: .4rem;
  max-inline-size: 44rem;
  margin-block-start: clamp(2.5rem, 8vw, 4.5rem);
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line-soft);
}

.study-app .s-foot__note { font-size: .92rem; color: color-mix(in srgb, var(--petrol) 82%, var(--muted)); }
.study-app .s-foot__local { font-size: .82rem; color: var(--muted); text-wrap: pretty; }

/* ---------- shared prose and headings ---------- */

.study-app .s-h1 {
  font-size: clamp(1.7rem, 6.5vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.study-app .s-h2 {
  max-inline-size: 34rem;
  font-size: clamp(1.32rem, 4.6vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.study-app .s-h3 { font-size: clamp(1.05rem, 3.2vw, 1.22rem); line-height: 1.45; }

.study-app .s-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--teal);
}

.study-app .s-eyebrow__sep { color: color-mix(in srgb, var(--teal) 45%, transparent); }

.study-app .s-lead {
  max-inline-size: 38rem;
  font-size: clamp(1.02rem, 2.9vw, 1.16rem);
  color: var(--muted);
  text-wrap: pretty;
}

.study-app .s-p {
  max-inline-size: 38rem;
  font-size: clamp(1rem, 2.7vw, 1.08rem);
  color: color-mix(in srgb, var(--petrol) 82%, var(--muted));
  text-wrap: pretty;
}

.study-app .s-prose { display: grid; gap: .85rem; }

.study-app .s-p code, .study-app .s-lead code, .study-app .s-aside code,
.study-app .s-analogy code, .study-app .s-tip code, .study-app .s-explain code {
  font-size: .92em;
  color: var(--petrol);
  background: color-mix(in srgb, var(--mint) 20%, var(--paper));
  border-radius: 6px;
  padding: .05rem .32rem;
}

.study-app .s-muted { font-size: .85rem; color: var(--muted); text-wrap: pretty; }
.study-app .s-num { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */

.study-app .s-btn, .study-app .lab-btn {
  min-block-size: 44px;
  padding: .4rem 1.1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--petrol);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background var(--t-fade) var(--ease), box-shadow var(--t-fade) var(--ease);
}

.study-app .s-btn:hover:not(:disabled),
.study-app .lab-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mint) 14%, var(--paper)); }

.study-app .s-btn--primary, .study-app .lab-btn--primary {
  color: var(--ivory);
  background: var(--teal);
  border-color: color-mix(in srgb, var(--petrol) 30%, transparent);
}

.study-app .s-btn--primary:hover:not(:disabled),
.study-app .lab-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--petrol) 22%, var(--teal)); }

.study-app .s-btn--quiet, .study-app .lab-btn--quiet {
  font-size: .88rem;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}

.study-app .s-btn--danger { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 32%, transparent); }
.study-app .s-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--alert) 8%, var(--paper)); }

.study-app .s-btn:disabled, .study-app .lab-btn:disabled { opacity: .45; cursor: not-allowed; }

.study-app .s-btnrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.study-app .s-btn[aria-pressed="true"], .study-app .lab-btn[aria-pressed="true"] {
  color: var(--petrol);
  background: color-mix(in srgb, var(--peach) 26%, var(--paper));
  border-color: color-mix(in srgb, var(--peach) 58%, transparent);
}

/* ---------- segmented groups ---------- */

.study-app .s-seg, .study-app .lab-seg {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .3rem;
  background: color-mix(in srgb, var(--sand) 40%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 16px;
  justify-self: start;
}

.study-app .s-seg__btn, .study-app .lab-seg__btn {
  min-block-size: 44px;
  padding: .3rem .9rem;
  font: inherit;
  font-size: .9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .05rem;
  transition: background var(--t-fade) var(--ease), color var(--t-fade) var(--ease);
}

.study-app .s-seg__btn:hover, .study-app .lab-seg__btn:hover { background: color-mix(in srgb, var(--mint) 14%, transparent); }

.study-app .s-seg__btn[aria-pressed="true"], .study-app .lab-seg__btn[aria-pressed="true"] {
  color: var(--petrol);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
}

.study-app .s-seg__sub { font-size: .72rem; color: var(--muted); }

/* ---------- fields ---------- */

.study-app .s-field, .study-app .lab-field { display: grid; gap: .25rem; min-inline-size: 0; }

.study-app .s-field__label, .study-app .lab-field__label {
  font-size: .86rem;
  color: var(--muted);
}

.study-app .s-input, .study-app .lab-input, .study-app .s-select, .study-app .lab-select {
  min-block-size: 44px;
  padding: .35rem .6rem;
  font: inherit;
  font-size: 1.02rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--sand) 24%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--petrol) 22%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--petrol) 7%, transparent);
}

.study-app .lab-input { inline-size: 5.4rem; font-size: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.study-app .s-select, .study-app .lab-select { min-inline-size: 11rem; }

.study-app .s-input[aria-invalid="true"], .study-app .lab-input[aria-invalid="true"] {
  border-color: var(--alert);
  background: color-mix(in srgb, var(--alert) 6%, var(--paper));
}

.study-app .s-error, .study-app .lab-error { display: block; font-size: .8rem; line-height: 1.45; color: var(--alert); }
.study-app .s-error:empty, .study-app .lab-error:empty { display: none; }

/* ---------- library: subject choice and the lecture list ---------- */

.study-app .s-section { display: grid; gap: clamp(.9rem, 3vw, 1.3rem); margin-block-start: clamp(2rem, 6vw, 3.2rem); }

.study-app .s-pagehead { display: grid; gap: .35rem; max-inline-size: 46rem; }

.study-app[data-view="home"] .s-seg { margin-block-start: clamp(.8rem, 2.5vw, 1.1rem); }

.study-app .s-lib {
  display: grid;
  gap: clamp(.7rem, 2.4vw, 1rem);
  max-inline-size: 100%;
  margin-block-start: clamp(1rem, 3vw, 1.5rem);
}

@media (min-width: 840px) {
  .study-app .s-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.study-app .s-lib__item {
  display: grid;
  gap: .35rem;
  align-content: start;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-fade) var(--ease);
}

.study-app .s-lib__item:hover { box-shadow: var(--shadow-lift); }

.study-app .s-lib__title {
  font-size: clamp(1.08rem, 3.4vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.study-app .s-lib__intro {
  font-size: .94rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--petrol) 80%, var(--muted));
  text-wrap: pretty;
}

.study-app .s-lib__meta { font-size: .8rem; color: var(--muted); }
.study-app .s-lib__item .s-btnrow { margin-block-start: .45rem; }

.study-app .s-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .55rem;
  font-size: .76rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--sand) 40%, var(--paper));
  color: var(--muted);
}

.study-app .s-badge[data-status="needs-review"] { color: var(--alert); background: color-mix(in srgb, var(--alert) 8%, var(--paper)); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }
.study-app .s-badge[data-status="good-start"] { color: var(--petrol); background: color-mix(in srgb, var(--peach) 24%, var(--paper)); border-color: color-mix(in srgb, var(--peach) 52%, transparent); }
.study-app .s-badge[data-status="good-practice"] { color: var(--good); background: color-mix(in srgb, var(--mint) 22%, var(--paper)); border-color: color-mix(in srgb, var(--mint) 50%, transparent); }
.study-app .s-badge[data-status="untested"] { color: var(--muted); }

.study-app .s-tally { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }

.study-app .s-notice {
  max-inline-size: 44rem;
  padding: .8rem 1.05rem;
  font-size: .92rem;
  background: color-mix(in srgb, var(--peach) 18%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--peach) 45%, transparent);
  border-radius: var(--radius-md);
  text-wrap: pretty;
}

.study-app .s-notice--plain { background: color-mix(in srgb, var(--sand) 34%, var(--paper)); border-color: var(--line); }

/* ---------- lesson: one centred reading column ---------- */
.study-app .s-subjects__compact { display: none; }
@media (max-width: 600px) {
  .study-app .s-subjects__wide { display: none; }
  .study-app .s-subjects__compact { display: grid; }
}

/* The reading column is centred as a whole, with the contents list next to it rather
   than a narrow column pushed to one side. */
.study-app .s-read {
  display: grid;
  gap: clamp(1.2rem, 4vw, 2.6rem);
  grid-template-columns: minmax(0, 70ch);
  justify-content: center;
  align-items: start;
  margin-block-start: clamp(.6rem, 2.5vw, 1.2rem);
}

.study-app .s-read__main { display: grid; gap: clamp(1.2rem, 4vw, 2rem); min-inline-size: 0; }

.study-app .s-contents { display: grid; gap: .25rem; align-content: start; }
.study-app .s-contents__head { font-size: .74rem; letter-spacing: .05em; color: var(--muted); }
.study-app .s-contents__list { display: grid; gap: .05rem; }

.study-app .s-contents__link {
  display: block;
  padding: .45rem .65rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-wrap: pretty;
  transition: color var(--t-fade) var(--ease), background var(--t-fade) var(--ease);
}

.study-app .s-contents__link:hover { color: var(--petrol); background: color-mix(in srgb, var(--mint) 12%, transparent); }

.study-app .s-contents__link[aria-current="true"] {
  color: var(--petrol);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}

/* Wide screen: contents beside the text. Narrow screen: the same ideas as one jump
   control above the text, and the column is not rendered at all. */
@media (min-width: 1100px) {
  .study-app .s-read { grid-template-columns: minmax(0, 70ch) minmax(11rem, 14rem); }
  .study-app .s-contents { position: sticky; inset-block-start: 1rem; max-block-size: calc(100vh - 2rem); overflow-y: auto; }
  .study-app .s-idea__jump { display: none; }
}

@media (max-width: 1099px) {
  .study-app .s-contents { display: none; }
}

.study-app .s-flow { display: grid; gap: clamp(2.4rem, 7vw, 4.2rem); min-inline-size: 0; }

.study-app .s-analogy {
  padding: .8rem 1.05rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--petrol) 88%, var(--muted));
  background: color-mix(in srgb, var(--mint) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--mint) 38%, transparent);
  border-radius: var(--radius-md);
  text-wrap: pretty;
}

.study-app .s-analogy__label { display: block; font-size: .76rem; color: var(--teal); margin-block-end: .2rem; }

.study-app .s-tip {
  padding: .75rem 1.05rem;
  font-size: .95rem;
  background: color-mix(in srgb, var(--peach) 16%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--peach) 42%, transparent);
  border-radius: var(--radius-md);
  text-wrap: pretty;
}

.study-app .s-tip__label { display: block; font-size: .76rem; color: #8A4F30; margin-block-end: .2rem; }

.study-app .s-example {
  max-inline-size: 100%;
  padding: .7rem clamp(.7rem, 3vw, 1.1rem) .85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  min-inline-size: 0;
}

.study-app .s-example__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .76rem;
  color: var(--muted);
}

.study-app .s-example__pre {
  margin-block-start: .35rem;
  max-inline-size: 100%;
  overflow-x: auto;
  font-size: clamp(.94rem, 3.2vw, 1.08rem);
  line-height: 1.8;
  color: var(--petrol);
  white-space: pre-wrap;
}

.study-app .s-example--plain .s-example__pre { font-family: "Readex Pro Local", system-ui, sans-serif; white-space: pre-wrap; }

/* ---------- vocabulary rows and the card toggle ---------- */

.study-app .s-vocab { display: grid; gap: .4rem; }
.study-app .s-vocab__head { font-size: .86rem; color: var(--muted); }
.study-app .s-vocab__list { display: grid; gap: .1rem; }

.study-app .s-vocab__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .8rem;
  padding-block: .55rem;
  border-block-end: 1px solid var(--line-soft);
}

.study-app .s-vocab__row:last-child { border-block-end: none; }
.study-app .s-vocab__body { display: grid; gap: .12rem; flex: 1 1 12rem; min-inline-size: 0; }

.study-app .s-vocab__en {
  justify-self: start;
  max-inline-size: 100%;
  padding: .05rem .45rem;
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--ivory);
  background: var(--teal);
  border-radius: 7px;
  overflow-wrap: anywhere;
}

.study-app .s-vocab__ar { font-size: .98rem; line-height: 1.6; text-wrap: pretty; }
.study-app .s-vocab__def { font-size: .86rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.study-app .s-vocab__add { flex: 0 0 auto; font-size: .82rem; padding-inline: .85rem; }

.study-app .s-details {
  max-inline-size: 100%;
  padding: .2rem 1rem;
  background: color-mix(in srgb, var(--sand) 22%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.study-app .s-details__summary { min-block-size: 44px; display: flex; align-items: center; font-size: .94rem; cursor: pointer; }
.study-app .s-details__body { padding-block: .3rem .9rem; display: grid; gap: .5rem; }

.study-app .s-coverage { display: grid; gap: .3rem; }

.study-app .s-coverage__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  padding-block: .35rem;
  font-size: .88rem;
  border-block-end: 1px solid var(--line-soft);
}

.study-app .s-coverage__row:last-child { border-block-end: none; }
.study-app .s-coverage__pages { font-family: var(--mono); color: var(--petrol); }
.study-app .s-coverage__kind { font-size: .76rem; color: var(--muted); }
.study-app .s-coverage__note { color: var(--muted); }

/* ---------- quiz ---------- */

.study-app .s-quiz { display: grid; gap: clamp(.9rem, 3vw, 1.3rem); max-inline-size: 46rem; }

.study-app .s-quiz__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .85rem;
  color: var(--muted);
}

.study-app .s-quiz__timer { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.study-app .s-quiz__timer[data-low="true"] { color: var(--alert); }

.study-app .s-quiz__card {
  display: grid;
  gap: clamp(.8rem, 2.5vw, 1.15rem);
  padding: clamp(1rem, 3.5vw, 1.8rem);
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--paper) 92%, transparent), transparent 72%),
    linear-gradient(172deg, color-mix(in srgb, var(--sand) 30%, var(--paper)), color-mix(in srgb, var(--sand) 58%, var(--paper)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-inline-size: 0;
  position: relative;
}

.study-app .s-quiz__meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; }
.study-app .s-quiz__prompt { font-size: clamp(1.04rem, 3vw, 1.18rem); line-height: 1.7; text-wrap: pretty; }

.study-app .s-choices { display: grid; gap: .45rem; }

.study-app .s-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-block-size: 44px;
  padding: .6rem .85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fade) var(--ease), border-color var(--t-fade) var(--ease);
}

.study-app .s-choice:hover { background: color-mix(in srgb, var(--mint) 10%, var(--paper)); }
.study-app .s-choice input { margin-block-start: .45rem; inline-size: 18px; block-size: 18px; accent-color: var(--teal); flex: 0 0 auto; }
.study-app .s-choice__text { font-size: .99rem; line-height: 1.65; text-wrap: pretty; }
.study-app .s-choice[data-mark="correct"] { background: color-mix(in srgb, var(--mint) 20%, var(--paper)); border-color: color-mix(in srgb, var(--mint) 55%, transparent); }
.study-app .s-choice[data-mark="wrong"] { background: color-mix(in srgb, var(--alert) 8%, var(--paper)); border-color: color-mix(in srgb, var(--alert) 34%, transparent); }
.study-app .s-choice__flag { margin-inline-start: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }

.study-app .s-order { display: grid; gap: .4rem; counter-reset: s-order; }

.study-app .s-order__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem .45rem .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.study-app[dir="rtl"] .s-order__row { padding: .45rem .75rem .45rem .5rem; }
.study-app .s-order__n { font-family: var(--mono); font-size: .8rem; color: var(--teal); min-inline-size: 1.4rem; }
.study-app .s-order__text { flex: 1 1 auto; font-size: .97rem; line-height: 1.6; text-wrap: pretty; }
.study-app .s-order__tools { display: flex; gap: .25rem; flex: 0 0 auto; }

.study-app .s-iconbtn {
  min-inline-size: 44px;
  min-block-size: 44px;
  font: inherit;
  font-size: 1rem;
  color: var(--petrol);
  background: color-mix(in srgb, var(--sand) 34%, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.study-app .s-iconbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--mint) 16%, var(--paper)); }
.study-app .s-iconbtn:disabled { opacity: .4; cursor: not-allowed; }

.study-app .s-match { display: grid; gap: .5rem; }

.study-app .s-match__row {
  display: grid;
  gap: .35rem;
  padding: .6rem .85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 560px) {
  .study-app .s-match__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: .6rem; }
}

.study-app .s-match__term { font-size: .98rem; line-height: 1.6; }
.study-app .s-match__row[data-mark="correct"] { background: color-mix(in srgb, var(--mint) 18%, var(--paper)); border-color: color-mix(in srgb, var(--mint) 52%, transparent); }
.study-app .s-match__row[data-mark="wrong"] { background: color-mix(in srgb, var(--alert) 8%, var(--paper)); border-color: color-mix(in srgb, var(--alert) 32%, transparent); }

.study-app .s-verdict {
  display: grid;
  gap: .5rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--paper);
  text-wrap: pretty;
}

.study-app .s-verdict[data-tone="correct"] { background: color-mix(in srgb, var(--mint) 16%, var(--paper)); border-color: color-mix(in srgb, var(--mint) 48%, transparent); }
.study-app .s-verdict[data-tone="wrong"] { background: color-mix(in srgb, var(--alert) 7%, var(--paper)); border-color: color-mix(in srgb, var(--alert) 30%, transparent); }
.study-app .s-verdict__head { font-size: 1rem; }
.study-app .s-explain { font-size: .95rem; color: color-mix(in srgb, var(--petrol) 84%, var(--muted)); }
.study-app .s-solution { font-size: .95rem; }
.study-app .s-solution__list { display: grid; gap: .2rem; margin-block-start: .25rem; font-size: .92rem; color: var(--muted); }

/* ---------- results and review ---------- */

.study-app .s-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.2rem;
  padding: clamp(.9rem, 3vw, 1.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.study-app .s-score__big { font-size: clamp(1.8rem, 6vw, 2.6rem); font-variant-numeric: tabular-nums; }
.study-app .s-score__label { font-size: .9rem; color: var(--muted); }

.study-app .s-rows { display: grid; gap: .4rem; max-inline-size: 46rem; }

.study-app .s-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  padding: .6rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.study-app .s-row__title { flex: 1 1 12rem; font-size: .96rem; line-height: 1.55; text-wrap: pretty; }
.study-app .s-row__meta { font-size: .8rem; color: var(--muted); }
.study-app .s-row__links { display: flex; flex-wrap: wrap; gap: .3rem; }

.study-app .s-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding: .2rem .6rem;
  font-size: .84rem;
  color: var(--teal);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  border-radius: 999px;
}

.study-app .s-link:hover { background: color-mix(in srgb, var(--mint) 14%, var(--paper)); }

.study-app .s-review { display: grid; gap: .6rem; }

.study-app .s-wrong {
  display: grid;
  gap: .4rem;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.study-app .s-wrong__prompt { font-size: .98rem; line-height: 1.65; text-wrap: pretty; }

/* ---------- labs (mounted by labs.js) ---------- */

.study-app .lab {
  display: grid;
  gap: clamp(.8rem, 2.6vw, 1.3rem);
  padding: clamp(1rem, 3.5vw, 1.7rem) clamp(.85rem, 3vw, 1.5rem);
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--paper) 92%, transparent), transparent 72%),
    linear-gradient(172deg, color-mix(in srgb, var(--sand) 30%, var(--paper)), color-mix(in srgb, var(--sand) 60%, var(--paper)));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-inline-size: 0;
  max-inline-size: 46rem;
}

.study-app .lab__head { font-size: .84rem; letter-spacing: .02em; color: var(--muted); text-wrap: pretty; }
.study-app .lab__sub { font-size: .78rem; color: var(--muted); }
.study-app .lab__controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem clamp(.65rem, 3vw, 1.3rem); }
.study-app .lab__stage { display: grid; gap: clamp(.7rem, 2.4vw, 1.1rem); min-inline-size: 0; }
.study-app .lab__foot { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.study-app .lab__note { min-block-size: 1.6rem; font-size: .93rem; color: color-mix(in srgb, var(--petrol) 80%, var(--muted)); text-wrap: pretty; }
.study-app .lab__aside { font-size: .84rem; color: var(--muted); text-wrap: pretty; }
.study-app .lab-toggles { display: flex; flex-wrap: wrap; gap: .4rem; }

.study-app .lab-net { display: grid; justify-items: center; }
.study-app .lab-net__svg { inline-size: 100%; max-inline-size: 22rem; block-size: auto; }
.study-app .lab-net__spine { stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; }
.study-app .lab-net__edge { stroke: color-mix(in srgb, var(--petrol) 45%, transparent); stroke-width: 2; }
.study-app .lab-net__spine.is-cut, .study-app .lab-net__edge.is-cut { stroke: var(--alert); stroke-dasharray: 5 5; }
.study-app .lab-net__cut { stroke: var(--alert); stroke-width: 2.5; stroke-linecap: round; }
.study-app .lab-net__node { fill: var(--paper); stroke: var(--teal); stroke-width: 2; transition: fill var(--t-fade) var(--ease), stroke var(--t-fade) var(--ease); }
.study-app .lab-net__node.is-off { fill: color-mix(in srgb, var(--alert) 12%, var(--paper)); stroke: var(--alert); }
.study-app .lab-net__num { fill: var(--petrol); font-size: 12px; font-family: var(--mono); text-anchor: middle; }
.study-app .lab-net__hub { fill: color-mix(in srgb, var(--mint) 30%, var(--paper)); stroke: var(--teal); stroke-width: 2; }
.study-app .lab-net__hub.is-off { fill: color-mix(in srgb, var(--alert) 12%, var(--paper)); stroke: var(--alert); }
.study-app .lab-net__hubtext { fill: var(--petrol); font-size: 11px; font-family: var(--mono); text-anchor: middle; }

.study-app .lab-net__list { display: flex; flex-wrap: wrap; gap: .35rem; }

.study-app .lab-net__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  font-size: .8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.study-app .lab-net__item.is-off { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 34%, transparent); background: color-mix(in srgb, var(--alert) 7%, var(--paper)); }
.study-app .lab-net__itemstate { font-size: .74rem; color: inherit; opacity: .8; }

.study-app .lab-layers { display: grid; gap: .25rem; }

.study-app .lab-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  padding: .45rem .8rem;
  font-size: .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background var(--t-fade) var(--ease), border-color var(--t-fade) var(--ease);
}

.study-app .lab-layer[data-state="done"] { background: color-mix(in srgb, var(--mint) 12%, var(--paper)); }
.study-app .lab-layer[data-state="active"] { background: color-mix(in srgb, var(--mint) 24%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 42%, transparent); box-shadow: var(--shadow-card); }
.study-app .lab-layer__n { font-family: var(--mono); font-size: .78rem; color: var(--teal); min-inline-size: 1rem; }
.study-app .lab-layer__name { flex: 1 1 8rem; }
.study-app .lab-layer__unit { font-size: .78rem; color: var(--muted); }

.study-app .lab-wrap { display: flex; justify-content: center; padding-block: .3rem; }

.study-app .lab-wrap__box {
  display: inline-flex;
  flex-direction: column;
  gap: .2rem;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sand) 34%, var(--paper));
}

.study-app .lab-wrap__box--segment { background: color-mix(in srgb, var(--sand) 56%, var(--paper)); }
.study-app .lab-wrap__box--packet { background: color-mix(in srgb, var(--mint) 20%, var(--paper)); }
.study-app .lab-wrap__box--frame { background: color-mix(in srgb, var(--peach) 22%, var(--paper)); }
.study-app .lab-wrap__box--bits { background: color-mix(in srgb, var(--petrol) 12%, var(--paper)); }
.study-app .lab-wrap__tag { font-size: .68rem; color: var(--muted); }

.study-app .lab-wrap__core {
  display: inline-block;
  padding: .3rem .6rem;
  font-size: .82rem;
  color: var(--ivory);
  background: var(--petrol);
  border-radius: 8px;
}

.study-app .lab-map { display: grid; gap: .25rem; }

.study-app .lab-map__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  padding: .35rem .8rem;
  font-size: .86rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.study-app .lab-map__name { flex: 1 1 8rem; }
.study-app .lab-map__osi { font-family: var(--mono); font-size: .76rem; color: var(--muted); }

.study-app .lab-flowline { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.study-app .lab-flowline__item { display: inline-flex; align-items: center; gap: .3rem; }
.study-app .lab-flowline__arrow { color: color-mix(in srgb, var(--petrol) 35%, transparent); }

.study-app .lab-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  min-block-size: 44px;
  padding: .3rem .75rem;
  font: inherit;
  font-size: .88rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.study-app .lab-chip[aria-pressed="true"] { color: var(--petrol); background: color-mix(in srgb, var(--mint) 22%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 40%, transparent); box-shadow: var(--shadow-card); }
.study-app .lab-chip__en { font-family: var(--mono); font-size: .68rem; color: var(--muted); }

.study-app .lab-branch, .study-app .lab-edges, .study-app .lab-steps, .study-app .lab-code { display: grid; gap: .3rem; }

.study-app .lab-branch__row, .study-app .lab-edges__row, .study-app .lab-steps__row, .study-app .lab-code__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  padding: .4rem .8rem;
  font-size: .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background var(--t-fade) var(--ease);
}

.study-app .lab-branch__row[data-state="taken"] { background: color-mix(in srgb, var(--mint) 22%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.study-app .lab-branch__test, .study-app .lab-edges__value, .study-app .lab-steps__code { font-size: .88rem; color: var(--petrol); }
.study-app .lab-branch__label, .study-app .lab-edges__text { color: var(--muted); font-size: .86rem; }
.study-app .lab-steps__n { font-family: var(--mono); font-size: .76rem; color: var(--teal); }
.study-app .lab-code__line[data-state="done"] { background: color-mix(in srgb, var(--sand) 34%, var(--paper)); }
.study-app .lab-code__line[data-state="active"] { background: color-mix(in srgb, var(--mint) 22%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 40%, transparent); }

.study-app .lab-details { padding: .2rem 1rem; background: color-mix(in srgb, var(--paper) 70%, transparent); border: 1px solid var(--line); border-radius: var(--radius-md); }
.study-app .lab-details__summary { min-block-size: 44px; display: flex; align-items: center; font-size: .9rem; cursor: pointer; }
.study-app .lab-details__body { display: grid; gap: .6rem; padding-block: .3rem .9rem; }

.study-app .lab-chairs { display: flex; flex-wrap: wrap; gap: .3rem; }

.study-app .lab-chair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  font-family: var(--mono);
  font-size: .82rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: background var(--t-fade) var(--ease);
}

.study-app .lab-chair.is-done { background: color-mix(in srgb, var(--mint) 30%, var(--paper)); border-color: color-mix(in srgb, var(--teal) 42%, transparent); }

.study-app .lab-mem { display: flex; flex-wrap: wrap; gap: .5rem; }

.study-app .lab-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-inline-size: 72px;
  min-block-size: 72px;
  padding: .4rem .7rem;
  background: linear-gradient(158deg, var(--paper), color-mix(in srgb, var(--mint) 24%, var(--paper)));
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tile);
  transition: background var(--t-fade) var(--ease);
}

.study-app .lab-tile[data-state="empty"] { background: color-mix(in srgb, var(--sand) 40%, var(--paper)); border-color: var(--line); box-shadow: none; }
.study-app .lab-tile__name { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.study-app .lab-tile__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.study-app .lab-screen, .study-app .s-screen {
  display: grid;
  gap: .12rem;
  inline-size: min(20rem, 100%);
  padding: .5rem clamp(.7rem, 3vw, 1.05rem) .65rem;
  color: var(--ivory);
  background: linear-gradient(168deg, color-mix(in srgb, var(--teal) 26%, var(--petrol)), var(--petrol));
  border: 1px solid color-mix(in srgb, var(--petrol) 60%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tile);
}

.study-app .lab-screen__head { font-size: .68rem; color: color-mix(in srgb, var(--mint) 80%, var(--ivory)); }

.study-app .lab-screen__line {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  min-block-size: 1.9rem;
  overflow-x: auto;
}

.study-app .lab-screen__idle { font-family: "Readex Pro Local", system-ui, sans-serif; font-size: .8rem; color: color-mix(in srgb, var(--ivory) 66%, var(--teal)); }

.study-app .lab-source { padding: .55rem clamp(.7rem, 3vw, 1.05rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow-x: auto; }
.study-app .lab-source__code { font-size: clamp(.95rem, 3.2vw, 1.1rem); color: var(--petrol); white-space: pre; }

.study-app .lab-expr { font-family: var(--mono); font-size: clamp(1.05rem, 4vw, 1.4rem); color: var(--petrol); }
.study-app .lab-expr__first { background: color-mix(in srgb, var(--peach) 48%, var(--paper)); color: var(--petrol); border-radius: 6px; padding: 0 .2rem; }

/* ---------- test setup card ---------- */

.study-app .s-panel {
  display: grid;
  gap: clamp(.7rem, 2.4vw, 1rem);
  padding: clamp(.9rem, 3vw, 1.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  min-inline-size: 0;
}

/* The selection card: native select, lecture radios, one start button. */
.study-app .s-setup { gap: .65rem; max-inline-size: 46rem; }

/* fieldset() reuses .s-section, whose page-level top margin pushed the start button
   far down the card; inside the card, and inside the options, there is no such gap. */
.study-app .s-setup .s-section { margin-block-start: 0; gap: .4rem; }
.study-app .s-setup .s-details__summary { min-block-size: 44px; }
.study-app .s-setup .s-details__body { padding-block: .3rem .6rem; gap: .55rem; }

.study-app .s-setup .s-field { min-inline-size: 0; }
.study-app .s-setup .s-select,
.study-app .s-idea__jump .s-select { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }

.study-app .s-picks { display: grid; gap: .4rem; min-inline-size: 0; }

.study-app .s-pick {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 44px;
  padding: .5rem .8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-inline-size: 0;
  transition: background var(--t-fade) var(--ease), border-color var(--t-fade) var(--ease);
}

.study-app .s-pick:hover { background: color-mix(in srgb, var(--mint) 10%, var(--paper)); }

.study-app .s-pick input {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--teal);
}

.study-app .s-pick:has(input:checked) {
  background: color-mix(in srgb, var(--mint) 16%, var(--paper));
  border-color: color-mix(in srgb, var(--teal) 42%, transparent);
}

.study-app .s-pick__body { display: grid; gap: .1rem; min-inline-size: 0; }
.study-app .s-pick__title { font-size: .96rem; line-height: 1.5; text-wrap: pretty; }
.study-app .s-pick__meta { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.study-app .s-setup__count { font-size: .9rem; color: var(--muted); }
.study-app .s-setup__start { inline-size: 100%; }

/* ---------- lesson: the idea itself ---------- */

.study-app .s-lechead { display: grid; gap: .6rem; }

.study-app .s-idea { display: grid; gap: clamp(.85rem, 2.6vw, 1.15rem); min-inline-size: 0; scroll-margin-block-start: 1.2rem; }
.study-app .s-idea__head { display: grid; gap: .25rem; }
.study-app .s-idea__count { font-size: .78rem; color: var(--teal); }

.study-app .s-idea__title {
  font-size: clamp(1.3rem, 4.4vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.study-app .s-idea__gist {
  font-size: clamp(1.05rem, 3vw, 1.18rem);
  line-height: 1.9;
  color: color-mix(in srgb, var(--petrol) 88%, var(--muted));
  text-wrap: pretty;
}

.study-app .s-recall {
  padding: .7rem 1rem;
  font-size: .95rem;
  color: color-mix(in srgb, var(--petrol) 84%, var(--muted));
  background: color-mix(in srgb, var(--sand) 32%, var(--paper));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  text-wrap: pretty;
}

.study-app .s-recall__label { display: block; font-size: .74rem; color: var(--teal); margin-block-end: .2rem; }

.study-app .s-more { background: transparent; }

.study-app .s-idea__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line-soft);
}

.study-app .s-lecinfo { display: grid; gap: .5rem; }

.study-app .s-summary { display: grid; gap: .4rem; }

.study-app .s-summary__row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .95rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.study-app .s-summary__dot {
  flex: 0 0 auto;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: .55rem;
  background: var(--mint);
  border-radius: 50%;
}

/* ---------- cards: one card at a time ---------- */

.study-app .s-deck {
  display: grid;
  gap: .7rem;
  justify-items: start;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.study-app .s-deck .s-field,
.study-app .s-deck .s-select { inline-size: 100%; min-inline-size: 0; }
.study-app .s-deck__status { font-size: .86rem; color: var(--muted); }
.study-app .s-deck__actions { gap: .5rem; }

.study-app .s-flip { inline-size: 100%; perspective: 1400px; }

.study-app .s-flip__inner { display: grid; min-block-size: clamp(9rem, 34vw, 12rem); }

.study-app .s-flip__face {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .5rem;
  padding: clamp(1rem, 4vw, 1.6rem);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.study-app .s-flip__face--front {
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
}

.study-app .s-flip__face--front:hover { background: color-mix(in srgb, var(--mint) 8%, var(--paper)); }

.study-app .s-flip__context,
.study-app .s-flip__term { display: block; max-inline-size: 100%; }

.study-app .s-flip__face--back { background: color-mix(in srgb, var(--mint) 10%, var(--paper)); }

/* Without motion the faces simply swap; the hidden one is out of the page either way. */
.study-app .s-flip__face[aria-hidden="true"] { visibility: hidden; }

.study-app .s-flip__context { font-size: .78rem; color: var(--muted); }

.study-app .s-flip__term {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  line-height: 1.35;
  color: var(--petrol);
  overflow-wrap: anywhere;
  max-inline-size: 100%;
}

.study-app .s-flip__ar { font-size: clamp(1.2rem, 5vw, 1.55rem); line-height: 1.5; text-wrap: balance; }
.study-app .s-flip__def { font-size: .95rem; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

.study-app .s-flip__more {
  inline-size: 100%;
  text-align: start;
  background: color-mix(in srgb, var(--sand) 26%, var(--paper));
}

/* With motion on: one half turn, and both faces stay painted while it runs. */
.study-app[data-motion="on"] .s-flip__inner {
  transform-style: preserve-3d;
  transition: transform var(--t-flip) var(--ease);
}

.study-app[data-motion="on"] .s-flip[data-flipped="true"] .s-flip__inner { transform: rotateY(180deg); }

.study-app[data-motion="on"] .s-flip__face {
  visibility: visible;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.study-app[data-motion="on"] .s-flip__face--back { transform: rotateY(180deg); }

/* ---------- celebration: a short burst over the answered card ---------- */

.study-app .s-boom {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 0;
  pointer-events: none;
  z-index: 2;
}

.study-app .s-boom__bit {
  position: absolute;
  inset-block-start: 30%;
  inset-inline-start: 50%;
  inline-size: var(--boom-size, 9px);
  block-size: var(--boom-size, 9px);
  border-radius: 3px;
  opacity: 0;
  background: var(--teal);
  animation: s-boom-fly 1.1s var(--ease) var(--boom-delay, 0ms) both;
}

.study-app .s-boom__bit--mint { background: var(--mint); }
.study-app .s-boom__bit--peach { background: var(--peach); }
.study-app .s-boom__bit--sand { background: color-mix(in srgb, var(--sand) 70%, var(--petrol) 12%); border-radius: 50%; }

@keyframes s-boom-fly {
  0% { opacity: 0; translate: 0 0; scale: .35; rotate: 0deg; }
  18% { opacity: 1; scale: 1; }
  55% { opacity: 1; translate: calc(var(--boom-x, 0px) * .7) var(--boom-y, -90px); }
  100% { opacity: 0; translate: var(--boom-x, 0px) calc(var(--boom-y, -90px) + 80px); rotate: var(--boom-rotate, 180deg); scale: .85; }
}

/* A verdict worth a small lift, once, when the answer was right. */
@keyframes s-boom-pop {
  0% { scale: .97; }
  45% { scale: 1.015; }
  100% { scale: 1; }
}

.study-app[data-motion="on"] .s-verdict[data-tone="correct"] { animation: s-boom-pop var(--t-move) var(--ease) both; }

/* Decoration only: with motion off there is no burst at all, and the written verdict
   carries the news on its own. */
.study-app[data-motion="off"] .s-boom { display: none; }

@media (prefers-reduced-motion: reduce) {
  .study-app:not([data-motion="on"]) .s-boom { display: none; }
  .study-app:not([data-motion="on"]) .s-verdict[data-tone="correct"] { animation: none; }
}

/* ---------- lecture lab host ---------- */

.study-app .s-lablive { position: relative; display: grid; gap: .8rem; min-inline-size: 0; }
.study-app[data-view="lab"] .s-read { grid-template-columns: minmax(0, 70ch); }

/* ---------- quiz progress and scope ---------- */

.study-app .s-quiz { margin-inline: auto; }

.study-app .s-progress__track {
  block-size: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--petrol) 8%, transparent);
  border-radius: 999px;
}

.study-app .s-progress__fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--teal);
  border-radius: 999px;
  transition: inline-size var(--t-move) var(--ease);
}

.study-app .s-quiz__scope { font-size: .8rem; color: var(--muted); }

@media (max-width: 599px) {
  .study-app .s-top__tag { display: none; }
}

@media (max-width: 380px) {
  .study-app .s-pick { padding-inline: .6rem; }
  .study-app .s-lib__item .s-btn { flex: 1 1 100%; }
  .study-app .s-vocab__add { flex: 1 1 100%; }
}

/* ---------- print view and printing ---------- */

.study-app[data-view="print"] .s-top,
.study-app[data-view="print"] .s-foot,
.study-app[data-view="print"] .s-skip { display: none; }

.study-app .s-printbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block-end: 1.2rem; }

@media print {
  .study-app { max-inline-size: none; padding: 0; background: #fff; }
  .study-app .s-top, .study-app .s-foot, .study-app .s-skip, .study-app .s-printbar,
  .study-app .s-contents, .study-app .s-btnrow, .study-app .s-btn, .study-app .lab { display: none !important; }
  .study-app .s-read { display: block; }
  .study-app .s-details, .study-app .s-summary { break-inside: avoid; }
  .study-app .s-idea { break-inside: avoid; }
}

@media (max-width: 360px) {
  .study-app { padding-inline: .65rem; }
  .study-app .s-nav__link { padding-inline: .6rem; font-size: .88rem; }
  .study-app .s-seg__btn, .study-app .lab-seg__btn { padding-inline: .55rem; font-size: .85rem; }
  .study-app .lab-tile { min-inline-size: 62px; min-block-size: 62px; }
  .study-app .lab-input { inline-size: 4.4rem; }
}

.study-app .s-num, .study-app .s-quiz__timer { font-family: inherit; font-variant-numeric: tabular-nums; }
.study-app .lab-symbols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-block-end: 1.5rem; }
.study-app .lab-symbol { margin: 0; text-align: center; font-size: .78rem; color: var(--petrol); }
.study-app .lab-symbol svg { display: block; inline-size: 100%; max-inline-size: 100px; margin: 0 auto .35rem; }
@media (max-width: 420px) { .study-app .lab-symbols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lecture labs — scoped fragment for appending to styles.css as-is.
   Every rule is prefixed `.study-app .s-ll`; nothing here restyles shared classes. */

.study-app .s-ll {
  display: grid;
  gap: 1rem;
  inline-size: min(100%, 44rem);
  margin-inline: auto;
  padding: 1.35rem 1.35rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.study-app .s-ll__title { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.study-app .s-ll__hint { margin: -.5rem 0 0; }

.study-app .s-ll__controls {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.study-app .s-ll__field { min-inline-size: 0; }
.study-app .s-ll__field .s-input,
.study-app .s-ll__field .s-select { inline-size: 100%; min-inline-size: 0; }
.study-app .s-ll__issue { margin: 0; color: var(--alert); }
.study-app .s-ll__hintnote { margin: .35rem 0 0; color: var(--alert); }

.study-app .s-ll__predict {
  padding: .8rem .9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sand) 34%, var(--paper));
}

.study-app .s-ll__result {
  display: grid;
  gap: .8rem;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mint) 7%, var(--paper));
}
.study-app[data-motion="on"] .s-ll__result.is-in,
.study-app .s-ll[data-motion="on"] .s-ll__result.is-in {
  animation: s-ll-reveal var(--t-fade) var(--ease) both;
}
@keyframes s-ll-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.study-app .s-ll[data-motion="off"] .s-ll__result,
.study-app[data-motion="off"] .s-ll__result { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .study-app .s-ll__result,
  .study-app .s-ll__pkt,
  .study-app .s-ll__barfill { animation: none !important; transition: none !important; }
}

.study-app .s-ll__answer { margin: 0; font-size: 1rem; }
.study-app .s-ll__answerlabel { color: var(--muted); }
.study-app .s-ll__why { margin: 0; line-height: 1.75; }
.study-app .s-ll__note { margin: 0; }
.study-app .s-ll__caption { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }

.study-app .s-ll__feedback { margin: 0; min-block-size: 1.4rem; font-size: .92rem; }
.study-app .s-ll__feedback.is-correct { color: var(--good); }
.study-app .s-ll__feedback.is-wrong { color: var(--alert); }
.study-app .s-ll__feedback.is-explored { color: var(--muted); }

/* --- stages ------------------------------------------------------------- */
.study-app .s-ll__stage { display: grid; gap: .7rem; justify-items: center; }
.study-app .s-ll__svgwrap { display: grid; justify-items: center; gap: .3rem; }
.study-app .s-ll__svg { inline-size: min(100%, 17rem); block-size: auto; }

.study-app .s-ll__link {
  stroke: color-mix(in srgb, var(--teal) 55%, transparent);
  stroke-width: 2.5;
  transition: stroke var(--t-fade) var(--ease);
}
.study-app .s-ll__link.is-cut {
  stroke: var(--alert);
  stroke-dasharray: 5 6;
}
.study-app .s-ll__node {
  fill: color-mix(in srgb, var(--mint) 45%, var(--paper));
  stroke: var(--teal);
  stroke-width: 1.5;
  transition: fill var(--t-fade) var(--ease), stroke var(--t-fade) var(--ease);
}
.study-app .s-ll__node.is-off {
  fill: color-mix(in srgb, var(--alert) 14%, var(--paper));
  stroke: var(--alert);
}
.study-app .s-ll__hub { fill: var(--teal); }
.study-app .s-ll__hub.is-down { fill: var(--alert); }

.study-app .s-ll__stack { display: grid; gap: .3rem; justify-items: stretch; inline-size: 100%; }
.study-app .s-ll__wrap {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color var(--t-fade) var(--ease), background var(--t-fade) var(--ease);
}
.study-app .s-ll__wrap.is-active {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--mint) 14%, var(--paper));
}
.study-app .s-ll__wraplabel { font-size: .82rem; color: var(--muted); }

.study-app .s-ll__track { display: grid; gap: .45rem; inline-size: 100%; }
.study-app .s-ll__lane { display: flex; align-items: center; gap: .5rem; }
.study-app .s-ll__pkt {
  inline-size: 1.9rem; block-size: 1.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mint) 35%, var(--paper));
  border: 1px solid var(--teal);
  font-variant-numeric: tabular-nums;
}
.study-app .s-ll__arrow {
  flex: 1 1 auto; block-size: 2px; min-inline-size: 2rem;
  background: color-mix(in srgb, var(--teal) 45%, transparent);
  transition: background var(--t-fade) var(--ease);
}
.study-app .s-ll__arrow.is-lost {
  background: repeating-linear-gradient(90deg, var(--alert) 0 6px, transparent 6px 12px);
}
.study-app .s-ll__state { font-size: .84rem; color: var(--muted); }
.study-app .s-ll__state.is-lost { color: var(--alert); }

.study-app .s-ll__flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .5rem; }
.study-app .s-ll__flowarrow { align-self: center; color: var(--muted); }
.study-app .s-ll__box {
  display: grid; gap: .15rem; align-content: center;
  min-inline-size: 5.5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  text-align: center;
  transition: border-color var(--t-fade) var(--ease), background var(--t-fade) var(--ease);
}
.study-app .s-ll__box.is-good { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 7%, var(--paper)); }
.study-app .s-ll__box.is-alert { border-color: color-mix(in srgb, var(--alert) 40%, transparent); background: color-mix(in srgb, var(--alert) 6%, var(--paper)); }
.study-app .s-ll__box.is-work { border-color: color-mix(in srgb, var(--teal) 40%, transparent); }
.study-app .s-ll__box.is-text { border-style: dashed; }
.study-app .s-ll__box.is-dim { opacity: .55; }
.study-app .s-ll__boxlabel { font-size: .78rem; color: var(--muted); }
.study-app .s-ll__boxvalue { font-size: 1rem; }

.study-app .s-ll__code {
  inline-size: 100%;
  margin: 0;
  padding: .6rem .75rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .82rem;
  background: color-mix(in srgb, var(--sand) 40%, var(--paper));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.study-app .s-ll__out {
  padding: .4rem .7rem;
  font-family: var(--mono);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.study-app .s-ll__diamond {
  display: grid; place-items: center;
  padding: .7rem 1.1rem;
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--mint) 12%, var(--paper));
  font-family: var(--mono);
}
.study-app .s-ll__paths { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

.study-app .s-ll__matrix {
  display: grid;
  grid-template-columns: repeat(3, 2.6rem);
  gap: .25rem;
}
.study-app .s-ll__cell {
  display: grid; place-items: center;
  block-size: 2.2rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sand) 30%, var(--paper));
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fade) var(--ease), border-color var(--t-fade) var(--ease);
}
.study-app .s-ll__cell.is-here {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--mint) 30%, var(--paper));
  font-weight: 600;
}

.study-app .s-ll__bars { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; inline-size: 100%; }
.study-app .s-ll__bar {
  block-size: .7rem;
  inline-size: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sand) 55%, var(--paper));
  overflow: hidden;
}
.study-app .s-ll__barfill {
  block-size: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: inline-size var(--t-move) var(--ease);
}
.study-app .s-ll__barfill.is-good { background: var(--good); }
.study-app .s-ll__barfill.is-alert { background: var(--alert); }
.study-app .s-ll__barfill.is-work { background: var(--mint); }

@media (max-width: 30rem) {
  .study-app .s-ll { padding: 1.05rem 1rem 1.2rem; }
  .study-app .s-ll__controls { grid-template-columns: 1fr; }
}