/* Studio Ninja look, measured on the desktop app at 1600×900: Inter 13px, zinc greys, green var(--sn-green,#097c43),
   pill buttons (34px in cards, 44px in the page header), square 36px inputs, 30px page gutters. */
:root{--sn-text:#18181b;--sn-label:#3f3f46;--sn-muted:#71717a;--sn-chip:#a1a1aa;--sn-border:#d4d4d8;--sn-line:#e4e4e7;--sn-soft:#f4f4f5;--sn-green:#097c43;--sn-green-dark:#07683a;--sn-nav:#e7fdf3}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;line-height:1.43;color:var(--sn-text);background:var(--sn-surface,#fff)}
a{color:var(--sn-green)}
h1{font-size:24px;font-weight:500;color:var(--sn-text);margin:0 0 6px}
.crumb{font-size:12px;color:var(--sn-muted);margin-bottom:0}
.crumb a{color:var(--sn-muted)}
.muted{color:var(--sn-muted)}
header{border-bottom-color:var(--sn-border)}
nav a{color:var(--sn-text)}
nav a.active{background:var(--sn-nav);border-radius:15px}

button,.button{font-family:inherit;font-size:13px;font-weight:500;line-height:18px;padding:7px 14px;border-radius:50px;border-color:var(--sn-border);color:var(--sn-text)}
button:hover,.button:hover{background:var(--sn-soft)}
button.primary,.primary,.cardhead button{background:var(--sn-green);border-color:var(--sn-green);color:#fff}
button.primary:hover,.primary:hover,.cardhead button:hover{background:var(--sn-green-dark)}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea{font-family:inherit;font-size:13px;font-weight:400;color:var(--sn-text);border:1px solid var(--sn-border);border-radius:0;padding:8px 12px}
input[type=checkbox],input[type=radio]{accent-color:var(--sn-green)}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.page-header .toolbar{margin:0;flex-wrap:wrap;justify-content:flex-end}
.page-header .toolbar>button,.page-header .toolbar>.button,.page-header .add-menu>summary{font-size:14px;line-height:20px;padding:11px 16px}
.page-subactions{margin:-8px 0 20px;flex-wrap:wrap}
.add-menu{position:relative}
.add-menu>summary{list-style:none;cursor:pointer;border-radius:50px;background:var(--sn-green);color:#fff;font-weight:500}
.add-menu>summary::-webkit-details-marker{display:none}
.add-menu>.toolbar{position:absolute;right:0;top:calc(100% + 6px);z-index:5;flex-direction:column;align-items:stretch;gap:0;min-width:200px;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:8px;padding:6px 0;box-shadow:0 8px 24px #18181b1f;margin:0}
.add-menu>.toolbar button{border:0;border-radius:0;text-align:left;padding:9px 16px;font-weight:400}

.card{border-color:var(--sn-border);border-radius:10px}
.cardhead h2{font-size:16px;font-weight:500}
body[data-page=projects] .detail .card{background:var(--sn-soft)}
table th{font-size:12px;font-weight:500;color:var(--sn-label);background:var(--sn-soft);padding:15px}
table td{font-size:13px;padding:16px 15px;border-bottom-color:var(--sn-border)}
table tbody tr:hover td{background:var(--sn-soft2,#fafafa)}
label{color:var(--sn-label)}

.task .task-chip{display:inline-block;background:var(--sn-chip);color:#fff;border-radius:360px;padding:3px 8px;font-size:12px;font-weight:500;line-height:15px;margin:4px 4px 0 0}
.wf-phase{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;margin-bottom:10px}
.wf-strip{border-radius:5px;display:flex;align-items:center;justify-content:center;padding:10px 0}
.wf-strip span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.wf-lead .wf-strip{background:var(--ph-lead,#fda4af);color:var(--ph-lead-ink,#4c0519)}
.wf-production .wf-strip{background:var(--ph-prod,#fcd34d);color:var(--ph-prod-ink,#451a03)}
.wf-post .wf-strip{background:var(--ph-post,#a5f3fc);color:var(--ph-post-ink,#164e63)}
.wf-items{min-width:0}
.wf-items>.task,.wf-items>.wf-milestone{background:var(--sn-line);border:1px solid var(--sn-border);border-radius:4px;padding:10px;margin:0 0 10px}
.wf-items>.wf-milestone{color:var(--sn-muted)}
.wf-items>.task label{color:var(--sn-text);font-size:14px;font-weight:400}
.wf-items>.task.done label{text-decoration:none;color:var(--sn-muted)}
.wf-items>.task button{background:var(--sn-surface,#fff);padding:4px 12px;font-size:12px}
.wf-items>.task:last-child,.wf-items>.wf-milestone:last-child{margin-bottom:0}

@media(min-width:801px){
 header{height:81px;min-height:81px}
 nav a{padding:13px 10px}
 main{max-width:none;margin:30px 0;padding:0 30px 50px}
 body[data-page=settings] main{margin-top:0;padding-left:0}
}
@media(min-width:1300px){nav a{min-width:100px}}
@media(max-width:800px){.page-header{flex-direction:column}.page-header .toolbar{justify-content:flex-start}.add-menu>.toolbar{left:0;right:auto}}
.undo-box{background:#fef9c3;border:1px solid var(--ph-prod-mid,#fde68a);border-radius:6px;padding:10px 12px;margin-bottom:14px}
.undo-box p{margin:0 0 8px}
/* Workflow behaviour (Studio Ninja): chips take the phase colour, ⋮ menu per task, milestone rows, add-task chooser. */
.wf-lead .task .task-chip{background:var(--ph-lead,#fda4af);color:var(--ph-lead-ink,#4c0519)}
.wf-production .task .task-chip{background:var(--ph-prod,#fcd34d);color:var(--ph-prod-ink,#451a03)}
.wf-post .task .task-chip{background:var(--ph-post,#a5f3fc);color:var(--ph-post-ink,#164e63)}
.wf-items>.task{position:relative}
.sn-dots{position:relative}
.sn-dots>summary{list-style:none;cursor:pointer;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--sn-text)}
.sn-dots>summary::-webkit-details-marker{display:none}
.sn-dots>summary:hover{background:var(--sn-surface,#fff)}
.sn-menu{position:absolute;right:0;top:32px;z-index:6;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:8px;box-shadow:0 8px 24px #18181b1f;padding:6px 0;min-width:190px;display:flex;flex-direction:column}
.wf-items .sn-menu button,.sn-menu button{border:0;border-radius:0;background:var(--sn-surface,#fff);text-align:left;padding:9px 16px;font-size:13px;font-weight:400}
.sn-menu button:hover{background:var(--sn-soft)}
.sn-menu .sn-danger{color:#b91c1c}
.wf-items>.sn-milestone label{display:flex;align-items:center;gap:10px;color:var(--sn-text);font-weight:400}
.wf-items>.sn-milestone small{display:block;margin-top:6px;background:var(--sn-border,#d4d4d8);color:var(--sn-label);border-radius:4px;padding:6px 8px;font-size:12px}
.wf-items>.sn-shoot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wf-items>.sn-shoot button{background:var(--sn-surface,#fff);padding:4px 12px;font-size:12px}
.sn-choose{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sn-choose button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;border-radius:10px;padding:18px;min-height:110px;font-weight:400}
.sn-choose b{font-size:15px;font-weight:500}
.sn-choose span{color:var(--sn-muted);font-size:13px;line-height:1.45}
.sn-to{display:flex;gap:10px;align-items:center;margin-bottom:14px;color:var(--sn-label)}
.sn-to b{background:var(--ok-soft,#dcfce7);color:var(--ok-ink,#14532d);border-radius:360px;padding:3px 10px;font-weight:500}
#sn-leave{border:0;border-radius:12px;padding:26px;max-width:420px;box-shadow:0 20px 60px #18181b40;text-align:center}
#sn-leave::backdrop{background:#18181b66}
.sn-leave-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
@media(max-width:600px){.sn-choose{grid-template-columns:1fr}}
.sn-doc{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--sn-border);border-radius:8px;padding:12px 14px;margin:8px 0;background:var(--sn-soft)}
.sn-doc b{display:block;font-weight:500}
.sn-doc span{display:block;color:var(--sn-label);font-size:12px;margin-top:2px}
.sn-doc small{display:block;color:var(--sn-muted);margin-top:4px}
.sn-doc-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.sn-doc{flex-direction:column;align-items:stretch}.sn-doc-actions{justify-content:flex-start}}
/* Toast as in Studio Ninja (ngx-toastr success, measured 2026-10-21). */
#toast.look-toast{position:fixed;inset:12px 12px auto auto;margin:0;border:0;width:300px;max-width:calc(100vw - 24px);box-sizing:border-box;background:#e9fcf3 no-repeat 15px 50%/24px;font-family:Inter,sans-serif;color:var(--sn-text,#18181b);border-radius:3px;box-shadow:0 0 9.7px rgba(0,0,0,.15);padding:16px 15px 16px 48px;z-index:10000;font-size:13px;line-height:18px;overflow:hidden;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23097c43' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E")}
#toast.look-toast--error{background-color:#fdecec;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.1'/%3E%3C/svg%3E")}
.look-toast__title{font-weight:500;font-size:16px;color:#059669;margin-bottom:2px}
.look-toast--error .look-toast__title{color:#dc2626}
.look-toast__msg{color:var(--sn-text,#18181b);font-size:14px;line-height:normal;overflow-wrap:anywhere}
.look-toast__close{position:absolute;top:6px;right:8px;border:0;background:none;padding:0 4px;font-size:20px;font-weight:700;line-height:20px;color:#27272a;box-shadow:none;min-height:0}
.look-toast__close:hover{background:none;color:#000}
.look-toast__bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:#059669;animation:look-toast-bar 5s linear forwards}
.look-toast--error .look-toast__bar{background:#dc2626}
@keyframes look-toast-bar{from{width:100%}to{width:0}}
/* Workflow item as in Studio Ninja (measured 2026-10-21, same at every width): white, grey when done. */
.wf-items>.task{display:flex;align-items:stretch;gap:0;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);border-radius:4px;padding:0;margin:0 0 10px;min-height:42px}
.wf-items>.task.done{background:var(--sn-line,#e4e4e7)}
.wf-items>.task>input[type=checkbox]{flex:0 0 16px;width:16px;height:16px;margin:13px 10px 0 10px;accent-color:var(--sn-green)}
.wf-items>.task>.wf-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:10px 10px 10px 2px;cursor:pointer;text-decoration:none}
.wf-items>.task.done>.wf-main{color:var(--sn-muted)}
.wf-name{font-size:14px;line-height:20px;color:var(--sn-text);overflow-wrap:anywhere;display:flex;align-items:center;gap:6px}
.wf-items>.task.done .wf-name{color:var(--sn-muted)}
.wf-eye .jl-icon{width:15px;height:15px;color:var(--sn-muted)}
.wf-loc{font-size:13px;color:#8e8e98;line-height:20px}
.wf-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.wf-chip{display:inline-flex;align-items:center;gap:4px;border-radius:360px;padding:3px 8px;font-size:12px;font-weight:400;line-height:16px;background:var(--sn-chip,#a1a1aa);color:#fff}
.wf-lead .wf-chip{background:var(--ph-lead,#fda4af);color:var(--ph-lead-ink,#4c0519)}
.wf-production .wf-chip{background:var(--ph-prod,#fcd34d);color:var(--ph-prod-ink,#451a03)}
.wf-post .wf-chip{background:var(--ph-post,#a5f3fc);color:var(--ph-post-ink,#164e63)}
.wf-items>.task.done .wf-chip{background:var(--sn-chip,#a1a1aa);color:#fff}
.wf-items .wf-chip--nodate{background:var(--ph-lead-soft,#fecdd3);color:#9f1239}
.wf-items .wf-chip--shoot{background:#9ff9cd;color:#066135}
.jl-chip-ico{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wf-acts{display:flex;align-items:stretch;flex-shrink:0}
.wf-acts>.sn-dots{display:flex;align-items:center;padding:0 4px}
.wf-acts .sn-menu{top:calc(50% + 14px)}
.wf-drag{width:34px;border-left:1px solid #e1e1e1;display:flex;align-items:center;justify-content:center;cursor:grab}
.wf-drag i{width:14px;height:10px;border-top:2px solid var(--sn-label,#3f3f46);border-bottom:2px solid var(--sn-label,#3f3f46);position:relative}
.wf-drag i::after{content:'';position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--sn-label,#3f3f46)}
.wf-pencil{border:0!important;background:none!important;padding:0 10px!important;box-shadow:none;color:var(--sn-label)}
.wf-pencil .jl-icon{width:16px;height:16px}
.wf-items>.task .task-overdue{margin-left:0}
.wf-items>.sn-milestone{background:var(--sn-surface,#fff);padding:12px 10px}
.wf-items>.sn-milestone.wf-done{background:var(--sn-line,#e4e4e7)}
.wf-items>.sn-milestone small{background:var(--sn-line,#e4e4e7);color:var(--sn-text)}
.wf-items>.sn-milestone label input{width:16px;height:16px;margin:0}
.wf-items>.wf-created{padding:0}
#toast.look-toast--info{background-color:#f5fbff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E")}
.look-toast--info .look-toast__title{color:#0284c7}
.look-toast--info .look-toast__bar{background:#0284c7}
/* Studio Ninja confirm box (measured at 961px: ~360px wide, centred text, stacked full-width buttons). */
#modal.sn-confirm{width:min(366px,92vw);border-radius:8px}
#modal.sn-confirm .modalhead{border:0;padding:12px 14px 0;justify-content:flex-end}
#modal.sn-confirm .modalhead h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#modal.sn-confirm #close{border:0;background:none;box-shadow:none;color:var(--sn-chip,#a1a1aa);font-size:22px;padding:0 4px;width:auto;height:auto}
#modal.sn-confirm #fields{padding:0 24px 14px;max-height:none}
#modal.sn-confirm .sn-ask{text-align:center;font-size:14px;line-height:20px;color:var(--sn-text);margin:0}
#modal.sn-confirm footer{flex-direction:column-reverse;align-items:stretch;gap:10px;border:0;padding:6px 16px 18px}
#modal.sn-confirm footer button{width:100%;font-size:14px;line-height:20px;padding:10px 16px}
#modal.sn-confirm footer #cancel{order:0}
.wf-complete .wf-items>.task:not(:has([data-sn-complete])),.wf-complete .wf-items>.wf-milestone:not(:has([data-sn-complete])){background:var(--sn-line,#e4e4e7)}
.wf-complete .wf-items>.task:not(:has([data-sn-complete])) input,.wf-complete .wf-items>.wf-milestone:not(:has([data-sn-complete])) input{pointer-events:none;opacity:.5}
.wf-complete .wf-items>.task:not(:has([data-sn-complete])) .wf-chip{background:var(--sn-chip,#a1a1aa);color:#fff}
.wf-items>.sn-milestone .wf-chips{margin-top:6px}
.wf-items>.wf-shoot>input[type=checkbox]{margin-top:13px}
.wf-items>.sn-milestone:has([data-sn-complete]){background:var(--sn-surface,#fff)}
.wf-items>.sn-milestone .wf-chip{background:var(--sn-chip,#a1a1aa);color:#fff}
#modal.sn-confirm .sn-ask__title{display:block;color:var(--sn-green);font-size:20px;font-weight:500;line-height:28px;text-align:center;margin-bottom:12px}
#modal.sn-confirm .sn-ask__list{margin:0 0 6px;padding-left:18px;font-size:13px;line-height:20px;color:var(--sn-text)}
/* Studio Ninja: red notification count. */
#notice-count{background:#dc2626!important;color:#fff}