/* Lab, Nets & Studio layout */
#screen-lab, #screen-nets, #screen-studio { display: none; }
#screen-lab.active, #screen-nets.active, #screen-studio.active { display: flex; }

#lab-tools, #net-tools, #st-tools {
  width: 250px; min-width: 250px; padding: 14px; overflow-y: auto;
  background: linear-gradient(180deg, #121624, #0e1119);
  border-right: 1px solid var(--line);
}
#lab-stage, #net-stage, #st-stage { flex: 1; position: relative; min-width: 0; }
.poly-canvas { display: block; position: absolute; inset: 0; }

#lab-info, #st-info {
  width: 320px; min-width: 320px; overflow-y: auto; padding: 18px;
  background: linear-gradient(180deg, #121624, #0e1119);
  border-left: 1px solid var(--line);
}
#net-side { width: 300px; min-width: 300px; overflow-y: auto; padding: 16px; background: #10131d; border-left: 1px solid var(--line); }

#lab-local {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  background: #10141fdd; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; max-width: 340px;
  opacity: 0; transform: translateY(-6px); transition: all .2s; pointer-events: none;
}
#lab-local.show { opacity: 1; transform: none; }
#lab-local .lk { color: var(--acc); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-right: 6px; }

/* fullscreen showpiece mode: chrome hidden, edge-hover reveals panels */
#screen-lab.fs-mode { position: fixed !important; inset: 0; z-index: 40; background: #05070c; }
#screen-lab.fs-mode #lab-tools,
#screen-lab.fs-mode #lab-info {
  position: absolute; top: 0; bottom: 0; z-index: 45;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 40px #000c;
}
#screen-lab.fs-mode #lab-tools { left: 0; transform: translateX(-105%); }
#screen-lab.fs-mode #lab-info { right: 0; transform: translateX(105%); }
#screen-lab.fs-mode.fs-tools #lab-tools { transform: translateX(0); }
#screen-lab.fs-mode.fs-info #lab-info { transform: translateX(0); }
#screen-lab.fs-mode #lab-stage { position: absolute; inset: 0; }
.fs-set { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); margin-top: 4px; }
.fs-set input { flex: 1; }

#state-row { margin-bottom: 4px; }
#state-row button { font-weight: 600; }
#btn-reset-shape { border-color: #3a6a4a; color: #a5e0b0; }
#btn-reset-shape:hover { background: #1a2e20; }
#sel-component { width: 100%; margin-top: 6px; border-color: var(--acc2); }
#palette { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.swatch { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #0006; padding: 0; flex: 0 0 auto; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--acc); }
#sel-palette, #sel-nesting, #net-solid, #st-family, #st-base { width: 100%; margin-top: 6px; margin-bottom: 8px; }

/* info panel typography */
.ip-name { font-size: 21px; font-weight: 650; line-height: 1.2; }
.ip-alt { color: var(--tx2); font-size: 13px; margin-top: 2px; }
.ip-pron { color: var(--gold); font-size: 13.5px; margin-top: 6px; }
.ip-family { color: var(--tx1); font-size: 13.5px; margin-top: 8px; }
.ip-family.ip-hit { color: var(--good); font-size: 15px; }
.tag-delta { color: var(--good); }
.tag-chiral { color: var(--acc2); }
.ip-vef { display: flex; gap: 14px; margin-top: 14px; font-size: 14px; color: var(--tx1); }
.ip-vef b { color: var(--tx0); font-size: 17px; }
.ip-sec { color: var(--tx2); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin: 16px 0 4px; }
.ip-val { font-size: 13.5px; color: var(--tx1); }
.ip-val b { color: var(--tx0); }
.ip-dih { max-height: 130px; overflow-y: auto; }
.ip-val .dim { color: var(--tx2); }
.ip-chips { margin-top: 2px; }
.ip-euler { margin-top: 14px; padding: 8px 12px; border-radius: 8px; background: #16233016; border: 1px solid var(--line); font-size: 13.5px; }
.ip-euler.ok { border-color: #8fd18a55; color: var(--good); }
.ip-euler.star { border-color: #e8d47755; color: var(--gold); }
.ip-list { padding-left: 18px; font-size: 13.5px; color: var(--tx1); }
.ip-list li { margin: 4px 0; }
a.ip-dual, .ip-val a { color: var(--acc); text-decoration: none; }
a.ip-dual:hover, .ip-val a:hover { text-decoration: underline; }
.ip-note { margin-top: 10px; color: var(--acc2); font-size: 12.5px; }

#net-status, #st-status { margin-top: 14px; font-size: 13px; color: var(--tx1); line-height: 1.5; min-height: 50px; }
#net-status .good, #st-status .good { color: var(--good); }
#net-status .bad, #st-status .bad { color: var(--bad); }

/* fullscreen escape hatch: auto-fading, reappears on any tap */
#fs-bar {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 40; display: none; gap: 10px; opacity: 0; transition: opacity .4s; pointer-events: none;
}
.fs-mode #fs-bar { display: flex; }
#fs-bar.show { opacity: 0.85; pointer-events: auto; }
#fs-bar button { min-width: 46px; min-height: 46px; font-size: 18px; border-radius: 12px; background: #0b0e14cc; }
/* the idle-spin countdown: a quiet line that makes the "delay" slider
   self-explanatory — visible only in fs-mode while waiting for idle */
#fs-count {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%);
  color: var(--tx2); font-size: 12.5px; letter-spacing: 1.5px;
  opacity: 0; transition: opacity .35s; pointer-events: none; display: none; z-index: 46;
}
.fs-mode #fs-count { display: block; }
#fs-count.show { opacity: 0.8; }

/* fs "delay" while Auto-spin is on: the wait it gates doesn't exist, so the
   row dims and its title says why (see syncUI) — a live control must never
   silently do nothing */
.fs-set.dim-row { opacity: 0.45; }