/* ============================================================================
   Data Hub — единая дизайн-система (минимализм, редакционный стиль).
   Токены → базовая типографика → компоненты. Правило: цвета только из токенов,
   радиусы только из --r-*, фон наведения — всегда --hover (не --line).
   ========================================================================== */

:root {
  /* поверхность и текст (согласованы с палитрой графиков) */
  --bg:#fcfcfb;            /* фон страницы */
  --surface:#f4f3ef;       /* приподнятая поверхность: код, выделения */
  --hover:#efeeea;         /* фон при наведении */
  --fg:#171717;
  --muted:#5c5b55;
  --line:#e6e5e1;          /* границы — и только границы */
  /* действия */
  --accent:#0b5cad;
  --accent-weak:color-mix(in srgb, var(--accent) 8%, var(--bg));
  /* статусы (рост/снижение/предупреждение) — зарезервированы, не для серий графика */
  --good:#177245;
  --bad:#b3362c;
  --warn:#8a5a00;
  --warn-bg:color-mix(in srgb, #d08a1a 9%, var(--bg));
  /* форма */
  --r-s:8px;               /* контролы, кнопки, инпуты */
  --r-m:12px;              /* карточки, панели */
  --r-pill:999px;          /* чипы-пилюли */
  --shadow:0 8px 28px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1a1a19; --surface:#232322; --hover:#262624;
    --fg:#ececea; --muted:#a4a39a; --line:#33332f;
    --accent:#6cb0f5;
    --good:#5fc98e; --bad:#ef8a7f; --warn:#e8b464;
    --warn-bg:color-mix(in srgb, #d08a1a 14%, var(--bg));
    --shadow:0 8px 28px rgba(0,0,0,.5);
  }
}

/* ---- база -------------------------------------------------------------- */
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

h1 { margin:6px 0 8px; font-size:27px; line-height:1.25; letter-spacing:-.015em; }
/* заголовки секций — ЕДИНЫЙ стиль: маленькие капители, приглушённые */
h2, .section-title, .card h3, .builder h3 {
  font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); margin:26px 0 10px; }
h3 { font-size:15px; font-weight:650; margin:26px 0 8px; }
code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px;
  background:var(--surface); padding:1px 5px; border-radius:5px; }
.hint { color:var(--muted); }
.meta { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
.lead { color:var(--fg); font-size:15px; margin:12px 0 4px; max-width:70ch; }
.desc { color:var(--fg); }

/* ---- каркас страницы --------------------------------------------------- */
.topbar { display:flex; align-items:baseline; gap:14px; padding:13px 22px;
  border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:17px; color:var(--fg); text-decoration:none; letter-spacing:-.01em; }
.brand:hover { color:var(--accent); }
.tagline { color:var(--muted); font-size:13px; }
.navlink { margin-left:auto; color:var(--accent); text-decoration:none; font-size:13px; }
.container { max-width:900px; margin:0 auto; padding:26px 22px 40px; }
.container.wide { max-width:1280px; }
.foot { max-width:900px; margin:0 auto; padding:18px 22px 26px; color:var(--muted); font-size:12px;
  border-top:1px solid var(--line); }
.breadcrumb { color:var(--muted); font-size:13px; margin-bottom:10px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }

/* ---- формы и инпуты ---------------------------------------------------- */
.search input, .cmp-add input, .facet-filter, .combo-q, .builder-dim select, .asof-input {
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--fg);
  font-family:inherit; transition:border-color .12s; }
.search input:focus, .cmp-add input:focus, .combo-q:focus { border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px var(--accent-weak); }
.search input { width:100%; padding:12px 16px; font-size:16px; border-radius:var(--r-m); }
.cmp-add { margin:16px 0; position:relative; }
.cmp-add input { width:100%; max-width:460px; padding:8px 12px; font-size:14px; }
.facet-filter { width:100%; margin:0 0 5px; padding:4px 8px; font-size:13px; }
.combo-q { max-width:300px; padding:6px 9px; font-size:13px; }
.builder-dim select { max-width:300px; padding:6px 8px; }
.asof-input { padding:3px 8px; font-size:13px; }

/* ---- кнопки: одна система ---------------------------------------------- */
a.tbtn, #slice-go, .facet-more {
  font:600 13px/1.4 inherit; font-family:inherit; cursor:pointer; text-decoration:none; }
a.tbtn { display:inline-block; padding:5px 12px; border:1px solid var(--line);
  border-radius:var(--r-s); color:var(--fg); }
a.tbtn:hover { background:var(--hover); border-color:var(--muted); }
a.tbtn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
a.tbtn.active:hover { background:var(--accent); }
#slice-go { padding:8px 14px; border:0; border-radius:var(--r-s); background:var(--accent); color:#fff; }
#slice-go:hover { filter:brightness(1.08); }
.facet-more { margin:3px 0 0; padding:2px 6px; font-weight:400; font-size:12px; color:var(--accent);
  background:none; border:0; }
.facet-more:hover { text-decoration:underline; }

/* ---- чипы-пилюли: одна геометрия, вариации только цветом ----------------
   (частоты, методология, происхождение, свежесть, активные фильтры) */
.freq-chip, .meta-chip, .lineage-chip, .fresh-badge, .chip {
  display:inline-flex; align-items:baseline; gap:6px; padding:2px 10px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:12px; line-height:1.5; color:var(--fg); background:var(--bg);
  text-decoration:none; vertical-align:middle; white-space:nowrap; }
.freq-chip { color:var(--muted); margin-left:6px; font-weight:500; }
.meta-chip { cursor:help; }
.meta-chip-kind { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.lineage-chip { color:var(--accent); cursor:help; }
a.lineage-chip:hover { background:var(--hover); border-color:var(--muted); }
.lineage-break { color:var(--muted); }
.fresh-badge { font-size:11px; margin-left:6px; cursor:help; }
.fresh-overdue { color:var(--warn); background:var(--warn-bg); border-color:color-mix(in srgb, var(--warn) 35%, var(--line)); }
.fresh-archival { color:var(--muted); }
/* активные фильтры поиска — те же пилюли, лёгкая акцентная заливка */
.chip { background:var(--accent-weak); }
.chip:hover { background:color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.chip-x { color:var(--muted); font-weight:700; }
.chip-clear { font-size:13px; color:var(--accent); text-decoration:none; margin-left:4px; }
.chip-clear:hover { text-decoration:underline; }
.meta-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; }
.meta-chips.compact { display:inline-flex; gap:5px; margin:3px 0 0; }
.meta-chips.compact .meta-chip { padding:1px 8px; font-size:11px; }
.lineage-row { margin:8px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lineage-lbl { color:var(--muted); font-size:12.5px; }
.catalog-filter { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 14px; }

/* код классификатора — «тег-код», выделен поверхностью */
.classifier-code { background:var(--surface); border:1px solid var(--line); color:var(--fg);
  padding:1px 8px; border-radius:6px; font-weight:600; letter-spacing:.02em; cursor:help; }

/* ---- карточки и панели: один радиус, одна граница ----------------------- */
.card, .featured-card, .builder, #cmp-bar, .combo-list, .cmp-add-list {
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--bg); }
.cards { display:flex; gap:16px; flex-wrap:wrap; margin:18px 0; }
.card { flex:1 1 220px; padding:14px 16px; }
.card h3 { margin:0 0 8px; }
.card ul { list-style:none; padding:0; margin:0; }
.card li { display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.card .fv { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px; }

/* ---- списки результатов (поиск) ----------------------------------------- */
.block { margin:22px 0; }
.count { display:inline-block; min-width:20px; padding:0 7px; margin-left:6px; font-size:11.5px;
  font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); font-variant-numeric:tabular-nums; }
.concept-list, .series-list { list-style:none; padding:0; margin:0; }
.concept-list li, .series-list li { padding:10px 0; border-bottom:1px solid var(--line); }
a.concept, a.series { color:var(--accent); text-decoration:none; font-weight:600; }
a.concept:hover, a.series:hover { text-decoration:underline; }
.result-toolbar { margin:0 0 12px; }
.active-toggle { display:inline-flex; align-items:center; gap:7px; font-size:14px; cursor:pointer; }
.active-toggle input { width:15px; height:15px; cursor:pointer; }
.active-filters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px; }
.fresh { color:var(--muted); font-size:12px; }
.fresh.stale { color:var(--bad); }

/* ---- drill-навигация (browse): строки со счётчиком справа --------------- */
.drill-list { list-style:none; margin:12px 0; padding:0; max-width:720px; }
.drill-list li { margin:0; }
a.drill { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:8px 10px; border-radius:var(--r-s); text-decoration:none; color:var(--accent);
  border-bottom:1px solid var(--line); }
a.drill:hover { background:var(--hover); }
a.drill .fv { min-width:0; }
a.drill .count { flex:0 0 auto; }
.stale-mark { color:var(--muted); font-size:11.5px; margin-left:6px; white-space:nowrap; cursor:help; }
.drill-stale .fv { color:var(--muted); }
.drill-stale { text-decoration:none; }

/* ---- страница ряда ------------------------------------------------------ */
/* сводка-витрина (FRED): последнее значение крупно */
.headline { margin:14px 0 10px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; }
.headline-main { display:flex; align-items:baseline; gap:9px; }
.headline-value { font-size:36px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.headline-unit { color:var(--muted); font-size:15px; }
.headline-period { color:var(--muted); font-size:13px; }
.headline-deltas { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; }
.delta { white-space:nowrap; cursor:default; font-variant-numeric:tabular-nums; }
.delta-up { color:var(--good); }
.delta-down { color:var(--bad); }
.delta-flat { color:var(--muted); }

.series-toolbar { display:flex; gap:8px; margin:12px 0 2px; flex-wrap:wrap; }
.transform-select, .range-select { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; }
.range-select { margin:8px 0 6px; }
.unit-transform { color:var(--muted); font-weight:400; }
.derived-note { color:var(--muted); font-size:12px; margin:4px 0 0; }
.chart { height:340px; margin:14px 0; }

.props { display:grid; grid-template-columns:max-content 1fr; gap:5px 18px; margin:14px 0; font-size:14px; }
.props dt { color:var(--muted); }
.props dd { margin:0; }
.tech-details { margin:6px 0 10px; }
.tech-details summary { cursor:pointer; color:var(--muted); font-size:13px; }
.tech-details summary:hover { color:var(--fg); }
.tech-details[open] summary { margin-bottom:6px; }
.related-list { list-style:none; margin:6px 0 18px; padding:0; }
.related-list li { margin:4px 0; font-size:13.5px; }
.perma-link { font-size:13px; }

/* плашки состояния ряда */
.latest-badge { display:inline-flex; align-items:baseline; gap:8px; margin:10px 0 4px;
  padding:6px 12px; font-size:15px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--accent-weak); }
.latest-badge strong { font-size:17px; color:var(--accent); }
.latest-badge .range { color:var(--muted); font-size:13px; }
.stale-badge { display:block; margin:10px 0; padding:8px 12px; font-size:14px;
  border-radius:var(--r-s); border:1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background:var(--warn-bg); }
.stale-badge strong { color:var(--warn); }
.continuity-note { font-size:13.5px; }
.hint-badge { border-bottom:1px dotted var(--muted); cursor:help; color:var(--muted); }

/* ---- таблицы ------------------------------------------------------------ */
table { width:100%; border-collapse:collapse; margin:8px 0; overflow-x:auto; display:block; }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);
  font-size:13.5px; white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.05em; }
td { font-variant-numeric:tabular-nums; }
tbody tr:hover td { background:var(--hover); }
.wide-table { width:100%; }
.wide-table td:first-child { white-space:normal; }
.home-table td, .home-table th { font-size:13.5px; }
.cmp-list { margin-top:14px; }

/* ---- фасеты (поиск) ------------------------------------------------------ */
.results-layout.has-facets { display:grid; grid-template-columns:190px 1fr; gap:26px; align-items:start; }
.results-layout.wide-facets { grid-template-columns:300px 1fr; }
.results-main { min-width:0; }
.facets { position:sticky; top:16px; font-size:13px; }
.facet-group { margin:0 0 16px; }
.facet-group h3 { margin:0 0 6px; font-size:11px; font-weight:650; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); display:flex; justify-content:space-between;
  align-items:baseline; }
.facet-group h3 .fc { font-weight:400; }
.facet-group ul { list-style:none; padding:0; margin:0; }
.facet-group li { padding:1px 0; border:0; }
a.facet { display:flex; justify-content:space-between; gap:8px; align-items:baseline;
  padding:3px 7px; border-radius:6px; text-decoration:none; color:var(--fg); }
a.facet:hover { background:var(--hover); }
a.facet.on { background:var(--accent); color:#fff; font-weight:600; }
a.facet.on .fc { color:#fff; }
a.facet .fv { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.facet .fc { color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px; }
@media (max-width:640px) { .results-layout.has-facets { grid-template-columns:1fr; } }

/* ---- слайс-билдер -------------------------------------------------------- */
.builder { padding:14px 16px; margin:16px 0; }
.builder h3 { margin:0 0 10px; }
.builder-row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.builder-dim { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.dim-count { color:var(--muted); font-weight:400; font-size:12px; }
.combo-hint { font-size:11.5px; margin-top:2px; }
.ind-builder .builder { border:0; padding:0; margin:0; }
.ind-builder .builder-row { flex-direction:column; align-items:stretch; gap:12px; }
.ind-builder .builder-dim, .ind-builder .combo { width:100%; }
.ind-builder .combo-q, .ind-builder .builder-dim select { max-width:none; width:100%; }
.ind-builder .combo-list { width:100%; }
.ind-builder #slice-go { width:100%; margin-top:2px; }
.combo { position:relative; }
.combo-list { display:none; position:absolute; top:100%; left:0; z-index:20; width:300px;
  max-height:260px; overflow-y:auto; margin:2px 0 0; padding:4px; list-style:none;
  box-shadow:var(--shadow); }
.combo.open .combo-list { display:block; }
.combo-list li { margin:0; }
.combo-opt { display:block; width:100%; text-align:left; padding:6px 8px; border:0; border-radius:6px;
  background:transparent; color:var(--fg); font-size:13px; cursor:pointer; font-family:inherit; }
.combo-opt:hover, .combo-opt:focus { background:var(--hover); }
.combo-opt .code { color:var(--muted); font-size:12px; }
.combo-empty { padding:6px 8px; color:var(--muted); font-size:13px; }

/* ---- сравнение (FRED Add Line) ------------------------------------------ */
.has-pick { display:flex; gap:9px; align-items:flex-start; }
.has-pick .cmp-check { margin-top:5px; flex:0 0 auto; }
.has-pick .pick-body { min-width:0; }
.cmp-check { width:15px; height:15px; cursor:pointer; }
#cmp-bar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:50;
  display:flex; gap:14px; align-items:center; padding:9px 16px; font-size:14px;
  box-shadow:var(--shadow); }
#cmp-bar .cmp-go, #cmp-bar .cmp-exp { color:var(--accent); text-decoration:none; font-weight:600; }
#cmp-bar .cmp-go:hover, #cmp-bar .cmp-exp:hover { text-decoration:underline; }
#cmp-bar .cmp-clear { border:0; background:none; color:var(--muted); cursor:pointer; font-size:13px; }
#cmp-chart { width:100%; height:460px; }
.cmp-controls { display:flex; gap:18px; align-items:center; margin:8px 0 4px; }
.cmp-add-list { margin:6px 0 0; padding:0; list-style:none; max-width:640px; overflow:hidden; }
.cmp-add-list li { margin:0; }
.cmp-add-list a { display:block; padding:7px 12px; text-decoration:none; font-size:13.5px; }
.cmp-add-list a:hover { background:var(--hover); }

/* ---- главная ------------------------------------------------------------- */
.home-block { margin:30px 0 8px; }
.home-more { font-size:12px; font-weight:400; margin-left:8px; text-transform:none; letter-spacing:0; }
.featured-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.featured-card { display:flex; flex-direction:column; gap:4px; padding:15px 17px;
  text-decoration:none; transition:border-color .12s, background .12s; }
.featured-card:hover { border-color:var(--accent); background:var(--accent-weak); }
.featured-label { color:var(--fg); font-weight:600; font-size:14px; }
.featured-value { font-size:26px; font-weight:700; letter-spacing:-.015em; margin:2px 0;
  font-variant-numeric:tabular-nums; }
.featured-sub { color:var(--muted); font-size:12.5px; }
.featured-foot { font-size:12px; }

/* ---- тайл-карта субъектов РФ --------------------------------------------- */
#district-map { margin:10px 0 4px; overflow-x:auto; }
.tilemap { display:grid; gap:3px; min-width:640px; }
a.tile { display:flex; flex-direction:column; justify-content:center; align-items:center;
  aspect-ratio:1/1; border-radius:4px; text-decoration:none; padding:2px; text-align:center;
  border:1px solid rgba(0,0,0,.10); overflow:hidden; transition:transform .07s ease; }
a.tile:hover { transform:scale(1.12); outline:2px solid var(--accent); z-index:2; }
a.tile.current { outline:3px solid var(--accent); box-shadow:0 0 0 2px var(--bg), 0 0 0 5px var(--accent); z-index:3; }
a.tile .tname { font-size:9px; line-height:1.05; opacity:.85; white-space:nowrap; }
a.tile .tval { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.map-note { color:var(--muted); font-size:12px; margin:8px 0 0; }