/* leaf.css - skill-page + news-article-page conversion redesign (W2).
   Namespaced .lfx- (test_panel_vocabulary_stays_scoped: no bare `.panel`
   below), distinct from pkg.css's .pkx-. Model: pkg.css (read its header -
   same scoping law, same CASCADE LAW).
   Loads on skill.html.j2 (loads pages.css) AND news-item.html.j2 (does
   not) - SHARED blocks are self-contained; only skill-only blocks lean on
   pages.css's `.kicker`/`.cards`/`.card`. Source of truth for template- vs
   JS-emitted markup: leaf-search-init.js's docstring - corrected two
   mockup-only guesses (suggestion class is `.leaf-suggestion`, not
   `.lfx-suggest`; the mount's input/button/status row reuses
   `.pkg-search-row`/`.pkg-search-status` verbatim, zero new CSS).
   `.lfx-results/.lfx-result/.lfx-meta/.lfx-note/.lfx-flag` are JS-built,
   pinned; the rest below is template-emitted - the inventory W5/W7 get.
   `.cmd[data-copy]` (shell-nav.js's copy idiom) only through a `.lfx-`
   ancestor, never bare. Budget <=10KB, a CAP, lower only. CASCADE LAW:
   @media tiers sit LAST.

   CLASS INVENTORY (contract - unlisted = does not exist; diff emitted
   markup against this, not the mockups):
   ESCAPE+SUGGEST, skill only (news has none): .lfx-escape div wrapper in
   <article> after .trust, position:relative. .lfx-escapepill a, child,
   id=leaf-search-pill href=#leaf-search-mount. .lfx-suggestbox div,
   sibling of the pill (JS: pill.parentElement) - `.open` JS-toggled, never
   :focus-within (broke before via a pill-click focus-shift bug). .kicker
   (pages.css, reused) is the suggestbox header label. .leaf-suggestion
   button[type=button][data-suggestion="<query>"], child of .lfx-suggestbox,
   never <a>.
   INSTALL, skill only: .lfx-install div wraps button.cmd[data-copy] rows.
   .lfx-disclaimer p after it, the no-audit line. .lfx-pathline MODIFIER on
   the .kicker path line - breaks the slash-separated path.
   SKILLFED BLOCK, shared (news = same card, fewer children): .lfx-skillfed
   section, gradient card, after SKILL.md / Related row. .lfx-tag span,
   mono label by the h2. .lfx-term div, dark terminal demo, child of
   .lfx-skillfed; .lfx-term .p/.dim spans are its prompt/dim tokens.
   .lfx-wishlink button.cmd[data-copy][data-beacon=wish-link]
   MODIFIER, skill only, violet-pill wish-link row. .lfx-instrow div, child
   of .lfx-skillfed, row of button.cmd[data-copy] installs + one chat-link
   <a> last.
   RELATED CARDS (skill reuses pages.css's guaranteed .cards/.card; news
   gets its own pair, pages.css not guaranteed there): .lfx-card-head div,
   in .card (skill) or .lfx-relcard (news) - wraps name <b> + optional
   .lfx-kind on one line; a flex parent blockifies children so the frozen
   `.card b{display:block}` never fires (pkg.css's own fix, same mechanism).
   .lfx-kind span chip, child of .lfx-card-head after the name;
   .lfx-kind-research/-skill/-package are its tint modifiers. .lfx-relgrid
   div, news only, in Related-on-SkillFed after the h2 row. .lfx-relcard a,
   news only, child of .lfx-relgrid. .lfx-relcap p, child - one-line
   description. .lfx-relmeta p, child - muted attribution line.
   .lfx-peerrow p, skill only, after .cards before .linkrow - the demoted
   "More X skills:" line.
   BOTTOM SEARCH (skill: full card; news: bare, in Related-on-SkillFed - one
   results surface per page either way): .lfx-searchblock section, skill
   only, the "Not quite it?" CTA card. #leaf-search-mount div, shared,
   REQUIRED by leaf-search-init.js - class=search-mount (site.css sizing,
   reused) + data-endpoint + data-variant ("skill"|"research"); JS appends
   row/status/note/.lfx-results inside. .lfx-caption p, shared, sibling
   after the mount, states the confidence-labeling law.
   JS-BUILT RESULT ROWS, pinned (leaf-search-init.js's vocabulary):
   .lfx-results div, bordered list, never the sitewide `.cards` grid
   (unreadable 2x5 wall on a narrow column, 0.4.3). .lfx-result div, one
   row, divider between rows, none above the first. .lfx-meta p, ONE muted
   line, never the .trust/.chip pair (~68px/row, wrapped, 0.4.3). .lfx-note
   div, research only, weak-confidence server note, rendered verbatim,
   never suppressing the results below it (a relevance floor LABELS, never
   SUPPRESSES). .lfx-flag p, skill only, the security-flag marker. */

/* escape pill + suggestions (skill only) */
.lfx-escape{position:relative;max-width:40rem;margin-top:14px}
.lfx-escapepill{display:flex;align-items:center;gap:9px;border:1.5px solid var(--violet);background:var(--card);border-radius:var(--r-pill);padding:8px 16px;font:0.8125rem var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lfx-escapepill:hover,.lfx-escapepill:focus-visible{border-color:var(--violet-d);color:var(--ink-soft)}
.lfx-suggestbox{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);overflow:hidden}
.lfx-suggestbox.open{display:block}
/* header inset matches rows below - .kicker default left it flush, 0.4.3 */
.lfx-suggestbox .kicker{font:500 0.65625rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0;padding:9px 16px 7px;border-bottom:1px solid var(--line-soft)}
.leaf-suggestion{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 16px;font-size:0.8125rem;color:var(--ink-soft);border-top:1px solid var(--line-soft)}
.lfx-suggestbox .leaf-suggestion:first-of-type{background:var(--violet-t);color:var(--ink)}

/* compact install terminal (skill only) */
.lfx-install{max-width:40rem;margin-top:10px;background:var(--term-bg);border-radius:var(--r-md);padding:5px 6px;overflow-x:auto}
.lfx-install .cmd{border:none;border-top:1px solid rgba(239,233,221,.09);border-radius:0;margin-bottom:0;padding:7px 10px}
.lfx-install .cmd:first-child{border-top:none}
.lfx-disclaimer{margin-top:8px}
/* modifier on .kicker's path line - breaks the unbroken slash-separated token */
.lfx-pathline{overflow-wrap:anywhere}

/* SkillFed finder block (shared skill + news) */
.lfx-skillfed{margin-top:36px;background:linear-gradient(135deg,var(--violet-t),var(--card) 55%);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-card)}
.lfx-skillfed h2,.lfx-searchblock h2{font-family:var(--serif);font-size:1.1875rem;letter-spacing:-0.01em;margin:0 0 4px}
.lfx-skillfed p{margin:8px 0 0;font-size:0.8125rem;color:var(--ink-soft)}
.lfx-skillfed a{color:var(--violet-d);font-weight:600}
.lfx-skillfed a:hover{text-decoration:underline}
.lfx-tag{font:500 0.65625rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lfx-term{max-width:40rem;margin-top:14px;background:var(--term-bg);color:var(--term-ink);border-radius:var(--r-md);font:0.75rem/1.85 var(--mono);padding:14px 16px;overflow-x:auto;white-space:nowrap}
.lfx-term .p{color:var(--violet);font-weight:700}
.lfx-term .dim{color:var(--term-dim)}
.lfx-term a{color:var(--term-ink);text-decoration:underline}
.lfx-wishlink{background:var(--violet-t);border:1px solid var(--violet);border-radius:var(--r-pill);color:var(--ink)}
.lfx-instrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;max-width:40rem;margin-top:14px;align-items:center}
.lfx-instrow .cmd{margin:0}
.lfx-instrow a{font-size:0.8125rem}

/* related cards */
.lfx-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lfx-kind{font:650 0.65625rem/1 var(--mono);text-transform:uppercase;letter-spacing:0.04em;border-radius:var(--r-pill);padding:3px 8px;flex:none}
.lfx-kind-research{background:var(--violet-t);color:var(--violet-d)}
.lfx-kind-skill{background:var(--green-t);color:var(--green-ink)}
.lfx-kind-package{background:var(--amber-t);color:var(--amber-ink)}
.lfx-relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.lfx-relcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-card)}
.lfx-relcard:hover{border-color:var(--violet)}
.lfx-relcard b{font-size:0.875rem}
.lfx-relcap{font-size:0.78125rem;color:var(--ink-soft);margin:5px 0 7px}
.lfx-relmeta{font-size:0.6875rem;color:var(--muted);margin:0;font-family:var(--mono)}
.lfx-peerrow{margin-top:12px;font-size:0.8125rem;color:var(--muted)}

/* bottom search block + JS-built results */
.lfx-searchblock{margin-top:36px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-card)}
.lfx-searchblock p{margin:0 0 12px;font-size:0.8125rem;color:var(--ink-soft)}
.lfx-caption{margin-top:8px}
.lfx-results{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.lfx-result{padding:11px 16px;border-top:1px solid var(--line-soft)}
.lfx-result:first-child{border-top:none}
.lfx-result b{font-size:0.875rem}
.lfx-result b code{background:none;color:inherit;padding:0;font-weight:650}
.lfx-result b a{color:inherit}
.lfx-result b a:hover{text-decoration:underline}
.lfx-result p{margin:4px 0 0}
.lfx-result p a{color:var(--violet-d);font-weight:600}
/* .cite-line (pages.css, reused per leaf-search-init.js) not guaranteed on news */
.lfx-result .cite-line{margin:4px 0 0;font-size:0.8125rem;color:var(--muted)}
.lfx-disclaimer,.lfx-caption,.lfx-meta{font-size:0.71875rem;color:var(--muted)}
.lfx-note{margin-top:10px;padding:9px 12px;background:var(--line-soft);color:var(--ink-soft);border-radius:var(--r-sm);font-size:0.78125rem;line-height:1.5}
.lfx-flag{color:var(--coral-ink);font-weight:650}

/* responsive tiers (kept last so they win the cascade) */
@media (max-width:860px){
.lfx-skillfed,.lfx-searchblock{padding:16px}
.lfx-relgrid{grid-template-columns:1fr}
}
@media (max-width:480px){
.lfx-instrow{grid-template-columns:1fr}
.lfx-term{font-size:0.6875rem;padding:12px 14px}
.lfx-escapepill,.lfx-suggestbox .kicker,.leaf-suggestion{font-size:0.75rem}
}