/* Periodic table of mined minerals (/minerals/periodic-table), built by builder/minerals/build_periodic.py on minerals.css tokens. */
.pt-main { max-width: 1240px; }
.pt-main > :not(.pt-scroll):not(.pt-ui) { max-width: 920px; }
.pt-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.pt-ui .seg { margin: 0; }
.pt-ui .note { margin: 0; flex: 1; min-width: 240px; }
.pt-scroll { overflow-x: auto; overflow-y: visible; margin: 70px -24px 10px; padding: 70px 24px 12px; scrollbar-width: thin; }
.pt { --cell: 60px; display: grid; grid-template-columns: repeat(18, var(--cell)); grid-auto-rows: var(--cell); gap: 4px; position: relative; min-width: max-content; }
.pt .el { grid-row: var(--r); grid-column: var(--col); position: relative; border-radius: 8px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .025); color: var(--faint); text-decoration: none;
  opacity: 0; transform: translateY(10px); animation: pt-in .7s var(--ease) forwards; animation-delay: calc(var(--col) * 25ms + var(--r) * 40ms); }
@keyframes pt-in { to { opacity: 1; transform: none; } }
.pt .el small { position: absolute; top: 4px; left: 6px; font: 9px var(--mono); color: var(--faint); }
.pt .el b { font-family: var(--head); font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.pt .el span { font-size: 8.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.pt .el.gap { border-style: dashed; background: none; justify-content: center; }
.pt .el.gap b { font: 500 11px var(--mono); color: var(--faint); }
.pt .el.lit { color: var(--text); border-color: color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 28%, rgba(255, 255, 255, .03)), color-mix(in srgb, var(--c) 8%, rgba(10, 16, 18, .7)));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px -12px color-mix(in srgb, var(--c) 60%, transparent); transition: transform .25s var(--ease), box-shadow .25s; }
.pt .el.lit small { color: color-mix(in srgb, var(--c) 80%, #fff); }
.pt .el.lit span { color: #c9d4d0; }
.pt .el.lit:hover, .pt .el.lit:focus-visible, .pt .el.lit.on { transform: translateY(-3px) scale(1.06); z-index: 3; outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 34px -10px color-mix(in srgb, var(--c) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
.pt .el.lit.dim { opacity: .35 !important; }
/* the bar that breaks out of the cell */
.pt .bar { position: absolute; left: 50%; bottom: calc(100% - 2px); width: 12px; margin-left: -6px; height: calc(var(--h, 0) * 1px); border-radius: 6px 6px 0 0;
  background: linear-gradient(0deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 70%, transparent);
  transition: height .9s var(--ease); transform-origin: bottom; pointer-events: none; z-index: 2; }
.pt .bar::after { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 3px; border-radius: 2px; background: #fff; opacity: .7; }
.pt .bar em { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); font: 500 10px var(--mono); color: var(--text); white-space: nowrap; font-style: normal;
  background: rgba(5, 8, 10, .7); padding: 1px 5px; border-radius: 4px; opacity: 0; transition: opacity .4s .3s; }
.pt .bar.show em { opacity: 1; }
.pt .el.lit[data-v="0"] .bar { opacity: .3; }
.pt .el.lit.grp .bar { height: calc(var(--h, 0) * .35px); opacity: .55; box-shadow: none; }
/* popover */
.pop { position: fixed; z-index: 20; width: 320px; padding: 16px 18px 14px; border-radius: 16px; transform-origin: top left; animation: pop-in .35s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
@keyframes pop-in { from { opacity: 0; transform: scale(.92) translateY(6px); } }
.pop h3 { font-size: 20px; display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pop h3 small { font: 500 12px var(--mono); color: var(--c); }
.pop .grp { font: 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 0 10px; }
.pop .hb { margin-top: 6px; }
.pop .hb li { grid-template-columns: 88px 1fr 46px; font-size: 12px; }
.pop .hb li i { background: var(--c); }
.pop .spark { margin-top: 12px; }
.pop .spark svg { display: block; width: 100%; height: 44px; overflow: visible; }
.pop .spark p { font: 11px var(--mono); color: var(--faint); margin-top: 4px; }
.pop .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pop .chips i { font: 500 10.5px var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line2); color: #c9d4d0; font-style: normal; }
.pop .more { display: inline-block; margin-top: 10px; color: var(--c); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.pop .alt { font-size: 12px; color: var(--muted); margin-top: 8px; }
.pop .alt a { color: var(--text); }
.pop .close { position: absolute; right: 10px; top: 8px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; display: none; }
@media (max-width: 900px) {
  .pt { --cell: 52px; }
  .pt .el span { display: none; }
  .pt .el b { font-size: 16px; }
  .pt-scroll { margin: 56px -16px 10px; padding: 56px 16px 12px; }
  .pop { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
  .pop .close { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pt .el { animation: none; opacity: 1; transform: none; }
  .pt .bar, .pt .el.lit { transition: none; }
  .pop { animation: none; }
}