/* Звук одним значком в шапке (Р351, И696; было — кнопка звука, «i», колокольчик и «Настроить», Р336-5…8): значок —
   размером кнопок шапки (на телефоне — --tap); выключен — динамик перечёркнут и приглушён, ждёт нажатия — точка цветом
   предупреждения, звенит — вздрагивает (`is-ringing`, staff.css). Нажатие — окошко «Звук и уведомления» под значком,
   справа; на телефоне — во всю ширину под шапкой. Внутри — звук ленты, «Проверить звук», когда звенит, звук на каждое
   событие, уведомления браузера, установка панели приложением. */
.oc-sound { flex: none; }
.btn.staff-sound { position: relative; flex: none; width: var(--control-md); padding: 0; }
/* Нажатие — всегда по самой кнопке: значок перерисовывается, когда звук включается этим же нажатием. Ждёт нажатия —
   динамик приглушён (staff.css), точка — цветом предупреждения. */
.staff-sound svg, .staff-sound__dot { pointer-events: none; }
.staff-sound[data-sound="off"] svg, .staff-sound[data-sound="none"] svg { color: var(--muted); }
.staff-sound__dot {
  position: absolute; top: var(--space-1); right: var(--space-1); width: calc(var(--space-2) + var(--space-1));
  height: calc(var(--space-2) + var(--space-1)); border: 2px solid var(--panel); border-radius: var(--radius-pill); background: var(--warn);
}
@media (max-width: 767px) { .btn.staff-sound { width: var(--tap); min-height: var(--tap); } }

/* Окошко: под значком, справа; на телефоне — во всю ширину под шапкой, как «Что вижу». Длинное — листается внутри. */
.oc-sound__menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; display: grid; gap: var(--space-3);
  width: min(calc(var(--space-8) * 8), calc(100vw - var(--space-4))); max-width: none; max-height: calc(100vh - var(--space-8) * 2);
  padding: var(--space-3) var(--space-4) var(--space-4); color: var(--ink); font-size: var(--text-sm); white-space: normal; }
.oc-sound__menu[hidden] { display: none; }
/* Появляется без сдвига: сдвиг (transform) на время появления сделал бы окошко рамкой для подсказок внутри — они встали
   бы не у своих значков. */
.oc-sound__menu { animation-name: oc-sound-in; }
@keyframes oc-sound-in { from { opacity: 0; } }
.oc-alerts__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-md); }
.oc-alerts__close { width: var(--control-sm); height: var(--control-sm); color: var(--muted); }
.oc-alerts__close svg { width: var(--icon-md); height: var(--icon-md); }
.oc-alerts__part { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.oc-alerts__part[hidden] { display: none; }
.oc-alerts__part h3 { margin: 0; font-size: var(--text-sm); }

/* Звук ленты: переключатель и слово состояния (ждёт нажатия, экран может погаснуть — цветом предупреждения, пояснение —
   значком), ниже — «Проверить звук» и «когда звенит» значком i. Всё — короткими строками (владелец 24.10). */
.oc-sound__main { display: grid; gap: var(--space-2); }
.oc-sound__row, .oc-sound__said, .oc-install__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.oc-sound__said { gap: var(--space-1); }
.oc-sound__switch { font-size: var(--text-md); }
.oc-sound__state { color: var(--muted); font-weight: var(--weight-semibold); }
.oc-sound__state[data-state="on"] { color: var(--ok); }
.oc-sound__state[data-state="waking"], .oc-sound__state[data-state="sleepy"] { color: var(--warn); }
.oc-sound__check svg, .oc-install__put svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }
/* «Установить панель как приложение» с i — одной строкой и на телефоне: длинная подпись переносится внутри кнопки. */
.oc-install__row { flex-wrap: nowrap; }
.oc-install__put { min-width: 0; white-space: normal; text-align: left; }
.oc-alerts__part h3 { display: flex; align-items: center; gap: var(--space-1); }

/* Уведомления браузера — кнопкой, пояснение — значком рядом; звук на каждое событие — строкой на событие: имя и i, выбор
   звука и «Прослушать» значком. */
.oc-notify { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.oc-notify__btn[aria-pressed="false"] svg { color: var(--muted); }
.oc-notify__btn svg, .oc-alerts__hear svg { flex: none; width: var(--icon-md); height: var(--icon-md); }
.oc-alerts__sounds { display: grid; gap: var(--space-2); }
/* Строки — одной сеткой: выбор звука у всех событий начинается с одного места (раскладки — симметрично). */
.oc-alerts__row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--space-8) * 5); align-items: center;
  gap: var(--space-1) var(--space-2); }
.oc-alerts__what { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.oc-alerts__what label { cursor: pointer; }
.oc-alerts__pick { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.oc-alerts__select { flex: 1; width: auto; min-width: 0; height: var(--control-md); font-size: var(--text-sm); }
.oc-alerts__hear { flex: none; width: var(--control-md); min-height: var(--control-md); padding: 0; }
.oc-alerts__hear-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc-alerts__warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; color: var(--warn);
  font-weight: var(--weight-semibold); }
.oc-alerts__foot { display: flex; justify-content: flex-end; margin: 0; }
@media (max-width: 720px) {
  .oc-sound__menu { position: fixed; top: calc(var(--space-8) + var(--space-4)); left: var(--space-4); right: var(--space-4);
    width: auto; min-width: 0; max-height: calc(100vh - var(--space-8) * 2); }
  .oc-alerts__row { grid-template-columns: minmax(0, 1fr); }
  .oc-alerts__select { height: var(--tap); }
  .oc-alerts__hear { width: var(--tap); min-height: var(--tap); }
}
/* В окошке на телефоне — всё, во что тычут пальцем, не меньше --tap. */
@media (max-width: 767px) {
  .oc-alerts__close { width: var(--tap); height: var(--tap); }
  .oc-sound__switch { min-height: var(--tap); }
}

/* ── Подсказки и предупреждения значком (`js/hint.js`; владелец 24.10): i — пояснение, ! — нужно действие, ⚠ — что-то
   не так. Окошко — над всем, у значка; на ПК — наведением и фокусом, на телефоне — касанием. ── */
.oc-hint { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.oc-hint__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm);
  padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); cursor: pointer; }
.oc-hint__btn:hover, .oc-hint__btn[aria-expanded="true"] { background: var(--tint); color: var(--ink); }
.oc-hint__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Цвет значка — цветом кнопки: старое `.oc-hint svg` из oc.css (золотом) значку не указ. */
.oc-hint__btn svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: inherit; }
.oc-hint__close svg { color: inherit; }
.oc-hint__btn--act { color: var(--accent); }
.oc-hint__btn--warn, .oc-hint__btn--warn:hover, .oc-hint__btn--warn[aria-expanded="true"] { color: var(--warn); }
/* Ошибка — красным «!» (явка не открыта, громкая строка «Требуют внимания», заказ опаздывает). */
.oc-hint__btn--err, .oc-hint__btn--err:hover, .oc-hint__btn--err[aria-expanded="true"] { color: var(--err); }
/* Предупреждение — жёлтым «!» (заказ впритык, Р422–Р423). */
.oc-hint__btn--tight, .oc-hint__btn--tight:hover, .oc-hint__btn--tight[aria-expanded="true"] { color: var(--warn); }
/* Значок без окошка — тот же вид, но не кнопка. */
.oc-hint__btn.is-still, .oc-hint__btn.is-still:hover { background: transparent; cursor: default; }
.oc-hint__text .btn { justify-self: start; }
.oc-hint__text .btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-hint__pop { position: fixed; z-index: var(--z-above); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  gap: var(--space-2); width: min(calc(var(--space-8) * 5), calc(100vw - var(--space-4))); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-2);
  color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-text);
  text-align: left; white-space: normal; }
.oc-hint__pop[hidden] { display: none; }
.oc-hint__text { display: grid; gap: var(--space-2); }
.oc-hint__text p, .oc-hint__text ul { margin: 0; }
/* Слова двери в окошке — с большой буквы: служба пишет их продолжением строки («касса не на связи, повторяем»); начатые
   латиницей со строчной («iiko …», `is-name` из hint.js) — как есть. */
.oc-hint__text p:not(.is-name)::first-letter { text-transform: uppercase; }
.oc-hint__text ul { display: grid; gap: var(--space-1); padding-left: var(--space-4); }
.oc-hint__close { width: var(--control-sm); height: var(--control-sm); color: var(--muted); }
.oc-hint__close svg { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 767px) {
  .oc-hint__btn, .oc-hint__close { width: var(--tap); height: var(--tap); }
}