/* The client dashboard (app/views/dashboard.html, drawn by dashboard.js) and each company's front
   page (app/views/landing.html). Direction B of the design showcase: roomy, few big numbers, the
   client's logo and one brand colour on the house style. Light only, by choice. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  /* 1 · base values. Components never use these directly. */
  --slate-950:#111a24;--slate-900:#18222e;--slate-800:#253140;--slate-700:#334052;--slate-600:#4f5d6e;--slate-500:#66748a;
  --slate-400:#8f9aab;--slate-300:#b8c1cc;--slate-200:#d6dce4;--slate-150:#e2e7ed;--slate-100:#eceff3;--slate-50:#f5f7f9;--white:#fff;
  --indigo-300:#a3adff;--indigo-600:#3a49c9;
  --green-700:#17734a;--green-50:#e3f4ea;--red-700:#b3261e;--red-50:#fbe5e3;--amber-700:#8a5600;--amber-50:#fcf0d4;
  /* data colours: one per platform, the same for every client */
  --d1:#2f6fd6;--d2:#e0782f;--d3:#16958a;--d4:#8758cf;--d5:#c84479;--d6:#7d8a26;

  /* 2 · roles. The only names components use. */
  --canvas:var(--slate-50);--surface:var(--white);--sunk:var(--slate-100);
  --text:var(--slate-900);--text-2:var(--slate-600);--text-3:var(--slate-500);
  --line:var(--slate-150);--line-2:var(--slate-200);--track:var(--slate-100);
  --accent:var(--indigo-600);
  --good:var(--green-700);--good-tint:var(--green-50);--bad:var(--red-700);--bad-tint:var(--red-50);--warn:var(--amber-700);--warn-tint:var(--amber-50);
  --prior:var(--slate-400);
  --band:var(--slate-900);--band-2:var(--slate-800);--band-3:var(--slate-700);--band-text:#eef2f6;--band-muted:#a7b2c0;--band-accent:var(--indigo-300);

  /* 3 · client layer. The script works these out from the client's one brand colour. */
  --client:#2f6fd6;--client-strong:#2f6fd6;--client-ink:#2a5fb8;

  --font:"IBM Plex Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --fs-1:13px;--fs-2:14px;--fs-3:16px;--fs-4:18px;--fs-5:24px;--fs-6:30px;--fs-7:42px;
  --r1:6px;--r2:10px;--r3:16px;--pill:999px;
  --t1:120ms;--t2:220ms;--t3:420ms;--t-intro:900ms;--t-fade:600ms;--ease:cubic-bezier(.22,1,.36,1); /* one curve for every motion; the script uses the same one */
  --shadow:0 1px 2px rgba(17,26,36,.06),0 6px 20px -12px rgba(17,26,36,.18);
  --gutter:28px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--text);font:400 var(--fs-3)/1.5 var(--font);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
p{margin:0}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wm,.wm-s{font-weight:600;letter-spacing:-.015em}
.wm i,.wm-s i{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--accent);margin-left:.1em}

/* ---------- View as client: the staff band on top ---------- */
.viewas{background:var(--band);color:var(--band-text);font-size:var(--fs-2)}
.va-in{max-width:1360px;margin:0 auto;padding:10px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.va-l{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff}
.va-l svg,.va-back svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.va-t{color:var(--band-muted)}
.va-t b{color:#fff;font-weight:600}
.va-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r1);background:var(--band-2)}
.va-seg button{all:unset;cursor:pointer;padding:5px 10px;border-radius:4px;font-weight:600;color:var(--band-muted);white-space:nowrap}
.va-seg button:hover{color:#fff}
.va-seg button[aria-pressed="true"]{background:#fff;color:var(--slate-900)}
.va-seg button:focus-visible{outline:2px solid var(--band-accent);outline-offset:1px}
.va-seg a{padding:5px 10px;border-radius:4px;font-weight:600;color:var(--band-muted);white-space:nowrap;text-decoration:none}
.va-seg a:hover{color:#fff}
.va-seg a[aria-current="page"]{background:#fff;color:var(--slate-900)}
.va-seg a:focus-visible{outline:2px solid var(--band-accent);outline-offset:1px}
.va-back{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#fff;text-decoration:none;padding:5px 2px}
.va-back:hover{text-decoration:underline}
.va-back:focus-visible{outline:2px solid var(--band-accent)}

/* ---------- header: the client's brand ---------- */
.portal{container:portal/inline-size;min-height:100vh}
.p-top{background:var(--surface);border-bottom:1px solid var(--line-2)}
.p-wrap{max-width:1360px;margin:0 auto}
.p-rule{height:4px;margin-inline:var(--gutter);border-radius:0 0 4px 4px;background:var(--client)}
.p-top-in{padding:16px var(--gutter) 0;display:grid;gap:14px}
.p-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;min-height:44px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{flex:none;display:grid;place-items:center}
.logo.mark{width:44px;height:44px}
.logo.mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo.word{height:38px;max-width:min(220px,55cqi)}
.logo.word img{height:38px;width:auto;max-width:100%;object-fit:contain;display:block}
.logo.mono{width:44px;height:44px;border-radius:10px;background:var(--client-strong);color:#fff;font-weight:600;font-size:20px}
.brand-t{display:grid;min-width:0}
.brand-t b{font-size:var(--fs-4);font-weight:600;line-height:1.25}
.pby{font-size:var(--fs-1);color:var(--text-2)}
.wm-s{color:var(--text)}
.tabs{position:relative;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}
.tabs::-webkit-scrollbar{display:none}
.tabs-row{display:flex;gap:2px;min-height:46px}
.tab{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 14px 13px;font-size:var(--fs-3);font-weight:600;color:var(--text-2);border-radius:var(--r1) var(--r1) 0 0;transition:color var(--t1),background-color var(--t1)}
.tab:hover{color:var(--text);background:var(--slate-50)}
.tab[aria-selected="true"]{color:var(--client-ink)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab-ind{position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px 3px 0 0;background:var(--client-strong);pointer-events:none}
.tab-ind.anim{transition:transform var(--t2) var(--ease),width var(--t2) var(--ease)}

/* ---------- account menu (top right) ---------- */
.acct{position:relative;flex:none}
.acct-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--surface);transition:background-color var(--t1),border-color var(--t1)}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{background:var(--slate-50);border-color:var(--slate-300)}
.acct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--slate-800);color:#fff;font-size:var(--fs-1);font-weight:600;letter-spacing:.02em}
.acct-name{font-size:var(--fs-2);font-weight:500;white-space:nowrap}
.chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t2) var(--ease)}
.acct-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:max-content;min-width:250px;max-width:min(320px,90cqi);padding:6px;border-radius:var(--r2);background:var(--surface);box-shadow:0 0 0 1px var(--line-2),0 18px 40px -18px rgba(17,26,36,.4);transform-origin:top right;animation:menu var(--t2) var(--ease)}
@keyframes menu{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 12px;align-items:center;padding:10px 10px 12px}
.menu-id .avatar{grid-row:span 2;width:38px;height:38px;font-size:var(--fs-2)}
.menu-id b{font-size:var(--fs-2);font-weight:600}
.menu-id span{font-size:var(--fs-1);color:var(--text-2);overflow-wrap:anywhere}
.menu-sep{height:1px;background:var(--line);margin:2px 4px 4px}
.menu-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r1);font-size:var(--fs-2);color:var(--text)}
.menu-item:hover,.menu-item:focus-visible{background:var(--sunk)}
.tab svg,.menu-item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tab svg{opacity:.8}.tab[aria-selected="true"] svg{opacity:1}

/* ---------- body ---------- */
.p-body{max-width:1360px;margin:0 auto;padding:24px var(--gutter) 40px;display:grid;gap:20px}
.p-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.p-bar h1{font-size:var(--fs-6);font-weight:600;letter-spacing:-.015em}
.p-bar p{font-size:var(--fs-2);color:var(--text-2);margin-top:4px}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r1);background:var(--sunk)}
.seg button{all:unset;cursor:pointer;padding:6px 12px;border-radius:4px;font-size:var(--fs-2);font-weight:600;color:var(--text-2);white-space:nowrap;transition:background-color var(--t1),color var(--t1),box-shadow var(--t1)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(17,26,36,.14)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.loading{color:var(--text-2);font-size:var(--fs-2);padding:40px 0;text-align:center}

.kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);--kpi-max:var(--fs-7)}
.kpi{flex:1 1 160px;min-width:0;background:var(--surface);padding:18px 22px 16px;display:flex;flex-direction:column;gap:6px}
.kpi-l{font-size:var(--fs-2);font-weight:600;color:var(--text-2)}
/* --kpi-fs comes from fitKpis in dashboard.js: one size that fits the longest number */
.kpi-v{font-size:var(--kpi-fs,var(--kpi-max));font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-v.chg{animation:chg var(--t2) var(--ease)}
@keyframes chg{from{opacity:.3;transform:translateY(5px)}}
.kpi-c,.cmp{font-size:var(--fs-2);color:var(--text-2)}
.cmp.up{color:var(--good)}.cmp.down{color:var(--bad)}
.spark{display:block;width:100%;height:28px;margin-top:auto;overflow:visible}

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.panel{grid-column:span var(--span,12);container:panel/inline-size;min-width:0;background:var(--surface);border-radius:var(--r2);box-shadow:var(--shadow);padding:20px 22px 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.panel.enter{animation:enter var(--t2) var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
.ph{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.ph-t{display:grid;gap:4px;min-width:0;flex:1 1 220px}
.ph h2,.ph h3{font-size:var(--fs-4);font-weight:600}
/* the overview's cards under each service's heading */
.svc{display:grid;gap:14px;margin-top:6px}
.svc-h{display:flex;align-items:center;gap:10px;font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em}
.svc-h svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--client-strong);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.svc-h::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ph-sub{font-size:var(--fs-2);color:var(--text-2)}
.ph-sub b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ph-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-width:0;max-width:100%}
.ph-tools .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.ph-tools .seg::-webkit-scrollbar{display:none}
.pb{display:grid;gap:14px;min-width:0}
.pb>*{min-width:0}

@container portal (max-width:980px){.panel{grid-column:span var(--span-m,12)}}
@container portal (max-width:640px){
  .p-top-in{padding:14px 16px 0}.p-rule{margin-inline:16px}.p-body{padding:18px 14px 28px;gap:16px}.p-bar h1{font-size:var(--fs-5)}
  .va-in{padding-inline:16px}
  .tabs{margin-inline:-6px;padding-inline:6px}.tab{padding:10px 10px 12px;font-size:var(--fs-2)}
  .kpis{--kpi-max:var(--fs-6)}.kpi{flex-basis:150px;padding:14px 14px 12px}
  .grid{gap:14px}.panel{grid-column:span 12;padding:16px}
  .acct-name{display:none}.acct-btn{padding-right:6px;gap:4px}
}

/* ---------- small parts ---------- */
.empty{display:grid;gap:4px;justify-items:center;text-align:center;padding:32px 16px;border:1.5px dashed var(--line-2);border-radius:var(--r2);color:var(--text-2);font-size:var(--fs-2)}
.empty b{font-size:var(--fs-3);color:var(--text)}
.big{font-size:var(--fs-6);font-weight:600;letter-spacing:-.015em;line-height:1}
.unit{font-size:var(--fs-2);color:var(--text-2);margin-left:8px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--fs-2);color:var(--text-2)}
.legend>span{display:inline-flex;align-items:center;gap:8px}
.legend b{color:var(--text);font-weight:600}
.key{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
.more{all:unset;cursor:pointer;justify-self:start;font-size:var(--fs-2);font-weight:600;color:var(--client-ink);padding:4px 0}
.more:hover{text-decoration:underline}
.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* min-width:0 lets the chart shrink with its panel (otherwise its fixed-width drawing props it open and it never redraws smaller) */
.chart{position:relative;touch-action:pan-y;min-height:220px;min-width:0}
.chart.low{min-height:170px}
.cv{overflow:hidden}
.cv svg{display:block;overflow:visible}
.ax{font:400 13px var(--font);fill:var(--text-3)}
.gl{stroke:var(--line);stroke-width:1}
.xh{position:absolute;width:1px;background:var(--slate-300);opacity:0;pointer-events:none}
.tip{position:absolute;left:0;top:0;z-index:3;min-width:150px;display:grid;gap:4px;padding:9px 11px;border-radius:var(--r1);background:var(--slate-900);color:#fff;font-size:var(--fs-1);line-height:1.35;white-space:nowrap;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity var(--t1);box-shadow:0 8px 24px -10px rgba(17,26,36,.5)}
.tip.on{opacity:1}
.tip .tt{font-weight:600;margin-bottom:2px}
.tip .r{display:flex;justify-content:space-between;gap:16px}
.tip .r i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px}
.tip .r b{font-variant-numeric:tabular-nums}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tile{background:var(--sunk);border-radius:var(--r2);padding:14px 16px;display:grid;gap:12px;align-content:start;min-width:0}
.tile-h{font-size:var(--fs-3);font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tile-n{display:flex;align-items:baseline;flex-wrap:wrap}
dl.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin:0;font-size:var(--fs-2)}
dl.kv dt{color:var(--text-2)}
dl.kv dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--fs-2)}
th,td{padding:11px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-size:var(--fs-1);font-weight:600;color:var(--text-2);border-bottom-color:var(--line-2)}
th:first-child,td:first-child{text-align:left;padding-left:0;position:sticky;left:0;z-index:1;background:var(--surface);white-space:normal;min-width:190px}
th:last-child,td:last-child{padding-right:0}
td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody td{transition:background-color var(--t1)}
tbody tr:hover td{background:var(--slate-50)}
/* creatives: a placement's row with its totals, then its creatives under it */
table.crt tr.grp td{background:var(--slate-50);font-weight:600;border-bottom-color:var(--line-2)}
table.crt tr.in td:first-child{padding-left:16px;overflow-wrap:anywhere}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--good);font-weight:600}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cell{display:inline-flex;align-items:center;gap:8px}
.cell .key{flex:none}
.dim{color:var(--text-3)}
/* Results by publisher: each publisher's own table, side by side where there's room */
.bypub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:22px 28px}
.bp{min-width:0}
.bp-d{margin:2px 0 6px 18px;color:var(--text-3);font-size:var(--fs-2)}
.bp th:first-child,.bp td:first-child{min-width:110px}
.bp tfoot td{font-weight:600;border-top:1px solid var(--line-2);border-bottom:0}
/* the internal view's tags on what the client doesn't see */
.tag{display:inline-flex;align-items:center;font-size:var(--fs-1);font-weight:600;line-height:1;padding:4px 8px;border-radius:var(--pill);white-space:nowrap;vertical-align:middle;margin-left:6px}
.tag.staff{background:var(--warn-tint);color:var(--warn)}
.tag.off{background:var(--sunk);color:var(--text-2)}
.tagged .tag{margin:0 6px 0 0}
@container panel (max-width:560px){.lo{display:none}}
/* a narrow card's switches take its full width, a little tighter, so four still fit a phone */
@container panel (max-width:440px){.ph-tools{flex:1 1 100%}.ph-tools .seg button{padding:6px 8px;font-size:var(--fs-1)}}

.pill{display:inline-flex;align-items:center;font-size:var(--fs-1);font-weight:600;line-height:1;padding:5px 9px;border-radius:var(--pill);white-space:nowrap;justify-self:start}
.pill.ok{background:var(--good-tint);color:var(--good)}.pill.warn{background:var(--warn-tint);color:var(--warn)}
.pill.bad{background:var(--bad-tint);color:var(--bad)}.pill.flat{background:var(--sunk);color:var(--text-2)}
.note{font-size:var(--fs-1);color:var(--text-3)}

/* display: delivery against each placement, and ranked messages and sizes. Fills are full-width and
   slide into place (transform), so nothing re-lays out while they move. */
.pace{display:grid;gap:18px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:11px 12px;align-items:center;font-size:var(--fs-2)}
.prow .nm{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.pv{font-weight:600;text-align:right}
.ptrack{grid-column:1/-1;position:relative;height:12px;border-radius:var(--pill);background:var(--track)}
.pclip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.pclip i{position:absolute;inset:0;border-radius:inherit;background:var(--c);transform:translateX(calc(var(--w) - 100%));transition:transform var(--t3) var(--ease)}
/* a placement with no guarantee: striped, filled as far through its flight as its numbers go */
.pclip i.run{background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 3px,transparent 3px 7px),var(--c)}
.ptrack s{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:var(--text);opacity:.6}
/* where an even pace would be so far: a small arrow above the bar, pointing down at it */
.ptrack .exp{position:absolute;top:-9px;width:0;height:0;margin-left:-5px;border-style:solid;border-width:6px 5px 0;border-color:var(--text-2) transparent transparent}
.psub{grid-column:1/-1;font-size:var(--fs-1);color:var(--text-3);margin-top:-4px}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rank li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;font-size:var(--fs-2)}
.rank .nm{min-width:0;overflow-wrap:anywhere}
.rank .v{font-weight:600;text-align:right;white-space:nowrap}
.rank .v small{font-weight:400;color:var(--text-3);font-size:var(--fs-1);margin-left:8px}
.meter{grid-column:1/-1;display:block;height:8px;border-radius:var(--pill);background:var(--track);overflow:hidden}
.meter i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--client-strong);transform:translateX(calc(var(--w) - 100%));transition:transform var(--t3) var(--ease)}
.intro .pclip i,.intro .meter i{--dl:calc(var(--d,0ms) + var(--j,0) * 35ms);transition:transform var(--t-intro) var(--ease) var(--dl),opacity var(--t-fade) ease-out var(--dl)}
.intro:not(.go) .pclip i,.intro:not(.go) .meter i{transform:translateX(-100%);opacity:0}

.oops{display:grid;gap:8px;justify-items:center;text-align:center;padding:64px 16px;color:var(--text-2)}
.oops b{font-size:var(--fs-4);color:var(--text)}

/* first view of a tab: KPIs first, then panels in reading order (--d), then rows within a panel (--j).
   .intro = first view prepared (bars hidden at zero); .go = intro running. Bars grow and fade in together. */
.spark.pre,.chart.pre .plot{clip-path:inset(-12px 100% -12px 0);opacity:0}
.spark.draw,.chart.play .plot{animation:wipe var(--t-intro) var(--ease) both,fade var(--t-fade) ease-out both;animation-delay:var(--d,0ms),var(--d,0ms)}
.cv .bg{transform-box:view-box;transform-origin:0 var(--base)}
.chart.pre .bg{transform:scaleY(0);opacity:0}
.chart.play .bg{--dl:calc(var(--d,0ms) + var(--i,0) * var(--st,0ms));animation:rise var(--t-intro) var(--ease) both,fade var(--t-fade) ease-out both;animation-delay:var(--dl),var(--dl)}
@keyframes wipe{from{clip-path:inset(-12px 100% -12px 0)}to{clip-path:inset(-12px -12px -12px -12px)}}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* later changes (dates, metric): the previous drawing fades out over the new one; gridlines stay put */
.cv.old{position:absolute;left:0;top:0;pointer-events:none;animation:fadeout var(--t3) ease-out both}
.cv.old .gl{visibility:hidden}
.chart.swap>.cv:not(.old) .bg{animation:fade var(--t3) ease-out both}
/* axis labels hand off instead of overlapping: old ones go first, new ones follow */
.cv.old .ax{animation:fadeout var(--t1) ease-out both}
.chart.swap>.cv:not(.old) .ax{animation:fade var(--t2) ease-out var(--t1) both}
@keyframes fadeout{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- a company's front page ---------- */
body.solo{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.solo-card{display:grid;gap:10px;justify-items:center;text-align:center;max-width:40ch}
.solo-card .wm{font-size:28px;margin-bottom:14px}
.solo-card h1{font-size:var(--fs-5);font-weight:600}
.solo-card p{color:var(--text-2)}

/* ---------- client sign-in (app/clients.js) ---------- */
.solo-card.si{width:min(100%,380px);max-width:none;gap:14px}
.si-form{display:grid;gap:8px;width:100%;margin-top:6px;text-align:left}
.si-form label{font-size:var(--fs-2);font-weight:600}
.si-form input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r1);background:var(--surface)}
.si-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.si-form input[aria-invalid="true"]{border-color:var(--bad)}
.si-form .si-btn{margin-top:6px}
.si-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;
  border-radius:var(--r1);background:var(--slate-900);color:var(--white);font-weight:600;font-size:var(--fs-3);text-align:center}
.si-btn:hover{background:var(--slate-800)}
.si-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.si-btn.sec{background:var(--surface);color:var(--text);border:1px solid var(--line-2);width:100%}
.si-btn.sec:hover{background:var(--sunk)}
.solo-card .si-err{color:var(--bad);font-size:var(--fs-2)}
.si-note{width:100%;padding:10px 12px;border-radius:var(--r1);font-size:var(--fs-2);text-align:left}
.si-note.ok{background:var(--good-tint);color:var(--good)}.si-note.bad{background:var(--bad-tint);color:var(--bad)}
.solo-card .si-fine{font-size:var(--fs-2);color:var(--text-3)}
.si-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.si-lnk{all:unset;cursor:pointer;color:var(--accent);font-size:var(--fs-2);font-weight:500;padding:6px 2px}
.si-lnk:hover{text-decoration:underline}
.si-lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.si-pick{display:grid;gap:8px;width:100%}
.si-staff{width:100%;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.si-staff .si-lnk{color:var(--text-3)}