/* Virtual styling (Makeup + Hair) page styles. All rules namespaced .st-* so the stylesheet can be
   loaded globally in the document head. Flat design: solid fills + borders, no depth shadows. Uses
   Bootstrap --bs-* tokens so it follows the active theme.

   The studios' LAYOUT is not here: /makeup and /hair render the same three-step card track as /outfits
   (.st-studio / .st-progress / .st-wrap / .st-track / .st-card / .st-photo / .st-bar / .st-nav, plus
   .to-rbox / .to-zone / .to-idle for the photo boxes), all of which live in tryon.css and are shared
   verbatim - including the 3/4 photo frame, the aspect ratio phone cameras shoot. Likewise the kept
   looks: makeup and hair looks sit in the one dated feed on /looks, so this file carries no history,
   equation or modelling-video rules any more.

   What IS here: step 2's chosen-style tile, the style + colour picker modal, the styling-specific
   generating and keep effects, and the admin catalog rows. */

/* ── step 2: the chosen style ──────────────────────────────────────────────────────── */
/* The whole tile is the button that reopens the picker (same shape as step 3's idle Generate zone). It
   inherits .to-rbox-open's absolute fill from tryon.css; these are the styling-only extras. */
/* A chosen tile bleeds to the card edge like the upload tile beside it, so it needs no border of its own -
   the card supplies the outline. The empty state is a .to-zone, whose dashed border must survive. */
.st-photo--pick .to-rbox:not(.to-zone) { border-color: transparent; }
.st-pick { cursor: pointer; }
.st-pick:disabled { cursor: default; }
.st-pick-ph { position: relative; z-index: 1; font-size: 2.4rem; color: var(--bs-secondary-color); }

/* The style's name (and hair colour) riding the bottom of its own tile - a tile alone does not say which
   cut or which colour it was. Click-through so the tile underneath stays one big picker button. */
.st-chosen {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.45rem 0.6rem; text-align: center; line-height: 1.2;
    color: #fff; background: rgba(0, 0, 0, 0.55);
}
.st-chosen-name { font-size: 0.85rem; font-weight: 600; }
.st-chosen-sub { font-size: 0.75rem; opacity: 0.85; }

/* ── style + colour picker (modal) ─────────────────────────────────────────────────── */
/* ONE question at a time, so the list always owns the full width of the modal and there is a single
   scroll region under the thumb. (Hair used to put the colours in a second column, which stacked below
   the whole haircut gallery on a phone - the colours were unreachable without scrolling past everything,
   and each column fought for its own scroll.) The step is chosen in the markup; this is just the frame. */
.st-picker { display: flex; flex-direction: column; min-width: 0; }
.st-picker-colhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.st-picker-scroll { overflow-y: auto; max-height: 60vh; padding-right: .25rem; }
/* The haircut carried into the colour step, so the shade is judged against something. */
/* The chosen haircut, riding along the top of the colour step. It is also the way BACK to the haircuts
   now that the picker has no footer, so it is a button: quiet at rest so it still reads as a caption,
   with the pen and a border on hover to say it can be changed. */
.st-picker-chosen { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem;
    color: var(--bs-secondary-color); min-width: 0; padding: .25rem .5rem .25rem .25rem;
    background: none; border: 1px solid transparent; border-radius: 2rem; cursor: pointer;
    transition: border-color .15s, color .15s; }
.st-picker-chosen:hover, .st-picker-chosen:focus-visible {
    border-color: var(--bs-border-color); color: var(--bs-body-color); }
.st-picker-chosen img { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; flex: none; }
.st-picker-chosen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-picker-chosen i { font-size: .75rem; flex: none; }
.st-group-head { margin: 1.25rem 0 0.75rem; font-size: .95rem; font-weight: 600; }
.st-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem;
}
.st-tile {
    display: flex; flex-direction: column; padding: 0; border-radius: var(--st-radius, 0.75rem);
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); overflow: hidden;
    cursor: pointer; text-align: left; transition: border-color .15s;
}
.st-tile:hover:not(:disabled) { border-color: var(--bs-primary); }
.st-tile--on { border-color: var(--bs-primary); outline: 2px solid var(--bs-primary); outline-offset: -4px; }
.st-tile:disabled { opacity: .6; cursor: not-allowed; }
/* Portrait, like the tiles themselves and like the card the chosen style lands on - a hairstyle needs the
   head's full height to read, which a square crop cuts off. */
.st-tile-img { aspect-ratio: 3 / 4; background: var(--bs-secondary-bg); display: flex; align-items: center; justify-content: center; }
.st-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.st-tile-ph { font-size: 1.8rem; color: var(--bs-secondary-color); }
.st-tile-name { font-weight: 600; padding: .4rem .5rem 0; font-size: .9rem; }
.st-tile-cost { padding: 0 .5rem .5rem; font-size: .78rem; color: var(--bs-secondary-color); }

/* ── hair colour chart (step 2 of the picker) ──────────────────────────────────────── */
/* A grid rather than a wrapping flex row: forty-odd shades in ragged rows read as a pile, and a grid
   keeps the family sections aligned with each other. auto-fill so a phone gets three or four per row and
   a desktop gets a proper chart. */
.st-swatches {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .6rem;
    margin-bottom: .5rem;
}
.st-swatch {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0;
    padding: .4rem; border-radius: 10px; border: 2px solid transparent; background: none; cursor: pointer;
}
.st-swatch:hover:not(:disabled) { border-color: var(--bs-border-color); }
.st-swatch--on { border-color: var(--bs-primary); }
.st-swatch:disabled { opacity: .6; cursor: not-allowed; }
/* Bigger than the old 34px chip: these are photographs of hair now, and the whole point is being able to
   see the tone and shine, which a coin-sized dot cannot carry. */
.st-swatch-chip {
    width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid var(--bs-border-color);
    display: inline-flex; align-items: center; justify-content: center; color: var(--bs-secondary-color);
    overflow: hidden; flex: none;
}
.st-swatch-chip--photo { border-color: transparent; }
.st-swatch-chip--photo img { width: 100%; height: 100%; object-fit: cover; }
.st-swatch-chip--keep { background: var(--bs-secondary-bg); }
/* Flat-colour fallback for a shade with no swatch photo. The colour itself is per-row data, so it
   arrives as the --st-chip custom property rather than an inline background declaration. */
.st-swatch-chip--hex { background: var(--st-chip, var(--bs-secondary-bg)); }
.st-swatch-name { font-size: .72rem; text-align: center; line-height: 1.15; }

/* ── admin rows ──────────────────────────────────────────────────────────────────── */
.st-adminrow { display: flex; align-items: center; gap: .6rem; }
.st-adminthumb {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: none;
    background: var(--bs-secondary-bg); display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-secondary-color);
}
.st-adminthumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── responsive ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* The modal body is already the scroll region on a phone; a nested max-height would trap the list
       in a short window inside it. */
    .st-picker-scroll { max-height: none; }
    /* Tighter chart so a phone still gets four shades per row rather than two enormous ones. */
    .st-swatches { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: .45rem; }
    .st-swatch-chip { width: 2.9rem; height: 2.9rem; }
}