/* XTX Netatmo - Frontend Styles */

/* ============================================================
   CSS Custom Properties — unified theme (configured via Admin > Appearance)
   Inline styles from NAWS_Colors::get_inline_css() override these defaults.
   ============================================================ */
.naws-wrap {
  /* Basis-Theme defaults (Live-Dashboard palette) */
  --naws-bg:           #ffffff;
  --naws-surface:      #ffffff;
  --naws-surface-2:    #f8fafc;
  --naws-text:         #427272;
  --naws-text-dark:    #2d5252;
  --naws-text-darkest: #1a3535;
  --naws-text-muted:   #7aa0a0;
  --naws-text-light:   #a0b8b8;
  --naws-text-subtle:  #a0b8b8;
  --naws-border:       #e0eeee;
  --naws-shadow-color: rgba(40,72,72,0.08);
  --naws-glow:         rgba(0,212,255,0.08);

  /* Akzent-Farben */
  --naws-primary:    #00d4ff;
  --naws-accent:     #7c3aed;
  --naws-success:    #10b981;
  --naws-warning:    #f59e0b;
  --naws-danger:     #ef4444;

  /* Non-color properties */
  /* The theme's font, by default: every other part of the plugin already
     inherits it, and a dashboard in a different typeface than the page it
     sits on looks like a foreign object. Still a variable, so overriding it
     stays a one-liner:  .naws-wrap { --naws-font: Georgia, serif; }  */
  --naws-font:       inherit;
  --naws-radius:     16px;
  --naws-radius-sm:  10px;
  --naws-shadow:     0 2px 10px var(--naws-shadow-color);
  --naws-transition: 0.3s cubic-bezier(0.4,0,0.2,1);

  /* Sensor gradient defaults */
  --naws-temp-g1: #f59e0b;      --naws-temp-g2: #ef4444;
  --naws-humidity-g1: #3b82f6;   --naws-humidity-g2: #7c3aed;
  --naws-pressure-g1: #06b6d4;   --naws-pressure-g2: #3b82f6;
  --naws-co2-g1: #10b981;        --naws-co2-g2: #06b6d4;
  --naws-noise-g1: #8b5cf6;      --naws-noise-g2: #ec4899;
  --naws-wind-g1: #14b8a6;       --naws-wind-g2: #22d3ee;
  --naws-rain-g1: #0ea5e9;       --naws-rain-g2: #6366f1;
  --naws-health-g1: #10b981;     --naws-health-g2: #84cc16;

  /* Chart-Theming */
  --naws-chart-grid: rgba(218,240,240,0.4);
  --naws-chart-tick: #7aa0a0;
  --naws-chart-tooltip-bg: rgba(45,82,82,0.92);
  --naws-chart-tooltip-title: #a0c8c8;
  --naws-chart-tooltip-text: #ffffff;
  --naws-chart-axis-title: #a0b8b8;
}

/* ============================================================
   Base Wrapper
   ============================================================ */
.naws-wrap {
  font-family: var(--naws-font);
  background:  var(--naws-bg);
  color:        var(--naws-text);
  border-radius: var(--naws-radius);
  overflow: hidden;
  padding: 1rem;
  position: relative;
}
@media (min-width: 600px) {
  .naws-wrap { padding: 1.5rem; }
}

/* ============================================================
   Header
   ============================================================ */
.naws-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (min-width: 600px) {
  .naws-header { flex-direction: row; align-items: center; }
}

.naws-header-title {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--naws-primary), var(--naws-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.naws-last-updated {
  font-size: 0.75rem;
  color: var(--naws-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.naws-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--naws-success);
  animation: naws-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes naws-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

/* ============================================================
   Grid Layout
   ============================================================ */
.naws-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 480px) {
  .naws-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .naws-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.naws-grid-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .naws-grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.naws-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .naws-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .naws-grid-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ============================================================
   Metric Cards
   ============================================================ */
.naws-card {
  background: var(--naws-surface);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--naws-transition), box-shadow var(--naws-transition);
  cursor: default;
}

.naws-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--naws-gradient, linear-gradient(90deg, var(--naws-primary), var(--naws-accent)));
  opacity: 0;
  transition: opacity var(--naws-transition);
}

.naws-card:hover { transform: translateY(-3px); box-shadow: var(--naws-shadow); }
.naws-card:hover::before { opacity: 1; }

/* Card color variants */
.naws-card.naws-temp      { --naws-gradient: linear-gradient(90deg, var(--naws-temp-g1), var(--naws-temp-g2)); }
.naws-card.naws-co2       { --naws-gradient: linear-gradient(90deg, var(--naws-co2-g1), var(--naws-co2-g2)); }
.naws-card.naws-humidity  { --naws-gradient: linear-gradient(90deg, var(--naws-humidity-g1), var(--naws-humidity-g2)); }
.naws-card.naws-noise     { --naws-gradient: linear-gradient(90deg, var(--naws-noise-g1), var(--naws-noise-g2)); }
.naws-card.naws-pressure  { --naws-gradient: linear-gradient(90deg, var(--naws-pressure-g1), var(--naws-pressure-g2)); }
.naws-card.naws-rain      { --naws-gradient: linear-gradient(90deg, var(--naws-rain-g1), var(--naws-rain-g2)); }
.naws-card.naws-wind      { --naws-gradient: linear-gradient(90deg, var(--naws-wind-g1), var(--naws-wind-g2)); }
.naws-card.naws-health    { --naws-gradient: linear-gradient(90deg, var(--naws-health-g1), var(--naws-health-g2)); }

.naws-card-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  display: block;
}

.naws-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--naws-text-muted);
  margin-bottom: 0.25rem;
}

.naws-card-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--naws-text);
  margin-bottom: 0.25rem;
}
@media (min-width: 600px) {
  .naws-card-value { font-size: 2.25rem; }
}

.naws-card-unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--naws-text-subtle);
  margin-left: 0.2rem;
}

.naws-card-meta {
  font-size: 0.7rem;
  color: var(--naws-text-muted);
  margin-top: 0.5rem;
}

/* Animated number counter */
.naws-count-up {
  display: inline-block;
  transition: all 0.3s ease;
}

/* ============================================================
   Module Section Headers
   ============================================================ */
.naws-module-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--naws-border);
}

.naws-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--naws-surface-2);
  border: 1px solid var(--naws-border);
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--naws-primary);
}

.naws-module-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--naws-text);
  margin: 0;
}

/* Battery indicator */
.naws-battery {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--naws-text-muted);
  margin-left: auto;
}

.naws-battery-bar {
  width: 24px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  position: relative;
  display: inline-block;
}

.naws-battery-bar::after {
  content: '';
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 5px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

.naws-battery-fill {
  height: 100%;
  border-radius: 1px;
  background: var(--naws-success);
  transition: width 0.5s ease;
}

/* ============================================================
   Chart Container
   ============================================================ */
.naws-chart-wrap {
  background: var(--naws-surface);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius);
  padding: 1rem;
  position: relative;
}
@media (min-width: 600px) {
  .naws-chart-wrap { padding: 1.5rem; }
}

.naws-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.naws-chart-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--naws-text);
  margin: 0;
}

.naws-range-picker {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.naws-range-btn {
  padding: 0.5rem 0.875rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--naws-border);
  background: var(--naws-surface-2);
  color: var(--naws-text-muted);
  cursor: pointer;
  transition: all var(--naws-transition);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.naws-range-btn:hover,
.naws-range-btn.active {
  background: var(--naws-primary);
  border-color: var(--naws-primary);
  color: #000;
}

.naws-chart-canvas-wrap {
  position: relative;
}

.naws-chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--naws-surface);
  border-radius: var(--naws-radius-sm);
  z-index: 10;
}

.naws-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--naws-border);
  border-top-color: var(--naws-primary);
  border-radius: 50%;
  animation: naws-spin 0.8s linear infinite;
}

@keyframes naws-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Gauge Container
   ============================================================ */
.naws-gauge-wrap {
  background: var(--naws-surface);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius);
  padding: 1.5rem;
  text-align: center;
}

.naws-gauge-canvas { max-width: 100%; }

.naws-gauge-value-display {
  font-size: 2rem;
  font-weight: 800;
  color: var(--naws-text);
  margin-top: -1rem;
}

.naws-gauge-label {
  font-size: 0.8rem;
  color: var(--naws-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* ============================================================
   Table
   ============================================================ */
.naws-table-wrap {
  background: var(--naws-surface);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.naws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.naws-table th {
  background: var(--naws-surface-2);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--naws-text-muted);
  border-bottom: 1px solid var(--naws-border);
}

.naws-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--naws-border);
  color: var(--naws-text);
}

.naws-table tr:last-child td { border-bottom: none; }

.naws-table tr:hover td {
  background: var(--naws-surface-2);
}

/* ============================================================
   CO2 Color Indicator
   ============================================================ */
.naws-co2-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
}

.naws-co2-excellent { background: rgba(16,185,129,0.15); color: #10b981; }
.naws-co2-good      { background: rgba(132,204,22,0.15);  color: #84cc16; }
.naws-co2-fair      { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.naws-co2-poor      { background: rgba(249,115,22,0.15);  color: #f97316; }
.naws-co2-unhealthy { background: rgba(239,68,68,0.15);   color: #ef4444; }

/* ============================================================
   Wind Compass
   ============================================================ */
.naws-compass {
  width: clamp(60px, 15vw, 80px); height: clamp(60px, 15vw, 80px);
  border-radius: 50%;
  border: 2px solid var(--naws-border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
}

.naws-compass-needle {
  width: 4px; height: clamp(26px, 7vw, 36px);
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(var(--naws-wind-angle, 0deg));
  transition: transform 1s cubic-bezier(0.4,0,0.2,1);
}

.naws-compass-needle::before { content: ''; display: block; width: 100%; height: 50%; background: var(--naws-compass-needle, #ef4444); border-radius: 2px 2px 0 0; }
.naws-compass-needle::after  { content: ''; display: block; width: 100%; height: 50%; background: var(--naws-text-muted); border-radius: 0 0 2px 2px; }

/* ============================================================
   Hero Strip
   ============================================================ */
.naws-hero-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .naws-hero-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
}

.naws-hero-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--naws-radius);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--naws-border);
  transition: transform var(--naws-transition), box-shadow var(--naws-transition);
}
@media (min-width: 600px) {
  .naws-hero-card { padding: 1.25rem 1.5rem; gap: 1rem; }
}

.naws-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  transition: opacity var(--naws-transition);
}

.naws-hero-card:hover { transform: translateY(-2px); box-shadow: var(--naws-shadow); }
.naws-hero-card:hover::after { opacity: 0.12; }

/* Gradient fills per card type */
.naws-hero-temp     { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(239,68,68,0.12)); border-color: rgba(245,158,11,0.25); }
.naws-hero-humidity { background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(124,58,237,0.12)); border-color: rgba(59,130,246,0.25); }
.naws-hero-pressure { background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(59,130,246,0.12)); border-color: rgba(6,182,212,0.25); }
.naws-hero-rain     { background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(99,102,241,0.12)); border-color: rgba(14,165,233,0.25); }

.naws-hero-temp::after     { background: linear-gradient(135deg, var(--naws-temp-g1), var(--naws-temp-g2)); }
.naws-hero-humidity::after { background: linear-gradient(135deg, var(--naws-humidity-g1), var(--naws-humidity-g2)); }
.naws-hero-pressure::after { background: linear-gradient(135deg, var(--naws-pressure-g1), var(--naws-pressure-g2)); }
.naws-hero-rain::after     { background: linear-gradient(135deg, var(--naws-rain-g1), var(--naws-rain-g2)); }

.naws-hero-icon {
  font-size: 2.25rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.naws-hero-body { min-width: 0; }

.naws-hero-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--naws-text-muted);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.naws-hero-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: var(--naws-text);
  white-space: nowrap;
}
@media (min-width: 600px) {
  .naws-hero-value { font-size: 2.4rem; }
}

.naws-hero-unit {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--naws-text-subtle);
  margin-left: 0.15rem;
}

/* ============================================================
   Accordion
   ============================================================ */
.naws-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.naws-accordion-item {
  background: var(--naws-surface);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius);
  overflow: hidden;
  transition: border-color var(--naws-transition), box-shadow var(--naws-transition);
}

.naws-accordion-item.is-open {
  border-color: rgba(0,212,255,0.3);
  box-shadow: 0 0 0 1px rgba(0,212,255,0.1), 0 4px 24px rgba(0,0,0,0.2);
}

.naws-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--naws-text);
  text-align: left;
  transition: background var(--naws-transition);
}

.naws-accordion-header:hover {
  background: var(--naws-surface-2);
}

.naws-accordion-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.naws-accordion-name {
  font-size: 0.95rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naws-accordion-badge {
  display: none;
  align-items: center;
  background: var(--naws-surface-2);
  border: 1px solid var(--naws-border);
  border-radius: 100px;
  padding: 0.2rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--naws-primary);
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .naws-accordion-badge { display: inline-flex; }
}

.naws-accordion-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.naws-accordion-peek {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--naws-text);
}
.naws-accordion-peek small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--naws-text-muted);
}

/* Battery mini */
.naws-battery-mini-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.naws-battery-mini {
  width: 26px;
  height: 11px;
  border: 1.5px solid var(--naws-text-muted);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.naws-battery-mini::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 5px;
  background: var(--naws-text-muted);
  border-radius: 0 1px 1px 0;
}
.naws-battery-mini-fill {
  height: 100%;
  border-radius: 1px;
  transition: width 0.4s ease;
}
.naws-battery-mini-label {
  font-size: 0.65rem;
  color: var(--naws-text-muted);
}

/* Arrow */
.naws-accordion-arrow {
  flex-shrink: 0;
  color: var(--naws-text-muted);
  transition: transform var(--naws-transition);
  display: flex;
  align-items: center;
}
.naws-accordion-item.is-open .naws-accordion-arrow {
  transform: rotate(180deg);
  color: var(--naws-primary);
}

/* Body */
.naws-accordion-body {
  display: none;
  padding: 0 1rem 1rem;
}
@media (min-width: 600px) {
  .naws-accordion-body { padding: 0 1.25rem 1.25rem; }
}
.naws-accordion-item.is-open .naws-accordion-body {
  display: block;
  animation: naws-slide-down 0.28s cubic-bezier(0.4,0,0.2,1);
}

@keyframes naws-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Sensor Grid (inside accordion body)
   ============================================================ */
.naws-sensor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .naws-sensor-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.naws-sensor-card {
  background: var(--naws-surface-2);
  border: 1px solid var(--naws-border);
  border-radius: var(--naws-radius-sm);
  padding: 0.9rem 1rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--naws-transition), box-shadow var(--naws-transition);
}

.naws-sensor-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--naws-gradient, linear-gradient(90deg, var(--naws-primary), var(--naws-accent)));
  opacity: 0;
  transition: opacity var(--naws-transition);
}
.naws-sensor-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.naws-sensor-card:hover::before { opacity: 1; }

/* Re-use existing color variants */
.naws-sensor-card.naws-temp      { --naws-gradient: linear-gradient(90deg, var(--naws-temp-g1), var(--naws-temp-g2)); }
.naws-sensor-card.naws-co2       { --naws-gradient: linear-gradient(90deg, var(--naws-co2-g1), var(--naws-co2-g2)); }
.naws-sensor-card.naws-humidity  { --naws-gradient: linear-gradient(90deg, var(--naws-humidity-g1), var(--naws-humidity-g2)); }
.naws-sensor-card.naws-noise     { --naws-gradient: linear-gradient(90deg, var(--naws-noise-g1), var(--naws-noise-g2)); }
.naws-sensor-card.naws-pressure  { --naws-gradient: linear-gradient(90deg, var(--naws-pressure-g1), var(--naws-pressure-g2)); }
.naws-sensor-card.naws-rain      { --naws-gradient: linear-gradient(90deg, var(--naws-rain-g1), var(--naws-rain-g2)); }
.naws-sensor-card.naws-wind      { --naws-gradient: linear-gradient(90deg, var(--naws-wind-g1), var(--naws-wind-g2)); }
.naws-sensor-card.naws-health    { --naws-gradient: linear-gradient(90deg, var(--naws-health-g1), var(--naws-health-g2)); }

.naws-sensor-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.naws-sensor-icon  { font-size: 1.1rem; }
.naws-sensor-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--naws-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.naws-sensor-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--naws-text);
  margin-bottom: 0.4rem;
}
.naws-sensor-unit {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--naws-text-subtle);
  margin-left: 0.1rem;
}

.naws-sensor-age {
  font-size: 0.65rem;
  color: var(--naws-text-muted);
  margin-top: 0.35rem;
}
.naws-sensor-dir {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--naws-text-subtle);
  text-align: center;
}

.naws-module-chart {
  margin-top: 0;
  border-color: var(--naws-border);
}

/* Compass (smaller variant) */
.naws-compass-sm {
  width: clamp(48px, 12vw, 60px); height: clamp(48px, 12vw, 60px);
  margin: 0.3rem auto 0;
}

/* ============================================================
   Dashboard Tabs (kept for backwards compat / other templates)
   ============================================================ */
.naws-dashboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--naws-border);
  padding-bottom: 0;
  flex-wrap: wrap;
}

.naws-tab-btn {
  padding: 0.6rem 1.25rem;
  border: none;
  background: none;
  color: var(--naws-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--naws-transition);
}

.naws-tab-btn:hover { color: var(--naws-primary); }
.naws-tab-btn.active { color: var(--naws-primary); border-bottom-color: var(--naws-primary); }

.naws-tab-content { display: none; }
.naws-tab-content.active { display: block; }

/* ============================================================
   Animations
   ============================================================ */
@keyframes naws-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.naws-card { animation: naws-fade-in 0.5s ease both; }

.naws-card:nth-child(1)  { animation-delay: 0.05s; }
.naws-card:nth-child(2)  { animation-delay: 0.10s; }
.naws-card:nth-child(3)  { animation-delay: 0.15s; }
.naws-card:nth-child(4)  { animation-delay: 0.20s; }
.naws-card:nth-child(5)  { animation-delay: 0.25s; }
.naws-card:nth-child(6)  { animation-delay: 0.30s; }
.naws-card:nth-child(7)  { animation-delay: 0.35s; }
.naws-card:nth-child(8)  { animation-delay: 0.40s; }
.naws-card:nth-child(9)  { animation-delay: 0.45s; }
.naws-card:nth-child(10) { animation-delay: 0.50s; }
.naws-card:nth-child(11) { animation-delay: 0.55s; }
.naws-card:nth-child(12) { animation-delay: 0.60s; }

/* Reduce motion if requested */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── No-data message ──────────────────────────────────────── */
.naws-no-data-msg {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--naws-text-muted, #64748b);
    font-size: 0.9rem;
    width: 100%;
}

/* ── History chart ────────────────────────────────────────── */
.naws-history-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.naws-history-meta {
    font-size: 0.75rem;
    color: var(--naws-text-muted, #64748b);
    text-align: right;
    padding: 0 0.25rem;
}
.naws-hist-range-btn {
    background: transparent;
    border: 1px solid var(--naws-border, rgba(255,255,255,0.1));
    color: var(--naws-text-muted, #64748b);
    padding: 0.25rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.naws-hist-range-btn:hover,
.naws-hist-range-btn.active {
    background: var(--naws-primary, #00d4ff);
    border-color: var(--naws-primary, #00d4ff);
    color: #0a0e1a;
}

/* ============================================================
   Infobar
   ============================================================ */
.naws-infobar {
  font-family: var(--naws-font, inherit);
  margin: 0;
}

.naws-infobar-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.naws-infobar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-right: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  min-width: 0;
}

.naws-infobar-item:last-child {
  border-bottom: none;
}

/* Remove right border on every 4th item */
.naws-infobar-item:nth-child(4n) {
  border-right: none;
}

.naws-ib-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.naws-ib-icon svg {
  width: 18px;
  height: 18px;
  stroke: #2d8f7b;
  opacity: 0.85;
}

.naws-ib-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.naws-ib-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.naws-ib-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.naws-ib-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Astro group: amber icon */
.naws-ib-astro .naws-ib-icon svg {
  stroke: #d97706;
}

@media (min-width: 480px) {
  .naws-infobar-grid { grid-template-columns: repeat(2, 1fr); }
  .naws-infobar-item { border-right: 1px solid rgba(0,0,0,0.08); }
  .naws-infobar-item:nth-child(2n) { border-right: none; }
}
@media (min-width: 768px) {
  .naws-infobar-grid { grid-template-columns: repeat(4, 1fr); }
  .naws-infobar-item:nth-child(2n) { border-right: 1px solid rgba(0,0,0,0.08); }
  .naws-infobar-item:nth-child(4n) { border-right: none; }
}

/* ============================================================
   Live Dashboard (extracted from live.php)
   ============================================================ */
.naws-wx {
  --ink:#427272; --ink2:#2d5252; --ink3:#1a3535;
  --muted:#7aa0a0; --light:#a0b8b8;
  --line:#e0eeee; --bg:#ffffff; --card:#ffffff; --sh:rgba(40,72,72,.08);
  font-family:var(--naws-font,inherit); color:var(--ink);
}
.naws-wx .naws-hdr { background:var(--naws-header-bg,var(--ink2)); border-radius:16px 16px 0 0; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
@media (min-width: 600px) { .naws-wx .naws-hdr { padding:15px 24px; } }
.naws-wx .naws-hdr-name { font-size:16px; font-weight:800; font-style:italic; color:var(--naws-header-text,#fff); }
@media (min-width: 600px) { .naws-wx .naws-hdr-name { font-size:18px; } }
.naws-wx .naws-hdr-meta { display:flex; align-items:center; gap:9px; color:color-mix(in srgb,var(--naws-header-text,#fff) 75%,transparent); font-size:12.5px; font-weight:600; }
.naws-wx .naws-pulse { width:8px; height:8px; border-radius:50%; background:#7ee8cc; flex-shrink:0; animation:npulse 2.5s ease-in-out infinite; }
@keyframes npulse{0%,100%{box-shadow:0 0 0 0 rgba(126,232,204,.5)}50%{box-shadow:0 0 0 6px rgba(126,232,204,0)}}
.naws-wx .naws-body { background:var(--bg); border:1.5px solid var(--line); border-top:none; border-radius:0 0 16px 16px; padding:12px; }
@media (min-width: 600px) { .naws-wx .naws-body { padding:16px; } }
.naws-wx .naws-loading { display:flex; justify-content:center; padding:60px 20px; }
.naws-wx .naws-spin { width:32px; height:32px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--ink); animation:nspin .75s linear infinite; }
@keyframes nspin{to{transform:rotate(360deg)}}
.naws-wx .naws-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
@media (min-width: 768px) { .naws-wx .naws-grid { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:13px; } }
.naws-wx .naws-card {
  background:var(--card); border:1.5px solid var(--line); border-radius:14px;
  padding:18px 12px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:flex-start;
  box-shadow:0 2px 10px rgba(40,72,72,.10); transition:transform .2s ease;
  position:relative; overflow:hidden;
}
@media (min-width: 600px) { .naws-wx .naws-card { padding:22px 14px 16px; } }
.naws-wx .naws-card:hover{transform:translateY(-4px);box-shadow:0 2px 10px rgba(40,72,72,.10);}
.naws-wx .naws-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3.5px;background:var(--ca,var(--ink));border-radius:14px 14px 0 0;}
.naws-wx .naws-press-trend{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted);}
.naws-wx .naws-press-trend svg{flex-shrink:0;}
.naws-wx .naws-trend-up{color:#3d9e74;}
.naws-wx .naws-trend-down{color:#c0392b;}
.naws-wx .naws-trend-stable{color:#7aa0a0;}
/* Per-sensor accent colors (now using configurable icon color vars) */
.naws-wx .c-temp{--ca:var(--naws-ico-temp,#50a882)}
.naws-wx .c-humid{--ca:var(--naws-ico-humid,#3d82bf)}
.naws-wx .c-press{--ca:var(--naws-ico-press,#785fc8)}
.naws-wx .c-wind{--ca:var(--naws-ico-wind,var(--ink))}
.naws-wx .c-rain{--ca:var(--naws-ico-rain,#3585b0)}
.naws-wx .c-co2{--ca:var(--naws-ico-co2,#4a9848)}
.naws-wx .c-noise{--ca:var(--naws-ico-noise,#b88030)}
.naws-wx .naws-ico { width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ca,var(--ink)) 13%,white);display:flex;align-items:center;justify-content:center;margin-bottom:9px;flex-shrink:0; }
@media (min-width: 600px) { .naws-wx .naws-ico { width:46px;height:46px;margin-bottom:11px; } }
.naws-wx .naws-ico svg{width:23px;height:23px;stroke:var(--ca,var(--ink));fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ── Icon set: filled — use fill instead of stroke ── */
.naws-wx[data-icon-set="filled"] .naws-ico svg{fill:var(--ca,var(--ink));stroke:none;color:var(--ca,var(--ink));}
.naws-wx[data-icon-set="filled"] .naws-ico svg [fill="currentColor"]{fill:var(--ca,var(--ink));}
.naws-wx[data-icon-set="filled"] .naws-ico svg [stroke="currentColor"]{stroke:var(--ca,var(--ink));}

/* ── Icon set: minimal — thinner strokes ── */
.naws-wx[data-icon-set="minimal"] .naws-ico svg{stroke-width:1.5;}

/* ── Icon set: emoji — display emoji text, hide SVG styling ── */
.naws-wx[data-icon-set="emoji"] .naws-ico{font-size:22px;line-height:1;}
.naws-wx[data-icon-set="emoji"] .naws-ico svg{stroke:var(--ca,var(--ink));fill:none;}
.naws-wx .naws-lbl-badge{display:block;font-size:8px;font-weight:600;letter-spacing:.08em;color:var(--accent);opacity:.8;text-transform:uppercase;line-height:1;}
.naws-wx .naws-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;line-height:1.3;min-height:2.6em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
.naws-wx .naws-val{font-size:36px;font-weight:800;font-style:italic;color:var(--ink2);line-height:1;letter-spacing:-.03em;margin-bottom:1px;transition:color .35s;}
@media (min-width: 600px) { .naws-wx .naws-val { font-size:44px; } }
.naws-wx .naws-val.naws-flash{animation:nflash .5s ease}
@keyframes nflash{0%{color:var(--muted)}100%{color:var(--ink2)}}
.naws-wx .naws-unit{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:6px;}
.naws-wx .naws-time{font-size:9px;font-style:italic;color:var(--light);margin-top:auto;padding-top:7px;}
.naws-wx .naws-subs{width:100%;margin-top:11px;padding-top:9px;border-top:1px solid var(--line);display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
@media (min-width: 600px) { .naws-wx .naws-subs { gap:18px; } }
.naws-wx .naws-sub{display:flex;flex-direction:column;align-items:center;gap:1px;}
.naws-wx .naws-sub-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.naws-wx .naws-sub-val{font-size:14px;font-weight:800;font-style:italic;color:var(--ink);}
.naws-wx .naws-sub-u{font-size:9.5px;font-weight:400;color:var(--muted);}
.naws-wx .naws-sub-time{font-size:8.5px;font-style:italic;color:var(--light);}
.naws-wx .naws-gauge-svg{display:block;width:100%;max-width:200px;overflow:visible;}
.naws-wx .naws-wvrow{display:flex;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);width:100%;max-width:200px;}
.naws-wx .naws-wvblk{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 8px;}
.naws-wx .naws-wvblk+.naws-wvblk{border-left:1px solid var(--line)}
.naws-wx .naws-wv-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:3px;}
.naws-wx .naws-wv-num{font-size:26px;font-weight:800;font-style:italic;line-height:1;letter-spacing:-.02em;}
@media (min-width: 600px) { .naws-wx .naws-wv-num { font-size:30px; } }
.naws-wx .naws-wv-unit{font-size:11px;font-weight:400;color:var(--muted);}
.naws-wx .naws-rose-wrap{position:relative;width:clamp(120px, 35vw, 160px);height:clamp(120px, 35vw, 160px);}
.naws-wx .naws-rose-dir{font-size:12.5px;font-weight:700;font-style:italic;color:var(--ink);text-align:center;margin-top:8px;letter-spacing:.04em;}
.naws-wx .naws-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--line);}
@media (min-width: 600px) { .naws-wx .naws-section-title { margin:20px 0 12px;padding-top:16px; } }

/* Charts grid */
.naws-wx .naws-charts-grid{display:grid;grid-template-columns:1fr;gap:13px;}
@media (min-width: 600px) { .naws-wx .naws-charts-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} }
@media (min-width: 1024px) { .naws-wx .naws-charts-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));} }

.naws-wx .naws-chart-card{
  background:#ffffff;border:1.5px solid var(--line);border-radius:14px;
  padding:12px 12px 10px;
  cursor:pointer;transition:transform .2s ease;
}
@media (min-width: 600px) { .naws-wx .naws-chart-card { padding:14px 14px 12px; } }
.naws-wx .naws-chart-card canvas{ background:#ffffff; border-radius:6px; }
.naws-wx .naws-chart-card:hover{transform:translateY(-4px);}
.naws-wx .naws-chart-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.naws-wx .naws-chart-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.naws-wx .naws-chart-expand{
  background:none;border:1px solid var(--line);border-radius:6px;
  padding:8px 10px;cursor:pointer;color:var(--muted);min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
@media (min-width: 768px) { .naws-wx .naws-chart-expand { padding:4px 6px;min-height:auto;min-width:auto; } }
.naws-wx .naws-chart-expand:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.naws-wx .naws-error{text-align:center;padding:50px 20px;color:var(--muted);font-style:italic;font-size:14px;}

/* Live Modal */
.naws-wx .naws-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;}
.naws-wx .naws-modal-backdrop{position:absolute;inset:0;background:rgba(10,26,26,.65);backdrop-filter:blur(3px);cursor:pointer;}
.naws-wx .naws-modal-box{
  position:relative;z-index:1;
  background:#fff;border-radius:12px;
  width:min(98vw,860px);max-height:90vh;
  box-shadow:0 24px 80px rgba(10,26,26,.3);
  display:flex;flex-direction:column;
  animation:nmodal-in .22s ease;
}
@media (min-width: 768px) { .naws-wx .naws-modal-box { border-radius:18px;width:min(92vw,860px); } }
@keyframes nmodal-in{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.naws-wx .naws-modal-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 10px;border-bottom:1px solid var(--line,#e0eeee);
}
@media (min-width: 600px) { .naws-wx .naws-modal-hdr { padding:16px 20px 12px; } }
.naws-wx .naws-modal-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#7aa0a0;}
@media (min-width: 600px) { .naws-wx .naws-modal-title { font-size:12px; } }
.naws-wx .naws-modal-close{
  background:none;border:1px solid #e0eeee;border-radius:8px;
  padding:8px 10px;cursor:pointer;color:#7aa0a0;min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
  margin-left:auto;
}
@media (min-width: 768px) { .naws-wx .naws-modal-close { padding:5px 8px;min-height:auto;min-width:auto; } }
.naws-wx .naws-modal-close:hover{background:#2d5252;color:#fff;border-color:#2d5252;}
.naws-wx .naws-modal-body{padding:12px 14px 14px;flex:1;overflow:hidden;min-height:0;}
@media (min-width: 600px) { .naws-wx .naws-modal-body { padding:16px 20px 20px; } }
.naws-wx .naws-modal-body canvas{width:100%!important;max-height:50vh;}
@media (min-width: 768px) { .naws-wx .naws-modal-body canvas { max-height:none; } }

/* Live Forecast section */
.naws-wx .naws-fc-header{background:var(--naws-header-bg,#2d5252);border-radius:16px 16px 0 0;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
@media (min-width: 600px) { .naws-wx .naws-fc-header { padding:12px 20px; } }
.naws-wx .naws-fc-header-title{font-size:14px;font-weight:800;font-style:italic;color:var(--naws-header-text,#fff);}
@media (min-width: 600px) { .naws-wx .naws-fc-header-title { font-size:15px; } }
.naws-wx .naws-fc-header-meta{display:flex;align-items:center;gap:10px;color:color-mix(in srgb,var(--naws-header-text,#fff) 75%,transparent);font-size:11.5px;font-weight:600;}
.naws-wx .naws-fc-body-wrap{background:var(--bg,#fff);border:1.5px solid var(--line,#e0eeee);border-top:none;border-radius:0 0 16px 16px;padding:12px;}
@media (min-width: 600px) { .naws-wx .naws-fc-body-wrap { padding:14px; } }

/* Live Forecast Grid - mobile first */
.naws-live-forecast-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width: 600px) { .naws-live-forecast-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width: 768px) { .naws-live-forecast-grid{grid-template-columns:repeat(var(--naws-fc-cols,5),1fr);} }

/* Live Forecast Cards */
.naws-wx .naws-fcc{
  background:#ffffff;border:1.5px solid var(--line,#e0eeee);border-radius:14px;
  padding:14px 8px 10px;text-align:center;transition:transform .2s ease;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 2px 10px rgba(40,72,72,.10);position:relative;overflow:hidden;
}
@media (min-width: 600px) { .naws-wx .naws-fcc { padding:16px 10px 12px; } }
.naws-wx .naws-fcc::before{content:'';position:absolute;top:0;left:0;right:0;height:3.5px;background:#427272;border-radius:14px 14px 0 0;}
.naws-wx .naws-fcc:hover{transform:translateY(-4px);}
.naws-wx .naws-fcc-today{border-color:#427272;box-shadow:0 2px 12px rgba(45,82,82,.18);}
.naws-wx .naws-fcc-today::before{height:4px;background:#3d9e74;}
.naws-wx .naws-fcc-day{font-weight:800;font-size:12px;color:#2d5252;}
@media (min-width: 600px) { .naws-wx .naws-fcc-day { font-size:13px; } }
.naws-wx .naws-fcc-today .naws-fcc-day{color:#3d9e74;}
.naws-wx .naws-fcc-date{font-size:9px;color:#7aa0a0;margin-bottom:3px;}
@media (min-width: 600px) { .naws-wx .naws-fcc-date { font-size:10px; } }
.naws-wx .naws-fcc-svg{width:36px;height:36px;margin:2px 0;}
@media (min-width: 600px) { .naws-wx .naws-fcc-svg { width:40px;height:40px; } }
.naws-wx .naws-fcc-svg svg{width:100%;height:100%;}
.naws-wx .naws-fcc-cond{font-size:9px;color:#7aa0a0;font-weight:600;min-height:2.4em;line-height:1.2;display:flex;align-items:center;}
@media (min-width: 600px) { .naws-wx .naws-fcc-cond { font-size:10px; } }
.naws-wx .naws-fcc-temps{margin:3px 0;}
.naws-wx .naws-fcc-tmax{font-size:18px;font-weight:800;font-style:italic;color:#2d5252;}
@media (min-width: 600px) { .naws-wx .naws-fcc-tmax { font-size:20px; } }
.naws-wx .naws-fcc-sep{font-size:12px;color:#7aa0a0;margin:0 2px;}
.naws-wx .naws-fcc-tmin{font-size:13px;font-weight:600;color:#7aa0a0;}
.naws-wx .naws-fcc-tunit{font-size:9px;color:#7aa0a0;}
.naws-wx .naws-fcc-meta{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;font-size:9px;color:#7aa0a0;padding-top:5px;border-top:1px solid var(--line,#e0eeee);width:100%;}
@media (min-width: 600px) { .naws-wx .naws-fcc-meta { font-size:10px;gap:3px 8px; } }
.naws-wx .naws-fcc-gust{font-size:9px;color:#a0b8b8;margin-top:3px;}

/* ============================================================
   Forecast Standalone (extracted from forecast.php)
   ============================================================ */
.naws-fc-wrap { font-family: var(--naws-font, inherit); max-width: 100%; }
.naws-fc-wrap .naws-fc-hdr {
  background: var(--naws-header-bg, #2d5252); border-radius: 16px 16px 0 0;
  padding: 12px 16px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 8px;
}
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-hdr { padding: 14px 22px; } }
.naws-fc-wrap .naws-fc-hdr-title { font-size: 15px; font-weight: 800; font-style: italic; color: var(--naws-header-text, #fff); }
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-hdr-title { font-size: 17px; } }
.naws-fc-wrap .naws-fc-hdr-meta { display: flex; align-items: center; gap: 12px; color: color-mix(in srgb, var(--naws-header-text, #fff) 75%, transparent); font-size: 12px; font-weight: 600; }
.naws-fc-wrap .naws-fc-hdr-loc { white-space: nowrap; }
.naws-fc-wrap .naws-fc-body {
  background: #ffffff; border: 1.5px solid #e0eeee;
  border-top: none; border-radius: 0 0 16px 16px; padding: 12px;
}
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-body { padding: 16px; } }

/* Forecast Grid — mobile first */
.naws-fc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .naws-fc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .naws-fc-grid { grid-template-columns: repeat(var(--naws-fc-days, 5), 1fr); } }

.naws-fc-wrap .naws-fc-card {
  background: #ffffff; border: 1.5px solid #e0eeee; border-radius: 14px;
  padding: 14px 8px 12px; text-align: center; transition: transform .2s ease;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 2px 10px rgba(40,72,72,.10); position: relative; overflow: hidden;
}
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-card { padding: 18px 10px 14px; } }
.naws-fc-wrap .naws-fc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3.5px; background: #427272; border-radius: 14px 14px 0 0;
}
.naws-fc-wrap .naws-fc-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(40,72,72,.15); }
.naws-fc-wrap .naws-fc-card-today { border-color: #427272; box-shadow: 0 2px 12px rgba(45,82,82,.18); }
.naws-fc-wrap .naws-fc-card-today::before { height: 4px; background: #3d9e74; }
.naws-fc-wrap .naws-fc-day { font-weight: 800; font-size: 13px; color: #2d5252; }
.naws-fc-wrap .naws-fc-card-today .naws-fc-day { color: #3d9e74; }
.naws-fc-wrap .naws-fc-date { font-size: 10px; color: #7aa0a0; margin-bottom: 4px; }
.naws-fc-wrap .naws-fc-svg { width: 36px; height: 36px; margin: 2px 0; }
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-svg { width: 44px; height: 44px; } }
.naws-fc-wrap .naws-fc-svg svg { width: 100%; height: 100%; }
.naws-fc-wrap .naws-fc-cond { font-size: 10px; color: #7aa0a0; font-weight: 600; min-height: 2.4em; line-height: 1.2; display: flex; align-items: center; }
.naws-fc-wrap .naws-fc-temps { margin: 4px 0; }
.naws-fc-wrap .naws-fc-tmax { font-size: 20px; font-weight: 800; font-style: italic; color: #2d5252; }
@media (min-width: 600px) { .naws-fc-wrap .naws-fc-tmax { font-size: 22px; } }
.naws-fc-wrap .naws-fc-sep { font-size: 13px; color: #7aa0a0; margin: 0 2px; }
.naws-fc-wrap .naws-fc-tmin { font-size: 14px; font-weight: 600; color: #7aa0a0; }
.naws-fc-wrap .naws-fc-tunit { font-size: 10px; color: #7aa0a0; }
.naws-fc-wrap .naws-fc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; font-size: 10px; color: #7aa0a0; padding-top: 6px; border-top: 1px solid #e0eeee; width: 100%; }
.naws-fc-wrap .naws-fc-gust { font-size: 9px; color: #a0b8b8; margin-top: 3px; }
.naws-fc-wrap .naws-fc-footer { text-align: center; margin-top: 8px; font-size: 10px; color: #a0b8b8; }
.naws-fc-wrap .naws-fc-error { text-align: center; padding: 40px 20px; color: #7aa0a0; font-style: italic; }

/* ============================================================
   History Charts (extracted from history.php)
   ============================================================ */
.naws-hist,
.naws-hist-modal {
  --ink:#427272; --ink2:#2d5252; --ink3:#1a3535;
  --muted:#7aa0a0; --light:#a0b8b8;
  --line:#e0eeee; --bg:#ffffff; --card:#ffffff; --sh:rgba(40,72,72,.08);
  font-family:var(--naws-font,inherit); color:var(--ink);
}
.naws-hist-hdr {
  background:var(--naws-header-bg,var(--ink2)); border-radius:16px 16px 0 0;
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:4px;
}
@media (min-width: 600px) { .naws-hist-hdr { padding:15px 24px; } }
.naws-hist-title { font-size:16px; font-weight:800; font-style:italic; color:var(--naws-header-text,#fff); }
@media (min-width: 600px) { .naws-hist-title { font-size:18px; } }
.naws-hist-range { font-size:12px; font-weight:600; color:color-mix(in srgb,var(--naws-header-text,#fff) 60%,transparent); }
.naws-hist-body {
  background:var(--bg); border:1.5px solid var(--line);
  border-top:none; border-radius:0 0 16px 16px; padding:14px;
}
@media (min-width: 600px) { .naws-hist-body { padding:20px; } }
.naws-hist-loading { display:flex; justify-content:center; padding:60px; }
.naws-hist-all-hidden{
  display:flex;align-items:center;gap:.6rem;justify-content:center;
  padding:48px 20px;color:#6b7280;font-size:.85rem;
}
.naws-hist-spin {
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--ink);
  animation:nhspin .75s linear infinite;
}
@keyframes nhspin{to{transform:rotate(360deg)}}
.naws-hc-wrap {
  background:#ffffff; border:1.5px solid var(--line); border-radius:14px;
  padding:12px 14px 10px; margin-bottom:16px;
  box-shadow:0 2px 10px var(--sh);
  transition:transform .2s ease; cursor:pointer;
}
@media (min-width: 600px) { .naws-hc-wrap { padding:16px 18px 14px; } }
.naws-hc-wrap:hover { transform:translateY(-3px); }
.naws-hc-wrap:last-child { margin-bottom:0; }
/* Header row: title + expand button only. The year legend sits BELOW the
   canvas (see .naws-hc-legend) so it can use the full card width and wrap
   over as many lines as a long station history needs. */
.naws-hc-bar {
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px;
}
@media (min-width: 600px) { .naws-hc-bar { gap:12px; } }
.naws-hc-title {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted);
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere;
}
/* Year toggles below the chart: never wider than the chart, wraps to as many
   rows as needed (stations with 10+ years of history). */
.naws-hc-legend {
  display:flex; gap:4px; flex-wrap:wrap; justify-content:center;
  box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  margin-top:10px;
}
.naws-hc-legend:empty { margin-top:0; }
@media (min-width: 600px) { .naws-hc-legend { gap:6px; margin-top:12px; } }
.naws-hc-expand {
  background:none; border:1px solid var(--line); border-radius:6px;
  padding:8px 10px; cursor:pointer; color:var(--muted); flex-shrink:0;
  min-height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
  margin-left:auto;
}
@media (min-width: 768px) { .naws-hc-expand { padding:4px 7px; min-height:auto; min-width:auto; } }
.naws-hc-expand:hover { background:var(--ink2); color:#fff; border-color:var(--ink2); }
.naws-leg-rain-total {
  display: inline-block; margin-left: 5px;
  font-size: 10px; font-weight: 700; opacity: .75; letter-spacing: .03em;
}
.naws-leg-pill {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 8px 3px 5px; border-radius:14px; cursor:pointer;
  border:1.5px solid transparent; font-size:9px; font-weight:700;
  transition:opacity .2s, border-color .2s; user-select:none;
  line-height:1.1;
}
@media (min-width: 768px) { .naws-leg-pill { padding:3px 10px 3px 7px; font-size:10px; gap:5px; } }
.naws-leg-pill.hidden { opacity:.35; }
.naws-leg-pill-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
@media (min-width: 768px) { .naws-leg-pill-dot { width:10px; height:10px; } }

/* History Modal */
.naws-hist-modal {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
}
.naws-hist-modal-bg {
  position:absolute; inset:0;
  background:rgba(10,26,26,.65); backdrop-filter:blur(3px); cursor:pointer;
}
.naws-hist-modal-box {
  position:relative; z-index:1;
  background:#fff; border-radius:12px;
  width:min(98vw,1920px); max-height:92vh;
  box-shadow:0 24px 80px rgba(10,26,26,.3);
  display:flex; flex-direction:column;
  animation:nhmodal-in .22s ease;
}
@media (min-width: 768px) { .naws-hist-modal-box { border-radius:18px; width:min(96vw,1920px); } }
@keyframes nhmodal-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.naws-hist-modal-hdr {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 16px 10px; border-bottom:1px solid var(--line,#e0eeee);
}
@media (min-width: 600px) { .naws-hist-modal-hdr { padding:16px 22px 12px; gap:12px; } }
.naws-hist-modal-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; color:#7aa0a0;
  flex:1 1 auto; min-width:0; overflow-wrap:anywhere;
}
/* Same rule as the card legend: below the chart, full width, wrapping.
   Capped in height so a 20-year history cannot push the chart off-screen. */
.naws-hist-modal-leg {
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  box-sizing:border-box; width:100%; max-width:100%; min-width:0; flex:0 0 auto;
  padding:0 14px 14px; max-height:26vh; overflow-y:auto;
}
@media (min-width: 600px) { .naws-hist-modal-leg { padding:0 22px 18px; } }
.naws-hist-modal-close {
  background:none; border:1px solid #e0eeee; border-radius:8px;
  padding:8px 10px; cursor:pointer; color:#7aa0a0;
  min-height:44px; min-width:44px;
  display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
  margin-left:auto;
}
@media (min-width: 768px) { .naws-hist-modal-close { padding:5px 8px; min-height:auto; min-width:auto; } }
.naws-hist-modal-close:hover { background:#2d5252; color:#fff; border-color:#2d5252; }
.naws-hist-modal-body { padding:12px 14px 14px; flex:1; overflow:hidden; min-height:0; }
@media (min-width: 600px) { .naws-hist-modal-body { padding:16px 22px 22px; } }
.naws-hist-modal-body canvas { width:100%!important; height:clamp(200px, 50vh, 420px)!important; }

/* ===============================================================
   Weather icon (v1.7.0)
   Twelve animated states, all motion in CSS, no JavaScript.
   Namespaced .naws-wxi — .naws-wx is already the forecast card.
   =============================================================== */

.naws-weather-icon { display:flex; justify-content:center; align-items:center; line-height:0; }
.naws-weather-icon .naws-wxi {
  width:var(--naws-wx-size, 96px);
  height:var(--naws-wx-size, 96px);
  display:block;
  overflow:visible;            /* drops and flakes fall past the viewBox */
}

@keyframes naws-wx-spin    { to { transform:rotate(360deg); } }
@keyframes naws-wx-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.055); } }
@keyframes naws-wx-drift   { 0%,100% { transform:translateX(0); } 50% { transform:translateX(2.6px); } }
@keyframes naws-wx-fall {
  0%   { transform:translateY(-7px); opacity:0; }
  22%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translateY(13px); opacity:0; }
}
@keyframes naws-wx-flutter {
  0%   { transform:translate(0,-4px) rotate(0deg); opacity:0; }
  18%  { opacity:1; }
  50%  { transform:translate(1.6px,5.5px) rotate(55deg); }
  82%  { opacity:1; }
  100% { transform:translate(0,15px) rotate(110deg); opacity:0; }
}
@keyframes naws-wx-bounce {
  0%   { transform:translateY(-6px); opacity:0; }
  30%  { opacity:1; }
  70%  { transform:translateY(11px); opacity:1; }
  85%  { transform:translateY(7px); opacity:.7; }
  100% { transform:translateY(9px); opacity:0; }
}
@keyframes naws-wx-flash {
  0%,58%,100% { opacity:.2; }
  62% { opacity:1; } 68% { opacity:.35; } 73% { opacity:1; } 80% { opacity:.28; }
}
@keyframes naws-wx-slide {
  0%   { transform:translateX(-5px); opacity:.25; }
  50%  { transform:translateX(5px);  opacity:1; }
  100% { transform:translateX(-5px); opacity:.25; }
}
@keyframes naws-wx-gust {
  0%   { transform:translateX(-9px); opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(9px); opacity:0; }
}
@keyframes naws-wx-twinkle {
  0%,100% { opacity:.25; transform:scale(.8); }
  50%     { opacity:1;   transform:scale(1.15); }
}

/* transform-origin is given in viewBox units; --o overrides it for the
   off-centre suns in "fair" and "partly". */
.naws-wxi .rays   { transform-origin:var(--o, 32px 32px); animation:naws-wx-spin 26s linear infinite; }
.naws-wxi .core   { transform-origin:var(--o, 32px 32px); animation:naws-wx-breathe 5s ease-in-out infinite; }
.naws-wxi .cloud  { transform-origin:32px 34px; animation:naws-wx-drift 7s ease-in-out infinite; }
.naws-wxi .drop   { animation:naws-wx-fall 1.25s linear infinite; animation-delay:var(--d, 0s); }
.naws-wxi .drop-f { animation:naws-wx-fall .85s linear infinite;  animation-delay:var(--d, 0s); }
.naws-wxi .pellet { animation:naws-wx-bounce 1.4s cubic-bezier(.4,0,.6,1) infinite; animation-delay:var(--d, 0s); }
.naws-wxi .bolt   { animation:naws-wx-flash 3.4s ease-in-out infinite; }
.naws-wxi .band   { animation:naws-wx-slide 5.5s ease-in-out infinite; animation-delay:var(--d, 0s); }
.naws-wxi .gust   { animation:naws-wx-gust 3.2s ease-in-out infinite; animation-delay:var(--d, 0s); }

/* fill-box makes these rotate/scale about themselves rather than about the
   SVG origin. The flakes are positioned by an OUTER <g transform> and
   animated on this INNER one — an element cannot carry both an SVG
   transform attribute and a CSS transform, CSS silently wins. */
.naws-wxi .flake { transform-box:fill-box; transform-origin:center; animation:naws-wx-flutter 3.15s linear infinite; animation-delay:var(--d, 0s); }
.naws-wxi .star  { transform-box:fill-box; transform-origin:center; animation:naws-wx-twinkle 3.6s ease-in-out infinite; animation-delay:var(--d, 0s); }

/* Same icons, held still. Elements that animate in from opacity 0 have to
   be forced visible, or reduced motion would blank them entirely. */
@media (prefers-reduced-motion: reduce) {
  .naws-wxi * { animation:none !important; }
  .naws-wxi .drop, .naws-wxi .drop-f, .naws-wxi .flake, .naws-wxi .pellet,
  .naws-wxi .bolt, .naws-wxi .band,   .naws-wxi .gust,  .naws-wxi .star { opacity:1; }
}

/* Icons inside a row of them: same drawing, held still. Elements that
   animate in from opacity 0 must be forced visible or they never appear. */
.naws-wxi--still * { animation: none !important; }
.naws-wxi--still .drop, .naws-wxi--still .drop-f, .naws-wxi--still .flake,
.naws-wxi--still .pellet, .naws-wxi--still .bolt, .naws-wxi--still .band,
.naws-wxi--still .gust, .naws-wxi--still .star { opacity: 1; }

/* The inline variant sizes itself; the wrapper rule must not win over it. */
.naws-wxi--still { display: block; }

/* Dashboard placement: above the live grid, centred, breathing room below. */
.naws-live-weather-icon { margin:0 0 18px; }

/* ===============================================================
   Sidebar widget (v1.8.0, fluid since 1.9.0)
   Drawn against a 250 px column and adjustable up to 500 px through
   --naws-wgt-max, which the template sets from the setting or the
   shortcode's width attribute. Namespace .naws-wgt-* — .naws-wx is
   the forecast card and .naws-wxi are the icon SVGs.

   How the scaling works: every rule states its 250 px value first and
   then repeats it as a clamp() in cqw units. Where container queries
   are missing the cqw declaration is invalid and gets dropped, so
   those browsers keep exactly the 1.8.x layout. No @supports needed.

   The cqw factors are derived, not guessed: 25.6cqw is 64 px at 250 px
   wide, and the upper clamp bound is the value wanted at 500 px.
   =============================================================== */

.naws-wgt {
  /* The five colours the widget is made of. The base rule IS the light
     scheme; --dark and --transparent below only move these five values,
     and the theme's own colour settings deliberately stay out of it: a
     sidebar widget has to work on a background the theme never sees. */
  --naws-wgt-bg:     #fff;
  --naws-wgt-border: #e2e8f1;
  --naws-wgt-text:   #121822;
  --naws-wgt-muted:  #5f6b7b;
  --naws-wgt-chip:   #f2f6fc;
  background:var(--naws-wgt-bg); border:1px solid var(--naws-wgt-border); border-radius:12px;
  overflow:hidden; color:var(--naws-wgt-text); font-size:14px; line-height:1.45;
  /* max-width, not width: in a container narrower than the setting the
     widget shrinks with it instead of overflowing the sidebar. */
  width:100%; max-width:var(--naws-wgt-max, 250px);
  container-type:inline-size;
}
.naws-wgt-head { display:flex; align-items:center; gap:10px; padding:12px 12px 10px; }
.naws-wgt-head { gap:clamp(10px, 4cqw, 18px); padding:clamp(12px, 4.8cqw, 20px) clamp(12px, 4.8cqw, 20px) clamp(10px, 4cqw, 16px); }
.naws-wgt-head .naws-wxi { flex:0 0 auto; }

/* The head icon comes from render_head(): animated, and sized by the
   width/height attributes on the svg until this rule overrides them.
   CSS beats presentation attributes, so 64 px is the floor, not a cap. */
.naws-wgt-head .naws-wxi { width:clamp(64px, 25.6cqw, 96px); height:clamp(64px, 25.6cqw, 96px); }

.naws-wgt-temp { font-size:32px; font-weight:640; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.naws-wgt-temp { font-size:clamp(32px, 12.8cqw, 44px); }
.naws-wgt-deg { font-size:18px; font-weight:500; color:var(--naws-wgt-muted); }
.naws-wgt-deg { font-size:clamp(18px, 7.2cqw, 24px); }
.naws-wgt-cond { font-size:12.5px; color:var(--naws-wgt-muted); margin-top:3px; }
.naws-wgt-cond { font-size:clamp(12.5px, 5cqw, 16px); }

.naws-wgt-chips { display:flex; gap:8px; padding:0 12px 12px; }
.naws-wgt-chips { gap:clamp(8px, 3.2cqw, 14px); padding:0 clamp(12px, 4.8cqw, 20px) clamp(12px, 4.8cqw, 20px); }
.naws-wgt-chip { flex:1; background:var(--naws-wgt-chip); border-radius:8px; padding:7px 9px; display:flex; flex-direction:column; gap:2px; }
.naws-wgt-chip { padding:clamp(7px, 2.8cqw, 11px) clamp(9px, 3.6cqw, 14px); }
.naws-wgt-k { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--naws-wgt-muted); }
.naws-wgt-k { font-size:clamp(9.5px, 3.8cqw, 11.5px); }
.naws-wgt-v { font-size:13.5px; font-variant-numeric:tabular-nums; }
.naws-wgt-v { font-size:clamp(13.5px, 5.4cqw, 18px); }
.naws-wgt-sub { color:var(--naws-wgt-muted); font-size:11px; }
.naws-wgt-sub { font-size:clamp(11px, 4.4cqw, 14px); }

/* One column per forecast day, set from the template so 3 and 5 share
   one rule instead of two hard-coded variants. */
.naws-wgt-strip { display:grid; grid-template-columns:repeat(var(--naws-wgt-cols,5), 1fr); border-top:1px solid var(--naws-wgt-border); }
.naws-wgt-day { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px 10px; }
.naws-wgt-day { gap:clamp(3px, 1.2cqw, 6px); padding:clamp(9px, 3.6cqw, 15px) 2px clamp(10px, 4cqw, 16px); }
.naws-wgt-day + .naws-wgt-day { border-left:1px solid var(--naws-wgt-border); }
.naws-wgt-dow { font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--naws-wgt-muted); }
.naws-wgt-dow { font-size:clamp(9.5px, 3.8cqw, 12px); }
.naws-wgt-t { font-size:11.5px; font-variant-numeric:tabular-nums; text-align:center; }
.naws-wgt-t { font-size:clamp(11.5px, 4.6cqw, 15px); }
.naws-wgt-lo { color:var(--naws-wgt-muted); }

/* The day icons grow with the columns but stay still — moving pictures
   next to numbers pull the eye off the numbers. */
.naws-wgt-day .naws-wxi { width:clamp(28px, 11.2cqw, 40px); height:clamp(28px, 11.2cqw, 40px); }

.naws-wgt-foot {
  border-top:1px solid var(--naws-wgt-border); padding:6px 12px 8px;
  font-size:10px; color:var(--naws-wgt-muted); letter-spacing:.04em;
  display:flex; justify-content:space-between; gap:8px;
}
.naws-wgt-foot { padding:clamp(6px, 2.4cqw, 10px) clamp(12px, 4.8cqw, 20px) clamp(8px, 3.2cqw, 13px); font-size:clamp(10px, 4cqw, 12.5px); }

/* The two other schemes (since 1.9.11), chosen under Appearance → Sidebar
   widget or per placement with scheme="…" on the shortcode.

   Dark is the same card in dark colours. Transparent draws no card: the
   text inherits the sidebar's colour, and border, muted text and chips are
   made from that colour with color-mix(), so one rule fits a navy sidebar
   and a cream one alike. Where color-mix() is missing the greys below stay
   in force — a neutral that is visible on light and on dark. */
.naws-wgt--dark {
  --naws-wgt-bg:     #1c2433;
  --naws-wgt-border: #2e3a4e;
  --naws-wgt-text:   #e8edf5;
  --naws-wgt-muted:  #9eabbd;
  --naws-wgt-chip:   #263044;
}
.naws-wgt--transparent {
  --naws-wgt-bg:     transparent;
  --naws-wgt-border: rgba(128,128,128,.35);
  --naws-wgt-muted:  rgba(128,128,128,.95);
  --naws-wgt-chip:   rgba(128,128,128,.12);
  color:inherit;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .naws-wgt--transparent {
    --naws-wgt-border: color-mix(in srgb, currentColor 25%, transparent);
    --naws-wgt-muted:  color-mix(in srgb, currentColor 70%, transparent);
    --naws-wgt-chip:   color-mix(in srgb, currentColor 8%, transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════
   [naws_records] und [naws_on_this_day] — Rekorde aus der Tagesuebersicht
   ══════════════════════════════════════════════════════════════════ */

.naws-rec, .naws-otd {
  background: var(--naws-surface, #fff);
  border: 1px solid var(--naws-border, #e0eeee);
  border-radius: var(--naws-radius, 12px);
  padding: 14px;
  color: var(--naws-text, #427272);
}
.naws-rec-title, .naws-otd-title { margin: 0 0 12px; font-size: 1.1em; color: var(--naws-text-dark, #2d5252); }

.naws-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.naws-rec-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--naws-surface-2, #f8fafc);
  border: 1px solid var(--naws-border, #e0eeee);
  border-radius: var(--naws-radius-sm, 10px);
}
.naws-rec-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--naws-text-muted, #7aa0a0); }
.naws-rec-value { font-size: 22px; font-weight: 640; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--naws-text-darkest, #1a3535); }
.naws-rec-unit  { font-size: 13px; font-weight: 500; color: var(--naws-text-muted, #7aa0a0); }
.naws-rec-when  { font-size: 12px; color: var(--naws-text-muted, #7aa0a0); }
.naws-rec-foot  { margin: 12px 0 0; font-size: 12px; color: var(--naws-text-muted, #7aa0a0); }

.naws-rec-table, .naws-otd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.naws-rec-table th, .naws-otd-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--naws-text-muted, #7aa0a0); padding: 6px 8px; border-bottom: 1px solid var(--naws-border, #e0eeee); }
.naws-rec-table td, .naws-otd-table td { padding: 8px; border-bottom: 1px solid var(--naws-border, #e0eeee); }
.naws-otd-unit { font-weight: 400; text-transform: none; letter-spacing: 0; }
.naws-otd-record { font-weight: 640; color: var(--naws-text-darkest, #1a3535); background: var(--naws-surface-2, #f8fafc); }

/* ══════════════════════════════════════════════════════════════════
   [naws_sunpath] — die Sonne auf ihrem Tagesbogen
   ══════════════════════════════════════════════════════════════════ */

.naws-sun {
  max-width: 480px;
  background: var(--naws-surface, #fff);
  border: 1px solid var(--naws-border, #e0eeee);
  border-radius: var(--naws-radius, 12px);
  padding: 14px;
  color: var(--naws-text, #427272);
}
.naws-sun-title { margin: 0 0 8px; font-size: 1.1em; color: var(--naws-text-dark, #2d5252); }
.naws-sun-svg   { display: block; width: 100%; height: auto; font-size: 13px; }
.naws-sun-horizon { stroke: var(--naws-border, #e0eeee); stroke-width: 2; }
.naws-sun-arc   { fill: none; stroke: var(--naws-border, #e0eeee); stroke-width: 2; stroke-dasharray: 4 6; }
.naws-sun-arc--night { stroke-dasharray: 3 5; opacity: .7; }
.naws-sun-done  { fill: none; stroke: var(--naws-warning, #f59e0b); stroke-width: 3; stroke-linecap: round; }
.naws-sun-disc  { fill: var(--naws-warning, #f59e0b); }
.naws-sun-disc--night { opacity: .45; }
.naws-sun-label { fill: var(--naws-text-muted, #7aa0a0); font-variant-numeric: tabular-nums; }
.naws-sun-text  { margin: 6px 0 0; font-size: 12px; color: var(--naws-text-muted, #7aa0a0); }

/* ══════════════════════════════════════════════════════════════════
   [naws_heatmap] — Kalenderraster des Tagesdurchschnitts
   ══════════════════════════════════════════════════════════════════ */

.naws-hm {
    position: relative;
    background: var(--naws-surface, #fff);
    border: 1px solid var(--naws-border, #e0eeee);
    border-radius: 12px;
    padding: 14px;
    color: var(--naws-text, #427272);
}

.naws-hm-hdr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.naws-hm-title { font-weight: 600; font-size: 15px; }

.naws-hm-years { display: flex; flex-wrap: wrap; gap: 4px; }

/* Die Jahreswahl benutzt dieselben Pillen wie die Jahres-Umschalter der
   Charts (.naws-leg-pill, samt .hidden fuer den abgeschalteten Zustand).
   Hier steht nur, was ein <button> gegenueber dem <span> dort zusaetzlich
   braucht: die Browser-Vorgaben abraeumen, und die des Themes. Hello
   Elementor faerbt jeden [type="button"] bei :hover und :focus mit seiner
   Akzentfarbe (Spezifitaet 0,2,0), und ein angetippter Button behaelt auf
   dem Handy den Fokus, die Pille bliebe also rot. Deshalb unter .naws-hm
   und beide Zustaende ausdruecklich. */
.naws-hm .naws-hm-year,
.naws-hm .naws-hm-year:hover,
.naws-hm .naws-hm-year:focus {
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}


/* Waagerecht scrollen statt schrumpfen: eine Kachel bleibt gross genug,
   um sie mit dem Finger zu treffen. */
.naws-hm-scroll { overflow-x: auto; overflow-y: hidden; }

.naws-hm-grid {
    border-collapse: separate;
    border-spacing: 2px;
    /* Fuellt die verfuegbare Breite, statt klein in einer breiten Spalte zu
       sitzen. table-layout: fixed verteilt die 31 Tagesspalten gleichmaessig;
       min-width schiebt die Karte auf schmalen Bildschirmen ins Scrollen,
       statt die Kacheln unter die Fingergroesse zu druecken. */
    table-layout: fixed;
    width: 100%;
    min-width: 660px;
}

/* Themes rahmen Tabellenzellen gern ein und streifen jede zweite Zeile
   (Hello Elementor: table tbody > tr:nth-child(2n+1) > th, Spezifitaet
   0,1,4). Auf einer Karte, die ihre Bedeutung aus Flaechen zieht, zerlegt
   der Rahmen jede Kachel in ein eigenes Kaestchen, und der Streifen macht
   die klebende Monatsspalte in jeder zweiten Zeile durchscheinend: die
   Kacheln laufen beim Scrollen durch die Monatsnamen. Deshalb stehen die
   Zellregeln unter .naws-hm, zwei Klassen schlagen jede Typkette. */
.naws-hm .naws-hm-grid th,
.naws-hm .naws-hm-grid td { border: 0; }

.naws-hm .naws-hm-grid th {
    font-weight: 500;
    font-size: 11px;
    color: var(--naws-text-muted, #7aa0a0);
    padding: 0;
    background: var(--naws-surface, #fff);
}

.naws-hm-dh { text-align: center; }

/* Die Monatsspalte bleibt beim Scrollen stehen. */
.naws-hm-mh,
.naws-hm-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    padding: 0 12px 0 4px;
    white-space: nowrap;
    /* Feste Breite, nicht 1%: mit table-layout: fixed nimmt der Browser das
       Prozent woertlich und gibt der Spalte rund 13px, worauf die Monatsnamen
       ueber die erste Kachelspalte laufen. */
    width: 92px;
    /* border-spacing laesst rechts neben der Spalte 2px frei, die keiner
       Zelle gehoeren: beim Scrollen laufen die Kacheln dort als Streifen
       durch. Der Schatten ist ein deckender 2px-Rand in der Flaechenfarbe;
       er liegt ueber den Kacheln, weil die Spalte per z-index vor ihnen
       steht. */
    box-shadow: 2px 0 0 var(--naws-surface, #fff);
}

.naws-hm-c,
.naws-hm-x {
    height: 22px;
    padding: 0;
    border-radius: 3px;
    /* Eine <td> waechst mit ihrem Inhalt. Die Kacheln tragen nur den
       absolut positionierten Screenreader-Text, aber ohne diese beiden
       Zeilen streckt allein die geerbte Zeilenhoehe die Reihe auf das
       Doppelte. */
    font-size: 0;
    line-height: 0;
}

.naws-hm-c { cursor: pointer; transition: background-color 250ms ease; }
.naws-hm-c:hover { outline: 2px solid var(--naws-text, #427272); outline-offset: 1px; }

.naws-hm .naws-hm-x { background: none; }

/* The label each cell carries for screen readers. .screen-reader-text is a
   theme convention, not something WordPress provides, so the plugin ships
   its own rule rather than assuming the active theme has one — without it
   every cell would print its full label as visible text. */
.naws-hm .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Aufbau: eine Welle von links nach rechts. Sie haengt am Setzen von
   --naws-hm-d durch heatmap-boot.js — ohne JavaScript traegt keine Zelle
   die Klasse und die Karte steht sofort vollstaendig da. */
.naws-hm.is-animating .naws-hm-c {
    animation: naws-hm-in 320ms ease both;
    animation-delay: var(--naws-hm-d, 0ms);
}

@keyframes naws-hm-in {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .naws-hm.is-animating .naws-hm-c { animation: none; }
    .naws-hm-c { transition: none; }
}

.naws-hm-tip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    background: var(--naws-text-darkest, #1a3535);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}

.naws-hm-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--naws-text-muted, #7aa0a0);
}
.naws-hm-legend-bar { flex: 1; height: 8px; border-radius: 4px; }

.naws-hm-empty {
    padding: 10px 0;
    font-size: 13px;
    color: var(--naws-text-muted, #7aa0a0);
}