/* Spacious, uncropped artwork within the existing Kynd production surface. */
.production-panel{border-color:#c6b0e729;background:radial-gradient(ellipse at 0 0,#a68bcc0b,transparent 56%),#171620;border-radius:20px}
.prod-panel{padding:26px}
.prod-heading{align-items:center;margin-bottom:22px}
.prod-heading h2{font-size:26px;letter-spacing:-.7px}
.prod-heading p{font-size:10px;letter-spacing:1.7px;margin-bottom:8px}
.prod-stage-now{white-space:normal;text-align:right;max-width:220px;line-height:1.6;padding:7px 11px;border-color:#c6b0e724;border-radius:8px}
/* The automation switch moved to the sidebar production card (film.css). */
.prod-rail{gap:7px;margin-bottom:28px}
.prod-step{font-size:10px;letter-spacing:.15px;padding:6px 10px}
.prod-gallery{border-top:1px solid #c6b0e71c;padding-top:26px;margin-bottom:25px;min-width:0}
.prod-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.prod-gallery-heading .prod-block-head{font-size:10px;letter-spacing:1.8px;color:#b9a7d0;margin-bottom:8px}
.prod-gallery-heading h3{margin:0 0 5px;color:#eee6f5;font-weight:450;font-size:21px;letter-spacing:-.5px}
.prod-gallery-heading p{margin:0;color:#a99fb7;font-size:12px;line-height:1.7}
.prod-gallery-progress{font-size:11px;line-height:1.7;color:#b0a4be;text-align:right}
.prod-gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid #c6b0e714}
.prod-gallery-filters{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.prod-gallery-filters button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid transparent;border-radius:8px;background:transparent;color:#b5aabd;font-size:12px;transition:background .15s,color .15s}
.prod-gallery-filters button span{font-size:10px;color:#958b9f;font-variant-numeric:tabular-nums}
.prod-gallery-filters button[aria-pressed="true"]{background:#c9b6ff12;border-color:#c9b6ff26;color:#eadff9}
.prod-gallery-filters button[aria-pressed="true"] span{color:#c5b3db}
.prod-gallery-filters button:hover{background:#c9b6ff0c}
.prod-gallery-size{display:flex;flex:none;gap:3px;padding:3px;border:1px solid #c6b0e721;border-radius:9px}
.prod-gallery-size button{display:grid;place-items:center;width:34px;height:32px;border-radius:6px;background:transparent;color:#9688a6}
.prod-gallery-size button[aria-pressed="true"]{background:#c9b6ff15;color:#e0cef4}
.prod-gallery-size .icon{width:16px;height:16px}
.prod-gallery-count{font-size:11px;color:#a799b5;margin:15px 0 12px;line-height:1.4}
.prod-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:18px;align-items:stretch}
.prod-gallery-large{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));gap:22px}
.prod-gallery .prod-card{min-width:0;border-radius:13px;background:#ffffff03;border-color:#c8b2e422;transition:border-color .18s,box-shadow .18s;display:flex;flex-direction:column}
.prod-gallery .prod-card:hover,.prod-gallery .prod-card:focus-within{border-color:#c9b6ff65;box-shadow:0 8px 26px #0002}
.prod-gallery .prod-card-accepted{border-color:#9ac9b630}
.prod-gallery .prod-card-repair{border-color:#d3a77944}
.prod-card-open{width:100%;padding:0;display:flex;flex:1;flex-direction:column;background:none;text-align:left;border-radius:12px;min-width:0}
.prod-card-open:hover:not(:disabled){filter:none}
.prod-card-open:focus-visible{outline-offset:-3px}
.prod-gallery .prod-art{display:block;width:100%;aspect-ratio:4/3;background:radial-gradient(ellipse at 50% 45%,#262431,#14131c);border-bottom:1px solid #c8b2e412}
.prod-media{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;overflow:hidden}
.prod-gallery .prod-art img{width:100%;height:100%;object-fit:contain}
.prod-art-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9f91b0;font-size:11px}
.prod-art-loading .icon{width:25px;height:25px}
.prod-enlarge{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #e6d7ff30;border-radius:7px;background:#16111ddd;backdrop-filter:blur(12px);color:#e7dbf5;font-size:10px;opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s;pointer-events:none}
.prod-enlarge .icon{width:14px;height:14px;color:inherit}
.prod-card-open:hover .prod-enlarge,.prod-card-open:focus-visible .prod-enlarge{opacity:1;transform:none}
.prod-gallery .prod-card-body{display:block;width:100%;padding:13px 14px 15px}
.prod-gallery .prod-card-body strong{font-size:13px;line-height:1.6;font-weight:500;color:#e9e0f2;overflow-wrap:anywhere}
.prod-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.prod-gallery .prod-card-meta>span:first-child{font-size:10px;letter-spacing:.4px;color:#ada0ba;text-transform:capitalize}
.prod-gallery .prod-badge{position:static;display:inline-flex;font-size:8px;line-height:1.4;letter-spacing:.55px;padding:3px 6px;border:1px solid #c9b6ff1c;background:#c9b6ff08;border-radius:4px;color:#bba9d0;text-transform:uppercase}
.prod-gallery .prod-card-accepted .prod-badge{color:#b4d9c9;border-color:#a6d5c426;background:#a6d5c40a}
.prod-gallery .prod-card-repair .prod-badge{color:#e1bc96;border-color:#e1bc9630}
.prod-gallery .prod-review-verbs{gap:7px;margin:0;padding:0 12px 12px}
/* A picture's other versions (production-ui.js versionsBadge): the "+N" a shot card shows for its takes. */
.prod-versions{position:absolute;top:8px;right:8px;z-index:2;min-width:30px;padding:6px 9px;border-radius:999px;background:linear-gradient(110deg,#d0b6eb,#b8c2df);color:#2b233a;font:600 12px/1 ui-monospace,monospace;text-align:center;box-shadow:0 2px 8px #0006}
.prod-gallery .prod-review-verbs button{min-height:36px;display:flex;justify-content:center;align-items:center;gap:5px;font-size:10px;background:#ffffff03;padding:7px 5px}
.prod-review-verbs .icon{width:12px;height:12px}
.prod-concepts{margin-top:20px;border:1px solid #c6b0e71c;border-radius:11px;background:#c6b0e703;overflow:hidden}
.prod-concepts-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:15px 16px;text-align:left;background:transparent;color:#b8aac7;font-size:12px;line-height:1.6}
.prod-concepts-toggle strong{font-weight:450}
.prod-concepts-toggle>span:first-child{font-size:19px;color:#c5aedf;width:15px;text-align:center}
.prod-concepts-toggle>span:last-child{margin-left:auto;font-size:10px;color:#9c8ead}
.prod-concepts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:12px;padding:0 16px 16px}
.prod-concept{display:flex;align-items:center;gap:10px;border-top:1px solid #c6b0e716;padding:14px 0 0;min-width:0}
.prod-concept-icon{display:grid;place-items:center;width:33px;height:38px;flex:none;border-radius:6px;background:#c9b6ff08;color:#9985b1}
.prod-concept-icon .icon{width:16px;height:16px}
.prod-concept strong{display:block;font-size:11px;font-weight:450;line-height:1.6;color:#c8bbd6;overflow-wrap:anywhere}
.prod-concept div>span{display:block;font-size:10px;color:#978aa6;margin-top:3px}
.prod-review{padding-top:20px;margin-top:0}
.prod-review .prod-block-head{font-size:10px;color:#b1a5bd;flex-wrap:wrap}
.prod-review-lead{font-size:12px;color:#a99fb7;max-width:85ch;line-height:1.8}
.prod-review-guide summary{width:fit-content;cursor:pointer;color:#c6b0df;font-size:11px;padding:4px 0 8px}
.prod-review-guide .prod-review-checklist{margin:6px 0 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.prod-review-checklist li{color:#aca0b9}
@media(hover:none){.prod-enlarge{opacity:1;transform:none}.prod-enlarge>span{display:none}}
@media(max-width:1100px){.prod-gallery-heading{align-items:flex-start;flex-direction:column;gap:9px}.prod-gallery-progress{text-align:left}.prod-panel{padding:22px}.prod-gallery-filters button{padding:7px 9px}}
/* 5 Oct 2026, Matt from his phone: the "who can talk together" card and the Cast & World copy are not needed there - voices are
   settled without the creator saying anything, and the rest is just text. The pictured/checked line stays. */
@media(max-width:650px){.prod-talk,.prod-gallery-heading>div{display:none}.prod-stage-now{border:0;padding:0;font-size:11px}.prod-step{min-height:36px}.prod-gallery-heading{margin-bottom:12px}.prod-panel{padding:17px}.prod-heading{gap:12px;align-items:flex-start;flex-direction:column}.prod-stage-now{text-align:left;max-width:100%}.prod-gallery{padding-top:22px}.prod-gallery-heading h3{font-size:21px}.prod-gallery-toolbar{align-items:flex-start;flex-wrap:wrap}.prod-gallery-filters{flex:1 1 240px}.prod-gallery-size{margin-left:auto}.prod-gallery-filters button{min-height:40px}.prod-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}.prod-gallery-large{grid-template-columns:1fr}.prod-gallery .prod-card-body{padding:14px 15px}.prod-gallery .prod-card-body strong{font-size:14px}.prod-gallery .prod-review-verbs button{min-height:42px;font-size:12px}.prod-gallery .prod-art{aspect-ratio:1/1}.prod-gallery .prod-badge{font-size:9px}.prod-concepts-toggle{padding:14px 12px}.prod-concepts-toggle>span:last-child{display:none}.prod-gallery-progress{font-size:11px}.prod-rail{gap:6px}.prod-step{font-size:10px;padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.prod-gallery .prod-card,.prod-gallery-filters button,.prod-enlarge{transition:none}}

/* A character's voice, on its card. Chips share My media's .cast-voice look. */
.prod-voice{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 12px 12px}
.prod-voice select{flex:1;min-width:150px;border:1px solid #ffffff1f;background:#ffffff08;border-radius:8px;padding:6px 8px;color:inherit;font-size:11px}
.prod-concept .prod-voice{padding:6px 0 0;width:100%}
.prod-concept{flex-wrap:wrap}
.prod-concept .prod-voice{flex:1 1 100%;padding:8px 0 0 0}

.prod-voice-add{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.prod-voice-look{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;font-size:11px;color:#a9a6bb}.prod-voice-look select{flex:1;min-width:140px}
.prod-voice-add button{flex:1;border:1px solid #ffffff26;background:#ffffff08;border-radius:8px;padding:8px;color:inherit;font:inherit;font-size:11px;cursor:pointer}
.prod-voice-add button:hover{background:#cdb6ff18;border-color:#cdb6ff66}
.prod-voice-add button:focus-visible{outline:2px solid #cdb6ff;outline-offset:2px}

/* The voice card's five states: nothing yet, one-click take, set, setting, failed. */
.prod-voice-status{flex:1 1 100%;margin:0;font-size:11px;line-height:1.5;color:#a99fb7}
.prod-voice-primary{flex:1 1 100%;border:1px solid #ffffff22;background:linear-gradient(110deg,#d3baf5,#aabfea);border-radius:8px;padding:9px 12px;color:#262339;font:inherit;font-size:11px;font-weight:650;line-height:1.35;text-align:center;cursor:pointer}
.prod-voice-primary:focus-visible,.prod-voice-toggle:focus-visible,.prod-voice-error button:focus-visible,.prod-talk button:focus-visible{outline:2px solid #cdb6ff;outline-offset:2px}
.prod-voice-toggle{flex:1 1 100%;background:none;border:0;padding:4px 0;color:#c6b0df;font:inherit;font-size:11px;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.prod-voice-more{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.prod-voice-more select{width:100%}
.prod-voice-hint{margin:0;font-size:10px;line-height:1.5;color:#8f86a0}
.prod-voice-busy{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:0;font-size:11px;line-height:1.5;color:#d9cdf0}
.prod-voice-busy::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#cdb6ff}
@media (prefers-reduced-motion:no-preference){.prod-voice-busy::before{animation:prod-voice-pulse 1.2s ease-in-out infinite}}
@keyframes prod-voice-pulse{50%{opacity:.25;transform:scale(.7)}}
.prod-voice-error{flex:1 1 100%;margin:0;padding:8px 10px;border:1px solid #f0a08c55;background:#f0a08c12;border-radius:8px;font-size:11px;line-height:1.5;color:#ffc9bd}
.prod-voice-error button,.prod-talk li>button{border:1px solid #ffffff26;background:#ffffff0d;border-radius:6px;padding:3px 8px;color:inherit;font:inherit;font-size:10.5px;cursor:pointer}
.prod-voice-file{flex:1;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff26;background:#ffffff08;border-radius:8px;padding:8px;font-size:11px;text-align:center;cursor:pointer}
/* A character's photos (photo-sets.js): small portrait thumbnails, each the exact crop H3 is given. */
.prod-photos{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:6px}
.prod-photo-strip{display:flex;flex-wrap:wrap;gap:6px}
.prod-photo{position:relative;width:42px;height:56px;border-radius:6px;overflow:hidden;border:1px solid #ffffff26;background:#ffffff08}
.prod-photo .prod-media,.prod-photo img{display:block;width:100%;height:100%;object-fit:cover}
.prod-photo .prod-art-loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:.6}
.prod-photo-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#000000b3;color:#fff;font-size:12px;line-height:18px;cursor:pointer}
.prod-photo-remove:hover{background:#000000e6}
.prod-photo-remove:focus-visible,.prod-photo-add:focus-within{outline:2px solid #cdb6ff;outline-offset:2px}
.prod-photo-hint{margin:0;font-size:11px;line-height:1.45;opacity:.8}
.prod-photo-add{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff26;background:#ffffff08;border-radius:8px;padding:8px;font-size:11px;text-align:center;cursor:pointer}
.prod-photo-add:hover{background:#cdb6ff18;border-color:#cdb6ff66}
/* The Character Studio (character-studio.js): the photo controls' shape, lit lilac as the door to the whole studio. */
.prod-studio-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;border:1px solid #cdb6ff47;background:#cdb6ff12;border-radius:8px;padding:8px;color:#e4d9ff;font:inherit;font-size:11px;font-weight:600;text-align:center;cursor:pointer;transition:background .18s,border-color .18s}
.prod-studio-open:hover{background:#cdb6ff24;border-color:#cdb6ff8c}
.prod-studio-open:focus-visible{outline:2px solid #cdb6ff;outline-offset:2px}
.prod-voice-file:hover{background:#cdb6ff18;border-color:#cdb6ff66}
.prod-voice-file:focus-within{outline:2px solid #cdb6ff;outline-offset:2px}
/* Who can talk together: one row per speaking character. */
.prod-talk{margin:4px 0 18px;padding:14px 16px;border:1px solid #c6b0e71f;border-radius:12px;background:#c9b6ff06}
.prod-talk .prod-block-head{font-size:10px;color:#b1a5bd;flex-wrap:wrap}
.prod-talk>p{margin:6px 0 10px;font-size:12px;line-height:1.6;color:#a99fb7}
.prod-talk ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.prod-talk li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid #ffffff0a;font-size:11.5px}
.prod-talk li>strong{font-weight:500;color:#e2d9f0;min-width:7em}
.prod-talk li>span{flex:1;min-width:10em;color:#978aa6}
.prod-talk li>.prod-voice-error{padding:0;border:0;background:none}
.prod-talk li>.prod-voice-file{flex:none;padding:4px 10px;font-size:10.5px}
/* The shot editor's "Keep <name>’s face and voice", beside its voice note. */
.shot-voice-keep{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shot-voice-keep small{font-size:11px;line-height:1.5;color:#a99cc4}

/* A picture Kynd is working on says so on its face (30 Sep 2026): a card being drawn for the
   first time sits in the grid where the picture will land; one being fixed keeps its picture,
   dimmed, with the verb over it, and its verdict buttons rest until the answer lands. */
.prod-card-working{border-color:#c9b6ff40;box-shadow:0 0 0 1px #c9b6ff10,0 8px 30px #0003}
.prod-card-working .prod-art{position:relative}
.prod-card-working .prod-media img{opacity:.35;filter:saturate(.6)}
.prod-working{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#dcd0f0;font-size:12px;letter-spacing:.2px;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#1a182699,transparent 70%)}
.prod-card-arriving .prod-working{background:radial-gradient(ellipse at 50% 45%,#2a2738,#14131c)}
.prod-working-orbit{width:22px;height:22px;border-radius:50%;border:1.5px solid #d7bbeb33;border-top-color:#ddc5ef;animation:prod-working-spin 1.4s linear infinite}
@keyframes prod-working-spin{to{transform:rotate(360deg)}}
.prod-card-working .prod-enlarge{display:none}
.prod-card-working .prod-badge{color:#dacafa;border-color:#c9b6ff44;background:#c9b6ff14}
@media(prefers-reduced-motion:reduce){.prod-working-orbit{animation:none;border-top-color:#d7bbeb33}}

/* THE STUDIO ON A PHONE, FURTHER (Matt, 5 Oct 2026: "Yes take it to the next level"). Measured at 412px: the Film screen
   was ~10,500px, 6,350 of it this gallery, one 470-670px card a row, each carrying its notes, its voice and its verdict
   buttons. On a phone the "comfortable" size is two columns of the picture, its kind and verdict, and its name (the
   screen: 10,464px -> 5,502px); a tap opens the viewing room, which holds the notes. Looks right and Needs a fix
   stay on the card, and a character keeps Add photos, the Character Studio and its voice controls, each a full-width
   button. The "large" size (the list icon) keeps every card whole. */
@media(max-width:650px){
  .prod-gallery-grid.prod-gallery-comfortable{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .prod-gallery-comfortable .prod-card-body{padding:8px 9px 10px}
  .prod-gallery-comfortable .prod-card-meta{margin-bottom:4px;gap:4px}
  .prod-gallery-comfortable .prod-card-meta>span:first-child{font-size:10px}
  .prod-gallery-comfortable .prod-card-body>strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35}
  .prod-gallery-comfortable .kynd-notes,.prod-gallery-comfortable .prod-card-body>p{display:none}
  /* The verdict, right on the card (Matt: "Should be able to click looks good or fix from this view"). */
  .prod-gallery-grid.prod-gallery-comfortable .prod-review-verbs{display:flex;gap:5px;padding:0 8px 9px;margin:0}
  .prod-gallery-comfortable .prod-review-verbs button{flex:1 1 0;min-width:0;min-height:34px;padding:4px 3px;font-size:11.5px;gap:3px;justify-content:center;white-space:nowrap}
  .prod-gallery-comfortable .prod-review-verbs button .icon{width:13px;height:13px}
  /* A character keeps its way into the Character Studio and every voice control; the long hints step aside. */
  .prod-gallery-grid.prod-gallery-comfortable .prod-photos{display:flex;flex-direction:column;gap:5px;padding:0 8px 6px;margin:0}
  .prod-gallery-comfortable .prod-photo-strip,.prod-gallery-comfortable .prod-photo-hint{display:none}
  .prod-gallery-comfortable .prod-studio-open,.prod-gallery-comfortable .prod-photo-add{width:100%;min-height:32px;font-size:11.5px;justify-content:center;text-align:center;margin:0}
  .prod-gallery-grid.prod-gallery-comfortable .prod-voice{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px 6px;margin:0}
  .prod-gallery-comfortable .prod-voice-status,.prod-gallery-comfortable .prod-voice-hint{display:none}
  .prod-gallery-comfortable .prod-voice>button,.prod-gallery-comfortable .prod-voice .prod-voice-add>*{flex:1 1 100%;min-height:32px;font-size:11.5px;justify-content:center;text-align:center}
  .prod-gallery-comfortable .prod-voice select{min-width:0;width:100%}
  .prod-gallery-comfortable .prod-voice .cast-voice{max-width:100%;min-width:0}
  .prod-gallery-comfortable .prod-voice .cast-voice small{display:none}
  #filmCanvas .prod-heading{margin-bottom:10px}
  #filmCanvas .prod-rail{margin-bottom:14px}
}
/* SAVE TO BRAND (27 Oct 2026, brand-kit.js): a picture kept with the film's brand, for every film linked to it. */
.prod-brand-save{display:block;width:calc(100% - 16px);margin:0 8px 8px;border:1px solid #ffffff1f;background:transparent;border-radius:8px;padding:6px;color:var(--subtle,#a9a3b8);font:inherit;font-size:10px;font-weight:600;cursor:pointer}
.prod-brand-save:hover{color:#e4d9ff;border-color:#cdb6ff66}
.prod-brand-save:focus-visible{outline:2px solid #cdb6ff;outline-offset:2px}