/* Дополнения поверх base.css для рабочего демо */
.phone { display: flex; flex-direction: column; }
.phone > .content { flex: 1; }

/* --- Полиш-слой (типографика, глубина, движение) --- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .sectiontitle, .event-title { text-wrap: balance; }
p, .sub { text-wrap: pretty; }
/* динамические числа не дёргают layout */
.trust, .metric b, .kpi b, .meta, .iconbtn .dot, .badge { font-variant-numeric: tabular-nums; }

/* TrustBadge — 3 состояния по дизайн-системе клиента (12): green 80–100 / yellow 50–79 / red 0–49 */
.trust.midtrust { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }

/* глубина: многослойные тени вместо жёстких границ + тонкий outline на изображениях */
.card, .event-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px rgba(15, 23, 42, .06);
}
.event-img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.sheet { box-shadow: 0 2px 6px rgba(15, 23, 42, .07), 0 18px 50px rgba(15, 23, 42, .14); }

/* тактильный отклик: scale на нажатие (интерактив), прерываемые transitions */
.btn, .chip, .navitem, .choice, .iconbtn, button.badge, .hubcard, .snav a {
  transition-property: transform, background-color, box-shadow, color;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.btn:active, .chip:active, .choice:active, .iconbtn:active, button.badge:active, .navitem:active .plus, .navitem:active { transform: scale(.96); }
.btn:not(.secondary):hover { box-shadow: 0 6px 18px rgba(0, 87, 217, .35); }
.snav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.hubcard:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 44px rgba(15, 23, 42, .12); }

/* стаггер-появление контента экрана: мягкий подъём, каскад ~60мс */
@media (prefers-reduced-motion: no-preference) {
  .content > *, .webmain > * {
    animation: rise .32s cubic-bezier(.2, 0, 0, 1) both;
  }
  .content > *:nth-child(1), .webmain > *:nth-child(1) { animation-delay: 0ms; }
  .content > *:nth-child(2), .webmain > *:nth-child(2) { animation-delay: 40ms; }
  .content > *:nth-child(3), .webmain > *:nth-child(3) { animation-delay: 80ms; }
  .content > *:nth-child(4), .webmain > *:nth-child(4) { animation-delay: 120ms; }
  .content > *:nth-child(5), .webmain > *:nth-child(5) { animation-delay: 160ms; }
  .content > *:nth-child(n+6), .webmain > *:nth-child(n+6) { animation-delay: 200ms; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* бейдж непрочитанных на колокольчике */
.iconbtn .dot {
  position: absolute; top: -5px; right: -5px;
  background: var(--red); color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; font-size: 11px; font-weight: 900;
  display: grid; place-items: center; border: 2px solid #fff;
}

/* выбранная категория в форме создания */
.choice { cursor: pointer; }
.choice.selected { border-color: var(--blue); background: #EAF2FF; box-shadow: 0 0 0 2px rgba(0, 87, 217, .25); }

/* тёмные метрики в профиле */
.metric.mdark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }

/* кликабельность */
[data-go], .navitem, .chip, .listitem[data-go], .btn, .badge[data-assign], .badge[data-resolve] { cursor: pointer; }
button.badge { border: 0; font: inherit; font-weight: 800; font-size: 12px; }
button.badge.warn { background: #FFF7ED; color: #C2410C; }

/* Leaflet-пин в стиле макетов */
.lpin {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg);
  display: grid; place-items: center; color: #fff; font-size: 18px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .25); border: 2px solid #fff;
}
.lpin span { transform: rotate(45deg); }

/* карта в телефоне поверх скруглений */
#lmap { border-radius: 0; z-index: 1; }
.leaflet-container { font: inherit; }

/* демо-бар над рамкой телефона */
.demobar {
  max-width: 1280px; margin: 0 auto 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.demobar .btn { height: 40px; padding: 0 16px; font-size: 13px; }

/* --- Реальный мобильный: приложение на весь экран, без декоративной рамки --- */
@media (max-width: 640px), (display-mode: standalone) {
  body.mobile-app { background: #fff; }
  body.mobile-app .page { padding: 0; max-width: none; }
  body.mobile-app .header, body.mobile-app .demobar { display: none; }
  body.mobile-app .phone {
    width: 100vw; max-width: none; height: 100dvh; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top);
  }
  body.mobile-app .statusbar { display: none; }
  body.mobile-app .bottomnav { height: calc(78px + env(safe-area-inset-bottom)); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* хаб */
.hubgrid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hubcard { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px; box-shadow: 0 10px 28px rgba(15, 23, 42, .06); display: block; }
.hubcard h3 { margin: 10px 0 6px; color: var(--navy); }
.hubcard .sub { font-size: 13px; }
.scenario { max-width: 1280px; margin: 0 auto 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px 22px; }
.scenario ol { margin: 8px 0 0; padding-left: 20px; color: #344054; font-weight: 600; line-height: 1.9; }