/* ============================================================
   03. CONTROLS — buttons, inputs, cards and shared primitives
   Every component binds to the design tokens in 00-tokens.css:
   no hard-coded surface/border/text colors, complete state
   coverage (default / hover / active / focus-visible / disabled)
   and semantic variants that adapt to every theme automatically.
   ============================================================ */

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:13px;padding:8px 14px;border-radius:var(--radius-xs);border:1px solid transparent;cursor:pointer;background:var(--panel2);color:var(--ink);appearance:none;-webkit-appearance:none}
.btn:hover{background:var(--hov);border-color:var(--line2)}
.btn:active{background:var(--act)}
.btn[disabled],.btn:disabled{opacity:.45;pointer-events:none}
.btn-primary{background:var(--accent-color);color:var(--accent-contrast);border-color:transparent}
/* Primary actions carry a soft accent glow at rest (Deep Navy admin language) */
.btn-primary{box-shadow:0 0 14px var(--accent-glow)}
.btn-primary:hover{background:var(--accent-hover);border-color:transparent;box-shadow:0 0 22px var(--accent-glow)}
.btn-primary:active{background:var(--accent-active);box-shadow:0 0 10px var(--accent-glow)}
.btn-danger{color:var(--danger);border-color:var(--danger-border);background:var(--danger-subtle)}
.btn-danger:hover{border-color:var(--danger);background:var(--danger-subtle)}
.btn-danger.factory-reset-btn{color:var(--danger-contrast);border-color:var(--danger);background:var(--danger)}
.btn-danger.factory-reset-btn:hover{border-color:var(--danger);background:var(--danger);filter:brightness(.92)}
.factory-reset-launch{font-weight:400}
.factory-reset-label{color:var(--danger)}
.btn-ghost{background:transparent;border-color:var(--line2)}
.btn-ghost:hover{background:var(--hov)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-xs{padding:3px 8px;font-size:11px;gap:5px}

.icon-btn{background:none;border:1px solid transparent;color:var(--ink3);padding:5px;border-radius:var(--radius-xs);cursor:pointer;display:inline-flex;appearance:none;-webkit-appearance:none}
.icon-btn:hover{color:var(--ink);background:var(--hov);border-color:var(--line2)}

/* ---------- inputs ---------- */
.inp,select.inp,textarea.inp{background:var(--bg);border:1px solid var(--line2);color:var(--ink);font-family:var(--sans);font-size:13.5px;padding:8px 11px;border-radius:var(--radius-xs);width:100%;outline:none;transition:border-color .12s ease,box-shadow .12s ease}
.inp:hover{border-color:var(--ink3)}
.inp:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-bg)}
.inp:disabled{opacity:.5;cursor:not-allowed}
.inp:-webkit-autofill,.inp:-webkit-autofill:hover,.inp:-webkit-autofill:focus{background-color:var(--panel) !important;-webkit-box-shadow:0 0 0 1000px var(--panel) inset !important;-webkit-text-fill-color:var(--ink) !important;color:var(--ink) !important;font-family:var(--sans) !important;caret-color:var(--ink)}
[data-interface="dark"] .inp:-webkit-autofill,[data-interface="dark"] .inp:-webkit-autofill:hover,[data-interface="dark"] .inp:-webkit-autofill:focus{background-color:var(--panel2) !important;-webkit-box-shadow:0 0 0 1000px var(--panel2) inset !important}
textarea.inp{resize:vertical;min-height:64px;font-family:var(--mono);font-size:12.5px;line-height:1.6}
/* Dialog fields wear a resting accent hairline so every field in a
   sheet reads as active (Deep Navy OS spec); focus deepens to the glow */
.dlg .inp,.dlg select.inp,.dlg textarea.inp{border-color:var(--accent-border)}
.dlg .inp:hover,.dlg select.inp:hover,.dlg textarea.inp:hover{border-color:var(--accent-color)}
.dlg .inp:focus,.dlg select.inp:focus,.dlg textarea.inp:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-glow),0 0 18px var(--accent-glow)}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6c79' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
label.fld{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink3)}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm)}

/* ---------- badges / pills (semantic, theme-adaptive) ---------- */
.pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;padding:2px 7px;border:1px solid var(--line2);border-radius:var(--radius-xs);color:var(--ink2);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.pill.g{color:var(--success);border-color:var(--success-border);background:var(--success-subtle)}
.pill.a{color:var(--accent-color);border-color:var(--accent-border);background:var(--accent-bg)}
.pill.r{color:var(--danger);border-color:var(--danger-border);background:var(--danger-subtle)}
.pill.n{color:var(--info);border-color:var(--info-border);background:var(--info-subtle)}
.pill.v{color:var(--violet);border-color:var(--violet-border);background:var(--violet-subtle)}
.pill.o{color:var(--prep);border-color:var(--prep-border);background:var(--prep-subtle)}
.pill.w{color:var(--warning);border-color:var(--warning-border);background:var(--warning-subtle)}

/* ---------- tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover{background:var(--hov)}

/* ---------- text helpers ---------- */
.mono{font-family:var(--mono)}
.dim{color:var(--ink3)}
.amb{color:var(--amber)}

/* ---------- empty / progress states ---------- */
.empty{border:1px dashed var(--line2);border-radius:var(--radius-sm);padding:34px 20px;text-align:center;color:var(--ink3)}
.empty p{max-width:420px;margin:8px auto 16px;font-size:13px}
.bar{height:5px;background:var(--elevated);border-radius:var(--radius-full);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent-color);border-radius:var(--radius-full);transition:width .4s}
.bar i.g{background:var(--success)}

/* ---------- dialogs ---------- */
.dlg-wrap{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px 40px;overflow-y:auto}
.dlg{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-md);width:min(680px,94vw);box-shadow:var(--shadow-3)}
.dlg.sm{width:min(470px,94vw)}
.dlg.lg{width:min(880px,94vw)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.dlg-h h3{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.04em;text-transform:uppercase}
.dlg-b{padding:20px}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.frm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frm-grid .full{grid-column:1/-1}
.frm-grid .span-2{grid-column:span 2}
.form-section-head{grid-column:1/-1;padding:5px 0 8px;border-bottom:1px solid var(--line);color:var(--amber);font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dlg input[type="file"]{width:100%;min-width:0;color:var(--ink2);font:11px var(--mono)}
.dlg.production-form{width:min(1040px,94vw)}
.production-form .frm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.production-form .fld{position:relative}
.production-form .required-field-tooltip{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;max-width:min(260px,90vw);padding:6px 9px;border:1px solid var(--amber);background:var(--panel);box-shadow:var(--shadow-2);color:var(--ink);font:10px/1.35 var(--mono);white-space:nowrap;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease,visibility .12s}
.production-form .fld:hover:not(.tooltip-dismissed)>.required-field-tooltip{visibility:visible;opacity:1;transform:translateY(0)}
.production-series-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.production-form .production-series-fields[hidden]{display:none}
.production-columns{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.production-column{min-width:0}
.production-column+.production-column{padding-left:18px;border-left:1px solid var(--line)}
.production-column>.form-section-head{margin-bottom:12px}
.production-budget-pair{display:grid;grid-template-columns:minmax(120px,160px) minmax(110px,150px);gap:12px;align-items:end;max-width:334px}
.production-budget-pair .fld{min-width:0}
.production-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:164px;overflow:hidden;border:1px dashed var(--line2);background:var(--bg2);color:var(--ink2);cursor:pointer;transition:border-color .15s,background .15s}
.production-art:hover,.production-art:focus-visible,.production-art.is-dragging{border-color:var(--amber);background:var(--panel)}
.production-art:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.production-art-placeholder{display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px;text-align:center;font-family:var(--mono)}
.production-art-placeholder b{color:var(--ink);font-size:10px;letter-spacing:.1em}
.production-art-placeholder span:not(.production-art-icon){font-size:11px}
.production-art-placeholder small{color:var(--ink3);font-size:9px}
.production-art-icon{display:flex;color:var(--amber)}
.production-art-icon .ic{width:24px;height:24px}
.production-art-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.production-art.has-art:after{content:"Click or drop to replace artwork";position:absolute;right:8px;bottom:8px;padding:5px 7px;background:rgba(13,14,16,.82);color:var(--ink);font:9px var(--mono)}
@media(max-width:760px){.production-form .frm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.production-form .frm-grid{grid-template-columns:1fr}.production-form .span-2{grid-column:1/-1}.production-series-fields{grid-template-columns:1fr}}
@media(max-width:700px){.production-columns{grid-template-columns:1fr;gap:14px}.production-column+.production-column{padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:420px){.production-budget-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ---------- toasts / notifications ---------- */
#toasts{position:fixed;top:96px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);overflow:hidden;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panel);border:1px solid var(--line2);border-top:3px solid var(--accent-color);padding:10px 16px 10px 18px;font-family:var(--mono);font-size:12px;border-radius:var(--radius-xs);max-width:340px;box-shadow:var(--shadow-2);color:var(--ink);line-height:1.45;animation:toast-drop-in .16s cubic-bezier(.2,.75,.25,1) both}
.toast.err{border-top-color:var(--danger)}
.toast.ok{border-top-color:var(--success)}
.toast.warn{border-top-color:var(--warning)}
.toast.welcome{border-top-color:var(--accent-color);background:var(--panel);box-shadow:var(--shadow-2)}
.toast.welcome::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-color);vertical-align:middle;margin-right:8px;box-shadow:0 0 0 3px var(--accent-glow)}
@keyframes toast-drop-in{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-fade-out{from{opacity:1}to{opacity:0}}
.toast-exit{animation:toast-fade-out .12s ease-out both}
@media(prefers-reduced-motion:reduce){.toast,.toast-exit{animation:none}}

/* ---------- auth (brand surfaces keep their art; colors via tokens) ---------- */
.auth{display:grid;grid-template-columns:minmax(380px,1fr) minmax(340px,460px);grid-template-rows:minmax(0,1fr);min-height:100vh}
.auth-side{--auth-bg-shift-x:0px;--auth-bg-shift-y:0px;position:relative;isolation:isolate;border-right:1px solid var(--line);padding:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:var(--bg2);transition:background-position .2s ease-out;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:-12%;z-index:1;background-image:radial-gradient(rgba(255,255,255,.18) 0.7px,transparent 1px),radial-gradient(rgba(0,0,0,.16) 0.7px,transparent 1px);background-size:5px 5px;background-position:0 0,2.5px 2.5px;opacity:.18;pointer-events:none;mix-blend-mode:soft-light}
.auth-side::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at center,transparent 0%,transparent 40%,rgba(0,0,0,.78) 100%);opacity:.9;pointer-events:none}
[data-interface="bright"] .auth-side{background-color:#f4f4f2;background-image:
  radial-gradient(circle at center,rgba(255,255,255,.42),rgba(255,255,255,.12) 38%,rgba(17,17,17,.16) 100%),
  url(../assets/images/film-bet-auth-light.png);
background-size:cover,cover;
background-repeat:no-repeat,no-repeat;
background-position:center,calc(50% + var(--auth-bg-shift-x)) calc(50% + var(--auth-bg-shift-y));
background-blend-mode:normal,multiply;}
[data-interface="bright"] .auth-side::after{background:radial-gradient(ellipse at center,transparent 0%,transparent 42%,rgba(255,255,255,.78) 100%);opacity:.9}
[data-interface="paper"] .auth-side::after,
[data-interface="daylight"] .auth-side::after,
[data-interface="linen"] .auth-side::after{background:radial-gradient(ellipse at center,transparent 0%,transparent 42%,rgba(255,255,255,.78) 100%);opacity:.9}
[data-theme-mode="dark"] .auth-side::after{background:radial-gradient(ellipse at center,transparent 0%,transparent 42%,var(--bg) 100%);opacity:.9}
[data-interface="noir"] .auth-side{background-color:#0d0d10;background-image:
  radial-gradient(circle at center,rgba(255,255,255,.04),rgba(9,10,13,.18) 52%,rgba(0,0,0,.86) 100%),
  url(../assets/images/film-bet-auth-dark.png);
background-size:cover,cover;
background-repeat:no-repeat,no-repeat;
background-position:center,calc(50% + var(--auth-bg-shift-x)) calc(50% + var(--auth-bg-shift-y));
background-blend-mode:normal,multiply;}
.rec-tag{position:absolute;top:34px;right:38px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--danger);display:flex;align-items:center;gap:8px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:blink 1.3s infinite}
/* Hard on/off toggle — a real recording-indicator blink, not a fade. */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* 00-tokens zeroes every animation duration inside #app; the recording
   dot is the one intentional continuous animation and is exempted here. */
#app .rec-dot{animation:blink 1.3s infinite!important}
@media (prefers-reduced-motion:reduce){.auth-side{transition:none}}