/* Planning, Garden and Home Energy kits (việc 326). Uses the site colour variables only, so light/dark follow app.css. */
.kit h1{margin-bottom:.2rem}
.ktabs{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;margin:1rem 0 .4rem;background:var(--soft);border-radius:12px;overflow-x:auto;scrollbar-width:none}
.ktabs::-webkit-scrollbar{display:none}
.ktabs button{flex:1 1 auto;min-height:44px;padding:.5rem .9rem;font-size:1rem;font-weight:600;background:transparent;color:var(--fg);border-radius:9px;white-space:nowrap}
.ktabs button[aria-selected=true]{background:var(--card);color:var(--acc2);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ktabs button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
#kp:focus{outline:none}
.kgrid{display:grid;gap:1rem;align-items:start;min-width:0}
.kgrid>*{min-width:0}
@media (min-width:900px){.kgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.kgrid>section.card,.kgrid>div:last-child>section.card{position:sticky;top:4.5rem}}
.kf{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start}
.kf>.fh,.kf>.chk,.kf>p,.kf>label:has(select),.kf>.kmore{grid-column:1/-1}
.kf .fh{margin:.5rem 0 0;font-size:1rem}
.kf input:not([type=checkbox]),.kf select,.krow input,.kapp input:not([type=checkbox]){width:100%;box-sizing:border-box}
.kf label.chk{display:flex;gap:.55rem;align-items:flex-start;font-weight:400}
.kf label.chk input{width:24px;height:24px;flex:none;margin:.1rem 0 0}
.kmore{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:.2rem .8rem}
.kmore summary{cursor:pointer;font-weight:700;color:var(--acc2);min-height:44px;display:flex;align-items:center}
.kmore[open]{padding-bottom:.8rem}
.kmore .kf{grid-column:auto}
@media (max-width:899px){.kext>form{order:2}.kext>div{order:1}}
.inp.suf input{padding-inline-end:3.4rem}
.inp.suf i{position:absolute;inset-inline-end:.7rem;top:50%;transform:translateY(-50%);color:var(--muted);font-style:normal;font-weight:600;font-size:.9rem;pointer-events:none}
.krow{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin:.4rem 0}
.krow label{flex:1 1 160px}
.kspot{border:1px dashed var(--line);border-radius:12px;padding:.4rem .8rem;margin:0 0 1rem}
.kspot .note{margin:.2rem 0 .4rem}
a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1rem;border-radius:10px;background:var(--acc);color:var(--on-acc);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--acc);margin:.2rem .3rem .2rem 0}
a.btn.ghost,button.btn.ghost{background:transparent;color:var(--acc)}
button.link{background:none;border:0;padding:0;min-height:44px;color:var(--acc);font-weight:600;font-size:inherit;text-decoration:underline;cursor:pointer}
.kv{border-inline-start:6px solid var(--acc);padding:.2rem .8rem;margin:.2rem 0 .6rem;background:var(--soft);border-radius:8px}
.kv.amber{border-color:var(--gold);background:var(--relief)}.kv.red{border-color:var(--warn)}
.kv .big{display:block;font-size:1.6rem;line-height:1.2;margin:.3rem 0}
.kv small{display:block;color:var(--muted);font-weight:600;margin-bottom:.3rem}
.kmeta{color:var(--muted);margin:.3rem 0}
.kmeta b{color:var(--fg)}
.flags small{display:block;color:var(--muted);font-size:.82rem;font-weight:400}
.kcta{margin:.8rem 0 .2rem}
.ksrc{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.ksrcd{font-size:.88rem;margin:.4rem 0}
table.kt{width:100%;border-collapse:collapse;margin:.6rem 0;font-variant-numeric:tabular-nums;font-size:.95rem}
table.kt caption{text-align:start;font-weight:700;padding:.2rem 0}
table.kt th,table.kt td{text-align:start;padding:.4rem .3rem;border-bottom:1px solid var(--line);vertical-align:top}
table.kt td small,table.kt th small{display:block;color:var(--muted);font-weight:400;font-size:.8rem}
.kmeter{height:12px;background:var(--line);border-radius:6px;overflow:hidden;margin:.4rem 0}
.kmeter span{display:block;height:100%;background:var(--acc);border-radius:6px}
.kmeter span.over{background:var(--warn)}
.ksketch svg{width:100%;height:auto;max-height:440px;display:block;touch-action:none}
.ksk .kh{fill:var(--soft);stroke:var(--muted);stroke-width:1.5}
.ksk .ke{fill:color-mix(in srgb,var(--gold) 30%,transparent);stroke:var(--gold);stroke-width:2}
.ksk .kln{stroke:var(--acc);stroke-dasharray:6 4;stroke-width:1.5}.ksk .kln2{stroke:var(--gold);stroke-dasharray:2 4;stroke-width:1.5}
.ksk .kt,.ksk .kl,.ksun .kl{fill:var(--muted);font:600 11px system-ui,sans-serif}
.ksk .kt{text-anchor:middle;fill:var(--fg)}
.ksk .kgrip{fill:var(--card);stroke:var(--acc2);stroke-width:3;cursor:grab}
.ksk .kgrip:focus-visible{stroke:var(--gold);outline:none}
.kmap{height:320px;border-radius:12px;border:1px solid var(--line);background:var(--soft);margin:.4rem 0}
@media (min-width:900px){.kmap{height:420px}}
.ktools{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.ktools .btn{min-height:40px}
.kunit{max-width:240px}
.kapp{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:.6rem 0}
.ka{border:1px solid var(--line);border-radius:10px;padding:.3rem .6rem .6rem;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;opacity:.7}
.ka.on{opacity:1;border-color:var(--acc)}
.ka legend{padding:0 .2rem;max-width:100%}
.ka label{font-size:.82rem;font-weight:600}
.ka input{font-size:1rem;padding:.4rem .5rem;min-height:40px}
.ka .kname{width:12rem;max-width:100%}
.kbars{display:grid;gap:.35rem;margin:.6rem 0}
.kb{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) 4.2rem;gap:.5rem;align-items:center;font-size:.92rem}
.kbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbt{height:12px;display:block}
.kbt span{display:block;height:100%;background:var(--acc);border-radius:0 4px 4px 0}
.kbv{text-align:end;font-variant-numeric:tabular-nums;font-weight:600}
svg.kci{width:100%;height:140px;display:block;margin:.6rem 0 0}
.kci rect{fill:var(--line)}.kci rect.win{fill:var(--acc)}
.kax{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.ksun{margin:.6rem 0}.ksun svg{width:100%;height:auto;display:block}
.ksun path{fill:none;stroke-width:2}
.ksun .kax0{stroke:var(--line)}
.ksun figcaption{font-size:.84rem;color:var(--muted)}
.ks-summer path,.ks-summer circle{stroke:var(--gold);fill:var(--gold)}.ks-summer path{fill:none}
.ks-spring path,.ks-spring circle,.ks-autumn path,.ks-autumn circle{stroke:var(--acc);fill:var(--acc)}.ks-spring path,.ks-autumn path{fill:none}
.ks-autumn path{stroke-dasharray:4 3}
.ks-winter path,.ks-winter circle{stroke:var(--muted);fill:var(--muted)}.ks-winter path{fill:none}
html.embed header.top,html.embed footer,html.embed .crumbs,html.embed main>p:last-child{display:none}
@media print{.ktabs,.kspot,.kmap,.ktools,#kreset{display:none}}
.ka:not(.on){display:block;padding:.4rem .6rem}.ka:not(.on)>label{display:none}.ka:not(.on) legend{float:left;padding:0}
#kp{min-height:100vh;min-height:100svh}