/* Calculate page viewport and result-area stability */
:root{
  --vh: 1vh;
}

/* iOS input zoom, horizontal drift, and unit select spacing fixes. */
html{
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body#calc-body{
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y;
}

body#calc-body .mil-wrapper,
body#calc-body .mil-content,
body#calc-body #swupMain,
body#calc-body .mil-content .container,
body#calc-body .mil-content .row,
body#calc-body .input-box,
body#calc-body #Result{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Keep the nested Wobbe grid aligned with the top-level form controls. */
body#calc-body #wobbeUserFields > .row{
  max-width: none;
}

@media screen and (max-width: 767px){
  body#calc-body .mil-content .container{
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  body#calc-body .mil-content .row{
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  body#calc-body .mil-content .col-lg-5,
  body#calc-body #Result{
    width: 100%;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  body#calc-body .input-box{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body#calc-body .calc-approach-copy{
    max-width: none;
    color: rgba(0, 0, 0, .58);
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.62;
    text-wrap: pretty;
  }

  body#calc-body .calc-approach-copy--justify{
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
  }

  body#calc-body .bootstrap-form input.form-control,
  body#calc-body .bootstrap-form select.form-select,
  body#calc-body .bootstrap-form textarea.form-control{
    font-size: 16px;
    line-height: 1.35;
    min-width: 0;
  }
  body#calc-body input::placeholder,
  body#calc-body textarea::placeholder{
    font-size: 16px;
  }
  body#calc-body input::-webkit-input-placeholder,
  body#calc-body textarea::-webkit-input-placeholder{
    font-size: 16px;
  }

  body#calc-body .bootstrap-form .input-group{
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  body#calc-body .bootstrap-form .input-group > .form-control{
    flex: 1 1 auto;
    min-width: 0;
  }

  body#calc-body .bootstrap-form .input-group > select.form-select,
  body#calc-body .bootstrap-form .input-group > .input-group-text{
    flex: 0 0 auto;
    width: auto;
    max-width: 42%;
    white-space: nowrap;
  }

  body#calc-body .bootstrap-form .input-group > select.form-select{
    min-width: 7rem;
    padding-right: 2rem;
    background-position: right .65rem center;
  }

  body#calc-body .property-form-hint{
    white-space: normal;
  }
}

#calc-body .mil-wrapper,
#calc-body .mil-content,
#calc-body #swupMain{
  min-height: calc(var(--vh) * 100);
}

@supports (height: 100svh){
  #calc-body .mil-wrapper,
  #calc-body .mil-content,
  #calc-body #swupMain{
    min-height: 100svh;
  }
}

@supports (-webkit-touch-callout: none){
  #calc-body .mil-wrapper,
  #calc-body .mil-content,
  #calc-body #swupMain{
    height: auto;
  }
}

#calc-body .mil-banner,
#calc-body .mil-preloader,
#calc-body .mil-curtain,
#calc-body .mil-animation-frame{
  height: auto;
  min-height: calc(var(--vh) * 100);
}

@supports (height: 100svh){
  #calc-body .mil-banner,
  #calc-body .mil-preloader,
  #calc-body .mil-curtain,
  #calc-body .mil-animation-frame{
    min-height: 100svh;
  }
}

#calc-body .et-result{
  --header-h: 0px;
  box-sizing: border-box;
  border-radius: 12px;
  max-height: calc((var(--vh) * 100) - var(--header-h) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100svh){
  #calc-body .et-result{
    max-height: calc(100svh - var(--header-h) - 24px);
  }
}

#calc-body .et-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#calc-body .et-scroll table{
  min-width: 640px;
}

#calc-body .et-result img,
#calc-body .et-result canvas,
#calc-body .et-result svg{
  max-width: 100%;
  height: auto;
}

@media (max-width: 576px){
  #calc-body .et-result{
    padding: 12px;
  }

  #calc-body .et-result table{
    font-size: 14px;
  }

  #calc-body .mil-p-120-90{
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

#calc-body #Result,
#calc-body .et-result{
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

#calc-body .et-result table{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px){
  #calc-body .et-result th,
  #calc-body .et-result td{
    white-space: nowrap;
  }
}

#Result{
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#Result .result-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Humid air sonuc tablosu: birim uzun (m3/kg dry-air, J/kg dry-air/K vb.) oldugundan
   value hucresi tek satirda kalsin; container'da overflow-x:auto zaten mevcut. */
#Result .result-table--air-properties td.value{
  white-space: nowrap;
}

#Result .kpi-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

#Result .kpi-card{
  flex: 1 1 250px;
  box-sizing: border-box;
}

#Result table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#Result .input-box{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

#Result .result-table--properties .property-label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
}

#Result .property-info-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
  transition: color 0.18s ease, transform 0.18s ease;
}

#Result .property-info-icon:hover,
#Result .property-info-icon:focus{
  border-color: transparent;
  background: transparent;
  color: #ff9800;
  transform: translateY(-1px) scale(1.05);
}

#Result .property-result--pq .result-table--property-inputs tbody tr:nth-child(3){
  display: none;
}

body#calc-body .property-form-hint{
  white-space: normal;
}

#Result .jt-mobile-states{
  display: none;
}

/* Compact comparison tables for wide calculator results. */
@media (max-width: 576px){
  #Result .result-table--comparison{
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-size: 11px;
  }

  #Result .result-table--meg .col-prop{ width: 28%; }
  #Result .result-table--meg .col-val { width: 27%; }
  #Result .result-table--meg .col-chg { width: 18%; }

  #Result .result-table--comparison td,
  #Result .result-table--comparison th{
    padding: 6px 4px;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    line-height: 1.25;
    vertical-align: top;
  }

  #Result .result-table--comparison .value{
    text-align: right;
  }

  #Result .result-table--comparison .muted,
  #Result .result-table--comparison .phase-badge{
    display: inline;
    white-space: normal;
  }

  #Result .result-table--comparison .phase-badge{
    padding: 4px 10px;
    font-size: .85rem;
    line-height: 1.35;
  }

  #Result .result-table--properties{
    table-layout: fixed;
  }

  #Result .result-table--properties th:first-child,
  #Result .result-table--properties td:first-child{
    width: 58%;
    padding-right: 8px;
  }

  #Result .result-table--properties th.si-column,
  #Result .result-table--properties td.si-column{
    width: 42%;
    padding-left: 8px;
  }

  /* Input Conditions tablosu si-column yapisina sahip degil; sabit %58/%42
     kolonlama "Pressure + Temperature" gibi uzun degerleri tasiriyor.
     Kendi icerigine gore genislemesi icin layout'u auto'ya ceviriyoruz. */
  #Result .result-table--properties.result-table--property-inputs{
    table-layout: auto;
  }
  #Result .result-table--properties.result-table--property-inputs th:first-child,
  #Result .result-table--properties.result-table--property-inputs td:first-child{
    width: auto;
    padding-right: 16px;
  }
  #Result .result-table--property-inputs td.value{
    white-space: nowrap;
  }

  #Result .result-table--properties .property-label{
    gap: 5px;
    font-size: 13px;
  }

  #Result .result-table--properties .property-info-icon{
    flex-basis: auto;
    width: auto;
    height: auto;
    font-size: 12px;
  }

  #Result .result-table--jtvalve{
    display: none;
  }

  #Result .jt-mobile-states{
    margin-top: 12px;
    display: block;
  }

  #Result .jt-state-item{
    display: block;
  }

  #Result .jt-state-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #f2f4f7;
  }

  #Result .jt-state-row--phase{
    background: #f8fafc;
  }

  #Result .jt-state-label{
    color: #4b5563;
    font-weight: 400;
  }

  #Result .jt-state-row--phase .jt-state-label{
    color: #111827;
    font-weight: 700;
  }

  #Result .jt-state-value{
    color: #111827;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
  }

  #Result .jt-state-phase .phase-badge{
    font-size: .85rem;
    padding: 4px 10px;
  }
}

#calc-body br{
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   Calculate submit button — frame-friendly polish
   - Targets `.calculator-submit-button` (the actual class on the
     public-facing Calculate button in calculate_forms/*Form.php).
   - Keeps the existing card-style idle border from `.btn-input-style`
     so the button visually sits INSIDE its form card.
   - On hover/focus: replace Bootstrap's blue glow with a clean thin
     black ring. On active: subtle press feedback.
   - Icon ↔ text spacing already handled by .calculator-submit-button
     (display:inline-flex; gap:.5rem). We only refine padding so the
     glyph + word feel balanced inside the pill.
   ───────────────────────────────────────────────────────────────── */
body#calc-body .calculator-submit-actions {
  /* Make sure the right-aligned action row breathes a little from the
     bottom of the form card so the button doesn't kiss the border. */
  margin-top: .25rem;
  gap: .5rem;
  flex-wrap: wrap;
}

body#calc-body .hex-submit-actions,
body#calc-body .meg-submit-actions,
body#calc-body .properties-submit-actions,
body#calc-body .regulator-submit-actions,
body#calc-body .humid-air-submit-actions,
body#calc-body .steam-submit-actions,
body#calc-body .linde-submit-actions,
body#calc-body .wobbe-submit-actions {
  justify-content: space-between;
}

body#calc-body .calculator-submit-button,
body#calc-body .calculator-example-button {
  /* Inherit border from .btn-input-style; just unify spacing + weight. */
  padding: .5rem 1.1rem;
  font-weight: 600;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  white-space: nowrap;
  /* Animate only what we change on hover — no layout twitch. */
  transition: border-color .18s ease, color .18s ease,
              background-color .18s ease, box-shadow .18s ease,
              transform .12s ease;
}

body#calc-body .calculator-submit-button > .bi,
body#calc-body .calculator-example-button > .bi {
  font-size: 1.05em;
  line-height: 1; /* baseline-stable next to <span>Calculate</span> */
}

/* Hover / keyboard focus → thin black ring; suppress Bootstrap blue. */
body#calc-body .calculator-submit-button:hover,
body#calc-body .calculator-submit-button:focus-visible,
body#calc-body .calculator-example-button:hover,
body#calc-body .calculator-example-button:focus-visible {
  border-color: #0a0c10;
  color: #0a0c10;
  background: #fff;
  box-shadow: none;
  outline: none; /* :focus-visible's UA outline replaced by border ring */
}

/* Active press feedback — gentle, no jumping. */
body#calc-body .calculator-submit-button:active,
body#calc-body .calculator-example-button:active {
  border-color: #0a0c10;
  transform: translateY(1px);
  box-shadow: none;
}

/* Public Linde-Hampson cycle layout */
body#calc-body.calc-cycle-page .calc-cycle-workspace{
  --bs-gutter-y: 1.5rem;
}

body#calc-body .linde-form-section{
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}

body#calc-body .linde-form-box .form-label{
  white-space: normal;
}

body#calc-body .linde-expander-efficiency-field .form-label{
  white-space: nowrap;
}

body#calc-body .linde-placeholder-figure img,
body#calc-body .linde-schematic-figure img{
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

body#calc-body .linde-placeholder-figure{
  max-width: 680px;
  margin: 0 auto;
}

body#calc-body .linde-cycle-map{
  position: relative;
  overflow: visible;
}

/* Discourage visitors from saving/opening the schematic in a new tab:
   the figure suppresses the right-click context menu (no "Open image in new
   tab" / "Save image" items) and the image can't be dragged out. The hotspot
   buttons are siblings, so their hover/focus tooltips keep working. */
body#calc-body .linde-cycle-map img{
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

body#calc-body .linde-hotspot{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(12, 34, 59, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: #0c223b;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  transform: translate(-50%, -50%);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body#calc-body .linde-hotspot[data-point="1"]{ left: 12.2%; top: 69.3%; }
body#calc-body .linde-hotspot[data-point="2"]{ left: 12.2%; top: 52.2%; }
body#calc-body .linde-hotspot[data-point="3"]{ left: 17.7%; top: 16.2%; }
body#calc-body .linde-hotspot[data-point="4"]{ left: 49.4%; top: 15.8%; }
body#calc-body .linde-hotspot[data-point="5"]{ left: 82.7%; top: 16.2%; }
body#calc-body .linde-hotspot[data-point="6"]{ left: 89.2%; top: 57.5%; }
body#calc-body .linde-hotspot[data-point="7"]{ left: 76.8%; top: 57.5%; }
body#calc-body .linde-hotspot[data-point="8"]{ left: 78.2%; top: 33.5%; }
body#calc-body .linde-hotspot[data-point="9"]{ left: 53.2%; top: 33.5%; }
body#calc-body .linde-hotspot[data-point="10"]{ left: 70.7%; top: 78.5%; }

body#calc-body .linde-hotspot:hover,
body#calc-body .linde-hotspot.is-active,
body#calc-body .linde-hotspot:focus,
body#calc-body .linde-hotspot:focus-visible{
  border-color: #0c223b;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
  outline: none;
  transform: translate(-50%, -50%) scale(1.05);
}

body#calc-body .linde-hotspot__card{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 4;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  visibility: hidden;
}

body#calc-body .linde-hotspot__card strong{
  display: block;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
  color: #0c223b;
  font-size: 12px;
  font-weight: 800;
}

body#calc-body .linde-hotspot--right .linde-hotspot__card{
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

body#calc-body .linde-tooltip--left .linde-hotspot__card,
body#calc-body .linde-tooltip--left-inset .linde-hotspot__card,
body#calc-body .linde-tooltip--left-fixed .linde-hotspot__card,
body#calc-body .linde-tooltip--right .linde-hotspot__card{
  top: 50%;
  bottom: auto;
}

body#calc-body .linde-tooltip--left-fixed .linde-hotspot__card,
body#calc-body .linde-tooltip--left .linde-hotspot__card{
  left: auto;
  right: calc(100% + 10px);
  transform: translate(4px, -50%);
}

/* Points 1 and 2 share the same far-left coordinate, so their left-anchored
   cards grow leftward from an identical right edge. Point 2's longer label
   ("Mixed suction outlet") made its card wider, pushing it further into the
   frame than point 1's. Pin both to one width so they render identically -
   point 2's label wraps onto a second line instead of overflowing more. */
body#calc-body .linde-hotspot[aria-label^="Point 1,"] .linde-hotspot__card,
body#calc-body .linde-hotspot[aria-label^="Point 2,"] .linde-hotspot__card{
  box-sizing: border-box;
  width: 118px;
}

body#calc-body .linde-tooltip--left-inset .linde-hotspot__card{
  left: auto;
  right: calc(100% - 68px);
  max-width: 190px;
  transform: translate(4px, -50%);
}

body#calc-body .linde-tooltip--right .linde-hotspot__card{
  left: calc(100% + 10px);
  right: auto;
  transform: translate(-4px, -50%);
}

body#calc-body .linde-tooltip--right-offset .linde-hotspot__card{
  top: 50%;
  bottom: auto;
  left: calc(100% + 56px);
  right: auto;
  transform: translate(-4px, -50%);
}

body#calc-body .linde-tooltip--top-right .linde-hotspot__card{
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

body#calc-body .linde-tooltip--top-right-out .linde-hotspot__card{
  left: 0;
  right: auto;
  transform: translate(0, 4px);
}

body#calc-body .linde-tooltip--bottom-left .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-right .linde-hotspot__card{
  top: calc(100% + 8px);
  bottom: auto;
}

body#calc-body .linde-tooltip--bottom-left .linde-hotspot__card{
  left: auto;
  right: 0;
  transform: translate(0, -4px);
}

body#calc-body .linde-tooltip--bottom-right .linde-hotspot__card{
  left: 0;
  right: auto;
  transform: translate(0, -4px);
}

body#calc-body .linde-hotspot:hover .linde-hotspot__card,
body#calc-body .linde-hotspot.is-active .linde-hotspot__card,
body#calc-body .linde-hotspot:focus .linde-hotspot__card,
body#calc-body .linde-hotspot:focus-visible .linde-hotspot__card{
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

body#calc-body .linde-hotspot--right:hover .linde-hotspot__card,
body#calc-body .linde-hotspot--right.is-active .linde-hotspot__card,
body#calc-body .linde-hotspot--right:focus .linde-hotspot__card,
body#calc-body .linde-hotspot--right:focus-visible .linde-hotspot__card{
  transform: translate(0, 0);
}

body#calc-body .linde-tooltip--left:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--left.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--left:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--left:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--left-inset:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--left-inset.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--left-inset:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--left-inset:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--left-fixed:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--left-fixed.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--left-fixed:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--left-fixed:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--right:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--right.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--right:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--right:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--right-offset:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--right-offset.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--right-offset:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--right-offset:focus-visible .linde-hotspot__card{
  transform: translate(0, -50%);
}

body#calc-body .linde-tooltip--top-right:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right-out:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right-out.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right-out:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--top-right-out:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-left:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-left.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-left:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-left:focus-visible .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-right:hover .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-right.is-active .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-right:focus .linde-hotspot__card,
body#calc-body .linde-tooltip--bottom-right:focus-visible .linde-hotspot__card{
  transform: translate(0, 0);
}

body#calc-body #Result .linde-cycle-result{
  overflow-x: hidden;
}

body#calc-body .linde-visual-table td{
  padding: 14px 18px 18px;
}

body#calc-body .linde-legend{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px 14px;
  margin-bottom: 10px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  color: #374151;
  font-size: 12px;
  font-weight: 650;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/* Keep the cycle schematic pinned in view while the user scrolls the
   (taller) input form, so the numbered state points stay referenceable. */
@media (min-width: 992px){
  /* The page-wide `overflow-x: hidden` mobile-drift guards turn these
     wrappers into scroll containers (overflow-y computes to auto), which
     would anchor the sticky schematic to the wrapper instead of the
     viewport. `clip` keeps the horizontal guard without that side effect.
     `body` MUST be included: its `overflow-x: hidden` makes the body an
     intermediate scroll container that never actually scrolls (the viewport
     does), which silently disables sticky for every descendant. */
  body#calc-body.calc-cycle-page,
  body#calc-body.calc-cycle-page .mil-wrapper,
  body#calc-body.calc-cycle-page .mil-content,
  body#calc-body.calc-cycle-page #swupMain,
  body#calc-body.calc-cycle-page .mil-content .container,
  body#calc-body.calc-cycle-page .calc-cycle-workspace,
  body#calc-body.calc-cycle-page #Result{
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Native sticky: the browser pins the schematic at 24px from the top and
     stops it at the bottom of its column (#Result), which the flex row
     stretches to the taller input form's height. So the schematic never
     extends past the form's bottom edge, with no per-scroll JS. */
  body#calc-body.calc-cycle-page .linde-cycle-placeholder{
    position: sticky;
    top: 24px;
  }
}

body#calc-body .linde-legend span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

body#calc-body .linde-line{
  width: 24px;
  border-top: 2px solid #111827;
}

body#calc-body .linde-line--main{ border-color: #16a34a; }
body#calc-body .linde-line--recycle{ border-color: #db2777; border-top-style: dotted; }
body#calc-body .linde-line--product{ border-color: #7c3aed; }
body#calc-body .linde-line--liquid{ border-color: #0ea5e9; }
body#calc-body .linde-line--vapor{ border-color: #f97316; }

body#calc-body .linde-plot-host{
  width: 100%;
  height: clamp(390px, 43vw, 520px);
  min-height: 390px;
}

body#calc-body .linde-plot-host .xtitle,
body#calc-body .linde-plot-host .ytitle{
  font-family: "Outfit", system-ui, sans-serif !important;
  font-weight: 700 !important;
}

body#calc-body .linde-schematic-figure{
  max-width: 720px;
  margin: 0 auto;
}

body#calc-body .linde-scroll{
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body#calc-body .linde-state-table{
  min-width: 700px;
  table-layout: fixed;
}

body#calc-body .linde-state-table .col-point{ width: 58px; }
body#calc-body .linde-state-table .col-state{ width: 36%; }
body#calc-body .linde-state-table .col-quality{ width: 96px; }

body#calc-body .linde-state-table thead:not(.result-section) th{
  padding: 12px 10px;
  color: #111827;
  font-weight: 700;
  border-top: 1px solid #f2f4f7;
  vertical-align: middle;
  white-space: nowrap;
}

body#calc-body .linde-state-table th:first-child,
body#calc-body .linde-state-table td:first-child{
  text-align: left;
}

body#calc-body .linde-state-table th:nth-child(2),
body#calc-body .linde-state-table td:nth-child(2){
  text-align: left;
}

body#calc-body .linde-state-table thead:not(.result-section) th:nth-child(n+3),
body#calc-body .linde-state-table td.value{
  text-align: right;
}

body#calc-body .linde-state-table td{
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body#calc-body .linde-state-table th:last-child,
body#calc-body .linde-state-table td:last-child{
  overflow: visible;
  text-overflow: clip;
}

body#calc-body .linde-state-table td.point{
  color: #334155;
}

@media (max-width: 767px){
  /* On phones, keep all 5 legend items on a single line by shrinking the
     font and gaps (no wrap, no horizontal scroll). The inputs are full-width
     single-line on mobile, so no abbreviated labels are needed either. */
  body#calc-body .linde-legend{
    flex-wrap: nowrap;
    overflow-x: visible;
    justify-content: center;
    gap: 3px 7px;
    font-size: 9px;
  }

  body#calc-body .linde-legend span{
    gap: 4px;
  }

  body#calc-body .linde-line{
    width: 13px;
  }

  body#calc-body .linde-plot-host{
    height: 340px;
    min-height: 340px;
  }

  body#calc-body .linde-visual-table td{
    padding: 12px;
  }

  /* The schematic image is much smaller on phones, so the 26px desktop
     hotspots overlapped the diagram. Shrink the circle and number, and pull
     the tooltip closer so the numbering stays legible without colliding. */
  body#calc-body .linde-hotspot{
    width: 17px;
    height: 17px;
    font-size: 8px;
    border-width: 1px;
  }

  body#calc-body .linde-hotspot__card{
    bottom: calc(100% + 5px);
    max-width: 170px;
    padding: 6px 8px;
    font-size: 11px;
  }

  body#calc-body .linde-tooltip--right-offset .linde-hotspot__card{
    left: auto;
    right: calc(100% + 8px);
    transform: translate(4px, -50%);
  }

  body#calc-body .linde-tooltip--right-offset:hover .linde-hotspot__card,
  body#calc-body .linde-tooltip--right-offset.is-active .linde-hotspot__card,
  body#calc-body .linde-tooltip--right-offset:focus .linde-hotspot__card,
  body#calc-body .linde-tooltip--right-offset:focus-visible .linde-hotspot__card{
    transform: translate(0, -50%);
  }

  body#calc-body .linde-tooltip--left-fixed .linde-hotspot__card{
    left: auto;
    right: calc(100% + 8px);
    transform: translate(4px, -50%);
  }

  body#calc-body .linde-tooltip--left-fixed:hover .linde-hotspot__card,
  body#calc-body .linde-tooltip--left-fixed.is-active .linde-hotspot__card,
  body#calc-body .linde-tooltip--left-fixed:focus .linde-hotspot__card,
  body#calc-body .linde-tooltip--left-fixed:focus-visible .linde-hotspot__card{
    transform: translate(0, -50%);
  }

  body#calc-body .linde-hotspot[data-point="1"] .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="2"] .linde-hotspot__card{
    top: 50%;
    bottom: auto;
    left: calc(100% + 8px);
    right: auto;
    max-width: min(190px, 62vw);
    transform: translate(-4px, -50%);
  }

  body#calc-body .linde-hotspot[data-point="1"]:hover .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="1"].is-active .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="1"]:focus .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="1"]:focus-visible .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="2"]:hover .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="2"].is-active .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="2"]:focus .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="2"]:focus-visible .linde-hotspot__card{
    transform: translate(0, -50%);
  }

  body#calc-body .linde-hotspot[data-point="5"] .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="6"] .linde-hotspot__card{
    top: 50%;
    bottom: auto;
    left: auto;
    right: calc(100% + 8px);
    max-width: min(190px, 62vw);
    transform: translate(4px, -50%);
  }

  body#calc-body .linde-hotspot[data-point="5"]:hover .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="5"].is-active .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="5"]:focus .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="5"]:focus-visible .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="6"]:hover .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="6"].is-active .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="6"]:focus .linde-hotspot__card,
  body#calc-body .linde-hotspot[data-point="6"]:focus-visible .linde-hotspot__card{
    transform: translate(0, -50%);
  }

  /* The 700px-wide State Points table forced an awkward horizontal scroll on
     phones (headers/pressures off-screen). Render each row as a stacked card
     with its column header inline, so every value is visible top-to-bottom. */
  body#calc-body .linde-scroll{
    overflow-x: visible;
  }

  body#calc-body .linde-state-table{
    min-width: 0;
    width: 100%;
    table-layout: auto;
  }

  body#calc-body .linde-state-table colgroup{
    display: none;
  }

  body#calc-body .linde-state-table thead:not(.result-section){
    display: none;
  }

  body#calc-body .linde-state-table tbody{
    display: block;
  }

  body#calc-body .linde-state-table tbody tr{
    display: block;
  }

  /* Data cells read as the panel's standard label / value rows (same tokens
     as .label and .value), separated by the same hairline used by the desktop
     result-table — no card borders, so nothing looks boxed-in. */
  body#calc-body .linde-state-table tbody td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    border-top: 1px solid #f2f4f7;
    color: #111827;
    font-weight: 600;
  }

  body#calc-body .linde-state-table tbody td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    color: #4b5563;
    font-weight: 500;
    text-align: left;
  }

  /* Each "Point N" is a lightweight divider heading (just a top rule + bold
     navy text), not a filled gray bar — repeating the #f8fafc fill for all 10
     points read as too gray. Its 16px left inset aligns the text with the
     "State Points" header and the data labels below it. */
  body#calc-body .linde-state-table tbody td.point{
    margin-top: 18px;
    padding: 8px 16px;
    border-top: 1px solid #e5e7eb;
    color: #0c223b;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  body#calc-body .linde-state-table tbody tr:first-child td.point{
    margin-top: 8px;
    border-top: none;
  }

  body#calc-body .linde-state-table tbody td.point::before{
    color: #0c223b;
    font-weight: 700;
  }
}

/* ============================================================
   Calculate loader — falling droplet (public calculators)
   Mirrors the Panel loader (.calc-drop-loader). Markup is produced
   by calcDropLoaderHtml() in js/main.js. To restyle, tweak the
   variables below — nothing else needs to change.
   ============================================================ */
:root{
  --calc-loader-color: #0c223b;   /* droplet + splash ring color   */
  --calc-loader-text: #6b7280;    /* "Calculating..." caption color */
}
.calc-loading-text{
  color: var(--calc-loader-text);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.calc-drop-loader{
  position: relative;
  width: 80px;
  height: 140px;
  margin: 0 auto 14px;
}
.calc-drop-loader .cd-drop{
  position: absolute;
  left: 50%;
  top: 4px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: var(--calc-loader-color);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: calcDrop 1.7s cubic-bezier(.55, 0, .75, 1) infinite;
}
.calc-drop-loader .cd-splash{
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 3px solid var(--calc-loader-color);
  border-radius: 50%;
  opacity: 0;
  animation: calcSplash 1.7s ease-out infinite;
}
@keyframes calcDrop{
  0%{ top: 4px; transform: scaleY(.8) scaleX(1.05); }
  52%{ top: 96px; transform: scaleY(1.35) scaleX(.8); }
  64%{ top: 112px; transform: scale(1.5, .45); }
  72%, 100%{ top: 112px; transform: scale(.1, .1); opacity: 0; }
}
@keyframes calcSplash{
  0%, 60%{ transform: scale(.1); opacity: 0; }
  66%{ opacity: 1; }
  100%{ transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .calc-drop-loader .cd-drop,
  .calc-drop-loader .cd-splash{ animation: none; }
}