/* The Jadwal page (Jadwal redesign spec §3, §4): sidebar, phone panel, day heading, strip, pills, timeline, boxes. */
.jadwal { --live-bg: color-mix(in srgb, var(--color-accent) 22%, transparent); --on-bg: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); display: grid; gap: 32px; padding-bottom: 48px; }
.jadwal__side { display: none; }
.jadwal__boxes { display: grid; gap: 20px; margin-top: 32px; }
.jadwal__boxes > .section { margin-top: 0; }
.is-off { opacity: .45; }
.jadwal-nav__title, .jadwal-panel__title { margin: 0 0 8px 12px; color: var(--color-muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.jadwal-nav ul, .jadwal-panel__list ul { margin: 0; padding: 0; list-style: none; }
.jadwal-nav__sport, .jadwal-nav__league, .jadwal-panel__league { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-text); font-weight: 600; }
.jadwal-nav .is-on, .jadwal-panel__league.is-on { background: var(--color-surface); }
.jadwal-nav__icon { display: inline-flex; width: 24px; justify-content: center; color: var(--color-text-soft); }
.is-on > .jadwal-nav__icon, .is-open > .jadwal-nav__icon { color: var(--color-primary); }
.jadwal-nav__letter { font-size: 11px; font-weight: 700; }
.jadwal-nav__count { margin-left: auto; color: var(--color-muted); font-size: 13px; }
.jadwal-nav__live { margin-left: auto; padding: 1px 8px; border-radius: 99px; background: var(--live-bg); color: var(--color-live-text); font-size: 12px; font-weight: 700; }
.jadwal-nav__live::before, .timeline__now::before, .jadwal-tile__live { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--color-accent); vertical-align: 1px; }
.jadwal-nav ul ul { margin: 2px 0 8px 20px; padding-left: 12px; border-left: 1px solid var(--color-border); }
.jadwal-nav__league { min-height: 36px; font-size: 14px; font-weight: 500; }
.jadwal-nav__crest { width: 22px; height: 22px; border-radius: var(--radius-sm); font-size: 9px; }
.jadwal-pick { margin-bottom: 20px; }
.jadwal-pick__card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; list-style: none; }
.jadwal-pick__card::-webkit-details-marker { display: none; }
.jadwal-pick__icon { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--on-bg); color: var(--color-primary); }
.jadwal-pick__text, .jadwal-panel__name { display: grid; min-width: 0; }
.jadwal-pick__text small, .jadwal-panel__name small { color: var(--color-muted); font-size: 13px; }
.jadwal-pick__text b { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.jadwal-pick__change { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--color-primary); font-weight: 700; }
.jadwal-panel { padding-top: 16px; }
.jadwal-panel__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin-bottom: 20px; }
.jadwal-tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 600; text-align: center; }
.jadwal-tile.is-on { border-color: var(--color-primary); background: var(--on-bg); }
.jadwal-tile__live { position: absolute; top: 7px; right: 2px; width: 8px; height: 8px; }
.jadwal-panel__list { margin-bottom: 16px; }
.jadwal-panel__league { font-weight: 500; }
.jadwal-panel__crest { width: 38px; height: 38px; border-radius: var(--radius-md); font-size: 12px; }
.jadwal-panel__check { color: var(--color-primary); font-weight: 700; }
.jadwal-panel__grab { display: none; width: 44px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: var(--color-border-strong); }
.is-sheet[open] .jadwal-panel { position: fixed; inset: auto 0 0; z-index: 60; max-height: 78vh; overflow-y: auto; padding: 12px var(--gutter) 24px; border-radius: 20px 20px 0 0; background: var(--color-surface-2); }
.is-sheet[open]::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .6); }
.is-sheet .jadwal-panel__grab { display: block; }
.is-sheet .jadwal-panel__list:not([data-open]) { display: none; }
.jadwal-day__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jadwal-day__date { margin: 0; font: 700 26px/1.1 var(--font-body); text-transform: none; }
.jadwal-day__today { display: none; padding: 3px 12px; border-radius: 99px; background: var(--on-bg); color: var(--color-primary); font-size: 13px; font-weight: 700; }
.jadwal-day__nav, .jadwal-day__pick { display: flex; gap: 8px; }
.jadwal-day__nav { margin-left: auto; }
.jadwal-day__input { min-height: 44px; padding: 0 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: none; color: inherit; color-scheme: dark; }
.is-icon .jadwal-day__input { position: absolute; width: 1px; opacity: 0; pointer-events: none; }
.jadwal-day__counts { margin: 8px 0 16px; color: var(--color-text-soft); font-size: 14px; }
.jadwal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; }
.jadwal-strip a { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: var(--radius-lg); color: var(--color-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.jadwal-strip b { color: var(--color-text-soft); font-size: 18px; }
.jadwal-strip [aria-current] { background: var(--color-surface); color: var(--color-primary); }
.jadwal-strip [aria-current] b { color: var(--color-text); }
.jadwal-strip [aria-current]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.jadwal-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.jadwal-pill { flex: none; padding: 8px 16px; border: 1px solid var(--color-border-strong); border-radius: 99px; color: var(--color-text-soft); font-size: 14px; font-weight: 600; }
.jadwal-pill span { color: var(--color-muted); }
.jadwal-pill[aria-current], .jadwal-pill[aria-current] span { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.timeline { --tw: 40px; --tg: 20px; --rail: calc(var(--tw) + var(--tg) / 2); margin: 0; padding: 0; list-style: none; }
.timeline > li { position: relative; display: grid; grid-template-columns: var(--tw) minmax(0, 1fr); column-gap: var(--tg); }
.timeline__slot { padding-bottom: 12px; }
.timeline__slot::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--rail) - 1px); width: 2px; background: var(--color-border); }
.timeline__slot::after { content: ""; position: absolute; top: 20px; left: calc(var(--rail) - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--color-muted); }
.timeline__slot--live::after { background: var(--color-accent); box-shadow: 0 0 0 5px var(--live-bg); }
.timeline__slot--scheduled::after { border: 2px solid var(--color-primary); background: var(--color-bg); }
.timeline__when { display: grid; align-content: start; justify-items: end; margin: 0; padding-top: 14px; }
.timeline__when b { font-size: 16px; }
.timeline__when span { display: none; color: var(--color-muted); font-size: 12px; }
.timeline__cards { display: grid; gap: 8px; }
.timeline__now { align-items: center; margin: -4px 0 12px; color: var(--color-live-text); font-size: 12px; font-weight: 700; }
.timeline__now::before { position: absolute; top: 50%; left: calc(var(--rail) - 5px); width: 10px; height: 10px; margin-top: -5px; }
.timeline__now::after { content: ""; height: 2px; background: linear-gradient(90deg, var(--color-accent), transparent); }
.timeline__now-label { display: grid; justify-items: end; line-height: 1.2; }
.tl-card { padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tl-card--live { border-color: color-mix(in srgb, var(--color-accent) 65%, transparent); }
.tl-card__league { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--color-text-soft); font-size: 12px; font-weight: 600; }
.tl-card__crest { width: 18px; height: 18px; border-radius: 5px; font-size: 7px; }
.tl-card__row { display: flex; align-items: center; gap: 8px; }
.tl-card__teams { display: grid; flex: 1; grid-template: "home mid" "away mid" / minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; min-width: 0; color: var(--color-text); }
.tl-card__team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 700; }
.tl-card__team--home, .tl-card__team--event { grid-area: home; flex-direction: row-reverse; justify-content: flex-end; }
.tl-card__team--event { grid-row: 1 / 3; }
.tl-card__team--away { grid-area: away; }
.tl-card__team .crest { width: 24px; height: 24px; }
.tl-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-card__name small { display: block; color: var(--color-muted); font-size: 12px; font-weight: 500; }
.tl-card .is-lose { color: var(--color-muted); font-weight: 500; }
.tl-card__mid { display: grid; grid-area: mid; justify-items: center; min-width: 52px; }
.tl-card__score { font-size: 17px; white-space: nowrap; }
.tl-card__sub { color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.tl-card--live .tl-card__mid > * { color: var(--color-live-text); }
.tl-card--scheduled .tl-card__score { color: var(--color-muted); font-size: 14px; }
.tl-card__btn { display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-primary); }
.tl-card__btn--live { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }

@media (min-width: 640px) {
    .jadwal__boxes { grid-template-columns: 1fr 1fr; align-items: start; }
    .jadwal-day__today { display: inline-block; }
    .jadwal-day__date { font-size: 32px; }
    .timeline { --tw: 78px; --tg: 30px; }
    .timeline__when b { font-size: 21px; }
    .timeline__when span { display: block; }
    .tl-card { padding: 12px 16px 16px; }
    .tl-card__teams { grid-template: "home mid away" / minmax(0, 1fr) 96px minmax(0, 1fr); }
    .tl-card__team--home, .tl-card__team--event { flex-direction: row; text-align: right; }
    .tl-card__team--event { grid-row: auto; }
    .tl-card__team { font-size: 15px; }
    .tl-card__team .crest { width: 28px; height: 28px; }
    .tl-card__score { font-size: 21px; }
    .tl-card__btn { width: 44px; height: 44px; }
}

@media (min-width: 1024px) {
    .jadwal { grid-template-columns: 240px minmax(0, 1fr); }
    .jadwal__side { display: block; position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
    .jadwal-pick { display: none; }
}