/* ======================== TODAY VIEW ========================
   Twilight visual system. The trip happens somewhere that is at its best
   after dark, and half the real use is one-handed, at night, on a phone.
   One signal colour, used only to mean "this needs you". */

:root {
  --t-ink-900: #14101f;
  --t-ink-800: #1c1730;
  --t-ink-600: #362d55;
  --t-plum:    #5b3f72;
  --t-signal:      #e0632f;
  --t-signal-soft: #fdece4;
  --t-signal-line: rgba(224, 99, 47, .28);
  --t-muted: #8b8398;
  --t-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

body.mode-pro {
  --t-signal-soft: #35211a;
  --t-signal-line: rgba(255, 122, 69, .35);
}

/* ── Countdown hero ─────────────────────────────────────────── */
.t-hero {
  border-radius: 22px;
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(158deg, var(--t-ink-800), var(--t-ink-600) 55%, var(--t-plum));
}
/* Starfield — purely decorative, never carries meaning */
.t-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 26%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 72% 16%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.3px 1.3px at 88% 48%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 58% 82%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 30% 44%, rgba(255,255,255,.55), transparent);
}
.t-hero-in { position: relative; z-index: 1; }

.t-trip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.t-count { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; flex-wrap: wrap; }
.t-count b {
  font-family: var(--t-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -.03em;
}
.t-count span { font-size: 15px; color: rgba(255,255,255,.8); }
.t-dates { font-size: 13.5px; color: rgba(255,255,255,.72); }

.t-phase { display: flex; gap: 5px; margin-top: 18px; }
.t-phase i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.t-phase i.done { background: rgba(255,255,255,.55); }
.t-phase i.now  { background: var(--t-signal); box-shadow: 0 0 10px rgba(224,99,47,.7); }
.t-phase-label {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11px; color: rgba(255,255,255,.62);
}
.t-phase-label span:first-child { color: #fff; font-weight: 700; }

/* ── The one next action ────────────────────────────────────── */
.t-action {
  background: var(--t-signal-soft);
  border: 1px solid var(--t-signal-line);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 20px;
}
.t-action-clear {
  background: var(--card, transparent);
  border-color: var(--bdr);
}
.t-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--t-signal); margin-bottom: 9px;
}
.t-action-clear .t-tag { color: var(--sec); }
.t-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--t-signal);
  animation: t-pulse 2s ease-in-out infinite;
}
@keyframes t-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .t-pulse { animation: none; } }

.t-window {
  font-size: 12px; color: var(--sec); margin-bottom: 6px; font-weight: 600;
}
.t-when {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px;
  background: rgba(224,99,47,.12); color: var(--t-signal); font-weight: 700;
}
.t-action h3 {
  font-family: var(--t-display); font-weight: 400;
  font-size: 23px; letter-spacing: -.01em; line-height: 1.25;
  margin: 0 0 7px;
}
.t-action p { margin: 0 0 12px; font-size: 14px; color: var(--sec); line-height: 1.55; }
.t-action .t-more { font-size: 12.5px; opacity: .85; }
.t-cta { width: 100%; min-height: 46px; font-size: 15px; }

/* ── Day rail ───────────────────────────────────────────────── */
.t-rail-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 10px;
}
.t-rail-h b { font-size: 13px; font-weight: 700; }
.t-rail-h span { font-size: 12px; color: var(--sec); }

.t-day {
  display: flex; gap: 13px; align-items: stretch; width: 100%; text-align: left;
  padding: 13px; margin-bottom: 9px;
  border: 1px solid var(--bdr); border-radius: 14px;
  background: var(--card, transparent); color: inherit;
  font: inherit; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.t-day:hover { border-color: var(--sec); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.t-day:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }
.t-day-now { border-color: var(--t-signal); box-shadow: 0 0 0 1px var(--t-signal-line); }

.t-spine { width: 3px; border-radius: 2px; flex-shrink: 0; }
.t-date { width: 40px; flex-shrink: 0; text-align: center; }
.t-date b {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}
.t-date span {
  font-size: 10px; color: var(--sec); text-transform: uppercase; letter-spacing: .07em;
}
.t-body { flex: 1; min-width: 0; display: block; }
.t-park { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.t-meta {
  display: block; font-size: 12.5px; color: var(--sec); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-chips { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.t-chip {
  font-size: 10.5px; font-weight: 650; padding: 3px 8px; border-radius: 20px;
  background: var(--gold-light, rgba(0,0,0,.05)); color: var(--sec);
}
.t-chip-alert { background: var(--t-signal-soft); color: var(--t-signal); }

.today-empty { color: var(--sec); font-size: 14px; padding: 24px 0; text-align: center; }

/* ── Desktop: give the rail room ────────────────────────────── */
@media (min-width: 900px) {
  #todayContent { max-width: 720px; }
  .t-count b { font-size: 76px; }
  .t-hero { padding: 30px; }
}


/* The action CTA is the signal, not the generic primary button. */
.t-cta {
  background: var(--t-signal) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 650;
  transition: filter .2s ease;
}
.t-cta:hover { filter: brightness(1.07); }
.t-cta:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 3px; }

/* The view title is lowercased by the themes; Today is a proper noun here. */
#view-today ~ * #viewTitle, body #viewTitle { text-transform: none; }


/* ── Never done yet ─────────────────────────────────────────── */
.sg-intro { font-size: 13px; color: var(--sec); margin: 0 0 12px; line-height: 1.5; }
.sg-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sg-grid { grid-template-columns: 1fr 1fr; } }

.sg-card {
  border: 1px solid var(--bdr); border-radius: 14px; padding: 13px 15px;
  background: var(--card, transparent);
}
.sg-blocked { opacity: .55; }
.sg-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.sg-kind {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sec);
}
.sg-park { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.sg-name { font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.sg-meta { font-size: 12px; color: var(--sec); margin-top: 2px; }
.sg-why {
  font-size: 12px; color: var(--t-signal); margin-top: 7px; font-weight: 600;
}
.sg-blocked .sg-why { color: var(--sec); }