/* payments.css — экраны «Оплата» администратора школы (blox56 #15). Префикс .pay-.
   Телефон первым (375px): один столбец, палец 44px, поля 16px (--fs-input — заслон от зума iOS).
   Цвета — только роль-токены; листы (фон --card с тенью) собраны рецептом --sheet-1;
   чипы состояния — тинты (--ok-tint/--alert-tint), сплошного зелёного и красного здесь нет
   (реестры GREEN_OK/RED_OK в tools/check.js). */

.pay{max-width:640px;margin:0 auto;padding-bottom:var(--sp-7)}
/* hidden обязан побеждать display:flex у полей и форм (lingo-ui §7: «display в CSS бьёт hidden») */
.pay [hidden],.pay-sheet [hidden]{display:none}
/* компактная кнопка (.btn--sm, 38px по style.css) здесь — цель для пальца: администратор работает с
   телефона, «Изменить» / «Прикрепить» / «Сторно» жмут на ходу (lingo-ui §10 G5 = 44px) */
.pay .btn--sm,.pay-sheet .btn--sm{min-height:44px}
/* кнопка-действие над списком («＋ Семья»): без отступа она прилипала к первой карточке */
.pay-top{margin-bottom:var(--sp-3)}

/* ---- A · месяц: чипы ‹ › и хаб --------------------------------------------------------- */
.pay-month{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.pay-month h2{margin:0;min-width:11ch;text-align:center}
.pay-mbtn{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font-size:var(--ic-lg);font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:var(--sheet-1)}
.pay-mbtn:active{transform:scale(.94)}
.pay-hub{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.pay-hubchip{flex:1 1 0;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--anchor-ink);font-weight:700;font-size:var(--fs-sm);padding:0 var(--sp-2);
  cursor:pointer;font-family:inherit;box-shadow:var(--sheet-1)}
.pay-hubchip:active{transform:scale(.96)}
.pay-warn{display:block;width:100%;text-align:left;border:1px solid var(--alert-line);background:var(--alert-tint);
  color:var(--alert-ink);border-radius:var(--r-md);padding:var(--sp-3);font-size:var(--fs-sm);font-weight:700;
  margin-bottom:var(--sp-3);cursor:pointer;font-family:inherit;min-height:44px}
.pay-glist{display:flex;flex-direction:column;gap:var(--sp-2)}
/* строка группы — тап ведёт в группу·месяц; рамка и тень в покое говорят «нажимаемо» (§12) */
.pay-grow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;text-align:left;
  min-height:44px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:var(--sp-3);
  cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:var(--sheet-1)}
.pay-grow:active{transform:scale(.99)}
.pg-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.pg-name{font-weight:800;font-size:var(--fs-lg);color:var(--ink-strong)}
.pg-sub{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
/* чип состояния: тинт по роли, переносится, но не шире половины строки */
.pay-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:28px;
  padding:3px var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;line-height:1.25;
  background:var(--fill-soft);color:var(--muted-strong);max-width:48%;text-align:center}
.pay-chip.primary{background:var(--accent-tint);color:var(--accent-ink)}
.pay-chip.ok{background:var(--ok-tint);color:var(--ok-ink)}
.pay-chip.alert{background:var(--alert-tint);color:var(--alert-ink)}

/* ---- общие блоки, поля, кнопки ------------------------------------------------------------ */
.pay-title h2{overflow-wrap:anywhere}
.pay-block,.pay-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--sheet-1)}
.pay-block h3{margin:0 0 var(--sp-3);font-size:var(--fs-lg);font-weight:800;color:var(--ink-strong)}
.pay-line{font-size:var(--fs-md);color:var(--ink);margin:var(--sp-1) 0;overflow-wrap:anywhere}
.pay-hint{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-1) 0;overflow-wrap:anywhere}
.pay-dates{font-size:var(--fs-sm);color:var(--muted-strong);margin:var(--sp-1) 0 var(--sp-3)}
.pay-alert{color:var(--alert-ink);font-weight:700;font-size:var(--fs-md);margin:var(--sp-2) 0}
.pay-fld{display:flex;flex-direction:column;gap:var(--sp-1);margin:var(--sp-2) 0}
.pay-fld>span{font-size:var(--fs-sm);color:var(--muted);font-weight:700}
.pay-fld input,.pay-fld textarea,.pay-fld select,.pay-msg,.pr-key{width:100%;box-sizing:border-box;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--fs-input);
  font-family:inherit;background:var(--card);color:var(--ink);font-weight:600}
.pay-fld input:focus,.pay-fld textarea:focus,.pay-fld select:focus,.pay-msg:focus,.pr-key:focus{
  outline:none;border-color:var(--accent-deep);box-shadow:var(--ring)}
.pay-fld input[type=file]{padding:8px 12px;font-weight:600}
/* две даты в одной строке на 375px: «17.09.2026» + значок календаря не влезают с боковыми 12px */
.pay-fld input[type=date]{padding:10px 6px;letter-spacing:-.01em}
.pay-msg{min-height:190px;resize:vertical;line-height:var(--lh);white-space:pre-wrap;font-weight:600}
.pay-row2{display:flex;gap:var(--sp-3);align-items:flex-end}
.pay-row2 .pay-fld{flex:1 1 0;min-width:0}
.pay-wide{width:100%;margin-top:var(--sp-2)}
.pay-btns{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.pay-btns>*{flex:1 1 auto}
.pay-form{border-top:1px solid var(--line-soft);margin-top:var(--sp-3);padding-top:var(--sp-2)}
.pay-legend{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-1) 0 var(--sp-2);overflow-wrap:anywhere}
.pay-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent-tint);color:var(--accent-ink);width:fit-content;vertical-align:middle}
.pay-flag{font-size:var(--fs-xs);color:var(--alert-ink);font-weight:700}
.pay-tel{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--accent-ink);font-weight:700;
  text-decoration:none;min-height:44px}
.pay-total{font-size:var(--fs-lg);margin:var(--sp-2) 0 var(--sp-3)}

/* ---- B · кандидаты и счета ---------------------------------------------------------------- */
.pay-cands{display:flex;flex-direction:column;margin:var(--sp-2) 0}
.pay-cand{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer}
.pay-cand input{width:22px;height:22px;flex:0 0 auto;margin:0;accent-color:var(--anchor)}
.pc-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pc-name{font-weight:700;font-size:var(--fs-md)}
.pc-sum{flex:0 0 auto;font-weight:800;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.pc-sum small{font-size:var(--fs-2xs);color:var(--muted);font-weight:700}
.pay-drift{border:1px solid var(--accent-line);background:var(--accent-tint);border-radius:var(--r-md);
  padding:var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-sm);color:var(--ink);font-weight:700}
.pay-drift .btn-ghost{margin-top:var(--sp-2);width:100%}
.pay-brows{display:flex;flex-direction:column;gap:var(--sp-2)}
.pay-brow{display:flex;align-items:stretch;gap:var(--sp-2)}
.pb-main{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr auto;gap:2px var(--sp-3);align-items:center;
  text-align:left;min-height:44px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:var(--sp-2) var(--sp-3);cursor:pointer;font-family:inherit;color:var(--ink)}
.pb-main:active{transform:scale(.99)}
.pb-name{font-weight:700;font-size:var(--fs-md);grid-column:1;overflow-wrap:anywhere}
.pb-sum{font-weight:800;grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.pb-main .pay-chip{grid-column:1/-1;justify-self:start;max-width:100%}
.pb-tel{flex:0 0 44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:var(--r-md);color:var(--accent-deep);background:var(--card);text-decoration:none}
.pay-foot{font-weight:800;margin:var(--sp-3) 0;font-size:var(--fs-md);color:var(--ink-strong)}
.pay-qr{margin-top:var(--sp-3);text-align:center}
/* height:auto — чтобы атрибуты width/height (см. keepImg в payments.js) задавали пропорцию бокса до
   загрузки, а не жёсткую высоту; max-height вместе с max-width ужимает картинку с сохранением пропорции */
.pay-qr img{max-width:100%;max-height:70vh;height:auto;border-radius:var(--r-md);border:1px solid var(--line)}

/* ---- C · шторка счёта ---------------------------------------------------------------------- */
.pay-sheet{max-width:560px}
.pay-sheet .btn-ghost{width:auto;margin:0}            /* .sheet растягивает ghost на всю ширину — здесь они в строках */
.pay-sbody h4{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-md);font-weight:800;color:var(--ink-strong)}
.pay-lrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px;
  padding:var(--sp-1) 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--ink)}
.pay-lrow.void .lr-t{text-decoration:line-through;color:var(--faint)}
.lr-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lr-act{flex:0 0 auto}
.pay-confirm{display:inline-flex;gap:var(--sp-1);align-items:center;flex-wrap:wrap;justify-content:flex-end;
  font-size:var(--fs-xs);color:var(--danger-ink);font-weight:700}
.pay-due{font-size:var(--fs-xl);font-weight:800;margin:var(--sp-4) 0 var(--sp-2);color:var(--ink-strong)}
.pay-due.ok{color:var(--ok-ink)}
.pay-due.over{color:var(--muted)}
.pay-seg{display:flex;flex-wrap:wrap;gap:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-1)}
.pay-seg button{flex:1 1 45%;min-height:40px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--muted);
  font-weight:700;font-size:var(--fs-sm);cursor:pointer;font-family:inherit}
.pay-seg button.on{background:var(--anchor);color:var(--on-dark)}
/* строка другого месяца / долга — кнопка во всю ширину, ведёт в карточку счёта */
.pay-om{display:block;width:100%;text-align:left;min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);padding:var(--sp-2) var(--sp-3);margin:var(--sp-1) 0;cursor:pointer;font-family:inherit;
  font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.pay-om:active{transform:scale(.99)}

/* ---- D · долги · E · цены · F · семьи ----------------------------------------------------- */
.pay-card-h{font-size:var(--fs-md);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;color:var(--ink)}
.pay-prow{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3);align-items:center;
  padding:var(--sp-2) 0;border-bottom:1px solid var(--line-soft)}
.pay-prow:last-child{border-bottom:0}
.pr-main{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink)}
.pr-cur{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.pr-form,.pr-hist,.pr-pin{grid-column:1/-1}
.pr-pin{display:flex;gap:var(--sp-2);align-items:center}
.pr-pin .pr-key{flex:1 1 auto;min-width:0}
.pr-pin .btn-ghost{flex:0 0 auto}
.pr-hist summary{cursor:pointer;font-size:var(--fs-sm);color:var(--accent-ink);font-weight:700;min-height:44px;
  display:flex;align-items:center}
.pr-hrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);
  padding:var(--sp-1) 0;color:var(--ink)}
.pay-kids{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.pay-kid{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;padding:0 0 0 var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.pk-x{width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:var(--ic-md);cursor:pointer;
  border-radius:var(--r-pill);font-family:inherit}
.pk-x:active{color:var(--danger-ink)}

/* ---- широкий экран: две колонки чипов хаба не нужны, просто шире карточки ---------------- */
@media (min-width:760px){
  .pay{max-width:760px}
  .pay-hubchip{flex:0 1 auto}
}