.mtsl-wrap{--bg:#f7f7f4;--card:#fff;--text:#1e2a24;--muted:#68736d;--line:#dfe5e1;--accent:#2d6650;--accent-soft:#eaf3ee;--warn:#8a5c10;--warn-bg:#fff7df;max-width:1180px;margin:2rem auto;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
.mtsl-wrap *{box-sizing:border-box}.mtsl-header{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;margin-bottom:1.25rem;padding:1.4rem 1.5rem;background:linear-gradient(135deg,#eef4ef,#f8f5ed);border:1px solid var(--line);border-radius:20px}.mtsl-header h2{margin:.2rem 0 .4rem;font-size:clamp(1.6rem,3vw,2.5rem)}.mtsl-header p{margin:.2rem 0;color:var(--muted)}.mtsl-kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--accent)!important}.mtsl-live-badge{white-space:nowrap;font-size:.84rem;background:#fff;padding:.55rem .8rem;border-radius:999px;border:1px solid var(--line)}.mtsl-live-badge span{display:inline-block;width:8px;height:8px;background:#4aa171;border-radius:50%;margin-right:.35rem}.mtsl-grid{display:grid;grid-template-columns:1fr;gap:1rem}.mtsl-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.2rem;box-shadow:0 8px 25px rgba(30,42,36,.04)}.mtsl-card h3{margin:0 0:.45rem}.mtsl-section-intro{margin:0 0 1rem;color:var(--muted);font-size:.9rem;max-width:780px}.mtsl-card-context{background:linear-gradient(135deg,#fff,#f5f9f6)}.mtsl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.mtsl-fields label,.mtsl-card label{font-size:1.075rem;font-weight:700;line-height:1.4}.mtsl-help{display:block;margin-top:.35rem;color:var(--muted);font-weight:400;line-height:1.35}.mtsl-wrap [hidden]{display:none!important}.mtsl-wrap input,.mtsl-wrap select{width:100%;margin-top:.35rem;padding:.76rem .8rem;min-height:46px;border:1px solid #cfd8d2;border-radius:10px;background:#fff;font:inherit;font-size:1rem;color:inherit}.mtsl-device-row{display:grid;grid-template-columns:1.5fr .65fr auto .65fr auto;align-items:center;gap:.5rem;margin:.65rem 0}.mtsl-device-row label{display:flex;align-items:center;gap:.45rem}.mtsl-device-row label input{width:auto;margin:0}.mtsl-device-row input{margin:0}.mtsl-note,.mtsl-disclaimer{font-size:.82rem;color:var(--muted);margin-top:.8rem}.mtsl-preset-list{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.8rem}.mtsl-preset-list label{display:flex;align-items:center;gap:.45rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px}.mtsl-preset-list input{width:auto;margin:0}.mtsl-preset-list small{margin-left:auto;color:var(--muted);font-weight:400}.mtsl-btn{border:0;border-radius:10px;padding:.72rem 1rem;font-weight:700;cursor:pointer}.mtsl-btn-secondary{background:var(--accent-soft);color:var(--accent)}.mtsl-custom-device{display:grid;grid-template-columns:1.4fr .7fr .7fr .8fr auto;gap:.45rem;margin:.55rem 0}.mtsl-custom-device input,.mtsl-custom-device select{margin:0}.mtsl-remove{border:0;background:#f4ecec;border-radius:9px;padding:0 .75rem;font-size:1.3rem;cursor:pointer}.mtsl-results{margin-top:1rem;background:#17241e;color:#f6faf8;border-radius:22px;padding:1.3rem}.mtsl-result-hero{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mtsl-result-hero>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:1.2rem;border-radius:16px}.mtsl-result-hero span,.mtsl-result-hero small{display:block;color:#bfd0c7}.mtsl-result-hero strong{display:block;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;margin:.35rem 0}.mtsl-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.8rem}.mtsl-metrics div{background:#22342c;padding:.9rem;border-radius:12px}.mtsl-metrics span{display:block;color:#b8c7c0;font-size:.78rem}.mtsl-metrics strong{display:block;margin-top:.25rem}.mtsl-results-stack{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}.mtsl-results-stack>div{background:#fff;color:var(--text);padding:1rem;border-radius:16px}.mtsl-results-stack h3{margin:.1rem 0 1rem}.mtsl-breakdown-row{margin:.7rem 0}.mtsl-breakdown-row>div:first-child{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}.mtsl-bar{height:8px;background:#edf0ee;border-radius:999px;margin-top:.3rem;overflow:hidden}.mtsl-bar i{display:block;height:100%;background:#477965;border-radius:999px}.mtsl-rec{padding:.75rem .8rem;border-radius:10px;margin:.55rem 0;font-size:.9rem}.mtsl-rec.ok{background:#edf7f1}.mtsl-rec.tip{background:#eef3f8}.mtsl-rec.warn{background:var(--warn-bg);color:#6d4709}.mtsl-disclaimer{color:#aebdb6;margin-bottom:0}
@media(max-width:780px){.mtsl-header{display:block}.mtsl-live-badge{display:inline-block;margin-top:.8rem}.mtsl-grid,.mtsl-result-hero,.mtsl-results-stack{grid-template-columns:1fr}.mtsl-fields,.mtsl-preset-list{grid-template-columns:1fr}.mtsl-metrics{grid-template-columns:1fr 1fr}.mtsl-device-row{grid-template-columns:1.2fr .8fr auto}.mtsl-device-row input:nth-of-type(2){grid-column:2}.mtsl-custom-device{grid-template-columns:1fr 1fr}.mtsl-custom-device .cd-name{grid-column:1/-1}.mtsl-remove{min-height:42px}}
/* v0.3.0 field information popovers */
.mtsl-label-text{position:relative;display:inline;max-width:100%}.mtsl-info{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:1.15rem!important;min-width:0!important;max-width:1.15rem!important;height:1.15rem!important;min-height:0!important;margin:0 0 0 .2rem!important;padding:0!important;border:0!important;border-radius:50%;background:transparent;color:var(--accent);font:inherit;font-size:.9rem;line-height:1;cursor:pointer;vertical-align:middle;box-shadow:none!important}.mtsl-info:hover,.mtsl-info:focus{background:var(--accent-soft);outline:2px solid transparent}.mtsl-info-pop{display:none;position:absolute;z-index:50;left:0;top:calc(100% + .45rem);width:min(340px,calc(100vw - 3rem));padding:.75rem .85rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);box-shadow:0 10px 28px rgba(30,42,36,.15);font-size:.82rem;font-weight:400;line-height:1.45}.mtsl-label-text.is-open>.mtsl-info-pop,.mtsl-card h3.is-open>.mtsl-info-pop{display:block}.mtsl-card h3{position:relative}.mtsl-card h3>.mtsl-info-pop{font-size:.82rem;font-weight:400}.mtsl-device-row .mtsl-label-text{display:inline}.mtsl-device-row label{overflow:visible}

/* v0.6.0 readability and compact desktop controls */
@media(min-width:781px){
  .mtsl-fields label,.mtsl-card label{font-size:1.125rem;line-height:1.45}
  .mtsl-wrap input,.mtsl-wrap select{font-size:1.1rem;min-height:50px}
  .mtsl-preset-list label,.mtsl-device-row label{font-size:1.0625rem}
  .mtsl-info-pop,.mtsl-card h3>.mtsl-info-pop{font-size:1rem;line-height:1.55;width:min(420px,calc(100vw - 3rem));padding:.9rem 1rem}
  .mtsl-breakdown-row>div:first-child,.mtsl-rec{font-size:1rem}
  .mtsl-metrics span{font-size:.9rem}
  .mtsl-ac-row{grid-template-columns:minmax(240px,1.5fr) 105px 110px auto 110px auto}
  .mtsl-ac-row select,.mtsl-ac-row input{width:100%;min-width:0}
}
@media(max-width:780px){
  .mtsl-fields label,.mtsl-card label{font-size:1rem}
  .mtsl-wrap input,.mtsl-wrap select{font-size:1rem}
  .mtsl-info-pop,.mtsl-card h3>.mtsl-info-pop{font-size:1rem;line-height:1.5}
}

/* v0.7.0 final layout refinements */
.mtsl-results{
  width:100%;
  max-width:100%;
  margin:1rem 0 0;
  box-sizing:border-box;
}

/* v0.7.1: result area must use the same full container width as input cards */
.mtsl-wrap > .mtsl-results,
.mtsl-wrap .mtsl-results,
.mtsl-wrap .mtsl-summary,
.mtsl-wrap .mtsl-result-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.mtsl-wrap > .mtsl-results {
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: stretch;
}

/* v0.7.2: summary is a grid item like all input cards */
.mtsl-grid > .mtsl-results {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  justify-self: stretch;
}

/* v0.8.0: larger desktop typography for publication */
@media (min-width:781px){
  /* Keep section/card headings at their existing sizes; enlarge normal UI copy. */
  .mtsl-card,
  .mtsl-results-stack>div{
    font-size:17px;
  }

  .mtsl-fields label,
  .mtsl-card label,
  .mtsl-label-text{
    font-size:19px;
    line-height:1.45;
  }

  .mtsl-wrap input,
  .mtsl-wrap select,
  .mtsl-btn{
    font-size:18px;
  }

  .mtsl-preset-list label,
  .mtsl-device-row label,
  .mtsl-custom-device,
  .mtsl-help,
  .mtsl-section-intro,
  .mtsl-note,
  .mtsl-breakdown-row>div:first-child,
  .mtsl-metrics span,
  .mtsl-metrics strong{
    font-size:17px;
  }

  .mtsl-info-pop,
  .mtsl-card h3>.mtsl-info-pop{
    font-size:17px;
    line-height:1.6;
    width:min(440px,calc(100vw - 3rem));
  }

  /* Recommendations and notices intentionally remain compact. */
  .mtsl-rec{
    font-size:13px;
    line-height:1.5;
  }
}

/* Mobile stays readable without becoming oversized. */
@media (max-width:780px){
  .mtsl-card,
  .mtsl-results-stack>div{
    font-size:16px;
  }
  .mtsl-fields label,
  .mtsl-card label,
  .mtsl-label-text,
  .mtsl-wrap input,
  .mtsl-wrap select,
  .mtsl-preset-list label,
  .mtsl-device-row label{
    font-size:16px;
  }
  .mtsl-info-pop,
  .mtsl-card h3>.mtsl-info-pop{
    font-size:16px;
  }
  .mtsl-rec{
    font-size:13px;
    line-height:1.5;
  }
}

/* v0.8.1: lighter desktop field typography */
@media (min-width: 769px) {
  .mtsl-wrap .mtsl-field-label,
  .mtsl-wrap label.mtsl-label,
  .mtsl-wrap .mtsl-label-row label {
    font-size: 18px;
  }

  .mtsl-wrap input,
  .mtsl-wrap select,
  .mtsl-wrap textarea {
    font-weight: 400;
  }
}

/* v0.8.2: fix air-conditioner controls on small screens */
@media (max-width: 768px) {
  .mtsl-wrap .mtsl-aircon-row,
  .mtsl-wrap .mtsl-ac-row,
  .mtsl-wrap .mtsl-aircon-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .mtsl-wrap .mtsl-aircon-row > *,
  .mtsl-wrap .mtsl-ac-row > *,
  .mtsl-wrap .mtsl-aircon-fields > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .mtsl-wrap .mtsl-aircon-row input,
  .mtsl-wrap .mtsl-aircon-row select,
  .mtsl-wrap .mtsl-ac-row input,
  .mtsl-wrap .mtsl-ac-row select,
  .mtsl-wrap .mtsl-aircon-fields input,
  .mtsl-wrap .mtsl-aircon-fields select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Fallback for the current markup where the air-conditioner controls share a row */
  .mtsl-wrap .mtsl-device-row.mtsl-aircon,
  .mtsl-wrap .mtsl-device-row[data-device="aircon"],
  .mtsl-wrap .mtsl-device-row[data-device="ac"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .mtsl-wrap .mtsl-device-row.mtsl-aircon > *,
  .mtsl-wrap .mtsl-device-row[data-device="aircon"] > *,
  .mtsl-wrap .mtsl-device-row[data-device="ac"] > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* v0.8.3: clearer air-conditioner layout, especially on mobile */
.mtsl-wrap .mtsl-ac-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) 110px 140px 170px;
  gap: 12px;
  align-items: end;
}
.mtsl-wrap .mtsl-ac-title {
  align-self: center;
}
.mtsl-wrap .mtsl-ac-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mtsl-wrap .mtsl-ac-field-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
.mtsl-wrap .mtsl-ac-field input,
.mtsl-wrap .mtsl-ac-field select {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .mtsl-wrap .mtsl-ac-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .mtsl-wrap .mtsl-ac-title,
  .mtsl-wrap .mtsl-ac-field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .mtsl-wrap .mtsl-ac-field-label {
    font-size: 16px !important;
  }
  .mtsl-wrap .mtsl-ac-field input,
  .mtsl-wrap .mtsl-ac-field select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}


/* v0.8.5: air-conditioner checkbox follows the same sizing as all other device checkboxes */
.mtsl-wrap .mtsl-ac-title input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  appearance: auto;
  -webkit-appearance: checkbox;
}

/* v0.9.0: reset controls and result clarification */
.mtsl-calculator-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  padding:.15rem .1rem;
}
.mtsl-calculator-actions small{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.4;
}
.mtsl-btn-reset{
  background:#f1f3f2;
  color:var(--text);
  border:1px solid var(--line);
}
.mtsl-result-explain{
  margin-top:.55rem;
  max-width:38rem;
  color:#bfd0c7!important;
  font-size:.8rem!important;
  line-height:1.4;
  font-weight:400;
}
@media(max-width:780px){
  .mtsl-calculator-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* v0.9.1: clear separation between input values and calculated results */
.mtsl-summary-heading{
  margin: 1.4rem 0 .8rem;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 700;
}