/* Rekenhulp watertemperatuur (docs/features/winkelpaginas.md). Maten en vormen volgens de
 * backoffice UI-kit (docs/reference/BACKOFFICE_UI_KIT.md: velden 44px/8px, labels 13px,
 * hints 12px, kaart 10px/20px, primary-knop, stat tile); kleuren uit de thema-tokens. */
.rh { --rh-ui: var(--thema-font-text, system-ui, sans-serif); }
.rh__eyebrow { display: block; font: 600 11px var(--rh-ui); letter-spacing: .8px; text-transform: uppercase; color: var(--thema-ink-soft); }

.rh__kaart { background: var(--thema-surface); border: 1px solid var(--thema-line); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(58, 50, 38, .04); margin: 16px 0 32px; display: grid; gap: 16px; min-width: 0; }
.rh__kaart > * { min-width: 0; }
.rh__velden { display: grid; gap: 12px 16px; }
.rh__velden > * { min-width: 0; }
@media (min-width: 720px) { .rh__velden { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rh__meer .rh__velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rh__label { display: block; font: 500 13px var(--rh-ui); color: var(--thema-ink); margin-bottom: 6px; }
.rh__hint { display: block; font: 400 12px var(--rh-ui); color: var(--thema-ink-soft); margin-top: 4px; }

.rh__invoer { display: flex; align-items: stretch; min-height: 44px; background: var(--thema-canvas); border: 1px solid var(--thema-line); border-radius: 8px; overflow: hidden; transition: border-color 150ms, box-shadow 150ms; }
.rh__invoer:focus-within { border-color: var(--thema-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--thema-primary) 10%, transparent); }
.rh__invoer input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: 10px 12px; font: 400 14px var(--rh-ui); color: var(--thema-ink); font-variant-numeric: tabular-nums; }
.rh__invoer input:focus { outline: none; }
.rh__invoer span { display: flex; align-items: center; padding: 0 12px; font: 500 13px var(--rh-ui); color: var(--thema-ink-soft); background: var(--thema-surface); border-left: 1px solid var(--thema-line); }
.rh__invoer--klein { max-width: 140px; }

.rh__scheiding { border: 0; border-top: 1px solid var(--thema-line); margin: 0; }
.rh__meer summary { cursor: pointer; font: 500 13px var(--rh-ui); color: var(--thema-ink); min-height: 32px; display: flex; align-items: center; gap: 6px; }
.rh__meer[open] summary { margin-bottom: 12px; }
.rh__kneden { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.rh__kneden legend { display: block; width: 100%; padding: 0; font: 500 13px var(--rh-ui); color: var(--thema-ink); margin-bottom: 6px; }
.rh__radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 400 14px var(--rh-ui); color: var(--thema-ink); cursor: pointer; }
.rh__radio input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--thema-line); border-radius: 50%; display: grid; place-items: center; background: var(--thema-canvas); cursor: pointer; }
.rh__radio input:hover { border-color: var(--thema-primary); }
.rh__radio input:checked { border-color: var(--thema-primary); }
.rh__radio input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--thema-primary); }
.rh__radio input:focus-visible { outline: 2px solid var(--thema-primary); outline-offset: 2px; }
.rh__radio small { font-size: 12px; color: var(--thema-ink-soft); }

.rh__knop { justify-self: start; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--thema-primary); color: var(--thema-on-primary); font: 600 14px var(--rh-ui); cursor: pointer; transition: opacity 150ms, transform 150ms; }
.rh__knop:hover { opacity: .9; }
.rh__knop:active { transform: scale(.97); }

/* Uitkomst als stat tile (UI-kit 15e). */
.rh__tegel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 118px; padding: 18px 20px 16px; border-radius: 10px; background: var(--thema-primary-deep); color: var(--thema-on-dark); }
.rh__tegel::after { content: "\1F4A7"; position: absolute; right: -4px; bottom: -10px; font-size: 80px; line-height: 1; opacity: .13; pointer-events: none; }
.rh__tegel-label { font: 600 11px var(--rh-ui); letter-spacing: .8px; text-transform: uppercase; opacity: .75; }
.rh__getal { position: relative; z-index: 1; font: 700 44px/1 var(--thema-font-display); font-variant-numeric: tabular-nums; color: var(--thema-on-dark); }
.rh__tegel-sub { position: relative; z-index: 1; margin: 0; font: 400 13px var(--rh-ui); color: var(--thema-on-dark-soft); max-width: 46ch; }
.rh__tegel-sub strong { color: var(--thema-on-dark); font-weight: 600; }
.rh__tegel--leeg { background: var(--thema-canvas); color: var(--thema-ink); border: 1px solid var(--thema-line); }
.rh__tegel--leeg::after { opacity: .06; }
.rh__tegel--leeg .rh__tegel-label { color: var(--thema-ink-soft); opacity: 1; }
.rh__tegel--leeg .rh__getal { color: var(--thema-ink-soft); }
.rh__tegel--leeg .rh__tegel-sub { color: var(--thema-ink-soft); }

.rh__meldingen { display: grid; gap: 8px; }
.rh__meldingen:empty { display: none; }
.rh__melding { margin: 0; padding: 10px 12px; border: 1px solid var(--thema-line); border-left: 3px solid var(--thema-danger); border-radius: 8px; background: var(--thema-canvas); font: 500 13px var(--rh-ui); color: var(--thema-ink); }

.rh__uitleg { max-width: 62ch; }
.rh__formule { display: block; margin: 0 0 12px; padding: 12px 16px; background: var(--thema-surface); border: 1px solid var(--thema-line); border-radius: 8px; font: 600 15px var(--rh-ui); color: var(--thema-ink); font-variant-numeric: tabular-nums; overflow-x: auto; white-space: nowrap; }
.rh__voorbeelden { max-width: 22rem; font-variant-numeric: tabular-nums; }
.rh__bron { font: 400 12px var(--rh-ui); color: var(--thema-ink-soft); margin-top: 32px; }
.rh__meer summary { list-style: none; }
.rh__meer summary::-webkit-details-marker { display: none; }
.rh__meer summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--thema-ink-soft); border-bottom: 2px solid var(--thema-ink-soft); transform: rotate(-45deg); transition: transform 150ms; margin-right: 4px; }
.rh__meer[open] summary::before { transform: rotate(45deg); }