/* ============================================================================
   Studio Wizard — the shared "new job" popup (see static/js/studio_wizard.js).

   Deliberately NOT scoped to a view id: one visual language for Photo, Audio and
   Text Studio, so "the same process" is also the same picture. It lives INSIDE a
   studio's view (the veil element is appended there) so the studio's own scoped
   rules still apply to the body it hands over — but the popup's own chrome uses
   its own classes and the app-wide tokens from :root, and never a studio's
   `.st-*` / `.ts-*` button, which is how the three would drift apart again.
   ============================================================================ */
.sw-veil {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .48);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sw-card {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: min(86vh, 760px);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  font-family: inherit; color: var(--text, #0f172a);
}
/* A studio whose screen is a WORKSPACE (Photo Studio's editor: preview + sliders)
   needs the width; a screen of selects does not, and a 880px card around three
   dropdowns reads as an empty page. */
.sw-card-wide { max-width: min(920px, 96vw); }
.sw-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.sw-eyebrow {
  font-size: 12px; font-weight: 800; color: var(--text-3, #94a3b8);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.sw-x {
  margin-inline-start: auto; cursor: pointer; font-family: inherit;
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #f1f5f9; color: var(--text-3, #94a3b8); font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sw-x .ic { width: 15px; height: 15px; }
.sw-x:hover { background: #e2e8f0; color: var(--text, #0f172a); }

.sw-prog { padding: 10px 16px 0; }
.sw-bar {
  height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden;
}
.sw-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
  transition: width .18s ease;
}
.sw-prog-t {
  display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
  font-size: 12.5px; color: var(--text-2, #475569);
}
.sw-prog-t b { font-weight: 800; color: var(--text, #0f172a); }
.sw-prog-t span { font-weight: 700; }

.sw-body {
  flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 16px;
  -webkit-overflow-scrolling: touch;
}
.sw-q { font-weight: 800; font-size: 15px; margin: 2px 0 8px; }
.sw-hint { font-size: 12.5px; color: var(--text-3, #94a3b8); margin-bottom: 10px; }

/* The body is the STUDIO's markup, so its sections already carry their own cards
   and spacing. Trim the outer edges only, or the popup shows a card inside a
   card. */
.sw-body > section:first-child,
.sw-body > .card:first-child { margin-top: 0; }
.sw-body > section:last-child,
.sw-body > .card:last-child { margin-bottom: 0; }

.sw-foot {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #e2e8f0); background: #fff;
}
.sw-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  color: var(--text, #0f172a);
}
.sw-btn:hover { background: var(--surface-2, #f1f5f9); }
.sw-primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4));
}
.sw-primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--brand-500, #6366f1), var(--accent-500, #06b6d4)); }
.sw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sw-foot.busy .sw-primary { opacity: .7; }

.sw-why {
  padding: 0 16px 12px; font-size: 11.5px; color: var(--text-3, #94a3b8);
  text-align: center;
}

/* The step chooser's boxes. Same shape as the tiles the studios already use for
   their one-tap answers, so a step reads like an answer. */
.sw-tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.sw-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  align-items: flex-start; text-align: start; cursor: pointer;
  padding: 10px 12px 10px 12px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0); background: #fff;
  font-family: inherit; color: inherit;
}
.sw-tile:hover { border-color: var(--border-2, #cbd5e1); background: var(--surface, #f8fafc); }
.sw-tile.on { border-color: var(--brand-500, #6366f1); background: #eef2ff; }
.sw-tile-n {
  position: absolute; inset-inline-end: 10px; top: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: var(--brand-500, #6366f1);
}
.sw-tile-t { font-size: 13.5px; font-weight: 700; padding-inline-end: 24px; }
.sw-tile-s { font-size: 11.5px; color: var(--text-3, #94a3b8); }

@media (max-width: 640px) {
  /* Bottom sheet: on a phone the actions want to be where the thumb already is,
     and a centred card puts them level with the keyboard the moment a text field
     has focus. */
  .sw-veil { align-items: flex-end; padding: 0; }
  .sw-card { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
  .sw-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-bar i { transition: none; }
}