/* TOC Planner — визуальный редизайн M11/02 (design-канвас, скилл `design`, одобрено 2026-08-20). Тёмный сайдбар (фиксирован, не зависит от темы) + светлая/тёмная тема рабочей области на CSS custom properties, индиго-акцент, карточный вид со скруглениями/тенями. Ручной переключатель темы (.nav__theme, M11/03) переопределяет автоопределение по prefers-color-scheme через явные классы .theme-dark/.theme-light на — здесь CSS-система обеих тем. Цвета зон буфера (красный/жёлтый/зелёный/чёрный) остаются функциональной сигнализацией состояния, не декором и не в счёт акцентного цвета. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/inter-var.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0000-00FF; } :root { /* light dark = страница реально поддерживает обе схемы (см. media-запрос ниже) -- без этого браузер может сам "форсировать" тёмную перекраску непредсказуемой эвристикой вместо настоящих токенов темы (та самая "не видно группы в Маршрутах": эвристика красит текст в цвет её же перекрашенного фона). Объявив обе схемы официально и правда её поддерживая, отдаём выбор браузеру/ОС пользователя, а не заставляем его лезть в настройки. */ color-scheme: light dark; --sidebar-bg: #12172b; /* не меняется темой */ --sidebar-ink: #c7cbe0; --sidebar-ink-soft: #7d82a3; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-active-bg: rgba(79, 109, 245, 0.18); --bg: #f5f6fa; --surface: #ffffff; --surface-2: #fafafd; --ink: #161a2c; --ink-soft: #6a6f85; --border: #e6e8f0; --border-strong: #d7dae6; --danger: #c0392b; --danger-soft: #fbeceb; --zone-green: #16a34a; --zone-yellow: #c77700; --zone-red: #dc2626; --zone-black: #161a2c; /* акцент не привязан к теме — одно значение и в светлой, и в тёмной */ --accent: #4f6df5; --accent-soft: rgba(79, 109, 245, 0.12); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.07); --font: "Inter", -apple-system, "Segoe UI", Arial, sans-serif; --radius: 14px; --radius-sm: 8px; --ease: 150ms ease; --sidebar-w: 248px; } /* Тёмная тема по умолчанию следует системной/браузерной настройке пользователя (M11/02 первоначально решил иначе -- только явный выбор, без auto -- но это оставляло пользователей с системной тёмной темой один на один с браузерным "форс-затемнением" сайта без объявленной поддержки тёмной схемы, а оно красит непредсказуемо и местами нечитаемо; см. `:not(.theme-light)` ниже и `.theme-dark` дальше -- ручной переключатель (M11/03, .nav__theme в base.html) переопределяет в любую сторону явным классом на , он всегда сильнее автоопределения). */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bg: #0b0e1a; --surface: #131829; --surface-2: #171d33; --ink: #eef1fb; --ink-soft: #8991ad; --border: #232a45; --border-strong: #2c3454; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --zone-green: #34d399; --zone-yellow: #fbbf24; --zone-red: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); } } /* Явный класс (ручной переключатель, M11/03) — сильнее системной настройки в обе стороны за счёт места в каскаде (после media-блока). */ .theme-dark { --bg: #0b0e1a; --surface: #131829; --surface-2: #171d33; --ink: #eef1fb; --ink-soft: #8991ad; --border: #232a45; --border-strong: #2c3454; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --zone-green: #34d399; --zone-yellow: #fbbf24; --zone-red: #f87171; /* --zone-black не используется в тёмной теме — см. .buffer-stat--black ниже */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; min-height: 100vh; /* own block-formatting context so a child's top margin (main's "margin: 12vh auto 0" below login/scan) can't collapse through body and expose html's background above body's own -- harmless otherwise, since nothing here relies on margin collapsing. */ display: flow-root; } h1, h2, h3 { font-family: var(--font); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.6em; } h1 { font-size: 1.5rem; } h2 { font-size: 1.05rem; margin-top: 1.6em; padding-bottom: 0.4em; border-bottom: 1px solid var(--border); } h3 { font-size: 0.95rem; } p { margin: 0 0 0.8em; } a { color: var(--accent); text-decoration: none; transition: opacity var(--ease); } a:hover { text-decoration: underline; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- иконки (inline SVG-спрайт из base.html) ---------- */ .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; } /* ---------- боковая навигация ---------- */ .sidebar-shell { position: relative; } .nav-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1001; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--sidebar-border); background: var(--sidebar-bg); cursor: pointer; } .nav-toggle__bar { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--sidebar-ink); } /* #primary-nav, not a bare `nav` selector -- production_groups/_nav.html also uses a semantic