/* Калькулятор «Натяжные потолки» (components/calc/CeilingCalc.tsx).
   Светлый холодный план комнаты: тонкие линии, много воздуха, единственное
   тёплое пятно — свет светильников. Всё заперто под .clg. */

.clg {
  --clg-ink: #1d2830; --clg-mute: #6a7a86; --clg-line: #dbe3e9; --clg-paper: #fbfcfd;
  --clg-ice: #eef3f6; --clg-acc: #2a78b6;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  grid-template-areas: "form plan" "form sum"; grid-template-rows: 1fr auto;
  min-height: 560px; background: var(--clg-ice); color: var(--clg-ink);
  font-family: var(--font-onest, system-ui, sans-serif);
}
.clg button, .clg input, .clg output { font-family: inherit; color: inherit; }

/* ── параметры ── */
.clg-form { grid-area: form; padding: 32px 30px 28px; background: var(--clg-paper); border-right: 1px solid var(--clg-line); }
.clg-h { margin: 0; font-size: 1.4rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.2; }
.clg-sub { margin: 6px 0 18px; font-size: .86rem; line-height: 1.45; color: var(--clg-mute); }
.clg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 6px 0; border-top: 1px solid var(--clg-line); font-size: .92rem;
}
.clg-row--area { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; padding: 12px 0 8px; }
.clg-row--area b { font-weight: 500; font-variant-numeric: tabular-nums; }
.clg-row--area input { grid-column: 1 / -1; }

/* ползунок: волосяная линия, заполненная часть — акцентом */
.clg input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: none; cursor: pointer;
}
.clg input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(var(--clg-acc) 0 0) 0 / var(--p) 100% no-repeat, var(--clg-line);
}
.clg input[type="range"]::-moz-range-track { height: 2px; background: var(--clg-line); }
.clg input[type="range"]::-moz-range-progress { height: 2px; background: var(--clg-acc); }
.clg input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--clg-acc);
}
.clg input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--clg-acc); }

.clg-step { display: flex; align-items: center; border: 1px solid var(--clg-line); border-radius: 22px; background: #fff; }
.clg-step button {
  width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--clg-acc); transition: background .15s;
}
.clg-step button:hover:not(:disabled) { background: var(--clg-ice); }
.clg-step button:disabled { color: #b9c5ce; cursor: default; }
.clg-step output { min-width: 52px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.clg-step small { font-size: .8em; font-weight: 400; color: var(--clg-mute); }

.clg-row--fin { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0; }
.clg-fin { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--clg-line); background: #fff; }
.clg-fin button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px 9px;
  background: none; border: 0; border-left: 1px solid var(--clg-line); cursor: pointer; text-align: left; font-size: .86rem;
  transition: background .15s;
}
.clg-fin button:first-child { border-left: 0; }
.clg-fin button:hover { background: #f6f9fb; }
.clg-fin small { font-size: .74rem; color: var(--clg-mute); font-variant-numeric: tabular-nums; }
/* образец полотна: блик тем сильнее, чем глянцевее */
.clg-fin i { display: block; width: 100%; height: 22px; margin-bottom: 6px; background: #e3eaef; }
.clg-fin .is-sat i { background: linear-gradient(115deg, #f4f8fa 10%, #d6e1e9 55%, #eaf0f4); }
.clg-fin .is-gl i { background: linear-gradient(115deg, #fff 18%, #c3d4e0 40%, #fff 46%, #b9ccda 70%, #eef4f8); }
.clg-fin button[aria-checked="true"] { background: var(--clg-ice); box-shadow: inset 0 -2px 0 var(--clg-acc); }

.clg-check { cursor: pointer; }
.clg-check small { display: block; font-size: .76rem; color: var(--clg-mute); margin-top: 2px; }
.clg-check input { flex: none; width: 20px; height: 20px; accent-color: var(--clg-acc); cursor: pointer; }

/* ── план ── */
.clg-plan {
  grid-area: plan; display: flex; flex-direction: column; padding: 22px 26px 6px;
  background: radial-gradient(circle, #d3dde4 1px, transparent 1.2px) 0 0 / 22px 22px;
}
.clg-plan svg { display: block; width: 100%; max-width: 560px; height: auto; margin: auto; overflow: visible; }
.clg-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.clg-area {
  font-size: 2.5rem; font-weight: 400; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--clg-ink);
}
.clg-area small { font-size: .42em; letter-spacing: 0; color: var(--clg-mute); }
.clg-legend {
  display: grid; grid-template-columns: auto auto; gap: 4px 16px; margin: 4px 0 0; padding: 0; list-style: none;
  font-size: .76rem; color: var(--clg-mute);
}
.clg-legend li { display: flex; align-items: center; gap: 7px; }
.clg-legend i { flex: none; display: block; width: 14px; height: 8px; }
.clg-legend .is-lamp { width: 8px; margin: 0 3px; border-radius: 50%; background: #fffdf6; border: 1px solid #c8a14e; box-shadow: 0 0 0 3px rgba(255, 217, 140, .55); }
.clg-legend .is-pipe { width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; border: 1px dashed var(--clg-acc); background: radial-gradient(#8a9aa6 2px, transparent 2.5px); }
.clg-legend .is-niche { height: 0; border-top: 1.5px dashed var(--clg-acc); }
.clg-legend .is-win { height: 6px; background: #fff; border: 1px solid #34434e; }
.clg-wall { fill: none; stroke: #cbd6de; stroke-width: 8; stroke-linejoin: miter; }
.clg-ceil { stroke: #34434e; stroke-width: 1.2; stroke-linejoin: miter; transition: fill .3s; }
.clg-sheen { fill: #fff; opacity: .35; animation: clg-sweep 1s cubic-bezier(.2,.7,.2,1) both; }
.is-gl .clg-sheen { opacity: .8; }
@keyframes clg-sweep { from { transform: translateX(-160px); opacity: 0; } }
.clg-dim path { stroke: #9fb0bc; stroke-width: 1; fill: none; }
.clg-dim text {
  fill: var(--clg-mute); font-size: 13px; text-anchor: middle; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
.clg-win { fill: #fff; stroke: #34434e; stroke-width: 1; }
.clg-niche { stroke: var(--clg-acc); stroke-width: 1.4; stroke-dasharray: 5 4; }
.clg-pipe circle:first-child { fill: none; stroke: var(--clg-acc); stroke-width: 1; stroke-dasharray: 2 2; }
.clg-pipe circle:last-child { fill: #8a9aa6; }
.clg-corner { fill: #fff; stroke: #34434e; stroke-width: 1; }
.clg-lamp { transform-box: fill-box; transform-origin: center; animation: clg-lamp .4s cubic-bezier(.3,1.4,.5,1) both; }
.clg-lamp circle:last-child { fill: #fffdf6; stroke: #c8a14e; stroke-width: 1; }
@keyframes clg-lamp { from { transform: scale(0); opacity: 0; } }

/* ── итог ── */
.clg-sum { grid-area: sum; padding: 4px 26px 26px; }
.clg-sum dl { margin: 0 0 6px; font-size: .84rem; }
.clg-sum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #dde5eb; }
.clg-sum dt small { margin-left: 8px; color: var(--clg-mute); font-variant-numeric: tabular-nums; }
.clg-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.clg-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0 16px; border-top: 1px solid var(--clg-ink);
}
.clg-total > span { font-size: .9rem; }
.clg-total b { font-size: 2.1rem; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clg-total b small { font-size: .45em; font-weight: 400; letter-spacing: 0; color: var(--clg-mute); }
.clg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clg-btn {
  width: 100%; min-height: 50px; padding: 14px 18px; border: 0; border-radius: 26px; cursor: pointer;
  background: var(--clg-acc); color: #fff !important; font-size: .95rem; font-weight: 600; transition: background .15s;
}
.clg-btn:hover { background: #20669d; }
.clg button:focus-visible, .clg input:focus-visible {
  outline: 2px solid var(--clg-acc); outline-offset: 2px;
}

@media (max-width: 720px) {
  .clg { grid-template-columns: 1fr; grid-template-areas: "plan" "form" "sum"; grid-template-rows: none; min-height: 0; }
  .clg-plan { padding: 18px 14px 10px; }
  .clg-plan svg { margin-top: 8px; }
  .clg-area { font-size: 2.1rem; }
  .clg-legend { gap: 4px 12px; }
  .clg-form { padding: 20px 18px; border-right: 0; border-block: 1px solid var(--clg-line); }
  .clg-sum { padding: 14px 18px 20px; }
  .clg-fin button { padding: 8px 8px 9px; font-size: .8rem; }
  .clg-total b { font-size: 1.8rem; }
  .clg-dim text { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .clg-sheen, .clg-lamp { animation: none; }
  .clg-ceil { transition: none; }
}