/* ======================================================================================================
   File:    header.css
   Path:    /assets/css/partials/header.css
   Version: v2.18.0
   Issued:  2026-03-25
   Author:  Buktika Webdesk (Binka)
   Purpose: Global header partial — hamburger nav drawer, unified utility panel
            (theme + language + account + contact) on ALL viewports.
   Colour Map:    v3.4.0
   Design System: v4.0.0
   ISO Reference: ISO 27001, ISO 9241-110
   Source Naming Standard: Buktika v7.1 (ISO Aligned)
   License: © Buktika, 2026. All rights reserved.

   Changelog:
   v2.18.0 (2026-03-25): EQUAL HEIGHT CONTROLS.
           CHANGED  - .utility-auth-link: padding:0.375rem → height:2.75rem.
                      Matches theme toggle (B.4.3: 2.75rem) and language pill.
                      padding:0 0.75rem retained for horizontal spacing.
   v2.17.0 (2026-03-25): TWO-COLUMN GRID LAYOUT + CONTENT-WIDTH DROPDOWN.
           CHANGED  - .utility-row: flex space-between → grid 5.5rem 1fr.
                      Label fixed column (5.5rem), control left-aligned in remainder.
           CHANGED  - .utility-row--contact: grid-template-columns:1fr — no label,
                      full-width button in single column.
           ADDED    - .utility-row--auth links: justify-self:start — left-aligned
                      in control column.
           CHANGED  - .utility-row--lang: justify-content flex-end → flex-start.
           CHANGED  - .utility-row--lang .custom-select: min-width:160px → unset.
                      Dropdown sizes to content — adapts to language name length.
   v2.16.0 (2026-03-25): PANEL Z-INDEX — OVERLAP ENABLED.
           CHANGED  - .utility-panel: z-index 999 → 1001.
                      Owner authorisation 2026-03-25. Panel now sits above header
                      (1000) enabling calc(4.75rem - 4px) overlap to render.
                      Below utility-toggle and hamburger buttons (1002).
   v2.15.0 (2026-03-25): COMPLIANCE AUDIT FIX.
           FIXED    - Drawer navlink color: #f0ebe3 → var(--sdx-color-livingtower-light-text).
                      ai.md HARD RULE: no hardcoded hex — tokens only.
                      #ffffff in drawer rules retained — B.4.8-HR2 permanent exception
                      (overlay is always dark; #ffffff is the correct fixed value).
   v2.14.0 (2026-03-25): FOUNDATIONAL COLOR FIX — NO !important.
           ADDED    - .utility-panel-inner: color: var(--sdx-color-livingtower-light-text).
                      Sets the inheritance base for all child elements. global.css
                      a,a:visited{color:inherit} now inherits this value — all <a>
                      elements inside the panel are correctly colored without !important.
           REMOVED  - All !important guards on .utility-auth-link and .utility-contact-link
                      color declarations (rest state and hover). No longer needed.
   v2.13.0 (2026-03-25): CONTACT + AUTH LINK COLOR INHERITANCE FIX.
           FIXED    - .utility-contact-link color: added !important.
           FIXED    - .utility-auth-link color: added !important.
                      Root cause: global.css a,a:visited{color:inherit} — links
                      inherit parent chain color. In light mode no ancestor in the
                      utility panel has an explicit color set, so browser default
                      wins over our token. !important is the correct guard here.
                      global.css v3.19.0 amendment (add utility-contact-link and
                      utility-auth-link to the :not() exclusion chain AND set an
                      explicit color on the panel container) will allow removal of
                      these !important guards permanently.
   v2.12.0 (2026-03-25): BUTTON VISIBILITY FIX — DARK SURFACE TOKENS.
           CHANGED  - .utility-contact-link: color var(--sdx-color-mama-amber) →
                      var(--sdx-color-livingtower-light-text). Amber resolved to
                      insufficient contrast on #123543 in practice. Light text
                      is always readable on the always-dark panel surface.
           CHANGED  - .utility-auth-link: border 0.55 → 0.60. Hover border 0.70 → 0.80.
           CHANGED  - .utility-contact-link: border 0.55 → 0.45 (less competing with
                      the lighter text). Hover border 0.35 → 0.70.
   v2.11.0 (2026-03-25): B.4.3 / B.4.5 COMPLIANCE FIXES.
           FIXED    - .utility-theme-toggle:hover bg rgba(0,0,0,0.20) → rgba(245,176,20,0.08) (B.4.3).
           FIXED    - .utility-theme-toggle:hover border rgba(255,255,255,0.18) → rgba(245,176,20,0.35) (B.4.3).
           ADDED    - .utility-theme-toggle:focus-visible rule — was missing entirely (B.4.3).
                      Uses var(--sdx-color-mama-amber) — var(--green) resolves incorrectly
                      on always-dark #123543 in light mode (pending Amendment v2.4.0).
           FIXED    - .utility-contact-link font-size 0.9375rem → 0.875rem (B.4.5).
           FIXED    - .utility-contact-link font-weight 700 → 600 (B.4.5).
           FIXED    - .utility-contact-link hover border-color 0.70 → 0.35 (B.4.5).
           FIXED    - .utility-contact-link hover background 0.10 → 0.08 (B.4.5).
           REMOVED  - letter-spacing: 0.02em from .utility-contact-link (not in B.4.5 spec).
           PENDING  - Items 4,5,13: .utility-theme-toggle default border/color and
                      .utility-contact-link color/border/focus tokens use fixed dark-surface
                      values because var(--border)/var(--muted)/var(--green) resolve incorrectly
                      on #123543 in light mode. Require Amendment v2.4.0 dark-surface variant
                      spec before these can be formally compliant.
   v2.10.0 (2026-03-25): GLOBE PILL + BUTTON CONTRAST FIX.
           CHANGED  - .utility-auth-link: background transparent (was rgba amber tint).
                      border 0.30→0.55. Transparent pill, solid amber border, full amber text.
           CHANGED  - .utility-contact-link: background transparent (was rgba amber tint).
                      border 0.50→0.55. Same transparent pill pattern.
           CHANGED  - .utility-panel .custom-select overrides: stale inset/background
                      rules removed. Replaced with .utility-panel .options-list z-index:1100.
                      Globe pill and overlay surface now fully owned by language-switcher.css v1.6.0.
   v2.9.0 (2026-03-25): PANEL WIDTH + OVERLAP + LANG BG + BORDER + AUTH FIX.
           CHANGED  - .utility-panel: width 17rem → 20rem.
           CHANGED  - .utility-panel: top 4.75rem → calc(4.75rem - 4px).
                      4px overlap into header bar per owner instruction.
           CHANGED  - .utility-panel .custom-select: background rgba(255,224,224,0.30)
                      per owner instruction. Hover 0.38.
           CHANGED  - .utility-panel::before: amber opacity 0.70 → 0.45 at top,
                      0.06 → 0.03 at bottom. Less harsh gradient border.
           ADDED    - .utility-panel .language-switcher / .custom-select-dropdown /
                      .custom-select-options z-index:2 — prevents ::before amber
                      gradient from bleeding around dropdown list.
           CHANGED  - #utility-panel auth fallback: both visible → Sign In only.
                      Dashboard stays hidden until data-auth="signed-in" confirmed.
   v2.8.0 (2026-03-24): INSET LIGHT STRENGTH + AUTH FALLBACK + CONTACT BUTTON.
           CHANGED  - .utility-theme-toggle + .utility-panel .custom-select:
                      inset top edge light rgba(255,255,255,0.12) → 0.28.
                      Added side edge glints rgba(255,255,255,0.06). Deeper
                      base shadow rgba(0,0,0,0.40) → 0.50.
           ADDED    - #utility-panel .nav-auth-signin/dashboard { visibility:visible }.
                      Overrides skeleton guard inside panel only so Account row
                      is never empty before auth-state.js resolves data-auth.
           CHANGED  - .utility-contact-link: border 0.30 → 0.50 amber opacity,
                      background 0.08 → 0.12, font-weight 600 → 700,
                      padding 0.5rem → 0.5625rem. Reads clearly as a button.
   v2.7.0 (2026-03-24): INSET CONTROLS + CORAL CATCHALL GUARD.
           CHANGED  - .utility-theme-toggle: inset box-shadow recess + top edge light.
                      background rgba(0,0,0,0.25), border rgba(255,255,255,0.08).
           CHANGED  - .utility-panel .custom-select: same inset recess treatment.
                      Replaces rgba(255,255,255,0.08) flat background.
           CHANGED  - .utility-auth-link:hover / .utility-contact-link:hover:
                      color !important guard added. global.css coral catchall
                      (specificity ~0,10,1) overrides these selectors without it.
                      PENDING: global.css v3.19.0 must add utility-auth-link and
                      utility-contact-link to the :not() exclusion chain to remove
                      the !important guards permanently.
           CHANGED  - .utility-contact-link: font-size 0.875rem → 0.9375rem,
                      border rgba(245,176,20,0.22) → 0.30, background 0.07 → 0.08.
   v2.6.0 (2026-03-24): UTILITY PANEL REFINEMENTS.
           CHANGED  - .utility-label: warm-sand → light-text (#f0ebe3), 0.875rem → 1rem, weight 500 → 600.
           CHANGED  - .utility-panel: solid border removed. Gradient border via ::before mask technique.
                      Amber 70% at top-left → 6% at bottom-right. Fades toward bottom corners.
                      Mobile: ::before display:none, simple border-bottom restored.
           ADDED    - .utility-panel .custom-select: dark surface override. Semi-transparent
                      dark background + warm-sand border. Replaces white widget default.
   v2.5.0 (2026-03-24): DARK GLASS UTILITY PANEL per Amendment v2.4.0.
           CHANGED  - .utility-panel: background var(--header-bg) → var(--sdx-color-ui-popup-surface)
                      (#123543 deep teal — theme-independent. global.css v3.18.0).
           CHANGED  - .utility-panel: border all sides rgba(245,176,20,0.28) amber wash.
           CHANGED  - .utility-panel: border-top 2px rgba(245,176,20,0.55) amber crown line.
           CHANGED  - .utility-panel: box-shadow deepened for dark surface elevation.
           CHANGED  - .utility-panel-inner: gap:1rem → 0. Row spacing via padding+border-bottom.
           CHANGED  - .utility-row: padding 0.625rem 0 + border-bottom amber divider added.
           CHANGED  - .utility-label: var(--muted) → var(--sdx-color-livingtower-warm-sand).
                      Fixed dark surface — no theme dependency.
           ADDED    - .utility-theme-toggle: fixed dark surface hover colours.
           ADDED    - .utility-row--contact: border-bottom:none (last row, no divider).
           CHANGED  - .utility-auth-link: var(--green)/var(--border) → amber (dark surface).
           CHANGED  - .utility-contact-link: var(--green)/var(--border) → amber (dark surface).
           CHANGED  - @media (max-width:840px): full-bleed override added for utility panel
                      (left:0, right:0, width:auto, border-radius:0, border-bottom only).
                      max-width:480px centring on .utility-panel-inner.
           REMOVED  - @media (max-width:640px): stale utility panel rules (superseded).
           REMOVED  - [data-theme="dark"] utility panel note: surface is now constant.
   v2.4.0 (2026-03-24): TOOLTIP + RADIUS FIX per Amendment v2.4.0.
           CHANGED  - .utility-toggle: border-radius 0.5rem → 0.75rem (B.4.4-HR2).
   v2.3.0 (2026-03-24): UTILITY PANEL — right-anchored dropdown, not full-bleed.
           CHANGED  - .utility-panel: removed left:0/right:0 full-viewport stretch.
                      Now right:1rem, width:17rem — anchored below utility toggle.
                      border-radius:0.75rem added. border-bottom → border (all sides).
           CHANGED  - .utility-panel-inner: removed max-width:480px and margin:0 auto
                      centring — no longer needed, panel is self-sized.
           ADDED    - @media (max-width:640px): panel right:0.5rem,
                      width:calc(100vw - 1rem), max-width:17rem — prevents overflow
                      on narrow phones.
   v2.2.0 (2026-03-24): UNIFIED UTILITY PANEL.
           REMOVED  - Section 5: .header-utility-desktop block deleted.
                      Utility toggle (person icon) is now visible on ALL
                      viewports. Desktop no longer has inline theme + lang controls.
           REMOVED  - #lang-slot-desktop rule. Language switcher always lives in
                      .utility-row--lang. No relocation needed.
           CHANGED  - .utility-toggle: default display: none → display: flex.
                      Visible on all viewports, not just ≤840px.
           CHANGED  - .utility-panel: display: none removed. Panel is always in
                      the stacking context; hidden state is opacity/visibility only.
           ADDED    - .utility-auth-link, .utility-row--auth: auth links styled as
                      utility-panel action pills (same pattern as utility-contact-link).
           FIXED    - §4 current-page ::before bar: var(--accent-red) → 
                      var(--sdx-color-mama-amber) per DOC-03 §7-HR1.
                      Added box-shadow: 0 2px 6px rgba(245,176,20,0.40).
           UPDATED  - Media query (≤840px): removed show-rules for .utility-toggle
                      and .utility-panel (now always shown); removed hide-rule for
                      .header-utility-desktop (no longer exists).
   v2.1.0 (2026-03-07): nav-auth link swap in header.css. Added skeleton guard.
   v2.0.0 (2026-03-07): MOBILE UTILITY PANEL. Three-zone mobile top bar.
   v1.15.0 (2026-02-26): BRAND-LINK RECTANGLE ROOT CAUSE FIXED.
   v1.14.0 (2026-02-26): CANONICAL SCAFFOLD COMPLIANCE.
   ====================================================================================================== */


/* ======================================================================================================
   0) Dependencies
   Depends on: /assets/css/global.css, /assets/css/themes.css
   Tooltip geometry tokens defined here — theme-insensitive.
   ====================================================================================================== */

:root {
  --tooltip-padding:       0.5rem 0.875rem;
  --tooltip-font-size:     0.875rem;                 /* 14px → 0.875rem: readable without being heavy */
  --tooltip-font-weight:   500;
  --tooltip-line-height:   1.5;
  --tooltip-max-width:     320px;
  --tooltip-border:        1px solid rgba(245, 176, 20, 0.28);  /* mama-amber wash — matches utility panel border */
  --tooltip-border-radius: 0.625rem;
  --tooltip-bg:            var(--sdx-color-ui-popup-surface);   /* #123543 — matches utility panel surface */
  --tooltip-text:          #ffffff;                             /* EXCEPTION: white on #123543 — permanent */
  --tooltip-text-shadow:   0 1px 3px rgba(0, 0, 0, 0.40);
  --tooltip-shadow:        0 8px 32px rgba(0, 0, 0, 0.36), 0 2px 8px rgba(0, 0, 0, 0.20);
  --tip-shift:             0;
}


/* ======================================================================================================
   1) Header surface and layout
   HARD RULE (www-B B.2.3): position: fixed; top: 0; left: 0; width: 100%.
   ====================================================================================================== */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0.625rem 1.125rem;
  background: var(--header-bg);
  color: var(--header-fg);
  border-bottom: 1px solid var(--border);
  min-width: 0;
  transition: top 0.3s ease-in-out;
}

header.header-hidden {
  top: -7.5rem;
}


/* ======================================================================================================
   2) Brand link
   ====================================================================================================== */

header .brand-link {
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  z-index: 1002;
  transition: filter 0.22s ease, transform 0.12s ease;
}

header .brand-link:hover,
header .brand-link:focus-visible {
  color: inherit;
  filter: drop-shadow(0 0 8px rgba(245, 176, 20, 0.55))
          drop-shadow(0 0 3px rgba(245, 176, 20, 0.30));
  transform: translateY(-1px);
  border-radius: 8px;
  display: inline-flex;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 176, 20, 0.05) 0%,
    rgba(245, 176, 20, 0.02) 40%,
    rgba(245, 176, 20, 0) 100%
  );
}

header .brand-link .logo img {
  display: block;
  border-radius: 12px;
}

header .brand-link .brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

header .brand-link .brand-line1 {
  font-size: 1rem;
  font-weight: 700;
}

header .brand-link .brand small {
  color: var(--muted);
  font-size: 0.75rem;
}


/* ======================================================================================================
   3) Navigation — pillar links only.
   Auth links live in the utility panel (see section 8c).
   HARD RULE (www-B B.2.5): <ul id="main-nav-list"> must be empty in HTML.
   header.js owns all nav DOM construction.
   ====================================================================================================== */

header nav {
  flex: 1 1 auto;
  position: relative;
  z-index: 900;
  display: flex;
  justify-content: center;
  min-width: 0;
}

header nav ul {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  min-width: 0;
}

header nav ul li {
  display: contents !important;
}

header a.navlink {
  position: relative;
  display: inline-block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  text-decoration: none;
  color: var(--green);
  border: 1px solid transparent;
  transition: color 0.18s ease, background 0.18s ease, transform 0.06s ease;
}

header a.navlink:hover,
header a.navlink:focus-visible {
  color: var(--green);
  background: radial-gradient(
    ellipse at center,
    rgba(245, 176, 20, 0.15) 0%,
    rgba(245, 176, 20, 0.12) 40%,
    rgba(245, 176, 20, 0)    100%
  );
}

header a.navlink:active {
  transform: translateY(1px);
}

header a.navlink:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}


/* ======================================================================================================
   4) Current-page indicator (bar + pip)
   DOC-03 §7-HR1: BOTH bar and pip MUST use var(--sdx-color-mama-amber).
   No [data-theme] override permitted — amber is readable on both header surfaces.
   FIXED v2.2.0: ::before was using var(--accent-red) — violation corrected.
   ====================================================================================================== */

header nav a.navlink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 86%;
  height: 3px;
  border-radius: 999px;
  background: var(--sdx-color-mama-amber);
  box-shadow: 0 2px 6px rgba(245, 176, 20, 0.40);
  opacity: 0.85;
}

header nav a.navlink[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sdx-color-mama-amber);
  box-shadow: 0 0 0 2px var(--header-bg);
}


/* ======================================================================================================
   5) Theme toggle button
   ====================================================================================================== */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(245, 176, 20, 0.08);
  border-color: rgba(245, 176, 20, 0.35);
  color: var(--fg);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}


/* ======================================================================================================
   6) Tooltip styles (Tippy.js sentraledex theme)
   ====================================================================================================== */

.tippy-box[data-theme~='sentraledex'] {
  background:    var(--tooltip-bg);
  color:         var(--tooltip-text);
  font-size:     var(--tooltip-font-size);
  font-weight:   var(--tooltip-font-weight);
  line-height:   var(--tooltip-line-height);
  padding:       var(--tooltip-padding);
  border:        var(--tooltip-border);
  border-radius: var(--tooltip-border-radius);
  max-width:     var(--tooltip-max-width);
  text-shadow:   var(--tooltip-text-shadow);
  box-shadow:    var(--tooltip-shadow);
  box-sizing:    border-box;
  z-index:       9999 !important;
}

.tippy-box[data-theme~='sentraledex'] .tippy-content {
  padding: 0;
}

.tippy-box[data-theme~='sentraledex'] .tippy-arrow {
  color: var(--tooltip-bg);
  border-color: rgba(0, 0, 0, 0.08);
}


/* ======================================================================================================
   7) Mobile hamburger toggle — ≤840px only (shown via media query)
   ====================================================================================================== */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 1002;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mobile-menu-toggle:hover {
  background: rgba(46, 93, 58, 0.05);
  border-color: var(--green);
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.mobile-menu-toggle .hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 1.125rem;
}

.mobile-menu-toggle .line {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle[aria-expanded="true"] .line1 {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .line2 {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .line3 {
  transform: translateY(-7.5px) rotate(-45deg);
}


/* ======================================================================================================
   8) Utility toggle button (person icon) — ALL viewports.
   Opens the utility panel. Previously mobile-only. Now universal.
   ====================================================================================================== */

.utility-toggle {
  display: flex;   /* visible on all viewports */
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  z-index: 1002;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.utility-toggle:hover {
  background: rgba(245, 176, 20, 0.08);
  border-color: rgba(245, 176, 20, 0.35);
  color: var(--fg);
}

.utility-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.utility-toggle[aria-expanded="true"] {
  background: rgba(245, 176, 20, 0.10);
  border-color: rgba(245, 176, 20, 0.45);
  color: var(--fg);
}


/* ======================================================================================================
   9) Utility panel — ALL viewports.
   Contains: theme toggle, language switcher, account (sign-in/dashboard), contact.
   Hidden state: opacity/visibility/transform. JS toggles .utility-panel--open.
   Surface: var(--sdx-color-ui-popup-surface) #123543 — theme-independent deep teal.
   Always dark regardless of page theme (same principle as footer).
   No [data-theme] override needed — surface is constant.
   Desktop (>840px): floating card, right-anchored below utility toggle.
   Mobile (≤840px): full-bleed, overridden in @media block below.
   ====================================================================================================== */

.utility-panel {
  position: fixed;
  top: calc(4.75rem - 4px); /* 4px overlap into header bar — B.2.7-HR3 */
  right: 1rem;            /* right-anchored below utility toggle — desktop */
  width: 20rem;           /* fixed card width — desktop */
  z-index: 1001;  /* above header (1000) — enables 4px overlap. Below toggles (1002). B.2.7 */
  background: var(--sdx-color-ui-popup-surface);  /* #123543 — theme-independent */
  border: none;                                    /* border owned by ::before gradient */
  border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);

  /* Hidden state — JS adds .utility-panel--open to reveal */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.75rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* Gradient border — amber bright at top, fades to near-transparent at bottom corners.
   Technique: inset ::before with gradient background, padding gap reveals the panel surface.
   pointer-events:none ensures it does not intercept clicks. */
.utility-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(245, 176, 20, 0.45) 0%,
    rgba(245, 176, 20, 0.28) 30%,
    rgba(245, 176, 20, 0.10) 65%,
    rgba(245, 176, 20, 0.03) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Suppress ::before from bleeding around the language switcher dropdown list */
.utility-panel .language-switcher,
.utility-panel .custom-select-dropdown,
.utility-panel .custom-select-options {
  position: relative;
  z-index: 2;
}

.utility-panel--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.utility-panel-inner {
  padding: 1.125rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--sdx-color-livingtower-light-text); /* foundational: all child <a> inherit this */
}

.utility-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;  /* fixed label col, control fills remainder */
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(245, 176, 20, 0.10);
}

.utility-label {
  font-size: 1rem;
  color: var(--sdx-color-livingtower-light-text);
  font-weight: 600;
  white-space: nowrap;
}

/* Theme toggle inside utility panel — fixed dark surface colours, inset recess.
   Default border/color use fixed tokens (spec gap — var(--border)/var(--muted) resolve
   incorrectly on #123543 in light mode; pending Amendment v2.4.0 update).
   Hover values per B.4.3. Focus-visible per B.4.3. */
.utility-theme-toggle {
  flex-shrink: 0;
  color: var(--sdx-color-livingtower-light-text);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 3px 8px  rgba(0, 0, 0, 0.50),
    inset 0 1px 0    rgba(255, 255, 255, 0.28),
    inset -1px 0 0   rgba(255, 255, 255, 0.06),
    inset 1px 0 0    rgba(255, 255, 255, 0.06);
}

.utility-theme-toggle:hover {
  color: var(--sdx-color-livingtower-light-text);
  background: rgba(245, 176, 20, 0.08);         /* B.4.3 canonical hover bg */
  border-color: rgba(245, 176, 20, 0.35);        /* B.4.3 canonical hover border */
  box-shadow:
    inset 0 3px 8px  rgba(0, 0, 0, 0.35),
    inset 0 1px 0    rgba(255, 255, 255, 0.18);
}

.utility-theme-toggle:focus-visible {
  outline: 2px solid var(--sdx-color-mama-amber); /* B.4.3 — var(--green) resolves incorrectly on dark surface */
  outline-offset: 2px;
}

/* Contact row — last row, no bottom divider, button spans full width */
.utility-row--contact {
  grid-template-columns: 1fr;  /* single column — no label, full-width button */
  border-bottom: none;
  padding-bottom: 0.25rem;
}

/* Language switcher row */
.utility-row--lang {
  align-items: center;
}

.utility-row--lang #language-switcher-container {
  display: flex;
  justify-content: flex-start;  /* left-align within control column */
}

.utility-row--lang .language-switcher {
  justify-content: flex-start;
}

.utility-row--lang .custom-select {
  min-width: unset;  /* content-width — expands with language name length */
}

/* Language switcher in utility panel — overlay z-index above panel.
   position:fixed and top/left/width set by JS positionOverlay().
   Surface colours already set in language-switcher.css using fixed dark tokens. */
.utility-panel .options-list {
  z-index: 1100;
}

/* Suppress language-switcher.css generic surface tokens within the panel —
   language-switcher.css uses var(--card) / var(--border) for non-panel contexts.
   The overlay uses var(--sdx-color-ui-popup-surface) set directly in language-switcher.css. */

/* Account row — auth links left-aligned in control column */
.utility-row--auth {
  align-items: center;
}

.utility-row--auth .nav-auth-signin,
.utility-row--auth .nav-auth-dashboard {
  justify-self: start;  /* left-align within the grid column */
}

/* Auth action pill — dark surface, always visible.
   Color set explicitly — inherits from .utility-panel-inner. */
.utility-auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;              /* matches theme toggle (B.4.3) and language pill */
  color: var(--sdx-color-mama-amber);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0 0.75rem;
  border: 1px solid rgba(245, 176, 20, 0.60);
  border-radius: 0.5rem;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.utility-auth-link:hover,
.utility-auth-link:focus-visible {
  color: var(--sdx-color-livingtower-light-text);
  background: rgba(245, 176, 20, 0.12);
  border-color: rgba(245, 176, 20, 0.80);
}

.utility-auth-link:focus-visible {
  outline: 2px solid var(--sdx-color-mama-amber);
  outline-offset: 2px;
}

/* Contact shortcut link — dark surface, always visible.
   Color inherited from .utility-panel-inner. Amber border for affordance. */
.utility-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--sdx-color-livingtower-light-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(245, 176, 20, 0.45);
  border-radius: 0.5rem;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.utility-contact-link:hover,
.utility-contact-link:focus-visible {
  color: var(--sdx-color-livingtower-light-text);
  background: rgba(245, 176, 20, 0.10);
  border-color: rgba(245, 176, 20, 0.70);
}

.utility-contact-link:focus-visible {
  outline: 2px solid var(--sdx-color-mama-amber);
  outline-offset: 2px;
}


/* ======================================================================================================
   10) Media queries
   ====================================================================================================== */

@media (max-width: 840px) {

  /* Show hamburger on mobile */
  .mobile-menu-toggle { display: flex; }

  /* Tagline hidden on mobile — logo + brand name only */
  header .brand-link .brand small {
    display: none;
  }

  /* Hamburger drawer — slides down from top */
  header nav#main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--sdx-color-green-deep) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 5rem 1.25rem 1.25rem !important;
    z-index: 1001 !important;
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.25rem);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  header nav#main-nav.mobile-open,
  header > nav#main-nav.mobile-open,
  nav#main-nav.mobile-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  header nav#main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 25rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  header nav#main-nav ul li {
    display: block !important;
    width: 100% !important;
  }

  header nav#main-nav a.navlink {
    display: block !important;
    width: 100% !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    text-align: left !important;
    border-radius: 0.625rem !important;
    margin-bottom: 0.375rem !important;
    text-decoration: none !important;
    color: var(--sdx-color-livingtower-light-text) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
  }

  header nav#main-nav a.navlink:hover,
  header nav#main-nav a.navlink:focus-visible {
    background: rgba(245, 176, 20, 0.14) !important;
    border-color: rgba(245, 176, 20, 0.35) !important;
    color: #ffffff !important;
  }

  header nav#main-nav a.navlink:focus-visible {
    outline: 2px solid rgba(245, 176, 20, 0.8) !important;
    outline-offset: 2px !important;
  }

  /* Current page: amber fill in drawer */
  header nav#main-nav a.navlink[aria-current="page"]::before,
  header nav#main-nav a.navlink[aria-current="page"]::after {
    display: none !important;
  }

  header nav#main-nav a.navlink[aria-current="page"] {
    background: rgba(245, 176, 20, 0.22) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-color: rgba(245, 176, 20, 0.50) !important;
  }

  /* Utility panel — full-bleed on mobile (B.2.7-HR7) */
  .utility-panel {
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(245, 176, 20, 0.30);
  }

  /* Disable gradient border pseudo-element on mobile — not suited to full-bleed */
  .utility-panel::before {
    display: none;
  }

  .utility-panel-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  /* Dark theme override for drawer */
  [data-theme="dark"] header nav#main-nav {
    background: var(--sdx-color-livingtower-dark-base) !important;
  }

  [data-theme="dark"] header nav#main-nav a.navlink {
    color: var(--sdx-color-livingtower-light-text) !important;
    background: rgba(245, 176, 20, 0.05) !important;
    border-color: rgba(245, 176, 20, 0.12) !important;
  }

  [data-theme="dark"] header nav#main-nav a.navlink:hover,
  [data-theme="dark"] header nav#main-nav a.navlink:focus-visible {
    background: rgba(245, 176, 20, 0.14) !important;
    border-color: rgba(245, 176, 20, 0.35) !important;
    color: #ffffff !important;
  }

  [data-theme="dark"] header nav#main-nav a.navlink[aria-current="page"] {
    background: rgba(245, 176, 20, 0.20) !important;
    border-color: rgba(245, 176, 20, 0.45) !important;
    color: #ffffff !important;
  }
}

@media (max-width: 640px) {

  header {
    padding: 0.5rem 0.75rem;
  }

  header .brand-link .logo img {
    width: 48px;
    height: 48px;
  }

  header .brand-link .brand .brand-line1 {
    font-size: 0.875rem;
  }

  .utility-panel-inner {
    padding: 1rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  header a.navlink,
  .tippy-box,
  .mobile-menu-toggle .line,
  header nav,
  .utility-panel,
  .utility-toggle {
    transition: none;
  }
}


/* ======================================================================================================
   11) Dark mode
   ====================================================================================================== */

/* Theme toggle icon visibility */
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Default: moon shown (offer dark), sun hidden */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

/* Navlink text on dark charcoal */
[data-theme="dark"] header a.navlink {
  color: var(--header-fg);
}

[data-theme="dark"] header a.navlink:hover,
[data-theme="dark"] header a.navlink:focus-visible {
  background: radial-gradient(
    ellipse at center,
    rgba(245, 176, 20, 0.17) 0%,
    rgba(245, 176, 20, 0.15) 40%,
    rgba(245, 176, 20, 0)    100%
  );
}

[data-theme="dark"] header .brand-link:hover {
  filter: drop-shadow(0 0 8px rgba(245, 176, 20, 0.55))
          drop-shadow(0 0 3px rgba(245, 176, 20, 0.30));
  transform: translateY(-1px);
  background: radial-gradient(
    ellipse at center,
    rgba(245, 176, 20, 0.02) 0%,
    rgba(245, 176, 20, 0.01) 40%,
    rgba(245, 176, 20, 0) 100%
  );
}

/* Utility panel dark surface uses var(--sdx-color-ui-popup-surface) — theme-independent.
   No [data-theme="dark"] override needed. Surface is constant in both themes. */


/* ======================================================================================================
   AUTH STATE — Header utility panel link swap
   Spec ref: BKT-DOC-www-G §4.3 (v1.1.1)
   Controls visibility of .nav-auth-signin and .nav-auth-dashboard.
   www-ONLY — DEPRECATED ON REACT MIGRATION.
   HARD RULE: No page CSS may override these rules.
   HARD RULE: No JS may set display/visibility on these elements.
   ====================================================================================================== */

[data-auth="signed-out"] .nav-auth-signin    { display: flex; }
[data-auth="signed-out"] .nav-auth-dashboard { display: none; }

[data-auth="signed-in"]  .nav-auth-signin    { display: none; }
[data-auth="signed-in"]  .nav-auth-dashboard { display: flex; }

/* Skeleton guard — covers sub-frame window before auth-state.js runs */
html:not([data-auth]) .nav-auth-signin,
html:not([data-auth]) .nav-auth-dashboard { visibility: hidden; }

/* Utility panel fallback — when auth-state.js has not yet set data-auth,
   show sign-in only as the safe default so the Account row is not empty.
   Dashboard stays hidden until data-auth="signed-in" is confirmed.
   Scoped to #utility-panel only — does not affect other skeleton guard contexts. */
#utility-panel .nav-auth-signin   { visibility: visible; }
#utility-panel .nav-auth-dashboard { visibility: hidden; }

/* Explicit disable guard — [hidden] must win over [data-auth] display rules above.
   UA stylesheet sets display:none on [hidden] at 0,1,0 specificity; the [data-auth]
   rules above are 0,2,0 and override it. This rule restores the intended behaviour.
   Remove `hidden` from the element in header.html to re-enable. */
.nav-auth-signin[hidden],
.nav-auth-dashboard[hidden],
.utility-row--auth[hidden] { display: none !important; }