/* elements: periodic table grid, family colours, element page */
.f0{--h:8}.f1{--h:32}.f2{--h:212}.f3{--h:176}.f4{--h:54}.f5{--h:140}.f6{--h:266}.f7{--h:296}.f8{--h:194}.f9{--h:338}
.ptbox{overflow-x:auto;margin:14px 0;padding:2px 2px 8px}
.pt{display:grid;grid-template-columns:repeat(18,minmax(50px,1fr));grid-auto-rows:minmax(58px,auto);gap:3px;min-width:960px}
.pt .gap{min-height:10px}
.pt .ph{display:grid;place-items:center;font-size:.68rem;color:var(--soft);border:1px dashed var(--line);border-radius:8px;text-align:center}
.el{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:58px;padding:3px 2px;border-radius:8px;text-decoration:none;color:var(--ink);line-height:1.1;
  background:hsl(var(--h) 75% 50%/.2);border:1px solid hsl(var(--h) 55% 45%/.55);overflow:hidden}
.el i{font:500 .64rem var(--mono);font-style:normal;color:var(--soft);align-self:flex-start;margin-left:3px}
.el b{font:700 1.08rem var(--font-head)}
.el span{font-size:.56rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el:hover,.el:focus-visible{border-color:var(--ink);background:hsl(var(--h) 75% 50%/.38)}
.pt.filter .el:not(.hit){opacity:.18}
.el.hit{border-color:var(--ink);box-shadow:0 0 0 2px var(--focus)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:14px 0}
#fams button{background:hsl(var(--h) 75% 50%/.2);border-color:hsl(var(--h) 55% 45%/.55)}
#fams button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.elhero{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.elhero>div:last-child{flex:1 1 260px;min-width:0}
.tilebig{width:118px;height:118px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  background:hsl(var(--h) 75% 50%/.22);border:2px solid hsl(var(--h) 55% 45%/.7);line-height:1.1}
.tilebig i{font:500 .9rem var(--mono);font-style:normal;color:var(--soft)}
.tilebig b{font:700 2.6rem var(--font-head)}
.tilebig span{font:500 .78rem var(--mono)}
.elnav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px;font-weight:600;font-size:.94rem}
.elnav a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink)}
.elnav span:empty{display:none}
.atom{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.atom>div{flex:1 1 280px;min-width:0}
.bohr{width:min(100%,280px);height:auto;flex:none}
.bohr .ring{fill:none;stroke:var(--soft);stroke-width:.8;opacity:.6}
.bohr .e{fill:var(--accent)}
.bohr .nuc{fill:var(--amber)}
.bohr .nt{font:700 13px var(--font-head);fill:#fff}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]::after{content:" ↕";color:var(--soft);font-weight:400}
th[data-sort][aria-sort=ascending]::after{content:" ↑";color:var(--accent)}
th[data-sort][aria-sort=descending]::after{content:" ↓";color:var(--accent)}
.card h2{margin:0;font-size:1.1rem}
.mmt td:last-child,.mmt th:last-child{text-align:right}
.bar{display:block;height:6px;border-radius:6px;background:var(--accent);margin-top:4px;min-width:2px}
.qopts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin:12px 0}
.qopts button{min-height:52px;padding:10px;border-radius:10px;border:1px solid var(--field-line);background:var(--field);color:var(--ink);font:600 1.05rem var(--font);cursor:pointer}
.qopts button.right{background:var(--ok);color:var(--accent-ink);border-color:var(--ok)}
.qopts button.wrong{border-color:var(--bad);color:var(--bad)}
.qask{font:700 1.3rem var(--font-head);margin:.6em 0 .2em}
.qask b{font-size:2.2rem;display:block}
@media print{
  .ptbox{overflow:visible}.pt{min-width:0;grid-template-columns:repeat(18,1fr);grid-auto-rows:auto;gap:1px}
  .el{min-height:0;padding:1px;border-color:#888}.el b{font-size:.8rem}.el span{font-size:.4rem}.chips,.hint,#recent{display:none}
  @page{size:landscape}
}