:root{
  --ground:#eceae6; --surface:#fff; --surface-2:#f6f5f2; --sunken:#e4e1db;
  --ink:#191b1d; --ink-2:#4d5257; --muted:#82878c;
  --edge:#d9d6d0; --hair:#e8e5df;
  --action:#1857c4; --action-ink:#fff;
  --ok:#0a7d34; --ok-bg:#e6f4ea;
  --miss:#c0322f; --miss-bg:#fbeaea;
  --late:#a86412; --late-bg:#fbf1e2;
  --off:#82878c; --off-bg:#eeece8;
  --paper:#fff; --shadow:0 1px 2px rgba(25,27,29,.07),0 8px 24px rgba(25,27,29,.07);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#141516; --surface:#1e2022; --surface-2:#26282b; --sunken:#0e0f10;
  --ink:#f0efec; --ink-2:#b6babd; --muted:#82878c;
  --edge:#33363a; --hair:#2a2d30;
  --action:#4f8bf0; --action-ink:#0e0f10;
  --ok:#3fbf63; --ok-bg:#16301f;
  --miss:#e87673; --miss-bg:#331a1a;
  --late:#d69a45; --late-bg:#302516;
  --off:#82878c; --off-bg:#26282b;
  --paper:#1e2022; --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
/* Шрифты системные: страница должна открываться на объекте без сети и ничего не тянуть со стороны. */
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; cursor:pointer; color:inherit}
/* двойное нажатие не увеличивает страницу: мастер жмёт быстро и подряд */
button,a,label,input,select,textarea{touch-action:manipulation}
input,select,textarea{font:inherit; color:var(--ink)}

/* ================= вход ================= */
.login{min-height:100%; display:flex; align-items:center; justify-content:center; padding:20px}
.lbox{background:var(--surface); border:1px solid var(--edge); border-radius:16px; box-shadow:var(--shadow);
  padding:26px 22px 20px; width:min(380px,100%); display:grid; gap:12px}
.lbox h1{margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em}
.lsub{margin:-8px 0 4px; color:var(--muted); font-size:13.5px}
.lbox label,.field{display:grid; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.lbox input,.field input,.field select{font-size:16px; padding:11px 12px; border:1px solid var(--edge);
  border-radius:10px; background-color:var(--surface-2); width:100%; min-width:0; min-height:46px}
.lbox input:focus,.field input:focus,.field select:focus{outline:2px solid var(--action); outline-offset:-1px; background-color:var(--surface)}
/* Safari на iPhone рисует дату и список по-своему: дата не сжимается уже своей ширины и вылезает из колонки, пустая —
   ниже заполненной, список — ниже полей. Системный вид снят, размеры как у остальных полей. */
.field input[type=date],.field input[type=time]{-webkit-appearance:none; appearance:none; display:block; text-align:left}
.field input::-webkit-date-and-time-value{text-align:left; min-height:1.35em}
.field select{-webkit-appearance:none; appearance:none; padding-right:38px; background-repeat:no-repeat; background-position:right 13px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2382878c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lerr{margin:0; color:var(--miss); background:var(--miss-bg); border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600}
.lmsg{margin:0; color:var(--late); background:var(--late-bg); border-radius:9px; padding:9px 12px; font-size:13px}
.lbox .bigbtn{margin-top:4px}

/* ================= каркас ================= */
.shell{min-height:100%; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 22px; border-bottom:1px solid var(--edge); background:var(--surface)}
.brand{font-weight:800; letter-spacing:-.02em; font-size:16px}
.brand span{color:var(--muted); font-weight:500}
.ctx{font-size:13px; color:var(--ink-2); display:flex; gap:6px 16px; flex-wrap:wrap}
.ctx b{font-weight:600}

.stage{flex:1; display:grid; grid-template-columns:minmax(360px,400px) minmax(0,1fr); gap:26px;
  padding:26px 22px 34px; align-items:start; max-width:1400px; margin:0 auto; width:100%}
.stage>*{min-width:0}

/* ================= приложение ================= */
.phone{background:var(--surface); border:1px solid var(--edge); border-radius:22px;
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  height:min(84vh,780px); position:sticky; top:22px}
.app{flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--surface)}
.app-head{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--hair)}
.headmain{flex:1; min-width:0; background:none; border:0; padding:2px 0; text-align:left}
.app-head .obj{display:block; font-weight:700; font-size:15px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-head .obj.unset{color:var(--action)}
.app-head .date{display:block; font-size:12.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* статус синхронизации виден всегда */
.sync{flex:none; border:0; border-radius:999px; padding:6px 11px; font-size:12px; font-weight:700; line-height:1.2;
  background:var(--ok-bg); color:var(--ok); text-align:center; max-width:52%}
.sync.pending{background:var(--late-bg); color:var(--late)}
.sync.busy{background:var(--action); color:var(--action-ink)}
.sync small{display:block; font-weight:600; font-size:10.5px; opacity:.85}

.screen{flex:1; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.tabs{display:flex; border-top:1px solid var(--hair); background:var(--surface)}
.tab{flex:1; background:none; border:0; padding:10px 4px 12px; color:var(--muted);
  font-size:11.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:3px}
.tab .ic{font-size:17px; line-height:1}
.tab[aria-selected="true"]{color:var(--action)}
.tab:focus-visible{outline:2px solid var(--action); outline-offset:-3px}

/* --- дата смены --- */
.datenav{display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--hair)}
.datenav button{width:38px; height:38px; flex:none; border-radius:10px; border:1px solid var(--edge); background:var(--surface);
  font-size:20px; font-weight:700; line-height:1}
.datenav button:disabled{opacity:.35; cursor:default}
.dlabel{flex:1; position:relative; text-align:center; font-weight:700; font-size:14.5px; padding:8px 6px;
  border-radius:10px; background:var(--surface-2)}
.dlabel small{display:block; font-weight:500; font-size:12px; color:var(--muted)}
.dlabel input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.backnote{padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--late); background:var(--late-bg); display:flex; gap:10px; align-items:center}
.backnote button{margin-left:auto; border:0; background:none; color:var(--action); font-weight:700; font-size:12.5px; padding:2px 0; white-space:nowrap}

/* --- список бригады --- */
.crew{display:flex; flex-direction:column}
.person{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
  padding:11px 14px; border:0; border-bottom:1px solid var(--hair); background:none;
  width:100%; text-align:left; color:var(--ink)}
.person:active{background:var(--surface-2)}
.person .nm{display:block; font-weight:600; font-size:14.5px; letter-spacing:-.01em}
.person .rl{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.person .warn{display:block; font-size:11.5px; color:var(--late); font-weight:600; margin-top:3px}
.person .warn.bad{color:var(--miss)}
#c-att.onleave :is(.times,.hrs,.opt,.restwarn){display:none}
.leavebox{border:1px solid var(--edge); border-radius:12px; padding:12px 13px; margin-bottom:12px; background:var(--off-bg)}
.leavebox .fnote{margin:6px 0 0}
.person .note{display:block; font-size:11.5px; color:var(--ink-2); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52vw}
.chip{font-size:12px; font-weight:700; padding:4px 9px; border-radius:7px; white-space:nowrap}
.c-none{background:var(--sunken); color:var(--muted)}
.c-ok{background:var(--ok-bg); color:var(--ok)}
.c-late{background:var(--late-bg); color:var(--late)}
.c-miss{background:var(--miss-bg); color:var(--miss)}
.c-off{background:var(--off-bg); color:var(--off)}
.more{color:var(--muted); font-size:19px; line-height:1; padding:4px 2px 4px 6px}
.empty{font-size:13px; color:var(--muted); padding:2px 0 4px}
.emptybig{padding:26px 18px 8px; text-align:center; color:var(--ink-2); font-size:14px}
.emptybig b{display:block; font-size:16px; color:var(--ink); margin-bottom:4px}
.addrow{padding:12px 14px}
.addbtn{width:100%; border:1px dashed var(--edge); background:var(--surface-2); color:var(--action);
  border-radius:11px; padding:13px; font-size:14.5px; font-weight:700}
.shiftnote{padding:14px}
.shiftnote textarea{display:block}
.shiftnote label,.notefield label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:5px}
.shiftnote textarea,.notefield textarea{width:100%; resize:vertical; min-height:60px; padding:10px 12px; font-size:16px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:10px}
.shiftnote textarea:focus,.notefield textarea:focus{outline:0; border-color:var(--action); background:var(--surface)}

.sumbar{padding:12px 14px; background:var(--surface-2); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:12.5px}
.sumbar b{font-size:16px; font-weight:700; display:block; letter-spacing:-.01em}
.sumbar span{color:var(--muted)}
.sumbar .wide{grid-column:1/-1}
.sumbar .wide b{font-size:13.5px; font-weight:600}

/* --- фильтры по статусу и выбор списком --- */
.fbar{display:flex; gap:6px; padding:9px 12px; overflow-x:auto; border-bottom:1px solid var(--hair); scrollbar-width:none}
.fbar::-webkit-scrollbar{display:none}
.fchip{flex:none; border:1px solid var(--edge); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; white-space:nowrap}
.fchip b{font-weight:700; margin-left:5px; color:var(--muted)}
.fchip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.fchip[aria-pressed="true"] b{color:inherit; opacity:.7}
.selbar{display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--hair)}
.selbar .lnk{border:0; background:none; color:var(--action); font-weight:700; font-size:13px; padding:4px 0}
.selbar .lnk:last-child{margin-left:auto}
.person .box{width:22px; height:22px; border-radius:6px; border:2px solid var(--edge);
  display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--action-ink)}
.person[aria-pressed="true"]{background:var(--surface-2)}
.person[aria-pressed="true"] .box{background:var(--action); border-color:var(--action)}
.massbar{position:sticky; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--edge);
  box-shadow:0 -4px 16px rgba(0,0,0,.08); padding:10px 12px 12px; display:grid; gap:8px}
.massbar .mhead{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; font-weight:700}
.massbar .mhead small{font-weight:500; color:var(--muted); font-size:12px}
.mtimes .field input{min-height:40px; padding:7px 10px}
.mbtns{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.mbtns button{border:0; border-radius:9px; padding:11px 4px; font-size:13px; font-weight:700}
.mbtns button:disabled{opacity:.45; cursor:default}
.mbtns .m-ok{background:var(--action); color:var(--action-ink)}
.mbtns .m-miss{background:var(--miss-bg); color:var(--miss)}
.mbtns .m-off{background:var(--sunken); color:var(--ink)}

.subtabs{display:flex; gap:2px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--hair)}
.stab{flex:1; border:0; background:none; border-radius:8px; padding:7px 6px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.stab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stab i{font-style:normal; margin-left:5px; font-size:11px; font-weight:700; color:var(--action)}

/* --- период --- */
.perbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--hair)}
.totals .perbar,.docpane .perbar{padding:0 0 12px; border-bottom:0}
.perbar .mon{display:flex; align-items:center; gap:4px; font-weight:700; font-size:13.5px}
.perbar .mon button{width:30px; height:30px; border-radius:8px; border:1px solid var(--edge); background:var(--surface); font-size:16px; font-weight:700; line-height:1}
.perbar .mon span{min-width:104px; text-align:center}
.seg{display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:9px; margin-left:auto}
.seg button{border:0; background:none; border-radius:7px; padding:5px 9px; font-size:12px; font-weight:600; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink)}

/* --- сетка табеля в приложении --- */
.gridwrap{overflow:auto; max-width:100%}
table.grid{border-collapse:collapse; font-size:11.5px; width:100%}
table.grid th,table.grid td{border:1px solid var(--hair); padding:5px 4px; text-align:center; white-space:nowrap; min-width:27px}
table.grid th.nm,table.grid td.nm{text-align:left; position:sticky; left:0; background:var(--surface); z-index:1; max-width:112px; overflow:hidden; text-overflow:ellipsis}
table.grid thead th{background:var(--surface-2); font-weight:600; color:var(--ink-2)}
table.grid th.we{color:var(--miss)}
table.grid td.tap{cursor:pointer}
table.grid td.out{background:var(--surface-2); color:var(--edge)}
table.grid td.today{box-shadow:inset 0 0 0 2px var(--action)}
table.grid td.plan{opacity:.55; font-style:italic}
td.m{font-weight:700}
td.m-Я{color:var(--ok)} td.m-НН{color:var(--miss)} td.m-В{color:var(--off)} td.m-lv{color:var(--off); font-weight:700}
.late-mark{color:var(--late); font-weight:700}

/* --- итог --- */
.totals{padding:14px}
.tot{display:grid; grid-template-columns:1fr auto; gap:8px 12px; font-size:13.5px; margin:0; padding:9px 0; border-bottom:1px solid var(--hair)}
.tot dt{color:var(--ink-2)} .tot dd{margin:0; font-weight:700}
.bigbtn{width:100%; margin-top:16px; padding:14px; border:0; border-radius:11px;
  background:var(--action); color:var(--action-ink); font-size:15px; font-weight:700}
.bigbtn:hover{filter:brightness(1.08)}
.bigbtn:disabled{opacity:.6}
.bigbtn.sec{margin-top:8px; background:var(--sunken); color:var(--ink)}
.bigbtn.danger{background:var(--miss-bg); color:var(--miss)}
.bigbtn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.hint{font-size:12px; color:var(--muted); margin:9px 12px 0; text-align:center}
.jhead{margin:26px 0 8px; font-size:13px; font-weight:700; display:flex; flex-direction:column; gap:2px}
.jhead small{font-weight:400; font-size:11.5px; color:var(--muted)}
.journal{list-style:none; margin:0; padding:0}
.journal li{display:grid; grid-template-columns:auto 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--hair); font-size:12.5px}
.journal time{color:var(--muted); font-weight:600; font-size:11.5px; line-height:1.35}
.journal b{font-weight:600} .journal span{color:var(--ink-2)}
.journal .flag{display:inline-block; font-size:10.5px; font-weight:700; color:var(--late);
  border:1px solid var(--late); border-radius:4px; padding:0 5px; margin-left:4px; text-transform:uppercase; letter-spacing:.04em}

/* --- карточка работника и формы --- */
/* --kb — высота клавиатуры телефона (app.js): окна снизу встают над ней, а не под неё */
.veil{position:fixed; inset:0; padding-bottom:var(--kb,0px); background:rgba(15,16,17,.45); display:flex; align-items:flex-end; justify-content:center; z-index:40}
.sheet{background:var(--surface); width:min(460px,100%); border-radius:16px 16px 0 0; box-shadow:var(--shadow);
  height:92vh; height:calc(92dvh - var(--kb,0px)); display:flex; flex-direction:column; padding:0; margin:0}
.fsheet{height:auto; max-height:92vh; max-height:calc(92dvh - var(--kb,0px))}
.sheet:not(.fsheet) .sh-body{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.sh-head{display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px}
.sh-head h3{margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em}
.sheet .who{font-size:12.5px; color:var(--muted); margin-top:2px}
.sh-x{border:0; background:var(--sunken); color:var(--ink-2); width:32px; height:32px; border-radius:8px;
  font-size:14px; line-height:1; margin-left:auto; flex:none}
.sh-tabs{display:flex; gap:2px; margin:0 16px; background:var(--sunken); padding:3px; border-radius:9px}
.sh-tab{flex:1; border:0; background:none; border-radius:7px; padding:7px 4px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.sh-tab[aria-selected="true"]{background:var(--surface); color:var(--ink)}
.sh-body{overflow-y:auto; padding:14px 16px 4px; flex:1; min-height:0}
.fsheet .sh-body{display:grid; gap:12px; padding-top:2px}
.fgo{margin:12px 16px calc(16px + env(safe-area-inset-bottom,0px)); width:auto}
.ferr{margin:10px 16px 0}
/* minmax(0,…) — колонка не шире половины, что бы в ней ни лежало; end — поля на одной линии при подписи в две строки */
.frow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end}
.fnote{font-size:12.5px; color:var(--muted); margin:0}
.cdate{font-size:12.5px; font-weight:700; color:var(--ink-2); margin:0 2px 9px}
.cdate.back{color:var(--late)}
.restwarn{font-size:12.5px; font-weight:600; color:var(--late); background:var(--late-bg); border-radius:9px; padding:9px 12px; margin-bottom:9px}
.opt{display:flex; align-items:center; gap:11px; width:100%; padding:12px 13px; margin-bottom:7px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:10px; text-align:left; color:var(--ink); font-size:14px; font-weight:600}
.opt:hover{border-color:var(--action)}
.opt.on{border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action)}
.opt i{width:9px; height:9px; border-radius:50%; flex:none}
.opt small{margin-left:auto; font-weight:500; color:var(--muted); font-size:12px}
/* приход и уход — два системных поля времени рядом */
.times,.mtimes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.times{margin-bottom:9px}
.hrs{font-size:12.5px; color:var(--ink-2); margin:0 2px 9px}
.hrs b{color:var(--ink)}
.notefield{margin:2px 0 9px}

.issueform{display:grid; gap:8px}
.issueform select,.issueform input{font-size:16px; background:var(--surface-2);
  border:1px solid var(--hair); border-radius:9px; padding:10px 11px; width:100%; min-width:0}
.issueform select:focus,.issueform input:focus{outline:2px solid var(--action); outline-offset:-1px}
.qty{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:9px; padding:7px 11px}
.qty button{width:36px; height:36px; border-radius:8px; border:1px solid var(--edge);
  background:var(--surface); color:var(--ink); font-size:17px; font-weight:700; line-height:1}
.qty b{font-size:15px}
.kit{display:grid; gap:6px}
.kitrow{display:grid; grid-template-columns:1fr auto; gap:9px; align-items:center; width:100%; padding:9px 11px; text-align:left;
  background:var(--surface-2); border:1px solid var(--hair); border-radius:9px; color:var(--ink); font-size:13px}
.kitrow[aria-pressed="true"]{border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action)}
.kitrow .nm{display:block; font-weight:600}
.kitrow .sub{display:block; font-size:11.5px; color:var(--muted); margin-top:1px}
.issuectl{display:grid; grid-template-columns:auto 1fr; gap:8px; margin-bottom:6px}
.issuectl[hidden]{display:none}
.issuectl #i-take{grid-column:1 / -1}
.issuectl .qty{gap:14px}
.issuebtn{border:0; border-radius:9px; padding:12px; font-size:14px; font-weight:700;
  background:var(--action); color:var(--action-ink)}
.issuebtn.sec{background:var(--sunken); color:var(--ink)}
.ilist{display:grid}
.irow{display:grid; grid-template-columns:1fr auto auto; gap:9px; align-items:center; font-size:13px;
  padding:9px 0; border-top:1px solid var(--hair)}
.irow .nm{font-weight:600}
.irow .sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.irow .sum{font-weight:700; white-space:nowrap}
.irow .ret{border:1px solid var(--edge); background:var(--surface); color:var(--ink-2);
  border-radius:7px; padding:6px 10px; font-size:12px; font-weight:600}
.irow.back .sum,.irow.back .nm{color:var(--muted); text-decoration:line-through}
.owed{margin-top:12px; padding:10px 12px; background:var(--late-bg); border-radius:9px;
  font-size:12.5px; color:var(--late); font-weight:600}
.sech{margin:18px 0 8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.sech:first-child{margin-top:0}
.wrow{display:grid; grid-template-columns:1fr auto; gap:7px 12px; font-size:13.5px; margin:0; padding:10px 0; border-bottom:1px solid var(--hair)}
.wrow dt{color:var(--ink-2)} .wrow dd{margin:0; font-weight:700; text-align:right}
.wrow dd.warnv{color:var(--late)}
.wbtns{display:grid; gap:7px; margin-top:13px}
.wbtn{border:0; border-radius:10px; padding:12px; font-size:14px; font-weight:700;
  background:var(--action); color:var(--action-ink)}
.wbtn.sec{background:var(--sunken); color:var(--ink)}
.wbtn.done{background:var(--ok-bg); color:var(--ok)}

/* --- подтверждение действия --- */
.confirm{position:fixed; inset:0; z-index:60; background:rgba(15,16,17,.5);
  display:flex; align-items:center; justify-content:center; padding:20px}
.cbox{background:var(--surface); border-radius:14px; padding:20px; width:min(380px,100%); box-shadow:var(--shadow)}
.cbox h4{margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.01em}
.cbox p{margin:0 0 16px; font-size:13.5px; color:var(--ink-2); line-height:1.45}
.cbtns{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.cbtns button{border:0; border-radius:9px; padding:12px; font-size:14px; font-weight:700}
.cno{background:var(--sunken); color:var(--ink)}
.cyes{background:var(--action); color:var(--action-ink)}
.cbtns button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* ================= документы ================= */
.docpane{min-width:0; background:var(--paper); border:1px solid var(--edge); border-radius:12px; box-shadow:var(--shadow); padding:22px}
.docbar{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; margin-bottom:14px}
.docsw{display:flex; gap:2px; background:var(--sunken); padding:3px; border-radius:9px; width:max-content; max-width:100%; flex-wrap:wrap}
.dtab{border:0; background:none; padding:6px 13px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink-2)}
.dtab[aria-selected="true"]{background:var(--surface); color:var(--ink)}
.dshare{border:0; background:var(--action); color:var(--action-ink); padding:9px 18px; border-radius:9px; font-size:13.5px; font-weight:700}
.docpane .phead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.docpane h2{margin:0; font-size:15px; font-weight:700}
.docpane .sub{font-size:12.5px; color:var(--muted)}
.docpane .dochead{color:var(--ink-2); margin-top:5px}
.t13wrap{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
table.t13{border-collapse:collapse; font-size:10.5px; width:100%; min-width:940px}
table.t13 th,table.t13 td{border:1px solid var(--ink-2); padding:2px 3px; text-align:center; vertical-align:middle}
table.t13 thead th{background:var(--surface-2); font-weight:600; font-size:9.5px; line-height:1.2}
table.t13 td.l{text-align:left; max-width:190px}
/* у каждого работника две строки, как в форме: сверху код, снизу часы */
table.t13 td.cd{font-weight:700; height:18px}
table.t13 tr.rh td{color:var(--ink-2); height:18px; border-top-style:dotted}
table.t13 tr.rc td.cd{border-bottom-style:dotted}
table.t13 th.we{background:var(--sunken)}
table.t13 tfoot td{font-weight:700; background:var(--surface-2)}
table.ppedoc{min-width:760px}
table.ppedoc td{height:24px; padding:3px 5px}
table.ppedoc td.it{text-align:left}
table.ppedoc td.sgn{min-width:86px}
table.ppedoc td.r{text-align:right; white-space:nowrap}
.notes{margin-top:16px; padding-top:13px; border-top:1px solid var(--hair)}
.notes h3{margin:0 0 7px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.notes ul{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.notes li{font-size:11.5px; color:var(--ink-2)}
.notes li b{color:var(--ink); font-weight:600}
.sig{display:flex; gap:34px; flex-wrap:wrap; margin-top:18px; font-size:11px; color:var(--ink-2)}
.sig div{flex:1; min-width:190px}
.sig u{display:block; border-bottom:1px solid var(--ink-2); height:17px; text-decoration:none; margin-bottom:3px}
.codes{margin-top:14px; font-size:11px; color:var(--muted); display:flex; gap:6px 18px; flex-wrap:wrap}

/* ================= телефон ================= */
@media (max-width:900px){
  .topbar{display:none}
  /* align-content: иначе лишняя высота делится между строками сетки и документы съезжают к середине экрана */
  .stage{grid-template-columns:minmax(0,1fr); gap:0; padding:0; max-width:none; align-content:start}
  .phone{border:0; border-radius:0; box-shadow:none; height:auto; position:static; min-height:0}
  .app-head{position:sticky; top:0; z-index:20; background:var(--surface); padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .docpane{display:none; border:0; border-radius:0; box-shadow:none; padding:14px; overflow-x:hidden}
  body.tab-doc .docpane{display:block}
  .dshare{width:100%; padding:12px}
  body.tab-doc .screen{display:none}
  /* панель вкладок закреплена у нижнего края */
  .shell{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .tabs{position:fixed; left:0; right:0; bottom:0; z-index:30;
    padding-bottom:env(safe-area-inset-bottom,0px); border-top:1px solid var(--edge);
    box-shadow:0 -2px 14px rgba(0,0,0,.07)}
  .person{padding:14px}
  .person .nm{font-size:15.5px}
  /* страница прокручивается целиком — панель массовой отметки липнет над вкладками */
  .phone,.screen{overflow:visible}
  .massbar{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:901px){ .tab.only-mobile{display:none} .person .note{max-width:210px} }

/* ================= движение =================
   Экран, список, вкладка и окно появляются коротким движением; уход окна — класс .out (app.js, hide). */
@keyframes fade{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(8px)}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes pop{from{opacity:0; transform:scale(.92)}}
@keyframes pop-out{to{opacity:0; transform:scale(.96)}}
@keyframes slide-next{from{opacity:0; transform:translateX(22px)}}
@keyframes slide-prev{from{opacity:0; transform:translateX(-22px)}}
@keyframes glow{from{background:var(--late-bg)}}
@keyframes pulse{50%{opacity:.55}}
.login,.screen,.docpane,.doc,.crew,.sh-pane,.massbar,.backnote,.re{animation:rise .22s ease-out}
.crew.slide-next{animation:slide-next .2s ease-out}
.crew.slide-prev{animation:slide-prev .2s ease-out}
.veil,.confirm{animation:fade .18s ease-out}
.veil .sheet{animation:sheet-up .28s cubic-bezier(.2,.8,.2,1)}
.cbox{animation:pop .18s ease-out}
.veil.out,.confirm.out{animation:fade-out .17s ease-in forwards}
.veil.out .sheet{animation:sheet-down .17s ease-in forwards}
.confirm.out .cbox{animation:pop-out .17s ease-in forwards}
.person.flash{animation:glow .7s ease-out}
.person.flash .chip{animation:pop .3s ease-out}
.sync.busy{animation:pulse 1s ease-in-out infinite}
.tab,.stab,.sh-tab,.dtab,.opt,.sync,.kitrow,.fchip{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .08s}
.bigbtn,.issuebtn,.wbtn,.addbtn,.dshare,.mbtns button,.cbtns button,.datenav button,.qty button,.irow .ret{transition:transform .08s,filter .15s}
:is(.bigbtn,.issuebtn,.wbtn,.addbtn,.dshare,.opt,.kitrow,.fchip,.mbtns button,.cbtns button,.datenav button,.qty button,.irow .ret):active:not(:disabled){transform:scale(.96)}
.tab .ic{transition:transform .12s} .tab:active .ic{transform:scale(.85)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important}}

/* ================= печать: на лист идёт только выбранный документ ================= */
@media print{
  @page{size:A4 landscape; margin:9mm}
  :root{--paper:#fff; --surface:#fff; --surface-2:#f4f4f2; --sunken:#e9e8e5;
    --ink:#111; --ink-2:#333; --muted:#666; --edge:#999; --hair:#ccc;
    --ok:#0a7d34; --miss:#c0322f; --late:#a86412; --off:#666; color-scheme:light}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  body{background:#fff}
  .topbar,.phone,.tabs,.veil,.confirm,.docbar,.perbar,.login{display:none !important}
  .shell{padding:0}
  .stage{display:block; padding:0; max-width:none}
  .docpane{display:block !important; border:0; box-shadow:none; padding:0; border-radius:0}
  .t13wrap{overflow:visible}
  table.t13{min-width:0; font-size:9px; width:100%}
  tr{break-inside:avoid}
}