/* ============================================================
   css/mobile.css — телефон и узкие экраны; «меньше движения» по настройке системы.
   С 26.10.2026 стили разнесены по файлам без правок.
   ============================================================ */
  /* ===== ТЕЛЕФОН =====
     Всё ниже — только для узких экранов; ноутбук и монитор не трогает. */
  @media (max-width:640px){
    /* шапка не липнет: на телефоне в ней три ряда, и прилипшая она
       съедала пятую часть экрана при любой прокрутке */
    .header{ position:static; padding:10px 14px; gap:8px; }
    /* чек-лист: название пункта над ответами, а не сбоку — сбоку оно
       сжималось до «Управлени», и кнопки налезали на текст */
    .ev-row{ flex-direction:column; align-items:stretch; gap:8px; }
    .ev-opts{ justify-content:flex-start; }
    /* плашка итога внизу — узкой полосой, чтобы не закрывала чек-лист:
       сверху балл и «Сохранить», под ними мелко счётчики и КЗ/ДЦ */
    .ev-sticky{ bottom:6px; gap:6px 8px; padding:8px 10px; margin-bottom:10px; }
    .ev-sticky .ev-score{ order:1; flex:1 1 auto; }
    .ev-sticky .btn-submit{ order:2; padding:10px 16px !important; font-size:14px; }
    .ev-sticky .ev-counts{ order:3; flex:0 1 auto; gap:5px; }
    .ev-num{ font-size:24px; }
    .ev-sticky .ev-lbl{ display:none; }
    .ev-chip{ padding:3px 8px; font-size:11px; }
    .ev-sticky .ev-kz{ padding:3px 8px; font-size:13px; }
    /* прокрутка к полю (ошибка заполнения, «от кого жалоба») не прячет
       его под плашку итога */
    html{ scroll-padding-bottom:130px; }
    /* самые узкие телефоны (320): балл и «Сохранить» всё ещё в одну строку */
    @media (max-width:360px){
      .ev-num{ font-size:21px; }
      .ev-sticky .btn-submit{ padding:9px 11px !important; font-size:13px; }
    }
    /* закреплённые столбцы (кнопки журнала, группа и ФИО в отчётах)
       занимали всю ширину телефона — данных за ними было не видно */
    .col-actions{ position:static; box-shadow:none; }
    .table-pinned th:nth-child(1), .table-pinned td:nth-child(1),
    .table-pinned th:nth-child(2), .table-pinned td:nth-child(2){
      position:static; box-shadow:none; width:auto; min-width:0; }
    .table-pinned td:nth-child(2){ min-width:140px; }
    /* iPhone увеличивает страницу, если у поля шрифт мельче 16px */
    input:not([type=checkbox]):not([type=radio]), select, textarea{ font-size:16px !important; }
    /* с 16px дата в 140px не влезала («09/01/202…»); строка и так переносится */
    .date-range input[type=date]{ max-width:none; }
    /* Журнал, план прослушки и заявки — карточками: 12 столбцов на телефон не влезают, а «Правка»
       и самолётик жили в самом конце строки, до них листали вбок */
    .m-cards thead{ display:none; }
    .m-cards table, .m-cards tbody{ display:block; }
    .m-cards tr{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:12px;
      margin-bottom:10px; border:1px solid var(--border); border-radius:12px; }
    .m-cards td{ display:block; padding:0; border:0; min-width:0; max-width:none !important;
      white-space:normal !important; overflow-wrap:anywhere; }
    .m-cards td[data-l]::before{ content:attr(data-l); display:block; margin-bottom:1px; font-size:10.5px;
      font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); }
    .m-cards td.m-op{ order:-2; font-weight:600; color:var(--ink); }
    .m-cards td.m-q{ order:-1; }
    .m-cards td.m-wide{ grid-column:1/-1; }
    .m-cards td.col-actions, .m-cards td.m-act{ display:flex; flex-wrap:wrap; gap:6px; padding-top:8px;
      border-top:1px dashed var(--border); background:none; }
    .m-cards tr:hover td{ background:none; }
    .m-cards tr.mark-row{ background:var(--mid-bg); border-color:var(--mid); }
    .m-cards tr.mark-row td{ background:none; }
    /* на телефоне подсказка — во всю ширину блока плиток, под ними:
       у плитки в правом ряду она иначе уходила бы за край экрана */
    .stats-grid:has(> .stat-card[data-tip]){ position:relative; }
    .stat-card[data-tip]{ position:static; }
    .stat-card[data-tip]::after, .stat-card[data-tip]:nth-last-child(-n+2)::after{
      left:0; right:0; width:auto; top:calc(100% + 6px); }
    .review-modal{ padding:8px; }
    .review-modal .modal-content{ padding:20px 16px; max-height:94vh; }
  }
  @media (prefers-reduced-motion:reduce){
    *, .login-container, .review-modal.active .modal-content{ animation:none !important; transition:none !important; }
  }