/* ============================================================================
   PROTOTYPE CONSOLE  ·  prototype-only scaffolding (not product chrome)
   A single docked bar pinned above the app that surfaces every variation the
   current page supports — persona, page state, source, lifecycle, alternate
   versions — as on/off switches. Built by js/proto-console.js from each page's
   window.PROTO_CONSOLE config. Visually distinct (dark, mono) so it reads as
   review scaffolding, never as part of the product UI.
   ============================================================================ */

:root {
  --proto-h: 46px;
  --proto-bg: #0F1726;
  --proto-bg-2: #16213A;
  --proto-line: #2A3548;
  --proto-ink: #C8D3E5;
  --proto-ink-dim: #8595AE;
  --proto-accent: #2EA4C0;      /* teal-leaning so it never reads as a product CTA */
  --proto-accent-2: #0762AD;
}

/* ---- layout integration : push the app shell below the bar ---- */
body.proto-on { --proto-pad: var(--proto-h); }
body.proto-on .app {
  height: calc(100vh - var(--proto-h));
  margin-top: var(--proto-h);
}
/* React-mounted shells render .app inside a root div — the rule above still
   catches them. Containers themselves stay untouched. */

/* hide every legacy in-page demo switcher — the console replaces them all */
#demoToggle,
.state-switch,
.bw-demo { display: none !important; }

/* ============================ THE BAR ============================ */
.proto-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--proto-h);
  z-index: 3000;
  display: flex;
  align-items: stretch;
  background: var(--proto-bg);
  border-bottom: 1px solid #000;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  font-family: var(--sd-mono, "JetBrains Mono", ui-monospace, monospace);
  color: var(--proto-ink);
  user-select: none;
}
body:not(.proto-on) .proto-bar { display: none; }

/* left identity block */
.proto-bar__brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px 0 16px;
  border-right: 1px solid var(--proto-line);
  flex-shrink: 0;
}
.proto-bar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--proto-accent);
  box-shadow: 0 0 0 3px rgba(46,164,192,.22);
  flex-shrink: 0;
}
.proto-bar__brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.proto-bar__caps {
  font-size: 9.5px; letter-spacing: .14em; font-weight: 600;
  color: var(--proto-ink-dim); text-transform: uppercase;
}
.proto-bar__page {
  font-size: 11px; font-weight: 500; color: #fff;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* scrollable axis track */
.proto-bar__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--proto-line) transparent;
}
.proto-bar__track::-webkit-scrollbar { height: 5px; }
.proto-bar__track::-webkit-scrollbar-thumb { background: var(--proto-line); border-radius: 999px; }
.proto-bar__track::-webkit-scrollbar-track { background: transparent; }

/* one axis = label + segmented control */
.proto-axis {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  height: 100%;
  border-right: 1px solid var(--proto-line);
  flex-shrink: 0;
}
.proto-axis__label {
  font-size: 9.5px; letter-spacing: .12em; font-weight: 600;
  color: var(--proto-ink-dim); text-transform: uppercase;
  white-space: nowrap;
}
.proto-axis--version .proto-axis__label { color: var(--proto-accent); }

/* segmented control */
.proto-seg {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--proto-line);
  border-radius: 6px;
  padding: 2px;
}
.proto-seg__btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--proto-ink);
  font: inherit;
  font-size: 11px; font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.proto-seg__btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.proto-seg__btn.is-on {
  background: var(--proto-accent);
  color: #06222B;
  font-weight: 600;
}
.proto-axis--version .proto-seg__btn.is-on { background: var(--proto-accent); color: #06222B; }
.proto-seg__btn:focus-visible { outline: 2px solid var(--proto-accent); outline-offset: 1px; }

/* tiny status dot inside a chip */
.proto-seg__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* dropdown variant for axes with many options */
.proto-select {
  appearance: none;
  background: rgba(255,255,255,.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238595AE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
  border: 1px solid var(--proto-line);
  border-radius: 6px;
  color: #fff;
  font: inherit; font-size: 11px; font-weight: 500;
  padding: 6px 26px 6px 10px;
  cursor: pointer;
}
.proto-select:focus-visible { outline: 2px solid var(--proto-accent); outline-offset: 1px; }
.proto-select option { background: var(--proto-bg-2); color: #fff; }

/* right-side utilities */
.proto-bar__utils {
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px 0 12px;
  border-left: 1px solid var(--proto-line);
  flex-shrink: 0;
}
.proto-util {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--proto-ink-dim);
  font: inherit; font-size: 10px; letter-spacing: .04em; font-weight: 500;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.proto-util:hover { background: rgba(255,255,255,.07); color: #fff; }
.proto-util svg { width: 13px; height: 13px; }
.proto-util--reset:hover { color: #FFD27A; }

/* ============================ COLLAPSED PILL ============================ */
.proto-pill {
  position: fixed;
  left: 14px; bottom: 14px;
  z-index: 3000;
  display: none;
  align-items: center; gap: 7px;
  background: var(--proto-bg);
  color: var(--proto-ink);
  border: 1px solid var(--proto-line);
  border-radius: 999px;
  padding: 8px 13px;
  font-family: var(--sd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .07em; font-weight: 500; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15,23,38,.32);
  transition: background 120ms ease, color 120ms ease;
}
.proto-pill:hover { background: var(--proto-bg-2); color: #fff; }
.proto-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--proto-accent);
  box-shadow: 0 0 0 3px rgba(46,164,192,.22);
}
body:not(.proto-on) .proto-pill { display: inline-flex; }

/* keep the live scenario summary subtle inside the pill */
.proto-pill__count {
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9.5px;
}

/* ============================ PRINT / CLEAN ============================ */
@media print {
  .proto-bar, .proto-pill { display: none !important; }
  body.proto-on .app { height: 100vh; margin-top: 0; }
}

/* narrow viewport: tighten paddings */
@media (max-width: 900px) {
  .proto-bar__page { max-width: 120px; }
  .proto-axis { padding: 0 10px; gap: 6px; }
}