/* Штаб на телефоне: строки задач, «Сегодня», карточка задачи, виды проекта и календарь.
   Каркас и общие правила — в mobile.css. Макеты — PhoneTasks, PhoneToday, PhoneTaskCard, PhoneProject. */

@media (max-width: 820px) {
  /* ---------- фильтры задачника ---------- */
  /* без nowrap колонка растягивается по самой длинной полосе кнопок и страница едет вбок */
  .tfilters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .tfilters-q { flex: none; width: 100%; height: 44px; }

  /* ---------- строка задачи в две строки: название сверху, чипы снизу ---------- */
  /* кружок вынесен влево, поэтому и вторая, и третья строки чипов начинаются под названием */
  .trow { position: relative; align-items: center; gap: 6px 8px; padding: 10px 14px 10px 48px; }
  .trow > .tcheck { position: absolute; left: 14px; top: 11px; }
  /* название — ссылка; невидимые поля сверху и снизу доводят касание до 44px, не раздувая строку */
  .trow-title { flex: 1 1 100%; line-height: 1.3; padding: 12px 0; margin: -12px 0; }
  .overdue-box .trow { padding: 6px 0 6px 34px; }
  .overdue-box .trow > .tcheck { left: 0; top: 7px; }
  .trow-due { margin-left: auto; min-width: 0; font-size: 12px; }
  .who-name { display: none; }
  .tcheck { position: relative; }
  .tcheck::after { content: ""; position: absolute; inset: -11px; }  /* палец попадает с запасом */
  .trow--day { border-radius: 16px; padding: 10px 12px; }
  /* кружок прибит слева, поэтому левый отступ плитки оставляем под него */
  .trow--tile { padding: 8px 10px 8px 42px; }
  .trow--tile > .tcheck { left: 10px; top: 9px; }
  .tgroup-head { padding: 4px 2px; }
  .tlist { border-radius: 16px; }

  /* быстрое добавление закреплено над нижним меню */
  .quick, .quick--day {
    position: fixed; z-index: 15; left: 12px; right: 12px; bottom: calc(var(--bottom-space) + 10px);
    padding: 6px 6px 6px 10px; flex-wrap: nowrap; background: var(--card); border: 0; border-radius: 26px;
    box-shadow: 0 6px 24px rgba(18, 19, 23, 0.18);
  }
  .quick-input { flex: 1 1 auto; height: 44px; font-size: 16px; text-overflow: ellipsis; }
  .quick .btn { flex: none; height: 44px; border-radius: 22px; }
  .quick-preview { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); padding: 8px 14px; background: var(--card); border-radius: 14px; box-shadow: 0 4px 16px rgba(18, 19, 23, 0.12); }
  .main:has(.quick) { padding-bottom: calc(var(--bottom-space) + 96px); }

  /* ---------- «Сегодня» ---------- */
  .today-head { gap: 12px; }
  .today-id { width: 100%; flex-direction: row-reverse; justify-content: space-between; }
  .ring { width: 52px; height: 52px; }
  .ring-in { width: 42px; height: 42px; font-size: 12px; }
  .week { width: 100%; flex-wrap: nowrap; gap: 4px; }
  .wday { flex: 1; width: auto; min-width: 0; padding: 6px 0; }
  .overdue-box { border-radius: 20px; padding: 12px 14px; }
  .overdue-box .row-between { flex-wrap: nowrap; }

  /* ---------- карточка задачи: одна колонка, поля списком ---------- */
  .tcard { border-radius: 20px; }
  .tcard-head { padding: 12px 14px; gap: 8px; }
  .tcard-main { padding: 16px 14px 20px; gap: 16px; }
  .tcard-side { padding: 0 14px 20px; background: transparent; border-left: 0; }
  .tcard-h1 { font-size: 20px; line-height: 1.3; }
  .tcard-star { width: 44px; height: 44px; border-radius: 22px; }
  .tcheck--big { margin-top: 0; }
  .status-row { margin: 0 -14px; padding: 0 14px; }
  .fields { gap: 0; overflow: hidden; border: 1px solid #EEF0F3; border-radius: 18px; background: var(--card); }
  .field-row { min-height: 48px; padding: 0 14px; border-radius: 0; border-top: 1px solid #F0F1F4; }
  .field-row:first-child { border-top: 0; }
  .field-k { font-size: 14px; color: #5A5D66; flex: none; max-width: 45%; }
  .field-v { min-width: 0; max-width: 60%; min-height: 44px; }
  .field-v--pair { max-width: none; }
  .field-v--pair input { min-width: 0; width: 100%; }
  .fields .btn { margin: 6px 14px 14px; }
  .watchers, .side-box { border: 1px solid #EEF0F3; }
  /* мелкие элементы карточки — до 44px под палец */
  .tcard-close { width: 44px; height: 44px; border-radius: 22px; }
  .tcard .field { height: 44px; }
  .tcard .field--area { height: auto; }
  .watchers select, .day-box, .check-line { min-height: 44px; }
  .day-box { padding: 0 6px; }
  .tcard-edit summary, .side-box--danger summary { min-height: 44px; display: flex; align-items: center; }
  .tcard .comment-input { height: 100%; }
  /* закреплённая панель «Комментарий… | ✓ Готово» над нижним меню */
  .main:has(.tcard) { padding-bottom: calc(var(--bottom-space) + 90px); }
  .tcard .comment, .side-actions > form:first-child {
    position: fixed; z-index: 15; bottom: calc(var(--bottom-space) + 10px); margin: 0;
  }
  .tcard .comment { left: 12px; right: 140px; height: 48px; background: var(--card); border: 0; box-shadow: 0 6px 24px rgba(18, 19, 23, 0.18); }
  .tcard .comment .btn { display: none; height: 38px; min-height: 0; }
  /* пока пишут — поле на всю ширину; «Отправить» видна, когда есть текст (а не по фокусу:
     iOS снимает фокус с поля до нажатия кнопки, и она бы исчезала из-под пальца) */
  .tcard .comment:focus-within, .tcard .comment:has(.comment-input:not(:placeholder-shown)) { right: 12px; z-index: 16; }
  .tcard .comment:has(.comment-input:not(:placeholder-shown)) .btn { display: inline-flex; }
  .side-actions > form:first-child { right: 12px; width: 120px; }
  .side-actions > form:first-child .btn { height: 48px; border-radius: 24px; box-shadow: 0 6px 24px rgba(18, 19, 23, 0.25); }

  /* ---------- виды проекта ---------- */
  .vbar { flex-direction: column; align-items: stretch; }
  .seg { width: 100%; }
  .seg-item { flex: 1; justify-content: center; padding: 0 6px; }
  /* доска: колонки по 280px, листаются вбок и «примагничиваются» */
  .board-wrap { margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .board { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
  .bcol { flex: 0 0 280px; min-height: 0; padding: 10px; border-radius: 20px; scroll-snap-align: start; }
  .bcard { border-radius: 14px; cursor: pointer; }
  .vhint { text-align: center; }
  /* неделя: полоса из семи дней, ниже — задачи выбранного дня */
  .wstrip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .wcell { min-height: 64px; padding: 6px 4px; border-radius: 12px; gap: 4px; align-items: center; }
  .wcell-top { flex-direction: column; align-items: center; gap: 2px; }
  .wcell-label { display: none; }
  .wcell-dots { justify-content: center; }
  .wdot { width: 6px; height: 6px; border-radius: 2px; }
  .wbox { border-radius: 20px; }
  .wbox-head { padding: 12px 14px; }
  .pnav { gap: 6px; }
  .pnav-title { flex: 1 1 100%; }
  /* Гант: узкая колонка названий, дни листаются вбок внутри своего блока */
  .gantt-wrap { border-radius: 20px; }
  .gantt { min-width: 0; width: max-content; }
  .grow { grid-template-columns: 150px repeat(14, 44px); }
  .gname { padding: 0 10px; }
  .gname a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---------- календарь: на телефоне неделя — полоса дней и список ---------- */
  /* шапка календаря: слои и переключатель — каждый на всю ширину, иначе ряд растягивает страницу */
  .row-between > .row { width: 100%; min-width: 0; }
  .row > .layers { flex: 1 1 100%; min-width: 0; }
  .cal-phone.only-phone { display: flex; flex-direction: column; gap: 10px; }
  .cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cal-sday {
    min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: var(--card); border-radius: 12px; font-size: 11px; color: var(--muted);
  }
  .cal-sday b { font-size: 16px; color: var(--ink); }
  .cal-sday i { min-height: 13px; font-style: normal; font-size: 11px; color: var(--link); }
  .cal-sday.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
  .cal-sday.is-selected { background: var(--ink); color: #B9BCC6; }
  .cal-sday.is-selected b, .cal-sday.is-selected i { color: var(--accent); }
  .cal-row { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 14px; border-top: 1px solid #EEF0F3; }
  .tlist .cal-row:first-child { border-top: 0; }
  .cal-row.is-done { opacity: 0.55; text-decoration: line-through; }
  .cal-row-time { flex: none; width: 64px; font-size: 13px; color: var(--muted); }
  .cal-row-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
  .cal-row-title small { font-size: 12px; font-weight: 400; color: var(--muted-2); }
  .cal-wrap { border-radius: 20px; }
  .nodue-item { min-height: 44px; }
}