/* De drie dagkaarten bovenaan /weekend: dag, weerpictogram, millimeters en
   een metarij. Apart bestand omdat evenementen.css over de grens van 300
   regels ging; de lijst met evenementen staat daar. */

/* Weerwidget. Eén kaart met drie kolommen, niet drie losse kaarten: de drie
   dagen zijn één meting die je met elkaar vergelijkt, en dat leest als één
   instrument. Drie zwevende vlakken in verschillende kleuren lezen als drie
   waarschuwingen.
   De statuskleur zit daarom in een streep bovenaan de kolom en in het cijfer
   zelf, niet in een vulling. Kleur als markering, niet als achtergrond. */
.dagen {
  margin-bottom: 1.5rem;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}
.dagen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.dagkaart {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.8rem 0.7rem 0.7rem;
}

/* De streep bovenaan draagt het oordeel van die dag. Drie pixels is genoeg om
   te zien, te weinig om te schreeuwen. */
.dagkaart { position: relative; }
.dagkaart::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dagkleur, var(--border-strong));
}
/* Twee kleuren per oordeel, en dat is geen slordigheid. De rauwe --geel is
   gemaakt om een vlak te vullen en is op wit te licht om te lezen; de
   --geel-text-variant is daarvoor gemaakt. Dus: de streep krijgt de volle
   kleur, het cijfer en het pictogram de leesbare. */
.dagkaart.k-groen { --dagkleur: var(--groen); --dagtekst: var(--groen-text); }
.dagkaart.k-geel { --dagkleur: var(--geel); --dagtekst: var(--geel-text); }
.dagkaart.k-oranje { --dagkleur: var(--oranje); --dagtekst: var(--oranje-text); }
.dagkaart.k-rood { --dagkleur: var(--rood); --dagtekst: var(--rood-text); }

.dagkaart-naam { font-family: var(--kop); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.015em; text-shadow: var(--tekstschaduw); }
.dagkaart-datum { font-size: 0.68rem; color: var(--text-muted); }
/* Het pictogram staat gecentreerd terwijl de rest van de kolom links uitlijnt.
   Een tekening is geen tekst en hoeft dus niet op de tekstas te staan; los
   gecentreerd geeft het lucht en leest de kolom rustiger. */
.dagkaart-icoon {
  display: block;
  align-self: center;
  margin: 0.5rem 0 0.25rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--dagtekst, var(--text-muted));
}
.weericoon { display: block; }
/* Alleen deze delen wijken af van de kaartkleur; de wolk blijft currentColor
   en kleurt dus mee met het oordeel van die dag. */
.weericoon .wi-zon { stroke: var(--wi-zon); }
.weericoon .wi-nat { stroke: var(--wi-nat); }
.weericoon .wi-bliksem { fill: var(--wi-bliksem); stroke: var(--wi-bliksem); }

/* Het cijfer is de tekening. De eenheid hoort erbij en staat dus in dezelfde
   kleur op halve grootte, niet als los grijs woordje erachter. */
.dagkaart-mm { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; color: var(--dagtekst, var(--text)); text-shadow: var(--tekstschaduw); }
.dagkaart-mm small { font-size: 0.5em; font-weight: 600; margin-left: 0.15em; letter-spacing: 0; }
.dagkaart-weer { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }

/* Metarij: label zacht links, waarde vet rechts. Gelijke kolommen, dus de
   getallen staan over de drie dagen heen op één lijn. */
.dagkaart-meta {
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15rem;
  font-size: 0.68rem;
}
.dagkaart-meta li { display: flex; justify-content: space-between; gap: 0.3rem; }
.dagkaart-meta abbr { text-decoration: none; color: var(--text-muted); }
.dagkaart-meta strong { font-weight: 600; }

.dagen-bij {
  margin: 0;
  padding: 0.55rem 0.8rem 0.65rem;
  background: var(--chip);
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
}