.calendar-board {
  --calendar-day-width: clamp(248px, 26vw, 340px);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-height: 0;
  overscroll-behavior-x: contain;
  padding: 2px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 242, 222, .22) transparent;
  scroll-padding-inline: 2px;
}

.calendar-board::-webkit-scrollbar { display: block; height: 5px; }
.calendar-board::-webkit-scrollbar-thumb { background: rgba(255, 242, 222, .22); border-radius: 8px; }
.calendar-board::-webkit-scrollbar-track { background: transparent; }
.calendar-board:focus-visible { outline: 1px solid #b398fa; outline-offset: 3px; border-radius: 12px; }

.calendar-board-week {
  display: grid;
  grid-template-columns: repeat(7, var(--calendar-day-width));
  align-items: stretch;
  gap: 14px;
  width: max-content;
  min-width: 100%;
  height: 100%;
  min-height: 0;
}

.calendar-board-day {
  min-width: 0;
  padding: .75rem .75rem .75rem 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-radius: 12px;
  background: #000;
}

.calendar-board-day.is-today {
  background: linear-gradient(to bottom, var(--accent-bg), var(--transparent));
}

#calendar-course-label {
  line-height: 1.3;
}

.calendar-board-day-heading { flex-shrink: 0; display: flex; align-items: baseline; gap: 8px; margin: 0 0 .75rem; padding-inline: 1px; white-space: nowrap; }
.calendar-board-weekday { color: var(--txt, #fff2de); font-size: 1rem; font-weight: 600; }
.calendar-board-date { color: rgba(255, 242, 222, .49); font-size: 1rem !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.calendar-board-today { margin-left: auto; color: var(--accent, #dffe96); font-size: 1rem !important; }
.calendar-board-empty { color: rgba(255, 242, 222, .42); font-size: .95rem !important; line-height: 1; text-align: center; }
.calendar-board-cards { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #fff2de20 transparent; padding-right: 3px; }
.calendar-board-item { flex-shrink: 0; min-width: 0; list-style: none; }

.calendar-assignment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 12px 11px 9px 13px;
  border-radius: 0 .5rem .5rem 0;
  border-left: .2rem solid var(--course-color, #b398fa);
  background: var(--bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}

.calendar-assignment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.calendar-assignment-course { color: var(--course-color, #b398fa); font-size: .8rem; font-weight: 540; letter-spacing: .015em; }
.calendar-assignment-category { color: rgba(255, 242, 222, .52); font-size: .8rem; padding: 1px 5px; border: 1px solid rgba(255, 242, 222, .10); border-radius: 4px; }
.calendar-assignment-title { margin: 0; color: var(--txt, #fff2de); font-size: 1rem; font-weight: 520; line-height: 1.45; overflow-wrap: anywhere; }
.calendar-assignment-period { margin: 9px 0 6px; color: rgba(255, 242, 222, .62); font-size: .8rem; font-variant-numeric: tabular-nums; line-height: 1.65; overflow-wrap: anywhere; }
.calendar-assignment-period * { font: inherit; letter-spacing: inherit; }
.calendar-assignment-unknown { color: rgba(255, 242, 222, .41); }
.calendar-assignment-status { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 242, 222, .55); font-size: .8rem; line-height: 1.5; }
.calendar-assignment-status.is-complete { color: #8dc3a3; }
.calendar-assignment-status.is-progress { color: #c3a7ee; }
.calendar-assignment-status.is-overdue { color: #d1a178; }
.calendar-assignment-open {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 30px;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 242, 222, 0.053);
  border-radius: 5px;
  background: var(--bg);
  color: rgba(255, 242, 222, .86);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 470;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.calendar-assignment-open:hover { background: rgba(255, 242, 222, .05);}

@media (max-width: 600px) {
  .calendar-board { --calendar-day-width: min(280px, 82vw); padding-bottom: 12px; }
  .calendar-board-week { gap: 10px; min-height: 0; }
  .calendar-board-day { padding: 13px 10px 10px; }
  .calendar-assignment-open { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-assignment, .calendar-assignment-open { transition: none; }
}

body[data-route=calendar] { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body[data-route=calendar] .app-header { flex-shrink:0; }
body[data-route=calendar] main { margin:0; width:100%; flex:1; min-height:0; display:flex; padding-bottom:18px; }
body[data-route=calendar] [data-page=calendar] { width:100%; flex:1; min-height:0; display:flex; flex-direction:column; }
body[data-route=calendar] .page-toolbar { flex-shrink:0; }
.calendar-board-cards:focus-visible { outline-offset:-2px; }
.week-picker { width:min(430px,calc(100vw - 28px)); padding:24px; border-radius:18px; }
.week-picker-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.week-picker-header h2 { font-size:1rem; font-weight:650; }
.week-picker-controls { display:flex; gap:3px; }
.week-picker-controls .icon-button { width:32px; height:32px; border:0; background:transparent; }
.week-picker-weekdays,.week-picker-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.week-picker-weekdays { color:var(--muted); text-align:center; margin-bottom:8px; font-size:.875rem; }
.week-picker-weeks { display:grid; gap:4px; }
.week-picker-row { width:100%; padding:0; gap:0; border:1px solid transparent; background:transparent; border-radius:10px; }
.week-picker-row:hover { background:#fff2de08; }
.week-picker-row[aria-pressed=true] { border-color:var(--accent-muted); background: var(--accent-bg); }
.week-picker-day { position:relative; display:flex; align-items:center; justify-content:center; height:46px; color:var(--txt); font-size:1rem; }
.week-picker-day.outside-month { color:#fff2de40; }
.week-picker-number { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; }
.week-picker-day.is-today .week-picker-number { background:#fff2de12; color:var(--accent); font-weight:650; }
.week-picker-dot { position:absolute; bottom:3px; left:calc(50% - 1.5px); width:3px; height:3px; border-radius:50%; background:var(--accent); }
@media(max-width:450px){.week-picker{padding:18px}.week-picker-day{height:43px}.week-picker-header{gap:6px}.week-picker-controls .icon-button{width:30px}.week-label{min-width:88px;font-size:.9375rem}.calendar-course-control>button{gap:5px}}