/* Office Farm — поверх дизайн-кода Supply OS (sos.css + farm.css). Только свои классы .of-* */
select.inp.of-sel{height:34px;width:180px;flex:none;padding:0 30px 0 10px}
select.inp.sm.of-sel{height:28px;width:150px}
.of-cnt{font-size:12px;white-space:nowrap}

/* таблица */
.of-tbl td{vertical-align:middle}
.of-tbl tr.of-grp td{background:var(--bg-inset);padding:6px 10px;border-top:1px solid var(--border-subtle);cursor:default}
.of-tbl tbody tr.of-grp:hover td{background:var(--bg-inset)}
.of-tbl tbody tr.of-grp:first-child td{border-top:0}
.of-acc{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:12px}
.of-acc b{font-size:12px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.of-acc span{color:var(--text-secondary);font-weight:500}
.of-acc small{color:var(--text-secondary);font-size:11px;white-space:nowrap}
.of-c-code{color:var(--text-muted);font-size:11.5px;width:1%}
.of-tbl td{font-size:12.5px}
.of-c-bm{max-width:250px}
.of-bm{display:flex;align-items:center;gap:7px;min-width:0}
.of-bm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.of-c-bm small{display:block;font-size:11px;margin-top:2px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}
.of-vf{flex:none;font:600 10px/17px 'JetBrains Mono',monospace;letter-spacing:.03em;padding:0 6px;border-radius:4px;border:1px solid var(--border-strong);color:var(--text-secondary)}
.of-vf.ok{background:var(--success-soft);border-color:transparent;color:var(--success)}
.of-c-pk{max-width:150px;overflow:hidden;text-overflow:ellipsis}.of-c-pk .mono{font-size:12px}
.of-c-fp{max-width:180px}
.of-fp{display:flex;align-items:center;gap:5px;min-width:0}
.of-fp span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.of-fp a{color:var(--text-muted);display:inline-grid;place-items:center;flex:none}
.of-fp a:hover{color:var(--info)}
.of-mks{display:inline-flex;gap:3px}
.of-mk{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 6px;border-radius:4px;font:600 10.5px 'JetBrains Mono',monospace;color:var(--text-muted);background:var(--bg-inset)}
.of-mk.on{border:1px solid transparent;background:var(--success-soft);color:var(--success)}
.of-st{display:flex;flex-direction:column;gap:5px;min-width:180px}
.of-stn{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.of-stn small{color:var(--text-muted);font-size:11px}.of-stn small.late{color:var(--warning);font-weight:600}
.of-sbar{display:flex;gap:2px;width:126px}
.of-sbar i{flex:1;height:6px;border-radius:2px;background:var(--border-strong);opacity:.55}
.of-sbar i.on{background:var(--success);opacity:1}
.of-sbar i.cur{background:var(--text-primary)}
.of-stn .muted{color:var(--text-secondary)}
.of-who{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.of-who .ava,.me .ava{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:var(--bg-inset);border:1px solid var(--border-subtle);color:var(--text-primary);font:600 10px Onest,sans-serif;flex:none}
.me .ava{width:30px;height:30px;font-size:11px}

/* карточка */
.of-drawer{width:640px}
.of-h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.of-h2 small{font-size:12px;color:var(--text-muted);font-weight:500}
.of-chead{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.of-ctl{display:grid;gap:4px}
.of-ctl>span{font:600 10px Onest,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.of-ctl .inp{height:30px;min-width:150px;width:auto}
.of-sec .kv{grid-template-columns:140px 1fr;align-items:center}
.of-sec .kv dd{min-width:0;overflow-wrap:anywhere}
.of-sec .kv dd .inp{width:100%}
.of-steps{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.of-step{display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-items:center;padding:4px 0;font-size:12.5px;color:var(--text-muted)}
.of-step small{grid-column:2;font-size:11px;color:var(--text-muted)}
.of-step.on{color:var(--text-primary)}
.of-sn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:600 10px 'JetBrains Mono',monospace;border:1px solid var(--border-strong);color:var(--text-muted)}
.of-step.on .of-sn{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.of-addst{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.of-addst select{flex:1 1 220px;width:auto;height:30px;max-width:300px}
.of-addst input{width:150px;height:30px}
.of-log{margin-top:10px;font-size:12px}
.of-log summary{cursor:pointer;color:var(--text-secondary);font-size:12px}
.of-logr{display:grid;grid-template-columns:86px 1fr auto 24px;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--border-subtle)}
.of-logr:last-child{border-bottom:0}
.of-pks{display:flex;flex-wrap:wrap;gap:4px 14px}
.of-lnk{display:inline-flex;align-items:center;gap:5px;color:var(--text-primary);font-size:12px}
.of-lnk:hover{color:var(--info)}
.of-hint{font-size:11.5px;color:var(--text-muted);margin-top:8px}
.of-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.of-chk{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:6px;border:1px solid var(--border-subtle);font-size:12.5px;color:var(--text-secondary)}
.of-chk:hover{border-color:var(--border-strong);color:var(--text-primary)}
.of-chk.on{background:var(--success-soft);border-color:transparent;color:var(--success);font-weight:600}
.of-note{white-space:pre-wrap;font-size:12.5px}
.of-dfoot{flex:none;display:flex;align-items:center;gap:8px;padding:12px 22px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border-subtle);background:var(--bg-elevated)}
.of-dfoot .muted{font-size:12px}
.of-hist{display:grid;gap:2px}
.of-hr{display:grid;grid-template-columns:96px 1fr auto;gap:10px;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border-subtle)}
.of-hr:last-child{border-bottom:0}

@media (max-width:900px){
  .of-c-pk,.of-c-fp{display:none}
}
@media (max-width:700px){
  .of-drawer{width:100%}
  .of-list .fm-search{width:100%}
  .of-list .fm-tool select.of-sel{flex:1 1 calc(50% - 4px);width:auto;min-width:0}
  .of-dfoot{padding-left:16px;padding-right:16px}.of-dfoot .muted{display:none}
  .of-list .fm-tool .sp{display:none}
  .of-list .fm-tool .btn.pri{order:10;margin-left:auto}
  .of-cnt{order:9;align-self:center}
  .of-acc{flex-wrap:wrap;row-gap:2px}
  .of-acc b{flex:1 0 100%}
  /* таблица → строки-карточки */
  .of-tbl thead{display:none}
  .of-tbl,.of-tbl tbody{display:block}
  .of-tbl tr{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:6px;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
  .of-tbl tr.of-grp{display:block;padding:0}
  .of-tbl td{padding:0;border:0!important;white-space:normal}
  .of-tbl tr:not(.of-grp) td{background:none!important}
  .of-tbl .of-c-code{grid-column:1;grid-row:1;display:none}
  .of-tbl .of-c-acc{grid-column:1;grid-row:1;min-width:0}
  .of-tbl tr>td:nth-child(7){grid-column:2;grid-row:1;justify-self:end}
  .of-tbl .of-c-bm{grid-column:1/3;grid-row:2;max-width:none;padding-left:10px!important;border-left:2px solid var(--border-subtle)!important}
  .of-tbl .of-c-pk{display:none}
  .of-tbl .of-c-st{grid-column:1/3;grid-row:3}
  .of-tbl .of-c-mk{grid-column:1;grid-row:4}
  .of-tbl .of-c-who{grid-column:2;grid-row:4;justify-self:end}
  .of-tbl .of-bm b{max-width:none}
  .of-sub dd{flex-wrap:wrap}
  .of-st{flex-direction:row;align-items:center;gap:10px;min-width:0}
  .of-stn{overflow:hidden;text-overflow:ellipsis}
  .of-steps{grid-template-columns:1fr}
  .of-sec .kv{grid-template-columns:110px 1fr}
  .of-chead .sp{display:none}
}
.of-c-pk .mono{display:inline-block;max-width:130px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.of-bm b{max-width:210px}
.of-c-fp .of-fp{max-width:170px}
.of-c-bm{max-width:230px}.of-bm b{max-width:180px}
.of-c-pk .mono{max-width:105px}
.of-c-fp .of-fp{max-width:140px}
.of-mk{padding:0 5px}.of-mks{gap:2px}
.of-tbl th,.of-tbl td{padding-left:7px;padding-right:7px}
@media (max-width:1360px){.of-c-pk,.of-tbl th.of-c-code,.of-tbl td.of-c-code{display:none}}

/* 05.11: правка на месте, кликабельные этапы, РК, чек-лист */
.of-ifw{display:flex;align-items:center;gap:2px;min-width:0;width:100%}
.of-ifw.busy{opacity:.55}
.of-if{flex:1;min-width:0;width:100%;font:inherit;font-size:12.5px;color:var(--text-primary);background:transparent;border:1px solid transparent;border-radius:5px;padding:4px 7px;margin:-4px 0 -4px -8px;outline:none;transition:border-color .12s,background .12s}
.of-if.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.of-if::placeholder{color:var(--text-muted);opacity:1}
.of-if:hover{border-color:var(--border-subtle);background:var(--bg-surface)}
.of-if:focus{border-color:var(--text-primary);background:var(--bg-surface);box-shadow:0 0 0 3px var(--accent-wash)}
.of-ifw .fm-cp{opacity:0}.of-ifw:hover .fm-cp{opacity:1}
.of-sec .kv{row-gap:6px}
.of-prog{text-transform:none;letter-spacing:0;font-weight:500}.of-prog b{color:var(--text-primary)}
.of-stgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.of-stg{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;padding:6px 10px 6px 7px;border-radius:8px;text-align:left;line-height:1.25;border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-secondary);font-size:12.5px;transition:border-color .12s,background .12s}
.of-stg:hover{border-color:var(--border-strong);color:var(--text-primary)}
.of-stg .of-sn{width:22px;height:22px;flex:none}
.of-stg .of-stt{flex:1;min-width:0}
.of-stg small{flex:none;font:600 10.5px 'JetBrains Mono',monospace;color:var(--text-secondary)}
.of-stg.on{background:var(--success-soft);border-color:transparent;color:var(--success);font-weight:600}
.of-stg.on .of-sn{background:var(--success);color:var(--bg-surface);border-color:transparent}
.of-sub{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-subtle)}
.of-subh{font:600 10.5px Onest,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:10px}

.of-cardv{margin-right:6px;flex:none}
.of-sub dd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.of-pks{display:flex;flex-wrap:wrap;gap:6px}
.of-pk{display:inline-flex;align-items:center;gap:1px;height:28px;padding:0 4px 0 10px;border-radius:6px;background:var(--bg-inset);font-size:12px}
.of-pkx{width:22px;height:22px;border-radius:5px;display:inline-grid;place-items:center;color:var(--text-muted)}
.of-pkx:hover{color:var(--danger);background:var(--danger-soft)}
.of-pkx svg{width:11px;height:11px}
.of-pkadd{display:flex;gap:6px;margin-top:10px}
.of-pkadd .inp{flex:1;height:30px}
.of-cbar{height:4px;border-radius:2px;background:var(--border-subtle);overflow:hidden;margin-bottom:12px}
.of-cbar i{display:block;height:100%;background:var(--success);transition:width .2s}
.of-cl{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.of-cli{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border-radius:8px;border:1px solid var(--border-subtle);background:var(--bg-surface);text-align:left;font-size:13px;color:var(--text-primary)}
.of-cli:hover{border-color:var(--border-strong)}
.of-cli small{margin-left:auto;font-size:11px;color:var(--text-muted);white-space:nowrap}
.of-cbx{width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid var(--border-strong);display:grid;place-items:center}
.of-cli.on{background:var(--success-soft);border-color:transparent;color:var(--success);font-weight:600}
.of-cli.on .of-cbx{background:var(--success);border-color:var(--success);color:var(--bg-surface)}
.of-iss{margin-top:14px}
@media (max-width:700px){.of-cl{grid-template-columns:1fr}.of-stg{font-size:12px}.of-chead .of-ctl{flex:1 1 0}.of-chead .of-ctl .inp{width:100%;min-width:0}}
.of-stg.on small{color:var(--success)}

/* 05.11 v4: сетап = соц + несколько BM */
.of-bms{display:flex;flex-direction:column;gap:10px}
.of-bmc{border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-surface);padding:12px 14px 14px}
.of-bmh{display:flex;align-items:center;gap:10px;margin:-2px 0 10px;min-width:0}
.of-bmn{flex:none;font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.04em;padding:3px 7px;border-radius:5px;background:var(--bg-inset);color:var(--text-secondary)}
.of-bmt{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-bmx{flex:none}
.of-bmc .of-if:hover,.of-bmc .of-if:focus{background:var(--bg-elevated)}
.of-subh{display:flex;align-items:center;gap:8px}
.of-subh .of-lnk{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.of-subc{margin-left:auto;font-family:'JetBrains Mono',monospace;color:var(--text-secondary)}
.of-warn{text-transform:none;letter-spacing:0;font-weight:600;color:var(--warning);background:var(--warning-soft);padding:1px 6px;border-radius:4px}
.of-pks+.of-pkadd{margin-top:8px}.of-sub .of-pkadd{margin-top:0}.of-sub .of-pks+.of-pkadd{margin-top:8px}
.of-bmadd{margin-top:10px;width:100%;height:38px;border:1px dashed var(--border-strong);border-radius:10px;color:var(--text-secondary);font-size:13px;background:transparent}
.of-bmadd:hover{color:var(--text-primary);border-color:var(--text-primary)}
.of-hint-top{margin:-2px 0 10px}
.of-tbl .of-c-bm .of-bm{display:flex;align-items:center;gap:6px;min-width:0}
.of-tbl .of-c-bm .of-bm+.of-bm{margin-top:3px}
.of-tbl .of-c-bm .of-bm b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.of-tbl .of-c-acc b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.of-tbl .of-c-acc small{display:block;color:var(--text-muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-mk.part{color:var(--warning);border-color:var(--warning-soft);background:var(--warning-soft)}
@media (max-width:700px){.of-bmc{padding:10px 10px 12px}}
.of-go{margin-left:4px;flex:none;font-family:'JetBrains Mono',monospace;font-size:11px}
.of-sub dd .of-ifw{flex:1}
.of-lnks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;font-size:12px}
.of-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:999px;border:1px solid var(--border-subtle);background:var(--bg-surface);font-size:12px;color:var(--text-primary)}
.of-chip:hover{border-color:var(--border-strong)}
.of-tbl th.of-c-who{white-space:nowrap}

/* eCards */
.of-ecbtn{margin-left:auto;text-transform:none;letter-spacing:0;height:26px}
.of-ecb{text-transform:none;letter-spacing:0;font-weight:600;font-size:10.5px;padding:1px 7px;border-radius:4px;background:var(--success-soft);color:var(--success)}
.of-ecb.off{background:var(--bg-inset);color:var(--text-muted)}
.of-ecp{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:var(--bg-inset);font-size:12.5px;margin-bottom:8px}
.of-ecp.error{background:var(--danger-soft);color:var(--danger)}
.of-ecp.error .btn{margin-left:auto}
.spin{width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--text-primary);animation:ofspin .8s linear infinite}
@keyframes ofspin{to{transform:rotate(360deg)}}
.of-ec{border-radius:10px;padding:12px 14px;background:var(--bg-inset)}
.of-ecn{display:flex;align-items:center;gap:6px;font-size:16px;letter-spacing:.04em;margin-bottom:10px}
.of-ecr{display:grid;grid-template-columns:repeat(3,max-content);gap:6px 28px}
.of-ecr span{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap}
.of-ecr small,.of-eacc small{flex:0 0 100%;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.of-ecr b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.of-eca{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.of-sp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.of-sp small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.of-sp b{font:600 14px 'JetBrains Mono',monospace}.of-sp b.bad{color:var(--danger)}
.of-ops{margin-top:8px}
.of-op{display:grid;grid-template-columns:88px minmax(0,1fr) auto 76px;gap:8px;align-items:center;font-size:12px;padding:4px 0;border-top:1px solid var(--border-subtle)}
.of-opm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-code{font:700 11px 'JetBrains Mono',monospace;padding:0 5px;border-radius:4px;background:var(--accent-wash);color:var(--text-primary)}
.of-opt{font-size:11px;color:var(--text-secondary)}.of-opt.bad{color:var(--danger)}.of-opt.hold{color:var(--warning)}.of-opt.ok{color:var(--success)}
.of-op .r{text-align:right}
@media (max-width:1360px){.of-c-sp{display:none}}
@media (max-width:700px){.of-ecr{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}.of-sp{grid-template-columns:1fr 1fr}.of-op{grid-template-columns:84px minmax(0,1fr) 64px}.of-op .of-opt{display:none}.of-eca .btn{height:36px;flex:1 1 auto}}
.of-opd{white-space:nowrap}
.of-eacc{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:8px;font-size:12.5px}
.of-eacc span{min-width:0;overflow-wrap:anywhere}
[data-theme=dark] .of-ec{background:color-mix(in srgb,var(--bg-inset) 70%,var(--bg-elevated))}