@charset "UTF-8";

/* --------------------------------------------------------------------
styles-ajax2.css — Baseline + approved polish (standalone)
Last updated: 05 Oct 2025
-------------------------------------------------------------------- */

/* ===== BASELINE (unchanged structure/layout) ====================== */
/* -------- wrapper & grid shell ------------------ */
.weather-dashboard {
  min-height: clamp(400px, 50vh, 600px);
  max-width: 866px;
  margin: 0 auto;
  padding: 1rem;
}

.weather-dashboard__header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: .5rem;
  border-radius: 6px;
  border: 1px solid #2c3440;
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(18px, 2vw, 28px);
  margin-bottom: 6px;
}

.weather-dashboard__seo-summary {
  max-width: 700px;
  margin: 0 auto 8px;
  color: #425164;
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
}

:root[data-theme="dark"] .weather-dashboard__seo-summary {
  color: #cbd5e1;
}

#unique-dashboard-header {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
}

.weather-dashboard__grid {
  contain-intrinsic-size: 500px; /* fallback size */
  width: 100%;
  max-width: 866px;
  display: grid;
  gap: 4px;
  grid-template-columns: 27% 26% 27% 19%;
  grid-template-rows: repeat(4, minmax(80px, auto));  /* rows start at 114 px */
}

/* -------- generic card --------------------------------- */
.weather-dashboard__card {
  background: rgba(75,75,75,1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  min-height: 114px;          /* baseline keeps grid stable */
}

/* centred red strip above warmest / coldest rows */
.rekorder-cell {
  text-align: center;     /* centre the whole TD */
  padding: 0;
  width: 100%;
}

.rekorder-bg {
  display: inline-flex;  /* shrink-wrap then centre via rekorder-cell */
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 8px;
  background: #b91c1c;    /* deep red background */
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  line-height: 1.15;
}

.weather-dashboard__card-header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: .2rem;
  margin-bottom: 4px;
  border-radius: 5px;
  font-size: clamp(.9rem, 1.8vw, 1.2rem);
  font-weight: bold;
}

/* ===================== TEXT =========================== */
#weather-description {
  white-space: normal;     /* override global nowrap */
  word-break: normal;      /* keep natural breaks */
  line-height: 1.2;        /* optional: keeps multi-line text tidy */
}

.weather-dashboard__temperature {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
}

/* ===================== CLS GUARDS ====================== */
.weather-dashboard__image {
  width: clamp(28px, 5vw, 50px);
  height: clamp(28px, 5vw, 50px);
  display: block;
  margin: 0 auto;
  min-width: 55px;
  min-height: 55px;
}

.weather-dashboard__image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 55px;
  min-block-size: 55px;
}

/* trend arrow placeholders */
.temperature-trend-image-wrapper,
.humidity-trend-image-wrapper {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  flex-shrink: 0;
}

.humidity-trend-image-wrapper {
  margin-left: 0;
  margin-right: 2px;
}

.temperature-trend-image,
.humidity-trend-image {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 1px;
}

/* Reserve vertical space for async swaps */
#weather-description,
#temperature-description-placeholder,
#desc-6h,
#desc-1h {
  height: clamp(2.6rem, 5vw, 3.2rem);
  line-height: 1.3;
}

#temperature-text-wrapper {
  height: clamp(3rem, 6vw, 3.6rem);
}

#temperature-text-placeholder {
  display: inline-block;
  min-height: 1.7rem;
}

.temperature-trend-image-wrapper {
  min-height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===================== WEBCAM WRAPPER ================== */
.weather-dashboard__webcam-card {
  contain-intrinsic-size: 473px;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0;
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
}

.weather-dashboard__webcam-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===================== WIND ROSE ======================= */
.wind-rose {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto;
}

.wind-rose img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.wind-rose-container {
  min-height: 90px;
  text-align: center;
  background: #4b4b4b;
  font-family: Arial, sans-serif;
}

.wind-rose-container svg {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}

/* NEW: smoother compass rotation, matches main.js */
#innerCompass {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 1.8s cubic-bezier(.4,0,.2,1);
}

.arrowLayer {
  position: absolute;
  inset: 0;
}

.cardinal {
  position: absolute;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #dcdcdc;
  text-shadow: 0 0 3px #000;
  font-size: clamp(10px, 2.5vw, 13px);
  pointer-events: none;
}

.cardinal.N { left: 50%; top: 0; transform: translate(-50%, 8%); }
.cardinal.E { right: 0; top: 50%; transform: translate(-18%, -50%); }
.cardinal.S { left: 50%; bottom: 0; transform: translate(-50%, 0); }
.cardinal.V { left: 0; top: 50%; transform: translate(26%, -50%); }

#windDirectionText {
  font: 11px/1.3 Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #CDF1B7;
  text-align: center;
  margin-top: 4px;
  min-height: 1.35em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

img#windArrow,
img#windArrowLine {
  width: 60px;
  height: 60px;
}

/* show the large JS-injected needle; hide the small placeholder */
img#windArrowLine { display: none !important; }

img#windArrow {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
}

/* hide numeric degree read-out */
#windDirectionDeg, .degree-label, .degText { display: none; }

/* ===================== CARD-SPECIFIC TWEAKS ============ */
.rain-card,
.outlook-card,
.temperature-card,
.uv1-card,
.uv2-card,
.humidity-barometer-card,
.almanac-card,
.moon-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* UV & Pollen fixed heights to stop CLS */
.uv1-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(75, 75, 75, 1);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  color: #fff;
  min-height: 80px;
}

.uv2-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px;
  min-height: 95px;
  align-self: start;
  background: rgba(75, 75, 75, 1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  color: #fff;
}

.weather-dashboard__card.pollen-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px;
  min-height: 115px;
  align-self: start;
  background: rgba(75,75,75,1);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  color: #fff;
}

/* underline rows */
.weather-dashboard__underline {
  background: #5A5A5A;
  font-weight: bold;
  color: #fff;
  border-radius: 8px !important;
  padding: .1rem .1rem;
  margin: .3rem auto;
  line-height: 1.2;
  text-align: center;
  width: 90%;
}

/* info-icon popups */
.uv-info-header, .aurora-info-header, .outlook-info-header, .pollen-info-header {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.weather-dashboard__info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: .25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  vertical-align: middle;
}
.weather-dashboard__info-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  vertical-align: middle;
}
.weather-dashboard__info-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}
.uv-info-popup, #nordlys-info-popup {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(75,75,75,.95);
  padding: .5rem;
  border: 1px solid #fff;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 999;
  color: #b9dcff;
}

.uv-info-popup,
#nordlys-info-popup,
.uv-info-popup a,
#nordlys-info-popup a {
  color: #b9dcff;
}

/* ===================== OUTLOOK LABELS ================== */
.outlook-1h-bg, .outlook-6h-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 2px;
  border-radius: 5px;
  height: 90%;
  width: 90%;
  background: #075985; /* deep blue background */
  color: #fff;
}
/* ===================== WIDTH RESERVES ================== */
#temperature-text-placeholder,
#temperature-description-placeholder,
#feels-like-temperature,
#max-today-temp,
#min-today-temp,
#avg-today-temp,
#avg-month-temp,
#humidity-placeholder,
#humidity,
#rain-today,
#rain-rate,
#rain-yesterday,
#rain-this-month,
#rain-season-total,
#grass-value,
#birch-value,
#alder-value {
  display: inline-block;
  min-width: 5ch;
}

.season-card {
  position: relative;
}

.season-card--inactive {
  display: none !important;
}

.season-card--active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.hidden { display: none !important; }

/* ===================== MEDIA QUERIES =================== */
@media (max-width: 1024px) {
  .wind-rose-container svg { width: 70px; height: 50px; }
}
@media (max-width: 768px) {
  .wind-rose-container svg { width: 60px; height: 40px; }
}
@media (max-width: 480px) {
  .wind-rose-container svg { width: 60px; height: 40px; }
}

/* Only used for the screen-reader live region elsewhere */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== POLISH LAYER (from test CSS; safe standalone) ============== */
/* Global polish & tokens */
.weather-dashboard{
  font-variant-numeric: tabular-nums; /* stable digits */
  --wd-shadow: 0 2px 6px rgba(0,0,0,.18);
  --wd-shadow-hover: 0 8px 20px rgba(0,0,0,.28);
  --wd-header-chip-bg: rgba(255,255,255,.09);
}

/* “Oppdatert: …” chip with freshness dot & ping */
.weather-dashboard__header #unique-dashboard-header{
  display:inline-flex; align-items:center; gap:.45em;
  background: var(--wd-header-chip-bg);
  border: 1px solid rgba(255,255,255,.2);
  padding: .15rem .55rem; border-radius: 999px;
  font-weight: 600; letter-spacing: .01em;
  position: relative; /* anchor for ping */
}
#unique-dashboard-header{ --wd-dot:#10b981; --wd-ring:rgba(16,185,129,.18); }
.weather-dashboard__header #unique-dashboard-header::before{
  content:""; display:inline-block; width:.6em; height:.6em;
  vertical-align:-.05em; border-radius:50%;
  background: var(--wd-dot);
  opacity: .95;
  will-change: transform, opacity;
}
/* color states (set by JS) */
.wd-status--fresh{ --wd-dot:#10b981; --wd-ring:rgba(16,185,129,.18); } /* green */
.wd-status--stale{ --wd-dot:#f59e0b; --wd-ring:rgba(245,158,11,.25); } /* amber */
.wd-status--old  { --wd-dot:#ef4444; --wd-ring:rgba(239,68,68,.28); }  /* red   */
/* subtle ping on update */
#unique-dashboard-header.wd-ping::before{
  animation: wdPulse .9s ease-out both;
}
@keyframes wdPulse{
  0%{ transform:scale(1); opacity:.95; }
  40%{ transform:scale(1.45); opacity:.55; }
  100%{ transform:scale(1); opacity:.95; }
}
@media (prefers-reduced-motion: reduce){
  #unique-dashboard-header.wd-ping::before{ animation:none!important; outline:2px solid var(--wd-dot); outline-offset:3px; filter:brightness(1.2); }
}

/* Card elevation (no accent bars) */
.weather-dashboard__card{
  position:relative;
  transition: box-shadow .22s ease, transform .18s ease, background-color .22s ease;
}
.weather-dashboard__card:hover,
.weather-dashboard__card:focus-within{
  box-shadow: var(--wd-shadow-hover);
  transform: translateY(-1px);
  background: rgba(90,90,90,1);
}

/* Header emoji (selected) */
.weather-dashboard__card-header{
  display:flex; align-items:center; justify-content:center; gap:.4em;
  background: linear-gradient(to bottom, #000, #0a0a0a); /* subtle sheen */
  min-height: 2.25rem;
  margin: 0 0 4px;
  padding-inline: .45rem;
  line-height: 1.1;
}

.weather-dashboard__header-wrap {
  position: relative;
}
.temperature-card        .weather-dashboard__card-header::before,
.wind-card               .weather-dashboard__card-header::before,
.rain-card               .weather-dashboard__card-header::before,
.outlook-card            .weather-dashboard__card-header::before,
.moon-card               .weather-dashboard__card-header::before{ content:""; display:none; }
.humidity-barometer-card .weather-dashboard__card-header::before{ content:"💧\00A0"; }
.almanac-card            .weather-dashboard__card-header::before{ content:"📅\00A0"; }
.uv1-card                .weather-dashboard__card-header::before{ content:"☀️\00A0"; }
.pollen-card             .weather-dashboard__card-header::before{ content:"🌿\00A0"; }
.uv2-card .weather-dashboard__card-header::before{
  content: "";
  display: inline-block;
  inline-size: 1.38em;     /* slightly larger because the bitmap has more inner padding than emoji icons */
  block-size: 1.38em;
  margin-inline-end: 0.38em;
  background: no-repeat center/115% 115% url("/images/aurora.webp");
  vertical-align: -0.2em;  /* align with text baseline */
}
/* Info icons: calmer until hover/focus */
.weather-dashboard__info-icon{
  opacity:.7; transition:opacity .12s ease, transform .12s ease;
}
.weather-dashboard__info-icon:hover,
.weather-dashboard__info-icon:focus{
  opacity:1; transform: scale(1.05);
}
.weather-dashboard__info-button:hover .weather-dashboard__info-icon,
.weather-dashboard__info-button:focus-visible .weather-dashboard__info-icon,
.weather-dashboard__info-button[aria-expanded="true"] .weather-dashboard__info-icon{
  opacity:1;
  transform: scale(1.05);
}

/* Primary numbers pop slightly */
.weather-dashboard__temperature{ font-weight:700; text-shadow: 0 0 1px rgba(0,0,0,.2); }
#wind-speed,
#rain-today, #rain-rate, #rain-yesterday, #rain-this-month, #rain-season-total,
#humidity-placeholder, #dew-point, #barometer{ font-weight:600; }

#rain-rate{
  min-height: 2.7rem;
}

/* Reserve vertical space for the wind card's async text swaps */
#wind-speed,
#wind-gust,
#beaufort,
#max-gust-today,
#month-gust{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#wind-speed{ min-height: 1.5rem; }
#wind-gust,
#beaufort,
#max-gust-today,
#month-gust{ min-height: 2.7rem; }

/* Rekorder strip tiny polish */
.weather-dashboard__underline{
  background:#5a5a5a; border:1px solid rgba(255,255,255,.08);
}

/* ===== Wind: centered, wide “Maks vindkast” chip, tight spacing ===== */
/* style the real DOM text directly (avoid pseudo-content text replacement) */
.wind-card .weather-dashboard__darker-row .weather-dashboard__underline{
  display: block;
  margin: .10rem auto .20rem;
  padding: 0;
  text-align: center;
  line-height: 1.1;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #f3f6fb;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .005em;
}
.wind-card .weather-dashboard__darker-row .weather-dashboard__underline .gust-section-label{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 1.5rem;
  padding: 0 .25rem;
  line-height: 1;
  border-radius: 10px;
  background: linear-gradient(to bottom, #050505, #000000);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.35);
}

/* ===== Small animations ===== */
.wd-fade-in{ animation: wdFadeIn .24s ease both; }
@keyframes wdFadeIn{
  from{ opacity:0; transform: translateY(2px); }
  to  { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .weather-dashboard__card{ transition:none; transform:none!important; }
  .weather-dashboard__info-icon{ transition:none; }
  .wd-fade-in{ animation:none !important; }
}
.weather-dashboard__webcam-card{
  overflow: hidden !important;
  border-radius: 10px;
}

.weather-dashboard__webcam-card picture{
  display: block;
  width: 100%;
  height: 100%;
}

.weather-dashboard__webcam-card .webcam-image{
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom;
  border-radius: inherit;
}

@media (max-width: 665px) {
  .weather-dashboard {
    padding: .6rem;
  }

  .weather-dashboard__header {
    height: auto;
    min-height: 2.2rem;
    padding: .45rem;
  }

  .weather-dashboard__header #unique-dashboard-header {
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .weather-dashboard__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    grid-template-rows: repeat(7, minmax(80px, auto));
    gap: 6px;
    align-items: stretch;
  }

  .temperature-card {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
  }

  .wind-card {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 296px;
  }

  .humidity-barometer-card {
    grid-column: 1 !important;
    grid-row: 4 !important;
    min-height: 150px;
  }

  .uv1-card {
    grid-column: 1 !important;
    grid-row: 6 !important;
    min-height: 94px;
  }

  .rain-card {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    min-height: 250px;
  }

  .outlook-card {
    grid-column: 2 !important;
    grid-row: 4 / span 2 !important;
    min-height: 324px;
  }

  .almanac-card {
    grid-column: 1 !important;
    grid-row: 5 !important;
    min-height: 170px;
  }

  .moon-card {
    grid-column: 2 !important;
    grid-row: 6 / span 2 !important;
    min-height: 258px;
  }

  .uv2-card,
  .pollen-card {
    grid-column: 1 !important;
    grid-row: 7 !important;
    min-height: 114px;
  }

  .weather-dashboard__webcam-card {
    grid-column: 1 / -1 !important;
    grid-row: 8 !important;
    margin-top: 0 !important;
  }

  .outlook-1h-bg,
  .outlook-6h-bg {
    min-height: 1.8rem;
  }

  .wind-card #wind-gust,
  .wind-card #beaufort,
  .wind-card #max-gust-today,
  .wind-card #month-gust {
    min-height: 2.9rem;
  }

}

@media (max-width: 560px) {
  .weather-dashboard__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .weather-dashboard__card {
    padding: 8px;
  }

  .weather-dashboard__card-header {
    font-size: clamp(.86rem, 3.6vw, 1rem);
  }
}

@media (max-width: 665px) {
  .rekorder-cell {
    text-align: left;
    padding-left: .15rem;
    padding-right: 0;
  }

  .temperature-card #temperature-text-wrapper,
  .temperature-card #temperature-description-placeholder {
    align-items: center;
    justify-content: center;
    text-align: center !important;
  }

  .temperature-card .temperature-record-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
  }

  .temperature-card .temperature-record-row .temperature-record-label {
    width: auto !important;
    min-width: 0 !important;
  }

  .temperature-card .temperature-record-label,
  .temperature-card .temperature-record-value {
    padding-left: 0;
    padding-right: 0;
  }

  .temperature-card .temperature-record-value {
    display: block;
    text-align: right !important;
  }

  .rekorder-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: calc(100% - 6px);
    padding: 4px 6px;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .moon-card {
    height: 238px;
    min-height: 238px;
    align-self: start;
  }
}

@media (max-width: 390px) {
  .temperature-card .weather-dashboard__thermostat-image {
    width: 72px;
    height: auto;
  }

  .temperature-card .weather-dashboard__temperature {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
  }

  .rekorder-bg {
    font-size: clamp(.64rem, 2.6vw, .76rem);
  }
}

@media (max-width: 360px) {
  .weather-dashboard__webcam-card {
    margin-top: -38px !important;
  }
}

@media (max-width: 340px) {
  .weather-dashboard__webcam-card {
    margin-top: -22px !important;
  }
}

/* ===== Dashboard refactor layer - 2026-03-13 ===== */
.weather-dashboard__grid {
  grid-template-columns: 27% 26% 27% 19%;
  grid-template-rows: repeat(4, minmax(88px, auto));
  align-items: stretch;
}

.temperature-card { grid-column: 1; grid-row: 1 / span 4; }
.wind-card { grid-column: 2; grid-row: 1; }
.rain-card { grid-column: 3; grid-row: 1; }
.outlook-card { grid-column: 4; grid-row: 1 / span 2; }
.humidity-barometer-card { grid-column: 2; grid-row: 2 / span 2; }
.almanac-card { grid-column: 3; grid-row: 2 / span 2; }
.moon-card { grid-column: 4; grid-row: 3 / span 2; }
.uv1-card { grid-column: 2; grid-row: 4; }
.uv2-card,
.pollen-card { grid-column: 3; grid-row: 4; }

.weather-dashboard__card {
  min-height: 0;
}

.weather-dashboard__card-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0.6rem;
}

.dashboard-metric-list,
.temperature-card__records-list {
  margin: 0;
  padding: 0;
}

.dashboard-metric-list {
  display: grid;
  gap: 0.3rem;
}

.dashboard-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.18rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dashboard-metric-row:last-child {
  border-bottom: none;
}

.dashboard-metric-row dt,
.dashboard-metric-row dd {
  margin: 0;
}

.dashboard-metric-row dt {
  white-space: nowrap;
}

.dashboard-metric-row dd {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-metric-list--spacious {
  gap: 0.45rem;
}

.temperature-card__body {
  gap: 0.8rem;
}

.temperature-card__summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 14ch);
  align-items: center;
  gap: 0.6rem;
  justify-items: center;
  justify-content: center;
}

.temperature-card__summary > :first-child {
  justify-self: center;
}

#weather-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  min-inline-size: 64px;
}

#weather-icon-container > * {
  margin-inline: auto;
}

.temperature-card__weather-text {
  margin: 0;
  min-height: calc(1.25em * 3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.temperature-card__main {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.temperature-card__thermo {
  inline-size: 92px;
  min-inline-size: 92px;
  display: flex;
  justify-content: center;
}

.temperature-card__metrics {
  display: grid;
  gap: 0.52rem;
  min-width: 0;
}

.temperature-card__reading {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  min-width: 0;
}

.temperature-card__reading-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.2rem;
}

.temperature-card__temperature-copy {
  margin: 0;
  min-height: calc(1.25em * 2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  inline-size: 100%;
  max-inline-size: 22ch;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.temperature-card__stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.28rem;
}

.temperature-card__stats .dashboard-metric-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.14rem;
  padding: 0.04rem 0 0.28rem;
  border-bottom: none;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.temperature-card__stats .dashboard-metric-row dt,
.temperature-card__stats .dashboard-metric-row dd {
  text-align: center;
  white-space: nowrap;
}

.temperature-card__records {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
}

.temperature-card__records-list {
  display: grid;
  gap: 0.4rem;
  inline-size: 100%;
}

.temperature-record-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  inline-size: 100%;
}

.temperature-record-label,
.temperature-record-value {
  margin: 0;
}

.temperature-record-label {
  text-align: left !important;
  justify-self: start;
}

.temperature-record-value {
  text-align: right !important;
  justify-self: stretch;
}

.temperature-card .temperature-record-row .temperature-record-label,
.temperature-card .temperature-record-row .temperature-record-value {
  display: block;
  width: auto;
}

.temperature-card .temperature-record-row .temperature-record-label {
  text-align: left !important;
}

.temperature-card .temperature-record-row .temperature-record-value {
  text-align: right !important;
}

.temperature-record-value {
  min-inline-size: 0;
}

.wind-card__body {
  gap: 0.45rem;
}

.wind-card__top {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.wind-card__rose {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
}

.wind-card__live {
  display: grid;
  gap: 0.4rem;
}

.wind-card__live-value,
.wind-card__live-gust,
.wind-card__beaufort {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wind-card__live-gust,
.wind-card__beaufort,
.wind-card__stats dd {
  min-height: 2.6rem;
}

.wind-card__stats .dashboard-metric-row dt,
.wind-card__stats .dashboard-metric-row dd {
  text-align: center;
}

.wind-card__stats .dashboard-metric-row,
.rain-card__stats .dashboard-metric-row,
.humidity-barometer-card__stats .dashboard-metric-row,
.almanac-card__stats .dashboard-metric-row,
.uv2-card__stats .dashboard-metric-row,
.pollen-card__stats .dashboard-metric-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.wind-card__stats .dashboard-metric-row dd {
  display: block !important;
  text-align: left !important;
  justify-self: stretch;
  width: 100%;
}

.rain-card__stats .dashboard-metric-row {
  grid-template-columns: max-content minmax(0, 1fr);
  inline-size: 100%;
}

.rain-card__stats {
  inline-size: calc(100% - 0.9rem);
  max-inline-size: 100%;
  margin-inline: auto;
}

.humidity-barometer-card__stats,
.almanac-card__stats,
.uv2-card__stats,
.pollen-card__stats {
  inline-size: calc(100% - 0.9rem);
  max-inline-size: 100%;
  margin-inline: auto;
}

.humidity-barometer-card__stats,
.almanac-card__stats {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
}

.rain-card__stats .dashboard-metric-row dt {
  text-align: left;
  justify-self: start;
}

.humidity-barometer-card__stats .dashboard-metric-row,
.almanac-card__stats .dashboard-metric-row,
.uv2-card__stats .dashboard-metric-row,
.pollen-card__stats .dashboard-metric-row {
  grid-template-columns: max-content minmax(0, 1fr);
  inline-size: 100%;
}

.humidity-barometer-card__stats .dashboard-metric-row,
.almanac-card__stats .dashboard-metric-row {
  align-content: center;
  min-height: 0;
}

.humidity-barometer-card__stats .dashboard-metric-row dt,
.almanac-card__stats .dashboard-metric-row dt,
.uv2-card__stats .dashboard-metric-row dt,
.pollen-card__stats .dashboard-metric-row dt {
  text-align: left;
  justify-self: start;
}

.rain-card__stats .dashboard-metric-row dd {
  display: block;
  text-align: right;
  justify-self: stretch;
  width: 100%;
}

#max-gust-today,
#month-gust {
  display: block !important;
  width: 100%;
  text-align: left !important;
  justify-self: stretch;
  align-items: initial;
  justify-content: flex-start;
}

.rain-card__footer-group {
  margin-top: auto;
  display: grid;
  gap: 0.4rem;
  padding-top: 0.15rem;
}

.rain-card__footer {
  margin: 0;
  padding-top: 0.3rem;
  text-align: center;
  line-height: 1.3;
}

.rain-card__normal {
  display: grid;
  gap: 0.34rem;
  padding: 0.48rem 0.58rem 0.52rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(47, 53, 58, 0.96), rgba(37, 43, 48, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.rain-card__normal-label,
.rain-card__normal-note {
  margin: 0;
  text-align: center;
}

.rain-card__normal-label {
  font-size: 0.83rem;
  line-height: 1.2;
  color: rgba(232, 241, 255, 0.88);
}

.rain-card__normal-summary {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #9fd4ff;
  white-space: nowrap;
  text-align: center;
}

.rain-card__normal-meter {
  padding-top: 0.42rem;
}

.rain-card__normal-track {
  position: relative;
  block-size: 0.55rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(102, 123, 160, 0.48) 0%,
      rgba(129, 145, 177, 0.42) 32%,
      rgba(112, 186, 224, 0.42) 68%,
      rgba(75, 129, 216, 0.44) 100%);
  overflow: visible;
}

.rain-card__normal-fill {
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #87d8ff 0%, #77c8ff 52%, #5ca9ff 100%);
  box-shadow: 0 0 12px rgba(103, 189, 255, 0.24);
}

.rain-card__normal-line {
  position: absolute;
  inset: -0.24rem auto -0.24rem 50%;
  inline-size: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.28);
}

.rain-card__normal-marker {
  position: absolute;
  inset: auto auto 50% 0;
  inline-size: 1rem;
  block-size: 1.18rem;
  transform: translate(-50%, 72%);
  color: #9be7ff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.38));
}

.rain-card__normal-marker-svg {
  inline-size: 100%;
  block-size: 100%;
}

.rain-card__normal-note {
  font-size: 0.84rem;
  line-height: 1.22;
  color: rgba(234, 243, 255, 0.88);
}

.outlook-card__body {
  display: grid;
  gap: 0.85rem;
}

.outlook-card__block {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  align-content: start;
  min-height: 0;
}

.outlook-cell {
  display: flex;
  justify-content: center;
  width: 100%;
}

.outlook-1h-bg,
.outlook-6h-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-inline-size: 5.9rem;
  min-height: 2rem;
  padding: 0.14rem 0.62rem;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.outlook-card__description {
  margin: 0;
  min-height: calc(1.25em * 3);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  inline-size: 100%;
  max-inline-size: 16ch;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.humidity-barometer-card__stats .dashboard-metric-row dd,
.rain-card__stats .dashboard-metric-row dd,
.almanac-card__stats .dashboard-metric-row dd,
.uv2-card__stats .dashboard-metric-row dd,
.pollen-card__stats .dashboard-metric-row dd {
  text-align: left;
  justify-self: start;
  width: 100%;
}

.rain-card__stats .dashboard-metric-row dd {
  text-align: right;
  justify-self: stretch;
}

.humidity-barometer-card__stats .dashboard-metric-row dd,
#humidity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
  gap: 0.15rem;
}

.almanac-card__stats .dashboard-metric-row dd,
.uv2-card__stats .dashboard-metric-row dd,
.pollen-card__stats .dashboard-metric-row dd {
  text-align: right;
  justify-self: stretch;
}

#aurora-index-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-inline-size: 9ch;
  min-block-size: 1.2em;
  white-space: nowrap;
}

.rekorder-cell {
  text-align: center;
}

.rekorder-bg {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: max-content;
  justify-content: center;
}

.almanac-card__stats dd {
  white-space: normal;
}

.moon-card__body {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.moon-phase-text,
.moon-card__illumination {
  margin: 0;
  white-space: normal;
  line-height: 1.25;
}

.moon-card__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
}

.moon-card__image-wrap .moon-phase-canvas {
  display: block;
  width: clamp(72px, 7vw, 86px);
  height: auto;
}

.moon-card__image-wrap .moon-phase-canvas {
  aspect-ratio: 1 / 1;
}

@media (min-width: 666px) {
  .moon-card__body {
    gap: 0.38rem;
  }

  .moon-card__image-wrap {
    margin-block: 0.12rem;
  }
}

.uv1-card__body {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
}

.uv1-card__stats {
  inline-size: calc(100% - 0.9rem);
  max-inline-size: 100%;
  margin-inline: auto;
  gap: 0.4rem;
}

.uv1-card__stats .dashboard-metric-row {
  grid-template-columns: max-content minmax(0, 1fr);
  inline-size: 100%;
}

.uv1-card__stats .dashboard-metric-row dt {
  text-align: left;
  justify-self: start;
}

.uv1-card__stats .dashboard-metric-row dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  justify-self: stretch;
  width: 100%;
}

#uv-level-value,
#pm25-value,
#pm10-value {
  min-inline-size: 8ch;
}

.uv2-card__stats,
.pollen-card__stats {
  gap: 0.4rem;
}

.nordlys-card__placeholder-row {
  visibility: hidden;
}

.weather-dashboard__webcam-card {
  margin: 0;
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  display: block;
  width: 100%;
  aspect-ratio: 841 / 473;
  min-height: clamp(180px, 34vw, 488px);
}

@media (min-width: 666px) {
  .weather-dashboard {
    padding: 0.75rem 1rem 0.85rem;
  }

  .weather-dashboard__header {
    margin-bottom: 4px;
  }

  .weather-dashboard__card {
    padding: 6px 8px 4px;
  }

  .weather-dashboard__card.pollen-card {
    padding: 6px 8px 4px;
  }

  .weather-dashboard__card-header {
    margin-bottom: 4px;
  }

  .weather-dashboard__card-body {
    gap: 0.5rem;
  }

  .temperature-card__body {
    gap: 0.68rem;
  }

  .temperature-card__metrics {
    gap: 0.46rem;
  }

  .temperature-card__stats .dashboard-metric-row {
    padding: 0.02rem 0 0.22rem;
  }

  .temperature-card__records {
    margin-top: 0.55rem;
  }

  .outlook-card__body {
    gap: 0.72rem;
  }

  .humidity-barometer-card__stats .dashboard-metric-row,
  .almanac-card__stats .dashboard-metric-row,
  .uv2-card__stats .dashboard-metric-row,
  .pollen-card__stats .dashboard-metric-row,
  .uv1-card__stats .dashboard-metric-row,
  .rain-card__stats .dashboard-metric-row,
  .wind-card__stats .dashboard-metric-row {
    padding-block: 0.14rem;
  }

  .moon-card__body {
    justify-content: center;
    gap: 0.28rem;
    padding-block: 0.04rem;
  }

  .moon-card__image-wrap {
    min-height: 82px;
  }
}

@media (max-width: 665px) {
  .weather-dashboard__grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    grid-template-rows: repeat(8, minmax(88px, auto));
    gap: 6px;
  }

  .temperature-card { grid-column: 1 !important; grid-row: 1 / span 3 !important; }
  .wind-card { grid-column: 2 !important; grid-row: 1 !important; }
  .rain-card { grid-column: 2 !important; grid-row: 2 / span 2 !important; }
  .humidity-barometer-card { grid-column: 1 !important; grid-row: 4 !important; }
  .outlook-card { grid-column: 2 !important; grid-row: 4 / span 2 !important; }
  .almanac-card { grid-column: 1 !important; grid-row: 5 !important; }
  .uv1-card { grid-column: 1 !important; grid-row: 6 !important; }
  .moon-card { grid-column: 2 !important; grid-row: 6 / span 2 !important; }
  .uv2-card,
  .pollen-card { grid-column: 1 !important; grid-row: 7 !important; }
  .weather-dashboard__webcam-card { grid-column: 1 / -1 !important; grid-row: 8 !important; }

  .temperature-card__summary {
    grid-template-columns: 64px minmax(0, 14ch);
    gap: 0.45rem;
    justify-content: center;
  }

  .temperature-card__weather-text,
  .outlook-card__description {
    min-height: calc(1.25em * 3);
  }

  .temperature-card__main {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 0.55rem;
  }

  .temperature-card__thermo {
    inline-size: 80px;
    min-inline-size: 80px;
  }

  .wind-card__top {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.45rem;
    justify-items: stretch;
  }

  .wind-card__live {
    width: auto;
  }

  .dashboard-metric-row {
    gap: 0.45rem;
  }

  .temperature-record-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .rain-card__footer {
    padding-top: 0.4rem;
  }

  .rain-card__footer-group {
    gap: 0.34rem;
  }

  .rain-card__normal {
    padding: 0.42rem 0.48rem 0.46rem;
  }

  .rain-card__normal-summary {
    gap: 0.55rem;
    font-size: 0.88rem;
  }

  .rain-card__normal-label,
  .rain-card__normal-note {
    font-size: 0.79rem;
  }

  .outlook-1h-bg,
  .outlook-6h-bg {
    min-inline-size: 5.1rem;
    min-height: 1.7rem;
    padding: 0.08rem 0.5rem;
    font-size: clamp(0.72rem, 2.4vw, 0.88rem);
  }
}

@media (max-width: 560px) {
  .weather-dashboard__grid {
    grid-template-rows:
      repeat(5, minmax(88px, auto))
      114px
      114px
      minmax(180px, auto);
  }

  .dashboard-metric-row {
    gap: 0.3rem;
  }

  .temperature-card__records {
    margin-top: 0.52rem;
  }

  .temperature-card .temperature-record-row {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.55rem;
    inline-size: 100%;
  }

  .temperature-card .temperature-record-row .temperature-record-label {
    justify-self: start;
  }

  .temperature-card .temperature-record-row .temperature-record-value {
    justify-self: stretch;
    min-inline-size: 0;
  }

  .uv1-card,
  .uv2-card,
  .pollen-card {
    align-self: start !important;
  }

  .uv1-card {
    grid-column: 1 !important;
    grid-row: 6 !important;
    min-height: 114px;
  }

  .moon-card {
    grid-column: 2 !important;
    grid-row: 6 / span 2 !important;
    align-self: stretch !important;
    height: calc(114px * 2 + 6px);
    min-height: calc(114px * 2 + 6px);
    padding: 6px;
  }

  .uv2-card,
  .pollen-card {
    min-height: 114px;
  }

  .moon-card .weather-dashboard__card-header {
    margin-bottom: 3px;
  }

  .moon-card__body {
    justify-content: center;
    gap: 0.34rem;
    padding-block: 0.15rem;
  }

  .moon-phase-text,
  .moon-card__illumination {
    line-height: 1.1;
    font-size: 0.92em;
  }

  .moon-card__image-wrap {
    min-height: 72px;
    margin-block: 0.05rem;
  }

  .moon-card__image-wrap .moon-phase-canvas {
    width: 68px;
  }

  .weather-dashboard__webcam-card {
    margin-top: -4px !important;
  }

  .outlook-1h-bg,
  .outlook-6h-bg {
    min-inline-size: 4.7rem;
    min-height: 1.55rem;
    padding: 0.06rem 0.42rem;
    font-size: 0.76rem;
  }

  .temperature-card__summary {
    grid-template-columns: 64px minmax(0, 14ch);
    gap: 0.4rem;
    justify-items: center;
    justify-content: center;
  }

  .temperature-card__main {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 0.45rem;
  }

  .temperature-card__thermo {
    inline-size: 74px;
    min-inline-size: 74px;
  }

  .temperature-card__metrics {
    display: grid;
    gap: 0.36rem;
  }

  .temperature-card__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.28rem;
  }

  .temperature-card__weather-text {
    width: 100%;
  }

  .temperature-card__temperature-copy {
    max-inline-size: none;
  }

  .outlook-card__body {
    gap: 0.65rem;
  }

  .outlook-card__description {
    min-height: calc(1.25em * 4);
    max-inline-size: 100%;
  }
}

@media (max-width: 390px) {
  .temperature-card .weather-dashboard__thermostat-image {
    width: 72px;
    height: auto;
  }

  .temperature-card__weather-text,
  .outlook-card__description {
    min-height: calc(1.25em * 4);
  }

  .dashboard-metric-row {
    gap: 0.2rem;
  }

  .dashboard-metric-row dt,
  .dashboard-metric-row dd {
    font-size: 0.96em;
  }

  .temperature-card__stats .dashboard-metric-row dt,
  .temperature-card__stats .dashboard-metric-row dd {
    font-size: 1em;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .moon-card__body {
    justify-content: center;
    gap: 0.38rem;
    padding-block: 0.1rem;
  }

  .moon-phase-text,
  .moon-card__illumination {
    line-height: 1.08;
  }

  .moon-card__image-wrap {
    min-height: 94px;
    margin-block: 0.05rem;
  }

  .moon-card__image-wrap .moon-phase-canvas {
    width: 80px;
  }
}

@media (max-width: 665px) and (orientation: portrait) {
  .rain-card__normal {
    display: none;
  }

  .rain-card__footer-group {
    gap: 0;
  }

  .weather-dashboard {
    padding: 0.45rem 0.6rem 0.5rem;
  }

  .weather-dashboard__header {
    margin-bottom: 4px;
    padding: 0.38rem;
  }

  .weather-dashboard__card {
    padding: 5px 7px 4px;
  }

  .weather-dashboard__card.pollen-card {
    padding: 4px 7px 4px;
  }

  .weather-dashboard__card-header {
    margin-bottom: 4px;
  }

  .weather-dashboard__card-body {
    gap: 0.46rem;
  }

  .temperature-card__body {
    gap: 0.58rem;
  }

  .temperature-card__metrics {
    gap: 0.4rem;
  }

  .temperature-card__records {
    margin-top: 0.45rem;
  }

  .outlook-card__body {
    gap: 0.58rem;
  }

  .moon-card__body {
    justify-content: center;
    gap: 0.24rem;
    padding-block: 0.02rem;
  }

  .moon-card__image-wrap {
    min-height: 82px;
  }
}

@media (max-width: 665px) {
  .weather-dashboard__card.pollen-card.season-card--active {
    grid-column: 1 !important;
    grid-row: 7 !important;
    align-self: start !important;
  }

  .weather-dashboard__webcam-card {
    grid-column: 1 / -1 !important;
    grid-row: 8 !important;
  }
}

@media (max-width: 665px) and (orientation: portrait) {
  .nordlys-card__placeholder-row {
    display: none;
  }

  .humidity-barometer-card,
  .almanac-card {
    height: 168px;
    min-height: 168px;
  }

  .uv1-card {
    padding: 5px 7px 1px !important;
    min-height: 114px !important;
  }

  .uv1-card .weather-dashboard__card-header {
    min-height: 2rem !important;
    margin-bottom: 4px !important;
    font-size: clamp(.82rem, 3.2vw, .96rem) !important;
  }

  .uv1-card .weather-dashboard__card-body {
    gap: 0.35rem !important;
  }

  .uv1-card__stats {
    gap: 0.22rem !important;
  }

  .uv1-card__stats .dashboard-metric-row dt,
  .uv1-card__stats .dashboard-metric-row dd {
    font-size: .93em !important;
    line-height: 1.15 !important;
  }

  .weather-dashboard__card.pollen-card.season-card--active {
    padding: 5px 7px 1px !important;
    min-height: 114px !important;
  }

  .uv2-card {
    padding-bottom: 1px !important;
  }

  .moon-card {
    padding-bottom: 0 !important;
  }

  .pollen-card .weather-dashboard__card-header {
    min-height: 2rem !important;
    margin-bottom: 4px !important;
    font-size: clamp(.82rem, 3.2vw, .96rem) !important;
  }

  .pollen-card .weather-dashboard__card-body {
    gap: 0.35rem !important;
  }

  .pollen-card__stats {
    gap: 0.22rem !important;
  }

  .pollen-card__stats .dashboard-metric-row dt,
  .pollen-card__stats .dashboard-metric-row dd {
    font-size: .93em !important;
    line-height: 1.15 !important;
  }
}