/* Denim Vision client portal. Same world as denimvision.com: ink page with a fine halftone dot and film grain, warm white type, cherry for anything that needs a decision. */
@font-face{font-family:"Exmouth";src:url(/fonts/exmouth.ttf) format("truetype");font-display:swap}
:root{
  --ink:#0a0a0b;--panel:#141416;--panel2:#1c1c1f;--raise:#19191c;--line:#2a2a2e;--line2:#3a3a40;--fg:#f5f5f3;--dim:#9a9a95;--dim2:#7e7e79;
  --cherry:#b3001b;--cherry-deep:#6a0010;--cherry-hi:#ff2a3d;--cherry-bg:#2a0d12;--ok:#4cc38a;--ok-bg:#0f2a1e;--warn:#e6b450;--warn-bg:#2b2310;
  --err:#ff5a6a;--ok-line:#1f5a3e;--warn-line:#6a5420;--int:#c9a7ff;--int-bg:#1d1730;--int-line:#3a2d5c;
  --font:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;--r:12px;--out:cubic-bezier(.23,1,.32,1);
  --gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--ink);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(255,255,255,.075) .9px,transparent 1.4px);background-size:5px 5px;background-attachment:fixed}
/* the site's film grain, laid over everything but never catching clicks */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cherry-hi);outline-offset:2px}
.boot{padding:40vh 0;text-align:center;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--dim)}.small{font-size:13px}.tiny{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sp{flex:1}
.stack{display:grid;gap:14px}

/* buttons and fields */
.btn{appearance:none;border:1px solid var(--line2);background:var(--panel2);color:var(--fg);padding:9px 15px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:500;white-space:nowrap;transition:background .15s,border-color .15s,transform .12s var(--out)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--cherry);border-color:var(--cherry);color:#fff;font-weight:600}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.btn.ghost{background:none}
.btn.small{padding:6px 11px;font-size:13px;border-radius:8px}
.btn.danger{color:var(--err)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
@media (hover:hover) and (pointer:fine){.btn:hover{border-color:#55555c}.btn.primary:hover{background:#c4132b}.btn.ok:hover{filter:brightness(1.08)}}
.field{display:grid;gap:6px}
.field>span{font-size:13px;color:var(--dim)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],input[type=number],select,textarea{
  width:100%;background:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:10px 12px;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:#66666e}
textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--cherry)}
.err{color:var(--err);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pill.active{color:var(--fg);border-color:#55555c}
.pill.review{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.approved{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill.locked{color:var(--ok);border-color:var(--ok-line)}
.pill.internal{color:var(--int);border-color:var(--int-line);background:var(--int-bg)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* sign-in */
.auth{min-height:100svh;display:grid;place-items:center;padding:32px var(--gr) 32px var(--gl);background:radial-gradient(120% 80% at 80% 0%,#3a0710 0%,var(--ink) 55%)}
.auth-card{width:min(420px,100%)}
.auth .logo{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.auth .logo img{width:54px}
.auth .logo b{letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.auth h1{font-size:clamp(30px,6vw,40px);line-height:1;letter-spacing:-.03em;margin:0 0 6px;font-weight:600;text-transform:uppercase}
.auth .s{font-family:Exmouth,cursive;color:var(--cherry-hi);font-size:46px;line-height:.8;display:block;margin:0 0 22px;transform:rotate(-4deg);transform-origin:left}
.auth form{display:grid;gap:14px;margin-top:22px}
.auth .links{margin-top:18px;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--dim)}
.auth .links button{background:none;border:0;color:var(--dim);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}

/* app frame */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gr) 12px var(--gl);background:rgba(10,10,11,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.top .brand img{width:34px}
.top .brand span{color:var(--dim);font-weight:400}
.top .who{color:var(--dim);font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:28px var(--gr) 80px var(--gl)}
.teambar{background:var(--int-bg);color:var(--int);font-size:13px;padding:7px var(--gr) 7px var(--gl);text-align:center}

/* project list */
.hello h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.03em;line-height:1;margin:6px 0 6px;font-weight:600;text-transform:uppercase}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:26px}
.card{display:grid;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;transition:border-color .2s,transform .2s var(--out)}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:#55555c;transform:translateY(-2px)}}
.card h2{margin:0;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.bar{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg);border-radius:4px}
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:36px;text-align:center;color:var(--dim)}

/* project header + stage tracker */
.phead{display:grid;gap:6px;margin-bottom:22px}
.phead h1{margin:0;font-size:clamp(30px,5vw,56px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;font-weight:600}
.phead .client{font-family:Exmouth,cursive;color:var(--cherry-hi);font-size:clamp(34px,5vw,54px);line-height:.8;transform:rotate(-3deg);transform-origin:left;display:inline-block}
.meta{display:flex;gap:22px;flex-wrap:wrap;color:var(--dim);font-size:14px;margin-top:8px}
.meta b{color:var(--fg);font-weight:500}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:2px;overflow-x:auto;scrollbar-width:none;margin:8px 0 26px;border-radius:var(--r)}
.track::-webkit-scrollbar{display:none}
.st{position:relative;background:var(--panel);padding:14px 14px 16px;min-height:96px;display:grid;align-content:space-between;gap:10px;border:0;text-align:left;color:var(--dim);cursor:default}
.st .n{font-size:12px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.st b{font-weight:500;line-height:1.2;color:var(--dim)}
.st .d{font-size:12px}
.st.approved{background:var(--panel)}.st.approved b{color:var(--fg)}.st.approved .n{color:var(--ok)}
.st.active,.st.review{background:var(--panel2);box-shadow:inset 0 2px 0 var(--fg)}.st.active b,.st.review b{color:var(--fg);font-weight:600}
.st.review{box-shadow:inset 0 2px 0 var(--warn)}
.st.team{cursor:pointer}
@media (hover:hover) and (pointer:fine){.st.team:hover{background:#202024}}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500}
.tabs a[aria-current=page]{color:var(--fg);border-color:var(--fg)}
.tabs a .count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cherry);color:#fff;font-size:11px;margin-left:6px}
.tabs a.teamonly{color:var(--int)}

/* panels */
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.panel h2,.panel h3{margin:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.approve{border-color:var(--warn-line);background:linear-gradient(180deg,var(--warn-bg),var(--panel) 70%)}
.approve h2{color:var(--warn)}
.approve .big{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;color:var(--fg)}
.approved-note{border-color:var(--ok-line)}
.list{display:grid}
.list>*{padding:11px 0;border-top:1px solid var(--line)}
.list>*:first-child{border-top:0;padding-top:0}
.link{display:flex;align-items:center;gap:10px;text-decoration:none}
.link .ic{width:30px;height:30px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;flex:none}
@media (hover:hover) and (pointer:fine){a.link:hover b{text-decoration:underline;text-underline-offset:3px}}
.act{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.act time{color:var(--dim2);font-size:12px;white-space:nowrap;padding-top:2px}
.prose{white-space:pre-wrap;color:#d9d8d4}

/* drafts */
.dl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.dl button{border:1px solid var(--line2);background:var(--panel);border-radius:99px;padding:7px 14px;cursor:pointer;color:var(--dim)}
.dl button[aria-pressed=true]{background:var(--fg);color:var(--ink);border-color:var(--fg);font-weight:600}
.vers{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vers button{border:1px solid var(--line2);background:none;border-radius:8px;padding:5px 11px;cursor:pointer;color:var(--dim);font-variant-numeric:tabular-nums}
.vers button[aria-pressed=true]{color:var(--fg);border-color:var(--fg)}
.vers button .lk{color:var(--ok);margin-left:4px}
.stage{position:relative;background:#000;border-radius:var(--r);overflow:hidden}
.stage video{width:100%;max-height:72vh;background:#000}
.stage img{width:100%;max-height:80vh;object-fit:contain;margin:0 auto;cursor:crosshair}
.pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--cherry);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none}
.pin.new{background:var(--warn);color:#000}
.marks{position:relative;height:18px;margin:10px 0 0}
.marks::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line2);border-radius:2px}
.marks button{position:absolute;top:2px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid var(--ink);background:var(--cherry-hi);cursor:pointer;padding:0}
.marks button.res{background:var(--dim2)}
.drive{display:grid;place-items:center;gap:12px;text-align:center;padding:60px 20px;background:var(--panel2);border-radius:var(--r)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:720px){.compare{grid-template-columns:minmax(0,1fr)}}
.compare .lbl{position:absolute;left:10px;top:10px;z-index:2;background:rgba(0,0,0,.7);padding:3px 9px;border-radius:6px;font-size:12px;font-weight:600}
.changes{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.changes li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.changes li::before{content:"→";color:var(--cherry-hi)}
.cmt{display:grid;gap:4px}
.cmt .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.cmt .h b{font-weight:600}
.cmt .ts{border:0;background:var(--cherry-bg);color:var(--cherry);font-weight:600;border-radius:6px;padding:1px 7px;cursor:pointer;font-variant-numeric:tabular-nums;font-size:12px}
.cmt.done{opacity:.55}
.cmt.done .body{text-decoration:line-through;text-decoration-color:var(--dim2)}
.compose{display:grid;gap:8px;margin-top:14px}
.compose .row .btn{flex:none}

/* mood boards */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-auto-rows:120px;grid-auto-flow:dense;gap:10px}
.bi{position:relative;border-radius:10px;overflow:hidden;background:var(--panel2);grid-row:span 2;cursor:pointer;border:0;padding:0;text-align:left;color:inherit}
.bi.s{grid-row:span 1}.bi.l{grid-row:span 3}.bi.w{grid-column:span 2;grid-row:span 2}
@media (max-width:520px){.board{grid-template-columns:repeat(2,1fr);grid-auto-rows:100px}.bi.w{grid-column:span 2}}
.bi img{width:100%;height:100%;object-fit:cover}
.bi.note{display:grid;align-content:center;padding:18px;background:var(--fg);color:var(--ink);font-size:17px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.bi.colour{display:grid;align-content:end;padding:12px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.bi .cc{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;border-radius:99px;padding:2px 8px}
.bi .tools{position:absolute;left:6px;bottom:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.bi:focus-within .tools{opacity:1}
@media (hover:hover) and (pointer:fine){.bi:hover .tools{opacity:1}}
@media (hover:none){.bi .tools{opacity:1}}
.bi .tools button{background:rgba(0,0,0,.78);color:#fff;border:0;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}
.bi.drag-ghost{opacity:.3}

/* side sheet (board item thread, stage editor) */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(11,11,12,.4);opacity:0;transition:opacity .2s}
.sheet{position:fixed;z-index:61;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--raise);box-shadow:-20px 0 50px rgba(11,11,12,.12);border-left:1px solid var(--line);padding:calc(20px + env(safe-area-inset-top,0px)) var(--gr) 24px 22px;overflow:auto;transform:translateX(100%);transition:transform .32s cubic-bezier(.32,.72,0,1)}
.sheet.on{transform:none}.sheet-bg.on{opacity:1}
.sheet h2{margin:0;font-size:20px;letter-spacing:-.01em}
.sheet .x{position:absolute;right:var(--gr);top:calc(16px + env(safe-area-inset-top,0px))}
.sheet .media{border-radius:10px;overflow:hidden;margin:16px 0}

/* dialog */
dialog{border:1px solid var(--line);background:var(--raise);box-shadow:0 24px 60px rgba(11,11,12,.18);color:var(--fg);border-radius:14px;padding:24px;width:min(480px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(11,11,12,.45)}
dialog h2{margin:0 0 10px;font-size:22px;letter-spacing:-.01em}
dialog form{display:grid;gap:14px}

/* notes */
.thread{display:grid;gap:14px;max-width:760px}
.msg{display:grid;gap:4px;max-width:88%;justify-self:start;scroll-margin-bottom:170px}
.msg .bub{background:var(--panel2);border:1px solid var(--line);padding:11px 14px;border-radius:14px 14px 14px 4px;white-space:pre-wrap}
.msg.mine{justify-self:end}
.msg.mine .bub{background:var(--cherry-bg);border-color:#5a1a24;color:var(--fg);border-radius:14px 14px 4px 14px}
.msg.internal .bub{background:var(--int-bg);border-color:var(--int-line);color:var(--fg)}
.msg .h{font-size:12px;color:var(--dim)}
.msg.mine .h{text-align:right}
.say{position:sticky;bottom:0;padding:14px 0 calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--ink) 30%);max-width:760px;display:grid;gap:8px}

/* budget */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600;text-align:left;padding:8px 8px;border-bottom:1px solid var(--line2)}
td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td input{padding:7px 9px;border-radius:7px;background:transparent;border-color:transparent}
td input:hover{border-color:var(--line2)}
td.num,th.num{text-align:right}
td.num input{text-align:right}
tfoot td{font-weight:600;border-bottom:0;padding-top:12px}
.over{color:var(--err)}.under{color:var(--ok)}
.tablewrap{overflow-x:auto}

/* upload progress + toast */
.prog{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;width:0;background:var(--cherry-hi);transition:width .2s}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--fg);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;transition:opacity .2s,transform .25s var(--out);max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--err);color:#fff}
.fresh{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:40}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media (max-width:600px){.top .brand span,.top .who{display:none}.top{gap:8px}}

/* project card: whole card opens the project; the ⋯ menu sits above that link */
.card{position:relative}
.card a.stretch{text-decoration:none}
.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .kebab,.card .shared{position:relative;z-index:1}
.shared{margin-top:-4px}
.warnline{appearance:none;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:7px 10px;text-align:left;cursor:pointer;font-weight:600}
.kebab{appearance:none;width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid transparent;background:none;border-radius:9px;cursor:pointer;color:var(--fg);font-size:20px;line-height:1;transition:background .15s,border-color .15s}
.kebab[aria-expanded=true]{background:var(--panel2);border-color:var(--line2)}
@media (hover:hover) and (pointer:fine){.kebab:hover{background:var(--panel2);border-color:var(--line2)}}
.pop{position:fixed;z-index:80;min-width:210px;background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(11,11,12,.16);display:grid;opacity:0;transform:scale(.96);transition:opacity .12s,transform .15s var(--out)}
.pop.on{opacity:1;transform:none}
.pop button{appearance:none;border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer;font-weight:500}
.pop button:focus-visible,.pop button:hover{background:var(--panel2);outline:none}
.pop button.danger{color:var(--err)}
.check.access{align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.check.access input{margin:0}
.check.access:has(input:checked){border-color:var(--fg)}
.btn.danger-solid{background:var(--err);border-color:var(--err);color:#fff;font-weight:600}
@media (hover:hover) and (pointer:fine){.btn.danger-solid:hover{filter:brightness(1.1)}}

/* team nav */
.topnav{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}
.topnav a{padding:6px 12px;border-radius:7px;text-decoration:none;color:var(--dim);font-weight:500;font-size:14px;white-space:nowrap}
.topnav a[aria-current=page]{background:var(--raise);color:var(--fg);box-shadow:0 1px 2px rgba(11,11,12,.08)}
@media (max-width:760px){.top{flex-wrap:wrap}.topnav{order:9;width:100%;overflow-x:auto}}

/* dashboard */
.dash-hello .pulse{font-size:18px;color:#d9d8d4;max-width:62ch;margin:8px 0 0}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0 22px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;gap:4px;align-content:start}
.tile b{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.tile .bar{margin-top:6px}
.tile .bar i,.kpi .bar i{background:var(--cherry)}
.dash{align-items:start}
.due{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:center;text-decoration:none}
.due .when{display:grid;font-size:13px}.due .when span{color:var(--dim);font-size:12px}
.due .what{display:grid;min-width:0}.due .what b{font-weight:600}
.due.today .when span{color:var(--warn);font-weight:600}
.due.late .when span{color:var(--err);font-weight:600}
@media (hover:hover) and (pointer:fine){a.due:hover .what b,a.att:hover b{text-decoration:underline;text-underline-offset:3px}}
.att{display:grid;grid-template-columns:26px 1fr;gap:8px;text-decoration:none;align-items:start}
.att .ic{width:26px;height:26px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;font-size:13px}
.task{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center}
.task input{width:18px;height:18px;margin:0;accent-color:var(--cherry)}
.task .tt{display:grid;min-width:0}.task.done .tt b{text-decoration:line-through;color:var(--dim);font-weight:400}
.av{width:28px;height:28px;border-radius:50%;background:var(--cherry);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.02em}
.addtask{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.addtask input[name=t]{flex:1 1 100%}
.addtask select,.addtask input[type=date]{flex:1 1 130px;width:auto;min-width:0}
.addtask .btn{flex:none}
.dash>.stack{min-width:0}
.inc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.inc .lb{min-width:0}.inc .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.inc .acts{grid-column:1/-1;display:flex;gap:6px;align-items:center}
.nextmeet{display:grid;gap:4px}
.nextmeet .countdown{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cherry)}
.nextmeet>b{font-size:22px;letter-spacing:-.01em;line-height:1.15}
.big-money{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:150px;align-items:end;border-bottom:1px solid var(--line2);padding-top:22px}
.bcol{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;outline:none}
.bcol i{display:block;width:62%;max-width:26px;background:var(--fg);border-radius:4px 4px 0 0;min-height:0}
.bcol.cur i{background:var(--cherry)}
.bcol.future i{background:var(--line2)}
.bcol .ml{position:absolute;bottom:-20px;font-size:11px;color:var(--dim)}
.bcol.cur .ml{color:var(--cherry);font-weight:700}
.bcol .tip{position:absolute;bottom:calc(100% - 18px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--fg);color:#fff;font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s}
.bcol:focus-visible .tip{opacity:1}.bcol:focus-visible i{outline:2px solid var(--cherry-hi);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.bcol:hover .tip{opacity:1}.bcol:hover i{filter:brightness(1.25)}}
.bars+.list,.bars+p{margin-top:30px!important}
.kpis{display:grid;gap:10px}
.kpi{appearance:none;text-align:left;border:1px solid var(--line);background:var(--raise);border-radius:10px;padding:12px 14px;display:grid;gap:6px;cursor:pointer;color:inherit;transition:border-color .15s}
@media (hover:hover) and (pointer:fine){.kpi:hover{border-color:#55555c}}
.kpi .kv b{font-size:22px;font-variant-numeric:tabular-nums}
/* pick-several dropdown (meeting invites, client access, new project) */
.ms{position:relative;display:grid;min-width:0}
.field:has(> .ms){grid-template-columns:minmax(0,1fr);min-width:0}   /* long names truncate instead of pushing into the next box */
.ms-btn{appearance:none;display:flex;align-items:center;gap:8px;width:100%;min-width:0;overflow:hidden;text-align:left;background:var(--raise);border:1px solid var(--line2);border-radius:9px;padding:10px 12px;cursor:pointer;color:var(--fg);min-height:42px}
.ms-btn[aria-expanded=true]{border-color:#66666e;border-radius:9px 9px 0 0}
.ms-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-caret{color:var(--dim);font-size:12px;transition:transform .15s var(--out)}
.ms-btn[aria-expanded=true] .ms-caret{transform:rotate(180deg)}
.ms-panel{border:1px solid #66666e;border-top:0;border-radius:0 0 9px 9px;background:var(--raise);max-height:220px;overflow:auto;padding:4px}
.ms-opt{display:flex;gap:10px;align-items:center;padding:8px;border-radius:7px;cursor:pointer}
.ms-opt input{width:17px;height:17px;margin:0;flex:none;accent-color:var(--cherry)}
.ms-opt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-opt:has(input:checked){background:var(--panel)}
@media (hover:hover) and (pointer:fine){.ms-opt:hover{background:var(--panel2)}}
fieldset.notify{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;display:grid;gap:12px;background:var(--panel)}
fieldset.notify legend{padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
dialog{max-height:calc(100dvh - 32px);overflow:auto}

/* payroll, under Money */
.payroll{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2)}
.payroll h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.split>div{background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.split b{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.split b.owed{color:var(--warn)}.split b.neg{color:var(--err)}
.people{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--raise);border-radius:99px;padding:3px 10px 3px 3px;font-size:13px}
.chip .av{width:22px;height:22px;font-size:10px}
.chip b{font-variant-numeric:tabular-nums}
.dvtag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cherry);border:1px solid #5a1a24;background:var(--cherry-bg);border-radius:5px;padding:1px 5px;vertical-align:1px}

/* ---------- team layout: menu on the left, work on the right ---------- */
.tshell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100svh}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:6px;padding:calc(18px + env(safe-area-inset-top,0px)) 14px 16px max(14px,env(safe-area-inset-left,0px));background:var(--panel);border-right:1px solid var(--line)}
.side .brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:4px 8px 18px}
.side .brand img{width:34px}
.side .brand span{display:grid;line-height:1.15}
.side .brand b{font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.side .brand small{font-size:12px;color:var(--dim)}
.sidenav{display:grid;gap:2px}
.nav{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;text-decoration:none;color:#c9c8c4;font-weight:500;transition:background .15s,color .15s}
.nav .ic,.tabbar .ic,.iconbtn .ic{width:19px;height:19px;flex:none}
.nav[aria-current=page]{background:var(--raise);color:var(--fg);box-shadow:0 1px 2px rgba(11,11,12,.08),0 0 0 1px var(--line)}
.nav[aria-current=page] .ic{color:var(--cherry)}
@media (hover:hover) and (pointer:fine){.nav:hover{background:#202024;color:var(--fg)}.nav[aria-current=page]:hover{background:var(--raise)}}
.sidenote{font-size:12px;line-height:1.45;color:var(--dim);margin:0 8px 6px}
.me{display:flex;align-items:center;gap:10px;padding:10px 8px 2px;border-top:1px solid var(--line)}
.me .who{display:grid;min-width:0;flex:1;line-height:1.25}
.me .who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who small{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{appearance:none;border:1px solid transparent;background:none;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--dim)}
@media (hover:hover) and (pointer:fine){.iconbtn:hover{background:var(--raise);border-color:var(--line);color:var(--fg)}}
.tmain{max-width:1240px;width:100%;padding-top:34px}
.tabbar{display:none}
@media (max-width:860px){
  .tshell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gr) 10px var(--gl);border-right:0;border-bottom:1px solid var(--line);background:rgba(10,10,11,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .side .brand{padding:0}.sidenav,.sidenote,.side .sp{display:none}
  .side .sp{display:block;flex:1}
  .me{border:0;padding:0;margin-left:auto}.me .who{display:none}
  .tmain{padding-top:22px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(16,16,18,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:grid;justify-items:center;gap:3px;padding:6px 2px;border-radius:10px;text-decoration:none;color:var(--dim);font-size:11px;font-weight:600}
  .tabbar a[aria-current=page]{color:var(--fg);background:var(--panel)}
  .tabbar a[aria-current=page] .ic{color:var(--cherry)}
}

/* email builder */
.composer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start;margin-top:22px}
@media (max-width:1100px){.composer{grid-template-columns:minmax(0,1fr)}}
.composer .field em.hint{font-style:normal;color:var(--dim2);font-size:12px}
.preview{position:sticky;top:20px;display:grid;gap:10px}
@media (max-width:1100px){.preview{position:static}}
.mailactions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mailframe{width:100%;height:min(78vh,900px);border:1px solid var(--line);border-radius:14px;background:#0b0b0c}
.subjline{margin:0;font-size:14px;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:9px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fillwarn{margin:0;font-size:13px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:8px 12px}

/* anything marked hidden stays hidden, even buttons with their own display style */
[hidden]{display:none!important}
@media (max-width:520px){.due{grid-template-columns:88px minmax(0,1fr)}.due .pill{grid-column:2;justify-self:start}}

/* tab markers */
.tabs a .okdot{margin-left:6px;color:var(--ok);font-size:11px}
.okpanel{border-color:var(--ok-line);background:linear-gradient(180deg,var(--ok-bg),var(--panel) 70%)}
.okpanel h2{color:var(--ok)}

/* brief */
.briefhead{margin-bottom:16px}
.briefhead.done{border-color:var(--ok-line);background:var(--ok-bg)}
.briefhead.done h2{color:var(--ok)}
.briefgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:900px){.briefgrid{grid-template-columns:minmax(0,1fr)}}
.bq>span,.bq>legend{color:var(--fg)!important;font-weight:500;font-size:14px!important}
fieldset.bq{border:0;padding:0;margin:0;min-width:0}
fieldset.bq legend{padding:0;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipcheck{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--raise);border-radius:99px;padding:6px 12px 6px 9px;cursor:pointer;font-size:14px}
.chipcheck input{width:16px;height:16px;margin:0;accent-color:var(--cherry)}
.chipcheck:has(input:checked){border-color:var(--fg);background:var(--panel2)}
.briefnote{margin:0;font-size:14px;background:var(--raise);border:1px dashed var(--line2);border-radius:10px;padding:10px 12px}
.submitbar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:12px;margin-top:18px;background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 10px 30px rgba(11,11,12,.10)}
@media (max-width:860px){.submitbar{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* drop zone + upload rows */
.dropzone{display:grid;justify-items:center;gap:4px;text-align:center;border:1.5px dashed var(--line2);border-radius:12px;padding:28px 16px;background:var(--raise);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone b{font-size:16px}
.dropzone.on,.dropzone:focus-visible{border-color:var(--cherry);background:var(--cherry-bg);outline:none}
@media (hover:hover) and (pointer:fine){.dropzone:hover{border-color:#55555c}}
.uplist{display:grid;gap:8px}
.uprow{display:grid;gap:4px}
.uprow.ok .prog i{background:var(--ok)}
.uprow.bad .prog i{background:var(--err)}

/* shared files */
.filegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.filecard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;min-width:0}
.filecard .thumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--raise);border:1px solid var(--line);text-decoration:none}
.filecard .thumb img{width:100%;height:100%;object-fit:cover}
.ext{font-weight:700;letter-spacing:.06em;color:var(--dim);font-size:15px;border:1.5px solid var(--line2);border-radius:8px;padding:10px 12px;background:var(--panel)}
.meta2{display:grid;gap:2px;min-width:0}
.meta2 b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* delivery gallery */
.delhead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.delhead .s{font-family:Exmouth,cursive;color:var(--cherry-hi);font-size:40px;line-height:.8;display:inline-block;transform:rotate(-4deg);transform-origin:left}
.delhead h2{margin:4px 0 0;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px}
.gallery.onlyfav .gitem:not(.fav){display:none}
.gitem{margin:0;display:grid;gap:6px;min-width:0}
.gthumb{position:relative;appearance:none;border:0;padding:0;border-radius:10px;overflow:hidden;background:var(--panel2);aspect-ratio:4/5;cursor:zoom-in;display:grid;place-items:center}
.gthumb img,.gthumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--out)}
@media (hover:hover) and (pointer:fine){.gthumb:hover img,.gthumb:hover video{transform:scale(1.03)}}
.gthumb .play{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:15px;padding-left:3px}
.gitem figcaption{display:flex;align-items:center;gap:6px;min-width:0}
.gitem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--dim)}
.heart,.gitem .dl{appearance:none;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line2);background:var(--raise);display:grid;place-items:center;cursor:pointer;color:var(--dim2);text-decoration:none;font-size:15px;transition:transform .12s var(--out),color .15s,background .15s}
.heart:active,.gitem .dl:active{transform:scale(.92)}
.heart[aria-pressed=true]{color:#fff;background:var(--cherry);border-color:var(--cherry)}
.gitem.fav .gthumb{box-shadow:0 0 0 2px var(--cherry)}
/* lightbox */
dialog.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:rgba(11,11,12,.96);color:#fff;display:grid;grid-template-rows:auto 1fr;grid-template-columns:56px 1fr 56px}
dialog.lightbox::backdrop{background:rgba(0,0,0,.8)}
.lbtop{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:12px 16px}
.lbtop .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.lbstage{display:grid;place-items:center;min-height:0;padding:0 0 20px}
.lbstage img,.lbstage video{max-width:100%;max-height:calc(100dvh - 90px);object-fit:contain}
.lbnav{appearance:none;border:0;background:none;color:#fff;font-size:40px;cursor:pointer;opacity:.7}
@media (hover:hover) and (pointer:fine){.lbnav:hover{opacity:1}}

/* project templates (new project dialog) */
.tplpreview{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tplsteps{display:flex;flex-wrap:wrap;gap:4px 6px}
.tplsteps span{display:inline-flex;align-items:center;gap:5px;font-size:13px;background:var(--raise);border:1px solid var(--line);border-radius:99px;padding:3px 9px 3px 4px}
.tplsteps i{font-style:normal;font-size:10px;font-weight:700;color:var(--ink);background:var(--fg);border-radius:99px;padding:2px 5px;font-variant-numeric:tabular-nums}
.pill.shoot{color:var(--cherry);border-color:#5a1a24;background:var(--cherry-bg)}
.warnt{color:var(--warn)!important}

/* call sheet */
.rowsed{display:grid;gap:6px}
.rowed{display:flex;gap:6px;align-items:center}
.rowed input{padding:8px 10px}
.sheet{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,32px);display:grid;gap:18px}
.cshead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end;border-bottom:2px solid var(--fg);padding-bottom:16px}
.cshead h2{margin:4px 0 2px;font-size:clamp(28px,4.5vw,46px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.csdate{margin:0;font-size:18px;font-weight:600;color:var(--cherry)}
.cstimes{display:flex;gap:10px}
.cstimes div{display:grid;gap:2px;border:1px solid var(--line2);border-radius:12px;padding:10px 16px;min-width:96px;text-align:center}
.cstimes b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.csgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.csgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.csgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.csgrid,.csgrid.two{grid-template-columns:minmax(0,1fr)}}
.csb{display:grid;gap:6px;align-content:start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.csb h3{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.wx{display:grid;gap:2px}
.cstable{width:100%;border-collapse:collapse}
.cstable td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.cstable tr:last-child td{border-bottom:0}
.cstable td.t{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;width:1%}
.csfoot{margin:0;text-align:center}
/* printing a call sheet: just the sheet, no portal around it */
@media print{
  @page{margin:12mm}
  body{background:#fff}
  .side,.tabbar,.top,.phead,.track,.tabs,.noprint,#toast,.teambar{display:none!important}
  .tshell{display:block}.tmain,.wrap{padding:0!important;max-width:none}
  .sheet{border:0;padding:0;gap:12px}
  .csb{break-inside:avoid;background:#fff}
}

/* ---------- dark theme details ---------- */
.auth .logo img,.top .brand img,.side .brand img{filter:invert(1)}            /* the eye logo is drawn black; white on ink like the site */
.bcol .tip{color:var(--ink)}
.side{background:rgba(16,16,18,.92)}
.nav[aria-current=page]{box-shadow:0 0 0 1px var(--line2)}
.topnav a[aria-current=page]{box-shadow:0 0 0 1px var(--line2)}
.pop,dialog,.sheet,.side .sheet{box-shadow:0 24px 60px rgba(0,0,0,.6)}
.bi.note{background:var(--fg);color:var(--ink)}
.sheet{border-color:var(--line)}
.cshead{border-bottom-color:var(--fg)}
.csdate{color:var(--cherry-hi)}
.heart[aria-pressed=true]{background:var(--cherry);border-color:var(--cherry)}
.gthumb .play{color:var(--ink)}
.chipcheck:has(input:checked){border-color:var(--fg);background:var(--panel2)}
.submitbar{box-shadow:0 10px 30px rgba(0,0,0,.5)}
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark}
/* poster details from the site: script accents in cherry, tiny uppercase labels */
.phead .client,.auth .s,.delhead .s{color:var(--cherry-hi)}
.tiny{letter-spacing:.1em}
@media print{.sheet,.sheet *{color:#111!important;background:#fff!important;border-color:#ccc!important;box-shadow:none!important}.csdate{color:#b3001b!important}body{background-image:none}body::after{display:none}}

/* ---------- money ---------- */
@media (max-width:860px){.tabbar{grid-template-columns:repeat(5,1fr)}}
.overtext{color:var(--err)!important}
.pill.overdue{color:var(--err);border-color:#6a1a24;background:var(--cherry-bg)}
.clickrow{cursor:pointer}
@media (hover:hover) and (pointer:fine){.clickrow:hover td{background:var(--panel2)}}
.invrow{display:flex;align-items:center;gap:10px;text-decoration:none;flex-wrap:wrap}
.invactions{margin-bottom:14px;gap:8px}
.inveditor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}
@media (max-width:1100px){.inveditor{grid-template-columns:minmax(0,1fr)}}
.invlines{display:grid;gap:6px}
.invline{display:grid;grid-template-columns:minmax(0,1fr) 70px 100px 96px 34px;gap:6px;align-items:center}
.invline.head span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.invline input{padding:8px 9px}
.invline .num{text-align:right;font-variant-numeric:tabular-nums}
.invline>.btn{justify-self:start}
@media (max-width:560px){.invline{grid-template-columns:1fr 60px 84px}.invline .num,.invline>.btn:not(:last-child){display:none}.invline.head span:nth-child(n+4){display:none}}
.invpreview{position:sticky;top:20px}
/* the invoice document: a paper page, also what gets printed */
.invdoc{background:#fff;color:#111;border-radius:12px;padding:clamp(20px,3.5vw,40px);display:grid;gap:18px;font-size:14px;line-height:1.45;position:relative;overflow:hidden}
.invdoc .tiny{color:#777;letter-spacing:.12em}
.invdoc .dim{color:#777}
.invdoc .prose{color:#222}
.invtop{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.invlogo{width:46px;display:block;margin-bottom:8px}
.invbiz{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.invtop p{margin:4px 0 0;color:#555;font-size:13px}
.invmeta{text-align:right}
.invmeta h2{margin:0 0 8px;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;text-transform:uppercase;line-height:1;color:#111}
.invmeta dl,.invpay dl{display:grid;grid-template-columns:auto auto;gap:2px 14px;margin:0;justify-content:end}
.invpay dl{justify-content:start}
.invmeta dt,.invpay dt{color:#777;font-size:12px}
.invmeta dd,.invpay dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.invbill{display:grid;gap:2px}.invbill p{margin:0;color:#444}
.invtable{width:100%;border-collapse:collapse}
.invtable th{color:#777;border-bottom:1.5px solid #111;padding:8px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.invtable td{border-bottom:1px solid #e5e2da;padding:9px 6px;color:#111}
.invtable .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.invtable tfoot td{border-bottom:0;font-weight:700;font-size:16px;padding-top:12px}
.invgst{margin:-8px 0 0;color:#777;font-size:12px;text-align:right}
.invpay{background:#f4f2ed;border-radius:10px;padding:14px 16px;display:grid;gap:6px}
.invnotes{display:grid;gap:4px}.invnotes p{margin:0}
.invfoot{color:#777;font-size:12px;text-align:center;border-top:1px solid #e5e2da;padding-top:12px}
.invdoc.paid::after{content:"PAID";position:absolute;right:-24px;top:170px;transform:rotate(18deg);font-size:46px;font-weight:800;letter-spacing:.1em;color:rgba(30,138,86,.18);border:5px solid rgba(30,138,86,.18);padding:2px 18px;border-radius:10px}
.invpage{max-width:860px;margin:0 auto;padding:24px var(--gr) 60px var(--gl)}
.invbar{margin-bottom:14px}
/* statement import + spending */
.mapper{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}
.exptable td{vertical-align:middle}
.exptable select{padding:6px 8px;min-width:170px}
.expdesc{font-weight:500;font-size:14px;word-break:break-word}
tr.needcat td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.catbars{display:grid;gap:12px}
.catbar{display:grid;gap:4px}
.catbar .bar i{background:var(--cherry)}
#toast .btn{background:var(--ink);color:var(--fg);border-color:var(--ink)}
@media print{
  .invpage .invbar,.invactions,.inveditor>.stack{display:none!important}
  .inveditor{display:block}.invpreview{position:static}
  .invdoc{border-radius:0;padding:0;box-shadow:none}
  .invpage{padding:0;max-width:none}
}

/* people tables (Clients & team): one tidy row each, details in the ⋯ menu */
.peopletable td{padding-top:12px;padding-bottom:12px}
.who2{display:flex;align-items:center;gap:12px;min-width:0}
.who2 .av{width:34px;height:34px;font-size:12px;flex:none}
.who2 b{display:block;font-size:15px}
.kebabcell{width:1%;text-align:right}
.pill.owner{color:var(--cherry-hi);border-color:#5a1a24;background:var(--cherry-bg)}

/* ---------- client onboarding ---------- */
.onbwrap{align-items:start;padding-top:max(40px,8vh)}
.onb{display:grid;gap:6px}
.onb h1{font-size:clamp(28px,5vw,38px)}
.onbsteps{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.onbsteps span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:4px 12px 4px 4px}
.onbsteps i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--panel2)}
.onbsteps .on{color:var(--fg);border-color:var(--fg)}.onbsteps .on i{background:var(--cherry);color:#fff}
.onbsteps .done{color:var(--ok);border-color:var(--ok-line)}.onbsteps .done i{background:var(--ok-bg);color:var(--ok)}
.onbgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.onbgrid>*:nth-child(1),.onbgrid>*:nth-child(2),.onbgrid>*:nth-child(3),.onbgrid>*:nth-child(7),.onbgrid>*:nth-child(8){grid-column:1/-1}
@media (max-width:520px){.onbgrid{grid-template-columns:minmax(0,1fr)}}
.oktext{color:var(--ok)}
.profdl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.profdl dt{color:var(--dim);font-size:13px}.profdl dd{margin:0;white-space:pre-line}

/* ---------- portal guide ---------- */
dialog.guide{width:min(520px,calc(100vw - 24px));padding:28px 28px 18px;text-align:center;overflow:hidden}
dialog.guide .gx{position:absolute;right:12px;top:12px}
.gbody{display:grid;gap:8px;min-height:330px;align-content:start}
.gbody h2{margin:16px 0 0;font-size:24px;letter-spacing:-.01em;text-transform:uppercase}
.gbody p{margin:0;color:var(--dim);line-height:1.55}
.gnav{display:flex;align-items:center;gap:10px;margin-top:18px}
.gnav .btn.primary{margin-left:auto}
.gdots{display:flex;gap:6px;margin:0 auto}
.gdots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line2);cursor:pointer;transition:width .2s var(--out),background .2s}
.gdots button[aria-selected=true]{width:22px;background:var(--cherry)}
.linkbtn{appearance:none;background:none;border:0;color:var(--dim);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:10px;font-size:13px}
/* the little previews in each step */
.gart{height:190px;border-radius:14px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;align-content:center;padding:18px;gap:8px;text-align:left;animation:gin .35s var(--out)}
@keyframes gin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gart.hero{justify-items:center;text-align:center}.gart.hero img{width:96px}
.gart.card,.gart.brief,.gart.video,.gart.notes{justify-items:stretch}
.gart.card{justify-items:start}.gart.card .bar{width:100%}.gart.card .bar i{background:var(--cherry)}
.gart.track{display:block;text-align:center;padding-top:44px}
.gart.track>span{display:inline-block;margin:0 3px 10px;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--dim)}
.gart.track>span.ok{color:var(--ok)}.gart.track>span.cur{color:var(--fg);box-shadow:inset 0 2px 0 var(--warn)}
.gart.brief>i{display:block;height:10px;width:100%;border-radius:6px;background:var(--line2)}
.gart.brief .drop{border:1.5px dashed var(--line2);border-radius:10px;padding:14px;text-align:center;color:var(--dim);font-size:13px}
.gart.video .screen{height:80px;border-radius:8px;background:#000;display:grid;place-items:center;color:#fff}
.gart.video .line{position:relative;height:4px;border-radius:4px;background:var(--line2)}
.gart.video .line b{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--cherry-hi)}
.gart.video .bubble{justify-self:start;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:13px}
.gart.video .bubble strong{color:var(--cherry-hi);margin-right:4px}
.gart.boards,.gart.deliv{grid-template-columns:1fr 1fr;align-items:center;justify-items:stretch}
.gart .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gart.deliv .grid{grid-template-columns:repeat(3,1fr)}
.gart .grid i{height:52px;border-radius:6px;background:linear-gradient(135deg,#3a3a40,#1d1d21);display:grid;place-items:end;padding:4px;font-style:normal;font-size:12px}
.gart .grid i.fav{color:#fff;box-shadow:0 0 0 2px var(--cherry)}
.gart .sheet2,.gart .inv{display:grid;gap:2px;background:#fff;color:#111;border-radius:8px;padding:10px 12px;font-size:13px}
.gart.notes .b{max-width:80%;padding:8px 12px;border-radius:12px;font-size:13px;background:var(--panel);border:1px solid var(--line);justify-self:start}
.gart.notes .me{justify-self:end;background:var(--cherry-bg);border-color:#5a1a24}
/* spotlight tour */
.spot-hole{position:fixed;z-index:120;border-radius:12px;box-shadow:0 0 0 9999px rgba(5,5,6,.72);pointer-events:none;transition:left .3s var(--out),top .3s var(--out),width .3s var(--out),height .3s var(--out)}
.spot-tip{position:fixed;z-index:121;width:min(330px,calc(100vw - 20px));background:var(--raise);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;display:grid;gap:6px;box-shadow:0 18px 50px rgba(0,0,0,.6);transition:top .3s var(--out),left .3s var(--out)}
.spot-tip b{font-size:17px}.spot-tip p{margin:0;color:var(--dim);font-size:14px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.gart{animation:none}.spot-hole,.spot-tip{transition:none}}

/* ---------- files: cards, board and the review player ---------- */
.fthumb{width:100%;height:100%;display:grid;place-items:center}
.fthumb img,.fthumb video{width:100%;height:100%;object-fit:cover;display:block}
.filecard .thumb{position:relative;aspect-ratio:16/10}
.filecard .fname{font-weight:600;color:var(--fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.filecard .meta2{display:grid;gap:3px;min-width:0}
.fbadge{position:absolute;font-size:12px;font-weight:600;padding:3px 7px;border-radius:7px;background:rgba(10,10,11,.78);color:#fff;backdrop-filter:blur(4px)}
.fbadge.dur{left:8px;bottom:8px;font-variant-numeric:tabular-nums}
.fbadge.cm{right:8px;top:8px}.fbadge.cm.open{background:var(--cherry)}
.fbadge.drv{left:8px;top:8px;background:rgba(10,10,11,.6);color:var(--dim);font-weight:500}
.pill.changes{color:var(--cherry-hi);border-color:#5a1a24;background:var(--cherry-bg)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{appearance:none;border:0;background:none;color:var(--dim);padding:6px 14px;cursor:pointer;font:inherit;font-size:14px}
.seg button[aria-pressed=true]{background:var(--panel2);color:var(--fg)}
.fboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.fcol{display:grid;gap:12px;align-content:start}
.fcol h3{display:flex;align-items:center;gap:8px;margin:0;padding:0 2px 10px;border-bottom:2px solid var(--line2);font-size:15px}
.fcol h3 i{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.fcol.review h3{border-color:var(--warn-line)}.fcol.changes h3{border-color:#5a1a24}.fcol.changes h3 i{background:var(--cherry-hi)}
.fcol.approved h3{border-color:var(--ok-line)}.fcol.approved h3 i{background:var(--ok)}
@media (max-width:860px){.fboard{grid-template-columns:minmax(0,1fr)}}

.rvhead{gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rvhead h2{margin:0;font-size:22px;min-width:0;max-width:52ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
@media (max-width:1000px){.rvgrid{grid-template-columns:minmax(0,1fr)}}
.rvleft{display:grid;gap:10px;min-width:0}
.rvstage{position:relative;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center;max-height:70vh}
.rvstage video{width:100%;max-height:70vh;display:block;cursor:pointer}
.rvstage iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.rvstage.still{background:var(--panel2)}.rvstage.still img{max-width:100%;max-height:70vh;display:block;cursor:crosshair}
.rvstage .ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rvstage .ink polyline{vector-effect:non-scaling-stroke;stroke-width:4}
.rvstage.drawing .ink{pointer-events:auto;cursor:crosshair;touch-action:none}
.rvstage.drawing{box-shadow:inset 0 0 0 2px var(--cherry)}
.rvstage .pin{pointer-events:auto;cursor:pointer;border-width:2px}.rvstage .pin.res{background:var(--panel2);color:var(--dim)}
.rvstage .pin.new{pointer-events:none}
.rvctl{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rvbar{position:relative;height:30px;cursor:pointer;touch-action:none}
.rvbar::before,.rvbar .buf,.rvbar .pos{content:"";position:absolute;left:0;top:13px;height:4px;border-radius:4px}
.rvbar::before{right:0;background:var(--line2)}.rvbar .buf{background:#4a4a52;width:0}.rvbar .pos{background:var(--cherry-hi);width:0}
.rvmarks{position:absolute;inset:0;pointer-events:none}
.rvmarks .mk{pointer-events:auto;position:absolute;top:-8px;height:0;min-width:0;border:0;padding:0;background:none;cursor:pointer;transform:translateX(-11px)}
.rvmarks .mk span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1.5px solid var(--fg);color:var(--fg);font-size:9px;font-weight:700}
.rvmarks .mk.team span{background:var(--cherry);border-color:var(--cherry-hi);color:#fff}
.rvmarks .mk.res span{opacity:.45}
.rvmarks .mk[style*=width]::after{content:"";position:absolute;left:11px;right:-11px;top:29px;height:4px;border-radius:4px;background:rgba(255,216,77,.55)}
.rvmarks .sect{position:absolute;top:11px;height:8px;border-radius:4px;background:rgba(255,216,77,.5)}
.rvbtn{appearance:none;border:1px solid var(--line2);background:var(--panel2);color:var(--fg);border-radius:8px;min-width:34px;height:32px;padding:0 9px;cursor:pointer;font:inherit;font-size:14px}
.rvbtn:hover{border-color:var(--fg)}
.rvtime{font-variant-numeric:tabular-nums;font-size:14px;margin-left:4px}
.rvframe{font-variant-numeric:tabular-nums;font-size:13px}
.rvcompose{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rvcompose textarea{min-height:56px}
.rvcompose .btn[aria-pressed=true]{border-color:var(--cherry-hi);color:var(--fg);background:var(--cherry-bg)}
.swatches{display:inline-flex;gap:5px;align-items:center}
.swatches button{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);padding:0;cursor:pointer}
.swatches button[aria-pressed=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--ink)}
.rvkeys{margin:0}
.rvside{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:10px;max-height:calc(100vh - 140px);overflow:auto;position:sticky;top:16px}
.rvtabs{display:flex;gap:4px;background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:3px}
.rvtabs button{flex:1;appearance:none;border:0;background:none;color:var(--dim);padding:7px 8px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;display:inline-flex;gap:6px;justify-content:center}
.rvtabs button span{opacity:.7}
.rvtabs button[aria-selected=true]{background:var(--panel2);color:var(--fg)}
.rvlist{display:grid;gap:8px}
.rvthread{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--raise);overflow:hidden}
.rvc{display:grid;gap:6px;padding:11px 12px;transition:background .2s}
.rvc.on{background:var(--panel2)}
.rvc.reply{padding-left:24px;border-top:1px solid var(--line);background:rgba(255,255,255,.015)}
.rvc.done .body{color:var(--dim)}
.rvc .av{width:24px;height:24px;font-size:9px;background:var(--panel2);border:1px solid var(--line2);color:var(--fg)}
.rvc .av.team{background:var(--cherry);border-color:var(--cherry);color:#fff}
.rvc .body{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tcb{appearance:none;border:0;border-radius:6px;background:var(--int-bg);color:var(--int);font:inherit;font-size:12px;font-weight:700;padding:3px 7px;cursor:pointer;font-variant-numeric:tabular-nums}
.chk{appearance:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);background:none;color:var(--dim);cursor:pointer;font-size:12px;display:grid;place-items:center;padding:0}
.chk.on{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.rvreply{display:grid;gap:6px;padding:8px 12px 12px;border-top:1px solid var(--line)}
.rvreply[hidden]{display:none}
.rvhead select{width:auto;min-width:150px;padding-top:6px;padding-bottom:6px}
/* the frame hugs the video, so drawings line up whatever its shape */
.rvstage{display:block;width:fit-content;max-width:100%;margin:0 auto;justify-self:center}
.rvstage video{width:auto;max-width:100%;max-height:70vh}
.rvstage:has(iframe),.rvstage:has(.drive){width:100%}
.rvbtn{display:inline-grid;place-items:center}
.rvbtn .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rvbtn .ic.play,.rvbtn .ic.pause{fill:currentColor;stroke:none}
.rvstage video{min-width:min(320px,100%);min-height:200px;background:#000}
.rvload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;background:rgba(10,10,11,.8);color:var(--fg);padding:6px 12px;border-radius:99px;pointer-events:none}
@media (hover:none){.rvkeys{display:none}}

/* clients grouped by company */
.cogroups{display:grid;gap:14px}
.cogroup{padding:16px 18px 6px}
.cohead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.cohead h2{margin:0;font-size:20px;letter-spacing:-.01em}
.cohead .small a{color:inherit}
.coav{width:40px;height:40px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.cotable .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cotable td:first-child{width:44%}
.cotable tr.subhead th{padding:14px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;text-align:left;border-bottom:1px solid var(--line)}
.cotable tbody tr:last-child td{border-bottom:0}

/* ---------- protecting the work ---------- */
.stage,.lbstage,.gthumb{position:relative}
.wmark{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;user-select:none}
.wmark>div{position:absolute;inset:-50%;display:flex;flex-wrap:wrap;align-content:center;gap:56px 72px;transform:rotate(-24deg);justify-content:center}
.wmark span{font-size:15px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.2);text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap}
.wmark.sm>div{gap:26px 34px}.wmark.sm span{font-size:9px}
.paylock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--warn-line);background:var(--warn-bg)}
.paylock.open{border-color:var(--ok-line);background:var(--ok-bg)}
.paylock .lockic{font-size:18px}
.extrabox{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px;padding:10px 12px}
.extrabox.billed,.extrabox.waived{border-color:var(--line2);background:var(--raise)}
.extrabox b{font-size:14px}
.teamtag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--int);border:1px solid var(--int-line);background:var(--int-bg);border-radius:5px;padding:1px 5px}
.fromtag{font-size:11px;color:var(--warn);border:1px solid var(--warn-line);border-radius:5px;padding:0 5px}
.rvc.internal,.cmt.internal{background:linear-gradient(90deg,var(--int-bg),transparent 70%);box-shadow:inset 3px 0 0 var(--int)}
.teamonlychk{gap:6px;color:var(--int)}
.fbadge.ver{right:8px;bottom:8px;font-variant-numeric:tabular-nums}
.vers button.over{box-shadow:inset 0 -2px 0 var(--warn)}
.rvvers{gap:10px;flex-wrap:wrap;margin:-4px 0 12px}
.rvcompare{display:grid;gap:8px}
.cmpgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmpone{position:relative;background:#000;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.cmpone video,.cmpone img{width:100%;max-height:60vh;display:block;object-fit:contain}
.cmpone .lbl{position:absolute;left:8px;top:8px;z-index:3;font-size:12px;font-weight:700;background:rgba(10,10,11,.8);padding:2px 8px;border-radius:6px}
@media (max-width:700px){.cmpgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- studio calendar ---------- */
:root{--c-meeting:#c9a7ff;--c-shoot:#ff4a5c;--c-edit:#6fb8ff;--c-work:#4cc38a;--c-hold:#9a9a95;--c-other:#e8e8e3;--c-deadline:#e6b450}
.t-meeting{--c:var(--c-meeting)}.t-shoot{--c:var(--c-shoot)}.t-edit{--c:var(--c-edit)}.t-work{--c:var(--c-work)}.t-hold{--c:var(--c-hold)}.t-other{--c:var(--c-other)}.t-deadline{--c:var(--c-deadline)}
.calbar{gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.calbar select{width:auto;max-width:260px}
.calnav{gap:6px;flex-wrap:wrap;margin-bottom:12px}
.calnav select{width:auto}
.callabel{margin:0 0 0 8px;font-size:20px;letter-spacing:-.01em}
.calgrid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;align-items:start}
@media (max-width:1100px){.calgrid{grid-template-columns:minmax(0,1fr)}}
.calside{display:grid;gap:12px;position:sticky;top:16px}
.calside .panel{padding:14px}
.cmonth{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.cdow{padding:8px 10px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.cday{min-height:118px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;cursor:cell;min-width:0}
.cday:nth-child(7n){border-right:0}
.cday.out{background:rgba(0,0,0,.25)}.cday.out .cnum{color:var(--dim2)}
.cday.over,.cwcol.over,.cwallcell.over,.cunsched.over{background:var(--cherry-bg);outline:1px dashed var(--cherry-hi);outline-offset:-2px}
.cnum{appearance:none;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;font-weight:600;align-self:flex-end;width:26px;height:26px;border-radius:50%;cursor:pointer}
.cday.today .cnum{background:var(--cherry);color:#fff}
.cchip{appearance:none;display:flex;align-items:center;gap:5px;min-width:0;width:100%;text-align:left;border:0;border-radius:6px;padding:3px 6px;font:inherit;font-size:12px;cursor:grab;color:var(--fg);
  background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:inset 3px 0 0 var(--c)}
.cchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip b{font-weight:600;color:var(--c);flex:none}
.cchip.t-hold{background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.05) 6px 12px);box-shadow:inset 0 0 0 1px var(--line2)}
.cchip.ro{cursor:pointer;font-style:italic}
.cchip.clash{outline:1.5px solid var(--err);outline-offset:-1px}
.clashdot{font-style:normal;flex:none;margin-left:auto;width:15px;height:15px;border-radius:50%;background:var(--err);color:#000;font-size:10px;font-weight:800;display:grid;place-items:center}
.cmore{appearance:none;border:0;background:none;color:var(--dim);font:inherit;font-size:12px;text-align:left;padding:0 6px;cursor:pointer}
.cbusy{font-size:11px;color:var(--dim);padding:1px 6px;border-radius:5px;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.06) 4px 8px)}
.cweek{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.cwhead,.cwall,.cwbody{display:grid}
.cwday{appearance:none;border:0;border-left:1px solid var(--line);background:none;color:var(--dim);font:inherit;font-size:12px;padding:8px;display:flex;gap:6px;align-items:baseline;justify-content:center;cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.cwday b{font-size:18px;color:var(--fg);letter-spacing:0}
.cwday.today b{color:var(--cherry-hi)}
.cwall{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cwall>div:first-child{padding:6px;align-self:center}
.cwallcell{border-left:1px solid var(--line);padding:4px;display:grid;gap:3px;min-height:32px;align-content:start;cursor:cell}
.cwscroll{max-height:68vh;overflow:auto}
.cwhours{position:relative}
.cwhours span{position:absolute;right:8px;font-size:11px;color:var(--dim);transform:translateY(-6px)}
.cwcol{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 47px,var(--line) 47px 48px);cursor:cell}
.cwev{position:absolute;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;z-index:2;background:color-mix(in srgb,var(--c) 26%,var(--panel))}
.cwev small{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cwbusy{position:absolute;left:0;right:0;z-index:1;background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,rgba(255,255,255,.08) 6px 12px);border-left:2px solid var(--dim2);pointer-events:auto}
.cwbusy span{font-size:10px;color:var(--dim);padding:2px 4px;display:block}
.cwnow{position:absolute;left:0;right:0;height:2px;background:var(--cherry-hi);z-index:3}
.cunsched{display:grid;gap:5px;min-height:40px;border-radius:8px;padding:2px}
.ckey{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:13px}
.ckey span{display:flex;gap:7px;align-items:center}
.ckey i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ckey .kclash i{background:none;outline:1.5px solid var(--err)}.ckey .kbusy i{background:repeating-linear-gradient(135deg,var(--dim2) 0 2px,transparent 2px 4px)}
.ctypepick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ctypepick .btn{justify-content:flex-start}
.ctypepick .btn i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.icl{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.icsteps{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.icsteps code{display:block;margin-top:4px;padding:6px 8px;background:var(--ink);border:1px solid var(--line);border-radius:6px;font-size:12px;overflow-wrap:anywhere}
.sched{display:grid;gap:0;padding:4px 14px}
.schrow{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);box-shadow:none}
.schrow:last-child{border-bottom:0}
.schdate{width:52px;flex:none;display:grid;justify-items:center;border-left:3px solid var(--c);padding-left:8px;line-height:1.1}
.schdate b{font-size:20px}.schdate span{font-size:12px;text-transform:uppercase;color:var(--dim)}.schdate small{font-size:11px;color:var(--dim2)}
@media (max-width:700px){.cday{min-height:84px;padding:3px}.cchip{font-size:11px;padding:2px 4px}.cchip b{display:none}}

/* ---------- phones: nothing wider than the screen, readable text, thumb-sized controls ---------- */
.tmain,.wrap{min-width:0}
@media (max-width:860px){
  .tabbar{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .tabbar a{font-size:10.5px;padding:7px 0}
  .tabs{margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding:0 16px}
  .track{margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding:0 16px}
}
@media (max-width:600px){
  body{font-size:16px}
  input,select,textarea{font-size:16px!important}          /* iPhone zooms into anything smaller */
  .btn{min-height:42px;padding:10px 16px}
  .btn.small{min-height:38px;padding:8px 13px;font-size:14px}
  .panel{padding:16px}
  .row{flex-wrap:wrap}
  .tabs a{padding:12px 13px;font-size:15px}
  .phead h1,.hello h1{font-size:clamp(30px,9vw,40px);overflow-wrap:anywhere}
  .phead .meta{display:flex;flex-wrap:wrap;gap:4px 14px}
  .act,.act>*{min-width:0;overflow-wrap:anywhere}
  .small{font-size:14px}
  dialog{width:calc(100vw - 20px);padding:18px}
  .kebab{min-width:40px;min-height:40px}
  .cday{min-height:72px}
  .calside{position:static}
  .rvside{position:static;max-height:none}
}
/* the screen-reader-only header row in each company table mustn't widen the page */
.cogroup{position:relative;overflow:hidden}
.cotable .vh{top:0;left:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* people tables become stacked cards on phones: name and menu on top, details underneath */
@media (max-width:600px){
  .peopletable thead{display:none}
  .peopletable,.peopletable tbody{display:block;width:100%}
  .peopletable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
  .peopletable tbody tr:last-child{border-bottom:0}
  .peopletable td{display:block;padding:0!important;border:0!important;min-width:0;width:auto!important}
  .peopletable td:first-child{grid-column:1;grid-row:1}
  .peopletable td.kebabcell{grid-column:2;grid-row:1}
  .peopletable td:not(:first-child):not(.kebabcell){grid-column:1/-1;padding-left:46px!important}
  .peopletable td:empty{display:none}
  .peopletable tr.subhead{display:block;padding:14px 0 6px}
  .peopletable tr.subhead th{display:block;padding:0!important;border:0}
  .tablewrap:has(.peopletable){overflow:visible}
  .cohead .btn{flex:1}
}
/* client top bar stays on one row on phones */
@media (max-width:600px){
  .top{flex-wrap:nowrap!important;gap:8px}
  .top .btn{min-height:34px;padding:6px 10px;font-size:13px}
  .top .who,.top .me-name{display:none}
}

/* ---------- client booking ---------- */
.bkhours{display:grid;gap:6px}
.bkday{display:grid;grid-template-columns:130px 1fr auto 1fr;gap:8px;align-items:center}
.bkday .check{margin:0}
.bkday:has(input[type=checkbox]:not(:checked)) input[type=time]{opacity:.35}
@media (max-width:520px){.bkday{grid-template-columns:1fr 1fr auto 1fr}.bkday .check{grid-column:1/-1}}
.bktypes{display:grid;gap:8px}
.bktype{border:1px solid var(--line);border-radius:10px;padding:10px 12px;gap:10px}
.bookpanel h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.bkrow{gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.bkcard{text-align:left;cursor:pointer;font:inherit;color:inherit}
.bkcard:hover{border-color:var(--fg)}
.bkdays{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.bkdays::-webkit-scrollbar{display:none}
.bkdays button{flex:none;display:grid;justify-items:center;gap:1px;min-width:64px;padding:8px 6px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--dim);cursor:pointer;font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.bkdays button b{font-size:20px;color:var(--fg);letter-spacing:0}
.bkdays button[aria-selected=true]{border-color:var(--cherry-hi);background:var(--cherry-bg);color:var(--fg)}
.bkslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.bkslots .btn{justify-content:center;flex-direction:column;gap:0}
.bkslots .btn small{font-size:11px}
.bkconfirm .big,.bkdone .big{font-size:22px;font-weight:600}
.bkdone .s{font-family:Exmouth,cursive;color:var(--cherry-hi);font-size:40px;line-height:.8;transform:rotate(-4deg);transform-origin:left;display:block}
.bkname{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em}

/* ---------- enquiries ---------- */
.enqlist{display:grid;gap:12px}
.enq{display:grid;gap:10px}
.enqdl{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:4px 0 0;font-size:14px}
.enqdl dt{color:var(--dim)}.enqdl dd{margin:0}
.enqabout{margin:0;white-space:pre-wrap;line-height:1.55;max-width:75ch;color:#d9d9d6}
.pill.int{color:var(--int);border-color:var(--int-line);background:var(--int-bg)}

/* ---------- crew calendar ---------- */
:root{--c-crew:#ff4a5c;--c-busy:#7e7e79}
.t-crew{--c:var(--c-crew)}.t-busy{--c:var(--c-busy)}
.crewwrap{display:grid;gap:12px}
.crewgrid{display:grid;grid-template-columns:minmax(150px,190px) repeat(var(--days),minmax(54px,1fr));border:1px solid var(--line);border-radius:12px;overflow:auto;background:var(--panel)}
.crow{display:contents}
.crow>*{border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-height:56px}
.cname{display:grid;align-content:center;gap:1px;padding:8px 12px;position:sticky;left:0;background:var(--panel);z-index:1;min-width:0}
.cname b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow.mine .cname{box-shadow:inset 3px 0 0 var(--cherry)}
.cdh{display:grid;justify-items:center;align-content:center;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;padding:6px 0}
.cdh b{font-size:17px;color:var(--fg);letter-spacing:0}
.cdh.today b{color:var(--cherry-hi)}
.cdh.wkend,.ccell.wkend{background:rgba(255,255,255,.015)}
.ccell{appearance:none;border:0;background:none;color:var(--fg);font:inherit;font-size:11px;font-weight:600;cursor:pointer;position:relative;padding:4px;display:grid;place-items:center;text-align:center;line-height:1.15;overflow:hidden}
.ccell:hover{background:var(--panel2)}
.ccell span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ccell.busy{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 6px,rgba(255,255,255,.1) 6px 12px);color:var(--dim)}
.ccell.requested{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-line)}
.ccell.booked{background:color-mix(in srgb,var(--cherry) 34%,var(--panel));color:#fff}
.cdot{position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--int);display:inline-block}
.crewkey{grid-template-columns:repeat(auto-fit,minmax(150px,max-content));gap:6px 18px}
.crewkey i{width:12px;height:12px;border-radius:3px}
.crewkey .k-free i{border:1px solid var(--line2)}.crewkey .k-busy i{background:repeating-linear-gradient(135deg,var(--dim2) 0 2px,transparent 2px 4px)}
.crewkey .k-requested i{background:var(--warn)}.crewkey .k-booked i{background:var(--cherry)}
.crewkey .cdot{position:static}
.reqpanel{margin:18px 0}
.reqrow{gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}

/* ---------- pipeline ---------- */
.pboard{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr)) repeat(2,minmax(180px,.8fr));gap:12px;overflow-x:auto;padding-bottom:6px;align-items:start}
.pstage h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 2px 8px;border-bottom:2px solid var(--line2);font-size:14px}
.pstage h3 i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.pstage.s-talking h3 i{background:var(--int)}.pstage.s-quote h3 i{background:var(--warn)}.pstage.s-won h3 i{background:var(--ok)}.pstage.s-lost h3 i{background:var(--dim2)}
.pstage.s-won h3{border-color:var(--ok-line)}.pstage.s-quote h3{border-color:var(--warn-line)}
.ptotal{margin-left:auto;font-weight:600;font-size:13px}
.pcol{display:grid;gap:8px;min-height:80px;align-content:start;border-radius:10px}
.pcard{display:grid;gap:3px;padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--fg);cursor:grab}
.pcard:hover{border-color:var(--line2)}
.pstage.s-lost .pcard,.pstage.s-won .pcard{opacity:.85}
.pnext{font-size:12.5px;color:var(--fg);margin-top:4px}
.pnext.overdue{color:var(--err)}.pnext.today{color:var(--warn)}.pnext.none{color:var(--dim2);font-style:italic}
.pval{color:var(--fg)}
.dealhead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.dealhead h2{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em}
.dealstage{margin-left:auto;flex-wrap:wrap}
.dealgrid{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)}
.nextbox.overdue{border-color:var(--err)}.nextbox.today{border-color:var(--warn-line)}
.tline{display:grid;gap:0;margin-top:6px}
.tl{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.tl i{width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--dim2)}
.tl.k-call i{background:var(--ok)}.tl.k-email i{background:var(--int)}.tl.k-meeting i{background:var(--warn)}.tl.k-stage i{background:var(--cherry-hi)}.tl.k-project i{background:var(--fg)}.tl.k-invoice i{background:var(--ok)}
.tlbody{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.tl.k-system .tlbody,.tl.k-stage .tlbody{color:var(--dim)}
.dealrow{gap:8px;text-decoration:none;color:var(--fg);padding:6px 0;border-top:1px solid var(--line)}
.fupanel{margin:18px 0}
.furow{gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--fg)}
@media (max-width:860px){.dealgrid{grid-template-columns:minmax(0,1fr)}.pboard{grid-template-columns:repeat(5,minmax(240px,1fr))}}

/* ---------- quotes ---------- */
.qtitle{margin:0;font-size:22px;color:#111;letter-spacing:-.01em}
.qintro{margin:0;white-space:pre-wrap;color:#222;line-height:1.6;max-width:70ch}
.qdoc .qdetail{font-size:12.5px;color:#666;margin-top:3px;white-space:pre-wrap;font-weight:400}
.qdoc .qtag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00;background:#fff4dc;border-radius:5px;padding:1px 6px;vertical-align:1px}
.qdoc tr.qopt:not(.on) td{color:#888}
.qpick{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.qpick input{width:18px;height:18px;accent-color:#b3001b}
.qdoc .qdep td{font-weight:600;color:#b3001b}
.qterms{border-top:1px solid #e5e5e5;padding-top:14px;display:grid;gap:6px}
.qterms div{white-space:pre-wrap;color:#333;font-size:13px;line-height:1.6}
.qsigned{margin:0;font-weight:600;color:#1e8a56}
.qdoc.accepted::after{content:"ACCEPTED";position:absolute;right:-30px;top:170px;transform:rotate(18deg);font-size:40px;font-weight:800;letter-spacing:.1em;color:rgba(30,138,86,.16);border:5px solid rgba(30,138,86,.16);padding:2px 18px;border-radius:10px}
.qaccept{margin-top:16px;max-width:560px}
.qaccept.done{border-color:var(--ok-line)}
.qaccept .s{font-family:Exmouth,cursive;color:var(--cherry-hi);font-size:38px;line-height:.8;transform:rotate(-4deg);transform-origin:left;display:block}
.qgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.qpreview{position:sticky;top:16px;transform-origin:top left}
.qlines{display:grid;gap:10px}
.qline{display:grid;grid-template-columns:minmax(0,1fr) 70px 100px auto auto auto;gap:6px 8px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line)}
.qline.qhead{border:0;padding:0}
.qline-detail{grid-column:1/-1}
@media (max-width:1100px){.qgrid{grid-template-columns:minmax(0,1fr)}.qpreview{position:static}}
@media (max-width:600px){.qline{grid-template-columns:minmax(0,1fr) 64px 86px}.qline .check{grid-column:span 1}}
@media print{.qaccept,.invbar{display:none!important}}
.qdoc .qqty{display:none;font-size:12.5px;color:#666;margin-top:2px}
@media (max-width:600px){.qdoc .invtable thead th:nth-child(2),.qdoc .invtable thead th:nth-child(3),.qdoc .invtable tbody td:nth-child(2),.qdoc .invtable tbody td:nth-child(3){display:none}
  .qdoc .qqty{display:block}}
/* pipeline reports */
.periods{gap:6px}
.mbars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:170px;align-items:end}
.mbar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.mbar i{display:block;width:100%;max-width:34px;min-height:2px;background:var(--fg);border-radius:4px 4px 0 0}
.mbar .tiny{white-space:nowrap;font-size:10px}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
@media (max-width:860px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.rtable{width:100%;border-collapse:collapse;font-size:14px}
.rtable th{text-align:left;font-weight:500;color:var(--dim);font-size:12px;padding:0 8px 8px 0;border-bottom:1px solid var(--line)}
.rtable td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rtable td:first-child{word-break:break-word}
@media (max-width:560px){.mbar .tiny:first-child{display:none}}
/* keep in touch */
.kitrow{gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.kitrow:first-of-type{border-top:0}
.kitrow .acts{display:flex;gap:6px;flex-wrap:wrap}
/* crew applications */
.approw{padding:14px 0;border-top:1px solid var(--line)}
.approw:first-child{border-top:0;padding-top:0}
.approw:last-child{padding-bottom:0}
.approw .small a{word-break:break-all}
.appmore{margin:8px 0 0 46px}
.appmore summary{cursor:pointer;color:var(--dim)}
@media (max-width:560px){.appmore{margin-left:0}}
/* page loading */
.loading{display:flex;align-items:center;gap:10px;color:var(--dim);padding:40px 0;font-size:14px;animation:loadin .3s ease-out}
.loading .spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--fg);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes loadin{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.loading .spin{animation:none}}