/* ZKCAP v1 — Runtime system: lab toolbar, viewport simulator, hosts, toasts */

body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Lab toolbar (engineering tool — visually separated) ---------- */
#lab-root {
  font-family: var(--font-mono);
  font-size: 12px;
  background: #10131a;
  color: #aab3c5;
  border-bottom: 1px solid #2c3342;
  z-index: 100;
  position: sticky; top: 0;
}
.lab-bar { display: flex; align-items: center; gap: 14px; padding: 7px 14px; flex-wrap: wrap; }
.lab-brand { color: #e2b96a; letter-spacing: 0.14em; font-size: 10.5px; text-transform: uppercase; white-space: nowrap; }
.lab-brand b { color: #7f8aa0; font-weight: 400; }
.lab-group { display: flex; align-items: center; gap: 6px; }
.lab-group label { color: #5f6a80; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.lab-bar select, .lab-bar button, .lab-bar input[type="checkbox"] {
  font-family: var(--font-mono); font-size: 12px;
  background: #1a1f2b; color: #cdd5e4;
  border: 1px solid #333b4d; border-radius: 3px;
  padding: 4px 8px;
}
.lab-bar select:hover, .lab-bar button:hover { border-color: #e2b96a; }
.lab-bar button { cursor: pointer; }
.lab-bar button.is-on { background: #e2b96a; color: #10131a; border-color: #e2b96a; }
.lab-route {
  background: #0a0d13; border: 1px solid #2c3342; border-radius: 3px;
  padding: 4px 10px; color: #7fd1a7; max-width: 46vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.lab-spacer { flex: 1; }
.lab-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.lab-check input { accent-color: #e2b96a; }
.lab-report {
  border-top: 1px solid #2c3342; background: #0a0d13;
  padding: 10px 14px; max-height: 200px; overflow: auto;
  display: grid; gap: 4px; color: #9aa4b8;
}
.lab-report .pass { color: #7fd1a7; }
.lab-report .fail { color: #e28a7a; }
.lab-report .rep-head { color: #e2b96a; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; margin-bottom: 4px; }

/* ---------- Viewport frame ---------- */
#viewport-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
  min-height: 60vh;
  container-type: inline-size;
  container-name: zapp;
  overflow: clip;
}
#viewport-frame[data-vp="390"]  { width: 390px;  box-shadow: 0 0 0 1px #2c3342, 0 18px 60px rgba(0,0,0,0.5); min-height: 844px; }
#viewport-frame[data-vp="768"]  { width: 768px;  box-shadow: 0 0 0 1px #2c3342, 0 18px 60px rgba(0,0,0,0.5); min-height: 1024px; }
#viewport-frame[data-vp="1440"] { width: 1440px; box-shadow: 0 0 0 1px #2c3342, 0 18px 60px rgba(0,0,0,0.5); }
#viewport-frame[data-vp="390"]::before,
#viewport-frame[data-vp="768"]::before,
#viewport-frame[data-vp="1440"]::before {
  content: attr(data-vp) "px · simulated";
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: #10131a; color: #e2b96a; text-align: center; padding: 4px;
}
body[data-vp-mode="sim"] { background: #0d1017; align-items: center; padding: 18px 0 60px; }

/* ---------- Render / overlay / toast hosts ---------- */
#render-host { min-height: 60vh; }
#overlay-host { position: absolute; inset: 0; z-index: 60; }
#overlay-host[hidden] { display: none; }

#toast-host {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 90; display: grid; gap: 8px; width: min(520px, 90%);
  pointer-events: none;
}
.toast {
  background: var(--navy-deep); color: #f0eade;
  border: 1px solid rgba(189,151,82,0.55); border-radius: var(--r-md);
  padding: 12px 18px; font-size: 0.88rem; text-align: center;
  box-shadow: var(--shadow-2);
  animation: toast-in 0.25s ease;
}
.toast .toast-kicker { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gilt-bright); margin-bottom: 3px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Render exception guard ---------- */
.runtime-error { margin: var(--s6) auto; max-width: 640px; }