/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Mobile live feed: show only the 2 most recent events, or all when expanded */
@media (max-width: 639px) {
  [data-match-watch-target="eventFeed"] > li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  [data-match-watch-target="eventFeed"].feed-expanded > li {
    display: list-item;
  }
  [data-match-watch-target="eventFeed"].feed-expanded {
    height: 16rem;
    overflow-y: auto;
  }
}

@keyframes stat-flash {
  0%   { background-color: #fef08a; } /* yellow-200 */
  100% { background-color: transparent; }
}

.stat-flash {
  animation: stat-flash 1.2s ease-out forwards;
  border-radius: 3px;
  padding: 0 2px;
}

/* Non-production corner ribbon: makes an otherwise byte-identical staging
   or dev site impossible to mistake for production. Fixed top-left, never
   blocks clicks (pointer-events:none), sits below the focused skip link
   (z-50). Colour is set by the --staging / --dev variant modifier. */
.env-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  width: 11rem;
  height: 11rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}

.env-ribbon__band {
  position: absolute;
  top: 2.1rem;
  left: -3.6rem;
  width: 14rem;
  padding: 0.4rem 0;
  transform: rotate(-45deg);
  border-top: 6px solid;
  border-bottom: 6px solid;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Staging: yellow/black hazard. */
.env-ribbon--staging .env-ribbon__band {
  background-color: #facc15; /* yellow-400 */
  color: #111827; /* gray-900 — ~13:1 on yellow-400 */
  border-image: repeating-linear-gradient(
    45deg,
    #111827 0,
    #111827 8px,
    #facc15 8px,
    #facc15 16px
  ) 6;
}

/* Development: purple, visually distinct from staging at a glance. */
.env-ribbon--dev .env-ribbon__band {
  background-color: #6d28d9; /* violet-700 */
  color: #ffffff; /* ~6.4:1 on violet-700 */
  border-image: repeating-linear-gradient(
    45deg,
    #2e1065 0,
    #2e1065 8px,
    #c4b5fd 8px,
    #c4b5fd 16px
  ) 6;
}