/* =====================================================================
   Audiofill — калькулятор
   ===================================================================== */

.calc { padding-top: var(--sp-7); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-7); align-items: start; }
.calc__side { position: sticky; top: 96px; scroll-margin-top: 96px; }

/* ---------- Вкладки напрямів ---------- */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--line); }
.tab { height: 52px; padding: 0 var(--sp-3); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; color: var(--text-secondary); transition: background-color var(--t-base), color var(--t-base), transform var(--t-base) var(--ease-spring); }
.tab:hover { color: var(--text-main); }
.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] { background: var(--paper-100); color: var(--teal-900); }

/* ---------- Кроки форми ---------- */
.calc__panel { padding-top: var(--sp-6); }
.calc__group + .calc__group { margin-top: var(--sp-7); }
.calc__label { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--sp-4); }
.calc__label .num { color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; }
.calc__hint { font-size: var(--fs-small); font-weight: 500; margin: var(--sp-5) 0 var(--sp-2); }
.calc__intro { color: var(--text-secondary); max-width: 40em; margin-bottom: var(--sp-5); }
.calc__group .link { margin-top: var(--sp-4); font-size: var(--fs-small); }
.calc__group .tile b { display: flex; align-items: center; gap: var(--sp-2); }
.calc__group .tile b > span[data-i18n] { font-size: inherit; color: inherit; }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chip b { font-weight: 600; color: var(--action); }
.chip[aria-pressed="true"] b { color: var(--teal-900); }

.select--block { display: block; }
.select--block select { width: 100%; height: 52px; padding-left: 16px; border-radius: var(--r-md); font-size: 16px; }
.calc__voice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-secondary); }

.calc__measure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); align-items: start; }
.calc__measure .stats { gap: var(--sp-5); min-height: 100%; }
.calc__measure input[readonly] { border-style: dashed; color: var(--text-secondary); background: transparent; }

/* ---------- Підсумок начитки ---------- */
.calc__result { margin-top: var(--sp-7); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-tint); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.calc__breakdown { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
#c-price { display: block; font: 600 var(--fs-price)/1 var(--font-display); color: var(--action); font-variant-numeric: tabular-nums; }
.calc__result .btn.is-done i::before { content: "\f00c"; }
.calc__also { padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.calc__sub { font-size: var(--fs-caption); font-family: var(--font-text); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-3); }
.calc__fail { color: var(--danger); margin-bottom: var(--sp-5); }

/* ---------- Кошторис ---------- */
.est { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.est__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.est__head h2 { font-size: var(--fs-h3); font-weight: 600; }
.est__head span { font-size: 13px; color: var(--text-muted); }
.est__empty { color: var(--text-secondary); font-size: var(--fs-small); padding: var(--sp-4) 0 var(--sp-2); }
.est__list { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; scrollbar-width: thin; }
.est__item { position: relative; padding: var(--sp-4) 36px var(--sp-4) 0; border-top: 1px solid var(--line); animation: est-in var(--t-base) var(--ease-out); }
@keyframes est-in { from { opacity: 0; transform: translateY(6px); } }
.est__info strong { display: block; font-weight: 600; font-size: var(--fs-small); line-height: 1.35; }
.est__info span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.est__x { position: absolute; right: -6px; top: 10px; width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted); transition: background-color var(--t-fast), color var(--t-fast); }
.est__x:hover { background: rgba(255, 84, 112, 0.14); color: var(--danger); }
.est__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.est__calc { font-size: 13px; color: var(--text-secondary); }
.est__sum { font: 600 16px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty--sm { animation: none; }
.qty--sm button { width: 28px; height: 28px; font-size: 11px; }
.qty--sm b { min-width: 26px; font-size: 14px; }
.est__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--line-strong); }
.est__total span { color: var(--text-secondary); }
.est__total b { font: 600 var(--fs-h2)/1 var(--font-display); color: var(--action); font-variant-numeric: tabular-nums; }
.est__foot .btn { width: 100%; margin-top: var(--sp-2); }
.est__foot .btn--quiet { margin-top: var(--sp-3); font-size: var(--fs-small); }
@media (prefers-reduced-motion: reduce) { .est__item { animation: none; } }

/* Доповнення до документа */
.invoice__line p + p { margin-top: 2px; }
.invoice__line strong { font-weight: 600; }
.invoice__note { color: var(--doc-muted); font-size: 12px; margin-top: var(--sp-4); }
.invoice__foot { color: var(--doc-muted); font-size: 12px; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--doc-line); }
.invoice.is-printing .stage::after { display: none; }
/* Бібліотека PDF не знає про цифри однакової ширини — у копії для друку їх вимкнено,
   інакше суми стають нерівно */
.invoice.is-printing, .invoice.is-printing * { font-variant-numeric: normal !important; }
.invoice.is-printing .invoice__head img { height: 54px; width: auto; }

@media (max-width: 1024px) {
  .calc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .calc__side { position: static; }
  .est__list { max-height: none; }
}
@media (max-width: 640px) {
  .tab { flex-direction: column; gap: 4px; height: 62px; font-size: 12px; padding: 0 4px; }
  .tab i { font-size: 16px; }
  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__measure { grid-template-columns: minmax(0, 1fr); }
  .calc__result .btn { width: 100%; }
  .modal { padding: 0; }
  .modal__box { max-height: 100%; height: 100%; border-radius: 0; }
  .modal__bar .btn { flex: 1; }
  .modal__status { flex-basis: 100%; }
}

/* На широкому екрані кошторис і так видно праворуч — плаваюча панель суми зайва */
@media (min-width: 1025px) {
  html[data-page="calculator"] .sumbar--float { display: none; }
  html[data-page="calculator"].has-sumbar .footer { padding-bottom: var(--sp-6); }
  html[data-page="calculator"].has-sumbar .dock { bottom: max(16px, env(safe-area-inset-bottom)); }
}