/* ============================================================
   MOLO — ATELIER · Precision Instrument
   Загружается ВТОРЫМ <link>, ПОСЛЕ инлайн <style> из index.html —
   поэтому переопределяет и brand.css, и инлайн-блок по каскаду.
   Строго greige. Латунь (brass) — рационированный акцент только
   для "требует внимания" (не кратно пачке / нестандартный рез /
   округлить) и для итоговой суммы. Никакого зелёного/яркого.
   ============================================================ */

/* ---- Space Grotesk: самохостинг для офлайн/file:// ----
   Google Fonts отдаёт per-weight @font-face, указывающие на ОДИН
   и тот же вариативный файл на subset (это нормально — браузер
   применяет ось wght согласно объявленному font-weight). Кириллицы
   в Space Grotesk нет — русские подписи сами упадут на Helvetica
   Neue (тоже фирменный шрифт MOLO), это ожидаемо и ок. */
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/SpaceGrotesk-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* палитра (авторитетная, из Brand Book MOLO 01.2025) */
  --molo-charcoal:#4A4A49; --molo-paper:#EEECEA; --molo-taupe:#C0BEB3;
  --molo-warmgray:#D5D1CB; --molo-white:#FFFFFF; --molo-black:#000;
  /* поверхности */
  --bg:#EEECEA; --surface:#FFFFFF; --surface-2:#F6F4F1;
  --surface-sunk:#EAE7E1; --panel-head:#EAE7E1;
  /* угольные "рельсы" (шапка сверху, итоги снизу) */
  --bar:#4A4A49; --bar-2:#403F3E; --bar-line:#5A5957; --hair-on-dark:#5A5957;
  /* волосяные линии (градация) */
  --hair:#D5D1CB; --hair-strong:#C0BEB3; --hair-faint:#E4E1DB; --group-rule:#B9B6AC;
  /* текстовая лестница */
  --text:#37372F; --text-strong:#2C2C28; --text-2:#6B6963; --text-3:#8E8C83; --text-4:#A9A69C;
  --text-on-dark:#F3F1ED; --text-on-dark-2:#B6B3AA;
  /* тонированные состояния (тёплый greige) */
  --sel-fill:#E3E0D9; --sel-bar:#4A4A49;
  --hasqty-tint:#ECE7DC; --hasqty-tint-strong:#E4DECF; --custom-tint:#F3EEE3;
  --hover:#F1EEE8; --hover-list:#E9E5DE; --focus-ring:#8A877E;
  /* единственный рационированный акцент */
  --brass:#B49B6E; --brass-ink:#8C7648;
  --warn-line:#B08A5A; --warn-tint:#F6F0E4; --warn-ink:#8C6A38; --danger:#9A6A5C;
  --radius:3px;
  /* шрифтовые стеки */
  --disp:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --ui:"Helvetica Neue",Arial,system-ui,sans-serif;
  /* нейтрализация легаси ARISTO-переменных — любое нетронутое движком
     правило (brand.css / inline-стиль) автоматически станет greige */
  --ar-green:#4A4A49; --ar-dark:#4A4A49; --ar-mid:#54544F;
  --ar-bg:#EEECEA; --ar-card:#FFFFFF; --ar-border:#D5D1CB;
  --ar-divider:#E4E1DB; --ar-row-alt:#F6F4F1;
  --ar-text-main:#2C2C28; --ar-text-body:#37372F; --ar-text-muted:#8E8C83; --ar-text-label:#8E8C83;
  --ar-red:#9A6A5C; --ar-orange:#B08A5A; --ar-blue:#6B6963;
}
body{background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased}
*{font-variant-numeric:tabular-nums}

/* ============ ШАПКА — угольная "командная рейка", маскированный однотонный вордмарк ============ */
#hdr .ar-header{background:var(--bar);color:var(--text-on-dark);border-radius:0;
  padding:0 18px;min-height:54px;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--hair-on-dark)}
/* Прячем текст движка "MOL O" и рисуем вордмарк из SVG через currentColor+mask —
   убирает нефирменную белую "O" без изменения разметки. */
#hdr .ar-logo{color:var(--text-on-dark);font:0/0 var(--disp);letter-spacing:0;
  width:78px;height:20px;background:currentColor;
  -webkit-mask:url("molo-wordmark.svg") no-repeat center/contain;
          mask:url("molo-wordmark.svg") no-repeat center/contain}
#hdr .ar-logo .o,#hdr .ar-logo .ar-sub{color:inherit!important;font-size:0}
/* призрачные контролы шапки */
#hdr .ar-header .ar-langsel,#hdr .ar-header .ar-link{background:transparent;
  color:var(--text-on-dark-2);border:1px solid var(--hair-on-dark);border-radius:var(--radius);
  font:600 10px/1 var(--disp);letter-spacing:1px;text-transform:uppercase;padding:7px 10px}
/* правка3_1: переключатель языка стоит СЛЕВА, рядом с логотипом (без margin:auto).
   Текст самого селектора — светлый на угольной рейке; ВЫПАДАЮЩИЙ список красим явно
   тёмным по белому (иначе в открытом списке светлый текст был почти не виден). */
#hdr .ar-header .ar-langsel{color:var(--text-on-dark)}
/* правка3_1: выпадающий список языков — ЧЁТКИЙ тёмный текст на белом, обычный (не мелкий/разрядка/
   капс) шрифт, чтобы читался в любой строке и при наведении не «пропадал». */
#hdr .ar-header .ar-langsel option{color:#1b1b19;background:#fff;font:400 13px/1.6 Arial,sans-serif;letter-spacing:normal;text-transform:none}
#hdr .ar-header .ar-langsel option:checked{color:#1b1b19;background:#e8e5df;font-weight:600}
#hdr .ar-header .ar-langsel:hover,#hdr .ar-header .ar-link:hover{border-color:var(--text-on-dark-2);color:var(--text-on-dark)}
#hdr .ar-header .right{margin-inline-start:auto}
.ar-quote{display:none}

/* ============ ТИКЕР — нижняя полка той же угольной рейки ============ */
.ticker{background:var(--bar-2);color:var(--text-on-dark);
  border-top:0;border-bottom:1px solid var(--hair-on-dark)}
.ticker .t{padding:8px 14px;border-right:1px solid var(--hair-on-dark);
  font-family:var(--ui);color:var(--text-on-dark);display:flex;align-items:center;gap:6px}
.ticker .t b{color:var(--text-on-dark)}
.ticker .t.lbl,.ticker .disc2 .lbl{color:var(--text-on-dark-2);
  font:600 9.5px/1 var(--disp);letter-spacing:1.2px;text-transform:uppercase}
.ticker input.q,.ticker .disc2 input{width:62px;background:var(--bar);color:var(--text-on-dark);
  border:1px solid var(--hair-on-dark);border-radius:var(--radius);padding:2px 6px;
  font:400 12px/1 var(--ui);text-align:right}
.ticker .disc2 input{width:40px}
.ticker input.q:focus,.ticker .disc2 input:focus{outline:none;border-color:var(--focus-ring)}
.ticker .qb{margin-left:4px;background:transparent;color:var(--text-on-dark-2);
  border:1px solid var(--hair-on-dark);border-radius:var(--radius);padding:1px 6px;line-height:1}
.ticker .qb:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.ticker .qs{color:var(--text-on-dark-2)} .ticker .qs.ok{color:var(--text-on-dark-2)} .ticker .qs.err{color:var(--brass)}
.ticker #liveB{color:var(--brass)!important;font-weight:600}

/* ============ СЕТКА + волосяные разделители ============ */
/* Колонки-разделители сузились до 1px (index.html): панели разделяет ОДНА линия, а не полоса.
   Цвет линии = фон сетки, поэтому он тут и задаётся — обычная волосяная, как у прочих рамок
   панелей. Прежний --panel-head на полосе в 6px читался как «незакрашенный кусок». */
.grid{background:var(--hair-strong)}
.pane{background:var(--surface)}
.rsz{background:transparent;position:relative}
/* при наведении и перетаскивании та же линия просто темнеет — ширина не меняется,
   поэтому панели не «дёргаются» под курсором */
.rsz:hover::before,.rsz.drag::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:var(--sel-bar)}

/* ============ ЗАГОЛОВКИ ПАНЕЛЕЙ — гравированные бумажные микро-лейблы ============ */
.pane .ph{background:var(--panel-head);color:var(--text-2);
  border-bottom:1px solid var(--hair-strong);
  font:700 10px/1 var(--disp);letter-spacing:2px;text-transform:uppercase;padding:9px 12px}

/* тонкие тёплые скроллбары */
.pane .body,.bl .items,.bl .bhost{scrollbar-width:thin;scrollbar-color:var(--molo-taupe) transparent}
.pane .body::-webkit-scrollbar,.bl .items::-webkit-scrollbar,.bl .bhost::-webkit-scrollbar{width:9px;height:9px}
.pane .body::-webkit-scrollbar-thumb,.bl .items::-webkit-scrollbar-thumb{
  background:var(--molo-taupe);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.pane .body::-webkit-scrollbar-thumb:hover,.bl .items::-webkit-scrollbar-thumb:hover{background:var(--hair-strong)}

/* ---- ОРДЕР-ТИКЕТ: полоса прокрутки НАЧИНАЕТСЯ ПОД ШАПКОЙ КОЛОНОК ----
   Замечание заказчика: бегунок доходил до самого верха и заезжал за sticky-шапку, а сама
   шапка обрывалась на границе жёлоба. Теперь дорожка сдвинута вниз ровно на высоту шапки,
   а жёлоб над ней докрашен её же цветом с той же нижней линией — строка заголовков
   дочерчивается до правого края панели.

   Почему у ЭТОЙ панели снят scrollbar-width/scrollbar-color: с Chrome 121 стандартные
   свойства выигрывают у ::-webkit-scrollbar-* и полностью отключают их. Пока они заданы,
   отступ дорожки не применится. Вид при этом не меняется — webkit-правила выше рисуют
   ту же тёплую полосу 9px. У «Систем» и «Заявки» шапки внутри прокрутки нет, там всё
   остаётся на стандартных свойствах. */
/* --ot-gap — на сколько дорожка прокрутки опущена ниже линии под шапкой. Меньше 2px зазор
   пропадает и линия снова липнет к бегунку; больше 10px полоса начинает выглядеть обрезанной. */
.pane.ot .body{--ot-head:28px;--ot-gap:6px;scrollbar-width:auto;scrollbar-color:auto}
/* Линия в жёлобе идёт СРАЗУ ПОД полосой шапки (--ot-head … +1px), а не последним пикселем
   внутри неё. Иначе она оказывалась на 1px выше настоящей линии под шапкой — та рисуется
   тенью ПОД ячейкой, чтобы перекрывать границу первой строки, — и над полосой прокрутки
   получалась ступенька (замечание заказчика 06.08). Теперь обе линии на одной высоте,
   и нижняя граница строки заголовков читается сплошной во всю ширину панели — так же,
   как верхняя (её даёт border-bottom блока фильтров). */
.pane.ot .body::-webkit-scrollbar{width:9px;
  /* Жёлоб дочерчивает шапку и ЗАМЫКАЕТ её нижнюю линию к правому краю панели «Ордер-тикет»:
     полоса цвета шапки 0…--ot-head, затем 1px --group-rule — тот же цвет и та же высота,
     что у настоящей линии (её даёт `#otHd th::after`), дальше белое.
     ⚠️ Дорожка начинается НЕ сразу под линией, а на --ot-gap ниже (решение заказчика 07.08).
     Когда она стартовала с --ot-head + 1px, бегунок упирался в линию снизу, и та читалась
     не границей шапки, а короткой чёрточкой на самой полосе прокрутки. Зазор отделяет одно
     от другого: линия видна и доходит до края, полоса начинается ниже.
     Пробовали вести жёлоб до низа секции «ПРОФИЛЬ» — отвергнуто, см. §12 «тупиковое». */
  background:linear-gradient(to bottom,
    var(--panel-head) 0 var(--ot-head),
    var(--group-rule) var(--ot-head) calc(var(--ot-head) + 1px),
    var(--surface) calc(var(--ot-head) + 1px))}
.pane.ot .body::-webkit-scrollbar-track{margin-top:calc(var(--ot-head) + var(--ot-gap));background:transparent}
.pane.ot .body::-webkit-scrollbar-thumb{background:var(--molo-taupe);border-radius:5px;
  border:2px solid transparent;background-clip:padding-box}
.pane.ot .body::-webkit-scrollbar-thumb:hover{background:var(--hair-strong)}

/* ============ ЛЕВАЯ ПАНЕЛЬ — список систем ============ */
.wl .brand{background:var(--surface-2);color:var(--text-3);
  border-bottom:1px solid var(--hair);font:700 9px/1 var(--disp);letter-spacing:2px;text-transform:uppercase}
.wl .row{border-bottom:1px solid var(--hair);padding:9px 12px;
  font:400 12px/1.25 var(--ui);color:var(--text)}
.wl .row .nm{flex:1}
.wl .row .c{color:var(--text-3);font-family:var(--ui);font-variant-numeric:tabular-nums}
.wl .row:hover{background:var(--hover-list)}
.wl .row.on{background:var(--sel-fill);border-left:3px solid var(--sel-bar);
  padding-left:9px;color:var(--text-strong);font-weight:600}

/* ============ ИНСТРУМЕНТЫ ЦЕНТРА — тихие бумажные поля (без зелёного) ============ */
/* Низ блока фильтров (с чипами ЦВЕТА) — ОПОРНАЯ линия таблицы. Решение заказчика 06.08:
   она, линия под шапкой, линия под секцией и разделитель между группами профилей — ОДНА
   и та же граница `--group-rule`. Раньше здесь стоял `--hair-strong` #C0BEB3, а между
   группами шёл `--group-rule` #B9B6AC: на глаз «одинаковые», по пикселям разные. */
.tools{background:var(--surface-2);border-bottom:1px solid var(--group-rule)}
.tools input.s{background:var(--surface);border:1px solid var(--hair-strong);
  border-radius:var(--radius);color:var(--text);font:400 12px/1 var(--ui)}
/* правка3_2: фильтры длины в СТРОКЕ ПОИСКА (.frow .lf) — цвета как у всего терминала (greige),
   без «зелёного» из базового inline-стиля. */
.tools .frow .lf{background:var(--surface-2);border:1px solid var(--hair-strong);
  border-radius:var(--radius);color:var(--text);font:400 12px/1 var(--ui);text-align:left}
.tools .frow .lf::placeholder{color:var(--text-3);opacity:1}
.tools input.s:focus,.tools .frow .lf:focus{outline:none;border-color:var(--focus-ring);
  background:var(--surface);box-shadow:inset 0 0 0 2px var(--sel-fill)}

/* чипы цветов */
.chips>span[style]{color:var(--text-3)!important;font:600 9px/1 var(--disp)!important;
  letter-spacing:2px;text-transform:uppercase}
.chip{background:var(--surface);border:1px solid var(--hair);border-radius:14px;
  font:400 11px/1.4 var(--ui);color:var(--text);padding:3px 9px}
.chip:hover{background:var(--hover);border-color:var(--hair-strong)}
.chip .sw,.sw2{border:1px solid var(--hair-strong)}
.chip.on{background:var(--molo-charcoal);color:var(--text-on-dark);border-color:var(--molo-charcoal)}

/* ============ ТАБЛИЦА — белая плоскость данных, гравированные sticky-шапки ============ */
thead th{background:var(--panel-head);color:var(--text-2);
  border-bottom:1px solid var(--hair-strong);
  font:600 10px/1.3 var(--disp);letter-spacing:.6px;text-transform:uppercase;padding:7px 8px}
/* 🔴 ЛИНИЯ ПОД ШАПКОЙ ОРДЕР-ТИКЕТА — inset-тень, а не border-bottom.
   При `border-collapse:collapse` схлопнутые рамки рисует ТАБЛИЦА, а не ячейка. Шапка у нас
   `position:sticky`, и она увозила с собой только ФОН: нижняя граница оставалась привязанной
   к таблице и уползала вверх при прокрутке, а под шапкой начинали просвечивать границы
   проезжающих строк (замечание заказчика 06.08 — «границы шапки уезжают»).
   Тень принадлежит ячейке и едет вместе со sticky, поэтому линия стоит на месте.
   Правило нарочно сужено до `#otHd`: у печатного прайс-листа (`#plSheet`) шапка не липкая,
   а тени при печати браузер по умолчанию не выводит — там border-bottom обязан остаться. */
#otHd th{
  /* Высота РОВНО 28px — столько же, сколько в переменной --ot-head, по которой полоса
     прокрутки рисует свою «фальшивую» шапку. Без этого высота выходила дробной (27.5px),
     фальш-линия на скроллбаре оказывалась на полпикселя ниже настоящей — та самая ступенька.
     Значение одно на оба места: поменяете здесь — поменяйте и --ot-head. */
  height:28px;box-sizing:border-box;
  /* Линия ОДНА и рисуется ПОД шапкой (outset, не inset). Почему так:
     - inset клал её ВНУТРЬ ячейки, и верхняя граница первой строки оставалась отдельной
       линией сразу под ней — визуально получалась двойная (замечание заказчика 06.08);
     - outset занимает ровно ту 1px-полосу, где проходит граница строк, и, поскольку ячейка
       шапки sticky и лежит выше по z-index, перекрывает любую границу, проезжающую под ней.
       Поэтому при прокрутке линия остаётся одна и не мигает.
     border-bottom нельзя: при border-collapse рамку рисует ТАБЛИЦА, и она уезжает вверх
     вместе с ней (замер: при прокрутке на 700px таблица уходила на 671px, шапка стояла). */
  /* 🩸 `box-shadow` ЗДЕСЬ НЕ РАБОТАЕТ — проверено пикселями 06.08. При `border-collapse:collapse`
     браузер тень ячейки не выводит: в CSS у шапки стоял #C0BEB3, а на бою в этой строке
     рисовался #D5D1CB — то есть НЕ тень шапки, а `border-top` секции, стоявший на том же месте.
     Пока секция его рисовала, всё выглядело правильно и дефект был не виден; стоило снять
     border-top секции — линия под шапкой пропала совсем (фон шапки и фон секции одного цвета).
     Линию даёт ПСЕВДОЭЛЕМЕНТ: он не участвует в схлопывании рамок, рисуется всегда и, так как
     `th` у нас `position:sticky` (значит и containing block), едет вместе с шапкой — ровно то,
     что требовалось: «линия прикреплена к верхнему блоку».
     Проверять правку ТОЛЬКО пикселями (audit/shot.mjs + проба цвета), а не чтением CSS. */
  border-bottom:0;box-shadow:none;position:sticky}
#otHd th::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--group-rule);pointer-events:none}

/* Прежняя заплатка (тень влево у первой ячейки шапки) СНЯТА: она закрывала канал только
   под шапкой, а он шёл по ВСЕЙ высоте таблицы. Причина устранена в правиле tr.sec td ниже. */
thead th.l{text-align:left}
td{font-family:var(--ui);color:var(--text)}
td.l{font-family:var(--ui)}
td.cd{color:var(--text-3)}
td.pr,td.ls{color:var(--text)}
tr.grp0 td,tr.grp0 td.prodimg{border-top:1px solid var(--group-rule)}
tr.vrow:not(.grp0) td{border-top:1px solid var(--hair-faint)}

/* секционные "главы" (были тёмные #333 + зелёная/оранжевая полоса).
   🔴 Акцентная полоска слева — ВНУТРЕННЯЯ ТЕНЬ, а не border-left. Причина (замечание
   заказчика 05.08, «белая полоса слева от КОД»): таблица идёт с border-collapse:collapse,
   и рамка 3px у этих строк схлопывалась В КРАЙ ТАБЛИЦЫ — половина её ширины рисовалась
   наружу. Из-за этого ВСЕ ячейки таблицы (шапка, обычные строки, секции) начинались на
   1.5px правее самой таблицы, и вдоль всего левого края оставался канал: у секций он был
   закрашен тёмным и выглядел задуманным, а у прочих строк сквозь него просвечивала белая
   панель — та самая полоса. При прокрутке через канал проезжали тёмные куски секций,
   и казалось, что границы шапки едут.
   inset-тень в схлопывании не участвует: полоска выглядит так же, но ячейки встают
   вровень с таблицей и канал исчезает — заливка шапки доходит до столбца «Системы»
   так же, как справа ячейка «Сумма» доходит до столбца «Заявка». */
tr.sec td{background:var(--surface-sunk);color:var(--text-2);
  font:700 10px/1 var(--disp);letter-spacing:2px;text-transform:uppercase;text-align:left;
  padding:8px 12px;
  /* 🔴 ГРАНИЦЫ СЕКЦИИ — одна, СНИЗУ, и того же цвета, что линия над шапкой (правка заказчика
     06.08: «2 и 4 должны быть как 1, 3 и 5 не нужны»).
     border-top СНЯТ намеренно. Он стоял ровно там же, где тень шапки (`#otHd th`,
     `box-shadow:0 1px 0 var(--hair-strong)`), и при `border-collapse:collapse` ПЕРЕКРЫВАЛ её:
     под шапкой рисовался светлый `--hair` #D5D1CB вместо `--hair-strong` #C0BEB3 — замер
     пикселей на бою показывал #D5D1CB, хотя в CSS у шапки задан #C0BEB3. То есть линия под
     шапкой принадлежала СЕКЦИИ, а не шапке, и при прокрутке уезжала вместе с таблицей.
     Сняв её, отдаём эту 1px-полосу тени шапки: цвет становится как у линии 1, а сама линия
     едет со sticky-шапкой, как и требовалось («2 прикреплена к верхнему блоку»). */
  /* Высота РОВНО 27px — столько строка секции занимала и раньше, когда у неё было ДВЕ рамки.
     Снятие border-top отняло 1px и дало дробные 26.5px, а дробная высота строки в этой
     таблице уже стоила ступеньки на границе (§9.21). Возвращаем целое явной высотой. */
  height:27px;box-sizing:border-box;
  border-top:0;border-bottom:1px solid var(--group-rule);
  /* border-left:0 — ОБЯЗАТЕЛЬНО: во встроенном <style> index.html осталось легаси-правило
     `tr.sec td{border-left:4px solid var(--ar-green)}`. Пока его не погасить, схлопывание
     рамки продолжает отодвигать ВСЕ ячейки таблицы от её левого края (на половину ширины
     рамки), и канал остаётся. molo.css грузится вторым, поэтому перекрывает. */
  border-left:0;
  box-shadow:inset 3px 0 0 var(--molo-charcoal)}
tr.sec.hw td{box-shadow:inset 3px 0 0 var(--brass);
  /* Верхняя граница ТОЛЬКО у «ФУРНИТУРЫ» (решение заказчика 07.08). У «ПРОФИЛЯ» её нет
     намеренно: та секция идёт первой, сразу под шапкой, и её border-top вставал на то же
     место, что линия под шапкой, — получалась вторая линия там же. «ФУРНИТУРА» стоит
     в середине таблицы, отделять её сверху нужно. `box-sizing:border-box` выше держит
     высоту строки те же 27px, рамка внутрь. */
  border-top:1px solid var(--group-rule)}
/* Первая строка товара СРАЗУ ПОД секцией своей верхней границы не рисует: иначе под полосой
   «ПРОФИЛЬ» встают две линии подряд (граница секции #C0BEB3 и групповая #B9B6AC) — та самая
   «пятая», которая не нужна. Сейчас они схлопываются, и какая победит — решают правила
   collapse, а не мы; правило делает исход однозначным. Групповые разделители МЕЖДУ группами
   (`tr.grp0 td`) остаются на месте — снимается только стык с секцией. */
tr.sec + tr td,tr.sec + tr td.prodimg{border-top:0}

/* тонированные состояния (всё в greige) */
tr.has td{background:var(--hasqty-tint)}
tr.ghas td.prodimg{background:var(--hasqty-tint-strong)}
tr.jumped td{background:var(--custom-tint)!important}

/* карточка изделия = белая "галерейная" плашка */
td.prodimg{background:var(--surface);border-right:1px solid var(--hair)}
td.prodimg img{border:1px solid var(--hair);border-radius:var(--radius);background:var(--surface)}
td.prodimg .noimg{border:1px solid var(--hair-faint);border-radius:var(--radius);background:var(--surface-2)}
td.prodimg .pname{font-family:var(--ui);font-size:12px;color:var(--text-2);line-height:1.3}
td.prodimg .meta{font-family:var(--ui);font-size:10px;color:var(--text-3)}
td.prodimg .meta b{font:600 9.5px/1 var(--disp);letter-spacing:1px;text-transform:uppercase;color:var(--text-2)}

/* поля ввода в таблице */
td.len .qgrp:has(input.cut){background:var(--custom-tint);border-color:var(--brass)}
/* правка3_qty: единый контрол количества «− | поле | +» — одна рамка, внутренние волосяные
   разделители между кнопками и зоной ввода; предупреждение кратности красит ВЕСЬ контрол. */
.qgrp{border:1px solid var(--hair-strong);border-radius:var(--radius);background:var(--surface)}
.qgrp .qstep{background:var(--surface-2);color:var(--molo-charcoal);font:600 13px/1 var(--ui)}
.qgrp .qstep:first-child{border-right:1px solid var(--hair)}
.qgrp .qstep:last-child{border-left:1px solid var(--hair)}
.qgrp .qstep:hover{background:var(--surface-sunk)}
.qgrp input{background:transparent;color:var(--text);font:400 12px/1 var(--ui)}
.qgrp:focus-within{border-color:var(--focus-ring);box-shadow:inset 0 0 0 1px var(--sel-fill)}
td.q .qgrp:has(input.notmult){border-color:var(--warn-line)}
td.q .qgrp:has(input.notmult) input,td.q .qgrp:has(input.notmult) .qstep{background:var(--warn-tint);color:var(--warn-ink)}
td.q .qgrp:has(input.notmult) input{color:var(--text)}
/* правка2_4: подсказка кратности БЕЗ uppercase/разрядки — иначе «MÚLTIPLO DE 6» (ES) не влезала в ячейку */
td.q .multhint{color:var(--warn-ink);font:600 9px/1 var(--ui);letter-spacing:0;text-transform:none}
td.q .pbtn{background:transparent;border:1px solid var(--hair);color:var(--text-4);
  border-radius:var(--radius);font:400 11px/1.4 var(--ui);cursor:default}
td.q .pbtn.on{color:var(--warn-ink);border-color:var(--warn-line);background:var(--warn-tint);cursor:pointer}
select.csel{background:var(--surface);border:1px solid var(--hair-strong);color:var(--text)}
select.csel:focus{outline:none;border-color:var(--focus-ring)}

/* обесцвеченная "зелёная" плашка комплекта */
.kitchip{background:var(--surface-2);border:1px solid var(--hair);color:var(--text-2);
  font:400 10px/1.5 var(--ui);border-radius:10px}
.kitchip:hover{background:var(--hover-list)}
.kitwrap.open .kitchip{background:var(--sel-fill)}
.kitpop{background:var(--surface);border:1px solid var(--hair-strong);border-radius:4px}
.kitpop b{font:600 10px/1 var(--disp);letter-spacing:1px;text-transform:uppercase;color:var(--text-2)}
.kitpop li{color:var(--text-2)}

/* ============ ПРАВАЯ ПАНЕЛЬ — блоттер + угольная рейка итогов ============ */
.bl .bhost{background:var(--panel-head);border-bottom:1px solid var(--hair-strong)}
.bl .bhead{background:var(--panel-head);color:var(--text-2);
  font-family:var(--disp);letter-spacing:1px}
.bl .bhead>span{border-left:1px solid var(--hair)}
.bl .bhead>span:first-child{border-left:0}
.bl .brow{border-bottom:1px solid var(--hair)}
.bl .brow>span{border-left:1px solid var(--hair);font-family:var(--ui);color:var(--text)}
.bl .brow>span:first-child{border-left:0;font-family:var(--ui)}
.bl .brow .q{color:var(--text-2)}
.bl .brow .s{font-weight:700;color:var(--text-strong)}
.bl .brow .x{color:var(--text-3)} .bl .brow .x:hover{color:var(--danger)}
/* Длина позиции в заявке. Раньше цвет был вписан в разметку (`style="color:#999"`) —
   мимо палитры и мимо темы; теперь токен. */
.bl .brow .blen,.bl .brow .bcol{color:var(--text-3)}

/* блок сумм = вторая угольная рейка, обрамляющая композицию снизу */
.bl .sum{background:var(--bar);color:var(--text-on-dark);font-family:var(--ui);padding:10px 12px}
.bl .sum .r{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;color:var(--text-on-dark-2)}
.bl .sum .r span{font:600 9.5px/1 var(--disp);letter-spacing:1px;text-transform:uppercase;color:var(--text-on-dark-2)}
.bl .sum .r b{color:var(--text-on-dark);font-variant-numeric:tabular-nums}
.bl .sum .r.big{border-top:1px solid var(--hair-on-dark);margin-top:5px;padding-top:9px}
.bl .sum .r.big b{color:var(--molo-white);font:700 22px/1 var(--disp)}

/* ============ ДИАЛОГ ЗАГРУЗКИ ЗАКАЗА ИЗ EXCEL ============
   Плашка в стилистике терминала: те же токены, что у панелей (шапка --panel-head, рамка
   --group-rule, радиус --radius=3px), БЕЗ теней и градиентов — бренд их запрещает
   (context/Brand_Style.md), поэтому «приподнятость» даёт затемнённая подложка, а не тень.
   z-index 400: выше шапок панелей (2) и липкой строки заголовков, ниже ничего нет. */
.impdlg{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(55,55,47,.44)}
.impdlg[hidden]{display:none}
.impdlg-card{width:min(430px,100%);background:var(--surface);
  border:1px solid var(--group-rule);border-radius:var(--radius);overflow:hidden}
/* Шапка диалога — ровно как шапка панели: те же 26px, шрифт и разрядка. */
.impdlg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:26px;box-sizing:border-box;padding:0 4px 0 10px;
  background:var(--panel-head);color:var(--text-2);border-bottom:1px solid var(--group-rule);
  font:700 10px/1 var(--disp);letter-spacing:2px;text-transform:uppercase}
.impdlg-x{flex:0 0 auto;width:20px;height:20px;padding:0;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--radius);
  color:var(--text-3);font:400 15px/1 var(--ui)}
.impdlg-x:hover{border-color:var(--brass);color:var(--brass)}
.impdlg-x:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
/* Зона перетаскивания. Пунктир — единственное место в терминале, где он уместен:
   он и означает «сюда можно бросить». При наведении файла становится сплошным. */
.impdlg-drop{margin:12px;padding:24px 16px;text-align:center;background:var(--surface-2);
  border:1px dashed var(--hair-strong);border-radius:var(--radius)}
.impdlg-drop.over{border-style:solid;border-color:var(--molo-charcoal);background:var(--hasqty-tint)}
.impdlg-ico{font:400 24px/1 var(--ui);color:var(--text-3)}
.impdlg-drop.over .impdlg-ico{color:var(--molo-charcoal)}
.impdlg-t1{margin-top:8px;font:600 13px/1.35 var(--ui);color:var(--text)}
.impdlg-or{margin:10px 0;font:400 10px/1 var(--disp);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-4)}
.impdlg-pick{cursor:pointer}
.impdlg-t2{margin-top:10px;font:400 11px/1 var(--ui);color:var(--text-3)}
.impdlg-note{padding:0 12px 12px;font:400 11px/1.45 var(--ui);color:var(--text-3)}
/* Узкий экран: плашка занимает почти всю ширину, поля ужимаются.
   Именно `screen and`, а не голое условие: печатная область A4 ≈703 CSS-px, и голое
   правило утащило бы мобильные отступы на бумагу (та же грабля, что в mobile.css). */
@media screen and (max-width:520px){
  .impdlg{padding:10px}
  .impdlg-drop{margin:10px;padding:18px 12px}
}
/* На бумаге диалога быть не может: если он открыт, Ctrl+P напечатал бы плашку поверх листа. */
@media print{.impdlg{display:none!important}}

/* основное действие */
.bl .act .ar-btn,.ar-btn{background:var(--molo-charcoal);color:var(--text-on-dark);
  border:0;border-radius:var(--radius);font:600 12px/1 var(--disp);letter-spacing:.8px;
  text-transform:uppercase;padding:11px 18px}
.ar-btn:hover{background:var(--bar-2)}
.ar-btn:active{background:var(--text-strong)}
.ar-btn:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.ar-btn.sec{background:transparent;border:1px solid var(--hair-on-dark);color:var(--text-on-dark-2);font-weight:400}

/* автономная панель итогов (brand.css) — приведена к той же рейке */
.ar-totals{background:var(--bar)}
.ar-kpi .v{color:var(--text-on-dark)}
.ar-kpi .l{color:var(--text-on-dark-2)}
.ar-kpi.sum .v{color:var(--molo-white)}
.ar-gross{color:var(--text-on-dark-2)}

/* ============ RTL (AR) — зеркалим полосы/выравнивание, убираем letter-spacing для арабского ============ */
[dir="rtl"] .ticker .t.lbl,[dir="rtl"] tr.sec td,[dir="rtl"] .pane .ph,
[dir="rtl"] thead th,[dir="rtl"] .bl .sum .r span{letter-spacing:0}
/* RTL: полоска переезжает вправо той же внутренней тенью (см. tr.sec td выше — border здесь
   нельзя, он схлопывался бы в край таблицы и давал канал уже у правого края). */
[dir="rtl"] tr.sec td{border-right:0;box-shadow:inset -3px 0 0 var(--molo-charcoal);text-align:right}
[dir="rtl"] tr.sec.hw td{box-shadow:inset -3px 0 0 var(--brass)}
[dir="rtl"] .wl .row.on{border-left:0;border-right:3px solid var(--sel-bar);
  padding-left:12px;padding-right:9px}
/* интеграция-фикс: дозеркаливаем пропущенные направленные свойства (границы/выравнивание/отступы) */
[dir="rtl"] thead th.l{text-align:right}
[dir="rtl"] .tools .lenrow .lf{text-align:right}
[dir="rtl"] td.prodimg{border-right:0;border-left:1px solid var(--hair)}
[dir="rtl"] .ticker .t{border-right:0;border-left:1px solid var(--hair-on-dark)}
/* langsel слева у логотипа в обеих раскладках; logout уходит в конец (margin-inline-start:auto) */
[dir="rtl"] .ticker .qb{margin-left:0;margin-right:4px}
[dir="rtl"] .bl .bhead>span,[dir="rtl"] .bl .brow>span{border-left:0;border-right:1px solid var(--hair)}
[dir="rtl"] .bl .bhead>span:first-child,[dir="rtl"] .bl .brow>span:first-child{border-right:0;border-left:0}

/* Котировки в шапке (правка 31.07): строка-тикер убрана, LME/скидка/EXW стоят справа
   в самой рейке, перед кнопкой выхода. Цвета — те же, что у контролов рейки. */
#hdr .ar-header .right{display:flex;align-items:center;gap:14px}
.ar-quick{display:flex;align-items:center;gap:0;color:var(--text-on-dark-2)}
.ar-quick .t{display:flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;
             border-right:1px solid var(--hair-on-dark);font:600 11px/1 var(--ui);
             color:var(--text-on-dark-2)}
.ar-quick .t:last-child{border-right:0;padding-right:12px}
.ar-quick .t.lbl{letter-spacing:1px;text-transform:uppercase;font-size:10px}
.ar-quick input.q,.ar-quick .disc2 input{background:transparent;color:var(--text-on-dark);
             border:1px solid var(--hair-on-dark);border-radius:var(--radius);
             padding:4px 6px;font:600 11px/1 var(--ui);text-align:right}
.ar-quick input.q:focus,.ar-quick .disc2 input:focus{outline:none;border-color:var(--text-on-dark-2)}
.ar-quick .qb{background:transparent;color:var(--text-on-dark-2);border:1px solid var(--hair-on-dark);
             border-radius:var(--radius);padding:3px 6px;line-height:1;cursor:pointer}
.ar-quick .qb:hover{border-color:var(--text-on-dark-2);color:var(--text-on-dark)}
/* Шапки панелей одной высоты — в тёмной теме те же 26px, что и в основном терминале. */
.pane .ph{height:26px;padding:0 10px;box-sizing:border-box;display:flex;align-items:center}