@import url('./tokens.css?v=20261006-paper-interactions-1');
/* Presentation layer only. Course content, routes and anatomical materials stay in app.js. */
:root { --paper:var(--ua-paper);--panel:#fffefa;--line:var(--ua-line); }
.topbar { min-height:92px; padding-top:max(.85rem,env(safe-area-inset-top));padding-left:max(1.65rem,env(safe-area-inset-left));padding-right:max(1.65rem,env(safe-area-inset-right)); }
.brand { min-width:240px; }
.identity { display:block;width:224px;max-width:100%;line-height:0; }
.identity img { display:block;width:100%;height:auto; }
.brand #course-name { font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#dce7dc;display:inline-block;margin-right:.65rem; }
.brand .lab-picker { display:inline-block; }
.brand .lab-picker[hidden] { display:none; }
.brand .lab-picker select { font-size:1rem;max-width:215px; }
.home-hero h1,.course-page .home-hero h1 { font-family:var(--ua-display);font-weight:400;letter-spacing:-.035em;line-height:1.07;font-size:clamp(2.9rem,4.9vw,4.25rem); }
.course-row h2 { font-family:var(--ua-display);font-weight:400;letter-spacing:-.04em;font-size:2.3rem; }
.course-row { padding-block:1.7rem; }
.lab-row h2 { font-family:var(--ua-display);font-weight:400;font-size:1.8rem; }
.course-row .course-entry,.lab-index { font-variant-numeric:tabular-nums; }
.home-hero p { max-width:34ch; }
.home-footer p:last-child { display:none; }
#lesson-title,.guided-learning #lesson-title,.lab-overview-active h2,.question-prompt { font-family:var(--ua-display);font-weight:400;letter-spacing:-.035em;line-height:1.2; }
#lesson-title,.guided-learning #lesson-title { font-size:clamp(1.9rem,2.3vw,2.3rem);margin-block:.9rem 1rem; }
.lesson-purpose,.guided-learning .lesson-purpose,.lesson-cue p,.guided-learning .lesson-cue p { font-size:1.125rem;line-height:1.6; }
.lesson-cue,.guided-learning .lesson-cue { border-left:3px solid var(--ua-gold);background:var(--ua-wash);padding:1rem 1.15rem; }
#lesson-essentials li,.guided-learning #lesson-essentials li { line-height:1.6; }
.lesson-details { padding-block:.25rem; }
.lesson-details>summary { min-height:44px;display:flex;align-items:center; }
.lesson-advance { box-shadow:0 -9px 22px #1e2c2307; }
.lesson-panel .lesson-advance .primary { min-height:48px;white-space:normal;min-width:0; }
.walk-meter::-webkit-progress-value { background:var(--ua-gold); }
.walk-meter::-moz-progress-bar { background:var(--ua-gold); }
.stage-heading h2 { font-size:1.15rem;font-weight:500;letter-spacing:0; }
.stage-heading { padding-block:1.2rem; }
.camera-bar { gap:.8rem; }
.camera-bar button { min-height:44px; }
.camera-actions button { display:inline-flex;gap:6px;align-items:center;justify-content:center; }
.ua-icon { width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.more-menu>div { transform-origin:top right; }
.answer { border-left:3px solid var(--ua-green);padding:1.15rem 1.25rem; }
.answer>strong { display:flex;align-items:center;gap:.55rem; }
.answer .ua-check { width:20px;height:20px;color:var(--ua-green); }
button,.page-link,summary { transition:background-color var(--ua-fast),color var(--ua-fast),border-color var(--ua-fast),transform var(--ua-fast) var(--ua-ease); }
button:not(:disabled):active,.page-link:active { transform:scale(.985); }
.keyboard-input button,.keyboard-input .page-link { transition:none; }
.ua-loader { position:relative;display:grid;place-items:center;width:76px;height:76px;margin-bottom:10px; }
.ua-loader img { width:68px;height:68px; }
.ua-loader::after { content:'';position:absolute;bottom:1px;left:11px;right:11px;height:2px;background:var(--ua-gold);transform-origin:left;animation:ua-load 1.25s var(--ua-ease) infinite; }
@keyframes ua-load { 0% { transform:scaleX(.15);opacity:.45; } 65% { transform:scaleX(1);opacity:1; } 100% { transform:scaleX(1);opacity:0; } }
#loading strong { font-family:var(--ua-display);font-size:1.6rem;font-weight:400;letter-spacing:-.02em; }
#loading-text { font-size:.9375rem;color:#becbbc; }
#home-status:not(:empty) { display:flex;align-items:center;gap:.7rem; }
.loading-home-mark { width:24px;height:24px; }
#home-status:empty { display:none; }
.ua-is-loading #home-status::before { content:'';width:32px;height:32px;flex:0 0 32px;background:var(--ua-green) url('./assets/mark-gold.svg') center/30px no-repeat;border-radius:4px; }
@media(min-width:1151px) {
  .topbar { display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);gap:1.7rem; }
  .topbar > .brand { grid-column:1;grid-row:1; }
  .topbar > .mode-switch { grid-column:2;grid-row:1; }
  .topbar > .topbar-actions { grid-column:3;grid-row:1;justify-content:flex-end; }
}
@media(min-width:741px) and (max-width:1150px) { .brand { min-width:210px; }.identity{width:205px;}.topbar { min-height:86px; } }
@media(max-width:740px) {
  .brand{min-width:0;}.brand > div{min-width:0;}.identity{width:185px;}
  .topbar{min-height:80px;padding: max(.85rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .35rem max(1rem,env(safe-area-inset-left));}
  .brand #course-name{display:none;}.brand .lab-picker{display:block;max-width:100%;}.brand .lab-picker select{font-size:1rem;min-height:44px;max-width:100%;width:100%;}
  .home-hero h1,.course-page .home-hero h1{font-size:2.85rem;}.course-row h2{font-size:1.9rem;}.guided-learning #lesson-title{font-size:1.95rem;}.camera-actions{flex-wrap:wrap;}
  .home-panel{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right));padding-bottom:max(2rem,env(safe-area-inset-bottom));}
  .lesson-route{padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right));}
  .lesson-panel .lesson-advance{padding-bottom:max(.8rem,env(safe-area-inset-bottom));}
}
@media(prefers-reduced-motion:reduce) { .ua-loader::after{animation:none;opacity:.8;}button,.page-link,summary{transition:none;}button:active,.page-link:active{transform:none;} }

/* Integrate with the atlas cascade and native keyboard interaction. */
.brand #course-name { display:inline-block; color:#dce7dc; margin-top:.25rem; }
.keyboard-input button:not(:disabled):active,.keyboard-input .page-link:active { transform:none; }
.keyboard-input summary { transition:none; }
.lesson-details > summary { display:list-item; padding-top:.7rem; padding-bottom:.7rem; }
#lesson-essentials li,.guided-learning #lesson-essentials li { font-size:1.125rem; }
.workspace { padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); }
.inline-map { min-height:44px; }
@media(pointer:coarse) { input:not([type=checkbox]):not([type=range]),select,textarea,.topbar .lab-picker select { font-size:1rem; } }
@media(max-width:740px) { .brand #course-name { display:none; } }
@media(prefers-reduced-motion:reduce) { button:not(:disabled):active,.page-link:active { transform:none; } }

/* Programmatic reading destinations retain a visible branded keyboard outline. */
#main-content :is(h1,h2,h3,[role="region"])[tabindex="-1"]:focus-visible { outline:2px solid var(--ua-green);outline-offset:4px; }
#main-content #anatomy-view [tabindex="-1"]:focus-visible { outline-color:var(--ua-gold); }


/* Motion connects study destinations; it never withholds loaded content. */
.topbar .mode-switch { position:relative; }
.topbar .mode-switch.ua-mode-line button.active { border-bottom-color:transparent; }
.ua-mode-indicator { position:absolute;left:0;bottom:0;width:1px;height:3px;background:var(--ua-gold);transform-origin:left center;pointer-events:none; }
dialog[open][data-ua-motion-enter]::backdrop { animation:ua-backdrop-in var(--ua-dialog) var(--ua-ease); }
@keyframes ua-backdrop-in { from { opacity:0; } to { opacity:1; } }
.keyboard-input dialog[open]::backdrop { animation:none; }
@media(prefers-reduced-motion:reduce) { dialog[open][data-ua-motion-enter]::backdrop { animation:none; } }