/* Калькулятор «Заборы» (components/calc/FenceCalc.tsx).
   Участок за городом: сверху — вид забора сбоку на полосе грунта с размерными
   линиями, как на эскизе замерщика; ниже — параметры и смета. Всё под .fnc. */

.fnc {
  --fnc-sky: #e3e8dc; --fnc-paper: #f6f7f2; --fnc-ink: #16231a; --fnc-mute: #5c695e;
  --fnc-line: #cdd5c5; --fnc-forest: #234530; --fnc-soil: #3b3229; --fnc-grass: #6a8a3c;
  --fnc-zinc: #858b90; --fnc-concrete: #b9b5aa;
  min-height: 560px; background: var(--fnc-paper); color: var(--fnc-ink);
  font-family: var(--font-onest, system-ui, sans-serif);
}

/* ── эскиз забора ── */
.fnc-view { background: var(--fnc-sky); border-bottom: 1px solid var(--fnc-line); }
.fnc-view svg { display: block; width: 100%; height: auto; }
.fnc-soil { fill: var(--fnc-soil); }
.fnc-grass { stroke: var(--fnc-grass); stroke-width: 4; }
.fnc-foot { fill: var(--fnc-concrete); stroke: #8f8a7e; stroke-width: 1; }
.fnc-post rect { fill: var(--fnc-zinc); }
.fnc-post rect + rect { fill: #5d6266; }
.fnc-frame { fill: rgba(0, 0, 0, .14); stroke: #1c2022; stroke-width: 3.5; }
.fnc-tag { fill: #d6cdbd; text-anchor: middle; font-family: var(--font-onest, system-ui, sans-serif); }
.fnc-gap path { fill: none; stroke: var(--fnc-mute); stroke-width: 1.5; }
.fnc-gap text { fill: #d6cdbd; text-anchor: middle; }
.fnc-dim path { fill: none; stroke: var(--fnc-forest); stroke-width: 1.25; }
.fnc-dim-bg { fill: var(--fnc-sky); }
.fnc-dim text {
  fill: var(--fnc-forest); text-anchor: middle; font-weight: 600;
  font-family: var(--font-onest, system-ui, sans-serif); font-variant-numeric: tabular-nums;
}
.fnc-paint { transition: fill .35s; }
.fnc-paint-s { transition: stroke .35s; }
/* секции «вырастают» из земли — новые при удлинении, все при смене материала/высоты */
.fnc-grow {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: fnc-grow .5s calc(var(--i) * 35ms) cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fnc-grow { from { transform: scaleY(0); opacity: 0; } }

/* ── параметры и смета ── */
.fnc-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.fnc-form { padding: 26px 30px 26px; border-right: 1px solid var(--fnc-line); display: flex; flex-direction: column; }
.fnc-kit { margin: auto 0 0; padding-top: 18px; font-size: .76rem; line-height: 1.5; color: var(--fnc-mute); }
.fnc-h {
  margin: 0 0 18px; font: 700 1.2rem/1.2 var(--font-unbounded, system-ui, sans-serif);
  letter-spacing: -.01em; color: var(--fnc-forest);
}
.fnc-lbl { display: block; font-size: .8rem; color: var(--fnc-mute); margin-bottom: 8px; }
.fnc-field { margin-top: 18px; }

.fnc-len { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.fnc-len b {
  grid-row: 1 / 3; grid-column: 2; font: 700 1.9rem/1 var(--font-unbounded, system-ui, sans-serif);
  font-variant-numeric: tabular-nums; color: var(--fnc-forest); align-self: center;
}
.fnc-len b small { font: 500 .9rem var(--font-onest, system-ui, sans-serif); }
.fnc-len input { grid-column: 1 / -1; width: 100%; height: 40px; margin: 4px 0 0; accent-color: var(--fnc-forest); cursor: pointer; }
.fnc-len-sub { grid-column: 1 / -1; font-size: .78rem; color: var(--fnc-mute); font-variant-numeric: tabular-nums; }

.fnc-mat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--fnc-line); }
.fnc-mat button {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 10px 10px 11px; background: none; border: 0; border-left: 1px solid var(--fnc-line);
  font-family: inherit; color: var(--fnc-ink); cursor: pointer; transition: background .15s;
}
.fnc-mat button:first-child { border-left: 0; }
.fnc-mat svg { width: 100%; height: 22px; color: #7b847c; margin-bottom: 5px; transition: color .15s; }
.fnc-mat b { font-size: .88rem; font-weight: 600; }
.fnc-mat span { font-size: .74rem; color: var(--fnc-mute); font-variant-numeric: tabular-nums; }
.fnc-mat button:hover { background: #ecefe7; }
.fnc-mat button[aria-checked="true"] { background: var(--fnc-forest); color: #fff; }
.fnc-mat button[aria-checked="true"] svg { color: #a9c48a; }
.fnc-mat button[aria-checked="true"] span { color: #c4d3c3; }

.fnc-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.fnc-seg { display: flex; border: 1px solid var(--fnc-line); }
.fnc-seg button {
  flex: 1; min-height: 42px; padding: 0 6px; background: none; border: 0; border-left: 1px solid var(--fnc-line);
  font: 500 .88rem/1 var(--font-onest, system-ui, sans-serif); color: var(--fnc-ink); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .15s;
}
.fnc-seg button:first-child { border-left: 0; }
.fnc-seg button:hover { background: #ecefe7; }
.fnc-seg button[aria-checked="true"] { background: var(--fnc-forest); color: #fff; }
.fnc-ral button { display: grid; place-items: center; }
.fnc-ral i { display: block; width: 22px; height: 22px; outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -1px; }
.fnc-ral button[aria-checked="true"] { background: #dfe5d8; }
.fnc-ral button[aria-checked="true"] i { outline: 2px solid var(--fnc-ink); outline-offset: 3px; }

.fnc-sum { padding: 22px 28px 26px; display: flex; flex-direction: column; }
.fnc-opts { border-top: 1px solid var(--fnc-line); }
.fnc-opts button {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0; background: none; border: 0; border-bottom: 1px solid var(--fnc-line);
  font: 500 .9rem/1.2 var(--font-onest, system-ui, sans-serif); color: var(--fnc-ink); cursor: pointer; text-align: left;
}
.fnc-opts i {
  flex: none; position: relative; width: 38px; height: 22px; background: #c5cdbf; transition: background .2s;
}
.fnc-opts i::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.fnc-opts button[aria-checked="true"] i { background: var(--fnc-forest); }
.fnc-opts button[aria-checked="true"] i::after { transform: translateX(16px); }

.fnc-est { margin-top: 16px; flex: 1; display: flex; flex-direction: column; }
.fnc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: .86rem; }
.fnc-row small { display: block; font-size: .74rem; color: var(--fnc-mute); font-variant-numeric: tabular-nums; }
.fnc-row b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fnc-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: auto; padding-top: 12px; border-top: 2px solid var(--fnc-ink);
}
.fnc-row:last-of-type { margin-bottom: 10px; }
.fnc-total span { font-size: .9rem; }
.fnc-total b {
  font: 700 1.65rem/1 var(--font-unbounded, system-ui, sans-serif); font-variant-numeric: tabular-nums;
  color: var(--fnc-forest); white-space: nowrap;
}
.fnc-total small { font: 500 .85rem var(--font-onest, system-ui, sans-serif); }

.fnc-btn {
  margin-top: 18px; min-height: 52px; padding: 0 18px; background: var(--fnc-forest); color: #fff; border: 0; cursor: pointer;
  font: 600 .98rem/1 var(--font-onest, system-ui, sans-serif); transition: background .15s;
}
.fnc-btn:hover { background: #1a3524; }
.fnc-note { margin: 10px 0 0; font-size: .76rem; line-height: 1.45; color: var(--fnc-mute); }

.fnc button:focus-visible, .fnc-len input:focus-visible { outline: 2px solid #3b7bd6; outline-offset: 2px; }

@media (max-width: 720px) {
  .fnc { min-height: 0; }
  .fnc-body { grid-template-columns: 1fr; }
  .fnc-form { padding: 20px 18px 22px; border-right: 0; border-bottom: 1px solid var(--fnc-line); }
  .fnc-sum { padding: 18px 18px 22px; }
  .fnc-pair { grid-template-columns: 1fr; gap: 0; }
  .fnc-mat button { padding: 9px 7px 10px; }
  .fnc-mat b { font-size: .76rem; }
  .fnc-kit { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fnc-grow { animation: none; }
  .fnc-paint, .fnc-paint-s, .fnc-opts i, .fnc-opts i::after { transition: none; }
}