/* ---------- токены: одна система на всё ---------- */
:root{
  /* шрифт: шесть ступеней и крупные цифры, насыщенность 400 / 600 / 700 */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:34px;
  --fs-4xl:36px;     /* только подпись тура на широком экране без увеличения страницы */
  --fs-field:17px;   /* поле ввода количества: от 16 px Safari на iPhone не увеличивает страницу */
  --fw-n:400; --fw-b:600; --fw-x:700;
  --lh:1.45; --lh-text:1.55;
  /* радиусы: метки, кнопки и поля, карточки и окна, переключатели */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  /* высоты контролов */
  --h-sm:32px; --h-md:36px; --h-lg:40px;
  /* отступы шагом 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;

  /* светлая палитра, текст не ниже AA */
  --bg:#f4f1ec; --surface:#fffdf9; --surface-2:#f8f4ee; --ink:#1f2a37; --ink-2:#465262; --muted:#656b74;
  --line:#e3dbcf; --line-2:#efe9e1; --field:var(--bg); --field-line:#d6ccbf;
  --head:#18263a; --head-2:#22344b; --head-ink:#eef1f5; --head-muted:#a6b2c0; --head-line:transparent;
  --accent:#9a5b33; --accent-ink:#fff; --accent-soft:#f3e6da; --accent-head:#e0a57a;
  /* заливка главных кнопок, логотипа и включённого выключателя; в тёмной темнее текстового акцента */
  --accent-fill:var(--accent);
  --ok:#2a754f; --ok-soft:#e5f2e9; --bad:#b9442f; --bad-soft:#fae8e3;
  --warn:#866400; --warn-fill:#bf8418; --warn-soft:#f8efd8;   /* текст янтарного желтее акцента: «−3 013 ₸» не того же тона, что кнопка рядом */
  --info:#2f5f86; --info-soft:#e7eff7;
  /* графики */
  --c-grid:#ece6dd; --c-grey:#87919d; --c-ink:#1f2a37; --c-band:#e6d3c4;
  /* полоска запаса: свой запас, «благодаря заказу» (наш расчёт, приглушённый акцент), пустая ось */
  --c-own:#c9ccd0; --c-ord:#c29c82; --c-track:#efe9e1;
  /* подсветка изменённой строки и наведение на строку */
  --flash:color-mix(in srgb,var(--accent) 18%,var(--surface)); --row-hover:var(--surface-2);
  /* плавающие слои: тур, тень, затемнение, край листа и карточки; подпись тура светлым по тёмному (тур всегда в светлой теме) */
  --tour-bg:var(--head); --tour-line:transparent; --tour-muted:var(--head-muted); --tour-ink:#fff; --tour-ink-2:#d8dee6;
  --float-line:transparent; --float-head:var(--head); --float-x:var(--head-2);
  --shadow-c:rgba(31,42,55,.12); --shade:rgba(10,15,22,.4);
  /* высота и ширина окна в пикселях страницы: под увеличением (html.zoomed) vh и vw растут вместе с ней, там они делятся обратно */
  --view-h:100vh; --view-w:100vw;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#11171f; --surface:#19212b; --surface-2:#1e2732; --ink:#e7eaee; --ink-2:#c3cad3; --muted:#8c96a2;
  --line:#313c49; --line-2:#26303b; --field:var(--bg); --field-line:#4a5768;
  --head:#0d131a; --head-2:#1a2431; --head-ink:#e7eaee; --head-muted:#8c96a2; --head-line:#313c49;
  --accent:#d49b70; --accent-ink:#1a1209; --accent-soft:#33271d; --accent-head:#d49b70; --accent-fill:#b98058;
  --ok:#72c79c; --ok-soft:#1b3127; --bad:#ef8d79; --bad-soft:#3a231f;
  --warn:#e8c55a; --warn-fill:#d6a143; --warn-soft:#352c1a;
  --info:#8fbbe2; --info-soft:#1c2b3b;
  --c-grid:#26303c; --c-grey:#6c7988; --c-ink:#c3cad3; --c-band:#4f443d;
  --c-own:#46515e; --c-ord:#94715a; --c-track:#252e39;
  --flash:var(--accent-soft); --row-hover:color-mix(in srgb,var(--ink) 6%,var(--surface));
  /* лист и карточка светлее затемнения и с краем: иначе в тёмной теме они тонут */
  --float-line:#3a4654; --float-head:var(--head-2); --float-x:var(--line);
  --shadow-c:rgba(0,0,0,.45); --shade:rgba(4,7,11,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-padding-top:calc(var(--head-pin,60px) + var(--s2))}
body{background:var(--bg);color:var(--ink);font:var(--fw-n) var(--fs-md)/var(--lh) var(--font);
  -webkit-font-smoothing:antialiased;padding-bottom:calc(var(--dock-h,72px) + var(--s4))}
.wrap{max-width:1220px;margin:0 auto;padding:0 max(var(--s5),env(safe-area-inset-right)) 0 max(var(--s5),env(safe-area-inset-left))}
button,input,select{font-family:inherit}
button{font-size:inherit;cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ---------- шапка ---------- */
.top{background:var(--head);color:var(--head-ink);position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 var(--head-line),0 2px 12px var(--shadow-c)}
.top-in{display:flex;align-items:center;gap:var(--s4);min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--s3)}
.logo{width:36px;height:36px;border-radius:var(--r-md);background:var(--accent-fill);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:var(--fw-x)}
.brand b{display:block;font-size:var(--fs-md);font-weight:var(--fw-x);line-height:1.2}
.brand small{color:var(--head-muted);font-size:var(--fs-xs)}
.testflag{font-size:var(--fs-xs);font-weight:var(--fw-b);letter-spacing:.03em;line-height:18px;color:var(--accent-head);
  border:1px solid color-mix(in srgb,var(--head-muted) 40%,var(--head));border-radius:var(--r-sm);padding:0 var(--s1);margin-left:var(--s1);white-space:nowrap}
.tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin-left:auto}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;color:var(--head-muted);height:var(--h-md);padding:0 var(--s3);border-radius:var(--r-md);
  white-space:nowrap;font-size:var(--fs-md)}
.tabs button.on{background:var(--head-2);color:var(--head-ink)}
@media (hover:hover){.tabs button:hover{color:var(--head-ink)}}
.top-tools{display:flex;gap:var(--s2);align-items:center}
.tbtn{background:var(--head-2);border:0;color:var(--head-ink);border-radius:var(--r-md);height:var(--h-md);min-width:var(--h-md);
  padding:0 var(--s3);font-size:var(--fs-sm);font-weight:var(--fw-b);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.tbtn.accent{background:var(--accent-fill);color:var(--accent-ink)}
#b-theme{padding:0}
.tbtn svg{width:16px;height:16px}
/* значок темы говорит, что будет по нажатию: луна включит тёмную, солнце вернёт светлую */
#b-theme .i-sun,:root[data-theme="dark"] #b-theme .i-moon{display:none}
:root[data-theme="dark"] #b-theme .i-sun{display:block}
/* телефон: строка бренда уезжает при прокрутке, приколоты только вкладки 4×1 по 48 px
   (--pin ставит JS: минус высота строки бренда); «Демо-тур» и тема значками 44 px */
@media (max-width:640px){
  .wrap{padding:0 max(var(--s4),env(safe-area-inset-right)) 0 max(var(--s4),env(safe-area-inset-left))}
  .top{top:var(--pin,-56px)}
  .top-in{gap:0 var(--s2);min-height:0}
  .brand{flex:1 1 0;min-width:0;min-height:56px;gap:var(--s2)}
  .brand > div{min-width:0}
  .logo{width:32px;height:32px;flex:none}
  .brand small{display:block;line-height:1.35}
  .brand .pt{display:none}
  .brand .wd{font-size:0}
  .brand .wd::before{content:attr(data-s);font-size:var(--fs-xs)}
  .testflag{border:0;padding:0;margin-left:0;letter-spacing:0;font-weight:var(--fw-n);text-transform:lowercase}
  .testflag::before{content:"·\00a0";color:var(--head-muted);font-weight:var(--fw-n)}
  .tbtn{width:44px;height:44px;padding:0}
  .tbtn .tt{display:none}
  .tabs{order:3;flex:1 1 100%;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);padding-bottom:var(--s1)}
  .tabs button{height:44px;padding:0 var(--s1)}
}
/* планшет: в одну строку не помещается — бренд и кнопки сверху, вкладки второй строкой */
@media (min-width:641px) and (max-width:920px){
  .top-in{row-gap:0;padding-top:var(--s2)}
  .brand{flex:1 1 0;min-width:0}
  .tabs{order:3;flex:1 1 100%;margin:var(--s1) 0 var(--s2)}
}
/* узкий телефон (меньше 360): вкладки мельче, чтобы подписи не обрезались */
@media (max-width:359px){.tabs button{font-size:var(--fs-sm)}}
/* телефон боком: экран низкий, шапка уезжает целиком */
@media (max-height:500px){.top{position:static}}

.tab{display:none;padding:var(--s6) 0 var(--s3)}
.tab.on{display:block}
/* телефон: первая проблема с ценой на первом экране (390×664 с пальцевой раскладкой): поля плотнее,
   «Учесть» под списком проблем, чтобы проблемы шли сразу за лентой недели */
@media (max-width:640px){
  .tab{padding-top:var(--s4)}
  #tab-order.on{display:flex;flex-direction:column}
  #tab-order > #scen{order:1;margin-top:var(--s4)}
  #tab-order > h2:not(.att-h),#tmeta,#tbl-today,#later{order:2}
}
h2{font-size:var(--fs-lg);font-weight:var(--fw-b);margin:var(--s7) 0 var(--s3);display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
h2 small{font-weight:var(--fw-n);font-size:var(--fs-sm);color:var(--muted)}
.lead{color:var(--ink-2);margin:0 0 var(--s4);max-width:820px;line-height:var(--lh-text)}
/* карточки плоские, с границей; тень только у плавающих слоёв */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---------- сводка дня: следующий шаг слева, деньги справа ---------- */
.brief{padding:var(--s5) var(--s6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s6);align-items:center}
.brief p{margin:0}
.brief .say{font-size:var(--fs-xl);line-height:1.3;font-weight:var(--fw-b);letter-spacing:-.005em}
.brief .cond{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s1)}
.brief .jump{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--bad);text-decoration-thickness:2px;text-underline-offset:5px}
@media (hover:hover){.brief .jump:hover{color:var(--bad)}}
.brief .big{text-align:right}
.brief .v{font-size:var(--fs-md);font-weight:var(--fw-b);line-height:1.2}
.brief .v b{font-size:var(--fs-3xl);font-weight:var(--fw-x);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.brief .ok{color:var(--ok)} .brief .bad{color:var(--bad)}
.brief .hist{background:none;border:0;padding:0;margin-top:var(--s1);font-size:var(--fs-xs);color:var(--muted);cursor:pointer}
@media (hover:hover){.brief .hist:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}}
@media (max-width:760px){.brief{grid-template-columns:1fr;padding:var(--s4)}.brief .big{text-align:left}.brief .say{font-size:var(--fs-lg)}}
@media (max-width:640px){.brief{padding:var(--s3) var(--s4)}}

/* ---------- неделя одной лентой: колонки через линию, на узком экране листается ---------- */
.cal{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));margin-top:var(--s3);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.day{min-width:0;padding:var(--s2) var(--s2) var(--s3);border-left:1px solid var(--line-2);scroll-snap-align:start}
.day:first-child{border-left:0}
.day.today{box-shadow:inset 0 3px 0 var(--accent)}
.day.risk{background:var(--bad-soft)}
.day .h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-xs);color:var(--muted)}
.day .h b{font-size:var(--fs-md);color:var(--ink);font-weight:var(--fw-x)}
.day.today .h span{color:var(--accent);font-weight:var(--fw-b)}
.day .ev{font-size:var(--fs-xs);line-height:1.3;margin-top:var(--s1);display:flex;align-items:baseline;gap:var(--s1);color:var(--ink-2)}
/* длинное слово («Дистрибьютор») в узкой колонке переносится внутри колонки, а не залезает на соседний день */
.day .ev > span{min-width:0;overflow-wrap:anywhere}
.day .ev i,.cal-note i{flex:none;display:inline-block;width:8px;height:8px;background:var(--c-grey);transform:translateY(-1px)}
/* форма значка: ▼ привезут, квадрат «заказать», точка нехватка, кольцо списание */
.day .ev.in i,.cal-note i.in{height:7px;clip-path:polygon(0 0,100% 0,50% 100%)}
/* рутина тихая: «заказать» узнаётся по квадрату, цветной текст в ленте только у проблем */
.day .ev.dl{color:var(--ink-2)}
.day.today .ev.dl{font-weight:var(--fw-b);color:var(--ink)}
.day .ev.dl i,.cal-note i.dl{background:var(--accent);border-radius:2px}
/* сегодняшний заказ уже отправлен: галочка вместо квадрата */
.day .ev.sent{color:var(--ok);font-weight:var(--fw-b)}
.day .ev.sent b{flex:none;font-size:var(--fs-xs)}
.day .ev.bad{color:var(--bad);font-weight:var(--fw-b)}
.day .ev.warn{color:var(--warn);font-weight:var(--fw-b)}
.day .ev.mut{color:var(--muted)}
.day .ev.sh i{border-radius:50%;background:var(--bad)}
.day .ev.warn.sh i{background:var(--warn-fill)}
.day .ev.ws i{border-radius:50%;background:none;box-shadow:inset 0 0 0 2px var(--warn-fill)}
.day .ev.mut.ws i{box-shadow:inset 0 0 0 1.5px var(--c-grey)}
.day .ev[data-open]{cursor:pointer}
@media (hover:hover){.day .ev[data-open]:hover span{text-decoration:underline;text-underline-offset:2px}}
.cal-note{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s2) 0 0;font-size:var(--fs-xs);color:var(--muted)}
.cal-note > span{display:inline-flex;align-items:baseline;gap:var(--s1)}
/* планшет: вся неделя без прокрутки, подписи не режутся посреди слова */
@media (min-width:641px) and (max-width:1023px){.cal{grid-template-columns:repeat(8,minmax(86px,1fr))}.day{padding:var(--s2) 6px var(--s3)}}
/* телефон: три дня и край четвёртого, чтобы было видно, что лента листается; легенда одной строкой.
   Колонки такой ширины, что «Обжарщик утром» и «ферма, пекарня» на 390 в одну строку: лента ниже, проблемы выше */
@media (max-width:640px){
  .cal{grid-template-columns:repeat(8,calc(100% / 3.15))}
  .day{padding:var(--s2) var(--s1) var(--s2) var(--s2)}
  .cal-note{gap:var(--s1) var(--s3)}
  .cal-note .lx{display:none}
}

/* ---------- учесть: переключатели условий, одной строкой ---------- */
.ctl{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s4)}
.ctl .lbl{font-size:var(--fs-sm);color:var(--muted)}
#scen{flex-wrap:nowrap;overflow-x:auto;gap:var(--s1);scrollbar-width:none}
#scen::-webkit-scrollbar{display:none}
#scen .lbl{flex:none;margin-right:var(--s1)}
/* телефон: лента до краёв экрана, крайний переключатель виден наполовину — подсказка, что листается;
   подпись «Учесть:» уходит (для диктора она в aria-label), чтобы третье условие выглядывало из-за края на 360–430 */
@media (max-width:640px){
  #scen{margin:var(--s2) calc(-1 * var(--s4)) 0;padding:0 var(--s4)}
  #scen .lbl{display:none}
  #scen .chip{gap:6px;padding:0 var(--s2) 0 var(--s1)}
}
/* форма выключателя: решение живёт в строке проблемы, у условия своя форма */
.chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--s2);height:var(--h-md);padding:0 var(--s3) 0 var(--s2);
  border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s}
@media (hover:hover){.chip:hover{background:var(--surface)}}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip .sw{position:relative;flex:none;width:30px;height:18px;border-radius:var(--r-pill);background:var(--c-grey);transition:background .15s}
.chip .sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:transform .15s}
.chip.on{color:var(--ink);font-weight:var(--fw-b)}
.chip.on .sw{background:var(--accent-fill)}
.chip.on .sw::after{transform:translateX(12px);background:var(--accent-ink)}
.chip input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- требует внимания: проблема, цена, решение в одной строке ---------- */
.att-h .cnt{margin-left:auto;font-size:var(--fs-sm);font-weight:var(--fw-n);color:var(--muted)}
.att-h .cnt.ok{color:var(--ok);font-weight:var(--fw-b)}
/* телефон: первая проблема на первом экране (390×664 — видимая высота Safari) */
@media (max-width:640px){.att-h{row-gap:0;margin:var(--s4) 0 var(--s2)}.att-h .cnt{margin-left:0;flex-basis:100%}.brief .v b{font-size:var(--fs-2xl)}}
.att-card{padding:var(--s1) 0}
.att{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;column-gap:var(--s4);row-gap:var(--s2);align-items:center;
  padding:var(--s3) var(--s5);border-top:1px solid var(--line-2)}
.att:first-child{border-top:0}
/* общие колонки на всю карточку: цифры и кнопки встают ровно друг под другом */
/* первая и последняя колонки auto: в них входят поля строки, иначе точка налезает на текст */
#attention{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:var(--s4);padding:0;overflow:hidden}
#attention > *{grid-column:1/-1}
@supports (grid-template-columns:subgrid){#attention > .att{grid-template-columns:subgrid}}
/* форма точки тоже говорит: нехватка сплошная, списание кольцом; стоит на уровне первой строки заголовка */
.att .dot{width:10px;height:10px;border-radius:50%;background:var(--muted);align-self:start;margin-top:6px}
.att.chain .dot{margin-top:calc(6px + var(--fs-xs) * 1.45)}
.att.bad .dot{background:var(--bad)}
.att.warn .dot{background:transparent;box-shadow:inset 0 0 0 2.5px var(--warn-fill)}
.att.warn.is-warn .dot{background:var(--warn-fill);box-shadow:none}   /* после правки кончится: точка, не кольцо */
.att.info .dot{background:var(--info);width:8px;height:8px;margin-left:1px}
.att.ok .dot{background:var(--ok)}
.att .tx{min-width:0}
.att .t{font-weight:var(--fw-b)}
.att .t[data-ing]{cursor:pointer}
@media (hover:hover){.att .t[data-ing]:hover{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}}
.att .d{display:block;color:var(--ink-2);font-size:var(--fs-sm)}
.att .cause{display:block;font-size:var(--fs-xs);color:var(--muted)}
.att .m{grid-column:3;font-size:var(--fs-lg);font-weight:var(--fw-x);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.att.bad .m{color:var(--bad)} .att.warn .m{color:var(--warn)}
.att .acts{grid-column:4;display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.att .m:empty,.att .acts:empty{display:none}
/* первое решение главное, второе контуром */
.btn.alt{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
/* решено: строка остаётся на месте, зелёная, с «было → стало» */
.att.done{background:var(--ok-soft)}
.att.done .dot{width:auto;height:auto;background:none;color:var(--ok);font-weight:var(--fw-x);line-height:var(--lh);margin-top:0;align-self:center}
.att.done.chain .dot{align-self:start;margin-top:calc(var(--fs-xs) * 1.45)}
.att.done .m{color:var(--ok);font-size:var(--fs-md)}
.undo{height:44px;padding:0 var(--s3);border:0;border-radius:var(--r-md);background:none;color:var(--ok);font-size:var(--fs-sm);font-weight:var(--fw-b)}
@media (hover:hover){.undo:hover{background:color-mix(in srgb,var(--ok) 14%,transparent)}}
.gone{margin:0;padding:var(--s3) var(--s5);border-top:1px solid var(--line-2);font-size:var(--fs-sm);color:var(--muted)}
.gone .lnk{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--field-line);text-underline-offset:3px}
@media (hover:hover){.gone .lnk:hover{color:var(--accent)}}
/* ноутбук: у строки без кнопок (нехватка после правки: «Вернуть» в карточке и в панели) текст берёт и место кнопок, цифра у края */
@media (min-width:1101px){
  #attention > .att:has(> .acts:empty) > .tx{grid-column:2 / 4}
  #attention > .att:has(> .acts:empty) > .m{grid-column:4}
}
/* планшет: кнопки решений под текстом, цифра справа, «Отменить» остаётся в строке */
@media (min-width:761px) and (max-width:1100px){
  #attention > .att .acts{grid-column:2 / -1;grid-row:2;justify-content:flex-start}
  #attention > .att.done .acts{grid-column:4;grid-row:1}
}
/* на узком экране цифра и кнопки уходят под текст; кнопке можно в две строки */
@media (max-width:760px){
  #attention{display:block}
  #attention > .att,.att{grid-template-columns:12px minmax(0,1fr);padding:var(--s3) var(--s4)}
  .att .m,.att .acts{grid-column:2;text-align:left;justify-content:flex-start}
  /* кнопки решений ровным столбиком на всю ширину текста */
  .att .acts .btn{flex:1 1 100%;justify-content:flex-start;white-space:normal;height:auto;min-height:var(--h-sm);padding-top:var(--s1);padding-bottom:var(--s1);text-align:left;line-height:1.3}
  /* решённое: «было → стало» и «Отменить» на одной строке */
  #attention > .att.done{grid-template-columns:12px minmax(0,1fr) auto}
  .att.done .tx{grid-column:2 / -1}
  .att.done .m{grid-column:2;grid-row:2}
  .att.done .acts{grid-column:3;grid-row:2}
}
/* узкая карточка (продукт, телефон): по ширине самой карточки, а не окна — цифра и кнопки под текстом */
.att-card{container-type:inline-size}
@container (max-width:640px){
  .att{grid-template-columns:12px minmax(0,1fr);padding:var(--s3) var(--s4)}
  .att .m,.att .acts{grid-column:2;text-align:left;justify-content:flex-start}
  .att .acts .btn{flex:1 1 100%;justify-content:flex-start;white-space:normal;height:auto;min-height:var(--h-sm);padding-top:var(--s1);padding-bottom:var(--s1);text-align:left;line-height:1.3}
  /* решённое в карточке: «было → стало» и «Отменить» на одной строке */
  .att.done{grid-template-columns:12px minmax(0,1fr) auto}
  .att.done .tx{grid-column:2 / -1}
  .att.done .m{grid-column:2;grid-row:2}
  .att.done .acts{grid-column:3;grid-row:2}
}
details.notes{border-top:1px solid var(--line-2)}
details.notes summary{padding:var(--s3) var(--s5);color:var(--muted);font-size:var(--fs-sm);cursor:pointer;list-style:none}
details.notes summary::-webkit-details-marker{display:none}
details.notes summary::before{content:"›";display:inline-block;margin-right:var(--s2);transition:transform .15s}
details.notes[open] summary::before{transform:rotate(90deg)}
.allgood{padding:var(--s4) var(--s5);color:var(--ok);font-weight:var(--fw-b)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--ink);color:var(--surface);border:0;
  border-radius:var(--r-md);height:var(--h-lg);padding:0 var(--s4);font-weight:var(--fw-b);font-size:var(--fs-md);white-space:nowrap}
.btn.accent{background:var(--accent-fill);color:var(--accent-ink)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--field-line)}
.btn.sm{height:var(--h-sm);padding:0 var(--s3);font-size:var(--fs-sm)}
.btn:disabled{opacity:.45;cursor:default}

/* ---------- таблицы заказа: имя, запас на общей оси дней, степпер ---------- */
/* над таблицей: общие множители одной строкой и легенда полоски */
.tmeta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s5);margin:calc(-1 * var(--s1)) 0 var(--s2)}
.tmeta p{margin:0}
.tnote{font-size:var(--fs-sm);color:var(--muted)}
.tlegend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-xs);color:var(--muted)}
.tlegend span{display:inline-flex;align-items:center;gap:var(--s1)}
.tlegend i{display:inline-block;width:14px;height:8px;border-radius:2px}
.tlegend .own{background:var(--c-own)}
.tlegend .ord{background:var(--c-ord)}
.tlegend .dv{width:10px;height:6px;border-radius:0;background:var(--ink-2);clip-path:polygon(0 0,100% 0,50% 100%)}
.tlegend .nx{width:2px;height:12px;border-radius:1px;background:var(--ink-2)}

.tbl{overflow:hidden}
/* одинаковые колонки в обеих таблицах: имя | запас | заказ | шеврон */
table.o{width:100%;border-collapse:collapse;table-layout:fixed}
table.o .k-name{width:34%}
table.o .k-qty{width:288px}
table.o .k-chev{width:36px}
table.o th{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-n);text-align:left;padding:var(--s3) var(--s3) var(--s2);white-space:nowrap;border-bottom:1px solid var(--line)}
table.o td{padding:var(--s3);border-top:1px solid var(--line-2);vertical-align:middle}
table.o .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.o td.c-qty{text-align:right}
table.o tr.r{cursor:pointer}
@media (hover:hover){table.o tr.r:hover td{background:var(--row-hover)}}
/* изменённая строка: мягкая подсветка держится и медленно гаснет */
/* фон у всей строки, а не у ячеек: на телефоне строка — сетка, и ячейки подсветились бы пятнами */
table.o tr.flash{animation:flash 6s ease-out}
@keyframes flash{0%,40%{background:var(--flash)}100%{background:transparent}}

.pn{min-width:0}
.pn b{display:block;font-size:var(--fs-md);font-weight:var(--fw-b);line-height:1.35}
.pn .go{display:none}
.pn .sup{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:var(--fs-xs);color:var(--muted)}
.pn .sup small{font-size:inherit}
.pn .sup:has(.rc){margin-top:var(--s1)}
/* причина прямоугольной меткой; цвет только у того, что требует действия, и у решений */
.rc{font-size:var(--fs-xs);line-height:20px;padding:0 var(--s2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2);white-space:nowrap}
.rc.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.rc.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.rc.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}

/* статус: у нормальных строк тихо, цветом только проблемы */
.c-cov .st{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.35}
.c-cov .st.warn,.c-cov .st.bad{font-weight:var(--fw-b)}
.c-cov .st.warn,.c-cov .sb.warn{color:var(--warn)}
.c-cov .st.bad,.c-cov .sb.bad{color:var(--bad)}
.c-cov .sb{font-size:var(--fs-xs);line-height:1.35}
/* полоска: 14 дней от сегодня одинаково во всех строках, выходные едва подложены */
.tl{position:relative;height:16px;margin-top:var(--s1)}
.tl i{position:absolute;display:block}
.tl .tr{left:0;right:0;top:6px;height:8px;border-radius:2px;background:var(--c-track)}
.tl .we{top:3px;bottom:0;border-radius:2px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.tl .own,.tl .ord,.tl .hole{top:6px;height:8px}
.tl .own{background:var(--c-own)}
.tl .ord{background:var(--c-ord)}
.tl .hole,.tlegend .hole{background:repeating-linear-gradient(135deg,var(--bad) 0 2px,var(--bad-soft) 2px 5px)}
/* ▼ приедет заказ, черта — следующая поставка; ободок цветом карточки, чтобы не сливались с полоской */
.tl .dv{top:0;width:10px;height:6px;margin-left:-5px;background:var(--ink-2);clip-path:polygon(0 0,100% 0,50% 100%)}
.tl .nx{top:3px;width:2px;height:13px;margin-left:-1px;border-radius:1px;background:var(--ink-2);outline:1px solid var(--surface)}
/* шапка оси: дни недели, сегодня акцентом, выходные подложены */
.axis{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));text-align:center;font-size:var(--fs-xs);line-height:20px;color:var(--muted)}
.axis .we{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink-2)}
.axis .td{color:var(--accent);font-weight:var(--fw-b)}

/* степпер «− 108 л +»: кнопки 44 px, шаг одна упаковка, число крупно */
/* «было → стало» под степпером на всех ширинах: появляется после первого нажатия и не сдвигает кнопки из-под курсора */
.qrow{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1)}
.qrow .chg{order:2}
.stp{display:inline-flex;align-items:stretch;flex:none;height:44px;border:1px solid var(--field-line);border-radius:var(--r-md);background:var(--field);overflow:hidden}
.stp button{border:0;margin:0;padding:0;background:none;font:inherit;color:var(--ink-2)}
.stp button:focus-visible,.stp .sv-in:focus{outline:2px solid var(--accent);outline-offset:-2px}
.stp .minus,.stp .plus{width:44px;font-size:var(--fs-xl);line-height:1}
@media (hover:hover){.stp .minus:hover:not(:disabled),.stp .plus:hover{background:var(--surface-2);color:var(--accent)}}
.stp .minus:disabled{opacity:.35;cursor:default}
.stp .sv,.stp .sv-in{width:88px;border-left:1px solid var(--field-line);border-right:1px solid var(--field-line);font-variant-numeric:tabular-nums}
.stp .sv{padding:0 var(--s1);color:var(--ink);white-space:nowrap;cursor:text}
.stp .sv b{font-size:var(--fs-lg);font-weight:var(--fw-x)}
.stp .sv .u{font-size:var(--fs-sm);color:var(--muted)}
@media (hover:hover){.stp .sv:hover{background:var(--surface)}}
.stp .sv-in{height:100%;padding:0 var(--s1);border-top:0;border-bottom:0;background:var(--surface);color:var(--ink);
  font-size:var(--fs-field);font-weight:var(--fw-x);text-align:center}
/* правка управляющего: рамка акцентом */
.stp.ed{border-color:var(--accent);background:var(--accent-soft)}
/* «было → стало»: старое зачёркнуто и приглушено, разница нейтральная; держится до следующего пересчёта */
.chg{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.chg s{text-decoration-thickness:1.5px}
.delta{font-weight:var(--fw-b);line-height:20px;padding:0 var(--s1);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.qsub{margin-top:var(--s1);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.qsub > span + span::before{content:" · "}
/* «Следующие заказы»: только число, править в день заказа */
.qv{font-variant-numeric:tabular-nums;white-space:nowrap}
.qv b{font-size:var(--fs-md);font-weight:var(--fw-b)}
.qv .u{font-size:var(--fs-sm);color:var(--muted)}
.chev{color:var(--muted);font-size:var(--fs-lg);text-align:center}

/* заголовок группы: поставщик, когда заказать и когда привезут; сумма в колонке заказа */
table.o tr.g td{padding:var(--s4) var(--s3) var(--s2);font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--line)}
table.o tbody.grp:first-of-type tr.g td{border-top:0}
table.o tr.g b{color:var(--ink);font-weight:var(--fw-b)}
table.o tr.g .n{color:var(--ink-2);font-weight:var(--fw-b)}
table.o tr.z td{padding:var(--s2) var(--s3) var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--field-line);text-underline-offset:3px}
@media (hover:hover){.lnk:hover{color:var(--accent)}}
/* «Не заказываем»: свёрнуто под таблицей, шапка оси не повторяется */
details.zero thead{display:none}
details.zero table.o{border-top:1px solid var(--line-2)}
/* «Следующие заказы» на телефоне свёрнуты в строку */
.later-t{display:none}

@media (max-width:1100px){
  table.o .k-name{width:32%}
  table.o .k-qty{width:232px}
}
/* узкая ось: подписаны только сегодня и выходные, у выходных одна подпись «сб» (иначе «сбвс» слипается) */
@media (max-width:960px){.axis span:not(.we):not(.td){visibility:hidden}.axis .we + .we{color:transparent}}
/* телефон: имя и статус слева, степпер справа на всю высоту строки;
   колонка заказа одной ширины во всех строках, чтобы полоски шли по одной оси */
@media (max-width:760px){
  table.o,table.o tbody{display:block}
  table.o thead,table.o colgroup{display:none}
  table.o tr.r{display:grid;grid-template-columns:minmax(0,1fr) 178px;grid-template-areas:"name qty" "cov qty";gap:var(--s1) var(--s4);
    padding:var(--s3) var(--s4);border-top:1px solid var(--line-2)}
  table.o tbody > tr.r:first-child{border-top:0}
  table.o tr.r td{display:block;border:0;padding:0}
  table.o td.c-name{grid-area:name}
  table.o td.c-cov{grid-area:cov}
  table.o td.c-qty{grid-area:qty;align-self:center}
  table.o tr.r td.chev{display:none}
  .pn .go{display:inline;margin-left:var(--s1);color:var(--muted);font-weight:var(--fw-n)}
  table.o tr.g{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s4) var(--s1);border-top:1px solid var(--line)}
  table.o tbody.grp:first-of-type tr.g{border-top:0}
  table.o tr.g td,table.o tr.z td{display:block;border:0;padding:0}
  table.o tr.g td:last-child{display:none}
  table.o tr.z{display:block;padding:var(--s1) var(--s4) var(--s3)}
  .qsub{white-space:normal;text-align:right}
  .qsub > span{display:block}
  .qsub > span + span::before{content:none}
}
@media (max-width:640px){
  /* на телефоне полоска только у проблем и во всю ширину строки, причин не больше двух;
     статус и подпись к нему слева под именем, степпер справа: строка 72–150 px */
  table.o tr.r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name qty" "st qty" "sb qty" "tl tl";grid-template-rows:auto auto 1fr auto;gap:0 var(--s3)}
  table.o tr.r td.c-cov{display:contents}
  table.o td.c-cov .st{grid-area:st;margin-top:var(--s1)}
  table.o td.c-cov .tl{grid-area:tl;margin-top:var(--s2)}
  table.o td.c-cov .sb{grid-area:sb}
  table.o tr.r.ok .tl{display:none}
  .pn .rc:nth-of-type(n+3){display:none}
  .tlegend{display:none}   /* полоска на телефоне только у проблем, её объясняет подпись */
  .stp .sv,.stp .sv-in{width:76px}
  /* под степпером одной строкой «4 коробки · 28 800 ₸», размер упаковки в карточке продукта */
  .qsub > span{display:inline}
  .qsub > span + span::before{content:" · "}
  .qsub .pz{display:none}
  .later-h{display:none}
  .later-t{display:flex;align-items:center;width:100%;min-height:48px;margin-top:var(--s5);padding:var(--s3) var(--s4);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:var(--fw-b);text-align:left;color:var(--ink)}
  .later-t span{font-weight:var(--fw-n);color:var(--ink-2)}
  .later-t::after{content:"›";margin-left:auto;color:var(--muted);font-size:var(--fs-lg);transition:transform .15s}
  .later.open .later-t::after{transform:rotate(90deg)}
  .later:not(.open) #tbl-later{display:none}
  .later.open #tbl-later{margin-top:var(--s2)}
  /* заголовок группы: «привезут …» второй строкой, без «·» в конце первой */
  table.o tr.g .gdv{display:block}
  table.o tr.g .gsep{display:none}
}

/* ноутбук и проектор (1366×768 и всё, что увеличено до этого кадра): мелкий текст, который читают из зала, на ступень крупнее.
   Без условия на высоту: Chrome в окне на ноутбуке даёт 1366×650–690, а телефоны и планшеты и так отсекает hover:hover */
@media (min-width:1280px) and (hover:hover){
  .day .ev,.brief .hist,.att .cause,.rc{font-size:var(--fs-sm)}
  .att .d{font-size:var(--fs-md)}
  .att.chain .dot{margin-top:calc(6px + var(--fs-sm) * 1.45)}
  .att.done.chain .dot{margin-top:calc(var(--fs-sm) * 1.45)}
}

/* ---------- нижняя панель: одна строка на всех ширинах ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px var(--shadow-c);z-index:15;
  padding-bottom:env(safe-area-inset-bottom)}
.dock .wrap{display:flex;align-items:center;gap:var(--s2);min-height:64px;padding-top:var(--s2);padding-bottom:var(--s2)}
.dock .sum{margin-right:auto;min-width:0;font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap}
.dock .sum b{font-size:var(--fs-xl);font-weight:var(--fw-x);color:var(--ink);font-variant-numeric:tabular-nums}
.dock .sum small{font-size:var(--fs-xs);color:var(--muted)}
.dock .btn{flex:none}
/* второстепенное действие текстом, главная кнопка одна */
.tlink{flex:none;height:var(--h-lg);padding:0 var(--s3);border:0;border-radius:var(--r-md);background:none;color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:var(--fw-b);white-space:nowrap}
@media (hover:hover){.tlink:hover{background:var(--surface-2);color:var(--ink)}}
#b-reset .ri{display:none}
/* после отправки главная кнопка тихая: «Отправлено ✓ · открыть» */
.btn.done{background:var(--ok-soft);color:var(--ok)}
@media (max-width:1099px){.dock .sum small{display:none}}
@media (max-width:640px){
  .dock .wrap{min-height:0}
  .dock .sum{line-height:1.2}
  .dock .sum .lbl{display:block;font-size:var(--fs-xs);color:var(--muted)}
  .dock .sum b{font-size:var(--fs-lg)}
}
@media (max-width:480px){
  #b-reset{min-width:44px;padding:0 var(--s2);font-size:var(--fs-md)}
  #b-reset .rl{display:none}
  #b-reset .ri{display:inline}
}
@media (max-width:400px){
  /* узкий телефон: степпер и панель чуть плотнее, кнопки по-прежнему 44 px */
  .stp .sv{width:auto;min-width:64px}
  /* длинная метка («раф карамель ▲26%») переносится перед стрелкой, а не подходит к степперу */
  .rc{white-space:normal}
  /* поле ввода постоянной ширины: у input width:auto — это 20 знаков, степпер налез бы на название */
  .stp .sv-in{width:68px}
  .dock .wrap{gap:var(--s1)}
  .dock .btn{padding:0 var(--s3);font-size:var(--fs-sm)}
  #b-send .so{display:none}
}
/* меньше 360: длинная подпись главной кнопки переносится, а не наезжает на сумму */
@media (max-width:359px){
  .dock .sum{flex:none}
  .dock .btn{flex:0 1 auto;min-width:0;white-space:normal;line-height:1.2}
}

/* ---------- карточка продукта: справа, на телефоне лист снизу ---------- */
.shade{position:fixed;inset:0;background:var(--shade);opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.shade.on{opacity:1;pointer-events:auto}
/* visibility прячет закрытую карточку от клавиатуры, но только после того, как она уехала */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--bg);z-index:31;transform:translateX(105%);
  transition:transform .25s ease,visibility 0s linear .25s;overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.drawer.on{transform:none;visibility:visible;transition:transform .25s ease;box-shadow:0 0 0 1px var(--float-line),-12px 0 32px var(--shadow-c)}
.drawer{padding-right:env(safe-area-inset-right)}
.drawer.drag,.mbox.drag{transition:none}
.drawer:focus,.mbox:focus{outline:none}
.dh{background:var(--float-head);color:var(--head-ink);padding:var(--s4) 64px var(--s4) var(--s5);position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--head-line)}
.dh h3,.mh h3{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-x);line-height:1.3}
.dh small,.mh small{display:block;margin-top:2px;color:var(--head-muted);font-size:var(--fs-sm)}
.dh .x,.mh .x{position:absolute;right:var(--s3);top:var(--s3);background:var(--float-x);color:var(--head-ink);border:0;border-radius:var(--r-md);
  width:var(--h-md);height:var(--h-md);font-size:var(--fs-lg);line-height:1;display:grid;place-items:center;padding:0}
.grab{display:none}   /* ручка листа, только на телефоне */
.db{padding:var(--s4) var(--s5) var(--s8);display:grid;gap:var(--s3)}
.db .card{padding:var(--s4)}
.db .att-card{padding:var(--s1) 0;margin:0;overflow:hidden}   /* зелёная строка решения не выходит за скругление */
.db h4{margin:0 0 var(--s2);font-size:var(--fs-sm);font-weight:var(--fw-b);color:var(--ink-2)}
/* чек заказа: числа в строку, подписи под ними, итог в упаковках отдельной строкой */
.ck h4{font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--s3)}
.eq{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s3) var(--s4)}
.eq .t{position:relative;min-width:0}
.eq .t.o{padding-left:var(--s5)}
.eq .t i{position:absolute;left:0;top:0;font-style:normal;font-size:var(--fs-lg);line-height:1.3;color:var(--muted)}
.eq .t b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-x);line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.eq .t small{display:block;font-size:var(--fs-xs);line-height:1.35;color:var(--muted);white-space:nowrap}
.ck .tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--line-2);color:var(--ink-2)}
.ck .tot b{font-size:var(--fs-xl);font-weight:var(--fw-x);color:var(--accent);font-variant-numeric:tabular-nums}
.ck .tot .sum{margin-left:auto;color:var(--ink);font-weight:var(--fw-b);font-variant-numeric:tabular-nums}
.ck .ck-s{margin:0;line-height:var(--lh-text)}
.ck .note{margin-top:var(--s2)}
/* правка управляющего: до какого часа хватит и «Вернуть» */
.ck-ed{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3);padding:var(--s3);border-radius:var(--r-md);background:var(--surface-2)}
.ck-ed p{margin:0;flex:1 1 240px;font-size:var(--fs-sm);font-weight:var(--fw-b);line-height:1.4;color:var(--ink)}
.ck-ed.warn{background:var(--warn-soft)} .ck-ed.warn p{color:var(--warn)}
.ck-ed.bad{background:var(--bad-soft)} .ck-ed.bad p{color:var(--bad)}
/* причины: точка цветом метки, текст без повтора метки */
ul.why-l{list-style:none;margin:var(--s3) 0 0;padding:var(--s2) 0 0;border-top:1px solid var(--line-2);font-size:var(--fs-sm);line-height:var(--lh-text);color:var(--ink-2)}
ul.why-l li{position:relative;padding-left:var(--s4);margin-top:var(--s1)}
ul.why-l li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--c-grey)}
ul.why-l .k-bad::before{background:var(--bad)}
ul.why-l .k-warn::before{background:var(--warn-fill)}
ul.why-l .k-ok::before{background:var(--ok)}
.unl{white-space:nowrap}
.unl.ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2);white-space:normal;color:var(--ink)}
.unl.ask span{flex:1 1 100%}
/* расход по дням строкой ячеек, дни заказа подложены акцентом */
/* неделя в ряд: не больше 7 ячеек, при коротком периоде ровно по числу дней (--n ставит app.js) */
.use{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:var(--s1)}
.use > div{padding:var(--s1) 0;border-radius:var(--r-sm);background:var(--surface-2);text-align:center;line-height:1.3}
.use span{display:block;font-size:var(--fs-xs);color:var(--muted)}
.use b{font-size:var(--fs-sm);font-weight:var(--fw-b);font-variant-numeric:tabular-nums}
.use .in{background:var(--accent-soft)}
.use .dv span{color:var(--accent);font-weight:var(--fw-b)}
table.s .w{color:var(--bad);font-weight:var(--fw-b)}
/* телефон: карточка листом снизу, закрыть свайпом вниз, тапом по затемнению или крестиком 44 px */
@media (max-width:640px){
  .drawer{top:auto;left:0;width:100%;height:92vh;height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;transform:translateY(105%)}
  .drawer.on{box-shadow:0 0 0 1px var(--float-line),0 -12px 32px var(--shadow-c)}
  .dh,.mh{padding:var(--s5) 64px var(--s3) var(--s4)}
  .dh .x,.mh .x{width:44px;height:44px}
  .grab{display:block;position:absolute;top:var(--s2);left:50%;width:36px;height:4px;margin-left:-18px;border-radius:var(--r-pill);background:var(--head-muted);opacity:.6}
  .db{padding:var(--s3) var(--s3) calc(var(--s8) + env(safe-area-inset-bottom))}
}
table.s{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.s th{font-size:var(--fs-xs);color:var(--muted);text-align:left;font-weight:var(--fw-n);padding:var(--s2);border-bottom:1px solid var(--line)}
table.s td{padding:var(--s2);border-bottom:1px solid var(--line-2)}
table.s tr:last-child td{border-bottom:0}
table.s .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* количество партии по ширине числа: иначе слева пустой столбец */
table.s th:first-child,table.s td:first-child{width:1%;padding-left:0}
svg.ch{width:100%;height:auto;display:block;overflow:visible}
.legend{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--muted);margin:var(--s2) 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:var(--s1);vertical-align:-1px}
.note{font-size:var(--fs-sm);color:var(--muted);margin:var(--s2) 0 0;line-height:var(--lh-text)}

/* ---------- лист «Проверить и отправить»: шапка и кнопки внизу всегда видны, листаются сообщения ---------- */
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:40;background:var(--shade);padding:var(--s4)}
.modal.on{display:grid}
.mbox{background:var(--bg);border-radius:var(--r-lg);width:min(640px,100%);max-height:calc(var(--view-h) * .9);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 1px var(--float-line),0 24px 60px var(--shadow-c)}
.mh{flex:none;position:relative;padding:var(--s4) 64px var(--s4) var(--s5);background:var(--float-head);color:var(--head-ink);box-shadow:0 1px 0 var(--head-line)}
.mb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s4) var(--s5);display:grid;gap:var(--s3);align-content:start}
.mb > p,.mb .note{margin:0}
.mf{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);background:var(--surface);border-top:1px solid var(--line)}
.mf .sp{flex:1 1 0}
.mf .btn{min-height:44px}
.mf .tlink{min-height:44px}
.mf .ask{flex:1 1 220px;font-size:var(--fs-sm);font-weight:var(--fw-b)}
/* «Скачать для Excel», на узком телефоне «В Excel»: подвал «изменился после отправки» остаётся в одну строку */
.mf .xl-s{display:none}
@media (max-width:400px){.mf .xl-l{display:none}.mf .xl-s{display:inline}}
.held{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-text)}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
.msg.none{color:var(--muted)}
.msg .h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.msg .h span{font-size:var(--fs-sm);color:var(--muted)}
.msg .h .num{margin-left:auto;color:var(--ink);font-weight:var(--fw-b)}
.msg pre{white-space:pre-wrap;font:inherit;font-size:var(--fs-sm);line-height:var(--lh-text);margin:var(--s2) 0 var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink)}
.msg .ma{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.msg .ma .btn{min-height:44px;text-decoration:none}
.ms{margin-left:auto;font-size:var(--fs-sm);font-weight:var(--fw-b)}
.ms.ok{color:var(--ok)} .ms.warn{color:var(--warn)}
.callout{border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--fs-sm)}
.callout.info{background:var(--info-soft);color:var(--info)} .callout.ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:640px){
  .modal{place-items:end stretch;padding:0}
  .mbox{width:100%;max-height:92vh;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .modal.on .mbox{animation:sheet-up .22s ease-out}
  .mb{padding:var(--s3)}
  .mf{padding:var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom))}
  /* подвала нет (заказывать нечего): отступ от полоски «домой» на iPhone даёт сам список */
  .mb:has(+ .mf[hidden]){padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
  /* подвал в одну строку и после отправки: главная кнопка забирает остаток места */
  .mf .sp{display:none}
  .mf .btn{flex:1 1 auto}
}
@keyframes sheet-up{from{transform:translateY(32px)}}

/* ---------- другие вкладки: прогноз, продажи, проверка ---------- */
.panel{padding:var(--s4) var(--s5);margin-bottom:var(--s4)}
.panel h4{margin:0 0 var(--s2);font-size:var(--fs-sm);font-weight:var(--fw-b);color:var(--ink-2)}
.panel h4 small{font-size:inherit;font-weight:var(--fw-n);color:var(--muted);margin-left:var(--s1)}
select{font-size:var(--fs-md);height:var(--h-md);padding:0 var(--s3);border-radius:var(--r-md);border:1px solid var(--field-line);background:var(--surface);color:var(--ink)}
.tbl2{overflow-x:auto;margin-bottom:var(--s4)}
table.t{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
table.t th{font-size:var(--fs-xs);color:var(--muted);text-align:left;font-weight:var(--fw-n);padding:var(--s3) var(--s3) var(--s2);white-space:nowrap;border-bottom:1px solid var(--line)}
table.t td{height:44px;padding:var(--s2) var(--s3);border-top:1px solid var(--line-2);vertical-align:middle}
table.t th:first-child,table.t td:first-child{padding-left:var(--s5)}
table.t th:last-child,table.t td:last-child{padding-right:var(--s5)}
table.t .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.t td.nm{font-weight:var(--fw-b)}
.good{color:var(--ok)}.worse{color:var(--bad)}

/* прогноз: заголовок карточки числом, позиция справа */
.fc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.fc-sum{margin:0;color:var(--ink-2);line-height:1.3}
.fc-sum b{font-size:var(--fs-xl);font-weight:var(--fw-x);color:var(--ink);font-variant-numeric:tabular-nums}
.fc-sum span{color:var(--muted);white-space:nowrap}
.fc-sum span::before{content:"·\00a0"}
.fc-info{margin:var(--s1) 0 0;font-size:var(--fs-sm);color:var(--muted)}
#fc-chart{margin-top:var(--s3)}

/* продажи: вывод для закупки один раз, в карточке наверху; в таблице только цифры.
   Тренд нейтральный со стрелкой: янтарный на «Заказе» значит списание, зелёный — «решено» */
.ins ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ins li{position:relative;padding-left:var(--s5);line-height:var(--lh)}
.ins li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--c-grey)}
.ins b{font-weight:var(--fw-b)}
table.sl tr.mut td{color:var(--muted)}
table.sl tr.mut td.nm{font-weight:var(--fw-n);color:var(--ink-2)}
table.sl td.nm small{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:var(--fw-n);color:var(--muted);line-height:1.35}
.tr-up,.tr-down,.tr-new{font-weight:var(--fw-b);color:var(--ink)}

/* проверка: крупно изменение, абсолюты «как обычно → с прогнозом» строкой ниже */
.cmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.cmp .c{padding:var(--s4)}
.cmp p{margin:0}
.cmp .k{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2);color:var(--ink-2);line-height:1.25}
/* подпись всегда под числом, у всех четырёх плиток одинаково: ряд ровный и на ноутбуке, и в плитках 2×2 */
.cmp .k span{flex-basis:100%}
.cmp .k b{font-size:var(--fs-3xl);font-weight:var(--fw-x);color:var(--ink);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp .k b.good{color:var(--ok)} .cmp .k b.worse{color:var(--bad)}
.cmp .ab{margin-top:var(--s1);font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
/* оговорка видна, но тихо */
.bt-test{margin:var(--s2) 0 var(--s4);font-size:var(--fs-xs);color:var(--muted)}
.bt-test:empty{display:none}
@media (max-width:860px){.cmp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cmp .c{padding:var(--s3)}.cmp .k b{font-size:var(--fs-2xl)}}
/* продукты без изменений одной строкой, раскрываются по нажатию */
table.bt tr.z td{height:auto;padding-top:var(--s1);padding-bottom:var(--s1)}
.more{display:block;width:100%;min-height:var(--h-sm);background:none;border:0;padding:var(--s1) 0;font:inherit;font-size:var(--fs-sm);line-height:var(--lh);color:var(--ink-2);text-align:left}
.more::after{content:"›";display:inline-block;margin-left:var(--s2);color:var(--muted);font-size:var(--fs-lg);line-height:1;transition:transform .15s}
.more[aria-expanded="true"]::after{transform:rotate(90deg)}
@media (hover:hover){.more:hover{color:var(--accent)}}
details.how{margin:0 0 var(--s4);font-size:var(--fs-sm);color:var(--muted)}
details.how summary{display:inline-flex;align-items:center;min-height:var(--h-sm);cursor:pointer;list-style:none}
details.how summary::-webkit-details-marker{display:none}
details.how summary::after{content:"›";margin-left:var(--s2);font-size:var(--fs-lg);line-height:1;transition:transform .15s}
details.how[open] summary::after{transform:rotate(90deg)}
details.how p{margin:var(--s1) 0 0;max-width:820px;line-height:var(--lh-text)}

/* телефон: строки таблиц карточками, ничего не уезжает за край */
@media (max-width:640px){
  .panel{padding:var(--s4)}
  .fc-sum span{display:block}
  .fc-sum span::before{content:none}
  table.t.sl,table.t.sl thead,table.t.sl tbody,table.t.bt,table.t.bt tbody{display:block}
  table.t.sl th,table.t.sl td,table.t.bt td{height:auto;padding:0;border:0}
  /* продажи: имя, доля и тренд в строку; выручку на телефоне не показываем */
  table.t.sl tr{display:grid;grid-template-columns:minmax(0,1fr) 56px 64px;column-gap:var(--s3);row-gap:2px;align-items:baseline;padding:var(--s3) var(--s4);border-top:1px solid var(--line-2)}
  table.t.sl thead tr{padding:var(--s2) var(--s4);border-top:0;border-bottom:1px solid var(--line)}
  table.t.sl tbody tr:first-child{border-top:0}
  table.t.sl th:nth-child(n+4),table.t.sl td.rev{display:none}
  /* проверка: имя сверху, ниже «подпись — как обычно → с прогнозом» */
  table.t.bt thead{display:none}
  table.t.bt tr{display:block;padding:var(--s3) var(--s4);border-top:1px solid var(--line-2)}
  table.t.bt tbody:first-of-type tr:first-child{border-top:0}
  table.t.bt td{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-top:var(--s1)}
  table.t.bt td.nm{padding-top:0}
  table.t.bt td.n::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-sm)}
  table.t.bt tr.z{padding-top:var(--s1);padding-bottom:var(--s1)}
  table.t.bt tr.z td{display:block;padding:0}
}

/* ---------- демо-тур: режим сцены ----------
   Ноутбук и проектор: подпись полосой внизу во всю ширину — утверждение крупно, строка под ним,
   «Назад» и «Далее» справа, прогресс полосой по верхнему краю, выйти крестиком у края экрана, подальше от «Далее».
   Телефон: компактная карточка над нижним краем. Пока идёт тур, тема светлая, а нижняя панель скрыта до финала. */
.tour{position:fixed;left:0;right:0;bottom:var(--dock-h,0px);z-index:45;background:var(--tour-bg);color:var(--tour-ink);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 0 0 1px var(--tour-line),0 -10px 30px var(--shadow-c);
  visibility:hidden;pointer-events:none;transform:translateY(100%);transition:transform .2s ease}
.tour.on{visibility:visible;pointer-events:auto;transform:none}
.tour .prog{position:absolute;left:0;right:0;top:0;height:4px;background:color-mix(in srgb,var(--tour-ink) 14%,transparent)}
.tour .prog i{display:block;width:0;height:100%;background:var(--accent-head);transition:width .3s ease}
.tour .t-in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s6);
  padding-top:calc(var(--s4) + 4px);padding-bottom:var(--s4)}
/* справа место под крестик: на узком окне кнопки не подходят к нему ближе 24 px */
.tour .wrap.t-in{padding-right:clamp(var(--s5),calc(76px - (100% - 1220px) / 2),76px)}
.tour h3{margin:0;font-size:var(--fs-2xl);line-height:1.2;font-weight:var(--fw-x);letter-spacing:-.01em}
/* строка держит высоту, пока текст шага считается: полоса не прыгает */
.tour p{margin:var(--s1) 0 0;min-height:1.4em;font-size:var(--fs-lg);line-height:1.4;color:var(--tour-ink-2)}
.tour .tb{display:flex;gap:var(--s2)}
.tour .tb .btn{min-width:96px}
.tour .btn.ghost{background:transparent;color:var(--tour-ink);border-color:color-mix(in srgb,var(--tour-ink) 30%,transparent)}
.tour .x{position:absolute;top:50%;right:max(var(--s3),env(safe-area-inset-right));transform:translateY(-50%);width:var(--h-lg);height:var(--h-lg);
  padding:0;border:0;border-radius:var(--r-md);background:none;color:var(--tour-muted);font-size:var(--fs-xl);line-height:1;display:grid;place-items:center}
@media (hover:hover){.tour .x:hover{background:var(--head-2);color:var(--tour-ink)}}
/* планшет: та же полоса, текст мельче */
@media (min-width:641px) and (max-width:999px){.tour h3{font-size:var(--fs-xl)}.tour p{font-size:var(--fs-md)}}
/* широкий экран, где страница не увеличена (окно ниже 800 px): подпись 36 px; с увеличением её даёт сам zoom */
@media (min-width:1600px) and (max-height:799px){html:not(.zoomed) .tour h3{font-size:var(--fs-4xl)}html:not(.zoomed) .tour p{font-size:var(--fs-xl)}}
/* телефон: компактная карточка над нижним краем; над открытой карточкой продукта и листом отправки без пояснения */
@media (max-width:640px){
  .tour{left:var(--s4);right:var(--s4);bottom:max(calc(var(--dock-h,0px) + var(--s2)),calc(var(--s2) + env(safe-area-inset-bottom)));
    padding-bottom:0;border-radius:var(--r-lg);overflow:hidden;transform:translateY(20px)}
  .tour .wrap.t-in{display:block;padding:calc(var(--s3) + 4px) var(--s4) var(--s3)}
  .tour h3{padding-right:var(--s8);font-size:var(--fs-md);line-height:1.3;letter-spacing:0}
  .tour p{min-height:0;font-size:var(--fs-sm)}
  .tour .tb{justify-content:flex-end;margin-top:var(--s3)}
  .tour .tb .btn{min-width:0;height:var(--h-sm);padding:0 var(--s3);font-size:var(--fs-sm)}
  .tour .x{top:var(--s2);right:var(--s2);transform:none;width:var(--h-md);height:var(--h-md)}
  .drawer.on ~ .tour.on p,.modal.on ~ .tour.on p{display:none}
}
/* цель шага обведена весь шаг, остальное приглушено. position не трогаем, иначе нижняя панель уезжает (F01).
   Строки и переключатели внутри карточек и лент обводим изнутри: снаружи обводку обрезает край */
.spot{outline:3px solid var(--accent);outline-offset:4px}
.att.spot,tr.spot,.chip.spot,.chip.press{outline-offset:-3px}
#bt-cmp.spot{border-radius:var(--r-lg)}
html.touring .tab.on > *,html.touring #attention > *{transition:opacity .25s ease}
html.touring #scen > .chip{transition:opacity .25s ease,background .15s}
html.touring .tab.on:has(.spot) > :not(.spot):not(:has(.spot)){opacity:.28}
html.touring .tab.on:has(#attention .spot) > #att-h{opacity:1}   /* «решено 2 из 3» читается */
html.touring #attention:has(> .spot) > :not(.spot),html.touring #scen:has(> .spot) > :not(.spot){opacity:.3}
html.touring table.o:has(tr.spot) tr.r:not(.spot),html.touring .tmeta:has(> .spot) > :not(.spot){opacity:.3}
/* на сцене то, о чём подпись, крупнее: цифры решения, причина цепочки, риски в ленте, текст сообщений */
@media (min-width:641px){
  html.touring .att.spot .t{font-size:var(--fs-lg)}
  html.touring .att.spot .m{font-size:var(--fs-xl)}
  html.touring .att.spot .d{font-size:var(--fs-md)}
  html.touring .att.spot .cause{font-size:var(--fs-md);color:var(--ink-2)}
  html.touring .att.chain.spot .dot{margin-top:calc(6px + var(--fs-md) * 1.45)}
  html.touring .att.done.chain.spot .dot{margin-top:calc(var(--fs-md) * 1.45)}
  html.touring .att-h .cnt{font-size:var(--fs-md)}
  html.touring #cal.spot .ev{font-size:var(--fs-sm)}
  html.touring #today-note.spot{font-size:var(--fs-md);color:var(--ink-2)}
  html.touring tr.spot .chg{font-size:var(--fs-md)}
  html.touring #m-body pre{font-size:var(--fs-md)}
}
/* нажатие тура: кнопка обведена на 0,7 с перед кликом */
.press{outline:3px solid var(--accent);outline-offset:3px;animation:press .7s ease-out}
@keyframes press{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}to{box-shadow:0 0 0 12px transparent}}
/* под подсказкой ничего не прячется: страница длиннее на её высоту; нижняя панель и смена темы ждут конца тура;
   в финале с открытым листом панель тоже прячется: сумма и «Отправить» уже есть в листе */
html.touring body{padding-bottom:calc(var(--dock-h,0px) + var(--tour-h,120px) + var(--s4))}
html.touring:not(.tour-fin) .dock,html.touring #b-theme,html.tour-fin:has(#modal.on) .dock{display:none}
/* в туре тост под шапкой: внизу подсказка, на тёмной шапке его не видно */
html.touring .toast{bottom:auto;top:calc(var(--head-pin,60px) + var(--s3))}
@media (min-width:641px){
  html.touring .modal{place-items:start center}
  html.touring .mbox{max-height:calc(var(--view-h) - var(--tour-h,180px) - var(--dock-h,72px) - 48px)}
  html.touring .drawer{bottom:calc(var(--dock-h,0px) + var(--tour-h,120px))}
  /* финал: лист под сводкой, «Проблем нет · спасли …» читается целиком (место считает app.js, класс sheet-low) */
  html.touring.sheet-low .modal{top:var(--sheet-top,0px);padding-top:0}
  html.touring.sheet-low .mbox{max-height:calc(var(--view-h) - var(--sheet-top,0px) - var(--tour-h,180px) - var(--dock-h,0px) - var(--s6))}
}
/* телефон боком: экран низкий, подсказка тура одной строкой, без пояснения; в финале лист без строки «Учтено»,
   чтобы в кадр попало само сообщение поставщику */
@media (min-width:641px) and (max-height:500px){
  .tour .t-in{padding-top:calc(var(--s2) + 4px);padding-bottom:var(--s2)}
  .tour h3{font-size:var(--fs-lg)}
  .tour p{display:none}
  .tour .tb .btn{min-width:0}
  html.touring #m-body .held{display:none}
}
/* телефон: лист в финале тура стоит над карточкой подсказки и не прячет под ней кнопки */
@media (max-width:640px){
  html.touring .modal{padding-bottom:calc(var(--tour-h,120px) + var(--s4))}
  html.touring .mbox{max-height:calc(100dvh - var(--tour-h,120px) - var(--s8))}
}
/* пульт «пустой экран» (b или точка): чёрный экран до следующего нажатия */
.blank{position:fixed;inset:0;z-index:60;background:#000;cursor:none}

.toast{position:fixed;left:50%;bottom:calc(var(--dock-h,72px) + var(--s5));transform:translateX(-50%);background:var(--head);color:var(--head-ink);padding:var(--s3) var(--s4);
  border-radius:var(--r-md);font-size:var(--fs-sm);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;width:max-content;max-width:calc(var(--view-w) * .9);
  box-shadow:0 0 0 1px var(--float-line),0 12px 32px var(--shadow-c)}
.toast.on{opacity:1}
.toast.act.on{pointer-events:auto}
.toast .tact{background:none;border:0;padding:0 0 0 var(--s4);font:inherit;font-weight:var(--fw-b);color:var(--accent-head);white-space:nowrap}
.empty{color:var(--muted);padding:var(--s4) var(--s5);text-align:center}

/* ---------- палец: цели не меньше 44 px, между кнопками не меньше 8 px ---------- */
/* Safari: быстрое двойное «+» не увеличивает страницу, при повороте боком шрифт не раздувается */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,label,.chip,[data-open],table.o tr.r{touch-action:manipulation}
@media (pointer:coarse){
  :root{--h-sm:44px;--h-md:44px;--h-lg:44px}
  select{font-size:16px}   /* меньше 16 px Safari на iPhone увеличивает страницу */
  .stp{height:46px}        /* кнопки степпера 44 px внутри рамки */
  #scen,.tabs,.dock .wrap{gap:var(--s2)}
  /* кнопки внутри текста: поле нажатия шире самой надписи, вёрстка та же */
  .brief .jump,.brief .hist,.lnk,.day .ev[data-open]{position:relative}
  .brief .jump::after,.lnk::after{content:"";position:absolute;inset:-12px -6px}
  .brief .hist::after{content:"";position:absolute;inset:-14px -6px}
  .day .ev[data-open]::after{content:"";position:absolute;inset:-6px -4px}
  .toast.act{display:flex;align-items:center;padding-top:0;padding-bottom:0}
  .toast .tact{min-height:44px}
}
/* наведения у пальца нет (правила :hover только под hover:hover): отклик на нажатие */
@media (hover:none){
  button,.chip,table.o tr.r,[data-open]{-webkit-tap-highlight-color:transparent}
  table.o tr.r:active:not(:has(.stp-cell:active)){background:var(--surface-2)}
  .stp button:active:not(:disabled){background:var(--surface-2);color:var(--accent)}
  .btn:active:not(:disabled),.tbtn:active{filter:brightness(.92)}
  .tlink:active,.undo:active,.later-t:active{background:var(--surface-2)}
  .dh .x:active,.mh .x:active,.tour .x:active{background:var(--head-2);color:var(--head-ink)}
  .brief .jump:active{color:var(--bad)}
  .chip:active{background:var(--surface)}
  .tabs button:active{color:var(--head-ink)}
  .lnk:active,.more:active,.brief .hist:active{color:var(--accent)}
  .att .t[data-ing]:active,.day .ev[data-open]:active span{text-decoration:underline;text-underline-offset:3px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* экран больше 1366×768 (проектор 1920×1080, монитор, окно не на весь экран): вся страница как проверенная раскладка 1366×768.
   Увеличение z = min(ширина / 1366, высота / 768, 1,6) считают index.html до отрисовки и app.js при смене размера окна:
   на 1920×1080 это 1,4, на 1920×870 (Chrome не на весь экран) 1,13 */
html.zoomed{zoom:var(--z);--view-h:calc(100vh / var(--z));--view-w:calc(100vw / var(--z))}
/* top:0 + bottom:0 под zoom обрезает прокрутку карточки снизу (низ пустой): высота явно, как у окна */
html.zoomed .drawer{bottom:auto;height:var(--view-h)}
html.zoomed.touring .drawer{height:calc(var(--view-h) - var(--dock-h,0px) - var(--tour-h,120px))}