/* =====================================================================
   Leakproof design kit · kit.css  (the shared components: src/server/routes/_kit.js)
   Tag, MarkerBadge, CountsBar, the figure type role. Needs tokens.css first.
   Loaded on every public page (sitePage, the shared /report/ page), every admin page
   (html.js ADMIN_STYLES) and inlined in the paid report (src/delivery/report.js).
   Only --lp- tokens, only lp- classes, so it can sit next to admin.css and site.css.
   The meaning system (tokens.css): leak = red pen, opp = calm blue, fine = muted green,
   unknown = dashed grey ("only a real lead can check"), neutral = grey outline, ink = solid ink.
   ===================================================================== */

/* ---------- the figure type role: every KPI and count (never mono: "$0" must not read "$Ø") ---------- */
.lp-figure { font-family: var(--lp-f-figure); font-stretch: var(--lp-figure-stretch); font-weight: var(--lp-figure-weight); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1; }

/* ---------- Tag: tones leak / opp / fine / unknown / neutral / ink; outline (default) or solid ---------- */
.lp-tag {
  --tag-ink: var(--lp-ink-2); --tag-bg: var(--lp-sunk); --tag-line: var(--lp-rule-2);
  display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline; white-space: nowrap;
  font: var(--lp-w-mono-strong) var(--lp-t-label-sm)/1.2 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--tag-ink); background: transparent; border: 1px solid var(--tag-line); border-radius: var(--lp-r-1);
  padding: 3px 7px;
}
.lp-tag.is-solid { background: var(--tag-bg); border-color: transparent; }
.lp-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.lp-tag--leak { --tag-ink: var(--lp-leak); --tag-bg: var(--lp-leak-bg); --tag-line: var(--lp-leak-line); }
.lp-tag--opp { --tag-ink: var(--lp-opp); --tag-bg: var(--lp-opp-bg); --tag-line: var(--lp-opp-line); }
.lp-tag--fine { --tag-ink: var(--lp-fine); --tag-bg: var(--lp-fine-bg); --tag-line: var(--lp-fine-line); }
.lp-tag--unknown { --tag-ink: var(--lp-ink-2); --tag-bg: transparent; --tag-line: var(--lp-unknown); border-style: dashed; }
.lp-tag--unknown.is-solid { border-color: var(--lp-unknown); }
.lp-tag--neutral { --tag-ink: var(--lp-ink-2); --tag-bg: var(--lp-sunk); --tag-line: var(--lp-rule-2); }
.lp-tag--ink { --tag-ink: var(--lp-ink); --tag-bg: var(--lp-ink); --tag-line: var(--lp-ink); }
.lp-tag--ink.is-solid { color: var(--lp-on-ink); }
/* "Check a setting" (with tone neutral): a solid ink-2 outline and a "?" in a ring. Never dashed:
   dashed stays reserved for "only a real lead can check" (lp-tag--unknown). */
.lp-tag--setting { --tag-ink: var(--lp-ink); --tag-line: var(--lp-ink-2); border-style: solid; }
.lp-tag--setting::before { content: "?"; display: inline-grid; place-items: center; flex: none; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; font-size: .8em; line-height: 1; letter-spacing: 0; }

/* ---------- MarkerBadge: leak filled red, opportunity outlined blue, note outlined pencil ---------- */
.lp-marker {
  display: inline-grid; place-items: center; flex: none; width: 1.5em; height: 1.5em;
  font-family: var(--lp-f-pen); font-size: var(--lp-t-marker); line-height: 1; font-weight: 400;
  border: 1.6px solid currentColor; border-radius: 52% 48% 55% 45% / 50% 55% 45% 50%; background: var(--lp-sheet);
}
.lp-marker--leak { color: var(--lp-on-pen); background: var(--lp-pen); border-color: var(--lp-pen); }
.lp-marker--opp { color: var(--lp-opp); }
.lp-marker--note { color: var(--lp-pencil); border-style: dashed; }

/* ---------- CountsBar: one cell per check, red / blue / green / dashed grey, and the key ---------- */
.lp-counts { display: grid; gap: 8px; min-width: 0; }
.lp-counts-label { margin: 0; font: var(--lp-w-mono) var(--lp-t-label)/1.4 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink-2); }
.lp-counts-bar { display: flex; gap: 2px; height: 8px; }
.lp-counts-bar i { flex: 1 1 0; min-width: 2px; border-radius: 1px; background: var(--lp-rule); }
.lp-counts-bar .is-leak { background: var(--lp-leak); }
.lp-counts-bar .is-opp { background: var(--lp-opp); }
.lp-counts-bar .is-fine { background: var(--lp-fine); }
/* "only a real lead can check": dashed grey, like the key's ring (never a solid outline) */
.lp-counts-bar .is-unknown { box-sizing: border-box; background: transparent; border: 1px dashed var(--lp-unknown); }
.lp-counts-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 var(--lp-t-xs)/1.35 var(--lp-f-body); color: var(--lp-ink-2); }
.lp-counts-key li { display: inline-flex; align-items: center; gap: 7px; }
.lp-counts-key li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lp-rule-2); }
.lp-counts-key .is-leak::before { background: var(--lp-leak); }
.lp-counts-key .is-opp::before { background: var(--lp-opp); }
.lp-counts-key .is-fine::before { background: var(--lp-fine); }
.lp-counts-key .is-unknown::before { background: transparent; border: 1.5px dashed var(--lp-unknown); width: 10px; height: 10px; }
.lp-counts-key b { font-family: var(--lp-f-figure); font-stretch: var(--lp-figure-stretch); font-weight: var(--lp-figure-weight); font-variant-numeric: tabular-nums; color: var(--lp-ink); font-size: 1.15em; }
.lp-counts-key .is-leak.is-some b { color: var(--lp-leak); }
.lp-counts-key .is-opp.is-some b { color: var(--lp-opp); }
.lp-counts-key--legend { font-family: var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); font-size: var(--lp-t-label-sm); letter-spacing: .03em; }
.lp-counts-note { margin: 0; font: 400 var(--lp-t-label-sm)/1.4 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); }

@media print {
  .lp-counts-bar i, .lp-counts-key li::before, .lp-marker { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}