/* ============================================================
 * 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; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:18px;}
.today-date-nav .big-date{font-family:var(--font-display); font-size:22px; font-weight:600; min-width:0;}

.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{
  --card-accent: var(--line-soft);
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--card-accent) 12%, var(--bg-panel)), var(--bg-panel) 45%),
    linear-gradient(to bottom, var(--card-accent), var(--line-soft) 70%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border:1px solid transparent; 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[data-def-key], .card[data-nav-target]{cursor:pointer; transition:transform 0.12s ease, box-shadow 0.12s ease;}
.card[data-def-key]:hover, .card[data-def-key]:focus-visible,
.card[data-nav-target]:hover, .card[data-nav-target]:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.card[data-def-key]:focus-visible, .card[data-nav-target]:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.card[data-def-key]::after{
  content:"?"; position:absolute; top:12px; right:14px; width:16px; height:16px;
  border-radius:50%; border:1px solid var(--ink-faint); color:var(--ink-faint);
  font-size:10px; line-height:14px; text-align:center; opacity:0.55;
}
.card[data-nav-target]::after{
  content:"→"; position:absolute; top:12px; right:14px; width:16px; height:16px;
  color:var(--ink-faint); font-size:13px; line-height:16px; text-align:center; opacity:0.6;
}
.card.accent-sunrise{ --card-accent:var(--coral); }
.card.accent-sunset{ --card-accent:var(--coral); }
.card.accent-noon{ --card-accent:var(--sky); }
.card.accent-golden{ --card-accent:var(--gold); }
.card.accent-bluehour{ --card-accent:var(--blue-hour); }
.card.accent-length{ --card-accent:var(--sky); }
.card.accent-civil{ --card-accent:var(--card-twilight-civil); }
.card.accent-nautical{ --card-accent:var(--card-twilight-nautical); }
.card.accent-astro{ --card-accent:var(--card-twilight-astro); }
.card.accent-moon{ --card-accent:var(--moon-phase); }
.card.accent-daytime{ --card-accent:var(--sky); }
.card.accent-nighttime{ --card-accent:var(--moon-phase); }
.card.accent-truenight{ --card-accent:var(--moon-phase); }
.card.accent-solarmidnight{ --card-accent:var(--card-twilight-nautical); }
.card.accent-weather{ --card-accent:#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; } }

/* Matches the weather card's accent color (--card-accent on .accent-weather, also used raw
   elsewhere for humidity bars/labels) so "currently active" reads as the same color everywhere. */
.card-sub .happening-now{ color:var(--now-green); font-weight:600; }

.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;
}

/* ---------- Card-info modal ---------- */