:root{
--cyan:#00AEEF;--navy:#2E3192;--navy600:#262880;--navy700:#1E2066;--ink:#272727;
--canvas:#FAFAFA;--panel:#EEF0F2;--hair:#E3E3E3;--mut:#757575;--white:#fff;
--cyan50:#E8F7FD;--cyan100:#DDF1F9;--cyan700:#0A72AB;--alert:#D12D45;--warmbg:#FCEDEF;
--r:12px;--pill:9999px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px}
.app{display:flex;min-height:100vh}
/* RAIL */
.rail{width:236px;flex:0 0 236px;background:var(--navy);color:#fff;padding:26px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:0 22px 26px}
/* The Sticker Pack mark, not a letter mark. It carries a navy outline, so on
   the navy rail it needs a light tile behind it or the outline disappears and
   the S loses its shape. */
.mark{width:34px;height:34px;border-radius:22%;background:#fff;flex:0 0 34px;
 padding:3px;object-fit:contain;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.brand b{font-weight:800;font-size:14px;letter-spacing:.01em;line-height:1.15;text-transform:uppercase}
.brand span{display:block;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#A2DEF5;margin-top:3px}
.navlab{padding:16px 22px 7px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#7577B8}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 22px;color:#C9CBE3;text-decoration:none;font-size:12.5px;font-weight:500;border-left:2px solid transparent;cursor:pointer}
.nav a:hover{color:#fff;background:rgba(255,255,255,.035)}
.nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
/* v6.25.0 (#111 C): the current page is a light wash and a thin bar, not a block */
.nav a.on{color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--cyan);font-weight:600}
.nav a .ct{font-size:10px;font-weight:700;color:#A2DEF5;background:rgba(255,255,255,.08);padding:1px 7px;border-radius:var(--pill)}
.nav a.on .ct{background:rgba(0,174,239,.22);color:#fff}
.who{margin-top:auto;padding:16px 22px 0;border-top:1px solid rgba(255,255,255,.12)}
.who label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#7577B8;font-weight:700;display:block;margin-bottom:7px}
.who select{width:100%;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:8px 9px;font-family:inherit;font-size:12.5px;font-weight:600}
.who select option{color:#272727}
/* MAIN */
.main{flex:1;min-width:0;padding:34px 40px 80px;max-width:1320px}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mut)}
h1{font-size:33px;font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:9px 0 8px}
.sub{color:var(--mut);font-size:14.5px;max-width:62ch;line-height:1.55}
.hr{height:1px;background:var(--hair);margin:26px 0}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0 4px}
.kpis.five{grid-template-columns:1.4fr repeat(4,1fr)}
.kpi{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:17px 18px}
.kpi.acc{background:var(--navy);border-color:var(--navy)}
.kpi .k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--mut)}
.kpi.acc .k{color:#A2DEF5}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.03em;margin-top:7px;line-height:1}
.kpi.acc .v{color:#fff}
.kpi .f{font-size:11.5px;color:var(--mut);margin-top:6px;line-height:1.4}
.kpi.acc .f{color:#B2B3D6}
/* LIST */
/* A header and its controls. The controls wrap onto their own line rather than
   crushing the heading into a one-word column, which is what a screen with six
   filters on it did before. */
.lh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
 margin-bottom:14px;flex-wrap:wrap}
.lh>div:first-child{flex:1 1 320px;min-width:280px}
.lh h2{font-size:21px;font-weight:800;letter-spacing:-.017em}
.lh p{color:var(--mut);font-size:13px;margin-top:5px;max-width:60ch;line-height:1.5}
.tools{display:flex;gap:8px;align-items:center;flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end}
.btn{font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--pill);padding:9px 17px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--navy600)}
.btn.g{background:#fff;color:var(--navy)}
.btn.g:hover{background:var(--panel)}
.btn.sm{padding:6px 13px;font-size:10.5px}
.btn:disabled{opacity:.35;cursor:not-allowed}
/* A wide table scrolls inside its own card. The page itself must never scroll
   sideways - a board whose last column is a button you cannot reach is a board
   with a missing button. */
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
 overflow:hidden;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--mut);padding:12px 14px;border-bottom:1px solid var(--hair);background:#FCFCFD;white-space:nowrap}
th.n,td.n{text-align:right}
td{padding:13px 14px;border-bottom:1px solid #F1F2F4;font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.row:hover td{background:#FBFDFE}
tr.sel td{background:var(--cyan50)}
.cb{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;display:block}
.nm{font-weight:700;letter-spacing:-.01em;cursor:pointer;line-height:1.3}
.nm:hover{color:var(--navy);text-decoration:underline}
.par{font-size:11px;color:var(--mut);font-weight:500;margin-top:2px}
.rsn{font-size:12.5px;color:#4A4A4A;line-height:1.4}
.mny{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.met{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
.met.hot{color:var(--alert)}
.met.ok{color:#0F7A4E}
.tier{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:800}
.tA{background:var(--navy);color:#fff}.tB{background:var(--cyan);color:var(--navy)}
.tC{background:var(--cyan100);color:var(--cyan700)}.tD{background:var(--panel);color:var(--mut)}
.tDormant{background:var(--warmbg);color:#9E2033}
.sku{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #F1F2F4}
.sku:last-child{border:none}
/* v6.9.4 - Edit and Delete on a touch in the account's history */
.tch-acts{display:flex;gap:5px;flex:none;align-self:center}
.tch-acts .btn{padding:5px 8px;line-height:0}
.sku .rk{width:22px;font-weight:800;color:var(--mut);font-size:12px}
.sku .nm2{flex:1;font-size:13px;font-weight:600;line-height:1.3}
.sku .mt{font-size:10.5px;color:var(--mut);font-weight:500}
.sku .u{font-weight:800;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.sw{display:flex;align-items:center;gap:8px}
.tgl{width:40px;height:22px;border-radius:9999px;background:var(--hair);position:relative;cursor:pointer;border:none;flex:0 0 40px;transition:background .16s}
.tgl.on{background:#0F7A4E}
.tgl i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .16s}
.tgl.on i{left:21px}
.mini{font-size:11px;color:var(--mut);font-weight:600}
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.col{background:var(--panel);border-radius:var(--r);padding:12px;min-height:190px}
.col h5{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--mut);margin-bottom:4px}
.col .cn{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.crd{background:#fff;border-radius:9px;padding:10px 11px;margin-bottom:8px;border:1px solid var(--hair);cursor:pointer}
.crd:hover{border-color:var(--navy)}
.crd b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.crd span{display:block;font-size:10.5px;color:var(--mut);margin-top:3px;font-weight:500}
.crd .vv{font-size:12px;font-weight:800;color:var(--navy);margin-top:5px}
.conf{font-family:inherit;font-size:11.5px;font-weight:700;border:1px solid var(--hair);border-radius:6px;padding:4px 6px;background:#fff;cursor:pointer}
.inp{width:82px;text-align:right;font-family:inherit;font-weight:700;font-size:13px;border:1px solid var(--hair);border-radius:6px;padding:5px 8px}
@media(max-width:1200px){.cols{grid-template-columns:repeat(2,1fr)}}
.own{font-size:12px;white-space:nowrap}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:var(--pill);white-space:nowrap}
.t-none{background:var(--warmbg);color:#9E2033}
.t-int{background:var(--cyan50);color:var(--cyan700)}
.t-ext{background:var(--panel);color:#4A4A4A}
.empty{padding:44px;text-align:center;color:var(--mut);font-size:13.5px}
/* BULK BAR */
.bulk{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);background:var(--navy);color:#fff;border-radius:var(--pill);padding:11px 13px 11px 22px;display:flex;align-items:center;gap:15px;z-index:60;transition:transform .22s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 28px rgba(46,49,146,.28)}
.bulk.up{transform:translateX(-50%) translateY(0)}
/* the chart readout: shown only while the pointer is in that week's column */
.hb .hv{opacity:0;pointer-events:none}
.hb:hover .hv{opacity:1}
.navedit{margin:10px 22px 0;width:calc(100% - 44px);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#C9D3F5;font:700 10.5px Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:8px;cursor:pointer}
.navedit:hover{background:rgba(255,255,255,.15);color:#fff}
/* v6.1.0 - trade show mode is on: a line above the menu, on every screen */
.tsbar{margin:0 14px 10px;padding:9px 11px;border-radius:9px;background:rgba(33,193,232,.16);border:1px solid rgba(33,193,232,.45);color:#E6F7FD;font-size:11.5px;line-height:1.45}
.tsbar b{color:#fff}
.tsbar button{display:block;margin-top:6px;background:none;border:0;padding:0;color:#8FE3F7;font:700 11px Montserrat,sans-serif;text-decoration:underline;cursor:pointer}
@media(max-width:1080px){.tsbar{display:none}}
.nav a.arr{cursor:default;justify-content:space-between}
.nav .mv{display:flex;gap:4px}
.nav .mv .up{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:5px;width:22px;height:20px;font-size:9px;cursor:pointer;line-height:1}
.nav .mv .up[disabled]{opacity:.25;cursor:default}
/* The manager's menu in sections (6.0.2). Same type size as the plain list;
   the rows are a little tighter (8px instead of 10px) and a section heading is
   a button that slides its screens open. Sellers' plain list is untouched. */
#navwrap{min-height:0;overflow-y:auto;scrollbar-width:thin}
.nav.grouped a{padding-top:7px;padding-bottom:7px}
.nav .ngrp{margin-top:10px}
.nav .nghd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-left:3px solid transparent;
 padding:6px 22px 4px;color:#7F8AC0;font:600 9.5px Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;
 text-align:left;cursor:pointer}
.nav .nghd:hover{color:#fff}
.nav .nghd:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.nav .nghd .car{display:inline-block;font-size:9px;width:9px;transition:transform .18s ease;transform:rotate(90deg)}
.nav .ngrp.shut .nghd .car{transform:none}
.nav .nghd .ngl{flex:1}
.nav .nghd .gct{font-size:10px;font-weight:700;letter-spacing:0;color:#A2DEF5;background:rgba(255,255,255,.09);
 padding:1px 7px;border-radius:var(--pill);display:none}
.nav .ngrp.shut .nghd .gct{display:inline-block}
.nav .ngb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}
.nav .ngin{min-height:0;overflow:hidden}
.nav .ngrp.shut .ngb{grid-template-rows:0fr}
.nav .ngrp.shut .ngin{visibility:hidden;transition:visibility 0s .2s}
@media(prefers-reduced-motion:reduce){.nav .ngb,.nav .nghd .car,.nav .ngrp.shut .ngin{transition:none}}
@media(max-width:1080px){.nav .nghd{padding:8px 0 4px;justify-content:center}.nav .nghd .ngl,.nav .nghd .gct,.nav .ngrp.shut .nghd .gct{display:none}}
.modal{position:fixed;inset:0;z-index:90;background:rgba(16,20,37,.45);display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.mpanel{background:#fff;border-radius:16px;width:520px;max-width:100%;max-height:78vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.mpanel header{padding:18px 22px 12px;border-bottom:1px solid var(--hair)}
.mpanel h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.mpanel .sub{margin-top:3px}
.mlist{overflow-y:auto;padding:8px 0}
.mrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;padding:11px 22px;cursor:pointer;font:inherit}
.mrow:hover{background:var(--cyan50)}
.mrow b{font-size:13.5px;font-weight:700}
.mrow span{font-size:11.5px;color:var(--mut);margin-left:auto;font-weight:600}
.mgroup{padding:12px 22px 4px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);font-weight:700}
.mfoot{padding:12px 22px;border-top:1px solid var(--hair);display:flex;gap:10px;justify-content:flex-end}
.bulk b{font-size:13.5px;font-weight:700;white-space:nowrap}
.bulk select{font-family:inherit;font-size:12.5px;font-weight:600;border:none;border-radius:var(--pill);padding:8px 13px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.bulk select option{color:#272727}
.bulk .btn{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.bulk .x{background:none;border:none;color:#B2B3D6;font-size:19px;cursor:pointer;padding:0 8px;line-height:1}
/* DRAWER */
.scrim{position:fixed;inset:0;background:rgba(20,18,19,.36);opacity:0;pointer-events:none;transition:opacity .22s;z-index:70}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:94vw;background:#fff;z-index:80;transform:translateX(101%);transition:transform .26s cubic-bezier(.16,1,.3,1);overflow-y:auto;border-left:1px solid var(--hair)}
.drawer.on{transform:none}
.dh{padding:26px 30px 22px;border-bottom:1px solid var(--hair)}
.dh .x{float:right;background:none;border:none;font-size:23px;color:var(--mut);cursor:pointer;line-height:1}
.dh h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.16;padding-right:30px}
.dh .p{font-size:12px;color:var(--mut);margin-top:5px}
.dsec{padding:22px 30px;border-bottom:1px solid var(--hair)}
.dsec h4{font-size:10px;letter-spacing:.19em;text-transform:uppercase;font-weight:700;color:var(--mut);margin-bottom:14px}
.big{background:var(--navy);color:#fff;border-radius:var(--r);padding:19px 20px;margin-bottom:15px}
.big .l{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#A2DEF5;font-weight:700}
.big .v{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:7px;line-height:1.1}
.big .n{font-size:12.5px;color:#D4D5E7;margin-top:7px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.st{background:var(--canvas);border:1px solid var(--hair);border-radius:9px;padding:13px 14px}
.st .l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
.st .v{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.acts{display:flex;flex-direction:column;gap:9px}
.act{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--hair);border-radius:9px;background:#fff;cursor:pointer;text-align:left;font-family:inherit;width:100%}
.act:hover{border-color:var(--navy);background:#FBFCFE}
.act .ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--cyan50);color:var(--cyan700);display:grid;place-items:center;font-weight:800;font-size:14px}
.act b{display:block;font-size:13.5px;font-weight:700}
.act span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.35}
.tl{border-left:2px solid var(--hair);padding-left:16px;margin-left:5px}
.tl .e{padding-bottom:15px;position:relative}
.tl .e:last-child{padding-bottom:0}
.tl .e::before{content:'';position:absolute;left:-21px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--cyan);border:2px solid #fff}
.tl .d{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:700}
.tl .t{font-size:13px;margin-top:3px;line-height:1.45}
.note{background:var(--cyan50);border:1px solid transparent;border-radius:9px;padding:13px 15px;font-size:12.5px;line-height:1.55;color:#0A5478}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.rail{width:70px;flex:0 0 70px}.brand b,.nav a span.lb,.navlab,.who{display:none}.main{padding:26px 22px 70px}}
/* ── additions for the real app ─────────────────────────── */
.tier{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:11px;font-weight:800}
.tA{background:var(--navy);color:#fff}.tB{background:var(--cyan);color:var(--navy)}
.tC{background:var(--cyan100);color:var(--cyan700)}.tD{background:var(--panel);color:var(--mut)}
.tDormant{background:var(--warmbg);color:#9E2033}
.met.ok{color:#0F7A4E}
.mini{font-size:11px;color:var(--mut);font-weight:600}
.seg{display:inline-block;padding:2px 8px;border-radius:9999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.s-proactive{background:var(--cyan100);color:var(--cyan700)}
.s-reactive{background:var(--panel);color:var(--mut)}
.s-winback{background:#FFF3D6;color:#8A5A00}
.s-dead{background:var(--warmbg);color:#9E2033}
.s-friend{background:#E7F6EE;color:#0F7A4E}
.s-external{background:#EEF0FF;color:#3B4BB8}
.s-up_for_grabs{background:#FDE8F0;color:#A01050}
.tgl{width:40px;height:22px;border-radius:9999px;background:var(--hair);position:relative;cursor:pointer;border:none;flex:0 0 40px;transition:background .16s}
.tgl:disabled{opacity:.55;cursor:progress} /* v6.20.0 (#89): a save in flight */
.tgl.on{background:#0F7A4E}.tgl i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .16s}
.tgl.on i{left:21px}
.sw{display:flex;align-items:center;gap:8px}
.inp{text-align:right;font-family:inherit;font-weight:700;font-size:13px;border:1px solid var(--hair);border-radius:6px;padding:5px 8px}
.conf{font-family:inherit;font-size:11.5px;font-weight:700;border:1px solid var(--hair);border-radius:6px;padding:4px 6px;background:#fff;cursor:pointer}
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.col{background:var(--panel);border-radius:var(--r);padding:12px;min-height:190px}
.col h5{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--mut);margin-bottom:4px}
.col .cn{font-size:19px;font-weight:800;margin-bottom:10px}
.crd{background:#fff;border-radius:9px;padding:10px 11px;margin-bottom:8px;border:1px solid var(--hair);cursor:pointer}
.crd b{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.crd span{display:block;font-size:10.5px;color:var(--mut);margin-top:3px;font-weight:500}
.sku{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid #F1F2F4}
.sku:last-child{border:none}.sku .rk{width:22px;font-weight:800;color:var(--mut);font-size:12px}
.sku .nm2{flex:1;font-size:13px;font-weight:600;line-height:1.3}
.sku .mt{font-size:10.5px;color:var(--mut);font-weight:500}
.sku .u{font-weight:800;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.banner{background:var(--navy);color:#fff;padding:9px 16px;font-size:12px;font-weight:600;text-align:center;letter-spacing:.02em}
.banner a{color:var(--cyan);text-decoration:underline}
.login{max-width:380px;margin:14vh auto;text-align:center}
.login input{width:100%;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;font-family:inherit;font-size:14px;margin:14px 0}
@media(max-width:1200px){.cols{grid-template-columns:repeat(2,1fr)}}

/* TABS — two things that belong on one page without burying either */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hair);margin:0 0 20px}
.tabs button{font:inherit;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--mut);
  background:none;border:none;border-bottom:2px solid transparent;padding:9px 15px 10px;cursor:pointer;
  margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--navy);border-bottom-color:var(--navy)}
.tabs .ct{font-size:10.5px;font-weight:800;background:var(--panel);color:var(--mut);
  border-radius:9999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.tabs button.on .ct{background:var(--cyan100);color:var(--cyan700)}

/* ══ KNOWLEDGE BASE ══════════════════════════════════════════════════════════
   Olivia's design, carried over from the Initiative Hub. Everything here is
   scoped under .kb so it cannot reach any other screen: her look is softer than
   Encore's — rounded corners, shadows instead of hairlines, icon tiles — and
   that is right for a library and wrong for a book of accounts. Her navy is
   already Encore's navy, which is why the two sit together without a seam. */
/* v6.2.2 (audit C4): chips are global. They were styled only inside the
   Knowledge Base, so the chips in dialogs (#modal sits outside .kb) drew as
   plain buttons with no selected state. The .kb rules below are more
   specific and keep the library's own look. */
.chip{font:700 12px/1 Montserrat,sans-serif;padding:8px 13px;border-radius:999px;cursor:pointer;
 border:1.5px solid var(--hair);background:#fff;color:var(--mut);transition:.12s}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.sm{font-size:11px;padding:6px 10px}
.chip:disabled{opacity:.5;cursor:not-allowed}
.kb{--kb-blue:#00AEEF;--kb-blue-deep:#0090C9;--kb-navy:#2E3192;--kb-navy-deep:#22246E;
 --kb-ink:#14173A;--kb-soft:#5F6584;--kb-line:#E1E5EF;--kb-blue-soft:#E6F6FE;
 --kb-navy-soft:#ECEDF8;--kb-done:#1F9D55;--kb-todo:#EF7D1A;--kb-warn-bg:#FDEDE1;
 --kb-ok-bg:#E4F5EC;--kb-r:16px;
 --kb-sh:0 1px 2px rgba(20,23,58,.05), 0 6px 18px rgba(46,49,146,.07)}

.kb .hc-hero{text-align:center;padding:26px 10px 6px}
.kb .hc-hero h1{font-size:31px;font-weight:800;letter-spacing:-.02em;color:var(--kb-ink)}
.kb .hc-hero h1 em{font-style:normal;color:var(--kb-blue-deep)}
.kb .hc-hero p{color:var(--kb-soft);font-size:14.5px;margin-top:7px}
.kb .hc-search{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--kb-line);
 border-radius:999px;padding:6px 8px 6px 16px;max-width:640px;margin:20px auto 0;box-shadow:var(--kb-sh)}
.kb .hc-search:focus-within{border-color:var(--kb-blue)}
.kb .hc-search input{flex:1;border:none;font-size:16px;padding:8px 4px;outline:none;background:transparent;
 color:var(--kb-ink);min-width:0;font-family:inherit}
.kb .hc-search.compact{margin:0 0 18px;max-width:none}
.kb .hc-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.kb .chip{font-size:12.5px;font-weight:700;border:2px solid var(--kb-line);background:#fff;color:var(--kb-navy);
 border-radius:999px;padding:5px 13px;cursor:pointer;font-family:inherit}
.kb .chip:hover{border-color:var(--kb-blue);background:var(--kb-blue-soft)}
.kb .chip.on{border-color:var(--kb-blue);background:var(--kb-blue-soft);color:var(--kb-blue-deep)}

.kb .section-label{margin:26px 0 14px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
 color:var(--kb-soft);display:flex;align-items:center;gap:10px}
.kb .section-label::after{content:"";flex:1;height:1px;background:var(--kb-line)}
.kb .sl-n{background:var(--kb-line);border-radius:999px;padding:0 8px;font-size:11px;letter-spacing:0}

.kb .hc-band{background:var(--kb-blue-soft);border-radius:22px;padding:22px;margin-top:24px}
.kb .hc-band .hc-h2{font-size:20px;font-weight:800;margin-bottom:14px}
.kb .hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.kb .hc-card{text-align:left;background:#fff;border:2px solid transparent;border-radius:16px;padding:16px;
 cursor:pointer;box-shadow:var(--kb-sh);display:flex;flex-direction:column;gap:6px;color:var(--kb-ink);
 font-family:inherit;width:100%}
.kb .hc-card:hover{border-color:var(--kb-blue)}
.kb .hc-ico-box{width:44px;height:44px;border-radius:12px;background:var(--kb-navy-soft);display:grid;
 place-items:center;font-size:22px;flex-shrink:0}
.kb .hc-card b{font-size:16px;font-weight:800;color:var(--kb-navy);margin-top:4px}
.kb .hc-card p{font-size:13px;color:var(--kb-soft);line-height:1.45}
.kb .hc-card small{font-size:12px;font-weight:700;color:var(--kb-blue-deep);margin-top:auto;padding-top:6px}

.kb .kcard{background:#fff;border-radius:var(--kb-r);box-shadow:var(--kb-sh);padding:20px 22px;margin-bottom:14px}
.kb .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.kb .kcard h2{font-size:19px;font-weight:800;color:var(--kb-ink);letter-spacing:-.01em}
.kb .dates{font-size:12.5px;color:var(--kb-soft);margin-top:3px}
.kb .dates b{color:var(--kb-ink)}
.kb .summary{margin-top:10px;font-size:14px;line-height:1.55;color:var(--kb-ink);max-width:74ch}
.kb .read-state{flex-shrink:0;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.kb .read-state.unread{background:var(--kb-warn-bg);color:var(--kb-todo)}
.kb .read-state.read{background:var(--kb-ok-bg);color:var(--kb-done)}
.kb .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center}
.kb .kbtn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;font-size:13.5px;
 font-weight:700;padding:9px 16px;border-radius:12px;border:2px solid var(--kb-navy);background:transparent;
 color:var(--kb-navy);font-family:inherit}
.kb .kbtn.primary{background:var(--kb-navy);border-color:var(--kb-navy);color:#fff}
.kb .kbtn.primary:hover{background:var(--kb-navy-deep);border-color:var(--kb-navy-deep)}
.kb .kbtn.ghost{border-color:var(--kb-line)}
.kb .kbtn.ghost:hover{background:var(--kb-blue-soft);border-color:var(--kb-blue);color:var(--kb-navy)}
.kb .kbtn.sm{padding:6px 12px;font-size:12.5px}
.kb .ktag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
 color:var(--kb-blue-deep);background:var(--kb-blue-soft);border-radius:999px;padding:3px 9px}
.kb .subs{margin-top:14px;border-top:1px dashed var(--kb-line);padding-top:10px}
.kb .sub-row{display:flex;align-items:center;gap:10px;padding:7px 0;flex-wrap:wrap}
.kb .sub-row .n{font-size:13.5px;font-weight:700;color:var(--kb-navy);flex:1;min-width:180px}

.kb .res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kb .res{position:relative;background:#fff;border-radius:14px;box-shadow:var(--kb-sh);border:2px solid transparent;
 padding:14px 16px}
.kb .res:hover{border-color:var(--kb-blue)}
.kb .res-kind{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
 color:var(--kb-blue-deep);margin-bottom:5px}
.kb .res b{display:block;font-size:15px;font-weight:800;line-height:1.3;color:var(--kb-navy)}
.kb .res p{font-size:13px;color:var(--kb-soft);margin-top:4px;line-height:1.45}
.kb .res .actions{margin-top:10px;gap:7px}
.kb .obj q{display:block;font-size:15.5px;font-weight:800;color:var(--kb-ink);quotes:'\201C' '\201D'}
.kb .obj .why{margin-top:9px;background:var(--kb-blue-soft);border-radius:12px;padding:11px 14px;
 font-size:13px;color:var(--kb-ink);line-height:1.5}
.kb .obj .why b{color:var(--kb-blue-deep)}
.kb .hc-empty{color:var(--kb-soft);font-size:14px;background:#fff;border-radius:12px;padding:16px 18px;
 box-shadow:var(--kb-sh)}
.kb .res{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* ALBUM TILES — the cover is the whole point of the photos tab, so it leads
   rather than sitting as an icon in the corner. An album with no cover yet
   draws its initials on the house navy: deliberate, not broken. */
/* the sections of an album, above the frame that shows one of them */
.kb .vw-secs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;
 background:var(--kb-blue-soft);border-radius:12px;margin-bottom:10px}
.kb .vw-sec{font:700 12.5px/1 Montserrat,sans-serif;padding:8px 13px;border-radius:999px;
 border:1.5px solid transparent;background:#fff;color:var(--kb-soft);cursor:pointer}
.kb .vw-sec:hover{color:var(--kb-navy);border-color:var(--kb-blue)}
.kb .vw-sec.on{background:var(--kb-navy);color:#fff;border-color:var(--kb-navy)}
.kb .alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.kb .alb{position:relative}
.kb .alb-hit{width:100%;text-align:left;background:#fff;border:2px solid transparent;border-radius:16px;
 padding:0 0 14px;display:flex;flex-direction:column;cursor:pointer;overflow:hidden;
 box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .12s,box-shadow .12s}
.kb .alb-hit:hover{border-color:var(--kb-blue);box-shadow:0 6px 18px rgba(16,24,40,.09)}
.kb .alb-hit b{font-size:16px;font-weight:800;color:var(--kb-navy);margin:12px 16px 0}
.kb .alb-hit small{font-size:12px;font-weight:700;color:var(--kb-blue-deep);margin:5px 16px 0}
/* NOT scoped to .kb: the same tile is drawn inside the editor modal, which is a
   sibling of #main and therefore outside the .kb block. Scoping it cost the
   modal its entire cover preview. */
.alb-cover{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:14px 14px 0 0;
 position:relative;display:grid;place-items:center;
 background:linear-gradient(140deg,#1B2A6B,#31408F)}
.alb-cover img{width:100%;height:100%;object-fit:cover;display:block;
 position:absolute;inset:0;background:#1B2A6B}
.alb-cover img.gone{display:none}
.alb-ini{font-size:26px;font-weight:800;letter-spacing:.06em;color:#fff;opacity:.85}
.kb .alb-edit{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.94)}
.kb .res-thumb{height:132px;background:var(--kb-navy-soft);display:grid;place-items:center;overflow:hidden}
.kb .res-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kb .res-thumb img.gone{display:none}
.kb .res-body{padding:14px 16px}
.kb .vw-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border-radius:14px;
 padding:10px 12px;box-shadow:var(--kb-sh);margin-bottom:12px}
.kb .vw-title{flex:1;min-width:180px}
.kb .vw-title b{display:block;font-size:15px;font-weight:800;line-height:1.3;color:var(--kb-navy)}
.kb .vw-title small{font-size:12px;color:var(--kb-soft)}
.kb .vw-tools{display:flex;gap:8px;flex-wrap:wrap}
.kb .vw-frame{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--kb-sh);
 height:calc(100vh - 250px);min-height:460px}
.kb .vw-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.kb .vw-hint{font-size:12.5px;color:var(--kb-soft);margin-top:10px}
.kb .vw-ext{background:#fff;border-radius:14px;box-shadow:var(--kb-sh);padding:46px 24px;text-align:center}
.kb .vw-ext h2{font-size:20px;font-weight:800;margin-bottom:8px}
.kb .vw-ext p{color:var(--kb-soft);max-width:48ch;margin:0 auto}

/* Her header: a full-width search bar, pill tabs where the live one is a raised
   white card, and a thin identity strip. No hero headline competing with the
   search — on her hub you land on the work, not on a banner about the work. */
.kb .kb-search{background:#fff;border:2px solid var(--kb-line);border-radius:14px;
 display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:var(--kb-sh);margin-bottom:14px}
.kb .kb-search:focus-within{border-color:var(--kb-blue)}
.kb .kb-search input{flex:1;border:none;outline:none;background:transparent;font:15px inherit;
 color:var(--kb-ink);min-width:0}
.kb .kb-mag{color:var(--kb-soft);font-size:15px}
.kb .kb-tabrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kb .kb-tabrow .tabs{flex:1;border-bottom:none;margin:0}
.kb .tabs.pills button{border:2px solid transparent;border-radius:11px;padding:9px 15px;margin:0;
 color:var(--kb-soft);font-size:14px}
.kb .tabs.pills button:hover{color:var(--kb-navy)}
.kb .tabs.pills button.on{background:#fff;border-color:#fff;color:var(--kb-navy);box-shadow:var(--kb-sh)}
.kb .tabs.pills .ct{background:var(--kb-line);color:var(--kb-soft)}
.kb .tabs.pills button.on .ct{background:var(--kb-blue-soft);color:var(--kb-blue-deep)}
.kb .kb-who{background:#fff;border-radius:12px;padding:11px 16px;box-shadow:var(--kb-sh);
 display:flex;align-items:center;gap:11px;margin-bottom:16px;font-size:13.5px;color:var(--kb-soft)}
.kb .kb-who b{color:var(--kb-ink);font-size:14px}
.kb .role-chip{display:inline-block;padding:2px 11px;border-radius:999px;background:var(--kb-navy);
 color:#fff;font-size:11.5px;font-weight:700}
.kb .kb-count{margin-left:auto;font:700 12.5px/1 Montserrat,sans-serif;color:var(--kb-todo);
 background:transparent;border:1.5px solid var(--kb-todo);border-radius:999px;padding:7px 13px;cursor:pointer}
.kb .kb-count:hover{background:var(--kb-todo);color:#fff}
.kb .kb-count.on{background:var(--kb-todo);color:#fff}
.kb .kcard h2{font-size:23px;letter-spacing:-.02em;color:var(--kb-navy);line-height:1.2}
.kb .kcard{padding:22px 24px;margin-bottom:16px}
.kb .dates{font-size:13px;margin-top:5px}
.kb .actions{margin-top:18px}
/* A definition on hover, for the numbers whose name does not explain them.
   CSS only — no JS, nothing for the CSP to block, and it works on any tile. */
.kpi.tip{position:relative}
.kpi.tip .qm{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
 background:var(--panel);color:var(--mut);font-size:9px;font-weight:800;vertical-align:1px;margin-left:3px}
.kpi.tip::after{content:attr(data-tip);position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:20;
 background:var(--navy);color:#fff;font-size:12px;font-weight:500;line-height:1.5;padding:11px 13px;
 border-radius:10px;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.kpi.tip:hover::after,.kpi.tip.open::after{opacity:1}
/* v6.2.2 (audit C15): the "?" is a button so a tap can open the tip */
button.qm{border:0;padding:0;cursor:pointer;font-family:inherit;line-height:1}

/* CALENDAR — what is coming. Three kinds of mark, and only one of them is a
   promise, so the other two are drawn as hints rather than appointments. */
/* Seven equal columns, whatever is in them. minmax(0,1fr) is the difference
   between "equal" and "equal until a long chip widens one": with plain 1fr a
   day's content sets the column's minimum width, the header stops lining up
   with the grid, and the right-hand days fall off the edge with no way to
   reach them. The calendar scrolls on its own when the window is smaller than
   it is, and the day names stay put at the top while it does. */
.cal{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:auto;
 max-height:calc(100vh - 210px)}
.cal-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--panel);
 border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:2;min-width:840px}
.cal-head div{padding:9px 10px;font-size:10px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:var(--mut);text-align:center;min-width:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:840px}
.cal-day{min-height:104px;min-width:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
 padding:7px 8px 9px;display:flex;flex-direction:column;gap:3px}
.cal-day:nth-child(7n){border-right:none}
.cal-day.out{background:#FAFBFC;color:var(--mut)}
.cal-day.out .dnum{opacity:.45}
.cal-day.has{cursor:pointer}
.cal-day.has:hover{background:var(--cyan50)}
.cal-day.picked{background:var(--cyan50);box-shadow:inset 0 0 0 2px var(--navy)}
.cal-day.today .dnum{color:var(--navy)}
.dnum{font-size:12.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
.tdot{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
 background:var(--navy);border-radius:9999px;padding:1px 6px}
/* An event's text wraps inside its column. It never widens the column. */
.cev{font-size:11px;line-height:1.32;padding:2px 6px;border-radius:5px;overflow:hidden;
 white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.cev b{font-variant-numeric:tabular-nums}
.cev.c-firm{background:var(--navy);color:#fff;font-weight:600}
.cev.c-rhythm{background:var(--cyan100);color:var(--cyan700)}
/* Initiative work on the calendar. Distinct from a booked call, which is navy
   and a promise, and from a rhythm date, which is arithmetic. */
.cev.c-init{background:#EDE7FB;color:#4B2E96;font-weight:600}
.cev.c-season{background:#FFF3D6;color:#8A5A00}
.cmore{font-size:10.5px;color:var(--mut);font-weight:700;padding-left:6px}
.cal-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;
 font-size:12px;font-weight:600;color:var(--mut)}
.clg{display:inline-flex;align-items:center;gap:6px}
.clg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.clg i.c-firm{background:var(--navy)}
.clg i.c-rhythm{background:var(--cyan100);border:1px solid var(--cyan)}
.clg i.c-init{background:#EDE7FB;border:1px solid #8B6FD6}
.clg i.c-season{background:#FFF3D6;border:1px solid #E0B457}
@media(max-width:900px){.cal-day{min-height:78px}.cev{font-size:10px}}

/* CRM PANEL — who to ring, opened where the call is about to be made */
.crm{max-width:900px}
.crm-top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
 flex-wrap:wrap;margin-bottom:14px}
.crm-name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.crm-clock{background:var(--navy);color:#fff;border-radius:11px;padding:9px 14px;text-align:right;min-width:132px}
.crm-clock.none{background:var(--panel);color:var(--mut)}
/* a sign-off that still stands, and one the record has moved out from under */
.crm-clock.good{background:#0F7A4E}
.crm-clock.warn{background:#8A5A00}
.crm-clock .l{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.75;font-weight:700}
.crm-clock .v{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.crm-clock .mini{color:inherit;opacity:.7;margin-top:2px}
.crm-c{background:#fff;border:1px solid var(--hair);border-radius:10px;padding:11px 14px;margin-bottom:8px}
.crm-c.old{opacity:.62;background:var(--canvas)}
.crm-c-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.crm-k{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.crm-tools{margin-left:auto;display:flex;gap:5px}
.crm-c-n{font-size:14.5px;font-weight:700;line-height:1.3}
.crm-c-n .mini{font-weight:600}
.crm-c-l{font-size:13px;margin-top:3px}
.crm-c-l a{color:var(--navy);font-weight:600;text-decoration:none}
.crm-c-l a:hover{text-decoration:underline}
/* v6.2.1 (N70 C1): this person is also a contact on another account */
.crm-shared{margin-top:6px;padding:6px 9px;border-radius:7px;background:var(--warmbg);
  border-left:3px solid var(--alert);font-size:12px;line-height:1.4;color:var(--ink);cursor:pointer}
.crm-shared:hover{filter:brightness(.98)}
.crm-shared b{font-weight:700}
.crm-addr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 8px}
.crm-a{background:#fff;border:1px solid var(--hair);border-radius:10px;padding:11px 14px}
.crm-a-b{font-size:13px;line-height:1.55;margin-top:4px}
.crm-sec{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);
 margin:16px 0 8px;display:flex;align-items:center;gap:9px}
.crm-sec::after{content:"";flex:1;height:1px;background:var(--hair)}
.crm-empty{background:#fff;border:1px dashed var(--hair);border-radius:10px;padding:12px 14px;
 font-size:13px;color:var(--mut);margin-bottom:8px}
.crm-a-h{display:flex;align-items:center;gap:8px;min-height:22px}
/* label, rule, then the button - the rule is a ::after so it is ordered here */
.crm-sec .btn{order:3;margin-left:4px}
.crm-sec::after{order:2}
/* the display editor: one line per fixture */
/* pick every way it happened, not one of them */
/* the account's views, side by side, so none of them closes the window */
.dtabs{display:flex;gap:4px;margin-top:12px;background:var(--panel);padding:3px;border-radius:10px}
.dtab{flex:1;font:700 11.5px/1 Montserrat,sans-serif;padding:8px 6px;border-radius:8px;border:none;
 background:transparent;color:var(--mut);cursor:pointer;letter-spacing:.02em}
.dtab:hover{color:var(--navy)}
.dtab.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(16,24,40,.08)}
/* THEIR YEAR - the four stages of an account's cycle, as dated windows.
   A stage that is off is still shown, greyed, because the AM needs to see the
   whole shape of the year to decide what is missing. */
.cyc{border:1px solid var(--hair);border-radius:11px;padding:11px 14px;background:#fff;
 margin-bottom:9px;transition:.12s}
.cyc.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(46,49,146,.06)}
.cyc:not(.on) b{color:var(--mut)}
.cyc-h{display:flex;align-items:center;gap:9px}
.cyc-h b{font-size:14px;font-weight:800;letter-spacing:-.01em}
.cyc-tog{width:24px;height:24px;flex:0 0 24px;border-radius:7px;border:1.5px solid var(--hair);
 background:#fff;color:var(--mut);font:800 13px/1 Montserrat,sans-serif;cursor:pointer;
 display:grid;place-items:center;transition:.12s}
.cyc-tog:hover{border-color:var(--navy);color:var(--navy)}
.cyc-tog.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cyc-when{margin-left:auto;font:800 12px/1 Montserrat,sans-serif;color:var(--navy);
 background:var(--cyan50);border-radius:var(--pill);padding:6px 11px;white-space:nowrap}
.cyc-when i{font-style:normal;font-weight:600;color:var(--cyan700)}
.cyc .mini{margin-top:5px;line-height:1.45}
.cyc-d{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:9px;
 padding-top:9px;border-top:1px dashed var(--hair);font-size:12.5px;color:var(--mut)}
/* where they are in their year, read-only, on the account */
.stagebar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
 padding:9px 12px;background:var(--cyan50);border:1px solid var(--cyan100);border-radius:9px}
.stagebar .now{font:800 12.5px/1 Montserrat,sans-serif;color:var(--navy)}
.stagebar .nx{font-size:12px;color:var(--cyan700)}
.stagebar .sep{color:var(--cyan100)}
.stagebar.quiet{background:var(--panel);border-color:var(--hair)}
.stagebar.quiet .now{color:var(--mut)}
.stg{font:800 9.5px/1 Montserrat,sans-serif;letter-spacing:.07em;text-transform:uppercase;
 padding:4px 7px;border-radius:5px;white-space:nowrap}
.stg.placement{background:#E7EBF7;color:#2B3A78}
.stg.peak{background:#DDF3FB;color:#0F6A87}
.stg.review{background:#F0EFE6;color:#6B6446}
.stg.plan{background:#E9F3EA;color:#3D6B43}
/* what a location carries, at a glance in a table cell */
.pchips{display:flex;flex-wrap:wrap;gap:4px}
.pchip{font:800 9.5px/1 Montserrat,sans-serif;letter-spacing:.07em;text-transform:uppercase;
 padding:4px 7px;border-radius:5px;white-space:nowrap}
.pchip.stk{background:#E7EBF7;color:#2B3A78}
.pchip.mag{background:#DDF3FB;color:#0F6A87}
.pchip.dsp{background:#F0EFE6;color:#6B6446;cursor:help}
.pchip.ret{background:#EFEFF1;color:#8A8F9A;cursor:help;text-decoration:line-through}
/* how long they have been a customer */
.tenure{font:800 12px/1 Montserrat,sans-serif;color:var(--navy);margin-top:6px;
 display:flex;align-items:baseline;gap:7px}
/* Racks that are still standing but are not being filled. Deliberately small:
   they are context, not work. Grey so nobody mistakes one for capacity. */
.retired-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;
 padding:8px 11px;background:var(--canvas);border:1px dashed var(--hair);border-radius:9px}
.retired-strip .rl{font:800 9px/1 Montserrat,sans-serif;letter-spacing:.14em;
 text-transform:uppercase;color:var(--mut)}
.rchip{font:700 11px/1 Montserrat,sans-serif;color:var(--mut);background:#fff;
 border:1px solid var(--hair);border-radius:5px;padding:5px 8px;text-decoration:line-through}
.mchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:5px}
.mchip{font:700 12px/1 Montserrat,sans-serif;padding:8px 13px;border-radius:999px;cursor:pointer;
 border:1.5px solid var(--hair);background:#fff;color:var(--mut);transition:.12s}
.mchip:hover{border-color:var(--navy);color:var(--navy)}
.mchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.dz{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dz.off select,.dz.off input{opacity:.5;text-decoration:line-through}
/* a fixture that is no longer made still has to render - it is on the floor */
.sku.retired .nm2{color:var(--mut)}
.inp:disabled{background:var(--panel);color:var(--mut);cursor:not-allowed}
.dz-h{display:flex;gap:8px;font-size:9.5px;font-weight:800;letter-spacing:.13em;
 text-transform:uppercase;color:var(--mut);padding-bottom:6px}
@media(max-width:820px){.crm-addr{grid-template-columns:1fr}}
/* SOURCE OF TRUTH — the review checklist. Deliberately not a score out of ten:
   a blank display count on a store with no display is correct, so the marks say
   what is on file, not what is wrong. */
.sot{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:#fff}
.sot-r{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:13px;
 border-top:1px solid #F1F2F4;color:var(--mut)}
.sot-r:first-child{border-top:0}
.sot-r.ok{color:var(--ink)}
.sot-m{width:16px;flex:0 0 16px;text-align:center;font-weight:800;color:var(--hair)}
.sot-r.ok .sot-m{color:#0F7A4E}
.sot-v{margin-left:auto;font:700 11.5px/1 Montserrat,sans-serif;color:var(--mut);
 white-space:nowrap}
/* the commercial half of a location: how it ships, how it pays, what it was
   given on price. Two-column so a rep scanning for "terms" finds it in one pass */
.tgrid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:7px;font-size:13px}
.tk{font:700 11px/1.5 Montserrat,sans-serif;letter-spacing:.04em;color:var(--mut);
 text-transform:uppercase;white-space:nowrap}
.tv{font-weight:600;line-height:1.5}
.tnote{margin-top:9px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.5}
.tnote.ok{background:#EAF5EE;border:1px solid #CFE7D8}
/* what they asked for is drawn as a note, not as a term - it is not agreed yet */
.tnote.want{background:#FBF4E6;border:1px dashed #E4D2A8}
.tnote .mini{display:block;margin-top:4px}
.crm-c-p{font-size:12px;color:var(--cyan700);margin-top:3px}
/* SCHEDULED APPOINTMENTS — above the board, because somebody is expecting you.
   Cards rather than rows: a rep glances at this before they start dialling. */
.apptbar{margin:20px 0 4px;padding:15px 17px;background:var(--navy);border-radius:var(--r);color:#fff}
.apptbar-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.apptbar-h b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.apptbar-h .mini{color:#A2DEF5;max-width:62ch}
.appts{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}
.appt{flex:0 0 214px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
 border-radius:10px;padding:11px 13px;cursor:pointer;transition:.12s}
.appt:hover{background:rgba(255,255,255,.16)}
.appt.now{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.appt.now:hover{background:#22BDF5}
.appt-w{font:800 10px/1 Montserrat,sans-serif;letter-spacing:.13em;text-transform:uppercase;
 color:#A2DEF5}
.appt.now .appt-w{color:var(--navy700)}
.appt-n{font-weight:800;font-size:14px;letter-spacing:-.01em;margin-top:5px;line-height:1.25}
.appt-r{font-size:12px;margin-top:5px;line-height:1.4;opacity:.9}
.appt .mini{color:inherit;opacity:.72;margin-top:4px}
/* the same appointment where it lands in the board itself */
.row.appt-row td{background:var(--cyan50)}
.row.appt-row .nm{color:var(--navy)}
/* an initiative action that is not due yet is still shown - an AM wants to see
   what is coming - but it is not competing for attention with what is late */
.row.quiet td{opacity:.62}
.row.quiet:hover td{opacity:1}
/* picking accounts for an initiative: a long list read quickly, so the name
   carries the weight and everything else is a whisper beside it */
.ia-r{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #F1F2F4;
 cursor:pointer;font-size:13px}
.ia-r:first-child{border-top:0}
.ia-r:hover{background:var(--canvas)}
.ia-n{flex:1;font-weight:700;min-width:0}
.ia-n .par{display:block;font-weight:500}
.ia-r .mny{width:96px;text-align:right}
/* THREE JUDGEMENTS, NEVER ONE NUMBER. Five pips per dimension, side by side,
   so a lead that is a perfect fit with no intent reads differently at a glance
   from one that is mediocre at everything - which a single score would not. */
.sbar{display:inline-flex;gap:2px;vertical-align:middle}
.sbar i{width:6px;height:13px;border-radius:2px;background:var(--hair);display:block}
.sbar i.on{background:var(--navy)}
tr.row:hover .sbar i.on{background:var(--cyan700)}
/* a note that is a warning rather than an explanation */
.note.warn{background:#FBF4E6;border-color:#E4D2A8}

/* THE SIGN-IN MARK. On white the logo needs no tile - it is drawn to sit on a
   page. Sticker Pack above, Encore below: the company is the thing somebody
   recognises, and Encore is what they came here to use. */
.login .spmark{display:block;margin:0 auto 14px;width:76px;height:76px}
.login .spwm{font:800 12px/1 Montserrat,sans-serif;letter-spacing:.24em;
 text-transform:uppercase;color:var(--navy);text-align:center;margin-bottom:10px}

/* the Review tab's section walk: an open section drops its real, editable
   content in underneath the row it belongs to, indented so it reads as part of
   that row rather than as a new list */
.rev-open{border-left:3px solid var(--cyan700,#0B7FA8);background:#FAFBFC;
  border-radius:0 8px 8px 0;padding:12px 14px;margin:2px 0 12px 22px}
.rev-open .crm-sec{margin-top:0}
.rev-open .crm-a{margin-top:0}

/* ── the account clock ────────────────────────────────────────────────────
   Beside every account name, in every list an Account Manager works from: what
   time it is there, and whether that means anything can be done about it.
   Deliberately a flat, saturated pill - it has to be readable at a glance and
   has to not look like the soft 15% row tints that say what KIND of work it is.
   Those two things answer different questions and must not be confusable. */
.tzc{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  padding:1px 6px;border-radius:999px;white-space:nowrap;vertical-align:middle;
  margin-left:6px;letter-spacing:.01em;font-variant-numeric:tabular-nums;cursor:default}
.tzc.ok{background:#0F7A4E;color:#fff}
.tzc.shut{background:#D12D45;color:#fff}
.tzc::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}

/* ── availability editor ─────────────────────────────────────────────────── */
.hrow{display:grid;grid-template-columns:26px 96px 1fr 1fr;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px solid #F1F2F4}
.hrow:last-child{border-bottom:0}
.hrow.off{opacity:.45}
.hrow .hd{font-weight:600;font-size:12.5px}
.hrow input[type=time]{width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:12.5px}

/* ── My Day work bands ────────────────────────────────────────────────────
   The row tint says where this work came from. 15% opacity throughout, set as a
   CSS variable per row so one colour configuration drives both the row and the
   key above the table - they cannot drift apart because there is only one. */
tr.bandrow{background:color-mix(in srgb, var(--band) 15%, transparent)}
tr.bandrow:hover{background:color-mix(in srgb, var(--band) 24%, transparent)}
.bandkey{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  margin:0 0 7px}
.bandkey .bk{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--mut);
  white-space:nowrap}
.bandkey .sw{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.12);
  background:color-mix(in srgb, var(--band) 55%, transparent)}
.bandhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}

/* the bulk bar for My Day reuses the assign bar's shape */
.daybulk{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:60;
  display:flex;gap:9px;align-items:center;background:var(--navy);color:#fff;
  padding:10px 14px;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.28);
  transition:transform .18s ease}
.daybulk.up{transform:translate(-50%,0)}
.daybulk .btn{padding:6px 11px;font-size:12px}
.daybulk .n{font-weight:700;font-size:12.5px;margin-right:4px}
.daybulk .mini{color:#fff;opacity:.85;max-width:230px;line-height:1.3}

/* ── v5.15: the profile note, the yes/no flags, phone kinds ─────────────── */
.pnote{background:#FFF8E6;border:1px solid #F0D9A0;border-radius:var(--r);padding:12px 14px;margin:0 0 14px}
.pnote.none{background:var(--panel);border-color:var(--hair)}
.pnote.on{background:#fff}
.pnote-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pnote-t{font-size:13.5px;line-height:1.45;color:var(--ink);white-space:normal}
.flags{display:flex;flex-direction:column;gap:6px}
.flag{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--hair);
 border-radius:var(--r);cursor:pointer;background:#fff}
.flag.on{border-color:var(--navy);background:var(--cyan50)}
.flag.ro{cursor:default;opacity:.8}
.flag input{margin-top:3px}
.flag b{font-size:13px}
.ptype{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
 background:var(--panel);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle}

/* ── P6 round 1 (V5.15.1) ─────────────────────────────────────────────────── */
/* #4 "Search matched: …" under an account found by a contact field */
.xsm{margin-top:3px;font-size:11px;line-height:1.35;color:var(--cyan700)}
.xsm b{font-weight:700}
/* #7 Their year: each end of a range is a button that opens a year-less
   mini calendar - twelve months across, that month's days below */
.cyc-date{font:700 12.5px/1 Montserrat,sans-serif;color:var(--navy);background:#fff;
 border:1.5px solid var(--hair);border-radius:8px;padding:7px 10px;cursor:pointer;transition:.12s}
.cyc-date:hover,.cyc-date.on{border-color:var(--navy);background:var(--cyan50)}
.mcal{margin-top:9px;padding:10px 11px;border:1px solid var(--cyan100);border-radius:10px;background:var(--cyan50)}
.mcal-h{font-size:12.5px;color:var(--navy)}
.mcal-m{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}
.mcal-t{font:800 12px/1 Montserrat,sans-serif;color:var(--navy);margin:10px 0 6px;letter-spacing:.02em}
.mcal-d{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal button{font:600 12px/1 Montserrat,sans-serif;color:var(--ink);background:#fff;border:1px solid var(--hair);
 border-radius:7px;padding:7px 0;cursor:pointer;min-width:0}
.mcal button:hover{border-color:var(--navy);color:var(--navy)}
.mcal button.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* v6.4.1 (N73): the other accounts a shared contact belongs to, behind "and N more" */
.crm-shared .lnk{background:none;border:0;padding:0;margin-left:4px;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.crm-shared-more{margin:4px 0 0 12px;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.crm-shared-more a{cursor:pointer;color:var(--navy)}

/* ── v6.6.1: phone and small tablet ────────────────────────────────────────
   Under 900px the 236px rail becomes a top bar: the wordmark and a Menu
   button; the menu and the signed-in block open over the page as a sheet
   (closed again by choosing a screen - app.js setMenu). Content is full width,
   cards and lists reflow to one column, wide tables scroll inside their card
   with the account name pinned, every control is at least 44px, and a modal
   is the whole screen under 600px. The trade show line, hidden in the narrow
   rail since 6.1.0, sits at the top of the page under 1080px (#tstop). */
.menubtn{display:none}
#tstop{display:none}
.railbody{display:flex;flex-direction:column;flex:1;min-height:0}
.hb.on .hv{opacity:1}
@media(max-width:1080px){
 .app{display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
 .rail{grid-row:1 / span 2;grid-column:1}
 #tstop{display:block;grid-row:1;grid-column:2}
 #tstop .tsbar{display:block;margin:0;border-radius:0;border-width:0 0 1px;background:var(--cyan50);color:var(--ink);font-size:12.5px;padding:10px 22px}
 #tstop .tsbar b{color:var(--navy)}
 #tstop .tsbar button{display:inline-block;margin:0 0 0 8px;color:var(--cyan700);font-size:12px;min-height:44px}
 .main{grid-row:2;grid-column:2}
}
@media(max-width:900px){
 .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100dvh}
 .rail{grid-row:1;grid-column:1;position:sticky;top:0;z-index:65;width:auto;flex:none;height:auto;
  flex-direction:row;align-items:center;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 #tstop{grid-row:2;grid-column:1}
 #tstop .tsbar{padding:8px max(16px,env(safe-area-inset-left))}
 .main{grid-row:3;grid-column:1;max-width:none;
  padding:18px max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .brand{flex:1;min-width:0;padding:0}
 .brand>div{flex:1;min-width:0}
 .brand b{display:block}
 .brand .menubtn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;min-height:44px;min-width:44px;
  padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  font:700 12px Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
 .brand .menubtn span{display:block;width:16px;height:2px;margin:0;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
 .rail.open .menubtn span{display:none}
 .railbody{display:none}
 .rail.open .railbody{display:flex;position:fixed;left:0;right:0;bottom:0;top:calc(60px + env(safe-area-inset-top));z-index:66;background:var(--navy);
  overflow-y:auto;overscroll-behavior:contain;
  padding:6px max(0px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left))}
 #navwrap{flex:0 0 auto;overflow:visible}
 .tsbar{display:none}
 .nav a span.lb,.navlab{display:block}
 .nav a{min-height:48px;font-size:15px}
 .nav .nghd{min-height:44px;padding:9px 22px 5px;justify-content:flex-start;font-size:11.5px}
 .nav .nghd .ngl{display:inline}
 .nav .ngrp.shut .nghd .gct{display:inline-block}
 .navedit{min-height:44px}
 .who{display:block;margin-top:18px}
 .who .btn{min-height:44px}
 body.sheet-open{overflow:hidden}
 /* one column */
 h1{font-size:27px}
 .lh>div:first-child{min-width:0;flex-basis:100%}
 .tools{justify-content:flex-start}
 .cols{grid-template-columns:1fr}
 .grid2{grid-template-columns:1fr}
 /* 44px targets; nothing that only answers to a hover */
 .btn,.btn.sm,.chip,.chip.sm,.conf,.mrow,.act{min-height:44px}
 .tabs{overflow-x:auto;scrollbar-width:none}
 .tabs button{min-height:44px;white-space:nowrap}
 .dtab{min-height:44px}
 .dh .x{min-width:44px;min-height:44px;margin:-10px -10px 0 0}
 .cb{width:22px;height:22px}
 .tgl{width:48px;height:28px;flex-basis:48px}
 .tgl i{width:22px;height:22px}
 .tgl.on i{left:23px}
 select,input:not([type=checkbox]):not([type=radio]),textarea{font-size:16px;min-height:44px}
 /* wide tables: scroll inside the card, the account stays in sight */
 .card table :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#fff}
 .card table th:first-child{background:#FCFCFD}
 .card table:is(:has(thead th:first-child:empty),:has(thead th:first-child>.cb)) :is(th,td):first-child{width:48px;min-width:48px;max-width:48px;padding-left:10px;padding-right:6px}
 .card table:is(:has(thead th:first-child:empty),:has(thead th:first-child>.cb)) :is(th,td):nth-child(2){position:sticky;left:48px;z-index:1;background:#fff;
  max-width:52vw;min-width:150px;white-space:normal;box-shadow:6px 0 6px -6px rgba(16,24,40,.18)}
 .card table:is(:has(thead th:first-child:empty),:has(thead th:first-child>.cb)) th:nth-child(2){background:#FCFCFD}
 .card table tr.sel>:is(td,th){background:var(--cyan50)}
 /* the account card (drawer) and the bulk bars */
 .drawer{width:100%;max-width:100vw;border-left:0;padding-bottom:env(safe-area-inset-bottom)}
 .dh{padding:max(18px,env(safe-area-inset-top)) 18px 16px}
 .dsec{padding:18px}
 .bulk,.daybulk{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));transform:translateY(160%);flex-wrap:wrap;justify-content:space-between}
 .bulk.up,.daybulk.up{transform:none}
 .daybulk .btn{padding:6px 12px}
}
@media(max-width:600px){
 .kpis,.kpis.five{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .kpi{padding:14px;min-width:0;overflow-wrap:anywhere}
 .kpi .v{font-size:23px}
 .modal{padding:0;place-items:stretch}
 .mpanel{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .mlist{flex:1}
 .mfoot{flex-wrap:wrap}
}
/* v6.11.0 (0174) - Profile keywords on the Stats tab: one row per tag, its
   weight as a bar, up / down / remove on the right; the picker under it. */
.pkw-list{list-style:none;margin:0;padding:0}
.pkw{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(70px,1fr) 42px auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F1F2F4}
.pkw:last-child{border-bottom:0}
.pkw-l{font-size:13px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.pkw-b{height:12px;border-radius:5px;background:var(--panel);overflow:hidden}
.pkw-b i{display:block;height:100%;background:var(--cyan);border-radius:5px}
.pkw-w{font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.pkw-t{display:flex;gap:4px}
.pkw-t .btn{min-width:32px;padding-left:8px;padding-right:8px}
.pkw-add{margin-top:12px}
.pkw-add input{width:100%;box-sizing:border-box}
.pkw-hits{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.pkw-hit{text-align:left;border:1px solid var(--hair);background:#fff;border-radius:8px;padding:8px 10px;font:600 13px Montserrat,sans-serif;color:var(--ink);cursor:pointer}
.pkw-hit:hover,.pkw-hit:focus-visible{border-color:var(--cyan);background:var(--cyan50)}
.pkw-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:900px){
 .pkw{grid-template-columns:minmax(0,1fr) 42px;grid-template-areas:"l w" "b b" "t t";row-gap:6px}
 .pkw-l{grid-area:l}.pkw-w{grid-area:w}.pkw-b{grid-area:b}.pkw-t{grid-area:t;justify-content:flex-end}
 .pkw-t .btn{min-width:44px;min-height:44px}
 .pkw-hit{min-height:44px}
}

/* v6.23.0 (#105) - the "?" button: small, round, bottom right, above the
   drawer so it works with an account open, clear of the centred bulk bars. */
/* v6.25.2 (#105, reopened): a white circle beside white rows was easy to miss,
   and `font: ... inherit` is not valid shorthand (it fell back to 13px Arial).
   Now a solid navy circle with a white bold "?" that reads at a glance;
   44x44, Encore's touch-target size, in both apps. */
.helpq{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  z-index:85;width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  background:var(--navy,#1B2A6B);color:#fff;font:800 18px/1 Montserrat,system-ui,sans-serif;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,18,19,.30)}
.helpq:hover{background:var(--cyan,#21C1E8);color:var(--navy,#1B2A6B)}
.helpq:focus-visible{outline:3px solid var(--cyan,#21C1E8);outline-offset:2px}
@media print{.helpq{display:none}}