/* SLA colors are semantic and independent of the personal accent palette. */
:root {
  --sla-attention:#f5c875; --sla-attention-bg:#352a1e;
  --sla-emergency:#ffabb8; --sla-emergency-bg:#38212b;
  --sla-finalizing:#91e3ee; --sla-finalizing-bg:#1b3139;
}
html[data-appearance="light"] {
  --sla-attention:#795008; --sla-attention-bg:#fff6df;
  --sla-emergency:#a02540; --sla-emergency-bg:#ffedf1;
  --sla-finalizing:#125d6a; --sla-finalizing-bg:#e8f8fb;
}
.flow-toolbar { gap:18px; align-items:center; flex-wrap:wrap; }
.flow-sort-note { color:var(--muted); font-size:.875rem; line-height:1.6; flex:1 1 290px; margin:0; }
.flow-toolbar .segmented { flex:none; }
.table-wrap table.production-table { min-width:44rem; }
.production-table :is(th,td):first-child { min-width:13rem; }
.production-table :is(th,td):nth-child(3) { min-width:9rem; }
.production-table :is(th,td):nth-child(4) { min-width:7rem; text-align:center; }
.production-table th,.production-table td { padding:18px; }
.production-table td { vertical-align:middle; }
.production-table .material-title { font-size:1rem; line-height:1.5; }
.production-table th:nth-child(1) { width:26%; }
.production-table th:nth-child(2) { min-width:80px; }
.production-table td:nth-child(2) .badge { white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.production-table th:nth-child(5) { width:29%; }
.production-table td:last-child { white-space:normal; }
.production-stage { display:inline-flex; gap:8px; align-items:center; color:var(--ink); font-size:.875rem; line-height:1.5; font-weight:500; }
.production-stage .icon { width:20px; height:20px; flex:none; color:var(--muted); }
[data-card-surface] { cursor:pointer; }
[data-card-surface]:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.production-table [data-card-surface]:hover>td { background:color-mix(in srgb,var(--paper) 92%,var(--accent)); }
.material-card[data-card-surface]:hover { border-color:var(--accent); }
.card-owner { position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; cursor:help; border-radius:50%; }
.card-owner .avatar { width:36px; height:36px; font-size:.8125rem; }
.card-owner .avatar>.icon { width:20px; height:20px; }
.card-owner:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.card-owner-name { display:none; position:absolute; z-index:5; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; max-width:220px; padding:6px 10px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:7px; box-shadow:0 4px 12px #0002; font-size:.875rem; line-height:1.5; pointer-events:none; }
.card-owner:is(:hover,:focus-visible)>.card-owner-name { display:block; }
.material-card .material-title { display:block; margin:12px 0; }
.production-priority.priority-attention { --priority-ink:var(--sla-attention); --priority-bg:var(--sla-attention-bg); }
.production-priority:is(.priority-emergency,.priority-overdue) { --priority-ink:var(--sla-emergency); --priority-bg:var(--sla-emergency-bg); }
.production-priority.priority-finalizing { --priority-ink:var(--sla-finalizing); --priority-bg:var(--sla-finalizing-bg); }
.production-table tr.production-priority>td { background:var(--priority-bg); }
.production-table tr.production-priority>td:first-child { box-shadow:inset 3px 0 0 var(--priority-ink); }
.production-table tr.production-priority:hover>td { background:color-mix(in srgb,var(--priority-bg) 92%,var(--priority-ink)); }
.production-table tr.production-priority .material-title { color:var(--ink); }
.material-card.production-priority { background:var(--priority-bg); border-color:color-mix(in srgb,var(--priority-ink) 45%,var(--line)); border-left:3px solid var(--priority-ink); }
html[data-appearance="light"] .material-card.production-priority { background:var(--priority-bg); border-color:color-mix(in srgb,var(--priority-ink) 45%,var(--line)); }
.sla-deadline { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
.sla-date { display:block; color:var(--ink); font-size:.875rem; line-height:1.5; font-weight:600; }
.sla-time { font-weight:400; white-space:nowrap; }
.sla-alert { display:inline-flex; gap:7px; align-items:center; max-width:100%; font-size:.875rem; line-height:1.4; font-weight:600; }
.sla-alert.sla-attention { color:var(--sla-attention); }
.sla-alert:is(.sla-emergency,.sla-overdue) { color:var(--sla-emergency); }
.sla-icon-game { object-fit:contain; object-position:center; vertical-align:middle; }
.sla-alert .sla-icon { width:36px; height:36px; flex:none; }
.sla-alert>span { min-width:0; overflow-wrap:anywhere; }
.sla-caption { display:block; color:var(--muted); font-size:.75rem; line-height:1.5; margin-bottom:4px; }
.finalizing-label { display:inline-flex; align-items:center; gap:7px; color:var(--sla-finalizing); font-size:.875rem; line-height:1.5; font-weight:650; }
.finalizing-label .icon { width:19px; height:19px; flex:none; }
.kanban-finalizing>header { color:var(--sla-finalizing); }
html[data-appearance="light"] .kanban-finalizing>header { color:var(--sla-finalizing); }
.kanban-finalizing>header>.icon { width:20px; height:20px; flex:none; }
.material-card .material-bottom { display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.material-card .material-bottom>.right { text-align:left; }
.material-card .material-bottom>.flex { flex-wrap:wrap; }
.material-card .material-bottom small { font-size:.8125rem; }
.material-card .material-title { font-size:1rem; }

/* The fade belongs to the film column; nothing crosses into the login form. */
.studio-login-pane { position:relative; z-index:1; background:var(--bg); }
.studio-login-art.login-reel { min-width:0; overflow:hidden; contain:paint; background:var(--bg); }
.login-reel .reel-media { flex:1 1 auto; width:100%; height:100%; min-height:0; }
/* Keep the source’s top edge visible when a wide screen crops the portrait film. */
.login-reel .reel-video { object-fit:cover; object-position:center top; }
.studio-login-art.login-reel::after {
  content:""; display:block; position:absolute; inset:0 auto 0 0;
  width:clamp(52px,15%,148px); height:100%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 62%,transparent) 30%,transparent 100%);
}
@media(max-width:760px) {
  .login-reel .reel-media { flex:none; height:auto; aspect-ratio:4/5; }
  .studio-login-art.login-reel::after { width:15%; }
}
@media(prefers-reduced-motion:reduce) {
  .production-priority,.sla-icon { animation:none; transition:none; }
}