/* ==========================================================================
   The Atlas — the second exploration mode.

   The whole design problem here is that "interactive periodic table" has a
   default look, and the default look is a rainbow of category colours on
   white with atomic weights to three decimal places. That is a chemistry
   teaching aid. This is not one.

   So the rules this file works under are the site's own, applied strictly:

   1. NO CATEGORY COLOURS. Not one. A periodic table coloured by block is
      eleven hues, and this brand rations itself to a single accent per view.
      Here the accent does one job and one only: it marks an element that has
      an investigation behind it. Everything else is the ink ramp.
   2. The table inherits the CONSTELLATION MAP's grammar, because it is the
      same idea in a different projection: charted and investigated reads
      bright, charted and upcoming reads dim, uncharted is a hairline ghost.
      A visitor who has used the map already knows how to read this.
   3. Hairlines, never shadows. Same as everywhere else on the site.
   4. The table is a PLATE on midnight, like the sky. The entry panel below
      is on linen, like an article. That split is the whole composition: you
      are looking up, then reading down.
   ========================================================================== */

/* ---------------------------------------------------------------- the head */
.atl-head { padding-bottom: 0; }
.atl-head .article-head { margin-bottom: 0; }
.atl-wrap { padding-top: clamp(1rem, 2.2vw, 1.5rem); }

/* ------------------------------------------------------------- the plate --
   Midnight, like the sky band, so the table reads as something you look UP
   at. The inner glow is the same trick the sky uses: a very wide, very low
   radial that keeps the panel from reading as a flat rectangle. */
.atl {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line-ink);
  padding: clamp(1.1rem, 3vw, 2rem) clamp(.9rem, 2.5vw, 1.75rem);
  background-image: radial-gradient(120% 90% at 22% 12%,
                    rgba(198, 217, 232, .055), rgba(198, 217, 232, 0) 62%);
}

/* The table scrolls sideways on a narrow screen rather than shrinking to
   unreadable. 18 columns of legible type has a floor and a phone is under it;
   pretending otherwise is how you get 6px symbols. */
.pt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-ink-str) transparent;
  padding-bottom: 6px;
}
.pt-scroll::-webkit-scrollbar { height: 6px; }
.pt-scroll::-webkit-scrollbar-thumb {
  background: var(--line-ink-str); border-radius: 3px;
}

.pt {
  display: grid;
  grid-template-columns: repeat(18, minmax(var(--pt-cell, 40px), 1fr));
  grid-template-rows: repeat(7, auto) var(--pt-gap-row, 12px) repeat(2, auto);
  gap: var(--pt-gap, 4px);
  min-width: calc(18 * var(--pt-cell, 40px) + 17 * var(--pt-gap, 4px));
}

/* ---- a cell -------------------------------------------------------------
   Three tiers, and they are the map's three tiers:
     ghost  — uncharted. Hairline box, symbol at low opacity, nothing else.
     live   — charted, no investigation yet. Reads like an upcoming star.
     done   — investigated. The one place the accent appears. */
.pt-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: var(--pt-cell, 40px);
  padding: 2px;
  border: 1px solid rgba(198, 217, 232, .10);
  background: transparent;
  color: var(--on-ink-faint);
  font: 500 clamp(10px, 1.15vw, 13px)/1 var(--label);
  letter-spacing: .04em;
  text-align: center;
  overflow: hidden;
}
.pt-cell .pt-sym { opacity: .34; transition: opacity var(--d-fast) var(--ease); }
.pt-cell .pt-z, .pt-cell .pt-name { display: none; }

/* ---- charted ------------------------------------------------------------ */
.pt-cell--live {
  cursor: pointer;
  border-color: var(--line-ink-str);
  background: rgba(198, 217, 232, .045);
  color: var(--on-ink);
  -webkit-appearance: none; appearance: none;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.pt-cell--live .pt-sym {
  opacity: 1;
  font-size: clamp(14px, 1.9vw, 20px);
  font-weight: 500;
  letter-spacing: .02em;
}
.pt-cell--live .pt-z {
  display: block;
  position: absolute; top: 3px; left: 4px;
  font-size: clamp(7px, .8vw, 9px);
  opacity: .5; letter-spacing: .06em;
}
.pt-cell--live .pt-name {
  display: block;
  margin-top: 3px;
  font-size: clamp(6px, .52vw, 7.2px);
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .62;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.pt-cell--live:hover,
.pt-cell--live:focus-visible {
  background: rgba(198, 217, 232, .12);
  border-color: rgba(198, 217, 232, .42);
  transform: translateY(-1px);
}

/* ---- investigated: the only accent on the plate ------------------------- */
.pt-cell--done { border-color: rgba(224, 168, 142, .40); }
.pt-cell--done .pt-sym { color: var(--rust-ink); }
/* The tick is the same mark the episode list uses for "latest". A 4px square
   in the corner, not a badge — the cell is 40px and a badge would eat it. */
.pt-cell--done::after {
  content: "";
  position: absolute; top: 4px; right: 4px;
  width: 4px; height: 4px;
  background: var(--rust-ink);
}
.pt-cell--done:hover,
.pt-cell--done:focus-visible { border-color: rgba(224, 168, 142, .75); }

.pt-cell[aria-pressed="true"] {
  background: rgba(198, 217, 232, .18);
  border-color: var(--on-ink-mute);
}

/* ---- key ---------------------------------------------------------------- */
.pt-key {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px;
  margin: clamp(.9rem, 2.2vw, 1.4rem) 0 0;
  font: 500 11px/1 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
/* Each swatch and its word are one unit. Left to wrap freely the flex line
   breaks between them and the key reads as six items instead of three. */
.pt-key { white-space: nowrap; }
.pt-key-i {
  display: inline-block; width: 9px; height: 9px;
  margin: 0 7px 0 0; vertical-align: -1px;
  border: 1px solid rgba(198, 217, 232, .16);
}
.pt-key-i--live { border-color: var(--line-ink-str); background: rgba(198,217,232,.09); }
.pt-key-i--done { border-color: rgba(224,168,142,.5); background: var(--rust-ink); }

/* ------------------------------------------------------------ the stage --
   Below the plate, on paper. Reading, not looking. */
.atl-stage { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.atl-empty {
  margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem) 0 .25rem;
  text-align: center;
  color: var(--on-ink-mute);
  font-style: italic;
}
.no-js .atl-empty { display: none; }

.atl-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
/* Without JavaScript every panel is simply shown, stacked. The content is all
   here either way — the script only decides which one is on screen. */
.no-js .atl-panel { display: block !important; }
.atl-panel[hidden] { display: none; }

/* ---- panel head: the orbital and the identity ---------------------------
   The glyph is bigger than it was, because it is no longer decoration: it is
   a thing you turn with your finger and read a shape off. */
.atl-panel-head {
  display: grid;
  grid-template-columns: clamp(150px, 20vw, 232px) 1fr;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  align-items: start;
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--line);
}
.atl-glyph { margin: 0; }
.atl-orb {
  position: relative;
  aspect-ratio: 1;
  background: var(--ink);
  border: 1px solid var(--line-ink);
  display: grid; place-items: center;
  overflow: hidden;
  cursor: grab;
  background-image: radial-gradient(110% 90% at 30% 22%,
                    rgba(198, 217, 232, .07), rgba(198, 217, 232, 0) 66%);
}
.atl-orb:active { cursor: grabbing; }
.atl-orb-c { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The symbol sits behind the cloud, very low, so the glyph still says which
   element it belongs to without competing with the orbital. */
.atl-glyph-sym {
  position: absolute;
  font: 300 clamp(44px, 7vw, 76px)/1 var(--disp);
  color: rgba(242, 246, 250, .07);
  letter-spacing: .01em;
  pointer-events: none;
}
.atl-orb-cap {
  margin: .55rem 0 0;
  font: 500 10px/1.45 var(--label);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel);
  min-height: 2.2em;
}

/* ---- the identity column ------------------------------------------------ */
.atl-id h2 {
  margin: .35rem 0 0;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.08;
}
.atl-stand {
  margin: .5rem 0 0;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.45;
  color: var(--steel-deep);
  max-width: 54ch;
}

/* ---- the subshell chips ------------------------------------------------- */
.atl-sub-lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.atl-sub-lab span {
  font-size: 9.5px; letter-spacing: .06em;
  text-transform: none; color: var(--steel);
  opacity: .85;
}
.atl-shells {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: .6rem 0 0;
}
.atl-sub {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: baseline;
  padding: .37rem .55rem;         /* 25.6px tall, same reason */
  border: 1px solid var(--line);
  background: var(--card);
  font: 500 12px/1 var(--label);
  letter-spacing: .02em;
  color: var(--steel-deep);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.atl-sub i { font-style: normal; font-size: .78em; margin-left: 1px; }
.atl-sub:hover { border-color: var(--line-strong); background: var(--mist); }
/* The subshell the element reacts through, marked before anything is clicked. */
.atl-sub--val { border-color: var(--rust-pale); color: var(--rust); }
.atl-sub[aria-pressed="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--on-ink);
}

/* ---- the orbital picker -------------------------------------------------
   A second row, under the subshells, appearing only when the chosen subshell
   has more than one orbital to choose between. */
.atl-orbrow { display: flex; flex-wrap: wrap; gap: 4px; margin: .5rem 0 0; }
.atl-orbrow[hidden] { display: none; }
.atl-orbx {
  -webkit-appearance: none; appearance: none;
  padding: .39rem .6rem;          /* 24.7px tall: WCAG 2.5.8 wants 24 */
  border: 1px solid var(--line);
  background: transparent;
  font: 500 10.5px/1 var(--label);
  letter-spacing: .03em;
  color: var(--steel);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.atl-orbx:hover { border-color: var(--line-strong); color: var(--steel-deep); }
.atl-orbx[aria-pressed="true"] {
  border-color: var(--rust-pale); color: var(--rust); background: var(--rust-tint);
}

/* ---- the phase key ------------------------------------------------------
   Two colours, and they mean the sign of the wavefunction. Worth a line,
   because it is the one thing an orbital picture can teach that a ball-and-
   stick cannot. */
.atl-phase {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: .7rem 0 0;
  font: 500 9.5px/1.4 var(--label);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel);
}
.atl-phase i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
}
.atl-phase .p-pos { background: var(--star-warm); border: 1px solid var(--line-strong); }
.atl-phase .p-neg { background: var(--star-blue); border: 1px solid var(--line-strong); }

/* ---- listen / read / explore -------------------------------------------- */
.atl-acts {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
}

/* ---- the two columns ---------------------------------------------------- */
.atl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}
.atl-col > p { margin: 0 0 1rem; max-width: 62ch; }
.atl-col > p.lab { margin: 0 0 .4rem; }
.atl-col > p.lab:not(:first-child) { margin-top: 1.4rem; }
.atl-turn {
  padding: .7rem .85rem;
  background: var(--sand);
  border-left: 2px solid var(--rust);
  color: var(--sand-text);
  font-size: .94rem;
}

/* ---- the dose-response band --------------------------------------------
   The signature object of the atlas, and the one thing here that no other
   podcast site has. It exists because this show keeps finding the same
   shape: the curve is a U, and the supplement aisle sells the left half
   while the toxicology sits on the right. Drawing it once per element makes
   that argument visible before a word of the episode is read. */
.atl-band { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.atl-band .lab { display: flex; align-items: baseline; gap: .5rem; }
.atl-band .lab span {
  font-size: 10px; letter-spacing: .08em;
  color: var(--steel); text-transform: none;
}
.atl-track {
  position: relative;
  height: 10px;
  margin: 3.1rem 0 0;
  background: var(--mist);
  border: 1px solid var(--line);
}
.atl-zone { position: absolute; top: 0; bottom: 0; }
.atl-zone--low  { background: repeating-linear-gradient(135deg,
                  var(--powder) 0 4px, transparent 4px 8px); }
.atl-zone--ok   { background: var(--navy); }
.atl-zone--high { background: repeating-linear-gradient(135deg,
                  var(--rust-pale) 0 4px, transparent 4px 8px); }

.atl-mark { position: absolute; top: -1px; bottom: -1px; }
.atl-mark i {
  position: absolute; bottom: -6px; left: 0;
  width: 1px; background: var(--ink);
}
.atl-mark b {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 10px/1 var(--label);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--steel-deep);
}
/* Each row lifts its label by a fixed step and grows its stem to reach it,
   so a tick always reads as belonging to the label above it. --row comes
   from the build, which packs labels into the lowest row that is free. */
.atl-mark i { top: calc(-6px - var(--row, 0) * 15px); }
.atl-mark b { bottom: calc(100% + 10px + var(--row, 0) * 15px); }
/* A mark at either end would hang its label off the track. */
.atl-mark--start b { transform: none; }
.atl-mark--end b { transform: translateX(-100%); }
.atl-band-note {
  margin: 1.5rem 0 0;
  font-size: .85rem; line-height: 1.5;
  color: var(--steel);
  max-width: 70ch;
}

/* ---- mechanism ---------------------------------------------------------- */
.atl-mechs { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.atl-mech {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.atl-mech:first-of-type { border-top: 0; padding-top: .35rem; }
.atl-mech h4 {
  margin: 0 0 .4rem;
  font-size: 1.02rem; font-weight: 500;
  color: var(--ink);
}
.atl-mech p { margin: 0; max-width: 72ch; }

/* ---- labs + topics ------------------------------------------------------ */
.atl-foot {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
}
.atl-labs ul, .atl-topics ul { margin: 0; padding: 0; list-style: none; }
.atl-labs li { padding: .6rem 0; border-top: 1px solid var(--line); }
.atl-labs li:first-child { border-top: 0; }
.atl-labs b {
  display: block; font-weight: 500; color: var(--ink);
  font-size: .96rem; margin-bottom: .15rem;
}
.atl-labs span { display: block; font-size: .88rem; color: var(--steel-deep); }

.atl-topics ul { display: flex; flex-wrap: wrap; gap: 7px; }
.atl-topic {
  display: inline-block;
  padding: .42rem .7rem;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--navy);
  font-size: .87rem;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.atl-topic:hover { background: var(--powder); border-color: var(--navy); }
/* A topic with no investigation behind it says so by being quieter, and its
   link goes to the notes rather than to a page that would be a promise. */
.atl-topic--soon {
  color: var(--steel);
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
}
.atl-topic--soon::after { content: " \00b7 soon"; opacity: .7; font-size: .8em; }

/* ---- sources ------------------------------------------------------------ */
.atl-src { margin-top: clamp(1.5rem, 3.5vw, 2rem); }
.atl-src ol { margin: 0; padding-left: 1.2rem; }
.atl-src li { margin-bottom: .6rem; font-size: .88rem; color: var(--steel-deep); }
.atl-src cite { display: block; font-style: normal; color: var(--ink); }
.atl-src span { display: block; color: var(--steel); font-size: .84rem; }
.atl-src a { font-size: .84rem; overflow-wrap: anywhere; }

/* ---- the closing note --------------------------------------------------- */
.atl-note-wrap { padding-top: 0; }
.atl-note {
  background: var(--sand);
  border: 1px solid var(--sand-line);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  color: var(--sand-text);
}
.atl-note p { margin: 0 0 .75rem; max-width: 76ch; }
.atl-note p:last-child { margin-bottom: 0; }
.atl-note .lab { color: var(--sand-label); }

/* ---- the compound shelf -------------------------------------------------
   A periodic table addresses elements and nothing else. The compounds need
   their own way in, and cards rather than squares, because a molecule is
   named and numbered differently enough that squeezing it into the grid
   would only disguise it as an element. */
.pt-mols { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
/* The shelf sits on the atlas's midnight ground, so the label takes the
   dark-band ramp — --steel on midnight is 2.9:1, which is not a colour, it
   is a rumour. The accent dash switches to its dark-band sibling with it. */
.pt-mols-lab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin: 0 0 .7rem;
}
.pt-mols-lab::before { background: var(--rust-ink); align-self: center; }
.pt-mols-lab span {
  font: 400 11px/1.4 var(--ui);
  letter-spacing: 0; text-transform: none;
  color: var(--on-ink-faint);
}
.pt-mols-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 8px;
}
/* The same instrument as the table above it, so the cards take the table's
   dark-ground treatment rather than sitting on it as white blocks. The tick
   in the corner, the rust symbol and the pressed state are all the cell's. */
.mol-cell {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: .7rem .75rem .75rem;
  text-align: left;
  -webkit-appearance: none; appearance: none;
  background: rgba(198, 217, 232, .045);
  border: 1px solid var(--line-ink-str);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.mol-cell-sym {
  font: 400 1.16rem/1 var(--disp);
  color: var(--on-ink);
}
.mol-cell-name {
  font: 500 9.5px/1.3 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
.mol-cell-f {
  font: 400 12px/1.2 var(--ui);
  color: var(--on-ink-faint);
  font-variant-numeric: lining-nums;
}
.mol-cell-f sub, .mol-cell-f sup { font-size: .72em; }
.mol-cell:hover, .mol-cell:focus-visible {
  background: rgba(198, 217, 232, .12);
  border-color: rgba(198, 217, 232, .42);
  transform: translateY(-1px);
}
.mol-cell--done { border-color: rgba(224, 168, 142, .40); }
.mol-cell--done .mol-cell-sym { color: var(--rust-ink); }
.mol-cell--done::after {
  content: "";
  position: absolute; top: 6px; right: 6px;
  width: 4px; height: 4px;
  background: var(--rust-ink);
}
.mol-cell--done:hover,
.mol-cell--done:focus-visible { border-color: rgba(224, 168, 142, .75); }
.mol-cell[aria-pressed="true"] {
  background: rgba(198, 217, 232, .18);
  border-color: var(--on-ink-mute);
}

/* ---- a molecule panel ---------------------------------------------------
   The figure gets more of the head than an orbital does, because a structural
   formula is a wide drawing and shrinking it is the one thing that makes it
   unreadable.

   The modifier is --molecule, not --mol. build.py builds this class from the
   entry's own `kind`, and the kind is "molecule"; for a while this said --mol
   and therefore matched nothing at all, so every molecule fell through to the
   ELEMENT head. On a desktop that looked fine, because an element's head is
   also two columns. On a phone the element rule narrows the figure column to
   84px for an orbital, and a structural formula plus its two tabs does not
   fit in 84px: the tabs overflowed 34px into the identity column and printed
   "3D MODEL" across the molecular formula. A selector that matches nothing
   fails silently at every width except the one where it matters. */
.atl-panel-head--molecule,
.atl-panel-head--organism,
.atl-panel-head--measure,
.atl-panel-head--process,
.atl-panel-head--structure,
.atl-panel-head--condition {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}
.atl-glyph--mol { margin: 0; }

/* Both panes share one box and one aspect ratio, so the switch between them
   is a change of representation and not a change of layout. */
.mol-view {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  overflow: hidden;
}
.mol-pane { position: absolute; inset: 0; }
.mol-pane[hidden] { display: none; }
/* The printed structure sits on a pale ground, like a plate in a paper. */
.mol-pane--flat { background: var(--mist); display: grid; place-items: center; }
.mol-pane--flat img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4%;
  box-sizing: border-box;
}
/* The model in space sits on midnight, like the orbitals do — the two dark
   figures in the atlas are both "this is the thing itself, not a drawing". */
.mol-pane--solid {
  background: var(--ink);
  background-image: radial-gradient(110% 90% at 30% 22%,
                    rgba(198, 217, 232, .07), rgba(198, 217, 232, 0) 66%);
  cursor: grab;
}
.mol-pane--solid:active { cursor: grabbing; }
.mol-c { position: absolute; inset: 0; width: 100%; height: 100%; }

.mol-tabs {
  display: flex;
  margin-top: 10px;
  border: 1px solid var(--line);
  width: fit-content;
}
.mol-tab {
  font: 500 10px/1 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem .8rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--steel);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.mol-tab:last-child { border-right: 0; }
.mol-tab:hover { background: var(--mist); color: var(--steel-deep); }
.mol-tab[aria-pressed="true"] {
  background: var(--navy);
  color: var(--star-warm);
}
.mol-styles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mol-styles[hidden] { display: none; }

.mol-cap { min-height: 3.6em; text-transform: none; letter-spacing: .01em;
           font: 400 12px/1.5 var(--ui); color: var(--steel); }
/* When the cursor is on an atom the caption stops being prose and becomes a
   readout, so it changes register to say so. */
.mol-cap--atom {
  font: 500 11px/1.5 var(--label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel-deep);
}
.mol-cap--atom b { color: var(--rust); font-weight: 500; }

.mol-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; }
.mol-key[hidden] { display: none; }
.mol-k {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 9.5px/1.4 var(--label);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel);
}
.mol-k i {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.mol-k b { font-weight: 500; color: var(--steel-deep); font-variant-numeric: lining-nums; }
/* Present in the molecule, absent from this view. */
.mol-k--off { opacity: .42; }
.mol-k--off i { filter: grayscale(1); }

.mol-formula {
  margin: .3rem 0 .6rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
}
.mol-formula b {
  font: 400 1.4rem/1.1 var(--disp);
  color: var(--rust);
  font-variant-numeric: lining-nums;
}
.mol-formula b sub { font-size: .62em; vertical-align: -.18em; }
.mol-formula b sup { font-size: .62em; vertical-align: .42em; }
.mol-formula span {
  font: 500 10px/1 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel);
}

/* ---- built from ---------------------------------------------------------
   The seam between the atlas's two halves. Charted elements are links and
   look it; the rest are the same card with the interaction taken out, so the
   composition reads as one list and not as two. */
.mol-built-lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
                 margin: 1.4rem 0 .5rem; }
.mol-built-lab span {
  font: 400 11px/1.4 var(--ui);
  letter-spacing: 0; text-transform: none;
  color: var(--steel);
}
/* A grid rather than a wrapping row: the names are different lengths, and
   cards of different widths made a composition read as a ranking. */
.mol-built {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
}
.mol-el {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0;
  padding: .42rem .6rem .48rem;
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration: none;
}
.mol-el b {
  font: 400 1.08rem/1.15 var(--disp);
  color: var(--steel-deep);
}
/* The count sits where a chemist writes it: down and to the right of the
   symbol, as in the formula two lines above. */
.mol-el i {
  font: 400 12px/1 var(--ui);
  font-style: normal;
  color: var(--steel);
  font-variant-numeric: lining-nums;
  margin-left: 2px;
  position: relative; top: 2px;
}
.mol-el span {
  flex: 1 0 100%;
  font: 500 8.5px/1.3 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel);
}
.mol-el--live {
  border-color: var(--rust-pale);
  background: var(--rust-tint);
  transition: border-color var(--d-fast) var(--ease);
}
.mol-el--live b { color: var(--rust); }
.mol-el--live:hover { border-color: var(--rust); }
.mol-el--live span { text-decoration: underline; text-underline-offset: 2px;
                     text-decoration-color: var(--rust-pale); }
.mol-el--live:hover span { text-decoration-color: var(--rust); }

/* ---- heads for the kinds that have no structure -------------------------
   An organism, a test, a pathway, a gland. Inventing a picture for these
   would devalue the ones that carry a real wavefunction or real MMFF
   coordinates, so the figure is typographic: the shorthand set large on the
   instrument ground. */
.atl-glyph--plain { margin: 0; }
.atl-plate {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  border: 1px solid var(--line-ink);
  display: grid; place-items: center;
  overflow: hidden;
  background-image: radial-gradient(110% 90% at 30% 22%,
                    rgba(198, 217, 232, .07), rgba(198, 217, 232, 0) 66%);
}
.atl-plate--sc { aspect-ratio: 2 / 1; }
.atl-plate-sym {
  font: 300 clamp(38px, 6vw, 68px)/1 var(--disp);
  color: rgba(242, 246, 250, .30);
  letter-spacing: .01em;
}

/* ---- how big the thing actually is --------------------------------------
   A log axis, because one atlas spans a virion and a tapeworm -- six orders
   of magnitude, on which a linear bar puts every protozoon in one pixel. */
.atl-scale { margin-top: 14px; }
.atl-sc-track {
  position: relative; height: 2px;
  background: var(--line-strong);
  margin: 26px 0 30px;
}
.atl-sc-ref { position: absolute; top: 0; }
.atl-sc-ref i {
  position: absolute; top: -4px; left: 0;
  width: 1px; height: 10px; background: var(--line-strong);
}
.atl-sc-ref b {
  position: absolute; top: 10px; left: 0;
  transform: translateX(-50%);
  font: 500 8.5px/1.2 var(--label);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap; font-weight: 500;
}
/* NOT tracked caps, and not uppercase. text-transform:uppercase maps the
   micro sign U+00B5 onto Greek capital Mu, so "600 µm" renders as "600 MM" --
   which does not look like a bug, it looks like millimetres. A caption that
   carries a UNIT has to be left alone. */
.atl-sc-cap {
  margin: 0;
  font: 400 12px/1.5 var(--ui);
  letter-spacing: 0; text-transform: none;
  color: var(--steel);
}

.atl-sc-here {
  position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 3px var(--rust-tint);
}

/* ---- the facts list beside a plain head --------------------------------- */
.atl-facts { margin: 1.3rem 0 0; display: grid; gap: 0; }
.atl-fact {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 1rem; padding: .5rem 0;
  border-top: 1px solid var(--line);
}
.atl-fact:last-child { border-bottom: 1px solid var(--line); }
.atl-fact dt {
  font: 500 9.5px/1.5 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel);
}
.atl-fact dd { margin: 0; font-size: .9rem; color: var(--steel-deep); }

/* ---- the four parts of a test ------------------------------------------
   Accuracy and drawbacks get their own lines rather than a clause, because a
   drawback buried in a sentence is a drawback nobody reads. */
/* Each part is a separate claim about the test, so each gets its own line and
   its own label. Run together they read as one long paragraph and the reader
   loses which sentence was the accuracy and which was the drawback. */
.atl-labs .atl-lab-acc,
.atl-labs .atl-lab-miss { margin-top: .45rem; font-size: .84rem; }
.atl-labs .atl-lab-acc::before,
.atl-labs .atl-lab-miss::before {
  content: attr(data-l);
  display: block;
  font: 500 8.5px/1.6 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel);
}
.atl-lab-acc { color: var(--steel-deep); }
.atl-lab-miss { color: var(--rust); }
.atl-lab-miss::before { color: var(--rust); opacity: .8; }
.atl-lab-used {
  display: block; font-style: normal; margin-top: .5rem;
  padding-top: .4rem; border-top: 1px dashed var(--line);
  font: 500 9px/1.4 var(--label);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel);
}

/* ------------------------------------------------------------- responsive */
/* Eighteen columns divided by anything under ~1024px gives a cell too narrow
   for a word like MAGNESIUM, and a truncated name reads as a bug rather than
   as economy. Below this the symbol and the atomic number carry the cell —
   which is what a printed table does at small sizes too. */
@media (max-width: 1023px) {
  .pt-cell--live .pt-name { display: none; }
  .pt-cell--live .pt-sym { font-size: clamp(13px, 2.2vw, 17px); }
}

@media (max-width: 900px) {
  .atl-grid, .atl-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .atl { padding: 1rem .75rem; }
  /* 34px cells with a 5px gap keeps adjacent tap targets 39px apart, which
     clears WCAG 2.5.8's 24px floor with room. Below this the table would be
     guessing rather than reading, so it scrolls instead. */
  .pt { --pt-cell: 34px; --pt-gap: 5px; }
  .atl-panel-head { grid-template-columns: 84px 1fr; gap: 1rem; }
  .atl-glyph-sym { font-size: 26px; }
  .atl-acts .btn { width: 100%; justify-content: center; }
  /* Long labels collide on a narrow track; keep the ends and drop the middle. */
  .atl-mark b { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-cell--live { transition: none; }
  .pt-cell--live:hover { transform: none; }
}

@media (max-width: 900px) {
  /* Below this the figure and the identity stop competing and stack: a 3:2
     drawing in half of a 900px panel is already at the size where the atom
     labels start to close up. */
  .atl-panel-head--molecule { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pt-mols-row { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .mol-cell-sym { font-size: 1.05rem; }
  .mol-tabs { width: 100%; }
  .mol-tab { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mol-cell { transition: none; }
  .mol-cell:hover { transform: none; }
}

@media (max-width: 900px) {
  .atl-panel-head--organism, .atl-panel-head--measure,
  .atl-panel-head--process, .atl-panel-head--structure,
  .atl-panel-head--condition { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .atl-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}