/* Orli v3 site · the Orli studio (make/studio.html)
   ---------------------------------------------------------------------------
   One screen, like the studio in Orli Schools: the turntable on the left (7
   of 12 columns) on the warm card, the panel on the right (title, the five
   tabs, the choices scrolling in their own box, then Surprise me and This
   is my Orli). Under 900px the turntable sits on top and stays in view
   under the header while the choices scroll past, so every tap shows.
   System tokens and components only: the approved buttons, the one field,
   chips and choices; picture tiles are the studio's own.
   ------------------------------------------------------------------------- */

html:not(.js) .st { display: none; }

.st-page { background: var(--o-canvas); }
/* --st-h: the studio's height on a wide screen, one window under the header. */
.st {
  --st-h: max(36rem, calc(100svh - var(--o-header-h)));
  width: min(100% - 2 * var(--o-gutter), var(--o-max-wide));
  margin-inline: auto;
  padding-block: var(--o-space-5) var(--o-space-7);
  display: grid; gap: var(--o-space-4) var(--o-space-7);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "stage" "panel";
}
.st__top { grid-area: top; display: grid; justify-items: start; gap: var(--o-space-2); min-width: 0; }
.st__stage-col { grid-area: stage; }
.st__panel { grid-area: panel; }
@media (min-width: 900px) {
  .st {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage top" "stage panel";
    align-items: start;
  }
  /* Making: the whole studio in one window; the choices scroll in their own box. */
  .st[data-at="make"] { height: var(--st-h); }
  .st[data-at="make"] .st__panel { align-self: stretch; height: 100%; min-height: 0; }
}
@media (min-width: 1100px) {
  .st { width: min(100% - 2 * var(--o-gutter), var(--o-max)); }
}

/* ================================================================ stage */
.st__stage-col { display: grid; gap: var(--o-space-3); min-width: 0; }
@media (min-width: 900px) {
  .st__stage-col { position: sticky; top: calc(var(--o-header-h) + var(--o-space-5)); }
}
.st__stage {
  position: relative; overflow: clip; isolation: isolate;
  height: calc(var(--st-h) - var(--o-space-5) - var(--o-space-7) - var(--o-space-3) - var(--o-btn-h-sm));
  min-height: 20rem;
  border-radius: var(--o-r-card);
  background: var(--o-warm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o-ink) 5%, transparent);
  touch-action: pan-y;
  cursor: grab;
}
.st__stage:active { cursor: grabbing; }
.st__stage:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.st__canvas, .st__picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.st__canvas { opacity: 0; transition: opacity 400ms var(--o-ease); }
.st__stage.is-live .st__canvas { opacity: 1; }
.st__picture { object-fit: contain; padding: 12%; }
.st__wait {
  position: absolute; inset: auto 0 var(--o-space-5); text-align: center;
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2);
  transition: opacity 300ms var(--o-ease);
}
.st__stage.is-live .st__wait, .st__stage.is-picture .st__wait { opacity: 0; }
/* Phones: the turntable stays in view under the header while the choices scroll past. */
@media (max-width: 899.98px) {
  .st__stage-col {
    position: sticky; top: var(--o-header-h); z-index: 2;
    padding-block: var(--o-space-2); margin-block: calc(-1 * var(--o-space-2));
    background: var(--o-canvas);
  }
  .st__stage { height: clamp(11rem, 30svh, 20rem); min-height: 0; }
}
/* A short window or large text: the stage stays in the page rather than covering it. */
@media (max-width: 899.98px) and (max-height: 600px) { .st__stage-col { position: static; } }

/* The bar under the picture: undo and redo, the hint, turn. Words on flat ground. */
.st__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-2) var(--o-space-3); }
.st__bar-group { display: flex; gap: var(--o-space-2); }
.st__hint { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: balance; }
@container st-stage (width < 26em) { .st__bar { flex-wrap: wrap; } .st__hint { order: 3; flex-basis: 100%; } }
.st__stage-col { container: st-stage / inline-size; }
@media (max-width: 899.98px) { .st__hint { display: none; } }
.st__off { margin: 0; }
/* The line under a picture (3D off, or three.js couldn't load on a school network), with Try again beside it in the second case. */
.st__off-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-4); }
.st__off-row:has(> .st__off[hidden]) { display: none; }
.st__off-row .st__off { flex: 1 1 18em; }
.st__retry { flex: none; }
.st__retry[hidden], .st__print-off[hidden] { display: none; }
.st__print-off { margin: 0; }
/* Wide: the stage gives up a row's room for the line, so it all stays in one window. */
@media (min-width: 900px) {
  .st__stage-col:has(.st__off:not([hidden])) .st__stage { height: calc(var(--st-h) - var(--o-space-5) - var(--o-space-7) - 2 * var(--o-space-3) - 2 * var(--o-btn-h-sm)); }
}
/* A picture can't turn: the turn buttons and their hint step aside (keeping their room). */
.st__stage.is-picture ~ .st__bar :is(.st__hint, .st__bar-group:has([data-turn])) { visibility: hidden; }
/* Phones: with the line and Try again under it, the picture would fill half the screen, so it stays in the page. */
@media (max-width: 899.98px) { .st__stage-col:has(.st__retry:not([hidden])) { position: static; } }
.st__ico { --size: 22px; }
.st__ico--flip { scale: -1 1; }

/* ================================================================ panel */
.st__panel { min-width: 0; }
.st__step { display: grid; gap: var(--o-space-4); align-content: start; }
.st__step[hidden] { display: none; }
.st__back { justify-self: start; margin-inline-start: calc(-1 * var(--o-space-3)); }
.st__head { display: grid; gap: var(--o-space-2); }
.st__title { max-inline-size: none; }
.st__title:focus { outline: none; }
.st__lead { color: var(--o-ink-2); }
@media (min-width: 900px) {
  /* One screen: the choices scroll in their own box, so the buttons stay in view. */
  .st__step[data-step="make"] { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* ---------------------------------------------------------------- tabs
   As in the Schools studio: an icon over each label, the chosen tab filled
   with ink. Arrow keys move between them. */
.st__tabs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--o-space-1);
  padding: var(--o-space-1); border-radius: calc(var(--o-r-control) + 4px); background: var(--o-warm);
}
.st__tabs [role="tab"] {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 56px; padding: var(--o-space-1); margin: 0;
  border: 0; border-radius: var(--o-r-control); background: none; cursor: pointer;
  font: var(--o-weight-ui) var(--o-text-small) / 1.15 var(--o-font-ui); color: var(--o-ink-2);
  overflow-wrap: anywhere; text-align: center;
  transition: background-color var(--o-t-interact) var(--o-ease), color var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .st__tabs [role="tab"]:hover { color: var(--o-ink); background: var(--o-surface); } }
.st__tabs [role="tab"][aria-selected="true"] { background: var(--o-ink); color: var(--o-paper); }
.st__tabs [role="tab"]:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; }
.st__tab-ico { width: 22px; height: 22px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Narrow and large text: the labels alone, wrapping. */
@container st-panel (width < 17em) {
  .st__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st__panel { container: st-panel / inline-size; }

/* ------------------------------------------------------------- choices */
.st__scroll { min-height: 0; padding: var(--o-space-1) var(--o-space-1) var(--o-space-4); margin-inline: calc(-1 * var(--o-space-1)); }
@media (min-width: 900px) {
  .st__scroll {
    overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    /* a soft edge where the choices run on under the buttons */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--o-space-5)), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--o-space-5)), transparent);
    padding-block-end: var(--o-space-6);
  }
}
.st__tabpanel { display: grid; gap: var(--o-space-5); }
.st__tabpanel[hidden] { display: none; }
.st__tabpanel:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; border-radius: var(--o-r-control); }
.st__group { display: grid; gap: var(--o-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.st__legend { padding: 0; margin-block-end: var(--o-space-3); font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-ink); }

/* Picture tiles: a radio each. The picture is a render of that choice on your own Orli.
   Six across on a laptop (fpol-home), so the six shapes are one row and Colour is in view without scrolling. */
.st__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 4.25rem), 1fr)); gap: var(--o-space-3) var(--o-space-2); }
.st-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--o-space-1); cursor: pointer; min-width: 0; }
.st-tile > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.st-tile__pic {
  position: relative; display: block; width: 100%; aspect-ratio: 1; align-self: start;
  border-radius: var(--o-r-control); background: var(--o-surface);
  box-shadow: inset 0 0 0 1px var(--o-line);
  transition: box-shadow var(--o-t-interact) var(--o-ease), background-color var(--o-t-interact) var(--o-ease);
}
.st-tile__pic img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.st-tile__none { position: absolute; inset: 30%; border-radius: 50%; border: 2px dashed var(--o-n3); }
.st-tile__wait { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 56%, var(--o-warm) 0 28%, transparent 29%); }
.st-tile__name { font: var(--o-weight-body) var(--o-text-small) / 1.25 var(--o-font-body); color: var(--o-ink-2); text-align: center; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .st-tile:hover .st-tile__pic { box-shadow: inset 0 0 0 1px var(--o-n4); } }
.st-tile:has(input:checked) .st-tile__pic { background: var(--o-paper); box-shadow: inset 0 0 0 2px var(--o-ink); }
.st-tile:has(input:checked) .st-tile__name { color: var(--o-ink); font-weight: var(--o-weight-strong); }
.st-tile:has(input:checked) .st-tile__pic::after {
  content: ""; position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--o-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow: 0 0 0 2px var(--o-surface);
}
.st-tile:has(input:focus-visible) .st-tile__pic { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }

/* Colour swatches: a radio each, named for screen readers and on hover. */
.st__swatches { display: flex; flex-wrap: wrap; gap: var(--o-space-2); }
.st-swatch { position: relative; display: inline-grid; place-items: center; width: var(--o-target); height: var(--o-target); cursor: pointer; }
.st-swatch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.st-swatch__dot {
  width: 36px; height: 36px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o-ink) 18%, transparent);
  transition: box-shadow var(--o-t-interact) var(--o-ease);
}
.st-swatch:has(input:checked) .st-swatch__dot { box-shadow: 0 0 0 3px var(--o-canvas), 0 0 0 5px var(--o-ink); }
.st-swatch:has(input:focus-visible) .st-swatch__dot { outline: var(--o-focus-ring); outline-offset: 6px; }

/* Size: two sliders, each end named. */
.st__sliders { display: grid; gap: var(--o-space-2); }
.st__slider { display: grid; grid-template-columns: 3.5em minmax(0, 1fr) 3.5em; align-items: center; gap: var(--o-space-3); min-height: var(--o-target); font: var(--o-weight-ui) var(--o-text-small) / 1.2 var(--o-font-ui); color: var(--o-ink-2); }
.st__slider-end:last-child { text-align: end; }
.st__slider input[type="range"] { width: 100%; min-width: 0; height: var(--o-target); margin: 0; accent-color: var(--o-action); cursor: pointer; }
.st__slider input[type="range"]:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; border-radius: var(--o-r-pill); }

/* Move: a part, then the buttons. */
.st__mover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-2); max-inline-size: 22rem; }
.st__mover .o-btn { width: 100%; justify-content: center; }
.st__reset { justify-self: start; min-height: var(--o-target); padding: 0; border: 0; background: none; cursor: pointer; font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); }
.st__mover-note { margin: 0; }

/* More below: a quiet cue at the foot of the choices while there are more of them to scroll to (wide screens). */
.st__more {
  display: none; grid-row: 2; grid-column: 1; align-self: end; justify-self: center; z-index: 1;
  margin-block-end: var(--o-space-2); --pill-bg: var(--o-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--o-ink) 10%, transparent), inset 0 0 0 1px var(--o-line);
  cursor: pointer; transition: opacity var(--o-t-interact) var(--o-ease);
}
.st__more-arrow { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 900px) {
  .st__step[data-step="make"] > .st__tabs { grid-row: 1; }
  .st__step[data-step="make"] > .st__scroll { grid-row: 2; grid-column: 1; }
  .st__step[data-step="make"] > .st__foot { grid-row: 3; }
}
@media (min-width: 900px) and (min-height: 820px) {
  .st__more:not([hidden]) { display: inline-flex; }
}
/* A short laptop window (under about 820 px): no box inside the page. The choices run on down the page
   beside the turntable (which stays in view), and the two buttons stay at the foot of the window. */
@media (min-width: 900px) and (max-height: 819.98px) {
  .st[data-at="make"] { height: auto; }
  .st[data-at="make"] .st__panel { height: auto; }
  .st__step[data-step="make"] { height: auto; grid-template-rows: none; }
  .st__scroll { overflow: visible; -webkit-mask-image: none; mask-image: none; padding-block-end: var(--o-space-4); }
  .st__foot { position: sticky; bottom: 0; z-index: 1; padding-block: var(--o-space-3); background: var(--o-canvas); }
}

/* The two buttons, on a hairline, always in view on a wide screen. */
.st__foot { display: flex; flex-wrap: wrap; gap: var(--o-space-3); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
@media (max-width: 899.98px) {
  .st__foot { position: sticky; bottom: 0; z-index: 1; padding-block: var(--o-space-3); background: var(--o-canvas); }
}

/* ================================================================= done */
.st__name { max-inline-size: 26rem; }
.st__keep { display: grid; justify-items: start; gap: var(--o-space-2); padding-block-end: var(--o-space-5); border-block-end: 1px solid var(--o-line); }
.st__keep-note { margin: 0; }
.st__kept { display: flex; flex-wrap: wrap; gap: var(--o-space-2) var(--o-space-6); margin: var(--o-space-2) 0 0; }
.st__kept[hidden] { display: none; }
.st__take { display: grid; gap: var(--o-space-4); }
.st__take-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-4); }
@container st-panel (width >= 30em) { .st__take-row { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; } }
.st__print-preview { display: grid; gap: var(--o-space-1); margin: 0; justify-items: center; max-inline-size: 12rem; }
.st__print-preview canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--o-r-control); background: var(--o-warm); }
.st__print-preview[hidden] { display: none; }
.st__take-words { display: grid; gap: var(--o-space-3); min-width: 0; }
.st__status { margin: 0; min-height: 1.45em; color: var(--o-ink); }
.st__tips { border-block-start: 1px solid var(--o-line); padding-block-start: var(--o-space-3); }
.st__tips summary { min-height: var(--o-target); display: flex; align-items: center; cursor: pointer; font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); }
.st__tips summary:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; border-radius: 4px; }
.st__tips p { margin: var(--o-space-2) 0 0; color: var(--o-ink-2); max-inline-size: 60ch; }
.st__safety { margin: 0; max-inline-size: 60ch; }

/* ======================================================== motion levels */
html[data-motion="still"] .st :is(.st__canvas, .st__wait, .st-tile__pic, .st-swatch__dot, [role="tab"], .st__more) { transition: none; }

@media (forced-colors: active) {
  .st__stage { border: 1px solid CanvasText; }
  .st__tabs [role="tab"][aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .st__tab-ico, .st__ico { forced-color-adjust: none; background: currentColor; }
  .st-tile:has(input:checked) .st-tile__pic { outline: 3px solid Highlight; }
  .st-swatch__dot { forced-color-adjust: none; border: 1px solid CanvasText; }
  .st-swatch:has(input:checked) .st-swatch__dot { outline: 3px solid Highlight; outline-offset: 3px; }
}

/* At "This is my Orli": the step's own heading leads; the page title stays for screen readers. */
.st[data-at="done"] .st__top > .st__back { display: none; }
.st[data-at="done"] .st__top {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Phones: the two buttons side by side at the small size, so the bar under the choices stays one row. */
@media (max-width: 599.98px) {
  .st__foot { flex-wrap: nowrap; gap: var(--o-space-2); }
  .st__foot .o-btn { --h: var(--o-btn-h-sm); --px: 14px; --fs: .9375rem; --gap: 6px; --icon: 20px; flex: 1 1 auto; justify-content: center; min-width: 0; }
}