/* =========================================================================
   kb.css, Knowledge Base feature styles (spec §13). Layers on top of hub.css.
   Cool-only surfaces, token-driven (re-skin safe). Prefixes: cn- (canon),
   kb- (index tiles + status strip), grade- (how-we-grade methodology page).
   ========================================================================= */

/* ===================== THE CANON BLOCK (in drawer / monograph) ===================== */
.cn-block{ margin-top:var(--sp-2); }
.cn-disclaimer{ display:flex; gap:var(--sp-3); align-items:flex-start; margin:var(--sp-5) 0 var(--sp-6);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); background:rgba(255,255,255,.03);
  border:1px solid var(--border-on-dark); font-family:var(--font-body); font-weight:300; font-size:var(--fs-12);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-3); }
.cn-disclaimer b{ color:var(--fg-on-dark-2); font-weight:500; }
.cn-disclaimer__mk{ flex-shrink:0; color:var(--accent-hover); margin-top:1px; }

.cn-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.cn-ref{ display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-4); align-items:start;
  padding:var(--sp-5) var(--sp-6); border-radius:var(--r-md); background:rgba(255,255,255,.025);
  border:1px solid var(--border-on-dark); transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.cn-ref:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.04); }
.cn-ref__icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent-hover); border:1px solid var(--border-on-dark); }
.cn-ref__body{ min-width:0; }
.cn-ref__type{ font-family:var(--font-heading); font-weight:600; font-size:9px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-hover); }
.cn-ref__title{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-14); color:var(--fg-on-dark-1);
  line-height:var(--lh-snug); margin:3px 0 0; }
.cn-ref__meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--fg-on-dark-3); margin-top:var(--sp-2); }
.cn-ref__why{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-2) 0 0; max-width:64ch; }
.cn-ref__go{ align-self:center; color:var(--fg-on-dark-3); transition:color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.cn-ref:hover .cn-ref__go{ color:var(--accent-hover); transform:translateX(3px); }
.cn-ref__checked{ font-family:var(--font-mono); font-size:9px; color:var(--fg-on-dark-3); letter-spacing:.03em; }
@media(max-width:560px){
  .cn-ref{ grid-template-columns:auto 1fr; }
  .cn-ref__go{ display:none; }
}

/* ===================== L2, "CAN YOU ACTUALLY GET IT" STATUS STRIP ===================== */
.kb-status{ display:flex; align-items:flex-start; gap:var(--sp-4); margin-top:var(--sp-6);
  padding:var(--sp-5) var(--sp-6); border-radius:var(--r-md); background:var(--bg-dark-card); border:1px solid var(--border-on-dark); }
.kb-status__dot{ width:13px; height:13px; border-radius:var(--r-pill); flex-shrink:0; margin-top:4px; }
.kb-status__dot--green{ background:var(--status-success); box-shadow:0 0 8px rgba(79,181,138,.7); }
.kb-status__dot--yellow{ background:var(--status-warning); box-shadow:0 0 8px rgba(212,162,74,.7); }
.kb-status__dot--red{ background:var(--status-danger); box-shadow:0 0 8px rgba(226,106,106,.7); }
.kb-status__body{ flex:1; min-width:0; }
.kb-status__line{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-1); margin:0; }
.kb-status__crumbs{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-3); }
.kb-status__crumb{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--accent-hover); display:inline-flex; align-items:center; gap:var(--sp-1); }
.kb-status__crumb:hover{ color:var(--fg-on-dark-1); }

/* ===================== L4, "FOR THE TECHNICAL READER" register ===================== */
.hub-exp--tech .hub-exp__btn{ font-family:var(--font-mono); font-size:var(--fs-13); letter-spacing:.02em; color:var(--fg-on-dark-2); }
.hub-exp--tech .hub-exp__btn::before{ content:"⌗"; margin-right:var(--sp-3); color:var(--accent-hover); font-size:14px; }
.hub-exp--tech.is-open .hub-exp__body{ max-height:1400px; }
.hub-contra{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark); }
.hub-contra__h{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); }
.hub-contra__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-2) 0 0; }

/* ===================== KB INDEX, entry tiles (canon + methodology) ===================== */
.kb-entries{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); max-width:1280px; margin:0 auto; padding:0 var(--sp-12) var(--sp-12); }
.kb-entry{ position:relative; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-10);
  border-radius:var(--r-lg); background:var(--bg-dark-card); border:1px solid var(--border-on-dark); overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.kb-entry:hover{ border-color:rgba(var(--glow-rgb),.45); transform:translateY(-3px); }
.kb-entry__icon{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--accent-hover); border:1px solid var(--border-on-dark); }
.kb-entry__eyebrow{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover); }
.kb-entry__t{ font-family:var(--font-heading); font-weight:300; font-size:var(--fs-28); color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin:0; }
.kb-entry__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; max-width:48ch; }
.kb-entry__go{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--accent-hover); display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); }
.kb-entry__go span{ transition:transform var(--dur-base) var(--ease-out); }
.kb-entry:hover .kb-entry__go span{ transform:translateX(4px); }
@media(max-width:760px){ .kb-entries{ grid-template-columns:1fr; } }

/* ===================== /peptides/canon, THE MASTER LIBRARY ===================== */
.cn-page{ max-width:1100px; margin:0 auto; padding:var(--sp-12); }
.cn-toolbar{ position:sticky; top:var(--nam-nav-h,0px); z-index:30; background:color-mix(in srgb, var(--bg-dark) 92%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--border-on-dark); margin:0 calc(-1 * var(--sp-12)); padding:var(--sp-5) var(--sp-12); }
.cn-toolbar__inner{ display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; max-width:1100px; margin:0 auto; }
.cn-count{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-3); margin-left:auto; }
.cn-section{ margin-top:var(--sp-12); }
.cn-section__head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border-on-dark); }
.cn-section__icon{ color:var(--accent-hover); display:inline-flex; }
.cn-section__t{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24); color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin:0; }
.cn-section__blurb{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); color:var(--fg-on-dark-3); margin-left:auto; max-width:42ch; text-align:right; }
.cn-empty{ font-family:var(--font-body); font-weight:300; color:var(--fg-on-dark-3); padding:var(--sp-10); text-align:center; }
@media(max-width:640px){ .cn-section__blurb{ display:none; } .cn-toolbar{ position:static; margin:0; padding:var(--sp-4) 0; } }

/* ===================== /peptides/how-we-grade, METHODOLOGY / E-E-A-T ===================== */
.grade-page{ max-width:840px; margin:0 auto; padding:var(--sp-16) var(--sp-12) var(--sp-24); }
.grade-back{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading); font-weight:500;
  font-size:var(--fs-13); color:var(--fg-on-dark-3); margin-bottom:var(--sp-10); transition:color var(--dur-base); }
.grade-back:hover{ color:var(--fg-on-dark-1); }
.grade-hero{ border-bottom:1px solid var(--border-on-dark); padding-bottom:var(--sp-10); }
.grade-hero__title{ font-family:var(--font-heading); font-weight:200; font-size:clamp(40px,5.5vw,68px); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); color:var(--fg-on-dark-1); margin:var(--sp-3) 0 0; }
.grade-hero__sub{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-20); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-5) 0 0; max-width:60ch; }
.grade-sec{ margin-top:var(--sp-14); }
.grade-sec__h{ font-family:var(--font-heading); font-weight:400; font-size:var(--fs-24); color:var(--fg-on-dark-1); letter-spacing:var(--tracking-tight); margin:0 0 var(--sp-5); }
.grade-sec__p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0 0 var(--sp-4); max-width:68ch; }
.grade-sec__p .nam-em{ color:var(--fg-on-dark-1); }
/* the A–E scale */
.grade-scale{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-6); }
.grade-row{ display:grid; grid-template-columns:64px 1fr; gap:var(--sp-5); align-items:center; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark); }
.grade-letter{ font-family:var(--font-heading); font-weight:200; font-size:var(--fs-40); line-height:1; text-align:center; color:var(--fg-on-dark-1); }
.grade-row--a .grade-letter{ color:var(--status-success); }
.grade-row--b .grade-letter{ color:var(--status-success); }
.grade-row--c .grade-letter{ color:var(--status-warning); }
.grade-row--d .grade-letter{ color:var(--status-warning); }
.grade-row--e .grade-letter{ color:var(--status-danger); }
.grade-row__t{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.grade-row__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:var(--sp-1) 0 0; }
/* the two-signal callout */
.grade-twosig{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-top:var(--sp-6); }
.grade-sig{ padding:var(--sp-6); border-radius:var(--r-md); border:1px solid var(--border-on-dark); background:var(--bg-dark-card); }
.grade-sig__k{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-hover); }
.grade-sig__t{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-18); color:var(--fg-on-dark-1); margin:var(--sp-2) 0 var(--sp-2); }
.grade-sig__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; }
.grade-dots{ display:flex; gap:var(--sp-4); margin-top:var(--sp-4); }
.grade-dots__item{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-body); font-size:var(--fs-13); color:var(--fg-on-dark-2); }
@media(max-width:560px){ .grade-page{ padding:var(--sp-10) var(--sp-6) var(--sp-16); } .grade-twosig{ grid-template-columns:1fr; } }
/* Cornerstone KB pages (Compendium §3.2–3.4) */
.kb-callout{ border:1px solid var(--accent); border-radius:var(--radius-lg,14px); background:rgba(255,255,255,0.02);
  padding:var(--sp-8); margin:var(--sp-6) 0; }
.kb-callout__k{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-12); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-hover); margin-bottom:var(--sp-3); }
.kb-callout__p{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16); line-height:var(--lh-relaxed); color:var(--fg-on-dark-1); margin:0; }
.kb-table{ width:100%; border-collapse:collapse; margin:var(--sp-6) 0 0; }
.kb-table th, .kb-table td{ text-align:left; vertical-align:top; padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border-on-dark); font-family:var(--font-body); font-weight:300; font-size:var(--fs-14);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.kb-table th{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-12); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--fg-on-dark-3); }
.kb-table td b{ color:var(--fg-on-dark-1); font-weight:500; }
.kb-list{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-4); }
.kb-list li{ position:relative; padding-left:var(--sp-7); font-family:var(--font-body); font-weight:300; font-size:var(--fs-16);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.kb-list li::before{ content:""; position:absolute; left:0; top:0.6em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.kb-list li b{ color:var(--fg-on-dark-1); font-weight:500; }

/* =========================================================================
   KB · WORLD-CLASS COLOR + DEPTH PASS  (v2)
   Loaded after hub.css, so these win on shared selectors via source order.
   Status palette as RGB triplets for glows:
     success 79,181,138 · warning 212,162,74 · danger 226,106,106
   ========================================================================= */

/* ---- HERO · a quiet aurora behind the headline (KB-scoped) ---- */
[data-screen-label="Knowledge Base"] .hub-hero{
  background:
    radial-gradient(120% 90% at 18% -10%, rgba(var(--glow-rgb),.20), transparent 55%),
    radial-gradient(80% 70% at 100% 0%, rgba(var(--glow-rgb),.10), transparent 60%),
    var(--bg-dark);
}
[data-screen-label="Knowledge Base"] .nam-eyebrow--accent{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:6px 14px; border-radius:var(--r-pill);
  background:rgba(var(--glow-rgb),.10); border:1px solid rgba(var(--glow-rgb),.28);
  color:var(--accent-hover); box-shadow:0 0 24px rgba(var(--glow-rgb),.18) inset;
}
[data-screen-label="Knowledge Base"] .nam-eyebrow--accent::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent-hover); box-shadow:0 0 8px var(--accent-hover);
}

/* ---- BROWSE-BY-GOAL · gradient cards, glowing icon wells ---- */
.kb-goals{ gap:var(--sp-5); }
.kb-goal{
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.014) 50%, rgba(255,255,255,.008) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.kb-goal::after{
  content:""; position:absolute; inset:auto auto 100% -10%; width:70%; height:120%;
  background:radial-gradient(circle at 30% 80%, rgba(var(--glow-rgb),.22), transparent 70%);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out); z-index:-1; pointer-events:none;
}
.kb-goal:hover{
  transform:translateY(-4px); border-color:rgba(var(--glow-rgb),.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px rgba(0,0,0,.4);
}
.kb-goal:hover::after{ opacity:1; }
.kb-goal__icon{
  background:linear-gradient(160deg, rgba(var(--glow-rgb),.24), rgba(var(--glow-rgb),.05));
  border:1px solid rgba(var(--glow-rgb),.32); color:var(--accent-hover);
  box-shadow:0 0 22px rgba(var(--glow-rgb),.22), inset 0 1px 0 rgba(255,255,255,.12);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kb-goal:hover .kb-goal__icon{ box-shadow:0 0 30px rgba(var(--glow-rgb),.42), inset 0 1px 0 rgba(255,255,255,.16); transform:translateY(-1px); }
.kb-goal__mols{ color:var(--fg-on-dark-2); opacity:.82; }
.kb-goal__filter{
  padding:6px 13px; border-radius:var(--r-pill);
  background:rgba(var(--glow-rgb),.10); border:1px solid rgba(var(--glow-rgb),.26);
  color:var(--accent-hover); transition:background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}
.kb-goal__filter:hover{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:var(--glow-sm); }

/* ---- PEPTIDE CARDS · the centerpiece. Verdict-tinted, layered, alive ---- */
.hub-cards{ gap:var(--sp-5); }
.hub-card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:var(--sp-8);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.016) 48%, rgba(255,255,255,.009) 100%);
  border:1px solid var(--border-on-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  gap:var(--sp-3);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* verdict → accent variables drive the whole card's color story */
.hub-card[data-verdict="green"]{  --cv:var(--status-success); --cv-rgb:79,181,138; }
.hub-card[data-verdict="yellow"]{ --cv:var(--status-warning); --cv-rgb:212,162,74; }
.hub-card[data-verdict="red"]{    --cv:var(--status-danger);  --cv-rgb:226,106,106; }
.hub-card{ --cv:var(--accent-hover); --cv-rgb:var(--glow-rgb); }
/* top accent hairline, color-coded */
.hub-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cv), transparent);
  opacity:.5; transition:opacity var(--dur-base) var(--ease-out);
}
/* corner aura on hover */
.hub-card::after{
  content:""; position:absolute; inset:-45% -25% auto auto; width:65%; height:90%;
  background:radial-gradient(circle, rgba(var(--cv-rgb),.18), transparent 70%);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out); z-index:-1; pointer-events:none;
}
.hub-card:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--cv-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--cv-rgb),.16);
}
.hub-card:hover::before{ opacity:1; }
.hub-card:hover::after{ opacity:1; }
.hub-card__top{ align-items:flex-start; }
.hub-card__cat{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-on-dark-3); margin-top:calc(-1 * var(--sp-1)); }
.hub-card__what{ margin-top:var(--sp-1); }
.hub-card__foot{ margin-top:auto; }
.hub-card__open{ display:inline-flex; align-items:center; gap:6px; color:var(--accent-hover); }
.kb-arrow{ transition:transform var(--dur-base) var(--ease-out); }
.hub-card:hover .kb-arrow{ transform:translateX(4px); }

/* color-coded evidence-grade chip (A/B green · C/D amber · E red) */
.kb-grade{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-heading); font-weight:700; font-size:var(--fs-14); line-height:1;
  padding:6px 10px 6px 9px; border-radius:var(--r-sm); border:1px solid;
}
.kb-grade__k{ font-size:9.5px; font-weight:600; letter-spacing:var(--tracking-wider); text-transform:uppercase; opacity:.82; }

/* ---- PROGRESSIVE EXPLORER · goal-as-button, class tiles, drill-in, show-more ---- */
.kb-goal--btn{ cursor:pointer; width:100%; text-align:left; font:inherit; color:inherit; appearance:none; -webkit-appearance:none; }
.kb-goal__count{ margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--border-on-dark);
  font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--accent-hover); display:inline-flex; align-items:center; gap:6px; }
.kb-goal--btn:hover .kb-goal__count span{ display:inline-block; transform:translateX(4px); transition:transform var(--dur-base) var(--ease-out); }

.kb-classes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(248px,1fr)); gap:var(--sp-4); }
.kb-classtile{ position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-6) var(--sp-5);
  cursor:pointer; text-align:left; appearance:none; -webkit-appearance:none;
  border-radius:var(--r-md); background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.kb-classtile:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.045); transform:translateY(-3px); }
.kb-classtile__count{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-24); line-height:1; color:var(--accent-hover); }
.kb-classtile__name{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-16); color:var(--fg-on-dark-1); line-height:1.25; }
.kb-classtile__ex{ font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--fg-on-dark-3); line-height:1.5; margin-top:auto; }

.kb-drill{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.kb-back{ cursor:pointer; appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.03);
  border:1px solid var(--border-on-dark); border-radius:var(--r-pill); padding:7px 15px;
  font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:.04em; color:var(--fg-on-dark-2);
  display:inline-flex; align-items:center; gap:7px; transition:color var(--dur-base), border-color var(--dur-base), background var(--dur-base); }
.kb-back:hover{ color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.06); }

.kb-more{ display:flex; justify-content:center; margin-top:var(--sp-6); }
.kb-more__btn{ cursor:pointer; appearance:none; -webkit-appearance:none; background:rgba(var(--glow-rgb),.08);
  border:1px solid rgba(var(--glow-rgb),.26); border-radius:var(--r-pill); padding:9px 20px;
  font-family:var(--font-heading); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-hover);
  display:inline-flex; align-items:center; gap:8px; transition:background var(--dur-base), border-color var(--dur-base); }
.kb-more__btn:hover{ background:rgba(var(--glow-rgb),.16); border-color:rgba(var(--glow-rgb),.5); }

.kb-search__clear{ cursor:pointer; appearance:none; -webkit-appearance:none; background:none; border:none; color:var(--fg-on-dark-3);
  font-size:13px; line-height:1; padding:2px 4px; transition:color var(--dur-base); }
.kb-search__clear:hover{ color:var(--fg-on-dark-1); }
.kb-grade[data-g="A"], .kb-grade[data-g="B"]{ color:var(--status-success); background:rgba(79,181,138,.14); border-color:rgba(79,181,138,.42); }
.kb-grade[data-g="C"], .kb-grade[data-g="D"]{ color:var(--status-warning); background:rgba(212,162,74,.14); border-color:rgba(212,162,74,.42); }
.kb-grade[data-g="E"]{ color:var(--status-danger); background:rgba(226,106,106,.14); border-color:rgba(226,106,106,.42); }

/* verdict pill (dot + plain-English word) replaces the lone dot */
.kb-vpill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--cv); }
.kb-vpill__dot{ width:9px; height:9px; border-radius:50%; background:var(--cv); box-shadow:0 0 9px var(--cv); flex-shrink:0; }

/* ---- ENTRY TILES (Canon · How-we-grade) · premium callouts ---- */
.kb-entry{
  background:linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.016) 55%, rgba(255,255,255,.009) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.kb-entry::after{
  content:""; position:absolute; inset:auto -15% -55% auto; width:75%; height:120%;
  background:radial-gradient(circle at 70% 30%, rgba(var(--glow-rgb),.20), transparent 68%);
  opacity:.5; transition:opacity var(--dur-base) var(--ease-out); z-index:-1; pointer-events:none;
}
.kb-entry:hover{
  border-color:rgba(var(--glow-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.45);
}
.kb-entry:hover::after{ opacity:1; }
.kb-entry__icon{
  background:linear-gradient(160deg, rgba(var(--glow-rgb),.24), rgba(var(--glow-rgb),.05));
  border:1px solid rgba(var(--glow-rgb),.32); color:var(--accent-hover);
  box-shadow:0 0 26px rgba(var(--glow-rgb),.24), inset 0 1px 0 rgba(255,255,255,.12);
  transition:box-shadow var(--dur-base) var(--ease-out);
}
.kb-entry:hover .kb-entry__icon{ box-shadow:0 0 36px rgba(var(--glow-rgb),.44), inset 0 1px 0 rgba(255,255,255,.16); }

/* ---- STATUS STRIP · stronger verdict-tinted surface ---- */
.kb-status{ border-radius:var(--r-lg); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.kb-status:has(.kb-status__dot--green){  background:linear-gradient(160deg, rgba(79,181,138,.10), rgba(79,181,138,.02)); border-color:rgba(79,181,138,.30); }
.kb-status:has(.kb-status__dot--yellow){ background:linear-gradient(160deg, rgba(212,162,74,.10), rgba(212,162,74,.02)); border-color:rgba(212,162,74,.30); }
.kb-status:has(.kb-status__dot--red){    background:linear-gradient(160deg, rgba(226,106,106,.10), rgba(226,106,106,.02)); border-color:rgba(226,106,106,.30); }

/* =========================================================================
   MONOGRAPH · grouped surface panels (readability pass)
   Pattern: an OPEN hero (page header), then content GROUPED into elevated
   panels that sit clearly above the void. Inside a panel: wells + hairline
   dividers instead of competing borders. Sections that hold their own card
   grids stay "open" so we never nest boxes inside boxes.
   ========================================================================= */
.mono{
  --panel:linear-gradient(168deg,
    color-mix(in srgb, var(--bg-dark-card) 90%, #fff) 0%,
    var(--bg-dark-card) 58%,
    color-mix(in srgb, var(--bg-dark-card) 78%, var(--bg-dark)) 100%);
}

/* ---- HERO · open page header, not a box, with a soft aurora ---- */
.mono__hero{ position:relative; padding-bottom:var(--sp-10); }
.mono__hero::after{
  content:""; position:absolute; inset:-34% -10% auto 26%; height:150%; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 60% at 72% 22%, rgba(var(--glow-rgb),.16), transparent 70%);
}
.mono .hub-l1__pills{ margin-top:var(--sp-8); }

/* ---- CONTENT PANELS ---- */
.mono__sec{
  position:relative; margin-top:var(--sp-6);
  padding:var(--sp-10);
  border-radius:var(--r-xl);
  background:var(--panel);
  border:1px solid var(--border-on-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
/* sections that carry their own card grids: drop panel chrome */
.mono__sec--open{ background:none; border:0; box-shadow:none; padding:0; margin-top:var(--sp-12); }

/* ---- SECTION HEADERS · accent marker + divider ---- */
.mono__h{
  display:flex; align-items:center; gap:var(--sp-3);
  margin:0 0 var(--sp-6); padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--border-on-dark);
}
.mono__h::before{
  content:""; flex-shrink:0; width:4px; height:24px; border-radius:2px;
  background:linear-gradient(var(--accent-hover), var(--accent));
  box-shadow:0 0 12px rgba(var(--glow-rgb),.55);
}
.mono__sec--open .mono__h{ border-bottom:0; padding-bottom:0; margin-bottom:var(--sp-5); }
.mono__sec .mono__p:last-child{ margin-bottom:0; }

/* ---- SNAPSHOT panel internals ---- */
.mono__snapshot .mono__summary{ margin-top:0; }
.mono__snapshot .hub-l2-summary{ font-size:var(--fs-18); color:var(--fg-on-dark-1); }

/* ---- WELLS inside panels (darker recess, hairline rows) ---- */
.mono__spec{ background:rgba(0,0,0,.26); border:1px solid var(--border-on-dark); border-radius:var(--r-md); }
/* legal block dissolves into its panel, the panel is the container now */
.mono__sec .mono__legal{ background:none; border:0; padding:0; }
.mono__unknown{ border-radius:var(--r-lg); }

/* ---- CROSS-LINK & CANON cards adopt the KB card gradient for consistency ---- */
.mono__link, .cn-ref{
  background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.013));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.mono__link:hover, .cn-ref:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.36); }

@media(max-width:560px){ .mono__sec{ padding:var(--sp-6); } }

/* ---- KB INDEX · accent-marker section headers (match the monograph) ---- */
.hub-count__n{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.hub-count__n::before{
  content:""; flex-shrink:0; width:4px; height:19px; border-radius:2px;
  background:linear-gradient(var(--accent-hover), var(--accent));
  box-shadow:0 0 12px rgba(var(--glow-rgb),.55);
}

/* =========================================================================
   .kb-panel, THE STANDARD GROUPING SURFACE (use this going forward)
   Wrap any front-page module (a header + its grid/list/content) in
   <div class="kb-panel nam-reveal"> to lift it into one elevated, grouped
   tray on the void. Header row inside gets a hairline divider; cards/tiles
   placed inside read as floating above the lighter surface. Mirrors the
   monograph .mono__sec panel and the Tracker board, one consistent material.
   ========================================================================= */
.kb-panel{
  position:relative;
  padding:var(--sp-10);
  border-radius:var(--r-xl);
  background:linear-gradient(168deg,
    color-mix(in srgb, var(--bg-dark-card) 90%, #fff) 0%,
    var(--bg-dark-card) 58%,
    color-mix(in srgb, var(--bg-dark-card) 80%, var(--bg-dark)) 100%);
  border:1px solid var(--border-on-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 48px rgba(0,0,0,.28);
}
.kb-panel .hub-count{ margin-bottom:var(--sp-8); padding-bottom:var(--sp-5); border-bottom:1px solid var(--border-on-dark); }
@media(max-width:560px){ .kb-panel{ padding:var(--sp-6); } }

/* =========================================================================
   /peptides/stacks, THE NAMED-STACK LAYER (Appendum_v2 §4)
   ========================================================================= */
.stk-note{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); background:linear-gradient(160deg, rgba(var(--glow-rgb),.10), rgba(var(--glow-rgb),.02));
  border:1px solid rgba(var(--glow-rgb),.28); }
.stk-note__icon{ flex-shrink:0; color:var(--accent-hover); margin-top:2px; }
.stk-note__d{ color:var(--fg-on-dark-2); font-size:var(--fs-14); line-height:1.55; }

.stk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
@media(max-width:880px){ .stk-grid{ grid-template-columns:1fr; } }
.stk-card{
  position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-8); border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.016) 48%, rgba(255,255,255,.009) 100%);
  border:1px solid var(--border-on-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stk-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-hover), transparent); opacity:.45; }
.stk-card:hover{ transform:translateY(-4px); border-color:rgba(var(--glow-rgb),.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--glow-rgb),.14); }
.stk-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.stk-card__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-24); line-height:1.15; color:var(--fg-on-dark-1); }
.stk-buzz{ flex-shrink:0; display:inline-flex; flex-direction:column; align-items:center; line-height:1;
  padding:6px 10px; border-radius:var(--r-sm); background:rgba(var(--glow-rgb),.12); border:1px solid rgba(var(--glow-rgb),.34); }
.stk-buzz__n{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-16); color:var(--accent-hover); }
.stk-buzz__k{ font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-on-dark-3); margin-top:3px; }
.stk-card__meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-on-dark-3); }

.stk-components{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.stk-chip{ position:relative; display:inline-flex; flex-direction:column; gap:1px; padding:7px 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--border-on-dark); text-decoration:none;
  transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.stk-chip:hover{ background:rgba(var(--glow-rgb),.10); border-color:rgba(var(--glow-rgb),.42); }
.stk-chip__plus{ position:absolute; left:-11px; top:50%; transform:translateY(-50%); color:var(--fg-on-dark-3); font-weight:600; }
.stk-chip__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-14); color:var(--fg-on-dark-1); }
.stk-chip__role{ font-family:var(--font-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-on-dark-3); }

.stk-card__tagline{ font-weight:500; color:var(--fg-on-dark-1); }
.stk-card__synergy{ color:var(--fg-on-dark-2); font-size:var(--fs-14); line-height:1.55; }
.stk-evidence{ margin-top:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(212,162,74,.09), rgba(212,162,74,.02)); border:1px solid rgba(212,162,74,.28); }
.stk-evidence__h{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--status-warning); margin-bottom:6px; }
.stk-evidence__d{ color:var(--fg-on-dark-2); font-size:var(--fs-14); line-height:1.5; }
.stk-card__foot{ margin-top:auto; padding-top:var(--sp-3); }
.stk-card__edu{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-on-dark-3); }

/* =========================================================================
   POPULARITY LEADERBOARD, the evidence-vs-buzz gap (Appendum_v2 §7)
   ========================================================================= */
.lb-list{ display:flex; flex-direction:column; gap:var(--sp-1); }
.lb-row{ display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); text-decoration:none;
  border:1px solid transparent; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.lb-row:hover{ background:rgba(255,255,255,.04); border-color:var(--border-on-dark); }
.lb-rank{ font-family:var(--font-mono); font-size:var(--fs-13); color:var(--fg-on-dark-3); text-align:right; }
.lb-name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.lb-name__cls{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-on-dark-3); font-weight:400; }
.lb-gap{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; color:var(--status-warning); background:rgba(212,162,74,.12); border:1px solid rgba(212,162,74,.34); white-space:nowrap; }
.lb-gap[data-gap="none"]{ visibility:hidden; }
.lb-bar{ display:flex; align-items:center; gap:var(--sp-3); min-width:160px; }
.lb-bar__track{ flex:1; height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.lb-bar__fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent-hover) 70%, transparent), var(--accent-hover)); }
.lb-bar__n{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-12); color:var(--accent-hover); min-width:62px; text-align:right; letter-spacing:.01em; }
.lb-grade{ font-family:var(--font-mono); font-size:var(--fs-12); font-weight:600; width:18px; text-align:center; border-radius:4px; }
.lb-grade[data-g="A"], .lb-grade[data-g="B"]{ color:var(--status-success); }
.lb-grade[data-g="C"], .lb-grade[data-g="D"], .lb-grade[data-g="E"]{ color:var(--status-warning); }
@media(max-width:640px){ .lb-row{ grid-template-columns:26px 1fr auto; } .lb-bar{ display:none; } }

/* =========================================================================
   EXPLORER RESTRUCTURE (IA §3 + Content §4): lens rows + faceted filter bar,
   stack-verdict line, how-we-grade callout, quiz CTA, compliance line,
   and the Export-config affordance (this page doesn't load peptides.css).
   ========================================================================= */

/* lens + facet controls stack inside the one sticky bar */
.kb-controls{ max-width:1280px; margin:0 auto; padding:var(--sp-4) var(--sp-12);
  display:flex; flex-direction:column; gap:var(--sp-3); }
.kb-lensrow{ display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap; }
.kb-lensrow__sec{ padding-left:var(--sp-5); border-left:1px solid var(--border-on-dark); }
.hub-chip--sm{ font-size:10px; padding:6px 11px; opacity:.92; }
@media(max-width:980px){ .kb-controls{ padding:var(--sp-4) var(--sp-6); } .kb-lensrow__sec{ padding-left:0; border-left:0; } }
/* Phones: control bar wraps into a tall stack — give it room, bigger tap targets,
   and let the whole bar scroll rather than pinning (matches .hub-filter). */
@media(max-width:640px){
  .kb-controls{ gap:var(--sp-4); }
  .kb-lensrow{ gap:var(--sp-3) var(--sp-4); }
  .kb-lensrow .hub-chip,
  .kb-lensrow .hub-chip--sm{ padding:9px 14px; font-size:12px; }
  .kb-facet__sel{ padding:10px 32px 10px 14px; }
  .kb-facets__reset{ padding:9px 15px; }
}

/* faceted filter bar, applies within any molecule lens */
.kb-facets{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding-top:var(--sp-3); border-top:1px solid var(--border-on-dark); }
.kb-facet{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.kb-facet__k{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--fg-on-dark-3); }
.kb-facet__sel{ appearance:none; -webkit-appearance:none; cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-13); color:var(--fg-on-dark-1);
  background:rgba(255,255,255,.04); border:1px solid var(--border-on-dark); border-radius:var(--r-pill);
  padding:7px 30px 7px 13px; transition:border-color var(--dur-base), background var(--dur-base);
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-on-dark-3) 50%),linear-gradient(135deg,var(--fg-on-dark-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.kb-facet__sel:hover{ border-color:var(--border-on-dark-strong); background-color:rgba(255,255,255,.06); }
.kb-facet__sel:focus{ outline:none; border-color:rgba(var(--glow-rgb),.5); }
.kb-facet__sel option{ background:var(--bg-dark-elev); color:var(--fg-on-dark-1); }
.kb-facets__count{ font-family:var(--font-mono); font-size:var(--fs-12); color:var(--fg-on-dark-2); margin-left:auto; }
.kb-facets__reset{ cursor:pointer; appearance:none; background:none; border:1px solid var(--border-on-dark);
  border-radius:var(--r-pill); padding:6px 13px; font-family:var(--font-heading); font-weight:600; font-size:10px;
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-2);
  transition:color var(--dur-base), border-color var(--dur-base); }
.kb-facets__reset:hover{ color:var(--fg-on-dark-1); border-color:var(--border-on-dark-strong); }
@media(max-width:880px){ .kb-facets__count{ margin-left:0; } }

.kb-empty{ font-family:var(--font-body); font-weight:300; color:var(--fg-on-dark-3); text-align:center; padding:var(--sp-12); }

/* stack card: verdict pill colour follows the stack verdict; the "only as available" line */
.stk-card[data-verdict="green"] .kb-vpill{ --cv:var(--status-success); }
.stk-card[data-verdict="yellow"] .kb-vpill{ --cv:var(--status-warning); }
.stk-card[data-verdict="red"] .kb-vpill{ --cv:var(--status-danger); }
.stk-onlyas{ display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-1);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--fg-on-dark-3); }
.stk-onlyas__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.stk-onlyas__dot[data-v="yellow"]{ background:var(--status-warning); box-shadow:0 0 8px rgba(212,162,74,.7); }
.stk-onlyas__dot[data-v="red"]{ background:var(--status-danger); box-shadow:0 0 8px rgba(226,106,106,.7); }

/* shared section wrapper for the closing blocks */
.kb-section{ max-width:1280px; margin:0 auto; padding:0 var(--sp-12); }
@media(max-width:760px){ .kb-section{ padding:0 var(--sp-6); } }

/* how-we-grade callout */
.kb-gradecallout{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap;
  margin-top:var(--sp-8); padding:var(--sp-7) var(--sp-9); border-radius:var(--r-lg); text-decoration:none;
  background:linear-gradient(160deg, rgba(var(--glow-rgb),.10), rgba(var(--glow-rgb),.02));
  border:1px solid rgba(var(--glow-rgb),.28); transition:border-color var(--dur-base), transform var(--dur-base); }
.kb-gradecallout:hover{ border-color:rgba(var(--glow-rgb),.5); transform:translateY(-2px); }
.kb-gradecallout__body{ display:flex; flex-direction:column; gap:var(--sp-1); }
.kb-gradecallout__q{ font-family:var(--font-edit); font-style:italic; font-size:var(--fs-20); color:var(--fg-on-dark-1); }
.kb-gradecallout__a{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); color:var(--fg-on-dark-2); }
.kb-gradecallout__cta{ flex-shrink:0; font-family:var(--font-heading); font-weight:600; font-size:11px;
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--accent-hover);
  display:inline-flex; align-items:center; gap:var(--sp-2); }
.kb-gradecallout:hover .kb-gradecallout__cta span{ transform:translateX(4px); transition:transform var(--dur-base); display:inline-block; }

/* quiz soft CTA */
.kb-quiz{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); flex-wrap:wrap;
  margin-top:var(--sp-12); padding:var(--sp-10); border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--bg-dark-card), color-mix(in srgb, var(--bg-dark-card) 80%, var(--accent) 20%));
  border:1px solid var(--border-on-dark); box-shadow:var(--glow-sm); }
.kb-quiz__t{ font-family:var(--font-heading); font-weight:300; font-size:clamp(24px,2.4vw,32px); letter-spacing:var(--tracking-tight);
  color:var(--fg-on-dark-1); margin:var(--sp-3) 0 0; }
.kb-quiz__d{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-16); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-3) 0 0; max-width:60ch; }
.kb-compliance{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-3); text-align:center; max-width:80ch; margin:var(--sp-10) auto var(--sp-16); }

/* Export-config affordance (mirrors the lobby; kb.css carries it for this page) */
.pep-export{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:80;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--fg-on-dark-2);
  background:rgba(5,14,37,.86); backdrop-filter:blur(12px);
  border:1px solid var(--border-on-dark-strong); border-radius:var(--r-pill); padding:9px 16px;
  box-shadow:var(--glow-sm); cursor:pointer;
  transition:border-color var(--dur-fast), color var(--dur-fast); }
.pep-export:hover{ color:var(--fg-on-dark-1); border-color:rgba(var(--glow-rgb),.55); }
.pep-export__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:var(--gold-glow-sm); }
.pep-cfg{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:var(--sp-6); }
.pep-cfg__veil{ position:absolute; inset:0; background:rgba(1,9,29,.74); backdrop-filter:blur(4px); }
.pep-cfg__panel{ position:relative; width:min(760px,100%); max-height:86vh; display:flex; flex-direction:column;
  background:var(--bg-dark-card); border:1px solid var(--border-on-dark-strong); border-radius:var(--r-xl);
  box-shadow:var(--glow-md),var(--shadow-4); padding:var(--sp-8); }
.pep-cfg__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.pep-cfg__h{ font-family:var(--font-heading); font-weight:300; font-size:var(--fs-24); color:var(--fg-on-dark-1);
  margin:var(--sp-2) 0 0; letter-spacing:var(--tracking-tight); }
.pep-cfg__close{ flex-shrink:0; color:var(--fg-on-dark-3); padding:6px; border-radius:var(--r-sm); cursor:pointer;
  background:none; border:none; transition:color var(--dur-fast), background var(--dur-fast); }
.pep-cfg__close:hover{ color:var(--fg-on-dark-1); background:rgba(255,255,255,.05); }
.pep-cfg__note{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:var(--sp-4) 0 var(--sp-5); max-width:64ch; }
.pep-cfg__note code{ font-family:var(--font-mono); font-size:11px; color:var(--accent-hover); }
.pep-cfg__ta{ flex:1; min-height:280px; resize:vertical; width:100%;
  font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--fg-on-dark-1);
  background:var(--bg-dark); border:1px solid var(--border-on-dark); border-radius:var(--r-md);
  padding:var(--sp-5); white-space:pre; overflow:auto; }
.pep-cfg__actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
@media(max-width:560px){ .pep-cfg__panel{ padding:var(--sp-6); } }

/* =========================================================================
   STACK MONOGRAPH TEMPLATE (Content Spec §5), wolverine-stack.html + clones.
   Layers on the monograph .mono__* surfaces; adds the stack-specific furniture.
   ========================================================================= */

/* breadcrumb trio, Status → Learn → Get it */
.stkm-trio{ display:flex; align-items:stretch; gap:var(--sp-2); flex-wrap:wrap; margin:var(--sp-6) 0; }
.stkm-trio__node{ display:flex; flex-direction:column; gap:2px; text-decoration:none;
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-md); background:rgba(255,255,255,.025);
  border:1px solid var(--border-on-dark); transition:border-color var(--dur-base), background var(--dur-base); min-width:120px; }
.stkm-trio__node:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.045); }
.stkm-trio__node.is-current{ border-color:rgba(var(--glow-rgb),.45); background:rgba(var(--glow-rgb),.08); }
.stkm-trio__k{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent-hover); }
.stkm-trio__q{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); color:var(--fg-on-dark-2); }
.stkm-trio__node.is-current .stkm-trio__q{ color:var(--fg-on-dark-1); }
.stkm-trio__sep{ align-self:center; color:var(--fg-on-dark-3); }

/* identity */
.stkm__hero-kicker{ font-weight:200; color:var(--fg-on-dark-3); }
.stkm__oneliner{ max-width:64ch; }
.stkm-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-7); }
.stkm-chip{ position:relative; display:flex; align-items:center; gap:var(--sp-3); text-decoration:none;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); background:var(--bg-dark-card);
  border:1px solid var(--border-on-dark); transition:border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base); }
.stkm-chip:hover{ border-color:rgba(var(--glow-rgb),.45); transform:translateY(-2px); box-shadow:var(--glow-sm); }
.stkm-chip__plus{ position:absolute; left:-13px; top:50%; transform:translateY(-50%); color:var(--fg-on-dark-3); font-weight:600; font-size:var(--fs-16); }
.stkm-chip__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-18); color:var(--fg-on-dark-1); }
.stkm-chip__sig{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.stkm-chip__grade{ font-family:var(--font-mono); font-weight:600; font-size:11px; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid; }
.stkm-chip__grade[data-g="A"], .stkm-chip__grade[data-g="B"]{ color:var(--status-success); background:rgba(79,181,138,.14); border-color:rgba(79,181,138,.42); }
.stkm-chip__grade[data-g="C"], .stkm-chip__grade[data-g="D"]{ color:var(--status-warning); background:rgba(212,162,74,.14); border-color:rgba(212,162,74,.42); }
.stkm-chip__grade[data-g="E"]{ color:var(--status-danger); background:rgba(226,106,106,.14); border-color:rgba(226,106,106,.42); }
.stkm__reviewed{ font-family:var(--font-mono); font-size:11px; color:var(--fg-on-dark-3); margin-top:var(--sp-5); }
.stkm__verdictnote{ font-family:var(--font-body); font-weight:400; font-size:var(--fs-14); color:var(--fg-on-dark-2);
  margin:var(--sp-3) 0 0; padding-left:var(--sp-4); border-left:2px solid var(--accent); max-width:64ch; }

.stkm-verdict{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--font-heading);
  font-weight:600; font-size:11px; letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-on-dark-2); }

/* Block 2, the honest answer: the two-up gets the strongest visual weight */
.stkm__answer{ border-color:var(--border-on-dark-strong); }
.stkm__answer-lead{ font-size:var(--fs-20); color:var(--fg-on-dark-1); line-height:var(--lh-relaxed); max-width:72ch; }
.stkm-twoup{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); margin-top:var(--sp-7); }
@media(max-width:760px){ .stkm-twoup{ grid-template-columns:1fr; } }
.stkm-twoup__card{ padding:var(--sp-8); border-radius:var(--r-lg); border:1px solid; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.stkm-twoup__card--shows{ background:linear-gradient(165deg, rgba(79,181,138,.12), rgba(79,181,138,.02)); border-color:rgba(79,181,138,.34); }
.stkm-twoup__card--not{ background:linear-gradient(165deg, rgba(226,106,106,.12), rgba(226,106,106,.02)); border-color:rgba(226,106,106,.34); }
.stkm-twoup__h{ display:flex; align-items:center; gap:var(--sp-3); font-family:var(--font-heading); font-weight:600;
  font-size:var(--fs-16); color:var(--fg-on-dark-1); margin-bottom:var(--sp-4); }
.stkm-twoup__h em{ font-style:italic; }
.stkm-twoup__mk{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0;
  border-radius:var(--r-pill); font-size:13px; font-weight:700; }
.stkm-twoup__card--shows .stkm-twoup__mk{ background:rgba(79,181,138,.2); color:var(--status-success); }
.stkm-twoup__card--not .stkm-twoup__mk{ background:rgba(226,106,106,.2); color:var(--status-danger); }
.stkm-twoup__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.stkm-twoup__list li{ position:relative; padding-left:var(--sp-5); font-family:var(--font-body); font-weight:300;
  font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.stkm-twoup__list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; }
.stkm-twoup__card--shows li::before{ background:var(--status-success); }
.stkm-twoup__card--not li::before{ background:var(--status-danger); }

/* Block 3·4·5, the L3 "Go deeper" taps */
.stkm-exp.is-open .hub-exp__body{ max-height:2400px; }
.stkm-exp__title{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.stkm-exp__sub{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-12); color:var(--fg-on-dark-3); }
.stkm-firewall{ display:flex; gap:var(--sp-3); align-items:flex-start; margin-top:var(--sp-5);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); background:linear-gradient(160deg, rgba(212,162,74,.10), rgba(212,162,74,.02));
  border:1px solid rgba(212,162,74,.30); font-family:var(--font-body); font-weight:300; font-size:var(--fs-13);
  line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); }
.stkm-firewall__mk{ flex-shrink:0; color:var(--status-warning); }

/* Block 4, members (the internal-link engine) */
.stkm-members{ display:flex; flex-direction:column; gap:var(--sp-3); }
.stkm-member{ display:grid; grid-template-columns:auto auto auto 1fr auto; gap:var(--sp-4); align-items:center;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); text-decoration:none;
  background:rgba(255,255,255,.025); border:1px solid var(--border-on-dark);
  transition:border-color var(--dur-base), background var(--dur-base); }
.stkm-member:hover{ border-color:var(--border-on-dark-strong); background:rgba(255,255,255,.045); }
.stkm-member__name{ font-family:var(--font-heading); font-weight:600; font-size:var(--fs-16); color:var(--fg-on-dark-1); }
.stkm-member__grade{ font-family:var(--font-mono); font-weight:600; font-size:10px; letter-spacing:.04em; padding:3px 8px;
  border-radius:var(--r-sm); border:1px solid; }
.stkm-member__grade[data-g="A"], .stkm-member__grade[data-g="B"]{ color:var(--status-success); background:rgba(79,181,138,.12); border-color:rgba(79,181,138,.38); }
.stkm-member__grade[data-g="C"], .stkm-member__grade[data-g="D"]{ color:var(--status-warning); background:rgba(212,162,74,.12); border-color:rgba(212,162,74,.38); }
.stkm-member__grade[data-g="E"]{ color:var(--status-danger); background:rgba(226,106,106,.12); border-color:rgba(226,106,106,.38); }
.stkm-member__role{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); color:var(--fg-on-dark-2); }
.stkm-member__go{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--accent-hover); white-space:nowrap; }
@media(max-width:680px){ .stkm-member{ grid-template-columns:1fr auto; row-gap:var(--sp-2); }
  .stkm-member__role{ grid-column:1 / -1; } .stkm-member__go{ grid-column:1 / -1; } }

/* Block 5, comparison table */
.stkm-cmp__note{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-14); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-2); margin:0 0 var(--sp-4); max-width:72ch; }
.stkm-cmp__members{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:var(--fg-on-dark-3); margin-top:3px; }

/* Block 6, status & access */
.stkm__statusstrip{ margin-top:0; }
.stkm__signals{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.stkm__pill{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; color:var(--fg-on-dark-1);
  padding:4px 11px; border-radius:var(--r-pill); background:rgba(var(--glow-rgb),.10); border:1px solid rgba(var(--glow-rgb),.30); }
.stkm__furniture{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-13); line-height:var(--lh-relaxed);
  color:var(--fg-on-dark-3); margin:var(--sp-5) 0 0; max-width:74ch; }
.stkm__furniture b{ color:var(--fg-on-dark-2); font-weight:500; }
.stkm__cta{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }

/* Block 7, FAQ */
.stkm-faqlist{ display:flex; flex-direction:column; gap:var(--sp-2); }
.stkm-faqitem{ padding:var(--sp-6) 0; border-top:1px solid var(--border-on-dark); }
.stkm-faqitem:first-child{ border-top:0; }
.stkm-faqitem__q{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-18); color:var(--fg-on-dark-1); margin:0 0 var(--sp-3); }
.stkm-faqitem__a{ font-family:var(--font-body); font-weight:300; font-size:var(--fs-15); line-height:var(--lh-relaxed); color:var(--fg-on-dark-2); margin:0; max-width:74ch; }

/* Block 8, related */
.stkm-related{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
@media(max-width:760px){ .stkm-related{ grid-template-columns:1fr; } }
.stkm-related__col{ display:flex; flex-direction:column; gap:var(--sp-3); }
.stkm-related__k{ font-family:var(--font-heading); font-weight:600; font-size:10px; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--fg-on-dark-3); }
.stkm-related__link{ font-family:var(--font-heading); font-weight:500; font-size:var(--fs-14); color:var(--accent-hover);
  text-decoration:none; display:inline-flex; align-items:center; gap:var(--sp-2); transition:color var(--dur-base); }
.stkm-related__link:hover{ color:var(--fg-on-dark-1); }

/* the self-contained alert modal */
.stkm-alert__form{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); flex-wrap:wrap; }
.stkm-alert__input{ flex:1; min-width:200px; font-family:var(--font-body); font-size:var(--fs-14); color:var(--fg-on-dark-1);
  background:var(--bg-dark); border:1px solid var(--border-on-dark); border-radius:var(--r-pill); padding:11px 18px; }
.stkm-alert__input::placeholder{ color:var(--fg-on-dark-3); }
.stkm-alert__input:focus{ outline:none; border-color:rgba(var(--glow-rgb),.5); }