/* ==========================================================
   STE_HEAT_LOSS_VISUAL_POLISH_V1
   Presentation only. No calculation behaviour.
   ========================================================== */


/* ----------------------------------------------------------
   Workspace header
   ---------------------------------------------------------- */

.hl-workspace {
  padding:
    52px 0
    78px;
}


.hl-workspace__head {
  align-items:
    center;

  margin-bottom:
    20px;
}


.hl-workspace h2 {
  margin-bottom:
    5px;
}


.hl-vp-workspace-lead {
  max-width:
    720px;

  margin:
    0;

  color:
    #8299ad;

  font-size:
    12px;

  line-height:
    1.55;
}


.hl-workspace-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  flex-shrink:
    0;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(245, 165, 36, 0.24);

  border-radius:
    999px;

  color:
    #f5a524;

  background:
    rgba(245, 165, 36, 0.07);

  font-size:
    11px;

  font-weight:
    750;
}


.hl-workspace-status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 10px
    rgba(245, 165, 36, 0.32);
}


/* ----------------------------------------------------------
   Main calculation card
   ---------------------------------------------------------- */

.hl-panel {
  padding:
    22px;

  border-color:
    rgba(85, 151, 215, 0.27);

  background:
    linear-gradient(
      180deg,
      rgba(14, 29, 45, 0.98),
      rgba(11, 25, 40, 0.98)
    );

  box-shadow:
    0 18px 48px
    rgba(0, 0, 0, 0.12);
}


/* Old flat grid becomes a vertical collection
   of logical engineering sections. */

.hl-form-grid {
  display:
    flex !important;

  flex-direction:
    column;

  gap:
    13px;
}


/* ----------------------------------------------------------
   Engineering sections
   ---------------------------------------------------------- */

.hl-vp-section {
  padding:
    16px;

  border:
    1px solid
    rgba(92, 147, 201, 0.17);

  border-radius:
    12px;

  background:
    rgba(7, 20, 33, 0.42);
}


.hl-vp-section__head {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    14px;
}


.hl-vp-section__number {
  display:
    inline-grid;

  place-items:
    center;

  min-width:
    27px;

  height:
    22px;

  padding:
    0 6px;

  border:
    1px solid
    rgba(35, 136, 255, 0.30);

  border-radius:
    6px;

  color:
    #45bdff;

  background:
    rgba(35, 136, 255, 0.07);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;
}


.hl-vp-section__title {
  color:
    #eaf4ff;

  font-size:
    12px;

  font-weight:
    760;
}


.hl-vp-section__hint {
  margin-left:
    auto;

  color:
    rgba(151, 176, 201, 0.58);

  font-size:
    10px;

  line-height:
    1.3;

  text-align:
    right;
}


.hl-vp-section__grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    14px
    16px;
}


/* ----------------------------------------------------------
   Fields
   ---------------------------------------------------------- */

.hl-vp-section label {
  min-width:
    0;
}


.hl-form-grid label {
  gap:
    8px;

  color:
    #91a8bc;

  font-size:
    11px;

  line-height:
    1.35;
}


.hl-form-grid input,
.hl-form-grid select {
  min-height:
    46px !important;

  border-color:
    rgba(98, 161, 220, 0.27) !important;

  border-radius:
    9px !important;

  background:
    #071524 !important;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}


.hl-form-grid input:hover,
.hl-form-grid select:hover {
  border-color:
    rgba(98, 161, 220, 0.42) !important;
}


.hl-form-grid input:focus,
.hl-form-grid select:focus {
  border-color:
    #2388ff !important;

  box-shadow:
    0 0 0 3px
    rgba(35, 136, 255, 0.08);
}


.hl-form-grid input[readonly] {
  color:
    #b8cad9 !important;

  border-color:
    rgba(94, 130, 166, 0.18) !important;

  background:
    rgba(6, 18, 30, 0.72) !important;

  cursor:
    default;

  box-shadow:
    inset 3px 0 0
    rgba(63, 226, 160, 0.28);
}


.hl-form-grid input[readonly]:focus {
  box-shadow:
    inset 3px 0 0
    rgba(63, 226, 160, 0.28);
}


.hl-v2-helper {
  margin-top:
    1px;

  color:
    rgba(153, 181, 207, 0.62);

  font-size:
    10px;

  line-height:
    1.42;
}


/* ----------------------------------------------------------
   Environment note
   ---------------------------------------------------------- */

.hl-v2-note {
  position:
    relative;

  margin:
    14px 0 0;

  padding:
    11px
    13px
    11px
    38px;

  border:
    1px solid
    rgba(58, 145, 230, 0.17);

  border-radius:
    9px;

  color:
    rgba(188, 211, 235, 0.76);

  background:
    rgba(20, 60, 96, 0.10);

  font-size:
    11px;

  line-height:
    1.5;
}


.hl-v2-note::before {
  content:
    "i";

  position:
    absolute;

  left:
    13px;

  top:
    11px;

  display:
    grid;

  place-items:
    center;

  width:
    16px;

  height:
    16px;

  border:
    1px solid
    rgba(67, 202, 255, 0.38);

  border-radius:
    50%;

  color:
    #43caff;

  font-size:
    9px;

  font-weight:
    800;
}


/* ----------------------------------------------------------
   Model assumption
   ---------------------------------------------------------- */

.hl-assumption {
  margin:
    14px 0 0;

  padding:
    11px
    13px;

  border-left:
    2px solid
    rgba(67, 202, 255, 0.34);

  border-radius:
    0 8px 8px 0;

  color:
    rgba(139, 165, 188, 0.72);

  background:
    rgba(4, 15, 26, 0.26);

  font-size:
    10px;

  line-height:
    1.55;
}


/* ----------------------------------------------------------
   Required-fields legend
   ---------------------------------------------------------- */

.hl-panel .engineering-field-legend {
  margin:
    14px 0 0;

  padding:
    11px
    13px;

  border-color:
    rgba(125, 151, 183, 0.12);

  border-radius:
    9px;

  background:
    rgba(5, 16, 28, 0.34);

  font-size:
    10px;

  line-height:
    1.55;
}


/* ----------------------------------------------------------
   Calculation button
   ---------------------------------------------------------- */

.hl-calc {
  min-width:
    220px;

  min-height:
    46px;

  margin-top:
    16px;

  padding:
    0 26px;

  font-size:
    12px;

  box-shadow:
    0 10px 24px
    rgba(20, 114, 222, 0.12);
}


.hl-calc:not(:disabled):hover {
  filter:
    brightness(1.06);
}


.hl-calc:disabled {
  box-shadow:
    none;

  opacity:
    0.48;
}


/* ----------------------------------------------------------
   Result block
   ---------------------------------------------------------- */

.hl-result {
  margin-top:
    16px;

  border-color:
    rgba(63, 226, 160, 0.19);

  background:
    linear-gradient(
      180deg,
      rgba(13, 31, 45, 0.98),
      rgba(10, 27, 40, 0.98)
    );
}


.hl-result__head strong {
  color:
    #3fe2a0;
}


.hl-result-item {
  border-color:
    rgba(96, 158, 215, 0.18);

  background:
    rgba(17, 31, 48, 0.82);
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 980px) {

  .hl-vp-section__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 720px) {

  .hl-workspace {
    padding:
      42px 0
      62px;
  }


  .hl-panel {
    padding:
      16px;
  }


  .hl-vp-section {
    padding:
      14px;
  }


  .hl-vp-section__grid {
    grid-template-columns:
      1fr;
  }


  .hl-vp-section__hint {
    display:
      none;
  }


  .hl-calc {
    width:
      100%;

    min-width:
      0;
  }

}


/* ==========================================================
   STE_HEAT_LOSS_INLINE_LAMBDA_STATUS_V1
   Compact source/editability marker beside lambda field title
   ========================================================== */

.hl-vp-lambda-title {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.hl-vp-field-meta {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    18px;

  padding:
    2px 7px;

  border:
    1px solid
    rgba(63, 226, 160, 0.20);

  border-radius:
    999px;

  color:
    rgba(105, 231, 179, 0.86);

  background:
    rgba(63, 226, 160, 0.055);

  font-size:
    9px;

  font-weight:
    720;

  letter-spacing:
    0.015em;

  line-height:
    1;
}


.hl-vp-field-meta.is-user {
  border-color:
    rgba(67, 202, 255, 0.20);

  color:
    rgba(91, 207, 255, 0.90);

  background:
    rgba(67, 202, 255, 0.055);
}


/*
 * Original explanatory text remains in DOM for compatibility,
 * but is no longer displayed beneath lambda fields.
 */

[id$="-kins-helper"],
[id$="-soil-k-helper"] {
  display:
    none !important;
}


/* ==========================================================
   STE_HEAT_LOSS_DEPTH_INLINE_V1
   Burial depth reference moved into field title.
   ========================================================== */

.hl-vp-depth-title {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.hl-vp-depth-meta {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    18px;

  padding:
    2px 7px;

  border:
    1px solid
    rgba(67, 202, 255, 0.18);

  border-radius:
    999px;

  color:
    rgba(120, 205, 245, 0.86);

  background:
    rgba(67, 202, 255, 0.05);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1;

  white-space:
    nowrap;
}


.hl-vp-depth-helper-hidden {
  display:
    none !important;
}


/* ==========================================================
   STE_HEAT_LOSS_OUTLET_FLOW_UX_V1
   ========================================================== */

.hl-o-flow-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.hl-o-flow-meta {
  display: inline-flex;
  align-items: center;

  min-height: 18px;
  padding: 2px 7px;

  border: 1px solid rgba(67, 202, 255, 0.20);
  border-radius: 999px;

  color: rgba(103, 211, 255, 0.92);
  background: rgba(67, 202, 255, 0.055);

  font-size: 9px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
}

.hl-o-flow-meta.is-default {
  border-color: rgba(63, 226, 160, 0.20);
  color: rgba(105, 231, 179, 0.88);
  background: rgba(63, 226, 160, 0.055);
}

.hl-o-flow-meta.is-user {
  border-color: rgba(67, 202, 255, 0.20);
  color: rgba(103, 211, 255, 0.92);
  background: rgba(67, 202, 255, 0.055);
}

.hl-o-flow-legacy {
  display: none !important;
}