/* Knowledge Ecosystem live view — Phase 10.6 + 10.6B
   Existing design tokens only. Family accents reuse the --vi-* palette already
   defined in vrds-tokens.css; no new colour literals are introduced. */

#knowledge-ecosystem-live { display: block; }

/* ---------- Scale strip ---------- */
.kel-scale {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 1.75rem; margin: 0 0 2rem;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2);
}
.kel-stat { display: flex; flex-direction: column; gap: .25rem; }
.kel-stat-v { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--accent-2); }
.kel-stat-l { color: var(--text-muted); font-size: .74rem; letter-spacing: .03em; }
.kel-cert, .kel-disclaimer { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .72rem; color: var(--text-muted); }
.kel-disclaimer { padding-top: .6rem; border-top: 1px solid var(--border); line-height: 1.55; }

/* ---------- Lifecycle model ---------- */
.kel-journey { margin: 0 0 2.5rem; }
.kel-journey-title { margin: 0 0 1rem; font-size: 1.05rem; }
.kel-stages { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .85rem; padding: 0; list-style: none; }
.kel-stage {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: .76rem;
}
.kel-stage-n {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: var(--accent-2); color: var(--accent-2-ink);
  font-size: .62rem; font-weight: 700;
}
.kel-journey-note { margin: 0; color: var(--text-muted); font-size: .74rem; line-height: 1.6; max-width: 72ch; }

/* ---------- Status vocabulary (Part 6) ---------- */
.kel-status {
  display: inline-flex; align-items: center;
  padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .62rem; font-weight: 650; letter-spacing: .03em; white-space: nowrap;
}
.kel-status--live          { color: var(--vi-green-700, #17663A); }
.kel-status--demonstration { color: var(--vi-teal-800, #00615F); }
.kel-status--capability    { color: var(--vi-blue-700, #124C8C); }
.kel-status--planned       { color: var(--text-muted); }
.kel-status--unknown       { color: var(--text-muted); border-style: dashed; }
/* Dark-theme status colours. PRE-EXISTING DEFECT, found by measurement while
   verifying this layout change: the -600 fallbacks scored 3.78:1 (live) and
   2.84:1 (capability) against the dark card surface, both below 4.5:1. They are
   replaced with theme-aware tokens that resolve on this page and pass:
     live         --accent-2  5.55:1
     demonstration #009C96    4.88:1  (already passing — unchanged)
     capability   --accent    7.51:1
   The four statuses stay distinguishable by their LABELS (Live / Live sample /
   Available / Planned), so none of this is information carried by colour alone. */
html[data-theme="dark"] .kel-status--live          { color: var(--accent-2); }
html[data-theme="dark"] .kel-status--demonstration { color: var(--vi-teal-600, #009C96); }
html[data-theme="dark"] .kel-status--capability    { color: var(--accent); }

/* ---------- Legend ---------- */
.kel-legend {
  padding: 1.1rem 1.35rem; margin: 0 0 1.5rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.kel-legend h4 { margin: 0 0 .7rem; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.kel-legend dl { display: grid; gap: .5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kel-legend dl > div { display: flex; align-items: baseline; gap: .5rem; }
.kel-legend dd { margin: 0; color: var(--text-muted); font-size: .72rem; line-height: 1.5; }

/* ---------- Spacing tokens (Part 8) ----------
   One place to change rhythm, so section/grid/card/chip/action spacing cannot
   drift apart again. Values sit inside the ranges the layout correction fixes. */
#knowledge-ecosystem-live {
  --kel-section-gap: 3rem;   /* 48px — within the 40-64px band */
  --kel-grid-gap: 1.5rem;    /* 24px */
  --kel-card-pad: 1.375rem;  /* 22px */
  --kel-chip-gap: .5rem;     /* 8px  */
  --kel-action-gap: .6875rem;/* 11px */
}

/* ---------- Filters (Parts 7/11) ---------- */
.kel-filters {
  display: flex; flex-wrap: wrap; gap: 1rem var(--kel-grid-gap);
  align-items: end; margin: 0 0 var(--kel-grid-gap);
}
.kel-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 180px; min-width: 0; max-width: 260px; }
.kel-field > span { color: var(--text-muted); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; }
.kel-field select {
  min-height: 44px; padding: .5rem .7rem; width: 100%;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .8rem;
}
.kel-field select:focus-visible, .kel-check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The checkbox and its label share one baseline row and one hit target. */
.kel-check { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-size: .78rem; flex: 0 0 auto; }
.kel-check input { width: 1.05rem; height: 1.05rem; flex: none; }
.kel-clear {
  min-height: 44px; padding: .5rem .9rem; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .74rem; cursor: pointer;
}
.kel-clear:hover { border-color: var(--accent-2); color: var(--accent-2); }
.kel-clear:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.kel-clear[hidden] { display: none; }

/* ---------- Layer 1: family overview (Parts 1/2) ----------
   Compact NAVIGATION cards. They never contain a product list, so they never
   force the product grid into a narrow column. */
.kel-families-title { margin: 0 0 .4rem; font-size: 1.05rem; }
.kel-families-lead { margin: 0 0 1.25rem; color: var(--text-muted); font-size: .82rem; line-height: 1.6; max-width: 74ch; }

.kel-overview { margin: 0 0 var(--kel-section-gap); }
.kel-overview-title, .kel-results-title { margin: 0; font-size: .95rem; }
.kel-famgrid {
  display: grid; gap: var(--kel-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1rem;
  align-items: stretch;
}
.kel-fam {
  display: flex; flex-direction: column; gap: .7rem;
  padding: var(--kel-card-pad);
  border: 1px solid var(--border); border-top: 3px solid var(--kel-accent, var(--border-strong));
  border-radius: 14px; background: var(--surface);
  /* No fixed height: the card grows with its content instead of clipping it. */
}
/* Family identity accents — real families only, existing tokens only */
.kel-fam[data-family="reports"]       { --kel-accent: var(--vi-blue-700, #124C8C); }
.kel-fam[data-family="publications"]  { --kel-accent: var(--vi-teal-700, #007C7A); }
.kel-fam[data-family="data"]          { --kel-accent: var(--vi-slate-600, #4B5563); }
.kel-fam[data-family="decision"]      { --kel-accent: var(--vi-gold-600, #B88922); }
.kel-fam[data-family="communication"] { --kel-accent: var(--vi-orange-600, #E67E22); }
.kel-fam[data-family="knowledge"]     { --kel-accent: var(--vi-green-700, #17663A); }
.kel-fam[data-family="ai"]            { --kel-accent: var(--vi-purple-600, #7C3AED); }

.kel-fam-name { margin: 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.kel-fam-counts { margin: 0; color: var(--text-muted); font-size: .76rem; line-height: 1.5; }
/* Theme-aware, for the same reason as .kel-card-eyebrow. */
.kel-fam-n { color: var(--text); font-size: 1.05rem; font-weight: 700; }
.kel-fam-sectors { display: flex; flex-wrap: wrap; gap: var(--kel-chip-gap); margin: 0; padding: 0; list-style: none; }
.kel-fam-sectors li {
  padding: .18rem .5rem; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: .64rem;
}
.kel-fam-more { border-style: solid; }
.kel-fam-action {
  min-height: 44px; margin-top: auto; align-self: flex-start;
  padding: .5rem .9rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: .74rem; cursor: pointer;
}
.kel-fam-action:hover { border-color: var(--kel-accent, var(--border-strong)); }
.kel-fam-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Selected family. The button TEXT also changes to "Showing products" and
   aria-pressed flips, so selection is never signalled by colour alone. */
.kel-fam[data-selected] { border-color: var(--kel-accent, var(--accent-2)); box-shadow: inset 0 0 0 1px var(--kel-accent, var(--accent-2)); }
/* Filled with the theme's own primary pair rather than the family accent: an
   accent fill with --surface text measured 1.92:1 in dark theme. --text on
   --surface is by definition the page's highest-contrast pairing, so it holds
   in both themes (measured 15.52 light / 14.44 dark). Family identity is still
   carried by the card's accent border and the accent inset above. */
.kel-fam-action[aria-pressed="true"] {
  background: var(--text); color: var(--surface); border-color: var(--text); font-weight: 650;
}

/* ---------- Layer 2: product results (Part 3) ----------
   A top-level grid at the full width of the section — not nested inside a
   family column, which is what forced 287px cards. */
.kel-results { margin: 0 0 var(--kel-section-gap); }
.kel-results-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  margin: 0 0 1rem;
}
.kel-count { margin: 0; color: var(--text-muted); font-size: .78rem; }
.kel-grid {
  display: grid; gap: var(--kel-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}
.kel-noresults { margin: 1rem 0 0; color: var(--text-muted); font-size: .8rem; }
.kel-none { margin: 0; color: var(--text-muted); font-size: .74rem; }

/* ---------- States ---------- */
.kel-skel { border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); animation: kel-pulse 1.4s ease-in-out infinite; }
.kel-skel-strip { height: 130px; margin-bottom: 1.5rem; }
.kel-skel-row { height: 180px; margin-bottom: 1rem; }
@keyframes kel-pulse { 0%,100% { opacity: .55; } 50% { opacity: .9; } }

.kel-error, .kel-empty {
  padding: 2rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); text-align: center;
}
.kel-error-detail { color: var(--text-muted); font-size: .8rem; }
.kel-retry { min-height: 44px; margin-top: .75rem; }

@media (prefers-reduced-motion: reduce) { .kel-skel { animation: none; } }

/* ---------- Product detail surface (Parts 4/5/9) ---------- */
.kel-btn:focus-visible, .kel-rel-link:focus-visible, .kel-detail-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.kel-detail {
  position: relative; margin: 1.5rem 0 0; padding: 1.75rem;
  border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface-2);
}
.kel-detail-close {
  position: absolute; top: .75rem; right: .75rem;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.kel-detail-inner { display: grid; gap: 1.1rem; }
.kel-detail-inner[data-family="reports"]       { --kel-accent: var(--vi-blue-700, #124C8C); }
.kel-detail-inner[data-family="publications"]  { --kel-accent: var(--vi-teal-700, #007C7A); }
.kel-detail-inner[data-family="data"]          { --kel-accent: var(--vi-slate-600, #4B5563); }
.kel-detail-inner[data-family="decision"]      { --kel-accent: var(--vi-gold-600, #B88922); }
.kel-detail-inner[data-family="communication"] { --kel-accent: var(--vi-orange-600, #E67E22); }
.kel-detail-inner[data-family="knowledge"]     { --kel-accent: var(--vi-green-700, #17663A); }
.kel-detail-inner[data-family="ai"]            { --kel-accent: var(--vi-purple-600, #7C3AED); }

.kel-detail-eyebrow { margin: 0; color: var(--kel-accent, var(--accent-2)); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 650; }
.kel-detail-head h4 { margin: .3rem 2.5rem .5rem 0; font-size: 1.15rem; line-height: 1.3; }
.kel-detail-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; color: var(--text-muted); font-size: .72rem; }
.kel-detail-sample { align-self: start; min-height: 44px; display: inline-flex; align-items: center; }

.kel-formats h5, .kel-rels-title, .kel-rel-block h5 { margin: 0 0 .4rem; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.kel-formats-note { margin: 0 0 .5rem; color: var(--text-muted); font-size: .7rem; font-style: italic; }
.kel-fmt { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.kel-fmt li { padding: .22rem .55rem; border: 1px solid var(--kel-accent, var(--border)); border-radius: 6px; color: var(--kel-accent, var(--text)); font-size: .66rem; font-weight: 650; }
.kel-fmt-plan { margin: .45rem 0 0; color: var(--text-muted); font-size: .68rem; }

.kel-rels { display: grid; gap: .9rem; }
.kel-rel-block ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.kel-rel-block li { display: inline-flex; }
.kel-rel-block li:not([data-family]) { padding: .22rem .55rem; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-size: .68rem; }
.kel-rel-link {
  min-height: 32px; padding: .22rem .55rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: .68rem; cursor: pointer;
}
.kel-rel-link:hover { border-color: var(--accent-2); color: var(--accent-2); }
.kel-honesty, .kel-src { margin: 0; padding-top: .7rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .66rem; line-height: 1.55; }

@media (max-width: 768px) {
  .kel-detail { padding: 1.25rem; }
  .kel-detail-head h4 { margin-right: 3rem; }
}

/* ---------- Product card (Parts 3/4/5/6) ----------
   REPLACES the Phase 10.7 "cover" composition. That build positioned the
   kicker, title and watermark absolutely inside a cover box whose height came
   from `aspect-ratio: 4/3`. Inside the wrapping column flex context it was
   given, the aspect ratio never resolved and the cover collapsed to its padding
   (measured: 30px). Every absolutely-positioned child then rendered outside it
   — over the 4px category rule, over the body text, and across the watermark.
   Measured at 1280px before this change: 76/76 titles outside their cover box,
   15/76 colliding with the watermark, 76/76 titles rendered twice per card.

   The card is now ordinary document flow. Only the decorative initial sits in a
   layer of its own, and it cannot affect layout or legibility. */
.kel-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-top: 3px solid var(--kel-accent, var(--border-strong));
  border-radius: 14px; background: var(--surface);
  transition: transform .18s ease, border-color .18s ease;
}
.kel-card:hover { transform: translateY(-2px); border-color: var(--kel-accent, var(--border-strong)); }
.kel-card:focus-within { border-color: var(--kel-accent, var(--accent-2)); }

/* Family identity accents — real families only, existing tokens only */
.kel-card[data-family="reports"]       { --kel-accent: var(--vi-blue-700, #124C8C); }
.kel-card[data-family="publications"]  { --kel-accent: var(--vi-teal-700, #007C7A); }
.kel-card[data-family="data"]          { --kel-accent: var(--vi-slate-600, #4B5563); }
.kel-card[data-family="decision"]      { --kel-accent: var(--vi-gold-600, #B88922); }
.kel-card[data-family="communication"] { --kel-accent: var(--vi-orange-600, #E67E22); }
.kel-card[data-family="knowledge"]     { --kel-accent: var(--vi-green-700, #17663A); }
.kel-card[data-family="ai"]            { --kel-accent: var(--vi-purple-600, #7C3AED); }

/* Part 5 option B: decorative initials retained ONLY as a background layer.
   Behind every text node (z-index -1 within the card's own stacking context),
   non-interactive, clipped by the card, and removed entirely below 900px where
   the card is narrow enough for it to crowd the title.

   ANCHORED TO THE FOOT, NOT THE HEAD. Part 5 requires that it never overlap the
   primary title — a stricter rule than merely sitting behind it. Placed at the
   top-right its box intersected the title box on all 76 cards (measured), even
   though it painted behind the text. Anchoring it to the bottom-right puts it
   in the actions band, where it cannot reach the title at any card height. */
.kel-card-mark {
  position: absolute; right: .5rem; bottom: .1rem; z-index: -1;
  font-family: var(--font-display, inherit);
  font-size: 3.25rem; line-height: 1; font-weight: 800;
  color: var(--kel-accent, var(--text)); opacity: .07;
  pointer-events: none; user-select: none;
}

.kel-card-body {
  display: flex; flex-direction: column; gap: .45rem;
  padding: var(--kel-card-pad); height: 100%;
}
/* Family accents are FIXED hex values (vrds-tokens.css is not loaded on this
   page, so every var(--vi-*) here resolves to its literal fallback). A fixed
   mid-dark hex cannot satisfy contrast on both themes: measured on the dark
   card surface the accent eyebrow scored 1.92:1. Accents are therefore used for
   BORDERS and the decorative watermark only, never for text — family identity
   still reads from the card's top rule, and text uses theme-aware tokens that
   pass in both themes (measured 5.66 light / 7.49 dark). */
.kel-card-eyebrow {
  margin: 0; color: var(--text-muted);
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  overflow-wrap: anywhere;
}
/* Part 4: the title is a normal-flow heading. No absolute positioning, no
   negative margin, no clipping — and min-height reserves two lines so cards
   with one-line and two-line titles keep their lower content aligned without
   truncating anything longer. */
.kel-card-title {
  position: static; margin: 0;
  font-size: .95rem; line-height: 1.25; font-weight: 650;
  min-height: calc(2 * 1.25em);
  overflow-wrap: anywhere; text-wrap: pretty;
}
.kel-card-sector { margin: 0; color: var(--text-muted); font-size: .72rem; }
.kel-card-status { margin: .15rem 0 0; }
.kel-card-desc { margin: .1rem 0 0; color: var(--text-muted); font-size: .74rem; line-height: 1.55; }

/* Actions sit at the card's foot, so every card in a row ends on the same line. */
.kel-card-actions {
  display: flex; flex-wrap: wrap; gap: var(--kel-action-gap);
  margin-top: auto; padding-top: .9rem;
}
.kel-btn {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: .45rem .8rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .74rem; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
/* Hover moves the BORDER to the family accent and leaves the label on the
   theme text colour — recolouring the label to a fixed accent hex would drop it
   below contrast in dark theme, for the same reason as the eyebrow above. */
.kel-btn:hover { border-color: var(--kel-accent, var(--accent-2)); }
.kel-btn--sample { border-color: var(--kel-accent, var(--border-strong)); font-weight: 650; }

/* ---------- Responsive (Parts 2/3/11) ---------- */
/* Very wide screens only. Scoped to THIS section — the site-wide container is
   untouched. 1480px is not arbitrary: at >=1600px the site's own section
   padding is 96px a side, leaving 1288px of content, which is the narrowest
   track that fits a 4th column while every card stays above the 300px minimum
   (4 x 304 + 3 x 24 = 1288). The sibling .ke-section blocks on this page are
   already unconstrained and render wider than this, so the section moves closer
   to the rest of the page, not away from it. */
@media (min-width: 1600px) {
  #ecosystem-live { max-width: 1480px; }
}
@media (max-width: 1100px) {
  .kel-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 900px) {
  /* Two columns on tablet, and the decorative initial is dropped rather than
     allowed to sit behind a title that now occupies most of the card. */
  .kel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kel-card-mark { display: none; }
}
@media (max-width: 768px) {
  .kel-scale { padding: 1.25rem; }
  .kel-filters { gap: .85rem; }
  .kel-field { flex: 1 1 100%; max-width: none; }
}
@media (max-width: 640px) {
  .kel-grid, .kel-famgrid { grid-template-columns: 1fr; }
  .kel-card-title { min-height: 0; }
  .kel-card-actions { gap: .6rem; }
  .kel-btn { flex: 1 1 100%; }   /* full-width actions on mobile */
  .kel-clear { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kel-card { transition: none; }
  .kel-card:hover { transform: none; }
}