/* Общий слой калькуляторов в стиле paket27. Подключается ПОСЛЕ tokens.css и CSS страницы.
   Только var(--…) — сырые цвета живут в tokens.css. */

/* 1. Старые имена переменных исходников → токены paket27 (CSS страниц и inline style="" их используют). */
:root{
  color-scheme:light;
  --ink:var(--color-text);
  --ink-2:var(--color-text-muted-ui);
  --line:var(--color-border);
  --line-2:var(--color-border-input-ui);
  --bg:var(--color-bg);
  --surface:var(--color-bg);
  --surface-2:var(--color-surface);
  --accent:var(--color-text);              /* выбор/активное = ink, как на paket27 */
  --accent-hover:var(--color-hover-accent);
  --accent-soft:transparent;               /* без мягких подложек */
  --accent-line:var(--color-border-strong);
  --warn:var(--color-warning); --warn-ink:var(--color-warning); --warn-soft:transparent; --warn-line:var(--color-border);
  --ok:var(--color-success); --ok-soft:transparent;
  --danger:var(--color-error); --danger-soft:transparent;
  --r-sm:var(--radius-0); --r:var(--radius-0); --r-lg:var(--radius-0);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --shadow-sm:none; --shadow-md:var(--shadow-print);
  --z-sticky:20; --z-popover:40; --z-toast:60;
  --ease:cubic-bezier(.22,1,.36,1); --dur:160ms;
  --font:var(--font-text);
}

/* 2. База */
body{font:400 var(--fs-ui-body)/1.45 var(--font-text);color:var(--color-text);background:var(--color-bg)}
h1,h2,h3,.pane-title,.section-title,.total-value{font-family:var(--font-display);font-weight:var(--fw-bold)}
*{border-radius:var(--radius-0)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-0)}
.text-input:focus,.text-input:focus-visible,textarea:focus,select:focus{outline:var(--input-focus);outline-offset:0;border-color:var(--color-focus-input);box-shadow:none}

/* 3. Шапка */
/* Шапка — ОБЩАЯ для калькуляторов и «Актуальной информации», задаётся только здесь (kraft.css/pvd.css/info.css .appbar не задают) */
.appbar{position:relative;z-index:var(--z-popover);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);flex:0 0 auto;flex-wrap:nowrap;min-height:var(--appbar-h);height:var(--appbar-h);background:var(--color-bg);border-bottom:1px solid var(--color-border-strong);overflow:visible;max-width:100%;min-width:0;box-sizing:border-box}
@media (max-width:1120px){.appbar{position:sticky;top:0}}
@media (max-width:560px){.appbar{position:static;padding:var(--space-2) var(--space-3);gap:var(--space-2)}}
.appbar h1{font:700 var(--fs-ui-appbar)/1.2 var(--font-display);letter-spacing:var(--ls-ui-h)}
.appbar-sub,.price-version,.price-version-tag{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui);background:transparent;border:none;box-shadow:none;padding:0}
/* общая шапочная навигация (из pvd.css → calc.css): одинаково на kraft/pvd/info */
.appbar-nav{display:flex;align-items:center;gap:var(--space-5);flex-wrap:nowrap;min-width:0;flex:0 0 auto} /* не сжимается: иначе ссылки вылезали на «Версию цен» (kraft@1440) */
.appbar-divider{width:1px;height:18px;background:var(--color-border);flex:0 0 auto}
.appbar-link{
  display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-3);
  font-size:var(--fs-ui-caption);font-weight:550;color:var(--color-text-muted-aa);
  text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast),color var(--dur-fast)
}
.appbar-link:hover{background:var(--color-surface-sunken);color:var(--color-text)}
.appbar-link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.appbar-link.is-brand{color:var(--color-text);font-weight:700}

/* 4. Кнопки */
.btn{min-height:var(--touch-min);padding:10px 16px;border:1px solid var(--color-border-strong);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-ui-caption);font-weight:700;box-shadow:none;appearance:none;-webkit-appearance:none;transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.btn:hover{background:var(--color-bg);border-color:var(--color-border-strong);color:var(--color-hover-accent)}
.btn:active{background:var(--color-surface)}
.btn-primary{min-height:var(--btn-min-h);padding:14px 20px;gap:20px;border-color:transparent;background:var(--btn-primary-bg);color:var(--btn-primary-fg);font-size:var(--ui-btn-fs)}
.btn-primary::after{content:"→";font-family:var(--font-system,Arial,sans-serif);font-size:var(--fs-22);font-weight:400;line-height:1;margin-left:20px}
.btn-primary:hover:not([disabled]):not(:disabled):not([aria-disabled="true"]){background:var(--btn-primary-bg-hover);color:var(--btn-primary-fg-hover);border-color:transparent}
.btn-quiet{border-color:transparent;background:transparent;color:var(--color-text);text-decoration:underline;text-underline-offset:3px}
.btn-quiet:hover{background:transparent;border-color:transparent}
.btn-danger-quiet{color:var(--color-text)}
.btn-danger-quiet:hover{color:var(--color-error)}
.btn[disabled],.btn:disabled,.btn.is-disabled,.btn[aria-disabled="true"]{background:var(--color-disabled-bg);color:var(--color-text-muted-ui);border-color:var(--color-border);cursor:not-allowed;text-decoration:none;transform:none}
/* primary disabled: specificity .btn.btn-primary[disabled] > .btn-primary (calc:57 / pvd:95 / kraft:119) */
.btn.btn-primary[disabled],.btn.btn-primary:disabled,.btn.btn-primary.is-disabled,.btn.btn-primary[aria-disabled="true"]{
  background:var(--color-disabled-bg);background-color:var(--color-disabled-bg);
  color:var(--color-text-muted-ui);border-color:var(--color-border);
  cursor:not-allowed;text-decoration:none;transform:none;opacity:1;box-shadow:none
}
.btn.btn-primary[disabled]::after,.btn.btn-primary:disabled::after,.btn.btn-primary[aria-disabled="true"]::after{opacity:.55;color:inherit}
.link-btn{font-size:var(--fs-ui-caption);color:var(--color-text);text-decoration:underline;text-underline-offset:3px;min-height:32px}
.link-btn:hover{color:var(--color-hover-accent)}
.icon-btn{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}
.icon-btn:hover{border-color:var(--color-border-strong)}

/* 5. Поля */
.field-label,.step-title,.total-label,.matrix-title{font-size:var(--fs-min);letter-spacing:var(--ls-ui-caps);text-transform:uppercase;color:var(--color-text-muted-ui);font-weight:400}
.field-hint{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
.field-error{font-size:var(--fs-ui-caption);color:var(--color-error);min-height:18px}
.text-input,.matrix-sort,.cond-edit,.staff-desk input{min-height:var(--ui-input-h);border:1px solid var(--color-border-input-ui);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-ui-body);box-shadow:none}
.text-input:hover{border-color:var(--color-border-strong)}
.text-input[aria-invalid="true"],.field.has-error .text-input,.is-invalid .text-input{border-color:var(--color-error)}

/* 6. Выбор: opt / chip / seg / qty-chip / opt-toggle — нажатое = заливка ink, текст paper */
.opt,.chip,.opt-toggle{min-height:var(--touch-min);border:1px solid var(--color-border-strong);background:var(--color-bg);color:var(--color-text);font-size:var(--fs-ui-caption);box-shadow:none}
.opt:hover:not([aria-pressed="true"]),.chip:hover:not([disabled]):not([aria-pressed="true"]),.opt-toggle:hover:not([aria-pressed="true"]){border-color:var(--color-border-strong);background:var(--color-bg);color:var(--color-hover-accent)}
.opt[aria-pressed="true"],.chip[aria-pressed="true"],.opt-toggle[aria-pressed="true"]{background:var(--color-text);border-color:var(--color-text);color:var(--color-text-inverse);box-shadow:none}
.opt small,.chip small{font-size:var(--fs-min);color:var(--color-text-muted-ui)}
.opt[aria-pressed="true"] small,.chip[aria-pressed="true"] small{color:var(--color-surface-sunken)}
.chip[disabled],.opt[disabled]{background:var(--color-disabled-bg);color:var(--color-text-muted-ui);border-color:var(--color-border);opacity:1}
.segmented{padding:0;gap:0;border:1px solid var(--color-border-strong);background:var(--color-bg);box-shadow:none}
.segmented .opt,.seg{min-height:var(--touch-min);border:none;border-right:1px solid var(--color-border-strong);background:var(--color-bg);color:var(--color-text);box-shadow:none;font-size:var(--fs-ui-caption)}
.segmented .opt:last-child,.segmented .seg:last-child{border-right:none}
.segmented .opt[aria-pressed="true"],.seg[aria-pressed="true"]{background:var(--color-text);color:var(--color-text-inverse);box-shadow:none;border-color:var(--color-border-strong)}
.qty-chip{min-height:var(--touch-min);min-width:var(--touch-min);border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);font-size:var(--fs-ui-caption)}
.qty-chip:hover:not([aria-pressed="true"]){border-color:var(--color-border-strong);background:var(--color-surface)}
.qty-chip[aria-pressed="true"]{border-color:var(--color-border-strong);background:var(--color-text);color:var(--color-text-inverse)}

/* 7. Переключатель «Срочный заказ» — без цветной подложки, состояние цветом текста */
.switch{border:none;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);background:transparent;box-shadow:none;min-height:var(--touch-min)}
.switch:hover{border-color:var(--color-border-strong);background:transparent}
.switch-main{font-weight:700;color:var(--color-text)}
.switch-main small{font-weight:400;font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
.switch-state{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
.switch-track{background:var(--color-border-input-ui);border-radius:var(--radius-0)}
.switch-thumb{background:var(--color-bg);border-radius:var(--radius-0);box-shadow:none}
.switch[aria-checked="true"]{background:transparent;border-color:var(--color-border)}
.switch[aria-checked="true"] .switch-main,.switch[aria-checked="true"] .switch-main small{color:var(--color-text)}
.switch[aria-checked="true"] .switch-state{color:var(--color-accent);font-weight:700}
.switch[aria-checked="true"] .switch-track{background:var(--color-text)}

/* 8. Панели */
.workspace{gap:var(--space-5);padding:var(--space-5)}
.pane{background:var(--color-bg);border:1px solid var(--color-border-strong);box-shadow:none}
.pane-b{background:var(--color-surface);box-shadow:var(--shadow-print)}
.pane-head{background:transparent;border-bottom:1px solid var(--color-border-strong);padding:var(--space-5) var(--space-5) var(--space-4)}
.pane-a .pane-head{background:var(--color-surface)}
.pane-b .pane-head{background:var(--color-surface)}
.pane-title{font-size:var(--fs-ui-pane);line-height:1.1;letter-spacing:var(--ls-ui-h)}
.pane-meta{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
.pane-body{padding:var(--space-5)}
.section-title{font-size:var(--fs-ui-section);line-height:1.15;letter-spacing:var(--ls-ui-h)}


/* 8a. Десктоп: страница прокручивается целиком (как в макетах *-1440), смета/заказ «прилипает» справа */
@media (min-width:1121px){
  html,body{height:auto}
  body{display:block;min-height:100vh}
  .workspace{align-items:start}
  .pane,.pane-a .pane-body{overflow:visible}
  .pane-b{position:sticky;top:var(--space-5);max-height:calc(100vh - 2 * var(--space-5));overflow:auto;overscroll-behavior:contain}
  .pane-b .pane-body{overflow:visible}
  .add-bar{position:sticky;bottom:0;z-index:var(--z-sticky);background:var(--color-bg);border-top:1px solid var(--color-border-strong)}
}
.section-title{color:var(--color-text)}

/* 9. Итог: крупный PrintDisplay, оранжевый — только крупно */
.total-block{min-height:72px;flex-wrap:wrap}
.total-value{font:700 var(--fs-ui-total)/.95 var(--font-display);letter-spacing:var(--ls-ui-h);color:var(--color-accent);transition:opacity var(--dur-fast);white-space:nowrap}
.total-side{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui);white-space:nowrap}
.is-stale,.total-value.is-stale{opacity:var(--color-stale-opacity)}
[data-stable-block]{transition:opacity var(--dur-fast)}

/* 10. Расшифровка */
.sum-list{border:none;background:transparent}
.sum-row{background:transparent;border-bottom:1px solid var(--color-border);font-size:var(--fs-ui-caption);padding:6px 0}
.sum-row.is-muted{background:transparent;color:var(--color-text-muted-ui)}
.sum-row.is-grand{background:transparent;color:var(--color-text);border-top:1px solid var(--color-border-strong);border-bottom:1px solid var(--color-border-strong);font:700 var(--fs-ui-sum-total)/1.2 var(--font-display);padding-top:var(--space-3)}
.sum-row.is-grand>span:last-child{font-size:var(--fs-ui-sum-total);color:var(--color-accent)}
.sum-row.is-pay{background:transparent;color:var(--color-text);font-weight:700}

/* 11. Статусы и теги — цветом текста, без заливок и рамок */
.tag,.tag-urgent,.tag-discount,.tag-effect-on,.tag-effect-off,.tag-count,.quote-tag,.combo-badge{background:transparent;box-shadow:none;border:none;padding:0 2px;font-size:var(--fs-min);font-weight:700}
.tag-urgent{color:var(--color-accent)}
.tag-discount{color:var(--color-success)}
.tag-effect-on{color:var(--color-text)}
.icon-btn.is-discount[aria-pressed="true"]{background:transparent;border-color:var(--color-border-strong);color:var(--color-success)}
.supplier-note,.rk-note,.group-hint,.combo-note,.commercial-note{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui);background:transparent;border:none}

/* 12. Текст для клиента, пустые состояния, попап */
.quote{background:var(--color-bg);border:1px solid var(--color-border);font-size:var(--fs-ui-caption);box-shadow:none}
.empty{border:1px dashed var(--color-border-input-ui);background:transparent}
.empty h3{font:700 var(--fs-ui-h3)/1.2 var(--font-display)}
.empty p{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
.popover{background:var(--color-bg);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-print)}
.combo-list{background:var(--color-bg);border:1px solid var(--color-border-strong);box-shadow:var(--shadow-print)}
.preview{background:transparent;border:1px solid var(--color-border);box-shadow:none}

/* 13. Тост: fixed, успех/ошибка цветом */
.toast{background:var(--color-surface-inverse);color:var(--color-text-inverse);border:none;box-shadow:var(--shadow-print);font-size:var(--fs-ui-caption)}
.toast.is-error{background:var(--color-surface-inverse);color:var(--color-text-inverse)}
.toast-action{border:none;color:var(--color-text-inverse);text-decoration:underline;font-weight:700;background:transparent}
.toast-action:hover{background:transparent;color:var(--color-hover-accent)}

/* 14. Статус «Обновить» — под кнопкой проверки / версией цен (не под «Сохранить»), absolute */
.appbar-actions{position:relative}
.refresh-wrap{position:relative;display:inline-flex;align-items:center}
.refresh-status{position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:var(--z-popover);width:max-content;max-width:min(420px,70vw);box-sizing:border-box;padding:8px 12px;background:var(--color-bg);border:1px solid var(--color-border-strong);font-size:var(--fs-ui-caption);color:var(--color-text);box-shadow:var(--shadow-print);white-space:normal}
.refresh-status[hidden]{display:none}
.refresh-status.is-ok{color:var(--color-success)}
.refresh-status.is-warn{color:var(--color-warning)}
.refresh-status.is-error{color:var(--color-error)}
.refresh-status a{color:var(--color-text);text-decoration:underline;font-weight:700}

/* 15. Короткий текст о калькуляторе (SEO) */
.page-about{max-width:1560px;margin:0 auto;padding:var(--space-3) var(--space-5) var(--space-9);color:var(--color-text-muted-ui);font-size:var(--fs-ui-caption)}
.page-about h2{font:700 var(--fs-ui-h3)/1.2 var(--font-display);color:var(--color-text);margin-bottom:var(--space-2)}
.page-about p{max-width:80ch;margin-bottom:var(--space-2)}

/* 16. Липкая нижняя панель на телефоне. Выключается: <body data-sticky-bar="off"> */
.sticky-bar{display:none}
@media (max-width:800px){
  body:not([data-sticky-bar="off"]) .sticky-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky-bar);background:var(--color-bg);border-top:1px solid var(--color-border-strong);padding:10px 12px;box-shadow:var(--shadow-sticky)}
  body:not([data-sticky-bar="off"]){padding-bottom:76px}
  body:not([data-sticky-bar="off"]) .toast{bottom:88px}
  .sticky-label{font-size:var(--fs-min);letter-spacing:var(--ls-ui-caps);text-transform:uppercase;color:var(--color-text-muted-ui)}
  .sticky-value{font:700 var(--fs-ui-sticky)/.95 var(--font-display);color:var(--color-accent);white-space:nowrap;transition:opacity var(--dur-fast)}
  .sticky-bar .btn-primary{min-height:48px;flex:1;max-width:220px;gap:12px;padding:10px 14px}
  .sticky-bar .btn-primary::after{margin-left:12px}
}

/* 17. Мобильная раскладка по макетам *-390 */
@media (max-width:1100px){
  /* minmax(0,1fr): иначе 1fr = minmax(auto,1fr) и колонка раздувается контентом → горизонтальный скролл */
  .workspace{padding:0;gap:0;grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;min-width:0}
  .pane{border-left:none;border-right:none;border-top:none;min-width:0;max-width:100%}
  .pane-b{box-shadow:none}
}
@media (max-width:560px){
  .appbar h1{font-size:var(--fs-16)}
  .pane-head,.pane-body{padding:var(--space-4)}
  .pane-title{font-size:var(--fs-ui-section)}
  .total-value{font-size:var(--fs-ui-total-m)}
  .appbar-actions .btn{min-height:36px;padding:0 10px}
  .text-input{font-size:var(--fs-16)} /* без авто-зума iOS */
  .form-actions{flex-direction:row;flex-wrap:wrap}
}

@media print{.sticky-bar,.refresh-status,.page-about{display:none !important}}

/* 18. Узкая шапка ПВД: «⋯» → выпадающий список поверх контента (без сдвига потока) */
.appbar-more{display:none}
.appbar-menu{display:none}
.appbar-actions{position:relative}
@media (max-width:560px){
  .appbar{max-width:100%;min-width:0}
  .appbar-more{display:inline-flex;min-width:var(--touch-min);max-width:var(--touch-min);font-size:var(--fs-18);flex:0 0 auto}
  .appbar:has(.appbar-more) .appbar-nav,
  .appbar:has(.appbar-more) .appbar-divider,
  .appbar:has(.appbar-more) #refreshCalcBtn,
  .appbar:has(.appbar-more) #savesBtn,
  .appbar:has(.appbar-more) #staffEntryBtn{display:none}
  /* ряд шапки ≤100%: версия сжимается, без nowrap-переполнения (раньше width:auto+Обновить → 440px и scrollX) */
  .appbar:has(.appbar-more) .appbar-actions{
    /* width:auto — не 100%: иначе actions=ширина шапки стартует после .price-version → overflow */
    width:auto;max-width:100%;margin-left:auto;flex-wrap:nowrap;position:relative;
    flex:0 1 auto;min-width:0;box-sizing:border-box;gap:8px
  }
  .appbar:has(.appbar-more) .price-version,
  .appbar:has(.appbar-more) .price-version-tag{
    flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .appbar:has(.appbar-more) #saveBtn{flex:0 1 auto;min-width:0}
  .appbar-menu{
    display:flex;flex-direction:column;
    position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:var(--z-popover);
    width:max-content;min-width:180px;max-width:min(220px, calc(100vw - 16px));
    background:var(--color-surface);border:1px solid var(--color-border-strong);
    box-shadow:var(--shadow-print);padding:0;box-sizing:border-box
  }
  .appbar-menu[hidden]{display:none !important}
  /* плашка статуса: якорь — правый край шапки, не схлопнутый refresh-wrap */
  .appbar:has(.appbar-more) .refresh-wrap{position:static}
  .appbar:has(.appbar-more) .refresh-status{right:0;left:auto;max-width:min(420px,calc(100vw - 16px))}
}
#refreshCalcBtn{color:var(--color-text)}
#refreshCalcBtn.is-new-price,
#refreshCalcBtn.is-new-price:hover{color:var(--color-accent-text)}
#refreshCalcBtn.btn-quiet:hover{color:var(--color-hover-accent)}

/* 18b. Приглушение ВСЕХ денежных цифр заказа на время проверки цен (высота та же) */
.is-money-stale .total-value,
.is-money-stale .total-side,
.is-money-stale .sum-row > span:last-child,
.is-money-stale .pos-sum,
.is-money-stale .pos-price,
.is-money-stale .pos-sum-values,
.is-money-stale .member-sum,
.is-money-stale .combo-total,
.is-money-stale .sticky-value,
.is-money-stale #addBarCount,
.is-money-stale .mrow-price b{
  opacity:var(--color-stale-opacity)
}
.is-stale,.total-value.is-stale{opacity:var(--color-stale-opacity)}

/* 18c. Скидка/предоплата ПВД без карточек; НДС в обоих калькуляторах — без рамки/фона, 1px line */
.controls-stack{display:flex;flex-direction:column;gap:0}
.control-block{padding:12px 0;border-bottom:1px solid var(--color-border);background:transparent;border-left:none;border-right:none;border-top:none;border-radius:0}
.control-block .field-label{margin-bottom:8px}
.controls-stack .tax-panel,
#taxSection .tax-panel{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 0;margin:0;
  border:none;border-bottom:1px solid var(--color-border);border-radius:0;
  background:transparent;box-shadow:none
}
.controls-stack .tax-panel .field-label,
#taxSection .tax-panel .field-label{margin:0}
.controls-stack .tax-panel .segmented,
#taxSection .tax-panel .segmented{width:auto;max-width:100%}
.controls-stack .tax-panel-rate,
#taxSection .tax-panel-rate{display:flex;align-items:center;gap:6px}
.controls-stack .tax-panel-rate .text-input,
#taxSection .tax-panel-rate .text-input{width:64px;min-height:32px;text-align:right;font-variant-numeric:tabular-nums}
.controls-stack .tax-panel-rate span,
#taxSection .tax-panel-rate span{font-size:var(--fs-ui-caption);color:var(--color-text-muted-ui)}
@media (max-width:560px){
  .controls-stack .tax-panel,
  #taxSection .tax-panel{grid-template-columns:1fr;align-items:stretch}
}

/* «Вход для сотрудников» — поповер под шапкой поверх контента: открытие/закрытие не сдвигает страницу (stable-blocks) */
.staff-desk{position:fixed;top:calc(var(--appbar-h) + var(--space-1));right:var(--space-3);left:auto;z-index:calc(var(--z-popover) + 6);
  width:min(480px,calc(100vw - 2 * var(--space-3)));max-height:calc(100vh - var(--appbar-h) - 2 * var(--space-3));overflow:auto;
  margin:0;box-sizing:border-box;background:var(--color-bg);box-shadow:var(--shadow-print)}
.staff-desk input{width:100%;min-width:0;box-sizing:border-box}
.staff-desk label{min-width:0}
/* «Для сотрудников» в шапке 1440 — приглушённый AA-текст (токен из tokens.css) */
.staff-entry,
#staffEntryBtn.staff-entry{
  color:var(--color-text-muted-aa);opacity:1;font-size:var(--fs-ui-caption)
}
.staff-entry:hover,
#staffEntryBtn.staff-entry:hover{color:var(--color-hover-accent);opacity:1}

/* Точка новой версии цен у «⋯» (только когда is-new-price) */
.appbar-more{position:relative}
.appbar-more.is-new-price::after{
  content:"";position:absolute;top:5px;right:5px;
  width:8px;height:8px;border-radius:var(--radius-round);
  background:var(--color-accent);pointer-events:none
}

/* 18d. «Чей материал» — чипы по ширине текста (не на всю строку) */
[data-group="materialSource"].options{display:flex;flex-wrap:wrap;gap:8px}
[data-group="materialSource"].options .opt{flex:0 0 auto;width:auto}

/* 19. Ошибка ввода: рамка и текст поля --color-error (и в фокусе); предпросмотр без цветной рамки, ошибка — цветом заголовка */
.field.has-error .text-input,.field.has-error .text-input:focus{border-color:var(--color-error);outline-color:var(--color-error)}
.preview.is-error{border-color:var(--color-border);background:transparent}
.preview.is-error .preview-head{color:var(--color-error)}

/* 20. Телефон: итог уже в липкой панели — шапки панелей не липнут и не перекрывают контент; шапка сайта не липнет */
@media (max-width:1100px){ .pane-head{position:static} }
/* строка «НДС … сумма» в тексте для клиента (в исходнике крафта не была оформлена — слиплось «5 %202 ₽») */
.quote-sumrow{display:flex;justify-content:space-between;gap:var(--space-3)}

/* Итого в превью сметы крафта: класс вместо прежнего inline 15 px */
.quote-total.is-order-total{border-top-width:2px;font-size:var(--fs-15)}

/* COMPACT-FIX: три правки для Риверы — плотность контролов, пин «Итого с НДС», контраст Комбинация/галочки.
   Шрифты, цвета, радиусы и характер квадратных плашек не меняем. */

/* A. Десктоп: компактные паддинги кнопок/чипов (высоты уже из tokens --touch-min/--ui-input-h/--btn-min-h) */
@media (pointer: fine) and (min-width: 801px) {
  .btn {
    padding: 6px 12px;
  }
  .btn-primary {
    padding: 8px 14px;
    gap: 12px;
  }
  .btn-primary::after {
    margin-left: 12px;
  }
  .opt, .chip, .opt-toggle {
    padding: 4px 10px;
  }
  .qty-chip {
    padding: 0 8px;
  }
  .switch {
    padding: 4px 10px 4px 12px;
  }
  /* плотнее поля формы и панели — примерно на треть */
  .workspace {
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .pane-head {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
  .pane-body {
    padding: var(--space-3);
  }
  .field {
    margin-bottom: var(--space-3);
  }
  .total-block {
    min-height: 0;
  }
  /* на десктопе нижняя sticky-bar не показывается (уже display:none >800),
     add-bar в форме не липнет к низу экрана и не перекрывает расчёт */
  .add-bar {
    position: static;
  }
}

/* B. Десктоп ≥1121: .pane-body скроллится; «Итого с НДС» (summary) липнет к низу панели.
   padding-bottom панели обнуляем — иначе под липким «Итого» остаётся щель padding, через
   которую проступают позиции (тираж-чипы). Внутренний отступ переносим на #summarySection;
   quote получает такой же нижний inset, когда прокручивают ниже sticky. */
@media (min-width: 1121px) {
  .pane-b {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pane-b .pane-head {
    flex: 0 0 auto;
  }
  .pane-b .pane-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  .pane-b #summarySection {
    margin-top: auto; /* при коротком заказе — к низу панели */
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-strong);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .pane-b .sum-row.is-grand {
    background: var(--color-surface);
  }
  .pane-b #quoteSection {
    padding-bottom: var(--space-3);
  }
}

/* C. Телефон: sticky-bar — итог + кнопка 44; при длинной сумме (7–8 знаков)
   flex-wrap, чтобы кнопка не вылезала за 360 (без уменьшения шрифта) */
@media (max-width: 800px) {
  body:not([data-sticky-bar="off"]) .sticky-bar {
    gap: 8px;
    padding: 6px 10px;
    min-height: 0;
    max-height: none; /* wrap → 2 ряда при узкой ширине */
    align-items: center;
    flex-wrap: wrap;
  }
  body:not([data-sticky-bar="off"]) {
    /* высота панели → --sticky-bar-h (ResizeObserver в calc-page.js) */
    padding-bottom: calc(var(--sticky-bar-h, 64px) + 8px);
  }
  body:not([data-sticky-bar="off"]) .toast {
    bottom: calc(var(--sticky-bar-h, 64px) + 16px);
  }
  .sticky-bar > div {
    min-width: 0;
    flex: 1 1 auto;
  }
  .sticky-bar .btn-primary {
    min-height: 44px;
    max-height: 44px;
    padding: 0 12px;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
  }
  .sticky-bar .btn-primary::after {
    margin-left: 8px;
  }
  /* .sticky-value: шрифт не трогаем (--fs-ui-sticky); nowrap уже задан выше */
}

/* D. Контраст: «Комбинация» и белые галочки на бежевом */
.combo-badge {
  color: var(--color-text-muted-aa) !important;
  background: transparent;
  border: none;
}
.group-pick,
.pos-pick {
  border: 1.5px solid var(--color-border-strong) !important;
  background: var(--color-bg);
}
.group-pick[aria-checked="true"],
.pos.is-picked .pos-pick {
  border-color: var(--color-border-strong) !important;
  background: var(--color-text);
  color: var(--color-text-inverse);
}


/* MERGE-FIX (3) НЕ сделан: Дизайнер compact/spec-for-coder.md:50 —
   «Не делать: вложенные рамки комбинации → разделители». Оставляем рамки как в r4. */

/* MERGE-FIX: меню «⋯» выше плашки; при открытом меню плашку прячем */
.refresh-status{z-index:var(--z-popover)}
.appbar-menu{z-index:calc(var(--z-popover) + 5)}
.appbar:has(#appbarMoreBtn[aria-expanded="true"]) .refresh-status{display:none !important}

/* Вариант В (Дизайнер mono/spec.md): моно только на цифрах тиража / ₽/шт и значении «Итого с НДС» */
.mono-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:var(--ls-mono);
  line-height:var(--lh-mono);
  word-spacing:var(--mono-word-spacing);
  color:var(--color-text);
}
.mono-num.is-unit{font-weight:600}
.qty-unit{white-space:nowrap}
.sum-row.is-grand>span:last-child,
.quote-total.is-order-total>span:last-child{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:var(--ls-mono);
  word-spacing:var(--mono-word-spacing);
  color:var(--color-accent);
  white-space:nowrap;
}
.sticky-value{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  word-spacing:var(--mono-word-spacing);
  white-space:nowrap;
}
/* money() в .pos-sum/.mrow-price/.run-sum/.cell-sum — PrintText, не mono:
   word-spacing:var(--mono-word-spacing) сжимал NBSP (~4.5→0.3px) → визуально «79800₽».
   Метрика пробела только у .mono-num / .sum-row.is-grand / .sticky-value (выше). */

/* APPBAR-ONEROW: 48px одна строка на 1440 и 1280; ссылки → «⋯» при нехватке места.
   БЛОКЕР 390: раньше .appbar-actions{flex:0 0 auto} (ниже) + width:100% из ≤560
   ставили actions (=366px) справа от .price-version (kraft, не .price-version-tag) →
   scrollWidth 610. Чиним: на десктопе actions не сжимаются; на ≤560 — min-width:0,
   width:auto, и .price-version/.price-version-tag сжимаются с ellipsis. */
.appbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:561px){
  .appbar-actions{flex:0 0 auto;margin-left:auto}
}
/* «⋯» всегда последняя справа в .appbar-actions (ПВД: Мои расчёты / Для сотрудников левее) */
.appbar-actions{display:flex;align-items:center;flex-wrap:nowrap}
.appbar-actions > #saveBtn{order:1}
.appbar-actions > #savesBtn{order:2}
.appbar-actions > #staffEntryBtn{order:3}
.appbar-actions > .price-version-tag,
.appbar-actions > .price-version{order:4}
.appbar-actions > .appbar-more{order:90}
.appbar-actions > .appbar-menu{order:91}
.appbar-actions > #savesPanel{order:92}
/* пункты меню «⋯»: один вид на любой ширине (раньше стили были только ≤560) */
.appbar-menu-item{
  display:flex;align-items:center;min-height:var(--touch-min);padding:0 var(--space-4);
  font:400 var(--fs-ui-caption)/1.3 var(--font-text);color:var(--color-text);
  text-decoration:none;border:none;border-bottom:1px solid var(--color-border);
  background:transparent;width:100%;text-align:left;cursor:pointer;box-sizing:border-box
}
.appbar-menu-item:last-child{border-bottom:none}
.appbar-menu-item:hover{background:var(--color-surface-sunken);color:var(--color-hover-accent)}
.appbar-menu-item.is-new-price{color:var(--color-accent-text)}
/* пункты меню ≥ touch-min на любом брейкпоинте */
.appbar-menu-item{min-height:var(--touch-min);white-space:nowrap}
/* текущая страница в меню шапки: тот же пункт, цвет текста + подчёркивание (без кнопок/бейджей) */
.appbar-link[aria-current="page"],.appbar-menu-item[aria-current="page"]{color:var(--color-text);text-decoration:underline;text-underline-offset:var(--space-1)}

@media (max-width:1399px){
  /* калькуляторы (есть #saveBtn): ссылки → «⋯» с 1280 — места мало из‑за Сохранить */
  .appbar-more{display:inline-flex !important;min-width:var(--touch-min);max-width:var(--touch-min);font-size:var(--fs-18);flex:0 0 auto}
  body:has(#saveBtn) .appbar:has(.appbar-more) .appbar-nav,
  body:has(#saveBtn) .appbar:has(.appbar-more) .appbar-divider{display:none !important}
  .appbar-menu{
    display:flex;flex-direction:column;
    position:absolute;top:calc(100% + 6px);right:0;left:auto;z-index:calc(var(--z-popover) + 5);
    width:max-content;min-width:180px;max-width:min(220px, calc(100vw - 16px));
    background:var(--color-surface);border:1px solid var(--color-border-strong);
    box-shadow:var(--shadow-print);padding:0;box-sizing:border-box
  }
  .appbar-menu[hidden]{display:none !important}
}
/* info / страницы без #saveBtn: ссылки прячем только когда реально тесно */
@media (max-width:900px){
  body:not(:has(#saveBtn)) .appbar:has(.appbar-more) .appbar-nav,
  body:not(:has(#saveBtn)) .appbar:has(.appbar-more) .appbar-divider{display:none !important}
  body:not(:has(#saveBtn)) .appbar-more{display:inline-flex !important;min-width:var(--touch-min);max-width:var(--touch-min);font-size:var(--fs-18);flex:0 0 auto}
}
@media (min-width:901px){
  body:not(:has(#saveBtn)) .appbar-more{display:none !important}
  body:not(:has(#saveBtn)) .appbar-menu{display:none !important}
  body:not(:has(#saveBtn)) .appbar-nav{display:flex !important}
  body:not(:has(#saveBtn)) .appbar-divider{display:inline-block !important}
}
@media (max-width:560px){
  .appbar:has(.appbar-more) .price-version,
  .appbar:has(.appbar-more) .price-version-tag{
    flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%
  }
  .appbar:has(.appbar-more) .appbar-actions{
    flex:0 1 auto;width:auto;max-width:100%;min-width:0;margin-left:auto;
    box-sizing:border-box
  }
  .appbar:has(.appbar-more) #saveBtn{
    flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
}
@media (min-width:1400px){
  .appbar-more{display:none !important}
  .appbar-menu{display:none !important}
}

/* Бренд «Логотип 27» (.appbar-link.is-brand) остаётся слева, когда остальные ссылки шапки ушли в «⋯».
   Общее правило: те же брейкпоинты, что и у «⋯» выше (калькуляторы ≤1280, страницы без #saveBtn ≤900, все ≤560). */
@media (max-width:1399px){
  body:has(#saveBtn) .appbar:has(.appbar-more) .appbar-nav:has(.is-brand){display:flex !important}
  body:has(#saveBtn) .appbar:has(.appbar-more) .appbar-nav:has(.is-brand) > .appbar-link:not(.is-brand){display:none !important}
}
@media (max-width:900px){
  body:not(:has(#saveBtn)) .appbar:has(.appbar-more) .appbar-nav:has(.is-brand){display:flex !important}
  body:not(:has(#saveBtn)) .appbar:has(.appbar-more) .appbar-nav:has(.is-brand) > .appbar-link:not(.is-brand){display:none !important}
}
/* APPBAR-NO-CLIP (решение Дизайнера, r2): в шапке калькуляторов ничего не сжимается и не обрезается —
   что не помещается, уходит в «⋯». Два порога, общие для обеих страниц (по замеру, см. test_seo):
   ≥1400px — ссылки в строке; 960…1399px — ссылки в «⋯»; ≤959px — в «⋯» также версия цен, «Мои расчёты»,
   «Обновить», «Для сотрудников»; слева короткое название, кнопка «Сохранить» (aria-label полный). */
.appbar > *,.appbar-actions > *{flex-shrink:0 !important}
.appbar h1,.appbar .price-version,.appbar .price-version-tag,.appbar-actions > .btn{
  overflow:visible !important;text-overflow:clip !important;white-space:nowrap !important;min-width:auto !important;max-width:none !important}
.appbar-actions{flex:0 0 auto !important;margin-left:auto}
.appbar-title-short,.btn-label-short{display:none}
.appbar-menu-info,.appbar-menu [data-menu-narrow]{display:none !important}
.appbar-menu{max-width:calc(100vw - 2 * var(--space-3)) !important}
.appbar-menu-info{margin:0;padding:var(--space-3) var(--space-4);font:400 var(--fs-ui-caption)/1.3 var(--font-text);
  color:var(--color-text-muted-ui);white-space:nowrap;cursor:default;border-bottom:1px solid var(--color-border)}
.appbar-menu-sep{margin:0;border:0;border-top:1px solid var(--color-border-strong);height:0}
/* подзаголовок калькулятора — первая строка контента под шапкой */
.page-lead{flex:0 0 auto;width:100%;max-width:1560px;margin:0 auto;padding:var(--space-3) var(--space-5) 0;box-sizing:border-box;
  font-size:var(--fs-ui-body);line-height:1.45;color:var(--color-text-muted-ui)}
@media (max-width:560px){ .page-lead{padding:var(--space-3) var(--space-3) 0} }
@media (max-width:959px){
  body:has(#saveBtn) .appbar:has(.appbar-more) .price-version,
  body:has(#saveBtn) .appbar:has(.appbar-more) .price-version-tag,
  body:has(#saveBtn) .appbar:has(.appbar-more) #refreshCalcBtn,
  body:has(#saveBtn) .appbar:has(.appbar-more) #savesBtn,
  body:has(#saveBtn) .appbar:has(.appbar-more) #staffEntryBtn{display:none !important}
  body:has(#saveBtn) .appbar:has(.appbar-more) .refresh-wrap{position:static;margin-left:calc(-1 * var(--space-2))}
  body:has(#saveBtn) .appbar:has(.appbar-more) .refresh-status{right:0;left:auto;max-width:min(420px,calc(100vw - 16px))}
  .appbar-menu-info{display:block !important}
  .appbar-menu [data-menu-narrow]{display:flex !important}
  .appbar-menu hr[data-menu-narrow]{display:block !important}
  .appbar h1:has(.appbar-title-short) .appbar-title-full{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .appbar h1 .appbar-title-short{display:inline}
  #saveBtn:has(.btn-label-short) .btn-label-full{display:none}
  #saveBtn .btn-label-short{display:inline}
}

/* PRIMARY-DISABLED-END: appearance:none снимает UA-оверлей disabled у button;
   токены disabled без opacity; !important — против UA light-dark(rgba…) */
.btn.btn-primary[disabled],.btn.btn-primary:disabled,.btn.btn-primary.is-disabled,.btn.btn-primary[aria-disabled="true"]{
  appearance:none;-webkit-appearance:none;
  background:var(--color-disabled-bg) !important;
  background-color:var(--color-disabled-bg) !important;
  color:var(--color-text-muted-ui) !important;
  border-color:var(--color-border) !important;
  cursor:not-allowed;opacity:1;box-shadow:none;transform:none
}