/* Телефон: главный экран — вкладки «Запись · Приёмы» (views/records.js::mountPhone). Эскиз
   design/mobile-tabs2/mobile-tabs2.html (утверждён владельцем 06.10), решение docs/decisions/2026-10-05-mobile-two-tabs.md.
   Значения — из эскиза один в один; цвета — docs/design-system.md. Только до 999 px (порог экрана записи): на компьютере
   .screen-main не бывает. Шапка сайта — app.css (.site-header), одна на всех экранах телефона. */
@media screen and (max-width: 999px) {
  .screen-main { --m-accent: #2563eb; --m-accent-dark: #174dc6; --m-ink: #202735; --m-muted: #596272; --m-line: #d7dce4;
    --m-ease: cubic-bezier(.2, .7, .2, 1);
    display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(76px + env(safe-area-inset-bottom));
    box-sizing: border-box; font-family: DenManrope, "Segoe UI", Arial, sans-serif; color: var(--m-ink); background: #f0f2f5; }
  .screen-main.tab-record { background: #fff; }
  /* Диктофон статичен (эскиз: html/body.recorder-static, .app высотой в экран) — правки владельца 06.10 и 07.10.
     Экран — не «100dvh», а body с position: fixed; inset: 0: размер даёт сама видимая область (у Chrome/Safari iOS
     dvh и адресная строка расходятся, документ сдвигался вверх, под панелью вкладок оставалась серая полоса —
     чат 2-52-348), прокручивать нечего. */
  html.recorder-static { height: 100%; overflow: hidden; overscroll-behavior: none; background: #fff; }
  body.recorder-static { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden;
    overscroll-behavior: none; background: #fff; }
  .recorder-static #app { height: 100%; }
  .recorder-static .screen-main.tab-record { height: 100%; min-height: 0; padding-bottom: 0; overflow: hidden; }
  .recorder-static .screen-main.tab-record .main-record-wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .recorder-static .screen-main.tab-record .main-record-wrap,
  .recorder-static .screen-main.tab-record #main-record { flex: 1 1 auto; min-height: 0; }
  .screen-main *, .screen-main *::before, .screen-main *::after { box-sizing: border-box; }
  .screen-main > .site-header { display: block; }
  .screen-main [hidden] { display: none !important; }

  /* Нижняя панель (эскиз .bottom-tabs): две кнопки по 61 px, закреплена внизу */
  .screen-main .bottom-tabs { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; display: grid;
    grid-template-columns: 1fr 1fr; background: #fff; border-top: 1px solid #d7dce4;
    padding: 7px 16px calc(7px + env(safe-area-inset-bottom)); font-family: DenManrope, "Segoe UI", Arial, sans-serif; }
  .screen-main .bottom-tabs button { position: relative; border: 0; background: transparent; border-radius: 8px; min-height: 61px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 500; font-size: 13px; line-height: 1.5;
    font-family: inherit; color: #596272; cursor: pointer; touch-action: manipulation; }
  .screen-main .bottom-tabs svg { width: 24px; height: 24px; flex: none; }
  .screen-main .bottom-tabs button[aria-selected=true] { color: #2563eb; background: #edf2ff; }
  .screen-main .bottom-tabs button:active { background: #e8ebf0; }
  .screen-main .tab-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; border: 2px solid #fff; background: var(--m-accent); color: #fff; font-size: 11px; font-weight: 600;
    line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; animation: main-pop .4s var(--m-ease) .3s both; }
  .screen-main .main-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    background: #202735; color: #fff; border-radius: 10px; padding: 10px 16px; font-size: 14px; z-index: 40;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .2); white-space: nowrap; }

  /* «Запись»: престарт live.js::mountNew в виде диктофона (эскиз S.view==='pre'): дата слева вверху, «Начать запись»
     на всю ширину, ниже «Добавить файл» и «052/у · Шаблон» в одну строку; блок чуть выше середины. Заголовка
     «Новая запись», дорожки и счётчика нет. Своя шапка престарта скрыта — шапка одна, у экрана. */
  .screen-main .main-record-wrap { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; background: #fff; }
  .screen-main .pre-head { position: absolute; z-index: 6; top: 16px; left: 20px; } /* выше .audio-panel престарта (record.css, z-index 5) */
  .screen-main .pre-head p { margin: 0; font-size: 14px; line-height: 1.5; color: #596272; }
  .screen-main #main-record { flex: 1 0 auto; display: flex; flex-direction: column; }
  .screen-main #main-record .record-screen, .screen-main #main-record .record-screen.no-review { flex: 1 0 auto; display: flex;
    flex-direction: column; height: auto; min-height: 0; padding: 0; background: #fff; }
  .screen-main #main-record .record-screen > .site-header, .screen-main #main-record .page-header,
  .screen-main #main-record .sidebar, .screen-main #main-record .timecode, .screen-main #main-record .wave-wrap,
  .screen-main #main-record .start-caption { display: none; }
  .screen-main #main-record .record-screen .audio-panel { flex: 1 0 auto; display: flex; flex-direction: column; margin: 0;
    padding: 0 20px 56px; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
  .screen-main #main-record .record-screen .audio-panel > .audio-controls { display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px 8px; flex: none; height: auto; margin: auto 0; align-items: stretch; }
  .screen-main #main-record .start-recorder, .screen-main #main-record .start-actions { display: contents; }
  .screen-main #main-record .start-actions::after { display: none; }
  /* .btn эскиза: 44 px, радиус 8, 14/500; .btn.primary.start — 52 px, 15 px, радиус 10, значок 20 */
  .screen-main #main-record .record-screen #start-record { position: static; grid-column: 1 / -1; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px; width: auto; height: auto; min-height: 52px; padding: 8px 14px;
    border: 1px solid #2563eb; border-radius: 10px; background: #2563eb; color: #fff; font-weight: 500; font-size: 15px; line-height: 1.5;
    font-family: inherit; white-space: nowrap; box-shadow: inset 0 1px 0 #ffffff25, 0 2px 3px #174dc618; outline-offset: 2px; }
  .screen-main #main-record .record-screen #start-record:active:not(:disabled) { background: #174dc6; border-color: #174dc6; }
  .screen-main #main-record .record-screen #start-record:hover:not(:disabled) { background: #2563eb; }
  .screen-main #main-record .record-screen #start-record:focus-visible { outline-color: #2563eb; }
  .screen-main #main-record .record-screen #start-record::before { content: ""; position: static; inset: auto; flex: none;
    width: 20px; height: 20px; border-radius: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205a3%203%200%200%201%203%20-3a3%203%200%200%201%203%203v5a3%203%200%200%201%20-3%203a3%203%200%200%201%20-3%20-3zM5%2010a7%207%200%200%200%2014%200M8%2021h8M12%2017v4%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205a3%203%200%200%201%203%20-3a3%203%200%200%201%203%203v5a3%203%200%200%201%20-3%203a3%203%200%200%201%20-3%20-3zM5%2010a7%207%200%200%200%2014%200M8%2021h8M12%2017v4%22/%3E%3C/svg%3E") center / contain no-repeat; }
  .screen-main #main-record .record-screen #start-record > .icon { display: none; }
  .screen-main #main-record .record-screen #start-record > span { position: static; width: auto; height: auto; overflow: visible;
    clip: auto; white-space: nowrap; }
  .screen-main #main-record .live-template-slot { display: block; order: 2; min-width: 0; }
  .screen-main #main-record .record-screen #start-file,
  .screen-main #main-record .record-screen .start-actions #start-file,
  .screen-main #main-record .record-screen .start-actions #choose-template { display: inline-flex; align-items: center;
    justify-content: center; width: 100%; min-width: 0; height: auto; min-height: 44px; margin: 0; padding: 8px 14px;
    border: 1px solid #cbd2dd; border-radius: 8px; background: #fff; color: #43516a; font-weight: 500; font-size: 14px; line-height: 1.5;
    font-family: inherit; white-space: nowrap; box-shadow: none; }
  .screen-main #main-record .record-screen .start-actions #start-file { order: 1; gap: 8px; }
  .screen-main #main-record .record-screen .start-actions #start-file .icon { width: 18px; height: 18px; flex: none; }
  .screen-main #main-record .record-screen .start-actions #start-file:active:not(:disabled),
  .screen-main #main-record .record-screen .start-actions #choose-template:active:not(:disabled) { background: #f7f8fa;
    border-color: #9ba7b9; }
  .screen-main #main-record .record-screen .start-actions #start-file:hover:not(:disabled),
  .screen-main #main-record .record-screen .start-actions #choose-template:hover:not(:disabled) { background: #fff; }
  /* «052/у · Шаблон» и стрелка (эскиз .btn.tpl): подпись шаблона — из template.js, остальное дописывает стиль */
  /* Длинное название («Краткое содержание»): подпись с «· Шаблон» сокращается многоточием, стрелка видна всегда */
  .screen-main #main-record .record-screen .start-actions #choose-template { gap: 0; }
  .screen-main #main-record .record-screen .start-actions #choose-template::after { content: none; }
  .screen-main #main-record .record-screen .start-actions #choose-template > .tpl-label { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .screen-main #main-record .record-screen .start-actions #choose-template > .tpl-label::after { content: "\00a0·\00a0Шаблон"; }
  .screen-main #main-record .record-screen .start-actions #choose-template::before { content: ""; order: 1; flex: none;
    width: 16px; height: 16px; margin-left: 6px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22/%3E%3C/svg%3E") center / contain no-repeat; }
  .screen-main #main-record .record-screen .workspace { order: 2; flex: none; border: 0; background: #fff; }
  .screen-main #main-record .record-screen .document-content { padding: 0 20px; }
  .screen-main #main-record #start-file-error { width: auto; margin: 0 0 16px; }

  /* «Приёмы» (эскиз #visit-screen) */
  .screen-main #visit-screen { display: block; flex: 1 0 auto; width: 100%; margin: 0; padding: 22px 16px 24px; color: #202735;
    background: #f0f2f5; font-size: 14px; line-height: 1.5; }
  .screen-main #visit-screen h1, .screen-main #visit-screen h2, .screen-main #visit-screen h3,
  .screen-main #visit-screen p { margin: 0; font-weight: 400; }
  .screen-main .visit-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
  .screen-main #visit-screen h1 { font-size: 28px; line-height: 1.5; font-weight: 500; letter-spacing: -.7px; }
  .screen-main .today-control { height: 44px; border: 0; border-radius: 8px; padding: 8px 12px; background: #fff; color: #2563eb;
    font-weight: 500; font-size: 14px; line-height: 1.5; font-family: inherit; cursor: pointer; }
  .screen-main #visit-screen .month { font-size: 15px; color: #596272; margin-bottom: 12px; }
  .screen-main .days { display: flex; gap: 7px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 4px; overscroll-behavior-x: contain; }
  .screen-main .days::-webkit-scrollbar { display: none; }
  .screen-main .day-button { flex: 0 0 48px; height: 70px; scroll-snap-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 3px; justify-content: center; border: 1px solid transparent; background: transparent;
    border-radius: 10px; color: #596272; padding: 6px 0; font-weight: 400; font-size: 14px; line-height: 1.5; font-family: inherit; cursor: pointer; }
  .screen-main .day-button .day-num { font-size: 20px; line-height: 1.3; color: #202735; }
  .screen-main .day-button .day-name { font-size: 12px; }
  .screen-main .day-button[aria-pressed=true] { background: #2563eb; color: #fff; }
  .screen-main .day-button[aria-pressed=true] .day-num { color: #fff; }
  .screen-main .day-button.today:not([aria-pressed=true]) { border-color: #cbd2dd; background: #fff; color: #2563eb; }
  .screen-main .day-button.today:not([aria-pressed=true]) .day-num { color: #2563eb; }
  .screen-main .day-indicator { height: 4px; width: 4px; background: currentColor; border-radius: 50%; margin-top: 2px; }
  .screen-main .day-indicator.none { visibility: hidden; }
  .screen-main .tools { margin-top: 19px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .screen-main .tools .search-field { grid-column: 1 / -1; }
  .screen-main .tools label { display: block; font-size: 12px; color: #596272; margin-bottom: 5px; }
  .screen-main .search-input { position: relative; }
  .screen-main .search-input svg { position: absolute; left: 12px; top: 13px; color: #596272; width: 18px; height: 18px;
    pointer-events: none; }
  .screen-main .tools input, .screen-main .tools select { font: 400 14px/1.5 DenManrope, "Segoe UI", Arial, sans-serif; height: 44px;
    width: 100%; min-width: 0; border: 1px solid #cbd2dd; border-radius: 8px; background: #fff; color: #202735; padding: 9px 10px; margin: 0; }
  .screen-main .tools input { padding-left: 39px; padding-right: 34px; font-size: 16px; }
  .screen-main .tools input::placeholder { color: #596272; font-size: 14px; opacity: 1; }
  .screen-main .tools input:focus-visible, .screen-main .tools select:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .screen-main .section-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 20px 0 12px; }
  .screen-main #visit-screen .section-line h2 { font-size: 16px; font-weight: 500; }
  .screen-main .wait-count { font-size: 12px; color: #8c5c15; white-space: nowrap; }
  .screen-main .card-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 9px; }
  .screen-main .visit-card { position: relative; border: 1px solid #d7dce4; border-radius: 9px; background: #fff; padding: 10px 12px; min-width: 0; }
  .screen-main .visit-card.wait { border-left: 3px solid #daa341; padding-left: 10px; }
  .screen-main .visit-card:has(a:focus-visible) { outline: 3px solid #2563eb; outline-offset: 2px; }
  .screen-main .visit-card a { color: inherit; text-decoration: none; }
  .screen-main .visit-card a:focus-visible { outline: 0; }
  .screen-main .visit-card a::after { position: absolute; inset: 0; content: ""; border-radius: 9px; }
  .screen-main .visit-card:active { background: #f7f8fa; }
  .screen-main .visit-card.is-new { animation: main-fresh 3.2s ease-out; }
  .screen-main .card-meta { display: flex; align-items: baseline; gap: 9px; color: #596272; font-size: 12px; font-variant-numeric: tabular-nums; }
  .screen-main .card-meta time { font-size: 14px; font-weight: 500; color: #202735; }
  .screen-main .card-duration { margin-left: auto; white-space: nowrap; }
  .screen-main #visit-screen .visit-card h3 { font-size: 15px; font-weight: 500; line-height: 1.3; margin: 5px 0 4px; }
  .screen-main .identity { display: flex; flex-wrap: wrap; gap: 0 10px; color: #596272; font-size: 12px; line-height: 1.5; }
  .screen-main .identity span { white-space: nowrap; }
  .screen-main #visit-screen .card-note { font-size: 12px; color: #596272; margin-top: 5px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .screen-main .card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
  .screen-main .status-tag { font-size: 12px; font-weight: 400; border: 1px solid #e8d2a5; border-radius: 6px; background: #fff7e8;
    color: #8c5c15; padding: 3px 6px; }
  .screen-main .status-tag.done { background: #edf8f2; border-color: #badbca; color: #187452; }
  /* Статусы, которых в эскизе нет (идёт запись, обработка, ошибка): та же метка в цветах design-system.md */
  .screen-main .status-tag.work { background: #edf2ff; border-color: #c8d6fb; color: #174dc6; }
  .screen-main .status-tag.live, .screen-main .status-tag.error { background: #fdf0f2; border-color: #f0c4cb; color: #c53046; }
  .screen-main .card-source { font-size: 12px; color: #596272; }
  /* ход загрузки файла на карточке — как в строке прежнего списка телефона (.rd-status-detail, .rd-small);
     кнопки над ссылкой-карточкой (a::after) */
  .screen-main .card-upload { margin-top: 6px; font-size: 12px; color: #596272; overflow-wrap: anywhere; }
  .screen-main .card-upload .rd-button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    width: max-content; min-height: 32px; margin-top: 6px; padding: 5px 10px; border: 1px solid #9fb7d8; border-radius: 6px;
    background: #fff; color: var(--side-ink); font: inherit; font-size: 12px; cursor: pointer; overflow: hidden; }
  .screen-main .card-upload .rd-resume-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .screen-main .empty-day { padding: 86px 24px 32px; text-align: center; color: #596272; }
  .screen-main #visit-screen .empty-day h2 { font-size: 20px; font-weight: 500; color: #202735; margin-bottom: 10px; }
  .screen-main #visit-screen .empty-day p { font-size: 14px; line-height: 1.65; max-width: 260px; margin: auto; }
  .screen-main .clear-search { display: block; margin: 18px auto 0; min-height: 44px; padding: 8px 16px; color: #2563eb;
    background: #fff; border: 1px solid #cbd2dd; border-radius: 8px; font-weight: 400; font-size: 14px; line-height: 1.5; font-family: inherit; cursor: pointer; }
  .screen-main #visit-screen .alerts:not(:empty) { margin-bottom: 12px; }
}
/* Компьютер от 1000 px: главный экран — полоса записи над «Записями» (views/records.js::mountStrip, .has-strip).
   Эскиз design/desktop-main/main-4.html, числа — design/desktop-main/src/build-4.cjs (.ctl, .strip, .ctl .btn,
   View Transitions); решение docs/decisions/2026-10-05-mobile-two-tabs.md, «Компьютер». Полоса — престарт
   live.js::mountNew: его заголовок, поля пациента, счётчик и дорожка скрыты; кнопки — как на экране готовой записи
   (40 px, радиус 8, 13 px / 500). Экран прокручивается целиком: «Сегодня» растёт со списком, «Неделя» — прежней высоты. */
@media screen and (min-width: 1000px) {
  .screen-records.has-strip { height: auto; min-height: 100dvh; }
  .screen-records.has-strip .rd-today-view { height: auto; min-height: 0; }
  /* «Неделя» прежней высоты: календарь делит окно под шапкой, как без полосы; страница длиннее окна на полосу
     (строка 100 + поля 4 + 4 + линия 1 = 109 px) и прокручивается только на неё */
  .screen-records.has-strip:has(.rdw-calendar) { height: calc(100dvh + 109px); }
  .screen-records.has-strip .rd-tools[hidden], .screen-records.has-strip .rd-summary[hidden] { display: none; }
  /* пустой день: карточка «Записей пока нет» сразу под строкой даты (эскиз main-4, .empty), а не по центру высоты экрана */
  .screen-records.has-strip .rd-today-view .rd-empty { margin-top: 0; }
  .screen-records .main-strip { flex: none; background: #fff; border-bottom: 1px solid var(--line); padding: 4px 36px;
    font: 400 14px/1.5 var(--font); color: var(--ink); }
  .screen-records .main-strip > .record-prestart { display: block; background: #fff; }
  .screen-records .main-strip .record-screen, .screen-records .main-strip .record-screen.no-review { display: block; height: auto;
    min-height: 0; padding: 0; background: #fff; }
  .screen-records .main-strip .sidebar, .screen-records .main-strip .page-header, .screen-records .main-strip .timecode,
  .screen-records .main-strip .wave-wrap, .screen-records .main-strip .start-caption,
  .screen-records .main-strip #panel-summary { display: none; }
  .screen-records .main-strip .record-screen .audio-panel { display: block; margin: 0; padding: 0; border: 0; border-radius: 0;
    box-shadow: none; background: none; }
  /* .strip эскиза: строка 100 px, промежуток 24 px; .vsep — 1×48 px, поля 8 px */
  .screen-records .main-strip .record-screen .audio-controls { display: flex; align-items: center; gap: 24px; height: 100px; }
  .screen-records .main-strip .start-recorder, .screen-records .main-strip .start-actions { display: contents; }
  .screen-records .main-strip .start-actions::before { content: ""; order: 1; flex: none; width: 1px; height: 48px;
    margin: 0 8px; background: var(--line); }
  .screen-records .main-strip .start-actions::after { display: none; }
  .screen-records .main-strip .live-template-slot { display: block; order: 3; }
  .screen-records .main-strip #start-record, .screen-records .main-strip #start-file,
  .screen-records .main-strip .live-template-slot #choose-template { position: static; flex: none; display: inline-flex;
    align-items: center; justify-content: center; gap: 8px; width: auto; height: 40px; min-height: 40px; margin: 0;
    padding: 8px 14px; border: 1px solid #cbd2dd; border-radius: 8px; background: #fff; color: #43516a; font-family: inherit;
    font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; box-shadow: none; }
  .screen-records .main-strip #start-file { order: 2; }
  .screen-records .main-strip #start-file .icon { width: 18px; height: 18px; flex: none; }
  .screen-records .main-strip #start-file:hover:not(:disabled),
  .screen-records .main-strip .live-template-slot #choose-template:hover:not(:disabled) { border-color: #9ba7b9; background: #f7f9fc; }
  /* .ctl .btn.primary: 9px 17px, синяя, тень; значок микрофона 18 px вместо точки записи */
  .screen-records .main-strip #start-record { padding: 9px 17px; border-color: var(--accent); background: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 #ffffff25, 0 2px 3px #174dc618; }
  .screen-records .main-strip #start-record:hover:not(:disabled) { border-color: var(--accent-dark); background: var(--accent-dark); }
  .screen-records .main-strip #start-record::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205a3%203%200%200%201%203%20-3a3%203%200%200%201%203%203v5a3%203%200%200%201%20-3%203a3%203%200%200%201%20-3%20-3zM5%2010a7%207%200%200%200%2014%200M8%2021h8M12%2017v4%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205a3%203%200%200%201%203%20-3a3%203%200%200%201%203%203v5a3%203%200%200%201%20-3%203a3%203%200%200%201%20-3%20-3zM5%2010a7%207%200%200%200%2014%200M8%2021h8M12%2017v4%22/%3E%3C/svg%3E") center / contain no-repeat; }
  .screen-records .main-strip #start-record > .icon { display: none; }
  .screen-records .main-strip #start-record > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  /* «052/у · Сменить шаблон» и стрелка (.ctl .btn.tpl, значок 16 px) */
  .screen-records .main-strip .live-template-slot #choose-template { gap: 0; }
  .screen-records .main-strip .live-template-slot #choose-template::after { content: "\00a0·\00a0Сменить шаблон"; margin: 0; }
  .screen-records .main-strip .live-template-slot #choose-template::before { content: ""; order: 1; flex: none; width: 16px;
    height: 16px; margin-left: 8px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22/%3E%3C/svg%3E") center / contain no-repeat; }
  /* сообщения престарта (микрофон, файл) — под полосой */
  #app.screen-records .main-strip .workspace { display: block; min-height: 0; margin: 0; padding: 0; border: 0; background: none;
    box-shadow: none; }
  .screen-records .main-strip .document-content { padding: 0; }
  .screen-records .main-strip .alerts:not(:empty) { margin: 0 0 12px; }
  .screen-records .main-strip #start-file-error { width: auto; max-width: 640px; margin: 0 0 12px; }

  /* Перестройка «Начать запись» → идущая запись (View Transitions, 210 мс; имена rec-* — общие с экраном записи) */
  .screen-records .main-strip { view-transition-name: rec-ctl; }
  .screen-records .main-strip #start-record { view-transition-name: rec-main; }
  .screen-records .main-strip .live-template-slot #choose-template { view-transition-name: rec-tpl; }
  .screen-records .main-strip #start-file { view-transition-name: rec-file; }
  .screen-records.has-strip .rd-main { view-transition-name: rec-list; }
  ::view-transition-group(*) { animation-duration: .21s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .21s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  ::view-transition-new(rec-cancel):only-child, ::view-transition-new(rec-finish):only-child,
  ::view-transition-new(rec-actions):only-child, ::view-transition-new(rec-review):only-child {
    animation: vt-from-right .21s cubic-bezier(.2, .7, .2, 1) both; }
  ::view-transition-new(rec-finish):only-child { animation-delay: .02s; }
  ::view-transition-old(rec-cancel):only-child, ::view-transition-old(rec-finish):only-child,
  ::view-transition-old(rec-actions):only-child, ::view-transition-old(rec-review):only-child { animation: vt-to-right .15s ease-in both; }
  ::view-transition-new(rec-timer):only-child, ::view-transition-new(rec-head):only-child {
    animation: vt-from-left .21s cubic-bezier(.2, .7, .2, 1) both; }
  ::view-transition-old(rec-timer):only-child, ::view-transition-old(rec-head):only-child { animation: vt-fade-out .125s ease-in both; }
  ::view-transition-new(rec-eq):only-child { animation: vt-grow .25s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left center; }
  ::view-transition-old(rec-eq):only-child { animation: vt-shrink .15s ease-in both; transform-origin: left center; }
  ::view-transition-new(rec-pside):only-child { animation: vt-from-left-far .225s cubic-bezier(.2, .7, .2, 1) .03s both; }
  ::view-transition-old(rec-pside):only-child { animation: vt-to-left-far .15s ease-in both; }
  ::view-transition-new(rec-work):only-child, ::view-transition-new(rec-list):only-child {
    animation: vt-rise .225s cubic-bezier(.2, .7, .2, 1) .04s both; }
  ::view-transition-old(rec-work):only-child, ::view-transition-old(rec-list):only-child { animation: vt-sink .13s ease-in both; }
  ::view-transition-old(rec-main) { animation: vt-fade-out .09s ease-in both; }
  ::view-transition-old(rec-main), ::view-transition-new(rec-main) { width: 100%; height: 100%; object-fit: contain; }
  @keyframes vt-from-right { from { opacity: 0; transform: translateX(48px); } }
  @keyframes vt-to-right { to { opacity: 0; transform: translateX(48px); } }
  @keyframes vt-from-left { from { opacity: 0; transform: translateX(-24px); } }
  @keyframes vt-from-left-far { from { opacity: 0; transform: translateX(-64px); } }
  @keyframes vt-to-left-far { to { opacity: 0; transform: translateX(-64px); } }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-grow { from { opacity: 0; transform: scaleX(.08); } }
  @keyframes vt-shrink { to { opacity: 0; transform: scaleX(.08); } }
  @keyframes vt-rise { from { opacity: 0; transform: translateY(56px); } }
  @keyframes vt-sink { to { opacity: 0; transform: translateY(56px); } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}
@keyframes main-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes main-fresh { from { background: #e4ecff; } to { background: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .screen-main .tab-badge, .screen-main .visit-card.is-new { animation: none !important; }
}
@media print { .screen-main .bottom-tabs, .screen-main .main-toast { display: none !important; } }