/* ---------- planer metrów: wieczór za oknem ---------- */
.ciemne { color: #f4e8d4; }
.planer-panel { position: relative; display: grid; grid-template-columns: 0.9fr 1.3fr; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--cien);
  background: radial-gradient(70% 90% at 80% 100%, color-mix(in srgb, var(--swiatlo) 18%, transparent), transparent 70%),
    linear-gradient(90deg, rgb(23 16 12 / 94%) 30%, rgb(23 16 12 / 72%)),
    var(--noc) url("../zima/planer-dach.webp") center 30% / cover;
  transition: background var(--ruch-wolny); }
.planer-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 22px; background: url("../wycinanka/pas.svg") center / 96px 28px repeat-x; opacity: 0.55; filter: brightness(1.4); }
.planer-panel__tekst { padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); display: grid; gap: 20px; align-content: start; }
.planer-panel h2 { font-size: var(--t-h2); color: #fbf1e0; }
.planer-panel h2 em { color: var(--miod); }
.planer-panel .lead { color: #d6c4ab; }
.etykieta--jasna { color: #d6c4ab; }
.etykieta--jasna svg { color: var(--miod); }
.bez-ramki { border: 0; margin: 0; padding: 0; }
.planer-panel__praca { padding: clamp(28px, 4vw, 56px); border-left: 1px solid rgb(255 255 255 / 9%); display: grid; gap: 24px; align-content: center; }
.suwak { display: grid; gap: 10px; }
.suwak label { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-s); color: #d6c4ab; }
.suwak label b { font: 400 2.6rem/1 var(--f-glowny); color: #fbf1e0; }
.suwak input[type="range"] { width: 100%; height: 32px; accent-color: var(--miod); }
.planer-tekst { fill: #cbb89d; font: 500 22px var(--f-tekst); }
.planer__wynik { display: grid; gap: 6px; padding-top: 18px; border-top: 1px dashed rgb(255 255 255 / 18%); }
.planer__sklad { font-size: var(--t-l); }
.planer__suma { display: flex; justify-content: space-between; align-items: baseline; }
.planer__suma span { color: #d6c4ab; }
.planer__suma b { font: 400 2.1rem var(--f-glowny); color: #fbf1e0; }
.planer__uwaga { font-size: var(--t-xs); color: var(--miod); }
.planer__akcje { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.link-strzalka--jasny { color: #f4e8d4; border-color: var(--miod); }
@media (max-width: 899px) {
  .planer-panel { grid-template-columns: 1fr; border-radius: var(--r-m); margin-inline: -4px; }
  .planer-panel__praca { border-left: 0; border-top: 1px solid rgb(255 255 255 / 9%); }
  .planer-tekst { font-size: 30px; }
  .planer__akcje .btn { width: 100%; }
}