/* MediaHero brand tokens shared by the dashboard and sign-in screen. */

:root {
  --room: #f5f8f5;
  --ground: #eaf1ed;
  --card: #ffffff;
  --card-2: #f0f5f1;
  --line: rgba(16, 24, 40, 0.08);
  --line-2: rgba(16, 24, 40, 0.16);
  --ink: #101828;
  --soft: #344054;
  --muted: #667085;
  --faint: #98a2b3;
  --amber: #174e43;
  --blush: #d98654;
  --ready: #12b76a;
  --warn: #f79009;
  --danger: #f04438;
  --accent: #174e43;
  --serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 32px -16px rgba(16, 24, 40, 0.16);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  /* min-height (not height:100%) so the body box grows with the content — otherwise the themed
     background is clipped to a single viewport and a seam appears partway down a long, scrolled page. */
  min-height: 100vh;
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 82% -8%, rgba(23, 78, 67, 0.07), transparent 60%),
    radial-gradient(90% 70% at 8% 0%, rgba(217, 134, 84, 0.06), transparent 55%),
    var(--room);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }

button { font-family: inherit; }

.app { min-height: 100vh; }

.boot { display: grid; justify-items: center; gap: .85rem; color: var(--muted); text-align: center; padding: 26vh 1rem; letter-spacing: 0.02em; }

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.brand .mark { font-family: var(--serif); font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.brand .sub {
  font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--faint);
}
.masthead .who { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.wallet {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--soft); font-variant-numeric: tabular-nums;
}
.wallet .spark { color: var(--amber); }
.role-pill {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--muted);
}
.role-pill.admin { color: #fff; background: var(--accent); border-color: transparent; font-weight: 700; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink); padding: 0.6rem 1rem; border-radius: 11px; cursor: pointer;
  font-size: 0.9rem; transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.btn:hover { border-color: var(--soft); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary {
  border: 0; color: #fff; font-weight: 700; letter-spacing: -0.01em; background: var(--accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
}
.btn.ghost { color: var(--soft); }
.btn.wide { width: 100%; }
.btn.small { padding: 0.42rem 0.7rem; font-size: 0.8rem; border-radius: 9px; }
.btn.link { border: 0; background: 0; color: var(--amber); padding: 0; cursor: pointer; }

/* ── auth ─────────────────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.25rem;
  box-sizing: border-box;
}
.mediahero-auth {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 198, 107, .16), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(23, 78, 67, .12), transparent 38%),
    #f6f8f4;
}
.mediahero-auth-shell {
  width: min(100%, 970px); min-height: min(620px, calc(100dvh - 2.5rem));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden; border: 1px solid var(--line); border-radius: 24px;
  background: var(--card); box-shadow: 0 26px 75px rgba(23, 78, 67, .12);
}
.mediahero-auth .auth-card {
  width: auto; min-width: 0; padding: clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
  border: 0; border-radius: 0; box-shadow: none;
}
.mediahero-auth-brand { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 0; color: #173b36; font-size: clamp(1.55rem, 5vw, 1.9rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.2; }
.mediahero-auth .tagline { margin: .9rem 0 1.4rem; }
.mediahero-auth-art { position: relative; min-height: 0; overflow: hidden; background: #143b39; }
.mediahero-auth-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 31%; }
@media (max-width: 879px) {
  .mediahero-auth-shell { width: min(100%, 440px); min-height: 0; display: block; }
  .mediahero-auth-art { display: none; }
}
@media (max-width: 480px) {
  .mediahero-auth { padding: 1rem; }
  .mediahero-auth-shell { border-radius: 20px; }
  .mediahero-auth .auth-card { padding: 1.5rem; }
}
.auth-card {
  width: min(410px, 94vw); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2rem 1.7rem; box-shadow: var(--shadow);
}
.auth-card .logo { font-family: var(--serif); font-size: 1.7rem; }
.auth-card .tagline { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 1.4rem; }
.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }
.tab {
  flex: 1; text-align: center; padding: 0.5rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; color: var(--muted); font-size: 0.88rem;
}
.tab.on { color: var(--ink); border-color: var(--line-2); background: var(--card-2); }
.mediahero-auth .tab { padding-inline: .25rem; white-space: nowrap; font-size: .82rem; }

/* SSO is an <a>, not a <button>, so it needs the block/centre bits .btn assumes of form controls. */
.btn.sso { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.or {
  display: flex; align-items: center; gap: 0.7rem; margin: 1.1rem 0;
  color: var(--faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.field { margin-bottom: 0.9rem; }
.field > label {
  display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.35rem;
}
.input, select.input, textarea.input {
  width: 100%; background: var(--ground); border: 1px solid var(--line-2); color: var(--ink);
  box-sizing: border-box; min-width: 0; padding: 0.6rem 0.7rem;
  border-radius: 10px; font-size: 0.92rem; font-family: inherit;
}
input.input, select.input { display: block; height: 44px; min-height: 44px; line-height: 1.25; }
textarea.input { resize: vertical; min-height: 74px; }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}
.hint { color: var(--faint); font-size: 0.78rem; margin-top: 0.5rem; }
.reference-panel { margin: 1rem 0; }
.reference-panel h3 { margin: 0 0 .45rem; }
.reference-inputs { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.consent { display: flex; align-items: flex-start; gap: .5rem; margin-top: .8rem; color: var(--soft); font-size: .84rem; }

.notice { padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.85rem; margin-bottom: 0.9rem; }
.notice.err { background: rgba(224, 122, 122, 0.12); border: 1px solid rgba(224, 122, 122, 0.4); color: #b42318; }
.notice.ok { background: rgba(143, 202, 158, 0.12); border: 1px solid rgba(143, 202, 158, 0.4); color: var(--ready); }

/* ── studio layout ───────────────────────────────────────────────────────── */
.studio { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: start; }
.rail {
  border-right: 1px solid var(--line); padding: 1.3rem clamp(0.8rem, 1.5vw, 1.2rem);
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow: auto;
}
.main { padding: clamp(1.2rem, 3vw, 2.2rem); min-width: 0; }

.rail h3 {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  margin: 1.4rem 0 0.6rem;
}
.rail h3:first-of-type { margin-top: 0.4rem; }

.rail-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  background: transparent; color: var(--soft); margin-bottom: 0.2rem;
}
.rail-item:hover { background: var(--card); }
.rail-item.on { background: var(--card); border-color: var(--line); }
.rail-item .thumb { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.rail-item .nm { font-size: 0.9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .st { font-size: 0.72rem; color: var(--faint); }
.rail-item .col { min-width: 0; }
/* Somebody else's, in the admin section: a rule down the left edge so the section is legible
   without being read, and the owner's address under the status word. */
.rail-item.foreign { border-left: 2px solid var(--line-2); border-radius: 4px 10px 10px 4px; }
.rail-item .own {
  font-size: 0.68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── portraits ───────────────────────────────────────────────────────────── */
.portrait {
  position: relative; border-radius: 12px; overflow: hidden; background: var(--card-2);
  aspect-ratio: 1 / 1;
}
.portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 62% 30%, var(--rim, rgba(79, 70, 229, 0.5)), transparent 60%),
    radial-gradient(40% 30% at 40% 34%, var(--skl, rgba(255, 240, 232, 0.28)), transparent 55%),
    radial-gradient(120% 120% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 55%);
  mix-blend-mode: screen;
}
.portrait.round { border-radius: 50%; }

/* ── character grid + cards ──────────────────────────────────────────────── */
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.h-title { font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: 0.01em; }
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 1.6rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1rem; }
.ch-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem; cursor: pointer; transition: border-color 0.15s, transform 0.08s;
}
.ch-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ch-card .portrait { margin-bottom: 0.6rem; }
.ch-card .nm { font-family: var(--serif); font-size: 1.1rem; }
.ch-card .mt { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.68rem; letter-spacing: 0.04em;
  padding: 0.16rem 0.46rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ready { color: var(--ready); border-color: rgba(143, 202, 158, 0.4); }
.badge.building { color: var(--amber); border-color: rgba(79, 70, 229, 0.4); }
.badge.held, .badge.unavailable { color: var(--danger); border-color: rgba(224, 122, 122, 0.4); }
.badge.draft { color: var(--faint); }
.badge.common { color: var(--blush); border-color: rgba(244, 114, 182, 0.4); }

.empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 2rem;
  text-align: center; color: var(--muted);
}

/* ── create form ─────────────────────────────────────────────────────────── */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 1.8rem); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1rem; }
.form-grid .span2 { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  padding: 0.34rem 0.66rem; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--soft); cursor: pointer; font-size: 0.82rem; background: transparent;
}
.chip.on { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.form-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.cost { color: var(--muted); font-size: 0.86rem; }
.cost b { color: var(--amber); font-variant-numeric: tabular-nums; }

/* ── build pipeline ──────────────────────────────────────────────────────── */
.detail-head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; flex-wrap: wrap; }
.detail-head .portrait { width: 110px; flex: none; }
.detail-head .nm { font-family: var(--serif); font-size: 1.8rem; }
.detail-head .mt { color: var(--muted); font-size: 0.9rem; }

.pipeline { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0 1rem; }
.stage { display: grid; grid-template-columns: 26px 1fr; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.stage:last-child { border-bottom: 0; }
.stage .ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 0.7rem; color: var(--faint); margin-top: 2px; }
.stage.done .ic { background: var(--ready); border-color: var(--ready); color: #ffffff; }
.stage.active .ic { border-color: var(--amber); color: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
.stage.planned { opacity: 0.5; }
.stage .lb { font-size: 0.95rem; }
.stage .sub { font-size: 0.8rem; color: var(--muted); }
.stage.active .lb { color: var(--amber); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 50% { box-shadow: 0 0 0 5px rgba(79, 70, 229, 0); } }

.bar { height: 7px; border-radius: 999px; background: var(--card-2); overflow: hidden; margin-top: 0.4rem; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.6s ease; }

.statusline { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--soft); font-size: 0.9rem; margin-bottom: 0.6rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.6); animation: live 1.4s infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); } }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.cast-cell { position: relative; }
.cast-cell .portrait { border-radius: 10px; }
.cast-cell .tag { position: absolute; left: 5px; bottom: 5px; font-size: 0.6rem; padding: 0.1rem 0.34rem; border-radius: 6px; background: rgba(0,0,0,0.6); color: var(--soft); }
.cast-cell.done .tag { color: var(--ready); }
/* Full-height source images: crop from the TOP so the face shows, not the torso. */
.cast-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 10px; display: block; aspect-ratio: 1 / 1; }
.cast-cell.pick { cursor: pointer; transition: transform 0.08s; }
.cast-cell.pick:hover { transform: translateY(-2px); }
.cast-cell.pick:hover .cast-img { outline: 2px solid var(--amber); outline-offset: 1px; }
.cast-cell.hero .cast-img { outline: 3px solid var(--ready); outline-offset: 1px; }
.hero-badge { position: absolute; top: 5px; right: 5px; font-size: 0.58rem; padding: 0.12rem 0.36rem; border-radius: 6px; background: var(--ready); color: #ffffff; font-weight: 700; }
.pick-head { margin: 1rem 0 0.2rem; font-size: 0.92rem; color: var(--soft); }
.pick-head b { color: var(--ink); }
.pick-done { color: var(--ready); font-weight: 600; }
.detail-head .portrait .cast-img { border-radius: 12px; }

/* ── generated media ──────────────────────────────────────────────────────── */
.gallery-head { margin: 1.2rem 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.gallery-grid .shot { position: relative; }
.gallery-grid .cast-img { aspect-ratio: 3 / 4; border-radius: 12px; }

/* Videos are wider than images: a clip carries its own controls bar, and at
   150px the scrubber is unusable on a touch screen. 704x1280 is the rendered shape. */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
.clip-grid .clip {
  width: 100%; aspect-ratio: 11 / 20; border-radius: 12px; background: #000; display: block;
}

/* indeterminate progress for cloud jobs whose provider reports no percentage */
.bar.indet { position: relative; }
.bar.indet > i { width: 40%; position: absolute; left: 0; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { left: -40%; } 100% { left: 100%; } }

.foot-note { color: var(--faint); font-size: 0.8rem; margin-top: 1rem; }
.aside-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Full-size image viewer. Opened by a single click on any .cast-img — inspecting a picture is
   the safe action, so it is the default one, and choosing her face is a button instead. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 12, .88);
  padding: 2rem;
}
.lightbox-inner {
  display: flex; flex-direction: column; gap: .75rem;
  max-width: min(92vw, 1100px); max-height: 92vh;
}
.lightbox-inner img {
  max-width: 100%; max-height: calc(92vh - 3.5rem);
  object-fit: contain;
  border-radius: 8px;
  background: #f2f4f8;
}
/* Wraps rather than squeezing: the caption is her NAME on the head portrait, and a long one used
   to push Close towards the edge on a narrow screen. */
.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  flex-wrap: wrap;
}
.lightbox-cap { color: #98a2b3; font-size: .85rem; }
.lightbox-actions { display: flex; align-items: center; gap: .5rem; }

/* Next/previous. The stage is the positioning context so the arrows sit against the picture
   rather than against the viewport, which keeps them beside a portrait as well as a landscape. */
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; padding-bottom: .15rem;
  color: #344054; background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line, #e4e7ec);
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .95); border-color: #98a2b3; }
.lightbox-nav:focus-visible { outline: 2px solid var(--amber, #4f46e5); outline-offset: 2px; }
.lightbox-nav.prev { left: .6rem; }
.lightbox-nav.next { right: .6rem; }
/* Tabular so the counter does not jitter as it steps through 9 / 10. */
.lightbox-count { color: #98a2b3; font-size: .85rem; font-variant-numeric: tabular-nums; }

/* The prompt that produced the picture, in the brief panel's disclosure idiom so it reads as the
   same kind of "here is what she was made from" detail. Collapsed by default: an expanded prompt is
   a paragraph and the image is what the viewer is for. */
.lb-prompt {
  border: 1px solid var(--line, #e4e7ec); border-radius: 8px;
  background: rgba(16, 24, 40, .03);
  max-width: 100%;
}
.lb-prompt > summary {
  cursor: pointer; padding: .5rem .75rem; font-size: .8rem; color: #98a2b3;
  list-style: none; user-select: none;
}
.lb-prompt > summary::-webkit-details-marker { display: none; }
.lb-prompt > summary::before { content: "▸ "; color: #667085; }
.lb-prompt[open] > summary::before { content: "▾ "; }
.lb-prompt > summary:hover { color: #fff; }
/* Monospace and pre-wrap because this is the literal string that was sent — line breaks in it are
   the renderer's, not ours. Capped and scrollable so a very long expansion cannot grow without
   limit; `anywhere` so an unbroken token cannot widen the viewer past the screen. */
.lb-prompt-text {
  margin: 0; padding: 0 .75rem .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5; color: #475467;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 20vh; overflow-y: auto;
}
/* The picture yields the height the open panel needs. Without this the viewer would grow past 92vh
   and push the top of the image off the screen — the one thing the prompt must never cost. */
.lightbox-inner.prompt-open img { max-height: calc(92vh - 3.5rem - 22vh); }

/* The pick button sits on the candidate card, revealed on hover/focus so the grid stays calm —
   but it is always present for keyboard and touch, never hover-only. */
.cast-cell { position: relative; }
.cast-cell .pick-btn { position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%); white-space: nowrap; }
.cast-img { cursor: zoom-in; }

/* Destructive actions read as destructive. Ghost-weight so it does not compete with the primary
   action on the panel — it should be findable, not inviting. */
.btn.danger { color: var(--danger); border-color: rgba(240, 68, 56, .45); }
.btn.danger:hover { background: rgba(240, 68, 56, .08); border-color: #f04438; }

/* What she was made from. Collapsed by default — it is reference material, and the panel's main
   job is the live build — but labelled plainly, because the complaint was that there was no path
   to it at all. */
.brief { margin-top: 1rem; border: 1px solid var(--line, #e4e7ec); border-radius: 8px; background: rgba(16,24,40,.03); }
.brief > summary {
  cursor: pointer; padding: .7rem 1rem; font-size: .9rem; color: #475467;
  list-style: none; user-select: none;
}
.brief > summary::-webkit-details-marker { display: none; }
.brief > summary::before { content: "▸ "; color: #667085; }
.brief[open] > summary::before { content: "▾ "; }
.brief > summary:hover { color: #fff; }
.brief-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem 1.25rem; margin: 0; padding: 0 1rem 1rem;
}
.brief-grid .span2 { grid-column: 1 / -1; }
.brief-grid dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #667085; }
.brief-grid dd { margin: .15rem 0 0; color: #101828; font-size: .92rem; }
.brief-grid dd.vibe { line-height: 1.45; color: #475467; }
.brief-note { margin: 0; padding: 0 1rem 1rem; font-size: .78rem; color: #667085; }

/* The showcase picker. Laid out as label/control rows inside the same <details> shell the brief
   uses, so it reads as another panel of the same panel rather than as a settings screen. */
.showcase .sc-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem 1rem 0;
}
.showcase .sc-lbl {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #667085;
  min-width: 7.5rem;
}
.showcase .sc-count { width: 5rem; padding: .35rem .5rem; }
.provider-picker {
  border: 0; margin: .8rem 0 0; padding: 0 1rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem;
}
.provider-picker legend {
  grid-column: 1 / -1; padding: 0; margin-bottom: .1rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #667085;
}
.provider-card {
  position: relative; display: flex; min-width: 0; gap: .7rem; align-items: flex-start;
  padding: .8rem; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(16,24,40,.03); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.provider-card:hover { border-color: #98a2b3; background: rgba(16,24,40,.05); }
.provider-card.selected {
  border-color: var(--amber); background: rgba(79, 70, 229,.08);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229,.18);
}
.provider-card.unavailable { opacity: .55; cursor: not-allowed; }
.provider-card.unavailable:hover { border-color: var(--line-2); background: rgba(16,24,40,.03); }
.provider-card input { margin: .18rem 0 0; accent-color: var(--amber); flex: 0 0 auto; }
.provider-copy { display: flex; flex-direction: column; min-width: 0; gap: .32rem; }
.provider-title { color: #101828; font-size: .88rem; font-weight: 650; line-height: 1.25; }
.provider-detail { color: #667085; font-size: .76rem; line-height: 1.42; overflow-wrap: anywhere; }
.provider-badge {
  display: inline-block; margin-left: .3rem; padding: .1rem .36rem; border-radius: 999px;
  background: rgba(16,24,40,.06); color: #98a2b3; font-size: .62rem;
  font-weight: 600; letter-spacing: .02em; vertical-align: .08rem;
}
.provider-card.selected .provider-badge { background: rgba(79, 70, 229,.16); color: #4338ca; }
/* A type the current mode does not permit. Shown rather than hidden: a checkbox that vanishes when
   the mode flips looks like the app forgot the choice, and it is still remembered. */
.showcase .chip.muted { opacity: .45; }
.showcase .aside-actions { padding: 0 1rem 1rem; margin-top: .6rem; }
.showcase .notice { margin: .6rem 1rem 0; }

@media (max-width: 640px) {
  .provider-picker { grid-template-columns: 1fr; }
  .showcase .sc-row { align-items: flex-start; }
  .showcase .sc-lbl { flex-basis: 100%; min-width: 0; }
  .showcase .sc-count { width: min(7rem, 100%); }
  .showcase .sc-brief { min-height: 9rem; }
  .showcase .aside-actions .btn { width: 100%; }
}

/* Creator-suite touches: the gradient primary brightens on hover, and the display face
   (the serif slot) carries every headline, so it is tuned tight and heavy in :root above. */
.btn.primary:hover { background: #4338ca; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35); }

/* The display-face slot carries every headline; tuned tight and heavy for the creator voice. */
.h-title, .detail-head .nm, .ch-card .nm, .auth-card .logo, .avatar-title, .avatar-brand { font-weight: 800; letter-spacing: -0.02em; }

/* On-page reference capture (create form): camera + microphone, kept on this origin. */
.capture-box { border: 1px solid var(--line-2); border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .55rem; background: var(--card-2); }
/* On-page reference capture (create form): camera + microphone, kept on this origin. */
.capture-box { border: 1px solid var(--line-2); border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .55rem; background: var(--card-2); }
.capture-stage { position: relative; width: 100%; max-width: 320px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--ground); }
.capture-stage[hidden] { display: none; }
.capture-stage > video, .capture-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.capture-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.capture-help { margin: 0; font-size: .8rem; color: var(--soft); line-height: 1.45; }
.phrase-quote { margin: 0; padding: .7rem .9rem; border-left: 3px solid var(--amber); background: var(--ground); border-radius: 0 10px 10px 0; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.capture-time { font-variant-numeric: tabular-nums; color: var(--soft); font-size: .8rem; }
.capture-audio { width: 100%; }

/* Phones and small tablets: let the masthead breathe instead of squeezing its two halves. */
@media (max-width: 700px) {
  .masthead { flex-wrap: wrap; row-gap: .45rem; padding-top: .7rem; padding-bottom: .7rem; }
  .brand .sub { display: none; }
  .masthead .who { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; font-size: .8rem; min-width: 0; }
  .wallet { max-width: 100%; }
  .btn { padding: .5rem .8rem; }
}

/* Photo wizard: full-viewport dialog, one step per angle the models consume. */
.wiz { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: rgba(16, 24, 40, 0.45); padding: 1rem; }
.wiz[hidden] { display: none; }
.wiz-card { width: min(460px, 94vw); max-height: 94vh; overflow-y: auto; background: var(--card); border-radius: 16px; padding: 1rem; box-shadow: var(--shadow); display: grid; gap: .7rem; }
.wiz-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.wiz-head b { font-size: 1rem; letter-spacing: -0.01em; }
.wiz-dots { display: flex; gap: .4rem; }
.wiz-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.wiz-dots i.on { background: var(--accent); }
.wiz-dots i.done { background: var(--ready); }
.wiz-stage { width: 100%; max-width: none; aspect-ratio: 3 / 4; }
.wiz-strip { display: flex; gap: .4rem; flex-wrap: wrap; }
.wiz-strip img { width: 56px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); display: block; }