/* Self Made King 1.5 — визуальная и анимационная доводка.
   Подключается последним. Композиция главного экрана не меняется:
   здесь только согласованность стиля, отклик на действия и одна вступительная сцена. */

/* ---------- Типографика: детали ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #222321; color: #fff; }
.workspace, .sidebar, dialog, .toast { font-variant-numeric: tabular-nums; }
.smk-panel-head h2, .topbar h1, dialog h2 { text-wrap: balance; }

/* Заголовки вторичных экранов — тем же шрифтом, что и панели главного экрана */
.topbar .top-title h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Чуть крупнее самые мелкие подписи */
.smk-tasks .task-meta { font-size: 10.5px; }
.smk-metric p { font-size: 11px; }

/* ---------- Фокус с клавиатуры: виден на светлом и тёмном ---------- */
:focus-visible { outline: 2px solid #222321; outline-offset: -2px; }
.sidebar :focus-visible { outline-color: #f6f6f3; }
dialog :focus-visible, .toast :focus-visible { outline-offset: 2px; }

/* ---------- Окна и формы в языке главного экрана ---------- */
dialog#modal {
  background: #fff;
  color: #222321;
  border: 1px solid #373936;
  border-radius: 0;
  box-shadow: none;
}
dialog#modal::backdrop { background: rgba(34, 36, 35, 0.52); backdrop-filter: blur(2px); }
dialog#modal .modal-head { border-bottom: 1px solid #e6e5e1; padding: 22px 28px 18px; }
dialog#modal .modal-head h2 {
  font: 400 28px/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: -0.005em;
  color: #222321;
}
dialog#modal .eyebrow { color: #858783; letter-spacing: 0.14em; }
dialog#modal .modal-sub { color: #696c68; }
dialog#modal .field > span { color: #4b4e4a; font-weight: 500; }
dialog#modal .input {
  background: #fff;
  border: 1px solid #cfd0cb;
  border-radius: 0;
  color: #222321;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
dialog#modal .input:hover { border-color: #8f918c; }
dialog#modal .input:focus {
  border-color: #222321;
  box-shadow: inset 0 0 0 1px #222321;
  outline: none;
}

/* Уведомления: тот же чёрный, прямые углы */
.toast {
  background: #222321;
  color: #f6f6f3;
  border: 1px solid #373936;
  border-radius: 0;
  box-shadow: none;
}
.toast > button { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Нижняя панель телефона: тот же чёрный и прямые углы, без синего акцента */
.mobile-dock {
  border-radius: 0;
  border: 1px solid #373936;
  background: #fff;
  box-shadow: none;
}
.mobile-dock button.active { color: #222321; font-weight: 600; }
.mobile-dock .dock-add { background: #222321; color: #fff; border-radius: 0; }

/* ---------- Движение (только если пользователь не просил его убрать) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes smk-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes smk-dialog-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes smk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Единственная вступительная сцена: первая отрисовка главного экрана.
     Класс smk-intro ставится один раз и снимается через ~1,2 с (см. конец app.js). */
  .smk-intro .sidebar { animation: smk-enter 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
  .smk-intro .smk-dashboard > .card { animation: smk-enter 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
  .smk-intro .smk-dashboard > .smk-calendar { animation-delay: 0.04s; }
  .smk-intro .smk-dashboard > .smk-goals { animation-delay: 0.1s; }
  .smk-intro .smk-dashboard > .smk-tasks { animation-delay: 0.16s; }
  .smk-intro .smk-dashboard .smk-metrics .smk-metric { animation: smk-enter 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
  .smk-intro .smk-dashboard .smk-metrics .smk-metric-karma { animation-delay: 0.22s; }
  .smk-intro .smk-dashboard .smk-metrics .smk-metric-state { animation-delay: 0.27s; }
  .smk-intro .smk-dashboard .smk-metrics .smk-metric-risk { animation-delay: 0.32s; }

  /* Окна: открытие показывает, что изменилось */
  dialog#modal[open] { animation: smk-dialog-in 0.24s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); }
  dialog#modal[open]::backdrop { animation: smk-fade 0.24s ease-out both; }

  /* Отклик на наведение и нажатие: стрелки «подсказывают» переход */
  .sidebar .nav button .icon,
  .smk-goals .smk-goal-row > .icon,
  .smk-metric-link .icon,
  .smk-date-link .icon,
  .smk-goals-bottom .text-button .icon,
  .smk-calendar-key button .icon {
    transition: transform 0.22s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .sidebar .nav button:hover .icon { transform: translateX(2px); }
  .smk-goals .smk-goal-row:hover > .icon,
  .smk-metric-link:hover .icon,
  .smk-goals-bottom .text-button:hover .icon,
  .smk-calendar-key button:hover .icon { transform: translateX(3px); }

  .btn:active, .icon-button:active, .smk-tasks .segmented button:active { transform: translateY(1px); }

  /* Задача: чекбокс предупреждает о действии, название плавно «гаснет» при выполнении */
  .smk-tasks .task-item:not(.done) .task-check:not(:disabled):hover { border-color: #222321; background: #ecece8; }
  .smk-tasks .task-title { transition: color 0.3s ease, text-decoration-color 0.3s ease; }

  /* Мобильные вкладки */
  .smk-mobile-switch button { transition: background 0.2s ease, color 0.2s ease; }
}