/* Build your kit (/kits/build/). Uses the site's colour-scheme tokens; the price sheet is the navy rate board. */
.kb-top{display:grid;gap:16px;padding-block:14px 8px}
.kb-title{display:grid;gap:14px;align-items:end}
.kb-title h1{font:800 clamp(1.6rem,1.2rem + 1.8vw,2.3rem)/1.1 var(--f-display);color:var(--ink);letter-spacing:-.015em;margin:0;text-wrap:balance}
.kb-title p{margin:8px 0 0;max-width:68ch;color:var(--muted)}
.kb-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kb-presets span{font-size:.85rem;color:var(--muted)}
.kb-presets button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.kb-presets button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
@media(min-width:900px){.kb-title{grid-template-columns:minmax(0,1fr) auto}}
.kb-sys{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding:12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.kb-f{display:grid;gap:6px;min-width:0}
.kb-f-kw{grid-column:1/-1}
@media(min-width:700px){.kb-f-kw{grid-column:auto;min-width:220px}}
.kb-lb{font-size:.76rem;font-weight:600;color:var(--muted)}
.kb-seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--sunk)}
.kb-seg button{flex:1;min-height:38px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;white-space:nowrap}
.kb-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}
.kb-kw{display:flex;align-items:center;gap:10px;min-height:44px}
.kb-kw input{flex:1;min-width:0;accent-color:var(--amber)}
.kb-kw output{font:700 1.15rem var(--f-display);color:var(--ink);min-width:4.4ch;text-align:right;font-variant-numeric:tabular-nums}
.kb-main{display:grid;gap:20px;padding-block:16px 28px}
/* phones: the fixed price bar (.kb-bar) sits over the bottom of the page. Reserve its height inside the footer (same
   navy), not as an empty band of page background above the footer, so nothing looks blank and the footer stays readable. */
@media(max-width:999px){body[data-page="kit-builder"] .foot{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
@media(min-width:1000px){.kb-main{grid-template-columns:minmax(0,1fr) 370px;align-items:start;padding-bottom:48px}}
.kb-parts{display:grid;gap:10px;min-width:0}
.kb-part{display:grid;gap:12px;padding:16px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.kb-ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.kb-ic{grid-row:1/3;width:38px;height:38px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;color:var(--ink)}
.kb-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kb-part h2{margin:0;font:700 1rem/1.3 var(--f-display);color:var(--ink)}
.kb-sub{grid-column:2;font-size:.82rem;color:var(--muted);min-width:0}
.kb-amt{grid-row:1/3;grid-column:3;text-align:right;font-variant-numeric:tabular-nums}
.kb-amt b{display:block;font:700 1.05rem var(--f-display);color:var(--ink)}
.kb-amt small{font-size:.74rem;color:var(--muted)}
.kb-row{display:grid;gap:6px}
.kb-opts{display:flex;flex-wrap:wrap;gap:6px}
.kb-opt{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.kb-opt:hover{border-color:var(--line-strong)}
.kb-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.kb-d{font-size:.76rem;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.kb-opt[aria-pressed="true"] .kb-d{color:inherit;opacity:.78}
.kb-lb small{font-weight:500}
.kb-sel{justify-self:start;min-height:42px;min-width:170px;max-width:100%;padding:0 38px 0 13px;border-radius:11px;border:1.5px solid var(--line-strong);background:var(--bg);color:var(--text);font:inherit;font-weight:600;font-size:.95rem;font-variant-numeric:tabular-nums;cursor:pointer}
.kb-sel:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.kb-info{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.kb-info b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kb-sheet{display:grid;gap:14px;padding:20px;border-radius:var(--r);background:var(--board);color:var(--board-fg);font-variant-numeric:tabular-nums}
@media(min-width:1000px){.kb-sheet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px)}}
.kb-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kb-sh h2{margin:0;font:700 1.05rem var(--f-display);color:var(--board-fg)}
.kb-sh span{font-size:.8rem;color:var(--board-dim)}
.kb-total{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--board-line)}
.kb-total .k{font-size:.78rem;color:var(--board-dim)}
.kb-total .v{font:800 2.2rem/1.05 var(--f-display);color:var(--board-num)}
.kb-total .per{font-size:.9rem}
.kb-total .per b{color:var(--board-num)}
.kb-lines{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.86rem}
.kb-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.kb-lines .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-lines small{color:var(--board-dim)}
.kb-lines .bar{grid-column:1/-1;height:3px;border-radius:2px;background:var(--board-line);overflow:hidden}
.kb-lines .bar i{display:block;height:100%;background:var(--board-num)}
.kb-gst{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding-top:12px;border-top:1px solid var(--board-line);font-size:.84rem;color:var(--board-dim)}
.kb-gst b{text-align:right;color:var(--board-fg)}
.kb-gst .g{color:var(--board-fg);font-weight:700}
.kb-checks{display:grid;gap:6px}
.kb-chk{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;padding:9px 10px;border-radius:10px;font-size:.83rem;line-height:1.4;background:var(--surface)}
.kb-chk svg{width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kb-chk.ok{color:var(--ok-text);background:var(--ok-bg)}
.kb-chk.warn{color:var(--amber-text);background:var(--amber-bg)}
.kb-chk.bad{color:var(--danger-text,#8E2421);background:var(--danger-bg,#FBE5E3)}
.kb-acts{display:grid;gap:8px}
.kb-copy{background:transparent;border:1.5px solid var(--board-dim);color:var(--board-fg);cursor:pointer;font:inherit;font-weight:600}
.kb-toast{margin:0;min-height:1.2em;font-size:.8rem;color:var(--board-num)}
.kb-fine{margin:0;font-size:.76rem;color:var(--board-dim)}
.kb-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;background:var(--board);color:var(--board-fg);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));box-shadow:0 -10px 30px -16px var(--shadow)}
.kb-bar>div{flex:1;min-width:0}
.kb-bar small{display:block;font-size:.74rem;color:var(--board-dim)}
.kb-bar b{font:800 1.3rem var(--f-display);color:var(--board-num);font-variant-numeric:tabular-nums}
.kb-bar a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:12px;background:var(--board-cta-bg,var(--amber));color:var(--board-cta-fg,var(--on-amber));font-weight:700;text-decoration:none}
@media(min-width:1000px){.kb-bar{display:none}}
@media print{.kb-bar,.kb-presets,.kb-acts{display:none}}