/* Shared preview navbar styling (Options A/B/C) */

:root{
  --nav-bg: #060606;
  --nav-fg: #eaeaea;
  --nav-muted: #9aa0a6;
  /* Global plate tone controls (quick tuning without re-rendering texture) */
  --nav-plate-brightness: 0.90; /* darker red plate */
  --nav-plate-saturation: 0.98;
  /* User requested nav red */
  --nav-red-main: #DE1111;
  --nav-red-main-rgb: 222, 17, 17;
  --nav-red-0: #2a0000;
  --nav-red-1: #7a0b0b;
  --nav-red-2: var(--nav-red-main);
  --nav-red-3: var(--nav-red-main);
  /* darker “blood red” hover accent (looks less neon) */
  --nav-hover-red: var(--nav-red-main);
  --nav-sep-red: var(--nav-red-main);
  --nav-org-title-color: #f3f4f6;
  --nav-org-stripe-color: #DE1111;
  --nav-org-accent-color: #DE1111;
}

body.nav-preview {
  margin: 0;
  background: #000;
  color: var(--nav-fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.navPreviewBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* user request: make the black bar noticeably taller */
  height: 120px;
  /* navbar is the red plate now (no black bar behind it) */
  background: transparent;
  border-bottom: 0;
  z-index: 99999;
  overflow: visible;
}

/* Kill any subpixel “seam” under the fixed bar (covers anything below). */
.navPreviewBar::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* neon red separator line under navbar */
  height: 2px;
  background: var(--nav-sep-red); /* darker + less attention */
  box-shadow:
    0 0 6px rgba(var(--nav-red-main-rgb), 0.22),
    0 0 12px rgba(var(--nav-red-main-rgb), 0.10);
  z-index: 2; /* above plate SVG, below buttons/menus */
  pointer-events: none;
}

.navPreviewInner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  /* align with app shell below: .container { max-width: 2800px; padding: 20px; } */
  max-width: 2800px;
  margin: 0 auto;
  padding: 14px 20px;
  position: relative;
  z-index: 30; /* above separator line */
  overflow: visible;
}

.navPlateFull{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  z-index: 1;
  overflow: hidden;
  background: #8d0712 url("/images/metal/nav-plate.webp?v=20260801armor2") center / 100% 100% no-repeat;
}
.navPlateSvgFull{
  width: 100%;
  height: 120px;
  display: none;
  filter: none;
}
.navPlateTint{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:var(--nav-org-stripe-color);
  mix-blend-mode:color;
  transition:opacity .2s ease;
}
body.hasOrgStripe .navPlateTint{opacity:.94}
.navOrgBanner{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
  transform-origin:50% 50%;
  transition:opacity .2s ease;
}
.navOrgBanner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.30) 70%,rgba(0,0,0,.46));
}
body.hasOrgBanner .navOrgBanner{opacity:.78}

.navBrand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}
.navBrand .title {
  font-weight: 800;
  letter-spacing: 0.7px;
}
.navBrand .subtitle {
  font-size: 12px;
  color: var(--nav-muted);
}

.navPlate {
  position: relative;
  flex: 1 1 auto;
  height: 120px;
  min-width: 520px;
}

/* Option A: no brand on the left, let the plate start at container edge */
.optA .navPlate { min-width: 0; }
.optA .navTabs { margin-left: calc(0.125in + 10px); }
.navPlateSvg {
  width: 100%;
  height: 120px;
  display: block;
  position: relative;
  z-index: 1;
  filter: brightness(var(--nav-plate-brightness)) saturate(var(--nav-plate-saturation));
}
.navPlateSvg.navPlateSvgFull {
  display: none;
  filter: none;
}

/* Static “ultra metallic” finish on the red plate (no streaks; just controlled spec + micro texture) */
.navPlateFx{
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4; /* above SVG/branding, below pulse/buttons */
  pointer-events: none;
  clip-path: none; /* rectangular plate now */
}
.navPlateFx::before{
  content: "";
  position: absolute;
  inset: 0;
  /* "Ironman armor" clearcoat: one dominant off-camera highlight + tighter streak + subtle vignette.
     No obvious top-to-bottom gradient overlay (the texture handles tone). */
  background:
    /* dominant specular spot (upper-left, off-camera light) */
    radial-gradient(120% 90% at 28% -18%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.08) 30%,
      rgba(255,255,255,0.00) 62%),
    /* tighter clearcoat streak (thin, across upper area) */
    radial-gradient(160% 38% at 54% 8%,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.00) 66%),
    /* subtle bottom vignette to keep plate feeling solid */
    radial-gradient(170% 140% at 50% 122%,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.00) 62%);
  mix-blend-mode: screen;
  opacity: 0.62;
  /* Avoid blur bleed outside clip-path (can show as an offset gray rectangle) */
  filter: none;
}
.navPlateFx::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("textures/noise_64.png?v=20260107a");
  background-size: 64px 64px;
  opacity: 0.075;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.navPlatePulse{
  position: absolute;
  inset: 0;
  z-index: 5; /* above static finish, under buttons */
  pointer-events: none;
  clip-path: none; /* rectangular plate now */
  /* the moving “flash” */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 42%,
    rgba(255,255,255,0.26) 50%,
    rgba(255,255,255,0.00) 58%,
    rgba(255,255,255,0.00) 100%
  );
  /* Avoid blur bleed outside clip-path (can show as an offset gray rectangle) */
  filter: none;
  opacity: 0;
  transform: translateX(-140%);

  /* one pass, 8s after load */
  animation: navPlateScanner 6000ms ease-in-out 8s 1 both;
}

@keyframes navPlateScanner{
  0%   { opacity: 0; transform: translateX(-140%); }
  10%  { opacity: 0.9; }
  60%  { opacity: 0.75; }
  100% { opacity: 0; transform: translateX(140%); }
}

@media (prefers-reduced-motion: reduce){
  .navPlatePulse{ animation: none; }
}

/* Full-width flash burst after sweep (brief) */
.navPlateFlash{
  position: absolute;
  inset: 0;
  z-index: 5; /* plate FX layer */
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0.20);
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  filter: none;
  background:
    /* wider hot bloom (covers most of the plate) */
    radial-gradient(120% 220% at 46% 52%,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.38) 18%,
      rgba(255,255,255,0.00) 62%),
    /* edge blooms (push light to the borders) */
    radial-gradient(140% 220% at -10% 50%,
      rgba(255,40,40,0.22) 0%,
      rgba(255,40,40,0.00) 58%),
    radial-gradient(140% 220% at 110% 50%,
      rgba(255,40,40,0.22) 0%,
      rgba(255,40,40,0.00) 58%),
    /* red energy wash (fills whole width) */
    linear-gradient(90deg,
      rgba(255,0,0,0.10) 0%,
      rgba(255,0,0,0.26) 30%,
      rgba(255,0,0,0.20) 70%,
      rgba(255,0,0,0.10) 100%);
  /* default: no heavy halo unless flashing */
  box-shadow: none;
}
.navPlateFlash.flashNow{
  animation: navPlateFlashBurst 260ms ease-out 0ms 1 both;
}
@keyframes navPlateFlashBurst{
  0%   {
    opacity: 0;
    transform: scaleX(0.16);
    box-shadow: none;
  }
  16%  {
    opacity: 1;
    /* massive, quick border afterglow */
    box-shadow:
      0 0 90px rgba(255, 0, 0, 0.42),
      0 0 160px rgba(255, 0, 0, 0.26),
      0 0 260px rgba(255, 0, 0, 0.14);
  }
  55%  {
    opacity: 0.92;
    box-shadow:
      0 0 70px rgba(255, 0, 0, 0.32),
      0 0 130px rgba(255, 0, 0, 0.18),
      0 0 220px rgba(255, 0, 0, 0.10);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.24);
    box-shadow: none;
  }
}
.navPlateContent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 22px 26px;
  gap: 10px;
  z-index: 40; /* keep buttons/menus above separator line */
  overflow: visible;
}

.navTitle{
  position: absolute;
  top: 10px;
  left: 26px;
  right: 26px;
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1.6em;
  color: #d8dee5;
  -webkit-text-fill-color: #d8dee5;
  display: inline-block;
  isolation: isolate;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

/* Textured machined-steel face. The baked surface carries directional grain,
   scratches and reflected light; CSS supplies the bevel and physical depth. */
body:not(.hasOrgBranding) .navTitle:not(.isDistorting){
  color: #cbd2d9;
  background-color: #9ba5af;
  background-image: url("/images/metal/title-steel.webp?v=20260801metal1");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.7px rgba(13,18,23,0.96);
  paint-order: stroke fill;
  text-shadow:
     0 -1px 0 rgba(255,255,255,0.95),
    -1px  0   0 rgba(100,112,124,0.72),
     1px  0   0 rgba(28,34,40,0.96),
     0  1px 0 rgba(7,10,13,0.98),
     1px  2px 0 rgba(4,6,8,0.92),
     0  5px 8px rgba(0,0,0,0.68),
     0  0 12px rgba(222,235,248,0.18);
}

/* Organization owners retain their selected title color. */
body.hasOrgBranding .navTitle:not(.isDistorting){
  color: var(--nav-org-title-color, #f3f4f6);
  background: none;
  -webkit-text-fill-color: var(--nav-org-title-color, #f3f4f6);
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.38),
     1px -1px 0 rgba(25,29,34,0.9),
    -1px  1px 0 rgba(20,24,29,0.92),
     1px  1px 0 rgba(8,11,14,0.96),
     0  3px 5px rgba(0,0,0,0.58);
}

/* CSS-only title distortion (no per-letter DOM). Uses ::before/::after
   as clipped RGB-split slices while .isDistorting is set. */
.navTitle.isDistorting{
  color: rgba(220,255,236,0.96);
  -webkit-text-fill-color: rgba(220,255,236,0.96);
  animation: navTitleJitter 95ms steps(2, end) infinite;
  text-shadow:
    -1px 0 rgba(255,60,180,0.55),
     1px 0 rgba(60,255,255,0.55),
     0 0 12px rgba(180,255,220,0.22);
}
.navTitle.isDistorting::before{
  color: #7ef9ff;
  opacity: 0.9;
  transform: none;
  z-index: 2;
  clip-path: inset(0 0 52% 0);
  text-shadow:
    -2px 0 rgba(255,40,160,0.75),
     1px 0 rgba(80,255,255,0.55);
  animation: navTitleSliceTop 170ms steps(2, end) infinite;
  filter: none;
}
.navTitle.isDistorting::after{
  content: attr(data-text);
  display: block;
  color: #ff7ab0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #ff7ab0;
  opacity: 0.88;
  mix-blend-mode: screen;
  filter: none;
  clip-path: inset(48% 0 0 0);
  animation: navTitleSliceBot 155ms steps(2, end) infinite;
  z-index: 2;
}
@keyframes navTitleJitter{
  0%,100%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(1px,-0.5px,0); }
  50%{ transform:translate3d(-1px,0.5px,0); }
  75%{ transform:translate3d(1px,0,0); }
}
@keyframes navTitleSliceTop{
  0%,100%{ transform:translate3d(0,0,0); }
  20%{ transform:translate3d(8px,-1px,0); }
  45%{ transform:translate3d(-3px,0.5px,0); }
  70%{ transform:translate3d(14px,0,0); }
  85%{ transform:translate3d(-10px,0.5px,0); }
}
@keyframes navTitleSliceBot{
  0%,100%{ transform:translate3d(0,0,0); }
  18%{ transform:translate3d(-12px,1px,0); }
  42%{ transform:translate3d(6px,-0.5px,0); }
  64%{ transform:translate3d(-16px,0,0); }
  82%{ transform:translate3d(4px,0.5px,0); }
}
@media (prefers-reduced-motion: reduce){
  .navTitle.isDistorting,
  .navTitle.isDistorting::before,
  .navTitle.isDistorting::after{
    animation: none;
  }
}

/* Decrypt-complete title flash (brief) */
.navTitle.isFlash{
  color: #ffffff;
  filter: brightness(1.18) contrast(1.10);
  text-shadow:
    -2px -2px 0 rgba(0, 0, 0, 0.95),
     2px -2px 0 rgba(0, 0, 0, 0.95),
    -2px  2px 0 rgba(0, 0, 0, 0.95),
     2px  2px 0 rgba(0, 0, 0, 0.95),
     0  0 16px rgba(255,255,255,0.55),
     0  0 34px rgba(255,255,255,0.26),
     0  0 22px rgba(159,15,15,0.14);
}

/* Dark-steel extrusion: lit upper shoulder, stepped lower edge, cast shadow. */
.navTitle::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: #69747f;
  -webkit-text-fill-color: #69747f;
  -webkit-text-stroke: 1px #0b0f13;
  transform: translate(3px, 3px);
  z-index: -1;
  text-shadow:
    0 -1px 0 rgba(213,224,235,0.50),
    0  1px 0 #4a545e,
    0  2px 0 #2b333b,
    0  3px 0 #151b21,
    1px 4px 0 #080b0e,
    0  8px 10px rgba(0,0,0,0.76);
  opacity: 1;
}

/* Reserved for the CSS-only distortion slice; normal title needs no overlay. */
.navTitle::after{
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
/* align title with the tab stack offset (Option A shifts tabs right) */
.optA .navTitle{
  left: calc(26px + 0.125in + 10px);
}
.navWorkspaceLabel{
  position:absolute;top:14px;right:26px;max-width:300px;overflow:hidden;
  color:rgba(244,232,206,.9);font:800 9px/1.2 'Orbitron',system-ui,sans-serif;
  letter-spacing:.15em;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 2px #000;pointer-events:none
}
.navWorkspaceLabel[hidden]{display:none}
body.hasOrgBranding .navTitle{right:340px}

.navTabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  /* allow hover dropdown to extend outside the row */
  overflow-x: hidden;
  overflow-y: visible;
}

/* ANALYSIS hover dropdown */
.navTabDropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible;
}
.navDropdownMenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.86);
  background: rgba(8, 10, 12, 0.92);
  box-shadow: 0 16px 46px rgba(0,0,0,0.62), 0 0 24px rgba(222, 17, 17, 0.10);
  display: none;
  z-index: 999999;
}
.navTabDropdown:hover .navDropdownMenu{
  display: block;
}
.navTabDropdown:focus-within .navDropdownMenu{
  display: block;
}
.navTabDropdown.open .navDropdownMenu{
  display: block;
}

/* Divisions -> Diplomacy submenu (expands to the right) */
.navDropdownSub{
  position: relative;
}
.navDropdownSubMenu{
  position: absolute;
  /* Align first submenu item with parent row */
  top: -10px;
  /* No gap between parent + submenu (prevents hover drop) */
  left: 100%;
  margin-left: -1px; /* overlap borders slightly */
  min-width: 220px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.86);
  background: rgba(8, 10, 12, 0.92);
  box-shadow: 0 16px 46px rgba(0,0,0,0.62), 0 0 24px rgba(222, 17, 17, 0.10);
  display: none;
  z-index: 1000001;
}
.navDropdownSubMenu::before{
  /* Invisible hover bridge to prevent accidental collapse */
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  width: 14px;
  height: 100%;
  background: transparent;
}
.navDropdownSub:hover .navDropdownSubMenu{
  display: block;
}
.navDropdownSub:focus-within .navDropdownSubMenu{
  display: block;
}
.navDropdownSubToggle{
  position: relative;
}
.navDropdownSubToggle::after{
  content: "▸";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
}
.navDropdownItem{
  width: 100%;
  text-align: left;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(92, 8, 8, 0.85);
  background: rgba(92, 8, 8, 0.55);
  color: rgba(255,255,255,0.94);
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.navDropdownItem--withIcon{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

/* Military submenu: top 20% olive stripe (from Military.png) */
.navDropdownItem--military{
  position: relative;
  overflow: hidden;
}
.navDropdownItem--military::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20%;
  background: #4A542B;
  opacity: 0.95;
  pointer-events: none;
}
.navDropdownItem--military > *{
  position: relative;
  z-index: 1;
}

/* Academy submenu: top 20% cream stripe */
.navDropdownItem--academy{ position: relative; overflow: hidden; }
.navDropdownItem--academy::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#D8C7A3;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--academy > *{ position: relative; z-index: 1; }

.navNoticeBadge{
  display:inline-grid;
  min-width:22px;
  height:22px;
  margin-left:auto;
  place-items:center;
  padding:0 6px;
  color:#10212a;
  font-size:.68rem;
  font-weight:900;
  border:1px solid #8dd9f3;
  border-radius:999px;
  background:#70c8e7;
  box-shadow:inset 0 1px 0 #e6f9ff, 0 0 10px rgba(82,190,226,.35);
}
.navNoticeBadge[hidden]{ display:none; }

/* Trade & Industry submenu: top 20% gold stripe */
.navDropdownItem--trade{ position: relative; overflow: hidden; }
.navDropdownItem--trade::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#A87623;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--trade > *{ position: relative; z-index: 1; }

/* Science submenu: top 20% deep blue stripe */
.navDropdownItem--science{ position: relative; overflow: hidden; }
.navDropdownItem--science::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#263359;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--science > *{ position: relative; z-index: 1; }

/* Operations submenu: top 20% teal stripe */
.navDropdownItem--operations{ position: relative; overflow: hidden; }
.navDropdownItem--operations::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#29775A;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--operations > *{ position: relative; z-index: 1; }

/* Intelligence submenu: top 20% charcoal stripe */
.navDropdownItem--intel{ position: relative; overflow: hidden; }
.navDropdownItem--intel::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#242725;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--intel > *{ position: relative; z-index: 1; }

/* Fleet Command submenu: top 20% fleet red stripe */
.navDropdownItem--fleet{ position: relative; overflow: hidden; }
.navDropdownItem--fleet::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#B61919;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--fleet > *{ position: relative; z-index: 1; }

/* Diplomacy submenu: top 20% slate stripe */
.navDropdownItem--diplomacy{ position: relative; overflow: hidden; }
.navDropdownItem--diplomacy::before{
  content:"";
  position:absolute; left:0; top:0; width:100%; height:20%;
  background:#656865;
  opacity:0.95;
  pointer-events:none;
}
.navDropdownItem--diplomacy > *{ position: relative; z-index: 1; }
.navDropdownItemText{
  flex: 1 1 auto;
  min-width: 0;
}
.navDropdownIcon{
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
  pointer-events: none;
}
.navDropdownItem + .navDropdownItem{
  margin-top: 8px;
}
.navDropdownItem:hover{
  background: rgba(122, 11, 11, 0.72);
  border-color: rgba(122, 11, 11, 0.98);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.10), 0 0 18px rgba(122, 11, 11, 0.16);
}

.navAuth{
  margin-left: auto; /* push to right side */
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-top: 0;
}
.navAuthBtn{
  padding-left: 12px;
  padding-right: 12px;
}
.navAccountBtn,
.navNotifyBtn,
.navOrgSwitchBtn{
  appearance:none;
  border:1px solid rgba(216,199,163,.48);
  border-radius:4px;
  color:#eee6d4;
  background:linear-gradient(#34383a,#111315);
  min-height:34px;
  padding:0 10px;
  font:800 10px/1 'Orbitron',system-ui,sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
}
.navAccountBtn:hover,.navNotifyBtn:hover,.navOrgSwitchBtn:hover{border-color:#f1dfb8;color:#fff;}
.navOrgSwitchWrap{position:relative;display:inline-flex;align-items:center}
.navOrgSwitchWrap[hidden]{display:none}
.navOrgSwitchBtn{
  display:grid;place-items:center;width:38px;height:36px;padding:3px;overflow:hidden;
  border-radius:50%;font-size:8px;letter-spacing:.04em
}
.navOrgSwitchBtn span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 25%,#4b5255,#151819 58%,#050606)}
.navOrgSwitchBtn img{display:none;width:100%;height:100%;border-radius:50%;object-fit:contain}
.navOrgSwitchBtn.has-image img{display:block}
.navOrgSwitchBtn.has-image span{display:none}
.navOrgDrawer{
  position:absolute;right:0;top:calc(100% + 10px);z-index:25000;width:min(350px,92vw);
  border:1px solid rgba(216,199,163,.55);border-radius:5px;padding:10px;
  color:#eee6d4;background:#101315;box-shadow:0 18px 50px rgba(0,0,0,.62)
}
.navOrgDrawer[hidden]{display:none}
.navOrgDrawerHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 3px 10px;border-bottom:1px solid #333a3d}
.navOrgDrawerHead strong{font:800 10px/1.2 'Orbitron',system-ui,sans-serif;letter-spacing:.1em}
.navOrgDrawerHead span{color:#9da6a8;font:800 9px/1 'Orbitron',system-ui,sans-serif}
.navOrgList{display:grid;gap:6px;max-height:390px;overflow:auto;padding:8px 0}
.navOrgChoice{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;border:1px solid #343b3e;border-radius:3px;padding:8px;text-align:left;
  color:#d8ddde;background:#171b1d;cursor:pointer
}
.navOrgChoice:hover,.navOrgChoice.active{border-color:#d8c7a3;background:#252326}
.navOrgChoice.active{box-shadow:inset 3px 0 var(--nav-org-accent-color)}
.navOrgChoiceMedia{display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border:1px solid #61696b;border-radius:50%;background:#0d0f10;color:#e9dec6;font:900 8px/1 'Orbitron',system-ui,sans-serif}
.navOrgChoiceMedia img{width:100%;height:100%;object-fit:contain}
.navOrgChoiceText{display:grid;gap:4px;min-width:0}
.navOrgChoiceText strong{overflow:hidden;color:#f0e6d2;font:800 11px/1.2 'Orbitron',system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.navOrgChoiceText small{color:#858f92;font-size:9px}
.navOrgChoiceCheck{color:#d8c7a3;font:900 13px/1 system-ui,sans-serif}
.navOrgManage{width:100%;border:1px solid #565e61;border-radius:3px;padding:8px;color:#ddd3be;background:#202426;font:800 9px/1 'Orbitron',system-ui,sans-serif;letter-spacing:.08em;cursor:pointer}
.navOrgManage:hover{border-color:#d8c7a3;color:#fff}
@media(max-width:1100px){
  .navWorkspaceLabel{display:none}
  body.hasOrgBranding .navTitle{right:26px}
}
.navNotifyBtn{position:relative;width:38px;padding:7px;}
.navNotifyBtn svg{display:block;width:20px;height:20px;margin:auto;}
.navNotifyCount{
  position:absolute;right:-7px;top:-8px;display:grid;place-items:center;
  min-width:19px;height:19px;padding:0 4px;border:1px solid #ffaea7;border-radius:10px;
  color:#fff;background:#a81717;font:900 9px/1 system-ui,sans-serif;
}
.navNotifyCount[hidden],.navNotifyBtn[hidden],.navAccountBtn[hidden]{display:none;}
.navNotifyDrawer{
  position:absolute;right:0;top:calc(100% + 10px);z-index:25000;width:min(390px,92vw);
  border:1px solid rgba(216,199,163,.55);border-radius:5px;padding:10px;
  color:#eee6d4;background:#101315;box-shadow:0 18px 50px rgba(0,0,0,.62);
}
.navNotifyDrawer[hidden]{display:none;}
.navNotifyHead,.navNotifyFilters{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.navNotifyHead strong{font:800 11px/1.2 'Orbitron',system-ui,sans-serif;letter-spacing:.12em;}
.navNotifyHead button,.navNotifyFilters button{
  border:1px solid #555d60;border-radius:3px;padding:6px 8px;color:#cfd3d4;background:#202426;
  font:700 9px/1 system-ui,sans-serif;cursor:pointer;
}
.navNotifyFilters{justify-content:flex-start;margin:10px 0 7px;}
.navNotifyFilters button.active{border-color:#d8c7a3;color:#fff4d9;}
.navNotifyList{display:grid;gap:6px;max-height:420px;overflow:auto;}
.navNotifyItem{display:grid;gap:4px;width:100%;border:1px solid #343b3e;border-radius:3px;padding:9px;text-align:left;color:#c6cbcc;background:#171b1d;cursor:pointer;}
.navNotifyItem.unread{border-left:3px solid #b72b2b;background:#21191a;}
.navNotifyItem strong{color:#f0e6d2;font-size:12px}.navNotifyItem span{font-size:11px;line-height:1.4}.navNotifyItem time{color:#788185;font-size:9px}
.navNotifyEmpty{padding:18px;text-align:center;color:#848d90;font-size:11px;}

.navAdminMenuWrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.navHamburgerBtn{
  width: 44px;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.navAdminMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 180px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.82);
  padding: 8px;
  z-index: 20000;
}
.navAdminMenu .navDropdownItem{
  width: 100%;
  text-align: left;
}
.navAdminGroupLabel{
  margin: 9px 8px 4px;
  padding-top: 7px;
  border-top: 1px solid rgba(216,199,163,0.20);
  color: rgba(216,199,163,0.72);
  font: 800 9px/1.2 'Orbitron', system-ui, sans-serif;
  letter-spacing: .18em;
}
.navAdminMenu .navDropdownItem--nested{
  padding-left: 22px;
}

.navTabBtn {
  appearance: none;
  /* more “panel” than “pill” */
  border: 2px solid rgba(0,0,0,0.86); /* hair thicker */
  /* machined bone metal: spec highlight + diagonal multi-stop sheen +
     higher-contrast convex curvature (same hue, more metal) */
  background:
    /* tight spec highlight near top */
    radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.00) 52%),
    /* diagonal polished-metal sheen (alternating light/dark bands) */
    linear-gradient(135deg,
      rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.00) 16%,
      rgba(96,86,70,0.20) 38%, rgba(255,255,255,0.30) 54%,
      rgba(84,74,58,0.24) 78%, rgba(255,255,255,0.20) 100%),
    /* convex “finger press” curvature */
    linear-gradient(180deg, #f4eee2 0%, #dfd5c4 20%, #a99d8a 50%, #ece5d8 72%, #94897a 90%, #dcd2c2 100%);
  /* Shallow etched red lettering */
  color: var(--nav-red-1); /* darker cherry red */
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-transform: uppercase;
  /* Orbitron kerning can collide letters (e.g. "LI" in INTELLIGENCE) */
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0;
  /* a touch more tracking prevents "LI" collisions */
  /* crisp edge for readability (lighter + thinner = less "deep" and less L "foot") */
  -webkit-text-stroke: 0.22px rgba(0,0,0,0.58);
  /* shallow etch: tiny offsets + lower contrast */
  text-shadow:
    /* slight top inner shade */
    0 -0.45px 0 rgba(0,0,0,0.46),
    /* slight bottom inner highlight */
    0  0.45px 0 rgba(255,255,255,0.34),
    /* micro lift so it doesn't feel carved too deep */
    0 -0.22px 0 rgba(255,255,255,0.14),
    /* soft readability */
    0  0.8px 0.8px rgba(0,0,0,0.16);
  font-size: 1.12em; /* readability bump */
  line-height: 1.05;
  padding: 12px 14px;
  border-radius: 0;
  font-weight: 800;
  letter-spacing: 0.9px;
  cursor: pointer;
  box-shadow:
    /* crisp inner dark keyline */
    inset 0 0 0 2px rgba(0,0,0,0.92),
    /* raised top bevel */
    inset 0 2px 0 rgba(255,255,255,0.98),
    /* convex shading */
    inset 0 10px 16px rgba(255,255,255,0.36),
    inset 0 -12px 16px rgba(0,0,0,0.22),
    /* lower bevel */
    inset 0 -3px 0 rgba(0,0,0,0.34),
    /* outer lift */
    0 8px 18px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.65),
    /* heavy black aura */
    0 0 14px rgba(0,0,0,0.80),
    0 0 26px rgba(0,0,0,0.55);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 160ms ease;
  white-space: nowrap;
  /* match the “rectangle with 45° cut” vibe */
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
}
.navTabBtn:hover {
  transform: translateY(-1px);
  /* hover lights up the same hue as the lettering, but like a light source */
  color: var(--nav-hover-red);
  -webkit-text-stroke: 0.22px rgba(0,0,0,0.56);
  text-shadow:
    0 -0.45px 0 rgba(0,0,0,0.44),
    0  0.45px 0 rgba(255,255,255,0.38),
    0 -0.22px 0 rgba(255,255,255,0.16),
    0  0.8px 0.8px rgba(0,0,0,0.16),
    0  0 7px rgba(143,15,15,0.18),
    0  0 14px rgba(143,15,15,0.10);
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.00) 54%),
    linear-gradient(135deg,
      rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.00) 16%,
      rgba(96,86,70,0.18) 38%, rgba(255,255,255,0.34) 54%,
      rgba(84,74,58,0.22) 78%, rgba(255,255,255,0.22) 100%),
    linear-gradient(180deg, #f8f2e7 0%, #e5dccb 20%, #b2a693 50%, #f0e9dd 72%, #9a8f80 90%, #e2d8c8 100%);
  /* red glow on hover only */
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.92),
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 10px 16px rgba(255,255,255,0.36),
    inset 0 -12px 16px rgba(0,0,0,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.34),
    0 8px 18px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.65),
    0 0 14px rgba(0,0,0,0.80),
    0 0 26px rgba(0,0,0,0.55),
    /* afterglow (no border color change) */
    0 0 10px rgba(143, 15, 15, 0.22),
    0 0 22px rgba(143, 15, 15, 0.14),
    0 0 44px rgba(143, 15, 15, 0.08);
}
.navTabBtn.active {
  border-color: rgba(0,0,0,0.92);
  /* active tab uses the separator-line red + a glowing bottom edge */
  color: var(--nav-sep-red);
  -webkit-text-stroke: 0.22px rgba(0,0,0,0.60);
  text-shadow:
    0 -0.45px 0 rgba(0,0,0,0.48),
    0  0.45px 0 rgba(255,255,255,0.32),
    0 -0.22px 0 rgba(255,255,255,0.12),
    0  0.8px 0.8px rgba(0,0,0,0.18),
    0  0 10px rgba(159,15,15,0.38),
    0  0 22px rgba(159,15,15,0.22);
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.00) 52%),
    linear-gradient(135deg,
      rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.00) 16%,
      rgba(96,86,70,0.19) 38%, rgba(255,255,255,0.32) 54%,
      rgba(84,74,58,0.23) 78%, rgba(255,255,255,0.21) 100%),
    linear-gradient(180deg, #f6f0e5 0%, #e2d9c8 20%, #ada18e 50%, #eee7db 72%, #968b7c 90%, #ded4c4 100%);
  box-shadow:
    /* crisp inner dark keyline */
    inset 0 0 0 2px rgba(0,0,0,0.92),
    inset 0 2px 0 rgba(255,255,255,0.98),
    inset 0 10px 16px rgba(255,255,255,0.36),
    inset 0 -12px 16px rgba(0,0,0,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.34),
    /* bottom glow line */
    inset 0 -2px 0 rgba(159,15,15,0.90),
    inset 0 -6px 10px rgba(159,15,15,0.18),
    0 8px 18px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.65),
    0 0 14px rgba(0,0,0,0.80),
    0 0 26px rgba(0,0,0,0.55),
    /* subtle red activity glow */
    0 0 18px rgba(159,15,15,0.20),
    0 0 34px rgba(159,15,15,0.12);
}

.navRight {
  display: flex;
  align-items: center;
  gap: 10px;
}
.navChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.navDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,42,42,0.95);
  box-shadow: 0 0 12px rgba(255,42,42,0.55);
}

.navPreviewFrame {
  position: fixed;
  top: 120px; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: calc(100vh - 120px);
  border: 0;
  background: #000; /* ensure iframe itself doesn't show gray before content paints */
}

/* Option B tweaks: two-tier HUD */
.optB .navPreviewBar { height: 150px; }
.optB .navPreviewFrame { top: 150px; height: calc(100vh - 150px); }
.optB .navPreviewInner { align-items: stretch; }
.optB .navBrand { min-width: 220px; }
.optB .navPlate { height: 78px; align-self: flex-end; }
.optB .navPlateSvg { height: 78px; }
.optB .navPlateContent { padding: 10px 16px; }
.optB .navTopRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Option C tweaks: heavier “command deck” */
.optC .navPlate { height: 78px; }
.optC .navPlateSvg { height: 78px; }

/* Firefox uses the same baked automotive armor as Chromium. */
@supports (-moz-appearance: none) {
  .navPlateFull {
    background: #8d0712 url("/images/metal/nav-plate.webp?v=20260801armor2") center / 100% 100% no-repeat;
  }
  .navPlateSvgFull {
    display: none;
    filter: none;
  }
  .navPlateTint {
    mix-blend-mode: color;
  }
  /* Same silver text path in Firefox; only distortion temporarily overrides it. */
  .navTitle.isDistorting {
    color: rgba(220,255,236,0.96) !important;
    -webkit-text-fill-color: rgba(220,255,236,0.96);
    background: none;
  }
  .navTitle.isDistorting::after {
    content: attr(data-text);
    display: block;
  }
}