/*
 * Часы 46 мм: экран 208 на 248 точек, скругление 42.
 *
 * Числа перенесены из набора Apple «watchOS 26 UI Kit» для Figma, страницы
 * Layout Grid, Buttons и Lists, размер 46 мм: безопасная область 178 на 212
 * при поле 15 по бокам и 18 сверху, 15 снизу; кнопка-пилюля 178 на 52,5;
 * кегль кнопки 17, строки списка 16, подписи 13.
 *
 * Тема светлая, как у остальных приложений в корпусах на сайте. Цвета те же,
 * что в ../payout/tokens.css, но объявлены здесь заново: часы стоят в
 * корпусе отдельной страницей, и тянуть на них файл ради шести значений
 * дороже, чем повторить их с этой пометкой.
 */
:root {
  --m-side: 15px;
  --m-top: 18px;
  --m-bottom: 15px;
  --btn-h: 52.5px;
  --btn-h-sm: 44px;
  --fs-btn: 17px;
  --fs-row: 16px;
  --fs-cap: 13px;

  --bg: #fff;
  --ink: #14161a;
  --ink-2: rgb(20 22 26 / 0.58);
  --fill: rgb(20 22 26 / 0.07);
  --act: #0d6849;
  --act-deep: #0a4a33;
  --bad: #c72b20;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, 'SF Pro Rounded', system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
body {
  position: relative;
}

.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--m-top) var(--m-side) var(--m-bottom);
  text-align: center;
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}
.scr.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

p {
  margin: 0;
}

/* Надстрочник стоит там, где у набора заголовок панели навигации. Он несёт
   срок, а не название приложения: название человек и так знает, а срок, это
   единственное, что меняет его действие. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-cap);
  font-weight: 600;
  color: var(--ink-2);
}
.eyebrow--now {
  color: var(--bad);
}
.eyebrow--stop {
  color: var(--bad);
}
/*
 * Значок в надстрочнике вместо точки. Точка сообщала только «что-то
 * происходит», а значок называет что: чек, ожидание, запрет. Так помечено
 * состояние в истории операций Альфы, и на экране в двести точек это тем
 * важнее: места под слово нет.
 */
.wi {
  flex: none;
  width: 14px;
  height: 14px;
  color: currentColor;
}
.wi--now {
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.big {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.big b {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.big span {
  font-size: var(--fs-btn);
  font-weight: 600;
  color: var(--ink-2);
}
.mid {
  font-size: var(--fs-row);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.mid b {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.sub {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink-2);
  text-wrap: balance;
}

.btn {
  width: 100%;
  min-height: var(--btn-h);
  margin-top: 6px;
  border: 0;
  border-radius: calc(var(--btn-h) / 2);
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: 600;
  color: var(--ink);
  background: var(--fill);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.btn:active {
  transform: scale(0.96);
}
.btn--brand {
  background: var(--act);
  color: #fff;
}

/* Два действия рядом: пилюли пониже, иначе вторая не влезает в безопасную
   область по высоте. */
.row {
  display: flex;
  gap: 6px;
  width: 100%;
}
.row .btn {
  flex: 1;
  min-height: var(--btn-h-sm);
  margin-top: 0;
  border-radius: calc(var(--btn-h-sm) / 2);
  font-size: 14px;
}

/*
 * Круг успеха плотной ступенью, а не цветом кнопки: на экране в 208 точек
 * круг 54 рядом с пилюлей того же тона читался второй кнопкой. Разные
 * ступени разводят их, и белая галочка держит 10.29.
 */
.check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--act-deep);
  color: #fff;
  font-size: 30px;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .scr,
  .btn {
    transition: none;
  }
  .wi--now {
    animation: none;
  }
}