/* Trial: the studio (the generator editor) after Apple's design talks - the
   apple-design and emil-design-eng skills. Loaded by ui-flag.js on ?ui=next for
   pages whose flag script says data-sheet="studio"; scoped to
   html[data-ui="next"], so the current studio is untouched.

   - Materials: the inspector is a floating glass pane over the scene (the
     canvas already runs under it), heavier and blurrier than the small chips.
   - One status voice: "Print-ready" is the one green thing; the gate line under
     it goes quiet, red only for a failure.
   - The notice is a calm card with an amber dot, not orange text.
   - Controls a finger can hit: taller segments and a bigger slider knob with a
     wider hit row; every press answers (scale .97).
   - Reduced motion and reduced transparency are honoured. */

html[data-ui="next"] { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* ---------------------------------------------------------------- the inspector */
html[data-ui="next"] .panel {
  background: rgba(20, 20, 22, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.16);          /* the lit edge */
  border-radius: 24px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 2px 10px -4px rgba(0, 0, 0, 0.5);
}
html[data-ui="next"] .panel-head { padding: 16px 20px; }
html[data-ui="next"] .panel-scroll { padding: 4px 20px; }
html[data-ui="next"] .panel-dock { background: transparent; padding: 14px 20px 16px; }
html[data-ui="next"] .panel-dock .btn { height: 44px; border-radius: 999px; }
html[data-ui="next"] .panel-dock .dock-download { font-size: 15px; font-weight: 600; }

/* Section titles lead; labels and values are a quieter step below. */
html[data-ui="next"] .block-head { padding: 20px 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
html[data-ui="next"] .row .val, html[data-ui="next"] .row output { color: var(--ink-mid); }

/* Segments: taller, and the chosen one slides rather than blinks. */
html[data-ui="next"] .segmented { padding: 4px; gap: 2px; background: rgba(0, 0, 0, 0.28); }
html[data-ui="next"] .seg { min-height: 34px; padding: 8px 12px; font-size: 13px;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
html[data-ui="next"] .seg:active:not([disabled]) { transform: scale(0.97); }

/* Sliders: a bigger knob on a slightly heavier track, and a taller row to grab. */
html[data-ui="next"] .row input[type="range"] { height: 24px; margin-top: 8px; }
html[data-ui="next"] .row input[type="range"]::-webkit-slider-runnable-track { height: 4px; }
html[data-ui="next"] .row input[type="range"]::-moz-range-track { height: 4px; }
html[data-ui="next"] .row input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
html[data-ui="next"] .row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
html[data-ui="next"] .row input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ---------------------------------------------------------------- the scene's chrome */
html[data-ui="next"] .seg-pills { padding: 4px; background: rgba(20, 20, 22, 0.66);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, 0.08); }
html[data-ui="next"] .seg-pills .view-btn { padding: 7px 13px; transition: background .15s ease, transform .12s var(--ease-out); }
html[data-ui="next"] .view-btn:active, html[data-ui="next"] .btn:active:not([disabled]),
html[data-ui="next"] .cost-btn:active { transform: scale(0.97); }

/* One green thing: the status. The gate line beside it is detail, not news. */
html[data-ui="next"] .meta .gate .chip[data-ok] .v,
html[data-ui="next"] .meta .gate .chip[data-ok] .k { color: var(--ink-dim); }
html[data-ui="next"] .meta .gate .chip .k { color: var(--ink-faint); }

/* The notice: a calm card, its urgency in a dot, not in the colour of every word. */
html[data-ui="next"] .notice { position: relative; padding: 12px 14px 12px 30px; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; background: rgba(20, 20, 22, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink-mid); font-size: 12.5px; }
html[data-ui="next"] .notice::before { content: ""; position: absolute; left: 13px; top: 17px; width: 7px; height: 7px;
  border-radius: 50%; background: #ffb36b; box-shadow: 0 0 0 3px rgba(255, 179, 107, 0.16); }
html[data-ui="next"] .notice[data-kind="error"]::before { background: #ff8a8a; box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.16); }
html[data-ui="next"] .notice[data-kind="gate"]::before { background: var(--ink-dim); box-shadow: none; }

/* Hover lights only where a mouse hovers. */
@media (hover: none) {
  html[data-ui="next"] .seg:hover { color: var(--ink-dim); }
  html[data-ui="next"] .seg[aria-pressed="true"]:hover { color: #080808; }
}

/* ---------------------------------------------------------------- user settings */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="next"] .seg:active, html[data-ui="next"] .view-btn:active,
  html[data-ui="next"] .btn:active, html[data-ui="next"] .cost-btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-ui="next"] .panel, html[data-ui="next"] .seg-pills, html[data-ui="next"] .notice {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #161618; }
}
@media (max-width: 900px) {
  /* Stacked on a phone the panel is the page, not a pane over the scene. */
  html[data-ui="next"] .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); border-radius: 20px; }
  html[data-ui="next"] .seg { min-height: 40px; }
  /* The dock rides over the settings here: it needs its own ground. */
  html[data-ui="next"] .panel-dock { background: rgba(20, 20, 22, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

/* The AI line's card lives in ui-figma-nav.css (the makers map has it too). */