/* FFOS · прототип · партия 2 (экраны 10–18). Подключается ПОСЛЕ fos.css / card.css / tsd.css.
 * Только новые классы; токены — из fos.css. Ничего из общих файлов не переопределяет. */

/* ── Мастер (как в 07б) ─────────────────────────────────── */
.wz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--divider); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; }
.steps.n5 { grid-template-columns: repeat(5, 1fr); } .steps.n4 { grid-template-columns: repeat(4, 1fr); }
.step { background: var(--surface); padding: 10px 14px; display: flex; gap: 10px; align-items: center; border: 0; text-align: left; }
.step .st-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--ink-muted); flex: none; }
.step .nm { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.step .s { font-size: 11px; color: var(--ink-muted); }
.step.done .st-n { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.step.done .nm { color: var(--ink); }
.step.cur { background: var(--row-attention); box-shadow: inset 0 -2px 0 var(--accent); }
.step.cur .st-n { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.step.cur .nm { color: var(--ink); }
.pane { display: none; } .pane.on { display: block; }
.opts { display: grid; gap: 10px; }
.opts.g2 { grid-template-columns: 1fr 1fr; } .opts.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opt { border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 12px 14px; background: var(--surface-elevated); display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.opt.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt .rd { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); flex: none; margin-top: 1px; }
.opt.on .rd { border: 5px solid var(--ink); }
.opt .t { font-weight: 600; } .opt .s { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.inp { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-elevated); display: flex; align-items: center; padding: 0 10px; gap: 8px; font-size: 13px; min-width: 0; }
.inp.mono { font-family: var(--font-mono); }
.inp.ta { height: 64px; align-items: flex-start; padding-top: 8px; color: var(--ink-2); }
.inp .ph { color: var(--ink-muted); }
.inp .sfx { margin-left: auto; color: var(--ink-muted); font-family: var(--font-mono); font-size: 11.5px; }
.lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 5px; }
.lbl .req { color: var(--bad-fg); }
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frm.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .frm.f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.frm .sp2 { grid-column: span 2; } .frm .sp3 { grid-column: span 3; } .frm .all { grid-column: 1 / -1; }
.hint { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; }
.sum .rowx { display: flex; justify-content: space-between; gap: 10px; padding: 8px 15px; border-bottom: 1px solid var(--divider); font-size: 12.5px; }
.sum .rowx:last-child { border-bottom: 0; }
.sum .rowx > span:first-child { color: var(--ink-muted); }
.sum .rowx > span:last-child { font-weight: 600; text-align: right; }
.sum .rowx.tot { background: var(--surface-subtle); font-size: 14px; }
.sum .rowx.tot > span:last-child { font-family: var(--font-mono); }
.wz-f { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.chk:last-child { border-bottom: 0; }
.cb { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-elevated); }
.cb.on { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); }
.cb.on::after { content: '✓'; font-size: 12px; font-weight: 700; line-height: 1; }

/* ── Общие мелочи ────────────────────────────────────────── */
.b2-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b2-note { font-size: 12px; color: var(--ink-2); padding: 9px 15px; background: var(--surface-subtle); border-top: 1px solid var(--divider); }
.b2-note.top { border-top: 0; border-bottom: 1px solid var(--divider); }
.b2-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); }
.scroll-b { overflow: auto; scrollbar-width: thin; }
.h220 { height: 220px; } .h260 { height: 260px; } .h300 { height: 300px; } .h340 { height: 340px; } .h400 { height: 400px; }
.scroll-b .tbl thead th { position: sticky; top: 0; z-index: 1; }
.num-ok { color: var(--ok-fg); font-weight: 700; } .num-bad { color: var(--bad-fg); font-weight: 700; } .num-warn { color: var(--warn-fg); font-weight: 700; } .num-vi { color: var(--violet-fg); font-weight: 700; }
.b2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.b2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.b2-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gap16 { margin-bottom: 16px; }
.ic-box.bad { background: var(--bad-bg); color: var(--bad-fg); }
.ic-box.ok { background: var(--ok-bg); color: var(--ok-fg); }
.ic-box.info { background: var(--info-bg); color: var(--info-fg); }
.ic-box.violet { background: var(--violet-bg); color: var(--violet-fg); }
.ic-box.teal { background: var(--teal-bg); color: var(--teal-fg); }
.ic-box.mut { background: var(--surface-subtle); color: var(--ink-2); }
.kv2 { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; font-size: 12.5px; }
.kv2 > div { padding: 7px 15px; border-bottom: 1px solid var(--divider); }
.kv2 > div:nth-child(odd) { color: var(--ink-muted); padding-right: 0; }
.kv2 > div:nth-last-child(-n+2) { border-bottom: 0; }

/* Фото-плитки (вместо реальных фото) */
.phs { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-t { width: 64px; height: 64px; border-radius: var(--r-md); background: repeating-linear-gradient(135deg, var(--surface-subtle) 0 8px, var(--surface) 8px 16px); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); position: relative; flex: none; }
.ph-t.lg { width: 96px; height: 96px; } .ph-t.xl { width: 100%; height: 150px; }
.ph-t .cap { position: absolute; left: 4px; bottom: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); background: var(--surface-elevated); padding: 0 3px; border-radius: 2px; }
.ph-t.add { border-style: dashed; border-color: var(--border-strong); background: none; }
.ph-t.ref { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Диалог (статичный, для скриншотов) */
.b2-ov { position: fixed; inset: 0; background: rgb(10 10 10 / .45); z-index: 40; display: none; }
.b2-dlg { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); width: 720px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 20px 50px rgb(0 0 0 / .3); z-index: 41; display: none; }
.b2-ov.on, .b2-dlg.on { display: block; }
.b2-dlg .card-h .t { font-size: 15px; }

/* Маршрут (забор / рейс) */
.rt { display: flex; flex-direction: column; }
.rt-p { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 15px; position: relative; border-bottom: 1px solid var(--divider); }
.rt-p:last-child { border-bottom: 0; }
.rt-p .mk { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-elevated); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2); z-index: 1; }
.rt-p.done .mk { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.rt-p.cur .mk { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.rt-p.bad .mk { background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-fg); }
.rt-p::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: var(--divider); }
.rt-p:first-child::before { top: 22px; } .rt-p:last-child::before { bottom: calc(100% - 22px); }
.rt-p .nm { font-weight: 600; }
.rt-p .s { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.rt-p .m { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); margin-top: 3px; }
.rt-leg { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); padding: 0 15px 0 53px; margin: -4px 0 2px; }

/* Шкала загрузки (рейс, склад) */
.load { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 10px; align-items: center; padding: 8px 15px; font-size: 12.5px; }
.load .bar { height: 10px; }
.load .v { font-family: var(--font-mono); text-align: right; font-size: 12px; }

/* Доска волн FBS / колонки */
.board { display: grid; gap: 12px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.col { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; min-width: 0; }
.col-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.col-h .t { font-weight: 700; font-size: 13px; }
.col-h .n { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
.col-b { padding: 8px; display: flex; flex-direction: column; gap: 8px; height: 420px; overflow: auto; scrollbar-width: thin; }
.wv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: block; }
.wv:hover { border-color: var(--ink); }
.wv.attn { border-color: var(--accent); background: var(--row-attention); }
.wv.bad { border-color: var(--danger); }
.wv .top { display: flex; align-items: center; gap: 6px; }
.wv .t { font-weight: 600; font-size: 13px; margin-top: 6px; }
.wv .s { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.wv .ft { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.wv .bar { margin-top: 6px; }

/* Матрица ролей */
.mx-wrap { overflow: auto; max-height: 640px; scrollbar-width: thin; }
.mx { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.mx th, .mx td { border-bottom: 1px solid var(--divider); border-right: 1px solid var(--divider); padding: 0 8px; height: 36px; background: var(--surface); }
.mx thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-subtle); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: center; height: 56px; white-space: normal; line-height: 1.25; min-width: 86px; }
.mx thead th:first-child { text-align: left; left: 0; z-index: 3; min-width: 300px; }
.mx td:first-child { position: sticky; left: 0; z-index: 1; min-width: 300px; }
.mx tr.grp td { background: var(--surface-subtle); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hover); height: 32px; }
.dark .mx tr.grp td { color: var(--accent); }
.mx td.c { text-align: center; }
.mx .pr { display: flex; flex-direction: column; } .mx .pr .s { font-size: 11px; color: var(--ink-muted); }
.lv { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 22px; padding: 0 6px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid; cursor: pointer; }
.lv.no { color: var(--ink-muted); border-color: var(--border); background: transparent; }
.lv.r { color: var(--info-fg); background: var(--info-bg); border-color: color-mix(in srgb, var(--info-fg) 45%, transparent); }
.lv.own { color: var(--teal-fg); background: var(--teal-bg); border-color: color-mix(in srgb, var(--teal-fg) 45%, transparent); }
.lv.w { color: var(--ok-fg); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok-fg) 45%, transparent); }
.lv.full { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.lv.chg { outline: 2px solid var(--info); outline-offset: 1px; }

/* P&L */
.pl td { height: 38px; }
.pl tr.lvl td { background: var(--surface-subtle); font-weight: 700; }
.pl tr.lvl td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pl tr.sub td:first-child { padding-left: 30px; color: var(--ink-2); }
.pl .pct { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); margin-left: 6px; }

/* Дерево мест */
.tree { font-size: 12.5px; }
.tree .n { display: flex; align-items: center; gap: 8px; padding: 6px 15px; border-bottom: 1px solid var(--divider); }
.tree .n.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.tree .n .ct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.tree .l1 { padding-left: 32px; } .tree .l2 { padding-left: 50px; } .tree .l3 { padding-left: 68px; } .tree .l4 { padding-left: 86px; }

/* Оси остатка */
.axes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.axg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-elevated); }
.axg .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: 0 8px; display: inline-flex; align-items: center; background: var(--surface-subtle); border-right: 1px solid var(--border); }
.axg button { border: 0; background: none; padding: 5px 9px; font-size: 12px; color: var(--ink-2); border-right: 1px solid var(--divider); }
.axg button:last-child { border-right: 0; }
.axg button.on { background: var(--ink); color: var(--ink-inverse); font-weight: 600; }
.stk-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-subtle); min-width: 90px; }
.stk-bar i { display: block; height: 100%; }
.sb-ok { background: var(--success); } .sb-res { background: var(--info); } .sb-nr { background: var(--accent); } .sb-nom { background: var(--border-strong); } .sb-bad { background: var(--danger); } .sb-q { background: #8B5CF6; } .sb-tr { background: #14B8A6; }
.lgd { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.lgd i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ТСД партии 2 */
.t-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-grade button { height: 64px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-elevated); color: var(--ink); font-size: 14px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.t-grade button small { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.t-grade button.ok { border-color: var(--success); } .t-grade button.bad { border-color: var(--danger); } .t-grade button.vi { border-color: #8B5CF6; } .t-grade button.in { border-color: var(--info); }
.t-grade button.on { box-shadow: inset 0 0 0 2px currentColor; }
.t-grade button.ok.on { background: var(--ok-bg); color: var(--ok-fg); } .t-grade button.bad.on { background: var(--bad-bg); color: var(--bad-fg); }
.t-steps { display: flex; gap: 4px; padding: 10px 16px 0; }
.t-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); display: block; }
.t-steps i.d { background: var(--success); } .t-steps i.c { background: var(--accent); }
.t-ph { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.t-ph .ph-t { width: 100%; height: 64px; }
.t-sig { height: 110px; border: 1.5px dashed var(--border-strong); border-radius: 12px; display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 12px; color: var(--ink-muted); font-size: 12px; position: relative; }
.t-sig svg { position: absolute; left: 20px; top: 16px; }
.t-sw { display: flex; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; }
.t-sw a, .t-sw button { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; font-size: 12px; color: var(--ink-2); border: 0; background: none; }
.t-sw .on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tsd-demo { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 16px 0; }
.tsd-demo a { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; }
.tsd-demo a.on { color: var(--accent); border-color: var(--accent); }

/* Раздел с подменю-сегментом (Деньги, Люди) */
.sect-nav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.sect-nav a, .sect-nav button { padding: 9px 12px; font-size: 13px; color: var(--ink-2); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.sect-nav .on { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.sect-nav .n { font-family: var(--font-mono); font-size: 11px; color: var(--bad-fg); font-weight: 700; }
.view { display: none; } .view.on { display: block; }

/* Календарь-график (смены) */
.gr { border-collapse: separate; border-spacing: 0; font-size: 12px; width: 100%; }
.gr th, .gr td { border-bottom: 1px solid var(--divider); border-right: 1px solid var(--divider); height: 34px; text-align: center; padding: 0 2px; background: var(--surface); }
.gr thead th { background: var(--surface-subtle); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.gr thead th.we { color: var(--bad-fg); }
.gr td:first-child, .gr th:first-child { text-align: left; padding: 0 10px; min-width: 190px; position: sticky; left: 0; z-index: 1; }
.sh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px; border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.sh.d { background: var(--accent-soft); color: var(--accent-soft-fg); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.sh.n { background: var(--info-bg); color: var(--info-fg); }
.sh.o { color: var(--ink-muted); }
.sh.x { background: var(--bad-bg); color: var(--bad-fg); }
.sh.v { background: var(--teal-bg); color: var(--teal-fg); }

/* Бумажные формы в прототипе (акт) — мелкий текст допустим как на бумаге */
.lbl-paper { background: #fff; color: #0A0A0A; border: 1px solid #CFCABE; border-radius: 4px; padding: 18px 22px; font-size: 11px; line-height: 1.5; }
.lbl-paper h4 { margin: 0 0 6px; font-size: 13px; text-align: center; }
.lbl-paper table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.lbl-paper td, .lbl-paper th { border: 1px solid #9A968E; padding: 3px 5px; font-size: 10px; }

/* Водитель (390) — на базе tsd.css */
.drv-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.drv-st span { font-size: 11px; text-align: center; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--border); color: var(--ink-muted); }
.drv-st span.d { color: var(--ok-fg); border-color: color-mix(in srgb, var(--success) 60%, transparent); background: var(--ok-bg); }
.drv-st span.c { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }

@media (max-width: 860px) {
  .wz, .b2-grid2, .b2-grid3, .b2-grid4 { grid-template-columns: 1fr; }
  .frm, .frm.f3, .frm.f4 { grid-template-columns: 1fr; }
  .frm .sp2, .frm .sp3 { grid-column: auto; }
  .steps .step .nm, .steps .step .s { display: none; }
}