/* morgen.css — prijzen-pagina. Kop/structuur = Davis-format (zie STANDARD-FORMAT.md);
   glas-kaarten komen uit het gedeelde css/format.css (.card). Alleen page-specifiek hier. */

/* Embed-frame: exact de Davis/zon-referentie (20px boven, 24px zijkanten). */
.morgen-embed { padding-top: 20px; padding-left: 24px; padding-right: 24px; min-width: 0; }

/* ── Kop: basis (display/gap/titel 1.6rem/.head-ico) staat in /css/format.css —
      hier alleen align-items, onder-marge en kleur (patroon = zon.css). ── */
.morgen-headbar { align-items: center; margin: 0 0 16px; }
.morgen-hero-title { color: #e7ecf3; }
.morgen-hero-title .hl { color: #fbbf24; }
.morgen-head-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.82rem; color: #8a93a8; margin-top: 4px; }
.morgen-sep { color: #4a5366; }
.morgen-embed .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); flex: none; }
.morgen-embed .dot.is-off { background: #6b7280; box-shadow: none; }
.morgen-head-right { display: flex; align-items: center; gap: 12px; }
.morgen-locale { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.03); }
.morgen-locale-icon { font-size: 1.15rem; color: #fbbf24; }
.morgen-locale-place { font-size: 0.8rem; color: #cbd5e1; font-weight: 600; }
.morgen-locale-coords { font-size: 0.72rem; color: #8a93a8; }

/* ── Layout (glas-basis van .morgen-card staat in format.css) ── */
.morgen-main { display: flex; flex-direction: column; gap: 14px; }
.morgen-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.morgen-card-title { font-size: 1.02rem; color: #e7ecf3; display: flex; align-items: center; gap: 8px; margin: 0; }
.morgen-card-sub { font-size: 0.78rem; color: #8a93a8; font-weight: 400; }
.morgen-card-meta { font-size: 0.8rem; color: #8a93a8; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.morgen-ico { opacity: 0.9; }
/* Wachtstand: vandaag-kaart bovenaan zolang morgen ontbreekt */
.morgen-main.no-morgen #cardToday { order: -1; }
.morgen-wait { color: #cbd5e1; font-size: 0.9rem; margin: 2px 0 10px; }
.morgen-main.no-morgen .morgen-chartwrap-hero { height: 46px; opacity: 0.35; }

/* ── Canvas ── */
.morgen-chartwrap { position: relative; width: 100%; height: 120px; }
.morgen-chartwrap-hero { height: 190px; }
.morgen-chartwrap canvas { width: 100%; height: 100%; display: block; }
.morgen-range { font-size: 0.72rem; color: #8a93a8; text-align: right; margin-top: 6px; }

/* Kleurenlegenda onder de hero-grafiek (kleuren = prijsdrempels, = /zon en /ems) */
.morgen-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 0.74rem; color: #8a93a8; }
.morgen-leg-item { display: flex; align-items: center; gap: 6px; }
.morgen-leg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.morgen-leg-dot.is-low  { background: #3fb950; }
.morgen-leg-dot.is-mid  { background: #8b949e; }
.morgen-leg-dot.is-high { background: #f0883e; }
.morgen-leg-dot.is-neg  { background: #bc8cff; }
.morgen-legend-hint { color: #6b7280; font-style: italic; margin-left: auto; }
@media (max-width: 640px) { .morgen-legend-hint { margin-left: 0; width: 100%; } }

/* Tooltip (kleuren via JS .style — CSP-veilig) */
.morgen-tip[hidden] { display: none; }   /* display:flex hieronder mag het hidden-attribuut niet overrulen */
.morgen-tip { position: absolute; top: 0; transform: translate(-50%, -6px); display: flex; align-items: center; gap: 6px;
  background: rgba(13,17,23,0.95); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 9px;
  font-size: 0.74rem; color: #cbd5e1; pointer-events: none; white-space: nowrap; z-index: 5; }
.morgen-tip .tip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.morgen-tip .tip-pr { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Prijs-nu in de vandaag-kop (kleurklassen = /zon) */
.morgen-now-v { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #cbd5e1; white-space: nowrap; }
.morgen-now-v.is-low  { color: #4ade80; }
.morgen-now-v.is-mid  { color: #cbd5e1; }
.morgen-now-v.is-high { color: #fb923c; }
.morgen-now-v.is-neg  { color: #c4a3ff; }
.morgen-now-tag { font-size: 0.74rem; color: #8a93a8; }

/* ── Blokken & advies + gas ── */
.morgen-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
.morgen-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.morgen-pill { display: flex; flex-direction: column; gap: 2px; padding: 9px 13px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); min-width: 150px; }
.morgen-pill .pill-l { font-size: 0.7rem; color: #8a93a8; text-transform: uppercase; letter-spacing: 0.04em; }
.morgen-pill .pill-v { font-size: 0.92rem; color: #e7ecf3; font-variant-numeric: tabular-nums; }
.morgen-pill.is-low  { border-color: rgba(74,222,128,0.35); }
.morgen-pill.is-low  .pill-v { color: #4ade80; }
.morgen-pill.is-high { border-color: rgba(251,146,60,0.35); }
.morgen-pill.is-high .pill-v { color: #fb923c; }
.morgen-pill.is-neg  { border-color: rgba(196,163,255,0.4); }
.morgen-pill.is-neg  .pill-v { color: #c4a3ff; }
.morgen-advice-title { font-size: 0.78rem; color: #8a93a8; text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 8px; }
.morgen-advice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.morgen-advice li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #cbd5e1; min-height: 32px; }
.morgen-advice .adv-ico { font-size: 1.05rem; flex: none; }

/* Gas */
.morgen-gas-rows { display: flex; flex-direction: column; gap: 8px; }
.morgen-gas-row { display: flex; justify-content: space-between; align-items: baseline; }
.morgen-gas-row .gas-l { font-size: 0.8rem; color: #8a93a8; }
.morgen-gas-row .gas-v { font-size: 0.95rem; color: #e7ecf3; font-variant-numeric: tabular-nums; }
.morgen-gas-delta { font-size: 0.82rem; margin-top: 4px; text-align: right; }
.morgen-gas-delta.is-up   { color: #fb923c; }
.morgen-gas-delta.is-down { color: #4ade80; }
.morgen-gas-delta.is-flat { color: #8a93a8; }

/* ── Responsive (verplichte drie breakpoints) ── */
@media (max-width: 980px) {
  .morgen-row { grid-template-columns: 1fr; }
  .morgen-chartwrap-hero { height: 160px; }
}
@media (max-width: 640px) {
  .morgen-embed { padding-left: 0; padding-right: 0; }
  .morgen-hero-title { font-size: 1.35rem; }
  .morgen-headbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .morgen-head-right { width: 100%; }
  .morgen-locale { width: 100%; }
  .morgen-card { padding: 13px 14px; }
  .morgen-chartwrap { height: 100px; }
  .morgen-chartwrap-hero { height: 140px; }
  .morgen-pill { min-width: calc(50% - 5px); flex: 1; }
}
@media (max-width: 420px) {
  .morgen-chartwrap-hero { height: 120px; }
  .morgen-pill { min-width: 100%; }
  .morgen-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}