/* Answering surfaces (diagnostic + adaptive practice) carry one quiet accent
   per paper, so a session takes its identity from the paper being sat rather
   than staying uniformly monochrome. Reporting surfaces stay neutral. */
.dse-page {
  --paper-reading: #12756b;
  --paper-writing: #9c4173;
  --paper-listening: #3d5fa9;
  /* Shared with the knowledge map so feedback and the graph agree on colour. */
  --verdict-correct: #2f7d4b;
  --verdict-incorrect: #b34a4a;
  /* Source material sits on warm paper in a serif so the text under study and
     the interface chrome stop competing for the same visual register. */
  --paper-sheet: #fffdf7;
  --paper-sheet-edge: #e9e2d3;
  --paper-ink: #26241e;
  /* No serif is bundled; this is a system stack, as in tutor-demo.css. */
  --font-serif: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
}
.dse-task { --accent: var(--primary); }
.dse-task-paper-1 { --accent: var(--paper-reading); }
.dse-task-paper-2 { --accent: var(--paper-writing); }
.dse-task-paper-3 { --accent: var(--paper-listening); }

.dse-main { max-width: 1040px; margin: 0 auto; padding: 3rem 1rem 5rem; }
.dse-hero { max-width: 760px; margin-bottom: 2rem; }
.dse-hero h1 { line-height: 1.08; margin: .45rem 0 1rem; }
/* The prompt is a full sentence, so it reads as emphasised body copy rather
   than a page title — it must stay senior to the choices without shouting
   over the passage. It keeps <h1> for document structure. */
.dse-task h1 { margin: 0 0 1.25rem; font-size: 1.16rem; font-weight: 600; line-height: 1.55; letter-spacing: -.005em; }
.dse-task h1 strong { font-weight: 800; }
.dse-kicker { color: var(--primary); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.dse-muted { color: var(--on-surface-variant); font-size: .92rem; }
.dse-paper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.dse-paper-card, .dse-review-card { border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); padding: 1.15rem; box-shadow: var(--shadow-soft); }
.dse-paper-card h2 { min-height: 3.1rem; margin: .3rem 0; font-size: 1.05rem; }
.dse-band { display: block; font-size: 1.8rem; margin: .6rem 0; }
.dse-scope-note { border-left: 4px solid var(--primary); background: var(--surface-container-low); padding: 1rem; margin: 1.5rem 0; }
.dse-secondary-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin-top: 1.5rem; }
.dse-task { max-width: 800px; margin: 0 auto; }
/* A split task needs the room for two columns; it stays 800px until the
   side-by-side breakpoint takes effect. */
.dse-task-split { max-width: 1140px; }
.dse-diagnostic-progress-block { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.dse-progress { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; color: var(--on-surface-variant); font-size: .82rem; font-weight: 500; }
.dse-progress strong { color: var(--on-surface); font-weight: 750; }
/* Phase chips replace the run-on "phase · question N of M" line: the phase you
   have cleared ticks over, so progress is legible at a glance. */
.dse-phase-chip { padding: .34rem .7rem; border-radius: 999px; color: var(--on-surface-variant); background: var(--surface-container); font-size: .74rem; font-weight: 650; }
.dse-phase-chip-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-container-lowest)); }
.dse-phase-chip-done { color: var(--verdict-correct); background: color-mix(in srgb, var(--verdict-correct) 10%, var(--surface-container-lowest)); }
.dse-phase-chip-done::before { content: "\2713\00a0"; }
/* One segment per question rather than a single sliding bar, so the length of
   the diagnostic and the distance remaining are both readable. */
.dse-diagnostic-progress-bar { display: flex; gap: 4px; height: 6px; }
.dse-diagnostic-progress-bar span { flex: 1; border-radius: 999px; background: var(--surface-container-high); transition: background .24s ease; }
.dse-diagnostic-progress-bar span.is-done { background: var(--accent); }
.dse-diagnostic-progress-bar span.is-current { background: color-mix(in srgb, var(--accent) 38%, var(--surface-container-high)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .dse-diagnostic-progress-bar span { transition: none; } }
/* Source material: warm sheet, serif, and a bounded measure so long reading
   passages stay comfortable at full container width. */
.dse-source { overflow: hidden; margin: 0 0 1rem; border: 1px solid var(--paper-sheet-edge); border-radius: 1rem; background: var(--paper-sheet); box-shadow: var(--shadow-soft); }
.dse-source h2 { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .85rem 1.4rem; border-bottom: 1px solid var(--paper-sheet-edge); color: var(--on-surface-variant); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.dse-source h2::before { content: "\00b6"; display: grid; place-items: center; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: .4rem; color: var(--accent, var(--primary)); background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent); font-size: .8rem; }
.dse-source > :not(h2):not(.dse-source-toggle) { margin: 0; padding: 1.4rem 1.6rem; }
/* Markdown supplies the breaks for prose sources, so pre-wrap must be off. */
.dse-source-content-prose { white-space: normal; overflow-wrap: break-word; }
/* Mobile: a long passage must not push the question off the screen. Capped
   here and expanded on demand; dse.js adds the class only when the source
   actually overflows, so short notices are untouched. */
.dse-source.is-collapsed > :not(h2):not(.dse-source-toggle) { overflow: hidden; max-height: var(--source-cap, 40vh); -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.dse-source-toggle { display: block; width: 100%; min-height: 44px; padding: .8rem 1rem; border: 0; border-top: 1px solid var(--paper-sheet-edge); border-radius: 0; background: transparent; color: var(--accent); font-family: var(--font-sans); font-size: .85rem; font-weight: 650; cursor: pointer; }
.dse-source-toggle:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dse-source > p, .dse-source-content { max-width: 68ch; color: var(--paper-ink); font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.75; }
/* Tables and data files are structured data, not prose — they keep the UI
   sans-serif so columns stay scannable. */
.dse-source-content-structured, .dse-source ul { max-width: none; font-family: var(--font-sans); font-size: .94rem; line-height: 1.5; }
.dse-source .btn { font-family: var(--font-sans); }
.dse-source-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.dse-source-content-structured { white-space: normal; overflow-wrap: normal; }
.dse-source-table-figure { margin: 0; }
.dse-source-table-figure figcaption { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 750; }
.dse-source-table-scroll { overflow-x: auto; border: 1px solid var(--outline-variant); border-radius: .8rem; }
.dse-source-table { width: 100%; border-collapse: collapse; background: var(--surface-container-lowest); font-size: .94rem; line-height: 1.4; }
.dse-source-table th, .dse-source-table td { padding: .8rem .9rem; border-right: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant); text-align: left; vertical-align: top; }
.dse-source-table th:last-child, .dse-source-table td:last-child { border-right: 0; }
.dse-source-table tbody tr:last-child td { border-bottom: 0; }
.dse-source-table th { background: var(--surface-container-low); font-size: .78rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.dse-source-table-cards td span { display: block; }
.dse-source-table-cards td span + span { margin-top: .35rem; font-size: 1rem; font-weight: 750; }
.dse-source-table-note { margin: .75rem 0 0; }
.dse-source-table-fallback { overflow-x: auto; margin: 0; font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre; }
.dse-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.dse-response-form { display: grid; gap: .8rem; margin-top: 1.25rem; }
.dse-writing-response { display: grid; gap: .35rem; }
/* The count grows a small meter that fills toward the target range, so
   "am I long enough yet" is answerable without reading the number. */
.dse-word-meter { display: flex; align-items: center; justify-self: end; gap: .6rem; }
.dse-word-meter-track { overflow: hidden; width: 120px; height: 4px; border-radius: 999px; background: var(--surface-container-high); }
.dse-word-meter-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease, background .2s ease; }
.dse-word-count { color: var(--on-surface-variant); font-size: .78rem; font-variant-numeric: tabular-nums; line-height: 1; }
.dse-word-count-over { color: var(--error, #b3261e); font-weight: 700; }
.dse-word-meter-over .dse-word-meter-track span { background: var(--error, #b3261e); }
@media (prefers-reduced-motion: reduce) { .dse-word-meter-track span { transition: none; } }
/* Writing input should feel like a page, not a form field. */
.dse-response-form textarea { box-sizing: border-box; width: 100%; resize: vertical; min-height: 7rem; padding: 1.15rem 1.25rem; border-radius: .8rem; border: 1.5px solid var(--outline-variant); background: var(--surface-container-lowest); color: inherit; font-family: inherit; font-size: 1.02rem; line-height: 1.7; transition: border-color .15s ease, box-shadow .15s ease; }
.dse-response-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* Lettered answer cards. The native radio is taken out of flow and the letter
   badge carries the selected state, which also stops the control and its label
   from wrapping onto separate lines. */
/* components.css styles every <label> as a stacked 12px form label; a choice is
   a row of readable prose, so it has to opt out of all of that explicitly. */
.dse-choice { display: flex; flex-direction: row; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; border: 1.5px solid var(--outline-variant); border-radius: .8rem; background: var(--surface-container-lowest); color: var(--on-surface); font-size: 1rem; font-weight: 400; letter-spacing: normal; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.dse-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dse-choice-letter { display: grid; place-items: center; flex: 0 0 auto; width: 1.7rem; height: 1.7rem; margin-top: .05rem; border: 1.5px solid var(--outline-variant); border-radius: 50%; color: var(--on-surface-variant); font-size: .8rem; font-weight: 750; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.dse-choice > span:not(.dse-choice-letter) { padding-top: .12rem; line-height: 1.5; }
.dse-choice:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--outline-variant)); background: color-mix(in srgb, var(--accent) 3%, var(--surface-container-lowest)); transform: translateY(-1px); }
.dse-choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-container-lowest)); }
.dse-choice:has(input:checked) .dse-choice-letter { border-color: var(--accent); background: var(--accent); color: #fff; transform: scale(1.08); }
.dse-choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dse-choice, .dse-choice-letter { transition: none; } .dse-choice:hover { transform: none; } }
/* Question card: the prompt and its controls travel together as one surface,
   distinct from the source sheet above/beside them. */
.dse-question-card { padding: 1.5rem 1.6rem 1.6rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.dse-question-label { display: block; margin-bottom: .6rem; color: var(--accent); }
/* Long reading passages sit beside the question on wide screens and stay put
   while the question scrolls, so the learner never hunts between the two. */
.dse-task-shell { display: grid; gap: 1.25rem; }
@media (min-width: 1020px) {
  .dse-task-shell-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .dse-task-shell-split .dse-source { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; }
}
.dse-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.dse-submit-shortcut { position: relative; display: inline-flex; align-items: center; gap: .25rem; color: var(--on-surface-variant); cursor: help; }
.dse-submit-shortcut kbd { min-width: 1.65rem; box-sizing: border-box; padding: .22rem .42rem; border: 1px solid var(--outline-variant); border-bottom-width: 2px; border-radius: .38rem; background: var(--surface-container-low); color: var(--on-surface-variant); font: 600 .72rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.dse-submit-shortcut-tooltip { pointer-events: none; position: absolute; z-index: 5; bottom: calc(100% + .65rem); left: 50%; width: max-content; max-width: min(240px, 80vw); padding: .5rem .65rem; border-radius: .5rem; background: var(--on-surface); color: var(--surface-container-lowest); font-size: .75rem; font-weight: 600; line-height: 1.35; text-align: center; opacity: 0; transform: translate(-50%, .2rem); transition: opacity .15s ease, transform .15s ease; }
.dse-submit-shortcut-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; border: .32rem solid transparent; border-top-color: var(--on-surface); transform: translateX(-50%); }
.dse-submit-shortcut:hover .dse-submit-shortcut-tooltip, .dse-submit-shortcut:focus-visible .dse-submit-shortcut-tooltip { opacity: 1; transform: translate(-50%, 0); }
.dse-save-state { color: var(--on-surface-variant); }
/* Verdict card: the marking moment gets a mark, a verdict and the reasoning,
   in the same green/red the knowledge map uses for evidence. */
.dse-practice-feedback { --verdict: var(--verdict-correct); display: flex; gap: 1rem; margin: 0 0 1.25rem; padding: 1.15rem 1.35rem; border: 1px solid color-mix(in srgb, var(--verdict) 30%, var(--outline-variant)); border-radius: 1rem; background: color-mix(in srgb, var(--verdict) 6%, var(--surface-container-lowest)); animation: dse-feedback-in .45s cubic-bezier(.2, .9, .3, 1.15) both; }
.dse-practice-feedback-incorrect { --verdict: var(--verdict-incorrect); }
.dse-practice-feedback-marked { --verdict: var(--primary); }
.dse-practice-feedback::before { content: "\2713"; display: grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; background: var(--verdict); font-size: 1rem; font-weight: 800; }
.dse-practice-feedback-incorrect::before { content: "\2715"; }
.dse-practice-feedback-marked::before { content: "\270E"; }
.dse-practice-feedback strong { display: block; color: var(--verdict); font-size: 1rem; }
.dse-practice-feedback p { margin: .3rem 0 0; line-height: 1.55; }
.dse-practice-feedback small { display: block; margin-top: .4rem; color: var(--on-surface-variant); line-height: 1.45; }
@keyframes dse-feedback-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dse-practice-feedback { animation: none; } }
.dse-diagnostic-exit { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); font-size: .86rem; }
.dse-diagnostic-exit form { flex: 0 0 auto; margin: 0; }
.dse-register-gate { display: grid; min-height: min(660px, calc(100vh - 12rem)); place-items: center; }
.dse-register-gate-card { width: min(100%, 620px); box-sizing: border-box; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--outline-variant); border-radius: 1.5rem; background: color-mix(in srgb, var(--primary) 5%, var(--surface-container-lowest)); box-shadow: var(--shadow-soft); text-align: center; }
.dse-register-gate-card h1 { margin: .55rem 0 1rem; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.dse-register-gate-card p { max-width: 500px; margin: .8rem auto; color: var(--on-surface-variant); line-height: 1.6; }
.dse-register-gate-card p strong { color: var(--on-surface); }
.dse-register-gate-card .btn { margin-top: .8rem; }
.dse-register-gate-card small { display: block; max-width: 430px; margin: 1rem auto 0; color: var(--on-surface-variant); line-height: 1.45; }
.dse-complete-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.dse-review-list { display: grid; gap: 1rem; margin-top: 2rem; }
.dse-practice-report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin: 1.5rem 0 .75rem; }
.dse-practice-report-summary article { position: relative; overflow: hidden; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); }
.dse-practice-report-summary article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--summary-accent, var(--primary)); }
.dse-summary-stat-correct { --summary-accent: var(--verdict-correct); }
.dse-summary-stat-partial, .dse-summary-stat-band { --summary-accent: var(--paper-listening); }
.dse-summary-stat-revisit { --summary-accent: var(--paper-writing); }
.dse-summary-stat-pending { --summary-accent: var(--outline); }
.dse-practice-report-summary span, .dse-practice-report-summary strong { display: block; }
.dse-practice-report-summary span { color: var(--on-surface-variant); font-size: .78rem; }
.dse-practice-report-summary strong { margin-top: .35rem; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.dse-practice-summary { max-width: 780px; margin: 0 auto; }
.dse-practice-summary-hero { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.dse-practice-summary-hero h1 { margin: 0 0 .3rem; font-size: clamp(2.2rem, 7vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }
.dse-practice-summary-hero p { margin: 0; color: var(--on-surface-variant); font-size: 1.05rem; }
.dse-summary-celebration { display: grid; place-items: center; flex: 0 0 auto; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #fff; background: var(--verdict-correct); box-shadow: 0 0 0 8px color-mix(in srgb, var(--verdict-correct) 12%, transparent); font-size: 1.5rem; font-weight: 850; }
.dse-summary-equation { margin: 0 0 1.5rem; color: var(--on-surface-variant); font-size: .84rem; font-weight: 650; }
.dse-practice-progress { margin: 1.5rem 0; padding: 1.25rem 1.35rem .9rem; border: 1px solid color-mix(in srgb, var(--paper-writing) 26%, var(--outline-variant)); border-radius: 1.2rem; background: color-mix(in srgb, var(--paper-writing) 5%, var(--surface-container-lowest)); box-shadow: var(--shadow-soft); }
.dse-practice-progress > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.dse-practice-progress header span { display: block; color: var(--paper-writing); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dse-practice-progress header strong { display: block; margin-top: .2rem; font-size: 1.45rem; }
.dse-practice-progress header p, .dse-practice-progress > p { margin: 0; color: var(--on-surface-variant); font-size: .78rem; }
.dse-practice-progress .dse-activity-chart { margin-top: .45rem; }
.dse-practice-progress .dse-activity-dots .is-current { transform-box: fill-box; transform-origin: center; animation: dse-summary-dot-form .75s .45s cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes dse-summary-dot-form { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.dse-summary-section { margin: 1.5rem 0; padding: 1.2rem 1.3rem; border: 1px solid var(--outline-variant); border-radius: 1.1rem; background: var(--surface-container-lowest); }
.dse-summary-section h2 { margin: 0 0 .7rem; font-size: 1.08rem; }
.dse-band-progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.dse-band-progress-card { --band-accent: var(--primary); padding: 1rem; border-radius: .9rem; background: color-mix(in srgb, var(--band-accent) 8%, var(--surface-container-lowest)); }
.dse-band-progress-card.is-improved, .dse-band-progress-card.is-solidified { --band-accent: var(--verdict-correct); }
.dse-band-progress-card.is-calibrated { --band-accent: var(--paper-listening); }
.dse-band-progress-card strong, .dse-band-progress-card span { display: block; }
.dse-band-progress-card strong { color: var(--band-accent); }
.dse-band-progress-card span { margin-top: .35rem; color: var(--on-surface-variant); font-size: .86rem; line-height: 1.45; }
.dse-summary-patterns { border-color: color-mix(in srgb, var(--paper-reading) 26%, var(--outline-variant)); background: color-mix(in srgb, var(--paper-reading) 4%, var(--surface-container-lowest)); }
.dse-summary-patterns > p, .dse-summary-writing p { margin: -.25rem 0 .8rem; color: var(--on-surface-variant); font-size: .9rem; }
.dse-summary-patterns ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.dse-summary-patterns li { padding: .85rem 1rem; border-radius: .8rem; background: var(--surface-container-lowest); }
.dse-summary-patterns strong, .dse-summary-patterns span { display: block; }
.dse-summary-patterns strong { color: var(--paper-reading); }
.dse-summary-patterns span { margin-top: .25rem; color: var(--on-surface-variant); font-size: .84rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .dse-practice-progress .dse-activity-dots .is-current { animation: none; } }
.dse-learner-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.dse-learner-state-grid article { padding: 1.15rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); }
.dse-learner-state-grid h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.dse-learner-state-grid p, .dse-learner-state-grid ul { margin: 0; color: var(--on-surface-variant); }
.dse-review-card { display: grid; gap: .45rem; }
.dse-review-card blockquote { white-space: pre-wrap; border-left: 3px solid var(--outline); padding-left: 1rem; }
.dse-review-card p { color: var(--on-surface-variant); margin: 0; }
.dse-feedback-hero { margin-bottom: 1.5rem; }
.dse-feedback-hero h1 { margin: .75rem 0 .35rem; }
.dse-feedback-hero p { color: var(--on-surface-variant); }
.dse-feedback-card { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 1.25rem; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.dse-feedback-card > header, .dse-feedback-card > section { padding: clamp(1rem, 3vw, 1.5rem); }
.dse-feedback-card > section { border-top: 1px solid var(--outline-variant); }
.dse-feedback-card > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; background: var(--surface-container-low); }
.dse-feedback-card > header span { display: block; color: var(--on-surface-variant); font-size: .78rem; }
.dse-feedback-card > header strong { display: block; margin-top: .25rem; font-size: 1.45rem; }
.dse-feedback-card > header p, .dse-feedback-card section > p { margin: 0; color: var(--on-surface-variant); }
.dse-feedback-card h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.dse-feedback-card blockquote { margin: 0; padding: 1rem; white-space: pre-wrap; border-left: 3px solid var(--primary); background: var(--surface-container-low); }
.dse-feedback-card ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.2rem; }
.dse-feedback-domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .75rem; }
.dse-feedback-domains article { padding: .85rem; border-radius: .8rem; background: var(--surface-container-low); }
.dse-feedback-domains span, .dse-feedback-domains strong { display: block; }
.dse-feedback-domains span { color: var(--on-surface-variant); font-size: .75rem; }
.dse-feedback-domains strong { margin-top: .25rem; font-size: 1.2rem; }
.dse-memento-feedback-card > .dse-memento-results { border-top: 0; padding: 0; }
.dse-memento-results { display: grid; gap: 1rem; }
.dse-memento-score-stage { background: linear-gradient(145deg, #fff9fc 0%, #f6eef8 56%, #eef3ff 100%); border: 1px solid #eadce6; border-radius: 1.1rem; overflow: hidden; padding: clamp(1.15rem, 4vw, 2rem); }
.dse-memento-stage-heading { margin-bottom: 1.2rem; }
.dse-memento-stage-heading > span { color: #8a4f70; font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dse-memento-stage-heading h2 { font-size: clamp(1.45rem, 4vw, 2rem); margin: .3rem 0 .15rem; }
.dse-memento-stage-heading p { color: var(--on-surface-variant); margin: 0; }
.dse-memento-domains { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dse-memento-domain { background: rgba(255, 255, 255, .92); border: 1px solid rgba(141, 94, 120, .18); border-radius: 1rem; box-shadow: 0 12px 30px rgba(69, 47, 61, .08); display: grid; gap: .7rem; min-height: 106px; overflow: visible; padding: 1rem; position: relative; transform-origin: 50% 100%; }
.dse-memento-domain > span { color: var(--on-surface-variant); font-size: .72rem; }
.dse-memento-domain > strong { align-self: end; font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1; }
.dse-memento-domain > strong small { color: var(--on-surface-variant); font-size: .72rem; margin-left: .2rem; }
.dse-memento-domain > i { height: 8px; left: 50%; opacity: 0; pointer-events: none; position: absolute; top: 50%; width: 8px; z-index: 3; }
.dse-memento-domain > i::before,
.dse-memento-domain > i::after { border-radius: 50%; content: ""; inset: 0; position: absolute; }
.dse-memento-domain > i::before { border: 3px solid #d0679e; }
.dse-memento-domain > i::after { background: #f2a647; box-shadow: -36px -16px 0 -1px #cf6aa0, 34px -24px 0 -2px #ef9f3d, 42px 17px 0 -2px #8b75d7, 18px 38px 0 -1px #d65b65, -24px 35px 0 -2px #f1c84b, -43px 11px 0 -2px #7aa6dc; }
.dse-memento-results.is-sequencing .dse-memento-domain:not(.is-revealed) { filter: blur(2px) grayscale(1); opacity: .08; transform: translateY(-3rem) scale(.72) rotate(-3deg); }
.dse-memento-domain.is-revealed { animation: dse-memento-crash .62s cubic-bezier(.2, 1.35, .35, 1) both; }
.dse-memento-domain.is-impacting > i { animation: dse-memento-particle-fade .55s ease-out both; }
.dse-memento-domain.is-impacting > i::before { animation: dse-memento-impact-ring .55s ease-out both; }
.dse-memento-domain.is-impacting > i::after { animation: dse-memento-particles .6s ease-out both; }
.dse-memento-overall { align-items: center; background: linear-gradient(120deg, #251a24, #55354a 56%, #79526d); border-radius: 1rem; color: #fff; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; margin-top: 1rem; overflow: hidden; padding: clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 4vw, 1.7rem); position: relative; }
.dse-memento-overall::after { background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%); content: ""; height: 240px; position: absolute; right: -70px; top: -110px; width: 240px; }
.dse-memento-overall > span { font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dse-memento-overall > strong { align-items: baseline; display: flex; font-size: clamp(2.8rem, 8vw, 4.6rem); gap: .38rem; line-height: .9; position: relative; z-index: 1; }
.dse-memento-overall > strong b { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.dse-memento-overall > strong small { font-size: 1rem; margin-left: .25rem; opacity: .72; }
.dse-memento-results.is-sequencing .dse-memento-overall:not(.is-revealed) { opacity: 0; transform: scale(.72); }
.dse-memento-overall.is-revealed { animation: dse-memento-score-pop .72s cubic-bezier(.16, 1.4, .3, 1) both; }
.dse-memento-carousel { min-height: 220px; }
.dse-memento-carousel:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 4px; }
.dse-memento-slides { min-height: 160px; }
.dse-memento-slide { border: 1px solid transparent; border-radius: 1rem; min-height: 160px; padding: clamp(1.1rem, 4vw, 1.6rem); }
.dse-memento-slide > span { font-size: .69rem; font-weight: 850; letter-spacing: .08em; opacity: .55; }
.dse-memento-slide h3 { font-size: clamp(1.25rem, 4vw, 1.65rem); margin: .3rem 0 .8rem; }
.dse-memento-slide p { font-size: 1.05rem; line-height: 1.65; margin: 0; }
.dse-memento-slide ul { display: grid; font-size: 1.05rem; gap: .65rem; line-height: 1.55; margin: 0; padding-left: 1.2rem; }
.dse-memento-slide.is-positive { background: #edf8f0; border-color: #c9e7d1; color: #245b34; }
.dse-memento-slide.is-improve { background: #fff5e6; border-color: #f0d4aa; color: #714619; }
.dse-memento-slide.is-feedback { background: #f3effc; border-color: #dcd1f1; color: #4d3a77; }
.dse-memento-carousel.is-enhanced .dse-memento-slide.is-active { animation: dse-memento-slide-in .4s cubic-bezier(.2, .9, .3, 1.1) both; }
.dse-memento-carousel > footer { align-items: center; display: flex; gap: .8rem; justify-content: flex-end; padding-top: .75rem; }
.dse-memento-carousel > footer button { align-items: center; background: #fff; border: 1px solid var(--outline-variant); border-radius: 50%; color: var(--on-surface); cursor: pointer; display: inline-flex; font-size: 1.15rem; height: 2.5rem; justify-content: center; width: 2.5rem; }
.dse-memento-carousel > footer button:hover { background: var(--surface-container); transform: translateY(-1px); }
.dse-memento-carousel > footer span { color: var(--on-surface-variant); font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 3rem; text-align: center; }
@keyframes dse-memento-crash { 0% { opacity: 0; transform: translateY(-4rem) scale(.65) rotate(-5deg); } 62% { opacity: 1; transform: translateY(.45rem) scale(1.08) rotate(1deg); } 80% { transform: translateY(-.2rem) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes dse-memento-impact-ring { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(14); } }
@keyframes dse-memento-particles { from { opacity: 1; transform: scale(.4) rotate(0); } to { opacity: 0; transform: scale(1.8) rotate(45deg); } }
@keyframes dse-memento-particle-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dse-memento-score-pop { 0% { opacity: 0; transform: scale(.68); } 64% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes dse-memento-slide-in { from { opacity: 0; transform: translateX(1.1rem); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .dse-memento-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dse-memento-overall { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 430px) { .dse-memento-score-stage { padding: 1rem; } .dse-memento-domains { gap: .55rem; } .dse-memento-domain { min-height: 92px; padding: .8rem; } .dse-memento-overall { grid-template-columns: 1fr; } .dse-memento-overall > strong { margin: .35rem 0; } .dse-memento-slide p, .dse-memento-slide ul { font-size: 1rem; } .dse-memento-carousel > footer { justify-content: center; } .dse-memento-carousel > footer button { height: 2.75rem; width: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .dse-memento-domain, .dse-memento-overall, .dse-memento-slide { animation: none !important; transition: none !important; } }
.dse-complete { max-width: 620px; text-align: center; margin: 4rem auto; }
.dse-results-hero { max-width: 780px; margin-bottom: 1.5rem; }
.dse-results-hero h1 { max-width: 720px; margin: .45rem 0 .75rem; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.045em; }
.dse-results-hero > p { max-width: 680px; color: var(--on-surface-variant); font-size: 1.05rem; line-height: 1.6; }
.dse-grading-wait { position: relative; max-width: 720px; margin: clamp(2rem, 9vh, 5rem) auto 0; text-align: center; }
.dse-grading-wait h1 { margin: .55rem 0 1rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.02; letter-spacing: -.04em; }
.dse-grading-wait > p { max-width: 540px; margin: 0 auto; color: var(--on-surface-variant); line-height: 1.6; }
.dse-grading-wait-status { margin: 1.25rem 0 0; color: var(--on-surface-variant); font-size: .88rem; transition: opacity .45s ease; }
/* While its glyphs are airborne the line keeps its box (and stays readable to
   assistive tech) but paints nothing. */
.dse-grading-wait-status.is-airborne { color: transparent; }
.dse-flower-char {
  position: absolute; left: 0; top: 0; z-index: 1; margin: 0;
  color: var(--on-surface-variant); font-size: .88rem; line-height: 1;
  pointer-events: none; will-change: transform, opacity;
  transition: transform 1.05s cubic-bezier(.2, .72, .2, 1.02), color .9s ease, opacity .5s ease;
}
.dse-flower-char.is-petal { color: var(--on-secondary-container); }
.dse-flower-char.is-heart { color: #b8974a; }
.dse-flower-char.is-stem, .dse-flower-char.is-leaf { color: #6d7f47; }
/* Dining: the tortoise stops at the flower — walk, legs, bob, and crane all
   freeze — while the reach/jaw animations below stay free to run. */
.dse-tortoise.is-dining,
.dse-tortoise.is-dining .dse-tortoise-leg,
.dse-tortoise.is-dining .dse-tortoise-body,
.dse-tortoise.is-dining .dse-tortoise-head { animation-play-state: paused; }
/* Eating: the whole neck+head assembly swings down from the shell joint and
   stretches so the open mouth reaches the flower on the ground. */
.dse-tortoise.is-eating .dse-tortoise-reach { transform-box: fill-box; transform-origin: 0 100%; animation: dse-tortoise-reach-down 1.4s ease-in-out; }
.dse-tortoise.is-eating .dse-tortoise-head { animation: none; }
.dse-tortoise.is-eating .dse-tortoise-jaw { transform-box: fill-box; transform-origin: 0 20%; animation: dse-tortoise-jaw-open 1.4s ease-in-out; }
@keyframes dse-tortoise-reach-down {
  35% { transform: rotate(43deg) scale(1.15, 1); }
  70% { transform: rotate(39deg) scale(1.13, 1); }
}
@keyframes dse-tortoise-jaw-open {
  30% { transform: rotate(26deg); }
  62% { transform: rotate(22deg); }
  85% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .dse-flower-char { transition: none; } }
.dse-tortoise-track { position: relative; z-index: 2; overflow: hidden; height: 118px; margin: 2.5rem 0 0; border-bottom: 2px solid var(--outline-variant); }
/* Negative delay so the tortoise is already on the track when the page lands. */
.dse-tortoise { position: absolute; bottom: -2px; left: 0; width: 192px; height: 108px; animation: dse-tortoise-walk 60s linear -24s infinite; }
.dse-tortoise-shell { fill: #453a24; }
.dse-tortoise-scute { fill: #ad8d42; }
.dse-tortoise-scute-crest { fill: #b8974a; }
.dse-tortoise-scute-rim { fill: #8a7031; }
/* Stroking each scute darkens its border, the way growth rings edge a real shell. */
.dse-tortoise-scute, .dse-tortoise-scute-crest, .dse-tortoise-scute-rim { stroke: #6d5824; stroke-width: 1.8; }
.dse-tortoise-claw { fill: #d8d2bd; }
.dse-tortoise-scale { fill: none; stroke: #6f684f; stroke-width: 1.3; stroke-linecap: round; }
.dse-tortoise-plastron { fill: #6d6547; }
.dse-tortoise-neck, .dse-tortoise-tail, .dse-tortoise-skull, .dse-tortoise-leg { fill: #8a8163; }
.dse-tortoise-leg-far .dse-tortoise-leg { fill: #635c45; }
.dse-tortoise-jaw { fill: none; stroke: #5c563f; stroke-width: 1.6; stroke-linecap: round; }
.dse-tortoise-eye { fill: #1d1a12; }
.dse-tortoise-nostril { fill: #5c563f; }
.dse-tortoise-shadow { fill: color-mix(in srgb, #1c1b1b 14%, transparent); }
.dse-tortoise-body { animation: dse-tortoise-bob 1.8s ease-in-out infinite; }
.dse-tortoise-head { transform-box: fill-box; transform-origin: 0 50%; animation: dse-tortoise-crane 3.6s ease-in-out infinite; }
.dse-tortoise-leg { transform-box: fill-box; transform-origin: 50% 0; animation: dse-tortoise-step 1.8s ease-in-out infinite; }
/* Diagonal pairs: a near leg swings with the far leg on the opposite end. */
.dse-tortoise-leg-b { animation-delay: -.9s; }
@keyframes dse-tortoise-walk { from { left: -200px; } to { left: 100%; } }
@keyframes dse-tortoise-bob { 50% { transform: translateY(-1.5px); } }
@keyframes dse-tortoise-crane { 50% { transform: translate(1.5px, -1px) rotate(-2.5deg); } }
@keyframes dse-tortoise-step { 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) { .dse-tortoise, .dse-tortoise-body, .dse-tortoise-head, .dse-tortoise-leg { animation: none; } .dse-tortoise { left: 50%; margin-left: -96px; } }
.dse-marking-score { margin: .75rem 0 .2rem; font-size: 1.05rem; }
.dse-marking-score strong { font-size: 1.6rem; }
.dse-findings-card > div:first-child small { color: var(--on-surface-variant); font-size: .78rem; line-height: 1.4; }
.dse-graph-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--outline-variant); border-radius: 1.1rem; color: var(--on-surface-variant); }
[data-results-shell].is-revealed { animation: dse-results-reveal .5s ease both; }
/* The heading is focused to announce the swapped-in results; it is not tabbable. */
[data-results-shell] h1[tabindex="-1"]:focus { outline: none; }
@keyframes dse-results-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dse-findings-card { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); gap: 1.5rem 2rem; padding: clamp(1.3rem, 4vw, 2.2rem); margin: 1.5rem 0 3rem; border: 1px solid var(--outline-variant); border-radius: 1.5rem; color: var(--on-surface); background: color-mix(in srgb, var(--primary) 5%, var(--surface-container-lowest)); box-shadow: var(--shadow-soft); }
.dse-findings-card h2, .dse-priorities h2, .dse-knowledge-map h2 { margin: .3rem 0 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.dse-findings-summary { margin: 0; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.dse-findings-content { display: grid; gap: 1.25rem; }
.dse-specific-findings { display: grid; gap: .65rem; padding-top: .9rem; border-top: 1px solid var(--outline-variant); }
.dse-findings-card ul { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; color: var(--on-surface-variant); }
.dse-findings-card li { display: grid; gap: .18rem; }
.dse-findings-card li strong { color: var(--on-surface); }
.dse-summary-finding small { color: var(--on-surface-variant); font-size: .82rem; line-height: 1.45; }
.dse-findings-next { margin: 0; padding-top: 1rem; border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); }
.dse-priorities { margin: 0 0 3.25rem; }
.dse-priority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.dse-priority-card { display: flex; flex-direction: column; min-height: 180px; padding: 1.15rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.dse-priority-card > span { color: var(--on-surface-variant); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.dse-priority-card h3 { margin: .45rem 0; }
.dse-priority-card p { flex: 1; color: var(--on-surface-variant); line-height: 1.5; }
.dse-priority-card .btn { align-self: flex-start; }
.dse-knowledge-map { margin-top: 2rem; }
.dse-map-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dse-graph-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem .75rem; max-width: 500px; color: var(--on-surface-variant); font-size: .75rem; }
.dse-graph-legend span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: var(--outline); }
.dse-graph-legend .demonstrated::before { background: #31704a; }
.dse-graph-legend .developing::before { background: #4976a8; }
.dse-graph-legend .needs-practice::before { background: #bd6b25; }
.dse-graph-legend .pending::before { background: #7c5aa6; }
.dse-graph-legend .unknown::before { background: #9aa09a; }
.dse-graph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.dse-graph-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--outline-variant); border-radius: 1.1rem; color: var(--on-surface-variant); }
.dse-graph-cluster { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 1.1rem; background: var(--surface-container-lowest); }
.dse-graph-cluster header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem .85rem; border-bottom: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.dse-graph-cluster h3 { margin: 0; font-size: 1rem; }
.dse-graph-cluster header span { color: var(--on-surface-variant); font-size: .72rem; }
.dse-graph-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--outline-variant); }
.dse-graph-node:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dse-graph-node { position: relative; display: grid; align-content: center; gap: .25rem; min-height: 74px; padding: .8rem .8rem .8rem 1.05rem; border: 0; color: var(--on-surface); background: var(--surface-container-lowest); font: inherit; text-align: left; cursor: pointer; }
.dse-graph-node::before { content: ""; position: absolute; inset: .75rem auto .75rem .55rem; width: 3px; border-radius: 3px; background: #9aa09a; }
.dse-graph-node:hover, .dse-graph-node:focus-visible { z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.dse-graph-node span { font-size: .84rem; font-weight: 700; line-height: 1.25; }
.dse-graph-node small { color: var(--on-surface-variant); font-size: .68rem; }
.dse-graph-node-demonstrated { background: color-mix(in srgb, #dceee2 70%, var(--surface-container-lowest)); }
.dse-graph-node-demonstrated::before { background: #31704a; }
.dse-graph-node-developing { background: color-mix(in srgb, #e0ebf7 70%, var(--surface-container-lowest)); }
.dse-graph-node-developing::before { background: #4976a8; }
.dse-graph-node-needs_practice { background: color-mix(in srgb, #f7e4d5 75%, var(--surface-container-lowest)); }
.dse-graph-node-needs_practice::before { background: #bd6b25; }
.dse-graph-node-pending { background: color-mix(in srgb, #eee6f7 75%, var(--surface-container-lowest)); }
.dse-graph-node-pending::before { background: #7c5aa6; }
.dse-category-map { margin-top: .5rem; }
.dse-academy-actions { position: sticky; z-index: 4; top: .75rem; display: flex; flex-wrap: wrap; gap: .65rem; width: fit-content; max-width: 100%; margin: 0 0 1.75rem auto; padding: .55rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: color-mix(in srgb, var(--surface-container-lowest) 92%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.dse-academy-actions .btn { text-align: center; }

/* ---- Academy landing ------------------------------------------------- */
/* The landing page leads with the learner, not the taxonomy: greeting, the
   numbers that show effort is compounding, then the map, then the full
   band-by-band breakdown behind a drawer. */
.dse-dashboard-hero { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.dse-dashboard-greeting h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; letter-spacing: -.035em; }
.dse-dashboard-greeting p { max-width: 46ch; margin: 0; color: var(--on-surface-variant); font-size: 1rem; line-height: 1.55; }
/* In the hero the action row is already at the top of the page, so it drops
   the sticky treatment it needs when it floats over a long scroll. */
.dse-dashboard-hero .dse-academy-actions { position: static; align-items: center; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
/* Practising is the one thing this page exists to start, so the primary action
   is larger than the two reporting links beside it. The fill comes from
   .btn-primary itself. */
.dse-dashboard-hero .dse-academy-actions .btn-primary { padding: 14px 28px; font-size: .95rem; font-weight: 650; box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 20%, transparent); }
.dse-dashboard-hero .dse-academy-actions .btn-primary:hover { transform: translateY(-1px); background: #222; box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 26%, transparent); }
@media (prefers-reduced-motion: reduce) { .dse-dashboard-hero .dse-academy-actions .btn-primary:hover { transform: none; } }

.dse-progress-panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 2rem; }
.dse-activity-card, .dse-stat-card { padding: 1.15rem; border: 1px solid var(--outline-variant); border-radius: 1.15rem; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.dse-activity-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.dse-activity-card h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.dse-activity-card header p { margin: 0; color: var(--on-surface-variant); font-size: .8rem; }
.dse-activity-card header strong { display: grid; flex: 0 0 auto; justify-items: end; font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; }
.dse-activity-card header strong span { margin-top: .25rem; color: var(--on-surface-variant); font-size: .72rem; font-weight: 700; letter-spacing: 0; }

.dse-activity-chart { --chart-accent: var(--paper-writing); display: block; width: 100%; height: auto; }
.dse-activity-grid { color: var(--outline-variant); }
.dse-activity-grid path { stroke: currentColor; stroke-width: 1; }
.dse-activity-scale, .dse-activity-labels { fill: var(--on-surface-variant); font-size: 11px; font-weight: 600; }
.dse-activity-fill-top { stop-color: var(--chart-accent); stop-opacity: .22; }
.dse-activity-fill-bottom { stop-color: var(--chart-accent); stop-opacity: 0; }
.dse-activity-line { fill: none; stroke: var(--chart-accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dse-activity-line.is-pending { stroke-dasharray: 3 5; }
.dse-activity-dots circle { fill: var(--surface-container-lowest); stroke: var(--chart-accent); stroke-width: 2.6; }
.dse-activity-dots .is-current { fill: var(--chart-accent); }
.dse-activity-note { margin: .1rem 0 0; color: var(--on-surface-variant); font-size: .72rem; }
.dse-activity-hint { color: var(--paper-writing); font-weight: 700; }
/* The whole plotting area is the switch between weekly and daily practice. */
.dse-activity-toggle { display: block; width: 100%; padding: .2rem .1rem; border: 0; border-radius: .9rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .16s ease; }
.dse-activity-toggle:hover { background: color-mix(in srgb, var(--paper-writing) 6%, transparent); }
.dse-activity-toggle:focus-visible { outline: 2px solid var(--paper-writing); outline-offset: 2px; }
.dse-activity-card[data-activity-view="weeks"] [data-activity-when="days"],
.dse-activity-card[data-activity-view="days"] [data-activity-when="weeks"] { display: none; }
@media (prefers-reduced-motion: reduce) { .dse-activity-toggle { transition: none; } }

.dse-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dse-stat-card { display: grid; align-content: start; gap: .5rem; }
.dse-stat-label { color: var(--on-surface-variant); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.dse-stat-value { display: flex; align-items: baseline; gap: .3rem; font-size: 2.1rem; line-height: 1; letter-spacing: -.045em; }
.dse-stat-value span { color: var(--on-surface-variant); font-size: .78rem; font-weight: 700; letter-spacing: 0; }
.dse-stat-value em { font-size: .95rem; font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.dse-stat-empty { color: var(--on-surface-variant); }
.dse-stat-card p { margin: 0; color: var(--on-surface-variant); font-size: .76rem; line-height: 1.45; }
/* One cell per day: the streak number says how long, the strip says how it
   was earned. */
.dse-activity-strip { display: flex; gap: 3px; }
.dse-activity-strip i { flex: 1; height: 22px; border-radius: 3px; background: var(--surface-container-high); }
.dse-activity-strip i[data-level="1"] { background: color-mix(in srgb, var(--paper-writing) 26%, var(--surface-container-high)); }
.dse-activity-strip i[data-level="2"] { background: color-mix(in srgb, var(--paper-writing) 48%, var(--surface-container-high)); }
.dse-activity-strip i[data-level="3"] { background: color-mix(in srgb, var(--paper-writing) 70%, var(--surface-container-high)); }
.dse-activity-strip i[data-level="4"] { background: var(--paper-writing); }
.dse-stat-soon { background: var(--surface-container-low); }
.dse-stat-soon .dse-stat-value { color: var(--on-surface-variant); }
.dse-leaderboard-preview { display: grid; gap: .3rem; }
.dse-leaderboard-preview span { height: .5rem; border-radius: 999px; background: var(--surface-container-high); }
.dse-leaderboard-preview span:nth-child(1) { width: 82%; }
.dse-leaderboard-preview span:nth-child(2) { width: 62%; }
.dse-leaderboard-preview span:nth-child(3) { width: 44%; }

.dse-personal-graph { margin-bottom: 2rem; }
.dse-personal-graph-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.dse-personal-graph-header h2 { margin: 0 0 .35rem; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.dse-personal-graph-header p { max-width: 60ch; margin: 0; color: var(--on-surface-variant); font-size: .88rem; line-height: 1.55; }
.dse-graph-key { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem .8rem; max-width: 260px; color: var(--on-surface-variant); font-size: .74rem; }
.dse-graph-key span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .35rem; border-radius: 50%; vertical-align: .01rem; background: var(--on-surface-variant); }
.dse-graph-key-unassessed::before { border: 1.5px dashed var(--outline); background: transparent !important; }
.dse-graph-key-scale::before { width: .38rem; height: .38rem; }
.dse-personal-graph-stage { padding: 1rem; border: 1px solid var(--outline-variant); border-radius: 1.15rem; background: var(--surface-container-lowest); }

.dse-knowledge-drawer { overflow: hidden; border: 1px solid var(--outline-variant); border-radius: 1.15rem; background: var(--surface-container-lowest); }
.dse-knowledge-drawer > summary { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.2rem; cursor: pointer; list-style: none; }
.dse-knowledge-drawer > summary::-webkit-details-marker { display: none; }
.dse-knowledge-drawer > summary::after { content: "›"; margin-left: auto; font-size: 1.5rem; line-height: 1; transition: transform .18s ease; }
.dse-knowledge-drawer[open] > summary::after { transform: rotate(90deg); }
.dse-knowledge-drawer > summary strong { display: block; font-size: 1.05rem; }
.dse-knowledge-drawer > summary small { display: block; margin-top: .2rem; color: var(--on-surface-variant); font-size: .8rem; }
.dse-knowledge-drawer[open] > summary { border-bottom: 1px solid var(--outline-variant); }
.dse-knowledge-drawer-body { padding: 1.2rem; background: var(--surface-container-low); }
.dse-knowledge-drawer-body .dse-category-legend { justify-content: flex-start; max-width: none; margin-bottom: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .dse-knowledge-drawer > summary::after { transition: none; } }
.dse-category-map-header { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.dse-category-map-header h1 { margin: 0 0 .45rem; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.035em; }
.dse-category-map-header p { max-width: 650px; margin: 0; color: var(--on-surface-variant); font-size: 1rem; line-height: 1.55; }
.dse-category-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem .8rem; max-width: 390px; color: var(--on-surface-variant); font-size: .76rem; }
.dse-category-legend span::before { content: ""; display: inline-block; width: .58rem; height: .58rem; margin-right: .35rem; border-radius: 50%; vertical-align: .02rem; background: #7c837e; }
.dse-category-legend .up::before { background: #2f7d4b; }
.dse-category-legend .same::before { background: #386f9d; }
.dse-category-legend .down::before { background: #b34a4a; }
.dse-knowledge-categories { display: grid; gap: 1.5rem; }
.dse-knowledge-category { padding: 1.2rem; border: 1px solid var(--outline-variant); border-radius: 1.15rem; background: var(--surface-container-low); }
.dse-knowledge-category > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dse-knowledge-category > header h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.dse-knowledge-category > header p { margin: 0; color: var(--on-surface-variant); font-size: .82rem; }
.dse-knowledge-category > header > span { flex: 0 0 auto; padding: .35rem .6rem; border-radius: 999px; color: var(--on-surface-variant); background: var(--surface-container-high); font-size: .74rem; font-weight: 800; }
.dse-capability-node-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.dse-capability-node { --category-colour: #7c837e; display: grid; grid-template-rows: auto auto 1fr auto; gap: .65rem; min-height: 155px; padding: .95rem; border: 1px solid color-mix(in srgb, var(--category-colour) 35%, var(--outline-variant)); border-top: 4px solid var(--category-colour); border-radius: .9rem; color: inherit; background: color-mix(in srgb, var(--category-colour) 5%, var(--surface-container-lowest)); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dse-capability-node:hover { transform: translateY(-2px); border-color: var(--category-colour); box-shadow: var(--shadow-soft); }
.dse-capability-node:focus-visible { outline: 3px solid color-mix(in srgb, var(--category-colour) 40%, transparent); outline-offset: 2px; }
.dse-capability-node header { display: flex; align-items: start; justify-content: space-between; gap: .65rem; }
.dse-capability-node h3 { margin: 0; font-size: .95rem; line-height: 1.3; }
.dse-category-change { flex: 0 0 auto; padding: .28rem .5rem; border-radius: 999px; color: var(--category-colour); background: color-mix(in srgb, var(--category-colour) 12%, transparent); font-size: .72rem; font-weight: 800; }
.dse-capability-band { display: flex; align-items: baseline; gap: .4rem; }
.dse-capability-band > span { color: var(--on-surface-variant); font-size: .72rem; font-weight: 750; }
.dse-capability-band strong { color: var(--on-surface); font-size: 1.85rem; line-height: 1; letter-spacing: -.04em; }
.dse-capability-band strong span { margin-left: .1rem; color: var(--on-surface-variant); font-size: .72rem; letter-spacing: 0; }
.dse-capability-node p { margin: 0; color: var(--on-surface-variant); font-size: .78rem; line-height: 1.4; }
.dse-capability-node > small { color: var(--category-colour); font-size: .73rem; font-weight: 800; }
.dse-category-up { --category-colour: #2f7d4b; }
.dse-category-same { --category-colour: #386f9d; }
.dse-category-down { --category-colour: #b34a4a; }
.dse-category-untried { --category-colour: #7c837e; }
.dse-unassessed-card { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: .9rem; background: color-mix(in srgb, #7c837e 5%, var(--surface-container-lowest)); }
.dse-unassessed-card summary { display: flex; align-items: center; gap: .75rem; padding: 1rem; color: var(--on-surface-variant); cursor: pointer; font-size: .9rem; font-weight: 800; list-style: none; }
.dse-unassessed-card summary::-webkit-details-marker { display: none; }
.dse-unassessed-card summary::before { content: "›"; flex: 0 0 auto; font-size: 1.2rem; line-height: 1; transition: transform .18s ease; }
.dse-unassessed-card[open] summary::before { transform: rotate(90deg); }
.dse-unassessed-card summary strong { margin-left: auto; padding: .28rem .55rem; border-radius: 999px; color: var(--on-surface); background: var(--surface-container-high); font-size: .74rem; }
.dse-unassessed-card[open] summary { border-bottom: 1px solid var(--outline-variant); }
.dse-unassessed-node-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding: .8rem; }
.dse-unassessed-node-list a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem; border-radius: .65rem; color: var(--on-surface); background: var(--surface-container-low); text-decoration: none; font-size: .82rem; font-weight: 750; }
.dse-unassessed-node-list a:hover, .dse-unassessed-node-list a:focus-visible { background: var(--surface-container-high); outline: 2px solid var(--outline); outline-offset: 1px; }
.dse-unassessed-node-list a span { flex: 0 0 auto; color: var(--on-surface-variant); font-size: .68rem; font-weight: 700; }
.dse-node-evidence-hero { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin: 1.5rem 0; }
.dse-node-evidence-hero > div:first-child > span { color: var(--on-surface-variant); font-size: .78rem; font-weight: 800; }
.dse-node-evidence-hero h1 { margin: .25rem 0 .5rem; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.04em; }
.dse-node-evidence-hero p { margin: 0; color: var(--on-surface-variant); }
.dse-node-current-band { display: grid; flex: 0 0 auto; min-width: 130px; padding: 1rem; border: 1px solid var(--outline-variant); border-radius: 1rem; background: var(--surface-container-low); text-align: center; }
.dse-node-current-band > span, .dse-node-current-band small { color: var(--on-surface-variant); font-size: .72rem; font-weight: 750; }
.dse-node-current-band strong { margin: .3rem 0; font-size: 2.5rem; line-height: 1; }
.dse-node-current-band strong span { margin-left: .1rem; color: var(--on-surface-variant); font-size: .8rem; }
.dse-band-explanation { margin: 0 0 1rem; padding: 1rem; border-left: 4px solid var(--primary); border-radius: 0 .8rem .8rem 0; background: var(--surface-container-low); }
.dse-band-explanation p { margin: .35rem 0 0; color: var(--on-surface-variant); line-height: 1.5; }
.dse-node-evidence-actions { margin: 1rem 0 2rem; }
.dse-node-evidence-history > h2 { margin-bottom: 1rem; }
.dse-node-evidence-card { display: grid; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--outline-variant); border-left: 4px solid #7c837e; border-radius: 1rem; background: var(--surface-container-lowest); }
.dse-node-evidence-card.correct { border-left-color: #2f7d4b; }
.dse-node-evidence-card.incorrect { border-left-color: #b34a4a; }
.dse-node-evidence-card.pending { border-left-color: #7c5aa6; }
.dse-node-evidence-card > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.dse-node-evidence-card > header span { color: var(--on-surface-variant); font-size: .74rem; }
.dse-node-evidence-card > header h3 { margin: .25rem 0 0; font-size: 1.15rem; }
.dse-node-evidence-card > header > strong { padding: .3rem .55rem; border-radius: 999px; background: var(--surface-container-high); font-size: .74rem; }
.dse-node-evidence-card > p { margin: 0; line-height: 1.5; }
.dse-node-evidence-card section { padding-top: .85rem; border-top: 1px solid var(--outline-variant); }
.dse-node-evidence-card h4 { margin: 0 0 .4rem; font-size: .82rem; }
.dse-node-evidence-card blockquote { margin: 0; padding: .75rem; border-left: 3px solid var(--outline); background: var(--surface-container-low); white-space: pre-wrap; }
.dse-node-evidence-card section p { margin: 0 0 .45rem; line-height: 1.5; }
.dse-node-evidence-card section small { display: block; margin-top: .3rem; color: var(--on-surface-variant); }
.dse-node-evidence-card section a { display: inline-block; margin-top: .65rem; font-weight: 800; }
.dse-results-actions { display: flex; justify-content: center; gap: .75rem; margin: 2rem 0 0; }
.dse-node-dialog { width: min(560px, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 1.25rem; color: var(--on-surface); background: var(--surface-container-lowest); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.dse-node-dialog::backdrop { background: rgba(15, 20, 16, .54); backdrop-filter: blur(3px); }
.dse-node-dialog-inner { position: relative; padding: 1.5rem; }
.dse-node-dialog h2 { margin: .35rem 2rem .8rem 0; font-size: 1.8rem; }
.dse-node-close { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--surface-container-low); color: inherit; font-size: 1.4rem; cursor: pointer; }
.dse-node-status { font-weight: 700; text-transform: capitalize; }
.dse-node-confidence { color: var(--on-surface-variant); }
.dse-node-evidence { margin: 1.25rem 0; padding: 1rem; border-radius: .85rem; background: var(--surface-container-low); }
.dse-node-evidence h3 { margin: 0 0 .6rem; font-size: .9rem; }
.dse-node-evidence ul { margin: 0; padding-left: 1.1rem; }
.dse-node-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.dse-node-action-state { display: block; min-height: 1.25rem; margin-top: .75rem; color: var(--on-surface-variant); font-size: .82rem; }
.dse-practice-nav { max-width: 800px; margin: 0 auto 2rem; }
.dse-calibration-controls { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--outline-variant); }
.dse-review-form { display: grid; gap: 1rem; margin-top: 1rem; }
.dse-review-form label { display: grid; gap: .35rem; }
.dse-review-form select, .dse-review-form input, .dse-review-form textarea { font: inherit; padding: .65rem; border: 1px solid var(--outline); border-radius: .5rem; }
.dse-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.dse-assignment-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .75rem; align-items: end; }
.dse-assignment-form label { display: grid; gap: .35rem; }
.dse-assignment-form input { font: inherit; padding: .65rem; border: 1px solid var(--outline); border-radius: .5rem; }
.dse-tutor-assignments { margin: 2rem 0; }
.dse-tutor-assignments h2 { font-size: 1.25rem; }
.dse-assignment-card { align-items: center; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 1rem; color: inherit; display: flex; justify-content: space-between; margin-top: .75rem; padding: 1rem; text-decoration: none; }
.dse-assignment-card small { color: var(--on-surface-variant); display: block; margin-top: .25rem; }
.dse-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.dse-practice-setup { max-width: 720px; margin: 0 auto; }
.dse-practice-setup h1 { margin-bottom: .5rem; font-size: clamp(2rem, 6vw, 3.5rem); }
.dse-practice-start-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.dse-practice-start-form fieldset { display: grid; gap: .75rem; padding: 0; border: 0; }
.dse-practice-start-form legend { padding: 0; color: var(--on-surface-variant); font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
/* Setup keeps the neutral identity — the paper accents belong to a live
   session, not to its settings. */
.dse-practice-setup-card { display: grid; gap: 1.5rem; padding: 1.75rem; border: 1px solid var(--outline-variant); border-radius: 1.25rem; background: var(--surface-container-lowest); box-shadow: var(--shadow-soft); }
.dse-pill-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.dse-pill-group label { position: relative; margin: 0; }
.dse-pill-group input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dse-pill { display: inline-block; padding: .6rem 1.05rem; border: 1.5px solid var(--outline-variant); border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.dse-pill-group input:checked + .dse-pill { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.dse-pill-group input:focus-visible + .dse-pill { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 2px; }
.dse-mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .65rem; }
.dse-mode-cards label { position: relative; margin: 0; }
.dse-mode-cards input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dse-mode-card { display: grid; gap: .25rem; height: 100%; box-sizing: border-box; padding: 1rem 1.1rem; border: 1.5px solid var(--outline-variant); border-radius: .9rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dse-mode-card strong { color: var(--on-surface); font-size: .95rem; letter-spacing: normal; }
.dse-mode-card small { color: var(--on-surface-variant); font-size: .8rem; letter-spacing: normal; line-height: 1.45; }
.dse-pill { letter-spacing: normal; }
.dse-mode-cards input:disabled + .dse-mode-card { cursor: not-allowed; opacity: .58; background: var(--surface-container-low); }
.dse-mode-cards input:checked + .dse-mode-card { border-color: var(--primary); background: var(--surface-container-low); box-shadow: inset 0 0 0 1px var(--primary); }
.dse-mode-cards input:focus-visible + .dse-mode-card { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dse-pill, .dse-mode-card { transition: none; } }
.dse-practice-start-form label:not(.dse-practice-check) { display: grid; gap: .4rem; }
.dse-practice-start-form select { width: min(100%, 280px); padding: .7rem; border: 1px solid var(--outline); border-radius: .65rem; color: inherit; background: var(--surface-container-lowest); font: inherit; }
/* Same opt-out as .dse-choice: a checkbox and its sentence share a row. */
.dse-practice-check { display: flex; flex-direction: row; align-items: flex-start; gap: .55rem; color: var(--on-surface); font-size: .92rem; font-weight: 400; letter-spacing: normal; line-height: 1.45; }
.dse-practice-check input { margin-top: .22rem; accent-color: var(--primary); }
.dse-adaptive-preview { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid #c98324; border-radius: .85rem; background: color-mix(in srgb, #f0a236 12%, var(--surface-container-lowest)); }
.dse-adaptive-preview p { margin: .35rem 0 0; color: var(--on-surface-variant); }
.dse-adaptive-preview.compact { font-size: .82rem; }
.dse-practice-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dse-practice-nav form { margin: 0; }
.dse-practice-nav button { padding: 0; border: 0; color: var(--primary); background: transparent; font: inherit; cursor: pointer; }
.dse-adaptive-status { display: grid; gap: .7rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--outline-variant)); border-radius: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface-container-lowest)), var(--surface-container-lowest) 55%); }
.dse-adaptive-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dse-adaptive-heading > div:first-child { display: grid; min-width: 0; gap: .2rem; }
.dse-adaptive-heading > div:first-child span { overflow: hidden; color: var(--on-surface-variant); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.dse-band-stack { display: grid; flex: 0 0 auto; justify-items: end; gap: .35rem; }
.dse-band-hud { --band-accent: var(--accent, var(--primary)); position: relative; display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: .16rem; min-width: 6.3rem; box-sizing: border-box; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--band-accent) 35%, var(--outline-variant)); border-radius: 999px; color: var(--band-accent); background: color-mix(in srgb, var(--band-accent) 9%, var(--surface-container-lowest)); font-size: .76rem; font-weight: 800; line-height: 1; }
.dse-band-hud strong { font-size: 1.25rem; line-height: .8; }
.dse-band-hud.is-up { --band-accent: #25804a; animation: dse-band-pop .62s cubic-bezier(.16, 1.3, .32, 1) both; }
.dse-band-hud.is-down { --band-accent: #b43b43; animation: dse-band-pop .62s cubic-bezier(.16, 1.3, .32, 1) both; }
.dse-band-change { margin-left: .2rem; font-size: .8rem; font-weight: 900; }
.dse-band-estimate { color: var(--on-surface-variant); font-size: .7rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.dse-band-estimate.is-up { color: #25804a; }
.dse-band-estimate.is-down { color: #b43b43; }
.dse-band-burst { position: absolute; z-index: 2; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; color: var(--band-accent); background: currentColor; pointer-events: none; animation: dse-band-burst .72s ease-out both; }
@keyframes dse-band-pop {
  0% { transform: scale(.86); }
  48% { transform: scale(1.12) rotate(-2deg); box-shadow: 0 5px 18px color-mix(in srgb, var(--band-accent) 28%, transparent); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes dse-band-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); box-shadow: 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor, 0 0 0 currentColor; }
  72% { opacity: .92; box-shadow: 0 -23px 0 currentColor, 17px -17px 0 #ed9f20, 24px 0 0 currentColor, 17px 17px 0 #ed9f20, 0 23px 0 currentColor, -17px 17px 0 #ed9f20, -24px 0 0 currentColor, -17px -17px 0 #ed9f20; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.18); box-shadow: 0 -27px 0 currentColor, 20px -20px 0 #ed9f20, 28px 0 0 currentColor, 20px 20px 0 #ed9f20, 0 27px 0 currentColor, -20px 20px 0 #ed9f20, -28px 0 0 currentColor, -20px -20px 0 #ed9f20; }
}
.dse-adaptive-progress-copy { display: flex; justify-content: space-between; gap: 1rem; color: var(--on-surface-variant); font-size: .78rem; }
.dse-adaptive-progress { overflow: hidden; height: 6px; border-radius: 1rem; background: var(--surface-container-high); }
.dse-adaptive-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .dse-adaptive-progress span { transition: none; } }
.dse-adaptive-debug { margin: 1rem 0; border: 1px solid #486272; border-radius: .85rem; color: #d8eef8; background: #10242d; }
.dse-adaptive-debug summary { padding: .8rem 1rem; font-weight: 750; cursor: pointer; }
.dse-adaptive-debug pre { overflow: auto; max-height: 26rem; margin: 0; padding: 1rem; border-top: 1px solid #486272; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.dse-practice-checkpoint { margin: 1rem 0; color: var(--on-surface-variant); font-size: .95rem; font-weight: 750; text-align: center; }
/* Module-complete celebration. One stage: the tortoise on the left, the line
   it is watching on the right, and the headroom above them where the line's
   glyphs burst into fireworks. dse-celebration.js drives the whole timeline;
   with no JS the stage simply stands still, so the copy must stay legible. */
.dse-celebration { margin: 1rem 0 1.25rem; }
.dse-celebration-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(.6rem, 3vw, 1.75rem); min-height: 210px; overflow: hidden; }
.dse-celebration-compact { margin: .25rem 0 .75rem; }
.dse-celebration-compact .dse-celebration-stage { min-height: 150px; }
.dse-celebration-compact .dse-celebration-tortoise { width: clamp(92px, 17vw, 132px); }
.dse-celebration-compact .dse-celebration-line { font-size: clamp(.9rem, 2.6vw, 1.35rem); }
/* The margin under the tortoise is headroom for the shell to drop into when
   it stops standing on its legs and lands on its carapace. */
.dse-celebration-tortoise { position: relative; flex: 0 0 auto; width: clamp(104px, 20vw, 168px); aspect-ratio: 200 / 112; margin-bottom: 1rem; transition: transform 2.3s cubic-bezier(.22, .55, .3, 1); }
.dse-celebration-tortoise.is-gliding { transform: translateX(var(--glide-x, 130%)); }
.dse-celebration .dse-tortoise { position: absolute; inset: 0; width: 100%; height: 100%; animation: none; }
/* Standing still and watching: no marching in place, but keep breathing. */
.dse-celebration .dse-tortoise-leg { animation: none; }
.dse-celebration-line { margin: 0 0 1rem; font-size: clamp(.95rem, 3.4vw, 1.75rem); font-weight: 900; line-height: 1.1; text-align: left; white-space: nowrap; }
/* Airborne: the line holds its box (so nothing reflows behind the fireworks)
   but paints nothing — the sparks carry its glyphs now. */
.dse-celebration-line.is-airborne { color: transparent; }
.dse-celebration-spark {
  position: absolute; left: 0; top: 0; z-index: 1; margin: 0;
  line-height: 1; pointer-events: none; will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.14, .72, .22, 1), opacity .45s ease;
}
.dse-celebration-spark.is-lit { animation: dse-spark-glow var(--spark-glow, .8s) ease-in-out var(--spark-delay, 0s) infinite alternate; }
/* Out for good: one last flare as the glow releases, then dark. */
.dse-celebration-spark.is-out { animation: none; opacity: 0; text-shadow: none; transition: opacity .5s ease, text-shadow .5s ease; }
@keyframes dse-spark-glow {
  from { opacity: .45; text-shadow: 0 0 3px currentColor; }
  to { opacity: 1; text-shadow: 0 0 7px currentColor, 0 0 16px currentColor, 0 0 30px currentColor; }
}
/* Watching the fireworks: the neck cranes up, the skull tips back, and the
   jaw drops away from a smiling upper lip. */
.dse-tortoise-smile { fill: none; stroke: #5c563f; stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }
.dse-tortoise.is-looking-up .dse-tortoise-reach { transform-box: fill-box; transform-origin: 0 100%; transform: rotate(-36deg) scale(1.1, 1); transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.dse-tortoise.is-looking-up .dse-tortoise-head { animation: none; transform: rotate(-14deg); transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.dse-tortoise.is-looking-up .dse-tortoise-jaw { transform-box: fill-box; transform-origin: 0 20%; transform: rotate(19deg); transition: transform .5s ease .35s; }
.dse-tortoise.is-looking-up .dse-tortoise-smile { opacity: 1; transition-delay: .35s; }
/* Tuck, sweep, glide: three beats. First the head pulls part-way in — the
   snout stays peeking past the shell rim, it never disappears — then all four
   legs sweep back in one stroke as the body shoves off, and the shell slides
   out with the legs trailing in the slipstream. */
.dse-tortoise.is-tucking .dse-tortoise-reach,
.dse-tortoise.is-launching .dse-tortoise-reach,
.dse-tortoise.is-gliding .dse-tortoise-reach { transform-box: fill-box; transform-origin: 0 100%; transform: rotate(-5deg) scale(.58, .82); transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.dse-tortoise.is-tucking .dse-tortoise-head,
.dse-tortoise.is-launching .dse-tortoise-head,
.dse-tortoise.is-gliding .dse-tortoise-head { animation: none; transform: rotate(2deg); transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
/* The sweep: a short reach forward, then one stroke back past vertical. */
.dse-tortoise.is-launching .dse-tortoise-leg { animation: dse-tortoise-leg-sweep .52s cubic-bezier(.42, 0, .25, 1) both; }
@keyframes dse-tortoise-leg-sweep { 0% { transform: rotate(0); } 30% { transform: rotate(-30deg); } 100% { transform: rotate(56deg); } }
/* Trailing behind the shell once it slides, with a light flutter. */
.dse-tortoise.is-gliding .dse-tortoise-leg { animation: dse-tortoise-leg-trail 1.1s ease-in-out infinite both; }
.dse-tortoise.is-gliding .dse-tortoise-leg-b { animation-delay: -.55s; }
@keyframes dse-tortoise-leg-trail { 0%, 100% { transform: rotate(56deg); } 50% { transform: rotate(49deg); } }
.dse-tortoise.is-launching .dse-tortoise-body { animation: dse-tortoise-shove .52s ease-in-out both; }
/* The shove drops it onto the plastron before the slide starts, so the landing
   is its own beat rather than something that happens on the way out. */
.dse-tortoise.is-launching,
.dse-tortoise.is-gliding { transform: translateY(6px) rotate(-3.5deg); transition: transform .45s ease-out; }
.dse-tortoise.is-gliding .dse-tortoise-body { animation: dse-tortoise-skid 1.1s ease-in-out infinite; }
/* The shadow rides up under the plastron (it lives inside the SVG, so moving
   the whole drawing down would take the shadow with it) and stretches out into
   a slide mark. Units here are viewBox units, not page pixels. */
.dse-tortoise.is-launching .dse-tortoise-shadow,
.dse-tortoise.is-gliding .dse-tortoise-shadow { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-13px) scale(1.15, .45); opacity: .5; transition: transform .45s ease-out, opacity .45s ease-out; }
@keyframes dse-tortoise-shove { 40% { transform: translate(-6px, 1px); } 100% { transform: translate(4px, 3px); } }
@keyframes dse-tortoise-skid { 50% { transform: translateY(-1px) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) {
  .dse-submit-shortcut-tooltip { transition: none; }
  .dse-celebration-spark, .dse-celebration-tortoise, .dse-tortoise.is-gliding { transition: none; }
  .dse-celebration-spark.is-lit { animation: none; }
  .dse-band-hud, .dse-band-burst { animation: none; }
}
@media (max-width: 430px) { .dse-celebration-stage { min-height: 180px; } }

/* ---- Marking wait: pages drift down and the tortoise eats through them --- */
.dse-marking-wait { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1rem 1.5rem; }
.dse-marking-wait[hidden] { display: none; }
/* Room above the pile for a page to fall in from off-stage. */
.dse-marking-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 420px; padding-top: 120px; }
/* The tortoise paints over the paper: at the bite the muzzle crosses the page
   edge, and it has to read as biting into the sheet rather than disappearing
   behind it. */
.dse-marking-tortoise { position: relative; z-index: 3; flex: 0 0 auto; width: clamp(140px, 32vw, 184px); aspect-ratio: 200 / 112; }
.dse-marking-tortoise .dse-tortoise { position: static; width: 100%; height: 100%; animation: none; }
/* The pile sits clear of the tortoise, in front of the muzzle, so the head
   reaches out to it rather than overlapping it. */
.dse-marking-papers { position: relative; z-index: 2; flex: 0 0 auto; width: clamp(74px, 17vw, 98px); height: clamp(52px, 12vw, 68px); margin-bottom: 4%; }
.dse-marking-page { position: absolute; inset: 0; transform: translate(var(--drift-x, 0), 0) rotate(var(--drift-r, 0deg)); border: 1px solid var(--outline-variant); border-radius: 2px; background: var(--paper-sheet); box-shadow: 0 1px 3px color-mix(in srgb, #1c1b1b 10%, transparent); }
/* Four ruled lines standing in for handwriting. */
.dse-marking-page i { position: absolute; left: 8%; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--on-surface-variant) 34%, transparent); }
.dse-marking-page i:nth-child(1) { top: 24%; width: 66%; }
.dse-marking-page i:nth-child(2) { top: 40%; width: 74%; }
.dse-marking-page i:nth-child(3) { top: 56%; width: 58%; }
/* The fourth line starts clear of the figure and resumes after it. */
.dse-marking-page i:nth-child(4) { top: 72%; left: 44%; width: 38%; }
/* Woven into the ruling rather than labelled: the figure opens the fourth line
   in the same weight and colour as the handwriting it replaces. That line's
   near edge is exactly where the tortoise bites, so the figure goes with the
   chunk — and the next page drifts in carrying a higher one. It scales with the
   sheet so the bite keeps swallowing it whole at every width. */
.dse-marking-progress { position: absolute; left: 8%; top: 73%; transform: translateY(-50%); color: color-mix(in srgb, var(--on-surface-variant) 62%, transparent); font-size: clamp(7px, 1.6vw, 9px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
/* The bite is masked out of the near edge, so whatever is under the page shows
   through the notch rather than a coloured patch being painted over it. Sized
   in percentages of the sheet, wide enough to take the whole figure with it: a
   bite that leaves half a number behind reads as a rendering fault, not as
   eating. */
.dse-marking-page.has-bite { -webkit-mask-image: radial-gradient(39% 24% at 0% 73%, transparent 0 99%, #000 100%); mask-image: radial-gradient(39% 24% at 0% 73%, transparent 0 99%, #000 100%); }
/* A page does not drop, it drifts: it slides past its resting point either way
   as it loses height, the way a sheet of paper falls. */
.dse-marking-page.is-falling { animation: dse-page-drift 2.4s cubic-bezier(.37, 0, .5, 1) both; }
@keyframes dse-page-drift {
  0% { transform: translate(26px, -190px) rotate(-11deg); opacity: 0; }
  8% { opacity: 1; }
  26% { transform: translate(-16px, -134px) rotate(13deg); }
  48% { transform: translate(18px, -86px) rotate(-10deg); }
  68% { transform: translate(-12px, -46px) rotate(8deg); }
  86% { transform: translate(7px, -15px) rotate(-4deg); }
  100% { transform: translate(var(--drift-x, 0), 0) rotate(var(--drift-r, 0deg)); }
}
/* Reading posture: glasses on, head lowered over the page, no walk cycle. */
.dse-tortoise.is-reading .dse-tortoise-body, .dse-tortoise.is-reading .dse-tortoise-leg { animation: none; }
.dse-tortoise.is-reading .dse-tortoise-head { transform-box: fill-box; transform-origin: 0 50%; animation: dse-tortoise-scan 3.2s ease-in-out infinite; }
.dse-tortoise.is-reading .dse-tortoise-reach { transform-box: fill-box; transform-origin: 0 50%; transform: rotate(15deg); transition: transform .55s cubic-bezier(.4, 0, .3, 1); }
/* The bite: the head stretches until the jaw actually meets the page edge —
   measured at the moment the jaw closes, not eyeballed from the skull outline,
   whose tip sits ahead of the mouth. */
.dse-tortoise.is-reaching .dse-tortoise-reach { transform: rotate(26deg) scale(1.45, 1); }
.dse-tortoise.is-settling .dse-tortoise-reach { transform: rotate(15deg); }
.dse-tortoise.is-biting .dse-tortoise-jaw { transform-box: fill-box; transform-origin: 0 20%; animation: dse-tortoise-jaw-open .42s ease-in-out; }
/* The eye tracks down the page and flicks back, which is what makes it read
   as reading rather than staring. */
@keyframes dse-tortoise-scan { 30% { transform: translateY(1.2px) rotate(3deg); } 60% { transform: translateY(2.2px) rotate(5deg); } }
.dse-tortoise-glasses { pointer-events: none; }
.dse-tortoise-lens { fill: color-mix(in srgb, #cfe4ec 34%, transparent); stroke: #3b3626; stroke-width: 1.5; }
.dse-tortoise-temple, .dse-tortoise-bridge { fill: none; stroke: #3b3626; stroke-width: 1.5; stroke-linecap: round; }
.dse-marking-wait-status { margin: 0; color: var(--on-surface-variant); font-size: .9rem; font-weight: 600; }

/* ---- Practice-mix wait: the tortoise stacks pebbles ------------------ */
.dse-mix-wait { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1rem 1.5rem; }
.dse-mix-wait[hidden] { display: none; }
.dse-mix-stage { display: flex; align-items: flex-end; justify-content: center; width: 100%; }
/* Room above the shell for the cairn, which is drawn outside the viewBox. */
.dse-mix-tortoise { width: clamp(150px, 34vw, 208px); aspect-ratio: 200 / 112; }
.dse-mix-tortoise .dse-tortoise { position: static; width: 100%; height: 100%; overflow: visible; animation: none; }
.dse-mix-tortoise .dse-tortoise-body { animation: dse-tortoise-bob 2.4s ease-in-out infinite; }
.dse-mix-tortoise .dse-tortoise-leg { animation: none; }
/* Wind up and strike with the near front paw only. */
.dse-tortoise.is-winding .dse-tortoise-leg-near .dse-tortoise-leg-a { transform-box: fill-box; transform-origin: 50% 0; transform: rotate(-26deg); transition: transform .26s ease-out; }
.dse-tortoise.is-pounding .dse-tortoise-leg-near .dse-tortoise-leg-a { transform-box: fill-box; transform-origin: 50% 0; transform: rotate(14deg); transition: transform .19s cubic-bezier(.3, 0, .2, 1); }
/* The jaw line is already a gentle upward-cornered curve — a simple smile. The
   .dse-tortoise-smile path is the *upper* lip of an open mouth, drawn only for
   the celebration; adding it here closed the two into an "O" that read as
   shock. So the smiling tortoise just keeps its default mouth. */
.dse-tortoise.is-smiling .dse-tortoise-smile { opacity: 0; }
.dse-tortoise.is-watching .dse-tortoise-reach { transform-box: fill-box; transform-origin: 0 50%; transform: rotate(-15deg); transition: transform .3s ease-out; }
/* Without fill-box the rotation pivots on the viewBox origin and slings the
   pebble off-canvas instead of tumbling it in place. */
.dse-pebble { transform-box: fill-box; transform-origin: 50% 50%; stroke: color-mix(in srgb, #1c1b1b 20%, transparent); stroke-width: .7; }
/* The pebble drops in and settles on the ground before anything hits it, so
   the paw reads as answering the pebble rather than conjuring it. */
.dse-pebble.is-arriving { animation: dse-pebble-arrive .38s cubic-bezier(.35, 0, .55, 1) both; }
@keyframes dse-pebble-arrive {
  0% { transform: translateY(-30px); opacity: 0; }
  45% { opacity: 1; }
  74% { transform: translateY(0); }
  86% { transform: translateY(-2.5px); }
  100% { transform: translateY(0); }
}
/* Two phases in one arc: the pebble carries across and decelerates to an apex
   directly above its resting place, then accelerates straight down onto the
   stack. Doing the sideways travel first is what stops it hanging in the air
   and then sliding in diagonally. */
.dse-pebble.is-flying { animation: dse-pebble-fly .9s both; }
@keyframes dse-pebble-fly {
  0% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.15, .62, .4, 1); }
  62% { transform: translate(var(--fly-x), calc(var(--fly-y) - 30px)) rotate(-200deg); animation-timing-function: cubic-bezier(.55, 0, .9, 1); }
  100% { transform: translate(var(--fly-x), var(--fly-y)) rotate(-244deg); }
}
.dse-pebble.is-landed { transform: translate(var(--fly-x), var(--fly-y)) rotate(-244deg); animation: dse-pebble-settle .22s ease-out; }
@keyframes dse-pebble-settle { 40% { transform: translate(var(--fly-x), calc(var(--fly-y) + 1.2px)) rotate(-244deg); } }
.dse-pebble-layer { transition: opacity .5s ease; }
.dse-pebble-layer.is-clearing { opacity: 0; }
.dse-mix-status { margin: 0; color: var(--on-surface-variant); font-size: .9rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .dse-marking-page.is-falling, .dse-pebble.is-flying, .dse-pebble.is-landed { animation: none; }
  .dse-tortoise.is-reading .dse-tortoise-head, .dse-mix-tortoise .dse-tortoise-body { animation: none; }
  .dse-tortoise.is-reading .dse-tortoise-reach, .dse-tortoise.is-watching .dse-tortoise-reach { transition: none; }
}

.dse-practice-break { max-width: 680px; margin: 3rem auto; text-align: center; }
.dse-practice-break .dse-hero-actions { justify-content: center; margin-top: 1.25rem; }
.dse-practice-break form { margin: 0; }
@media (max-width: 760px) { .dse-paper-grid, .dse-domain-grid, .dse-assignment-form, .dse-priority-grid, .dse-graph-grid, .dse-learner-state-grid { grid-template-columns: 1fr; } .dse-practice-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dse-paper-card h2 { min-height: 0; } .dse-main { padding-top: 1.5rem; } .dse-submit-row .btn { flex: 1 1 8rem; } .dse-save-state { flex-basis: 100%; } .dse-diagnostic-exit { align-items: stretch; flex-direction: column; } .dse-diagnostic-exit .btn { width: 100%; } .dse-findings-card { grid-template-columns: 1fr; } .dse-map-header { align-items: flex-start; flex-direction: column; } .dse-graph-legend { justify-content: flex-start; } .dse-results-actions { align-items: stretch; flex-direction: column; } .dse-results-actions .btn { text-align: center; } .dse-feedback-card > header { align-items: flex-start; flex-direction: column; } .dse-source-table-cards, .dse-source-table-cards tbody, .dse-source-table-cards tr, .dse-source-table-cards td { display: block; width: 100%; box-sizing: border-box; } .dse-source-table-cards thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } .dse-source-table-cards tbody tr { display: grid; gap: .7rem; padding: .7rem; } .dse-source-table-cards td { padding: .8rem; border: 1px solid var(--outline-variant); border-radius: .65rem; } .dse-source-table-cards td::before { content: attr(data-label); display: block; margin-bottom: .45rem; color: var(--on-surface-variant); font-size: .75rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; } .dse-source-table-cards tbody tr:last-child td { border-bottom: 1px solid var(--outline-variant); } }
/* Phone tuning: reclaim the horizontal padding the desktop cards can afford,
   and bring interactive controls up to a 44px touch target. */
@media (max-width: 700px) {
  .dse-question-card { padding: 1.15rem 1.1rem 1.25rem; }
  .dse-source > :not(h2):not(.dse-source-toggle) { padding: 1.1rem 1.15rem; }
  .dse-source h2 { padding: .75rem 1.15rem; }
  .dse-source > p, .dse-source-content { font-size: 1.02rem; line-height: 1.7; }
  .dse-task h1 { font-size: 1.12rem; }
  .dse-page .btn, .dse-pill, .dse-choice { min-height: 44px; }
  .dse-page .btn { display: inline-flex; align-items: center; justify-content: center; }
  .dse-pill { display: inline-flex; align-items: center; }
  .dse-adaptive-status { padding: .9rem 1rem; }
  .dse-practice-setup-card { padding: 1.15rem; }
  /* Tighten the run-up to the question so it clears the fold on landing. */
  .dse-main { padding-top: 1rem; }
  .dse-diagnostic-progress-block { gap: .4rem; margin-bottom: .75rem; }
  .dse-source { margin-bottom: .75rem; }
  .dse-source h2 { padding: .65rem 1.15rem; }
  .dse-task-shell { gap: .75rem; }
  .dse-question-label { margin-bottom: .4rem; }
  .dse-task h1 { margin-bottom: 1rem; }
  .dse-submit-shortcut { display: none; }
}
@media (max-width: 440px) { .dse-practice-report-summary { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .dse-main { padding-inline: .75rem; } .dse-graph-nodes { grid-template-columns: 1fr; } .dse-graph-node { min-height: 62px; } .dse-findings-card { margin-inline: -.15rem; } .dse-node-actions { flex-direction: column; } .dse-node-actions .btn { text-align: center; } .dse-adaptive-status { margin-inline: -.25rem; } .dse-adaptive-heading { align-items: flex-start; } .dse-band-hud { min-width: auto; } .dse-adaptive-progress-copy { align-items: flex-start; flex-direction: column; gap: .2rem; } .dse-practice-break .dse-hero-actions { align-items: stretch; flex-direction: column; } }
@media (max-width: 900px) { .dse-category-map-header { align-items: flex-start; flex-direction: column; } .dse-category-legend { justify-content: flex-start; } .dse-capability-node-grid, .dse-unassessed-node-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dse-dashboard-hero, .dse-personal-graph-header { align-items: flex-start; flex-direction: column; } .dse-graph-key { justify-content: flex-start; max-width: none; } .dse-progress-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dse-academy-actions { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; margin-bottom: 1.5rem; } .dse-academy-actions .btn:first-child { grid-column: 1 / -1; } .dse-knowledge-category { padding: .85rem; } .dse-knowledge-category > header { align-items: flex-start; flex-direction: column; } .dse-capability-node-grid, .dse-unassessed-node-list { grid-template-columns: 1fr; } .dse-capability-node { min-height: 140px; } .dse-unassessed-node-list a span { display: none; } .dse-node-evidence-hero { align-items: stretch; flex-direction: column; } .dse-node-current-band { text-align: left; } .dse-node-evidence-card > header { align-items: flex-start; flex-direction: column; } .dse-dashboard-hero .dse-academy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-bottom: 0; } .dse-activity-card > header { align-items: flex-start; flex-direction: column; } .dse-activity-card header strong { justify-items: start; } .dse-personal-graph-stage { padding: .6rem; } .dse-knowledge-drawer-body { padding: .85rem; } }