/*
 * Кит интерфейса АктПро на iOS для сцен лендинга.
 *
 * Все числа здесь - точки (pt) из кода SwiftUI, один в один:
 * iosApp/iosApp/Core/{AppColor,AppFont,AppMetrics,AppIcon}.swift и Components/*.swift.
 * Экран iPhone 16 Pro - 402x874 pt, в CSS это 402x874 px; в окно сцена вписывается
 * через zoom на .device, поэтому вёрстку можно писать теми же числами, что в Swift.
 *
 * Интерлиньяж считается так же, как в SwiftUI: натуральная высота строки гарнитуры
 * (Geologica 1.25, Manrope 1.366 от кегля) плюс lineSpacing = lineHeight - size из AppFont.
 *
 * Если меняется дизайн-система приложения, меняется и этот файл: иначе сцены разъедутся
 * с продуктом, а лендинг начнёт показывать не то приложение.
 */

@font-face { font-family: "Geologica"; font-weight: 700; font-display: block;
  src: url("../fonts/Geologica_Bold.woff2") format("woff2"); }
@font-face { font-family: "Geologica"; font-weight: 800; font-display: block;
  src: url("../fonts/Geologica_ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: block;
  src: url("../fonts/Manrope_Regular.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: block;
  src: url("../fonts/Manrope_Medium.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: block;
  src: url("../fonts/Manrope_SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: block;
  src: url("../fonts/Manrope_Bold.woff2") format("woff2"); }

:root {
  /* AppColor */
  --accent: #0A66FF;
  --accent-pressed: #0848B8;
  --on-accent: #FFFFFF;
  --accent-container: #E8F0FF;
  --on-accent-container: #0848B8;
  --background: #FFFFFF;
  --surface: #F6F7F9;
  --surface-variant: #EFF1F4;
  --surface-high: #EEF0F3;
  --scrim: #E8EAEE;
  --text-primary: #0E1116;
  --text-secondary: #5C6470;
  --text-tertiary: #98A0AD;
  --separator: #DDE1E7;
  --separator-variant: #ECEEF2;
  --success: #1F8A5B;
  --success-container: #E4F4EC;
  --warning: #B5841A;
  --warning-container: #FBF1DC;
  --danger: #DC2626;
  --danger-container: #FBE9E9;
  --markup-red: #FF3B30;

  /* AppRadius */
  --r-xs: 7px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  /* Стекло кнопок навбара и таббара iOS 26: светлая подложка с мягкой тенью. */
  --glass: rgba(255, 255, 255, .92);
  --glass-shadow: 0 6px 20px rgba(14, 17, 22, .08), 0 1px 3px rgba(14, 17, 22, .06);

  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  display: grid;
  place-items: center;
  font-family: "Manrope", sans-serif;
  color: var(--text-primary);
}

/* ------------------------------------------------------------------ Шкала AppFont */

.displaySmall   { font: 800 26px/35.5px "Geologica"; letter-spacing: -1px; }
.headlineLarge  { font: 800 20px/28px "Geologica"; letter-spacing: -.6px; }
.headlineMedium { font: 700 20px/28px "Geologica"; letter-spacing: -.6px; }
.headlineSmall  { font: 700 15px/22.75px "Geologica"; letter-spacing: -.3px; }
.titleLarge     { font: 700 18px/26.5px "Geologica"; letter-spacing: -.5px; }
.titleMedium    { font: 700 15px/22.75px "Geologica"; letter-spacing: -.3px; }
.titleSmall     { font: 700 13px/20.25px "Geologica"; letter-spacing: -.25px; }
.bodyLarge      { font: 400 15px/25.5px "Manrope"; }
.bodyMedium     { font: 400 13px/22.75px "Manrope"; }
.bodySmall      { font: 500 12px/20.4px "Manrope"; }
.labelLarge     { font: 600 13px/20.75px "Manrope"; letter-spacing: .8px; }
.labelMedium    { font: 500 13px/20.75px "Manrope"; }
.labelSmall     { font: 500 11px/18px "Manrope"; letter-spacing: .4px; }
.labelTiny      { font: 500 10px/15.66px "Manrope"; }
/* Text с .appTextStyle: без lineSpacing, только натуральная высота строки. */
.tight.displaySmall { line-height: 32.5px; }

.c-primary   { color: var(--text-primary); }
.c-secondary { color: var(--text-secondary); }
.c-tertiary  { color: var(--text-tertiary); }
.c-accent    { color: var(--accent); }
.c-white     { color: #fff; }
.c-success   { color: var(--success); }
.c-warning   { color: var(--warning); }
.c-danger    { color: var(--danger); }
.upper       { text-transform: uppercase; }
.tnum        { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Устройство */

/*
 * iPhone 16 Pro: экран 402x874 pt. Рамка нарисована без бликов и фасок, как на промо Apple
 * последних лет: тёмный титан, тонкий кант, скругление экрана 55.
 */
.device {
  --bezel: 11px;
  position: relative;
  width: calc(402px + var(--bezel) * 2);
  height: calc(874px + var(--bezel) * 2);
  padding: var(--bezel);
  border-radius: 66px;
  background: #1C1D20;
  box-shadow:
    inset 0 0 0 1.5px #3A3B3F,
    inset 0 0 0 4px #121316,
    0 40px 80px -30px rgba(14, 17, 22, .45),
    0 18px 36px -18px rgba(14, 17, 22, .35);
  zoom: var(--fit, 1);
  flex: none;
}

.embedded .device { box-shadow: inset 0 0 0 1.5px #3A3B3F, inset 0 0 0 4px #121316; }
.embedded .device::before, .embedded .device::after { display: none; }

/* Боковые кнопки: только силуэт, чтобы телефон читался телефоном и в мелком масштабе. */
.device::before,
.device::after {
  content: "";
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: #2A2B2F;
}
.device::before { left: -3px; top: 200px; height: 62px; box-shadow: 0 -86px 0 -14px #2A2B2F, 0 76px 0 0 #2A2B2F; }
.device::after  { right: -3px; top: 250px; height: 96px; }

.screen {
  position: relative;
  width: 402px;
  height: 874px;
  overflow: hidden;
  border-radius: 55px;
  background: var(--background);
  isolation: isolate;
}

.island {
  position: absolute;
  z-index: 60;
  top: 11px;
  left: 138px;
  width: 126px;
  height: 37px;
  border-radius: 19px;
  background: #000;
}

.statusbar {
  position: absolute;
  z-index: 50;
  inset: 0 0 auto 0;
  height: 54px;
  pointer-events: none;
  color: #000;
}
.statusbar.light { color: #fff; }
.statusbar .time {
  position: absolute;
  left: 51px;
  top: 21px;
  width: 46px;
  text-align: center;
  font: 600 17px/22px var(--system);
  letter-spacing: -.4px;
}
.statusbar .glyphs {
  position: absolute;
  right: 34px;
  top: 25px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.statusbar svg { display: block; fill: currentColor; }

/* Полоса «домой» внизу экрана. */
.home-indicator {
  position: absolute;
  z-index: 50;
  left: 134px;
  bottom: 8px;
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: #000;
  pointer-events: none;
  /* На эталонных снимках приложения полосы нет: экраны её прячут. */
  display: none;
}
.home-indicator.light { background: #fff; }

/* Белая шторка на склейке лупа. */
.veil {
  position: absolute;
  z-index: 80;
  inset: 0;
  background: #fff;
  pointer-events: none;
}

/* ------------------------------------------------------------------ Страницы и навигация */

.page {
  position: absolute;
  inset: 0;
  background: var(--background);
  overflow: hidden;
}
.page.surface { background: var(--surface); }
.page.black   { background: #000; }

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 116px;
  bottom: 0;
  overflow: hidden;
}

/* Навбар: кнопки-стёкла по краям, по центру оверлайн и заголовок. */
.nav {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto 0;
  height: 116px;
}
.nav.hairline::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: var(--separator-variant);
}
.nav .titles {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 62px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.nav .titles.left { align-items: flex-start; left: 72px; }
.nav .overline { font: 600 13px/16px "Manrope"; letter-spacing: .8px; color: var(--text-tertiary); }
.nav .title { font: 700 15px/19px "Geologica"; letter-spacing: -.3px; color: var(--text-primary); }
.nav .lead  { position: absolute; left: 16px; top: 62px; }
.nav .trail { position: absolute; right: 16px; top: 62px; }

.glass-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}
.glass-btn.accent { color: var(--accent); }
.glass-group {
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.glass-group > span {
  width: 52px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

/* Шаги мастера: полосы по 3 pt под навбаром. */
.steps {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 115px;
  height: 3px;
  display: flex;
  gap: 6px;
}
.steps i { flex: 1; border-radius: 2px; background: var(--separator); overflow: hidden; }
.steps i b { display: block; height: 100%; width: 100%; background: var(--accent); }

/* Нижняя панель с кнопкой: серая подложка до низа экрана. */
.bottom-bar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 108px;
  padding: 12px 16px 0;
  background: var(--surface);
}

/* ------------------------------------------------------------------ Компоненты */

.btn {
  height: 50px;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 13px/16px "Manrope";
  letter-spacing: .8px;
  white-space: nowrap;
}
.btn.primary   { background: var(--accent); color: var(--on-accent); }
.btn.secondary { background: var(--surface-variant); color: var(--text-secondary); }
.btn.tonal     { background: var(--surface-variant); color: var(--text-secondary); }
.btn.text      { height: 44px; color: var(--accent); }
.btn.disabled  { opacity: .4; }

.card {
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--separator-variant);
}

/* Отметка выбора: круг 24 с обводкой 1.5 или заливка акцентом с галкой. */
.check {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--separator);
  flex: none;
}
.check.lg { width: 32px; height: 32px; }
.check .on {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}

/* Строка списка редактора: плоская, с линией снизу от поля до поля. */
.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 67px;
  padding: 8px 0;
  margin: 0 16px;
  border-bottom: 1px solid var(--separator-variant);
}
.row .texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .chev { color: var(--text-tertiary); flex: none; }

.field {
  height: 50px;
  border-radius: var(--r-m);
  background: var(--surface-high);
  padding: 0 16px;
  display: flex;
  align-items: center;
  font: 400 15px/20px "Manrope";
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
}
.field .ph { color: var(--text-tertiary); }
.caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: middle;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font: 500 11px/14px "Manrope";
  letter-spacing: .4px;
  white-space: nowrap;
}

/* Островок отчётов: строки на белом с рамкой, полоса статуса 4x64. */
.island-card {
  border-radius: 16px;
  border: 1px solid var(--separator-variant);
  background: var(--background);
  overflow: hidden;
}
.report {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 98px;
}
.report + .report { border-top: 1px solid var(--separator-variant); }
.report .stripe { width: 4px; height: 64px; border-radius: 8px; flex: none; }
.report .texts { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.report .texts > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
}
.section-head .tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.section-head .count { margin-left: auto; }

/* Таббар iOS 26: плавающая капсула с выделенной вкладкой. */
.tabbar {
  position: absolute;
  z-index: 20;
  left: 64px;
  bottom: 22px;
  width: 274px;
  height: 62px;
  border-radius: 31px;
  padding: 4px;
  display: flex;
  background: var(--glass);
  box-shadow: 0 10px 30px rgba(14, 17, 22, .10), 0 1px 4px rgba(14, 17, 22, .06);
}
.tabbar span {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 27px;
  color: #000;
}
.tabbar span.on { background: #EDEDEF; color: var(--accent); }

/* ------------------------------------------------------------------ Служебное для анимации */

/* Касание: полупрозрачный круг, как «показывать касания» в симуляторе. */
.touch {
  position: absolute;
  z-index: 70;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: rgba(14, 17, 22, .16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 2px 10px rgba(14, 17, 22, .18);
  opacity: 0;
  pointer-events: none;
}
.touch.on-dark { background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }

.icon { display: block; flex: none; }
.abs { position: absolute; }
.row-flex { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.clip { overflow: hidden; }

/* ------------------------------------------------------------------ Клавиатура (keyboard.js) */

.kb {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 28px 28px 0 0;
  background: #E2E4E8;
}
.kb .k {
  position: absolute;
  border-radius: 8.5px;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  font: 400 23px/1 var(--system);
}
.kb .k.fn { background: #C8CCD3; }
.kb .k.bare { background: transparent; }
.kb .kl { font: 400 16px/1 var(--system); }
.kb-alpha.caps .k.letter { text-transform: uppercase; }
.kb-alpha .k.space { text-transform: none !important; }
.kb-bottom {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 30px;
  display: flex;
  justify-content: space-between;
  color: #5F636B;
}
.kpop {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.kpop span {
  position: absolute;
  left: -26px;
  top: -56px;
  width: 52px;
  height: 100px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font: 400 34px/60px var(--system);
  text-align: center;
  color: #000;
}
.kb-alpha.caps .kpop span { text-transform: uppercase; }
.kb-decimal .k { flex-direction: column; gap: 0; align-content: center; }
.kb-decimal .kd { font: 400 26px/28px var(--system); }
.kb-decimal .kd-l { font: 600 10px/12px var(--system); letter-spacing: 2px; }