/* Chemistry Lab v1.2: the Element Atlas wears the same header and phone navigation as the rest of the lab. */
.lab-header{position:sticky;top:0;z-index:20;background:var(--bg);height:78px;gap:24px}
.lab-header .brand{font-size:15px;letter-spacing:.15em}
.lab-header .brand-mark{font-size:40px}
.lab-header .brand small{font-size:13px;letter-spacing:.02em;margin-top:4px}
.lab-nav{display:flex;gap:3px;padding:4px;margin:0 auto;border:1px solid var(--line);border-radius:30px;background:var(--surface)}
.lab-nav a{display:flex;align-items:center;min-height:40px;padding:8px 19px;border-radius:24px;font-size:15px;color:var(--muted);transition:background .18s,color .18s}
.lab-nav a:hover{color:var(--accent)}
.lab-nav a[aria-current]{background:var(--raised);color:var(--accent);font-weight:700}
.lab-header .header-tools{margin-left:0}
.lab-header .icon-button{width:44px;height:44px}
.lab-mobile-nav{display:none}
.shell-lesson-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-size:14px;color:var(--accent)}
.deeper-link{min-height:48px}
@media(max-width:1050px){.lab-nav a{padding-inline:12px}.lab-header .brand small{display:none}}
@media(max-width:850px){.lab-nav{display:none}.lab-header{height:68px;justify-content:space-between}}
@media(max-width:680px){
 body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
 .lab-header .brand{font-size:12px;letter-spacing:.1em}.lab-header .brand-mark{font-size:29px}
 .lab-header .brand small{display:block;font-size:12px;letter-spacing:0}
 .lab-mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
 .lab-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:11px;color:var(--muted);border-radius:12px}
 .lab-mobile-nav svg{width:21px;height:21px;stroke-width:1.5;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
 .lab-mobile-nav a[aria-current]{background:var(--raised);color:var(--accent);font-weight:700}
}

/* v1.3 colour themes (same palettes as the app) */
:root[data-palette=midnight]{--bg:#070B16;--surface:#10182C;--panel:#0F2033;--raised:#18233D;--ink:#F5F8FF;--muted:#B9C5E2;--faint:#93A1C2;--line:#ffffff1c;--accent:#4FD6F7;--accent-ink:#03121E;--stage:#0A1122;--gold:#FFC94A;--shadow:0 14px 40px #0008}
:root[data-palette=nebula]{--bg:#0D0818;--surface:#1A1230;--panel:#22163C;--raised:#2A1C47;--ink:#FBF7FF;--muted:#CDC2EA;--faint:#A898CC;--line:#ffffff1c;--accent:#FF92D4;--accent-ink:#2A0A1E;--stage:#130B24;--gold:#FFC94A;--shadow:0 14px 40px #0008}
:root:is([data-palette=midnight],[data-palette=nebula]) .lab-nav{background:var(--surface)}
:root:is([data-palette=midnight],[data-palette=nebula]) .element-emblem{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
#theme-button svg{width:20px;height:20px}

/* v1.4: the lab's fonts (Fraunces display, Nunito text) */
@font-face{font-family:"Lab Display";src:url("../assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lab Display";src:url("../assets/fonts/fraunces-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("../assets/fonts/nunito-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("../assets/fonts/nunito-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Lab Sans";src:url("../assets/fonts/nunito-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}
:root{font-family:"Lab Sans",ui-rounded,"Segoe UI",system-ui,sans-serif}
body,button,input,select{font-family:"Lab Sans",ui-rounded,"Segoe UI",system-ui,sans-serif}
h1,.element-heading h2,.viewer-heading h2,dialog h2,.table-inset p,.section-heading h2,.element-emblem strong{font-family:"Lab Display",Georgia,serif;font-weight:400;letter-spacing:-.02em}
h1 em{font-style:italic}
.lab-nav a[aria-current]{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--raised));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.lab-header{box-shadow:0 1px 0 var(--line),0 12px 32px #0000003d}
.deeper-link{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s}
.deeper-link:hover{transform:translateY(-2px);border-color:var(--accent)}