/* Единая система оформления (05.11.2026, план — _заметки/Карта_дашборда_и_план_дизайна.md).
   Один файл на все контексты: страница, окно здания (sld.html) и аналитика (теневое дерево), поэтому без префикса html[...].
   Шкала: шрифт 11 12 13 15 17 22 28, насыщенность 400 600 700, скругления 8 12 18 28 и таблетка. tests/test_design_system.py держит её.
   Роли: сегменты, основная кнопка, обычная кнопка, кнопка-ссылка, поле, чип, карточка, таблица. Цвета — только токены темы. */

/* ---------- текст ---------- */
body, :host { font-size: 13px; line-height: 1.45; }
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }
h1 { font-size: 22px; font-weight: 700; line-height: 1.25; }
h2 { font-size: 17px; font-weight: 700; line-height: 1.3; }
h3, h4 { font-size: 15px; font-weight: 700; line-height: 1.35; }
h5, h6 { font-size: 11px; font-weight: 600; }
b, strong { font-weight: 700; }
small { font-size: 11px; }
table { font-size: 12px; }
th { font-size: 11px; font-weight: 600; color: var(--tw-muted); }
summary { cursor: pointer; font-weight: 600; }

/* ---------- поле и список ---------- */
:is(select, textarea, input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden])):not(header.toolbar *, .shell-month *, .twf-head *) {
  box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--tw-line-field) !important; border-radius: var(--rad-md) !important;
  background-color: var(--tw-field) !important; color: var(--tw-text-strong) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2;
}
textarea:not(header.toolbar *) { height: auto; min-height: 64px; padding: 8px 10px; }
:is(select, textarea, input):not(header.toolbar *, .shell-month *, .twf-head *):focus { outline: none; border-color: var(--tw-line-focus) !important; box-shadow: 0 0 0 3px var(--tw-gold-fill); }
input::placeholder, textarea::placeholder { color: var(--tw-muted); opacity: 1; }

/* ---------- основная кнопка ---------- */
.primary-button, #clear, .btn.primary, #sldPickRun, #sldPickApply, #pfPick .pk-primary, .brun, .dpl-tabs + .primary {
  height: 32px; padding: 0 16px; border: 0 !important; border-radius: var(--rad-pill) !important; background: var(--acc-grad) !important; color: var(--on-acc) !important;
  font-size: 12px !important; font-weight: 600 !important; cursor: pointer; box-shadow: var(--btn-sh) !important;
}

/* ---------- обычная кнопка ---------- */
.action, .show-more, .reset, .secondary-button, .np-btn, .sld-docs, .sh-back, .sh-gear, .local-reset button, #registry-csv, #dpl-csv, #dpl-reset, #dpl-bridge-open, #dpl-open-history, #quality-actions button,
.bexp button, .pg-about > button, .pg-pagination button, .reference-page button, #nsCarry button, .ns-calendar-controls button, #reg-reset {
  min-height: 32px; height: auto; padding: 4px 14px; border: 0 !important; border-radius: var(--rad-pill) !important; background: var(--gl-fill-2) !important; box-shadow: var(--gl-lens-sh) !important;
  color: var(--tw-text-strong) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer;
}
:is(.action, .show-more, .reset, .secondary-button, .np-btn, .sld-docs, .sh-back, .sh-gear, .local-reset button, .bexp button, .pg-pagination button, .reference-page button):hover:not(:disabled) { color: var(--tw-gold-ink) !important; }
button:disabled { opacity: .55 !important; color: var(--tw-muted) !important; cursor: not-allowed; }

/* ---------- кнопка-ссылка ---------- */
.text-button:not(.account *), .dpl-link, .row-name, .sh-open, .node-open, .pg-event-place button {
  padding: 0 2px; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--tw-cyan) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer;
}
:is(.text-button, .dpl-link, .row-name, .sh-open, .node-open):hover { text-decoration: underline; }

/* ---------- сегменты: вкладки любого уровня выглядят одинаково ---------- */
.section-switch, .dpl-tabs, #pareto-season, .chips, .seg {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border-radius: var(--rad-lg); background: var(--gl-seg);
}
:is(.section-switch, .dpl-tabs, #pareto-season, .chips, .seg) > button, .shell-seg > button, .local-filter, .fs-chip {
  min-height: 30px; padding: 0 12px; border: 0 !important; border-radius: var(--rad-pill) !important; background: transparent !important; box-shadow: none !important;
  color: var(--tw-muted) !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; cursor: pointer;
}
:is(.section-switch, .dpl-tabs, #pareto-season, .chips, .seg, .shell-seg) > button:hover:not(:disabled), .local-filter:hover, .fs-chip:hover { color: var(--tw-text-strong) !important; }
:is(.section-switch, .dpl-tabs, #pareto-season, .chips, .seg, .shell-seg:not(.phase)) > button:is(.on, .active, [aria-pressed=true], [aria-selected=true]), .local-filter.active, .fs-chip:is(.on, .active, [aria-pressed=true]) {
  background: var(--gl-on) !important; color: var(--tw-text-strong) !important; font-weight: 700 !important; box-shadow: var(--gl-on-sh) !important;
}

/* ---------- карточка ---------- */
.sh-card, .record-card, .settings-card, .section, .pareto-card, .season-card, .bcard, .kpi, .side-panel .kpis div {
  border: 0 !important; border-radius: var(--rad-lg) !important; background: var(--gl-fill-2) !important; box-shadow: var(--gl-lens-sh) !important;
}

/* ---------- таблица и плотная подложка: контент читается поверх стекла ---------- */
.table-wrap, .reference-table, .sw-table, .bt, .journal-wrap { border: 0 !important; border-radius: var(--rad-md) !important; background: var(--tw-dense) !important; }
th, td { border-color: var(--tw-line-3) !important; }

/* ---------- чип ---------- */
.source-chip, .note-chip, .journal-kind, .src-b, .env-badge { border-radius: var(--rad-pill) !important; font-size: 11px !important; font-weight: 600 !important; }

/* ---------- заголовок экрана аналитики: без своей заливки, как заголовок листа ---------- */
.hero { background: none !important; color: var(--tw-text-strong) !important; border-bottom: 0 !important; padding: 8px 0 14px !important; }
.hero .eyebrow, .eyebrow { color: var(--tw-gold-ink) !important; }

/* ---------- рамка ---------- */
.tab-buttons button { border-radius: 0 !important; }
.page-title { margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--tw-line); font-size: 15px; font-weight: 700; color: var(--tw-text-strong); white-space: nowrap; }
.page-title[hidden] { display: none; }
.sh-sub[hidden] { display: none; }
.sld-bar .sh-crumbs { flex: none; flex-wrap: nowrap; white-space: nowrap; }
.sld-bar .sh-crumbs .cur { font-size: 15px; }
.sh-crumbs a { font-size: 12px; font-weight: 600; }
.leg-i { color: var(--tw-muted) !important; }

/* ---------- переключатель «было / стало»: главный выбор, активная сторона с акцентом ---------- */
.shell-seg.phase > button.on { background: var(--phase-bg) !important; color: var(--phase-ink) !important; font-weight: 600 !important; box-shadow: var(--phase-sh) !important; }

/* ---------- заголовок сетевого графика: итог своей строкой, подписи ниток не обрезаются ---------- */
.ns-head { flex-wrap: wrap; row-gap: 6px; }
.ns-lks { flex: 1 1 0; min-width: 0; }
.ns-total { flex: 1 1 100%; white-space: normal; }

/* ---------- окно СЛД рядом с левой панелью: таблица зданий помещается, на ноутбуке тоже ---------- */
.sh-back { white-space: nowrap; }
.sw-sum, .sw-fast, .sw-series, .sw-loss { flex: none; }   /* в столбце окна блоки не сжимаются до нуля */
.sw-sum { overflow-x: auto; }
.sw-fast input { width: 104px; }
.sw-table th { white-space: normal; vertical-align: bottom; }
.sw-table th, .sw-table td { padding-left: 6px; padding-right: 6px; }
.sw-table td:first-child, .sw-table td:last-child { white-space: normal; min-width: 110px; }
.sw-table td select { width: 122px; padding: 0 4px 0 8px; }
.sw-table td input { width: 64px; padding: 0 4px; text-align: center; }
@media (max-width: 1500px) { .sld-bar .muted { display: none; } .sld-bar { gap: 10px; } .sld-bar select { max-width: 200px; } }

/* ---------- окно «СЛД целиком» вкладками, как окно здания: кадры зданий не убираем из разметки, иначе они перезагрузятся ---------- */
.sld-whole { position: relative; }
.sw-bar { display: flex; align-items: center; gap: 18px; flex: none; }
.sw-strip { display: flex; align-items: baseline; gap: 18px; margin-left: auto; font-size: 12px; color: var(--tw-muted); white-space: nowrap; }
.sw-strip b { font-size: 13px; font-weight: 700; color: var(--tw-text-strong); }
.sld-whole[data-wtab=summary] .sw-strip { display: none; }
.sw-set { flex: none; overflow-x: auto; }
.sld-whole:not([data-wtab=summary]) > :is(.sw-sum, .sw-series), .sld-whole:not([data-wtab=settings]) > :is(.sw-set, .sw-fast), .sld-whole:not([data-wtab=details]) > .sw-loss { display: none; }
.sld-whole[data-wtab=details] > .sw-loss:empty::before { content: "Потери появятся, когда здания досчитаются."; color: var(--tw-muted); }
.sld-whole:not([data-wtab=graph]) > .sw-graphs { position: absolute; left: -200vw; width: 100%; visibility: hidden; }
.sw-sum td .text-button, .sw-set td .text-button { text-align: left; white-space: normal; }
.sw-set .sw-table td { vertical-align: middle; }
.sw-set .sw-table td select { width: 200px; }

/* ---------- живость (этап «Жизнь», motion.js): бегунок переключателей и свет за курсором ---------- */
.has-thumb { position: relative; }
.has-thumb > :not(.seg-thumb) { position: relative; z-index: 1; }
.has-thumb.has-thumb.has-thumb > button:is(.on, .active, [aria-pressed=true], [aria-selected=true]) { background: transparent !important; box-shadow: none !important; }
.seg-thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--rad-pill); background: var(--gl-on); box-shadow: var(--gl-on-sh); pointer-events: none; transition: transform var(--t-slide, .3s) var(--ease-slide, ease), width var(--t-slide, .3s) var(--ease-slide, ease), height var(--t-slide, .3s) var(--ease-slide, ease); }
.shell-seg.phase > .seg-thumb { background: var(--phase-bg); box-shadow: var(--phase-sh); }
.tab-buttons > .seg-thumb { border-radius: 0; }
:is(.sh-card, .sh-kpi, .shell-tt, .shell-sc, .wt-kpi, .kpi)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--glint), transparent 72%); }
:is(.sh-card, .sh-kpi, .shell-tt, .shell-sc, .wt-kpi, .kpi).lit-on { position: relative; }
:is(.sh-card, .sh-kpi, .shell-tt, .shell-sc, .wt-kpi, .kpi).lit-on::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }