/* ==========================================================================
   qtypes.css — the Question Types page.

   Three families, twenty-four formats. The page has one job the other pages
   do not: make a long catalogue scannable without it reading as a spec sheet.
   So the cards carry the difference in marking mode as colour and shape, and
   the sample sits folded inside each card rather than doubling the page
   length.
   ========================================================================== */

/* ---------- 1 · the banner ----------
   One sheet, three question families cycling through it. Each family has its
   own arrival: options tick, ruled lines fill, sub-questions branch off a
   source block. */

.qt-hero { position: relative; overflow: hidden; }

.qbn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.qbn__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--line-rgb), 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line-rgb), 0.5) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 70% at 68% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 68% 45%, #000 0%, transparent 78%);
  opacity: 0.5;
}

.qbn__glow {
  position: absolute;
  top: -12%;
  right: -6%;
  width: 62%;
  height: 128%;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(var(--accent-rgb), 0.14), transparent 70%);
  filter: blur(28px);
  animation: qbn-breathe 9s var(--ease) infinite;
}

@keyframes qbn-breathe {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.75; }
  50%      { transform: scale(1.1) translateY(-3%); opacity: 1; }
}

.qbn__sheet {
  position: absolute;
  top: 50%;
  right: 3%;
  width: min(50%, 520px);
  transform: translateY(-50%);
}

/* Each family holds the sheet for a third of the cycle. One timeline drives
   every child through --f, so the three never overlap. */
.qbn__fam {
  opacity: 0;
  animation: qbn-fam 16.5s linear infinite;
  animation-delay: calc(var(--f) * 5.5s);
}

@keyframes qbn-fam {
  0%     { opacity: 0; }
  3%     { opacity: 1; }
  30%    { opacity: 1; }
  33.33% { opacity: 0; }
  100%   { opacity: 0; }
}

.qbn__stem { fill: rgba(var(--paper-rgb, 244, 244, 240), 0.5); }
.qbn__src  { fill: rgba(var(--accent-rgb), 0.05); stroke: rgba(var(--accent-rgb), 0.3); stroke-width: 1; }

.qbn__opt circle { fill: none; stroke: var(--line); stroke-width: 1.4; }
.qbn__opt rect   { fill: rgba(var(--line-rgb), 0.85); }

.qbn__opt, .qbn__rule, .qbn__sub {
  opacity: 0;
  animation: qbn-in 16.5s linear infinite;
  animation-delay: calc(var(--f, 0) * 5.5s + var(--o) * 0.32s + 0.25s);
}

@keyframes qbn-in {
  0%     { opacity: 0; transform: translateX(-6px); }
  4%     { opacity: 1; transform: translateX(0); }
  28%    { opacity: 1; transform: translateX(0); }
  32%    { opacity: 0; }
  100%   { opacity: 0; }
}

/* the correct option fills with the accent, a beat after it appears */
.qbn__opt--right circle {
  fill: var(--accent);
  stroke: var(--accent);
  animation: qbn-tick 16.5s linear infinite;
  animation-delay: 1.5s;
}

@keyframes qbn-tick {
  0%, 8%   { fill-opacity: 0; }
  11%, 30% { fill-opacity: 1; }
  33%, 100% { fill-opacity: 0; }
}

.qbn__rule { fill: rgba(var(--line-rgb), 0.9); }
.qbn__sub path { stroke: rgba(var(--accent-rgb), 0.55); stroke-width: 1.2; }
.qbn__sub rect { fill: rgba(var(--line-rgb), 0.9); }

.qbn__tag {
  fill: var(--deco);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.75;
}

/* the scan line, tying the banner to the rest of the site's language */
.qbn__scan {
  position: absolute;
  top: 0;
  right: 3%;
  width: min(50%, 520px);
  height: 100%;
  background: linear-gradient(180deg, transparent,
    rgba(var(--accent-rgb), 0.14) 48%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  animation: qbn-scan 6.5s var(--ease) infinite;
}

@keyframes qbn-scan {
  0%, 100% { transform: translateY(-60%); opacity: 0; }
  35%      { opacity: 1; }
  70%      { transform: translateY(60%); opacity: 0; }
}

.svc-hero__in { position: relative; z-index: 1; }

/* ---------- 2 · the hero counters ---------- */

.qt-stat {
  list-style: none;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  max-width: 720px;
}

.qt-stat li {
  padding-left: 0.9rem;
  border-left: 2px solid rgba(var(--accent-rgb), 0.4);
}

.qt-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.qt-stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- 3 · the family filter ---------- */

.qt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}

.qt-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.35s ease, border-color 0.35s ease,
              background 0.35s ease, transform 0.35s var(--ease);
}

.qt-tab span {
  font-size: 0.72rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(var(--line-rgb), 0.55);
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  transition: background 0.35s ease, color 0.35s ease;
}

.qt-tab:hover { color: var(--paper); border-color: var(--deco); transform: translateY(-2px); }

.qt-tab.is-on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.qt-tab.is-on span { background: rgba(0, 0, 0, 0.22); color: var(--on-accent); }

/* ---------- 4 · the paper explorer ----------
   A rail of all twenty-four beside a sheet that redraws as one is picked.

   Whitespace was the thing to solve here. Two columns of different natural
   heights leave a hole under the shorter one, and a one-line question type
   leaves a hole inside the sheet. Both are handled by making the paper the
   thing that stretches: the sheet is a flex column, .ex__paper takes the slack,
   and its ruled background keeps drawing lines into the space — so leftover
   room reads as the rest of a page rather than as a gap.
   ========================================================================== */

.ex {
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  align-items: stretch;
  --c-objective: var(--p2);   --c-objective-rgb: var(--p2-rgb);
  --c-subjective: var(--p5);  --c-subjective-rgb: var(--p5-rgb);
  --c-competency: var(--p7);  --c-competency-rgb: var(--p7-rgb);
}

@media (max-width: 900px) { .ex { grid-template-columns: 1fr; } }

.ex [data-g="objective"]  { --fc: var(--c-objective);  --fc-rgb: var(--c-objective-rgb); }
.ex [data-g="subjective"] { --fc: var(--c-subjective); --fc-rgb: var(--c-subjective-rgb); }
.ex [data-g="competency"] { --fc: var(--c-competency); --fc-rgb: var(--c-competency-rgb); }

/* ---- the rail ---- */

.ex__railwrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  align-self: start;
  position: sticky;
  top: 84px;
}

@media (max-width: 900px) { .ex__railwrap { position: static; } }

.ex__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(72vh, 620px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.ex__gh {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fc);
}

.ex__gh em { font-style: normal; letter-spacing: 0.04em; color: var(--muted-3); }

.ex__t {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.58rem 0.95rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease;
}

/* the active marker, drawn on the edge rather than by moving the row */
.ex__t::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--fc);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease);
}

.ex__t:hover { background: rgba(var(--fc-rgb), 0.08); }
.ex__t.is-on { background: rgba(var(--fc-rgb), 0.14); }
.ex__t.is-on::before { transform: scaleY(1); }
.ex__t:focus-visible { outline: 2px solid var(--deco); outline-offset: -2px; }

.ex__ab {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(var(--fc-rgb), 0.45);
  background: rgba(var(--fc-rgb), 0.1);
  color: var(--fc);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
}

.ex__nm { font-size: 0.86rem; font-weight: 500; }
.ex__mk { font-size: 0.71rem; color: var(--muted-3); white-space: nowrap; }

/* ---- the sheet ---- */

.ex__sheet {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
}

/* Hidden from first paint rather than after the script runs. Laying out all
   twenty-four and collapsing them afterwards made .ex taller than any screen,
   which starved the reveal observer's 12% threshold and left the section at
   opacity 0. A <noscript> block on the page restores all panes when there is
   no script to do the switching. */
.ex__pane { display: none; flex: 1; flex-direction: column; min-height: 0; }
.ex__pane.is-on { display: flex; animation: ex-in 0.4s var(--ease); }

@keyframes ex-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.ex__sh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-3);
}

.ex__count {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fc);
  font-variant-numeric: tabular-nums;
}

.ex__count i { font-style: normal; color: var(--muted-3); }
.ex__sh b { font-size: 1.05rem; }

.ex__badges { display: flex; gap: 0.42rem; flex-wrap: wrap; }

.ex__b {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(var(--fc-rgb), 0.4);
  background: rgba(var(--fc-rgb), 0.1);
  color: var(--fc);
  white-space: nowrap;
}

.ex__b--n { border-color: var(--line); background: none; color: var(--muted-2); }

/* the paper: takes the slack, and its ruling keeps going into it */
.ex__paper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  min-height: 300px;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 31px, rgba(var(--line-rgb), 0.26) 31px 32px);
}

.ex__q { display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px; gap: 0.8rem; }
.ex__qn { font-family: var(--font-display); font-weight: 700; color: var(--fc); }
.ex__qm { text-align: right; font-size: 0.78rem; color: var(--muted-2); white-space: nowrap; }
.ex__qb { min-width: 0; }

.ex__stem {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--paper);
}

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

.ex__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--muted);
}

.ex__mark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
}

.ex__mark--r { border-radius: 50%; }

.ex__rule {
  display: block;
  height: 1px;
  background: rgba(var(--line-rgb), 0.75);
  margin: 1rem 0;
}

.ex__sub {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.6rem;
  align-items: center;
}

.ex__sub b { font-size: 0.85rem; color: var(--muted-2); font-weight: 600; }
.ex__sub .ex__rule { margin: 0.55rem 0; }

.ex__src {
  margin: 0 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed rgba(var(--fc-rgb), 0.4);
  border-radius: 10px;
  background: rgba(var(--fc-rgb), 0.05);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
}

.ex__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 1rem; }

.ex__grid--head {
  padding-bottom: 0.5rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted-2);
}

/* the footer takes the two lines that used to be a second card */
.ex__foot {
  display: grid;
  gap: 0.8rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding: 0.95rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--ink-3);
}

.ex__fk {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.ex__foot p { margin: 0; font-size: 0.83rem; line-height: 1.55; color: var(--muted-2); }

/* ---------- 6 · how each family is marked ----------
   Four cards in a row said four peers. Three of them are parallel routes and
   the fourth is the gate all three pass through, so it is drawn as that: one
   paper in, three routes, one gate, one release. The connectors are SVG with
   non-scaling strokes, so they stretch to the column width without the line
   weight stretching with them.
   ========================================================================== */

.mk {
  --c-objective: var(--p2);   --c-objective-rgb: var(--p2-rgb);
  --c-subjective: var(--p5);  --c-subjective-rgb: var(--p5-rgb);
  --c-competency: var(--p7);  --c-competency-rgb: var(--p7-rgb);
  display: grid;
  justify-items: stretch;
}

/* ---- the terminal nodes ---- */

.mk__node {
  justify-self: center;
  max-width: 560px;
  text-align: center;
  padding: 1rem 1.4rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}

.mk__node b {
  display: block;
  margin: 0.45rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 600;
}

.mk__node p { margin: 0; font-size: 0.85rem; color: var(--muted); }

.mk__nk {
  display: inline-block;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.mk__node--out { border-color: rgba(var(--accent-rgb), 0.45); }

.mk__nk--out {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- the connectors ---- */

.mk__fan, .mk__join { width: 100%; height: 46px; }
.mk__drop { width: 100%; height: 34px; }

.mk__fan path, .mk__join path, .mk__drop path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 5;
  animation: mk-flow 1.6s linear infinite;
}

@keyframes mk-flow { to { stroke-dashoffset: -20; } }

/* the run into the gate is the one that matters, so it is the accent */
.mk__join path, .mk__drop path { stroke: rgba(var(--accent-rgb), 0.55); }

/* ---- the three routes ---- */

.mk__routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mk__r {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.4s ease;
}

.mk__r[data-g="objective"]  { --rc: var(--c-objective);  --rc-rgb: var(--c-objective-rgb); }
.mk__r[data-g="subjective"] { --rc: var(--c-subjective); --rc-rgb: var(--c-subjective-rgb); }
.mk__r[data-g="competency"] { --rc: var(--c-competency); --rc-rgb: var(--c-competency-rgb); }

/* the route's colour as a rail down its leading edge */
.mk__r::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--rc), rgba(var(--rc-rgb), 0.15));
}

.mk__r:hover { transform: translateY(-4px); border-color: rgba(var(--rc-rgb), 0.6); }

.mk__rh { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.mk__rn {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--rc);
  font-variant-numeric: tabular-nums;
}

.mk__rh h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; }

.mk__chip {
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(var(--rc-rgb), 0.35);
  background: rgba(var(--rc-rgb), 0.1);
  color: var(--rc);
  white-space: nowrap;
}

.mk__count {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted-3);
}

.mk__lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.mk__steps {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.5rem;
}

.mk__steps li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-2);
}

.mk__steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.42rem;
  margin-left: 3px;
  border-radius: 50%;
  border: 1.5px solid var(--rc);
}

/* a pulse crossing the card, on the route's own colour and its own beat */
.mk__pulse {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent,
    rgba(var(--rc-rgb), 0.85), transparent);
  transform: translateX(-100%);
  animation: mk-pulse 4.2s var(--ease) infinite;
}

.mk__r[data-g="subjective"] .mk__pulse { animation-delay: 0.5s; }
.mk__r[data-g="competency"] .mk__pulse { animation-delay: 1s; }

@keyframes mk-pulse {
  0%, 12%  { transform: translateX(-100%); }
  55%      { transform: translateX(100%); }
  100%     { transform: translateX(100%); }
}

/* ---- the gate ---- */

.mk__gate {
  position: relative;
  padding: clamp(1.2rem, 2.8vw, 1.7rem);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 55%),
    var(--ink-2);
  overflow: hidden;
}

/* a slow band of light, so the gate reads as the live step */
.mk__gate::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent,
    rgba(var(--accent-rgb), 0.09), transparent);
  animation: mk-sweep 7s var(--ease) infinite;
}

@keyframes mk-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(350%); }
}

.mk__gh {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
}

.mk__gk {
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mk__gh h3 {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
}

.mk__gcols {
  position: relative;
  display: grid;
  gap: 1rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.mk__g b {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--paper);
}

.mk__g p {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted-2);
}

/* ---------- 7 · the blueprint ----------
   The first version was three bars on three tracks, which made the reader
   assemble the paper in their head and left two thirds of every track empty.
   This shows the whole 100 marks as one rule, then breaks it down — so the
   split is read at a glance and the detail is there underneath.

   Hover linking is done with :has() rather than JS: pointing at a family
   anywhere in the block dims the other two everywhere in the block.
   ========================================================================== */

.qbp {
  padding: clamp(1.2rem, 2.8vw, 1.8rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  --c-objective: var(--p2);
  --c-objective-rgb: var(--p2-rgb);
  --c-subjective: var(--p5);
  --c-subjective-rgb: var(--p5-rgb);
  --c-competency: var(--p7);
  --c-competency-rgb: var(--p7-rgb);
}

/* ---- head ---- */

.qbp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

.qbp__id { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--muted); }

.qbp__badge {
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--deco-rgb), 0.35);
  background: rgba(var(--deco-rgb), 0.1);
  color: var(--deco);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.qbp__tot {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted-2);
  font-size: 0.82rem;
}

.qbp__tot b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.qbp__tot i {
  width: 1px;
  height: 15px;
  margin: 0 0.55rem;
  background: var(--line);
  align-self: center;
}

/* ---- the 100-mark rule ---- */

.qbp__stack {
  display: flex;
  gap: 3px;
  height: 46px;
  margin-bottom: 0.5rem;
}

.qbp__seg {
  position: relative;
  width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: width 1.1s var(--ease), filter 0.35s ease, opacity 0.35s ease;
  background: linear-gradient(120deg,
    rgba(var(--sc-rgb), 0.55), rgba(var(--sc-rgb), 0.95));
}

.qbp[data-reveal].is-in .qbp__seg { width: var(--w); }

.qbp__seg--objective  { --sc-rgb: var(--c-objective-rgb); }
.qbp__seg--subjective { --sc-rgb: var(--c-subjective-rgb); }
.qbp__seg--competency { --sc-rgb: var(--c-competency-rgb); }

.qbp__seg-v {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #0b0d11;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: qbp-num 0.5s var(--ease) 1.1s forwards;
}

@keyframes qbp-num { to { opacity: 1; } }

/* a light travelling the full rule, once it has drawn itself */
.qbp__seg::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, 0.4), transparent);
  animation: qbp-sheen 5.5s var(--ease) infinite;
  animation-delay: 1.6s;
}

@keyframes qbp-sheen {
  0%, 60% { transform: translateX(-110%); }
  92%     { transform: translateX(110%); }
  100%    { transform: translateX(110%); }
}

.qbp__scale {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  font-size: 0.7rem;
  color: var(--muted-3);
  font-variant-numeric: tabular-nums;
  border-top: 1px dashed var(--line-soft);
  padding-top: 0.35rem;
}

/* ---- the two panes ---- */

.qbp__body {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 860px) {
  .qbp__body { grid-template-columns: 1fr; }
}

/* ---- family rows ---- */

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

.qbp__row {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.35);
  transition: border-color 0.35s ease, transform 0.35s var(--ease), opacity 0.35s ease;
}

.qbp__row:hover { transform: translateX(3px); }

.qbp__swatch { align-self: stretch; border-radius: 999px; background: var(--rc); }

.qbp__row[data-g="objective"]  { --rc: var(--c-objective);  --rc-rgb: var(--c-objective-rgb); }
.qbp__row[data-g="subjective"] { --rc: var(--c-subjective); --rc-rgb: var(--c-subjective-rgb); }
.qbp__row[data-g="competency"] { --rc: var(--c-competency); --rc-rgb: var(--c-competency-rgb); }

.qbp__row:hover { border-color: rgba(var(--rc-rgb), 0.6); }

.qbp__rmain b { display: block; font-size: 0.94rem; font-weight: 600; }

.qbp__types {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted-2);
}

.qbp__nums { text-align: right; }

.qbp__marks {
  display: block;
  font-size: 0.74rem;
  color: var(--muted-2);
}

.qbp__marks b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper);
  margin-right: 0.28rem;
  font-variant-numeric: tabular-nums;
}

.qbp__q {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.73rem;
  color: var(--muted-3);
  white-space: nowrap;
}

/* ---- the printed sheet ---- */

.qbp__paper {
  position: relative;
  padding: 0.95rem 1rem 1.1rem;
  border: 1px dashed rgba(var(--deco-rgb), 0.3);
  border-radius: 12px;
  background: rgba(var(--deco-rgb), 0.04);
}

.qbp__paper-h {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

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

.qbp__sec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
  transition: opacity 0.35s ease;
}

.qbp__sec-k {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sc);
}

.qbp__sec[data-g="objective"]  { --sc: var(--c-objective);  --sc-rgb: var(--c-objective-rgb); }
.qbp__sec[data-g="subjective"] { --sc: var(--c-subjective); --sc-rgb: var(--c-subjective-rgb); }
.qbp__sec[data-g="competency"] { --sc: var(--c-competency); --sc-rgb: var(--c-competency-rgb); }

.qbp__sec-n { font-size: 0.82rem; color: var(--muted); }
.qbp__sec-m { font-size: 0.74rem; color: var(--muted-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.qbp__sec-bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--line-rgb), 0.5);
  overflow: hidden;
}

.qbp__sec-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--sc);
  transition: width 1s var(--ease);
}

.qbp[data-reveal].is-in .qbp__sec-bar i { width: var(--w); }

.qbp__paper-n {
  margin: 0.9rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted-3);
}

/* ---- hover linking, without JS ----
   Pointing at a family anywhere in the block holds it and fades the rest. */
.qbp:has(.qbp__seg--objective:hover)  :is(.qbp__seg--subjective, .qbp__seg--competency),
.qbp:has(.qbp__seg--subjective:hover) :is(.qbp__seg--objective,  .qbp__seg--competency),
.qbp:has(.qbp__seg--competency:hover) :is(.qbp__seg--objective,  .qbp__seg--subjective),
.qbp:has(.qbp__row[data-g="objective"]:hover)  :is([data-g="subjective"], [data-g="competency"]),
.qbp:has(.qbp__row[data-g="subjective"]:hover) :is([data-g="objective"],  [data-g="competency"]),
.qbp:has(.qbp__row[data-g="competency"]:hover) :is([data-g="objective"],  [data-g="subjective"]) {
  opacity: 0.32;
}

.qbp__seg:hover, .qbp__seg:focus-visible { filter: brightness(1.15); }
.qbp__seg:focus-visible { outline: 2px solid var(--deco); outline-offset: 2px; }

/* ---- the closing note ---- */

.qbp__note {
  display: flex;
  gap: 0.6rem;
  margin: 1.3rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted-2);
}

.qbp__note i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--deco);
  animation: qt-blink 2.6s var(--ease) infinite;
}

/* ---------- 8 · reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .qbn__glow, .qbn__scan, .qbn__fam, .qbn__opt, .qbn__rule,
  .qbn__sub, .qbn__opt--right circle,
  .qbp__seg::after, .qbp__note i,
  .mk__fan path, .mk__join path, .mk__drop path,
  .mk__pulse, .mk__gate::before { animation: none; }
  .mk__r:hover { transform: none; }
  .qbn__fam { opacity: 1; }
  .qbn__fam:not([style*="--f:2"]) { opacity: 0; }
  .qbn__opt, .qbn__rule, .qbn__sub { opacity: 1; }
  .qt-tab:hover { transform: none; }
  .ex__pane.is-on { animation: none; }
  .qbp__seg, .qbp__sec-bar i { transition: none; }
  .qbp__seg-v { animation: none; opacity: 1; }
  .qbp__row:hover { transform: none; }
}


/* ---------- the marking pass ----------
   The room left under a one-line answer was the biggest hole on this page.
   Rather than shrink the sheet, it is filled with what happens next: a pass
   travelling down the paper, and the three steps that take this format to a
   score. margin-top:auto pins the strip to the foot of the sheet, so a
   two-line type and a ten-line type both look deliberate.
   ========================================================================== */

/* the pass itself — a band of light crossing the ruled area */
.ex__pass {
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    rgba(var(--fc-rgb), 0.07) 45%,
    rgba(var(--fc-rgb), 0.13) 70%,
    transparent);
  animation: ex-pass 7s var(--ease) infinite;
}

/* the leading edge, so it reads as a marker travelling rather than a glow */
.ex__pass::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--fc-rgb), 0.75) 30%, rgba(var(--fc-rgb), 0.75) 70%, transparent);
}

@keyframes ex-pass {
  0%       { transform: translateY(-42%); opacity: 0; }
  12%      { opacity: 1; }
  78%      { opacity: 1; }
  88%, 100%{ transform: translateY(240%); opacity: 0; }
}

.ex__marking {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed rgba(var(--fc-rgb), 0.32);
}

.ex__mk-k {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.ex__mk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.85rem;
  flex: 1 1 auto;
}

/* the arrow between steps, drawn rather than typed */
.ex__mk-steps li + li::before {
  content: "";
  position: absolute;
  left: -0.62rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1.2px solid var(--line);
  border-right: 1.2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

.ex__mk-steps li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.78rem;
  color: var(--muted-2);
}

/* each step lights in turn, on the same 7s beat as the pass above it */
.ex__mk-steps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--fc-rgb), 0.5);
  background: transparent;
  animation: ex-step 7s var(--ease) infinite;
  animation-delay: calc(var(--s) * 0.9s + 1.2s);
}

@keyframes ex-step {
  0%, 8%   { background: transparent; box-shadow: 0 0 0 0 rgba(var(--fc-rgb), 0.5); }
  16%      { background: var(--fc); box-shadow: 0 0 0 5px rgba(var(--fc-rgb), 0); }
  70%      { background: var(--fc); }
  84%, 100%{ background: transparent; }
}

.ex__mk-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--fc-rgb), 0.4);
  background: rgba(var(--fc-rgb), 0.09);
  white-space: nowrap;
}

.ex__mk-score b {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--fc);
  font-variant-numeric: tabular-nums;
}

.ex__mk-score span { font-size: 0.7rem; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .ex__pass { animation: none; opacity: 0; }
  .ex__mk-steps i { animation: none; background: var(--fc); }
}