/* Banner — placed near the top of /home for race-day-relative reminders. */
.morris-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--accent);
  border-radius: var(--r-md, 8px);
}
.morris-banner__img {
  width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
}
.morris-banner__text {
  flex: 1; margin: 0; color: var(--text); font-size: var(--t-14);
  line-height: var(--lh-snug, 1.35);
}
.morris-banner__close {
  background: transparent; border: 0; color: var(--text-mute);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
  align-self: flex-start;
}
.morris-banner__close:hover { color: var(--accent); }

/* Celebration popup — transient overlay after a log save. No card/box:
   just the transparent Morris PNG floating, centered, on a dark scrim,
   with the message as bold text above him. Pops in, auto-dismisses ~3s,
   tap to dismiss early. */
.morris-scrim {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62);
  opacity: 1; transition: opacity 260ms ease;
  animation: morris-scrim-in 180ms ease-out;
}
.morris-scrim[hidden] { display: none; }
/* Fade the whole overlay out on dismiss (JS adds .is-leaving, then sets
   [hidden] after the transition). */
.morris-scrim.is-leaving { opacity: 0; }

/* Layout-only stack — NO background, border, or padding. Holds the
   text-above-image order and carries the pop-in animation. */
.morris-scrim__stack {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3, 12px);
  text-align: center;
  animation: morris-pop-in 240ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.morris-scrim__img {
  /* Big — but never taller than the viewport on small phones. */
  height: 380px; max-height: 60vh; width: auto; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55));
}
.morris-scrim__text {
  margin: 0; max-width: 18ch;
  font-size: var(--t-18, 18px); font-weight: var(--w-bold, 700);
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
/* Empty message: collapse so the gap doesn't leave a hole above Morris. */
.morris-scrim__text:empty { display: none; }

@keyframes morris-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes morris-pop-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1.0); }
}

@media (max-width: 480px) {
  .morris-banner { flex-wrap: wrap; }
  .morris-banner__img { width: 48px; height: 48px; }
  .morris-scrim__img { height: 300px; max-height: 56vh; }
  .morris-scrim__text { font-size: var(--t-16, 16px); }
}