/* ═══════════ Graftly "pro" layer (Nov 2026) ═══════════
   Loaded last on every app screen. Earlier layers grew everything (giant pills, huge type, glows);
   this brings it back to a calm, professional scale in the spirit of the leading trade apps:
   compact headers, one segmented control, lists with dividers, modest corners, one accent colour.
   Uses the same colour tokens, so a client's own branding (brand.css) still applies. */

html body{font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
html body #app.col{gap:14px}

/* ── page header: small, tidy, sans ── */
html body .ptop2{align-items:center!important;padding-top:6px!important;gap:12px!important}
html body .ptop2 h1,html.branded body .ptop2 h1{font-family:var(--f-body)!important;font-size:26px!important;font-weight:800!important;letter-spacing:-.02em!important;line-height:1.15!important;color:var(--ink)}
html body .moreb,html body .iconb{width:42px!important;height:42px!important;border-radius:12px!important;box-shadow:none!important;border:1px solid var(--line)!important;background:var(--surface)!important}
html body .moreb svg,html body .iconb svg{width:22px;height:22px}

/* ── the one segmented control under the title ── */
html body .subtabs{display:inline-flex!important;background:var(--sunk)!important;border-radius:11px!important;padding:3px!important;gap:2px!important;margin-top:0!important;box-shadow:none!important}
html body .subtabs a{padding:7px 14px!important;font-size:14px!important;font-weight:600!important;border-radius:9px!important;min-height:0!important;box-shadow:none!important;border:0!important;color:var(--muted)!important;background:transparent!important}
html body .subtabs a.on{background:var(--surface)!important;color:var(--ink)!important;box-shadow:0 1px 3px rgba(15,23,42,.12)!important}

/* ── filters inside a page: small, quiet chips (never a second giant tab bar) ── */
html body .dtabs,html body .jtabs,html body .ftabs{display:flex!important;gap:6px!important;padding:0!important;overflow-x:auto}
html body .dtabs button,html body .jtabs button,html body .ftabs button{min-height:34px!important;padding:6px 12px!important;font-size:13.5px!important;font-weight:600!important;border-radius:9px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--muted)!important;box-shadow:none!important;flex:none}
html body .dtabs button.on,html body .jtabs button.on,html body .ftabs button.on{background:var(--ink)!important;color:var(--surface)!important;border-color:var(--ink)!important}
html body .ftabs{display:flex!important}

/* ── type ── */
html body h2,html.branded body h2{font-family:var(--f-body)!important;font-size:21px!important;font-weight:800!important;letter-spacing:-.015em!important;line-height:1.2!important}
html body h3,html.branded body h3{font-family:var(--f-body)!important;font-size:16px!important;font-weight:700!important;letter-spacing:-.005em!important;margin:12px 0 0!important;color:var(--ink)}
html body .small{font-size:13.5px}
html body .big:not(.btn),html.branded body .big:not(.btn){font-size:28px!important}

/* ── cards and lists: flat, bordered, dense ── */
html body .card,html.branded body .card{border-radius:14px!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important;border:1px solid var(--line)!important;padding:16px!important;gap:10px}
html body .list,html.branded body .list{border-radius:14px!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important;border:1px solid var(--line)!important;overflow:hidden}
html body .list .item,html body .list>a,html body .list>button{padding:12px 14px!important;min-height:58px!important;border-radius:0!important;box-shadow:none!important;border:0;border-bottom:1px solid var(--line)!important;background:var(--surface)}
html body .list .item:last-child,html body .list>a:last-child,html body .list>button:last-child{border-bottom:0!important}
html body .item .t,html body .lead .t{font-size:15.5px!important;font-weight:650}
html body .item .s,html body .lead .s{font-size:13.5px!important}
html body .lead,html.branded body .lead{border-radius:14px!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important;border:1px solid var(--line)!important;padding:12px 14px!important;min-height:0!important}
html body .av,html body .lead .av,html body .crow .av{width:40px!important;height:40px!important;font-size:16px!important;border-radius:50%!important}

/* ── buttons: solid, squared-off, no glow ── */
html body .btn,html.branded body .btn{border-radius:11px!important;min-height:44px;font-size:15px!important;font-weight:650!important;box-shadow:none!important;padding:10px 16px}
html body .btn.big{min-height:50px!important;font-size:16px!important}
html body .btn.small{min-height:34px!important;padding:6px 12px!important;font-size:13.5px!important;border-radius:9px!important}
html body .btn.primary,html body .bigaction,html.branded body .btn.primary,html.branded body .bigaction{background:var(--copper)!important;background-image:none!important;color:var(--on-copper)!important;box-shadow:none!important}
html body .btn.primary:hover{filter:brightness(.95)}
html body .bigaction{border-radius:12px!important;min-height:54px!important;font-size:17px!important}
html body .stage,html body .lead .stage{border-radius:9px!important;min-height:36px!important;font-size:14px!important;padding:0 12px!important;box-shadow:none!important}
html body .pill{border-radius:7px!important;font-size:12px!important;padding:3px 8px!important}

/* ── dark summary panels and tiles: smaller, calmer ── */
html body .hero,html body .stats,html.branded body .hero,html.branded body .stats{border-radius:16px!important;box-shadow:none!important}
html body .stat .n,html.branded body .stat .n{font-size:24px!important}
html body .tile,html.branded body .tile{border-radius:14px!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important;border:1px solid var(--line)!important;padding:14px!important}
html body .tile .ti{width:34px!important;height:34px!important;border-radius:9px!important;background:var(--sunk)!important;color:var(--ink)!important}
html body .tile .ti svg{width:18px;height:18px}
html body .flag{border-radius:12px!important}

/* ── home greeting ── */
html body .hello h1{font-size:28px!important;letter-spacing:-.02em!important}
html.branded body .hello{min-height:150px!important;border-radius:18px!important;padding:16px 18px!important}
html.branded body .hello h1{font-size:30px!important}
@media (max-width:899px){html.branded body .hello{padding-top:74px!important} html.branded body .hello::before{width:130px;height:52px;top:14px;left:16px}}

/* ── the step-by-step screens ── */
html body .wiz-q,html.branded body .wiz-q{font-family:var(--f-body)!important;font-size:25px!important;font-weight:800!important;letter-spacing:-.02em!important;line-height:1.18!important;margin-top:4px!important}
html body .wiz-sub{font-size:15px!important}
html body .opt{border-radius:12px!important;box-shadow:none!important;border:1px solid var(--line)!important}
html body .opt.on{border-color:var(--copper)!important;box-shadow:0 0 0 1px var(--copper) inset!important}
html body .chip{border-radius:9px!important}

/* ── snap button: smaller, never covers buttons ── */
html body .snapfab{width:54px!important;height:54px!important;border-radius:16px!important;box-shadow:0 6px 18px -6px rgba(15,23,42,.45)!important;background:var(--copper)!important;background-image:none!important}
html body .snapfab svg{width:24px!important;height:24px!important}
html body .endspace{height:150px}

/* ── phones: a standard bottom bar ── */
@media (max-width:899px){
  html body .tabbar{padding:6px 2px calc(6px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 -1px 0 var(--line)!important;border-top:0!important}
  html body .tabbar a,html body .tabbar button{min-height:52px!important;font-size:11.5px!important;font-weight:600!important;gap:3px!important;letter-spacing:0!important}
  html body .tabbar a svg,html body .tabbar button svg{width:24px!important;height:24px!important;stroke-width:2!important}
  html body .tabbar a.on svg{padding:3px 12px!important;margin:-3px 0!important;border-radius:10px!important}
  /* Pete sits in line with the other tabs instead of a big photo sticking out of the bar */
  html body .tabbar .peteb .pc{width:40px!important;height:40px!important;margin-top:0!important;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)!important}
  html body .tabbar .peteb .mb{width:18px!important;height:18px!important;border-width:2px!important;right:-3px!important;bottom:-3px!important}
  html body .tabbar .peteb .mb svg{width:10px!important;height:10px!important}
  html body .tabbar .peteb .ear{top:-2px!important}
  html body.hastabs .snapfab{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;right:14px!important}
  html body .ptop2 h1{font-size:25px!important}
}

/* ── inputs and the voice button inside them ── */
html body input[type=text],html body input[type=tel],html body input[type=email],html body input[type=number],html body input[type=url],html body input[type=password],html body input:not([type]),html body textarea,html body select{border-radius:11px!important;font-size:16px!important;min-height:46px}
html body .micbtn{width:38px!important;height:38px!important;right:5px!important;background:var(--sunk)!important;color:var(--ink)!important;box-shadow:none!important}
html body .micbtn svg{width:20px!important;height:20px!important}
html body .micbtn.on{background:#fff!important;border:2px solid #d0302a!important;color:#d0302a!important}
html body .micbtn .recdot{width:14px!important;height:14px!important}
/* page-level two-way switch (Clients: Customers / Reviews) matches the segmented control */
html body .seg{display:inline-grid!important;width:auto!important;justify-self:start;align-self:flex-start;background:var(--sunk)!important;border-radius:11px!important;padding:3px!important;gap:2px!important}
html body .seg button{min-height:0!important;padding:7px 14px!important;font-size:14px!important;font-weight:600!important;border-radius:9px!important}
html body .seg button.on{box-shadow:0 1px 3px rgba(15,23,42,.12)!important}
/* one typeface for the app itself; the client's display font stays on their home greeting only */
html body .bigaction,html.branded body .bigaction,html body .stat .n,html.branded body .stat .n,html body .big,html.branded body .big,html body .plan .big,html body .snapopt b,html body .bigrec{font-family:var(--f-body)!important;letter-spacing:-.02em}
html body .plan .big{font-size:22px!important;font-weight:800!important}

/* ── phones: a size up from the laptop scale, so it's easy to read and tap with work hands ── */
@media (max-width:899px){
  html body{font-size:17px}
  html body .ptop2 h1,html.branded body .ptop2 h1{font-size:29px!important}
  html body .moreb,html body .iconb{width:48px!important;height:48px!important}
  html body .moreb svg,html body .iconb svg{width:24px;height:24px}
  html body .subtabs a{padding:10px 17px!important;font-size:16px!important}
  html body .dtabs button,html body .jtabs button,html body .ftabs button{min-height:40px!important;padding:8px 14px!important;font-size:15px!important}
  html body .seg button{padding:10px 17px!important;font-size:16px!important}
  html body h2,html.branded body h2{font-size:23px!important}
  html body h3,html.branded body h3{font-size:18.5px!important}
  html body .small{font-size:15px}
  html body .item .t,html body .lead .t{font-size:17.5px!important}
  html body .item .s,html body .lead .s{font-size:15px!important}
  html body .list .item,html body .list>a,html body .list>button{min-height:66px!important;padding:14px 16px!important}
  html body .lead,html.branded body .lead{padding:14px 16px!important}
  html body .av,html body .lead .av,html body .crow .av{width:46px!important;height:46px!important;font-size:18px!important}
  html body .card,html.branded body .card{padding:18px!important}
  html body .btn,html.branded body .btn{min-height:50px;font-size:16.5px!important}
  html body .btn.big{min-height:56px!important;font-size:17.5px!important}
  html body .btn.small{min-height:42px!important;padding:8px 14px!important;font-size:15.5px!important}
  html body .stage,html body .lead .stage{min-height:42px!important;font-size:15.5px!important;padding:0 14px!important}
  html body .bigaction{min-height:60px!important;font-size:18px!important}
  html body .stat .n,html.branded body .stat .n{font-size:28px!important}
  html body .wiz-q,html.branded body .wiz-q{font-size:28px!important}
  html body .wiz-sub{font-size:16.5px!important}
  html body .hello h1,html.branded body .hello h1{font-size:32px!important}
  html body .tabbar a,html body .tabbar button{min-height:58px!important;font-size:12.5px!important}
  html body .tabbar a svg,html body .tabbar button svg{width:27px!important;height:27px!important}
  html body .tabbar .peteb .pc{width:48px!important;height:48px!important}
  html body .snapfab{width:60px!important;height:60px!important}
  html body.hastabs .snapfab{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  html body input[type=text],html body input[type=tel],html body input[type=email],html body input[type=number],html body input:not([type]),html body textarea,html body select{font-size:17px!important;min-height:52px}
  html body .micbtn{width:44px!important;height:44px!important}
}

/* ── empty lists that help ── */
html body .empty2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 20px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
html body .empty2 .ei{width:48px;height:48px;border-radius:14px;background:var(--sunk);color:var(--muted);display:grid;place-items:center;margin-bottom:2px}
html body .empty2 b{font-size:16.5px;color:var(--ink)}
html body .empty2 span:not(.ei){font-size:14.5px;color:var(--muted);max-width:34ch;line-height:1.45}
html body .empty2 .btn{margin-top:6px;min-width:180px}
@media (max-width:899px){html body .empty2 b{font-size:18px}html body .empty2 span:not(.ei){font-size:15.5px}}

/* ── home: a Today dashboard ── */
html body .hero .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
html body .hero .acts .btn{min-height:46px!important;font-size:15.5px!important;flex:1 1 auto}
html body .hero .acts .glass{width:auto!important;padding:0 18px!important}
html body .hero.none .lab{color:var(--copper)}
html body .hero.none .where{color:var(--muted)}
html body .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
html body .kpis a{display:flex;flex-direction:column;gap:2px;padding:14px 12px;text-decoration:none;color:var(--ink);border-right:1px solid var(--line);min-width:0}
html body .kpis a:last-child{border-right:0}
html body .kpis b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .kpis b.bad{color:var(--red)}
html body .kpis span{font-size:13px;color:var(--muted);line-height:1.25}
html body h3 .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--sunk);color:var(--muted);font-size:13px;font-weight:700;margin-left:6px;vertical-align:2px}
html body .todo .item{gap:12px;text-decoration:none;color:var(--ink)}
html body .todo .mi{width:34px;height:34px;border-radius:10px;background:var(--sunk);display:grid;place-items:center;flex:none;color:var(--ink)}
html body .todo .t{font-weight:600!important;font-size:15px!important}
html body .chev{color:var(--muted);font-size:22px;line-height:1}
html body .petecard{border-radius:14px!important;box-shadow:none!important;border:1px solid var(--line)!important;min-height:0!important;padding:12px 14px!important}
html body .petecard .pf{width:44px!important;height:44px!important}
@media (max-width:899px){
  html body .kpis b{font-size:24px}
  html body .kpis span{font-size:14px}
  html body .todo .t{font-size:16.5px!important}
  html body .hero .acts .btn{min-height:52px!important;font-size:17px!important}
}

/* ── customer documents: invoice, receipt, agreement copy ── */
html body .doc{background:#fff;color:#16181d;border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:18px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
html body .doc *{color:inherit}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:16px;border-bottom:2px solid #16181d}
.doc-from{display:flex;flex-direction:column;gap:2px;min-width:0}
.doc-from b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.doc-from span{font-size:13.5px;color:#5b6170!important}
.doc-logo{width:64px;height:64px;object-fit:contain;border-radius:10px;border:1px solid #e6e8ee;padding:4px;margin-bottom:8px;background:#fff}
.doc-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;flex:none}
.doc-type{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5b6170!important}
.doc-meta b{font-size:17px;font-variant-numeric:tabular-nums}
.doc-stamp{display:inline-block;margin-top:4px;padding:3px 9px;border-radius:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#eef0f4;color:#5b6170!important}
.doc-stamp.ok{background:#e3f5ea;color:#167a42!important}
.doc-stamp.bad{background:#fde7e7;color:#b42318!important}
.doc-stamp.wait{background:#fff3dc;color:#8a5a00!important}
.doc-parties{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px}
.doc-parties>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.doc-parties b{font-size:16px}
.doc-parties span{font-size:14px;color:#5b6170!important}
.doc-lab,.doc-dates dt{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a909c!important}
.doc-dates{margin:0;display:grid;gap:6px;text-align:right}
.doc-dates dd{margin:0;font-size:14px;font-weight:600}
.doc-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.doc-lines th{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a909c!important;text-align:left;padding:0 0 8px;border-bottom:1px solid #e6e8ee}
.doc-lines th:last-child,.doc-lines td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.doc-lines td{padding:11px 0;border-bottom:1px solid #eef0f4;font-size:15px;vertical-align:top}
.doc-lines tfoot td{border-bottom:0;padding:7px 0;font-size:15px}
.doc-lines tfoot tr:first-child td{padding-top:12px;font-weight:700}
.doc-lines tfoot tr.paid td{color:#167a42!important}
.doc-lines tfoot tr.due td{font-size:19px;font-weight:800;border-top:2px solid #16181d;padding-top:12px}
.doc-terms{margin:0;font-size:13.5px;color:#5b6170!important;line-height:1.5}
@media (max-width:420px){.doc-parties{grid-template-columns:1fr}.doc-dates{text-align:left;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-color-scheme:dark){html body .doc{border-color:#2a2f3a}}

/* ── status labels: one look everywhere. green done/paid · amber waiting · red overdue · blue info · grey draft ── */
html body .pill{display:inline-flex!important;align-items:center;gap:5px;border-radius:7px!important;font-size:12.5px!important;font-weight:700!important;padding:3px 8px!important;line-height:1.3;border:0!important;white-space:nowrap}
html body .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
html body .p-green{background:#e3f5ea!important;color:#167a42!important}
html body .p-amber{background:#fff3dc!important;color:#8a5a00!important}
html body .p-red{background:#fde7e7!important;color:#b42318!important}
html body .p-blue{background:#e6f0fb!important;color:#1d5fa8!important}
html body .p-grey{background:var(--sunk)!important;color:var(--muted)!important}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body .p-green{background:#173a26!important;color:#7ad79f!important}html:not([data-theme="light"]) body .p-amber{background:#3b2f14!important;color:#f2c46d!important}html:not([data-theme="light"]) body .p-red{background:#401c1c!important;color:#ff9b93!important}html:not([data-theme="light"]) body .p-blue{background:#16304d!important;color:#8fc1ff!important}}
/* money and status on the right of a row, lined up */
html body .rcol{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;margin-left:10px}
html body .rcol .amt,html body .item .amt{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
html body .item.odrow{box-shadow:inset 3px 0 0 #d23b30!important}
@media (max-width:899px){html body .pill{font-size:13.5px!important;padding:4px 9px!important}html body .rcol .amt{font-size:17.5px}}

/* ── Graftly's own look (businesses without their own colours): deep navy, one orange accent, plain background ── */
:root{--bg:#f4f5f7;--sunk:#eef0f3;--line:#e3e6eb;--ink:#101828;--muted:#5d6676;--navy:#14213a;--on-navy:#eef2f8;--copper:#e2561f;--copper-2:#e2561f;--on-copper:#ffffff;--copper-soft:#fdeee7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0f17;--surface:#131a26;--sunk:#0f1520;--line:#222b3a;--ink:#e8edf4;--muted:#98a3b5;--navy:#0e1522;--copper:#f2743f;--copper-2:#f2743f;--on-copper:#1a0c05;--copper-soft:#2a170e}}
html body{background:var(--bg)!important;background-image:none!important}

/* ── page-shaped loading placeholders ── */
html body .sk{display:flex;flex-direction:column;gap:14px}
html body .sk i{display:block;background:linear-gradient(90deg,var(--sunk) 0%,var(--line) 50%,var(--sunk) 100%);background-size:200% 100%;border-radius:8px;animation:skm 1.3s ease-in-out infinite}
html body .sk-top{display:flex;justify-content:space-between;align-items:center;padding-top:6px}
html body .sk-title{width:42%;height:28px}html body .sk-btn{width:44px;height:44px;border-radius:12px!important}
html body .sk-seg{width:58%;height:38px;border-radius:11px!important}
html body .sk-list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
html body .sk-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
html body .sk-row:last-child{border-bottom:0}
html body .sk-row span{flex:1;display:flex;flex-direction:column;gap:7px}
html body .sk-av{width:42px;height:42px;border-radius:50%!important;flex:none}
html body .sk-l1{width:55%;height:13px}html body .sk-l2{width:35%;height:11px}html body .sk-pill{width:54px;height:20px;flex:none}
html body .sk-card{height:110px;border-radius:14px!important}
@keyframes skm{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){html body .sk i{animation:none}}

/* ── laptops: list left, details right ── */
@media (min-width:1100px){
  html body #app.col:has(.split){max-width:1240px!important;width:100%}
  html body .split{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:22px;align-items:start}
  html body .split-l,html body .split-r{display:flex;flex-direction:column;gap:14px;min-width:0}
  html body .split-r{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
  html body .split-r .back{display:none!important}
  html body .split-r>.card,html body .split-r .card{box-shadow:none!important}
  html body .split-hint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:320px;color:var(--muted);text-align:center}
  html body .split-hint svg{transform:rotate(180deg);opacity:.5}
  html body .split-l [data-open].sel{background:var(--copper-soft)!important;box-shadow:inset 3px 0 0 var(--copper)!important}
}
html body .hero.none .btn:not(.primary){border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important}
html body .todo{gap:0!important}
html.branded body .hello .iconb{background:rgba(255,255,255,.92)!important;color:#1d2417!important;border-color:transparent!important}

/* ── not being paid: the steps ── */
html body .recov{gap:12px}
html body .rsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
html body .rs{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);opacity:.6}
html body .rs:last-child{border-bottom:0}
html body .rs.now,html body .rs.done{opacity:1}
html body .rs .rn{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--sunk);color:var(--muted)}
html body .rs.now .rn{background:var(--copper);color:var(--on-copper)}
html body .rs.done .rn{background:#e3f5ea;color:#167a42}
html body .rs .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
html body .rs .grow>span{font-size:14px;color:var(--muted)}
html body .rs .btns{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}
html body .howto{margin:0;padding-left:20px;display:grid;gap:8px;font-size:15px}
html body .linkbtn{background:none;border:0;padding:0;color:var(--copper);font-weight:700;text-decoration:underline;cursor:pointer;font-size:14.5px}
@media (max-width:899px){html body .rs .grow>span{font-size:15.5px}}
html body .empty2 .btn.ghost{border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important;text-decoration:none!important;font-size:15px!important;min-height:44px!important}

/* ═══ round two (Nov 2026): inner screens ═══ */
/* settings-style lists: one card, rows with dividers (Business details, Account, Website settings) */
html body .rows{display:flex!important;flex-direction:column!important;gap:0!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05)!important}
html body .rows>*{border-radius:0!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--line)!important;background:transparent!important}
html body .rows>*:last-child{border-bottom:0!important}
html body .rowlink{padding:13px 16px!important;min-height:60px}
html body .rowlink .l{font-size:13px;color:var(--muted)}
html body .rowlink .v{font-size:16px;font-weight:600;color:var(--ink)}
/* the More menu: a clean list instead of big tiles */
html body .moregrid{display:flex!important;flex-direction:column!important;gap:0!important;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
html body .moregrid a{flex-direction:row!important;align-items:center!important;gap:12px!important;min-height:54px!important;padding:10px 14px!important;border-radius:0!important;background:transparent!important;border-bottom:1px solid var(--line);font-size:16px}
html body .moregrid a:last-child{border-bottom:0}
html body .moregrid a::after{content:"›";margin-left:auto;color:var(--muted);font-size:22px}
html body .moregrid .ico{width:34px!important;height:34px!important;border-radius:10px!important;box-shadow:none!important;background:var(--sunk)!important;color:var(--ink)!important}
html body .moregrid .ico svg{width:19px;height:19px}
html body .moregrid b{font-weight:600}
html body .sheet .pane .row b.grow{font-family:var(--f-body)!important;font-size:21px!important;font-weight:800!important}
/* Pete's briefing card: light text on the dark card */
html body .brief h2,html.branded body .brief h2{color:var(--on-navy)!important;font-family:var(--f-body)!important}
/* the plan card on Account */
html body .plan .big,html body .pk .opt b.p{font-family:var(--f-body)!important;font-weight:800!important;letter-spacing:-.02em}
html body .pk .opt b.p{font-size:24px!important}
@media (max-width:480px){html body .pk{grid-template-columns:1fr!important}html body .pk .opt{min-height:0!important}}
/* van page: the no-signal note folds away */
html body details.sig{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0}
html body details.sig summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:600;list-style:none}
html body details.sig summary::-webkit-details-marker{display:none}
html body details.sig ul{margin:0;padding:0 16px 14px 40px;color:var(--muted);font-size:14.5px;display:grid;gap:4px}
/* step-by-step screens: lighter back/close buttons */
html body .wiz-top .btn,html body .wiz-top button{width:46px!important;height:46px!important;min-height:46px!important;border-radius:12px!important;border:1px solid var(--line)!important;box-shadow:none!important;background:var(--surface)!important;padding:0!important}
html body .wiz-bar{height:6px!important;border-radius:6px!important;background:var(--sunk)!important}
/* quiet text links that were showing as huge underlined text */
html body a.btn.ghost,html body button.btn.ghost{text-decoration:none!important}
html body .btn.ghost{color:var(--muted)!important;font-weight:600!important;font-size:15px!important;min-height:40px!important;background:transparent!important;border:0!important}

/* ═══ simpler layout (Nov 2026): four tabs with the mic in the middle, labelled page headers, bigger buttons ═══ */
/* page header: small label, bold title, one line about the page */
html body .ptop2{align-items:flex-start!important}
html body .ptop2 .eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
html body .ptop2 .psub{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.4}
html body .ptop2 .psub:empty{display:none}
/* bottom bar on phones: Home · Diary · (mic) · Jobs · Money */
@media (max-width:899px){
  html body .tabbar{grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:end!important}
  html body .tabbar .railonly,html body .tabbar .railmore,html body .tabbar .railhead{display:none!important}
  html body .tabbar .micb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:none;border:0;padding:0 0 2px;position:relative;min-height:58px;cursor:pointer}
  html body .tabbar .micb .mc{width:64px;height:64px;margin-top:-30px;border-radius:50%;background:var(--copper);color:var(--on-copper);display:grid;place-items:center;box-shadow:0 0 0 5px var(--surface),0 10px 22px -8px color-mix(in srgb,var(--copper) 70%,transparent)}
  html body .tabbar .micb .mc svg{width:28px!important;height:28px!important}
  html body .tabbar .micb .ml{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:4px}
  html body .tabbar .micb .ear{position:absolute;top:-30px;right:calc(50% - 34px);width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid var(--surface);display:none}
  html body.heypete .tabbar .micb .ear{display:block}
  html body .tabbar a{min-height:58px!important}
}
/* laptops: the side menu keeps Clients, and the mic sits at the bottom */
@media (min-width:900px){
  html body .tabbar .railonly{display:contents}
  html body .tabbar .micb{order:9;margin-top:auto;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 12px;cursor:pointer;color:var(--ink);font-weight:700;font-size:15px}
  html body .tabbar .micb .mc{width:42px;height:42px;border-radius:50%;background:var(--copper);color:var(--on-copper);display:grid;place-items:center}
  html body .tabbar .micb .mc svg{width:20px!important;height:20px!important}
  html body .tabbar .micb .ear{display:none}
}
/* bigger, easier buttons on phones */
@media (max-width:899px){
  html body .btn,html.branded body .btn{min-height:54px;border-radius:14px!important;font-size:17px!important}
  html body .btn.big,html body .bigaction{min-height:60px!important;font-size:18px!important;border-radius:16px!important}
  html body .btn.small{min-height:44px!important;border-radius:11px!important}
  html body .subtabs{display:flex!important;width:100%}
  html body .subtabs a{flex:1;text-align:center;padding:11px 10px!important;font-size:16px!important}
  html body .ptop2 h1,html.branded body .ptop2 h1{font-size:32px!important}
  html body .ptop2 .psub{font-size:16px}
}
@media (max-width:899px){ html body .tabbar{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} }
/* More menu: grouped */
html body .moreh{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:10px 4px -4px}
/* ═══ phone tap sizes, round 2 (Nov 2026): nothing a thumb needs is under 52px, text 16px+ ═══ */
@media (max-width:899px){
  html body a.btn{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center}
  html body #app .btn{min-height:56px!important;font-size:17px!important}
  html body #app .btn.big,html body #app .bigaction{min-height:62px!important;font-size:18px!important}
  html body #app .btn.small,html body #app .item .btn{min-height:50px!important;font-size:16px!important;padding-left:16px!important;padding-right:16px!important}
  html body #app .empty2 .btn,html body #app .empty2 .btn.ghost{min-height:56px!important;font-size:17px!important;min-width:220px}
  /* filter chips: never run off the edge, share the row, bigger */
  html body #app .chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;overflow:visible!important}
  html body #app .chips .chip{flex:1 1 auto;justify-content:center;text-align:center;min-height:52px!important;font-size:16.5px!important;padding:0 16px!important;border-radius:14px!important}
  html body #app .subtabs a{min-height:52px!important;display:flex!important;align-items:center;justify-content:center}
  /* text links that act as buttons get a proper tap area */
  html body #app a.small{display:inline-flex;align-items:center;min-height:44px;font-size:16px!important}
  /* form fields */
  html body #app input:not([type=checkbox]):not([type=radio]),html body #app select{min-height:56px!important;font-size:17px!important}
  html body #app textarea{font-size:17px!important}
  /* pop-up sheets */
  html body .sheet .btn{min-height:56px!important;font-size:17px!important}
  html body .sheet .btn.small{min-height:48px!important}
  html body .sheet .chip{min-height:50px!important;font-size:16px!important;padding:0 16px!important}
  html body .moregrid a{min-height:62px!important}
  html body .moregrid b{font-size:17.5px!important}
  /* the menu button in page headers */
  html body .ptop2 .moreb{min-width:56px!important;min-height:56px!important}
}
@media (max-width:899px){
  html body #app .jtabs,html body #app .ftabs,html body #app .dtabs{display:flex!important;flex-wrap:wrap!important;gap:8px!important;overflow:visible!important}
  html body #app .jtabs button,html body #app .ftabs button,html body #app .dtabs button{flex:1 1 auto;min-height:52px!important;font-size:16.5px!important;padding:0 14px!important;border-radius:14px!important;white-space:nowrap}
}
@media (max-width:899px){
  html body #app .jtabs,html body #app .ftabs,html body #app .dtabs{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  html body #app .jtabs button,html body #app .ftabs button,html body #app .dtabs button{padding:4px 6px!important;white-space:normal;line-height:1.2}
}
/* Call · Text · Directions */
html body .contactrow{display:grid;gap:8px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
html body .contactrow.n1{--n:1}html body .contactrow.n2{--n:2}html body .contactrow.n3{--n:3}
html body .contactrow .btn{display:flex!important;align-items:center;justify-content:center;gap:4px;white-space:nowrap;padding-left:6px!important;padding-right:6px!important}
@media (max-width:360px){html body .contactrow .btn svg{display:none}}
html body .contactrow .btn{border:1.5px solid var(--line)!important;background:var(--surface)!important;color:var(--ink)!important;text-decoration:none!important}
html body .contactrow .btn svg{flex:none;width:20px;height:20px}
@media (max-width:899px){ html body #app .contactrow .btn,html body .sheet .contactrow .btn{font-size:16px!important;padding-left:4px!important;padding-right:4px!important} html body .contactrow{gap:6px} }