/* Copyright 2026 by John A Kline.  See LICENSE.txt for your rights.
   Tides page: PAW styling for the weewx-xtide interactive tide graph.
   The xg-* class names are a contract with weewx-xtide's XTideGraphBuilder
   SVGs and scripts/xtide.js -- do not rename them here.
   Tab bar (.tidenav) mirrors the celestial pages' .celnav look. */

/* Location heading */
.xg-loc{color:#367ba3;text-align:center;font-size:26px}
.xg-sp .xg-loc{font-size:34px}

/* View tabs -- celnav look, but buttons switching in-page views */
.tidenav{width:100%;margin:6px 0 14px}
.tidenav .bar{width:44%;margin-left:28%;background-color:#5A6673;border:3px solid Silver;font-size:0}
.tidenav button.xg-tab{display:inline-block;width:33.33%;padding:9px 0;color:#f2f2f2;
  background:none;border:none;margin:0;font-size:17px;font-family:inherit;
  text-align:center;cursor:pointer}
.tidenav button.xg-tab:hover{background-color:#ddd;color:black}
.tidenav button.xg-tab.xg-active{background-color:SlateGray;color:white}
.tidenav-sp .bar{width:86%;margin-left:7%}
.tidenav-sp button.xg-tab{padding:12px 0;font-size:32px}

/* Graph -- white card on the #e3e3e3 page */
.xg-wrap{position:relative;width:97%;margin:0 auto}
.xg-hidden{display:none}
svg.xg{width:100%;height:auto;display:block;background:#ffffff;border:1pt solid #aaaaaa}
.xg-night{fill:#e7edf3}
.xg-grid{stroke:#dddddd;stroke-width:1}
.xg-frame{fill:none;stroke:#aaaaaa;stroke-width:1}
.xg-curve{fill:none;stroke:#367ba3;stroke-width:2}
.xg-hi{fill:#1a6ea0}
.xg-lo{fill:#b06e2b}
.xg-lab{font-family:sans-serif;font-size:12px;fill:#555555}
.xg-ylab{text-anchor:end}
.xg-xlab{text-anchor:middle}
.xg-evlab{text-anchor:middle;font-size:11px;fill:#333333}
.xg-unitlab{text-anchor:start;fill:#888888}
.xg-nowline{stroke:#cc3333;stroke-width:1.5;stroke-dasharray:4 3}
.xg-cursor{fill:none;stroke:#cc3333;stroke-width:2}
.xg-tooltip{display:none;position:absolute;background:#ffffff;border:1px solid #888888;
  border-radius:4px;padding:6px 9px;font-size:13px;text-align:left;pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);white-space:nowrap}

/* Smartphone (pages render at a forced 1124px viewport): bigger SVG text and
   tooltip; drop the day view's inline event labels -- tap for the tooltip. */
.xg-sp .xg-lab{font-size:24px}
.xg-sp .xg-evlab{display:none}
.xg-sp .xg-tooltip{font-size:28px}

/* Event list below the graph -- compact rows matching the weewx-xtide sample */
.xg-events{width:97%;margin:18px auto 0 auto;border-collapse:collapse;border:1pt solid #aaaaaa;text-align:center;background:#ffffff}
.xg-evrow td{border-bottom:1pt solid #dddddd;padding:8px 12px;font-size:17px}
.xg-evicon img{display:block;margin:0 auto;width:40px;height:auto}
.xg-evlevel{font-size:20px}
.xg-sp .xg-evrow td{font-size:28px;padding:12px}
.xg-sp .xg-evlevel{font-size:34px}
.xg-sp .xg-evicon img{width:72px}
.xg-count,.xg-credits{font-style:italic;color:Gray;margin-top:10px}
.xg-sp .xg-count,.xg-sp .xg-credits{font-size:24px}