:root {
  --bg: #f6f3ed;
  --panel: #ffffff;
  --text: #1f2a33;
  --muted: #5d6871;
  --line: #ddd6cb;
  --accent: #2f5d62;
  --warn: #8a4b12;
  --b0: #d3dfdf;
  --b1: #b9cfa9;
  --b2: #d8b66c;
  --b3: #cf8c6e;
  --b4: #5f3458;
  --alert-red: #b8322a;
  --alert-yellow: #e2b007;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  line-height: 1.45;
  font-size: 15px;
  overflow-wrap: anywhere;
}

button, input, select { font: inherit; color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- header ---- */

.site-header {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 1.5rem 0.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.title-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }

h1 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: 0.01em; }

.badge {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
}

.night-row, .status-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.date-label { color: var(--muted); font-size: 0.9rem; }

input[type="date"], input[type="search"], select {
  min-height: 2.25rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  max-width: 100%;
}

.night-label { font-weight: 600; }

.nl-short { display: none; }

.icon-btn, .text-btn, .chip-btn, .fav-btn, .link-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}

.icon-btn { min-width: 2.25rem; min-height: 2.25rem; }

.text-btn { min-height: 2.25rem; padding: 0.25rem 0.75rem; }

.icon-btn:disabled, .text-btn:disabled { opacity: 0.45; cursor: default; }

.text-btn[aria-pressed="true"] { border-color: #d9b46a; background: #fbe9c6; }

.update-status { margin: 0; font-size: 0.88rem; color: var(--muted); flex: 1 1 18rem; }

.update-status.is-warning { color: var(--warn); }

/* ---- layout ---- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 1.25rem;
  padding: 0.75rem 1.5rem 1.25rem;
  align-items: start;
}

.map-panel, .detail {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.map-panel { padding: 1rem; }

.detail {
  padding: 1rem 1.1rem 1.25rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* ---- map tools ---- */

/* One desktop control baseline: every tool is label-row + control-row; hints live outside the row. */
.map-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.25rem;
}

.map-tools .tool { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; align-items: end; min-width: 0; }

.map-tools label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }

.map-tools input, .map-tools select, .map-tools .tool-action .text-btn { box-sizing: border-box; height: 2.4rem; margin: 0; }

.tool-action { grid-template-rows: 1fr auto; }

.tool-action .text-btn { grid-row: 2; white-space: nowrap; }

.search { position: relative; }

.search input { width: 100%; }

.selector select { width: 100%; }

@media (max-width: 760px) {
  /* Mobile: the existing detail-first clear stack. */
  .map-tools { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .map-tools .tool { display: block; }
  .map-tools .tool-action .text-btn { width: 100%; }
}

/* R36: an absolutely positioned grid child without `top` sat at the grid's static origin and covered the
   label/input; the panel is now explicitly BELOW the tool with a gap (desktop subgrid and mobile block). */
.search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(31, 42, 51, 0.12);
  max-height: 20rem;
  overflow-y: auto;
}

.search-option {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.search-option:hover, .search-option:focus-visible { background: #eef2f1; }

.search-empty { padding: 0.4rem 0.5rem; }

.search-results[hidden] { display: none; }

.search-close-row { display: flex; justify-content: flex-end; padding: 0.2rem 0.25rem 0; border-top: 1px solid var(--line); margin-top: 0.2rem; }

.search-close { min-height: 2rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }

/* ---- map ---- */

.map {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 72vh;
  border-radius: 8px;
  background: #fbfaf7;
  overflow: hidden;
}

.map-svg { display: block; width: 100%; height: 100%; }

.map { position: relative; }

/* Instant name tooltip on genuine mouse hover (near the cursor, clamped inside the map; never a hit target). */
.map-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  max-width: 18rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(31, 42, 51, 0.14);
  pointer-events: none;
}

.map-tip[hidden] { display: none; }

/* Render-only smoothing: rounded joins/caps on the ORIGINAL shared borders (no gaps, no refitting). */
.region {
  stroke: #ffffff;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  cursor: pointer;
}

.region.is-none, .region.is-het, .region.is-pending { stroke: #ffffff; }

/* Country-view district layer is display-only; clicks select the oblast underneath. */
.layer-nation { pointer-events: none; }

/* Whole-compound hover overlay on top: subtle fill + rounded stroke; shared borders stay visible. */
.hover-overlay {
  fill: rgba(255, 255, 255, 0.22);
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.layer-hover { pointer-events: none; }

/* Map context district of a selected own-source city: full strength, clear dashed edge (view only). */
.context-outline {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.place-outline {
  fill: rgba(255, 255, 255, 0.25);
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Unrelated areas while a selection is focused: lighter but still hatched/numbered, never blank. */
.region.is-dimmed { opacity: 0.45; }

.map-label.is-dimmed { opacity: 0.6; }

.selection-outline {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.map-label {
  fill: var(--text);
  stroke: #ffffff;
  paint-order: stroke;
  stroke-linejoin: round;
  font-weight: 650;
  pointer-events: none;
}

.map-label.on-dark { fill: #ffffff; stroke: var(--b4); }

.map-note { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* ---- legend ---- */

.legend { margin-top: 0.75rem; }

.legend-title { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; }

.legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.legend-list li { display: flex; align-items: center; gap: 0.35rem; }

.swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.2rem;
  border: 1px solid rgba(31, 42, 51, 0.18);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
}

.sw-0 { background: var(--b0); }
.sw-1 { background: var(--b1); }
.sw-2 { background: var(--b2); }
.sw-3 { background: var(--b3); }
.sw-4 { background: var(--b4); color: #ffffff; }
/* Map/legend: plain fills only (no hatching); unavailable is a neutral fill, the area overview a
   neutral warm fill with its plain range. Completeness is told in words in the selected card. */
.sw-none { background: #ebe8e3; }
.sw-het { background: #e9e1d2; }
.legend-note { margin: 0.35rem 0 0; font-size: 0.8rem; }
.data-state { margin: 0.25rem 0 0; font-size: 0.85rem; font-weight: 600; }
.place-note { margin: 0.25rem 0 0.4rem; }
.tl-effective-note { margin: 0.2rem 0; font-size: 0.82rem; color: var(--muted); }

/* ---- detail ---- */

.favorites { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.5rem; }

.favorites:empty { display: none; }

.chip-btn { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.85rem; }

.chip-btn.is-current { border-color: var(--accent); color: var(--accent); }

.breadcrumb { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--muted); }

input[type="date"].is-current { border-color: var(--accent); background: #eef4f3; }

.current-cue {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eef4f3;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.search-hint { margin: 0.25rem 0 0; font-size: 0.78rem; }

.district-control { margin: 0.6rem 0 0.25rem; }

.district-control label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }

.district-control select { width: 100%; }

.availability { margin: 0.25rem 0 0.5rem; font-size: 0.88rem; }

.availability p { margin: 0.25rem 0; }

.availability .text-btn, .notice .text-btn { margin: 0.25rem 0; text-align: left; }

.home-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.home-label { font-weight: 600; }

.home-dialog {
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
}

.home-dialog::backdrop { background: rgba(31, 42, 51, 0.35); }

.home-dialog h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }

.home-dialog label { display: block; margin: 0.75rem 0 0.2rem; font-size: 0.85rem; color: var(--muted); }

.home-dialog select { width: 100%; }

.dialog-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.text-btn.primary { border-color: var(--accent); background: var(--accent); color: #ffffff; }

.text-btn.primary:disabled { background: var(--panel); color: var(--muted); border-color: var(--line); }

.save-home { margin: 0.25rem 0 0.5rem; }

.quality { margin: 0 0 0.5rem; font-size: 0.9rem; }

.reasons-box summary { font-weight: 500; font-size: 0.9rem; }

.eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.search-option { flex-direction: column; gap: 0.1rem; }

.search-context { font-size: 0.8rem; }

.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }

.detail-title { margin: 0; font-size: 1.25rem; font-weight: 650; }

.fav-btn { min-width: 2.25rem; min-height: 2.25rem; font-size: 1.15rem; line-height: 1; }

.fav-btn[aria-pressed="true"] { color: #8a6a12; border-color: #d9b46a; }

.muted { color: var(--muted); }

.detail > .muted { margin: 0.1rem 0 0; font-size: 0.88rem; }

.score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.score-value {
  min-width: 3.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 8px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.score-unit { font-size: 1.1rem; color: var(--muted); }

.score-text { flex: 1; min-width: 0; }

.score-text p { margin: 0; }

.status-label { font-weight: 650; }

.status-final { color: #2b5a3a; }
.status-provisional { color: #3f4f73; }
.status-insufficient, .status-unsupported, .status-unsupported_dst { color: var(--warn); }
.status-heterogeneous { color: #6b5536; }
.status-observed { color: #4a5560; }
.score-value.sw-observed { border: 1px dotted #4a5560; }

.status-line { font-size: 0.9rem; color: var(--muted); }

.reasons { margin: 0 0 0.75rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--warn); }

.notice {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #d9b46a;
  background: #fbf5e8;
  font-size: 0.9rem;
}

.het h3 { margin: 0.5rem 0 0.25rem; font-size: 0.95rem; }

.het-list { margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: 0.9rem; }

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

details { margin: 0.6rem 0; border-top: 1px solid var(--line); padding-top: 0.5rem; }

summary { cursor: pointer; font-weight: 600; }

.formula { margin-top: 0.75rem; }

.formula h4 { margin: 0 0 0.25rem; font-size: 0.9rem; }

.formula ul { padding-left: 1.1rem; font-size: 0.88rem; }

/* ---- R34 end-user card: place/night -> large H -> timeline -> one summary line -> closed diagnostics ---- */

.card-night { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--muted); }

.score-hero { align-items: flex-start; margin: 0.6rem 0 0.4rem; padding: 0.6rem 0 0.4rem; border-bottom: 0; }

.score-hero .score-value { font-size: 3.4rem; min-width: 4.5rem; }

.score-hero .score-unit { margin: 0.35rem 0 0.15rem; font-size: 1.05rem; color: var(--text); }

.score-hero .status-label { font-size: 0.9rem; font-weight: 600; overflow-wrap: anywhere; }

.status-none { color: var(--warn); }

.card-summary { margin: 0.2rem 0 0.6rem; font-size: 1rem; font-weight: 600; }

.tech { margin-top: 0.9rem; }

.tech > summary { font-size: 0.95rem; }

.tech-section { margin: 0.6rem 0 0.9rem; min-width: 0; }

.tech-section h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }

.tech-section p { margin: 0.2rem 0; font-size: 0.88rem; }

.facts { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0.6rem 0; font-size: 0.9rem; }

.facts dt { color: var(--muted); }

.facts dd { margin: 0; }

/* ---- timeline ---- */

.timeline { display: block; width: 100%; height: auto; margin: 0.5rem 0; }

.tl-night { fill: #eef2f1; }
/* Buffer fill comes from the SVG hatch pattern attribute; CSS only adds the strong neutral outline. */
.tl-buffer { stroke: #4f4a43; stroke-width: 1; }
.tl-buffer-prov { stroke-dasharray: 3 2; opacity: 0.7; }
.tl-hatch-bg { fill: #ece7df; }
.tl-hatch-line { stroke: #6b645a; stroke-width: 2; }
.tl-dots-bg { fill: #eef2f1; }
.tl-dot { fill: #8f989e; }
.tl-wrap { margin: 0.5rem 0; }
.tl-wrap .timeline { margin: 0 0 0.25rem; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.2rem 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--text); }
.tl-legend li { display: flex; align-items: center; gap: 0.35rem; }
.tl-legend .tl-note { flex-basis: 100%; color: var(--muted); }
.lg { display: inline-block; flex: none; width: 1.4rem; height: 0.8rem; border: 1px solid #4f4a43; }
.lg-red { background: var(--alert-red); border-color: var(--alert-red); }
.lg-yellow { background: var(--alert-yellow); border-color: #9a7a05; }
.lg-other { background: #8a8f94; border-color: #6d7276; }
.lg-buffer { background: repeating-linear-gradient(45deg, #ece7df 0 3px, #6b645a 3px 5px); }
.lg-buffer-prov { background: repeating-linear-gradient(45deg, #ece7df 0 3px, #6b645a 3px 5px); border-style: dashed; opacity: 0.7; }
.lg-unknown { background: radial-gradient(circle, #8f989e 0.9px, transparent 1.2px) 0 0 / 5px 5px, #eef2f1; border-style: dotted; }
.lg-rest { height: 0.45rem; border: 2px solid var(--accent); border-top: none; background: none; }
.tl-buffers { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; color: var(--muted); }
.tl-red { fill: var(--alert-red); }
.tl-yellow { fill: var(--alert-yellow); }
.tl-other { fill: #8a8f94; }
.tl-rest { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tl-obs { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 2; }
.tl-tick { stroke: var(--muted); stroke-width: 1; }
/* 20 viewBox units: about 11 px when the 600-unit chart is ~335 px wide (hour/DST-fold labels stay legible). */
.tl-text { fill: var(--muted); font-size: 20px; }
.timeline { overflow: visible; }

.chips { margin: 0.25rem 0; padding: 0; list-style: none; font-size: 0.88rem; }

.chips li { margin: 0.3rem 0; }

.chip {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 650;
}

.chip-red { background: var(--alert-red); color: #ffffff; }
.chip-yellow { background: var(--alert-yellow); color: #2a2100; }
.chip-other { background: #d7d9db; color: var(--text); }

/* ---- raw table ---- */

.table-wrap { overflow-x: auto; max-width: 100%; }

table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }

th, td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }

th { font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ---- footer ---- */

.site-footer { padding: 0 1.5rem 1.5rem; font-size: 0.82rem; color: var(--muted); }

.site-footer p { margin: 0.25rem 0; max-width: 60rem; }

/* ONE closed global «Про дані» block: the full source/import/collection status and general explanations. */
.about-data { max-width: 60rem; }

.about-data > summary { color: var(--text); font-weight: 600; }

.about-data p { overflow-wrap: anywhere; }

.home-row .update-status { flex: 1 1 14rem; }

/* ---- phone ---- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0.75rem; gap: 0.75rem; }
  .site-header { padding: 0.75rem; }
  .map-panel { padding: 0.75rem; }
  .map { max-height: none; }
  .detail {
    order: -1; /* single column: own result before the map */
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 14px 14px 10px 10px;
    box-shadow: 0 -2px 12px rgba(31, 42, 51, 0.08);
  }
  .site-footer { padding: 0 0.75rem 1rem; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .night-label { flex-basis: 100%; }
  /* R36 compact phone top: same controls and facts, fewer words and less padding. */
  .site-header { padding: 0.45rem 0.75rem 0.4rem; gap: 0.3rem; }
  .site-header .badge { display: none; }             /* «Експериментальна оцінка…» stays in the footer */
  .site-header .date-label {                         /* visually hidden, still the input's accessible label */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nl-full { display: none; }
  .nl-short { display: inline; }
  .night-row, .home-row { gap: 0.35rem; }
  .site-header .icon-btn, .site-header .text-btn { min-height: 2.1rem; }
  .site-header .text-btn { padding: 0.2rem 0.55rem; }
  .home-row .update-status { flex-basis: 100%; order: 5; font-size: 0.82rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { margin-bottom: 0.35rem; }
  .score-value { font-size: 2.2rem; }
  .score-hero .score-value { font-size: 2.8rem; min-width: 3.6rem; }
  .tl-legend { font-size: 0.78rem; }
}