/* =========================================================================
   gaps.css — /knowledge-base/what-we-dont-know. Layers on hub.css + kb.css.
   Prefix: gap-. Shared field vocabulary with wont-sell.css (page B) so the two
   sibling pages read as one surface.

   READABILITY PASS. This page is 54 entries of dense prose, so the type does
   all the work: one measure (~62ch), 17px body at a 1.7 rhythm, and a card that
   sits LIGHTER than the page rather than receding into it. Field labels were
   grey micro-caps and disappeared — they are now sentence-case, near-white, and
   carry a 2px rule whose colour is the only thing distinguishing the two field
   types. Colour never carries meaning alone: the words are always there too.
   ========================================================================= */

/* ---- legend ---- */
.gap-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);margin-top:var(--sp-7)}
.gap-legend__k{font-family:var(--font-heading);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--fg-on-dark-1);margin-bottom:var(--sp-3)}
.gap-legend p{color:var(--fg-on-dark-2);font-size:15px;line-height:1.65;text-wrap:pretty;margin:0;max-width:46ch}

/* ---- page notes ---- */
.gap-note{margin-top:var(--sp-7);color:var(--fg-on-dark-2);font-size:15px;line-height:1.7;text-wrap:pretty;max-width:64ch}
.gap-note--wide{max-width:68ch;font-size:16px}
.gap-note a,.gap-legend a{color:var(--accent-hover);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.gap-note a:hover{border-bottom-color:var(--accent-hover)}

/* ---- family heading ---- */
.gap-family__name{font-family:var(--font-heading);font-size:clamp(23px,2.4vw,31px);font-weight:600;line-height:1.18;letter-spacing:-.015em;margin:0;color:var(--fg-on-dark-1)}
.gap-family__why{margin:var(--sp-4) 0 0;max-width:66ch;color:var(--fg-on-dark-2);font-size:16px;line-height:1.68;text-wrap:pretty}
.gap-family__meta{margin:var(--sp-4) 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.gap-family__n{color:var(--accent-hover)}

/* ---- entries ---- */
.gap-entries{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-8)}
.gap-entry{
  padding:var(--sp-7) var(--sp-8);
  border-radius:var(--r-xl);
  /* LIGHTER than it was (.055 → .10 at the top). The card should feel like a
     raised sheet, which is also what makes the prose inside it legible. */
  background:linear-gradient(165deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.028) 100%);
  border:1px solid rgba(255,255,255,.13);
  transition:background .18s ease,border-color .18s ease;
}
.gap-entry:hover{background:linear-gradient(165deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.06) 48%,rgba(255,255,255,.035) 100%);border-color:rgba(255,255,255,.2)}
.gap-entry__head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);padding-bottom:var(--sp-5);border-bottom:1px solid rgba(255,255,255,.1)}
.gap-entry__name{font-family:var(--font-heading);font-size:21px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:var(--fg-on-dark-1);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.gap-entry__name:hover{color:var(--accent-hover)}
.gap-entry__grade{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--fg-on-dark-1)}
.gap-entry__class{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-on-dark-3)}
.gap-entry__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-6)}

/* ---- the two fields ---- */
.gap-field{padding-left:var(--sp-5);border-left:2px solid rgba(255,255,255,.16)}
.gap-field:last-child{border-left-color:rgba(var(--glow-rgb),.55)}
.gap-field__label{font-family:var(--font-heading);font-size:13.5px;font-weight:600;letter-spacing:.005em;color:var(--fg-on-dark-1);margin-bottom:var(--sp-3)}
.gap-field__text{margin:0;color:var(--fg-on-dark-2);font-size:16.5px;line-height:1.7;letter-spacing:-.003em;text-wrap:pretty;max-width:58ch}
.gap-field__text--none{color:var(--fg-on-dark-3);font-style:italic;font-size:15px}
.gap-field--empty{opacity:1}

@media(max-width:980px){
  .gap-legend{grid-template-columns:1fr;gap:var(--sp-6)}
  .gap-entry__fields{grid-template-columns:1fr;gap:var(--sp-8)}
}
@media(max-width:640px){
  .gap-entry{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-lg)}
  .gap-entry__head{gap:var(--sp-2) var(--sp-3)}
  .gap-entry__name{font-size:19px}
  .gap-entry__class{margin-left:0;flex-basis:100%}
  .gap-field{padding-left:var(--sp-4)}
  .gap-field__text{font-size:16px;line-height:1.68;max-width:none}
  .gap-family__why,.gap-note{font-size:15.5px}
}

/* The calibration line. Set apart from the standfirst because it is a reading
   instruction, not a continuation of it — a low grade on this page is a statement
   about the evidence base, never a verdict on the molecule. */
.gap-hero__calibration{ margin-top:var(--sp-3); padding-left:var(--sp-3); border-left:2px solid var(--rule-on-dark); color:var(--fg-on-dark-2); }