/* pkg-v2.css - package leaf page (/packages/{id}) redesign, replaces pkg.css.
   Loads after site.css / shell.css / pages.css. Everything here is scoped to
   `article.pkx` or a `.pkx-` class so the shared vocabulary is never restyled.
   Fixes the 2026-09 design review: restores article spacing lost to the
   global reset, one heading typeface, 42rem measure, no .list collision,
   fixed-layout facts table, flattened promo box, labelled chip groups. */

/* 1. rhythm ---------------------------------------------------------------- */
main.wrap{padding-top:28px}
.pkx .crumbs{margin-bottom:18px}
.pkx section{margin-top:56px}
.pkx section>h2{margin-bottom:12px}
.pkx section>h2+.kicker{margin:-6px 0 16px}
.pkx section>*+*{margin-top:12px}
.pkx h3{margin:28px 0 8px}
.pkx h2+h3,.pkx .kicker+h3{margin-top:8px}
.pkx section>h2{margin-top:0}

/* 2. type: one sans family for headings, mono for code and data only ------- */
.pkx h1{font-size:2.25rem;margin:0 0 6px}
.pkx h2{font-size:1.625rem;line-height:1.2;letter-spacing:-.015em}
.pkx h3{font-size:1.125rem;font-weight:600;line-height:1.35;color:var(--ink)}
.pkx .kicker{font:400 .8125rem/1.5 var(--sans);color:var(--ink-soft)}
.pkx p,.pkx ul,.pkx ol,.pkx h2,.pkx h3{max-width:42rem;text-wrap:pretty}
.pkx section p{color:var(--ink-soft)}
.pkx section ul{padding-left:1.25em;color:var(--ink-soft)}
.pkx section li+li{margin-top:6px}
.pkx section li::marker{color:var(--muted)}
.pkx a:not(.row):not(.note-card):not(.pkx-badge){color:var(--violet-d)}
.pkx a:not(.row):not(.note-card):hover{text-decoration:underline}

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

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

/* 5. install: pip | uv | poetry tabs, one command at a time ------------------ */
.pkx-tabs>input{position:absolute;width:1px;height:1px;opacity:0}
.pkx-tabbar{display:flex;gap:4px;margin-bottom:-1px;position:relative;z-index:1}
.pkx-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}
.pkx-tabbar label:hover{color:var(--ink)}
#pt-pip:checked~.pkx-tabbar label[for="pt-pip"],#pt-uv:checked~.pkx-tabbar label[for="pt-uv"],#pt-poetry:checked~.pkx-tabbar label[for="pt-poetry"]{background:var(--term-bg);color:var(--term-ink)}
#pt-pip:focus-visible~.pkx-tabbar label[for="pt-pip"],#pt-uv:focus-visible~.pkx-tabbar label[for="pt-uv"],#pt-poetry:focus-visible~.pkx-tabbar label[for="pt-poetry"]{outline:2px solid var(--violet);outline-offset:2px}
.pkx-pane{display:none}
#pt-pip:checked~.pkx-pane.pip,#pt-uv:checked~.pkx-pane.uv,#pt-poetry:checked~.pkx-pane.poetry{display:block}
.pkx .cmd{width:100%;margin:0;border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm);padding:13px 16px;font-size:.875rem}
.pkx .cmd .what{font-size:.6875rem;color:var(--term-dim);letter-spacing:.06em;text-transform:none;font-family:var(--sans);font-weight:600}
.pkx .cmd:hover .what{color:var(--term-ink)}
.pkx pre{font-size:.875rem;line-height:1.7;padding:18px 20px;border-radius:var(--r-sm)}
.pkx pre .c{color:var(--term-dim)}

/* 6. facts table ----------------------------------------------------------- */
.pkx-facts{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9375rem;display:table}
.pkx-facts col:first-child{width:200px}
.pkx-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)}
.pkx-facts td:first-child{font-weight:600;color:var(--ink)}
.pkx-facts .mono{font-family:var(--mono);font-size:.875rem;color:var(--ink)}
.pkx-facts small{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px}
.pkx-facts details summary{cursor:pointer;color:var(--violet-d);font-weight:600;list-style:none}
.pkx-facts details summary::-webkit-details-marker{display:none}
.pkx-facts details summary::after{content:" \203A";display:inline-block;transform:rotate(90deg);margin-left:2px}
.pkx-facts details[open] summary::after{transform:rotate(-90deg)}
.pkx-facts details .pkx-chips{margin-top:10px}
.pkx-chips{display:flex;flex-wrap:wrap;gap:6px}
.pkx-chip{font:500 .75rem/1 var(--mono);color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 10px;background:var(--card)}
.pkx-evidence{font-size:.8125rem;color:var(--ink-soft);margin-top:14px}
.pkx-evidence .mono{font-family:var(--mono);font-size:.75rem}

/* 7. tags: labelled groups -------------------------------------------------- */
.pkx-taggroup{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 12px;align-items:start;max-width:none}
.pkx-taggroup+.pkx-taggroup{margin-top:18px}
.pkx-taggroup .lbl{font-size:.875rem;font-weight:600;color:var(--ink);padding-top:6px}
.pkx .pills{margin:0}
.pkx .pill.pill-accent{background:var(--violet-t);border-color:var(--violet-t);color:var(--violet-d)}

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

/* 9. promo box, one container ------------------------------------------------ */
.pkx-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}
.pkx-skillfed>h2{margin-bottom:6px}
.pkx-skillfed .wish{margin-top:18px;font-size:.9375rem;color:var(--ink)}
.pkx-skillfed .wish b{font-family:var(--mono);font-weight:600;color:var(--violet-d)}
.pkx-skillfed .matches{list-style:none;padding:0;margin-top:10px;max-width:none}
.pkx-skillfed .matches li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:.875rem;color:var(--ink-soft)}
.pkx-skillfed .matches li:last-child{border-bottom:1px solid var(--line-soft)}
.pkx-skillfed .matches li+li{margin-top:0}
.pkx-skillfed .matches a{font-weight:600;flex:none;min-width:120px}
.pkx-skillfed .cmds{margin-top:18px;background:var(--term-bg);border-radius:var(--r-sm);padding:4px 6px}
.pkx-skillfed .cmds .cmd{border-radius:0;border-top:1px solid rgba(239,233,221,.09);padding:10px 10px}
.pkx-skillfed .cmds .cmd:first-child{border-top:none}
.pkx-skillfed .cmds .cmd.done .copied{border-radius:0}

/* 10. further reading + link groups ------------------------------------------- */
.pkx .note-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px}
.pkx-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}
.pkx-linkgroups h3{margin:0 0 8px;font-size:.8125rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.pkx-linkgroups ul{list-style:none;padding:0;margin:0}
.pkx-linkgroups li{font-size:.875rem;font-weight:600;line-height:1.5}
.pkx-linkgroups li+li{margin-top:6px}

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