/* Оформление взято из maket/proba.html — образец вёрстки, менять здесь
   можно, но сверяясь с тем, как это выглядит в макете. */
:root{
  --steel:#E7EBEE; --surface:#FFFFFF;
  --ink:#0F1720; --ink-soft:#5C6B78; --line:#C9D2D9;
  --ok:#0B6B37; --ok-bg:#E8F3EC;
  --wait:#8A4B00; --wait-bg:#FBF1E0;
  --stop:#A81E28; --stop-bg:#FBEAEB;
  --cold:#245E7A; --note:#4A5B68;
  --tap:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--steel);color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.35;padding-bottom:40px}
.num{font-variant-numeric:tabular-nums}

/* ---------- экран выбора смены ---------- */
#gate{position:fixed;inset:0;z-index:50;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px}
#gate h1{font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:20px;font-weight:600;color:#8FA6B4;margin:0 0 6px}
#gate p{margin:0 0 18px;color:#6E8592;font-size:15px}
.who{display:block;width:100%;min-height:var(--tap);background:none;border:2px solid #2E4250;color:#F2F6F8;
  font-family:"Barlow Condensed",system-ui,sans-serif;font-size:26px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;padding:14px 18px;text-align:left;cursor:pointer}
.who:active{background:#1B2833}

/* ---------- экран «нет открытой смены» ---------- */
#noshift{position:fixed;inset:0;z-index:50;background:var(--steel);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;text-align:center}
#noshift b{font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:19px;color:var(--ink)}
#noshift p{margin:0;color:var(--ink-soft);font-size:15px;max-width:320px}
#noshift a{display:inline-block;margin-top:8px;min-height:var(--tap);padding:14px 22px;
  background:var(--cold);color:#fff;text-decoration:none;font-family:"Barlow Condensed",system-ui,sans-serif;
  font-size:17px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

/* ---------- шапка ----------
   Вдвое ниже прежней: подпись «осталось без пробы» убрана (число и так
   понятно рядом с «/ всего» и полоской), остальное — то же самое, только
   плотнее и мельче. */
header{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:5px 16px 3px}
.meta{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:#7F97A5;gap:8px}
.meta button{background:none;border:none;color:#9FB6C4;font:inherit;text-decoration:underline;padding:2px 0;cursor:pointer}
.gauge{display:flex;align-items:baseline;gap:8px;padding:1px 0 3px}
.gauge .big{font-family:"Barlow Condensed",system-ui,sans-serif;font-size:26px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums}
.gauge .of{font-size:12px;color:#7F97A5}
.gauge .brak{font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:11px;color:#E88C93;margin-left:auto}
.bar{height:4px;background:#26343F;display:flex;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);transition:width .3s ease}
.bar i.b{background:var(--stop)}

/* ---------- «нет связи» ---------- */
#offline{background:var(--wait);color:#fff;text-align:center;padding:8px 12px;
  font-family:"Barlow Semi Condensed",system-ui,sans-serif;font-size:14px;font-weight:600}
#offline.hidden{display:none}

/* ---------- поиск и фильтры ---------- */
.tools{position:sticky;top:0;z-index:19;background:var(--surface);border-bottom:1px solid var(--line)}
.searchrow{display:flex;align-items:center;padding:10px 12px;gap:8px}
#q{flex:1;min-height:48px;font-size:17px;font-family:inherit;border:2px solid var(--line);
  background:#F7F9FA;color:var(--ink);padding:10px 12px;outline:none}
#q:focus{border-color:var(--cold);background:#fff}
#clear{min-width:48px;min-height:48px;border:none;background:none;color:var(--ink-soft);
  font-size:26px;line-height:1;cursor:pointer;display:none}
#clear.on{display:block}
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:38px;padding:8px 14px;cursor:pointer;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-soft);font-family:"Barlow Semi Condensed",system-ui,sans-serif;
  font-size:15px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.only[aria-pressed="true"]{background:var(--wait);border-color:var(--wait)}
.chip.floor[aria-pressed="true"]{background:var(--cold);border-color:var(--cold)}
#floorChips.hidden{display:none}

/* ---------- список ---------- */
main{padding:0 12px}
.shop{display:flex;justify-content:space-between;align-items:baseline;padding:20px 4px 8px}
.shop b{font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:15px;color:var(--cold)}
.shop span{font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.row{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);
  margin-bottom:4px;padding:6px 6px 6px 11px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:54px}
.row.done{border-left-color:var(--ok);background:var(--ok-bg)}
.row.brak{border-left-color:var(--stop);background:var(--stop-bg)}
.row.pending{border-left-color:var(--wait);background:var(--wait-bg)}
.main{flex:1;min-width:0;padding:2px 0}
.row .name{font-size:16px;font-weight:500;line-height:1.2}
.row.done .name,.row.brak .name{font-weight:400}

/* подписи — компактной строкой под названием */
.signs{margin-top:3px;font-family:"Barlow Semi Condensed",system-ui,sans-serif;
  font-size:13px;letter-spacing:.02em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.signs i{font-style:normal;color:var(--ok);font-weight:500}
.signs i.v-brak{color:var(--stop);font-weight:600}
.signs i.v-note{color:var(--note)}
.signs .sep{opacity:.45;padding:0 3px}
@keyframes pop{0%{opacity:0;transform:translateY(-3px)}100%{opacity:1;transform:none}}
.signs i.fresh{animation:pop .2s ease-out}

.comments{margin:4px 0 0;padding:0;list-style:none}
.comments li{font-size:14px;line-height:1.25;color:#33424E;padding:3px 0 3px 8px;border-left:2px solid var(--line)}
.comments li b{font-family:"Barlow Semi Condensed",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:var(--ink-soft);font-weight:500}

/* кнопки в один ряд с названием */
.btn-ok{min-height:46px;min-width:58px;border:none;cursor:pointer;background:var(--ok);color:#fff;
  font-size:24px;line-height:1;padding:0 6px}
.btn-ok:active{background:#084F28}
.btn-ok.second{background:#fff;color:var(--ok);border:2px solid var(--ok);font-size:20px}
.btn-brak{min-height:46px;min-width:44px;border:1.5px solid var(--line);cursor:pointer;background:#fff;
  color:var(--stop);font-size:19px;line-height:1;padding:0 6px}
.btn-brak:active{background:var(--stop-bg)}
.btn-cm{min-height:46px;min-width:44px;border:1.5px solid var(--line);cursor:pointer;background:#fff;
  color:var(--cold);font-size:18px;line-height:1;padding:0 6px}
.btn-cm:active{background:#E9F0F4}
.btn-cm.has{border-color:var(--cold);background:#EDF3F6}
.btn-cm.pending{border-color:var(--wait);background:var(--wait-bg);color:var(--wait)}
.undo{min-height:46px;min-width:44px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);font-size:19px;cursor:pointer;padding:0 6px}
.btn-retry{flex:1;min-height:46px;min-width:120px;border:1.5px solid var(--wait);cursor:pointer;
  background:var(--wait);color:#fff;font-family:"Barlow Semi Condensed",system-ui,sans-serif;
  font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:0 10px}
.btn-retry:active{background:#6E3D00}

/* редактор комментария */
.editor{width:100%;margin-top:8px;border-top:1px dashed var(--line);padding-top:10px}
.editor textarea{width:100%;min-height:76px;font-family:inherit;font-size:17px;padding:10px;
  border:2px solid var(--cold);background:#fff;color:var(--ink);outline:none;resize:vertical}
.editor .er{display:flex;gap:6px;margin-top:8px}
.editor .save{flex:1;min-height:50px;border:none;background:var(--cold);color:#fff;cursor:pointer;
  font-family:"Barlow Condensed",system-ui,sans-serif;font-size:18px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em}
.editor .cancel{min-width:100px;min-height:50px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);cursor:pointer;font-family:"Barlow Condensed",system-ui,sans-serif;
  font-size:16px;text-transform:uppercase;letter-spacing:.05em}

.empty{padding:40px 8px;color:var(--ink-soft);text-align:center}
.empty b{display:block;font-family:"Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.1em;font-size:17px;color:var(--ink);margin-bottom:6px}
.note-box{margin:24px 0 0;padding:14px;background:#DDE4E9;border-left:4px solid var(--cold);
  font-size:14px;color:#39505E}
.note-box b{display:block;margin-bottom:4px;font-family:"Barlow Condensed",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--cold)}

:focus-visible{outline:3px solid var(--cold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}