/* ==================================================================
   KZS — water level page (vodostaji.php)
   Split out of water.css so this page carries its own styles and
   cannot end up half-styled if one file is copied and the other is not.
================================================================== */

/* ---------- current readings ---------- */

.nowrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin-bottom: 14px; }
.now { display: flex; align-items: baseline; gap: 5px; }
.now span { font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); }
.now b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.now i { font-style: normal; font-size: 12px; color: var(--muted); }
.nowmeta { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------- chart ---------- */

.charthost { position: relative; margin: 6px 0 4px; }
.charthost.loading { opacity: 0.5; }
svg.chart { width: 100%; height: 260px; display: block; touch-action: pan-y; }
svg.chart .grid { stroke: var(--line-2); stroke-width: 1; }
svg.chart .yl, svg.chart .xl { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }
svg.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.charthost .readout {
  position: absolute; top: 2px; right: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 8px; font-size: 11.5px; color: var(--muted);
}
.charthost .readout b { color: var(--ink); font-variant-numeric: tabular-nums; }
.nodata { padding: 40px 0; text-align: center; color: var(--muted); font-style: italic; }

.tablewrap { margin-top: 12px; }
.tablewrap summary { cursor: pointer; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.tablewrap table { margin-top: 6px; }

/* ---------- forecast ---------- */

.fchart { position: relative; margin: 4px 0 2px; }

svg.fsvg { width: 100%; height: 220px; display: block; touch-action: pan-y; }
svg.fsvg .grid { stroke: var(--line-2); stroke-width: 1; }
svg.fsvg .yl, svg.fsvg .xl { font-family: var(--mono); font-size: 9.5px; fill: var(--muted); }

svg.fsvg .farea { fill: url(#fcFill); }
svg.fsvg .fline {
  fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}

svg.fsvg .fdiv { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
svg.fsvg .fdayname {
  font-size: 10.5px; font-weight: 700; fill: var(--navy);
  letter-spacing: 0.04em;
}

svg.fsvg .fnow { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 3 3; }
svg.fsvg .fnowdot { fill: var(--red); }

svg.fsvg .fhit { fill: transparent; }
svg.fsvg .fcross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg.fsvg .fdot { fill: var(--navy); stroke: #fff; stroke-width: 1.5; }

.fchart .readout {
  position: absolute; top: 2px; right: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 8px; font-size: 11.5px; color: var(--muted);
  pointer-events: none;
}
.fchart .readout b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  svg.fsvg { height: 190px; }
}

/* shown only if this stylesheet failed to load */
.cssmissing {
  border-left: 3px solid var(--red); background: #fdeaed;
  padding: 9px 11px; font-size: 13px; margin-bottom: 12px;
}