/* ==========================================================================
   MOBILE ADAPTATIONS — все 6 микро-сервисов
   Брейкпоинты:
     ≤ 960px  — планшет (tablet)
     ≤ 680px  — большой телефон (mobile-lg)
     ≤ 480px  — стандартный телефон (mobile)
     ≤ 360px  — маленький телефон (mobile-sm)
   ========================================================================== */

/* ── 0. БАЗОВЫЕ ПРАВИЛА ── */
html {
  -webkit-text-size-adjust: 100%;   /* запрет авто-масштаба текста в iOS */
  overflow-x: hidden;
  width: 100%;
}
body {
  -webkit-tap-highlight-color: transparent; /* убираем синюю вспышку при тапе */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  word-break: break-word;
}

/* touch-friendly минимальный размер интерактивных элементов */
button, .cbtn, .pbtn, .hbtn, .tadd, .mclose,
.tog, .ep, .cp, .hcheck, .ec-act, .ta-btn,
.nav-dock-item, .pip-btn, .pip-play {
  min-width: 44px;
  min-height: 44px;
}
/* исключение — маленькие бейджи, которым большой размер не нужен */
.tpom, .tprio, .tpl, .ftab, .mtab, kbd { min-width: unset; min-height: unset; }


/* ==========================================================================
   1. ОБЩИЕ КОМПОНЕНТЫ
   ========================================================================== */

/* ── HEADER ── */
@media (max-width: 960px) {
  header {
    border-radius: 0;         /* на узких экранах шапка во всю ширину */
    padding: 10px 16px;
    margin-bottom: 12px;
  }
  .hdr-quote { display: none; }
}

@media (max-width: 480px) {
  .logo-tagline { display: none; }
  .logo-name    { font-size: 12px; }
  .hbtn span    { display: none; }  /* показываем только иконку кнопок */
  .hbtn         { padding: 6px 8px; min-width: 36px; min-height: 36px; }
}

/* ── APP GRID (двухколоночный → одноколоночный) ── */
@media (max-width: 680px) {
  .app {
    grid-template-columns: 1fr;
    padding: 8px 12px;
    gap: 0;
  }
  .col-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
  }
  .col-right {
    padding-left: 0;
    padding-top: 16px;
  }
}

/* ── NAV DOCK ── */
@media (max-width: 768px) {
  .app-nav-dock {
    bottom: 0;
    top: auto;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    border-radius: 0;
    padding: 8px 12px;
    justify-content: space-around;
    border-top: 1px solid var(--border);
    border-left: none;
    border-right: none;
    border-bottom: none;
    /* поднять над системной навигацией iOS */
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .nav-dock-item { width: 52px; height: 44px; }
  /* добавляем отступ снизу у body, чтобы контент не прятался за доком */
  body { padding-bottom: 72px; }
}

/* ── STORAGE NOTICE ── */
@media (max-width: 480px) {
  .storage-notice { margin: 8px 12px 0; font-size: 10px; }
}

/* ── MODALS ── */
@media (max-width: 560px) {
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--r) var(--r) 0 0;  /* sheet снизу */
    max-height: 92vh;
    animation: mInMobile .25s ease;
  }
  @keyframes mInMobile {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .mw, .mn, .mxl { max-width: 100%; width: 100%; }
  .mbody { padding: 14px 16px; }
  .mftr  { padding: 0 16px 16px; }
  .mhd   { padding: 12px 16px; }
}

/* ── TOAST ── */
@media (max-width: 480px) {
  .toast { font-size: 11px; padding: 8px 14px; bottom: 80px; }
}

/* ── ACHIEVEMENT POPUP ── */
@media (max-width: 480px) {
  .ach-popup { right: 8px; left: 8px; max-width: unset; }
}

/* ── BRAND STRIP ── */
@media (max-width: 480px) {
  .brand-strip { flex-wrap: wrap; gap: 10px; }
  .bs-btn { width: 100%; text-align: center; }
}

/* ── STATS 4-column → 2-column ── */
@media (max-width: 480px) {
  .stats4 { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .sv     { font-size: 16px; }
}

/* ── FOCUS MODE ── */
@media (max-width: 480px) {
  .focus-num { font-size: 64px; }
  .focus-sub { font-size: 10px; }
}


/* ==========================================================================
   2. POMODORO-ТАЙМЕР
   ========================================================================== */

/* ── Кольцо таймера: уменьшаем на узких экранах ── */
@media (max-width: 480px) {
  .ring-wrap   { width: 140px; height: 140px; }
  .t-num       { font-size: 36px; }
  .pbtn        { width: 48px; height: 48px; font-size: 18px; }
}

@media (max-width: 360px) {
  .ring-wrap   { width: 120px; height: 120px; }
  .t-num       { font-size: 30px; }
}

/* ── Кнопки управления ── */
@media (max-width: 480px) {
  .controls { gap: 8px; }
  .cbtn     { width: 40px; height: 40px; }
}

/* ── Вкладки режимов ── */
@media (max-width: 360px) {
  .mode-tabs { padding: 3px; gap: 2px; }
  .mtab      { font-size: 10px; padding: 6px 2px; }
}

/* ── Задачи: шаблоны ── */
@media (max-width: 480px) {
  .tpl-row    { gap: 4px; }
  .tpl        { font-size: 9px; padding: 3px 7px; }
  .tlist      { max-height: 220px; }
  .task-add   { gap: 5px; }
}

/* ── Goals ── */
@media (max-width: 480px) {
  .goal-bar-wrap { padding: 8px 12px; }
}

/* ── Achievements 3-column → 2-column → 3-column (маленький) ── */
@media (max-width: 480px) {
  .ach-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ach-ico  { font-size: 18px; }
  .ach-nm   { font-size: 9px; }
}

/* ── Settings modal rows ── */
@media (max-width: 480px) {
  .srow        { font-size: 12px; flex-wrap: wrap; gap: 8px; }
  .goal-mode-btns { gap: 4px; }
  .gm-btn      { font-size: 10px; padding: 5px 9px; }
}

/* ── Report / Charts ── */
@media (max-width: 480px) {
  .sum-cards  { grid-template-columns: repeat(2, 1fr); }
  .sc-val     { font-size: 17px; }
  .rtabs      { gap: 2px; }
  .rtab       { font-size: 10px; padding: 5px 4px; }
  .chart-wrap { height: 120px; }
}

/* ── Volume slider ── */
@media (max-width: 480px) {
  .vol-row { gap: 6px; font-size: 10px; }
}

/* ── Info row ── */
@media (max-width: 360px) {
  .info-row { flex-direction: column; align-items: center; gap: 4px; }
}

/* ── PiP Window ── */
@media (max-width: 480px) {
  #pip-time  { font-size: 40px; }
  #pip-ring-wrap { width: 80px; height: 80px; }
}


/* ==========================================================================
   3. COUNTDOWN (ОБРАТНЫЙ ОТСЧЁТ)
   ========================================================================== */

/* ── Обёртка ── */
@media (max-width: 960px) {
  .cd-wrap { padding: 0 12px; }
}

/* ── Featured (главный блок) ── */
@media (max-width: 680px) {
  .featured { padding: 28px 18px; }
  .feat-title { font-size: 18px; }
  .countdown-blocks { gap: 8px; }
  .cb-num {
    font-size: 38px;
    min-width: 68px;
    padding: 8px 12px;
  }
  .cb-sep  { font-size: 32px; padding-bottom: 14px; }
  .cb-lbl  { font-size: 9px; }
}

@media (max-width: 400px) {
  .cb-num  { font-size: 28px; min-width: 52px; padding: 6px 8px; }
  .cb-sep  { font-size: 24px; }
  .feat-title { font-size: 15px; }
  .countdown-blocks { gap: 4px; }
}

/* ── Сетка карточек событий ── */
@media (max-width: 680px) {
  .events-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 480px) {
  .event-card { padding: 14px 14px 14px 18px; }
  .ec-name    { font-size: 13px; }
  .mc-num     { font-size: 18px; }
  /* всегда показываем кнопки действий (не только на hover) */
  .ec-actions { opacity: 1; }
}

/* ── Фильтры ── */
@media (max-width: 480px) {
  .ftabs { gap: 4px; }
  .ftab  { font-size: 10px; padding: 5px 12px; }
}

/* ── Форма добавления события ── */
@media (max-width: 480px) {
  .emoji-row { gap: 4px; }
  .ep        { width: 32px; height: 32px; font-size: 16px; }
  .presets   { gap: 6px; }
  .preset-btn { font-size: 10px; padding: 4px 10px; }
  .color-row { gap: 6px; }
}


/* ==========================================================================
   4. DAY PLANNER (ПЛАНИРОВЩИК)
   ========================================================================== */

/* ── Двухколоночная сетка → одна колонка ── */
@media (max-width: 850px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* ── Навигация по датам ── */
@media (max-width: 480px) {
  .date-nav button { width: 32px; height: 32px; }
  #dateLbl { font-size: 13px; min-width: 120px; }
}

/* ── Таймлайн ── */
@media (max-width: 480px) {
  .tslot-time { width: 38px; font-size: 10px; }
  .tslot-line { left: 38px; }
  .tslot-body { padding-left: 6px; }
  .timeline   { max-height: 400px; }
  .block      { font-size: 11px; padding: 5px 8px; }
}

/* ── Матрица Эйзенхауэра: 2×2 → стек ── */
@media (max-width: 560px) {
  /* матрица уже в grid — оставляем, но уменьшаем контент */
  .quadrant { min-height: 90px; padding: 8px; }
  .qitem    { font-size: 11px; padding: 4px 6px; }
  .q-picker { gap: 6px; }
  .qp-btn   { padding: 8px; font-size: 10px; }
}

/* ── Заголовок панели (шапка карточки) ── */
@media (max-width: 480px) {
  .ph   { padding: 9px 12px 0; }
  .pb   { padding: 8px 12px 12px; }
}


/* ==========================================================================
   5. HABIT TRACKER (ТРЕКЕР ПРИВЫЧЕК)
   ========================================================================== */

/* ── Неделя: 200px имя + 7 дней ── */
@media (max-width: 768px) {
  .week-days, .hrow {
    grid-template-columns: 140px repeat(7, 1fr);
  }
}

@media (max-width: 560px) {
  .week-days, .hrow {
    grid-template-columns: 100px repeat(7, 1fr);
  }
  .hname    { padding: 8px; font-size: 12px; gap: 5px; }
  .hcheck   { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
  .hcell    { padding: 6px 2px; }
  .wd-cell  { font-size: 9px; }
}

@media (max-width: 420px) {
  /* на совсем узких: скрываем имя в колонке, оставляем только дни */
  .week-days, .hrow {
    grid-template-columns: 80px repeat(7, 1fr);
  }
  .hname span { font-size: 11px; }
  .hstreak    { display: none; }
}

/* ── Статистика 4 → 2 ── */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sval       { font-size: 22px; }
}

/* ── Модальная форма привычки ── */
@media (max-width: 480px) {
  .choice-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .choice-btn  { font-size: 11px; padding: 8px 10px; }
  .emoji-pick  { gap: 5px; }
}


/* ==========================================================================
   6. TIME TRACKER
   ========================================================================== */

/* ── Дисплей таймера ── */
@media (max-width: 680px) {
  .tt-timer-display { font-size: 38px; }
}

@media (max-width: 480px) {
  .tt-timer-display { font-size: 32px; margin: 6px 0; }
}

/* ── Карточки записей ── */
@media (max-width: 768px) {
  .entry-card {
    grid-template-columns: 4px 1fr 90px 30px;
    gap: 8px;
  }
  .entry-proj, .entry-time { display: none; }
}

@media (max-width: 480px) {
  .entry-card {
    grid-template-columns: 4px 1fr 70px 28px;
    padding: 10px;
  }
  .entry-desc { font-size: 12px; }
  .entry-dur  { font-size: 13px; }
}

/* ── Полоски прогресса проектов ── */
@media (max-width: 480px) {
  .proj-bar-row { gap: 7px; }
  .pb-name      { width: 80px; font-size: 11px; }
}

/* ── Кнопки управления таймером ── */
@media (max-width: 480px) {
  /* предполагаем flex-row кнопок — делаем их крупнее */
  .tt-controls { gap: 8px; }
}


/* ==========================================================================
   7. FABRIC OF DAY (ТКАНЬ ДНЯ)
   ========================================================================== */

/* ── Контейнер таймлайна ── */
@media (max-width: 680px) {
  .fabric-container { margin-left: 70px; }
  .f-time-label     { left: -65px; width: 55px; font-size: 10px; }
}

@media (max-width: 480px) {
  .fabric-container { margin-left: 54px; }
  .f-time-label     { left: -50px; width: 42px; font-size: 9px; }
  .fabric-line      { left: 14px; }
  .fabric-item      { padding-left: 38px; margin-bottom: 14px; }
  .fabric-dot       { left: 6px; width: 16px; height: 16px; }
  .fabric-card      { padding: 10px 12px; gap: 10px; }
}

/* ── Карточка нити ── */
@media (max-width: 480px) {
  .f-source-icon { width: 28px; height: 28px; font-size: 16px; }
  .f-text        { font-size: 12px; }
  .f-tag         { font-size: 8px; }
  .f-time        { font-size: 9px; min-width: 38px; }
  /* кнопка удаления — всегда видна на touch ── */
  .fabric-card-del { opacity: 1; }
}

/* ── Вводная сетка по типам нитей ── */
@media (max-width: 600px) {
  .intro-threads { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Ручной ввод ── */
@media (max-width: 480px) {
  .manual-row            { flex-direction: column; gap: 6px; }
  .manual-row .minput-time { width: 100%; }
}

/* ── Полоска плотности ── */
@media (max-width: 480px) {
  .density-legend { gap: 10px; }
  .dl-item        { font-size: 10px; }
}

/* ── Пустое состояние ── */
@media (max-width: 480px) {
  .fabric-empty      { padding: 32px 16px; }
  .fabric-empty-icon { font-size: 32px; }
  .fabric-empty-title { font-size: 13px; }
}


/* ==========================================================================
   8. УТИЛИТЫ ДЛЯ TOUCH / SAFE AREAS
   ========================================================================== */

/* Safe-area отступы для iPhone с чёлкой */
@supports (padding: env(safe-area-inset-bottom)) {
  header { padding-top: max(10px, env(safe-area-inset-top)); }
  footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Убираем hover-эффекты на touch-устройствах (не «залипают» после тапа) */
@media (hover: none) {
  .event-card:hover   { transform: none; box-shadow: var(--shadow); }
  .pbtn:hover         { transform: none; }
  .bs-btn:hover       { transform: none; }
  .hbtn:hover         { background: rgba(255,255,255,.1); }
  .titem:hover        { box-shadow: none; }
  .block:hover        { transform: none; box-shadow: none; }
  .fabric-card:hover  { transform: none; box-shadow: var(--shadow); }
  .f-block:hover      { transform: none; box-shadow: none; }
  .entry-card:hover   { transform: none; box-shadow: none; }
  /* кнопки-действия — показывать всегда (нет hover на мобильном) */
  .ec-actions         { opacity: 1; }
  .fabric-card-del    { opacity: 0.6; }
}

/* Прокрутка — momentum на iOS */
.tlist, .timeline, .mbody, .copy-area, .paste-area {
  -webkit-overflow-scrolling: touch;
}