/*
 * The Studio (D169): a whole troph-e, described on the left and drawn on the
 * right, in the founders' Create screen's shape. The right side borrows the
 * review studio's pieces (trophy.css: .review__versions, .review__actions)
 * and the workbench's (prompts.css: .prompt-art, .prompt-spend), so a draw
 * here looks like the same object it is everywhere else.
 */

.studio {
  display: grid;
  grid-template-columns: var(--studio-brief-width) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* The panel itself is not sticky: it is taller than a laptop screen, and a
   sticky panel taller than the viewport hides its own Draw button. The Draw
   footer inside it is (.studio-brief__draw). */
.studio__brief {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}

/* A container of its own, so the draw's layout follows the room the draw
   actually has beside the 480px brief (D184), not the whole content column. */
.studio__stage {
  min-width: 0;
  container: studio-stage / inline-size;
}

.studio__recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Six across at the wide shell, folding below. */
.prompt-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(var(--studio-tile-min), 1fr));
  gap: var(--space-4);
}

/* --- The brief ----------------------------------------------------------- */

.studio-brief {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.studio-brief__versions {
  margin-top: var(--space-3);
}

/* A step is a <details> (D172). Closed, it is one line: the number, the
   question, and what was chosen. Open, the fields. One is open at a time
   (accordion controller), so a filled brief is three lines. */
.studio-brief__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.studio-brief__step[open] {
  border-color: var(--border-raised);
}

.studio-brief__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  border: 0;
}

/* The founders' step heading: a number in a gold-ringed disc, then the
   question, then — closed — the answer, in the shell's secondary text. */
.studio-brief__legend {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto;
  grid-template-areas: "number title marker" "number summary marker";
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  list-style: none;
  cursor: pointer;
}

/* Open, the row's wash squares off where the fields continue under it. */
.studio-brief__step[open] > .studio-brief__legend {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.studio-brief__legend::-webkit-details-marker {
  display: none;
}

/* The marker is decoration: the alternative text after the slash keeps it
   out of the summary's accessible name. */
.studio-brief__legend::after {
  grid-area: marker;
  content: "▸" / "";
  color: var(--text-gold);
  font-size: var(--type-caption-size);
}

.studio-brief__legend .studio-brief__number {
  grid-area: number;
}

.studio-brief__step[open] > .studio-brief__legend::after {
  content: "▾" / "";
}

.studio-brief__legend:hover {
  background: var(--surface-hover-row);
}

.studio-brief__legend:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-md);
}

.studio-brief__step-title {
  grid-area: title;
  white-space: nowrap;
}

/* The answer: one line, cut with an ellipsis rather than wrapped, so a step
   is always the same height closed. Gone while the step is open, where the
   fields say it in full. The text is its own block inside the row: an
   ellipsis never applies to a flex container's bare text, and a bare text
   item cannot shrink, so a long name pushed the swatches out of sight. */
.studio-brief__summary {
  grid-area: summary;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-regular);
}

.studio-brief__summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-brief__step[open] .studio-brief__summary {
  display: none;
}

.studio-brief__swatches {
  display: inline-flex;
  flex-shrink: 0;
  gap: var(--space-1);
}

/* A club colour is content, never chrome (D32): it arrives as a custom
   property on the swatch's own style attribute, as the club preview's do. */
.studio-brief__swatch {
  display: inline-block;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--swatch, var(--gold-500));
}

.studio-brief__number {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border: var(--border-width) solid var(--gold-500);
  border-radius: var(--radius-pill);
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  line-height: 1;
}

.studio-brief__pair,
.studio-brief__colours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}

/* The tiers: a word each, three across, on a card padded to the word. The
   library's card is padded for a title, a tag and a description; here there
   is only the title, and the full padding left the list taller than the
   picture it chooses a style for. The families carry their one line again
   (D184), so they are two across and start at the top: three across left a
   word or two per line in a 480 brief. */
.studio-brief__tiers,
.studio-brief__families {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.studio-brief__families { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.studio-brief__tiers .ui-choice-card,
.studio-brief__families .ui-choice-card {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

.studio-brief__families .ui-choice-card { align-items: flex-start; }

/* A family's name is a platform admin's to edit (D152), and a long one must
   break rather than run under the next card. */
.studio-brief__tiers .ui-choice-card__title,
.studio-brief__families .ui-choice-card__title {
  overflow-wrap: anywhere;
}

/* Elite's two starting points carry a sentence each, so they sit side by
   side at a card's ordinary gap, padded a little closer than the library's
   for the narrower column. */
.studio-brief__families--elite {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-brief__families--elite .ui-choice-card {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}

.studio-brief__note {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.studio-brief__photo {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}

.studio-brief__photo-image {
  inline-size: var(--review-thumb-size);
  block-size: var(--review-thumb-size);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.studio-brief__photo-note {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.studio-brief__photo-note strong {
  display: block;
  color: var(--text-primary);
}

.studio-brief__upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.studio-brief__versions {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-default);
}

/* How it is made (D185): ours or the founders', under a rule like the
   versions below it, since neither is a step of the troph-e. */
.studio-brief__flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-default);
}

/* A logo is shown whole, never cropped as the award photograph is. */
.studio-brief__logo-image {
  object-fit: contain;
}

.studio-brief__version-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The Draw footer stays at the foot of the viewport while the panel scrolls
   past it, so the button is never a screen below the field just changed. The
   player shell's sticky CTA recipe (shells.css): a wash and a blur, no shadow
   (D29). It spans the panel's padding so what scrolls behind it is blurred
   edge to edge, and takes the panel's bottom corners at its end. */
.studio-brief__draw {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: var(--border-width) solid var(--border-default);
  border-radius: 0 0 calc(var(--radius-lg) - var(--border-width)) calc(var(--radius-lg) - var(--border-width));
  background: var(--surface-1);
  backdrop-filter: blur(var(--blur-overlay));
  -webkit-backdrop-filter: blur(var(--blur-overlay));
}

.studio-brief__problem {
  color: var(--danger-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* --- The draw ------------------------------------------------------------ */

.studio-stage__empty {
  display: grid;
  align-content: center;
  min-block-size: var(--prompt-art-large);
}

.studio-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--review-side-width);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-5);
}

.studio-stage__main,
.studio-stage__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* The picture IS the page here, as on the review studio: it takes its column. */
.studio-stage__art turbo-frame {
  display: block;
}

.studio-stage__art .prompt-art {
  max-inline-size: none;
  border-radius: var(--radius-lg);
}

/* The founders' result card under the picture: tier, player, award, and the
   numbers a platform admin reads. */
.studio-stage__facts {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.studio-stage__eyebrow {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-stage__name {
  color: var(--text-primary);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
  font-weight: var(--font-weight-semibold);
}

.studio-stage__award {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.studio-stage__numbers {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  text-align: right;
}

.studio-stage__numbers dt {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.studio-stage__numbers dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.studio-stage__version-pending {
  display: block;
  border: var(--border-width) dashed var(--border-default);
}

/* --- The steps ----------------------------------------------------------- */

/* The steps carry their own numbered discs, so the list's markers go. */
.studio-steps__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-steps__step {
  border-top: var(--border-width) solid var(--border-default);
}

.studio-steps__step:first-child {
  border-top: 0;
}

.studio-steps__step--waiting {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.studio-steps__summary {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  list-style: none;
  cursor: pointer;
}

.studio-steps__summary::-webkit-details-marker {
  display: none;
}

.studio-steps__summary:hover {
  background: var(--surface-hover-row);
}

.studio-steps__summary:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.studio-steps__position {
  display: inline-grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
}

.studio-steps__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.studio-steps__label .workbench-muted {
  font-size: var(--type-caption-size);
}

.studio-steps__number {
  min-inline-size: var(--space-16);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.studio-steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 0 var(--space-4) calc(var(--space-6) + var(--space-3));
}

.studio-steps__caption {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
}

.studio-steps__error {
  color: var(--danger-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* --- The gallery --------------------------------------------------------- */

.studio-tile.is-current .prompt-art {
  border-color: var(--gold-100);
}

.studio-tile__caption {
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

.studio-tile__tier {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-tile__name {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
}

.studio-tile__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* The brief and the draw stay side by side down to an iPad held sideways
   (D170): the founders' layout is the point of the Studio, and stacking it at
   1100 put the picture a screen below the form on a 1024 tablet. What gives
   first is the draw's own side column, which drops under the picture once the
   draw's half of the page is too narrow to hold both.

   THE PICTURE BEFORE THE SIDE COLUMN (D184). The side column drops under the
   picture unless the draw's half can hold a picture of at least 420px beside
   it: 420 + the 20px gap + the 320px column is 760. Asked of the stage
   itself, not the content column. Keyed to the content column at 1000px, as
   it was, the side column stayed beside the picture from a 1300px window up
   and squeezed it to under 300px; inside the 1200px page cap the stage is at
   most 696px, so on a laptop the picture now takes the stage's whole width.

   Container queries, not the window (D176): the rail takes 240px of the
   window, so a window width no longer says how much room the page has. */
@container studio-stage (max-width: 759px) {
  .studio-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container admin-content (max-width: 819px) {
  .studio {
    grid-template-columns: minmax(0, 1fr);
  }
}