:root{--teal:#0B3A39;--coral:#E87D49;--cream:#F6F6EE;--gold:#D0942F;--yellow:#E4C700;--black:#000;--white:#fff;--teal2:#134f4d;--cream2:#eeede5;--peach:#fde8dc;--sidebar:232px;--topbar:54px;--sh:0 2px 10px rgba(11,58,57,.09)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Barlow',sans-serif;font-size:14px;background:var(--cream);color:var(--black)}
button,input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:rgba(11,58,57,.18);border-radius:10px}
#login-screen{position:fixed;inset:0;background:var(--teal);display:flex;align-items:center;justify-content:center;z-index:9999}
.login-box{background:#fff;border-radius:16px;padding:36px 40px;width:400px;max-width:95vw;text-align:center}
.login-logo-img{height:60px;width:auto;margin-bottom:20px}
.login-sub{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(0,0,0,.35);margin-bottom:26px}
.login-lbl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(0,0,0,.6);text-align:left;display:block;margin-bottom:4px}
.login-sel,.login-pin{width:100%;border:1.5px solid rgba(0,0,0,.12);border-radius:8px;padding:10px 12px;font-size:14px;margin-bottom:14px;background:var(--cream);outline:none;transition:border .15s}
.login-sel:focus,.login-pin:focus{border-color:var(--teal)}
.login-btn{width:100%;background:var(--coral);color:#fff;border:none;border-radius:8px;padding:12px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.5px;cursor:pointer;transition:background .15s}
.login-btn:hover{background:#c96935}
.login-err{color:#c0392b;font-size:11px;margin-bottom:8px;min-height:14px}
#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar);background:var(--teal);display:flex;flex-direction:column;z-index:200;box-shadow:3px 0 16px rgba(0,0,0,.14);overflow-y:auto}
.sb-logo{padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center}
.sb-logo-img{height:41px;width:auto}
.sb-grp{margin:2px 0}
.sb-grp-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 13px 6px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);user-select:none;transition:color .13s}
.sb-grp-hd:hover{color:rgba(255,255,255,.7)}
.sb-grp-arr{font-size:14px;transition:transform .2s;display:inline-block}
.sb-grp-body{overflow:hidden;transition:max-height .25s ease}
.sb-grp-body.collapsed{max-height:0!important}
.ni{display:flex;align-items:center;gap:8px;padding:8px 13px;cursor:pointer;color:rgba(255,255,255,.78);font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:.3px;transition:all .13s;border-left:3px solid transparent;margin:1px 0;user-select:none}
.ni:hover{background:rgba(255,255,255,.06);color:#fff}
.ni.active{background:rgba(232,125,73,.18);color:var(--coral);border-left-color:var(--coral)}
/* .hidden only ever existed for nav items, so every card and button marked
   `nav-admin hidden` was visible to everyone. The data behind them is still
   protected by RLS, but a member could read the webhook URLs and the
   notification settings off the screen. No !important: several admin
   controls reveal themselves with an inline display value and must keep
   winning over this. */
.hidden{display:none}
.ni.hidden{display:none!important}
.nb{margin-left:auto;background:var(--coral);color:#fff;font-size:9px;font-weight:700;border-radius:20px;padding:1px 6px;min-width:16px;text-align:center}
.sb-foot{margin-top:auto;padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);font-size:10px;color:rgba(255,255,255,.22);font-family:'Barlow Condensed',sans-serif}
.sb-av{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.av-c{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;font-family:'Barlow Condensed',sans-serif;flex-shrink:0;overflow:hidden}
.av-c img{width:100%;height:100%;object-fit:cover}
#topbar{position:fixed;top:0;left:var(--sidebar);right:0;height:var(--topbar);background:#fff;border-bottom:1px solid rgba(0,0,0,.07);display:flex;align-items:center;padding:0 20px;gap:10px;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.tb-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:800;color:var(--teal)}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:7px}
.tb-user{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:rgba(0,0,0,.55)}
#main{margin-left:var(--sidebar);padding-top:var(--topbar);min-height:100vh}
.page{padding:18px 20px;display:none}.page.active{display:block}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;border:none;cursor:pointer;transition:all .13s;white-space:nowrap}
.btn-p{background:var(--coral);color:#fff}.btn-p:hover{background:#c96935}
.btn-t{background:var(--teal);color:#fff}.btn-t:hover{background:var(--teal2)}
.btn-o{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}.btn-o:hover{background:var(--teal);color:#fff}
.btn-g{background:transparent;color:rgba(0,0,0,.45);border:1.5px solid rgba(0,0,0,.12)}.btn-g:hover{border-color:var(--teal);color:var(--teal)}
.btn-grn{background:#0B3A39;color:#fff}.btn-grn:hover{background:#0d4544}
.btn-red{background:#c0392b;color:#fff}.btn-red:hover{background:#a93226}
.btn-gold{background:var(--gold);color:#fff}.btn-gold:hover{background:#b07a20}
.btn-sm{padding:4px 10px;font-size:11px}.btn-xs{padding:2px 7px;font-size:10px}
.card{background:#fff;border-radius:11px;box-shadow:var(--sh);overflow:hidden}
.ch{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.05);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ct{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal)}
.cb{padding:14px 16px}
.srow{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:16px}
.sc{background:#fff;border-radius:11px;padding:14px 16px;box-shadow:var(--sh);border-top:4px solid var(--teal);cursor:pointer;transition:transform .12s,box-shadow .12s}
.sc:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(11,58,57,.13)}
.sc.cor{border-top-color:var(--coral)}.sc.gld{border-top-color:var(--gold)}.sc.yel{border-top-color:var(--yellow)}.sc.grn{border-top-color:#0B3A39}
.sl{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.35);margin-bottom:3px}
.sv{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--teal);line-height:1}
.ss{font-size:10px;color:rgba(0,0,0,.3);margin-top:2px}
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.b-teal{background:rgba(11,58,57,.1);color:var(--teal)}.b-coral{background:rgba(232,125,73,.15);color:#b05a28}
.b-gold{background:rgba(208,148,47,.15);color:#8a6010}.b-yel{background:rgba(228,199,0,.2);color:#7a6a00}
.b-grn{background:rgba(11,58,57,.12);color:#0B3A39}.b-red{background:rgba(192,57,43,.1);color:#c0392b}
.b-gray{background:rgba(0,0,0,.07);color:rgba(0,0,0,.45)}.b-pur{background:rgba(142,68,173,.12);color:#6c3483}
.b-blue{background:rgba(41,128,185,.12);color:#1a5276}.b-pink{background:rgba(231,76,60,.1);color:#922b21}
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:8px 12px;text-align:left;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.55);border-bottom:2px solid rgba(0,0,0,.06);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.045);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(11,58,57,.022)}
.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center}
.mov.open{display:flex}
.modal{background:#fff;border-radius:13px;width:580px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.22)}
.mb{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 16px}
.mh{flex-shrink:0;padding:18px 20px 12px;border-bottom:1px solid rgba(0,0,0,.06)}
.mf{flex-shrink:0;padding:12px 20px;border-top:1px solid rgba(0,0,0,.07);display:flex;gap:8px;justify-content:flex-end;background:#fff}
.modal.wide{width:700px}.modal.narrow{width:440px}
.mh{padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.07);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#fff}
.mt{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:var(--teal)}
.mc{background:none;border:none;font-size:20px;cursor:pointer;color:rgba(0,0,0,.3);line-height:1;padding:4px 8px;min-height:32px}.mc:hover{color:var(--black)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.fr.full{grid-template-columns:1fr}.fr.tri{grid-template-columns:1fr 1fr 1fr}
.fg{display:flex;flex-direction:column;gap:4px}
.fl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(0,0,0,.6)}
.fi,.fs,.fta{border:1.5px solid rgba(0,0,0,.11);border-radius:7px;padding:7px 10px;font-size:12px;background:var(--cream);transition:border .13s;outline:none}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--teal)}
.fta{resize:vertical;min-height:60px}
.fs{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}
.multi-check{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.multi-check label{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 9px;border-radius:20px;border:1.5px solid rgba(0,0,0,.12);cursor:pointer;transition:all .13s}
.multi-check label:hover{border-color:var(--teal)}
.multi-check input[type=checkbox]{display:none}
.multi-check label:has(input:checked){background:var(--teal);border-color:var(--teal);color:#fff}
.pipe-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.pipe-col{min-width:205px;max-width:205px;background:rgba(0,0,0,.03);border-radius:10px;padding:10px}
.pch{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.psl{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.psc{font-size:9px;background:rgba(0,0,0,.09);border-radius:20px;padding:1px 6px;font-weight:700}
.dc{background:#fff;border-radius:7px;padding:9px;margin-bottom:5px;box-shadow:0 1px 3px rgba(0,0,0,.07);cursor:pointer;border-left:3px solid var(--teal);transition:transform .1s}
.dc:hover{transform:translateY(-1px)}
.dn{font-weight:600;font-size:12px;margin-bottom:2px}
.dm{font-size:10px;color:rgba(0,0,0,.38);display:flex;justify-content:space-between}
.task-item{padding:9px 11px;border-radius:7px;background:var(--cream);margin-bottom:5px;cursor:pointer;transition:background .1s}
.task-item:hover{background:var(--cream2)}
.task-item.high-priority{background:var(--peach);border-left:3px solid var(--coral)}
.task-item-name{font-size:12px;font-weight:600;margin-bottom:3px}
.task-item-meta{font-size:10px;color:rgba(0,0,0,.55);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.task-due-alert{color:#c0392b;font-weight:700}
.del-sec{margin-bottom:14px}
.dsec-t{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.35);margin-bottom:5px;padding-bottom:3px;border-bottom:1px solid rgba(0,0,0,.06)}
.dr{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:6px;margin-bottom:3px;background:var(--cream);transition:background .1s}
.dr:hover{background:var(--cream2)}
.dr.high-priority{background:var(--peach)}
.dck{width:14px;height:14px;border-radius:3px;border:2px solid rgba(0,0,0,.18);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .13s}
.dck.done{background:var(--teal);border-color:var(--teal)}
.dck.done::after{content:"";color:#fff;font-size:8px;font-weight:700}
.dname{flex:1;font-size:11px}.dname.done{text-decoration:line-through;color:rgba(0,0,0,.32)}
.cmt-thread{border:1.5px solid rgba(0,0,0,.08);border-radius:9px;overflow:hidden;margin-top:8px}
.cmt-list{max-height:160px;overflow-y:auto;padding:8px 11px}
.cmt-it{display:flex;gap:7px;margin-bottom:9px}
.cav{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;font-family:'Barlow Condensed',sans-serif;color:#fff;overflow:hidden}
.cav img{width:100%;height:100%;object-fit:cover}
.cnm{font-size:10px;font-weight:700;color:var(--teal);margin-bottom:1px}
.ctx{font-size:11px;color:rgba(0,0,0,.65);line-height:1.4}
.ctx .mention{color:var(--coral);font-weight:700}
.ctm{font-size:9px;color:rgba(0,0,0,.28)}
.cin-wrap{position:relative}
.cin-row{display:flex;gap:6px;padding:7px 9px;border-top:1px solid rgba(0,0,0,.06);background:var(--cream)}
.cin-row input{flex:1;border:1.5px solid rgba(0,0,0,.1);border-radius:6px;padding:5px 8px;font-size:11px;outline:none;background:#fff}
.cin-row input:focus{border-color:var(--teal)}
.mention-dropdown{position:fixed;background:#fff;border:1.5px solid rgba(0,0,0,.1);border-radius:7px;box-shadow:0 4px 20px rgba(0,0,0,.22);z-index:9000;display:none;min-width:180px;max-height:220px;overflow-y:auto}
.mention-item{padding:7px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:7px;transition:background .1s}
.mention-item:hover{background:var(--cream)}
.mention-item .mi-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;font-family:'Barlow Condensed',sans-serif;flex-shrink:0;overflow:hidden}
.mention-item .mi-av img{width:100%;height:100%;object-fit:cover}
.pw{height:5px;background:rgba(0,0,0,.07);border-radius:10px;overflow:hidden}
.pf{height:100%;border-radius:10px;background:var(--teal)}
.tabs{display:flex;gap:2px;border-bottom:2px solid rgba(0,0,0,.06);margin-bottom:14px;flex-wrap:wrap}
.tab{padding:6px 13px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;color:rgba(0,0,0,.38);transition:all .13s}
.tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.tp{display:none}.tp.active{display:block}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.st{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:.4px;color:var(--teal)}
.vid-card{background:#fff;border-radius:10px;box-shadow:var(--sh);padding:13px 15px;margin-bottom:10px}
.vid-top{display:flex;align-items:start;justify-content:space-between;margin-bottom:10px}
.vid-client-name{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;color:var(--teal)}
.vid-row{display:flex;align-items:flex-start;gap:7px;padding:5px 0;border-bottom:1px solid rgba(0,0,0,.045);font-size:11px}
.vid-row:last-child{border-bottom:none}
.vid-lbl{color:rgba(0,0,0,.38);width:95px;flex-shrink:0;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;padding-top:1px}
.vid-val{flex:1}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.tc{background:#fff;border-radius:10px;padding:13px 15px;box-shadow:var(--sh)}
.tch{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.tav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden}
.tav img{width:100%;height:100%;object-fit:cover}
.tn{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;color:var(--teal)}
.trole{font-size:10px;color:rgba(0,0,0,.38)}
.wb{height:5px;background:rgba(0,0,0,.07);border-radius:10px;overflow:hidden;margin:5px 0 3px}
.wf{height:100%;border-radius:10px}
.tpill{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;background:var(--cream);border-radius:6px;margin-bottom:3px;font-size:11px;cursor:pointer;transition:background .1s}
.tpill:hover{background:var(--cream2)}
.p-banner{background:var(--teal);color:#fff;padding:16px 20px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.p-logo{height:32px;width:auto}
.p-cn{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;margin-bottom:1px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.res-card{background:#fff;border-radius:9px;box-shadow:var(--sh);overflow:hidden;transition:transform .12s}
.res-card:hover{transform:translateY(-2px)}
.res-thumb{height:120px;display:flex;align-items:center;justify-content:center;background:rgba(11,58,57,.05);cursor:pointer;overflow:hidden}
.res-thumb img{width:100%;height:100%;object-fit:cover}
.res-thumb .res-icon{font-size:36px}
.res-info{padding:10px 12px;border-top:1px solid rgba(0,0,0,.05)}
.res-name{font-size:12px;font-weight:700;margin-bottom:2px;font-family:'Barlow Condensed',sans-serif}
.res-meta{font-size:10px;color:rgba(0,0,0,.35)}
.es{text-align:center;padding:24px;color:rgba(0,0,0,.3);font-size:11px}
.es p{margin-top:6px}
.rl{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;margin-bottom:4px;cursor:pointer;transition:background .1s}
.rl:hover{background:rgba(0,0,0,.03)}
.rd{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ri{flex:1;min-width:0}
.rn{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs{font-size:10px;color:rgba(0,0,0,.38)}
.rv{font-size:11px;font-weight:700;color:var(--teal);white-space:nowrap}
.rdt{font-size:10px;color:rgba(0,0,0,.4);white-space:nowrap}
.wh-ban{background:rgba(11,58,57,.06);border:1px solid rgba(11,58,57,.12);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:11px;display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.wh-ban code{font-size:10px;background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px}
.slack-toast{position:fixed;bottom:20px;right:20px;background:var(--teal);color:#fff;padding:12px 16px;border-radius:9px;font-size:12px;line-height:1.5;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.22);animation:slideIn .3s ease;max-width:320px}
.su-entry{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);display:flex;gap:8px;align-items:flex-start}
.su-entry:last-child{border-bottom:none}
.su-meta{font-size:10px;color:rgba(0,0,0,.4);margin-bottom:3px;display:flex;gap:6px;align-items:center}
.su-author{font-weight:700;color:var(--teal);font-family:'Barlow Condensed',sans-serif;font-size:11px}
.su-text{font-size:12px;color:#333;line-height:1.5}
.su-status-snap{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.07);font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;text-transform:uppercase}
.stale-badge{background:var(--coral);color:#fff;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:700;font-family:'Barlow Condensed',sans-serif}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;z-index:8000;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--teal);letter-spacing:1px;gap:10px}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);display:inline-block;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.review-card{background:#fff;border-radius:10px;box-shadow:var(--sh);padding:14px 16px;margin-bottom:10px;border-left:4px solid var(--gold)}
.review-card.revision{border-left-color:var(--coral)}
.review-card-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;color:var(--teal);margin-bottom:4px}
.review-card-meta{font-size:10px;color:rgba(0,0,0,.4);margin-bottom:8px}
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filter-bar .fs{min-width:120px;font-size:11px;padding:5px 28px 5px 8px}
.rec-submit-btn{background:var(--gold);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;cursor:pointer;transition:background .13s}
.rec-submit-btn:hover{background:#b07a20}
.rec-submitted-lbl{font-size:10px;color:#0B3A39;font-weight:700;font-family:'Barlow Condensed',sans-serif}
.rec-revision-lbl{font-size:10px;color:var(--coral);font-weight:700;font-family:'Barlow Condensed',sans-serif;cursor:pointer}
.rte-wrap{border:1.5px solid rgba(0,0,0,.11);border-radius:7px;overflow:hidden;background:var(--cream)}
.rte-wrap:focus-within{border-color:var(--teal)}
.rte-toolbar{display:flex;gap:2px;padding:5px 7px;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);flex-wrap:wrap}
.rte-btn{background:none;border:none;border-radius:4px;padding:3px 7px;font-size:12px;cursor:pointer;color:rgba(0,0,0,.55);font-family:'Barlow',sans-serif;transition:background .1s;line-height:1}
.rte-btn:hover{background:rgba(0,0,0,.07);color:var(--black)}
.rte-btn.active{background:var(--teal);color:#fff}
.rte-field{min-height:90px;padding:8px 10px;font-size:12px;font-family:'Barlow',sans-serif;outline:none;line-height:1.6;color:var(--black)}
.rte-field a{color:var(--teal);text-decoration:underline}
.rte-field:empty:before{content:attr(data-placeholder);color:rgba(0,0,0,.3);pointer-events:none}
.rte-sep{width:1px;background:rgba(0,0,0,.1);margin:2px 3px;align-self:stretch}

/*  MOBILE  */
.hamburger{display:none;position:fixed;top:11px;left:12px;z-index:9001;background:transparent;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--teal);border-radius:2px;transition:all .2s}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8999}
.mob-overlay.open{display:block}
.mob-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--teal);z-index:300;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -2px 12px rgba(0,0,0,.2)}
.mob-nav-inner{display:flex;height:100%}
.mob-nb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.5);font-family:'Barlow Condensed',sans-serif;font-size:8px;letter-spacing:.5px;text-transform:uppercase;gap:2px;transition:color .15s;padding:0}
.mob-nb.active{color:var(--yellow)}
.mob-nb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:768px){
  :root{--sidebar:0px;--topbar:50px}
  /* Hamburger — above everything including modals overlay */
  .hamburger{display:flex;z-index:9100}
  #sidebar{transform:translateX(-260px);transition:transform .25s ease;width:280px!important;z-index:9000;overflow-y:auto}
  #sidebar.mob-open{transform:translateX(0)}
  #topbar{left:0;padding:0 12px 0 58px}
  .tb-title{font-size:14px;padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
  .tb-user{display:none}
  #main{margin-left:0;padding-top:var(--topbar)}
  .page{padding:12px 12px 100px}
  .srow{grid-template-columns:1fr 1fr!important}
  .pipe-col{min-width:220px}
  .tbl{min-width:480px;font-size:11px}
  .tbl td,.tbl th{padding:7px 8px}
  /* Modals — slide up from bottom */
  .mov.open{align-items:flex-end!important}
  .modal,.modal.wide,.modal.narrow{
    width:100vw!important;max-width:100vw!important;
    border-radius:16px 16px 0 0!important;
    position:fixed!important;bottom:0!important;top:auto!important;left:0!important;
    max-height:88vh!important;display:flex;flex-direction:column;
  }
  /* Modal body scrolls, header and footer stay fixed */
  .mh{flex-shrink:0}
  .mb{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .mf{
    flex-shrink:0;
    position:sticky;bottom:0;
    background:#fff;
    z-index:10;
    padding:12px 20px 28px; /* extra bottom padding for home indicator */
    border-top:1px solid rgba(0,0,0,.08);
    display:flex;gap:8px;justify-content:flex-end;
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  /* Buttons — minimum 44px touch targets */
  .btn{min-height:36px;padding:8px 14px}
  .btn-sm{min-height:34px}
  .btn-xs{min-height:28px;padding:4px 10px;font-size:10px}
  /* Form fields — bigger on mobile */
  .fi,.fs,.fta{font-size:16px!important} /* prevents iOS zoom */
  .fr,.fr.tri{grid-template-columns:1fr!important}
  .login-box{padding:28px 20px;width:95vw}
  .tgrid{grid-template-columns:1fr!important}
  .res-grid{grid-template-columns:1fr 1fr!important}
  .filter-bar{flex-wrap:wrap;gap:6px}
  .filter-bar .fs,.filter-bar .fi{flex:1;min-width:120px}
  .mob-nav{display:block}
  .sc{padding:10px 12px}
  .sv{font-size:22px}
  .sh{flex-wrap:wrap;gap:6px}
  .sh .btn{font-size:11px}
  /* Card layout improvements */
  .vid-card{padding:12px}
  .card{padding:0}
  .cb{padding:10px 12px!important}
  /* Tabs — scrollable on mobile */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px}
  .tab{white-space:nowrap;flex-shrink:0}
}
@media(max-width:400px){
  .srow{grid-template-columns:1fr!important}
  .res-grid{grid-template-columns:1fr!important}
  .tabs{gap:0}
  .tab{padding:5px 9px;font-size:11px}
  .tb-title{max-width:45vw}
}

/* ── MOBILE POLISH (v8-4) — CSS only ── */
@media(max-width:768px){
  /* Problem 1: top-bar action buttons crowding the title.
     Shrink them and let the row stay tidy. */
  #topbar{gap:6px}
  .tb-r{gap:6px;flex-shrink:0}
  .tb-r .btn,.tb-r .btn-sm{
    min-height:32px;padding:6px 10px;font-size:11px;white-space:nowrap;
  }
  .tb-title{max-width:42vw}

  /* Problem 2: stat cards cramped 2-up on mid-size phones.
     Let them auto-fit so they go 1-up when space is tight, 2-up when there's room. */
  .srow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
  .sc{padding:12px 14px}
  .sv{font-size:24px}

  /* Problem 3: bottom nav overlapping content + iOS home indicator.
     Clear the 56px nav plus the safe-area inset. */
  .page{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  .mob-nav{height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}

  /* Two top-bar buttons side by side can still be tight on the smallest phones;
     allow them to wrap under the title row gracefully rather than overflow. */
  #topbar{flex-wrap:nowrap}
}
@media(max-width:380px){
  /* Smallest phones: stack stat cards fully and trim button text room. */
  .srow{grid-template-columns:1fr!important}
  .tb-r .btn,.tb-r .btn-sm{padding:6px 8px;font-size:10px}
  .tb-title{max-width:38vw;font-size:13px}
}

/* ===== Mobile polish pass (appended; later rules override earlier ones) ===== */
@media(max-width:768px){
  /* Sidebar was translateX(-260px) but is 280px wide, leaving a 20px strip
     bleeding over every page. Hide it fully. */
  #sidebar{transform:translateX(-100%)!important}
  #sidebar.mob-open{transform:translateX(0)!important}

  /* Some list tables (e.g. Clients) sit directly in a .card, which has
     overflow:hidden, so their wider columns were clipped with no way to scroll.
     Let cards scroll horizontally on mobile so every column is reachable. */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Give scrollable tables a hint of the swipe with a little inertia room. */
  .tbl{min-width:520px}

  /* Header rows with more than one control group (e.g. the pipeline tabs plus
     action buttons) wrap cleanly instead of crowding or overflowing. */
  .sh{align-items:stretch}
  .sh > div{min-width:0}
  #pipe-tabs{flex-wrap:wrap}

  /* Modal footers that carry extra actions (Archive / Delete on the lead modal)
     wrap rather than overflow off the edge. */
  .mf{flex-wrap:wrap}
  .mf > div{flex-wrap:wrap}
}

/* Failed write notice. Coral because a lost write is a real failure, not a
   warning. Sits above the Slack toast so both can show at once. */
.write-err-toast{position:fixed;bottom:20px;left:20px;background:var(--coral);color:#fff;padding:13px 17px;border-radius:9px;font-size:12px;line-height:1.5;z-index:10000;box-shadow:0 4px 16px rgba(0,0,0,.28);animation:slideIn .3s ease;max-width:340px}
.write-err-toast strong{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
@media(max-width:640px){.write-err-toast{left:12px;right:12px;bottom:76px;max-width:none}}

/* Saved but incomplete: a column the table does not have was dropped so the
   rest of the record could be stored. Gold because it needs attention, not
   coral, which is reserved for an actual failure. */
.write-warn-toast{position:fixed;bottom:20px;left:20px;background:var(--gold);color:#fff;padding:13px 17px;border-radius:9px;font-size:12px;line-height:1.5;z-index:10000;box-shadow:0 4px 16px rgba(0,0,0,.28);animation:slideIn .3s ease;max-width:340px}
.write-warn-toast strong{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
@media(max-width:640px){.write-warn-toast{left:12px;right:12px;bottom:76px;max-width:none}}

/* Notification bell, count badge and dropdown feed. Coral badge because an
   unread item needs attention; unread rows carry a cream wash and a coral rail
   so read and unread are distinguishable without introducing a new colour. */
.notif-wrap{position:relative;display:inline-flex}
.notif-bell{background:transparent;border:none;color:var(--teal);cursor:pointer;padding:5px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;position:relative}
.notif-bell:hover{background:rgba(11,58,57,.07)}
.notif-count{position:absolute;top:-2px;right:-2px;background:var(--coral);color:#fff;border-radius:9px;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-weight:800;font-family:'Barlow Condensed',sans-serif;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-dd{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;overflow-y:auto;background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);z-index:9500}
.notif-dd-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;background:#fff;border-radius:10px 10px 0 0}
.notif-dd-head span{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}
.notif-mark-all{background:transparent;border:none;color:var(--coral);font-size:11px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif;padding:0}
.notif-mark-all:hover{text-decoration:underline}
.notif-item{padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer;display:flex;gap:9px;align-items:flex-start}
.notif-item:hover{background:rgba(11,58,57,.04)}
.notif-item.unread{background:var(--cream);border-left:3px solid var(--coral);padding-left:11px}
.notif-item-ttl{font-size:12px;font-weight:700;color:#111;line-height:1.35;margin-bottom:2px}
.notif-item-msg{font-size:11px;color:rgba(0,0,0,.55);line-height:1.4}
.notif-item-time{font-size:10px;color:rgba(0,0,0,.35);margin-top:3px}
.notif-empty{padding:26px 14px;text-align:center;font-size:12px;color:rgba(0,0,0,.35)}
@media(max-width:640px){.notif-dd{position:fixed;top:56px;left:10px;right:10px;width:auto;max-height:70vh}}

/* Transient popup when a notification arrives while the app is open. Teal, so it
   is never confused with the coral failure toast or the gold partial-save one. */
.notif-toast{position:fixed;top:66px;right:20px;background:var(--teal);color:#fff;padding:12px 16px;border-radius:9px;font-size:12px;line-height:1.5;z-index:10001;box-shadow:0 4px 16px rgba(0,0,0,.26);animation:slideIn .3s ease;max-width:320px;cursor:pointer}
.notif-toast strong{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:2px}
@media(max-width:640px){.notif-toast{left:12px;right:12px;top:auto;bottom:76px;max-width:none}}

/* Destructive actions. Outlined coral rather than solid, so a permanent delete
   never sits next to the solid coral Save button looking like the same weight of
   action. Coral is the brand's at-risk / error colour. */
.btn-danger{background:transparent;color:var(--coral);border:1.5px solid var(--coral)}
.btn-danger:hover{background:var(--coral);color:#fff}
/* Archived rows read as inactive without introducing a new colour. */
.row-archived{opacity:.55}

/* ============================================================
   SYSTEM BANNER (appended per the append-don't-overwrite rule)
   An empty page used to be indistinguishable from a failed load, so a refused
   request looked exactly like "you have no clients". These banners sit at the
   top of the workspace and say which it is.
   Coral = the app is not showing you data that exists. Gold = degraded.
   ============================================================ */
.sys-banner{padding:12px 16px;border-radius:9px;margin-bottom:14px;font-size:12.5px;line-height:1.55;color:#fff}
.sys-banner strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:3px}
.sys-banner code{background:rgba(255,255,255,.2);padding:1px 5px;border-radius:3px;font-size:11.5px}
.sys-banner-err{background:var(--coral)}
.sys-banner-warn{background:var(--gold)}

/* ============================================================
   DUE DATE CHIP
   The due date used to render in the same muted gray as the client
   name and the assignee, so the one field that decides what gets
   picked up next read as filler. Every dashboard now renders it
   through dueChip(), which colors it by how close the date is.
   Coral = past due. Gold = due today or tomorrow. Teal = still ahead.
   Text tones match the existing .b-coral / .b-gold / .b-teal badges
   so the chip reads as part of the same system.
   ============================================================ */
.due-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;line-height:1.4;white-space:nowrap;vertical-align:middle}
.due-chip::before{content:'DUE';font-size:8.5px;letter-spacing:.7px;opacity:.6}
.due-chip-bare::before{content:none}
.due-over{background:rgba(232,125,73,.18);color:#b05a28}
.due-soon{background:rgba(208,148,47,.18);color:#8a6010}
.due-ok{background:rgba(11,58,57,.09);color:var(--teal)}

/* ============================================================
   OUTREACH STATUS COLOURS
   Every status rendered in the same gray badge meant the pipeline read as one
   flat list and you had to open records to find out where anything stood.
   Colour now carries the state, following the brand rules: teal for on track,
   gold for needs attention, coral for stalled or stopped, yellow where gold is
   already doing work nearby, gray for neutral. The two end states are solid
   rather than tinted, because "won" and "stop" should not look like a step.
   ============================================================ */
.os-new      {background:rgba(0,0,0,.07);color:rgba(0,0,0,.5)}
.os-waiting  {background:rgba(228,199,0,.24);color:#7a6a00}
.os-stalled  {background:rgba(232,125,73,.18);color:#b05a28}
.os-active   {background:rgba(208,148,47,.2);color:#8a6010}
.os-booked   {background:rgba(11,58,57,.12);color:var(--teal)}
.os-won      {background:var(--teal);color:var(--cream)}
.os-closed   {background:rgba(0,0,0,.14);color:rgba(0,0,0,.55)}
.os-stop     {background:var(--coral);color:#fff}
.os-retired  {background:repeating-linear-gradient(45deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 4px,rgba(0,0,0,.1) 4px,rgba(0,0,0,.1) 8px);color:rgba(0,0,0,.5)}
/* Follow-up date sitting beside the status, coral once it is due or past. */
.fu-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-family:'Barlow Condensed',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap;background:rgba(11,58,57,.09);color:var(--teal)}
.fu-chip::before{content:'FOLLOW UP';font-size:8px;letter-spacing:.6px;opacity:.6}
.fu-due{background:rgba(232,125,73,.2);color:#b05a28}

/* ============================================================
   FORMATTED NOTES
   Task details and editor notes were single blocks of plain text. A long one
   was a wall, and a link in it could not be clicked. These are the toolbar
   above the field, and the styles for the rendered result.
   ============================================================ */
.md-bar{display:flex;gap:3px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.md-btn{border:1.5px solid rgba(0,0,0,.12);background:#fff;border-radius:5px;min-width:28px;height:26px;padding:0 7px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--teal);line-height:1}
.md-btn:hover{background:var(--cream2);border-color:rgba(11,58,57,.3)}
.md-btn.on{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.md-hint{font-size:10px;color:rgba(0,0,0,.35);margin-left:auto}
.md-preview{border:1.5px solid rgba(0,0,0,.15);border-radius:6px;padding:9px 11px;min-height:90px;background:var(--cream);font-size:13px;line-height:1.6}
/* Shared by the preview and by every read-only place a note is shown. */
.md-body{font-size:13px;line-height:1.6;word-break:break-word}
.md-body ul,.md-body ol{margin:4px 0 4px 18px}
.md-body li{margin-bottom:2px}
.md-body strong{font-weight:700}
.md-body a{color:var(--teal);text-decoration:underline}
.md-body code{background:rgba(0,0,0,.06);padding:1px 4px;border-radius:3px;font-size:12px}
.md-body div{margin-bottom:2px}
.md-body .md-sp{height:6px}
/* A long note must not stretch a card out of shape. Scrolls in place instead. */
.md-clamp{max-height:120px;overflow-y:auto}
/* Comments borrow the markdown styling but keep their own smaller size. */
.ctx.md-body{font-size:11px;line-height:1.5}
.ctx.md-body code{font-size:10.5px}

/* ============================================================
   VIDEO JOB SCOPE
   Five collapsible sections replacing the flat chip row. A collapsed section
   still states what is selected inside it, so the whole scope is readable
   without opening anything.
   ============================================================ */
.vs-sec{border:1.5px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:8px;background:#fff;overflow:hidden}
.vs-sec.vs-bad{border-color:var(--coral)}
.vs-hd{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;user-select:none}
.vs-hd:hover{background:var(--cream)}
.vs-arw{font-size:10px;color:rgba(0,0,0,.35);transition:transform .12s;flex-shrink:0}
.vs-sec.open .vs-arw{transform:rotate(90deg)}
.vs-ttl{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#000;flex-shrink:0}
.vs-req{color:var(--coral);margin-left:-5px}
.vs-sum{font-size:11px;color:rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:right}
.vs-sum.none{color:rgba(0,0,0,.28);font-style:italic}
.vs-bd{padding:2px 11px 11px;display:none;flex-wrap:wrap;gap:6px}
.vs-sec.open .vs-bd{display:flex}
/* Chips. Black fill when on, so selection reads at a glance and colour is
   reserved for video type. No teal in this panel at all, by request. */
.vs-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(0,0,0,.13);background:#fff;border-radius:20px;padding:5px 12px;cursor:pointer;font-size:12px;line-height:1.2;transition:background .1s,border-color .1s}
.vs-chip:hover{border-color:rgba(0,0,0,.35);background:var(--cream)}
.vs-chip.on{background:#000;border-color:#000;color:var(--cream);font-weight:600}
.vs-chip.on:hover{background:#2b2b2b}
/* Number stepper, only on a selected counted deliverable. */
.vs-cnt{display:inline-flex;align-items:center;gap:0;margin-left:2px}
.vs-cnt button{width:19px;height:19px;border:none;border-radius:4px;background:rgba(255,255,255,.22);color:var(--cream);font-size:13px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.vs-cnt button:hover{background:rgba(255,255,255,.38)}
.vs-cnt span{min-width:19px;text-align:center;font-weight:700;font-size:12px}
/* ============================================================
   VIDEO TYPE COLOURS  ·  NO TEAL
   Ona: "I don't want the chip to have any form of teal, period." The app is
   teal end to end and these badges were adding to it rather than cutting
   through it.
   Eight warm shades, every one a lightness or saturation move on brand coral,
   gold or yellow. Nothing from a new hue family, nothing teal. Chosen by
   measuring rather than by eye: the set was searched for maximum perceptual
   separation, with the three Ona asked to carry cream text constrained to
   fills dark enough to do it.
     minimum pairwise dE 20.6   (>20 reads as clearly different at badge size)
     worst text contrast 6.09:1 (every badge clears AA, none is borderline)
   Talking Head, Testimonial and Ad / Paid Social carry cream as asked. The
   rest take black, which is the stronger read on a light fill.
   Same class drives the card badge and the selected chip, so the modal and the
   dashboard agree.
   ============================================================ */
.bdg.vt-podcast,    .vs-chip.on.vt-podcast    {background:#E4C700; border-color:#E4C700; color:#000}          /* brand yellow  */
.bdg.vt-talking,    .vs-chip.on.vt-talking    {background:#5F5200; border-color:#5F5200; color:var(--cream)}  /* deep olive    */
.bdg.vt-testimonial,.vs-chip.on.vt-testimonial{background:#8F3A18; border-color:#8F3A18; color:var(--cream)}  /* terracotta    */
.bdg.vt-ad,         .vs-chip.on.vt-ad         {background:#5E2A12; border-color:#5E2A12; color:var(--cream)}  /* deep umber    */
.bdg.vt-event,      .vs-chip.on.vt-event      {background:#FFE873; border-color:#FFE873; color:#000}          /* pale yellow   */
.bdg.vt-tour,       .vs-chip.on.vt-tour       {background:#F0B968; border-color:#F0B968; color:#000}          /* light gold    */
.bdg.vt-explainer,  .vs-chip.on.vt-explainer  {background:#E87D49; border-color:#E87D49; color:#000}          /* brand coral   */
.bdg.vt-sizzle,     .vs-chip.on.vt-sizzle     {background:#9E8A00; border-color:#9E8A00; color:#000}          /* olive gold    */
.vs-err{font-size:11px;color:var(--coral);font-weight:600;padding:0 11px 9px;display:none}
.vs-sec.vs-bad .vs-err{display:block}
.vs-empty{font-size:11.5px;color:rgba(0,0,0,.35);font-style:italic;padding:2px 0}


/* ============================================================
   MY WEEK — personal weekly priorities (js/page-myweek.js)
   Appended, never merged into the rules above. Almost everything on the page
   reuses .card, .tbl, .btn, .sc, .bdg and .es; this is only what those did not
   already cover. No green: Done is dark teal.
   ============================================================ */
.mw-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mw-hint{font-size:11px;color:rgba(0,0,0,.4);margin-top:6px;line-height:1.5}
.mw-hint code{background:var(--cream);padding:1px 5px;border-radius:4px;font-size:10.5px}
.mw-tbl td{vertical-align:middle}
.mw-tbl .fi,.mw-tbl .fs{font-size:12px;padding:5px 8px}
/* Two classes, so these beat the single-class .fs background and the status
   colour actually shows on the dropdown. */
.mw-status.b-teal {background:rgba(11,58,57,.1); color:var(--teal);      border-color:rgba(11,58,57,.25)}
.mw-status.b-gold {background:rgba(208,148,47,.15);color:#8a6010;        border-color:rgba(208,148,47,.32)}
.mw-status.b-coral{background:rgba(232,125,73,.15);color:#b05a28;        border-color:rgba(232,125,73,.32)}
.mw-status.b-gray {background:rgba(0,0,0,.05);     color:rgba(0,0,0,.5)}
/* A finished item stays legible but stops competing for attention. */
.mw-tbl tr.mw-done td{opacity:.55}
.mw-ord{white-space:nowrap;padding-right:0}
.mw-arr{display:block;width:20px;height:15px;line-height:13px;padding:0;margin:0 auto;border:none;background:none;cursor:pointer;color:rgba(0,0,0,.35);font-size:9px}
.mw-arr:hover:not(:disabled){color:var(--teal)}
.mw-arr:disabled{opacity:.2;cursor:default}
.mw-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 0 4px;border-top:1px solid rgba(0,0,0,.05);margin-top:6px}
@media(max-width:760px){
  .mw-add{flex-direction:column;align-items:stretch}
  .mw-add .btn{width:100%}
  .mw-nav .btn{flex:1;justify-content:center}
}
/* My Week: the item box is the widest thing in the row and should not be
   squeezed to nothing by the two dropdowns beside it. */
.mw-tbl .mw-item{width:100%;min-width:180px}

/* Settings menu in the top bar (Activity Log, Delivery Log, Team Management).
   Reuses the notification dropdown shell; these are just the rows inside it. */
.set-item{padding:10px 14px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(0,0,0,.05)}
.set-item:last-child{border-bottom:none}
.set-item:hover{background:rgba(11,58,57,.05);color:var(--teal);font-weight:600}

/* Outreach: sortable column headers. */
.out-sortable{cursor:pointer;user-select:none}
.out-sortable:hover{color:var(--teal)}
.out-sortable::after{content:' \2195';opacity:.3;font-size:9px}

/* ============================================================
   CLICKABLE LINKS IN FORM FIELDS
   A URL in a text input cannot be clicked, so every asset, footage and
   submission link had to be copied out by hand. wireLinkOpeners() adds these
   from openM(). Sits under the field rather than beside it, so nothing in the
   existing two-column form grid has to move.
   ============================================================ */
.fld-open{
  display:inline-flex;align-items:center;gap:3px;margin-top:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--teal);
  text-decoration:none;border:1.5px solid rgba(11,58,57,.25);
  border-radius:5px;padding:2px 7px;background:rgba(11,58,57,.04);
  transition:background .12s,border-color .12s;
}
.fld-open:hover{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.note-links{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px}
.note-links-lbl{
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:rgba(0,0,0,.35);margin-right:2px;
}
.note-links a{
  display:inline-flex;align-items:center;gap:3px;font-size:10.5px;
  color:var(--teal);text-decoration:none;border:1.5px solid rgba(11,58,57,.2);
  border-radius:20px;padding:2px 9px;background:rgba(11,58,57,.04);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.note-links a:hover{background:var(--teal);border-color:var(--teal);color:var(--cream)}

/* Performance Insights — appended 2026-08-18, per architectural rule 9.
   The two-up chart rows go single column on a phone; side by side they were
   160px wide and every bar label collided. */
@media(max-width:768px){
  .pi-grid{grid-template-columns:1fr!important}
}
/* Printing a report should give the report, not the app around it. */
@media print{
  #sidebar,#topbar,.mob-nav,.hamburger,#pi-controls,.tabs{display:none!important}
  #main{margin-left:0!important;padding-top:0!important}
  .card{break-inside:avoid;box-shadow:none;border:1px solid rgba(0,0,0,.12)}
}

/* Revenue Log cards — appended 2026-08-19, per architectural rule 9.
   Ona asked for the four cards to be told apart by colour. They are NOT given
   coral, gold and yellow: those three carry status meaning everywhere else in
   this system (at risk, needs attention, warning), so a revenue figure wearing
   coral would read as a problem rather than as a number. Four steps of the
   brand teal instead, darkest for the total, which distinguishes them without
   saying anything that is not true. Same reasoning as the expense donut. */
.sc.rev1{border-top-color:#83C3C0}
.sc.rev2{border-top-color:#4FA39F}
.sc.rev3{border-top-color:#2A817D}
.sc.rev4{border-top-color:#0B3A39}

/* CEO Dashboard — appended 2026-08-19, per architectural rule 9.
   The two grid rows collapse rather than squeezing four cards into a phone
   width, where the funnel and the gauge become unreadable. */
@media(max-width:1100px){
  .ceo-row2{grid-template-columns:1fr!important}
  .ceo-row3{grid-template-columns:1fr 1fr!important}
}
@media(max-width:768px){
  .ceo-row3{grid-template-columns:1fr!important}
}

/* HERO STAT ROW — appended 2026-08-19, per architectural rule 9.
   Started as a CEO-only class. Ona then asked for the same treatment on the Ops
   Dashboard, Due This Week, Revenue Overview, Revenue Log and Client MRR:
   "I want it to be, like, you can really see it. It catches your attention, so
   your eyes go directly to it versus you kinda miss it."
   So it is one class now rather than five copies of the same numbers.

   auto-fit, not a fixed four columns. Four tiles stretch to fill the row; a
   row of six wraps rather than shrinking every card to fit, which is the whole
   point of making them big. */
.srow.hero{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:14px}
.srow.hero .sc{padding:20px 22px;border-top-width:5px}
.srow.hero .sl{font-size:10px;letter-spacing:2.2px;margin-bottom:6px}
.srow.hero .sv{font-size:40px}
.srow.hero .ss{font-size:11px;margin-top:6px}
@media(max-width:600px){.srow.hero{grid-template-columns:1fr!important}.srow.hero .sv{font-size:34px}}

/* RICH TEXT BODIES — appended 2026-08-19, per architectural rule 9.
   Ona: "if you look at the agenda and the bullet points and the numbering,
   everything is so close to the edge."
   Agenda and notes were rendered into a bare div, so the .md-body list rule
   further up never applied to them and the bullets sat against the edge of the
   card with the marker half outside it. This is that rule, plus the padding a
   list needs to have somewhere to put its marker. */
.rte-body ul,.rte-body ol{margin:6px 0 6px 0;padding-left:24px}
.rte-body li{margin-bottom:4px}
.rte-body p{margin:0 0 8px}
.rte-body p:last-child,.rte-body ul:last-child,.rte-body ol:last-child{margin-bottom:0}
.rte-body h1,.rte-body h2,.rte-body h3{font-family:'Barlow Condensed',sans-serif;margin:10px 0 6px;line-height:1.25}