:root {
  --bg: #e6e4de;
  --surface: #f2f2f2;
  --surface-2: #eef0f3; /* secondary surface for popovers, distinct from the calendar */
  --border: #e4e4e7;
  --text: #18181b;
  --muted: #71717a;
  --accent: #34c759; /* Apple system green (light) */
  /* Tint for hover backgrounds, focus rings, and selection highlights — same hue as --accent but
     semi-transparent so content on top stays readable without a text-color flip. */
  --accent-soft: rgba(52, 199, 89, 0.15);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem;
}

.error {
  color: #b91c1c;
}

/* ── School / calendar view ──────────────────────────────────────────── */
.school-title {
  font-size: 1.4rem;
  margin: 0 0 0.15rem;
}
.school-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

#calendar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow:
    0 1px 2px rgba(24, 24, 27, 0.04),
    0 8px 24px rgba(24, 24, 27, 0.05);
}

/* Directional slide when navigating between ranges (prev/next via the buttons or ←/→ keys). app.js
   tags #calendar with .cal-nav-next / .cal-nav-prev right after the new range renders, and clears it
   on animationend. The grid slides in from the side we moved toward (next → from the right, prev →
   from the left) while the harness clips the brief off-edge overflow. */
#calendar.cal-nav-next .fc-view-harness,
#calendar.cal-nav-prev .fc-view-harness {
  overflow: hidden;
}
#calendar.cal-nav-next .fc-view-harness > * {
  animation: cal-slide-next 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
#calendar.cal-nav-prev .fc-view-harness > * {
  animation: cal-slide-prev 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cal-slide-next {
  from {
    opacity: 0.5;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes cal-slide-prev {
  from {
    opacity: 0.5;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #calendar.cal-nav-next .fc-view-harness > *,
  #calendar.cal-nav-prev .fc-view-harness > * {
    animation: none;
  }
}

/* ── FullCalendar modern restyle ─────────────────────────────────────────
   FullCalendar's defaults look dated; this leans on its CSS variables plus a
   handful of class overrides to get an airy, rounded, soft-shadow feel. */
.fc {
  --fc-border-color: #f0f0f2;
  --fc-page-bg-color: #ffffff;
  --fc-today-bg-color: transparent; /* today is shown by a circled date number, not a fill */
  /* Date-selection highlight — override FC's default muddy teal (rgba(188,232,241,.3)) with our
     soft accent, the same tint hover uses, so selection stays in the accent family. */
  --fc-highlight-color: var(--accent-soft);
  --fc-now-indicator-color: #ef4444;
  --fc-event-border-color: transparent;
  font-size: 0.9rem;
}

/* Toolbar */
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1.1rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fc .fc-toolbar-title {
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* Buttons → ghost pills, accent when active */
.fc .fc-button-primary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 550;
  font-size: 0.82rem;
  text-transform: capitalize;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  box-shadow: none !important;
  transition:
    background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.fc .fc-button-primary:hover {
  background: #f1f1f3;
  border-color: var(--border);
  color: var(--text);
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.fc .fc-button-primary:disabled {
  background: transparent;
  border-color: var(--border);
  color: #c4c4c8;
  opacity: 1;
}
/* Pill grouping: round only the outer edges of a button group */
.fc .fc-button-group {
  gap: 0.25rem;
}
.fc .fc-button-group .fc-button {
  border-radius: 999px !important;
}

/* Grid frame + lines */
.fc .fc-scrollgrid {
  border-radius: 12px;
  overflow: hidden;
}
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: var(--fc-border-color);
}
.fc .fc-timegrid-slot {
  height: 2.6em;
}
.fc .fc-timegrid-slot-minor {
  border-top-style: none;
}

/* Column headers */
.fc .fc-col-header-cell {
  padding: 0.55rem 0;
  background: #fbfbfc;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The top-left corner cell (the time-axis header above the time column) belongs visually to the
   day-of-week header row, so match its background to the column headers — not the grid body.
   Scoped to the header SECTION so it never touches the body's time-label cells (which share the
   .fc-timegrid-axis class). */
.fc .fc-scrollgrid-section-header .fc-timegrid-axis {
  background: #fbfbfc;
}
.fc .fc-col-header-cell-cushion {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Week/day header: weekday label stacked over the day number. "Today" is marked by
   circling just the number (gcal/apple style), not by shading the column. */
.fc .fc-timegrid .dh-num {
  margin: 3px auto 0;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 600;
  text-transform: none;
}
.fc .fc-timegrid .fc-day-today .dh-num {
  background: var(--accent);
  color: #fff;
}
/* Month: today's date number just gets the accent fill — the 2em box metrics are shared by every
   day number (below), so toggling "today" changes only color, never the row height. */
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
/* Whole header cell is clickable (see dayHeaderDidMount): highlight the box on hover
   and suppress the navLink's underline so only the box reads as the hit target.
   `.is-hover` mirrors `:hover` for when a popover overlay is up and intercepting the real
   pointer events — openModal drives it from the overlay's mousemove probe. */
.fc .fc-timegrid .fc-col-header-cell:hover,
.fc .fc-timegrid .fc-col-header-cell.is-hover {
  background: var(--accent-soft);
}
/* Tint hover is semi-transparent, so text stays legible — no color flip needed. */
.fc .fc-timegrid .fc-col-header-cell:hover .fc-col-header-cell-cushion,
.fc .fc-timegrid .fc-col-header-cell:hover .dh-num,
.fc .fc-timegrid .fc-col-header-cell.is-hover .fc-col-header-cell-cushion,
.fc .fc-timegrid .fc-col-header-cell.is-hover .dh-num {
  color: var(--text);
}
.fc .fc-timegrid .fc-col-header-cell-cushion:hover {
  text-decoration: none;
}
/* Month view: hold every day cell open to a real minimum height, so an empty month (summer,
   or a school with nothing on the calendar yet) still reads as a full-size grid instead of a
   squat strip of rows. A PLAIN length only — max(100%, 7rem) silently no-ops here (the 100%
   can't resolve in the auto-height table, and an unresolvable percentage voids the whole
   expression), and FC's own min-height: 100% that this replaces is a no-op in this layout for
   the same reason. Days with events grow past the floor as usual; a day still fills its row
   when a neighbor runs taller (table cells stretch). index.html's reserveGridHeight computes
   the month grid's height from this floor — keep the two in sync. */
.fc .fc-daygrid-day-frame {
  min-height: 7rem;
}
/* Month view: each day cell gets a "top bar" — the date-number row, which already spans the
   full width at exactly the number's height. Hovering anywhere in the box tints that bar
   (same accent-soft highlight as the week header), and the date number no longer underlines. */
.fc .fc-daygrid-day-top {
  flex-direction: row; /* override FC's row-reverse so flex `order` controls sides */
  align-items: center; /* vertically center the number and the pill on the bar */
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.fc .fc-daygrid-day-top:hover,
.fc .fc-daygrid-day-top.is-hover {
  background: var(--accent-soft);
}
/* Tint hover is semi-transparent — date number stays its normal color. */
.fc .fc-daygrid-day-top:hover .fc-daygrid-day-number,
.fc .fc-daygrid-day-top.is-hover .fc-daygrid-day-number {
  color: var(--text);
}
/* Date number always at the far right, regardless of DOM order. EVERY day gets the same 2em box the
   "today" highlight fills, so today's circle doesn't make its row taller than the others —
   the space is always reserved. */
.fc .fc-daygrid-day-top .fc-daygrid-day-number {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  margin: 2px 2px 2px auto; /* auto-left keeps the circle pushed to the bar's right edge */
  box-sizing: border-box;
  border-radius: 50%;
}
/* Outspecify FullCalendar's navLink ".fc a[data-navlink]:hover { text-decoration: underline }". */
.fc .fc-daygrid-day-top a.fc-daygrid-day-number:hover {
  text-decoration: none;
}

/* Per-day schedule label, shown under the day number in every view as a tag-style pill —
   rounded, tinted, led by the shared tag glyph so it reads unmistakably as a label — the
   same symbol as the modal/popover label chips (.tag). This is THE canonical way a schedule
   label is presented. Slot is created at mount and filled in app.js (paintDayLabel /
   renderDayLabels). */
.fc .day-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  margin-top: 3px;
  padding: 1px 7px 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
}
.fc .day-label[hidden] {
  display: none; /* class selector would otherwise beat the UA [hidden] rule */
}
/* The tag glyph: holds its size in narrow columns while the text ellipsizes beside it. */
.fc .day-label .tag-ico {
  display: inline-flex;
  flex: none;
}
/* Text shrinks/ellipsizes in narrow columns; the tag glyph stays put (flex: none above). */
.fc .day-label-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Month: the pill sits in the top bar, far left (date number is pushed far right above).
   `order: 1` keeps it on the left no matter what order FC mounts the children in, and the
   bar's `align-items: center` vertically centers it against the number — no magic offset.
   Clicking/hovering the pill bubbles to the bar, so it still opens the day + tints. */
.fc .fc-daygrid-day-top > .day-label {
  order: 1;
  margin: 0 0 0 4px;
  min-width: 0; /* allow the text to ellipsize in narrow columns */
}
/* Week/day header: stack the weekday/number cushion and the pill in a centered column so
   the pill always lands on its own line under the number — even in the wide day view, where
   a plain sibling would otherwise sit beside it. (The pill lives here, not in the cushion,
   so FullCalendar's content re-renders can't reorder it.) */
.fc .fc-timegrid .fc-scrollgrid-sync-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Time-axis labels */
.fc .fc-timegrid-slot-label-cushion,
.fc .fc-timegrid-axis-cushion {
  color: var(--muted);
  font-size: 0.72rem;
}

/* Events → soft tinted chips with a left accent bar */
.fc .fc-event {
  border: none;
  border-radius: 8px;
  padding: 2px 6px;
  box-shadow: none;
  cursor: pointer;
  transition: filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.fc .fc-event:hover {
  filter: brightness(0.97);
}
/* Left accent bar — a straight inset line drawn with ::before rather than border-left, which
   would bend around the chip's rounded corners. Each period kind sets --ev-bar for its color. */
.fc .fc-timegrid-event {
  padding-left: 10px; /* clear the 3px bar at x=3 plus a small gap */
}
.fc .fc-timegrid-event::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 999px;
  background: var(--ev-bar, transparent);
}
/* Both vertical resize handles drag either way (up to shorten, down to lengthen), so show a
   two-headed cursor instead of FullCalendar's one-way n-resize / s-resize defaults. */
.fc .fc-v-event .fc-event-resizer-start,
.fc .fc-v-event .fc-event-resizer-end {
  cursor: ns-resize;
}
.fc .fc-event-time {
  font-weight: 600;
  font-size: 0.72rem;
  opacity: 0.85;
}
.fc .fc-event-title {
  font-weight: 600;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Month-view (daygrid) events: the title sits in a container inside a frame; both must allow
   shrinking below content width (min-width:0) and clip so a long name can't spill into the
   neighboring day's column. fc-sticky in particular sizes to content unless clipped. */
.fc .fc-daygrid-event .fc-event-main-frame,
.fc .fc-daygrid-event .fc-event-title-container {
  min-width: 0;
  overflow: hidden;
}
/* Condensed one-line layout for short events (name + start time), gcal-style. */
.fc .fc-compact {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
  font-size: 0.78rem;
}
.fc .fc-compact-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc .fc-compact-time {
  flex: none;
  font-weight: 500;
  opacity: 0.8;
}
.fc .fc-compact.xs {
  font-size: 0.66rem; /* ≤15-min blocks: shrink so the single line fits the 15-min floor */
}
/* FullCalendar colors the inner .fc-event-main white by default (--fc-event-text-color),
   which overrides the per-palette color set on .fc-event below. Inherit it instead so the
   .cN text colors actually apply (was white-on-white in light mode). */
.fc .fc-event .fc-event-main {
  color: inherit;
}

/* now-indicator: thin red line + dot */
.fc .fc-timegrid-now-indicator-line {
  border-color: var(--fc-now-indicator-color);
  border-width: 2px 0 0;
}
.fc .fc-timegrid-now-indicator-arrow {
  display: none;
}
/* Let the dot bleed left onto the column's gridline without being clipped by FC's
   column containers. */
.fc .fc-timegrid-col-frame,
.fc .fc-timegrid-now-indicator-container {
  overflow: visible;
}
.fc .fc-timegrid-now-indicator-line {
  position: relative;
  z-index: 1000; /* float the whole indicator above events and gridlines */
}
.fc .fc-timegrid-now-indicator-line::before {
  content: '';
  position: absolute;
  left: -6px; /* center the 12px dot on the column's left vertical gridline */
  top: -1px; /* empirically aligns the circle's center to the line's rendered position */
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fc-now-indicator-color);
  z-index: 1001; /* very top of the stack */
}

/* Event colors by period kind (assigned in app.js). Every kind shares the same soft-tint chip
   style with a solid --ev-bar accent line: classes tint the site accent green (--accent is
   mode-aware, so light uses the light accent and dark the dark accent); lunch / breaks = warm
   amber so downtime stands apart at a glance. */
.fc .fc-event.ev-class {
  background: var(--accent-soft);
  color: #15803d;
  --ev-bar: var(--accent);
}
.fc .fc-event.ev-break {
  background: #fff4e6;
  color: #9a3412;
  --ev-bar: #f59e0b;
}
/* Draft placeholder while quick-creating a period (not yet saved) — dashed, translucent. */
.fc .fc-event.draft {
  background: var(--accent-soft);
  color: #15803d;
  border: 1px dashed var(--accent); /* dashed outline keeps the draft distinct from a saved event */
  opacity: 0.85;
}
/* Instantaneous markers (a bell with no duration) — distinct red */
.fc .fc-event.instant {
  background: #fef2f2;
  color: #991b1b;
  --ev-bar: #ef4444;
}

/* ── Info-box modal ──────────────────────────────────────────────────────── */
/* Lock page scroll while a popover is open. */
/* Google-Calendar-style popover: a transparent full-screen layer that only catches
   outside-clicks (no dimming). The card is a separate body child (not nested here) so it
   sits in page space and scrolls natively with its anchor; it's positioned next to the
   clicked item via JS and stacked just above this layer. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 100;
}
.modal {
  position: absolute; /* page-space left/top set by placePopover() in app.js */
  z-index: 101; /* above the click-catch overlay (it's a sibling now, not a child) */
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: 80vh;
  overflow: auto;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.18);
  transform-origin: top center;
  transition:
    opacity 0.16s ease,
    transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Enter (just spawned) and leave (closing) share the offset/transparent state; the resting
   state is opacity 1 / no transform, so the card slides in from — and back toward — its
   anchor while fading. --enter-x is set per-popover in placePopover() for the slide side. */
.modal.entering,
.modal.leaving {
  opacity: 0;
  transform: translateX(var(--enter-x, 0)) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.modal-head h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}
.modal-head .sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
/* Shared modal/popover close (Lucide x) — account settings, school settings, calendar popovers.
   Uses an SVG rather than the × glyph, which renders on the font's math axis and sits slightly
   below a flex-centered box; the symmetric viewBox centers true. */
.settings-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0; /* drop UA button padding so the flex content box is exactly 2rem — even margins all round */
  border: none;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.settings-close svg {
  display: block;
}
.settings-close:hover {
  background: var(--border);
  color: var(--text);
}
.modal .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  vertical-align: middle;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.modal .tag .tag-ico {
  display: inline-flex;
}
.modal .empty {
  color: var(--muted);
  font-size: 0.9rem;
}
.modal .info-row {
  font-size: 1rem;
  font-weight: 550;
  margin: 0.6rem 0 0;
}
.modal .note {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.9rem 0 0.2rem;
}
.modal .sep {
  border-top: 1px solid var(--border);
  margin: 1rem 0 0.9rem;
}

/* Forms inside modals */
.field {
  display: block;
  margin: 0.6rem 0 0;
}
.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.field input,
.field select,
.select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--text);
}
.field input[disabled] {
  opacity: 0.5;
}
.edit-form .check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}
.edit-form .check input {
  width: auto;
}
/* "End" field label carrying its own on/off checkbox (unchecked = instant marker, no end). */
.field-label.end-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.field-label.end-toggle input {
  width: auto;
  margin: 0;
}

/* Buttons */
.btn-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.btn {
  flex: 1;
  min-width: 90px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  border-color: rgba(255, 255, 255, 0.75);
}
.btn.danger {
  color: #dc2626;
  border-color: #f0c2c2;
}
.btn.danger:hover {
  background: #fef2f2;
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (prefers-color-scheme: dark) {
  .btn.danger {
    color: #f87171;
    border-color: #50312f;
  }
  .btn.danger:hover {
    background: rgba(239, 68, 68, 0.14);
  }
}

/* ── Dark mode (follows the device setting) ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #202020;
    --surface: #2a2a2a;
    --surface-2: #333333; /* secondary surface for popovers, lifts above the calendar */
    --border: #404040;
    --text: #e8e8e8;
    --muted: #999999;
    --accent: #009e47; /* dark-mode accent */
    --accent-soft: rgba(0, 158, 71, 0.18);
  }

  .fc {
    --fc-border-color: #3a3a3a;
    --fc-page-bg-color: var(--surface);
    --fc-today-bg-color: transparent;
    --fc-highlight-color: var(--accent-soft);
    --fc-now-indicator-color: #f87171;
  }
  .fc .fc-button-primary:hover {
    background: #333333;
  }
  /* A disabled control (e.g. "today" when today is already in view) needs a clearly faded look
     on dark — the light-mode gray reads as normal text here. Dim the text and fade the whole pill. */
  .fc .fc-button-primary:disabled {
    color: #666666;
    border-color: #2e2e2e;
    opacity: 0.6;
  }
  .fc .fc-col-header-cell,
  .fc .fc-scrollgrid-section-header .fc-timegrid-axis {
    background: #2e2e2e;
  }

  /* Dark tints: --accent-soft is already the dark accent's tint, but the text and bar need
     brighter greens than the dark --accent (#009e47) to stay legible on near-black. */
  .fc .fc-event.ev-class {
    background: var(--accent-soft);
    color: #b7f0c8;
    --ev-bar: #34c759;
  }
  .fc .fc-event.draft {
    color: #b7f0c8;
    border-color: #34c759;
  }
  .fc .fc-event.ev-break {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd9a8;
    --ev-bar: #fbbf24;
  }
  .fc .fc-event.instant {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
    --ev-bar: #f87171;
  }
}