/* Propium: the landing page, the 404 and the coming-soon page.
   Loaded after site.css and adds only what it lacks. Tokens, header, footer,
   cards, tags, dials, odds chips, buttons and section heads all come from
   site.css; nothing here restates a token value or restyles a shared class. */

/* ---------- 1. Shared by the three pages ---------- */

/* The hidden sheet of league glyphs (and, on the landing page, dial gradients). */
.hm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.hm-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }

/* League tile: one league link on the 404 and the coming-soon page. */
.lts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.lt { --glow: var(--info-a); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; }
.lt:focus-visible { transform: translateY(-2px); border-color: var(--line-2); }
.lt-ball { width: 34px; height: 34px; color: var(--info); }
.lt-txt { display: grid; gap: 4px; min-width: 0; }
.lt-key { font: 800 34px/.9 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.lt-long { font: 500 13.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); }
.lt-go { font-size: 18px; color: var(--muted); transition: transform .18s var(--ease); }
.lt:focus-visible .lt-go { transform: translateX(3px); }
@media (hover: hover) { .lt:hover .lt-go { transform: translateX(3px); } }

/* Staged entrance. The page script adds html.anim.enter only when motion is
   allowed and nothing has been painted yet, so the content is readable without
   it. The keyframe has no end state: once it finishes, the element's own
   transform (the card lift) is in charge again. */
html.anim.enter .hm-in { animation: hm-in .46s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes hm-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- 2. Landing page ---------- */

.hm { padding-top: 20px; }
.lgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 940px) { .lgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }

.lc { --glow: var(--info-a); position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px; overflow: hidden; background: radial-gradient(460px 260px at 100% 0%, rgba(var(--glow), .13), transparent 72%), var(--card); }
.lc.is-on { --glow: var(--win-a); }
.lc::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--glow), .85), rgba(var(--glow), 0) 70%); }
.lc-ball { position: absolute; z-index: -1; right: -40px; top: -44px; width: 200px; height: 200px; color: var(--text); opacity: .055; pointer-events: none; }

.lc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lc-key { margin: 0; font: 800 78px/.84 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.lc-long { margin: 8px 0 0; font: 600 13px/1.3 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.lc-tag { margin-top: 4px; }

.lc-today { display: grid; gap: 12px; }
.lc-status { margin: 0; min-height: 22px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.lc-status .skel { display: block; max-width: 260px; }

/* Top pick (or the last card's top pick): the league page's pick-card language, small. */
.tp { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.tp-lbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font: 700 12px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.tp-lbl span + span { letter-spacing: .05em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tp-who { min-width: 0; }
.tp-name { margin: 0; font: 800 26px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.tp-sub { margin: 5px 0 0; font: 500 13.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); }
.tp-bet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.tp-phrase { flex: 1 1 150px; margin: 0; min-width: 0; font: 800 23px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }

/* A league with no picks yet: when its season (or next game day) is. */
.nx-date { margin: 0; font: 800 34px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.nx .tp-sub { margin: 0; }
.nx .tp-sub:empty { display: none; }

.lc-rec { display: grid; gap: 8px; margin-top: auto; }
.lc-rec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; font: 700 12.5px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.lc-rec-h span + span { letter-spacing: .05em; color: var(--dim); font-variant-numeric: tabular-nums; }

.lc-foot { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-rec[hidden] + .lc-foot { margin-top: auto; }   /* a league that is not live has no record block */
.lc-go { flex: 1 1 auto; }
.lc-go::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the league */
/* A filter would make the button the containing block of the line above and
   shrink the card-wide hit area on hover; the card lift is the feedback here. */
.lc .lc-go:hover { filter: none; }
.lc-go svg { transition: transform .18s var(--ease); }
.lc:has(.lc-go:focus-visible) .lc-go svg { transform: translateX(3px); }
@media (hover: hover) { .lc:hover .lc-go svg { transform: translateX(3px); } }
.lc-hist { position: relative; z-index: 1; }

@media (max-width: 400px) {
  .lc { padding: 16px 14px; }
  .lc-key { font-size: 68px; }
  .tp-name { font-size: 24px; }
}

/* ---------- 3. 404 ---------- */

.nf { padding-top: 30px; }
.nf-code { margin: 0 0 0 -4px; font: 800 clamp(128px, 30vw, 248px)/.8 var(--f-display); letter-spacing: .02em; color: rgba(var(--text-a), .06); -webkit-text-stroke: 1px rgba(var(--text-a), .16); user-select: none; }
.nf-h { margin: 14px 0 20px; font: 800 44px/1 var(--f-display); letter-spacing: .025em; text-transform: uppercase; }

/* ---------- 4. Coming soon ---------- */

.cs-wrap { padding-top: 12px; }
.cs { --glow: var(--info-a); position: relative; isolation: isolate; overflow: hidden; padding: 22px 20px 24px; background: radial-gradient(620px 320px at 100% 0%, rgba(var(--glow), .14), transparent 72%), var(--card); }
.cs-ball { position: absolute; z-index: -1; right: -56px; top: -60px; width: 300px; height: 300px; color: var(--text); opacity: .055; pointer-events: none; }
.cs-long { margin: 0; font: 600 13px/1.3 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.cs-key { margin: 8px 0 0; font: 800 clamp(104px, 24vw, 176px)/.82 var(--f-display); letter-spacing: .02em; text-transform: uppercase; }
.cs-state { margin: 12px 0 0; }
.cs-note { margin: 12px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.5; }
.cs-note:empty { display: none; }

/* A league never links to itself from its own coming-soon page. */
body[data-league="mlb"] .cs-live .lt[data-league="mlb"],
body[data-league="nfl"] .cs-live .lt[data-league="nfl"],
body[data-league="nba"] .cs-live .lt[data-league="nba"] { display: none; }

/* The season schedule panel. js/schedule.js (shared with the old pages, used
   read-only) writes the markup; every rule is scoped to this page's mount. */
.cs-sched .graphic-placeholder { padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: 12px; background: rgba(var(--bg-a), .45); font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.cs-sched .sched-panel { display: grid; gap: 14px; }
.cs-sched .sched-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cs-sched .sched-ball { display: grid; flex: none; width: 44px; height: 44px; color: var(--info); }
.cs-sched .sched-ball svg { width: 100%; height: 100%; }
.cs-sched .sched-title { font: 800 30px/1.02 var(--f-display); letter-spacing: .025em; text-transform: uppercase; text-wrap: balance; }
.cs-sched .sched-sub { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.cs-sched .sched-label { margin-top: 6px; font: 700 12.5px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.cs-sched .sched-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 960px) { .cs-sched .sched-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.cs-sched .sched-day { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cs-sched .sched-day[open] { border-color: var(--line-2); }
.cs-sched .sched-day > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 64px; padding: 9px 14px; border-radius: 12px; list-style: none; cursor: pointer; }
.cs-sched .sched-day > summary::-webkit-details-marker { display: none; }
.cs-sched .sched-date { display: grid; justify-items: center; gap: 3px; width: 46px; padding: 6px 0 5px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2); }
.cs-sched .sched-wd { font: 700 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cs-sched .sched-dn { font: 800 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cs-sched .sched-meta { display: grid; gap: 3px; min-width: 0; }
.cs-sched .sched-rel { font: 600 14.5px/1.3 var(--f-label); letter-spacing: .03em; }
.cs-sched .sched-teaser { overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cs-sched .sched-tag { padding: 2px 7px; border-radius: 6px; background: rgba(var(--text-a), .07); font: 700 11.5px/1.35 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cs-sched .sched-tag.reg { background: rgba(var(--info-a), .13); color: var(--info); }
.cs-sched .sched-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .18s var(--ease); }
.cs-sched .sched-day[open] .sched-chev { transform: rotate(180deg); }
.cs-sched .sched-games { display: grid; margin: 0; padding: 0 14px 6px; list-style: none; }
.cs-sched .sched-game { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 9px 0; border-top: 1px solid var(--line); font: 700 15px/1.2 var(--f-label); letter-spacing: .04em; }
.cs-sched .sched-team { display: inline-flex; align-items: center; gap: 6px; }
.cs-sched .sched-team img { width: 22px; height: 22px; object-fit: contain; }
.cs-sched .sched-at { font-weight: 500; color: var(--dim); }
.cs-sched .sched-right { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; white-space: nowrap; }
.cs-sched .sched-tv { font: 500 12.5px/1.2 var(--f-label); letter-spacing: .04em; color: var(--dim); }
.cs-sched .sched-time { font: 600 14px/1.2 var(--f-label); font-variant-numeric: tabular-nums; color: var(--muted); }
.cs-sched .sched-game.live .sched-time { color: var(--win); }
.cs-sched .sched-game.done { color: var(--muted); }
.cs-sched .sched-foot { font-size: 12.5px; color: var(--dim); }

@media (max-width: 560px) {
  .cs-ball { right: -50px; top: -46px; width: 190px; height: 190px; }
  .cs-sched .sched-head { align-items: flex-start; padding: 14px; }
  .cs-sched .sched-title { font-size: 27px; }
  .cs-sched .sched-day > summary { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date meta chev" "date tag chev"; padding: 10px 12px; }
  .cs-sched .sched-date { grid-area: date; }
  .cs-sched .sched-meta { grid-area: meta; }
  .cs-sched .sched-tag { grid-area: tag; justify-self: start; }
  .cs-sched .sched-chev { grid-area: chev; }
  .cs-sched .sched-teaser { white-space: normal; }
  .cs-sched .sched-games { padding-inline: 12px; }
}
@media (max-width: 400px) {
  .cs { padding: 18px 16px 20px; }
  .nf-h { font-size: 40px; }
}