/* =============================================================================
   The Periodic Table of Software Development — static styles
   -----------------------------------------------------------------------------
   Only STATIC, repeated rules live here. Per-render dynamic values — group
   colors (border-color / background), animated gaps, and layout alignment that
   changes between the "grouped" and "periodic" / narrow layouts — remain inline
   in index.html because the component computes them in renderVals().

   The custom runtime (support.js) maps `class="..."` to React's className and
   merges a static class with an inline `style="..."` on the same element, so
   each tile below is `.cell` (static box) + inline color (dynamic).
   ============================================================================= */

/* Theme tokens — also set inline on the page root so they resolve during export. */
:root {
  --ink: #f4f2ec;
  --edge: rgba(244, 242, 236, 0.5);
  --bg: #0b1c39;
}

html, body { margin: 0; padding: 0; }
a { color: #c9d6ea; text-decoration: none; }
a:hover { color: #f4f2ec; }

/* --- Title -------------------------------------------------------------------
   Font-size/letter-spacing are per-render values (component's own narrow
   state, not viewport units — this runtime measures its own container via
   ResizeObserver rather than trusting `vw`, since it can be embedded at a
   width that doesn't match the real browser viewport). See titleSize /
   titleTracking / subSize / subTracking in renderVals(). */
.title-main { font-weight: 600; line-height: 1.3; }
.title-sub  { font-weight: 300; line-height: 1.4; opacity: .9; }

/* --- Header controls -------------------------------------------------------- */

.btn {
  padding: 9px 18px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Standalone bordered controls: "View on GitHub" link + "Download JPG" button. */
.btn-outline {
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--ink);
}

/* Segmented Grouped / Periodic toggle. Each button's active/idle colors are
   applied inline (they flip with state). */
.toggle { display: flex; border: 1px solid var(--edge); }
.toggle .btn { border: none; }
.toggle .btn + .btn { border-left: 1px solid var(--edge); }

/* --- Element tile ----------------------------------------------------------- */

/* One 118×118 "element". border-color and background are set inline per group.
   Hover grows it and lifts it above its neighbors; transform (rather than
   width/height) keeps that free of layout — nothing around it reflows.
   z-index is mostly redundant with the transform's own stacking context, but
   explicit here since two adjacent .group boxes are siblings, not nested. */
.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 7px;
  width: 118px;
  height: 118px;
  flex: none;
  border: 1px solid;
  cursor: pointer;
  transition: background .45s ease, border-color .45s ease, transform .18s ease, box-shadow .18s ease;
}
.cell:hover {
  transform: scale(1.12) translateY(-6px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
  z-index: 20;
}
.cell-num    { position: absolute; top: 6px; left: 8px; font-size: 13px; opacity: .85; }
.cell-charge { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 400; letter-spacing: .5px; }
.cell-sym    { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 1px; }
.cell-name   { font-size: 7.5px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; margin-top: 6px; line-height: 1.12; }
.cell-stat   { position: absolute; bottom: 6px; left: 0; right: 0; font-size: 7px; font-weight: 300; letter-spacing: .4px; line-height: 1.05; }

/* --- Group column + phase bracket ------------------------------------------- */

.group { display: flex; flex-direction: column; align-items: stretch; width: max-content; }
.bracket { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; }
.bracket-label { font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; margin-bottom: 3px; }
.bracket-svg { width: 100%; height: 26px; display: block; }

/* --- Legend (periodic mode) ------------------------------------------------- */

.legend-item   { display: flex; align-items: center; gap: 8px; }
.legend-swatch { width: 14px; height: 14px; flex: none; border: 1px solid; } /* border-color inline */
.legend-label  { font-size: 11px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }

/* --- Element detail modal ---------------------------------------------------
   Opened by clicking a tile (see `selected` state / .open() in renderVals).
   var(--bg)/var(--ink)/var(--edge) already track the active color mode, so
   this needs no per-render inline styling of its own. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: modal-fade .15s ease;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 48px 32px 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  animation: modal-pop .18s ease;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
}
.modal-close:hover { opacity: 1; }
.modal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--edge); }
.modal-nav-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.modal-nav-btn:hover { background: var(--edge); }
.modal-nav-pos { font-size: 11px; letter-spacing: 1px; opacity: .55; min-width: 44px; text-align: center; }
.modal-cell-frame { width: 177px; height: 177px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; }
.modal-kicker { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.modal-role   { text-align: center; font-size: 21px; font-weight: 600; letter-spacing: .3px; margin-bottom: 4px; }
.modal-stat   { text-align: center; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; opacity: .6; margin-bottom: 22px; }
.modal-desc   { font-size: 15px; font-weight: 400; line-height: 1.65; white-space: pre-line; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop  { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } }