/* styles for days.js: calendar, day pages, game pages. Colors only through the tokens in styles.css. */

.dy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dy-help { width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: 13px; }
a.btn.dy-btn-link { display: inline-flex; align-items: center; text-decoration: none; height: 34px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.dy-head-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dy-daynav { display: flex; flex-wrap: wrap; gap: 6px; }
.dy-nologo { display: inline-block; flex: none; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
.dy-wrap { white-space: normal !important; min-width: 160px; }
.dy-note { margin-top: 10px !important; }

/* ------------------------------------------------------------ tags */
.dy-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.dy-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.dy-tag-upset, .dy-tag-bigupset { border-color: var(--accent-2); color: var(--ink); }
.dy-tag-bigupset { background: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); }
.dy-tag-thriller, .dy-tag-comeback, .dy-tag-latewinner { border-color: var(--accent); color: var(--ink); }
.dy-tag-nonD1, .dy-tag-blowout { color: var(--muted); }

/* ------------------------------------------------------------ calendar */
.dy-cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.dy-cal-nav .spacer { flex: 1; }
.dy-month { margin: 0; min-width: 9ch; text-align: center; font: 700 24px/1 var(--display) !important; text-transform: uppercase; }
.dy-cal { display: grid; gap: 4px; }
.dy-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dy-cal-head > div { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 2px 0; }
.dy-dow-s { display: none; }
.dy-cell { min-width: 0; min-height: 96px; border-radius: 10px; }
.dy-out { background: transparent; }
.dy-day { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; height: 100%; min-height: 96px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden; }
.dy-none .dy-day { background: transparent; border-style: dashed; color: var(--muted); }
.dy-past .dy-day { background: var(--surface); }
.dy-future .dy-day { background: var(--surface-2); border-style: dashed; border-color: var(--line-strong); }
a.dy-day:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.dy-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dy-is-today .dy-day { border: 2px solid var(--brand); }
.dy-num { font: 700 18px/1 var(--display); }
.dy-today-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dy-count { font-size: 12px; color: var(--ink-2); }
.dy-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dy-chip { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 999px; border: 1px solid var(--accent-2); color: var(--ink); white-space: nowrap; }
.dy-chip.dy-chip-zero { border-color: var(--line-strong); color: var(--muted); }
.dy-s { display: none; }
.dy-best { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-2); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dy-best img { width: 16px; height: 16px; object-fit: contain; flex: none; }
.dy-matchup { overflow: hidden; text-overflow: ellipsis; }
.dy-cal-legend { margin-top: 10px; }
.dy-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--line-strong); }
.dy-key-past { background: var(--surface); }
.dy-key-future { background: var(--surface-2); border-style: dashed; }
.dy-key-today { border: 2px solid var(--brand); }

/* ------------------------------------------------------------ day lists */
.dy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dy-list > li { border-bottom: 1px solid var(--line); padding: 4px 0 6px; }
.dy-list > li:last-child { border-bottom: 0; }
.dy-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(70px, 38%); align-items: center; gap: 10px; text-decoration: none; color: inherit; border-radius: 8px; padding: 4px 6px; margin: 0 -6px; }
.dy-row:hover { background: var(--surface-2); }
.dy-rank { width: 18px; text-align: right; color: var(--muted); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.dy-teams { display: grid; gap: 2px; min-width: 0; }
.dy-team { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink-2); }
.dy-team img, .dy-team .dy-nologo { flex: none; width: 20px; height: 20px; object-fit: contain; }
.dy-tname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-team.win { color: var(--ink); font-weight: 700; }
.dy-pts { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.dy-team:not(.win) .dy-pts { font-weight: 500; }
.dy-metric { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; }
.dy-metric b { font: 700 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.dy-metric small { color: var(--ink-2); font-size: 11.5px; line-height: 1.3; }
.dy-row-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 0 34px; font-size: 11px; color: var(--muted); }
.dy-match { display: grid; gap: 2px; text-decoration: none; }
.dy-mline { display: flex; align-items: center; gap: 6px; font-weight: 500 !important; color: var(--ink-2); }
.dy-mline img, .dy-mline .dy-nologo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.dy-mline b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.dy-mline.win { color: var(--ink); font-weight: 700 !important; }

/* ------------------------------------------------------------ game page hero */
.dy-hero { margin-bottom: 18px; }
.dy-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dy-hero-top .spacer { flex: 1; }
.dy-eyebrow-link { text-decoration: none; }
.dy-eyebrow-link:hover { text-decoration: underline; }
.dy-scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); }
.dy-hside { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink-2); }
.dy-hside.home { flex-direction: row-reverse; text-align: right; }
.dy-hlogo { width: 64px; height: 64px; object-fit: contain; flex: none; }
.dy-hname { display: grid; min-width: 0; }
.dy-hname a, .dy-hname > span { font: 700 22px/1.1 var(--display); text-transform: uppercase; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.dy-hname small { color: var(--muted); font-size: 12px; }
.dy-hscore { font: 700 56px/1 var(--display); font-variant-numeric: tabular-nums; margin-left: auto; color: var(--ink-2); }
.dy-hside.home .dy-hscore { margin-left: 0; margin-right: auto; }
.dy-hside.win .dy-hscore { color: var(--ink); }
.dy-hside.win .dy-hname a::after, .dy-hside.win .dy-hname > span::after { content: " ✓"; color: var(--good-text); font-size: .8em; }
.dy-hmid { text-align: center; }
.dy-status { font: 700 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.dy-where { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; }

/* ------------------------------------------------------------ win probability chart */
.dy-wp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.dy-wp-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dy-run-band { fill: var(--accent-2); fill-opacity: .12; }
.dy-run-label { fill: var(--ink-2); font-size: 10.5px; font-weight: 600; }
.dy-period { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.dy-side-label { fill: var(--muted); font-size: 11px; font-weight: 600; }
.dy-cursor { stroke: var(--ink-2); stroke-width: 1; opacity: .6; }
.dy-focus-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.legend .key.dy-key-line { width: 18px; height: 2px; border-radius: 0; background: var(--accent); vertical-align: 3px; }
.legend .key.dy-key-run { width: 14px; background: color-mix(in srgb, var(--accent-2) 22%, transparent); }
.legend .key.dy-key-period { width: 0; height: 12px; border-radius: 0; border-left: 1.5px dashed var(--muted); vertical-align: -2px; }
.dy-details { margin: 6px 0 14px; font-size: 13px; }
.dy-details summary { cursor: pointer; color: var(--ink-2); font-weight: 600; padding: 4px 0; }
.dy-details .table-wrap { max-height: 420px; overflow: auto; margin-top: 8px; }

/* ------------------------------------------------------------ game page cards */
tr.dy-actual td { border-top: 1px solid var(--line-strong); }
.dy-mvp { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dy-mvp img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.dy-mvp-name { font: 700 24px/1.1 var(--display); text-transform: uppercase; }
.dy-mvp-name a { text-decoration: none; }
.dy-mvp-nums { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-size: 13px; font-weight: 600; }
.dy-top, .dy-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dy-top li, .dy-runs li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dy-top img, .dy-runs img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.dy-top-name { flex: 1; min-width: 0; }
.dy-top-name a { font-weight: 600; text-decoration: none; }
.dy-top-name small { color: var(--ink-2); }
.dy-top b { font-variant-numeric: tabular-nums; }
.dy-runs .muted { font-size: 12.5px; }
.dy-hl { cursor: help; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }

/* ------------------------------------------------------------ preview */
.dy-pred { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; text-align: center; padding: 6px 0; }
.dy-pred-side img { width: 48px; height: 48px; object-fit: contain; }
.dy-pred-pts { font: 700 48px/1 var(--display); font-variant-numeric: tabular-nums; }
.dy-pred-line { font: 700 20px/1.1 var(--display); text-transform: uppercase; }
tr.dy-upcoming td { color: var(--ink-2); }

/* ------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .dy-best .dy-l2 { display: none; }
}
@media (max-width: 640px) {
  .dy-cell, .dy-day { min-height: 60px; }
  .dy-day { padding: 4px 3px; gap: 2px; align-items: center; text-align: center; }
  .dy-num { font-size: 15px; }
  .dy-dow-l, .dy-l, .dy-best, .dy-today-tag { display: none; }
  .dy-dow-s, .dy-s { display: inline; }
  .dy-chip { padding: 0 3px; font-size: 10px; }
  .dy-cal, .dy-cal-row { gap: 3px; }
  .dy-month { font-size: 20px !important; }
  .dy-scoreline { padding: 10px; gap: 6px; }
  .dy-hside, .dy-hside.home { flex-direction: column; text-align: center; gap: 4px; }
  .dy-hlogo { width: 40px; height: 40px; }
  .dy-hname a, .dy-hname > span { font-size: 16px; }
  .dy-hscore, .dy-hside.home .dy-hscore { font-size: 36px; margin: 0; }
  .dy-row { grid-template-columns: auto minmax(0, 1fr) minmax(64px, 36%); gap: 8px; }
  .dy-row-foot { padding-left: 26px; }
  .dy-pred-pts { font-size: 36px; }
}