/* Site chrome for hand-authored insight pages.
   Injected by layouts/insights/single.html. Fully self-contained and namespaced
   .ibar-* so it never collides with an insight's own CSS, whatever palette it uses. */

.ibar{
  position:sticky;
  top:0;
  z-index:2147483000;
  background:rgba(8,11,16,.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.4;
  color:#f3f6fb;
}
.ibar-in{
  width:min(1080px,calc(100% - 40px));
  margin:0 auto;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ibar-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;font-size:16px;letter-spacing:-.02em;
  color:#f3f6fb;text-decoration:none;
}
.ibar-brand img{
  width:28px;height:28px;border-radius:8px;display:block;object-fit:contain;
  background:linear-gradient(135deg,#eaf3fc,#cfe0ff);padding:3px;
}
.ibar-brand em{font-style:normal;color:#718096}
.ibar-nav{display:flex;align-items:center;gap:2px}
.ibar-nav a{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 13px;border-radius:10px;
  font-size:13.5px;font-weight:650;color:#9da8b8;
  text-decoration:none;border:1px solid transparent;
  transition:.18s ease;
}
.ibar-nav a:hover{color:#f3f6fb;background:rgba(255,255,255,.06)}
.ibar-nav a.active{color:#f3f6fb;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.09)}
.ibar-item{position:relative;display:flex}
.ibar-caret{width:9px;height:9px;flex:0 0 auto;opacity:.7;transition:transform .18s ease}
.ibar-item:hover .ibar-caret,.ibar-item:focus-within .ibar-caret{transform:rotate(180deg)}
.ibar-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:190px;
  padding:6px;display:flex;flex-direction:column;gap:2px;
  border-radius:12px;border:1px solid rgba(255,255,255,.09);
  background:rgba(12,16,23,.98);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* invisible bridge so the pointer can cross the gap to the menu */
.ibar-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ibar-item:hover .ibar-menu,.ibar-item:focus-within .ibar-menu{opacity:1;visibility:visible;transform:translateY(0)}
.ibar-ext{width:10px;height:10px;flex:0 0 auto;opacity:.55}

/* Mobile menu toggle. Pure CSS — the checkbox holds the state, the label is the
   button — so nothing has to be injected into an insight's own scripts. */
.ibar-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.ibar-burger{display:none}

@media (max-width:760px){
  .ibar-burger{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:42px;height:38px;flex:0 0 auto;
    border-radius:10px;border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.05);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .ibar-burger span{
    display:block;width:18px;height:2px;border-radius:2px;background:#f3f6fb;
    transition:transform .2s ease,opacity .15s ease;
  }
  .ibar-toggle:checked ~ .ibar-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .ibar-toggle:checked ~ .ibar-burger span:nth-child(2){opacity:0}
  .ibar-toggle:checked ~ .ibar-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .ibar-toggle:focus-visible ~ .ibar-burger{outline:2px solid #65e7ff;outline-offset:2px}

  .ibar-nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 14px 16px;
    /* Solid, not translucent: a backdrop-filter nested inside the bar's own
       blurred layer composites against an empty backdrop and shows the page. */
    background:#0b0e14;
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 18px 44px rgba(0,0,0,.5);
    max-height:calc(100dvh - 60px);overflow-y:auto;
  }
  .ibar-toggle:checked ~ .ibar-nav{display:flex}
  .ibar-nav a{padding:11px 14px;font-size:15px}

  .ibar-item{display:block}
  .ibar-caret{display:none}
  .ibar-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 0 14px;border:0;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:none;
  }
  .ibar-menu::before{display:none}
  .ibar-menu a{padding:10px 14px;font-size:14px}
}

@media (max-width:620px){
  .ibar-in{width:min(100% - 24px,1080px);height:54px}
  .ibar-nav{max-height:calc(100dvh - 54px)}
}