/* ============================================================================
   ATOMIC LAB — FULL PERIODIC TABLE PAGE
   ========================================================================== */

.pg-table { --sect-y: clamp(3rem, 6vw, 6rem); }

/* --- Header ------------------------------------------------------------- */
.tbl-head { padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.25rem)); padding-bottom: clamp(1rem, 2vw, 1.5rem); }

.tbl-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.tbl-head__row .lede { margin-top: 0.6rem; max-width: 62ch; }
.tbl-head__keys { display: flex; gap: 1.1rem; font-size: var(--t-3xs); color: var(--ink-3); letter-spacing: 0.06em; padding-bottom: 0.4rem; }
.tbl-head__keys span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }

/* --- Sticky control rail ------------------------------------------------ */
.tbl-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  padding-block: 0.75rem;
  background: rgba(5, 8, 14, 0.86);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border-block: 1px solid var(--edge);
}
.tbl-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.tbl-bar__group { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tbl-bar__group--right { margin-left: auto; }
.tbl-bar__label { font-size: var(--t-3xs); letter-spacing: 0.16em; color: var(--ink-3); flex: none; }

.tbl-bar__second {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--edge-soft);
}

/* Filter box */
.tbl-filter {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  min-width: 250px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  transition: border-color var(--d-2), background var(--d-2);
}
.tbl-filter:focus-within { border-color: rgba(89,230,255,0.5); background: rgba(89,230,255,0.05); }
.tbl-filter svg { color: var(--ink-3); flex: none; }
.tbl-filter input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: var(--t-xs); color: var(--ink); }
.tbl-filter input::placeholder { color: var(--ink-3); }
.tbl-filter input::-webkit-search-cancel-button { display: none; }
.tbl-filter__x { color: var(--ink-3); font-size: 1.1rem; line-height: 1; padding: 0 0.15rem; }
.tbl-filter__x:hover { color: var(--danger); }

/* Temperature */
.tbl-temp {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  grid-template-areas: 'label slider out' 'marks marks marks';
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex: 1 1 340px;
  min-width: 0;
  max-width: 520px;
}
.tbl-temp label { grid-area: label; font-size: var(--t-3xs); letter-spacing: 0.14em; white-space: nowrap; }
.tbl-temp .slider { grid-area: slider; }
.tbl-temp__out { grid-area: out; min-width: 6.5rem; text-align: right; font-size: var(--t-xs); color: var(--beam); font-variant-numeric: tabular-nums; }
.tbl-temp__marks { grid-area: marks; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tbl-temp__mark {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 0.25rem 0.45rem;
  font-size: var(--t-3xs); letter-spacing: 0.04em; color: var(--ink-3);
  border: 1px solid var(--edge-soft); border-radius: var(--r-1);
  transition: all var(--d-1);
  line-height: 1.15;
}
.tbl-temp__mark small { font-size: 0.85em; opacity: 0.6; }
.tbl-temp__mark:hover { color: var(--ink); border-color: var(--edge-strong); background: rgba(255,255,255,0.04); }
.tbl-temp__mark.is-on { color: var(--beam); border-color: rgba(89,230,255,0.4); background: rgba(89,230,255,0.08); }

.tbl-legend { flex: 1 1 260px; min-width: 0; }

/* --- Stage -------------------------------------------------------------- */
.tbl-stage { padding-block: clamp(1.25rem, 3vw, 2.25rem) 0; }
.tbl-count { font-size: var(--t-2xs); text-align: right; margin-top: 0.85rem; letter-spacing: 0.06em; min-height: 1.2em; }

/* Give the full table taller tiles so name + value fit */
.pg-table .ptable .el { aspect-ratio: 1 / 1.16; }

/* --- Compare tray ------------------------------------------------------- */
.tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: rgba(6, 9, 16, 0.95);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-top: 1px solid var(--edge-strong);
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.9);
  transform: translateY(102%);
  transition: transform var(--d-3) var(--e-out);
  max-height: 62vh;
  overflow-y: auto;
}
.tray.is-open { transform: none; }
.tray__inner { padding-block: 1rem 1.25rem; }
.tray__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: 0.85rem; }

.tray__body { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.tcard {
  position: relative;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 32%, transparent);
  border-radius: var(--r-3);
  background: linear-gradient(170deg, color-mix(in srgb, var(--fam, var(--beam)) 12%, transparent), rgba(255,255,255,0.015));
}
.tcard__head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.65rem; }
.tcard__sym { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; color: #fff; }
.tcard__name { font-size: var(--t-xs); color: var(--ink-2); }
.tcard__z { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-3xs); color: var(--ink-3); }
.tcard__rows { display: flex; flex-direction: column; gap: 0.35rem; }
.tcard__row { display: flex; flex-direction: column; gap: 2px; }
.tcard__k { font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.08em; color: var(--ink-3); display: flex; justify-content: space-between; gap: 0.5rem; }
.tcard__k b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.tcard__bar { height: 2px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tcard__bar i { display: block; height: 100%; background: var(--fam, var(--beam)); border-radius: 2px; transition: width var(--d-4) var(--e-out); }
.tcard__x { position: absolute; top: 0.5rem; right: 0.55rem; color: var(--ink-3); font-size: 1rem; line-height: 1; }
.tcard__x:hover { color: var(--danger); }
.tcard__link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.7rem; font-family: var(--font-mono); font-size: var(--t-3xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fam, var(--beam)); }

.tray__empty { color: var(--ink-3); font-size: var(--t-sm); padding: 1rem 0; }

body.tray-open { padding-bottom: 0; }

/* Compare mode changes the cursor affordance on tiles */
.ptable.is-compare .el { cursor: copy; }

/* --- Reading guide ------------------------------------------------------ */
.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0.85rem; }
.guide .card { padding-top: 2.6rem; }
.guide__n {
  position: absolute; top: 1.1rem; left: 1.25rem;
  font-size: var(--t-2xs); letter-spacing: 0.2em;
  color: var(--fam, var(--beam)); opacity: 0.85;
}

@media (max-width: 900px) {
  .tbl-bar { position: static; }
  .tbl-head__keys { display: none; }
  .tbl-bar__group { width: 100%; }
  .tbl-bar__group--right { margin-left: 0; }
  .tbl-filter { min-width: 0; flex: 1; }
  .tbl-temp { max-width: none; }
}