/* ============================================================
   KNOWLEDGE ECOSYSTEM — a product environment, not a page
   ------------------------------------------------------------
   The surface this replaced measured 56,634px: 34 sections, 932 cards. Finding
   one product meant scrolling past every product you did not want.

   The rule here is that DISCOVERY DOES NOT MOVE THE PAGE. On desktop the rail
   and the workspace each scroll inside their own pane, so choosing among 85
   products and reading one in full happens inside a fixed frame. On phones
   there is no split pane to shrink — the rail IS the page, and a selection
   opens a full-height sheet.

   Colour comes entirely from the design tokens. No component here introduces a
   hex value; the maturity tones map onto the FUNCTIONAL palette, which is
   separate from brand and from data, exactly as the design system requires.
   ============================================================ */

/* minmax(0, 1fr) is load-bearing, not decoration. A grid's implicit column is
   `auto`, which resolves to MAX-CONTENT: the five-button mode row measured
   421px, so the single column became 421px inside a 351px container and every
   child inherited that width — 50px of horizontal overflow at 390px that no
   amount of flex min-width on the children could fix, because the column was
   the thing that was too wide. Measured before and after. */
.vike { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }

.ke-state {
  padding: 2.5rem 1rem; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius, 12px);
  color: var(--text-muted); font-size: .9rem;
}
.ke-state[data-tone="error"] { border-style: solid; border-color: var(--danger); color: var(--danger); }

/* ---------- command bar ---------- */
.ke-bar {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between;
}
.ke-search {
  position: relative; flex: 1 1 22rem; display: flex; align-items: center; gap: .55rem;
  padding: 0 .85rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface);
}
.ke-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ke-search svg { width: 17px; height: 17px; color: var(--text-dim); flex: none; }
.ke-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: .68rem 0; font: inherit; font-size: .92rem; color: var(--text);
}
.ke-search input::placeholder { color: var(--text-dim); }

.ke-modes { display: flex; gap: .25rem; padding: .22rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.ke-mode {
  padding: .45rem .85rem; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: .82rem; font-weight: 650; color: var(--text-muted); cursor: pointer;
}
.ke-mode[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.ke-mode:focus-visible, .ke-chip:focus-visible, .ke-row:focus-visible,
.ke-pill:focus-visible, .ke-linkbtn:focus-visible, .ke-back:focus-visible,
.ke-tabs button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---------- active filters ---------- */
.ke-filterbar:empty { display: none; }
.ke-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ke-pill {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 26px;
  padding: .2rem .6rem; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--surface-2); color: var(--accent-text);
  font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer;
}
.ke-linkbtn {
  border: 0; background: none; padding: .2rem; min-height: 26px;
  font: inherit; font-size: .76rem; font-weight: 650; color: var(--text-muted);
  text-decoration: underline; cursor: pointer;
}

/* ---------- split ---------- */
.ke-split {
  display: grid; gap: .9rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}
.ke-rail, .ke-work {
  border: 1px solid var(--border); border-radius: var(--radius, 12px);
  background: var(--surface); min-width: 0;
}
.ke-rail { display: flex; flex-direction: column; max-height: 74vh; }
.ke-count {
  margin: 0; padding: .7rem .9rem; border-bottom: 1px solid var(--border);
  /* Explicit: this pane inherits a mono stack from the page shell otherwise,
     and a result count set in mono reads as debug output. */
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 650; letter-spacing: .02em; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ke-railbody { overflow-y: auto; overscroll-behavior: contain; padding: .4rem; }
.ke-work { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }

.ke-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.ke-row {
  width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .58rem .65rem; border: 1px solid transparent; border-radius: var(--radius-sm, 6px);
  background: transparent; font: inherit; cursor: pointer; color: var(--text);
}
.ke-row:hover { background: var(--surface-2); }
[aria-selected="true"] > .ke-row { background: var(--surface-2); border-color: var(--accent); }
.ke-row-ico { flex: none; color: var(--accent-text); display: inline-flex; }
.ke-row-ico svg { width: 17px; height: 17px; }
.ke-row-main { display: grid; gap: .12rem; min-width: 0; flex: 1; }
.ke-row-main b { font-size: .84rem; line-height: 1.3; }
.ke-row-sub { font-size: .71rem; line-height: 1.35; color: var(--text-dim); }

/* ---------- maturity tones: FUNCTIONAL palette only ---------- */
.ke-tone {
  flex: none; padding: .13rem .5rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: .64rem; font-weight: 700; letter-spacing: .01em; color: var(--text-muted);
  white-space: nowrap;
}
.ke-tone[data-tone="demo"] { border-color: var(--success); color: var(--success); }
.ke-tone[data-tone="config"] { border-color: var(--info); color: var(--info); }
.ke-tone[data-tone="planned"] { border-style: dashed; }
.ke-tone[data-tone="workspace"] { border-color: var(--accent); color: var(--accent-text); }
.ke-tone[data-tone="fmt"] { border-color: var(--border); }

/* ---------- workspace ---------- */
.ke-placeholder, .ke-cockpit { padding: 1.15rem 1.3rem 1.4rem; }
.ke-kicker {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem;
  font-size: .68rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-text);
}
.ke-kicker svg { width: 15px; height: 15px; }
.ke-placeholder h2, .ke-cockpit h2 {
  margin: 0 0 .5rem; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.15;
  letter-spacing: -.02em; color: var(--text);
}
.ke-placeholder h2:focus-visible, .ke-cockpit h2:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.ke-placeholder > p { margin: 0 0 1rem; max-width: 62ch; font-size: .92rem; line-height: 1.6; color: var(--text-muted); }

.ke-counts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0 0 1rem; }
.ke-counts > div { padding: .75rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface-2); }
.ke-counts dt { font-size: 1.5rem; font-weight: 650; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ke-counts dd { margin: .3rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--text-muted); }

.ke-back {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 26px;
  margin: 0 0 .6rem; padding: .15rem .1rem;
  border: 0; background: none; font: inherit; font-size: .76rem; font-weight: 650;
  color: var(--text-muted); cursor: pointer;
}
.ke-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.ke-cockpit-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

.ke-tabs {
  display: flex; gap: .1rem; margin: 1rem 0 0; overflow-x: auto;
  border-bottom: 1px solid var(--border); scrollbar-width: thin;
}
.ke-tabs button {
  flex: none; padding: .5rem .75rem; border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: .8rem; font-weight: 650;
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
}
.ke-tabs button[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.ke-panel { padding-top: 1rem; }
.ke-panel:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

.ke-purpose { margin: 0 0 1rem; font-size: .96rem; line-height: 1.6; color: var(--text); max-width: 66ch; }
.ke-src { display: block; margin-top: .3rem; font-size: .74rem; color: var(--text-dim); }
.ke-lede { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.6; color: var(--text-muted); max-width: 66ch; }

.ke-facts { margin: 0; display: grid; gap: .5rem; }
.ke-facts > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .3rem 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.ke-facts-tight > div { border: 0; padding-bottom: 0; }
.ke-facts dt { font-size: .76rem; font-weight: 650; color: var(--text-muted); }
.ke-facts dd { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text); }
.ke-why { display: block; margin-top: .2rem; font-size: .74rem; color: var(--text-dim); }
.ke-inline {
  border: 0; background: none; padding: 0; font: inherit; font-size: .84rem; font-weight: 650;
  color: var(--accent-text); text-decoration: underline; cursor: pointer;
}

/* A gap is stated, never dressed up as content. */
.ke-gap {
  margin: 0 0 1rem; padding: .8rem .95rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  font-size: .84rem; line-height: 1.6; color: var(--text-muted); max-width: 70ch;
}
.ke-gap b { color: var(--text); }
.ke-note { margin: .8rem 0 0; font-size: .76rem; line-height: 1.6; color: var(--text-dim); max-width: 72ch; }
.ke-note-rule { padding-top: .7rem; border-top: 1px solid var(--border); }
.ke-note b { color: var(--text-muted); }

.ke-fmts { display: flex; flex-wrap: wrap; gap: .35rem; }
.ke-fmt {
  padding: .25rem .6rem; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: .74rem; font-weight: 650; color: var(--text);
}

.ke-demo { padding: .95rem 1.05rem; border: 1px solid var(--success); border-radius: var(--radius-sm, 6px); background: var(--surface-2); margin-bottom: 1rem; }
.ke-demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .45rem; }
.ke-demo-head b { font-size: .95rem; }
.ke-demo > p { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.55; color: var(--text-muted); }

.ke-rel { margin: 0 0 1.2rem; }
.ke-rel h3 { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .5rem; font-size: .84rem; color: var(--text); }
.ke-rel h3 em { font-style: normal; font-size: .72rem; font-weight: 650; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ke-chiprow { display: flex; flex-wrap: wrap; gap: .35rem; }
.ke-chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 28px;
  padding: .25rem .65rem; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); font: inherit; font-size: .76rem; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.ke-chip:hover { border-color: var(--accent); }
.ke-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ke-chip-static { cursor: default; color: var(--text-muted); }
.ke-chip-static:hover { border-color: var(--border-strong); }
.ke-chip em { font-style: normal; font-size: .68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.ke-qs { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.ke-qs li { font-size: .86rem; line-height: 1.55; color: var(--text); }

.ke-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.ke-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ke-empty { padding: 1.6rem 1rem; text-align: center; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- phone: the rail IS the page, the workspace is a sheet ---------- */
@media (max-width: 900px) {
  /* A flex item's min-width is auto, so the search box (flex-basis 22rem) and
     the five-button mode row both refused to shrink below their content and
     pushed the whole shell 50px past a 390px viewport. Measured, then fixed at
     the source rather than by hiding the overflow. */
  .ke-bar { flex-direction: column; align-items: stretch; }
  .ke-search { flex: 1 1 auto; min-width: 0; }
  .ke-search input { min-width: 0; }
  .ke-modes { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .ke-mode { flex: none; }
  .ke-split { grid-template-columns: 1fr; min-width: 0; }
  .ke-rail { max-height: none; min-width: 0; }
  .ke-railbody { overflow: visible; }
  .ke-work {
    position: fixed; inset: 0; z-index: 60;
    max-height: none; height: 100dvh; border-radius: 0; border: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%); transition: transform .22s ease;
    visibility: hidden;
  }
  .vike[data-open="true"] .ke-work { transform: none; visibility: visible; box-shadow: 0 -18px 50px rgba(0,0,0,.28); }
  .vike[data-open="true"] .ke-rail { display: none; }
  .ke-back { position: sticky; top: 0; z-index: 2; width: 100%; padding: .55rem 0; background: var(--surface); }
  .ke-facts > div { grid-template-columns: 1fr; }
  .ke-modes { width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ke-work { transition: none !important; }
}

/* ---------- page header above the application ---------- */
.ke-head { max-width: var(--content-wide, 1280px); margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) 5vw .6rem; }
.ke-head h1 {
  max-width: 24ch; margin: .5rem 0 .7rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.03em;
  /* Same rule as the homepage brand line: balance would split a compound to
     even the lines out. Greedy wrapping keeps the phrase whole. */
  text-wrap: wrap; hyphens: none;
}
.ke-head p { max-width: 68ch; margin: 0; font-size: 1rem; line-height: 1.65; color: var(--text-muted); }
.vike { max-width: var(--content-wide, 1280px); margin: 0 auto; padding: 0 5vw clamp(2.5rem, 5vw, 4rem); }

/* ---------- configurator: a mode, taking the whole workspace ---------- */
.vike[data-mode="configure"] .ke-rail { display: none; }
.vike[data-mode="configure"] .ke-split { grid-template-columns: 1fr; }
/* The product filters do not apply to the configurator, which selects on its
   own axes. Leaving a stale filter pill visible here says they do. */
.vike[data-mode="configure"] .ke-filterbar { display: none; }
.kec { padding: 1.15rem 1.3rem 1.4rem; }
.kec-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.kec-set { min-width: 0; margin: 0; padding: .85rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface-2); }
.kec-set legend {
  padding: 0 .35rem; font-size: .74rem; font-weight: 750; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-text);
}
.kec-partial {
  margin-left: .4rem; padding: .1rem .4rem; border: 1px dashed var(--border-strong); border-radius: 999px;
  font-size: .6rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text-dim);
}
.kec-out { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.kec-count { margin: 0 0 1rem; font-size: .92rem; color: var(--text); }
.kec-count b { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.kec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.kec-row {
  width: 100%; display: grid; gap: .2rem; text-align: left;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); font: inherit; cursor: pointer; color: var(--text);
}
.kec-row:hover { border-color: var(--accent); }
.kec-row:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kec-row b { font-size: .82rem; line-height: 1.3; }
.kec-row .ke-tone { justify-self: start; }
.kec-why { font-size: .7rem; line-height: 1.4; color: var(--text-dim); }

/* Incremental rail: the remainder is one button away and the total is printed,
   so nothing is hidden — this is paging, not truncation. */
.ke-more {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin: .5rem 0 .2rem; padding: .5rem .65rem 0; border-top: 1px solid var(--border);
}
.ke-more span { font-size: .71rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Screen-reader-only text. Defined here rather than assumed: this page loads
   style.css and vi-ke.css but NOT components.css, so the global
   .visually-hidden utility is unavailable and an unstyled helper span rendered
   its label visibly inside the filter pill. */
.ke-sr {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Reserve the workspace height before the app paints. Measured CLS was 0.1431
   because the single-line loading state was replaced by a full split pane —
   a shift the visitor sees as the page jumping under their cursor. */
.vike:not([data-ready]) { min-height: 70vh; }
.vike:not([data-ready]) .ke-state { min-height: 60vh; display: grid; place-content: center; }
.ke-loading { margin: 0 0 1rem; font-size: .84rem; color: var(--text-muted); }