/*
  Шрифты дизайн-системы лежат рядом, а не у Google.

  Страница, на которой открывают КТ пациента, не должна ходить никуда наружу
  вовсе: обращение за шрифтом передаёт стороннему сервису IP и адрес страницы,
  и объяснять это в политике хуже, чем не делать. Заодно снимок открывается
  и там, где интернет в кабинете еле держится.

  Файлы — подмножества кириллицы и латиницы, всего 136 КБ. Лицензия SIL OFL
  у всех трёх гарнитур разрешает размещать их у себя.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/fonts/inter-latin.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/golos-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(vendor/fonts/golos-800-latin.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(vendor/fonts/mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(vendor/fonts/mono-latin.woff2) format('woff2');
  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;
}

/*
  Оболочка Vidi в браузере. Палитра — те же токены, что в приложении на Mac
  (Color+Vidi.swift): врач не должен видеть два разных Vidi.

  Два правила, которые здесь важнее красоты:
  1) страница НЕ прокручивается — снимок занимает экран целиком, а прокрутка
     на телефоне уводит изображение из-под пальца во время протяжки;
  2) высота считается через dvh и safe-area — иначе на iPhone нижняя панель
     уезжает под полосу жестов и её кнопки перестают нажиматься.
*/

:root {
  color-scheme: dark;

  /* Значения сняты с дизайн-системы Vidi (vidi-tokens.css), не подобраны на
     глаз. Раньше здесь стояли соседние оттенки — синий 4F9CFF вместо 4C8EFF,
     бледные цвета плоскостей, — и браузерная версия выглядела похожей на
     приложение, но не той же. */
  --ground: #0A0D14;         /* фон окна */
  --void: #000000;           /* под снимком — истинный чёрный, обязателен */
  --surface: #12161F;        /* панели в покое */
  --surface-2: #1B212C;      /* карточки, поля ввода */
  --surface-3: #232A37;      /* ghost-кнопки, чипы */
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);

  /* Рецепт стекла один на всё плавающее. Настраивать по месту нельзя: как
     только у одного контейнера свои блюр и прозрачность, хром выглядит
     собранным из разных приложений. */
  --glass-bg: rgba(13, 16, 23, .66);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --glass-blur: blur(26px) saturate(150%);

  --ink: #F4F6FA;
  --ink-dim: #93A0B4;
  --ink-faint: #7A8698;

  /* Акцент один. */
  --signal: #4C8EFF;
  --signal-ink: #DCE8FF;
  --signal-tint: rgba(76, 142, 255, .14);

  /* Цвета плоскостей — адресация, не палитра: ими красится только то, что
     относится к проекции. */
  --plane-axial: #4C8EFF;
  --plane-sagittal: #FF6B6B;
  --plane-coronal: #4ED17E;
  --plane-neutral: #B9C2D0;

  --amber: #F2C14E;          /* измерение, зарезервирован */
  --status-good: #4ED17E;
  --status-warn: #F2C14E;
  --status-danger: #FF5C5C;

  --tint-hover: rgba(255, 255, 255, .06);
  --tint-active: rgba(255, 255, 255, .10);

  --font-display: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --radius-sm: 9px;          /* чип */
  --radius-glass-sm: 11px;   /* мелкое плавающее */
  --radius: 14px;            /* панель */
  --radius-lg: 20px;         /* карточка */
  --tap: 44px; /* минимальная площадь нажатия — палец, не курсор */
}

/* Одно стекло на всё плавающее. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Старт ─────────────────────────────────────────────────────────────── */

.start {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding:
    calc(32px + var(--safe-top))
    calc(16px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(16px + var(--safe-left));
}

.start-head { display: grid; gap: 6px; }

.wordmark {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.lead { margin: 0; color: var(--ink-dim); }

/* Иконка приложения перед названием — на всех экранах, где стоит Vidi Web. */
.brand, .viewer-brand { display: flex; align-items: center; gap: .36em; }
.brand-icon {
  flex: none;
  width: 1.06em;
  height: 1.06em;
  border-radius: 22.5%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Имя пациента стоит на месте заголовка, но длинное русское имя в размере
   логотипа занимает две строки и съедает экран телефона. */
.wordmark.is-name { font-size: 26px; line-height: 1.2; }

.card {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: grid;
  gap: 12px;
}

/*
  Кнопка «Открыть» прикреплена к низу экрана.
  В архиве бывает семь серий, и на iPhone список уводил главную кнопку под
  нижний край: список прокручивался, но врач видел только серии и не видел,
  чем их открыть. Проверено на 390×844 и 390×667.
*/
.study-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0.7);
}

.card-title { font-weight: 700; }

.hint { margin: 0; color: var(--ink-faint); font-size: 14px; }

.rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin: 0;
  font-size: 14px;
}
.rows dt { color: var(--ink-dim); }
.rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rows dd.ok { color: var(--status-good); }
.rows dd.bad { color: var(--status-danger); }

.btn {
  appearance: none;
  min-height: var(--tap);
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--tint-hover);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, opacity .12s ease;
}
.btn:hover { background: var(--tint-active); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

.btn-primary {
  background: var(--signal);
  border-color: transparent;
  color: #fff;
}
.btn-primary:hover { background: #63a8ff; }

.start-foot {
  margin-top: auto;
  padding-top: 8px;
  color: var(--ink-faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ─── Просмотр ──────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding:
    calc(8px + var(--safe-top))
    calc(12px + var(--safe-right))
    8px
    calc(12px + var(--safe-left));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  appearance: none;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--tint-hover); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.viewer-brand {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/*
  Служебные элементы правого края верхней строки. Название Vidi остаётся
  видимым в левой части даже на узком экране.
*/
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.topbar-right .version { flex: none; }

.planes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));
}

/* Ряд вкладок — тот же плавающий тулбар системы: стекло, форма пилюли,
   внутри круглые кнопки. Собран по веб-демо, где он уже проверен на телефоне. */
.planes { position: relative; }
.planes-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  max-width: 100%;
  overflow: hidden;
}

.plane-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.plane-tab .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--plane, var(--plane-neutral));
}
.plane-tab:hover { color: var(--ink); background: var(--tint-hover); }
.plane-tab.is-active { background: var(--tint-active); color: var(--ink); }

/*
  Круглый знак «!»: имя пациента и сведения открываются нажатием. Жёлтый —
  только когда есть о чём предупредить.
*/
.info-btn {
  appearance: none;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink-dim);
  cursor: pointer;
}
.info-mark { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1; }
.info-btn:hover { color: var(--ink); }
.info-btn.is-warn { color: #F6D686; border-color: rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .12); }

.notes-patient { font-weight: 700; color: var(--ink); }

/* Подсказка «?»: значок кнопки слева, что она делает — справа. */
.help-card {
  max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-head {
  position: sticky;
  top: -18px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px -8px -6px 0;
  padding: 10px 0 6px;
  background: var(--surface-2);
}
.sheet-x {
  appearance: none;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.sheet-x:hover { background: var(--tint-hover); color: var(--ink); }
.sheet-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.help-row { display: grid; grid-template-columns: var(--tap) 1fr; gap: 12px; align-items: center; }
.help-ico {
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-bg);
  color: var(--ink);
}
.help-ico.is-danger { color: var(--status-danger); }
.help-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.help-row b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.help-text { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 14px; line-height: 1.4; }
.help-card .hint a { color: var(--signal); }

.grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--line-strong);
}

.pane {
  position: relative;
  overflow: hidden;
  background: var(--void);
  touch-action: none; /* жесты обрабатываем сами, иначе Safari тянет страницу */
}

.pane-canvas { display: block; width: 100%; height: 100%; }

/*
  Чип плоскости из дизайн-системы: точка цветом проекции, название латиницей,
  положение среза в миллиметрах. Латиница не прихоть — Axial/Sagittal/Coronal
  это адресация, одинаковая во всех вьюверах и в подписях к снимкам.

  Стекло, а не тень под текстом: подпись плавает над снимком, а всё плавающее
  в Vidi стеклянное — одним рецептом.
*/
.plane-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}
.plane-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--plane, var(--plane-neutral));
}
.plane-chip b { color: var(--ink); font-weight: 500; }
/* Единица тише числа. */
.plane-chip .unit { color: var(--ink-faint); margin-left: 3px; }

/* Метки сторон пациента. Врач по ним понимает, где правая сторона. */
.mark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-dim);
  pointer-events: none;
}
.mark-l { left: 8px; }
.mark-r { right: 8px; }

/* Смещена ниже центра: по центру она ложится ровно на перекрестие и закрывает
   его горизонтальный штрих — именно по нему видно, верно ли посчитан canvas. */
.pane-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 22%;
  color: var(--ink-faint);
  font-size: 13px;
  pointer-events: none;
}

.pane-switch {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pane-switch:disabled { opacity: .4; cursor: default; }

/* Ракурсы объёмного вида. Слева внизу — справа стоит переключатель панели,
   а шкалы в этой панели нет, поэтому угол свободен. */
.views {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.view-btn {
  appearance: none;
  min-height: 28px;
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.view-btn:hover { color: var(--ink); background: var(--tint-hover); }
.view-btn.is-active { color: var(--ink); background: var(--tint-active); }

.toolbar {
  display: flex;
  justify-content: center;
  padding: 8px calc(8px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));
}

/* Пилюля тулбара. Подписей под значками нет — как в демо: семь подписей в
   ряд на телефоне теснятся и всё равно обрезаются. */
.toolbar-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.toolbar-pill::-webkit-scrollbar { display: none; }

.tool {
  appearance: none;
  position: relative;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.tool:hover:not(:disabled) { background: var(--tint-hover); color: var(--ink); }
.tool:active:not(:disabled) { transform: scale(.9); }
/* Активный инструмент — круглая заливка акцентом, значок белый. */
.tool.is-active { background: var(--signal); color: #fff; }
.tool:disabled { opacity: .38; cursor: default; background: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Значение слоя — цифрой в углу кнопки, раз подписи нет. */
.tool .mm {
  position: absolute;
  right: 3px;
  bottom: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1;
  color: var(--ink-faint);
}
.tool.is-active .mm { color: #fff; }
/* Удаление разметки: обводка красным, заливки нет даже во взведённом виде —
   по дизайн-системе разрушительное действие никогда не заливается. */
.tool-danger { color: var(--status-danger); }
.tool-danger.is-armed {
  color: var(--status-danger);
  box-shadow: inset 0 0 0 1.5px var(--status-danger);
  background: rgba(255, 92, 92, .10);
}
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/*
  Метка оговорки в верхней панели: бейдж дизайн-системы — моноширинный, pill,
  заливка 14% от своего цвета. Нейтральная, пока говорить не о чем; жёлтая,
  когда объём ужат или геометрии нет. Снимка она не касается: подпись поверх
  анатомии закрывала на телефоне половину экрана.
*/
.chip-btn {
  appearance: none;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--tint-hover);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.chip-btn:hover { background: var(--tint-active); color: var(--ink); }
.chip-btn.is-warn { background: rgba(242, 193, 78, .14); color: #F6D686; }

/* ─── Формы ─────────────────────────────────────────────────────────────── */

.center-note {
  margin: auto;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.field { display: grid; gap: 6px; }
.field-name { color: var(--ink-dim); font-size: 14px; }

.field input {
  appearance: none;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(0, 0, 0, .25);
  color: var(--ink);
  /* 16px обязателен: при меньшем размере Safari на iPhone масштабирует всю
     страницу, как только палец попадает в поле. */
  font: inherit;
  font-size: 16px;
}
.field input:focus {
  outline: none;
  border-color: var(--signal);
}
.field input::placeholder { color: var(--ink-faint); }

/* Разрядка и заглавные — только для набранного кода: подсказка «8 символов»
   от них превращалась в «8 СИМВОЛОВ» и читалась как часть кода. */
#login-code { letter-spacing: .12em; text-transform: uppercase; }
#login-code::placeholder { letter-spacing: normal; text-transform: none; }

.agree {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink-dim);
  font-size: 14px;
  cursor: pointer;
}
.agree input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--signal);
}
.agree a { color: var(--signal); }

.notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--tint-hover);
  color: var(--ink);
  font-size: 14px;
}

/* ─── Распаковка ────────────────────────────────────────────────────────── */

/* Ширина — за вычетом полей .center-note (2 × 24). При 92vw карточка с полями
   была шире экрана уже 413 pt, auto-поля схлопывались, и она стояла на 8 pt
   правее центра (iPhone 16 Pro, 402 pt). */
.open-card { width: min(calc(100vw - 48px), 380px); text-align: left; }

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--tint-active);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--signal);
  transition: width .25s linear;
}

/* Пока архив не прочитан, доля неизвестна: показываем движение, а не ложные
   проценты — врач по ним решает, ждать ему или устройство зависло. */
.bar-fill.is-unknown {
  width: 35%;
  animation: bar-slide 1.4s ease-in-out infinite;
}

@keyframes bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(286%); }
}

/* ─── Список серий ──────────────────────────────────────────────────────── */

.series { display: grid; gap: 8px; }

.series-item {
  appearance: none;
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.series-item:hover { background: var(--tint-hover); }
.series-item.is-chosen {
  border-color: var(--signal);
  background: rgba(79, 156, 255, .14);
}

.series-name { font-weight: 600; }
.series-meta { color: var(--ink-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.series-warn { color: var(--amber); font-size: 13px; }

/* ─── Поверх всего: место занято, ошибка ────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sheet-card {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
}

/* ─── Узкий экран: одна панель + переключатель ──────────────────────────── */

@media (min-width: 721px) {
  /* Четыре панели видны сразу — переключатель проекций не нужен. */
  .planes { display: none; }
}

@media (max-width: 720px) {

  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
  }

  /* Панели остаются в разметке: у каждой свой canvas и своё состояние,
     переключение не пересоздаёт их. */
  .pane { display: none; }
  .pane.is-active { display: block; }
}

/* Семь кнопок в ряд на телефоне: подписи под значками сжимаются, но не
   переносятся — перенос поднимает панель и съедает высоту снимка. */
/* На узком телефоне пилюля прокручивается по горизонтали, сохраняя цели 44px. */
@media (max-width: 420px) {
  .toolbar, .planes { padding-left: calc(6px + var(--safe-left)); padding-right: calc(6px + var(--safe-right)); }
  /* Кнопку не мельчим: 44px — это палец. Семь кругов на 390px помещаются. */
  .plane-tab { padding: 0 9px; font-size: 12px; gap: 5px; }
  .view-btn { padding: 4px 9px; font-size: 11px; }
}

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