/* Экобаланс.РЕГИОН — общие стили симулятора и админ-панели.
   Фирменный цвет вынесен в --forest: поменяйте его здесь, остальное подстроится. */

:root {
  --forest: #344720;       /* фирменный зелёный */
  --forest-deep: #26351a;
  --moss: #5e7a3c;
  --sage: #7e8a71;         /* линии и метки на графиках */
  --muted: #5a664d;        /* второстепенный текст */
  --paper: #f3f5ee;        /* фон страницы */
  --card: #ffffff;
  --ink: #1b2415;
  --line: #dde2d3;
  --wash: #e9eee0;         /* мягкая заливка */
  --good: #2c6a2a;
  --bad: #a4451a;
  --lime: #c9e58f;         /* сценарий на тёмной панели */
  --peach: #ffb48a;

  --display: "Geologica", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui: 0.8;               /* плотность широкого экрана: 1 — крупно, 0.8 — как при масштабе браузера 80 % */
  --z: 1;                  /* действующий масштаб страницы: на широком экране равен --ui */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--body);
}
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 16px; }
h2 { font-size: 18px; line-height: 1.25; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
[hidden] { display: none !important; }
.sub { color: var(--muted); font-size: 13px; text-wrap: pretty; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.flat { color: var(--muted); font-weight: 400; }

/* ---------- шапка ----------
   Светлая, на фоне страницы: единственное тёмное пятно экрана — карточка индекса. */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  padding: 12px clamp(16px, 2vw, 28px) 4px;
  max-width: 1720px;
  margin: 0 auto;
  width: 100%;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--forest); text-decoration: none; border-radius: 10px; }
.mark { flex: none; width: 34px; height: 34px; }
.title { display: flex; align-items: baseline; gap: 14px; min-width: 0; color: var(--ink); }
.title strong { font: 600 21px/1.15 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.title strong i { font-style: normal; color: var(--moss); }
.title > span { font-size: 13.5px; color: var(--muted); white-space: nowrap; padding-left: 14px; border-left: 1px solid #c9d0bd; }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.region {
  appearance: none;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23344720' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 38px 8px 16px;
  max-width: 300px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.region:hover:not(:disabled) { border-color: var(--sage); }

.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
.top .btn.ghost { border-color: #c9d0bd; }
.btn.solid { background: var(--forest); color: #fff; }
.btn.solid:hover { background: var(--forest-deep); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover:not(:disabled) { background: var(--wash); border-color: var(--sage); }
.btn.small { padding: 5px 13px; font-size: 13px; }
a.btn { text-decoration: none; display: inline-block; color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }

.notice {
  background: #fbf3d9;
  border-bottom: 1px solid #ecdca6;
  padding: 8px clamp(16px, 2vw, 28px);
  font-size: 13px;
}
.notice a, .foot-meta a { color: var(--forest); }

/* ---------- раскладка ----------
   Слева решения (ползунки), справа результат: индекс и то, из чего он сложился.
   На узком экране блоки идут друг за другом: индекс, ползунки, базовые показатели. */

.work {
  display: grid;
  gap: 16px;
  padding: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.col { display: contents; }
.gutter, .drop-mark { display: none; }
.index { order: -1; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }

/* ---------- интегральный индекс — главный элемент экрана ---------- */

.index {
  background: var(--forest);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 24px;
  min-width: 0;
}
.index-in { display: grid; gap: 16px 36px; min-width: 0; }
.index-main { display: flex; flex-direction: column; min-width: 0; }
.index .sub { color: rgb(255 255 255 / 0.74); margin-top: 2px; }
.hero { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 -4px; }
.hero-value {
  --number-flow-mask-height: 0.12em;
  font: 600 72px/1 var(--display);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.hero-scale { font-size: 14px; color: rgb(255 255 255 / 0.74); }
.index .delta { font-weight: 500; font-size: 14.5px; font-variant-numeric: tabular-nums; text-wrap: balance; }
.index .delta.good { color: #d4eaa9; }
.index .delta.bad { color: #ffc9a8; }
.index .delta.flat { color: rgb(255 255 255 / 0.74); font-weight: 400; }
.second {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13.5px;
  color: rgb(255 255 255 / 0.82);
  font-variant-numeric: tabular-nums;
}
.second::before { content: ""; display: block; height: 1px; background: rgb(255 255 255 / 0.18); margin-bottom: 10px; }
.second b { font-family: var(--display); font-weight: 600; color: #fff; }

.index-plot { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.legend li, .legend > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.index .legend { color: rgb(255 255 255 / 0.74); }

/* ---------- графики ---------- */

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.chart svg.panning { cursor: grabbing; }
.full .chart svg { touch-action: none; }
.chart.fill { height: 200px; }
.chart.fill svg { position: absolute; inset: 0; height: 100%; }
.chart .zone { fill: var(--wash); opacity: 0.55; }
.chart .zone-label { fill: var(--muted); font-size: 11.5px; letter-spacing: 0.02em; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chart .mark { stroke: var(--sage); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .mark-label { fill: var(--muted); font-size: 11px; }
.chart .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.history { stroke: var(--ink); stroke-width: 1.5; }
.chart .line.baseline { stroke: var(--sage); stroke-width: 2; stroke-dasharray: 1 6; }
.chart .line.scenario { stroke: var(--moss); stroke-width: 3.5; }
.chart .line.extra { stroke: #b0842b; stroke-width: 1.5; }
.chart .dot.extra { fill: #b0842b; }
.chart .line.scenario.bad { stroke: var(--bad); }
.chart .gap { stroke: none; opacity: 0.2; }
.chart .gap.good { fill: var(--moss); }
.chart .gap.bad { fill: var(--bad); }
.chart .dot { stroke: var(--card); stroke-width: 2; }
.chart .dot.history { fill: var(--ink); }
.chart .dot.start { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.chart .dot.baseline { fill: var(--sage); }
.chart .dot.scenario { fill: var(--moss); }
.chart .dot.scenario.bad { fill: var(--bad); }
.chart .end { font: 500 13px var(--display); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .end.scenario { font-weight: 600; font-size: 15px; fill: var(--ink); }
.chart .end-delta { font: 500 12px var(--body); font-variant-numeric: tabular-nums; }
.chart .end-delta.good { fill: var(--good); }
.chart .end-delta.bad { fill: var(--bad); }
.chart .cross { stroke: var(--ink); stroke-width: 1; opacity: 0.4; }

.key { display: inline-block; width: 18px; height: 0; border-top: 3.5px solid var(--moss); border-radius: 2px; }
.key.history { border-top: 2px solid var(--ink); }
.key.baseline { border-top: 2px dotted var(--sage); }
.key.extra { border-top: 2px solid #b0842b; }
.legend .extra { display: none; }
.legend.with-extra .extra { display: flex; }

/* значки и кнопки управления графиком */
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ctools { display: flex; align-items: center; gap: 1px; }
.ctools button, .icon-btn, .grip {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ctools button:hover:not(:disabled), .icon-btn:hover { background: var(--wash); color: var(--ink); }
.ctools button:disabled { opacity: 0.32; cursor: default; }
.ctools .sep { width: 1px; height: 16px; margin: 0 5px; background: var(--line); }
.plot-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.plot-head .legend { flex: 1; min-width: 0; }
.plot-tools { flex: none; }
.head-tools { flex: none; display: flex; align-items: center; gap: 4px; }
.index .ctools button, .index .grip { color: rgb(255 255 255 / 0.7); }
.index .ctools button:hover:not(:disabled), .index .grip:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.index .ctools .sep { background: rgb(255 255 255 / 0.22); }
.index :focus-visible { outline-color: var(--lime); }

/* окна: ручка для перестановки, окно с графиком */
.grip { display: none; cursor: grab; touch-action: none; }
.grip:hover { background: var(--wash); color: var(--ink); }
.cwin { display: flex; flex-direction: column; height: 340px; padding: 10px 14px 12px; }
.cwin-head { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 -4px; }
.cwin-series {
  appearance: none;
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 24px 4px 6px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235a664d' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 9px;
  font: 600 15px/1.3 var(--display);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.cwin-series:hover { border-color: var(--line); background-color: var(--paper); }
.cwin-cap { margin: 2px 2px 6px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cwin-cap b { color: var(--ink); font-weight: 600; }
.cwin .chart.fill { flex: 1; min-height: 0; height: auto; }
.flash { animation: flash 0.9s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--moss); } 100% { box-shadow: 0 0 0 3px transparent; } }
.swatch { width: 10px; height: 10px; border-radius: 3px; }
.swatch.good { background: var(--moss); }
.swatch.bad { background: var(--bad); }
.tickmark { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); }

.tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgb(27 36 21 / 0.14);
  padding: 9px 11px;
  font-size: 12.5px;
  min-width: 172px;
}
.tip-year { font: 600 13px var(--display); margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.6; }
.tip-row span { flex: 1; color: var(--muted); }
.tip-row b { font-variant-numeric: tabular-nums; }
.tip-delta { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); font-weight: 500; font-variant-numeric: tabular-nums; }

/* на тёмной панели индекса */
.index .key { border-top-color: var(--lime); }
.index .key.history { border-top-color: rgb(255 255 255 / 0.85); }
.index .key.baseline { border-top-color: rgb(255 255 255 / 0.6); }
.index .tip .key { border-top-color: var(--moss); }
.index .tip .key.history { border-top-color: var(--ink); }
.index .tip .key.baseline { border-top-color: var(--sage); }
.index .chart .zone { fill: #fff; opacity: 0.05; }
.index .chart .grid { stroke: rgb(255 255 255 / 0.13); }
.index .chart .tick, .index .chart .mark-label, .index .chart .zone-label { fill: rgb(255 255 255 / 0.66); }
.index .chart .end-delta.good { fill: #d4eaa9; }
.index .chart .end-delta.bad { fill: #ffc9a8; }
.index .chart .mark { stroke: rgb(255 255 255 / 0.45); }
.index .chart .line.history { stroke: rgb(255 255 255 / 0.85); }
.index .chart .dot { stroke: var(--forest); }
.index .chart .dot.history { fill: #fff; }
.index .chart .dot.start { fill: var(--forest); stroke: #fff; }
.index .chart .line.baseline { stroke: rgb(255 255 255 / 0.6); }
.index .chart .dot.baseline { fill: #b9c3ad; }
.index .chart .line.scenario { stroke: var(--lime); }
.index .chart .line.scenario.bad { stroke: var(--peach); }
.index .chart .dot.scenario { fill: var(--lime); }
.index .chart .dot.scenario.bad { fill: var(--peach); }
.index .chart .gap.good { fill: var(--lime); }
.index .chart .gap.bad { fill: var(--peach); }
.index .chart .end { fill: rgb(255 255 255 / 0.74); }
.index .chart .end.scenario { fill: #fff; }
.index .chart .cross { stroke: #fff; }

/* ---------- управляемые показатели ---------- */

.decide { display: flex; flex-direction: column; padding-bottom: 8px; }
.decide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.decide-head .sub { margin-top: 2px; }
.decide-head .btn { flex: none; }

.budget {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--wash);
  font-size: 13.5px;
}
.budget-label { font-weight: 600; white-space: nowrap; }
.budget-text { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.budget-text b { font: 600 15px var(--display); color: var(--ink); }
.pips { flex: 1; display: flex; gap: 4px; min-width: 0; }
.pips i { position: relative; flex: 1; max-width: 44px; height: 8px; border-radius: 4px; background: var(--card); box-shadow: inset 0 0 0 1px #b9c3ad; overflow: hidden; }
.pips i b { position: absolute; inset: 0 auto 0 0; background: var(--forest); }
.budget.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

.levers { display: grid; }
.lever {
  --zero: 50%;
  --pos: 50%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 122px;
  grid-template-areas: "n label value" ". control step";
  align-content: center;
  align-items: center;
  gap: 2px 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  min-width: 0;
  transition: background-color 0.15s;
}
.lever + .lever { box-shadow: 0 -1px 0 var(--line); }
.lever:hover { background: var(--paper); }
.lever-n {
  grid-area: n;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 11.5px/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--card);
  transition: background-color 0.2s, color 0.2s;
}
.lever.moved .lever-n { background: var(--forest); color: #fff; box-shadow: none; }
/* название — кнопка: открывает справку по данным Росстата */
.lever-name {
  grid-area: label;
  justify-self: start;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.25;
  text-wrap: pretty;
  border-radius: 4px;
}
.lever-name .ic { width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; color: var(--sage); transition: color 0.15s; }
.lever-name:hover { color: var(--forest); text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.lever-name:hover .ic { color: var(--forest); }
.lever number-flow { --number-flow-mask-height: 0.1em; grid-area: value; justify-self: end; font: 600 16px/1.2 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lever-step { grid-area: step; justify-self: end; font-size: 12.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lever.moved .lever-step { color: var(--forest); font-weight: 600; }
.lever-control { grid-area: control; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nudge {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s;
}
.nudge:hover:not(:disabled) { background: var(--wash); border-color: var(--sage); }
.nudge:disabled { opacity: 0.35; cursor: default; }
.range { position: relative; flex: 1; min-width: 0; }
.range input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--wash) min(var(--zero), var(--pos)),
    var(--moss) min(var(--zero), var(--pos)),
    var(--moss) max(var(--zero), var(--pos)),
    var(--wash) max(var(--zero), var(--pos)));
}
.range input::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--wash) min(var(--zero), var(--pos)),
    var(--moss) min(var(--zero), var(--pos)),
    var(--moss) max(var(--zero), var(--pos)),
    var(--wash) max(var(--zero), var(--pos)));
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--forest);
  box-shadow: 0 1px 3px rgb(27 36 21 / 0.25);
  transition: transform 0.12s, background-color 0.15s;
  cursor: grab;
}
.range input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--forest);
}
.lever.moved .range input::-webkit-slider-thumb { background: var(--forest); }
.lever.moved .range input::-moz-range-thumb { background: var(--forest); }
.range input:active { cursor: grabbing; }
.range input:active::-webkit-slider-thumb { transform: scale(1.15); }
/* деления шкалы: под дорожкой, ноль — заметнее */
.ticks { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; display: flex; justify-content: space-between; pointer-events: none; }
.ticks i { width: 1px; height: 4px; margin-top: 6px; background: var(--sage); opacity: 0.55; }
.ticks i.zero { height: 6px; width: 2px; margin-inline: -0.5px; background: var(--ink); opacity: 0.8; }

/* ---------- базовые показатели ---------- */

.detail { container: detail / inline-size; display: flex; flex-direction: column; padding-bottom: 10px; }
.detail-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-bottom: 12px; }
.detail-bar > div:first-child { flex: 1; min-width: 0; }
.detail-bar .sub { margin-top: 2px; }
[data-panel="profile"] { --cols: minmax(0, 2fr) 124px minmax(90px, 1fr) 28px 52px 10px; }
.phead, .prow { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 12px; }
.phead { padding: 0 0 6px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.ph-value { text-align: right; }
.ph-score { grid-column: 3 / -1; display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.ph-score .legend { flex-wrap: nowrap; gap: 12px; }

.profile { display: flex; flex-direction: column; }
.item { display: flex; flex-direction: column; }
.item + .item { border-top: 1px solid var(--line); }
.prow {
  flex: 1;
  min-height: 32px;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.prow:hover, .item.open .prow { background: var(--paper); }
.prow-name { font-size: 13.5px; font-weight: 500; line-height: 1.22; min-width: 0; text-wrap: pretty; }
.prow-value { text-align: right; white-space: nowrap; min-width: 0; }
.prow-value number-flow { --number-flow-mask-height: 0.1em; font: 500 14px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.prow-value small { font-size: 12px; color: var(--muted); }
.prow-track { position: relative; height: 8px; border-radius: 4px; background: var(--wash); }
.prow:hover .prow-track, .item.open .prow-track { background: var(--line); }
.prow-track i { position: absolute; top: 0; bottom: 0; }
.prow-track i:first-child { left: 0; border-radius: 4px 0 0 4px; background: #aab59a; }
.prow-track i.good { background: var(--moss); border-radius: 0 4px 4px 0; }
.prow-track i.bad { background: var(--bad); border-radius: 0 4px 4px 0; }
.prow-track u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.prow-score { font: 600 15px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.prow-delta { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { width: 7px; height: 7px; border: solid var(--sage); border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.item.open .chev { transform: translateY(2px) rotate(225deg); }
/* раскрытие строки: высота идёт от 0 до своей через дорожку сетки, поэтому сворачивание
   прежней строки и разворачивание новой идут одновременно и с одной скоростью */
.item-more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.34s var(--ease), visibility 0s 0.34s; }
.item.open .item-more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.item-in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s ease-out; }
.item.open .item-in { opacity: 1; transition: opacity 0.3s ease-out 0.08s; }
.item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 0 4px; }
.item-cap { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); max-width: 76ch; text-wrap: pretty; }
.item-in .chart { height: 180px; margin-bottom: 14px; }
.item-cap b { color: var(--ink); font-weight: 500; }

@container detail (max-width: 640px) {
  [data-panel="profile"] { --cols: minmax(0, 1.4fr) minmax(70px, 1fr) 28px 52px 10px; }
  .prow-value, .ph-value { display: none; }
  .ph-score { grid-column: 2 / -1; }
}
@container detail (max-width: 460px) {
  .ph-score .legend { display: none; }
  .phead, .prow { column-gap: 10px; }
  .prow-name { font-size: 13.5px; }
}

.scroll { overflow-x: auto; }

/* ---------- прочее ---------- */

/* подвал: организаторы по центру */
.foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}
.partners { display: flex; align-items: center; gap: 18px; }
.partners a { display: block; line-height: 0; opacity: 0.72; transition: opacity 0.15s; }
.partners a:hover { opacity: 1; }
.partners a + a { padding-left: 18px; border-left: 1px solid #c9d0bd; }
.partners img { height: 28px; width: auto; filter: brightness(0); }
.foot-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center; }
.link { border: 0; padding: 0; background: none; font: inherit; color: var(--forest); text-decoration: underline; cursor: pointer; }
/* ---------- вход по коду доступа ---------- */

.locked .top, .locked .foot, .locked .dock { display: none; }
.lock {
  flex: 1;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 36px;
  padding: 40px 16px;
  text-align: center;
}
.lock-brand { display: grid; justify-items: center; color: var(--forest); }
.lock-brand .mark { width: 56px; height: 56px; margin-bottom: 14px; }
.lock-name { font: 600 34px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.lock-name i { font-style: normal; color: var(--moss); }
.lock-tagline { margin-top: 8px; font-size: 15.5px; color: var(--muted); text-wrap: balance; }

.lock-card {
  position: relative;
  overflow: hidden;
  width: min(480px, 100%);
  padding: 112px 32px 26px;
  border-radius: 22px;
  background: var(--forest);
  color: #fff;
  text-align: left;
  box-shadow: 0 28px 60px -30px rgb(27 36 21 / 0.55);
}
.lock-card > * { position: relative; }
/* мотив графика: сценарий над пунктиром «без изменений» — в полосе над текстом, текста не касается */
.lock-curve { position: absolute; inset: 0 0 auto 0; width: 100%; height: 92px; pointer-events: none; }
.lock-card h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.lock-text { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / 0.82); max-width: 44ch; text-wrap: pretty; }
.lock-row { display: flex; gap: 8px; margin-top: 22px; }
.lock-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  font: 600 19px/1.2 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lock-row input::placeholder { font: 400 15px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.lock-row input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.lock-row .btn { flex: none; border-radius: 12px; padding: 12px 22px; font-size: 15px; font-weight: 600; background: var(--lime); color: var(--forest-deep); }
.lock-row .btn:hover:not(:disabled) { background: #d9eeaa; }
.lock-row .btn:focus-visible { outline-color: #fff; }
.lock-reason, .lock-error { margin-top: 16px; border-radius: 10px; padding: 9px 12px; font-size: 14px; line-height: 1.4; }
.lock-reason { background: rgb(255 255 255 / 0.12); }
.lock-reason + .lock-row { margin-top: 14px; }
.lock-error { margin-top: 12px; background: #fff3ea; color: #7c300f; font-weight: 500; }
.lock-hint { margin-top: 16px; font-size: 13px; color: rgb(255 255 255 / 0.72); }
.lock-hint a { color: #fff; text-underline-offset: 3px; }
.lock-hint a:hover { color: var(--lime); }
.lock-hint a:focus-visible { outline-color: #fff; }

.lock-partners { display: grid; justify-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.lock-logos { display: flex; align-items: center; gap: 28px; }
.lock-logos a { display: block; line-height: 0; opacity: 0.85; transition: opacity 0.15s; }
.lock-logos a:hover { opacity: 1; }
.lock-logos a + a { padding-left: 28px; border-left: 1px solid #c9d0bd; }
.lock-logos img { height: 44px; width: auto; filter: brightness(0); }
.lock-orgs { max-width: 52ch; text-wrap: balance; }
#access-info:empty { display: none; }
@media (max-width: 480px) {
  .lock { gap: 28px; padding-block: 28px; }
  .lock-name { font-size: 28px; }
  .lock-card { padding: 100px 22px 22px; }
  .lock-row { flex-direction: column; }
  .lock-logos { gap: 18px; }
  .lock-logos a + a { padding-left: 18px; }
  .lock-logos img { height: 34px; }
}

.fatal { max-width: 640px; margin: 60px auto; padding: 0 20px; font-size: 16px; }

/* индекс и очки на виду, пока экран прокручен к ползункам */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--forest);
  color: #fff;
  box-shadow: 0 -6px 24px rgb(27 36 21 / 0.22);
  font-variant-numeric: tabular-nums;
}
.dock div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.dock div:last-child { justify-content: flex-end; text-align: right; }
.dock span { flex-basis: 100%; font-size: 12px; color: rgb(255 255 255 / 0.74); }
.dock b { font: 600 20px/1.2 var(--display); }
.dock em { font-style: normal; font-size: 13px; font-weight: 500; }
.dock em.good { color: #d4eaa9; }
.dock em.bad { color: #ffc9a8; }
.dock em.flat { color: rgb(255 255 255 / 0.74); }
body.sim { padding-bottom: 72px; }

dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 26px 28px 22px;
  max-width: min(640px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(27 36 21 / 0.35);
}
dialog::backdrop { background: rgb(27 36 21 / 0.45); }
dialog h2 { font-size: 22px; margin-bottom: 12px; }
dialog p { margin-bottom: 10px; max-width: 72ch; }
dialog h3 { font: 600 16px var(--display); margin: 18px 0 6px; }
dialog ol { margin: 0 0 12px; padding-left: 22px; font-size: 14px; }
dialog li { margin-bottom: 3px; }
dialog li small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
dialog .scroll { margin-bottom: 12px; }
dialog .formula { font: 500 16px/1.5 var(--display); background: var(--wash); border-radius: 10px; padding: 10px 14px; overflow-x: auto; white-space: nowrap; }
dialog sub, dialog sup { font-size: 0.72em; line-height: 0; }
#method { max-width: min(720px, calc(100vw - 32px)); }
#method p { text-wrap: pretty; }
dialog .btn { margin-top: 6px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#leave { max-width: min(460px, calc(100vw - 32px)); }
dialog a { color: var(--forest); }

/* справка по управляемому показателю */
#ref { width: min(900px, calc(100vw / var(--z) - 32px)); max-width: none; padding: 0; }
.ref-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 20px 14px 28px; background: var(--card); border-bottom: 1px solid var(--line); }
.ref-head h2 { margin: 0; font-size: 20px; text-wrap: balance; }
.ref-tag { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--moss); letter-spacing: 0.02em; }
.ref-body { padding: 18px 28px 22px; }
.ref-body p { font-size: 14px; }
.ref-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.ref-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.ref-stat span { font-size: 12.5px; color: var(--muted); }
.ref-stat b { font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ref-stat small { font-size: 12px; color: var(--muted); }
.ref-chart { height: 280px; margin-top: 4px; }
.ref-table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref-table th, .ref-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.ref-table th { font-weight: 500; color: var(--muted); }
.ref-table tbody th { position: sticky; left: 0; text-align: left; color: var(--ink); background: var(--card); padding-left: 0; }
.ref-table thead th:first-child { position: sticky; left: 0; text-align: left; background: var(--card); padding-left: 0; }
.ref-passport { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 8px 18px; margin: 0 0 14px; font-size: 14px; }
.ref-passport dt { color: var(--muted); }
.ref-passport dd { margin: 0; text-wrap: pretty; }
@media (max-width: 560px) {
  .ref-head { padding: 18px 12px 12px 18px; }
  .ref-body { padding: 14px 18px 18px; }
  .ref-passport { grid-template-columns: 1fr; gap: 2px; }
  .ref-passport dd { margin-bottom: 8px; }
}

/* график на весь экран */
dialog.full { position: fixed; inset: 0 auto auto 0; margin: 0; width: calc(100vw / var(--z)); height: calc(100dvh / var(--z)); max-width: none; max-height: none; border-radius: 0; padding: 20px clamp(16px, 2.4vw, 36px) 16px; flex-direction: column; gap: 10px; }
dialog.full[open] { display: flex; }
.full-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.full-title { flex: 1 1 320px; min-width: 0; }
.full-head h2 { margin: 0; font-size: 22px; text-wrap: balance; }
.full .chart.fill { flex: 1; min-height: 0; height: auto; }
.full-hint { text-align: center; margin: 0; max-width: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 10;
  white-space: nowrap;
}

/* ---------- узкий экран ---------- */

@media (max-width: 992px) {
  .sim .title > span { display: none; }
}
@media (max-width: 560px) {
  .partners img { height: 24px; }
  .region { flex: 1 1 100%; max-width: none; }
  .tools { flex: 1 1 100%; }
  .tools .btn { flex: 1; padding-inline: 10px; }
  .index { padding: 18px 18px 16px; }
  .hero-value { font-size: 64px; }
  .panel { padding: 16px 16px 10px; }
  .lever { grid-template-columns: 24px minmax(0, 1fr) 116px; }
  .nudge { width: 30px; height: 30px; }
}

/* ---------- широкий экран: всё на одном экране, без прокрутки страницы ----------
   Колонки сами прокручиваются внутри, если окно низкое.
   Экран рисуется в масштабе --ui, поэтому пороги ниже заданы в пикселях окна:
   порог раскладки × 0.8 (1080×620 раскладки = 864×496 окна). Меняете --ui — пересчитайте пороги. */

@media (min-width: 864px) and (min-height: 496px) {
  html { height: 100%; }
  body.sim { zoom: var(--ui); height: calc(100dvh / var(--ui)); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .top { flex: none; flex-wrap: nowrap; }
  .tools { flex-wrap: nowrap; white-space: nowrap; }
  .brand { flex: none; }
  .notice { flex: none; }
  .dock { display: none; }
  .lock { min-height: 0; }
  .foot {
    flex: none;
    width: 100%;
    max-width: 1720px;
    padding: 0 clamp(16px, 2vw, 28px) 6px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: stretch;
    gap: 24px;
    text-align: left;
  }
  .foot-meta { justify-content: flex-end; }
  .partners img { height: 24px; }
  .toast { bottom: 28px; }

  :root { --z: var(--ui); }
  /* окна стоят колонками; ширину колонок и высоту окон задаёт layout.js через flex-grow */
  .work {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1720px;
    max-height: 1100px;
    padding: 10px clamp(16px, 2vw, 28px) 12px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .work.many { max-width: none; max-height: none; }
  .col { flex: 1 1 0; min-width: 240px; min-height: 0; display: flex; flex-direction: column; }
  .work .win { flex: 1 1 0; min-height: 120px; height: auto; }
  .grip { display: grid; }
  .cwin .chart svg { touch-action: none; }
  .cwin-head { cursor: grab; }
  .cwin-head .grip { width: 20px; pointer-events: none; }

  /* границы между окнами: тянутся мышью, на клавиатуре — стрелками */
  .gutter, .drop-mark { display: block; }
  .index { order: 0; }
  .gutter { position: relative; flex: none; touch-action: none; border-radius: 6px; }
  .gutter.v { width: 18px; cursor: col-resize; }
  .gutter.h { height: 18px; cursor: row-resize; }
  .gutter::after { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 2px; background: #b9c3ad; opacity: 0; transition: opacity 0.15s, background-color 0.15s; }
  .gutter.v::after { width: 4px; height: min(56px, 60%); }
  .gutter.h::after { height: 4px; width: min(56px, 60%); }
  .gutter:hover::after, .gutter:focus-visible::after { opacity: 1; }
  .gutter.active::after { opacity: 1; background: var(--forest); }
  .gutter:focus-visible { outline-offset: -4px; }
  body.resizing-x, body.resizing-x * { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }
  body.resizing-y, body.resizing-y * { cursor: row-resize !important; user-select: none; -webkit-user-select: none; }
  body.moving-win, body.moving-win * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
  .win.lifting { opacity: 0.5; }
  .drop-mark { position: absolute; z-index: 4; pointer-events: none; border-radius: 12px; background: rgb(94 122 60 / 0.22); box-shadow: inset 0 0 0 2px var(--moss); }

  .index { container: index / size; overflow: hidden; }
  .index-in { height: 100%; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .index-main { min-height: 0; }
  .decide { min-height: 0; container: decide / size; }
  .detail { min-height: 0; }

  .chart.fill { flex: 1; height: auto; min-height: 0; }

  .levers { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 0 10px; grid-auto-rows: minmax(min-content, 1fr); }
  .lever { padding-block: 4px; }

  .detail [data-panel] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
  .profile { flex: 1; }
  .item { flex: 1 0 auto; }
  .prow { max-height: 60px; }
}
@media (min-width: 1280px) and (min-height: 720px) {
  .index { padding: 22px 26px; }
  .index-in { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
  .hero-value { font-size: 88px; }
  .hero { margin: 8px 0 0; }
  .panel { padding: 22px 24px; }
  .decide { padding-bottom: 10px; }
  .detail { padding-bottom: 12px; }
}
@media (min-width: 864px) and (min-height: 496px) and (max-height: 608px) {
  .work { padding-block: 6px 10px; gap: 14px; }
  .top { padding-top: 8px; }
  .foot { padding-bottom: 8px; }
  .partners img { height: 20px; }
  .index { padding: 16px 22px; }
  .hero-value { font-size: 60px; }
  .panel { padding: 14px 18px; }
  .decide { padding-bottom: 6px; }
  .budget { margin: 10px 0 4px; padding-block: 8px; }
  .detail-bar { margin-bottom: 8px; }
  .prow { min-height: 24px; padding-block: 2px; }
  .lever { padding-block: 2px; row-gap: 0; }
  .lever label { font-size: 13px; line-height: 1.2; }
  .prow-name { font-size: 13px; }
}
@media (min-width: 864px) and (min-height: 496px) and (max-height: 560px) {
  .detail-bar .sub, .decide-head .sub { display: none; }
  .work { padding-block: 4px 8px; }
  .decide { padding-bottom: 2px; }
  .budget { margin: 6px 0 2px; padding-block: 4px; }
  .decide { padding-top: 10px; }
  .lever { padding-block: 1px; }
  .index { padding-block: 12px; }
  .hero-value { font-size: 48px; }
  .prow { min-height: 23px; padding-block: 1px; }
}
@media (min-width: 864px) and (max-width: 1023.98px) {
  .work { grid-template-columns: minmax(400px, 9fr) minmax(0, 11fr); }
  .index-in { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 16px 24px; }
  .hero-value { font-size: 64px; }
}
/* карточка индекса подстраивается под свой размер: её окно можно сделать любым */
@container index (max-height: 250px) {
  .hero-value { font-size: 64px; }
  .hero { margin: 4px 0 -4px; }
}
@container index (max-height: 205px) {
  .hero-value { font-size: 52px; }
  .second { display: none; }
}
@container index (max-height: 150px) {
  .index .sub, .index .delta { display: none; }
}
@container index (max-width: 820px) {
  .index .legend { visibility: hidden; height: 0; }
}
@container index (max-width: 600px) {
  .index-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .index-main { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
  .index-main h1, .index-main .sub { grid-column: 1; }
  .hero { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: center; }
  .hero-value { font-size: 44px; }
  .hero-scale { display: none; }
  .second { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ================= админ-панель ================= */

.admin main { max-width: 1180px; margin: 0 auto; padding: 16px clamp(16px, 2.4vw, 32px); }
.admin section { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.admin section > h2 { margin-bottom: 4px; }
.admin section > .sub { margin-bottom: 12px; max-width: 78ch; }
.admin .bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  padding: 10px 0;
  margin-bottom: 6px;
}
.admin .bar .status { margin-right: auto; font-size: 13.5px; color: var(--sage); }
.admin .bar .status.dirty { color: var(--bad); font-weight: 500; }
.admin table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.admin th, .admin td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin th { font-weight: 500; color: var(--sage); font-size: 12.5px; }
.admin .scroll { overflow-x: auto; }
.admin input[type="number"], .admin input[type="text"], .admin input[type="password"], .admin select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: #fff;
  width: 100%;
  min-width: 68px;
  font-variant-numeric: tabular-nums;
}
.admin .matrix input { min-width: 58px; text-align: right; }
.admin .matrix th { font-size: 11.5px; max-width: 86px; }
.admin .matrix input.pos { background: #eef5e4; }
.admin .matrix input.neg { background: #fbece3; }
.admin .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 18px; }
.admin .fields label { display: grid; gap: 4px; font-size: 13px; color: var(--sage); }
.admin .fields label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); align-self: end; padding-bottom: 6px; }
.admin .regions-list { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.admin .regions-list td small { color: var(--sage); }
.admin .gate { max-width: 380px; margin: 80px auto; }
.admin .gate form { display: grid; gap: 10px; }
.admin .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }