/* ═══════════════════════════════════════════════════════════
   ТАБЕЛЬ — «Лист смен»: планки на линейке дня, наряд сегодня, лист на стену
   ═══════════════════════════════════════════════════════════
   Плита, обойма и ярлыки — общие с документами и кассой (accounting.css);
   шкала — продукта: имя 13, пояснение 11.5, подпись 11.

   Смена — планка на линейке дня, как бронь на линейке календаря. Язык заливки
   один на весь экран: сплошная — вышел, контур — стоит в графике, штриховка —
   не вышел; пропущенный кусок графика при опоздании и раннем уходе —
   янтарная штриховка рядом с отработанным; красная риска — «сейчас». В
   «Месяце» тот же язык на плашках дней, только мягче: 31 тёмная плашка в
   строке кричала бы. Цвет — только у отклонений (§8.3), и всегда со словом
   или знаком рядом.

   Уровни поверхности: бумага раздела — лист и наряд на карточке — выходные
   подложены тоном бумаги. Тени нет: лист лежит на столе, а не парит. */

/* ── плита: знак у показаний, которым есть что сказать ── */
.ac-read.deviations i::before,.ac-read.today i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plate-late)}
.ac-read.today i::before{background:var(--plate-ok)}
.ac-read.deviations.zero i::before,.ac-read.today.zero i::before{background:var(--band-ink-3)}

/* ── обойма: вид и период слева, действия справа ── */
.ts-bar{gap:8px 10px;flex-wrap:wrap}
.ts-scale{flex-shrink:0}
.ts-weeknav{display:flex;align-items:center;gap:2px;flex-shrink:0;margin-left:4px}
.ts-weeknav > b{min-width:11.5ch;padding:0 4px;text-align:center;font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.ts-step{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:var(--r-sm);color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ts-step:hover{background:var(--sunk);color:var(--ink)}
  .ts-thisweek:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
}
.ts-step:active{transform:scale(.94)}
.ts-step:focus-visible,.ts-thisweek:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ts-thisweek{
  margin-left:8px;font-size:12px;font-weight:500;color:var(--ink-2);border-bottom:1px dotted var(--rule);
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
.ts-do-group{display:flex;align-items:center;gap:6px;margin-left:auto}
.ts-act{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;white-space:nowrap;font-size:12px}
.ts-act svg{flex-shrink:0}
.ts-act:active{transform:scale(.97)}
.ts-act:disabled{opacity:.42;pointer-events:none}
.ts-do-group .ts-csv{margin-left:6px}

/* Составление: шаблоны — образцы смен на полях листа. */
.ts-tools{display:flex;gap:6px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:1px}
.ts-tools::-webkit-scrollbar{display:none}
.ts-tool{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-shrink:0;
  padding:5px 11px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);text-align:left;white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.ts-tool b{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ts-tool span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .ts-tool:not(.on):hover{border-color:var(--ink-3)}
  .ts-weeks:hover{border-color:var(--ink-3)}
}
.ts-tool:active{transform:scale(.97)}
.ts-tool.on{background:var(--accent);border-color:var(--accent)}
.ts-tool.on b{color:var(--accent-ink)}
.ts-tool.on span{color:var(--band-ink-2)}
.ts-tool.erase{border-style:dashed}
.ts-tool:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ts-week{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ts-week-l{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ts-weeks{
  height:30px;padding:0 26px 0 10px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);font:inherit;font-size:12px;color:var(--ink-2);
  transition:border-color var(--t-tap) var(--ease);
}
.ts-done-b{margin-left:auto}
.ts-hint{flex-shrink:0;margin:0;padding:8px 22px;border-bottom:1px solid var(--rule-2);background:var(--paper);font-size:12px;line-height:1.45;color:var(--ink-2)}

/* ── планка на линейке дня ── */
.ts-rail{position:relative;display:block;height:10px}
.ts-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-2)}
.ts-plank{position:absolute;left:var(--l);width:var(--w);top:1px;bottom:1px;border-radius:2px;background:var(--ink-2)}
.ts-plank.p-live{background:var(--ink)}
.ts-plank.p-plan{background:var(--card);box-shadow:inset 0 0 0 1px var(--ink-3)}
.ts-plank.p-absent{background:repeating-linear-gradient(-45deg,var(--late) 0 1.5px,var(--late-bg) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--late-line)}
.ts-plank.p-gap{background:repeating-linear-gradient(-45deg,var(--wait) 0 1.5px,var(--wait-bg) 1.5px 4px)}
.ts-plank.p-extra{background:var(--ok)}
.ts-plank.p-swap{background:var(--stop)}
/* Риска «сейчас» — та же, что в календаре: красная, выше планки. */
.ts-now{position:absolute;left:var(--l);top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--now)}

/* ── сегодня в смене: наряд с общей линейкой ── */
.ts-body{padding-top:16px}
.ts-today{margin:0 6px 22px}
.ts-today-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-bottom:8px}
.ts-today-h h3{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ts-today-h span{font-size:12px;color:var(--ink-3)}
.ts-today-h .ts-act{margin-left:auto;align-self:center}
.ts-crew{
  --crew-cols:minmax(170px,220px) minmax(200px,1fr) minmax(150px,220px) 172px;
  border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);overflow:hidden;
}
.ts-axis,.ts-crow{display:grid;grid-template-columns:var(--crew-cols);align-items:center;column-gap:18px;padding:0 12px}
.ts-axis{height:24px;border-bottom:1px solid var(--rule-2);background:var(--paper)}
.ts-axis .ts-crail{position:relative;height:100%}
.ts-axis i{position:absolute;left:var(--l);top:50%;transform:translate(-50%,-50%);font-size:11px;font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ts-crow{min-height:54px}
.ts-crow + .ts-crow{border-top:1px solid var(--rule-2)}
.ts-crail{position:relative;min-width:0}
.ts-crow .ts-rail{height:12px}
.ts-nobody{padding:14px 16px;font-size:12.5px;color:var(--ink-3)}

.ts-who{
  display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;
  min-width:0;margin:6px 0 6px -6px;padding:4px 6px;border-radius:var(--r-sm);text-align:left;
  transition:background-color var(--t-tap) var(--ease);
}
.ts-who .ts-sign{grid-row:1 / span 2}
.ts-who b{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-who span{font-size:11.5px;line-height:1.3;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){
  .ts-who:hover{background:var(--off-paper)}
}
.ts-who:focus-visible{outline:2px solid var(--ink);outline-offset:0}
.ts-said{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:12px;line-height:1.35}
.ts-said b{font-weight:550;color:var(--ink);font-variant-numeric:tabular-nums}
.ts-said span{color:var(--ink-2)}
.ts-crow.s-live .ts-said span{color:var(--ok)}
.ts-crow.s-late .ts-said span{color:var(--wait)}
.ts-crow.s-absent .ts-said span{color:var(--late)}
.ts-crow.s-done .ts-said span{color:var(--ink-3)}
.ts-crow.s-absent .ts-said b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--late)}
.ts-acts{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.ts-do{
  height:28px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
  font-size:12px;font-weight:550;color:var(--ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ts-do:hover{border-color:var(--ink-3);color:var(--ink)}
  .ts-do.came:hover{background:var(--accent-2);color:var(--accent-ink)}
}
.ts-do:active{transform:scale(.96)}
.ts-do.came{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ts-do:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ts-done{display:inline-flex;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:550;color:var(--ok)}
.ts-done::before{
  content:"";width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Знак человека — скруглённый квадрат на глухом тоне, как подпись в журнале. */
.ts-sign{
  width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:var(--r-mark);background:var(--av,var(--stop));color:var(--av-ink);
  font-size:9.5px;font-style:normal;font-weight:600;letter-spacing:.02em;
}

/* ── над листом: отбор и обозначения ── */
.ts-over{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin:0 6px 10px}
.ts-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;list-style:none;font-size:11.5px;color:var(--ink-2)}
.ts-legend li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ts-legend-range{color:var(--ink-3)}
.ts-key{width:18px;height:8px;border-radius:2px;background:var(--ink-2)}
.ts-key.k-plan{background:var(--card);box-shadow:inset 0 0 0 1px var(--ink-3)}
.ts-key.k-absent{background:repeating-linear-gradient(-45deg,var(--late) 0 1.5px,var(--late-bg) 1.5px 4px);box-shadow:inset 0 0 0 1px var(--late-line)}
.ts-key.k-gap{background:repeating-linear-gradient(-45deg,var(--wait) 0 1.5px,var(--wait-bg) 1.5px 4px)}
.ts-key.k-extra{background:var(--ok)}
/* В «Месяце» обозначения — плашки, как в клетках. */
.ts-over.is-month .ts-key{width:14px;height:12px;border-radius:var(--r-xs)}
.ts-over.is-month .k-done{background:var(--sunk)}
.ts-over.is-month .k-plan{background:none;box-shadow:inset 0 0 0 1px var(--rule)}
.ts-over.is-month .k-gap{background:var(--wait-bg);box-shadow:inset 0 0 0 1px var(--wait-line)}
.ts-over.is-month .k-extra{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line)}

/* Неделя без графика: не заглушка, а строка с дверью над пустыми клетками. */
.ts-nudge{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:0 6px 10px;padding:6px 8px 6px 14px;
  border:1px dashed var(--rule);border-radius:var(--r);background:var(--paper);
}
.ts-nudge b{font-size:12.5px;font-weight:550;color:var(--ink)}
.ts-nudge .ts-act{margin-left:auto}

/* ── лист ── */
.ts-wrap{
  --ts-name:196px;--ts-tot:104px;
  margin:0 6px;overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--rule-2);border-radius:var(--r);background:var(--card);scrollbar-width:thin;
}
.ts-wrap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ts-sheet{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
.ts-sheet.is-week{min-width:calc(var(--ts-name) + 7 * 116px + var(--ts-tot))}
.ts-wrap.is-month{--ts-name:180px;--ts-tot:100px}
.ts-sheet.is-month{min-width:calc(var(--ts-name) + 31 * 34px + var(--ts-tot))}
.ts-sheet th,.ts-sheet td{padding:0;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.ts-sheet tbody tr:last-child > *{border-bottom:0}
.ts-name-h{width:var(--ts-name)}
.ts-tot-h{width:var(--ts-tot)}

/* Шапка: число и день недели строкой у недели, столбиком у месяца; сегодня — красная риска. */
.ts-sheet thead th{height:38px;background:var(--card);border-bottom-color:var(--rule)}
.ts-sheet .ts-name-h,.ts-sheet .ts-tot-h{padding:0 12px;font-size:11px;font-weight:500;color:var(--ink-3);text-align:left}
.ts-sheet .ts-tot-h{text-align:right}
.ts-sheet .ts-dh{padding:0 10px;text-align:left;white-space:nowrap}
.ts-dh b{font-size:13px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ts-dh span{margin-left:6px;font-size:11.5px;color:var(--ink-3)}
.ts-sheet.is-month .ts-dh{padding:0;text-align:center}
.is-month .ts-dh b{display:block;font-size:12px;line-height:1.15}
.is-month .ts-dh span{display:block;margin:0;font-size:11px;line-height:1.15}
.ts-sheet.is-month thead th{height:42px}
.ts-dh.today{box-shadow:inset 0 2px 0 var(--now)}
.ts-dh.today b,.ts-dh.today span{color:var(--now)}
.ts-sheet .we{background:var(--off-paper)}
.ts-sheet thead .we{background:linear-gradient(var(--off-paper),var(--off-paper)) var(--card)}
/* Разграфка: у недели дни разделены тонкой чертой, у месяца — только понедельник чернилами. */
.ts-sheet.is-week .ts-dh + .ts-dh,.ts-sheet.is-week .ts-c + .ts-c,.ts-sheet.is-week .ts-f + .ts-f{border-left:1px solid var(--rule-2)}
.ts-sheet.is-month .wk{border-left:1px solid var(--rule)}

/* Колонка имён закреплена: дни уходят под неё, когда лист листают вбок. */
.ts-name,.ts-name-h{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:1px 0 0 var(--rule-2)}
tbody .ts-name{height:70px;padding:6px 12px 6px 48px;text-align:left}
tbody .ts-name .ts-sign{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.ts-name b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-name span{display:block;margin-top:1px;font-size:11.5px;font-weight:400;line-height:1.3;color:var(--ink-2)}
.is-month tbody .ts-name{height:44px;padding:4px 10px 4px 46px}
.is-month .ts-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Итог человека одной графой за двойной чертой: выходы, под ними часы. */
.ts-sheet .ts-tot{padding:6px 12px;text-align:right;border-left:3px double var(--rule)}
.ts-sheet .ts-tot-h{border-left:3px double var(--rule)}
.ts-tot b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ts-tot span{display:block;margin-top:1px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.ts-tot .ts-none{color:var(--ink-3)}
.is-month .ts-tot,.is-month .ts-tot-h{position:sticky;right:0;z-index:2;background:var(--card)}

/* Итог дня — внизу, за двойной чертой. */
.ts-sheet tfoot th,.ts-sheet tfoot td{height:36px;border-top:3px double var(--rule);border-bottom:0;background:var(--paper)}
.ts-sheet tfoot .ts-name{padding:0 12px;font-size:11px;font-weight:500;color:var(--ink-3);text-align:left;background:var(--paper)}
.ts-sheet .ts-f{padding:0 10px;font-size:12px;font-weight:500;color:var(--ink-2);text-align:left}
.ts-sheet.is-month .ts-f{padding:0;text-align:center}
.ts-sheet tfoot .we{background:linear-gradient(var(--off-paper),var(--off-paper)) var(--paper)}
.ts-sheet tfoot .ts-tot{background:var(--paper)}

/* Клетка — кнопка на весь день. */
.ts-cell,.ts-wcell{
  position:relative;width:100%;color:var(--ink);
  transition:background-color var(--t-tap) var(--ease),box-shadow var(--t-tap) var(--ease),opacity var(--t-move) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ts-wcell:hover{background:var(--off-paper)}
  .ts-cell:hover .ts-chip{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
  .ts-sheet.compose .ts-wcell:hover,.ts-sheet.compose .ts-cell:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--sunk)}
}
.ts-wcell:active,.ts-cell:active{background:var(--sunk)}
.ts-cell:focus-visible,.ts-wcell:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ts-c.dim .ts-cell,.ts-c.dim .ts-wcell{opacity:.32}

/* Неделя: время и итог дня строкой, планка, отклонение словом. */
.ts-wcell{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:74px;padding:8px 10px;text-align:left}
.ts-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2px 8px;min-width:0}
.ts-foot .ts-dev{flex:1 1 auto;min-width:0}
.ts-foot .ts-v{margin-left:auto}
.ts-time{font-size:12px;font-weight:550;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ts-time s{color:var(--ink-3);text-decoration-color:var(--late)}
.ts-v{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.ts-glyph{display:inline-flex;font-style:normal}
.ts-glyph svg{stroke-width:2.4}
.ts-dev{display:flex;align-items:flex-start;gap:4px;font-size:11.5px;font-style:normal;font-weight:550;line-height:1.25;color:var(--ink-2)}
.ts-dev i{display:flex;padding-top:1px;font-style:normal}
.ts-dev svg{stroke-width:2.2;flex-shrink:0}
.t-plan .ts-time,.t-plan .ts-v{color:var(--ink-3)}
.t-live .ts-dev{color:var(--ok)}
.t-absent .ts-v,.t-absent .ts-dev{color:var(--late)}
.t-late .ts-dev,.t-early .ts-dev{color:var(--wait)}
.t-extra .ts-dev{color:var(--ok)}

/* Месяц: плашка дня — заливка говорит, что было; внутри часы или знак. */
.ts-cell{display:flex;align-items:center;justify-content:center;height:44px}
.ts-chip{
  position:relative;display:flex;align-items:center;justify-content:center;width:calc(100% - 6px);max-width:32px;height:30px;
  border-radius:var(--r-xs);background:var(--sunk);font-size:12px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  transition:box-shadow var(--t-tap) var(--ease);
}
.ts-mark{position:absolute;top:1px;right:1px;display:flex;font-style:normal}
.t-plan .ts-chip{background:none;box-shadow:inset 0 0 0 1px var(--rule);font-weight:500;color:var(--ink-3)}
.t-live .ts-chip{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.t-live .ts-chip::after{content:"";position:absolute;left:30%;right:30%;bottom:3px;height:2px;border-radius:1px;background:var(--now)}
.t-absent .ts-chip{background:repeating-linear-gradient(-45deg,var(--late-line) 0 1.5px,var(--late-bg) 1.5px 4px);color:var(--late)}
.t-late .ts-chip,.t-early .ts-chip{background:var(--wait-bg);box-shadow:inset 0 0 0 1px var(--wait-line);color:var(--wait)}
.t-extra .ts-chip{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line);color:var(--ok)}
.t-swap .ts-chip{background:var(--stop-bg);box-shadow:inset 0 0 0 1px var(--stop-line)}
.t-swap .ts-mark{color:var(--ink-2)}

.ts-note{margin-top:22px}
.ts-empty p{max-width:420px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* Строка, найденная в ⌘K, коротко подсвечена — и затихает. */
.ts-sheet tr.hit > td{animation:tsHit 1.6s var(--ease) both}
.ts-sheet tr.hit > th{animation:tsHitName 1.6s var(--ease) both}
@keyframes tsHit{from{background-color:var(--wait-bg)}}
@keyframes tsHitName{from{background-color:var(--wait-bg)}to{background-color:var(--card)}}

/* Вход вкладки: наряд, затем лист — одним ходом, без каскада по клеткам.
   «Неделя / Месяц» и шаг недели — частые действия: лист просто встаёт на место. */
.ac-body.fresh .ts-today,.ac-body.fresh .ts-over,.ac-body.fresh .ts-wrap,.ac-body.fresh .ts-empty,.ac-body.fresh .ts-nudge{animation:acIn var(--t-move) var(--ease) both}
.ac-body.fresh .ts-over,.ac-body.fresh .ts-wrap{animation-delay:50ms}

/* ── узкий стол и телефон ── */
@media (max-width:1100px){
  .ts-crew{--crew-cols:minmax(150px,190px) minmax(140px,1fr) 150px 160px}
}
@media (max-width:720px){
  .ts-bar{padding:8px 12px}
  /* Общее правило обоймы уводит сегменты в конец (accounting.css): у табеля вид — первым. */
  .ts-bar .ts-scale{order:0;flex:1 1 100%;width:auto}
  .ts-over .ts-pos{order:0;width:auto}
  .ts-scale .ac-seg-b{flex:1;justify-content:center}
  .ts-weeknav{flex:1 1 100%;flex-wrap:wrap;justify-content:space-between;margin:0}
  .ts-weeknav > b{flex:1}
  .ts-step{width:38px;height:38px}
  .ts-thisweek{flex:1 1 100%;text-align:center;border:0;margin:2px 0 0;padding:6px 0}
  .ts-do-group{flex:1 1 100%;flex-wrap:wrap;margin:0}
  .ts-act{height:36px}
  .ts-do-group .ts-act{flex:1 1 0;justify-content:center}
  .ts-do-group .ts-csv{flex:1 1 100%;justify-content:center;margin:0}
  .ts-tools,.ts-week{flex:1 1 100%}
  .ts-weeks{flex:1;min-width:0;height:36px}
  .ts-done-b{flex:1 1 100%;justify-content:center;margin:0}
  .ts-hint{padding:8px 12px}
  .ts-today,.ts-wrap,.ts-nudge,.ts-over{margin-left:0;margin-right:0}
  .ts-axis{display:none}
  .ts-crow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who said" "rail rail" "acts acts";row-gap:6px;padding:8px 12px 10px}
  .ts-who{grid-area:who;margin:0 0 0 -6px}
  .ts-crow .ts-crail{grid-area:rail}
  .ts-said{grid-area:said;align-items:flex-end;text-align:right}
  .ts-acts{grid-area:acts;justify-content:stretch}
  .ts-do{flex:1;height:36px}
  .ts-done{flex:1;justify-content:center}
  .ts-over{flex-direction:column;align-items:stretch}
  .ts-wrap{--ts-name:124px;--ts-tot:84px}
  .ts-wrap.is-month{--ts-name:116px;--ts-tot:80px}
  .ts-sheet.is-week{min-width:calc(var(--ts-name) + 7 * 104px + var(--ts-tot))}
  .ts-sheet tbody .ts-name{padding:4px 8px}
  tbody .ts-name .ts-sign{display:none}
  .ts-sheet .ts-tot{padding:6px 8px}
  .ts-sheet .ts-name-h,.ts-sheet .ts-tot-h{padding:0 8px}
}

/* ═══ окно выхода и «Сегодня в смене» ═══ */
.dlg-shift{width:min(480px,calc(100vw - 32px));max-height:min(88dvh,760px)}
.sm-head{flex-shrink:0;display:flex;align-items:flex-start;gap:8px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--rule-2)}
.sm-back{margin-left:-8px}
.sm-t{flex:1;min-width:0}
.sm-t b{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.sm-t span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)}
.sm-t b + span{padding-left:0}
.sm-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:16px 20px 18px}

/* Бланк плана: что стоит в графике — и что из этого вышло на деле. */
.sm-slip{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;
  padding:10px 12px;border:1px dashed var(--rule);border-radius:var(--r);background:var(--paper);
}
.sm-slip-t{min-width:0}
.sm-slip-t span{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}
.sm-slip-t b{display:block;margin-top:1px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.sm-now{font-size:12px;font-weight:550;color:var(--ink-2)}
.sm-now.s-live{color:var(--ok)}
.sm-now.s-absent{color:var(--late)}

.sm-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:var(--r);background:var(--sunk)}
.sm-seg-b{
  height:34px;border-radius:calc(var(--r) - 2px);font-size:12.5px;font-weight:550;color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .sm-seg-b:not(.on):hover{color:var(--ink)}
}
.sm-seg-b.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.sm-seg-b:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.sm-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:11px;font-weight:500;color:var(--ink-3)}
.sm-sec h3::after{content:"";flex:1;height:1px;background:var(--rule-2)}

/* Время смены крупно: это то, ради чего окно открыли. */
.sm-times{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px}
.sm-time span{display:block;margin-bottom:5px;font-size:11px;font-weight:500;color:var(--ink-3)}
.sm-time input{width:100%;height:46px;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sm-arrow{display:flex;height:46px;align-items:center;color:var(--ink-3);font-style:normal}
.sm-shift{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sm-shift + .sm-hint{margin-top:3px}
.sm-span{margin-top:7px;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}

.sm-chips{display:flex;flex-wrap:wrap;gap:6px}
.sm-chip,.sm-who,.sm-tpl{
  border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
  transition:background-color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.sm-chip{height:32px;padding:0 12px;border-radius:var(--r-pill);font-size:12.5px}
@media (hover:hover) and (pointer:fine){
  .sm-chip:not(.on):hover,.sm-who:not(.on):hover,.sm-tpl:not(.on):hover{border-color:var(--ink-3);color:var(--ink)}
}
.sm-chip:active,.sm-who:active,.sm-tpl:active{transform:scale(.97)}
.sm-chip.on,.sm-who.on,.sm-tpl.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sm-chip:focus-visible,.sm-who:focus-visible,.sm-tpl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sm-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.sm-who{display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 9px 5px 6px;border-radius:var(--r);font-size:12.5px;font-weight:550;text-align:left}
.sm-who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px;margin-bottom:12px}
.sm-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border-radius:var(--r);text-align:left}
.sm-tpl b{font-size:12.5px;font-weight:600;color:inherit}
.sm-tpl span{font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sm-tpl.on span{color:var(--band-ink-2)}

.sm-note span{display:block;margin-bottom:5px;font-size:11px;font-weight:500;color:var(--ink-3)}
.sm-note input{width:100%}

/* Отметки дня: запись остаётся, отменённая — зачёркнутой. */
.sm-marks{list-style:none;margin:0;padding:0}
.sm-mark{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 10px;padding:8px 0;border-top:1px solid var(--rule-2)}
.sm-mark:first-child{border-top:0;padding-top:0}
.sm-mark-t b{display:block;font-size:12.5px;font-weight:550;color:var(--ink)}
.sm-mark-t span{display:block;margin-top:1px;font-size:12px;color:var(--ink-2)}
.sm-mark-t small{display:block;margin-top:1px;font-size:11px;color:var(--ink-3)}
.sm-mark.void b{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-3)}
.sm-void{
  font-size:11.5px;color:var(--ink-3);border-bottom:1px dotted var(--rule);
  transition:color var(--t-tap) var(--ease),border-color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .sm-void:hover{color:var(--late);border-color:currentColor}
}
.sm-void:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.sm-voiding{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
.sm-voiding input{flex:1 1 220px;min-width:0}
.sm-voiding .btn:disabled{opacity:.4;pointer-events:none}

.sm-hint{font-size:12px;line-height:1.5;color:var(--ink-3)}
.sm-error{font-size:12px;color:var(--late)}
.sm-empty{padding:18px 0;text-align:center;font-size:12.5px;color:var(--ink-3)}
.ts-crew.in-window{grid-template-columns:1fr}

.sm-foot{flex-shrink:0;display:flex;gap:8px;padding:14px 20px 17px;border-top:1px solid var(--rule);background:var(--paper)}
.sm-foot .btn{flex:1 1 auto;min-height:44px;white-space:nowrap}
.sm-foot .btn-ghost{flex:0 1 auto}
.sm-foot .btn:disabled{opacity:.4;pointer-events:none}

/* Окно собирается при открытии сверху вниз, 30 мс на часть; перерисовка вход не повторяет. */
.dlg-shift.open:not(.settled) .sm-body > *{animation:acIn var(--t-move) var(--ease) both}
.dlg-shift.open:not(.settled) .sm-body > :nth-child(2){animation-delay:30ms}
.dlg-shift.open:not(.settled) .sm-body > :nth-child(3){animation-delay:60ms}
.dlg-shift.open:not(.settled) .sm-body > :nth-child(n+4){animation-delay:90ms}

@media (max-width:520px){
  .sm-body{padding:14px 16px 16px}
  .sm-time input{font-size:18px}
}

/* ── блок «Смена» в меню: кто сегодня на смене ── */
.shift-crew{display:flex;align-items:center;gap:8px;margin-top:14px}
.shift-people{display:flex;gap:4px}
/* Идущий на смене — полным тоном; кого ждут — обводкой того же тона; неявка — пунктиром. */
.shift-av{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--av,var(--stop));color:var(--av-ink);font-size:9px;font-style:normal;font-weight:600;
}
.shift-av.s-plan{background:none;color:var(--av,var(--ink-2));box-shadow:inset 0 0 0 1.5px var(--av,var(--rule))}
.shift-av.s-done{opacity:.5}
.shift-av.s-absent{background:none;color:var(--ink-3);border:1px dashed var(--rule);text-decoration:line-through}
.shift-av.more{background:var(--sunk);color:var(--ink-3);font-weight:500;letter-spacing:-.02em}
.shift-none{font-size:10.5px;color:var(--ink-3)}
.shift-mark{
  margin-left:auto;height:24px;padding:0 9px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
  font-size:11px;font-weight:550;color:var(--ink-2);
  transition:border-color var(--t-tap) var(--ease),color var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .shift-mark:hover{border-color:var(--ink-3);color:var(--ink)}
}
.shift-mark:active{transform:scale(.96)}
.shift-mark:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ac-body.fresh .ts-today,.ac-body.fresh .ts-wrap,.ac-body.fresh .ts-empty,
  .dlg-shift.open:not(.settled) .sm-body > *{animation:none}
  .ts-sheet tr.hit > td,.ts-sheet tr.hit > th{animation:none}
  .ts-sheet tr.hit > td{background:var(--wait-bg)}
  .ts-act:active,.ts-tool:active,.ts-do:active,.sm-chip:active,.sm-who:active,.sm-tpl:active,.shift-mark:active{transform:none}
  .ts-cell{transition:none}
}