/* мобильная адаптация: money — правки только для узких экранов (@media max-width) */
/* Раздел «Деньги»: #tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare,
   #tab-purchase, #tab-diy, #tab-gaps, #tab-method.
   Приёмы: широкие таблицы → карточки с подписями колонок (data-label, класс .m-cards)
   либо прокрутка внутри своей рамки с закреплённой первой колонкой;
   поля/кнопки/списки — во всю ширину, касание от 40 px. Палитра и шрифты не меняются. */

@media (max-width: 760px) {

  /* ---------- 1. ничего не выпирает за экран ---------- */
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .prose,
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .lede,
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .prose p,
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .callout {
    max-width: 100%;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) :is(h2, h3, h4, p, li, td, th, b, a) {
    overflow-wrap: anywhere;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) img {
    max-width: 100%; height: auto;
  }

  /* ---------- 2. карточки сводок — в одну колонку ---------- */
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) :is(.cards, .delta) {
    grid-template-columns: 1fr;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) :is(.card, .card + .card),
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .card:nth-child(even) {
    padding: 14px 0; border-left: 0; border-top: 1px solid var(--rule);
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .card:first-child {
    border-top: 0;
  }

  /* ---------- 3. поля, списки и кнопки — во всю ширину, касание от 40 px ---------- */
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head {
    gap: 8px;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head > * {
    flex: 1 0 100%; width: 100%; min-width: 0;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head input[type=search],
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head button {
    min-height: 44px;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head .chk {
    min-height: 40px; white-space: normal;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .est-head .muted {
    font-size: 12px;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .chk {
    min-height: 40px; white-space: normal;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .seg {
    display: flex; width: 100%; flex: 1 0 100%;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .seg button {
    flex: 1 1 0; min-height: 40px; padding: 8px 6px; white-space: normal;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .field {
    display: flex; width: 100%;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) :is(select, input[type=search], input[type=number], .field input) {
    width: 100%; max-width: none; min-height: 40px;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) button.mini {
    min-height: 40px; padding: 8px 14px;
  }
  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .cal-ctrl {
    display: grid; grid-template-columns: 1fr; gap: 12px;
  }

  /* ---------- 4. широкие таблицы → карточки с подписями колонок ---------- */
  /* .m-cards + data-label проставлены в breakdown.js, purchase.js, diy.js */
  table.m-cards, table.m-cards > thead, table.m-cards > tbody,
  table.m-cards > tbody > tr, table.m-cards > tbody > tr > td {
    display: block; width: auto;
  }
  table.m-cards { min-width: 0; max-width: 100%; }
  table.m-cards > thead { display: none; }
  table.m-cards > tbody > tr {
    padding: 12px 0; border-bottom: 1px solid var(--rule);
  }
  table.m-cards > tbody > tr > td {
    border: 0; padding: 1px 0; min-width: 0; white-space: normal;
    text-align: left; line-height: 1.45;
  }
  table.m-cards > tbody > tr > td:empty { display: none; }
  table.m-cards > tbody > tr > td.n {
    display: inline-block; vertical-align: top;
    padding: 2px 18px 2px 0; text-align: left;
  }
  table.m-cards > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block; margin-top: 4px;
    font-family: var(--sans); font-size: 9.5px; font-weight: 500;
    letter-spacing: .7px; text-transform: uppercase; color: var(--ink3);
  }
  table.m-cards > tbody > tr > td .src { max-width: 100%; }
  table.m-cards > tbody > tr.tot {
    border-top: 1px solid var(--ink); border-bottom: 0;
  }
  table.m-cards > tbody > tr.tot > td { font-weight: 600; }

  /* ---------- 5. таблицы, которые остаются таблицами: прокрутка в своей рамке ---------- */
  /* первая колонка закреплена, цифры не обрезаются */
  #tab-estimate .chap .lines {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--rule);
    scroll-snap-type: x proximity; scroll-padding-left: 187px;
  }
  #tab-estimate .chap .lines table.lt :is(th, td).n { scroll-snap-align: start; }
  #tab-estimate .chap .lines table.lt { min-width: 760px; }
  #tab-estimate .chap .lines table.lt :is(th, td).n { min-width: 88px; }
  #tab-estimate .chap .lines table.lt :is(th, td):first-child {
    position: sticky; left: 0; z-index: 2;
    width: 186px; min-width: 186px; max-width: 186px;
    padding-right: 12px;
    background: var(--bg); border-right: 1px solid var(--rule);
  }
  #tab-estimate .chap .lines table.lt tbody tr:hover :is(td):first-child { background: var(--bg2); }

  :is(#tab-compare, #tab-buyorbuild) table.matrix {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--rule);
    scroll-snap-type: x proximity; scroll-padding-left: 141px;
  }
  :is(#tab-compare, #tab-buyorbuild) table.matrix :is(th, td):not(:first-child) { scroll-snap-align: start; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix :is(th, td) { min-width: 104px; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix.ctab :is(th, td) { min-width: 136px; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix :is(th, td):first-child {
    position: sticky; left: 0; z-index: 2;
    width: 140px; min-width: 140px; max-width: 140px;
    padding-right: 10px;
    background: var(--bg); border-right: 1px solid var(--rule);
  }
  :is(#tab-compare, #tab-buyorbuild) table.matrix .src { font-size: 11.5px; }
  #tab-buyorbuild table.bb-all tr.cur td:first-child { background: var(--acc-soft); }
  :is(#tab-compare, #tab-buyorbuild) table.matrix tr.tot td:first-child { background: var(--bg); }

  /* ---------- 6. «Разбор цены»: дерево в одну колонку ---------- */
  #tab-breakdown .bd-g > header {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    column-gap: 8px; row-gap: 2px; padding: 12px 2px; align-items: start;
  }
  #tab-breakdown .bd-g > header .caret { grid-area: 1 / 1; padding-top: 6px; }
  #tab-breakdown .bd-g > header .t { grid-area: 1 / 2; font-size: 18px; line-height: 1.2; }
  #tab-breakdown .bd-g > header .bd-bar { display: none; }
  #tab-breakdown .bd-g > header .n:nth-child(4) { grid-area: 2 / 2; text-align: left; font-size: 11.5px; color: var(--ink3); }
  #tab-breakdown .bd-g > header .n:nth-child(5) { grid-area: 2 / 3; font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
  #tab-breakdown .bd-g > header .n:nth-child(6) { grid-area: 1 / 3; white-space: nowrap; font-size: 14px; }
  #tab-breakdown .bd-g header small { display: block; margin: 2px 0 0; }
  #tab-breakdown .bd-ch > header {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    column-gap: 8px; padding: 10px 2px 10px 16px;
  }
  #tab-breakdown .bd-ch > header .n { white-space: nowrap; }
  #tab-breakdown .bd-lt { margin: 0 0 6px 4px; width: calc(100% - 4px); min-width: 0; }
  #tab-breakdown .bd-lt td:first-child { padding-right: 8px; }
  #tab-breakdown .bd-lt td.n { min-width: 0; }
  #tab-breakdown .bd-detail { margin: 10px 0 4px; padding: 10px 12px; font-size: 13px; }
  #tab-breakdown .bd-detail .src { overflow-wrap: anywhere; }
  #tab-breakdown .bd-total { font-size: 16px; gap: 10px; }
  #tab-breakdown .bd-side { padding: 14px; }
  #tab-breakdown .bd-side .big { font-size: 24px; }
  #tab-breakdown .bd-sel { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #tab-breakdown .bd-sel .field { width: 100%; }
  #tab-breakdown #bd-swap { width: 100%; margin-top: 10px; }
  /* карточный вид таблиц разбора */
  #tab-breakdown table.bd-sw > tbody > tr.sec > td {
    padding: 18px 0 4px; border-bottom: 1px solid var(--rule2);
  }
  #tab-breakdown table.bd-sw > tbody > tr.sec { padding: 0; border-bottom: 0; }
  #tab-breakdown table.bd-sw > tbody > tr.cur { background: var(--acc-soft); padding: 12px 10px; }
  #tab-breakdown table.bd-sw > tbody > tr > td:first-child { font-size: 14px; }
  #tab-breakdown table.bd-sw > tbody > tr > td:last-child:not(:empty) { margin-top: 8px; }
  #tab-breakdown table.bd-diff > tbody > tr.bd-dch { background: rgba(255, 255, 255, .45); padding: 12px 8px; }
  #tab-breakdown table.bd-diff > tbody > tr.bd-dl > td:first-child { padding-left: 0; }

  /* ---------- 7. «Проверка сметы»: таблица решений → карточки ---------- */
  #tab-gaps table.ltab { display: block; }
  #tab-gaps table.ltab > thead { display: none; }
  #tab-gaps table.ltab > tbody { display: block; }
  #tab-gaps table.ltab > tbody > tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  #tab-gaps table.ltab > tbody > tr > td {
    display: block; width: auto; min-width: 0; border: 0; padding: 1px 0;
    text-align: left; white-space: normal;
  }
  #tab-gaps table.ltab > tbody > tr > td::before {
    display: block; margin-top: 6px;
    font-family: var(--sans); font-size: 9.5px; font-weight: 500;
    letter-spacing: .7px; text-transform: uppercase; color: var(--ink3);
  }
  #tab-gaps table.ltab > tbody > tr > td:nth-child(2)::before { content: 'Варианты'; }
  #tab-gaps table.ltab > tbody > tr > td:nth-child(3)::before { content: 'Рекомендация'; }
  #tab-gaps table.ltab > tbody > tr > td:nth-child(4)::before { content: 'Влияние на цену'; }
  #tab-gaps .gapcard h4 { display: flex; flex-wrap: wrap; gap: 4px 12px; }

  /* ---------- 8. «Сравнение сценариев» ---------- */
  #tab-compare .legend {
    grid-template-columns: 1fr 1fr !important; gap: 0 !important;
  }
  #tab-compare .legend div { padding: 10px 4px; }
  #tab-compare .chart h3 { font-size: 20px; }

  /* ---------- 9. «Построить или купить»: колонки друг под другом ---------- */
  #tab-buyorbuild .bb-cols { grid-template-columns: 1fr; gap: 14px; }
  #tab-buyorbuild .bb-col { padding: 14px; }
  #tab-buyorbuild .bb-col h3 { font-size: 20px; }
  #tab-buyorbuild .bb-col table.ltab { display: table; width: 100%; overflow: visible; }
  #tab-buyorbuild .bb-col table.ltab td { min-width: 0; padding-right: 0; }
  #tab-buyorbuild .bb-col table.ltab td:first-child { width: 58%; }
  #tab-buyorbuild .bb-ctrl { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  #tab-buyorbuild .bb-upg { grid-template-columns: 1fr; }
  #tab-buyorbuild .bb-upg label { grid-template-columns: 20px minmax(0, 1fr); row-gap: 4px; }
  #tab-buyorbuild .bb-upg label em { grid-column: 2; }
  #tab-buyorbuild .bb-upg-tot { text-align: left; }

  /* ---------- 10. «Закупки по месяцам» ---------- */
  #tab-purchase table.pu > tbody > tr > td.pu-links {
    display: block; grid-template-columns: 1fr; min-width: 0; padding-right: 0;
  }
  #tab-purchase .pu-links a, #tab-purchase .pu-links .pu-none { padding: 5px 0; min-height: 28px; }
  #tab-purchase table.pu > tbody > tr > td:first-child { font-size: 14px; }

  /* ---------- 11. «Сам строю» ---------- */
  #tab-diy table.m-cards > tbody > tr > td:first-child { font-size: 14px; }
  #tab-diy .g-list li { margin: 8px 0; }
}

@media (max-width: 420px) {
  /* ---------- узкий экран: 375 px и меньше ---------- */
  #tab-breakdown .bd-g > header .t { font-size: 17px; }
  #tab-breakdown .bd-g > header .n:nth-child(6) { font-size: 13.5px; }
  #tab-breakdown .bd-ch > header { padding-left: 10px; font-size: 13px; }
  #tab-breakdown .bd-lt { margin-left: 0; width: 100%; }
  #tab-breakdown .bd-detail { margin-left: 0; padding: 10px; }

  #tab-estimate .chap .lines { scroll-padding-left: 163px; }
  #tab-estimate .chap .lines table.lt :is(th, td):first-child { width: 162px; min-width: 162px; max-width: 162px; }

  :is(#tab-compare, #tab-buyorbuild) table.matrix :is(th, td) { min-width: 96px; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix.ctab :is(th, td) { min-width: 124px; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix { scroll-padding-left: 125px; }
  :is(#tab-compare, #tab-buyorbuild) table.matrix :is(th, td):first-child { width: 124px; min-width: 124px; max-width: 124px; }

  #tab-compare .legend { grid-template-columns: 1fr !important; }

  :is(#tab-breakdown, #tab-buyorbuild, #tab-estimate, #tab-compare, #tab-purchase, #tab-diy, #tab-gaps, #tab-method) .seg button {
    font-size: 12px; padding: 8px 4px;
  }
  table.m-cards > tbody > tr > td.n { padding-right: 14px; font-size: 12px; }
}