/* Customize drawer (studio.js, studio-more.js). Uses the page's colour tokens from index.html. */
.studio-open { position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding: 13px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--glass); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.studio-open[hidden], .studio[hidden] { display: none; }

.studio { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 74%; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; border-top: 1px solid var(--rule); background: rgb(10 13 26 / 0.86); color: var(--ink); font: 14px var(--sans); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 760px) {
  .studio { left: auto; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: 12px; width: 360px; max-height: none; border: 1px solid var(--rule); border-radius: 18px; }
}
.studio-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 14px 16px 10px; background: rgb(10 13 26 / 0.97); }
.studio-head h2 { flex: 1; }
.studio-finale { padding: 8px 12px; border: 1px solid rgb(255 180 92 / 0.45); border-radius: 999px; background: rgb(255 180 92 / 0.12); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.studio-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.studio-done { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--spark); color: #1a1006; font: 600 14px var(--sans); cursor: pointer; }


.studio-section { padding: 14px 0 4px; border-bottom: 1px solid var(--rule); }
.studio-section:last-of-type { border-bottom: 0; }
.studio-section h3 { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-sub { margin: 4px 0 6px; color: var(--muted); font-size: 12px; }

/* The Looks: two to a row, each a picture, a name, a line about it and its colours. */
.studio-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.studio-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px 10px 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: rgb(233 237 245 / 0.06); color: var(--ink); font: 12px/1.25 var(--sans); text-align: left; cursor: pointer; }
.studio-card-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; line-height: 1; }
.studio-card-icon .look-icon { display: block; }
.studio-card-name { font-weight: 600; font-size: 13px; }
.studio-card-line { grid-column: 2; color: var(--muted); font-size: 11px; }
.studio-card-strip { grid-column: 1 / -1; height: 5px; margin: 8px -10px 0; }

.studio-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-swatch { width: 36px; height: 36px; padding: 0; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px var(--rule); cursor: pointer; }

.studio-groups .studio-chips + .studio-sub { margin-top: 10px; }
.studio-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-chip { padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--muted); font: 13px var(--sans); cursor: pointer; }

.studio-sliders { display: grid; gap: 14px; padding-bottom: 6px; }
.studio-slider { display: grid; grid-template-columns: 64px 1fr; align-items: center; column-gap: 12px; }
.studio-slider-name { font-weight: 600; }
.studio-slider input { width: 100%; margin: 0; accent-color: var(--spark); }
.studio-ends { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }

.studio-switches { display: grid; gap: 4px; }
.studio-switch { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; }
.studio-switch input { appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: rgb(233 237 245 / 0.18); cursor: pointer; transition: background 0.2s; }
.studio-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform 0.2s; }
.studio-switch input:checked { background: var(--spark); }
.studio-switch input:checked::after { transform: translateX(18px); }

.studio-segments { display: flex; padding: 3px; border-radius: 999px; background: rgb(233 237 245 / 0.08); }
.studio-segment { flex: 1; padding: 8px 6px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 13px var(--sans); cursor: pointer; }

.studio-footer { display: flex; justify-content: space-between; padding: 14px 0 0; }

/* More options: folded away under one row. */
.studio-more { margin-top: 14px; border-top: 1px solid var(--rule); }
.studio-more > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: var(--ink); font: 600 14px var(--sans); cursor: pointer; list-style: none; }
.studio-more > summary::-webkit-details-marker { display: none; }
.studio-more > summary::after { content: '▾'; color: var(--muted); transition: transform 0.2s; }
.studio-more[open] > summary::after { transform: rotate(180deg); }
.studio-more > summary:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
.studio-more .studio-section:first-of-type { padding-top: 0; }
.studio-link { padding: 4px 0; border: 0; background: none; color: var(--muted); font: 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Chosen states. */
.studio-card[aria-pressed="true"], .studio-chip[aria-pressed="true"] { border-color: var(--spark); background: rgb(255 180 92 / 0.16); color: var(--ink); }
.studio-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--spark); }
.studio-segment[aria-pressed="true"] { background: var(--spark); color: #1a1006; font-weight: 600; }
:is(.studio-open, .studio-done, .studio-finale, .studio-card, .studio-swatch, .studio-chip, .studio-segment, .studio-link):focus-visible,
.studio-switch input:focus-visible, .studio-slider input:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }
@media (hover: hover) {
  .studio-card:hover, .studio-chip:hover, .studio-finale:hover { background: rgb(233 237 245 / 0.12); }
}

/* While customizing, the drawer is the only control on screen. */
.customizing :is(.send-open, .walk-hint, .panel, .debug) { display: none; }
.studio-section[hidden], .studio-words[hidden] { display: none; }
:is(.gift-mode, .building, .hero-mode) .studio-open { display: none; }
.embed-mode :is(.studio-open, .studio) { display: none !important; }

/* Greeting summary and clear text labels for Deluxe effects. */
.studio-making { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgb(255 180 92 / 0.12); color: var(--ink); font-size: 12px; line-height: 1.4; }
.studio-making[hidden] { display: none; }
.studio-chip.is-deluxe::after { content: ' · Deluxe'; color: var(--spark); font-size: 11px; }
.builder-customize { flex: none; }

/* Playing with the show first? One clear next step, always in reach: send this show. */
.studio-sendbar { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgb(10 13 26 / 0.98) 70%, rgb(10 13 26 / 0)); }
.studio-sendbar[hidden] { display: none; }
.studio-send { width: 100%; padding: 14px; border: 0; border-radius: 999px; background: var(--spark); color: #1a1006; font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 6px 22px rgb(255 180 92 / 0.3); }
.studio-send small { display: block; margin-top: 1px; font: 500 11px var(--sans); opacity: 0.75; }
.studio-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Words in the sky: first in the drawer, since they're what people come for. */
.studio-words { margin: 4px 0 8px; padding: 12px; border: 1px solid rgb(255 180 92 / 0.45); border-radius: 12px; background: rgb(255 180 92 / 0.08); }
.studio-words-title { color: var(--ink); font: 600 15px var(--sans); text-transform: none; }
.studio-words-hint { margin-top: -2px; color: var(--muted); font-size: 12px; text-transform: none; }
.studio-words[hidden] { display: none; }
.studio-words-note { color: var(--muted); font-size: 12px; text-transform: none; }
.studio-words-note:empty { display: none; }

/* Panel visibility is explicit; hidden controls are absent from keyboard and layout. */
#app :is(.studio, .builder, .builder-bar, .panel) [hidden],
#app :is(.studio, .builder, .builder-bar, .panel)[hidden] { display: none !important; }
#app[data-panel="advanced"] .panel.lil-gui { display: block; z-index: 4; }
#app[data-panel="advanced"] :is(.send-open, .studio-open, .walk-hint, .debug) { display: none; }
.studio-card-tier { grid-column: 1 / -1; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.studio-card-plus { color: #ffd27a; }
.studio-look-detail { display: none; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.studio-look-detail:empty { display: none; }
.studio-help { margin: 3px 0 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.studio-candidate { display: grid; gap: 8px; }
.studio-candidate[hidden] { display: none; }
.studio-candidate .studio-send { font-size: 14px; }
.builder-choice { margin: 2px 0; color: #ffd27a; font-size: 13px; line-height: 1.45; }
.send-primary:disabled { cursor: default; opacity: 0.5; box-shadow: none; }
.studio :is(button, summary), .builder :is(button, input), .builder-bar button { min-height: 44px; }
.studio-switch { min-height: 44px; }
.studio-swatch { width: 44px; height: 44px; }
.studio-slider { grid-template-columns: 76px 1fr; }
.studio-slider input { min-height: 44px; }
.builder-bar { flex-wrap: wrap; }
#app .builder-plan.is-deluxe .builder-plan-lines li::before { content: '✓ '; }
.video-flow[hidden] { display: none !important; }
.video-pill { min-height: 44px; }
.video-cancel { top: calc(66px + env(safe-area-inset-top, 0px)); background: rgb(20 25 40 / 0.9); }

/* Compact phone Looks keep the name, colours and Deluxe disclosure on every card. */
@media (max-width: 759px) {
  .creator-show .studio-look-detail:not(:empty) { display: block; }
  .creator-show .studio-section { padding-top: 12px; }
  .creator-show .studio-section h3 { margin-bottom: 6px; font-size: 11px; }
  .creator-show .studio-making { margin: 0 0 7px; padding: 5px 8px; font-size: 11.5px; line-height: 1.35; }
  .creator-show .studio-looks { gap: 6px; }
  .creator-show .studio-card { position: relative; grid-template-columns: 20px minmax(0, 1fr); align-content: start; column-gap: 5px; row-gap: 3px; padding: 7px 7px 0; border-radius: 9px; }
  .creator-show .studio-card-icon { grid-row: auto; width: 20px; height: 20px; }
  .creator-show .studio-card-icon .look-icon { width: 20px; height: 20px; }
  .creator-show .studio-card-name { font-size: 12px; line-height: 1.15; overflow-wrap: anywhere; }
  .creator-show .studio-card-line { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .creator-show .studio-card-tier { margin: 0; font-size: 11px; line-height: 1.2; }
  .creator-show .studio-card-strip { height: 3px; margin: 3px -7px 0; }
}
@media (min-width: 390px) and (max-width: 759px) {
  .creator-show .studio-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}