/* Schedule listing: compact, whole row is one link to the card page. */
.sched { font-size: 0.84rem; }

/* Promotion filter: logo toggles beside the heading — all lit by default,
   a click ghosts one and hides its rows (saved per account / localStorage). */
.sched-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.sched-filters { display: flex; align-items: center; gap: 0.35rem; }
.sched-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  height: 1.6rem;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.sched-filter img { height: 100%; width: auto; max-width: 3.4rem; object-fit: contain; }
.sched-filter span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text);
  text-transform: uppercase;
}
.sched-filter:hover { filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6)); }
.sched-filter.off { opacity: 0.25; }
.sched-filter.off img { filter: grayscale(1); }

/* rows and month separators the filter has hidden */
.sched-row.promo-off,
.sched-month.promo-off { display: none; }

.sched-month {
  font-family: var(--heading);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--gold);
  padding: 0.9rem 0.6rem 0.3rem;
  border-bottom: 2px solid var(--card-edge);
}
.sched-month:first-child { padding-top: 0; }

.sched-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto 3.2rem;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sched-row:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }

.sr-date {
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
}
.sr-bell {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 0.45rem;
}
.sr-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-status { text-align: right; }
.sr-stream { text-align: right; }

/* Watch indicator: how the show streams. */
.stream-tag {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.stream-LIVE { color: #ff4747; }
.stream-FREE { color: var(--win); }
.stream-PPV  { color: var(--gold); }
.stream-VOD  { color: var(--muted); }

/* Phones: one line can't hold date + name + status + stream — the name
   (the point of the row) gets crushed to an ellipsis. Go two lines: date,
   status and stream on top, the name full-width beneath, free to wrap. */
@media (max-width: 640px) {
  .sched-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "date status stream"
      "name name   name";
    row-gap: 0.1rem;
    padding: 0.5rem 0.6rem;
  }
  .sr-date { grid-area: date; }
  .sr-status { grid-area: status; }
  .sr-stream { grid-area: stream; }
  .sr-name {
    grid-area: name;
    white-space: normal;
    line-height: 1.35;
  }
}

/* Promotion marker: the promotion's logo when we have one… */
.promo-logo {
  height: 17px;
  width: auto;
  vertical-align: -0.2em;
  margin-right: 0.55rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.promo-logo-lg { height: 26px; vertical-align: middle; margin-right: 0; }

/* …falling back to a small accent square. */
.promo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--promo, var(--muted));
  margin-right: 0.55rem;
  vertical-align: 0.08em;
  box-shadow: 0 0 6px var(--promo, transparent);
}

/* Card status: quiet text, not pills. */
.status {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.status-card { color: var(--gold); }
a.status-card:hover { text-decoration: underline; }
.status-results { color: var(--win); }
a.status-results:hover { color: var(--win); text-decoration: underline; }
.status-tbd { color: var(--faint); font-weight: 400; }

/* Home layout: schedule main + title-match sidebar (stacks below when
   narrow). */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--gap);
  align-items: start;
}
.home-side { position: sticky; top: 1rem; }
@media (max-width: 950px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-side { position: static; }
}

/* Spotlight: upcoming title matches as compact faceoff cards, stacked. */
.spot-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.spot-item .match-context { margin-bottom: 0.25rem; }
.spot-list .match-no { display: none; }
.spot-list .match {
  border-top: 2px solid var(--gold);
  box-shadow: 0 0 14px #ffd70022;
  padding: 0.5rem 0.7rem;
}
.spot-list .sides { font-size: 0.85rem; }
.spot-list .match-head { margin-bottom: 0.15rem; gap: 0.45rem; }
.spot-list .match-label { font-size: 0.68rem; }
.spot-list .face { height: 96px; width: 72px; }
.spot-list .face-none { height: 96px; width: 72px; font-size: 0.52rem; }
.spot-list .face-side .face-link + .face-link { margin-left: -16px; }
/* the sidebar is narrow — trios+ shrink to stay inside the card */
.spot-list .face-side:has(.face-link:nth-child(3)) .face { width: 52px; height: 69px; }
.spot-list .face-side:has(.face-link:nth-child(3)) .face-link + .face-link { margin-left: -20px; }
.spot-list .face-side:has(.face-link:nth-child(4)) .face { width: 40px; height: 53px; }
.spot-list .face-side:has(.face-link:nth-child(4)) .face-link + .face-link { margin-left: -16px; }