/* Shared Apple-inspired interface: system typography, grouped surfaces, direct touch feedback. */
:root {
  color-scheme: light;
  --ink:#1d1d1f; --page:#f5f5f7; --tile:#fff; --tile-2:#f0f0f4; --line:#d9d9df;
  --gold:#0071e3; --gold-t:#005bbf; --muted:#626269; --ok:#237848; --warn:#b42327; --warn-bg:#fff0ef;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:var(--sans); --surface:#fff; --chrome:rgba(255,255,255,.9);
  --shadow:0 2px 8px #16162105,0 12px 32px #16162106;
  font:100%/1.5 var(--sans); font-optical-sizing:auto;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-padding-top:100px; }
body { margin:0; background:var(--page); color:var(--ink); font:1rem/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--sans); font-weight:650; letter-spacing:-.025em; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a.btn,[role="button"] { touch-action:manipulation; }
button,[role="button"] { -webkit-user-select:none; user-select:none; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.45; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.wrap { width:min(900px,100%); margin-inline:auto; padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right)); }
.eyebrow { font-size:.6875rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hint,.meta,.history,.progress-msg { color:var(--muted); font-size:.8125rem; line-height:1.5; overflow-wrap:anywhere; }
.hint { margin-top:6px; }
.lead { color:var(--muted); line-height:1.55; }
.err { padding:12px 14px; border-radius:14px; background:var(--warn-bg); color:var(--warn); font-size:.875rem; overflow-wrap:anywhere; }
label,legend { padding:0; color:var(--muted); font-size:.8125rem; font-weight:600; }
input,select,textarea { width:100%; min-width:0; min-height:50px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:var(--surface); font-size:1rem; line-height:1.4; }
input::placeholder,textarea::placeholder { color:#797981; opacity:1; }
input:focus,select:focus,textarea:focus { border-color:var(--gold); }
textarea { min-height:90px; resize:vertical; }
.field { display:grid; gap:7px; min-width:0; }
.field .hint { margin:0; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 20px; border:1px solid transparent; border-radius:14px; font-size:.9375rem; line-height:1.35; font-weight:600; text-align:center; text-decoration:none; transition:background-color 120ms,opacity 120ms,transform 100ms; }
.btn.primary { background:var(--gold); color:#fff; }
.btn.ghost { background:var(--tile-2); color:var(--gold-t); }
.btn.destructive { background:var(--warn-bg); color:var(--warn); }
.btn.small { min-height:44px; padding:10px 14px; font-size:.875rem; border-radius:12px; }
.icon-btn { width:44px; height:44px; flex-shrink:0; padding:0; display:inline-grid; place-items:center; border:0; border-radius:50%; background:var(--tile-2); color:var(--muted); transition:background-color 120ms,transform 100ms; }
button:active:not(:disabled),a.btn:active,[role="button"]:active { opacity:.75; }
.btn:active:not(:disabled),.icon-btn:active:not(:disabled) { transform:scale(.975); }
@media (hover:hover) and (pointer:fine) {
  .btn.primary:hover { background:var(--gold-t); }
  .btn.ghost:hover,.icon-btn:hover { background:#e5e5ec; }
  .drop:hover { border-color:var(--gold); background:#f0f6ff; }
}
/* Account screens */
.login { min-height:100svh; min-height:100dvh; display:grid; place-items:center; padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.login-card { width:min(430px,100%); padding:36px; display:grid; gap:10px; background:var(--surface); border:1px solid #fff; border-radius:28px; box-shadow:var(--shadow); }
.login-card h1 { font-size:2.125rem; line-height:1.12; letter-spacing:-.04em; margin:6px 0 4px; overflow-wrap:anywhere; }
.login-card .lead { margin-bottom:16px; font-size:.9375rem; }
.login-card label:not(:first-of-type) { margin-top:6px; }
.login-card .btn { margin-top:12px; }
.login-card .btn+.btn { margin-top:0; }
/* Navigation */
.top { position:sticky; top:0; z-index:10; background:var(--chrome); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); padding-top:env(safe-area-inset-top); box-shadow:0 1px 0 #00000008; }
.bar { min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:12px; }
.brand { display:grid; gap:2px; line-height:1.2; min-width:0; }
.brand .title { font-size:1.25rem; font-weight:650; letter-spacing:-.035em; }
.bar-actions { display:flex; align-items:center; gap:10px; }
.bar .btn { font-size:.875rem; white-space:nowrap; }
.account-action svg { display:none; }
/* Dashboard */
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0 8px; }
.stat { padding:18px 20px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); min-width:0; }
.stat b { display:block; font-size:1.875rem; font-weight:650; line-height:1.15; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:.8125rem; }
.stat.dark b { color:var(--gold-t); }
.list { display:grid; gap:16px; margin:20px 0 48px; padding-bottom:env(safe-area-inset-bottom); }
.empty { margin:48px 0; text-align:center; color:var(--muted); }
.job { min-width:0; display:grid; gap:14px; padding:20px; background:var(--surface); border:1px solid #e9e9ee; border-radius:24px; box-shadow:var(--shadow); }
.job>div:empty,.job>p:empty { display:none; }
.job-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.job-head>div,.file>div { min-width:0; }
.job h2 { font-size:1.25rem; line-height:1.3; letter-spacing:-.025em; overflow-wrap:anywhere; }
.meta { margin-top:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; align-self:start; width:fit-content; max-width:100%; border-radius:9px; padding:5px 9px; background:var(--tile-2); color:var(--muted); font-size:.75rem; line-height:1.4; font-weight:600; }
.chip i { width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; }
.chip.fertig { background:#e9f5ee; color:var(--ok); }
.chip.fehler { background:var(--warn-bg); color:var(--warn); }
.chip.freigabe_ausstehend { background:#fff3d9; color:#845a00; }
.chip.in_bearbeitung,.chip.storyboard_in_bearbeitung,.chip.nachbesserung_in_bearbeitung { background:#eaf3ff; color:var(--gold-t); }
.chip.in_bearbeitung i,.chip.storyboard_in_bearbeitung i,.chip.nachbesserung_in_bearbeitung i { animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { padding:4px 9px; background:var(--tile-2); color:var(--muted); font-size:.75rem; line-height:1.4; font-weight:500; border-radius:7px; }
.tag.type { color:var(--gold-t); background:#eaf3ff; font-weight:650; }
.bar-track { height:5px; border-radius:5px; overflow:hidden; background:var(--tile-2); }
.bar-fill { height:100%; border-radius:inherit; background:var(--gold); transition:width 200ms; }
video { display:block; width:100%; max-height:70svh; background:#141416; border-radius:16px; object-fit:contain; }
.caption { margin-top:12px; padding:14px; background:var(--page); border-radius:14px; font-size:.875rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.job .actions>.btn { flex:1 1 auto; }
.history { font-size:.6875rem; }
.admin-pipeline .wrap { width:min(1320px,100%); }
.pipeline-tools { display:grid; gap:20px; margin-top:36px; }
.pipeline-tools h1 { font-size:2rem; line-height:1.15; letter-spacing:-.04em; }
.pipeline-tools p { color:var(--muted); font-size:.9375rem; margin-top:6px; }
.pipeline-filters { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:14px; }
.pipeline-tools .hint { margin:0; font-size:.8125rem; }
.pipeline { align-items:start; gap:20px; }
.pipeline-lane { min-width:0; display:grid; gap:14px; }
.lane-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px; }
.lane-heading h2 { font-size:.9375rem; letter-spacing:-.015em; }
.lane-count { display:grid; place-items:center; min-width:24px; height:24px; border-radius:8px; background:#e8e8ed; color:var(--muted); font-size:.75rem; font-weight:600; font-variant-numeric:tabular-nums; }
.lane-cards { display:grid; gap:14px; }
.lane-empty { padding:16px; color:var(--muted); font-size:.8125rem; border:1px dashed var(--line); border-radius:16px; }
.pipeline .job { padding:18px; }
.pipeline .job-head { flex-direction:column; gap:10px; }
.pipeline .job video { max-height:380px; }
.video-label { font-size:.75rem; color:var(--muted); margin-bottom:8px; overflow-wrap:anywhere; }
/* All overlays share the same chrome and a single scrolling body. */
html:has(.dlg[open]) { overflow:hidden; }
.dlg { width:min(580px,calc(100% - 48px)); max-height:calc(100svh - 48px); max-height:calc(100dvh - 48px); padding:0; border:1px solid #ffffffa6; border-radius:28px; overflow:hidden; color:var(--ink); background:var(--page); box-shadow:0 24px 100px #0003; }
.dlg::backdrop { background:#16162155; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.dlg form,.dlg-panel { display:flex; flex-direction:column; max-height:inherit; min-height:0; padding:0; }
.dlg-head { position:relative; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; background:var(--chrome); }
.dlg-head h2 { font-size:1.375rem; line-height:1.25; letter-spacing:-.025em; }
.dlg-head .icon-btn { width:36px; height:36px; min-width:44px; min-height:44px; background:transparent; }
.dlg-head .icon-btn svg { width:18px; height:18px; padding:2px; box-sizing:content-box; border-radius:50%; background:#e8e8ed; }
.dlg-body { min-height:0; display:grid; align-content:start; gap:24px; padding:24px; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:24px; }
.dlg-foot { flex:none; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:16px 24px; background:var(--chrome); box-shadow:0 -1px 0 #00000006; }
.row { display:grid; grid-template-columns:110px 1fr; gap:12px; }
.seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:4px; margin-top:8px; background:#e6e6ec; border-radius:13px; }
.seg button { min-height:44px; padding:6px 12px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:.9375rem; font-weight:600; }
.seg button[aria-checked="true"] { color:var(--ink); background:#fff; box-shadow:0 2px 5px #00000013,0 0 0 .5px #00000008; }
.seg-field .hint { min-height:2.8em; font-size:.8125rem; }
.drop { display:grid; justify-items:center; gap:8px; padding:24px 16px; border:1.5px dashed #bdcce0; border-radius:18px; background:#edf4fd; text-align:center; cursor:pointer; }
.drop svg { width:28px; height:28px; color:var(--gold); }
.drop strong { font-size:.9375rem; font-weight:600; color:var(--gold-t); }
.drop span { font-size:.75rem; line-height:1.5; color:var(--muted); max-width:34ch; }
.drop.over { background:#dfedff; border-color:var(--gold); }
.files { list-style:none; display:grid; gap:8px; margin:4px 0 0; padding:0; }
.file { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 8px; padding:10px 12px; background:var(--surface); border-radius:14px; }
.file .name { font-size:.8125rem; font-weight:600; overflow-wrap:anywhere; }
.file .sub { margin-top:2px; font-size:.75rem; color:var(--muted); }
.file .bar-track { grid-column:1/-1; }
.file .actions { flex-wrap:nowrap; gap:2px; }
.file .icon-btn { background:transparent; }
.reference-upload { background:var(--surface); padding:4px 16px 16px; border-radius:18px; }
.reference-upload:not([open]) { padding-bottom:4px; }
.reference-upload>summary { min-height:48px; padding-block:14px; font-size:.875rem; font-weight:600; cursor:pointer; }
.reference-upload .reference-drop { margin-block:16px; padding:18px 12px; background:var(--page); border-color:var(--line); }
.reference-upload .field { margin-top:16px; }
.reference-upload textarea { background:var(--page); }
.toast { position:fixed; z-index:50; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; background:#252529ed; color:#fff; border-radius:18px; font-size:.875rem; font-weight:500; text-align:center; box-shadow:0 8px 32px #0002; }
/* Revision and version comparison */
.revision-feedback,.storyboard-card-summary { padding-top:14px; border-top:1px solid #ededf1; font-size:.875rem; overflow-wrap:anywhere; }
.revision-reference { color:var(--gold-t); font-size:.75rem; font-weight:600; margin-bottom:5px; }
.revision-meta,.compare-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.compare-dlg { width:min(1040px,calc(100% - 48px)); }
.compare-panel { min-width:0; display:grid; align-content:start; gap:12px; background:var(--surface); border-radius:20px; padding:16px; }
.compare-panel video { max-height:52svh; }
.compare-panel .btn { text-align:center; }
.compare-panel .hint { overflow-wrap:anywhere; }
#revisionSubmit,#storyboardApprove,#storyboardChanges { white-space:normal; }
/* Storyboard: one consistent reading order and a separate approval step on phones. */
.storyboard-topic { font-weight:650; font-size:1.125rem; overflow-wrap:anywhere; }
.approval-note { padding:12px 14px; border-radius:14px; background:#eaf3ff; color:var(--gold-t); font-size:.875rem; }
.storyboard-scenes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.storyboard-scene { display:grid; align-content:start; gap:12px; min-width:0; padding:18px; border-radius:20px; background:var(--surface); }
.storyboard-scene h3 { font-size:1.0625rem; line-height:1.3; }
.storyboard-scene p { overflow-wrap:anywhere; }
.storyboard-scene video { max-height:320px; }
.scene-label { color:var(--muted); font-size:.75rem; font-weight:600; margin-bottom:5px; }
.scene-duration,.scene-source { color:var(--muted); font-size:.8125rem; }
.scene-source summary,.scene-speech summary { min-height:44px; padding-block:10px; cursor:pointer; }
.scene-source p { margin-top:6px; }
.scene-speech details { font-size:.875rem; }
.storyboard-nav,.storyboard-decision,.storyboard-idea { display:none; }
.scene-nav-copy { display:grid; justify-items:center; gap:2px; }
.scene-nav-copy span { color:var(--muted); font-size:.6875rem; }
.storyboard-idea { font-size:.875rem; color:var(--muted); }
.storyboard-idea summary { min-height:44px; padding-block:10px; cursor:pointer; }
.storyboard-idea p { padding-bottom:8px; overflow-wrap:anywhere; }
@media (min-width:760px) { .pipeline { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px) { .pipeline { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:639px) {
  .wrap { padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); }
  .bar { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; gap:12px 6px; padding-block:10px 12px; }
  .brand { grid-column:1; grid-row:1; }
  .brand .title { font-size:1.125rem; }
  .brand .eyebrow { font-size:.625rem; }
  .bar-actions { display:contents; }
  #changePasswordBtn { display:grid; place-items:center; grid-column:2; grid-row:1; width:44px; padding:0; background:transparent; }
  .account-action svg { display:block; }
  .account-action span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #logoutBtn { grid-column:3; grid-row:1; background:transparent; }
  #newBtn { grid-column:1/-1; grid-row:2; width:100%; min-height:44px; }
  .pipeline-tools { margin-top:24px; gap:18px; }
  .pipeline-tools h1 { font-size:1.75rem; }
  .pipeline-tools p { font-size:.875rem; }
  .pipeline-filters { grid-template-columns:minmax(0,1fr); gap:12px; }
  .summary { gap:8px; margin-top:20px; }
  .stat { padding:14px 12px; border-radius:16px; }
  .stat b { font-size:1.625rem; }
  .stat span { font-size:.75rem; }
  .list { gap:24px; }
  .job,.pipeline .job { padding:18px; border-radius:22px; }
  .job-head { flex-direction:column; gap:10px; }
  .job h2 { font-size:1.1875rem; }
  .pipeline-lane:has(>.lane-empty:not([hidden])) { display:none; }
  .dlg,.compare-dlg { width:100%; max-width:none; height:calc(100dvh - max(10px,env(safe-area-inset-top))); max-height:calc(100dvh - max(10px,env(safe-area-inset-top))); margin:auto 0 0; border:0; border-radius:28px 28px 0 0; }
  .dlg form,.dlg-panel { height:100%; max-height:100%; }
  .dlg-head { padding:20px max(16px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left)); touch-action:pan-x; user-select:none; -webkit-user-select:none; cursor:grab; }
  .dlg-head::before { content:""; position:absolute; top:8px; left:50%; width:36px; height:5px; transform:translateX(-50%); border-radius:3px; background:#c5c5cd; }
  .dlg-head h2 { font-size:1.25rem; }
  .dlg.is-dragging .dlg-head { cursor:grabbing; }
  .dlg-body { flex:1 1 auto; gap:24px; padding:20px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left)); }
  .dlg-foot { padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); flex-direction:column; gap:8px; }
  .dlg-foot .btn { width:100%; }
  .row,.revision-meta,.compare-panels { grid-template-columns:minmax(0,1fr); }
  .compare-panel { padding:14px; }
  .login-card { padding:28px 24px; border-radius:24px; }
  .login-card h1 { font-size:1.875rem; }
  .storyboard-nav { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:4px 16px 10px; background:var(--chrome); }
  .storyboard-nav p { font-size:.875rem; font-weight:600; }
  .storyboard-nav .icon-btn { color:var(--gold); }
  #storyboardDlg .dlg-body { gap:14px; padding-top:16px; }
  #storyboardDlg .storyboard-overview,#storyboardDlg .storyboard-scene:not(.is-current),#storyboardReviewField { display:none; }
  #storyboardDlg .storyboard-scene { padding:14px; gap:10px; border-radius:18px; }
  #storyboardDlg .storyboard-scene h3 { font-size:1.0625rem; }
  #storyboardDlg .storyboard-scene video { max-height:min(280px,33svh); }
  #storyboardDlg .scene-speech,#storyboardDlg .storyboard-scene>div { font-size:.875rem; }
  #storyboardDlg .storyboard-scene h3,#storyboardDlg .storyboard-scene>p,#storyboardDlg .scene-speech,#storyboardDlg .storyboard-scene>div { touch-action:pan-y; }
  .storyboard-scenes { grid-template-columns:minmax(0,1fr); }
  .storyboard-idea { display:block; }
  #storyboardApprove { display:none; }
  #storyboardNext { order:1; }
  #storyboardChanges { order:2; }
  #storyboardDlg.is-decision .storyboard-overview,#storyboardDlg.is-decision #storyboardReviewField { display:grid; gap:8px; }
  #storyboardDlg.is-decision .storyboard-scenes,#storyboardDlg.is-decision #storyboardSummary,#storyboardDlg.is-decision #storyboardInstruction { display:none; }
  #storyboardDlg.is-decision .storyboard-decision { display:grid; gap:12px; padding:20px; background:var(--surface); border-radius:20px; }
  .storyboard-decision h3 { font-size:1.25rem; }
  .storyboard-decision p { font-size:.875rem; color:var(--muted); }
  #storyboardDlg.is-decision #storyboardApprove { display:flex; order:1; }
  #storyboardDlg.is-decision .storyboard-topic { font-size:1rem; }
}
@media (max-height:480px) and (max-width:900px) {
  .dlg-head { padding-block:8px; }
  .dlg-head::before { display:none; }
  .dlg-foot { flex-direction:row; flex-wrap:nowrap; padding-block:8px; }
  .dlg-foot .btn { width:auto; min-width:0; padding-inline:12px; }
  #sendBtn { flex:1; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (prefers-reduced-transparency:reduce) { :root { --chrome:#fff; } .top,.dlg::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (prefers-contrast:more) { :root { --muted:#45454b; --line:#777780; --chrome:#fff; } .job,.stat,.dlg,.login-card { border:1px solid var(--line); } .top { border-bottom:1px solid var(--line); } }

/* Keep the common actions visible; disclose supporting actions as a calm list. */
.job>.actions { display:grid; gap:8px; }
.job-main-actions { display:flex; gap:8px; min-width:0; }
.job-main-actions>.btn { flex:1 1 0; min-width:0; padding-inline:10px; }
.job-more-actions { border-radius:14px; background:var(--page); overflow:hidden; }
.job-more-actions>summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; color:var(--muted); font-size:.8125rem; font-weight:600; cursor:pointer; list-style:none; }
.job-more-actions>summary::-webkit-details-marker { display:none; }
.job-more-actions>summary svg { width:18px; height:18px; }
.job-more-actions>summary svg:last-child { margin-left:auto; }
.job-more-actions[open]>summary svg:last-child { transform:rotate(180deg); }
.job-action-list { display:grid; padding:0 12px 6px; }
.job-action-list>.btn { justify-content:flex-start; min-height:48px; border-radius:0; border:0; border-top:1px solid var(--line); background:transparent; padding:12px 4px; font-weight:500; text-align:left; }
.job-action-list>.destructive { color:var(--warn); }
@media (max-width:359px) { .job-main-actions>.btn { font-size:.8125rem; } }

.caption { white-space:normal; }
.caption-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px -6px 6px 0; color:var(--muted); font-size:.75rem; font-weight:600; }
.caption-copy { background:transparent; color:var(--gold-t); }
.caption-copy svg { width:19px; height:19px; }
.caption-text { white-space:pre-wrap; }

.storyboard-shortcut { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--gold-t); font-size:.8125rem; font-weight:600; text-align:left; }
.storyboard-shortcut svg { width:17px; height:17px; }

/* Overview tiles double as persistent, keyboard-accessible status filters. */
button.stat { border:1.5px solid transparent; text-align:left; color:var(--ink); font:inherit; transition:background-color 120ms,border-color 120ms; }
button.stat[aria-pressed="true"] { border-color:var(--gold); background:#edf5ff; }
button.stat[aria-pressed="true"] b,button.stat[aria-pressed="true"] span { color:var(--gold-t); }
@media (hover:hover) and (pointer:fine) { button.stat:hover { background:#edf5ff; } }

/* Video library: compact rows open a dedicated detail view. */
#list.list { display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-radius:22px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
#list:empty { display:none; }
.video-row { min-width:0; }
.video-row+.video-row { border-top:1px solid #ededf1; }
.video-row-button { display:flex; align-items:center; gap:18px; width:100%; min-height:132px; padding:16px 20px; border:0; background:transparent; text-align:left; }
.row-thumbnail { display:grid; place-items:center; flex:none; width:88px; height:104px; border-radius:14px; overflow:hidden; background:#eaf1fa; color:var(--gold-t); }
.row-thumbnail img { width:100%; height:100%; object-fit:cover; }
.row-thumbnail>svg { width:28px; height:28px; }
.row-copy { display:grid; gap:6px; min-width:0; flex:1; }
.row-copy h2 { font-size:1rem; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.row-meta { color:var(--muted); font-size:.75rem; overflow-wrap:anywhere; }
.video-row-button>svg { width:18px; height:18px; color:#9999a2; }
.row-copy .chip { font-size:.6875rem; padding:4px 7px; }
.viewing-job>#app>.top { display:none; }
.detail-header { position:sticky; top:0; z-index:10; padding-top:env(safe-area-inset-top); background:var(--chrome); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 1px 0 #00000008; }
.detail-bar { display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:8px; font-size:.9375rem; font-weight:600; }
.detail-back { display:flex; align-items:center; gap:2px; min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--gold-t); font-size:.9375rem; }
.detail-header-spacer { width:76px; }
.detail-body { width:min(780px,100%)!important; padding-top:24px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
.job-detail-card { box-shadow:none; }
/* Stable small viewport prevents Safari chrome changes from resizing the picture while scrolling. */
.job-detail-card video { aspect-ratio:9 / 16; max-height:65svh; }
@media (hover:hover) and (pointer:fine) { .video-row-button:hover { background:#f4f7fc; } }
@media (max-width:639px) {
  .video-row-button { min-height:124px; padding:14px 12px; gap:12px; }
  .row-thumbnail { width:76px; height:96px; border-radius:12px; }
  .row-copy h2 { font-size:.9375rem; }
  .row-meta { font-size:.6875rem; }
  .video-row-button>svg { width:14px; }
  .detail-body { padding:16px max(12px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .job-detail-card { padding:16px; }
}

.library-filters { min-width:0; }
.library-filters>summary { cursor:pointer; min-height:44px; display:list-item; padding-block:10px; color:var(--gold-t); font-size:.875rem; font-weight:600; }
.library-filters .pipeline-filters { margin-top:8px; }
.pipeline-tools { gap:8px; }
.row-meta { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.job-detail-card h1 { font-size:1.25rem; line-height:1.3; overflow-wrap:anywhere; }

/* Overview uses the same segmented surface as the video-goal picker. */
#summary.summary { gap:3px; padding:4px; background:#e6e6ec; border-radius:13px; }
#summary button.stat { min-height:62px; padding:8px 6px; border:0; border-radius:10px; background:transparent; box-shadow:none; text-align:center; }
#summary button.stat b { font-size:1.125rem; line-height:1.2; letter-spacing:-.02em; color:var(--muted); }
#summary button.stat span { font-size:.8125rem; font-weight:600; color:var(--muted); }
#summary button.stat[aria-pressed="true"] { background:#fff; box-shadow:0 2px 5px #00000013,0 0 0 .5px #00000008; }
#summary button.stat[aria-pressed="true"] b,#summary button.stat[aria-pressed="true"] span { color:var(--ink); }
@media (hover:hover) and (pointer:fine) { #summary button.stat:hover:not([aria-pressed="true"]) { background:#ffffff45; } }

/* Light player chrome below, rather than over, the image. */
.studio-player { min-width:0; border-radius:16px; overflow:hidden; background:#f0f0f4; }
.studio-player video { border-radius:0; }
.player-bar { display:flex; align-items:center; gap:2px; padding:4px; background:#f0f0f4; color:var(--ink); }
.player-button { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; padding:0; border-radius:10px; background:transparent; color:#45454d; }
.player-button svg { width:19px; height:19px; }
.player-seek { flex:1; width:0; min-width:24px; min-height:44px; padding:0; border:0; background:transparent; accent-color:var(--gold); cursor:pointer; }
.player-time { flex:none; font-size:.625rem; font-variant-numeric:tabular-nums; color:#55555e; white-space:nowrap; padding-inline:3px; }
.player-error { padding:10px 12px; color:var(--warn); font-size:.8125rem; }
.studio-player:fullscreen { display:flex; flex-direction:column; justify-content:center; background:#101012; width:100%; height:100%; }
.studio-player:fullscreen video { flex:1; min-height:0; max-height:calc(100dvh - 52px); object-fit:contain; }
video::-webkit-media-controls-start-playback-button { display:none!important; }
@media (hover:hover) and (pointer:fine) { .player-button:hover { background:#e1e1e8; } }

html:has(.studio-player.is-expanded) { overflow:hidden; }
.studio-player.is-expanded { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:center; background:#101012; border-radius:0; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.studio-player.is-expanded video { flex:1; min-height:0; max-height:calc(100dvh - 52px); object-fit:contain; }

/* Button focus stays visible for keyboards without the heavy blue outline. */
button:focus-visible,a.btn:focus-visible,[role="button"]:focus-visible,summary:focus-visible {
  outline:2px solid #92929b;
  outline-offset:2px;
}

.row-badges { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.row-version { padding:4px 7px; border-radius:9px; background:var(--tile-2); color:var(--muted); font-size:.6875rem; line-height:1.4; font-weight:500; }

.job-detail-card .video-label { display:table; width:auto; padding:4px 9px; margin-bottom:10px; border-radius:7px; background:var(--tile-2); color:var(--muted); font-size:.75rem; line-height:1.4; font-weight:500; }

#jobDetailBack:focus,#jobDetailBack:focus-visible { outline:none; box-shadow:none; }
#jobDetailBack:focus-visible { text-decoration:none; color:var(--ink); }

.detail-bar { display:grid; grid-template-columns:76px minmax(0,1fr) 76px; text-align:center; }
.detail-share { justify-self:end; background:transparent; color:var(--gold-t); }
.detail-share[aria-busy="true"] { opacity:.5; }

/* iOS-style circular navigation, scoped to the detail header. */
.detail-bar { min-height:76px; grid-template-columns:52px minmax(0,1fr) 52px; gap:16px; }
#jobDetailBack,#jobDetailShare { display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:0; border:1px solid rgba(255,255,255,.95); border-radius:50%; background:rgba(255,255,255,.58); color:#1d1d1f; box-shadow:0 5px 20px #1616210a,inset 0 0 0 .5px #ffffffb3; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
#jobDetailBack { justify-self:start; }
#jobDetailShare { justify-self:end; }
#jobDetailBack svg { width:26px; height:26px; stroke-width:2.6; }
#jobDetailShare svg { width:25px; height:25px; stroke-width:2.2; }
#jobDetailBack:focus-visible,#jobDetailShare:focus-visible { outline:none; background:rgba(255,255,255,.58); }
@media (prefers-reduced-transparency:reduce) { #jobDetailBack,#jobDetailShare { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; } }

.detail-heading { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }

.detail-heading { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; line-height:1.3; overflow-wrap:anywhere; }

.media-info { display:inline-flex; align-items:center; gap:5px; padding:3px 0; color:var(--muted); font-size:.75rem; line-height:1.4; font-weight:400; }
.media-info svg { width:14px; height:14px; }

/* Sheets use the same clear card hierarchy as the video detail view. */
.dlg-head .icon-btn { border:1px solid #ffffffed; border-radius:50%; background:rgba(255,255,255,.58); color:var(--ink); box-shadow:0 4px 14px #16162108; }
.dlg-head .icon-btn svg { width:20px; height:20px; padding:0; background:transparent; border-radius:0; stroke-width:2; }
.dlg-head .icon-btn:focus,.dlg-head .icon-btn:focus-visible { outline:none; }
.dlg-head .icon-btn:focus-visible { color:#005bbf; }
#storyboardDlg { background:var(--page); }
#storyboardDlg .storyboard-scene,#storyboardDlg .storyboard-decision { border:1px solid #e1e1e7; background:#fff; border-radius:22px; box-shadow:0 2px 8px #16162104; padding:16px; }
#storyboardDlg .scene-duration,#storyboardDlg .scene-source,#storyboardDlg .scene-label { color:#48484f; }
#storyboardDlg .storyboard-idea { color:#48484f; padding:0 14px; background:#fff; border:1px solid #e1e1e7; border-radius:14px; }
#storyboardDlg .storyboard-idea summary { color:var(--ink); font-weight:500; }
#storyboardDlg .approval-note { color:#0055b2; background:#e7f1ff; border:1px solid #d3e4fa; }
#storyboardDlg .storyboard-nav { box-shadow:0 1px 0 #e4e4ea; }
#storyboardDlg .scene-nav-copy span { color:#55555e; }
#storyboardDlg .player-bar { background:#e9e9ef; }
#storyboardDlg .player-time { color:#3e3e45; }
#storyboardDlg .player-button { color:#242429; }

.job-timing { margin-top:4px; border:1px solid var(--line); border-radius:16px; padding:0 14px 14px; background:var(--page); }
.job-timing:not([open]) { padding-bottom:0; }
.job-timing>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding-block:12px; cursor:pointer; font-size:.875rem; font-weight:600; list-style:none; }
.job-timing>summary::-webkit-details-marker { display:none; }
.timing-total { color:var(--muted); font-size:.75rem; white-space:nowrap; }
.timing-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-block:4px 16px; }
.timing-stats p { padding:10px; background:#fff; border-radius:10px; font-size:.75rem; color:var(--muted); }
.timing-stats strong { display:block; color:var(--ink); font-size:.8125rem; margin-top:3px; }
.timing-list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:0; }
.timing-list li { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:12px 0; font-size:.75rem; }
.timing-list li>div { min-width:0; }
.timing-list strong { display:block; font-weight:500; }
.timing-list time { display:block; color:var(--muted); font-size:.6875rem; margin-top:2px; }
.timing-list li>span { color:var(--muted); text-align:right; flex:none; }

.timing-error { color:var(--warn); font-size:.75rem; margin-top:5px; overflow-wrap:anywhere; }

.job-timing>summary::after { content:"⌄"; color:var(--muted); font-size:1rem; }
.job-timing[open]>summary::after { transform:rotate(180deg); }

.job-source-files { border:1px solid var(--line); border-radius:16px; padding:0 14px 14px; background:var(--page); }
.job-source-files:not([open]) { padding-bottom:0; }
.job-source-files>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; cursor:pointer; font-size:.875rem; font-weight:600; list-style:none; }
.job-source-files>summary::-webkit-details-marker { display:none; }
.job-source-files>summary>span { font-size:.75rem; font-weight:400; color:var(--muted); }
.source-file-list { list-style:none; padding:0; margin:12px 0 0; }
.source-file-list li { padding:10px 0; border-top:1px solid var(--line); }
.source-file-name { display:block; font-size:.8125rem; font-weight:500; overflow-wrap:anywhere; }
.source-file-info { display:block; margin-top:4px; font-size:.75rem; color:var(--muted); }