/* ---------------------------------------------------------------------------
 * Průtoky – barevné a typografické tokeny dashboardu
 *
 * Všechny hodnoty prošly validátorem palety (kontrast vůči podkladu, monotónní
 * světlost ramp, odstup barvoslepých párů). Neměňte hexy „od oka“ – když je
 * potřeba jiná barva, posuňte krok v rámci téže rampy a přeměřte.
 *
 * Měřené hodnoty (světlý podklad #fcfcfb / tmavý #1a1a19):
 *   – povodňová (modrá) i suchá (okrová) rampa: monotónní světlost, ΔL ≥ 0,06,
 *     světlý konec 2,06:1 resp. 2,58:1
 *   – mokrý vs. suchý pól: ΔE 27,0 (protanopie) / 31,2 (běžné vidění)
 *     – tedy pár, který nikdo nesplete; to je důvod, proč je povodeň modrá
 *   – teplotní rampa (tyrkys): monotónní, světlý konec 2,18:1
 * ------------------------------------------------------------------------- */

.prutoky {
  color-scheme: light;

  /* --- plochy a inkoust ------------------------------------------------- */
  --surface-1: #fcfcfb;          /* karty, graf */
  --surface-page: #f9f9f7;       /* pozadí stránky a mapy */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;         /* popisky os, města na mapě */
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);

  /* --- index situace: povodňové rameno (víc vody = temnější modrá) ------ */
  --wet-1: #86b6ef;              /* zvýšený stav, pod 1. SPA */
  --wet-2: #3987e5;              /* 1. SPA – bdělost */
  --wet-3: #1c5cab;              /* 2. SPA – pohotovost */
  --wet-4: #0d366b;              /* 3. SPA – ohrožení a výš */

  /* --- index situace: suché rameno (míň vody = temnější okrová) --------- */
  --dry-1: #cf9426;              /* nízký stav */
  --dry-2: #ab6b1a;              /* pod mezí sucha */
  --dry-3: #824c16;              /* výrazné sucho */
  --dry-4: #573110;              /* mimořádné sucho */

  /* --- střed stupnice --------------------------------------------------- */
  --neutral-fill: #c3c2b7;       /* značka „normál“ na mapě */
  --neutral-band: #f0efec;       /* pásmo normálu v grafu */

  /* --- stav (ikona + popisek povinně, barva nikdy sama) ----------------- */
  --status-good: #0ca30c;
  --status-warning: #fab219;     /* 1. SPA / začínající sucho */
  --status-serious: #ec835a;     /* 2. SPA / sucho */
  --status-critical: #d03b3b;    /* 3. SPA / mimořádné sucho */

  /* --- teplota vody: vlastní sekvenční rampa, jedna hue ----------------- */
  --temp-series: #1baf7a;        /* barva čáry teploty v grafu i ikony čipu */
  --temp-1: #4dc199;             /* nejchladnější */
  --temp-2: #1f9d75;
  --temp-3: #147053;
  --temp-4: #0b4834;
  --temp-5: #063020;             /* nejteplejší */

  /* --- mapa ------------------------------------------------------------- */
  --map-land: #f4f4f1;
  --map-border: #d8d7d0;         /* státní hranice */
  --map-river: #c7d6e4;          /* vodní toky – vlásečnice, ustupují */
  --map-river-faint: #e3e8ed;    /* toky za hranicí – jen naznačené */
  --map-river-major: #a8c1d8;    /* Labe, Vltava, Morava, Odra */
  --map-river-active: #5b86ad;   /* tok pod kurzorem – jen zvýraznění, ne stupnice */
  --map-city: #898781;

  /* --- typografie ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .prutoky {
    color-scheme: dark;

    --surface-1: #1a1a19;
    --surface-page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.1);

    --wet-1: #256abf;
    --wet-2: #3987e5;
    --wet-3: #86b6ef;
    --wet-4: #b7d3f6;

    --dry-1: #8a4f18;
    --dry-2: #b8701c;
    --dry-3: #e09a2a;
    --dry-4: #f0c46a;

    --neutral-fill: #52514e;
    --neutral-band: #232322;

    --temp-series: #199e70;
    --temp-1: #127854;
    --temp-2: #199e70;
    --temp-3: #3dbc91;
    --temp-4: #7fd0b4;
    --temp-5: #b6e6d4;

    --map-land: #141413;
    --map-border: #33332f;
    --map-river: #2f3a44;
    --map-river-faint: #242b31;
    --map-river-major: #3d4e5c;
    --map-river-active: #7fa2bd;
    --map-city: #898781;
  }
}

/* Přepínač témat musí přebít nastavení OS v obou směrech. */
:root[data-theme="dark"] .prutoky {
  color-scheme: dark;

  --surface-1: #1a1a19;
  --surface-page: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.1);

  --wet-1: #256abf;
  --wet-2: #3987e5;
  --wet-3: #86b6ef;
  --wet-4: #b7d3f6;

  --dry-1: #8a4f18;
  --dry-2: #b8701c;
  --dry-3: #e09a2a;
  --dry-4: #f0c46a;

  --neutral-fill: #52514e;
  --neutral-band: #232322;

  --temp-series: #199e70;
  --temp-1: #127854;
  --temp-2: #199e70;
  --temp-3: #3dbc91;
  --temp-4: #7fd0b4;
  --temp-5: #b6e6d4;

  --map-land: #141413;
  --map-border: #33332f;
  --map-river: #2f3a44;
  --map-river-faint: #242b31;
  --map-river-major: #3d4e5c;
  --map-river-active: #7fa2bd;
  --map-city: #898781;
}

/* Pozn. k tmavému režimu: u obou ramen indexu se pořadí obrací – na tmavém
 * podkladu znamená „víc“ světlejší a sytější krok, ne tmavší. Není to
 * automatický převrat barev, jsou to vlastní kroky vybrané pro tmavý podklad. */

/* ---------------------------------------------------------------------------
 * Stránka a chování, které nejde vyjádřit inline stylem.
 * ------------------------------------------------------------------------- */

body { margin: 0; background: var(--surface-page, #f9f9f7); }
:root[data-theme="dark"] body { background: #0d0d0d; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) body { background: #0d0d0d; }
}

a { color: #1c5cab; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #0d366b; }
:root[data-theme="dark"] a { color: #86b6ef; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) a { color: #86b6ef; }
}

/* Nejzazší pásma pulzují, aby šla poznat i periferním viděním. */
@keyframes prutoky-pulse {
  0% { opacity: .55; transform: scale(1); }
  70% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.1); }
}
[data-pulse] { animation: prutoky-pulse 2s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  [data-pulse] { animation: none !important; opacity: .45 !important; }
}

/* Filtr dlaždicemi: ztlumí všechno mimo vybranou skupinu. Čistě deklarativně,
   ať se při překreslení nemusí procházet značky v JS. */
[data-filter] [data-group] { transition: opacity .12s ease-out; }
[data-filter="spa"] [data-group]:not([data-group="spa"]),
[data-filter="dry"] [data-group]:not([data-group="dry"]),
[data-filter="norm"] [data-group]:not([data-group="norm"]) { opacity: .16; }

/* Fokusový prstenec značky – klávesnice musí vidět totéž co myš. */
.prutoky-marker:focus { outline: none; }
.prutoky-marker:focus-visible [data-hit] {
  stroke: var(--text-primary);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.prutoky-theme-toggle:hover { border-color: var(--baseline); color: var(--text-primary); }
.prutoky-tile:hover { border-color: var(--baseline); }

@media (max-width: 1100px) {
  .prutoky-split { grid-template-columns: 1fr !important; }
  .prutoky-hero { grid-template-columns: 1fr !important; gap: 20px !important; }
  .prutoky-hero-side { align-items: flex-start !important; }
}
@media (max-width: 640px) {
  .prutoky-legend {
    position: static !important;
    margin-top: 10px;
    border-radius: 0 0 10px 10px !important;
    border-width: 1px 0 0 0 !important;
  }
  .prutoky-legend-scale { width: 100% !important; }
}

.prutoky-tile[aria-pressed="true"] {
  border-color: var(--text-secondary) !important;
  box-shadow: inset 0 0 0 1px var(--text-secondary);
}

/* Mapa se dá chytit a táhnout. */
[data-map-svg] { cursor: grab; }
[data-map-svg]:active { cursor: grabbing; }

/* Přehled republiky a přiblížený pohled kreslí toky z jiné vrstvy: v přehledu
   hrubá síť z Natural Earth, po přiblížení podrobná z OpenStreetMap.

   Hrubá ustoupí teprve tehdy, když je podrobná opravdu v dokumentu – ta se
   dotahuje ze serveru a stažení se nemusí povést. Bez té podmínky by po
   přiblížení nezbylo z toků uvnitř republiky vůbec nic. */
[data-map-wrap][data-zoom="0"] [data-zoom-band="detail"],
[data-map-wrap][data-rivers="detail"]:not([data-zoom="0"]) [data-zoom-band="overview"] { display: none; }

/* Tok pod kurzorem. Vlásečnice o šířce pixelu se musí i ztloustnout, samotná
   změna barvy by na ní zanikla. */
[data-layer-lines] [data-active] { stroke: var(--map-river-active); stroke-width: 2.8; }

.prutoky-zoom:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-page); }
.prutoky-zoom:disabled { opacity: .4; cursor: default; }

/* Režimy mapy: aktivní záložka a výměna legendy. */
.prutoky-mode[aria-selected="true"] {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  font-weight: 600;
}
.prutoky-mode:hover:not([aria-selected="true"]) { color: var(--text-primary); }

/* Karta a značka se zvýrazní navzájem. */
.prutoky-card { cursor: pointer; transition: border-color .12s ease-out; }
.prutoky-card[data-active], .prutoky-card:hover { border-color: var(--baseline); }
.prutoky-marker[data-active] [data-fill] { stroke: var(--text-primary); stroke-width: 2.6; }

/* Seznam karet: nenápadný posuvník, ať neruší. */
.prutoky-cards { scrollbar-width: thin; scrollbar-color: var(--baseline) transparent; }