/* Course calendar: the styles for course-calendar.js (2026-09-25).
 *
 * Every selector begins with .cal. No element, id or :root selector of its own, so this file
 * cannot change anything else on the dashboard. It reads styles.css's custom properties (--ink,
 * --muted, --line, --panel, --blue, --radius, --shadow) with a fallback in every var(), so the
 * calendar also renders on a page without styles.css (the standalone preview).
 *
 * CONTRAST. Text is always the dark ink (or a dark tone of a pill) on a pale background; a course
 * colour is only ever a 4px line or a swatch beside its written code. Checked by the render check
 * (tests/calendar/render_check_calendar.mjs), which measures every pill and chip at 4.5:1 or more.
 */

.cal {
  background: var(--panel, #fff);
  color: var(--ink, #1f2933);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, .08));
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.cal *, .cal *::before, .cal *::after { box-sizing: border-box; }
.cal .cal-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cal .cal-titlebar { display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; }
.cal .cal-head h2 { font-size: 1.15rem; margin: 0; }
.cal .cal-sub { color: var(--muted, #5b6470); font-size: .88rem; margin: 0 0 .7rem; }
.cal .cal-due {
  margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 8px; font-size: .92rem;
  background: #eef2f7; border: 1px solid var(--line, #e5e7eb);
}

/* ---------- controls ---------- */
.cal .cal-bar { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin-bottom: .6rem; }
.cal .cal-course { display: flex; align-items: center; gap: .4rem; font-size: .9rem; flex: 1 1 16rem; min-width: 0; }
.cal .cal-course select {
  flex: 1; min-width: 0; max-width: 26rem; font: inherit; padding: .4rem .5rem;
  border: 1px solid #9aa3ad; border-radius: 8px; background: #fff; color: inherit;
}
.cal button { font: inherit; cursor: pointer; }
.cal .cal-views, .cal .cal-nav { display: inline-flex; border: 1px solid #9aa3ad; border-radius: 8px; overflow: hidden; }
.cal .cal-views button, .cal .cal-nav button {
  background: #fff; color: var(--ink, #1f2933); border: 0; border-right: 1px solid #c9ced4;
  padding: .4rem .75rem; min-height: 2.25rem; min-width: 2.5rem; border-radius: 0;
}
.cal .cal-views button:last-child, .cal .cal-nav button:last-child { border-right: 0; }
.cal .cal-views button[aria-pressed="true"] { background: #2f5f93; color: #fff; font-weight: 600; }
.cal button:focus-visible, .cal select:focus-visible, .cal a:focus-visible, .cal summary:focus-visible {
  outline: 3px solid #1d4ed8; outline-offset: 2px;
}
.cal .cal-range { font-size: 1rem; margin: .3rem 0 .1rem; }
.cal .cal-zone { color: var(--muted, #5b6470); font-size: .85rem; margin: 0 0 .5rem; }

/* ---------- legend ---------- */
.cal .cal-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 .8rem; font-size: .83rem; }
.cal .cal-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .8rem; }
.cal .cal-legend li { display: inline-flex; align-items: center; gap: .3rem; }
.cal .cal-swatch { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.cal .cal-icon { width: 1rem; height: 1rem; flex: 0 0 auto; vertical-align: -.15rem; }

/* ---------- pills ---------- */
.cal .cal-pill { display: inline-block; font-size: .76rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.cal .cal-ok    { background: #e3f3e9; color: #1b5e37; }
.cal .cal-warn  { background: #fdf1dc; color: #6e4300; }
.cal .cal-bad   { background: #fbe6e5; color: #8f2521; }
.cal .cal-info  { background: #e6eef8; color: #1f4f82; }
.cal .cal-muted { background: #eef0f3; color: #414b57; }
.cal .cal-today-tag {
  display: inline-block; background: #2f5f93; color: #fff; font-size: .7rem; font-weight: 700;
  border-radius: 4px; padding: 0 .3rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .02em;
}

/* ---------- a calendar item ---------- */
.cal .cal-chip {
  display: flex; align-items: flex-start; gap: .3rem; width: 100%; text-align: left;
  background: var(--cal-tint, #eef0f3); color: var(--ink, #1f2933);
  border: 0; border-left: 4px solid var(--cal-line, #4f5d6b); border-radius: 5px;
  padding: .15rem .35rem; margin: 0 0 .2rem; font-size: .78rem; line-height: 1.3; min-height: 1.5rem;
}
.cal .cal-chip:hover { filter: brightness(.96); }
.cal .cal-chip .cal-icon { width: .85rem; height: .85rem; margin-top: .1rem; color: var(--cal-line, #4f5d6b); }
.cal .cal-chip-text { min-width: 0; }
.cal .cal-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.cal .cal-chip-course { font-weight: 600; }
.cal .cal-chip-status { display: block; font-size: .72rem; font-weight: 600; }
.cal .cal-tone-bad .cal-chip-status { color: #8f2521; }
.cal .cal-tone-warn .cal-chip-status { color: #6e4300; }
.cal .cal-tone-ok .cal-chip-status { color: #1b5e37; }
.cal .cal-tone-info .cal-chip-status { color: #1f4f82; }
.cal .cal-tone-muted .cal-chip-status { color: #414b57; }
.cal .cal-cancelled .cal-chip-text, .cal .cal-cancelled .cal-row-title { text-decoration: line-through; }

/* ---------- month ---------- */
.cal .cal-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal .cal-month th { font-size: .78rem; font-weight: 600; color: var(--muted, #5b6470); text-align: left; padding: .2rem .3rem; }
.cal .cal-wd-short { display: none; }
.cal .cal-month td { border: 1px solid var(--line, #e5e7eb); vertical-align: top; padding: .2rem; height: 6.4rem; }
.cal .cal-month td.cal-other { background: #f7f8fa; }
.cal .cal-month td.cal-other .cal-daynum-n { color: #6b7280; }
.cal .cal-month td.cal-today { box-shadow: inset 0 0 0 2px #2f5f93; background: #f2f6fb; }
.cal .cal-month td.cal-selected { background: #fffbea; }
.cal .cal-daynum {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; width: 100%;
  background: transparent; border: 0; padding: .05rem .1rem; color: inherit; border-radius: 4px; text-align: left; min-height: 1.6rem;
}
.cal .cal-daynum:hover { background: #eef2f7; }
.cal .cal-daynum-n { font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.cal .cal-dots { display: none; }
.cal .cal-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.cal .cal-dot-more { font-size: .65rem; font-weight: 700; }
.cal .cal-more {
  background: transparent; border: 0; color: #1f4f82; text-decoration: underline; font-size: .76rem; padding: 0 .2rem;
}
.cal .cal-selected-day { margin-top: .8rem; }
.cal .cal-hint { color: var(--muted, #5b6470); font-size: .85rem; margin: .3rem 0; }

/* ---------- week ---------- */
.cal .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal .cal-week-day { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: .35rem; min-height: 9rem; }
.cal .cal-week-day.cal-today { box-shadow: inset 0 0 0 2px #2f5f93; background: #f2f6fb; }
.cal .cal-week-head { font-size: .8rem; margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.cal .cal-week-wd { font-weight: 700; }
.cal .cal-empty-day { color: #6b7280; font-size: .8rem; margin: .2rem 0; }

/* ---------- list ---------- */
.cal .cal-day { margin: 0 0 .9rem; }
.cal .cal-day-head { font-size: .92rem; margin: 0 0 .3rem; padding-bottom: .2rem; border-bottom: 1px solid var(--line, #e5e7eb); }
.cal .cal-day-today { color: #1f4f82; }
.cal .cal-today-line { margin: 0 0 .9rem; padding: .3rem .5rem; border-left: 3px solid #2f5f93; background: #f2f6fb; font-size: .9rem; }
.cal .cal-rows { list-style: none; margin: 0; padding: 0; }
.cal .cal-row { margin: 0 0 .3rem; }
.cal .cal-row-btn {
  display: grid; grid-template-columns: 6.8rem 8.4rem minmax(0, 1fr) auto; gap: .5rem; align-items: center;
  width: 100%; text-align: left; background: var(--cal-tint, #eef0f3); color: var(--ink, #1f2933);
  border: 0; border-left: 5px solid var(--cal-line, #4f5d6b); border-radius: 6px; padding: .4rem .6rem; font-size: .88rem;
}
.cal .cal-row-btn:hover { filter: brightness(.97); }
.cal .cal-row-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.cal .cal-row-kind { display: inline-flex; align-items: center; gap: .3rem; }
.cal .cal-row-kind .cal-icon { color: var(--cal-line, #4f5d6b); }
.cal .cal-row-course { font-weight: 700; }
.cal .cal-row-extra { color: #414b57; }
.cal .cal-row-status { display: inline-flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.cal .cal-undated { margin-top: 1.2rem; }

/* ---------- states ---------- */
.cal .cal-empty { color: #414b57; background: #f7f8fa; border: 1px dashed #c9ced4; border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .8rem; }
.cal .cal-error { background: #fdf3e3; border: 1px solid #f0d9ad; color: #6b4a06; border-radius: 8px; padding: .6rem .8rem; }

/* ---------- details ---------- */
.cal .cal-detail {
  border: 0; border-radius: 12px; padding: 0; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25); color: var(--ink, #1f2933);
}
.cal .cal-detail::backdrop { background: rgba(15, 23, 42, .45); }
.cal .cal-detail-inner { border-top: 6px solid var(--cal-line, #4f5d6b); padding: .9rem 1rem 1rem; }
.cal .cal-detail-head { display: flex; align-items: flex-start; gap: .5rem; }
.cal .cal-detail-head .cal-icon { width: 1.3rem; height: 1.3rem; margin-top: .2rem; color: var(--cal-line, #4f5d6b); }
.cal .cal-detail-head h3 { flex: 1; font-size: 1.05rem; margin: 0; }
.cal .cal-detail-course { display: block; font-size: .85rem; color: #414b57; font-weight: 600; }
.cal .cal-close { background: #eef0f3; color: var(--ink, #1f2933); border: 0; border-radius: 8px; min-width: 2.25rem; min-height: 2.25rem; font-size: 1.2rem; line-height: 1; }
.cal .cal-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .35rem .8rem; margin: .8rem 0; font-size: .9rem; }
.cal .cal-facts dt { font-weight: 600; color: #414b57; }
.cal .cal-facts dd { margin: 0; }
.cal .cal-detail-sub { font-size: .9rem; margin: .6rem 0 .3rem; }
.cal .cal-reasons { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .88rem; }
.cal .cal-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; }
.cal .cal-links a { color: #1f4f82; font-weight: 600; }
.cal .cal-readonly { color: #5b6470; font-size: .8rem; margin: .6rem 0 0; }

/* ---------- help (when the dashboard's help file is not there) ---------- */
.cal .cal-help { display: inline-block; position: relative; flex: 0 0 auto; font-size: .85rem; font-weight: 400; }
.cal .cal-help summary {
  display: block; list-style: none; cursor: pointer; width: 1.5rem; height: 1.5rem; border-radius: 50%; text-align: center;
  background: #e6eef8; color: #1f4f82; font-weight: 700; line-height: 1.5rem; padding: 0;
}
.cal .cal-help summary::-webkit-details-marker { display: none; }
.cal .cal-help-body {
  position: absolute; z-index: 5; left: 0; top: 1.9rem; width: min(22rem, 80vw); background: #fff;
  border: 1px solid var(--line, #e5e7eb); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); padding: .4rem .8rem;
}

/* ---------- narrow screens (a phone, 375px) ---------- */
@media (max-width: 700px) {
  .cal { padding: .8rem .7rem; }
  .cal .cal-bar { gap: .5rem; }
  .cal .cal-course { flex-basis: 100%; }
  .cal .cal-wd-long { display: none; }
  .cal .cal-wd-short { display: inline; }
  .cal .cal-month th { text-align: center; padding: .15rem 0; }
  .cal .cal-month td { height: 3.3rem; padding: .1rem; }
  .cal .cal-cell-items { display: none; }
  .cal .cal-daynum { flex-direction: column; align-items: center; justify-content: flex-start; min-height: 3rem; padding: .1rem 0; }
  .cal .cal-daynum .cal-today-tag { font-size: .55rem; padding: 0 .15rem; }
  .cal .cal-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
  .cal .cal-week { grid-template-columns: 1fr; }
  .cal .cal-week-day { min-height: 0; }
  .cal .cal-row-btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time status" "kind kind" "main main"; row-gap: .15rem; }
  .cal .cal-row-time { grid-area: time; }
  .cal .cal-row-kind { grid-area: kind; }
  .cal .cal-row-main { grid-area: main; }
  .cal .cal-row-status { grid-area: status; }
  .cal .cal-facts { grid-template-columns: 1fr; gap: .1rem; }
  .cal .cal-facts dd { margin-bottom: .45rem; }
  /* the dashboard asks for 40px touch targets on phones (styles.css); keep the help a circle */
  .cal .cal-help summary { width: 2.5rem; height: 2.5rem; min-height: 2.5rem; line-height: 2.5rem; justify-content: center; }
}