/* ZiloHub Home Intelligence visual/accessibility refinements · 23 Oct 2026
 * Additive, theme-aware and scoped. No runtime, service, API or user-data changes.
 * Keep weather provider caveats/observed times visible in BOTH themes.
 */
.intelligence-layout,
.intelligence-layout .intel-panel,
.intelligence-layout .weather-sensor-group,
.intelligence-layout .ecowitt-metric {min-width:0}
.intelligence-layout .intel-panel-heading {align-items:flex-start;gap:12px}
.intelligence-layout .intel-panel-heading>div {min-width:0}
.intelligence-layout .intel-panel-heading h2,
.intelligence-layout .intel-panel-heading h3 {line-height:1.4;overflow-wrap:anywhere}
.intelligence-layout .intel-panel-heading p {font-size:13px;line-height:1.65}
.intelligence-layout .intel-source,
.intelligence-layout .ecowitt-history-foot,
.intelligence-layout .ecowitt-history-head p,
.intelligence-layout .weather-chart-guide,
.intelligence-layout .intel-note {font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.intelligence-layout .intel-source {flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:6px 12px}
.intelligence-layout .intel-source a,
.intelligence-layout .lightning-map-links a {text-underline-offset:3px}
.intelligence-layout .intel-source a:focus-visible,
.intelligence-layout .ecowitt-series-picker button:focus-visible,
.intelligence-layout .ambient-map-links a:focus-visible,
.intelligence-layout .lightning-map-controls button:focus-visible,
.intelligence-layout .lightning-map-links a:focus-visible {
  outline:3px solid #0d9c81;outline-offset:3px;
}
.intelligence-layout .ecowitt-panel .weather-sensor-group,
.intelligence-layout .ambient-panel .weather-sensor-group {
  border-top:1px solid currentColor;
  padding-top:14px;
}
.intelligence-layout .ecowitt-panel .weather-sensor-group:first-child,
.intelligence-layout .ambient-panel .weather-sensor-group:first-child {border-top:0;padding-top:0}
.intelligence-layout .weather-sensor-group h3 {font-size:15px;line-height:1.5;margin-bottom:11px}
.intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metrics {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric {
  min-height:96px;padding:13px 14px;align-content:start;align-items:start;row-gap:5px;
}
.intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>span {
  font-size:13px;line-height:1.5;flex:1 1 125px;min-width:0;
}
.intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>strong {
  display:block;width:100%;font-size:clamp(14px,1.05vw,17px);
  font-weight:800;line-height:1.6;letter-spacing:0;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.intelligence-layout .ecowitt-status {font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.intelligence-layout .ambient-lightning {margin-top:24px}
.intelligence-layout .ambient-lightning .ecowitt-metric {min-height:92px}
.intelligence-layout .ambient-lightning-maps p,
.intelligence-layout .ambient-lightning-maps small,
.intelligence-layout .ambient-safety {font-size:13px;line-height:1.7}
.intelligence-layout .ecowitt-history-head {align-items:flex-start}
.intelligence-layout .ecowitt-series-picker {gap:8px;margin-bottom:10px}
.intelligence-layout .ecowitt-series-picker button {
  min-height:44px;padding:9px 12px;font-size:13px;line-height:1.4;font-weight:750;
}
.intelligence-layout .ecowitt-chart {min-height:245px;overflow:hidden}
.intelligence-layout .ecowitt-chart .recharts-cartesian-axis-tick-value,
.intelligence-layout .wind-chart .recharts-cartesian-axis-tick-value,
.intelligence-layout .pressure-chart .recharts-cartesian-axis-tick-value {
  font-size:12px;font-weight:650;
}
.intelligence-layout .weather-motion-note,
.intelligence-layout .wind-gauge-note,
.intelligence-layout .pressure-footnote {font-size:13px;line-height:1.7}
.intelligence-layout .wind-extra-values span,
.intelligence-layout .pressure-outlook-grid span,
.intelligence-layout .pressure-outlook-grid small {font-size:13px;line-height:1.6}
.intelligence-layout .wind-gust-current>small,
.intelligence-layout .pressure-context {font-size:13px;line-height:1.6}
.intelligence-layout .lightning-map-status,
.intelligence-layout .lightning-map-disclaimer,
.intelligence-layout .lightning-map-key,
.intelligence-layout .lightning-map-credit {font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.intelligence-layout .lightning-map-key {gap:10px}
.intelligence-layout .lightning-map-key>span {flex-shrink:0}
.intelligence-layout .lightning-map-controls button {
  min-height:44px;font-size:13px;line-height:1.4;
}
.intelligence-layout .lightning-native-map {min-height:250px}
.intelligence-layout .lightning-native-map text {paint-order:stroke}
.intelligence-layout .lightning-flash-list,
.intelligence-layout .lightning-flash-list li {font-size:13px;line-height:1.65}
.intelligence-layout .intel-forecast span,
.intelligence-layout .intel-forecast p,
.intelligence-layout .intel-resources p {font-size:13px;line-height:1.6}
.intelligence-layout .intel-forecast strong {font-variant-numeric:tabular-nums;line-height:1.4}
.intelligence-layout .intel-resources strong {font-size:14px;line-height:1.5}
.intelligence-layout .intel-resources a {min-height:44px;display:inline-flex;align-items:center;gap:5px}
.intelligence-layout .intel-storm-grid>div {font-size:14px;line-height:1.65}
.intelligence-layout :is(.intel-forecast,.intel-resources,.intel-storm-grid)>* {min-width:0}

/* Paired foreground/surface rules avoid washed-out text in light mode. */
html[data-theme="light"] .intelligence-layout .intel-panel-heading p,
html[data-theme="light"] .intelligence-layout .intel-source,
html[data-theme="light"] .intelligence-layout .ecowitt-history-foot,
html[data-theme="light"] .intelligence-layout .ecowitt-history-head p,
html[data-theme="light"] .intelligence-layout .weather-chart-guide {color:#395567}
html[data-theme="light"] .intelligence-layout .weather-sensor-group {border-top-color:#cbdde5}
html[data-theme="light"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric {
  color:#203a4c;background:#f3f8fa;border-color:#c7dce5;
}
html[data-theme="light"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>span {color:#355467}
html[data-theme="light"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>strong {color:#132f43}
html[data-theme="light"] .intelligence-layout .ecowitt-chart .recharts-cartesian-axis-tick-value,
html[data-theme="light"] .intelligence-layout .wind-chart .recharts-cartesian-axis-tick-value {fill:#375669}
html[data-theme="light"] .intelligence-layout .intel-forecast>div,
html[data-theme="light"] .intelligence-layout .intel-resources article {
  background:#f3f8fa;border-color:#cddfe7;
}
html[data-theme="light"] .intelligence-layout .intel-forecast span,
html[data-theme="light"] .intelligence-layout .intel-forecast p,
html[data-theme="light"] .intelligence-layout .intel-resources p {color:#395668}
html[data-theme="light"] .intelligence-layout .lightning-map-key,
html[data-theme="light"] .intelligence-layout .lightning-map-credit {color:#37586a}

/* Dark mode keeps warm information/status cards explicit; never pale-on-pale. */
html[data-theme="dark"] .intelligence-layout .intel-panel-heading p,
html[data-theme="dark"] .intelligence-layout .intel-source,
html[data-theme="dark"] .intelligence-layout .ecowitt-history-foot,
html[data-theme="dark"] .intelligence-layout .ecowitt-history-head p,
html[data-theme="dark"] .intelligence-layout .weather-chart-guide {color:#cadde8}
html[data-theme="dark"] .intelligence-layout .weather-sensor-group {border-top-color:#456276}
html[data-theme="dark"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric {
  color:#e9f5f9;background:#203a4e;border-color:#48677c;
}
html[data-theme="dark"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>span {color:#c8dfeb}
html[data-theme="dark"] .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>strong {color:#f1fbff}
html[data-theme="dark"] .intelligence-layout .ecowitt-chart .recharts-cartesian-axis-tick-value,
html[data-theme="dark"] .intelligence-layout .wind-chart .recharts-cartesian-axis-tick-value {fill:#d3e7ef}
html[data-theme="dark"] .intelligence-layout .intel-forecast>div,
html[data-theme="dark"] .intelligence-layout .intel-resources article {
  background:#20394e;border-color:#46647a;
}
html[data-theme="dark"] .intelligence-layout .intel-forecast span,
html[data-theme="dark"] .intelligence-layout .intel-forecast p,
html[data-theme="dark"] .intelligence-layout .intel-resources p {color:#c8deea}
html[data-theme="dark"] .intelligence-layout .intel-forecast strong,
html[data-theme="dark"] .intelligence-layout .intel-resources strong {color:#f2faff}
html[data-theme="dark"] .intelligence-layout .lightning-map-key,
html[data-theme="dark"] .intelligence-layout .lightning-map-credit {color:#d0e5ef}
/* The pressure graph itself has a dark instrument surface under BOTH themes. */
.intelligence-layout .pressure-chart .recharts-cartesian-axis-tick-value {fill:#d7e9ee}

@media(max-width:1100px){
 .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .intelligence-layout {gap:15px}
 .intelligence-layout .intel-panel {padding:17px 15px;border-radius:12px}
 .intelligence-layout .intel-panel-heading {gap:9px;margin-bottom:15px}
 .intelligence-layout .intel-icon {min-width:38px;height:38px}
 .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metrics {grid-template-columns:minmax(0,1fr);gap:8px}
 .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric {min-height:78px;padding:11px 12px}
 .intelligence-layout :is(.ecowitt-panel,.ambient-panel) .ecowitt-metric>strong {font-size:15px}
 .intelligence-layout .intel-forecast,
 .intelligence-layout .intel-resources,
 .intelligence-layout .intel-storm-grid {grid-template-columns:minmax(0,1fr)}
 .intelligence-layout .ecowitt-history-head button {min-height:44px}
 .intelligence-layout .ecowitt-series-picker button {min-height:44px;flex:1 1 auto}
 .intelligence-layout .ambient-lightning {padding:12px}
 .intelligence-layout .lightning-native-map {aspect-ratio:1.2;min-height:245px}
 .intelligence-layout .lightning-map-key {align-items:flex-start}
 .intelligence-layout .pressure-top {gap:14px}
 .intelligence-layout .wind-compass {min-height:280px}
 .intelligence-layout .weather-motion-top {gap:10px}
}
@media(max-width:360px){
 .intelligence-layout .intel-panel {padding:14px 11px}
 .intelligence-layout .ecowitt-series-picker button {flex:1 1 100%}
 .intelligence-layout .lightning-native-map {min-height:220px}
}
@media(prefers-reduced-motion:reduce){
 .intelligence-layout .ecowitt-series-picker button,
 .intelligence-layout .lightning-map-controls button {transition:none;scroll-behavior:auto}
}