/* Оформление (03.11.2026, редизайн по unslop — github.com/heydamir/unslop, CC BY 4.0):
   нейтральная серая шкала, ОДИН акцент (синий — тот же род, что у sign_service, темнее ради
   контраста), шрифт IBM Plex Sans + Plex Mono для времени, номеров и счётчиков (static/fonts,
   OFL). Цвет — только там, где он что-то значит: статус точкой, трек и скорость в окне «Карта».
   Фирменная деталь — номер маршрута «табличкой», как на лобовом стекле автобуса (.plate). */

/* ---------- Шрифты (локально: прод не зависит от внешних CDN) ---------- */
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.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: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.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: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.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: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.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: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.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; }

:root {
  /* шкала нейтральных — чуть холодная, как бумага путевого листа под лампой диспетчерской */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --raised: #f0f2f5;
  --line: rgba(20, 26, 34, 0.10);
  --line-soft: rgba(20, 26, 34, 0.06);
  --field-line: rgba(20, 26, 34, 0.20);
  --text: #161a20;
  --text-2: #4a5260;
  --muted: #687080;
  /* один акцент: главное действие, выбранное, ссылка */
  --accent: #2356d4;
  --accent-hover: #1c46b0;
  --accent-text: #2356d4;
  --accent-soft: rgba(35, 86, 212, 0.10);
  /* смысловые — приглушены под шкалу, контраст текста на белом ≥ 4.5 */
  --ok: #22774a;
  --warn: #9a6200;
  --bad: #c0362c;
  --off: #8a929e;
  /* поверхности и тени, у которых в тёмной теме свои значения */
  --field-bg: #ffffff;
  --row-hover: #fafbfc;
  --seg-on: #ffffff;
  --dot-warn: #d39b1f;
  --dot-ok: #3a9a68;
  --chart-line: #a3abb7;
  --shadow-sm: 0 1px 2px rgba(20, 26, 34, 0.04);
  --shadow-lg: 0 8px 24px rgba(20, 26, 34, 0.12);
  --backdrop: rgba(20, 26, 34, 0.30);

  --font: "Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r-control: 8px;
  --r-card: 12px;

  /* значки lucide (ISC) — маской, цвет берут у текста */
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z'/%3E%3Cpath d='M15 5.764v15'/%3E%3Cpath d='M9 3.236v15'/%3E%3C/svg%3E");
  --i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
  --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
  --i-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --i-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ---------- Тёмная тема (переключатель в меню, static/theme.js) ----------
   Серая шкала без оттенка: поверхности — ступенями, глубина — волосяными линиями, не тенями.
   Акцент-заливка темнее акцента-текста: белый на кнопке и ссылки на тёмном держат контраст. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141415;
  --panel: #1b1b1d;
  --raised: #262629;
  --line: rgba(237, 237, 237, 0.10);
  --line-soft: rgba(237, 237, 237, 0.06);
  --field-line: rgba(237, 237, 237, 0.18);
  --text: #ededed;
  --text-2: #a8a8ae;
  --muted: #8b8b92;
  --accent: #3b6fe6;
  --accent-hover: #4a7cf0;
  --accent-text: #8fb0ff;
  --accent-soft: rgba(91, 141, 239, 0.16);
  --ok: #4cc38a;
  --warn: #e0a84a;
  --bad: #f06a6a;
  --off: #6e6e76;
  --field-bg: #141415;
  --row-hover: rgba(255, 255, 255, 0.03);
  --seg-on: #3a3a3e;
  --dot-warn: #e0a84a;
  --dot-ok: #4cc38a;
  --chart-line: #6d717a;
  --shadow-sm: none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] nav, :root[data-theme="dark"] .pending { background: #18181a; }
:root[data-theme="dark"] .track-chart .stopband { opacity: 0.12; }
:root[data-theme="dark"] .track-chart .zone { opacity: 0.12; }
:root[data-theme="dark"] .log-box { background: #0f0f10; }

/* Leaflet — под тему: кнопки масштаба, подписи, всплывающие окна, фон до загрузки плиток. */
.leaflet-container { background: var(--raised); font: 13px/18px var(--font); }
:root[data-theme="dark"] .leaflet-bar { border-color: var(--line); }
:root[data-theme="dark"] .leaflet-bar a { background: var(--panel); color: var(--text); border-bottom-color: var(--line); }
:root[data-theme="dark"] .leaflet-bar a:hover { background: var(--raised); }
:root[data-theme="dark"] .leaflet-control-attribution { background: rgba(27, 27, 29, 0.8); color: var(--muted); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent-text); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
:root[data-theme="dark"] .leaflet-tooltip { background: var(--panel); color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .leaflet-tooltip-top::before { border-top-color: var(--panel); }
:root[data-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: var(--panel); }
:root[data-theme="dark"] .leaflet-tooltip-left::before { border-left-color: var(--panel); }
:root[data-theme="dark"] .leaflet-tooltip-right::before { border-right-color: var(--panel); }

/* Переключатель темы: луна в светлой, солнце в тёмной. */
button.theme-toggle { --icon: var(--i-moon); width: 32px; height: 32px; margin-right: 4px; }
:root[data-theme="dark"] button.theme-toggle { --icon: var(--i-sun); }
.theme-corner { position: absolute; top: 12px; right: 16px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/20px var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Значки ---------- */
.ic::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: -3px;
}
.ic:not(:empty)::before { margin-right: 6px; }
.ic-pin { --icon: var(--i-pin); }
.ic-map { --icon: var(--i-map); }
.ic-video { --icon: var(--i-video); }
.ic-download { --icon: var(--i-download); }
.ic-x { --icon: var(--i-x); }
.ic-left { --icon: var(--i-left); }
.ic-right { --icon: var(--i-right); }
.ic-next::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: var(--i-right) center / contain no-repeat;
  mask: var(--i-right) center / contain no-repeat;
  vertical-align: -3px;
}
.ic-left::before { margin-right: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Навигация ---------- */
nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 32px;
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
nav a {
  padding: 6px 10px;
  border-radius: var(--r-control);
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
nav a:hover { color: var(--text); background: var(--raised); }
nav a.active { color: var(--text); background: var(--raised); font-weight: 500; }
nav .brand { padding-left: 0; margin-right: 16px; color: var(--text); font-weight: 600; font-size: 15px; }
nav .brand:hover { background: none; }
nav .spacer { flex: 1; }
nav .who { color: var(--muted); padding: 0 8px; font-family: var(--mono); font-size: 13px; }

main { max-width: 1200px; margin: 24px auto 64px; padding: 0 32px; }
main.wide { max-width: 1600px; }

h1 { font-size: 24px; line-height: 32px; font-weight: 500; margin: 0 0 4px; }
h2 { font-size: 17px; line-height: 24px; font-weight: 500; margin: 0 0 4px; }
h3 { font-weight: 500; }
b, strong { font-weight: 600; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { font-weight: 500; color: var(--text-2); font-size: 12px; line-height: 16px; }
tr:last-child td { border-bottom: none; }
td a, .link { color: var(--accent-text); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  background: var(--raised);
  color: var(--text-2);
  vertical-align: 1px;
}
.badge.manual { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--warn); }
.badge.on { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); color: var(--ok); }

form.stack { display: flex; flex-direction: column; gap: 16px; }
label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
input[type=text], input[type=password], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-control);
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 72px; resize: vertical; }
.hint { font-size: 12px; color: var(--muted); margin-top: -8px; }

/* Кнопки: главная — акцентом, прочие — белые с волосяной рамкой. */
button, a.button {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--accent);
  color: #fff;
  font: 500 14px/20px var(--font);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease),
              color 150ms var(--ease), transform 120ms var(--ease);
}
button:hover, a.button:hover { background: var(--accent-hover); }
button:active, a.button:active { transform: scale(0.98); }
button.plain, a.button.plain {
  background: var(--panel);
  color: var(--text);
  border-color: var(--field-line);
  font-weight: 400;
}
button.plain:hover, a.button.plain:hover { background: var(--raised); }
button.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
}

/* Сообщение на странице: нейтральная плашка, смысл — цветом значка. */
.msg {
  position: relative;
  padding: 10px 16px 10px 40px;
  border-radius: var(--r-control);
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
}
.msg::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: var(--i-alert) center / contain no-repeat;
  mask: var(--i-alert) center / contain no-repeat;
}
.msg.error::before { background: var(--bad); }
.msg.warn::before { background: var(--warn); }
.msg.error { color: var(--bad); }
.msg .button, .pending .button { background: var(--panel); color: var(--text); border-color: var(--field-line);
                                 font-weight: 400; margin-left: 8px; }
.msg .button:hover, .pending .button:hover { background: var(--raised); }

.login-box { max-width: 360px; margin: 96px auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
code { font-family: var(--mono); font-size: 13px; }
form.inline { display: inline; }

/* Номер маршрута — «табличкой», как на лобовом стекле автобуса. */
.plate {
  display: inline-block;
  min-width: 40px;
  padding: 1px 6px;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  background: var(--panel);
  font: 500 13px/18px var(--mono);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Список маршрутов ---------- */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.route-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms var(--ease);
}
.route-card:hover { border-color: var(--accent); }
.route-card[hidden] { display: none; }
.route-card .num { font: 500 18px/24px var(--mono); }
.route-card .title { font-size: 12px; color: var(--muted); }
.route-card .badge { align-self: flex-start; margin-top: 4px; }

/* ---------- Маршрут ---------- */
.route-head { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
.route-pick { width: 140px; flex: none; }
.route-pick input { font: 500 18px/24px var(--mono); }

.doc-main { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.doc details { margin-top: 12px; font-size: 14px; }
.doc summary { cursor: pointer; color: var(--accent-text); }
.doc .msg { margin: 12px 0 0; }

.split {
  display: grid;
  grid-template-columns: minmax(380px, 560px) 1fr;
  gap: 16px;
  align-items: start;
}
.map-wrap {
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#map { flex: 1; border: 1px solid var(--line); border-radius: var(--r-control); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.dot.hollow { border: 2px dashed var(--off); background: var(--panel); }

.dir .ends { margin-bottom: 8px; }
ol.stops { list-style: none; margin: 0; padding: 0; }
li.stop {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 6px;
}
li.stop:last-child { border-bottom: none; }
li.stop.active { background: var(--accent-soft); }
li.stop.off .name { color: var(--muted); }
li.stop .tick { width: 18px; height: 18px; margin-top: 2px; flex: none; cursor: pointer; accent-color: var(--accent); }
li.stop .tick:disabled { cursor: not-allowed; }
li.stop .no { width: 28px; flex: none; text-align: right; color: var(--muted); font: 12px/20px var(--mono); }
li.stop .body { flex: 1; min-width: 0; }
li.stop .name { color: var(--text); text-decoration: none; }
li.stop .name:hover { color: var(--accent-text); }
li.stop .why { font-size: 12px; color: var(--muted); margin-top: 2px; }
li.stop .comment { color: var(--text-2); }

dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  width: min(520px, 92vw);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: var(--backdrop); }
dialog[hidden], #reason-box[hidden] { display: none; }
/* Поля пары — по нижнему краю: перенос длинной подписи не сдвигает одно поле ниже другого. */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.place [hidden] { display: none; }
.buttons { display: flex; gap: 8px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .map-wrap { position: static; height: 420px; order: -1; }
  .route-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- 27.10.2026: колонны, свои параметры, отчёты ---------- */
/* Плашки над страницей: нейтральная полоса, внимание — точкой смыслового цвета. */
.pending {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 32px 8px 52px;
  background: var(--panel);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.pending::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}
.pending .button { margin-left: 0; }
.pending form.inline { display: contents; }
button.small, a.button.small { padding: 3px 11px; font-size: 13px; }
a.button.plain { background: var(--panel); color: var(--text); }
button.danger { background: color-mix(in srgb, var(--bad) 8%, var(--panel)); color: var(--bad);
                border-color: color-mix(in srgb, var(--bad) 25%, var(--panel)); }
button.danger:hover { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); }
.title-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.column-group { margin-top: 16px; }
.column-group[hidden] { display: none; }
h2.gap { margin-top: 24px; }

.swap-form { margin-left: auto; text-align: right; }
li.stop .gear {
  flex: none;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 4px;
  font-size: 16px;
  line-height: 20px;
}
li.stop .gear:hover { color: var(--accent-text); }
.badge.own { background: var(--accent-soft); color: var(--accent-text); }
.badge.queued { background: var(--raised); color: var(--muted); }
.badge.running { background: var(--accent-soft); color: var(--accent-text); }
.badge.done { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); color: var(--ok); }
.badge.error { background: color-mix(in srgb, var(--bad) 9%, var(--panel)); color: var(--bad); }

.pick-hint {
  padding: 8px 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: var(--r-control);
  font-size: 14px;
}
.pick-hint[hidden] { display: none; }
.place { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.buttons .spacer { flex: 1; }

.settings-form { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.settings-form > div { flex: 0 1 320px; }
/* Подсказка под полем: общий .hint подтянут вверх под формы-стопки — здесь он наезжал на поле. */
.settings-form .hint { margin-top: 4px; }
.settings-form > .wide-field { flex: 1 1 300px; }
.settings-form > button { margin-top: 24px; }

form.narrow { max-width: 560px; }
label.radio, label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  margin: 8px 0;
}
label.radio input, label.check input { accent-color: var(--accent); }
.columns-pick { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px 24px; }
.log-box {
  max-height: 60vh;
  overflow: auto;
  background: #11151b;
  color: #e6e9ee;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: var(--r-control);
  font: 12px/18px var(--mono);
  white-space: pre-wrap;
}
.settings-form > .copy-check { margin-top: 28px; flex: none; }

/* Дни недели автозапуска обновления справочника — в строку, без отступа колонн. */
.columns-pick.days { margin-left: 0; }
/* Автозапуск отчёта: пары полей (время + сутки, повтор + до) — в строку, на телефоне в столбик. */
.auto-row { display: flex; gap: 16px; flex-wrap: wrap; }
.auto-row > div { flex: 1 1 200px; }

/* Изменения обновления справочника: маршрут → изменения с галочками. */
.apply-bar { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 8px 0;
             border-bottom: 1px solid var(--line-soft); align-items: center; }
.change-route { border-top: 1px solid var(--line-soft); padding: 12px 0 8px; }
.change-route h3 { font-size: 16px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.change { margin: 4px 0 12px; }
.change-body { margin-left: 24px; }
.change-body p { margin: 2px 0 4px; }
ul.ops { list-style: none; margin: 0; padding: 0; font-size: 14px; }
ul.ops li { padding: 2px 0; }
.op-mark { display: inline-block; width: 18px; font-weight: 600; color: var(--muted); }
.op-add .op-mark { color: var(--ok); }
.op-del .op-mark, .op-nocoord .op-mark { color: var(--bad); }
.doc-line { margin: 2px 0 8px; }
/* Карта «было → стало» у сдвига столба: видна сразу, без клика. */
.mini-map { height: 220px; max-width: 520px; margin: 8px 0; border: 1px solid var(--line);
            border-radius: var(--r-control); background: var(--raised); }
.place-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
               gap: 12px; margin: 8px 0 12px; }
.place-card { border: 1px solid var(--line-soft); border-radius: var(--r-control); padding: 8px 12px; }
.place-card .mini-map { max-width: none; }
.place-card p { margin: 0; }
ul.files li { margin: 0 0 8px; }
/* обновление справочника: линии дорог (вид 9 «сдвиг координаты») */
.change-roads { border-top: 1px solid var(--line-soft); padding: 12px 0 8px; }
.change-roads h3 { font-size: 16px; margin: 0 0 8px; }
.road-intro { max-width: 780px; margin: 0 0 12px; }
.road-intro p { margin: 0 0 6px; }
.road-change .change-body p { margin: 2px 0 4px; }
.road-verdict { font-weight: 600; }
.road-ok .road-verdict { color: var(--ok); }
.road-bad .road-verdict { color: var(--bad); }
.road-nodata .road-verdict { color: var(--warn); }
.road-map { height: 380px; max-width: 900px; margin: 8px 0 4px; border: 1px solid var(--line);
            border-radius: var(--r-control); }
.road-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; }
.road-legend .sw { display: inline-block; width: 24px; border-top: 3px solid #2563eb; margin-left: 8px; }
.road-legend .sw-old { border-top: 3px dashed #7d8590; margin-left: 0; }
.road-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }
.road-legend .dot-ok { background: #0f766e; }
.road-legend .dot-bad { background: #dc2626; }

/* ---------- «Пропуски»: фильтр ---------- */
/* Две строки по смыслу: «когда и где» и «кто», кнопки — справа второй строки. */
form.filters { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
form.filters .frow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
form.filters .f { display: flex; flex-direction: column; width: 120px; }
form.filters .f.wide { width: 148px; }
form.filters .f.n { width: 88px; }
form.filters .f.d { width: 176px; }
form.filters .f.s { width: 240px; }
form.filters .f.range { width: auto; }
form.filters .pair { display: flex; align-items: center; gap: 4px; }
form.filters .pair .dash { color: var(--muted); }
form.filters .f.range input[type=date] { width: 132px; }
form.filters .f.range input[type=time] { width: 92px; }
form.filters label { font-size: 12px; line-height: 16px; margin-bottom: 4px; color: var(--text-2); }
form.filters input, form.filters select { padding: 5px 8px; font-size: 13px; min-width: 0; height: 32px; }
form.filters .go { display: flex; gap: 8px; align-items: center; margin-left: auto; }
form.filters .go .button, form.filters .go button { height: 32px; padding-top: 5px; padding-bottom: 5px; }
/* Фильтр, заданный не полем, а переходом (статус, точное имя ОП): метка с крестиком. */
.chip { display: inline-flex; gap: 4px; align-items: center; background: var(--accent-soft);
        color: var(--accent-text); border-radius: 6px; padding: 5px 4px 5px 10px; font-size: 13px;
        line-height: 20px; align-self: flex-end; }
.chip a { display: inline-flex; padding: 2px; border-radius: 4px; color: inherit; text-decoration: none; }
.chip a:hover { background: var(--accent-soft); }

/* Компактный фильтр «Пропусков» (11.11.2026): одна строка высотой в поле, подпись — внутри поля
   слева; редкие условия — вторая строка по кнопке «Ещё фильтры» (static/filters.js). Прежний
   фильтр в две строки с подписями над полями занимал ~150 px над каждым экраном. */
form.filters.compact { gap: 8px; padding: 12px 16px; }
form.filters.compact .frow { gap: 8px; align-items: center; }
form.filters.compact .more-row[hidden] { display: none; }
form.filters.compact .f { flex-direction: row; align-items: center; width: auto; height: 32px;
                          padding-left: 10px; border: 1px solid var(--field-line);
                          border-radius: var(--r-control); background: var(--field-bg);
                          transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
form.filters.compact .f:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
form.filters.compact .f label { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted);
                                white-space: nowrap; }
form.filters.compact .f input, form.filters.compact .f select {
  width: auto; height: 30px; padding: 0 8px; border: none; border-radius: var(--r-control);
  background: transparent; font-size: 13px; }
form.filters.compact .f input:focus-visible, form.filters.compact .f select:focus-visible { box-shadow: none; }
/* ❗У списка фон — цвет поля, не прозрачный: выпадающее меню берёт фон и цвет текста у самого
   select, и на прозрачном в тёмной теме выходил светлый текст на белом (12.11.2026). */
form.filters.compact .f select, form.filters.compact .f select option {
  background-color: var(--field-bg); color: var(--text); }
form.filters.compact .f select { min-width: 68px; max-width: 160px; padding-right: 2px; }
form.filters.compact .f.range input[type=date] { width: 122px; padding-right: 4px; }
form.filters.compact .f.range input[type=time] { width: 82px; padding-right: 4px; }
form.filters.compact .f.n input { width: 72px; }
form.filters.compact .f.d input { width: 168px; }
form.filters.compact .f.s input { width: 188px; }
form.filters.compact .pair .dash { margin: 0 -4px; }
form.filters.compact .chip { align-self: center; }
form.filters.compact.more-open .chip.more { display: none; }
form.filters.compact .more-btn { height: 32px; padding: 5px 12px; }
form.filters.compact .more-btn[hidden] { display: none; }
form.filters.compact .more-btn[aria-expanded="true"] { background: var(--raised); }
form.filters.compact .more-btn .n { margin-left: 6px; font: 500 12px/16px var(--mono); color: var(--accent-text); }
form.filters.compact .go { margin-left: auto; }

/* ---------- «Пропуски»: итоги, вкладки, таблица ---------- */
/* Итоги по фильтру: число нарушений — главная цифра экрана, остальное — тише. */
.overview { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 12px; margin: 24px 0 16px; }
.overview .stat { display: flex; align-items: flex-end; gap: 12px; padding: 0 24px;
                  border-left: 1px solid var(--line); }
.overview .stat:first-child { padding-left: 0; border-left: none; }
.overview .stat b { font-size: 28px; line-height: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.overview .stat.main b { font-size: 44px; line-height: 44px; letter-spacing: -0.02em; }
.overview .stat span { display: flex; flex-direction: column; font-size: 14px; line-height: 20px;
                       color: var(--text-2); }
.overview .stat small { font-size: 12px; line-height: 16px; color: var(--muted); }

.view-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 16px;
             border-bottom: 1px solid var(--line); }
.view-tabs > a:not(.button) { padding: 8px 12px; text-decoration: none; color: var(--text-2);
                             border-bottom: 2px solid transparent; margin-bottom: -1px;
                             transition: color 150ms var(--ease), border-color 150ms var(--ease); }
.view-tabs > a:not(.button):hover { color: var(--text); }
.view-tabs > a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.view-tabs .spacer { flex: 1; }
.view-tabs .button { margin-bottom: 8px; }
/* Счётчик на вкладке свода: сколько разных водителей / ТС / … у нарушений. */
.view-tabs .count { margin-left: 8px; font: 400 12px/16px var(--mono); color: var(--muted);
                    font-variant-numeric: tabular-nums; }
.view-tabs > a.active .count { color: var(--accent-text); }

/* Таблица — во всю панель, строки в одну линию, шапка прилипает при прокрутке. */
.panel.rows { padding: 0; }
.table-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.table-bar p { margin: 0; }
.panel.rows > .table-bar:last-child { border-bottom: none; border-top: 1px solid var(--line-soft); }
.panel.rows > p.muted { padding: 20px; margin: 0; }
table.passes td { font-size: 14px; vertical-align: middle; }
table.passes th, table.passes td { padding: 10px 8px; }
table.passes th:first-child, table.passes td:first-child { padding-left: 16px; }
table.passes th:last-child, table.passes td:last-child { padding-right: 16px; }
table.passes thead th { position: sticky; top: 0; z-index: 1; background: var(--panel);
                        border-bottom: 1px solid var(--line); }
table.passes tbody tr { transition: background-color 120ms var(--ease); }
table.passes tbody tr:hover { background: var(--row-hover); }
table.passes td.mono, table.passes td.time { font-family: var(--mono); font-size: 13px;
                                             font-variant-numeric: tabular-nums; }
table.passes td.time { white-space: nowrap; }
table.passes td.dir { color: var(--text-2); }
table.passes td.stop { min-width: 200px; }
table.passes td.stop .badge, table.passes td.stop .map { margin-left: 8px; }
/* Значок «ОП на карте» — кнопка (окно с картой), без оформления кнопки. */
table.passes td.stop .map { display: inline-block; color: var(--muted); vertical-align: -1px;
                            line-height: 16px; padding: 0; border: none; background: none; }
table.passes td.stop .map:hover { color: var(--accent-text); background: none; }
table.passes td.note { max-width: 260px; }
/* Оспаривания: в строке комментарии в несколько строк — читаются сверху, не по центру. */
table.passes.disputes td { vertical-align: top; }
table.passes.disputes td.note { min-width: 140px; }
table.passes.disputes td.status { min-width: 104px; }
/* Оспариваний немного — прилипающая шапка не нужна, широкая таблица прокручивается в панели. */
.table-scroll:has(> table.disputes) { overflow-x: auto; }
table.passes th.num, table.passes td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.passes td.num { font-family: var(--mono); font-size: 13px; }
/* Кнопки строки — компактные (28 px): строка остаётся в одну линию. */
table.passes td button.small, table.passes td button.act { padding: 3px 9px; font-size: 13px; }
table.passes td button.ic:not(:empty)::before { margin-right: 4px; }
/* Трек и видео — квадратными кнопками со значком: подпись столбца над ними, слово — для
   экранного диктора и подсказки (сама надпись в кнопке остаётся, размер шрифта — ноль). */
table.passes td button.ic.only { width: 28px; height: 28px; padding: 0; font-size: 0; line-height: 0;
                                 display: inline-flex; align-items: center; justify-content: center; }
table.passes td button.ic.only::before { margin: 0; }
table.passes th.tool, table.passes td.tool { width: 44px; text-align: center; }
.badge.od { background: var(--raised); color: var(--text-2); }
/* Время легло на следующую дату (рейс после полуночи): дата — в подсказке. */
sup.day-shift { font: 500 10px/1 var(--mono); color: var(--muted); margin-left: 2px;
                cursor: help; border-bottom: 1px dotted currentColor; }

/* Статус строки — точкой смыслового цвета и словом, без заливки: в списке нарушений
   «нарушение» стоит в каждой строке, крик красным его не выделял, а только шумел. */
table.passes td.status { min-width: 140px; }
table.passes td.status .badge { position: relative; padding: 0 0 0 14px; background: none;
                                border-radius: 0; font-size: 13px; line-height: 20px;
                                white-space: normal; color: var(--text-2); }
table.passes td.status .badge::before { content: ""; position: absolute; left: 0; top: 6px;
                                        width: 8px; height: 8px; border-radius: 50%;
                                        background: var(--off); }
table.passes td.status .badge.error::before { background: var(--bad); }
table.passes td.status .badge.disputed::before, table.passes td.status .badge.manual::before { background: var(--dot-warn); }
table.passes td.status .badge.on::before { background: var(--dot-ok); }
table.passes td.status .badge.disputed, table.passes td.status .badge.manual { color: var(--text); }
table.passes td.status .note { max-width: 260px; margin-top: 4px; padding-left: 14px; line-height: 16px; }
.badge.disputed { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); color: var(--warn); }

/* Сортировка по шапке. */
th a.sort { color: inherit; text-decoration: none; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 4px; }
th a.sort:hover { color: var(--text); }
th a.sort.asc, th a.sort.desc { color: var(--text); }
/* Значок сортировки: оба треугольника бледные — можно сортировать; яркий — текущее направление. */
.sort-icon { flex: none; }
.sort-icon path { fill: currentColor; opacity: 0.25; }
th a.sort:hover .sort-icon path { opacity: 0.5; }
th a.sort.asc .sort-icon .up, th a.sort.desc .sort-icon .down { opacity: 1; }

/* Своды: панель по ширине таблицы — без пустого поля справа; первая ячейка — ссылка тоном текста. */
.panel.fit { width: fit-content; max-width: 100%; padding: 0; }
.panel.fit > p.muted { padding: 12px 16px 0; margin: 0; }
table.summary { width: auto; min-width: 640px; }
table.summary th, table.summary td { padding-left: 12px; padding-right: 12px; }
table.summary td a { color: var(--text); text-decoration: none; }
table.summary td a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.pager { display: flex; gap: 8px; }
details.waive summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 3px 11px;
  font-size: 13px;
  border-radius: var(--r-control);
  border: 1px solid var(--field-line);
  background: var(--panel);
  color: var(--text);
}
details.waive summary::-webkit-details-marker { display: none; }
details.waive[open] summary { margin-bottom: 8px; }
details.waive form { min-width: 260px; }
details.waive.reject summary { margin-top: 4px; }
button[disabled], button[disabled]:hover,
button[aria-disabled="true"], button[aria-disabled="true"]:hover { opacity: 0.45; cursor: not-allowed; background: var(--panel); transform: none; }
button:not(.plain)[disabled] { background: var(--accent); }
.users-table td { vertical-align: middle; }
/* 12.11.2026: у начальника нескольких колонн роль длинная — переносится второй строкой
   («колонны № 1, 2, 3»), а не раздвигает таблицу за край карточки. */
.users-table td.role { min-width: 180px; }
.users-scroll { overflow-x: auto; }
/* 12.11.2026: колонны учётки — галочками; в форме смены доступа у строки — без отступа слева. */
.role-columns .columns-pick { margin-left: 0; }
.role-columns[hidden] { display: none; }
.access-form { min-width: 280px; max-width: 360px; }
.access-form .columns-pick { gap: 0 14px; }
.access-form .columns-pick label.check { margin: 4px 0; }
/* Получатели отчёта — группами по «Кому»: строка-заголовок над адресами группы. */
table.recipients tr.group-head th {
  padding-top: 14px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: var(--raised);
}
table.recipients tbody.rgroup td:first-child { padding-left: 20px; }

table.passes td.drv { white-space: nowrap; }
/* Ноутбук (< 1440): водитель переносится, отступы ячеек уже. Совсем узко (< 1200) — таблица
   прокручивается внутри панели (тогда шапка не прилипает). */
@media (max-width: 1439px) {
  table.passes td.drv { white-space: normal; min-width: 120px; }
  table.passes td.stop { min-width: 160px; }
  table.passes th, table.passes td { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1199px) {
  .table-scroll { overflow-x: auto; }
}

/* Кнопки действия строки (Оспорить / Снять / Подтвердить; «neutral» — Отклонить) — в столбик. */
button.act { padding: 3px 11px; font-size: 13px; background: var(--panel); color: var(--text);
             border-color: var(--field-line); font-weight: 400; }
button.act:hover { background: var(--raised); }
table.passes td.act button.act { display: block; width: 100%; }
table.passes td.act .pop ~ button.act { margin-top: 4px; }

/* ---------- Форма строки во всплывающем окне ---------- */
.pop { width: min(460px, 92vw); padding: 20px; border: 1px solid var(--line);
       border-radius: var(--r-card); background: var(--panel); color: var(--text);
       box-shadow: var(--shadow-lg);
       transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.pop::backdrop { background: var(--backdrop); }
@starting-style { .pop:popover-open { opacity: 0; transform: translateY(8px); } }
.pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pop-head h3 { margin: 0; font-size: 16px; line-height: 24px; }
button.pop-close, button.icon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: none;
  color: var(--muted); }
button.pop-close:hover, button.icon-btn:hover { background: var(--raised); color: var(--text); }
button.pop-close::before, button.icon-btn::before { margin: 0; }
.pop-what { margin: 8px 0 16px; padding: 8px 12px; border-radius: var(--r-control);
            background: var(--raised); font-size: 13px; color: var(--text-2); line-height: 20px; }
.pop-what b { color: var(--text); font-weight: 500; }
.pop textarea { min-height: 96px; }
.pop .buttons { justify-content: flex-end; }

/* ---------- Окно «Карта»: трек у остановки + лента скорости ---------- */
dialog.track-dialog { width: min(1120px, 94vw); padding: 16px 20px 20px;
                      transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
@starting-style { dialog.track-dialog[open] { opacity: 0; transform: translateY(8px); } }
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.track-head .who-what { min-width: 0; }
#track-title { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
#track-title .plate { margin-right: 8px; vertical-align: 1px; }
#track-sub { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
.track-head .tools { display: flex; align-items: center; gap: 12px; flex: none; }
/* ±1 / ±3 мин — переключатель одной деталью: выбранное — поднятая белая плашка. */
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-control); background: var(--raised);
       border: 1px solid var(--line-soft); }
.seg button { padding: 3px 12px; border: none; border-radius: 6px; background: none; color: var(--text-2);
              font: 400 13px/20px var(--mono); }
.seg button:hover { background: none; color: var(--text); }
.seg button.active { background: var(--seg-on); color: var(--text); font-weight: 500;
                     box-shadow: var(--shadow-sm); }
#track-map { height: min(500px, 54vh); border: 1px solid var(--line); border-radius: var(--r-control); }
/* Окно «ОП на карте» (значок у названия остановки) — уже окна трека: на карте одна метка. */
dialog.stop-dialog { width: min(760px, 94vw); }
#stop-title { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
#stop-title .plate { margin-right: 8px; vertical-align: 1px; }
#stop-sub { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
#stop-map { height: min(480px, 60vh); border: 1px solid var(--line); border-radius: var(--r-control); }
.track-chart { position: relative; margin-top: 12px; padding-top: 4px; }
.track-chart[hidden] { display: none; }
.track-chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
.track-chart text { font: 11px var(--mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.track-chart text.strong { fill: var(--text); font-weight: 500; font-size: 12px; }
.track-chart text.zone-label { fill: var(--accent-text); }
.track-chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.track-chart .axis { stroke: var(--line); stroke-width: 1; }
.track-chart .stopband { fill: var(--dot-ok); opacity: 0.08; }
.track-chart .zone { fill: var(--accent); opacity: 0.06; }
.track-chart .edge { stroke: var(--accent); stroke-width: 1; opacity: 0.45; stroke-dasharray: 3 3; }
.track-chart .limit { stroke: var(--dot-ok); stroke-width: 1; opacity: 0.8; }
.track-chart .speed-all { fill: none; stroke: var(--chart-line); stroke-width: 1.5; stroke-linejoin: round;
  stroke-linecap: round; }
.track-chart .speed { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round;
  stroke-linecap: round; }
.track-chart .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.track-chart .dot.min { fill: var(--text); }
.track-chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart-tip { position: absolute; top: 0; pointer-events: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: 12px/16px var(--mono);
  color: var(--muted); white-space: nowrap; box-shadow: var(--shadow-lg); }
.chart-tip b { color: var(--text); font-size: 13px; font-weight: 500; }
/* Легенда — ключами, а не строкой текста с кружками. */
#track-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; color: var(--text-2);
                font-size: 12px; line-height: 16px; }
#track-legend .key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#track-legend .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
#track-legend .sw.ring { background: none; border: 1.5px dashed var(--c); width: 12px; height: 12px; }
#track-legend .sw.dash { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed var(--c); background: none; }
#track-legend .hint-click { color: var(--muted); }
#track-note { margin: 12px 0 0; }
#track-note[hidden] { display: none; }
/* Окно «Видео» (12.11.2026): ролик 16:9 во всю ширину окна, шапка — как у окна трека. */
dialog.video-dialog { width: min(1000px, 94vw); }
#video-title { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
#video-title .plate { margin-right: 8px; vertical-align: 1px; }
#video-sub { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
#video-disk[hidden] { display: none; }
#video-player { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 56vh; background: #000;
                border-radius: var(--r-control); }
#video-note { margin: 12px 0 0; }
#video-note[hidden] { display: none; }
#video-hint { margin-top: 4px; }
#video-hint[hidden] { display: none; }
/* Лента под видео: текущий кадр — тёмной линией с часами над лентой. */
.track-chart .playhead line { stroke: var(--text); stroke-width: 1.5; }
.track-chart .playhead text { fill: var(--text); font-weight: 500; font-size: 12px; }

/* ---------- Своды «Пропусков»: таблица + карта остановок справа (static/summary_map.js) ---------- */
/* Таблица — по своей ширине (не шире ~60 %, длинные имена переносятся), карта — остаток, липнет
   при прокрутке длинного свода. Уже 1100 px — карта над таблицей. */
.summary-split { display: grid; grid-template-columns: fit-content(64%) minmax(360px, 1fr);
                 gap: 16px; align-items: start; margin-bottom: 16px; }
.summary-split > .panel { margin-bottom: 0; }
.summary-split > .panel.fit { width: auto; max-width: none; }
/* шапка свода переносится — таблица ужимается, карте остаётся место */
table.summary th a.sort { white-space: normal; }
/* Таблица шире своей доли — прокручивается в панели, карта не уезжает за край: свод остановок
   (десять столбцов, ~1100 px) — всегда, прочие — на ноутбуке. Узкие своды прокрутки не имеют,
   и шапка у них прилипает. */
.summary-split > .panel.fit.scroll { min-width: 0; overflow-x: auto; }
@media (max-width: 1365px) {
  .summary-split > .panel.fit { min-width: 0; overflow-x: auto; }
}
.summary-map { position: sticky; top: 16px; height: calc(100vh - 32px); min-height: 420px;
               max-height: 900px; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.summary-map .map-head { display: flex; justify-content: space-between; align-items: flex-start;
                         gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.summary-map .who-what { min-width: 0; }
#sum-map-title { display: block; font-weight: 500; line-height: 20px; }
#sum-map-sub { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
#sum-map-reset[hidden] { display: none; }
#sum-map { flex: 1; min-height: 0; }
.summary-map .map-foot { padding: 8px 16px; border-top: 1px solid var(--line-soft); font-size: 12px;
                         line-height: 16px; color: var(--muted); }
.summary-map .leaflet-popup-content { margin: 10px 12px; line-height: 18px; }
.summary-map .leaflet-popup-content a { display: inline-block; margin-top: 4px; color: var(--accent-text); }
table.summary tbody tr.pickable { cursor: pointer; }
table.summary tbody tr.pickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.summary tbody tr.picked, table.summary tbody tr.picked:hover { background: var(--accent-soft); }
table.summary tbody tr.picked td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.summary tbody tr.from-map { background: var(--accent-soft); }
@media (max-width: 1099px) {
  .summary-split { grid-template-columns: minmax(0, 1fr); }
  .summary-map { position: static; height: 420px; min-height: 0; order: -1; }
  .summary-split > .panel.fit { overflow-x: auto; }
}

/* ---------- Узкий экран ---------- */
@media (max-width: 720px) {
  nav { padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  /* меню прокручивается вбок — переключатель темы сразу за названием, чтобы был на виду */
  nav .brand { order: -2; margin-right: 4px; }
  nav .theme-toggle { order: -1; flex: none; margin-right: 8px; }
  .pending { padding: 8px 16px 8px 36px; flex-wrap: wrap; }
  .pending::before { left: 16px; top: 14px; }
  main { padding: 0 16px; margin-top: 16px; }
  h1 { font-size: 20px; line-height: 28px; }
  form.filters { padding: 12px; }
  form.filters .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  form.filters .f, form.filters .f.wide, form.filters .f.n, form.filters .f.d, form.filters .f.s { width: auto; }
  form.filters .f.range { grid-column: 1 / -1; }
  form.filters .f.range .pair input { flex: 1; width: auto; }
  form.filters .go { grid-column: 1 / -1; margin-left: 0; justify-content: flex-end; }
  .overview .stat { padding: 0 16px; }
  .overview .stat.main b { font-size: 36px; line-height: 40px; }
  .view-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .view-tabs > a:not(.button) { white-space: nowrap; }
  .table-scroll { overflow-x: auto; }
  .track-head { flex-wrap: wrap; }
}