/* ============================================================
   app.css — слой приложения поверх peach.css
   SPA-склейка + микро-анимации + 3D-рельса дней + экран входа.
   Файл дизайнера peach.css НЕ трогаем — всё расширение тут.
   ============================================================ */

/* --- сброс ссылок: в peach.css его нет, иначе <a> синие/подчёркнутые --- */
a { color: inherit; text-decoration: none; }

/* --- SPA: показ / скрытие экранов --- */
[hidden] { display: none !important; }
body { background: var(--p-bg-flat); }
#app > .shell { margin: 0 auto; }

/* экраны-оверлеи (меню, sheets, настройки, перенос, «день закрыт») */
.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
}
.app-overlay > .shell { min-height: 100%; }

/* статус-бар дизайн-макета (9:41 · 5G) — артефакт превью */
.status-bar { display: none !important; }

/* ============================================================
   ЭКРАН ВХОДА
   ============================================================ */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--p-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login__card {
  width: 100%;
  max-width: 340px;
  background: var(--p-card-solid);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-r-xl);
  box-shadow: var(--p-sh-modal);
  padding: 32px 24px 26px;
  text-align: center;
}
.login__crown {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(212, 172, 79, 0.35));
}
.login__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 12px;
  color: var(--p-ink);
}
.login__sub {
  font-size: 13px;
  color: var(--p-ink-2);
  margin-top: 4px;
}
.login__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.login__input {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--p-divider);
  border-radius: var(--p-r-md);
  background: #fff;
  color: var(--p-ink);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease;
}
.login__input:focus { border-color: var(--p-shoot); }
.login__error {
  font-size: 12.5px;
  color: #9a3a3a;
  background: #f7e0db;
  border-radius: var(--p-r-sm);
  padding: 8px 11px;
  text-align: left;
  line-height: 1.4;
}
.login__btn {
  margin-top: 4px;
  padding: 14px;
  border-radius: var(--p-r-pill);
  background: var(--p-ink);
  color: var(--p-ink-inv);
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.14s ease, opacity 0.15s ease;
}
.login__btn:active { transform: scale(0.96); }
.login__btn:disabled { opacity: 0.5; }

/* ============================================================
   МИКРО-АНИМАЦИИ — ощущение приложения, а не веб-страницы.
   ============================================================ */
button, a.link-chip, a.more-tile, a.more-hero,
.task, .day-card, .slot-card, .cal__cell, .week-day,
.mood-btn, .theme-swatch, .accent-swatch, .settings-row, .menu-row,
.tabbar__item, .fab, .hero__gear, .rail-btn {
  transition: transform 0.14s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.18s ease, opacity 0.18s ease,
              background-color 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active, a.link-chip:active, .mood-btn:active,
.settings-row:active, .menu-row:active, .cal__cell:active,
.theme-swatch:active, .accent-swatch:active {
  transform: scale(0.9);
}
a.more-tile:active, a.more-hero:active, .slot-card:active, .task:active {
  transform: scale(0.975);
}
.tabbar__item:active { transform: scale(0.88); }
.fab:active        { transform: scale(0.86) rotate(90deg); }
.hero__gear:active { transform: scale(0.84) rotate(35deg); }
.rail-btn:active   { transform: scale(0.8); }

@keyframes app-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
#app > .shell:not([hidden]) {
  animation: app-view-in 0.3s cubic-bezier(.22,.61,.36,1);
}

@keyframes app-sheet-up   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes app-sheet-down { to   { transform: translateY(100%); } }
@keyframes app-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes app-fade-out   { to   { opacity: 0; } }

.app-overlay:not([hidden]) .sheet { animation: app-sheet-up 0.34s cubic-bezier(.22,.61,.36,1); }
.app-overlay:not([hidden]) .dim   { animation: app-fade-in 0.22s ease; }
.app-overlay.is-closing .sheet    { animation: app-sheet-down 0.2s ease forwards; }
.app-overlay.is-closing .dim      { animation: app-fade-out 0.2s ease forwards; }
.app-overlay.is-closing           { animation: app-fade-out 0.22s ease forwards; }

@keyframes app-pop-in {
  from { opacity: 0; transform: scale(0.9) translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.app-overlay:not([hidden]) .menu-pop {
  animation: app-pop-in 0.24s cubic-bezier(.22,.61,.36,1);
  transform-origin: top left;
}
.app-overlay.is-closing .menu-pop { animation: app-fade-out 0.15s ease forwards; }

#ov-settings:not([hidden]), #ov-reschedule:not([hidden]), #ov-done:not([hidden]),
#ov-shopping:not([hidden]), #ov-meds:not([hidden]),
#ov-workouts:not([hidden]), #ov-ideas:not([hidden]) {
  animation: app-fade-in 0.26s ease;
}

@keyframes app-check-pop {
  0%   { transform: scale(0.4); }
  55%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.task__check.is-checked::after {
  animation: app-check-pop 0.34s cubic-bezier(.34,1.56,.64,1);
}

@keyframes app-drop-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.8); }
  to   { opacity: 1; transform: none; }
}
.hero__crown-glyph {
  animation: app-drop-in 0.55s 0.08s backwards cubic-bezier(.34,1.56,.64,1);
}

.mood-btn.is-active, .mood-picker__item.is-active {
  animation: app-check-pop 0.3s cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   3D-РЕЛЬСА ДНЕЙ НЕДЕЛИ (экран «Сегодня»)
   Трансформы каждому дню навешивает JS на скролле.
   ============================================================ */
.week-strip {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 20px 0 !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  perspective: 720px;
  scrollbar-width: none;
}
.week-strip::-webkit-scrollbar { display: none; }
.week-strip::before,
.week-strip::after {
  content: '';
  flex: 0 0 calc(50% - 39px);
}
.week-strip .week-day {
  flex: 0 0 78px;
  margin: 0 1px;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.week-strip .week-day.is-active {
  background: var(--p-card-solid);
  border: 1.5px solid var(--p-ink);
  box-shadow: 0 14px 30px -12px rgba(42,31,26,.4);
}
/* маркер реального «сегодня» на рельсе (на случай если выбран другой день) */
.week-strip .week-day.is-today:not(.is-active) {
  border: 1.5px solid var(--p-shoot);
}
.week-strip .week-day.is-today:not(.is-active) .week-day__num {
  color: var(--p-shoot);
}

/* ============================================================
   SMART-ПЕРЕНОС: быстрые чипы и инлайн-date
   ============================================================ */
.rs-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 4px;
}
.rs-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 14px;
  border-radius: 14px;
  background: var(--p-card-solid);
  border: 1.5px solid var(--p-divider);
  text-align: left;
  cursor: pointer;
}
.rs-quick:active { transform: scale(0.97); }
.rs-quick__label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}
.rs-quick__hint {
  font-size: 11.5px;
  color: var(--p-ink-2);
  font-family: var(--p-serif);
  font-style: italic;
}
.rs-date-input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--p-divider);
  border-radius: var(--p-r-md);
  background: var(--p-card-solid);
  color: var(--p-ink);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.rs-date-input:focus { border-color: var(--p-shoot); }

/* ============================================================
   SWIPE-DOWN-TO-CLOSE: визуальная подсказка на грифе
   (touch-handlers в main.js — onSheetSwipe*)
   ============================================================ */
.sheet__grip {
  cursor: grab;
  touch-action: none;        /* пусть touchmove не скроллит страницу */
  padding: 14px 0 8px;       /* расширяем зону хвата для пальца */
  margin-top: -10px;
}
.sheet__grip:active { cursor: grabbing; }

/* ============================================================
   ТАЧ-ТАРГЕТЫ В РЕДАКТОРЕ ЗАДАЧИ — увеличены для пальца.
   Дизайнерские размеры были 18-26px, на телефоне попасть тяжело.
   ============================================================ */
#ov-edit .color-swatch {
  width: 32px;
  height: 32px;
  min-width: 32px;
}
#ov-edit .color-swatch.is-active {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
#ov-edit .color-row {
  gap: 10px;
  flex-wrap: wrap;
}
#ov-edit .stepper__btn {
  width: 38px;
  height: 38px;
  font-size: 20px;
  font-weight: 500;
}
#ov-edit .stepper__btn:active {
  transform: scale(0.88);
  background: var(--p-divider);
}
#ov-edit .seg__btn {
  padding: 9px 14px;
  min-height: 38px;
}
#ov-edit .sheet__delete {
  padding: 8px 12px;
  min-height: 34px;
}
#ov-edit .btn {
  min-height: 48px;
  font-size: 15px;
}
#ov-edit .btn:active { transform: scale(0.97); }
#ov-edit .sheet__emoji-box {
  width: 52px;
  height: 52px;
  min-width: 52px;
}

/* ============================================================
   КЛАВИАТУРА: сдвигаем sheet вверх, чтобы кнопки «отмена/сохранить»
   не уходили под клавиатуру на iOS Safari. Использует --kb-shift,
   которое выставляет main.js по visualViewport.
   ============================================================ */
.app-overlay:not([hidden]) .sheet {
  transform: translateY(calc(-1 * var(--kb-shift, 0px)));
  transition: transform 0.2s ease;
}

/* ============================================================
   ТЕМЫ — крем / мята / сумерки (персик = базовый :root в peach.css)
   Переопределяем только поверхности и текст; акценты задаются
   отдельно через --p-shoot (выбор акцента в настройках).
   ============================================================ */
body[data-theme="cream"] {
  --p-bg:          linear-gradient(180deg, #f6f1e6 0%, #ebe3d2 100%);
  --p-bg-flat:     #f6f1e6;
  --p-card:        rgba(255, 255, 255, 0.66);
  --p-card-solid:  #fffdf8;
  --p-card-border: rgba(255, 255, 255, 0.9);
}
body[data-theme="mint"] {
  --p-bg:          linear-gradient(180deg, #e7f3ec 0%, #d3e9dd 100%);
  --p-bg-flat:     #e7f3ec;
  --p-card:        rgba(255, 255, 255, 0.66);
  --p-card-solid:  #f6fbf8;
  --p-card-border: rgba(255, 255, 255, 0.9);
}
body[data-theme="dusk"] {
  --p-bg:          linear-gradient(180deg, #2f2620 0%, #241d19 100%);
  --p-bg-flat:     #2f2620;
  --p-card:        rgba(255, 255, 255, 0.07);
  --p-card-solid:  #3b312b;
  --p-card-border: rgba(255, 255, 255, 0.10);
  --p-ink:         #f3e9e0;
  --p-ink-2:       #c0ac9c;
  --p-ink-3:       #8f7c6e;
  --p-ink-inv:     #2f2620;
  --p-divider:     rgba(255, 255, 255, 0.10);
}