/* Physics Atlas — component styles (custom elements). */
x-sim, x-predict, x-misconception, x-mcq, x-numeric, x-steps, x-equation, x-mission, x-lab, x-checklist, x-compare, x-callout, x-hl { display: block; }
x-option, x-feedback, x-reveal, x-step, x-hint, x-solution, x-var { display: none; } /* before upgrade */
x-term, x-bookref { display: inline; }

/* shared card look for interactive blocks */
.quiz, .x-steps, .x-equation, .gate, .x-checklist {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5); max-width: var(--measure);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  font-family: var(--font-ui); font-size: var(--fs-1); line-height: 1.5;
}
.quiz-head, .gate-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.quiz-head p, .gate-head p, .quiz-stem p { margin: 0 0 .5em; max-width: none; }
.quiz-stem, .gate-question { font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.55; }
.quiz-badge, .gate-badge, .lab-badge, .mission-badge {
  align-self: flex-start; font: 700 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 999px; background: var(--unit-soft); color: var(--unit);
}
.quiz-actions, .gate-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.quiz-feedback { margin-top: var(--sp-3); border-radius: var(--radius); }
.quiz-feedback:empty { display: none; }
.quiz-feedback.is-good, .quiz-feedback.is-bad { padding: var(--sp-3) var(--sp-4); }
.quiz-feedback.is-good { background: var(--good-soft); border-left: 4px solid var(--good); }
.quiz-feedback.is-bad { background: var(--bad-soft); border-left: 4px solid var(--bad); }
.quiz-feedback p { margin: 0 0 .4em; } .quiz-feedback p:last-child { margin: 0; }
.fb-body { font-family: var(--font-prose); font-size: var(--fs-2); }
.quiz-hint, .quiz-solution { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--sunken); border-radius: var(--radius); font-family: var(--font-prose); font-size: var(--fs-2); }
.quiz-hint::before { content: "Hint"; display: block; font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.quiz-solution::before { content: "Worked solution"; display: block; font: 700 11px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.quiz-hint p:last-child, .quiz-solution p:last-child { margin-bottom: 0; }

/* ---- x-mcq ---- */
.mcq-options { display: grid; gap: var(--sp-2); }
.mcq-option {
  display: flex; gap: var(--sp-3); align-items: flex-start; text-align: left; width: 100%; padding: 10px 14px;
  font: 400 var(--fs-2)/1.45 var(--font-prose); color: var(--ink); background: var(--raised);
  border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background .12s;
}
.mcq-option:hover:not(:disabled) { border-color: var(--accent); }
.mcq-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.mcq-letter { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sunken); font: 700 13px/1 var(--font-ui); color: var(--ink-2); margin-top: 1px; }
.mcq-option[aria-checked="true"] .mcq-letter { background: var(--accent); color: var(--on-accent); }
.mcq-option.is-wrong { border-color: var(--bad); background: var(--bad-soft); opacity: .8; cursor: default; }
.mcq-option.is-wrong .mcq-letter { background: var(--bad); color: #fff; }
.mcq-option.is-wrong .mcq-text { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.mcq-option.is-right { border-color: var(--good); background: var(--good-soft); opacity: 1; }
.mcq-option.is-right .mcq-letter { background: var(--good); color: #fff; }
.mcq-option:disabled { cursor: default; color: var(--ink); }

/* ---- x-numeric / x-steps inputs ---- */
.num-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.num-field { display: inline-flex; align-items: center; gap: 8px; }
.num-input { width: 9.5em; font-variant-numeric: tabular-nums; }
.num-input.is-right { border-color: var(--good); background: var(--good-soft); }
.num-input.is-wrong { border-color: var(--bad); }
.num-unit { color: var(--ink-2); }

/* ---- x-steps ---- */
.steps-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.steps-problem { font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.55; padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line-strong); }
.steps-problem p:last-child { margin-bottom: 0; }
.steps-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); }
.step { display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3); align-items: start; }
.step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-ui); background: var(--sunken); color: var(--ink-2); }
.step.is-revealed .step-num { background: var(--unit); color: var(--bg); }
.step.is-future { opacity: .55; }
.step-main { min-width: 0; }
.step-body { font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.55; }
.step-body p { margin: 0 0 .5em; }
.step-ask { font-weight: 600; margin: 2px 0 8px; }
.step-prompt { padding: var(--sp-3); background: var(--sunken); border-radius: var(--radius); }
.step-fb { margin: 8px 0 0; font-size: var(--fs-0); }
.step-fb.is-good { color: var(--good); } .step-fb.is-bad { color: var(--bad); }

/* ---- x-equation ---- */
.eq-head { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.eq-help { font-size: var(--fs-0); color: var(--muted); }
.eq-target-icon { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 6px currentColor; vertical-align: -1px; }
.eq-tex { font-size: 1.25rem; padding: var(--sp-2) 0; overflow-x: auto; }
.eq-rows { display: grid; gap: 4px; }
.eq-row { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr auto 40px; gap: var(--sp-3); align-items: center; padding: 6px 8px; border-radius: var(--radius); }
.eq-row.is-solved { background: var(--unit-soft); }
.eq-name { display: flex; flex-direction: column; line-height: 1.2; cursor: default; }
.eq-sym { font-size: 1.15rem; }
.eq-scrub { cursor: ew-resize; touch-action: none; user-select: none; }
.eq-row.is-solved .eq-scrub { cursor: default; }
.eq-label { font-size: 12px; color: var(--muted); }
.eq-value { display: inline-flex; align-items: center; gap: 6px; }
.eq-num { width: 6.2em; text-align: right; font-variant-numeric: tabular-nums; min-height: 34px; padding: 4px 8px; }
.eq-row.is-solved .eq-num { font-weight: 700; color: var(--unit); background: transparent; border-color: transparent; }
.eq-unit { min-width: 2.5em; color: var(--ink-2); }
.eq-solve { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--raised); cursor: pointer; position: relative; }
.eq-solve::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid var(--muted); }
.eq-solve[aria-pressed="true"] { border-color: var(--unit); background: var(--unit); }
.eq-solve[aria-pressed="true"]::after { border-color: var(--bg); background: var(--bg); inset: 11px; }
.eq-msg { margin: var(--sp-2) 0 0; color: var(--warn); font-size: var(--fs-0); }
.eq-msg:empty { display: none; }
.x-equation.is-out .is-solved .eq-num { color: var(--warn); }
.eq-row.is-constant .eq-num { background: transparent; border-color: transparent; }
@media (max-width: 560px) {
  .eq-row { grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "name value solve" "slider slider slider"; row-gap: 0; }
  .eq-name { grid-area: name; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
  .eq-label { overflow-wrap: anywhere; }
  .eq-value { grid-area: value; } .eq-solve { grid-area: solve; } .eq-slider { grid-area: slider; }
}

/* ---- gates: x-predict / x-misconception ---- */
.gate { max-width: var(--wide); border-color: color-mix(in srgb, var(--unit) 40%, var(--line)); }
.gate-misconception .gate-badge { background: var(--warn-soft); color: var(--warn); }
.gate-choices { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); max-width: var(--measure); }
.gate-misconception .gate-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gate-choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; text-align: left; cursor: pointer;
  font: 400 var(--fs-1)/1.45 var(--font-ui); color: var(--ink); background: var(--raised);
  border: 1.5px solid var(--line); border-radius: var(--radius);
}
.gate-choice:hover:not(:disabled) { border-color: var(--unit); }
.gate-choice[aria-checked="true"] { border-color: var(--unit); background: var(--unit-soft); }
.gate-choice:disabled { cursor: default; color: var(--ink); }
.gate-choice:disabled:not(.is-chosen):not(.is-answer) { opacity: .55; }
.gate-dot { flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line-strong); }
.gate-choice[aria-checked="true"] .gate-dot { border-color: var(--unit); box-shadow: inset 0 0 0 3px var(--raised); background: var(--unit); }
.gate-choice.is-answer { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.gate-status { margin: 0; color: var(--ink-2); font-size: var(--fs-0); }
.gate-why { display: block; margin-top: var(--sp-3); max-width: var(--measure); }
.gate-why span { display: block; font-size: var(--fs-0); color: var(--muted); margin-bottom: 4px; }
.gate-content { margin-top: var(--sp-4); }
.gate-content > :first-child { margin-top: 0; }
.gate-after { margin-top: var(--sp-3); }
.gate-reveal { margin-top: var(--sp-3); font-family: var(--font-prose); font-size: var(--fs-2); line-height: var(--lh-prose); }
.gate-verdict { font-family: var(--font-ui); font-size: var(--fs-1); }
.gate-verdict:empty { display: none; }
.gate-verdict.is-good, .gate-verdict.is-bad { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.gate-verdict.is-good { background: var(--good-soft); border-left: 4px solid var(--good); }
.gate-verdict.is-bad { background: var(--warn-soft); border-left: 4px solid var(--warn); }
.gate-verdict p { margin: 0; }
.gate-feedback { margin-top: 6px; font-family: var(--font-prose); }

/* ---- x-mission ---- */
.x-mission {
  margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); max-width: var(--wide); border-radius: var(--radius-l);
  border: 1.5px solid color-mix(in srgb, var(--warn) 55%, var(--line)); font-family: var(--font-ui);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn-soft) 70%, var(--surface)), var(--surface) 140px);
}
.mission-head { display: flex; align-items: center; gap: var(--sp-3); }
.mission-badge { background: var(--warn); color: var(--bg); }
.mission-title { margin: 0; font-size: var(--fs-3); flex: 1; }
.mission-star { width: 28px; height: 28px; background: var(--line-strong); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.x-mission.is-done .mission-star { background: var(--warn); }
.mission-brief { font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.55; margin-top: var(--sp-2); }
.mission-brief p:last-child { margin-bottom: 0; }
.mission-statusrow { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.mission-bar { flex: 0 0 120px; height: 8px; border-radius: 8px; background: var(--sunken); overflow: hidden; }
.mission-bar span { display: block; height: 100%; width: 0; background: var(--warn); transition: width .3s var(--ease); }
.x-mission.is-done .mission-bar span { background: var(--good); }
.mission-status { margin: 0; font-size: var(--fs-0); color: var(--ink-2); }
.x-mission.is-fail .mission-status { color: var(--bad); }
.mission-success { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--good-soft); border-left: 4px solid var(--good); }
.mission-success p { margin: 0 0 6px; }
.mission-debrief { margin-top: var(--sp-3); font-family: var(--font-prose); font-size: var(--fs-2); }

/* ---- x-lab ---- */
.x-lab { margin: var(--sp-6) 0; padding: var(--sp-4) var(--sp-5); max-width: var(--wide); border-radius: var(--radius-l); border: 1.5px solid color-mix(in srgb, var(--c-nos) 50%, var(--line)); background: var(--surface); font-family: var(--font-ui); }
.lab-head { display: flex; align-items: center; gap: var(--sp-3); }
.lab-badge { background: var(--c-nos); color: var(--bg); }
.lab-title { margin: 0; font-size: var(--fs-3); }
.lab-intro { font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.55; margin-top: var(--sp-2); }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-5); margin-top: var(--sp-3); }
.lab-tablewrap { overflow-x: auto; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.lab-table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); font-variant-numeric: tabular-nums; }
.lab-table th { position: sticky; top: 0; background: var(--sunken); font-weight: 600; text-align: left; padding: 6px 4px; white-space: nowrap; }
.lab-table td { padding: 2px 3px; border-top: 1px solid var(--line); }
.lab-table tr.is-new { animation: rowin .8s var(--ease); }
@keyframes rowin { from { background: var(--good-soft); } to { background: transparent; } }
.lab-table .lab-cell { width: 100%; min-width: 3.8em; min-height: 32px; padding: 4px 6px; border-color: transparent; background: transparent; font-size: var(--fs-0); }
.lab-table .lab-cell:hover { border-color: var(--line); }
.lab-table .lab-cell:focus { border-color: var(--accent); background: var(--raised); }
.lab-n { color: var(--muted); text-align: center; width: 2em; }
.lab-del { border: 0; background: transparent; color: var(--muted); font-size: 18px; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
.lab-del:hover { background: var(--bad-soft); color: var(--bad); }
.lab-empty { padding: var(--sp-4) !important; color: var(--muted); text-align: center; }
.lab-axes { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; margin-bottom: var(--sp-2); font-size: var(--fs-0); color: var(--ink-2); }
.lab-sel { min-height: 34px; padding: 4px 8px; font-size: var(--fs-0); }
.lab-chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.lab-chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.lab-plot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lab-results { display: grid; gap: 2px; margin-top: var(--sp-2); font-size: var(--fs-0); }
.lab-res { display: flex; gap: var(--sp-2); align-items: baseline; }
.lab-res-l { color: var(--muted); min-width: 5.5em; }
.lab-results p { margin: 4px 0 0; }
.lab-extract { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line-strong); }
.lab-answer { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.lab-answer .num-input { width: 7.5em; }
.lab-q { font-size: 1.1rem; }
.lab-hint { margin-bottom: var(--sp-3); max-width: var(--measure); }
.lab-hint summary { padding: 8px 12px; }
.lab-hint > div { padding: 0 12px 10px; font-family: var(--font-prose); }
@media (max-width: 820px) { .lab-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- x-callout ---- */
x-callout {
  --c: var(--c-key); --c-soft: var(--c-key-soft);
  margin: var(--sp-5) 0; max-width: var(--measure); padding: var(--sp-3) var(--sp-4) var(--sp-3);
  background: var(--c-soft); border-left: 4px solid var(--c); border-radius: 4px var(--radius) var(--radius) 4px;
}
x-callout[data-type="exam"] { --c: var(--c-exam); --c-soft: var(--c-exam-soft); }
x-callout[data-type="context"] { --c: var(--c-context); --c-soft: var(--c-context-soft); }
x-callout[data-type="nos"] { --c: var(--c-nos); --c-soft: var(--c-nos-soft); }
x-callout[data-type="tok"] { --c: var(--c-tok); --c-soft: var(--c-tok-soft); }
x-callout[data-type="link"] { --c: var(--c-link); --c-soft: var(--c-link-soft); }
x-callout[data-type="warn"] { --c: var(--c-warn); --c-soft: var(--c-warn-soft); }
.callout-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--font-ui); }
.callout-kind { font: 700 11px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.callout-title { font-weight: 650; font-size: var(--fs-1); color: var(--ink); }
.callout-title::before { content: "· "; color: var(--muted); }
.callout-icon { width: 16px; height: 16px; flex: none; background: var(--c); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l2 5 5 .5-4 3.5 1.2 5L8 12.4 3.8 15 5 10 1 6.5 6 6z'/%3E%3C/svg%3E"); }
x-callout[data-type="exam"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h7l3 3v11H3z M5 6h6v1.5H5z M5 9h6v1.5H5z M5 12h4v1.5H5z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
x-callout[data-type="context"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3C/svg%3E"); }
x-callout[data-type="nos"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 1h4v1H9v4l5 8H2l5-8V2H6z'/%3E%3C/svg%3E"); }
x-callout[data-type="tok"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v9H7l-4 3v-3H2z'/%3E%3C/svg%3E"); }
x-callout[data-type="link"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 9.5l3-3M5 7L3 9a2.5 2.5 0 003.5 3.5L8.5 11M11 9l2-2A2.5 2.5 0 009.5 3.5L7.5 5' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
x-callout[data-type="warn"] .callout-icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l7 13H1z'/%3E%3C/svg%3E"); }
.callout-body > :last-child { margin-bottom: 0; }
.callout-body p { max-width: none; }

/* ---- x-term ---- */
x-term { position: relative; }
.term-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; border-bottom: 1.5px dotted var(--unit, var(--accent)); line-height: inherit; }
.term-btn:hover { color: var(--unit, var(--accent)); }
.term-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(22rem, 86vw);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; white-space: normal;
  font: 400 var(--fs-0)/1.5 var(--font-ui); color: var(--ink); background: var(--raised);
  border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.term-pop strong { font-weight: 700; color: var(--unit, var(--accent)); }

/* ---- x-hl ---- */
x-hl:not([inline]) { position: relative; margin: var(--sp-4) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); border-left: 3px solid var(--unit-E); }
x-hl[inline] { display: inline; background: color-mix(in srgb, var(--unit-E-soft) 70%, transparent); border-radius: 3px; padding: 0 2px; }
.hl-flag { position: absolute; left: -15px; top: 4px; font: 800 9px/1 var(--font-ui); padding: 3px 3px; border-radius: 3px; color: var(--bg); background: var(--unit-E); letter-spacing: .04em; }
:root[data-level="sl"] x-hl { display: none !important; }

/* ---- x-bookref ---- */
.bookref { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-0)/1 var(--font-ui); color: var(--ink-2); padding: 5px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.bookref-icon { width: 13px; height: 13px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5C3 1.5 6 1.5 7.5 3v11C6 12.5 3 12.5 1 13.5z M15 2.5c-2-1-5-1-6.5.5v11c1.5-1.5 4.5-1.5 6.5-.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5C3 1.5 6 1.5 7.5 3v11C6 12.5 3 12.5 1 13.5z M15 2.5c-2-1-5-1-6.5.5v11c1.5-1.5 4.5-1.5 6.5-.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.prose .bookref { font-size: .8em; }

/* ---- x-checklist ---- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); counter-reset: ck; }
.check-item { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); }
.check-item[data-rating="2"] { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.check-text { flex: 1 1 18rem; font-family: var(--font-prose); font-size: var(--fs-2); line-height: 1.45; }
.check-rate { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; flex: none; }
.check-btn { border: 0; background: transparent; padding: 7px 11px; font: 600 12px/1 var(--font-ui); color: var(--ink-2); cursor: pointer; min-height: 34px; }
.check-btn + .check-btn { border-left: 1px solid var(--line-strong); }
.check-btn[aria-checked="true"][data-k="0"] { background: var(--bad-soft); color: var(--bad); }
.check-btn[aria-checked="true"][data-k="1"] { background: var(--warn-soft); color: var(--warn); }
.check-btn[aria-checked="true"][data-k="2"] { background: var(--good-soft); color: var(--good); }
.check-summary { margin: var(--sp-3) 0 0; color: var(--ink-2); font-size: var(--fs-0); }

/* ---- x-compare ---- */
.x-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0; max-width: var(--wide); }
.x-compare > x-sim { margin: 0; }

/* done marker on progress-bearing components */
[data-done] > .quiz-head .quiz-badge::after, [data-done] > .steps-head .quiz-badge::after { content: " ✓"; }