/* The cosmetic studio: the character on the left, everything that dresses them on the right.
   The appearance controls themselves are styled in item.css, shared with the item preview. */
.studio {
    display: flex;
    gap: 16px;
    align-items: stretch;
    max-width: 1400px;
    margin: 16px auto;
    padding: 0 16px;
}
.studio-stage {
    position: relative;
    /* Narrower than the space allows, on purpose. Everything drawn here is a standing figure -
       tall and narrow - so a stage that took all the width between the panels spent most of it on
       background either side of the character and pushed the figure's height off the bottom. */
    flex: 0 1 620px;
    min-width: 0;
    height: calc(100vh - 180px);
    min-height: 420px;
    background: #0f1114;
    border: 1px solid #2a323b;
    border-radius: 3px;
    cursor: grab;
    overflow: hidden;
}
.studio-stage:active { cursor: grabbing; }
.studio-stage canvas { display: block; width: 100%; height: 100%; }
.studio-stage canvas:focus-visible { outline: 2px solid #c8a84b; outline-offset: -2px; }
.studio-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #888;
}
/* The column scrolls in one place rather than as a whole. A fully equipped Warforged has eight
   appearance controls and two swatch grids under its ten worn things, and when the panel itself
   was the scroller all of it moved together - picking a skin colour scrolled the race selector off
   the top, and everything read as squeezed. Now the character controls and the buttons are always
   where they were, the equipment list takes what it needs, and the appearance section takes the
   rest of the height and scrolls inside itself. */
.studio-panel {
    flex: 1 1 320px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    max-height: calc(100vh - 180px);
    /* The last resort, for a window too short to hold even the equipment list. */
    overflow-y: auto;
}
.studio-panel h1 { margin: 0; font-size: 1.3rem; }
.studio-intro { margin: 0; color: #888; font-size: 0.85rem; }
/* No section is squeezed to make room for another. Left to shrink, the character controls were
   crushed until "Body" sat on top of the Equipment heading; only the appearance section gives way,
   and it scrolls inside itself instead. */
.studio-section { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 0 0 auto; }
/* The class sets a display, so it has to take hidden back itself. */
.studio-section[hidden] { display: none; }
/* What is being worn is shown in full and never squeezed: ten rows is the most there can be, and
   hiding one behind a scrollbar is how a rune arm came to be drawn on the character while its row
   was nowhere on the list. Only an outfit longer than any real one scrolls. */
.studio-equipment-section { flex: 0 0 auto; }
.studio-slots-scroll { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.studio-appearance-section { flex: 1 1 auto; min-height: 140px; }
.studio-appearance { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.studio-section h2 {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a939c;
}
.studio-controls { display: flex; flex-direction: column; gap: 2px; }
/* In the column the panel is part of the page rather than floating over the stage. */
.studio .appearance-panel { background: none; border: 0; padding: 0; }

.studio-slots { margin: 0; padding: 0; list-style: none; }
.studio-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid #222a32;
    font-size: 0.9rem;
}
.studio-slot-label {
    /* Wide enough for the longest of them, "Main hand", which at 74px overflowed its own box and
       pushed that row's value further right than every other row's. */
    flex: 0 0 92px;
    color: #8a939c;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.studio-slot a { flex: 1; min-width: 0; }
.studio-slot-note { flex-basis: 100%; color: #a08050; font-size: 0.75rem; }
/* Worn, but not by this body - a docent on an elf, body armour on a Warforged. Listed so it can
   be taken off, dimmed so it does not read as something that is on screen. */
.studio-slot.is-unworn a { color: #6f7883; }

/* The race list is long enough to want picking rather than stepping through. */
.studio-select {
    flex: 1;
    min-width: 0;
    background: #11161b;
    color: #d7dde3;
    border: 1px solid #2c343d;
    border-radius: 3px;
    padding: 2px 4px;
    font: inherit;
}
.studio-select:hover { border-color: #c8a84b; }
.studio-swap,
.studio-remove {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    color: #8a939c;
    border: 1px solid transparent;
    border-radius: 3px;
    line-height: 1;
    cursor: pointer;
}
.studio-remove:hover { color: #d08a8a; border-color: #4a3a3a; }
.studio-swap:hover { color: #c8a84b; border-color: #4a4433; }
.studio-empty { margin: 0; color: #888; font-size: 0.85rem; }

.studio-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.studio-clear { align-self: flex-start; }
.studio-clear,
.studio-spin,
.studio-share {
    background: #1b2128;
    color: #d6d8d8;
    border: 1px solid #3a4652;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}
.studio-clear:hover,
.studio-spin:hover,
.studio-share:hover { border-color: #c8a84b; }

/* Full screen is the whole browser window rather than the display, matching the item preview. */
.studio.is-full {
    position: fixed;
    inset: 0;
    z-index: 1100;
    max-width: none;
    margin: 0;
    padding: 12px;
    background: #0f1114;
}
.studio.is-full .studio-stage,
.studio.is-full .studio-panel { height: auto; max-height: none; }

@media (max-width: 900px) {
    .studio { flex-direction: column; }
    .studio-stage { height: 60vh; }
    /* Stacked under the stage there is the whole page to scroll, so nothing has to scroll inside
       itself and every section is shown at its full height. */
    .studio-panel { flex: none; max-height: none; }
    .studio-equipment-section,
    .studio-appearance-section { flex: none; }
    .studio-slots-scroll,
    .studio-appearance { overflow: visible; }
}

/* ── three columns ─────────────────────────────────────────────────────────
   Who the character is on the left, the character in the middle, what it is wearing on the right.
   The stage is the narrowest of the three because the figure is. */
.studio-panel-left { order: 1; }
.studio-stage { order: 2; }
.studio-panel-right { order: 3; }
.studio-panel-left h1 { margin: 0 0 4px; }

/* Every slot is listed whether or not it is filled, so an empty one has to read as an invitation
   rather than as something missing: the label stays, and the rest of the row is the way to fill
   it. */
.studio-slot.is-empty { opacity: 0.72; }
.studio-slot.is-empty .studio-slot-label { color: #8b949e; }
.studio-slot-browse {
    color: #7c8b9a;
    /* A shade smaller than an item's name: the off arm offers two of these and at 0.85rem they
       wrapped onto a second line, which made that row taller than the rest. */
    font-size: 0.8rem;
    text-decoration: none;
    border-bottom: 1px dotted #4a5561;
}
.studio-slot-browse:hover,
.studio-slot-browse:focus-visible { color: #c8a84b; border-bottom-color: #c8a84b; }

/* A slot offering more than one catalogue puts each on its own line, under the label rather than
   beside it. The off arm takes three - shields, orbs, rune arms - and on one line they ran past
   the panel's edge and wrapped where they fell, which broke the column the other rows keep.
   A column of its own rather than three full-width flex items, because a link's underline is its
   own border and a stretched item drags that across the whole panel. align-items keeps each
   underline the width of its own text. */
.studio-slot-browses {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* ── the rotate switch ─────────────────────────────────────────────────────
   In the stage, bottom left, out of the way of the full-screen button in the top right. Shaped
   like the switch every phone uses, because that is what it is: a thing that is on or off. */
.studio-spin {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: rgba(15, 17, 20, 0.55);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.studio-spin-track {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    background: #39424d;
    border-radius: 999px;
    transition: background 140ms ease;
}
.studio-spin-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #cfd6dd;
    border-radius: 50%;
    transition: transform 140ms ease, background 140ms ease;
}
/* Over the stage rather than on a panel, so it carries its own contrast: the character behind it
   can be any colour a reader chooses. */
.studio-spin-label {
    color: #d6d8d8;
    font-size: 0.85rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.studio-spin.is-on .studio-spin-track { background: #c8a84b; }
.studio-spin.is-on .studio-spin-knob { transform: translateX(18px); background: #1b1f24; }
.studio-spin:focus-visible { outline: 2px solid #c8a84b; outline-offset: 2px; }
/* Movement is the whole affordance, so a reader who has asked for less of it gets the state
   without the slide. */
@media (prefers-reduced-motion: reduce) {
    .studio-spin-track,
    .studio-spin-knob { transition: none; }
}

/* ── the animation menu ────────────────────────────────────────────────────
   Directly above the rotate switch, because the two are one thought: the menu only exists while
   the turntable is off, and a reader reaching for one has just used the other. Left aligned with
   it for the same reason, and clear of the buttons in the opposite corner. */
.studio-anim {
    position: absolute;
    left: 10px;
    bottom: 52px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(15, 17, 20, 0.55);
    border-radius: 999px;
}
.studio-anim[hidden] { display: none; }
.studio-anim-label {
    color: #d6d8d8;
    font-size: 0.85rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.studio-anim-select {
    background: #1b2128;
    color: #d6d8d8;
    border: 1px solid #3a4652;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 0.85rem;
    /* Fifty emotes make a long menu; the browser scrolls it, but the control itself should not
       stretch the stage's corner across the figure. */
    max-width: 210px;
}
.studio-anim-select:hover { border-color: #c8a84b; }
.studio-anim-select:focus-visible { outline: 2px solid #c8a84b; outline-offset: 1px; }

@media (max-width: 1200px) {
    /* Two columns before one: the stage keeps a panel beside it for as long as it can. */
    .studio { flex-wrap: wrap; }
    .studio-panel-right { order: 4; flex: 1 1 100%; max-width: none; }
}

/* The page's footnote. Lined up with the columns above it - the same width and side padding the
   .studio container has - so it reads as the foot of this page rather than as loose text under it. */
.studio-credit {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 0 16px;
    color: #888;
    font-size: 0.85rem;
}

/* "Main hand" and "Off hand" are two words and were breaking across two lines, which made those
   rows taller than the rest and the column look ragged. */
.studio-slot-label { white-space: nowrap; }

/* Default and Random sit above the controls they act on, outside the scroller, so they stay put
   while two hundred swatches scroll under them. Inside it they went off the top and a reader deep
   in the skin palette had to scroll back up to find them. */
.studio-appearance-actions { flex: 0 0 auto; }
.studio-appearance-actions .appearance-actions { margin: 0 0 4px; }