/* ── Інструмент: карта + звіт ─────────────────────────────
   Доповнює styles.css: ті самі токени, моно-шрифт і ЧБ.
   ────────────────────────────────────────────────────────── */
:root{ --bar:56px; --panel:rgba(22,22,22,.86); }

body.tool{ overflow:hidden; background:#262626; }

/* ── Верхня панель ────────────────────────────────────── */
.bar{
  position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:20;
  display:flex;align-items:center;gap:clamp(12px,2vw,24px);
  padding:0 clamp(12px,2.4vw,26px);
  background:rgba(28,28,28,.92);border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px) saturate(0);-webkit-backdrop-filter:blur(10px) saturate(0);
}
.bar .mark{width:20px}
.bar-title{
  flex:1;min-width:0;font-weight:400;
  font-size:clamp(11px,1.15vw,13px);letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-dim);
}
.bar .lang-list{top:calc(100% + 14px);bottom:auto}

/* ── Каркас ───────────────────────────────────────────── */
.tool-main{
  position:fixed;inset:var(--bar) 0 0 0;
  display:grid;grid-template-columns:1fr minmax(340px,440px);
  text-shadow:none;            /* main у styles.css світиться — тут це зайве */
}

/* ── Карта ────────────────────────────────────────────── */
.map-box{position:relative;overflow:hidden;background:#1e1e1e}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none;outline:none}
#map.grab{cursor:grab}
#map.grabbing{cursor:grabbing}
#map:focus-visible{outline:1px solid var(--ink-faint);outline-offset:-2px}

.map-ui{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:clamp(10px,1.6vw,18px);gap:12px;
}
.map-ui > *{pointer-events:auto}
.ui-left{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:min(420px,62%)}
.ui-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.zoom{display:flex;gap:6px}

.tbtn{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 11px;cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(10px) saturate(0);-webkit-backdrop-filter:blur(10px) saturate(0);
  transition:background .2s,color .2s,opacity .2s;
}
.tbtn:hover{background:rgba(255,255,255,.12)}
.tbtn:focus-visible{outline:1px solid var(--ink);outline-offset:1px}
.tbtn.on{background:var(--ink);color:#1c1c1c;border-color:var(--ink)}
.tbtn[disabled]{opacity:.4;cursor:default}
.tbtn.busy{opacity:.55;cursor:progress}
.zoom .tbtn{width:34px;text-align:center;padding:8px 0;font-size:13px;letter-spacing:0}

.btns{display:flex;flex-wrap:wrap;gap:6px}

.search{display:flex;gap:6px}
.search input{
  flex:1 1 200px;min-width:0;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:12px;padding:8px 11px;border-radius:0;
  backdrop-filter:blur(10px) saturate(0);-webkit-backdrop-filter:blur(10px) saturate(0);
}
.search input::placeholder{color:var(--ink-faint)}
.search input:focus{outline:none;border-color:rgba(242,242,242,.5)}
.search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.search button{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 12px;cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(10px) saturate(0);-webkit-backdrop-filter:blur(10px) saturate(0);
}
.search button:hover{background:rgba(255,255,255,.12)}

.hits{
  list-style:none;margin:0;padding:4px 0;max-height:240px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(12px) saturate(0);-webkit-backdrop-filter:blur(12px) saturate(0);
}
.hits[hidden]{display:none}
.hits li{margin:0}
.hits button{
  display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);
  font:inherit;font-size:12px;line-height:1.4;padding:8px 12px;cursor:pointer;opacity:.8;
}
.hits button:hover,.hits button:focus-visible{background:rgba(255,255,255,.08);opacity:1;outline:none}
.hits .muted{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* підказка й копірайт ділять нижній рядок; якщо не вміщаються
   поруч — копірайт переходить під підказку, а не лягає на неї */
.map-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:6px;padding:clamp(10px,1.6vw,18px);pointer-events:none;
}
.hint,.attrib{
  margin:0;pointer-events:none;
  font-size:10px;letter-spacing:.1em;line-height:1.5;
  padding:6px 9px;background:rgba(20,20,20,.72);
}
.hint{flex:1 1 230px;max-width:62ch;color:var(--ink-dim);text-transform:uppercase}
.hint:empty{display:none}
.attrib{margin-left:auto;color:var(--ink-faint);pointer-events:auto;white-space:nowrap}
.attrib a{color:inherit}

/* ── Звіт ─────────────────────────────────────────────── */
.report{
  overflow-y:auto;overscroll-behavior:contain;
  border-left:1px solid var(--line);background:rgba(30,30,30,.96);
  padding:clamp(18px,2.2vw,28px) clamp(16px,2vw,26px) 80px;
}
.rep{margin-bottom:clamp(26px,3.4vw,42px)}
.rep[hidden]{display:none}
.report .idx{margin-bottom:16px}
.report h2{font-size:clamp(20px,2.4vw,28px);font-weight:400;line-height:1.15;letter-spacing:-.01em}
.report .body{margin-top:12px;font-size:12.5px;line-height:1.65;color:var(--ink-dim);max-width:54ch}
.steps-min{margin:18px 0 0 18px;padding:0;color:var(--ink-dim);font-size:12.5px;line-height:1.7}
.steps-min li{margin-bottom:4px}

.big{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.big b{font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1;letter-spacing:-.03em}
.big i{font-style:normal;font-size:13px;letter-spacing:.14em;color:var(--ink-dim)}
.big-sub{
  flex-basis:100%;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:6px;
}
.big.wait b{opacity:.35}

.rows{margin:0;border-top:1px solid var(--line)}
.rows > div{
  display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.rows dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);flex:1 1 auto}
.rows dd{margin:0;font-size:13px;text-align:right;white-space:nowrap}
.rows dd.dim{color:var(--ink-faint)}
.rows > div.off{display:none}

.tbl{width:100%;border-collapse:collapse;margin-top:22px;font-size:12px}
.tbl caption{
  text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-bottom:8px;
}
.tbl th{
  font-weight:400;text-align:right;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);padding:6px 0;border-bottom:1px solid var(--line);
}
.tbl th:first-child,.tbl td:first-child{text-align:left;color:var(--ink-faint)}
.tbl td{text-align:right;padding:6px 0;border-bottom:1px solid rgba(242,242,242,.08)}
.tbl tr.hot td{background:rgba(255,255,255,.07)}
.tbl-wrap{max-height:260px;overflow-y:auto}

.chart{margin:24px 0 0}
.chart figcaption{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;
}
.chart canvas{width:100%;display:block;touch-action:pan-y}

.ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0}
.ctrl label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.ctrl select,.ctrl input{
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:12px;padding:7px 9px;border-radius:0;min-width:92px;text-align:right;
}
.ctrl select{text-align:left;min-width:150px}
.ctrl select:focus,.ctrl input:focus{outline:none;border-color:rgba(242,242,242,.5)}
.ctrl + .rows{margin-top:16px}

.cta-line{margin-top:20px;font-size:12px;color:var(--ink-dim)}
.cta-line a{color:var(--ink);margin-left:8px}

/* ── Вузький екран ────────────────────────────────────── */
@media (max-width:899px){
  body.tool{overflow:auto}
  .tool-main{position:static;display:block;padding-top:var(--bar)}
  .map-box{height:62svh;min-height:340px}
  .report{border-left:0;border-top:1px solid var(--line);padding-bottom:40px}
  .ui-left{max-width:none;flex:1}
}
@media (max-width:520px){
  .bar-title{display:none}
  .btns .tbtn{padding:7px 9px}
  .big b{font-size:40px}
}