.experience-calendar-card {
  --calendar-ink: var(--text-primary, #17313b);
  --calendar-muted: var(--text-muted, #667b84);
  --calendar-line: var(--experience-line, #d6e0e3);
  color: var(--calendar-ink);
}
.experience-calendar-card .experience-calendar-intro h2 { margin: 0; }
.experience-calendar-card .experience-calendar-intro p { margin: 6px 0 0; font-size: 15px; }
.experience-calendar-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.experience-calendar-navigation > button:first-child,
.experience-calendar-navigation > button:nth-child(3) {
  width: 44px;
  min-width: 44px;
  min-height: 48px;
  padding: 0 !important;
  font-size: 20px;
}
.experience-calendar-navigation > button:first-child { order: 1; }
.experience-calendar-navigation > label[aria-label="Month"] { order: 2; }
.experience-calendar-navigation > label[aria-label="Year"] { order: 3; }
.experience-calendar-navigation > button:nth-child(3) { order: 4; }
.experience-calendar-navigation .experience-calendar-today { order: 5; }
.experience-calendar-month-title { display: none; }
.experience-calendar-month-title #calendar-month-label { min-width: 0!important; font-size: 19px; }
.experience-calendar-navigation label { display: block; font-size: 12px; font-weight: 600; color: var(--calendar-muted); }
.experience-calendar-navigation select,
.experience-calendar-navigation input { min-height: 42px; margin: 0; padding: 8px 10px; border: 1px solid var(--calendar-line); border-radius: 8px; background: #fff; color: var(--calendar-ink); font-size: 14px; }
.experience-calendar-navigation #experience-calendar-month { width: 130px; }
.experience-calendar-navigation #experience-calendar-year { width: 82px; }
/* Shared action primitives deliberately wrap long labels. This short navigation
   control must stay on one line, including after action annotation. */
.experience-calendar-navigation .experience-calendar-today { min-height: 48px; padding: 8px 14px; white-space: nowrap !important; overflow-wrap: normal; }
.experience-calendar-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--calendar-muted); font-size: 13px; }
.experience-calendar-filter #calendar-category-filter { min-height: 40px; margin: 0; padding: 7px 10px; font-size: 14px; }
.experience-calendar-month-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.experience-calendar-grid-panel,
.experience-calendar-agenda { min-width: 0; }
.experience-calendar-section-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--calendar-ink); }
.experience-calendar-grid-panel > .grid:first-of-type { gap: 2px; margin-bottom: 4px; }
.experience-calendar-grid-panel > .grid:first-of-type > div { padding: 5px 1px; font-size: 11px; color: var(--calendar-muted); }
.experience-calendar-grid-panel #calendar-grid { gap: 2px; grid-auto-rows: minmax(48px, auto); }
.experience-calendar-card .calendar-event-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 3px 1px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--calendar-ink);
  font-size: 14px;
  line-height: 1.1;
  box-shadow: none;
}
.experience-calendar-card .calendar-event-day:hover { background: #f2f4ef; }
.experience-calendar-card .calendar-event-day[aria-current="date"] { font-weight: 700; box-shadow: none; }
.experience-calendar-card .calendar-event-day[aria-pressed="true"] { isolation: isolate; border-color: transparent; background: transparent; color: #fff; font-weight: 700; }
.experience-calendar-card .calendar-event-day[aria-pressed="true"]::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: min(38px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--heading-accent, #76682b); transform: translate(-50%, -50%); }
.experience-calendar-card .calendar-event-day[aria-pressed="true"] .calendar-event-dots i { outline: 1px solid rgba(255,255,255,.8); }
.experience-calendar-card .calendar-event-dots { height: 5px; gap: 2px; font-size: 8px; }
.experience-calendar-card .calendar-event-dots i { width: 4px; height: 4px; border-radius: 50%; }
.experience-calendar-agenda { padding: 14px; border: 1px solid var(--calendar-line); border-radius: 10px; background: #fff; }
.experience-calendar-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.experience-calendar-agenda-head .experience-calendar-section-title { margin: 0; }
.experience-calendar-agenda-head button { min-height: 38px; padding: 7px 12px; white-space: nowrap; }
.experience-calendar-agenda-date { margin: 4px 0 8px; color: var(--calendar-muted); font-size: 13px; }
.experience-calendar-agenda-events { display: grid; gap: 8px; }
.experience-calendar-agenda-event { min-width: 0; padding: 9px 0; border-top: 1px solid var(--calendar-line); overflow-wrap: anywhere; }
.experience-calendar-agenda-event strong { font-size: 14px; line-height: 1.4; }
.experience-calendar-agenda-event > p { margin: 4px 0 0; color: var(--calendar-muted); font-size: 12px; }
.experience-calendar-agenda-event .experience-calendar-agenda-notes { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.experience-calendar-event-open { margin-top: 7px; padding: 3px 0; border: 0; background: transparent; color: var(--heading-accent, #76682b); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.experience-calendar-list-heading { margin: 24px 0 8px; font-size: 18px; }
#calendar-view .experience-calendar-upcoming { margin-top: 14px; border-top: 1px solid var(--calendar-line); }
#calendar-view .experience-calendar-upcoming > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0; padding: 8px 0; list-style: none; cursor: pointer; }
#calendar-view .experience-calendar-upcoming > summary::-webkit-details-marker { display: none; }
#calendar-view .experience-calendar-upcoming > summary::after { content: '⌄'; display: inline-block; font-size: 24px; font-weight: 400; line-height: 1; transition: transform .15s ease; }
#calendar-view .experience-calendar-upcoming[open] > summary::after { transform: rotate(180deg); }
#calendar-view .experience-calendar-upcoming > summary:focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: 2px; }
#calendar-view .calendar-list-open { display: grid; grid-template-columns: 10px 56px minmax(0,1fr) 28px; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--calendar-line); border-radius: 0; background: transparent; color: var(--calendar-ink); font: inherit; text-align: left; cursor: pointer; }
#calendar-view .calendar-list-open:hover { background: #f2f4ef; }
#calendar-view .calendar-list-open:focus-visible { outline: 3px solid var(--v1-focus, #76682b); outline-offset: -3px; }
#calendar-view .calendar-list-open .calendar-colour-swatch { width: 9px; height: 9px; margin: 0; }
#calendar-view .calendar-list-open time { grid-column: auto; font-size: 12px; white-space: nowrap; }
#calendar-view .calendar-list-open .calendar-list-content { grid-column: auto; }
#calendar-view .calendar-list-open .calendar-list-content strong { display: block; font-size: 14px; line-height: 1.3; }
#calendar-view .calendar-list-open .calendar-event-meta { margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
#calendar-view .calendar-list-eye { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--heading-accent, #76682b); }
#calendar-view .calendar-list-eye svg { width: 20px; height: 20px; }
.experience-shell .calendar-list-event { grid-template-columns: 9px 62px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; line-height: 1.4; }
.calendar-list-event time { color: var(--calendar-muted); font-size: 12px; font-weight: 600; }
.calendar-list-content strong { font-size: 14px; }
.calendar-list-content .calendar-event-meta { margin: 2px 0 0; font-size: 12px; }
.calendar-list-content .calendar-event-notes { font-size: 13px; line-height: 1.4; }
.experience-calendar-card .experience-calendar-tools { margin-top: 18px; padding-top: 8px; }
.experience-calendar-card .experience-calendar-tools > summary { min-height: 40px; padding: 8px 0; font-size: 14px; }
.experience-calendar-card .experience-calendar-tools .lesson-toolbar { margin-top: 8px; }
.experience-calendar-card .experience-calendar-tools .lesson-toolbar button { min-height: 40px; }
.experience-calendar-day .calendar-event-card { border: 1px solid var(--experience-line, #d6e0e3); border-left: 1px solid var(--experience-line, #d6e0e3); border-radius: 8px; }
/* The app header and mobile navigation are fixed; the calendar dialog must sit above both. */
.experience-shell #calendar-day-modal { z-index: 1000; }
@media (max-width: 1023px) {
  #calendar-view { padding-bottom: 120px !important; }
}
@media (max-width: 760px) {
  #calendar-view { padding-top: 8px; }
  #calendar-view .experience-communication-heading { min-height: 0; margin-bottom: 10px !important; padding: 0 2px !important; }
  #calendar-view .experience-communication-heading #back-from-calendar-btn { display: none !important; }
  #calendar-view .experience-communication-heading .retro-header-text { font-size: 26px; }
  #calendar-view #school-calendar-card { padding: 14px !important; }
  .experience-calendar-navigation > button:first-child,
  .experience-calendar-navigation > button:nth-child(3) { width: 44px; min-width: 44px; padding: 0 !important; }
  /* The month selector and year field provide the same navigation on phones. */
  .experience-calendar-navigation { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(64px, .7fr) minmax(72px, .7fr); gap: 6px; align-items: center; margin-bottom: 8px; }
  .experience-calendar-navigation > button:first-child,
  .experience-calendar-navigation > button:nth-child(3) { display: none; }
  .experience-calendar-navigation > label[aria-label="Month"] { grid-column: 1; grid-row: 1; min-width: 0; }
  .experience-calendar-navigation > label[aria-label="Year"] { grid-column: 2; grid-row: 1; min-width: 0; }
  .experience-calendar-navigation #experience-calendar-month { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; }
  .experience-calendar-navigation #experience-calendar-year { width: 100%; box-sizing: border-box; padding: 8px; }
  .experience-calendar-navigation .experience-calendar-today { grid-column: 3; grid-row: 1; width: 100%; min-width: 72px; padding: 8px !important; }
  .experience-calendar-filter { align-items: center; gap: 8px; margin-bottom: 6px; }
  .experience-calendar-filter #calendar-category-filter { flex: 1; min-width: 0; }
  .experience-calendar-month-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .experience-calendar-grid-panel #calendar-grid { grid-auto-rows: minmax(44px, auto); }
  .experience-calendar-card .calendar-event-day { width: 100%; min-width: 0 !important; min-height: 44px; padding: 0; font-size: 13px; }
  .experience-calendar-agenda { padding: 12px; }
  #calendar-view .experience-calendar-agenda .calendar-day-empty { margin: 0; padding: 4px 0; line-height: 1.4; }
  #calendar-view #calendar-colour-legend { display: none; }
  #calendar-view .calendar-list-open { grid-template-columns: 9px 48px minmax(0,1fr) 24px; gap: 6px; }
}
@media (max-width: 360px) {
  #calendar-view #school-calendar-card { padding-inline: 10px !important; }
  .experience-calendar-navigation { grid-template-columns: minmax(0, 1fr) 76px 64px; }
  .experience-calendar-navigation .experience-calendar-today { min-width: 64px; }
  .experience-calendar-navigation #experience-calendar-year { padding-inline: 5px; }
}

/* Preserve the current release override for the shared action cascade. */
#calendar-view .experience-calendar-navigation .experience-calendar-today { white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all; }