/* SunSong CRM — стили приложения поверх design-system/tokens.css (/ds/tokens.css).
   Цвета, шрифт, радиусы, линии и отступы — только токены --ss-*.
   Мобильная шкала кеглей — из прототипа материалы/crm-mvp-prototype.html
   (описана в design-system/README.md, раздел «Приложение CRM»). */

:root {
  --app-fs-h: 26px;      /* заголовок экрана, UPPERCASE */
  --app-fs-title: 15px;  /* заголовок карточки */
  --app-fs-text: 13px;   /* подписи, метаданные */
  --app-fs-label: 12px;  /* eyebrow, секции, навигация */
  --app-max: 480px;      /* ширина колонки приложения на компьютере */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ss-paper); color: var(--ss-ink);
  font-family: var(--ss-font); font-size: 16px; font-weight: 500; line-height: 1.5;
  letter-spacing: 0.2px; -webkit-font-smoothing: antialiased;
}
h1, h2, p, blockquote { margin: 0; }

/* ---------- каркас: колонка на всю высоту, меню снизу ---------- */
.app {
  max-width: var(--app-max); min-height: 100dvh; margin: 0 auto;
  display: flex; flex-direction: column; background: var(--ss-paper);
}
.app-body {
  flex: 1; display: flex; flex-direction: column; gap: 18px;
  padding: calc(var(--ss-space-5) + env(safe-area-inset-top)) 18px var(--ss-space-5);
}
.app-nav {
  position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center;
  border-top: 1px solid var(--ss-line-soft); background: var(--ss-surface);
  padding: var(--ss-space-2) var(--ss-space-4) calc(14px + env(safe-area-inset-bottom));
}
.app-nav a, .app-nav .off {
  justify-self: center; padding: 6px; font-size: var(--app-fs-label);
  color: var(--ss-ink-muted); text-decoration: none;
}
.app-nav a.on { color: var(--ss-ink); font-weight: 600; }
.app-nav .off { opacity: .6; }
.app-nav .mic {
  width: 52px; height: 52px; margin-top: -26px; justify-self: center; display: grid; place-items: center;
  border-radius: 50%; border: 4px solid var(--ss-paper); background: var(--ss-ink); color: var(--ss-paper); cursor: pointer;
}
.app-nav .mic svg { width: 22px; height: 22px; }

/* ---------- типографика экрана ---------- */
.eyebrow { font-size: var(--app-fs-label); text-transform: uppercase; letter-spacing: .8px; color: var(--ss-ink-muted); }
.scr-h { font-size: var(--app-fs-h); font-weight: 600; text-transform: uppercase; line-height: 1.05; margin-top: 2px; }
.sec-h {
  display: flex; align-items: center; gap: var(--ss-space-2); margin: 4px 0 -8px;
  font-size: var(--app-fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
}
.sec-h .cnt { color: var(--ss-ink-muted); font-weight: 500; }
.t { font-size: var(--app-fs-title); font-weight: 600; line-height: 1.35; }
.m { font-size: var(--app-fs-text); color: var(--ss-ink-muted); }
.due-red { color: var(--ss-danger); font-weight: 600; }
.note { text-align: center; margin-top: auto; }

/* ---------- кнопки: база .ss-btn из токенов ---------- */
.btn-big { width: 100%; font-size: 17px; }
.ss-btn svg { width: 18px; height: 18px; flex: none; }
.ss-btn:disabled, .app-nav .mic:disabled { opacity: .45; cursor: not-allowed; }
.ss-btn--solid:disabled:hover { background: var(--ss-ink); color: var(--ss-paper); }
.ss-btn:focus-visible, .app-nav a:focus-visible { outline: 2px solid var(--ss-blue); outline-offset: 2px; }

/* ---------- блоки ---------- */
.mk { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--ss-yellow); border: 1px solid var(--ss-ink); }
.mk.red { background: var(--ss-danger); border-color: var(--ss-danger); }
.empty { background: var(--ss-surface); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.empty .t { font-size: 18px; }
.quote { border-left: 2px solid var(--ss-ink); padding-left: var(--ss-space-3); font-size: var(--ss-fs-small); }
.bucket { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--ss-surface); padding: 14px; display: flex; flex-direction: column; gap: var(--ss-space-2); }
.row { display: flex; align-items: center; gap: var(--ss-space-2); flex-wrap: wrap; }
.row.sb { justify-content: space-between; }
.side-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--ss-space-2);
  border: 1px solid var(--ss-ink); border-radius: var(--ss-radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
}
.side-tag.we { background: var(--ss-ink); color: var(--ss-paper); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }