/* leaf.css - news-article-page leaf vocabulary (W2; skill.html.j2 moved to skill-v2.css at 0.12.0).
   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 retired at P2.2 along with the in-body search mounts and
   Pagefind - .lfx-escape/.lfx-escapepill/.lfx-suggestbox/.leaf-suggestion
   no longer exist on either template.
   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: .lfx-searchblock (the skill-only "Not quite it?" CTA
   card) and #leaf-search-mount/leaf-search-init.js on both templates were
   retired at P2.2 along with the in-body search mounts and Pagefind - the
   header/footer search bar (P2.1) replaces them. .lfx-results/.lfx-result/
   .lfx-meta/.lfx-note/.lfx-flag/.lfx-caption below are that retired
   script's now-unreferenced result vocabulary - left defined (flagged, not
   fixed here) rather than pulled, since .lfx-caption/.lfx-meta share a
   combined rule with .lfx-disclaimer (still live, install-notes only). */

/* 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{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)}

/* JS-built results (retired script's vocabulary - see the header comment) */
.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{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}
}