/* UIX Studio (/studio/). Three zones: tool rail | canvas | short inspector. Everything else lives in popovers off the top bar.
   Uses the --ux-* tokens from ds.css; light default, dark via the same tokens. */
.st-head { padding-block: clamp(20px, 1rem + 1.5vw, 40px) 12px; }
.st-wrap { padding-block: 12px clamp(32px, 4vw, 64px); }

.st { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); height: clamp(600px, calc(100vh - var(--ux-header-h) - 40px), 920px);
  border: 1px solid var(--ux-line); border-radius: var(--ux-r-xl); background: var(--ux-surface); box-shadow: 0 1px 2px rgb(var(--ux-sh) / .05), 0 18px 40px -24px rgb(var(--ux-sh) / .28); }
.st button:disabled { opacity: .4; cursor: not-allowed; }
.st .ux-btn:disabled { transform: none; box-shadow: none; }

/* top bar */
.st-top { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--ux-line); border-radius: var(--ux-r-xl) var(--ux-r-xl) 0 0; background: var(--ux-surface-2); }
.st-grp { display: flex; align-items: center; gap: 4px; }
.st-grow { flex: 1; }
.st-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--ux-line); flex: none; }
.st-name .ux-input { height: 34px; width: 180px; max-width: 40vw; font: 600 .9375rem/1 var(--ux-mono); }
.st-top .ux-btn svg { width: 17px; height: 17px; }
.st-top .ux-btn:not(.ux-icon-btn) { gap: 6px; }
.st-zoom { min-width: 50px; font-family: var(--ux-mono); font-size: .8125rem; }
.st-top .ux-icon-btn b { font: 700 1rem/1 var(--ux-font-display); }
.st-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font: 600 11px/20px var(--ux-mono); text-align: center; }
.st-count:empty { display: none; }
.st-count.is-warn { background: color-mix(in srgb, var(--ux-gold) 30%, transparent); color: var(--ux-text); }
.st-count.is-bad { background: color-mix(in srgb, #E5484D 24%, transparent); color: var(--ux-text); }

/* body: rail | stage | inspector */
.st-body { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px; min-height: 0; }
.st-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; border-right: 1px solid var(--ux-line); background: var(--ux-surface-2); border-radius: 0 0 0 var(--ux-r-xl); }
.st-tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--ux-muted); cursor: pointer; }
.st-tool:hover { background: var(--ux-hover); color: var(--ux-text); }
.st-tool:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 1px; }
.st-tool[aria-pressed="true"] { background: var(--ux-accent); color: var(--ux-on-accent); }
.st-tip { position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 8px; background: var(--ux-tip-bg); color: var(--ux-tip-text);
  font: 500 12px/1 var(--ux-font); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-4px, -50%); transition: opacity var(--ux-dur), transform var(--ux-dur) var(--ux-ease); }
.st-tip kbd { font: 600 11px/1 var(--ux-mono); opacity: .65; }
.st-tool:hover .st-tip, .st-tool:focus-visible .st-tip { opacity: 1; transform: translate(0, -50%); }
.st-adjust { display: none; }

.st-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ux-bg-alt); }

/* viewport + canvas */
.st-vp { position: relative; flex: 1; min-height: 0; display: flex; overflow: auto; padding: 12px; }
.st-vp.is-drop { outline: 2px dashed var(--ux-accent); outline-offset: -8px; }
.st-cwrap { margin: auto; display: grid; grid-template-columns: 22px auto; grid-template-rows: 22px auto; }
.st-cwrap.no-rulers { grid-template-columns: 0 auto; grid-template-rows: 0 auto; }
.st-svg { grid-area: 2 / 2; display: block; border-radius: var(--ux-r); touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: crosshair; }
.st-svg:focus-visible { box-shadow: 0 0 0 2px var(--ux-focus); }
.st-svg[data-tool="select"], .st-svg[data-tool="node"] { cursor: default; }
.st-svg[data-tool="eraser"] { cursor: cell; }
.st-board { fill: var(--ux-surface); filter: drop-shadow(0 1px 1px rgb(var(--ux-sh) / .1)) drop-shadow(0 8px 18px rgb(var(--ux-sh) / .1)); }
.st-grid, .st-keys, .st-art { pointer-events: none; }
.st-gl { stroke: var(--ux-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-gl--mid, .st-gl--edge { stroke: var(--ux-line-strong); }
.st-keys > * { fill: none; stroke: color-mix(in srgb, var(--ux-accent) 32%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-keys > :first-child { stroke: color-mix(in srgb, var(--ux-accent) 55%, transparent); stroke-dasharray: 4 3; }
.st-art { color: var(--ux-text); }
.st-hitg > * { pointer-events: visiblePainted; cursor: pointer; }
.st-svg:not([data-tool="select"]):not([data-tool="node"]):not([data-tool="eraser"]) .st-hitg > * { pointer-events: none; }
.st-svg[data-tool="eraser"] .st-hitg > * { cursor: cell; }
.st-ui > * { vector-effect: non-scaling-stroke; }
.st-sb { fill: none; stroke: var(--ux-accent); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.st-mq { fill: color-mix(in srgb, var(--ux-accent) 10%, transparent); stroke: var(--ux-accent); stroke-width: 1; pointer-events: none; }
.st-nd { fill: var(--ux-surface); stroke: var(--ux-accent); stroke-width: 1.5; pointer-events: none; }
.st-nd.is-on { fill: var(--ux-accent); }
.st-hl { stroke: var(--ux-accent); stroke-width: 1; opacity: .7; pointer-events: none; }
.st-h { fill: var(--ux-accent); stroke: var(--ux-surface); stroke-width: 1; pointer-events: none; }
.st-tgt { fill: transparent; pointer-events: all; cursor: move; }
.st-rubber { fill: none; stroke: var(--ux-accent); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.st-cur { fill: var(--ux-accent); pointer-events: none; opacity: .85; }

/* rulers */
.st-rc { grid-area: 1 / 1; }
.st-ruler { position: relative; overflow: hidden; font: 500 10px/1 var(--ux-mono); color: var(--ux-muted); }
.st-ruler--x { grid-area: 1 / 2; height: 22px; background: linear-gradient(90deg, var(--ux-line-strong) 1px, transparent 1px) calc(var(--z) * 2) 100% / var(--z) 6px repeat-x; }
.st-ruler--y { grid-area: 2 / 1; width: 22px; background: linear-gradient(180deg, var(--ux-line-strong) 1px, transparent 1px) 100% calc(var(--z) * 2) / 6px var(--z) repeat-y; }
.st-ruler span { position: absolute; }
.st-ruler--x span { bottom: 8px; transform: translateX(-50%); }
.st-ruler--y span { right: 8px; transform: translateY(-50%); }

/* empty state */
.st-start { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(400px, calc(100% - 32px)); padding: 18px 18px 14px; transform: translate(-50%, -50%); text-align: center;
  border: 1px solid var(--ux-line); border-radius: var(--ux-r-xl); background: color-mix(in srgb, var(--ux-surface) 94%, transparent); backdrop-filter: blur(6px); box-shadow: var(--ux-e3); }
.st-start[hidden] { display: none; }
.st-start-t { margin: 0; font: 600 1.0625rem/1.3 var(--ux-font-display); color: var(--ux-text); }
.st-start .ux-hint { margin: 0; }
.st-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 10px; }
.st-quick:empty { min-height: 140px; }
.st-more { align-content: center; color: var(--ux-accent); }
.st-more span { font-size: 12px !important; font-weight: 600; color: var(--ux-accent) !important; }

.st-status { min-height: 2.4em; margin: 0; padding: 6px 14px; border-top: 1px solid var(--ux-line); font-size: .8125rem; color: var(--ux-muted); background: var(--ux-surface); white-space: pre-wrap; }

/* preview strip */
.st-pv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-top: 1px solid var(--ux-line); background: var(--ux-surface); }
.st-pv .st-seg { margin-left: auto; }
.st-sw { display: flex; align-items: flex-end; gap: 12px; padding: 8px 12px 6px; border-radius: var(--ux-r); border: 1px solid var(--ux-line); }
.st-sw--light { background: #FFFFFF; color: #130B2E; }
.st-sw--dark { background: #120E20; color: #EEEBF8; border-color: #2D2648; }
.st-pvc { display: grid; justify-items: center; gap: 4px; }
.st-pvc > span { display: grid; place-items: center; }
.st-pvc svg { display: block; }
.st-pvc small { font: 500 10px/1 var(--ux-mono); opacity: .6; }
.st-seg.ux-seg > button { padding: 5px 10px; font-size: .8125rem; }

/* inspector */
.st-ins { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--ux-line); background: var(--ux-surface); border-radius: 0 0 var(--ux-r-xl) 0; }
.st-ins-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--ux-line); }
.st-ins-h > div { min-width: 0; }
.st-ins-h h2 { margin: 0; font: 600 1rem/1.25 var(--ux-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ins-s { margin: 4px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--ux-muted); }
.st-ins-x { display: none !important; }
.st-ins-b { display: grid; align-content: start; gap: 12px; padding: 14px 16px 16px; overflow-y: auto; }
.st-ins[data-mode="icon"] .st-shape-only, .st-ins[data-mode="shape"] .st-icon-only { display: none; }
.st-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; }
.st-row[hidden] { display: none; }
.st-rl { font-size: .8125rem; font-weight: 600; color: var(--ux-muted); }
.st-row > .st-seg { display: flex; } .st-row > .st-seg > button { flex: 1; justify-content: center; padding-inline: 4px; }
.st-pair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-pair .ux-range, .st-pair .st-swb { flex: 1; min-width: 0; }
.st-num.ux-input { width: 66px; height: 34px; padding: 0 8px; font-family: var(--ux-mono); font-size: .875rem; flex: none; }
.st-pair output { min-width: 3em; font: 500 .8125rem/1 var(--ux-mono); color: var(--ux-muted); text-align: right; }
.st-swb { display: flex; align-items: center; gap: 8px; height: 36px; min-width: 0; padding: 0 10px 0 5px; border: 1px solid var(--ux-control-line); border-radius: 10px; background: var(--ux-field); color: var(--ux-text); font: 500 .8125rem/1 var(--ux-font); cursor: pointer; }
.st-swb:hover { border-color: var(--ux-accent); }
.st-swb:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.st-swb[aria-expanded="true"] { border-color: var(--ux-accent); box-shadow: 0 0 0 3px var(--ux-accent-soft); }
.st-swatch { width: 24px; height: 24px; flex: none; border-radius: 7px; color: var(--st-ic, var(--ux-text)); background: var(--cp-c, currentColor); box-shadow: inset 0 0 0 1px rgb(var(--ux-sh) / .18); }
.st-swb.is-none .st-swatch { background: linear-gradient(to top right, transparent calc(50% - 1px), #E5484D calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--ux-surface); }
.st-swv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-none[aria-pressed="true"] { border-color: var(--ux-accent); background: var(--ux-accent-soft); color: var(--ux-text); }
.st-acts { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; border-top: 1px solid var(--ux-line); }
.st-acts[hidden] { display: none; }
#stNodeRow { padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--ux-line); }
.st-link { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--ux-accent); font: 600 .8125rem/1.3 var(--ux-font); cursor: pointer; }
.st-link:hover { text-decoration: underline; }

/* popovers (native [popover]: top layer, light dismiss) */
.st-pop { position: fixed; inset: auto; margin: 0; width: 300px; max-width: calc(100vw - 16px); max-height: min(72vh, 600px); overflow: auto; padding: 12px 14px 14px;
  border: 1px solid var(--ux-line); border-radius: 16px; background: var(--ux-surface); color: var(--ux-text); box-shadow: var(--ux-e4); }
.st-pop--wide { width: 440px; }
.st-pop::backdrop { background: transparent; }
.st-pop-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.st-pop-h h2 { margin: 0; font: 600 1rem/1.2 var(--ux-font-display); }
.st-pop > * + * { margin-top: 10px; }
.st-pop .ux-hint { margin-bottom: 0; }
.st-tabs { display: flex; } .st-tabs > button { flex: 1; justify-content: center; }
.st-tab[hidden] { display: none; }
.st-fmts { display: flex; flex-wrap: wrap; }
.st-inline { grid-template-columns: auto auto; justify-content: start; }
.st-sel.ux-select { height: 34px; width: auto; padding: 0 32px 0 10px; font-size: .875rem; background-position: right 10px center; }
.st-code.ux-textarea { width: 100%; min-height: 0; font: 400 12px/1.5 var(--ux-mono); white-space: pre; overflow: auto; }
.st-cl { --gap: 8px; }
.st-cl .ux-btn svg { width: 16px; height: 16px; }
.st-file { position: relative; overflow: hidden; }
.st-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-file:focus-within { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.st-search.ux-search { height: 42px; border-radius: 12px; }
.st-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; }
.st-results:empty { display: none; }
.st-res { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 10px 4px 7px; border: 1px solid transparent; border-radius: var(--ux-r-sm); background: var(--ux-surface-2); color: var(--ux-text); cursor: pointer; }
.st-res:hover { border-color: var(--ux-line-strong); background: var(--ux-hover); }
.st-res:focus-visible { outline-offset: -2px; } /* .st-results scrolls and would clip the ring */
.st-res span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ux-muted); }

/* view toggles */
.st-vlist { display: grid; }
.st-vrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--ux-line); background: none; color: var(--ux-text); font: 500 .875rem/1.2 var(--ux-font); text-align: left; cursor: pointer; }
.st-vrow:last-child { border-bottom: 0; }
.st-tg { position: relative; width: 34px; height: 20px; flex: none; border-radius: 99px; background: var(--ux-line-strong); transition: background var(--ux-dur); }
.st-tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--ux-dur) var(--ux-ease); }
.st-vrow[aria-pressed="true"] .st-tg { background: var(--ux-accent); }
.st-vrow[aria-pressed="true"] .st-tg::after { transform: translateX(14px); }

/* layers, my icons, checks */
.st-mini { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ux-muted); cursor: pointer; }
.st-mini:hover { background: var(--ux-hover); color: var(--ux-text); }
.st-layers, .st-mine, .st-lint { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.st-layer { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; }
.st-layer.is-sel { background: var(--ux-accent-soft); }
.st-layer.is-hidden .st-lname { opacity: .5; }
.st-lname { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ux-text); text-align: left; font-size: .875rem; font-weight: 500; cursor: pointer; }
.st-lname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-lname small { font: 400 11px/1 var(--ux-mono); color: var(--ux-muted); }
.st-lname:hover { background: var(--ux-hover); }
.st-empty { padding: 4px 2px; }
.st-myi { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 10px; }
.st-myi:hover { background: var(--ux-surface-2); }
.st-myp { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--ux-line); border-radius: 10px; background: var(--ux-surface-2); color: var(--ux-text); }
.st-myn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .875rem/1.2 var(--ux-mono); }
.st-mya { display: flex; }
.st-li { position: relative; padding-left: 16px; font-size: .8125rem; line-height: 1.45; }
.st-li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ux-gold); }
.st-li--bad::before { background: #E5484D; }
.st-li--ok::before { background: #2FA36B; }
.st-li button { padding: 3px 0; border: 0; background: none; text-align: left; color: var(--ux-text); cursor: pointer; }
.st-li button:hover { color: var(--ux-accent); text-decoration: underline; }
.st-li span { display: block; padding: 3px 0; color: var(--ux-muted); }

/* toast + dialog */
.st-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 12px; background: var(--ux-tip-bg); color: var(--ux-tip-text); font-size: .875rem; box-shadow: var(--ux-e3);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity var(--ux-dur), transform var(--ux-dur) var(--ux-ease); }
.st-toast.on { opacity: 1; transform: translate(-50%, 0); }
.st-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid var(--ux-line); border-radius: var(--ux-r-xl); background: var(--ux-surface); color: var(--ux-text); box-shadow: var(--ux-e4); }
.st-dialog::backdrop { background: rgb(18 14 32 / .45); }
.st-dialog h2 { font-size: 1.25rem; }
.st-keys-t { width: 100%; margin-bottom: 16px; border-collapse: collapse; font-size: .875rem; }
.st-keys-t th, .st-keys-t td { padding: 6px 4px; border-bottom: 1px solid var(--ux-line); text-align: left; vertical-align: top; }
.st-keys-t th { width: 44%; font-weight: 400; }
.st-keys-t .ux-kbd { width: auto; height: auto; min-height: 24px; padding: 3px 7px; white-space: normal; font-size: 11px; }

/* narrow laptops: a slimmer inspector */
@media (max-width: 1099px) { .st-body { grid-template-columns: 52px minmax(0, 1fr) 248px; } .st-pair .st-swv { display: none; } .st-row { grid-template-columns: 70px minmax(0, 1fr); } .st-bt { display: none; } }

/* phones and small tablets: canvas first, tools in a bottom bar, inspector as a sheet, popovers as sheets */
@media (max-width: 759px) {
  .st { display: block; height: auto; }
  .st-wrap > .ux-container { padding-inline: 8px; }
  .st-top { flex-wrap: wrap; gap: 6px 4px; padding: 6px 8px; }
  .st-top > * { flex: none; }
  .st-top #stExportB { margin-left: auto; }
  .st-grow, .st-sep { display: none; }
  .st-name .ux-input { width: 116px; }
  .st-body { display: flex; flex-direction: column; }
  .st-stage { order: 1; }
  .st-vp { flex: none; padding: 8px; }
  .st-pv { padding: 8px; } .st-pv .st-seg { margin-left: 0; } .st-sw { gap: 9px; padding: 6px 8px 5px; }
  .st-rail { order: 2; position: sticky; bottom: 0; z-index: 20; flex-direction: row; justify-content: space-between; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--ux-line); border-radius: 0 0 var(--ux-r-xl) var(--ux-r-xl); box-shadow: 0 -8px 20px -14px rgb(var(--ux-sh) / .4); }
  .st-tool { flex: 1 1 0; width: auto; min-width: 0; height: 44px; }
  .st-tip { display: none; }
  .st-adjust { display: grid; }
  .st-ins { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 72vh; border: 1px solid var(--ux-line); border-radius: 18px 18px 0 0; box-shadow: var(--ux-e4);
    transform: translateY(105%); visibility: hidden; transition: transform var(--ux-dur) var(--ux-ease), visibility 0s linear var(--ux-dur); }
  .st-ins.is-open { transform: none; visibility: visible; transition: transform var(--ux-dur) var(--ux-ease); }
  .st-ins-x { display: inline-grid !important; }
  .st-ins-b { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .st-row { grid-template-columns: 92px minmax(0, 1fr); } .st-pair .st-swv { display: inline; }
  .st-pop, .st-pop--wide { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: 78vh; border-radius: 18px 18px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .st-toast { bottom: auto; top: calc(var(--ux-header-h) + 8px); transform: translate(-50%, -12px); } .st-toast.on { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .st-toast, .st-tip, .st-ins, .st-tg, .st-tg::after { transition: none !important; } }