/* Public brief wizards (spotlight.html, scout.html), Direction A "Screening Room".
   Colours, type and motion come from tokens.css. Class names are the ones the page scripts toggle. */
:root{
  --mut:var(--text-3);
  --wz-ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --wz-ico-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.55;}
a{color:inherit;}
button{font:inherit;color:inherit;}
.ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Nav ── */
nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;height:60px;padding:0 24px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-back{display:inline-flex;align-items:center;gap:6px;height:32px;margin-left:-8px;padding:0 10px 0 8px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;
  transition:background-color var(--dur-hover) var(--ease-std),color var(--dur-hover) var(--ease-std);}
.nav-back:hover{background:var(--surface-2);color:var(--text);}
.nav-logo{display:flex;align-items:center;gap:8px;}
.nav-logo img{display:block;width:24px;height:24px;border-radius:7px;}
.wz-wordmark{font-family:var(--font-display);font-weight:700;font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-size:19px;line-height:1;letter-spacing:-.01em;}
.nav-module{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);}
.nav-mode-tabs{display:inline-flex;gap:2px;margin:0 auto;padding:3px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);}
.nmt{appearance:none;height:30px;padding:0 14px;border:0;border-radius:7px;background:transparent;font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur-hover) var(--ease-std),color var(--dur-hover) var(--ease-std),box-shadow var(--dur-hover) var(--ease-std);}
.nmt:hover{color:var(--text);}
.nmt.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);}
.nav-auth{display:flex;align-items:center;gap:8px;margin-left:auto;}
.nav-mode-tabs+.nav-auth{margin-left:0;}
.nav-auth input{width:200px;height:36px;padding:0 12px;border:1px solid var(--field-border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit;font-size:13px;}
.nav-auth input::placeholder{color:var(--text-3);}
.nav-auth input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,107,53,.14);}
.nav-auth button{height:36px;padding:0 14px;border:0;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--dur-hover);}
.nav-auth button:hover{opacity:.9;}
.nav-who{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text-2);}
.nav-who::before{content:"";width:14px;height:14px;background:var(--ready);-webkit-mask:var(--wz-ico-check) center/contain no-repeat;mask:var(--wz-ico-check) center/contain no-repeat;}
.nav-err{max-width:280px;font-size:12.5px;line-height:1.35;color:var(--error);}
.nav-err[hidden]{display:none;}

/* ── Shell and the step rail ── */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 60px);}
.sidebar{position:sticky;top:60px;align-self:start;display:flex;flex-direction:column;gap:4px;height:calc(100vh - 60px);padding:28px 18px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);}
.sidebar-title{margin:0 0 14px;padding:0 10px;font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
#stepList{display:flex;flex-direction:column;gap:2px;}
.step-item{appearance:none;position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px 9px 14px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;font:inherit;color:inherit;}
.step-item::before{content:"";position:absolute;left:2px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--line);}
.step-item:has(.step-num.done)::before{background:var(--text);}
.step-item.active{background:var(--surface-2);}
.step-item.active::before{background:var(--accent);}
.step-item.clickable{cursor:pointer;transition:background-color var(--dur-hover) var(--ease-std);}
.step-item.clickable:hover{background:var(--surface-2);}
.step-num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:22px;height:20px;font:500 11px/1 var(--font-mono);color:var(--text-3);}
.step-num.active-dot{color:var(--accent-text);}
.step-num.done::before{content:"";width:13px;height:13px;background:var(--ready);-webkit-mask:var(--wz-ico-check) center/contain no-repeat;mask:var(--wz-ico-check) center/contain no-repeat;}
.step-text{display:flex;flex-direction:column;min-width:0;}
.step-label{display:block;font-size:13.5px;font-weight:500;line-height:1.35;color:var(--text);}
.step-item.pending-state .step-label{color:var(--text-3);}
.step-item:has(.step-num.done) .step-label{color:var(--text-2);}
.step-item.active .step-label{font-weight:600;}
.step-sub{display:block;max-width:170px;margin-top:2px;overflow:hidden;font-size:11.5px;line-height:1.3;color:var(--text-3);white-space:nowrap;text-overflow:ellipsis;}
.sidebar-cost{margin-top:auto;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);}
.cost-label{margin-bottom:6px;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
.cost-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px;font-size:13px;color:var(--text-2);}
.cost-row b{font-weight:600;color:var(--text);}
.cost-total{margin-top:4px;font-family:var(--font-display);font-weight:800;font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--text);}
.cost-total sup{margin-right:1px;font-size:16px;vertical-align:top;}

/* ── Panels ── */
.main{width:100%;max-width:760px;margin:0 auto;padding:40px 48px 96px;}
.step-panel{display:none;}
.step-panel.visible{display:block;animation:wz-in var(--dur-panel) var(--ease-out);}
@keyframes wz-in{from{opacity:0;}to{opacity:1;}}
.panel-head{margin-bottom:28px;}
.panel-head h1,.panel-head h2,.dm{font-family:var(--font-display);font-weight:800;font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0;font-size:clamp(28px,3.4vw,36px);line-height:1.05;letter-spacing:-.02em;color:var(--text);}
.panel-head h1,.panel-head h2{margin-bottom:10px;}
.group-label{color:var(--text);}
.panel-head p{max-width:560px;font-size:15px;line-height:1.6;color:var(--text-2);}

.field{margin-bottom:18px;}
.field label{display:block;margin-bottom:7px;font-size:13px;font-weight:500;color:var(--text);}
.field input,.field textarea,.field select{width:100%;min-height:44px;padding:10px 13px;border:1px solid var(--field-border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font:inherit;font-size:15px;
  transition:border-color var(--dur-hover) var(--ease-std),box-shadow var(--dur-hover) var(--ease-std);}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,107,53,.14);}
.field textarea{min-height:110px;line-height:1.55;resize:vertical;}
.field-hint{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--text-3);}
.check-row{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:13.5px;line-height:1.5;color:var(--text-2);}
.check-row input[type=checkbox]{flex-shrink:0;width:16px;height:16px;margin-top:3px;accent-color:var(--accent);}
.check-row label{cursor:pointer;}

/* Choice chips: one selected per group (the scripts toggle .sel). */
.pill-group{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px;}
.pill{appearance:none;display:inline-flex;align-items:center;min-height:36px;padding:7px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font:500 13.5px/1.2 var(--font-ui);color:var(--text-2);cursor:pointer;
  transition:background-color var(--dur-hover) var(--ease-std),border-color var(--dur-hover) var(--ease-std),color var(--dur-hover) var(--ease-std);}
.pill:hover{border-color:var(--field-border);color:var(--text);}
.pill.sel{background:var(--primary);border-color:var(--primary);color:var(--on-primary);}

/* Selectable tiles: format, footage source, saved persona. */
.fmt-tile,.src-tile,.persona-tile{appearance:none;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);font:inherit;color:var(--text);cursor:pointer;
  transition:border-color var(--dur-hover) var(--ease-std),background-color var(--dur-hover) var(--ease-std),box-shadow var(--dur-hover) var(--ease-std);}
.fmt-tile:hover,.src-tile:hover,.persona-tile:hover{border-color:var(--line-strong);}
.fmt-tile.sel,.src-tile.sel,.persona-tile.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);}
.format-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 22px;}
.fmt-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:112px;padding:14px 8px 12px;text-align:center;}
.fmt-frame{display:block;margin:0 auto 10px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--surface-2);}
.fmt-tile.sel .fmt-frame{border-color:var(--accent);background:var(--surface);}
.fmt-label{display:block;font:600 12.5px/1.2 var(--font-mono);}
.fmt-sub{display:block;font-size:11px;color:var(--text-3);}
.source-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;}
.src-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px;text-align:left;}
.src-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:10px;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);}
.src-tile.sel .src-icon{background:var(--surface);color:var(--accent-text);}
.src-name{display:block;font-size:14px;font-weight:600;}
.src-desc{display:block;font-size:12.5px;line-height:1.45;color:var(--text-2);}
.src-badge{display:inline-flex;margin-top:8px;padding:3px 8px;border-radius:var(--r-pill);background:var(--ready-soft);color:var(--ready);font:500 11px/1.25 var(--font-ui);}
.persona-tile{display:block;width:100%;margin-bottom:8px;padding:14px 16px;text-align:left;}
.pt-name{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-size:15px;font-weight:600;}
.pt-phrases{display:block;font-size:12.5px;color:var(--text-2);}
.pt-badge{display:inline-flex;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font:500 11px/1.3 var(--font-ui);}

/* ── Storyboard ── */
.beat-list{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;}
.beat-card{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.beat-role{flex-shrink:0;margin-top:2px;padding:4px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.beat-role.hook{background:var(--accent-soft);color:var(--accent-text);}
.beat-role.insight,.beat-role.implication{background:var(--ready-soft);color:var(--ready);}
.beat-role.cta{background:var(--primary);color:var(--on-primary);}
.beat-text{font-size:14.5px;line-height:1.55;color:var(--text);}
.beat-action{margin-top:4px;font:400 12px/1.4 var(--font-mono);color:var(--text-3);}
.script-out{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);font-size:15px;line-height:1.7;color:var(--text);white-space:pre-wrap;}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.spec-card{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);}
.spec-k{font:500 10.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);}
.spec-v{margin-top:3px;font-size:14px;font-weight:600;color:var(--text);}
.divider{height:1px;margin:24px 0;background:var(--line);}

/* Gate notices and errors. The glyph is drawn here; the scripts only write the sentence. */
.compliance-ok,.compliance-warn,.faithful-ok,.faithful-warn,.err-box{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:var(--r-md);font-size:13.5px;line-height:1.5;color:var(--text);}
.compliance-ok::before,.compliance-warn::before,.faithful-ok::before,.faithful-warn::before,.err-box::before{content:"";flex:none;width:15px;height:15px;margin-top:2px;background:currentColor;-webkit-mask:var(--wz-ico-alert) center/contain no-repeat;mask:var(--wz-ico-alert) center/contain no-repeat;}
.compliance-ok,.faithful-ok{background:var(--ready-soft);}
.compliance-ok::before,.faithful-ok::before{background:var(--ready);-webkit-mask-image:var(--wz-ico-check);mask-image:var(--wz-ico-check);}
.compliance-warn,.faithful-warn{background:var(--review-soft);}
.compliance-warn::before,.faithful-warn::before{background:var(--review);}
.err-box{margin-top:12px;background:var(--error-soft);color:var(--error);}

/* ── Cost, render, result ── */
.cost-confirm{margin-bottom:22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);}
.cost-confirm-title{margin-bottom:8px;font-family:var(--font-display);font-weight:700;font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-size:19px;}
.cost-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--text-2);}
.cost-line>span:last-child{font-family:var(--font-mono);font-size:13px;color:var(--text);text-align:right;}
.cost-line:has(b){border-bottom:0;color:var(--text);}
.render-stages{display:flex;flex-direction:column;margin:8px 0 24px;padding:6px 18px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);}
.rs{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.rs:last-child{border-bottom:0;}
.rs-dot{flex-shrink:0;width:10px;height:10px;border-radius:50%;}
.rs-dot.waiting{box-shadow:inset 0 0 0 1.5px var(--line-strong);}
.rs-dot.running{background:var(--accent);animation:wz-pulse 1.6s ease-in-out infinite;}
.rs-dot.done{background:var(--ready);}
.rs-dot.failed{background:var(--error);}
@keyframes wz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.45);}50%{box-shadow:0 0 0 6px rgba(255,107,53,0);}}
.rs-label{font-size:14px;font-weight:500;color:var(--text);}
.rs-label.dim{color:var(--text-3);}
.result-panel{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);}
.result-video-area{display:flex;align-items:center;justify-content:center;aspect-ratio:9/16;max-height:560px;background:var(--fixed-dark);}
.result-video-area video{width:100%;height:100%;object-fit:contain;}
.result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;}
.result-meta{padding:0 16px 16px;font-size:13px;color:var(--text-3);}

/* ── Buttons (same system as the app) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 16px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--text);font:600 14px/1.2 var(--font-ui);letter-spacing:-.005em;text-align:center;text-decoration:none;cursor:pointer;
  transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),opacity var(--dur-hover);}
.btn:active:not(:disabled){transform:scale(.97);}
.btn:disabled{opacity:.38;cursor:not-allowed;}
.btn-volt,.btn-li{background:var(--accent);color:var(--on-accent);}
.btn-volt:hover:not(:disabled),.btn-li:hover:not(:disabled){background:var(--accent-press);}
:root[data-theme="dark"] .btn-volt:disabled,:root[data-theme="dark"] .btn-li:disabled{opacity:1;background:var(--surface-3);color:var(--text-3);}
.btn-ink{background:var(--primary);color:var(--on-primary);}
.btn-ink:hover:not(:disabled){opacity:.9;}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--text);}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--field-border);}
.btn-sm{min-height:36px;padding:7px 13px;font-size:13px;}
.btn-lg{min-height:48px;padding:12px 22px;border-radius:12px;font-size:15px;}

/* ── Host picker ── */
.crew-section{margin-bottom:24px;}
.crew-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.crew-card{appearance:none;position:relative;display:block;flex-shrink:0;width:136px;padding:0;overflow:hidden;border:0;border-radius:var(--r-lg);background:var(--media-fallback);box-shadow:inset 0 0 0 1px var(--line);text-align:left;cursor:pointer;
  transition:box-shadow var(--dur-hover) var(--ease-std),transform var(--dur-hover) var(--ease-out);}
.crew-card:hover{transform:translateY(-2px);}
.crew-card.sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);}
.crew-card-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;}
.crew-card-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .25s;}
.crew-card:hover .crew-card-vid,.crew-card.playing .crew-card-vid{opacity:1;}
.crew-card.preview-withheld .crew-play-badge{display:none;}
.crew-card.preview-withheld:hover .crew-card-vid,.crew-card.preview-withheld.playing .crew-card-vid{opacity:0;}
.crew-card-info{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:28px 10px 9px;background:linear-gradient(transparent,rgba(12,11,10,.78));pointer-events:none;}
.crew-card-name{display:block;font-size:12.5px;font-weight:600;color:var(--on-media);}
.crew-card-role{display:block;margin-top:1px;font-size:10.5px;color:rgba(244,238,230,.72);}
.crew-play-badge{position:absolute;top:8px;right:8px;z-index:1;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--on-media);}
.crew-check-badge{position:absolute;top:8px;left:8px;z-index:1;display:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);}
.crew-card.sel .crew-check-badge{display:flex;}

@media(max-width:860px){.main{padding:32px 28px 80px;}}
@media(max-width:700px){
  nav{position:static;flex-wrap:wrap;height:auto;min-height:56px;padding:8px 16px;row-gap:8px;}
  .nav-mode-tabs{order:3;width:100%;margin:0;}
  .nmt{flex:1;}
  .nav-auth,.nav-mode-tabs+.nav-auth{order:4;width:100%;margin-left:0;flex-wrap:wrap;}
  .nav-auth input{flex:1;width:auto;min-width:0;}
  .shell{grid-template-columns:minmax(0,1fr);}
  .sidebar{position:static;flex-direction:row;align-items:center;height:auto;padding:8px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;}
  .sidebar::-webkit-scrollbar{display:none;}
  .sidebar-title,.sidebar-cost{display:none;}
  #stepList{flex-direction:row;gap:4px;}
  .step-item{flex:none;width:auto;padding:6px 10px 6px 14px;}
  .step-sub{display:none;}
  .main{padding:24px 16px 64px;}
  .format-grid{grid-template-columns:1fr 1fr;}
  .source-grid,.specs-grid{grid-template-columns:1fr;}
  .crew-card{width:calc(33.333% - 8px);}
}
@media(max-width:420px){.crew-card{width:calc(50% - 6px);}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}