/*
 * Калькуляторы — общие стили.
 *
 * Отдельным файлом, а не блоком <style> в разметке: калькуляторов три, и
 * держать три копии одного оформления значило бы получить три немного
 * разных калькулятора через месяц правок. Файл кэшируется браузером — со
 * второй страницы стили уже не грузятся.
 *
 * Свои классы с префиксом sc-, а не Bootstrap: на публичной странице
 * Bootstrap не подключён, и первая версия выглядела там сломанной —
 * крошечные поля, таблицы за краем телефона.
 *
 * Сначала телефон: поля высотой 44 px под палец, шрифт в полях 16 px
 * (иначе iPhone увеличивает страницу при каждом касании).
 */
/* Переменные — на всю страницу, а не на корень калькулятора: переключатель
   и витрина стоят вне него, а цвета у них должны быть те же. Префикс sc-
   не даёт им столкнуться с переменными самой страницы. */
:root { --sc-ink:#141d33; --sc-muted:#5b6478; --sc-line:#e2e7f0; --sc-bg:#f5f7fb;
        --sc-brand:#0d6efd; --sc-brand-soft:#e8f0ff; --sc-good:#16794c; --sc-bad:#b42318; }
.sc { color:var(--sc-ink); font-variant-numeric:tabular-nums; margin:8px 0 28px; }
.sc-tabs *, .sc-hub * { box-sizing:border-box; }
.sc *, .sc *::before, .sc *::after { box-sizing:border-box; }
.sc-vh { position:absolute !important; width:1px; height:1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap; }

/* --- Продукт карточкой ------------------------------------------------- */
.sc-row { position:relative; border:1px solid var(--sc-line); border-radius:16px;
          background:#fff; padding:14px 14px 12px; margin:0 0 12px; min-width:0; }
.sc-row-head { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.sc-num { flex:0 0 26px; height:26px; border-radius:50%; background:var(--sc-brand-soft);
          color:var(--sc-brand); font-weight:700; font-size:13px;
          display:flex; align-items:center; justify-content:center; }
/* По низу: подпись в две строки не должна опускать поле ниже соседнего. */
.sc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; align-items:end; }
@media (min-width:720px) { .sc-grid { grid-template-columns:repeat(4, 1fr); } }

.sc-field { position:relative; min-width:0; }
.sc-labelrow { display:flex; align-items:center; gap:6px; min-height:22px; margin-bottom:4px; }
.sc-labelrow label { font-size:13px; color:var(--sc-muted); line-height:1.25; }
.sc-optional { font-size:12px; color:#8a93a6; }

.sc input.sc-in { display:block; width:100%; height:44px; padding:0 12px; font:inherit;
                  font-size:16px; color:var(--sc-ink); background:#fff;
                  border:1px solid #cfd6e3; border-radius:10px; margin:0;
                  -webkit-appearance:none; appearance:none; }
.sc input.sc-in:focus { outline:none; border-color:var(--sc-brand);
                        box-shadow:0 0 0 3px rgba(13,110,253,.18); }
.sc input.sc-in::placeholder { color:#a3abbb; }
.sc input.sc-name { font-weight:600; flex:1 1 auto; }
.sc-unit { position:relative; }
.sc-unit input.sc-in { padding-right:38px; }
.sc-unit span { position:absolute; right:12px; top:50%; transform:translateY(-50%);
                font-size:14px; color:#8a93a6; pointer-events:none; }

/* Итог прямо под продуктом: на телефоне до общей таблицы далеко. */
.sc-line { margin-top:10px; padding-top:10px; border-top:1px dashed var(--sc-line);
           font-size:14px; color:var(--sc-muted); line-height:1.5; }
.sc-line b { color:var(--sc-ink); font-weight:600; }
.sc-line .sc-sep { color:#c3cad6; margin:0 4px; }
.sc-norm { display:block; margin-top:4px; font-size:13px; color:#7a5a00; }
.sc-norm::before { content:"≈ "; }
.sc-line:empty { display:none; }

/* --- Подсказки «?» ----------------------------------------------------- */
.sc-tip { display:inline-block; position:static; }
.sc-tip > summary { list-style:none; cursor:pointer; width:20px; height:20px;
                    border-radius:50%; border:1px solid #c3cad6; color:var(--sc-muted);
                    font-size:12px; font-weight:700; line-height:18px; text-align:center;
                    user-select:none; -webkit-tap-highlight-color:transparent; }
.sc-tip > summary::-webkit-details-marker { display:none; }
.sc-tip > summary:focus-visible { outline:3px solid rgba(13,110,253,.35); outline-offset:1px; }
.sc-tip[open] > summary { background:var(--sc-ink); border-color:var(--sc-ink); color:#fff; }
/* Всплывает под полем на всю ширину поля и не шире экрана: на правой
   колонке телефона подсказка, привязанная к левому краю кнопки, уезжала
   бы за край. */
.sc-tipbody { position:absolute; z-index:30; top:28px; left:0; width:max(100%, 240px);
              max-width:min(320px, calc(100vw - 32px));
              background:var(--sc-ink); color:#fff; font-size:13px; line-height:1.45;
              padding:10px 12px; border-radius:10px; box-shadow:0 10px 30px rgba(20,29,51,.25); }
.sc-grid > .sc-field:nth-child(2n) .sc-tipbody { left:auto; right:0; }
@media (min-width:720px) {
  .sc-grid > .sc-field:nth-child(2n) .sc-tipbody { left:0; right:auto; }
  .sc-grid > .sc-field:nth-child(4n) .sc-tipbody { left:auto; right:0; }
}
.sc-tipbody b { color:#fff; }

/* --- Кнопки ------------------------------------------------------------ */
.sc-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
          height:44px; padding:0 18px; border-radius:10px; font:inherit; font-size:15px;
          font-weight:600; cursor:pointer; text-decoration:none; border:1px solid transparent; }
.sc-btn-primary { background:var(--sc-brand); color:#fff; }
.sc-btn-ghost { background:#fff; color:var(--sc-ink); border-color:#cfd6e3; }
.sc-btn-link { background:none; border:0; color:var(--sc-brand); padding:0 4px; height:auto; }
.sc-add { width:100%; border-style:dashed; color:var(--sc-brand); background:#fff;
          border-color:#b9c9ea; margin:0 0 14px; }
.sc-remove { flex:0 0 36px; height:36px; border-radius:10px; border:1px solid transparent;
             background:transparent; color:#8a93a6; font-size:22px; line-height:1; cursor:pointer; }
.sc-remove:hover { background:var(--sc-bg); color:var(--sc-bad); }

/* Кнопки, которым нужен скрипт, до его запуска не показываем: без него
   они ничего не делают, а кнопка, которая ничего не делает, хуже
   отсутствующей. */
.sc [data-js-only] { display:none; }
.sc.sc-js [data-js-only] { display:inline-flex; }
.sc.sc-js .sc-add[data-js-only] { display:flex; }
/* И наоборот: кнопка «Посчитать» нужна только без скрипта — со скриптом
   ответ меняется по мере ввода, и лишняя кнопка выталкивала соседние
   на новую строку. */
.sc.sc-js [data-no-js] { display:none; }
.sc.sc-js .sc-live[data-js-only] { display:inline; }
.sc-start { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
            margin:0 0 12px; font-size:14px; color:var(--sc-muted); }
.sc-start > span { flex:1 0 100%; }
.sc-jump { flex:1 0 100%; margin-top:4px; font-size:14px; font-weight:600;
           color:var(--sc-brand); text-decoration:none; }
a.sc-chip-link { display:inline-flex; align-items:center; text-decoration:none;
                 color:var(--sc-brand); border-color:#b9c9ea; height:36px; }

/* --- Порции и цель ----------------------------------------------------- */
.sc-settings { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end;
               background:var(--sc-bg); border:1px solid var(--sc-line);
               border-radius:16px; padding:14px; margin-bottom:14px; }
/* Рамка обязательна: внутри приложения фон страницы того же серого, и без
   неё блок настроек растворялся — было непонятно, где кончаются продукты. */
.sc-settings .sc-in { background:#fff; }
.sc-chips { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sc-chips-label { font-size:13px; color:var(--sc-muted); margin-right:2px; }
.sc-chip { height:32px; padding:0 12px; border-radius:16px; border:1px solid #cfd6e3;
           background:#fff; font:inherit; font-size:14px; color:var(--sc-ink); cursor:pointer; }
.sc-chip[aria-pressed="true"] { background:var(--sc-ink); color:#fff; border-color:var(--sc-ink); }
.sc-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* --- Итог -------------------------------------------------------------- */
.sc-summary { border-radius:18px; padding:18px; margin:0 0 16px;
              background:linear-gradient(135deg, #0d6efd 0%, #1b3fa8 100%); color:#fff; }
.sc-kpis { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sc-kpi span { display:block; font-size:13px; opacity:.85; line-height:1.3; }
.sc-kpi b { display:block; font-size:30px; line-height:1.15; font-weight:800;
            letter-spacing:-.02em; margin-top:4px; white-space:nowrap; }
.sc-kpi small { display:block; font-size:12.5px; opacity:.8; margin-top:4px; line-height:1.35; }
.sc-summary .sc-tip > summary { border-color:rgba(255,255,255,.55); color:#fff; }
.sc-summary .sc-tip[open] > summary { background:#fff; color:var(--sc-ink); }
.sc-summary .sc-tipbody { background:#fff; color:var(--sc-ink); }
.sc-summary .sc-tipbody b { color:var(--sc-ink); }
.sc-kpi .sc-labelrow { position:relative; }
.sc-kpi .sc-labelrow span { display:inline; }

.sc-empty { border:1px dashed #c3cad6; border-radius:16px; padding:18px; margin-bottom:16px;
            color:var(--sc-muted); background:#fff; }
.sc-empty p { margin:0 0 10px; }
.sc-examples { display:flex; flex-wrap:wrap; gap:8px; }

/* --- Таблицы ----------------------------------------------------------- */
.sc-block { border:1px solid var(--sc-line); border-radius:16px; background:#fff;
            margin:0 0 16px; overflow:hidden; }
.sc-block-head { padding:14px 14px 4px; }
.sc-block-head h3 { font-size:16px; font-weight:700; margin:0; line-height:1.3; }
.sc-block-head p { font-size:13px; color:var(--sc-muted); margin:4px 0 0; line-height:1.4; }
.sc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sc-table { width:100%; border-collapse:collapse; font-size:14px; margin:0; }
.sc-table th, .sc-table td { padding:9px 10px; border-top:1px solid var(--sc-line);
                             text-align:right; white-space:nowrap; }
.sc-table th:first-child, .sc-table td:first-child { text-align:left; padding-left:14px; }
.sc-table th:last-child, .sc-table td:last-child { padding-right:14px; }
.sc-table thead th { font-size:12px; font-weight:600; color:var(--sc-muted);
                     text-transform:none; background:var(--sc-bg); border-top:0;
                     white-space:normal; vertical-align:bottom; }
.sc-table tr.sc-mine td { background:var(--sc-brand-soft); font-weight:700; }
.sc-foot { font-size:13px; color:var(--sc-muted); padding:10px 14px 14px; margin:0;
           border-top:1px solid var(--sc-line); line-height:1.45; }

/* --- Итог, прилипший к низу экрана ------------------------------------ */
.sc-sticky { display:none; }
@media (max-width:719px) {
  .sc.sc-js .sc-sticky.sc-on { display:flex; position:fixed; left:10px; right:10px; bottom:10px;
      z-index:40; justify-content:space-between; align-items:center; gap:10px;
      padding:10px 14px; border-radius:14px; background:var(--sc-ink); color:#fff;
      box-shadow:0 10px 30px rgba(20,29,51,.3); font-size:13px; }
  .sc-sticky b { display:block; font-size:18px; }
  .sc-sticky a { color:#9ec5ff; font-weight:600; text-decoration:none; white-space:nowrap; }
  .sc.sc-js { padding-bottom:70px; }
}
/* Итог уже на экране — плашка внизу его только дублирует. */
.sc.sc-summary-seen .sc-sticky.sc-on { display:none; }
.sc-muted { color:var(--sc-muted); font-size:13px; }
.sc-busy .sc-summary, .sc-busy .sc-block { opacity:.6; transition:opacity .15s; }

/* --- Мостик в калькулятор фудкоста ----------------------------------- */
.sc-bridge { display:inline-block; margin-top:14px; color:#fff; font-weight:600; font-size:14px;
             text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); }

/* --- Карточка ввода: калькуляторы фудкоста и веса ---------------------- */
.sc-card { border:1px solid var(--sc-line); border-radius:16px; background:#fff;
           padding:14px; margin:0 0 14px; }
.sc-card-hint { margin:0 0 10px; font-size:14px; color:var(--sc-muted); }
.sc-card .sc-chips { margin-top:12px; }
.sc-card .sc-actions { margin-top:12px; }
/* Три поля: на телефоне первое на всю ширину, два — парой под ним. Это и
   есть «себестоимость плюс одно из двух». На компьютере — в ряд. */
.sc-trio { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.sc-trio > .sc-wide { grid-column:1 / -1; }
@media (min-width:720px) {
  .sc-trio { grid-template-columns:repeat(3, 1fr); }
  .sc-trio > .sc-wide { grid-column:auto; }
}
.sc-trio > .sc-field:nth-child(3) .sc-tipbody { left:auto; right:0; }
.sc-card > .sc-wide { margin-bottom:10px; }
.sc-grid-2 { grid-template-columns:1fr 1fr; }
@media (min-width:720px) { .sc-grid-2 { grid-template-columns:repeat(4, 1fr); } }
/* Главные поля крупнее: в них вписывают ответ на вопрос, ради которого
   пришли, а на телефоне это ещё и больший промах пальцем. */
.sc input.sc-in.sc-big { height:52px; font-size:20px; font-weight:600; }
.sc-unit input.sc-big + span { font-size:16px; }
/* Посчитанное поле — ответ, а не пустота: подкрашено, число синее. */
.sc input.sc-in.sc-solved { background:#eef4ff; border-color:#b9c9ea; }
.sc input.sc-in.sc-solved::placeholder { color:var(--sc-brand); font-weight:700; opacity:1; }

/* --- Ответ -------------------------------------------------------------- */
.sc-answer { border-radius:18px; padding:18px; margin:0 0 16px; color:#fff;
             background:linear-gradient(135deg, #0d6efd 0%, #1b3fa8 100%); }
.sc-answer-bad { background:linear-gradient(135deg, #d92d20 0%, #912018 100%); }
.sc-answer-label { display:block; font-size:14px; opacity:.9; }
.sc-answer-value { display:block; font-size:40px; line-height:1.1; font-weight:800;
                   letter-spacing:-.02em; margin:4px 0 2px; }
.sc-answer small { display:block; font-size:13.5px; opacity:.85; line-height:1.4; }
.sc-answer-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;
                   padding-top:12px; border-top:1px solid rgba(255,255,255,.22); }
.sc-answer-stats span { font-size:13px; opacity:.9; }
.sc-answer-stats b { display:block; font-size:20px; font-weight:700; opacity:1; margin-top:2px; }
.sc-note { margin:0 0 16px; padding:12px 14px; border-radius:12px; background:var(--sc-bg);
           color:var(--sc-muted); font-size:14px; }
.sc-note-bad { background:#fef3f2; color:var(--sc-bad); }
.sc-norm-note { margin:-6px 0 16px; font-size:13.5px; color:#7a5a00; line-height:1.45; }

/* --- Переключатель калькуляторов --------------------------------------- */
/* На телефоне — лента с прокруткой вбок: три кнопки в полный рост не
   помещаются, а сжатые до значков перестают объяснять, что за ними. */
.sc-tabs { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
           scrollbar-width:none; margin:0 0 16px; padding:2px 0; }
.sc-tabs::-webkit-scrollbar { display:none; }
.sc-tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:40px;
          padding:0 14px 0 6px; border-radius:20px; border:1px solid #cfd6e3; background:#fff;
          color:var(--sc-ink); text-decoration:none; font-size:14.5px; font-weight:600;
          white-space:nowrap; }
.sc-tab i { font-style:normal; width:28px; height:28px; border-radius:50%;
            display:inline-flex; align-items:center; justify-content:center;
            background:var(--sc-brand-soft); color:var(--sc-brand); font-size:13px; font-weight:800; }
.sc-tab[aria-current="page"] { background:var(--sc-ink); color:#fff; border-color:var(--sc-ink); }
.sc-tab[aria-current="page"] i { background:rgba(255,255,255,.16); color:#fff; }
.sc-tab-short { display:none; }
/* На телефоне — три равные кнопки в ряд, значок над коротким названием.
   Лента с прокруткой вбок прятала третий калькулятор за край экрана, а о
   том, что её можно прокрутить, ничто не говорило. */
@media (max-width:719px) {
  .sc-tabs { display:grid; grid-template-columns:repeat(3, 1fr); overflow:visible; gap:6px; }
  .sc-tab { flex-direction:column; justify-content:center; height:auto; min-height:64px;
            padding:8px 4px; gap:4px; border-radius:14px; font-size:12.5px; line-height:1.2;
            white-space:normal; text-align:center; }
  .sc-tab-long { display:none; }
  .sc-tab-short { display:block; }
}

/* --- Витрина калькуляторов --------------------------------------------- */
.sc-hub { display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 28px; }
@media (min-width:720px) { .sc-hub { grid-template-columns:repeat(3, 1fr); } }
.sc-hub-card { display:flex; flex-direction:column; gap:8px; padding:18px;
               border:1px solid var(--sc-line); border-radius:18px; background:#fff;
               color:var(--sc-ink); text-decoration:none; min-height:100%;
               transition:border-color .15s, box-shadow .15s; }
.sc-hub-card:hover, .sc-hub-card:focus-visible { border-color:#b9c9ea;
               box-shadow:0 8px 24px rgba(20,29,51,.08); outline:none; }
.sc-hub-glyph { width:44px; height:44px; border-radius:12px; background:var(--sc-brand-soft);
                color:var(--sc-brand); display:flex; align-items:center; justify-content:center;
                font-size:18px; font-weight:800; }
.sc-hub-title { font-size:18px; font-weight:700; line-height:1.25; }
.sc-hub-text { font-size:14px; color:var(--sc-muted); line-height:1.45; flex:1 1 auto; }
.sc-hub-go { font-size:14px; font-weight:700; color:var(--sc-brand); }