/* Рабочая область «База данных»: запрос слева, график—карта—таблица справа.
   Общая палитра сайта живёт в public.css; здесь только то, чего там нет:
   цвета линий графика (--s1…--s12), ступени заливки карты (--r0…--r5),
   море и рамка карты. Тема переключается так же, как на остальных
   страницах: системная настройка плюс атрибут data-theme. */

:root{
  --accent-soft:#6b7a8f; --accent-wash:#e5e6e0;
  --s1:#4a5d7e; --s2:#9c5f3c; --s3:#4f7c5d; --s4:#7a4f6e; --s5:#a8822c; --s6:#3f6f7a;
  --s7:#6a4c93; --s8:#a04141; --s9:#56753a; --s10:#2f5d8c; --s11:#8c6a3f; --s12:#4c4c5e;
  --r0:#efe3c8; --r1:#cfcdb4; --r2:#a3aca6; --r3:#7d94a4; --r4:#57708c; --r5:#33445e;
  --sea:#e3e7ec; --neat:#a89c81;
  --shadow:0 1px 2px rgba(45,49,66,.06),0 4px 14px rgba(45,49,66,.05);
}
@media (prefers-color-scheme:dark){
  :root{
  --accent-soft:#6f86a6; --accent-wash:#2f3548;
  --s1:#8aa2c4; --s2:#c98b5f; --s3:#7dae87; --s4:#b183a1; --s5:#d0a94b; --s6:#68a3ae;
  --s7:#a891d1; --s8:#d08585; --s9:#9dbd75; --s10:#7fa8d8; --s11:#c4a37e; --s12:#9a9ab0;
  --r0:#2a2f42; --r1:#3a4257; --r2:#4d5a70; --r3:#6b7d97; --r4:#8fa2bd; --r5:#b8c7dd;
  --sea:#222838; --neat:#4d5468;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --accent-soft:#6f86a6; --accent-wash:#2f3548;
  --s1:#8aa2c4; --s2:#c98b5f; --s3:#7dae87; --s4:#b183a1; --s5:#d0a94b; --s6:#68a3ae;
  --s7:#a891d1; --s8:#d08585; --s9:#9dbd75; --s10:#7fa8d8; --s11:#c4a37e; --s12:#9a9ab0;
  --r0:#2a2f42; --r1:#3a4257; --r2:#4d5a70; --r3:#6b7d97; --r4:#8fa2bd; --r5:#b8c7dd;
  --sea:#222838; --neat:#4d5468;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --accent-soft:#6b7a8f; --accent-wash:#e5e6e0;
  --s1:#4a5d7e; --s2:#9c5f3c; --s3:#4f7c5d; --s4:#7a4f6e; --s5:#a8822c; --s6:#3f6f7a;
  --s7:#6a4c93; --s8:#a04141; --s9:#56753a; --s10:#2f5d8c; --s11:#8c6a3f; --s12:#4c4c5e;
  --r0:#efe3c8; --r1:#cfcdb4; --r2:#a3aca6; --r3:#7d94a4; --r4:#57708c; --r5:#33445e;
  --sea:#e3e7ec; --neat:#a89c81;
  --shadow:0 1px 2px rgba(45,49,66,.06),0 4px 14px rgba(45,49,66,.05);
}

/* На этой странице колонка не нужна: рабочая область занимает всё окно. */
main.wide{max-width:none; margin:0; padding:0}
/* Заголовок показателя — часть панели, а не заголовок страницы. */
.vtitle h1{font-size:1.35rem; margin:0; line-height:1.25}
.tabs button[disabled]{cursor:default}

.workspace{
  display:grid; grid-template-columns:minmax(268px,320px) minmax(0,1fr);
  gap:0; align-items:stretch; min-height:calc(100vh - 52px);
}
@media (max-width:820px){ .workspace{grid-template-columns:minmax(0,1fr)} }

.rail{
  border-right:1px solid var(--rule); background:var(--surface);
  padding:1.1rem clamp(.9rem,1.6vw,1.15rem) 2rem;
  display:flex; flex-direction:column; gap:1.35rem;
}
@media (max-width:820px){ .rail{border-right:0; border-bottom:1px solid var(--rule)} }

.eyebrow{
  font-size:.79rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); font-weight:600; margin:0 0 .5rem;
  padding-bottom:.28rem; border-bottom:1px solid var(--rule);
}
.field{display:flex; flex-direction:column; gap:.4rem}
label.lbl{font-size:.84rem; color:var(--muted); letter-spacing:.02em}
select,input[type=search],input[type=number]{
  font:inherit; font-size:.94rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:.3rem; padding:.38rem .5rem; width:100%;
}
select:focus-visible,input:focus-visible,button:focus-visible,.tile:focus-visible,.chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
.years{display:grid; grid-template-columns:1fr auto 1fr; gap:.4rem; align-items:center}
.years span{color:var(--muted); font-size:.92rem}
.presets{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.1rem}
.presets button{
  font:inherit; font-size:.81rem; padding:.26rem .52rem; cursor:pointer;
  background:var(--paper); color:var(--ink-soft);
  border:1px solid var(--rule-soft); border-radius:.25rem;
}
.presets button:hover{border-color:var(--accent); color:var(--accent)}

.ctry-list{
  max-height:230px; overflow-y:auto; border:1px solid var(--rule-soft);
  border-radius:.3rem; background:var(--paper); padding:.2rem;
  display:flex; flex-direction:column; gap:1px;
}
.ctry-list button{
  display:flex; align-items:center; gap:.45rem; width:100%; text-align:left;
  font:inherit; font-size:.92rem; padding:.3rem .4rem; cursor:pointer;
  background:none; border:0; border-radius:.2rem; color:var(--ink-soft);
}
.ctry-list button:hover{background:var(--surface-2)}
.ctry-list button.on{background:var(--accent-wash); color:var(--ink); font-weight:600}
.ctry-list .sw{width:9px; height:9px; border-radius:2px; flex:none; background:var(--rule)}
.ctry-list .code{margin-left:auto; font-size:.77rem; color:var(--muted); letter-spacing:.04em}
.hint{font-size:.81rem; color:var(--muted); line-height:1.42}

.dl{display:flex; gap:.4rem; flex-wrap:wrap}
.dl button{
  flex:1; font:inherit; font-size:.85rem; padding:.46rem .3rem; cursor:pointer;
  background:var(--paper); color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:.3rem;
}
.dl button:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- viewport ---------- */
/* width:100% обязателен: без него колонка растягивается по содержимому,
   и при выборе всех стран горизонтально едет вся страница, а не таблица. */
.viewport{display:flex; flex-direction:column; min-width:0; max-width:100%;
  width:100%; background:var(--paper)}
.vhead{
  display:flex; align-items:flex-end; gap:1.2rem; flex-wrap:wrap;
  padding:1rem clamp(.9rem,2.2vw,1.5rem) 0;
}
.vtitle{flex:1; min-width:0}
.vtitle h1{
  margin:0; font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:700;
  letter-spacing:-.015em; line-height:1.2; text-wrap:balance;
}
.vtitle p{margin:.25rem 0 0; font-size:.89rem; color:var(--muted)}
.tabs{display:flex; gap:.15rem; align-self:flex-end}
.tabs button{
  font:inherit; font-size:.95rem; padding:.44rem .9rem; cursor:pointer;
  background:none; border:1px solid transparent; border-bottom:0;
  border-radius:.3rem .3rem 0 0; color:var(--muted); margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{
  background:var(--surface); border-color:var(--rule);
  color:var(--ink); font-weight:600;
}
.vbody{
  flex:1; border-top:1px solid var(--rule); background:var(--surface);
  padding:1.1rem clamp(.9rem,2.2vw,1.5rem) 1.4rem; min-width:0;
}
.panel{display:none; min-width:0}
.panel.on{display:block}

/* chart */
/* Без явной ширины svg берёт свой собственный размер и распирает
   колонку на узком экране. */
.chart, .map{display:block; width:100%; max-width:100%; height:auto}
.chartwrap{position:relative; width:100%; min-width:0}
svg.chart{display:block; width:100%; height:auto; overflow:visible}
.gridline{stroke:var(--rule-soft); stroke-width:1}
.axis{stroke:var(--rule); stroke-width:1}
.tick{fill:var(--muted); font-size:12.5px}
.tick.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.serie{fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round}
.endpt{stroke:var(--surface); stroke-width:1.6}
.refline{stroke:var(--s2); stroke-width:1; stroke-dasharray:4 3; opacity:.7}
.reftext{fill:var(--s2); font-size:12px; letter-spacing:.03em}
.crosshair{stroke:var(--accent); stroke-width:1; opacity:.5}
.legend{display:flex; flex-wrap:wrap; gap:.5rem .95rem; margin-top:.7rem}
.lg{display:flex; align-items:center; gap:.4rem; font-size:.88rem; color:var(--ink-soft)}
.lg i{width:14px; height:3px; border-radius:2px; display:block}
.lg b{font-weight:600; font-variant-numeric:tabular-nums}
.readout{
  position:absolute; pointer-events:none; z-index:5; min-width:132px;
  background:var(--surface); border:1px solid var(--rule); border-radius:.35rem;
  box-shadow:var(--shadow); padding:.55rem .65rem; font-size:.87rem; display:none;
}
.readout h4{margin:0 0 .35rem; font-size:.94rem; letter-spacing:-.01em}
.readout div{display:flex; align-items:center; gap:.35rem; justify-content:space-between}
.readout div span{display:flex; align-items:center; gap:.3rem; color:var(--ink-soft)}
.readout i{width:8px;height:8px;border-radius:2px;display:block;flex:none}
.readout b{font-variant-numeric:tabular-nums; font-weight:600}

/* map */
.maptop{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem}
.yearbox{display:flex; align-items:baseline; gap:.5rem}
.yearbox b{font-size:2.05rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.yearbox span{font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}
input[type=range]{flex:1; min-width:170px; accent-color:var(--accent)}
.play{
  font:inherit; font-size:.85rem; padding:.38rem .8rem; cursor:pointer;
  background:var(--paper); border:1px solid var(--rule); border-radius:.3rem; color:var(--ink-soft);
}
.play:hover{border-color:var(--accent); color:var(--accent)}
svg.map{display:block; width:100%; height:auto; max-width:1180px; margin:0 auto}
.sea{fill:var(--sea)}
.neat{fill:none; stroke:var(--neat); stroke-width:1.5}
.tile path{stroke:var(--surface); stroke-width:.7; cursor:pointer}
.tile:hover path{stroke:var(--ink); stroke-width:1.6}
.tile.sel path{stroke:var(--ink); stroke-width:2}
.tile .dot{stroke:var(--surface); stroke-width:1.2; cursor:pointer; pointer-events:none}
.tile.sel .dot{stroke:var(--ink); stroke-width:1.8}
.tile text{pointer-events:none; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em}
.mlab{font-size:14px; font-weight:700}
.mval{font-size:12.6px; opacity:.92}

.offmap{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:center; margin-top:.85rem}
.offgrp{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.offlbl{font-size:.73rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-right:.1rem}
.chip{
  font:inherit; font-size:.82rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:.26rem .5rem; border-radius:.25rem; cursor:pointer;
  border:1px solid var(--rule); font-variant-numeric:tabular-nums;
}
.chip b{font-weight:600; letter-spacing:.03em}
.chip:hover{border-color:var(--ink)}
.chip.sel{border-color:var(--ink); border-width:2px; padding:calc(.26rem - 1px) calc(.5rem - 1px)}
.scale{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:.9rem; justify-content:center}
.scale .sw{display:flex; align-items:center; gap:.3rem; font-size:.82rem; color:var(--muted)}
.scale .sw i{width:30px; height:13px; display:block; border:1px solid var(--rule-soft)}

/* table */
/* При выборе всех стран столбцов под семьдесят. Прокручиваться должна
   таблица внутри своей рамки, а не страница целиком. */
.tablewrap{overflow:auto; max-width:100%; max-height:460px;
  border:1px solid var(--rule-soft); border-radius:.35rem}
table{border-collapse:collapse; width:max-content; min-width:100%; font-size:.9rem}
th,td{padding:.34rem .62rem; text-align:right; white-space:nowrap; border-bottom:1px solid var(--rule-soft)}
thead th{
  position:sticky; top:0; background:var(--surface-2); z-index:2;
  font-weight:600; font-size:.83rem; letter-spacing:.03em; border-bottom:1px solid var(--rule);
}
tbody th{
  position:sticky; left:0; background:var(--surface); text-align:left;
  font-weight:600; font-variant-numeric:tabular-nums; border-right:1px solid var(--rule-soft);
}
td{font-variant-numeric:tabular-nums; color:var(--ink-soft)}
td.na{color:var(--rule); font-weight:400}
tbody tr:hover td{background:var(--surface-2)}
tbody tr:hover th{background:var(--surface-2)}

.statusbar{
  display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center;
  margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--rule-soft);
  font-size:.85rem; color:var(--muted);
}
.statusbar b{color:var(--ink-soft); font-variant-numeric:tabular-nums; font-weight:600}
.cov{display:flex; align-items:center; gap:.4rem}
.covbar{width:78px; height:5px; border-radius:3px; background:var(--rule-soft); overflow:hidden}
.covbar i{display:block; height:100%; background:var(--accent)}

.note{
  margin:1.1rem clamp(.9rem,2.2vw,1.5rem) 1.4rem; padding:.7rem .85rem;
  border-left:2px solid var(--accent); background:var(--surface);
  font-size:.88rem; color:var(--muted); line-height:1.55; border-radius:0 .3rem .3rem 0;
}
.note b{color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }


.speed{width:auto; flex:0 0 auto; font-size:.85rem; padding:.28rem .4rem}

/* На самых узких экранах ползунку лет и списку стран задан минимум ширины,
   который распирает колонку. Отпускаем. */
@media (max-width:420px){
  input[type=range]{min-width:0}
  .maptop{gap:.6rem}
  .viewport{padding-left:.7rem; padding-right:.7rem}
}

/* ---------- «Сбросить всё» и пустое состояние ---------- */
/* Кнопка стоит в одной строке с надписью «Запрос»: сброс относится ко всему
   запросу целиком, а не к отдельному полю. */
.qhead{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.qhead .eyebrow{flex:1}
.reset{
  font:inherit; font-size:.82rem; cursor:pointer; white-space:nowrap;
  background:none; color:var(--muted); border:0;
  border-bottom:1px dashed var(--rule); padding:0 0 .1rem; margin:0 0 .5rem;
}
.reset:hover{color:var(--accent); border-bottom-color:var(--accent)}

.blank{display:none}
.vbody.isblank .panel,
.vbody.isblank .statusbar{display:none}
.vbody.isblank .blank{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:22rem; padding:2rem; max-width:34rem; margin:0 auto;
  color:var(--muted); font-size:1rem; line-height:1.5;
}
.dl button:disabled{opacity:.45; cursor:default}
.dl button:disabled:hover{border-color:var(--rule); color:var(--ink-soft)}

/* ---------- выбрать все / снять все ---------- */
.pickall{display:flex; gap:.9rem; margin:.35rem 0 .4rem}
.pickall button{
  font:inherit; font-size:.82rem; cursor:pointer; background:none; color:var(--muted);
  border:0; border-bottom:1px dashed var(--rule); padding:0 0 .1rem;
}
.pickall button:hover{color:var(--accent); border-bottom-color:var(--accent)}
/* оговорка под графиком: на нём помещается лишь часть выбранных стран */
.legend .lgmore{display:block; width:100%; margin-top:.35rem; color:var(--muted); font-size:.85rem}
.trial{
  flex-basis:100%; margin:.55rem 0 0; color:var(--muted);
  font-size:.82rem; font-style:italic;
}

/* ---------- разрез таблицы ---------- */
.axis{display:flex; gap:.4rem; margin:0 0 .6rem}
.axis button{
  font:inherit; font-size:.85rem; padding:.32rem .7rem; cursor:pointer;
  background:var(--paper); color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:.3rem;
}
.axis button.on{border-color:var(--accent); color:var(--accent); font-weight:600}
/* шапка профиля в два яруса: сверху раздел, под ним показатели */
#tbl th.grp{
  text-align:left; padding-left:0; font-weight:600; color:var(--accent);
  border-bottom:1px solid var(--rule); background:var(--surface-2);
}
#tbl th.grp span{position:sticky; display:inline-block; padding:0 .62rem}

#tbl thead tr:first-child th{z-index:3}
#tbl thead tr:nth-child(2) th{z-index:2}