/* skill-v2.css - skill leaf page (/{owner}/{repo}/{skill}) redesign, replaces
   leaf.css on skill.html.j2 (leaf.css stays for news-item.html.j2). Loads
   after site.css / shell.css / pages.css. The SAME fixes as pkg-v2.css's
   2026-09 design review, scoped to `article.skx` / `.skx-` so the shared
   vocabulary is never restyled: article spacing restored under the global
   reset, one heading typeface, 42rem measure, no .list collision, one meta
   line under the H1, radio-tab install, fixed-layout table, flattened promo
   box, labelled chip groups, link groups under a hairline.
   Budget <=10KB (tests/test_base_template.py) - a CAP, lower only.
   CASCADE LAW: @media tiers sit LAST. */

/* 1. rhythm ---------------------------------------------------------------- */
main.wrap{padding-top:28px}
.skx .crumbs{margin-bottom:18px}
.skx section{margin-top:56px}
.skx section>h2{margin-bottom:12px}
.skx section>h2+.kicker{margin:-6px 0 16px}
.skx section>*+*{margin-top:12px}
.skx h3{margin:28px 0 8px}
.skx h2+h3,.skx .kicker+h3{margin-top:8px}
.skx section>h2{margin-top:0}
.skx .faq div+div{margin-top:20px}
.skx .faq h3{margin-top:0}
.skx .col-card h3{margin-top:0}
.skx .quoted h2,.skx .quoted h3,.skx .quoted h4{margin-top:24px;margin-bottom:8px}
.skx .quoted p+p,.skx .quoted ul,.skx .quoted ol,.skx .quoted pre{margin-top:12px}

/* 2. type ------------------------------------------------------------------ */
.skx h1{font-size:2.25rem;margin:0 0 6px}
.skx h2{font-size:1.625rem;line-height:1.2;letter-spacing:-.015em}
.skx h3{font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--ink)}
.skx .kicker{font:400 .8125rem/1.5 var(--sans);color:var(--ink-soft);text-transform:none;letter-spacing:0}
.skx p,.skx ul,.skx ol,.skx h2,.skx h3{max-width:42rem;text-wrap:pretty}
.skx section p{color:var(--ink-soft)}
.skx section ul{padding-left:1.25em;color:var(--ink-soft)}
.skx section li+li{margin-top:6px}
.skx section li::marker{color:var(--muted)}
.skx .quoted{max-width:42rem}
.skx .quoted ul,.skx .quoted ol{max-width:none}
.skx a:not(.row):not(.note-card):not(.featured-note-card):not(.skx-badge){color:var(--violet-d)}
.skx a:not(.row):not(.note-card):not(.featured-note-card):hover{text-decoration:underline}
.skx .lfx-pathline{overflow-wrap:anywhere}
.skx .direct-answer{max-width:42rem}

/* 3. head: one meta line under the lede, aligned to the h1 ------------------ */
.skx .lede{font-size:1.125rem;max-width:42rem}
.skx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:14px;font-size:.875rem;color:var(--ink-soft)}
.skx-meta>*+*::before{content:"\00B7";margin:0 10px;color:var(--muted)}
.skx-meta b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:.8125rem}
.skx-badge{display:inline-flex;align-items:center;font-size:.75rem;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:var(--r-pill)}
.skx-badge.yes{background:var(--green-t);color:var(--green-ink)}
.skx-badge.no{background:var(--coral-t);color:var(--coral-ink)}
.skx-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:.875rem;font-weight:600}

/* 4. callouts: security ---------------------------------------------------- */
.skx-callout{border-left:3px solid var(--green);padding:14px 18px 16px;background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:42rem}
.skx-callout .skx-badge{margin-bottom:10px}
.skx-callout .lead{font-size:1.0625rem;font-weight:650;color:var(--ink);line-height:1.4}
.skx-callout p+p{margin-top:8px}
.skx-callout.warn{border-left-color:var(--coral)}

/* 5. install tabs: skillfed | manual 1/2 | manual 2/2 ------------------------ */
.skx-tabs>input{position:absolute;width:1px;height:1px;opacity:0}
.skx-tabbar{display:flex;gap:4px;margin-bottom:-1px;position:relative;z-index:1}
.skx-tabbar label{font:600 .8125rem/1 var(--sans);color:var(--ink-soft);padding:9px 14px;border:1px solid transparent;border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer}
.skx-tabbar label:hover{color:var(--ink)}
.skx-tabbar label.soon{color:var(--muted)}
#st-1:checked~.skx-tabbar label[for="st-1"],#st-2:checked~.skx-tabbar label[for="st-2"],#st-3:checked~.skx-tabbar label[for="st-3"]{background:var(--term-bg);color:var(--term-ink)}
#st-1:focus-visible~.skx-tabbar label[for="st-1"],#st-2:focus-visible~.skx-tabbar label[for="st-2"],#st-3:focus-visible~.skx-tabbar label[for="st-3"]{outline:2px solid var(--violet);outline-offset:2px}
.skx-pane{display:none}
#st-1:checked~.skx-pane.p1,#st-2:checked~.skx-pane.p2,#st-3:checked~.skx-pane.p3{display:block}
.skx .cmd{width:100%;margin:0;border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm);padding:13px 16px;font-size:.875rem}
.skx .cmd .what{font-size:.6875rem;color:var(--term-dim);letter-spacing:.06em;text-transform:none;font-family:var(--sans);font-weight:600}
.skx .cmd:hover .what{color:var(--term-ink)}
.skx .cmd[disabled]{opacity:.7;cursor:default}
.skx-note{font-size:.8125rem;color:var(--ink-soft)}
.skx pre{font-size:.875rem;line-height:1.7;padding:18px 20px;border-radius:var(--r-sm)}

/* 6. table (selected over) --------------------------------------------------- */
.skx-facts{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9375rem;display:table}
.skx-facts col:first-child{width:200px}
.skx-facts col:last-child{width:80px}
.skx-facts th{text-align:left;font-size:.8125rem;font-weight:600;color:var(--muted);padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.skx-facts td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top;text-align:left;font-family:var(--sans)}
.skx-facts td:first-child{font-weight:600;color:var(--ink)}
.skx-facts .mono{font-family:var(--mono);font-size:.875rem;color:var(--ink)}

/* 7. tags: labelled group ----------------------------------------------------- */
.skx-taggroup{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 12px;align-items:start;max-width:none;margin-top:28px}
.skx-taggroup .lbl{font-size:.875rem;font-weight:600;color:var(--ink);padding-top:6px}
.skx .pills{margin:0}

/* 8. related skills ------------------------------------------------------------ */
.skx .list{margin-top:14px;max-width:none}
.skx .row .name{font-family:var(--sans);font-size:1rem;font-weight:650}
.skx .row .verdict{font-family:var(--sans);font-weight:700;font-size:.6875rem;letter-spacing:.02em}
.skx .row .note{color:var(--ink-soft);border-left-color:var(--violet-t)}
.skx .row .dek{margin-top:4px}
.skx-peerrow{margin-top:16px;font-size:.875rem;color:var(--ink-soft);max-width:none}
.skx-peerrow b{font-weight:600;color:var(--ink);margin-right:6px}

/* 9. promo box, one container -------------------------------------------------- */
.skx-skillfed{margin-top:56px;background:linear-gradient(135deg,var(--violet-t),var(--card) 60%);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px 28px}
.skx-skillfed>h2{margin-bottom:6px}
.skx-skillfed .wish{margin-top:18px;font-size:.9375rem;color:var(--ink)}
.skx-skillfed .wish b{font-family:var(--mono);font-weight:600;color:var(--violet-d)}
.skx-skillfed .cmds{margin-top:18px;background:var(--term-bg);border-radius:var(--r-sm);padding:4px 6px;max-width:none}
.skx-skillfed .cmds .cmd{border-radius:0;border-top:1px solid rgba(239,233,221,.09);padding:10px 10px}
.skx-skillfed .cmds .cmd:first-child{border-top:none}
.skx-skillfed .cmds .cmd.done .copied{border-radius:0}

/* 10. research cards + link groups ----------------------------------------------- */
.skx .note-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px;max-width:none}
.skx .featured-note-card{max-width:none}
.skx-linkgroups{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 32px}
.skx-linkgroups h3{margin:0 0 8px;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.skx-linkgroups ul{list-style:none;padding:0;margin:0;max-width:none}
.skx-linkgroups li{font-size:.875rem;font-weight:600;line-height:1.5}
.skx-linkgroups li+li{margin-top:6px}

/* ============ responsive tiers (kept last) ================================== */
@media (max-width:680px){
.skx-facts col:first-child{width:38%}
.skx-taggroup{grid-template-columns:minmax(0,1fr)}
.skx-taggroup .lbl{padding-top:0}
.skx-skillfed{padding:18px}
}