/* Finesse Infra knowledge library (2026-09-23; search/scope additions 2026-09-25).
   Scoped to .kl / .kl-* on top of the unchanged site stylesheet (site.css).
   Uses the site tokens only: paper / ink / amber, Inter Tight + Inter. */

.kl-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink-bg); color: var(--paper);
  font-size: 15px; border-radius: var(--radius-sm);
}
.kl-skip:focus { top: 12px; }

.kl p, .kl li, .kl dd { max-width: none; }
.kl a:not(.btn):not(.kl-chip) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.kl a:not(.btn):not(.kl-chip):hover { text-decoration-color: var(--amber-2); color: var(--ink); }

/* ---------- Page head ---------- */
.kl-head { padding-bottom: clamp(40px, 5vw, 80px); }
.kl-head h1 {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  max-width: 22ch;
  margin-top: var(--space-sm);
}
.kl-head--index h1 { font-size: clamp(38px, 6vw, 84px); max-width: 16ch; line-height: 1; }
.kl-head .lead { max-width: 62ch; }
.kl-preview {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 var(--space-md);
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 13px; line-height: 1.4; color: var(--ink-faint);
}
.kl-preview__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-2); flex: none; }
.kl-crumb ol {
  list-style: none; margin: 0 0 var(--space-lg); padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink-faint);
}
.kl-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--ink-faint); }
.kl-crumb [aria-current] { color: var(--ink); }
.kl-crumb a { color: var(--ink-faint); }
.kl-meta { margin: var(--space-md) 0 0; font-size: 15px; color: var(--ink-faint); }
.kl-head__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: var(--space-lg) 0 0; font-size: 16px; font-weight: 600; }
.kl-head__links a { color: var(--ink); }

/* ---------- Guide layout ---------- */
.kl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: clamp(40px, 5vw, 88px) var(--section-space-tight);
}
@media (min-width: 1024px) {
  .kl-layout { grid-template-columns: 220px minmax(0, 760px); column-gap: clamp(48px, 6vw, 120px); }
  .kl-toc { position: sticky; top: calc(var(--header-h-compact) + 32px); align-self: start;
    /* Codex review R3: a long contents list stays within the screen and scrolls itself. */
    max-height: calc(100vh - var(--header-h-compact) - 56px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; padding-right: 6px; scroll-padding-block: 12px; }
}
@media (min-width: 1600px) {
  .kl-layout { grid-template-columns: 240px minmax(0, 800px); }
}
.kl-toc__label { margin: 0 0 var(--space-xs); font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.kl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kl-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink-soft); text-decoration: none !important; }
.kl-toc a:hover { border-left-color: var(--amber-2); color: var(--ink); }
@media (max-width: 1023px) {
  .kl-toc { border-bottom: 1px solid var(--line); padding-bottom: var(--space-md); }
  .kl-toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--space-md); }
}
.kl-article { min-width: 0; }

.kl-qa { border-left: 3px solid var(--amber); padding-left: clamp(18px, 2.4vw, 32px); margin-bottom: var(--space-xl); }
.kl-qa__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--amber-text); }
.kl-question {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.1vw, 27px); line-height: 1.3; letter-spacing: -0.012em;
  color: var(--ink);
}
.kl-answer { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--ink-soft); }

.kl-prose h2 {
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em;
  margin: clamp(48px, 5vw, 72px) 0 var(--space-sm);
  scroll-margin-top: 24px;
}
.kl-prose > p, .kl-prose .kl-practical p, .kl-list-cited li {
  font-size: var(--fs-body-lg); line-height: 1.68; color: var(--ink-soft);
}
.kl-prose > p { margin: 0 0 var(--space-sm); }
.kl-prose sub { font-size: 0.7em; }
.kl-practical {
  margin: var(--space-md) 0;
  padding: 2px 0 2px var(--space-md);
  border-left: 2px solid var(--line-strong);
}
.kl-practical p { margin: 0; }
.kl-practical .kl-practical__label { margin-bottom: 4px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--steel); }
.kl-list-cited { margin: 0 0 var(--space-sm); }

.kl-cite { font-size: 0.75em; line-height: 0; vertical-align: super; margin-left: 1px; }
.kl .kl-cite a {
  display: inline-block; padding: 2px 3px; min-width: 1.4em; text-align: center;
  font-family: var(--font-display); font-weight: 700; color: var(--amber-text);
  text-decoration: none;
}
.kl-cite a::before { content: "["; }
.kl-cite a::after { content: "]"; }
.kl .kl-cite a:hover { color: var(--ink); background: var(--paper-2); }

/* Checklist panel: tinted paper, no outline */
.kl-checklist {
  margin: var(--space-xl) 0;
  padding: var(--card-pad-sm);
  background: var(--paper-2);
  border-radius: var(--radius-sm);
}
.kl-checklist h3 { margin: 0 0 var(--space-sm); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; }
.kl-checklist .check-list li { font-size: 16px; }
.kl-checklist__note { margin: var(--space-sm) 0 0; font-size: 14px; color: var(--ink-faint); }

/* Figures */
.kl-fig { margin: var(--space-xl) 0; }
.kl-fig figcaption { margin-top: var(--space-sm); font-size: 14px; line-height: 1.5; color: var(--ink-faint); max-width: 60ch; }
.kl-fig__svg { width: 100%; max-width: 560px; height: auto; margin-bottom: var(--space-sm); }
.kl-fig__svg * { vector-effect: non-scaling-stroke; }
.kl-fig__svg path, .kl-fig__svg rect, .kl-fig__svg circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kl-fig__svg .kl-fig__thin { stroke-width: 1; stroke: var(--steel); }
.kl-fig__ghost path { stroke: var(--steel); stroke-width: 1; }
.kl-fig__host path:first-child { stroke-width: 2.4; }
.kl-fig__steel rect { fill: var(--paper-2); }
.kl-fig__beam { fill: var(--paper-3) !important; }
.kl-fig__plate { stroke-width: 3.2 !important; }
.kl-fig__defl { stroke: var(--ink-faint) !important; stroke-width: 1.4; stroke-dasharray: 9 3; }  /* 26 Sep: deflected shapes grey, load paths amber (review) */
.kl-fig__load rect { fill: var(--paper); }
.kl-fig__load > path:not(.kl-fig__thin) { stroke: var(--amber-2); }
.kl-fig__wave { stroke: var(--amber-2) !important; }
.kl-fig__stair path { stroke-width: 1.3; }
.kl-fig__tube rect:first-child { stroke-width: 2.2; }
.kl-fig__hole circle { fill: var(--paper); stroke: var(--amber-2); stroke-width: 2; }
.kl-fig__hole path { stroke: var(--paper); stroke-width: 4; }
.kl-fig__hole path.kl-fig__thin { stroke: var(--paper); stroke-width: 3; }
.kl-fig__bath { stroke: var(--steel) !important; stroke-width: 1.2 !important; }
.kl-fig__arrow { stroke: var(--amber-2) !important; }
.kl-fig__lead { stroke: var(--steel) !important; stroke-width: 1 !important; }
.kl-mk circle { fill: var(--ink-bg) !important; stroke: none !important; }
.kl-mk text { fill: var(--paper); font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.kl-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 24px; }
@media (min-width: 600px) { .kl-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kl-legend li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.kl-legend__n {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-bg); color: var(--paper); font-family: var(--font-display); font-size: 12px; font-weight: 700;
  transform: translateY(-1px);
}

/* Flow: vertical sequence with a single datum line */
.kl-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kl-flow li {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-sm);
  padding: 0 0 var(--space-md);
}
.kl-flow li::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: 2px; width: 1px; background: var(--line-strong);
}
.kl-flow li:last-child { padding-bottom: 0; }
.kl-flow li:last-child::before { display: none; }
.kl-flow__n {
  grid-row: span 2; width: 31px; height: 31px; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink);
}
.kl-flow__t { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); padding-top: 4px; }
.kl-flow__d { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
@media (min-width: 1280px) {
  .kl-fig--flow .kl-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-md); }
  .kl-fig--flow .kl-flow li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0; }
  .kl-fig--flow .kl-flow li::before { left: 40px; right: calc(-1 * var(--space-md)); top: 15px; bottom: auto; width: auto; height: 1px; }
  .kl-fig--flow .kl-flow__n { grid-row: auto; }
  .kl-fig--flow .kl-flow__t { padding-top: 0; }
}

/* Notes and related */
.kl-notes, .kl-related { margin-top: clamp(56px, 6vw, 88px); padding-top: var(--space-lg); border-top: 1px solid var(--ink); }
.kl-notes h2, .kl-related h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; margin-bottom: var(--space-sm); scroll-margin-top: 24px; }
.kl-notes__intro { font-size: 15px; line-height: 1.55; color: var(--ink-faint); margin: 0 0 var(--space-md); }
.kl-notes ol { margin: 0; padding-left: 1.6em; display: grid; gap: var(--space-xs); }
.kl-notes li { font-size: 15px; line-height: 1.55; color: var(--ink-soft); scroll-margin-top: 24px; padding: 4px 8px 4px 4px; margin-left: -4px; border-radius: var(--radius-sm); }
.kl-notes li::marker { font-family: var(--font-display); font-weight: 700; color: var(--amber-text); }
.kl-notes li p { margin: 0; overflow-wrap: anywhere; }
.kl-notes li:target { background: var(--paper-2); }
.kl-notes cite { font-style: normal; font-weight: 600; color: var(--ink); }
.kl .kl-back { text-decoration: none; padding: 0 4px; color: var(--amber-text); }
.kl-prose [id]:target { scroll-margin-top: 24px; }
.kl-notes, .kl-related { scroll-margin-top: 24px; }
.kl-related__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 720px) { .kl-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kl-related h3 { font-size: 17px; margin-bottom: var(--space-xs); }
.kl-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kl-related li { font-size: 16px; line-height: 1.45; }
.kl-disclaimer { margin: var(--space-lg) 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-faint); }

/* ---------- Index ---------- */
.kl-browse { padding-block: clamp(48px, 6vw, 96px); scroll-margin-top: var(--header-h-compact); }
.kl-browse__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-lg); }
.kl-browse__head h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; }
.kl-browse__count { margin: 0; font-size: 15px; color: var(--ink-faint); }
.kl-tools { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.kl-tools[hidden] { display: none; }
.kl-search label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.kl-search__row { position: relative; max-width: 640px; }
.kl-search input {
  width: 100%; box-sizing: border-box; height: 54px; padding: 0 84px 0 16px;
  border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--paper);
  font-size: 17px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.kl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kl-search input::placeholder { color: var(--ink-faint); opacity: 1; }
.kl-search input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-btn-text {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.kl-btn-text[hidden] { display: none; }
.kl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* Phones: one scrollable row per filter group, so results are not pushed
   below several screens of chips. */
@media (max-width: 719px) {
  .kl-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .kl-filters .kl-chip { flex: none; }
}
.kl-chip {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; font-size: 15px; line-height: 1; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.kl-chip:hover { border-color: var(--ink); }
.kl-chip[aria-pressed="true"] { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--paper); }
.kl-status { margin: 0; min-height: 1.5em; font-size: 15px; color: var(--ink-faint); }

.kl-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.kl-item { border-top: 1px solid var(--line); }
.kl-item[hidden] { display: none; }
.kl-item article {
  display: grid; gap: 8px 48px; padding: clamp(24px, 3vw, 40px) 0;
}
@media (min-width: 900px) {
  .kl-item article { grid-template-columns: minmax(160px, 3fr) minmax(0, 9fr); }
  .kl-item article > * { grid-column: 2; }
  .kl-item article > .kl-item__topics { grid-column: 1; grid-row: 1 / span 6; padding-top: 6px; }
}
.kl-item__topics { margin: 0; font-size: 14px; font-weight: 600; color: var(--amber-text); }
.kl-item__title { margin: 0; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -0.018em; max-width: 34ch; }
.kl .kl-item__title a { text-decoration: none; }
.kl .kl-item__title a:hover { text-decoration: underline; text-decoration-color: var(--amber-2); text-decoration-thickness: 2px; }
.kl-item__q { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink-soft); max-width: 68ch; }
.kl-item__meta { margin: 0; font-size: 14px; color: var(--ink-faint); }
.kl-empty { padding: var(--space-xl) 0; border-bottom: 1px solid var(--line); }
.kl-empty[hidden] { display: none; }
.kl-empty p { margin: 0 0 var(--space-sm); font-size: 18px; color: var(--ink); }

.kl-band { background: var(--paper-2); padding-block: var(--section-space-tight); }
.kl-how h2, .kl-cta h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; margin-bottom: var(--space-lg); }
.kl-how__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); counter-reset: how; }
@media (min-width: 900px) { .kl-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } }
.kl-how__list li { counter-increment: how; border-top: 3px solid var(--amber); padding-top: var(--space-sm); }
.kl-how__list h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; margin-bottom: 8px; }
.kl-how__list p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.kl-how__more { margin: var(--space-xl) 0 0; }
.kl-cta { display: grid; gap: var(--space-md); padding-block: var(--section-space-tight); align-items: end; }
@media (min-width: 900px) { .kl-cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); } }
.kl-cta h2 { margin-bottom: var(--space-sm); }
.kl-cta p { margin: 0; font-size: var(--fs-body-lg); line-height: 1.6; max-width: 58ch; }
.kl-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sources page ---------- */
.kl-method { padding-block: clamp(40px, 5vw, 88px) var(--section-space-tight); display: grid; gap: clamp(48px, 5vw, 80px); }
.kl-method > section { max-width: 980px; min-width: 0; }
.kl-method h2 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; margin-bottom: var(--space-md); }
.kl-plain { font-size: var(--fs-body-lg); line-height: 1.68; color: var(--ink-soft); max-width: 70ch !important; margin: var(--space-md) 0 0; }
.kl-method .check-list li { max-width: 70ch; }
.kl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); counter-reset: st; }
@media (min-width: 760px) { .kl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); } }
.kl-steps li { counter-increment: st; border-top: 1px solid var(--ink); padding-top: var(--space-sm); }
.kl-steps h3 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.kl-steps h3::before { content: counter(st, decimal-leading-zero) "  "; color: var(--amber-text); font-size: 15px; }
.kl-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.kl-method > .kl-docs { max-width: none; }
.kl-src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 1024px) { .kl-src-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 96px); } }
.kl-src { border-top: 1px solid var(--line-strong); padding: var(--space-lg) 0; min-width: 0; scroll-margin-top: 24px; }
.kl-src__kind { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--amber-text); }
.kl-src h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; margin-bottom: var(--space-sm); }
.kl-src dl { margin: 0; display: grid; gap: 6px; }
.kl-src dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
@media (max-width: 420px) { .kl-src dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.kl-src dt { font-size: 14px; color: var(--ink-faint); }
.kl-src dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.kl-src__note { margin: var(--space-sm) 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-faint); }
.kl-src__uses-h { margin: var(--space-sm) 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.kl-src__uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- Where a guide applies (2026-09-25) ---------- */
.kl-scope {
  margin: var(--space-md) 0 0; padding-top: var(--space-sm);
  border-top: 1px solid var(--line); max-width: 78ch;
  display: grid; gap: 6px;
}
.kl-scope > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 600px) { .kl-scope > div { grid-template-columns: 124px minmax(0, 1fr); gap: 16px; } }
.kl-scope dt { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.kl-scope dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.kl-scope > div:first-child dd { font-weight: 600; color: var(--ink); }
.kl-related__where { display: block; font-size: 13.5px; color: var(--ink-faint); }

.kl-search__help { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-faint); max-width: 640px; }
.kl-filterset { display: grid; gap: 8px; }
.kl-filterset__label { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink-faint); }
.kl-notice {
  margin: 0; max-width: 72ch; padding: 2px 0 2px var(--space-sm);
  border-left: 3px solid var(--amber); font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.kl-notice[hidden] { display: none; }

.kl-item__where { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.kl-item__where-l { font-weight: 600; color: var(--ink); margin-right: 4px; }
.kl-item__hit { margin-top: 4px; padding-left: var(--space-sm); border-left: 2px solid var(--amber); min-width: 0; }
.kl-item__hit p { margin: 0; }
.kl-item__hit p + p { margin-top: 6px; }
.kl-item__hit-h { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.kl-item__kind { font-weight: 400; color: var(--steel); }
.kl-item__hit-t { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; overflow-wrap: anywhere; }
.kl-item__hit mark { background: rgba(226, 162, 59, 0.32); color: var(--ink); padding: 0 1px; border-radius: 2px; }
.kl-item__secs { font-size: 14px; line-height: 1.55; color: var(--ink-faint); }
.kl-item__foreign, .kl-item__note { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--steel); }
/* Passage source and applicability (Codex X1-R1): visible beside the excerpt and under the paragraph */
.kl-item__scope { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--amber-2); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.kl-item__scope-l, .kl-scope__label { font-weight: 600; color: var(--ink); }
.kl-scope { margin: 6px 0 var(--space-md); padding-left: 10px; border-left: 3px solid var(--amber-2); font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
.kl-related-h { margin: var(--space-xl) 0 var(--space-sm); padding: 0; max-width: none; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.kl-list[hidden] { display: none; }
.kl-related-h[hidden], .kl-list--related[hidden] { display: none; }
.kl-empty__title { font-weight: 600; }
.kl-empty .kl-empty__hint { font-size: 16px; color: var(--ink-soft); }
.kl-empty__suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-md); }
.kl-empty__actions { margin: 0 0 var(--space-md) !important; }
.kl-empty .kl-empty__gap { font-size: 14px; line-height: 1.55; color: var(--ink-faint); max-width: 64ch; margin: 0; }

/* Structure families (hub) and coverage page */
.kl-families { padding-block: 0 clamp(48px, 6vw, 96px); }
.kl-families__intro { margin: 0 0 var(--space-lg); padding: 0; max-width: 70ch; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink-soft); }
.kl-fam-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .kl-fam-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); } }
@media (min-width: 1200px) { .kl-fam-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kl-fam { padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kl-fam p { margin: 0; }
.kl-fam__name { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.kl-fam__state { margin-top: 4px !important; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.kl-fam__where { color: var(--ink-faint); }
.kl-fam__none { color: var(--ink-faint); }
.kl-fam--empty .kl-fam__name { font-weight: 400; color: var(--ink-soft); }
.kl-cov { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }
.kl-cov__group h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; margin-bottom: var(--space-xs); }
.kl-cov__qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kl-cov__qs li { font-size: 16px; line-height: 1.5; max-width: 72ch; }
.kl-cov__up li { max-width: 72ch; }
.kl-cov__meta { display: block; font-size: 14px; color: var(--ink-faint); }
.kl-table-wrap { overflow-x: auto; max-width: 100%; }
.kl-table-wrap:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.kl-table th, .kl-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.kl-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-faint); border-bottom-color: var(--ink); }
.kl-table tbody th { font-weight: 600; color: var(--ink); }
.kl-table td { color: var(--ink-soft); }

.kl-fig--table .kl-table { min-width: 560px; }
/* Worked examples (Step / Value / Basis) read as stacked steps on phones
   instead of scrolling sideways. */
@media (max-width: 600px) {
  .kl-fig--table .kl-table.kl-table--steps { min-width: 0; }
  .kl-table--steps thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kl-table--steps tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .kl-table--steps tbody th, .kl-table--steps td { display: block; border: 0; padding: 2px 0; }
  .kl-table--steps td[data-label] { font-size: 14px; color: var(--ink-faint); }
  .kl-table--steps td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
}
.kl-fig--table figcaption { font-weight: 600; color: var(--ink); }
.kl-fig__note { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-faint); max-width: 72ch; }

.kl-questions { margin-top: clamp(56px, 6vw, 88px); padding-top: var(--space-lg); border-top: 1px solid var(--ink); scroll-margin-top: 24px; }
.kl-questions h2 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; margin-bottom: var(--space-sm); }
.kl-questions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kl-questions li { font-size: 16px; line-height: 1.5; }

/* Footer note */
.kl-footer-note { color: var(--paper-50); }

@media print {
  .site-header, .kl-toc, .kl-tools, .site-footer, .kl-preview { display: none !important; }
  .kl-head { padding-top: 0; }
  /* (r7d, 10 Oct, visual agent: with the contents column hidden, the article printed in the 220px column of the
     wide-screen grid; in print it takes the whole width) */
  .kl-layout { grid-template-columns: minmax(0, 1fr) !important; }
  /* (r7d, visual gate: the steps print in full, so the live player and its controls are left out; a close-up card is
     not split across pages) */
  .kl-anim__panel, .kl-anim__more { display: none !important; }
  .kl-detail { break-inside: avoid; }
  .kl-details__h { break-after: avoid; }
}

/* Library pages are anchor-heavy: render every section immediately so note
   and heading jumps land correctly (site.css defers main > section). */
main.kl > section:not(.page-header) { content-visibility: visible; contain-intrinsic-size: none; }
.kl-nw { white-space: nowrap; }
.kl-fig__tube .kl-fig__cell { fill: var(--paper); }
.kl-fig__tube .kl-fig__post { fill: var(--paper-2); }

/* ---------- Hub redesign (D16, D17: 26 Sep 2026) ---------- */
.kl-hero .kl-tools { margin: var(--space-lg) 0 var(--space-md); }
.kl-search--hero .kl-search__row { max-width: 860px; }
.kl-search--hero input {
  height: 68px; padding: 0 96px 0 56px; font-size: clamp(17px, 1.6vw, 20px);
  border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--paper);
  box-shadow: 0 10px 30px rgba(21, 20, 15, 0.08);
}
.kl-search__icon { position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%);
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.kl-search__help { margin: 10px 0 0; font-size: 14px; color: var(--ink-faint); }
/* (r7d, 10 Oct, visual gate: ".kl p" removed the 640px cap, so at 1440 the helper ran past the search field) */
.kl .kl-search__help { max-width: min(100%, 65ch); }
.kl-search__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; max-width: 860px; }
.kl-search__try-l { font-size: 14px; font-weight: 600; color: var(--ink-faint); margin-right: 4px; }
.kl-try {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer;
}
@media (hover: hover) { .kl-try:hover { border-color: var(--amber-2); background: var(--paper-2); } }
@media (hover: none) { .kl-try:active { background: var(--paper-2); } }
.kl-try:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-empty__suggest { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 719px) {
  .kl-search--hero input { height: 58px; padding-left: 48px; }
  .kl-search__icon { left: 14px; width: 20px; height: 20px; }
  .kl-search__try { flex-wrap: wrap; }  /* 26 Sep: wrap, not a sideways scroll (matrix-1 flagged hidden buttons) */
  .kl-try { flex: none; }
}

/* Learning path */
.kl-path { padding-block: clamp(48px, 6vw, 88px) 0; scroll-margin-top: var(--header-h-compact); }
.kl-path[hidden], .kl-types[hidden] { display: none; }
.kl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.kl-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.kl-step__n { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--amber-text); }   /* (r6, visual agent V8: --amber-2 on paper was 2.65:1; large text needs 3:1) */
.kl-step__t { margin: 0 0 6px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; }
.kl-step__why { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 70ch; }
.kl-step__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
@media (min-width: 900px) {
  .kl-step { grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .kl-step__body { display: contents; }
  .kl-step__t { grid-column: 2; }
  .kl-step__why { grid-column: 2; }
  .kl-step__links { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; gap: 6px; }
}

/* Structure types */
.kl-types { padding-block: clamp(48px, 6vw, 88px) 0; scroll-margin-top: var(--header-h-compact); }
.kl-type-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); border: 1px solid var(--line); }
.kl-type { background: var(--paper); padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; min-width: 0; scroll-margin-top: var(--header-h-compact); }
.kl-type--empty { background: var(--paper-2); }
.kl-ico { width: 72px; height: 54px; margin-bottom: 4px; }
.kl-ico__s { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.kl-ico__t { fill: none; stroke: var(--amber-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kl-ico__g { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; stroke-linecap: round; }
.kl-type--empty .kl-ico__t { stroke: var(--ink-faint); }
.kl-type__t { margin: 0; font-size: 18px; line-height: 1.2; }
.kl-type__d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.kl-type__links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.kl-type__more { color: var(--ink-faint); }
.kl-type__none { margin: 4px 0 0; font-size: 14px; color: var(--ink-faint); }
/* Grid children must be allowed to shrink, or the scrolling chip row widens the form on phones. */
.kl-tools, .kl-tools > *, .kl-search { min-width: 0; }
.kl-search__try { max-width: min(100%, 860px); }
.kl-search__try-l { flex: none; }

/* Engineering explanation (D17): our own explanation, labelled as such */
.kl-explain { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--ink); background: var(--paper-2); }
.kl-explain p { margin: 0; }
.kl-explain .kl-explain__label { margin-bottom: 4px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink-faint); text-transform: none; }
/* Reference-structure drawings (D17) */
.kl-fig--ref .kl-fig__svg { max-width: 760px; }
.kl-fig__svg .kl-fig__path { stroke: var(--amber-2); stroke-width: 1.6; stroke-dasharray: 6 5; }
.kl-fig__svg .kl-fig__ground { stroke: var(--steel); stroke-width: 1; }
.kl-fig__svg .kl-fig__soft { fill: var(--paper-2); }
.kl-fig__svg text.kl-fig__lbl { fill: var(--ink-faint); stroke: none; font-family: var(--font-sans); font-size: 12px; }
.kl-fail circle { fill: var(--rust) !important; stroke: none !important; }
.kl-fail text { fill: var(--paper); stroke: none; font-family: var(--font-display); font-size: 12px; font-weight: 700; }
.kl-fig__svg .kl-fig__sway { stroke: var(--steel); stroke-width: 1.2; stroke-dasharray: 2 4; }
.kl-fig__svg .kl-fig__head { stroke-dasharray: none; }

/* Footer icon sprite (production uses an inline style; the demo CSP forbids inline styles) */
.kl-sprite { position: absolute; overflow: hidden; }
/* 26 Sep: phones show the first five try searches so the row stays two or three lines. */
@media (max-width: 479px) { .kl-search__try .kl-try:nth-of-type(n+6) { display: none; } }
/* 26 Sep: a class on a <g> must reach its paths (the generic path rule above
   otherwise wins over inheritance). Found by explained batch A. */
.kl-fig__svg g.kl-fig__arrow > path, .kl-fig__svg g.kl-fig__arrow > line, .kl-fig__svg g.kl-fig__arrow > polyline { stroke: var(--amber-2); }
.kl-fig__svg g.kl-fig__thin > path, .kl-fig__svg g.kl-fig__thin > line { stroke: var(--steel); stroke-width: 1; }
/* 26 Sep: each structure card leads with its "how it works and fails" guide. */
.kl-type__tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--amber-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); vertical-align: 1px; }
/* 26 Sep: the learning path list has its own class. It used .kl-steps, whose
   h3 counter also counted the nested link items (step 02 showed "05").
   The reset applies to the list only; the section keeps .container gutters
   (Codex review R1: an earlier .kl-path reset also hit the section). */
.kl-path__list { list-style: none; margin: 0; padding: 0; }

/* ===== 2026-09-26 visual/search expansion (Codex review R2, R3, R6) ===== */

/* Compact applicability, check date and review status under the title. */
.kl-status { margin: var(--space-sm) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-faint); max-width: 70ch; }
.kl-status > span + span::before { content: "\00B7"; margin: 0 8px; color: var(--ink-faint); }
.kl-status__where { font-weight: 600; color: var(--ink); }
.kl-guide .kl-head { padding-bottom: clamp(20px, 3vw, 40px); }

/* Full code context, source method and status: one click away. */
.kl-scope-more { margin: var(--space-sm) 0 0; max-width: 78ch; border-top: 1px solid var(--line); }
.kl-scope-more > summary { cursor: pointer; list-style: none; padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kl-scope-more > summary::-webkit-details-marker { display: none; }
.kl-scope-more > summary::before { content: "+"; display: inline-block; width: 14px; color: var(--amber-text); font-weight: 700; }
.kl-scope-more[open] > summary::before { content: "\2212"; }
.kl-scope-more__n { font-weight: 400; font-size: 14px; color: var(--ink-faint); }
.kl-scope-more .kl-scope { margin-top: 0; }
.kl-scope-more__link { margin: var(--space-xs) 0 var(--space-sm); font-size: 14.5px; }
.kl-scope-more > summary:focus-visible, .kl-toc__d > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* Contents: sticky list on wide screens, a one-line disclosure on narrow ones. */
.kl-toc__d > summary { list-style: none; cursor: pointer; }
.kl-toc__d > summary::-webkit-details-marker { display: none; }
.kl-toc__n { font-weight: 400; color: var(--ink-faint); }
@media (max-width: 1023px) {
  .kl-toc { border: 1px solid var(--line); border-width: 1px 0; padding: 0; }
  .kl-toc__d > summary.kl-toc__label { margin: 0; padding: 12px 0; font-size: 15px; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
  .kl-toc__d > summary.kl-toc__label .kl-toc__n { margin-right: auto; }
  .kl-toc__d > summary.kl-toc__label::after { content: "Show"; font-weight: 600; color: var(--amber-text); }
  .kl-toc__d[open] > summary.kl-toc__label::after { content: "Hide"; }
  .kl-toc__d[open] > ol { padding-bottom: var(--space-sm); }
}
@media (min-width: 1024px) {
  .kl-toc__d > summary .kl-toc__n { display: none; }
}

/* Figure toolbar: Enlarge (all reference drawings) and animation controls. */
.kl-fig__stage { position: relative; }
.kl-fig__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 var(--space-sm); }
.kl-fig__btn {
  font: 600 14px/1 var(--font-sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer;
}
.kl-fig__btn:hover { border-color: var(--ink); background: var(--paper-2); }
.kl-fig__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-fig__btn--play[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Explanatory animation layers. Live (JavaScript running): [data-on~="k"]
   shows only in step k, [data-dim~="k"] fades in step k. Without JavaScript
   the figure shows its composite view, minus layers marked
   data-composite="hide", which is the reviewed static reference drawing;
   every step is listed as text below it. */
.kl-anim:not(.kl-anim--live) [data-composite="hide"] { display: none; }
.kl-anim--live [data-on] { opacity: 0; transition: opacity 450ms ease-out; }
.kl-anim--live[data-step="0"] [data-on~="0"], .kl-anim--live[data-step="1"] [data-on~="1"], .kl-anim--live[data-step="2"] [data-on~="2"],
.kl-anim--live[data-step="3"] [data-on~="3"], .kl-anim--live[data-step="4"] [data-on~="4"], .kl-anim--live[data-step="5"] [data-on~="5"],
.kl-anim--live[data-step="6"] [data-on~="6"], .kl-anim--live[data-step="7"] [data-on~="7"] { opacity: 1; }
/* a layer inside a hidden parent group stays hidden */
.kl-anim--live [data-on] [data-on] { opacity: 1; }
.kl-anim--live [data-dim] { transition: opacity 450ms ease-out; }
.kl-anim--live[data-step="1"] [data-dim~="1"], .kl-anim--live[data-step="2"] [data-dim~="2"], .kl-anim--live[data-step="3"] [data-dim~="3"],
.kl-anim--live[data-step="4"] [data-dim~="4"], .kl-anim--live[data-step="5"] [data-dim~="5"], .kl-anim--live[data-step="6"] [data-dim~="6"],
.kl-anim--live[data-step="7"] [data-dim~="7"] { opacity: 0.28; }
/* Motion that explains: load arrows press in, the load path flows, a
   schematic deflected shape eases into place. */
@keyframes kl-press { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 5px); } }
@keyframes kl-press-x { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, 0); } }
@keyframes kl-press-up { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -5px); } }
@keyframes kl-flow { to { stroke-dashoffset: -44; } }
/* Motion runs only in a playing, live figure; a paused figure is still. */
.kl-anim--live.kl-anim--playing .kl-a-press { animation: kl-press 1.6s ease-in-out infinite; }
.kl-anim--live.kl-anim--playing .kl-a-press--x { animation-name: kl-press-x; }
.kl-anim--live.kl-anim--playing .kl-a-press--up { animation-name: kl-press-up; }
.kl-anim .kl-a-flow { stroke-dasharray: 7 4; }
.kl-anim--live.kl-anim--playing .kl-a-flow { animation: kl-flow 1.4s linear infinite; }
.kl-anim .kl-a-shape { transition: opacity 600ms ease-out; }
.kl-fig__svg .kl-a-path { stroke: var(--amber-2); stroke-width: 2.2; }
.kl-fig__svg .kl-a-tie { stroke: #2f6f8f; stroke-width: 2.6; }
.kl-fig__svg .kl-a-strut { stroke: var(--rust); stroke-width: 2.6; }
.kl-fig__svg .kl-a-react { stroke: var(--ink); stroke-width: 1.8; }
.kl-fig__svg .kl-a-fill { fill: var(--amber-2); stroke: none; }
.kl-fig__svg text.kl-a-cap { fill: var(--ink); font-weight: 700; }
.kl-fig__svg .kl-a-fail { stroke: var(--rust); stroke-width: 2.2; stroke-dasharray: 3 3; }
.kl-fig__svg text.kl-a-failtxt { fill: var(--rust); font-weight: 700; }
/* The step list is the text alternative and the step index. */
.kl-anim__meta { margin: 6px 0 var(--space-xs); font-size: 14px; line-height: 1.5; color: var(--ink-faint); }
.kl-anim__steps { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: grid; gap: 0; counter-reset: klst; }
.kl-anim__steps > li { counter-increment: klst; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 9px 10px 9px 4px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.kl-anim__steps > li::before { content: counter(klst); grid-row: 1 / span 2; font: 700 15px/1.6 var(--font-display); color: var(--amber-text); text-align: center; }
.kl-anim__steps > li.kl-anim--js::before { content: none; }
.kl-anim__go { grid-row: 1 / span 2; align-self: start; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); font: 700 14px/1 var(--font-display); color: var(--amber-text); cursor: pointer; padding: 0; }
.kl-anim__go:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-anim__steps > li[aria-current="step"] { background: var(--paper-2); }
.kl-anim__steps > li[aria-current="step"] .kl-anim__go { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kl-anim__t { font-weight: 700; color: var(--ink); }
.kl-anim__steps > li.kl-anim__fail .kl-anim__t { color: var(--rust); }
@media (prefers-reduced-motion: reduce) {
  .kl-anim [data-on], .kl-anim [data-dim], .kl-anim .kl-a-shape { transition: none; }
  .kl-anim .kl-a-press, .kl-anim .kl-a-flow, .kl-anim--live.kl-anim--playing .kl-a-press, .kl-anim--live.kl-anim--playing .kl-a-flow { animation: none; }
}

/* Wide tables on phones: a discreet cue that more columns sit to the right. */
.kl-scroll-cue { display: none; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-faint); }
@media (max-width: 759px) { .kl-table-scrolls + .kl-scroll-cue { display: block; } }

/* Guide titles are long (they name the structure and its questions): a phone
   size that keeps them to a few lines without losing the display face. */
@media (max-width: 599px) {
  .kl-guide .kl-head h1 { font-size: clamp(27px, 7.2vw, 34px); line-height: 1.08; max-width: none; }
}

/* The article column follows the head closely on phones: the answer is the point. */
@media (max-width: 1023px) {
  .kl-guide .kl-layout { padding-top: var(--space-sm); gap: var(--space-md); }
}

/* Phones: the question is a compact restatement so the answer follows within the first screens. */
@media (max-width: 599px) {
  .kl-guide .kl-question { font-size: 17px; line-height: 1.45; font-weight: 600; margin-bottom: 14px; }
  .kl-guide .kl-qa { margin-bottom: var(--space-lg); }
}


.kl-toc a[aria-current="location"] { border-left-color: var(--amber-2); color: var(--ink); font-weight: 600; }

/* Highlight of where a response concentrates (for example the haunches). */
.kl-fig__svg .kl-a-hot { fill: rgba(200, 134, 42, 0.16); stroke: var(--amber-2); stroke-width: 1.2; }
.kl-legend__h { margin: var(--space-sm) 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }

/* Search result tiers: direct answers, supporting explanations, related topics. */
.kl-tier-h { margin: var(--space-lg) 0 6px; font-family: var(--font-display); font-size: 19px; line-height: 1.25; color: var(--ink); }
.kl-tier-h[data-kl-direct-h] { margin-top: var(--space-sm); }
.kl-tier-note { margin: 0 0 var(--space-sm); font-size: 14.5px; line-height: 1.5; color: var(--ink-faint); max-width: 70ch; }
.kl-tier-topics { margin-top: var(--space-md); border-top: 1px solid var(--line); }
.kl-tier-toggle { font: 600 14px/1 var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 16px; min-height: 40px; cursor: pointer; margin-bottom: var(--space-sm); }
.kl-tier-toggle:hover { border-color: var(--ink); background: var(--paper-2); }
.kl-tier-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-fig__svg .kl-a-dash { stroke-dasharray: 3 3; }

/* ===== Figure player and enlarged view (usability audit, 26 Sep) ===== */
.kl-anim__panel { display: block; margin: 10px 0 var(--space-sm); }
.kl-anim__strip { display: flex; gap: 4px; margin: 0 0 10px; }
.kl-anim__seg { flex: 1 1 0; height: 22px; padding: 8px 0; border: 0; background: none; cursor: pointer; }
.kl-anim__seg > span { display: block; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden; position: relative; }
.kl-anim__seg.is-done > span { background: var(--ink-faint); }
.kl-anim__seg.is-now > span { background: var(--paper-3); }
.kl-anim__seg.is-now > span::after { content: ""; position: absolute; inset: 0; background: var(--amber-2); }
.kl-anim__seg.is-now.is-run > span::after { transform-origin: left center; animation: kl-fill linear 1 both; animation-duration: inherit; }
.kl-anim__seg > span { animation-duration: 6000ms; }
@keyframes kl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kl-anim__seg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.kl-anim__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kl-anim__ctrl .kl-fig__btn--zoom { margin-left: auto; }
.kl-anim__now { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--amber); background: var(--paper-2); min-height: 5.2em; }
.kl-anim__panel--fail .kl-anim__now { border-left-color: var(--rust); }
.kl-anim__now-h { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.kl-anim__now-c { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.kl-anim__all { margin: 6px 0 var(--space-sm); border-top: 1px solid var(--line); }
.kl-anim__all > summary { cursor: pointer; padding: 10px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.kl-anim__all > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-anim__key { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .kl-anim__seg.is-now.is-run > span::after { animation: none; } }

/* Arrival: the linked passage clears the sticky header and is briefly marked. */
.kl-article [id] { scroll-margin-top: calc(var(--header-h-compact) + 20px); }
.kl-hit { background: rgba(226, 162, 59, 0.22); box-shadow: 0 0 0 6px rgba(226, 162, 59, 0.22); border-radius: 2px; transition: background 1.4s ease-out, box-shadow 1.4s ease-out; }
.kl-hit--fade { background: transparent; box-shadow: 0 0 0 6px transparent; }
@media (prefers-reduced-motion: reduce) { .kl-hit { transition: none; } }
.kl-backlink { margin: 6px 0 0; font-size: 14.5px; }
.kl-backlink a { font-weight: 600; }

/* Enlarged view: opens fitted to the screen, controls pinned below; Zoom in pans. */
html.kl-zoom-open { overflow: hidden; }
.kl-zoom { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.kl-zoom::backdrop { background: rgba(21, 20, 15, 0.6); }
.kl-zoom[open] { display: flex; flex-direction: column; }
.kl-zoom__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.kl-zoom__title { flex: 1 1 auto; min-width: 0; margin: 0; font: 600 14.5px/1.35 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kl-zoom__btn { flex: none; font: 600 14px/1 var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.kl-zoom__close { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kl-zoom__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kl-zoom__hint { display: none; margin: 0; padding: 6px 12px; font-size: 13.5px; color: var(--ink-faint); }
.kl-zoom:not(.kl-zoom--fit) .kl-zoom__hint { display: block; }
.kl-zoom__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; }
.kl-zoom__body:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.kl-zoom__canvas, .kl-zoom__anim { height: 100%; }
.kl-zoom--fit .kl-zoom__body { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kl-zoom--fit .kl-zoom__canvas svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.kl-zoom:not(.kl-zoom--fit) .kl-zoom__canvas svg { display: block; width: max(100%, 900px); height: auto; margin: 0 auto; }
.kl-zoom__foot { flex: none; max-height: 42dvh; overflow: auto; padding: 8px 12px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.kl-zoom__foot .kl-anim__panel { margin: 0; max-width: 900px; margin-inline: auto; }
.kl-zoom__foot .kl-anim__now { min-height: 0; }
.kl-zoom__legend { max-width: 900px; margin: 0 auto; }
@media (max-width: 599px) {
  .kl-zoom__foot .kl-anim__ctrl [data-a="replay"] { display: none; }
  .kl-zoom__foot .kl-anim__now-c { font-size: 14.5px; }
}

/* Search active: the hero steps back, the status sits under the search box. */
.kl-index.kl-searching .kl-hero .lead, .kl-index.kl-searching .kl-hero .kl-search__try,
.kl-index.kl-searching .kl-hero .kl-head__links, .kl-index.kl-searching .kl-hero .eyebrow,
.kl-index.kl-searching .kl-hero .kl-search__help { display: none; }
.kl-index.kl-searching .kl-hero h1 { font-size: clamp(28px, 3.4vw, 44px); }
.kl-index.kl-searching .kl-hero { padding-bottom: var(--space-sm); }
.kl-index [data-kl-status] { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.kl-index.kl-searching .kl-browse { padding-top: var(--space-md); }
/* Result card: match type first, title before topic tags. */
.kl-item__tier { margin: 0 0 6px; display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); background: var(--paper); }
.kl-item__tier[data-tier="direct"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kl-item__tier[data-tier="support"] { border-color: var(--amber-2); color: var(--amber-text); }
/* Stated gap (Codex X2-R1): the guide says the point is not covered; never styled like an answer. */
.kl-item__tier[data-tier="gap"] { border-style: dashed; border-color: var(--steel); color: var(--steel); }
.kl-item[data-match="gap"] .kl-item__hit { border-left-style: dashed; border-left-color: var(--steel); }
.kl-item__gapnote { margin: 6px 0 0; padding-left: 10px; border-left: 3px dashed var(--steel); font-size: 15px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.kl-item__gapnote-l { font-weight: 600; color: var(--ink); }
.kl-item__topics { margin-top: 6px; }

/* Short answer: a plain-language lede, then the cited detail. */
.kl-answer__lede { display: block; margin-bottom: 10px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; font-weight: 500; color: var(--ink); }
/* Desktop guide head: a smaller title so the question and answer start higher. */
@media (min-width: 1024px) {
  .kl-guide .kl-head h1 { font-size: clamp(34px, 3.4vw, 52px); max-width: 26ch; }
  .kl-guide .kl-layout { padding-top: var(--space-lg); }
}

/* Phones: drawings run edge to edge and their labels are set larger, so
   they read at about 12px on a 390px screen (usability audit, 26 Sep; raised
   from 14 to 15 units after Codex A05; 16 units made 54 drawing states collide).
   a label check confirms no label overlaps another or leaves the drawing. */
@media (max-width: 559.98px) {
  .kl-article figure > .kl-fig__stage { width: 100vw; margin-left: calc(50% - 50vw); }
  .kl-fig__svg text.kl-fig__lbl { font-size: 15px; }
  .kl-fail text { font-size: 14px; }  /* failure numbers: about 11px at 390 */
}
@media (max-width: 559.98px) {
  .kl-fig__svg text.kl-fig__lbl { fill: var(--ink-soft); font-weight: 500; }
}

/* Phones: the page title already names the guide, so the breadcrumb stops at
   the library and never wraps a lone separator onto a second line. */
@media (max-width: 559.98px) {
  main:not(.kl-index) .kl-crumb li[aria-current] { display: none; }
}

/* Welds in connection drawings: solid, darker than the plates. */
.kl-fig__svg .kl-fig__weld { fill: var(--ink-soft); stroke: none; }

/* Coverage: structure types per family; rows stack on phones. */
.kl-cov__fam { margin-top: var(--space-lg); }
.kl-cov__fam h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; margin-bottom: var(--space-xs); }
.kl-table--stack { min-width: 680px; }
@media (max-width: 600px) {
  .kl-table.kl-table--stack { min-width: 0; }
  .kl-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kl-table--stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .kl-table--stack tbody th, .kl-table--stack td { display: block; border: 0; padding: 2px 0; }
  .kl-table--stack td[data-label] { font-size: 14.5px; }
  .kl-table--stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-faint); }
}
@media (min-width: 601px) {
  .kl-table--stack { table-layout: fixed; }
  .kl-table--stack th:nth-child(1) { width: 30%; } .kl-table--stack th:nth-child(2) { width: 16%; }
  .kl-table--stack th:nth-child(3) { width: 22%; } .kl-table--stack th:nth-child(4) { width: 17%; }
}

/* Slow connections: with JavaScript available the search box shows at once
   while the search index loads; anything typed is searched when it arrives.
   Without JavaScript the search stays hidden, as it cannot work. */
.kl-js .kl-tools[hidden] { display: block; }
.kl-js .kl-tools[hidden] [data-kl-clear] { visibility: hidden; }
.kl-js .kl-tools[hidden] .kl-search__help::before { content: "Loading the search… "; font-weight: 600; color: var(--ink); }

/* Match-type badge: a small chip above the title, never stretched by the
   grid (UX judge 26 Sep, B1). */
.kl-item article > .kl-item__tier { justify-self: start; align-self: start; width: max-content; max-width: 100%; }
.kl-item__tier:empty { display: none; }

/* While searching: the results come up to the search box (UX judge M4).
   The page title and the list heading stay for screen readers. */
.kl-index.kl-searching .kl-hero h1, .kl-index.kl-searching .kl-browse__head {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.kl-index.kl-searching .kl-hero { padding-top: var(--space-md); }
.kl-index.kl-searching .kl-browse { padding-top: var(--space-sm); }
.kl-index.kl-searching .kl-browse::before { display: none; }
.kl-index.kl-searching [data-kl-notice] { margin-top: 8px; font-size: 14.5px; padding-block: 2px; }
.kl-index.kl-searching .kl-tier-h { margin-top: 0; }
/* Phones: a result's topic tags come after its passage, so the matching
   text is what follows the title. */
@media (max-width: 899.98px) { .kl-item article > .kl-item__topics { order: 10; } }

/* Enlarged view: the drawing is never capped at its inline width, so it is
   at least as large as on the page (UX judge M2). */
.kl-zoom__canvas svg.kl-fig__svg { max-width: none; margin-bottom: 0; }
.kl-zoom__hint--fit { display: none; }
@media (max-width: 559.98px) and (orientation: portrait) {
  .kl-zoom.kl-zoom--fit .kl-zoom__hint--fit { display: block; }
}
/* Player controls: fixed positions, so Play/Pause never moves the other
   buttons (UX judge M3). Previous, Play/Pause, Next; then Replay, Enlarge. */
.kl-anim__ctrl { display: grid; grid-template-columns: auto auto auto auto 1fr; gap: 8px; align-items: center; }
.kl-anim__ctrl .kl-fig__btn--play { min-width: 7.2em; justify-content: center; }
.kl-anim__ctrl .kl-fig__btn--zoom { justify-self: end; margin-left: 0; }
.kl-anim__ctrl [data-a="prev"]:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 559.98px) {
  .kl-anim__ctrl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kl-anim__ctrl .kl-fig__btn { justify-content: center; min-width: 0; padding-inline: 8px; }
  .kl-anim__ctrl [data-a="replay"] { grid-column: 1; grid-row: 2; }
  .kl-anim__ctrl .kl-fig__btn--zoom { grid-column: 2 / 4; grid-row: 2; justify-self: stretch; }
  .kl-anim__w { display: none; }
}

/* Page shortcuts dock (UX judge M5): contents on phones and tablets, and a
   way back to the search results after arriving from one. */
.kl-dock { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; gap: 8px;
  transition: opacity 0.2s ease; }
.kl-dock[hidden] { display: none; }
/* While the reader scrolls down it steps aside, off the text; it returns on scrolling up, at the page end and
   whenever one of its buttons has keyboard focus (post-Codex correction batch 2). It fades where it stands (r6,
   30 Sep): sliding down put it into the call and WhatsApp buttons' band below, where app.js reads it as a control
   under them and keeps them hidden. */
.kl-dock--away:not(:focus-within) { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kl-dock { transition: none; } }
.kl .kl-dock__btn, .kl-dock__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: 600 14.5px/1 var(--font-sans); text-decoration: none; cursor: pointer; box-shadow: 0 2px 10px rgba(21, 20, 15, 0.22); }
.kl-dock__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (min-width: 1024px) { .kl-dock__toc { display: none; } .kl-dock:not(:has(a)) { display: none; } }
html.kl-zoom-open .kl-dock { display: none; }
/* On the production site the call and WhatsApp buttons (app.js .fc-fab: 56 px, 20 px from the bottom corners; 52 px and
   16 px at 640 px and below) hold the bottom corners, so the dock sits above them (release 1), and clear of the band
   app.js keeps free of controls around them, each button's box padded by 16 px (its GUARD_PAD): the band reaches 92 px
   from the bottom, 84 px at 640 px and below, so the dock stands 4 px above it with a 20 px gap to the buttons (r6,
   30 Sep; at 88 px and 80 px it stood 4 px inside it, and app.js kept the buttons hidden whenever the dock showed). */
body:has(.fc-fab) .kl-dock { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) { body:has(.fc-fab) .kl-dock { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
/* ... and at the page end the footer keeps its last lines clear of the dock too: the production footer reserves the
   buttons' band (styles.css §36, 32px + 56px + 20px); the dock adds its own 44px and a 20px gap. */
body:has(.fc-fab):has(.kl-dock) .site-footer { padding-bottom: calc(32px + 120px + max(20px, env(safe-area-inset-bottom, 0px))); }
@media print { .kl-dock { display: none; } }
/* Enlarged view on phones: the fitted drawing uses the full width. */
@media (max-width: 559.98px) { .kl-zoom--fit .kl-zoom__body { padding-inline: 0; } }

/* Coverage overview (UX judge M9). Status = colour and words. */
.kl-cov__sum { list-style: none; margin: var(--space-sm) 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.kl-cov__sum li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.kl-cov__n { font-family: var(--font-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.kl-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.kl-st::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.kl-st--review { color: var(--ink); }
.kl-st--partly { color: var(--amber-text); }
.kl-st--needed { color: var(--rust); }
.kl-table--sum { min-width: 760px; }
.kl-table--sum td { font-variant-numeric: tabular-nums; }
@media (min-width: 601px) { .kl-table--sum th:nth-child(1) { width: 34%; } .kl-table--sum th:nth-child(n+2):nth-child(-n+6) { width: 9%; } }

.kl-empty__dym { margin: 0 0 var(--space-sm); font-size: 17px; font-weight: 600; }
.kl-empty__dym[hidden] { display: none; }

/* 26 Sep (Codex A02): movement is not a force. Grey dashed arrows show how a
   part moves or is free to move; amber arrows stay loads, black arrows reactions. */
.kl-fig__svg .kl-a-move { stroke: var(--steel) !important; stroke-width: 1.8; stroke-dasharray: 5 3; fill: none; }
.kl-fig__svg .kl-a-move--head { stroke-dasharray: none; fill: var(--steel); stroke-linejoin: round; }
/* Pins and rollers: joints drawn free to turn */
.kl-fig__svg .kl-a-hinge { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
/* 26 Sep (Codex A03): a one-line live caption, with the full caption on request */
.kl-anim__more { margin: 6px 0 0; font-size: 0.95rem; }
.kl-anim__more > summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; padding: 11px 0; }
.kl-anim__more > summary .kl-anim__w { font-weight: 400; color: var(--ink-faint); }
.kl-anim__more-c { margin: 4px 0 0; color: var(--ink-soft); }

/* 26 Sep (Codex UX-01, UX-03): a compact hub head so the search is in the first
   view at 320x568 and 1280x720; three entry routes; shorter family cards. */
.kl-head--index h1 { font-size: clamp(32px, 4.4vw, 60px); max-width: 22ch; }
.kl-index .kl-hero { padding-top: calc(var(--header-h) + clamp(12px, 2.4vw, 32px)); padding-bottom: clamp(28px, 3.5vw, 56px); }
.kl-index .kl-hero .kl-crumb { margin-bottom: var(--space-sm); }
.kl-hero .kl-tools { margin: var(--space-md) 0 0; }
.kl-search__label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 16px; color: var(--ink); }
.kl-hero__lead { max-width: 62ch; font-size: 17px; margin-top: 4px; }
.kl-routes { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 960px; }
.kl .kl-routes a { text-decoration: none; }
.kl-routes a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; background: var(--paper); min-height: 44px; }
.kl-routes a:hover, .kl-routes a:focus-visible { border-color: var(--ink); }
.kl-routes__t { font-weight: 700; }
.kl-routes__d { font-size: 14px; color: var(--ink-soft); }
.kl-index.kl-searching .kl-routes, .kl-index.kl-searching .kl-hero__lead, .kl-index.kl-searching .kl-search__label { display: none; }
.kl-type__all { margin-top: 2px; }
.kl-type__all > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); padding: 8px 0; }
.kl-path__all > summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
/* Browsing (no search): a compact grid of guide titles, where each applies and
   its sources; the question and topics return in search results. */
.kl-index:not(.kl-searching) .kl-list--main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 28px; border-bottom: 0; }
.kl-index:not(.kl-searching) .kl-list--main .kl-item { border-top: 1px solid var(--line); }
.kl-index:not(.kl-searching) .kl-list--main .kl-item article { display: block; padding: 16px 0 18px; }
.kl-index:not(.kl-searching) .kl-list--main .kl-item__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; max-width: none; margin-bottom: 6px; }
.kl-index:not(.kl-searching) .kl-list--main .kl-item__q,
.kl-index:not(.kl-searching) .kl-list--main .kl-item__topics { display: none; }
/* the tier badge sets its own display, so its hidden state needs saying (it showed "Direct answer" on every entry before a search) */
.kl-item__tier[hidden] { display: none; }
@media (max-width: 559.98px) {
  .kl-index .kl-hero .preview-note, .kl-index .kl-hero [class*="preview"] { margin-bottom: 8px; }
  .kl-hero__lead { font-size: 16px; }
}
/* Phones: the structure icon sits beside its card text, so each card is shorter (UX-03). */
@media (max-width: 559.98px) {
  .kl-type { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
  .kl-type > .kl-ico { grid-column: 1; grid-row: 1 / span 4; width: 48px; height: 36px; margin: 2px 0 0; }
  .kl-type > :not(.kl-ico) { grid-column: 2; }
}
/* 26 Sep (Codex UX-04): on explained guides the short answer's first sentence
   comes before the drawing and the rest of the answer straight after it. */
.kl-answer__cont { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; color: var(--ink-faint); }
.kl-answer-more { margin: var(--space-md) 0 var(--space-lg); padding: 4px 0 4px 20px; border-left: 3px solid var(--amber-2); }
.kl-answer-more > p:last-child { margin: 0; }
/* "From our work" (D20c): our documented experience, visibly apart from the sources. */
.kl-work { margin: var(--space-md) 0; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper-2); }
.kl-work__label { margin: 0 0 6px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.kl-work p { margin: 0 0 8px; }
.kl-work__meta { font-size: 14px; color: var(--ink-faint); }
/* Close-up views (completion pass, Codex A05): a larger drawing of a joint or
   support for the step it explains, with its explanation as text below. */
.kl-details { margin: var(--space-sm) 0 var(--space-md); }
.kl-details__h { margin: 0; font-weight: 700; font-size: 16px; }
.kl-details__note { margin: 2px 0 10px; font-size: 14px; color: var(--ink-faint); }
.kl-details__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.kl-detail { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color 300ms ease-out, box-shadow 300ms ease-out; }
.kl-detail.is-now { border-color: var(--amber-2); box-shadow: 0 0 0 2px rgba(200, 134, 42, 0.25); }
.kl-detail__stage svg { display: block; width: 100%; height: auto; }
.kl-detail .kl-fig__svg text.kl-fig__lbl { font-size: 13px; fill: var(--ink-soft); }
.kl-detail__t { margin: 8px 0 4px; font-weight: 700; font-size: 15px; }
.kl-detail__s { font-weight: 400; color: var(--ink-faint); }
.kl-detail__notes { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.kl-detail__notes li + li { margin-top: 4px; }
@media (max-width: 559.98px) {
  .kl-detail .kl-fig__svg text.kl-fig__lbl { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .kl-detail { transition: none; } }

/* Phone callouts (completion pass, Codex A05): long phrases become lettered
   badges in the drawing, explained in a list below it for the current step. */
.kl-fig__svg .kl-callout { display: none; }
.kl-phone .kl-fig__stage .kl-callout { display: inline; }
.kl-phone .kl-fig__stage text.kl-lbl--co { display: none; }
.kl-fig__svg .kl-callout circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.kl-fig__svg .kl-callout text { fill: var(--ink); stroke: none; font-family: var(--font-sans); font-size: 14px; font-weight: 700; }
.kl-callouts { display: none; }
.kl-phone .kl-callouts { display: block; list-style: none; margin: 6px 0 4px; padding: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.kl-phone .kl-callouts li { display: flex; gap: 8px; align-items: baseline; margin: 3px 0; }
.kl-phone .kl-callouts li[hidden] { display: none; }
.kl-callouts__k { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.6px solid var(--ink); border-radius: 50%; font-weight: 700; font-size: 13px; color: var(--ink); background: var(--paper); }