/* Светлая палитра - на всём сайте по умолчанию и в тёмной теме на
     «светлых островках»: печатный лист (#printArea - печать и PDF всегда
     светлые), чертежи (по указанию пользователя - на светлой подложке, как
     на бумаге) и общий вид ящика (фото на белом фоне). Тёмная палитра -
     ниже, :root[data-theme="dark"] (тему ставит js/common-settings.js). */
  :root,
  :root[data-theme="dark"] #printArea,
  :root[data-theme="dark"] #boardTables .diagram-slot,
  :root[data-theme="dark"] .box-view{
    /* Палитра и токены - "бумажная обсерватория" (см. превью-артефакт,
       одобренный пользователем): почти ахроматичный холст + один оттенок
       коричневого (--accent, Umber) вместо синих акцентов референса -
       заливка CTA-кнопки и все остальные акцентные касания (фокус, ссылки,
       чекбоксы, hover-обводки). Более светлый --accent2 (Amber)
       использовался раньше для этих "остальных" случаев - полностью убран
       по замечанию пользователя ("снеси старый цвет полностью"), в разметке
       и в палитре больше не встречается. Тени убраны везде
       (--shadow-sm/--shadow-lg = none) - элевация через обводки-волоски и
       тонировку фона, не через box-shadow.
       Text/border palette (Midnight Ink/Slate/Frost Border) - как в самом
       референсе, без изменений (правки пользователя касались только фонов и
       синих акцентов, не текста/обводок). */
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --panel-hover: #FAF6EF;
    --table-header-bg: #F6F0E6;
    --ink: #091135;
    --ink-soft: #36394A;
    --rule: #E1E9F0;
    --border-input: #E1E9F0;
    --border-btn: #E1E9F0;
    --secondary-hover: #F6F0E6;
    --accent: #8A4B26;
    --accent-hover: #6E3B1C;
    --accent-wash: #F1E4D8;
    --manual-ink: #5A2A10; /* тёмно-коричневый - значения, введённые вручную (см. #boardTables td[data-user-edited]) */
    --ok: #2E7D32;
    --warn: #B7791F;
    --warn-wash: #FBF3E4;
    --error: #c23b2c;
    --shadow-sm: none;
    --shadow-lg: none;
    --switch-bg: #EEF0F4;
    --switch-thumb: #FFFFFF;
    --overlay: rgba(9,17,53,.45);    /* затемнение под окнами */
  }
  /* Тёмная тема (кнопка «Настройки» вверху страницы): те же токены.
     По указанию пользователя («цвета не нравятся, сделай поприятнее») -
     тёплый графит вместо холодного серого: фоны с лёгким коричневым
     оттенком в тон акценту, мягкий тёплый белый текст вместо чисто белого,
     акцент - тот же коричневый, светлее, чтобы читался на тёмном.
     color-scheme - тёмные системные элементы (галочки, полосы прокрутки). */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg: #151311;
    --panel: #1D1A17;
    --panel-hover: #24201C;
    --table-header-bg: #27221E;
    --ink: #ECE5DC;
    --ink-soft: #A69C91;
    --rule: #2F2A25;
    --border-input: #3D3630;
    --border-btn: #3D3630;
    --secondary-hover: #2A2520;
    --accent: #C17F4A;
    --accent-hover: #D08F5A;
    --accent-wash: #2B231C;
    --manual-ink: #F0C29A;
    --ok: #6CBF78;
    --warn: #E0A955;
    --warn-wash: #2B2418;
    --error: #EB7262;
    --switch-bg: #151311;
    --switch-thumb: #3A332D;
    --overlay: rgba(8,6,4,.65);
  }
  /* Светлые островки в тёмной теме: свой (светлый) фон и текст. Чтобы не
     слепили на тёмном фоне - чуть приглушены до тёплого «бумажного» тона
     (только на экране; печатный лист #printArea не затрагивается). */
  :root[data-theme="dark"] #boardTables .diagram-slot,
  :root[data-theme="dark"] .box-view,
  :root[data-theme="dark"] .type-image{filter:brightness(.86) sepia(.08);}
  /* Подложка чертежа чуть шире слота (box-shadow, раскладку не меняет) -
     подписи размеров стоят у самого края слота. */
  :root[data-theme="dark"] #boardTables .diagram-slot{
    color-scheme:light;
    background:var(--panel);
    color:var(--ink);
    border-radius:12px;
    box-shadow:0 0 0 8px var(--panel);
  }
  *{box-sizing:border-box;}
  html{overflow-x:hidden;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:16px;
    letter-spacing:.015em;
    line-height:1.35;
    overflow-x:hidden;
  }
  /* Ссылки - коричневые (по указанию пользователя), без синего цвета
     браузера. :where - самая низкая специфичность: свои цвета ссылок
     (верхняя панель, подвал, кнопки-ссылки) остаются как есть. */
  :where(a){color:var(--accent);}
  :where(a:hover){color:var(--accent-hover);}
  /* 1080px - наименьшая ширина, при которой заголовки колонок таблиц деталей
     («ТОЛЩИНА» и т.п.) помещаются в одну строку (по указанию пользователя). */
  .wrap{max-width:1080px;margin:0 auto;padding:32px 20px 80px;}

  /* ============ Верхняя панель сайта и настройки (js/common-settings.js) ============
     Панель («чердак», по указанию пользователя - отдельно от формы
     расчёта) на всю ширину окна: логотип «Тара+», ссылки «Назад / Главная»
     (перенесены из .top-nav - сама строка скрыта), справа кнопка
     «Настройки» (значок и подпись). Панель создаёт JS, место под неё
     зарезервировано заранее (body padding-top) - страница не прыгает.
     Только на экране: в печати видна одна #printArea. Окно настроек -
     большое: шапка, слева разделы, справа строки; на телефоне - на весь экран. */
  :root{--topbar-h:56px;}
  @media screen{
    body{padding-top:var(--topbar-h);}
  }
  /* .top-nav в разметке страниц - только источник ссылок «Назад / Главная»
     для панели (страницы выбора ГОСТа/типа и калькуляторы; на главной их нет). */
  .top-nav{display:none;}
  .site-topbar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:var(--topbar-h);
    background:var(--panel-hover);
    border-bottom:1px solid var(--rule);
    z-index:30;
  }
  .site-topbar-inner{
    max-width:1080px;
    height:100%;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    gap:24px;
  }
  .site-brand{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    letter-spacing:.01em;
  }
  .site-brand img{width:22px;height:22px;display:block;}
  .site-topbar-links{display:flex;gap:16px;}
  .site-topbar-links a{font-size:13px;font-weight:500;color:var(--ink-soft);text-decoration:none;}
  .site-topbar-links a:hover{color:var(--accent);}
  .site-settings-btn{
    margin:0 0 0 auto;
    height:34px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:var(--panel);
    color:var(--ink-soft);
    border:1px solid var(--rule);
    border-radius:8px;
    font-size:13px;
    font-weight:500;
    box-shadow:none;
    transition:color .15s ease, border-color .15s ease;
  }
  .site-settings-btn:hover{background:var(--panel);border-color:var(--accent);color:var(--accent);}
  .site-settings-btn svg{width:17px;height:17px;flex:0 0 auto;}
  @media screen and (max-width:480px){
    .site-topbar-inner{gap:16px;}
    .site-brand span{display:none;}
  }

  .site-settings-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--overlay);
    animation:site-settings-fade .18s ease;
  }
  .site-settings-overlay[hidden]{display:none;}
  .site-settings-dialog{
    width:min(860px,100%);
    height:min(600px,100%);
    display:flex;
    flex-direction:column;
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--rule);
    border-radius:16px;
    overflow:hidden;
    animation:site-settings-pop .2s ease;
  }
  @keyframes site-settings-fade{from{opacity:0;}}
  @keyframes site-settings-pop{from{opacity:0;transform:translateY(8px) scale(.985);}}
  .site-settings-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px 18px 28px;
    border-bottom:1px solid var(--rule);
  }
  .site-settings-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:0;}
  .site-settings-close{
    width:40px;height:40px;margin:0;padding:0;
    display:flex;align-items:center;justify-content:center;
    background:transparent;color:var(--ink-soft);
    border-radius:10px;box-shadow:none;
  }
  .site-settings-close:hover{background:var(--secondary-hover);color:var(--ink);}
  .site-settings-content{flex:1;display:flex;min-height:0;}
  .site-settings-nav{
    flex:0 0 220px;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 12px;
    border-right:1px solid var(--rule);
  }
  .site-settings-nav-item{
    padding:10px 14px;
    border-radius:10px;
    color:var(--ink-soft);
    font-size:15px;
    font-weight:500;
    text-decoration:none;
  }
  .site-settings-nav-item:hover{color:var(--ink);}
  .site-settings-nav-item.active{background:var(--secondary-hover);color:var(--ink);}
  .site-settings-sections{flex:1;min-width:0;overflow-y:auto;padding:24px 32px;}
  /* Справа - только выбранный слева раздел (на телефоне списка разделов
     нет - там разделы идут подряд). */
  @media screen and (min-width:641px){
    .site-settings-section:not(.active){display:none;}
  }
  .site-settings-section h3{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;}
  .site-settings-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 0;
    border-bottom:1px solid var(--rule);
  }
  .site-settings-row-title{font-size:16px;font-weight:500;color:var(--ink);}
  /* плитка внутри раздела настроек (ГОСТ в «Пиломатериале в наличии» и т.п.) -
     как карточка внутри типа */
  .site-settings-tile{margin-top:16px;padding:18px 22px 4px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-sm);}
  .site-settings-tile-title{padding-bottom:10px;border-bottom:1px solid var(--rule);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
  .site-settings-tile .site-settings-row:last-child{border-bottom:none;}
  .site-calc-param .jump-slider{flex:1;}
  /* подпись в окне шестерёнки: значения свои у типа или общие */
  .modal-note{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft);}
  .site-settings-row-hint{margin-top:4px;font-size:13px;font-weight:400;line-height:1.45;color:var(--ink-soft);}
  .site-settings-row-control{flex:0 0 auto;}
  /* Строка с крупным элементом (список общих толщин) - элемент под текстом,
     во всю ширину. */
  .site-settings-row-wide{flex-direction:column;align-items:stretch;gap:14px;}
  @media screen and (max-width:640px){
    .site-settings-overlay{padding:0;}
    .site-settings-dialog{width:100%;height:100%;border-radius:0;border:none;}
    .site-settings-head{padding:14px 12px 14px 20px;}
    .site-settings-nav{display:none;}
    .site-settings-sections{padding:16px 20px;}
    .site-settings-row{flex-direction:column;align-items:flex-start;gap:14px;}
  }

  /* Переключатель темы (по образцу пользователя): капсула с тремя значками,
     под выбранным - ползунок, плавно переезжающий к новому (--i - номер
     выбранного, ставит common-settings.js). */
  .theme-switch{
    --i:0;
    position:relative;
    display:inline-flex;
    padding:4px;
    border-radius:14px;
    background:var(--switch-bg);
    border:1px solid var(--rule);
  }
  .theme-switch-thumb{
    position:absolute;
    top:4px;
    left:4px;
    width:52px;
    height:42px;
    border-radius:10px;
    background:var(--switch-thumb);
    box-shadow:0 1px 3px rgba(9,17,53,.18);
    transform:translateX(calc(var(--i) * 100%));
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .theme-switch-option{
    position:relative;
    z-index:1;
    width:52px;
    height:42px;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:var(--ink-soft);
    border-radius:10px;
    box-shadow:none;
    transition:color .2s ease;
  }
  .theme-switch-option:hover{background:transparent;color:var(--ink);}
  .theme-switch-option[aria-checked="true"]{color:var(--ink);}
  .theme-switch-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  @media (prefers-reduced-motion:reduce){
    .theme-switch-thumb, .site-settings-overlay, .site-settings-dialog{transition:none;animation:none;}
  }

  header{
    border-bottom:1px solid var(--rule);
    padding-bottom:20px;
    margin-bottom:32px;
  }
  h1{
    font-size:30px;
    margin:0 0 6px;
    color:var(--ink);
    font-weight:600;
  }
  .subtitle{
    font-size:14px;
    color:var(--ink-soft);
    font-family:inherit;
  }

  .card{
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:12px;
    padding:32px;
    margin-bottom:24px;
    box-shadow:var(--shadow-sm);
  }
  .card h2{
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--ink);
    margin:0 0 16px;
    padding-bottom:10px;
    border-bottom:1px solid var(--rule);
  }

  .inputs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  /* "screen and" на всех адаптивных breakpoint'ах ниже (640/700/480px) -
     без него эти правила совпадали бы с теми же именами классов и внутри
     печатной области (#printArea .spec-row-diagram и т.п. используют те
     же общие имена классов, что и экранная вёрстка) - ширина печатного
     листа A4 (~733px по расчёту в common-print.js) достаточно близка к
     700px, и на части систем (другая трактовка @page margin/DPI при
     печати) реально может просесть ниже порога, из-за чего чертежи в
     печати непредсказуемо переключались на мобильную раскладку (в столбец,
     на всю ширину листа) - по репорту пользователя. */
  @media screen and (max-width:640px){
    .inputs{grid-template-columns:repeat(2,1fr);}
  }
  label{
    display:block;
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  input[type=number]{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--border-input);
    border-radius:8px;
    font-family:inherit;
    font-size:16px;
    background:var(--panel);
    color:var(--ink);
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  input[type=number]:focus{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-color:var(--accent);
  }

  .comment-field{
    width:100%;
    min-height:110px;
    padding:14px 16px;
    border:1px solid var(--border-input);
    border-radius:8px;
    font-family:inherit;
    font-size:15px;
    line-height:1.5;
    background:var(--panel);
    color:var(--ink);
    resize:vertical;
    box-sizing:border-box;
  }
  .comment-field:focus{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-color:var(--accent);
  }
  .comment-field::placeholder{
    color:var(--ink-soft);
  }

  button{
    margin-top:20px;
    background:var(--accent);
    color:#ffffff;
    border:none;
    padding:12px 24px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    letter-spacing:.015em;
    cursor:pointer;
    border-radius:8px;
    box-shadow:var(--shadow-sm);
    transition:background-color .15s ease;
  }
  button:hover{background:var(--accent-hover);}

  /* Secondary - второстепенные действия (см. design.md: белая, рамка, hover-фон) */
  .btn-secondary{
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--border-btn);
    box-shadow:none;
  }
  .btn-secondary:hover{background:var(--secondary-hover);}

  /* Обёртка вокруг трёх взаимоисключающих статусов расчёта (calcCheck/
     calcOutdated/calcError - JS переключает между ними класс .active, см.
     setCalcStatus() в common-calc-state.js). Все три - в одной grid-ячейке
     (stacking) и visibility:hidden вместо display:none, когда не активны -
     в отличие от display:none, visibility:hidden всё равно занимает место
     в раскладке, поэтому ширина обёртки всегда равна ширине самого
     широкого из трёх текстов, даже когда ни один не показан (до первого
     расчёта) - кнопка «Печать» не «прыгает» вправо после первого расчёта,
     то же расстояние зарезервировано с самого начала - по замечанию
     пользователя. */
  .calc-status{
    position:relative;
    display:inline-grid;
    margin-left:14px;
    vertical-align:middle;
  }
  .calc-status > span{
    grid-column:1;
    grid-row:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    visibility:hidden;
  }
  .calc-status > span.active{visibility:visible;}

  .calc-outdated{color:var(--warn);}
  .calc-check{color:var(--ok);}
  .calc-error{color:var(--error);}
  /* Значки статусов - SVG вместо символов Юникода (✓/⚠/✗): те менялись по
     начертанию от шрифта к шрифту и на Windows 7 частично не отображались
     (тофу-прямоугольники) - по отчёту пользователя. SVG рисуется одинаково
     везде и выглядит строже/единообразнее для всех трёх статусов сразу. */
  .calc-check .mark, .calc-outdated .mark, .calc-error .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
    width:20px;height:20px;
    border-radius:50%;
    margin-right:6px;
  }
  .calc-check .mark{background:var(--ok);}
  .calc-outdated .mark{background:var(--warn);}
  .calc-error .mark{background:var(--error);}

  .print-btn{
    margin-top:20px;
    margin-left:12px;
    padding:12px 22px;
    font-size:13px;
  }
  /* Значки печати/PDF на кнопках - тоже SVG (тот же повод, что и .mark выше:
     эмодзи-принтер 🖨 и стрелка ⬇ не отображались на Windows 7). */
  .print-btn .btn-icon{
    vertical-align:-2px;
    margin-right:6px;
  }

  /* Плитка с общим видом ящика - по высоте таблицы «Итог» (по указанию
     пользователя): растягивается на высоту ряда, а сама в высоту ряда не
     вкладывается (contain:size), картинка вписана без искажения
     (object-fit:contain). В столбце (узкий экран) - обычная высота. */
  .summary-row{
    display:flex;
    gap:24px;
    align-items:stretch;
  }
  .summary-row .summary{flex:1;min-width:0;}
  .box-view{
    flex:0 0 280px;
    width:280px;
    height:auto;
    contain:size;
    object-fit:contain;
    display:block;
    border:1px solid var(--rule);
    border-radius:12px;
    background:var(--panel);
    padding:12px;
    box-shadow:var(--shadow-sm);
  }
  @media screen and (max-width:700px){
    .summary-row{flex-direction:column;align-items:stretch;}
    .box-view{flex-basis:auto;width:100%;max-width:280px;margin:0 auto;contain:none;}
  }

  .summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--rule);
    border:1px solid var(--rule);
    border-radius:12px;
    overflow:hidden;
  }
  .summary div{background:var(--panel);padding:18px 16px;overflow-wrap:break-word;}
  .summary .label{
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--ink-soft);
    margin-bottom:4px;
  }
  .summary .value{
    font-size:24px;
    font-weight:700;
    color:var(--ink);
    font-family:inherit;
  }
  .summary .value span{font-size:13px;font-weight:400;color:var(--ink-soft);}

  /* В "Итоге" 4 плитки вместо 3 (добавлена "Масса ящика") - при
     3 узких колонках длинные подписи ("Расход пиломатериала") переносились
     по 3 строки нечитаемо. 2×2 даёт плиткам вдвое больше ширины. */
  .summary.summary-4{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* .summary-row переходит в столбец начиная с этой же ширины (см. блок
     выше) - плитки "Наружные размеры"/"Расход"/"Норма времени" получают
     втрое меньше места, чем рассчитано на 3-колоночный грид. Складываем
     плитки в один столбец сразу здесь, а не только на совсем узких
     экранах (<=480px) - иначе в диапазоне 480-700px длинные значения
     переносятся по цифрам ("1088" на "108"/"8"), хоть и без обрезки
     (minmax(0,1fr) выше уже не даёт им вылезать за пределы карточки). */
  @media screen and (max-width:700px){
    .summary{grid-template-columns:1fr;}
  }

  /* ============ Шестерёнка настроек нормы времени ============ */
  .time-tile{position:relative;}
  .time-settings-btn{
    position:absolute;
    top:12px;
    right:12px;
    width:26px;
    height:26px;
    padding:0;
    margin:0;
    border:1px solid var(--rule);
    border-radius:8px;
    background:var(--panel);
    color:var(--ink-soft);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  /* Ховер - заливка var(--accent) + белая иконка, тот же приём, что и у
     основной кнопки/CTA (button{background:var(--accent);color:#fff})
     - по замечанию пользователя ("шестерёнка становится белой по версии
     нашего дизайна"), а не просто окрашенная обводка/иконка, как раньше. */
  .time-settings-btn:hover{background:var(--accent);border-color:var(--accent);color:#ffffff;}

  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--overlay);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:100;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-box{
    position:relative;
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    padding:28px;
    max-width:380px;
    width:100%;
  }
  .modal-box h3{
    margin:0 0 20px;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    padding-right:24px;
  }
  /* Без hover-эффекта и transition (по замечанию пользователя) - крестик
     не меняет цвет и не анимируется при наведении. */
  .modal-close{
    position:absolute;
    top:14px;
    right:14px;
    width:28px;
    height:28px;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    color:var(--ink-soft);
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:none;
  }
  /* .modal-close - это <button>, а у обычной кнопки есть общий button:hover
     {background:var(--accent-hover)} (тёмно-коричневая заливка CTA) - у него
     специфичность (element+pseudo-class) выше, чем у одного класса
     .modal-close, поэтому он перебивал transparent на hover. Явный hover
     здесь нужен не для эффекта, а чтобы погасить чужой. */
  .modal-close:hover{background:transparent;}

  /* Окно подтверждения в стиле сайта (siteConfirm, common-settings.js) -
     вместо окон браузера confirm/prompt; поверх окна настроек. */
  .site-confirm{z-index:200;}
  .site-confirm-box{max-width:440px;}
  .site-confirm-box h3{margin-bottom:10px;padding-right:0;}
  .site-confirm-text{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere;}
  .site-confirm-field{margin-bottom:20px;}
  .site-confirm-field label{display:block;text-transform:none;letter-spacing:normal;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:8px;}
  .site-confirm-field input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-input);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;}
  .site-confirm-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);}
  .site-confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
  .site-confirm-actions button{margin:0;}
  .site-confirm-danger{background:var(--error);}
  .site-confirm-danger:hover{background:var(--error);filter:brightness(.9);}
  .modal-field{margin-bottom:20px;}
  .modal-field:last-child{margin-bottom:0;}
  .modal-field label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:10px;
  }
  .modal-slider-row{display:flex;align-items:center;gap:14px;}
  .modal-slider-row input[type="number"]{
    width:64px;
    flex:0 0 auto;
    padding:6px 8px;
    border:1px solid var(--border-input);
    border-radius:6px;
    font-family:inherit;
    font-size:13px;
    color:var(--ink);
  }

  /* ============ "Прыгающий" ползунок с фиксированными остановками ============
     Свой виджет вместо нативного <input type=range> - см. createJumpSlider()
     в common-timesettings.js: нужно было и анимированное (CSS transition)
     перемещение между остановками, и круглые отметки на треке - ни то,
     ни другое нативный range с datalist не умеет (по замечанию пользователя:
     "ползунки должны двигаться прыжками, но плавно", "отметки... круговыми
     расширениями"). */
  .jump-slider{
    position:relative;
    flex:1;
    min-width:0;
    height:24px;
    display:flex;
    align-items:center;
    cursor:pointer;
    touch-action:none;
    outline:none;
  }
  /* рамка фокуса - только с клавиатуры (мышью/пальцем - jump-slider-pointer) */
  .jump-slider:focus-visible:not(.jump-slider-pointer) .jump-slider-thumb{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .jump-slider-track{
    position:relative;
    width:100%;
    height:6px;
    background:var(--rule);
    border-radius:3px;
  }
  .jump-slider-fill{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    background:var(--accent);
    border-radius:3px;
    transition:width .18s ease;
  }
  .jump-slider-mark{
    position:absolute;
    top:50%;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--panel);
    border:2px solid var(--rule);
    transform:translate(-50%,-50%);
    transition:background-color .18s ease, border-color .18s ease;
  }
  .jump-slider-mark.passed{
    background:var(--accent);
    border-color:var(--accent);
  }
  .jump-slider-dense .jump-slider-mark{
    display:none;
  }
  /* Значение ещё не выбрано (тип I-2, доля промежутков обшивки): без бегунка
     и заливки - выбор щелчком по ползунку или в поле. */
  .jump-slider-empty .jump-slider-thumb, .jump-slider-empty .jump-slider-fill{visibility:hidden;}
  .jump-slider-empty .jump-slider-mark.passed{background:var(--panel);border-color:var(--rule);}
  .board-gap-hint{display:block;margin-top:10px;font-size:12px;color:var(--ink-soft);}
  .jump-slider-thumb{
    position:absolute;
    top:50%;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--accent);
    border:3px solid var(--panel);
    transform:translate(-50%,-50%);
    transition:left .18s ease;
  }

  table{
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    margin-bottom:8px;
  }
  th:first-child, td:first-child{width:34%;}
  th:not(:first-child), td:not(:first-child){width:16.5%;}
  th,td{
    text-align:left;
    padding:9px 10px;
    font-family:inherit;
    font-size:14px;
    font-variant-numeric:tabular-nums;
    letter-spacing:0;
    border-bottom:1px solid var(--rule);
  }
  th{
    background:var(--table-header-bg);
    color:var(--ink-soft);
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.05em;
    font-weight:600;
  }
  /* Числовые ЗНАЧЕНИЯ (толщина/ширина/длина/кол-во) не переносим никогда - в
     отличие от названия детали (первая колонка), где перенос длинного
     названия на несколько строк - это нормально и ожидаемо, перенос ЧИСЛА
     выглядит как будто оно сломалось (см. мобильный фикс ниже - именно узкие
     числовые колонки на маленьких экранах были причиной). Заголовки
     ("ТОЛЩИНА"/"ШИРИНА"/...) - НЕ nowrap: колонка узкая не только на
     маленьком экране, но и когда рядом чертёж (.spec-row-diagram, чертёж
     занимает фиксированные 300px+отступ, а таблица сжимается уже при
     довольно широком окне) - без переноса длинный заголовок вылезал за
     границу своей ячейки и наезжал на соседний ("ТОЛЩИНАШИРИНА" слитно) - по
     репорту пользователя. overflow-wrap:break-word переносит слово на 2-ю
     строку внутри своей колонки вместо наезда на соседнюю. */
  td.num{text-align:right;white-space:nowrap;}
  th.num{text-align:right;white-space:normal;overflow-wrap:break-word;}

  .spec-table{margin-bottom:26px;}
  .spec-table:last-child{margin-bottom:0;}
  /* Скруглённые углы таблицы деталей - для единообразия с карточками и
     остальными блоками сайта (border-radius:12px, как у .card/.box-view) -
     по замечанию пользователя. Радиус и обводка - на обёртке (.spec-table
     div), а не на самой <table> (border-collapse:collapse ломает
     border-radius на table/th/td напрямую) - overflow:hidden обрезает
     прямые углы таблицы по скруглённой рамке обёртки. Только на экране -
     печатная таблица (#printArea .spec-table) не имеет своей рамки/радиуса,
     трогать её не нужно. */
  @media screen{
    .spec-table{
      border:1px solid var(--rule);
      border-radius:12px;
      overflow:hidden;
    }
    /* Таблица упирается в рамку обёртки: без нижнего отступа и без линии под
       последней строкой - иначе под ней виднелось начало «новой строки»,
       обрезанное скруглением (по замечанию пользователя). Подчёркивание
       ячейки в фокусе остаётся. */
    #boardTables .spec-table table{margin-bottom:0;}
    #boardTables .spec-table tbody tr:last-child td:not(:focus){border-bottom-color:transparent;}
  }
  .editable-cell{
    cursor:text;
    border-bottom:1px dashed var(--accent);
    border-radius:4px;
  }
  .editable-cell:hover{background:var(--accent-wash);}
  /* Значения, введённые вручную в таблице деталей (data-user-edited, см.
     обработчик input у #boardTables и editedAttr в common-table-edits.js) -
     тёмно-коричневым текстом, по указанию пользователя; только на сайте:
     скоуп #boardTables не пересекается с печатной областью (#printArea). */
  /* + светло-коричневая заливка всей ячейки (по указанию пользователя). */
  #boardTables td[data-user-edited="true"]{color:var(--manual-ink);background:var(--accent-wash);}
  .editable-cell:focus{
    outline:none;
    background:var(--accent-wash);
    border-bottom:1px solid var(--accent);
  }
  /* Подсказки о правке с пересчётом (common-table-edits.js): при наведении
     на ячейку толщины и плашка после первого расчёта (с крестиком). Тёмная
     плашка со стрелкой вверх, к ячейке (--arrow-x - середина ячейки). */
  .table-hint{
    position:absolute;
    z-index:60;
    transform:translateX(-50%);
    max-width:260px;
    padding:8px 12px;
    border-radius:8px;
    background:var(--ink);
    color:var(--bg);
    font-size:13px;
    line-height:1.4;
    pointer-events:none;
  }
  .table-hint::before{
    content:'';
    position:absolute;
    top:-6px;
    left:var(--arrow-x, 50%);
    margin-left:-6px;
    border:6px solid transparent;
    border-top:0;
    border-bottom-color:var(--ink);
  }
  /* Плашка не мешает кликать по ячейкам под ней - клики ловит только крестик. */
  .table-hint-first{padding-right:32px;}
  .table-hint-close{
    position:absolute;
    top:4px;
    right:6px;
    padding:0 4px;
    border:0;
    background:none;
    color:inherit;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    opacity:.8;
    pointer-events:auto;
  }
  .table-hint-close:hover{opacity:1;}
  @media print{ .table-hint{display:none;} }

  .part-title{
    font-size:15px;
    font-weight:700;
    color:var(--ink);
    margin:22px 0 8px;
  }
  .part-title:first-child{margin-top:0;}

  /* Кнопка действия у заголовка узла (III-1: «Убрать» у болтов) и заметка
     «Болты убраны» с кнопкой «Вернуть»; убранное - скрыто (is-removed). */
  .btn-small{margin-top:0;padding:4px 12px;font-size:12px;font-weight:600;border-radius:8px;}
  .part-title-action{margin-left:12px;vertical-align:middle;}
  .bolts-removed-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;line-height:1.3;}
  .is-removed{display:none !important;}
  /* Лента обшивки торцов (I-1) - табличка 1×1 на всю ширину под всеми
     элементами, см. i1/render-i1.js. */
  .spec-table.tape-table{margin-top:22px;}

  /* ===== Шапка калькулятора: заголовок + поле «Номер или название ящика»
     (справа от заголовка, по указанию пользователя; в печать/PDF - справа
     от заголовка, см. boxNameHtml в common-print.js). ===== */
  header.title-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  header.title-row h1{margin:0;}
  /* до правого края - как карточки ниже (по указанию пользователя, для
     единообразия; раньше было не шире 360px) */
  /* Переключатель версий типа (II-1, III-1; по указанию пользователя): две
     крупные кнопки «По ГОСТ» / «Оптимальный» под заголовком, у каждой - статус
     версии (бывшие плашки карточек). Кнопки - ссылки на страницы версий
     (common-version-switch.js запоминает выбор). */
  .version-switch{display:flex;flex-wrap:wrap;margin:0 0 22px;padding:4px;gap:4px;border:1px solid var(--border-input);border-radius:12px;background:var(--panel);}
  .version-opt{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:9px 18px;border-radius:9px;text-decoration:none;color:var(--ink-soft);font-size:16px;font-weight:600;white-space:nowrap;transition:background-color .15s ease,color .15s ease;}
  .version-opt:hover{background:var(--accent-wash);color:var(--ink);}
  .version-opt.active{background:var(--accent);color:#fff;cursor:default;}
  /* статус версии - контурная плашка цвета статуса (на выбранной коричневой
     кнопке - на белом фоне в обеих темах, статус коричневым не заливается) */
  .version-badge{display:inline-block;padding:1px 9px;border:1px solid var(--warn);border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;color:var(--warn);background:transparent;}
  .version-opt.active .version-badge{background:#fff;}
  /* «?» у оптимальной версии - пояснение (по наведению, фокусу, на телефоне -
     по нажатию: common-version-switch.js, класс .open) */
  .version-info{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font-size:12px;font-weight:700;line-height:1;cursor:help;outline:none;}
  .version-info::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:280px;padding:8px 12px;border-radius:8px;background:var(--ink);color:var(--panel);font-size:13px;font-weight:500;line-height:1.4;white-space:normal;text-align:left;box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;z-index:20;}
  .version-info:hover::after,.version-info:focus-visible::after,.version-info.open::after{opacity:1;visibility:visible;}
  @media (max-width:560px){.version-switch{display:flex;}.version-opt{flex:1 1 100%;justify-content:space-between;white-space:normal;}}
  @media print{.version-switch{display:none !important;}}
  .box-name-input{
    flex:1 1 260px;
    height:40px;
    padding:0 12px;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
    background:var(--panel);
    border:1px solid var(--border-input);
    border-radius:10px;
  }
  .box-name-input:focus{outline:none;border-color:var(--accent);}

  /* ===== Индикатор «Идёт расчёт…» (статус calcLoading) и кнопка сброса ===== */
  .calc-loading{color:var(--accent);gap:8px;}
  .calc-loading .spinner{
    width:16px;height:16px;flex:0 0 16px;
    border:2px solid var(--accent-wash);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:calc-spin .8s linear infinite;
  }
  @keyframes calc-spin{to{transform:rotate(360deg);}}
  #calcBtn:disabled{opacity:.6;cursor:progress;}
  /* Кнопка сброса - компактная, как кнопки печати, чтобы ряд действий
     помещался в одну строку. */
  .reset-btn{margin-left:12px;margin-top:0;padding:12px 18px;font-size:13px;}
  /* «Печать» и «Скачать PDF» - одной неразрывной группой: если ряду не
     хватает места, они переносятся вместе, а не по одной. */
  .print-actions{display:inline-flex;gap:12px;white-space:nowrap;}
  /* Ряд действий - гибкий: одинаковые промежутки, при нехватке места
     группа печати переносится целиком и встаёт ровно под «Рассчитать»
     (без сдвига от собственных отступов кнопок); текст ошибки (#err) -
     отдельной строкой на всю ширину. */
  .action-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
  .action-card > button, .action-card .print-btn, .action-card .reset-btn{margin:0;}
  .action-card .calc-status{margin-left:2px;margin-right:2px;}
  .action-card > .error{flex-basis:100%;margin-top:0;}
  .action-card > .error:empty{display:none;}

  .note{
    font-size:13px;
    color:var(--ink-soft);
    background:var(--warn-wash);
    border-left:3px solid var(--warn);
    border-radius:0 10px 10px 0;
    padding:14px 16px;
    margin-top:20px;
    font-family:inherit;
    line-height:1.6;
  }

  .disclaimer{
    font-size:12px;
    color:var(--ink-soft);
    opacity:.75;
    font-family:inherit;
    line-height:1.5;
    text-align:center;
  }

  #results{display:none;}
  .error{color:var(--error);font-family:inherit;font-size:13px;font-weight:600;margin-top:12px;}
  .error.hint{color:var(--warn);} /* подсказка «Дождитесь окончания расчёта» - не ошибка: жёлтый, как «Нажмите «Рассчитать»» */

  .spec-row-diagram{
    display:flex;
    gap:34px;
    align-items:center;
  }
  .spec-row-diagram .spec-table{flex:1;min-width:0;margin-bottom:0;}

  .diagram-slot{
    flex:0 0 300px;
    width:300px;
    position:relative;
    overflow:visible;
    margin-left:32px;
    /* поровну сверху и снизу: ряд выровнен по центру (align-items:center),
       и чертёж встаёт ровно по центру таблицы - по указанию пользователя */
    margin-top:12px;
    margin-bottom:12px;
  }
  /* Слот чертежа на экране расширен на 40px, из них 20px взяты у левого
     отступа, так что таблица деталей сужается всего на 20px: у I-1 все
     чертежи в едином масштабе (одинаковая высота рамки щита), и самый
     длинный (4 планки) шире обычных 260px; у I-3/II-1 чертежи занимают всё
     своё место (по указанию пользователя, см. growDiagramToSlot в
     common-diagram-fit.js). Скоуп #boardTables - печать не затрагивается
     (там свой слот, см. #printArea .diagram-slot). */
  #boardTables .diagram-slot{
    flex-basis:340px;
    width:340px;
    margin-left:12px;
  }
  .diagram-wrap{
    position:relative;
    flex:0 0 260px;
    width:260px;
    --dk:1; /* масштаб чертежа на экране, см. fitDiagramsOnScreen() */
    --lk:1; /* доп. фиксированный множитель подписей, см. renderDiagram()/labelScale в js/common-diagrams.js */
  }
  .diagram-wrap img{
    display:block;
    width:100%;
    height:auto;
  }
  .diagram-arrows{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
  }
  .diagram-labels{
    position:absolute;
    inset:0;
    z-index:10;
    pointer-events:none;
  }
  .diagram-label{
    position:absolute;
    transform:translate(-50%,-50%);
    background:#fff;
    border:calc(var(--dk)*var(--lk)*1px) solid var(--ink);
    color:var(--ink);
    font-family:inherit;
    font-size:calc(var(--dk)*var(--lk)*13px);
    font-weight:700;
    padding:calc(var(--dk)*var(--lk)*2px) calc(var(--dk)*var(--lk)*7px);
    border-radius:calc(var(--dk)*var(--lk)*6px);
    white-space:nowrap;
    line-height:1.3;
  }
  .diagram-label-vertical{
    transform:translate(-50%,-50%) rotate(-90deg);
  }

  /* #boardTables - явный скоуп (а не голые .spec-row-diagram/.diagram-slot/
     .diagram-wrap): те же имена классов используются и в печатной области
     (#printArea .spec-row-diagram и т.п., см. common-print.js). printBox()
     измеряет и подгоняет печатную раскладку ДО window.print() - то есть
     пока страница ещё в обычном (не print) режиме, а не в момент самой
     печати - поэтому даже "@media screen and" не спасает: пока идёт это
     измерение, узкий ЭКРАННЫЙ viewport (например, окно браузера уже
     700px - не телефон, а обычное несведённое во весь экран окно или
     масштабирование интерфейса Windows) заставлял этот !important-блок
     сработать и на печатной разметке тоже (у неё нет !important на
     flex-direction, значит она проигрывала), из-за чего чертежи в печати
     "уезжали" над таблицу и растягивались на всю ширину листа - по репорту
     пользователя. #boardTables-скоуп физически не пересекается с
     #printArea (это два разных поддерева DOM), поэтому теперь это в
     принципе невозможно, независимо от текущей ширины окна браузера. */
  @media screen and (max-width: 700px){
    #boardTables .spec-row-diagram{
      flex-direction:column;
      gap:16px !important;
    }
    #boardTables .diagram-slot{
      width:100% !important;
      flex-basis:auto !important;
    }
    /* width НЕ !important (в отличие от .diagram-slot выше) - её должен
       уметь перебить inline-стиль, который на каждый расчёт проставляет
       fitDiagramsOnScreen() (см. js/common-diagram-fit.js), сжимая
       чертёж, если подписи/стрелки не помещаются в реальную (узкую на
       телефоне) ширину слота. С !important инлайн-сжатие никогда не
       применялось - чертёж всегда рендерился на всю ширину до 240px, и
       подписи вылезали за пределы экрана целиком - по репорту пользователя.
       100%/max-width:240px остаются как запасное значение до первого
       расчёта (пока JS ещё не отработал) и на случай, если JS-стиль вдруг
       не проставлен. */
    #boardTables .diagram-wrap{
      width:100%;
      flex-basis:auto !important;
      max-width:240px;
      margin:0 auto;
    }
    /* I-1 и I-2: каждый чертёж максимального размера (см. data-max-size выше) - длинный
       шире 240px; max-width обрезал бы только картинку, а подписи (их
       размер - через --dk) оставались бы прежними и наезжали друг на
       друга. Сжатие по ширине экрана делает fitDiagramsOnScreen
       (вместе с подписями), каждый чертёж - независимо. */
    #boardTables .diagram-slot .diagram-wrap{
      max-width:none;
    }
  }

  /* Узкие экраны (телефоны). Фиксированные паддинги карточек и ячеек
     таблицы, рассчитанные на десктопную ширину, не сжимаются вместе с
     экраном: числовые колонки таблицы деталей (16.5% от и без того узкой
     ширины карточки) с паддингом 9-10px не оставляют места даже для
     4-значного числа при шрифте 14px - оно переносится на 2 строки.
     Внутри карточки/таблицы места объективно мало, поэтому здесь
     одновременно уменьшаем паддинг карточки и паддинг/шрифт ячеек -
     white-space:nowrap (см. выше) сам по себе только скрыл бы часть
     числа, не решив нехватку места.
     (.summary складывается в один столбец раньше, на 700px - см. блок
     выше вместе со стекингом .summary-row.) */
  @media screen and (max-width: 480px){
    .card{padding:20px;}
    /* #boardTables - тот же повод, что и у соседнего блока (max-width:700px)
       выше: голые th/td совпадали бы и с ячейками печатной таблицы
       (#printArea .spec-table th/td) - здесь у обеих сторон нет !important,
       так что специфичность (#printArea .spec-table td сильнее голого td)
       и так защищала бы печать, но скоуп к #boardTables делает это верным
       по построению, а не по случайному стечению specificity. */
    #boardTables th, #boardTables td{padding:7px 6px;font-size:12.5px;}
    /* letter-spacing - у узких числовых колонок (16.5% от и без того узкой
       карточки) заголовки типа "ТОЛЩИНА"/"ШИРИНА" не умещаются в одну строку
       даже при уменьшенном шрифте (10px); перенос на 2-ю строку внутри своей
       колонки (overflow-wrap:break-word, th.num{white-space:normal} - см.
       общее правило выше, действует на любой ширине) тут уже есть сам по
       себе - letter-spacing:0 убирает межбуквенный интервал (нужен только на
       просторных экранах), экономя ещё немного ширины. */
    #boardTables th{font-size:10px;letter-spacing:0;line-height:1.25;}
  }

  /* ============ Экран слишком узкий - только фон и надпись ============ */
  /* Ниже этой ширины интерфейс уже не удаётся показать читаемо, даже с
     переносом заголовков таблицы (см. 480px выше) - вместо сломанного вида
     показываем только фон и короткое сообщение, по просьбе пользователя.
     #tooNarrow - разметка добавлена в конец <body> отдельно в каждом HTML
     (i1.html/i3-skid.html/ii1.html), сосед .wrap, а не внутри
     него - скрыт по умолчанию, виден только через этот медиа-запрос. В
     печати не появляется в принципе - печатный <style media="print"> прячет
     все body>* кроме #printArea независимо от ширины экрана. */
  #tooNarrow{display:none;}
  @media screen and (max-width:259px){
    .wrap, .site-topbar{display:none !important;}
    #tooNarrow{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
      padding:24px;
      text-align:center;
      color:var(--ink-soft);
      font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-size:14px;
      line-height:1.5;
    }
  }

  /* ============ Фильтр толщин пиломатериала "в наличии" ============ */
  .thickness-filter{position:relative;}
  /* основная ширина доски ГОСТ 2991-85 - под списком ширин «в наличии» */
  .main-width-block{margin-top:20px;}
  .thickness-dropdown-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--border-input);
    border-radius:8px;
    background:var(--panel);
    color:var(--ink);
    font-family:inherit;
    font-size:14px;
    cursor:pointer;
    text-align:left;
  }
  .thickness-dropdown-btn:hover{background:var(--panel);border-color:var(--accent);}
  .thickness-dropdown-btn span:first-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .thickness-dropdown-arrow{flex:0 0 auto;color:var(--ink-soft);}
  .thickness-dropdown-panel{
    display:none;
    position:absolute;
    z-index:30;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:var(--panel);
    border:1px solid var(--rule);
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    padding:16px;
    max-height:340px;
    overflow-y:auto;
  }
  .thickness-dropdown-panel.open{display:block;}
  .thickness-dropdown-actions{
    display:flex;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px solid var(--rule);
  }
  .thickness-dropdown-actions button{
    margin:0;
    padding:8px 14px;
    font-size:12px;
  }
  .thickness-checkbox-list{
    display:grid;
    /* Список стандартных толщин короткий (до 16 значений - у типов I-3/II-1,
       у I-1 их 14) - просто в 2 столбца, заполнение по столбцам сверху вниз.
       8 строк даёт ровно 2 столбца при 16 значениях (иначе, при 7 строках,
       16 значений уходили бы в 3-й столбец) - по замечанию пользователя. */
    grid-auto-flow:column;
    grid-template-rows:repeat(8,auto);
    grid-auto-columns:1fr;
    gap:5px 12px;
  }
  .thickness-checkbox-list label{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:inherit;
    font-size:13px;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink);
    margin:0;
    cursor:pointer;
  }
  .thickness-checkbox-list input{margin:0;accent-color:var(--accent);}
  @media screen and (max-width:640px){
    .thickness-checkbox-list{grid-template-rows:repeat(16,auto);}
  }
  .fastening-option-list{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .fastening-option-list label{
    display:flex;
    align-items:flex-start;
    gap:9px;
    font-family:inherit;
    font-size:14px;
    color:var(--ink);
    text-transform:none;
    letter-spacing:0;
    margin:0;
    cursor:pointer;
  }
  .fastening-option-list input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent);}
  /* «Тонкая настройка» толщин (II-1, js/ii1/fine-thickness.js) -
     раскрывающаяся группа под фильтром толщин «в наличии». */
  .fine-thickness{margin-top:16px;border-top:1px solid var(--rule);padding-top:14px;}
  .fine-thickness summary{
    cursor:pointer;
    list-style:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
  }
  .fine-thickness summary::-webkit-details-marker{display:none;}
  .fine-thickness summary::before{
    content:'';
    width:7px;height:7px;
    border-right:2px solid var(--ink-soft);
    border-bottom:2px solid var(--ink-soft);
    transform:rotate(-45deg);
    transition:transform .15s ease;
  }
  .fine-thickness[open] summary::before{transform:rotate(45deg);}
  .fine-thickness summary:hover{color:var(--accent);}
  .fine-thickness-body{margin-top:14px;}
  .fine-thickness-body .option-hint{font-size:12px;color:var(--ink-soft);margin-bottom:14px;}
  /* 4 колонки (ряд - дно, ряд - щиты и крышка), на узком экране - 2 (пары
     того же узла), но не 3 - иначе ряды узлов разъезжаются. */
  .fine-thickness-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 16px;
  }
  .fine-thickness-field{display:flex;flex-direction:column;justify-content:flex-end;}
  @media screen and (max-width:960px){
    .fine-thickness-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media screen and (max-width:640px){
    .fine-thickness-grid{gap:12px;}
  }
  .fine-thickness-hint{display:block;margin-top:2px;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;}
  .fine-thickness-field input[type=number]{padding:10px 12px;font-size:15px;}
  .fine-thickness-field input::placeholder{color:var(--ink-soft);opacity:.7;}
  .fastening-option-list .option-hint{
    display:block;
    font-size:12px;
    color:var(--ink-soft);
    margin-top:3px;
  }

  /* ================= ПЕЧАТЬ =================
     Печатный блок всегда отрисован (сдвинут за экран, но НЕ display:none) -
     благодаря этому перед печатью можно измерить его настоящую высоту.

     Бюджет листа А4 при полях 8 мм:
        ширина  = (210 - 16) мм = 733 px
        высота  = (297 - 16) мм = 1062 px
     Ширина - жёсткий лимит, т.к. чертёж и таблица стоят в один ряд:
        чертёж 388 + отступ 16 + зазор 20 + таблица 309 = 733
     Размеры ниже подобраны под этот бюджет: самая длинная подпись
     («Подполозная доска», «ТОЛЩИНА», «2450») помещается без обрезки.
     Оставшуюся высоту распределяет JS (см. printBox) - за счёт этого лист
     заполняется целиком, а не наполовину. */
  #printArea{
    /* Спрятан прозрачностью на обычном месте (left:0;top:0), а не большим
       сдвигом за экран: сдвиг у position:fixed на части систем раздувал
       ширину документа и растягивал страницу вбок при печати. */
    position:fixed;
    left:0;
    top:0;
    opacity:0;
    pointer-events:none;
    overflow:hidden;   /* иначе при масштабировании появляется полоса прокрутки */
    background:#fff;
    font-family:'Courier New', monospace;
    color:#091135;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
  }
  /* Внутренний слой - его и масштабируем. Внешний #printArea всегда остаётся
     шириной с печатное поле, поэтому браузер не видит переполнения и не
     применяет собственное «сжать до листа» поверх нашего (из-за этого
     страница уменьшалась дважды и треть листа пустовала). */
  #printScale{ transform-origin:top left; position:relative; --pk:1; }

  /* Водяной знак - в правом нижнем углу. Общий вид ящика - отдельная
     строка перед "Дно" (та же вёрстка .spec-row-diagram/.diagram-slot/
     .diagram-wrap, что и у остальных чертежей - размер подхватывается
     автоматически через applyDiagramWidths()), а не в шапке. Обе итоговые
     таблицы - "Внутренние размеры груза" и "Итог" - справа от него, друг
     под другом. flex:1, как у .spec-table в остальных строках, - колонка
     растягивается на всю ширину, оставшуюся после чертежа, а не жмётся
     по ширине своего текста. */
  #printArea .print-summary-col{
    display:flex;
    flex-direction:row;
    gap:calc(var(--pk)*28px);
    align-items:flex-start;
    flex:1;
    min-width:0;
  }
  /* Шапка листа компактнее (по указанию пользователя - за счёт неё крупнее
     таблицы и чертежи узлов): картинка ящика меньше, «Груз» и «Итог» - рядом. */
  #printScale > .spec-row-diagram{gap:calc(var(--pk)*24px);}
  #printScale > .spec-row-diagram .diagram-slot{flex-basis:calc(var(--pk)*180px);width:calc(var(--pk)*180px);margin-left:0;}
  #printArea .print-watermark{
    position:absolute;right:4px;bottom:0;
    width:176px;height:auto;
    opacity:.22;
    /* поверх чертежей (у них белый фон, по указанию пользователя знак должен быть виден) */
    z-index:10;pointer-events:none;
  }
  #printArea h1{font-size:calc(var(--pk)*24px);margin:0 0 6px;font-family:Georgia, serif;color:#8A4B26;font-weight:700;}
  #printArea .print-box-name{margin-left:calc(var(--pk)*24px);color:#091135;}
  #printArea .print-subtitle{color:#36394A;margin-bottom:calc(var(--pk)*6px);font-size:calc(var(--pk)*16px);font-weight:700;}

  /* Внутренние размеры груза + Итог - в колонке справа от чертежа ящика (см. .print-summary-col) */
  #printArea .print-summary-block{flex:1 1 auto;min-width:0;}
  #printArea .print-summary-block h2{font-size:calc(var(--pk)*12px);text-transform:uppercase;letter-spacing:.05em;color:#8A4B26;margin:0 0 6px;font-weight:700;}
  #printArea .print-plain-table td{padding:calc(var(--pk)*2px) 0;text-align:left;font-size:calc(var(--pk)*13px);font-weight:700;white-space:nowrap;}
  #printArea .print-plain-table td.k{color:#36394A;}
  #printArea .print-plain-table td:not(.k){width:100%;text-align:right;}

  /* Таблицы конфигурации досок.
     Ширины колонок подобраны под бюджет: «Подполозная» и «2450» влезают
     без переноса при шрифте 20px. */
  #printArea .spec-table table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0;}
  #printArea .spec-table th:first-child, #printArea .spec-table td:first-child{width:48%;}
  #printArea .spec-table th:not(:first-child), #printArea .spec-table td:not(:first-child){width:13%;}
  #printArea .spec-table th, #printArea .spec-table td{
    text-align:left;padding:calc(var(--pk)*6px) calc(var(--pk)*4px);font-size:calc(var(--pk)*19px);font-weight:700;border-bottom:1px solid #E1E9F0;white-space:nowrap;overflow:hidden;
  }
  #printArea .spec-table th{color:#36394A;text-transform:uppercase;font-size:calc(var(--pk)*10px);letter-spacing:0;font-weight:700;}
  #printArea .spec-table td.num, #printArea .spec-table th.num{text-align:right;}
  /* Табличка ленты обшивки торцов - одна ячейка на всю ширину. */
  #printArea .spec-table.tape-table{margin-top:calc(var(--pk)*10px);}

  #printArea .part-title{font-size:calc(var(--pk)*20px);font-weight:700;color:#8A4B26;margin:0 0 calc(var(--pk)*6px);}

  /* Секция = заголовок узла + (чертёж | таблица). Обычный блочный контейнер:
     на нём браузер надёжно соблюдает «не разрывать между листами». */
  #printArea .print-section{break-inside:avoid-page;page-break-inside:avoid;}
  #printArea .print-comment{
    font-size:calc(var(--pk)*15px);
    font-weight:700;
    line-height:1.5;
    white-space:pre-wrap;
    word-break:break-word;
    border:1px solid #E1E9F0;
    border-radius:2px;
    padding:calc(var(--pk)*10px) calc(var(--pk)*12px);
  }
  #printArea .spec-row-diagram{display:flex;gap:calc(var(--pk)*16px);align-items:center;page-break-inside:avoid;margin:0;}
  /* 310px / отступ 26px - измеренный максимальный вылет подписей вправо и влево
     для старых (маленьких) чертежей. У Дна (2008×1212, длинная подпись у левого
     края) вылет больше - отступ увеличен до 44px; вертикальные вылеты, а также
     правый вылет подписей (пропорциональным сжатием чертежа через --dk, а не
     обрезкой) резервируются из JS (fitDiagramsForPrint). */
  #printArea .diagram-slot{flex:0 0 calc(var(--pk)*300px);width:calc(var(--pk)*300px);margin-left:calc(var(--pk)*44px);position:relative;overflow:visible;}
  /* Узлы - сеткой в две колонки (см. buildAndSizePrintArea): заголовок,
     чертёж, таблица. Подсетка (subgrid) выравнивает их по строкам у обеих
     ячеек ряда: чертежи в одной полосе, таблицы начинаются на одной высоте.
     Чертёж - по центру своей ячейки (по горизонтали - из JS). */
  #printArea .print-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(var(--pk)*22px);row-gap:0;}
  #printArea .print-grid > .print-section{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0;padding-top:calc(var(--pk)*8px);}
  #printArea .print-grid .spec-row-diagram{display:grid;grid-row:span 2;grid-template-rows:subgrid;gap:0;min-width:0;align-items:stretch;}
  #printArea .print-grid .diagram-slot{width:auto;margin-left:0;display:flex;flex-direction:column;justify-content:center;}
  #printArea .print-grid .spec-table{margin-top:calc(var(--pk)*4px);align-self:start;}
  #printArea .print-grid .spec-table th, #printArea .print-grid .spec-table td{font-size:calc(var(--pk)*14px);padding:calc(var(--pk)*2px) calc(var(--pk)*3px);}
  #printArea .print-grid .spec-table th{font-size:calc(var(--pk)*9px);}
  #printArea .print-grid .spec-table th:first-child, #printArea .print-grid .spec-table td:first-child{width:52%;}
  /* Длинное название детали переносится на вторую строку - иначе оно одно
     ограничивало масштаб всего листа. */
  #printArea .print-grid .spec-table td:first-child{white-space:normal;overflow-wrap:break-word;line-height:1.2;}
  #printArea .print-grid .spec-table th:not(:first-child), #printArea .print-grid .spec-table td:not(:first-child){width:12%;}
  #printArea .print-grid .part-title{font-size:calc(var(--pk)*16px);margin-bottom:0;}
  /* Таблички под сеткой (лента, пергамин, болты) - тем же шрифтом, что и
     таблицы узлов (по указанию пользователя). */
  #printArea .spec-table.tape-table td{font-size:calc(var(--pk)*14px);padding:calc(var(--pk)*2px) calc(var(--pk)*3px);}
  /* ширина самих чертежей проставляется из JS (у них разный масштаб);
     остальное - общие правила .diagram-wrap/.diagram-arrows/.diagram-labels */
  /* Стрелки на чертежах - при печати заметно толще, чем на экране. --dk (по
     умолчанию 1, задаётся из .diagram-wrap{--dk:1} в общем блоке выше) -
     дополнительный ПОДИАГРАММНЫЙ масштаб (в отличие от --pk, единого на всю
     страницу): его выставляет fitDiagramsForPrint() в js/common-diagram-fit.js,
     когда конкретному чертежу требуется сжатие, чтобы вылетающие за картинку
     подписи (см. fitDiagramsForPrint) не налезали на соседнюю таблицу. */
  /* Базовый множитель поднят 3px -> 12px (в 4 раза) - линии стрелок были
     почти не видны при обычной печати (не через «Скачать PDF», у которой
     уже был свой отдельный PDF_ARROW_STROKE_FACTOR=4 - см. common-print.js,
     bakeDiagramArrowStrokeWidths - тот же итоговый множитель, 3*4=12,
     теперь совпадает с этим правилом) - по репорту пользователя. */
  #printArea .diagram-arrows line{stroke-width:calc(var(--pk)*var(--dk)*12px) !important;}
  #printArea .diagram-label{
    position:absolute;transform:translate(-50%,-50%);background:#fff;
    border:calc(var(--pk)*var(--dk)*var(--lk,1)*2px) solid #8A4B26;color:#091135;font-size:calc(var(--pk)*var(--dk)*var(--lk,1)*15px);font-weight:700;
    padding:calc(var(--pk)*var(--dk)*var(--lk,1)*2px) calc(var(--pk)*var(--dk)*var(--lk,1)*6px);white-space:nowrap;line-height:1.3;
  }
  /* I-1 и I-2 (data-max-size): в печати подписи относительно картинки крупнее, чем на
     экране (15px против 13px при ширине картинки x0.885) - на чертежах I-1 и I-2
     подписи расставлены плотнее (в два ряда под фото, см. diagramBokPhoto в
     src/i1/diagrams.js), поэтому в печати они немного уменьшены. */
  #printArea .diagram-slot[data-max-size] .diagram-wrap{--lk:0.85;}
  #printArea .diagram-label-vertical{
    transform:translate(-50%,-50%) rotate(-90deg);
  }

  /* ============ Новая раскладка (body.layout-v2) - по указанию пользователя,
     на всех типах (I-1, I-3, II-1) ============
     1) Одна колонка, как раньше; на узком экране панель с кнопкой
        «Рассчитать» прилипает к низу экрана; Enter в поле - расчёт.
     4) Поле, из-за которого расчёт заблокирован, - красная рамка (.field-error).
     9) Телефон: строки таблиц деталей - карточками. */
  #resultsMore{display:none;}
  /* подзаголовки групп дополнительных опций (по указанию пользователя - опции
     разделены по смыслу) */
  .option-group-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:14px;border-top:1px solid var(--rule);}
  .option-group-title:first-child{padding-top:0;border-top:none;}
  @media screen{
    .layout-v2 .field-error{border-color:var(--error) !important;box-shadow:0 0 0 3px rgba(194,59,44,.15);}

  }
  /* Липкая панель: у body/html стоит overflow-x:hidden - это делает body
     контейнером прокрутки, и position:sticky не работает; clip обрезает так
     же, но контейнером прокрутки не делает. */
  html:has(body.layout-v2), body.layout-v2{overflow-x:clip;}
  /* Одна колонка: обёртки .io-* только группируют разметку и на раскладку
     не влияют. */
  .layout-v2 .io-grid, .layout-v2 .io-inputs, .layout-v2 .io-side{display:contents;}
  /* 1) узкий экран: панель с кнопкой «Рассчитать» прилипает к низу, пока не дошли до неё */
  @media screen and (max-width:1099px){
    .layout-v2 .action-card{position:sticky;bottom:0;z-index:20;box-shadow:0 -6px 18px rgba(9,17,53,.08);}
  }
  @media screen and (max-width:640px){
    .layout-v2 .action-card{padding:12px 16px;gap:8px;margin-bottom:16px;border-radius:12px 12px 0 0;}
    /* 9) строки таблиц деталей - карточками */
    .layout-v2 #boardTables .spec-table table,
    .layout-v2 #boardTables .spec-table tbody{display:block;width:100%;}
    .layout-v2 #boardTables .spec-table thead{display:none;}
    .layout-v2 #boardTables .spec-table tr{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 8px;padding:10px 12px;border-bottom:1px solid var(--rule);}
    .layout-v2 #boardTables .spec-table tr:last-child{border-bottom:none;}
    .layout-v2 #boardTables .spec-table td{display:block;padding:2px 0;border:none;text-align:left;}
    .layout-v2 #boardTables .spec-table td:first-child{grid-column:1 / -1;width:auto;font-weight:700;padding-bottom:4px;}
    /* итог на телефоне - списком: подпись слева, значение справа */
    .layout-v2 .summary, .layout-v2 .summary.summary-4{grid-template-columns:1fr;}
    .layout-v2 .summary > div > div{padding:0;}
    .layout-v2 .summary > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;}
    .layout-v2 .summary > div.time-tile{padding-right:48px;}
    .layout-v2 .summary .time-settings-btn{top:50%;transform:translateY(-50%);}
    .layout-v2 .summary .label{margin-bottom:0;}
    .layout-v2 .summary .value{font-size:18px;text-align:right;}
    .layout-v2 .action-card button, .layout-v2 .action-card .print-btn{padding-top:10px;padding-bottom:10px;}
    .layout-v2 #boardTables .spec-table td:nth-child(n+2)::before{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1px;}
    .layout-v2 #boardTables .spec-table td:nth-child(2)::before{content:'Толщина';}
    .layout-v2 #boardTables .spec-table td:nth-child(3)::before{content:'Ширина';}
    .layout-v2 #boardTables .spec-table td:nth-child(4)::before{content:'Длина';}
    .layout-v2 #boardTables .spec-table td:nth-child(5)::before{content:'Кол-во';}
  }

  /* ===== Микроанимации (по указанию пользователя; js/common-motion.js,
     переключатель версий - js/common-version-switch.js). При «уменьшить
     движение» в системе анимаций нет. ===== */
  /* 1. Кнопка «Рассчитать»: надпись / точки / «Готово» - слои в одной ячейке
     сетки (ширина кнопки не меняется). */
  #calcBtn.motion-btn{display:inline-grid;transition:background-color .2s ease,transform .12s ease;}
  #calcBtn.motion-btn:active{transform:scale(.97);}
  .cb-face{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
  .cb-dots, .cb-done{visibility:hidden;}
  #calcBtn.is-loading{opacity:1;}
  #calcBtn.is-loading .cb-label, #calcBtn.is-done .cb-label{opacity:0;}
  #calcBtn.is-loading .cb-dots{visibility:visible;}
  #calcBtn.is-done{background:var(--ok);}
  #calcBtn.is-done .cb-done{visibility:visible;}
  .cb-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;}
  /* 6. Галочки (все на сайте): свой квадрат вместо системного. */
  input[type="checkbox"]{
    -webkit-appearance:none;appearance:none;
    width:16px;height:16px;flex:0 0 16px;box-sizing:border-box;padding:0;
    vertical-align:-3px;cursor:pointer;
    border:1.5px solid #9AA3B2;border-radius:4px;
    background:var(--panel) no-repeat center;
    transition:background-color .15s ease,border-color .15s ease;
  }
  input[type="checkbox"]:checked{
    border-color:var(--accent);
    background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/12px 12px;
  }
  input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  input[type="checkbox"]:disabled{opacity:.5;cursor:default;}
  /* 5. Переключатель версий: подложка переезжает к нажатой кнопке. */
  .version-switch{position:relative;}
  .version-pill{position:absolute;top:0;left:0;border-radius:9px;background:var(--accent);pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1),width .26s cubic-bezier(.2,.8,.2,1),height .26s cubic-bezier(.2,.8,.2,1);}
  .version-moving .version-opt{position:relative;}
  .version-moving .version-opt.active{background:transparent;}
  /* 12. Полоса подготовки листа под кнопками печати. */
  .print-actions{position:relative;}
  .print-progress{position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:2px;background:var(--rule);overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease;}
  /* transform, а не width - полоса движется, даже пока страница занята сборкой листа */
  .print-progress > span{display:block;height:100%;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;}
  .print-progress.run{opacity:1;}
  .print-progress.done{opacity:0;transition:opacity .3s ease .35s;}
  @media print{.print-progress{display:none !important;}}
  @media (prefers-reduced-motion:no-preference){
    .cb-dots i{animation:motion-dot .9s ease-in-out infinite;}
    .cb-dots i:nth-child(2){animation-delay:.15s;}
    .cb-dots i:nth-child(3){animation-delay:.3s;}
    #calcBtn.is-done .cb-done svg path{stroke-dasharray:24;animation:motion-tick .32s ease-out backwards;}
    /* 2/3. Изменившиеся ячейки таблиц деталей. */
    #boardTables td.motion-flash{animation:motion-flash .9s ease-out;}
    /* 6. */
    input[type="checkbox"].motion-chk{animation:motion-chk .26s cubic-bezier(.3,1.6,.5,1);}
    /* 7. Предупреждения. */
    #results #warningsTop.motion-warn{animation:motion-warn .36s cubic-bezier(.2,.8,.2,1);}
    #warningsTop.motion-warn .motion-warn-ico{display:inline-block;animation:motion-nudge .5s ease-in-out .3s;}
    /* 8. Окна (подтверждения, настройки): фон темнеет, окно вырастает. */
    .modal-overlay{animation:motion-fade .2s ease-out;}
    .modal-overlay .modal-box{animation:motion-dialog .22s cubic-bezier(.2,.8,.2,1);}
  }
  @keyframes motion-dot{0%,80%,100%{opacity:.4;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
  @keyframes motion-tick{from{stroke-dashoffset:24;}to{stroke-dashoffset:0;}}
  @keyframes motion-flash{from{background-color:var(--accent-wash);}}
  @keyframes motion-fade{from{opacity:0;}}
  @keyframes motion-chk{
    0%{transform:scale(.8);background-size:0 0;}
    100%{transform:scale(1);background-size:12px 12px;}
  }
  @keyframes motion-warn{from{opacity:0;transform:translateY(-10px);}}
  @keyframes motion-nudge{0%,100%{transform:rotate(0);}25%{transform:rotate(-14deg);}75%{transform:rotate(14deg);}}
  @keyframes motion-dialog{from{opacity:0;transform:translateY(6px) scale(.96);}}