/* Дизайн-система Sfera — основа и компоненты (docs/dizajn-sistema/CLAUDE.md). Только значения набора tokens.css: числа здесь —
   0, 1, %, fr, ch и @media (тест test/design/ds.test.js). Порядок подключения: fonts.css → tokens.css → sfera.css → стили экрана.
   Имена — с приставкой sf-, чтобы не столкнуться со стилями экрана. Состояние — атрибутом (aria-pressed, aria-selected,
   aria-invalid, disabled), а не отдельным классом: так оно же доступно экранному диктору. */

/* ── Основа ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-head); letter-spacing: var(--track-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--line-w); }
a:hover { color: var(--accent-hover); }
[hidden] { display: none !important; }
::selection { background: var(--accent-soft); color: var(--accent-soft-ink); }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--line-w-2); box-shadow: 0 0 0 calc(var(--focus-w) + var(--line-w-2)) var(--focus-halo); }
.sf-sr { position: absolute; width: var(--line-w); height: var(--line-w); padding: 0; margin: calc(-1 * var(--line-w)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.sf-skip { position: absolute; left: var(--space-2); top: calc(-1 * var(--space-9)); z-index: var(--z-toast); display: inline-flex; align-items: center; min-height: var(--tap); background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.sf-skip:focus { top: var(--space-2); }
.sf-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r)); }
.sf-muted { color: var(--muted); }
.sf-small { font-size: var(--fs-xs); }
.sf-num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; }

/* ── Заголовки ──────────────────────────────────────────────── */
.sf-display { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.sf-h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.sf-h2 { font-size: var(--fs-2xl); }
.sf-h3 { font-size: var(--fs-xl); }
.sf-lead { font-size: var(--fs-lg); line-height: var(--lh-text); max-width: var(--measure); }

/* ── Значок ─────────────────────────────────────────────────── */
.sf-icon { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.sf-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.sf-mark { color: var(--accent); }

/* ── Кнопка: одна залитая на экран — главный шаг (SFR-0952) ─── */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--ctl-h); padding: 0 var(--space-5);
  border: var(--line-w) solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: var(--lh-head);
  text-align: center; text-wrap: balance; text-decoration: none; cursor: pointer; padding-block: var(--space-2);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sf-btn:active:not(:disabled) { transform: scale(.98); }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.sf-btn--primary { background: var(--accent); color: var(--accent-ink); }
.sf-btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-ink); }
.sf-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.sf-btn--secondary:hover:not(:disabled) { border-color: var(--ink-2); color: var(--ink); }
.sf-btn--ghost { background: transparent; color: var(--accent); padding-inline: var(--space-3); }
.sf-btn--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-hover); }
.sf-btn--on-photo { background: var(--photo-chip); color: var(--photo-chip-ink); }
.sf-btn--block { display: flex; width: 100%; }
.sf-btn--sm { min-height: var(--ctl-h-sm); padding-inline: var(--space-4); font-size: var(--fs-sm); }
.sf-btn--icon { position: relative; width: var(--tap); min-height: var(--tap); padding: 0; }

/* ── Чип: фильтр и выбор (aria-pressed / aria-selected) ─────── */
.sf-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4);
  border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.sf-chip:hover { border-color: var(--ink-2); }
a.sf-chip { text-decoration: none; }
a.sf-chip:hover { color: var(--ink-2); }
a.sf-chip[aria-current="page"]:hover { color: var(--paper); }
.sf-chip[aria-pressed="true"], .sf-chip[aria-selected="true"], .sf-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sf-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--space-1); }
.sf-chips::-webkit-scrollbar { display: none; }

/* ── Метка и состояние (цвет + значок или слово, SFR-0953) ──── */
.sf-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: var(--lh-head); }
.sf-badge--photo { background: var(--photo-chip); color: var(--photo-chip-ink); }
.sf-status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-strong); }
.sf-status--ok { color: var(--ok); }
.sf-status--warn { color: var(--warn); }
.sf-status--bad { color: var(--bad); }
.sf-note { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); }
.sf-note--ok { background: var(--ok-soft); color: var(--ok-ink); }
.sf-note--warn { background: var(--warn-soft); color: var(--warn-ink); }
.sf-note--bad { background: var(--bad-soft); color: var(--bad-ink); }

/* ── Карточка ───────────────────────────────────────────────── */
.sf-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-1); overflow: hidden; }
.sf-card--link { cursor: pointer; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
@media (hover: hover) { .sf-card--link:hover { box-shadow: var(--shadow-2); transform: translateY(calc(-1 * var(--space-1))); } }
.sf-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); flex: 1; }

/* ── Фото с паспарту — тонкая рамка внутри, память о рамах брошюры ─ */
.sf-media { position: relative; overflow: hidden; background: var(--surface-3); aspect-ratio: var(--ratio-card); }
.sf-media > img, .sf-media > picture > img, .sf-media > svg { width: 100%; height: 100%; object-fit: cover; }
.sf-media--framed::after { content: ""; position: absolute; inset: var(--frame-inset); border: var(--frame-line); pointer-events: none; }
.sf-media__tag { position: absolute; z-index: 1; left: var(--space-3); top: var(--space-3); }

/* ── Поля (подсказка у каждого поля — SFR-0948) ─────────────── */
.sf-field { display: grid; gap: var(--space-1); }
.sf-label { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--ink); }
.sf-hint { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-head); }
/* подсказка под полем не прилипает к нему: рамка фокуса поля её не задевает (проверка дизайна 22.10.2026) */
:is(.sf-input, .sf-select, .sf-textarea) + .sf-hint { margin-top: var(--space-1); }
.sf-input, .sf-select, .sf-textarea {
  width: 100%; min-height: var(--ctl-h); padding: 0 var(--space-4);
  border: var(--line-w) solid var(--field-line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: max(var(--fs-body), var(--fs-input-min));
  transition: border-color var(--dur-1) var(--ease-out);
}
.sf-textarea { padding-block: var(--space-3); min-height: calc(var(--ctl-h) * 2); resize: vertical; }
.sf-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - var(--space-5)) 50%, calc(100% - var(--space-4)) 50%; background-size: var(--space-1) var(--space-1); background-repeat: no-repeat; }
.sf-input:hover, .sf-select:hover, .sf-textarea:hover { border-color: var(--ink-2); }
.sf-input[aria-invalid="true"], .sf-select[aria-invalid="true"], .sf-textarea[aria-invalid="true"] { border-color: var(--bad); border-width: var(--line-w-2); }
.sf-check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; min-height: var(--tap); padding-block: var(--space-2); cursor: pointer; }
.sf-check input { width: var(--icon-lg); height: var(--icon-lg); margin: 0; accent-color: var(--accent); }

/* ── Счётчик − N + ───────────────────────────────────────────── */
.sf-stepper { display: inline-flex; align-items: center; border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); }
.sf-stepper button { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; color: var(--ink); }
.sf-stepper button:disabled { color: var(--faint); cursor: not-allowed; }
.sf-stepper output { min-width: 3ch; text-align: center; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }

/* ── Цена: подпись над суммой, сумма — текстом и размером, не цветом ─ */
.sf-price { display: grid; gap: 0; }
.sf-price__label { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-head); }
.sf-price__amount { font-family: var(--font-num); font-size: var(--fs-lg); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); line-height: var(--lh-head); }

/* ── Полоса сверху и полоса главного шага снизу ─────────────── */
.sf-bar { position: sticky; top: 0; z-index: var(--z-bar); background: var(--bar-bg); -webkit-backdrop-filter: saturate(1.4) blur(var(--blur)); backdrop-filter: saturate(1.4) blur(var(--blur)); border-bottom: var(--line-w) solid var(--line); padding-top: var(--safe-t); }
.sf-actionbar { position: sticky; bottom: 0; z-index: var(--z-actionbar); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-b)); background: var(--surface); border-top: var(--line-w) solid var(--line); box-shadow: var(--shadow-3); }

/* ── Лист: снизу на телефоне, по центру на широком ──────────── */
.sf-scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--scrim); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.sf-scrim[data-open] { opacity: 1; }
.sf-sheet {
  position: fixed; z-index: var(--z-sheet); left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-3);
  padding-bottom: var(--safe-b); transform: translateY(var(--space-9)); opacity: 0;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.sf-sheet[data-open] { transform: none; opacity: 1; }
@media (min-width: 900px) {
  .sf-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(var(--wrap-text), calc(100% - 2 * var(--space-6))); max-height: 88dvh; border-radius: var(--radius-lg); transform: translate(-50%, calc(-50% + var(--space-6))); }
  .sf-sheet[data-open] { transform: translate(-50%, -50%); }
}

/* ── Сообщение внизу ─────────────────────────────────────────── */
.sf-toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(var(--space-5) + var(--safe-b)); transform: translateX(-50%); max-width: calc(100% - 2 * var(--gutter)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: var(--fs-sm); box-shadow: var(--shadow-2); }

/* ── Ожидание — скелетом, не крутилкой (SFR-0957) ───────────── */
.sf-skeleton { background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: sf-shimmer var(--dur-shimmer) linear infinite; border-radius: var(--radius-sm); }
@keyframes sf-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sf-skeleton { animation: none; } }

/* ── Пустое состояние: что появится, почему пусто, первое действие (SFR-0956) ─ */
.sf-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: var(--line-w) dashed var(--line-strong); border-radius: var(--radius-md); }

/* ── Лента фото: прокрутка пальцем с привязкой ──────────────── */
.sf-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-gallery::-webkit-scrollbar { display: none; }
.sf-gallery > * { scroll-snap-align: start; }

/* ── Список «что увидим» ─────────────────────────────────────── */
.sf-list { list-style: none; display: grid; gap: var(--space-3); }
.sf-list > li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.sf-list > li > .sf-icon { margin-top: var(--space-1); color: var(--accent); }

/* ── Раскрывающийся ответ ────────────────────────────────────── */
.sf-details { border-bottom: var(--line-w) solid var(--line); }
.sf-details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--tap); padding-block: var(--space-3); cursor: pointer; list-style: none; font-weight: var(--fw-strong); }
.sf-details > summary::-webkit-details-marker { display: none; }
.sf-details > summary .sf-icon { transition: transform var(--dur-2) var(--ease-out); }
.sf-details[open] > summary .sf-icon { transform: rotate(180deg); }
.sf-details > :not(summary) { padding-bottom: var(--space-4); color: var(--ink-2); max-width: var(--measure); }

/* ── Появление: один раз, по месту, без беготни ─────────────── */
.sf-reveal { animation: sf-rise var(--dur-reveal) var(--ease-out) both; }
@keyframes sf-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }

/* ── Статус трансфера — один набор на все роли (coreapi/schema.sql). Значок + слово всегда; цвет — только
   у «ждёт действия» (жёлтый), «готово» (зелёный) и «проблема» (красный), остальное — нейтрально (SFR-0953, SFR-0496).
   Разметка: <span class="sf-trip" data-st="driver_en_route"><svg class="sf-icon">…#i-route</svg>Водитель в пути</span> ─ */
.sf-trip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: var(--lh-head); white-space: nowrap; }
.sf-trip[data-st="new"] { background: var(--warn-soft); color: var(--warn-ink); }
.sf-trip[data-st="completed"] { background: var(--ok-soft); color: var(--ok-ink); }
.sf-trip[data-st="no_show"] { background: var(--bad-soft); color: var(--bad-ink); }
.sf-trip[data-st="cancelled"] { background: transparent; color: var(--muted); text-decoration: line-through; text-decoration-thickness: var(--line-w); }
.sf-trip[data-st="driver_en_route"], .sf-trip[data-st="driver_on_site"], .sf-trip[data-st="passenger_on_board"] { background: var(--accent-soft); color: var(--accent-soft-ink); }

/* тревога диспетчеру: не принял, не выехал, рейс опаздывает, документ истекает — полоса слева + значок + слово */
.sf-alert { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.sf-alert--warn { background: var(--warn-soft); color: var(--warn-ink); box-shadow: inset var(--space-1) 0 0 var(--warn); }
.sf-alert--bad { background: var(--bad-soft); color: var(--bad-ink); box-shadow: inset var(--space-1) 0 0 var(--bad); }

/* нет связи — отметки копятся (водитель, SFR-0032 п. 3): полоса во всю ширину и счётчик неотправленного */
.sf-offline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--gutter); background: var(--ink); color: var(--paper); font-weight: var(--fw-strong); }
.sf-offline__count { min-width: var(--icon-lg); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }

/* учебная запись (SFR-0744): косые полосы на строке или карточке + метка словом */
.sf-training { background-image: repeating-linear-gradient(135deg, var(--training-a) 0 var(--space-2), var(--training-b) var(--space-2) var(--space-4)); }
.sf-training-mark { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: var(--line-w) dashed var(--training-ink); border-radius: var(--radius-xs); color: var(--training-ink); font-size: var(--fs-xs); font-weight: var(--fw-strong); }

/* госномер машины — крупно, как на табличке, для клиента у выхода */
.sf-plate { display: inline-block; padding: var(--space-1) var(--space-3); border: var(--line-w-2) solid var(--ink); border-radius: var(--radius-xs); background: var(--print-bg); color: var(--print-ink); font-family: var(--font-num); font-size: var(--fs-xl); font-weight: var(--fw-strong); letter-spacing: var(--track-plate); font-variant-numeric: tabular-nums; }

/* таблица рабочего экрана (диспетчер, отель на стойке): шапка липкая, цифры в столбик, строка — цель касания */
.sf-table-wrap { overflow-x: auto; border: var(--line-w) solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.sf-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); text-align: left; white-space: nowrap; }
.sf-table th, .sf-table td { padding: var(--space-2) var(--space-3); border-bottom: var(--line-w) solid var(--line); vertical-align: middle; }
.sf-table tr:last-child td { border-bottom: 0; }
.sf-table tbody tr:hover { background: var(--surface-2); }
.sf-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.sf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ══ Единый вид платформы — по доске диспетчера «Dispatcher — trasferimenti» (решение владельца 22.10.2026 02:00: «все,
   абсолютно все страницы должны быть такие»). Компоненты ниже вынесены из экрана диспетчера, чтобы каждая страница и каждая
   новая страница брала их, а не рисовала свои. Образец — docs/dizajn-sistema/obrazec.html, как подключить — README.md. ══ */

/* ── Шапка экрана: ✦ и название антиквой, вкладки-чипы, инструменты справа ─────────────────
   <header class="sf-bar"><div class="sf-appbar">
     <a class="sf-appbar__brand" href="…"><svg class="sf-icon sf-mark">…#i-star</svg><h1 class="sf-appbar__title">Название</h1></a>
     <nav class="sf-chips sf-appbar__tabs"><a class="sf-chip" aria-current="page">…</a> …</nav>
     <div class="sf-appbar__tools"> язык sf-lang, кнопки </div>
   </div></header>
   Телефон (< 900): одна строка не выше цели касания (SFR-1140) — вкладки уходят в нижние вкладки sf-tabbar, редкое — в лист
   «Ещё» (sf-menu); у .sf-wide-only на телефоне места нет, .sf-phone-only — только на телефоне. ── */
.sf-appbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--tap);
  padding: var(--space-2) max(var(--gutter), var(--safe-r)) var(--space-2) max(var(--gutter), var(--safe-l)); }
.sf-appbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink); text-decoration: none; }
a.sf-appbar__brand:hover { color: var(--ink); }
.sf-appbar__title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: var(--lh-head); letter-spacing: var(--track-display); }
.sf-appbar__tabs { flex: 1 1 auto; min-width: 0; }
.sf-appbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; margin-inline-start: auto; }
.sf-appbar__grow { flex: 1 1 0%; min-width: 0; }
/* экран узкой колонкой (кабинет партнёра, вопросы, заявка клиента): шапка той же ширины — край знака совпадает с краем содержимого */
.sf-appbar--narrow { max-width: var(--wrap-text); margin-inline: auto; }
/* экран в колонке sf-wrap (смены, люди, роботы, вход): шапка той же ширины, что и колонка */
.sf-appbar--wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
/* «назад» первой кнопкой-призраком: стрелка встаёт на край содержимого, а не на внутренний отступ кнопки */
@media (min-width: 900px) { .sf-appbar > .sf-btn--ghost:first-child { margin-inline-start: calc(-1 * var(--space-4)); } }
/* метки режима (учебная запись SFR-0744, пример ?mock=1) — строкой под шапкой: видны словами и на телефоне, шапка остаётся одной строкой */
.sf-marks { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l)); }
.sf-marks:not(:has(> :not([hidden]))) { display: none; }
.sf-appbar__brand > .sf-badge, .sf-appbar__brand > .sf-training-mark { flex: none; }
@media (max-width: 899px) {
  .sf-appbar { flex-wrap: nowrap; gap: var(--space-1); padding-block: 0; padding-inline: max(var(--space-2), var(--safe-l)) max(var(--space-2), var(--safe-r)); }
  .sf-appbar__brand { flex: 1 1 auto; }
  .sf-appbar > .sf-appbar__brand:first-child, .sf-appbar > [hidden]:first-child + .sf-appbar__brand { padding-inline-start: var(--space-2); }
  /* язык на телефоне — без рамки, как соседние кнопки-значки: пилюля во всю высоту строки смотрелась чужой */
  .sf-appbar .sf-lang { border-color: transparent; background: transparent; }
  .sf-appbar__title { font-size: var(--fs-lg); }
  .sf-appbar__tabs { display: none; }
  .sf-appbar__tools { flex-wrap: nowrap; gap: 0; }
  .sf-wide-only { display: none !important; }
}
@media (min-width: 900px) { .sf-phone-only { display: none !important; } }

/* язык — пилюля со значком глобуса, как у диспетчера; сам список — настоящий select (диктор, клавиатура) */
.sf-lang { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--ctl-h-sm);
  padding-inline: var(--space-3) 0; border: var(--line-w) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); }
.sf-lang:hover { border-color: var(--ink-2); }
.sf-lang > .sf-icon { width: var(--icon-sm); height: var(--icon-sm); }
.sf-lang > select { appearance: none; -webkit-appearance: none; min-height: var(--ctl-h-sm); padding: 0 var(--space-6) 0 var(--space-1); border: 0; border-radius: var(--radius-pill); background: transparent;
  font-size: max(var(--fs-sm), var(--fs-input-min)); font-weight: var(--fw-strong); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--space-4)) 50%, calc(100% - var(--space-3)) 50%; background-size: var(--space-1) var(--space-1); background-repeat: no-repeat; }
.sf-lang > select:focus-visible { outline: none; box-shadow: none; }
.sf-lang:focus-within { outline: var(--focus-w) solid var(--focus); outline-offset: var(--line-w-2); }
/* на телефоне язык — круглая кнопка-глобус (sf-lang--icon): тот же select лежит поверх прозрачным и открывает список системы */
@media (max-width: 899px) {
  .sf-lang--icon { justify-content: center; width: var(--tap); min-height: var(--tap); padding: 0; border-color: transparent; background: transparent; }
  .sf-lang--icon > .sf-icon { width: var(--icon-md); height: var(--icon-md); }
  .sf-lang--icon > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
}
/* текст, который на телефоне остаётся только для диктора: подпись у кнопки-значка («← Доска», «Учебные разговоры») */
@media (max-width: 899px) {
  .sf-sr-phone { position: absolute; width: var(--line-w); height: var(--line-w); padding: 0; margin: calc(-1 * var(--line-w)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sf-chip:has(> .sf-sr-phone), .sf-btn:has(> .sf-sr-phone) { justify-content: center; min-width: var(--tap); padding-inline: 0; }
  .sf-appbar .sf-chip:has(> .sf-sr-phone):not([aria-pressed="true"]) { border-color: transparent; background: transparent; }
}

/* число на кнопке или вкладке: входящие, непрочитанные */
.sf-count { display: inline-grid; place-items: center; min-width: var(--icon-md); height: var(--icon-md); padding: 0 var(--space-1); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--paper); font-family: var(--font-num); font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: 1; font-variant-numeric: tabular-nums; }
.sf-count--urgent { background: var(--bad); color: var(--surface); }
.sf-btn--icon > .sf-count, .sf-tabbar__tab > .sf-count { position: absolute; top: var(--space-1); inset-inline-end: var(--space-1); }

/* ── Панель — карточка рабочего экрана: белая, тонкая рамка, без тени (карточка заказа у диспетчера) ── */
.sf-panel { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--radius-md); }
@media (min-width: 600px) { .sf-panel--roomy { padding: var(--space-5); gap: var(--space-4); } }
.sf-section-title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-text); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: 0; }

/* ── Нижние вкладки телефона: виды под большим пальцем, посередине главный шаг (заявка #582 п. 1) ──────────
   <nav class="sf-tabbar"><a class="sf-tabbar__tab" aria-current="page">значок<span class="sf-tabbar__label">День</span></a> …
     <button class="sf-tabbar__main"><span class="sf-tabbar__plus">+</span><span class="sf-tabbar__label">Новый</span></button> …</nav>
   На <body> — атрибут data-tabbar: содержимое и сообщение внизу поднимаются над полосой. На широком экране полосы нет. ── */
.sf-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-actionbar); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end;
  padding: 0 max(var(--space-1), var(--safe-r)) var(--safe-b) max(var(--space-1), var(--safe-l)); background: var(--surface); border-top: var(--line-w) solid var(--line); box-shadow: var(--shadow-1); }
.sf-tabbar__tab, .sf-tabbar__main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0;
  min-height: calc(var(--tap) + var(--space-3)); padding: var(--space-2) 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-strong);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-tabbar__tab:hover { color: var(--ink); }
.sf-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tabbar__tab[aria-current="page"] { color: var(--accent); box-shadow: inset 0 var(--line-w-2) 0 var(--accent); }
.sf-tabbar__tab > .sf-count { inset-inline-end: calc(50% - var(--space-6)); }
.sf-tabbar__main { color: var(--accent); }
/* главный шаг — круг синего Венеции над полосой: единственное залитое место полосы (SFR-0952) */
.sf-tabbar__plus { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-top: calc(-1 * var(--space-5)); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-2); border: var(--line-w-2) solid var(--surface); }
.sf-tabbar__main:active .sf-tabbar__plus { background: var(--accent-hover); }
.sf-tabbar__tab:focus-visible, .sf-tabbar__main:focus-visible { outline: var(--line-w-2) solid var(--accent); outline-offset: calc(-1 * var(--line-w-2)); box-shadow: none; }
body[data-tabbar] { padding-bottom: calc(var(--space-9) + var(--safe-b)); }
body[data-tabbar] .sf-toast { bottom: calc(var(--space-9) + var(--safe-b)); }
@media (min-width: 900px) {
  .sf-tabbar { display: none; }
  body[data-tabbar] { padding-bottom: 0; }
  body[data-tabbar] .sf-toast { bottom: calc(var(--space-5) + var(--safe-b)); }
}

/* ── Лист «Ещё» и любой список действий: строка — цель касания, значок слева, отметка справа ── */
.sf-sheet__body { display: grid; gap: var(--space-4); padding: var(--space-5); min-width: 0; }
.sf-sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.sf-menu { list-style: none; margin: 0; padding: 0; display: grid; }
.sf-menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-1); background: none; border: 0;
  border-bottom: var(--line-w) solid var(--line); color: var(--ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.sf-menu__item:hover { color: var(--ink); background: var(--surface-2); }
.sf-menu__item > .sf-icon:first-child { color: var(--muted); }
.sf-menu__item > .sf-menu__text { flex: 1 1 0%; min-width: 0; }
.sf-menu__item[aria-pressed="true"] > .sf-icon:last-child, .sf-menu__item[aria-current="page"] { color: var(--accent); }

/* ── Крупное число: «через 7 мин», время подачи — обычное начертание цифр, не тонкая антиква (на солнце не бледнеет, #582 п. 5) ── */
.sf-bignum { font-family: var(--font-num); font-size: var(--fs-3xl); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums lining-nums; }

/* ── Госномер «как итальянский»: синие поля по краям (#582 п. 6) ── */
.sf-plate--it { border-inline-width: var(--space-4); border-inline-color: var(--plate-band); border-radius: var(--radius-xs); }

/* ── Точка места без библиотеки карт: плитка-«карта» с булавкой (#582 п. 7). <span class="sf-mapdot" role="img" aria-label="…"></span> ── */
.sf-mapdot { position: relative; display: inline-block; flex: none; width: var(--space-8); aspect-ratio: 1; overflow: hidden; border: var(--line-w) solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  background-image: linear-gradient(var(--line) var(--line-w), transparent var(--line-w)), linear-gradient(90deg, var(--line) var(--line-w), transparent var(--line-w)),
    linear-gradient(35deg, transparent 46%, var(--surface-3) 46%, var(--surface-3) 56%, transparent 56%);
  background-size: var(--space-4) var(--space-4), var(--space-4) var(--space-4), 100% 100%; }
.sf-mapdot::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--space-3); height: var(--space-3); transform: translate(-50%, -50%); border-radius: var(--radius-pill);
  background: var(--accent); box-shadow: 0 0 0 var(--space-1) var(--accent-soft); }