/* Moved from websites/templates/websites/_kpi_report_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

/* ---- The date picker, above the Overview ---- */
.kpi-datebar { display: flex; align-items: center; gap: var(--space-3);
               flex-wrap: wrap; margin: var(--space-4) 0; }
.kpi-datebar label { font-weight: 600; }
.kpi-datebar select { padding: .35rem .6rem; }
.kpi-datebar .stale { color: var(--color-text-muted, var(--slate)); font-size: .85rem; }

/* A section's lead line: its grade (or its count), beside the help note
   that says what the family measures (DOC_DESIGN_UI_KIT.md §4.15). */
.kpi-lead { margin: 0; font-size: 14px; color: var(--color-neutral-700); }
.kpi-lead b {
  display: block; font-family: var(--font-heading); font-weight: 800; font-size: 30px;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.kpi-lead + * { margin-top: var(--space-4); }
/* The condition badge (§4.19) beside a grade's number. */
.kpi-lead b .badge { vertical-align: middle; margin-left: var(--space-2);
  letter-spacing: 0; }

/* ---- Direction pills (the grades section) ---- */
.kpi-dir { font-size: .72rem; font-weight: 700; letter-spacing: .05em;
           text-transform: uppercase; padding: .25rem .65rem; border-radius: 99px;
           white-space: nowrap;
           print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.kpi-dir--higher  { background: var(--mint-bg); color: var(--mint-text); }
.kpi-dir--lower   { background: var(--sky); color: var(--blue-deep); }
.kpi-dir--context { background: var(--row-tint); color: var(--slate-text); }

/* ---- Grade rings ---- */
.kpi-ov-columns { display: grid; grid-template-columns: 1fr 1fr;
                  gap: var(--space-5) var(--space-6); align-items: start;
                  margin-top: var(--space-5); }
@media (max-width: 980px) { .kpi-ov-columns { grid-template-columns: 1fr; } }
.kpi-ov-group { min-width: 0; }
/* Inside a half-width column the chart cannot share its row with the
   300px legend — the legend goes under the plot instead. */
.kpi-ov-columns .kpi-plot-wrap { grid-template-columns: 1fr; }
.kpi-ov-head { display: flex; align-items: center; gap: var(--space-3);
               margin: 0 0 var(--space-1); }
.kpi-ov-note { color: var(--color-text-muted, var(--slate)); font-size: .85rem;
               max-width: 80ch; margin: 0 0 var(--space-3); }
.kpi-rings { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
             margin: var(--space-2) 0; }
.kpi-ring { text-decoration: none; color: inherit; text-align: center;
            display: grid; justify-items: center; gap: .3rem; min-width: 84px; }
.kpi-ring svg { width: 72px; height: 72px; }
.kpi-ring-track { fill: none; stroke: var(--color-border-light, var(--row-tint)); stroke-width: 7; }
.kpi-ring-arc { fill: none; stroke-width: 7; stroke-linecap: round;
                transform: rotate(-90deg); transform-origin: 50% 50%; }
.kpi-ring-arc--good { stroke: var(--mint); }
.kpi-ring-arc--warn { stroke: var(--amber); }
.kpi-ring-arc--bad  { stroke: var(--coral); }
.kpi-ring-arc--none { stroke: transparent; }
.kpi-ring-num { font-size: 19px; font-weight: 800; }
.kpi-ring-label { font-size: .78rem; color: var(--color-text-muted, var(--slate-text));
                  max-width: 120px; line-height: 1.25; }
.kpi-plot-tick { font-size: 11px; fill: var(--color-text-muted, var(--slate)); }

/* ---- KPI rows ---- */
.kpi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
           gap: var(--space-2) var(--space-5); align-items: center;
           padding: var(--space-3) 0;
           border-bottom: 1px solid var(--color-border-light, var(--row-tint)); }
.kpi-row:last-of-type { border-bottom: 0; }
.kpi-name { font-weight: 600; }
.kpi-desc { color: var(--color-text-muted, var(--slate)); font-size: .875rem;
            max-width: 65ch; margin-top: .15rem; }
.kpi-value { font-size: 1.35rem; font-weight: 700; white-space: nowrap;
             font-variant-numeric: tabular-nums; text-align: right; }
.kpi-value.is-missing { color: var(--slate); font-weight: 400; }
.kpi-imp { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
           text-transform: uppercase; padding: .2rem .55rem; border-radius: 99px;
           white-space: nowrap; justify-self: end;
           print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.kpi-imp--critical { background: var(--coral-bg); color: var(--coral-text); }
.kpi-imp--high     { background: var(--amber-bg); color: var(--amber-text); }
.kpi-imp--medium   { background: var(--sky); color: var(--blue-deep); }
.kpi-imp--low      { background: var(--row-tint); color: var(--slate-text); }
@media (max-width: 720px) {
  .kpi-row { grid-template-columns: minmax(0, 1fr) auto; }
  .kpi-imp { grid-column: 2; grid-row: 1; }
  .kpi-value { grid-column: 2; }
}

/* ---- Time plots ---- */
.kpi-plot-block { margin-top: var(--space-5); }
.kpi-plot-title { font-weight: 700; margin: 0 0 var(--space-2); }
.kpi-plot-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
                 gap: var(--space-5); align-items: start; }
@media (max-width: 980px) { .kpi-plot-wrap { grid-template-columns: 1fr; } }
.kpi-plot svg { width: 100%; height: auto; display: block; }
.kpi-plot-frame { stroke: var(--border); }
/* "I did this" marks on the plots (kit section 16 History: events marked). */
.kpi-event line { stroke: var(--sun); stroke-width: 2; stroke-dasharray: 4 4; }
.kpi-event circle { fill: var(--sun); stroke: var(--white); stroke-width: 2; cursor: help; }
.kpi-plot-date { font-size: 11px; fill: var(--color-text-muted, var(--slate)); }
.kpi-plot-scale { color: var(--color-text-muted, var(--slate)); font-size: .8rem;
                  margin-top: var(--space-1); }
.kpi-legend { display: grid; gap: .35rem; font-size: .85rem; margin: 0; }
.kpi-legend-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto;
                  gap: .5rem; align-items: center; }
.kpi-legend-key { width: 14px; height: 4px; border-radius: 2px; display: inline-block;
                  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.kpi-legend-val { font-variant-numeric: tabular-nums; white-space: nowrap; }