/* LabBench "graph paper" theme. Loaded after each page's own styles. */
:root{--bg:#F7F9FC;--grid:#E3EAF3;--surface:#FFFFFF;--ink:#13203A;--muted:#52607A;--line:#C9D6E8;--rule:#D3DFF0;--tile:#EEF3FB;--band:#EEF3FB;--blue:#2350D6;--margin:#E7A3A8;--shadow:#13203A;--field:#9DAEC6;--err:#B3261E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1626;--grid:#17233A;--surface:#142035;--ink:#E6EDF6;--muted:#9DAAC0;--line:#2B3A55;--rule:#24324B;--tile:#1B2A44;--band:#111C30;--blue:#8AA8FF;--margin:#7A3C4A;--shadow:#26344F;--field:#3D4E6C;--err:#FF8A80}}
:root[data-theme="dark"]{--bg:#0E1626;--grid:#17233A;--surface:#142035;--ink:#E6EDF6;--muted:#9DAAC0;--line:#2B3A55;--rule:#24324B;--tile:#1B2A44;--band:#111C30;--blue:#8AA8FF;--margin:#7A3C4A;--shadow:#26344F;--field:#3D4E6C;--err:#FF8A80}

body{background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.logo{font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif}
main{max-width:1200px}
a{color:var(--blue)}

/* header and logo */
.brand,header.top{padding:22px 0;margin-bottom:6px;border-bottom:0}
.logo{display:inline-flex;align-items:center;gap:0;font-weight:800;font-size:1.45rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo::before{content:"";flex:none;width:34px;height:34px;margin-right:10px;background:url(lb-icon.svg) center/contain no-repeat}
.logo b{color:var(--blue)}
.logo::before{border-radius:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo::before{box-shadow:0 0 0 1px #3A4C6E}}
:root[data-theme="dark"] .logo::before{box-shadow:0 0 0 1px #3A4C6E}
.brand nav a,header.top nav a{color:var(--ink);font-weight:500}
.brand nav a:hover,header.top nav a:hover{color:var(--blue)}

/* tool page layout */
.layout{background:transparent;border-radius:0;padding:28px 0 0;gap:48px;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.side h1{border-left:0;padding-left:0;font-weight:800;letter-spacing:-.03em;font-size:clamp(2.2rem,4.4vw,3.3rem);line-height:1}
.side .lede{margin:18px 0 26px}
.related{border-top:2px solid var(--ink)}
.related h2{margin:14px 0 4px;font-size:1.05rem}
.related a{border-top:0;border-bottom:1px solid var(--rule)}
.related a:hover{color:var(--blue)}
.tool .panel{position:relative;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:6px;box-shadow:10px 12px 0 var(--shadow);padding:28px 32px 32px 72px}
.tool .panel::before{content:"";position:absolute;top:0;bottom:0;left:48px;width:2px;background:var(--margin);pointer-events:none}
input,select,textarea{background:var(--surface);border:1.5px solid var(--field)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chips button{border-color:var(--field)}

/* the answer, circled like on a worksheet */
.ans{background:transparent;border-radius:0;padding:6px 0 0}
.ans .k{margin-bottom:8px}
.ans .v{font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:800}
.ans .v:not(.eqv):not(.cfg){display:inline-block;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;border:3px solid var(--blue);border-radius:24px;padding:3px 18px 5px;color:var(--blue);transform:rotate(-1.2deg)}
.ans .v small{color:var(--blue);opacity:.8}
.ans .v.eqv,.ans .v.cfg{background:var(--tile);border-radius:10px;padding:12px 14px}
.work li{border-top:1px solid var(--rule)}

/* explanations and FAQ */
section.info{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:30px 34px 18px;margin-top:64px}
section.info h2{font-weight:800;letter-spacing:-.02em}
footer{border-top:2px solid var(--ink);color:var(--muted)}
footer a{color:var(--muted)}

/* about, contact, privacy, 404 */
.doc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:10px 12px 0 var(--shadow);padding:40px 40px 40px 76px;margin-top:20px}
.doc::before{content:"";position:absolute;top:0;bottom:0;left:52px;width:2px;background:var(--margin);pointer-events:none}
.doc h1{font-weight:800;letter-spacing:-.03em;border-left:0;padding-left:0}
.doc p.meta{padding-left:0}

/* periodic table */
.ptpanel{background:transparent;padding:28px 0 0}
.ptpanel h1{border-left:0;padding-left:0;font-weight:800;letter-spacing:-.03em}
.pc{border-radius:4px}
.pc:hover{outline:0;border-color:var(--ink)}
.pc[aria-pressed="true"]{outline:0;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--shadow)}
.ptbig{border:2px solid var(--ink);border-radius:6px;box-shadow:4px 4px 0 var(--shadow)}
.ptd{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.legend button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink);outline:0}
.gh span{color:var(--blue)}
.pts input{border:1.5px solid var(--field)}

@media (max-width:860px){.layout{grid-template-columns:1fr;padding:12px 0 0;gap:24px}.side{display:contents}.side h1{order:1}.side .lede{order:2;margin:-8px 0 0}.layout .tool{order:3}.side .related{order:4;margin-top:16px}}
@media (max-width:620px){
.brand,header.top{flex-wrap:wrap;gap:10px}
.brand nav,header.top nav{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:4px 16px}
.tool .panel{padding:22px 18px 24px 34px;box-shadow:6px 7px 0 var(--shadow)}
.tool .panel::before{left:18px}
.doc{padding:26px 18px 26px 34px;box-shadow:6px 7px 0 var(--shadow)}
.doc::before{left:18px}
section.info{padding:22px 18px 10px}
.layout{padding:4px 0 0}
}