/* ============================================================
   S13 · lp-focus-stats.css — Auswertung des Blockers
   ============================================================ */

/* Abbruchquote — die eine Kennzahl, die das Feature beantwortet */
.lp-fs-hero{display:flex;align-items:center;gap:16px;padding:16px 15px}
.lp-fs-ring{position:relative;flex:0 0 auto;display:flex}
.lp-fs-ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.lp-fs-ring .ctr .n{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lp-fs-ring .ctr .n u{text-decoration:none;font-size:13px;color:var(--text-3);margin-left:1px}
.lp-fs-ring .ctr .l{font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-4);white-space:nowrap}
.lp-fs-hero .txt{min-width:0}
.lp-fs-hero .txt .t{font-size:14px;font-weight:650;letter-spacing:-.015em;line-height:1.35;text-wrap:pretty}
.lp-fs-hero .txt .s{font-size:11.5px;color:var(--text-3);font-weight:500;line-height:1.5;margin-top:5px;text-wrap:pretty}

/* drei zaehlbare Zahlen */
.lp-fs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border-top:1px solid var(--hair)}
.lp-fs-three > div{background:var(--bg-2);padding:12px 13px}
.lp-fs-three .k{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4)}
.lp-fs-three .v{font-size:19px;font-weight:700;letter-spacing:-.025em;margin-top:4px;font-variant-numeric:tabular-nums}
/* Durchbrueche bleiben grau. Ein Durchbruch ist eine Entscheidung,
   keine Niederlage — Rot waere ein Kommentar. */
.lp-fs-three .v.q{color:var(--text-2)}

/* Serie — mit ehrlicher Nebenzeile */
.lp-fs-streak{display:flex;align-items:baseline;gap:9px}
.lp-fs-streak .n{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lp-fs-streak .u{font-size:13px;font-weight:600;color:var(--text-3)}
.lp-fs-days{display:flex;gap:4px;margin-top:12px}
.lp-fs-days i{flex:1;height:26px;border-radius:5px;background:var(--surface-2);border:1px solid var(--hair)}
.lp-fs-days i.clean{background:color-mix(in srgb,var(--green) 34%,transparent);border-color:transparent}
.lp-fs-days i.broke{background:color-mix(in srgb,var(--red) 40%,transparent);border-color:transparent}
/* ruhig = weder gehalten noch gebrochen. Eigener Zustand, damit der
   Streifen die Serienrechnung nachpruefbar macht. */
.lp-fs-days i.quiet{background:var(--surface-2)}
.lp-fs-dl{display:flex;gap:4px;margin-top:5px}
.lp-fs-dl span{flex:1;text-align:center;font-size:9.5px;font-weight:650;color:var(--text-4)}

/* Ereignisliste — immer da, auch wenn es fuer Diagramme zu wenig ist */
.lp-fs-ev{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--hair)}
.lp-fs-ev:last-child{border-bottom:none}
.lp-fs-ev .tm{font-size:12px;font-weight:650;color:var(--text-3);font-variant-numeric:tabular-nums;width:38px;flex:0 0 auto}
.lp-fs-ev .nm{flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:-.01em}
.lp-fs-ev .nm small{display:block;font-size:11px;color:var(--text-3);font-weight:500;margin-top:2px}
.lp-fs-out{font-size:9.5px;font-weight:700;padding:4px 8px;border-radius:6px;text-transform:uppercase;
  letter-spacing:.05em;flex:0 0 auto}
/* "gelassen" / "geoeffnet" — sachlich, nicht "widerstanden"/"gescheitert" */
.lp-fs-out.stop{background:var(--green-dim);color:var(--green)}
.lp-fs-out.thru{background:var(--surface-3);color:var(--text-2)}

.lp-fs-note{font-size:11px;line-height:1.5;color:var(--text-4);font-weight:500;padding:12px 15px;text-wrap:pretty}
.lp-fs-note b{color:var(--text-3);font-weight:650}