/* Render implementation: common geometry, separate accessible day/night palettes. */
:root {
  --series-0: #087f89;
  --series-1: #bf621e;
  --series-2: #7450cb;
  --series-3: #b63b70;
  --link: #176799;
  --glass: rgba(250, 253, 255, .82);
  --line: rgba(51, 101, 132, .21);
}
body[data-theme="night"] {
  --series-0: #27d4e7;
  --series-1: #ffa253;
  --series-2: #b68aff;
  --series-3: #f78eba;
  --link: #96d6ff;
  --ink: #edf4ff;
  --muted: #b6cae2;
  --glass: rgba(14, 35, 62, .91);
  --line: rgba(146, 185, 232, .29);
  --control-bg: #142d4b;
  --sky-background: radial-gradient(ellipse at 65% 15%, #153659, #091b33 70%);
}
.sensor-color-0 { --sensor-color: var(--series-0); --accent: var(--series-0); }
.sensor-color-1 { --sensor-color: var(--series-1); --accent: var(--series-1); }
.sensor-color-2 { --sensor-color: var(--series-2); --accent: var(--series-2); }
.sensor-color-3 { --sensor-color: var(--series-3); --accent: var(--series-3); }
.sky-scene { position: absolute; inset: 0 0 auto; height: min(100vh, 950px); background-size: cover; background-position: center 34%; mask-image: linear-gradient(#000 45%, transparent); transition: opacity 2.5s; }
.sky-scene-day { background-image: url('/assets/sky-day.webp'); }
.sky-scene-night { background-image: url('/assets/sky-night.webp'); opacity: 0; }
body[data-theme="night"] .sky-scene-night { opacity: 1; }
body[data-theme="night"] .sky-scene-day { opacity: 0; }
body[data-theme="dawn"] .sky-scene-day, body[data-theme="sunset"] .sky-scene-day { opacity: .46; mix-blend-mode: luminosity; }
.shell { width: min(1240px, calc(100% - 64px)); padding-top: 30px; }
.hero { padding: 12px 24px 0; margin-bottom: 28px; }
.eyebrow { margin-bottom: 46px; font-size: 10px; }
.site-nav { right: 24px; gap: 28px; }
.site-nav button { padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.site-nav button:hover { border-bottom-color: currentColor; }
.site-nav a:first-child { border-bottom-color: var(--link); }
.pwa-install-button { bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }
body.has-android-widget .pwa-install-button { bottom: calc(env(safe-area-inset-bottom) + 82px); }
/* The exit control moved into the header: keep it reachable in tableau mode. */
body.dashboard-mode .site-nav { display: flex; }
body.dashboard-mode .site-nav > :not(#dashboardMode) { display: none; }
h1 { max-width: 970px; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.1; font-weight: 720; letter-spacing: -.04em; text-wrap: balance; }
.hero-meta { margin-top: 22px; }
.weather-summary, .sensor-card, .chart-card { border-radius: 15px; background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 60%), var(--glass); box-shadow: 0 8px 24px #2447650b, inset 0 1px 0 #ffffff38; }
body[data-theme="night"] .weather-summary, body[data-theme="night"] .sensor-card, body[data-theme="night"] .chart-card { background: linear-gradient(120deg, #638ac217, transparent 65%), var(--glass); box-shadow: 0 12px 30px #000c1d30, inset 0 1px 0 #b5d4ff0d; }
.weather-summary { padding: 22px 26px; margin-bottom: 16px; }
.summary-label { color: var(--ink); }
.summary-reading strong { font-size: 50px; }
.summary-comparison { padding-left: 24px; }
.comparison-icon { color: var(--link); background: radial-gradient(circle at 35% 25%, #70bcff38, #3179b812); border: 1px solid #76b9f347; box-shadow: inset 0 0 12px #74b3fa16; }
.sensor-grid { gap: 16px; }
.sensor-card { min-height: 174px; padding: 19px 22px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 18px; }
.sensor-place { font-weight: 600; }
.place-icon svg { width: 25px; height: 30px; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 25%, transparent)); }
.status { font-size: 9px; margin-left: 33px; color: var(--muted); text-align: left; }
.status.offline { color: #b44f40; }
body[data-theme="night"] .status.offline { color: #ffad9e; }
.temperature { font-weight: 650; font-size: clamp(34px, 3.4vw, 49px); margin-top: 9px; letter-spacing: -.04em; }
.temperature sup { font-size: 12px; }
.sensor-details { gap: 10px; padding-left: 19px; }
.detail strong { font-weight: 600; }
.sun-exposure { color: var(--muted); font-size: 11px; }
.sun-exposure .exposure-icon { width: 20px; height: 20px; background: transparent; }
.chart-card { padding: 23px 25px 14px; margin-top: 16px; }
.chart-head h2 { font-size: 28px; font-weight: 650; }
.periods { border-radius: 11px; }
.periods button { border-radius: 8px; padding: 9px 18px; }
.periods button.active { background: linear-gradient(135deg, #1675c4, #0b559d); box-shadow: 0 0 0 1px #71b8fa80, 0 2px 9px #198afa30; font-weight: 600; }
button.legend-item { border-radius: 9px; padding: 8px 11px; }
body[data-theme="night"] .legend-check { color: #092039; }
.chart-line { stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { opacity: .11; }
.grid-line { stroke: var(--line); }
.axis-label { fill: var(--muted); }
.chart-note, .event-hint { font-size: 11px; line-height: 1.5; }
.history-summary { margin: 6px 0; font-size: 13px; color: var(--ink); }
.history-details { color: var(--muted); font-size: 11px; margin: 9px 0; }
.history-details summary { cursor: pointer; width: fit-content; padding: 4px 0; }
.history-details[open] .daily-stats { margin-top: 10px; }
.text-button { color: var(--link); }
footer { margin-top: 15px; padding-inline: 8px; }
.footer-actions { padding-top: 0; }
.footer-actions .text-button { color: var(--muted); }
.moon { width: 94px; height: 94px; background: radial-gradient(ellipse at 32% 24%, #8694a566 0 7%, transparent 12%), radial-gradient(ellipse at 60% 60%, #8798af80 0 12%, transparent 24%), radial-gradient(ellipse at 29% 63%, #7a8da569 0 11%, transparent 22%), radial-gradient(ellipse at 65% 28%, #8b9db06b 0 9%, transparent 18%), radial-gradient(circle at 42% 37%, #fffdf2, #d5deeb 60%, #94a6bb); box-shadow: 0 0 2px 1px #ffffff9c, 0 0 26px #e0eeff4d, 0 0 90px #86b4ff38; }
.moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: .24; background: url('/assets/moon-texture.svg') center / cover; mix-blend-mode: multiply; }
.celestial { left: calc(72vw + (var(--celestial-x) - 5vw) * .23); top: clamp(100px, var(--celestial-y), 280px); transition: top 60s linear; }
/* Breathing keyframes set opacity, so stop the sun animation during the night. */
body[data-theme="night"] .sun { animation: none; opacity: 0; }
body[data-theme="night"] .exposure-night { color: #bed9fa; }
body[data-theme="night"] .pwa-install-button, body[data-theme="night"] .android-widget-button { background: #183654; color: #edf4ff; border-color: var(--line); }
body[data-theme="night"] .cloud { opacity: .14; }
.cloud-two { top: 30%; }
body[data-theme="night"] .stars { opacity: .36; }
body[data-theme="night"] .notification-panel, body[data-theme="night"] .feature-dialog { background: #142c48; }
body[data-theme="night"] .trend-up { color: #ffae70; }
body[data-theme="night"] .trend-down { color: #78c8ff; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
@media (min-width: 1500px) { .shell { padding-top: 40px; } .hero { margin-bottom: 32px; } }
@media (min-width: 721px) and (max-width: 1050px) {
  .site-nav { position: static; justify-content: flex-end; gap: 18px; margin-bottom: 22px; }
  .shell { width: calc(100% - 40px); }
  .sensor-card { padding: 17px 12px; gap: 0 10px; }
  .sensor-details { padding-left: 10px; }
  .temperature, .status, .sun-exposure-slot { margin-left: 0; }
  .sensor-place { font-size: 12px; }
  .detail strong { font-size: 12px; }
}
@media (max-width: 720px) {
  .pwa-install-button { bottom: calc(env(safe-area-inset-bottom) + 12px); }
  body.has-android-widget .pwa-install-button { bottom: calc(env(safe-area-inset-bottom) + 76px); }
  .sky-scene-day { background-image: url('/assets/sky-day-mobile.webp'); }
  .sky-scene-night { background-image: url('/assets/sky-night-mobile.webp'); }
  .sky-scene { height: 540px; background-position: 62% top; mask-image: linear-gradient(#000, #000 50%, transparent); }
  .shell { width: calc(100% - 24px); padding-top: 18px; }
  .hero { padding: 0 8px; margin-bottom: 19px; }
  .site-nav { font-size: 11px; gap: 17px; margin-bottom: 17px; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 4px; }
  .site-nav a, .site-nav button { min-height: 36px; display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
  .site-nav::-webkit-scrollbar { height: 3px; }
  .site-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .eyebrow { font-size: 8px; margin-bottom: 23px; }
  h1 { font-size: clamp(27px, 7.5vw, 43px); line-height: 1.08; max-width: 94%; text-wrap: initial; }
  .hero-meta { font-size: 11px; margin-top: 15px; }
  .weather-summary { padding: 17px; gap: 13px; margin-bottom: 10px; }
  .summary-reading { gap: 14px; }
  .summary-reading strong { font-size: 43px; }
  .summary-reading span { font-size: 11px; max-width: 155px; }
  .summary-label { font-size: 10px; }
  .summary-comparison { padding: 12px 0 0; gap: 12px; }
  .sensor-grid { gap: 9px; }
  .sensor-card { min-height: 139px; padding: 14px 16px; gap: 0 15px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-radius: 12px; }
  .sensor-place { font-size: 13px; }
  .temperature { font-size: 38px; margin: 6px 0 3px 32px; }
  .sun-exposure-slot { margin-left: 30px; }
  .sun-exposure { font-size: 10px; }
  .status { font-size: 8px; margin-left: 32px; }
  .sensor-details { padding-left: 15px; gap: 9px; }
  .detail { display: block; }
  .detail span { display: block; font-size: 10px; margin-bottom: 2px; }
  .detail strong { font-size: 12px; }
  .chart-card { padding: 16px 13px 12px; border-radius: 12px; margin-top: 12px; }
  .chart-head { flex-direction: row; align-items: center; gap: 8px; }
  .chart-head h2 { font-size: 19px; }
  .periods { width: auto; flex: 0 0 auto; padding: 2px; }
  .periods button { padding: 7px 8px; font-size: 10px; white-space: nowrap; }
  .legend { gap: 5px; margin-top: 13px; }
  button.legend-item { flex: 1; justify-content: center; font-size: 10px; padding: 7px 4px; gap: 5px; }
  .history-summary { font-size: 11px; line-height: 1.5; }
  .chart-note, .event-hint, .history-details { font-size: 10px; }
  .chart-scroll { margin-inline: -13px; width: calc(100% + 26px); padding-inline: 13px; }
  .chart-canvas { width: 620px; }
  .chart-wrap { height: 260px; }
  .celestial { left: clamp(82vw, var(--celestial-x), 94vw); top: clamp(95px, var(--celestial-y), 230px); }
  .celestial .moon { width: 58px; height: 58px; }
  .moon i { transform: scale(.6); }
  .celestial .sun { width: 130px; height: 130px; }
  .cloud { opacity: .32; }
  footer { font-size: 9px; }
  .footer-actions { gap: 22px; }
}
@media (max-width: 359px) {
  .chart-head { flex-direction: column; align-items: flex-start; }
  .periods { width: 100%; }
  .sensor-card { padding-inline: 12px; column-gap: 10px; }
  .temperature { margin-left: 0; font-size: 37px; }
  .status, .sun-exposure-slot { margin-left: 0; }
  .sensor-details { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cloud-one, .cloud-two { animation: none !important; left: 65%; } }