/* Step J / editorial UI foundation — one shared file for all pages. 2026-10-10.
   This layer changes only presentation; no scene state, data or hit areas.
   J-1 common header, tones, icons | J-2 home and materials. */
:root{
 --ui-navy:#243439;--ui-primary:#1c6168;--ui-primary-hover:#164d54;
 --ui-ink:#233439;--ui-muted:#5e6e72;--ui-canvas:#f4f6f3;
 --ui-surface:#fff;--ui-line:#ced6d2;--ui-soft-line:#e4e9e6;
 --ui-success:#236c53;--ui-warning:#a85b2f;--ui-focus:#b8822d;
}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell){color:var(--ui-ink)}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) :is(button,a,select,[tabindex]):focus-visible{
 outline:3px solid var(--ui-focus)!important;outline-offset:3px;
}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) button:disabled{cursor:default}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .ui-icon{
 width:20px;height:20px;display:inline-block;flex:0 0 auto;overflow:visible;
 color:inherit;vertical-align:middle;fill:none;pointer-events:none;
}
/* Base for the independent sound switches — no pastel badge around each icon. */
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-controls{display:flex;align-items:center;gap:5px}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-toggle{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-width:44px;min-height:44px;padding:8px 11px;border:1px solid transparent;
 border-radius:6px;background:transparent;color:inherit;box-shadow:none;
 font-size:13px;font-weight:680;letter-spacing:0;white-space:nowrap;
}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-toggle:hover{background:rgba(28,97,104,.08);border-color:transparent}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-toggle[aria-pressed="true"]{
 background:transparent;color:var(--ui-primary);border-color:var(--ui-primary);
}
:where(.material-header,.roof-header,.sim-header) .audio-toggle{color:#e1e9e6}
:where(.material-header,.roof-header,.sim-header) .audio-toggle:hover{background:rgba(255,255,255,.09)}
:where(.material-header,.roof-header,.sim-header) .audio-toggle[aria-pressed="true"]{color:white;border-color:#b1d3ce}
:where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-toggle .ui-icon{width:21px;height:21px}
@media(max-width:1100px){
 :where(.site-bar,.materials-shell,.roof-shell,.sim-shell) .audio-toggle{min-width:44px;width:44px;height:44px;padding:0}
}
/* Calm navigation bars, anchored by typographic hierarchy rather than floating pills. */
.materials-shell .material-header,.roof-shell .roof-header,.sim-shell .sim-header{background:var(--ui-navy);border-color:#37484b}
.materials-shell .material-header :is(.brand,.header-nav a),.roof-shell .roof-header :is(.roof-brand,.roof-nav a),.sim-shell .sim-header :is(.brand,.identity,.header-controls a){color:#f2f6f3}
.materials-shell .material-header .brand>.ui-icon,.roof-shell .roof-header .roof-brand>.ui-icon{width:22px;height:22px}
.materials-shell .material-header .brand,.roof-shell .roof-header .roof-brand{display:inline-flex;align-items:center;gap:9px}
/* Step J-2: school home. Keep the original illustration and scroll transitions. */
.site-bar{background:rgba(249,251,248,.95);backdrop-filter:none;border-bottom:1px solid var(--ui-soft-line)}
.site-bar .brand-symbol{width:27px;height:27px;background:transparent;border-radius:0;color:var(--ui-primary)}
.site-bar .brand-symbol .ui-icon{width:27px;height:27px}
.site-bar .site-brand{gap:9px}
.site-bar .site-brand strong{color:var(--ui-ink);font-weight:760}
.site-bar .site-brand small{color:var(--ui-muted)}
.site-bar .top-classroom{min-height:44px;background:transparent;border:1px solid var(--ui-line);color:var(--ui-primary);border-radius:6px;gap:8px;padding:9px 13px;font-weight:730}
.site-bar .top-classroom:hover{background:rgba(28,97,104,.06);border-color:var(--ui-primary)}
.site-bar .top-classroom .ui-icon{width:19px;height:19px}
.site-bar .top-links>a:not(.top-classroom){color:var(--ui-ink)}
.hero-copy .eyebrow{color:var(--ui-primary)}
.hero-copy h1{color:var(--ui-ink)}
.hero-copy h1 em{color:var(--ui-primary)}
.hero-copy .hero-description{color:#516468}
.hero-copy .explore-button{background:var(--ui-primary);border-radius:6px;box-shadow:none}
.hero-copy .explore-button:hover{background:var(--ui-primary-hover)}
.hero-copy .hero-direct{color:var(--ui-primary);border-color:var(--ui-primary)}
/* Treat pins as in-map labels: small horizontal rules, no raised cards or colored pads. */
.scene-sticky .pin-caption{background:rgba(255,255,255,.96);color:var(--ui-ink);border:1px solid var(--ui-line);border-left:3px solid var(--ui-primary);border-radius:5px;box-shadow:none;padding:10px 12px;font-weight:720}
.scene-sticky .pin-caption small{color:var(--ui-muted)}
.scene-sticky .place-pin:hover .pin-caption,.scene-sticky .place-pin:focus-visible .pin-caption{transform:translateY(-2px);border-left-color:var(--ui-warning)}
.scene-sticky .pin-dot{background:var(--ui-primary);box-shadow:0 0 0 1px #ffffffb0}
.scene-sticky .step-notes .step-note.active:before{box-shadow:none}
.scene-sticky .jump-places{border-radius:6px;box-shadow:none;border-color:var(--ui-line)}
.places-section{background:var(--ui-canvas)}
.places-section .section-kicker{color:var(--ui-primary)}
.places-section .section-heading h2{color:var(--ui-ink)}
.places-section .section-heading>p:last-child,.places-section .location-summary{color:var(--ui-muted)}
.places-section .location-list{border-top:2px solid var(--ui-primary);border-bottom-color:var(--ui-line)}
.places-section .location-row{border-bottom-color:var(--ui-line);color:var(--ui-ink)}
.places-section .location-row:hover{background:#ebf0ec}
.places-section .location-index{color:var(--ui-muted)}
.places-section .location-name{display:inline-flex;align-items:center;gap:10px}
.places-section .location-name>.ui-icon{width:24px;height:24px;color:var(--ui-primary)}
.places-section .location-action{color:var(--ui-primary)}
.places-section .lesson-shortcuts{border-top-color:var(--ui-line)}
.places-section .lesson-link-row a{border-bottom:1px solid var(--ui-line);color:var(--ui-primary);gap:7px}
.places-section .lesson-link-row a>.ui-icon{width:16px;height:16px}
.places-section .lesson-link-row a:hover{background:transparent;border-bottom-color:var(--ui-primary)}
.places-section .lesson-link-row .lesson-open-classroom{background:transparent;border-bottom:2px solid var(--ui-primary);color:var(--ui-primary)}
.page-footer{background:var(--ui-navy);color:#d4dfda}
/* Step J-2: print room — use boundaries and type, not stacked pastel boxes. */
.materials-shell{background:var(--ui-canvas);color:var(--ui-ink)}
.materials-shell .materials-main{background:var(--ui-canvas)}
.materials-shell .heading-line{border-color:var(--ui-soft-line)}
.materials-shell .heading-line h1{color:var(--ui-ink);letter-spacing:-.035em}
.materials-shell .section-mark,.materials-shell .section-mark span{color:var(--ui-muted)}
.materials-shell .lesson-selector button{border-radius:6px;box-shadow:none}
.materials-shell .experiment-layout{border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-surface);box-shadow:none;overflow:hidden}
.materials-shell .experiment-controls{background:var(--ui-surface);border-left:1px solid var(--ui-line);box-shadow:none}
.materials-shell .step-label{border-color:var(--ui-line)}
.materials-shell .step-label :is(span,b){color:var(--ui-primary)}
.materials-shell .mini-steps>span{border-color:var(--ui-soft-line);border-radius:0;background:transparent;color:var(--ui-muted)}
.materials-shell .mini-steps>span.is-current{background:transparent;color:var(--ui-primary);border-color:var(--ui-primary)}
.materials-shell .mini-steps b{background:transparent;color:inherit;border:1px solid currentColor;border-radius:50%}
.materials-shell .step-navigation{border-color:var(--ui-soft-line)}
.materials-shell .step-navigation .ui-icon{width:17px;height:17px}
.materials-shell .step-nav-button{background:transparent;border:1px solid var(--ui-line);border-radius:6px;color:var(--ui-primary);gap:7px;min-height:44px}
.materials-shell .step-nav-button:disabled{opacity:.45;color:var(--ui-muted)}
.materials-shell .next-action{color:var(--ui-primary);border-color:var(--ui-primary)}
.materials-shell .job-summary{background:transparent;border-top:1px solid var(--ui-soft-line);border-bottom:1px solid var(--ui-soft-line);border-radius:0;box-shadow:none}
.materials-shell .job-summary :is(strong,b){color:var(--ui-ink)}
.materials-shell .method-picker button{border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-surface);box-shadow:none;gap:11px;color:var(--ui-ink)}
.materials-shell .method-picker button[aria-pressed="true"]{border:1px solid var(--ui-primary);background:#f8fbf9;box-shadow:inset 2px 0 var(--ui-primary);padding:7px 12px}
.materials-shell .method-picker button>.ui-icon{width:28px;height:28px;color:var(--ui-primary)}
.materials-shell .method-picker button .selector-ring{border-color:var(--ui-line)}
.materials-shell .primary-action{background:var(--ui-primary);border-color:var(--ui-primary);border-radius:6px;box-shadow:none}
.materials-shell .primary-action:hover:not(:disabled){background:var(--ui-primary-hover)}
.materials-shell .secondary-action{background:#fff;border:1px solid var(--ui-line);border-radius:6px;color:var(--ui-primary);box-shadow:none}
.materials-shell .control-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.materials-shell .control-actions .ui-icon{width:19px;height:19px}
.materials-shell .primary-action:disabled{background:#e2e8e5;color:#61706d;border-color:#ced6d2}
.materials-shell .study-inventory{border-top:1px solid var(--ui-line);background:transparent;box-shadow:none}
.materials-shell .study-inventory .inventory-bar{background:#e7ece9;border-radius:2px}
.materials-shell .paper-interaction{background:rgba(255,255,255,.97);border:1px solid var(--ui-line);border-radius:6px;box-shadow:none}
.materials-shell .interaction-chip{background:transparent;border:1px solid var(--ui-line);color:var(--ui-primary);border-radius:4px}
.materials-shell .loader-sub,.materials-shell .interaction-hint{color:var(--ui-muted)}
.materials-shell .paper-pack{border:1px solid var(--ui-line);background:var(--ui-surface);border-radius:4px;box-shadow:none}
.materials-shell .paper-pack:hover{background:#f2f7f3;border-color:var(--ui-primary)}
.materials-shell .paper-tray{background:#f7f9f7;color:var(--ui-primary);border:1px dashed #9eadab;border-radius:4px}
.materials-shell .paper-tray>.ui-icon{width:27px;height:27px}
.materials-shell .paper-tray>.tray-icon{display:none}
.materials-shell .handout-token{background:#f7f9f7;border:1px dashed var(--ui-line);color:var(--ui-primary);border-radius:4px}
.materials-shell .handout-token>.ui-icon{width:24px;height:24px}
.materials-shell .handout-token .handout-stack{display:none}
.materials-shell .recipient-grid button{background:#fff;border:1px solid var(--ui-line);color:var(--ui-ink);border-radius:4px}
.materials-shell .recipient-grid button>.ui-icon{width:24px;height:24px;color:var(--ui-primary)}
.materials-shell .recipient-grid button[aria-pressed="true"]{border-color:var(--ui-primary);background:#f5faf7;color:var(--ui-success)}
.materials-shell .comparison{background:#fff;border:1px solid var(--ui-line);box-shadow:0 8px 22px rgba(25,48,46,.1);border-radius:8px}
.materials-shell .comparison-save{background:transparent;border-top:1px solid var(--ui-soft-line);color:var(--ui-success)}
.materials-shell .material-footer{background:#eef1ed;color:var(--ui-muted);border-top:1px solid var(--ui-line)}
@media(max-width:760px){.materials-shell .experiment-controls{border-left:0;border-top:1px solid var(--ui-line)}}
@media(prefers-reduced-motion:reduce){.ui-icon{transition:none!important}}
/* High-specificity reset for legacy header button selectors (without !important). */
.site-bar .audio-toggle,
.materials-shell .material-header .audio-toggle,
.roof-shell .roof-header .audio-toggle,
.sim-shell .sim-header .audio-toggle{
  border:1px solid transparent;background:transparent;color:inherit;
  min-height:44px;min-width:44px;border-radius:6px;box-shadow:none;
  padding:7px 10px;font-size:13px;font-weight:680;
}
.materials-shell .material-header .audio-toggle,
.roof-shell .roof-header .audio-toggle,
.sim-shell .sim-header .audio-toggle{color:#e1e9e6}
.site-bar .audio-toggle:hover,
.materials-shell .material-header .audio-toggle:hover,
.roof-shell .roof-header .audio-toggle:hover,
.sim-shell .sim-header .audio-toggle:hover{border-color:transparent;background:rgba(28,97,104,.07)}
.materials-shell .material-header .audio-toggle:hover,
.roof-shell .roof-header .audio-toggle:hover,
.sim-shell .sim-header .audio-toggle:hover{background:rgba(255,255,255,.09)}
.site-bar .audio-toggle[aria-pressed='true']{color:var(--ui-primary);border-color:var(--ui-primary);background:transparent}
.materials-shell .material-header .audio-toggle[aria-pressed='true'],
.roof-shell .roof-header .audio-toggle[aria-pressed='true'],
.sim-shell .sim-header .audio-toggle[aria-pressed='true']{color:#fff;border-color:#b1d3ce;background:transparent}
/* Emoji-free print sequence: duotone line icons instead of colored emoji tiles. */
.materials-shell .mini-steps>span::before{content:none!important;display:none!important}
.materials-shell .mini-steps>span{
  background:transparent!important;border:0!important;border-bottom:2px solid var(--ui-soft-line)!important;
  border-radius:0!important;box-shadow:none!important;color:var(--ui-muted)!important;
}
.materials-shell .mini-steps>span.is-current{border-bottom-color:var(--ui-primary)!important;color:var(--ui-primary)!important}
.materials-shell .mini-steps>span.is-past{border-bottom-color:#85aca5!important;color:var(--ui-success)!important}
.materials-shell .mini-steps>span>.ui-icon{width:19px;height:19px;display:block;margin:0 auto 3px;color:inherit}
.materials-shell .mini-steps>span b{display:none!important}
@media(max-width:1100px){
 .site-bar .audio-toggle,.materials-shell .material-header .audio-toggle,.roof-shell .roof-header .audio-toggle,.sim-shell .sim-header .audio-toggle{min-width:44px;width:44px;padding:0}
}