/* STUDY: the lesson's apparatus (st-) under the lecture, and its quiz (qz-) in the margin.
   Set like an edition's back matter: an ink rule starts each section, hairlines part the rows, rubric numbers the
   ideas. Verdigris says right, rubric says missed. Feedback lands inside 120ms; questions turn with a 240ms fade. */

.st-sr, .qz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-empty, .qz-empty { margin: 0; padding: 14px 0; font: italic 400 1.0625rem/1.5 var(--font-serif); color: var(--ink-3); }

/* ---------- the overview ---------- */
.st { margin-top: 56px; }
.st-title { margin: 0; font: 400 clamp(1.75rem, 2.5vw, 2.25rem)/1.08 var(--font-serif); letter-spacing: -0.014em; font-variation-settings: "opsz" 72, "SOFT" 30; }
.st-lede { margin: 8px 0 0; max-width: 40em; font: italic 400 1.0625rem/1.45 var(--font-serif); color: var(--ink-2); }
.st-sec { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ink); }
.st-sec > .label { margin-bottom: 10px; }
.st-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-c { font: 500 0.6875rem/1 var(--font-data); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.st-k { margin: 0 0 2px; font: italic 400 0.9375rem/1.4 var(--font-serif); color: var(--ink-3); }
.st-note { margin: 0 0 4px; font: italic 0.9375rem/1.45 var(--font-serif); color: var(--ink-3); }

/* before you watch: what to have in mind, and the words the lecture will use */
.st-before { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px 44px; }
.st-recall { list-style: none; margin: 0; padding: 0; }
.st-recall li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--rule-2); font: 400 1.03125rem/1.5 var(--font-serif); text-wrap: pretty; }
.st-recall li::before { content: ""; position: absolute; left: 3px; top: calc(10px + 0.58em); width: 7px; height: 7px; border: 1.5px solid var(--rubric); border-radius: 50%; box-sizing: border-box; }
.st-terms { margin: 0; }
.st-terms div { padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.st-terms dt { font: 600 1rem/1.35 var(--font-serif); }
.st-terms dd { margin: 3px 0 0; font: 400 0.96875rem/1.5 var(--font-serif); color: var(--ink-2); text-wrap: pretty; }

/* key ideas, set like a contents page: the number in rubric, the second at the right edge */
.st-ideas { list-style: none; margin: 0; padding: 0; }
.st-ideas li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.st-n { font: 600 0.875rem/1 var(--font-serif); color: var(--rubric); text-align: right; font-variant-numeric: lining-nums; }
.st-ideas p { margin: 0; font: 400 1.0625rem/1.5 var(--font-serif); text-wrap: pretty; }
.st-t {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 3px;
  font: 500 0.75rem/1 var(--font-data); color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.st-t::before { content: ""; border: 4px solid transparent; border-left: 6px solid var(--rubric); border-right: 0; }
.st-t:hover { color: var(--ink); border-color: var(--ink); background: var(--leaf); }
.st-t:active { transform: scale(0.97); }

/* a dated claim: a rubric dagger beside the idea; once its quiz item is answered, what holds now, under it */
.st-ideas li > div { min-width: 0; }
.st-dag { margin-left: 2px; font: 600 0.8125rem/0 var(--font-serif); color: var(--rubric); }
.st-ideas .st-changed { margin: 6px 0 0; font: italic 400 0.9375rem/1.45 var(--font-serif); color: var(--ink-2); }
.st-changed b { font-style: normal; font-weight: 600; color: var(--rubric); }
.st-changed .link { font: 0.8125rem/1 var(--font-ui); white-space: nowrap; }

/* common mistakes: the belief, then the correction beside it */
.st-pits { list-style: none; margin: 0; padding: 0; }
.st-pits li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 36px; padding: 13px 0; border-bottom: 1px solid var(--rule-2); }
.st-pits p { position: relative; margin: 0; padding-left: 22px; font: 400 1rem/1.5 var(--font-serif); text-wrap: pretty; }
.st-wrong { color: var(--ink-3); }
.st-right { color: var(--ink); }
.st-mk { position: absolute; left: 0; top: 0; font: 600 0.8125rem/1.5rem var(--font-ui); }
.st-wrong .st-mk { color: var(--ink-3); }
.st-right .st-mk { color: var(--verdigris); }

/* disclosures: the summary, hints, model answers */
.st-sum > summary, .st-more > summary {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 0; list-style: none; cursor: pointer;
  font: 500 0.84375rem/1.2 var(--font-ui); color: var(--ink-2); transition: color 120ms var(--ease-out);
}
.st-sum > summary::-webkit-details-marker, .st-more > summary::-webkit-details-marker { display: none; }
.st-sum > summary::before, .st-more > summary::before {
  content: "+"; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--rule); border-radius: 3px;
  font: 500 0.75rem/1 var(--font-data); color: var(--rubric); transition: border-color 120ms var(--ease-out);
}
.st-sum[open] > summary::before, .st-more[open] > summary::before { content: "−"; }
.st-sum > summary:hover, .st-more > summary:hover, .st-sum[open] > summary, .st-more[open] > summary { color: var(--ink); }
.st-sum > summary:hover::before, .st-more > summary:hover::before { border-color: var(--ink); }
.st-sum > p { margin: 10px 0 2px; max-width: 64ch; font: 400 1.125rem/1.62 var(--font-serif); text-wrap: pretty; }
.st-sum > p::first-letter { float: left; margin: 0.07em 0.1em 0 0; font: 400 3.35em/0.8 var(--font-serif); color: var(--rubric); font-variation-settings: "opsz" 72; }
.st-more > p { margin: 4px 0 10px; padding: 10px 14px; max-width: 64ch; background: var(--leaf); border-left: 2px solid var(--rule); font: 400 1rem/1.55 var(--font-serif); color: var(--ink-2); text-wrap: pretty; }
.st-model > p { border-left-color: var(--ink); color: var(--ink); }

/* practise it: an exercise, a hint, your answer, the model, and an honest mark. The writing surface (.st-ta), your
   answer (.st-mine), the model (.st-ref) and the key points (.st-keys) are set with the quiz's short answers below,
   so a written answer reads one way everywhere */
.st-exs, .st-iv { list-style: none; margin: 0; padding: 0; }
.st-ex { padding: 14px 0 18px; border-bottom: 1px solid var(--rule-2); }
.st-ex-k { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font: 600 0.65625rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.st-ex-k b { font: 600 0.875rem/1 var(--font-serif); letter-spacing: 0; color: var(--rubric); font-variant-numeric: lining-nums; }
.st-ex-q { margin: 0 0 8px; max-width: 64ch; font: 400 1.1875rem/1.45 var(--font-serif); text-wrap: pretty; }
.st-work { max-width: 64ch; margin-top: 8px; }
.st-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.st-act .btn { height: 38px; padding: 0 16px; font-size: 0.84375rem; }
.st .quiet-btn kbd, .qz .quiet-btn kbd { border-color: var(--rule); color: var(--ink-2); }   /* .btn kbd is paper-coloured, for ink buttons */
.st-ref { background: var(--leaf); }
.st-tick { margin: 16px 0 6px; font: 600 0.65625rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.st-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.st-self > span { font-size: 0.8125rem; color: var(--ink-3); }
.st-self .seg button { padding: 9px 14px; transition: background 120ms var(--ease-out), color 120ms var(--ease-out); }
.st-self .seg button + button { border-left: 1px solid var(--rule); }
.st-self .seg button:not(:disabled):hover { color: var(--ink); }
.st-self .seg button:disabled { opacity: 0.4; cursor: default; }
.st-self .seg button[aria-pressed="true"] { color: var(--leaf); }
.st-self .seg [data-self="2"][aria-pressed="true"] { background: var(--verdigris); }
.st-redo { margin-left: auto; font-size: 0.8125rem; }
.st-cap { margin: 8px 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.st-cap:empty { display: none; }

/* in an interview */
.st-iv li { padding: 12px 0 14px; border-bottom: 1px solid var(--rule-2); }
.st-iq { margin: 0 0 6px; padding-left: 0.42em; max-width: 64ch; font: italic 400 1.1875rem/1.45 var(--font-serif); text-wrap: pretty; }
.st-iq::before { content: "“"; margin-left: -0.42em; }   /* hangs in the question's own padding: the tab panel clips anything left of it */
.st-iq::after { content: "”"; }
.st-colo { margin: 28px 0 0; font: italic 0.84375rem/1.4 var(--font-serif); color: var(--ink-3); }

/* ---------- the quiz ---------- */
.qz { scroll-margin-top: calc(var(--mast-h, 0px) + 16px); }
.qz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qz-head .label { margin: 0; }
.qz-n { font: 500 0.6875rem/1 var(--font-data); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qz-score { margin: 8px 0 0; font: italic 400 0.96875rem/1.4 var(--font-serif); color: var(--ink-2); }
.qz-score b { font-style: normal; font-weight: 600; color: var(--rubric); font-variant-numeric: lining-nums; }

/* pips: one per question, coloured by the first try */
.qz-pips { display: flex; flex-wrap: wrap; gap: 0; margin: 10px -6px 0; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); }
.qz-pip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.qz-pip i, .qz-dot { position: relative; display: block; width: 10px; height: 10px; overflow: hidden; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--ink-3); transition: box-shadow 120ms var(--ease-out), background 120ms var(--ease-out); }
.qz-pip:hover i { box-shadow: inset 0 0 0 1.25px var(--ink); }
.qz-pip[data-s="right"] i, .qz-dot[data-s="right"] { background: var(--verdigris); box-shadow: none; }
.qz-pip[data-s="miss"] i, .qz-dot[data-s="miss"] { background: var(--rubric); box-shadow: none; }
.qz-pip[data-s="part"] i, .qz-dot[data-s="part"] { box-shadow: inset 0 0 0 1.25px var(--verdigris); }
.qz-pip[data-s="part"] i::after, .qz-dot[data-s="part"]::after { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--verdigris); }
.qz-pip[aria-current] i { outline: 1.5px solid var(--ink); outline-offset: 2.5px; }

/* the question */
.qz-stage { padding-top: 16px; outline: none; }
.qz-turn { animation: qz-in 240ms var(--ease-out); }
@keyframes qz-in { from { opacity: 0; transform: translateY(4px); } }
.qz-k { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font: 600 0.65625rem/1.3 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.qz-k span { font: 500 0.65625rem/1.3 var(--font-data); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.qz-q { margin: 0 0 16px; font: 400 1.25rem/1.36 var(--font-serif); letter-spacing: -0.004em; text-wrap: pretty; }

/* options in the assess idiom: an ink rule over the list, a hairline under each, a circled letter. After the answer,
   a left rule in verdigris marks the right one and in rubric the wrong pick */
.qz-opts { display: grid; border-top: 1px solid var(--ink); }
.qz-opt {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 12px; align-items: start; width: 100%; min-height: 48px; padding: 12px 8px 12px 10px;
  text-align: left; border-bottom: 1px solid var(--rule-2); font: 400 1rem/1.4 var(--font-serif);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.qz-opt:not(:disabled):hover { background: var(--leaf); }
.qz-opt:not(:disabled):active { background: var(--wash); }
.qz-opt:disabled { cursor: default; }
.qz-o { min-width: 0; padding-top: 2px; }
.qz-key { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--rule); border-radius: 50%; font: 500 0.75rem/1 var(--font-serif); color: var(--ink-2); transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out); }
.qz-opt:not(:disabled):hover .qz-key { border-color: var(--ink); color: var(--ink); }
.qz-mk { padding-top: 6px; font: 600 0.875rem/1 var(--font-ui); text-align: center; }
.qz-opt.is-right { box-shadow: inset 2px 0 0 var(--verdigris); }
.qz-opt.is-right .qz-key { background: var(--verdigris); border-color: var(--verdigris); color: var(--leaf); }
.qz-opt.is-right .qz-mk { color: var(--verdigris); }
.qz-opt.is-wrong { box-shadow: inset 2px 0 0 var(--rubric); background: var(--wash); }
.qz-opt.is-wrong .qz-key { background: var(--rubric); border-color: var(--rubric); color: var(--leaf); }
.qz-opt.is-wrong .qz-mk { color: var(--rubric); }
.qz-opt.is-dim { color: var(--ink-3); }

/* a first try before the lecture is half watched: said once, above the question, washed and ruled like a margin note */
.qz-gate { margin: 0 0 18px; padding: 12px 14px 14px; background: var(--wash); box-shadow: inset 2px 0 0 var(--rubric); }
.qz-gate > p { margin: 0; font: italic 400 1rem/1.45 var(--font-serif); color: var(--ink); }
.qz-gate .qz-act { margin-top: 12px; }

/* the verdict and what to do next */
.qz-after { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-2); animation: qz-in 120ms var(--ease-out); scroll-margin-bottom: 72px; }
.qz-verdict { margin: 0; font: 500 1.1875rem/1.3 var(--font-serif); }
.qz-verdict[data-g="0"] { color: var(--verdigris); }
.qz-verdict[data-g="2"] { color: var(--rubric); }
.qz-sub { margin: 3px 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.qz-why { margin: 10px 0 0; font: 400 1rem/1.52 var(--font-serif); color: var(--ink-2); text-wrap: pretty; }
.qz-seek { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: color 120ms var(--ease-out), text-decoration-color 120ms var(--ease-out); }
.qz-seek span { font: 500 0.75rem/1 var(--font-data); color: var(--rubric); }
.qz-seek:hover { color: var(--ink); text-decoration-color: var(--rubric); }
.qz-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; }
.qz-act .btn { height: 38px; padding: 0 16px; font-size: 0.84375rem; }
.qz-hint { font-size: 0.78125rem; color: var(--ink-3); }

/* short answers: write, compare with the model, tick what you covered, grade */
.qz-ta.autosize, .st-ta.autosize { padding: 10px 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; font: 400 1rem/1.5 var(--font-serif); color: var(--ink); transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
.qz-ta.autosize:focus-visible, .st-ta.autosize:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.qz-ta::placeholder, .st-ta::placeholder { color: var(--ink-3); font-style: italic; }
.qz-ta[readonly] { color: var(--ink-2); background: transparent; }
.qz-model, .qz-mine, .st-ref, .st-mine { margin: 14px 0 0; padding: 10px 14px; background: var(--paper); border-left: 2px solid var(--ink); font: 400 1rem/1.52 var(--font-serif); text-wrap: pretty; }
.qz-mine, .st-mine { border-left-color: var(--rule); color: var(--ink-2); }
.qz-model > span, .qz-mine > span, .st-ref > span, .st-mine > span { display: block; margin-bottom: 4px; font: 600 0.625rem/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubric); }
.qz-mine > span, .st-mine > span { color: var(--ink-3); }
.qz-model + .qz-k { margin-top: 16px; }
.qz-keys, .st-keys { list-style: none; margin: 0; padding: 0; }
.qz-keys li, .st-keys li { border-bottom: 1px solid var(--rule-2); }
.qz-keys label, .st-keys label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; font: 400 0.96875rem/1.45 var(--font-serif); cursor: pointer; }
.qz-keys input, .st-keys input { width: 15px; height: 15px; margin: 0; accent-color: var(--verdigris); translate: 0 2px; }
.qz-keys.is-read { margin-top: 10px; }
.qz-keys.is-read li { position: relative; padding: 8px 0 8px 26px; font: 400 0.9375rem/1.45 var(--font-serif); color: var(--ink-2); }
.qz-keys.is-read li::before { content: "·"; position: absolute; left: 6px; top: 8px; font: 600 0.9375rem/1.45 var(--font-ui); color: var(--ink-3); }
.qz-keys.is-read li[data-on] { color: var(--ink); }
.qz-keys.is-read li[data-on]::before { content: "✓"; left: 2px; font-size: 0.8125rem; color: var(--verdigris); }
.qz-grade { margin: 14px 0 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.qz-grade b { font-weight: 600; color: var(--ink); }
.qz-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qz-grades button {
  height: 40px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; font: 500 0.84375rem/1 var(--font-ui); color: var(--ink-2);
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out), color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.qz-grades button:not(:disabled):hover { border-color: var(--ink); color: var(--ink); }
.qz-grades button:not(:disabled):active { transform: scale(0.98); }
.qz-grades button:disabled { opacity: 0.4; cursor: default; }
.qz-grades button[data-suggest] { background: var(--ink); border-color: var(--ink); color: var(--leaf); }

/* the end: the score, the misses, another go at just those */
.qz-end { padding-top: 2px; }
.qz-big { margin: 0; font: 400 1.75rem/1.15 var(--font-serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.qz-big b { font-weight: 500; color: var(--rubric); font-variant-numeric: lining-nums; }
.qz-end-note { margin: 10px 0 0; font: italic 400 1rem/1.45 var(--font-serif); color: var(--ink-2); }
.qz-missed { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--rule-2); }
.qz-missed button { display: grid; grid-template-columns: 10px 16px minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--rule-2); text-align: left; transition: color 120ms var(--ease-out); }
.qz-missed .qz-dot { translate: 0 1px; }
.qz-mn { font: 600 0.8125rem/1 var(--font-serif); color: var(--rubric); text-align: right; font-variant-numeric: lining-nums; }
.qz-mq { font: 400 0.96875rem/1.4 var(--font-serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qz-missed button:hover .qz-mq { color: var(--rubric); }

@media (hover: none) { .qz kbd, .st kbd { display: none; } }   /* no keyboard to press them on */
/* fingers need 44px; a pointer does not */
@media (pointer: coarse) {
  .st-sum > summary, .st-more > summary { min-height: 44px; padding: 0; }
  .st-self .seg button { min-height: 44px; padding: 0 16px; }
  .st-t { min-height: 44px; padding: 0 10px; }
  .st-redo, .qz-seek { min-height: 44px; }
  .qz-pip { width: 44px; height: 44px; }
  /* the first dot lines up with the text; the hairline moves to the stage so it keeps the text's width */
  .qz-pips { margin: 2px 0 0 -17px; padding-bottom: 0; border-bottom: 0; }
  .qz-stage { margin-top: 2px; border-top: 1px solid var(--rule-2); }
  .qz-act .btn, .st-act .btn, .qz-grades button { height: 44px; }
  .qz-keys label, .st-keys label { min-height: 44px; align-items: center; padding: 6px 0; }
  .qz-keys input, .st-keys input { translate: none; }
  .qz-missed button { min-height: 44px; align-items: center; }
}
@media (max-width: 760px) {
  .st { margin-top: 44px; }
  .st-pits li { grid-template-columns: minmax(0, 1fr); }
  .st-ideas li { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; }
  .st-ex-q, .st-iq { font-size: 1.125rem; }
  .qz-q { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-turn, .qz-after { animation: none; }
  .st-t, .qz-opt, .qz-key, .qz-grades button, .qz-pip i, .st-self .seg button { transition: none; }
}