/* ============================================================
   prose-kit.css — an (almost excessive) library of editorial &
   data-display components for the blog/wiki. Built entirely on
   CleverThis tokens, so everything adapts to light & dark.
   Load AFTER site.css on article pages.
   Convention: every class is prefixed .pk-
   ============================================================ */

/* ============================================================
   1 · TYPOGRAPHY
   ============================================================ */
.pk-lead { font: 400 21px/1.6 var(--font-sans); color: var(--fg2); margin: 0 0 26px; text-wrap: pretty; }
.pk-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin: 0 0 12px; }
.pk-kicker.gold { color: var(--accent); }
.pk-kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* drop cap on the paragraph it's applied to */
.pk-dropcap::first-letter { float: left; font: 700 64px/0.82 var(--font-display); color: var(--primary); margin: 6px 12px 0 0; }
.pk-dropcap.gold::first-letter { color: var(--accent); }

/* numbered section headings via counter */
.pk-numbered { counter-reset: pk-h; }
.pk-numbered h2 { display: flex; align-items: baseline; gap: 14px; }
.pk-numbered h2::before { counter-increment: pk-h; content: counter(pk-h, decimal-leading-zero); font: 700 16px/1 var(--font-mono); color: var(--primary); background: var(--primary-subtle); border-radius: var(--radius-sm); padding: 6px 9px; align-self: center; }

/* inline text treatments */
.pk-mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 38%, transparent) 0); padding: 0 1px; }
.pk-mark.teal { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--primary) 30%, transparent) 0); }
.pk-u { color: var(--primary); font-weight: 600; }
.pk-kbd { display: inline-flex; align-items: center; font: 600 12px/1 var(--font-mono); color: var(--fg1); background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 3px 7px; }
.pk-tagx { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1 var(--font-mono); color: var(--fg2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 9px; }
.pk-sc { font-variant: small-caps; letter-spacing: .04em; color: var(--fg2); }

/* pull quotes */
.pk-pull { margin: 30px 0; padding: 0; border: none; text-align: center; }
.pk-pull p { font: 600 26px/1.32 var(--font-display); letter-spacing: -0.02em; color: var(--fg1); margin: 0; text-wrap: balance; }
.pk-pull .pk-pull-cite { display: block; font: 500 13px/1.4 var(--font-mono); color: var(--fg3); margin-top: 14px; }
.pk-pull-bar { padding-left: 24px; border-left: 4px solid var(--accent); text-align: left; }

/* margin / side note (floats beside text on wide screens) */
.pk-sidenote { float: right; clear: right; width: 220px; margin: 6px -180px 16px 24px; font: 400 13px/1.55 var(--font-sans); color: var(--fg3); border-left: 2px solid var(--accent); padding-left: 14px; }
@media (max-width: 1100px) { .pk-sidenote { float: none; width: auto; margin: 16px 0; } }

/* footnote ref + list */
.pk-fnref { font-size: 0.7em; vertical-align: super; color: var(--primary); font-weight: 700; text-decoration: none; padding: 0 1px; }
.pk-footnotes { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); font: 400 13.5px/1.6 var(--font-sans); color: var(--fg2); }
.pk-footnotes li { margin-bottom: 8px; }

/* ============================================================
   2 · CALLOUTS / ADMONITIONS  (color = meaning)
   ============================================================ */
.pk-call { display: grid; grid-template-columns: 44px 1fr; gap: 0; margin: 26px 0; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.pk-call-ic { display: grid; place-items: start center; padding: 16px 0 0; }
.pk-call-ic .material-symbols-rounded { font-size: 22px; }
.pk-call-body { padding: 15px 18px 15px 4px; }
.pk-call-title { font: 700 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 7px; }
.pk-call-body p { font: 400 15px/1.62 var(--font-sans); color: var(--fg1); margin: 0; }
.pk-call-body p + p { margin-top: 10px; }
.pk-call.info    { border-left-color: var(--info);    background: color-mix(in srgb, var(--info-bg) 60%, var(--surface)); }
.pk-call.info    .pk-call-ic, .pk-call.info .pk-call-title    { color: var(--info-fg); }
.pk-call.tip     { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary-subtle) 70%, var(--surface)); }
.pk-call.tip     .pk-call-ic, .pk-call.tip .pk-call-title     { color: var(--primary); }
.pk-call.success { border-left-color: var(--success); background: color-mix(in srgb, var(--success-bg) 60%, var(--surface)); }
.pk-call.success .pk-call-ic, .pk-call.success .pk-call-title { color: var(--success-fg); }
.pk-call.warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning-bg) 60%, var(--surface)); }
.pk-call.warning .pk-call-ic, .pk-call.warning .pk-call-title { color: var(--warning-fg); }
.pk-call.danger  { border-left-color: var(--error);   background: color-mix(in srgb, var(--error-bg) 60%, var(--surface)); }
.pk-call.danger  .pk-call-ic, .pk-call.danger .pk-call-title  { color: var(--error-fg); }
.pk-call.key     { border-left-color: var(--accent);  background: color-mix(in srgb, var(--accent-subtle) 70%, var(--surface)); }
.pk-call.key     .pk-call-ic, .pk-call.key .pk-call-title     { color: var(--gold-700); }
[data-theme="dark"] .pk-call.key .pk-call-ic, [data-theme="dark"] .pk-call.key .pk-call-title { color: var(--gold-300); }

/* TL;DR box */
.pk-tldr { display: flex; gap: 16px; align-items: flex-start; margin: 26px 0; padding: 20px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pk-tldr-badge { font: 700 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--fg-on-teal); background: var(--primary); border-radius: var(--radius-sm); padding: 7px 9px; flex: none; }
.pk-tldr p { font: 500 15.5px/1.6 var(--font-sans); color: var(--fg1); margin: 0; }

/* key takeaways */
.pk-takeaways { margin: 26px 0; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); position: relative; }
.pk-takeaways h4 { font: 700 12px/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.pk-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pk-takeaways li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 400 15px/1.55 var(--font-sans); color: var(--fg1); }
.pk-takeaways li .material-symbols-rounded { font-size: 19px; color: var(--primary); }

/* ============================================================
   3 · STATS · KPI · METERS · RATINGS
   ============================================================ */
.pk-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.pk-kpi { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.pk-kpi .pk-kpi-label { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.pk-kpi .pk-kpi-val { font: 700 34px/1 var(--font-display); letter-spacing: -0.02em; color: var(--fg1); margin: 10px 0 4px; }
.pk-kpi .pk-kpi-val small { font-size: 16px; color: var(--fg3); font-weight: 600; }
.pk-kpi .pk-delta { display: inline-flex; align-items: center; gap: 3px; font: 600 12.5px/1 var(--font-mono); }
.pk-kpi .pk-delta.up { color: var(--success); }
.pk-kpi .pk-delta.down { color: var(--error); }
.pk-kpi .pk-delta .material-symbols-rounded { font-size: 15px; }
.pk-kpi.accent { border-top: 3px solid var(--accent); }
.pk-kpi.primary { border-top: 3px solid var(--primary); }

/* labeled meter / progress */
.pk-meters { margin: 24px 0; display: grid; gap: 16px; }
.pk-meter .pk-meter-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.pk-meter .pk-meter-name { font: 500 14px/1 var(--font-sans); color: var(--fg1); }
.pk-meter .pk-meter-val { font: 600 13px/1 var(--font-mono); color: var(--fg2); }
.pk-meter-track { height: 10px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.pk-meter-fill { height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.pk-meter-fill.gold { background: var(--accent); }
.pk-meter-fill.blue { background: var(--info); }
.pk-meter-fill.grad { background: linear-gradient(90deg, var(--teal-600), var(--teal-400)); }

/* dot rating */
.pk-rating { display: inline-flex; gap: 4px; vertical-align: middle; }
.pk-rating i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); display: inline-block; }
.pk-rating i.on { background: var(--primary); }
.pk-rating i.on.gold { background: var(--accent); }

/* ============================================================
   4 · DATA VIZ  (CSS/conic — no libraries)
   ============================================================ */
/* horizontal bar chart */
.pk-bars { margin: 24px 0; display: grid; gap: 12px; }
.pk-bar { display: grid; grid-template-columns: 120px 1fr 48px; gap: 12px; align-items: center; }
.pk-bar .pk-bar-name { font: 500 13px/1.3 var(--font-sans); color: var(--fg1); text-align: right; }
.pk-bar .pk-bar-track { height: 22px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.pk-bar .pk-bar-fill { height: 100%; background: var(--primary); display: flex; align-items: center; }
.pk-bar .pk-bar-fill.gold { background: var(--accent); }
.pk-bar .pk-bar-fill.blue { background: var(--info); }
.pk-bar .pk-bar-fill.muted { background: var(--neutral-400); }
.pk-bar .pk-bar-val { font: 600 13px/1 var(--font-mono); color: var(--fg2); }

/* donut + legend */
.pk-donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin: 26px 0; }
.pk-donut { width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.pk-donut::after { content: ""; position: absolute; inset: 26px; background: var(--surface); border-radius: 50%; }
.pk-donut .pk-donut-center { position: relative; z-index: 1; text-align: center; }
.pk-donut .pk-donut-center b { font: 700 24px/1 var(--font-display); color: var(--fg1); }
.pk-donut .pk-donut-center span { display: block; font: 400 10px/1.2 var(--font-mono); color: var(--fg3); margin-top: 2px; }
.pk-legend { display: grid; gap: 9px; }
.pk-legend div { display: flex; align-items: center; gap: 9px; font: 400 13.5px/1.3 var(--font-sans); color: var(--fg1); }
.pk-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pk-legend b { margin-left: auto; font: 600 13px/1 var(--font-mono); color: var(--fg2); padding-left: 16px; }

/* inline sparkline (author the <svg> in HTML) */
.pk-spark { display: inline-block; vertical-align: middle; }
.pk-spark svg { display: block; overflow: visible; }

/* ============================================================
   5 · TABLES · MATRIX
   ============================================================ */
.pk-table-wrap { margin: 26px 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.pk-table { width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--font-sans); min-width: 460px; }
table.pk-table thead th { text-align: left; font: 600 12px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); background: var(--surface-2); padding: 13px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.pk-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--divider); color: var(--fg1); }
table.pk-table tbody tr:last-child td { border-bottom: none; }
table.pk-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
table.pk-table tbody tr:hover { background: var(--primary-subtle); }
table.pk-table td.num, table.pk-table th.num { text-align: right; font-family: var(--font-mono); }
table.pk-table .pk-row-head { font-weight: 600; color: var(--fg1); }
.pk-yes { color: var(--success); } .pk-no { color: var(--error); } .pk-mid { color: var(--warning); }
.pk-cell-ic { display: inline-flex; }
.pk-cell-ic .material-symbols-rounded { font-size: 19px; }

/* ============================================================
   6 · PROS/CONS · TIER · STEPS · CHECKLIST · DEFLIST
   ============================================================ */
.pk-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.pk-pc { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.pk-pc h4 { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; margin: 0; padding: 14px 16px; }
.pk-pc.pro h4 { color: var(--success-fg); background: color-mix(in srgb, var(--success-bg) 55%, var(--surface)); }
.pk-pc.con h4 { color: var(--error-fg); background: color-mix(in srgb, var(--error-bg) 55%, var(--surface)); }
.pk-pc ul { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 9px; }
.pk-pc li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; font: 400 14px/1.5 var(--font-sans); color: var(--fg1); }
.pk-pc li .material-symbols-rounded { font-size: 18px; }
.pk-pc.pro li .material-symbols-rounded { color: var(--success); }
.pk-pc.con li .material-symbols-rounded { color: var(--error); }

/* tier list */
.pk-tier { margin: 26px 0; display: grid; gap: 8px; }
.pk-tier-row { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: stretch; }
.pk-tier-badge { display: grid; place-items: center; font: 700 20px/1 var(--font-display); color: #fff; border-radius: var(--radius-md); }
.pk-tier-badge.s { background: var(--error); }
.pk-tier-badge.a { background: var(--accent); color: var(--fg-on-gold); }
.pk-tier-badge.b { background: var(--primary); }
.pk-tier-badge.c { background: var(--info); }
.pk-tier-badge.d { background: var(--neutral-400); }
.pk-tier-items { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pk-tier-items span { font: 500 13px/1 var(--font-mono); color: var(--fg1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; }

/* numbered steps */
.pk-steps { margin: 26px 0; display: grid; gap: 0; counter-reset: pk-step; position: relative; }
.pk-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 22px; position: relative; }
.pk-step:last-child { padding-bottom: 0; }
.pk-step::before { counter-increment: pk-step; content: counter(pk-step); position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--fg-on-teal); font: 700 16px/40px var(--font-display); text-align: center; }
.pk-step::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--border); }
.pk-step:last-child::after { display: none; }
.pk-step .pk-step-body h4 { font: 600 16px/1.3 var(--font-sans); color: var(--fg1); margin: 7px 0 4px; }
.pk-step .pk-step-body p { font: 400 14.5px/1.6 var(--font-sans); color: var(--fg2); margin: 0; }

/* checklist */
.pk-check { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.pk-check li { display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: start; font: 400 15px/1.55 var(--font-sans); color: var(--fg1); }
.pk-check li .material-symbols-rounded { font-size: 21px; color: var(--success); }
.pk-check li.off .material-symbols-rounded { color: var(--fg4); }
.pk-check li.off { color: var(--fg3); }

/* definition / glossary list */
.pk-defs { margin: 26px 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.pk-def { display: grid; grid-template-columns: 180px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.pk-def dt { font: 600 14.5px/1.4 var(--font-mono); color: var(--primary); }
.pk-def dd { margin: 0; font: 400 14.5px/1.6 var(--font-sans); color: var(--fg2); }

/* spec / key-value sheet */
.pk-spec { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pk-spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-bottom: 1px solid var(--divider); }
.pk-spec-row:last-child { border-bottom: none; }
.pk-spec-row dt { font: 500 13px/1.5 var(--font-sans); color: var(--fg2); background: var(--surface-2); padding: 13px 16px; }
.pk-spec-row dd { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--fg1); padding: 13px 16px; font-family: var(--font-mono); }

/* ============================================================
   7 · CARDS · FEATURE ROWS
   ============================================================ */
.pk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.pk-cards.two { grid-template-columns: repeat(2, 1fr); }
.pk-mini { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.pk-mini .pk-mini-ic { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-subtle); margin-bottom: 12px; }
.pk-mini .pk-mini-ic .material-symbols-rounded { color: var(--primary); font-size: 22px; }
.pk-mini.gold .pk-mini-ic { background: var(--accent-subtle); }
.pk-mini.gold .pk-mini-ic .material-symbols-rounded { color: var(--gold-600); }
.pk-mini h4 { font: 600 15.5px/1.3 var(--font-sans); color: var(--fg1); margin: 0 0 6px; }
.pk-mini p { font: 400 13.5px/1.55 var(--font-sans); color: var(--fg2); margin: 0; }

.pk-feature { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.pk-feature:last-child { border-bottom: none; }
.pk-feature .pk-feature-ic { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); }
.pk-feature .pk-feature-ic .material-symbols-rounded { font-size: 24px; color: var(--primary); }
.pk-feature h4 { font: 600 16px/1.3 var(--font-sans); margin: 4px 0 4px; color: var(--fg1); }
.pk-feature p { font: 400 14px/1.6 var(--font-sans); color: var(--fg2); margin: 0; }

/* status badges */
.pk-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--font-sans); letter-spacing: .03em; padding: 5px 10px; border-radius: var(--radius-pill); }
.pk-badge .material-symbols-rounded { font-size: 14px; }
.pk-badge.ok { color: var(--success-fg); background: var(--success-bg); }
.pk-badge.warn { color: var(--warning-fg); background: var(--warning-bg); }
.pk-badge.err { color: var(--error-fg); background: var(--error-bg); }
.pk-badge.info { color: var(--info-fg); background: var(--info-bg); }
.pk-badge.neutral { color: var(--fg2); background: var(--surface-2); border: 1px solid var(--border); }

/* ============================================================
   8 · CODE · KBD · FILE TREE · ANNOTATED · TERMINAL
   ============================================================ */
.pk-codeblock { margin: 26px 0; border: 1px solid #232a29; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elev-2); }
.pk-code-head { display: flex; align-items: center; gap: 9px; padding: 10px 16px; background: #0b0f0e; border-bottom: 1px solid #232a29; }
.pk-code-head .pk-fname { font: 500 12.5px/1 var(--font-mono); color: #9aa3a1; }
.pk-code-head .pk-lang { margin-left: auto; font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-400); background: rgba(41,167,141,.16); padding: 4px 8px; border-radius: var(--radius-sm); }
.pk-codeblock pre { margin: 0; padding: 16px 18px; background: #0E1211; overflow-x: auto; }
.pk-codeblock pre code { font: 400 13.5px/1.75 var(--font-mono); color: #C9D1D0; background: none; border: none; padding: 0; }

.pk-filetree { margin: 26px 0; padding: 18px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); font: 400 13.5px/1.85 var(--font-mono); color: var(--fg2); }
.pk-filetree .d { color: var(--primary); font-weight: 600; }
.pk-filetree .f { color: var(--fg1); }
.pk-filetree .c { color: var(--fg4); }

/* annotated code: code + numbered notes */
.pk-annot { margin: 26px 0; }
.pk-annot .pk-note-pin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--fg-on-gold); font: 700 11px/1 var(--font-mono); vertical-align: middle; }
.pk-annot-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pk-annot-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 400 14px/1.55 var(--font-sans); color: var(--fg2); }

/* ============================================================
   9 · DIAGRAM (flow of boxes)
   ============================================================ */
.pk-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin: 26px 0; }
.pk-node { flex: 1; min-width: 120px; padding: 16px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.pk-node .material-symbols-rounded { font-size: 24px; color: var(--primary); }
.pk-node .pk-node-t { font: 600 13.5px/1.3 var(--font-sans); color: var(--fg1); margin-top: 6px; }
.pk-node .pk-node-s { font: 400 11.5px/1.3 var(--font-mono); color: var(--fg3); margin-top: 3px; }
.pk-node.accent { border-color: var(--accent); border-width: 1px; box-shadow: inset 0 0 0 1px var(--accent); }
.pk-arrow { display: grid; place-items: center; padding: 0 6px; color: var(--fg4); flex: none; }
.pk-arrow .material-symbols-rounded { font-size: 22px; }
@media (max-width: 640px) { .pk-flow { flex-direction: column; } .pk-arrow { transform: rotate(90deg); padding: 6px 0; } }

/* tree / hierarchy (reuses indentation) */
.pk-tree { margin: 26px 0; }
.pk-tree-node { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 9px; box-shadow: var(--elev-1); }
.pk-tree-node .material-symbols-rounded { font-size: 18px; }
.pk-tree-node .pk-tree-label { font: 600 13px/1 var(--font-mono); color: var(--fg1); }
.pk-tree-node .pk-tree-kind { margin-left: auto; font: 500 11px/1 var(--font-sans); color: var(--fg3); }
.pk-tree-children { border-left: 2px solid var(--border-strong); margin-left: 16px; padding-left: 18px; }

/* ============================================================
   10 · TABS (CSS-only) · ACCORDION · QUOTE CARD · BANNER
   ============================================================ */
.pk-tabs { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pk-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.pk-tabbar { display: flex; gap: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pk-tabbar label { font: 600 13.5px/1 var(--font-sans); color: var(--fg2); padding: 14px 18px; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--dur-fast); }
.pk-tabbar label:hover { color: var(--fg1); }
.pk-tab-panel { display: none; padding: 20px 22px; }
.pk-tab-panel p { margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--fg1); }
.pk-tabs input:nth-of-type(1):checked ~ .pk-tabbar label:nth-of-type(1),
.pk-tabs input:nth-of-type(2):checked ~ .pk-tabbar label:nth-of-type(2),
.pk-tabs input:nth-of-type(3):checked ~ .pk-tabbar label:nth-of-type(3) { color: var(--primary); border-bottom-color: var(--primary); }
/* panels are <div>s; .pk-tabbar is the 1st div, so panels are div-of-type 2,3,4 */
.pk-tabs input:nth-of-type(1):checked ~ .pk-tab-panel:nth-of-type(2),
.pk-tabs input:nth-of-type(2):checked ~ .pk-tab-panel:nth-of-type(3),
.pk-tabs input:nth-of-type(3):checked ~ .pk-tab-panel:nth-of-type(4) { display: block; }

.pk-acc { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.pk-acc summary { cursor: pointer; list-style: none; padding: 15px 18px; font: 600 15px/1.3 var(--font-sans); color: var(--fg1); display: flex; align-items: center; gap: 10px; }
.pk-acc summary::-webkit-details-marker { display: none; }
.pk-acc summary .material-symbols-rounded { margin-left: auto; transition: transform var(--dur-fast); color: var(--fg3); }
.pk-acc[open] summary .material-symbols-rounded { transform: rotate(180deg); }
.pk-acc .pk-acc-body { padding: 0 18px 16px; font: 400 14.5px/1.65 var(--font-sans); color: var(--fg2); }

.pk-quotecard { display: flex; gap: 16px; align-items: center; margin: 26px 0; padding: 22px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-md); background: var(--surface); }
.pk-quotecard .pk-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.pk-quotecard blockquote { margin: 0; font: 500 16px/1.5 var(--font-sans); color: var(--fg1); }
.pk-quotecard .pk-q-who { font: 600 13px/1.3 var(--font-sans); color: var(--fg1); margin-top: 8px; }
.pk-quotecard .pk-q-role { font: 400 12px/1.3 var(--font-mono); color: var(--fg3); }

.pk-banner { margin: 30px 0; padding: 28px 30px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(135deg, var(--primary-subtle), color-mix(in srgb, var(--accent-subtle) 60%, transparent)); }
.pk-banner h3 { font: 700 24px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--fg1); margin: 0 0 8px; }
.pk-banner p { font: 400 15.5px/1.6 var(--font-sans); color: var(--fg2); margin: 0; }

/* ============================================================
   GENERIC LAYOUT HELPERS
   ============================================================ */
.pk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; }
.pk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; }
.pk-divider { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
.pk-divider.dots { border: none; height: 4px; background: radial-gradient(circle, var(--border-strong) 1.4px, transparent 1.6px) 0 0 / 16px 4px repeat-x; margin: 36px auto; width: 120px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .pk-kpi-row, .pk-cards, .pk-cards.two, .pk-grid-2, .pk-grid-3, .pk-proscons, .pk-donut-wrap { grid-template-columns: 1fr; }
  .pk-bar { grid-template-columns: 90px 1fr 40px; }
  .pk-def, .pk-spec-row { grid-template-columns: 1fr; gap: 4px; }
  .pk-spec-row dt { background: var(--surface-2); }
  .pk-tabbar { overflow-x: auto; }
  .pk-pull p { font-size: 21px; }
}