/* Shared header control and standalone display dialog. */
.header-display{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 10px;border:1px solid var(--line,#ffffff26);border-radius:10px;background:transparent;color:var(--secondary,#d6d2dd);font-family:inherit;font-size:var(--type-menu,14px);line-height:1.3;white-space:nowrap;cursor:pointer}
.header-display:hover{background:var(--accent-soft,#a967ff14);color:var(--ink,#fff)}
.header-display:focus-visible{outline:3px solid var(--focus,#d2b2ff);outline-offset:4px}
.lesson-page .site-header{gap:24px}
.lesson-header-actions{flex-wrap:wrap}
@media(max-width:1200px){.lesson-nav{display:none}.lesson-menu{display:grid}}
@media(max-width:600px){.lesson-page .site-header{height:auto;min-height:72px;padding-top:10px;padding-bottom:10px;gap:10px}.header-display{gap:5px;padding:8px}.lesson-header-actions{gap:6px}}
.display-page{--page:#08060d;--surface:#141119;--surface-raised:#1b1623;--surface-soft:#100d16;--ink:#fff;--secondary:#bdbdbd;--quiet:#aaa;--line:#ffffff17;--accent:#ba88ff;--accent-soft:#a967ff14;--diagram-bg:#100c18;--diagram-fill:#312048;--nucleus-fill:#674296;--diagram-line:#c593ff;--dna:#f1d38c;--success:#a3dfcb;--focus:#d2b2ff;--reading-size:18px;--reading-leading:1.7;--reading-tracking:0em;--reading-font:Inter,Arial,sans-serif}
.display-page[data-theme="light"]{color-scheme:light;--page:#f5f4f8;--surface:#fff;--surface-raised:#eeeaf5;--surface-soft:#f6f4fa;--ink:#111;--secondary:#555;--quiet:#666;--line:#31214826;--accent:#7026be;--accent-soft:#8e2bfa0c;--diagram-bg:#f6f2fc;--diagram-fill:#e7dcf5;--nucleus-fill:#ceb5eb;--diagram-line:#76479c;--dna:#5c3f12;--success:#246650;--focus:#7527b6}
.display-page[data-theme="warm"]{color-scheme:light;--page:#f3eedf;--surface:#fffaed;--surface-raised:#ede5d4;--surface-soft:#f5eeda;--ink:#111;--secondary:#555;--quiet:#666;--line:#58472529;--accent:#754190;--accent-soft:#8455a20c;--diagram-bg:#f3eddf;--diagram-fill:#e5dcf0;--nucleus-fill:#cdb7db;--diagram-line:#735187;--dna:#684718;--success:#34644e;--focus:#754190}
.display-page[data-theme="blue"]{color-scheme:light;--page:#eaf1f7;--surface:#f3f8fd;--surface-raised:#dce6f0;--surface-soft:#e8f0f8;--ink:#111;--secondary:#555;--quiet:#666;--line:#334b6929;--accent:#6e36ae;--accent-soft:#8455a20c;--diagram-bg:#e8f0f8;--diagram-fill:#dcdcf2;--nucleus-fill:#bcaddd;--diagram-line:#71538f;--dna:#694823;--success:#276552;--focus:#6e36ae}
.display-page{--text-size-offset:calc(var(--reading-size) - 18px);--type-ui:calc(16px + var(--text-size-offset));--type-small:calc(14px + var(--text-size-offset));--type-teaching-heading:calc(20px + var(--text-size-offset));--type-title:calc(30px + var(--text-size-offset));--type-menu:calc(14px + var(--text-size-offset));--ui-label:var(--type-menu);font-family:var(--reading-font);font-size:calc(16px + var(--text-size-offset))}
.display-page[data-theme="dark"]{color-scheme:dark}
.size-label-row,.display-dialog .size-label-row{flex-wrap:wrap;gap:4px 12px}
.display-dialog{color-scheme:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:0;width:min(920px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100svh - 24px);box-shadow:0 30px 120px #0009;overflow:auto;scroll-padding-top:90px;font-family:var(--reading-font)}
.display-dialog::backdrop{background:#030107b8;backdrop-filter:blur(6px)}
.display-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--surface);border-bottom:var(--divider-width) solid var(--divider-color);padding:14px 24px}
.display-heading h2{font-weight:600;font-size:calc(24px + var(--text-size-offset));line-height:1.2;letter-spacing:-.035em;margin:0}
.display-heading h2:focus{outline:none}
.display-heading button{display:grid;place-items:center;background:transparent;color:var(--secondary);padding:0;min-width:44px;min-height:44px;font:inherit;font-size:calc(28px + var(--text-size-offset));border:0;border-radius:8px;cursor:pointer}
.display-content{padding:20px 24px 24px}
.display-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.display-columns>section{min-width:0}
.display-columns h3{font-size:calc(18px + var(--text-size-offset));font-weight:600;line-height:1.3;margin:0}
@media(max-width:700px){.display-columns{grid-template-columns:1fr;gap:28px}}
.display-dialog .settings-group{border:0;padding:0;margin:22px 0 0;min-width:0}
.display-dialog :is(.settings-group legend,.settings-label){display:block;font-size:var(--ui-label);font-weight:600;line-height:1.6;color:var(--ink);margin-bottom:10px}
.display-dialog .settings-options{display:flex;flex-wrap:wrap;gap:8px}
.display-dialog .settings-options button{font:inherit;font-size:var(--ui-label);background:var(--surface-soft);color:var(--secondary);border:1px solid var(--line);border-radius:9px;min-height:44px;padding:10px 14px;cursor:pointer}
.display-dialog .settings-options button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.display-dialog :is(button,input):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.display-dialog :is(.size-label-row,.size-range-labels){display:flex;justify-content:space-between;align-items:center;gap:12px}
.display-dialog .size-label-row .settings-label{margin:0}
.display-dialog .size-label-row output{font-size:var(--ui-label);font-variant-numeric:tabular-nums;color:var(--ink)}
.display-dialog .text-size-slider{display:block;width:100%;height:44px;margin:0;padding:0;cursor:pointer;accent-color:var(--accent)}
.display-dialog .size-range-labels{font-size:var(--type-small);color:var(--secondary)}
.display-error{color:var(--secondary);font-size:var(--ui-label);line-height:var(--reading-leading)}
.display-error:empty{display:none}
.display-done{display:block;margin-top:24px;padding:12px 24px;min-height:44px;border:0;border-radius:999px;font:inherit;font-size:var(--ui-label);font-weight:600;background:var(--action-gradient,linear-gradient(115deg,#a32ada 0%,#7821d3 45%,#421091 100%));color:white;cursor:pointer}
.display-page[data-line-spacing="1.2"] .display-dialog .settings-group{margin-top:14px}
/* The homepage artwork keeps its dark backdrop in every reading theme. */
.hero{--text:#fff;--ink:#fff;--secondary:#bdbdbd;--brand-gradient:linear-gradient(115deg,#d4a3ff 0%,#b253ff 45%,#8e2bfa 100%);--brand-solid:#8e2bfa;--button:linear-gradient(115deg,#a32ada 0%,#7821d3 45%,#421091 100%);--accent:#ba88ff;--accent-soft:#a967ff14;--focus:#d2b2ff}
.hero .header-display{border-color:#ffffff26;color:var(--secondary)}
.hero .header-display:hover{background:#a967ff14;color:#fff}
.hero .header-display:focus-visible{outline-color:#d2b2ff}
.display-page .tagline{color:#fff;line-height:max(1.035,calc(var(--reading-leading) - .665));letter-spacing:calc(-.038em + var(--reading-tracking))}
.display-page:has(.hero) .site-header{height:auto;min-height:76px;flex-wrap:wrap;gap:18px;padding-block:8px}
.display-page:has(.hero) .desktop-nav{gap:24px;left:0}
@media(max-width:1200px){.display-page:has(.hero) .desktop-nav{display:none}.display-page:has(.hero) .menu-button{display:inline-grid}}
@media(max-width:600px){.display-page:has(.hero) .site-header{gap:6px 12px}.display-page:has(.hero) .header-actions{gap:6px;flex-wrap:wrap}.display-page:has(.hero) .hero{min-height:760px}.display-page:has(.hero) .hero-copy{top:29%}.display-content{padding-inline:18px}.display-heading{padding-inline:18px}}
@media(max-width:360px){.display-page:has(.hero) .header-actions{width:100%;justify-content:flex-end}}
@media screen{
 .print-page[data-theme="dark"] .brand-up{--brand-gradient:linear-gradient(115deg,#d4a3ff 0%,#b253ff 45%,#8e2bfa 100%);--brand-solid:#ba88ff}
 .print-page.display-page{background:var(--page);color:var(--ink);line-height:var(--reading-leading);letter-spacing:var(--reading-tracking)}
 .print-page.display-page section{background:var(--surface)}
 .print-page.display-page :is(.small,.source-list span){color:var(--secondary)}
 .print-page.display-page :is(.print-controls a,.source-list a){color:var(--accent)}
 .print-page.display-page h1{font-size:calc(30px + var(--text-size-offset))}
 .print-page.display-page h2{font-size:calc(20px + var(--text-size-offset))}
 .print-page.display-page h3{font-size:calc(16px + var(--text-size-offset))}
 .print-page.display-page :is(.brand,.small){font-size:calc(13px + var(--text-size-offset))}
 .print-page.display-page .source-list{font-size:calc(12px + var(--text-size-offset))}
 .print-page.display-page .source-list span{font-size:calc(10px + var(--text-size-offset))}
}
@media print{
 .display-dialog,.header-display{display:none!important}
 .display-dialog::backdrop{display:none}
 .print-page.display-page{font-family:Arial,sans-serif;font-size:11pt;letter-spacing:normal}
}
@media(forced-colors:active){
 .display-page[data-theme]{--ink:CanvasText;--secondary:CanvasText;--quiet:GrayText}
 .display-dialog{--ink:CanvasText;--secondary:CanvasText;--surface:Canvas;--surface-soft:Canvas;--line:CanvasText;--accent:LinkText;--focus:Highlight;background:Canvas;color:CanvasText;box-shadow:none}
 .header-display,.display-dialog button{border:1px solid ButtonText}
 .display-done{background:ButtonFace;color:ButtonText}
}

/* Compact headers wrap when the full Display label or enlarged text needs room. */
@media(max-width:600px){
 .lesson-page .site-header{min-height:64px;padding:6px 12px;flex-wrap:nowrap;gap:8px}
 .lesson-page .lesson-header-actions{margin-left:auto;flex-wrap:nowrap;gap:6px}
 .lesson-header-actions :is(.xp-pill,.profile-button,.header-search){display:none}
 .lesson-header-actions .lesson-menu{width:44px;min-width:44px;min-height:44px}
 .display-page:has(.hero) .site-header{flex-wrap:wrap;gap:8px;padding-inline:12px}
 .display-page:has(.hero) .header-actions{width:auto;flex-shrink:0;flex-wrap:nowrap;gap:6px;margin-left:auto}
}

/* Preserve saved Calmer preferences; both appearances keep text edges clear. */
body[data-appearance="calm"] :is(.site-header .brand,.hero-copy h1,#catalog h1,#unit-title,.account-main h1){
 filter:none;
 text-shadow:none;
}

/* Named swatches retain a visible tick and keyboard focus in every theme. */
.colour-options button{display:inline-flex;align-items:center;gap:8px}
.colour-swatch{display:inline-block;width:18px;height:18px;flex-shrink:0;border-radius:50%;background:var(--swatch);border:1px solid currentColor}
.colour-check{visibility:hidden}
[aria-pressed="true"]>.colour-check{visibility:visible}
@media screen{.print-page[data-colour]:not([data-colour="subject"]) h1{color:var(--accent)}}
@media(forced-colors:active){.colour-swatch{background:Canvas}.colour-options button[aria-pressed="true"]{outline:2px solid Highlight}}

/* Approved homepage exception: enlarge only the phone menu hit area. */
.hero .menu-button{min-width:44px;min-height:44px;flex-shrink:0}

/* Navigation follows the shared text role without altering the hero typography. */
.hero .nav-link,.hero .mobile-menu :is(a,button){color:var(--secondary);font-size:var(--type-menu);font-weight:500}
.display-page .info-dialog p:not(.dialog-eyebrow){color:#fff}

/* Keep unfinished destinations out of the preserved homepage navigation. Direct routes still work. */
.hero :is([data-panel="tools"],[data-panel="stories"],[data-panel="search"]){display:none}

/* Site-wide horizontal separators; box outlines keep their separate line token. */
:root{--divider-width:2px}
.display-page{--divider-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.display-page hr{border:0;border-top:var(--divider-width) solid var(--divider-color)}
@media(forced-colors:active){.display-page{--divider-color:CanvasText}}

.remember-preferences{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--type-ui,14px);padding-block:10px}
.remember-preferences input{width:20px;height:20px;flex-shrink:0}