/* KV Firearms Learning Center
   Palette taken from the bench: bluing, steel, parkerized green, walnut, brass. */
:root{
  --ink:#15202b; --ink2:#34414d; --muted:#56626c;
  --steel:#e3e6e7; --panel:#f8f9f9; --line:#c3c9cc; --line2:#dadfe1;
  --park:#34423c; --walnut:#7a4727; --walnut-d:#5c3419; --brass:#b88a2a; --brass-l:#dcb862;
  --ok:#22633c; --warn:#8c2a21;
  --r:6px;
  --fd:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --fb:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--steel);color:var(--ink);font:400 1.0625rem/1.6 var(--fb);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.08;margin:0;color:inherit}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem);letter-spacing:-.003em}
h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
h3{font-size:1.55rem}
p{margin:0 0 1em}
a{color:var(--walnut-d)}
a:hover{color:var(--ink)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* header + footer */
.draft{background:var(--brass-l);color:#2b2108;font-size:.9rem;padding:7px 0;text-align:center;font-weight:600}
.site-head{background:var(--ink);color:#fff}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#fff}
.brand b{font-family:var(--fd);font-size:1.7rem;font-weight:700;letter-spacing:.01em}
.brand span{font-family:var(--fd);font-size:1.15rem;color:var(--brass-l);font-weight:500}
.site-head nav{display:flex;gap:4px;flex-wrap:wrap}
.site-head nav a{color:#dfe5e8;text-decoration:none;padding:8px 12px;border-radius:4px;font-weight:500;font-size:.98rem}
.site-head nav a:hover,.site-head nav a.cur{background:rgba(255,255,255,.12);color:#fff}
.site-foot{background:var(--ink);color:#c9d1d5;margin-top:64px;padding:36px 0 44px;font-size:.95rem}
.site-foot .cols{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.site-foot h2{font-size:1.5rem;color:#fff;margin-bottom:10px}
.site-foot a{color:var(--brass-l)}
.site-foot .fine{font-size:.85rem;color:#a9b4ba;line-height:1.55}
.contact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--walnut);background:var(--walnut);color:#fff;padding:12px 20px;border-radius:var(--r);font-weight:600;text-decoration:none;line-height:1.2;min-height:46px}
.btn:hover{background:var(--walnut-d);border-color:var(--walnut-d);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink2)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:var(--brass-l);border-color:var(--brass-l);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* pips: level markers (shape + count, never colour alone) */
.pips{display:inline-flex;gap:4px;vertical-align:middle}
.pips i{width:10px;height:10px;border-radius:50%;border:2px solid currentColor;display:block;opacity:.55}
.pips i.on{background:var(--brass);border-color:var(--brass);opacity:1}

/* hero */
.hero{background:var(--ink);color:#f1f4f5;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.16) 1.1px,transparent 1.7px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(100deg,transparent 32%,#000 88%);mask-image:linear-gradient(100deg,transparent 32%,#000 88%)}
.hero .wrap{position:relative;padding-top:56px;padding-bottom:44px}
.hero h1{max-width:17ch}
.hero .sub{font-size:1.2rem;max-width:56ch;color:#d3dbde;margin:18px 0 0}
.knurl{height:12px;background:repeating-linear-gradient(45deg,#0e161e 0 2px,#27384a 2px 4px)}
.lanes-head{margin:36px 0 12px;font-family:var(--fd);font-size:1.5rem;font-weight:600}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lane{text-align:left;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.24);color:#fff;border-radius:var(--r);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.lane:hover{background:rgba(255,255,255,.11)}
.lane[aria-pressed=true]{border-color:var(--brass-l);background:rgba(255,255,255,.14)}
.lane .nm{font-family:var(--fd);font-size:1.9rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:space-between;gap:10px}
.lane .tg{font-weight:600;color:var(--brass-l)}
.lane .bl{font-size:.97rem;color:#cdd6da}
.lane .sel{font-size:.85rem;font-weight:600;color:var(--brass-l);min-height:1.2em}
.hero .alt{margin-top:18px;color:#cdd6da}
.hero .alt a{color:var(--brass-l)}

/* sections */
.sec{padding-top:56px}
.sec>.wrap>h2{margin-bottom:6px}
.sec .lede{max-width:64ch;color:var(--ink2);margin-bottom:26px}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:4px solid var(--ink)}
.path li{padding:16px 14px 18px 0;position:relative}
.path .n{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--muted)}
.path .nm{font-family:var(--fd);font-size:1.45rem;font-weight:700;line-height:1.1;margin:2px 0 6px}
.path .ds{font-size:.9rem;color:var(--ink2);line-height:1.45;margin-bottom:10px}
.path a.go{font-weight:600;font-size:.95rem}
.path .soon{font-size:.9rem;color:var(--muted);font-weight:600}
.path li.live .nm{color:var(--walnut-d)}
.check{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--walnut);border-radius:var(--r);padding:28px}
.check h2{margin-bottom:8px}
.check p{margin:0 0 14px;color:var(--ink2)}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.proof p{max-width:60ch}
.last{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin-top:16px;font-size:.95rem}

/* module screens */
.mod-head{padding-top:34px;padding-bottom:8px}
.mod-head h1{font-size:clamp(2.1rem,5vw,3.3rem)}
.mod-head .lede{color:var(--ink2);max-width:62ch;margin:10px 0 0}
.levelbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0 4px}
.levelbar .lab{font-weight:600}
.seg{display:inline-flex;border:2px solid var(--ink2);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:10px 16px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:center;border-right:2px solid var(--ink2);min-height:44px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button:hover:not([aria-pressed=true]){background:var(--line2)}
.qgrid{display:grid;grid-template-columns:260px 1fr;gap:32px;padding-top:18px;align-items:start}
.trail{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--line);position:relative}
.trail li{position:relative;padding:0 0 16px 14px;font-size:.93rem;line-height:1.35}
.trail li::before{content:"";position:absolute;left:-26px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--steel);border:3px solid var(--ink2)}
.trail li.now::before{border-color:var(--brass);background:var(--brass)}
.trail button{background:none;border:0;padding:0;text-align:left;color:inherit}
.trail .q{display:block;color:var(--muted);font-size:.85rem}
.trail .a{display:block;font-weight:600}
.trail button:hover .a{text-decoration:underline}
.trail .pend{color:var(--muted);font-style:italic}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.5vw,34px)}
.qcard h2{margin-bottom:14px;font-size:clamp(1.9rem,4vw,2.7rem)}
.qcard h2:focus{outline:none}
.teach{border-left:5px solid var(--brass);background:#fff;padding:14px 18px;margin:0 0 22px;color:var(--ink2);max-width:70ch}
.opts{display:grid;gap:10px}
.opt{text-align:left;border:2px solid var(--line);background:#fff;border-radius:var(--r);padding:15px 18px;display:flex;flex-direction:column;gap:3px;color:var(--ink);min-height:56px}
.opt b{font-size:1.1rem;font-weight:600}
.opt span{color:var(--muted);font-size:.95rem;line-height:1.4}
.opt:hover{border-color:var(--walnut);background:#fffdf9}
.q-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* result: spec sheet */
.res-head{padding-top:34px;padding-bottom:6px}
.res-head h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:20ch}
.res-head .why{font-size:1.15rem;color:var(--ink2);max-width:62ch;margin:14px 0 0}
.chain{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:20px 0 0;font-size:.9rem}
.chain li{background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:3px 12px}
.spec{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--ink);margin-top:26px;border-radius:0 0 var(--r) var(--r)}
.spec>header{padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.spec>header .tagline{margin:6px 0 0;color:var(--muted);font-size:1.02rem}
.spec dl{margin:0}
.spec .row{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:16px 24px;border-bottom:1px solid var(--line2)}
.spec .row:last-child{border-bottom:0}
.spec dt{font-family:var(--fd);font-weight:700;font-size:1.2rem;color:var(--ink2);line-height:1.25}
.spec dd{margin:0;max-width:68ch}
.spec ul{margin:0;padding-left:1.15em}
.spec li{margin:0 0 .4em}
.spec .kv dd{background:#fff;border-left:5px solid var(--walnut);padding:10px 14px}
.spec .small{font-size:.88rem;color:var(--muted);margin:6px 0 0}
.next h2,.more h2{margin:44px 0 12px}
.next ul{margin:0;padding-left:1.2em;max-width:70ch}
.next li{margin-bottom:.5em}
.minipath{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.minipath li{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:8px 14px;font-weight:600;font-size:.95rem}
.minipath li.done{background:var(--ink);color:#fff;border-color:var(--ink)}
.minipath li small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}
.minipath li.done small{color:var(--brass-l)}
.res-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.picker{padding:30px 0 10px}
.picker .lanes{margin-top:18px}
.picker .lane{background:var(--panel);color:var(--ink);border-color:var(--line)}
.picker .lane:hover{border-color:var(--walnut);background:#fff}
.picker .lane .tg{color:var(--walnut-d)}
.picker .lane .bl{color:var(--ink2)}
.picker .lane .pips{color:var(--ink)}

/* skill check */
.sc{max-width:820px;margin:0 auto;padding:34px 20px 0}
.sc h1{font-size:clamp(2.1rem,5vw,3.3rem);margin-bottom:12px}
.sc .intro{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.sc .intro ul{padding-left:1.2em;margin:0 0 20px}
.sc .intro li{margin-bottom:.4em}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.sc-count{font-family:var(--fd);font-size:1.3rem;font-weight:700}
.pbar{height:8px;background:var(--line2);border-radius:8px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--ink);transition:width .25s}
.meter{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
.notches{display:inline-flex;gap:4px;align-items:flex-end}
.notches i{width:9px;background:var(--line);display:block;border-radius:1px}
.notches i:nth-child(1){height:8px}.notches i:nth-child(2){height:12px}.notches i:nth-child(3){height:16px}.notches i:nth-child(4){height:20px}.notches i:nth-child(5){height:24px}
.notches i.on{background:var(--walnut)}
.qbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3.5vw,32px);margin-top:16px}
.qbox h2{font-size:clamp(1.55rem,3.4vw,2.1rem);line-height:1.15;margin-bottom:18px;font-family:var(--fb);font-weight:600;letter-spacing:0}
.choice{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);background:#fff;border-radius:var(--r);padding:13px 16px;margin-bottom:10px;cursor:pointer;line-height:1.45}
.choice:hover{border-color:var(--walnut)}
.choice input{margin-top:4px;accent-color:var(--walnut);width:18px;height:18px;flex:none}
.choice.sel{border-color:var(--ink);background:#f1f3f4}
.choice.right{border-color:var(--ok);background:#eef7f1}
.choice.wrong{border-color:var(--warn);background:#fbefed}
.choice .tagx{display:block;font-size:.85rem;font-weight:700;margin-top:3px}
.choice.right .tagx{color:var(--ok)}
.choice.wrong .tagx{color:var(--warn)}
.fb{margin-top:16px;border-left:6px solid var(--ink);background:#fff;padding:14px 18px}
.fb.right{border-color:var(--ok)}
.fb.wrong{border-color:var(--warn)}
.fb b{display:block;font-size:1.1rem;margin-bottom:4px}
.sc-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.plate{background:var(--ink);color:#fff;border-radius:var(--r);padding:28px;border-bottom:8px solid var(--brass)}
.plate .lv{font-family:var(--fd);font-size:clamp(2.6rem,7vw,4.2rem);font-weight:700;line-height:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plate .pips i.on{background:var(--brass-l);border-color:var(--brass-l)}
.plate p{margin:12px 0 0;color:#d3dbde;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat b{display:block;font-family:var(--fd);font-size:2rem;line-height:1}
.stat span{color:var(--muted);font-size:.92rem}
.topics{margin:0 0 20px;padding:0;list-style:none}
.topics li{display:grid;grid-template-columns:180px 1fr 70px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2)}
.topics .tb{height:12px;background:var(--line2);border-radius:6px;overflow:hidden}
.topics .tb i{display:block;height:100%;background:var(--ok)}
.topics .tb i.low{background:var(--warn)}
.topics .tn{text-align:right;font-weight:600}
details.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px}
details.rev summary{cursor:pointer;padding:12px 16px;font-weight:600}
details.rev div{padding:0 16px 14px;color:var(--ink2)}

@media (max-width:900px){
  .lanes{grid-template-columns:1fr}
  .path{grid-template-columns:1fr 1fr}
  .check,.proof,.site-foot .cols{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr;gap:18px}
  .trail{margin-bottom:4px}
  .spec .row{grid-template-columns:1fr;gap:6px}
  .stats{grid-template-columns:1fr}
  .topics li{grid-template-columns:1fr 70px}
  .topics .tb{grid-column:1/-1;order:3}
}
@media (max-width:520px){
  .path{grid-template-columns:1fr}
  .seg{width:100%}
  .seg button{flex:1;justify-content:center;padding:10px 6px;font-size:.92rem}
  .seg .pips{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pbar i{transition:none}}
@media print{
  body{background:#fff}
  .site-head,.draft,.site-foot,.levelbar,.res-actions,.more,.knurl{display:none!important}
  .spec,.qcard{break-inside:avoid;border-color:#999}
}