/*
  calendar.css - THE PRIMER'S CLASS CALENDAR (structure only; R-1023-11, REQ-CAL-001..011)
  ===========================================================================
  Layout, sizes, border widths/styles and text decoration for the console class
  calendar. ZERO colour here: every colour lives in calendar-render.css (tokens
  only), so with no Render applied the calendar still reads in greyscale (borders
  fall back to currentColor). Law: controls keep the 44px target and the 5px
  radius cap (bento-grid.css); the week grid is the desktop surface, the phone gets
  the Day / Agenda list (REQ-CAL-002 AC-5).

  Geometry is driven by custom properties set inline by the components:
    --cal-startmin / --cal-durmin : minutes from the grid's first hour / length
    --cal-lane / --cal-lanes      : side-by-side placement of concurrent classes
    --cal-hour                    : height of one hour (set here)
  Style colours are NOT here. A block only carries data-style-slot="1..8"; the skin
  maps each slot to colours (calendar-render.css documents the token map).
*/

.bu-cal {
  --cal-hour: 4rem;
  --cal-gutter: 3.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--structure-gap-md);
  align-items: start;
}

.bu-cal.has-panel {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
}

/* #497: taking attendance is the #1 job of the drawer, so a check-in drawer is wider (names + the Check in button on one line, no cramped wrap). */
.bu-cal.has-panel:has(.bu-cal-panel[data-mode="CheckIn"]) {
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 32rem);
}

/* The header (toolbar, zone, filters, today rail) always spans the full width; only the calendar itself shares the row with the panel,
   so opening a class never squeezes the controls into a column. */
.bu-cal__head {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
}

.bu-cal__view {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
}

.bu-cal__panel {
  position: sticky;
  top: var(--structure-gap-md);
  max-height: calc(100vh - 2 * var(--structure-gap-md));
  overflow-y: auto;
  padding: var(--structure-gap-md);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
}

.bu-cal__panel h2,
.bu-cal__panel h3 {
  margin: 0 0 var(--structure-gap-sm);
}

/* ---- Toolbar ------------------------------------------------------------ */
.bu-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm) var(--structure-gap-md);
  align-items: center;
}

.bu-cal-toolbar__title {
  margin: 0;
  font-size: var(--structure-text-md);
  font-weight: var(--structure-weight-medium);
  min-width: 10rem;
}

/* #510: a pressed toolbar button (the active view) gets an inset bar along its bottom edge: a shape cue that does not depend on colour and,
   being a shadow, never changes the button's size (no bolder text, no thicker border). */
.bu-cal-toolbar [aria-pressed="true"] {
  box-shadow: inset 0 -4px 0 currentColor;
}

.bu-cal-group {
  display: inline-flex;
  gap: var(--structure-gap-xs);
  flex-wrap: wrap;
  align-items: center;
}

.bu-cal-zone {
  margin: 0;
  font-size: var(--structure-text-sm);
  flex: 1 1 auto;
  text-align: right;
}

/* BUG-6 (#422): compact header. The filters are a disclosure (open on a wide screen, collapsed on a phone); its summary only shows
   on a phone. Each filter is label + control on ONE row, so the whole filter bar is a single line on a desktop. */
.bu-cal-filterbox > summary {
  list-style: none;
  cursor: pointer;
  display: none;
  align-items: center;
  min-height: var(--structure-touch-min);
}

/* Wide screen: the summary only shows if the box was left closed (e.g. after resizing from a phone), so it can always be reopened. */
.bu-cal-filterbox:not([open]) > summary {
  display: inline-flex;
}

.bu-cal-filterbox > summary::-webkit-details-marker {
  display: none;
}

.bu-cal-filterbox > summary::after {
  content: "\25BE";
  margin-left: var(--structure-gap-xs);
}

.bu-cal-filterbox[open] > summary::after {
  content: "\25B4";
}

.bu-cal-filters .bu-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--structure-gap-xs);
}

.bu-cal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm) var(--structure-gap-md);
  align-items: end;
}

.bu-cal-filters .bu-field {
  margin-bottom: 0;
  min-width: 9rem;
}

.bu-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A legend chip is a toggle: swatch + the style NAME (text always carries the style, colour never alone). #510: it is drawn as a legend
   (no outline, calendar-render.css) but keeps the full touch target. */
.bu-cal-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--structure-gap-xs);
  min-height: var(--structure-touch-min);
  padding: 0 var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  font-size: var(--structure-text-sm);
  cursor: pointer;
}

.bu-cal-chip[aria-pressed="false"] {
  text-decoration: line-through;
}

.bu-cal-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 1.1rem;
  border-width: 0 0 0 4px;
  border-style: solid;
  flex: 0 0 auto;
}

/* ---- Today rail --------------------------------------------------------- */
.bu-cal-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm);
  align-items: center;
}

.bu-cal-rail__title {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--structure-text-base);
}

.bu-cal-rail .bu-cal-empty {
  padding: 0;
  text-align: left;
  font-size: var(--structure-text-sm);
}

.bu-cal-rail__item {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--structure-gap-xs) var(--structure-gap-md);
  padding: var(--structure-gap-xs) var(--structure-gap-md);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
}

.bu-cal-rail__item .bu-btn {
  align-self: flex-start;
}

/* ---- Time grid (Week / Day) -------------------------------------------- */
.bu-cal-grid {
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  overflow: hidden;
}

.bu-cal-grid__head,
.bu-cal-grid__allday,
.bu-cal-grid__cols {
  display: grid;
  grid-template-columns: var(--cal-gutter) repeat(var(--cal-days, 7), minmax(0, 1fr));
}

.bu-cal-grid__corner {
  min-height: 2rem;
}

.bu-cal-grid__dayhead {
  padding: var(--structure-gap-xs) var(--structure-gap-sm);
  text-align: center;
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-medium);
  border-left-width: 1px;
  border-left-style: solid;
}

.bu-cal-grid__dayhead button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  min-height: var(--structure-touch-min);
  line-height: var(--structure-touch-min);
  white-space: nowrap;
}

.bu-cal-grid__dayhead button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.bu-cal-grid__allday {
  border-top-width: 1px;
  border-top-style: solid;
}

.bu-cal-grid__alldaycell {
  min-width: 0;
  padding: var(--structure-gap-xs);
  border-left-width: 1px;
  border-left-style: solid;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bu-cal-grid__scroll {
  overflow-y: auto;
  max-height: max(18rem, calc(100vh - 22rem));
  border-top-width: 1px;
  border-top-style: solid;
}

.bu-cal-grid__hours {
  position: relative;
  height: calc(var(--cal-hours, 16) * var(--cal-hour));
}

.bu-cal-hour:first-child {
  transform: none;
}

.bu-cal-hour {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cal-i, 0) * var(--cal-hour));
  padding-right: var(--structure-gap-xs);
  text-align: right;
  font-size: var(--structure-text-xs);
  transform: translateY(-0.5em);
}

.bu-cal-col {
  position: relative;
  height: calc(var(--cal-hours, 16) * var(--cal-hour));
  border-left-width: 1px;
  border-left-style: solid;
  min-width: 0;
}

/* Empty-slot click target (mouse affordance; the keyboard route is the Add class button). */
.bu-cal-slot {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--cal-hour);
  top: calc(var(--cal-i, 0) * var(--cal-hour));
  border-top-width: 1px;
  border-top-style: dotted;
  cursor: cell;
}

/* ---- Class block -------------------------------------------------------- */
.bu-cal-block {
  position: absolute;
  top: calc(var(--cal-startmin, 0) * var(--cal-hour) / 60);
  height: calc(var(--cal-durmin, 60) * var(--cal-hour) / 60 - 2px);
  min-height: 1.75rem;
  left: calc(var(--cal-lane, 0) * 100% / var(--cal-lanes, 1) + 1px);
  width: calc(100% / var(--cal-lanes, 1) - 3px);
  box-sizing: border-box;
  margin: 0;
  padding: 2px var(--structure-gap-xs);
  overflow: hidden;
  text-align: left;
  font: inherit;
  font-size: var(--structure-text-xs);
  line-height: 1.25;
  border-width: 1px;
  border-left-width: 4px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  z-index: 1;
  container-type: inline-size;
}

/* BUG-7 (#423): in a narrow column (side-by-side classes, or the side panel open) the TITLE has priority: it may take three lines and
   the time / age line wraps instead of being cut to "12:00-13:00 · A...". Everything the block cannot show is in its tooltip (title)
   and its accessible name (aria-label), which carry the full text. */
@container (max-width: 9rem) {
  .bu-cal-block__name {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .bu-cal-block__meta {
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.bu-cal-block:focus-visible,
.bu-cal-item:focus-visible,
.bu-cal-chip:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 1px;
  z-index: 3;
}

.bu-cal-block__name {
  font-weight: var(--structure-weight-medium);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.bu-cal-block .bu-cal-tag {
  font-size: 0.6rem;
  padding: 0 3px;
  margin-right: 3px;
}

.bu-cal-block > * {
  flex: 0 0 auto;
  min-width: 0;
}

.bu-cal-block__meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The time and the age band are each one unbreakable unit, so a narrow phone Day column wraps BETWEEN them ("10:00" / "All ages")
   and never cuts "All ages" to "All age". */
.bu-cal-block__nb {
  display: inline-block;
  white-space: nowrap;
}

/* Non-colour style signal on the edge so a greyscale skin still tells styles apart (the style NAME is also in the text). */
.bu-cal-block[data-style-slot="2"], .bu-cal-item[data-style-slot="2"] { border-left-style: dashed; }
.bu-cal-block[data-style-slot="3"], .bu-cal-item[data-style-slot="3"] { border-left-style: dotted; }
.bu-cal-block[data-style-slot="4"], .bu-cal-item[data-style-slot="4"] { border-left-style: double; }
.bu-cal-block[data-style-slot="6"], .bu-cal-item[data-style-slot="6"] { border-left-style: dashed; }
.bu-cal-block[data-style-slot="7"], .bu-cal-item[data-style-slot="7"] { border-left-style: dotted; }
.bu-cal-block[data-style-slot="8"], .bu-cal-item[data-style-slot="8"] { border-left-style: double; }

.bu-cal-block.is-cancelled .bu-cal-block__name,
.bu-cal-item.is-cancelled .bu-cal-item__name,
.bu-cal-month__chip.is-cancelled {
  text-decoration: line-through;
}

.bu-cal-block.is-past {
  opacity: 0.8;
}

.bu-cal-tag {
  display: inline-block;
  padding: 0 4px;
  margin-right: 4px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  font-size: var(--structure-text-xs);
  font-weight: var(--structure-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* #469: a state tag is one word on one line: the narrow week chips broke "CANCELLED" mid-word ("CANCELLE / D") through the block's overflow-wrap.
     It stays whole and, if even that does not fit, is cut with an ellipsis (the chip's title and accessible name carry the full word). */
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ---- Events ------------------------------------------------------------- */
.bu-cal-event {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 2px var(--structure-gap-xs);
  text-align: left;
  font: inherit;
  font-size: var(--structure-text-xs);
  border-width: 2px;
  border-style: double;
  border-radius: var(--structure-radius-max);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A timed event sits in the time grid with the same geometry as a class block. */
.bu-cal-event--timed {
  position: absolute;
  top: calc(var(--cal-startmin, 0) * var(--cal-hour) / 60);
  height: calc(var(--cal-durmin, 60) * var(--cal-hour) / 60 - 2px);
  min-height: 1.75rem;
  left: calc(var(--cal-lane, 0) * 100% / var(--cal-lanes, 1) + 1px);
  width: calc(100% / var(--cal-lanes, 1) - 3px);
  white-space: normal;
  z-index: 1;
}

/* A closure is an all-day band, not an outlined block. */
.bu-cal-event--closure {
  border-style: solid;
  border-width: 1px;
  font-weight: var(--structure-weight-medium);
}

.bu-cal-event--draft {
  border-style: dashed;
}

/* ---- Lead bookings (slice D1, REQ-CAL-010) ------------------------------
   A private first class / appointment is its OWN block: same geometry as a class block, but a dashed double-weight outline and no style
   fill, so it can never be mistaken for a class even in greyscale. Colour (accent edge, card fill) is calendar-render.css. */
.bu-cal-appt {
  position: absolute;
  top: calc(var(--cal-startmin, 0) * var(--cal-hour) / 60);
  height: calc(var(--cal-durmin, 60) * var(--cal-hour) / 60 - 2px);
  min-height: 1.75rem;
  left: calc(var(--cal-lane, 0) * 100% / var(--cal-lanes, 1) + 1px);
  width: calc(100% / var(--cal-lanes, 1) - 3px);
  box-sizing: border-box;
  margin: 0;
  padding: 2px var(--structure-gap-xs);
  overflow: hidden;
  text-align: left;
  font: inherit;
  font-size: var(--structure-text-xs);
  line-height: 1.25;
  border-width: 2px;
  border-style: dashed;
  border-radius: var(--structure-radius-max);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.bu-cal-appt:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 1px;
  z-index: 3;
}

.bu-cal-appt__name {
  font-weight: var(--structure-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bu-cal-appt__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bu-cal-appt.is-noshow .bu-cal-appt__name {
  text-decoration: line-through;
}

.bu-cal-appt-chip,
.bu-cal-appt-item {
  border-style: dashed;
}

/* ---- Now line ----------------------------------------------------------- */
.bu-cal-nowline {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--cal-nowmin, 0) * var(--cal-hour) / 60);
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
  z-index: 2;
  pointer-events: none;
}

.bu-cal-nowline::before {
  content: "Now";
  position: absolute;
  left: 0;
  top: -0.8em;
  padding: 0 4px;
  font-size: var(--structure-text-xs);
  font-weight: var(--structure-weight-medium);
}

/* ---- Month ------------------------------------------------------------- */
.bu-cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  overflow: hidden;
}

.bu-cal-month__dow {
  padding: var(--structure-gap-xs);
  text-align: center;
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-medium);
}

.bu-cal-month__cell {
  min-height: 5rem;   /* #510: was 6.5rem; a week with classes grows to fit its chips, an empty week no longer takes a third of the screen */
  min-width: 0;
  padding: var(--structure-gap-xs);
  border-top-width: 1px;
  border-top-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bu-cal-month__daynum {
  all: unset;
  cursor: pointer;
  align-self: flex-start;
  min-width: 1.75rem;
  min-height: 1.75rem;
  text-align: center;
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-medium);
}

.bu-cal-month__daynum:focus-visible {
  outline: 2px solid currentColor;
}

.bu-cal-month__chip {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 1px 4px;
  font-size: var(--structure-text-xs);
  border-left-width: 3px;
  border-left-style: solid;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bu-cal-month__chip:focus-visible {
  outline: 2px solid currentColor;
}

.bu-cal-month__cell.is-outside .bu-cal-month__daynum {
  opacity: 0.55;
}

/* ---- Agenda ------------------------------------------------------------- */
.bu-cal-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
}

.bu-cal-agenda__day h3 {
  margin: 0 0 var(--structure-gap-xs);
  font-size: var(--structure-text-base);
}

.bu-cal-agenda__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
}

.bu-cal-item {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--structure-gap-sm);
  width: 100%;
  min-height: var(--structure-touch-min);
  padding: var(--structure-gap-xs) var(--structure-gap-sm);
  cursor: pointer;
  border-width: 1px;
  border-left-width: 4px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
}

.bu-cal-item__time {
  font-weight: var(--structure-weight-medium);
}

.bu-cal-item__meta {
  font-size: var(--structure-text-sm);
}

/* ---- Panel pieces ------------------------------------------------------- */
.bu-cal-panel__head {
  display: flex;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
  align-items: flex-start;
}

.bu-cal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm);
  margin: var(--structure-gap-md) 0;
}

/* #497: heading + live count + Mat door on ONE row, so the search box is the very next thing in a check-in drawer. */
.bu-cal-roster-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--structure-gap-xs) var(--structure-gap-sm);
  margin-bottom: var(--structure-gap-xs);
}

.bu-cal-roster-head h3 {
  margin: 0;
}

.bu-cal-roster-head .bu-brick {
  margin: 0;
  flex: 1 1 auto;
}

/* #497: class details / edit / homework / More fold below the check-in (a disclosure; open for an upcoming class). */
.bu-cal-details {
  margin-top: var(--structure-gap-md);
}

.bu-cal-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: var(--structure-touch-min);
}

.bu-cal-details > summary::-webkit-details-marker {
  display: none;
}

.bu-cal-details > summary::after {
  content: "\25BE";
  margin-left: var(--structure-gap-xs);
}

.bu-cal-details[open] > summary::after {
  content: "\25B4";
}

.bu-cal-more {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
  margin-bottom: var(--structure-gap-md);
}

.bu-cal-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bu-cal-roster li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--structure-gap-sm);
  min-height: var(--structure-touch-min);
  border-top-width: 1px;
  border-top-style: solid;
}

.bu-cal-form {
  display: flex;
  flex-direction: column;
}

.bu-cal-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--structure-gap-sm);
}

.bu-cal-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
  border: 0;
  padding: 0;
  margin: 0 0 var(--structure-gap-md);
}

.bu-cal-days legend {
  font-size: var(--structure-text-label);
  font-weight: var(--structure-weight-medium);
  padding: 0;
  margin-bottom: var(--structure-gap-xs);
}

.bu-cal-empty {
  margin: 0;
  padding: var(--structure-gap-lg);
  text-align: center;
}

/* A one-line note (an empty period) must not push the grid down the page. */
.bu-cal-empty--note {
  padding: 0;
  text-align: left;
  font-size: var(--structure-text-sm);
}

/* ---- Phone: Day / Agenda lead, the squeezed week grid is not shown (REQ-CAL-002 AC-5, REQ-UNIFORM-008) ---- */
@media (max-width: 720px) {
  .bu-cal.has-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  /* #491: on a phone the side panel (class, event, appointment, forms) is a viewport-fixed opaque sheet with its own scroll, so it opens
     where the owner is looking instead of at the bottom of a long agenda. Same layer as the roster drawer; dialogs still sit above it. */
  /* the well's frosted backdrop-filter would make the well the containing block of the fixed sheet (offset by the well's padding); drop it while a panel is open */
  :root[data-theme] .bu-panel:has(.bu-cal__panel) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ...and the sheet must rise above the console's top bar (z-index 10 in the page's stacking context) instead of sliding under it */
  .bu-slab:has(.bu-cal__panel) {
    z-index: var(--structure-z-overlay, 50);
  }

  .bu-cal__panel {
    position: fixed;
    inset: 0;
    z-index: var(--structure-z-overlay, 50);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-bottom: 4.5rem;
  }

  .bu-cal-view--wide {
    display: none;
  }

  .bu-cal-rail {
    order: -1;   /* the "Now" card leads on a phone */
  }

  /* Phone: filters collapse behind their summary; the zone line joins the toolbar row instead of taking its own. */
  .bu-cal-filterbox > summary {
    display: inline-flex;
  }

  .bu-cal-filterbox:not([open]) > .bu-cal-filters {
    display: none;
  }

  .bu-cal-zone {
    flex-basis: 100%;
    text-align: left;
  }

  /* #435: label above the control and the control full width, so Age group and Instructor are the same width (the side-by-side
     label made the selects different widths and pushed the Instructor select under the floating help button). */
  .bu-cal-filters .bu-field {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .bu-cal-filters .bu-field > select {
    width: 100%;
    box-sizing: border-box;
  }

  .bu-cal-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .bu-cal-item {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bu-cal * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- #426: overlapping classes in a narrow column collapse to a "+N" chip that expands to a readable list ---------------
   The column is a size container. A group of N side-by-side blocks needs about 7rem each; narrower than that (week with the
   side panel open) the blocks hide and the chip stands in. Wide columns never show the chip or the list. */
.bu-cal-col {
  container-type: inline-size;
  container-name: calcol;
}

.bu-cal-stack {
  display: none;
  position: absolute;
  top: calc(var(--cal-startmin, 0) * var(--cal-hour) / 60);
  left: 1px;
  right: 1px;
  z-index: 2;
}

/* F2: an open list sits above every other chip and block in its column (the next cluster's chip bled through it). */
.bu-cal-stack.is-open {
  z-index: 6;
}

.bu-cal-stack__chip {
  display: block;
  width: 100%;
  min-height: 1.75rem;
  box-sizing: border-box;
  padding: 2px var(--structure-gap-xs);
  font: inherit;
  font-size: var(--structure-text-xs);
  font-weight: var(--structure-weight-medium);
  text-align: left;
  border-width: 1px;
  border-left-width: 4px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  cursor: pointer;
}

.bu-cal-stack__chip:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 1px;
}

.bu-cal-stack__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  padding: 2px;
  border-width: 1px;
  border-style: solid;
}

.bu-cal-block--listed {
  position: static;
  width: auto;
  height: auto;
  min-height: 2.75rem;
  margin: 0;
}

.bu-cal-block--listed .bu-cal-block__name {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.bu-cal-block--listed .bu-cal-block__meta {
  white-space: normal;
}

@container calcol (max-width: 9.5rem) {
  .bu-cal-stack[data-lanes="2"] { display: block; }
  .bu-cal-block[data-stacked="true"][data-lanes="2"]:not(.bu-cal-block--listed) { display: none; }
}

@container calcol (max-width: 14rem) {
  .bu-cal-stack[data-lanes="3"] { display: block; }
  .bu-cal-block[data-stacked="true"][data-lanes="3"]:not(.bu-cal-block--listed) { display: none; }
}

@container calcol (max-width: 19rem) {
  .bu-cal-stack[data-lanes="4"] { display: block; }
  .bu-cal-block[data-stacked="true"][data-lanes="4"]:not(.bu-cal-block--listed) { display: none; }
}

/* ---- Colour picker (owner 2026-10-24) -------------------------------------
   A radio group of named swatches. Structure only: the dot colours are calendar-render.css (the skin's swatch tokens). */
.bu-colour-picker {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.bu-colour-picker__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
}

.bu-colour-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--structure-gap-xs);
  min-height: var(--structure-touch-min);
  padding: 0 var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  font-size: var(--structure-text-sm);
  cursor: pointer;
}

.bu-colour-opt input[type="radio"] {
  margin: 0;
}

.bu-colour-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
}

.bu-colour-opt:has(input:checked) {
  border-width: 2px;
  font-weight: var(--structure-weight-bold, 700);
}

/* R-1026-01: the compact form of the colour picker - one labelled select and a dot for the current colour (structure only; the dot colours are calendar-render.css). */
.bu-colour-compact {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
  min-width: 0;
}

.bu-colour-compact label {
  font-size: var(--structure-text-sm);
}

.bu-colour-compact__row {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
}

.bu-colour-compact__row select {
  min-width: 11rem;
}