/* Калькулятор «Клининг» (components/calc/CleaningCalc.tsx).
   Светлая мятная гамма, мягкие скругления, план квартиры как главный образ:
   выбранные комнаты «протираются» заливкой. Всё заперто под .cln. */

.cln {
  --cln-bg: #fbfdfc; --cln-soft: #e9f4f1; --cln-ink: #0f2b2a; --cln-mute: #5d7472;
  --cln-line: #d5e5e1; --cln-acc: #0e9c84; --cln-acc-d: #0b8571;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  min-height: 560px; background: var(--cln-bg); color: var(--cln-ink);
  font-family: var(--font-onest, system-ui, sans-serif);
}
.cln button { font-family: inherit; color: inherit; cursor: pointer; }

/* ── план и итог ── */
.cln-plan { display: flex; flex-direction: column; padding: 30px 30px 28px; background: var(--cln-soft); }
.cln-h { font: 500 1.2rem/1.2 var(--font-unbounded, var(--font-onest, sans-serif)); letter-spacing: -.01em; margin-bottom: 18px; }
.cln-svg { display: block; width: 100%; height: auto; }
.cln-svg text { font: 500 12px var(--font-onest, sans-serif); fill: var(--cln-ink); }
.cln-svg pattern line { stroke: #c9dcd7; stroke-width: 1.2; }
.cln-r-bg { fill: url(#cln-dust); stroke: var(--cln-ink); stroke-width: 1; }
.is-on > .cln-r-bg { fill: #fff; }
.is-off > .cln-r-bg { stroke: #a9c2bc; stroke-dasharray: 3 3; }
.cln-r-fill {
  transform-box: fill-box; transform-origin: left center;
  animation: cln-wipe .6s calc(var(--i) * .07s) cubic-bezier(.35, .6, .2, 1) both;
}
@keyframes cln-wipe { from { transform: scaleX(0); opacity: .3; } }
.cln-wall { fill: none; stroke: var(--cln-ink); stroke-width: 3; }
.cln-balc { fill: none; stroke: #a9c2bc; stroke-width: 1; stroke-dasharray: 3 3; transition: fill .3s; }
.cln-balc.is-on { fill: #fff; stroke: var(--cln-ink); stroke-dasharray: none; }
.cln-win { fill: #fff; stroke: var(--cln-ink); stroke-width: 1; transition: fill .3s; }
.cln-win.is-on { fill: var(--cln-acc); stroke: var(--cln-acc-d); }
.cln-app rect, .cln-app circle, .cln-app line { fill: none; stroke: #9fb6b1; stroke-width: 1; transition: stroke .3s; }
.cln-app.is-on rect:first-child { fill: #fff; }
.cln-app.is-on rect, .cln-app.is-on circle, .cln-app.is-on line { stroke: var(--cln-acc-d); stroke-width: 1.5; }

.cln-res { margin-top: auto; padding-top: 20px; }
.cln-crew { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.cln-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .86rem; color: var(--cln-mute); }
.cln-line b { font-weight: 500; color: var(--cln-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cln-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px solid #c7dbd6; }
.cln-total > span { font-size: .9rem; color: var(--cln-mute); }
.cln-total b { font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; animation: cln-in .35s ease-out; }
.cln-total small { font-size: .95rem; font-weight: 500; color: var(--cln-mute); letter-spacing: 0; }
@keyframes cln-in { from { opacity: .35; } }
.cln-btn {
  width: 100%; margin-top: 14px; padding: 16px; border: 0; border-radius: 12px;
  background: var(--cln-acc); color: #fff !important; font-size: 1rem; font-weight: 600; transition: background .15s;
}
.cln-btn:hover { background: var(--cln-acc-d); }

/* ── параметры ── */
.cln-form { padding: 30px 30px 26px; }
.cln-label { font-size: .84rem; color: var(--cln-mute); margin-bottom: 8px; }
.cln-label-ex { margin: 16px 0 0; padding-bottom: 6px; }
.cln-seg {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4px; border-radius: 12px; background: var(--cln-soft);
}
.cln-seg > i {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--cln-line);
  transform: translateX(calc(var(--x) * 100%)); transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}
.cln-seg button {
  position: relative; min-height: 42px; padding: 6px 4px; border: 0; background: none; border-radius: 9px;
  font-size: .8rem; font-weight: 500; color: var(--cln-mute) !important; transition: color .2s;
}
.cln-seg button[aria-checked="true"] { color: var(--cln-ink) !important; }
.cln-note { margin: 8px 0 12px; font-size: .8rem; line-height: 1.4; color: var(--cln-mute); }

.cln-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--cln-line); }
.cln-row > span { font-size: .95rem; }
.cln-row small { display: block; font-size: .75rem; color: var(--cln-mute); }
.cln-step { display: flex; align-items: center; }
.cln-step button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cln-line); background: #fff;
  font-size: 1.15rem; line-height: 1; transition: border-color .15s, background .15s;
}
.cln-step button:hover:not(:disabled) { border-color: var(--cln-acc); }
.cln-step button:disabled { opacity: .35; cursor: default; }
.cln-step output { width: 38px; text-align: center; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.cln-sw {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 14px;
  width: 100%; min-height: 42px; padding: 4px 0; border: 0; border-top: 1px solid var(--cln-line); background: none; text-align: left;
}
.cln-sw span { font-size: .92rem; }
.cln-sw em { font-style: normal; font-size: .84rem; color: var(--cln-mute); font-variant-numeric: tabular-nums; }
.cln-sw i { position: relative; width: 40px; height: 24px; border-radius: 12px; background: #d6e3e0; transition: background .2s; }
.cln-sw i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform .2s cubic-bezier(.3, .7, .2, 1);
}
.cln-sw[aria-checked="true"] i { background: var(--cln-acc); }
.cln-sw[aria-checked="true"] i::after { transform: translateX(16px); }
.cln-sw[aria-checked="true"] em { color: var(--cln-ink); }
.cln-sw:last-child { margin-top: 10px; border-top: 1px solid var(--cln-ink); }

.cln button:focus-visible { outline: 2px solid var(--cln-acc-d); outline-offset: 2px; }

@media (max-width: 720px) {
  .cln { grid-template-columns: 1fr; min-height: 0; }
  .cln-plan { display: contents; }
  .cln-h { order: 0; padding: 22px 16px 0; margin: 0; background: var(--cln-soft); }
  .cln-svg { order: 1; width: 100%; padding: 14px 16px 18px; box-sizing: border-box; background: var(--cln-soft); }
  .cln-form { order: 2; padding: 20px 16px 8px; }
  .cln-res { order: 3; margin: 0; padding: 16px 16px 20px; }
  /* на телефоне три типа — столбиком, подложка ездит по вертикали */
  .cln-seg { grid-template-columns: 1fr; }
  .cln-seg > i { width: auto; right: 4px; height: calc((100% - 8px) / 3); bottom: auto; transform: translateY(calc(var(--x) * 100%)); }
  .cln-seg button { font-size: .9rem; text-align: left; padding: 6px 14px; }
  .cln-total b { font-size: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cln-r-fill, .cln-total b { animation: none; }
  .cln-seg > i, .cln-sw i, .cln-sw i::after, .cln-win, .cln-balc { transition: none; }
}