/* RustPress admin — charts and shared widgets (SPEC-ITER1 §9.1). Owner: FOUNDATION (frozen).
   Colours of the charts are CSS variables so every screen shares one palette (light admin). */

:root {
  /* Categorical palette, validated for contrast against white (≥ 3:1) and distinguishable for
     common colour-vision deficiencies when paired with the legend. */
  --rp-chart-1: #2271b1;
  --rp-chart-2: #d63638;
  --rp-chart-3: #00a32a;
  --rp-chart-4: #996800;
  --rp-chart-5: #8a2be2;
  --rp-chart-6: #008a8a;
  --rp-chart-7: #c2410c;
  --rp-chart-8: #50575e;
  --rp-chart-grid: #e2e4e7;
  --rp-chart-axis: #646970;
  --rp-good: #007017;
  --rp-good-bg: #edfaef;
  --rp-bad: #b32d2e;
  --rp-bad-bg: #fcf0f1;
  --rp-warn: #8a5300;
  --rp-warn-bg: #fcf9e8;
  --rp-info: #135e96;
  --rp-info-bg: #f0f6fc;
  --rp-neutral: #50575e;
  --rp-neutral-bg: #f0f0f1;
}

.rp-sr-only { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }

/* ---------------------------------------------------------------- charts */
.rp-chart { position: relative; width: 100%; min-width: 0; }
.rp-chart-svg { display: block; width: 100%; height: auto; overflow: visible; font: 11px/1 var(--rp-font); }
.rp-chart-grid { stroke: var(--rp-chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.rp-chart-axis { fill: var(--rp-chart-axis); font-size: 11px; }
.rp-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-chart-line.is-dashed { stroke-dasharray: 5 4; }
.rp-chart-areafill { opacity: .16; stroke: none; }
.rp-chart-bar { shape-rendering: crispEdges; }
.rp-chart-target.is-active .rp-chart-bar { filter: brightness(1.12); }
.rp-chart-slice { stroke: #fff; stroke-width: 2; cursor: default; outline: none; }
.rp-chart-slice.is-active, .rp-chart-slice:focus { filter: brightness(1.1); stroke: var(--rp-text-strong); }
.rp-chart-center { fill: var(--rp-text-strong); font-size: 18px; font-weight: 600; }
.rp-chart-hit { fill: transparent; cursor: crosshair; outline: none; }
.rp-chart-hit:focus-visible { stroke: var(--rp-blue); stroke-width: 2; }
.rp-chart-marker { opacity: 0; pointer-events: none; }
.rp-chart-target.is-active .rp-chart-marker { opacity: 1; }
.rp-chart-crosshair { stroke: var(--rp-chart-axis); stroke-width: 1; stroke-dasharray: 2 3; }
.rp-chart-annotation { stroke: var(--rp-text-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.rp-chart-annotation-label { fill: var(--rp-text-strong); font-size: 11px; font-weight: 600; }
.rp-chart-empty { fill: var(--rp-muted); font-size: 13px; }
.rp-chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--rp-dark); color: #fff; border-radius: 3px; padding: 6px 8px; font-size: 12px; line-height: 1.5; max-width: 260px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.rp-chart-tip strong { display: block; margin-bottom: 2px; }
.rp-chart-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rp-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; color: var(--rp-text); }
.rp-chart-legend li { display: flex; align-items: center; gap: 6px; }
.rp-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rp-chart-swatch.is-dashed { height: 3px; }
.rp-sparkline { display: block; }
.rp-sparkline-line { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.rp-sparkline-area { opacity: .15; }
.rp-sparkline-empty { stroke: var(--rp-chart-grid); stroke-width: 1; }

/* ---------------------------------------------------------------- KPI cards */
.rp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0 20px; }
.rp-kpi { background: #fff; border: 1px solid var(--rp-border-light); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
a.rp-kpi:hover, a.rp-kpi:focus { border-color: var(--rp-blue); color: inherit; }
.rp-kpi-label { color: var(--rp-muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.rp-kpi-help { cursor: help; border-bottom: 1px dotted var(--rp-muted); }
.rp-kpi-value { color: var(--rp-text-strong); font-size: 24px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rp-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 28px; }
.rp-delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.rp-delta.is-good { color: var(--rp-good); }
.rp-delta.is-bad { color: var(--rp-bad); }
.rp-delta.is-flat { color: var(--rp-muted); }
.rp-kpi-prev { color: var(--rp-muted); font-size: 11px; }

/* ---------------------------------------------------------------- pills, badges, gauges */
.rp-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; padding: 1px 8px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.rp-pill.is-neutral { background: var(--rp-neutral-bg); color: var(--rp-neutral); }
.rp-pill.is-info { background: var(--rp-info-bg); color: var(--rp-info); }
.rp-pill.is-success { background: var(--rp-good-bg); color: var(--rp-good); }
.rp-pill.is-warning { background: var(--rp-warn-bg); color: var(--rp-warn); border-color: #f0c33c; }
.rp-pill.is-error { background: var(--rp-bad-bg); color: var(--rp-bad); }
.rp-score { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; border-radius: 10px; padding: 1px 6px; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.rp-score.is-good { background: var(--rp-good-bg); color: var(--rp-good); }
.rp-score.is-ok { background: var(--rp-warn-bg); color: var(--rp-warn); }
.rp-score.is-bad { background: var(--rp-bad-bg); color: var(--rp-bad); }
.rp-score.is-none { background: var(--rp-neutral-bg); color: var(--rp-neutral); }
.rp-gauge { display: inline-block; position: relative; }
.rp-gauge-track { stroke: var(--rp-chart-grid); fill: none; }
.rp-gauge-value { fill: none; stroke-linecap: round; }
.rp-gauge-value.is-good { stroke: var(--rp-good); }
.rp-gauge-value.is-ok { stroke: #dba617; }
.rp-gauge-value.is-bad { stroke: var(--rp-bad); }
.rp-gauge-label { fill: var(--rp-text-strong); font-weight: 600; font-family: var(--rp-font); }

/* ---------------------------------------------------------------- inheritance badge */
.rp-inherit { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border-radius: 3px; padding: 1px 6px; background: var(--rp-neutral-bg); color: var(--rp-neutral); }
/* A plugin overlay (SPEC-ITER3 §4.7.2) is a default: same neutral look as is-default. */
.rp-inherit.is-plugin { background: var(--rp-neutral-bg); color: var(--rp-neutral); }
.rp-inherit.is-site { background: var(--rp-info-bg); color: var(--rp-info); }
.rp-inherit.is-account { background: #f3effd; color: #5b2b9f; }
.rp-inherit.is-fleet { background: #eef7f6; color: #0b5e5e; }
.rp-inherit.is-experiment { background: var(--rp-warn-bg); color: var(--rp-warn); }
.rp-inherit.is-locked { background: var(--rp-bad-bg); color: var(--rp-bad); }

/* ---------------------------------------------------------------- settings form */
.rp-settings-group { margin: 0 0 20px; }
.rp-settings-group > h2 { font-size: 1.15em; margin: 0 0 8px; }
.rp-setting { background: #fff; border: 1px solid var(--rp-border-light); border-radius: 4px; padding: 12px 14px; margin: 0 0 10px; }
.rp-setting-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.rp-setting-title { font-weight: 600; color: var(--rp-text-strong); margin: 0; font-size: 13px; }
.rp-setting-help { color: var(--rp-muted); margin: 4px 0 8px; }
.rp-setting-body { display: grid; gap: 8px; }
.rp-setting-body label.rp-field { display: grid; gap: 3px; }
.rp-setting-body label.rp-check { display: flex; gap: 6px; align-items: center; }
.rp-setting-body fieldset { border: 1px solid var(--rp-border-light); border-radius: 3px; padding: 8px 10px; display: grid; gap: 8px; }
.rp-setting-body legend { font-weight: 600; padding: 0 4px; }
.rp-setting-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.rp-setting-error { color: var(--rp-bad); margin: 0; }
.rp-setting.is-locked { background: #fafafa; }
.rp-map-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- filters, ranges, selection */
.rp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 10px 0 14px; }
.rp-filters label { display: grid; gap: 2px; font-size: 12px; color: var(--rp-muted); }
.rp-filters select, .rp-filters input { min-width: 120px; }
.rp-daterange { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.rp-selection { display: grid; gap: 8px; background: #fff; border: 1px solid var(--rp-border-light); border-radius: 4px; padding: 10px 12px; }
.rp-selection-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-selection-count { font-weight: 600; color: var(--rp-text-strong); }
.rp-multi { min-width: 160px; }

/* ---------------------------------------------------------------- cards, tabs, empty */
.rp-card { background: #fff; border: 1px solid var(--rp-border-light); border-radius: 4px; margin: 0 0 16px; min-width: 0; }
.rp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rp-border-light); }
.rp-card-head h2 { font-size: 14px; margin: 0; }
.rp-card-body { padding: 12px 14px; }
.rp-tabs [role=tablist] { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rp-border); margin: 0 0 12px; }
.rp-tabs [role=tab] { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--rp-text); }
.rp-tabs [role=tab][aria-selected=true] { border-bottom-color: var(--rp-blue); color: var(--rp-text-strong); font-weight: 600; }
.rp-tabs [role=tab]:focus-visible { box-shadow: inset 0 0 0 2px var(--rp-blue); }
.rp-empty { text-align: center; padding: 32px 16px; color: var(--rp-muted); }
.rp-empty h3 { color: var(--rp-text-strong); margin: 0 0 6px; }
.rp-sitelink { display: grid; gap: 1px; }
.rp-sitelink small { color: var(--rp-muted); }
.rp-under-construction { max-width: 680px; }
.rp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

@media (max-width: 782px) {
  .rp-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .rp-map-row { grid-template-columns: 1fr; }
}
/* Fixed-keys map of objects (alerts.rules): one collapsed section per key. */
.rp-map-section { border: 1px solid var(--rp-border-light, #dcdcde); border-radius: 4px; margin: 0 0 6px; background: #fff; }
.rp-map-section > summary { cursor: pointer; padding: 7px 10px; }
.rp-map-section > summary code { font-size: 11px; color: #646970; background: none; padding: 0; }
.rp-map-section .rp-map-off { color: #646970; font-weight: 400; }
.rp-map-section[open] > summary { border-bottom: 1px solid var(--rp-border-light, #dcdcde); }
.rp-map-section > fieldset { border: 0; margin: 0; padding: 8px 10px 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.rp-map-key code { font-size: 11px; color: #646970; background: none; padding: 0; }
/* Fieldsets default to min-width: min-content and would push phones into a horizontal scroll. */
.rp-setting fieldset { min-width: 0; }
.rp-setting-body, .rp-setting-body fieldset { grid-template-columns: minmax(0, 1fr); }
.rp-setting-body label.rp-field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.rp-setting input:not([type=checkbox]):not([type=radio]):not([type=color]), .rp-setting select, .rp-setting textarea { max-width: 100%; box-sizing: border-box; }

/* ---------------------------------------------------------------- iteration 2 (SPEC-ITER2 §9.2) */
.rp-sitesearch { position: relative; min-width: 220px; max-width: 420px; }
.rp-sitesearch-input { width: 100%; box-sizing: border-box; }
.rp-sitesearch-list { position: absolute; z-index: 100000; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--rp-border, #8c8f94); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); max-height: 360px; overflow: auto; }
.rp-sitesearch-item { display: grid; gap: 1px; padding: 6px 10px; cursor: pointer; color: var(--rp-text-strong, #1d2327); }
.rp-sitesearch-item.is-active, .rp-sitesearch-item:hover { background: var(--rp-blue, #2271b1); color: #fff; }
.rp-sitesearch-item.is-active .rp-sitesearch-meta, .rp-sitesearch-item:hover .rp-sitesearch-meta { color: #f0f6fc; }
.rp-sitesearch-name { font-weight: 600; }
.rp-sitesearch-meta { font-size: 12px; color: var(--rp-muted, #646970); }
.rp-sitesearch-empty { padding: 6px 10px; color: var(--rp-muted, #646970); }

.rp-job { display: grid; gap: 4px; max-width: 560px; }
.rp-job-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-job-bar { width: 100%; height: 10px; }
.rp-job-detail, .rp-job-phase { font-size: 12px; color: var(--rp-muted, #646970); }
.rp-job.is-compact { gap: 2px; }

.rp-diff { font: 12px/1.5 Menlo, Consolas, monospace; background: #f6f7f7; border: 1px solid var(--rp-border-light, #dcdcde); border-radius: 4px; margin: 0; padding: 6px 0; overflow: auto; max-height: 420px; }
.rp-diff.is-same { font-family: inherit; padding: 6px 10px; }
.rp-diff-line { white-space: pre-wrap; word-break: break-word; padding: 0 10px; }
.rp-diff-line.is-del { background: #fcf0f1; color: #8a2424; }
.rp-diff-line.is-add { background: #edfaef; color: #00450c; }
.rp-diff-sign { display: inline-block; width: 1.2em; }
.rp-diff.is-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
.rp-diff.is-split pre { margin: 0; padding: 6px 0; }
.rp-diff-col + .rp-diff-col { border-left: 1px solid var(--rp-border-light, #dcdcde); }
.rp-diff-head { font: 600 12px/1.5 inherit; padding: 4px 10px; border-bottom: 1px solid var(--rp-border-light, #dcdcde); background: #fff; }

.rp-stepper { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: none; }
.rp-step { margin: 0; }
.rp-step-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--rp-border-light, #dcdcde); border-radius: 18px; background: #fff; font: inherit; color: var(--rp-text, #3c434a); cursor: default; }
button.rp-step-btn { cursor: pointer; }
.rp-step-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #dcdcde; font-size: 11px; font-weight: 600; }
.rp-step-state { font-size: 11px; color: var(--rp-muted, #646970); }
.rp-step.is-done .rp-step-num { background: #00a32a; color: #fff; }
.rp-step.is-running .rp-step-num { background: var(--rp-blue, #2271b1); color: #fff; }
.rp-step.is-failed .rp-step-num, .rp-step.is-blocked .rp-step-num { background: #d63638; color: #fff; }
.rp-step.is-warn .rp-step-num { background: #dba617; color: #1d2327; }
.rp-step.is-current .rp-step-btn { border-color: var(--rp-blue, #2271b1); box-shadow: 0 0 0 1px var(--rp-blue, #2271b1); }

.rp-copyfield { display: grid; gap: 4px; margin: 0 0 10px; }
.rp-copyfield label { font-weight: 600; }
.rp-copyfield-row { display: flex; gap: 6px; }
.rp-copyfield-row input { flex: 1; min-width: 0; }

.rp-filedrop { display: grid; gap: 4px; place-items: center; text-align: center; padding: 22px 14px; border: 2px dashed var(--rp-border, #8c8f94); border-radius: 6px; background: #fff; cursor: pointer; }
.rp-filedrop.is-over { border-color: var(--rp-blue, #2271b1); background: #f0f6fc; }
.rp-filedrop-wrap input[type=file]:focus-visible + .rp-filedrop { box-shadow: 0 0 0 2px var(--rp-blue, #2271b1); }
.rp-filedrop-name { font-size: 12px; color: var(--rp-muted, #646970); }

.rp-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rp-finding { border-left: 3px solid #d63638; padding: 4px 10px; background: #fff; }
.rp-finding-excerpt { display: inline; quotes: "«" "»"; }
.rp-finding-excerpt mark { background: #fcf0f1; color: #8a2424; font-weight: 600; }
.rp-finding p { margin: 4px 0 0; }
.rp-findings.is-compact .rp-finding { padding: 2px 8px; }

.rp-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.rp-kv dt { font-weight: 600; color: var(--rp-text-strong, #1d2327); }
.rp-kv dd { margin: 0; overflow-wrap: anywhere; }
.rp-danger code { font-size: 13px; }
.rp-not-available { max-width: 680px; }
.rp-ops-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* Console shell (SPEC-ITER2 §9.1) */
#rp-admin-bar-switcher { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
#rp-admin-bar-switcher .rp-sitesearch { min-width: 260px; }
#rp-admin-bar-switcher .rp-sitesearch-input { height: 26px; min-height: 26px; padding: 0 8px; font-size: 13px; }
.rp-scope-exit { background: none; border: 1px solid rgba(240, 246, 252, .5); color: #f0f6fc; border-radius: 3px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
#rp-admin-bar-readonly { display: flex; align-items: center; padding: 0 6px; }
.rp-readonly-pill { font-size: 11px; }
#rp-banner { padding: 10px 20px 0; }
@media (max-width: 782px) {
  #rp-admin-bar-switcher .rp-sitesearch { min-width: 160px; }
  .rp-diff.is-split { grid-template-columns: minmax(0, 1fr); }
}