/* ============================================================================
   admin.css — the studio admin design system (JC-ADMIN-REDESIGN-1026)
   Shared by index.html, leads.html and visitors.html; the brand tokens live in
   each page's inline <style> so the ES / OL clone scripts can re-skin them.
   Everything here is written against those tokens: --bg --card --copper
   --copperlt --cream --grey --dim --line --field --ok --warn --bad and the two
   font variables. No literal brand colours below.
   ============================================================================ */

:root{
  --r-lg:22px; --r-md:16px; --r-sm:12px; --r-xs:8px;
  --pad:clamp(1rem,2.4vw,1.75rem);
  --side:248px;
  --tab-h:calc(3.75rem + env(safe-area-inset-bottom,0px));
  --ease:cubic-bezier(.22,.61,.36,1);
  --ink:var(--cream);
  --ink-2:var(--grey);
  --ink-3:var(--dim);
  --hair:color-mix(in srgb,var(--cream) 9%,transparent);
  --hair-2:color-mix(in srgb,var(--cream) 14%,transparent);
  --surface:color-mix(in srgb,var(--card) 74%,transparent);
  --surface-2:color-mix(in srgb,var(--bg) 55%,transparent);
  --tint:color-mix(in srgb,var(--copper) 12%,transparent);
  --tint-2:color-mix(in srgb,var(--copper) 22%,transparent);
  --shadow:0 30px 60px -40px rgb(0 0 0/.85),0 1px 0 color-mix(in srgb,var(--cream) 5%,transparent) inset;
  --fs-0:.6875rem; --fs-1:.75rem; --fs-2:.8125rem; --fs-3:.875rem; --fs-4:.9375rem;
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{font-family:var(--font-body);font-weight:400;font-size:var(--fs-3);line-height:1.5;color:var(--ink);background:var(--bg);
  min-height:100dvh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 0% -10%,color-mix(in srgb,var(--copperlt) 22%,transparent),transparent 62%),
    radial-gradient(1100px 700px at 110% 30%,color-mix(in srgb,var(--copper) 12%,transparent),transparent 60%),
    radial-gradient(700px 500px at 50% 120%,color-mix(in srgb,var(--cream) 5%,transparent),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--copperlt);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
input,select,textarea{font:inherit;color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--copperlt)}
:focus-visible{outline:2px solid var(--copperlt);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.012em;color:#fff}
.num{font-family:var(--font-display);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.sub{color:var(--ink-3);font-size:var(--fs-2);margin-top:.125rem;line-height:1.4}
.hint{color:var(--ink-3);font-size:var(--fs-1);line-height:1.5}
.mute{color:var(--ink-3)}
.name{color:var(--ink);font-weight:500}
.money{font-variant-numeric:tabular-nums;color:var(--ink)}
.money small{display:block;color:var(--ink-3);font-size:var(--fs-0)}
.days{font-variant-numeric:tabular-nums;white-space:nowrap}
.days.soon{color:var(--copperlt)}.days.past{color:var(--ink-3)}
.lead{color:var(--copperlt);font-weight:500}
.dead{opacity:.5}

/* ------------------------------------------------------------- surfaces */
.card,.glass{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--cream) 4.5%,transparent),transparent 42%),var(--surface);
  border:1px solid var(--hair);border-top-color:var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card::before,.glass::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--copperlt) 50%,transparent) 22%,color-mix(in srgb,var(--cream) 30%,transparent) 50%,transparent 85%);opacity:.5}
.inset{background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r-sm)}

/* --------------------------------------------------------------- gate */
#gate{display:none;min-height:100dvh;place-items:center;padding:1.5rem}
#gate.show{display:grid}
#gate .panel{padding:2.75rem 2.5rem;max-width:26.25rem;width:100%;text-align:center}
#gate h1{font-size:2.5rem;margin-bottom:.5rem}
#gate h1 em{font-style:italic;font-weight:400;color:var(--copperlt)}
#gate p{color:var(--ink-2);font-size:var(--fs-4);line-height:1.6;margin-bottom:1.625rem}
#gateErr{color:var(--bad);font-size:var(--fs-2);margin-top:1rem;display:none}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;padding:.5rem 1.125rem;border-radius:999px;
  background:var(--copper);color:var(--bg);font-weight:700;font-size:var(--fs-2);letter-spacing:.015em;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s,transform .16s var(--ease)}
.btn:hover{background:var(--copperlt)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--hair-2);font-weight:500}
.btn.ghost:hover{color:var(--ink);border-color:var(--grey);background:color-mix(in srgb,var(--cream) 4%,transparent)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);font-weight:500}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.btn.sm{min-height:2rem;padding:.25rem .75rem;font-size:var(--fs-1)}
.btn.icon{width:2.5rem;padding:0}
.btn.busy,.btn:disabled{opacity:.55;pointer-events:none}
.link{color:var(--copperlt);font:inherit}
.link:hover{text-decoration:underline}

/* chips: the filters */
.chips{display:flex;gap:.375rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.375rem;min-height:2.125rem;padding:.3125rem .8125rem;border-radius:999px;border:1px solid var(--hair-2);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-2);white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .16s var(--ease)}
.chip:hover{color:var(--ink);border-color:var(--grey)}
.chip.on{background:var(--copper);border-color:var(--copper);color:var(--bg);font-weight:700}
.chip .k{font-variant-numeric:tabular-nums;opacity:.7;font-weight:400;font-size:var(--fs-1)}
.chip.on .k{opacity:.8}
.seg{display:inline-flex;padding:.1875rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--hair)}
.seg .chip{border:0;background:transparent;min-height:1.875rem;padding:.125rem .75rem}
.seg .chip.on{background:color-mix(in srgb,var(--cream) 12%,transparent);color:var(--ink)}

/* pills: status */
.pill{display:inline-flex;align-items:center;gap:.375rem;padding:.2rem .6rem;border-radius:999px;font-size:var(--fs-0);font-weight:500;letter-spacing:.015em;white-space:nowrap;border:1px solid transparent;line-height:1.25}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9;flex:none}
.p-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 11%,transparent);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.p-warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 11%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.p-bad,.p-late{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.p-dim{color:var(--ink-2);background:color-mix(in srgb,var(--grey) 9%,transparent);border-color:color-mix(in srgb,var(--grey) 22%,transparent)}
.p-cu{color:var(--copperlt);background:var(--tint);border-color:color-mix(in srgb,var(--copperlt) 32%,transparent)}
.p-add{color:var(--ink);background:var(--tint-2);border-color:color-mix(in srgb,var(--copperlt) 45%,transparent)}
.addons{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.375rem}
.mflags{display:none;gap:.3rem;flex-wrap:wrap;margin-top:.375rem}

/* forms */
.field label{display:block;font-size:var(--fs-0);color:var(--ink-3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.3rem}
.field input,.field select,.field textarea,.search input,.composebox input,.composebox textarea,.noteform textarea,.actbox input,.dlform input,.dlform textarea{
  width:100%;min-height:2.5rem;background:var(--surface-2);border:1px solid var(--hair-2);border-radius:var(--r-xs);padding:.5rem .75rem;font-size:var(--fs-3);color:var(--ink);
  transition:border-color .15s,background .15s}
.field input:focus,.field select:focus,.field textarea:focus,.composebox input:focus,.composebox textarea:focus,.noteform textarea:focus,.dlform input:focus,.dlform textarea:focus{outline:0;border-color:var(--copper);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.field select option{background:var(--card)}
textarea{resize:vertical;line-height:1.5}
.tog{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-3);font-size:var(--fs-2);cursor:pointer;user-select:none;min-height:2.125rem}
.tog input{accent-color:var(--copper);width:1rem;height:1rem}

/* ------------------------------------------------------------------ shell */
#app{display:none}
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 1rem 1.25rem;
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-right:1px solid var(--hair);
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
.brand{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.008em;line-height:1;color:#fff;padding:.25rem .5rem}
.brand em{font-style:italic;color:var(--copperlt);font-weight:400}
.brand small{display:block;font-family:var(--font-body);font-size:var(--fs-1);color:var(--ink-3);letter-spacing:.02em;margin-top:.4rem;font-weight:400}
.nav{display:flex;flex-direction:column;gap:.125rem}
.nav a{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--fs-3);font-weight:500;
  transition:background .15s,color .15s,transform .16s var(--ease)}
.nav a svg{width:20px;height:20px;flex:none;opacity:.75}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--cream) 5%,transparent)}
.nav a.on{color:var(--copperlt);background:var(--tint)}
.nav a.on svg{opacity:1}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.625rem;padding:0 .25rem}
.who{display:flex;flex-direction:column;gap:.5rem;color:var(--ink-3);font-size:var(--fs-1)}
#whoEmail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.live{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-1);color:var(--ink-2)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.live.off i{background:var(--ink-3);box-shadow:none}
.tabbar{display:none}

.main{min-width:0;padding:1.75rem var(--pad) 5rem}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.page-head h1{font-size:clamp(1.875rem,3vw,2.5rem)}
.page-head .sub{font-size:var(--fs-2);margin-top:.35rem}
.page-head .tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:.5rem;padding:0 .875rem;min-height:2.5rem;border-radius:999px;border:1px solid var(--hair-2);background:var(--surface-2);min-width:16rem;color:var(--ink-3)}
.search input{background:none;border:0;outline:0;min-height:0;padding:0;width:100%;font-size:var(--fs-3)}
.search svg{flex:none}
.stack{display:flex;flex-direction:column;gap:1rem}
.main>section,.main>.tbl,.main>.vlist,.main>.cal,.main>.linked{margin-top:1rem}
.main>.page-head+*{margin-top:0}
.bar{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap;margin:1.25rem 0 .75rem}
.bar .chips{flex:1 1 auto;min-width:0;max-width:100%}
.earn{overflow:hidden}

/* section headings inside cards */
.sec-h,.nextup h2,.earn h2,.cal h2,.sec h2,.mapcard h2,.browse h2,.funnel h2,.tbl h2{font-size:1.25rem;color:var(--ink-2);letter-spacing:-.008em}
.sec-h span,.nextup h2 span{color:var(--ink)}
.sec-h small,.sec h2 small,.mapcard h2 small,.browse h2 small,.cal h2 small,.funnel h2 small{font-family:var(--font-body);font-size:var(--fs-1);color:var(--ink-3);margin-left:.5rem;font-weight:400;letter-spacing:0}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ------------------------------------------------------------- bookings */
/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.stat{padding:1rem 1.125rem;cursor:pointer;border-radius:var(--r-md);transition:border-color .15s,transform .16s var(--ease)}
.stat:hover{border-color:var(--copper)}
.stat.on{border-color:var(--copper);box-shadow:0 0 0 1px color-mix(in srgb,var(--copper) 40%,transparent),var(--shadow)}
.stat .v{font-family:var(--font-display);font-size:2.25rem;font-weight:500;line-height:1;color:#fff;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.stat .v.copper{color:var(--copperlt)}
.stat .l{margin-top:.375rem;font-size:var(--fs-2);color:var(--ink-2)}
.stat .s{margin-top:.125rem;font-size:var(--fs-1);color:var(--ink-3);line-height:1.4}

/* next up rail */
.nextup{padding:1.25rem var(--pad) 1rem;overflow:hidden}
.nextup h2{margin-bottom:.875rem}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);gap:.75rem;overflow-x:auto;padding-bottom:.375rem;scroll-snap-type:x proximity;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.nx{position:relative;scroll-snap-align:start;padding:1rem 1.125rem 1rem 1.25rem;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--hair);cursor:pointer;overflow:hidden;
  transition:border-color .15s,transform .16s var(--ease)}
.nx:hover{border-color:var(--copper)}
.nx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.nx.week::before{background:linear-gradient(180deg,var(--copperlt),var(--copper))}
.nx.needs::before{background:var(--warn)}
.nx .d{font-family:var(--font-display);font-size:2.5rem;line-height:.95;font-weight:500;color:#fff;letter-spacing:-.022em}
.nx .d small{font-size:1rem;color:var(--ink-2);font-weight:400;margin-left:.375rem;letter-spacing:0}
.nx .n{margin-top:.625rem;font-size:var(--fs-3);font-weight:500;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.nx .m{margin-top:.25rem;font-size:var(--fs-1);color:var(--ink-3)}
.nx .m b{font-weight:500;color:var(--copperlt)}
.nx .flags{margin-top:.625rem;display:flex;gap:.3rem;flex-wrap:wrap}
.nextup .empty{color:var(--ink-3);font-size:var(--fs-3);padding:.375rem 0}

/* earnings */
.earn{padding:1.25rem var(--pad) 1rem}
.earn .big{font-family:var(--font-display);font-size:clamp(2.25rem,4vw,3.25rem);line-height:.95;font-weight:500;color:#fff;margin-top:.375rem;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.earn .big small{font-family:var(--font-body);font-size:var(--fs-2);color:var(--ink-3);font-weight:400;margin-left:.625rem;letter-spacing:0}
.earn .kpis{display:flex;gap:1.5rem;flex-wrap:wrap}
.earn .kpi .v{font-family:var(--font-display);font-size:1.5rem;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.016em;font-variant-numeric:tabular-nums}
.earn .kpi .v.cu{color:var(--copperlt)}
.earn .kpi .l{font-size:var(--fs-1);color:var(--ink-3);margin-top:.25rem}
.earn .yr,.metrics{display:flex;gap:.25rem;flex-wrap:wrap}
.earn .yr .chip,.metrics .chip{min-height:1.875rem;padding:.2rem .7rem;font-size:var(--fs-1)}
.chartwrap{position:relative}
.chart{margin-top:1.125rem;display:flex;align-items:flex-end;gap:.375rem;height:11.5rem;border-bottom:1px solid var(--hair-2)}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.col .stack{display:flex;flex-direction:column;justify-content:flex-end;height:calc(100% - 2.125rem);gap:0}
.col .seg{background:var(--copper);opacity:.85;border-radius:3px 3px 0 0;transition:opacity .12s;min-height:0;border:0}
.col .seg.tip{background:var(--copperlt);border-radius:3px 3px 0 0}
.col .seg.tip+.seg{border-radius:0}
.col.future .seg{background:var(--line)}
.col:hover .seg{opacity:1}
.col .lbl{font-size:var(--fs-0);color:var(--ink-3);text-align:center;margin-top:.5rem;line-height:1.25;height:1.625rem;white-space:nowrap;letter-spacing:.02em}
.col .lbl b{display:block;font-weight:400;font-size:.625rem;opacity:.8}
.col .val{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% - 4px);font-size:var(--fs-1);color:var(--ink);opacity:0;white-space:nowrap;pointer-events:none;transition:opacity .12s;background:var(--card);padding:.125rem .4375rem;border-radius:6px;border:1px solid var(--hair-2)}
.col:hover .val{opacity:1}
.col.best .seg:not(.tip){background:var(--copperlt);opacity:1}
.col .ghost{position:absolute;left:0;right:0;bottom:2.125rem;border:1px dashed color-mix(in srgb,var(--cream) 28%,transparent);border-bottom:0;border-radius:3px 3px 0 0;pointer-events:none}
.avg{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--cream) 35%,transparent);pointer-events:none}
.avg span{position:absolute;right:0;top:-1.125rem;font-size:var(--fs-0);color:var(--ink-2);background:var(--card);padding:.0625rem .375rem;border-radius:4px}
.earn .subrow{display:flex;flex-direction:column;gap:.625rem;margin-top:1.125rem}
.earn .bestline{font-size:var(--fs-2);color:var(--ink-2);line-height:1.5}.earn .bestline b{font-weight:500;color:var(--copperlt)}
.earn .legend{display:flex;gap:1rem;font-size:var(--fs-0);color:var(--ink-3);margin-top:.5rem;flex-wrap:wrap}
.earn .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.3125rem;vertical-align:-1px;background:var(--copper)}
.earn .legend i.tip{background:var(--copperlt)}

/* tables */
.tbl,.sec,.vlist{overflow:hidden}
.tbl .top,.sec .top,.vlist .top{padding:1.125rem var(--pad) .5rem}
table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
thead th{text-align:left;font-weight:500;color:var(--ink-3);font-size:var(--fs-0);letter-spacing:.06em;text-transform:uppercase;padding:.875rem 1rem;border-bottom:1px solid var(--hair);white-space:nowrap}
thead th.r,td.r{text-align:right}
tbody tr.row,tr.vrow{border-bottom:1px solid var(--hair);cursor:pointer;transition:background .12s;box-shadow:inset 3px 0 0 transparent}
tbody tr.row:hover,tr.vrow:hover{background:color-mix(in srgb,var(--cream) 3%,transparent)}
tbody tr.row.open,tr.vrow.open{background:color-mix(in srgb,var(--copper) 8%,transparent);box-shadow:inset 3px 0 0 var(--copper)}
tbody tr.row.test{opacity:.6}
td{padding:.8125rem 1rem;vertical-align:middle}
td.when{white-space:nowrap}
.date{font-family:var(--font-display);font-size:1.25rem;font-weight:500;color:#fff;line-height:1;letter-spacing:-.01em}
.date small{font-family:var(--font-body);font-size:var(--fs-1);color:var(--ink-3);display:block;margin-top:.2rem;font-weight:400;letter-spacing:.01em}
.pkg{color:var(--ink-2)}
td .sub{max-width:21rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{padding:2.25rem 1rem;text-align:center;color:var(--ink-3);font-size:var(--fs-3)}
.mtotal{display:none}
.foot{margin-top:1rem;color:var(--ink-3);font-size:var(--fs-1);display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.mini{display:flex;gap:.375rem;flex-wrap:wrap}
.mini .btn{min-height:2rem;padding:.25rem .75rem;font-size:var(--fs-1)}

/* ------------------------------------------------- the detail sheet */
.modal{position:fixed;inset:0;z-index:20;display:none;align-items:flex-start;justify-content:center;padding:1.75rem 1rem;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto}
.modal.show{display:flex}
.modal .sheet{width:min(60rem,100%);padding:1.625rem 1.875rem 1.875rem;position:relative}
.modal .mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:1rem;margin-bottom:.375rem}
.modal h2{font-size:1.875rem;line-height:1}
.modal h2 em{font-style:italic;font-weight:400;color:var(--copperlt)}
.modal .msub{color:var(--ink-2);font-size:var(--fs-2);margin-top:.375rem}
.modal .macts{display:flex;gap:.5rem;flex-wrap:wrap}
.modal .macts .btn{min-height:2.25rem;padding:.375rem .9rem;font-size:var(--fs-1)}

/* the drawer variant: right panel on desktop, bottom sheet on a phone */
.modal.drawer{align-items:stretch;justify-content:flex-end;padding:0;overflow:hidden}
.modal.drawer .sheet{width:min(38rem,100%);height:100dvh;border-radius:0;border-right:0;border-top:0;border-bottom:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.modal.drawer .mhead{flex:none;padding:1.25rem var(--pad) 1rem;margin:0;border-bottom:1px solid var(--hair);align-items:center;flex-wrap:nowrap;gap:.75rem}
.modal.drawer .mhead .ttl{min-width:0;flex:1}
.modal.drawer .mhead h2{font-size:1.5rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal.drawer .mhead .msub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal.drawer .dbody{flex:1;min-height:0;overflow:auto;padding:1rem var(--pad) 3rem;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dsec{padding:1rem 0;border-top:1px solid var(--hair)}
.dsec:first-child{border-top:0;padding-top:.25rem}
.dsec h4,.dcol h4,.notes h4,.prod h4{font-family:var(--font-display);font-weight:500;font-size:1.125rem;color:var(--copperlt);margin-bottom:.625rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;letter-spacing:-.008em}
.dgrid{display:grid;grid-template-columns:1fr;gap:0}
.dcol{padding:1rem 0;border-top:1px solid var(--hair)}
.dcol:first-child{border-top:0;padding-top:.25rem}
.kv{display:grid;grid-template-columns:7rem 1fr;gap:.3rem .75rem;font-size:var(--fs-2);line-height:1.5}
.kv dt{color:var(--ink-3)}.kv dd{color:var(--ink);overflow-wrap:anywhere;min-width:0}
.kv dd.mute{color:var(--ink-3)}
.acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.875rem}
.acts .btn{min-height:2.25rem;padding:.375rem .9rem;font-size:var(--fs-1)}
.timeline{list-style:none;font-size:var(--fs-2);line-height:1.7}
.timeline li{display:flex;gap:.625rem;color:var(--ink-2)}
.timeline li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper);margin-top:.5625rem;flex:none}
.timeline li.no{color:var(--ink-3)}.timeline li.no::before{background:var(--line)}
.timeline b{font-weight:500;color:var(--ink)}
.err{color:var(--bad);font-size:var(--fs-1);margin-top:.375rem}
.actbox{margin-top:.625rem;font-size:var(--fs-2);color:var(--ink-2);background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:.75rem .875rem;display:none;line-height:1.5}
.actbox.show{display:block}.actbox code{word-break:break-all}
.actbox input{margin-top:.375rem}
.actbox .row{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;align-items:center}
.zone{margin-top:.875rem;padding-top:.875rem;border-top:1px dashed var(--hair-2);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.zone .hint{width:100%}
.notes,.prod{margin-top:.25rem;padding:1rem 0 0;border-top:1px solid var(--hair)}
.note{display:flex;gap:.625rem;align-items:flex-start;font-size:var(--fs-2);padding:.5rem 0;border-bottom:1px solid var(--hair)}
.note .when{color:var(--ink-3);font-size:var(--fs-0);white-space:nowrap;min-width:5.75rem;padding-top:.125rem;letter-spacing:.02em}
.note .txt{flex:1;color:var(--ink);white-space:pre-wrap;line-height:1.45}
.note .x{color:var(--ink-3);font-size:1.1rem;line-height:1;padding:0 .25rem;min-width:1.75rem;min-height:1.75rem}.note .x:hover{color:var(--bad)}
.noteform{display:flex;gap:.5rem;margin-top:.625rem;align-items:flex-end}
.noteform textarea{flex:1;min-height:2.5rem}
.prodrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
.prodrow .field[style*="span"]{grid-column:1/-1!important}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem;margin:.25rem 0 .75rem}
.step{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.5625rem .625rem;border-radius:var(--r-xs);border:1px solid var(--hair);background:var(--surface-2);color:var(--ink-3);font-size:var(--fs-1);text-align:left;transition:border-color .15s,color .15s}
.step i{font-style:normal;width:1.25rem;height:1.25rem;border-radius:50%;display:inline-grid;place-items:center;font-size:var(--fs-0);border:1px solid var(--hair-2);color:var(--ink-3)}
.step small{font-size:.625rem;color:var(--ink-3)}
.step:hover{border-color:var(--grey);color:var(--ink)}
.step.done{color:var(--ink-2);border-color:color-mix(in srgb,var(--copper) 35%,transparent)}.step.done i{background:var(--copper);border-color:var(--copper);color:var(--bg)}
.step.cur{color:var(--ink);border-color:var(--copper);background:var(--tint);cursor:default}.step.cur i{border-color:var(--copperlt);color:var(--copperlt)}
.deliv{margin-top:.625rem}.dlform b{font-weight:500;color:var(--ink)}
.dlform .row{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap;align-items:center}
.dlform .row input{margin-top:0;flex:1}
.dlform .hint{flex-basis:100%}

/* questionnaire */
.qsec{margin-top:1.375rem}
.qsec h3{font-size:1.1875rem;color:var(--copperlt);margin-bottom:.5rem;display:flex;align-items:baseline;gap:.625rem}
.qsec h3 small{font-family:var(--font-body);font-size:var(--fs-0);color:var(--ink-3);letter-spacing:.09em}
.qgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1.375rem}
.qa{padding:.5625rem 0;border-bottom:1px solid var(--hair)}
.qa.wide{grid-column:1/-1}
.qa .k{font-size:var(--fs-0);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.qa .a{font-size:var(--fs-3);color:var(--ink);margin-top:.1875rem;white-space:pre-wrap;line-height:1.55}
.qa .a.empty{color:var(--line)}
.qa .a a{color:var(--copperlt)}
.qhint{margin-top:1rem;font-size:var(--fs-1);color:var(--ink-3)}

/* calendar */
.cal{padding:1.125rem var(--pad) 1.25rem}
.cal .top{align-items:center;margin-bottom:.75rem}
.cal h2{font-size:1.5rem;color:#fff}
.cal .nav2{display:flex;gap:.25rem}
.cal .nav2 button{width:2.25rem;height:2.25rem;border-radius:var(--r-xs);border:1px solid var(--hair-2);color:var(--ink-2);font-size:1rem}
.cal .nav2 button:hover{color:var(--ink);border-color:var(--grey)}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.cgrid .dow{font-size:var(--fs-0);color:var(--ink-3);text-align:center;padding:.25rem 0 .375rem;letter-spacing:.06em;text-transform:uppercase}
.cday{min-height:5.75rem;border-radius:var(--r-xs);background:var(--surface-2);border:1px solid var(--hair);padding:.375rem;font-size:var(--fs-1);color:var(--ink-3)}
.cday.out{opacity:.35}.cday.today{border-color:var(--copper)}
.cday .dn{font-family:var(--font-display);font-size:1rem;color:var(--ink-2)}
.cday.today .dn{color:var(--copperlt)}
.cev{display:block;margin-top:.25rem;padding:.1875rem .375rem;border-radius:5px;font-size:var(--fs-0);color:var(--ink);background:color-mix(in srgb,var(--ok) 14%,transparent);border-left:2px solid var(--ok);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cev.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-left-color:var(--warn)}
.cev.bad{background:color-mix(in srgb,var(--bad) 12%,transparent);border-left-color:var(--bad)}
.cev.past{opacity:.55}
.cev:hover{color:#fff}

/* ---------------------------------------------------------------- leads */
.funnel{padding:1.25rem var(--pad) 1.125rem}
.fsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem;margin-top:1rem}
.fstep{padding:1rem 1.125rem;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hair);position:relative}
.fstep .v{font-family:var(--font-display);font-size:2.25rem;font-weight:500;line-height:1;color:#fff;letter-spacing:-.022em}
.fstep .l{margin-top:.375rem;font-size:var(--fs-2);color:var(--ink-2)}
.fstep .c{margin-top:.25rem;font-size:var(--fs-1);color:var(--copperlt)}
.fstep .barw{height:4px;background:var(--line);border-radius:2px;margin-top:.625rem}.fstep .barw i{display:block;height:100%;background:var(--copper);border-radius:2px}
.srcs{display:grid;grid-template-columns:1fr 1fr;gap:1.625rem;margin-top:1.125rem}
.srcs h3,.bcol h3{font-size:1.0625rem;color:var(--copperlt);margin:1rem 0 .5rem;letter-spacing:-.006em}
.srcs h3:first-child{margin-top:0}
.pages{list-style:none;font-size:var(--fs-2)}
.pages li{display:grid;grid-template-columns:1fr auto auto;gap:.75rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--hair);color:var(--ink)}
.pages li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pages li b{font-weight:500;color:var(--copperlt);font-variant-numeric:tabular-nums}
.pages li i{font-style:normal;color:var(--ink-3);font-size:var(--fs-1);min-width:3.5rem;text-align:right;font-variant-numeric:tabular-nums}
.pages .track{height:3px;background:var(--copper);border-radius:2px;margin-top:.25rem;opacity:.7}
tr.compose td{padding:0 .75rem 1rem}
.composebox{background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r-sm);padding:.875rem 1rem}
.composebox input,.composebox textarea{display:block;margin-top:.375rem}
.hist{margin-top:.75rem;border-top:1px solid var(--hair);padding-top:.5rem}
.histrow{padding:.375rem 0}
.histbody{color:var(--ink-2);font-size:var(--fs-2);white-space:pre-wrap;margin-top:.25rem}
.codeform{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.625rem;align-items:end;padding:.375rem var(--pad) 1rem}
.paste{margin:0 var(--pad) 1rem;padding:.75rem .875rem;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hair);font-size:var(--fs-2);color:var(--ink);line-height:1.5;display:none}
.paste.show{display:block}.paste code{font-size:.95rem}
.paste .row{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}

/* ------------------------------------------------------------- visitors */
.mapcard{padding:1.25rem var(--pad) 1rem;overflow:hidden}
.vstats{display:flex;gap:1.75rem;margin-top:.875rem;flex-wrap:wrap}
.vstats .v{font-family:var(--font-display);font-size:2.25rem;font-weight:500;line-height:1;color:#fff;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.vstats .v.copper{color:var(--copperlt)}
.vstats .l{margin-top:.375rem;font-size:var(--fs-1);color:var(--ink-2)}
.mapwrap{position:relative;margin-top:.75rem;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);border:1px solid var(--hair)}
#map{width:100%;height:auto;display:block;cursor:grab;touch-action:none}
#map.dragging{cursor:grabbing}
.zoomctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:.25rem;z-index:2}
.zoomctl button{width:2.25rem;height:2.25rem;border-radius:var(--r-xs);background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--hair-2);color:var(--ink);font-size:1.125rem;line-height:1;backdrop-filter:blur(6px)}
.zoomctl button:hover{border-color:var(--copper);color:var(--copperlt)}
.zoomctl button.reset{font-size:var(--fs-0);font-family:var(--font-body)}
.regions{position:absolute;left:10px;top:10px;display:flex;gap:.25rem;flex-wrap:wrap;z-index:2;max-width:60%}
.regions .chip{min-height:1.75rem;padding:.2rem .6rem;font-size:var(--fs-0);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px)}
.zoomhint{position:absolute;left:10px;bottom:8px;font-size:var(--fs-0);color:var(--ink-3);pointer-events:none}
#map .state{fill:color-mix(in srgb,var(--cream) 4.5%,transparent);stroke:color-mix(in srgb,var(--cream) 14%,transparent);stroke-width:.6}
#map .state:hover{fill:var(--tint)}
#map .dot{fill:var(--copper);fill-opacity:.55;stroke:var(--copperlt);stroke-width:1}
#map .dot.now{fill:var(--ok);fill-opacity:.7;stroke:#fff}
#map .pulse{fill:none;stroke:var(--ok);stroke-width:1.2;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{r:6;opacity:.8}100%{r:22;opacity:0}}
#map .lbl{font-family:var(--font-body);font-size:.625rem;fill:var(--cream);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.legend{display:flex;gap:1rem;font-size:var(--fs-0);color:var(--ink-3);margin-top:.5rem;flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.3125rem;vertical-align:-1px;background:var(--copper)}
.legend i.now{background:var(--ok)}
.abroad,.venues{margin-top:.625rem;font-size:var(--fs-2);color:var(--ink-2)}
.abroad span,.venues span{display:inline-block;margin:0 .875rem .375rem 0}
.abroad b,.venues b{font-weight:500;color:var(--copperlt);margin-left:.3125rem}
.venues{padding:0 var(--pad) 1rem}
.browse{padding:1.25rem var(--pad) 1.125rem}
.bgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.625rem;margin-top:.5rem}
.vhist{display:flex;align-items:flex-end;gap:.375rem;height:7.5rem;border-bottom:1px solid var(--hair-2);margin:1.625rem 0 1.75rem}
.vhist .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.vhist .col .bar{background:var(--copper);opacity:.85;border-radius:3px 3px 0 0}
.vhist .col:hover .bar{opacity:1}
.vhist .lbl{position:absolute;top:100%;left:0;right:0;text-align:center;font-size:var(--fs-0);color:var(--ink-3);margin-top:.375rem;white-space:nowrap}
.vhist .val{position:absolute;bottom:calc(100% + 2px);left:0;right:0;text-align:center;font-size:var(--fs-0);color:var(--ink)}
.split{display:flex;gap:1.125rem;flex-wrap:wrap;font-size:var(--fs-2);color:var(--ink-2)}
.split b{font-weight:500;color:var(--ink)}
.bnote{font-size:var(--fs-1);color:var(--ink-3);margin-top:.75rem;line-height:1.5}
.dur{font-variant-numeric:tabular-nums;white-space:nowrap}
.linked{padding:.875rem 1.125rem;font-size:var(--fs-2);color:var(--ink-2);display:none;border-radius:var(--r-md)}
.linked.show{display:block}.linked b{font-weight:500;color:var(--ink)}
.tip{position:fixed;pointer-events:none;padding:.5rem .75rem;border-radius:var(--r-sm);font-size:var(--fs-2);color:var(--ink);z-index:9;display:none;white-space:nowrap}
.tip.show{display:block}
.tip small{display:block;color:var(--ink-3);font-size:var(--fs-0);margin-top:.125rem}
td.now i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent);margin-right:.5rem;vertical-align:1px}
td .sub em.bot{font-style:normal;color:var(--warn)}
.path{font-size:var(--fs-2);color:var(--ink);overflow-wrap:anywhere}
.mpage{display:none;font-size:var(--fs-0);color:var(--copperlt);margin-top:.1875rem;overflow-wrap:anywhere}
tr.trail td{padding:.375rem 1rem 1rem 2.75rem;background:var(--surface-2)}
.trail ol{list-style:none;font-size:var(--fs-2)}
.trail li{padding:.1875rem 0;color:var(--ink-2)}
.trail li b{font-weight:400;color:var(--ink-3);margin-right:.625rem;font-variant-numeric:tabular-nums}
.trail li i{font-style:normal;color:var(--copperlt);margin-left:.625rem;font-size:var(--fs-0)}
.trail .meta{font-size:var(--fs-1);color:var(--ink-3);margin-bottom:.375rem}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);opacity:0;padding:.75rem 1.125rem;border-radius:999px;font-size:var(--fs-2);color:var(--ink);z-index:30;pointer-events:none;max-width:min(92vw,32rem);text-align:center}
.toast.show{opacity:1}

/* ============================================================ responsive */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:959px){
  .shell{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem var(--pad);z-index:12;border-right:0;border-bottom:1px solid var(--hair)}
  .side .brand{font-size:1.25rem;padding:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live{white-space:nowrap}
  .side .brand small{display:none}
  .side .nav{display:none}
  .side-foot{margin:0;flex-direction:row;align-items:center;gap:.75rem;padding:0}
  .who{flex-direction:row;align-items:center;gap:.75rem}
  #whoEmail{display:none}
  #signout{min-height:2.125rem;padding:.25rem .75rem;font-size:var(--fs-1)}
  .tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:12;height:var(--tab-h);padding:0 .5rem env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--bg) 78%,transparent);border-top:1px solid var(--hair);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;color:var(--ink-3);font-size:var(--fs-0);letter-spacing:.02em;border-radius:var(--r-sm);margin:.375rem .25rem}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.on{color:var(--copperlt)}
  .main{padding:1.125rem var(--pad) calc(var(--tab-h) + 1.5rem)}
  .page-head{margin-bottom:.875rem}
  .page-head .tools{width:100%}
  .search{min-width:0;flex:1}
  .modal.drawer{align-items:flex-end}
  .modal.drawer .sheet{width:100%;height:auto;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--hair-2);border-bottom:0}
  .modal.drawer .mhead{padding-top:1.5rem}
  .modal.drawer .dbody{padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px))}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:1rem}
  .stats{gap:.5rem}
  .stat{padding:.875rem .9rem}.stat .v{font-size:1.875rem}.stat .s{display:none}
  .earn .kpis{gap:1rem}.earn .kpi .v{font-size:1.3rem}
  .earn .legend span:last-child{display:none}
  .chart{gap:.1875rem;height:9.5rem}.col .lbl{font-size:.6rem}.col .lbl b{display:none}.col:nth-child(2n) .lbl{visibility:hidden}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:.125rem;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}.chip{flex:none}
  .bar{gap:.5rem}
  .rail{grid-auto-columns:minmax(14rem,78%)}
  /* bookings list becomes cards */
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl thead{display:none}
  .tbl{background:none;border:0;box-shadow:none;border-radius:0}
  .tbl::before{display:none}
  .tbl table{margin-top:0}
  #rows tr.row{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.125rem .75rem;align-items:start;padding:.875rem .9rem;margin:0 0 .5rem;
    border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface);box-shadow:none}
  #rows tr.row.open{box-shadow:0 0 0 1px var(--copper)}
  #rows tr.row td{padding:0}
  #rows tr.row td.when{grid-row:1/3}
  #rows tr.row td:nth-child(n+3){display:none}
  #rows tr.row .date{font-size:1.375rem}
  #rows tr.row .date small{margin-top:.25rem}
  #rows tr.row .sub{max-width:none}
  .mtotal{display:block;margin-top:.5rem;color:var(--ink);font-size:var(--fs-2);font-variant-numeric:tabular-nums}
  .mflags{display:flex}
  #rows .state{padding:1.5rem 1rem}
  /* generic list tables (leads, codes, visitors) become stacked cards */
  .sec table,.sec tbody,.sec tr,.sec td,.vlist table,.vlist tbody,.vlist tr,.vlist td{display:block}
  .sec thead,.vlist thead{display:none}
  .sec tbody tr.row,.vlist tr.vrow{display:flex;flex-wrap:wrap;gap:.375rem .875rem;padding:.875rem var(--pad);align-items:center}
  .sec tbody tr.row td,.vlist tr.vrow td{padding:0;font-size:var(--fs-2);color:var(--ink-2)}
  .sec tbody tr.row td:first-child,.vlist tr.vrow td:first-child{flex-basis:100%;color:var(--ink)}
  .sec tbody tr.row td:last-child{flex-basis:100%;margin-top:.25rem}
  .sec tbody tr.row td .sub{max-width:none;white-space:normal}
  .sec tbody tr.row td:empty,.vlist tr.vrow td:empty{display:none}
  /* phone cards label their middle cells, since the column headers are gone */
  .sec tbody tr.row td:not(:first-child):not(:last-child),.vlist tr.vrow td.r{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
  .sec tbody tr.row td::before,.vlist tr.vrow td.r::before{color:var(--ink-3);font-size:var(--fs-0);letter-spacing:.05em;text-transform:uppercase}
  #inqSec td:nth-child(2)::before{content:"Wedding"}#inqSec td:nth-child(3)::before{content:"Wants"}#inqSec td:nth-child(4)::before{content:"Found us"}#inqSec td:nth-child(5)::before{content:"Came in"}
  #leadSec td:nth-child(2)::before{content:"Wedding"}#leadSec td:nth-child(3)::before{content:"Package"}#leadSec td:nth-child(4)::before{content:"Source"}#leadSec td:nth-child(5)::before{content:"Started"}
  #codeSec td:nth-child(2)::before{content:"For"}#codeSec td:nth-child(3)::before{content:"Off"}#codeSec td:nth-child(4)::before{content:"Expires"}
  #codeSec tbody tr.row td:last-child{flex-basis:auto;margin-top:0}
  .vlist tr.vrow td:nth-child(5)::before{content:"Pages"}.vlist tr.vrow td:nth-child(6)::before{content:"Time"}.vlist tr.vrow td:nth-child(7)::before{content:"Seen"}
  .vlist tr.vrow td.r{margin-left:0}
  .sec tbody tr.compose td{padding:0 var(--pad) 1rem}
  .vlist tr.vrow td:nth-child(2),.vlist tr.vrow td:nth-child(3),.vlist tr.vrow td:nth-child(4){display:none}
  .vlist tr.vrow td.r{margin-left:auto;text-align:left}
  .mpage{display:block}
  .vlist tr.trail td{padding:.5rem var(--pad) 1rem}
  .fsteps{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.fstep{padding:.75rem}.fstep .v{font-size:1.75rem}
  .srcs,.bgrid{grid-template-columns:1fr}
  .codeform{grid-template-columns:1fr 1fr}
  .vstats{gap:1rem}.vstats .v{font-size:1.75rem}.vstats .l{font-size:var(--fs-0)}
  /* on a phone the region shortcuts sit under the map instead of over it */
  .mapwrap{display:flex;flex-direction:column}
  #map{order:1}
  .regions{position:static;order:2;max-width:none;flex-wrap:nowrap;overflow-x:auto;gap:.3rem;padding:.5rem;scrollbar-width:none;border-top:1px solid var(--hair)}
  .regions::-webkit-scrollbar{display:none}
  .regions .chip{flex:none;backdrop-filter:none;background:var(--surface-2)}
  .zoomhint{display:none}
  .kv{grid-template-columns:5.5rem 1fr}
  .cal{padding:.75rem .5rem .875rem}.cal h2{font-size:1.25rem}.cgrid{gap:.125rem}.cday{min-height:3.375rem;padding:.1875rem;border-radius:5px}.cday .dn{font-size:.8125rem}
  .cev{font-size:0;padding:0;height:6px;margin-top:.1875rem;border-radius:2px}
  .cal .top .acts{width:100%;justify-content:space-between}
  .qgrid{grid-template-columns:1fr}.modal .sheet{padding:1.25rem 1.125rem}
  .modal{padding:.75rem .5rem}
  .prodrow{grid-template-columns:1fr}
}
@media (max-width:420px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fsteps{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------- print */
@media print{
  body{background:#fff;color:#000}body::before,body::after{display:none}
  #app,.side,.tabbar,.toast{display:none!important}
  .modal{display:block!important;position:static;padding:0;background:none;backdrop-filter:none}
  .modal .sheet{border:0;box-shadow:none;background:none;backdrop-filter:none;width:100%;padding:0;color:#000}
  .modal .glass::before{display:none}.macts{display:none!important}
  .modal h2,.modal h2 em,.qsec h3{color:#000}.qsec h3{border-bottom:1px solid #999;padding-bottom:.25rem}
  .qa{border-bottom:1px solid #ddd;break-inside:avoid}.qa .k{color:#555}.qa .a{color:#000}.qa .a.empty{color:#bbb}.qhint,.msub{color:#666}
  .qsec{break-inside:avoid-page}
}

/* JC-ENGSESS-1027: questionnaire / prep sheets open from inside the booking drawer, so they must stack above it */
#qmodal{z-index:30}