/* Cert Wiki — ported from the Claude Design source 'Cert Wiki Flow.dc.html'.
   The design's proportions are preserved, but every size is expressed in rem so
   the whole interface scales with the root font size set just below. */

:root {
  --accent: #b34a22;
  --ink: #191919;
  --panel: #f7f5f1;
  --line: rgba(0, 0, 0, .12);
  --line-soft: rgba(0, 0, 0, .09);
  --line-faint: rgba(0, 0, 0, .07);
  --muted: rgba(25, 25, 25, .7);
  --muted-2: rgba(25, 25, 25, .62);
  --muted-3: rgba(25, 25, 25, .5);
  --muted-4: rgba(25, 25, 25, .4);
  --sidebar-w: 15.375rem;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* The single scaling knob: 16px on a laptop, growing to 20px on a large
   desktop so a wide window shows a larger interface rather than more emptiness. */
html { font-size: clamp(15px, 0.42vw + 10.3px, 20.5px); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .75; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */

/* The sidebar is sticky, so its own box stops at the viewport edge; the shell
   paints the panel colour behind it for pages taller than one screen. */
.shell {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(to right,
    var(--panel) 0 calc(var(--sidebar-w) - 1px),
    var(--line-soft) calc(var(--sidebar-w) - 1px) var(--sidebar-w),
    #fff var(--sidebar-w));
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line-soft);
  padding: 1.375rem 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  padding: 0 1.25rem 1.125rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  cursor: pointer;
}
.sidebar__title { font: 600 .8125rem var(--sans); }
.sidebar__meta { font: 400 .6875rem var(--mono); color: rgba(25, 25, 25, .45); margin-top: .1875rem; }

.eyebrow {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.sidebar__section { padding: 1.125rem 1.25rem .5rem; }
.sidebar__section:first-of-type { padding-top: 1rem; }

.nav { display: flex; flex-direction: column; }

.nav__item {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  width: 100%;
  text-align: left;
  appearance: none;
  background: transparent;
  border: 0;
  padding: .4375rem 1.25rem;
  font: 400 .8125rem var(--sans);
  color: #3a3a3a;
  cursor: pointer;
}
.nav__item:hover { background: rgba(0, 0, 0, .04); }
.nav__item.is-active { font-weight: 500; color: #fff; background: var(--ink); }
.nav__item.is-active:hover { background: var(--ink); }

/* coming-soon treatment, shared by nav items, roadmap cards and the disabled CTA */
.is-soon { opacity: .45; cursor: default; }
.is-soon:hover { background: transparent; opacity: .45; }
.soon-tag {
  flex: none;
  font: 500 .594rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .125rem .4375rem;
  border-radius: .25rem;
  background: var(--line-faint);
  color: rgba(25, 25, 25, .6);
}

.track {
  margin: 1.25rem 1.25rem 0;
  padding: .8125rem .875rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .4375rem;
}
.track__label { font: 400 .625rem var(--mono); letter-spacing: .06em; color: var(--muted-3); }
.track__name { font: 500 .8125rem var(--sans); margin: .3125rem 0 .5rem; }
.track__note { font: 400 .6875rem var(--sans); color: var(--muted-3); margin-top: .4375rem; }
.track__reset {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: 400 .6875rem var(--mono);
  color: var(--accent);
  margin-top: .5rem;
  cursor: pointer;
}
.track__reset:hover { opacity: .75; }

.bar { height: .3125rem; background: rgba(0, 0, 0, .09); border-radius: .1875rem; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); }

/* ---------- content ---------- */

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Pages fill the viewport and centre what they hold, so a tall window shows a
   balanced page instead of a block of content with dead space beneath it. */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding: 2.375rem clamp(1.25rem, 4vw, 3.5rem) 3.5rem;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}
.page--intro { max-width: 92rem; padding-bottom: 3rem; gap: 2.125rem; }

.page__eyebrow {
  font: 500 .625rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.page__lead {
  font: 400 .906rem/1.65 var(--sans);
  color: var(--muted);
  margin: 0 0 1.875rem;
  max-width: 34rem;
}

/* ---------- introduction ---------- */

.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.75rem; align-items: stretch; }
.hero__copy { display: flex; flex-direction: column; }
.hero h1 { font: 400 clamp(2.125rem, 3.4vw, 3.125rem)/1.06 var(--serif); margin: .625rem 0 .875rem; }
.hero p { font: 400 .9375rem/1.65 var(--sans); color: var(--muted); margin: 0 0 1.5rem; max-width: 34rem; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; align-items: center; }

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: .4375rem;
  font: 500 .844rem var(--sans);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(25, 25, 25, .25); color: var(--ink); }
.btn:hover { opacity: .85; }
.btn.is-soon:hover { opacity: .45; }

.howto { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: .625rem; overflow: hidden; }
.howto__head {
  padding: .8125rem 1.125rem;
  background: var(--panel);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.howto__list { display: flex; flex-direction: column; flex: 1; }
.howto__row {
  flex: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .9375rem 1.125rem;
  border-bottom: 1px solid var(--line-faint);
}
.howto__row:last-child { border-bottom: 0; }
.howto__n { font: 400 .6875rem var(--mono); color: var(--accent); padding-top: .1875rem; }
.howto__title { font: 600 .844rem var(--sans); }
.howto__body { font: 400 .781rem/1.55 var(--sans); color: var(--muted-2); margin-top: .1875rem; }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.section__note { font: 400 .75rem/1.5 var(--sans); color: var(--muted-3); max-width: 46rem; }

.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; gap: .875rem; }
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem 1.125rem;
  background: #fff;
}
.card--active { border-color: var(--ink); }
.card--tinted { background: var(--panel); }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: .625rem; }
.card__step { font: 600 .6875rem var(--mono); color: var(--accent); }
.card__badge {
  font: 600 .594rem var(--mono);
  letter-spacing: .09em;
  padding: .25rem .5625rem;
  border-radius: .25rem;
  background: var(--accent);
  color: #fff;
}
.card__name { font: 600 1rem var(--sans); margin: .4375rem 0 .375rem; }
.card__blurb { font: 400 .781rem/1.55 var(--sans); color: var(--muted-2); }
.card__meta { font: 400 .6875rem var(--mono); color: rgba(25, 25, 25, .45); margin: .8125rem 0 .5625rem; }
.card__domains { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, .08); }
.card__domain {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .4375rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  font: 400 .75rem var(--sans);
}
.card__domain span:first-child { color: rgba(25, 25, 25, .78); }
.card__domain span:last-child { font-family: var(--mono); color: rgba(25, 25, 25, .45); }
.card__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 500 .719rem var(--mono);
  color: var(--accent);
  margin-top: auto;
  padding-top: .8125rem;
}

.footnote {
  font: 400 .719rem/1.6 var(--mono);
  color: var(--muted-3);
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding-top: 1rem;
}

/* ---------- applying & booking ---------- */

.steps { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.125rem; }
.step {
  display: flex;
  gap: 1.125rem;
  border: 1px solid var(--line);
  border-radius: .5625rem;
  padding: 1.125rem 1.25rem;
}
.step__n { width: 2.125rem; flex: none; font: 400 1.375rem var(--serif); color: var(--accent); }
.step__body { flex: 1; min-width: 0; }
.step__title { font: 600 .9375rem var(--sans); margin-bottom: .3125rem; }
.step__text { font: 400 .844rem/1.65 var(--sans); color: rgba(25, 25, 25, .68); max-width: 52rem; }
.step__meta { font: 400 .719rem var(--mono); color: rgba(25, 25, 25, .45); margin-top: .5rem; }

.tick { flex: none; display: block; width: 1.0625rem; height: 1.0625rem; position: relative; cursor: pointer; }
.tick input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.tick__box {
  display: block;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: .25rem;
  border: 1.5px solid rgba(0, 0, 0, .25);
  background: #fff;
  color: #fff;
  text-align: center;
  font: 600 .6875rem/.875rem var(--sans);
}
.tick input:checked + .tick__box { border-color: var(--accent); background: var(--accent); }
.tick input:checked + .tick__box::after { content: "\2713"; }
.tick input:focus-visible + .tick__box { outline: 2px solid var(--ink); outline-offset: 2px; }

.panel {
  background: var(--panel);
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: .5625rem;
  padding: 1.25rem 1.375rem;
}
.panel__head {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: .625rem;
}
.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .625rem 1.5rem;
  font: 400 .844rem/1.6 var(--sans);
  color: rgba(25, 25, 25, .72);
}

h1.page__title { font: 400 clamp(1.875rem, 2.6vw, 2.5rem)/1.1 var(--serif); margin: .625rem 0 .75rem; }

/* ---------- study guide ---------- */

.crumb { font: 400 .719rem var(--mono); margin-bottom: 1.125rem; }
.crumb a { color: var(--muted-3); }
.crumb a:hover { color: var(--accent); opacity: 1; }

/* exam facts, on the guide overview */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.375rem), 1fr));
  gap: .625rem;
  margin: 0 0 2.125rem;
}
.facts__item {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: .5rem;
  padding: .8125rem .9375rem;
}
.facts__key {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-4);
  margin-bottom: .3125rem;
}
.facts__val { font: 400 .8125rem/1.5 var(--sans); color: rgba(25, 25, 25, .8); }

/* domain cards, on the guide overview */
.domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); gap: .875rem; margin-bottom: 2.125rem; }
.domain-card {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1rem 1.125rem;
  color: inherit;
}
.domain-card:hover { border-color: var(--ink); opacity: 1; }
.domain-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: .625rem; }
.domain-card__code { font: 600 .6875rem var(--mono); color: var(--accent); }
.domain-card__meta { font: 400 .656rem var(--mono); color: var(--muted-4); }
.domain-card__name { font: 600 .9375rem var(--sans); }
.domain-card__summary { font: 400 .781rem/1.55 var(--sans); color: var(--muted-2); flex: 1; }
.domain-card .bar { margin-top: .375rem; }

.scenarios {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: .5rem;
  font: 400 .8125rem/1.6 var(--sans);
  color: rgba(25, 25, 25, .72);
}
.scenarios li::marker { font-family: var(--mono); font-size: .6875rem; color: var(--muted-4); }
/* A panel whose items are not a sequence drops the numbers for bullets. */
.scenarios--plain { list-style: disc; }
.scenarios--plain li::marker { color: var(--muted-4); }
.panels { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 2.125rem; }

/* Inline markup from the content files: <b>, <i> and <code> become these. The
   code spans sit inside running text, unlike the .code blocks further down. */
.lesson__body code,
.lesson__points code,
.lesson__exam code,
.more__body code,
.q__text code,
.opt__text code,
.q__why code,
.facts__val code,
.scenarios code {
  font: 400 .875em var(--mono);
  background: var(--line-faint);
  padding: .0625rem .1875rem;
  border-radius: .1875rem;
  word-break: break-word;
}
.lesson__points strong,
.lesson__body strong,
.more__body strong,
.q__text strong,
.opt__text strong,
.q__why strong,
.scenarios strong { font-weight: 600; color: var(--ink); }

/* domain switcher */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.375rem), 1fr));
  gap: .5rem;
  margin-bottom: 1.875rem;
}
.rail__item {
  border: 1px solid var(--line);
  border-radius: .4375rem;
  padding: .625rem .75rem .6875rem;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .3125rem;
}
.rail__item:hover { border-color: rgba(0, 0, 0, .3); opacity: 1; }
.rail__item.is-active { border-color: var(--ink); background: var(--panel); }
.rail__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.rail__code { font: 600 .6875rem var(--mono); color: var(--accent); }
.rail__weight { font: 400 .656rem var(--mono); color: var(--muted-4); }
.rail__name { font: 500 .781rem var(--sans); }

.domain__head { max-width: 47.5rem; margin-bottom: 1.625rem; }
.domain__head .page__lead { margin-bottom: 0; }

/* lessons */
.lessons { display: flex; flex-direction: column; gap: .875rem; }
.lesson {
  border: 1px solid var(--line);
  border-radius: .5625rem;
  padding: 1.25rem 1.375rem;
}
.lesson.is-read { background: var(--panel); border-color: var(--line-soft); }
.lesson__top { display: flex; gap: 1rem; align-items: flex-start; }
.lesson__heading { flex: 1; min-width: 0; display: flex; gap: .75rem; align-items: baseline; }
.lesson__ref { flex: none; font: 500 .75rem var(--mono); color: var(--accent); }
.lesson__title { font: 600 1rem var(--sans); margin: 0; }
.lesson__body { font: 400 .875rem/1.7 var(--sans); color: rgba(25, 25, 25, .72); margin: .625rem 0 0; max-width: 47.5rem; }
.lesson__points {
  margin: .75rem 0 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .4375rem;
  font: 400 .844rem/1.65 var(--sans);
  color: rgba(25, 25, 25, .74);
  max-width: 50rem;
}
.lesson__points li::marker { color: var(--muted-4); }
/* The sub-skill's own share of the exam, from the official guide. */
.lesson__weight { flex: none; font: 400 .6875rem var(--mono); color: var(--muted-4); }
.lesson__traps {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3125rem;
}
.lesson__traps li::marker { color: var(--accent); }

.code {
  margin: .875rem 0 0;
  border: 1px solid var(--line-soft);
  border-radius: .4375rem;
  overflow: hidden;
  background: var(--panel);
}
.code figcaption {
  padding: .5rem .875rem;
  border-bottom: 1px solid var(--line-faint);
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.code pre { margin: 0; padding: .875rem; overflow-x: auto; }
.code code { font: 400 .75rem/1.65 var(--mono); color: #2c2c2c; white-space: pre; }

.lesson__exam {
  margin-top: .875rem;
  border-left: 2px solid var(--accent);
  padding: .125rem 0 .125rem .875rem;
  font: 400 .8125rem/1.65 var(--sans);
  color: rgba(25, 25, 25, .72);
  max-width: 48.75rem;
}
.lesson__exam-head {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}

/* "Go deeper": the lesson's long-form explanation, folded under its points. */
.lessons__tools {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: -.5rem 0 .875rem;
  font: 400 .75rem var(--sans);
  color: var(--muted-3);
}
.lessons__toggle {
  flex: none;
  font: 500 .6875rem var(--mono);
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: .3125rem;
  padding: .3125rem .625rem;
  cursor: pointer;
}
.lessons__toggle:hover { border-color: var(--accent); }

.more {
  margin-top: .875rem;
  border: 1px solid var(--line-soft);
  border-radius: .4375rem;
  background: #fff;
  max-width: 50rem;
}
.more__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .625rem;
  padding: .5625rem .875rem;
  user-select: none;
}
.more__summary::-webkit-details-marker { display: none; }
.more__summary::before {
  content: "+";
  flex: none;
  width: .75rem;
  font: 500 .8125rem var(--mono);
  color: var(--accent);
}
.more[open] > .more__summary::before { content: "−"; }
.more[open] > .more__summary { border-bottom: 1px solid var(--line-faint); }
.more__summary:hover .more__label { color: var(--accent); }
.more__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .4375rem; }
.more__label { font: 600 .8125rem var(--sans); }
.more__meta { font: 400 .6875rem var(--mono); color: var(--muted-4); }
.more__body {
  padding: .25rem 1.125rem 1rem 2.25rem;
  font: 400 .875rem/1.75 var(--sans);
  color: rgba(25, 25, 25, .78);
}
.more__body p { margin: .75rem 0 0; }
.more__h { font: 600 .8125rem var(--sans); color: var(--ink); margin: 1.25rem 0 0; }
.more__example {
  margin-top: .875rem;
  background: var(--panel);
  border-radius: .375rem;
  padding: .625rem .875rem .75rem;
}
.more__example p { margin: .25rem 0 0; font-size: .844rem; }
.more__example-head {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.more .code { margin-top: .875rem; }

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

.quiz {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.625rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.quiz__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.quiz__title { font: 400 1.75rem/1.15 var(--serif); margin: .375rem 0 0; }
.quiz__meta { display: flex; align-items: baseline; gap: .875rem; }
.quiz__score { font: 400 .75rem var(--mono); color: var(--muted-3); }
.quiz__reset {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: 400 .719rem var(--mono);
  color: var(--accent);
  cursor: pointer;
}
.quiz__reset:hover { opacity: .75; }

.q { border: 1px solid var(--line); border-radius: .5625rem; padding: 1.25rem 1.375rem; }
.q.is-answered { background: var(--panel); }
.q__top { display: flex; align-items: center; gap: .625rem; }
.q__n { font: 600 .6875rem var(--mono); color: var(--accent); }
.q__diff {
  font: 500 .594rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .125rem .4375rem;
  border-radius: .25rem;
  background: var(--line-faint);
  color: rgba(25, 25, 25, .6);
}
.q__verdict {
  margin-left: auto;
  font: 500 .594rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1875rem .5rem;
  border-radius: .25rem;
  color: #fff;
}
.q__verdict.is-right { background: #2f6b3f; }
.q__verdict.is-wrong { background: var(--accent); }

.q__text { font: 400 .906rem/1.65 var(--sans); margin: .625rem 0 .875rem; max-width: 50rem; }

.q__opts { display: flex; flex-direction: column; gap: .5rem; }
.opt {
  appearance: none;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .4375rem;
  padding: .6875rem .875rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt:disabled { cursor: default; }
.opt__letter { flex: none; font: 600 .719rem/1.5 var(--mono); color: var(--muted-4); }
.opt__text { font: 400 .844rem/1.5 var(--sans); }
.opt.is-right { border-color: #2f6b3f; background: rgba(47, 107, 63, .07); }
.opt.is-right .opt__letter { color: #2f6b3f; }
.opt.is-wrong { border-color: var(--accent); background: rgba(179, 74, 34, .06); }
.opt.is-wrong .opt__letter { color: var(--accent); }

.q__why {
  margin-top: .875rem;
  padding-top: .8125rem;
  border-top: 1px solid var(--line-faint);
  font: 400 .8125rem/1.65 var(--sans);
  color: rgba(25, 25, 25, .72);
  max-width: 51.25rem;
}
.q__why-head { font-family: var(--mono); font-size: .75rem; color: var(--accent); }
/* Multiple response: the count the item asks for, and the row that commits the
   picks — a multiple-response answer is only checked once it is complete. */
.q__diff.is-multi { background: rgba(179, 74, 34, .1); color: var(--accent); }
.q__actions { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; }
.q__hint { font: 400 .719rem var(--mono); color: var(--muted-4); }
.q__actions .btn:disabled { opacity: .45; cursor: default; }
.q__actions .btn:disabled:hover { opacity: .45; }

/* Classification: a criterion, one statement per row and a box per category —
   the third item type the exam asks ("classify each of these as True or False",
   "which chunking strategy does each description match"). Every row has to be
   placed, and the item is checked in one go like a multiple-response one. */
.q__cls { display: flex; flex-direction: column; gap: .5rem; margin-top: .125rem; }
.cls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .625rem 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .4375rem;
  padding: .625rem .875rem;
}
.cls-row.is-right { border-color: rgba(47, 107, 63, .45); }
.cls-row.is-wrong { border-color: rgba(179, 74, 34, .45); }
.cls-row__text { font: 400 .844rem/1.5 var(--sans); }
.cls-row__cats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .375rem; }
.cls-cat {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .3125rem;
  padding: .3125rem .625rem;
  font: 400 .719rem/1.4 var(--mono);
  color: var(--muted-3);
  white-space: nowrap;
  cursor: pointer;
}
.cls-cat:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.cls-cat:disabled { cursor: default; }
.cls-cat.is-picked { border-color: var(--ink); background: var(--panel); color: var(--ink); }
.cls-cat.is-right { border-color: #2f6b3f; background: rgba(47, 107, 63, .07); color: #2f6b3f; }
.cls-cat.is-wrong { border-color: var(--accent); background: rgba(179, 74, 34, .06); color: var(--accent); }
.q__cls .q__actions { margin-top: .25rem; }

/* ---------- previous / next domain ---------- */

.guide-nav {
  display: flex;
  justify-content: space-between;
  gap: .875rem;
  margin-top: 2.125rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.guide-nav__link { display: flex; flex-direction: column; gap: .1875rem; color: inherit; max-width: 46%; }
.guide-nav__link--next { margin-left: auto; text-align: right; }
.guide-nav__link:hover { opacity: 1; }
.guide-nav__link:hover .guide-nav__name { color: var(--accent); }
.guide-nav__dir {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.guide-nav__name { font: 500 .844rem/1.4 var(--sans); }

/* ---------- practice: shared bits ---------- */

/* Bank and mock cards reuse .q from the domain quiz; the scenario label and the
   picked state are the only additions. */
.q__scen {
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-4);
  margin: .75rem 0 0;
}
.opt.is-picked { border-color: var(--ink); background: var(--panel); }
.opt.is-picked .opt__letter { color: var(--ink); }

.verdict {
  font: 500 .594rem var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1875rem .5rem;
  border-radius: .25rem;
  color: #fff;
}
.verdict.is-pass { background: #2f6b3f; }
.verdict.is-fail { background: var(--accent); }

.empty { font: 400 .875rem/1.6 var(--sans); color: var(--muted-3); margin: 0; }

/* ---------- question bank ---------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  border: 1px solid var(--line-soft);
  border-radius: .5rem;
  padding: .9375rem 1.0625rem;
  margin-bottom: 1.75rem;
  background: var(--panel);
}
.filters__row { display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap; }
.filters__label {
  flex: none;
  width: 4.75rem;
  font: 500 .594rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-4);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
  appearance: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: .25rem .6875rem;
  font: 400 .719rem var(--mono);
  color: var(--muted-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.quiz--bank { border-top: 0; padding-top: 0; margin-top: 1.25rem; }
.filters--review { margin-bottom: 0; }

/* ---------- mock exams ---------- */

.mocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: .875rem;
  margin-bottom: 2.125rem;
}
.mock-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.125rem 1.25rem;
  color: inherit;
}
.mock-card:hover { border-color: var(--ink); opacity: 1; }
.mock-card__top { display: flex; justify-content: space-between; align-items: center; gap: .625rem; }
.mock-card__code { font: 500 .938rem var(--sans); }
.mock-card__blurb { font: 400 .8125rem/1.6 var(--sans); color: var(--muted-2); }
.mock-card__meta { font: 400 .656rem var(--mono); color: var(--muted-4); }
.mock-card__foot {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .375rem;
  padding-top: .6875rem;
  border-top: 1px solid var(--line-faint);
}
.mock-card__score { font: 400 .719rem var(--mono); color: var(--muted-3); }

/* ---------- sitting a paper ---------- */

.page--exam { justify-content: flex-start; gap: .875rem; }

.exam-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.exam-bar__label { font: 500 .594rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted-4); }
.exam-bar__pos { font: 400 1.25rem/1.2 var(--serif); margin-top: .25rem; }
.exam-bar__clock {
  font: 500 1.375rem var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.exam-bar__clock.is-low { color: var(--accent); }

.exam-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.exam-nav .btn { padding: .5625rem .9375rem; font-size: .781rem; }
.exam-nav .btn:disabled { opacity: .35; cursor: default; }

.exam-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
  padding-top: .875rem;
  border-top: 1px solid var(--line-faint);
}
.exam-grid__n {
  appearance: none;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--line);
  border-radius: .3125rem;
  background: #fff;
  font: 400 .719rem var(--mono);
  color: var(--muted-3);
  cursor: pointer;
}
.exam-grid__n:hover { border-color: var(--ink); color: var(--ink); }
.exam-grid__n.is-done { background: var(--panel); color: var(--ink); border-color: var(--line); }
.exam-grid__n.is-flagged { border-color: var(--accent); color: var(--accent); }
/* Started but not finished: a classification item with statements still loose. */
.exam-grid__n.is-part { border-style: dashed; border-color: var(--muted-4); color: var(--ink); }
.exam-grid__n.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }

.exam-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.exam-submit__note { font: 400 .719rem var(--mono); color: var(--muted-3); }

/* ---------- result ---------- */

.score {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.375rem 1.5rem;
  margin: 0 0 2.125rem;
}
.score__main { display: flex; align-items: baseline; gap: .625rem; }
.score__value { font: 400 3.25rem/1 var(--serif); }
.score__scale { font: 400 .75rem var(--mono); color: var(--muted-4); }
.score__side { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.score__raw { font: 400 .75rem var(--mono); color: var(--muted-3); }

.bydomain { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 2.125rem; }
.bydomain__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem auto;
  align-items: center;
  gap: 1rem;
  padding: .6875rem .25rem;
  border-bottom: 1px solid var(--line-faint);
  color: inherit;
}
.bydomain__row:hover { opacity: 1; }
.bydomain__row:hover .bydomain__name { color: var(--accent); }
.bydomain__name { display: flex; align-items: baseline; gap: .5rem; font: 400 .844rem var(--sans); min-width: 0; }
.bydomain__code { font: 600 .6875rem var(--mono); color: var(--accent); flex: none; }
.bydomain__n { font: 400 .75rem var(--mono); color: var(--muted-3); font-variant-numeric: tabular-nums; }

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  .shell { flex-direction: column; background: #fff; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: 1rem 0 .875rem;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .sidebar__brand { padding-bottom: .875rem; }
  .sidebar__section { padding: .875rem 1.25rem .375rem; }
  .nav { flex-direction: row; overflow-x: auto; gap: .375rem; padding: 0 1.25rem; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav__item { width: auto; flex: none; white-space: nowrap; padding: .4375rem .75rem; border-radius: .375rem; }
  .track { margin: 1rem 1.25rem 0; }
  .page { padding-top: 1.75rem; justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; gap: 1.375rem; }
  .rail { grid-template-columns: repeat(2, 1fr); }
  .bydomain__row { grid-template-columns: minmax(0, 1fr) 5rem auto; gap: .75rem; }
  .cls-row { grid-template-columns: minmax(0, 1fr); }
  .cls-row__cats { justify-content: flex-start; }
}

@media (max-width: 460px) {
  .step { gap: .75rem; padding: 1rem; }
  .step__n { width: 1.625rem; }
  .rail { grid-template-columns: 1fr; }
  .lesson, .q { padding: 1rem; }
  .cls-row { padding: .625rem .75rem; }
  .cls-cat { white-space: normal; }
  .lesson__heading { flex-direction: column; gap: .1875rem; }
  .guide-nav { flex-direction: column; }
  .more__body { padding: .25rem .875rem .875rem; }
  .more__meta { display: none; }
  .lessons__tools { flex-direction: column; gap: .5rem; }
  .guide-nav__link, .guide-nav__link--next { max-width: none; text-align: left; margin-left: 0; }
  .filters { padding: .8125rem .875rem; }
  .filters__row { flex-direction: column; align-items: stretch; gap: .375rem; }
  .filters__label { width: auto; }
  .exam-nav .btn { flex: 1 1 auto; justify-content: center; }
  .exam-submit { flex-direction: column; align-items: stretch; }
  .exam-submit .btn { justify-content: center; }
  .bydomain__row { grid-template-columns: minmax(0, 1fr) auto; }
  .bydomain__row .bar { grid-column: 1 / -1; }
  .score__value { font-size: 2.75rem; }
}