/* Calendar, Sports index and Sport hub views.
   Per-sport accent is passed inline as --sc (see SPORT_COLORS in js/views/calendar.js). */

/* ---------- Shared bits ---------- */
.cs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--orange)); flex-shrink: 0; }
.cs-sub { font-size: 12px; margin-top: 2px; }
.cs-result { font: 700 14px var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.cs-win { color: var(--good); }
.cs-loss { color: var(--bad); }
.cs-today-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: middle;
  background: var(--orange); color: var(--on-orange); font: 600 10px/1.4 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
}
.ev-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.btn svg { width: 14px; height: 14px; }

/* ---------- Calendar filters ---------- */
.cs-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.cs-filter-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cs-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; }
.cs-seg a {
  height: 30px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center;
  font: 500 13px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.cs-seg a:hover { color: #fff; }
.cs-seg a.is-active { background: var(--navy); color: #fff; box-shadow: inset 0 -2px 0 var(--orange); }
.cs-chip-rows { display: flex; flex-direction: column; gap: 8px; }
.cs-chip-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-group-label { font: 500 12px var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--orange); min-width: 64px; }
.cs-chip-group .chip { height: 32px; padding: 0 12px; font-size: 13px; }
.cs-chip-code { font-size: 10px; color: var(--faint); letter-spacing: .08em; }
.chip.is-active .cs-chip-code { color: rgba(10,22,40,.65); }
.chip.is-active .dot { box-shadow: 0 0 0 2px var(--on-orange); }
.cs-select-wrap { display: none; flex-direction: column; gap: 6px; }

.cs-head { align-items: center; }
.cs-head p { margin-top: 6px; font-size: 14px; }
.cs-month-tabs { margin-bottom: 0; border-bottom: 0; }

/* ---------- Month grid ---------- */
.cs-layout { display: flex; flex-direction: column; gap: 32px; }
.cs-grid-wrap { background: var(--surface); }
.cs-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--navy); border-bottom: 2px solid var(--orange); }
.cs-dow div { padding: 10px 10px; font: 500 12px var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: #d3ddea; }
.cs-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cs-cell {
  min-height: 118px; padding: 6px 6px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s;
}
.cs-cell:nth-child(7n) { border-right: 0; }
.cs-cell.is-out { background: repeating-linear-gradient(135deg, rgba(0,0,0,.12) 0 8px, transparent 8px 16px); }
.cs-cell.has-events { cursor: pointer; }
.cs-cell.has-events:hover { background: var(--surface-2); }
.cs-cell.is-today { background: linear-gradient(180deg, rgba(242,101,34,.16), rgba(242,101,34,.04)); box-shadow: inset 0 0 0 2px var(--orange); }
.cs-daynum {
  align-self: flex-start; font: 600 15px var(--font-display); color: var(--muted); padding: 2px 6px; border-radius: 6px; line-height: 1.3;
}
.cs-cell.has-events .cs-daynum { color: var(--text); }
.cs-cell.is-today .cs-daynum { color: var(--orange-2); }
.cs-pills { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-pill {
  display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--sc) 16%, var(--bg-2)); border-left: 3px solid var(--sc);
  font-size: 11.5px; line-height: 1; color: var(--text); transition: background .15s, transform .12s var(--ease);
}
.cs-pill:hover { background: color-mix(in srgb, var(--sc) 30%, var(--bg-2)); transform: translateX(1px); }
.cs-pill b { font: 600 10.5px var(--font-display); letter-spacing: .06em; color: var(--sc); flex-shrink: 0; }
.cs-pill-opp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cs-pill em { font: 700 10.5px var(--font-display); font-style: normal; flex-shrink: 0; }
.cs-pill.is-live { box-shadow: 0 0 0 1px rgba(0,178,255,.6); }
.cs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex-shrink: 0; animation: pulse 1.4s infinite; }
.cs-more { align-self: flex-start; font: 500 11px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--orange-2); padding: 2px 6px; }
.cs-more:hover { text-decoration: underline; }

/* ---------- Agenda ---------- */
.cs-agenda-title { font-size: 22px; margin-bottom: 14px; }
.cs-agenda { display: flex; flex-direction: column; gap: 14px; }
.cs-agenda-day {
  display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: start;
  scroll-margin-top: calc(var(--topbar-h) + 20px); border-radius: var(--r);
}
.cs-agenda-day.flash .cs-agenda-list { animation: cs-flash 1.4s var(--ease); }
@keyframes cs-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--orange); } 100% { box-shadow: 0 0 0 0 transparent; } }
.cs-agenda-date {
  position: sticky; top: calc(var(--topbar-h) + 12px);
  display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 12px;
  background: var(--navy); border: 1px solid var(--line-2); text-align: center;
}
.cs-agenda-day.is-today .cs-agenda-date { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-soft); }
.cs-agenda-date .cs-today-tag { margin: 6px 0 0; }
.cs-ad-dow, .cs-ad-mon { font: 500 11px var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: #d3ddea; }
.cs-ad-num { font: 700 32px/1 var(--font-display); margin: 2px 0; }
.cs-agenda-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cs-row {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--sc);
}
.cs-row:last-child { border-bottom: 0; }
.cs-row-time { font: 600 15px var(--font-display); color: var(--muted); }
.cs-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-row-sport { display: flex; align-items: center; gap: 7px; font: 500 12px var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cs-row-sport .badge { height: 20px; font-size: 10px; }
.cs-row-title { font: 700 18px/1.15 var(--font-display); text-transform: uppercase; }
.cs-row-title:hover { color: var(--orange-2); }
.cs-row-title .vs { color: var(--orange); font-weight: 500; font-size: 14px; margin: 0 5px; }
.cs-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cs-row-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.cs-details { font-size: 13px; }

/* ---------- Sports index ---------- */
.cs-sport-card { display: flex; flex-direction: column; border-top: 3px solid var(--sc); }
.cs-sport-card .media-caption h3 { font-size: 22px; line-height: 1.05; }
.cs-code {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 5px;
  background: var(--sc); color: var(--on-orange); font: 700 11px var(--font-display); letter-spacing: .1em;
}
.cs-card-flag { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(10,22,40,.85); }
.cs-sport-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.cs-next b { font: 600 16px/1.15 var(--font-display); text-transform: uppercase; }
.cs-next .muted { font-size: 13px; }
.cs-last { font-size: 12px; margin-top: auto; }

/* ---------- Sport hub ---------- */
.cs-hub-hero { border-bottom: 3px solid var(--sc); }
.cs-hub-hero .page-hero-inner { padding: 56px 0 44px; }
.cs-hub-hero p svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--orange); }
.cs-back { font: 500 13px var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.cs-back::before { content: '\2039'; margin-right: 6px; }
.cs-siblings { margin-bottom: 22px; }
.cs-hub { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cs-hub-aside { position: sticky; top: calc(var(--topbar-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.cs-date { font: 600 14px var(--font-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.cs-sched .cs-row-title { font-size: 16px; }
.cs-jersey { font: 700 22px/1 var(--font-display); color: var(--orange); }
.cs-headshot { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); flex-shrink: 0; }
.cs-initials { width: 40px; height: 40px; font-size: 14px; border-width: 1px; }
.cs-featured { background: linear-gradient(90deg, rgba(255,194,74,.1), transparent 60%); }
.cs-news-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.cs-news-body h3 { font-size: 19px; line-height: 1.15; }
.cs-news-body .faint { font-size: 13px; }
.cs-callout { display: flex; flex-direction: column; gap: 12px; }
.cs-callout h3 { font-size: 24px; }
.cs-callout p { font-size: 14px; }
.cs-callout-ev { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .15s; }
.cs-callout-ev:hover { border-color: var(--orange); }
.cs-callout-teams { font-size: 18px; }
.cs-callout-ev svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cs-hub { grid-template-columns: minmax(0, 1fr); }
  .cs-hub-aside { position: static; order: -1; }
}
@media (max-width: 700px) {
  .cs-grid-wrap, .cs-chip-rows { display: none; }
  .cs-select-wrap { display: flex; }
  .cs-agenda-day { grid-template-columns: 56px 1fr; gap: 10px; }
  .cs-ad-num { font-size: 26px; }
  .cs-row { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .cs-row-time { font-size: 13px; }
  .cs-row-side { flex-direction: row; justify-content: space-between; align-items: center; }
  .cs-row-badges { justify-content: flex-start; }
  .cs-month-tabs { width: 100%; }
  .cs-month-tabs .tab { flex: 1; text-align: center; }
}
@media (max-width: 600px) {
  .cs-sched td.r, .cs-roster td { text-align: left; }
  .cs-roster tr { grid-template-columns: 1fr 1fr; }
}