npm - @keenmate/pure-admin-core - Versions diffs - 2.7.0 → 2.7.1 - Mend

@keenmate/pure-admin-core 2.7.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +8 -9
package/dist/css/main.css +1520 -0
package/package.json +1 -1
package/src/scss/_core.scss +11 -0
package/src/scss/core-components/_kpi-base.scss +169 -0
package/src/scss/core-components/_kpi-bento.scss +182 -0
package/src/scss/core-components/_kpi-comparison-gauges.scss +132 -0
package/src/scss/core-components/_kpi-editorial-minimal.scss +128 -0
package/src/scss/core-components/_kpi-hero-supporting.scss +210 -0
package/src/scss/core-components/_kpi-numeric-strip.scss +154 -0
package/src/scss/core-components/_kpi-sparkline-list.scss +171 -0
package/src/scss/core-components/_kpi-terminal.scss +229 -0

package/dist/css/main.css CHANGED Viewed

@@ -16651,6 +16651,1526 @@ code {
   height: 0.3rem;
 }
+/* ========================================
+   KPI · shared base
+   Cross-cutting building blocks used by every pa-kpi-* showcase.
+   Tokens (--pa-positive, --pa-detail-bg, --pa-chart-trendline-*) live in
+   _base-css-variables.scss; this file only defines the shared class
+   surface that consumes them.
+   ======================================== */
+/* ----- LIVE indicator (title-bar pulse) ---------------------------------
+   Used in every KPI card header — a small mono "LIVE" caption with a
+   pulsing green dot. Sits next to the card title. */
+.pa-kpi-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--pa-text-secondary);
+}
+.pa-kpi-live__dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background: var(--pa-positive);
+  box-shadow: 0 0 6px var(--pa-positive);
+  animation: pa-kpi-pulse 1.6s ease-in-out infinite;
+}
+@keyframes pa-kpi-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+/* ----- Card header row --------------------------------------------------
+   Title (h2/h3 by author choice) on one side, controls + LIVE on the other.
+   Wraps onto multiple rows on narrow cards. Every showcase uses this shape. */
+.pa-kpi-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.6rem;
+  flex-wrap: wrap;
+}
+/* ----- Card footer caption ---------------------------------------------
+   Two-line mono caption row at the bottom of the card (left: data source,
+   right: timestamp). Strong text inside picks up the focal color so things
+   like a metric name or count stand out. */
+.pa-kpi-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-secondary);
+}
+.pa-kpi-footer strong {
+  color: var(--pa-text-color-1);
+  font-weight: 700;
+}
+/* ----- Sparkline endpoint dot ------------------------------------------
+   The SVG circle that marks the end of a sparkline is converted to a CSS
+   span at init time — the SVG uses preserveAspectRatio="none" so an
+   embedded <circle> renders as an oval at non-square aspect ratios.
+   See kpi-showcases.js for the conversion; here we only style the result. */
+.pa-kpi-spark-dot {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -3px; /* centre on the (left, top) anchor */
+  border-radius: 50%;
+  background: currentColor; /* inherits sentiment color from chart wrapper */
+  pointer-events: none;
+}
+/* Wrapper inserted around an SVG sparkline at init time when its parent
+   isn't already a positioned anchor — so the .pa-kpi-spark-dot can be
+   absolutely positioned relative to the chart. */
+.pa-kpi-spark-wrap {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+/* ----- Hover detail popover --------------------------------------------
+   Bloomberg-dark by default regardless of host theme (terminal/data-dashboard
+   aesthetic). Override the --pa-detail-* tokens at :root or .pa-kpi-detail
+   level for a light/theme-aware variant.
+   Positioned by Floating UI anchored to a virtual element at the cursor —
+   the JS appends each popover to <body> at init so ancestor overflow:hidden
+   doesn't clip it. position: fixed because cursor coords are viewport-
+   relative; pointer-events:none so the cursor passes through cleanly and
+   tile mouseleave fires reliably. */
+.pa-kpi-detail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 9000;
+  min-width: 26rem;
+  max-width: 32rem;
+  background: var(--pa-detail-bg);
+  color: var(--pa-detail-text);
+  padding: 1.2rem 1.5rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.4rem;
+  box-shadow: var(--pa-detail-shadow);
+}
+.pa-kpi-detail[data-show] {
+  visibility: visible;
+}
+.pa-kpi-detail__title {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--pa-detail-title);
+  margin-bottom: 0.6rem;
+}
+.pa-kpi-detail dl {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.35rem 1.6rem;
+  margin: 0;
+}
+.pa-kpi-detail dt {
+  margin: 0;
+  color: var(--pa-detail-row-label);
+  font-weight: 400;
+}
+.pa-kpi-detail dd {
+  margin: 0;
+  text-align: end;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-detail {
+  /* Inline sentiment hints for dd content (e.g. <dd>+12% <span class="pos">…</span></dd>) */
+}
+.pa-kpi-detail .pos {
+  color: var(--pa-positive);
+}
+.pa-kpi-detail .neg {
+  color: var(--pa-negative);
+}
+.pa-kpi-detail .warn {
+  color: var(--pa-warning);
+}
+/* ----- Section heading strip used outside card chrome -------------------
+   The 7 showcases each render a "stress-test" section that places tiles
+   directly inside .pa-col-* page-grid cells (no card wrapper). The strip
+   above those layouts hosts a label or LIVE indicator at the row's end. */
+.pa-kpi-sectionhead {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.6rem;
+  margin-bottom: 1.2rem;
+}
+/* ========================================
+   KPI · Terminal grid
+   Bloomberg-style dense panel: mono numbers, status pills, inline SVG
+   sparklines, ▲▼ deltas, segmented view-mode toggle (VALUE/Δ%/TREND).
+   Shared chrome (header, live, footer, detail popover, spark-dot) is in
+   _kpi-base.scss.
+   ======================================== */
+/* ----- View-mode toggle (segmented button group) ------------------------ */
+.pa-kpi-terminal__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+.pa-kpi-terminal__viewtoggle {
+  display: inline-flex;
+  border: 1px solid var(--pa-border-color);
+  border-radius: 0.4rem;
+  overflow: hidden;
+}
+.pa-kpi-terminal__viewbtn {
+  background: transparent;
+  border: 0;
+  color: var(--pa-text-color-2);
+  padding: 0.4rem 1.1rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: background-color 0.1s ease-out, color 0.1s ease-out;
+}
+.pa-kpi-terminal__viewbtn:hover {
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-terminal__viewbtn.is-active {
+  background: var(--pa-text-color-1);
+  color: var(--pa-card-bg);
+}
+/* ----- Grid + tile borders ----------------------------------------------
+   Hairline 1px borders between tiles, no gap. Last-row/last-column
+   borders suppressed via :nth-last-child / :nth-child selectors. */
+.pa-kpi-terminal__body {
+  padding: 0;
+}
+.pa-kpi-terminal__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.pa-kpi-terminal__grid .pa-kpi-tile {
+  border-bottom: 1px solid var(--pa-border-color);
+  border-right: 1px solid var(--pa-border-color);
+}
+.pa-kpi-terminal__grid--2col .pa-kpi-tile:nth-child(2n) {
+  border-right: 0;
+}
+.pa-kpi-terminal__grid--2col .pa-kpi-tile:nth-last-child(-n+2) {
+  border-bottom: 0;
+}
+/* ----- Tile (per-KPI panel) --------------------------------------------- */
+.pa-kpi-tile {
+  position: relative;
+  padding: 1.4rem 1.8rem 1.6rem;
+  min-height: 16rem;
+  display: flex;
+  flex-direction: column;
+  /* Standalone modifier: tile lives directly inside a .pa-col-* (no
+     neighbour cells in a parent grid) — gets a full border + card bg so
+     it doesn't look orphaned. */
+}
+.pa-kpi-tile--standalone {
+  background: var(--pa-card-bg);
+  border: 1px solid var(--pa-border-color);
+  margin-bottom: 1.2rem;
+}
+.pa-kpi-tile--standalone:last-child {
+  margin-bottom: 0;
+}
+/* ----- Tile head: ID · period + status pill ----------------------------- */
+.pa-kpi-tile__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.3rem;
+}
+.pa-kpi-tile__id {
+  color: var(--pa-text-tertiary);
+  font-weight: 600;
+}
+.pa-kpi-tile__status {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 0.3rem 0.9rem;
+  line-height: 1.3;
+}
+.pa-kpi-tile__status--warn {
+  background: var(--pa-warning-bg);
+  color: var(--pa-btn-warning-text);
+}
+.pa-kpi-tile__status {
+  /* GOOD is the "default" state — text-only, no chrome */
+}
+.pa-kpi-tile__status--good {
+  background: transparent;
+  color: var(--pa-text-color-1);
+  padding: 0.2rem 0;
+}
+.pa-kpi-tile__status--neutral {
+  background: color-mix(in srgb, var(--pa-text-color-2) 25%, transparent);
+  color: var(--pa-text-color-1);
+}
+/* ----- Label ------------------------------------------------------------ */
+.pa-kpi-tile__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pa-text-strong);
+  margin-bottom: 0.8rem;
+}
+/* ----- Big value with 3-mode swap --------------------------------------
+   Author renders three .pa-kpi-tile__value siblings (data-mode="value" /
+   "delta" / "trend"); the active mode is selected via the
+   .pa-kpi-terminal[data-view="X"] attribute. JS toggles that attribute
+   when the segmented control is clicked. */
+.pa-kpi-tile__values {
+  margin-bottom: 0.4rem;
+}
+.pa-kpi-tile__value {
+  display: none;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+}
+.pa-kpi-tile__value--very-positive .pa-kpi-tile__num {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile__value--positive .pa-kpi-tile__num {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile__value--neutral .pa-kpi-tile__num {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile__value--negative .pa-kpi-tile__num {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile__value--very-negative .pa-kpi-tile__num {
+  color: var(--pa-very-negative);
+}
+.pa-kpi-terminal[data-view=value] .pa-kpi-tile__value[data-mode=value],
+.pa-kpi-terminal[data-view=delta] .pa-kpi-tile__value[data-mode=delta],
+.pa-kpi-terminal[data-view=trend] .pa-kpi-tile__value[data-mode=trend] {
+  display: inline-flex;
+}
+.pa-kpi-tile__num {
+  font-size: 3.8rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-tile__unit {
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+}
+/* ----- Previous-value + delta row -------------------------------------- */
+.pa-kpi-tile__prev {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  margin-top: auto; /* push to bottom of flex column */
+  margin-bottom: 0.4rem;
+  color: var(--pa-text-tertiary);
+}
+.pa-kpi-tile__delta--very-positive {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile__delta--very-negative {
+  color: var(--pa-very-negative);
+}
+/* ----- Sparkline -------------------------------------------------------- */
+.pa-kpi-tile__spark {
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+  overflow: visible;
+}
+.pa-kpi-tile__spark polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+/* Sentiment-coloured sparkline. Class names use up/down wording but pick
+   colours from the sentiment-of-the-change axis, not line shape — so an
+   error-rate metric whose line is falling but the change is good uses
+   --up. See showcase docs for the rationale. Colour is set on both the
+   SVG and the JS-inserted .pa-kpi-spark-wrap so currentColor resolves
+   for the SVG content (line) and the HTML dot (inside the wrap). */
+.pa-kpi-tile--up-strong .pa-kpi-tile__spark, .pa-kpi-tile--up-strong .pa-kpi-spark-wrap {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile--up .pa-kpi-tile__spark, .pa-kpi-tile--up .pa-kpi-spark-wrap {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile--flat .pa-kpi-tile__spark, .pa-kpi-tile--flat .pa-kpi-spark-wrap {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile--down .pa-kpi-tile__spark, .pa-kpi-tile--down .pa-kpi-spark-wrap {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile--down-strong .pa-kpi-tile__spark, .pa-kpi-tile--down-strong .pa-kpi-spark-wrap {
+  color: var(--pa-very-negative);
+}
+/* ========================================
+   KPI · Sparkline list
+   Each KPI is one row: label · sparkline · value · Δ%. Built for vertical
+   scanning rather than per-tile depth — no view-mode toggle, no status
+   pills. Container queries collapse 4-col → 2-row → 3-row as the card
+   narrows.
+   ======================================== */
+/* Card is a query container so rows react to *card* width, not viewport. */
+.pa-kpi-spark-list {
+  container-type: inline-size;
+}
+.pa-kpi-spark-list__body {
+  padding: 0;
+}
+/* ----- Row: wide 4-column grid (label · chart · value · delta) ---------- */
+.pa-kpi-spark-row {
+  display: grid;
+  grid-template-columns: minmax(14rem, 28%) minmax(10rem, 1fr) minmax(8rem, 18%) minmax(7rem, 12%);
+  align-items: center;
+  gap: 1.6rem;
+  padding: 1.4rem 2rem;
+  border-bottom: 1px solid var(--pa-border-color);
+}
+.pa-kpi-spark-row:last-child {
+  border-bottom: 0;
+}
+/* Mid-narrow card (1×3 page-grid + 45% column): stack to 2 rows.
+   Label/value/delta on top, full-width chart below. Default order is
+   value-above-chart; use .pa-kpi-spark-list--chart-first to flip. */
+@container (max-width: 640px) {
+  .pa-kpi-spark-row {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "label value delta" "chart chart chart";
+    column-gap: 1.2rem;
+    row-gap: 0.4rem;
+    align-items: baseline;
+    padding: 1.2rem 1.6rem;
+  }
+  .pa-kpi-spark-row__label {
+    grid-area: label;
+    align-self: center;
+    font-size: 1.25rem;
+  }
+  .pa-kpi-spark-row__value {
+    grid-area: value;
+  }
+  .pa-kpi-spark-row__delta {
+    grid-area: delta;
+    font-size: 1.25rem;
+  }
+  .pa-kpi-spark-row__chart {
+    grid-area: chart;
+  }
+  .pa-kpi-spark-row__num {
+    font-size: 2rem;
+  }
+  /* --chart-first: rotates the canonical L→R order 90°. Label on top,
+     chart in the middle, value+delta side-by-side at the bottom. */
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "label  label" "chart  chart" "value  delta";
+    row-gap: 0.5rem;
+    column-gap: 1rem;
+    padding: 1.2rem 1.6rem;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__label {
+    align-self: start;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__value {
+    text-align: start;
+    align-self: baseline;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__delta {
+    align-self: baseline;
+  }
+}
+/* Very narrow card (~280–360px, 25% page-grid stress test): force the
+   chart-first 3-row layout regardless of modifier. */
+@container (max-width: 360px) {
+  .pa-kpi-spark-row {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "label  label" "chart  chart" "value  delta";
+    row-gap: 0.5rem;
+    column-gap: 1rem;
+    padding: 1.2rem 1.4rem;
+  }
+  .pa-kpi-spark-row__label {
+    grid-area: label;
+    align-self: start;
+  }
+  .pa-kpi-spark-row__chart {
+    grid-area: chart;
+  }
+  .pa-kpi-spark-row__value {
+    grid-area: value;
+    text-align: start;
+    align-self: baseline;
+  }
+  .pa-kpi-spark-row__delta {
+    grid-area: delta;
+    align-self: baseline;
+  }
+}
+/* ----- Cell typography -------------------------------------------------- */
+.pa-kpi-spark-row__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+/* Sparkline cell — line + filled area + trailing dot (the dot is rendered
+   as a CSS span by the JS init pass; see kpi-showcases.js). */
+.pa-kpi-spark-row__chart {
+  position: relative; /* anchor for .pa-kpi-spark-dot */
+}
+.pa-kpi-spark-row__chart svg {
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+  overflow: visible;
+}
+.pa-kpi-spark-row__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-spark-row__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.18; /* same hue as line, soft area shading */
+  stroke: none;
+}
+/* Sentiment-coloured sparkline. Color is set on the chart wrapper so
+   currentColor resolves for both the SVG content (line/area) and the
+   dot inside the wrapper. */
+.pa-kpi-spark-row--up-strong .pa-kpi-spark-row__chart {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-spark-row--up .pa-kpi-spark-row__chart {
+  color: var(--pa-positive);
+}
+.pa-kpi-spark-row--flat .pa-kpi-spark-row__chart {
+  color: var(--pa-neutral);
+}
+.pa-kpi-spark-row--down .pa-kpi-spark-row__chart {
+  color: var(--pa-negative);
+}
+.pa-kpi-spark-row--down-strong .pa-kpi-spark-row__chart {
+  color: var(--pa-very-negative);
+}
+/* ----- Value (focal white number + muted unit) ------------------------- */
+.pa-kpi-spark-row__value {
+  font-family: var(--base-font-family-mono);
+  text-align: end;
+  line-height: 1;
+}
+.pa-kpi-spark-row__num {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-spark-row__unit {
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin-left: 0.2rem;
+}
+/* ----- Delta (sentiment-coloured) -------------------------------------- */
+.pa-kpi-spark-row__delta {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-spark-row__delta--very-positive {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-spark-row__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-spark-row__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-spark-row__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-spark-row__delta--very-negative {
+  color: var(--pa-very-negative);
+}
+/* ========================================
+   KPI · Comparison gauges
+   Goal-oriented progress bars. Each KPI shows label · value, a bar with a
+   target tick, and a 0 · tgt scale below. Bar fill = value/target * 100%,
+   capped visually so overshoots are signalled by colour, not overflow.
+   ======================================== */
+.pa-kpi-gauge-list {
+  container-type: inline-size;
+}
+.pa-kpi-gauge-list__body {
+  padding: 0;
+}
+/* 2-column internal grid by default; collapses to 1-col when card narrows. */
+.pa-kpi-gauge-list__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+@container (max-width: 600px) {
+  .pa-kpi-gauge-list__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* ----- Gauge tile (label/value head · bar · 0/tgt scale) ---------------- */
+.pa-kpi-gauge {
+  position: relative;
+  padding: 1.6rem 2rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  border-right: 1px solid var(--pa-border-color);
+  /* Per-tile bar colour cascade — modifiers below set the var, the fill
+     reads it. Cleaner than per-modifier-per-element rules; host apps can
+     override at the tile level via inline style="--pa-kpi-bar-color: …". */
+  --pa-kpi-bar-color: var(--pa-positive);
+}
+.pa-kpi-gauge:nth-child(2n) {
+  border-right: 0;
+}
+.pa-kpi-gauge:nth-last-child(-n+2) {
+  border-bottom: 0;
+}
+.pa-kpi-gauge--positive {
+  --pa-kpi-bar-color: var(--pa-positive);
+}
+.pa-kpi-gauge--warning {
+  --pa-kpi-bar-color: var(--pa-warning);
+}
+.pa-kpi-gauge--negative {
+  --pa-kpi-bar-color: var(--pa-negative);
+}
+.pa-kpi-gauge--neutral {
+  --pa-kpi-bar-color: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
+}
+@container (max-width: 600px) {
+  .pa-kpi-gauge {
+    border-right: 0;
+  }
+  .pa-kpi-gauge:nth-last-child(-n+2) {
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-kpi-gauge:last-child {
+    border-bottom: 0;
+  }
+}
+/* ----- Head: label left, value right (baseline-aligned) ----------------- */
+.pa-kpi-gauge__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1.2rem;
+  margin-bottom: 0.8rem;
+}
+.pa-kpi-gauge__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+.pa-kpi-gauge__value {
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+}
+.pa-kpi-gauge__num {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-gauge__unit {
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin-left: 0.2rem;
+}
+/* ----- Bar (track + sentiment-coloured fill + target tick) -------------- */
+.pa-kpi-gauge__bar {
+  /* Author-controlled tick position (default 100% — the target sits at the
+     right edge of the bar's "0 → target" scale). Override per-tile via
+     style="--pa-kpi-gauge-tick-pos: 80%" if the bar represents a wider
+     scale where the target sits inside the bar. */
+  --pa-kpi-gauge-tick-pos: 100%;
+  --pa-kpi-gauge-tick-color: var(--pa-text-color-1);
+  position: relative;
+  height: 0.7rem;
+  background: var(--pa-surface-track);
+  margin-bottom: 0.5rem;
+  overflow: visible; /* tick can sit just outside the track */
+  /* Target tick — small bar slightly taller than the track. Centred on
+     --pa-kpi-gauge-tick-pos via the negative margin-left (matches half
+     the tick width). Full opacity so it stays readable on dark themes
+     against bright orange/green fills. */
+}
+.pa-kpi-gauge__bar::after {
+  content: "";
+  position: absolute;
+  left: var(--pa-kpi-gauge-tick-pos);
+  margin-left: -0.15rem;
+  top: -0.2rem;
+  bottom: -0.2rem;
+  width: 0.3rem;
+  background: var(--pa-kpi-gauge-tick-color);
+}
+.pa-kpi-gauge__fill {
+  height: 100%;
+  background: var(--pa-kpi-bar-color);
+  /* Width set inline per tile via style="width: X%". */
+  transition: width 0.3s ease;
+}
+/* ----- Scale row (0 left · tgt XYZ right) ------------------------------- */
+.pa-kpi-gauge__scale {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-tertiary);
+}
+/* ========================================
+   KPI · Hero + supporting
+   Marketing/exec dashboard pattern: one headline metric on the left (huge
+   container-query-relative value, inline meta row, big filled-area
+   sparkline), and a vertical rail of compact supporting tiles on the
+   right. Container query collapses to single column on narrow cards.
+   ======================================== */
+.pa-kpi-hero-list {
+  container-type: inline-size;
+}
+.pa-kpi-hero-list__body {
+  padding: 1.6rem;
+}
+/* ----- Layout: hero left, rail right ------------------------------------ */
+.pa-kpi-hero-list__layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.4rem;
+}
+@container (max-width: 700px) {
+  .pa-kpi-hero-list__layout {
+    grid-template-columns: 1fr;
+  }
+}
+.pa-kpi-hero-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+/* ----- HERO panel (label · big value · meta row · sparkline) ------------ */
+.pa-kpi-hero-main {
+  position: relative;
+  padding: 1.8rem 2rem;
+  border: 1px solid var(--pa-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  /* Sentiment cascade — chart and delta inherit via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-main--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-main--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-hero-main--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-hero-main--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+.pa-kpi-hero-main__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+.pa-kpi-hero-main__value {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  margin: 0.4rem 0 0.6rem;
+}
+.pa-kpi-hero-main__num {
+  /* Container-query-relative: scales with the hero panel's width.
+     Floor keeps it readable in narrow page-grid cards. */
+  font-size: clamp(4rem, 17cqi, 7rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-hero-main__unit {
+  font-size: clamp(1.8rem, 8cqi, 3rem);
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.1rem;
+}
+/* Meta row: inline delta + period text + target on one baseline. */
+.pa-kpi-hero-main__meta {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.4rem 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+}
+.pa-kpi-hero-main__delta {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  color: var(--pa-kpi-accent);
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+.pa-kpi-hero-main__period {
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.3;
+}
+.pa-kpi-hero-main__target {
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  text-align: end;
+}
+/* Hero sparkline — chart container fills extra vertical space (when the
+   rail forces a tall row); SVG inside stays at fixed pixel height so the
+   line shape is never distorted along Y. The SVG uses
+   preserveAspectRatio="none", so any element that should keep its shape
+   needs to live outside that scaling or have fixed pixel dimensions. */
+.pa-kpi-hero-main__chart {
+  flex: 1 1 10rem;
+  min-height: 10rem;
+  margin-top: 0.6rem;
+  color: var(--pa-kpi-accent);
+  display: flex;
+  align-items: flex-end; /* SVG wrap pinned to bottom */
+}
+.pa-kpi-hero-main__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-hero-main__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.18;
+  stroke: none;
+}
+.pa-kpi-hero-main__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+}
+.pa-kpi-hero-main__chart-svg svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+/* ----- SIDE rail tile (2×2 grid, value spans both rows on right) -------- */
+.pa-kpi-hero-side {
+  position: relative;
+  padding: 1.2rem 1.4rem;
+  border: 1px solid var(--pa-border-color);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "label  value" "delta  value";
+  column-gap: 1.2rem;
+  row-gap: 0.4rem;
+  align-items: center;
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-side--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-side--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-hero-side--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-hero-side--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+.pa-kpi-hero-side__label {
+  grid-area: label;
+  align-self: end; /* tucks against the vertically-centred value */
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.25;
+}
+.pa-kpi-hero-side__value {
+  grid-area: value;
+  align-self: center;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: baseline;
+}
+.pa-kpi-hero-side__num {
+  font-size: 2.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-hero-side__unit {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.35rem;
+}
+.pa-kpi-hero-side__delta {
+  grid-area: delta;
+  align-self: start;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--pa-kpi-accent);
+}
+/* ========================================
+   KPI · Bento layout
+   Magazine-style asymmetric tile sizing with sparklines as soft background
+   fills behind the values. 6 tiles arranged on a 6-col × 3-row grid
+   (hero left-half × 2 rows, two stacked right-half × 2 rows, three equal
+   tiles bottom row). Tile placement by source order via :nth-child.
+   ======================================== */
+.pa-kpi-bento {
+  container-type: inline-size;
+}
+.pa-kpi-bento__body {
+  padding: 1.6rem;
+}
+/* ----- Bento grid ------------------------------------------------------- */
+.pa-kpi-bento__grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 12rem 12rem 12rem;
+  grid-template-areas: "hero hero hero a    a    a" "hero hero hero b    b    b" "c    c    d    d    e    e";
+  gap: 1rem;
+}
+.pa-kpi-bento__grid > :nth-child(1) {
+  grid-area: hero;
+}
+.pa-kpi-bento__grid > :nth-child(2) {
+  grid-area: a;
+}
+.pa-kpi-bento__grid > :nth-child(3) {
+  grid-area: b;
+}
+.pa-kpi-bento__grid > :nth-child(4) {
+  grid-area: c;
+}
+.pa-kpi-bento__grid > :nth-child(5) {
+  grid-area: d;
+}
+.pa-kpi-bento__grid > :nth-child(6) {
+  grid-area: e;
+}
+/* Narrow card → stack everything single column. Hero modifier still
+   bumps the value font-size so it reads as the headline. */
+@container (max-width: 700px) {
+  .pa-kpi-bento__grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: none;
+    gap: 0.8rem;
+  }
+  .pa-kpi-bento__grid > :nth-child(n) {
+    grid-area: auto;
+  }
+  .pa-kpi-bento-tile {
+    min-height: 10rem;
+  }
+  .pa-kpi-bento-tile--hero {
+    min-height: 14rem;
+  }
+}
+/* ----- Tile (per-KPI bento cell) ---------------------------------------- */
+.pa-kpi-bento-tile {
+  /* Per-tile inline-size container so the value font-size scales with
+     *this* tile's width via cqi (not the outer card's width). The hero
+     and the smaller bottom tiles each scale to their own column. */
+  container-type: inline-size;
+  position: relative;
+  overflow: hidden;
+  padding: 1.3rem 1.5rem;
+  border: 1px solid var(--pa-border-color);
+  background: var(--pa-card-bg);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "label delta" ".     .    " "value value";
+  gap: 0.4rem 1rem;
+  /* Sparkline + delta sentiment cascade via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-bento-tile--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-bento-tile--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-bento-tile--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-bento-tile--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+.pa-kpi-bento-tile--down-strong {
+  --pa-kpi-accent: var(--pa-very-negative);
+}
+.pa-kpi-bento-tile--hero {
+  padding: 1.6rem 1.8rem;
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__num {
+  font-size: clamp(3.6rem, 22cqi, 7rem);
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__unit {
+  font-size: clamp(1.6rem, 9cqi, 2.6rem);
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__label,
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__delta {
+  font-size: 1.4rem;
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__chart {
+  height: 70%;
+}
+/* ----- Top row: label + delta, both layered over the chart -------------- */
+.pa-kpi-bento-tile__label {
+  grid-area: label;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  z-index: 1;
+  line-height: 1.2;
+}
+.pa-kpi-bento-tile__delta {
+  grid-area: delta;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--pa-kpi-accent);
+  z-index: 1;
+  align-self: start;
+  line-height: 1.2;
+}
+/* ----- Value (bottom of grid, layered over chart) ----------------------- */
+.pa-kpi-bento-tile__value {
+  grid-area: value;
+  align-self: end;
+  position: relative;
+  z-index: 1;
+  font-family: var(--base-font-family-mono);
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+  white-space: nowrap;
+}
+.pa-kpi-bento-tile__num {
+  font-size: clamp(2rem, 14cqi, 3.2rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-bento-tile__unit {
+  font-size: clamp(1.2rem, 7cqi, 1.6rem);
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  margin: 0 0.3rem;
+}
+/* ----- Sparkline background ---------------------------------------------
+   Absolutely positioned, fills the bottom 65% of the tile. The value sits
+   over it (z-index: 1 above). The line/area read through behind the
+   digits at lower opacity so the value remains the focal point. SVG is
+   nested in a fixed-height wrapper so taller tiles don't distort the line
+   shape (preserveAspectRatio="none" would otherwise stretch the Y axis). */
+.pa-kpi-bento-tile__chart {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 65%;
+  pointer-events: none;
+  color: var(--pa-kpi-accent);
+  z-index: 0;
+  display: flex;
+  align-items: flex-end;
+}
+.pa-kpi-bento-tile__chart svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.pa-kpi-bento-tile__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-opacity: 0.55;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-bento-tile__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.1;
+  stroke: none;
+}
+.pa-kpi-bento-tile__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+}
+/* ========================================
+   KPI · Numeric strip (densest)
+   Tabular "spreadsheet-style" table card with metric/now/prev/Δ%/vs target
+   columns — most data per pixel, no chart chrome. Each row is its own
+   grid sharing the same column template so cells align across rows
+   without needing subgrid. Wide-only by design — no responsive collapse;
+   narrow placements should use Comparison gauges instead.
+   ======================================== */
+.pa-kpi-strip__body {
+  padding: 0;
+}
+/* ----- Table layout ----------------------------------------------------- */
+.pa-kpi-strip__row,
+.pa-kpi-strip__head-row {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); /* target (bar + pct stacked) */
+  column-gap: 1.6rem;
+  align-items: center;
+  position: relative;
+  padding: 1.1rem 1.6rem;
+}
+/* Divider between data rows / between head and first row only. */
+.pa-kpi-strip__row + .pa-kpi-strip__row,
+.pa-kpi-strip__head-row + .pa-kpi-strip__row {
+  border-top: 1px solid var(--pa-border-color);
+}
+/* Hover host: subtle row highlight so the cursor-anchored popover has a
+   clear "this row" anchor. */
+.pa-kpi-strip__row:hover {
+  background: var(--pa-surface-hover);
+}
+/* ----- Header cells (uppercase mono captions) --------------------------- */
+.pa-kpi-strip__head {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pa-text-tertiary);
+}
+.pa-kpi-strip__head--num {
+  text-align: end;
+}
+/* ----- Metric label ----------------------------------------------------- */
+.pa-kpi-strip__metric {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 78%, transparent);
+  line-height: 1.2;
+}
+/* ----- NOW (focal value) ------------------------------------------------ */
+.pa-kpi-strip__now {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.8rem;
+  font-weight: 700;
+  text-align: end;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  color: var(--pa-text-color-1);
+  white-space: nowrap;
+  line-height: 1;
+}
+.pa-kpi-strip__now .pa-kpi-strip__num {
+  font-weight: 700;
+}
+.pa-kpi-strip__now .pa-kpi-strip__unit {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  margin: 0 0.2rem;
+}
+/* ----- PREV (reference data, low contrast) ------------------------------ */
+.pa-kpi-strip__prev {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-tertiary);
+  text-align: end;
+  white-space: nowrap;
+}
+/* ----- Δ% (sentiment-coloured) ------------------------------------------ */
+.pa-kpi-strip__delta {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-align: end;
+  white-space: nowrap;
+  color: var(--pa-positive);
+}
+.pa-kpi-strip__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-strip__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-strip__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-strip__delta--up-strong {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-strip__delta--down-strong {
+  color: var(--pa-very-negative);
+}
+/* ----- VS TARGET (bar + pct stacked, capped at 100% visual) -------------
+   Theme-neutral grey fill — the pct value itself signals overshoot /
+   undershoot ("97" vs "108" vs "54") so colour reinforcement isn't
+   needed. The bar visually caps at 100% via overflow: hidden so an
+   over-target metric reads as "fully filled" rather than overflowing. */
+.pa-kpi-strip__target {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.pa-kpi-strip__bar {
+  position: relative;
+  height: 0.5rem;
+  background: var(--pa-surface-track);
+  overflow: hidden;
+  border-radius: 0.1rem;
+}
+.pa-kpi-strip__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--pa-text-color-1) 40%, transparent);
+}
+.pa-kpi-strip__bar-pct {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--pa-text-secondary);
+  align-self: flex-end;
+  line-height: 1;
+}
+/* ----- --no-prev: 4-col layout (metric / now / Δ% / target) -------------
+   Useful for narrow placements; markup omits the prev cells. */
+.pa-kpi-strip--no-prev .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr);
+}
+/* ========================================
+   KPI · Editorial minimal
+   Six KPIs in a 2×3 / 3×2 grid with hairline rules between cells,
+   generous space, and an extra-light-weight number as the focal point per
+   tile. No charts, no pills — the design's whole identity is the thin
+   numeral. Renders as a table card (zero card-body padding) so hairlines
+   go edge-to-edge.
+   ======================================== */
+.pa-kpi-edit__body {
+  padding: 0;
+}
+/* ----- Grid + hairline rules -------------------------------------------
+   `gap: 1px` over `background: var(--pa-border-color)` with each tile
+   painting `background: var(--pa-card-bg)` on top. Only the gap shows
+   through, giving perfect single-pixel hairlines on every interior
+   boundary (vertical and horizontal) for free, regardless of column
+   count. The card's outer border supplies the perimeter. */
+.pa-kpi-edit__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--pa-border-color);
+  container-type: inline-size;
+}
+@container (max-width: 640px) {
+  .pa-kpi-edit__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@container (max-width: 360px) {
+  .pa-kpi-edit__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* Modifier: force 2-col regardless of card width. For placements wanting
+   a deterministic 2×N layout (e.g. 4 tiles as clean 2×2) instead of
+   relying on the container query to land in the right bucket. */
+.pa-kpi-edit__grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+/* ----- Tile (editorial spacing leans on the 2.4rem padding) ------------- */
+.pa-kpi-edit__tile {
+  background: var(--pa-card-bg);
+  padding: 2.4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  position: relative;
+  min-width: 0;
+  /* Hover host: faint wash so the cursor-anchored popover has a clear
+     "this tile" anchor. */
+}
+.pa-kpi-edit__tile:hover {
+  background: color-mix(in srgb, var(--pa-text-color-1) 4%, var(--pa-card-bg));
+}
+/* ----- Label (uppercase mono caption) ----------------------------------- */
+.pa-kpi-edit__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  line-height: 1.3;
+}
+/* ----- Value (the editorial signature) ---------------------------------
+   - NOT mono — mono fonts rarely have a true 200 weight; using the body
+     sans gives proper thin glyphs that read as "editorial" rather than
+     "monospace at low contrast".
+   - font-weight: 200 (extra-light). 300 was tested first but didn't read
+     distinctly enough as "light" against the body's 400 default.
+   - clamp() lets the number shrink in narrow 25% page-grid cells without
+     manual breakpoints. */
+.pa-kpi-edit__value {
+  font-family: var(--base-font-family);
+  font-size: clamp(3.2rem, 18cqi, 5.6rem);
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--pa-text-color-1);
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+  flex-wrap: wrap;
+}
+.pa-kpi-edit__num {
+  font-weight: 200;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-edit__unit {
+  font-size: 0.4em;
+  font-weight: 300;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  letter-spacing: 0;
+}
+/* ----- Meta row (delta + tgt) ------------------------------------------ */
+.pa-kpi-edit__meta {
+  display: flex;
+  align-items: baseline;
+  gap: 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  line-height: 1.3;
+  flex-wrap: wrap;
+}
+.pa-kpi-edit__delta {
+  font-weight: 700;
+  white-space: nowrap;
+  color: var(--pa-positive);
+}
+.pa-kpi-edit__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-edit__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-edit__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-edit__delta--up-strong {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-edit__delta--down-strong {
+  color: var(--pa-very-negative);
+}
+.pa-kpi-edit__target {
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  white-space: nowrap;
+}
+.pa-kpi-edit__target em {
+  font-style: normal;
+  color: color-mix(in srgb, var(--pa-text-color-1) 38%, transparent);
+  margin-right: 0.5rem;
+}
 /* ========================================
    Utility Components
    Font utilities, compact mode, component showcase