/* ============================================================
   SOBOLINI — Atelier re-skin
   Maps the live Furéllea configurator (fr--atelier / fr--option-picker /
   fr--selfie Stimulus markup) onto the Sobolini "sb-lab" design from the
   export (Sobolini Atelier.html). Loaded AFTER the Encore bundle + sobolini.css
   so it wins the cascade. Purely visual — the Stimulus controllers bind by
   data-* attributes, never by class, so the AI generate / poll / try-on flow is
   untouched. Scoped to `.sb-atelier` so it never leaks to other fr- usage.
   ============================================================ */

/* ---- Token remap: rewire the Furéllea design tokens to the Sobolini palette
   for every fr-* component on the Atelier. Encore defines --fr-color-* on :root
   (light theme); these scoped overrides (higher specificity, loaded last) win,
   so any fr- text/border/surface we didn't override by hand still renders in
   Sobolini colours instead of leaking dark-on-dark Furéllea light-theme text. */
.sb-atelier,
#fr-lightbox {
  --fr-color-text: var(--sb-ivory);
  --fr-color-text-muted: var(--sb-ivory-muted);
  --fr-color-text-subtle: var(--sb-ivory-faint);
  --fr-color-text-inverse: #181206;

  --fr-color-surface: var(--sb-night-raised);
  --fr-color-surface-raised: var(--sb-night-raised);
  --fr-color-surface-sunken: var(--sb-night);
  --fr-color-surface-inverse: var(--sb-night);
  --fr-color-surface-canvas: var(--sb-night);

  --fr-color-primary: var(--sb-gold);
  --fr-color-primary-hover: var(--sb-gold-bright);
  --fr-color-on-primary: #181206;
  --fr-color-accent: var(--sb-gold);
  --fr-color-on-accent: #181206;

  --fr-color-border: var(--sb-night-border);
  --fr-color-border-strong: var(--sb-gold-line);
  --fr-color-border-focus: var(--sb-gold);

  --fr-color-link: var(--sb-gold-bright);
  --fr-color-link-hover: var(--sb-gold);

  --fr-control-border: 1px solid var(--sb-night-border);
}

/* ---- Selfie bar ------------------------------------------------------- */
.sb-atelier .sb-selfie {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  align-items: center;
  border: 1px solid var(--sb-night-border);
  background: var(--sb-night-raised);
  padding: 18px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.sb-atelier .sb-selfie__frame {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--sb-night-border);
  background: var(--sb-night);
  display: grid; place-items: center;
}
.sb-atelier .sb-selfie__frame img { width: 100%; height: 100%; object-fit: cover; }
.sb-atelier .sb-selfie__placeholder {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sb-ivory-faint);
}
.sb-atelier .sb-selfie__controls { display: grid; gap: 10px; }
.sb-atelier .sb-selfie__title {
  font-family: var(--sb-serif); font-size: 19px; font-weight: 600; letter-spacing: 0.02em;
}
.sb-atelier .sb-selfie__status { font-size: 13px; color: var(--sb-ivory-muted); margin: 0; }
.sb-atelier .sb-selfie__consent { display: flex; gap: 10px; font-size: 12px; line-height: 1.55; color: var(--sb-ivory-faint); cursor: pointer; }
.sb-atelier .sb-selfie__consent a { color: var(--sb-gold); }
.sb-atelier .sb-selfie__consent input { accent-color: var(--sb-gold); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.sb-atelier .fr-selfie-consent--required .sb-selfie__consent,
.sb-atelier .sb-selfie__consent.fr-selfie-consent--required { color: var(--sb-gold-bright); }
.sb-atelier .sb-selfie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-atelier .sb-selfie__actions .sb-btn { min-height: 44px; padding: 0 20px; font-size: 11px; cursor: pointer; }
.sb-atelier .sb-selfie__actions label.sb-btn { cursor: pointer; }

/* ---- Lab grid (re-skin of .fr-atelier) -------------------------------- */
.sb-atelier .fr-atelier {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 4.5vw, 76px);
  align-items: start;
  background: none; border: none; padding: 0; box-shadow: none; border-radius: 0;
}
.sb-atelier .fr-atelier__form {
  display: grid; gap: 28px;
  background: none; border: none; padding: 0;
}

/* Field → fieldset/legend look */
.sb-atelier .fr-field { display: grid; gap: 12px; background: none; border: none; padding: 0; margin: 0; }
.sb-atelier .fr-field__label,
.sb-atelier .fr-field > label {
  margin: 0 0 4px; padding: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sb-ivory-faint);
}
.sb-atelier .fr-field__label .fr-field__optional,
.sb-atelier .fr-field__optional { display: none; }

/* Option-picker → inline sb-optrow of sb-chips (kill the dropdown chrome) */
.sb-atelier .fr-option-picker { position: static; display: block; }
.sb-atelier .fr-option-picker__trigger { display: none !important; }
.sb-atelier .fr-option-picker__panel,
.sb-atelier .fr-option-picker__panel[hidden] {
  display: flex !important;
  position: static; inset: auto; transform: none;
  flex-wrap: wrap; gap: 8px;
  background: none; border: none; box-shadow: none; padding: 0; margin: 0;
  max-height: none; overflow: visible; opacity: 1; visibility: visible;
}
.sb-atelier .fr-option-picker__tile {
  display: inline-flex; align-items: center; gap: 0;
  padding: 10px 18px;
  border: 1px solid var(--sb-night-border);
  background: transparent;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sb-ivory-muted);
  cursor: pointer;
  transition: color 200ms var(--sb-ease), border-color 200ms var(--sb-ease), background 200ms var(--sb-ease);
}
.sb-atelier .fr-option-picker__tile:hover { color: var(--sb-ivory); border-color: var(--sb-gold-line); }
.sb-atelier .fr-option-picker__tile[aria-checked="true"] {
  background: var(--sb-gold); border-color: var(--sb-gold); color: #181206;
}
.sb-atelier .fr-option-picker__image { display: none; }
.sb-atelier .fr-option-picker__name { letter-spacing: inherit; }

/* Toggle groups (gender / size) → sb-optrow chips */
.sb-atelier .fr-toggle-group { display: flex; flex-wrap: wrap; gap: 8px; border: none; padding: 0; }
.sb-atelier .fr-toggle-group__option {
  position: relative; margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--sb-night-border);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sb-ivory-muted); cursor: pointer;
  transition: color 200ms var(--sb-ease), border-color 200ms var(--sb-ease), background 200ms var(--sb-ease);
}
.sb-atelier .fr-toggle-group__option:hover { color: var(--sb-ivory); border-color: var(--sb-gold-line); }
.sb-atelier .fr-toggle-group__option input { position: absolute; opacity: 0; pointer-events: none; }
.sb-atelier .fr-toggle-group__option:has(input:checked) {
  background: var(--sb-gold); border-color: var(--sb-gold); color: #181206;
}

/* Colour swatches → round sb-swatch */
.sb-atelier .fr-swatch-group { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-atelier .fr-swatch {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--sb-night-border); padding: 0; cursor: pointer;
  background: var(--fr-swatch-color, var(--sb-night-raised));
  transition: transform 150ms var(--sb-ease), box-shadow 150ms var(--sb-ease);
}
.sb-atelier .fr-swatch:hover { transform: scale(1.12); }
.sb-atelier .fr-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sb-atelier .fr-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--sb-night), 0 0 0 4px var(--sb-gold); }
.sb-atelier .fr-swatch--rainbow { background: conic-gradient(from 180deg, #c0392b, #d4a24c, #2e8b57, #2e6b8b, #6a4c93, #c0392b); }

/* Length slider (cosmetic, fr--range) */
.sb-atelier .sb-range-row { display: flex; align-items: center; gap: 16px; }
.sb-atelier .sb-range { flex: 1; accent-color: var(--sb-gold); }
.sb-atelier .sb-range-val { min-width: 72px; font-weight: 700; font-size: 14.5px; letter-spacing: 0.04em; text-align: right; }

/* Textareas (personalization / custom prompt / quote note) */
.sb-atelier .fr-field__input,
.sb-atelier .fr-atelier textarea {
  width: 100%; background: var(--sb-night-raised);
  border: 1px solid var(--sb-night-border); color: var(--sb-ivory);
  padding: 12px 14px; font-family: var(--sb-sans); font-size: 14px; line-height: 1.5;
}
.sb-atelier .fr-field__input:focus,
.sb-atelier .fr-atelier textarea:focus { outline: none; border-color: var(--sb-gold-line); }

/* Try-on + multi-angle toggles */
.sb-atelier .fr-atelier__tryon-toggle,
.sb-atelier .fr-atelier__multiangle-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sb-ivory-muted); cursor: pointer; }
.sb-atelier .fr-atelier__tryon-toggle input,
.sb-atelier .fr-atelier__multiangle-toggle input { accent-color: var(--sb-gold); width: 17px; height: 17px; }
.sb-atelier .fr-atelier__tryon-hint,
.sb-atelier .fr-atelier__multiangle-hint { font-size: 12px; color: var(--sb-ivory-faint); margin: 4px 0 0; }

/* Action buttons → sb-btn */
.sb-atelier .fr-atelier__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sb-atelier .fr-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background 240ms var(--sb-ease), color 240ms var(--sb-ease), border-color 240ms var(--sb-ease);
}
.sb-atelier .fr-button--accent { background: var(--sb-gold); color: #181206; border-color: var(--sb-gold); }
.sb-atelier .fr-button--accent:hover { background: var(--sb-gold-bright); border-color: var(--sb-gold-bright); }
.sb-atelier .fr-button--outline { background: transparent; border-color: var(--sb-gold-line); color: var(--sb-ivory); }
.sb-atelier .fr-button--outline:hover { border-color: var(--sb-gold); color: var(--sb-gold-bright); }

/* ---- Preview column → sb-preview -------------------------------------- */
.sb-atelier .fr-atelier__preview {
  position: relative;
  border: 1px solid var(--sb-night-border);
  background: var(--sb-night-raised);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  min-height: 0;
}
.sb-atelier .fr-atelier__slot { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; }
.sb-atelier .fr-atelier__placeholder { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 32px; color: var(--sb-ivory-faint); }
.sb-atelier .fr-atelier__placeholder svg { width: 40px; height: 40px; stroke: var(--sb-gold-line); }
.sb-atelier .fr-atelier__placeholder-label { font-size: 13px; line-height: 1.6; max-width: 30ch; }
.sb-atelier .fr-atelier__image { width: 100%; height: 100%; object-fit: cover; object-position: top; cursor: zoom-in; }
.sb-atelier .fr-atelier__generating { display: grid; place-items: center; gap: 16px; }
.sb-atelier .fr-atelier__generating-caption { font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sb-gold-bright); }
.sb-atelier .fr-atelier__failure { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px; color: var(--sb-ivory-muted); }
.sb-atelier .fr-atelier__failure svg { width: 34px; height: 34px; stroke: var(--sb-gold); }
.sb-atelier .fr-atelier__angle-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 7px 11px; background: rgba(12, 10, 7, 0.82); border: 1px solid var(--sb-gold-line);
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sb-gold-bright);
}

@media (max-width: 860px) {
  .sb-atelier .fr-atelier { grid-template-columns: 1fr; }
  .sb-atelier .sb-selfie { grid-template-columns: 88px 1fr; }
}

/* ---- Rebuilt sb-lab configurator (native sb-chip tiles) --------------- */
/* Option-picker tiles are now native .sb-chip buttons; the picker still drives
   selection (sets the hidden input + aria-checked). Style the selected chip. */
.sb-atelier .fr-option-picker__panel .sb-chip {
  cursor: pointer;
  transition: color 200ms var(--sb-ease), border-color 200ms var(--sb-ease), background 200ms var(--sb-ease);
}
.sb-atelier .fr-option-picker__panel .sb-chip:hover { color: var(--sb-ivory); border-color: var(--sb-gold-line); }
.sb-atelier .fr-option-picker__panel .sb-chip[aria-checked="true"] {
  background: var(--sb-gold); border-color: var(--sb-gold); color: #181206;
}
/* AI "Generated by AI" badge only once a render is ready. */
.sb-atelier .sb-lab:not([data-state="ready"]) .sb-ai-badge { display: none; }
/* sb-lab action row + try-on + quote note. */
.sb-atelier .sb-lab__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sb-atelier .sb-lab__actions .sb-btn { min-height: 48px; }
.sb-atelier .sb-lab__tryon { display: grid; gap: 6px; }
.sb-atelier .sb-lab__quote { margin-top: 4px; }
.sb-atelier .sb-lab__quote-note {
  width: 100%; background: var(--sb-night-raised); border: 1px solid var(--sb-night-border);
  color: var(--sb-ivory); padding: 12px 14px; font-family: var(--sb-sans); font-size: 14px;
}
.sb-atelier .sb-lab__quote-note:focus { outline: none; border-color: var(--sb-gold-line); }
/* Generating progress bar (fr--atelier sets --fr-progress). */
.sb-atelier .fr-atelier__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sb-night-border); z-index: 3; }
.sb-atelier .fr-atelier__progress-fill { display: block; height: 100%; width: calc(var(--fr-progress, 0) * 1%); background: var(--sb-gold); transition: width 300ms var(--sb-ease); }