/* ── Hørsholmvejr — 7-døgns day cards (reusable component) ────────────────────
   Styles for the day-card strip: grid/scroll, tier seam, day card, revision
   arrows, confidence fade and agreement chips. Pairs with the src/views
   partial forecast-days.php and App\Forecast\DayCards. Lifted verbatim from
   prognose.php 19-07 so the component renders identically wherever it is
   included (prognose fuld, forsidestriben kompakt) — one source, no copies.
   All colour goes through the CSS tokens in tokens.css (light/dark aware). */

/* ── day grid ─────────────────────────────────────────────────────────────────
   padding-top gives the seam chip headroom — needed on mobile, where the
   scroll container clips vertical overflow */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding-top:14px}
.day-col{display:flex;flex-direction:column;gap:0;position:relative;min-width:0}

/* ── tier seam: divider + chip in ONE unbroken row ────────────────────────────
   slim vertical divider in the grid gap, before the first global-only day */
.day-col.seam-start::before{content:"";position:absolute;top:2px;bottom:2px;left:-5px;
  width:2px;border-radius:2px;background:rgba(62,155,108,.55);z-index:1}
/* roster-chips (review 19-07): venstrestillede sektions-etiketter over rækken —
   dag 1–3 fra første korts venstrekant, dag 4–7 med venstrekant PÅ skilleren
   (ikke centreret hen over kortene som den gamle seam-chip) */
.roster-chip{position:absolute;top:-12px;left:0;z-index:6;
  white-space:nowrap;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.06em;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;cursor:help}
.roster-chip.roster-glob{left:-5px;color:#3E9B6C;border-color:rgba(62,155,108,.45)}
/* tone shift after the seam: global-layer cards get a green top border + a
   faintly damped surface — visible side by side, not "disabled" */
.day.tier-glob{border-top:2px solid rgba(62,155,108,.40);
  background:color-mix(in srgb, var(--surface) 88%, var(--paper))}

/* ── day card ───────────────────────────────────────────────────────────────── */
.day{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 7px 9px;text-align:center;position:relative;display:flex;flex-direction:column;gap:3px;
  height:100%}
.day.is-today{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.day .dn{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.day .dd{font-family:var(--mono);font-size:9.5px;color:var(--muted);opacity:.7}
.day .wi{font-size:22px;margin:5px 0 3px;line-height:1}
/* maks-temp: tydeligt tungere end min — hierarkiet maks > min er umiskendeligt
   (kort-tuning 19-07: 16→19px; nedbør/vind 10→11px; chip 9,5→11px) */
.day .hi{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.day .lo{color:var(--muted);font-size:12.5px;font-weight:600}
/* regnlinjen: vigtigst efter temperaturen (review 19-07) — samme størrelse som
   min-temp (12,5px), fed. Ombryder kun mellem mængde og procent (NBSP i mængden,
   sat i DayCards::rainSpanStr) — ellipsis-klip skjulte info og er fjernet */
.day .rain{font-family:var(--mono);font-size:12.5px;font-weight:700;color:#2E6FB0;
  margin-top:3px;min-height:16px;line-height:1.3}
.day .rain .pp{color:var(--muted);font-weight:400;font-size:11px}
.day .wind{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:1px}

/* ── revision arrows (Feature A) — quiet by default, only past threshold ────── */
.rev{font-size:8px;margin-left:3px;vertical-align:2px;cursor:help}
.rev-up{color:var(--horizon)}
.rev-down{color:var(--rain)}

/* ── confidence fade (Feature C): days 5–7 tone down secondary elements —
     temperatures stay fully readable. Nedbør + vind holdes bevidst UDENFOR: deres
     farve/mætning skal matche dag 1–4 (review 19-07); den stiplede skiller +
     roster-glob-chippen bærer usikkerhedssignalet. ── */
.day.conf-fade .wi,.day.conf-fade .dd,
.day.conf-fade .ag{opacity:.68;filter:saturate(.75)}

/* ── agreement chips — tre adskilte tilstande (farve + prik-stil) ─────────────
   Farver via tokens (--agree-*, lys/mørk, WCAG AA); prikken er den redundante
   kanal for farveblinde: fyldt (enige) / halvfyldt venstre (nogenlunde) /
   hul ring (uenige). Chip-form som chip-spiken: »enige · 6« (11px) — lagets
   sammensætning bor i title/popover + roster-chipsene. Evt. wrap kun mellem
   tilstandsord og »· N«-halen (NBSP, sat i DayCards::agreeChip). */
.ag{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.25;
  padding:2px 7px;border-radius:5px;margin-top:4px;cursor:help}
.day .ag{align-self:center}
/* the fuld-variant day-card chip is a real <button> (opens the per-model popover) */
button.ag{border:0;font-family:var(--mono);cursor:pointer}
button.ag:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ag .ag-dot{width:8px;height:8px;border-radius:50%;flex:none;box-sizing:border-box}
.ag-tight{background:var(--agree-ok-bg);color:var(--agree-ok)}
.ag-tight .ag-dot{background:currentColor}
.ag-moderate{background:var(--agree-mid-bg);color:var(--agree-mid)}
.ag-moderate .ag-dot{border:1.5px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50%)}
.ag-wide{background:var(--agree-bad-bg);color:var(--agree-bad)}
.ag-wide .ag-dot{border:1.5px solid currentColor;background:transparent}

/* ── responsive: mobil — ONE horizontal snap-scroll strip — all 7 days stay
     reachable and the seam (divider + chip) scrolls along between the cards. */
@media(max-width:820px){
  .days{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px}
  /* 116→132→150px: plads til hele nedbørslinjen (mængde · %) på ÉN linje uden
     at røre PC-typografien — kun mobilkortet er bredere (kort-tuning 19-07). */
  .day-col{flex:0 0 150px;scroll-snap-align:start}
  /* nedbørslinjen holdes samlet på mobil (mængde + procent), ingen grim wrap.
     PC beholder 12,5px; mobil trimmer minimalt for at rumme det brede tilfælde. */
  .day .rain{white-space:nowrap;font-size:11.5px}
  .day .rain .pp{font-size:10.5px}
}