/* Reports, CSC performance (js/reports.js). Uses the shared tokens, so light and dark both follow styles.css. */
.rppage { --lr-bar: var(--blue-btn); }
.pfctl { margin-bottom: 16px; }
.pftiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pfwide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; align-items: start; }
.pftile { gap: 8px; }
.pftile .lrtk { margin: 0; }
.pfval { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfval .pflab { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: none; }
.pfval b.pfsm { font-size: 1.25rem; }
.pfpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pfpair .pfval + .pfval { border-left: 1px solid var(--divider); padding-left: 12px; }
.pfpair .pfval b { font-size: 1.5rem; }
.pftile .lrts { overflow-wrap: anywhere; }
.pfscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.pftbl { width: 100%; }
.pftbl th[scope="row"] { overflow-wrap: anywhere; }
.pfch { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pfchh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.875rem; margin-bottom: 4px; }
.pfchh span { min-width: 0; overflow-wrap: anywhere; }
.pfchh b { font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.pfbar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--divider); overflow: hidden; }
.pfbar::-webkit-progress-bar { background: var(--divider); border-radius: 4px; }
.pfbar::-webkit-progress-value { background: var(--lr-bar); border-radius: 4px; }
.pfbar::-moz-progress-bar { background: var(--lr-bar); border-radius: 4px; }
.pfhow summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: 32px; display: flex; align-items: center; }
.pfhow dl { margin: 8px 0 0; }
.pfhow dt { font-weight: 700; margin-top: 12px; }
.pfhow dd { margin: 2px 0 0; color: var(--grey-ink); max-width: 70ch; }
@media (max-width: 1100px) { .pftiles { grid-template-columns: 1fr; } .pftiles .pftile .pfpair { max-width: 520px; } }
@media (max-width: 900px) { .pfwide { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .pfpair { grid-template-columns: 1fr; }
  .pfpair .pfval + .pfval { border-left: 0; padding-left: 0; border-top: 1px solid var(--divider); padding-top: 12px; }
}
@media (forced-colors: active) { .pfbar::-webkit-progress-value { background: CanvasText; } .pfbar::-moz-progress-bar { background: CanvasText; } }

/* Targets (reports.js tgtCard / tgtChip) */
.pftgtcard { margin-bottom: 16px; }
.pftgtlist { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.pftgtlist li { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--surface2); }
.pftgtlist li span { color: var(--muted); font-size: var(--fs-14); }
.pftgt { display: inline-block; width: fit-content; align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface2); color: var(--muted); }
.pftgt.ok { background: var(--good-bg, #E6F2EA); color: var(--good); }
.pftgt.near { background: var(--amber-bg, #FFF4DC); color: var(--amber); }
.pftgt.bad { background: var(--red-bg, #FBE9E7); color: var(--red); }