/* Kleto Pulse search performance and authority (2026-10-19).
   Reuses the card row (.se-row), statgrid, chartbox and panel grammar.
   Tables are grids that fit 320px without horizontal scroll: the key
   column truncates and the position and checked columns drop below 480px. */
.spf-none { font-size: 15px; color: var(--dim); }
/* One line at every width, so the tile keeps the skeleton height; on the
   narrowest phones the delta clips before it wraps. */
.spf-kpi { display: block; white-space: nowrap; overflow: hidden; }
.spf-delta { font-size: 13px; font-weight: 600; margin-left: 2px; }
@media (max-width: 420px) { .spf-delta { font-size: 11px; } }

/* Card row: the search engine row's box model (search-engines.css), so
   hydration never changes the card height. Numbers bold, units dim. */
.spf-row { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--panel); }
.spf-row .metric__k { margin: 0 0 4px; }
.spf-row__v {
  margin: 0; height: 18px; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 6px;
}
.spf-row__v .skel { height: 0.8em; }
.spf-row__mut { color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.spf-v { color: var(--text); font-weight: 700; flex: none; }
.spf-u { color: var(--dim); flex: none; margin-right: 6px; }

/* Detail: two small trend charts side by side from tablet width. */
.spf-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 0; }
@media (min-width: 760px) { .spf-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spf-t { margin: 16px 0 0; min-width: 0; }
.spf-t__title { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.spf-t__list, .spf-a { list-style: none; margin: 0; padding: 0; }
.spf-t__row, .spf-a__row {
  display: grid; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--panel);
  font-family: var(--mono); font-size: 12px; min-width: 0;
}
.spf-t__row { grid-template-columns: minmax(0, 1fr) 5.5em 7em 5.5em; }
.spf-a__row { grid-template-columns: minmax(0, 1fr) 8.5em 8em 7.5em; }
.spf-t__head, .spf-a__head { border-top: 0; color: var(--faint); font-size: 11px; }
.spf-t__k, .spf-a__d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.spf-t__head .spf-t__k, .spf-a__head .spf-a__d { color: var(--faint); }
.spf-t__n, .spf-a__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.spf-a__row--self .spf-a__d { font-weight: 700; }
.spf-a__row--self .spf-a__n strong, .spf-a__n strong { color: var(--text); }
.spf-a__tag { font-weight: 400; font-size: 11px; color: var(--faint); }
.spf-note { margin: 10px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.spf-note code { font-size: 11px; }
@media (max-width: 479px) {
  .spf-t__row { grid-template-columns: minmax(0, 1fr) 4.5em 6em; }
  .spf-a__row { grid-template-columns: minmax(0, 1fr) 6.2em 6.2em; gap: 8px; font-size: 11px; }
  .spf-t__pos, .spf-a__c, .spf-long { display: none; }
}