/* Подсчёт на телефоне филиала. Главное на карточке — полное название и поля
   ввода; всё служебное мельче и спокойнее. Горизонтальной прокрутки нет. */
body.device{background:var(--bg);min-height:100dvh}
.dev-top{position:sticky;top:0;z-index:20;background:rgba(252,251,249,.96);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);padding:calc(8px + env(safe-area-inset-top)) 16px 10px}
.dev-top .who{display:flex;align-items:center;gap:10px;min-height:40px}
.dev-top .branch{font-weight:750;font-size:18px;line-height:1.2}
.dev-top .name{font-size:14px;color:var(--muted)}
.dev-top .mascot{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none}
.dev-top .mascot img{width:100%;height:100%;object-fit:cover;display:block}
.progress{display:flex;align-items:center;gap:10px;margin-top:8px}
.progress .bar{flex:1;height:8px;border-radius:99px;background:#ECE9E0;overflow:hidden}
.progress .bar>i{display:block;height:100%;background:var(--ink);border-radius:99px;width:0;transition:width .2s}
.progress .count{font-size:14px;font-weight:650;white-space:nowrap;border:0;background:transparent;min-height:36px;cursor:pointer;padding:0 2px}
.progress .count.done{color:var(--ok)}

.tools{padding:10px 16px 6px;display:flex;flex-direction:column;gap:8px}
.search{position:relative}
.search .ti{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--muted);pointer-events:none}
.search input{padding-left:40px;padding-right:44px}
.search .clear{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:40px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;
  font-size:15px;font-weight:550;cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.banner{margin:10px 16px 0}
.list{padding:6px 16px 140px;display:flex;flex-direction:column;gap:10px}
.cat{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:14px 2px 0}

.lc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 14px 12px;scroll-margin:120px 0 180px}
.lc.filled{border-color:#DCD8CC}
.lc.attention{border-color:rgba(122,80,0,.45);box-shadow:0 0 0 2px var(--warn-soft)}
.lc.returned{border-color:var(--ink);box-shadow:0 0 0 2px var(--acc)}
/* Название — на всю ширину: статус рядом с ним сжимал строку до переносов посреди слова. */
.lc-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lc-name{font-size:17px;font-weight:650;line-height:1.3;overflow-wrap:break-word;word-break:normal}
.lc-status{display:flex;gap:6px;flex-wrap:wrap}
.lc-hint{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.4}
.lc-body{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.lc-row{display:flex;flex-direction:column;gap:6px}
.lc-row .label{font-size:14px}
.lc-extra{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.lc-extra:empty{display:none}

.stepper{display:flex;align-items:stretch;gap:8px}
.stepper button{width:56px;min-height:56px;border-radius:14px;border:1px solid var(--line-strong);background:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--ink)}
.stepper button:active{background:var(--rail)}
.stepper .val{flex:1;min-width:0;position:relative}
.stepper input{width:100%;min-height:56px;border:1.5px solid var(--line-strong);border-radius:14px;text-align:center;
  font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;background:#fff;outline:none;padding:6px 82px 6px 8px}
.stepper input::placeholder{color:#8C897E;font-weight:500}
.stepper input:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--acc)}
.stepper input[aria-invalid="true"]{border-color:var(--bad)}
.stepper .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--muted);
  pointer-events:none;max-width:74px;text-align:right;line-height:1.1;overflow-wrap:normal;word-break:keep-all}
.field-error{font-size:14px;color:var(--bad);font-weight:600}

/* варианты остатка: строго слева направо от большего к меньшему. На очень
   узкой ширине — столбцом сверху вниз, порядок тот же. */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seg button{min-height:64px;border-radius:12px;border:1px solid var(--line-strong);background:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;font-size:13px;
  font-weight:600;line-height:1.15;text-align:center;color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.seg .fill{width:18px;height:24px;border:2px solid currentColor;border-radius:4px;position:relative;overflow:hidden;flex:none}
.seg .fill>b{position:absolute;left:0;right:0;bottom:0;background:currentColor;opacity:.85}
.seg .fill.f75>b{height:75%} .seg .fill.f50>b{height:50%} .seg .fill.f25>b{height:25%} .seg .fill.f0>b{height:0}
@container (max-width:300px){ .seg{grid-template-columns:1fr} .seg button{flex-direction:row;min-height:48px;justify-content:flex-start;padding:6px 12px;gap:10px} }
.lc-body{container-type:inline-size}
.more-open{align-self:flex-start}
.part-head{display:flex;align-items:center;justify-content:space-between;gap:8px}

.bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.bottom .save{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);min-height:20px}
.bottom .save .ti{font-size:18px}
.bottom .save.ok{color:var(--ok)}
.bottom .save.local{color:var(--warn)}
.bottom .save.bad{color:var(--bad)}
body.typing .bottom{display:none}
@media (min-width:720px){ .list,.tools{max-width:720px;margin:0 auto;width:100%} .bottom{align-items:center} .bottom>*{width:100%;max-width:688px} }

.screen{min-height:calc(100dvh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;text-align:center;gap:12px}
.screen .big-ic{font-size:56px;color:var(--ink)}
.screen .big-ic.ok{color:var(--ok)}
.screen h1{font-size:24px}
.screen p{color:var(--muted);max-width:420px}
.start-card{width:100%;max-width:440px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 16px;
  display:flex;flex-direction:column;gap:14px}
.start-card .branch-big{font-size:28px;font-weight:800;letter-spacing:-.4px}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:15px;border-top:1px solid var(--line);padding-top:10px}
.kv span:first-child{color:var(--muted)}
/* В потоке над шапкой, а не поверх неё: филиал и прогресс остаются видны. */
.update-banner{position:relative;margin:calc(8px + env(safe-area-inset-top)) 16px 0;display:flex;gap:8px;
  align-items:center;background:var(--ink);color:#fff;border-radius:12px;padding:8px 8px 8px 14px;font-size:14px}
.update-banner .btn{min-height:36px;padding:4px 12px;font-size:14px}