/* MyHero self-serve CRM — shell, screens, components. Desktop: sidebar. Phone: header + tab bar. */
:root{--forest:#1d1d1f;--forest2:#2c2c2e;--teal:#0e6b57;--teal-d:#0a4f41;--lime:#0e6b57;--sand:#f5f5f7;--ink:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea;--card:#fff;--hot:#b3462f;--warm:#8a5a00;--ok:#1f7a4d;--blue:#1f4f8a;--radius:16px;--side:232px;--top:60px}
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--teal)}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:var(--ink)}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- app shell ---- */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{background:var(--forest);color:#e5e5ea;padding:18px 14px calc(env(safe-area-inset-bottom) + 14px);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}
.logo{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;flex:none;padding:4px 8px 14px}
.logo .o{color:var(--lime)}.logo .lmark{transform-origin:50% 50%}
@keyframes keyturn{0%{transform:rotate(0)}45%{transform:rotate(-100deg) scale(1.08)}62%{transform:rotate(-88deg) scale(1.04)}100%{transform:rotate(0)}}
.lmark.turn{animation:keyturn .85s cubic-bezier(.4,0,.2,1)}
.side .grp{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6e6e73;font-weight:600;padding:12px 10px 4px}
.side a.nl{display:flex;align-items:center;gap:10px;color:#e5e5ea;text-decoration:none;font-size:14px;font-weight:600;padding:9px 10px;border-radius:12px;position:relative}
.side a.nl:hover{background:rgba(255,255,255,.07)}
.side a.nl.on{background:rgba(255,255,255,.12);color:#fff}
.side a.nl i{font-style:normal;width:22px;text-align:center;font-size:17px;opacity:.9}
.side a.nl .cnt{margin-left:auto;font-size:12px;font-weight:600;background:var(--lime);color:var(--forest);border-radius:980px;padding:1px 7px;font-variant-numeric:tabular-nums}
.side a.nl .cnt.q{background:rgba(255,255,255,.14);color:#fff}
.side .spacer{flex:1}
.plancard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 12px 10px;margin-top:8px}
.plancard b{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#fff}
.plancard b .plan-pill{margin:0}
.plancard small{display:block;color:#aeaeb2;font-size:12px;margin-top:4px;line-height:1.4}
.plancard .bar{background:rgba(255,255,255,.12)}
.plancard .btn{margin-top:10px;width:100%;justify-content:center}
.plan-pill{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(14,107,87,.5);border-radius:980px;padding:3px 8px;font-weight:600;white-space:nowrap}
.mainwrap{min-width:0}
.top{position:sticky;top:0;z-index:20;background:rgba(245,245,247,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);height:var(--top);display:flex;align-items:center;gap:12px;padding:0 22px}
.top h1.t{font-weight:400;font-size:21px;letter-spacing:-.01em;margin:0;flex:none}
.top .sub-t{color:var(--muted);font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top .spacer{flex:1}
.top .mlogo{display:none}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--forest);font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex:none;border:0}
main{max-width:1180px;margin:0 auto;padding:20px 22px 60px}
.view{display:none}.view.on{display:block;animation:vin .18s ease}
@keyframes vin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.ph h1{font-weight:400;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
.ph p{color:var(--muted);margin:4px 0 0;font-size:14px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
h2{font-size:17px;margin:0;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card + .card{margin-top:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-h .kv{white-space:nowrap}
.grid2{display:grid;grid-template-columns:1.25fr .9fr;gap:14px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.stack>*+*{margin-top:14px}

/* ---- buttons, chips, forms ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:980px;border:1.5px solid var(--line);background:#fff;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.2;transition:background .12s,border-color .12s,transform .06s}
.btn:hover{border-color:#c7c7cc;background:#fafafa}
.btn:active{transform:translateY(1px)}
.btn.solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.solid:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn.lime{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.btn.lime:hover{background:#0e6b57;border-color:#0e6b57}
.btn.sm{padding:7px 12px;font-size:14px}
.btn.xs{padding:5px 10px;font-size:12px}
.btn.quiet{border-color:transparent;color:var(--muted);font-weight:600;background:transparent}
.btn.quiet:hover{background:#ececf1;color:var(--ink)}
.btn.danger{color:var(--hot);border-color:#f0d6cf}
.btn.danger:hover{background:#fdf2ef}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;align-items:center}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:980px;padding:6px 12px;font-size:14px;font-weight:600;color:#3a3a3c;white-space:nowrap}
.chip.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.search{width:100%;padding:11px 14px 11px 38px;border:1.5px solid var(--line);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b65' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px 50%/18px no-repeat}
.search:focus,input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,107,87,.12)}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,textarea,select.f{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
textarea{resize:vertical;min-height:44px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:480px){.three{grid-template-columns:1fr 1fr}}
.check-l{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:14px;color:var(--ink);font-weight:400}
.check-l input{width:auto;margin:0}
.actions{display:flex;gap:10px 12px;flex-wrap:wrap;margin:12px 0;align-items:center}
.actions.tight{margin:6px 0}
.ok{color:var(--teal);font-size:14px;font-weight:600}
.err{color:var(--hot);font-size:14px;margin-top:8px;min-height:1em}
.note-p{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.kv{font-size:14px;color:var(--muted)}
.kv b{color:var(--ink);font-weight:600}
.empty{color:var(--muted);padding:28px 12px;text-align:center}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-size:17px}
.empty .btn{margin-top:12px}
pre{background:var(--forest);color:var(--lime);padding:14px;border-radius:12px;font-size:12px;white-space:pre-wrap;word-break:break-all;margin:8px 0}

/* ---- KPI tiles + chart ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
@media(max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .12s,transform .06s}
.kpi:hover{border-color:#c7c7cc}
.kpi b{display:block;font-size:28px;line-height:1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.kpi.hot b{color:var(--hot)}
.bar{height:5px;background:#e5e5ea;border-radius:980px;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:980px}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .tip{position:absolute;pointer-events:none;background:var(--forest);color:#fff;font-size:12px;padding:5px 8px;border-radius:8px;transform:translate(-50%,-115%);white-space:nowrap;opacity:0;transition:opacity .12s}
.chart .tip.on{opacity:1}

/* ---- lead rows ---- */
.row{display:flex;gap:12px;align-items:flex-start;padding:12px 6px;border-top:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;font:inherit;color:inherit;border-radius:0}
.row:first-of-type{border-top:0}
.row:hover{background:#fafafa}
.row.sel{background:#e4f0ec}
.ini{width:38px;height:38px;border-radius:50%;background:#e5e5ea;color:#3a3a3c;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.ini.hot{background:#fdeee9;color:var(--hot)}.ini.warm{background:#e4f0ec;color:var(--teal)}
.row .b{flex:1;min-width:0}
.row .n{font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .m{font-size:12px;color:var(--muted);margin-top:2px}
.row .s{font-size:14px;color:#3a3a3c;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.score{display:inline-flex;align-items:center;font-size:12px;font-weight:600;border-radius:980px;padding:2px 8px;background:#f2f2f7;color:var(--muted);font-variant-numeric:tabular-nums}
.score.hot{background:#fdeee9;color:var(--hot)}.score.warm{background:#e4f0ec;color:var(--teal)}
.stage{display:inline-flex;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;border-radius:980px;padding:2px 8px;background:#f2f2f7;color:#515154}
.stage.new{background:#e7f0fb;color:var(--blue)}.stage.contacted{background:#e4f0ec;color:var(--teal)}.stage.qualified{background:#e4f0ec;color:var(--ok)}.stage.viewing{background:#fff4dc;color:var(--warm)}.stage.offer{background:#f3e8ff;color:#5b2d9c}.stage.won{background:var(--lime);color:var(--forest)}.stage.lost{background:#f0f0f0;color:#777}
.due{font-size:12px;color:var(--hot);font-weight:600}
.due.ok{color:var(--muted);font-weight:600}

/* ---- leads two-pane + detail ---- */
.leads{display:grid;grid-template-columns:400px 1fr;gap:14px;align-items:start}
@media(max-width:900px){.leads{grid-template-columns:1fr}}
.listcard{padding:4px 8px}
.detail{position:sticky;top:calc(var(--top) + 14px)}
@media(max-width:900px){
  .detail{position:fixed;inset:0;z-index:30;background:var(--sand);overflow-y:auto;padding:0 14px 120px;display:none}
  .detail.open{display:block}
  .detail .back{position:sticky;top:0;z-index:2;background:var(--sand);padding:12px 0 8px;margin:0 -14px 6px;padding-left:14px}
}
@media(min-width:901px){.detail .back{display:none}}
.dhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dhead h2{font-weight:400;font-size:21px;letter-spacing:-.02em;margin:0}
.dhead .ini{width:44px;height:44px;font-size:17px}
select.stage-sel{padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-weight:600;font-size:14px;width:auto}
.dsec{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.dsec h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.quote{border-left:3px solid var(--lime);padding:6px 12px;color:#3a3a3c;white-space:pre-wrap;font-size:14px}
.draft{background:var(--sand);border-radius:12px;padding:12px 14px;font-size:14px;white-space:pre-wrap}
.draft b{display:block;margin-bottom:4px}
.flags{font-size:12px;color:var(--warm);margin:6px 0 0}.flags li.sys{color:var(--muted)}
.summary{margin:8px 0 0;font-size:14px}
.notes .note{padding:8px 0;border-top:1px solid var(--line);font-size:14px;white-space:pre-wrap}
.notes .note:first-child{border-top:0}
.notes .note small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.notes .note.sys{color:var(--muted);font-size:14px;font-style:italic}
.notes .note.out,.notes .note.reply{border-top:0;border-radius:12px;padding:8px 10px;margin:6px 0}
.notes .note.out{background:var(--sand)}
.notes .note.reply{background:#e4f0ec}
.notes .note .who{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:2px}
.notes .note.out .who{color:var(--muted)}
.thread{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin:6px 0;padding:8px;background:var(--sand);border-radius:12px}
.thread .m{max-width:86%;padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.45;white-space:pre-wrap}
.thread .m.me{align-self:flex-end;background:var(--teal);color:#fff}.thread .m.them{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.thread .m small{display:block;font-size:12px;opacity:.7;margin-top:2px}
.inline-form{background:var(--sand);border-radius:12px;padding:12px;margin:8px 0}
.scoring{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.scoring i{width:14px;height:14px;border:2px solid #d1d1d6;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- pipeline ---- */
.pipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.col{background:#f2f2f7;border-radius:12px;padding:10px;min-height:220px;transition:background .12s}
.col.over{background:#d3e6df;outline:2px dashed var(--teal);outline-offset:-2px}
.col h3,.col .colh{margin:2px 4px 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#515154;display:flex;justify-content:space-between}
.pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:grab;width:100%;text-align:left;font:inherit;color:inherit;display:block}
.pcard:active{cursor:grabbing}
.pcard.drag{opacity:.45}
.pcard b{display:block;font-size:14px}
.pcard small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pcard .hint{display:none;margin-top:6px}
@media(max-width:900px){.pcard{cursor:pointer}}

/* ---- setup checklist / locks / tiles ---- */
.check{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.check:first-of-type{border-top:0}
.check i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;flex:none}
.check.done i{background:var(--teal);border-color:var(--teal);color:#fff}
.check.done span{color:var(--muted)}   /* a finished step is a quiet grey tick, not struck through (struck through reads as deleted) */
.check button{margin-left:auto}
.locks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:640px){.locks{grid-template-columns:repeat(2,1fr)}}
.locks .lock{border:1.5px dashed var(--line);border-radius:12px;padding:12px;text-align:left;background:#fff;font:inherit;color:var(--ink);cursor:pointer}
.locks .lock:hover{border-color:var(--teal)}
.locks .lock b{display:block;font-size:14px}
.locks .lock small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.locks .lock::before{content:"🔒 Pro";font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;display:block;margin-bottom:4px}
.locks .lock.prem::before{content:"🔒 Premium"}
.locks .lock.dev::before{content:"🔒 Developers"}
.tile{border:1.5px solid var(--line);border-radius:12px;padding:12px;text-align:left;background:#fff;text-decoration:none;color:var(--ink);display:block}
.tile:hover{border-color:var(--teal)}
.tile b{display:block;font-size:14px}
.tile small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.tile::before{content:"✓ Included";font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-weight:600;display:block;margin-bottom:4px}

/* ---- listings ---- */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lcard .img{aspect-ratio:4/3;background:#e5e5ea center/cover no-repeat;position:relative}
.lcard .img .st{position:absolute;left:8px;top:8px;background:var(--forest);color:#fff;font-size:12px;font-weight:600;border-radius:980px;padding:3px 8px}
.lcard .img .src{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.92);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;padding:2px 7px}
.lcard .bd{padding:10px 12px 6px}.lcard .bd b{display:block;font-size:17px}.lcard .bd span{display:block;font-size:14px;color:#3a3a3c}.lcard .bd small{display:block;color:var(--muted);margin-top:2px}
.lcard .ac{display:flex;gap:10px;flex-wrap:wrap;padding:4px 12px 12px}
.lcard .ac a,.lcard .ac button{font:inherit;font-size:12px;font-weight:600;color:var(--teal);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.lcard .ac .del{color:var(--hot)}

/* ---- pages & QR ---- */
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pagecard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
.pagecard .ico{width:38px;height:38px;border-radius:12px;background:#e4f0ec;color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:4px}
.pagecard b{font-size:17px}
.pagecard span{font-size:14px;color:var(--muted);line-height:1.45;flex:1}
.pagecard .actions{margin:8px 0 0}

/* ---- tables ---- */
.otable{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.otable th,.otable td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.otable th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.otable td.n{font-variant-numeric:tabular-nums;text-align:right}
.otable select{padding:5px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.dealcards{display:none}
@media(max-width:700px){
  .dealtable{display:none}.dealcards{display:grid;gap:10px}
  .dealcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
  .dealcard b{display:block;font-size:17px}
  .dealcard .dates{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:8px;font-size:14px}
  .dealcard .dates span{color:var(--muted);font-size:12px;display:block}
}

/* ---- settings tabs ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font-weight:600;color:var(--muted);white-space:nowrap;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--teal)}
.tabpane{display:none}.tabpane.on{display:block}

/* ---- sheets, toasts, progress ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:88vh;overflow-y:auto;background:#fff;border-radius:18px 18px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px);z-index:41;animation:sheetin .2s ease}
@keyframes sheetin{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(min-width:700px){.sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:18px}@keyframes sheetin{from{transform:translate(-50%,-48%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}}
.sheet h2{font-size:17px;margin-bottom:6px}
.sheet.pv{width:min(720px,100%)}
.toasts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,calc(100% - 32px))}
@media(min-width:901px){.toasts{bottom:24px}}
.toast{background:var(--forest);color:#fff;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:tin .2s ease;max-width:100%}
.toast.err{background:var(--hot)}
.toast.ok{background:var(--teal)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.progress{position:fixed;left:0;top:0;height:3px;background:var(--lime);z-index:70;width:0;opacity:0;transition:width .3s ease,opacity .3s}
.progress.on{opacity:1}

/* ---- paywall previews ---- */
.pv-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.pv-head h2{font-weight:400;font-size:21px;letter-spacing:-.02em;margin:0}
.pv-tag{color:var(--muted);margin:0 0 12px}
.pv-mock{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 12px;overflow:hidden;font-size:14px;color:#3a3a3c}
.pv-mock .win{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pv-mock .win+.win{margin-top:8px}
.pv-mock .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.pv-mock .hl{font-weight:600;color:var(--ink)}
.pv-mock .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pv-mock .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pv-mock .stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.pv-mock .stat b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.pv-mock .stat span{font-size:12px;color:var(--muted)}
.pv-mock .pill{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border-radius:8px;padding:2px 7px;background:#e4f0ec;color:var(--teal)}
.pv-mock .pill.hot{background:#fdeee9;color:var(--hot)}.pv-mock .pill.warn{background:#fff4dc;color:var(--warm)}.pv-mock .pill.lime{background:var(--lime);color:var(--forest)}
.pv-mock .steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pv-mock .step{background:#fff;border:1px solid var(--line);border-radius:980px;padding:5px 10px;font-weight:600;font-size:12px}
.pv-mock .step.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.pv-mock .bubble{max-width:82%;padding:8px 11px;border-radius:12px;background:#fff;border:1px solid var(--line);margin:4px 0}
.pv-mock .bubble.me{margin-left:auto;background:var(--teal);color:#fff;border-color:var(--teal)}
.pv-mock .grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pv-mock .day{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 4px;text-align:center;font-size:12px}
.pv-mock .day.on{background:var(--lime);border-color:var(--lime);color:var(--forest);font-weight:600}
.pv-mock .homes{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.pv-mock .home{aspect-ratio:1;border-radius:8px;background:#b0cfc3}
.pv-mock .home.held{background:#ffd98a}.pv-mock .home.sold{background:#d1d1d6}
.pv-mock .qr{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;width:88px}
.pv-mock .qr i{aspect-ratio:1;background:var(--forest);border-radius:8px}.pv-mock .qr i.o{background:transparent}
.pv-mock .field{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px;color:var(--muted)}
.pv-mock .field.ai{border-color:var(--teal);color:var(--ink)}
.pv-mock .field.you{border-color:var(--warm)}
.pv-mock .imgcard{border-radius:12px;padding:14px;color:#fff;background:linear-gradient(135deg,#1d1d1f,#0e6b57 70%,#0e6b57);min-height:110px;display:flex;flex-direction:column;justify-content:flex-end}
.pv-mock .imgcard b{font-size:17px;line-height:1.15}
.pv-mock .imgcard small{opacity:.85}
.pv-mock .gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px}
.pv-mock .gal div{border-radius:8px;min-height:44px;background:linear-gradient(135deg,#e5e5ea,#c7c7cc)}
.pv-mock .gal div:first-child{grid-row:span 2;min-height:96px;position:relative}
.pv-mock .gal div:first-child::after{content:"▶ video · 3D";position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.7);padding:2px 7px;border-radius:980px}
.pv-list{padding-left:18px;margin:0 0 14px}
.pv-list li{margin:3px 0}
.pv-cta{display:flex;gap:8px;flex-wrap:wrap}

/* ---- auth ---- */
.auth{max-width:440px;margin:30px auto 0}
.auth h1{text-align:center;font-weight:400;font-size:34px;letter-spacing:-.02em;line-height:1.1;margin:6px 0 4px}
.auth .sub{text-align:center}
.auth .btn{width:100%}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0;text-transform:uppercase;letter-spacing:.12em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.code{font-size:28px;letter-spacing:.3em;text-align:center;font-weight:600}
body.authing .side,body.authing .tabbar,body.authing .top .avatar,body.authing .top .addbtn{display:none!important}
body.authing .shell{grid-template-columns:1fr}
body.authing .top .mlogo{display:flex}

/* ---- tab bar (phones) ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:none;justify-content:space-around;padding:6px 6px calc(env(safe-area-inset-bottom) + 6px)}
.tabbar a{flex:1;text-align:center;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;padding:4px 0;position:relative}
.tabbar a b{display:block;font-size:21px;line-height:1.1}
.tabbar a.on{color:var(--teal)}
.tabbar a .dot{position:absolute;top:2px;left:calc(50% + 10px);min-width:16px;height:16px;border-radius:980px;background:var(--hot);color:#fff;font-size:12px;line-height:16px;padding:0 4px}
.morelist{display:grid;gap:8px}
.morelist a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);font-weight:600}
.morelist a i{font-style:normal;width:34px;height:34px;border-radius:12px;background:#e4f0ec;color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.morelist a small{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:1px}
.morelist a .chev{margin-left:auto;color:var(--muted)}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .top{background:var(--forest);color:#f2f2f7;border-bottom:0;padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;height:auto;gap:10px}
  .top h1.t,.top .sub-t{display:none}
  .top .mlogo{display:flex;padding:0;font-size:21px}
  .tabbar{display:flex}
  main{padding:16px 14px 110px}
  .ph h1{font-size:28px}
  .card{padding:16px 14px}
}
@media(max-width:380px){.top .addbtn{padding:7px 11px;font-size:14px}}

/* lead header on narrow screens: name gets the row, the stage select drops below */
@media(max-width:600px){.dhead{gap:10px}.dhead h2{font-size:21px}.dhead>div{flex:1 1 180px}.dhead .stage-sel{flex-basis:100%}}

/* ---- judge 1 fixes: reply-first sheet, tap targets, phone pipeline, settings tabs, listing photos ---- */
.detail .back{display:flex;align-items:center;gap:8px}
.detail .back .backname{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:901px){.detail .back{display:none}}
.dsec.replied{border-top:0;margin-top:14px;padding:12px 14px;background:#e4f0ec;border-radius:12px}
.dsec.replied h3{color:var(--teal)}
.quote.reply{border-left-color:var(--teal);background:#fff;border-radius:0 10px 10px 0;padding:8px 12px}
ul.flags{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--warm);line-height:1.5}
ul.flags li{margin:2px 0}
details.fold{margin-top:12px}
details.fold summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;list-style:none;display:flex;align-items:center;gap:6px}
details.fold summary::before{content:'›';font-size:17px;transition:transform .15s}
details.fold[open] summary::before{transform:rotate(90deg)}
details.fold summary::-webkit-details-marker{display:none}
details.fold > .draft{margin-top:8px}
.pipe.narrow{display:block;overflow:visible}
.stagechips{margin:0 0 10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
.stagechips::-webkit-scrollbar{display:none}
.lcard .img.none{aspect-ratio:auto;min-height:88px;background:repeating-linear-gradient(135deg,#f2f2f7 0 12px,#e5e5ea 12px 24px);display:flex;align-items:center;justify-content:center}
.lcard .img.none .addph{font:inherit;font-size:12px;font-weight:600;color:var(--teal);background:#fff;border:1.5px solid var(--line);border-radius:980px;padding:8px 14px;cursor:pointer}
.lcard .ac a,.lcard .ac button{padding:8px 10px;border-radius:980px;background:#f2f2f7;font-size:12px;min-height:34px;display:inline-flex;align-items:center}
.lcard .ac.quiet-ac{padding-top:0}
.lcard .ac.quiet-ac .del{background:none;color:var(--muted);font-weight:600}
.lcard .ac.quiet-ac .del:hover{color:var(--hot)}
.danger-card{border-color:#f0d6cf}
@media(max-width:640px){
  .tabs{flex-wrap:nowrap;gap:2px 4px;overflow-x:auto}
  .tabs button{padding:9px 10px;font-size:14px}
}
@media(hover:none){
  .btn.sm{min-height:44px;padding:9px 14px}.btn.xs{min-height:40px;padding:7px 12px}
  .chip{min-height:44px;display:inline-flex;align-items:center}
  .top .addbtn{min-height:44px}
  .tabbar a{font-size:12px}
}
.toasts{bottom:calc(env(safe-area-inset-bottom) + 92px)}
@media(min-width:901px){.toasts{bottom:24px}}

/* ---- judge 2 fixes: header pattern, tokens, icons, filters, contrast, a11y ---- */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--lime);color:var(--forest);padding:8px 12px;border-radius:8px;font-weight:600}
.skip:focus{left:8px}
.top{height:52px}
.top h1.t,.top .sub-t{display:none}
.side a.nl i{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center}
.side a.nl i svg{width:18px;height:18px}
.side a.nl:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.side .plancard .btn:focus-visible{outline:2px solid #fff}
.tabbar a b{height:24px;display:flex;align-items:center;justify-content:center}
.tabbar a b svg{width:22px;height:22px}
.plancard small{color:#d1d1d6}
.stage.lost{color:#6e6e73}
.score .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#aeaeb2;margin-right:6px}
.score.hot .dot{background:var(--hot)}.score.warm .dot{background:var(--teal)}
.locks .lock::before{content:"Pro";color:var(--teal);background:#e4f0ec;border-radius:8px;padding:2px 7px;display:inline-block}
.locks .lock.prem::before{content:"Premium";background:var(--lime);color:var(--forest)}
.locks .lock.dev::before{content:"Developers";background:#e7f0fb;color:var(--blue)}
.tile::before{content:"Included"}
.btn.xs{min-height:28px}.btn.sm{min-height:32px}.btn{min-height:40px}
.actions.tight{align-items:center}
#sendSubject{resize:none;overflow:hidden;min-height:44px;line-height:1.35}
/* Two allowances govern this account and only one of them was ever on screen. Whichever is nearly
   gone says so here, above the numbers, because being told everything is fine when it is not is
   what makes somebody stop trusting the rest of the screen. */
.dupwarn{margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1.5px solid #e6c98a;background:#fdf6e6}
.dupwarn b{display:block;font-size:17px;color:var(--ink)}
.dupwarn span{display:block;margin-top:2px;font-size:14px;color:#515154;line-height:1.45}
.dupwarn .actions{margin:8px 0 0}
.aistate{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;padding:13px 16px;border-radius:12px;border:1.5px solid #e6c98a;background:#fdf6e6}
.aistate.spent{border-color:#e0a3a0;background:#fdf0ef}
.aistate b{font-size:17px;color:var(--ink);flex:1 1 100%}
.aistate span{font-size:14px;color:#515154;flex:1 1 260px;line-height:1.45}
.aistate .btn{flex:none}
.pubmsg{margin:10px 0 0;font-size:17px;font-weight:600;color:#7a3a10;line-height:1.4}
/* The realtor who arrives from a photographer's pitch page has no account and no idea what this
   screen is. This tells her whose page it is and what claiming does, before the email box. */
.claimbox{margin:0 0 14px;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line);background:#f5f5f7}
.claimbox b{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}
.claimbox span{display:block;font-size:14px;color:#515154;line-height:1.45}
/* Answer is harmless; Book viewing puts an appointment in a real diary. Room between them. */
.dsec.replied .actions{gap:14px 12px}
.actions.tight input,.actions.tight textarea{min-height:40px;padding-top:8px;padding-bottom:8px}
.actions.tight textarea{resize:none}
.actions.tight .btn.sm{min-height:40px}
.chips{flex-wrap:wrap;overflow:visible;gap:8px;padding-right:4px}
.chips::-webkit-scrollbar{display:none}
.seg{display:inline-flex;flex:0 0 auto;flex-wrap:nowrap;gap:0;background:#fff;border:1.5px solid var(--line);border-radius:980px;padding:3px}
.seg .chip{border:0;background:transparent;padding:6px 12px;min-height:30px}
.seg .chip.on{background:var(--forest);color:#fff}
.chip.sel{padding-right:30px;appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b65' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/14px no-repeat}
#sort{margin-left:auto}
.link{background:none;border:0;padding:0;font:inherit;color:var(--teal);font-weight:600;cursor:pointer;text-decoration:underline}
details.fold.more{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
details.fold.more > summary{font-size:12px}
details.fold.more .dsec:first-of-type{border-top:0;padding-top:4px}
.pipe{grid-auto-columns:minmax(150px,1fr)}
.col{min-height:160px}
.pcard{padding:9px 10px}
.pcard b{font-size:14px}
.otable{min-width:0;font-size:12px}
.otable th,.otable td{white-space:normal;padding:8px 6px;vertical-align:top}
.sheet form > .actions:last-of-type,.sheet > .actions:last-child{position:sticky;bottom:calc(-1 * (env(safe-area-inset-bottom) + 18px));background:#fff;padding:12px 0;margin:8px 0 calc(-1 * (env(safe-area-inset-bottom) + 18px));border-top:1px solid var(--line)}
@media(min-width:700px){.sheet form > .actions:last-of-type,.sheet > .actions:last-child{bottom:-18px;margin-bottom:-18px}}
/* More on a phone: two short lists, Account first (Settings on top) and then Your tools; the plan catalog is its own screen, Plans & add-ons (#plans) */
#moreNav.morelist{gap:0}#moreNav .mh{font-size:14px;line-height:1.43;font-weight:600;color:var(--muted);margin:20px 4px 8px}#moreNav .mh:first-child{margin-top:0}
#moreNav .mg{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
#moreNav .mg a{border:0;border-radius:0;border-top:1px solid var(--line);padding:12px 16px;min-height:64px;gap:14px}#moreNav .mg a:first-child{border-top:0}
#moreNav .mg a i{width:40px;height:40px;border-radius:50%;flex:none}#moreNav .mg a>span:not(.chev){min-width:0;font-size:17px;line-height:1.24}#moreNav .mg a small{font-size:14px;line-height:1.43;margin-top:2px}
.moreback{display:none;margin:0 0 8px;padding-left:0}
.avatar .av-g{display:none}
@media(max-width:900px){#v-more:not(.plans)>.card{display:none}#v-more.plans #moreNav{display:none}#v-more.plans .moreback{display:inline-flex}.avatar .av-l{display:none}.avatar .av-g{display:block;margin:auto}}
@media(min-width:901px){#moreNav{display:none}.top .plan-pill{display:none}}
@media(max-width:900px){.top{height:auto}}

/* the leads column must never grow past the viewport because its filter row scrolls */
.leads>*{min-width:0}
.listcard{min-width:0;overflow:hidden}

/* long notes, links and pasted tokens wrap instead of widening the card */
.notes .note,.quote,.summary,.row .s,.thread .m,.draft{overflow-wrap:anywhere;word-break:break-word}
.detail{min-width:0}
input[aria-invalid="true"]{border-color:var(--hot)}

/* ---- pages & QR editor ---- */
.qrcard{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.qr-box{flex:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;width:200px;height:200px}.qr-box img{width:100%;height:100%;display:block}
.qr-side{flex:1;min-width:240px}.qr-side h2{margin:0 0 4px}
.segq{display:inline-flex;flex-wrap:wrap;gap:4px;background:#f2f2f7;border-radius:12px;padding:4px}
.segq button{border:0;background:transparent;border-radius:12px;padding:7px 12px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;min-height:34px}
.segq button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.pagerows{display:grid;gap:8px;margin-top:14px}
.pagerow{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.pagerow .t{flex:1;min-width:180px}.pagerow b{display:block;font-size:14px}.pagerow span{font-size:14px;color:var(--muted);display:block}.pagerow .actions{margin:0}
.avatar-edit{display:flex;gap:14px;align-items:center;margin:4px 0 14px}
.avatar-pv{width:72px;height:72px;border-radius:50%;background:#f5f5f7 center/cover no-repeat;border:1px solid #d2d2d7;flex:none}
.avatar-edit b{font-size:14px}
.cover-edit{margin:0 0 4px}
.cover-pv{height:110px;border-radius:12px;background:#f5f5f7 center/cover no-repeat;border:1px solid #d2d2d7;display:flex;align-items:flex-end;padding:10px;color:#6e6e73;font-size:14px;margin-bottom:8px}
.cover-pv.has span{display:none}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0 8px}.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:4/3;border-radius:12px;background:#e5e5ea center/cover no-repeat;overflow:hidden}
.thumb button{position:absolute;right:4px;top:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.82);color:#fff;font-size:14px;cursor:pointer;line-height:1}
.switches{display:grid;gap:6px;margin:4px 0 0}
.switches label{display:flex;gap:10px;align-items:center;margin:0;padding:8px 10px;background:#f5f5f7;border-radius:12px;font-size:14px;color:var(--ink);font-weight:400;cursor:pointer}
.switches label input{width:auto;margin:0;flex:none}.switches label small{color:var(--muted);font-weight:400;display:block;font-size:14px;line-height:1.35}
.rev{background:#f5f5f7;border-radius:12px;padding:10px;margin:6px 0 0}.rev textarea,.rev input{margin:0 0 6px}.rev .actions{margin:0}
.lockrow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#f5f5f7;border:1px dashed #c7c7cc;border-radius:12px;padding:10px 12px;margin:10px 0 0;cursor:pointer}
.lockrow b{display:block;font-size:14px}.lockrow span{font-size:14px;color:var(--muted)}.lockrow .pro-pill{color:var(--lime)}
.pro-pill{background:var(--forest);color:var(--lime);font-size:12px;font-weight:600;letter-spacing:.06em;border-radius:980px;padding:3px 9px;text-transform:uppercase;flex:none}
@media(max-width:700px){.qr-box{width:150px;height:150px}.qrcard{gap:14px}}

/* field grids never force the card wider than the phone: inputs shrink, three columns become two */
.two>*,.three>*{min-width:0}input,select.f,textarea{min-width:0}
@media(max-width:600px){.three{grid-template-columns:1fr 1fr}}

/* the editor column never takes its width from a chip row: it shrinks to the phone and rows wrap inside it */
.grid2>*,.stack{min-width:0}#svcChips{flex-wrap:wrap;overflow:visible}

/* ---- today queue, call outcome bar, deposits, import ---- */
.qitem{border-bottom:1px solid var(--line)}.qitem:last-child{border-bottom:0}.qitem .qacts{display:flex;gap:10px 12px;flex-wrap:wrap;padding:0 0 10px 58px}
.callbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff8e6;border:1px solid #f1dfae;border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:14px;font-weight:600}
.deps{display:grid;gap:6px;margin:6px 0 8px}.dep{display:flex;gap:10px;align-items:center;margin:0;padding:8px 10px;background:#f5f5f7;border-radius:12px;font-size:14px;font-weight:400;color:var(--ink);cursor:pointer}.dep input{width:auto;margin:0}.dep small{margin-left:auto;color:var(--muted);font-weight:400}.dep.ok{background:#e4f0ec}.dep.ok small{color:var(--ok)}
.impmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:6px 0 10px}.impmap label{margin:0;padding:8px 10px;background:#f5f5f7;border-radius:12px;font-weight:600;color:var(--ink)}.impmap label span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;overflow-wrap:anywhere}
.rel{display:block;font-size:12px;color:var(--muted);font-weight:400}
@media(max-width:700px){.dealcard .dates{font-size:14px}.dealcard .dates b{font-size:14px}}

/* ---- round two: controls, focus, targets, switches, the save bar ---- */
input[type=checkbox],input[type=radio]{accent-color:var(--teal);width:18px;height:18px;flex:0 0 auto;margin:0}
.switches label input{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:12px;background:#d1d1d6;position:relative;transition:background .15s;cursor:pointer}
.switches label input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.switches label input:checked{background:var(--teal)}.switches label input:checked::after{left:21px}
.switches label input:disabled{opacity:.45;cursor:not-allowed}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{outline:none;box-shadow:0 0 0 3px rgba(14,107,87,.35)}
.nowrap{white-space:nowrap}
.thumb button{width:32px;height:32px;font-size:14px}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 16px;background:rgba(0,0,0,.96);color:#fff;font-size:14px;font-weight:600;backdrop-filter:blur(6px)}
@media(max-width:700px){.savebar{bottom:64px}}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin:12px 0 4px}.dgrid div{background:#f5f5f7;border-radius:12px;padding:10px 12px}.dgrid b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.dgrid span{display:block;font-size:17px;font-weight:600;margin-top:2px}.dgrid small{display:block;font-size:12px;color:var(--teal);font-weight:600}.dgrid .soon span{color:var(--hot)}.dgrid .past span{color:var(--muted);font-weight:600}
@media(max-width:480px){.two>div:has(input[type=datetime-local]){grid-column:1/-1}}
@media(hover:none){.btn.sm{min-height:44px}.chip{min-height:44px}.avatar{width:40px;height:40px}.seg .chip{min-height:44px}}
@media(prefers-reduced-motion:reduce){.switches label input,.switches label input::after{transition:none}}
@media(max-width:700px){.dgrid{grid-template-columns:1fr 1fr}}

/* ---- round three: phone filter row, deposit rows, targets, the overlay title ---- */
@media(max-width:480px){.chips{flex-wrap:wrap;overflow:visible}.chips .seg{flex:0 0 auto}.chips .sel{flex:1 1 40%}}
.deprow{display:grid;grid-template-columns:1.3fr 1fr 1fr auto auto;gap:6px;align-items:center;margin:6px 0}.deprow input[type=text],.deprow input:not([type]){min-width:0}.deprow .check-l{font-size:12px;white-space:nowrap}
@media(max-width:600px){.deprow{grid-template-columns:1fr 1fr;grid-template-areas:"l l" "a d" "r x"}.deprow>input:nth-child(1){grid-area:l}.deprow>input:nth-child(2){grid-area:a}.deprow>input:nth-child(3){grid-area:d}.deprow>label{grid-area:r}.deprow>button{grid-area:x;justify-self:end}}
@media(hover:none){.btn.xs{min-height:44px;padding:8px 12px}.thumb button{width:44px;height:44px}}
@media(max-width:900px){.detail .back .backname{display:none}}

/* ---- round four: touch targets, the settings tab strip, the save bar beside the sidebar ---- */
@media(hover:none){.chip{min-height:44px;padding:10px 14px}.btn.sm,.sheet .btn,.stage-sel,select,.avatar{min-height:44px}.avatar{width:44px;height:44px}.deprow .check-l{min-height:44px;display:inline-flex;align-items:center}}
.tabs.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
@media(min-width:901px){.savebar{left:var(--side)}}
.seqsteps{margin:6px 0 0;padding-left:18px;font-size:14px;color:#3a3a3c;line-height:1.5}.seqsteps li{margin:2px 0}.seqauto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;margin:6px 0 10px}.seqauto label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.seqauto select{margin:0}
@media(hover:none){.actions.tight .btn.sm,.segq button,.tabs button{min-height:44px}}
@media(min-width:901px){#v-settings .card{max-width:720px}}
@media(hover:none){#v-settings .actions .btn,.link{min-height:44px;display:inline-flex;align-items:center}}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.switch input:focus-visible+span,.check-l input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(min-width:1240px){#v-settings .tabpane.on{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start}#v-settings .tabpane>.card:only-child{grid-column:1/-1;max-width:720px}#v-settings .tabpane.on>.card+.card{margin-top:0}}

/* Choosing the look of your public pages. Four swatches, each painted in its own colours so the
   choice is made by eye rather than by reading. The selected one is marked by a ring AND a tick,
   never by colour alone. */
.themes{border:0;margin:0 0 14px;padding:0}
.themes legend{padding:0;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted,#6e6e73);margin-bottom:7px}
.themes .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}
.themes label{position:relative;display:block;border:1.5px solid var(--line,#e5e5ea);border-radius:12px;padding:0;cursor:pointer;overflow:hidden;background:#fff}
.themes input{position:absolute;opacity:0;width:1px;height:1px}
.themes .sw{height:56px;display:flex;align-items:flex-end;gap:5px;padding:8px}
.themes .sw i{display:block;width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.28)}
.themes .tx{padding:8px 10px 10px;border-top:1px solid var(--line,#e5e5ea)}
.themes .tx b{display:block;font-size:14px}
.themes .tx span{display:block;font-size:14px;line-height:1.35;color:var(--muted,#6e6e73);margin-top:2px}
.themes label:hover{border-color:#aeaeb2}
.themes .sw.hd{background:#f5f5f7;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:10px 12px}
.themes .sw.hd b{display:block;height:6px;width:62%;border-radius:8px;background:#1d1d1f}.themes .sw.hd b+b{height:4px;width:80%;background:#aeaeb2}
.themes .sw.hd i{display:none;border:0;background:#c7c7cc}
.themes .sw.hd-portrait i{display:block;width:22px;height:22px;border-radius:50%}.themes .sw.hd-cover i{display:block;align-self:stretch;width:auto;height:14px;border-radius:8px}
.themes label.off{opacity:.6;cursor:not-allowed}
.themes input:focus-visible+.sw{outline:2px solid var(--brand,#1d1d1f);outline-offset:-2px}
.themes input:checked~.tx b::after{content:" \2713";color:var(--brand,#1d1d1f);font-weight:600}
.themes label:has(input:checked){border-color:var(--brand,#1d1d1f);box-shadow:0 0 0 2px rgba(0,0,0,.22)}

/* Text for a screen reader only: a bare checkbox in a table tells a sighted person what it is by
   its column heading, and tells everyone else nothing at all. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Every control in a listing row is a real tap target. 42x35 is a miss on a phone, and a miss on
   the Edit button is a realtor jabbing at their own listing. */
@media(max-width:700px){.ac a,.lcard .ac button,.lcard .ac a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px}}
/* the list of an account with more leads than the app holds: a page at a time */
.listmore{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 8px 12px;color:#4a5750;font-size:14px;text-align:center}
.listmore .btn{min-height:44px;min-width:200px}
.listmore .btn[aria-disabled="true"]{cursor:progress}

/* ---- Paste and fill (Add listing): the box at the top of the sheet, the progress line, and the cue on filled boxes ---- */
.pastefill{margin:10px 0 14px;padding:12px 12px 8px;border:1.5px solid var(--line);border-radius:12px;background:#f5f5f7}
.pastefill label{margin:0 0 4px;color:var(--ink);font-size:14px}
.pastefill textarea{min-height:92px}
.pastefill .note-p{font-size:14px;color:#3a3a3c}
.pastefill .pf-msg{font-weight:600;color:var(--ink)}
.pastefill[aria-busy="true"] .pf-msg::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:2px solid var(--teal);border-right-color:transparent;border-radius:50%;animation:pfspin .8s linear infinite}
@keyframes pfspin{to{transform:rotate(360deg)}}
.pf-notes{margin:6px 0 0;padding-left:20px;font-size:14px;line-height:1.5;color:#3a3a3c}
.pf-notes li{margin:3px 0}
#listForm .pf{border-color:var(--teal);background:#f1f7f4}

/* ---- group consent, campaigns, contracts (15 Oct 2026) ---- */
.side a.nl .lockt{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#aeaeb2;border:1px solid rgba(255,255,255,.25);border-radius:980px;padding:1px 7px}
.gc-big{margin:8px 0 0;font-size:17px;line-height:1.5}
.gc-big b{font-variant-numeric:tabular-nums}
.gc-done{margin:6px 0 0;font-weight:600;color:var(--ok)}
.gc-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px;font-size:14px;color:#3a3a3c;line-height:1.45}
.gc-list li b{font-variant-numeric:tabular-nums}
fieldset.aud-f{border:0;margin:16px 0 0;padding:0;min-width:0}
fieldset.aud-f legend{font-size:14px;font-weight:600;color:var(--ink);padding:0;margin:0 0 4px}
.aud{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 16px}
.aud .check-l{margin:0;padding:6px 0;font-weight:400;align-items:flex-start}
.aud .check-l input{margin-top:3px;flex:none}
.countbox{border:1.5px solid var(--line);border-radius:12px;background:#f5f5f7;padding:14px 16px;margin-top:18px}
.countbox{min-height:132px;transition:opacity .15s}
.countbox.busy{opacity:.55}
.countbox .big{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.countbox .big b{font-variant-numeric:tabular-nums}
.countbox ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:5px;font-size:14px;color:#3a3a3c;line-height:1.45}
.countbox li b{font-variant-numeric:tabular-nums}
.camprow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line)}
.camprow .t{flex:1 1 240px;min-width:0}
.camprow .t b{display:block;font-size:17px;overflow-wrap:anywhere}
.camprow .t small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px;overflow-wrap:anywhere}
.camprow .r{display:flex;gap:10px;align-items:center}
.card-h + .camprow{border-top:0}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media(max-width:560px){.cstats{grid-template-columns:repeat(2,1fr)}}
.cstat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cstat b{display:block;font-size:28px;line-height:1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cstat span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.preview{border:1.5px dashed var(--line);border-radius:12px;padding:16px;background:#fff;margin-top:14px}
.preview .subj{margin:0 0 10px;font-weight:600;font-size:17px;overflow-wrap:anywhere}
.preview .msg{white-space:pre-wrap;font-size:17px;line-height:1.55;overflow-wrap:anywhere}
.preview .foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
dl.conf{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 0;font-size:14px}
dl.conf dt{color:var(--muted);font-weight:600}
dl.conf dd{margin:0;overflow-wrap:anywhere}
.ct-setup{border-color:#a8681a;background:#fdf6e6}
.ct-cards{display:none}
.ct-table td.wrap{white-space:normal;min-width:160px;max-width:280px;overflow-wrap:anywhere}
.ct-table .kvn{color:var(--muted);font-size:12px}
@media(max-width:700px){.dealtable-x{display:none}.ct-cards{display:grid;gap:10px}}
#ctLeadPicked{display:flex;align-items:center;gap:10px;margin-top:6px;font-weight:600}
.ct-hits{display:grid;gap:6px;margin-top:6px}
.ct-hit{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;min-height:44px;color:var(--ink)}
.ct-hit:hover{border-color:var(--teal)}
.ct-hit small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}

/* the phone header on a Premium account ran 5px past a 390px screen (the longer plan label); tighten it only where it needs it */
@media(max-width:420px){.top{gap:8px;padding-left:12px;padding-right:12px}.top .plan-pill{letter-spacing:.06em;padding:3px 7px}}

/* ---- smart import: one summary card, its numbers, and the "who agreed, and how?" and Finish setup sheets ---- */
.note-p.warn{color:#7a3a10;font-weight:600}
.impcard{margin-top:12px;padding:16px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.impcard h4{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.impnums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:12px 0 0;padding:0}
.impnums dt{font-size:14px;color:#3a3a3c;line-height:1.35}
.impnums dd{margin:2px 0 0;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
@media(max-width:420px){.impnums{gap:10px 12px}.impnums dd{font-size:21px}}
.impcard h4:focus-visible{outline-offset:4px;border-radius:8px}
.agrow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.agrow:first-child{border-top:0}
.agrow .check-l{margin:0;align-items:flex-start}
.agrow .check-l input{margin-top:3px;flex:none}
.agrow .check-l b{display:block;overflow-wrap:anywhere}
.agrow .check-l small{display:block;color:var(--muted);font-size:12px;margin-top:1px;font-weight:400}
.agrow select{width:100%;margin:0}
#suForm>div{margin-top:12px}
#suForm label{display:block}
.su-wait{margin:8px 0 6px;padding:10px 12px;border-radius:12px;background:#f5f5f7;border:1.5px solid var(--line);font-size:14px;line-height:1.5;color:#26332c;overflow-wrap:anywhere}
.su-done{margin:8px 0 0;font-weight:600;color:var(--ok);overflow-wrap:anywhere}
/* the state-of-things card on Campaigns: a ticked line is information, not a finished chore, so it is not struck through */
.status .check{align-items:flex-start;flex-wrap:wrap}
.status .check i{margin-top:1px}
.status .check span{flex:1 1 220px;min-width:0;line-height:1.45}
.status .check.done span{text-decoration:none;color:var(--ink)}
.status .check button{margin-left:32px;flex:none}
@media(min-width:561px){.status .check button{margin-left:auto}}

/* ---- Bookings (coming soon): a placeholder that records interest and nothing else ---- */
.bk-p{font-size:17px;line-height:1.55;color:var(--ink);margin:8px 0 0;max-width:68ch}
.bk-note{background:#fff4dc;color:#6b4500;border-radius:12px;padding:10px 12px}
.bk-next{color:#3a3a3c}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0 4px}
.bk-tile{border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px;min-width:0}
.bk-tile.on{border-color:var(--teal);background:#f1f7f4}
.bk-tile>svg{color:var(--teal)}
.bk-tile h3{margin:2px 0 0;font-size:17px;color:var(--ink)}
.bk-tile p{margin:0 0 6px;font-size:17px;line-height:1.45;color:#3a3a3c}
.bk-tile .btn{min-height:44px;margin-top:auto;white-space:normal;text-align:center}
.bk-form{max-width:720px}
.bk-form label{font-size:14px;color:var(--ink)}
.bk-form input,.bk-form select{min-height:44px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:640px){.bk-row{grid-template-columns:1fr}}
.bk-consent{align-items:flex-start;line-height:1.5;margin-top:14px;font-size:17px;min-height:44px}
.bk-consent input{margin-top:3px;width:22px;height:22px}
.bk-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.bk-go{min-height:44px}
.bk-fine{font-size:14px}
.bk-done{background:#e4f0ec;border:1px solid #bcd8cd;border-radius:12px;padding:14px 16px;margin-top:10px;color:var(--ink)}
.bk-done:focus{outline:2px solid var(--teal);outline-offset:2px}
.bk-counts{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.bk-counts li{display:flex;justify-content:space-between;gap:10px;background:#f5f5f7;border-radius:12px;padding:10px 12px;font-size:17px}
.bk-h3{font-size:17px;margin:18px 0 6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.bk-plist{list-style:none;margin:0;padding:0}
.bk-plist li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;font-size:17px;line-height:1.5}
.bk-plist li:first-child{border-top:0}
.bk-pwho{min-width:0;overflow-wrap:anywhere}
.bk-rm{min-height:44px;flex:none}

/* ---- Studio pass (17 Oct 2026): one type scale, one voice, quiet chrome ----
   Scale: 12 caption / 14 UI / 15 body / 17 lead / 20 / 24 / 28 / 34. Sans only: the old serif headings fell back to Georgia, whose
   old-style figures made every number look uneven. Weights stop at 600. Pills become quiet text actions; only the primary action is filled. */
@font-face{font-family:"Inter";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--hair:rgba(0,0,0,.1)}
body,button,input,select,textarea{font-family:var(--sans)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.018em}
.ph h1{font-size:28px;line-height:1.14;letter-spacing:-.022em}
.top h1.t{font-size:17px;letter-spacing:-.012em}
.kpi b,.stat b{font-weight:600;letter-spacing:-.025em}
.countbox .big,.cstat b,.impnums dd{font-size:21px;font-weight:600;letter-spacing:-.022em}
.auth h1{font-size:34px;font-weight:600;letter-spacing:-.025em}
.dhead h2,.pv-head h2{font-size:21px}
/* headings take focus after a screen change; they are not controls, so they carry no box */
h1:focus,h1:focus-visible,h2:focus,h2:focus-visible,h3:focus,h3:focus-visible{outline:none}
/* buttons: hairline, regular weight; secondary actions are text, the one primary action is filled */
.btn{font-weight:400;border:1px solid var(--hair)}
.btn.solid,.btn.lime{font-weight:600}
.btn.solid,.btn.lime{border-color:transparent}
.btn.xs:not(.solid):not(.lime){border-color:transparent;background:transparent;color:var(--teal);font-weight:400}
.btn.xs.quiet{color:var(--muted)}
.btn.xs:not(.solid):not(.lime):hover{background:rgba(0,0,0,.05)}
.lcard .ac a,.lcard .ac button{background:transparent;border-radius:8px;font-weight:400}
.lcard .ac a:hover,.lcard .ac button:hover{background:rgba(0,0,0,.05)}
.lcard .ac.quiet-ac .del{font-weight:400}
.side a.nl{font-weight:400}
.chip{font-weight:400}
.plan-pill,.side .grp{font-weight:600}
/* phone: inputs at 16px so iOS does not zoom on focus; the plan pill lives in Settings, not the header */
@media(max-width:700px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:17px}.top .plan-pill{display:none}}
b,strong{font-weight:600}
.row .m b{font-weight:400}
.qitem .qacts{gap:2px 4px;padding-left:46px}
/* listing cards: actions are quiet links aligned with the text above them */
.lcard .ac{gap:0 16px;padding:0 12px 12px}
.lcard .ac a,.lcard .ac button{padding:8px 0;min-height:34px}
@media(hover:hover){.lcard .ac a,.lcard .ac button{padding:4px 0;min-height:28px}}
.lcard .ac a:hover,.lcard .ac button:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
@media(hover:none),(max-width:700px){.lcard .ac{gap:0 2px;padding:0 0 10px}.lcard .ac a,.lcard .ac button{padding:10px 12px;min-height:44px}}

/* ---- Apple theme ---- */
:root{--accent:#0e6b57;--accent-d:#0a4f41;--hot:#d70015;--warm:#b25e00;--ok:#248a3d}
.btn{border-radius:12px}
.btn.lime,.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.lime:hover,.btn.solid:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.xs:not(.solid):not(.lime){color:var(--accent)}.btn.xs.quiet{color:var(--muted)}
.avatar{background:#e5e5ea;color:var(--ink)}
.side a.nl .cnt{background:var(--accent);color:#fff}
.stage.won{background:#e6f4ea;color:#248a3d}
.stage.contacted{background:#f2f2f7;color:#515154}
.stage.qualified{background:#e4f0ec;color:#0a4f41}
.score.warm,.ini.warm{background:#e4f0ec;color:#0a4f41}
.score.warm .dot{background:var(--accent)}
.chip{border-radius:12px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg{background:#e9e9ee;border:0;border-radius:12px}.seg .chip{border-radius:8px}
.seg .chip.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.lcard .ac a,.lcard .ac button{color:var(--accent)}
.lcard .ac .del,.lcard .ac.quiet-ac .del{color:var(--muted)}
.tabbar a.on{color:var(--accent)}
/* phone: buttons are iOS-style, tinted grey with blue text and no outline, 44px, the one primary action filled */
@media(max-width:700px){
  .btn{min-height:44px;border-radius:12px;font-size:17px;font-weight:400;padding:11px 16px;border-color:transparent;background:#f2f2f7;color:var(--accent)}
  .btn.solid,.btn.lime{background:var(--accent);color:#fff;font-weight:600}
  .btn.quiet{background:transparent;color:var(--muted)}
  .btn.xs:not(.solid):not(.lime){background:transparent;padding:10px 10px;font-size:17px}
  .btn.danger{background:#fff0ef;color:#d70015}
  #detailCard>.actions .btn.sm{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}
  .dsec .actions.tight input[type=date]{flex:1 1 100%;width:100%!important}
  .dsec .actions.tight input[type=date]~.btn.sm{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
  .chip{border-radius:12px}
  .qitem .qacts{gap:4px 2px;padding-left:58px}
  .qitem .qacts .btn[data-q=snooze],.qitem .qacts .btn[data-q=hide]{order:2;font-size:14px;color:var(--muted);min-height:36px}
  .qitem .qacts .btn[data-q=done]{order:1}
}

/* A: light sidebar and header */
.lmark circle{fill:#0e6b57}.logo .o{color:#0e6b57}
.side{background:#f5f5f7;color:var(--ink);border-right:1px solid var(--line)}
.logo{color:var(--ink)}
.side .grp{color:#6e6e73}
.side a.nl{color:#3a3a3c}
.side a.nl:hover{background:rgba(0,0,0,.05)}
.side a.nl.on{background:rgba(14,107,87,.12);color:var(--accent)}
.side a.nl .cnt,.side a.nl .cnt.q{background:#e5e5ea;color:#3a3a3c}
.side a.nl.on .cnt{background:var(--accent);color:#fff}
.plancard{background:#fff;border:1px solid var(--line)}.plancard b{color:var(--ink)}.plancard small{color:var(--muted)}.plancard .bar{background:#e5e5ea}
.side a.nl .lockt{color:#6e6e73;border-color:#d2d2d7}
.plan-pill{color:var(--accent);border-color:rgba(14,107,87,.35)}
.side a.nl:focus-visible{outline-color:var(--accent)}
@media(max-width:900px){.top{background:rgba(245,245,247,.88);color:var(--ink);border-bottom:1px solid var(--line)}}
.skip{background:var(--accent);color:#fff}
.stage.won{color:#1d6b30}
.pro-pill,.lockrow .pro-pill{background:var(--accent);color:#fff}
.side a.nl.on{background:rgba(14,107,87,.1);color:#0a4f41}
pre{background:#f2f2f7;color:#1d1d1f;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.side .plancard small,#plancard small{color:#6e6e73;opacity:1!important}
.side a.nl.on .lockt,.side a.nl:hover .lockt{color:#515154;border-color:#8e8e93}

/* ---- Events ---- */
.ev-p{margin:0 0 8px;font-size:17px;line-height:1.5;color:var(--ink)}
.ev-p b{font-weight:600}
.ev-sum{margin:10px 0 0;font-size:17px;font-weight:400;color:var(--ink)}
.ev-sum.bad{color:#a02818}
.ev-presets{margin:0 0 6px}
.ev-pic img{display:block;max-width:100%;width:320px;border-radius:12px;margin:6px 0 8px}
.ev-link{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ev-link input{flex:1 1 240px;min-width:0}
.ev-slotlist{display:grid}
.ev-slotrow{display:grid;grid-template-columns:1fr 110px auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.ev-st b{display:block;font-weight:600}
.ev-st small{display:block;color:var(--muted);font-size:14px}
.ev-sa{display:flex;gap:4px;flex-wrap:wrap}
.ev-rowerr{grid-column:1/-1;color:var(--hot);font-size:14px;line-height:1.43}
.ev-rowerr:empty{display:none}
@media(max-width:700px){.ev-slotrow{grid-template-columns:1fr 104px}.ev-sa{grid-column:1/-1}}
.ev-filters{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;margin:0 0 10px}
@media(max-width:700px){.ev-filters{grid-template-columns:1fr}}
.ev-guest{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.ev-gw b{font-weight:600}
.ev-gw small{display:block;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.ev-ga{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}
.ev-head .card-h .actions{flex-wrap:nowrap;flex:none}
.ev-head .card-h h2{min-width:0;overflow-wrap:anywhere}
.ev-roles{border:0;padding:0;margin:12px 0 0;min-width:0}
.ev-roles legend{font-size:14px;font-weight:600;padding:0;margin:0 0 6px}
.ev-role{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin:0 0 8px;cursor:pointer;min-height:44px;background:#fff}
.ev-role input{margin-top:4px;flex:none}
.ev-role b{display:block;font-weight:600}
.ev-role small{display:block;color:var(--muted);font-size:14px;line-height:1.43}
.ev-role:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.ev-act{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.ev-act:first-child{border-top:0}
.ev-aw{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ev-aw small{display:block;color:var(--muted);font-size:14px;line-height:1.43;margin-top:2px}
.ev-tabs{display:flex;max-width:100%;overflow-x:auto}
.ev-tabs .chip{min-height:40px;padding:8px 16px;white-space:nowrap}
@media(hover:none),(max-width:700px){.ev-tabs .chip{min-height:44px}}
@media(max-width:700px){.ev-tabs{display:flex;width:100%;overflow:visible}.ev-tabs .chip{flex:1 1 auto;padding:8px 4px;text-align:center}}
.ev-state{color:var(--muted);font-size:14px}
.ev-mail .ev-p:last-child{margin-bottom:0}

/* ---- Events: the door and the invitations ---- */
.ev-cam{position:relative;margin:12px 0;border-radius:18px;overflow:hidden;background:#000;max-width:520px}
.ev-cam video{display:block;width:100%;max-height:56vh;object-fit:cover}
.ev-aim{position:absolute;inset:16% 16%;border:3px solid rgba(255,255,255,.92);border-radius:18px;box-shadow:0 0 0 9999px rgba(0,0,0,.3);pointer-events:none}
.ev-cammsg{min-height:1.4em;margin:8px 0 0}
.ev-auto{margin:12px 0}
.ev-result{margin:12px 0;padding:16px 18px;border-radius:18px;border-left:8px solid #c7c7cc;background:#f2f2f7;color:var(--ink);display:grid;gap:4px;font-size:17px;line-height:1.4}
.ev-result b{font-size:21px;letter-spacing:-.02em;font-weight:600}
.ev-result .ev-who{font-size:21px;font-weight:600}
.ev-result .ev-prof{font-size:14px}
.ev-result.ok{background:#d9f2e0;border-color:#1d7a3a;color:#0b3a1a}
.ev-result.warn{background:#ffeab8;border-color:#a8670a;color:#4a2f00}
.ev-result.bad{background:#fbd9d4;border-color:#b3261e;color:#5c0f08}
.ev-result.idle{color:#515154}
.ev-result:focus{outline:none}
.ev-result .actions{margin-top:6px}
.ev-hits{margin-top:6px}
.ev-hit{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.ev-table{display:grid;font-variant-numeric:tabular-nums}
.ev-tr{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:6px;padding:9px 0;border-top:1px solid var(--line);align-items:center;font-size:17px}
.ev-th{border-top:0;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ev-tr.now{background:#e4f0ec;border-radius:12px;padding-left:8px;padding-right:8px}
.ev-tot{font-weight:600;border-top:2px solid var(--line)}
.ev-l{display:none}
.ev-nowtag{font-style:normal;font-size:12px;font-weight:600;background:var(--accent);color:#fff;border-radius:8px;padding:1px 6px;text-transform:uppercase}
.ev-zero{color:var(--muted)}
.ev-over{color:#b3261e}
.ev-bad{color:#a02818}
@media(max-width:700px){
  .ev-th{display:none}
  .ev-tr{grid-template-columns:repeat(5,1fr);gap:4px 6px;font-size:17px}
  .ev-tr>span:first-child{grid-column:1/-1;font-weight:600}
  .ev-l{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
}
.ev-modes{border:0;margin:0 0 6px;padding:0;display:grid;gap:8px;min-width:0}
.ev-modes legend{font-size:12px;color:var(--muted);font-weight:600;padding:0;margin:10px 0 4px}
.ev-mode{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;margin:0;font-size:17px;color:var(--ink);font-weight:400;min-height:44px}
.ev-mode input{width:22px;height:22px;margin:2px 0 0;flex:none}
.ev-mode b{display:block;font-weight:600}
.ev-mode small{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.ev-mode:has(input:checked){border-color:var(--accent);background:#f2f8ff}

/* ---- Passkeys (18 Oct 2026): the sign-in button and the Security card. 44px targets at every width, text at 4.5:1 or better ---- */
.auth .btn.pkbtn{margin-top:10px;min-height:44px;white-space:normal;text-align:center;line-height:1.25}
.auth .btn.pkbtn svg{flex:none}
.pkbox{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.pkbox h3{margin:0 0 4px;font-size:17px}
.pklist{margin:8px 0 4px}
.pkrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;border-top:1px solid var(--line)}
.pkrow:first-child{border-top:0}
.pkrow .pkn{min-width:0;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pkrow .pkn small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--muted)}
.pkrow .btn{flex:none;min-height:44px;color:var(--hot)}
.pknone{margin:0}
/* the Apple button is a placeholder ("soon"): quiet grey text at 5:1 instead of half-faded blue, which fell under 4.5:1 */
.auth #btnApple{opacity:1!important;color:var(--muted)}
.pkadd{margin:10px 0 0}
.pkbox .actions.tight .btn.sm,.pkrow .btn.sm{min-height:44px}

/* ---- In-app feedback (19 Oct 2026): the sheet, and the owner's list ---- */
#fbSheet textarea{min-height:120px}
.fb-shot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.fb-thumb{display:flex;align-items:center;gap:12px;margin-top:8px}
.fb-thumb img{max-width:140px;max-height:140px;border:1px solid var(--line);border-radius:12px}
.fbrow{padding:12px 0;border-top:1px solid var(--line)}
.fbrow:first-child{border-top:0}
.fbrow .fb-h{font-size:14px;color:var(--muted)}
.fbrow .fb-h b{color:var(--ink);font-weight:600}
.fbrow .fb-t{font-size:17px;white-space:pre-wrap;word-break:break-word;margin:4px 0 8px}
.fbrow .fb-img{display:block;max-width:100%;max-height:360px;border:1px solid var(--line);border-radius:12px;margin:8px 0}
.fbrow.done .fb-t{color:var(--muted)}

/* ---- Apple system layer (18 Oct 2026) ----
   Text: 12 caption, 14 secondary and controls, 17 body and headline, 21 sheet title, 28 page title, 34 sign-in. Weights 400 and 600.
   Colour: ink #1d1d1f, secondary #6e6e73, fill #f5f5f7, hairline #d2d2d7, action blue #0e6b57, links #0e6b57. Radius: pills 980, fields 12, cards 18. */
:root{--ink:#1d1d1f;--muted:#6e6e73;--line:#d2d2d7;--sand:#f5f5f7;--card:#fff;--accent:#0e6b57;--accent-d:#0e6b57;--teal:#0e6b57;--teal-d:#0a4f41;--radius:18px;--r-card:18px;--r-field:12px;--r-pill:980px}
body{font:400 17px/1.47 var(--sans);letter-spacing:-.011em;color:var(--ink);background:var(--sand)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.022em}
.ph h1{font-size:28px;line-height:1.14;letter-spacing:-.022em;font-weight:600}
.ph p,.ph .sub{font-size:14px;line-height:1.43;color:var(--muted)}
.top h1.t{font-size:17px;font-weight:600}
.auth h1{font-size:34px;line-height:1.1;font-weight:600}
.kpi b,.stat b{font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.022em}
.kpi span,.stat span{font-size:14px;color:var(--muted)}
.dhead h2,.sheet h2{font-size:21px;line-height:1.19;font-weight:600;letter-spacing:-.016em}
.card h2,.card h3,.card h4{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.016em}
.dsec h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card{border-radius:18px;padding:24px;border:1px solid var(--line);box-shadow:none}
p,li,.kv,.hint,small{line-height:1.43}
small,.kv{font-size:14px;color:var(--muted)}
/* one corner: cards, banners, images, sheets and tiles are 18; fields and inner tiles 12; controls are pills; avatars are circles */
img,video{border-radius:18px}
.avatar,.avatar-pv,img.avatar{border-radius:50%}
.lcard{border-radius:18px;overflow:hidden}
.lcard .img,.cover-pv,.cover-edit,.ev-pic img,.ev-cam{border-radius:18px}
.lcard .img{border-radius:0}
.sheet{border-radius:18px}
.toast{border-radius:12px}
.avatar{width:36px;height:36px}.ini{width:40px;height:40px}
/* sidebar and top bar */
.side a.nl{font-size:14px;font-weight:400;min-height:36px;padding:7px 12px;border-radius:8px}
.side a.nl.on{font-weight:600}
.side .grp{font-size:12px;font-weight:600;letter-spacing:.08em}
.plancard b{font-size:14px;font-weight:600}.plancard small{font-size:12px}
.tabbar a{font-size:12px;font-weight:400}.tabbar a.on{font-weight:600}
/* buttons: Apple pills. 36px on a desktop, 44px on a phone. One filled blue action, the rest hairline or text. */
.btn{font-size:14px;font-weight:400;line-height:1.2;min-height:36px;padding:0 16px;border-radius:980px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn.sm{font-size:14px;min-height:36px;padding:0 16px}
.btn.xs{font-size:14px;min-height:32px;padding:0 12px}
.btn.solid,.btn.lime{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:400}
.btn.solid:hover,.btn.lime:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.quiet,.btn.xs:not(.solid):not(.lime){border-color:transparent;background:transparent;color:var(--teal)}
.btn.quiet{color:var(--muted)}
.btn.danger{color:#d70015;border-color:#d2d2d7;background:#fff}
.chip{font-size:14px;font-weight:400;min-height:32px;padding:0 14px;border-radius:980px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg{background:#e8e8ed;border:0;border-radius:980px;padding:2px}.seg .chip{border:0;background:transparent;min-height:30px}
.seg .chip.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* fields */
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:14px;line-height:1.3;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
textarea{padding:8px 12px;min-height:72px}
label,.lab{font-size:14px;font-weight:600;color:var(--ink)}
/* lists */
.row{padding:12px 16px}
.row .n{font-size:17px;font-weight:600;line-height:1.3}
.row .m{font-size:12px;color:var(--muted)}
.row .s{font-size:14px;line-height:1.43;color:var(--muted)}
.score,.stage{font-size:12px;font-weight:600;line-height:1.3;padding:2px 8px}
.toast{font-size:14px}
.avatar-pv{background:#e8e8ed;color:#1d1d1f}
@media(max-width:700px){
  main{padding:16px 16px 110px}
  .card{padding:16px;border-radius:16px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:17px;min-height:44px;border-radius:12px}
  textarea{min-height:88px;padding:10px 12px}
  .btn,.btn.sm{font-size:14px;min-height:44px;padding:0 16px}
  .sheet .btn,.sheet .btn.sm,form .btn.solid{font-size:17px;padding:0 20px}
  .top .btn{min-height:36px;padding:0 14px}
  .btn.xs,.btn.xs:not(.solid):not(.lime){font-size:14px;min-height:44px;padding:0 12px}
  .chip{min-height:36px;min-width:44px;font-size:14px}
  html{scroll-padding-top:64px;scroll-padding-bottom:100px}
  .ph h1{font-size:28px}
  .row .n{font-size:17px}.row .s{font-size:14px}.row .m{font-size:12px}
  label,.lab{font-size:14px}
  .sheet{border-radius:18px 18px 0 0}
  .avatar{width:44px;height:44px}
}
/* tabs inside a segmented bar: 36px on a desktop, 44px on a phone (the Events tabs) */
.seg .chip{min-height:36px}
@media(max-width:700px){.seg.ev-tabs .chip,.ev-tabs .chip{min-height:44px}}

/* ---- the listing page designer (designer.js) */
.sheet.dz{width:min(1200px,calc(100vw - 24px));height:min(860px,calc(100vh - 24px));max-height:none;padding:0;display:flex;flex-direction:column;overflow:hidden}
.dz-bar{display:flex;align-items:center;gap:12px 16px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.dz-t{min-width:0;flex:1 1 240px}.dz-t b{display:block;font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dz-t .kv{display:block;font-size:14px}
.dz-acts{display:flex;gap:8px;flex-wrap:wrap}.dz-acts .btn{text-decoration:none}
.dz-tabs{display:none;gap:8px}
.btn[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.dz-more{display:none}
.dz-body{flex:1;min-height:0;display:grid;grid-template-columns:380px minmax(0,1fr)}
.dz-ctl{overflow-y:auto;padding:16px;border-right:1px solid var(--line)}
.dz-pv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.dz-pvbar{display:flex;gap:8px;justify-content:center;padding:12px 16px;flex:none}
.dz-frame{flex:1;min-height:0;position:relative;overflow:hidden}
.dz-frame iframe{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:top left;border-radius:12px}
.dz-grp{padding:16px 0;border-top:1px solid var(--line)}.dz-grp:first-of-type{border-top:0}.dz-grp h3{font-size:17px;font-weight:600;margin:0 0 8px}
.dz-looks{border:0;margin:0;padding:0;display:grid;gap:8px}.dz-looks legend{font-size:17px;font-weight:600;padding:0;margin:0 0 8px}
.dz-look{position:relative;display:block;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.dz-look input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dz-look:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}.dz-look:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.dz-look b{display:block;font-weight:600}.dz-look small{display:block;color:var(--muted);font-size:14px;line-height:1.43}
.dz-sec{display:flex;gap:8px;align-items:center;margin:0 0 6px}.dz-swrap{flex:1;min-width:0}.dz-sec .switches{margin:0}
.dz-mv{display:flex;gap:4px;flex:none}.dz-mv .btn{min-width:44px;padding:0}
.switches label span small{display:block;color:var(--muted);font-size:14px;line-height:1.35}
.dz-classic{margin:16px 0 0}
#dzHl{width:100%;resize:vertical}
@media(max-width:900px){
  .sheet.dz{width:100%;height:calc(100dvh - 8px);border-radius:18px 18px 0 0}
  .dz-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t close" "tabs pub";gap:8px 12px;align-items:center}
  .dz-acts{display:contents}.dz-t{grid-area:t;flex:none}#dzClose{grid-area:close}.dz-tabs{display:flex;grid-area:tabs}#dzPublish{grid-area:pub}#dzDiscard,#dzOpen{display:none}
  .dz-more{display:block}
  .dz-body{grid-template-columns:1fr}.dz-ctl,.dz-pv{display:none;border-right:0}
  .dz-body[data-show=edit] .dz-ctl{display:block}.dz-body[data-show=preview] .dz-pv{display:flex}
}
/* ---- a field's Required and Optional shown side by side (the event's Overview) */
.ov-needh{font-size:14px;font-weight:600;margin:12px 0 0}
.seg-row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin:8px 0 0;flex-wrap:wrap}.seg-l{font-size:17px}
.seg{display:inline-flex}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:104px;padding:0 16px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;margin:0;font-size:17px;font-weight:400}
.seg label:first-child{border-radius:980px 0 0 980px}.seg label:last-child{border-radius:0 980px 980px 0;margin-left:-1px}
.seg input{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);margin:0;opacity:0;cursor:pointer}
.seg label:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;font-weight:600;z-index:1}
.seg label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:520px){.seg-row{display:block}.seg-l{display:block;margin-bottom:6px}.seg{display:flex;width:100%}.seg label{flex:1;min-width:0}}
/* ---- the design studio: its own small app in a frame, given the whole window above the top bar and the bottom tabs */
#v-studio.on{position:fixed;inset:0;z-index:60;background:#fff;animation:none;padding:0;margin:0;max-width:none}
#v-studio iframe{display:block;width:100%;height:100%;border:0}
/* ---- Website builder (site-builder.js): sections, look, colour and picture on the left, the page in the middle, the words on the right */
#v-website.on{position:fixed;inset:0;z-index:60;background:#fff;animation:none;padding:0;margin:0;max-width:none}
.wb{display:flex;flex-direction:column;height:100%}
.wb-bar{display:flex;align-items:center;gap:12px 16px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.wb-t{min-width:0;flex:1 1 240px}.wb-t b{display:block;font-size:17px;font-weight:600}.wb-t .kv{display:block;font-size:14px}
.wb-tabs{display:none;gap:8px}
.wb-grp{padding:16px 0;border-top:1px solid var(--line)}.wb-grp:first-of-type{border-top:0}.wb-grp h3{font-size:17px;font-weight:600;margin:0 0 8px}
.wb-looks{border:0;margin:0;padding:0;min-width:0}.wb-looks legend{font-size:17px;font-weight:600;padding:0;margin:0 0 8px}
.wb-pv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.wb-pvbar{display:flex;gap:8px;justify-content:center;padding:12px 16px;flex:none}
.wb-frame{flex:1;min-height:0;position:relative;overflow:hidden}
.wb-frame iframe{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:top left;border-radius:12px}
.wb-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(280px,340px)}
.wb-left,.wb-right{overflow-y:auto;padding:16px;min-height:0}
.wb-left{border-right:1px solid var(--line)}.wb-right{border-left:1px solid var(--line)}
.wb-how{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wb-how li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;line-height:1.29;color:var(--ink);padding:12px 4px;background:#f5f5f7;border-radius:12px}
.wb-sec{display:flex;gap:8px;align-items:center;margin:0 0 6px}.wb-th{flex:none;line-height:0}.wb-swrap{flex:1;min-width:0}.wb-sec .switches{margin:0}
.wb-mv{display:flex;gap:4px;flex:none}.wb .btn,.wb .actions.tight .btn.sm{min-height:44px}.wb-mv .btn{min-width:44px;padding:0}
.wb .switches label input:disabled{opacity:.55;cursor:default}
.wb-lk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.wb-lk.four{grid-template-columns:repeat(2,1fr)}
.wb-look{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;margin:0;min-height:44px}
.wb-look input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wb-look:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}.wb-look:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.wb-look b{font-weight:600;font-size:14px}.wb-lp,.wb-ly{display:block;width:100%;line-height:0}.wb-lp svg,.wb-ly svg{display:block;width:100%;height:auto;max-width:96px;margin:0 auto}
.wb-tpls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wb-tpl{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;min-height:44px;font:inherit;color:var(--ink)}
.wb-tpl svg{display:block;width:100%;height:auto;max-width:150px}.wb-tpl b{font-weight:600;font-size:14px}
.wb-tpl small,.wb-look small{font-size:12px;line-height:1.33;color:var(--muted);font-weight:400}.wb-look{font:inherit;color:var(--ink)}
.wb-locked{border-style:dashed}
.wb-sub{font-size:14px;font-weight:600;margin:16px 0 8px}.wb-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.wb-libs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wb-lib{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f5f7;cursor:pointer;aspect-ratio:16/9;min-height:44px}.wb-lib img{width:100%;height:100%;object-fit:cover;display:block}
.wb-lib[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}.wb-lib:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wb-tpl[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}.wb-tpl:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wb-sws{display:flex;flex-wrap:wrap}
.wb-sw{width:44px;height:44px;border:0;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}
.wb-sw i{display:block;width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.18) inset}
.wb-sw[aria-pressed=true] i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}.wb-sw:focus-visible{outline:2px solid var(--teal);outline-offset:0}
.wb-l{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}.wb-right .wb-note+.wb-l,.wb-right .wb-note+.wb-note+.wb-l{margin-top:16px}
.wb-left input[type=text],.wb-right input[type=text],.wb-right textarea{width:100%}.wb-right textarea{resize:vertical}
.wb-pics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.wb-pic{min-width:64px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f5f7;cursor:pointer;font-size:14px;color:var(--ink)}
.wb-pic img{width:64px;height:100%;object-fit:cover;display:block}
.wb-pic[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}.wb-pic:focus-visible,.wb-chip:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wb-note{background:#f5f5f7;border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px;margin:0 0 4px}.wb-note[hidden]{display:none}
.wb-note b{font-size:14px;font-weight:600}.wb-note span{font-size:14px;color:var(--muted);line-height:1.43}
.wb-addrow{display:flex;gap:8px}.wb-addrow input{flex:1;min-width:0}
.wb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wb-chip{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:22px;background:#fff;font-size:14px;color:var(--ink);cursor:pointer}
.wb-right #wbWriteMsg{margin:8px 0 0}.wb-right #wbWriteMsg:not(:empty){margin-bottom:16px}
.wb-url{margin:0;font-size:17px;font-weight:600;word-break:break-all}.wb-next{margin:16px 0 0}
.wb-reorder,.wb-see{display:none}.wb-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}.wb-gh h3{margin:0}
@media(max-width:900px){
  /* the builder sits between the app's own top bar and bottom tabs, so the way to Home, Leads, Pipeline, Listings and More is always there (site-builder.js measures the two bars) */
  #v-website.on{top:var(--apptop,61px);bottom:var(--appbar,63px);z-index:15}
  .wb-bar{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"back t" "tabs tabs";gap:6px 12px;align-items:center;padding:8px 16px}
  #wbBack{grid-area:back}.wb-t{grid-area:t;flex:none}
  .wb-body{grid-template-columns:1fr}.wb-left,.wb-right,.wb-pv{display:none;border:0}
  .wb-body[data-show=design] .wb-left{display:block}.wb-body[data-show=words] .wb-right{display:block}.wb-body[data-show=preview] .wb-pv{display:flex}
  /* the three tabs are one row under the title (the bottom is the app's own tabs), each with its little picture */
  .wb-tabs{grid-area:tabs;display:flex;gap:4px;padding:2px;border-radius:14px;background:#f5f5f7}
  .wb-tabs .btn{flex:1;flex-direction:row;gap:8px;min-height:44px;padding:0 8px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:14px;line-height:1.43;font-weight:600;box-shadow:none}
  .wb-tabs .btn svg{width:20px;height:20px}.wb-tabs .btn[aria-pressed=true]{color:var(--teal);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .wb-body{padding-bottom:16px}
  /* the three-step strip says what the tabs already say */
  .wb-how{display:none}
  /* sections: no little pictures, and the arrows only while Reorder is on */
  .wb-reorder{display:inline-flex}.wb-th,.wb-mv{display:none}.arr .wb-mv{display:flex}
  /* templates, looks and tops of the page slide sideways instead of stacking */
  .wb-tpls,.wb-lk,.wb-lk.four{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;margin:0 -16px;padding:2px 16px 8px;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wb-tpls::-webkit-scrollbar,.wb-lk::-webkit-scrollbar{display:none}
  .wb-tpl{flex:0 0 148px;scroll-snap-align:start}.wb-lk .wb-look{flex:0 0 112px;scroll-snap-align:start}
  /* after a change, one pill offers the preview */
  .wb-see:not(.hidden){display:inline-flex;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 4px 16px rgba(0,0,0,.18)}
  /* while she types, the keyboard needs the room */
  .wb:has(input[type=text]:focus,textarea:focus) .wb-see{display:none}
}
@media(max-width:900px) and (max-height:520px){
  /* a phone on its side: less bar, so there is room to see the work */
  /* on its side there is no room for the app's bars as well: the builder takes the whole screen again, with the three tabs in the title row, and Back leads out */
  #v-website.on{top:0;bottom:0;z-index:60}
  .wb-bar{grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"back t tabs"}
  .wb-see:not(.hidden){bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* Print it (print-host.js): a sheet over the full-window studio, so it sits above it (the studio screen is 60) */
#prSheet .scrim{z-index:70}
#prSheet .sheet{z-index:71}
.sheet.pr{width:min(560px,100%)}
.pr-sec{margin:20px 0 0}
.pr-sec h3{font-size:17px;line-height:1.24;font-weight:600;margin:0 0 4px}
.pr-b{font-size:14px;font-weight:600;color:var(--ink)}
.pr-line{font-size:14px;color:var(--muted);line-height:1.43}
.pr-grp{font-size:12px;font-weight:600;color:var(--muted);margin:16px 0 4px}
.pr-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.pr-row .pr-t{flex:1;min-width:0}
.pr-row .pr-t b{display:block;font-size:17px;font-weight:600;line-height:1.24}
.pr-row .pr-t span{display:block;font-size:14px;color:var(--muted);line-height:1.43}
.pr-row .btn{flex:none;min-height:44px;min-width:72px}
.pr-near{display:flex;gap:8px;margin:16px 0 0;flex-wrap:wrap}
.pr-near input{flex:1 1 200px;min-height:44px;min-width:0}
.pr-near .btn{min-height:44px}
.pr-tell{margin:8px 0 0;padding:0 0 0 18px;font-size:14px;line-height:1.43;color:var(--ink)}
.pr-tell li{margin:0 0 4px}
#prSay:empty,#prErr:empty,#prCopySay:empty{margin:0;min-height:0}
#prSay{margin-top:8px}

/* ---------- first run: a new account has no leads, so Home shows ONE next step instead of four zeros, an empty list and an empty chart ---------- */
#v-home.firstrun .kpis, #v-home.firstrun #needsCard, #v-home.firstrun #chartCard, #v-home.firstrun #setupCard, #v-home.firstrun #proCard { display: none; }
#v-home.firstrun .grid2 { grid-template-columns: 1fr; }
.start { padding: 24px; margin-bottom: 14px; }
.start h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px; }
.start > p { margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.4; max-width: 32em; }
.start > .btn.solid { min-height: 48px; padding: 0 28px; font-size: 17px; }
.start .then { margin-top: 24px; }
.start .then-h { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.thenrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 17px; }
.thenrow i { font-style: normal; color: var(--muted); }
.thenrow:hover i { color: var(--ink); }
@media (max-width: 560px) { .start > .btn.solid { width: 100%; } }
/* requests for a time, in a lead (app2.js paintReqs) */
.rqc{padding:12px 16px;border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff}.rqc b{display:block;font-size:17px;font-weight:600}.rqc .kv{margin:4px 0}.rqc .actions.tight .btn{min-height:44px}.rqc summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:14px}

/* ---- See what MyHero does (clips.js): a row of small phone-shaped clips on Home, and a sheet that plays one bigger */
/* One small "watch" card on an empty screen (clips.js); a tap plays the clip in a sheet */
.clipslot{display:block}.clipslot[hidden]{display:none}
.clipx{display:flex;gap:14px;align-items:center;width:100%;max-width:420px;margin:16px auto 0;padding:12px;text-align:left;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;min-height:120px}
.clipx:hover{border-color:var(--teal)}.clipx:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.clipxv{position:relative;flex:none;display:block;width:54px;height:96px;border-radius:10px;overflow:hidden;background:#f5f5f7;border:1px solid var(--line)}
.clipxv img{display:block;width:100%;height:100%;object-fit:cover}
.clipp{position:absolute;right:4px;bottom:4px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.clipp::after{content:"";position:absolute;left:9px;top:6px;border-left:8px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.clipxt{display:block;min-width:0}.clipxt b{display:block;font-size:17px;font-weight:600;line-height:1.24}
.clipxt small{display:block;margin-top:2px;font-size:14px;line-height:1.43;color:var(--muted)}
.clipxt i{display:block;margin-top:6px;font-style:normal;font-size:14px;font-weight:600;color:var(--teal)}
/* one quiet line on a screen that has content ("On every screen") */
.clipslot.more{margin:0 0 12px}
.clipx.slim{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;max-width:none;padding:6px 14px;border-radius:12px}
.clipx.slim .clipp{position:relative;flex:none;width:28px;height:28px;background:#f5f5f7;box-shadow:none;border:1px solid var(--line);border-radius:50%}
.clipx.slim .clipp::after{left:10px;top:7px}
.clipx.slim .clipxt{flex:1}.clipx.slim .clipxt b{font-size:14px;font-weight:600;line-height:1.43}
#clipMode{display:grid;grid-template-columns:1.3fr 1.2fr .7fr;width:100%}#clipMode button{padding:7px 4px;text-align:center;white-space:nowrap}
/* the look of a client's page: four picture tiles in Settings (portal-look.js) */
.plgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.plgrid button{display:flex;gap:12px;align-items:center;text-align:left;min-height:72px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.plgrid button:hover:not(:disabled){border-color:var(--teal)}.plgrid button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.plgrid button:disabled{cursor:default}
.plgrid button.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.plsw{flex:none;position:relative;display:block;width:56px;height:56px;border-radius:12px;border:1px solid var(--line);background:var(--p);overflow:hidden}.plsw i{display:block;height:22px;background:var(--h)}.plsw b{position:absolute;left:8px;bottom:8px;width:24px;height:6px;border-radius:3px;background:var(--a)}
.plt{display:block;min-width:0}.plt b{display:block;font-size:17px;font-weight:600;line-height:1.24}.plt small{display:block;font-size:14px;line-height:1.43;color:var(--muted)}
@media(max-width:480px){.plgrid{grid-template-columns:minmax(0,1fr)}}
.clipx.slim>i{flex:none;font-style:normal;font-size:14px;font-weight:600;color:var(--teal)}
.sheet.clip{width:min(420px,100%)}.sheet.clip .btn{min-height:44px}
.clip-big{display:flex;justify-content:center;margin:0 0 12px}
.clip-big video{display:block;width:auto;max-width:100%;max-height:min(62vh,640px);aspect-ratio:9/16;border-radius:16px;background:#f5f5f7;border:1px solid var(--line)}
/* Premium adds (22 Oct 2026, le-045): the heading already says Premium, so a tile does not say it again. The old label was near-black on jade (2.4 to 1); tiles are solid hairline cards with the text from the top, 17 and 14 px */
.locks .lock.prem::before{content:none;display:none}
.locks .lock.prem{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-height:88px;padding:16px;border:1px solid #d2d2d7;border-radius:14px}
.locks .lock.prem b{font-size:17px;line-height:1.24;font-weight:600}
.locks .lock.prem small{font-size:14px;line-height:1.43;color:#6e6e73;margin-top:0}
.locks .lock.prem:hover{border-color:var(--teal)}
.locks .lock.prem:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.card-h .cap{font-size:14px;line-height:1.43;color:#6e6e73}
/* Texting and calls (22 Oct 2026): every control is 44 px at every width */
#twilioCard .btn,#twilioCard input{min-height:44px}
/* Your calendar (23 Oct 2026): every control is 44 px at every width; the link reads in a quiet mono face */
#calCard .btn,#calCard input,#calCard summary{min-height:44px}#calCard summary{display:flex;align-items:center;cursor:pointer}#calCard #calUrl{font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Money (23 Oct 2026, money.js): sizes 12, 14, 17, 21 and 28 only, weights 400 and 600, every control 44 px at every width, one filled jade action per screen, jade text for the quiet actions */
#mnBody{max-width:680px}
#v-money .btn,#moneySheet .btn{min-height:44px;font-size:17px;padding:0 20px}
#v-money input:not([type=checkbox]):not([type=radio]):not([type=file]),#v-money select,#v-money textarea,#moneySheet input{font-size:17px;line-height:1.3;min-height:44px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
#v-money textarea{padding:10px 12px;min-height:88px}
#moneySheet label{font-size:14px;font-weight:600;color:var(--ink)}
#v-money .seg label{font-size:17px;font-weight:400;color:var(--ink)}#v-money .seg label:has(input:checked){font-weight:600}
#v-money input:focus-visible,#v-money select:focus-visible,#v-money textarea:focus-visible,#moneySheet input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#v-money .btn:focus-visible,#moneySheet .btn:focus-visible,#v-money button.mn-act:focus-visible,#moneySheet button.mn-act:focus-visible,#v-money a.mn-act:focus-visible,#moneySheet a.mn-act:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mn-topbar{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.mn-h{font-size:21px;line-height:1.19;font-weight:600;letter-spacing:-.016em;margin:0}
.mn-sub{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.016em;margin:0 0 8px}
.mn-month{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px}
.mn-mname{flex:0 1 200px;margin:0;text-align:center;font-size:17px;line-height:1.3;font-weight:600}
.mn-month button.mn-act{font-size:21px}
.mn-net{margin:8px 0 24px}
.mn-cap{margin:0;font-size:14px;line-height:1.43;color:var(--muted)}
.mn-big{margin:4px 0;font-size:28px;line-height:1.14;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.mn-line,.mn-help,.mn-status{margin:0;font-size:14px;line-height:1.43;color:var(--muted)}
.mn-help{margin-top:4px}
.mn-form>.mn-line{margin-bottom:12px}
#mnOwner input:not([type=checkbox]){font-size:17px;min-height:44px;width:100%;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
#mnOwner .mn-field>label{display:block;margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
#mnOwner input[type=checkbox]{width:24px;height:24px;margin:0;flex:none;accent-color:var(--teal)}
#mnOwner .mn-line{margin:0}
#mnOwner input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mn-status{margin:0 0 12px;color:var(--ink);font-weight:600}
.mn-fine{margin:16px 0 0;font-size:12px;line-height:1.33;color:var(--muted)}
.mn-fail{margin:0 0 12px;font-size:17px;line-height:1.47;color:#d70015}
.mn-empty{margin:0;padding:24px 0;text-align:center;font-size:17px;line-height:1.47;color:var(--muted)}
#v-money .err:empty,#v-money .mn-line:empty,#v-money .mn-status:empty,#moneySheet .err:empty{margin:0;min-height:0}
#v-money .err,#moneySheet .err{font-size:14px;color:#d70015}
.mn-card{margin:0 0 16px}
.mn-list{list-style:none;margin:0;padding:0}
.mn-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line)}
.mn-list>.mn-row:first-child{border-top:0}
.mn-row:has(>.mn-rowbtn){padding:0}
.mn-t{flex:1 1 200px;min-width:0}
.mn-t b{display:block;font-size:17px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.mn-t span{display:block;font-size:14px;line-height:1.43;color:var(--muted);overflow-wrap:anywhere}
.mn-acts{display:flex;flex-wrap:wrap;gap:4px;flex:none;margin-left:auto}
.mn-row.voided .mn-t b{color:var(--muted)}
.mn-col>.check-l{flex-basis:100%}
button.mn-act,a.mn-act{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:980px;background:transparent;color:var(--teal);font:inherit;font-size:17px;line-height:1.2;cursor:pointer;text-decoration:none}
button.mn-act:hover,a.mn-act:hover{background:#e4f0ec}
button.mn-act.quiet{color:#6e6e73}button.mn-act.quiet:hover{background:#f5f5f7}
button.mn-act.inline{padding:0 8px}
.mn-main{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px}
.mn-main .btn{flex:1 1 140px}
.mn-pick{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:0;cursor:pointer}
#v-money .mn-pick input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:0}
#v-money .mn-pick:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.mn-more{margin:16px 0 0}
.mn-more>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:17px;font-weight:600;color:var(--teal)}
.mn-more>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:12px}
.mn-more .mn-row{padding:0}
.mn-rowbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mn-rowbtn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:12px}
.mn-chev{margin-left:auto;font-size:21px;color:var(--muted)}
.mn-field{margin:0 0 12px}
.mn-field>label,.mn-lab{display:block;margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
.mn-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
@media(max-width:520px){.mn-two{grid-template-columns:1fr}}
.mn-shot{display:block;width:100%;max-height:260px;margin:0 0 16px;object-fit:contain;background:#f5f5f7;border-radius:18px}
.mn-check{min-height:44px;margin:0;padding:0;font-size:17px;font-weight:400;color:var(--ink)}
#v-money .mn-check input[type=checkbox]{width:24px;height:24px;margin:0;flex:none;accent-color:var(--teal)}
.mn-switch{margin:0 0 12px}
#v-money .mn-switch label{min-height:44px;font-size:17px;font-weight:400}
.mn-hits{display:grid;gap:8px;margin-top:8px}
.mn-hit{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mn-hit:hover{border-color:var(--teal)}
.mn-hit b{font-size:17px;line-height:1.3;font-weight:600}.mn-hit small{font-size:14px;line-height:1.43;color:var(--muted);overflow-wrap:anywhere}
.mn-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.mn-chosen b{font-size:17px;font-weight:600;overflow-wrap:anywhere}
#moneySheet .mn-line{margin:0 0 12px}
#moneySheet .mn-shot{margin:0 0 4px;max-height:none}
.mn-shotbox{margin:0 0 16px}.mn-shotbox .mn-shot{margin:0 0 4px}
.mn-sheetacts{display:flex;flex-direction:column;align-items:stretch;gap:8px}.mn-sheetacts .mn-act{align-self:flex-start}
.mn-hint{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}.mn-hint .mn-help{flex:1 1 200px;margin:4px 0 0}
#mnConfirm .mn-line{margin:0 0 12px}#mnConfirm .actions{margin-top:12px}
/* Coming soon (23 Oct 2026, soon.js): two quiet lists and one jade button. Names 17 semibold, lines 14 grey, a hairline between rows, a 44 px button at every width, 24 between groups */
#soonBody{max-width:640px}
.soon-card+.soon-card{margin-top:24px}
.soon-card h2{color:var(--muted)}
.soon-list{list-style:none;margin:4px 0 0;padding:0}
.soon-list li{padding:12px 0}
.soon-list li:first-child{padding-top:8px}
.soon-list li:last-child{padding-bottom:0}
.soon-list li+li{border-top:1px solid var(--line)}
.soon-n{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.soon-s{display:block;margin-top:4px;font-size:14px;line-height:1.43;color:var(--muted)}
.soon-ask{margin-top:24px}
.soon-ask .btn{min-height:44px;padding:0 20px;font-size:17px}
.soon-help{margin:8px 0 0;font-size:14px;line-height:1.43;color:var(--muted)}
@media(max-width:700px){.soon-ask .btn{display:flex;width:100%}}

/* ---- Checklists (24 Oct 2026, checklists.js): the list, one checklist, the templates and the template editor.
   Apple system: type 12/14/17/21/28, weights 400 and 600, ink #1d1d1f, secondary #6e6e73 (5.0:1 on white, 4.7:1 on the page; never used on a tint), hairline #d2d2d7, jade #0e6b57 for the one filled action.
   Every control is 44 px at every width, every field is 17 px, no half pixels, no shadows, no gradients. Field and choice borders are #86868b (3.5:1), because a boundary at 1.5:1 cannot be seen by everyone. ---- */
#v-checklists [hidden],#ckSheet [hidden]{display:none!important}
#v-checklists .ck,#v-checklists .ph,#v-checklists #ckBackSlot{max-width:720px}
#v-checklists .ph h1{overflow-wrap:anywhere}
#v-checklists .ph p{margin:4px 0 0;font-size:14px;line-height:1.43;color:var(--muted)}
#v-checklists .ph p a{display:inline-block;padding:12px 4px;margin:-12px -4px;color:var(--teal);font-weight:600}   /* 44 px to hit, no taller to look at */
:is(#v-checklists,#ckSheet) .btn{min-height:44px;font-size:17px;font-weight:600}
/* fields: 17 px and 44 px at every width, and a ring you can see */
:is(#v-checklists,#ckSheet) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:44px;padding:0 12px;font-size:17px;line-height:1.3;border:1px solid #86868b;border-radius:12px;background:#fff;color:var(--ink)}
:is(#v-checklists,#ckSheet) textarea{min-height:88px;padding:10px 12px}
:is(#v-checklists,#ckSheet) :is(input,select,textarea):focus-visible,:is(#v-checklists,#ckSheet) :is(input,select,textarea):focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);box-shadow:none}
:is(#v-checklists,#ckSheet) label{margin:16px 0 4px;font-size:14px;font-weight:600;color:var(--ink)}
:is(#v-checklists,#ckSheet) .err{font-size:17px;line-height:1.47;color:#d70015}
:is(#v-checklists,#ckSheet) .ck-hint{margin:8px 0 0;font-size:14px;line-height:1.43;color:var(--muted)}
#v-checklists .ck>.ck-hint{margin:0 0 16px}
/* a text button in jade: Edit templates, Back, Note, Help, Options, Remove */
.ck-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:980px;background:transparent;color:var(--teal);font:600 17px/1.3 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.ck-link:hover{background:#e4f0ec}
.ck-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ck-back{margin:0 0 4px -12px}
/* Active / Done (and Archived when there is one): one switch. The chosen one is the white pill WITH a 2 px jade ring: white on the grey track is only 1.2 to 1, which not everyone can see, the ring is 5.2 to 1 against the track and 6.4 to 1 against the pill */
.ck-switch{display:flex;gap:4px;width:100%;max-width:360px;min-width:0;margin:0 0 16px;padding:4px;border:0;border-radius:980px;background:#e8e8ed}
.ck-switch label{position:relative;display:block;flex:1 1 0;min-width:0;margin:0}
.ck-switch input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.ck-switch span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;border-radius:980px;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.ck-switch input:checked+span{background:#fff;box-shadow:0 0 0 2px var(--teal)}
.ck-switch input:focus-visible+span{outline:2px solid var(--teal);outline-offset:2px}
/* rows: a name, one line, one action (Open or Edit); the whole row is the link */
.ck-card{padding:8px 24px}
.ck-rows{list-style:none;margin:0;padding:0}
.ck-row{position:relative;display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ck-row:first-child{border-top:0}
.ck-row .t{flex:1;min-width:0}
.ck-row .t b{display:block;font-size:17px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ck-row .t small{display:block;margin-top:4px;font-size:14px;line-height:1.43;color:var(--muted);overflow-wrap:anywhere}
.ck-open,.ck-open:active{transform:none}   /* a transform would make the link the box its own ::after is drawn in, and the row would stop being the link */
.ck-open::after{content:"";position:absolute;inset:0;border-radius:12px}
.ck-more{margin:16px 0 0}
.ck-empty{padding:24px 0;text-align:center}
.ck-empty p{margin:0 0 16px;font-size:17px;line-height:1.47}
.ck-empty p:last-child{margin:0}
/* one checklist: progress, then sections */
.ck-prog{margin:0 0 24px}
.ck-prog-n{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
.ck-prog-n b{font-size:17px;font-weight:600}
.ck-prog-n span{font-size:14px;color:var(--muted)}
.ck-bar{height:8px;border-radius:980px;background:#e8e8ed;overflow:hidden}
.ck-bar i{display:block;width:0;height:100%;border-radius:980px;background:var(--teal);transition:width .2s}
.ck-sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 24px}
.ck-sec+.ck-sec{margin-top:16px}
.ck-sec-h{margin:0}
.ck-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 0;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ck-toggle .n{flex:1;min-width:0;font-size:17px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ck-toggle .c{flex:none;font-size:14px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.ck-toggle svg{flex:none;color:var(--muted);transition:transform .15s}
.ck-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.ck-toggle:focus-visible,.ck-chev:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ck-sec-body{padding:0 0 8px}
.ck-sechelp{margin-left:-12px}
.ck-steps{list-style:none;margin:0;padding:0}
.ck-step{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px;border-top:1px solid var(--line)}
.ck-steps>.ck-step:first-child{border-top:0}
.ck-main{min-width:0;padding:8px 0 12px}
.ck-text{font-size:17px;line-height:1.47;overflow-wrap:anywhere}
.ck-meta{margin-top:2px;font-size:14px;line-height:1.43;color:var(--muted)}
.ck-notep{margin:4px 0 0;font-size:17px;line-height:1.47;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.ck-acts{display:flex;align-items:flex-start}
.ck-acts .ck-link{padding:0 8px}
.ck-input{display:block;width:100%;max-width:300px;min-width:0;margin-top:8px}
@media(max-width:420px){.ck-step.has-help{grid-template-columns:44px minmax(0,1fr)}.ck-step.has-help .ck-acts{grid-column:2;margin-top:-8px}}
@media(max-width:359px){.ck-step{grid-template-columns:44px minmax(0,1fr)}.ck-step .ck-acts{grid-column:2;margin-top:-8px}}
/* the tick: a 44 px target around a 24 px circle, jade and filled when it is done */
.ck-tick{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.ck-tick i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid #6e6e73;border-radius:50%;background:#fff}
.ck-tick svg{opacity:0}
.ck-tick[aria-checked=true] i{border-color:var(--teal);background:var(--teal)}
.ck-tick[aria-checked=true] svg{opacity:1}
.ck-tick:focus-visible{outline:2px solid var(--teal);outline-offset:0}
.ck-tick:disabled{cursor:default;opacity:.6}
.ck-step[aria-busy=true] .ck-tick{cursor:progress}
/* a note under its step */
.ck-notebox{grid-column:2/-1;margin:0 0 12px}
#v-checklists .ck-notebox label{margin-top:0}
.ck-notebox textarea{width:100%}
.ck-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
/* a bar that sticks to the bottom of the screen: "Every step is done" and "You have changes that are not saved" */
.ck-dock{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:18px}
.ck-dock span{min-width:0;font-size:17px;line-height:1.3}
@media(max-width:900px){.ck-dock{bottom:calc(env(safe-area-inset-bottom) + 80px)}}
/* the sheet: radio rows, the contact search, the menu */
.ck-pick{margin:16px 0 0;padding:0;border:0;min-width:0}
.ck-pick legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.ck-cap{margin:12px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.ck-opt{display:flex;align-items:center;gap:12px;min-height:56px;margin:0 0 8px;padding:8px 16px;border:1px solid #86868b;border-radius:12px;background:#fff;font-size:17px;font-weight:400;cursor:pointer}
.ck-opt.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.ck-opt input{flex:none;width:20px;height:20px;min-height:0;margin:0;padding:0;border:0}
.ck-opt .t{min-width:0}
.ck-opt b{display:block;font-size:17px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ck-opt small{display:block;margin-top:2px;font-size:14px;line-height:1.43;color:var(--muted)}
.ck-hits{display:grid;gap:8px;margin-top:8px}
.ck-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:56px;padding:8px 16px;border:1px solid #86868b;border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.ck-hit:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ck-hit b{font-size:17px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ck-hit small{font-size:14px;line-height:1.43;color:var(--muted);overflow-wrap:anywhere}
.ck-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:17px}
.ck-chosen-n{min-width:0;overflow-wrap:anywhere}
.ck-msg{min-height:0}
.ck-menu{display:grid;gap:8px;margin:8px 0}
.ck-menu .btn{width:100%}
/* the template editor: a section is a card, a step is one text box and Options */
#v-checklists .ck-details label:first-child{margin-top:0}
.ck-edsec{margin-top:16px}
.ck-sech{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0}
@media(max-width:420px){.ck-sech{grid-template-columns:44px minmax(0,1fr)}.ck-sech>.ck-link{grid-column:2;justify-self:start;margin-top:-8px}}
.ck-chev{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer}
.ck-chev svg{transition:transform .15s}
.ck-chev[aria-expanded=true] svg{transform:rotate(90deg)}
.ck-edsteps{list-style:none;margin:0;padding:0}
.ck-edstep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.ck-panel{grid-column:1/-1;display:block;padding:0 0 8px}
.ck-panel>*+*{margin-top:8px}
#v-checklists .ck-panel label{margin-top:12px}
#v-checklists .ck-panel label:first-child{margin-top:0}
.ck-seg{display:inline-flex;gap:4px;padding:4px;border-radius:980px;background:#e8e8ed}
.ck-seg button{min-height:44px;padding:0 20px;border:0;border-radius:980px;background:transparent;color:var(--ink);font:600 17px/1.3 var(--sans);cursor:pointer}
.ck-seg button[aria-pressed=true]{background:#fff;box-shadow:0 0 0 2px var(--teal)}   /* the same chosen look as the switch above */
.ck-seg button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ck-addstep{margin:8px 0 0}
.ck-addsec{margin:16px 0 0}
@media(max-width:700px){.ck-card{padding:4px 16px}.ck-sec{padding:0 16px}.ck-seg button{padding:0 16px}}
#v-checklists[data-screen=one] .ph,#v-checklists[data-screen=tpl] .ph{flex-wrap:nowrap;align-items:flex-start}
#v-checklists[data-screen=one] .ph>div:first-child,#v-checklists[data-screen=tpl] .ph>div:first-child{flex:1 1 auto;min-width:0}
#v-checklists[data-screen=one] .ph .acts,#v-checklists[data-screen=tpl] .ph .acts{flex:none}

/* ---- Checklists, the working screen (25 Oct 2026): the stage, the next five steps, a step's card, the Next steps card on a contact, and the due steps on Today.
   Same rules as the block above: type 14/17/21 only, weights 400 and 600, 44 px controls, one jade filled button, nothing new in colour. ---- */
#v-checklists[data-screen=now] .ph{flex-wrap:nowrap;align-items:flex-start}
#v-checklists[data-screen=now] .ph>div:first-child{flex:1 1 auto;min-width:0}
#v-checklists[data-screen=now] .ph .acts{flex:none}
.ck-stages{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px 8px}
.ck-stg .bar{height:8px;border-radius:980px;background:#e8e8ed;overflow:hidden}
.ck-stg .bar i{display:block;height:100%;border-radius:980px;background:var(--teal)}
.ck-stg .nm{display:block;margin-top:8px;font-size:14px;line-height:1.3;font-weight:400;color:var(--muted);overflow-wrap:anywhere}
.ck-stg.now .nm{color:var(--ink);font-weight:600}
.ck-status{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:4px 0 0;font-size:14px;line-height:1.43;color:var(--muted)}
.ck-status .ck-link{margin-right:-12px;padding:0 8px 0 12px;gap:2px}
#v-checklists .ck-earlier{margin:0 0 8px}
.ck-group{margin-top:16px}
.ck-cap2{margin:0 0 8px 4px;font-size:14px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.ck-group>h2.ck-cap2{font-size:14px}
.ck-ncard{padding:0 16px}
.ck-nlist{list-style:none;margin:0;padding:0}
.ck-nrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 0;border-top:1px solid var(--line)}
.ck-nrow:first-child{border-top:0}
.ck-nrow .tx{flex:1 1 160px;min-width:0}
.ck-nname{display:block;width:100%;min-height:44px;padding:8px 0;border:0;border-radius:8px;background:transparent;color:var(--ink);font:600 17px/1.3 var(--sans);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ck-nname.plain{min-height:0;cursor:default}
.ck-nname:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ck-nhint{display:block;margin:-2px 0 4px;font-size:14px;line-height:1.43;font-weight:400;color:var(--muted)}
.ck-nhint.hot{color:var(--ink);font-weight:600}
.ck-nact{flex:none;display:flex;align-items:center;gap:8px;min-width:0}
.ck-nrow.asking .tx,.ck-nrow.asking .ck-nact{flex:1 1 100%}
#v-checklists .ck-nrow .btn{min-height:44px;padding:0 16px;font-size:14px;font-weight:400}
#v-checklists .ck-nrow .btn.solid{font-weight:600}
.ck-callbox{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.ck-q{font-size:14px;line-height:1.43;color:var(--muted)}
.ck-qbtns{display:flex;flex-wrap:wrap;gap:8px}
/* a date box: the whole box is the field, a transparent date input lies over it */
#v-checklists .ck-datebox{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 12px;border:1px solid #86868b;border-radius:12px;background:#fff;color:var(--muted);font-size:14px;font-weight:400;line-height:1.3;white-space:nowrap;cursor:pointer}
.ck-datebox svg{color:var(--teal)}
.ck-datebox:focus-within{outline:2px solid var(--teal);outline-offset:2px}
.ck-datebox .ck-dateinput{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
/* the question that follows a stage that is done */
.ck-ask{margin-top:16px;padding:16px}
.ck-ask h2{margin:8px 0 4px;font-size:21px;line-height:1.19;font-weight:600}
.ck-line{margin:0 0 4px;font-size:14px;line-height:1.43;color:var(--muted)}
#v-checklists .ck-ask .btn.wide,#ckSheet .btn.wide{display:flex;width:100%;margin-top:12px}
.ck-notyet{display:flex;margin:4px auto 0}
/* the undo bar */
.ck-undo small{display:block;margin-top:2px;font-size:14px;line-height:1.43;color:var(--muted)}
#ckBody.busy .btn,#ckBody.busy .ck-nname,#ckBody.busy .ck-link{pointer-events:none;cursor:progress}
/* a step's card (a sheet) */
.ck-cardcap{margin:0 0 4px}
#ckSheet .ck-line{margin:0 0 4px}
.ck-cardcall .ck-callbox{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin-top:12px}
.ck-cardguide{margin:8px 0 0 -12px}
#ckSheet .ck-btnrow{margin-top:8px}
.ck-cardlinks{display:flex;flex:1 1 100%;flex-wrap:wrap;justify-content:center;gap:0 8px}
/* the Next steps card on a contact's page */
.ck-nhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ck-nhead h3{margin:0}
.ck-nhead .ck-link{margin-right:-12px;padding:0 8px 0 12px;gap:2px}
.ck-nextbox .ck-nlist{margin-top:4px}
.ck-nextbox .ck-nrow{flex-wrap:nowrap;padding:4px 0}
.ck-nextbox .ck-nrow.asking{flex-wrap:wrap}
.ck-nextbox .ck-nname.plain{padding:4px 0}
.ck-nextbox .ck-nact .ck-link{padding:0 8px}
.ck-nextbox .btn{margin-top:4px}
.ck-tight{margin:0 0 8px}
.ck-tight0{margin:0}
.ck-tight8{margin:8px 0 0}
/* Today on Home */
.ck-qitem{padding:12px 0 4px}
.ck-qmain b{display:block;font-size:17px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ck-qmain .ck-nhint{margin:2px 0 0}
.ck-qitem .qacts{padding:0 0 8px}
.ck-qmore{margin:8px 0}
/* the template editor: a stage, a kind, a due date */
.ck-stagetag{margin:-4px 0 8px 52px;font-size:14px;line-height:1.43;color:var(--muted)}
.ck-sub{display:block}
#v-checklists .ck-sub>label:first-child{margin-top:12px}
.ck-understood{margin-top:4px;color:var(--ink)}
.ck-nextbox h3{font-size:14px}

/* ---- Feedback, stage 1 (26 Oct 2026): one button in the top bar of every screen, and a picture of the screen to mark up ---- */
.fb-top{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:36px;padding:0 14px;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:980px;font:600 14px/1 var(--sans);cursor:pointer}
.fb-top:hover{background:#e4f0ec}
.fb-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fb-top svg{width:18px;height:18px;flex:none}
.fb-top[disabled]{opacity:.6;cursor:progress}
.fb-top.busy{opacity:.6}
body.authing .top .fb-top{display:none!important}
@media(max-width:900px){
  .fb-top{width:44px;min-height:44px;padding:0}
  .fb-top span{display:none}
}
.fb-box{margin-top:12px}
.fb-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.fb-tools .btn.on{background:#e4f0ec;border-color:var(--accent);color:var(--accent);font-weight:600}
.fb-sp{flex:1}
.fb-canvas{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:min(52vh,520px);border:1px solid var(--line);border-radius:12px;background:#fff;cursor:crosshair;touch-action:pan-y}
.fb-hint{margin:8px 0 0;font-size:14px;color:var(--muted);text-align:center}
.fb-pins{display:grid;gap:8px;margin:12px 0 0}
.fb-pinrow{display:flex;align-items:center;gap:10px;margin:0}
.fb-pin-n{flex:none;width:24px;height:24px;border-radius:50%;background:#e11d2e;color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.fb-pinrow input{flex:1;min-width:0}

/* ---- Feedback, stage 2 (28 Oct 2026): replies, the dot on the button, and the My notes tab ---- */
.fb-dot{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-sizing:content-box}
.fb-dot.hidden{display:none}
.fb-top{position:relative}
.fb-top .fb-dot{position:absolute;top:-5px;right:-5px}
.fb-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:0 0 12px}
.fb-tabs button{position:relative;min-height:44px;padding:0;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font:600 14px/1 var(--sans);color:var(--muted);cursor:pointer}
.fb-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.fb-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.fb-tabs .fb-dot{margin-left:8px;vertical-align:1px}
.fbn{border-top:1px solid var(--line)}
.fbn:first-child{border-top:0}
.fbn-head{position:relative;display:block;width:100%;min-height:44px;padding:12px 0;text-align:left;background:transparent;border:0;font:inherit;color:var(--ink);cursor:pointer}
.fbn-head.new{padding-left:24px}
.fbn-head>.fb-dot{position:absolute;left:0;top:18px}
.fbn-head:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.fbn-name{display:block;font-size:17px;font-weight:600;line-height:1.35;word-break:break-word}
.fbn-meta{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.fbn-body{padding:0 0 16px}
.fbn-thread{display:grid;gap:12px;margin:0 0 16px}
.fbn-msg{padding:2px 0 2px 12px;border-left:3px solid var(--line)}
.fbn-msg.team{border-left-color:var(--accent)}
.fbn-who{font-size:14px;color:var(--muted)}
.fbn-who b{color:var(--ink);font-weight:600}
.fbn-who .fb-dot{width:8px;height:8px;border:0;margin-right:6px;vertical-align:1px}
.fbn-txt{font-size:17px;line-height:1.47;white-space:pre-wrap;word-break:break-word;margin-top:2px}
.fbn-lab{display:block;font-size:14px;color:var(--muted);margin:0 0 4px}
.fbn-send{min-height:44px}
.fbn-empty{font-size:17px;color:var(--muted);margin:8px 0 16px}
.fbr{margin:4px 0 12px;padding:12px 0 0;border-top:1px solid var(--line)}
.fbr.hidden{display:none}
.fbr textarea{display:block;width:100%}
.fbn-head[aria-expanded="true"] .fbn-name{white-space:pre-wrap}