/* The same four-stage navigation on Labs and Troubleshooter.
   Site-specific investigation controls remain available, but secondary. */
.jl-eco-topbar.labs-topbar,.jl-eco-topbar.topbar {
  position:relative;left:auto;transform:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;justify-items:stretch;gap:clamp(10px,1.4vw,23px);
  width:100%;max-width:1920px;height:auto;min-height:78px;
  margin:0 auto;padding:12px clamp(16px,2.5vw,34px);z-index:5;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.jl-eco-topbar .jl-brand-controls {grid-column:1;grid-row:1;justify-self:start;flex:0 1 auto;flex-shrink:0;min-width:0;display:flex;align-items:center;}
.jl-eco-topbar .jl-eco-primary {grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;}
.jl-eco-topbar .jl-eco-right {grid-column:3;grid-row:1;}
/* Troubleshooter's content shell is narrower than the viewport; its visitor
   header alone spans the screen and remains centered. Labs uses normal width. */
.jl-eco-topbar.topbar {width:min(100vw,1920px);max-width:1920px;margin-left:calc((100% - min(100vw,1920px))/2);margin-right:0;}
.jl-eco-topbar.labs-topbar {width:100%;max-width:1920px;margin-inline:auto;left:auto;transform:none;}
.jl-eco-topbar .jl-eco-plain {
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  min-height:42px;padding:8px 12px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:#c7d6e6;font:650 13px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;letter-spacing:0;transition:background .16s,color .16s;
}
.jl-eco-topbar .jl-eco-plain:hover,
.jl-eco-topbar .jl-eco-learn[open] .jl-eco-learn-toggle {color:#8af0fb;background:rgba(40,184,213,.12);}
.jl-eco-topbar .jl-eco-learn,.jl-eco-topbar .jl-eco-lab {position:relative;}
.jl-eco-topbar .jl-eco-learn summary,.jl-eco-topbar .jl-eco-lab summary {list-style:none;cursor:pointer;}
.jl-eco-topbar .jl-eco-learn summary::-webkit-details-marker,
.jl-eco-topbar .jl-eco-lab summary::-webkit-details-marker,
.jl-eco-topbar .jl-eco-mobile summary::-webkit-details-marker {display:none;}
.jl-eco-topbar .jl-eco-chevron {display:block;flex:none;width:15px;height:15px;transition:transform .16s;stroke:currentColor;}
.jl-eco-topbar .jl-eco-learn[open] .jl-eco-chevron,
.jl-eco-topbar .jl-eco-lab[open] .jl-eco-chevron {transform:rotate(180deg);}
.jl-eco-topbar .jl-eco-dropdown {
  position:absolute;z-index:100;top:calc(100% + 10px);left:0;
  width:255px;padding:9px;border:1px solid #36526d;border-radius:16px;
  background:#102139;box-shadow:0 24px 55px rgba(0,0,0,.42);
}
.jl-eco-topbar .jl-eco-menu-link,
.jl-eco-topbar .jl-eco-mobile-panel [data-eco-proxy] {
  display:flex;flex-direction:column;gap:4px;
  width:100%;padding:11px 13px;margin:0;border:0;border-radius:11px;
  background:transparent;color:#e6f3ff;
  font:650 13px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
  text-align:left;text-decoration:none;white-space:normal;
}
.jl-eco-topbar .jl-eco-menu-link span:not(.jl-eco-ext) {font-size:11px;font-weight:400;color:#a0b5c9;}
.jl-eco-topbar .jl-eco-menu-link:hover,
.jl-eco-topbar .jl-eco-mobile-panel [data-eco-proxy]:hover {background:#1a364e;color:#95efff;}
.jl-eco-topbar .jl-eco-stage {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:39px;padding:7px 15px;border-radius:16px;
  font:750 13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;white-space:nowrap;transition:background .16s,border-color .16s,box-shadow .16s,color .16s;
}
.jl-eco-topbar .jl-eco-stage-learn {
  border:1px solid rgba(251,191,80,.69);color:#fff1ce;
  background:linear-gradient(125deg,rgba(235,155,43,.26),rgba(149,78,25,.31));
  box-shadow:0 0 19px rgba(251,180,59,.21);
  list-style:none;cursor:pointer;
}
.jl-eco-topbar .jl-eco-stage-learn:hover,
.jl-eco-topbar .jl-eco-learn[open] .jl-eco-stage-learn {
  color:#fff7df;border-color:#ffd58b;
  background:linear-gradient(125deg,rgba(240,169,51,.43),rgba(173,96,31,.41));
  box-shadow:0 0 26px rgba(251,180,59,.29);
}
.jl-eco-topbar .jl-eco-stage-practice {
  border:1px solid rgba(74,222,161,.68);color:#caffea;
  background:linear-gradient(125deg,rgba(20,160,108,.27),rgba(17,94,83,.32));
  box-shadow:0 0 19px rgba(52,211,153,.20);
}
.jl-eco-topbar .jl-eco-stage-practice:hover {
  color:#e0fff1;border-color:#88f6c2;
  background:linear-gradient(125deg,rgba(30,193,130,.42),rgba(22,120,93,.39));
  box-shadow:0 0 26px rgba(52,211,153,.31);
}
.jl-eco-topbar .jl-eco-stage-lab {
  border:1px solid rgba(167,139,250,.64);color:#f0e9ff;
  background:linear-gradient(125deg,rgba(132,86,226,.22),rgba(77,47,145,.30));
  box-shadow:0 0 18px rgba(139,92,246,.20);
}
.jl-eco-topbar .jl-eco-stage-lab:hover,
.jl-eco-topbar .jl-eco-stage-lab.jl-eco-current,
.jl-eco-topbar .jl-eco-lab[open] .jl-eco-stage-lab {
  border-color:#c5a5ff;background:linear-gradient(125deg,rgba(145,92,240,.38),rgba(95,53,180,.37));
  box-shadow:0 0 25px rgba(139,92,246,.31);
}
.jl-eco-topbar .jl-eco-stage-troubleshoot {
  border:1px solid rgba(67,208,239,.59);color:#d6f7ff;
  background:linear-gradient(125deg,rgba(32,168,209,.23),rgba(27,88,152,.28));
  box-shadow:0 0 18px rgba(34,211,238,.19);
}
.jl-eco-topbar .jl-eco-stage-troubleshoot:hover,
.jl-eco-topbar .jl-eco-stage-troubleshoot.jl-eco-current {
  border-color:#7ee4f8;background:linear-gradient(125deg,rgba(32,190,223,.37),rgba(28,106,176,.36));
  box-shadow:0 0 25px rgba(34,211,238,.30);
}
.jl-eco-topbar .jl-eco-ext {font-size:14px;color:inherit;}
.jl-eco-topbar .jl-eco-right {display:flex;justify-self:end;justify-content:flex-end;align-items:center;min-width:0;gap:10px;}
.jl-eco-topbar .jl-eco-local {display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap;}
.jl-eco-topbar .jl-eco-util {display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;min-height:35px;padding:7px 9px;border-radius:12px;font-size:11px;font-weight:750;letter-spacing:0;white-space:nowrap;text-decoration:none;}
.jl-eco-topbar .jl-eco-util-beta {font-size:9px;letter-spacing:.03em;}
.jl-eco-topbar .jl-eco-util-tour,.jl-eco-topbar .jl-eco-util-library {border:1px solid #406080;background:#173047;color:#c1edff;}
.jl-eco-topbar .jl-eco-util-tour:hover,.jl-eco-topbar .jl-eco-util-library:hover {background:#214c64;color:#fff;}
.jl-eco-topbar .jl-theme-button {flex:none;width:40px;height:40px;min-height:40px;order:50;border-radius:14px;}
.jl-eco-topbar .jl-eco-mobile {display:none;position:relative;}
.jl-eco-topbar .jl-eco-mobile summary {list-style:none;}
.jl-eco-topbar .jl-eco-menu-trigger {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #45627d;border-radius:14px;background:#142d42;color:#bbf0fa;cursor:pointer;font-size:20px;}
.jl-eco-topbar .jl-eco-mobile-panel {
  position:absolute;z-index:120;right:-51px;top:calc(100% + 15px);
  width:min(325px,calc(100vw - 32px));max-height:calc(100vh - 130px);overflow-y:auto;
  padding:12px;border:1px solid #36526d;border-radius:18px;
  background:#102139;box-shadow:0 25px 70px rgba(0,0,0,.46);
}
.jl-eco-topbar .jl-eco-mobile-label {font-size:10px;font-weight:850;letter-spacing:.11em;color:#7be9fa;padding:8px 12px;}
.jl-eco-topbar .jl-eco-mobile-divider {height:1px;background:#314960;margin:8px 4px;}
.jl-eco-topbar .jl-eco-sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.jl-eco-topbar :is(a,button,summary):focus-visible {outline:2px solid #83edfb;outline-offset:3px;}
@media(max-width:1450px) {
  .jl-eco-topbar.labs-topbar,.jl-eco-topbar.topbar {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;}
  .jl-eco-topbar .jl-eco-local {display:none;}
  .jl-eco-topbar .jl-eco-mobile {display:block;}
}
@media(max-width:1090px) {
  .jl-eco-topbar.labs-topbar,.jl-eco-topbar.topbar {grid-template-columns:minmax(0,1fr) auto;}
  .jl-eco-topbar .jl-eco-primary {display:none;}
  .jl-eco-topbar .jl-eco-right {grid-column:2;grid-row:1;}
}
@media(max-width:780px) {
  .jl-eco-topbar.labs-topbar,.jl-eco-topbar.topbar {padding:10px 15px;min-height:69px;}
  .jl-eco-topbar .jl-eco-local {display:none;}
  .jl-eco-topbar .jl-eco-right {gap:8px;}
  .jl-eco-topbar .jl-eco-mobile-panel {right:-48px;}
}
@media(max-width:420px) {
  .jl-eco-topbar .jl-eco-right {gap:5px;}
  .jl-eco-topbar .jl-eco-mobile-panel {right:-43px;}
}
html[data-theme="light"] .jl-eco-topbar .jl-eco-plain {color:#35566d;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-plain:hover,
html[data-theme="light"] .jl-eco-topbar .jl-eco-learn[open] .jl-eco-learn-toggle {color:#087896;background:#e0f2fa;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-learn {color:#87500e;border-color:#e9b96c;background:linear-gradient(125deg,#fff2d7,#ffe6ba);box-shadow:0 0 17px #e7ab4730;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-learn:hover {color:#683b09;border-color:#da993d;background:#ffdfa9;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-practice {color:#12674c;border-color:#8ccfb3;background:linear-gradient(125deg,#e5fff3,#d7f7e9);box-shadow:0 0 17px #43ba8b25;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-practice:hover {color:#0e513d;border-color:#54ae8e;background:#c9f1df;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-lab {color:#633498;border-color:#ba9ddd;background:linear-gradient(125deg,#f3e9fb,#e9e3f6);box-shadow:0 0 15px #9371c122;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-lab:hover {color:#4f278a;background:#e4d6f6;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-troubleshoot {color:#0b6885;border-color:#8acbdc;background:linear-gradient(125deg,#def4fc,#d9edfa);box-shadow:0 0 15px #54a6c322;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-stage-troubleshoot:hover {color:#085775;background:#c9eaf7;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-dropdown,
html[data-theme="light"] .jl-eco-topbar .jl-eco-mobile-panel {background:#fff;border-color:#cbdce9;box-shadow:0 20px 55px #23517b27;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-menu-link,
html[data-theme="light"] .jl-eco-topbar .jl-eco-mobile-panel [data-eco-proxy] {color:#21445c;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-menu-link span:not(.jl-eco-ext) {color:#607b8f;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-menu-link:hover,
html[data-theme="light"] .jl-eco-topbar .jl-eco-mobile-panel [data-eco-proxy]:hover {color:#087e9f;background:#edf7fc;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-mobile-label {color:#087a97;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-mobile-divider {background:#d3e1ec;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-menu-trigger {color:#176e8c;background:#fff;border-color:#bfd5e3;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-util-tour,
html[data-theme="light"] .jl-eco-topbar .jl-eco-util-library {color:#166b8a;background:#e9f5fb;border-color:#acd6e4;}
@media(prefers-reduced-motion:reduce) {.jl-eco-topbar *, .jl-eco-topbar *::before,.jl-eco-topbar *::after {transition:none!important;}}

/* Keep the brand readable beside menu and theme controls on narrow phones. */
@media(max-width:520px) {
  .jl-eco-topbar .jl-brand-controls {gap:6px;max-width:calc(100vw - 128px);}
  .jl-eco-topbar .brand {gap:7px;}
  .jl-eco-topbar :is(.brand-logo,.brand .logo,.brand-mark,.brand-mark img) {width:37px;height:37px;min-width:37px;flex-shrink:0;}
  .jl-eco-topbar :is(.brand-title,.brand-name,.brand-text strong) {font-size:15px;letter-spacing:-.02em;}
  .jl-eco-topbar :is(.brand-sub,.brand-text small) {display:none;}
  .jl-eco-topbar .jl-eco-menu-trigger,.jl-eco-topbar .jl-theme-button {width:38px;height:38px;}
}

/* Avoid the Lab engines' legacy responsive grid placement and overflow.
   The enhanced header must remain centered across full-width pages. */
.jl-eco-topbar.labs-topbar,.jl-eco-topbar.topbar {box-sizing:border-box;overflow:visible;z-index:16;}
.jl-eco-topbar .jl-eco-primary,.jl-eco-topbar .jl-eco-right {min-width:0;}
.jl-eco-topbar .jl-eco-learn[open] {z-index:30;}
@media(max-width:1090px) {
  .jl-eco-topbar .jl-brand-controls {grid-column:1;grid-row:1;}
  .jl-eco-topbar .jl-eco-right {grid-column:2;grid-row:1;}
}

/* Keep the Learn menu above the Labs monitor, hero, and diagnosis panels,
   while keeping modal dialogs (z-index 20+) above the navigation. */
.jl-eco-topbar .jl-eco-learn[open],.jl-eco-topbar .jl-eco-lab[open] {z-index:26;}
.jl-eco-topbar .jl-eco-dropdown {z-index:27;}



/* Lab: show the real investigation directory rather than a second library button. */
.jl-eco-topbar .jl-eco-lab-dropdown {
  left:50%;transform:translateX(-50%);
  width:min(372px,calc(100vw - 28px));max-height:min(67vh,545px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:10px;
}
.jl-eco-topbar .jl-eco-lab-heading {
  padding:9px 12px 11px;color:#a6c3d8;
  font:800 10px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.12em;
}
.jl-eco-topbar .jl-eco-lab-item {
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 10px;margin:0;border:0;border-radius:11px;
  color:#e7f2ff;background:transparent;text-decoration:none;
  white-space:normal;transition:background .16s;
}
.jl-eco-topbar .jl-eco-lab-item:hover,
.jl-eco-topbar .jl-eco-lab-item:focus-visible {
  color:#fff;background:rgba(167,139,250,.14);
}
.jl-eco-topbar .jl-eco-lab-number {
  flex:0 0 auto;min-width:37px;padding:4px 5px;
  border-radius:7px;background:rgba(167,139,250,.12);
  border:1px solid rgba(167,139,250,.25);
  color:#ceb8ff;text-align:center;font:800 10px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;
}
.jl-eco-topbar .jl-eco-lab-copy {display:flex;min-width:0;flex-direction:column;gap:3px;}
.jl-eco-topbar .jl-eco-lab-copy strong {font-size:13px;font-weight:700;line-height:1.3;white-space:normal;}
.jl-eco-topbar .jl-eco-lab-copy small {font-size:11px;line-height:1.35;color:#9db3c9;white-space:normal;}
.jl-eco-topbar .jl-eco-mobile-labs {display:grid;gap:2px;}
.jl-eco-topbar .jl-eco-mobile-labs .jl-eco-lab-item {padding:9px 11px;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-heading {color:#61819b;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-item {color:#27455f;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-item:hover,
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-item:focus-visible {color:#66339a;background:#f0e7fc;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-number {color:#633498;background:#f1eafc;border-color:#cfbae8;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-lab-copy small {color:#6b8294;}

/* Fix the parent stacking context, not just the dropdown. The Labs monitor has
   its own compositing/stacking layers, and raising only the menu cannot outrank
   a sibling of its containing header. Dialogs deliberately take precedence. */
#app > .app-shell > header.jl-eco-topbar,
#app > .lab-shell > header.jl-eco-topbar {z-index:110!important;}
#app > .app-shell:has(.modal-screen) > header.jl-eco-topbar,
#app > .lab-shell:has(.modal-screen) > header.jl-eco-topbar {z-index:1!important;}


/* Lab navigation uses native popovers (the browser top layer).
   This keeps the Learn / Lab directories above the illustrated monitor
   regardless of stacking contexts, transforms or clipped ancestors. */
.jl-eco-topbar .jl-eco-dropdown[popover],
.jl-eco-topbar .jl-eco-mobile-panel[popover] {
  position:fixed;
  inset:auto;
  margin:0;
  transform:none;
  z-index:100;
}