/* ============================================================================
   Spectrum Reference — page-specific overrides
   Layers on top of /assets/css/reference-table.css, which provides the shared
   sticky controls strip, scrollable wrapper with sticky thead + sticky first
   column (via `.is-sticky-col`), generic legend swatch base, `.reference-badge`
   base, and the `.cell-collapse` family.

   Everything here is unique to the electromagnetic spectrum page: the legal
   disclaimer, the 16-column min-width table, per-column widths, the
   frequency-cell split markup, the band-pill, the legend colour swatches,
   and the mobile-specific column-snap layout.
   ========================================================================== */

/* ---- Legal disclaimer ---- */
.spectrum-disclaimer {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  color: var(--c-text);
}
[data-theme="light"] .spectrum-disclaimer {
  background: #fff8e1;
  border-color: rgba(180, 83, 9, 0.35);
  border-left-color: #d97706;
  color: #5c4500;
}
.spectrum-disclaimer h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fbbf24;
}
[data-theme="light"] .spectrum-disclaimer h3 {
  color: #b45309;
}
.spectrum-disclaimer p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
  color: inherit;
}

/* ---- Table: spectrum is very wide (16 columns) ---- */
.reference-page--spectrum .reference-table {
  min-width: 2100px;
}

/* Frequency-Range thead label has a desktop-only full form and a mobile-only
   ν (Greek nu) abbreviation. The visible variant swaps via the @media block
   below; both stay accessible because the full label is sr-clipped on mobile
   rather than display:none'd.

   `text-transform: none` overrides the thead's uppercase rule — uppercasing
   ν (U+03BD) yields Ν (U+039D, capital nu), which renders identically to a
   Latin "N" and loses the physics symbolism. */
.reference-page--spectrum .reference-table .col-freq__short {
  display: none;
  text-transform: none;
}

/* Per-column widths */
.reference-page--spectrum .reference-table .col-freq   { min-width: 9rem; width: 9rem; }
.reference-page--spectrum .reference-table .col-band   { min-width: 14rem; }
/* Wavelength: medium-width column, room for "λ ≈ 380 – 500 nm (…)" plus the
   parenthetical examples that follow. Photon Energy is intentionally narrower
   — it carries shorter "E = hν ≈ X eV (…)" expressions and we don't want it
   to dominate the row. Both wrap naturally for the longer-form bands. */
.reference-page--spectrum .reference-table .col-wave   { min-width: 11rem; }
.reference-page--spectrum .reference-table .col-energy { min-width: 9rem; }
.reference-page--spectrum .reference-table .col-names  { min-width: 14rem; }
.reference-page--spectrum .reference-table .col-apps   { min-width: 14rem; }
.reference-page--spectrum .reference-table .col-tech   { min-width: 16rem; }
.reference-page--spectrum .reference-table .col-prop   { min-width: 16rem; }
.reference-page--spectrum .reference-table .col-reg    { min-width: 14rem; }
.reference-page--spectrum .reference-table .col-notes  { min-width: 16rem; }

/* Wavelength + Photon Energy cells: keep the long parenthetical examples
   wrapping cleanly even when they contain very long unbroken tokens like
   "10<sup>−27</sup>". overflow-wrap: anywhere prevents horizontal overflow
   when a single token is wider than the column. tabular-nums aligns numerics
   vertically across rows. */
.reference-page--spectrum .reference-table .col-wave,
.reference-page--spectrum .reference-table .col-energy {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.reference-page--spectrum .reference-table .col-energy {
  font-size: 0.84rem;
}

/* Frequency cell — split low/high so endpoints can stack on narrow screens. */
.col-freq .freq-sep {
  margin: 0 0.3rem;
  color: var(--c-text-muted);
}

/* Band column — pill + name */
.band-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--pill-hue, 140), 60%, 22%);
  color: hsl(var(--pill-hue, 140), 80%, 80%);
  border: 1px solid hsl(var(--pill-hue, 140), 50%, 32%);
  margin-bottom: 0.35rem;
}
[data-theme="light"] .band-pill {
  background: hsl(var(--pill-hue, 140), 65%, 92%);
  color: hsl(var(--pill-hue, 140), 50%, 30%);
  border-color: hsl(var(--pill-hue, 140), 50%, 75%);
}
.band-name {
  font-weight: 600;
  color: var(--c-text);
}

/* ---- Legend colour swatches (set --swatch-bg consumed by the shared base) -- */
.spectrum-legend__swatch--public     { --swatch-bg: #22c55e; }
.spectrum-legend__swatch--ham        { --swatch-bg: #3b82f6; }
.spectrum-legend__swatch--licensed   { --swatch-bg: #eab308; color: #111111; }
.spectrum-legend__swatch--restricted { --swatch-bg: #ef4444; }

/* ---- Small screens: column-snap mobile layout ---- */
@media (max-width: 640px) {
  /* The wrapper opts in to mobile column snapping via `has-snap-cols` (shared)
     — here we add spectrum-specific scroll-padding so swipes land cleanly
     past the sticky frequency column. */
  .reference-page--spectrum .reference-table-wrapper.has-snap-cols {
    scroll-padding-left: 5.5rem;   /* matches col-freq width below */
  }
  .reference-page--spectrum .reference-table {
    table-layout: fixed;
    font-size: 0.825rem;
    min-width: 0;                  /* override the desktop 2100px floor */
  }

  /* Mobile col-freq is 5.5rem wide — too narrow for "Frequency Range" even
     abbreviated. Swap to ν (visible) while keeping the full label sr-only
     so screen readers still announce it. */
  .reference-page--spectrum .reference-table thead th.col-freq .col-freq__full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .reference-page--spectrum .reference-table thead th.col-freq .col-freq__short {
    display: inline;
    font-size: 1.05rem;
    line-height: 1;
  }

  /* Sticky frequency column — wide enough for the descriptive first-batch row
     to read as words instead of stacked characters. */
  .reference-page--spectrum .reference-table .col-freq { width: 5.5rem; }
  .col-freq.mono {
    font-size: 0.72rem;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .col-freq .freq-pair {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.35;
  }
  .col-freq .freq-low,
  .col-freq .freq-high {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .col-freq .freq-sep {
    display: block;
    margin: 0.05rem 0;
    opacity: 0.55;
  }

  /* Every non-freq column = one viewport page minus the freq column and the
     container's horizontal padding (2 × var(--space-md) ≈ 2rem). */
  .reference-page--spectrum .reference-table .col-key,
  .reference-page--spectrum .reference-table .col-band,
  .reference-page--spectrum .reference-table .col-wave,
  .reference-page--spectrum .reference-table .col-uses,
  .reference-page--spectrum .reference-table .col-hardware,
  .reference-page--spectrum .reference-table .col-antenna,
  .reference-page--spectrum .reference-table .col-legal,
  .reference-page--spectrum .reference-table .col-power,
  .reference-page--spectrum .reference-table .col-prop,
  .reference-page--spectrum .reference-table .col-safety,
  .reference-page--spectrum .reference-table .col-tech,
  .reference-page--spectrum .reference-table .col-projects,
  .reference-page--spectrum .reference-table .col-energy,
  .reference-page--spectrum .reference-table .col-sources,
  .reference-page--spectrum .reference-table .col-badge {
    width: calc(100vw - 7.5rem);
  }
}

/* Abbreviation / glossary styles live in /assets/css/abbreviations.css and
   are shared across reference pages. */