/* Klima "Aktuell & Prognose" — standalone styles for the forecast section.
   Self-contained: no dependency on style.css internals; matches its visual language
   (warm light palette, white cards, cream sub-cards). Scoped under #forecast. */

#forecast { margin-bottom: 0.16rem; }
#forecast .fc-title-meta { font-weight: 400; color: #7a7a72; font-size: 0.78rem; }
#forecast .fc-stand { margin: 0.08rem 0 0 0.02rem; color: #8a887e; font-size: 0.72rem; font-weight: 500; }

/* info icon + provenance tooltip */
#forecast .fc-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-left: 0.35rem; border-radius: 50%;
  border: 1px solid #c7c5bb; color: #8a887e; font-size: 0.7rem; font-weight: 700;
  cursor: help; user-select: none; vertical-align: middle;
}
#forecast .fc-info:hover, #forecast .fc-info:focus { background: #ebe9e1; color: #555; outline: none; }
#forecast .fc-info.has-err { border-color: #e3a08f; color: #b23b1e; background: #fbeae5; }
#forecast .fc-tip {
  position: fixed; top: 0; left: 0; z-index: 50;
  width: max-content; max-width: min(340px, calc(100vw - 1.5rem)); padding: 0.6rem 0.75rem;
  background: #2b2b28; color: #f3f1ea; border-radius: 7px;
  font-size: 0.72rem; font-weight: 400; line-height: 1.45; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
#forecast .fc-tip.left { left: 0; right: auto; }
#forecast .fc-info:hover .fc-tip, #forecast .fc-info:focus .fc-tip { opacity: 1; visibility: visible; }
/* two columns: label left (no wrap), value right (no wrap) — width follows widest row */
#forecast .fc-tip .row { display: flex; justify-content: space-between; gap: 1.2rem; white-space: nowrap; }
#forecast .fc-tip .row .k { color: #b9b6ac; }
#forecast .fc-tip .err { color: #f3b0a0; margin-top: 0.3rem; }
#forecast .fc-tip hr { border: none; border-top: 1px solid #4a4843; margin: 0.35rem 0; }
@media (max-width: 560px) {
  #forecast .fc-tip {
    width: auto; max-width: none;
  }
}

/* current conditions panel */
#forecast .fc-now {
  display: grid;
  /* col 1 (current conditions) spans exactly the "Heute" chart column; col 2 (metrics) then
     begins at the Heute/Morgen chart boundary and runs to the panel's right edge.
     margin-left = --fc-today-left aligns col 1's start under "Heute". */
  grid-template-columns: calc(var(--fc-tomorrow-left, 12rem) - var(--fc-today-left, 2rem)) minmax(0, 1fr);
  gap: 0.32rem 0;
  align-items: center;
  padding: 0;
  /* right margin = --fc-chart-right ends the metrics at the plot's right edge, left of the
     mm/h scale (same inset the day cards use). */
  margin: -2.08rem var(--fc-chart-right, 2.25rem) 0.08rem var(--fc-today-left, 2rem);
}
#forecast .fc-now-main { display: flex; align-items: center; gap: 0.5rem; }
#forecast .fc-now-icon { font-size: 2.2rem; line-height: 1; }
#forecast .fc-now-temp { font-size: 2.05rem; font-weight: 700; color: #1c1c1a; line-height: 1; }
#forecast .fc-now-sub { font-size: 0.74rem; color: #7a7a72; margin-top: 0.18rem; }
#forecast .fc-now-cond { font-size: 0.82rem; color: #444; font-weight: 600; }

#forecast .fc-metrics {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}
#forecast .fc-metric { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
#forecast .fc-metric .k { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9a9a90; }
#forecast .fc-metric .v { display: block; font-size: 0.92rem; font-weight: 600; color: #1c1c1a; }
#forecast .fc-metric .v small { display: inline; margin-left: 0.12rem; font-size: 0.66rem; font-weight: 500; color: #8a887e; white-space: nowrap; }
#forecast .fc-metric.day-sum {
  padding-left: 0.45rem;
  border-left: 2px solid #ded6bd;
  background: linear-gradient(90deg, rgba(218,204,164,0.16), rgba(218,204,164,0));
}
#forecast .fc-metric.day-sum .k { color: #8f8260; }

/* anomaly chip */
#forecast .fc-anom { display: inline-block; padding: 0.04rem 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
#forecast .fc-now-sub .fc-anom { display: table; margin-top: 0.12rem; }
#forecast .fc-anom.warm { background: #fbe4dd; color: #b23b1e; }
#forecast .fc-anom.cold { background: #dfeaf6; color: #2563a0; }
#forecast .fc-anom.flat { background: #eceae2; color: #7a7a72; }

/* hourly chart */
/* Legend renders inside the canvas, near its bottom edge; a modest bottom margin keeps
   it from crowding the day cards without inflating page height. */
#forecast .fc-hourly-wrap { position: relative; height: 224px; margin: 0.22rem 0 0.4rem; }
#forecast .fc-daily-wrap { display: none; position: relative; height: 155px; margin: 0.2rem 0 0.42rem; }

/* day cards */
#forecast .fc-days {
  display: grid;
  grid-template-columns: repeat(var(--fc-day-count, 8), minmax(0, 1fr));
  gap: 0;
  margin: 0 var(--fc-chart-right, 2.25rem) 0 var(--fc-chart-left, 2rem);
}
#forecast .fc-day {
  width: calc(100% - 0.18rem);
  justify-self: center;
  border: 1px solid #deded5;
  border-radius: 9px;
  background: linear-gradient(170deg, #fafaf6, #f4f3ec);
  padding: 0.34rem 0.55rem 0.37rem;
  text-align: center;
  min-height: 5.65rem;
}
#forecast .fc-day .d { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #605d55; font-weight: 600; }
#forecast .fc-day.measured {
  background: linear-gradient(170deg, #ffffff, #f8f8f6);
  border-color: #e4e3dc;
}
#forecast .fc-day.measured .d,
#forecast .fc-day.measured .ic {
  color: #66645c;
}
#forecast .fc-day.measured .cond {
  color: #6f6d66;
}
/* days beyond the AROME high-res window (ECMWF blend) — subtly de-emphasised */
#forecast .fc-day.coarse { background: linear-gradient(170deg, #f7f6f1, #eeede6); border-style: dashed; }
#forecast .fc-day.today {
  background: linear-gradient(170deg, #efede4, #e5e3d8);
  border-color: #b9b4a2;
  box-shadow: inset 0 0 0 1px #cfcaba;
}
#forecast .fc-day .ic { font-size: 1.7rem; line-height: 1.2; }
#forecast .fc-day .cond { font-size: 0.66rem; color: #6a6a62; line-height: 1.2; margin: 0.05rem 0 0.12rem; min-height: 1.5em; }
#forecast .fc-day .tmax { font-size: 1.05rem; font-weight: 700; color: #1c1c1a; }
#forecast .fc-day .tmin { font-size: 0.9rem; color: #7a7a72; }
#forecast .fc-day .extra { font-size: 0.66rem; color: #7a7a72; margin-top: 0.2rem; line-height: 1.35; }
#forecast .fc-day .rain { color: #2563a0; }

#forecast .fc-foot { font-size: 0.66rem; color: #9a9a90; margin-top: 0.28rem; line-height: 1.35; }
#forecast .fc-empty { font-size: 0.8rem; color: #7a7a72; padding: 0.6rem 0; }

@media (max-width: 700px) {
  #forecast { display: block; }
  #forecast .fc-now {
    grid-template-columns: auto 1fr;
    padding: 0.2rem 0 0.5rem;
    border-bottom: 1px solid #ece9e0;
    margin: 0.2rem 0 0.55rem;
  }
  /* many metric tiles can't fit one nowrap row on a phone — let them wrap */
  #forecast .fc-metrics { flex-wrap: wrap; gap: 0.45rem 1rem; }
  #forecast .fc-days {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.45rem;
    margin-inline: 0;
  }
  #forecast .fc-day {
    width: auto;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  #forecast .fc-now { grid-template-columns: 1fr; }
  #forecast .fc-now-temp { font-size: 2.1rem; }
}