/* KiwiBee core labs: shared page styles.
 *
 * Layout: setup panel | stage + insight bar | run panel. The side panels use the colours of the kiwibee.io
 * simulation page's own panels, so fullscreen (where the frame gets its controls back) looks like the page.
 * On a simulation page (`html[data-kb-host="offload"]`, see public/simulations/shared/kiwibee-host.js) the page draws
 * the controls in its own panels and this frame shows only the stage and the insight bar.
 */
@font-face{font-family:Nunito;src:url('/simulations/vendor/fonts/nunito-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('/simulations/vendor/fonts/nunito-800-latin.woff2') format('woff2');font-weight:800 900;font-display:swap}

*{box-sizing:border-box}
:root{
  color-scheme:light;
  --font:Nunito,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --page:#f4f1ea;
  --card:#ffffff;
  --ink:#182335;
  --muted:#5a6578;
  --line:#e3ded3;
  --accent:#2f9e44;
  --accent-soft:#e6f5e9;
  --accent-ink:#1f6f30;
  /* the simulation page's side panels */
  --side:#031c1b;
  --side-2:#08292a;
  --side-card:rgba(255,255,255,.055);
  --side-line:rgba(255,255,255,.12);
  --side-ink:#ffffff;
  --side-muted:rgba(255,255,255,.66);
  --mint:#5bd68a;
  --mint-ink:#06210f;
  --btn:#101f3d;
  --btn-line:#26406f;
  --btn-ink:#a9c4ff;
  --honey:#fbba06;
  --focus:#ffd34d;
  --radius:16px;
}
html,body{height:100%}
body{margin:0;background:var(--page);color:var(--ink);font:700 14px/1.45 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ frame */
.lab{display:grid;grid-template-columns:288px minmax(0,1fr) 288px;height:100vh;height:100dvh;min-height:420px}
.lab-side{background:var(--side);color:var(--side-ink);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent;padding:18px 16px 24px}
.lab-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--page);container-type:inline-size;container-name:labmain}
.lab-stage{position:relative;flex:1 1 auto;min-height:220px;overflow:hidden}
.lab-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
.lab-canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.lab-overlay{position:absolute;inset:0;pointer-events:none}
.lab-overlay>*{pointer-events:auto}

/* ------------------------------------------------------------------ insight bar (stays in the frame) */
.lab-insight{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;border-top:1px solid var(--line);background:var(--page)}
@container labmain (min-width:640px){.lab-insight{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}}
.lab-insight-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.lab-caption{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px 11px;border-inline-start:5px solid var(--accent);min-height:74px}
.lab-caption-k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);font-weight:900;margin-bottom:2px}
.lab-caption p{margin:0;font-size:15px;line-height:1.38;font-weight:800;color:var(--ink)}
.lab-caption p b{color:var(--accent-ink)}
.lab-tiles{display:grid;grid-template-columns:var(--cols,repeat(auto-fit,minmax(104px,1fr)));gap:8px}
@container labmain (max-width:500px){.lab-tiles[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-tiles[data-n="5"],.lab-tiles[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lab-tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:7px 10px 8px;min-width:0;display:flex;flex-direction:column;gap:1px}
.lab-tile-k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.lab-tile-k i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--accent));flex:none}
.lab-tile-v{font-size:19px;font-weight:900;line-height:22px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-tile-v small{font-size:12px;font-weight:800;color:var(--muted);margin-inline-start:3px}
.lab-tile[data-tone="good"] .lab-tile-v{color:#1f7a35}
.lab-tile[data-tone="warn"] .lab-tile-v{color:#a15c00}
.lab-tile[data-tone="bad"] .lab-tile-v{color:#b42318}
.lab-chart{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 10px 6px;min-width:0;display:flex;flex-direction:column;min-height:150px}
.lab-chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.lab-chart-title{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:900}
.lab-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;font-weight:800;color:var(--muted)}
.lab-legend span{display:inline-flex;align-items:center;gap:5px}
.lab-legend i{width:12px;height:3px;border-radius:2px;background:var(--c)}
/* The canvas gives up height when the legend wraps, so the chart box (and the stage above it) keeps its size. */
.lab-chart canvas{flex:1 1 auto;width:100%;min-height:88px;display:block}
@container labmain (max-width:639px){.lab-chart{min-height:128px}.lab-chart canvas{min-height:88px}}
@media (max-height:620px){.lab-chart{min-height:120px}.lab-chart canvas{min-height:80px}.lab-caption{min-height:0}}
html.lab-showcase .lab-side,html.lab-showcase .lab-insight{display:none!important}
html.lab-showcase .lab{display:block}html.lab-showcase .lab-main,html.lab-showcase .lab-stage{height:100vh}

/* ------------------------------------------------------------------ side panels (standalone, fullscreen, /embed) */
.lab-head{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.lab-eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);font-weight:900}
.lab-head h1{margin:0;font-size:21px;line-height:1.15;font-weight:900;letter-spacing:-.01em}
.lab-head p{margin:4px 0 0;color:var(--side-muted);font-size:13px;line-height:1.4;font-weight:700}
.lab-group{display:flex;flex-direction:column;gap:9px;margin:0 0 16px}
.lab-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-muted);font-weight:900;margin:2px 0 0}
.ctl-card{background:var(--side-card);border:1px solid var(--side-line);border-radius:14px;padding:10px 12px 11px}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ctl-name{font-size:14px;font-weight:800}
.ctl-value{font-size:12.5px;font-weight:900;background:rgba(255,255,255,.1);border-radius:8px;padding:2px 8px;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.ctl-hint{margin:6px 0 0;color:var(--side-muted);font-size:12px;line-height:1.35;font-weight:700}
.ctl-range{width:100%;margin:10px 0 2px;-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer}
.ctl-range:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:99px}
.ctl-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--mint) 0 var(--fill,50%),rgba(255,255,255,.16) var(--fill,50%) 100%)}
.ctl-range::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.16)}
.ctl-range::-moz-range-progress{height:6px;border-radius:99px;background:var(--mint)}
.ctl-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--mint);margin-top:-7px;box-shadow:0 2px 6px #0006}
.ctl-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--mint);box-shadow:0 2px 6px #0006}
.ctl-seg{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:6px}
.ctl-seg button{min-height:40px;border-radius:11px;border:1px solid var(--side-line);background:rgba(255,255,255,.04);color:var(--side-ink);font-size:13px;font-weight:800;padding:6px 8px;line-height:1.15;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.ctl-seg button:hover{background:rgba(255,255,255,.09)}
.ctl-seg button[aria-pressed="true"]{background:#e8f8ee;border-color:#e8f8ee;color:#06210f}
.ctl-seg button svg{width:18px;height:18px;flex:none}
.ctl-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;width:100%;border:1px solid var(--side-line);background:var(--side-card);border-radius:12px;padding:6px 10px 6px 12px;text-align:start;font-size:13.5px;font-weight:800}
.ctl-switch .dot{width:10px;height:10px;border-radius:50%;flex:none;margin-inline-end:8px}
.ctl-switch .nm{flex:1;display:flex;align-items:center;min-width:0}
.ctl-switch .tr{position:relative;width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.18);flex:none;transition:background .15s}
.ctl-switch .tr::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.ctl-switch[aria-checked="true"] .tr{background:var(--mint)}
.ctl-switch[aria-checked="true"] .tr::after{transform:translateX(16px)}
[dir="rtl"] .ctl-switch[aria-checked="true"] .tr::after{transform:translateX(-16px)}
.ctl-info{background:var(--side-card);border:1px solid var(--side-line);border-radius:12px;padding:9px 12px;font-size:13px;line-height:1.4;font-weight:700;color:#e9f1ef;white-space:pre-line}
.ctl-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ctl-btn{min-height:44px;border-radius:12px;border:1px solid var(--btn-line);background:var(--btn);color:var(--btn-ink);font-size:12.5px;font-weight:800;padding:6px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.15;text-align:center}
.ctl-btn:hover{background:#15295a}
.ctl-btn svg{width:17px;height:17px}
.ctl-btn[data-tone="honey"]{background:#2a2108;border-color:#6b5310;color:#ffd968}
.ctl-btn[data-tone="rose"]{background:#2d1020;border-color:#6d2747;color:#ffb3cf}
.ctl-btn[data-wide="true"]{grid-column:1/-1;flex-direction:row;gap:8px}
.ctl-play{width:100%;min-height:54px;border:0;border-radius:14px;background:var(--mint);color:var(--mint-ink);font-size:17px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 22px -12px #5bd68a}
.ctl-play:hover{filter:brightness(1.05)}
.ctl-play[data-paused="true"]{background:var(--mint)}
.ctl-play svg{width:20px;height:20px}
button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ------------------------------------------------------------------ smaller screens */
@media (max-width:1180px){
  .lab{grid-template-columns:262px minmax(0,1fr) 262px}
}
@media (max-width:900px){
  body{overflow:auto}
  .lab{display:flex;flex-direction:column;height:auto;min-height:100dvh}
  .lab-main{order:1}
  .lab-run{order:2;padding-bottom:12px}
  .lab-setup{order:3}
  .lab-stage{flex:none;height:min(72vh,560px)}
  .lab-side{overflow:visible}
}

/* ------------------------------------------------------------------ on a kiwibee.io simulation page: controls live in the page's panels */
html[data-kb-host="offload"] .lab{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0}
html[data-kb-host="offload"] .lab-main{flex:1 1 auto}
html[data-kb-host="offload"] .lab-stage{flex:1 1 auto;height:auto}
html[data-kb-host="offload"] body{overflow:hidden}
@media (max-width:640px){
  html[data-kb-host="offload"] .lab-insight{gap:8px;padding:8px}
  .lab-caption p{font-size:14px}
  .lab-tile-v{font-size:17px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}