/* The periodic table (chemistry/periodic-table.php). The page chrome is the one-screen layout in
   /css/resource.css. The table sizes itself to the space left (container query units). The
   category, block and state colours are this page's own, set for light and dark. */

:root{
  --pt-alkali:#ffcfc4; --pt-alkaline:#ffe2b8; --pt-transition:#d6e3f5; --pt-post:#d3e9dc; --pt-metalloid:#dcefc9;
  --pt-nonmetal:#fff1ad; --pt-halogen:#c8eef0; --pt-noble:#e4d7f6; --pt-lanthanoid:#f6d6ea; --pt-actinoid:#f0d0d6;
  --pt-s:#ffd6cc; --pt-p:#fff0b3; --pt-d:#d0e0f6; --pt-f:#ead7f7;
  --pt-solid:#e8ebef; --pt-liquid:#c9e3ff; --pt-gas:#ffe0c2;
}
:root[data-bs-theme="dark"]{
  --pt-alkali:#6a2f26; --pt-alkaline:#65481d; --pt-transition:#28405e; --pt-post:#2b4a3a; --pt-metalloid:#3a5528;
  --pt-nonmetal:#5a5120; --pt-halogen:#1d5256; --pt-noble:#44345f; --pt-lanthanoid:#5a2d4b; --pt-actinoid:#552a36;
  --pt-s:#5e2f25; --pt-p:#57501f; --pt-d:#27405f; --pt-f:#46305f;
  --pt-solid:#2a3440; --pt-liquid:#1f4166; --pt-gas:#5e4020;
}

/* ---------- the table fills what's left of the screen ---------- */
.pt-box{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
.pt-table{
  --cw:min(calc((100cqw - 40px) / 18.55), calc((100cqh - 24px) / 9.72 / 0.84));
  --ch:calc(var(--cw) * 0.84);
  display:grid;gap:2px;position:relative;
  grid-template-columns:calc(var(--cw) * 0.55) repeat(18, var(--cw));
  grid-template-rows:calc(var(--ch) * 0.42) repeat(7, var(--ch)) calc(var(--ch) * 0.3) repeat(2, var(--ch));
}

.pt-head,.pt-per,.pt-series,.pt-place{
  font:700 calc(var(--cw) * 0.2)/1 var(--font-display);color:var(--muted);background:transparent;border:0;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0
}
.pt-head:hover,.pt-per:hover,.pt-series:hover,.pt-place:hover,.pt-head:focus-visible,.pt-per:focus-visible,.pt-series:focus-visible,.pt-place:focus-visible{color:var(--accent);background:var(--accent-tint);outline:none}
.pt-series{justify-content:flex-end;padding-right:6px;font-size:calc(var(--cw) * 0.18)}
.pt-place{border:1px dashed var(--line-strong);font-size:calc(var(--cw) * 0.16)}

/* ---------- the elements ---------- */
.pt-el{
  position:relative;z-index:1;border:1px solid var(--line-strong);border-radius:4px;padding:0;cursor:pointer;
  background:var(--panel);color:var(--ink);font-family:var(--font-body);
  display:grid;grid-template-rows:auto 1fr auto;text-align:center;overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.pt-z{font:600 calc(var(--cw) * 0.16)/1 var(--font-mono);text-align:left;padding:calc(var(--cw) * 0.05) 0 0 calc(var(--cw) * 0.06);color:var(--ink-soft)}
.pt-sym{font:700 calc(var(--cw) * 0.36)/1 var(--font-display);align-self:center}
.pt-mass{font:500 calc(var(--cw) * 0.14)/1 var(--font-mono);padding-bottom:calc(var(--cw) * 0.06);color:var(--ink-soft)}

/* pointing at an element: a larger card over it, with its name, configuration and category.
   One floating card (pointer-events: none), so it never covers the element you move to next. */
.pt-el:hover,.pt-el:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;z-index:2}
.pt-peek{
  position:absolute;z-index:20;pointer-events:none;width:calc(var(--cw) * 1.9);
  border:1px solid var(--accent);border-radius:6px;background:var(--panel);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 6px 6px;gap:2px;
  opacity:0;transform:scale(.6);transition:opacity .12s ease, transform .12s ease;
}
.pt-peek.on{opacity:1;transform:none}
.pt-peek .pt-z{align-self:flex-start;padding:0;font-size:calc(var(--cw) * 0.2)}
.pt-peek .pt-sym{font-size:calc(var(--cw) * 0.52)}
.pt-peek .pt-mass{font-size:calc(var(--cw) * 0.17);padding:0}
.pt-peek .pt-name{font:700 calc(var(--cw) * 0.2)/1.1 var(--font-display)}
.pt-peek .pt-conf{font:500 calc(var(--cw) * 0.15)/1.2 var(--font-mono);color:var(--ink-soft);white-space:nowrap}
.pt-peek .pt-cat{font:500 calc(var(--cw) * 0.14)/1.2 var(--font-body);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.pt-peek{transition:none;transform:none}}

/* picking out a group, period, series or key entry */
.pt-picking .pt-el:not(.pt-on){opacity:.28}
.pt-picking .pt-el.pt-on{box-shadow:0 0 0 2px var(--accent)}

/* ---------- colours ---------- */
[data-colour="category"] [data-cat="alkali"],[data-colour="category"][data-cat="alkali"],i.sw[data-category="alkali"]{background:var(--pt-alkali)}
[data-colour="category"] [data-cat="alkaline"],[data-colour="category"][data-cat="alkaline"],i.sw[data-category="alkaline"]{background:var(--pt-alkaline)}
[data-colour="category"] [data-cat="transition"],[data-colour="category"][data-cat="transition"],i.sw[data-category="transition"]{background:var(--pt-transition)}
[data-colour="category"] [data-cat="post"],[data-colour="category"][data-cat="post"],i.sw[data-category="post"]{background:var(--pt-post)}
[data-colour="category"] [data-cat="metalloid"],[data-colour="category"][data-cat="metalloid"],i.sw[data-category="metalloid"]{background:var(--pt-metalloid)}
[data-colour="category"] [data-cat="nonmetal"],[data-colour="category"][data-cat="nonmetal"],i.sw[data-category="nonmetal"]{background:var(--pt-nonmetal)}
[data-colour="category"] [data-cat="halogen"],[data-colour="category"][data-cat="halogen"],i.sw[data-category="halogen"]{background:var(--pt-halogen)}
[data-colour="category"] [data-cat="noble"],[data-colour="category"][data-cat="noble"],i.sw[data-category="noble"]{background:var(--pt-noble)}
[data-colour="category"] [data-cat="lanthanoid"],[data-colour="category"][data-cat="lanthanoid"],i.sw[data-category="lanthanoid"]{background:var(--pt-lanthanoid)}
[data-colour="category"] [data-cat="actinoid"],[data-colour="category"][data-cat="actinoid"],i.sw[data-category="actinoid"]{background:var(--pt-actinoid)}
[data-colour="block"] [data-block="s"],[data-colour="block"][data-block="s"],i.sw[data-block="s"]{background:var(--pt-s)}
[data-colour="block"] [data-block="p"],[data-colour="block"][data-block="p"],i.sw[data-block="p"]{background:var(--pt-p)}
[data-colour="block"] [data-block="d"],[data-colour="block"][data-block="d"],i.sw[data-block="d"]{background:var(--pt-d)}
[data-colour="block"] [data-block="f"],[data-colour="block"][data-block="f"],i.sw[data-block="f"]{background:var(--pt-f)}
[data-colour="state"] [data-state="solid"],[data-colour="state"][data-state="solid"],i.sw[data-state="solid"]{background:var(--pt-solid)}
[data-colour="state"] [data-state="liquid"],[data-colour="state"][data-state="liquid"],i.sw[data-state="liquid"]{background:var(--pt-liquid)}
[data-colour="state"] [data-state="gas"],[data-colour="state"][data-state="gas"],i.sw[data-state="gas"]{background:var(--pt-gas)}
[data-colour="en"] .pt-el,[data-colour="en"] .pt-peek,[data-colour="en"].el-tile{background:var(--en-bg, var(--panel-2))}

/* ---------- the key ---------- */
.pt-legend{align-self:start;padding:2px 6px;font-size:calc(var(--cw) * 0.15);color:var(--ink-soft);line-height:1.35}
.pt-legend p{margin:4px 0 0}
.pt-legend-items{display:flex;flex-wrap:wrap;gap:2px 10px}
.pt-key{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:1px 3px;border-radius:3px;font:inherit;color:inherit;cursor:pointer}
.pt-key:hover,.pt-key:focus-visible{background:var(--accent-tint);outline:none}
.pt-key .sw{width:1.05em;height:1.05em;border-radius:3px;border:1px solid var(--line-strong);flex:none}
.pt-en-scale{display:flex;align-items:center;gap:6px}
.pt-en-scale i{flex:1;height:.9em;border-radius:3px;border:1px solid var(--line-strong)}

/* ---------- the element card and the trend panel ---------- */
dialog.pt-dialog{max-width:980px;width:96vw}
.pt-dialog .dialog-body{max-height:min(78vh, 820px)}
.el-head{display:flex;align-items:center;gap:14px}
.el-head h3{font-size:22px}
.el-tile{width:64px;height:64px;border:1px solid var(--line-strong);border-radius:6px;display:grid;grid-template-rows:auto 1fr auto;text-align:center;background:var(--panel-2);--cw:64px;flex:none}
.el-nav{display:flex;align-items:center;gap:6px}
.el-media{margin:0 0 14px}
.el-media video{display:block;width:100%;max-height:44vh;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:6px}
.el-credit{font-size:12px;color:var(--muted);margin:6px 0 0}
.el-credit a{color:var(--muted)}
canvas.el-atom{display:block;width:100%;max-width:260px;aspect-ratio:1;margin:0 auto 8px}
canvas.el-atom-big{max-width:none;width:100%;height:min(40vh, 340px);aspect-ratio:auto;background:var(--panel-2);border-radius:6px}
.el-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px}
.el-cols h4,.el-about h4,#trBody h4{margin:0 0 8px;font:700 13px/1.2 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep)}
.el-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:14px}
.el-dl dt{color:var(--muted);font-weight:600}
.el-dl dd{margin:0;color:var(--ink)}
.el-conf{font-family:var(--font-mono);font-size:13.5px;word-break:break-word}
.el-orbitals{margin-top:12px}
.el-boxes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:6px}
.el-core{font:700 14px/1 var(--font-mono);color:var(--ink-soft);padding-bottom:18px}
.el-sub{display:flex;flex-direction:column;align-items:center;gap:3px}
.el-sub b{font:600 12px/1 var(--font-mono);color:var(--ink-soft)}
.el-orbs{display:flex}
.el-orbs i{width:26px;height:26px;border:1.5px solid var(--ink-soft);margin-left:-1.5px;display:grid;place-items:center;font:700 14px/1 var(--font-body);font-style:normal;color:var(--accent);letter-spacing:-2px}
.el-orbs i:first-child{margin-left:0}
.el-note{font-size:13px;color:var(--ink-soft);background:var(--panel-2);border-left:3px solid var(--accent-b);padding:8px 10px;margin:12px 0 0;border-radius:0 4px 4px 0}
.el-about{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.el-about p{margin:0 0 12px;font-size:15px;color:var(--ink-soft)}

.tr-intro{font-size:15px;color:var(--ink);margin-top:0}
#trBody p{font-size:14.5px;color:var(--ink-soft)}
.tr-table td,.tr-table th{padding:5px 8px}
.tr-el{border:0;background:transparent;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-align:left}
.tr-el:hover{text-decoration:underline}
.tr-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:10px}
.tr-chart{margin:0}
.tr-chart figcaption{font:600 13px/1.3 var(--font-display);color:var(--ink);margin-bottom:6px}
.tr-bars{display:flex;align-items:flex-end;gap:3px;height:130px;border-bottom:1px solid var(--line-strong)}
.tr-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.tr-bar i{display:block;width:100%;max-width:26px;background:var(--accent);border-radius:3px 3px 0 0}
.tr-val{font:500 9.5px/1 var(--font-mono);color:var(--muted);margin-bottom:2px;white-space:nowrap}
.tr-sym{font:600 11px/1 var(--font-mono);color:var(--ink-soft);margin-top:3px;position:relative;top:16px;height:0}
.tr-chart{padding-bottom:16px}

/* ---------- smaller screens (the phone pass is issue #4): the table scrolls sideways ---------- */
@media (max-width:900px),(max-height:559px){
  .pt-box{container-type:normal;overflow-x:auto;display:block}
  .pt-table{--cw:46px;margin:0 auto}
  .el-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pt-el{transition:none}}