/* Сначала телефон: крупный текст и кнопки, всё в одну колонку. */
:root { --bg: #f4f6fb; --fg: #0f172a; --muted: #475569; --line: #dbe1ea; --card: #fff;
  --ok: #2f7d32; --warn: #b26a00; --bad: #c62828; --block: #6a1b9a; --info: #37474f; --accent: #1d4ed8;
  --nav: #1e3a8a; --nav-on-bg: #fff; --nav-on-fg: #1e3a8a; --btn: #1d4ed8; --btn2: #e0e0da;
  --field: #fff; --err-bg: #fdecea; --err-bd: #f5c2c0; --note-bg: #fff8e1; --note-bd: #ffe08a;
  --shipped: #9e9e9e; --track: #e5e9f0; --hatch: #f0f2f5; --pc-done-bg: #eef6f0; --pc-done-fg: #2d5a3a; --pc-here-bg: #fff;
  /* этапы: фон, рамка, текст */
  --done-bg: #e6f4ea; --done-bd: #34a853; --done-fg: #146c2e;
  --work-bg: #e8f0fe; --work-bd: #1a73e8; --work-fg: #0b47a1;
  --part-bg: #fef7e0; --part-bd: #e3a008; --part-fg: #7a4f00;
  --next-bg: #f1f3f6; --next-bd: #d5dae1; --next-fg: #5b6472;
  --blk-bg: #fde8e7; --blk-bd: #d93025; --blk-fg: #a1190f;
  color-scheme: light; }
/* Тёмная тема: те же токены, другие значения. Ставится скриптом в <head> (base.html) по выбору
   в этом браузере или по системе. Печать всегда светлая. Новый цвет — пара в обоих блоках (тест). */
@media screen { :root[data-theme="dark"] {
  --bg: #0f172a; --fg: #e2e8f0; --muted: #94a3b8; --line: #334155; --card: #1e293b;
  --ok: #2e7d32; --warn: #a15c00; --bad: #e5484d; --block: #7b2fa8; --info: #475569; --accent: #7ab0ff;
  --nav: #0b1736; --nav-on-bg: #e2e8f0; --nav-on-fg: #0b1736; --btn: #2563eb; --btn2: #334155;
  --field: #0b1220; --err-bg: #3d1514; --err-bd: #7f2a26; --note-bg: #33290a; --note-bd: #6b5410;
  --shipped: #64748b; --track: #334155; --hatch: #263244; --pc-done-bg: #15291c; --pc-done-fg: #8fc9a1; --pc-here-bg: #0b1220;
  --done-bg: #12321f; --done-bd: #34a853; --done-fg: #86d29b;
  --work-bg: #13284d; --work-bd: #4b8df8; --work-fg: #a8c7fa;
  --part-bg: #3a2c06; --part-bd: #e3a008; --part-fg: #f3d27a;
  --next-bg: #1e293b; --next-bd: #3b4757; --next-fg: #9aa5b4;
  --blk-bg: #3d1514; --blk-bd: #f0625a; --blk-fg: #f6a7a1;
  color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
main { max-width: 1280px; margin: 0 auto; padding: 12px 16px 48px; }
/* Шапка: разделы — одинаковые кнопки в одну линию, текущий раздел белый. */
nav.top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; background: var(--nav); }
nav.top a, nav.top button.logout { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 8px;
  font-size: 16px; line-height: 1; color: #fff; text-decoration: none; }
nav.top a:hover { background: rgba(255, 255, 255, .14); }
nav.top a.on { background: var(--nav-on-bg); color: var(--nav-on-fg); font-weight: 600; }
nav.top .me { margin-left: auto; display: flex; align-items: center; gap: 6px; }
nav.top .who { padding: 0 8px; font-size: 15px; line-height: 1.2; color: rgba(255, 255, 255, .7);
               display: flex; flex-direction: column; align-items: flex-end; }
/* Роль под именем мелко: подпись не шире одного имени, на телефоне «Выйти» не уезжает строкой ниже. */
nav.top .who .role { font-size: 12px; color: rgba(255, 255, 255, .55); }
nav.top form.inline { display: flex; }
nav.top button.logout { background: none; border: 1px solid rgba(255, 255, 255, .45); }
nav.top button.logout:hover { background: rgba(255, 255, 255, .14); }
nav.top a.help { border: 1px dashed rgba(255, 255, 255, .55); }
/* Кнопки-значки «тема» и «во весь экран»: без надписи, имя в aria-label, подсказка в title.
   Скрыты, пока скрипт не проверит, что умеет браузер. Значок меняется по состоянию через CSS. */
nav.top button.ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 38px; padding: 0;
  border-radius: 8px; background: none; color: #fff; font-size: 16px; }
nav.top button.ico[hidden] { display: none; }
nav.top button.ico:hover { background: rgba(255, 255, 255, .14); }
nav.top button.ico svg, .fs-exit svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
@media (pointer: coarse) { nav.top button.ico { height: 44px; } }
:root[data-theme="dark"] .i-moon, :root:not([data-theme="dark"]) .i-sun,
:root.is-fs .i-max, :root:not(.is-fs) .i-min { display: none; }
/* Крестик выхода из полноэкранного режима: появляется на 1,5 с по касанию, справа вверху под шапкой. */
.fs-exit { position: fixed; top: 12px; right: 12px; z-index: 50; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; border-radius: 50%; background: rgba(15, 23, 42, .55); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);  /* ободок: на тёмной странице круг иначе не виден */
  opacity: 0; visibility: hidden; pointer-events: none; }
.fs-exit.show { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
  .fs-exit { transition: opacity .2s, visibility 0s .2s; } .fs-exit.show { transition: opacity .2s; } }
/* «Как это работает»: схемы SVG. На узком экране схема листается вбок внутри рамки, страница не уезжает. */
.guide { max-width: 860px; }
.guide .toc { line-height: 1.8; }
.guide .fig { overflow-x: auto; margin: 10px 0; }
.guide .fig svg { display: block; width: 100%; min-width: 560px; height: auto; font-size: 14px; }
.guide .fig text { fill: var(--fg); }
.guide .role { margin: 18px 0; }
.guide .role h2 { margin-top: 0; }
.guide .tabs { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.guide li { margin: 4px 0; }
.g-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.g-main { fill: var(--work-bg); stroke: var(--work-bd); }
.g-out { fill: var(--done-bg); stroke: var(--done-bd); }
.g-stop { fill: var(--blk-bg); stroke: var(--blk-bd); }
.g-warn { fill: var(--part-bg); stroke: var(--part-bd); }
.g-calm { fill: var(--next-bg); stroke: var(--next-bd); }
.guide .fig text.g-title { font-weight: 600; font-size: 15px; }
.guide .fig text.g-small { font-size: 12px; fill: var(--muted); }
.guide .fig text.g-op { font-size: 12px; }
.guide .fig text.g-bad-text { fill: var(--bad); }
.g-line { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.g-dash { stroke-dasharray: 5 4; }
.g-bad { stroke: var(--bad); }
.g-head { fill: var(--muted); }
.g-head-bad { fill: var(--bad); }
.io { display: flex; align-items: stretch; gap: 0; margin: 10px 0 12px; }
.io-box { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--card); font-size: 14px; text-align: center; }
.io-box b { font-size: 15px; margin-bottom: 2px; }
.io-main { background: var(--work-bg); border-color: var(--work-bd); }
.io-out { background: var(--done-bg); border-color: var(--done-bd); }
.io-arrow { flex: 0 0 28px; align-self: center; text-align: center; color: var(--muted); font-size: 20px; }
.io-arrow::before { content: "→"; }
@media (max-width: 600px) {
  .io { flex-direction: column; }
  .io-arrow { flex-basis: auto; }
  .io-arrow::before { content: "↓"; }
}
h1 { font-size: 24px; margin: 8px 0; }
h2 { font-size: 19px; margin: 20px 0 8px; }
a { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; }
.muted { color: var(--muted); }
.error { background: var(--err-bg); color: var(--bad); border: 1px solid var(--err-bd); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.note { background: var(--note-bg); border: 1px solid var(--note-bd); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
label { display: block; margin: 8px 0 4px; font-weight: 600; }
input, select, textarea { font-size: 18px; padding: 10px; width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--fg); }
input[type=checkbox] { width: auto; transform: scale(1.4); margin-right: 10px; }
label.check { display: flex; align-items: center; font-weight: 400; }
button, .button { display: inline-block; font-size: 18px; padding: 12px 18px; border: 0; border-radius: 8px;
  background: var(--btn); color: #fff; cursor: pointer; text-decoration: none; }
button.secondary, .button.secondary { background: var(--btn2); color: var(--fg); }
button.danger { background: var(--bad); }
button.link { background: none; padding: 0; font-size: inherit; }
form.inline { display: inline; }
.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
table { border-collapse: collapse; width: 100%; background: var(--card); }
th, td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.scroll { overflow-x: auto; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: var(--info); }
.s-overdue, .s-not_started, .s-empty { background: var(--bad); }
.s-at_risk { background: var(--warn); }
.s-unknown { background: var(--info); }
.s-on_track { background: var(--ok); }
.s-shipped { background: var(--shipped); }
.b-blocked { background: var(--block); }
.queue-item a:not(.button) { color: inherit; }
.queue-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.queue-op { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
/* Страница позиции: одна операция крупно, брак и блокировка раскрываются по кнопке. */
.mark-card input.big { font-size: 22px; padding: 12px; }
.mark-card button.big { font-size: 20px; padding: 14px 28px; }
.op-pick select { width: 100%; }
.mark-card > :first-child { margin-top: 0; }
.note-field summary { cursor: pointer; margin-top: 8px; color: var(--muted); }
.more-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.more-acts details.act[open] { flex-basis: 100%; }
.more-acts summary { list-style: none; }
.more-acts summary::-webkit-details-marker { display: none; }
.big { font-size: 28px; font-weight: 700; }
.qr-sheet { text-align: center; }
/* QR без своего фона: на тёмной странице камера его не прочтёт, поэтому подложка всегда белая */
.qr-sheet svg { width: 60mm; height: 60mm; background: #fff; }
@media print { nav.top, .noprint { display: none; } }

/* ---- Мелкое ---- */
.small { font-size: 14px; }
.pline { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pbar { flex: 1 1 80px; max-width: 160px; height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.pbar span { display: block; height: 100%; background: var(--done-bd); }
.pbar-num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { a, button, .button { transition: background-color .15s, color .15s; } }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Штуки: строка — штука (или несколько с одинаковой историей), клетка — операция.
   Все клетки одного размера при любой ширине страницы: таблица не растягивается. Цвет только там,
   где штука лежит сейчас; пройденное — бледное, будущее — пустое. */
:root { --pc-w: 112px; --pc-h: 40px; --pc-num: 76px; }
.pc-wrap { overflow-x: auto; }
table.pcs { border-collapse: separate; border-spacing: 2px; width: auto; table-layout: fixed; }
table.pcs thead th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 2px; text-align: center; line-height: 1.2; vertical-align: bottom; }
table.pcs thead th:not(.pc-num) { width: var(--pc-w); min-width: var(--pc-w); max-width: var(--pc-w); }
table.pcs th.pc-num { position: sticky; left: 0; z-index: 1; background: var(--bg); width: var(--pc-num); min-width: var(--pc-num); max-width: var(--pc-num); text-align: left; font-weight: 600; font-size: 14px; padding: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
table.pcs tbody th.pc-num { height: var(--pc-h); line-height: 1.15; }
.pc { width: var(--pc-w); min-width: var(--pc-w); max-width: var(--pc-w); height: var(--pc-h); overflow: hidden; border-radius: 4px; padding: 1px 4px; font-size: 12px; line-height: 1.25; text-align: center; vertical-align: middle; }
.pc > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-at { color: var(--muted); font-size: 11px; }
.pc-icon { display: none !important; }
.pc-done { background: var(--pc-done-bg); color: var(--pc-done-fg); }
.pc-here { background: var(--pc-here-bg); border: 2px solid var(--work-bd); color: var(--work-fg); font-weight: 600; }
.pc-blocked { background: var(--blk-bg); border: 2px solid var(--blk-bd); color: var(--blk-fg); font-weight: 600; }
.pc-scrap { border: 1px dashed var(--bad); color: var(--bad); }
.pc-next, .pc-none { background: none; }
.pc-none { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--hatch) 7px 8px); }
tr.pc-row-scrap th.pc-num { color: var(--bad); text-decoration: line-through; }
tr.pc-group th, tr.pc-order th { text-align: left; font-weight: 400; font-size: 15px; padding: 8px 6px 2px; position: sticky; left: 0; background: var(--bg); white-space: nowrap; }
tr.pc-group a { font-weight: 600; }
tr.pc-order th { padding-top: 18px; font-size: 18px; border-bottom: 1px solid var(--line); }
tr.pc-order a { font-weight: 700; }
.pc-key { display: inline-block; min-width: 0; width: auto; padding: 0 6px; border-radius: 4px; font-size: 12px; margin-left: 10px; }
.pc-key:first-child { margin-left: 0; }
.state-calm { color: var(--muted); font-size: 14px; }
.k-bad { background: var(--bad); }
.k-warn { background: var(--warn); }
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 4px 0 12px; }
.filters label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--muted); }
.filters select { width: auto; font-size: 16px; padding: 6px 8px; }
.pc-short { display: none; }
@media (max-width: 700px) {
  :root { --pc-w: 34px; --pc-h: 28px; --pc-num: 48px; }
  .pc-full { display: none; } .pc-short { display: inline; }
  .pc { padding: 0; }
  .pc > span, .pc-sub { display: none !important; }
  .pc-done .pc-icon { display: block !important; }
  td.pc-here::after { content: "●"; } td.pc-blocked::after { content: "!"; } td.pc-scrap::after { content: "✗"; }
  table.pcs thead th .pc-short { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 12px; }
  table.pcs thead th { padding: 4px 0; }
  tr.pc-group th, tr.pc-order th { white-space: normal; }
}
/* Страница позиции: всё, кроме формы, свёрнуто под «Подробнее»; журнал — списком, без прокрутки вбок */
details.more { margin: 16px 0; border-top: 1px solid var(--line); }
details.more > summary { cursor: pointer; color: var(--accent); font-size: 18px; padding: 14px 0; }
ul.journal { list-style: none; padding: 0; margin: 0; }
ul.journal li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.journal details summary { cursor: pointer; color: var(--accent); margin-top: 4px; }