/* ══════════════════════════════════════════════════════════════════════
   AI SKILL DETAIL (.sklx) — extends the .skl kit from the listing page.
   Colours resolve through the V2 tokens, so dark mode is inherited; only
   the handful of rules a token cannot express get an explicit dark twin.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.v2x.sklx .sx-hero{position:relative;overflow:hidden;border:1px solid var(--v2-line);border-radius:22px;
  background:radial-gradient(120% 100% at 88% -30%,rgba(54,128,237,.13),transparent 60%),
             linear-gradient(180deg,var(--v2-accent-soft2) 0%,var(--white) 70%);padding:26px}
.v2x.sklx .sx-hero::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:min(340px,44%);
  background-image:radial-gradient(rgba(54,128,237,.16) 1.5px,transparent 1.5px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(260deg,#000,transparent 82%);mask-image:linear-gradient(260deg,#000,transparent 82%);
  pointer-events:none}
.v2x.sklx .sx-hero > *{position:relative;z-index:1}
.v2x.sklx .sx-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.v2x.sklx .sx-ico{flex:0 0 auto;width:74px;height:74px;border-radius:20px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.75rem;background:var(--skl-accent,var(--brand-blue));
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--skl-accent,#3680ED) 70%,transparent)}
.v2x.sklx .sx-head{flex:1;min-width:240px}
.v2x.sklx .sx-cat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;
  color:var(--brand-blue-dark);background:var(--v2-accent-soft);border:1px solid #d6e4fc;
  padding:4px 11px;border-radius:999px}
.v2x.sklx .sx-cat:hover{text-decoration:none;background:#dfeafd}
.v2x.sklx h1{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;
  margin:12px 0 8px;color:var(--v2-ink)}
.v2x.sklx .sx-tag{font-size:1.02rem;color:var(--v2-muted);margin:0;max-width:62ch;line-height:1.55}
.v2x.sklx .sx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.v2x.sklx .sx-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}

/* metric strip */
.v2x.sklx .sx-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--v2-line);border:1px solid var(--v2-line);border-radius:14px;overflow:hidden;margin-top:20px}
.v2x.sklx .sx-metric{background:var(--white);padding:13px 15px}
.v2x.sklx .sx-metric .lb{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-muted)}
.v2x.sklx .sx-metric .vl{font-size:14.4px;font-weight:700;color:var(--v2-ink);margin-top:3px}

/* ── Layout ───────────────────────────────────────────────────────── */
.v2x.sklx .sx-layout{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:22px;align-items:start;margin-top:22px}
.v2x.sklx .sx-rail{position:sticky;top:84px;display:grid;gap:14px}

/* ── TOC ──────────────────────────────────────────────────────────── */
.v2x.sklx .sx-toc{background:var(--white);border:1px solid var(--v2-line);border-radius:16px;padding:15px;
  box-shadow:var(--shadow-sm)}
.v2x.sklx .sx-toc h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v2-muted);margin:0 0 10px}
.v2x.sklx .sx-toc a{display:flex;align-items:center;gap:9px;padding:7px 10px;margin:0 -10px;border-radius:9px;
  font-size:13.4px;font-weight:600;color:var(--v2-muted);transition:background .14s,color .14s}
.v2x.sklx .sx-toc a::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 auto}
.v2x.sklx .sx-toc a:hover{background:var(--v2-accent-soft2);color:var(--brand-blue);text-decoration:none}

/* ── Body sections ────────────────────────────────────────────────── */
.v2x.sklx .sx-sec{background:var(--white);border:1px solid var(--v2-line);border-radius:18px;padding:22px;
  box-shadow:var(--shadow-sm);margin-bottom:16px;scroll-margin-top:88px}
.v2x.sklx .sx-sec > h2{display:flex;align-items:center;gap:10px;font-size:1.18rem;font-weight:800;
  letter-spacing:-.02em;margin:0 0 6px;color:var(--v2-ink)}
.v2x.sklx .sx-sec > h2 i{color:var(--skl-accent,var(--brand-blue));font-size:1rem}
.v2x.sklx .sx-sec__sub{margin:0 0 16px;color:var(--v2-muted);font-size:13.8px}
.v2x.sklx .sx-prose{color:var(--v2-muted);font-size:14.9px;line-height:1.75}
.v2x.sklx .sx-prose p{margin:0 0 13px}
.v2x.sklx .sx-prose p:last-child{margin:0}

/* pros / cons lists */
.v2x.sklx .sx-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.v2x.sklx .sx-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;line-height:1.55;color:var(--v2-muted)}
.v2x.sklx .sx-list li i{flex:0 0 auto;margin-top:3px;font-size:.86rem}
.v2x.sklx .sx-list.is-good li i{color:var(--v2-green)}
.v2x.sklx .sx-list.is-bad li i{color:var(--v2-amber)}

/* numbered steps */
.v2x.sklx .sx-steps{counter-reset:sx;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.v2x.sklx .sx-steps li{counter-increment:sx;display:flex;gap:12px;align-items:flex-start;font-size:14.2px;
  line-height:1.55;color:var(--v2-muted)}
.v2x.sklx .sx-steps li::before{content:counter(sx);flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--v2-accent-soft);
  color:var(--brand-blue-dark);font-size:11.5px;font-weight:750}

.v2x.sklx .sx-callout{display:flex;gap:12px;padding:15px;border-radius:12px;background:var(--v2-accent-soft2);
  border:1px solid var(--v2-line);font-size:14px;line-height:1.6;color:var(--v2-muted)}
.v2x.sklx .sx-callout i{color:var(--brand-blue);margin-top:3px}

/* ── Supporter rows (tools / models) ──────────────────────────────── */
.v2x.sklx .sx-rows{display:grid;gap:10px}
.v2x.sklx .sx-row{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--v2-line);
  border-radius:13px;background:var(--white);color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.v2x.sklx .sx-row:hover{border-color:#cfe0fb;box-shadow:var(--shadow-md);transform:translateY(-1px);text-decoration:none}
.v2x.sklx .sx-row__logo{flex:0 0 auto;width:42px;height:42px;border-radius:11px;object-fit:cover;
  background:var(--v2-bg);border:1px solid var(--v2-line)}
.v2x.sklx .sx-row__ph{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--v2-accent-soft);color:var(--brand-blue);font-weight:800;font-size:15px}
.v2x.sklx .sx-row__b{flex:1;min-width:0}
.v2x.sklx .sx-row__nm{font-size:14.6px;font-weight:700;color:var(--v2-ink);display:flex;align-items:center;gap:7px}
.v2x.sklx .sx-row__nt{font-size:12.6px;color:var(--v2-muted);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.v2x.sklx .sx-row__go{flex:0 0 auto;color:var(--v2-muted);transition:transform .16s,color .16s}
.v2x.sklx .sx-row:hover .sx-row__go{transform:translateX(3px);color:var(--brand-blue)}

/* support-level badge — the thing that makes this page trustworthy */
.v2x.sklx .sx-supp{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-size:10.8px;font-weight:700;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.v2x.sklx .sx-supp.is-native{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.28);color:#15803d}
.v2x.sklx .sx-supp.is-partial{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.30);color:#b45309}
.v2x.sklx .sx-supp.is-via_integration{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.28);color:#6d28d9}
.v2x.sklx .sx-supp.is-beta{background:rgba(54,128,237,.12);border-color:rgba(54,128,237,.28);color:var(--brand-blue-dark)}
.v2x.sklx .sx-best{background:var(--v2-accent-soft);border:1px solid #d6e4fc;color:var(--brand-blue-dark);
  font-size:10.8px;font-weight:750;padding:2px 8px;border-radius:999px}

/* ── Use cases ────────────────────────────────────────────────────── */
.v2x.sklx .sx-uc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v2x.sklx .sx-uccard{padding:16px;border:1px solid var(--v2-line);border-radius:14px;background:var(--white);
  transition:border-color .16s,box-shadow .16s,transform .16s}
.v2x.sklx .sx-uccard:hover{border-color:#cfe0fb;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.v2x.sklx .sx-uccard .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--v2-accent-soft);color:var(--brand-blue);margin-bottom:11px}
.v2x.sklx .sx-uccard h3{font-size:14.8px;font-weight:750;margin:0 0 5px;color:var(--v2-ink);line-height:1.3}
.v2x.sklx .sx-uccard p{margin:0;font-size:13.4px;line-height:1.55;color:var(--v2-muted)}
.v2x.sklx .sx-uccard .ind{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--v2-muted)}

/* ── Related rail ─────────────────────────────────────────────────── */
.v2x.sklx .sx-relgrp{margin-bottom:18px}
.v2x.sklx .sx-relgrp:last-child{margin-bottom:0}
.v2x.sklx .sx-relgrp > h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v2-muted);margin:0 0 10px}
.v2x.sklx .sx-relgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* ── Sidebar cards ────────────────────────────────────────────────── */
.v2x.sklx .sx-card{background:var(--white);border:1px solid var(--v2-line);border-radius:16px;padding:16px;
  box-shadow:var(--shadow-sm)}
.v2x.sklx .sx-card h2{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--v2-muted);margin:0 0 12px}
.v2x.sklx .sx-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--v2-line);font-size:13.4px}
.v2x.sklx .sx-kv:last-child{border-bottom:0}
.v2x.sklx .sx-kv .k{color:var(--v2-muted)}
.v2x.sklx .sx-kv .v{font-weight:700;color:var(--v2-ink);text-align:end}
.v2x.sklx .sx-taglist{display:flex;flex-wrap:wrap;gap:7px}

/* sparkline */
.v2x.sklx .sx-spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:10px}
.v2x.sklx .sx-spark span{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:var(--skl-accent,var(--brand-blue));opacity:.35;
  transition:opacity .16s}
.v2x.sklx .sx-spark:hover span{opacity:.6}
.v2x.sklx .sx-spark span:last-child{opacity:.9}

/* ── Dark twins ───────────────────────────────────────────────────── */
body.theme-dark .v2x.sklx .sx-hero{
  background:radial-gradient(120% 100% at 88% -30%,rgba(54,128,237,.20),transparent 60%),
             linear-gradient(180deg,rgba(54,128,237,.08) 0%,var(--white) 70%)}
body.theme-dark .v2x.sklx .sx-hero::before{background-image:radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.5px)}
body.theme-dark .v2x.sklx .sx-cat{background:rgba(54,128,237,.16);border-color:rgba(96,164,245,.28);color:#8FC0F8}
body.theme-dark .v2x.sklx .sx-cat:hover{background:rgba(54,128,237,.24)}
body.theme-dark .v2x.sklx .sx-row:hover,
body.theme-dark .v2x.sklx .sx-uccard:hover{border-color:rgba(96,164,245,.28)}
body.theme-dark .v2x.sklx .sx-toc a:hover{background:rgba(255,255,255,.04)}
body.theme-dark .v2x.sklx .sx-callout{background:rgba(54,128,237,.10)}
body.theme-dark .v2x.sklx .sx-steps li::before,
body.theme-dark .v2x.sklx .sx-uccard .ic,
body.theme-dark .v2x.sklx .sx-row__ph{background:rgba(54,128,237,.18);color:#8FC0F8}
body.theme-dark .v2x.sklx .sx-best{background:rgba(54,128,237,.18);border-color:rgba(96,164,245,.28);color:#8FC0F8}
/* Semantic ink needs a dark twin — the light values are unreadable on #1A1A24 */
body.theme-dark .v2x.sklx .sx-supp.is-native{color:#5BD99B}
body.theme-dark .v2x.sklx .sx-supp.is-partial{color:#F0B44E}
body.theme-dark .v2x.sklx .sx-supp.is-via_integration{color:#C4A7FB}
body.theme-dark .v2x.sklx .sx-supp.is-beta{color:#8FC0F8}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1099.98px){
  .v2x.sklx .sx-layout{grid-template-columns:1fr}
  .v2x.sklx .sx-rail{position:static}
  .v2x.sklx .sx-relgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .v2x.sklx .sx-hero{padding:20px}
  .v2x.sklx .sx-ico{width:60px;height:60px;border-radius:17px;font-size:1.45rem}
  .v2x.sklx .sx-uc{grid-template-columns:1fr}
  .v2x.sklx .sx-relgrid{grid-template-columns:1fr}
  .v2x.sklx .sx-sec{padding:18px}
  .v2x.sklx .sx-actions .v2-btn{flex:1 1 auto;justify-content:center}
}
@media (hover:none){
  .v2x.sklx .sx-row:hover,.v2x.sklx .sx-uccard:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .v2x.sklx .sx-row,.v2x.sklx .sx-uccard,.v2x.sklx .sx-row__go{transition:none}
  .v2x.sklx .sx-row:hover,.v2x.sklx .sx-uccard:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   §CARD — the shared skill card + facet pill kit.
   ---------------------------------------------------------------------
   MOVED HERE 2026-08-14 from v2-public-ai-skill-index.css, which was the
   only sheet that ever defined these rules and which the DETAIL page never
   loaded. `v2.public.partials.skill-card` is included from THIS page's
   Related band (twice), and `.skl-pill` is used by the hero facet row and
   the tag list — so all of it rendered UNSTYLED here: bare stacked text
   where the related cards should be, and plain words where the four hero
   pills should be. Nothing reported it because the classes existed in the
   markup and simply matched no rule.

   The listing no longer uses this kit at all (it shares /ai-directory's
   sheet now), so this page is the SOLE consumer and the index sheet was
   deleted. `--skl-accent` is set inline on the .sklx root from
   $skill->accent; the card falls back to brand blue when it is absent.
   Scoped `.v2x` (not `.v2x.sklx`) exactly as the originals were, so the
   card keeps rendering identically wherever the partial is included.
   ══════════════════════════════════════════════════════════════════════ */
.v2x .skl-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;
  background:var(--white);border:1px solid var(--v2-line);border-radius:16px;box-shadow:var(--shadow-sm);
  color:inherit;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
/* accent rail grows on hover */
.v2x .skl-card::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:3px;
  background:var(--skl-accent,var(--brand-blue));transform:scaleY(0);transform-origin:top;
  transition:transform .22s cubic-bezier(.16,1,.3,1)}
.v2x .skl-card:hover{transform:translateY(-3px);border-color:#cfe0fb;box-shadow:var(--shadow-lg);text-decoration:none}
.v2x .skl-card:hover::before{transform:scaleY(1)}
.v2x .skl-card:focus-visible{outline:none;box-shadow:var(--shadow-brand)}

.v2x .skl-card__top{display:flex;align-items:flex-start;gap:12px}
.v2x .skl-card__body{min-width:0}
.v2x .skl-ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.05rem;background:var(--skl-accent,var(--brand-blue));
  transition:transform .18s}
.v2x .skl-card:hover .skl-ico{transform:scale(1.06) rotate(-4deg)}
.v2x .skl-card__ttl{font-size:16px;font-weight:750;color:var(--v2-ink);margin:0 0 3px;letter-spacing:-.015em;line-height:1.25}
.v2x .skl-card__cat{font-size:12px;color:var(--v2-muted)}
.v2x .skl-card__desc{font-size:13.4px;line-height:1.55;color:var(--v2-muted);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.v2x .skl-card__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.v2x .skl-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;border:1px solid var(--v2-line);background:var(--v2-bg);color:var(--v2-muted)}
.v2x .skl-pill.is-brand{background:var(--v2-accent-soft);border-color:#d6e4fc;color:var(--brand-blue-dark)}
/* The tag list renders .skl-pill as an <a> — keep it from picking up the
   global link underline/colour that the span version never sees. */
.v2x a.skl-pill{text-decoration:none}
.v2x a.skl-pill:hover{border-color:#cfe0fb;color:var(--brand-blue-dark);background:var(--v2-accent-soft)}
.v2x .skl-card__foot{display:flex;align-items:center;gap:14px;padding-top:11px;border-top:1px solid var(--v2-line);
  font-size:12.2px;color:var(--v2-muted)}
.v2x .skl-card__foot b{color:var(--v2-ink);font-weight:700;font-variant-numeric:tabular-nums}
.v2x .skl-card__go{margin-inline-start:auto;color:var(--brand-blue);font-weight:650;display:inline-flex;align-items:center;gap:6px}
.v2x .skl-card__go i{transition:transform .18s}
.v2x .skl-card:hover .skl-card__go i{transform:translateX(3px)}

/* featured ribbon */
.v2x .skl-card.is-featured{border-color:#cfe0fb}
.v2x .skl-star{position:absolute;top:12px;inset-inline-end:12px;font-size:11px;font-weight:700;
  color:var(--v2-amber);display:inline-flex;align-items:center;gap:4px}

/* Dark twins — only where a token cannot carry it. */
body.theme-dark .v2x .skl-pill{background:rgba(255,255,255,.05)}
body.theme-dark .v2x a.skl-pill:hover{background:rgba(54,128,237,.16);border-color:rgba(96,164,245,.28);color:#8FC0F8}
body.theme-dark .v2x .skl-card:hover{border-color:rgba(96,164,245,.28)}
body.theme-dark .v2x .skl-card.is-featured{border-color:rgba(96,164,245,.24)}

/* Coarse pointers never hover — drop the lift so a tap doesn't stick. */
@media (hover:none){
  .v2x .skl-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .v2x .skl-card,.v2x .skl-ico,.v2x .skl-card__go i{transition:none}
  .v2x .skl-card:hover{transform:none}
}