/* ============================================================
   tools.css — общий каркас 12 сервисов-инструментов (Stage 5, Task 5):
   diaper-size, diaper-test, diaper-calculator, price-calculator,
   baby-budget, hospital-bag, hospital-diapers, change-tracker,
   sleep-tracker, feeding-tracker, diaper-compare, diaper-subscription.

   Токены/база — design-system.css (.card/.chip/.btn/.pill-input).
   Один файл на все 12 страниц (а не по одному на страницу) — каркас
   (hero-заголовок → карточка-калькулятор → результат → SEO-текст)
   у всех страниц один и тот же, различается только состав контролов.
   Префикс классов — .tl- (tools).

   Inline-JS каждой страницы перенесён из v2 как есть (расчёты/трекеры/
   localStorage не переписаны) — здесь только презентационные классы,
   которые эти скрипты переключают через classList: .d-none — единственная
   служебная утилита, использованная всеми 12 скриптами для показа/скрытия
   результата, поэтому объявлена как обычный CSS-класс (см. низ файла).
   ============================================================ */

.tl-page { padding-top: 20px; padding-bottom: 48px; }

/* ---- hero-заголовок ---- */
.tl-head { margin-bottom: 24px; max-width: 720px; }
.tl-head__title { font-size: 32px; font-weight: 900; line-height: 1.15; }
.tl-head__text { font-size: 14px; color: var(--ink-3); margin-top: 8px; line-height: 1.55; }

/* ---- двухколоночная раскладка: форма | результат ---- */
.tl-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 20px; align-items: start; }
.tl-layout--wide { grid-template-columns: 4fr 8fr; }
.tl-layout--2col { grid-template-columns: 1fr 1fr; }
.tl-layout--feed-form { grid-template-columns: 1.2fr .8fr 1fr; align-items: end; gap: 14px; }
.tl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tl-card__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 900; font-size: 15px; margin-bottom: 16px;
}
.tl-card__title .tl-card__icon { font-size: 15px; opacity: .6; }
.tl-card__hint { font-size: 12.5px; color: var(--ink-3); margin: -8px 0 14px; line-height: 1.5; }

/* ---- поля формы ---- */
.tl-field { margin-bottom: 16px; }
.tl-field:last-child { margin-bottom: 0; }
.tl-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 7px; }
.tl-label__opt { font-weight: 600; color: var(--muted); }
.tl-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.tl-row { display: flex; gap: 10px; }
.tl-row > * { flex: 1; min-width: 0; }
.tl-divider { height: 1px; background: var(--line-soft); border: 0; margin: 18px 0; }

select.pill-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* ---- range-слайдер ---- */
.tl-range { width: 100%; accent-color: var(--terra); height: 20px; cursor: pointer; }
.tl-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tl-range-scale__value { font-weight: 900; font-size: 14px; color: var(--ink); }

/* ---- чекбоксы / радио ---- */
.tl-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 10px; cursor: pointer; line-height: 1.4;
}
.tl-check:last-child { margin-bottom: 0; }
.tl-check input { accent-color: var(--terra); width: 17px; height: 17px; flex: none; }

/* ---- toggle-группа (пилюли-радио, feeding-tracker) ---- */
.tl-toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tl-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tl-toggle span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--terra-bg); border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 12.5px; font-weight: 800; color: var(--ink-3);
  transition: background .15s, color .15s;
}
.tl-toggle input:checked + span { background: var(--terra); color: #fff; }
.tl-toggle input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }

/* ---- справочная таблица ---- */
.tl-table { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.tl-table th, .tl-table td { padding: 8px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.tl-table th { color: var(--muted); font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.tl-table td.is-num, .tl-table th.is-num { text-align: center; }
.tl-table tbody tr.is-active { background: var(--terra-bg); font-weight: 800; }
.tl-table--ref { margin-top: 4px; }

/* ---- результат: заглушка / контейнер ---- */
.tl-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 24px; color: var(--muted);
}
.tl-placeholder__icon { font-size: 48px; opacity: .35; margin-bottom: 14px; }
.tl-placeholder__text { font-size: 13.5px; max-width: 260px; }

/* ---- крупный результат по центру (diaper-size / hospital-diapers) ---- */
.tl-hero-result { text-align: center; padding: 30px 20px; }
.tl-hero-result__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--terra); color: #fff; font-size: 30px; font-weight: 900;
  margin-bottom: 16px; box-shadow: var(--shadow-cta);
}
.tl-hero-result__count { font-size: 42px; font-weight: 900; color: var(--terra); margin-bottom: 6px; }
.tl-hero-result__title { font-size: 19px; font-weight: 900; }
.tl-hero-result__desc { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* ---- статы-плитки ---- */
.tl-stats { display: grid; gap: 12px; text-align: center; }
.tl-stats--2 { grid-template-columns: repeat(2, 1fr); }
.tl-stats--3 { grid-template-columns: repeat(3, 1fr); }
.tl-stats--4 { grid-template-columns: repeat(4, 1fr); }
.tl-stat { background: var(--terra-bg); border-radius: var(--r-mini); padding: 16px 8px; }
.tl-stat--green { background: var(--green-bg); }
.tl-stat__value { font-weight: 900; font-size: 24px; color: var(--terra); line-height: 1.2; }
.tl-stat--green .tl-stat__value { color: var(--green-ink); }
.tl-stat__label { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 4px; }

/* ---- заметки / предупреждения ---- */
.tl-note { background: var(--pastel-cream); border-radius: var(--r-mini); padding: 14px 18px; font-size: 13px; line-height: 1.55; color: #7a6248; }
.tl-note--warn { background: var(--pastel-rose); color: #8a4a3a; }
.tl-note--green { background: var(--green-bg); color: var(--green-ink); }
.tl-note strong { color: inherit; }
.tl-note + .tl-note { margin-top: 10px; }

/* ---- бейджи размеров/веса (диаперы) ---- */
.tl-size-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--terra); color: #fff; font-weight: 900; font-size: 15px;
}
.tl-size-badge--alt { background: var(--pastel-cream); color: var(--terra); }

/* ---- прогресс-бар ---- */
.tl-progress { height: 8px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.tl-progress__bar { height: 100%; background: var(--terra); border-radius: var(--r-pill); transition: width .3s ease; }
.tl-progress__bar--green { background: var(--green); }

/* ---- мастер-шаги (diaper-test) ---- */
.tl-steps-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 8px; }
.tl-step[hidden] { display: none; }
.tl-nav { display: flex; gap: 10px; margin-top: 16px; }
.tl-nav .btn--next { margin-left: auto; }

/* ---- ранжированный результат (diaper-test) ---- */
.tl-rank { margin-bottom: 22px; }
.tl-rank:last-child { margin-bottom: 0; }
.tl-rank__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tl-rank__medal { font-size: 20px; flex: none; }
.tl-rank__name { font-weight: 900; font-size: 14.5px; flex: 1; }
.tl-rank__score { flex: none; }
.tl-rank__desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }

/* ---- чек-лист (hospital-bag) ---- */
.tl-checklist { display: flex; flex-direction: column; }
.tl-check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; cursor: pointer;
}
.tl-check-item:last-child { border-bottom: 0; }
.tl-check-item input { accent-color: var(--terra); width: 17px; height: 17px; flex: none; }
.tl-check-item__label { flex: 1; }
.tl-check-item__qty { font-weight: 800; color: var(--terra); white-space: nowrap; font-size: 13px; }
.tl-check-item:has(input:checked) .tl-check-item__label { color: var(--muted); text-decoration: line-through; }

/* ---- крупная кнопка-трекер ---- */
.tl-tracker-hero { text-align: center; padding: 34px 20px; }
.tl-tracker-btn { font-size: 16px; padding: 18px 44px; }
.tl-tracker-status { margin-bottom: 14px; }
.tl-tracker-timer { font-weight: 900; font-size: 32px; margin: 8px 0 4px; }
.tl-tracker-timer-label { font-size: 12.5px; color: var(--muted); }
.tl-tracker-elapsed { font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px; }
.tl-tracker-warn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--pastel-rose); color: #8a3a2c; padding: 10px 20px;
  border-radius: var(--r-pill); font-weight: 800; font-size: 13px;
}
.tl-status-badge { display: inline-block; padding: 9px 22px; border-radius: var(--r-pill); font-weight: 900; font-size: 13.5px; }
.tl-status-badge--sleep { background: var(--green-bg); color: var(--green-ink); }
.tl-status-badge--awake { background: var(--pastel-cream); color: #7a6248; }

/* ---- журнал / лог событий ---- */
.tl-log { display: flex; flex-direction: column; font-size: 13px; max-height: 280px; overflow-y: auto; }
.tl-log__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.tl-log__item:last-child { border-bottom: 0; }
.tl-log__time { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.tl-log__gap { font-size: 11px; color: var(--muted); background: var(--bg); padding: 3px 10px; border-radius: var(--r-pill); flex: none; }
.tl-log__meta { color: var(--muted); font-size: 12px; flex: none; }
.tl-log-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.tl-log-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.tl-log-count { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.tl-log-count__value { font-weight: 900; font-size: 26px; color: var(--terra); }
.tl-log-count__label { font-size: 12.5px; color: var(--muted); }

/* ---- дневная гистограмма (сон/кормление за неделю) ---- */
.tl-daybar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 7px; }
.tl-daybar-row:last-child { margin-bottom: 0; }
.tl-daybar-row__label { width: 82px; flex: none; color: var(--muted); }
.tl-daybar-row__label strong { color: var(--ink); }
.tl-daybar-row__track { flex: 1; height: 14px; background: var(--line-soft); border-radius: var(--r-pill); overflow: hidden; }
.tl-daybar-row__fill { height: 100%; background: var(--terra); border-radius: var(--r-pill); min-width: 2px; }
.tl-daybar-row__value { width: 58px; flex: none; text-align: right; color: var(--muted); }

/* ---- распределение по типам (feeding-tracker) ---- */
.tl-dist-row { margin-bottom: 12px; }
.tl-dist-row:last-child { margin-bottom: 0; }
.tl-dist-row__head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.tl-dist-row__head strong { font-weight: 800; }

/* ---- разбивка по категориям (baby-budget / diaper-price) ---- */
.tl-breakdown-row { margin-bottom: 14px; }
.tl-breakdown-row:last-child { margin-bottom: 0; }
.tl-breakdown-row__head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }

/* ---- строки сравнения упаковок (price-calculator) ---- */
.tl-pack-row { border: 1.5px solid var(--line-soft); border-radius: var(--r-mini); padding: 12px; margin-bottom: 10px; }
.tl-pack-row__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tl-pack-row__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--terra); color: #fff;
  font-size: 11px; font-weight: 900; flex: none;
}
.tl-pack-row__remove {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pastel-rose);
  color: #8a3a2c; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.tl-pack-row__fields { display: flex; gap: 8px; }
.tl-pack-row__fields .pill-input { font-size: 13px; }
.tl-add-row { align-self: flex-start; }

/* ---- таблица результата сравнения цен ---- */
.tl-result-table-wrap { overflow-x: auto; }
.tl-table tbody tr.is-best { background: var(--green-bg-soft); }
.tl-table tbody tr.is-worst { background: var(--pastel-rose); }
.tl-table .tl-tag { font-size: 10px; margin-left: 6px; }

/* ---- сравнение подгузников: фильтры + сетка ---- */
.tl-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.tl-filters__field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ink-2); min-width: 160px; }
.tl-filters__reset { flex: none; }

.tl-compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.tl-compare-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tl-compare-card__name { font-weight: 900; font-size: 15px; color: var(--terra); }
.tl-compare-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-compare-card__price { font-weight: 900; font-size: 17px; }
.tl-compare-card__rating { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tl-compare-card__stars { color: var(--star); letter-spacing: 1px; }
.tl-compare-card__notes { margin-top: auto; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.tl-compare-card__pro { color: var(--green-ink); }
.tl-compare-card__con { color: #b0483f; }
.tl-compare-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); }

/* ---- подписка: карточка-CTA вместо лид-формы по умолчанию ---- */
.tl-sub-cta { text-align: center; padding: 26px 20px; }
.tl-sub-cta__icon { font-size: 34px; margin-bottom: 10px; }
.tl-sub-cta__title { font-weight: 900; font-size: 16px; margin-bottom: 6px; }
.tl-sub-cta__text { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-bottom: 16px; }

/* ---- SEO-текст: типографика по образцу article.css (art-body), но
   компактнее — тексты инструментов короче статей ---- */
.tl-seo { margin-top: 12px; }
.tl-seo__title { font-weight: 900; font-size: 18px; margin-bottom: 12px; color: var(--terra); }
.tl-seo p { font-size: 14px; line-height: 1.7; color: #5f5142; }
.tl-seo p + p { margin-top: 12px; }
.tl-seo strong { color: var(--ink); }

/* ---- прочие мелкие утилиты ---- */
.btn--block { width: 100%; }
.tl-list { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #5f5142; }
.tl-list li { padding-left: 18px; position: relative; }
.tl-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.tl-badges-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

/* ---- служебная утилита показать/скрыть — единственный класс, который
   переключают все 12 перенесённых inline-JS скриптов (v2: .d-none) ---- */
.d-none { display: none !important; }

/* ---- мобильная версия ---- */
@media (max-width: 900px) {
  .tl-layout, .tl-layout--wide, .tl-layout--2col, .tl-layout--feed-form { grid-template-columns: 1fr; }
  .tl-compare-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .tl-page { padding-top: 12px; }
  .tl-head__title { font-size: 24px; }
  .tl-stats--3, .tl-stats--4 { grid-template-columns: repeat(2, 1fr); }
  .tl-compare-grid { grid-template-columns: 1fr; }
  .tl-filters { flex-direction: column; align-items: stretch; }
  .tl-filters__field { min-width: 0; }
  .tl-nav { flex-wrap: wrap; }
}

/* ---- печать чек-листа (hospital-bag: было <style> внутри v2-шаблона,
   селекторы обновлены под design-system) ---- */
@media print {
  .site-header, .tabbar, .site-footer,
  .tl-head, #hb-calc-btn, #hb-actions, #hb-placeholder, .tl-progress, #hb-progress-text {
    display: none !important;
  }
  .tl-layout--wide { display: block !important; }
  .tl-layout--wide > .tl-col:first-child { display: none !important; }
  #hb-result { display: block !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  body { font-size: 12px; }
  .tl-head__title { font-size: 18px !important; }
}