: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 C for Cadence. 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:10px 22px;color:#D4D5E7;text-decoration:none;font-size:13.5px;font-weight:500;border-left:3px solid transparent;cursor:pointer}
.nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav a.on{color:#fff;background:rgba(0,174,239,.14);border-left-color:var(--cyan);font-weight:700}
.nav a .ct{font-size:11px;font-weight:700;color:#A2DEF5;background:rgba(255,255,255,.09);padding:2px 7px;border-radius:var(--pill)}
.nav a.on .ct{background:var(--cyan);color:var(--navy)}
.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}
.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}
.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}
.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.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
   Cadence'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 Cadence's navy, which is why the two sit together without a seam. */
.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{opacity: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. */
.cal{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel);
 border-bottom:1px solid var(--hair)}
.cal-head div{padding:9px 10px;font-size:10px;font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:var(--mut);text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:104px;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}
.cev{font-size:11px;line-height:1.32;padding:2px 6px;border-radius:5px;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.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}
.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, Cadence below: the company is the thing somebody
   recognises, and Cadence 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}