/* Readability pass for the Heeler RV calculator.
   Optimized for comfortable reading without browser zoom, especially on tablets and desktops. */

/* Prevent stray off-canvas fragments from rendering at viewport edges */
html,body{max-width:100%;overflow-x:hidden!important}

/* Appliance list */
.load-row{padding:14px 10px!important}
.load-name strong{font-size:15px!important;line-height:1.25}
.load-name small{margin-top:5px!important;color:#969696!important;font-size:12px!important;line-height:1.45!important}
.field-mini label{font-size:10.5px!important;line-height:1.25!important;letter-spacing:.55px!important}
.field-mini input,.field-mini select{font-size:15px!important;min-height:44px}
.row-wh{font-size:12px!important;line-height:1.35}
.row-wh b{font-size:15px!important}

/* Charging / fine-tune controls */
.recharge-step{padding:17px!important}
.recharge-step h3{font-size:19px!important;line-height:1.25}
.recharge-step p{max-width:760px;font-size:13.5px!important;line-height:1.45!important;color:#a4aaa1!important}
.recharge-chip{font-size:13.5px!important;padding:11px 13px!important}
.recharge-chip small{font-size:10.5px!important;line-height:1.3!important}
.calc-advanced>summary{font-size:12.5px!important;padding:16px 20px!important}
.settings .field-mini span{font-size:11.5px!important;line-height:1.5!important;color:#8c8c8c!important}
.assumption-box{font-size:13px!important;line-height:1.4!important}

/* Desktop calculator workspace: left device list and right results scroll independently. */
@media(min-width:981px){
  .calculator-shell{height:calc(100vh - 94px)!important;min-height:620px;overflow:hidden!important;align-items:stretch!important}
  .calculator-shell>.panel:first-child{height:100%;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable}
  .results{position:relative!important;top:auto!important;height:100%;min-height:0;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-gutter:stable;align-self:stretch!important}
}

/* Results card: fewer words, larger useful text. */
.result-main{padding:23px 20px 20px!important}
.result-main span{font-size:11.5px!important;letter-spacing:1px!important}
.result-main p{font-size:13px!important;line-height:1.45!important;color:#a2a2a2!important}
.metric{padding:20px 17px!important;min-height:150px}
.metric span{font-size:11.5px!important;line-height:1.3!important;letter-spacing:.75px!important}
.metric b{font-size:26px!important;line-height:1.15;margin-top:8px!important}
.metric small{margin-top:9px!important;color:#a5a5a5!important;font-size:13.5px!important;line-height:1.45!important}
.direction{padding:19px 20px!important}
.direction h3{font-size:17px!important;line-height:1.3}
.direction p{font-size:13.5px!important;line-height:1.5!important;color:#b4bbb1!important}
.result-details>summary{font-size:12px!important;padding:15px 16px!important}
.disclaimer{color:#858585!important;font-size:11.5px!important;line-height:1.5!important;padding:2px 20px 20px!important}

/* Always-visible action buttons */
.calc-action-dock{padding:11px 12px!important;gap:8px!important}
.calc-action-dock button{font-size:11.5px!important;min-height:42px!important;line-height:1.25!important}

/* Optional setup advisor */
.advisor-intro{padding:26px!important}
.advisor-intro .eyebrow{font-size:11px!important}
.advisor-intro p{font-size:14px!important;line-height:1.6!important;color:#aab1a7!important}
.advisor-launch{font-size:13px!important;min-height:46px}
.advisor-note{font-size:12.5px!important;line-height:1.55!important;color:#929990!important}
.advisor-grid{align-items:start!important}
.advisor-field{display:grid!important;grid-template-rows:48px 60px!important;gap:0!important;min-width:0!important}
.advisor-field label{display:flex!important;align-items:flex-end!important;min-height:0!important;height:48px!important;margin:0!important;padding:0 0 9px!important;font-size:12.5px!important;line-height:1.35!important}
.advisor-field select{width:100%!important;height:60px!important;min-height:60px!important;margin:0!important;padding:0 16px!important;font-size:14px!important;line-height:1.2!important}
.advisor-actions{margin-top:20px!important}
.advisor-primary,.advisor-secondary{font-size:12.5px!important;min-height:44px}
.advisor-summary{font-size:14px!important;line-height:1.6!important}
.advisor-reasons h4{font-size:14px!important}
.advisor-reasons ul{font-size:13.5px!important;line-height:1.6!important}
.advisor-fine{font-size:11.5px!important;line-height:1.55!important;color:#7e877b!important}

/* General explanatory content below the tool */
.content p,.content li{font-size:16px;line-height:1.7}
.faq details p{font-size:15px!important;line-height:1.65!important}

@media(max-width:980px){
  .results{position:relative!important;top:auto!important;max-height:none!important;overflow:visible!important;scrollbar-gutter:auto}
  .advisor-field{grid-template-rows:48px 56px!important}
  .advisor-field select{height:56px!important;min-height:56px!important}
}

@media(max-width:720px){
  .load-row{padding:13px 8px!important}
  .load-name strong{font-size:14px!important}
  .load-name small{font-size:11.5px!important}
  .field-mini input,.field-mini select{font-size:14px!important}
  .recharge-step p{font-size:12.5px!important}
  .recharge-chip{font-size:12.5px!important}
  .metric{min-height:0}
  .metric small{font-size:12.5px!important}
  .disclaimer{font-size:11px!important}
  .advisor-intro{padding:21px!important}
  .advisor-field{display:block!important}
  .advisor-field label{display:block!important;height:auto!important;min-height:0!important;margin:0 0 7px!important;padding:0!important}
  .advisor-field select{height:50px!important;min-height:50px!important;padding:0 14px!important}
  .content p,.content li{font-size:15px}
}

/* Phones: put Watts and Hours together on a second row so neither input can
   be pushed beyond the viewport. Use the full phone breakpoint rather than
   waiting for very narrow devices. */
@media(max-width:720px){
  .loads{padding:8px!important}
  .load-row{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "check name name"
      "check watts hours";
    column-gap:10px!important;
    row-gap:11px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:15px 12px!important;
  }
  .load-row>.enabled{grid-area:check;align-self:center;justify-self:center;margin:0!important}
  .load-row>.load-name{grid-area:name;min-width:0!important;max-width:100%!important}
  .load-row>.watts-field{grid-area:watts}
  .load-row>.hours-field{grid-area:hours}
  .load-row>.field-mini{width:100%!important;min-width:0!important;max-width:100%!important}
  .load-row>.field-mini input{display:block;width:100%!important;min-width:0!important;max-width:100%!important}
}


/* Faster, single-scroll calculator flow */
.hero{padding-top:30px!important;padding-bottom:22px!important}
.hero p.lead{margin-top:11px!important;max-width:780px!important}
.free-note{margin-top:12px!important}
@media(min-width:981px){
  .calculator-shell{height:auto!important;min-height:0!important;overflow:visible!important;align-items:start!important}
  .calculator-shell>.panel:first-child{height:auto!important;min-height:0!important;overflow:visible!important}
  .results{position:sticky!important;top:94px!important;height:auto!important;max-height:calc(100vh - 112px)!important;overflow-y:auto!important}
}