/* ============================================================================
 * VoiceInsights Africa — Knowledge Ecosystem showcase
 * ----------------------------------------------------------------------------
 * Builds ONLY on tokens already defined in style.css (--bg, --surface, --text,
 * --accent, --accent-2, --border, --font-display, --radius ...). No new colour
 * system, no competing token set, no hard-coded hex outside the two additive
 * tokens below (both derived from existing accents).
 *
 * Works in both themes: style.css defines html[data-theme="light"] and
 * html[data-theme="dark"] variable sets; everything here consumes those.
 * ========================================================================== */

:root {
  --ke-grid-line: color-mix(in srgb, var(--border-strong) 55%, transparent);
  --ke-flow: color-mix(in srgb, var(--accent-2) 70%, transparent);
}

/* ---------- Category design tokens (Knowledge Ecosystem Public Showcase) ----
 * One stable semantic color identity per product-type category. Every value
 * below was computed against style.css's real --surface/--bg for both themes
 * using the WCAG 2.x relative-luminance formula (not estimated) — the
 * "-accent-text" pair clears >=4.5:1 (text use), the "-accent" pair clears
 * >=3:1 (non-text/icon/border use, WCAG 1.4.11). Recomputable with the same
 * formula used by backend/tests/rc34-accessibility.test.js.
 * Color is never the only identity signal — every category also carries a
 * distinct icon and label (see knowledge-ecosystem-page.js CATEGORY_ICON). --*/
:root {
  /* Executive Intelligence — Navy / Royal Blue */
  --cat-executive-intelligence-accent: #2A56D6;
  --cat-executive-intelligence-accent-soft: rgba(27, 58, 138, 0.10);
  --cat-executive-intelligence-accent-border: rgba(42, 86, 214, 0.32);
  --cat-executive-intelligence-accent-text: #1B3A8A;
  --cat-executive-intelligence-accent-gradient: linear-gradient(135deg, #2A56D6, #1B3A8A);
  /* Publications — Purple */
  --cat-publications-accent: #8B4FD1;
  --cat-publications-accent-soft: rgba(107, 63, 160, 0.10);
  --cat-publications-accent-border: rgba(139, 79, 209, 0.32);
  --cat-publications-accent-text: #6B3FA0;
  --cat-publications-accent-gradient: linear-gradient(135deg, #8B4FD1, #6B3FA0);
  /* Dashboards — Cyan */
  --cat-dashboards-accent: #12A3B0;
  --cat-dashboards-accent-soft: rgba(14, 124, 134, 0.10);
  --cat-dashboards-accent-border: rgba(18, 163, 176, 0.32);
  /* 4.27:1 on the category card surface (#F1EEE6) — the only one of the twelve
     category ink colours below AA. Darkened one step within the same cyan:
     5.59:1 measured. The other eleven were re-measured and left unchanged. */
  --cat-dashboards-accent-text: #0B6873;
  --cat-dashboards-accent-gradient: linear-gradient(135deg, #12A3B0, #0E7C86);
  /* Datasets — Emerald */
  --cat-datasets-accent: #159056;
  --cat-datasets-accent-soft: rgba(30, 122, 76, 0.10);
  --cat-datasets-accent-border: rgba(21, 144, 86, 0.32);
  --cat-datasets-accent-text: #1E7A4C;
  --cat-datasets-accent-gradient: linear-gradient(135deg, #159056, #1E7A4C);
  /* Surveys & Questionnaires — Blue */
  --cat-surveys-accent: #2F7BE0;
  --cat-surveys-accent-soft: rgba(29, 95, 194, 0.10);
  --cat-surveys-accent-border: rgba(47, 123, 224, 0.32);
  --cat-surveys-accent-text: #1D5FC2;
  --cat-surveys-accent-gradient: linear-gradient(135deg, #2F7BE0, #1D5FC2);
  /* Assessments — Amber */
  --cat-assessments-accent: #B8860B;
  --cat-assessments-accent-soft: rgba(138, 90, 0, 0.10);
  --cat-assessments-accent-border: rgba(184, 134, 11, 0.32);
  --cat-assessments-accent-text: #8A5A00;
  --cat-assessments-accent-gradient: linear-gradient(135deg, #B8860B, #8A5A00);
  /* Evaluations — Orange */
  --cat-evaluations-accent: #E0621A;
  --cat-evaluations-accent-soft: rgba(181, 69, 10, 0.10);
  --cat-evaluations-accent-border: rgba(224, 98, 26, 0.32);
  --cat-evaluations-accent-text: #B5450A;
  --cat-evaluations-accent-gradient: linear-gradient(135deg, #E0621A, #B5450A);
  /* AI Intelligence — Violet */
  --cat-ai-intelligence-accent: #7C4FE0;
  --cat-ai-intelligence-accent-soft: rgba(91, 63, 196, 0.10);
  --cat-ai-intelligence-accent-border: rgba(124, 79, 224, 0.32);
  --cat-ai-intelligence-accent-text: #5B3FC4;
  --cat-ai-intelligence-accent-gradient: linear-gradient(135deg, #7C4FE0, #5B3FC4);
  /* Maps & GIS — Teal */
  --cat-maps-gis-accent: #128A94;
  --cat-maps-gis-accent-soft: rgba(10, 100, 114, 0.10);
  --cat-maps-gis-accent-border: rgba(18, 138, 148, 0.32);
  --cat-maps-gis-accent-text: #0A6472;
  --cat-maps-gis-accent-gradient: linear-gradient(135deg, #128A94, #0A6472);
  /* Data Visualizations — Magenta */
  --cat-data-visualizations-accent: #D1298F;
  --cat-data-visualizations-accent-soft: rgba(166, 30, 112, 0.10);
  --cat-data-visualizations-accent-border: rgba(209, 41, 143, 0.32);
  --cat-data-visualizations-accent-text: #A61E70;
  --cat-data-visualizations-accent-gradient: linear-gradient(135deg, #D1298F, #A61E70);
  /* Indicators & KPIs — Gold */
  --cat-indicators-kpis-accent: #A68A00;
  --cat-indicators-kpis-accent-soft: rgba(122, 99, 0, 0.10);
  --cat-indicators-kpis-accent-border: rgba(166, 138, 0, 0.32);
  --cat-indicators-kpis-accent-text: #7A6300;
  --cat-indicators-kpis-accent-gradient: linear-gradient(135deg, #A68A00, #7A6300);
  /* Knowledge Assets — Indigo */
  --cat-knowledge-assets-accent: #4B4FC4;
  --cat-knowledge-assets-accent-soft: rgba(59, 63, 158, 0.10);
  --cat-knowledge-assets-accent-border: rgba(75, 79, 196, 0.32);
  --cat-knowledge-assets-accent-text: #3B3F9E;
  --cat-knowledge-assets-accent-gradient: linear-gradient(135deg, #4B4FC4, #3B3F9E);
}
html[data-theme="dark"] {
  --cat-executive-intelligence-accent: #6B93E8;
  --cat-executive-intelligence-accent-soft: rgba(143, 180, 255, 0.13);
  --cat-executive-intelligence-accent-border: rgba(107, 147, 232, 0.38);
  --cat-executive-intelligence-accent-text: #8FB4FF;
  --cat-executive-intelligence-accent-gradient: linear-gradient(135deg, #6B93E8, #8FB4FF);
  --cat-publications-accent: #B58AE8;
  --cat-publications-accent-soft: rgba(201, 163, 242, 0.13);
  --cat-publications-accent-border: rgba(181, 138, 232, 0.38);
  --cat-publications-accent-text: #C9A3F2;
  --cat-publications-accent-gradient: linear-gradient(135deg, #B58AE8, #C9A3F2);
  --cat-dashboards-accent: #3FC4CE;
  --cat-dashboards-accent-soft: rgba(95, 224, 232, 0.13);
  --cat-dashboards-accent-border: rgba(63, 196, 206, 0.38);
  --cat-dashboards-accent-text: #5FE0E8;
  --cat-dashboards-accent-gradient: linear-gradient(135deg, #3FC4CE, #5FE0E8);
  --cat-datasets-accent: #3ECF8E;
  --cat-datasets-accent-soft: rgba(94, 232, 160, 0.13);
  --cat-datasets-accent-border: rgba(62, 207, 142, 0.38);
  --cat-datasets-accent-text: #5EE8A0;
  --cat-datasets-accent-gradient: linear-gradient(135deg, #3ECF8E, #5EE8A0);
  --cat-surveys-accent: #5C9BF0;
  --cat-surveys-accent-soft: rgba(127, 180, 255, 0.13);
  --cat-surveys-accent-border: rgba(92, 155, 240, 0.38);
  --cat-surveys-accent-text: #7FB4FF;
  --cat-surveys-accent-gradient: linear-gradient(135deg, #5C9BF0, #7FB4FF);
  --cat-assessments-accent: #D9A63E;
  --cat-assessments-accent-soft: rgba(240, 193, 104, 0.13);
  --cat-assessments-accent-border: rgba(217, 166, 62, 0.38);
  --cat-assessments-accent-text: #F0C168;
  --cat-assessments-accent-gradient: linear-gradient(135deg, #D9A63E, #F0C168);
  --cat-evaluations-accent: #F08650;
  --cat-evaluations-accent-soft: rgba(255, 162, 104, 0.13);
  --cat-evaluations-accent-border: rgba(240, 134, 80, 0.38);
  --cat-evaluations-accent-text: #FFA268;
  --cat-evaluations-accent-gradient: linear-gradient(135deg, #F08650, #FFA268);
  --cat-ai-intelligence-accent: #9E82F0;
  --cat-ai-intelligence-accent-soft: rgba(187, 166, 255, 0.13);
  --cat-ai-intelligence-accent-border: rgba(158, 130, 240, 0.38);
  --cat-ai-intelligence-accent-text: #BBA6FF;
  --cat-ai-intelligence-accent-gradient: linear-gradient(135deg, #9E82F0, #BBA6FF);
  --cat-maps-gis-accent: #3FB5BE;
  --cat-maps-gis-accent-soft: rgba(95, 212, 212, 0.13);
  --cat-maps-gis-accent-border: rgba(63, 181, 190, 0.38);
  --cat-maps-gis-accent-text: #5FD4D4;
  --cat-maps-gis-accent-gradient: linear-gradient(135deg, #3FB5BE, #5FD4D4);
  --cat-data-visualizations-accent: #E86BB8;
  --cat-data-visualizations-accent-soft: rgba(255, 138, 209, 0.13);
  --cat-data-visualizations-accent-border: rgba(232, 107, 184, 0.38);
  --cat-data-visualizations-accent-text: #FF8AD1;
  --cat-data-visualizations-accent-gradient: linear-gradient(135deg, #E86BB8, #FF8AD1);
  --cat-indicators-kpis-accent: #D9BC3E;
  --cat-indicators-kpis-accent-soft: rgba(240, 210, 104, 0.13);
  --cat-indicators-kpis-accent-border: rgba(217, 188, 62, 0.38);
  --cat-indicators-kpis-accent-text: #F0D268;
  --cat-indicators-kpis-accent-gradient: linear-gradient(135deg, #D9BC3E, #F0D268);
  --cat-knowledge-assets-accent: #8286E8;
  --cat-knowledge-assets-accent-soft: rgba(156, 160, 255, 0.13);
  --cat-knowledge-assets-accent-border: rgba(130, 134, 232, 0.38);
  --cat-knowledge-assets-accent-text: #9CA0FF;
  --cat-knowledge-assets-accent-gradient: linear-gradient(135deg, #8286E8, #9CA0FF);
}

/* Generic consumption names — one set of card/component rules reads these
   4 names; the [data-category] scope on each card re-points them to the
   right named category tokens above. Never hardcode a category hex directly
   in a card rule below this point. */
[data-category] {
  --category-accent: var(--accent-2);
  --category-accent-soft: var(--accent-2-ink);
  --category-accent-border: var(--border-strong);
  --category-accent-text: var(--accent-2);
  --category-accent-gradient: linear-gradient(135deg, var(--accent-2), var(--accent));
}
[data-category="executive-intelligence"] { --category-accent: var(--cat-executive-intelligence-accent); --category-accent-soft: var(--cat-executive-intelligence-accent-soft); --category-accent-border: var(--cat-executive-intelligence-accent-border); --category-accent-text: var(--cat-executive-intelligence-accent-text); --category-accent-gradient: var(--cat-executive-intelligence-accent-gradient); }
[data-category="publications"] { --category-accent: var(--cat-publications-accent); --category-accent-soft: var(--cat-publications-accent-soft); --category-accent-border: var(--cat-publications-accent-border); --category-accent-text: var(--cat-publications-accent-text); --category-accent-gradient: var(--cat-publications-accent-gradient); }
[data-category="dashboards"] { --category-accent: var(--cat-dashboards-accent); --category-accent-soft: var(--cat-dashboards-accent-soft); --category-accent-border: var(--cat-dashboards-accent-border); --category-accent-text: var(--cat-dashboards-accent-text); --category-accent-gradient: var(--cat-dashboards-accent-gradient); }
[data-category="datasets"] { --category-accent: var(--cat-datasets-accent); --category-accent-soft: var(--cat-datasets-accent-soft); --category-accent-border: var(--cat-datasets-accent-border); --category-accent-text: var(--cat-datasets-accent-text); --category-accent-gradient: var(--cat-datasets-accent-gradient); }
[data-category="surveys"] { --category-accent: var(--cat-surveys-accent); --category-accent-soft: var(--cat-surveys-accent-soft); --category-accent-border: var(--cat-surveys-accent-border); --category-accent-text: var(--cat-surveys-accent-text); --category-accent-gradient: var(--cat-surveys-accent-gradient); }
[data-category="assessments"] { --category-accent: var(--cat-assessments-accent); --category-accent-soft: var(--cat-assessments-accent-soft); --category-accent-border: var(--cat-assessments-accent-border); --category-accent-text: var(--cat-assessments-accent-text); --category-accent-gradient: var(--cat-assessments-accent-gradient); }
[data-category="evaluations"] { --category-accent: var(--cat-evaluations-accent); --category-accent-soft: var(--cat-evaluations-accent-soft); --category-accent-border: var(--cat-evaluations-accent-border); --category-accent-text: var(--cat-evaluations-accent-text); --category-accent-gradient: var(--cat-evaluations-accent-gradient); }
[data-category="ai-intelligence"] { --category-accent: var(--cat-ai-intelligence-accent); --category-accent-soft: var(--cat-ai-intelligence-accent-soft); --category-accent-border: var(--cat-ai-intelligence-accent-border); --category-accent-text: var(--cat-ai-intelligence-accent-text); --category-accent-gradient: var(--cat-ai-intelligence-accent-gradient); }
[data-category="maps-gis"] { --category-accent: var(--cat-maps-gis-accent); --category-accent-soft: var(--cat-maps-gis-accent-soft); --category-accent-border: var(--cat-maps-gis-accent-border); --category-accent-text: var(--cat-maps-gis-accent-text); --category-accent-gradient: var(--cat-maps-gis-accent-gradient); }
[data-category="data-visualizations"] { --category-accent: var(--cat-data-visualizations-accent); --category-accent-soft: var(--cat-data-visualizations-accent-soft); --category-accent-border: var(--cat-data-visualizations-accent-border); --category-accent-text: var(--cat-data-visualizations-accent-text); --category-accent-gradient: var(--cat-data-visualizations-accent-gradient); }
[data-category="indicators-kpis"] { --category-accent: var(--cat-indicators-kpis-accent); --category-accent-soft: var(--cat-indicators-kpis-accent-soft); --category-accent-border: var(--cat-indicators-kpis-accent-border); --category-accent-text: var(--cat-indicators-kpis-accent-text); --category-accent-gradient: var(--cat-indicators-kpis-accent-gradient); }
[data-category="knowledge-assets"] { --category-accent: var(--cat-knowledge-assets-accent); --category-accent-soft: var(--cat-knowledge-assets-accent-soft); --category-accent-border: var(--cat-knowledge-assets-accent-border); --category-accent-text: var(--cat-knowledge-assets-accent-text); --category-accent-gradient: var(--cat-knowledge-assets-accent-gradient); }

/* prefers-contrast: more / forced-colors — the accent-driven left border and
   soft background must not become the ONLY signal; strengthen the border and
   drop the tinted background rather than relying on hue alone. */
@media (prefers-contrast: more) {
  .ke-category-card, .ke-product[data-category] { border-width: 2px; }
  .ke-category-card { background: var(--surface) !important; }
}
@media (forced-colors: active) {
  .ke-category-card, .ke-product { border: 1px solid CanvasText; forced-color-adjust: none; }
  .ke-category-card__icon, .ke-category-count { forced-color-adjust: auto; }
}

/* ---------- Layout primitives ---------------------------------------- */
.ke-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.ke-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--border); }
.ke-section:first-of-type { border-top: 0; }
.ke-head { max-width: 62ch; margin-bottom: 2rem; }
.ke-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: .6rem;
}
.ke-head h2 { font-family: var(--font-display); font-size: clamp(1.55rem, 3.4vw, 2.3rem); line-height: 1.18; margin: 0 0 .6rem; }
.ke-head p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.65; margin: 0; }

/* ---------- Synthetic boundary (Constitution P8) ----------------------
   Must remain visible on every surface. Never make this subtle.          */
.ke-synthetic {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--warn); background: var(--warn-bg);
  border-radius: var(--radius); padding: .7rem .9rem; margin: 0 0 1.25rem;
  font-size: .85rem; line-height: 1.5;
}
.ke-synthetic strong { display: block; color: var(--text); }
.ke-synthetic span { color: var(--text-muted); }
.ke-synthetic-mark {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; padding: .18rem .45rem; border-radius: 4px;
  border: 1px solid var(--warn); color: var(--warn); background: var(--warn-bg);
  white-space: nowrap;
}
/* Same root cause and fix as .ke-status-demonstration above: --warn measured
   2.86:1 against this badge's own composited background in light theme. */
/* #7A5F11 measured 4.46:1 on the composited mark background — just under AA, on
   the label whose whole job is telling a reader the content is synthetic.
   Darkened one step to #6B5310 (5.05:1). This is governance copy, not trim. */
html[data-theme="light"] .ke-synthetic-mark, html:not([data-theme]) .ke-synthetic-mark { color: #6B5310; }
@media print { .ke-synthetic, .ke-synthetic-mark { border-width: 2px; } }

/* ---------- Status badges (honest implementation state) ---------------- */
.ke-status {
  display: inline-flex; align-items: center; gap: .32rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px;
  border: 1px solid var(--border-strong); white-space: nowrap;
}
/* Status is never encoded by colour alone — each carries a glyph. */
.ke-status::before { font-size: .8em; }
.ke-status-live { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.ke-status-live::before { content: "\25CF"; }
.ke-status-capability { color: var(--accent-2); border-color: var(--accent-2); background: var(--accent-2-ink); }
.ke-status-capability::before { content: "\25D0"; }
.ke-status-demonstration { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.ke-status-demonstration::before { content: "\25CB"; }
.ke-status-planned { color: var(--text-muted); border-color: var(--border-strong); }
.ke-status-planned::before { content: "\2013"; }
/* Knowledge Ecosystem accessibility finding (axe-core): --success (3.55:1)
   and --warn (2.87:1) both measured below 4.5:1 against this badge's own
   composited background in light theme — this component (pre-existing,
   unmodified by this phase) had never had axe coverage until this page's
   first Playwright spec. Dark theme already passes (>=5.98:1); light-theme-
   only text-color override, badge background/border left unchanged. */
html[data-theme="light"] .ke-status-live, html:not([data-theme]) .ke-status-live { color: #296B45; }
html[data-theme="light"] .ke-status-demonstration, html:not([data-theme]) .ke-status-demonstration { color: #7A5F11; }

/* ---------- Family + product cards ------------------------------------ */
.ke-families { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ke-family {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.25rem; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.ke-family:hover, .ke-family:focus-within { border-color: var(--accent-2); transform: translateY(-2px); }
.ke-family h3 { font-family: var(--font-display); font-size: 1.15rem; margin: .5rem 0 .35rem; }
.ke-family h3 a { color: inherit; text-decoration: none; }
.ke-family h3 a:hover { text-decoration: underline; }
.ke-family p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 .9rem; flex: 1; }
.ke-family-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .74rem; color: var(--text-muted); }
.ke-count { font-family: var(--font-mono); font-size: 1.6rem; color: var(--accent); line-height: 1; }
.ke-count small { font-family: var(--font-body); font-size: .72rem; color: var(--text-muted); display: block; margin-top: .2rem; }

/* ---------- Category cards (Browse by Product Type) -------------------- */
.ke-categories { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.ke-category-card {
  border: 1px solid var(--border); border-left: 4px solid var(--category-accent);
  border-radius: var(--radius); background: var(--surface); padding: 1.15rem;
  display: flex; flex-direction: column; gap: .5rem; transition: border-color .18s ease, transform .18s ease;
}
.ke-category-card:hover, .ke-category-card:focus-within { transform: translateY(-2px); border-left-width: 6px; }
.ke-category-card__head { display: flex; align-items: center; gap: .55rem; }
.ke-category-card__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm);
  background: var(--category-accent-soft); color: var(--category-accent-text);
}
.ke-category-card__icon svg { width: 1.15rem; height: 1.15rem; }
.ke-category-card h3 { font-family: var(--font-display); font-size: 1.08rem; margin: 0; line-height: 1.25; }
.ke-category-card h3 a { color: inherit; text-decoration: none; }
.ke-category-card h3 a:hover, .ke-category-card h3 a:focus-visible { text-decoration: underline; }
.ke-category-count {
  font-family: var(--font-mono); font-size: 1.7rem; line-height: 1; color: var(--category-accent-text);
}
.ke-category-count small { font-family: var(--font-body); font-size: .68rem; color: var(--text-muted); display: block; margin-top: .15rem; font-weight: 400; }
.ke-category-card p { color: var(--text-muted); font-size: .87rem; line-height: 1.55; margin: 0; }
.ke-category-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .72rem; color: var(--text-muted); }
.ke-category-card__meta span { border: 1px solid var(--category-accent-border); border-radius: 999px; padding: .12rem .5rem; }
.ke-category-card__cta {
  margin-top: .3rem; font-size: .84rem; font-weight: 600; color: var(--category-accent-text);
  text-decoration: none; display: inline-flex; align-items: center; gap: .3rem;
}
.ke-category-card__cta:hover, .ke-category-card__cta:focus-visible { text-decoration: underline; }
/* EMPTINESS IS SAID, NOT FADED.
 *
 * This dimmed the whole card to 82% to signal "nothing available yet". Opacity
 * composites every descendant against the page, so the card's link, its count
 * and — on the cards that carry one — the synthetic-demonstration mark all fell
 * below AA together: measured 3.58:1 to 4.19:1 on the calls to action and
 * 2.26:1 on the disclosure label, whose entire job is to be read.
 *
 * A recessed surface carries the same meaning at full legibility, and the card
 * already states its own count in words. */
.ke-category-card--empty { background: var(--surface-2); border-style: dashed; }
.ke-category-card--empty .ke-category-count { color: var(--text-muted); }

/* min-width:0 is required here, not just on the parent .ke-stage-grid item —
   a grid CONTAINER's own automatic minimum size includes its track minimums
   (285px), and that does not shrink just because ITS ancestor did. Without
   this, .ke-products nested inside the narrower .ke-stage-grid columns
   (used by the combined Surveys/Assessments/Evaluations and Maps/
   Visualizations sections) overflowed the viewport at tablet width — caught
   by tests-browser/knowledge-ecosystem-public.spec.js's overflow check. */
.ke-products { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); min-width: 0; }
.ke-product {
  border: 1px solid var(--border); border-left: 3px solid var(--category-accent, var(--border));
  border-radius: var(--radius); background: var(--surface); padding: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.ke-product:hover, .ke-product:focus-within { border-color: var(--accent-2); border-left-color: var(--category-accent, var(--accent-2)); }
.ke-product-category {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--category-accent-text); background: var(--category-accent-soft);
  border-radius: 999px; padding: .16rem .5rem; display: inline-block;
}
.ke-product-sector {
  font-size: .72rem; color: var(--text-muted); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: .14rem .48rem;
}
.ke-product-standard {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .03em;
  color: var(--text-muted); border: 1px dashed var(--border-strong);
  border-radius: 3px; padding: .1rem .38rem;
}
.ke-product h3 { font-size: 1rem; margin: 0; line-height: 1.3; }
.ke-product h3 a { color: var(--text); text-decoration: none; }
.ke-product h3 a:hover, .ke-product h3 a:focus-visible { text-decoration: underline; color: var(--accent-2); }
.ke-product p { color: var(--text-muted); font-size: .86rem; line-height: 1.55; margin: 0; flex: 1; }
.ke-product-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ke-fmt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em;
  padding: .14rem .38rem; border-radius: 3px; border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
/* Accessibility finding (axe-core): opacity:.68 diluted this chip's already-
   small (.64rem) text below 4.5:1 against white in light theme. The dashed
   border plus the literal " · planned" suffix text already distinguish this
   chip without relying on opacity/colour — removing the fade fixes contrast
   without losing any signal. */
.ke-fmt-planned { border-style: dashed; }
.ke-fmt-planned::after { content: " \00B7 planned"; font-size: .9em; }

/* ---------- Journey ----------------------------------------------------- */
.ke-journey { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .ke-journey { grid-template-columns: 1fr; } }
.ke-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ke-stage-btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  border-left: 3px solid var(--border); padding: .7rem .9rem; color: var(--text-muted);
  font: inherit; font-size: .92rem; display: flex; gap: .7rem; align-items: baseline;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ke-stage-btn:hover { background: var(--surface-2); color: var(--text); }
.ke-stage-btn[aria-selected="true"] {
  border-left-color: var(--accent); color: var(--text); background: var(--surface);
  font-weight: 600;
}
.ke-stage-btn .ke-stage-n { font-family: var(--font-mono); font-size: .74rem; color: var(--accent-2); }
.ke-stage-panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.4rem;
}
.ke-stage-panel h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 .3rem; }
.ke-stage-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 1rem; }

/* Combined-category columns (Surveys/Assessments/Evaluations; Maps&GIS/Data
   Visualizations) — a FIXED column count, not auto-fit, because each nested
   .ke-products grid has its own 285px-per-card minimum track size that does
   NOT shrink just because an ancestor's min-width is 0 (min-width:0 only
   stops the ancestor's OWN intrinsic-content-size propagation; it cannot
   override a descendant grid's explicit minmax()). Below the width where 3
   (or 2) columns of >=285px cards genuinely fit, stack to one column instead
   of asking a card to be narrower than its own declared minimum. */
.ke-category-columns { display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--ke-cat-cols, 3), 1fr); margin-top: 1rem; }
.ke-category-columns > div { min-width: 0; }
@media (max-width: 940px) { .ke-category-columns { grid-template-columns: 1fr; } }
.ke-category-columns--2 { --ke-cat-cols: 2; }
@media (max-width: 640px) { .ke-category-columns--2 { grid-template-columns: 1fr; } }
.ke-stage-grid h4 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-2); margin: 0 0 .45rem;
}
.ke-stage-grid ul { margin: 0; padding-left: 1.05rem; }
.ke-stage-grid li { font-size: .87rem; line-height: 1.55; color: var(--text-muted); margin-bottom: .25rem; }
.ke-gate { border-left: 3px solid var(--accent); padding-left: .7rem; }

/* ---------- Industry selector ------------------------------------------ */
.ke-industry-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.ke-industry-tab {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .42rem .95rem; font: inherit; font-size: .87rem; cursor: pointer; color: var(--text-muted);
  transition: all .15s ease;
}
.ke-industry-tab:hover { border-color: var(--accent-2); color: var(--text); }
.ke-industry-tab[aria-selected="true"] {
  background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-2-ink); font-weight: 600;
}
.ke-industry-flow { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ke-flow-step {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: .9rem; position: relative;
}
.ke-flow-step h3 {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-2); margin: 0 0 .4rem; font-weight: 700;
}
.ke-flow-step p, .ke-flow-step li { font-size: .87rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.ke-flow-step ul { margin: 0; padding-left: 1.05rem; }

/* ---------- One project, many products --------------------------------- */
.ke-fan { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .ke-fan { grid-template-columns: 1fr; } }
.ke-fan-source {
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); padding: 1.2rem; position: sticky; top: 1rem;
}
.ke-fan-source h3 { font-family: var(--font-display); font-size: 1.1rem; margin: .4rem 0 .5rem; }
.ke-fan-source p { font-size: .87rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 .8rem; }
.ke-fan-out { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ke-fan-item {
  border: 1px solid var(--border); border-left: 3px solid var(--ke-flow);
  border-radius: var(--radius-sm); background: var(--surface); padding: .65rem .8rem;
}
.ke-fan-item strong { display: block; font-size: .9rem; font-weight: 600; }
.ke-fan-item strong a { color: inherit; text-decoration: none; }
.ke-fan-item strong a:hover { text-decoration: underline; }
.ke-fan-item span { font-size: .76rem; color: var(--text-muted); }

/* ---------- Knowledge graph demo --------------------------------------- */
.ke-graph { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.2rem; }
.ke-graph-svg { width: 100%; height: auto; display: block; }
.ke-graph-node { cursor: pointer; }
.ke-graph-node rect {
  fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1;
  transition: stroke .15s ease, fill .15s ease;
}
.ke-graph-node:hover rect,
.ke-graph-node:focus-visible rect { stroke: var(--accent); stroke-width: 2; fill: var(--surface); }
.ke-graph-node:focus-visible { outline: none; }
.ke-graph-node text { fill: var(--text); font-size: 11px; font-family: var(--font-body); }
.ke-graph-edge { stroke: var(--ke-grid-line); stroke-width: 1.5; fill: none; }
.ke-graph-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .9rem; font-size: .78rem; color: var(--text-muted); }
.ke-graph-detail {
  margin-top: .9rem; padding: .85rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: .88rem; line-height: 1.6;
}
/* Mobile fallback: the SVG graph is replaced by an ordered provenance list. */
.ke-graph-fallback { display: none; }
@media (max-width: 640px) {
  .ke-graph-svg { display: none; }
  .ke-graph-fallback { display: block; }
}

/* ---------- AI orchestration ------------------------------------------- */
.ke-ai-agents { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.ke-ai-agent {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: .85rem; border-top: 3px solid var(--accent-2);
}
.ke-ai-agent h3 { font-size: .95rem; margin: 0 0 .3rem; font-family: var(--font-body); }
.ke-ai-agent p { font-size: .84rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 .5rem; }
.ke-ai-never {
  font-size: .78rem; color: var(--danger); border-top: 1px solid var(--border);
  padding-top: .45rem; margin: 0;
}
.ke-ai-never::before { content: "Never: "; font-weight: 600; }
.ke-ai-chain {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 1.4rem; font-size: .9rem;
}
.ke-ai-chain-step { display: inline-flex; align-items: center; gap: .4rem; }
.ke-ai-chain-step b { font-weight: 600; }
.ke-ai-chain-arrow { color: var(--accent-2); font-family: var(--font-mono); }
/* --accent as INK on a light surface measured 2.77:1. --accent-text is the
   token for exactly this job; the marigold remains the fill colour elsewhere. */
.ke-ai-chain-human { color: var(--accent-text); font-weight: 700; }

/* ---------- Centers ----------------------------------------------------- */
.ke-centers { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ke-center {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.1rem; border-left: 4px solid var(--accent-2);
}
.ke-center h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 .25rem; }
.ke-center .ke-center-q { font-style: italic; color: var(--accent-2); font-size: .87rem; margin: 0 0 .5rem; }
.ke-center p { font-size: .86rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* ---------- Filters ----------------------------------------------------- */
.ke-filters {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 1.5rem;
}
.ke-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--text-muted); }
.ke-filters input, .ke-filters select {
  font: inherit; font-size: .9rem; padding: .45rem .6rem; min-height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.ke-filters input:focus-visible, .ke-filters select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ke-result-count { font-size: .85rem; color: var(--text-muted); margin: 0 0 1rem; }

/* ---------- Empty state (Constitution: every surface has one) ---------- */
.ke-empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 2rem 1.25rem; text-align: center; color: var(--text-muted);
}
.ke-empty h3 { font-family: var(--font-display); color: var(--text); margin: 0 0 .4rem; font-size: 1.1rem; }
.ke-empty p { margin: 0 auto .8rem; max-width: 46ch; font-size: .9rem; line-height: 1.6; }

/* Distinct from .ke-empty (the "no results match your filter" state) — this
   is an informational "N more items are planned but not yet named" note
   inside an otherwise-populated or category-thin section. Never matched by
   the same selector as the genuine empty-filter-result state. */
.ke-more-planned {
  grid-column: 1 / -1; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 1rem 1.1rem; color: var(--text-muted); font-size: .88rem;
}
.ke-more-planned h3 { font-family: var(--font-display); color: var(--text); margin: 0 0 .3rem; font-size: 1rem; }

/* ---------- Product detail --------------------------------------------- */
@media (max-width: 880px) { .pd-grid { grid-template-columns: 1fr !important; } }
.pd-grid dt { font-weight: 600; }

/* ---------- Accessibility + motion ------------------------------------- */
.ke-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ke-product:focus-within, .ke-family:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}
/* Touch targets: 44px minimum on coarse pointers AND at mobile widths.
   Both conditions are needed — an emulated mobile viewport on a desktop
   browser reports a fine pointer, and mobile-app packaging (Part 19) is
   validated at width, not at pointer type. Scoped to this page's own
   controls; the site-wide .btn scale is deliberately left untouched to
   avoid a regression across the other 49 public pages. */
@media (pointer: coarse), (max-width: 700px) {
  .ke-industry-tab,
  .ke-stage-btn,
  .ke-filters input,
  .ke-filters select,
  .ke-filters .btn,
  .ke-wrap > div > .btn,
  .ke-empty .btn { min-height: 44px; }
  .ke-wrap > div > .btn,
  .ke-filters .btn,
  .ke-empty .btn { display: inline-flex; align-items: center; justify-content: center; }
  .ke-industry-tab { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Real Playwright finding: a translateY(10px) position shift during this
   fade-in (this page's own scroll-triggered reveal) moves an element's
   bounding box between when a real pointer/automation click computes its
   target coordinate and when the transition settles — reliably causing a
   real mouse click on a just-revealed control (e.g. the empty-state reset
   button below the fold) to land on the pre-transition position and miss.
   Opacity alone reveals content without moving its box, removing the risk
   for real users on slower devices too, not just automated clicks. */
.ke-reveal { opacity: 0; transition: opacity .5s ease; }
.ke-reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ke-reveal, .ke-reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ke-family, .ke-product, .ke-category-card, .ke-industry-tab, .ke-stage-btn { transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .ke-filters, .ke-industry-tabs, .ke-stage-btn { display: none; }
  .ke-reveal { opacity: 1 !important; transform: none !important; }
  .ke-product, .ke-family, .ke-center, .ke-category-card { break-inside: avoid; border: 1px solid #000; }
}

/* ---------------------------------------------------------------
   Phase 9.3 (LKGI) — Enterprise Knowledge Graph lineage panels.
   Rendered on product detail pages from live EKGL data. Uses the
   existing governed tokens only; introduces no new colour values.
   --------------------------------------------------------------- */
.ke-graph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
  min-width: 0;
}
.ke-graph-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem .9rem;
  background: var(--surface);
  min-width: 0;
}
.ke-graph-block h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .45rem;
  color: var(--text-muted);
  font-weight: 650;
}
.ke-graph-block p { margin: 0; font-size: .84rem; }
.ke-graph-list { margin: 0; padding-left: 1.05rem; font-size: .84rem; }
.ke-graph-list li { margin: 0 0 .25rem; }
.ke-graph-list a { color: var(--brand-ink, var(--text)); }

@media (max-width: 640px) {
  .ke-graph-grid { grid-template-columns: 1fr; }
}

/* ===== PUBLIC SECTOR EXPLORER — Package 4A-iii =====
   The governed 55-node hierarchy and the separated platform counts. Tokens
   only, no literal colours, matching the Universal Design System rule the
   sector pages already follow. */
.kes-countbar{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:0 0 1.6rem;padding:.9rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius,12px);background:var(--surface-2);font-size:.9rem}
.kes-countbar strong{font-size:1.15rem}
.kes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.kes-node{border:1px solid var(--border);border-radius:var(--radius,12px);background:var(--surface);padding:1rem 1.1rem}
.kes-node h3{margin:0 0 .3rem;font-size:1.02rem;line-height:1.3}
.kes-node h3 a{color:inherit;text-decoration:none}
.kes-node h3 a:hover,.kes-node h3 a:focus-visible{text-decoration:underline}
.kes-meta{margin:0;color:var(--text-muted);font-size:.79rem;line-height:1.45}
.kes-sub{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.kes-sub li{margin:0}
.kes-sub a{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem;font-size:.76rem;color:var(--text-muted);text-decoration:none}
.kes-sub a:hover,.kes-sub a:focus-visible{color:var(--text);border-color:var(--accent)}
.kes-cross{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.kes-cross-head{margin:0 0 .2rem;font-size:1.05rem}
.kes-counts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.9rem}
.kes-count{display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--border);border-radius:var(--radius,12px);background:var(--surface);padding:.9rem 1rem}
.kes-count-value{font-family:var(--font-display);font-size:1.75rem;line-height:1}
.kes-count-label{font-size:.85rem}
.kes-count-owner{color:var(--text-muted);font-size:.7rem;letter-spacing:.02em;word-break:break-word}
.kes-node a:focus-visible,.kes-sub a:focus-visible{outline:3px solid var(--focus,currentColor);outline-offset:2px}
@media(max-width:639px){
  .kes-grid,.kes-counts-grid{grid-template-columns:1fr}
  .kes-countbar{flex-direction:column;gap:.4rem}
  /* Touch targets. The subsector chips measured 27.2px tall on a 375px
     viewport — comfortably tappable with a mouse, not with a thumb. */
  .kes-sub{gap:.5rem}
  .kes-sub a{min-height:44px;display:inline-flex;align-items:center;padding:.5rem .85rem}
  .kes-node h3 a{display:inline-block;min-height:44px;line-height:44px}
}

/* ---- THE NINE PRODUCT AREAS ----
   The reader's way in, near the top of the page. Areas backed by a catalog
   family and areas that are an experience grouping are visually distinguished,
   because presenting nine areas as nine backend families would be a claim the
   catalog does not support. */
.ke-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.ke-area {
  padding: 1.1rem 1.2rem; border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
  background: var(--surface);
}
.ke-area[data-backing="EXPERIENCE_GROUPING"] { border-left-style: dashed; border-left-color: var(--accent); }
.ke-area__n { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.3; }
.ke-area__c { margin: 0 0 .5rem; font-size: .84rem; color: var(--text); }
.ke-area__c b { font-size: 1.35rem; font-family: var(--font-display); }
.ke-area__overlap { font-size: .72rem; color: var(--text-muted); font-style: italic; }
.ke-area__l { margin: 0 0 .5rem; font-size: .84rem; color: var(--text-muted); line-height: 1.5; }
.ke-area__s { margin: 0; font-size: .74rem; color: var(--text-muted); }
.ke-area__note {
  margin: .6rem 0 0; padding-top: .55rem; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--text-muted); line-height: 1.5;
}
.ke-areas__foot { margin: 1.1rem 0 0; font-size: .8rem; color: var(--text-muted); line-height: 1.6; }

/* The nine certified dashboard surfaces. Named, not sampled — they render an
   organization's own governed data, so no public sample exists. */
.ke-surface {
  padding: .85rem 1rem; border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
  background: var(--surface);
}
.ke-surface__n { margin: 0 0 .25rem; font-size: .92rem; line-height: 1.3; }
.ke-surface__m { margin: 0; font-size: .76rem; color: var(--text-muted); }

/* ---- SECTOR / SUB-SECTOR / AUDIENCE DISCOVERY ----
   Two controls and one answer. The stakeholder should not need to understand
   the catalog to find what applies to them. */
.ke-disc { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.2rem; }
.ke-disc__f { display: flex; flex-direction: column; gap: .35rem; min-width: 14rem; flex: 1 1 14rem; }
.ke-disc__f > span {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.ke-disc__f select {
  min-height: 44px; font: inherit; padding: 0 .7rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.ke-disc__r {
  padding: 1.2rem 1.3rem; border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
  background: var(--surface);
}
.ke-disc__r h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.ke-disc__sub, .ke-disc__m { margin: 0 0 .5rem; font-size: .84rem; color: var(--text-muted); line-height: 1.55; }
.ke-disc__q { margin: .8rem 0 .3rem; font-size: .84rem; }
.ke-disc__ql { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .86rem; line-height: 1.6; }
.ke-disc__h { margin: 1rem 0 .5rem; font-size: .95rem; }
.ke-disc__p { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ke-disc__p li {
  padding: .7rem .85rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.ke-disc__p b { display: block; font-size: .9rem; text-transform: capitalize; margin-bottom: .2rem; }
.ke-disc__p span { font-size: .8rem; color: var(--text-muted); line-height: 1.5; }
.ke-disc__n { margin: .9rem 0 0; font-size: .78rem; color: var(--text-muted); line-height: 1.55; }