/* Shared left nav drawer — one menu, identical on every showcase surface
   (workshop, demo portal, hosted app pages). Injected by nav-drawer.js. */

.nav-burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 34px; height: 34px; flex: none;
  background: none; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: #f0f4fa; border-radius: 2px; }
.nav-burger:hover { background: rgba(255,255,255,0.06); }
.nav-burger:focus-visible { outline: 2px solid #4a7dff; outline-offset: 2px; }

.nav-scrim[hidden], .nav-drawer[hidden] { display: none; }

/* Account block in the drawer foot (pages without their own account chip). */
.nav-acct { padding: 12px 18px 6px; border-top: 1px solid rgba(122,167,255,0.14); }
.nav-acct-row { display: flex; align-items: center; gap: 9px; font: 600 12.5px/1.3 'JetBrains Mono', monospace; color: rgba(240,244,250,0.7); }
.nav-acct-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(240,244,250,0.3); flex-shrink: 0; }
.nav-acct-row.is-connected .nav-acct-dot { background: #58d0c6; box-shadow: 0 0 0 3px rgba(88,208,198,0.18); }
.nav-acct-space { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0f4fa; }
.nav-acct-manage { margin-left: auto; background: none; border: 1px solid rgba(122,167,255,0.3); border-radius: 7px; color: rgba(240,244,250,0.75); font: 600 11px/1 'JetBrains Mono', monospace; padding: 6px 10px; cursor: pointer; }
.nav-acct-manage:hover { border-color: #58d0c6; color: #f0f4fa; }
.nav-acct-login { display: block; width: 100%; margin-top: 10px; background: #044EF4; color: #fff; border: 0; border-radius: 9px; padding: 11px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.nav-acct-login:hover { background: #0a5bff; }
.nav-acct-signup { display: block; margin-top: 8px; font-size: 12px; color: rgba(240,244,250,0.55); text-decoration: none; }
.nav-acct-signup:hover { color: #58d0c6; }
/* Above every header layer, including the z-110 status strip. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 115;
  background: rgba(4,6,10,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 292px; z-index: 120;
  display: flex; flex-direction: column;
  background: #0c0f16; border-right: 1px solid rgba(122,167,255,0.16);
  padding: 14px 0;
  color: #f0f4fa;
  font-family: inherit;
}
.nav-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 18px 14px; border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #f0f4fa; font-weight: 600; font-size: 14px;
}
.nav-drawer-head img { width: 22px; height: 22px; object-fit: contain; }
.nav-drawer-close {
  background: none; border: 0; color: #f0f4fa; font-size: 22px;
  width: 34px; height: 34px; cursor: pointer; border-radius: 8px; line-height: 1;
}
.nav-drawer-close:hover { background: rgba(255,255,255,0.06); }
.nav-drawer-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.nav-drawer-group { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; }
.nav-drawer-demo {
  display: flex; align-items: center; gap: 10px;
  color: rgba(240,244,250,0.78); text-decoration: none;
  font-size: 13.5px; padding: 8px 12px; border-radius: 8px;
}
.nav-drawer-demo:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-drawer-demo.active { background: rgba(122,167,255,0.12); color: #fff; }
.nav-drawer-demo.is-disabled { opacity: 0.55; cursor: default; flex-wrap: wrap; }
.nav-drawer-demo.is-disabled small { flex-basis: 100%; color: rgba(240,244,250,0.45); font-size: 11px; padding-left: 28px; }
.nav-thumb { font-size: 16px; flex: none; width: 18px; text-align: center; }
.nav-badge {
  margin-left: auto; flex: none; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: #40E0D0; background: rgba(64,224,208,0.14);
  border: 1px solid rgba(64,224,208,0.35); border-radius: 999px; padding: 3px 8px;
}
.nav-drawer-eyebrow {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(240,244,250,0.4); padding: 0 12px 6px;
}
.nav-drawer-group a, .nav-drawer-group button {
  display: block; text-align: left; background: none; border: 0; cursor: pointer;
  color: rgba(240,244,250,0.78); text-decoration: none;
  font-size: 14px; padding: 9px 12px; border-radius: 8px; font-family: inherit;
}
.nav-drawer-group a:hover, .nav-drawer-group button:hover {
  background: rgba(255,255,255,0.06); color: #fff;
}
.nav-drawer-group a.active {
  background: rgba(122,167,255,0.12); color: #fff;
}
.nav-drawer-links { border-top: 1px solid rgba(255,255,255,0.08); }
.nav-drawer-links a { font-size: 13px; color: rgba(240,244,250,0.6); }
.nav-drawer-foot {
  margin-top: auto; padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 10px;
}

/* The workshop's account chip lives inside the drawer foot: same element and
   ids its JS already drives, restyled from floating pill to a full-width row,
   with its dropdown flowing in place instead of anchoring to the header. */
.nav-drawer-foot .acct-chip-wrap { margin-left: 0; position: static; width: 100%; }
.nav-drawer-foot .acct-chip { width: 100%; justify-content: flex-start; }
.nav-drawer-foot .acct-menu {
  position: static; margin-top: 8px; width: 100%;
  box-shadow: none;
}