/* Framework Present house system - cinema ground. Amber is the studio's voice: a few marks per view, never a wash. */
:root{
  --cinema:#131110; --cinema-2:#1C1917; --cinema-3:#242019; --screen:#EDEAE5; --screen-muted:#A39E96; --screen-dim:#6F6A63; --screen-rule:#3A3531;
  --amber:#DDA64B; --blue:#75A5DB; --on-amber:#131110; --red:#E06C5B; --green:#8FBF8A;
  --fd:'Archivo','Helvetica Neue',Arial,sans-serif; --fv:'Newsreader','Iowan Old Style','Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cinema);color:var(--screen);font:14px/1.5 var(--fd);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:var(--screen);text-decoration-color:var(--screen-rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--amber)}
h1,h2,h3{margin:0;font-weight:800;font-stretch:88%;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
h3{font-size:12px;font-weight:600;font-stretch:100%;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted);margin-bottom:10px}
button{font-family:var(--fd);cursor:pointer;border:1px solid var(--screen-rule);border-radius:20px;padding:7px 14px;background:none;color:var(--screen);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:border-color .15s,color .15s}
button:hover{border-color:var(--screen-muted)}
button.pri{background:var(--amber);color:var(--on-amber);border-color:var(--amber);font-weight:700}
button.pri:hover{filter:brightness(1.06)}
button.ghost{border-color:transparent;color:var(--screen-muted)}
button.ghost:hover{color:var(--screen);border-color:var(--screen-rule)}
button.small{padding:4px 10px;font-size:10px}
input,select{font:inherit;font-family:var(--fd);border:1px solid var(--screen-rule);border-radius:8px;padding:9px 12px;background:var(--cinema-2);color:var(--screen)}
input::placeholder{color:var(--screen-dim)}
input:focus,select:focus{outline:none;border-color:var(--screen-muted)}
select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A39E96' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--cinema-2);border:1px solid var(--screen-rule);padding:40px;max-width:440px;width:100%}
.login-card h1{font-size:34px;margin:18px 0 8px}
.login-card p{color:var(--screen-muted);margin:0 0 20px}
.login-card form{display:grid;gap:10px}
.login-card form button{border-radius:8px;padding:12px}
.msg{min-height:1.4em;font-size:13px}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}

/* chrome */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--screen-muted)}
.brand{display:flex;align-items:center;gap:12px}
.brand .wm{font-weight:800;font-stretch:88%;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.brand .dot{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.brand .sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--screen-muted)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:14px 28px;background:rgba(19,17,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--screen-rule)}
#tabs{display:flex;gap:4px;flex:1}
#tabs button{border:0;border-radius:0;padding:8px 10px;color:var(--screen-muted);letter-spacing:.14em;border-bottom:2px solid transparent}
#tabs button:hover{color:var(--screen)}
#tabs button.active{color:var(--screen);border-bottom-color:var(--amber)}
.who{display:flex;align-items:center;gap:10px;color:var(--screen-muted);font-size:12px}
main{max-width:1480px;margin:0 auto;padding:28px}
.lead{margin-bottom:22px;max-width:880px}
.lead h2{font-size:30px;margin-bottom:10px}
.lead p{margin:0 0 10px;color:var(--screen-muted);font-size:14px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--screen-muted);letter-spacing:.04em}
.legend b{color:var(--screen)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.filters select{padding:7px 30px 7px 10px;font-size:13px;border-radius:20px}

/* sub-boards (one per spot) */
.boards{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px;border-bottom:1px solid var(--screen-rule)}
.boards button{border:0;border-radius:0;padding:10px 14px;color:var(--screen-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.boards button.active{color:var(--screen);border-bottom-color:var(--amber)}
.boards button .asp{color:var(--screen-dim);margin-left:6px;letter-spacing:.06em}
.boards button.active .asp{color:var(--amber)}
.boards button .pend{margin-left:8px;font-size:9px;letter-spacing:.14em;color:var(--amber);border:1px solid rgba(221,166,75,.4);padding:1px 6px;border-radius:10px;vertical-align:middle}
.boards button.pending{color:var(--screen-dim)}
.empty{background:var(--cinema-2);border:1px dashed var(--screen-rule);padding:28px;color:var(--screen-muted);display:grid;gap:12px;justify-items:start;max-width:720px}
.empty .pend-title{font-size:22px;font-weight:800;font-stretch:88%;letter-spacing:-.02em;color:var(--screen)}
select.status.s-creative-pending{color:var(--amber);border-color:rgba(221,166,75,.35)}

/* shots */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:14px}
@media (max-width:520px){.shots{grid-template-columns:1fr}}
.shot{background:var(--cinema-2);border:1px solid var(--screen-rule);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}
.shot .head{display:flex;align-items:baseline;gap:12px;padding:12px 16px 10px}
.shot .num{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--amber)}
.shot .title{font-weight:700;font-stretch:94%;font-size:15px;letter-spacing:-.01em}
.shot .gfx{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--screen-muted)}
.frame{display:grid;gap:8px;padding:0 16px 14px}
.frame .sprite{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--cinema-3)}
.frame .sprite img{position:absolute;left:0;top:0;width:100%;display:block}
.frame .win{position:absolute;top:0;bottom:0;width:calc(81 / 256 * 100%);z-index:2;box-shadow:0 0 0 2000px rgba(19,17,16,.66);outline:1px solid var(--screen);outline-offset:-1px;pointer-events:none}
.frame .win::before{content:'9:16';position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--on-amber);background:var(--amber);padding:2px 5px}
.frame .sprite.missing img{visibility:hidden}
.frame .sprite.missing::before{content:'panel image pending';position:absolute;inset:0;display:grid;place-items:center;color:var(--screen-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.frame .none{aspect-ratio:16/9;background:var(--cinema-3);display:grid;place-items:center;color:var(--screen-dim);font-size:12px}
.frame .cap{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--screen-muted)}
.frame .cap .dur{margin-left:auto;display:flex;align-items:baseline;gap:4px}
.frame .cap .dur [contenteditable]{min-width:2.2em;text-align:right;color:var(--screen);border-bottom:1px dashed var(--screen-rule);padding:0 2px}
.frame .cap .dur [contenteditable]:focus{outline:none;border-bottom-color:var(--amber)}
.cropctl{display:flex;align-items:center;gap:6px}
.cropctl input{width:84px;margin:0;padding:0;border:0;background:none;accent-color:var(--amber)}
.frame .vo{font-family:var(--fv);font-style:italic;font-size:16px;line-height:1.3;color:var(--screen);border-bottom:1px dashed transparent;padding:2px 0}
.frame .vo:empty::before{content:'VO line - click to type';font-family:var(--fd);font-style:normal;font-size:12px;color:var(--screen-dim)}
.frame .vo:focus{outline:none;border-bottom-color:var(--screen-rule)}
.frame .co{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--screen-muted)}
.callout{display:inline-flex;align-items:baseline;gap:4px;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--screen);background:var(--cinema-3);padding:3px 8px;min-width:2em}
.callout:empty::before{content:'callout';font-weight:400;color:var(--screen-dim)}
.callout.has::after{content:'';width:5px;height:5px;border-radius:50%;background:#d1232a;flex:none}
.callout:focus{outline:none;box-shadow:inset 0 0 0 1px var(--screen-rule)}
.notes{border:1px dashed var(--screen-rule);padding:8px 10px;min-height:40px;font-size:13px;white-space:pre-wrap;color:var(--screen)}
.notes:empty::before{content:attr(data-ph);color:var(--screen-dim)}
.notes:focus{outline:none;border-style:solid;border-color:var(--screen-muted);background:var(--cinema)}
.stamp{font-size:10.5px;letter-spacing:.06em;color:var(--screen-dim);text-align:right}

/* tables */
.table-wrap{background:var(--cinema-2);border:1px solid var(--screen-rule);overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{position:sticky;top:0;z-index:1;background:var(--cinema-3);text-align:left;font-weight:600;padding:9px 10px;border-bottom:1px solid var(--screen-rule);white-space:nowrap;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--screen-muted)}
td{padding:7px 10px;border-bottom:1px solid var(--screen-rule);vertical-align:top;line-height:1.4}
tr:last-child td{border-bottom:0}
td.code{font-weight:700;color:var(--amber);white-space:nowrap;letter-spacing:.04em}
td.muted{color:var(--screen-muted)}
td.tight{white-space:nowrap}
td.edit{min-width:120px}
td.edit[contenteditable]{cursor:text}
td.edit[contenteditable]:focus{outline:none;background:var(--cinema);box-shadow:inset 0 0 0 1px var(--screen-rule)}
td.edit:empty::before{content:'\2014';color:var(--screen-rule)}
td .lnk{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;color:var(--blue);text-decoration:none}
td .lnk:hover{text-decoration:underline}
td .stamp{text-align:left;white-space:nowrap}
.vcell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.vcell .v{font-weight:700;min-width:2.5em}
tr.dnb td{color:var(--screen-dim)}
tr.dnb td.code{color:var(--screen-dim);text-decoration:line-through}
tr.existing td{background:rgba(221,166,75,.05)}
select.status{width:auto;border-radius:20px;padding:4px 28px 4px 10px;font-size:12px;letter-spacing:.04em;background-color:var(--cinema-3);border-color:transparent}
select.status.s-not-started{color:var(--screen-muted)}
select.status.s-building,select.status.s-9-16-in-progress,select.status.s-speed-versions-in-progress{color:var(--amber);border-color:rgba(221,166,75,.35)}
select.status.s-in-review,select.status.s-ready-for-edit{color:var(--blue);border-color:rgba(117,165,219,.35)}
select.status.s-approved,select.status.s-delivered{color:var(--green);border-color:rgba(143,191,138,.35)}
select.status.s-do-not-build-yet{color:var(--screen-dim);text-decoration:line-through}
select.status.s-existing{color:var(--on-amber);background-color:var(--amber);font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1000px){.two{grid-template-columns:1fr}}
.safe{margin-top:20px;background:var(--cinema-2);border:1px solid var(--screen-rule);padding:16px 20px;max-width:880px}
.safe p{margin:0;color:var(--screen-muted)}

/* questions */
#questions{display:grid;gap:22px;margin-bottom:18px}
.qgroup{display:grid;gap:2px}
.qgroup h3{margin-bottom:8px}
.q{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--screen-rule);align-items:start}
.q input[type=checkbox]{width:16px;height:16px;margin-top:3px;accent-color:var(--amber)}
.q .qt{font-size:14px}
.q.done .qt{color:var(--screen-dim);text-decoration:line-through}
.q .ans{font-size:13px;color:var(--screen-muted);border:1px dashed transparent;padding:2px 6px;margin-left:-6px}
.q .ans:empty::before{content:'Answer - click to type';color:var(--screen-dim)}
.q .ans:focus{outline:none;border-color:var(--screen-rule);background:var(--cinema);color:var(--screen)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:200px}
.inline-form button{border-radius:8px}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(19,17,16,.8);display:grid;place-items:center;z-index:20}
.modal-card{background:var(--cinema-2);border:1px solid var(--screen-rule);padding:26px;width:440px;max-width:92vw}
.modal-card h3{font-size:18px;font-weight:800;font-stretch:88%;letter-spacing:-.01em;text-transform:none;color:var(--screen);margin-bottom:14px}
.modal-card form{display:grid;gap:10px}
.modal-card label{display:grid;gap:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--screen-muted)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--screen);color:var(--cinema);padding:10px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;z-index:30}
.toast.err{background:var(--red);color:#fff}

/* print: paper, everything stacked, no chrome */
@media print{
  :root{--cinema:#fff;--cinema-2:#fff;--cinema-3:#F4F3F0;--screen:#1A1816;--screen-muted:#6F6A63;--screen-dim:#9a958e;--screen-rule:#D9D6D0}
  .top,.filters,.inline-form,.modal,.toast,#signout,#print-btn,.who,.boards,.cropctl{display:none!important}
  main{max-width:none;padding:0}
  .view{display:block!important;page-break-before:always}
  .view:first-child{page-break-before:auto}
  .view::before{content:attr(data-title);display:block;font-size:22px;font-weight:800;margin:0 0 12px}
  .board{display:block!important;margin-bottom:24px}
  .board::before{content:attr(data-title);display:block;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;color:#6F6A63}
  .shots{grid-template-columns:1fr 1fr;gap:10px}
  .shot{break-inside:avoid}
  .table-wrap{overflow:visible;border:0}
  th{position:static}
  select.status{appearance:none;background-image:none;border:0;padding:0}
  .notes:empty,.q .ans:empty{display:none}
}