/* Keepa knowledge base.
 *
 * ADDITIVE ONLY. Nothing here redefines a class that styles.css already
 * styles, and no token is redeclared. Every colour comes from the variables
 * in styles.css, so the corporate identity stays in one place.
 *
 * Load order is styles.css then this file.
 */

/* ---------------------------------------------------------------
   Shared, small additions the site did not have yet.
   --------------------------------------------------------------- */

/* styles.css sets the text colour on body and never sets a background, so
   every page on this site currently paints near white text onto the browser
   default white. Verified by rendering index.html. This rule fixes it for the
   pages that load this file. The real fix is one line in styles.css, on body,
   and it belongs there rather than here. Flagged to Ian on 2026-08-23. */
body { background: var(--page); }
section[id], .k-hero { scroll-margin-top: 118px; }

.k-narrow { max-width: 760px; }
.k-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Body copy inside the knowledge base. The site had no paragraph rhythm
   outside the landing page, so it is set here rather than globally. */
.k-prose p { color: var(--dust); font-size: 16px; line-height: 1.65; margin: 0 0 16px; }
.k-prose p:last-child { margin-bottom: 0; }
.k-prose strong { color: var(--wax); font-weight: 700; }
.k-prose em { color: var(--amber); font-style: normal; }
.k-prose .sci { font-style: italic; }

/* ---------------------------------------------------------------
   The hero.
   --------------------------------------------------------------- */

.k-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.k-hero .wrap { position: relative; z-index: 1; padding-top: 62px; padding-bottom: 62px; }
.k-hero h1 { font-size: clamp(40px, 7vw, 76px); letter-spacing: -2.5px; line-height: 0.98; }
.k-hero .lede { font-size: 19px; max-width: 640px; }

.k-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.k-hero-art svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------
   The number strip. Reads as one line of evidence, not as cards.
   --------------------------------------------------------------- */

.k-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.k-num { background: var(--card); padding: 22px 20px; }
.k-num b {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--amber);
}
.k-num b .u { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--dust); }
.k-num span {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--dust);
}

/* ---------------------------------------------------------------
   Chapter index.
   --------------------------------------------------------------- */

.k-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.k-chapter {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  color: inherit;
}
.k-chapter:hover { border-color: var(--amber); color: inherit; }
.k-chapter .no { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--amber); }
.k-chapter h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; margin: 8px 0 6px; color: var(--wax); }
.k-chapter p { font-size: 13.5px; color: var(--dust); line-height: 1.5; margin: 0; }

/* ---------------------------------------------------------------
   Figures. Every diagram on this page is inline SVG in a figure.
   --------------------------------------------------------------- */

.k-figure {
  margin: 30px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.k-figure-art { padding: 20px; overflow-x: auto; }
.k-figure-art svg { width: 100%; height: auto; display: block; min-width: 460px; }
.k-figure figcaption {
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--dust);
  line-height: 1.55;
}
.k-figure figcaption b { color: var(--wax); }
.k-figure figcaption .src { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* SVG house style. Amber is the subject, grey is context. */
.k-svg { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.k-svg .subject { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-svg .ctx { fill: none; stroke: var(--dust); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
.k-svg .fine { fill: none; stroke: var(--muted); stroke-width: 0.75; }
.k-svg .fillamber { fill: var(--amber); stroke: none; }
.k-svg .fillctx { fill: var(--dust); stroke: none; opacity: 0.25; }
.k-svg .lead { stroke: var(--muted); stroke-width: 0.75; fill: none; }
.k-svg .body { fill: var(--amber); fill-opacity: 0.10; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; }
.k-svg .limb { fill: none; stroke: var(--dust); stroke-width: 2.6; opacity: 1; stroke-linejoin: round; stroke-linecap: round; }
.k-svg .wingf { fill: var(--dust); fill-opacity: 0.08; stroke: var(--dust); stroke-opacity: 0.6; stroke-width: 1.25; stroke-linejoin: round; }
.k-svg .dot { fill: var(--amber); }
.k-svg text { fill: var(--dust); font-size: 12px; font-weight: 600; }
.k-svg text.key { fill: var(--wax); font-weight: 700; }
.k-svg text.big { fill: var(--amber); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.k-svg text.tiny { fill: var(--muted); font-size: 10.5px; font-weight: 600; }

/* Hoverable anatomy callouts. */
.k-hot { cursor: pointer; }
.k-hot circle { transition: r 0.12s ease; }
.k-hot:hover circle, .k-hot.on circle { r: 6; }
.k-hot:hover text, .k-hot.on text { fill: var(--amber); }
.k-readout {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
  min-height: 78px;
  background: var(--surface);
}
.k-readout b { display: block; color: var(--amber); font-size: 14px; margin-bottom: 4px; }
.k-readout span { font-size: 13.5px; color: var(--dust); line-height: 1.55; }

/* ---------------------------------------------------------------
   Controls used by the dance decoder and the vision toggle.
   --------------------------------------------------------------- */

.k-controls {
  display: grid;
  gap: 18px;
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.k-control label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 10px;
}
.k-control label b { color: var(--amber); letter-spacing: 0; font-size: 14px; text-transform: none; }
.k-control input[type='range'] { width: 100%; accent-color: var(--amber); height: 20px; }

.k-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.k-toggle button {
  background: var(--card);
  border: 0;
  color: var(--dust);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 18px;
  cursor: pointer;
}
.k-toggle button[aria-pressed='true'] { background: var(--amber); color: var(--card); }

/* ---------------------------------------------------------------
   Data tables. The site had no table styling at all.
   --------------------------------------------------------------- */

.k-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
table.k-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.k-table th, .k-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.k-table thead th {
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--dust);
  white-space: nowrap;
}
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr:hover td { background: var(--surface); }
.k-table td:first-child { color: var(--wax); font-weight: 700; }
.k-table td .sci { font-style: italic; }
.k-table .num { color: var(--amber); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------
   The fact deck.
   --------------------------------------------------------------- */

.k-deckbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.k-search {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--wax);
  font-family: inherit;
  font-size: 15px;
}
.k-search:focus { outline: none; border-color: var(--amber); }
.k-search::placeholder { color: var(--muted); }

.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.k-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--dust);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 15px;
  cursor: pointer;
}
.k-chip:hover { border-color: var(--border-strong); color: var(--wax); }
.k-chip[aria-pressed='true'] { background: var(--amber); border-color: var(--amber); color: var(--card); }

.k-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.k-fact {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
}
.k-fact:hover { border-color: var(--border-strong); }
.k-fact.starred { border-color: rgba(255, 193, 7, 0.4); }
.k-fact .k-fact-theme {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.k-fact.starred .k-fact-theme { color: var(--amber); }
.k-fact h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--wax);
  margin: 10px 0 10px;
}
.k-fact p { font-size: 14px; color: var(--dust); line-height: 1.6; margin: 0 0 16px; }
.k-fact .k-fact-src { margin-top: auto; font-size: 12px; }
.k-fact .k-fact-src a { color: var(--muted); }
.k-fact .k-fact-src a:hover { color: var(--amber); }
.k-fact .id { float: right; font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: 0.6px; }

.k-count { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.k-empty { color: var(--dust); font-size: 15px; padding: 30px 0; }

/* ---------------------------------------------------------------
   Myths.
   --------------------------------------------------------------- */

.k-myth {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 12px 32px;
}
.k-myth:last-child { border-bottom: 1px solid var(--border); }
.k-myth .claim { font-size: 15.5px; font-weight: 700; color: var(--wax); }
.k-myth .claim::before {
  content: 'Myth';
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--danger);
  margin-bottom: 6px;
}
.k-myth .truth { font-size: 14.5px; color: var(--dust); line-height: 1.6; }
.k-myth .truth::before {
  content: 'Actually';
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}
.k-myth .truth a { color: var(--muted); font-size: 12px; }
.k-myth .truth a:hover { color: var(--amber); }

/* ---------------------------------------------------------------
   Glossary.
   --------------------------------------------------------------- */

.k-glossary { columns: 2 320px; column-gap: 36px; }
.k-term { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--border); }
.k-term b { display: block; font-size: 15px; color: var(--wax); font-weight: 800; margin-bottom: 4px; }
.k-term b .sci { font-style: italic; }
.k-term span { font-size: 13.5px; color: var(--dust); line-height: 1.55; }
.k-term span .sci { font-style: italic; }

/* ---------------------------------------------------------------
   Pull quote and the closing tie back to the product.
   --------------------------------------------------------------- */

.k-pull {
  border-left: 2px solid var(--amber);
  padding: 6px 0 6px 24px;
  margin: 34px 0;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.3;
  color: var(--wax);
  max-width: 760px;
}
.k-pull span { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

.k-jump {
  position: sticky;
  top: 61px;
  z-index: 9;
  background: var(--page);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.k-jump::-webkit-scrollbar { display: none; }
.k-jump ul { display: flex; gap: 22px; list-style: none; padding: 12px 18px; margin: 0 auto; max-width: 1100px; }
.k-jump a {
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.k-jump a:hover { color: var(--amber); }
.k-jump a.on { color: var(--amber); border-bottom-color: var(--amber); }

/* ---------------------------------------------------------------
   Phones.
   --------------------------------------------------------------- */

@media (max-width: 700px) {
  .k-myth { grid-template-columns: 1fr; gap: 10px; }
  .k-glossary { columns: 1; }
  .k-jump { top: 0; }
}

#sense-sweep { transform-origin: 470px 310px; animation: k-sweep 9s linear infinite; }
@keyframes k-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #sense-sweep { animation: none; }
  .k-hot circle { transition: none; }
  .k-anim { animation: none !important; }
}