/* ============================================================
 * Today view
 * Date nav, the card grid (sunrise/sunset/golden hour/twilight/moon/weather cards), and the definitions note box.
 * ============================================================ */
/* ---------- Today view ---------- */
.today-date-nav{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.today-date-nav .big-date{font-family:var(--font-display); font-size:22px; font-weight:600;}

.card-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
@media (max-width:900px){ .card-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:520px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--bg-panel); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:18px 18px 16px; position:relative; overflow:hidden;
}
.card .card-label{font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-faint); font-weight:600;}
.card .card-value{font-family:var(--font-mono); font-size:26px; margin-top:8px; color:var(--ink);}
.card .card-sub{font-size:12px; color:var(--ink-dim); margin-top:6px;}
.card.accent-sunrise{border-top:3px solid var(--coral);}
.card.accent-sunset{border-top:3px solid var(--coral);}
.card.accent-noon{border-top:3px solid var(--sky);}
.card.accent-golden{border-top:3px solid var(--gold);}
.card.accent-length{border-top:3px solid var(--sky);}
.card.accent-civil{border-top:3px solid var(--twilight-civil);}
.card.accent-nautical{border-top:3px solid var(--twilight-nautical);}
.card.accent-astro{border-top:3px solid var(--twilight-astro);}
.card.accent-moon{border-top:3px solid var(--moon-phase);}
.card.accent-weather{border-top:3px solid #7FD1AE;}

.card.card-wide{ grid-column: span 2; }
@media (max-width:900px){ .card.card-wide{ grid-column: span 2; } }
@media (max-width:520px){ .card.card-wide{ grid-column: span 1; } }

.note-box{
  margin-top:18px; font-size:12px; color:var(--ink-faint); background:var(--bg-panel);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:12px 14px; line-height:1.5;
}