/* ============================================================
 * 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 ---------- */
.card-modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,8,25,0.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.card-modal{
  --card-accent: var(--gold);
  position:relative;
  width:100%; max-width:440px; max-height:85vh; overflow-y:auto;
  padding:28px 26px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  /* Same two-layer gradient-border technique as .card (see 05-today.css's base .card rule) --
     border fades from --card-accent at the top to the neutral --line-soft further down. Unlike
     .card, the fill layer here is flat var(--bg-panel) with no color-mix wash, per request. */
  background-image:
    linear-gradient(var(--bg-panel), var(--bg-panel)),
    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);
}
.card-modal h3{
  font-family:var(--font-display); font-size:22px; font-weight:600; margin:0 0 14px;
  color:var(--ink); text-transform:capitalize;
}
.card-modal p{font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 12px;}
.card-modal p:last-child{margin-bottom:0;}
.card-modal p em{color:var(--gold); font-style:normal; font-weight:600;}
.card-modal-close{
  position:absolute; top:14px; right:14px; width:28px; height:28px; padding:0;
  border-radius:50%; border:1px solid var(--line-soft); background:var(--bg-panel-2);
  color:var(--ink-dim); font-size:18px; line-height:1; cursor:pointer;
}
.card-modal-close:hover{border-color:var(--gold); color:var(--ink);}