/* ==========================================================================
   NobleNeedle — Atelier Studio (Studio R2 workspace)
   Canon: docs/redesign-spec/06a-studio-r2.md §3/§9; phase2-contracts.md.
   Colours: --nn-* tokens ONLY. Anti-copy (08 §2): one right worksheet, no
   left toolbar, no view tabs above the canvas, price inside the docket,
   view-cluster vertical bottom-left, no "Tools"/"Properties"/"Recent".
   Layout: 64px topbar / canvas 1fr / worksheet 400px (≥1200) · 360px
   (992–1199) · 340px persistent (768–991) · bottom sheet (<768).
   Workspace, not a wizard: groups + chips + inspector always visible.
   ========================================================================== */

body.studio { overflow: hidden; height: 100dvh; }
#studioRoot { display: grid; grid-template-rows: 64px minmax(0, 1fr); height: 100dvh; }

/* ------------------------------- topbar ------------------------------- */
#stTopbar {
  display: flex; align-items: center; gap: 16px; padding: 0 clamp(14px, 2.5vw, 28px);
  background: var(--nn-surface-1); border-bottom: 1px solid var(--nn-line-1);
  position: relative; z-index: var(--z-header);
}
.st-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--nn-ink-1); text-decoration: none; flex: none; margin-left: 12px; }
.st-brand-img { display: block; width: 26px; height: 26px; object-fit: contain; }
.st-brand .brand-name { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em; color: var(--nn-ink-1); }
.st-brand .brand-name b { color: var(--nn-accent-ink); font-weight: 600; }
.st-title {
  font-family: var(--serif); font-size: 1.02rem; color: var(--nn-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  padding-left: 14px; border-left: 1px solid var(--nn-line-1);
}
.st-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.st-langs { display: flex; gap: 2px; }
.st-lang { font-size: .64rem; letter-spacing: .14em; padding: 6px 7px; border-radius: 6px; color: var(--nn-ink-4); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.st-lang:hover { color: var(--nn-ink-2); background: var(--nn-accent-a05); }
.st-lang.active { color: var(--nn-accent-ink); background: var(--nn-accent-a12); }
.st-cart { position: relative; }
@media (max-width: 640px) {
  #stTopbar { gap: 10px; padding: 0 12px; }
  .st-brand .brand-name { display: none; }
  .st-title { padding-left: 10px; flex: 0 1 auto; }
  .st-top-actions { gap: 4px; }
  .st-lang { padding: 6px 5px; }
}

/* -------------------------------- main -------------------------------- */
#stMain { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; position: relative; }
@media (min-width: 992px) and (max-width: 1199px) { #stMain { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (min-width: 768px) and (max-width: 991px) { #stMain { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ------------------------------- canvas ------------------------------- */
#stCanvas { position: relative; overflow: hidden; background: var(--nn-canvas-glow), var(--nn-canvas-bg); min-height: 0; }
#stCanvas3d { position: absolute; inset: 0; cursor: grab; touch-action: none; }
#stCanvas3d:active { cursor: grabbing; }
#stCanvas3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.st-no-gestures #stCanvas3d, .st-no-gestures #st2d { pointer-events: none; }
/* mobile keyboard: dim + freeze the canvas while typing */
.st-kbd #stCanvas3d, .st-kbd #st2d { pointer-events: none; filter: brightness(.5); transition: filter var(--t); }

#stCanvasState { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
#stCanvasState .st-load-text { display: block; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nn-ink-3); padding: 0 16px 10px; }
#stCanvasState .st-load-line { display: block; height: 2px; background: var(--nn-accent-a16); }
#stCanvasState .st-load-line i { display: block; height: 100%; background: var(--nn-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-fast) linear; }
#stCanvasState:not([hidden]) ~ .st-canvas-hint { opacity: 0; }
.st-canvas-hint { position: absolute; left: 72px; right: 16px; bottom: 20px; text-align: center; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--nn-ink-4); pointer-events: none; transition: opacity var(--t); }

/* view-cluster — VERTICAL, bottom-left */
#stView { position: absolute; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#stView button { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-2); background: var(--nn-glass-bg); border: 1px solid var(--nn-line-1); border-radius: 10px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
#stView button:hover { color: var(--nn-accent-ink); border-color: var(--nn-accent-a55); }
#stView button:active { background: var(--nn-accent-a12); }
/* Sprint 2 · layer 1: camera-preset subgroup — only in the DOM when the flag is on */
.st-view-preset-end { position: relative; margin-bottom: 14px; }
.st-view-preset-end::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -7px; height: 1px; background: var(--nn-line-1); }

/* fabric colour rail — vertical, attached to the LEFT of the canvas (glass, like the view-cluster) */
#stFabric { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px; background: var(--nn-glass-bg); border: 1px solid var(--nn-line-1); border-radius: 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#stFabric .st-swatch { width: 30px; height: 30px; }

/* Sprint 2 · layer 2: hotspot markers over the 3D model — only in the DOM when the flag is on.
   Container passes pointer events through to the canvas; only the dots are clickable. */
#stHotspots { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.st-hotspot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; padding: 0; border-radius: 50%; border: 2px solid var(--nn-accent); background: transparent; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0,0,0,.28); will-change: transform; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.st-hotspot:hover { box-shadow: 0 0 0 4px var(--nn-accent-a12), 0 1px 4px rgba(0,0,0,.28); }
.st-hotspot.is-occupied { background: var(--nn-accent); }
.st-hotspot.is-active { box-shadow: 0 0 0 4px var(--nn-accent-a55); }
.st-hotspot.is-full { border-color: var(--nn-line-1); background: transparent; opacity: .45; pointer-events: none; cursor: default; box-shadow: none; }

/* floating on-canvas tool tray for the selected element */
#stToolbar {
  position: absolute; z-index: 6; transform: translate(-50%, -100%); display: flex; gap: 2px;
  padding: 4px; border-radius: 10px; background: var(--nn-glass-bg); border: 1px solid var(--nn-line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--nn-shadow-1);
}
#stToolbar[hidden] { display: none; }
#stToolbar[data-status="warn"] { border-color: var(--nn-state-warning); }
#stToolbar[data-status="error"] { border-color: var(--nn-state-danger); }
#stToolbar button { width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-2); border-radius: 7px; transition: color var(--t-fast), background var(--t-fast); }
#stToolbar button:hover { color: var(--nn-accent-ink); background: var(--nn-accent-a08); }
#stToolbar [data-tool="del"]:hover { color: var(--nn-state-danger); }

/* draft-restore strip */
.st-draft-strip { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(92%, 560px); padding: 10px 14px; border: 1px solid var(--nn-line-1); border-radius: var(--radius); background: var(--nn-glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--nn-shadow-1); z-index: 7; font-size: 12.5px; color: var(--nn-ink-2); letter-spacing: .02em; }
.st-draft-strip .btn { flex: none; }
@media (min-width: 1200px) { .st-draft-strip { left: calc((100% - 400px) / 2); } }
@media (min-width: 992px) and (max-width: 1199px) { .st-draft-strip { left: calc((100% - 360px) / 2); } }
@media (min-width: 768px) and (max-width: 991px) { .st-draft-strip { left: calc((100% - 340px) / 2); } }
@media (max-width: 640px) { .st-draft-strip { flex-wrap: wrap; justify-content: center; text-align: center; } }

/* ---------------------------- 2D fallback ---------------------------- */
#st2d { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.st-2d-wrap { position: relative; width: 260px; height: 300px; }
#st2dEmblems { position: absolute; inset: 0; }
.st-2d-zone { position: absolute; border: 1.5px dashed var(--nn-accent-a30); border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--t), background var(--t); }
.st-2d-zone:hover, .st-2d-zone.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-2d-zone-label { font-size: 9px; color: var(--nn-accent-a55); letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.3; pointer-events: none; }
.st-2d-zone.active .st-2d-zone-label { color: var(--nn-accent-ink); }
.st-emblem { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; border: 1px solid transparent; border-radius: 5px; }
.st-emblem img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.st-emblem-text { font-family: var(--serif); font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; }
.st-emblem.is-active { box-shadow: 0 0 0 1px var(--nn-accent-a55); }
.st-emblem:hover { border-color: var(--nn-accent-a55); }
.st-emblem.dragging { cursor: grabbing; border-color: var(--nn-accent); background: var(--nn-accent-a05); }

/* ------------------------------ worksheet ------------------------------ */
#stWorksheet { min-height: 0; display: flex; flex-direction: column; background: var(--nn-surface-1); border-left: 1px solid var(--nn-line-1); }
.st-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.st-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 14px; }
.st-group { padding: 14px 0; border-bottom: 1px solid var(--nn-line-1); }
.st-group:last-child { border-bottom: 0; }
.st-inspector-grp { padding-bottom: 4px; }
.st-grp-title { position: sticky; top: 0; z-index: 2; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--nn-ink-3); margin: 0 0 10px; padding: 4px 0; background: var(--nn-surface-1); }

/* garment row (horizontal, scroll if needed — never topbar tabs) */
.st-garments { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; scrollbar-width: none; }
.st-garments::-webkit-scrollbar { display: none; }
.st-garment { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px; cursor: pointer; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); color: var(--nn-ink-2); transition: border-color var(--t), background var(--t); }
.st-garment:hover { border-color: var(--nn-line-2); }
.st-garment.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-g-icon { display: grid; place-items: center; color: var(--nn-ink-3); }
.st-garment.active .st-g-icon { color: var(--nn-accent-ink); }
.st-g-name { font-size: 10px; letter-spacing: .02em; text-align: center; line-height: 1.2; }
.st-garment.active .st-g-name { color: var(--nn-accent-ink); }

/* fabric swatches (used in the #stFabric left rail) */
.st-swatch { width: 32px; height: 32px; border-radius: 999px; cursor: pointer; border: 1px solid var(--nn-line-2); transition: transform var(--t); }
.st-swatch:hover { transform: scale(1.1); }
.st-swatch.active { box-shadow: 0 0 0 2px var(--nn-surface-1), 0 0 0 3px var(--nn-accent); }

/* element chips */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.st-chip-el { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; cursor: pointer; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: 999px; color: var(--nn-ink-2); transition: border-color var(--t), background var(--t); }
.st-chip-el:hover { border-color: var(--nn-line-2); }
.st-chip-el.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-chip-thumb { width: 26px; height: 26px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--nn-surface-2); flex: none; }
.st-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-chip-t { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--nn-accent-ink); }
.st-chip-lbl { font-size: 12px; letter-spacing: .02em; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* per-chip delete (×) — a direct "remove this logo/text" at the placement row */
.st-chip-del { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--nn-ink-3); cursor: pointer; flex: none; opacity: .55; transition: opacity var(--t), background var(--t), color var(--t); }
.st-chip-del:hover { opacity: 1; background: var(--nn-accent-a08); color: var(--nn-accent-ink); }
.st-chip-del:focus-visible { opacity: 1; outline: 2px solid var(--nn-focus-ring); outline-offset: 1px; }
.st-chip-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.st-dot-ok { background: transparent; }
.st-dot-warn { background: var(--nn-state-warning); }
.st-dot-error { background: var(--nn-state-danger); }
.st-dot-parked { background: var(--nn-ink-5); }
.st-chip-el .st-dot-parked ~ .st-chip-lbl, .st-chip-el:has(.st-dot-parked) { opacity: .6; }
.st-add-row { display: flex; gap: 8px; }
.st-add-el { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--nn-accent-ink); background: var(--nn-accent-a05); border: 1px dashed var(--nn-accent-a55); border-radius: var(--radius-sm); transition: border-color var(--t), background var(--t); }
.st-add-el:hover { border-color: var(--nn-accent); background: var(--nn-accent-a12); }
.st-add-el:disabled { opacity: .4; cursor: default; }
.st-add-ic { display: inline-flex; color: var(--nn-accent); }         /* accent-coloured icon (silver/gold per theme) */
.st-add-ic svg { width: 19px; height: 19px; }                         /* a touch larger so the add actions stand out */

/* inspector */
.st-inspector { display: flex; flex-direction: column; gap: 14px; }
.st-insp-empty { font-size: 12px; color: var(--nn-ink-4); line-height: 1.6; text-align: center; padding: 20px 8px; }
.st-insp-block { display: flex; flex-direction: column; gap: 8px; }
.st-insp-row2 { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.st-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--nn-ink-4); }
.st-text-input { position: relative; }
.st-text-input input { width: 100%; padding: 11px 44px 11px 13px; font-family: var(--serif); font-size: 16px; color: var(--nn-ink-1); background: var(--nn-surface-3); border: 1px solid var(--nn-field-border); border-radius: var(--radius-sm); transition: border-color var(--t); }
.st-text-input input:focus { outline: none; border-color: var(--nn-accent); }
.st-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--nn-ink-4); }
.st-count.full { color: var(--nn-state-danger); }

.st-seg { display: inline-flex; border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); overflow: hidden; }
.st-seg button { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-3); background: var(--nn-surface-3); transition: color var(--t-fast), background var(--t-fast); }
.st-seg button + button { border-left: 1px solid var(--nn-line-1); }
.st-seg button.active { color: var(--nn-accent-ink); background: var(--nn-accent-a12); }

.st-range { width: 100%; accent-color: var(--nn-accent); height: 38px; cursor: pointer; }

.st-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-font { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; cursor: pointer; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); transition: border-color var(--t), background var(--t); }
.st-font:hover { border-color: var(--nn-line-2); }
.st-font.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-font-ag { font-size: 22px; line-height: 1; color: var(--nn-accent-ink); }
.st-font-lbl { font-family: var(--sans); font-size: 9px; letter-spacing: .02em; color: var(--nn-ink-4); text-align: center; line-height: 1.2; }

.st-threads { display: flex; gap: 8px; flex-wrap: wrap; }
.st-thread-sw { position: relative; width: 30px; height: 30px; border-radius: 999px; cursor: pointer; border: 1px solid var(--nn-line-2); transition: transform var(--t-fast); }
.st-thread-sw:hover { transform: scale(1.1); }
.st-thread-sw.active { box-shadow: 0 0 0 2px var(--nn-surface-1), 0 0 0 3px var(--nn-accent); }
.st-thread-sw.st-blend::after { content: "≈"; position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; font-size: 10px; line-height: 14px; text-align: center; color: var(--nn-on-accent); background: var(--nn-state-warning); border-radius: 999px; }
.st-assist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--nn-state-warning) 12%, transparent); }
.st-assist[hidden] { display: none; }
.st-assist-lbl { font-size: 11px; color: var(--nn-ink-2); }
.st-assist-sw { width: 24px; height: 24px; }

.st-heights { display: flex; gap: 6px; }
.st-height { flex: 1 1 0; padding: 8px 4px; cursor: pointer; font-size: 12px; color: var(--nn-ink-2); background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); transition: border-color var(--t), background var(--t); }
.st-height:hover { border-color: var(--nn-line-2); }
.st-height.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); color: var(--nn-accent-ink); }
.st-height-slider { display: flex; align-items: center; gap: 12px; }
.st-height-slider .st-range { flex: 1 1 auto; }
.st-height-slider b { flex: none; min-width: 52px; text-align: right; font-family: var(--serif); font-size: 15px; color: var(--nn-accent-ink); }

/* zones (shared by both inspectors) */
.st-zones { display: flex; flex-direction: column; gap: 7px; }
.st-zone { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); transition: border-color var(--t), background var(--t); }
.st-zone:hover { border-color: var(--nn-line-2); }
.st-zone.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-zone:disabled { opacity: .45; cursor: default; }
.st-z-name { font-size: 12px; color: var(--nn-ink-2); }
.st-z-hint { font-size: 10px; color: var(--nn-ink-5); }
.st-z-busy { font-size: 10px; color: var(--nn-ink-4); font-style: italic; }
.st-zone.active .st-z-name, .st-zone.active .st-z-hint { color: var(--nn-accent-ink); }

/* image inspector: dropzone + size cards */
.st-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; cursor: pointer; text-align: center; border: 1px dashed var(--nn-accent-a55); border-radius: var(--radius-sm); background: var(--nn-surface-3); transition: border-color var(--t), background var(--t); }
.st-drop:hover, .st-drop:focus-visible { border-color: var(--nn-accent); background: var(--nn-accent-a05); }
.st-drop.dragover { border-color: var(--nn-accent); border-style: solid; background: var(--nn-accent-a12); }
.st-drop[hidden], .st-art-preview[hidden] { display: none; }
.st-drop-icon { color: var(--nn-accent-ink); display: grid; place-items: center; }
.st-drop b { font-size: 12px; font-weight: 500; color: var(--nn-accent-ink); }
.st-drop-sub { font-size: 10px; color: var(--nn-ink-4); }
.st-art-preview { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); background: var(--nn-surface-3); }
.st-art-preview img { width: 56px; height: 56px; object-fit: contain; border-radius: 5px; background: var(--nn-surface-2); }
.st-art-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-art-meta b { font-size: 12px; font-weight: 500; color: var(--nn-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-art-meta span { font-size: 10px; color: var(--nn-ink-4); }
.st-art-remove { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; cursor: pointer; font-size: 11px; color: var(--nn-state-danger); background: transparent; border: 1px solid var(--nn-line-2); border-radius: var(--radius-sm); transition: border-color var(--t); }
.st-art-remove:hover { border-color: var(--nn-state-danger); }
/* size −/+ stepper (the mobile-friendly "resize" control for a logo) */
.st-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.st-size-step { display: inline-flex; align-items: center; gap: 6px; }
#stSizeStepVal { min-width: 56px; text-align: center; font-size: 12px; color: var(--nn-ink-1); }
.st-step { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--nn-line-1); border-radius: 9px; background: var(--nn-surface-3); color: var(--nn-ink-1); cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.st-step:hover:not(:disabled) { border-color: var(--nn-accent-a55); color: var(--nn-accent-ink); }
.st-step:disabled { opacity: .4; cursor: default; }
.st-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-size { padding: 11px 12px; cursor: pointer; text-align: left; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); transition: border-color var(--t), background var(--t); }
.st-size:hover { border-color: var(--nn-line-2); }
.st-size.active { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-s-dim { display: block; font-size: 13px; color: var(--nn-ink-1); }
.st-s-price { display: block; font-size: 11px; color: var(--nn-ink-4); margin-top: 2px; }
.st-size.active .st-s-dim, .st-size.active .st-s-price { color: var(--nn-accent-ink); }

/* validation cards (strong visual states — 06a §9.3) */
.st-validation:empty { display: none; }
.st-validation { display: flex; flex-direction: column; gap: 8px; }
.st-vcard { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid; }
.st-v-warn { border-color: var(--nn-state-warning); background: color-mix(in srgb, var(--nn-state-warning) 10%, transparent); }
.st-v-error { border-color: var(--nn-state-danger); background: color-mix(in srgb, var(--nn-state-danger) 10%, transparent); }
.st-vmsg { font-size: 12px; color: var(--nn-ink-1); }
.st-v-error .st-vmsg { color: var(--nn-state-danger); font-weight: 500; }
.st-vfixes { display: flex; flex-wrap: wrap; gap: 6px; }
.st-vfixes button { padding: 6px 10px; cursor: pointer; font-size: 11px; color: var(--nn-accent-ink); background: var(--nn-surface-3); border: 1px solid var(--nn-line-2); border-radius: 999px; transition: border-color var(--t-fast), background var(--t-fast); }
.st-vfixes button:hover { border-color: var(--nn-accent); background: var(--nn-accent-a08); }
.st-vmaster { font-size: 10px; color: var(--nn-ink-4); font-style: italic; }

.st-insp-actions { display: flex; gap: 8px; }
.st-insp-actions .btn { flex: 1 1 0; }
.st-insp-actions .st-del { color: var(--nn-state-danger); }

/* ------------------------- docket (pinned footer) ------------------------- */
#stDocket { flex: none; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--nn-surface-2); border-top: 1px solid var(--nn-line-1); }
.st-docket-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-row > span { font-size: 11px; color: var(--nn-ink-4); letter-spacing: .04em; flex: none; }
.st-row > b { font-size: 12.5px; font-weight: 400; color: var(--nn-ink-2); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row.st-parked { opacity: .55; }
.st-completeness { font-size: 10.5px; color: var(--nn-ink-4); letter-spacing: .04em; margin-bottom: 10px; }
.st-row-qty { margin-bottom: 4px; }
.st-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--nn-line-1); border-radius: 999px; }
.st-qty button { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-2); transition: color var(--t-fast); }
.st-qty button:hover { color: var(--nn-accent-ink); }
.st-qty b { min-width: 26px; text-align: center; font-size: .86rem; font-weight: 400; color: var(--nn-ink-1); }
.st-price-line { text-align: right; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--nn-accent-ink); }
.st-price-from { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--nn-ink-4); letter-spacing: .06em; }
.st-price-note { font-size: 11px; color: var(--nn-ink-3); text-align: right; margin-top: 4px; line-height: 1.5; }
.st-ip { font-size: 10.5px; color: var(--nn-ink-3); line-height: 1.55; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--nn-line-1); border-radius: var(--radius-sm); background: var(--nn-surface-1); }
.st-ip a { color: var(--nn-accent-ink); white-space: nowrap; }
#stCtaWrap .btn, #stAddedWrap .btn { min-height: 50px; }
#stCtaWrap[hidden] { display: none; }
#stAdd:disabled { opacity: .45; filter: saturate(.4); cursor: default; }
#stAddedWrap { display: flex; flex-direction: column; gap: 8px; }
#stAddedWrap[hidden] { display: none; }
.st-added-msg { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--nn-state-success); letter-spacing: .03em; border: 1px solid color-mix(in srgb, var(--nn-state-success) 45%, transparent); border-radius: var(--radius-sm); }
#stCredits { display: block; margin: 10px auto 0; cursor: pointer; font-size: 11px; letter-spacing: .05em; color: var(--nn-ink-4); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); }
#stCredits:hover { color: var(--nn-ink-2); }
/* studio bottom bar: "Разработка — WebWay" (left) + "Лицензии моделей" (right), compact */
.st-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--nn-line-1); }
.st-footer .st-dev { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .03em; color: var(--nn-ink-4); }
.st-footer #stCredits { margin: 0; }
.st-footer .ww-badge { padding: 4px 9px; font-size: .76rem; }

/* --------------------- credits overlay (CC BY, all modes) --------------------- */
#stCreditsOverlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; background: var(--nn-backdrop); }
#stCreditsOverlay[hidden] { display: none; }
.st-overlay-panel { position: relative; max-width: 540px; width: 100%; max-height: 80dvh; overflow-y: auto; padding: 26px 28px; background: var(--nn-surface-3); border: 1px solid var(--nn-line-1); border-radius: var(--radius-lg); box-shadow: var(--nn-shadow-1); }
.st-overlay-panel h2 { font-family: var(--serif); font-size: 1.25rem; color: var(--nn-ink-1); margin: 0 0 12px; }
.st-credits-text { font-size: 12.5px; line-height: 1.8; color: var(--nn-ink-3); letter-spacing: .02em; }
.st-credits-text a { color: var(--nn-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.st-credits-text a:hover { color: var(--nn-accent-ink); }
.st-overlay-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-3); border-radius: 10px; transition: color var(--t-fast), background var(--t-fast); }
.st-overlay-close:hover { color: var(--nn-ink-1); background: var(--nn-accent-a08); }

/* ------------------------ mobile bottom sheet (<768) ------------------------ */
#stSheet { display: none; }
@media (max-width: 767px) {
  /* the topbar track absorbs the notch inset so the canvas below is clear of it */
  #studioRoot { grid-template-rows: calc(56px + env(safe-area-inset-top, 0px)) minmax(0, 1fr); }
  #stTopbar { padding-top: env(safe-area-inset-top, 0px); }
  #stMain { grid-template-columns: minmax(0, 1fr); }
  #stWorksheet { display: none; }
  #stCanvas { padding-top: 0; }
  /* size the WebGL host to the VISIBLE region — reserve the peek bar (+ home
     indicator) at the bottom so the model frames in view, not under the peek */
  #stCanvas3d { inset: 0 0 var(--st-peek-h, calc(132px + env(safe-area-inset-bottom, 0px))) 0; }
  #stToolbar { display: none; }   /* mobile edits from the sheet, not on-canvas */
  /* fabric colour rail → horizontal scroll strip along the top, clear of the
     model and the bottom-left view-cluster (was a left column covering the model) */
  #stFabric { left: 12px; right: 12px; top: 12px; bottom: auto; transform: none;
    flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    gap: 8px; padding: 8px 10px; border-radius: 12px; scrollbar-width: none; }
  #stFabric::-webkit-scrollbar { display: none; }
  #stFabric .st-swatch { width: 28px; height: 28px; flex: none; }
  /* the draft-restore card owns the top while it's up (a continue/restart choice);
     hide the colour strip until it's dismissed so they never overlap */
  #stMain:has(.st-draft-strip) #stFabric { display: none; }

  #stSheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 56px);
    background: var(--nn-surface-1); border-top: 1px solid var(--nn-line-1);
    border-radius: 18px 18px 0 0; box-shadow: var(--nn-shadow-1); will-change: transform;
  }
  #stSheet.st-anim { transition: transform 280ms cubic-bezier(.32, .72, 0, 1); }
  #stSheet.st-drag { transition: none; }

  /* the whole peek is the drag/tap surface (touch-action:none keeps vertical
     drags controlling the sheet instead of scrolling the page) */
  .st-peek { flex: none; box-sizing: border-box; min-height: calc(132px + env(safe-area-inset-bottom, 0px)); padding: 0 16px max(12px, env(safe-area-inset-bottom, 0px)); touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .st-handle { display: block; width: 100%; padding: 12px 0 8px; }
  .st-handle i { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 999px; background: var(--nn-ink-4); transition: background var(--t-fast); }
  .st-peek:active .st-handle i { background: var(--nn-ink-2); }
  .st-peek-row { display: flex; align-items: center; gap: 10px; }
  .st-peek-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  #stPeekTitle { font-size: 11px; letter-spacing: .06em; color: var(--nn-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  #stPeekPrice { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--nn-accent-ink); }
  .st-peek-edit { flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-2); border: 1px solid var(--nn-line-1); border-radius: 10px; }
  .st-peek-edit[hidden] { display: none; }
  #stPeekAdd { flex: none; width: auto; }
  #stPeekAdd:disabled { opacity: .45; }
  /* why add-to-cart is blocked — visible on touch (no hover tooltip), tap jumps to the fix */
  .st-peek-warn { width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--nn-state-danger, var(--nn-accent-a55)); border-radius: 10px; background: var(--nn-accent-a08); color: var(--nn-state-danger, var(--nn-accent-ink)); font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .st-peek-warn[hidden] { display: none; }
  .st-draft-strip .btn { width: auto; }
  .st-added #stPeekAdd { display: none; }

  #stSheetClose { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; z-index: 2; display: grid; place-items: center; cursor: pointer; color: var(--nn-ink-3); border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
  #stSheet.st-up #stSheetClose { opacity: 1; pointer-events: auto; }
  #stSheetClose:hover { color: var(--nn-ink-1); background: var(--nn-accent-a08); }

  .st-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .st-sheet-body .st-panel { height: auto; min-height: 100%; }
  .st-sheet-body .st-groups { flex: none; overflow: visible; padding: 0 16px 8px; }
  .st-sheet-body #stDocket { padding: 14px 16px max(14px, env(safe-area-inset-bottom, 0px)); }

  .st-canvas-hint { left: 16px; right: 16px; bottom: 150px; line-height: 1.5; }
  #stView { bottom: 150px; }
}

/* short viewports (landscape phones) — shrink the peek footprint so the model
   still gets usable height; the canvas reservation follows via --st-peek-h */
@media (max-width: 900px) and (max-height: 520px) {
  .st-peek { min-height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .st-handle { padding: 8px 0 4px; }
  #stPeekTitle { -webkit-line-clamp: 1; }
  .st-canvas-hint, #stView { bottom: 108px; }
  #stFabric .st-swatch { width: 24px; height: 24px; }
}

/* --------------------------- keyboard focus --------------------------- */
/* Every interactive control gets a visible focus ring for keyboard users
   (only .st-drop / text input had one before). */
.st-garment:focus-visible, .st-swatch:focus-visible, .st-chip-el:focus-visible,
.st-add-el:focus-visible, .st-font:focus-visible, .st-height:focus-visible,
.st-zone:focus-visible, .st-size:focus-visible, .st-thread-sw:focus-visible,
.st-seg button:focus-visible, .st-vfixes button:focus-visible, .st-lang:focus-visible,
#stView button:focus-visible, #stToolbar button:focus-visible, .st-qty button:focus-visible,
.st-art-remove:focus-visible, .st-insp-actions .btn:focus-visible, .st-hotspot:focus-visible {
  outline: 2px solid var(--nn-focus-ring); outline-offset: 2px;
}
.st-seg button:focus-visible, .st-zone:focus-visible, .st-size:focus-visible,
.st-font:focus-visible, .st-height:focus-visible { outline-offset: -2px; }

/* --------------------------- reduced motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
  #stSheet.st-anim, .st-swatch, .st-garment, .st-zone, .st-size, .st-chip-el, .st-lang,
  .st-drop, .st-emblem, .st-2d-zone, #stView button, .st-canvas-hint, .st-font, .st-height,
  .st-thread-sw, .st-seg button, .st-add-el, .st-kbd #stCanvas3d, #stCanvasState .st-load-line i,
  .st-vfixes button, .st-art-remove, .st-qty button, .st-overlay-close, .st-hotspot {
    transition: none !important;
  }
}