/* Lab Studio — compositor UI.
   A precision tool surface (Affinity/Unreal register): a clear elevation system,
   milled-metal panels, sunken wells, custom range/select controls, monospace
   numeric readouts. Builds on site.css tokens; everything here is scoped to .studio. */

.studio-body {
  overflow: hidden;
  /* studio-local elevation + control system */
  --s-workspace: #0a0c0d;
  --s-panel: #141719;          /* raised panel face */
  --s-panel-hi: rgba(255, 255, 255, 0.035); /* top bevel highlight */
  --s-head: #181c1f;           /* panel header / hover face */
  --s-well: #08090b;           /* sunken input well */
  --s-line: rgba(180, 204, 218, 0.12);
  --s-line-2: rgba(180, 204, 218, 0.20);
  --s-line-hot: var(--hud-line-hot);
  --s-tree: rgba(180, 204, 218, 0.28);   /* layer/filter bracket lines */
  --s-accent: var(--accent);
  --s-accent-dim: rgba(230, 242, 90, 0.14);
  --s-radius: 3px;
  --s-ctrl-h: 28px;
  --s-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --s-inset: inset 0 1px 0 var(--s-panel-hi);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  background:
    radial-gradient(130% 90% at 50% -10%, #101417 0%, #0a0b0c 62%, #070809 100%) fixed;
}

.studio {
  display: flex;
  flex-direction: column;
  /* dvh avoids the mobile-browser-chrome 100vh overflow bug; var keeps the nav offset honest */
  height: calc(100dvh - var(--studio-nav-h, 49px));
  padding: 10px var(--space) 12px;
  gap: 10px;
}

/* ---- shared panel material --------------------------------------------- */
.studio-toolbar,
.studio-rail,
.studio-inspector,
.studio-transport {
  background:
    linear-gradient(180deg, var(--s-panel-hi), transparent 64px),
    var(--s-panel);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-inset), var(--s-shadow);
}

/* ---- toolbar (chrome bar, single row) ----------------------------------- */
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 8px 12px;
  min-height: 46px;
}
.studio-toolbar__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* let the status ellipsize instead of overflowing the bar */
}
.studio-toolbar__end .studio-status {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-toolbar .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hud-text);
  font-family: "LazenbyCompLiquid", var(--font-display);
  letter-spacing: 0.04em;
  font-size: 20px;
  text-transform: capitalize;
}
.studio-toolbar .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--s-accent);
  box-shadow: 0 0 7px var(--s-accent), 0 0 1px var(--s-accent);
}
.studio-toolbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.studio-status {
  margin: 0; font-size: 11px; color: var(--hud-muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* ---- buttons: tighten site.css for a flat tool register ----------------- */
.studio .btn {
  min-height: 30px;
  border-radius: var(--s-radius);
  box-shadow: none;
  transition: filter .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.studio .btn:not(.btn--ghost):not(.btn--quiet) { box-shadow: var(--s-inset); } /* accent bevel */
.studio .btn--ghost {
  border-color: var(--s-line-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  color: var(--hud-text);
}
.studio .btn--ghost:hover { border-color: var(--s-line-hot); background: rgba(255,255,255,0.05); filter: none; }
.studio .btn--quiet { color: var(--hud-muted); }
.studio .btn--quiet:hover { color: var(--hud-text); background: rgba(255,255,255,0.04); }

/* compact icon buttons (undo/redo) */
.sf-icobtn { min-width: 32px; padding: 6px 8px; font-size: 15px; line-height: 1; }

/* ---- dropdown menus (Export, Add stage share one language) -------------- */
.sf-menu-wrap { position: relative; }
.sf-menu,
.sf-add-menu {
  display: none;
  position: absolute;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--s-line-2);
  border-radius: var(--s-radius);
  background:
    linear-gradient(180deg, var(--s-panel-hi), transparent 40px),
    var(--panel-raised);
  box-shadow: var(--s-inset), 0 20px 44px rgba(0,0,0,0.55);
  overflow: hidden;
  z-index: 30;
}
.sf-menu { top: calc(100% + 6px); right: 0; min-width: 200px; }
.sf-menu.is-open,
.sf-add-menu.is-open { display: flex; }
.sf-menu-item,
.sf-add-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 0; border-radius: 2px; background: none; color: var(--hud-text);
  font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer; text-align: left; transition: background .1s ease, color .1s ease;
}
.sf-menu-item:hover,
.sf-add-item:hover { background: var(--s-accent-dim); color: var(--text); }

/* ---- export: the button itself becomes the progress + cancel control ----
   Fixed width so "Export ▾" and "⏹ 99%" never resize the bar; the progress is a
   thin line on the button's bottom edge (absolute → never affects layout). */
#sf-export-btn { min-width: 104px; }   /* fits both "Export ▾" and "⏹ Cancel" → no reflow */
#sf-export-btn.is-exporting {
  position: relative; overflow: hidden;
  background: var(--panel-raised);
  color: var(--hud-text);
  border-color: var(--s-line-2);
  box-shadow: none;
  cursor: pointer;
}
#sf-export-btn.is-exporting:hover { color: var(--danger); }   /* hint: click cancels */
#sf-export-btn.is-exporting::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(var(--prog, 0) * 100%);
  background: var(--s-accent);
  transition: width .12s linear;
}

/* ---- focus -------------------------------------------------------------- */
.studio :focus-visible,
.sf-dialog :focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 1px;
  border-radius: 2px;
}
.studio input[type="range"]:focus-visible { outline: none; } /* thumb glow stands in */

/* ---- grid --------------------------------------------------------------- */
.studio-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 284px;
  gap: 10px;
}

/* ---- panes -------------------------------------------------------------- */
.studio-rail,
.studio-inspector {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.studio-pane-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--s-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
  color: var(--hud-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.studio-pane-head::before {
  content: ""; width: 3px; height: 11px; border-radius: 1px;
  background: var(--s-line-2);
}
.sf-rail, .sf-inspector { flex: 1; overflow-y: auto; padding: 9px; }
.sf-rail { display: flex; flex-direction: column; gap: 5px; }

/* thin precision scrollbars */
.sf-rail, .sf-inspector { scrollbar-width: thin; scrollbar-color: rgba(180,204,218,0.22) transparent; }
.sf-rail::-webkit-scrollbar, .sf-inspector::-webkit-scrollbar { width: 10px; }
.sf-rail::-webkit-scrollbar-thumb, .sf-inspector::-webkit-scrollbar-thumb {
  background: rgba(180,204,218,0.18); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
.sf-rail::-webkit-scrollbar-thumb:hover, .sf-inspector::-webkit-scrollbar-thumb:hover {
  background: rgba(180,204,218,0.3); background-clip: padding-box;
}

/* ---- stage / viewport --------------------------------------------------- */
.studio-stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
}
.sf-stage-view {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background:
    repeating-conic-gradient(rgba(255,255,255,0.022) 0% 25%, transparent 0% 50%) 50% / 18px 18px,
    var(--s-workspace);
  /* inner vignette so the artboard reads as lit from within the frame */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 90px rgba(0,0,0,0.5);
  overflow: auto;
}
/* scaled wrapper sized in JS; canvases fill it exactly so they always overlap */
.sf-canvas-stack {
  position: relative;
  flex: none;
  /* artboard frame: a crisp edge + cast shadow lifting it off the workspace */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 14px 50px rgba(0,0,0,0.55);
}
.sf-canvas-stack canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sf-overlay {
  pointer-events: none;
  touch-action: none;
  z-index: 2;
}
.sf-stage-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--hud-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.sf-stage-view.has-image .sf-stage-hint { display: none; }

/* floating overlay HUD (zoom) */
.sf-zoombar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid var(--s-line-2);
  border-radius: var(--s-radius);
  background: rgba(13, 16, 19, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--s-inset), 0 6px 18px rgba(0,0,0,0.45);
}
.sf-zb { min-height: 22px; padding: 2px 8px; font-size: 12px; }
.sf-zoom-val {
  min-width: 44px; text-align: center; color: var(--hud-text);
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* ---- transport ---------------------------------------------------------- */
.studio-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
}
.sf-play { min-width: 38px; }
.sf-scrub { flex: 1; }
.sf-tlabel {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hud-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
}
.sf-tlabel input { width: 50px; font-family: var(--font-mono); }

/* ---- rail stage cards --------------------------------------------------- */
.sf-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  cursor: grab;
  user-select: none;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.sf-stage:hover { border-color: var(--s-line-2); background: rgba(255,255,255,0.035); }
.sf-stage.is-sel {
  border-color: var(--s-line-hot);
  background: linear-gradient(180deg, rgba(230,242,90,0.10), rgba(230,242,90,0.03));
  box-shadow: inset 2px 0 0 var(--s-accent), 0 0 0 1px rgba(230,242,90,0.08);
}
.sf-stage.is-off { opacity: 0.42; }
.sf-stage.is-drag { opacity: 0.4; }
.sf-stage.is-over { border-color: var(--s-accent); box-shadow: 0 0 0 1px var(--s-accent-dim); }
.sf-grip { color: var(--dim); font-size: 12px; cursor: grab; letter-spacing: -2px; flex: none; }
.sf-stage:hover .sf-grip { color: var(--muted); }

/* ---- layer / filter hierarchy (terminal-tree brackets) ----------------- */
/* filters are modifiers of the layer below — render them lighter than layers */
.sf-stage.is-filter:not(.is-sel) { background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.004)); }
.sf-stage.is-filter .sf-stage-name { font-weight: 600; }
.sf-stage.is-filter .sf-ico { color: var(--hud-muted); }

/* indent: filters sit under their layer, the anchor layer keeps a shallow gutter */
.sf-stage.g-anchor { padding-left: 20px; }
.sf-stage.g-flt, .sf-stage.g-orphan { padding-left: 28px; }

/* spine (vertical) + tick (horizontal) drawn in the gutter at x≈11px */
.sf-stage.g-flt::before, .sf-stage.g-anchor::before {
  content: ""; position: absolute; left: 11px; width: 1px; background: var(--s-tree);
}
.sf-stage.g-top::before { top: 50%; bottom: -5px; }     /* spine starts here, bridges the 5px gap */
.sf-stage.g-mid::before { top: -5px; bottom: -5px; }
.sf-stage.g-anchor::before { top: -5px; bottom: 50%; } /* spine arrives, turns into the layer */
.sf-stage.g-flt::after, .sf-stage.g-anchor::after {
  content: ""; position: absolute; left: 11px; top: 50%; height: 1px; background: var(--s-tree);
}
.sf-stage.g-flt::after { width: 14px; }   /* spine → filter content */
.sf-stage.g-anchor::after { width: 7px; } /* spine → layer icon */

/* selecting any card in a group lights its whole bracket so the binding is obvious */
.sf-stage.g-hot::before, .sf-stage.g-hot::after { background: var(--s-accent); }

/* orphan filter: nothing below to bind to — dashed warning tick, dimmed */
.sf-stage.g-orphan { opacity: 0.66; }
.sf-stage.g-orphan::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--warning) 0 3px, transparent 3px 6px);
}
.sf-stage-main { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.sf-stage-name {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-ico { display: inline-grid; place-items: center; width: 16px; flex: none; color: var(--s-accent); }
.sf-kind {
  margin-left: auto; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.sf-eye, .sf-del {
  border: 0; background: none; color: var(--hud-muted); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; min-width: 24px; padding: 0;
  border-radius: 2px; transition: background .1s ease, color .1s ease;
}
.sf-eye:hover { color: var(--s-accent); background: rgba(255,255,255,0.05); }
.sf-del:hover { color: var(--danger); background: rgba(255,95,61,0.1); }
.sf-eye svg { display: block; }
.sf-eye.is-off { color: var(--dim); }

/* ---- add menu (anchored at rail bottom) -------------------------------- */
.sf-add { position: relative; padding: 8px 9px; border-top: 1px solid var(--s-line); }
.sf-add-btn { width: 100%; }
.sf-add-menu { left: 9px; right: 9px; bottom: 50px; }

/* ---- inspector fields --------------------------------------------------- */
.sf-field { margin-bottom: 11px; }
.sf-label {
  display: block; margin-bottom: 5px;
  color: var(--hud-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
}
.sf-inspector select,
.sf-inspector textarea,
.sf-inspector input[type="number"],
.sf-inspector input[type="url"] {
  width: 100%;
  min-height: var(--s-ctrl-h);
  padding: 6px 9px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: var(--s-well);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sf-inspector input[type="number"] { font-family: var(--font-mono); }
.sf-inspector select:hover,
.sf-inspector textarea:hover,
.sf-inspector input[type="number"]:hover { border-color: var(--s-line-2); }
.sf-inspector select:focus,
.sf-inspector textarea:focus,
.sf-inspector input[type="number"]:focus {
  outline: none; border-color: var(--s-line-hot);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 2px var(--s-accent-dim);
}
/* custom select chevron — no native arrow in a tool UI */
.sf-inspector select {
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f8b90' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 9px center,
    var(--s-well);
}
.sf-inspector input[type="color"] {
  width: 100%; height: 30px; padding: 2px;
  border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-well);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4); cursor: pointer;
}

/* ---- custom range sliders (the biggest tell of a real tool) ------------- */
.studio input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 16px; background: transparent; cursor: pointer;
}
.studio input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: var(--s-well);
  box-shadow: inset 0 0 0 1px var(--s-line), inset 0 1px 2px rgba(0,0,0,0.6);
}
.studio input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
  background: linear-gradient(180deg, #f3efe6, #c9c4b5);
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: box-shadow .1s ease, background .1s ease;
}
.studio input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--s-accent-dim), 0 1px 2px rgba(0,0,0,0.6);
}
.studio input[type="range"]:active::-webkit-slider-thumb,
.studio input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: linear-gradient(180deg, #eef85e, #b9c64a);
  box-shadow: 0 0 0 4px rgba(230,242,90,0.22), 0 1px 3px rgba(0,0,0,0.6);
}
.studio input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 999px; background: var(--s-well);
  box-shadow: inset 0 0 0 1px var(--s-line);
}
.studio input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--s-accent); }
.studio input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, #f3efe6, #c9c4b5); border: 1px solid rgba(0,0,0,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.sf-range-row { display: flex; align-items: center; gap: 9px; }
.sf-range-row input[type="range"] { flex: 1; }
.sf-value {
  min-width: 38px; text-align: right; color: var(--hud-text);
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* per-param animate toggle */
.sf-anim {
  flex: none; width: var(--s-ctrl-h); height: var(--s-ctrl-h); padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: var(--s-well); color: var(--hud-muted); cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  transition: color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.sf-anim svg { display: block; }
.sf-anim:hover { color: var(--hud-text); border-color: var(--s-line-hot); }
.sf-anim.is-on {
  border-color: var(--s-accent); color: var(--s-accent); background: var(--s-accent-dim);
  box-shadow: inset 0 0 0 1px rgba(230,242,90,0.25), 0 0 10px rgba(230,242,90,0.12);
}
.sf-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hud-text); }
.sf-check input { width: auto; accent-color: var(--s-accent); }
.sf-note { margin: 4px 0 12px; color: var(--dim); font-size: 11px; line-height: 1.45; }
.sf-empty { color: var(--hud-muted); font-size: 12px; padding: 8px 6px; line-height: 1.5; }
.sf-sep { height: 1px; background: var(--s-line); margin: 4px 0 12px; }
.sf-btn { width: 100%; margin-bottom: 9px; }

/* disabled controls */
.btn:disabled, .btn[disabled] { opacity: 0.35; cursor: default; filter: none; box-shadow: none; }

/* ---- inspector section header ------------------------------------------ */
.sf-group-head {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--s-line);
  color: var(--hud-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sf-group-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--s-line), transparent);
}
.sf-group-head:first-child { margin-top: 2px; }

/* ---- warp keyframe chips ------------------------------------------------ */
.sf-chips { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.sf-chip {
  padding: 5px 13px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: var(--s-well);
  color: var(--hud-muted);
  font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sf-chip:hover { color: var(--hud-text); border-color: var(--s-line-hot); }
.sf-chip.is-active {
  border-color: var(--s-accent); color: var(--s-accent); background: var(--s-accent-dim);
  box-shadow: 0 0 10px rgba(230,242,90,0.12);
}
.sf-chip--add { border-style: dashed; color: var(--dim); }
.sf-chip--add:hover { color: var(--hud-text); }
.sf-chip-x {
  border: 0; background: none; color: var(--hud-muted); cursor: pointer; font-size: 11px; padding: 2px 4px;
}
.sf-chip-x:hover { color: var(--danger); }
.sf-submix { margin-top: 8px; margin-bottom: 0; }
.sf-hintline { margin: 5px 0 0; color: var(--dim); font-size: 11px; line-height: 1.45; }

/* warp animate toggle, active */
.sf-on { box-shadow: inset 0 0 0 1px rgba(230,242,90,0.35), 0 0 16px rgba(230,242,90,0.14); }

.sf-env-head {
  flex-basis: 100%;
  color: var(--dim); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* envelope editor */
.sf-env {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 7px; padding: 8px;
  border: 1px dashed var(--s-line-2); border-radius: var(--s-radius);
  background: rgba(230,242,90,0.035);
}
.sf-mini {
  min-height: 24px;
  padding: 3px 6px; border: 1px solid var(--s-line); border-radius: 2px;
  background: var(--s-well); color: var(--text); font-size: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.sf-num { width: 54px; font-family: var(--font-mono); }

/* ---- New project dialog ------------------------------------------------- */
.sf-dialog {
  width: min(360px, 92vw);
  padding: 0;
  border: 1px solid var(--s-line-2);
  border-radius: var(--s-radius);
  background: linear-gradient(180deg, var(--s-panel-hi), transparent 70px), var(--panel-raised);
  color: var(--text);
  box-shadow: var(--s-inset), 0 30px 80px rgba(0,0,0,0.62);
}
.sf-dialog::backdrop { background: rgba(4,5,6,0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sf-dialog__body { padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.sf-dialog__title {
  margin: 0; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--hud-text);
}
.sf-dialog__warn { margin: -4px 0 0; font-size: 12px; line-height: 1.45; color: var(--warning); }
.sf-dialog__row { display: flex; align-items: flex-end; gap: 10px; }
.sf-dlg-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sf-dlg-field .sf-label { margin: 0; }
.sf-dlg-field input {
  width: 100%; min-height: 32px; padding: 7px 10px;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: var(--s-well); color: var(--text);
  font: inherit; font-family: var(--font-mono); font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.sf-dlg-field input:focus {
  outline: none; border-color: var(--s-line-hot);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 2px var(--s-accent-dim);
}
.sf-link-btn {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--s-line); border-radius: var(--s-radius);
  background: var(--s-well); color: var(--hud-muted); cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sf-link-btn:hover { color: var(--hud-text); border-color: var(--s-line-hot); }
.sf-link-btn.is-on {
  color: var(--s-accent); border-color: var(--s-accent); background: var(--s-accent-dim);
}
.sf-link-btn svg { display: block; }
.sf-dlg-unit { align-self: center; padding-bottom: 8px; color: var(--hud-muted); font-size: 11px; font-family: var(--font-mono); }
.sf-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.sf-dialog .btn { min-height: 32px; border-radius: var(--s-radius); box-shadow: none; }
.sf-dialog .btn:not(.btn--ghost) { box-shadow: var(--s-inset); }
.sf-dialog .btn--ghost {
  border-color: var(--s-line-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  color: var(--hud-text);
}

@media (max-width: 1000px) {
  .studio { height: auto; overflow: visible; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-stage { min-height: 60dvh; }
  /* on a phone the inspector matters more than reordering — show it first */
  .studio-inspector { order: -1; }
}

/* Studio footer sits in the band left by the removed nav (studio is 100dvh - nav-h) */
.studio-footer {
  min-height: 0;
  padding: 7px var(--space);
  border-top: 1px solid var(--s-line);
  background: transparent;
}