/* Today's dailies page: only what the shared system (/assets/jf.css) doesn't cover. */

/* Date tile and countdown */
.jfd-top { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); border-bottom: var(--jf-line) solid var(--jf-edge); }
.jfd-date { display: flex; flex-direction: column; justify-content: center; gap: var(--jf-s2); padding: var(--jf-s5); background: var(--jf-black); color: var(--jf-cream); }
.jfd-date p { margin: 0; }
.jfd-day { font-weight: 700; font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: .85; }
.jfd-clock { display: grid; align-content: center; gap: var(--jf-s2); padding: var(--jf-s5); background: var(--jf-yellow); color: #141414; }
.jfd-clock p { margin: 0; }
.jfd-clock .jf-soft { color: #141414; }
.jfd-timer { font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.jfd-progress { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jf-s2) var(--jf-s3); margin-top: var(--jf-s2); font-weight: 700; }
.jfd-pips { display: inline-flex; gap: 6px; }
.jfd-pips span { width: 18px; height: 18px; border: var(--jf-line) solid #141414; background: var(--jf-cream); }
.jfd-pips span.is-on { background: var(--jf-good); }
.jfd-news { margin: 0; padding: var(--jf-s3) var(--jf-s5); background: var(--jf-good); color: #fff; font-weight: 700; border-bottom: var(--jf-line) solid var(--jf-edge); }
.jfd-news[hidden] { display: none; }

/* One row per game */
.jfd-list { margin: 0; padding: 0; list-style: none; }
.jfd-item { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--jf-s5); align-items: center; padding: var(--jf-s4) var(--jf-s5); border-bottom: var(--jf-line) solid var(--jf-edge); }
.jfd-item .jf-art { border: var(--jf-line) solid var(--jf-edge); }
.jfd-body { display: grid; gap: var(--jf-s1); min-width: 0; }
.jfd-body h2 { margin: 0; font-size: var(--jf-t-h3, 1.5rem); }
.jfd-body p { margin: 0; }
.jfd-status { font-weight: 700; color: var(--jf-ink-soft); }
.jfd-item.is-done .jfd-status { color: var(--jf-good-text); }
.jfd-item.is-done { background: var(--jf-paper-2); }
.jfd-play { white-space: nowrap; }
.jfd-tip { margin: 0; padding: var(--jf-s4) var(--jf-s5); }

@media (max-width: 760px) {
  .jfd-top { grid-template-columns: minmax(0, 1fr); }
  .jfd-date { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: var(--jf-s3); padding: var(--jf-s3) var(--jf-s4); }
  .jfd-day { font-size: 2.4rem; }
  .jfd-clock { padding: var(--jf-s4); }
  .jfd-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--jf-s3) var(--jf-s4); padding: var(--jf-s4); }
  .jfd-play { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .jfd-tip { padding: var(--jf-s4); }
}