/*
 * ═══════════════════════════════════════════════════════════════════════
 *  module_nav_sections.css  —  Section Navigation Module
 *  Daralbeida.com  ·  DAB-VIS-CSS-MOD-NAV-001  ·  v1.0  ·  May 2026
 *
 *  Loaded via absolute path by module_nav_sections.php:
 *      <link rel="stylesheet" href="/darmaster/css/modules/module_nav_sections.css">
 *
 *  Defines --nav-h: 48px — used by ALL internal pages for top-spacing.
 *  body { padding-top: var(--nav-h) } is set here globally so every
 *  page that loads this module automatically clears the fixed nav bar.
 *
 *  SECTIONS
 *  ────────
 *  1.  Token
 *  2.  Body offset
 *  3.  Nav bar shell
 *  4.  Brand wordmark
 *  5.  Section links
 *  6.  INTERNAL badge
 *  7.  Sticky .top-nav adjustment (for fetcher)
 *  8.  Responsive
 * ═══════════════════════════════════════════════════════════════════════
 */

/* SITEWIDE MONO TRIAL (2026-06-11) — REMOVED 2026-06-25 (user): this @import
   pulled Comic Mono from an EXTERNAL CDN (cdn.jsdelivr.net) on every page that
   loads the nav, re-aliasing JetBrains/DM/IBM-Plex Mono to it. The trial was
   already abandoned (the nav opted out to 'Nav Mono' below; tokens.css dropped its
   twin @import) — so this was dead weight + an external dependency. The real mono
   fonts (Cascadia/IBM Plex/DM Mono from the self-hosted fonts.css) now render.
   To restore the trial, re-add: @import url('../../__darmaster/css/base/comic_mono.css?v=061102'); */

/* NAV-ONLY CRISP MONO (2026-06-12, user) — the sitewide Comic Mono trial above
   overrides the var(--font-mono) family itself, so the section-tab labels were
   rendered in a soft rounded face that smeared at small sizes. This face name
   is NOT aliased, so the nav opts back out: it prefers a locally-installed
   JetBrains Mono and otherwise falls through the font-family stack below to the
   crisp system monospaces (Consolas on Windows). */
@font-face {
  font-family: 'Nav Mono'; font-weight: 400 700; font-display: swap;
  src: local('JetBrains Mono'), local('JetBrainsMono-Regular'), local('JetBrains Mono Regular');
}


/* ── 1. TOKEN ───────────────────────────────────────────────────────── */
:root {
  --nav-h:          60px;   /* true two-row height with the pinned line-height below;
                               deterministic across all pages (wordmark row + buttons row) */
  /* COLOUR tokens (--nav-bg/--nav-border/--nav-gold/--nav-gold-light/--nav-text*)
     are intentionally NOT set here — they come from base/tokens.css (derived from
     the entity's brand) and the per-site skin, so this shared nav adopts each
     site's palette instead of a hardwired slate-navy. */

  /* Type scale (rebalanced) — the brand wordmark must clearly outrank the
     navigation buttons, which are chrome and stay quiet:
        wordmark 16  ▸  nav number 9  ▸  nav label 8.5  ▸  badge 8           */
  --nav-brand-fs:   var(--wordmark-fs);   /* WORDMARK = the one source (tokens.css: 22px × --ui-scale). Everything else = 50% of it. 2026-06-24 user */
  /* snapped to the ladder: tab number + label = VALUE (65), badge = MICRO (45). */
  --nav-num-fs:     var(--ui-fs-value);   /* everything else = 15px */
  --nav-label-fs:   var(--ui-fs-value);   /* everything else = 15px */
  --nav-badge-fs:   var(--ui-fs-micro);   /* "| INTERNAL"    → 45 */
}


/* ── 2. BODY OFFSET ─────────────────────────────────────────────────── */
/* The nav is position:sticky (it stays in normal flow), so it reserves its own
   space — content sits directly below it and no body padding is needed. This
   is what lets the bar grow when tabs wrap without overlapping the page. */


/* ── 3. NAV BAR SHELL ───────────────────────────────────────────────── */
/* Self-contained box model: the bar must be exactly --nav-h tall even on
   pages that DON'T load the global border-box reset (e.g. view.php, which
   otherwise rendered min-height as content-box → 66+12+1 = 79px and broke
   the iframe's calc(100vh - var(--nav-h))). */
.darx-nav,
.darx-nav *,
.darx-nav *::before,
.darx-nav *::after { box-sizing: border-box; }

/* ── Sticky-nav prerequisite ──────────────────────────────────────────────
   position:sticky only works if <body> is NOT a scroll container. The global
   reset (darx_tokens.css) puts overflow-x:hidden on <body> which — with
   height:100% — made BODY the nav's scroll context, so the "stuck" nav rode the
   body up off-screen while scrolling (and the scroll marker went with it).
   Move the horizontal clip to <html> and free <body>; and let the document
   grow with content (height:auto) instead of being a fixed 100% nested
   scroller — both are needed for the sticky nav to anchor to the viewport.
   Scoped to nav pages (this stylesheet isn't loaded on the consumer homepage). */
html, body { height: auto; min-height: 100%; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { overflow-x: visible; }

.darx-nav {
  /* 2026-06-11 SMART CHROME (user order): the nav PINS to the viewport and
     auto-hides while reading — advancing (scroll down) tucks it away, ANY
     scroll-up brings it back (see the smart-chrome IIFE in
     module_nav_sections.js). Supersedes 2026-06-10's scroll-away-in-flow;
     old rule for revert: position: relative; */
  position: sticky;
  top: 0;
  transition: transform .25s ease;
  min-height: var(--nav-h);
  background: var(--band-color, var(--nav-bg));   /* skin "Bands & Tiles" — recolourable header band */
  border-bottom: 1px solid var(--nav-border);
  display: flex;
  flex-direction: column;        /* row 1 = brand | INTERNAL · row 2 = nav buttons */
  align-items: stretch;
  gap: 3px;
  /* No outer side padding: inner side padding lives on the two centred rows
     below so the bar's edge-to-edge background still spans full width while
     the rows align with the page's 700px content column. */
  padding: 6px 0;
  z-index: 999;
  /* emboss: top highlight + bottom shadow scaled by --emboss-strength (works at any band colour) */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--emboss-strength, 100) * 0.28%)),
    inset 0 -1px 0 color-mix(in srgb, transparent, #000 calc(var(--emboss-strength, 100) * 0.24%)),
    0 2px 8px rgba(0, 0, 0, 0.22);
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;              /* pin line-height so the bar is exactly --nav-h
                                    tall on EVERY page, regardless of the host
                                    page's inherited body line-height */
}
/* SMART CHROME hidden state — html.darx_chrome_hide is toggled by the scroll
   direction watcher in module_nav_sections.js on every page with this nav;
   parking the pointer in the top strip of the window (peek class) reveals
   the nav again WITHOUT scrolling. */
html.darx_chrome_hide .darx-nav { transform: translateY(-105%); }
html.darx_chrome_hide.darx_chrome_peek_top .darx-nav { transform: none; }

/* ── MAIN FOOTER (2026-06-12, user order) — the fixed bottom strip every
   header-bearing page gets (darx_site_footer): SITEMAP · BACK · ‹ ›.
   Smart chrome MIRRORED: slides DOWN while advancing, returns on scroll-up,
   ALWAYS visible at the page end, bottom-edge pointer peek summons it. */
.darx-foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 16px;
  /* dark floor — readable fixed-light text even on light-navbar sites */
  background: var(--band-color, color-mix(in srgb, var(--nav-bg, #2E2A24) 62%, #26231E));   /* skin "Bands & Tiles" — recolourable footer band */
  border-top: 1px solid var(--nav-border, rgba(216, 168, 69, .24));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--emboss-strength, 100) * 0.28%)),
    inset 0 -1px 0 color-mix(in srgb, transparent, #000 calc(var(--emboss-strength, 100) * 0.24%)),
    0 -2px 8px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
}
.darx-foot-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-mono, var(--font-mono));
  font-size: var(--ui-fs-value); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;   /* 65 */
  /* 2026-06-12 (user): footer buttons must LOOK like the header section
     buttons — same color value alone wasn't enough (the .55-alpha ivory
     renders warm tan over the header pills' brown bevel but gray over the
     footer's charcoal floor). So the buttons now use the SAME RECIPE as
     .darx-nav-link: warm bevel gradient over --nav-bg, gold edge, --nav-text. */
  color: var(--nav-text, rgba(246, 241, 231, 0.55)); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--nav-gold, #D8A845) 32%, transparent);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg, #2E2A24) 82%, #000) 0%,
              color-mix(in srgb, var(--nav-bg, #2E2A24) 88%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.22);
  border-radius: 4px; padding: 5px 13px; line-height: 1.2;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease, transform 0.10s ease;
}
.darx-foot-btn:hover,
.darx-foot-btn:focus-visible {
  color: var(--nav-text-hover, rgba(246, 241, 231, 0.92));
  border-color: var(--nav-gold, #D8A845);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg, #2E2A24) 74%, #fff) 0%,
              color-mix(in srgb, var(--nav-bg, #2E2A24) 86%, #fff) 100%);
  /* 2026-06-19 (user): footer hover was too weak vs the header section
     buttons — it changed colour only. Add the SAME gold halo + lift as
     .darx-nav-link:hover so the two navs react with equal strength. */
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--nav-gold, #D8A845) 55%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--nav-gold, #D8A845) 65%, transparent);
  outline: none;
  transform: translateY(-1px);
}
/* LOGIN/LOGOUT pill in the nav top row: a small .darx-foot-btn pushed to the
   right edge of the centred nav column (margin-left:auto), so its right edge
   lines up with the section buttons below; vertically centred with the wordmark. */
.darx-nav-auth { margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: var(--ui-fs-value); padding: 4px 11px; }   /* LOG IN/OUT = everything else = 15px */
html.darx_chrome_hide_bot .darx-foot { transform: translateY(105%); }
html.darx_chrome_hide_bot.darx_chrome_peek_bot .darx-foot { transform: none; }
@media (prefers-reduced-motion: reduce) { .darx-nav, .darx-foot { transition: none; } }

/* Row 1 — wordmark at top-left, then | INTERNAL.
   Both rows share a centred 640px column so the nav content lines up edge-to-edge
   with the section pages' content/toolbar below it. */
.darx-nav-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  max-width: 700px;            /* sitewide content column (/12 model) */
  margin-inline: auto;
  padding: 0 14px;             /* inner side padding (outer padding removed above) */
  box-sizing: border-box;
}

/* Prevent duplicate <link> injections if module is included twice */
.darx-nav ~ .darx-nav { display: none; }


/* ── 4. BRAND WORDMARK ──────────────────────────────────────────────── */
.darx-nav-brand { flex-shrink: 0; }

.darx-nav-home {
  text-transform: uppercase;   /* wordmarks stored lowercase, shown uppercase */
  font-family: var(--font-display);
  font-size: var(--nav-brand-fs);
  font-weight: 700;            /* Cinzel Decorative ships 700/900 only */
  letter-spacing: 0.10em;      /* sitewide wordmark spacing (/12 model)  */
  text-transform: uppercase;
  color: rgba(246, 241, 231, 0.82);
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

/* Brand wordmark hover — NO underline (text-decoration locked off above).
   Instead, a soft gold text-glow lifts the mark to ivory, matching the
   embossed-glow language of the section buttons. */
.darx-nav-home:hover,
.darx-nav-home:focus-visible {
  color: rgba(246, 241, 231, 0.98);
  text-decoration: none !important;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--nav-gold) 45%, transparent),
    0 0 1px color-mix(in srgb, var(--nav-gold) 70%, transparent);
  outline: none;
}


/* ── 5. SECTION LINKS ───────────────────────────────────────────────── */
/* Fixed 4-column grid → a new row flows after every 4 tabs (8 tabs = 4 + 4).
   Capped to 640px + centred so the nav lines up with the page content below. */
.darx-nav-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  gap: 5px;                      /* row + column gap for the pill buttons */
  margin-block: 0;
  margin-inline: auto;          /* centre the button column with the page */
  width: 100%;
  max-width: 700px;             /* sitewide content column (/12 model) */
  padding: 0 14px;              /* inner side padding to match .darx-nav-top */
  box-sizing: border-box;
}
.darx-nav-sections::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.darx-nav-link { flex-shrink: 0; }

/* ── Sophisticated push buttons ─────────────────────────────────────────
   Three states, dimensional throughout — no flat fills, no ivory-on-hover
   underline (text-decoration is locked off in every state).

   RESTING : carved into the bar. Subtle 2-stop gradient (slightly darker
             at top, slightly lighter at bottom) gives the impression of
             being "inset" into the dark navy nav surface. A 1 px ivory
             inset highlight along the top + 1 px black inset along the
             bottom completes the bevel. Border is a faint gold rule —
             present but not declarative.

   HOVER   : the button "lights up" — gradient brightens 1 step toward
             navy-mid, the gold edge intensifies, and a soft 14 px gold
             halo blooms around the perimeter. The numeral stays gold;
             the label shifts to ivory but the gold halo + gold edge are
             what carry the hover read, NOT a white-text-on-blue look
             (that was the old "white + underline" feel the user flagged).

   ACTIVE  : "you are here" — deep navy fill, full-saturation gold edge,
             inset shadow for a pressed-in feel, brighter gold numeral
             AND label so the section reads as the current location.   */
.darx-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 4px;

  /* Resting bevel: 2-stop gradient + gold edge + inset highlight/shadow. */
  border: 1px solid color-mix(in srgb, var(--nav-gold) 32%, transparent);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 82%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 88%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.22);

  text-decoration: none !important;
  color: var(--nav-text);
  font-family: var(--font-mono);   /* skin mono — same font as LOG OUT (one source) */
  font-size: var(--nav-label-fs);
  letter-spacing: 0.4px;   /* was 1.5px — heavy spacing scattered the tiny glyphs */
  white-space: nowrap;
  cursor: pointer;
  /* All transitions on a single curve so the hover feels deliberate. */
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.10s ease;
}

.darx-nav-link:hover,
.darx-nav-link:focus-visible {
  text-decoration: none !important;
  color: var(--nav-text-hover);
  border-color: var(--nav-gold);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 74%, #fff) 0%,
              color-mix(in srgb, var(--nav-bg) 86%, #fff) 100%);
  /* THE GLOW — gold inner ring + soft outer halo + sharper top highlight. */
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 55%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--nav-gold) 65%, transparent),
    0 2px 5px rgba(0, 0, 0, 0.32);
  outline: none;
  transform: translateY(-1px);   /* integer px — was -0.5px, which blurred the label */
}

.darx-nav-link:hover .darx-nav-num,
.darx-nav-link:focus-visible .darx-nav-num {
  color: var(--nav-gold-light, #D4A574);   /* numeral brightens on hover */
}

/* Pressed feel — inverts the bevel for a momentary "pushed-in" beat. */
.darx-nav-link:active {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 72%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 85%, #000) 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(246, 241, 231, 0.06),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 45%, transparent);
  transform: translateY(0);
}

.darx-nav-link.active {
  color: var(--nav-gold);
  border-color: var(--nav-gold);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-gold) 22%, var(--nav-bg)) 0%,
              color-mix(in srgb, var(--nav-gold) 12%, var(--nav-bg)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 35%, transparent),
    0 0 10px -3px color-mix(in srgb, var(--nav-gold) 55%, transparent);
}

.darx-nav-num {
  font-weight: 700;
  color: var(--nav-gold);
  font-size: var(--nav-num-fs);
  /* Tabular numerals so the numeric column stays optically aligned. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  transition: color 0.18s ease;
}

.darx-nav-link.active .darx-nav-num {
  color: var(--nav-gold-light, #D4A574);
}

.darx-nav-label {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;   /* was 1.2px — tightened with the size bump for crisp labels */
}


/* ── 6. INTERNAL BADGE ──────────────────────────────────────────────── */
.darx-nav-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--nav-badge-fs);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* 2026-06-11: WHITE and well visible — the badge is now the uniform
     "DARMASTER INTRANET" link on every page using this header. */
  color: #FFFFFF;
}

/* The badge is a link to the master cockpit (target set in the PHP module).
   Inherits the badge colour by default — gilds on hover. */
.darx-nav-badge-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.darx-nav-badge-link:hover,
.darx-nav-badge-link:focus-visible {
  color: var(--nav-gold);
  text-decoration: underline;
  outline: none;
}


/* ── 7. STICKY .top-nav ADJUSTMENT — RETIRED 2026-06-10 ────────────── */
/* This pushed page-local sticky .top-nav bars below the formerly-pinned
   nav (top: var(--nav-h) !important). The nav now scrolls away with the
   page, and on pages whose .top-nav became position:relative (the doc
   viewer) the leftover !important offset shoved the sub-header 88px
   down, leaving a ghost gap. No offset is needed anywhere anymore. */


/* ── 8. SCROLL-POSITION MARKER ───────────────────────────────────────────
   Faint full-width track on the nav's bottom edge + a navy cursor that
   slides as the page scrolls. CONSISTENT placement on every page that
   loads this module — the marker IS the shared scroll-position locator.

   It lives INSIDE the sticky .darx-nav (position: absolute; bottom: 0).
   That means: when the nav is visible, the marker is visible right at
   the nav's bottom edge (just below the row of section buttons). When
   the nav tucks up on scroll-down, the marker tucks with it — that's
   fine per design ("ok to let it hide when scrolling"). The user gets
   their orientation back the moment they scroll near the top.

   - Track   : full-width gold/orange bar on the nav's bottom edge.
   - Thumb   : deep-navy cursor (matches the nav background) whose WIDTH
               is proportional to page length. --thumb-size (0–1, set by
               JS = viewportH ÷ docH) is the fraction of the track the
               cursor covers. A 36-px min keeps it tappable on very long
               documents.
   - Position: --p (0–1, set by JS = scrollY ÷ scrollMax) drives the
               left offset. The translateX(-p × 100%) trick keeps the
               cursor anchored inside the track edges at all positions. */
.darx-nav-scroll {
  /* 2026-06-10: pinned to the VIEWPORT top (was absolute at the nav's bottom
     edge). The nav itself now scrolls away; this marker is the one piece of
     the header that stays — the shared scroll-position locator. */
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 2000;
  height: 3px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-gold, #B8832A) 88%, white) 0%,
              var(--nav-gold, #B8832A) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
  pointer-events: none;
}
.darx-nav-scroll-thumb {
  position: absolute;
  top: -2px; bottom: -2px;                  /* slightly taller than track */
  /* Proportional cursor: width = ratio of viewport to document, capped
     at a 36 px minimum so it's still grabbable on very long pages, and
     at the full track width on pages that don't scroll (one viewport). */
  width: max(36px, calc(var(--thumb-size, 0.12) * 100%));
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 86%, #fff) 0%,
              color-mix(in srgb, var(--nav-bg) 84%, #000) 100%); /* matches nav, any hue */
  border: 1px solid rgba(246, 241, 231, 0.18);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(246,241,231,0.18),
    0 0 8px rgba(0,0,0,0.45);
  left: calc(var(--p, 0) * 100%);
  transform: translateX(calc(var(--p, 0) * -100%));
  transition: left .08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .darx-nav-scroll-thumb { transition: none; }
}


/* ── 8. RESPONSIVE ──────────────────────────────────────────────────── */
/* Tabs WRAP onto additional rows when they don't fit; the sticky bar grows to
   fit and the page flows below it. No horizontal scroll, no hidden labels —
   works at any font size, tab count, or screen width. */


/* ── 9. SITEMAP SHORTCUT — top row, far right ───────────────────────── */
.darx-nav-sitemap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  align-self: center;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--nav-gold) 32%, transparent);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 82%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 88%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.22);
  text-decoration: none !important;
  color: var(--nav-text);
  font-family: var(--font-mono);
  font-size: var(--nav-label-fs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease, transform 0.10s ease;
}
.darx-nav-sitemap svg {
  flex-shrink: 0;
  color: var(--nav-gold);
  transition: color 0.18s ease;
}
.darx-nav-sitemap:hover,
.darx-nav-sitemap:focus-visible {
  text-decoration: none !important;
  color: var(--nav-text-hover);
  border-color: var(--nav-gold);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 74%, #fff) 0%,
              color-mix(in srgb, var(--nav-bg) 86%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 55%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--nav-gold) 65%, transparent),
    0 2px 5px rgba(0, 0, 0, 0.32);
  outline: none;
  transform: translateY(-0.5px);
}
.darx-nav-sitemap:hover svg,
.darx-nav-sitemap:focus-visible svg { color: var(--nav-gold-light, #D4A574); }
.darx-nav-sitemap:active {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 72%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 85%, #000) 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(246, 241, 231, 0.06),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 45%, transparent);
  transform: translateY(0);
}


/* ── 10. INTRANET BUTTON — top row, far right (2026-06-12, user) ──────────
   Replaces the old text badge + SITEMAP top-row link platform-wide. Same pill
   recipe as a section-tab button (.darx-nav-link), sized to ≈ one tab cell of
   the 4-col / 700px grid, pushed to the right edge of the wordmark row. */
.darx-nav-intranet {
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 12px; border-radius: 4px;   /* sized to fit its text, never wider than a tab */
  border: 1px solid color-mix(in srgb, var(--nav-gold) 32%, transparent);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 82%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 88%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.22);
  text-decoration: none !important;
  color: var(--nav-text);
  font-family: var(--font-mono);   /* skin mono — same font as LOG OUT (one source) */
  font-size: var(--nav-label-fs); letter-spacing: 0.4px; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease,
              box-shadow 0.18s ease, transform 0.10s ease;
}
.darx-nav-intranet:hover,
.darx-nav-intranet:focus-visible {
  text-decoration: none !important;
  color: var(--nav-text-hover);
  border-color: var(--nav-gold);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 74%, #fff) 0%,
              color-mix(in srgb, var(--nav-bg) 86%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 55%, transparent),
    0 0 14px -2px color-mix(in srgb, var(--nav-gold) 65%, transparent),
    0 2px 5px rgba(0, 0, 0, 0.32);
  outline: none; transform: translateY(-1px);
}
.darx-nav-intranet:active {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--nav-bg) 72%, #000) 0%,
              color-mix(in srgb, var(--nav-bg) 85%, #000) 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(246, 241, 231, 0.06),
    0 0 0 1px color-mix(in srgb, var(--nav-gold) 45%, transparent);
  transform: translateY(0);
}


/* ── 11. FOOTER GLYPHS — ALL accent gold, uniform (2026-06-19, user) ──────
   Every footer button's logotype rides the accent gold, identically — the
   SVG icons (INTRANET · HOME · SITEMAP · GUIDE) AND the ‹ › history chevrons —
   so the whole strip reads as one consistent set. */
/* 2026-06-19 (user): footer logotypes use the skin "Nav button text" colour,
   highlighting to "Nav button text (highlighted)" on hover. Borders/fills unchanged. */
.darx-foot .darx-foot-btn svg,
.darx-foot .darx-foot-btn span { color: var(--nav-text, #C9BBA0); }
/* every footer icon renders at the SAME 15px box — one source, so no icon can
   drift to its own size again (the inline width/height are 15 too). 2026-06-22 */
.darx-foot .darx-foot-btn svg { width: var(--ui-icon); height: var(--ui-icon); }   /* rem-based — in sync with text */
.darx-foot .darx-foot-btn:hover svg,
.darx-foot .darx-foot-btn:focus-visible svg,
.darx-foot .darx-foot-btn:hover span,
.darx-foot .darx-foot-btn:focus-visible span { color: var(--nav-text-hover, #F1E9D8); }
/* Logotype-only footer buttons (2026-06-13, user) — tighter, squarer padding
   now that the text labels are gone. */
.darx-foot .darx-foot-btn { padding: 6px 10px; }
/* Scroll-position % readout — replaces the old custom scroll marker. */
.darx-foot-pct {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  font-family: var(--font-mono, var(--font-mono));
  font-size: var(--ui-fs-label); font-weight: 700; letter-spacing: 0.08em;   /* footer % → 55 */
  color: var(--nav-text-hover, rgba(246, 241, 231, 0.92)); padding: 0 4px;
}


/* ── 12. THEMED SCROLLBAR (2026-06-13, user) — STANDARD properties only.
   The browser's default light scrollbar flashed WHITE next to the dark nav /
   footer, and the up/down ARROW BUTTONS were the two white corner boxes. On
   Chromium/Edge, setting `scrollbar-color` switches to the buttonless "modern"
   scrollbar (no arrow boxes) AND colours track+thumb — so this single rule kills
   the white boxes cross-browser. We do NOT use ::-webkit-scrollbar here:
   Chromium IGNORES those pseudo-elements once scrollbar-color is set, which is
   exactly why the button boxes survived on Edge before. Colours track each
   entity's --nav-bg / --nav-gold. The DARX consumer homepage keeps the default. */
html {
  scrollbar-color: color-mix(in srgb, var(--nav-gold, #C9BBA0) 55%, var(--nav-bg, #3C3C3E)) var(--nav-bg, #3C3C3E);
}

/* GUIDE overlay + panel — self-contained LIGHT card (fixed light tones; the
   doc-surface vars resolve dark, so we hardcode per the contrast rule). */
.darx-guide-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 16, 12, 0.55);
}
.darx-guide-overlay[hidden] { display: none; }
.darx-guide-panel {
  position: relative; width: 100%; max-width: 420px;
  background: #F6F1E6; color: #33312E;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 14px;
  padding: 26px 26px 28px; text-align: center;
  font-family: var(--font-body, var(--font-body));
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
  max-height: 82vh; overflow-y: auto;
}
.darx-guide-close {
  position: absolute; top: 9px; right: 13px; border: none; background: none;
  font-size: var(--ui-fs-display); line-height: 1; color: #8a8276; cursor: pointer; padding: 2px 6px;
}
.darx-guide-close:hover { color: #33312E; }
.darx-guide-icon {
  width: 46px; height: 46px; margin: 2px auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--ui-fs-display); color: #7a5a16;
  background: #efe2c4; border: 1px solid #d8b86a;
}
.darx-guide-h { margin: 0 0 8px; font-size: var(--ui-fs-display); color: #33312E; }
.darx-guide-lead { margin: 0 0 10px; font-size: var(--ui-fs-value); color: #5a534a; }
.darx-guide-note { margin: 0; font-size: var(--ui-fs-value); line-height: 1.55; color: #6a6358; }
/* Contextual GUIDE sections (2026-06-13) — left-aligned "On this page" /
   "Getting around" lists below the centred title + lead. */
.darx-guide-sec { text-align: left; margin-top: 16px; }
.darx-guide-sec h3 {
  margin: 0 0 6px; font-family: var(--font-mono, monospace); font-size: var(--ui-fs-label);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7a5a16;
}
.darx-guide-sec ul { margin: 0; padding-left: 18px; }
.darx-guide-sec li { font-size: var(--ui-fs-value); line-height: 1.5; color: #4a443b; margin-bottom: 5px; }
.darx-guide-sec li b { color: #2a2823; font-weight: 700; }