/* pages.css - detail-page vocabulary (skill, package, publisher, best, chat,
   blog post, research note/direction/report, about, privacy, 404). Loaded
   ONLY by those templates via extra_head, so it never reaches the redesigned
   index pages. Tokens come from site.css, which always loads first.
   Budget <=12KB (tests/test_base_template.py). */
main{padding:24px 0 48px}
h1{font-size:clamp(1.75rem,4.5vw,2.25rem);line-height:1.15;letter-spacing:-0.02em;margin:14px 0 6px}
.lede{font-size:1.0625rem;color:var(--ink-soft);margin:0;max-width:46rem;text-wrap:pretty}
.direct-answer{font-size:0.9375rem;color:var(--ink-soft);margin:8px 0 0;max-width:46rem;text-wrap:pretty}
h2{font-size:1.375rem;letter-spacing:-0.01em;line-height:1.25;margin:0 0 4px}
h3{font-size:1rem;margin:0 0 4px}
section{margin:38px 0 0}
.kicker{font:500 0.8125rem/1.4 var(--mono);color:var(--muted);margin:2px 0 16px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:650;padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
.badge-pass{background:var(--green-t);color:var(--green-ink)}
.badge-flag{background:var(--coral-t);color:var(--coral-ink)}
.badge-neutral{background:var(--amber-t);color:var(--amber-ink)}
.badge.mini{font-size:0.6875rem;padding:3px 9px}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:20px 0 0;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.trust .stat{display:inline-flex;align-items:center;gap:6px;font-size:0.875rem;color:var(--ink-soft);overflow-wrap:anywhere}
.trust .stat b{color:var(--ink);font-weight:600}
.chip{display:inline-flex;align-items:center;font:500 0.75rem/1 var(--mono);padding:5px 10px;border-radius:var(--r-pill);background:var(--violet-t);color:var(--violet-ink)}
.pill{font-size:0.8125rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;background:var(--card)}
.pill:hover{border-color:var(--violet);text-decoration:none;color:var(--violet-ink)}
.tabs{margin-top:16px}
.tabs>input{position:absolute;width:1px;height:1px;opacity:0}
.tabbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:-1px;position:relative;z-index:1}
.tabbar label{font-size:0.875rem;font-weight:600;color:var(--ink-soft);padding:8px 16px;border:1px solid transparent;border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer}
.tabbar .soon{font-size:0.8125rem;color:var(--muted);padding:8px 12px}
.tabbar .soon em{font-style:normal;font-size:0.6875rem;font-weight:650;text-transform:uppercase;letter-spacing:0.05em;background:var(--amber-t);color:var(--amber-ink);border-radius:var(--r-pill);padding:2px 8px;margin-left:6px}
#i-man:checked~.tabbar label[for="i-man"],#i-git:checked~.tabbar label[for="i-git"]{background:var(--code-bg);color:var(--code-ink);border-color:var(--code-bg)}
#i-man:focus-visible~.tabbar label[for="i-man"],#i-git:focus-visible~.tabbar label[for="i-git"]{outline:2px solid var(--violet);outline-offset:2px}
.tabs .panel{display:none}
#i-man:checked~.p-man,#i-git:checked~.p-git{display:block}
pre{margin:0;background:var(--code-bg);color:var(--code-ink);font:0.8125rem/1.7 var(--mono);padding:18px 20px;border-radius:var(--r-sm);overflow-x:auto}
.tabs pre{border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm)}
code{font:0.85em var(--mono);background:var(--violet-t);color:var(--violet-ink);padding:1px 6px;border-radius:6px}
pre code{background:none;color:inherit;padding:0;font-size:inherit}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}
.col-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px}
.col-card h3{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-g{background:var(--green)}
.dot-c{background:var(--coral)}
.list{margin:8px 0 0;padding-left:18px;color:var(--ink-soft)}
.list li{margin:4px 0}
.table{width:100%;border-collapse:collapse;font-size:0.875rem;margin-top:10px;display:block;overflow-x:auto}
.table th{text-align:left;font:600 0.6875rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line)}
.table td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.table td:first-child{font-weight:600;color:var(--ink)}
.table td:last-child,.table th:last-child{text-align:right}
.table td:last-child{font-family:var(--mono)}
.scan{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);margin-top:12px}
.scan b{font-weight:650}
.scan .verdict{color:var(--green-ink);font-weight:650;font-size:0.875rem}
.scan .date{color:var(--muted);font-size:0.8125rem;margin-left:auto}
.scan.flagged{border-color:var(--coral);background:var(--coral-t)}
.scan.flagged .verdict{color:var(--coral-ink)}
.report-link{display:inline-block;margin-top:12px;font-weight:600;font-size:0.875rem}
.faq div{margin-top:18px}
.faq p{margin:0;color:var(--ink-soft);max-width:46rem}
.quoted{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--violet);border-radius:var(--r-md);padding:8px 26px 20px;margin-top:14px;color:var(--ink-soft)}
.quoted h3{font-size:1.125rem;color:var(--ink);margin:18px 0 6px}
.quoted h4{font-size:0.9375rem;color:var(--ink);margin:16px 0 4px}
.quoted p,.quoted li{font-size:0.9063rem}
.quoted ol,.quoted ul{padding-left:20px}
.quoted blockquote{margin:10px 0;padding:2px 16px;border-left:3px solid var(--amber);color:var(--muted)}
.src-note{font:0.75rem var(--mono);color:var(--muted);margin:14px 0 0}
details.tree{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
details.tree summary{cursor:pointer;font-weight:600;font-size:0.875rem;padding:11px 16px}
details.tree pre{border-radius:0 0 var(--r-sm) var(--r-sm)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;color:inherit;box-shadow:var(--shadow-card)}
.card:hover{text-decoration:none;border-color:var(--violet)}
.card b{display:block;font-size:0.9375rem;color:var(--ink)}
.card p{margin:4px 0 10px;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.link-list-nav{margin-top:24px}
.link-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.mini{font-size:0.6875rem;padding:3px 9px}
.linkrow{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:0.875rem;font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.note-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.note-card{display:block;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;color:inherit}
.note-card:hover{text-decoration:none;border-color:var(--violet)}
.note-card b{display:block;font-size:0.875rem;line-height:1.4;color:var(--ink)}
.note-card span{display:block;margin-top:6px;font-size:0.75rem;color:var(--muted)}
.eyebrow{display:block;font:650 0.6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px}
.featured-note-card{display:block;background:var(--violet-t);border-radius:var(--r-md);padding:18px 22px;margin-top:14px;color:inherit}
.featured-note-card:hover{text-decoration:none}
.featured-note-card .eyebrow{color:var(--violet-ink)}
.featured-note-card b{display:block;font-size:1rem;color:var(--ink)}
.featured-note-card p{margin:4px 0 0;font-size:0.875rem;color:var(--ink-soft)}
@media (max-width:680px){.cols{grid-template-columns:1fr}.scan .date{margin-left:0;width:100%}}
.research-note{max-width:var(--read)}
.cite-line{margin:12px 0 0;font-size:0.9063rem;color:var(--muted)}
.label-chip{display:inline-flex;align-items:center;font:500 0.75rem/1 var(--mono);padding:6px 12px;border-radius:var(--r-pill);background:var(--amber-t);color:var(--amber-ink);margin-top:16px}
.research-note article>p{margin:16px 0 0;color:var(--ink-soft);text-wrap:pretty}
.keynums{width:100%;border-collapse:collapse;margin-top:4px}
.keynums td{padding:13px 2px;border-bottom:1px solid var(--line);font-size:0.9375rem;color:var(--ink-soft)}
.keynums td:last-child{font:650 1.375rem/1.2 var(--mono);color:var(--violet-ink);text-align:right;white-space:nowrap}
.keynums .bad td:last-child{color:var(--coral-ink)}
.editorial{margin-top:28px;padding-left:22px;border-left:3px solid var(--violet)}
.editorial h2{margin:0 0 2px}
.skill-rows{margin-top:4px}
.skill-row{display:block;padding:14px 2px;border-bottom:1px solid var(--line);color:inherit}
.skill-row:hover{text-decoration:none}
.skill-row:hover .sname{color:var(--violet-ink)}
.skill-row .sname{font-weight:650;color:var(--ink);margin-right:10px}
.skill-row .sdesc{color:var(--ink-soft);font-size:0.9375rem}
.skill-row .smeta{display:block;font-size:0.8125rem;color:var(--muted);margin-top:2px}
.skill-row .smeta b{color:var(--green-ink);font-weight:650}
.note-links{list-style:none;margin:4px 0 0;padding:0}
.note-links li{padding:6px 0}
.note-links a{font-weight:600;font-size:0.9375rem}
.refs{margin:10px 0 0;padding-left:20px;font-size:0.8125rem;color:var(--muted);line-height:1.6}
.refs li{margin:6px 0}
.card-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.fieldfig{margin:26px 0 0}
.figscroll{overflow-x:auto}
.figframe{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card);box-shadow:var(--shadow-card);min-width:340px}
.figframe svg{display:block;width:100%;height:auto}
figcaption{font-size:0.8125rem;color:var(--muted);margin-top:12px;line-height:1.6}
.spark{display:block;margin:8px 0 0;color:var(--muted)}
.dlink{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dmeta{color:var(--muted);font-family:var(--mono);font-size:0.75rem}
.dcount{font:500 0.8125rem var(--mono);color:var(--muted);margin-left:8px}
.chip-bridge{background:var(--card);border:1px dashed var(--muted);color:var(--ink-soft)}
a.chip:hover{text-decoration:none}
.label-chip+.chip,.chip+.chip{margin-left:8px;margin-top:16px}
.dir-notes{scroll-margin-top:16px}
.dir-head-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;margin-top:18px}
.dir-head-row .spark{margin:0}
h1 .dcount{font-size:0.9375rem;vertical-align:middle}
.report-body h2{font-size:1.25rem;margin:40px 0 8px}
pre a{color:var(--code-ink);text-decoration:underline;text-underline-offset:3px}
.inst{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.inst code{font:500 0.875rem/1 var(--mono);background:var(--code-bg);color:var(--code-ink);padding:9px 14px;border-radius:var(--r-sm);white-space:nowrap}
.inst span{font-size:0.8125rem;color:var(--muted)}
.scope{margin:0 0 18px;font-size:0.9375rem;color:var(--muted);max-width:40rem}
.blog-post .intro{max-width:40rem;font-size:1.125rem;line-height:1.75}
.blog-post .intro h2{font-size:1.5rem;margin:42px 0 10px}
.blog-post .intro h3{font-size:1.1875rem;margin:30px 0 6px}
.blog-post .intro p{margin:16px 0 0;color:var(--ink-soft);text-wrap:pretty}
.blog-post .intro ul,.blog-post .intro ol{margin:14px 0 0;padding-left:22px;color:var(--ink-soft)}
.blog-post .intro li{margin:6px 0}
.blog-post .tile-grid{margin-top:48px}
.tile-meta{display:block;font:500 0.75rem/1.6 var(--mono);color:var(--muted)}