/* 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;}

/* Universal Feedback is a header utility, immediately before theme toggle.
   On very narrow screens it moves into the existing mobile navigation. */
.jl-eco-topbar .jl-eco-feedback{
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 min-height:40px;padding:8px 13px;border:1px solid rgba(103,221,241,.47);
 border-radius:15px;background:rgba(36,161,195,.11);color:#bceffc;
 font:800 12px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;
 white-space:nowrap;cursor:pointer;flex:none;order:40;
 transition:background .15s,border-color .15s;
}
.jl-eco-topbar .jl-eco-feedback:hover{background:rgba(36,161,195,.23);border-color:#85dfed;}
.jl-eco-topbar .jl-eco-feedback svg{width:17px;height:17px;flex:none;}
@media(max-width:1350px){.jl-eco-topbar .jl-eco-feedback{width:40px;padding:7px;}.jl-eco-topbar .jl-eco-feedback span{display:none;}}
@media(max-width:520px){.jl-eco-topbar .jl-eco-feedback{display:none;}}
@media(min-width:521px){.jl-eco-topbar .jl-eco-feedback-mobile{display:none!important;}}
html[data-theme="light"] .jl-eco-topbar .jl-eco-feedback{background:#e8f7fc;color:#166784;border-color:#9dcfdf;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-feedback:hover{background:#d7f1f8;border-color:#75bdd4;}

/* Tour pill: old Join the Journey-inspired treatment with a black center
   and tight JoeLearns multicolor glow. Same 40px height as theme / Feedback. */
.jl-eco-topbar .jl-eco-right .jl-eco-local{display:flex!important;align-items:center;justify-content:flex-end;gap:7px;}
.jl-eco-topbar .jl-eco-right .jl-eco-util-tour.jl-tour-glow{
 display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
 box-sizing:border-box;flex:none;height:40px;min-height:40px;min-width:40px;
 padding:8px 12px;border-radius:14px!important;border:2px solid transparent!important;
 background:linear-gradient(#03060d,#03060d) padding-box,conic-gradient(from 205deg,#5cd5ef,#7de6ba,#f9c56a,#be91ff,#5cd5ef) border-box!important;
 color:#f7faff!important;letter-spacing:.005em!important;line-height:1.3;
 box-shadow:0 0 6px rgba(78,202,240,.38),0 0 8px rgba(188,134,245,.26),inset 0 0 8px rgba(45,105,160,.15)!important;
 cursor:pointer;transition:filter .15s,box-shadow .15s;
}
.jl-eco-topbar .jl-eco-right .jl-eco-util-tour.jl-tour-glow:hover{
 filter:brightness(1.08);
 box-shadow:0 0 8px rgba(78,202,240,.52),0 0 12px rgba(188,134,245,.35),inset 0 0 9px rgba(45,105,160,.23)!important;
}
.jl-eco-topbar .jl-tour-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;}
.jl-eco-topbar .jl-tour-icon svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.jl-eco-topbar .jl-eco-feedback{height:40px;box-sizing:border-box;}
html[data-theme="light"] .jl-eco-topbar .jl-eco-right .jl-eco-util-tour.jl-tour-glow{
 color:#fff!important;background:linear-gradient(#03060d,#03060d) padding-box,conic-gradient(from 205deg,#5cd5ef,#7de6ba,#f9c56a,#be91ff,#5cd5ef) border-box!important;
}
@media(max-width:1350px){
 .jl-eco-topbar .jl-eco-right .jl-eco-util-tour.jl-tour-glow{font-size:0!important;width:40px;padding:7px;}
 .jl-eco-topbar .jl-eco-right .jl-eco-util-tour.jl-tour-glow :is(.labs-tour-label){display:none!important;}
}
@media(max-width:520px){
 .jl-eco-topbar .jl-eco-right .jl-eco-local{display:none!important;}
 .jl-eco-topbar .jl-eco-feedback{display:none!important;}
}