#js-tool-container-k-flex-insulation-thickness-calculator .kf-shell { display: flex; flex-direction: column; gap: 22px; color: var(--text-primary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-grid .tbcalc-field:last-child { grid-column: 1 / -1; }

/* Outcome: cross-section + thickness */
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: center; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-cross { width: 168px; height: 168px; justify-self: center; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-cross-svg { width: 100%; height: 100%; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-big { font-size: clamp(2.7rem, 7vw, 3.8rem); font-weight: 800; line-height: 1; color: var(--success); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-big.bad { color: var(--danger-text, var(--danger)); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-big.zero { color: var(--text-muted); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-unit { font-size: 1.2rem; font-weight: 700; color: var(--text-secondary); margin-left: 5px; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-select-cap { font-size: 0.92rem; color: var(--text-secondary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-badge { align-self: flex-start; padding: 7px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; border: 1px solid var(--border-color); color: var(--text-muted); background: var(--bg-secondary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-badge.ok { color: var(--success); border-color: var(--success); background: var(--success-light); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-badge.bad { color: var(--danger-text, var(--danger)); border-color: var(--danger); background: var(--danger-light); }
#js-tool-container-k-flex-insulation-thickness-calculator .tbcalc-status.kf-status { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-left: 4px solid var(--success); }
#js-tool-container-k-flex-insulation-thickness-calculator .tbcalc-status.kf-status.bad { border-left-color: var(--danger); }

/* climate temperature band */
#js-tool-container-k-flex-insulation-thickness-calculator .kf-climate { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-band { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 30%, var(--bg-secondary)), var(--bg-tertiary) 70%); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-band-dew { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--accent-primary); transition: left 300ms cubic-bezier(.4,.0,.2,1); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-band-tu { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent); transition: left 300ms cubic-bezier(.4,.0,.2,1); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-climate { position: relative; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-band-marks { height: 0; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-mk { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; background: var(--bg1, var(--bg-primary, #fff)); padding: 2px 8px; border-radius: 7px; border: 1px solid var(--border-color); transition: left 300ms cubic-bezier(.4,.0,.2,1); z-index: 2; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-mk output { font-weight: 700; font-variant-numeric: tabular-nums; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-mk-dew { top: -30px; transform: translateX(-50%); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-mk-tu { top: 24px; transform: translateX(-50%); border-color: var(--success); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-dot-dew { background: var(--accent-primary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-dot-tu { background: var(--success); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-band-ends { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--text-muted); margin-top: 42px; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-mk.zero { display: none; }


/* ladder of standard thicknesses */
#js-tool-container-k-flex-insulation-thickness-calculator .kf-ladder { display: flex; flex-direction: column; gap: 8px; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row { display: grid; grid-template-columns: 64px 88px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row.kf-selected { border-color: var(--success); background: var(--success-light); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row.kf-fail { opacity: 0.75; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-thick { font-weight: 700; font-variant-numeric: tabular-nums; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-temp { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg-tertiary); overflow: visible; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--accent-primary); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row.kf-fail .kf-r-fill { background: var(--danger); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-target { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warning); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-r-verdict { font-size: 0.84rem; font-weight: 600; min-width: 96px; text-align: right; }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row.kf-fail .kf-r-verdict { color: var(--danger); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-row.kf-selected .kf-r-verdict { color: var(--success); }
#js-tool-container-k-flex-insulation-thickness-calculator .kf-disclaimer { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 600px) {
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-grid { grid-template-columns: 1fr; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-grid .tbcalc-field:last-child { grid-column: auto; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-select { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-cross { width: 150px; height: 150px; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-select-body { width: 100%; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-mk { font-size: 0.7rem; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-row { grid-template-columns: 56px 1fr; grid-template-areas: "thick temp" "bar bar" "verdict verdict"; gap: 6px 10px; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-r-thick { grid-area: thick; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-r-temp { grid-area: temp; text-align: right; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-r-bar { grid-area: bar; }
  #js-tool-container-k-flex-insulation-thickness-calculator .kf-r-verdict { grid-area: verdict; text-align: left; min-width: 0; }
}