/* Alpha X website prototype 5 - LEVEL 3 - DRAFT, NOT REVIEWED. Savings dashboard (open on load). Loaded after styles.css on the home page. */
.kcalc .tv,.kcalc .kbig,.kcalc .kst-h{color:#fff}
.kcalc label,.kcalc legend{color:var(--ondark);font-size:14px;font-weight:600}
.kform{margin-top:var(--s4)}
.ktypes,.kdetails fieldset,.curs{border:0;padding:0;margin:0;min-width:0}
.curs{margin-bottom:var(--s3)}

/* building type tiles */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:699px){.ttile:last-child{grid-column:1/-1}}
@media(min-width:700px){.tgrid{grid-template-columns:repeat(5,1fr)}}
.ttile{position:relative;display:block}
.ttile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tbox{display:grid;justify-items:center;align-content:center;gap:8px;min-height:92px;padding:14px 8px;border-radius:var(--r-m);border:1px solid rgba(214,232,229,.24);background:rgba(255,255,255,.05);color:var(--ondark);text-align:center;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .25s var(--ease),color .3s ease}
.tn{font-size:14px;font-weight:600;line-height:1.3}
.ttile input:checked+.tbox{background:rgba(251,176,64,.15);border-color:var(--o);color:#fff;box-shadow:0 0 0 1px var(--o),0 0 28px rgba(251,176,64,.30)}
.ttile input:focus-visible+.tbox{outline:3px solid var(--o);outline-offset:3px}
.ttile input:checked+.tbox svg{color:var(--o)}
.ttile:active .tbox{transform:scale(.97)}
@media(hover:hover){.ttile:hover .tbox{transform:translateY(-3px);border-color:rgba(126,214,205,.6)}}
.mo .ttile input:checked+.tbox svg{animation:tilepop .5s var(--ease)}
@keyframes tilepop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* small segmented choices (currency, hours, days) */
.seg2{display:flex;flex-wrap:wrap;gap:8px}
.seg2 label{position:relative;display:block}
.seg2 input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg2 span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border-radius:99px;border:1px solid rgba(214,232,229,.38);background:rgba(255,255,255,.06);color:#fff;font-weight:600;font-size:14px;text-align:center;transition:background .25s ease,color .25s ease,border-color .25s ease}
.seg2 input:checked+span{background:var(--o);color:var(--ink);border-color:var(--o)}
.seg2 input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}

/* dashboard */
/* the 3 steps: a numbered heading above each box */
.kbox{margin-top:var(--s5)}
.kbox:first-child{margin-top:0}
.kst{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.knum{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--o);color:var(--ink);font-weight:700;font-size:16px;transition:background .3s ease,color .3s ease}
.kst-h{font-size:clamp(18px,4.6vw,22px);line-height:1.3}
.kst-w{margin:0}
.kbox.wait .knum{background:transparent;color:var(--ondark);border:1px solid rgba(214,232,229,.55)}
.kbox.wait .kst-h{color:var(--ondark)}
.kst-w[hidden],.kgo[hidden],.kdetails[hidden],.kwait p[hidden],.kwait[hidden]{display:none}
.kgo{margin-bottom:var(--s3)}
.kwait{padding:var(--s4);border-radius:var(--r-m);border:1px dashed rgba(214,232,229,.4);background:rgba(255,255,255,.04)}
.kwait p{margin:0;font-size:16px}
.kdash{margin-top:0;scroll-margin-top:96px}
.kdash:focus{outline:0}
.mo .kdetails.open,.mo .kdash.open{animation:kopen .5s var(--ease) both}
@keyframes kopen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kmain{display:grid;gap:var(--s4)}
@media(min-width:900px){.kmain{grid-template-columns:1.45fr 1fr;align-items:start}}
.tag{display:inline-block;font-size:12px;font-weight:700;line-height:1.5;padding:1px 10px;border-radius:99px;background:rgba(251,176,64,.18);color:#FFD28A;border:1px solid rgba(251,176,64,.55)}
.tag.sm{font-size:11px;padding:0 8px}

.chart{position:relative;overflow:hidden;border-radius:var(--r-m);background:rgba(255,255,255,.05);border:1px solid rgba(214,232,229,.16);touch-action:pan-y;cursor:ew-resize}
.chart svg{display:block;width:100%;height:auto}
.chart .tag{position:absolute;right:12px;bottom:8px}
.chart-cap{margin:0;padding:var(--s1) var(--s3) var(--s2);font-size:12px;max-width:70%}
.sweet-tag{position:absolute;top:8px;transform:translateX(-50%);padding:2px 10px;border-radius:99px;background:var(--o);color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none}
.curve-main{stroke-dasharray:1;stroke-dashoffset:0}
#k-dot .pulse{transform-box:fill-box;transform-origin:center;opacity:.3}
.mo #k-dot .pulse{animation:dotpulse 2s ease-out infinite}
@keyframes dotpulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.8);opacity:0}}
.mo .curve-main.draw{animation:drawline 1.4s ease both}
@keyframes drawline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mo .chart.swap svg{animation:swapfade .55s ease}
@keyframes swapfade{from{opacity:.2}to{opacity:1}}

.kctl{margin-top:var(--s3);padding:var(--s3) var(--s3) var(--s4);border-radius:var(--r-m);background:rgba(255,255,255,.06);border:1px solid rgba(214,232,229,.2)}
.kread{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.kreadtxt{display:grid;gap:2px}
.kbig{display:block;font-size:clamp(30px,8vw,44px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.roof{flex:none;width:120px;height:auto}
.roof .cell{fill:rgba(126,214,205,.10);stroke:rgba(214,232,229,.28);stroke-width:.6;transform-box:fill-box;transform-origin:center;transform:scale(.8);transition:fill .45s ease,transform .45s var(--ease)}
.roof .cell.on{fill:rgba(20,168,157,.9);stroke:#B9F0E9;transform:scale(1)}
.sunv{opacity:var(--g,.6);transition:opacity .5s ease}
.mo .srays{transform-box:fill-box;transform-origin:center;animation:spin 20s linear infinite}
.krow{display:grid;grid-template-columns:48px 1fr 48px;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.kstep{width:48px;height:48px;border-radius:50%;border:1px solid rgba(214,232,229,.55);background:rgba(255,255,255,.08);color:#fff;font:600 26px/1 var(--f-body);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
.kstep:active{transform:scale(.92)}
@media(hover:hover){.kstep:hover{background:rgba(251,176,64,.25);box-shadow:0 0 16px rgba(251,176,64,.45)}}
.kslide{position:relative;height:56px;display:flex;align-items:center;--fill:50%}
.kslide input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:56px;margin:0;padding:0;background:transparent;cursor:ew-resize;touch-action:pan-y;border:0;min-height:0}
.kslide input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#14A89D 0,#7ED6CD var(--fill),rgba(255,255,255,.24) var(--fill))}
.kslide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin-top:-17px;border-radius:50%;background:var(--o);border:4px solid #fff;box-shadow:0 0 0 6px rgba(251,176,64,.28),0 4px 14px rgba(0,0,0,.45);cursor:grab}
.kslide input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:linear-gradient(90deg,#14A89D 0,#7ED6CD var(--fill),rgba(255,255,255,.24) var(--fill))}
.kslide input[type=range]::-moz-range-thumb{box-sizing:content-box;width:36px;height:36px;border-radius:50%;background:var(--o);border:4px solid #fff;box-shadow:0 0 0 6px rgba(251,176,64,.28),0 4px 14px rgba(0,0,0,.45);cursor:grab}
.kslide input[type=range]:focus-visible{outline:none}
.kslide input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid #fff;outline-offset:3px}
.kslide input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid #fff;outline-offset:3px}
.mo .kslide input[type=range]::-webkit-slider-thumb{animation:thumbglow 2.8s ease-in-out infinite}
.mo .kslide input[type=range]::-moz-range-thumb{animation:thumbglow 2.8s ease-in-out infinite}
@keyframes thumbglow{0%,100%{box-shadow:0 0 0 5px rgba(251,176,64,.22),0 4px 14px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 12px rgba(251,176,64,.10),0 4px 14px rgba(0,0,0,.45)}}
.ksweet{position:absolute;bottom:1px;left:calc(var(--sw,0) * (100% - 44px) + 22px);width:2px;height:9px;background:var(--o);transform:translateX(-1px);pointer-events:none}
.krow2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s2)}
.krow2 .note{flex:1 1 200px;margin:0}
.btn.sm{min-height:44px;padding:0 16px;font-size:14px}

/* result tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.tile{position:relative;overflow:hidden;display:grid;gap:4px;align-content:start;min-height:112px;padding:var(--s3);border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(214,232,229,.16)}
.tile-main{grid-column:1/-1;background:linear-gradient(135deg,rgba(20,168,157,.30),rgba(255,255,255,.06));border-color:rgba(126,214,205,.5)}
.tile .tag{position:absolute;top:10px;right:10px}
.tl{font-size:13px;padding-right:84px}
.tv{font-size:clamp(24px,6vw,32px);font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.tile-main .tv{font-size:clamp(34px,9vw,52px)}
.unit{font-size:.45em;font-weight:600;color:var(--ondark)}
.tr{font-size:13px}
.kcalc .vat{color:#FFD28A}
.vat[hidden]{display:none}
@media(min-width:900px){.tiles{grid-template-columns:1fr}.tile{min-height:0}}

/* step 2: the details box (opens when a building is picked) */
.kdetails{display:grid;gap:var(--s3);margin-top:0;padding:var(--s3);border:1px solid rgba(214,232,229,.16);border-radius:var(--r-m);background:rgba(255,255,255,.04)}
.kd-n{margin:0}
.bill-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.bill-row input{width:170px;min-height:44px}
.hrs-custom{display:flex;gap:var(--s3);margin-top:var(--s2)}
.hrs-custom[hidden]{display:none}
.hrs-custom select{min-height:44px;width:auto}
@media(min-width:900px){.kdetails{grid-template-columns:1fr 1.6fr .6fr;align-items:start}.kd-n{grid-column:1/-1}}
.rates,.disc{margin-top:var(--s3)}
#k-cta{margin-top:var(--s4)}
.kcontact{display:grid;gap:var(--s2);padding:var(--s4);border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(251,176,64,.55)}
.kcontact .tag{justify-self:start}
.kcontact[hidden],#k-ok[hidden]{display:none}

/* the quotation bar and chat bubble step aside while the slider is on screen */
body.calc-on{--qbar-h:0px}
body.calc-on .qbar{transform:translateY(100%);visibility:hidden}
body.calc-on .chat-btn{opacity:0;visibility:hidden;pointer-events:none}
.chat-btn{transition:transform .2s var(--ease),bottom .25s ease,opacity .25s ease,visibility .25s}