/* ============================================================
   DANI & CODY'S WEDDING WEATHER — styles.css
   Mobile-first · Wedding theme · Serious Mode support
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  /* Palette */
  --color-bg:         #faf8f5;
  --color-card:       #ffffff;
  --color-primary:    #c8956c;   /* warm copper/gold */
  --color-accent:     #8b5e7a;   /* dusty rose */
  --color-text:       #2d2620;
  --color-muted:      #7a7068;
  --color-border:     #ece8e2;

  /* Status colours */
  --color-dry:        #3a9e6b;
  --color-dry-bg:     #e8f7f0;
  --color-light-rain: #d4890a;
  --color-light-rain-bg: #fef3e0;
  --color-rain:       #d05a2a;
  --color-rain-bg:    #fdeee7;
  --color-stormy:     #b92828;
  --color-stormy-bg:  #fde8e8;

  /* Risk highlight (timeline rows) */
  --color-risk-row:   #fff3ea;
  --color-risk-border:#e07a3a;

  /* Sizing */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-elevated: 0 4px 24px rgba(0,0,0,0.12);

  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--color-accent); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

img { max-width: 100%; display: block; }

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ── 3. CONFETTI CANVAS & UMBRELLA CONTAINER ──────────────── */
#confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  width: 100%;
  height: 100%;
}

#umbrella-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.floating-umbrella {
  position: absolute;
  bottom: -50px;
  animation: floatUp linear infinite;
  opacity: 0.55;
  user-select: none;
}

@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) rotate(20deg); opacity: 0; }
}

/* ── 4. STICKY MINI STATUS BAR ────────────────────────────── */
.sticky-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(250,248,245,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  /* Show when .is-visible is added by JS */
}

.sticky-bar.is-visible { transform: translateY(0); }

.sticky-sep { color: var(--color-border); }

.sticky-refresh-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--color-text);
  min-height: 32px;
  transition: background 0.15s;
}
.sticky-refresh-btn:hover { background: var(--color-border); }

/* ── 5. SITE HEADER ───────────────────────────────────────── */
.site-header {
  position: relative;
  padding: 20px 16px 28px;
  text-align: center;
  background: linear-gradient(160deg, #fffdf9 0%, #fef5ee 60%, #fdf0f6 100%);
  border-bottom: 1px solid var(--color-border);
}

.header-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.icon-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--color-text);
  min-height: 44px;
  min-width: 44px;
  font-weight: 500;
  transition: background 0.15s, box-shadow 0.15s;
}
.icon-btn:hover { background: var(--color-bg); box-shadow: var(--shadow-card); }
.icon-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.mode-label { font-size: 0.78rem; }

.header-rings {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.couple-names {
  font-size: clamp(1.8rem, 8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.venue-info {
  font-size: 0.95rem;
  color: var(--color-muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.tagline {
  font-size: 0.88rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ── 6. MAIN LAYOUT ───────────────────────────────────────── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 14px 32px;
}

section { margin-bottom: 24px; }

/* ── 7. CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  border: 1px solid var(--color-border);
}

/* ── 8. SECTION TITLES ────────────────────────────────────── */
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.joke-badge {
  font-size: 0.7rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2px 8px;
}

/* ── 9. STATUS CHIP ───────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.status-chip[data-status="dry"] {
  background: var(--color-dry-bg);
  color: var(--color-dry);
}
.status-chip[data-status="light-rain"] {
  background: var(--color-light-rain-bg);
  color: var(--color-light-rain);
}
.status-chip[data-status="rain"] {
  background: var(--color-rain-bg);
  color: var(--color-rain);
}
.status-chip[data-status="stormy"] {
  background: var(--color-stormy-bg);
  color: var(--color-stormy);
}

/* ── 10. HERO CARD ────────────────────────────────────────── */
.hero-card { padding: 22px; }

.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.last-updated {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.hero-main-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.weather-icon-lg {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.temp-big {
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
}

.feels-like {
  font-size: 0.88rem;
  color: var(--color-muted);
  display: block;
  margin-top: 2px;
}

.condition-text {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 18px;
  font-style: italic;
}

/* Stats grid — 2 col on small, 3 col on wider */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 360px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

.stat-cell {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.stat-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ── 11. BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  font-family: var(--font-main);
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { opacity: 0.88; }

.btn-secondary {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-border); }

.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { background: var(--color-bg); }

.btn-link {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 4px 0;
  cursor: pointer;
  min-height: 44px;
}

.refresh-btn { width: 100%; margin-top: 4px; }

.refresh-spin {
  display: inline-block;
  transition: transform 0.3s;
}
.refreshing .refresh-spin { animation: spin 1s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 12. HOURLY TIMELINE ──────────────────────────────────── */
.timeline-header {
  display: grid;
  grid-template-columns: 55px 44px 1fr 48px 46px 1fr;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
}

.timeline-row {
  display: grid;
  grid-template-columns: 55px 44px 1fr 48px 46px 1fr;
  gap: 4px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 0.88rem;
  transition: background 0.15s;
}

.timeline-row.is-now {
  border-color: var(--color-primary);
  background: #fff9f5;
  font-weight: 600;
}

.timeline-row.is-risk {
  background: var(--color-risk-row);
  border-color: var(--color-risk-border);
}

.timeline-row.is-now.is-risk {
  background: linear-gradient(90deg, #fff9f5, var(--color-risk-row));
}

.tl-time { font-weight: 700; font-size: 0.82rem; color: var(--color-text); }
.tl-time .now-dot { color: var(--color-primary); font-size: 0.65rem; display: block; }

.tl-icon { width: 32px; height: 32px; }

.tl-temp { font-weight: 600; }

.tl-rain {
  font-weight: 700;
  color: var(--color-rain);
}
.tl-rain.low { color: var(--color-dry); }
.tl-rain.medium { color: var(--color-light-rain); }

.tl-precip { font-size: 0.8rem; color: var(--color-muted); }

.tl-wind { font-size: 0.78rem; color: var(--color-muted); line-height: 1.3; }

/* ── 13. WEDDING EVENT CARDS ──────────────────────────────── */
.event-card {
  border-radius: var(--radius-md);
  padding: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-card);
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.event-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.event-emoji { font-size: 1.5rem; }

.event-name-time { flex: 1; }
.event-name { font-size: 1rem; font-weight: 700; }
.event-time { font-size: 0.82rem; color: var(--color-muted); }

.event-status-chip { font-size: 0.8rem; padding: 4px 10px; }

.event-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.event-stat {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  border: 1px solid var(--color-border);
}

.event-stat .stat-label { font-size: 0.68rem; }
.event-stat .stat-val { font-size: 0.92rem; }

/* Umbrella readiness meter */
.umbrella-meter { margin-bottom: 10px; }
.meter-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  margin-bottom: 5px;
}
.meter-title { font-weight: 600; }
.meter-score { font-weight: 700; }

.meter-track {
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.meter-fill.level-low    { background: var(--color-dry); }
.meter-fill.level-medium { background: var(--color-light-rain); }
.meter-fill.level-high   { background: var(--color-rain); }
.meter-fill.level-max    { background: var(--color-stormy); }

.event-oneliner {
  font-size: 0.84rem;
  color: var(--color-muted);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.event-oneliner.fun-only { /* hidden in serious mode */ }

/* ── 14. DRY WINDOW CARD ──────────────────────────────────── */
.dry-window-card { text-align: center; padding: 24px; }

.dry-window-time {
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 800;
  color: var(--color-dry);
  margin: 8px 0;
}

.dry-window-score {
  display: inline-block;
  font-size: 0.8rem;
  background: var(--color-dry-bg);
  color: var(--color-dry);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.dry-window-reason {
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* ── 15. HAIR SURVIVAL INDEX ──────────────────────────────── */
.hair-card { text-align: center; padding: 24px; }

.hair-score-big {
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 900;
  line-height: 1;
  margin: 8px 0;
}

.hair-label {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.hair-description {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.hair-meter { max-width: 280px; margin: 0 auto 12px; }
.hair-meter .meter-track { height: 10px; }

.hair-breakdown {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.hair-factor {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}

/* ── 16. STATE WRAPPERS (loading, error, no-key) ──────────── */
.state-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  gap: 14px;
  min-height: 200px;
}

.state-card {
  padding: 32px 24px;
  max-width: 360px;
  text-align: center;
}

.state-icon { font-size: 2.8rem; margin-bottom: 4px; }
.state-card h2 { margin-bottom: 8px; }
.state-card p { color: var(--color-muted); margin-bottom: 16px; font-size: 0.9rem; }

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── 17. CACHED BANNER ────────────────────────────────────── */
.cached-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-light-rain-bg);
  border: 1px solid #f5c97a;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  color: #7a5200;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cached-retry-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #d4890a;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  color: #7a5200;
  min-height: 32px;
}

/* ── 18. API KEY MODAL ────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  /* On mobile, modal slides up from bottom */
}

@media (min-width: 480px) {
  .modal-overlay { align-items: center; padding: 16px; }
}

.modal-box {
  background: var(--color-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 20px 36px;
  width: 100%;
  max-width: 480px;
  animation: slideUp 0.28s ease;
}

@media (min-width: 480px) {
  .modal-box {
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    animation: fadeScale 0.22s ease;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-box h2 { margin-bottom: 8px; }
.modal-box p { font-size: 0.88rem; color: var(--color-muted); margin-bottom: 16px; }

.key-input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font-mono);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.key-input:focus { border-color: var(--color-primary); }

.key-error {
  font-size: 0.8rem;
  color: var(--color-stormy);
  margin-bottom: 12px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.modal-actions .btn { flex: 1; min-width: 120px; }

.clear-key-btn { display: block; text-align: center; width: 100%; }

/* ── 19. FOOTER ───────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  font-size: 0.82rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}
.footer-credit { margin-top: 4px; }

/* ── 20. SERIOUS MODE OVERRIDES ───────────────────────────── */
body.serious-mode .fun-only   { display: none !important; }
body.serious-mode .fun-section { display: none !important; }
body.serious-mode #umbrella-container { display: none !important; }
body.serious-mode #confetti-canvas { display: none !important; }
body.serious-mode .joke-badge { display: none !important; }
body.serious-mode .event-oneliner { display: none !important; }

/* When serious mode toggle is active */
body.serious-mode .serious-off-icon { display: none !important; }
body.serious-mode .serious-on-icon  { display: inline !important; }

/* ── 21. DESKTOP ENHANCEMENTS ─────────────────────────────── */
@media (min-width: 600px) {
  main { padding: 24px 20px 48px; }

  .hero-card { padding: 28px; }

  .event-stats { grid-template-columns: repeat(4, 1fr); }

  .timeline-row, .timeline-header {
    grid-template-columns: 64px 48px 1fr 52px 52px 1fr;
    padding: 12px 16px;
  }

  .tl-icon { width: 36px; height: 36px; }
}

@media (min-width: 768px) {
  .site-header { padding: 28px 24px 36px; }

  main {
    padding: 28px 24px 64px;
    /* Side padding adds breathing room on tablet */
  }
}

/* ── 22. FOCUS & ACCESSIBILITY ────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* High-contrast media query */
@media (prefers-contrast: high) {
  :root {
    --color-bg: #fff;
    --color-border: #888;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   FUN ADDITIONS — animations, panic meter, rain, flair
   ============================================================ */

/* ── FX CANVAS (fireworks) ────────────────────────────────── */
#fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  width: 100%;
  height: 100%;
}

/* ── VS. THE SKY ──────────────────────────────────────────── */
.vs-sky {
  display: inline-block;
  font-size: clamp(0.95rem, 4.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2px 0 8px;

  /* Dark pill */
  background: #1a1a2e;
  color: transparent;
  padding: 6px 18px;
  border-radius: 6px;
  transform: skewX(-6deg);

  /* Gold → white gradient text */
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(90deg, #ffd700 0%, #fff5a0 45%, #ffffff 65%, #ffd700 100%);
  background-size: 200% auto;

  /* Box shadow stays on a wrapper so gradient text works */
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.35));

  animation: vsFlicker 0.6s ease forwards, vsShimmer 3s linear 0.8s infinite;
}

/* Wrap the badge in a dark pill (text gradient needs separate bg) */
.vs-sky-wrap {
  display: inline-block;
  background: #1a1a2e;
  border-radius: 6px;
  transform: skewX(-6deg);
  box-shadow: 0 3px 16px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(255,215,0,0.3);
  margin: 2px 0 8px;
  animation: vsFlicker 0.6s ease forwards;
}

.vs-sky {
  display: inline-block;
  transform: skewX(0); /* cancel parent skew on text */
  font-size: clamp(0.95rem, 4.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 20px;
  color: transparent;
  background: linear-gradient(90deg, #ffd700 0%, #fff8b0 45%, #ffffff 62%, #ffd700 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: vsShimmer 2.8s linear 0.7s infinite;
}

@keyframes vsFlicker {
  0%   { opacity: 0; transform: skewX(-6deg) scale(0.92); }
  40%  { opacity: 1; transform: skewX(-6deg) scale(1.06); }
  60%  { transform: skewX(-6deg) scale(0.98); }
  80%  { transform: skewX(-6deg) scale(1.03); }
  100% { transform: skewX(-6deg) scale(1);    }
}

@keyframes vsShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── HEADER VERDICT ───────────────────────────────────────── */
.header-verdict {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 6px;
  min-height: 1.3em;
  transition: opacity 0.4s;
}

/* ── BODY WEATHER CLASSES ─────────────────────────────────── */

/* Dry: gentle golden pulse on couple names */
body[data-weather="dry"] .couple-names {
  animation: sunPulse 3s ease-in-out infinite alternate;
}
@keyframes sunPulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.12) saturate(1.2); }
}

/* Dry: shimmer the rings */
body[data-weather="dry"] .header-rings {
  animation: ringSparkle 2s ease-in-out infinite;
}
@keyframes ringSparkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.15) rotate(8deg); }
}

/* Stormy: header flickers urgently */
body[data-weather="stormy"] .site-header {
  animation: stormFlicker 4s infinite;
}
@keyframes stormFlicker {
  0%, 90%, 100% { background: linear-gradient(160deg, #fffdf9 0%, #fef5ee 60%, #fdf0f6 100%); }
  92%            { background: linear-gradient(160deg, #eef3ff 0%, #dde8ff 60%, #eef0ff 100%); }
  94%            { background: linear-gradient(160deg, #fffdf9 0%, #fef5ee 60%, #fdf0f6 100%); }
}

/* Stormy: status chip pulses red */
body[data-weather="stormy"] .status-chip[data-status="stormy"] {
  animation: stormPulse 1.5s ease-in-out infinite;
}
@keyframes stormPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 12px rgba(185,40,40,0.4); }
}

/* Rain: subtle blue-grey header tint */
body[data-weather="rain"] .site-header,
body[data-weather="light-rain"] .site-header {
  background: linear-gradient(160deg, #f8f9ff 0%, #eef2ff 60%, #f5f0fa 100%);
}

/* ── CSS RAIN DROPS ───────────────────────────────────────── */
#rain-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  top: -20px;
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(transparent, rgba(130, 170, 255, 0.45));
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  0%   { transform: translateY(0) rotate(12deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { transform: translateY(105vh) rotate(12deg); opacity: 0; }
}

/* ── LOADING MESSAGE ──────────────────────────────────────── */
.loading-msg {
  font-size: 0.95rem;
  color: var(--color-muted);
  font-style: italic;
  min-height: 1.5em;
  text-align: center;
  animation: fadeSlide 0.4s ease;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PANIC-O-METER ────────────────────────────────────────── */
.panic-card {
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Background gradient that shifts with panic level */
.panic-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  border-radius: inherit;
  pointer-events: none;
  background: var(--panic-bg, var(--color-dry));
  transition: background 0.6s ease;
}

.panic-label-row {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.panic-emoji-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 6px;
  font-size: 1.5rem;
  position: relative;
}

.panic-emoji-scale span {
  transition: transform 0.3s, filter 0.3s;
  filter: grayscale(0.5) opacity(0.45);
  cursor: default;
  user-select: none;
}
.panic-emoji-scale span.active {
  filter: none;
  transform: scale(1.5);
}

.panic-track-wrap {
  position: relative;
  margin: 14px 0 10px;
}

.panic-track {
  height: 14px;
  background: linear-gradient(90deg,
    #3a9e6b 0%,
    #7dc95e 20%,
    #f5c842 40%,
    #f5a623 60%,
    #e85d3e 80%,
    #b92828 100%
  );
  border-radius: 999px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.panic-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--color-card);
  border: 3px solid var(--color-text);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.panic-score-display {
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  margin: 8px 0 4px;
  transition: color 0.5s;
}

.panic-verdict {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.panic-subtext {
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: 14px;
}

.panic-factors {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

.panic-factor-chip {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--color-muted);
}

/* ── ENHANCED TIMELINE RISK ROW ───────────────────────────── */
.timeline-row.is-risk .tl-time::after {
  content: ' ⚠️';
  font-size: 0.65rem;
}

/* ── FUN TIMELINE "NOW" PULSE ─────────────────────────────── */
.timeline-row.is-now {
  animation: nowRowPulse 2s ease-in-out 3;
}
@keyframes nowRowPulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 0 2px var(--color-primary); }
}

/* ── HEADER RINGS HIDE ON SCROLL (handled by JS class) ───── */
.site-header.compact .header-rings,
.site-header.compact .tagline,
.site-header.compact .header-verdict {
  display: none;
}

/* ── PANIC CARD SERIOUS MODE ──────────────────────────────── */
body.serious-mode #panic-section { display: none !important; }
body.serious-mode #rain-container { display: none !important; }
body.serious-mode #header-verdict { display: none !important; }
body.serious-mode [data-weather] .couple-names { animation: none !important; }
body.serious-mode [data-weather] .site-header  { animation: none !important; }
body.serious-mode [data-weather] .header-rings { animation: none !important; }

/* ── EVENTS SECTION HEADER ROW ────────────────────────────── */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title-row .section-title { margin-bottom: 0; }

.edit-events-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  min-height: 36px;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
.edit-events-btn:hover { background: var(--color-bg); box-shadow: var(--shadow-card); }

/* Empty events state */
.events-empty {
  text-align: center;
  padding: 28px 20px;
  color: var(--color-muted);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.events-empty:hover { border-color: var(--color-primary); background: #fff9f5; }
.events-empty-icon  { font-size: 2rem; margin-bottom: 8px; }
.events-empty-title { font-weight: 600; margin-bottom: 4px; font-size: 0.95rem; color: var(--color-text); }
.events-empty-sub   { font-size: 0.83rem; }

/* ── EVENTS EDITOR MODAL ──────────────────────────────────── */
.events-modal-box {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.event-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 10px;
}

.event-editor-row {
  display: grid;
  grid-template-columns: 46px 1fr 90px 36px;
  gap: 6px;
  align-items: center;
}

.event-editor-row input {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 10px;
  font-size: 0.9rem;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  outline: none;
  min-height: 44px;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.event-editor-row input:focus { border-color: var(--color-primary); }

.event-emoji-input { text-align: center; font-size: 1.2rem; padding: 8px 4px; }

.event-time-input  { font-family: var(--font-mono); font-size: 0.88rem; }

.event-delete-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.1rem;
  min-height: 44px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.event-delete-btn:hover { background: var(--color-stormy-bg); color: var(--color-stormy); border-color: var(--color-stormy); }

.add-event-btn {
  width: 100%;
  margin-top: 4px;
  border-style: dashed;
  color: var(--color-muted);
}