/* Dollarmoovies HQ: agency back end screens. Builds on app.css tokens. */
:root{--hp-stoked:#30A46C;--hp-happy:#3E63DD;--hp-okay:#E5A000;--hp-unhappy:#E5484D}
@media (prefers-color-scheme:dark){:root{--hp-stoked:#4CC38A;--hp-happy:#7B9BFF;--hp-okay:#FFC928;--hp-unhappy:#FF6369}}

.hp{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.hp-stoked{background:var(--hp-stoked)} .hp-happy{background:var(--hp-happy)} .hp-okay{background:var(--hp-okay)} .hp-unhappy{background:var(--hp-unhappy)}
.late{color:var(--stop);font-weight:600}
.happy-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font:700 20px var(--mono)}
.happy-row span{display:inline-flex;align-items:center;gap:6px}
.back{color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}
.back:hover{color:var(--ink)}

/* Needs attention */
.attn{overflow:hidden}
.attn-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line);text-decoration:none}
.attn-row:first-child{border-top:0}
.attn-row:hover{background:var(--raise)}
.attn-row .arrow{margin-left:auto;color:var(--muted)}

/* Pipeline board */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.col{flex:1 0 230px;background:var(--raise);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-height:120px;scroll-snap-align:start}
.col header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.col header .n{font-family:var(--mono);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--ink)}
.col-body{display:grid;gap:8px;padding:0 8px 8px;align-content:start}
.col-empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 0}
.pcard{display:grid;gap:4px;padding:11px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;box-shadow:0 1px 2px var(--shadow);transition:border-color .15s,transform .06s}
.pcard:hover{border-color:var(--brand)}
.pcard:active{transform:scale(.99)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pc-top strong{font-size:15px;line-height:1.3}
.pc-top .hp{margin-top:5px}
.pc-contact{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-meta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}
.pc-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:4px}
.pc-bar i{display:block;height:100%;background:var(--brand)}

/* One client */
.client-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.head-right{display:grid;gap:8px;justify-items:end}
@media (max-width:720px){.head-right{justify-items:start}}
.seg button.hs-stoked[aria-pressed="true"]{background:var(--hp-stoked);border-color:var(--hp-stoked);color:#fff}
.seg button.hs-happy[aria-pressed="true"]{background:var(--hp-happy);border-color:var(--hp-happy);color:#fff}
.seg button.hs-okay[aria-pressed="true"]{background:var(--hp-okay);border-color:var(--hp-okay);color:#0E0E10}
.seg button.hs-unhappy[aria-pressed="true"]{background:var(--hp-unhappy);border-color:var(--hp-unhappy);color:#fff}

.stepper{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.stepper li{flex:1 0 auto}
.stepper button{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px 6px 6px;font:600 13px var(--body);color:var(--muted);cursor:pointer;white-space:nowrap}
.stepper .dotn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--raise);font:700 11px var(--mono);flex:none}
.stepper button.past{color:var(--ink)}
.stepper button.past .dotn{background:var(--go-soft);color:var(--go)}
.stepper button.now{background:var(--brand);border-color:var(--brand);color:#0E0E10}
.stepper button.now .dotn{background:#0E0E10;color:var(--brand)}
.stepper button:hover:not(.now){border-color:var(--ink)}

.hq-client .tabs a{border:0;background:none;font-weight:600;font-size:14px;color:var(--muted);padding:9px 14px;border-radius:10px;white-space:nowrap;text-decoration:none}
.hq-client .tabs a[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}

.ov-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.ov-grid{grid-template-columns:1fr}}
.now-card{display:grid;gap:12px;border-color:var(--brand)}
.now-card .list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qlinks{display:flex;flex-wrap:wrap;gap:8px}
.qlinks .chip{font-size:13px;padding:6px 11px}
.roi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.roi>div{background:var(--raise);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.roi .l{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.roi b{font:700 26px var(--mono)}
.roi b.good{color:var(--go)}

/* Content studio */
.studio-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.studio{padding:16px;display:grid;gap:10px}
textarea.doc{min-height:140px;font:15px/1.6 var(--body);white-space:pre-wrap}
textarea.doc.writing{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.gen-row{display:flex;gap:8px;flex-wrap:wrap}
.gen-row .input:first-child{flex:1 1 260px}
.gen-row .hist{width:auto;flex:0 1 200px}

/* Agreement */
.agr-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.agr-grid{grid-template-columns:1fr}}
.agreement{padding:40px 44px;font:14.5px/1.65 Georgia,"Times New Roman",serif;color:#111;background:#fff}
.agreement .agr-title{font:700 18px/1.3 Georgia,serif;text-align:center;letter-spacing:.02em;color:#111;text-transform:none;margin:0 0 18px}
.agreement h4{font:700 14px Georgia,serif;margin:18px 0 6px}
.agreement p{margin:0 0 8px}
.agreement p.bul{padding-left:18px;position:relative}
.agreement p.bul::before{content:"•";position:absolute;left:4px}
.agreement .sig{display:grid;gap:14px;margin-top:26px}
.agreement .sig div{display:flex;align-items:flex-end;gap:10px}
.agreement .sig span{font-weight:700;white-space:nowrap;min-width:140px}
.agreement .sig i{flex:1;border-bottom:1px solid #111;height:18px}
@media (max-width:560px){.agreement{padding:22px 18px}}
.howto-steps{margin:0;padding-left:20px;display:grid;gap:6px}
.howto-steps code{font-family:var(--mono);font-size:12.5px;background:var(--raise);padding:1px 5px;border-radius:5px}

@media print{
  body *{visibility:hidden}
  .printable,.printable *{visibility:visible}
  .printable{position:absolute;inset:0 auto auto 0;width:100%;border:0!important;box-shadow:none!important;padding:0!important}
  .noprint{display:none!important}
}

/* Meetings, files, settings */
.meeting p{margin:8px 0 0;white-space:pre-wrap}
.meeting .note{margin-top:8px}
.tree{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.tree li{display:flex;flex-direction:column;padding:8px 12px;background:var(--raise);border-radius:10px}
.pill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.pill.ok{background:var(--go-soft);color:var(--go)} .pill.off{background:var(--stop-soft);color:var(--stop)}
ul.booked li button{margin-top:4px}
.col.is-empty{flex:0 0 150px}
.col.is-empty header span:first-child{white-space:normal}

/* =====================================================================
   CLIENT HQ AREA: the Dollarmoovies website look. Warm black, cream, movie-ticket red,
   Cal Sans headlines. Always dark, so it never feels like Swoop Team.
   ===================================================================== */
body[data-area="hq"],body[data-area="home"]{
  --ground:#0c0a09;--surface:#161311;--raise:#1e1a17;--ink:#f5eee2;--muted:#a89f93;--line:rgba(245,238,226,.12);
  --edge:rgba(245,238,226,.12);--shadow:rgba(0,0,0,.55);
  --brand:#e0282f;--brand-ink:#ff7a7e;--brand-soft:rgba(224,40,47,.16);--butter:#ffcf4a;
  --go:#4CC38A;--go-soft:rgba(76,195,138,.14);--stop:#ff6b6f;--stop-soft:rgba(224,40,47,.16);
  --display:"Cal Sans","Plus Jakarta Sans",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,sans-serif;
  --bar:#0c0a09;color-scheme:dark;
  background:var(--ground);color:var(--ink);font-family:var(--body);
}
body[data-area="hq"] h1,body[data-area="hq"] h3,body[data-area="home"] h1,body[data-area="home"] h2{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
body[data-area="hq"] h1{font-size:clamp(30px,4.4vw,44px)}
body[data-area="hq"] .top{background:rgba(12,10,9,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body[data-area="hq"] .top::after{display:none}
body[data-area="hq"] .tabs{top:calc(58px + env(safe-area-inset-top,0px));background:var(--ground)}
body[data-area="hq"] .hq-logo{gap:10px;font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink)}
body[data-area="hq"] .hq-logo img{width:52px;height:38px;object-fit:contain;margin-block:0}
body[data-area="hq"] .hq-logo b{font:700 11px var(--body);letter-spacing:.12em;background:var(--brand);color:#fff;border-radius:6px;padding:3px 6px;margin-left:8px;vertical-align:3px}
body[data-area="hq"] .nav a{color:var(--muted)}
body[data-area="hq"] .nav a.on{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}
body[data-area="hq"] .btn{background:var(--ink);color:#0c0a09;border-radius:99px}
body[data-area="hq"] .btn.brand{background:var(--brand);color:#fff;box-shadow:0 10px 30px -12px rgba(224,40,47,.8)}
body[data-area="hq"] .btn.ghost,body[data-area="hq"] .btn.danger{background:transparent;color:var(--ink);border:1px solid var(--line)}
body[data-area="hq"] .btn.danger{color:var(--stop)}
body[data-area="hq"] .card{background:var(--surface);border:1px solid var(--line);box-shadow:none;border-radius:18px}
body[data-area="hq"] .tile.hot{border-color:var(--brand);background:radial-gradient(120% 140% at 100% 0%,rgba(224,40,47,.22),transparent 60%),var(--surface)}
body[data-area="hq"] .input{background:var(--raise);border-color:var(--line)}
body[data-area="hq"] .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
body[data-area="hq"] .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
body[data-area="hq"] .stepper button.now{background:var(--brand);border-color:var(--brand);color:#fff}
body[data-area="hq"] .stepper button.now .dotn{background:#fff;color:var(--brand)}
body[data-area="hq"] .pc-bar i,body[data-area="hq"] .bar i{background:var(--butter)}
body[data-area="hq"] .check input:checked{background:var(--brand);border-color:var(--brand)}
body[data-area="hq"] .check input:checked::after{border-color:#fff}
body[data-area="hq"] .now-card{border-color:rgba(224,40,47,.55)}
body[data-area="hq"] .col{background:#120f0d}
body[data-area="hq"] .pcard:hover{border-color:var(--brand)}
body[data-area="hq"] #toast{background:var(--ink);color:#0c0a09}
body[data-area="hq"] .who button{border-color:var(--line);border-radius:99px}
body[data-area="hq"] .modal .card{background:var(--surface)}

/* Home button (admins, both areas) */
.home-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;opacity:.75;text-decoration:none;flex:none}
.home-btn:hover{opacity:1;background:rgba(255,255,255,.08)}

/* =====================================================================
   HOME: two doors
   ===================================================================== */
body[data-area="home"]{background:
  radial-gradient(900px 500px at 12% -10%,rgba(224,40,47,.22),transparent 60%),
  radial-gradient(800px 500px at 100% 110%,rgba(255,196,0,.14),transparent 60%),var(--ground)}
.home{max-width:1120px;margin:0 auto;padding:18px 16px 60px;min-height:100vh;display:flex;flex-direction:column}
.home-top{display:flex;align-items:center;gap:10px}
.home-mark{font:600 22px var(--display);letter-spacing:-.01em}
.home-who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.home-who a{text-decoration:none}
.home-who button{background:none;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:6px 12px;font:600 13px var(--body);cursor:pointer}
.home-hello{margin:clamp(28px,7vh,72px) 0 26px}
.home-hello h1{font-size:clamp(40px,7vw,76px);line-height:1;margin:0}
.home-hello p{color:var(--muted);font-size:18px;margin:10px 0 0}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;flex:1;align-content:start}
@media (max-width:980px){.doors{grid-template-columns:1fr}}
.door{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;text-decoration:none;min-height:420px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s}
.door:hover{transform:translateY(-4px)}
.door:active{transform:translateY(-1px) scale(.995)}
.door-art{height:210px;display:grid;place-items:center;position:relative;overflow:hidden}
.door-art img{max-height:180px;width:auto;position:relative;z-index:1;transition:transform .3s}
.door:hover .door-art img{transform:scale(1.05) rotate(-2deg)}
.door-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.door-kicker{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase}
.door h2{font:600 clamp(28px,3.4vw,38px)/1.05 var(--display);margin:0;text-transform:none;letter-spacing:-.01em;color:inherit}
.door p{margin:0;opacity:.8;font-size:15.5px;line-height:1.5}
.door-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;min-height:32px}
.door-stats span{font-size:13px;padding:6px 10px;border-radius:99px}
.door-stats b{font-family:var(--mono);font-size:14px;margin-right:3px}
.door-go{margin-top:auto;padding-top:14px;font:700 16px var(--body);display:flex;align-items:center;gap:8px}
.door-go b{transition:transform .18s}
.door:hover .door-go b{transform:translateX(5px)}
/* Both doors: plain white, the eagle does the talking. Red accents for HQ, gold for Swoop. */
.door{background:#fff;color:#0c0a09;box-shadow:0 30px 70px -34px rgba(0,0,0,.8)}
.door-art{background:#fff}
.door-art img{max-height:190px}
.door-stats span{background:#f3f1ee}
.door-hq .door-kicker,.door-hq .door-go{color:#e0282f}
.door-hq .door-stats .warn-t{background:#e0282f;color:#fff}
.door-swoop .door-kicker,.door-swoop .door-go{color:#9A6B00}
.door-content .door-kicker,.door-content .door-go{color:#7c3aed}
@media (prefers-reduced-motion:reduce){.door,.door-art img,.door-go b{transition:none}}

/* Home: Needs you today (src/today.ts) */
.today{background:rgba(22,19,17,.85);border:1px solid var(--line);border-radius:22px;padding:16px 18px 10px;margin:0 0 22px}
.today-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.today-head h2{font-size:20px;margin:0}
.td-row{display:grid;grid-template-columns:34px minmax(120px,220px) 1fr;align-items:center;gap:12px;padding:9px 6px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:10px}
.td-list .td-row:first-child{border-top:0}
.td-row:hover{background:var(--raise)}
.td-logo{width:34px;height:34px;border-radius:50%;background:var(--c,#3a322c);display:grid;place-items:center;overflow:hidden;font:700 14px var(--body);color:#fff}
.td-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.td-va{background:#5c4a1a;color:var(--butter)}
.td-name{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-items{display:flex;flex-wrap:wrap;gap:6px}
.td-items em{font-style:normal;font-size:13px;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px}
.td-items em::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.td-red{background:var(--stop-soft);color:var(--stop)}
.td-yellow{background:rgba(255,207,74,.12);color:var(--butter)}
.td-clear{margin:4px 0 8px;color:var(--go);font-weight:600}
.td-toggle{background:none;border:0;color:var(--muted);font:600 13px var(--body);padding:8px 6px;cursor:pointer}
.td-toggle:hover{color:var(--ink)}
@media (max-width:640px){.td-row{grid-template-columns:34px 1fr}.td-items{grid-column:1/-1}}

/* Clients table (like the Client Happiness Tracker) */
.ftiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:900px){.ftiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.ftiles{grid-template-columns:repeat(2,1fr)}}
.ftile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;font:inherit}
.ftile .l{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ftile .v{font:700 28px/1.1 var(--mono)}
.ftile:hover{border-color:var(--ink)}
.ftile.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.ftile.ft-late .v{color:var(--stop)}
.ctable-wrap{padding:0}
.ctable td{vertical-align:top;padding:12px 14px}
.ctable td a{text-decoration:none}
.ctable td a:hover strong{text-decoration:underline}
.ctable tbody tr{cursor:pointer;box-shadow:inset 3px 0 0 transparent}
.ctable tbody tr:hover{background:var(--raise)}
.ctable tr.row-stoked{box-shadow:inset 3px 0 0 var(--hp-stoked)} .ctable tr.row-happy{box-shadow:inset 3px 0 0 var(--hp-happy)}
.ctable tr.row-okay{box-shadow:inset 3px 0 0 var(--hp-okay)} .ctable tr.row-unhappy{box-shadow:inset 3px 0 0 var(--hp-unhappy)}
.ctable td.notes{white-space:normal;min-width:180px;max-width:320px;color:var(--muted)}
.ctable td.late{color:var(--stop);font-weight:600}
.spill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sp-stoked{background:rgba(76,195,138,.16);color:var(--hp-stoked)} .sp-happy{background:rgba(123,155,255,.16);color:var(--hp-happy)}
.sp-okay{background:rgba(255,201,40,.16);color:var(--hp-okay)} .sp-unhappy{background:rgba(255,99,105,.16);color:var(--hp-unhappy)}
.sortby{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.sortby select{width:auto;padding:8px 10px}
.sorth{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.sorth:hover,.sorth.on{color:var(--ink)}
.sorth i{font-style:normal;color:var(--brand)}

/* Editable clients table */
.ctable tbody tr{cursor:default}
.ctable td{padding:8px 10px;vertical-align:middle}
.c-client{min-width:210px}
.c-client .open{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);padding:2px 4px}
.c-client .open .go{opacity:0;color:var(--brand);transition:opacity .15s,transform .15s}
.c-client .open:hover .go,.c-client .open:focus-visible .go{opacity:1;transform:translateX(2px)}
.cell{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:8px;padding:5px 6px;width:100%;min-width:0}
.cell:hover{border-color:var(--line);background:var(--raise)}
.cell:focus{outline:none;border-color:var(--brand);background:var(--raise);box-shadow:0 0 0 3px var(--brand-soft)}
.cell.sm{font-size:13px;color:var(--muted)}
.cell.num{text-align:right;font-family:var(--mono);max-width:110px;margin-left:auto;display:block}
.cell[type=date]{min-width:128px;color-scheme:dark}
textarea.cell{resize:none;overflow:hidden;min-height:30px;line-height:1.4;min-width:200px;color:var(--muted)}
textarea.cell:focus{color:var(--ink)}
.lc{display:flex;align-items:center;gap:4px}
.today{font:600 11px var(--body);border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;padding:3px 8px;cursor:pointer;white-space:nowrap}
.today:hover{color:var(--ink);border-color:var(--ink)}
td.late .cell[type=date]{color:var(--stop);font-weight:600}

/* Colored dropdown chips, same colors as the Google Sheet */
.chip-sel{appearance:none;-webkit-appearance:none;cursor:pointer;font-size:13px;font-weight:600;border-radius:99px;padding:4px 26px 4px 11px;width:auto;min-width:0;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;border:0}
.chip-sel:hover,.chip-sel:focus{border:0}
.chip-sel option{background:#fff;color:#111}
.st-stoked{background-color:#93c47d;color:#1f3a14} .st-happy{background-color:#d9ead3;color:#274e13}
.st-okay{background-color:#fff2cc;color:#7f6000} .st-unhappy{background-color:#f4cccc;color:#990000}
.sg-gray{background-color:#e8eaed;color:#3c4043} .sg-red{background-color:#fad2cf;color:#a50e0e}
.sg-orange{background-color:#ffd8b8;color:#8a3b00} .sg-yellow{background-color:#fde9a8;color:#7a5a00}
.sg-lightgreen{background-color:#d4edbc;color:#2d6a1c} .sg-purple{background-color:#e6d8f7;color:#5b2b8c}
.sg-green{background-color:#6ee85a;color:#0d4a06}
body[data-area="hq"] main{max-width:1320px}
.ctable td.n{white-space:nowrap}
.ctable td.n .dollar{color:var(--muted);font-family:var(--mono);margin-right:2px}
.ctable td.n .cell.num{display:inline-block;width:90px}

/* Clients: one big button per business */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.ctile{display:flex;flex-direction:column;gap:8px;padding:14px 14px 16px;border-radius:22px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);
  transition:transform .15s cubic-bezier(.2,.9,.3,1.2),border-color .15s,box-shadow .15s}
.ctile[hidden]{display:none}
.ctile:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 24px 50px -30px var(--c)}
.ctile:active{transform:translateY(-1px)}
.ct-logo{position:relative;aspect-ratio:4/3;border-radius:14px;background:#fff;display:grid;place-items:center;overflow:hidden}
.ct-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:18px;box-sizing:border-box}
.ct-logo.none{background:var(--c);color:#fff;font:600 64px/1 var(--display);text-shadow:0 2px 6px rgba(0,0,0,.3)}
.ct-name{font:600 19px/1.2 var(--display);margin-top:6px;overflow-wrap:anywhere;text-align:center}
.ct-sub{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:13px}
@media (max-width:480px){.cgrid{grid-template-columns:repeat(2,1fr);gap:10px}.ct-name{font-size:16px}}
@media (prefers-reduced-motion:reduce){.ctile{transition:none}}

/* Client landing: three big buttons */
.crumbs{display:flex;align-items:center;gap:10px}
.crumb-now{color:var(--muted);font-size:14px}
.crumb-now::before{content:"/";margin-right:10px;opacity:.5}
.bigbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.bigbtns{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.bigbtns{grid-template-columns:1fr}}
.bigbtn{display:flex;flex-direction:column;gap:10px;padding:26px 24px;min-height:230px;border-radius:22px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);
  transition:transform .15s cubic-bezier(.2,.9,.3,1.2),border-color .15s,box-shadow .15s}
.bigbtn:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 24px 50px -30px rgba(224,40,47,.7)}
.bigbtn:active{transform:translateY(-1px)}
.bb-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.bb-links .bb-icon{background:rgba(255,207,74,.14);color:var(--butter)}
.bb-overview .bb-icon{background:rgba(123,155,255,.14);color:#9fb4ff}
.bb-portal .bb-icon{background:rgba(76,195,138,.14);color:#7fdcae}
.bb-ads .bb-icon{background:rgba(255,170,60,.14);color:#ffc370}
.bb-videos .bb-icon{background:rgba(168,120,255,.14);color:#c4a8ff}
.bb-title{font:600 28px/1.1 var(--display);margin-top:auto}
.bb-sub{color:var(--muted);font-size:15px}
.bb-sub b{color:var(--ink);font-weight:600}
.bb-dots{display:flex;gap:5px;margin-top:4px}
.bb-dots i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.bb-dots i.d-past{background:var(--butter)}
.bb-dots i.d-now{background:var(--brand)}
.bb-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:24px}
.bb-chips em{font-style:normal;font-size:12px;padding:3px 9px;border-radius:99px;background:var(--raise);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bigbtn{transition:none}}

/* Journey stepper as links */
.stepper a{width:100%;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 12px 6px 6px;font:600 13px var(--body);color:var(--muted);text-decoration:none;white-space:nowrap}
.stepper a .dotn{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--raise);font:700 11px var(--mono);flex:none}
.stepper a.past{color:var(--ink)}
.stepper a.past .dotn{background:var(--go-soft);color:var(--go)}
.stepper a.now{border-color:var(--brand);color:var(--ink)}
.stepper a.now .dotn{background:var(--brand);color:#fff}
.stepper a.viewing{background:var(--brand);border-color:var(--brand);color:#fff}
.stepper a.viewing .dotn{background:#fff;color:var(--brand)}
.stepper a:hover:not(.viewing){border-color:var(--ink)}
.tool-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.head-right .chip-sel{font-size:14px;padding:6px 28px 6px 13px}

/* Client brand theming */
body[data-area="hq"] .btn.brand{color:var(--on-brand,#fff);box-shadow:0 10px 30px -12px var(--brand-glow,rgba(224,40,47,.8))}
body[data-area="hq"] .stepper a.viewing{color:var(--on-brand,#fff)}
body[data-area="hq"] .stepper a.viewing .dotn{color:var(--brand)}
body[data-area="hq"] .stepper a.now .dotn{color:var(--on-brand,#fff)}
body[data-area="hq"] .check input:checked::after{border-color:var(--on-brand,#fff)}
body[data-area="hq"].branded{background:radial-gradient(1100px 380px at 20% -120px,var(--brand-glow),transparent 70%),var(--ground)}
body.branded .now-card{border-color:var(--brand)}
body.branded .bb-journey .bb-icon{background:var(--brand-soft);color:var(--brand-ink)}
.c-title{display:flex;align-items:center;gap:16px}
.c-logo{width:72px;height:72px;border-radius:18px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 0 0 3px var(--brand-soft)}
.c-logo img{max-width:86%;max-height:86%;object-fit:contain}
@media (max-width:560px){.c-logo{width:52px;height:52px;border-radius:14px}}
.c-client .cc{display:flex;align-items:center;gap:12px}
.c-client .cc-txt{min-width:0;flex:1}
.tlogo{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.tlogo img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.tlogo.none{color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bdot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.brand-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.logo-drop{width:120px;height:120px;border-radius:18px;background:#fff;display:grid;place-items:center;cursor:pointer;overflow:hidden;border:2px dashed transparent;flex:none}
.logo-drop:hover{border-color:var(--brand)}
.logo-drop img{max-width:88%;max-height:88%;object-fit:contain}
.logo-drop span{color:#6b6b6b;font-weight:600;font-size:13px}
.color-f{display:flex;align-items:center;gap:10px;cursor:pointer}
.color-f input{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;border-radius:12px}
.color-f input::-webkit-color-swatch-wrapper{padding:0}
.color-f input::-webkit-color-swatch{border:2px solid var(--line);border-radius:12px}
.color-f span{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.color-f b{color:var(--ink);font-size:14px}
body[data-area="hq"] .hq-logo b{background:#e0282f;color:#fff}
body.branded .hq-client .client-head{padding:20px 22px;border-radius:24px;border:1px solid var(--brand-soft);
  background:linear-gradient(115deg,var(--brand-soft) 0%,rgba(0,0,0,0) 65%),var(--surface)}
body.branded .bigbtn:hover{border-color:var(--brand);box-shadow:0 24px 50px -30px var(--brand)}
body.branded .bb-dots i.d-past{background:var(--brand);opacity:.55}
body.branded .bb-dots i.d-now{background:var(--brand)}
body.branded .tile.hot,body.branded .ftile.on{border-color:var(--brand)}

/* VA team card */
.swoop-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
@media (max-width:560px){.swoop-stats{grid-template-columns:1fr}}
.swoop-stats div{background:var(--raise);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.swoop-stats b{font-size:16px}
.swoop-stats span{font-size:12.5px;color:var(--muted)}

/* Agreement: make the doc, check it, send, signed */
body[data-area="hq"] .csteps{display:grid;gap:10px;margin-top:4px}
body[data-area="hq"] .cstep{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
body[data-area="hq"] .cstep > div{display:grid;gap:6px;min-width:0}
body[data-area="hq"] .cstep .dotn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--mono);background:var(--surface);border:1px solid var(--line);color:var(--muted)}
body[data-area="hq"] .cstep.ok .dotn{background:var(--go);border-color:var(--go);color:#fff}
body[data-area="hq"] .cstep .row{gap:8px}

/* Payment links */
body[data-area="hq"] .paylink{display:grid;gap:10px;padding:12px;border:1px solid var(--brand);border-radius:12px;background:var(--brand-soft)}
body[data-area="hq"] .paylink > div:first-child{display:flex;justify-content:space-between;gap:10px}
body[data-area="hq"] .paylink input{min-width:0}
body[data-area="hq"] #payList{max-height:560px;overflow:auto}

/* Important links */
body[data-area="hq"] .keylinks .grid2{gap:12px 18px}
body[data-area="hq"] .linkrow input{min-width:0}
body[data-area="hq"] a.btn[aria-disabled]{opacity:.45;pointer-events:none}
body[data-area="hq"] .chiplinks{display:flex;flex-wrap:wrap;gap:8px}
body[data-area="hq"] .ov-stage{font-size:14px;padding:7px 30px 7px 14px;justify-self:start}
body[data-area="hq"] .card.agreement{background:#fff;color:#111;border-color:#e5e5e5}
body[data-area="hq"] .card.agreement h4{color:#111}
body[data-area="hq"] .orgplan{margin-top:12px;padding:12px 14px;border:1px solid var(--brand);border-radius:12px;background:var(--brand-soft)}
body[data-area="hq"] .orgplan ul{margin:0;padding-left:4px;list-style:none;display:grid;gap:4px}

/* ---------- Highlights (Launch day) ---------- */
.hl-card{display:grid;gap:18px}
.hl-card svg{display:block;width:100%;height:100%}
.hl-look{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hl-designs{display:flex;gap:8px;flex-wrap:wrap}
.hl-design{display:grid;justify-items:center;gap:6px;background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:8px 8px 6px;color:var(--ink);font:600 12px var(--body);cursor:pointer}
.hl-design canvas{width:54px;height:96px;border-radius:6px;display:block}
.hl-design.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.hl-colors{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hl-covsty{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:6px}
.hl-covsty .cv-style{padding:3px}
.cv-hl.sel .cv-ring{box-shadow:0 0 0 2.5px #fff}
.cv-hl.sel em{font-weight:700}
.hl-plus{display:grid!important;place-items:center;font-size:30px;color:#a8a8a8;background:#121212!important}
.hl-addwrap{position:relative}
.hl-menu{position:absolute;top:92px;left:0;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;display:grid;min-width:150px;box-shadow:0 20px 40px -16px var(--shadow)}
.hl-menu button{background:none;border:0;color:var(--ink);text-align:left;padding:8px 10px;border-radius:8px;font:600 14px var(--body);cursor:pointer}
.hl-menu button:hover{background:var(--raise)}
.hl-edit{display:grid;gap:14px;border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--raise)}
.hl-edit-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hl-name{max-width:220px;font-weight:700}
.hl-iconwrap{position:relative}
.hl-picker{position:absolute;top:40px;left:0;z-index:20;width:min(560px,86vw);max-height:340px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 20px 40px -16px var(--shadow)}
.hl-slides{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.hl-slide{flex:none;width:250px;display:grid;gap:8px}
.hl-slide canvas{width:250px;height:444px;border-radius:12px;display:block;background:#111;border:1px solid var(--line)}
.hl-fields{display:grid;gap:6px}
.hl-fields .input{padding:8px 10px;font-size:13px}
.hl-fields textarea.input{resize:vertical;line-height:1.4}
.hl-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.hl-lsel{width:auto;padding:5px 8px;font-size:12px;border-radius:8px}
.hl-photo{cursor:pointer}.hl-photo.busy{opacity:.6;pointer-events:none}
.hl-new{height:444px;align-content:center;justify-items:stretch;border:1.5px dashed var(--line);border-radius:12px;padding:14px}
.hl-newbtn{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:600 14px var(--body);padding:18px 10px;cursor:pointer;display:grid;gap:4px;justify-items:center}
.hl-newbtn b{font-size:26px;line-height:1;color:var(--brand-ink)}
.hl-newbtn:hover{border-color:var(--brand)}

/* ---------- Highlight covers ---------- */
.cv-card svg{display:block;width:100%;height:100%}
.cv-ig{background:#000;border:1px solid var(--line);border-radius:18px;padding:18px 18px 12px;display:grid;gap:14px}
.cv-prof{display:flex;align-items:center;gap:12px;color:#f5f5f5}
.cv-prof b{display:block;font-size:15px}.cv-prof span{font-size:13px;color:#a8a8a8}
.cv-av{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;border:1px solid #262626}
.cv-av img{width:82%;height:82%;object-fit:contain}.cv-av b{color:#111;font-size:20px}
.cv-av.big{width:86px;height:86px}.cv-av.sm{width:28px;height:28px}
.cv-row,.cv-ph-row{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.cv-hl{background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:6px;flex:none;width:76px}
.cv-ring{width:70px;height:70px;border-radius:50%;padding:3px;background:#000;box-shadow:0 0 0 1.5px #3a3a3a;overflow:hidden;display:block;transition:transform .15s}
.cv-ring svg{border-radius:50%}
.cv-hl:hover .cv-ring{transform:scale(1.05)}
.cv-hl em{font-style:normal;font-size:12px;color:#f5f5f5;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-style{display:flex;align-items:center;gap:8px;background:var(--raise);border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:4px 12px 4px 4px;font:600 13px var(--body);cursor:pointer}
.cv-style span{width:28px;height:28px;border-radius:50%;overflow:hidden;display:block}
.cv-style.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cv-sw{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.cv-sw input{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;padding:0;background:none;cursor:pointer;overflow:hidden}
.cv-sw input::-webkit-color-swatch-wrapper{padding:0}.cv-sw input::-webkit-color-swatch{border:0;border-radius:50%}
.cv-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.cv-x:hover:not(:disabled){color:var(--ink);background:var(--surface)}.cv-x:disabled{opacity:.3;cursor:default}
.cv-picker{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;padding:8px 0 2px}
.cv-ic{display:grid;justify-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 4px 6px;color:var(--ink);cursor:pointer}
.cv-ic svg{width:26px;height:26px}.cv-ic img{width:26px;height:26px;object-fit:contain}
.cv-ic span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cv-ic:hover,.cv-ic.on{border-color:var(--brand);color:var(--brand-ink)}
.cv-foot{gap:8px;flex-wrap:wrap}
.cv-tip{margin:0;line-height:1.5}

/* Show the client: a phone with their profile */
.cv-show{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;animation:cvIn .2s ease}
@keyframes cvIn{from{opacity:0}to{opacity:1}}
.cv-phone{width:min(390px,100%);aspect-ratio:9/19.5;max-height:calc(100vh - 80px);background:#000;border-radius:44px;border:10px solid #1c1c1e;box-shadow:0 40px 120px -20px rgba(0,0,0,.9);overflow:hidden;display:flex;flex-direction:column;color:#f5f5f5;position:relative}
.cv-ph-top{padding:18px 18px 8px;font-size:18px}
.cv-ph-prof{display:flex;align-items:center;gap:22px;padding:6px 18px}
.cv-ph-stats{display:flex;flex:1;justify-content:space-around;text-align:center}
.cv-ph-stats b{display:block;font-size:16px}.cv-ph-stats span{font-size:12px;color:#a8a8a8}
.cv-ph-name{padding:10px 18px 14px;font-size:14px}
.cv-ph-row{padding:0 14px 14px}
.cv-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;flex:1;border-top:1px solid #262626;padding-top:2px}
.cv-ph-grid i{background:#161616;aspect-ratio:1/1.25}
.cv-story{position:absolute;inset:0;cursor:pointer;animation:cvIn .2s ease}
.cv-story>svg,.cv-story>canvas{position:absolute;inset:0;width:100%;height:100%}
.cv-bars{position:absolute;top:12px;left:10px;right:10px;display:flex;gap:4px}
.cv-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35)}.cv-bars i.on{background:#fff}
.cv-story-name{position:absolute;top:24px;left:12px;display:flex;align-items:center;gap:8px;font:600 13px var(--body);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.cv-close{position:fixed;top:18px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer}
.cv-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:13px;margin:0}

/* Shoot day planner (Content day) */
body[data-area="hq"] .sp-top{display:grid;grid-template-columns:160px 160px 1fr;gap:12px;align-items:start}
body[data-area="hq"] .sp-top .field em{font-style:normal;margin-top:2px}
body[data-area="hq"] .sp-h{margin:20px 0 10px;font-size:15px}
body[data-area="hq"] .sp-locs{display:grid;gap:10px;margin-bottom:10px}
body[data-area="hq"] .sp-loc{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
body[data-area="hq"] .sp-loc-body{flex:1;min-width:0;display:grid;gap:8px}
body[data-area="hq"] .sp-loc-top{display:flex;gap:8px}
body[data-area="hq"] .sp-name{font-weight:600}
body[data-area="hq"] .sp-x{flex:none}
body[data-area="hq"] .sp-num{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font:700 13px var(--mono);margin-top:5px}
body[data-area="hq"] .sp-find{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body[data-area="hq"] .sp-find .input{flex:1 1 220px;min-width:0}
body[data-area="hq"] .sp-pin{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;background:var(--line);color:var(--muted);font-size:12px;font-weight:700}
body[data-area="hq"] .sp-pin.on{background:var(--go-soft);color:var(--go)}
body[data-area="hq"] .sp-hits{flex-basis:100%;display:grid;gap:6px}
body[data-area="hq"] .sp-hits:empty{display:none}
body[data-area="hq"] .sp-hit{display:grid;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
body[data-area="hq"] .sp-hit:hover{border-color:var(--brand)}
body[data-area="hq"] .sp-hit span{font-size:12.5px;color:var(--muted)}
body[data-area="hq"] .sp-map{height:320px;margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--raise);z-index:0;position:relative}
body[data-area="hq"] .sp-mk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font:700 13px var(--mono);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
body[data-area="hq"] .sp-script{min-height:140px}
body[data-area="hq"] .sp-plan{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
body[data-area="hq"] .sp-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
body[data-area="hq"] .sp-sum>div{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--raise);border:1px solid var(--line)}
body[data-area="hq"] .sp-sum span{font-size:12.5px;color:var(--muted)}
body[data-area="hq"] .sp-warn{color:var(--stop);margin:8px 0 0}
body[data-area="hq"] .sp-time{list-style:none;margin:14px 0 0;padding:0 0 0 14px;border-left:2px dashed var(--line);display:grid;gap:10px}
body[data-area="hq"] .sp-drive{font:600 12.5px var(--mono);color:var(--muted);padding:2px 0 2px 6px}
body[data-area="hq"] .sp-stop{margin-left:-28px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
body[data-area="hq"] .sp-stop.brk{background:var(--raise)}
body[data-area="hq"] .sp-stop-head{display:flex;gap:10px;align-items:center}
body[data-area="hq"] .sp-stop-head .sp-num{margin-top:0}
body[data-area="hq"] .sp-stop-head div{display:grid}
body[data-area="hq"] .sp-stop-head b{font-size:16px}
body[data-area="hq"] .sp-stop p{margin:8px 0 0}
body[data-area="hq"] .sp-light{color:var(--muted)}
body[data-area="hq"] .sp-group{margin-top:12px}
body[data-area="hq"] .sp-group h4,body[data-area="hq"] .sp-extra h4{margin:0 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
body[data-area="hq"] .sp-shot{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-top:1px solid var(--line);cursor:pointer}
body[data-area="hq"] .sp-shot input{margin-top:3px;width:18px;height:18px;flex:none}
body[data-area="hq"] .sp-shot span{display:grid;gap:2px;font-size:14px;line-height:1.4}
body[data-area="hq"] .sp-shot small{color:var(--muted);font-size:12px}
body[data-area="hq"] .sp-shot.done span{opacity:.5;text-decoration:line-through}
body[data-area="hq"] .sp-ad{font:700 11px var(--mono);font-style:normal;color:var(--brand-ink);background:var(--brand-soft);border-radius:6px;padding:1px 6px;justify-self:start}
body[data-area="hq"] .sp-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
body[data-area="hq"] .sp-extra{padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-top:12px}
body[data-area="hq"] .sp-extras .sp-extra{margin-top:0}
body[data-area="hq"] .sp-extra ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
@media (max-width:720px){
  body[data-area="hq"] .sp-top{grid-template-columns:1fr 1fr}
  body[data-area="hq"] .sp-base{grid-column:1/-1}
  body[data-area="hq"] .sp-map{height:260px}
}

.bb-canva{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.mt-doc{width:100%;height:620px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:14px}

/* Footage studio (Editing stage) */
body[data-area="hq"] .fs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C0392B;margin-right:6px}
body[data-area="hq"] .fs-dot.on{background:#1F9D55}
body[data-area="hq"] .fs-drop{display:grid;gap:6px;place-items:center;text-align:center;padding:34px 18px;border:2px dashed var(--line);border-radius:16px;cursor:pointer;transition:border-color .15s,background .15s}
body[data-area="hq"] .fs-drop:hover,body[data-area="hq"] .fs-drop.over{border-color:var(--brand);background:rgba(255,255,255,.03)}
body[data-area="hq"] .fs-drop .small{max-width:560px;overflow-wrap:anywhere}
body[data-area="hq"] .fs-off{display:grid;gap:8px;padding:14px;border:1px dashed var(--line);border-radius:12px}
body[data-area="hq"] .fs-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
body[data-area="hq"] .fs-h{font-size:15px;margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
body[data-area="hq"] .fs-cardin{display:grid;gap:6px;padding:12px 14px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}
body[data-area="hq"] .fs-cardin .fs-row{align-items:center;justify-content:space-between}
body[data-area="hq"] .fs-job{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--raise);border:1px solid var(--line)}
body[data-area="hq"] .fs-job div:last-child{display:grid;min-width:0}
body[data-area="hq"] .fs-job span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
body[data-area="hq"] .fs-spin{flex:none;width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:fsSpin .8s linear infinite}
@keyframes fsSpin{to{transform:rotate(360deg)}}
body[data-area="hq"] .fs-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--raise);border:1px solid var(--line);font-weight:600}
body[data-area="hq"] .fs-takes{display:grid;gap:12px}
body[data-area="hq"] .fs-line{display:grid;gap:6px}
body[data-area="hq"] .fs-chips{display:flex;gap:6px;flex-wrap:wrap}
body[data-area="hq"] .fs-take{display:grid;text-align:left;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:inherit}
body[data-area="hq"] .fs-take span{font-weight:700;font-size:13px}
body[data-area="hq"] .fs-take em{font-style:normal;font-size:11px;color:var(--muted)}
body[data-area="hq"] .fs-take.best{border-color:#1F9D55;box-shadow:inset 0 0 0 1px #1F9D55}
body[data-area="hq"] .fs-take.playing{background:var(--ink);color:var(--ground)}
body[data-area="hq"] .fs-take.playing em{color:inherit;opacity:.75}
body[data-area="hq"] .fs-player{position:sticky;bottom:12px;z-index:4;display:flex;gap:14px;align-items:flex-start;margin-top:14px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.18)}
body[data-area="hq"] .fs-player video{flex:none;height:300px;max-width:45%;border-radius:10px;background:#000}
body[data-area="hq"] .fs-player p{margin:4px 0 10px}
body[data-area="hq"] .fs-tick{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
body[data-area="hq"] .fs-gold{display:grid;gap:8px;margin:12px 0}
body[data-area="hq"] .fs-g{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
body[data-area="hq"] .fs-g>div{flex:1;min-width:0}
body[data-area="hq"] .fs-g p{margin:2px 0 0}
body[data-area="hq"] .fs-g input{margin-top:3px;width:18px;height:18px;flex:none}
body[data-area="hq"] .fs-gbtns{display:flex;flex-direction:column;gap:4px;flex:none}
body[data-area="hq"] .fs-quote{font-style:italic}

/* Editing brief (Editing stage) */
.brief{display:grid;gap:14px}
.brief .field{margin:0}
.br-ads{display:flex;gap:8px;flex-wrap:wrap}
.br-ad{display:flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.br-ad span{font-size:13px;opacity:.65;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-ad i{font-style:normal;color:var(--brand)}
.br-ad.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.br-who{margin:0}
.br-grid{display:grid;gap:12px}
.br-link{display:flex;gap:8px;align-items:center}
.br-link .input{flex:1;min-width:0}
.br-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:-6px}
.br-chip{padding:5px 10px;border:1px dashed var(--line);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
.br-chip:hover{border-color:var(--brand);border-style:solid}
.br-go{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:14px;border-top:1px solid var(--line)}
.br-find{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:-4px}
.br-picks{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;max-height:280px;overflow:auto}
.br-shoot{display:grid;gap:4px}
.br-pick{text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.br-pick.sub{margin-left:22px}
.br-pick span{opacity:.6;font-size:13px}
.br-pick:hover{border-color:var(--line)}
.br-pick.on{border-color:var(--brand);background:var(--brand-soft)}

body[data-area="hq"] .fs-take{transition:background .12s,border-color .12s}
body[data-area="hq"] .fs-take:hover{border-color:var(--ink)}
body[data-area="hq"] .fs-take.loading{opacity:.75;cursor:progress;position:relative;padding-right:30px}
body[data-area="hq"] .fs-take.loading::after{content:"";position:absolute;right:9px;top:50%;width:12px;height:12px;margin-top:-8px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:fsSpin .8s linear infinite}
body[data-area="hq"] .fs-take.best span::after{content:" ✓";color:#1F9D55}
body[data-area="hq"] .fs-take.playing.best span::after{color:inherit}
body[data-area="hq"] #fsPlayer{position:sticky;bottom:12px;z-index:4}
body[data-area="hq"] .fs-player{position:static}

/* Progress, messages and the take player ride along the bottom of the screen, so they show wherever you pressed. */
body[data-area="hq"] #fsDock{position:sticky;bottom:12px;z-index:5;display:grid;gap:8px;margin-top:8px}
body[data-area="hq"] #fsDock:empty{display:none}
body[data-area="hq"] #fsDock .fs-job,body[data-area="hq"] #fsDock .fs-note{margin:0;background:var(--surface);box-shadow:0 8px 30px rgba(0,0,0,.25)}
body[data-area="hq"] #fsDock .fs-note{border-color:var(--ink)}
body[data-area="hq"] #fsPlayer{position:static}

/* Client portal (portal.js): the HQ look for business owners. */
body[data-sub="portal"] .portal-launch{width:100%;height:calc(100vh - 190px);min-height:520px;border:1px solid var(--line);border-radius:16px;background:#0b0b0d}
body[data-sub="portal"] .linkrow{display:flex;align-items:center;gap:10px;padding:14px 16px}
body[data-sub="portal"] .linkrow .grow{flex:1;min-width:0}
body[data-sub="portal"] .money-top .row{flex-wrap:nowrap;align-items:center}
body[data-area="hq"] .portal-card .pt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
body[data-area="hq"] .portal-card .pt-row>div{display:grid;gap:2px;min-width:0}
body[data-area="hq"] .portal-card .pt-invite{display:grid;grid-template-columns:1fr 1.3fr auto;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:600px){body[data-area="hq"] .portal-card .pt-invite{grid-template-columns:1fr}}

/* Strategy calls: Call prep + Monthly report (hq.js prepCard / reportCard) */
.prep{display:flex;flex-direction:column;gap:14px}
.prep-facts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--muted)}
.chip-st{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.prep-sec>b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.prep-sec p{margin:0 0 6px;line-height:1.5}
.prep-tbl{width:100%;border-collapse:collapse;font-size:14px}
.prep-tbl th{font-size:12px;font-weight:600;color:var(--muted);text-align:left;padding:4px 0}
.prep-tbl td{padding:6px 0;border-top:1px solid var(--line)}
.prep-tbl .n{text-align:right;padding-right:16px;font-family:var(--mono)}
.chg{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.chg.up{color:var(--go)} .chg.down{color:var(--stop)}
.prep-open{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
.report{display:flex;flex-direction:column;gap:14px}
.rp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.rp-tiles{grid-template-columns:repeat(2,1fr)}}
.rp-tile{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--raise)}
.rp-tile .l{font-size:12px;font-weight:600;color:var(--muted)}
.rp-tile .v{font:700 26px/1.1 var(--mono)}
.rp-share{margin-left:6px}

/* Ads (public/ads.js) */
body[data-area="hq"] .ad-list{display:grid;gap:8px}
body[data-area="hq"] .ad-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
body[data-area="hq"] .ad-row:hover{border-color:var(--brand)}
body[data-area="hq"] .ad-n{font:700 12px var(--mono);padding:4px 9px;border-radius:99px;background:var(--raise);white-space:nowrap}
body[data-area="hq"] .ad-main{display:grid;gap:2px;flex:1;min-width:0}
body[data-area="hq"] .ad-dots{display:flex;gap:4px}
body[data-area="hq"] .ad-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
body[data-area="hq"] .ad-dots i.d-past{background:var(--go)}
body[data-area="hq"] .ad-dots i.d-now{background:var(--brand)}
body[data-area="hq"] .ad-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
body[data-area="hq"] .ad-name{font:700 20px var(--display, var(--body));max-width:420px;background:transparent;border-color:transparent}
body[data-area="hq"] .ad-name:hover,body[data-area="hq"] .ad-name:focus{border-color:var(--line)}
body[data-area="hq"] .ad-choice{display:flex;gap:10px;flex-wrap:wrap}