/* ==========================================================================
   Jlaude Schedule — CONTROLS
   Header, view switch, navigasi periode, week strip, chip kategori.
   ========================================================================== */

.jj-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px 24px; margin-bottom: 26px; }
.jj-head__text { display: flex; flex-direction: column; gap: 6px; }
.jj-eyebrow { font: 500 11px var(--jj-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--jj-muted); }
.jj-title { font: 600 68px/.95 var(--jj-serif); letter-spacing: -.035em; }
.jj-sub { font: 400 14px var(--jj-sans); color: var(--jj-muted); }

/* View switch: List / Minggu / Bulan / Tahun */
.jj-seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--jj-line); border-radius: 999px; }
.jj-seg__btn { padding: 8px 16px; border-radius: 999px; font: 500 13px var(--jj-sans); transition: background .3s, color .3s; }
.jj-seg__btn.is-active { background: var(--jj-text); color: var(--jj-page); }

/* Navigasi periode */
.jj-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.jj-nav { display: flex; align-items: center; gap: 8px; }
.jj-arrow {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1px solid var(--jj-line); display: grid; place-items: center;
  font: 500 16px/1 var(--jj-sans); transition: background .25s, color .25s;
}
.jj-arrow:hover { background: var(--jj-text); color: var(--jj-page); }
/* Lebar minimum menjaga Today tetap di tempat saat judul berganti panjang (minggu, bulan, tahun);
   judulnya di tengah ruang antara panah dan Today, dengan jarak sama di kedua sisi. */
.jj-period { margin: 0 6px; min-width: 260px; white-space: nowrap; text-align: center; font: 600 24px var(--jj-serif); letter-spacing: -.02em; }
.jj-pill { padding: 7px 14px; border: 1px solid var(--jj-line); border-radius: 999px; font: 500 12px var(--jj-sans); }
/* Judul singkat ("Nov 2026") hanya untuk ponsel; lihat bagian Mobile. */
.jj-period__short { display: none; }
.jj-pill:hover { border-color: var(--jj-text); }

.jj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 400 12px var(--jj-sans); color: var(--jj-muted); }
.jj-legend { display: flex; align-items: center; gap: 6px; }
.jj-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--jj-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jj-ink) 12%, transparent); }
.jj-legend--special i { background: var(--jj-accent); box-shadow: none; }

/* Week strip */
.jj-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.jj-day {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px;
  border: 1px solid var(--jj-line); border-radius: 16px; text-align: left;
  transition: background .35s, color .35s, border-color .35s;
}
.jj-day.is-active { background: var(--jj-text); color: var(--jj-page); border-color: var(--jj-text); }
.jj-day__top { display: flex; justify-content: space-between; font: 500 11px var(--jj-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.jj-day__num { font: 600 28px/1 var(--jj-serif); letter-spacing: -.02em; }
.jj-day__dots { display: flex; align-items: center; gap: 3px; height: 6px; }
.jj-day__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--jj-faint); }
.jj-day.is-active .jj-day__dots i { background: var(--jj-accent); }

/* Chip kategori */
.jj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; scrollbar-width: none; }
.jj-chips::-webkit-scrollbar { display: none; }
.jj-chip {
  flex: none; white-space: nowrap; padding: 7px 14px;
  border: 1px solid var(--jj-line); border-radius: 999px;
  font: 500 12.5px var(--jj-sans); transition: background .3s, color .3s, border-color .3s;
}
.jj-chip:hover { border-color: var(--jj-text); }
.jj-chip.is-active { background: var(--jj-accent); border-color: var(--jj-accent); color: var(--jj-ink); }

/* Tablet */
/* (dulu @container jj (max-width: 1023px); kelas jj-w-1023 dari app.js, jebakan 44) */
:where(.jj-w-1023) .jj-head { margin-bottom: 22px; }
:where(.jj-w-1023) .jj-title { font-size: 56px; }
:where(.jj-w-1023) .jj-period { font-size: 22px; min-width: 220px; }
:where(.jj-w-1023) .jj-day { padding: 9px 10px 10px; }
:where(.jj-w-1023) .jj-day__num { font-size: 24px; }
:where(.jj-w-1023) .jj-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 26px; padding: 0 24px; }


/* Mobile */
/* (dulu @container jj (max-width: 639px); kelas jj-w-639 dari app.js, jebakan 44) */
:where(.jj-w-639) .jj-head { margin-bottom: 18px; }
:where(.jj-w-639) .jj-title { font-size: 44px; }
:where(.jj-w-639) .jj-sub, :where(.jj-w-639) .jj-meta { display: none; }
:where(.jj-w-639) .jj-seg { width: 100%; }
:where(.jj-w-639) .jj-seg__btn { flex: 1; padding: 10px 0; text-align: center; }
:where(.jj-w-639) .jj-seg__btn[data-value="week"] { display: none; }
/* Satu baris: panah, judul, Today, sama tinggi 40px. Judul periode lengkap ("12 – 18 September
   2026", ±208px) tidak muat di ponsel dan dulu menimpa Today, jadi:
   - Month dan Year: nama bulan singkat ("Nov 2026", paling lebar ±88px pada 19px) di tengah ruang
     antara panah dan Today; muat sampai ponsel 320px, elipsis sebagai pengaman terakhir.
   - List: tanpa judul, karena deretan hari dan judul hari di bawahnya sudah menyebut tanggalnya
     (dengan tahun bila bukan tahun ini). Judul lengkap tetap ada untuk pembaca layar (aria-live). */
:where(.jj-w-639) .jj-nav { width: 100%; }
:where(.jj-w-639) .jj-arrow { width: 40px; height: 40px; }
:where(.jj-w-639) .jj-period { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 19px; }
:where(.jj-w-639) .jj-period__short { display: inline; }
:where(.jj-w-639) .jj-period__full,
:where(.jj-w-639) .jj-nav--list .jj-period { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.jj-w-639) .jj-pill { height: 40px; margin-left: auto; padding: 0 18px; font-size: 13px; }
:where(.jj-w-639) .jj-days { gap: 4px; }
:where(.jj-w-639) .jj-day { align-items: center; padding: 8px 0 9px; border-radius: 14px; }
/* Di mobile isi tombol hari dipusatkan, jadi kembali selebar isinya. */
:where(.jj-w-639) .jj-day > * { width: auto; }
:where(.jj-w-639) .jj-day > .jj-day__top { width: 100%; justify-content: center; }
:where(.jj-w-639) .jj-day__tag { display: none; }
:where(.jj-w-639) .jj-day__num { font-size: 20px; }
:where(.jj-w-639) .jj-day__dots i:nth-child(n + 5) { display: none; }
:where(.jj-w-639) .jj-chips { margin: 0 -16px 22px; padding: 0 16px; }
:where(.jj-w-639) .jj-chip { padding: 9px 14px; }