/**
 * Magnetrix calculators.
 *
 * Two numbered cards: parameters in, results out. Light ground, teal accents,
 * per the brand direction in the brief.
 */

.mxcalc {
  background: #FFFFFF;
  border: 1px solid #E4EFF0;
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 10px 30px rgba(16,74,92,.06);
}
.mxcalc + .mxcalc { margin-top: 20px; }

/* ---- numbered step header ---- */
.mxcalc__step {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
}
.mxcalc__stepnum {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0E6F76;
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.mxcalc__steptitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #04100F;
  letter-spacing: -.01em;
}

/* ---- fields ---- */
.mxcalc__params {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.mxcalc__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mxcalc__f > span {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #3F5C5A;
}
.mxcalc__f input,
.mxcalc__f select {
  height: 50px;
  padding: 0 14px;
  border: 1px solid #DCEAEA;
  border-radius: 11px;
  background: #FFFFFF;
  color: #04100F;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  line-height: normal;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mxcalc__f input:focus,
.mxcalc__f select:focus {
  outline: none;
  border-color: #20E6F2;
  box-shadow: 0 0 0 3px rgba(32,230,242,.18);
}

/* Suffix sits inside the field rather than beside it. */
.mxcalc__suffix { position: relative; }
.mxcalc__suffix input { padding-right: 66px; }
.mxcalc__suffix::after {
  content: attr(data-suffix);
  position: absolute;
  right: 1px;
  bottom: 1px;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid #DCEAEA;
  border-radius: 0 10px 10px 0;
  background: #F7FCFC;
  color: #6C8A88;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  pointer-events: none;
}

.mxcalc__go {
  height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: 11px;
  background: #0E6F76;
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.mxcalc__go:hover { background: #08535A; transform: translateY(-1px); }
.mxcalc__go:focus-visible { outline: 3px solid #20E6F2; outline-offset: 2px; }

.mxcalc__foot {
  margin: 14px 0 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: #6C8A88;
}

/* ---- results ---- */
.mxcalc__results { margin-top: 0; }
.mxcalc__results.is-warn .mxcalc__warn {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #FDF3F1;
  border: 1px solid #F0D2CB;
  color: #A2503F;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14.5px;
}

.mxcalc__tiles {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 16px;
}
.mxcalc__tiles--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.mxcalc__tile {
  padding: 22px 20px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
}
.mxcalc__tile.is-size  { background: #EDF8F8; border: 1px solid #CFE9EA; }
.mxcalc__tile.is-ok    { background: #F1FAF4; border: 1px solid #C9E9D5; }
.mxcalc__tile.is-no    { background: #FDF2F1; border: 1px solid #F2D3CE; }
.mxcalc__tile.is-plain { background: #F7FCFC; border: 1px solid #E4EFF0; }

.mxcalc__tlabel {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #3F5C5A;
}
.mxcalc__tvalue {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: #0E6F76;
}
.mxcalc__tile.is-ok .mxcalc__tvalue { color: #1F8A4C; }
.mxcalc__tile.is-no .mxcalc__tvalue { color: #C0463A; }
.mxcalc__tile.is-plain .mxcalc__tvalue { font-size: 30px; color: #04100F; }
.mxcalc__tsub {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: #6C8A88;
}

/* ---- summary strip ---- */
.mxcalc__facts {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid #E4EFF0;
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
.mxcalc__fact { display: flex; flex-direction: column; gap: 3px; position: relative; }
.mxcalc__fact + .mxcalc__fact { padding-left: 18px; border-left: 1px solid #ECF6F6; }
.mxcalc__flabel {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  color: #6C8A88;
}
.mxcalc__fvalue {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #04100F;
  letter-spacing: -.01em;
}
.mxcalc__fsub {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  color: #9FBFBD;
}

.mxcalc__note {
  margin: 14px 0 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6C8A88;
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .mxcalc__params { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mxcalc__params .mxcalc__go { grid-column: 1 / -1; width: 100%; }
  .mxcalc__tiles { grid-template-columns: 1fr; }
  .mxcalc__facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mxcalc__fact:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .mxcalc { padding: 20px 18px; }
  .mxcalc__params,
  .mxcalc__tiles--2 { grid-template-columns: 1fr; }
  .mxcalc__facts { grid-template-columns: 1fr; }
  .mxcalc__fact + .mxcalc__fact {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid #ECF6F6;
  }
  .mxcalc__tvalue { font-size: 34px; }
  .mxcalc__steptitle { font-size: 17px; }
}

/* The two cards are one component; the wrapper carries the hook. */
.mxcalc-wrap { display: block; }
.mxcalc-wrap .mxcalc + .mxcalc { margin-top: 20px; }
.mxcalc-wrap .mxcalc__results:not([hidden]) ~ [data-empty] { display: none; }