/* ============================================================
   SLATE — design system
   Written once, from the tokens up. Two colour ramps, one type
   scale, one spacing rhythm, one radius scale, three elevations.
   Nothing below invents a value; everything reads a token.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  /* accent: bright azure, clear of the scoring scale */
  --a25:#F0FAFF; --a50:#E0F4FE; --a100:#BAE7FD; --a200:#7DD3FC;
  --a400:#22B8F0; --a500:#0BA5EC; --a600:#0086C9; --a700:#026AA2;
  /* neutrals */
  --n25:#FCFCFD; --n50:#F8FAFC; --n100:#F1F4F8; --n200:#E5E9EF; --n300:#D2D9E2;
  --n400:#98A4B3; --n500:#667283; --n600:#48566A; --n700:#333F51; --n900:#101828;
  /* results — semantic, never themed, never borrowed for brand */
  --s4:#079455; --s4-t:#DCFAE6; --s4-x:#05703F;
  --s3:#66C61C; --s3-t:#E4FBCC; --s3-x:#4B7D12;
  --s2:#DC6803; --s2-t:#FEF0C7; --s2-x:#B54708;
  --s1:#D92D20; --s1-t:#FEE4E2; --s1-x:#B42318;
  --s0:#E5E9EF;

  --bg:var(--n50); --surface:#FFFFFF; --surface-2:var(--n25); --surface-3:var(--n100);
  --line:var(--n200); --line-2:var(--n100);
  --text:var(--n900); --text-2:var(--n600); --text-3:var(--n500); --text-4:var(--n400);

  --on-accent:#FFFFFF;
  /* Text on an accent-filled control. Split from --on-accent because that one
     also carries the green and red buttons, and the score ramp is never themed.
     An agency's colour rewrites these two and leaves those alone. Hover gets its
     own because it swaps the background to a600. */
  --on-brand:var(--on-accent); --on-brand-hover:var(--on-accent);
  --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-full:999px;
  --e1:0 1px 2px rgba(16,24,40,.05);
  --e2:0 1px 3px rgba(16,24,40,.10),0 1px 2px rgba(16,24,40,.06);
  --e3:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);

  --t-xs:11.5px; --t-sm:12.5px; --t-md:13.5px; --t-base:15px;
  --t-lg:19px; --t-xl:28px; --t-2xl:34px; --t-3xl:52px;

  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px;

  --sans:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sidebar:252px;

  /* The browser draws scrollbars, checkboxes and select menus itself, and
     without this it draws them light on a dark board. accent-color puts the
     agency's colour on the tick boxes in the entity editor along with it. */
  color-scheme:light;
  accent-color:var(--a500);

  /* legacy aliases still spoken by inline styles in app.js */
  --ink:var(--text); --slate:var(--text-2); --slate-2:var(--text-3);
  --blue:var(--a500); --blue-deep:var(--a600); --blue-tint:var(--a50); --blue-line:var(--a200);
  --good:var(--s4); --good-tint:var(--s4-t); --warn:var(--s1); --warn-tint:var(--s1-t);
  --board:var(--bg); --card:var(--surface); --card-2:var(--surface-2);
  --border:var(--line); --border-2:var(--line-2);
  --shadow:var(--e1); --shadow-lg:var(--e3); --iw-blue:#63ABE0;
}
@media (prefers-color-scheme:dark){
  :root{
    --a25:#0A1B26; --a50:#0E2634; --a100:#123449; --a200:#1B5573;
    --a400:#38BDF8; --a500:#38BDF8; --a600:#7DD3FC; --a700:#BAE7FD;
    --n25:#101623; --n50:#0C111D; --n100:#1F2735; --n200:#283041; --n300:#3A4457;
    --n400:#6B7789; --n500:#94A0B0; --n600:#CDD3DC; --n700:#E4E8ED; --n900:#F5F6F8;
    --s4:#47CD89; --s4-t:#0A2E1C; --s4-x:#75E0A7;
    --s3:#85E13A; --s3-t:#1B2C0C; --s3-x:#A6E76A;
    --s2:#F79009; --s2-t:#2E1C05; --s2-x:#FDB022;
    --s1:#F97066; --s1-t:#2E110F; --s1-x:#FDA29B;
    --s0:#2A3444;
    color-scheme:dark;
    --surface:#161B26; --surface-2:#101623; --surface-3:#1F2735; --on-accent:#06121B;
    --e1:0 1px 2px rgba(0,0,0,.3); --e2:0 1px 3px rgba(0,0,0,.4); --e3:0 12px 20px rgba(0,0,0,.5);
  }
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--t-base);
     line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--a600);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em}
p{margin:0}
.hidden{display:none !important}
:focus-visible{outline:none;box-shadow:0 0 0 4px var(--a100)}

/* ---------- 3. primitives ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp2);border:1px solid var(--line);
     background:var(--surface);color:var(--text-2);border-radius:var(--r-sm);
     padding:9px 14px;font-weight:600;font-size:var(--t-md);cursor:pointer;white-space:nowrap;
     transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--n50);color:var(--text)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--a500);border-color:var(--a500);color:var(--on-brand);box-shadow:var(--e1)}
.btn.primary:hover{background:var(--a600);border-color:var(--a600);color:var(--on-brand-hover)}
.btn.good{background:var(--s4);border-color:var(--s4);color:var(--on-accent)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--a600)}
.btn.ghost:hover{background:var(--a25);color:var(--a700)}
.btn.danger{color:var(--s1);border-color:var(--line)}
.btn.danger:hover{background:var(--s1-t);border-color:var(--s1);color:var(--s1-x)}
.btn.danger-solid{background:var(--s1);border-color:var(--s1);color:var(--on-accent)}
.btn.danger-solid:hover{filter:brightness(.94)}
.btn.sm{padding:6px 11px;font-size:var(--t-sm)}
.backlink{border:0;background:transparent;color:var(--text-3);font-size:var(--t-md);font-weight:600;
          cursor:pointer;padding:4px 8px 4px 0;border-radius:var(--r-sm)}
.backlink:hover{color:var(--text)}

.input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
       padding:9px var(--sp3);outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--a400);box-shadow:0 0 0 4px var(--a100)}
textarea.input{min-height:120px;resize:vertical;line-height:1.6}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp4)}
label.fl{font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
label.fl input[type=checkbox]{margin-right:7px;vertical-align:-1px}
.colorrow{display:flex;align-items:center;gap:9px}
.colorrow input[type=color]{width:40px;height:38px;padding:2px;border:1px solid var(--line);
                            border-radius:var(--r-sm);background:var(--surface);cursor:pointer;flex:0 0 40px}

/* The client switcher menu. Fixed to the viewport rather than absolute inside
   the sidebar, because the sidebar clips its own overflow and a list of any
   length would be cut off by it. Position is set in JS from the button's rect. */
.cmenu{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);
       border-radius:var(--r-lg);box-shadow:var(--e3);padding:var(--sp2);overflow-y:auto;
       overscroll-behavior:contain}
.cmgrp{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp3) var(--sp2) 6px;
       font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
       color:var(--text-4)}
.cmgrp:first-child{padding-top:var(--sp2)}
.cmgrp .cav{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
            font-size:9px;font-weight:700;letter-spacing:0;border:0}
/* 28px lines the client names up under the agency name, past its mark. */
.cmitem{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
        padding:6px var(--sp2) 6px 28px;border-radius:var(--r-sm);color:var(--text)}
.cmitem:hover{background:var(--surface-3)}
.cmitem:focus-visible{outline:none;box-shadow:0 0 0 3px var(--a100)}
.cmitem.on{background:var(--a25)}
.cmitem.on .cmnm{color:var(--a700)}
.cmnm{display:block;font-weight:650;font-size:var(--t-md)}
.cmnone{padding:6px var(--sp2) 6px 28px;font-size:var(--t-sm);color:var(--text-4)}
.cmadd{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
       padding:6px var(--sp2) 8px 28px;border-radius:var(--r-sm);
       font-size:var(--t-sm);font-weight:600;color:var(--a600)}
.cmadd:hover{background:var(--a25)}
.cmadd:focus-visible{outline:none;box-shadow:0 0 0 3px var(--a100)}
.pill{display:inline-block;font-size:var(--t-xs);font-weight:600;padding:2px 9px;border-radius:var(--r-full)}
.pill.saved{background:var(--s4-t);color:var(--s4-x)}
.pill.open{background:var(--a50);color:var(--a700)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
      box-shadow:var(--e1);padding:var(--sp6) var(--sp8);margin-bottom:var(--sp5)}
.card h2{font-size:var(--t-lg)}
.card p.sub{font-size:var(--t-md);color:var(--text-3);margin:5px 0 var(--sp5);max-width:76ch;line-height:1.55}
.empty{padding:44px 20px;text-align:center;color:var(--text-3)}
.empty h3{margin:0 0 7px;font-size:16px;color:var(--text)}
.empty p{margin:0 auto 18px;font-size:var(--t-base);max-width:400px}
.foot{margin:var(--sp4) 0 0;font-size:var(--t-sm);color:var(--text-4);line-height:1.55}
.sub2{display:block;font-size:var(--t-xs);color:var(--text-4);font-weight:400;margin-top:2px}
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:10.5px;font-weight:700;
         letter-spacing:.09em;text-transform:uppercase;color:var(--a600)}
.ebn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-xs);
     background:var(--a50);color:var(--a700);font-size:10px;letter-spacing:0;font-variant-numeric:tabular-nums}
.minihd{margin:0 0 var(--sp3);font-size:var(--t-xs);font-weight:700;letter-spacing:.07em;
        text-transform:uppercase;color:var(--text-4)}
.minihd span{font-weight:500;letter-spacing:.02em;color:var(--text-4);text-transform:none;margin-left:6px}

table.list{width:100%;border-collapse:collapse;font-size:var(--t-md)}
table.list th{text-align:left;font-size:var(--t-sm);color:var(--text-3);font-weight:600;
              padding:0 var(--sp3) var(--sp3);border-bottom:1px solid var(--line)}
table.list td{padding:11px var(--sp3);border-bottom:1px solid var(--line-2);vertical-align:middle;
              font-variant-numeric:tabular-nums}
table.list tr:last-child td{border-bottom:0}
table.list tr:hover td{background:var(--surface-2)}
table.list tr td:first-child,table.list tr th:first-child{padding-left:2px}
table.list tr td:last-child,table.list tr th:last-child{padding-right:2px;text-align:right}
td.rowacts{white-space:nowrap;padding-right:2px}
td.rowacts .btn{margin-left:var(--sp2)}
td.rowacts .btn:first-child{margin-left:0}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp4)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp4);margin-bottom:var(--sp5)}
.kpigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp4);margin-bottom:var(--sp5)}
.row{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
/* A name over its second line: a domain, a service, an alias. Unstyled these ran
   together, so a competitor read as "Association Reservesreservestudy.com". */
.row .g{min-width:0;display:flex;flex-direction:column;gap:2px}
.row .g span{font-size:var(--t-sm);color:var(--text-3)}
.col{display:flex;flex-direction:column;gap:var(--sp3)}
.sp{flex:1}

/* ---------- 4. shell ---------- */
#shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
aside{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;
      position:sticky;top:0;height:100vh}
aside .top{padding:18px 16px 12px}
.brandlock{display:flex;align-items:center;gap:11px}
.slatemark{flex:0 0 34px;width:34px;height:34px;display:block}
.slatemark svg{width:34px;height:34px;display:block}
.mk-plate{fill:var(--a500)} .mk-1{fill:#fff} .mk-2{fill:#fff;opacity:.62} .mk-3{fill:#fff;opacity:.34}
.bl-txt{min-width:0;line-height:1.1}
.bl-txt b{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em}
.bl-txt span{display:block;margin-top:3px;font-size:10px;font-weight:650;letter-spacing:.07em;
             text-transform:uppercase;color:var(--text-4)}

.clientpick{padding:var(--sp3) var(--sp3) var(--sp3);margin-top:var(--sp3);border-top:1px solid var(--line)}
.cbtn{width:100%;display:flex;align-items:center;gap:var(--sp3);border:1px solid transparent;background:transparent;
      border-radius:var(--r);padding:8px 9px;cursor:pointer;text-align:left;
      transition:background .12s,border-color .12s}
.cbtn:hover{background:var(--surface-2);border-color:var(--line)}
.cav{flex:0 0 30px;width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;
     background:var(--a50);color:var(--a700);border:1px solid var(--a100);
     font-size:var(--t-xs);font-weight:800;text-transform:uppercase}
.cbody{flex:1;min-width:0}
.clbl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4)}
.cbtn .nm{display:block;font-weight:650;font-size:var(--t-md);margin-top:1px;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbtn .cv{flex:0 0 12px;width:12px;height:12px;color:var(--text-4)}
.cbtn:hover .cv{color:var(--text)}

nav{flex:1;padding:var(--sp2) var(--sp3);overflow-y:auto}
nav a{display:flex;align-items:center;gap:11px;padding:9px var(--sp3);border-radius:var(--r-sm);color:var(--text-3);
      font-weight:600;font-size:var(--t-md);cursor:pointer;margin-bottom:2px;transition:background .12s,color .12s}
nav a:hover{background:var(--surface-2);color:var(--text)}
nav a.on{background:var(--a50);color:var(--a700)}
nav a .ic{width:17px;text-align:center;opacity:.85}
nav .navsec{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-4);padding:16px 12px 7px}
aside .foot{border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:var(--sp3);margin:0}
aside .foot .who{flex:1;min-width:0}
aside .foot .who b{display:block;font-size:var(--t-sm);font-weight:650;color:var(--text);
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
aside .foot .who span{font-size:var(--t-xs)}

main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:var(--sp3);padding:16px 30px;border-bottom:1px solid var(--line);
        background:var(--surface);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.topbar h1{font-size:var(--t-lg);font-weight:750}
.topbar .sub{font-size:var(--t-md);color:var(--text-3)}
#topActions{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.content{padding:var(--sp6) 30px 80px;max-width:1220px;width:100%;margin-inline:auto}
.platformonly{display:none}
body.platform .platformonly{display:block}
body.platform a.platformonly{display:flex}
/* Shown to anyone who runs an agency. The platform owner sees it too: it is a
   faster route to one agency's people than going through the licensee screen. */
.teamonly{display:none}
body.agencyadmin a.teamonly{display:flex}
/* Email, role, remove. The select is sized to its content so the address keeps
   the room, and the row stacks rather than crushing on a narrow screen. */
.memrow{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;
        padding:10px 0;border-bottom:1px solid var(--line-2)}
.memrow:last-child{border-bottom:0}
.memrow .me-em{flex:1 1 200px;min-width:0;font-weight:600;font-size:var(--t-md);
               overflow:hidden;text-overflow:ellipsis}
.memrow .sel{width:auto;flex:0 0 auto;padding:6px 10px;font-size:var(--t-sm)}

/* ---------- 5. auth ---------- */
#auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.authcard{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--r-lg);box-shadow:var(--e3);padding:var(--sp8)}
.brandrow{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp5)}
.brandrow b{font-size:19px;letter-spacing:-.02em;display:block}
.brandrow span{font-size:var(--t-sm);color:var(--text-3)}
.mark{width:40px;height:40px;border-radius:50%;background:var(--a500);display:grid;place-items:center;
      color:var(--on-brand);font-size:20px;line-height:1;flex:0 0 40px}
.authcard p.lead{font-size:var(--t-base);color:var(--text-2);margin:0 0 20px}
.msg{margin-top:14px;font-size:var(--t-md);padding:11px var(--sp3);border-radius:var(--r-sm);line-height:1.5}
.msg.ok{background:var(--s4-t);color:var(--s4-x)}
.msg.err{background:var(--s1-t);color:var(--s1-x)}

/* ---------- 6. overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(16,24,40,.45);display:grid;place-items:center;
       padding:24px;z-index:100}
.modal{width:100%;max-width:520px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e3);
       padding:var(--sp6);max-height:86vh;overflow:auto}
.modal h3{font-size:var(--t-lg);margin-bottom:4px}
.modal p.sub{font-size:var(--t-md);color:var(--text-3);margin:0 0 18px}
.modal .acts{display:flex;justify-content:flex-end;gap:var(--sp2);margin-top:var(--sp5)}
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;
        display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--n900);color:var(--n25);padding:10px 16px;border-radius:var(--r);
       font-size:var(--t-md);font-weight:600;box-shadow:var(--e3)}
.toast.err{background:var(--s1)}
.tipbox{position:fixed;top:0;left:0;z-index:300;pointer-events:none;max-width:290px;white-space:pre-line;
        background:var(--n900);color:var(--n25);padding:9px var(--sp3);border-radius:var(--r);
        font-size:var(--t-sm);font-weight:500;line-height:1.45;box-shadow:var(--e3);opacity:0;transition:opacity .11s}
.tipbox.on{opacity:1}
.hastip{cursor:help}
.skel{background:linear-gradient(90deg,var(--n100),var(--n200),var(--n100));
      background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:var(--r)}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ---------- 7. report ---------- */
.rpthead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
         padding:4px 0 var(--sp5);border-bottom:1px solid var(--line)}
.rpttitle h1{font-size:var(--t-2xl);letter-spacing:-.035em;font-weight:800}
.rpttitle p{margin:5px 0 0;font-size:var(--t-base);color:var(--text-3);max-width:54ch}
.rptmeta{display:flex;gap:30px;margin:0;flex-wrap:wrap}
.rptmeta dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4)}
.rptmeta dd{margin:3px 0 0;font-size:var(--t-base);font-weight:650;font-variant-numeric:tabular-nums}
.rptnav{display:flex;gap:4px;flex-wrap:wrap;position:sticky;top:0;z-index:15;margin:0 -30px var(--sp5);
        padding:11px 30px;background:var(--bg);border-bottom:1px solid var(--line)}
.rptnav a{font-size:var(--t-sm);font-weight:600;color:var(--text-3);padding:5px 11px;
          border-radius:var(--r-full);white-space:nowrap;transition:background .12s,color .12s}
.rptnav a:hover{background:var(--surface);color:var(--text)}
.sec-feature{padding:var(--sp8) 30px}
.sec-feature>h2{font-size:24px;letter-spacing:-.03em;font-weight:750}
.sec-std{padding:var(--sp6)}
.sec-quiet{background:var(--surface-2);box-shadow:none}

.card.hero{display:block;border:0;background:linear-gradient(180deg,var(--a25),var(--surface) 60%);
  box-shadow:inset 0 0 0 1px var(--a100),var(--e1)}
.heroflex{display:flex;gap:var(--sp6);align-items:flex-start;margin-top:var(--sp4);flex-wrap:wrap}
.heronum{flex:0 0 170px}
.heronum b{display:block;font-size:var(--t-3xl);line-height:1;font-weight:800;letter-spacing:-.05em;
           color:var(--a600);font-variant-numeric:tabular-nums}
.heronum span{display:block;margin-top:7px;font-size:var(--t-xs);color:var(--text-4);
              text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.herotext{flex:1;min-width:260px}
.herotext .lead{font-size:16.5px;line-height:1.5;font-weight:550;margin:0 0 var(--sp3);max-width:62ch}
ul.blist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;max-width:74ch}
ul.blist li{position:relative;padding-left:18px;font-size:var(--t-base);line-height:1.55;color:var(--text-2)}
ul.blist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
                    background:var(--a400)}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
     padding:var(--sp4) 18px;box-shadow:var(--e1)}
.kpi .k{font-size:var(--t-md);font-weight:600;color:var(--text-3)}
.kpi .v{font-size:var(--t-xl);font-weight:750;letter-spacing:-.03em;line-height:1.1;margin-top:6px;
        font-variant-numeric:tabular-nums}
.kpi .d{font-size:var(--t-sm);font-weight:600;margin-top:var(--sp2)}
.kpi .d.up{color:var(--s4)} .kpi .d.down{color:var(--s1)} .kpi .d.flat{color:var(--text-4)}
.kpi .s{font-size:var(--t-sm);color:var(--text-3);margin-top:6px;line-height:1.45}

.lb{display:flex;flex-direction:column;gap:var(--sp3)}
.lbrow{display:flex;align-items:center;gap:var(--sp3);border-radius:var(--r-sm);transition:background .12s}
.lbrow.hastip:hover{background:var(--surface-2)}
.lbname{flex:0 0 190px;text-align:right;font-size:var(--t-md);font-weight:500;color:var(--text-2);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbbar{flex:1;height:8px;border-radius:var(--r-full);background:var(--n100);overflow:hidden}
.lbbar span{display:block;height:100%;border-radius:var(--r-full);background:var(--n300);min-width:4px;
            transition:width .25s ease}
.lbval{flex:0 0 48px;text-align:right;font-size:var(--t-md);font-weight:650;color:var(--text-2);
       font-variant-numeric:tabular-nums}
.lbrow.me .lbname,.lbrow.me .lbval{color:var(--text);font-weight:650}
.lbrow.me .lbbar span{background:var(--a500)}

.typerates{display:flex;flex-direction:column;gap:8px;margin:0 0 var(--sp5);padding:var(--sp4);
           background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
.tr{display:flex;align-items:center;gap:var(--sp3);font-size:var(--t-md);border-radius:var(--r-sm)}
.tr.hastip:hover{background:var(--surface)}
.trk{flex:0 0 100px;font-weight:650}
.trbar{flex:1;height:8px;border-radius:var(--r-full);background:var(--n100);overflow:hidden}
.trbar i{display:block;height:100%;border-radius:var(--r-full);background:var(--a500)}
.trv{flex:0 0 44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.trn{flex:0 0 86px;font-size:var(--t-xs);color:var(--text-4)}

table.hm{width:100%;border-collapse:collapse;font-size:var(--t-md);table-layout:fixed}
table.hm th{text-align:center;font-size:var(--t-sm);font-weight:600;color:var(--text-3);padding:0 var(--sp1) var(--sp3)}
table.hm th.q{text-align:left}
table.hm td{padding:4px 5px;border-top:1px solid var(--line-2);position:relative}
table.hm td.q,table.hm th.q{width:40%;padding:9px var(--sp3) 9px 0;color:var(--text-2);line-height:1.4}
table.hm td.q em{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.05em;
                 text-transform:uppercase;color:var(--text-4);margin-bottom:3px}
.cell{display:grid;place-items:center;width:100%;height:26px;border-radius:var(--r-full);
      font-size:var(--t-sm);font-weight:600;font-variant-numeric:tabular-nums;
      transition:filter .12s,transform .12s}
.cell.hastip:hover{filter:brightness(.97);transform:scale(1.04)}
.cell.top{background:var(--s4-t);color:var(--s4-x)}
.cell.short{background:var(--s3-t);color:var(--s3-x)}
.cell.men{background:var(--s2-t);color:var(--s2-x)}
.cell.abs{background:var(--s1-t);color:var(--s1-x)}
.cell.nofirm{background:var(--n100);color:var(--text-4)}
.cell.none{background:transparent}
.legend{display:flex;gap:var(--sp4);flex-wrap:wrap;align-items:center;margin-top:var(--sp4);
        font-size:var(--t-sm);color:var(--text-3)}
.legend i{width:10px;height:10px;border-radius:var(--r-full);display:inline-block;vertical-align:-1px;margin-right:6px}
.legend i.k.top{background:var(--s4)} .legend i.k.short{background:var(--s3)}
.legend i.k.men{background:var(--s2)} .legend i.k.abs{background:var(--s1)}
.legend i.k.nofirm{background:var(--n300)}
.legend .legnote{color:var(--text-4)}

/* Checking a key before saving it. The verdict sits beside the button so the
   cause and the fix stay in one line of sight. */
.keytest{display:flex;align-items:center;gap:var(--sp3);margin-top:11px;flex-wrap:wrap}
.keytest span{font-size:var(--t-sm);line-height:1.45;color:var(--text-3);max-width:46ch}
.keytest span.kok{color:var(--s4-x);font-weight:600}
.keytest span.kbad{color:var(--s1);font-weight:500}

/* The deep dive, folded into the summary rather than sitting beside it. Collapsed
   it shows the first finding and fades; expanded it runs to its natural height.
   max-height rather than display so the transition has something to animate. */
.deep{position:relative;overflow:hidden;max-height:132px;transition:max-height .32s ease;
      margin-top:var(--sp5);border-top:1px solid var(--line-2);padding-top:var(--sp4)}
.deep.open{max-height:none}
.deepbody section{margin:0 0 var(--sp4)}
.deepbody section:last-child{margin-bottom:0}
.deepbody h3{font-size:var(--t-base);font-weight:700;letter-spacing:-.015em;margin:0 0 5px;
             line-height:1.4;max-width:70ch}
.deepbody p{font-size:var(--t-md);line-height:1.6;color:var(--text-2);margin:0;max-width:74ch}
/* The fade is the affordance, so it must not sit over the text once open. */
.deepfade{position:absolute;left:0;right:0;bottom:0;height:66px;pointer-events:none;
          background:linear-gradient(to bottom,transparent,var(--a25) 82%)}
.deep.open .deepfade{display:none}
.btn.deepbtn{margin-top:var(--sp3)}

/* A long job lives on the button that started it, not over the whole screen.
   The work continues server-side either way, so blocking the page buys nothing. */
.btn.working{opacity:1;cursor:progress}
.spin{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;
      border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
      animation:spin .7s linear infinite;opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

/* The client description, when the tool had to work it out. It sits above the
   list because everything in the list was decided against it. */
.profilefix{padding:var(--sp4);background:var(--a25);border:1px solid var(--a100);
            border-radius:var(--r);margin-bottom:var(--sp4)}
.profilefix .sub{max-width:74ch}

/* The why, above a list that is otherwise all mechanics. */
.whybox{font-size:var(--t-md);line-height:1.6;color:var(--text-2);margin:0 0 var(--sp5);
        padding:var(--sp4);background:var(--surface-2);border-left:3px solid var(--a200);
        border-radius:0 var(--r) var(--r) 0;max-width:74ch}

/* Confirming who counts. Reading thirty of these has to feel like scanning, so
   the reason sits on the same line as the name and the toggle is the only thing
   to act on. Low-confidence rows are marked and sort to the top. */
.entlist{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-bottom:var(--sp5)}
.entrow{display:grid;grid-template-columns:22px minmax(150px,1fr) 2fr;gap:var(--sp3);align-items:baseline;
        padding:9px var(--sp4);border-bottom:1px solid var(--line-2);cursor:pointer}
.entrow:last-child{border-bottom:0}
.entrow:hover{background:var(--surface-2)}
.entrow input{margin:0;justify-self:center;cursor:pointer}
.entname{font-weight:650;font-size:var(--t-md);color:var(--text)}
.entwhy{font-size:var(--t-sm);color:var(--text-3);line-height:1.45}
/* The registry editor reuses the review row, minus the wrapping label: it holds
   a text input, and inside a label every click on that input would toggle the
   box beside it. */
.entreg{cursor:default}
.entreg .entname{cursor:pointer;display:flex;align-items:baseline;gap:var(--sp2);flex-wrap:wrap}
.entsrc{font-size:var(--t-xs);font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:.04em}
.entfix{display:none;grid-column:2/-1;margin-top:8px;font-size:var(--t-sm);padding:7px 10px}
.entrow.edited{background:var(--s4-t)}
.entrow.edited .entfix{display:block}
.entrow.edited .entwhy{text-decoration:line-through;color:var(--text-4)}
.regbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);flex-wrap:wrap}
.entrow.low{background:var(--s2-t)}
.entrow.low:hover{filter:brightness(.98)}
.entrow.low .entname{color:var(--s2-x)}
@media (max-width:640px){
  .entrow{grid-template-columns:22px 1fr}
  .entwhy{grid-column:2}
}

.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp4)}
.whycard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
         box-shadow:var(--e1);min-width:0;display:flex;flex-direction:column;overflow:hidden}
.whycard.me{border-color:var(--a200);box-shadow:0 0 0 1px var(--a100),var(--e2)}
.whyhd{padding:var(--sp4) 18px;border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.whycard.me .whyhd{background:var(--a25);border-bottom-color:var(--a100)}
.whyhd h3{font-size:16px;font-weight:750;letter-spacing:-.02em}
.whycard.me .whyhd h3{color:var(--a700)}
.whystat{margin:5px 0 0;font-size:var(--t-xs);color:var(--text-4);display:flex;align-items:baseline;gap:6px}
.whystat b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.whycard.me .whystat b{color:var(--a600)}
.whytop{margin:0;padding:var(--sp4) 18px;list-style:none;display:flex;flex-direction:column;gap:var(--sp4);flex:1}
.whytop li{font-size:var(--t-md);line-height:1.6;color:var(--text-2)}
.whytag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
        color:var(--text-4);background:var(--n100);padding:2px 7px;border-radius:var(--r-full);margin-bottom:7px}
.whycard.me .whytag{background:var(--a50);color:var(--a700)}
.whycard details{margin:0;border-top:1px solid var(--line-2);padding:11px 18px;background:var(--surface-2)}
.whycard.me details{background:var(--a25)}
.whycard summary{font-size:var(--t-sm);font-weight:700;color:var(--a600);cursor:pointer;list-style:none}
.whycard summary::-webkit-details-marker{display:none}
.whycard summary::before{content:"▸ ";font-size:10px}
.whycard details[open] summary::before{content:"▾ "}
.whygrp{margin-top:var(--sp3)}
.whygrp:first-child{margin-top:0}
.whylist{margin:6px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.whylist li{font-size:var(--t-md);line-height:1.5;color:var(--text-2)}
.whysrc{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line);
        border-radius:var(--r-full);font-size:10.5px;color:var(--text-4);vertical-align:middle}

/* ---------- 8. charts ---------- */
.mixgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;align-items:start}
.mixL{display:flex;flex-direction:column;gap:var(--sp4);min-width:0}
.mixplot{display:flex;align-items:center;gap:var(--sp5);flex-wrap:wrap}
.mixplot .donut{flex:0 0 auto}
.mixplot .dkey{flex:1 1 170px;min-width:0}
.mixR{min-width:0}
.donut{flex:0 0 auto}
.donut circle,.donut path{transition:stroke-width .12s;cursor:help}
.donut circle:hover,.donut path:hover{stroke-width:25}
.donut .dnum{font-size:26px;font-weight:750;fill:var(--text);text-anchor:middle;font-variant-numeric:tabular-nums}
.donut .dlbl{font-size:10px;font-weight:700;fill:var(--text-4);text-anchor:middle;
             letter-spacing:.06em;text-transform:uppercase}
ul.dkey{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-sm)}
ul.dkey li{display:flex;align-items:center;gap:var(--sp2);color:var(--text-2)}
ul.dkey li.me{color:var(--text);font-weight:650}
ul.dkey i{width:11px;height:11px;border-radius:var(--r-xs);flex:0 0 11px}
ul.dkey b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}
ul.dkey li.me b{color:var(--a600)}
.sovwrap{display:flex;align-items:center;gap:var(--sp5);flex-wrap:wrap;flex:1}
.sovwrap .donut{flex:0 0 auto;margin:0 auto}
.sovwrap .dkey{flex:1 1 200px;min-width:0}

.rollcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp6);
            align-items:stretch;margin-top:var(--sp5)}
.rollcharts>div{display:flex;flex-direction:column;min-width:0;padding:var(--sp5);
                border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.chartkey{list-style:none;margin:0 0 var(--sp4);padding:0;display:flex;gap:var(--sp4);flex-wrap:wrap;
          font-size:var(--t-sm);color:var(--text-3)}
.chartkey li{display:flex;align-items:center;gap:6px}
.chartkey li.me{color:var(--text);font-weight:650}
.chartkey i{width:9px;height:9px;border-radius:var(--r-full);flex:0 0 9px}
.linechart,.scatter{width:100%;height:auto;overflow:visible;flex:1;min-height:0}
.gl{stroke:var(--line-2);stroke-width:1}
.ax{font-size:10px;fill:var(--text-4);font-weight:650}
.axt{font-size:10px;fill:var(--text-4);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ln path{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ln circle{fill:var(--c)}
.ln.me path{stroke-width:3}
.ln.me circle{stroke:var(--surface);stroke-width:2}
.lk{font-size:11.5px;fill:var(--text-2);font-weight:600}
.lk.me{fill:var(--a600);font-weight:800}
.col{cursor:help}
.col .guide{stroke:var(--a500);stroke-width:1;opacity:0;transition:opacity .1s}
.col .hi{opacity:0;transition:opacity .1s;stroke:var(--surface);stroke-width:2}
.col:hover .guide{opacity:.35}
.col:hover .hi{opacity:1}
.scatter .dot circle{fill:var(--n400);opacity:.55}
.scatter .dotme circle{fill:var(--a500);stroke:var(--surface);stroke-width:2.5}
.scatter .dotlbl{font-size:11.5px;font-weight:600;fill:var(--text-2)}
.scatter .dotlbl.me{font-weight:800;fill:var(--a600)}
.scatter g{cursor:help}
.chartwrap{margin-top:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--line)}
.chartwrap .minihd{margin-bottom:var(--sp4)}
.trend{display:flex;align-items:flex-end;gap:8px;height:84px}
.tb{flex:0 0 34px;background:var(--n300);border-radius:var(--r-xs) var(--r-xs) 0 0}
.tb.last{background:var(--a500)}
.tlbl{display:flex;gap:8px;margin-top:6px;font-size:var(--t-xs);color:var(--text-4)}
.tlbl div{flex:0 0 34px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- 9. reports home + setup ---------- */
.impbar{display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;margin:0 0 var(--sp5);
        padding:0 0 var(--sp5);border-bottom:1px solid var(--line-2)}
.impbar .sub{margin:0;font-size:var(--t-md);color:var(--text-4)}
.impbar .sub b{color:var(--text);font-weight:650}
.memlist{display:flex;flex-direction:column;gap:var(--sp2)}
.memrow{display:flex;align-items:center;gap:var(--sp3);padding:9px 11px;border:1px solid var(--line);
        border-radius:var(--r)}
.me-em{flex:1;font-size:var(--t-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandlogo{height:30px;width:auto;max-width:120px;object-fit:contain;display:block;border-radius:var(--r-xs)}
.brandlogo.sm{height:24px;max-width:90px}
.logorow{display:flex;align-items:center;gap:14px}
.logoprev{width:56px;height:56px;border:1px solid var(--line);border-radius:var(--r);display:grid;
          place-items:center;background:var(--surface-2);overflow:hidden;flex:0 0 56px}
.logoprev img{max-width:100%;max-height:100%;object-fit:contain}
.logoprev .iwmark{width:34px;height:34px;flex:0 0 34px;font-size:15px}
.iwmark{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
        background:var(--a500);color:var(--on-brand);font-size:15px;line-height:1}
.ogpreview{display:block;width:100%;max-width:420px;border:1px solid var(--line);
           border-radius:var(--r);margin-bottom:var(--sp4)}
.sharebox input{margin-bottom:var(--sp4);font-size:var(--t-md)}
.acts{display:flex;gap:var(--sp2);flex-wrap:wrap}

/* ---------- 10. shared report ---------- */
.sharebar{display:none}
body.shared .sharebar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px;background:var(--surface);border-bottom:1px solid var(--line)}
/* the bar shares the report's measure so both edges line up */
/* Centred, and centred together. Capped width with no auto margin pinned the
   whole report to the left edge: invisible in the app, where the sidebar fills
   that space, and obvious on a share link, where the sidebar is hidden. The
   masthead has to move with the body or the logo stops lining up with it. */
body.shared .sharebar,body.shared .topbar{max-width:1220px;width:100%;margin-inline:auto}
.sb-lock{display:flex;align-items:center;gap:var(--sp3)}
.sb-lock .brandlogo{height:32px}
.sb-txt{line-height:1.1}
.sb-txt b{display:block;font-size:16px;font-weight:750;letter-spacing:-.02em}
.sb-txt span{display:block;margin-top:2px;font-size:9.5px;font-weight:650;letter-spacing:.07em;
             text-transform:uppercase;color:var(--text-4)}
.sb-by{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--text-4);font-weight:600}
.sb-by .slatemark,.sb-by .slatemark svg{width:18px;height:18px;flex:0 0 18px}
.sb-by b{font-weight:750;color:var(--text);font-size:var(--t-md);letter-spacing:-.01em}
body.shared aside{display:none}
body.shared #shell{grid-template-columns:1fr}
body.shared .tbtitle{display:none}
body.shared .topbar{border-bottom:0;padding:14px 30px 0;background:transparent}
.sharefoot{display:none}
body.shared .sharefoot{display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:var(--sp6);padding:var(--sp5) var(--sp5) var(--sp2);border-top:1px solid var(--line)}
body.shared .sharefoot .slatemark,body.shared .sharefoot .slatemark svg{width:20px;height:20px;flex:0 0 20px}
body.shared .sharefoot p{margin:0;font-size:var(--t-sm);color:var(--text-4)}
body.shared .sharefoot p b{font-weight:750;color:var(--text)}

/* ---------- 11. print ---------- */
.printonly{display:none}
@media print{
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--e1:none;--e2:none;--e3:none;
        --line:#DCE3E9;--line-2:#EBEFF3;--text:#101828;--text-2:#48566A;--text-3:#667283;--text-4:#98A4B3}
  @page{size:A4 portrait;margin:13mm}
  html,body{background:#fff!important;font-size:10pt}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  aside,.topbar,#nav,.rptnav,.btn,.backlink,.tipbox,#toasts,#modalHost,.impbar,details{display:none!important}
  #shell{display:block!important} main{display:block!important}
  .content{padding:0!important;max-width:none!important}
  .printonly{display:block}
  .printhead{border-bottom:2pt solid var(--a500);padding-bottom:6pt;margin-bottom:12pt}
  .printhead h1{margin:0;font-size:15pt;letter-spacing:-.02em}
  .printhead p{margin:3pt 0 0;font-size:8.5pt;color:var(--text-3)}
  .card{border:1pt solid var(--line)!important;box-shadow:none!important;border-radius:4pt;
        padding:10pt 12pt;margin:0 0 9pt;break-inside:avoid;page-break-inside:avoid}
  .sec-feature,.sec-std{padding:10pt 12pt}
  .card h2{font-size:12pt} .sec-feature>h2{font-size:13pt}
  .card p.sub{font-size:8.5pt;margin-bottom:9pt}
  .rpttitle h1{font-size:17pt} .rptmeta dd{font-size:10pt}
  .heronum b{font-size:30pt} .herotext .lead{font-size:11pt}
  ul.blist li{font-size:9pt}
  .kpigrid{grid-template-columns:repeat(4,1fr);gap:7pt}
  .kpi{padding:8pt 9pt} .kpi .v{font-size:18pt} .kpi .k{font-size:7.5pt} .kpi .s{font-size:7pt}
  .lbname{flex:0 0 130pt;font-size:8.5pt} .lbval{flex:0 0 34pt;font-size:8.5pt}
  .whygrid{grid-template-columns:repeat(3,1fr);gap:8pt}
  .whycard{padding:9pt 10pt} .whytop li{font-size:8pt}
  table.hm{font-size:8pt;table-layout:fixed}
  table.hm td.q{font-size:8pt} .cell{height:16pt;font-size:8pt}
  .legend{font-size:7.5pt}
  .rollcharts{grid-template-columns:1fr 1fr;gap:12pt}
  body.shared .sharebar{display:flex!important;padding:0 0 6pt;margin-bottom:10pt;background:none!important}
  body.shared .sharefoot{display:flex!important}
  /* Paper has no expand control, so the deep dive prints in full. */
  .deep{max-height:none!important;overflow:visible!important}
  .deepfade,.btn.deepbtn{display:none!important}
  a{color:inherit}
}