/* Общие стили: шрифт, токены, кнопки, поля, модалки. */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-cyrillic.fe2bd26ae82a.woff2") format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/onest-latin.3db826ed1c5d.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --sunken: #eef1f6;
  --border: #e1e6ee;
  --border-strong: #c9d2de;
  --text: #1b2738;
  --muted: #5b6a7f;
  --accent: #425d84;
  --accent-hover: #354c6d;
  --accent-soft: #e6ecf4;
  --danger: #bb4259;
  --danger-soft: #faeef1;
  --warning: #93661a;
  --success: #3a7f55;

  /* Темная панель входа - тот же синий ряд, глубже. */
  --ink: #1d2c42;
  --ink-2: #26395a;
  --on-ink: #f2f5fa;
  --on-ink-muted: #a9b7cc;

  --radius-field: 12px;
  --radius-card: 12px;
  --radius-bubble: 18px;
  --radius-modal: 20px;
  --radius-pill: 999px;

  /* Тени подкрашены в тон текста. Вместо сплошной рамки у карточек - полупрозрачное
     кольцо (--ring): на любом фоне выглядит одинаково и не "режет" край. */
  --ring: 0 0 0 1px rgb(27 39 56 / 0.08);
  --ring-strong: 0 0 0 1px rgb(27 39 56 / 0.16);
  --shadow-sm: 0 1px 2px rgb(27 39 56 / 0.06);
  --shadow-md: 0 1px 2px rgb(27 39 56 / 0.04), 0 8px 24px -6px rgb(27 39 56 / 0.10);
  --shadow-lg: 0 2px 6px rgb(27 39 56 / 0.06), 0 24px 56px -12px rgb(27 39 56 / 0.28);

  --focus-ring: 0 0 0 3px rgb(66 93 132 / 0.28);
  /* Сильный ease-out: быстрый старт - интерфейс отвечает сразу. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Выезжающие панели, как в iOS. */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 180ms;
  --dur-press: 160ms;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Без серой вспышки при нажатии на телефоне - у нас свое :active. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, p {
  margin: 0;
}

/* Заголовки - ровными строками, текст - без одиноких слов в последней строке. */
h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--accent-hover);
  }
}

/* Кнопки и ссылки откликаются сразу, без задержки на двойной тап. */
a,
button,
label,
summary {
  touch-action: manipulation;
}

button {
  -webkit-user-select: none;
  user-select: none;
}

time,
.tabular {
  font-variant-numeric: tabular-nums;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--sunken);
  box-shadow: inset 0 -1px 0 rgb(27 39 56 / 0.12);
  color: var(--text);
  font: inherit;
  font-size: 0.92em;
  line-height: 1.5;
  text-align: center;
}

/* Ссылка "К содержанию" для тех, кто ходит с клавиатуры. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  color: #fff;
  transform: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) ease,
    border-color var(--dur) ease,
    transform var(--dur-press) var(--ease-out);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-secondary {
  border-color: var(--border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-block {
  width: 100%;
}

@media (hover: hover) {
  .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: #fff;
  }

  .btn-danger:hover:not(:disabled) {
    background: #a2384c;
    color: #fff;
  }

  .btn-secondary:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled) {
    background: var(--sunken);
    color: var(--text);
  }
}

.btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* Поля */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 14px;
  font-weight: 500;
}

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

.input::placeholder {
  color: var(--muted);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.input[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
}


/* Плашки с сообщениями */

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.notice svg {
  flex: none;
  margin-top: 1px;
}

.notice-danger {
  background: var(--danger-soft);
  color: #8f2e41;
}


/* Модалки */

dialog.modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-modal);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--ring), var(--shadow-lg);
}

dialog.modal .modal-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

dialog.modal .modal-text {
  margin-top: 6px;
  color: var(--muted);
}

dialog.modal .modal-actions {
  display: flex;
  gap: 10px;
  margin: 0;
}

dialog.modal .modal-actions-end {
  justify-content: flex-end;
  margin-top: 22px;
}

dialog.modal::backdrop {
  background: rgb(27 39 56 / 0.4);
  animation: fade-in 200ms ease-out;
}

/* Модалка появляется от центра: чуть меньше и прозрачная. Не из scale(0). */
dialog.modal[open] {
  animation: modal-in 220ms var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
}

@keyframes fade-in {
  from { opacity: 0; }
}


/* Меньше движения: убираем сдвиги и масштаб, оставляем смену прозрачности -
   она помогает понять, что изменилось. Крутилки загрузки продолжают крутиться. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
  }

  dialog.modal[open],
  .motion-rise {
    animation-name: fade-in !important;
  }
}