/* ============================================================================
   Radioguard — additive stylesheet
   ----------------------------------------------------------------------------
   Linked AFTER styles.css. Everything here is a component the disk-logic and
   visual patch introduces, so there is nothing to override:

     · the grouped "Understand" navigation menu
     · the threshold context line, its scale and its suppressed tick marks
     · the disk-mode selector and its disabled state
     · reduced-motion handling

   The palette half of the original delivery is NOT here. It guessed at class
   names it could not see; with styles.css in hand it was reconciled directly
   there instead, where the tokens already live (--field, --disk, --disk-rim),
   and where the old hard-coded red on the fan-opacity band and the old disk
   green on the key had to be replaced. The one rule worth keeping in mind: the
   key's rim is stroked at full strength while only its fill follows the
   opacity slider, because that is what the canvas does.
   ============================================================================ */

/* ── Grouped navigation ──────────────────────────────────────────────────── */

/* Flex, not block. The toggle is a <button> and the items beside it are
   <a>s; left in a block box the button is an inline-block aligned to a text
   baseline, so its top sits a pixel or two off every sibling in the bar. As a
   flex container it is stretched and centred exactly like the anchors. */
.nav-group { position: relative; display: flex; align-items: center; }

.nav-group-toggle {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.nav-menu {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: .35rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .6rem;
  /* Opaque, not translucent: this menu opens over a canvas that is mostly
     coloured field, and a frosted panel over it is unreadable at exactly the
     zoom levels where the map is busiest. */
  background: #0d1b26;
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45);
}

.nav-menu[hidden] { display: none; }

.nav-menu .nav-item {
  padding: .5rem .7rem;
  border-radius: .4rem;
  white-space: nowrap;
}

.nav-menu .nav-item:hover,
.nav-menu .nav-item:focus-visible { background: rgba(255, 255, 255, .08); }

/* Terms is a footer-weight link sitting in a primary nav. Keeping it reachable
   but visually demoted is what lets the other items read as a short list. */
.nav-item-quiet { opacity: .62; }
.nav-item-quiet:hover, .nav-item-quiet:focus-visible { opacity: 1; }

@media (max-width: 900px) {
  /* Inside the narrow dropdown there is no room for a second layer, so the
     group flattens into its own items rather than nesting a menu in a menu. */
  /* Back to a block here: the group has to fill the dropdown's width so its
     flattened items stretch like the rest of the list. */
  .nav-group, .nav-menu { position: static; }
  .nav-group { display: block; }
  .nav-group-toggle { display: none; }
  .nav-menu[hidden] { display: flex; }
  .nav-menu {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
}

/* ── Threshold control ───────────────────────────────────────────────────── */

.threshold-context {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  opacity: .78;
  /* The line rewrites on every frame of a slider drag and its length changes a
     lot across the scale. Reserving two lines stops the controls below it from
     jumping while the thumb moves. */
  min-height: 2.3em;
}

.threshold-scale {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  opacity: .55;
}

/* Firefox and Chromium both render <datalist> ticks on a range input, and they
   render them differently. Neither is legible at this size, so the ticks are
   suppressed and the reference levels are carried by the context line instead,
   which can say which level it means. */
#threshold-slider::-webkit-slider-runnable-track { --tick-display: none; }
#threshold-slider + datalist { display: none; }

/* ── Disk controls ───────────────────────────────────────────────────────── */

#quiet-opacity-slider[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* The low-exposure layer's mode switch. It deliberately does NOT carry the
   `.unit-tab` class it borrows its look from: the unit tabs are formatted by
   updateUnit, which toggles `active` from `data-unit` on every one of them, so a
   second control wearing that class would be deactivated whenever the unit
   changed and the harness would call updateUnit(undefined) on it. Same ink,
   separate class, no shared state. */
.mode-tab {
  flex: 1;
  min-height: 0;
  padding: 5px 3px;
  border: 1px solid #294b53;
  border-radius: 5px;
  color: #759196;
  background: #102c37;
  font: 9px var(--font-mono);
}

.mode-tab:hover,
.mode-tab.active {
  border-color: #629a87;
  color: #c0e2d4;
  background: #153c40;
}

/* The mode tabs sit in the row like any other control — the panel carries no
   caption of its own, because everything the tabs mean lives in the tooltip
   behind the row's info icon. (A key line was tried here and removed: the panel
   is settings, not documentation.) */

/* ── Site footer ───────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: #0a1a24;
}

.site-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-who {
  margin: 0;
  max-width: 640px;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.65;
}

.footer-who a { color: var(--teal); text-decoration: underline; }
.footer-who a:hover { color: var(--teal-bright); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.footer-nav a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--ink); text-decoration: underline; }

@media (max-width: 600px) {
  .site-footer .footer-inner { padding: 24px 18px 30px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none !important; }
}