/* =============================================================================
   ReLeaf: the navigation, on a dark page
   -----------------------------------------------------------------------------
   The hardware section is a dark, full-bleed surface with three.js teardowns on
   it. Its lighting and its glass materials are tuned against a near-black
   background, so re-theming those pages to the wiki's paper white would break
   the renders, not just the mood. The pages stay dark and the navigation comes
   to them instead.

   Almost all of this is variable substitution: nav.css draws from --nv-*, so
   redefining those on .sitenav--dark re-themes the bar, the panels, the tiles
   and the drawer in one go. Only the handful of colours nav.css hard-codes are
   restated below, and each is marked.

   Two behaviours differ from the light bar:
     · over a hero the bar is transparent, so the constellation canvas and the
       headline are not cut off by a slab. It fills in once the page scrolls
       (.is-scrolled) or a panel opens (.has-panel).
     · z-index climbs above the hardware pages' grain and vignette overlays,
       which sit at 44 and 45 and would otherwise wash the bar out.
   ========================================================================== */

.sitenav--dark {
  /* the hardware palette, from hardware/css/hub.css */
  --nv-900: #ffffff;
  --nv-700: #7fe0ab;
  --nv-500: #3ddc8b;      /* the DiOPAL green, which is already this section's accent */
  --nv-200: rgba(255, 255, 255, .22);
  --nv-100: rgba(255, 255, 255, .08);
  --nv-50:  rgba(255, 255, 255, .06);
  --nv-ink: #f4f7fa;
  --nv-muted: #99a2af;
  --nv-line: rgba(255, 255, 255, .1);

  z-index: 50;            /* over .grain (45) and .vignette (44) */
}

/* ---- bar ------------------------------------------------------------------
   The instrument pages are a sticky, full-height 3D stage. A solid bar filling
   in on scroll would cut 112px off the top of that stage and sit as a slab
   across the model, which is why the section's own topbar never filled in at
   all. But transparent chrome over a lit render is unreadable.

   So: a scrim rather than a fill. A gradient that is nearly opaque at the very
   top and gone by the bottom of the sub-nav strip, painted on a pseudo-element
   behind the bar's contents so the labels stay crisp. The stage keeps its full
   height and reads through the fade.

   Solid fill is kept for one case only, an open nav panel, where the panel
   needs a real surface to sit on.
   -------------------------------------------------------------------------- */

.sitenav--dark .sitenav__bar {
  position: relative;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .35s, border-color .35s;
}
.sitenav--dark .sitenav__bar::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--nv-h) + 30px);     /* the bar and a short fade under it */
  background: linear-gradient(180deg,
              rgb(5 6 10 / .94) 0%,
              rgb(5 6 10 / .78) 38%,
              rgb(5 6 10 / .38) 70%,
              rgb(5 6 10 / 0) 100%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.sitenav--dark.is-scrolled .sitenav__bar::before { opacity: 1; }
/* The fade ran 96px under the bar while the hardware strip sat there. With
   nothing under the bar it only dimmed the first thing on the page, which on
   a record is its pinned chapter control, so it stops short. */

/* the scrim is a sibling of the bar's contents, so lift the contents over it */
.sitenav--dark .sitenav__inner { position: relative; z-index: 1; }

/* an open panel needs a surface, not a fade. Frosted, like the light bar, but
   pitched to this section's near-black rather than its paper white. */
.sitenav--dark.has-panel .sitenav__bar {
  background: rgb(5 6 10 / .82);
  -webkit-backdrop-filter: var(--nv-frost); backdrop-filter: var(--nv-frost);
}
.sitenav--dark.has-panel .sitenav__bar::before { opacity: 0; }

.sitenav--dark .sitenav__logo { box-shadow: 0 0 0 1px rgb(255 255 255 / .14); }

/* hard-coded in nav.css: the resting tab colour */
.sitenav--dark .sitenav__tab { color: #b6bec9; }
.sitenav--dark .sitenav__tab:hover,
.sitenav--dark .sitenav__tab.is-open { color: #ffffff; }

/* ---- panel ----------------------------------------------------------------
   nav.css frosts the panel over a near-white; over a lit 3D render that reads
   as fog. The same frosting over the section's own near-black instead, and the
   hairline that parts it from the page goes the other way, light on dark.    */

.sitenav--dark .sitenav__panel {
  background:
    radial-gradient(560px circle at var(--mx) var(--my),
      rgb(var(--nv-glow) / calc(.14 * var(--lit))), transparent 65%),
    #10131a;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 18px 48px -12px rgb(0 0 0 / .6);
}
.sitenav--dark .sitenav__tab:hover { background: rgb(255 255 255 / .06); }
.sitenav--dark .sitenav__tab.is-open { background: rgb(79 156 111 / .22); }
.sitenav--dark .sitenav__panel .sitenav__entry + .sitenav__entry::after {
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .1) 25%, rgb(255 255 255 / .1) 75%, transparent);
}
.sitenav--dark .sitenav__panel .sitenav__tile { background: rgb(79 156 111 / .18); color: #8fd1aa; }
.sitenav--dark .sitenav__panel .sitenav__entrytitle { color: #e8edf2; }

.sitenav--dark .sitenav__entry.is-prize .sitenav__tile {
  background: linear-gradient(135deg, rgb(79 156 111 / .24), rgb(80 140 190 / .2) 52%, rgb(214 160 96 / .2));
}
/* On the hardware pages the scrim lies over a dark stage, so it dims instead
   of lightening. Same blur: the render behind softens, the panel stays crisp. */
.sitenav--dark .sitenav__scrim { background: rgb(2 3 6 / .38); }

.sitenav--dark .sitenav__entry:hover .sitenav__tile,
.sitenav--dark .sitenav__entry.is-current .sitenav__tile,
.sitenav--dark .sitenav__entry.is-prize:hover .sitenav__tile,
.sitenav--dark .sitenav__entry.is-prize.is-current .sitenav__tile {
  background: var(--nv-500);
  color: #05060a;                 /* hard-coded #fff in nav.css: unreadable on green */
}

/* ---- mobile --------------------------------------------------------------- */

.sitenav--dark .sitenav__burger span { background: #d3dae3; }
.sitenav--dark .sitenav__drawer {
  background: rgb(10 12 18 / .94);
  border-top-color: rgba(255, 255, 255, .1);
}

/* The hardware section's own strip between its pages (.hwnav) lived here from
   the first hardware sync until 11 Oct 2026, when it was taken off every page:
   first the hub and the four instrument records, then the notebook. */


/* ---- room for the strip ---------------------------------------------------
   The instrument heroes are deliberately full-bleed with the chrome floating
   over them, so they are not pushed down by a spacer. But they centre their
   content inside `min-height: 100vh`, and the section's old topbar was 64px
   where ours is 112px, which is enough for a long eyebrow or headline to run
   up under the strip. The bioreactor's did.

   Adding top padding to a centred grid moves the content down by half of what
   is added, so this buys about 56px of clearance. Bottom padding is untouched,
   which keeps the scroll cue where it was.                                   */
.sitenav--dark ~ main .intro {
  padding-top: calc(6rem + var(--nv-h, 68px) + 44px);
}

/* The hydroponics page has no .intro: its title card is absolutely placed at
   the top of a sticky stage, clamped 9px under the section's 75px topbar.
   Same clamp, measured from the foot of the strip instead. Its captions are
   seated by story.js, which reads .hwnav for the same reason.

   Not the bioreactor. Its V4 opening scene (11 Oct 2026) places the title
   away from the chrome on purpose -- 37% on a laptop, and 61% on a tall
   phone, below the machine, where it also drops the stat strip and the
   scroll cue to suit. The clamp above would pull it back to the top and lay
   it over the case, which fills the phone frame where the photometer's mast
   and DiOPAL's block sit lower. Those three keep the clamp.              */
body:not([data-instrument="bioreactor"]) .sitenav--dark ~ main .story-title {
  top: clamp(calc(var(--nv-h, 68px) + 44px + 9px), 11%, 130px);
}
@media (max-width: 939px) {
  body:not([data-instrument="bioreactor"]) .sitenav--dark ~ main .story-title { top: max(calc(var(--nv-h, 68px) + 40px + 9px), 11%); }
}
@media (max-width: 720px) {
  body:not([data-instrument="bioreactor"]) .sitenav--dark ~ main .story-title { top: max(calc(var(--nv-h, 68px) + 40px + 9px), 15%); }
}