/* Repair or replace calculator. Loaded only on the three pages that carry it. */

.kor-section {
  background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 70%, #1d4e7d 100%);
  color: #fff; scroll-margin-top: 70px;
}
.kor-section h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.kor-section .lede { color: #d8e4ef; margin-bottom: 22px; }

.kor {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "controls gauge" "controls detail";
  grid-template-rows: auto 1fr;
  background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(4, 16, 28, .45);
}
.kor-controls { grid-area: controls; padding: 24px; border-right: 1px solid var(--line); }
.kor-gauge { grid-area: gauge; padding: 22px 26px 12px; text-align: center; }
.kor-detail { grid-area: detail; padding: 0 26px 22px; }

/* Controls */
.kor-seg { border: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.kor-seg legend { width: 100%; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.kor-seg label { flex: 1 1 0; cursor: pointer; min-width: 0; }
.kor-seg input { position: absolute; opacity: 0; }
.kor-seg span {
  display: block; text-align: center; padding: 10px 6px; font-weight: 700; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); white-space: nowrap;
}
.kor-seg-sm span { font-size: .9rem; padding: 8px 4px; font-weight: 600; }
.kor-seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.kor-seg input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.kor-slider { margin-bottom: 14px; transition: opacity .2s ease; }
.kor-slider.is-off { opacity: .4; }
.kor-slider label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; color: var(--navy); }
.kor-slider output { font-family: var(--font-display); font-size: 1.3rem; color: var(--orange-text); white-space: nowrap; }
.kor-slider input { width: 100%; height: 32px; accent-color: var(--orange); cursor: pointer; }
.kor-hint { font-size: .82rem; color: var(--muted); margin: 0; }
.kor-check { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: .94rem; margin: 0 0 16px; min-height: 28px; }
.kor-check input { width: 20px; height: 20px; flex: none; accent-color: var(--navy); }

/* Gauge */
.kor-gauge svg { width: 100%; max-width: 290px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.kor-arc { fill: none; stroke-width: 20; }
.kor-end { font-size: 11px; font-weight: 700; fill: var(--muted); }
.kor-needle {
  transform-origin: 120px 120px; transform: rotate(var(--kor-angle, -60deg));
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.kor-verdict {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 3vw, 1.8rem);
  line-height: 1.15; margin: 10px 0 2px; color: #1f7a48;
}
.kor[data-verdict="close"] .kor-verdict { color: #8f6200; }
.kor[data-verdict="replace"] .kor-verdict { color: #bd4310; }
.kor-math { font-size: .88rem; color: var(--muted); margin: 0; text-wrap: balance; }

/* Detail */
.kor-why { font-size: .95rem; margin: 8px 0 12px; text-wrap: pretty; }
.kor-compare { border-top: 1px solid var(--line); margin: 0 0 14px; }
.kor-compare > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kor-compare dt { font-family: var(--font-display); font-weight: 700; color: var(--orange-text); font-size: .95rem; }
.kor-compare dd { font-size: .9rem; line-height: 1.4; }
.kor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kor-actions[hidden], .kor-form[hidden] { display: none; }
.kor-actions .btn { flex: 1 1 170px; }
.kor-form h3 { margin: 0 0 2px; }
.kor-form-sub { font-size: .9rem; color: var(--muted); margin: 0 0 10px; }
.kor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kor-form .field { margin-bottom: 8px; }
.kor-form .field label { font-size: .86rem; margin-bottom: 4px; }
.kor-submit { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.kor-submit:disabled { opacity: .7; cursor: default; }
.kor-alt { text-align: center; font-size: .9rem; font-weight: 600; margin: 8px 0 0; }
.kor-form .form-legal { font-size: .72rem; line-height: 1.4; margin-top: 8px; }
.kor-done { background: #f0faf4; border-radius: 10px; padding: 14px 16px; }
.kor-done h3 { margin: 0 0 4px; }
.kor-done p { margin: 0; font-size: .92rem; color: var(--muted); }
.kor-fine { font-size: .8rem; color: var(--muted); margin: 12px 0 0; }

/* On a phone the gauge goes first, so it stays in view while the sliders move. */
@media (max-width: 820px) {
  .kor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gauge" "controls" "detail"; grid-template-rows: none; }
  .kor-gauge { position: sticky; top: var(--kor-top, 0); z-index: 2; background: #fff; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
  .kor-gauge svg { max-width: 190px; }
  .kor { overflow: visible; }
  .kor-gauge { border-radius: 18px 18px 0 0; }
  .kor-controls { padding: 16px 18px 4px; border-right: 0; }
  .kor-detail { padding: 0 18px 18px; }
}
@media (max-width: 420px) {
  .kor-fields { grid-template-columns: 1fr; gap: 0; }
}

/* The Salt Lake City note in the replacement page heroes was muted text and a navy
   link on navy, close to unreadable. */
.hero .note { color: #d8e4ef; }
.hero .note a { color: #fff; }

.kor-compare-text { font-size: .9rem; color: var(--ink); margin: 12px 0 0; }
.kor-sms { font-weight: 700; }
/* Text link only on phones. On a desktop the sentence would point at nothing. */
@media (hover: hover) and (pointer: fine) { .kor-compare-text { display: none; } }