/* pws-watch: shared persisted light/dark theme layer. */

.theme-toggle {
  position: relative;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf5f7;
  --muted: #9aadba;
  --line: rgba(176, 196, 206, 0.22);
  --panel: rgba(13, 24, 32, 0.86);
  --surface: #07151d;
  --blue: #7aa7ff;
  --green: #5bd19c;
  --amber: #f0b85a;
  --red: #ff7b72;
  --violet: #b79cff;
  --cyan: #5dc6dc;
  --shadow: 0 22px 52px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] body {
  background:
    linear-gradient(115deg, rgba(40, 190, 146, 0.13), transparent 28%),
    linear-gradient(245deg, rgba(92, 143, 255, 0.13), transparent 34%),
    linear-gradient(90deg, rgba(176, 196, 206, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(176, 196, 206, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #061119 0%, #0a1a22 48%, #14151d 100%);
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  color: var(--ink);
}

html[data-theme="dark"] .brand-mark {
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] :is(.icon-button, .assistant-icon-button, .map-button, .theme-toggle, .setting-help) {
  border-color: rgba(176, 196, 206, 0.24);
  background: rgba(15, 29, 39, 0.9);
  color: var(--ink);
}

html[data-theme="dark"] :is(.primary-button, .send-button, header .controls button) {
  border-color: rgba(93, 198, 220, 0.34);
  background: linear-gradient(135deg, #0b2531, #0f6471);
  color: #ffffff;
}

html[data-theme="dark"] :is(input, select) {
  border-color: rgba(176, 196, 206, 0.24);
  background: rgba(7, 16, 23, 0.86);
  color: var(--ink);
}

html[data-theme="dark"] :is(input, select)::placeholder {
  color: rgba(154, 173, 186, 0.7);
}

html[data-theme="dark"] :is(.settings, header, .panel) {
  border-color: var(--line);
  background: var(--panel);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .settings {
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .subhead,
html[data-theme="dark"] .subtle,
html[data-theme="dark"] label,
html[data-theme="dark"] .tracking-setting,
html[data-theme="dark"] .email-setting,
html[data-theme="dark"] th,
html[data-theme="dark"] .billing-message,
html[data-theme="dark"] .billing-links,
html[data-theme="dark"] .billing-footnotes,
html[data-theme="dark"] .status,
html[data-theme="dark"] .chart-meta,
html[data-theme="dark"] .map-meta,
html[data-theme="dark"] .metric-name,
html[data-theme="dark"] .station-meta,
html[data-theme="dark"] .fact span:first-child,
html[data-theme="dark"] .page-footer {
  color: var(--muted);
}

html[data-theme="dark"] #currentPanel {
  background:
    linear-gradient(120deg, rgba(0, 147, 168, 0.16), transparent 42%),
    repeating-linear-gradient(135deg, rgba(176, 196, 206, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(12, 24, 33, 0.9);
}

html[data-theme="dark"] .chart-panel {
  background:
    linear-gradient(180deg, rgba(18, 34, 45, 0.95), rgba(9, 21, 30, 0.88)),
    rgba(13, 24, 32, 0.86);
}

html[data-theme="dark"] .history-panel {
  background:
    linear-gradient(180deg, rgba(18, 34, 45, 0.92), rgba(9, 21, 30, 0.84)),
    rgba(13, 24, 32, 0.86);
}

html[data-theme="dark"] canvas {
  border-color: rgba(176, 196, 206, 0.18);
  background:
    linear-gradient(90deg, rgba(176, 196, 206, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(176, 196, 206, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 22, 31, 0.96), rgba(5, 14, 20, 0.9));
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .metric {
  border-color: rgba(176, 196, 206, 0.16);
  background:
    linear-gradient(145deg, rgba(18, 34, 45, 0.86), rgba(8, 18, 25, 0.68)),
    rgba(12, 24, 33, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .metric-group {
  border-color: rgba(176, 196, 206, 0.18);
  background:
    linear-gradient(145deg, rgba(18, 34, 45, 0.9), rgba(8, 18, 25, 0.72)),
    rgba(12, 24, 33, 0.78);
}

html[data-theme="dark"] .metric-row {
  border-color: rgba(176, 196, 206, 0.16);
}

html[data-theme="dark"] .mini-title,
html[data-theme="dark"] .user-stations .mini-title {
  color: var(--ink);
}

html[data-theme="dark"] .user-stations .map-meta {
  color: #b8c8d2;
}

html[data-theme="dark"] .station-tabs {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.62);
}

html[data-theme="dark"] .station-tabs button.active {
  background: rgba(93, 198, 220, 0.16);
}

html[data-theme="dark"] .current-station-card {
  border-color: rgba(93, 198, 220, 0.34);
  background:
    linear-gradient(90deg, rgba(93, 198, 220, 0.16), rgba(69, 129, 255, 0.12)),
    rgba(7, 16, 23, 0.9);
}

html[data-theme="dark"] .user-station-row {
  border-color: rgba(93, 198, 220, 0.34);
  background: rgba(7, 16, 23, 0.9);
  color: var(--ink);
}

html[data-theme="dark"] .user-station-row.current {
  border-color: rgba(93, 198, 220, 0.56);
}

html[data-theme="dark"] .station-row-actions button,
html[data-theme="dark"] .station-row-viewing {
  border-color: rgba(176, 196, 206, 0.22);
  background: rgba(12, 24, 33, 0.9);
  color: #b8c8d2;
}

html[data-theme="dark"] .user-station-claim {
  background: rgba(93, 198, 220, 0.18);
  color: #78e5f5;
}

html[data-theme="dark"] .user-station-current {
  background: rgba(69, 129, 255, 0.22);
  color: #9db9ff;
}

html[data-theme="dark"] .calibration-copy {
  color: var(--ink);
}

html[data-theme="dark"] .calibration-deltas span {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.72);
}

html[data-theme="dark"] .calibration-deltas strong {
  color: #78e5f5;
}

html[data-theme="dark"] .calibration-deltas small {
  color: #b8c8d2;
}

html[data-theme="dark"] .weather-brief {
  border-color: rgba(93, 198, 220, 0.22);
  background:
    linear-gradient(90deg, rgba(40, 190, 146, 0.13), rgba(92, 143, 255, 0.1)),
    rgba(8, 18, 25, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .brief-kicker {
  background: rgba(237, 245, 247, 0.9);
  color: #07151d;
}

html[data-theme="dark"] .weather-warning-pill {
  background: color-mix(in srgb, var(--warning-color, var(--amber)), #07151d 78%);
}

html[data-theme="dark"] .weather-visual {
  border-color: rgba(176, 196, 206, 0.2);
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(150deg, rgba(24, 42, 56, 0.96), rgba(9, 21, 30, 0.8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .weather-cloud {
  background: linear-gradient(180deg, #d9e6ee, #8ba1b0);
}

html[data-theme="dark"] .weather-visual--clear {
  background:
    radial-gradient(circle at 28% 26%, rgba(255, 232, 137, 0.38), transparent 46%),
    linear-gradient(145deg, #183249, #07151d);
}

html[data-theme="dark"] .weather-visual--clear-night,
html[data-theme="dark"] .weather-visual--partly-cloudy-night {
  background:
    radial-gradient(circle at 28% 26%, rgba(199, 212, 226, 0.28), transparent 46%),
    linear-gradient(145deg, #142234, #07151d);
}

html[data-theme="dark"] .atmo-dial {
  border-color: rgba(176, 196, 206, 0.18);
  background:
    linear-gradient(135deg, rgba(23, 43, 56, 0.94), rgba(8, 18, 25, 0.78)),
    rgba(12, 24, 33, 0.82);
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, 0.06),
    inset 0 0 32px rgba(93, 198, 220, 0.12),
    0 18px 32px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .weather-renderer-tabs {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.62);
}

html[data-theme="dark"] .weather-renderer-tabs button {
  color: var(--muted);
}

html[data-theme="dark"] .weather-renderer-tabs button.active {
  color: var(--ink);
  background: rgba(93, 198, 220, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(93, 198, 220, 0.24),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .dial-center,
html[data-theme="dark"] .dial-axis,
html[data-theme="dark"] .dial-legend {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.78);
  color: var(--ink);
}

html[data-theme="dark"] .glance-wind-dial,
html[data-theme="dark"] .glance-gauge {
  border-color: color-mix(in srgb, currentColor, rgba(176, 196, 206, 0.2) 72%);
  background:
    radial-gradient(circle at 50% 58%, rgba(176, 196, 206, 0.08), transparent 54%),
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, currentColor, transparent 90%), rgba(8, 18, 25, 0.76)),
    rgba(7, 16, 23, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -12px 24px rgba(0, 0, 0, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .glance-wind-dial {
  color: var(--ink);
}

html[data-theme="dark"] .glance-wind-center {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.78);
  color: var(--ink);
}

html[data-theme="dark"] .glance-wind-track {
  background:
    repeating-conic-gradient(from -1deg, rgba(176, 196, 206, 0.28) 0 2deg, transparent 2deg 15deg),
    conic-gradient(from 180deg, rgba(229, 231, 235, 0.16), rgba(229, 231, 235, 0.025), rgba(229, 231, 235, 0.16));
}

html[data-theme="dark"] .glance-gauge::after {
  border-color: rgba(176, 196, 206, 0.12);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.08), transparent 38%),
    rgba(7, 16, 23, 0.46);
}

html[data-theme="dark"] .glance-gauge::before {
  -webkit-mask: radial-gradient(circle, transparent 69%, #000 70%);
  mask: radial-gradient(circle, transparent 69%, #000 70%);
}

html[data-theme="dark"] .analysis-tabs {
  border-color: rgba(176, 196, 206, 0.18);
  background: rgba(7, 16, 23, 0.62);
}

html[data-theme="dark"] .analysis-tabs button.active {
  background: rgba(176, 196, 206, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(176, 196, 206, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .dial-legend .wnd {
  color: var(--ink);
}

html[data-theme="dark"] .dial-warning {
  border-color: color-mix(in srgb, var(--warning-color), transparent 34%);
  background: color-mix(in srgb, var(--warning-color), #071017 78%);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .wind-needle {
  background: linear-gradient(180deg, #f7fcff 0 54%, rgba(247, 252, 255, 0.18) 54% 100%);
  box-shadow:
    0 0 0 1px rgba(5, 20, 29, 0.58),
    0 0 18px rgba(124, 229, 255, 0.32);
}

html[data-theme="dark"] .wind-needle::before {
  background: #f7fcff;
  box-shadow:
    0 0 0 1px rgba(5, 20, 29, 0.62),
    0 0 14px rgba(124, 229, 255, 0.38);
}

html[data-theme="dark"] :is(.history-kpi, .history-strip, .history-table) {
  border-color: rgba(176, 196, 206, 0.16);
  background:
    linear-gradient(145deg, rgba(18, 34, 45, 0.82), rgba(8, 18, 25, 0.68)),
    rgba(12, 24, 33, 0.74);
}

html[data-theme="dark"] .history-strip-chart {
  background:
    linear-gradient(90deg, rgba(176, 196, 206, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(176, 196, 206, 0.05) 1px, transparent 1px);
  background-size: 18px 100%, 100% 18px;
}

html[data-theme="dark"] .history-table thead th {
  background: rgba(7, 16, 23, 0.72);
}

html[data-theme="dark"] .segments {
  border-color: rgba(176, 196, 206, 0.2);
  background: rgba(7, 16, 23, 0.76);
}

html[data-theme="dark"] .segments button.active {
  background: rgba(237, 245, 247, 0.12);
  color: var(--ink);
}

html[data-theme="dark"] .map-button {
  background: rgba(7, 16, 23, 0.72);
}

html[data-theme="dark"] .map-button.active {
  border-color: rgba(93, 198, 220, 0.34);
  background: rgba(93, 198, 220, 0.12);
  color: var(--cyan);
}

html[data-theme="dark"] .station-map,
html[data-theme="dark"] .leaflet-container {
  background:
    linear-gradient(90deg, rgba(176, 196, 206, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(176, 196, 206, 0.035) 1px, transparent 1px),
    #0a1a22;
}

html[data-theme="dark"] .range-ring-label {
  border-color: rgba(93, 198, 220, 0.32);
  background: rgba(7, 21, 29, 0.92);
  color: var(--cyan);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] table :is(th, td),
html[data-theme="dark"] .billing-line,
html[data-theme="dark"] .billing-footnotes,
html[data-theme="dark"] .fact,
html[data-theme="dark"] .page-footer {
  border-color: var(--line);
}

html[data-theme="dark"] .pill {
  background: rgba(93, 198, 220, 0.13);
  color: var(--cyan);
}

html[data-theme="dark"] .pill.error {
  background: rgba(255, 123, 114, 0.12);
  color: var(--red);
}

html[data-theme="dark"] .pill.warning {
  background: rgba(240, 184, 90, 0.13);
  color: var(--amber);
}

html[data-theme="dark"] body.surface-app {
  background:
    linear-gradient(180deg, rgba(5, 14, 21, 0.62), rgba(7, 21, 29, 0.96)),
    var(--surface);
}

html[data-theme="dark"] body.surface-app header,
html[data-theme="dark"] body.surface-app .settings {
  border-color: rgba(176, 196, 206, 0.16);
  background: rgba(8, 18, 25, 0.84);
}

html[data-theme="dark"] body.surface-app .ios-tabbar {
  border-color: rgba(176, 216, 226, 0.22);
  background: rgba(17, 33, 43, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] body.surface-app .ios-tabbar button {
  color: rgba(226, 239, 244, 0.72);
}

html[data-theme="dark"] body.surface-app .ios-tabbar button.active {
  background: linear-gradient(180deg, rgba(237, 245, 247, 0.24), rgba(237, 245, 247, 0.14));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(237, 245, 247, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] body.surface-app .metric {
  border-color: rgba(176, 196, 206, 0.16);
  background: rgba(8, 18, 25, 0.64);
}

html[data-theme="dark"] ai-conversation-panel {
  --ai-panel-ink: var(--ink);
  --ai-panel-muted: var(--muted);
  --ai-panel-line: rgba(176, 196, 206, 0.22);
  --ai-panel-accent: var(--cyan);
  --ai-panel-surface: rgba(12, 24, 33, 0.94);
  --ai-panel-surface-muted: rgba(7, 16, 23, 0.82);
  --ai-panel-message: rgba(18, 34, 45, 0.88);
  --ai-panel-code: rgba(237, 245, 247, 0.08);
  --ai-panel-gradient: linear-gradient(135deg, #0b2531, #0f6471);
  --ai-panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}