/* Customer journey layer: keep the full workspace available while presenting
   one simple shooting flow first. Loaded after the existing design system. */

.customer-debug-badge,
.route-bridge { display: none !important; }

.customer-primary-nav { display: grid; gap: 4px; }
.customer-primary-nav .sidebar-item { min-height: 54px; }
.customer-primary-nav .sidebar-item > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.customer-primary-nav .sidebar-item strong {
  font-size: 13px;
  font-weight: 600;
}
.customer-primary-nav .sidebar-item small {
  overflow: hidden;
  color: var(--pc-stone);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.customer-primary-nav .sidebar-item.active small { color: rgba(255,255,255,.68); }

.workspace-navigation-details {
  margin-top: 18px;
  border-top: 1px solid var(--pc-border);
}
.workspace-navigation-details > summary {
  display: grid;
  min-height: 46px;
  padding: 12px;
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  color: var(--pc-ink-70);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  list-style: none;
}
.workspace-navigation-details > summary::-webkit-details-marker { display: none; }
.workspace-navigation-details > summary:hover { color: var(--pc-ink); }
.workspace-navigation-details[open] > summary > span:last-child { transform: rotate(180deg); }
.workspace-navigation-links { display: grid; padding: 0 0 8px 22px; gap: 2px; }
.workspace-navigation-links .sidebar-item {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
}
.workspace-navigation-links .nav-icon { width: 18px; height: 18px; }
.workspace-navigation-links .nav-icon svg { width: 15px; height: 15px; }

.sidebar-promo { margin-top: auto; }
.sidebar-promo strong { letter-spacing: .03em; }
.sidebar-promo p { line-height: 1.6; }

.site-header { min-height: 64px; }
.page-title strong { font-size: 18px; }
.page-title small { letter-spacing: .02em; text-transform: none; }

.workflow-progress { grid-template-columns: repeat(5,minmax(0,1fr)); }

.studio-options {
  border-top: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border);
}
.studio-options + .studio-options { border-top: 0; }
.studio-options > summary {
  position: relative;
  display: flex;
  min-height: 50px;
  padding: 12px 2px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.studio-options > summary::-webkit-details-marker { display: none; }
.studio-options > summary::after { color: var(--pc-stone); content: '+'; font-size: 19px; }
.studio-options[open] > summary::after { content: '−'; }
.studio-options > summary span {
  color: var(--pc-ink-70);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--pc-track-label);
  text-transform: uppercase;
}
.studio-options > summary small { margin-left: auto; font-size: 9px; }
.studio-options-body { display: grid; padding: 2px 0 16px; gap: 16px; }

#generationForm[data-studio-ready="false"] > :not(.card-heading):not(.generation-project-context) {
  display: none !important;
}
#generationForm[data-studio-ready="false"] .generation-project-context {
  margin: 0;
  padding: 18px;
  border-left: 3px solid var(--pc-ink);
  background: var(--pc-paper);
  color: var(--pc-ink-70);
  line-height: 1.55;
}

.onboarding-progress { min-width: 0; overflow: visible; }
.onboarding-progress li { min-width: 0; }

@media (max-width: 900px) {
  .workflow-progress { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .workflow-progress li { padding: 8px; }
  .workflow-progress li div small { display: none; }
}

@media (max-width: 760px) {
  .site-header { gap: 10px; }
  .page-title { flex: 0 0 min-content; }
  .header-actions, .mobile-page-navigation { min-width: 0; }
  .mobile-page-navigation select { width: min(176px,46vw); max-width: 100%; }
  .local-role { display: none !important; }
  .notification-label { display: none; }
  .onboarding-progress {
    grid-template-columns: repeat(4,minmax(0,1fr));
    overflow: visible;
  }
  .onboarding-progress li { font-size: 9px; }
  .onboarding-progress li::after {
    right: calc(-50% + 16px);
    left: calc(50% + 16px);
  }
  .workflow-progress { grid-template-columns: 1fr; }
  main.studio-active.studio-needs-setup #create,
  main.studio-active.studio-needs-setup #generationForm {
    height: auto;
  }
  main.studio-active.studio-needs-setup #generationForm { min-height: 220px; }
  .studio-options > summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .studio-options > summary small { margin-left: 0; }
  .studio-options > summary::after { position: absolute; right: 20px; }
}

@media (max-width: 360px) {
  header.site-header { height: auto; flex-wrap: wrap; }
  .header-actions { flex: 1 1 100%; }
  main.studio-active #generationForm,
  main.studio-active #productions { scroll-margin-top: 130px; }
}

/* Offer mode: the People page lists the prepared cast instead of a manual
   picker — People Choice provisions every person from the redeemed code. */
.offer-people { display: grid; gap: 14px; }
.offer-people-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.offer-person-card { display: flex; min-width: 0; padding: 12px; align-items: center; gap: 11px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.offer-person-card img { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; object-fit: cover; }
.offer-person-card div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.offer-person-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.offer-person-card small { color: var(--muted); font-size: 9px; }
.offer-person-card.ready small { color: #27614d; }
.offer-person-card.preparing { border-style: dashed; background: #fafafc; }
.offer-person-card.failed { border-color: #d9a3a3; background: #fdf6f6; }
.offer-person-card.failed small { color: #a33a3a; }
.offer-people-actions { display: grid; gap: 8px; justify-items: start; }
.offer-people-actions[hidden] { display: none; }
main.studio-active #offerPeoplePanel { display: none !important; }

/* Asking People Choice for people works in both commercial modes, so this card
   lives outside #twinForm. In the Create canvas the People page collapses to
   the generation form, exactly like the other talent cards. */
.request-people { display: grid; gap: 12px; }
.request-people .ai-interpretation { margin-bottom: 0; }
.request-people .requestable-section { margin-top: 4px; }
main.studio-active #requestPeoplePanel { display: none !important; }

/* Agency-set creative defaults replace the style, finish and stage controls
   with one read-only look chip. */
#generationForm.creative-locked .style-field,
#generationForm.creative-locked #styleInfo,
#generationForm.creative-locked #imageSettingsOptions { display: none !important; }
.creative-lock-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(103,87,214,.22); border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 11px; font-weight: 600; }
.creative-lock-chip[hidden] { display: none; }

/* Structured shoot setup: location text plus wardrobe/props/location pickers,
   fed straight into the generation without any @slug typing. */
.shoot-setup { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--border, rgba(15,23,42,.1)); border-radius: 14px; background: var(--surface-muted, rgba(103,87,214,.04)); }
.shoot-setup[hidden] { display: none; }
.shoot-setup-busy { opacity: .6; pointer-events: none; }
.shoot-setup-heading { display: flex; flex-direction: column; gap: 3px; }
.shoot-setup-heading strong { font-size: 14px; }
.shoot-setup-heading small { color: var(--muted, #64748b); }
.shoot-location { display: flex; flex-direction: column; gap: 6px; }
.shoot-location input { width: 100%; }
.shoot-reference-groups { display: flex; flex-direction: column; gap: 14px; }
.shoot-reference-group { display: flex; flex-direction: column; gap: 8px; }
.shoot-reference-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.shoot-reference-head strong { display: block; font-size: 13px; }
.shoot-reference-head small { display: block; color: var(--muted, #64748b); font-size: 11px; }
.shoot-upload-button { white-space: nowrap; }
.shoot-reference-options { display: flex; flex-wrap: wrap; gap: 8px; }
.shoot-reference-options:empty { display: none; }
.shoot-reference-option { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 10px; background: var(--surface, #fff); cursor: pointer; font-size: 10px; }
.shoot-reference-option img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; }
.shoot-reference-option span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shoot-reference-option.selected { border-color: var(--primary, #6757d6); box-shadow: 0 0 0 2px var(--primary-soft, rgba(103,87,214,.25)); }
/* The tile wraps the select button so the delete control can be a button of its
   own — a button inside a button is not markup a browser will honour. */
.shoot-reference-tile { position: relative; display: inline-flex; }
.shoot-reference-delete { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 50%; background: var(--surface, #fff); color: var(--muted, #64748b); cursor: pointer; font-size: 12px; line-height: 1; }
.shoot-reference-delete:hover { color: var(--danger, #b42318); border-color: var(--danger, #b42318); }
.shoot-reference-delete.armed { background: var(--danger, #b42318); border-color: var(--danger, #b42318); color: #fff; }
/* What the form is waiting for, when a submit is refused before it is sent. */
.needs-attention { outline: 2px solid var(--danger, #b42318); outline-offset: 4px; border-radius: 10px; }
/* The tile and its two corner controls are <button>s, so every property the
   global button rule sets and these rules did not came through: 40 px minimum
   height and 10/16 px padding made the corner controls 34 x 40 px - together
   they covered the top half of an 84 px tile, and a click meant for "select"
   landed on rename or delete. The label inherited the white text of a primary
   button on a white tile. Found on staging, 21.09.2026 ("I cannot select the
   object"). */
.shoot-reference-option { min-height: 0; color: var(--pc-ink, #121212); line-height: 1.3; text-align: center; }
.shoot-reference-option span { color: inherit; }
.shoot-reference-option.selected { border: 2px solid var(--pc-ink, #121212); padding: 5px; box-shadow: none; }
.shoot-reference-option.selected::after { content: "\2713"; position: absolute; right: 4px; bottom: 20px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--pc-ink, #121212); color: var(--pc-paper, #fff); font-size: 11px; line-height: 1; }
.shoot-reference-tile .shoot-reference-delete,
.shoot-reference-tile .shoot-reference-rename { min-height: 0; width: 20px; height: 20px; padding: 0; font-size: 11px; line-height: 1; opacity: .9; }
.shoot-reference-preview { display: flex; flex-direction: column; gap: 6px; }
.shoot-preview-label { font-size: 11px; font-weight: 600; color: var(--muted, #64748b); }
.shoot-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.shoot-preview-empty { color: var(--muted, #64748b); font-size: 11px; }
.shoot-preview-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 999px; background: var(--surface, #fff); font-size: 11px; }
.shoot-preview-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; }
.shoot-preview-remove { border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted, #64748b); }
.shoot-setup-hint { color: var(--muted, #64748b); font-size: 12px; }
.shoot-setup-hint[hidden] { display: none; }

/* Naming an upload before it goes up, and renaming a tile afterwards. Both show
   the @name live, because that string is what the customer types in the prompt. */
.shoot-name-host[hidden] { display: none; }
.shoot-name-panel { display: grid; padding: 10px; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 6px 10px; border: 1px solid var(--pc-border); background: var(--surface, #fff); }
.shoot-name-file { grid-column: 1/-1; color: var(--muted, #64748b); font-size: 10px; }
.shoot-name-panel input { min-width: 0; font-size: 12px; }
.shoot-name-mention { color: var(--primary, #6757d6); font-size: 10px; }
.shoot-name-panel .shoot-name-mention { grid-column: 1; }
.shoot-name-confirm { white-space: nowrap; }
.shoot-reference-tile.editing { display: flex; width: 120px; flex-direction: column; gap: 3px; }
.shoot-reference-rename-input { width: 100%; font-size: 11px; }
.shoot-reference-rename { position: absolute; top: 2px; left: 2px; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 50%; background: var(--surface, #fff); color: var(--muted, #64748b); cursor: pointer; font-size: 11px; line-height: 1; }
.shoot-reference-rename:hover { border-color: var(--primary, #6757d6); color: var(--primary, #6757d6); }

/* The names this prompt can address, under the prompt field. Without them the
   customer had to remember what they had called an outfit — and "@hose" that
   does not exist comes back as an error only after the request. */
.prompt-mentions { display: flex; margin-top: -4px; flex-direction: column; gap: 5px; }
.prompt-mentions[hidden] { display: none; }
.mention-hint { color: var(--muted, #64748b); font-size: 10px; }
.mention-group { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mention-group-title { color: var(--pc-stone, #8b8798); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.mention-chip { display: inline-flex; padding: 3px 8px 3px 3px; align-items: center; gap: 5px; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 999px; background: var(--surface, #fff); color: var(--pc-ink, #121212); cursor: pointer; font-size: 11px; }
.mention-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mention-chip:hover { border-color: var(--primary, #6757d6); color: var(--primary, #6757d6); }
.prompt-field { position: relative; display: flex; flex-direction: column; }
.mention-suggest { position: absolute; z-index: 20; top: 100%; right: 0; left: 0; max-height: 232px; overflow-y: auto; padding: 4px; border: 1px solid var(--border, rgba(15,23,42,.12)); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 32px rgba(15,23,42,.16); }
.mention-suggest[hidden] { display: none; }
.mention-suggest-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.mention-suggest-title { padding: 0 8px; color: var(--pc-stone, #8b8798); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.mention-option { display: flex; padding: 5px 8px; align-items: center; gap: 8px; border-radius: 8px; cursor: pointer; }
.mention-option img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.mention-option-copy { display: flex; min-width: 0; flex-direction: column; }
.mention-option-copy strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mention-option-copy small { color: var(--muted, #64748b); font-size: 10px; }
.mention-option.active, .mention-option:hover { background: var(--pc-mist, rgba(103,87,214,.1)); }

/* Included images, always in sight. The counter used to live only inside the
   collapsed "More image settings" disclosure, which agency creative defaults
   remove entirely — so the one number a customer needs was unreachable. */
.studio-readiness span.studio-allowance {
  max-width: 320px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.45;
  white-space: normal;
}
.studio-readiness span.studio-allowance.low { background: #fdf1e3; color: #8a5416; }
.studio-readiness span.studio-allowance.empty { background: #fdecec; color: #99302f; }
.studio-readiness span.studio-allowance[hidden] { display: none; }

/* Who handles the money is a whole-studio fact. It used to live only in
   #spendNote inside the same removable disclosure, so in request mode the
   sentence was never shown at all. */
.studio-spend-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.studio-spend-note[hidden] { display: none; }

/* Studio and setup are full-height grids whose tracks are assigned to the
   canvas and the brief. A banner cannot join them as an ordinary grid child
   without pushing one of them off screen, so the two workspace alerts float
   above the layout instead of inside it. They are the only elements allowed
   to overlap the canvas, and both collapse to nothing when empty. */
main.studio-active > #stagingNotice,
main.studio-active > #workspaceMessage,
main.onboarding-active > #stagingNotice,
main.onboarding-active > #workspaceMessage {
  position: fixed;
  z-index: 30;
  top: 74px;
  right: 22px;
  width: min(420px,calc(100vw - 44px));
  margin: 0;
  box-shadow: 0 14px 40px rgba(45,37,100,.16);
}
main.studio-active > #stagingNotice:not([hidden]) ~ #workspaceMessage,
main.onboarding-active > #stagingNotice:not([hidden]) ~ #workspaceMessage { top: 146px; }
.workspace-message-action,
.workspace-message-action:hover {
  min-height: 0;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Viewers used to get the studio canvas with an empty brief column. The review
   notice takes that column instead, so read-only access reads as a role, not
   as a broken page. */
main.studio-active.workspace-read-only > #create { display: none !important; }
main.studio-active > #readOnlyNotice {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

/* Keep the floating AI Guide launcher clear of the content underneath it. */
main:not(.studio-active):not(.portal-page-active) { padding-bottom: 108px; }
main.portal-page-active > .portal-page-visible { padding-bottom: 104px; }
main.studio-active #generationForm { padding-bottom: 96px; }
main.studio-active #jobGrid { padding-bottom: 96px; }

/* Responsive overrides for the rules above — they have to come last, because
   the base studio placements carry the same specificity. */
@media (max-width: 1080px) {
  /* ai-studio.css collapses the readiness badges here; the included-image
     counter is not a badge and has to survive the narrow layout. */
  .studio-readiness { display: flex; }
  .studio-readiness > :not(.studio-allowance) { display: none; }
}
@media (max-width: 820px) {
  main.studio-active > #readOnlyNotice { grid-column: 1; grid-row: 2; }
}
@media (max-width: 760px) {
  main.studio-active > #stagingNotice,
  main.studio-active > #workspaceMessage,
  main.onboarding-active > #stagingNotice,
  main.onboarding-active > #workspaceMessage {
    top: 66px;
    right: 12px;
    width: calc(100vw - 24px);
  }
  main.studio-active > #stagingNotice:not([hidden]) ~ #workspaceMessage,
  main.onboarding-active > #stagingNotice:not([hidden]) ~ #workspaceMessage { top: 150px; }
}

/* One progress bar at a time: while "Start a new shoot" walks through its own
   four steps (brief, models, items, background), the setup's outer four steps
   (shoot, people, look, create) would be a second, competing progress bar. */
main:has(#projectForm:not([hidden])):has([data-onboarding-step="project"].active) #onboardingProgress { display: none; }