/* ── Thermii application shell / presentation system ───────────────────
   This layer is deliberately additive. The calculator's existing IDs,
   values, data attributes and inline event handlers remain unchanged. */

body.thermii-version-active #systemTypeCard,
body.thermii-version-active #thermiiHowItWorksBtn{display:none!important;}
#thermiiVersionStage[hidden]{display:none!important;}

@media screen{
  body{
    padding:20px;
    color:var(--thermii-navy);
  }
  .kb-wrapper{
    max-width:1440px;
    min-height:calc(100dvh - 40px);
    padding:18px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:var(--thermii-shadow);
    overflow:hidden;
  }
  .kb-logo{
    min-height:66px;
    margin:0;
    padding:0 14px 16px;
    gap:20px;
  }
  .kb-logo-center{
    order:1;
    flex:1;
    justify-content:flex-start;
  }
  .kb-logo-side:first-child{
    position:static;
    order:2;
    flex:0 0 auto;
  }
  .kb-logo-side:last-child{
    order:3;
    display:flex;
    flex:0 0 auto;
  }
  .kb-logo-img{height:46px;}
  .kb-logo-screen{width:210px;height:auto;}
  .kb-return-btn,
  .thermii-shell-restart{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:8px 16px;
    border:0;
    background:transparent;
    color:var(--thermii-navy);
    font:600 13px/1 'Poppins',sans-serif;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
  }
  .kb-return-btn{border-right:1px solid var(--thermii-border);}
  .kb-return-btn svg,
  .thermii-shell-restart svg{width:20px;height:20px;flex:0 0 auto;}
  .kb-return-btn:hover,
  .thermii-shell-restart:hover{opacity:.66;}

  .thermii-app-grid{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:16px;
    flex:1 0 auto;
    min-height:760px;
  }
  .thermii-sidebar{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:42px 24px 26px;
    overflow:hidden;
    border:1px solid var(--thermii-border);
    border-radius:var(--thermii-radius-md);
    background:
      radial-gradient(circle at 55% 11%,rgba(113,56,237,.10),transparent 20%),
      linear-gradient(150deg,#fff 0%,#fbfcff 68%,#f4f7ff 100%);
  }
  .thermii-side-intro{text-align:center;}
  .thermii-side-avatar{
    position:relative;
    display:grid;
    place-items:center;
    width:104px;
    height:104px;
    margin:0 auto 18px;
  }
  .thermii-side-avatar::before{
    content:'';
    position:absolute;
    inset:4px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,157,232,.28),rgba(113,56,237,.12) 48%,transparent 70%);
    filter:blur(8px);
  }
  .thermii-side-avatar img{position:relative;width:80px;height:80px;filter:drop-shadow(0 8px 15px rgba(64,62,180,.16));}
  .thermii-side-spark{
    position:absolute;
    color:var(--thermii-purple);
    font-size:22px;
    line-height:1;
  }
  .thermii-side-spark:first-of-type{left:0;top:18px;color:var(--thermii-blue);}
  .thermii-side-spark:last-of-type{right:2px;bottom:12px;}
  .thermii-side-title{font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.035em;}
  .thermii-side-copy{
    max-width:230px;
    margin:10px auto 0;
    color:#4b557a;
    font-size:13px;
    line-height:1.75;
  }
  .thermii-side-time{
    display:flex;
    align-items:center;
    gap:14px;
    margin:30px 0 26px;
    padding:15px;
    border-radius:14px;
    background:linear-gradient(120deg,rgba(113,56,237,.05),rgba(20,157,232,.035));
  }
  .thermii-side-time-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 auto;
    border:2px solid #6498ff;
    border-radius:50%;
    color:var(--thermii-purple);
    box-shadow:0 4px 12px rgba(20,157,232,.18);
  }
  .thermii-side-time-icon svg{width:22px;height:22px;}
  .thermii-side-time strong,
  .thermii-side-time span{display:block;}
  .thermii-side-time strong{font-size:12px;font-weight:600;}
  .thermii-side-time span{margin-top:3px;color:#596385;font-size:11px;}
  .thermii-side-rule{height:1px;margin:0 0 26px;background:var(--thermii-border);}
  .thermii-side-help{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:13px;
    align-items:start;
    padding:2px 6px;
  }
  .thermii-side-help-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    color:var(--thermii-purple);
    background:#f1eaff;
  }
  .thermii-side-help-icon svg{width:24px;height:24px;}
  .thermii-side-help h3{margin:1px 0 5px;color:#4917f7;font-size:12px;font-weight:600;}
  .thermii-side-help p{color:#596385;font-size:10.5px;line-height:1.65;}
  .thermii-side-help a{
    display:flex;
    justify-content:space-between;
    margin-top:14px;
    color:#4917f7;
    font-size:11px;
    font-weight:600;
    text-decoration:none;
  }
  .thermii-project-card{
    margin-top:auto;
    padding:18px;
    border:1px solid var(--thermii-border);
    border-radius:16px;
    background:rgba(255,255,255,.72);
  }
  .thermii-project-heading{display:flex;align-items:center;gap:11px;}
  .thermii-project-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    color:#126679;
    background:#daf8f7;
  }
  .thermii-project-icon svg{width:22px;height:22px;}
  .thermii-project-label{color:#697393;font-size:10px;}
  .thermii-project-name{margin-top:2px;font-size:13px;font-weight:600;}
  .thermii-project-next{
    display:flex;
    justify-content:space-between;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--thermii-border);
    color:#697393;
    font-size:10px;
  }
  .thermii-project-next strong{color:var(--thermii-navy);font-size:11px;}

  .thermii-main-shell{
    min-width:0;
    overflow:visible;
    border:1px solid var(--thermii-border);
    border-radius:var(--thermii-radius-md);
    background:rgba(255,255,255,.82);
  }
  .thermii-stage-header{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:28px;
    align-items:center;
    min-height:144px;
    margin:0 24px;
    padding:22px 0;
    border-bottom:1px solid var(--thermii-border);
  }
  .thermii-stage-kicker{color:#687295;font-size:12px;font-weight:500;}
  .thermii-stage-title{margin-top:2px;color:#4917f7;font-size:21px;font-weight:600;}
  .thermii-stage-progress{width:120px;height:4px;margin-top:20px;border-radius:999px;background:#e9ecf4;overflow:hidden;}
  .thermii-stage-progress span{display:block;width:12.5%;height:100%;border-radius:inherit;background:var(--thermii-gradient);transition:width .25s ease;}
  .thermii-stepper{
    display:flex;
    align-items:flex-start;
    min-width:630px;
    list-style:none;
  }
  .thermii-step{
    position:relative;
    flex:1;
    min-width:72px;
    text-align:center;
    color:#8b94ad;
  }
  .thermii-step:not(:last-child)::after{
    content:'';
    position:absolute;
    top:22px;
    left:calc(50% + 27px);
    width:calc(100% - 54px);
    height:2px;
    background:#e0e4ee;
  }
  .thermii-step-orb{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin:0 auto 8px;
    border:1px solid #dfe3ed;
    border-radius:50%;
    background:#fff;
    color:#57617f;
    font-size:16px;
    transition:.2s ease;
  }
  .thermii-step-number{
    position:absolute;
    right:-4px;
    bottom:-2px;
    display:grid;
    place-items:center;
    width:17px;
    height:17px;
    border:1px solid #cad0df;
    border-radius:50%;
    background:#f8f9fc;
    color:#626c8b;
    font-size:8px;
    font-style:normal;
    font-weight:600;
  }
  .thermii-step-label{display:block;font-size:9px;font-weight:500;white-space:nowrap;}
  .thermii-step.is-active{color:#4917f7;}
  .thermii-step.is-active .thermii-step-orb{border:2px solid #5b20ff;color:#5b20ff;box-shadow:0 5px 18px rgba(113,56,237,.15);}
  .thermii-step.is-active .thermii-step-number{border-color:#5b20ff;background:#5b20ff;color:#fff;}
  .thermii-step.is-complete .thermii-step-orb{border-color:#8c62f6;color:#6a35eb;background:#f7f3ff;}
  .thermii-step.is-complete:not(:last-child)::after{background:#b8a3f8;}

  .thermii-workspace{min-width:0;padding:0 48px;}
  .thermii-version-stage{display:flex;flex-direction:column;min-height:612px;}
  .thermii-version-body{
    flex:1;
    padding:44px 0 30px;
    text-align:center;
  }
  .thermii-version-body h1{
    margin:0 auto;
    max-width:780px;
    color:var(--thermii-navy);
    font-size:34px;
    line-height:1.22;
    letter-spacing:-.045em;
  }
  .thermii-version-subtitle{margin-top:12px;color:#596385;font-size:15px;}
  .thermii-version-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    max-width:820px;
    margin:30px auto 0;
  }
  .thermii-version-card{
    position:relative;
    min-height:265px;
    padding:38px 28px 30px;
    overflow:hidden;
    border:1px solid var(--thermii-border);
    border-radius:17px;
    background:#fff;
    color:var(--thermii-navy);
    font-family:'Poppins',sans-serif;
    text-align:center;
    cursor:pointer;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .thermii-version-card::after{
    content:'';
    position:absolute;
    right:-16%;
    bottom:-44%;
    width:125%;
    height:68%;
    border-radius:50%;
    background:linear-gradient(110deg,rgba(20,157,232,.08),rgba(113,56,237,.07),rgba(212,20,196,.06));
    opacity:0;
    transition:opacity .2s ease;
  }
  .thermii-version-card:hover{transform:translateY(-2px);border-color:#bba8fb;box-shadow:0 12px 28px rgba(66,42,139,.10);}
  .thermii-version-card.is-selected{
    border:2px solid #6326ff;
    box-shadow:0 14px 30px rgba(113,56,237,.12),0 0 0 1px rgba(212,20,196,.06);
  }
  .thermii-version-card.is-selected::after{opacity:1;}
  .thermii-version-check{
    position:absolute;
    z-index:2;
    top:18px;
    right:18px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1.5px solid #a7b0c9;
    border-radius:50%;
    background:#fff;
    color:transparent;
    font-size:17px;
    font-weight:700;
  }
  .thermii-version-card.is-selected .thermii-version-check{border-color:#5019f6;background:#5019f6;color:#fff;}
  .thermii-version-pill{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    overflow:hidden;
    margin:12px 0 24px;
    border:1px solid transparent;
    border-radius:999px;
    background:
      linear-gradient(#fff,#fff) padding-box,
      var(--thermii-gradient) border-box;
  }
  .thermii-version-pill-brand{padding:7px 14px;color:var(--thermii-navy);font-size:20px;font-weight:700;letter-spacing:-.05em;}
  .thermii-version-pill-name{align-self:stretch;padding:7px 15px;background:var(--thermii-gradient);color:#fff;font-size:18px;font-weight:600;letter-spacing:-.035em;}
  .thermii-version-card h2{position:relative;z-index:1;font-size:20px;font-weight:600;letter-spacing:-.025em;}
  .thermii-version-card p{position:relative;z-index:1;margin-top:9px;color:#596385;font-size:14px;line-height:1.55;}
  .thermii-version-links{display:flex;flex-direction:column;align-items:center;gap:24px;margin:28px auto 0;}
  .thermii-compare-link{color:#5420f4;font-size:13px;font-weight:600;text-underline-offset:7px;}
  .thermii-how-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:10px 28px;
    border:1px solid #b89cfb;
    border-radius:999px;
    color:#6230ef;
    font-size:13px;
    text-decoration:none;
  }
  .thermii-how-button span{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:1px solid currentColor;
    border-radius:50%;
    font-weight:600;
  }
  .thermii-version-footer{
    display:flex;
    justify-content:flex-end;
    margin:0 -48px;
    padding:20px 36px;
    border-top:1px solid var(--thermii-border);
  }
  .thermii-continue{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:240px;
    min-height:54px;
    padding:14px 24px;
    border:0;
    border-radius:13px;
    background:var(--thermii-gradient);
    box-shadow:0 10px 22px rgba(113,56,237,.2);
    color:#fff;
    font:600 15px/1 'Poppins',sans-serif;
    cursor:pointer;
  }
  .thermii-continue:hover{filter:saturate(1.1) brightness(1.03);}
  .thermii-continue:focus-visible,
  .thermii-version-card:focus-visible,
  .thermii-shell-restart:focus-visible,
  .kb-return-btn:focus-visible{outline:3px solid rgba(20,157,232,.35);outline-offset:3px;}

  .thermii-main-shell #systemTypeCard{
    margin:34px 0 20px;
    padding:42px 28px;
    border:1px solid var(--thermii-border);
    box-shadow:none;
  }
  .thermii-main-shell #systemTypeCard .wIntroBannerSys{display:none;}
  .thermii-main-shell #thermiiHowItWorksBtn{margin:0 0 32px!important;}
  .thermii-main-shell #electricPanel,
  .thermii-main-shell #waterPanel,
  .thermii-main-shell #unsurePanel{padding-top:24px;}
}

@media screen and (max-width:1100px){
  .thermii-app-grid{grid-template-columns:250px minmax(0,1fr);}
  .thermii-sidebar{padding-right:18px;padding-left:18px;}
  .thermii-stage-header{grid-template-columns:150px minmax(0,1fr);gap:16px;}
  .thermii-stepper-wrap{overflow-x:auto;scrollbar-width:thin;}
  .thermii-workspace{padding:0 28px;}
  .thermii-version-footer{margin:0 -28px;}
  .thermii-version-body h1{font-size:30px;}
}

@media screen and (max-width:820px){
  body{padding:0;}
  .kb-wrapper{min-height:100dvh;padding:12px;border:0;border-radius:0;}
  .kb-logo{min-height:58px;padding:0 4px 10px;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;}
  .kb-logo-center{display:flex;}
  .kb-logo-screen{width:145px;height:auto;}
  .kb-logo-mobile-img{display:none;}
  .kb-logo-side:first-child,
  .kb-logo-side:last-child{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:0;}
  .kb-return-btn,.thermii-shell-restart{min-height:38px;padding:7px 10px;font-size:11px;}
  .kb-return-btn svg,.thermii-shell-restart svg{width:18px;height:18px;}
  .thermii-app-grid{grid-template-columns:1fr;min-height:0;}
  .thermii-sidebar{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:center;
    padding:16px 18px;
  }
  .thermii-side-intro{display:contents;text-align:left;}
  .thermii-side-avatar{grid-row:1;width:58px;height:58px;margin:0;}
  .thermii-side-avatar img{width:52px;height:52px;}
  .thermii-side-spark{display:none;}
  .thermii-side-intro > div:last-child{grid-column:2;}
  .thermii-side-title{font-size:18px;}
  .thermii-side-copy{max-width:none;margin-top:4px;font-size:11px;line-height:1.5;}
  .thermii-side-time,.thermii-side-rule,.thermii-side-help,.thermii-project-card{display:none;}
  .thermii-stage-header{grid-template-columns:1fr;margin:0 18px;padding:18px 0 14px;gap:14px;}
  .thermii-stage-summary{display:flex;align-items:flex-end;justify-content:space-between;}
  .thermii-stage-progress{width:120px;margin:0 0 5px;}
  .thermii-stepper-wrap{margin:0 -18px;padding:0 18px 5px;}
  .thermii-stepper{min-width:600px;}
  .thermii-step-label{font-size:8px;}
  .thermii-workspace{padding:0 22px;}
  .thermii-version-stage{min-height:0;}
  .thermii-version-body{padding:34px 0 28px;}
  .thermii-version-body h1{font-size:27px;}
  .thermii-version-options{grid-template-columns:1fr;max-width:450px;}
  .thermii-version-card{min-height:230px;}
  .thermii-version-footer{margin:0 -22px;}
}

@media screen and (max-width:540px){
  .kb-wrapper{padding:10px;}
  .kb-logo-center{flex:0 1 auto;}
  .kb-logo-screen{width:116px;height:auto;}
  .kb-return-btn{border-right:0;padding-right:5px;}
  .kb-return-btn span{display:none;}
  .thermii-shell-restart{padding-left:5px;}
  .thermii-shell-restart span{display:none;}
  .thermii-main-shell{border-radius:14px;}
  .thermii-stage-header{margin:0 14px;}
  .thermii-stage-title{font-size:18px;}
  .thermii-stage-progress{width:92px;}
  .thermii-workspace{padding:0 14px;}
  .thermii-version-body{padding-top:28px;}
  .thermii-version-body h1{font-size:24px;}
  .thermii-version-subtitle{font-size:13px;line-height:1.55;}
  .thermii-version-card{min-height:215px;padding:32px 18px 24px;}
  .thermii-version-pill{margin-bottom:18px;}
  .thermii-version-card h2{font-size:18px;}
  .thermii-version-card p{font-size:13px;}
  .thermii-version-footer{margin:0 -14px;padding:14px;}
  .thermii-continue{width:100%;min-width:0;}
  .thermii-main-shell #systemTypeCard{padding:30px 14px;}
}

@media print{
  .thermii-sidebar,
  .thermii-stage-header,
  .thermii-version-stage,
  .thermii-shell-actions{display:none!important;}
  .thermii-app-grid,
  .thermii-main-shell,
  .thermii-workspace{display:block!important;padding:0!important;border:0!important;box-shadow:none!important;overflow:visible!important;}
}

/* Approved presentation override: Sora typography
   These roles create contrast without changing markup or application logic. */
html,
body,
body *{
  font-family:var(--thermii-font-sans)!important;
}

body{
  font-weight:var(--thermii-font-weight-regular);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}

.thermii-question,
.kb-section-title,
.eq-title,
.eq-summary-title,
.kit-hero-title,
.thermii-version-body h1{
  font-family:var(--thermii-font-display)!important;
  font-weight:var(--thermii-font-weight-display)!important;
  line-height:var(--thermii-line-height-heading);
  letter-spacing:var(--thermii-letter-spacing-question);
}

.thermii-side-title,
.thermii-version-card h2,
.neohub-question,
.wq-unheated-title,
.wcad-title,
.wkit-heat-title,
.unsure-heading,
.tlm-title{
  font-family:var(--thermii-font-display)!important;
  font-weight:var(--thermii-font-weight-display-secondary)!important;
  line-height:var(--thermii-line-height-heading);
}

/* Approved presentation override: compact header wordmark. */
@media screen{
  .kb-logo-screen{width:153px;}
}

@media screen and (max-width:820px){
  .kb-logo-screen{width:105px;}
}

@media screen and (max-width:520px){
  .kb-logo-screen{width:94px;}
}

.thermii-supporting-copy,
.eq-note,
.eq-subtext,
.thermii-version-subtitle,
.thermii-version-card p,
.thermii-side-copy,
.fo-sublabel,
.thermostat-desc,
.wcad-reassurance{
  font-weight:var(--thermii-font-weight-light);
  line-height:var(--thermii-line-height-body);
}

.thermii-recommendation-label,
.fo-rec-badge{
  font-weight:var(--thermii-font-weight-medium);
}

.fo-label,
.so-label,
.thermii-step-label{
  font-weight:var(--thermii-font-weight-regular);
}

.filter-option.is-selected .fo-label,
.system-option.is-selected .so-label{
  font-weight:var(--thermii-font-weight-medium);
}