/*
 * ============================================================================
 *  WDLIVE - STYLE
 * ============================================================================
 *  LAYOUT: dashboardet styres av "grid-template-areas" nederst i denne filen
 *  (se ".dashboard-grid"). Det er en tekst-basert "kart" over hvor hver
 *  widget skal ligge - du endrer layout ved å bytte om på navnene i det
 *  kartet, ELLER ved å endre hvor mange kolonner en widget skal spenne over
 *  (skriv samme navn i flere celler). Ingen JavaScript-endringer nødvendig.
 *
 *  STØRRELSE: hver widget sin høyde styres av "height" på ".widget" og
 *  undergrupper nedenfor. SVG- og Chart.js-grafikken skalerer automatisk
 *  og forblir skarp uansett hvilken størrelse du setter.
 *
 *  VIKTIG for widgets som inneholder Chart.js-grafer (søyler/linjegrafer):
 *  bruk ALLTID en fast "height" (ikke "min-height" eller "auto") på boksen
 *  rundt en <canvas>. Chart.js måler sin egen forelder for å bestemme
 *  størrelse - hvis den forelderen i stedet vokser for å tilpasse seg
 *  innholdet (auto-høyde), oppstår en evighetsløkke der grafen og boksen
 *  blåser seg opp mer og mer (det er det som skjedde tidligere). SVG-
 *  målerne (termometre, kompass osv.) har ikke dette problemet og tåler
 *  fint "min-height".
 *
 *  FARGER: se ":root" og ".dark" for lys/mørk fargepalett.
 * ============================================================================
 */

:root {
  /* Felles størrelse på hovedtallet i boksene (barometer, vind, luftfuktighet,
     Espedalselva, windchill/følt ...). Utetemperaturen er bevisst større.
     Tallene inni vindkompasset og fuktighetsbuen (SVG) skaleres i main.js
     slik at de blir like store som dette på skjermen. */
  --stat-size: 2.3rem;
  --bg: #eef1f5;
  --card-bg: #ffffff;
  --text: #1b2430;
  --text-muted: #5b6779;
  --border: rgba(20, 30, 45, 0.08);
  --shadow: 0 1px 3px rgba(20, 30, 45, 0.06), 0 8px 24px rgba(20, 30, 45, 0.06);
  --accent: #3aa0ff;
  --accent-soft: rgba(58, 160, 255, 0.14);
  --up: #e05050;
  --down: #3a80ff;
  --flat: #8a94a3;
  --radius: 18px;
}

html.dark {
  --bg: #0f1420;
  --card-bg: #171e2c;
  --text: #e7ecf3;
  --text-muted: #8d99ac;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --accent-soft: rgba(58, 160, 255, 0.22);
}

* { box-sizing: border-box; }
/* Elementer med "hidden" skal alltid være skjult, uansett andre regler */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  transition: background 0.25s ease, color 0.25s ease;
}

.status-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #d64545;
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem 1.75rem 0.75rem;
}

.site-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Tekst til høyre for stasjonsnavnet (f.eks. "Alle data fra: ...") */
.station-subtitle {
  margin: 0;
  color: var(--subtitle);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: right;
}
:root { --subtitle: #2f86d6; }
html.dark { --subtitle: #7cc0ff; }

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

/* Liten indikator som gir en stille, kort blink hver gang data er oppdatert */
.update-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--flat);
  opacity: 0.5;
  flex-shrink: 0;
}
.update-dot.pulse {
  animation: update-pulse 1.1s ease-out;
}
@keyframes update-pulse {
  0%   { background: #3ecf6e; opacity: 1; box-shadow: 0 0 0 0 rgba(62, 207, 110, 0.5); }
  60%  { background: #3ecf6e; opacity: 1; box-shadow: 0 0 0 6px rgba(62, 207, 110, 0); }
  100% { background: var(--flat); opacity: 0.5; box-shadow: 0 0 0 0 rgba(62, 207, 110, 0); }
}

/* Stille oppdatering: siden dempes IKKE under henting, og grafene tegnes om
   uten animasjon (se getOrCreate i graphs.js). Bare tall og kurver som faktisk
   har endret seg, ser annerledes ut etter en oppdatering. */

/* ------------------------------------------------------------------
   WIDGET-KORT (felles stil for alle bokser)
------------------------------------------------------------------ */
.widget {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 280px;      /* FAST høyde - se advarselen om Chart.js øverst i filen */
  overflow: hidden;
}

.widget-title {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  align-self: flex-start;
}

.gauge-svg {
  display: block; /* SVG er "inline" by default, som kan gi feil/for liten høyde inni flex-bokser */
  width: 100%;
  height: 100%;
  min-height: 110px;
  flex: 1 1 auto;
}

/* ------------------------------------------------------------------
   STORT TALL + TREND (utetemperatur / windchill / Espedalselva)
------------------------------------------------------------------ */
.bignum-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.bignum-value {
  font-size: var(--stat-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.1rem 0 0.1rem;
}
/* Lange boksnavn (f.eks. "Espedalselva vannf.") - holdes på én linje */
.bignum-label-tight {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.01em;
}
/* Kun i 6-kolonners layout (smale bokser) krymper teksten litt med skjermbredden */
@media (min-width: 1101px) {
  .bignum-label-tight { font-size: clamp(0.66rem, 0.88vw, 0.85rem); }
}
.bignum-unit { font-size: 0.45em; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.bignum-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.bignum-spark-wrap {
  position: relative;
  width: 100%;
  height: 70px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
  margin-top: auto;
}
.bignum-spark-wrap canvas { width: 100% !important; height: 100% !important; cursor: crosshair; }

/* Tooltip for sparkline-grafene (tidspunkt + verdi). Ligger i <body> slik at
   den ikke kuttes av widgetens overflow:hidden. */
.spark-tooltip {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
}
.spark-tooltip-time { color: var(--text-muted); font-size: 0.75rem; }
.spark-tooltip-value { font-weight: 600; font-size: 0.95rem; }
.bignum-spark-empty {
  width: 100%;
  height: 70px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border);
}

/* ------------------------------------------------------------------
   VIND
------------------------------------------------------------------ */
/* Vind-boksen spenner over 2 kolonner (se grid-template-areas nederst):
   vindrose til venstre (fyller hele høyden), snitt/kast-søyler til høyre. */
.widget-wind {
  height: 280px;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
}
.wind-rose {
  flex: 1 1 55%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wind-rose {
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
  outline: none;
}
.wind-rose:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.wind-rose .gauge-svg { min-height: 0; flex: 1 1 auto; height: auto; }

/* Linjen over rosen: hvilken visning + prikker for hvor i rekken man er */
.wind-mode-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 18px;
  flex: 0 0 auto;
}
.wind-mode-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wind-mode-dots { display: flex; gap: 4px; flex-shrink: 0; }
.wind-mode-row .widget-title { margin: 0; }
.wind-mode-sub { align-self: flex-start; font-weight: 500; margin-top: 0.1rem; height: 16px; }
.wind-mode-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border);
  box-shadow: inset 0 0 0 1px var(--text-muted);
  opacity: 0.45;
}
.wind-mode-dot.active { background: var(--accent); box-shadow: none; opacity: 1; }

/* Fargeforklaring under vindrosen */
.wind-rose-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 8px;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.2;
  padding-top: 2px;
}
.wind-rose-legend[hidden] { display: none; }
.rose-legend-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rose-swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.rose-legend-unit { font-weight: 600; }
.wind-bars {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  gap: 0.75rem;
  height: calc(280px - 1.85rem); /* FAST høyde = boksens innvendige høyde (se advarsel om Chart.js) */
}
.wind-bars .mini-bar {
  display: flex;
  flex-direction: column;
  height: calc(280px - 1.85rem);
}
/* Navnet (Snitt / Kast) står over verdien under søylen - ikke som akse-tekst,
   fordi lang akse-tekst kan presse selve søylen bort i smale bokser (mobil) */
.wind-bars .mini-bar-chart { height: calc(280px - 1.85rem - 44px); }
.wind-bars .mini-bar-value { height: 44px; flex-direction: column; line-height: 1.2; }
.mini-bar-caption { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* ------------------------------------------------------------------
   NEDBØR / SOLAR-UV (flere mini-søyler side ved side)
------------------------------------------------------------------ */
/* Bokser man kan klikke på for å bytte visning */
.clickable-widget { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.clickable-widget:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.widget-title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.widget-title-row .widget-title { margin-bottom: 0; }
.rain-mode-label { align-self: flex-start; margin: 0.15rem 0 0.2rem; font-weight: 500; }

/* Nedbør: søyle + navn/verdi under (samme oppbygging som vind) */
.widget-rain .rain-bars[hidden] { display: none; }
.widget-rain .rain-bars { height: 194px; margin-top: 0.2rem; }
.widget-rain .mini-bar { display: flex; flex-direction: column; height: 194px; }
.widget-rain .mini-bar-chart { height: 150px; }
.widget-rain .mini-bar-value { height: 44px; flex-direction: column; line-height: 1.2; font-size: 0.85rem; white-space: nowrap; }

.rain-bars, .solaruv-bars {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  height: 170px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
  margin-top: 0.4rem;
}
.mini-bar {
  flex: 1;
  height: 100%; /* 100% av en forelder med FAST høyde (wind-bars/rain-bars/solaruv-bars) - ikke flex/min-height, for å unngå resize-løkke med Chart.js */
  position: relative;
}
.mini-bar canvas { width: 100% !important; height: 100% !important; }

/* Solar/UV har en avlest verdi under selve søylegrafikken */
.solaruv-bars .mini-bar {
  display: flex;
  flex-direction: column;
  height: 170px; /* samme faste høyde som .solaruv-bars selv */
}
.mini-bar-chart {
  position: relative;
  width: 100%;
  height: 132px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
}
.mini-bar-value {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ------------------------------------------------------------------
   BAROMETER / FØLT TEMPERATUR (enkle tallverdier)
------------------------------------------------------------------ */
.big-value {
  font-size: var(--stat-size);
  font-weight: 700;
  margin-top: auto;
  margin-bottom: auto;
  letter-spacing: -0.02em;
}

.baro-trend {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.3rem;
}
.trend-up { color: var(--up); }
.trend-down { color: var(--down); }
.trend-flat { color: var(--flat); }

/* ------------------------------------------------------------------
   SOL / MÅNE
------------------------------------------------------------------ */
.sunmoon-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.sunmoon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.sunmoon-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sunmoon-value {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.moon-svg { width: 90px; height: 90px; }
/* Sol/måne-boksen er én kolonne bred - litt mer kompakt */
.widget-sunmoon { padding-left: 0.7rem; padding-right: 0.7rem; }
.widget-sunmoon .sunmoon-label { white-space: nowrap; font-size: 0.68rem; }
.widget-sunmoon .sunmoon-value { font-size: 1.05rem; }
.widget-sunmoon .moon-svg { width: 64px; height: 64px; }
.widget-sunmoon .moon-phase-text { font-size: 0.72rem; }
.moon-phase-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------
   FORECAST-BANNER
------------------------------------------------------------------ */
.widget-forecast {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: auto;       /* overstyrer den faste høyden fra .widget - denne skal bare være så høy som teksten */
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.forecast-half {
  flex: 1;
  display: flex;
  justify-content: center;
}
.forecast-half:first-child { justify-content: flex-end; padding-right: 1.5rem; }
.forecast-half:last-child { justify-content: flex-start; padding-left: 1.5rem; }
.forecast-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.widget-forecast a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.widget-forecast a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   HISTORIKK-GRAFER
------------------------------------------------------------------ */
.widget-graph { height: 320px; }
.graph-canvas-wrap {
  position: relative;
  width: 100%;
  height: 250px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
}
.graph-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.graphs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  width: 100%;
}

/* ------------------------------------------------------------------
   SVG GAUGE-STILER (brukt av gauges.js)
------------------------------------------------------------------ */
.gauge-outline { fill: none; stroke: var(--border); stroke-width: 3; }
.gauge-tick { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.6; }
.gauge-tick-circle { stroke: var(--border); stroke-width: 1.5; }
.gauge-scale-text { fill: var(--text-muted); font-size: 11px; text-anchor: start; }
.gauge-value-text { fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle; }
.gauge-label-text { fill: var(--text-muted); font-size: 12px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.03em; }
.gauge-marker-max { stroke: var(--up); stroke-width: 3; }
.gauge-marker-min { stroke: var(--down); stroke-width: 3; }
.gauge-wind-arrow { fill: var(--accent); }
.gauge-compass-n { fill: var(--up); font-size: 15px; font-weight: 700; text-anchor: middle; }
.gauge-compass-text { fill: var(--text-muted); font-size: 13px; text-anchor: middle; }
/* Vindrose (gauges.js renderWindRose) - 5 hastighetsklasser, lys -> mørk blå */
:root {
  --rose-1: #9fdcf5; --rose-2: #3fb0f0; --rose-3: #1f78d8; --rose-4: #2c4bb0; --rose-5: #241f6e;
}
html.dark {
  --rose-1: #2f4aa8; --rose-2: #2f6fd0; --rose-3: #38a0f0; --rose-4: #7fd0f5; --rose-5: #d4f1ff;
}
.rose-c1 { fill: var(--rose-1); } .rose-bg1 { background: var(--rose-1); }
.rose-c2 { fill: var(--rose-2); } .rose-bg2 { background: var(--rose-2); }
.rose-c3 { fill: var(--rose-3); } .rose-bg3 { background: var(--rose-3); }
.rose-c4 { fill: var(--rose-4); } .rose-bg4 { background: var(--rose-4); }
.rose-c5 { fill: var(--rose-5); } .rose-bg5 { background: var(--rose-5); }
.rose-seg { stroke: var(--card-bg); stroke-width: 1.5; stroke-linejoin: round; }
.rose-hit { fill: transparent; cursor: pointer; }
.rose-hit:hover { fill: var(--text); fill-opacity: 0.05; }
.rose-ring { fill: none; stroke: var(--border); stroke-width: 1.5; }
.rose-spoke { stroke: var(--border); stroke-width: 1; }
.rose-ring-text { fill: var(--text-muted); font-size: 9.5px; }
.rose-dir-text { font-size: 12px; }
.rose-calm { fill: var(--card-bg); stroke: var(--border); stroke-width: 1.5; }
.rose-calm-text { fill: var(--text-muted); font-size: 9px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.gauge-humidity-value { font-size: 34px; }
.gauge-wind-speed { font-size: 30px; paint-order: stroke; stroke: var(--card-bg); stroke-width: 5px; }
.gauge-center-text { text-anchor: middle; font-size: 12px; paint-order: stroke; stroke: var(--card-bg); stroke-width: 4px; }
.gauge-arc-bg { fill: none; stroke: var(--border); stroke-width: 16; }
.gauge-arc-fill { fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: round; }
.gauge-moon-dark { fill: #2a3040; }
.gauge-moon-lit { fill: #f4e7c6; }
html.dark .gauge-moon-dark { fill: #10131c; }

/* ============================================================================
   HOVEDLAYOUT - juster dette "kartet" for å endre plassering av widgets.
   Hver rad i grid-template-areas er en linje med 6 navn (6 kolonner totalt).
   "wind" står to ganger = den spenner over 2 kolonner.
============================================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "now now rainfall wind wind humidity"
    "espedalselva flow solaruv feels barometer sunmoon"
    "forecast forecast forecast forecast forecast forecast"
    "graphs graphs graphs graphs graphs graphs";
  gap: 1.25rem;
  padding: 0 1.75rem 2.5rem;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "now now"
      "rainfall humidity"
      "wind wind"
      "espedalselva flow"
      "solaruv feels"
      "barometer sunmoon"
      "forecast forecast"
      "graphs graphs";
  }
}

@media (max-width: 620px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "now"
      "rainfall"
      "wind"
      "humidity"
      "espedalselva"
      "flow"
      "solaruv"
      "feels"
      "barometer"
      "sunmoon"
      "forecast"
      "graphs";
  }
  .site-header { padding: 1rem 1.1rem 0.5rem; }
}
/* Diskret versjonslinje nederst - kun ment som info, skal ikke trekke blikket */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0 1rem 1.25rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
.site-footer > span { opacity: 0.55; }
/* Tannhjul: innstillinger */
.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-right: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.4s ease, background 0.15s ease;
}
.settings-btn svg { width: 16px; height: 16px; fill: currentColor; }
.settings-btn:hover, .settings-btn:focus-visible { opacity: 1; background: var(--border); transform: rotate(45deg); outline: none; }

/* Titler med forklaring (data-info): liten "i" bak tittelen */
.has-info {
  cursor: help;
  outline: none;
}
.has-info::after {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px; height: 13px;
  margin-left: 5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  text-transform: none;
  vertical-align: 1px;
  opacity: 0.6;
}
.bignum-label-tight.has-info::after { margin-left: 3px; }
.has-info:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }

.info-box {
  position: absolute;
  z-index: 110;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* Sol & UV - soldager (stablede søyler) */
:root { --sun-1: #f0c030; --sun-2: #a7b4c4; --sun-3: #6b7787; --sun-4: #384152; }
html.dark { --sun-1: #f0c030; --sun-2: #8e9bab; --sun-3: #5c6777; --sun-4: #2a3140; }
.sun-c1 { background: var(--sun-1); } .sun-c2 { background: var(--sun-2); }
.sun-c3 { background: var(--sun-3); } .sun-c4 { background: var(--sun-4); }
html.dark .sun-c4 { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.widget-solaruv .solaruv-bars[hidden], .sun-days[hidden] { display: none; }
.widget-solaruv .solaruv-bars { height: 160px; }
.widget-solaruv .solaruv-bars .mini-bar { height: 160px; }
.widget-solaruv .solaruv-bars .mini-bar-chart { height: 122px; }
.sun-days { width: 100%; display: flex; flex-direction: column; height: 176px; margin-top: 0.2rem; }
.sun-days-bars { display: flex; gap: 0.6rem; width: 100%; height: 156px; }
.sun-days-bars .mini-bar { display: flex; flex-direction: column; height: 156px; }
.sun-days-bars .mini-bar-chart { height: 116px; }
.sun-days-bars .mini-bar-value { height: 40px; flex-direction: column; line-height: 1.2; font-size: 0.82rem; white-space: nowrap; }
.sun-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 0.66rem; color: var(--text-muted); height: 20px; align-items: center; }
.stack-tip-row { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.stack-tip-row b { margin-left: auto; padding-left: 12px; font-weight: 600; }

/* ------------------------------------------------------------------
   TEMPERATUR NÅ - dobbelt kort (grid-area "now"): stort tall + endring
   1t/24t, LIVE-lampe, 24t-kurve og tre små bokser (nedbør/vind/barometer)
------------------------------------------------------------------ */
.widget-now {
  align-items: stretch;
  padding: 1rem 1.15rem 0.95rem;
}
.now-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 22px;
  flex: 0 0 auto;
}
.now-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
}
.now-temp {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.now-temp-unit {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 0.15em;
  vertical-align: 0.15em;
}
/* Liten boks til høyre for temperaturen: trend (1t/24t) + maks/min i dag */
.widget-now { container-type: inline-size; container-name: now; }
.now-stats {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  position: relative;
  background: rgba(20, 30, 45, 0.035);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
  margin-top: 0.1rem;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.dark .now-stats { background: rgba(255, 255, 255, 0.035); }
.now-stats:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.now-stats-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.now-stats-trend { align-items: flex-end; }
.now-stats-minmax {
  border-left: 1px solid var(--border);
  padding-left: 0.6rem;
}
.now-trend {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.now-mm {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.now-mm-lbl { color: var(--text-muted); min-width: 2.6em; }
.now-mm-val { font-weight: 600; }
.now-mm-time { color: var(--text-muted); font-size: 0.92em; }
.now-stats-dots { display: none; }

/* Smalt kort: bare én av de to visningene - klikk/trykk for å bytte */
@container now (max-width: 440px) {
  .now-stats { cursor: pointer; padding-bottom: 0.7rem; min-width: 7.6rem; justify-content: flex-end; }
  .now-stats[data-mode="trend"] .now-stats-minmax,
  .now-stats[data-mode="minmax"] .now-stats-trend { display: none; }
  .now-stats-minmax { border-left: 0; padding-left: 0; }
  .now-stats-dots {
    display: flex; gap: 4px;
    position: absolute; left: 50%; bottom: 0.25rem; transform: translateX(-50%);
  }
  .now-stats-dots .wind-mode-dot { width: 5px; height: 5px; }
}

.now-spark-wrap {
  position: relative;
  width: 100%;
  height: 84px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.now-spark-wrap canvas { width: 100% !important; height: 100% !important; cursor: crosshair; }

.now-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: auto;
  flex: 0 0 auto;
}
.now-tile {
  min-width: 0;
  background: rgba(20, 30, 45, 0.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.45rem 0.65rem 0.5rem;
}
html.dark .now-tile { background: rgba(255, 255, 255, 0.035); }
.now-tile-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.now-tile-value {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.now-tile-unit { font-size: 0.68em; font-weight: 600; color: var(--text-muted); }
.now-tile-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-tile-sub.trend-up { color: var(--up); }
.now-tile-sub.trend-down { color: var(--down); }

/* LIVE-lampe: grønn og sakte blinkende, rød "FEIL" når data uteblir */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.12rem 0.55rem 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: default;
  --live: #8a94a3;
  color: var(--live);
  background: color-mix(in srgb, var(--live) 12%, transparent);
}
.live-badge.is-ok  { --live: #2fbf66; }
.live-badge.is-err { --live: #e5484d; }
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
}
.live-badge.is-ok .live-dot { animation: live-blink 2.4s ease-in-out infinite; }
.live-badge.is-err .live-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 30%, transparent); }
@keyframes live-blink {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(47, 191, 102, 0.55); }
  50%      { opacity: 0.35; box-shadow: 0 0 0 5px rgba(47, 191, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-badge.is-ok .live-dot { animation: none; }
}

@media (max-width: 620px) {
  .widget-now { padding-left: 0.9rem; padding-right: 0.9rem; }
  .now-temp { font-size: 3rem; }
}

/* Smalt temperaturkort: litt mindre tall i de små boksene så "1022.0 hPa" får plass.
   (Står nederst i filen så den overstyrer grunnstilen over.) */
@container now (max-width: 440px) {
  .now-tiles { gap: 0.4rem; }
  .now-tile { padding: 0.4rem 0.5rem 0.45rem; }
  .now-tile-value { font-size: 1.02rem; }
  .now-tile-unit { font-size: 0.62em; }
  .now-tile-sub { font-size: 0.7rem; }
}

/* Vindkompass ("Nå" i vind-boksen) - tykk ring som luftfuktighet-buen,
   trekant oppå ringen for retning, stort tall i midten */
.compass-ring { fill: none; stroke: var(--border); stroke-width: 16; }
html.dark .compass-ring { stroke: rgba(255, 255, 255, 0.09); }
.compass-tick { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.45; stroke-linecap: round; }
.compass-tick-main { stroke-width: 2; opacity: 0.7; }
.compass-pointer {
  fill: var(--accent);
  stroke: var(--card-bg);
  stroke-width: 3;
  stroke-linejoin: round;
  paint-order: stroke;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.6s ease;
}
.compass-speed { font-size: 44px; letter-spacing: -0.02em; }
.compass-sub { fill: var(--text-muted); font-size: 12.5px; text-anchor: middle; }

/* Luftfuktighet: liten infoboks i bunnen med dagens maks / min */
.widget-humidity .gauge-svg { min-height: 0; }
.hum-minmax {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.4rem;
  background: rgba(20, 30, 45, 0.035);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.4rem 0.2rem;
}
html.dark .hum-minmax { background: rgba(255, 255, 255, 0.035); }
.hum-mm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
}
.hum-mm + .hum-mm { border-left: 1px solid var(--border); }
.hum-mm .now-tile-label { font-size: 0.62rem; }
.hum-mm-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   WINDCHILL / FØLT TEMPERATUR (felles boks) og BAROMETER
   Samme oppbygging: tall, 24t-graf, infoboks med maks/min nederst
------------------------------------------------------------------ */
.widget-feels, .widget-baro2 { align-items: stretch; }
.widget-feels .widget-title-row .bignum-label { align-self: center; }
.feels-value {
  font-size: var(--stat-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.feels-spark-wrap {
  position: relative;
  width: 100%;
  height: 100px; /* FAST høyde, se advarsel om Chart.js øverst i filen */
  flex: 0 0 auto;
  margin-top: auto;
}
.feels-spark-wrap canvas { width: 100% !important; height: 100% !important; cursor: crosshair; }
.widget-feels .hum-minmax, .widget-baro2 .hum-minmax { margin-top: 0.45rem; }

.baro2-value {
  font-size: var(--stat-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.3rem;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.baro2-trend {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  margin-top: 0.1rem;
}
.baro2-spark { height: 56px; }
.baro2-stats {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  row-gap: 0.15rem;
  padding-top: 0.3rem;
}
.baro2-stats:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.baro2-stats-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.45rem 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.15rem;
}
.baro2-stats-head .now-tile-label { color: var(--text); opacity: 0.75; }
.baro2-stats .hum-mm-val { font-size: 0.98rem; }
.baro2-when {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-height: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.baro2-stats:not(.has-when) .baro2-when { display: none; }

/* ------------------------------------------------------------------
   SOL & MÅNE / TIDEVANN
------------------------------------------------------------------ */
.sunmoon-title-row { margin-bottom: 0.2rem; }
.sunmoon-title-row .widget-title { margin: 0; }
.widget-sunmoon .sunmoon-row[hidden], .tide-view[hidden] { display: none; }
.tide-view {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tide-location {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tide-ev {
  display: grid;
  grid-template-columns: 0.9rem 1fr auto;
  column-gap: 0.4rem;
  row-gap: 0;
  align-items: center;
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
  background: rgba(20, 30, 45, 0.035);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
html.dark .tide-ev { background: rgba(255, 255, 255, 0.035); }
.tide-arrow { grid-column: 1; grid-row: 1 / span 2; font-weight: 700; }
.tide-type  { grid-column: 2; grid-row: 1; font-size: 0.78rem; font-weight: 600; }
.tide-cm    { grid-column: 3; grid-row: 1; font-size: 0.74rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.tide-when  { grid-column: 2 / span 2; grid-row: 2; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.tide-high .tide-arrow { color: var(--accent); }
.tide-low .tide-arrow { color: var(--text-muted); }
.tide-credit { margin-top: auto; font-size: 0.6rem; color: var(--text-muted); opacity: 0.7; text-align: right; }

/* ------------------------------------------------------------------
   INNSTILLINGSPANEL (dialog)
------------------------------------------------------------------ */
.settings-dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.settings-dialog::backdrop { background: rgba(10, 14, 22, 0.55); backdrop-filter: blur(2px); }
.settings-dialog form { padding: 1.1rem 1.25rem 1rem; }
.sd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.sd-head h2 { margin: 0; font-size: 1.15rem; }
.sd-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.sd-section { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.85rem 0.8rem; margin: 0 0 0.75rem; }
.sd-section legend { padding: 0 0.35rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.sd-field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.55rem; font-size: 0.8rem; color: var(--text-muted); min-width: 0; }
.sd-field input, .sd-field select {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.45rem 0.6rem; width: 100%;
}
.sd-field input:focus, .sd-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sd-field input.is-auto { opacity: 0.6; }
.sd-check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; margin-bottom: 0.55rem; cursor: pointer; }
.sd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; }
.sd-row-4 { grid-template-columns: repeat(4, 1fr); }
.sd-help { font-size: 0.74rem; color: var(--text-muted); margin: 0 0 0.6rem; line-height: 1.4; }
.sd-help code { font-size: 0.95em; }
.sd-files-group { font-size: 0.72rem; font-weight: 600; color: var(--text); opacity: 0.8; margin: 0.4rem 0 0.35rem; }
.sd-opt { font-style: normal; font-weight: 400; color: var(--text-muted); opacity: 0.8; }
.sd-file span { font-size: 0.74rem; }
.sd-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.sd-actions-left { justify-content: flex-start; }
.sd-actions button {
  font: inherit; font-size: 0.88rem; padding: 0.45rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.sd-actions .sd-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sd-actions .sd-primary:disabled { opacity: 0.6; cursor: wait; }
.sd-actions .sd-link { border: 0; padding: 0.2rem 0; color: var(--accent); font-size: 0.8rem; }
.sd-pw summary { cursor: pointer; font-size: 0.8rem; color: var(--text-muted); }
.sd-pw[open] summary { margin-bottom: 0.5rem; }
.sd-msg { min-height: 1.1em; margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
.sd-msg.is-error { color: #e5484d; }
@media (max-width: 520px) {
  .sd-row-4 { grid-template-columns: 1fr 1fr; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .station-subtitle { text-align: left; }
}

/* ------------------------------------------------------------------
   VÆRMELDING: lyst "display" med ramme + lenkeknapper til høyre
------------------------------------------------------------------ */
.widget-forecast {
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 400;
}
:root { --fc-bg: #eef4f8; --fc-border: #9db2c2; --fc-text: #12212d; }
html.dark { --fc-bg: #dbe7ef; --fc-border: #7f97a9; --fc-text: #0f1d28; }
.fc-display {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem 0.7rem 1rem;
  background: var(--fc-bg);
  color: var(--fc-text);
  border: 2px solid var(--fc-border);
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}
.fc-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.fc-credit {
  position: absolute;
  right: 0.5rem;
  bottom: 0.15rem;
  font-size: 0.58rem;
  color: var(--fc-text);
  opacity: 0.55;
  letter-spacing: 0.03em;
}
.fc-buttons { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.widget-forecast a.fc-btn, .widget-forecast a.fc-btn:hover { color: #fff; text-decoration: none; }
.fc-btn:hover, .fc-btn:focus-visible { filter: brightness(1.1); transform: translateY(-1px); outline: none; }
@media (max-width: 760px) {
  .widget-forecast { flex-direction: column; }
  .fc-display { padding-bottom: 1rem; }
  .fc-buttons { justify-content: stretch; }
  .fc-btn { flex: 1; }
  .fc-text { font-size: 0.82rem; }
}