/* Owner's numbers (gap #25, revisited 19 Oct; kpi.js). Colours come from the app's own tokens (app.css :root), so the page
   follows them; the chart draws in one hue (the app's blue) and the trend lines in currentColor. Big readable figures,
   one comparison each, nothing that needs explaining; the rest under "More numbers". Phone first: one column. */
.kp{--kp-bg:#fff;--kp-line:var(--sep2);--kp-good:#2e6b34;--kp-bad:#b3261e;--kp-trend:var(--c1t);--kp-bar:var(--c1);--kp-tile:#f7f7f9}
.kp .kp-wrap{max-width:860px;margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:18px}
.kp-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.kp-hd small{color:var(--ink3);font-size:var(--fs-12)}
.kp-hd h1{font-size:var(--fs-26);margin:2px 0 4px;letter-spacing:-.01em;font-weight:600}
.kp-hd p{margin:0;color:var(--ink2);font-size:var(--fs-12_5);max-width:52ch}
.kp-so{color:var(--ink3);font-weight:400;font-size:.62em;font-style:normal}
.kp-nav{display:flex;gap:6px;align-items:center}
.kp-ib,.kp-tb{background:#f0f0f3;border-radius:9px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:var(--fs-13)}
.kp-ib:disabled{opacity:.35;cursor:default}
.kp-note{margin:0;font-size:var(--fs-12_5);color:var(--ink2);display:flex;gap:6px;align-items:center}
.kp-good{color:var(--kp-good)} .kp-bad{color:var(--kp-bad)}
.kp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the numbers that matter: tiles with a big figure, the words behind it, and the one comparison */
.kp-top{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kp-top3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kp-hl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 16px 14px;text-align:start;min-width:0;background:var(--kp-tile);border-radius:14px;color:inherit}
.kp-hl:hover{background:#f0f1f4}
.kp-hl:hover>b{color:var(--c1t)}
.kp-hlab{font-size:var(--fs-13);color:var(--ink2);font-weight:500}
.kp-hl>b{font-size:30px;line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.kp-hero>b{font-size:38px}
.kp-hsub{font-size:var(--fs-12_5);color:var(--ink2);line-height:1.35}
.kp-hcmp{font-size:var(--fs-12_5);margin-top:2px}
.kp-vs{white-space:nowrap;color:var(--ink3)}
.kp-vs.kp-good{color:var(--kp-good)} .kp-vs.kp-bad{color:var(--kp-bad)}
.kp-gt{font-size:var(--fs-12);color:var(--ink2)}
.kp-goal{position:relative;height:6px;border-radius:3px;background:#e4e6ec;width:100%;max-width:220px;margin:2px 0 4px}
.kp-goal i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:3px;background:var(--c4t)}
.kp-goal em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-inline-start:-1px;background:var(--ink)}

/* today's position */
.kp-sec h2{font-size:var(--fs-15);font-weight:600;margin:4px 0 8px;color:var(--ink);display:flex;align-items:baseline;gap:8px}
.kp-sec h2 small{font-weight:400;color:var(--ink3);font-size:var(--fs-12)}
.kp-owes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kp-owe{display:flex;flex-direction:column;background:var(--kp-tile);border-radius:14px;overflow:hidden}
.kp-oweb{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab chev" "val chev" "sub chev";align-items:center;align-content:start;gap:2px 10px;padding:14px 16px;text-align:start;color:inherit;text-decoration:none;flex:1}
.kp-oweb:hover{background:#f0f1f4}
.kp-oweb .kp-hlab{grid-area:lab}
.kp-oweb>b{grid-area:val;font-size:var(--fs-26);line-height:1.15;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.kp-oweb>small{grid-area:sub;font-size:var(--fs-12_5);color:var(--ink2);line-height:1.35}
.kp-chev{grid-area:chev;color:var(--ink3);display:flex}
:root[dir=rtl] .kp-chev svg,:root[dir=rtl] .kp-owelink svg,:root[dir=rtl] .kp-ib svg{transform:scaleX(-1)}
.kp-owelink{display:flex;align-items:center;gap:4px;padding:9px 16px;border-top:1px solid #e9eaee;font-size:var(--fs-12_5);color:var(--c1t);text-decoration:none}
.kp-owelink svg{width:13px;height:13px}
.kp-wait{color:var(--ink3);font-weight:400;font-size:var(--fs-13)}

/* money in, month by month: one hue, the month in progress hollow, two quiet gridlines */
.kp-bars{width:100%;height:auto;display:block;overflow:visible;font-family:inherit}
.kp-bars text{direction:ltr;unicode-bidi:isolate}
.kp-bars .kp-gridlab{text-anchor:start}
.kp-bars .kp-grid{stroke:#e9eaee;stroke-width:1}
.kp-bars .kp-base{stroke:#cfd1d8;stroke-width:1}
.kp-bars .kp-gridlab{fill:var(--ink3);font-size:var(--fs-10_5);font-variant-numeric:tabular-nums}
.kp-bars .kp-axis{fill:var(--ink2);font-size:var(--fs-11)}
.kp-bars .kp-barlab{fill:var(--ink);font-size:var(--fs-11_5);font-weight:600;font-variant-numeric:tabular-nums}
.kp-bars .kp-fill{fill:var(--kp-bar)}
.kp-bars .kp-bar-cur .kp-fill{fill:var(--c1b);stroke:var(--kp-bar);stroke-width:1.5;stroke-dasharray:3 2}
.kp-bars .kp-hit{fill:transparent}
.kp-bar{cursor:pointer;outline:none}
.kp-bar:hover .kp-fill,.kp-bar:focus-visible .kp-fill{fill:var(--c1t)}
.kp-bar:hover .kp-hit,.kp-bar:focus-visible .kp-hit{fill:rgba(0,0,0,.035)}
.kp-chart .kp-note{margin-top:4px;font-size:var(--fs-12);color:var(--ink3)}

/* by dentist: one line each, the bar against the busiest */
.kp-docs{display:flex;flex-direction:column;gap:8px}
.kp-doc{border:1px solid var(--sep);border-radius:14px;padding:6px 8px 8px;display:flex;flex-direction:column;gap:2px}
.kp-dmain{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto;gap:12px;align-items:center;padding:8px;border-radius:10px;text-align:start;color:inherit;width:100%}
.kp-dmain:hover{background:#f6f6f8}
.kp-dname{display:flex;align-items:center;gap:8px;min-width:0}
.kp-dname b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-dname small{color:var(--ink3);font-size:var(--fs-11_5)}
.kp-dbar{display:block;height:10px;border-radius:5px;background:#eef0f4;overflow:hidden}
.kp-dbar i{display:block;height:100%;border-radius:5px}
.kp-dval{display:flex;flex-direction:column;align-items:flex-end;text-align:end}
.kp-dval b{font-size:var(--fs-16);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-dval small{font-size:var(--fs-11_5);color:var(--ink3)}
.kp-dg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px 6px}
.kp-dc{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 8px;border-radius:8px;text-align:start;min-width:0;font-size:var(--fs-11_5)}
.kp-dc:hover{background:#f6f6f8}
.kp-dl{font-size:var(--fs-11_5);color:var(--ink3)}
.kp-dc>b{font-size:var(--fs-14);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* more numbers, one tap away: one figure per line with its trend and both comparisons */
.kp-moreb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding:12px 14px;border-radius:12px;background:var(--kp-tile);text-align:start;font-weight:600;font-size:var(--fs-13_5);color:inherit}
.kp-moreb small{font-weight:400;color:var(--ink3);font-size:var(--fs-12);flex-basis:100%}
.kp-mchev{display:flex;color:var(--ink3);transition:transform .15s}
.kp-mchev.kp-up{transform:rotate(180deg)}
.kp-more{display:flex;flex-direction:column;margin-top:6px}
.kp-row{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(130px,auto);gap:14px;align-items:center;width:100%;padding:11px 2px;border-bottom:1px solid var(--kp-line);text-align:start;color:inherit;text-decoration:none}
.kp-row:hover .kp-val b{color:var(--c1t)}
.kp-lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.kp-lab b{font-weight:500;font-size:var(--fs-13_5)}
.kp-lab small{color:var(--ink3);font-size:var(--fs-12)}
.kp-spark{color:var(--kp-trend);display:block;flex:none;overflow:visible}
.kp-spark.kp-none{width:96px;height:26px}
.kp-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:end}
.kp-val b{font-size:var(--fs-15);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-val small{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.kp-cmp{font-size:var(--fs-11_5);color:var(--ink3);white-space:nowrap}
.kp-cmp i{font-style:normal}
.kp-cmp.kp-good{color:var(--kp-good)} .kp-cmp.kp-bad{color:var(--kp-bad)}
.kp-cmp.kp-good i,.kp-cmp.kp-bad i{color:var(--ink3)}
.kp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 2px 10px;border-bottom:1px solid var(--kp-line)}
.kp-chip{font-size:var(--fs-12);background:#f3f4f7;border-radius:12px;padding:4px 10px;color:var(--ink2)}
.kp-chip b{color:var(--ink);font-weight:600;margin-inline-start:4px}

/* the records behind a figure */
.kp-sheet{width:min(560px,calc(100vw - 24px));max-height:min(86vh,760px);overflow:hidden}
.kp-sheet .kp-dlist{overflow:auto;min-height:0;flex:1 1 auto;margin-inline:-4px;padding-inline:4px}
.kp-pseg{align-self:flex-start;max-width:100%}
/* "Oct 2026 so far" kept inside its pill, with room either side (TODO-from-manual #5) */
.kp-pseg button{padding:5px 12px;white-space:nowrap}
.kp-dlist{display:flex;flex-direction:column}
.kp-drow{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--kp-line);font-size:var(--fs-13)}
.kp-dtoday{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who amt" "when amt"}
.kp-dtoday>span:first-child{grid-area:when;font-size:var(--fs-12)}
.kp-dtoday>span:nth-child(2){grid-area:who}
.kp-dtoday .kp-damt{grid-area:amt}
.kp-drow small{display:block}
.kp-damt{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.kp-damt b{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.kp-dsum{border-bottom:0;font-weight:600}
.kp-st{font-size:var(--fs-11);border-radius:6px;padding:1px 6px;background:#f0f0f3;color:var(--ink2);white-space:nowrap}
.kp-st-done,.kp-st-booked,.kp-st-came{background:#e7f4ea;color:var(--kp-good)}
.kp-st-missed,.kp-st-late,.kp-st-old{background:#fdecea;color:var(--kp-bad)}
.kp-gsheet{width:min(460px,calc(100vw - 24px))}

@media (max-width:860px){
  .kp-dg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kp-dmain{grid-template-columns:minmax(120px,1fr) minmax(0,1.4fr) auto}
}
@media (max-width:620px){
  .kp-top,.kp-top3,.kp-owes{grid-template-columns:1fr}
  .kp-hl>b{font-size:var(--fs-28)} .kp-hero>b{font-size:34px}
  .kp-dmain{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bar bar"}
  .kp-dname{grid-area:name} .kp-dbar{grid-area:bar} .kp-dval{grid-area:val}
  .kp-dg{grid-template-columns:1fr 1fr}
  .kp-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .kp-row .kp-spark{grid-row:2;grid-column:1}
  .kp-row .kp-val{grid-row:1/3;grid-column:2}
  .kp-bars .kp-axis{font-size:var(--fs-14)} .kp-bars .kp-barlab{font-size:var(--fs-15)} .kp-bars .kp-gridlab{font-size:var(--fs-13)}
}
@media print{.kp-nav,.kp-sheet,.scrim{display:none!important}}
/* partners and pay later (26 Oct, kpExtras) */
.kp-xcard{background:var(--kp-tile);border-radius:14px;padding:6px 16px 10px}
.kp-xh{font-size:var(--fs-12);color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 2px}
.kp-xrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 18px;align-items:center;padding:8px 0;border-bottom:1px solid var(--sep2)}
.kp-xrow:last-of-type{border-bottom:0}
.kp-xrow>span:first-child{display:flex;flex-direction:column;min-width:0}
.kp-xrow small{font-size:var(--fs-12);color:var(--ink2)}
.kp-xn{display:flex;flex-direction:column;align-items:flex-end;text-align:end}
.kp-xn b{font-variant-numeric:tabular-nums}
@media (max-width:600px){.kp-xrow{grid-template-columns:1fr 1fr}.kp-xrow>span:first-child{grid-column:1/-1}.kp-xn{align-items:flex-start;text-align:start}}