/* Layout: one reading column; figures sit beside their caption and drawing recipe to use the width */
.vkn{
  --paper:#EEF4FB; --sheet:#FFFFFF; --ink:#0B1530; --muted:#3B4763; --line:#C9D6EA;
  --pen:#0A35A8; --red:#A3161E; --green:#1D6B3A; --sun:#F2B300;
  --hl:rgba(255,203,69,.62); --tag-bg:#DCE6FA; --tag-fg:#0A35A8; --trap-bg:#FBE7E8;
  --res-bg:#EEF3FE; --sn-bg:#FFEDB8; --sn-fg:#6A4A00; --band:#DCEBFA;
  --fig-ink:#0B1530; --fig-pen:#0A35A8; --fig-red:#A3161E; --fig-grid:#8E9FC2;
  --fig-shade:rgba(10,53,168,.16); --fig-shade-2:rgba(163,22,30,.16);
  --f-disp:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --f-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  color-scheme:light; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55; text-align:left;
}
.vkn *{box-sizing:border-box}
.vkn .vk-band{background:var(--band);border-bottom:3px solid var(--pen)}
.vkn .vk-band .in{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:22px 18px;display:grid;gap:8px}
.vkn .eyebrow{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pen);font-weight:700}
#panel .vkn .vk-band .in,#panel .vkn .vkn-main{max-width:none}
#panel .vkn{margin-top:10px;border-radius:10px}
@media (max-width:560px){#panel .vkn .vk-band .in,#panel .vkn .vkn-main{padding-left:10px;padding-right:10px}#panel .vkn section{padding:12px 11px}}
.vkn h1{font-family:var(--f-disp);font-weight:800;font-size:clamp(26px,4.6vw,38px);line-height:1.12;margin:0;color:var(--ink);text-wrap:balance}
.vkn .vk-lead{font-size:15.5px;color:var(--ink);margin:0}
.vkn .vk-lead b{color:var(--red)}
.vkn .stars{color:var(--sun);letter-spacing:2px}
.vkn .syl{font-size:14px;color:var(--muted);margin:0}
.vkn .toc{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px}
.vkn .toc a{color:var(--pen);text-decoration:none;border-bottom:1px dotted var(--pen);font-weight:600}
.vkn .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.vkn .btn-n{display:inline-flex;align-items:center;gap:6px;background:var(--pen);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:7px 14px;border-radius:7px}
.vkn .btn-n.ghost{background:var(--sheet);color:var(--pen);border:1.5px solid var(--pen)}

.vkn .vkn-main{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 32px;display:grid;gap:12px}
.vkn section{background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:16px 20px;display:grid;gap:9px;min-width:0;scroll-margin-top:12px}
@media (max-width:480px){.vkn section{padding:14px 13px}}
.vkn h2{font-family:var(--f-disp);font-size:21px;font-weight:700;margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;line-height:1.25;color:var(--ink)}
.vkn h2 .no{color:var(--pen);font-variant-numeric:tabular-nums}
.vkn h3{font-family:var(--f-disp);font-size:16.5px;font-weight:700;margin:4px 0 0;color:var(--ink)}
.vkn .imp{font-family:var(--f-body);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.vkn .imp .s{color:var(--sun)}
.vkn p,.vkn ul,.vkn ol{margin:0}
.vkn ul,.vkn ol{padding-left:21px;display:grid;gap:4px;margin:0}
.vkn ul{list-style:disc}
.vkn ul,.vkn ol,.vkn section,.vkn .vkn-main,.vkn .vk-steps>li>div{grid-template-columns:minmax(0,1fr)}
.vkn li{min-width:0}
.vkn ol{list-style:decimal}
.vkn li::marker{color:var(--pen)}
.vkn li{margin:0}
.vkn mark{background:linear-gradient(transparent 40%,var(--hl) 40%,var(--hl) 92%,transparent 92%);color:var(--ink);padding:0 2px;font-weight:700}
.vkn b{color:var(--ink)}
.vkn .tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--tag-fg);background:var(--tag-bg);border-radius:4px;padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.75;text-decoration:none}
.vkn a.tag:hover{text-decoration:underline}
.vkn .asked{font-size:14px;color:var(--muted)}
.vkn .m{font-family:var(--f-math);font-size:1.08em;white-space:nowrap}
.vkn .solved .m{white-space:normal}
.vkn .eq{font-family:var(--f-math);font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0 4px 14px;border-left:3px solid var(--sun);overflow-x:auto;line-height:1.5}
.vkn .eq .vk-n{font-family:var(--f-body);font-size:13px;color:var(--muted);white-space:nowrap}
.vkn .fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.9em;line-height:1.25;margin:0 2px}
.vkn .fr>span:first-child{border-bottom:1.2px solid currentColor;padding:0 3px}
.vkn .lim{display:inline-flex;flex-direction:column;font-size:.62em;line-height:1.05;vertical-align:middle;margin:0 2px 0 -1px}
.vkn .vk-big{font-size:1.35em;vertical-align:middle}
.vkn .box{display:inline-block;outline:1.6px solid var(--ink);outline-offset:3px;padding:0 4px}
.vkn ol.vk-steps{counter-reset:st;list-style:none;padding:0;display:grid;gap:8px}
.vkn .vk-steps>li{counter-increment:st;display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start}
.vkn .vk-steps>li::before{content:counter(st);font-family:var(--f-disp);font-weight:700;color:#fff;background:var(--pen);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12.5px;margin-top:2px}
.vkn .vk-steps>li>div{min-width:0;display:grid;gap:3px}
.vkn .result{background:var(--res-bg);border:1.6px solid var(--pen);border-radius:7px;padding:10px 14px;display:grid;gap:4px}
.vkn .result .h,.vkn .subtle .h,.vkn .gain .h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.vkn .result .h{color:var(--pen)}
.vkn .subtle{border-left:3px solid var(--pen);padding:4px 0 4px 13px;display:grid;gap:3px}
.vkn .subtle .h{color:var(--pen)}
.vkn .gain{border-left:3px solid var(--green);padding:4px 0 4px 13px;display:grid;gap:3px}
.vkn .gain .h{color:var(--green)}
.vkn .trap{background:var(--trap-bg);border-radius:6px;padding:6px 12px;font-size:15px;color:var(--ink)}
.vkn .trap b{color:var(--red)}
.vkn .solved{border:1.5px dashed var(--pen);border-radius:7px;padding:10px 14px;display:grid;gap:6px;background:#F7F9FE}
.vkn .solved .q{font-style:italic;color:var(--muted)}
.vkn .sn{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--sn-fg);background:var(--sn-bg);border-radius:3px;padding:0 4px;margin-left:6px;vertical-align:2px;line-height:1.6}

/* figure beside its caption and recipe */
.vkn figure{margin:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:6px 18px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.vkn figure .fig-wrap{overflow-x:auto}
.vkn figure svg{display:block;width:100%;height:auto;max-width:460px;margin:0 auto}
.vkn figure svg text{font-family:var(--f-hand)}
.vkn figure .vk-side{display:grid;gap:8px;align-content:center}
.vkn figcaption{font-size:14px;color:var(--muted);font-weight:600}
.vkn .draw{font-family:var(--f-hand);font-size:20px;line-height:1.28;color:var(--pen)}
.vkn .draw b{font-weight:700;color:var(--pen)}
@media (max-width:640px){.vkn figure{grid-template-columns:1fr}}
.vkn figure.wide{grid-template-columns:1fr}
.vkn figure.wide svg{max-width:640px}
.vkn figure.wide .vk-side{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:6px 18px;align-items:start}
@media (max-width:640px){.vkn figure.wide .vk-side{grid-template-columns:1fr}}

.vkn .tbl{overflow-x:auto}
.vkn table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:540px}
.vkn th,.vkn td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.vkn th{font-size:13px;font-weight:800;color:var(--ink);background:var(--res-bg)}
.vkn td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.vkn .vk-small{font-size:14px;color:var(--muted)}
.vkn a{color:var(--pen)}
.vkn .links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.vkn .legend{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}

/* PDF edition shown but locked until the VKC plan opens */
.vkn details.pdf-lock{display:inline-block;min-width:0}
.vkn details.pdf-lock[open]{flex-basis:100%}
.vkn details.pdf-lock>summary{list-style:none;cursor:pointer;background:var(--sheet);color:var(--ink);border:1.5px dashed var(--muted)}
.vkn details.pdf-lock>summary::-webkit-details-marker{display:none}
.vkn details.pdf-lock>summary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vkn .pl-tag{font-size:11px;font-weight:800;letter-spacing:.04em;background:var(--sun);color:#3A2A00;border-radius:4px;padding:1px 6px}
.vkn .pl-pop{margin-top:6px;max-width:440px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13.5px;line-height:1.45;color:var(--ink)}
@media print{
  .vkn{font-size:13.6px;background:#fff}
  .vkn .vkn-main{padding-block:8px 0;gap:8px;max-width:none}
  .vkn .vk-band .in{max-width:none;padding-block:10px}
  .vkn section{padding:10px 12px;gap:6px;border-color:#B9C6DE;break-inside:auto}
  .vkn figure,.vkn .result,.vkn .solved,.vkn table,.vkn .eq,.vkn h2,.vkn h3{break-inside:avoid}
  .vkn h2,.vkn h3{break-after:avoid}
  .vkn li,.vkn p,.vkn .subtle,.vkn .gain,.vkn .trap,.vkn tr{break-inside:avoid}
  .vkn section{display:block}
  .vkn section>*+*{margin-top:6px}
  .vkn .vk-band,.vkn mark,.vkn .tag,.vkn .sn,.vkn .trap,.vkn .result{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .vkn a{color:inherit;text-decoration:none}
  .vkn .actions{display:none}
}