/* Discover Projects - every style in the app. Was the <style> block in index.html. */
:root{
  --bg:#F3F7F5;--surface:#ffffff;--surface2:#F7FBF9;--line:#E3EDE8;--line2:#EDF2EF;
  --ink:#0F1A16;--ink2:#3C4A44;--ink3:#6E7A74;
  --teal:#2E9E80;--teal2:#1C7767;--teal-soft:#DEF5EA;--teal-ink:#15604E;--mint:#EBF8F2;
  --amber:#B07211;--amber-soft:#FEEFD5;--red:#BD3A28;--red-soft:#FDE6E2;--blue:#2F6FCB;--blue-soft:#DEEBFD;--lilac:#574DB0;--lilac-soft:#E7E3F7;--grey:#5B6861;--grey-soft:#EDF1EF;
  --warn-bg:#fdecec;--box-bg:#ffffff;--inst-bg:#e8ecfa;--inst-ink:#3a4b9c;--out-line:#4f6bed;--card:#ffffff;--tc1-bg:#E0F0F7;--tc1-ink:#2F6F8F;--tc2-bg:#F3EBDD;--tc2-ink:#8A5A1A;--tc3-bg:#F6E6EE;--tc3-ink:#9A3E6E;--tc4-bg:#E6F0EA;--tc4-ink:#3E6E4E;--band-ink:#ffffff;
  --radius:14px;--sans:'Poppins',system-ui,Segoe UI,Arial,sans-serif;--head:'Poppins',system-ui,sans-serif;--band:#4FB3A3;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C1310;--surface:#141F1B;--surface2:#18241F;--line:#243631;--line2:#1F2E28;
  --ink:#E9F2EE;--ink2:#BFCEC8;--ink3:#87968F;
  --teal:#3FBE9C;--teal2:#7FE0C2;--teal-soft:#17372E;--teal-ink:#7FE0C2;--mint:#0F1815;
  --amber:#EDB55F;--amber-soft:#352A14;--red:#EF8E82;--red-soft:#361E1B;--blue:#8FB7F2;--blue-soft:#16283E;--lilac:#A9A1EE;--lilac-soft:#242046;--grey:#BFCEC8;--grey-soft:#1F2B27;
  --warn-bg:#361E1B;--box-bg:#141F1B;--inst-bg:#232B45;--inst-ink:#AFC0F0;--out-line:#8FB7F2;--card:#141F1B;--tc1-bg:#1E3340;--tc1-ink:#9FD0EA;--tc2-bg:#352A14;--tc2-ink:#E8C48C;--tc3-bg:#3B2432;--tc3-ink:#EBAFD0;--tc4-bg:#1F3328;--tc4-ink:#A8D8B8;--band-ink:#0F2A26;--band:#3F9A8A;
}}
:root[data-theme="dark"]{
  --bg:#0C1310;--surface:#141F1B;--surface2:#18241F;--line:#243631;--line2:#1F2E28;
  --ink:#E9F2EE;--ink2:#BFCEC8;--ink3:#87968F;
  --teal:#3FBE9C;--teal2:#7FE0C2;--teal-soft:#17372E;--teal-ink:#7FE0C2;--mint:#0F1815;
  --amber:#EDB55F;--amber-soft:#352A14;--red:#EF8E82;--red-soft:#361E1B;--blue:#8FB7F2;--blue-soft:#16283E;--lilac:#A9A1EE;--lilac-soft:#242046;--grey:#BFCEC8;--grey-soft:#1F2B27;
  --warn-bg:#361E1B;--box-bg:#141F1B;--inst-bg:#232B45;--inst-ink:#AFC0F0;--out-line:#8FB7F2;--card:#141F1B;--tc1-bg:#1E3340;--tc1-ink:#9FD0EA;--tc2-bg:#352A14;--tc2-ink:#E8C48C;--tc3-bg:#3B2432;--tc3-ink:#EBAFD0;--tc4-bg:#1F3328;--tc4-ink:#A8D8B8;--band-ink:#0F2A26;--band:#3F9A8A;
}
*{box-sizing:border-box}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag{border:1px solid color-mix(in srgb,currentColor 35%,transparent)}}
:root[data-theme="dark"] .tag{border:1px solid color-mix(in srgb,currentColor 35%,transparent)}
:root[data-theme="dark"] .card>h3,:root[data-theme="dark"] .card>h3 a{color:var(--band-ink)}
:root[data-theme="dark"] .card>h3 .btn.ghost{color:var(--band-ink);border-color:rgba(0,0,0,.35);background:rgba(0,0,0,.12)}
:root[data-theme="dark"] .card>h3 .tag{background:rgba(0,0,0,.25);color:var(--band-ink)}
:root[data-theme="dark"] .steps span.now,:root[data-theme="dark"] .ins button.on,:root[data-theme="dark"] .why button.on,:root[data-theme="dark"] .btn{color:#0F2A26}
:root[data-theme="dark"] .btn.danger,:root[data-theme="dark"] .ins button.onf,:root[data-theme="dark"] .nav button .badge{color:#2A1416}
:root[data-theme="dark"] .ev.eng{background:color-mix(in srgb,var(--ec) 26%,transparent)}
:root[data-theme="dark"] .eleg i{outline:1px solid rgba(255,255,255,.25)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card>h3,:root:not([data-theme="light"]) .card>h3 a{color:var(--band-ink)}:root:not([data-theme="light"]) .card>h3 .btn.ghost{color:var(--band-ink);border-color:rgba(0,0,0,.35);background:rgba(0,0,0,.12)}:root:not([data-theme="light"]) .card>h3 .tag{background:rgba(0,0,0,.25);color:var(--band-ink)}:root:not([data-theme="light"]) .steps span.now,:root:not([data-theme="light"]) .ins button.on,:root:not([data-theme="light"]) .why button.on,:root:not([data-theme="light"]) .btn{color:#0F2A26}:root:not([data-theme="light"]) .btn.danger,:root:not([data-theme="light"]) .ins button.onf,:root:not([data-theme="light"]) .nav button .badge{color:#2A1416}:root:not([data-theme="light"]) .ev.eng{background:color-mix(in srgb,var(--ec) 26%,transparent)}:root:not([data-theme="light"]) .eleg i{outline:1px solid rgba(255,255,255,.25)}}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;font-weight:300}
b,strong,th,label,.btn,.tag,.subnav button,.nav button{font-weight:500}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.2;font-weight:700;color:var(--ink)}
h1{font-size:26px;letter-spacing:-.01em}h2{font-size:19px}h3{font-size:14.5px;font-weight:600}h4{font-size:13px;color:var(--ink2);font-weight:600}
p{margin:0 0 8px}.muted{font-weight:300}
input,select,textarea{font-weight:400}
button{font:inherit;cursor:pointer}
a{color:var(--teal)}
img{max-width:100%}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh} .app.noside{grid-template-columns:1fr}
.side{background:var(--mint);border-right:1px solid color-mix(in srgb,var(--teal) 14%,transparent);padding:16px 13px 13px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.side .brand{display:block;padding:3px 7px 17px}
.side .brand img{width:100%;max-width:186px;display:block;height:auto}
.side .brand .lgd{display:none}
.brand{display:block;padding:3px 7px 17px}
.brand img{width:100%;max-width:186px;height:auto;display:block}
.brand .lgd{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .lg{display:none}:root:not([data-theme="light"]) .brand .lgd{display:block}}
:root[data-theme="dark"] .brand .lg{display:none}:root[data-theme="dark"] .brand .lgd{display:block}
.nav{display:flex;flex-direction:column;gap:4px;flex:1;width:100%}
.nav button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;width:100%;height:auto;padding:8.5px 11px;border:0;background:none;color:var(--ink2);border-radius:9px;font-weight:450;font-size:13px;text-align:left;position:relative}
.nav button svg{width:17px;height:17px;flex:none;opacity:.72}
.nav button:hover{background:var(--surface);color:var(--ink)}
.nav button.on{background:var(--surface);color:var(--ink);font-weight:550;box-shadow:0 1px 2px rgba(16,40,32,.05),0 1px 8px rgba(16,40,32,.04)}
.nav button.on svg{opacity:1;color:var(--teal2)}
.nav button:hover:not(.on){background:color-mix(in srgb,var(--surface) 55%,transparent)}
.nav button .badge{position:static;margin-left:auto;min-width:18px;height:17px;border-radius:999px;background:var(--teal);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px}
.nav .spacer{flex:1}
.side .foot{font-size:12px;color:var(--ink3);text-align:left;line-height:1.3;padding:10px 11px 0;margin-top:auto;border-top:1px solid color-mix(in srgb,var(--teal) 14%,transparent)}
.side .foot button{margin-top:4px;background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:6px;padding:3px 7px;font-size:12px}
.subnav{display:flex;gap:2px;flex-wrap:wrap;margin:-4px 0 16px;border-bottom:1px solid var(--line)}
.subnav button{border:0;border-bottom:2px solid transparent;background:none;color:var(--ink3);border-radius:0;padding:9px 13px;font-weight:450;font-size:12.5px;margin-bottom:-1px}
.subnav button.on{background:none;border-bottom-color:var(--teal);color:var(--teal2);font-weight:550}
.subnav button:hover:not(.on){color:var(--ink)}
.main{padding:22px 28px 60px;min-width:0}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topbar p{margin:4px 0 0;color:var(--ink2);max-width:70ch;font-weight:300}.topbar h1+p:first-of-type{color:var(--ink2)}
.btn{background:var(--teal);color:#fff;border:0;border-radius:9px;padding:9px 14px;font-weight:500;font-size:13.5px}
.btn:hover{background:var(--teal2)}
.btn.ghost{background:none;color:var(--teal-ink);border:1px solid var(--line2)}
:root[data-theme="dark"] .btn.ghost{color:var(--teal2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.ghost{color:var(--teal2)}}
.btn.ghost:hover{background:var(--surface2)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:6px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:0 1px 2px rgba(16,40,32,.04),0 1px 10px rgba(16,40,32,.035)}
.card>h3{margin:-2px -2px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--band);color:#fff;padding:8px 12px;border-radius:9px;font-weight:500;font-size:13.5px;letter-spacing:.01em}
.card>h3 .muted,.card>h3 span.muted{color:rgba(255,255,255,.8)!important}
.card>h3 .btn{font-weight:500;background:#fff;color:var(--teal-ink);border:0;padding:5px 10px;font-size:12px}
.card>h3 .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5)}
.card>h3 .btn.ghost:hover{background:rgba(255,255,255,.28)}
.card>h3 select{background:#fff;color:var(--ink);border:0;border-radius:6px;padding:3px 6px;font-size:12px}
.card>h3 .tag{background:#fff;color:var(--teal-ink)}
.card>h3 a{color:#fff}
.card h4{margin-top:10px}
.stat{padding:14px 16px}
.stat .n{font-family:var(--head);font-size:28px;font-weight:700;color:var(--teal-ink);line-height:1}
.stat .l{font-size:13px;color:var(--ink2);margin-top:6px}
.stat.warn .n{color:var(--amber)}.stat.bad .n{color:var(--red)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--ink3);font-weight:600;font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding:4px 8px 9px;border-bottom:1px solid var(--line)}
td{padding:10px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.row{cursor:pointer} [onclick]:not(input):not(select):not(textarea):not([data-nolink]){cursor:pointer} [onclick] input,[onclick] select,[onclick] textarea{cursor:auto}tr.row:hover td{background:var(--surface2)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface2);color:var(--ink2);white-space:nowrap;line-height:1.6}
.tag.teal{background:var(--teal-soft);color:var(--teal-ink)}.tag.lilac{background:var(--lilac-soft);color:var(--lilac)}.tag.grey{background:var(--grey-soft);color:var(--grey)}.tag.amber{background:var(--amber-soft);color:var(--amber)}.tag.red{background:var(--red-soft);color:var(--red)}.tag.blue{background:var(--blue-soft);color:var(--blue)}
.muted{color:var(--ink3);font-size:13px}
.right{text-align:right}
.money{font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0 18px;overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 12px;color:var(--ink2);font-weight:600;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--teal-ink);border-color:var(--teal)}
.tabs button:hover{color:var(--ink)}
.stages{display:flex;gap:0;margin:6px 0 4px;overflow-x:auto;padding-bottom:4px}
.stages div{flex:1;min-width:88px;text-align:center;font-size:12px;font-weight:700;color:var(--ink3);padding:8px 4px;border-bottom:3px solid var(--line);position:relative}
.stages div.done{color:var(--teal-ink);border-color:var(--teal)}
.stages div.now{color:var(--teal-ink);border-color:var(--teal);background:var(--teal-soft);border-radius:6px 6px 0 0}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-items:start}
.qd{background:#fff;color:#1a1a1a;padding:26px 30px;border-radius:10px;font-family:'Poppins',Arial,Helvetica,sans-serif;font-weight:400;max-width:900px;margin:0 auto;line-height:1.45}
.qd-print{box-shadow:none;border-radius:0;padding:0;max-width:none}
.qd-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #1F4F4A;padding-bottom:14px}
.qd-logo{font-size:23px;font-weight:700;color:#1F4F4A;letter-spacing:-.4px} .qd-logo-img{display:block;height:44px;width:auto;margin:0 0 6px} .qd-co{font-size:11.5px;color:#666;margin-top:4px}
.qd-meta h1{font-size:19px;margin:0 0 6px;color:#1F4F4A;text-align:right} .qd-meta dl{display:grid;grid-template-columns:auto auto;gap:1px 10px;margin:0;font-size:12px;justify-content:end}
.qd-meta dt{color:#777} .qd-meta dd{margin:0;text-align:right;font-weight:600} .qd-exp{color:#b3261e}
.qd-to{display:flex;gap:30px;margin:16px 0 6px;font-size:12.5px} .qd-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:2px}
.qd-title{font-size:15px;font-weight:700;margin:14px 0 2px} .qd-intro{font-size:12.5px;color:#444;margin:4px 0 10px}
.qd-sec{margin-top:16px;break-inside:avoid} .qd-sec h3{font-size:13.5px;margin:0 0 4px;color:#1F4F4A;border-bottom:1px solid #e3ebe8;padding-bottom:4px}
.qd-opt{font-size:10px;background:#fbf0e2;color:#9a5b12;border-radius:999px;padding:1px 7px;vertical-align:middle}
.qd-sn{font-size:12px;color:#666;margin:2px 0 6px}
.qd-t{width:100%;border-collapse:collapse;font-size:12.5px} .qd-t th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#999;font-weight:600;padding:3px 6px;border-bottom:1px solid #eee}
.qd-t td{padding:6px;border-bottom:1px solid #f0f0f0;vertical-align:top} .qd-q{width:58px;text-align:right} .qd-m{width:96px;text-align:right;white-space:nowrap}
.qd-sub{color:#666;font-size:11.5px;margin-top:2px} .qd-note td{color:#555;font-style:italic;background:#fafafa}
.qd-out{opacity:.45;text-decoration:line-through} .qd-st td{font-weight:700;border-top:1px solid #ddd;border-bottom:0}
.qd-ask{margin-top:5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px} .qd-ask label{display:flex;gap:5px;align-items:center;margin:0;color:#1F4F4A}
.qd-note-in{flex:1;min-width:150px;font-size:12px;padding:3px 6px;border:1px solid #ddd;border-radius:5px;background:#fff;color:#222}
.qd-tot{margin:14px 0 0 auto;font-size:13px;border-collapse:collapse} .qd-tot td{padding:4px 10px} .qd-tot .qd-grand td{font-size:16px;font-weight:700;border-top:2px solid #1F4F4A;color:#1F4F4A}
.qd-oh{font-size:14px;margin:22px 0 2px;color:#1F4F4A} .qd-foot{margin-top:22px;border-top:1px solid #eee;padding-top:10px;font-size:11px;color:#777}
@media print{.qd-ask{display:none}.qd{padding:0}}
/* The quote, presented: summary, the printed cover and the closing note (16-quotes.js quoteDoc) */
.qd h1,.qd h2,.qd h3{font-family:inherit} .qd-t,.qd-tot,.qd-st-t{font-variant-numeric:tabular-nums}
.qd-h2{font-size:15px;font-weight:600;color:#1F4F4A;margin:22px 0 8px;letter-spacing:-.1px}
.qd-sum{margin:18px 0 6px;padding:16px 18px 12px;background:#F4F9F7;border-radius:10px;break-inside:avoid} .qd-sum .qd-h2{margin-top:0}
.qd-st-t{width:100%;border-collapse:collapse;font-size:13px} .qd-st-t td{padding:7px 0;border-bottom:1px solid #DFEAE5}
.qd-st-t td span{display:block;font-size:11px;color:#7a8580}
.qd-st-n td{font-weight:600;border-bottom:0;padding-top:10px} .qd-st-v td{color:#5b6861;border-bottom:0;padding-top:0}
.qd-st-g td{font-size:17px;font-weight:700;color:#1F4F4A;border-top:2px solid #1F4F4A;border-bottom:0;padding-top:9px}
.qd-next{margin-top:18px;padding:14px 16px;border-left:3px solid #2E9E80;background:#F4F9F7;border-radius:0 10px 10px 0;font-size:12.5px;break-inside:avoid} .qd-next .qd-h2{margin:0 0 4px} .qd-next p{margin:0}
.qd-keep{break-inside:avoid}
/* The printed quote (16-quotes.js qPrintDoc). Shared layout, then the three looks: a Studio, b Drawing set, c Light. */
.qp{font-family:'QPoppins','Poppins',Arial,sans-serif;font-weight:300;color:#1d2622;font-size:9.5pt;line-height:1.55;font-variant-numeric:tabular-nums}
.qp,.qp *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
.qp b{font-weight:500} .qp h1,.qp h2{font-family:inherit;margin:0}
.qp-k{font-size:7.5pt;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#2E9E80}
.qp-cover{height:297mm;position:relative;overflow:hidden;break-after:page;padding:20mm;display:flex;flex-direction:column}
.qp-logo,.qp-logo-l{width:70mm;position:relative} .qp-logo-l,.qp-tb{display:none}
.qp-mark{position:absolute}
.qp-cv{margin-top:auto;margin-bottom:20mm;position:relative}
.qp-cv h1{font-size:34pt;line-height:1.08;font-weight:600;letter-spacing:-.8px;margin:5mm 0 8mm;max-width:155mm}
.qp-for{font-size:10pt} .qp-for b{display:block;font-size:13pt;font-weight:500;margin:1mm 0}
.qp-facts{display:flex;gap:12mm;padding-top:6mm;font-size:9.5pt;position:relative}
.qp-facts span,.qp-tb span{display:block;font-size:6.8pt;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1mm}
.qp-open{break-after:page}
.qp-row{display:grid;grid-template-columns:38mm 1fr;gap:8mm;padding:0 0 11mm} .qp-row+.qp-row{border-top:1px solid #dfe8e4;padding-top:10mm}
.qp-lab{font-size:7.5pt;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#2E9E80;padding-top:1.4mm}
.qp-letter p{margin:0 0 3.5mm;font-size:10.5pt;line-height:1.7;color:#2f3a35} .qp-letter .qp-sign{margin-top:6mm;font-weight:500;color:#1d2622} .qp-sign span{display:block;font-weight:300;font-size:9pt;color:#6e7a74}
.qp-big{font-size:34pt;font-weight:600;color:#16302C;letter-spacing:-1px;line-height:1} .qp-big span{font-size:.5em;font-weight:400;color:#6e7a74;letter-spacing:0}
.qp-vatl{font-size:9pt;color:#6e7a74;margin:2.5mm 0 8mm}
.qp-sum{list-style:none;margin:0;padding:0} .qp-sum li{display:grid;grid-template-columns:10mm 1fr auto;align-items:baseline;padding:3.2mm 0 5mm;border-bottom:1px solid #e6eeea;position:relative}
.qp-sum i{position:absolute;left:10mm;bottom:2mm;height:1.1mm;border-radius:1mm;background:linear-gradient(90deg,#2E9E80,#9be2d4)}
.qp-n{font-size:8pt;color:#2E9E80;font-weight:500} .qp-nm{font-size:11pt;font-weight:400} .qp-v{font-weight:500}
.qp-note{font-size:8.5pt;color:#6e7a74;margin:4mm 0 0}
.qp-dk{margin-bottom:7mm}
.qp-room{margin-bottom:11mm} .qp-short,.qp-end{break-inside:avoid}
.qp-rh{display:grid;grid-template-columns:20mm 1fr;align-items:end;margin-bottom:3.5mm;break-after:avoid;break-inside:avoid}
.qp-num{font-size:30pt;font-weight:600;color:#cfe9e1;line-height:.9;letter-spacing:-1px}
.qp-rh h2{font-size:16pt;font-weight:600;color:#16302C;margin:1mm 0 0;letter-spacing:-.3px;line-height:1.2} .qp-rh p{margin:1mm 0 0;color:#6e7a74}
.qp-hd,.qp-it{display:grid;grid-template-columns:1fr 14mm 26mm 28mm;gap:3mm}
.qp-hd{font-size:6.8pt;letter-spacing:.16em;text-transform:uppercase;color:#93a09a;border-bottom:1px solid #16302C;padding:0 0 1.5mm;break-after:avoid}
.qp-hd span:nth-child(n+2),.qp-it>div:nth-child(n+2){text-align:right}
.qp-it{padding:2.7mm 0;border-bottom:1px solid #edf2ef;break-inside:avoid}
.qp-d b{color:#1d2622} .qp-d small{display:block;font-size:8pt;color:#7a8580;margin-top:.5mm}
.qp-q,.qp-u{color:#6e7a74} .qp-a{font-weight:500}
.qp-tag{font-style:normal;font-size:6.5pt;letter-spacing:.1em;text-transform:uppercase;color:#9a5b12;background:#fbf0e2;padding:.3mm 1.5mm;border-radius:2mm}
.qp-cm{padding:2.5mm 0;font-style:italic;color:#5b6861;border-bottom:1px solid #edf2ef}
.qp-sub{display:flex;justify-content:flex-end;gap:8mm;padding:3.2mm 0 0;font-size:10pt;break-before:avoid} .qp-sub span{color:#6e7a74} .qp-sub b{font-weight:600;color:#16302C;min-width:28mm;text-align:right}
.qp-tot{border-radius:3mm;padding:7mm 9mm;margin:2mm 0 12mm;break-inside:avoid}
.qp-tot div{display:flex;justify-content:space-between;padding:1.2mm 0}
.qp-tot .qp-g{margin-top:2mm;padding-top:4mm;font-size:15pt} .qp-tot .qp-g span{font-weight:400} .qp-tot .qp-g b{font-weight:600}
.qp-extras .qp-num{color:#f3dcc0}
.qp-next{break-inside:avoid;margin:0 0 10mm} .qp-next h2{font-size:18pt;font-weight:600;color:#16302C;margin:1.5mm 0 6mm}
.qp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm} .qp-steps div{border-top:2px solid #2E9E80;padding-top:3.5mm;font-size:9pt;color:#4b5852}
.qp-steps span{display:block;font-size:20pt;font-weight:600;color:#cfe9e1;line-height:1} .qp-steps b{display:block;color:#16302C;margin:1.5mm 0 1mm;font-size:10pt}
.qp-terms{break-inside:avoid;background:#F4F9F7;border-radius:3mm;padding:6mm 7mm;font-size:8.3pt;color:#4b5852} .qp-terms ul{columns:2;column-gap:8mm;margin:3mm 0;padding-left:4mm} .qp-terms li{margin:0 0 1.5mm;break-inside:avoid} .qp-terms p{margin:0;color:#6e7a74}
.qp-co{display:flex;gap:4mm;align-items:center;margin-top:8mm;font-size:8pt;color:#7a8580;break-inside:avoid} .qp-co img{width:9mm} .qp-co b{display:block;color:#1d2622}

/* a: Studio. Option A's layout in option C's light colours, which print well (Chris, 30 October): a white cover with
   the brand arcs as a pale watermark, bold type, the rooms as a list with bars, the totals on a pale mint panel */
.qp-a .qp-cover{background:linear-gradient(160deg,#fff 42%,#EEF8F4)}
.qp-a .qp-mark{right:-62mm;top:62mm;width:195mm;opacity:.14}
.qp-a .qp-logo{display:none} .qp-a .qp-logo-l{display:block}
.qp-a .qp-cv h1{color:#16302C} .qp-a .qp-for{color:#5b6861} .qp-a .qp-for b{color:#16302C}
.qp-a .qp-facts{border-top:1px solid #16302C} .qp-a .qp-facts span{color:#2E9E80}
.qp-a .qp-tot{background:linear-gradient(120deg,#EEF8F4,#dff3ec);color:#5b6861} .qp-a .qp-tot b{color:#16302C}
.qp-a .qp-tot .qp-g{border-top:1px solid #b9dccf;color:#16302C} .qp-a .qp-tot .qp-g b{color:#15604E}


.pl-sum{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px} .pl-sum button{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:left;cursor:pointer;color:var(--ink);min-width:150px} .pl-sum button.on{border-color:var(--teal);background:var(--teal-soft)} .pl-sum b{display:block;font-size:18px;line-height:1.1} .pl-sum small{color:var(--ink2);font-size:12px}
.plist{width:100%;border-collapse:collapse} .plist th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);text-align:left} .plist td{padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle;font-size:13.5px} .plist tr.row:hover td{background:var(--surface2)} .plist tr.grp td{background:var(--surface2);font-weight:700;padding:7px 8px;border-top:1px solid var(--line)} .plist tr.grp small{font-weight:400;color:var(--ink2);margin-left:8px} .plist .nm{font-weight:600} .plist .sub{display:block;color:var(--ink2);font-size:12px;margin-top:2px} .plist .tag{font-size:12px} .plist td.money{text-align:right;white-space:nowrap;font-weight:700;color:var(--teal-ink)} .plist td.when{white-space:nowrap} @media(max-width:900px){.plist .hide-sm{display:none}}
.col{background:var(--surface2);border-radius:var(--radius);padding:10px;min-height:120px}
.col h4{display:flex;justify-content:space-between;margin:0 4px 8px;color:var(--ink)}
.col h4 span{color:var(--ink3);font-weight:600}
.lead{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.lead:hover{border-color:var(--teal)}
.lead b{display:block;font-size:13.5px}
.lead small{color:var(--ink2);display:block;font-size:12px}
.lead .val{color:var(--teal-ink);font-weight:700;font-size:12.5px;margin-top:4px}
dl{display:grid;grid-template-columns:150px 1fr;gap:5px 12px;margin:0;font-size:13.5px}
dt{color:var(--ink3)}dd{margin:0}
.folder{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.folder:last-child{border-bottom:0}
.folder .num{width:40px;height:40px;border-radius:9px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:600;flex:none}
.folder b{display:block;font-size:14px}.folder small{color:var(--ink2)}
.folder .cnt{margin-left:auto;color:var(--ink3);font-size:12.5px;white-space:nowrap}
.chk{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.chk:last-child{border-bottom:0}
.chk input{margin-top:3px;accent-color:var(--teal)}
.chk .why{color:var(--ink3);font-size:12px;display:block}
.chk.need label{color:var(--ink)}
.rule{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.rule:last-child{border-bottom:0}
.rule b{font-size:14px}
.rule .to{color:var(--ink2)}
.rule .to span{margin-right:6px}
.log{font-size:13px}
.log div{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.log div:last-child{border-bottom:0}
.log time{color:var(--ink3);white-space:nowrap;min-width:110px}
.bar{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal)}
.prog{display:grid;grid-template-columns:1fr 130px 130px 90px;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.prog:last-child{border-bottom:0}
.prog .t{width:90px;height:7px;background:var(--surface2);border-radius:99px;position:relative}
.prog .t i{position:absolute;height:100%;background:var(--teal);border-radius:99px}
.prog .t i.later{background:var(--line2)}
.portal-wrap{max-width:900px;margin:0 auto}
.portal-hero{padding:8px 0 20px;border-bottom:1px solid var(--line);margin-bottom:22px}
.portal-hero h1{font-size:30px;color:var(--ink);font-weight:700}
.portal-hero p{color:var(--ink2);max-width:66ch}
.gd{max-width:860px;margin:0 auto} .gd .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:6px 0} .gd .box{background:var(--surface2);border-radius:10px;padding:9px 12px;font-size:13.5px} .gd .box.w{background:var(--amber-soft,rgba(200,140,0,.1))} .gd .box b.k{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:3px} .gd .box p{margin:0} .gd ol.how{margin:4px 0 4px 20px;padding:0} .gd ol.how li{margin:0 0 4px} .gd ul.ifs{margin:4px 0 0;padding:0;list-style:none} .gd ul.ifs li{margin:0 0 5px;padding-left:18px;position:relative} .gd ul.ifs li:before{content:"→";position:absolute;left:0;color:var(--teal);font-weight:700} .gd .path{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface2);padding:1px 5px;border-radius:4px} .gd span.btn{display:inline-block;border:1px solid var(--line2);border-radius:999px;padding:0 7px;font-size:12px;font-weight:600;background:var(--surface);color:var(--ink);cursor:default} .gd article{padding:14px 0;border-bottom:1px solid var(--line2)} .gd article h3{margin:0 0 6px} .gd .tip{border-left:3px solid var(--teal);padding:6px 12px;margin:10px 0;background:var(--surface2);border-radius:0 8px 8px 0} .gd .role{display:flex;gap:10px;margin:10px 0} .gd .role .box{flex:1} .gd table{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0} .gd th{text-align:left;background:var(--surface2);padding:5px 8px} .gd td{padding:5px 8px;border-bottom:1px solid var(--line2);vertical-align:top} .gd .gate{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 0;margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} .gd .steps{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 14px} .gd .steps span{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface2);color:var(--muted)} .gd .steps span.done{background:var(--teal-soft,rgba(20,150,130,.15));color:var(--teal)} .gd .steps span.now{background:var(--teal);color:#fff} @media(max-width:760px){.gd .grid{grid-template-columns:1fr} .gd .role{flex-direction:column}}
/* Tutorial: the page dims, the part being explained is lit up, and the card sits beside it */
#tour{position:fixed;inset:0;z-index:200;pointer-events:none}
#tour[hidden]{display:none}
#tour .tour-block{position:fixed;inset:0;pointer-events:auto}
#tour.dim .tour-block{background:rgba(8,18,15,.5)}
#tour .tour-hole{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(8,18,15,.5);outline:2px solid var(--teal);pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s}
#tour.dim .tour-hole{display:none}
@media (prefers-reduced-motion:reduce){#tour .tour-hole{transition:none}}
#tour .tour-card{position:fixed;left:30%;top:20%;width:min(400px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:14px 18px;pointer-events:auto;font-weight:400}
.tour-card .tour-k{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--ink3)}
.tour-card h3{font-size:17px;line-height:1.3;margin:2px 0 8px;color:var(--ink)}
.tour-card .tour-b{font-size:14px;line-height:1.55}
.tour-card .tour-b p{margin:0 0 8px}
.tour-card .tour-b ul,.tour-card .tour-b ol{margin:0 0 8px;padding-left:20px}
.tour-card .tour-b li{margin:0 0 4px}
.tour-card .tour-b b{font-weight:600}
.tour-card .tk{display:inline-block;border:1px solid var(--line2);border-radius:999px;padding:0 7px;font-size:12px;font-weight:600;background:var(--surface2);white-space:nowrap;line-height:1.6}
.tour-card .tour-note{font-size:13px;color:var(--ink2);background:var(--surface2);border-left:3px solid var(--amber);border-radius:6px;padding:7px 10px;margin:2px 0 10px}
.tour-card .tour-tip{font-size:13px;color:var(--ink2);border-left:3px solid var(--teal);padding:2px 0 2px 10px;margin:6px 0 8px}
.tour-card .tour-bar{height:3px;background:var(--line);border-radius:2px;margin:10px 0}
.tour-card .tour-bar i{display:block;height:3px;background:var(--teal);border-radius:2px}
.tour-card .tour-f{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tour-card .tour-go{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.tour-card .tour-x{border:0;background:transparent;color:var(--ink3);font:inherit;font-size:20px;line-height:1;cursor:pointer;padding:0 5px;border-radius:6px}
.tour-card .tour-x:hover{color:var(--ink);background:var(--surface2)}
.tour-card .tour-list{margin:4px 0 0;padding-left:22px;font-size:13.5px;line-height:1.55}
.tour-card .tour-list.pages{list-style:none;padding-left:0;columns:2;column-gap:14px}
.tour-card .tour-list a{color:var(--ink);text-decoration:none}
.tour-card .tour-list a:hover{text-decoration:underline}
.tour-card .tour-list li.now a{font-weight:600;color:var(--teal-ink)}
.tour-done{color:var(--teal);font-weight:700}
.userbar .tour-q{font-weight:700;font-size:13px;min-width:30px;justify-content:center;color:var(--teal-ink)}
body.phone .userbar .tour-q{display:none}
.tut-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2)}
.tut-row:last-child{border-bottom:0}
.ph-zone{border:2px dashed var(--line);border-radius:10px;padding:16px;text-align:center;cursor:pointer;margin:8px 0 12px;background:var(--surface2)} .ph-zone.over{border-color:var(--teal);background:rgba(91,192,181,.14)} .ph-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:13px;cursor:default} .ph-opts label{display:flex;align-items:center;gap:6px;margin:0;font-weight:400} .ph-opts input:not([type=checkbox]){width:220px;margin:0}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .ph-it{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--surface2);cursor:pointer} .ph-it img{width:100%;height:100%;object-fit:cover;display:block} .ph-it.int{outline:2px solid #d9822b} .ph-it .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ph-it.miss::after{content:"No preview";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink3)}
#lb{position:fixed;inset:0;background:rgba(10,14,13,.93);z-index:70;display:flex;flex-direction:column;color:#fff} .lb-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap} .lb-top .muted{color:#b9c6c3} .lb-acts{display:flex;gap:6px;flex-wrap:wrap} .lb-img{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;gap:6px;padding:0 8px} .lb-img img{max-width:calc(100% - 100px);max-height:100%;object-fit:contain;border-radius:6px} .lb-nav{background:none;border:0;color:#fff;font-size:40px;cursor:pointer;width:44px;line-height:1} .lb-nav:disabled{opacity:.2;cursor:default} .lb-n{text-align:center;padding:8px;color:#b9c6c3}
.userbar{position:fixed;top:7px;right:92px;z-index:16;display:flex;align-items:center;gap:6px}
.notif{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);color:var(--ink3);border-radius:999px;padding:5px 9px;cursor:pointer;line-height:1}
.avatar{width:28px;height:28px;border-radius:999px;background:var(--teal2);color:#fff;border:0;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.3px}
.notif.on{color:var(--teal-ink);border-color:var(--teal2)}
.notif .nb{background:var(--red);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center}
/* the chat button reads Chat with the Team; the label goes when the window is too narrow for it, the tooltip stays */
.userbar .chatb .chatl{font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink2)}
.userbar .chatb.on .chatl{color:var(--teal-ink)}
@media (max-width:1100px){.userbar .chatb .chatl{display:none}}
.ph-top .chatb{gap:6px;padding:4px 10px}
.ph-top .chatb .chatl{display:block;width:52px;font-size:12px;line-height:1.15;font-weight:700;text-align:left;white-space:normal;color:var(--teal-ink)}
.ph-top .chatb.compact .chatl{display:none}
.ph-top .chatb .nb,.ph-top .featb .nb{position:absolute;top:-5px;right:-5px}
/* the New features star and its window */
.featb svg{width:17px;height:17px}
.featb.on{color:#c98a12;border-color:#e3b55a}
.feat{padding:10px 0;border-bottom:1px solid var(--line)}
.feat:last-of-type{border-bottom:0}
.feat small{font-size:12px;color:var(--ink3)}
.feat h3{margin:2px 0 0;font-size:15px}
.feat p{margin:4px 0 0;font-size:13.5px;line-height:1.45}
.feat .feat-where{font-size:12.5px;color:var(--ink3)}
/* chat: who is typing, files on the way, and files in the room */
.chat-typing{min-height:18px;padding:0 14px 3px;font-size:12px;color:var(--ink3);font-style:italic;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-files{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.chat-fchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;max-width:100%;color:var(--ink)}
.chat-fchip b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.chat-fchip.bad{border-color:var(--red);color:var(--red)}
.chat-fchip a{color:inherit;text-decoration:none;font-weight:700}
.chat-fnote{font-size:12px;color:var(--red);margin:0 0 6px;display:flex;justify-content:space-between;gap:8px}
.chat-fnote a{color:inherit;text-decoration:none;font-weight:700;flex:none}
.chat-up{font-size:12px;color:var(--ink2);margin:0 0 6px}
.chat-up .bar{height:4px;background:var(--surface2);border-radius:2px;overflow:hidden;margin-top:4px}
.chat-up .bar i{display:block;height:100%;background:var(--teal);transition:width .2s}
.chat-pickf{display:flex;gap:6px;margin:0 0 6px;flex-wrap:wrap}
.chat-dmnote{font-size:12px;color:var(--ink3);margin:5px 2px 0}
.chat-file{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 8px;font-size:14px;line-height:1}
.cm-img{display:block;margin:5px 0 2px}
.cm-img img{display:block;max-width:240px;max-height:200px;min-width:60px;min-height:40px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);font-size:12px;color:var(--ink3)}
.cm-file{display:flex;align-items:center;gap:8px;margin:5px 0 2px;padding:6px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;max-width:100%}
.cm-file b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cm-file small{color:var(--ink3);flex:none}
.cm-file a{flex:none;font-weight:600;text-decoration:none;color:var(--teal-ink)}
/* chat: a panel under the bar on a computer, the whole screen on a phone */
.chat{position:fixed;top:44px;right:12px;bottom:12px;width:min(660px,calc(100vw - 24px));z-index:18;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 48px rgba(10,20,17,.22);display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
.chat-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
.chat-head b{font-size:15px;font-weight:600}
.chat-x{margin-left:auto;border:0;background:transparent;color:var(--ink3);font-size:15px;padding:4px 9px;border-radius:8px}
.chat-x:hover{background:var(--surface2)}
.chat-cols{flex:1;display:flex;min-height:0}
.chat-list{width:220px;flex:none;border-right:1px solid var(--line);overflow:auto;padding:8px 6px 12px;display:flex;flex-direction:column;gap:1px}
.chat-find{margin:0 2px 6px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
.chat-sec{display:flex;justify-content:space-between;align-items:center;margin:10px 6px 3px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:600}
.chat-sec button{border:0;background:transparent;color:var(--teal);font:inherit;font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;padding:2px 4px;border-radius:6px}
.chat-sec button:hover{background:var(--teal-soft)}
.chat-sec .chat-arch{color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;padding:2px 0}
.chat-none{font-size:12px;color:var(--ink3);margin:2px 8px 4px;line-height:1.4}
.chat-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:6px 7px;border-radius:10px;font:inherit}
.chat-row:hover{background:var(--surface2)}
.chat-row.on{background:var(--teal-soft)}
.chat-row.unread .chat-rt b{font-weight:700}
.chat-av{width:30px;height:30px;flex:none;border-radius:999px;background:var(--grey-soft);color:var(--ink2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.chat-av.g{border-radius:9px;background:var(--mint);color:var(--teal-ink);font-size:15px}
.chat-row.on .chat-av{background:var(--teal2);color:#fff}
.chat-av{position:relative}
.chat-dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface);background:#2fb36b}
.chat-dot.away{background:#e3a32b}
.chat-online{font-weight:400;text-transform:none;letter-spacing:0;color:#2a9d63}
.chat-rt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.chat-rt b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-rt small{color:var(--ink3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row .nb{background:var(--red);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 6px;flex:none}
.chat-when{color:var(--ink3);font-size:12px;flex:none}
.chat-thread{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-th{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line2)}
.chat-tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.chat-tt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-tt small{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-back{display:none;border:0;background:transparent;font-size:24px;line-height:1;color:var(--ink2);padding:0 8px 2px 0}
.chat-info{border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:8px;font:inherit;font-size:12px;padding:3px 9px;flex:none}
.chat-info.on{background:var(--teal-soft);color:var(--teal-ink);border-color:transparent}
.chat-about{display:block;margin:6px 14px 0;padding:5px 9px;border-radius:8px;background:var(--mint);color:var(--teal-ink);text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-infop{margin:8px 14px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);max-height:45%;overflow:auto}
.chat-mem{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.chat-mem span:nth-child(2){flex:1}
.chat-mem button{border:0;background:transparent;color:var(--red);font:inherit;font-size:12px}
.chat-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chat-pick{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--surface)}
.chat-pick label{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 2px;cursor:pointer}
.chat-msgs{flex:1;overflow:auto;padding:10px 14px 12px;display:flex;flex-direction:column;gap:3px}
.chat-day{align-self:center;font-size:12px;color:var(--ink3);background:var(--surface2);border-radius:999px;padding:2px 10px;margin:10px 0 6px}
.cm{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}
.cm.me{align-self:flex-end;align-items:flex-end;cursor:pointer}
.cm-who{font-size:12px;color:var(--ink3);margin:7px 0 1px 6px}
.cm-b{background:var(--surface2);border:1px solid var(--line2);border-radius:14px 14px 14px 4px;padding:6px 10px 4px;overflow-wrap:anywhere;font-size:13.5px;line-height:1.45;color:var(--ink)}
.cm.me .cm-b{background:var(--teal-soft);border-color:transparent;border-radius:14px 14px 4px 14px}
.cm.sel .cm-b{outline:2px solid var(--teal)}
.cm-b a{color:var(--teal-ink)}
.cm-t{display:block;text-align:right;font-size:12px;color:var(--ink3);margin-top:1px}
.cm-read{font-size:12px;color:var(--ink3);margin:2px 4px 0}
.cm.pending{opacity:.6}
.cm-link{display:block;margin:5px 0 2px;padding:5px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--teal-ink);text-decoration:none;font-size:12.5px;font-weight:500}
.cm-del{margin-top:3px;border:1px solid var(--line);background:var(--surface);color:var(--red);border-radius:8px;font:inherit;font-size:12px;padding:2px 9px}
.chat-empty{color:var(--ink3);text-align:center;margin:auto;font-size:13px}
.chat-undo{margin:0 14px 6px;font-size:12.5px;background:var(--surface2);border-radius:8px;padding:6px 10px}
.chat-archived{border-top:1px solid var(--line2);padding:10px 14px;font-size:12.5px;color:var(--ink2);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chat-compose{border-top:1px solid var(--line2);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.chat-chip{display:inline-flex;gap:8px;align-items:center;font-size:12px;background:var(--teal-soft);color:var(--teal-ink);border-radius:999px;padding:3px 10px;margin:0 0 6px;max-width:100%}
.chat-chip a{color:inherit;text-decoration:none;font-weight:700}
.chat-row2{display:flex;gap:6px;align-items:flex-end}
.chat-row2 textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:8px 10px;max-height:140px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;line-height:1.4}
.chat-clip{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 8px;font-size:14px;line-height:1}
.chat-form{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.chat-form label{font-size:12.5px;font-weight:500}
.chat-form input[type=text],.chat-form #chat-gtitle{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.chat-check{display:flex;gap:8px;align-items:center;font-weight:400!important;margin-top:6px}
.chatpop{position:fixed;top:44px;right:12px;z-index:19;width:320px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;box-shadow:0 12px 32px rgba(10,20,17,.2);padding:9px 34px 9px 12px;cursor:pointer;font-size:13px;opacity:0;transform:translateY(-6px);transition:.2s;pointer-events:none}
.chatpop.on{opacity:1;transform:none;pointer-events:auto}
.chatpop b{display:block;font-size:12.5px;font-weight:600}
.chatpop span{display:block;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatpop-x{position:absolute;top:6px;right:6px;border:0;background:transparent;color:var(--ink3);font-size:13px;padding:2px 6px;border-radius:6px}
@media (max-width:760px){
 .chat{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0;border:0;z-index:19}
 .chat-list{width:100%;border-right:0}
 .chat.listing .chat-thread{display:none}
 .chat.threading .chat-list{display:none}
 .chat-back{display:block}
 .cm{max-width:88%}
 .chatpop{left:12px;right:12px;width:auto;top:10px}
}

.qa{position:fixed;right:18px;bottom:18px;z-index:15;display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:0 8px 24px rgba(10,20,17,.18)} .qa button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap} .qa button:hover{background:var(--surface2)} .qa button.pri{background:var(--teal);color:#fff} .qa .ctx{font-size:12px;color:var(--muted);align-self:center;padding:0 6px 0 10px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:760px){.qa{left:10px;right:10px;bottom:10px;justify-content:space-around;border-radius:14px} .qa .ctx{display:none} .qa button{padding:10px 8px;font-size:12.5px;flex:1;justify-content:center}}
.modal-bg{position:fixed;inset:0;background:rgba(10,20,17,.45);display:none;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal-bg.on{display:flex}
.mconfirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,20,17,.35);z-index:21}.mconfirm .box{background:var(--box-bg);border-radius:12px;padding:20px 22px;max-width:380px;box-shadow:0 12px 40px rgba(0,0,0,.25)}.mconfirm h3{margin:0 0 6px}.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.modal{background:var(--surface);border-radius:12px;padding:22px 24px;width:min(760px,100%);max-height:90vh;overflow:auto}
.modal h2{margin-bottom:12px}
.f{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.f label{font-size:12.5px;color:var(--ink2);font-weight:700;display:block}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line2);border-radius:7px;padding:8px 10px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.f .full{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;font-size:13.5px;opacity:0;transform:translateY(8px);transition:.25s;pointer-events:none;z-index:30}
.toast.on{opacity:1;transform:none}
/* the toast never blocks what is under it, but an Undo inside it has to take a click */
.toast.on a{pointer-events:auto}
/* Mail: folders, a list as wide as you leave it, and the message, filling the window */
.mailx{display:flex;gap:12px;align-items:stretch;min-height:420px}
.mailx>.card{margin:0}
.mailx-f{flex:0 0 auto;width:max-content;min-width:190px;max-width:min(320px,20vw);overflow:auto;padding:8px}
.mfold{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--teal-ink);font:inherit;font-size:13px;font-weight:400;padding:5px 8px;border-radius:8px;margin:1px 0;cursor:pointer}
.mfold span:first-child{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.mfold .badge{flex:none}
.mfold.drop{background:var(--teal-soft);outline:2px dashed var(--teal);outline-offset:-2px}
body.mdrag .mfold:not(.on){background:var(--surface2)}
.mrow[draggable=true]{-webkit-user-drag:element}
.mfold:hover{background:var(--surface2)}
.mfold.on{background:var(--teal-soft);font-weight:600}
.mailx-l{flex:none;display:flex;flex-direction:column;min-width:300px;max-width:70%;padding:8px}
.mailx-l #mailq{width:100%;margin-bottom:6px}
.mail-fsel{display:none;width:100%;margin-bottom:6px}
.mailx-l .ml{flex:1;min-height:0;overflow:auto}
/* Each email in the list reads in three steps: who it is from (bold), the subject, then one grey line of
   the text. The app's body text is Poppins Light, which is too thin at list sizes, so the list uses Regular
   and Bold. Unread: a teal bar on the left, and the subject and time in bold teal, the way Outlook does it.
   The dividers are drawn inset so a highlighted row has clean rounded corners. */
.mrow{position:relative;padding:10px 12px 11px 16px;cursor:pointer;border-radius:8px;font-weight:400}
.mrow::after{content:"";position:absolute;left:16px;right:12px;bottom:0;height:1px;background:var(--line)}
.mrow:last-child::after,.mrow:hover::after,.mrow.on::after{opacity:0}
.mrow:has(+.mrow:hover)::after,.mrow:has(+.mrow.on)::after{opacity:0}
.mrow:hover{background:var(--surface2)}
.mrow.on{background:var(--teal-soft)}
.mrow.unread::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--teal)}
.mrow .mtop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mrow .mf{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mrow .mw{font-size:12px;color:var(--ink3);white-space:nowrap;flex:none}
.mrow.unread .mw{color:var(--teal-ink);font-weight:600}
.mrow .ms{font-size:13.5px;line-height:1.4;color:var(--ink);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mrow.unread .ms{font-weight:600;color:var(--teal-ink)}
.mrow .mp{font-size:12.5px;line-height:1.45;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailx-split{flex:0 0 12px;margin:0 -12px;align-self:stretch;cursor:col-resize;position:relative;z-index:1;touch-action:none}
.mailx-split::after{content:"";position:absolute;left:5px;top:35%;bottom:35%;width:3px;border-radius:3px;background:var(--line)}
.mailx-split:hover::after,.mailx-split.on::after{background:var(--teal)}
.mailx-r{flex:1;min-width:0;overflow:auto;container-type:inline-size;margin-bottom:var(--qa-room,0px)}
.mread{display:flex;gap:12px;align-items:stretch;min-height:100%}
.mread-m{flex:1;min-width:0;margin:0;display:flex;flex-direction:column}
.mread-body{flex:1;width:100%;min-height:360px;border:1px solid var(--line);border-radius:8px;background:#fff}
.mread-text{white-space:pre-wrap;font:14px/1.5 inherit;margin:0}
.mread-ctx{flex:0 0 290px;overflow:auto}
/* The open email: the subject, then who it is from in bold beside their initials, then who it went to */
.card>h3.mread-subj{font-size:15px;line-height:1.3;margin-bottom:8px;overflow-wrap:anywhere}
.mread-from{display:flex;gap:11px;align-items:center;margin:0 0 8px;font-weight:400}
.mav{flex:none;width:34px;height:34px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:.3px}
.mread-who{flex:1;min-width:0}
.mread-l1{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;line-height:1.3}
.mread-name{font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.mread-addr{font-size:12.5px;color:var(--ink3);overflow-wrap:anywhere}
.mread-when{margin-left:auto;padding-left:8px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.mread-to{font-size:12.5px;line-height:1.4;color:var(--ink2);margin-top:1px;overflow-wrap:anywhere}
.mread-to .lbl{color:var(--ink3);font-weight:500;margin-right:3px}
.mread-to .cc{margin-left:12px}
.mail-back{display:none;align-self:flex-start;margin:0 0 8px}
.mrc{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 6px;min-height:38px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);cursor:text}
.mrc:focus-within{border-color:var(--teal);outline:2px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:1px}
.mrc-c{display:inline-flex;align-items:center;max-width:100%;background:var(--surface2);border:1px solid var(--line2);border-radius:999px;padding:1px 1px 1px 10px;font-size:13px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.mrc-c button{border:0;background:transparent;color:var(--ink3);font:inherit;font-size:15px;line-height:1;padding:3px 8px;border-radius:999px;cursor:pointer;flex:none}
.mrc-c button:hover{background:var(--line2);color:var(--ink)}
.mrc-c.stop{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.mrc input.mrc-in{flex:1 1 160px;min-width:120px;width:auto!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:5px 4px!important;font-size:13.5px}
.mrc-w{position:relative}
.mrc-sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:15;max-height:min(50vh,360px);overflow:auto;display:none}
.mrc-sug.on{display:block}
.mrc-sug div.r{min-height:44px;padding:6px 12px;cursor:pointer;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.mrc-sug div.r+div.r{border-top:1px solid var(--line2)}
.mrc-sug div.r:hover,.mrc-sug div.r.on{background:var(--surface2)}
.mrc-sug div.r .who{flex:1 1 60%;min-width:0}
.mrc-sug div.r .who b,.mrc-sug div.r .who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrc-sug div.r small{color:var(--ink3)}
.mrc-sug div.r .src{flex:0 1 40%;min-width:0;text-align:right;font-size:12px;line-height:1.3}
.mrc-sug div.r.stop b{color:var(--red)}
.mcomp .mread-m{gap:0}
.mcomp #mcbody{min-height:160px;resize:vertical}
/* Send and Cancel stay in view at the bottom of the message side however long the reply gets */
.mcomp .mread-m>.actions{position:sticky;bottom:0;z-index:1;background:var(--surface);margin:12px -18px -16px;padding:10px 18px 14px;border-top:1px solid var(--line2);border-radius:0 0 var(--radius) var(--radius)}
@container (max-width:760px){.mread{flex-direction:column}.mread-ctx{flex:none}}
@media (max-width:1100px){.mailx-f{display:none}.mail-fsel{display:block}}
@media (max-width:760px){
 .mailx{display:block;height:auto!important;min-height:0}
 .mailx-l{width:auto!important;max-width:none}
 .mailx-split{display:none}
 .mailx.reading .mailx-l{display:none}
 .mailx:not(.reading) .mailx-r{display:none}
 .mail-back{display:inline-flex}
 .mread{display:block}
 .mread-ctx{margin-top:12px}
 .mread-body{min-height:65vh}
}

.note{background:var(--amber-soft);color:var(--amber);border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.ecal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;color:var(--ink2);padding:0 0 4px}.ecal-head div{padding:0 6px}
.ecal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.ecal-day{min-height:92px;border:1px solid var(--line);border-radius:8px;padding:4px 6px;background:var(--surface);cursor:default;font-size:12px}.ecal-day:not(.pad){cursor:pointer}.ecal-day:not(.pad):hover{border-color:var(--teal)}.ecal-day.pad{border:0;background:transparent}.ecal-day.today{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}.ecal-day .dn{font-weight:600;color:var(--ink2);margin-bottom:2px}
.ev{border-radius:5px;padding:1px 5px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.ev.call{background:var(--warn-bg);color:var(--red)}.ev.svc{background:var(--teal-soft,#e6f2ef);color:var(--teal-ink)}.ev.inst{background:var(--inst-bg);color:var(--inst-ink)}.ev.book{background:var(--amber-soft);color:var(--amber);border:1px dashed var(--amber)}.ev.out{background:var(--line2);color:var(--ink);border-left:3px solid var(--out-line)}.ev.eng.off{opacity:.55;font-style:italic}.ev.eng{border-left:4px solid var(--ec);background:color-mix(in srgb,var(--ec) 32%,transparent);color:var(--ink)}
.ev.call,.ev.svc,.ev.inst,.ev.book{background:color-mix(in srgb,var(--ec,#8a8795) 22%,var(--surface))!important;color:var(--ink)!important}
.ecal .ev.call,.ecal-key .ev.call{border:1px solid var(--red)}.ecal .ev.svc,.ecal-key .ev.svc{border:1px solid var(--teal-ink)}.ecal .ev.inst,.ecal-key .ev.inst{border:1px solid var(--inst-ink)}.ecal-key .ev{background:var(--surface)!important}
.ecal-more{display:block;border:0;background:none;padding:0;margin:2px 0 0;font:inherit;font-size:12px;color:var(--teal-ink);cursor:pointer;text-decoration:underline}
.ev .ty{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.75;margin-left:3px}
.modal.wide{width:min(960px,100%);max-width:960px}
.dayrow{display:grid;grid-template-columns:92px 150px 1fr 110px 180px;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--surface2);font-size:13px}
.dayrow .who{display:inline-flex;align-items:center;gap:6px}.dayrow .who i{width:10px;height:10px;border-radius:3px;background:var(--ec);display:inline-block}
@media (max-width:760px){.dayrow{grid-template-columns:70px 1fr;gap:4px}.dayrow .ty2,.dayrow .act{grid-column:2}}.eleg{display:inline-flex;align-items:center;gap:5px;margin-right:10px;font-size:12px}.eleg i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--ec)}
@media (max-width:760px){.ecal-day{min-height:60px}.ev{display:none}.ecal-day.has .dn::after{content:" •";color:var(--teal)}.ecal:not(.week) .ecal-more{display:none}}
.warn{background:var(--warn-bg);color:var(--red);border-radius:8px;padding:10px 14px;font-size:13.5px}
.mob{display:none}
.stat.link{cursor:pointer}.stat.link:hover{border-color:var(--teal)}
.mat{display:grid;grid-template-columns:22px 1fr 58px 96px 110px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.mat:last-child{border-bottom:0}
.mat input[type=number],.mat select{border:1px solid var(--line2);border-radius:6px;padding:4px 6px;background:var(--bg);color:var(--ink);font:inherit;font-size:12.5px;width:100%}
.mat input[type=checkbox]{accent-color:var(--teal)}
.mat small{color:var(--ink3);display:block}
.mat.off{opacity:.55}
/* The rows in "Check what was read": no status column, and on a phone the kind drops under the name (5 Nov 2026) */
.mat.ocp{grid-template-columns:22px 1fr 58px 96px}
@media (max-width:760px){.mat.ocp{grid-template-columns:22px 1fr 58px}.mat.ocp .tag{grid-column:2;grid-row:2;justify-self:start}}
/* The Equipment tab on a phone: the name gets the full width, then quantity, status and room on the line under it (5 Nov 2026) */
@media (max-width:760px){.mat:not(.ocp){grid-template-columns:22px 58px 1fr 1fr;row-gap:6px}.mat:not(.ocp)>:nth-child(1){grid-column:1;grid-row:1}.mat:not(.ocp)>:nth-child(2){grid-column:2/-1;grid-row:1}.mat:not(.ocp)>:nth-child(3){grid-column:2;grid-row:2}.mat:not(.ocp)>:nth-child(4){grid-column:3;grid-row:2}.mat:not(.ocp)>:nth-child(5){grid-column:4;grid-row:2}}
.mgrp{font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--ink2);margin:12px 0 2px}
.drop{border:2px dashed var(--line2);border-radius:10px;padding:18px;text-align:center;color:var(--ink2);font-size:13.5px}
.drop input{display:block;margin:10px auto 0}
.chk.miss label{color:var(--red)}
.sf{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.sf label{font-size:12.5px;color:var(--ink2);font-weight:700;display:block}
.sf label b{color:var(--red)}
.sf input,.sf select,.sf textarea{width:100%;border:1px solid var(--line2);border-radius:7px;padding:7px 9px;background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px}
.sf .full{grid-column:1/-1}
.sf .ok input,.sf .ok textarea{border-color:var(--teal)}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}
.steps span{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--surface2);color:var(--ink3)}
.steps span.done{background:var(--teal-soft);color:var(--teal-ink)}.steps span.now{background:var(--teal);color:#fff}
.files{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.files div{border:1px solid var(--line);border-radius:8px;padding:6px;width:110px;font-size:12px;color:var(--ink2);text-align:center;word-break:break-all}
.files img{width:96px;height:72px;object-fit:cover;border-radius:5px;display:block;margin:0 auto 4px}
.spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.spec div.it{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.spec .sw{height:90px;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--ink3);font-size:12px}
.spec .sw img{width:100%;height:100%;object-fit:cover}
.spec .tx{padding:8px 10px;font-size:12.5px}.spec .tx b{display:block;font-size:13px}.spec .tx small{color:var(--ink2);display:block}
.ins{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ins:last-child{border-bottom:0}.ins.done{color:var(--ink3)}.ins.fail{color:var(--red)}
.ins button{border:1px solid var(--line2);background:none;border-radius:6px;padding:3px 9px;font-size:12px;color:var(--ink2)}
.ins button.on{background:var(--teal);color:#fff;border-color:var(--teal)}.ins button.onf{background:var(--red);color:#fff;border-color:var(--red)}
.map{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;align-items:center}
.map select{border:1px solid var(--line2);border-radius:6px;padding:4px 6px;background:var(--bg);color:var(--ink);font:inherit;font-size:12.5px}
.tags{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:3px}
.tagadd{border:1px dashed var(--line2);background:none;color:var(--ink3);border-radius:999px;font-size:12px;padding:1px 7px;cursor:pointer}
.tagadd:hover{color:var(--teal);border-color:var(--teal)}
.flash{animation:flash 2.4s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 4px var(--amber);background:var(--amber-soft)}100%{box-shadow:none}}
.pf{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.pf label{font-size:12.5px;color:var(--ink2);font-weight:700;display:block}
.pf input,.pf select,.pf textarea{width:100%;border:1px solid var(--line2);border-radius:7px;padding:7px 9px;background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px}
.pf .full{grid-column:1/-1}
.pf div.miss input,.pf div.miss select,.pf div.miss textarea{border-color:var(--red)}
.pf div.miss label:after{content:" · needed";color:var(--red);font-weight:400}
.search{position:relative;margin-bottom:16px}
.search input{width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px 14px 11px 38px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.search:before{content:"⌕";position:absolute;left:13px;top:9px;font-size:18px;color:var(--ink3)}
.sres{position:absolute;left:0;right:0;top:46px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:15;max-height:70vh;overflow:auto;display:none}
.sres.on{display:block}
.sres h4{padding:8px 12px 2px;color:var(--ink3);font-size:12px}
.sres div.r{padding:8px 12px;cursor:pointer;font-size:13.5px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.sres div.r:hover{background:var(--surface2)}
.sres div.r small{color:var(--ink3)}
.sres mark{background:var(--amber-soft);color:inherit;padding:0 1px}
.why{display:flex;gap:6px;flex-wrap:wrap}
.why button{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--ink2)}
.why button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:14px}
.tl div{position:relative;padding:5px 0;font-size:13.5px}
.tl div:before{content:"";position:absolute;left:-19px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.tl div.soon:before{background:var(--amber)}.tl div.late:before{background:var(--red)}
.gate{position:fixed;inset:0;background:rgba(10,20,17,.6);z-index:25;display:flex;align-items:center;justify-content:center;padding:16px}
.gate .modal{max-width:560px}
@media (max-width:767px){.modal-bg{padding:14px}.modal,.modal.wide,.gate .modal{width:100%;max-width:none}}
.cf{display:grid;gap:10px}.cf label{font-size:13px;font-weight:700;color:var(--ink2)}.cf input,.cf select,.cf textarea{width:100%;border:1px solid var(--line2);border-radius:9px;padding:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.folder.link{cursor:pointer}.folder.link:hover .num{background:var(--teal);color:#fff}
.fl{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.fl:last-child{border-bottom:0}.fl .ic{width:44px;height:44px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;font-size:20px}
.fl .ic img{width:100%;height:100%;object-fit:cover}.fl b{display:block}.fl small{color:var(--ink3)}
.fl .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.viewer{width:100%;height:70vh;border:0;border-radius:8px;background:var(--box-bg)}
.login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.login .box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;width:min(420px,100%)}
.login input{width:100%;border:1px solid var(--line2);border-radius:9px;padding:12px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);margin:10px 0}
.sync{position:fixed;top:10px;right:14px;font-size:12px;color:var(--ink3);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;z-index:12}
.email{background:var(--surface2);border-radius:8px;padding:12px 14px;font-size:13px;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;max-height:320px;overflow:auto}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;padding:6px 6px 14px;border-right:0;border-top:1px solid var(--line);z-index:18;background:var(--surface)}
  .brand,.side .foot,.nav .spacer{display:none}.nav{flex-direction:row;gap:2px}.nav button{height:54px;font-size:12px}.main{padding-bottom:110px !important}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}.main{padding:16px}
  dl{grid-template-columns:120px 1fr}.prog{grid-template-columns:1fr 100px}.prog .t,.prog .who{display:none}
}
.ecal.week{grid-template-columns:repeat(7,1fr)}.ecal.week .ecal-day{min-height:220px}.ecal.week .ecal-day .ev{display:block}.ecal.week .ecal-day.today{outline:2px solid var(--teal);outline-offset:-2px}
.tboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.tcol{border-top:4px solid var(--ec);background:var(--surface2);border-radius:8px;padding:8px}.tcol .th{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.tcol .th i{width:10px;height:10px;border-radius:3px;background:var(--ec);display:inline-block}.tcol .ev{font-size:12px}
.tabs.flat{flex-wrap:wrap;gap:4px}.tabs.flat button.grp{margin-left:10px;position:relative}.tabs.flat button.grp::before{content:"";position:absolute;left:-7px;top:20%;height:60%;border-left:1px solid var(--line2)}
.md-card{display:flex;gap:12px;margin-bottom:8px;padding:12px 14px}.md-when{min-width:64px;font-weight:700;font-size:13px;color:var(--teal-ink,#1F4F4A);padding-top:2px}.md-kind{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3,#797687)}.md-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.md-btns .btn{text-decoration:none}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.f{grid-template-columns:1fr}.md-when{min-width:52px}}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* planner */
.pl-wrap{position:relative;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);user-select:none}
.pl-grid{position:relative;min-width:max-content}
.pl-row{display:flex;height:34px;border-bottom:1px solid var(--line);position:relative}
.pl-row.head{height:44px;position:sticky;top:0;background:var(--surface);z-index:5;border-bottom:2px solid var(--line2)}
.pl-row.grp{background:var(--surface2);height:30px}
.pl-lab{width:230px;flex:0 0 230px;padding:0 10px;font-size:12.5px;display:flex;align-items:center;gap:6px;position:sticky;left:0;background:inherit;z-index:3;border-right:1px solid var(--line);overflow:hidden;white-space:nowrap}
.pl-row.grp .pl-lab{font-weight:600;color:var(--ink)}
.pl-row.head .pl-lab{font-weight:600}
.pl-days{position:relative;flex:1;display:flex}
.pl-d{flex:0 0 auto;border-right:1px solid var(--line);height:100%;box-sizing:border-box}
.pl-d.we{background:var(--surface2)}
.pl-row.head .pl-d{border-right:0}
.pl-wk{position:absolute;top:2px;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap;padding-left:4px;border-left:1px solid var(--line2);height:40px}
.pl-wk small{display:block;font-weight:600;color:var(--ink3)}
.pl-dl{position:absolute;bottom:2px;font-size:12px;color:var(--ink3);text-align:center}
.pl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:2;pointer-events:none;opacity:.7}
.gbar{background:var(--teal-soft);color:var(--teal-ink);position:absolute;top:6px;height:22px;border-radius:7px;font-size:12px;line-height:22px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;box-sizing:border-box;border:1px solid transparent;z-index:1}
.gbar:active{cursor:grabbing}
.gbar.done{opacity:.55;text-decoration:line-through}
.gbar.conf{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}
.gbar.proj{top:5px;height:20px;background:var(--surface2);border:1px dashed var(--line2);color:var(--ink2);font-weight:700}
.gbar.ms{width:18px!important;height:18px;top:8px;padding:0;border-radius:3px;transform:rotate(45deg);background:var(--ink)}
.gh{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2}
.gh.l{left:0}.gh.r{right:0}
.tc-Builder{background:var(--grey-soft);color:var(--grey)}.tc-Cabinetry{background:var(--amber-soft);color:var(--amber)}.tc-Electrical{background:var(--blue-soft);color:var(--blue)}.tc-Plumbing{background:var(--tc1-bg);color:var(--tc1-ink)}.tc-Mechanical{background:var(--lilac-soft);color:var(--lilac)}.tc-Flooring{background:var(--tc2-bg);color:var(--tc2-ink)}.tc-Decorating{background:var(--tc3-bg);color:var(--tc3-ink)}.tc-Fire{background:var(--red-soft);color:var(--red)}.tc-Glazing{background:var(--tc4-bg);color:var(--tc4-ink)}.tc-Designer{background:var(--lilac-soft);color:var(--lilac)}.tc-Engineer{background:var(--teal-soft);color:var(--teal-ink)}.tc-Project{background:var(--mint);color:var(--teal-ink)}.tc-Other{background:var(--surface2);color:var(--ink2)}.tc-Sales{background:var(--mint);color:var(--teal-ink)}.tc-Office{background:var(--surface2);color:var(--ink2)}
.pl-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.pl-tools select,.pl-tools input{font:inherit;font-size:13px;border:1px solid var(--line2);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--ink)}
.pl-legend{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.pl-legend span{font-size:12px;padding:2px 8px;border-radius:99px}

/* reports */
.rp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.rp-grid .card{margin:0}
.rp-w1{grid-column:span 1}.rp-w2{grid-column:span 2}.rp-w4{grid-column:span 4}
@media(max-width:1100px){.rp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rp-w4{grid-column:span 2}}
@media(max-width:640px){.rp-grid{grid-template-columns:1fr}.rp-w1,.rp-w2,.rp-w4{grid-column:span 1}}
.rp-stat .n{font-family:var(--head);font-size:30px;font-weight:700;color:var(--ink);line-height:1.05}
.rp-stat .n.good{color:var(--teal-ink)}.rp-stat .n.bad{color:var(--red)}.rp-stat .n.warn{color:var(--amber)}
.rp-stat .l{font-size:12.5px;color:var(--ink2);margin-top:6px}
.rp-stat .sub{font-size:12px;color:var(--ink3);margin-top:4px}
.hb{display:grid;grid-template-columns:minmax(90px,1.1fr) 3fr auto;gap:6px 10px;align-items:center;font-size:12.5px}
.hb .lab{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .bar{height:10px;background:var(--surface2);border-radius:4px;overflow:hidden;position:relative}
.hb .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.hb .val{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb .row:hover .lab{color:var(--ink)}
.lc{width:100%;height:150px;display:block}
.lc .grid{stroke:var(--line);stroke-width:1}
.lc .ax{font-size:12px;fill:var(--ink3)}
.lc .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lc .pt{stroke-width:2;fill:var(--surface)}
.lc .pt:hover{r:6}
.rp-leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-top:6px}
.rp-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.rp-list{font-size:12.5px}.rp-list div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}.rp-list div:last-child{border:0}
.rp-list b{font-weight:500}
.rp-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.rp-empty{color:var(--ink3);font-size:12.5px;padding:8px 0}
a.tel{color:var(--teal-ink,#2E8C76);text-decoration:none;border-bottom:1px dotted currentColor;white-space:nowrap}a.tel:hover{border-bottom-style:solid}

/* ---- re-skin: form controls, so a bare input is themed in both modes ---- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:8px;
  padding:7px 10px;font:inherit;font-size:13px}
select{padding:7px 9px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:1px;border-color:var(--teal)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
.tag{border-radius:999px;font-size:12px;font-weight:550;padding:3px 9px}
.row:hover{background:color-mix(in srgb,var(--teal) 5%,transparent)}
h1{letter-spacing:-.4px}
.stat .n{letter-spacing:-1px}
code{background:var(--surface2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px}

/* ---- the phone version: Today first, big controls, clear of the notch and the home bar ---- */
body.phone .side,body.phone #userbar,body.phone .qa,body.phone .fab,body.phone .quickbar{display:none}
body.phone .app{grid-template-columns:1fr}
body.phone .main{padding:0 0 calc(88px + env(safe-area-inset-bottom))}
body.phone .sync{top:auto;left:50%;right:auto;transform:translateX(-50%);bottom:calc(82px + env(safe-area-inset-bottom));pointer-events:none}
body.phone .sync[data-st="ok"]{display:none}
body.phone .sync[data-st="bad"]{background:var(--amber-soft);color:var(--amber);border-color:var(--amber);font-weight:600}
body.phone .toast{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(86px + env(safe-area-inset-bottom));text-align:center;font-size:15px;padding:13px 16px;border-radius:12px}
.ph-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;min-height:60px;box-sizing:border-box;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left));background:var(--surface);border-bottom:1px solid var(--line)}
.ph-top img{width:min(132px,27vw);height:auto;display:block}
.ph-top .lgd{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph-top .lg{display:none}:root:not([data-theme="light"]) .ph-top .lgd{display:block}}
:root[data-theme="dark"] .ph-top .lg{display:none}:root[data-theme="dark"] .ph-top .lgd{display:block}
.ph-sp{flex:1}
.ph-ttl{flex:1;min-width:0;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-tb{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--teal-ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.ph-tb svg{width:20px;height:20px;flex:0 0 auto}
.ph-top .notif{min-width:44px;min-height:44px;box-sizing:border-box;justify-content:center;border-radius:12px;position:relative}
.ph-body{box-sizing:border-box;max-width:640px;margin:0 auto;padding:14px calc(14px + env(safe-area-inset-right)) 28px calc(14px + env(safe-area-inset-left));font-size:15px;overflow-wrap:anywhere}
.ph-body img{max-width:100%}
.ph-body table{display:block;max-width:100%;overflow-x:auto}
.ph-h{font-size:24px;line-height:1.2;margin:4px 2px 12px;letter-spacing:-.4px}
.ph-h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:600;margin:22px 2px 8px}
.ph-note{font-size:13.5px;color:var(--ink3);margin:10px 2px;line-height:1.5}
body.phone input.ph-in,body.phone input,body.phone select,body.phone textarea{font-size:16px}
.ph-in{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border-radius:12px}
.ph-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin:0 0 12px;box-shadow:0 1px 2px rgba(16,40,32,.04)}
.ph-card>b,.ph-card .ph-big{display:block;font-size:16.5px;font-weight:600;line-height:1.3}
.ph-mut{color:var(--ink3);font-size:13.5px}
.ph-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ph-acts>*{flex:1 1 auto}
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;min-width:44px;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);color:var(--teal-ink);border-radius:12px;padding:9px 16px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;text-align:center;line-height:1.25}
.ph-btn svg{width:19px;height:19px;flex:0 0 auto}
.ph-btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}
:root[data-theme="dark"] .ph-btn.pri{color:#0F2A26}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph-btn.pri{color:#0F2A26}}
.ph-btn.wide{display:flex;width:100%}
.ph-btn[disabled]{opacity:.55}
.ph-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;box-sizing:border-box;margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer;text-decoration:none}
.ph-row svg.ic{width:22px;height:22px;color:var(--teal-ink);flex:0 0 auto}
.ph-row .tx{flex:1;min-width:0}
.ph-row .tx b{display:block;font-weight:600}
.ph-row .tx small{display:block;color:var(--ink3);font-size:13px;line-height:1.35;margin-top:1px}
.ph-row.warn{border-color:var(--amber);background:var(--amber-soft)}
.ph-chev{width:18px;height:18px;color:var(--ink3);flex:0 0 auto}
.ph-day{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:10px;margin:0 0 10px}
.ph-day .ph-tb{width:52px;height:52px;padding:0;border-radius:14px}
.ph-day .ph-tb svg{width:24px;height:24px}
.ph-dayt{text-align:center;min-width:0}
.ph-dayt b{display:block;font-size:23px;line-height:1.15;letter-spacing:-.3px}
.ph-dayt span{display:block;color:var(--ink3);font-size:14px;margin-top:2px}
.ph-dayx{display:flex;gap:10px;margin:0 0 14px}
.ph-dayx>*{flex:1}
.ph-pick{position:relative;overflow:hidden}
.ph-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer}
.ph-sum{font-size:13.5px;color:var(--ink3);margin:0 2px 10px}
.ph-item{margin:0 0 14px}
.ph-ev{display:flex;gap:12px;align-items:flex-start;width:100%;box-sizing:border-box;margin:0;padding:13px 12px 13px 13px;border:1px solid var(--line);border-left:5px solid var(--ec,var(--teal));border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;line-height:1.35}
button.ph-ev{cursor:pointer}
.ph-ev .wh{flex:0 0 62px;font-weight:700;font-size:15.5px;color:var(--teal-ink)}
.ph-ev .wh small{display:block;font-weight:500;font-size:12.5px;color:var(--ink3);margin-top:1px}
.ph-ev .wt{flex:1;min-width:0}
.ph-ev .wt>span{display:block}
.ph-ev .kd{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:600}
.ph-ev .ti{font-size:16.5px;font-weight:600;margin:1px 0 2px}
.ph-ev .sb{font-size:14px;color:var(--ink2)}
.ph-ev .wr,.ph-ev .wo{font-size:13.5px;color:var(--ink3);margin-top:3px}
.ph-ev .ph-chev{align-self:center}
.ph-item .ph-acts{margin-top:8px}
.ph-item .ph-acts>*{flex:0 1 auto;min-width:104px}
.ph-k-call{--ec:var(--red)}.ph-k-svc{--ec:var(--teal)}.ph-k-inst{--ec:var(--lilac)}.ph-k-visit{--ec:var(--blue)}.ph-k-task{--ec:var(--amber)}.ph-k-diary{--ec:var(--grey)}.ph-k-off{--ec:var(--line2)}
.ph-empty{text-align:center;padding:26px 16px}
.ph-empty b{display:block;font-size:17px;margin-bottom:4px}
.ph-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:15px}
.ph-dl dt{color:var(--ink3)}
.ph-dl dd{margin:0;font-weight:500}
.ph-tags{display:flex;gap:6px;flex-wrap:wrap;margin:2px 2px 12px}
.ph-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 8px;-webkit-overflow-scrolling:touch}
.ph-chips .ph-btn{flex:0 0 auto;white-space:nowrap}
.ph-tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;box-sizing:border-box;background:var(--surface);border-top:1px solid var(--line);padding:5px calc(6px + env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))}
.ph-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;min-width:44px;border:0;background:none;color:var(--ink3);font:inherit;font-size:12px;font-weight:600;padding:4px 2px;border-radius:12px;cursor:pointer}
.ph-tabs button svg{width:25px;height:25px}
.ph-tabs button.on{color:var(--teal-ink);background:var(--teal-soft)}
.ph-backbar{display:flex;align-items:center;gap:10px;margin:30px 0 14px;padding:8px 8px 8px 14px;border:1px solid var(--teal);background:var(--teal-soft);color:var(--teal-ink);border-radius:12px;font-size:14px}
.ph-backbar span{flex:1;min-width:0}
.ph-backbar .btn{min-height:44px;flex:0 0 auto}
body.phone .ph-body .btn,body.phone .modal .btn{min-height:44px;min-width:44px}
body.phone .ph-body .btn.sm{padding:9px 14px;font-size:14px}
body.phone a.crumb-a{display:inline-block;min-height:44px;line-height:44px}
body.phone .modal-bg{padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));align-items:flex-start}
body.phone .modal{padding:18px 16px;max-height:calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:16px;box-sizing:border-box}
body.phone .modal .actions{flex-wrap:wrap;gap:10px}
body.phone .modal input:not([type=checkbox]):not([type=radio]):not([type=file]),body.phone .modal select{min-height:44px}
body.phone .modal [style*="gap:4px"],body.phone .modal [style*="gap:5px"],body.phone .modal [style*="gap:6px"],body.phone .ph-body [style*="gap:4px"],body.phone .ph-body [style*="gap:5px"],body.phone .ph-body [style*="gap:6px"]{gap:10px!important}
body.phone .modal .chk{min-height:44px;align-items:center}
body.phone .modal .chk input{margin-top:0}
body.phone .modal label:has(>input[type=checkbox]),body.phone .modal label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
body.phone .ph-body input:not([type=checkbox]):not([type=radio]):not([type=file]),body.phone .ph-body select{min-height:44px;box-sizing:border-box}
body.phone .ph-body input[type=checkbox],body.phone .modal input[type=checkbox]{width:22px;height:22px}
body.phone .ph-body .sf,body.phone .ph-body .f{grid-template-columns:minmax(0,1fr)}
body.phone .ph-body .actions{flex-wrap:wrap;gap:10px}
body.phone .ph-body .steps{flex-wrap:wrap}
body.phone .ph-body .grid{grid-template-columns:minmax(0,1fr)}
body.phone .ph-body .card{min-width:0;max-width:100%;box-sizing:border-box}
body.phone .ph-body input,body.phone .ph-body select,body.phone .ph-body textarea{max-width:100%;box-sizing:border-box}
body.phone .ph-body .chk{min-height:44px;align-items:center}
body.phone .ph-body .chk input{margin-top:0}
body.phone .ph-body .chk label{display:flex;align-items:center;min-height:44px;flex:1}
body.phone .ph-body .ff-bar,body.phone .ph-body .ff-qty,body.phone .ph-body .ff-hits{gap:8px}
body.phone .ph-body .ff-choice{gap:10px}
body.phone .ph-body .ff-sigbox>div,body.phone .ph-body .ff-ser>div{gap:10px!important}
body.phone .ph-body .ff-ser input{margin-bottom:10px!important}
body.phone .ph-body .drop input{min-height:44px}
body.phone .ph-body .files a,body.phone .ph-body summary{display:inline-flex;align-items:center;min-height:44px}
body.phone .ph-body .ff-bar button{min-height:44px;padding:8px 14px;font-size:14px}
body.phone .ph-body .ff-qty button,body.phone .ph-body .ff-x{width:44px;height:44px}
body.phone .ph-body .ff-hit{min-height:44px}
body.phone .ph-body .ff-photo{min-height:44px;box-sizing:border-box}


.qd-terms{margin:18px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);font-size:12.5px;line-height:1.55}
.qd-terms b{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal2)}
.qd-terms ul{margin:0 0 8px;padding-left:17px}
.qd-terms li{margin:0 0 3px}
.qd-terms p{margin:0;color:var(--ink3)}
@media print{.qd-terms{background:#fff;border:1px solid #ddd}}

.ecal-day .dn{display:flex;align-items:center;justify-content:space-between;gap:4px}
.ecal-add{opacity:0;border:1px solid var(--line2);background:var(--surface);color:var(--ink3);
  width:17px;height:17px;line-height:1;border-radius:5px;font-size:13px;padding:0;cursor:pointer;
  flex:0 0 auto;transition:opacity .12s}
.ecal-day:hover .ecal-add,.ecal-add:focus-visible{opacity:1}
.ecal-add:hover{border-color:var(--teal2);color:var(--teal2)}
@media (pointer:coarse){.ecal-add{opacity:1}}
@media print{.ecal-add{display:none}}

.ff-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.ff-bar{display:flex;gap:4px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.ff-bar button{flex:0 0 auto;border:1px solid var(--line2);background:var(--surface);color:var(--ink3);
  padding:6px 11px;border-radius:99px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.ff-bar button.on{background:var(--teal2);border-color:var(--teal2);color:#fff;font-weight:600}
.ff-bar button.past{color:var(--teal2);border-color:var(--teal2)}
.ff-card{max-width:620px}
.ff-f{margin:0 0 16px}
.ff-calc{padding:9px 11px;border:1px dashed var(--line2);border-radius:9px;background:var(--surface2);font-size:15px}
.ff-choice{display:flex;gap:7px;flex-wrap:wrap}
.ff-choice button{flex:1 1 auto;min-width:92px;min-height:44px;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink);padding:10px 12px;border-radius:10px;font:inherit;font-size:14px;cursor:pointer}
.ff-choice button.on{background:var(--teal2);border-color:var(--teal2);color:#fff;font-weight:600}
.ff-choice.yn button{min-width:0;flex:1}
.ff-choice.yn button.on.n{background:var(--red,#c0392b);border-color:var(--red,#c0392b)}
.ff-list{display:flex;flex-direction:column;gap:6px}
.ff-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);font-size:13px}
.ff-qty{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.ff-qty button{width:30px;height:30px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:7px;font:inherit;font-size:16px;cursor:pointer}
.ff-qty span{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.ff-x{width:28px;height:28px;border:0;background:none;color:var(--ink3);font-size:19px;line-height:1;cursor:pointer;flex:0 0 auto}
.ff-x:hover{color:var(--red,#c0392b)}
.ff-hits{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.ff-hit{text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:8px 10px;border-radius:8px;font:inherit;font-size:12.5px;cursor:pointer}
.ff-hit:hover{border-color:var(--teal2)}
.ff-ser{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--surface2)}
.ff-photo{display:block;text-align:center;padding:12px;border:1px dashed var(--line2);border-radius:9px;
  font-size:13px;color:var(--ink3);cursor:pointer}
.ff-photo.has{border-style:solid;border-color:var(--teal2);color:var(--teal2)}
.ff-sigbox{border:1px solid var(--line2);border-radius:10px;padding:8px;background:var(--surface)}
.ff-read{margin:0 0 14px}
.ff-read h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.ff-rr{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.ff-rr>span{flex:0 0 42%;color:var(--ink3)}
.ff-rr>div{flex:1;min-width:0}
body.phone .ff-card{max-width:none}
body.phone .ff-rr{flex-direction:column;gap:2px}
body.phone .ff-rr>span{flex:none}

.fc{display:flex;flex-direction:column;gap:0}
.fc-step{display:flex;gap:10px;align-items:flex-start;padding:7px 0;position:relative}
.fc-step+.fc-step{border-top:1px solid var(--line)}
.fc-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:var(--line2)}
.fc-step.done .fc-dot{background:var(--teal2)}
.fc-step.todo .fc-dot{background:var(--amber,#d98324)}
.fc-step.warn .fc-dot{background:var(--amber,#d98324);opacity:.6}
.fc-step.bad .fc-dot{background:var(--red,#c0392b)}

.pr-asset{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface)}
.pr-asset>summary{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none}
.pr-asset>summary::-webkit-details-marker{display:none}
.pr-asset[open]>summary{border-bottom:1px solid var(--line)}
.pr-asset>div{padding:0 12px 10px}

/* Drawing viewer with area notes */
.dv{position:fixed;inset:0;z-index:1200;background:var(--bg);display:flex;flex-direction:column}
.dv-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2);background:var(--card);flex-wrap:wrap}
.dv-t{flex:1 1 220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-c{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dv-body{flex:1;display:flex;min-height:0}
.dv-stage{flex:1;overflow:auto;background:#5c6470;padding:20px;display:flex;justify-content:center;align-items:flex-start}
.dv-wrap{position:relative;flex:0 0 auto;box-shadow:0 6px 26px rgba(0,0,0,.35);background:#fff}
.dv-wrap canvas{display:block}
.dv-ov{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.dv-n{position:absolute;border:2px solid #d2691e;background:rgba(210,105,30,.14);cursor:pointer;border-radius:3px}
.dv-n.done{border-color:#3f8f7a;background:rgba(63,143,122,.12)}
.dv-n.flash{animation:dvflash .6s ease-in-out 2}
@keyframes dvflash{50%{background:rgba(210,105,30,.42)}}
.dv-n span{position:absolute;top:-11px;left:-11px;width:22px;height:22px;border-radius:50%;background:#d2691e;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dv-n.done span{background:#3f8f7a}
.dv-sel{position:absolute;border:2px dashed #d2691e;background:rgba(210,105,30,.1);border-radius:3px;pointer-events:none}
.dv-side{width:330px;flex:0 0 330px;border-left:1px solid var(--line2);background:var(--card);overflow:auto;padding:14px}
.dv-item{border:1px solid var(--line2);border-radius:8px;padding:9px 10px;margin-bottom:8px;cursor:pointer;font-size:13px}
.dv-item.on{border-color:#d2691e;box-shadow:0 0 0 2px rgba(210,105,30,.18)}
.dv-item.done{opacity:.6}
.dv-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#d2691e;color:#fff;font-size:12px;font-weight:700;margin-right:6px}
.dv-item.done .dv-num{background:#3f8f7a}
@media(max-width:860px){.dv-body{flex-direction:column}.dv-side{width:auto;flex:0 0 auto;max-height:44vh;border-left:0;border-top:1px solid var(--line2)}.dv-stage{padding:10px}}

/* ---- interior design selection ---- */
.idgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.idcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.idim{width:100%;aspect-ratio:4/3;background:var(--chip,#f1f3f4);overflow:hidden;flex:0 0 auto}
.idim img{width:100%;height:100%;object-fit:cover;display:block}
.idim.no{background:repeating-linear-gradient(45deg,var(--chip,#f1f3f4),var(--chip,#f1f3f4) 8px,transparent 8px,transparent 16px)}
.idcard .idtx{padding:10px;display:flex;flex-direction:column;gap:4px;flex:1 1 auto}
.idtx b{font-size:.92rem;line-height:1.25}
.idtx small{font-size:.78rem;color:var(--muted)}
.idsp{display:block;max-height:3.1em;overflow:hidden}
.idact{margin-top:auto;padding-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.idrow{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--card)}
.idrow.on{border-color:var(--band,#3F9A8A);box-shadow:inset 3px 0 0 var(--band,#3F9A8A)}
.idrow .idim{width:84px;aspect-ratio:1;border-radius:8px;flex:0 0 auto}
.idrow .idtx{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.idrow .idtx b,.idrow .idtx small{overflow-wrap:anywhere}
.idbtn{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;align-items:stretch}
.idel{padding:10px 0;border-top:1px solid var(--line)}
.idel:first-of-type{border-top:0}
.idelh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.idelh b{margin-right:auto}
.idopt{display:block;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.idopt input{margin-right:8px}
.idopt b{display:inline}
.idopt small{display:block;color:var(--muted);margin-top:2px}
.card.sel{border-color:var(--band,#3F9A8A);box-shadow:inset 0 0 0 1px var(--band,#3F9A8A)}
@media(max-width:620px){.idgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.idrow{flex-wrap:wrap}.idbtn{flex-direction:row;width:100%}}

/* ---- guide search ---- */
.gfr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:var(--card);cursor:pointer}
.gfr:hover{border-color:var(--band,#3F9A8A)}
.gfr b{display:block;font-size:.98rem}
.gfr small{display:block;color:var(--muted);font-size:.78rem;margin:2px 0 6px}
.gfr p{margin:0;font-size:.88rem;color:var(--ink);line-height:1.5}
.gfr.az small{margin-bottom:0}
.gfr mark{background:var(--chip,#f1f3f4);color:inherit;font-weight:600;padding:0 2px;border-radius:3px}
.gfq-eg{display:flex;gap:6px;flex-wrap:wrap}

/* ---- outside installers ---- */
.extrow{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.extrow:first-of-type{border-top:0}
.extrow.ok{box-shadow:inset 3px 0 0 var(--band,#3F9A8A);padding-left:9px}
.extrow.bad{box-shadow:inset 3px 0 0 var(--red,#b4342c);padding-left:9px}
.extq{flex:1 1 300px;min-width:0}
.extq b{display:block;font-size:.92rem;font-weight:500;line-height:1.35}
.extq small{display:block;font-size:.76rem}
.exta{flex:0 1 300px;display:flex;align-items:center}
.exta input{width:100%}
.extyn{display:flex;gap:6px;flex-wrap:wrap;width:100%}
@media(max-width:700px){.extrow{flex-direction:column;gap:6px}.exta{flex:1 1 auto;width:100%}}

/* Showing a client round their portal. Above everything, including the view-as bar, because while it
   is running nothing else should be reachable. */
.pwalk-block{position:fixed;inset:0;z-index:10000;background:transparent;cursor:default}
.pwalk-ring{position:fixed;z-index:10001;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,22,20,.62);border:2px solid var(--teal);transition:all .18s ease}
.pwalk-card{position:fixed;z-index:10002;width:360px;max-width:calc(100vw - 24px);background:var(--surface);
  color:var(--ink);border:1px solid var(--line2);border-radius:14px;padding:14px 16px 12px;
  box-shadow:0 18px 50px rgba(8,22,20,.35);font-size:13.5px;line-height:1.5}
.pwalk-card.mid{top:50%;left:50%;transform:translate(-50%,-50%)}
.pwalk-card h3{margin:2px 0 8px;font-size:15.5px}
.pwalk-card p{margin:0 0 8px}
.pwalk-card p:last-of-type{margin-bottom:10px}
.pwalk-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pwalk-n{font-size:12px;color:var(--ink3);letter-spacing:.3px}
.pwalk-x{background:none;border:0;color:var(--ink3);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px}
.pwalk-x:hover{color:var(--ink)}
.pwalk-none{color:var(--ink3);font-style:italic}
.pwalk-btns{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
/* On a phone it is a sheet along the bottom: there is no room beside anything, and a thumb is at the
   bottom of the screen anyway. The ring still lights up whatever is being explained above it. */
.pwalk-card.phone{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;transform:none;
  border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  max-height:62vh;overflow:auto}
.pwalk-card.phone.mid{top:auto;left:0;transform:none}
.pwalk-card.phone .pwalk-btns button{min-height:40px;padding:0 18px}
@media (max-width:760px){.pwalk-card{width:auto}}

/* Collapsible cards. An account page is long and most of it is not what you came for, so every
   section header folds. The state is remembered per card in this browser only. */
.card>h3.foldable{cursor:pointer;user-select:none}
.card>h3.foldable::after{content:"\25BE";font-size:12px;opacity:.9;margin-left:4px}
.card.fold>h3.foldable::after{content:"\25B8"}
.card.fold>*:not(h3:first-of-type){display:none}
.card.fold{padding-bottom:4px}

/* Two column areas flow rather than align. A CSS grid makes every row as tall as its tallest card, so
   a short card beside a long one leaves a hole the full height of the long one: on one account that was
   2,798px of white space under a 105px card. Columns pack instead, and a folded card no longer tears a
   hole in the page. Applies everywhere .g2 is used, which is 37 places across 12 files. */
.grid.g2{display:block;column-count:2;column-gap:14px}
.grid.g2>*{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;display:block;width:100%}
@media (max-width:760px){.grid.g2{column-count:1}}

/* Tags beyond the first few sit behind a count until somebody asks for them. */
.tags .tag-hide{display:none}
.tags.all .tag-hide{display:inline-block}
.tags .tag-more{cursor:pointer;border:1px dashed var(--line2);background:transparent;color:var(--ink3);font:inherit;font-size:12px;padding:2px 7px;border-radius:999px}
.tags .tag-more:hover{color:var(--ink);border-color:var(--ink3)}
.tags .tags-label{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink3);margin-right:2px;align-self:center}
.card.capped{max-height:var(--cap,420px);overflow:hidden;position:relative}
.capmore{display:block;width:100%;border:0;background:none;cursor:pointer;font:inherit;font-size:12px;color:var(--ink3);text-align:center;padding:7px 0 1px;margin:6px 0 0;border-top:1px solid var(--line2)}
.card.capped>.capmore{position:absolute;left:0;right:0;bottom:0;width:100%;margin:0;border-top:0;padding:26px 0 8px;background:linear-gradient(to bottom,transparent,var(--card) 62%)}
.capmore:hover{color:var(--ink)}
.grid.g2.packed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:4px;grid-auto-flow:row dense;column-gap:14px;row-gap:0;column-count:auto}
.grid.g2.packed>*{margin:0;align-self:start}
@media (max-width:760px){.grid.g2.packed{grid-template-columns:minmax(0,1fr)}}
.ph-item.ph-next{box-shadow:0 0 0 2px var(--teal) inset;border-radius:12px}
.ph-item.ph-next .kd{color:var(--teal);font-weight:700}

/* ===== Visual refresh, 26 October 2026 =====================================================
   Agreed with Chris from the mockups. Calm and flat, after the CRMs reviewers rate easiest to use
   (Close, Pipedrive, HubSpot): light grey page, white cards with hairline borders, no coloured bar
   on every card heading, teal kept for the one thing to do, body text Regular instead of Light.
   Everything is in this one block and only overrides what came before it, so removing the block
   puts the old look back exactly. Dark mode keeps its own colours: these are plain :root values,
   which the dark theme's more specific rules still override. */
:root{--bg:#F4F6F5;--surface2:#F7F9F8;--line:#E4E9E6;--line2:#EEF2F0;--ink:#14201B;--ink2:#46534D;--ink3:#7B8882;--radius:12px}
html,body{font-weight:400}
h1{font-size:23px;font-weight:600;letter-spacing:-.01em}
/* Sidebar: white, with the current section on a soft teal */
.side{background:var(--surface);border-right:1px solid var(--line)}
.nav button{color:var(--ink2);font-weight:500}
.nav button.on{background:var(--teal-soft);color:var(--teal-ink);font-weight:600;box-shadow:none}
.nav button.on svg{color:var(--teal-ink)}
.nav button:hover:not(.on){background:var(--surface2)}
.nav button .badge{background:var(--grey-soft);color:var(--ink2);font-weight:500}
/* Cards: flat, hairline border, dark heading instead of a teal bar */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.card>h3{background:none;color:var(--ink);padding:0;margin:0 0 12px;border-radius:0;font-weight:600;font-size:14px;letter-spacing:0}
.card>h3 .muted,.card>h3 span.muted{color:var(--ink3)!important;font-weight:400}
.card>h3 .btn{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500;padding:4px 10px;font-size:12px}
.card>h3 .btn:hover{background:var(--surface2)}
.card>h3 .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.card>h3 .btn.ghost:hover{background:var(--surface2)}
.card>h3 select{border:1px solid var(--line)}
.card>h3 .tag{background:var(--grey-soft);color:var(--ink2)}
.card>h3 a{color:var(--teal-ink)}
.card.fold>h3{margin-bottom:0}
/* The old heading spread its parts across the bar. Now the title and its note sit together, any buttons
   go to the right, and the fold arrow is pinned to the corner so it is in the same place on every card. */
.card>h3{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.card>h3>:last-child:is(button,.btn,select,.tags,:has(button,.btn,select)){margin-left:auto}
.card>h3.foldable{position:relative;padding-right:22px}
.card>h3.foldable::after{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;opacity:.5}
/* Buttons: teal means "do this"; everything else is a white button */
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface2)}
/* Tiles: the number in ink, colour only when it needs attention */
.stat .n{color:var(--ink);font-weight:600;font-size:24px;letter-spacing:-.01em}
.stat .l{color:var(--ink2)}
.stat.link:hover{border-color:var(--teal)}
/* Tables: quieter headings */
th{font-weight:500;letter-spacing:.04em;color:var(--ink3)}
/* Dark mode had its own rules colouring card headings, heading buttons and badges for the old teal bar, and
   those are more specific than the lines above, so they are matched here for both ways dark mode switches on. */
:root[data-theme="dark"] .card>h3{color:var(--ink)}
:root[data-theme="dark"] .card>h3 a{color:var(--teal-ink)}
:root[data-theme="dark"] .card>h3 .btn,:root[data-theme="dark"] .card>h3 .btn.ghost{color:var(--ink);background:var(--surface);border:1px solid var(--line)}
:root[data-theme="dark"] .card>h3 .tag{background:var(--grey-soft);color:var(--ink2)}
:root[data-theme="dark"] .btn.ghost{color:var(--ink)}
:root[data-theme="dark"] .nav button .badge{color:var(--ink2)}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .card>h3{color:var(--ink)}
:root:not([data-theme="light"]) .card>h3 a{color:var(--teal-ink)}
:root:not([data-theme="light"]) .card>h3 .btn,:root:not([data-theme="light"]) .card>h3 .btn.ghost{color:var(--ink);background:var(--surface);border:1px solid var(--line)}
:root:not([data-theme="light"]) .card>h3 .tag{background:var(--grey-soft);color:var(--ink2)}
:root:not([data-theme="light"]) .btn.ghost{color:var(--ink)}
:root:not([data-theme="light"]) .nav button .badge{color:var(--ink2)}
}
/* ===== end of visual refresh ===== */
/* Account additions, 26 October: Needs attention, equipment by room, the pinned note */
.need-row,.room-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.card>h3+.need-row,.card>h3+.room-row{border-top:0;padding-top:2px}
.need-dot{width:8px;height:8px;border-radius:50%;flex:none}
.need-t{flex:1;min-width:0}.need-t b{font-weight:500;display:block}.need-t span{color:var(--ink3);font-size:12.5px;display:block}
.room-row{cursor:pointer}.room-row:hover .need-t b{color:var(--teal-ink)}
.acc-pin{background:#FFFBEF;border:1px solid #F1E2BC;color:#5C4A1C;border-radius:10px;padding:9px 13px;font-size:13px;margin:-4px 0 14px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.acc-pin a{margin-left:auto;font-size:12px;color:#8A6D1E}
:root[data-theme="dark"] .acc-pin{background:#2C2614;border-color:#4A3F1F;color:#EAD9A6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .acc-pin{background:#2C2614;border-color:#4A3F1F;color:#EAD9A6}}

/* Days spent in each project stage */
.stages div small.stg-days{display:block;font-weight:500;font-size:12px;color:var(--ink3);margin-top:2px}
.stages div.now small.stg-days{color:var(--teal-ink)}
/* Leads and prospects (27 Oct): Board, List and Stages. Selected buttons are dark green, not black (Chris). */
.lp-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.lp-seg{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.lp-seg button{border:0;background:none;color:var(--ink2);font:inherit;font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.lp-seg button i,.lp-chip i{font-style:normal;color:var(--ink3);font-weight:400;margin-left:3px}
.lp-seg button.on,.lp-chip.on{background:var(--teal-ink);color:var(--surface)}.lp-seg button.on i,.lp-chip.on i{color:inherit;opacity:.75}
.lp-seg button:hover:not(.on){background:var(--surface2);color:var(--ink)}
.lp-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink2);font:inherit;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:10px;cursor:pointer}
.lp-q{min-width:200px;max-width:260px;font-size:12.5px}
.lp-av{width:26px;height:26px;border-radius:50%;background:var(--grey-soft);color:var(--grey);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.lp-age{font-size:12px;font-weight:500;padding:1px 7px;border-radius:99px;background:var(--grey-soft);color:var(--ink2);white-space:nowrap}.lp-age.a{background:var(--amber-soft);color:var(--amber)}.lp-age.r{background:var(--red-soft);color:var(--red)}
.lp-v{font-weight:600;font-size:12.5px;white-space:nowrap}.lp-v.none{color:var(--ink3);font-weight:400}
.lp-lane{margin-bottom:18px}.lp-lane>h4{margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.lp-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;overflow-x:auto}
.lp-col{background:var(--grey-soft);border-radius:12px;padding:10px}
.lp-col .ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px 8px}.lp-col .ch b{font-size:13px;font-weight:600}.lp-col .ch span{color:var(--ink3);font-size:12px;white-space:nowrap}
.lp-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin-bottom:8px;cursor:pointer}
.lp-card:hover{border-color:var(--teal)}.lp-card.hot{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))}.lp-card.quiet{opacity:.7}
.lp-card b{display:block;font-weight:500;font-size:13px;line-height:1.35}.lp-card small{display:block;color:var(--ink3);font-size:12px}
.lp-card .ft{display:flex;align-items:center;gap:8px;margin-top:8px}.lp-card .ft .lp-v{margin-left:auto}
.lp-card .nx{font-size:12px;color:var(--ink2);margin-top:7px;border-top:1px solid var(--line2);padding-top:6px}
.lp-quiet{font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.lp-more,.lp-link{display:block;width:100%;border:0;background:none;color:var(--teal-ink);font:inherit;font-size:12.5px;font-weight:500;padding:4px;cursor:pointer}
.lp-link{display:inline;width:auto;margin-left:auto}
.lp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.lp-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}.lp-tile b{display:block;font-size:21px;font-weight:600;letter-spacing:-.01em}.lp-tile span{color:var(--ink3);font-size:12.5px}.lp-tile em{font-style:normal;color:var(--ink);font-weight:500}
.lp-tile.warn{border-color:color-mix(in srgb,var(--amber) 35%,var(--line));background:color-mix(in srgb,var(--amber-soft) 45%,var(--surface))}.lp-tile.warn b{color:var(--amber)}
.lp-sec{display:flex;align-items:center;gap:10px;margin:6px 0 8px}.lp-sec h3{margin:0;font-size:14px;font-weight:600}.lp-sec>span{color:var(--ink3);font-size:12.5px}
.lp-rows{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.lp-row{display:grid;grid-template-columns:4px minmax(0,2fr) minmax(0,1.6fr) minmax(0,1.6fr) 100px 28px 168px;gap:14px;align-items:center;padding:10px 14px 10px 0;border-top:1px solid var(--line2);cursor:pointer}
.lp-row:first-child{border-top:0}.lp-row:hover{background:var(--surface2)}
.lp-row .k{align-self:stretch;border-radius:0 3px 3px 0}.lp-row .k.r{background:var(--red)}.lp-row .k.a{background:var(--amber)}.lp-row .k.b{background:var(--blue)}
.lp-row .nm{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lp-row small,.lp-row .why span{display:block;color:var(--ink3);font-size:12px}
.lp-row .why{display:block;font-size:12.5px}.lp-row .why b{font-weight:500;display:block}
.lp-row .nx{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-row .lp-v{text-align:right;font-size:13px}.lp-acts{display:flex;gap:6px;align-items:center}.lp-acts .btn{flex:1;text-align:center}
.lp-close{border:1px solid var(--line);background:var(--surface);color:var(--ink3);font:inherit;font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer}.lp-close:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.lp-trk{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin:14px 0 8px}
.lp-fold{display:grid;grid-template-columns:minmax(0,1fr) 100px 120px minmax(0,190px) 18px;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:11px 16px;cursor:pointer}
.lp-fold b{font-weight:500}.lp-fold span{color:var(--ink3);font-size:12.5px}.lp-fold .v{text-align:right;color:var(--ink);font-weight:500;font-size:13px}.lp-fold i{font-style:normal;color:var(--ink3);font-size:18px;line-height:1;text-align:right;transition:transform .15s}.lp-fold.open i{transform:rotate(90deg)}
.lp-rl{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.lp-rail{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;position:sticky;top:12px}
.lp-rail .g{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:10px 10px 4px}
.lp-ri{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:8px 10px;border-radius:9px;font-size:13px;cursor:pointer}
.lp-ri b{font-weight:500}.lp-ri small{grid-column:1/-1;color:var(--ink3);font-size:12px}.lp-ri:hover:not(.on){background:var(--surface2)}
.lp-ri.on{background:var(--teal-ink);color:var(--surface)}.lp-ri.on small{color:inherit;opacity:.8}
.lp-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--teal-ink);color:var(--surface);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:12.5px}.lp-bulk b{font-weight:500}.lp-bulk select{font-size:12.5px;max-width:180px}
.lp-clear{border:1px solid color-mix(in srgb,currentColor 45%,transparent);background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;cursor:pointer}
.plist td.money .x{font-weight:600}.plist td.money .x.none{font-weight:400;color:var(--ink3)}
@media(max-width:1100px){.lp-row{grid-template-columns:4px minmax(0,2fr) minmax(0,1.6fr) 90px 28px 160px}.lp-row .nx{order:99;grid-column:2/-1;font-size:12.5px;color:var(--ink2);margin-top:-6px}/* the next step moves under the row instead of going (audit 11 Nov 2026, D1) */.lp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.lp-rl{grid-template-columns:1fr}.lp-rail{position:static}.lp-fold{grid-template-columns:minmax(0,1fr) auto auto 18px}.lp-fold span:nth-of-type(3){display:none}
 .lp-row{grid-template-columns:4px minmax(0,1fr) auto;row-gap:4px;padding:10px 12px 10px 0}.lp-row .k{grid-row:1/4}.lp-row .why{grid-column:2/4}.lp-row .lp-av{display:none}.lp-row .lp-acts{grid-column:2/4;justify-self:start}}
/* Phone: Leads */
.ph-lead{border-left:4px solid var(--amber)}.ph-lead.r{border-left-color:var(--red)}.ph-lead.b{border-left-color:var(--blue)}.ph-lead.n{border-left-color:var(--line)}
.ph-lead .t{display:flex;align-items:baseline;gap:8px}.ph-lead .t b{flex:1;min-width:0;font-size:16px;font-weight:600}.ph-lead .t .lp-v{font-size:14px}
.ph-lead .w{font-size:14px;margin-top:3px}.ph-lead .dd{color:var(--ink3);font-size:13px}
.ph-lead .ba{display:flex;gap:8px;margin-top:10px}.ph-lead .ba .ph-btn{flex:1}
.ph-chips .ph-btn.on{background:var(--teal-ink);border-color:var(--teal-ink);color:var(--surface)}
/* Closing a lead (27 Oct) */
.lc-opts{display:grid;gap:8px}
.lc-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.lc-opt input{margin-top:3px;accent-color:var(--teal-ink)}.lc-opt b{display:block;font-weight:500}.lc-opt small{display:block;color:var(--ink3);font-size:12px}
.lc-opt:has(input:checked){border-color:var(--teal-ink);background:var(--teal-soft)}
.lp-x{border:0;background:none;color:var(--ink3);font:inherit;font-size:12px;font-weight:500;padding:0 2px;cursor:pointer;margin-left:auto;opacity:0;transition:opacity .12s}
.lp-card:hover .lp-x,.lp-x:focus{opacity:1}.lp-x:hover{color:var(--red)}
@media (hover:none){.lp-x{opacity:1}}
.lp-card .nx{display:flex;align-items:baseline;gap:6px}
.lp-quietbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:9px 12px;margin:-4px 0 14px;font-size:12.5px}
/* Settings: a list on the left, one thing at a time on the right (Chris chose this layout, Oct 2026) */
.set-md{display:grid;grid-template-columns:272px minmax(0,1fr);gap:16px;align-items:start}
.set-rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px;position:sticky;top:12px;max-height:calc(100vh - 90px);overflow:auto}
.set-top{padding:6px 6px 2px}.set-top .btn{width:100%}
.set-rail .set-find{width:100%;box-sizing:border-box;margin:6px 0 2px;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.set-g{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:12px 10px 4px}
.set-ri{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:7px 10px;margin:1px 0;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.set-ri:hover{background:var(--surface2)}
.set-rl{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.set-rl>span:last-child{min-width:0}
.set-ri b{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-ri small{display:block;color:var(--ink3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-ri.on,.set-ri.on:hover{background:var(--teal-ink);color:#fff}.set-ri.on small{color:rgba(255,255,255,.78)}
.set-av{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--teal-soft);color:var(--teal-ink)}
.set-ri.on .set-av{background:rgba(255,255,255,.2);color:#fff}
.set-av.lg{width:44px;height:44px;font-size:14px}
.set-off{font-size:12px;padding:1px 7px;border-radius:99px;background:var(--grey-soft);color:var(--ink2);flex:none}
.set-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;min-width:0}
.set-panel .card{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
.set-panel .card .card,.set-panel .card~.card,.set-panel .grid>.card{border-top:1px solid var(--line2);padding-top:14px;margin-top:14px}
.set-panel .grid>.card{margin-top:0}
.set-panel .card .card>h3,.set-panel .card~.card>h3,.set-panel .grid>.card>h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.set-panel>.card>h3,.set-h{font-size:16px;font-weight:600;margin:0 0 12px}
.set-ph{display:flex;gap:12px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.set-ph h2{margin:0;font-size:19px;font-weight:600}.set-ph small{color:var(--ink3);font-size:12.5px}
.set-sec{border-top:1px solid var(--line2);padding:14px 0}.set-sec h4{margin:0 0 10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.set-kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:6px 0;align-items:start;font-size:13px}.set-kv>span{color:var(--ink3);padding-top:2px}
.set-cks{display:flex;flex-wrap:wrap;gap:4px 18px}
.set-fs{border:0;padding:0;margin:10px 0 0;min-width:0}
.set-sw{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 6px;font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.set-sw i{width:30px;height:17px;border-radius:99px;background:#C9D2CE;position:relative;display:inline-block}.set-sw i:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px}.set-sw.on i{background:var(--teal)}.set-sw.on i:after{left:15px}
span.set-sw{cursor:default}
.set-foot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line2);padding-top:14px;flex-wrap:wrap}
.set-danger{color:var(--red)!important}
@media(max-width:900px){.set-md{grid-template-columns:1fr}.set-rail{position:static;max-height:300px}.set-kv{grid-template-columns:1fr;gap:4px}.set-panel{padding:14px}}

/* ===== Easier to read, 28 October 2026 ======================================================
   Chris, after seeing the launch mock-ups: "cleaner and easier to read, push in that direction".
   Paint only: no layout, markup or behaviour changes. One block at the end, so deleting it puts
   the 26 October look back exactly.
   - Secondary text was #7B8882 on white (3.6:1, below the 4.5:1 reading standard). Now #5E6B65 (5.6:1).
   - Slightly larger body and table text; small labels have a floor of 11.5px.
   - Card titles a step larger, so each card reads as one thing.
   Dark mode keeps its own colours: these are plain :root values and the dark theme's rules are more specific. */
:root{--ink3:#5E6B65;--ink2:#3F4C46}
html,body{font-size:14.5px}
table{font-size:14px}
td{padding:11px 8px}
th{font-size:12px;color:var(--ink2);font-weight:600}
.muted{font-size:13.5px}
.card{padding:18px 20px}
.card>h3{font-size:15px;margin-bottom:14px}
.tag{font-size:12px}
.ev{font-size:12px}
h1{font-size:24px}
/* Inline labels written into the pages at 10 to 11.5px get the same floor */
/* A global replace once turned every selector here into 12px, so the floor did nothing; put back (audit 11 Nov 2026, D1) */
[style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"]{font-size:11.5px!important}

/* ===== More menu, back links and the missing-info box, 28 October 2026 ===== */
.more-m{position:relative;display:inline-block}
.more-m>summary{list-style:none;cursor:pointer;user-select:none}
.more-m>summary::-webkit-details-marker{display:none}
.more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:210px;background:var(--card,#fff);border:1px solid var(--line2);border-radius:10px;box-shadow:0 14px 30px -14px rgba(20,32,27,.35);padding:6px;display:flex;flex-direction:column;gap:2px}
.more-pop .btn{text-align:left;border:0!important;width:100%;background:none}
.more-pop .btn:hover{background:var(--surface2)}
.more-pop .btn.danger{color:var(--red)}
.back-link{display:inline-block;font-size:13px;color:var(--ink3);text-decoration:none;margin-bottom:4px}
.back-link:hover{color:var(--ink)}
.act-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.missing{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;padding:10px 12px;border:1px dashed var(--line2);border-radius:10px;font-size:13px}
.missing b{margin-right:4px}
.missing button{background:none;border:1px solid var(--line2);border-radius:14px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:var(--ink)}
.missing button:hover{background:var(--surface2)}
/* A tile you can click says so with an arrow; a tile that is only information is flat and has no hover, so nobody
   tries to click it (Darren, 28 October: "it's making me go and try to click them"). */
.card.stat.link{position:relative;padding-right:30px}
.card.stat.link::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:var(--ink3)}
.card.stat.link:hover::after{color:var(--teal)}
.card.stat:not(.link){box-shadow:none;background:var(--surface2);border-color:transparent;cursor:default}
.qa .more-m>summary.qa-new{background:var(--teal);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;display:flex;align-items:center;white-space:nowrap}
.more-m.up .more-pop{top:auto;bottom:calc(100% + 10px)}
.qa .more-pop .btn{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:8px;color:var(--ink)}
@media(max-width:760px){.qa .more-m{flex:1}.qa .more-m>summary.qa-new{justify-content:center;padding:10px 8px}.qa .more-pop{right:0;left:auto}}

/* ===== The new layout (app/28b-new-layout.js). Everything below is scoped to body.nl, so with the switch
   off none of it applies and the old layout is exactly as it was. ===== */
body.nl .nav{gap:2px}
body.nl .nav .nl-g{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:14px 11px 4px}
body.nl .nav .nl-g:first-child{padding-top:2px}
body.nl .nav button{padding:7px 11px}
body.nl .main{padding-top:0}
body.nl .nl-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;margin:0 -28px 14px;padding:10px 28px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
body.nl .nl-top .nl-search{flex:1;min-width:180px;margin:0}
body.nl .nl-top .nl-search input{padding:8px 12px 8px 34px;font-size:14px;border-radius:9px}
body.nl .nl-top .nl-search:before{top:5px}
body.nl .nl-top .nl-search .sres{top:40px}
body.nl .nl-top>.btn,body.nl .nl-top .nl-menu>summary{white-space:nowrap;padding:7px 12px;font-size:13px;border-radius:9px}
body.nl .nl-top .nl-menu>summary{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500}
body.nl .nl-top .nl-menu.pri>summary{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
body.nl .nl-top .nl-menu .more-pop .btn{font-size:13.5px;padding:9px 12px;color:var(--ink)}
body.nl .nl-top .nl-ico{padding:6px 8px;display:flex;align-items:center}
body.nl .nl-top .nl-ico svg{width:17px;height:17px}
body.nl .nl-n{display:inline-flex;min-width:18px;height:17px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-size:12px;font-weight:700;align-items:center;justify-content:center;padding:0 5px;margin-left:3px}
body.nl .userbar.in-top{position:static;margin-left:4px}
body.nl .subnav{margin-top:0}
body.nl .nl-top .nl-search{min-width:260px}
body.nl .userbar.in-top .chatb .chatl{display:none}
body.nl .nl-pophead{font-size:12px;color:var(--ink3);padding:6px 12px 4px;border-bottom:1px solid var(--line2);margin-bottom:4px}
/* the record layout */
body.nl .nl-rec{display:flex;flex-direction:column;gap:14px}
body.nl .nl-rh{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
body.nl .nl-rh-l{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
body.nl .nl-rh .back-link{font-size:12.5px;align-self:flex-start}
body.nl .nl-crumb{font-size:12.5px;color:var(--ink3)}
body.nl .nl-rh h1{margin:2px 0 0;font-size:26px;line-height:1.2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.nl .nl-rh h1 .tag{font-size:12px;font-weight:600}
body.nl .nl-tags{margin:2px 0}
body.nl .nl-facts{font-size:13.5px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
body.nl .nl-facts .sep{color:var(--ink3)}
body.nl .nl-rh-l>p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
body.nl .nl-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.nl .nl-act .nl-menu>summary{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;padding:9px 14px;border-radius:9px;font-size:13.5px}
body.nl .nl-stages{display:flex;gap:4px}
body.nl .nl-stages span{flex:1;text-align:center;padding:6px 4px;border-radius:7px;background:var(--grey-soft);font-size:12px;color:var(--ink2)}
body.nl .nl-stages .done{background:var(--teal-soft);color:var(--teal-ink)}
body.nl .nl-stages .now{background:var(--teal2);color:#fff;font-weight:600}
body.nl .nl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
body.nl .nl-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
body.nl .nl-tile b{font-size:19px;font-weight:600;line-height:1.2}
body.nl .nl-tile span{font-size:12.5px;color:var(--ink2)}
body.nl .nl-tile.link{cursor:pointer}body.nl .nl-tile.link:hover{border-color:var(--teal)}
body.nl .nl-tile.bad b{color:var(--red)}body.nl .nl-tile.warn b{color:var(--amber)}
body.nl .nl-rb{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:16px;align-items:start}
body.nl .nl-main,body.nl .nl-side{display:flex;flex-direction:column;gap:14px;min-width:0}
body.nl .nl-main>.card,body.nl .nl-slot>.card{margin:0}
body.nl .nl-slot:empty{display:none}
@media (max-width:1100px){body.nl .nl-rb{grid-template-columns:1fr}}
body.nl .nl-full{display:flex;flex-direction:column;gap:0;min-width:0}
body.nl .nl-ptabs{margin:2px 0 0}
body.nl .nl-psub{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0 14px}
body.nl .nl-psub button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink2)}
body.nl .nl-psub button.on{background:var(--teal-soft);border-color:var(--teal-soft);color:var(--teal-ink);font-weight:600}
body.nl .nl-board{overflow-x:auto;padding-bottom:6px}
body.nl .nl-board .lp-col{min-width:0}
body.nl .nl-board{display:flex;gap:10px;align-items:flex-start}
/* Every column the same width and together the width of the screen, empty or not (Chris, 1 Nov): a lone full
   column no longer stretches across the page. Below 200px a column each, the board scrolls sideways. */
body.nl .nl-board .lp-col{flex:1 1 0;min-width:200px}
body.nl .nl-card .lp-quiet{margin-right:6px}
body.nl .nl-card.late{border-left:3px solid var(--amber)}
.jb-kit{border:1px solid var(--line);border-radius:9px;padding:6px 10px;max-height:190px;overflow:auto;background:var(--surface2)}

body.nl [data-tour="orders-tabs"]{display:none}
.ask-bg{position:fixed;inset:0;z-index:90;background:rgba(10,20,17,.35);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.ask{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -20px rgba(10,20,17,.45);padding:18px 20px;width:min(460px,100%)}
.ask h3{margin:0 0 8px;font-size:16px}
.ask input,.ask textarea{width:100%;box-sizing:border-box}
.ask .actions{margin-top:12px}
/* Hover for the detail (new layout): the rail on record pages and the peek on board cards */
body.nl .nl-rail{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px}
body.nl .nl-rail-h{font-size:12px;color:var(--ink3);padding:4px 8px 6px}
body.nl .nl-hv{position:relative}
body.nl .nl-hv-b{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
body.nl .nl-hv-b::after{content:"\2039";margin-left:auto;color:var(--ink3);font-size:15px;line-height:1}
body.nl .nl-hv-b i{font-style:normal;font-size:12px;color:var(--ink2);background:var(--line2);border-radius:9px;padding:1px 7px}
body.nl .nl-hv:hover>.nl-hv-b,body.nl .nl-hv.pin>.nl-hv-b,body.nl .nl-hv-b:focus-visible{background:var(--surface2,var(--line2))}
body.nl .nl-hv+.nl-hv{border-top:1px solid var(--line2)}
body.nl .nl-hv-p{position:absolute;right:100%;top:-6px;width:min(480px,55vw);padding-right:10px;z-index:70;visibility:hidden;opacity:0;transition:opacity .12s,visibility 0s linear .12s}
body.nl .nl-hv-p>.card{margin:0;max-height:76vh;overflow:auto;box-shadow:0 18px 40px -18px rgba(20,32,27,.45)}
body.nl .nl-hv.pin>.nl-hv-p,body.nl .nl-hv:has(:focus-visible)>.nl-hv-p{visibility:visible;opacity:1;transition-delay:0s}
@media (hover:hover) and (pointer:fine) and (min-width:1101px){body.nl .nl-hv:hover>.nl-hv-p{visibility:visible;opacity:1;transition:opacity .12s .18s,visibility 0s linear .18s}}
@media (max-width:1100px),(hover:none){body.nl .nl-hv-p{position:static;width:auto;padding:0 0 6px;display:none;visibility:visible;opacity:1}
 body.nl .nl-hv.pin>.nl-hv-p{display:block}body.nl .nl-hv-p>.card{max-height:none;box-shadow:none}body.nl .nl-hv-b::after{content:"\25BE"}}
body.nl .nl-peek{position:fixed;z-index:80;width:320px;max-width:calc(100vw - 16px);background:var(--card,var(--surface));border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(20,32,27,.45);padding:10px 12px;font-size:12.5px;display:none}
body.nl .nl-peek.on{display:block}
body.nl .nl-peek .nl-pk-t{font-weight:600;font-size:13px;margin-bottom:6px}
body.nl .nl-peek dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}
body.nl .nl-peek dt{color:var(--ink3)}body.nl .nl-peek dd{margin:0;min-width:0;overflow-wrap:anywhere}
body.nl .nl-peek .nl-pk-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;border-top:1px solid var(--line2);padding-top:8px}
body.nl .lp-card>template,body.nl .lp-row>template{display:none}
@media (max-width:1180px){body.nl .nl-top{flex-wrap:wrap}body.nl .nl-top .nl-search{flex-basis:100%}}
body.nl .nl-rail-h .nl-on-hv{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1101px){body.nl .nl-rail-h .nl-on-hv{display:inline}body.nl .nl-rail-h .nl-on-tap{display:none}}
/* Duplicate account codes: one short strip */
.card.dupc{width:fit-content;max-width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-left:3px solid var(--red);cursor:pointer}
.card.dupc:hover{border-color:var(--red)}
.card.dupc>b{font-weight:600;font-size:13.5px}
.card.dupc .dupc-l{display:flex;gap:6px;flex-wrap:wrap}
.card.dupc .dupc-l .tag{cursor:pointer;border:1px solid var(--line);font:inherit;font-size:12px}
.card.dupc .dupc-l .tag:hover{border-color:var(--red);color:var(--red)}
.card.dupc>.btn{margin-left:4px}
/* Quick boxes inside the hover */
body.nl .nl-peek .nl-qe{display:flex;gap:6px}body.nl .nl-peek .nl-qe input{flex:1;min-width:0;padding:4px 7px;font-size:12.5px}
body.nl .nl-peek .nl-qf{display:grid;gap:7px}body.nl .nl-peek .nl-qf label{display:grid;gap:2px;font-size:12px;color:var(--ink3);margin:0}
body.nl .nl-peek .nl-qf input,body.nl .nl-peek .nl-qf select{padding:5px 8px;font-size:12.5px;color:var(--ink)}
body.nl .nl-peek .nl-ql{display:grid;gap:4px;margin-top:8px}
body.nl .nl-peek .nl-qa{padding:5px 0;border-bottom:1px solid var(--line2)}
body.nl .nl-peek{width:340px}
body.nl .nl-qk>template,body.nl .need-row>template{display:none}
/* Merges: which account stays and which goes */
.mg-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin:10px 0}
.mg-side{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px}
.mg-side.keep{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 6%,transparent)}
.mg-side.go{border-style:dashed;opacity:.9}
.mg-side .mg-h,.nl-qa-h{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.mg-side.keep .mg-h,.nl-qa.keep .nl-qa-h{color:var(--teal)}.mg-side.go .mg-h,.nl-qa.go .nl-qa-h{color:var(--red)}
.mg-side dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:6px 0 0}.mg-side dt{color:var(--ink3)}.mg-side dd{margin:0}
.mg-arrow{align-self:center;font-size:20px;color:var(--ink3)}
@media (max-width:700px){.mg-sides{grid-template-columns:1fr}.mg-arrow{transform:rotate(90deg);justify-self:center}}
body.nl .nl-peek .nl-qa{display:grid;gap:1px;padding:6px 8px;margin-bottom:6px;border:1px solid var(--line);border-radius:8px}
body.nl .nl-peek .nl-qa.keep{border-color:var(--teal)}body.nl .nl-peek .nl-qa.go{border-style:dashed}
/* One directory: customers, suppliers and trades */
body.nl .dir-list td{vertical-align:top}
body.nl .dir-list .dir-row td:first-child b.nm{font-weight:600}
/* Guide screenshots (A7, 29 October): real screens, figures blurred before capture */
.gd figure.shot,.card figure.shot{margin:10px 0 12px}.gd figure.shot img,.card figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.gd figure.shot.ph img,.card figure.shot.ph img{max-width:300px}.gd figure.shot figcaption,.card figure.shot figcaption{font-size:12px;color:var(--ink3);margin-top:5px}
/* Boards: dragging a card to another stage (28e) */
body.nl .lp-card[draggable="true"]{cursor:grab}body.nl .lp-card.bm-drag{opacity:.45}
.lp-col.bm-over{outline:2px dashed var(--teal);outline-offset:-2px;background:color-mix(in srgb,var(--teal) 6%,transparent)}

/* The client's journey from a quote (16-quotes.js qJourney), the portal's decision bar, and screen touches from the printed look */
.qj{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;counter-reset:qj}
.qj li{position:relative;padding-top:12px;border-top:3px solid var(--line);font-size:12.5px;line-height:1.35}
.qj li span{position:absolute;top:-13px;left:0;width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--ink3)}
.qj li b{display:block;font-weight:600;margin-top:4px;color:var(--ink)} .qj li small{display:block;color:var(--ink3);font-size:12px}
.qj li.done{border-top-color:var(--teal)} .qj li.done span{background:var(--teal);border-color:var(--teal);color:#fff}
.qj li.now{border-top-color:var(--teal)} .qj li.now span{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-soft)} .qj li.now small{color:var(--teal-ink);font-weight:600}
.qr-top{margin-bottom:14px;padding-top:26px}
.qr-bar{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)} .qr-bar b{font-size:18px;font-weight:700;color:var(--ink)}
.qr-bar-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .qr-how{margin:10px 0 0;font-size:13px}
.qr-act{scroll-margin:20px}
@media (max-width:700px){.qj{grid-template-columns:1fr;gap:0}.qj li{border-top:0;border-left:3px solid var(--line);padding:2px 0 12px 20px}.qj li.done,.qj li.now{border-left-color:var(--teal)}.qj li span{top:0;left:-12px}.qr-bar-act{margin-left:0;width:100%}.qr-bar-act .btn{flex:1}}
.qd-num{font-style:normal;font-weight:600;color:#9fd6c6;margin-right:8px;font-size:.95em}
.qd-go{cursor:pointer} .qd-go:hover td{color:#1C7767} .qd-go td{position:relative;padding-bottom:12px} .qd-go td span{padding-left:0}
.qd-bar{position:absolute;left:0;bottom:4px;height:3px;border-radius:2px;background:linear-gradient(90deg,#2E9E80,#9be2d4);max-width:100%}
.qd-sec{scroll-margin:16px}
.qp-online{border:1.5px solid #2E9E80;border-radius:3mm;padding:5mm 6mm;background:#F4F9F7} .qp-online b{display:block;font-size:11pt;color:#16302C;font-weight:600}
.qp-online p{margin:1.5mm 0 3mm;color:#4b5852} .qp-online a{color:#15604E;font-weight:600;text-decoration:underline;text-underline-offset:.6mm}
.qp-how{list-style:none;margin:0 0 3mm;padding:0;display:grid;grid-template-columns:1.25fr 1.2fr 1fr;gap:4mm;font-size:9pt;color:#2f3a35}
.qp-how li{display:flex;gap:2.5mm;align-items:flex-start} .qp-how span{flex:none;width:5.5mm;height:5.5mm;border-radius:50%;background:#16302C;color:#fff;font-size:7.5pt;font-weight:600;display:flex;align-items:center;justify-content:center}
.qp-online strong{font-weight:600;color:#16302C} .qp-online small{font-size:8pt;color:#6e7a74}
.qj-print{--line:#dfe8e4;--teal:#2E9E80;--teal-soft:#DEF5EA;--teal-ink:#15604E;--ink:#16302C;--ink3:#6e7a74;--surface:#fff;margin:9mm 0 7mm}
.qj-print li{font-size:9pt} .qj-print li small{font-size:8pt}
.qp-go{font-size:9.5pt;color:#4b5852;margin:0} .qp-go a{color:#15604E;font-weight:500}
.qd-t td.qd-q input{width:64px;max-width:64px;text-align:right;padding:4px 6px}
@media (max-width:700px){.qd{padding:18px 16px}.qd-head{flex-direction:column;gap:12px}.qd-logo-img{height:auto;width:100%;max-width:240px}.qd-meta h1{text-align:left}.qd-meta dl{justify-content:start}.qd-meta dd{text-align:left}.qd-to{flex-direction:column;gap:12px}}
@media (max-width:700px){.qd-t .qd-uc{font-size:12px;white-space:nowrap}/* the unit price stays on a phone, smaller (audit 11 Nov 2026, D1) */.qd-t td{padding:6px 3px}.qd-ask{flex-direction:column;align-items:stretch}.qd-note-in{min-width:0;width:100%;box-sizing:border-box}.qd-d{word-break:break-word}.qd-t td.qd-q input{width:52px}}
/* Type to find, on every long drop-down (28f-type-to-find.js) */
.ft{position:relative;max-width:100%;vertical-align:middle}
.ft-in{padding-right:28px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7A74' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;text-overflow:ellipsis}
.ft-list{position:fixed;z-index:100000;display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(15,26,22,.18);overflow:auto;padding:4px;font-size:14px}
.ft-o{padding:7px 10px;border-radius:7px;cursor:pointer;color:var(--ink);line-height:1.35} .ft-o.on{background:var(--teal-soft);color:var(--teal-ink)} .ft-o.cur{font-weight:600}
.ft-o.dis{color:var(--ink3);cursor:default} .ft-g{padding:8px 10px 3px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.ft-none{padding:10px;color:var(--ink3)}
body.phone .ft-o{padding:11px 12px}
/* Pinned shortcuts at the top of the menu (28g-pins.js) */
body.nl .nav .pin-g{display:flex;justify-content:space-between;align-items:center;padding-top:6px}
.pin-ed{all:unset;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--teal-ink);padding:2px 6px;border-radius:6px} .pin-ed:hover{background:var(--teal-soft)}
.pin-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 8px 6px}
body.nl .nav .pin-row .pin{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:0;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}
body.nl .nav .pin-row .pin svg{width:19px;height:19px;margin:0}
body.nl .nav .pin-row .pin:hover{border-color:var(--teal);color:var(--teal-ink)} body.nl .nav .pin-row .pin.on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-ink)}
.pin-none{font-size:12px;color:var(--ink3);margin:0;padding:2px 11px 6px;line-height:1.4}
.pin-ic{display:inline-flex;width:18px;height:18px;color:var(--teal-ink);flex:none} .pin-ic svg{width:18px;height:18px}
.pin-mine{border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:12px}
.pin-li{display:flex;align-items:center;gap:8px;padding:4px 0} .pin-li>span:nth-child(2){flex:1}
.pin-pick{max-height:46vh;overflow:auto;columns:2;column-gap:18px} .pin-pick .chk{gap:8px;break-inside:avoid} .pin-gh{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin:10px 0 2px;break-after:avoid}
/* Mail, layout B (06-mail.js mailPage) */
.mail-new{width:100%;justify-content:center;display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:9px 12px} .mail-new svg{width:15px;height:15px}
.mail-srow{display:flex;gap:6px;margin-bottom:6px} .mailx-l .mail-srow #mailq{flex:1;margin:0;min-width:0}
.mail-ref{padding:6px 9px;flex:none} .mail-ref svg{width:16px;height:16px;display:block} .mail-ref.busy svg{animation:mailspin 1s linear infinite}
@keyframes mailspin{to{transform:rotate(360deg)}}
.mail-chips{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 6px} .mail-chips button{font:inherit;font-size:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:999px;padding:3px 10px;cursor:pointer}
.mail-chips button.on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-ink);font-weight:600}
.mail-more summary{list-style:none;padding:3px 10px} .mail-more summary::-webkit-details-marker{display:none} .mail-more .more-pop{right:0;left:auto}
.sig-prev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow:auto;color:#222}
.sig-prev table,.sig-prev tr,.sig-prev td{border:0!important;background-clip:padding-box} .sig-prev tr:hover td{background-color:inherit}
/* CQC on an account and Find practices (28h-cqc.js) */
.cqc-r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line2);font-size:13px} .cqc-r span{color:var(--ink3)} .cqc-r b{font-weight:500;text-align:right}
.cqc-keys{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0} .cqc-keys span{font-size:12px;background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink3)} .cqc-keys b{color:var(--ink);font-weight:600}
.cqc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.cqc-src{font-size:12px;margin:8px 0 0}
.cqc-pick{display:flex;flex-direction:column;gap:4px;max-height:46vh;overflow:auto} .cqc-opt{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.cqc-opt:hover{border-color:var(--teal);background:var(--teal-soft)} .cqc-opt.best{border-color:var(--teal)} .cqc-opt span{color:var(--ink3);font-size:12.5px}

/* Equipment details still needed before a service quote (28j) */
.eqg{border-top:1px solid var(--line2);padding:8px 0 4px}
.eqg:first-of-type{border-top:0}
.eqg-h{font-weight:600;font-size:13.5px;margin-bottom:4px}
.eqg .f{margin:0}
.eqg-card{border-left:3px solid var(--red)}
.eqg-call{background:var(--surface2);border:1px solid var(--line2);border-left:3px solid var(--red);border-radius:10px;padding:10px 12px;margin:6px 0 12px}
/* Supplier pricing maps and price list updates */
.pupd-warn{color:var(--amber);font-size:13px}
.pupd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pupd-body{max-height:56vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.pupd-t{font-size:12.5px} .pupd-t td{vertical-align:top}
.pupd-up{color:var(--red)} .pupd-down{color:var(--teal-ink)}

/* Offer under a quote line (PDF and portal) */
.qp-offer{display:block;color:#9a5b12;font-weight:600}

/* Supplier pricing maps: rules table and drop zone */
.pmap-rules{font-size:12px;border-collapse:collapse;width:100%} .pmap-rules th{font-weight:600;text-align:left;color:var(--ink3);font-size:12px;padding:2px 8px 2px 0} .pmap-rules td{padding:2px 8px 2px 0;vertical-align:top}
.pupd-drop{margin-top:6px;border:1px dashed var(--line);border-radius:8px;padding:6px 8px;font-size:12px;color:var(--ink3);text-align:center;cursor:pointer;white-space:normal;max-width:170px}
.pupd-drop.on{border-color:var(--teal-ink);background:var(--teal-soft,#e6f2ef);color:var(--teal-ink)}
/* Treatment centre configurators */
.cfg-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 12px}
.cfg-tot{display:flex;gap:18px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:10px}
/* Goods in: the barcode scanner (28l-goods-in.js). Sits above a window (z 20) and below the toast (z 30). */
.gi-scan{position:fixed;inset:0;z-index:25;background:#0d1614;color:#fff;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));box-sizing:border-box;overflow:auto}
.gi-scan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.gi-scan-v{position:relative;flex:0 0 auto;width:100%;max-width:560px;margin:0 auto;aspect-ratio:4/3;background:#000;border-radius:14px;overflow:hidden}
.gi-scan-v video{width:100%;height:100%;object-fit:cover;display:block}
.gi-scan-box{position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:3px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.gi-scan-st{text-align:center;margin:10px 0;font-size:14px;opacity:.85}
.gi-scan-man{width:100%;max-width:560px;margin:0 auto;background:var(--surface);color:var(--ink);border-radius:14px;padding:12px;box-sizing:border-box}
.gi-scan-man label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.gi-scan-man input{flex:1;min-width:0;font-size:16px}

/* Client documents in the quote's Studio look (16-quotes.js studioPrint): installation and service certificates, the snag
   list and the handover pack list. Same type, colours, labels and company footer as the printed quote (Chris, 31 October). */
.sd{font-family:'QPoppins','Poppins',Arial,sans-serif;font-weight:300;color:#1d2622;font-size:9.5pt;line-height:1.55;font-variant-numeric:tabular-nums}
.sd,.sd *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box}
.sd td{font-size:inherit} .sd table{font-variant-numeric:tabular-nums}
.sd b,.sd strong{font-weight:500} .sd h1,.sd h2,.sd h3{font-family:inherit;margin:0;color:#16302C}
.sd-page{break-after:page} .sd-page:last-child{break-after:auto}
.sd-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10mm;padding:0 0 5mm;border-bottom:1px solid #16302C}
.sd-logo{width:58mm;display:block;flex:none} .sd-h>div{text-align:right}
.sd-k{font-size:7.5pt;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#2E9E80}
.sd-h h1{font-size:20pt;font-weight:600;letter-spacing:-.4px;line-height:1.15;margin:1mm 0 0}
.sd-h p{margin:1mm 0 0;color:#6e7a74;font-size:9pt}
.sd-facts{display:flex;flex-wrap:wrap;gap:4mm 12mm;padding:4mm 0 0;margin:0 0 7mm;font-size:9.5pt}
.sd-facts span{display:block;font-size:6.8pt;letter-spacing:.18em;text-transform:uppercase;color:#2E9E80;margin-bottom:.8mm}
.sd-intro{font-size:10pt;color:#2f3a35;margin:0 0 6mm;line-height:1.65}
.sd-sec{margin:0 0 7mm} .sd-sec>.sd-k{margin:0 0 2.5mm;padding-bottom:1.5mm;border-bottom:1px solid #dfe8e4;break-after:avoid}
.sd-t{width:100%;border-collapse:collapse;font-size:9pt}
.sd-t th{text-align:left;font-size:6.8pt;letter-spacing:.14em;text-transform:uppercase;color:#93a09a;font-weight:500;border-bottom:1px solid #16302C;padding:0 3mm 1.5mm 0}
.sd-t td{padding:2.4mm 3mm 2.4mm 0;border-bottom:1px solid #edf2ef;vertical-align:top} .sd-t tr{break-inside:avoid}
.sd-t td.sd-n{color:#2E9E80;font-weight:500;white-space:nowrap;width:12mm}
.sd-kv{width:100%;border-collapse:collapse;font-size:9.5pt}
.sd-kv th{width:42%;text-align:left;color:#6e7a74;font-weight:300;font-size:9pt;letter-spacing:0;text-transform:none;padding:1.6mm 4mm 1.6mm 0;border-bottom:1px solid #edf2ef;vertical-align:top} .sd-kv td{padding:1.6mm 0;border-bottom:1px solid #edf2ef;vertical-align:top}
.sd-g{display:grid;grid-template-columns:1fr 1.3fr;gap:10mm}
.sd-pill{display:inline-block;font-size:7pt;letter-spacing:.08em;text-transform:uppercase;padding:.4mm 2mm;border-radius:2mm;background:#EEF8F4;color:#15604E;font-weight:500;white-space:nowrap}
.sd-pill.amber{background:#fbf0e2;color:#9a5b12} .sd-pill.red{background:#fde6e2;color:#a3321f} .sd-pill.grey{background:#eef1f0;color:#6e7a74}
.sd-muted{color:#6e7a74} .sd-small{font-size:8pt;color:#7a8580}
.sd-ph{display:flex;flex-wrap:wrap;gap:2mm;margin-top:2mm} .sd-ph img{width:36mm;height:27mm;object-fit:cover;border-radius:1.5mm;border:1px solid #dfe8e4}
.sd-sig{max-height:18mm;max-width:60mm;display:block;margin:2mm 0}
.sd-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:8mm;margin-top:12mm;font-size:8.5pt;color:#6e7a74;break-inside:avoid} .sd-sign div{border-top:1px solid #16302C;padding-top:1.5mm}
.sd-panel{background:#F4F9F7;border-radius:3mm;padding:5mm 6mm;margin:0 0 7mm;break-inside:avoid}
.sd-co{display:flex;gap:4mm;align-items:center;margin-top:9mm;padding-top:4mm;border-top:1px solid #dfe8e4;font-size:7.8pt;color:#7a8580;break-inside:avoid} .sd-co img{width:9mm} .sd-co b{display:block;color:#1d2622}

/* The printed quote and Studio documents read on a phone: one column, no sideways scroll. Print is unchanged. */
@media screen and (max-width:640px){
.qp,.sd{overflow-x:hidden}
.qp-cover{height:auto;padding:28px 16px 32px}
.qp-mark{display:none}
.qp-logo,.qp-logo-l{width:180px}
.qp-cv{margin:56px 0 28px}.qp-cv h1{font-size:26pt;max-width:100%}
.qp-facts{flex-wrap:wrap;gap:16px 24px}
.qp>section:not(.qp-cover),.qp>div:not(.qp-cover){padding-left:16px;padding-right:16px}
.qp-row{grid-template-columns:1fr;gap:6px}
.qp-how{grid-template-columns:1fr;gap:10px}
.qp-terms ul{columns:1}
.qp-steps{grid-template-columns:1fr}
.qp-hd,.qp-it{grid-template-columns:1fr 34px 64px 72px;gap:6px}
.qp-sum li{grid-template-columns:28px 1fr auto}
.qp-rh{grid-template-columns:1fr;gap:2px}
.qp-num{font-size:13pt;line-height:1.2;letter-spacing:0}
.qp-sum li{overflow:hidden}.qp-sum i{left:28px;max-width:calc(100% - 28px)}
}

/* The full product description under a quote line: folded on screen, a link on the printed quote (16-quotes.js qFullHtml) */
.qd-full{margin-top:4px;font-size:12px;color:#555}
.qd-full summary{cursor:pointer;color:#2E8C76;font-weight:600;font-size:11.5px;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:2px 0}
.qd-full summary::-webkit-details-marker{display:none}
.qd-full summary::before{content:"+";display:inline-block;width:14px;height:14px;line-height:13px;text-align:center;border:1px solid currentColor;border-radius:50%;font-size:11px}
.qd-full[open] summary::before{content:"\2212"}
.qd-full-t{white-space:pre-line;margin:4px 0 2px;padding:7px 9px;background:#F4F9F7;border-left:2px solid #2E8C76;border-radius:0 6px 6px 0;line-height:1.5;overflow-wrap:anywhere}
.qp-d a.qp-more{display:inline-block;margin-top:.8mm;font-size:7.5pt;color:#2E8C76;text-decoration:underline;text-underline-offset:1.5px}
@media print{.qd-full{display:none}}
@media screen and (max-width:640px){.qd-full summary{padding:6px 0;font-size:12.5px}.qd-full-t{font-size:12.5px}.qp-d a.qp-more{font-size:9pt;padding:3px 0}}
/* (audit 11 Nov 2026) A -148px right margin used to sit here for phones; the stacked phone layout below sets
   .qd-t td .qd-full-t{margin-right:0} (higher specificity, same width), so it never applied and could only cause a
   sideways scroll if that block changed. Removed. */

/* ---------- Client portal, 31 October 2026 (Chris, on a phone): an app on a phone, a website on a computer ----------
   Phone first. The top bar of buttons, the module button bars and the Gantt are for wider screens; under 700px the
   portal is a compact header with a back button and a grid of big tiles (22-client-portal.js, portalHero). */
.portal-wrap{max-width:1100px;--pdark:#16302C}
:root[data-theme="dark"] .portal-wrap{--pdark:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .portal-wrap{--pdark:var(--ink)}}
.portal-wrap .only-phone{display:none}
.portal-wrap button:focus-visible,.portal-wrap a:focus-visible,.portal-wrap summary:focus-visible,.portal-wrap input:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:2px}
.phd{margin:0 0 20px}
.ptop{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px 16px}
.plogo{border:0;background:none;padding:4px;margin:-4px;border-radius:8px;line-height:0;justify-self:start;cursor:pointer}
.plogo img{height:auto;max-height:36px;width:auto;max-width:100%;display:block}
.pctl{justify-self:end;position:relative}
.pctl-t{display:none}
.pctl-m{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pctl-m select{font:inherit;font-size:13px;border:1px solid var(--line2);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--ink)}
.pnav-top{grid-column:1/-1;display:flex;gap:2px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px}
.pnav-top button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--ink2);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.pnav-top button svg{width:18px;height:18px;flex:none}
.pnav-top button:hover:not(.on){background:var(--teal-soft);color:var(--teal-ink)}
.pnav-top button.on{background:var(--teal);color:#fff}
.ptitle{display:flex;align-items:center;gap:12px;margin-top:22px}
.pt-txt{min-width:0;flex:1}
.ptitle h1{font-size:28px;margin:2px 0 4px;color:var(--pdark);font-weight:700}
.ptitle .pcrumb{font-size:12.5px}
.psub{margin:2px 0 0;color:var(--ink2);max-width:70ch}
.pback{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--teal-ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.pback svg{width:20px;height:20px}
.pback:hover{border-color:var(--teal)}
.pback.pc-hide{display:none}
/* A module's sections: a bar of buttons, the current one filled */
.portal-wrap>.pnav{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0 0 18px}
.portal-wrap .pnav .pn-b{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink2);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.portal-wrap .pnav .pn-b svg{width:17px;height:17px;flex:none}
.portal-wrap .pnav .pn-b:hover:not(.on){border-color:var(--teal);color:var(--teal-ink)}
.portal-wrap .pnav .pn-b.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* Home */
.ph-top2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:start}
.ph-top2>:only-child{grid-column:1/-1}
.ph-h{font-size:15px;font-weight:600;color:var(--pdark);margin:24px 0 10px}
.pn-list{display:flex;flex-direction:column;gap:8px}
.pn-i,.pco{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:56px;font:inherit;color:var(--ink);cursor:pointer}
.pn-i:hover,.pco:hover{border-color:var(--teal)}
.pn-ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--amber-soft,#FDF1DF);color:var(--amber,#9A5B00);display:flex;align-items:center;justify-content:center}
.pn-ic svg{width:21px;height:21px}
.pn-tx{flex:1;min-width:0}.pn-tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}.pn-tx small{display:block;color:var(--ink3);font-size:12.5px;line-height:1.4;margin-top:1px}
.pn-late{color:var(--red);font-weight:500}
.pn-go{flex:none;color:var(--teal);line-height:0}.pn-go svg{width:18px;height:18px}
.pn-calm{margin:2px 0 0;color:var(--ink2)}
.ps-p+.ps-p{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.ps-n{margin-bottom:6px}.ps-n b{color:var(--pdark)}
.pst-now{margin:0 0 6px;font-size:14px}.pst-now b{color:var(--teal-ink)}
.pst-bar{height:10px}
.ps-next{margin:10px 0}
.ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ptile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;min-height:124px;color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(16,40,32,.04);transition:border-color .15s,box-shadow .15s}
.ptile:hover{border-color:var(--teal);box-shadow:0 4px 14px rgba(16,40,32,.08)}
.pt-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.pt-ic svg{width:24px;height:24px}
.pt-l{font-weight:600;font-size:15px;color:var(--pdark);line-height:1.25}
.pt-s{font-size:12.5px;color:var(--ink3);line-height:1.35}
.pt-n{position:absolute;top:12px;right:12px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--teal);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.pco{background:var(--surface);margin-top:14px;padding:12px 14px}.pco .pt-ic{margin:0;width:40px;height:40px}
.pfoot{margin:18px 0 0;color:var(--ink3);font-size:13px;text-align:center}
.portal-wrap dd.tbc{color:var(--ink3);font-style:italic;font-weight:300}
/* Programme as a list (phone) */
.pp{list-style:none;margin:0;padding:0}
.pp-i{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pp-i:last-child{border-bottom:0}
.pp-dot{flex:none;width:12px;height:12px;border-radius:99px;border:2px solid var(--line2);background:var(--surface)}
.pp-i.done .pp-dot{background:var(--teal);border-color:var(--teal)}
.pp-i.now .pp-dot{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.pp-t{flex:1;min-width:0}.pp-t b{display:block;font-weight:500;font-size:13.5px}.pp-t small{color:var(--ink3);font-size:12.5px}
.pp-m{margin:14px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.pst-all{margin-top:10px}.pst-all summary{cursor:pointer;color:var(--teal-ink);font-weight:500;font-size:13px;min-height:32px;display:flex;align-items:center}
.pst-all ol{margin:6px 0 0;padding-left:22px}.pst-all li{padding:3px 0;color:var(--ink3)}.pst-all li.done{color:var(--ink2)}.pst-all li.now{color:var(--teal-ink);font-weight:600}
/* Ask for an engineer */
.peng-urgent{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--amber-soft,#FDF1DF);color:var(--ink)}
.peng-urgent a{color:var(--teal-ink);white-space:nowrap}
.peng-t{border:0;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.peng-t legend{font-weight:500;margin-bottom:6px;padding:0}
.peng-o{display:flex;align-items:center;gap:10px;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;background:var(--surface);font-weight:500}
.peng-o:has(input:checked){border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink)}
.peng-o input{accent-color:var(--teal);width:18px;height:18px;margin:0;flex:none}
.peng-p{margin:4px 0 12px;color:var(--ink2);font-size:13px}
.psigned{margin:2px 0 10px}
.pempty{text-align:center;padding:26px 20px}
.pempty .pe-ic{width:56px;height:56px;border-radius:16px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}.pempty .pe-ic svg{width:30px;height:30px}
.pempty>h3{justify-content:center}
.pempty p{max-width:52ch;margin:0 auto 16px;color:var(--ink2)}
.pempty .btn{min-height:44px;padding:0 20px}
@media (max-width:1180px){.pnav-top button svg{display:none}}
@media (max-width:900px){.ptiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .app.noside .main{padding:12px 14px 40px !important}
  .portal-wrap .only-pc{display:none}.portal-wrap .only-phone{display:block}
  .phd{margin:0 0 14px}
  .ptop{grid-template-columns:1fr auto}
  .plogo img{max-height:28px}
  .pnav-top{display:none}
  .pctl-t{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;color:var(--ink2);cursor:pointer}
  .pctl-t svg{width:22px;height:22px}
  .pctl-m{display:none;position:absolute;right:0;top:52px;z-index:30;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:210px;box-shadow:0 14px 34px rgba(10,30,25,.18)}
  .pctl.open .pctl-m{display:flex}
  .pctl-m .btn{min-height:44px;font-size:14px;text-align:left}
  .ptitle{margin-top:12px;gap:10px}
  .ptitle:not(.home) .pcrumb,.ptitle:not(.home) .psub{display:none}
  .ptitle h1{font-size:20px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ptitle.home h1{font-size:23px;white-space:normal}
  .ptitle.home .psub{font-size:13px}
  .pback,.pback.pc-hide{display:inline-flex;width:44px;padding:0;justify-content:center}
  .pback span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ph-top2{grid-template-columns:1fr}
  .ptiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ptile{min-height:122px;padding:14px}
  .portal-wrap>.pnav{display:none}
  .portal-wrap>.pnav.land{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
   .portal-wrap .pnav .pn-b{flex-direction:column;justify-content:flex-start;gap:6px;min-height:76px;border-radius:14px;padding:14px 4px 8px;font-size:12px;text-align:center;line-height:1.2}
   .portal-wrap .pnav .pn-b svg{width:24px;height:24px;color:var(--teal-ink)}
   .portal-wrap .pnav .pn-b.on svg{color:#fff}
  .peng-t{grid-template-columns:1fr}
  .portal-wrap table{font-size:13px}
}

/* The portal's lists (quotes, orders, invoices) on a phone: each row a small two-column block, nothing off the side */
@media (max-width:700px){
  .portal-wrap table.pltab,.portal-wrap table.pltab tbody{display:block;width:100%}
  .portal-wrap table.pltab tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}
  .portal-wrap table.pltab tr:last-child{border-bottom:0}
  .portal-wrap table.pltab td{display:block;padding:0;border:0;white-space:normal}
  .portal-wrap table.pltab td:nth-child(1){grid-column:1;grid-row:1}
  .portal-wrap table.pltab td:nth-child(2){grid-column:1;grid-row:2;font-size:12.5px;color:var(--ink3)}
  .portal-wrap table.pltab td:nth-child(2) br{display:none}
  .portal-wrap table.pltab td:nth-child(3){grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  .portal-wrap table.pltab td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  .portal-wrap .card{overflow-x:auto}
}
@media (max-width:700px){.portal-wrap table.pltab td:nth-child(2) .muted{margin-left:6px;font-size:12.5px}}
.portal-wrap a.btn{text-decoration:none}

/* Planner and programme Gantt header, 31 October 2026: with day letters showing, the week label sits on its own line
   above them ("12 Oct week 2") instead of on top of them; a bar too short for its name shows the name beside it */
.pl-row.head.days{height:50px}
.pl-row.head.days .pl-wk{top:0;height:50px;padding-top:5px;box-sizing:border-box;display:flex;align-items:flex-start;gap:5px}
.pl-row.head.days .pl-wk small{display:inline;font-weight:500}
.pl-row.head.days .pl-dl{bottom:4px;line-height:1}
.gbar-out{position:absolute;top:6px;height:22px;line-height:22px;font-size:12px;color:var(--ink2);white-space:nowrap;pointer-events:none;z-index:1}
.gbar-out.done{color:var(--ink3);text-decoration:line-through}
/* The quote reader on a phone, 31 October 2026: each line stacks, the description full width, then the tick and the
   note box across the whole card, then the quantity and the amount on one row. Nothing squeezed into the item column. */
@media screen and (max-width:700px){
  .qd-t,.qd-t tbody{display:block;width:100%}
  .qd-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;border-bottom:1px solid #f0f0f0;padding:10px 0}
  .qd-t tr:has(th){display:none}
  .qd-t td{display:block;border:0;padding:0}
  .qd-t .qd-uc{display:none}
  .qd-t td.qd-d{grid-column:1/-1}
  .qd-t td .qd-full-t{margin-right:0}
  .qd-t td.qd-q{grid-column:1;grid-row:2;width:auto;text-align:left;margin-top:10px;display:flex;align-items:center;gap:8px}
  .qd-t td.qd-q::before{content:"Qty";font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#888;font-weight:600}
  .qd-t td.qd-q input{width:72px;max-width:72px;min-height:40px;font-size:16px;box-sizing:border-box}
  .qd-t tr:not(.qd-st):not(.qd-note) td.qd-m:last-child{grid-column:2;grid-row:2;margin-top:10px;width:auto;font-weight:600}
  .qd-t tr.qd-st td:first-child{grid-column:1;grid-row:1}
  .qd-t tr.qd-st td.qd-m:last-child{grid-column:2;grid-row:1;width:auto}
  .qd-t tr.qd-note td{grid-column:1/-1}
  .qd-t .qd-ask{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
  .qd-t .qd-note-in{flex:1 1 100%;width:100%;min-width:0;box-sizing:border-box;font-size:16px;min-height:42px;padding:8px 10px}
  .qd-t .qd-ask label{min-height:32px}
}

/* Invoices: "I've already paid this" and the query note (31 October 2026) */
.pinv-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pinv-thanks{margin:0 0 12px;color:var(--teal-ink)}
.pinv-thanks .tag{margin-left:4px}
/* The sticky label column is solid, so a bar that starts before the visible weeks slides under it, not over the name */
.pl-row>.pl-lab{background:var(--surface)}.pl-row.grp>.pl-lab{background:var(--surface2)}
/* Invoice statuses in the portal (31 October 2026): one pill per invoice, in the order paid, failed, sent, overdue, due */
.pinv-pill{display:inline-block;border-radius:10px;padding:3px 10px;font-size:12px;font-weight:500;line-height:1.45;text-align:left;max-width:260px}
.pinv-pill.teal{background:var(--teal-soft);color:var(--teal-ink)}
.pinv-pill.blue{background:var(--blue-soft);color:var(--blue)}
.pinv-pill.amber{background:var(--amber-soft);color:var(--amber)}
.pinv-pill.red{background:var(--red-soft);color:var(--red);font-weight:600}
.pinv-pill.grey{background:var(--grey-soft);color:var(--ink2)}
.pinv-one>.pinv-pill{max-width:none;font-size:13px}
.pinv-msg{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5}
.pinv-msg.red{background:var(--red-soft);color:var(--red);font-weight:500;border-left:4px solid var(--red)}
.pinv-msg.blue{background:var(--blue-soft);color:var(--ink)}
.pinv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.pinv-btns .btn{min-height:40px;display:inline-flex;align-items:center}
.pq-rs{border:0;margin:0 0 10px;padding:0;display:grid;gap:4px}
.pq-rs .chk{min-height:36px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:0}
.pq-rs .chk:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.pq-lg{font-weight:500;margin-bottom:6px;padding:0}
.pq-how{grid-template-columns:1fr;margin-bottom:10px}
.si-pay{background:var(--blue-soft);color:var(--ink);border-left:4px solid var(--blue);margin-bottom:8px}
.si-fail{background:var(--red-soft);color:var(--ink);border-left:4px solid var(--red);margin-bottom:8px}
.sd .pinv-pt th{font-size:8pt;text-transform:uppercase;letter-spacing:.06em;color:#6b7772;text-align:left;padding:2mm 1.5mm;border-bottom:.3mm solid #cfd8d4}
.sd .pinv-ptot{width:70mm;margin:4mm 0 6mm auto}
@media (max-width:700px){.pinv-pill{max-width:190px}.pinv-act .btn.sm{white-space:nowrap}}
@media (max-width:700px){.pinv-act .pinv-dl{display:none}}/* on a phone, open the invoice to download it */
.pinv-bank{margin-top:8px;padding:8px 10px;background:var(--surface);border-radius:8px;color:var(--ink);font-size:13.5px;line-height:1.5}
/* Account page, Contacts card: long emails wrap, and edit and remove stay inside the card (31 October 2026) */
[data-tour="account-contacts"] td,[data-tour="account-contacts"] dd{overflow-wrap:anywhere;min-width:0}
[data-tour="account-contacts"] td.right{white-space:nowrap;width:1%}
/* ---------- The full app on a phone (1 Nov) ----------
   The sidebar is a drawer behind Menu at tablet and phone widths, never a strip across the bottom. Tables too wide
   for the screen become one card per row (phFit in 14-phone.js labels each value with its column). */
.nl-menubtn{display:none}
@media (max-width:900px){
  body:not(.phone) .side{position:fixed;top:0;bottom:0;left:0;right:auto;width:min(300px,86vw);height:100%;flex-direction:column;padding:16px 13px 13px;border-top:0;border-right:1px solid var(--line);z-index:30;overflow-y:auto;transform:translateX(-105%);transition:transform .2s ease;background:var(--surface);visibility:hidden}
  body.navopen:not(.phone) .side{transform:none;visibility:visible;box-shadow:0 0 0 100vmax rgba(10,20,17,.42)}
  body:not(.phone) .side .brand{display:block}body:not(.phone) .side .foot{display:block}
  body:not(.phone) .nav{flex-direction:column}
  body:not(.phone) .nav button{height:auto;font-size:14px;min-height:42px}
  body:not(.phone) .main{padding-bottom:40px!important}
  body.nl .nl-top .nl-menubtn{display:inline-flex;align-items:center;gap:6px}
  /* header bleeds to the page edge by the main padding (16px here), not 28px: was a 12px sideways scroll on tablets (audit 11 Nov 2026) */
  body.nl .nl-top{margin:0 -16px 14px;padding:10px 16px}
  .nl-menubtn svg{width:18px;height:18px}
}
@media (max-width:760px){
  body:not(.phone) .main{padding:10px 12px 40px!important;overflow-x:clip}
  body.nl .nl-top{position:static;flex-wrap:wrap;gap:6px;margin:0 -12px 10px;padding:8px 12px}
  body.nl .nl-top .nl-search{order:2;flex:1 1 100%;min-width:0}
  body.nl .nl-top .nl-logc,body.nl .nl-top .nl-mail,body.nl .nl-top .nl-helpm,body.nl .nl-top .nl-ico{display:none}
  body.nl .nl-top .nl-menubtn{order:0}
  body.nl .userbar.in-top{margin-left:auto}
  body.nl .userbar.in-top .tour-q{display:none}
  .subnav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subnav button{flex:none}
  .ph-backbar{margin:6px 0 10px;padding:4px 4px 4px 12px;font-size:13px}
  .ph-backbar .btn{min-height:38px}
  #main h1{font-size:24px}
  #main table.phc,#main table.phc>tbody,#main table.phc>tbody>tr,#main table.phc>tr,#main table.phc>tfoot,#main table.phc>tfoot>tr,
  #modalBody table.phc,#modalBody table.phc>tbody,#modalBody table.phc>tbody>tr,#modalBody table.phc>tfoot,#modalBody table.phc>tfoot>tr{display:block;width:auto!important;min-width:0!important}
  table.phc>thead,table.phc tr.phc-h{display:none!important}
  table.phc>tbody>tr,table.phc>tfoot>tr{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 8px;background:var(--surface)}
  table.phc>tbody>tr>td,table.phc>tbody>tr>th,table.phc>tfoot>tr>td,table.phc>tfoot>tr>th{display:block;border:0!important;padding:3px 0!important;text-align:left!important;white-space:normal!important;width:auto!important;max-width:none!important;min-width:0!important;position:relative;overflow-wrap:anywhere}
  table.phc td[data-l],table.phc th[data-l]{padding-left:38%!important;min-height:22px}
  table.phc td[data-l]::before,table.phc th[data-l]::before{content:attr(data-l);position:absolute;left:0;top:4px;width:35%;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.phc td:empty,table.phc td[data-l]:empty{display:none}
  table.phc>tbody>tr>td:first-child:not([data-l]){font-weight:600}
  table.phc td[data-l="Description" i],table.phc td[data-l="Item" i],table.phc td[data-l="Task" i]{padding-left:0!important;padding-top:20px!important}
  table.phc td[data-l="Description" i]::before,table.phc td[data-l="Item" i]::before,table.phc td[data-l="Task" i]::before{width:100%;top:3px}
  body.nl .nl-rh{flex-direction:column;gap:10px}
  body.nl .nl-rh-l{flex:none;width:100%}
  body.nl .nl-rh h1{font-size:22px}
  body.nl .nl-act{flex-wrap:wrap}
  body.nl .nl-stages{overflow-x:auto;scrollbar-width:none}
  body.nl .nl-stages span{flex:none;white-space:nowrap;padding:6px 10px}
  body.nl .userbar.in-top .featb{display:none}
  body.nl .nl-top>.btn,body.nl .nl-top .nl-menu>summary{padding:7px 10px}
  body:not(.phone) .sync[data-st="ok"]{display:none}
  table.phc input:not([type=checkbox]):not([type=radio]),table.phc select,table.phc textarea{max-width:100%;width:100%!important;box-sizing:border-box;font-size:16px}
}
.ph-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.ph-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
.ph-tile svg{width:26px;height:26px;color:var(--teal)}
.ph-tile:active{background:var(--teal-soft)}
.ph-tile i{position:absolute;top:6px;right:8px;font-style:normal;font-size:12px;font-weight:700;min-width:18px;height:18px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;padding:0 5px}
/* The quote editor: the code sits above the description, so the description has the room (1 Nov) */
.qlines .qcode{display:flex;gap:6px;flex-wrap:wrap;align-items:center;line-height:1.3}
.qlines .qcode:empty{display:none}
/* The week calendar on a phone: a day strip, then the chosen day in full (1 Nov) */
.ecal-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ecal-strip button{display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:transparent;color:var(--ink);font:inherit;padding:6px 0 4px;border-radius:10px;cursor:pointer;min-height:56px}
.ecal-strip small{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.03em}
.ecal-strip b{font-size:17px;font-weight:600;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:999px}
.ecal-strip button.today b{color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal)}
.ecal-strip button.on b{background:var(--teal);color:#fff;box-shadow:none}
.ecal-strip i{width:5px;height:5px;border-radius:999px;background:transparent}
.ecal-strip i.dot{background:var(--teal)}
.ecal.week.one{grid-template-columns:minmax(0,1fr)!important}
.ecal.week.one .ecal-day{min-height:160px;cursor:default;border:0;box-shadow:none!important;outline:0!important;padding:4px 2px}
.ecal.week.one .ecal-day .dn{font-size:15px;color:var(--ink);margin-bottom:6px}
.ecal.week.one .ev{white-space:normal;font-size:13.5px;padding:6px 8px;margin:4px 0;border-radius:8px}

/* The logo never stretches: wherever a box ends up narrower or taller than the logo, it scales to fit instead (1 Nov). */
img[src*="/brand/logo"],img[src*="/brand/mark"]{object-fit:contain}

/* Upload and file (1 Nov): the drop zone and the review table. */
.fil-drop{border:2px dashed var(--line);border-radius:12px;padding:48px 16px;min-height:170px;justify-content:center;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-align:center;background:var(--bg)}
.fil-drop:hover,.fil-drop.fil-over{border-color:var(--teal,#2E9E80);background:rgba(46,158,128,.07)}
.fil-t td{vertical-align:top}.fil-t select{max-width:100%}
.fil-t tr.fil-done{opacity:.6}

/* Go live switchboard (28o-golive.js) */
.gl-master.gl-on{border-left:4px solid var(--teal,#2E9E80)}.gl-master.gl-off{border-left:4px solid var(--red,#c0392b)}
.gl-big{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gl-seg button:disabled{opacity:.45;cursor:default}.gl-seg button.on:disabled{opacity:1}.gl-seg button.on.gl-live{background:var(--teal,#2E9E80);color:#fff}.gl-seg button.on.gl-off{background:var(--red,#c0392b);color:#fff}
.gl-t td{vertical-align:top}
.gl-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;background:var(--red,#c0392b);color:#fff;padding:8px 14px;border-radius:10px;font-size:13.5px;box-shadow:0 4px 14px rgba(0,0,0,.2);display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px)}
.gl-bar button{background:#fff;color:var(--red,#c0392b);border:0;border-radius:6px;padding:4px 10px;font-weight:600;cursor:pointer}

/* Settings hover explanations */
.set-help{cursor:help}
.set-help::after{content:" ⓘ";font-size:12px;font-weight:400;color:var(--muted,#888)}
.fil-ico{font-size:34px;line-height:1;color:var(--teal,#2E9E80);margin-bottom:6px}

/* Team and access: the whole team in a table, one person in a side panel (28p-team.js) */
.tt-wrap{display:flex;gap:14px;align-items:flex-start}.tt-list{flex:1;min-width:0}.tt-panel{width:460px;flex:none;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.tt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.tt-title{font:600 16px Poppins,Arial;cursor:help}
.tt-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.tt-acts .set-find{width:200px;margin:0}
.tt-t{width:100%;border-collapse:collapse;font-size:14px}.tt-t th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7472);padding:8px;border-bottom:1px solid var(--line);cursor:help;white-space:nowrap}
.tt-h{border-bottom:1px dotted currentColor}
.tt-t td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.tt-row{cursor:pointer}.tt-row:hover{background:rgba(46,158,128,.05)}.tt-row.on{background:rgba(46,158,128,.12)}
.tt-g td{font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7472);padding-top:16px;cursor:default;background:none}
.tt-p{display:flex;gap:10px;align-items:center}.tt-p .muted{font-size:12px}.tt-yes{color:var(--teal,#2E9E80);font-weight:700}.tt-no{color:var(--muted,#9aa3a1)}
.tt-sw{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card,#fff);border-radius:20px;padding:3px 10px 3px 4px;font:600 12.5px inherit;cursor:pointer;color:inherit}
.tt-sw i{width:26px;height:16px;border-radius:10px;background:#cfd6d4;position:relative;transition:.15s}.tt-sw i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.15s}
.tt-sw.on i{background:var(--teal,#2E9E80)}.tt-sw.on i::after{left:12px}.tt-sw:disabled{cursor:default;opacity:.8}.tt-sw.lg{font-size:14px;padding:5px 14px 5px 6px}
.tt-ph{display:flex;gap:12px;align-items:center;margin-bottom:6px}.tt-ph h2{margin:0;font-size:18px}.tt-ph small{color:var(--muted,#6b7472)}
.tt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0 14px;flex-wrap:wrap}.tt-tabs button{background:none;border:0;padding:8px 7px;font:600 13px inherit;color:var(--muted,#6b7472);cursor:pointer;border-bottom:2.5px solid transparent}
.tt-tabs button.on{color:var(--teal-d,#1d5c4f);border-bottom-color:var(--teal-d,#1d5c4f)}
.tt-q{font:600 14.5px Poppins,Arial;cursor:help}.tt-i{font-size:12px;color:var(--muted,#9aa3a1);font-weight:400}
.tt-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tt-opt{display:flex;gap:8px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;font-size:13.5px}
.tt-opt.on{border-color:var(--teal,#2E9E80);background:rgba(46,158,128,.08)}.tt-opt small{display:block;color:var(--muted,#6b7472);font-size:12px;font-weight:400;margin-top:2px}.tt-opt input{margin-top:3px}
@media (max-width:1000px){.tt-wrap{flex-direction:column}.tt-panel{width:auto;position:static;max-height:none}.tt-opts{grid-template-columns:1fr}}
.tt-wrap.open .tt-c-does,.tt-wrap.open .tt-c-spends{display:none}.tt-p b{white-space:nowrap}.tt-panel{width:440px}
/* Client chat window in the portal (Chris, 4 Nov 2026): a round bubble bottom-right on every portal page; a ~380px panel on
   a computer, full screen on a phone. Shared file styles (cc-) are used by the staff Client messages page too. */
.pchat-b{position:fixed;right:20px;bottom:20px;z-index:900;width:60px;height:60px;border-radius:50%;border:0;background:var(--teal);color:#fff;box-shadow:0 6px 20px rgba(16,40,32,.25);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pchat-b svg{width:28px;height:28px}.pchat-b.on{background:var(--teal2)}
.pchat-n{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--red,#C9443A);color:#fff;font:700 12px/22px Poppins,Arial;text-align:center}
.pchat-p{position:fixed;right:20px;bottom:92px;z-index:901;width:380px;max-width:calc(100vw - 32px);height:min(640px,calc(100vh - 120px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(16,40,32,.22);display:flex;flex-direction:column;overflow:hidden}
.pchat-p[hidden]{display:none}
.pc-top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--teal);color:#fff}.pc-tt{display:flex;align-items:center;gap:6px}
.pc-ib{background:transparent;border:0;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:2px 8px}
.pc-hd{padding:8px 12px;border-bottom:1px solid var(--line2);font-size:13px}.pc-body{padding:14px;overflow:auto;flex:1}
.pc-h{margin:6px 0 10px}.pc-who-list{display:flex;flex-direction:column;gap:8px}
.pc-dept{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);font:inherit;cursor:pointer}
.pc-dept:hover{border-color:var(--teal)}.pc-dept small{color:var(--ink3)}
.pc-msgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.pc-msg{max-width:84%;border:1px solid var(--line2);border-radius:12px;padding:7px 10px;background:var(--surface2)}.pc-msg.me{align-self:flex-end;background:var(--teal-soft)}.pc-msg.us{align-self:flex-start}
.pc-who{font-size:12px;color:var(--ink3);margin-bottom:2px}.pc-text{white-space:pre-wrap;word-break:break-word}
.pc-end{align-self:center;font-size:12px;color:var(--ink3);text-align:center;padding:4px 8px}.pc-empty{margin:0}
.pc-foot{border-top:1px solid var(--line2);padding:8px 10px}.pc-send{display:flex;gap:6px;align-items:flex-end}.pc-send textarea{flex:1;min-height:44px;resize:vertical}
.pc-note{font-size:12px;color:var(--ink3);margin:6px 0 0}.pc-lab{display:block;font-size:12.5px;margin:0 0 4px}.pc-prline{margin-bottom:6px}
.cc-attach{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px}.cc-attach label{cursor:pointer}.rec-on{border-color:var(--red,#C9443A)!important;color:var(--red,#C9443A)!important}
.cc-pending{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}.cc-x{border:0;background:transparent;cursor:pointer;font-size:15px;padding:0 2px;color:inherit}
.cc-img{display:block;border:0;padding:0;margin:6px 0 0;background:transparent;cursor:zoom-in}.cc-img img{max-width:220px;max-height:220px;border-radius:8px;display:block}
.cc-file{margin:6px 0 0}.cc-file audio{width:220px;max-width:100%;display:block}.cc-file video{width:240px;max-width:100%;border-radius:8px;display:block}.cc-file small{display:block}
@media (max-width:700px){.pchat-b{right:14px;bottom:14px}.pchat-p{right:0;bottom:0;left:0;top:0;width:100%;max-width:none;height:100%;border-radius:0;border:0}body.pchat-full{overflow:hidden}}
@media (min-width:701px){body.pchat-full{overflow:auto}}

/* ===== Option C type (Chris, 5 Nov 2026): "the font reads like a template AI setting... I like Poppins but the smaller
   writing is hard to read". Poppins stays for headings, figures and the brand; everything you read is Atkinson
   Hyperlegible Next (fonts/, SIL OFL), designed for low vision, so small text stays clear on a phone on site.
   Nothing under 12px in the app (the client documents .qd and .qp keep their own type), greys that pass contrast.
   Checked page by page in the sandbox with checks/shots.js. ===== */
:root{--sans:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--head:'Poppins',system-ui,sans-serif;--ink:#101B17;--ink2:#3D4A44;--ink3:#56635D}
:root[data-theme="dark"]{--ink:#ECF3EF;--ink2:#C6D3CD;--ink3:#A0AEA7}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink:#ECF3EF;--ink2:#C6D3CD;--ink3:#A0AEA7}}
html,body{font-size:15px;line-height:1.55;font-weight:400;font-variant-numeric:tabular-nums}
b,strong,th,label,.btn,.tag,.subnav button,.nav button{font-weight:600}
h1,h2,h3,h4,.stat .n,.nl-g{font-family:var(--head)}
h1{font-size:24px;font-weight:600}h2{font-size:19px;font-weight:600}h3{font-size:15.5px;font-weight:600}h4{font-size:14px}
.card>h3{font-size:15.5px;font-weight:600}
.card>h3 .btn,.card>h3 .btn.ghost{font-size:13.5px;font-family:var(--sans);font-weight:600}
.muted{color:var(--ink3);font-size:14px}
.btn{font-size:14.5px;font-weight:600}
.tag{font-size:12.5px;font-weight:600}
th{font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:.02em}
.subnav button{font-size:14px;color:var(--ink2);font-weight:500}.subnav button.on{font-weight:700}
.nav button{font-size:14.5px}
.nav button .badge{font-size:12px}
.nl-g{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink3)}
.f input,.f select,.f textarea,.sf input,.sf select,.sf textarea,.pf input,.pf select,.pf textarea{font-size:15px}
input,select,textarea{font-family:var(--sans)}
/* Inline sizes under 12px written into the page templates are raised to 12px in the app itself, never inside a client document */
:is(#main,#modal,.side,.nl-top,#toast) :is([style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"]):not(:is(.qd,.qp,.qd *,.qp *)){font-size:12px!important}
/* The menu's hover panel (28ze-nav-flyout.js) */
.nlfly{position:fixed;z-index:60;min-width:200px;max-width:300px;max-height:calc(100vh - 16px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 32px rgba(15,26,22,.14);padding:6px;display:flex;flex-direction:column;gap:2px}
.nlfly[hidden]{display:none}
.nlfly button{display:block;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:9px 12px;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.nlfly button:hover,.nlfly button:focus-visible{background:var(--surface2);color:var(--teal-ink);outline:none}
/* keyboard focus needs more than a near-white background change (audit 11 Nov 2026) */
.nlfly button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
/* <small> and sizes in em under 12px follow the same floor */
:is(#main,#modal,.side,.nl-top) small:not(:is(.qd *,.qp *)){font-size:max(12px,.85em)}
/* Our Partners (28zf-partners.js, 8 Nov 2026) */
.ptn-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}.ptn-chips button{border:1px solid var(--line);background:var(--surface);color:var(--ink2);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer}.ptn-chips button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.ptn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ptn-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.ptn-h{display:flex;gap:12px;align-items:center}.ptn-h img,.ptn-ph{width:52px;height:52px;border-radius:12px;background:var(--mint);object-fit:contain;flex:none}.ptn-ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--teal-ink);font-size:18px}
.ptn-n{display:block;font-size:17px;color:var(--ink)}.ptn-tag{display:inline-block;margin-top:3px;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-weight:500}
.ptn-who{margin:4px 0 0;color:var(--ink2);font-size:14px}.ptn-ul{margin:0;padding-left:18px;color:var(--ink2);font-size:14px}.ptn-area{margin:0;color:var(--ink3);font-size:13px}
.ptn-offer{background:var(--amber-soft);color:var(--amber);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500}
.ptn-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}.ptn-act .btn{text-decoration:none;width:auto;margin:0}

/* Statement of account (28zg) */
.stmt-bal{font-size:20px;font-weight:600;padding:10px 14px;border-radius:10px;background:var(--bg2,#f3f5f4)}
.stmt-bal.due{color:var(--red)}.stmt-bal.ok{color:var(--teal)}
.stmt-wrap{overflow-x:auto}.stmt-wrap table{margin-bottom:14px;min-width:560px}
.stmt-t th,.stmt-t td,.stmt-pt th,.stmt-pt td{padding:6px 8px;font-size:13px}
.stmt-sub td{border-top:2px solid var(--line);font-weight:500}
.stmt-tot{max-width:380px;margin-left:auto}
.stmt-age th{font-size:11.5px;color:var(--ink3);font-weight:500}
.stmt-late{color:var(--red);font-size:11.5px}
.stmt-h4{margin:14px 0 4px}
.sd .stmt-pt{margin-bottom:5mm}.sd .stmt-tot{width:75mm;margin-left:auto}

/* Documents, tiered (22c) */
.dt{margin-top:8px}.dt-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 6px;font-size:12.5px}
.dt-view{display:flex;gap:6px;margin:8px 0 4px;flex-wrap:wrap}.dt-view .btn.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.dt-tier,.dt-room{border:1px solid var(--line);border-radius:10px;margin:6px 0;background:var(--card,transparent)}
.dt-room{margin:4px 8px 6px;border-color:var(--line2)}
.dt-head{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:10px 12px;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.dt-head.sub{padding:8px 10px}.dt-head .cnt{margin-left:auto;color:var(--ink3);font-size:12.5px;font-weight:400;text-align:right}
.dt-chev{width:12px;color:var(--ink3)}
.dt-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line2)}
.dt-main{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:220px}.dt-main small{display:block;color:var(--ink3);font-size:12px}
.dt-no{font-family:var(--mono,monospace);font-size:12px;color:var(--teal);min-width:38px;padding-top:2px}
.dt-old-btn{background:none;border:0;padding:2px 0;color:var(--teal);font-size:12px;cursor:pointer;text-decoration:underline}
.dt-old{flex-basis:100%;margin:2px 0 0 48px;border-left:2px solid var(--line);padding-left:10px}
.dt-oldrow{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:4px 0;font-size:12.5px;color:var(--ink2)}.dt-oldrow small{display:block;color:var(--ink3)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:4px 12px 10px}
.ph-cell{aspect-ratio:4/3;border:1px solid var(--line);border-radius:8px;overflow:hidden;padding:0;background:var(--bg2,#eef1ef);cursor:pointer}
.ph-cell img{width:100%;height:100%;object-fit:cover;display:block}.ph-ph{font-size:12px;color:var(--ink3)}
.folder b.link{cursor:pointer}.folder .cnt.link{cursor:pointer}
@media (max-width:767px){.ph-grid{grid-template-columns:repeat(3,1fr)}.dt-old{margin-left:10px}}
/* Parts of a project (28zh-project-parts.js): cards under the timeline (layout A), lanes on the projects list (layout B) */
.pt-wrap{margin:10px 0 14px}
.pt-hd h3{margin:0 0 8px;font-size:16px}
.pt-cards{display:grid;gap:12px}
.pt-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;position:relative;min-width:0}
.pt-card:hover{border-color:var(--teal)}.pt-card.on{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.pt-card h4{margin:0;font-size:12px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pt-now{font-size:15.5px;font-weight:700;margin:6px 0 2px;color:var(--ink);line-height:1.25;overflow-wrap:anywhere}
.pt-bar{height:6px;border-radius:9px;background:var(--surface2);margin:8px 0 6px;overflow:hidden}.pt-bar i{display:block;height:100%;background:var(--teal)}
.pt-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink3)}
.pt-vo{position:absolute;top:10px;right:12px;font-size:11.5px;font-weight:700;color:var(--amber)}
.pt-w{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;display:inline-block}
.pt-w.c{background:var(--amber-soft);color:var(--amber)}.pt-w.u,.pt-w.d{background:var(--teal-soft);color:var(--teal-ink)}
.pt-w.s{background:var(--blue-soft,#e6f0fb);color:var(--blue,#2b6cb0)}.pt-w.g{background:var(--surface2);color:var(--ink3)}
.pt-prop-note{font-size:12.5px;color:var(--amber);margin:8px 2px 0}
.pt-detail{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;margin-top:12px;align-items:start}
.pt-list{margin:0;padding:0;list-style:none}
.pt-list li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pt-list li:last-child{border-bottom:0}.pt-list li:hover b{color:var(--teal-ink)}
.pt-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);box-sizing:border-box}
.pt-list li.done .pt-dot{background:var(--teal);border-color:var(--teal)}.pt-list li.now .pt-dot{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.pt-list li.done b{color:var(--ink3);font-weight:500}.pt-sub{font-size:12.5px;color:var(--ink3);margin-top:2px}
.pt-lane{min-width:260px}.pt-track{display:flex;align-items:center}
.pt-track i{flex:1;height:3px;background:var(--line)}.pt-track i.d{background:var(--teal)}
.pt-track b{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--surface);flex:none;box-sizing:border-box}
.pt-track b.d{background:var(--teal);border-color:var(--teal)}.pt-track b.n{width:16px;height:16px;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.pt-lab{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:5px;gap:8px}
@media (max-width:900px){.pt-cards{grid-template-columns:1fr 1fr!important}.pt-detail{grid-template-columns:1fr}}
/* Your team, client portal (22e-portal-team.js, 10 Nov 2026) */
.ptm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.ptm-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.ptm-who{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}.ptm-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ptm-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ptm-levels{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;align-items:center}
.ptm-areas{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.ptm-area{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line);font-weight:400}
.ptm-area input{margin-top:3px}.ptm-area.off{opacity:.6}.ptm-area b{font-weight:600}
.ptm-prs{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
@media (max-width:640px){.ptm-areas{grid-template-columns:1fr}.ptm-side{text-align:left;align-items:flex-start;flex-basis:100%}.ptm-acts{justify-content:flex-start}}
/* Interior design stage bar with its three payment gates (App Build Brief, 10 Nov 2026) */
.id-flow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px;align-items:center}
.id-flow .id-st{padding:6px 10px;border-radius:999px;background:var(--bg2,#eef1ee);font-size:12.5px;color:var(--muted)}
.id-flow .id-st.done{background:color-mix(in srgb,var(--teal,#2a9d7c) 14%,transparent);color:var(--ink)}
.id-flow .id-st.now{background:var(--teal,#2a9d7c);color:#fff;font-weight:600}
.id-flow .id-gate,.id-flow .id-gate3{display:inline-flex;align-items:center;gap:5px}
.id-flow .id-gate{padding:5px 9px;border-radius:8px;border:1.5px dashed var(--amber,#c98a1a);color:var(--amber,#c98a1a);font-size:12px;font-weight:600}
.id-flow .id-gate.open{border-style:solid;border-color:var(--teal,#2a9d7c);color:var(--teal,#2a9d7c)}
.id-flow small{font-size:10px;text-transform:uppercase;letter-spacing:.04em;opacity:.8}
.id-areas select{max-width:150px}
.id-tots{display:flex;flex-wrap:wrap;gap:18px;margin:8px 0;font-size:13px}
.id-tots div{display:flex;flex-direction:column;gap:2px}
/* A tick box inside a form grid keeps its own size and sits beside its label (Chris, 10 Nov 2026: the quote's
   "This quote starts the project" box was stretched to full width, so it sat in the middle of the screen) */
.f input[type=checkbox],.f input[type=radio]{width:auto;flex:0 0 auto;padding:0}
.f .chk label{display:inline}
/* Scope of Service documents (19d-scope-docs.js): the quote's Studio look, for written pages */
.sc .qp-cv h1{font-size:40pt}
.sc .qp-for{font-size:12pt;max-width:140mm}
.sc-row{display:block;break-inside:auto;padding-bottom:8mm} .sc-row+.sc-row{padding-top:8mm} .sc .qp-co{margin-top:4mm} .sc-row:after{content:"";display:block;clear:both} .sc-row>.qp-lab{float:left;width:38mm} .sc-row>.sc-body{margin-left:46mm}
.sc-body p{font-size:10pt;line-height:1.68}
.sc-body>p:first-child{font-size:11pt;color:#16302C}
.sc-h3{font-size:13pt;font-weight:600;color:#16302C;margin:0 0 1.5mm;letter-spacing:-.2px}
.sc-steps{list-style:none;margin:5mm 0 0;padding:0}
.sc-steps li{display:grid;grid-template-columns:14mm 1fr;padding:3.5mm 0;border-top:1px solid #e6eeea;break-inside:avoid;font-size:10pt;line-height:1.6;color:#2f3a35}
.sc-steps li span{font-size:18pt;font-weight:600;color:#cfe9e1;line-height:1}
.sc-steps b{color:#16302C}
.sc-ul{list-style:none;margin:2mm 0 4mm;padding:0}
.sc-ul li{position:relative;padding:2.2mm 0 2.2mm 6mm;border-bottom:1px solid #edf2ef;font-size:9.8pt;line-height:1.6;color:#2f3a35;break-inside:avoid}
.sc-ul li:before{content:"";position:absolute;left:0;top:4.4mm;width:2mm;height:2mm;border-radius:50%;background:#2E9E80}
.sc-ul b{color:#16302C}
.sc-panel{background:linear-gradient(120deg,#EEF8F4,#dff3ec);border-radius:3mm;padding:6mm 7mm;margin:3mm 0 5mm;font-size:10pt;line-height:1.65;color:#2f3a35;break-inside:avoid}
.sc-panel b{color:#15604E}
.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:7mm;margin:5mm 0}
.sc-col{border-top:2px solid #2E9E80;padding-top:4mm;break-inside:avoid}
.sc-col>p{font-size:9.5pt;color:#5b6861;margin:0 0 2mm}
.sc-fig{margin:4mm 0 2mm;break-inside:avoid} .sc-fig img{width:100%;border-radius:3mm;display:block}
.sc-fig figcaption{font-size:8.3pt;color:#6e7a74;margin-top:2.5mm;line-height:1.5}
/* Multi-site band on an account (28b accSitesBand, ticket T031) */
.acc-sites{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--radius);background:color-mix(in srgb,var(--teal) 6%,var(--surface))}
.acc-sites-l{font-size:12px;font-weight:600;margin-right:4px}
.acc-site{font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:inherit;text-decoration:none}
.acc-site small{color:var(--muted);font-size:11px}
a.acc-site:hover{border-color:var(--teal)}
.acc-site.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600} .acc-site.on small{color:#e6f6f1}
.acc-sites-p{font-size:12px;color:var(--muted);margin-left:auto}
/* Record header: tiles and Needs attention on one line (Chris, 10 Nov 2026) */
body.nl .nl-tn{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;align-items:start}

body.nl .nl-tn-n>*{margin:0!important}
@media (max-width:1100px){body.nl .nl-tn{grid-template-columns:1fr}}
/* One menu for every page (Chris, 10 Nov 2026: "make sure all the pages have a standardised menu, the menu should also
   look like a menu, so it is easier to read"). First row (.menu1: a section's pages, Settings, a project): a bar at
   the top of the page with clear buttons, the one you are on filled. Second row (.menu2: the parts of that page, such
   as Finance's lists or a project's Design, Orders and money...): smaller rounded buttons under it. */
.menu1,body.nl .menu1{display:flex;flex-wrap:wrap;gap:2px;align-items:center;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:4px;margin:0 0 10px;overflow-x:auto}
body.nl .menu1{position:sticky;top:58px;z-index:19;box-shadow:0 6px 14px -10px rgba(0,0,0,.25)}
.menu1 button,body.nl .menu1 button{border:0!important;margin:0!important;background:none;border-radius:9px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap;line-height:1.2;transition:background .12s,color .12s}
.menu1 button:hover:not(.on){background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink)}
.menu1 button.on,body.nl .menu1 button.on{background:var(--surface);color:var(--teal-ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.menu1 button.grp{margin-left:8px!important}.menu1 button.grp::before{display:none}
/* The second row (a page's parts): plain words with a teal line under the one you are on, so it reads as part of the bar above */
.menu2,body.nl .menu2{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 18px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:none}
.menu2 button,body.nl .menu2 button{border:0!important;border-bottom:2px solid transparent!important;border-radius:0;background:none;padding:8px 12px;margin:0 0 -1px!important;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.menu2 button:hover:not(.on){color:var(--ink)}
.menu2 button.on,body.nl .menu2 button.on{border-bottom-color:var(--teal)!important;color:var(--teal-ink);font-weight:700;background:none}
/* Switches and filters inside a page (Built here / From Zigaflow, Accounts / Contacts, list filters): small rounded buttons */
.subnav:not(.menu1):not(.menu2):not(.pnav),.tabs:not(.menu1){display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0 2px;background:none}
.subnav:not(.menu1):not(.menu2):not(.pnav) button,.tabs:not(.menu1) button{border:1px solid var(--line)!important;background:var(--surface);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;color:var(--ink2);margin:0!important;white-space:nowrap}
.subnav:not(.menu1):not(.menu2):not(.pnav) button:hover:not(.on),.tabs:not(.menu1) button:hover:not(.on){border-color:var(--line2)!important;color:var(--ink)}
.subnav:not(.menu1):not(.menu2):not(.pnav) button.on,.tabs:not(.menu1) button.on{background:var(--teal-soft);border-color:var(--teal)!important;color:var(--teal-ink);font-weight:700}
@media (max-width:720px){.menu1,.menu2,.subnav:not(.pnav),.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.menu1 button,.menu2 button{flex:none}}

/* Brand look (Chris, 10 Nov 2026: "I want some more Discover Dental Design in the app ... with the quote formatting and
   a more exciting background"). He first chose deep teal, then found it too much: now "Soft" (the page head as the
   quote cover, white into mint with the brand arcs) with the "Letterhead" menu (a deep teal band behind the logo only)
   and the current page as a filled teal pill, as on the quote buttons. The printed quote's type and labels throughout. body.ddbrand is set by nlBefore in
   28b-new-layout.js for staff on the full app in the light theme only. */

/* ---------- shared: the quote's type and labels ---------- */
body.ddbrand{--bg:#F4F9F7;--band:transparent;--line:#DFE8E4;--line2:#EDF2EF;--ink:#16302C}
body.ddbrand h1,body.ddbrand h2{color:#16302C;font-weight:600;letter-spacing:-.02em}
body.ddbrand.nl .nl-rh h1{font-size:34px;line-height:1.08;letter-spacing:-.8px}
body.ddbrand .topbar h1{font-size:32px;letter-spacing:-.7px}
/* the reference line above the title reads like "QUOTATION QTE2041" */
/* Teal text is #1C7767, not #2E9E80: 5.4:1 on white and 4.6:1 on the mint, against 3.3:1 and 2.8:1; muted text #5b6861 (5.8:1),
   not #93a09a (2.7:1); no label under 11.5px; white text sits on #1C7767 to #15604E (audit 11 Nov 2026, D1, finding G19-7) */
body.ddbrand.nl .nl-crumb,body.ddbrand.nl .nl-rh-l>.nl-crumb{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#1C7767}
body.ddbrand.nl .nl-crumb a{color:#1C7767;text-decoration:none}
body.ddbrand.nl .nl-facts{font-size:13.5px;color:#5b6861}
/* card headings: the quote's section label with a hairline under it, not a coloured band */
body.ddbrand .card>h3{background:none;color:#1C7767;padding:0 0 7px;margin:0 0 12px;border-radius:0;border-bottom:1px solid #DFE8E4;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
body.ddbrand .card>h3 a{color:#1C7767}
body.ddbrand .card>h3 .muted,body.ddbrand .card>h3 span.muted{color:#5b6861!important;letter-spacing:.06em;text-transform:none}
body.ddbrand .card>h3 .btn.ghost{color:#15604E;border-color:#DFE8E4;background:#fff;letter-spacing:0;text-transform:none}
body.ddbrand .card>h3 .tag{letter-spacing:.04em}
body.ddbrand .card{border-color:#E3EDE8;border-radius:16px;box-shadow:0 1px 2px rgba(22,48,44,.04),0 8px 28px rgba(22,48,44,.06)}
/* table heads like the quote's line items */
body.ddbrand th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#5b6861;font-weight:500;border-bottom:1px solid #16302C}
body.ddbrand td{border-bottom-color:#EDF2EF}
/* stage bar: done in mint, now in the deep teal */
body.ddbrand.nl .nl-stages span{background:rgba(255,255,255,.7);border:1px solid #E3EDE8}
body.ddbrand.nl .nl-stages .done{background:#DEF5EA;border-color:#DEF5EA}
body.ddbrand.nl .nl-stages .now{background:#1C7767;border-color:#1C7767;color:#fff}
body.ddbrand .btn:not(.ghost):not(.danger){background:linear-gradient(135deg,#1C7767,#15604E);border-color:#15604E}
/* A green button always has white writing: in a card heading it was taking the heading's dark text (Chris, 11 Nov 2026) */
body.ddbrand .btn:not(.ghost):not(.danger),body.ddbrand .card>h3 .btn:not(.ghost):not(.danger){color:#fff}

/* ---------- the page head as a quote cover: a panel with the brand arcs ---------- */
body.ddbrand.nl .nl-rh,body.ddbrand .topbar{position:relative;overflow:hidden;border-radius:20px;padding:26px 30px 24px;margin:0;isolation:isolate}
body.ddbrand .topbar{margin-bottom:18px;align-items:flex-end}
body.ddbrand.nl .nl-rh:before,body.ddbrand .topbar:before{content:"";position:absolute;right:-70px;top:-120px;width:420px;height:420px;background:url(/brand/mark.png) no-repeat center/contain;z-index:-1;pointer-events:none}
body.ddbrand.nl .nl-rh .nl-act{align-self:flex-start}

/* ---------- Soft: the page head as the quote cover ---------- */
body.ddbrand.nl .nl-rh,body.ddbrand .topbar{background:linear-gradient(120deg,#ffffff 0%,#EEF8F4 55%,#DDF2EA 100%);border:1px solid #DFE8E4;box-shadow:0 6px 20px rgba(22,48,44,.05)}
body.ddbrand.nl .nl-rh:before,body.ddbrand .topbar:before{opacity:.13}
body.ddbrand.nl .nl-rh a,body.ddbrand.nl .nl-rh .back-link{color:#15604E}
body.ddbrand.nl .nl-rh .tag{background:#DEF5EA;color:#15604E}
body.ddbrand.nl .nl-rh .nl-tags .tag:not(.on){color:#5b6861;background:#EDF2EF}
body.ddbrand.nl .nl-facts b{color:#16302C}
body.ddbrand.nl .nl-rh .nl-menu>summary,body.ddbrand.nl .nl-rh .btn.ghost,body.ddbrand .topbar .btn.ghost{background:#fff;border-color:#DFE8E4;color:#16302C}

/* ---------- Letterhead menu: deep teal behind the logo only, the current page a filled teal pill ---------- */
body.ddbrand .side{background:#F6FBF9;border-right:1px solid #E3EDE8}
body.ddbrand .nav .nl-g{color:#1C7767}
body.ddbrand .nav button:hover:not(.on){background:rgba(46,158,128,.08);color:#16302C}
body.ddbrand .nav button.on{background:linear-gradient(135deg,#1C7767,#15604E);color:#fff;box-shadow:0 4px 12px rgba(46,158,128,.28)}
body.ddbrand .nav button.on svg{color:#fff;opacity:1}
body.ddbrand .nav button .badge{background:#DEF5EA;color:#15604E}
body.ddbrand .nav button.on .badge{background:#fff;color:#15604E}
@media (min-width:901px){
body.ddbrand .side{padding-top:0}
body.ddbrand .side .brand{margin:0 -13px 14px;padding:20px 20px 22px;background:linear-gradient(120deg,#16302C,#1F4F4A 70%,#2A7365);position:relative;overflow:hidden}
body.ddbrand .side .brand:after{content:"";position:absolute;right:-60px;top:-50px;width:170px;height:170px;background:url(/brand/mark.png) no-repeat center/contain;opacity:.18;pointer-events:none}
body.ddbrand .side .brand img{filter:brightness(0) invert(1);position:relative}
}

/* Tap targets: the small close and delete buttons are at least 24px, and 44px on a touch screen (audit 11 Nov 2026, D1, G19-10) */
.lp-x,.chatpop-x,.pwalk-x,.cc-x,.cm-del,.tour-card .tour-x{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
@media (pointer:coarse){.lp-x,.chatpop-x,.pwalk-x,.cc-x,.cm-del,.tour-card .tour-x{min-width:44px;min-height:44px}}

/* Engineering invoice quick charges (28zj) */
.ei-list{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.ei-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2)}
.ei-row small{font-size:12px}.ei-go{display:flex;align-items:center;gap:6px;flex:none}

/* Settings panels in the brand look (Chris, 11 Nov 2026: "something doesn't look right ... with the layout"). The brand card
   rule above gave the cards inside a settings panel a radius and shadow again, so each section showed as a box inside a box;
   inputs ran the full width of the column; read-only values were bigger than the fields beside them; and the call-out table
   spread its price boxes to the far edge. */
body.ddbrand .set-panel .card{box-shadow:none;border-radius:0;border-color:transparent}
body.ddbrand .set-panel .card .card,body.ddbrand .set-panel .card~.card,body.ddbrand .set-panel .grid>.card{border-top:1px solid #DFE8E4}
.set-panel[data-set=pricing] .f{grid-template-columns:repeat(auto-fill,minmax(220px,300px));gap:12px 22px}
.set-panel[data-set=pricing] .f input[type=number],.set-panel[data-set=pricing] .f input[inputmode=decimal]{max-width:180px}
.set-panel[data-set=pricing] .f>div>div:not([class]){font-size:13.5px;color:var(--ink);padding-top:7px!important}
.set-panel[data-set=pricing] h4{font-size:13px;font-weight:600;color:var(--ink);margin:18px 0 4px}
.set-panel table.co-tbl{width:auto;min-width:520px}
.set-panel table.co-tbl td,.set-panel table.co-tbl th{padding-right:22px}
.set-panel table.co-tbl input{width:96px!important;padding:5px 8px}
.set-panel table.co-tbl td{padding-top:6px;padding-bottom:6px}

/* Price book, Supplier pricing (11 Nov 2026): one flat table, the supplier once, numbers right-aligned */
.pm-tbl{width:100%;border-collapse:collapse}
.pm-tbl th{white-space:nowrap}
.pm-tbl td{vertical-align:top;padding:9px 10px 9px 0;font-size:13px}
.pm-tbl td .muted{font-size:11.5px}
.pm-tbl tr.pm-top td{border-top:1px solid var(--line)}
.pm-tbl tr.pm-sub td{border-top:1px dashed var(--line2)}
.pm-tbl td.pm-sup{min-width:150px}
.pm-tbl td.pm-act{white-space:nowrap}
.pm-tbl td.money{white-space:nowrap;font-variant-numeric:tabular-nums}
.pm-tbl .pm-up{font-size:12px;display:inline-block;margin-top:6px}

/* Sticky column titles (Chris, 11 Nov 2026): on a long list the row of column titles stays in view under the pinned bars.
   --th-top is set by thTopSet() in 28b-new-layout.js. Not in pop-ups, where the box itself scrolls. */
#main table thead th,#main table>tbody>tr:first-child>th,#main table>tr:first-child>th{position:sticky;top:var(--th-top,0px);z-index:4;background:var(--surface);background-clip:padding-box;box-shadow:inset 0 -1px 0 var(--line)}
#main table.th-box th{top:0}
#main .no-stick th,#modal table th,.modal table th{position:static}
/* The record header no longer clips its menus: the brand mark is drawn inside the header's own box instead (Chris, 11 Nov 2026) */
body.ddbrand.nl .nl-rh{overflow:visible;z-index:6}
body.ddbrand.nl .nl-rh:before{inset:0;right:0;top:0;width:auto;height:auto;border-radius:inherit;background:url(/brand/mark.png) no-repeat right -70px top -120px/420px 420px}
/* Sections of a project (28zh): the open section is a short row of steps, not a long list (Chris, 11 Nov 2026: "massive") */
.pt-detail.card{display:block;margin:12px 0 0;padding:14px 16px}
.pt-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.pt-hd-r{display:flex;gap:6px;align-items:center}
.pt-steps{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:0}
.pt-steps li{position:relative;padding:22px 6px 2px;cursor:pointer;text-align:center;min-width:0}
.pt-steps li:before{content:"";position:absolute;top:8px;left:0;right:0;height:3px;background:var(--line)}
.pt-steps li:first-child:before{left:50%}.pt-steps li:last-child:before{right:50%}
.pt-steps li.done:before{background:var(--teal)}
.pt-steps .pt-dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:17px;height:17px;background:var(--surface)}
.pt-steps li.done .pt-dot{background:var(--teal);border-color:var(--teal)}.pt-steps li.prop .pt-dot{opacity:.55}
.pt-steps li.now .pt-dot{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.pt-steps b{display:block;font-size:12.5px;line-height:1.25;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pt-steps li.done b{color:var(--ink3);font-weight:500}.pt-steps li.now b{color:var(--teal-ink)}
.pt-steps small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.pt-steps li:hover b{text-decoration:underline}
.pt-vars{font-size:13px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pt-card.plan{border-style:dashed}.pt-vo.pl{color:var(--ink3);font-weight:600}
.pt-add{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-style:dashed;color:var(--teal-ink)}
.pt-add b{font-size:20px;line-height:1}.pt-add span{font-weight:700;margin-top:4px}.pt-add small{color:var(--ink3);font-size:12px;margin-top:2px}
@media (max-width:900px){.pt-steps{grid-template-columns:1fr!important}.pt-steps li{text-align:left;padding:4px 0 4px 28px}.pt-steps li:before{display:none}.pt-steps .pt-dot{left:9px;top:6px}}
/* A step's checklist, in the step window (the old Stage gates lists, Chris 11 Nov 2026) */
.pt-chk{margin:12px 0 4px;border-top:1px solid var(--line);padding-top:10px}
.pt-chk h4{margin:8px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.pt-ck{width:20px;text-align:center;font-weight:700}.pt-ck.y{color:var(--teal)}.pt-ck.n{color:var(--red)}
.pt-foot{font-size:12.5px;margin:8px 2px 0;color:var(--ink2)}.pt-foot select{font:inherit;font-size:12.5px;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;background:var(--surface);color:var(--ink)}
/* A trade's contacts, a compact list that fits the side column (Chris 11 Nov 2026) */
.rc-list{display:flex;flex-direction:column}.rc-row{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}.rc-row:last-child{border-bottom:0}
.rc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.rc-top .btn{margin-left:auto}
/* A part's card says plainly that this is the next step, with the last step done under it (Chris 11 Nov 2026) */
.pt-next{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-ink);margin-bottom:1px}
.pt-last{font-size:12px;color:var(--ink3);margin-top:2px}
/* Client checklist answers picked from lists (Chris 11 Nov 2026) */
.ia-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.ia-part{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink3);flex:1;min-width:180px}
.ia-part select,.ia-part input{font:inherit;font-size:13px;color:var(--ink);padding:6px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--surface)}
/* The project snapshot in the header, small (Chris 11 Nov 2026) */
.nl-snap{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.nl-snap-i{display:inline-flex;align-items:center;gap:6px}.nl-snap-i i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.nl-snap-i label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.nl-snap-miss{color:var(--amber)}
/* Client view: "Which client?" list (Chris 11 Nov 2026: the rows showed as grey browser buttons with the codes spilling out) */
.pc-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pc-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:12px;width:100%;padding:11px 14px;border-top:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.pc-row:first-child{border-top:0}.pc-row:hover,.pc-row:focus-visible{background:var(--teal-soft)}.pc-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.pc-code{font-weight:700;font-size:12.5px;color:var(--teal-ink);background:var(--teal-soft);border-radius:999px;padding:3px 10px;justify-self:start;letter-spacing:.02em}
.pc-name{font-weight:600;font-size:14px;min-width:0;overflow-wrap:anywhere}.pc-go{font-size:12.5px;color:var(--ink3)}
.pc-name small{display:block;font-weight:400;font-size:12px;color:var(--ink3);margin-top:1px}.pc-go{text-align:right;white-space:nowrap}.pc-never{color:var(--amber)}
/* Drawing review (app/28zl-drawing-review.js, Chris 11 Nov 2026): the sheet, the mark-up tools, revisions side by side */
.dr{position:fixed;inset:0;z-index:1200;background:var(--bg);display:flex;flex-direction:column}
/* the note box and messages sit above the full-screen viewers (they were behind the portal viewer too) */
body:has(#dr) .modal-bg,body:has(#dv) .modal-bg,body:has(#dr) .ask-bg,body:has(#dv) .ask-bg{z-index:1300}
body:has(#dr) .toast,body:has(#dv) .toast{z-index:1400}
.dr-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line2);background:var(--card);flex-wrap:wrap}
.dr-t{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dr-t select{min-width:min(300px,100%);max-width:min(520px,100%);font-weight:600}
.dr-z{min-width:58px;justify-content:center}
.dr-a{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dr-tools{display:flex;align-items:center;gap:14px;padding:6px 14px;border-bottom:1px solid var(--line2);background:var(--card);flex-wrap:wrap}
.dr-tg{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dr-sw{display:inline-flex;gap:4px;margin-left:8px}
.dr-col{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line2);cursor:pointer;padding:0}
.dr-col.on{box-shadow:0 0 0 2px var(--ink)}
.dr-body{flex:1;display:flex;min-height:0}
.dr-stages{flex:1;display:flex;min-width:0;gap:2px;background:#4d5560}
.dr-pane{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-ph{padding:5px 12px;background:#3b424b;color:#e9eef0;font-size:12.5px}
.dr-ph .muted{color:#b9c4c9}
.dr-stages.two .dr-pane.main .dr-ph{background:#1c6f5c}
.dr-scroll{flex:1;overflow:auto;background:#5c6470;padding:14px;position:relative}
.dr-wrap{position:relative;margin:0 auto;box-shadow:0 6px 26px rgba(0,0,0,.35);background:#fff}
.dr-wrap canvas{display:block}
.dr-svg{position:absolute;inset:0;touch-action:none;overflow:visible}
.dr-n{cursor:pointer}.dr-n.done{opacity:.55}.dr-n.draft{opacity:.85;pointer-events:none}
.dr-n.flash{animation:drflash .5s ease-in-out 3}
@keyframes drflash{50%{opacity:.2}}
.dr-msg{padding:20px;color:#e9eef0}
.dr-side{width:340px;flex:0 0 340px;border-left:1px solid var(--line2);background:var(--card);overflow:auto;padding:14px}
.dr-carry{border:1px solid var(--amber,#e0a449);border-radius:10px;padding:10px;margin-bottom:14px}
@media(max-width:900px){.dr-body{flex-direction:column}.dr-side{width:auto;flex:0 0 auto;max-height:40vh;border-left:0;border-top:1px solid var(--line2)}.dr-stages.two{flex-direction:column}}
/* How the client has read a quote (app/28zo-activity.js, 11 Nov 2026) */
.qread-live{display:flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--teal-ink);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.qread-live .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);flex:none;animation:qreadPulse 1.6s ease-in-out infinite}
@keyframes qreadPulse{0%,100%{box-shadow:0 0 0 0 rgba(21,96,78,.45)}50%{box-shadow:0 0 0 7px rgba(21,96,78,0)}}
.qread-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.qread-stats>div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0}
.qread-stats b{display:block;font-size:18px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qread-stats span{font-size:12px;color:var(--ink3)}
.qread-tp{background:var(--mint,#eef8f4);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.qread-tp ul{margin:6px 0 0;padding-left:18px}.qread-tp li{margin:3px 0}
.qread-secs>b{display:block;margin:0 0 6px}
.qread-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto;gap:8px;align-items:center;font-size:13px;margin:4px 0}
.qread-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qread-row i{display:block;height:8px;border-radius:4px;background:var(--teal)}
.qread-row em{font-style:normal;color:var(--ink3);font-size:12px;white-space:nowrap}
.qread-v{margin-top:10px;font-size:13px}.qread-v summary{cursor:pointer;color:var(--teal-ink)}.qread-v div{padding:2px 0}
@media (max-width:600px){.qread-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.qread-live .dot{animation:none}}
/* the document viewer sits over everything (app/28zp); its messages and questions above it */
body:has(#av) .toast{z-index:1400}
body:has(#av) .ask-bg{z-index:1360}