/* Configure & Publish wizard — design tokens from Dan's approved screens (EON Universal family).
   Law (SPEC A §3): fixed 1920x1080 stage, scaled to fit; every grid child min-width/height 0. */
:root{
  --bg:#010F1E; --side:#0A1626; --card:#061929; --card2:#0A2136; --line:#1E293B; --line2:#28405e;
  --text:#E2E8F0; --mute:#94A3B8; --blue:#2068EE; --cyan:#2AE7FF; --green:#1FC45C; --green-dim:#0e5c2e;
  --amber:#E0A030; --red:#E5484D; --font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);height:100%;overflow:hidden;font-family:var(--font);color:var(--text)}
#stage{position:fixed;width:1920px;height:1080px;left:50%;top:50%;transform-origin:center;background:var(--bg);display:flex}
/* sidebar */
.sidebar{width:252px;height:100%;background:var(--side);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.logo .cube{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,#2068EE,#2AE7FF);display:flex;align-items:center;justify-content:center;font-weight:800;color:#03101f;font-size:18px}
.logo .nm{font-size:19px;font-weight:800;letter-spacing:.4px;line-height:1.05}
.logo .nm small{display:block;font-size:10px;font-weight:600;color:var(--mute);letter-spacing:2px}
.navhead{font-size:11px;letter-spacing:2px;color:var(--mute);font-weight:700;margin:14px 8px 8px}
.nav{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:14.5px;padding:9px 10px;border-radius:9px;cursor:default}
.nav.active{background:rgba(32,104,238,.16);color:var(--cyan);font-weight:600;border-left:3px solid var(--cyan)}
.nav .ic{width:18px;text-align:center;opacity:.9}
.side-bottom{margin-top:auto;color:var(--mute);font-size:12.5px;display:flex;flex-direction:column;gap:12px;padding:0 8px}
/* main + rail */
.main{flex:1;height:1080px;overflow:hidden;padding:18px 30px 24px;display:flex;flex-direction:column;min-width:0}
.rail{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#04182b;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--mute);white-space:nowrap}
.pill .dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:#12233b;color:var(--mute)}
.pill.done{border-color:rgba(31,196,92,.4);color:var(--text)}
.pill.done .dot{background:var(--green);color:#03210f}
.pill.now{background:var(--blue);border-color:var(--blue);color:#fff}
.pill.now .dot{background:#fff;color:var(--blue)}
.rail .arrow{color:var(--mute);font-size:15px}
.rail .arrow.g{color:var(--green)}
/* step header */
.stephead{display:flex;align-items:flex-start;gap:16px;margin:4px 0 14px}
.stepnum{width:52px;height:52px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0}
.steptitle{font-size:34px;font-weight:800;letter-spacing:.5px}
.stepq{color:var(--cyan);font-style:italic;font-size:17px;margin-top:2px}
/* cards + layout */
.row{display:flex;gap:18px;flex:1;min-height:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0;min-height:0}
.card h4{font-size:15px;font-weight:700;letter-spacing:.4px;margin-bottom:12px}
.wtd{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.wtd .item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text)}
.wtd .item .ic{width:34px;height:34px;border-radius:50%;background:#0c2440;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cyan)}
/* buttons */
.btn{border:none;border-radius:10px;padding:12px 22px;font-size:16px;font-weight:800;cursor:pointer;font-family:var(--font)}
.btn.big{font-size:22px;padding:18px 30px;border-radius:12px;width:100%}
.btn.green{background:var(--green);color:#03210f}
.btn.blue{background:var(--blue);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.ghostb{background:transparent;border:1px solid var(--line2);color:var(--text)}
.btn:disabled{background:#132539;color:var(--mute);cursor:not-allowed}
.gate{display:flex;align-items:center;gap:10px;border:1px solid var(--green);color:var(--green);border-radius:10px;padding:14px 20px;font-weight:800;font-size:17px;background:rgba(31,196,92,.07)}
.footer{display:flex;gap:16px;align-items:stretch;margin-top:14px}
.footer .btn.big{flex:1}
/* chips + lists */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:4px 11px;font-size:12.5px;font-weight:700}
.chip.g{background:rgba(31,196,92,.14);color:var(--green)}
.chip.a{background:rgba(224,160,48,.14);color:var(--amber)}
.chip.grey{background:#132539;color:var(--mute)}
.chip.r{background:rgba(229,72,77,.14);color:var(--red)}
.listrow{display:flex;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid rgba(30,41,59,.6);font-size:15px}
.listrow:last-child{border-bottom:none}
.ok{width:22px;height:22px;border-radius:50%;background:var(--green);color:#03210f;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex-shrink:0}
.viewport{position:relative;background:#03101d;border:1px solid var(--line);border-radius:14px;overflow:hidden;flex:1;min-width:0}
/* F2 — the caption is no longer painted ON the picture. CP.layout lifts every .note out of the
   picture box and folds it into the strip BELOW, so this rule only ever styles a note that has
   not been lifted yet (a page that never calls CP.shell). It is flow, not overlay, either way. */
.viewport .note{background:rgba(2,10,20,.78);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--mute);max-width:460px}
/* F3 — THE 3-D WINDOW FITS THE HOLE IT IS GIVEN.
   What was here: a 1920x1080 iframe scaled 1.28 and dragged up and left, to crop the embedded
   page's own chrome out of view. Measured on the live site at 1440x900 it drew 1843x1037 inside a
   654x596 hole on DRESS and a 638x364 hole on CONNECT — 80% and 88% of the machine painted outside
   the window Dan can see, which is exactly his "the viewport is to the right". The crop is not
   needed: ?embed=1 returns the viewport alone (EonFacilityPage.tsx line 1746), so the iframe can
   simply fill its box and the machine stays inside it at every window size. */
.viewport iframe,.ghost iframe{position:absolute;inset:0;border:0;width:100%;height:100%;transform:none}
/* F4 — ONE full-screen button, in a fixed corner of the picture, on every step. It calls
   requestFullscreen() on the picture box itself, so it does not depend on the embedded page. */
.picbox{position:relative}
/* BOTTOM-right, not top-right: the embedded window puts its own ANNOTATIONS control in the top
   right corner and the two were drawn on top of each other. */
.fsbtn{position:absolute;right:12px;bottom:12px;z-index:9;background:rgba(2,10,20,.86);border:1px solid var(--line2);color:var(--text);
  border-radius:7px;padding:6px 11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:800;letter-spacing:.5px;cursor:pointer}
.fsbtn:hover{border-color:var(--cyan);color:var(--cyan)}
/* PUBLISH's control hangs off the release-package panel rather than a 3-D window, and that panel
   lives inside a fold whose body scrolls. Bottom-anchored, the button sat below the fold's own
   scroll line: visible to code, unreachable by a mouse. Top of the panel, where opening the fold
   puts it straight under the reader's eye. */
.picbox:not(.viewport):not(.ghost) .fsbtn{top:8px;bottom:auto}
.picbox:fullscreen{border-radius:0}
.picbox:fullscreen iframe,.picbox:fullscreen canvas{width:100%;height:100%}
/* F1 — THE FOLD. One line at rest, everything one click away, nothing deleted.
   The strip lives BELOW the picture and never over it; an open fold grows the strip and the
   picture shrinks to make room, which is a choice the reader made rather than one we made. */
.foldstrip{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin-top:12px;flex:0 0 auto;max-height:46%;overflow-y:auto}
.fold{background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:0;flex:0 1 auto;max-width:100%;padding:0;margin:0;height:auto;min-height:0}
.fold[data-open="1"]{flex:1 1 100%;border-color:var(--line2)}
.foldhead{display:flex;align-items:baseline;gap:8px;padding:7px 12px;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:9px}
.foldhead:hover,.foldhead:focus-visible{background:rgba(32,104,238,.14);outline:none;box-shadow:inset 0 0 0 1px var(--line2)}
.foldlabel{letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis}
.foldwarn{color:var(--amber);font-weight:800;font-size:12px;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.foldmore{color:var(--mute);font-weight:600;font-size:11.5px;margin-left:auto;flex:0 0 auto}
.foldbody{padding:2px 14px 12px;max-height:34vh;overflow:auto}
.foldbody .note{display:block;background:transparent;border:0;padding:0;max-width:none;font-size:12.5px;color:var(--mute);line-height:1.55}
.fold[data-warn="1"]{border-color:rgba(224,160,48,.45)}
.folded{border:0 !important;background:transparent !important;padding:0 !important;margin:0 !important}
.foldbody[hidden]{display:none}
[hidden]{display:none !important}
/* read by a screen reader, drawn nowhere — and 1px means the words-on-screen measurement
   (which ignores anything under 4px) does not count it either. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a caption or moat chip that has been lifted off the picture is in normal flow now */
.foldbody .lifted{position:static;transform:none;background:transparent;border:0;padding:0;max-width:none;white-space:normal;left:auto;bottom:auto}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0a2a18;border:1px solid var(--green);color:var(--green);padding:11px 20px;border-radius:10px;font-weight:700;z-index:99;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}
.muted{color:var(--mute)} .small{font-size:12.5px} .amber{color:var(--amber)} .cyanT{color:var(--cyan)} .greenT{color:var(--green)}