/* ===========================================================================
   ZNetLab — the bridge

   This file was twice this size and doing the wrong job. It was repainting
   every surface of the teaching half to force it dark, before anyone
   noticed that the teaching half ALREADY HAS a complete dark theme of its
   own — a full token block under [data-theme="dark"], hand-tuned, keyed on
   exactly the attribute ZNetLab uses.

   So the bridge does far less now, and the result is better. The teaching
   half keeps its own two palettes, which were chosen by someone looking at
   that page. All that is imposed on it is the things a merged product must
   share and cannot have two of:

     · one brand accent, so a link is the same blue on both halves
     · one header, so navigation does not move when you cross the seam
     · a sticky stack that accounts for that header

   Everything else is left alone deliberately. Overriding a working theme to
   impose a slightly different grey is how a merge breaks things it did not
   need to touch.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ONE ACCENT

   The teaching half's blue was picked against white paper; the lab half's
   was picked against near-black. A merged product cannot have two, so both
   modes take ZNetLab's, and only these three tokens move.
   --------------------------------------------------------------------------- */
:root{
  --brand:#174190;
  --brand-d:#274390;
  --green:#0d8055;
}
[data-theme="dark"]{
  --brand:#4b7fd6;
  --brand-d:#6d9ae6;
  --green:#34d399;
}

/* ---------------------------------------------------------------------------
   ONE HEADER

   The teaching half has its own top bar with an old wordmark, its own
   links and its own theme button. With the shared header above it that is
   two headers, two brands and two theme toggles stacked on one screen.

   It is hidden rather than deleted: it is a React component driving the
   in-page router, and every destination it offered now appears in the
   shared header's Learn menu as a hash link the same router understands.
   Deleting it would mean editing 350 KB of JSX to remove one element.
   --------------------------------------------------------------------------- */
.nav{ display:none !important }

/* The simulator carried a THIRD bar — its own `.sitenav`, with a second
   wordmark and links that duplicate the shared Learn menu. Three
   stacked bars is 131px of chrome above a canvas.

   Its `.menubar` below is NOT a header: it says which lab is open and at
   what level, which belongs to the page. That one stays. */
.sitenav{ display:none !important }

/* ---------------------------------------------------------------------------
   THE STICKY STACK, RE-MEASURED

   Four sub-navigations stick below the top of the viewport, and their
   offsets were measured against the bar that is now hidden: the section nav
   was 56px, so things below it sat at 56, 70 and 118.

   With that bar gone and the shared header in its place, each is measured
   from the shared header instead. Left unchanged they would float in empty
   space or slide under the header — and only while scrolling, which is the
   worst kind of bug to find because it never shows in a screenshot.
   --------------------------------------------------------------------------- */
.acbar          { top:var(--header-h) !important }
.lnav,
.dashnav        { top:var(--header-h) !important }
/* .acnav sat 62px under .acbar; it still does. */
.acnav          { top:calc(var(--header-h) + 62px) !important }

/* A full-screen player must cover the shared header too, not stop below it. */
.player{ z-index:200 !important }

/* One diagram in the teaching content is 440px wide with no minimum, and on
   a phone it leaked 4px past the edge — enough to make the whole page
   scroll sideways, which on a touch screen fights every swipe.

   `clip` rather than `hidden`: hidden establishes a scroll container and
   would break the four sticky sub-navigations above. clip does not. */
@media(max-width:900px){
  /* On html as well as body: the sideways scroll is measured on the
     document element, so clipping only body leaves it there. */
  html,body{ overflow-x:clip }
}

/* ---------------------------------------------------------------------------
   The one surface the teaching half cannot theme for itself: the page
   behind the shared header, which is ZNetLab's, not its own.
   --------------------------------------------------------------------------- */
.nb-head{
  /* --card exists on the teaching pages; anywhere else it falls back to the
     panel colour rather than to nothing — an undefined variable made the
     header transparent on the Accounts page. */
  background:var(--card, var(--panel));
  border-bottom:1px solid var(--line);
}