/* ==========================================================================
   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); }
.jj-period { margin-left: 6px; min-width: 260px; white-space: nowrap; 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); }
.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; }
: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; font-size: 19px; }
: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; }