/* Мобильная версия чек-листа. Тёмная и светлая — от theme.js (html[data-theme]). */
:root {
  --bg: #f4f6fa; --bg-elev: #ffffff; --text: #15181d; --dim: #5b6573; --border: #d8dee6;
  /* типы строк — те же, что в большой версии (app.css --t-*) */
  --p1: #f2c230;
  --t-sec: #2a73d6; --t-head: #1e9b6a; --t-i1: #d9a400; --t-i2: #d83a3a; --t-i3: #8b5a2b;
  --ok: #1e9b6a; --ok-bg: #e5f5ec; --bad: #d64545; --bad-bg: #fde8e8; --part: #d99a00; --part-bg: #fff4d6;
  --absent: #6b7785; --absent-bg: #eceff3; --accent: #2a73d6;
}
html[data-theme="dark"] {
  --bg: #1d1f22; --bg-elev: #2a2d32; --text: #e7edf3; --dim: #9aa6b2; --border: #3c424a;
  --p1: #d9ad22;
  --t-sec: #5aa9ff; --t-head: #5fd49a; --t-i1: #f2c94c; --t-i2: #ff6b6b; --t-i3: #c8915a;
  --ok: #4fcf93; --ok-bg: rgba(79,207,147,.14); --bad: #ff6b6b; --bad-bg: rgba(255,107,107,.14);
  --part: #f0bb3a; --part-bg: rgba(240,187,58,.14); --absent: #9aa6b2; --absent-bg: rgba(154,166,178,.14); --accent: #4ea1ff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.35 Roboto, system-ui, -apple-system, sans-serif;
  overscroll-behavior: none; overflow-x: hidden;
}
#app {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 640px; margin: 0 auto;
}
button { font: inherit; color: inherit; }
.loading, .empty { padding: 40px 16px; text-align: center; color: var(--dim); }

/* шапка */
.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--bg);
}
.top h1 { margin: 0; font-size: 22px; flex: 1; }
.top-link { color: var(--accent); text-decoration: none; font-size: 14px; }
.top-check { padding-left: 4px; }
.back { border: 0; background: none; font-size: 34px; line-height: 1; width: 40px; height: 40px; padding: 0 0 4px; }
.top-mid { flex: 1; min-width: 0; }
.top-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save { width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.save.on { background: var(--accent); animation: pulse 0.8s infinite alternate; }
@keyframes pulse { to { opacity: .3; } }

/* список */
.grp { padding: 0 16px 8px; }
.grp-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin: 14px 0 8px; }
.grp-repair { color: var(--part); }
.grp-work { color: var(--ok); }
.train {
  display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--bg-elev);
  border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.train:active { transform: scale(.99); }
.train-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.train-title { font-weight: 700; font-size: 17px; flex: 1; }
.train-dates { font-size: 12px; color: var(--dim); white-space: nowrap; }
.mini { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); margin-top: 4px; }
.mini-label { width: 44px; }
.mini-n { width: 54px; text-align: right; font-variant-numeric: tabular-nums; }

/* прогресс проверки */
/* Две пары кнопок на всю строку: [Перед | После] [Готово | Не готово]. */
.switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 10px; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; min-width: 0; height: 38px; border: 0; background: var(--bg-elev); font-size: 14px; padding: 0 4px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button:disabled { opacity: .4; }
.seg button.on { font-weight: 500; }
.seg button.on.seg-pre { background: var(--p1); color: #2b2100; }
.seg button.on.seg-post { background: var(--ok); color: #fff; }
.seg-one { height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); font-size: 14px; font-weight: 500; padding: 0 4px; white-space: nowrap; }
.seg-one.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.seg-stage { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.seg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: 0 0 10px; }
.seg-stage.pre .seg-dot { background: var(--p1); }
.seg-filter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.seg-dots { display: inline-flex; gap: 3px; }
.seg-dot.f-done { background: var(--ok); }
.seg-dot.f-broken { background: var(--broken); }
.seg-dot.f-partial { background: var(--part); }
.seg-dot.f-absent { background: var(--none); }
.seg-dot.f-none { background: var(--rbar-open); box-shadow: inset 0 0 0 1px var(--dim); }
.seg-dot.f-all { background: conic-gradient(var(--ok) 0 25%, var(--broken) 0 50%, var(--part) 0 75%, var(--none) 0); }
/* окно фильтра */
.flt { display: flex; flex-direction: column; gap: 6px; }
.flt-row { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); text-align: left; }
.flt-row.on { border-color: var(--accent); }
.flt-t { flex: 1; font-size: 16px; }
.flt-ck { color: var(--accent); font-weight: 700; font-size: 18px; visibility: hidden; }
.flt-row.on .flt-ck { visibility: visible; }
.seg-one:disabled { opacity: .45; }

/* полосы уровней: вплотную, высотой под палец */
.bands { display: flex; flex-direction: column; }
.band { height: 40px; overflow: hidden; color: #fff; touch-action: pan-y; user-select: none; position: relative; }
.band-sec { background: var(--t-sec); }
.band-head { background: var(--t-head); }
.band-i1 { background: var(--t-i1); color: #2b2100; }
.band-i2 { background: var(--t-i2); }
.band-i3 { background: var(--t-i3); }
html[data-theme="dark"] .band-sec, html[data-theme="dark"] .band-head, html[data-theme="dark"] .band-i2,
html[data-theme="dark"] .band-i3 { color: #10161c; }
.band-in { height: 100%; display: flex; align-items: center; transition: transform .2s; }
.band-arrow { width: 36px; flex: 0 0 36px; text-align: center; font-size: 24px; line-height: 1; opacity: .75; padding-bottom: 3px; }
.band-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.band-title { font-weight: 600; font-size: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-sub { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.band-empty { filter: saturate(.35); opacity: .55; }
.band-done .band-sub::after { content: " ✓"; }

/* результат с минусом и комментарий */
.marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px 8px; }
.mk {
  height: 46px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-elev);
  font-size: 12px; font-weight: 500; padding: 0 2px; line-height: 1.15;
}
.mk-broken { color: var(--bad); } .mk-broken.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.mk-partial { color: var(--part); } .mk-partial.on { background: var(--part); border-color: var(--part); color: #2b2100; }
.mk-absent { color: var(--absent); } .mk-absent.on { background: var(--absent); border-color: var(--absent); color: #fff; }
.mk-note { color: var(--accent); } .mk-note.has { border-color: var(--accent); }

/* карточка пункта и кнопки — прижаты к низу экрана, полосы — к верху */
.bottom { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; }
.card-wrap { display: flex; padding: 0 12px 8px; touch-action: pan-y; overflow: hidden; min-height: 0; flex: 0 1 auto; }
.card { overflow: hidden; }
.card-mid { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 6px; }
.card-arrow { width: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; opacity: .6; padding-bottom: 3px; }
/* Экран проверки — ровно в экран, без прокрутки: длинный комментарий листается внутри карточки. */
#app:has(> .bottom) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
#app:has(> .bottom) > * { flex-shrink: 0; }
#app:has(> .bottom) > .bottom { flex-shrink: 1; }
.card {
  flex: 1; display: flex; align-items: stretch; padding: 10px 0; border-radius: 14px; background: var(--bg-elev); border: 2px solid var(--border);
  transition: transform .2s, background .2s, border-color .2s;
}
.card.st-done { background: var(--ok-bg); border-color: var(--ok); }
/* «Работает» — как остальные статусы: светлая подложка и рамка цвета статуса. */
.card.st-broken { background: var(--bad-bg); border-color: var(--bad); }
.card.st-partial { background: var(--part-bg); border-color: var(--part); }
.card.st-absent { background: var(--absent-bg); border-color: var(--absent); }
.card.in-next { animation: in-next .22s ease-out; }
.card.in-prev { animation: in-prev .22s ease-out; }
@keyframes in-next { from { transform: translateX(40%); opacity: 0; } }
@keyframes in-prev { from { transform: translateX(-40%); opacity: 0; } }
.card-n { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.card-title { font-size: 17px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.card-n { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; }
.card-type { display: inline-flex; align-items: center; gap: 5px; }
.card-type::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.t-i1 { --c: var(--t-i1); } .t-i2 { --c: var(--t-i2); } .t-i3 { --c: var(--t-i3); }
.card-tag { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }
.card-st { font-size: 13px; color: var(--dim); }
.st-done .card-st { color: var(--ok); } .st-broken .card-st { color: var(--bad); } .st-partial .card-st { color: var(--part); }
.card-note { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border-radius: 10px; padding: 8px 10px; max-width: 100%; }
.card-note.other { color: var(--dim); }
.card-hint { display: none; }

/* галка «Работает» — без заливки никогда; поставлена — только зелёная рамка */
.tick {
  margin: 0 12px 12px; align-self: stretch; height: 56px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--bg-elev);
  color: var(--ok); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.tick-mark { font-size: 26px; font-weight: 700; line-height: 1; }
.tick-label { font-size: 16px; font-weight: 500; }
.tick:active { transform: scale(.98); }
.tick.on { border-color: var(--ok); border-width: 2px; }

/* окно комментария */
dialog.sheet {
  width: 100%; max-width: 640px; margin: auto auto 0; border: 0; border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg-elev); color: var(--text);
}
dialog.sheet::backdrop { background: rgba(0,0,0,.45); }
.sheet-h { font-weight: 700; margin-bottom: 10px; }
.note-in { width: 100%; font: inherit; font-size: 16px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.sheet-act { display: flex; gap: 8px; margin-top: 12px; }
.btn { flex: 1; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); font-weight: 500; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: #222; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%); }

/* вход */

/* Шкала готовности — как в ПК-версии. */
:root { --rbar-open: #d5dbe3; --none: #2a73d6; --broken: #e00000; }
html[data-theme="dark"] { --rbar-open: #474e57; --none: #5aa9ff; --broken: #ff2e2e; }
.rbar { flex: 1; min-width: 0; display: flex; height: 12px; }
.rbar.gap-2 { gap: 2px; }
.rbar.gap-1 { gap: 1px; }
.rbar.gap-0 { border-radius: 2px; overflow: hidden; }
.rbar i { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--rbar-open); }
.rbar.gap-0 i { border-radius: 0; }
.rbar i.done { background: var(--ok); }
.rbar i.absent { background: var(--none); }
.rbar i.partial { background: var(--part); }
.rbar i.broken { background: var(--broken); transform: scaleY(1.35); box-shadow: 0 0 4px var(--broken); }
.rbar i.hot { position: relative; z-index: 1; transform: scaleY(1.6); box-shadow: 0 0 0 1.5px var(--text); }
.mini-past .rbar { opacity: .45; }
.progress { display: flex; flex-direction: column; gap: 6px; padding: 2px 16px 10px; }
.progress .rbar { height: 18px; flex: none; }
.progress-n { align-self: flex-start; border: 0; background: none; padding: 0; font-size: 12px; color: var(--dim); }

/* значки в шапке: поиск, тема */
/* только значок: без рамки и фона, поле касания 36px */
.top-ico { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: none;
  display: flex; align-items: center; justify-content: center; padding: 0; color: var(--text); }
.top-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top-ico:active { transform: scale(.9); opacity: .6; }

/* поиск: окно на весь экран, результаты — карточки */
dialog.sheet-search { height: calc(100dvh - 24px - env(safe-area-inset-top)); max-height: none; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); }
dialog.sheet-search:not([open]) { display: none; }
.srch-head { display: flex; gap: 8px; align-items: center; }
.srch-in { flex: 1; min-width: 0; height: 44px; font: inherit; font-size: 16px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.srch-close { border: 0; background: none; color: var(--accent); font-weight: 500; padding: 0 4px; height: 44px; }
.srch-n { font-size: 12px; color: var(--dim); margin: 8px 2px; }
.srch-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; overscroll-behavior: contain; }
.srch-card { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 14px;
  background: var(--bg); border: 2px solid var(--border); }
.srch-card:active { transform: scale(.99); }
.srch-card.st-done { border-color: var(--ok); }
.srch-card.st-broken { border-color: var(--bad); background: var(--bad-bg); }
.srch-card.st-partial { border-color: var(--part); background: var(--part-bg); }
.srch-card.st-absent { border-color: var(--absent); background: var(--absent-bg); }
.srch-card.cur { box-shadow: 0 0 0 2px var(--accent); }
.srch-path { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.srch-title { font-size: 16px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.srch-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.srch-tag { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }
.srch-note { font-size: 13px; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.srch-card mark { background: rgba(242,194,48,.55); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Шапка проверки: значки прижаты вправо, между ними без зазора; название
   занимает всё, что осталось, и обрезается многоточием, не наезжая на них. */
.top-check { padding-right: 4px; position: relative; }
.top-check .top-mid { margin-right: 4px; }
.top-check .top-ico + .top-ico { margin-left: -8px; }
.top-check .save { position: absolute; right: 6px; top: calc(6px + env(safe-area-inset-top)); width: 6px; height: 6px; }

/* нет права — кнопка бледная и не нажимается */
.mk:disabled, .tick:disabled { opacity: .4; pointer-events: none; }

/* история результатов на карточке: прежние — бледнее, действующий — последним */
.card-st.was { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.top .top-ico + .top-ico { margin-left: -8px; }

/* Шкала в списке: сетка по 40 делений, лишнее — строкой ниже. Масштаб у всех комплексов один. */
.mini { align-items: flex-start; }
.mini-label, .mini-n { line-height: 12px; }
.rbar.rgrid { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 4px 2px; height: auto; flex: 1; }
.rbar.rgrid i { height: 10px; }

/* Шкала в проверке: одна строка, 40 делений на экран, мотается пальцем; стрелки — как у карточки. */
.progress .rscroll { display: flex; align-items: center; margin: 0 -10px; }
.rscroll-view { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 8px 0; touch-action: pan-x;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.rscroll-view::-webkit-scrollbar { display: none; }
.progress .rbar.rscroll-strip { height: 18px; flex: none; display: flex; }
.rscroll-arrow { width: 26px; flex: 0 0 26px; height: 34px; border: 0; background: none; padding: 0 0 3px;
  font-size: 26px; line-height: 1; opacity: .6; color: var(--text); }
.rscroll-arrow.off { visibility: hidden; }

/* Лента записей на карточке: прокрутка, видны последние; выше — затухание */
.card-feed { align-self: stretch; text-align: left; max-height: 30dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  overscroll-behavior: contain; padding: 2px 0; }
.fe-count { min-width: 1.35em; height: 1.35em; padding: 0 .3em; border-radius: .675em; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; flex: 0 0 auto; text-decoration: none; }
.fe-count.f-done { background: var(--ok); } .fe-count.f-broken { background: var(--broken); }
.fe-count.f-partial { background: var(--part); color: #2b2100; } .fe-count.f-absent { background: var(--none); }
.fe-count.f-none { background: var(--rbar-open); color: var(--text); }
.fe { background: var(--bg); border-radius: 10px; padding: 6px 10px; }
.fe-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--dim); }
.fe-who { font-weight: 500; color: var(--text); }
.fe-at { font-variant-numeric: tabular-nums; }
.fe-st { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text); }
.fe-st .seg-dot { width: 8px; height: 8px; flex: 0 0 8px; }
.fe-st.was { opacity: .55; text-decoration: line-through; }
.fe-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.fe-c .fe-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.seg-dot.f-none { background: var(--rbar-open); }
/* на зелёной карточке («Работает») лента — полупрозрачная белая */
.card { cursor: pointer; }

/* Подробности пункта — окно на весь экран */
dialog.sheet-detail { height: calc(100dvh - 24px - env(safe-area-inset-top)); max-height: none; display: flex; flex-direction: column; }
dialog.sheet-detail:not([open]) { display: none; }
.det-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.det-path { font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.det-title { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--dim); }
.det-tag { border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }
.det-feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 0; overscroll-behavior: contain; }

/* На карточке запись — без подложки и рамки, прямо на карточке; в окне подробностей — как было */
.fe.fe-c, .st-done .fe.fe-c { background: none; padding: 0; border-radius: 0; }

/* новая строка: тип — чипы с точкой цвета типа, как полосы */
.add-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.add-type { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.add-type.on { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); font-weight: 600; }
.add-type:disabled { opacity: .4; }
.add-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 10px; }
.add-in { margin-bottom: 8px; }
.note-in[hidden] { display: none; }
.btn:disabled { opacity: .45; }

/* На карточке теперь одна запись — без прокрутки: overflow резал обводку кружка у края */
.card-feed { overflow: visible; max-height: none; }
.fe.fe-c, .st-done .fe.fe-c { padding: 2px; }  /* середина карточки (.card-mid) с прокруткой режет то, что у самого края: обводке кружка — место */
.login { min-height: 100dvh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-qr { display: block; line-height: 0; }
.login-qr svg { width: min(280px, 80vw); height: auto; aspect-ratio: 1; background: #fff; border-radius: 16px; padding: 12px; box-sizing: border-box; }