/* ==========================================================================
   Prototype shell: the one information bar every external-tab prototype shares.
   It sits first in <body>, stays at the top while the prototype scrolls, and may wrap to
   two lines on narrow screens. shell.js publishes its live height as --pshell-h on <html>,
   so a prototype's own sticky navigation uses top: var(--pshell-h, 0px) and always clears it.
   Designed by Venu colors and the orange dot, so it reads as the portfolio speaking, not as part of
   the product. Two variants, chosen by the demo's dominant surface so the bar always stands apart:
     .pshell               light demo screen → dark banner (the site's dark-theme navy)
     .pshell.pshell--light dark demo screen  → light banner (the site's light-theme surface)
   The palette lives in local --pshell-* properties (set once per variant below), so the shell stands
   alone: prototypes do not load the site's tokens.css. Hidden when the prototype is embedded.
   ========================================================================== */

/* Light demo screen → dark banner: the site's dark-theme navy, ink and sky accent */
.pshell {
  --pshell-bg: #0a0f1a;
  --pshell-ink: #e7eaf0;
  --pshell-note: #c3cad6;
  --pshell-strong: #fff;
  --pshell-line: #1f3a5f;
  --pshell-btn-line: #33557f;
  --pshell-hover-line: #38bdf8;
  --pshell-hover-ink: #fff;
  --pshell-focus: #38bdf8;
  --pshell-dot: #e8501a;
}
/* Dark demo screen → light banner: the site's light-theme surface, ink and sky accent (all AA on #eef6fb) */
.pshell--light {
  --pshell-bg: #eef6fb;
  --pshell-ink: #15181e;
  --pshell-note: #4a5162;
  --pshell-strong: #15181e;
  --pshell-line: #9aafc0;
  --pshell-btn-line: #9aafc0;
  --pshell-hover-line: #0369a1;
  --pshell-hover-ink: #0369a1;
  --pshell-focus: #0369a1;
}

.pshell {
  position: sticky;
  top: 0;
  z-index: 2147483000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 8px 16px;
  background: var(--pshell-bg);
  color: var(--pshell-ink);
  border-bottom: 1px solid var(--pshell-line);
  font: 500 13px/1.4 Satoshi, Inter, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  letter-spacing: 0;
  text-align: left;
}
.pshell *,
.pshell *::before,
.pshell *::after {
  box-sizing: border-box;
}
.pshell__note {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  color: var(--pshell-note);
}
.pshell__note::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--pshell-dot);
  vertical-align: 1px;
}
.pshell__note b {
  color: var(--pshell-strong);
  font-weight: 700;
}
.pshell__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pshell__btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--pshell-btn-line);
  border-radius: 999px;
  background: transparent;
  color: var(--pshell-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pshell__btn:hover {
  border-color: var(--pshell-hover-line);
  color: var(--pshell-hover-ink);
}
.pshell__btn:focus-visible {
  outline: 2px solid var(--pshell-focus);
  outline-offset: 2px;
}
html.pshell-embedded .pshell {
  display: none;
}
@media (max-width: 640px) {
  .pshell {
    padding: 8px 12px;
  }
  .pshell__tools {
    margin-left: 0;
  }
}