/* Atlas client (beta). Same visual family as the site; no framework. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #16212e; background: #f4f6f8; }
.atl-header { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e3e8ee; }
.atl-brand { font-weight: 800; font-size: 18px; color: #16212e; text-decoration: none; }
.atl-brand span { color: #0d7470; }
.atl-beta { font-size: 12.5px; background: #fdf6e3; color: #8a5a00; border-radius: 8px; padding: 3px 10px; }
.atl-lang { margin-left: auto; display: flex; gap: 4px; }
.atl-lang button { border: 1px solid #d7dee6; background: #fff; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.atl-lang button[aria-pressed="true"] { background: #0d7470; color: #fff; border-color: #0d7470; }
.atl-main { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - 49px); }
.atl-map { height: 100%; }
/* overflow-x is EXPLICIT: with only overflow-y set, CSS computes the other axis to auto, and any
   wide child (a tick strip, a long unbroken token) gave the whole panel a horizontal scrollbar
   (external review 2026-08-17). Wide strips scroll themselves; the panel never does. */
.atl-panel { overflow-y: auto; overflow-x: hidden; padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Once a point is chosen the panel flips priority (flex order): the profile is the ANSWER, so it
   moves above the layer controls; history and upwind travel with it. Telemetry 2026-08-17: the
   profile endpoints are the most-used atlas surface, yet the card sat below the fold. */
.atl-panel.atl-has-point #search-card { order: -4; }
.atl-panel.atl-has-point #profile-card { order: -3; }
.atl-panel.atl-has-point #history-card { order: -2; }
.atl-panel.atl-has-point #upwind-card { order: -1; }

/* First-visit hint over the map: teaches the click→profile interaction, then gets out of the way.
   pointer-events none — it must never eat a map click, least of all the click that dismisses it. */
.atl-maphint {
  position: absolute; left: 12px; bottom: 16px; z-index: 800;
  background: rgba(255,255,255,.93); border: 1px solid #d7dee6; border-radius: 9px;
  padding: 7px 11px; font-size: 12.5px; color: #16212e;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); pointer-events: none; max-width: 320px;
}
.atl-card { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 14px 16px; }
.atl-card h1 { font-size: 17px; margin: 0 0 8px; }
.atl-card h2 { font-size: 14.5px; margin: 0 0 8px; }
.atl-muted { color: #5b6c7d; font-size: 13.5px; margin: 0; }
.atl-small { font-size: 12.5px; }
.atl-note { color: #8a5a00; font-size: 12.5px; }
.atl-coords { font-variant-numeric: tabular-nums; font-size: 14px; margin: 0 0 8px; }
.atl-state { border-top: 1px solid #eef1f4; padding: 8px 0; font-size: 13.5px; }
.atl-state .st { display: inline-block; border-radius: 7px; padding: 2px 8px; font-size: 12px; margin-right: 6px; }
.st-ok { background: #e6f4ea; color: #1d6f42; }
.st-blocked { background: #fdf6e3; color: #8a5a00; }
.st-unavail { background: #eef1f4; color: #5b6c7d; }
.atl-envelope { margin-top: 6px; font-size: 12px; color: #5b6c7d; }
.atl-envelope summary { cursor: pointer; color: #0d7470; }
.atl-envelope li { margin: 2px 0; }
.atl-layer { border-top: 1px solid #eef1f4; padding: 7px 0; font-size: 13px; }
.atl-layer:first-child { border-top: 0; }
.atl-layer .why { display: block; color: #8a5a00; font-size: 12px; margin-top: 3px; }
.atl-doc { border-top: 1px solid #eef1f4; padding: 7px 0; font-size: 13px; }
.atl-doc .meta { color: #5b6c7d; font-size: 12px; }
.atl-cta { display: inline-block; background: #0d7470; color: #fff; border-radius: 9px; padding: 9px 14px; text-decoration: none; font-size: 14px; }
.atl-cta:hover { background: #275d96; }
.atl-disclaimer { background: #f9fafb; }
@media (max-width: 900px) {
  .atl-main { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; }
}

/* Location-oriented profile (north star §3/§4): search, period selector, module tabs. */
.atl-search-label { display: block; font-size: 12.5px; color: #5b6c7d; margin: 10px 0 4px; }
.atl-search { width: 100%; border: 1px solid #d7dee6; border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 14px; }
.atl-search:focus { outline: 2px solid #0d7470; outline-offset: 1px; }
.atl-search-results { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid #e3e8ee; border-radius: 9px; background: #fff; max-height: 220px; overflow-y: auto; }
.atl-search-results li { padding: 7px 10px; font-size: 13.5px; cursor: pointer; }
.atl-search-results li:hover { background: #f4f6f8; }
.atl-search-empty { color: #5b6c7d; cursor: default !important; }
.atl-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.atl-period { border: 1px solid #d7dee6; background: #fff; border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.atl-period[aria-pressed="true"] { background: #0d7470; color: #fff; border-color: #0d7470; }
.atl-period[disabled] { opacity: .5; cursor: not-allowed; }
.atl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; border-bottom: 1px solid #eef1f4; padding-bottom: 8px; }
.atl-tab { border: 1px solid #d7dee6; background: #fff; border-radius: 9px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.atl-tab[aria-selected="true"] { border-color: #0d7470; box-shadow: inset 0 -2px 0 #0d7470; }
.atl-tab .st { margin-left: 4px; margin-right: 0; }
.atl-tabpanel { min-height: 40px; }
.atl-src { display: block; color: #5b6c7d; font-size: 12px; margin-top: 2px; }
.atl-sub { font-size: 13px; margin: 12px 0 4px; }
.atl-obs { border-top: 1px solid #eef1f4; padding: 7px 0; font-size: 13px; }
.atl-obs .meta { color: #5b6c7d; font-size: 12px; }
.atl-modnote { font-size: 12.5px; color: #5b6c7d; margin: 0 0 10px; line-height: 1.45; }
.atl-modlink { margin-right: 10px; }

/* Marker clusters. ONE flat colour per kind — never a green→yellow→red scale by count, which on
   an air-quality map reads as a pollution verdict. The number counts stations, nothing more. */
.atl-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font: 600 12.5px/1 system-ui, sans-serif; color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.atl-cluster-official  { background: #3f9c68; }
.atl-cluster-community { background: #2b6cb0; }
.atl-cluster-industry  { background: #b98726; }
.atl-cluster-project   { background: #7b8794; }
.atl-cluster-fire      { background: #b4531f; }
.atl-cluster-satellite { background: #6b46a8; }
.atl-sat-marker span { display: block; width: 12px; height: 12px; background: #8b5cc7;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* Legend for the active tab. Swatch colours MUST match the marker styles above — they are the
   same visual claim in two places, and a mismatch would teach the reader the wrong key. */
.atl-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 10px; }
.atl-legend:empty { margin: 0; }
.atl-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5b6c7d; }
.atl-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lg-official  { background: #3f9c68; }
.lg-community { background: #2b6cb0; }
.lg-operating { background: #d9a441; }
.lg-project   { background: #ffffff; box-shadow: 0 0 0 1px #7b8794; }
.lg-fire      { background: #e8a33d; box-shadow: 0 0 0 1px #b4531f; }
#layers-card .atl-tabs { margin-top: 4px; }

/* Layer toggles — the control IS the legend, so a symbol is learned where it is switched. */
.atl-layer-toggle { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 13px; cursor: pointer; }
/* «Дополнительные слои»: model/wind/interpolation fold behind one expander (telemetry 2026-08-17:
   single-digit-visitor layers). An advanced layer that is ON forces the expander open in JS. */
.atl-advanced { margin-top: 2px; }
.atl-advanced summary { cursor: pointer; font-size: 12.5px; color: #0d7470; padding: 4px 0; list-style-position: inside; }
.atl-layer-toggle.is-off { opacity: .6; cursor: default; }
.atl-layer-toggle input { margin: 0; }
.atl-swatches { display: inline-flex; gap: 3px; }
.atl-layer-name { flex: 1; }
.atl-layer-count { color: #5b6c7d; font-variant-numeric: tabular-nums; font-size: 12px; }
.atl-tabs { display: block; border-bottom: 0; padding-bottom: 0; }

/* Region lock */
.atl-region { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.atl-region-label { font-size: 12.5px; color: #5b6c7d; }
.atl-region-select { border: 1px solid #d7dee6; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.atl-region-on { font-size: 13px; }
.atl-region-clear { border: 1px solid #d7dee6; background: #fff; border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12.5px; cursor: pointer; }

/* Explanations, one click away instead of in the way. */
.atl-details { margin: 8px 0 0; font-size: 12.5px; }
.atl-details summary { cursor: pointer; color: #0d7470; }
.atl-details .atl-modnote { margin-top: 6px; }
.atl-objtype { margin: 10px 0 8px; }
.atl-objtype .atl-region-select { width: 100%; }

/* Satellite scale: a sequential ramp with real numbers. Never a traffic light — a tropospheric
   column has no PDK, so no colour here may imply safe or dangerous. */
.atl-satscale { margin: 4px 0 10px; }
.atl-satscale:empty { margin: 0; }
.atl-satvars { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.atl-satvar { border: 1px solid #d7dee6; background: #fff; border-radius: 7px; padding: 2px 9px;
  font: inherit; font-size: 12px; cursor: pointer; }
.atl-satvar[aria-pressed="true"] { background: #6b46a8; color: #fff; border-color: #6b46a8; }
.atl-satramp { display: flex; height: 10px; border-radius: 3px; overflow: hidden; }
.atl-satramp i { flex: 1; }
.atl-satrange { display: flex; justify-content: space-between; font-size: 11.5px; color: #5b6c7d; margin-top: 2px; }

/* Satellite view switch: the daily national composite vs hexagons. Same affordance as the
   variable switch above it, deliberately — they are two axes of one control, not two controls. */
.atl-satmodes { margin-top: 4px; }
.atl-satmode {
  font: inherit;
  padding: 2px 8px;
  margin-right: 4px;
  border: 1px solid var(--atl-line, #cfd6dd);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.atl-satmode[aria-pressed="true"] {
  background: var(--atl-accent, #21618c);
  border-color: var(--atl-accent, #21618c);
  color: #fff;
}

/* Analysis tools («Кандидаты p99», «Динамика»): their own MODULE row's box (owner 2026-08-17,
   third pass — inside the satellite box they existed only while «Спутник» was on). Each button
   is followed by one line saying what pressing it will show. */
.atl-satanalysis { margin-top: 2px; }
.atl-satanalysis-x { font-size: 11.5px; color: #5b6c7d; margin: 3px 0 8px; }

/* Country reset: one visible way back to the whole-Kazakhstan frame. Sits with the zoom
   control; wide enough for its label because an icon alone is not a legend. */
.atl-reset-country a {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto !important;
  padding: 0 8px;
  font-size: 12.5px;
  white-space: nowrap;
  color: #16212e;
  text-decoration: none;
}
.atl-reset-label { font-weight: 600; }

/* The satellite sub-controls, boxed inside their own row (owner, 2026-08-15). Empty while the
   module is off — and an empty box is no box at all. */
.atl-satbox {
  margin: 2px 0 8px 24px;
  padding: 6px 8px;
  border: 1px solid var(--atl-line, #cfd6dd);
  border-radius: 6px;
  background: #fbfcfd;
}
.atl-satbox:empty { display: none; }

/* The map legend (owner, 2026-08-15): collapsible, bottom-left, ON the map it explains. */
.atl-maplegend {
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid #cfd6dd;
  border-radius: 6px;
  padding: 4px 8px;
  max-width: 230px;
  font-size: 12px;
  color: #16212e;
  box-shadow: 0 1px 4px rgba(22, 33, 46, 0.15);
}
.atl-maplegend summary { cursor: pointer; font-weight: 600; }
.atl-maplegend .atl-lgrow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.atl-maplegend .atl-lgramp { margin: 6px 0 2px; }
.atl-maplegend .atl-satramp { margin-top: 2px; }
.atl-swatch-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7a8ba0;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  flex: none;
}
.lg-marker {
  background: #2a81cb;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* The icon family (owner package 2026-08-15): flat SVG divIcons in spec-18-ordered panes. */
.atl-icon { background: none; border: none; }
.atl-icon svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(17, 24, 39, 0.35)); }
.atl-swatch-icon { background: none !important; border-radius: 0; width: auto; height: auto; display: inline-flex; align-items: center; }
.atl-swatch-icon svg { display: block; }

/* Cluster families (spec 15): observation circular, industry rounded-square, thermal a ring.
   Category colours (spec 16) — a count is never a severity. */
.atl-cluster-official  { background: #245B9E; }
.atl-cluster-community { background: #008C95; }
.atl-cluster-industry,
.atl-cluster-project   { border-radius: 9px; }
.atl-cluster-industry  { background: #B56B00; }
.atl-cluster-project   { background: #6B7280; }
.atl-cluster-fire      { background: #fff; border: 3px solid #D97706; color: #92400E; }
/* Thermal LOCATIONS (year places) share the thermal ring family; the count is places, not heat. */
.atl-cluster-thermal   { background: #fff; border: 3px solid #D97706; color: #92400E; }

/* The model ramp — its own element family, so the satellite one-ramp invariant stays countable. */
.atl-maplegend .atl-modelramp { display: flex; height: 10px; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.atl-maplegend .atl-modelramp i { flex: 1; }

/* Smooth numeric-legend bars (owner request 2026-08-15): one gradient per actually-painted
   palette, real endpoint numbers beneath — the addLegendNumeric look, honestly sourced. */
.atl-maplegend .atl-gradbar { height: 12px; border-radius: 2px; margin-top: 2px; }

/* «Область» and «Город» each on their own line (owner, 2026-08-15). */
.atl-region .atl-region-label { display: block; margin: 6px 0 2px; }
.atl-region .atl-region-select { display: block; max-width: 100%; }

/* The oblast selection snake (owner, 2026-08-15): trace once, settle faint. */
.leaflet-atl-outline-pane { pointer-events: none; }
.atl-border-snake.run { transition: stroke-dashoffset 1.6s ease; }
.atl-border-snake.settled { stroke-opacity: 0.45; stroke-width: 1.5; }

/* The wind particle canvas — a map pane citizen, never an event target. */
.atl-wind-canvas { pointer-events: none; }

/* Icon states (icon spec §17): halo and weight, never a different symbol. */
.atl-icon svg { transition: transform 0.12s ease, filter 0.12s ease; }
.atl-icon:hover svg { transform: scale(1.18); filter: drop-shadow(0 1px 3px rgba(17, 24, 39, 0.5)); }
.atl-icon-selected svg { filter: drop-shadow(0 0 5px rgba(36, 91, 158, 0.95)) drop-shadow(0 1px 2px rgba(17, 24, 39, 0.4)); }

/* «Что с наветренной стороны?» — analysis states (research_wind 06B; icon spec §14: no red, no culprit) */
.atl-upwind-btn { display: block; margin-top: 7px; border: 1px solid #0d7470; color: #0d7470; background: #fff;
  border-radius: 7px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.atl-upwind-btn:hover { background: #e7f3f1; }
.atl-up-row { border-top: 1px solid #e6ebf1; padding: 6px 0 2px; }
#upwind-card h2 { font-size: 15px; }

/* «Динамика измерений» (B-4) — the history chart */
.atl-hist-svg { width: 100%; height: auto; display: block; margin-top: 4px; }
.atl-hist-txt { font-size: 8.5px; fill: #5b6470; }
#history-card h2 { font-size: 15px; }

/* hotspot candidates — hollow dashed ring, deliberately severity-free */
.atl-swatch-hotspot { border: 2px dashed #5b6470; border-radius: 50%; background: transparent; }

/* «Время данных» — the per-layer time claims at the top of the map legend (brainstorm §4) */
.atl-lgtime { border-bottom: 1px solid #e6ebf1; margin-bottom: 5px; padding-bottom: 4px; }
.atl-lgtimehead { font-weight: 600; font-size: 10.5px; color: #5b6470; margin-bottom: 2px; }
.atl-lgtimerow { font-size: 10.5px; color: #38424d; line-height: 1.45; }

/* oblast boundaries — national-view furniture + manual toggle */
.atl-borders-toggle a { font-size: 12px; width: auto; padding: 0 8px; }
.atl-borders-toggle a[aria-pressed="true"] { background: #e7f3f1; color: #0a5a57; }
.atl-border-all { pointer-events: none; }

/* «Динамика» — the hex timeline strip */
.atl-tlticks { display: flex; gap: 2px; margin: 5px 0 3px; flex-wrap: wrap; }
.atl-tltick { width: 8px; height: 12px; border-radius: 2px; cursor: pointer; }
.atl-tl-full { background: #2f6fb2; }
.atl-tl-partial { background: #93bce0; }
.atl-tl-thin { background: #d7dee6; }
.atl-tl-absent { background: transparent; border: 1px dashed #c3ccd6; }
.atl-tl-current { outline: 2px solid #1d2b3a; outline-offset: 1px; }
.atl-tlspark svg { width: 100%; height: auto; display: block; margin-top: 4px; border-top: 1px solid #e6ebf1; padding-top: 3px; }

/* wind forecast hour strip */
.atl-wfhours { flex-wrap: wrap; gap: 3px; }
.atl-wfh { padding: 2px 6px; font-size: 11.5px; }


.atl-lgfile { color: #0d7470; text-decoration: none; }
.atl-lgfile:hover { text-decoration: underline; }

/* the muted one-hue swatch (CSP forbids inline style attributes — everything is a class) */
.atl-swatch-muted { background: #7a8ba5; }

/* the small north arrow — orientation, not navigation */
.atl-north a { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }

/* «Динамика города» — the hour explorer (W-T2/W-T3) */
/* A taller tick at every UTC midnight: day boundaries make 168+ hour ticks navigable. */
.atl-tltick.atl-tl-day { height: 16px; border-bottom: 2px solid #1d2b3a; }
/* СЦЕНАРИЙ — the hypothesis must be unmistakable on the map itself (screenshots included). */
.atl-scenario-badge {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1200;
  background: #7a1f1f; color: #fff; font: 600 12px/1.2 system-ui, sans-serif;
  padding: 5px 12px; border-radius: 4px; letter-spacing: 0.4px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.atl-scenario-line { color: #7a1f1f; font-weight: 600; }
.atl-scen-row { align-items: center; }
.atl-scen-input {
  width: 58px; padding: 2px 4px; font-size: 12px; border: 1px solid #c3ccd6; border-radius: 3px;
}

/* Facility thermal signature panel (click a facility → nearby thermal activity over time) */
.atl-factherm-btn {
  margin-top: 5px; font-size: 12px; padding: 3px 9px; cursor: pointer;
  border: 1px solid #c3ccd6; border-radius: 3px; background: #f3f6fa; color: #0a5a57;
}
.atl-factherm-btn:hover { background: #e7eef6; }
.atl-factherm-panel { margin-top: 6px; }
.atl-ftchart { display: flex; align-items: flex-end; gap: 1px; height: 24px; margin: 4px 0 2px; }
.atl-ftchart span { width: 4px; min-height: 1px; border-radius: 1px; }
.atl-ftbar { background: #b2182b; }
.atl-ftbar-quiet { background: #cfd8e2; height: 2px !important; }
.atl-ftbar-unobserved { background: transparent; border: 1px dashed #c3ccd6; height: 10px !important; }
.atl-ftlegend { font-size: 10.5px; color: #5a6875; }