/* mp-calendar — the hours-and-month band (option G): the ink status board, then the month on
   white: a 7-column grid of day cells and event cards (each day's status at their foot) from 48rem, a dot picker over
   an agenda below it. The chips filter with :has() alone. Contract: COMPONENTS.md §7.52. */
@layer components {
  /* ---- The status board ---- */
  .mp-band--board { padding-block: var(--mp-space-xl) var(--mp-space-l); }
  .mp-board { display: grid; gap: var(--mp-space-m); }
  .mp-board--card { padding: var(--mp-space-panel) var(--mp-space-card); border-radius: var(--mp-radius-xl); background-color: var(--mp-color-surface); }
  .mp-board__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--mp-space-s) var(--mp-space-m); }
  .mp-board__words { display: grid; gap: var(--mp-space-2xs); }
  .mp-board__title { max-inline-size: 22em; font-size: var(--mp-fs-display-m); }
  .mp-board__actions { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs); }
  .mp-board__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-space-2xs); }
  .mp-board__cell {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3xs);
    min-inline-size: 0;
    padding: var(--mp-space-xs) var(--mp-space-s);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface-2);
  }
  .mp-board__cell--today { background-color: var(--mp-color-surface); color: var(--mp-color-text); }
  .mp-board__cell dt { color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-label); text-transform: uppercase; }
  .mp-board__value { font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-display) var(--mp-font-display); letter-spacing: var(--mp-track-display); text-transform: uppercase; }
  .mp-board__text { color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); line-height: var(--mp-lh-snug); }
  .mp-board__link { color: inherit; text-decoration: underline; text-decoration-thickness: var(--mp-border); text-underline-offset: .12em; }
  .mp-board__link:hover { color: var(--mp-color-accent-text); }
  /* Phone: the words, the cells (Today across, then hours and season; the next race is the
     agenda's first card), then the two buttons side by side. */
  @media (width < 48rem) {
    .mp-board__head { display: contents; }
    .mp-board__actions { order: 1; }
    .mp-board__actions > .mp-btn { flex: 1; }
    .mp-board__cell--today { grid-column: 1 / -1; }
    .mp-board__cell--next { display: none; }
  }
  @media (width >= 64rem) {
    .mp-board__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mp-space-xs); }
    .mp-board__cell { padding: var(--mp-space-s) var(--mp-space-m); }
  }

  /* ---- The month ---- */
  .mp-band--calendar { padding-block: var(--mp-space-l) var(--mp-space-section); }
  .mp-calendar { display: flex; flex-direction: column; gap: var(--mp-space-s); scroll-margin-block-start: var(--mp-h-header); }
  .mp-calendar--card { padding: var(--mp-space-card); border-radius: var(--mp-radius-xl); background-color: var(--mp-color-surface); }
  /* Phone order: the month and its nav, the picker, the chips, the agenda. */
  .mp-calendar__head { display: contents; }
  .mp-calendar__bar { order: 1; }
  .mp-calendar__notice { order: 2; }
  :is(.mp-calendar__grid, .mp-calendar__picker) { order: 3; }
  .mp-calendar__hint { order: 4; }
  .mp-calendar__tools { order: 5; }
  .mp-calendar__agenda { order: 6; }
  .mp-calendar__none { order: 7; }
  .mp-calendar__more { order: 8; }
  .mp-calendar__legend { order: 9; }
  @media (width >= 48rem) {
    .mp-calendar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-s) var(--mp-space-m); order: 1; }
    .mp-calendar :is(.mp-calendar__picker, .mp-calendar__hint, .mp-calendar__agenda, .mp-calendar__none, .mp-calendar__more) { display: none; }
  }
  .mp-calendar__bar { display: flex; align-items: center; gap: var(--mp-space-xs); }
  /* Both arrows before the month's name, so they never move as the name's length changes. */
  .mp-calendar__step--prev { order: 1; }
  .mp-calendar__step--next { order: 2; }
  .mp-calendar__month { order: 3; margin-inline-start: var(--mp-space-2xs); font-size: var(--mp-fs-display-s); }
  .mp-calendar__today { order: 4; }
  .mp-calendar__step { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line); }

  /* The month selector: the heading is a button (the chevron its only mark); the months pop up
     under it (the popover API, anchored where anchoring is supported, centred where it isn't). */
  .mp-calendar__month-btn {
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: var(--mp-radius-xs);
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    text-transform: inherit;
    cursor: pointer;
    anchor-name: --mp-cal-month;
  }
  .mp-calendar__month-end { white-space: nowrap; }
  .mp-calendar__chev { display: inline-block; margin-inline-start: var(--mp-space-2xs); vertical-align: middle; }
  .mp-calendar__month-btn[aria-expanded="true"] .mp-calendar__chev { rotate: 180deg; }
  @supports not selector(:popover-open) {
    .mp-calendar__chev { display: none; }
    .mp-calendar__month-btn { cursor: default; }
  }
  .mp-calendar__months { display: none; }
  .mp-calendar__months:popover-open {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mp-space-3xs);
    align-content: start;
    inline-size: calc(100% - 2 * var(--mp-gutter));
    block-size: fit-content; /* Safari's popover UA style leaves it auto: inset 0 would stretch it to the viewport */
    max-block-size: calc(100% - 2 * var(--mp-gutter));
    padding: var(--mp-space-s);
    border: 0;
    border-radius: var(--mp-radius-lg);
    box-shadow: 0 0 0 var(--mp-border) var(--mp-color-line), var(--mp-shadow-float);
  }
  @supports (anchor-name: --mp-a) {
    .mp-calendar__months:popover-open { position-anchor: --mp-cal-month; inset: anchor(bottom) 0 auto; margin: var(--mp-space-2xs) auto 0; position-try-fallbacks: flip-block; }
  }
  @media (width >= 48rem) {
    .mp-calendar__months:popover-open { grid-template-columns: repeat(6, calc(var(--mp-tap) * 1.4)); inline-size: fit-content; }
    @supports (anchor-name: --mp-a) {
      .mp-calendar__months:popover-open { inset: anchor(bottom) auto auto anchor(left); margin-inline: 0; }
    }
  }
  /* One grid: a year's label across it, then its months (each link's name says the year). */
  .mp-calendar__year { grid-column: 1 / -1; padding-block-end: var(--mp-space-3xs); color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-calendar__mo + .mp-calendar__year { padding-block-start: var(--mp-space-xs); }
  .mp-calendar__mo {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: var(--mp-tap);
    border-radius: var(--mp-radius-sm);
    background-color: var(--mp-color-surface-2);
    color: var(--mp-color-text);
    font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
    text-decoration: none;
  }
  .mp-calendar__mo:hover { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-hover); }
  .mp-calendar__mo--off { background-color: transparent; color: var(--mp-color-text-2); }
  .mp-calendar__mo--today, .mp-calendar__mo--today:hover { box-shadow: inset 0 0 0 var(--mp-focus-width) var(--mp-color-text); }
  .mp-calendar__mo--events::after { content: ""; position: absolute; inset-block-end: var(--mp-space-2xs); inset-inline-start: 50%; inline-size: .35em; block-size: .35em; border-radius: var(--mp-radius-round); background-color: currentColor; translate: -50% 0; }
  .mp-calendar__step--prev .mp-icon { scale: -1 1; }
  .mp-calendar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2xs) var(--mp-space-s); }
  @media (width >= 48rem) { .mp-calendar__tools { justify-content: flex-end; } }
  /* The view switch is the desktop's: a phone always has the picker over the list. */
  @media (width < 48rem) { .mp-calendar .mp-seg:has([name="mp-cal-view"]) { display: none; } }
  .mp-calendar__ics { font-size: var(--mp-fs-sm); }
  .mp-calendar__notice { max-inline-size: var(--mp-measure); color: var(--mp-color-text-2); }

  /* The grid (from 48rem, Month H): weekday heads, then a row per week of 7 columns. A day with
     no event is a plain cell (its number top-left, its status at the foot); an event is one card
     across its days in its treatment, itself a subgrid of those days: the numbers, the words and
     any chips (a second event on the same days), then each day's own status. Cells and cards
     share the row's three tracks (number · 1fr · foot), so every number and every foot line up. */
  .mp-calendar__grid { display: none; }
  @media (width >= 48rem) {
    .mp-calendar__grid { display: grid; gap: var(--mp-space-2xs); }
  }
  .mp-calendar__wds, .mp-calendar__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--mp-space-2xs); }
  .mp-calendar__wd { padding-inline: var(--mp-space-3xs); color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-align: start; text-transform: uppercase; }
  .mp-calendar__week { grid-template-rows: auto 1fr auto; row-gap: var(--mp-space-3xs); min-block-size: calc(var(--mp-tap) * 3.5); }
  .mp-calendar__cell {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    min-inline-size: 0;
    padding: var(--mp-space-xs) var(--mp-space-xs) var(--mp-space-3xs);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface-2);
    color: var(--mp-color-text-2);
  }
  .mp-calendar__cell > .mp-calendar__hours { grid-row: 3; align-self: end; padding-block: var(--mp-space-3xs); }
  .mp-calendar__cell--open { background-color: var(--mp-color-accent-soft); color: var(--mp-color-text); }
  .mp-calendar__cell--open .mp-calendar__hours { color: var(--mp-color-accent-text); }
  /* Camp only: the camps ride, the public doesn't — between closed and open. */
  .mp-calendar__cell--camp { background-color: color-mix(in srgb, var(--mp-color-accent-soft) 45%, var(--mp-color-surface-2)); }
  .mp-calendar__num { grid-row: 1; justify-self: start; font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-display) var(--mp-font-display); letter-spacing: var(--mp-track-display); text-transform: uppercase; }
  .mp-calendar__num--today { min-inline-size: 1lh; border-radius: var(--mp-radius-pill); outline: var(--mp-focus-width) solid currentColor; outline-offset: .2em; text-align: center; }
  .mp-calendar__mon { margin-inline-start: var(--mp-space-3xs); font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); }
  .mp-calendar__hours { font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-ui); }

  /* An event card. Its scheme paints it; a photo sits under the even scrim. */
  .mp-calendar__event {
    position: relative;
    isolation: isolate;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    min-inline-size: 0;
    overflow: hidden;
    border-radius: var(--mp-radius-md);
  }
  .mp-calendar__event--span-2 { grid-column-end: span 2; }
  .mp-calendar__event--span-3 { grid-column-end: span 3; }
  .mp-calendar__event--span-4 { grid-column-end: span 4; }
  .mp-calendar__event--span-5 { grid-column-end: span 5; }
  .mp-calendar__event--span-6 { grid-column-end: span 6; }
  .mp-calendar__event--span-7 { grid-column-end: span 7; }
  .mp-calendar__event > .mp-calendar__num { margin: var(--mp-space-xs) var(--mp-space-xs) 0; }
  /* Carried over a week's edge: square on that side, "cont." where it picks up again. */
  .mp-calendar__event--cont { border-start-start-radius: 0; border-end-start-radius: 0; }
  .mp-calendar__event--on { border-start-end-radius: 0; border-end-end-radius: 0; }
  .mp-calendar__event--proposed { outline: var(--mp-border) dashed var(--mp-color-accent); outline-offset: calc(-1 * var(--mp-border)); }
  .mp-calendar__event-img { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--mp-focus, 50% 50%); }
  .mp-calendar__event--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--mp-scrim-even); }

  /* The words, then the chips beside them, the tag top-right; stacked under the tag where a
     column is too narrow for a number and a tag side by side (below 64rem, a one-day card below 70rem). */
  .mp-calendar__event-body {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--mp-space-3xs) var(--mp-space-xs);
    min-inline-size: 0;
    padding: var(--mp-space-3xs) var(--mp-space-xs) var(--mp-space-2xs);
  }
  .mp-calendar__event-body > .mp-calendar__tag { align-self: flex-end; margin-block-end: auto; }
  @media (width >= 64rem) {
    .mp-calendar__event-body { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
    .mp-calendar__event-body > .mp-calendar__tag { position: absolute; inset-block-start: var(--mp-space-xs); inset-inline-end: var(--mp-space-xs); }
  }
  @media (width >= 64rem) and (width < 70rem) {
    .mp-calendar__event--span-1 > .mp-calendar__event-body { flex-direction: column; align-items: flex-start; }
    .mp-calendar__event--span-1 .mp-calendar__event-body > .mp-calendar__tag { position: static; }
  }
  .mp-calendar__event-words { display: grid; flex: 1 1 auto; gap: var(--mp-space-3xs); min-inline-size: 0; max-inline-size: 100%; }
  .mp-calendar__event-title { display: -webkit-box; overflow: hidden; color: inherit; font-weight: var(--mp-weight-ui); font-size: var(--mp-fs-sm); line-height: var(--mp-lh-tight); text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mp-calendar__event-line { display: -webkit-box; overflow: hidden; color: var(--mp-color-text-2); font-size: var(--mp-fs-label); line-height: var(--mp-lh-tight); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mp-calendar__event-cont { margin-inline-end: var(--mp-space-3xs); color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  a.mp-calendar__event-title:hover, a.mp-calendar__also:hover { text-decoration: underline; text-decoration-thickness: var(--mp-border); text-underline-offset: .2em; }
  /* Image only: the logo centred in the body, the words for a screen reader. */
  .mp-calendar__event-title--logo { display: block; align-self: center; margin-inline: auto; }
  .mp-calendar__event-logo { display: block; inline-size: auto; max-inline-size: 100%; block-size: calc(var(--mp-tap) * 1.25); object-fit: contain; }

  /* A chip: another event on these days, in its own colour token, a link to it. */
  .mp-calendar__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mp-space-3xs); max-inline-size: 100%; margin-inline-start: auto; }
  .mp-calendar__also {
    display: inline-block;
    max-inline-size: 100%;
    overflow: hidden;
    padding-inline: var(--mp-space-2xs);
    border-radius: var(--mp-radius-pill);
    font: var(--mp-weight-ui) var(--mp-fs-label) / calc(var(--mp-h-chip) - var(--mp-space-3xs)) var(--mp-font-ui);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mp-calendar__also--line { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong); }
  .mp-calendar__also--proposed { outline: var(--mp-border) dashed var(--mp-color-accent); outline-offset: calc(-1 * var(--mp-border)); }

  /* The feet, one per day: the day's own status. Open is a light pill — "we are also open" at a
     glance; the pill's colours are the page's (captured on .mp-calendar), whatever the card's. */
  .mp-calendar { --_pill: var(--mp-color-surface); --_pill-text: var(--mp-color-accent-text); --_plain: var(--mp-color-surface-2); --_plain-text: var(--mp-color-text-2); }
  .mp-calendar__foot {
    grid-row: 3;
    align-self: end;
    min-inline-size: 0;
    margin: 0 var(--mp-space-3xs) var(--mp-space-3xs);
    padding: var(--mp-space-3xs) calc(var(--mp-space-xs) - var(--mp-space-3xs));
    border-radius: var(--mp-radius-xs);
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-ui);
  }
  .mp-calendar__foot--open { background-color: var(--_pill); color: var(--_pill-text); }

  /* Shared with the agenda's cards. */
  .mp-calendar__ev-top { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--mp-space-3xs) var(--mp-space-2xs); margin: 0; }
  .mp-calendar__ev-title { font-weight: var(--mp-weight-ui); font-size: var(--mp-fs-sm); line-height: var(--mp-lh-snug); }
  .mp-calendar__ev-line { color: var(--mp-color-text-2); font-size: var(--mp-fs-label); line-height: var(--mp-lh-snug); }
  .mp-calendar__tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: calc(var(--mp-h-chip) - var(--mp-space-2xs));
    padding-inline: var(--mp-space-2xs);
    border-radius: var(--mp-radius-pill);
    background-color: var(--mp-color-surface); /* the tag carries mp-scheme-ink (proposed: light) */
    color: var(--mp-color-text);
    box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong);
    font: var(--mp-weight-ui) var(--mp-fs-micro) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mp-calendar__tag--proposed { color: var(--mp-color-text-2); }

  /* ---- Phone: the dot picker over the agenda ---- */
  .mp-calendar__picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--mp-space-3xs); }
  .mp-calendar__picker > .mp-calendar__wd { padding: 0; text-align: center; }
  .mp-calendar__pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mp-space-3xs);
    min-block-size: var(--mp-tap);
    border-radius: var(--mp-radius-sm);
    background-color: var(--mp-color-surface-2);
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui);
    text-decoration: none;
  }
  .mp-calendar__pick--open { background-color: var(--mp-color-accent-soft); color: var(--mp-color-text); }
  .mp-calendar__pick--out { background-color: transparent; }
  .mp-calendar__pick--today { outline: var(--mp-focus-width) solid var(--mp-color-text); outline-offset: calc(-1 * var(--mp-focus-width)); }
  .mp-calendar__pick--sel { background-color: var(--mp-color-inverse); color: var(--mp-color-on-inverse); }
  .mp-calendar__dots { display: flex; gap: .2em; }
  .mp-calendar__dot { inline-size: .4em; block-size: .4em; border-radius: var(--mp-radius-round); background-color: var(--mp-color-line-strong); }
  .mp-calendar__dot--race { background-color: var(--mp-color-inverse); }
  .mp-calendar__dot--camp { background-color: var(--mp-color-accent); }
  .mp-calendar__dot--proposed { background-color: var(--mp-color-surface); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-strong); }
  .mp-calendar__pick--sel .mp-calendar__dot--race { background-color: var(--mp-color-accent); }
  .mp-calendar__hint { color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  /* No Open days chip on a phone: the agenda lists events only and the picker's green days say which are open. */
  @media (width < 48rem) { .mp-calendar .mp-seg__opt:has([value="open"]) { display: none; } }

  .mp-calendar__agenda { display: grid; gap: var(--mp-space-2xs); }
  .mp-calendar__item {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--mp-space-s);
    overflow: hidden;
    padding: var(--mp-space-s);
    border-radius: var(--mp-radius-lg);
    background-color: var(--mp-color-surface);
    color: var(--mp-color-text);
    scroll-margin-block-start: calc(var(--mp-h-header) + var(--mp-space-s));
  }
  @media (width < 48rem) { .mp-calendar__item[aria-current="true"] { outline: var(--mp-focus-width) solid var(--mp-color-line-hover); outline-offset: var(--mp-focus-offset); } }
  .mp-calendar__item-body, .mp-calendar__ev-words { display: grid; gap: var(--mp-space-3xs); align-content: end; }
  /* The title is the link to the event's page; its ::after makes the whole card the hit area,
     the actions sit above it, and the focus ring is the card's in the page's colour. */
  .mp-calendar { --_focus: var(--mp-color-focus); }
  .mp-calendar__ev-title[href] { color: inherit; text-decoration: none; }
  .mp-calendar__ev-title[href]::after { content: ""; position: absolute; inset: 0; }
  .mp-calendar__ev-title[href]:hover { text-decoration: underline; text-decoration-thickness: var(--mp-border); text-underline-offset: .2em; }
  .mp-calendar__ev-title[href]:focus-visible { outline: 0; }
  .mp-calendar__item:has(.mp-calendar__ev-title:focus-visible) { outline: var(--mp-focus-width) solid var(--_focus); outline-offset: var(--mp-focus-offset); }
  .mp-calendar__item-actions { position: relative; z-index: 1; }
  .mp-calendar__ev-feet { font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-snug) var(--mp-font-ui); letter-spacing: var(--mp-track-ui); }
  .mp-calendar__item .mp-calendar__num { font-size: var(--mp-fs-display-xs); }
  .mp-calendar__item .mp-calendar__ev-title { font-size: var(--mp-fs-lead); }
  .mp-calendar__item .mp-calendar__ev-line { font-size: var(--mp-fs-xs); }
  .mp-calendar__ev-closed { font-weight: var(--mp-weight-ui); font-size: var(--mp-fs-xs); line-height: var(--mp-lh-snug); }
  .mp-calendar__item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2xs) var(--mp-space-s); margin-block-start: var(--mp-space-2xs); }
  .mp-calendar__item--photo { min-block-size: calc(var(--mp-tap) * 3.5); }
  .mp-calendar__item-img { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--mp-focus, 50% 50%); }
  .mp-calendar__item--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--mp-scrim-even); }
  /* Image only (a logo or a poster): it keeps its words here, the picture a thumbnail beside them. */
  .mp-calendar__item--image { grid-template-columns: calc(var(--mp-tap) * 2) minmax(0, 1fr); align-items: center; gap: var(--mp-space-s); }
  .mp-calendar__item-thumb { inline-size: 100%; aspect-ratio: 1; border-radius: var(--mp-radius-sm); object-fit: cover; }
  .mp-calendar__item--proposed { outline: var(--mp-border) dashed var(--mp-color-accent); outline-offset: calc(-1 * var(--mp-border)); }
  .mp-calendar__none { color: var(--mp-color-text-2); }
  .mp-calendar__more { align-self: center; }

  /* ---- The list (from 48rem, the view switch's List): the agenda in the grid's place, a row
     per event: the date over its kind, the words and the day's status, the actions. No Open days
     chip here, as on a phone: plain open days are not rows, so it would list two days of fifteen. ---- */
  @media (width >= 48rem) {
    .mp-calendar:has([name="mp-cal-view"][value="list"]:checked) :is(.mp-calendar__grid, .mp-seg__opt:has([name="mp-cal-type"][value="open"])) { display: none; }
    .mp-calendar:has([name="mp-cal-view"][value="list"]:checked) .mp-calendar__agenda { display: grid; }
    .mp-calendar:has([name="mp-cal-view"][value="list"]:checked) .mp-calendar__none { display: block; }
    /* One grid per row, the same four tracks in every row so dates and titles line up: date ·
       words · a logo where the event has one · actions. */
    .mp-calendar__item { grid-template-columns: calc(var(--mp-tap) * 4) minmax(0, 1fr) auto auto; align-items: center; gap: var(--mp-space-xs) var(--mp-space-m); padding: var(--mp-space-s) var(--mp-space-m); }
    .mp-calendar__item-body { display: contents; }
    .mp-calendar__item .mp-calendar__ev-top { grid-area: 1 / 1; flex-direction: column; justify-content: flex-start; gap: var(--mp-space-2xs); }
    .mp-calendar__ev-words { grid-area: 1 / 2; }
    .mp-calendar__item-thumb { grid-area: 1 / 3; inline-size: calc(var(--mp-tap) * 1.5); }
    .mp-calendar__item-actions { grid-area: 1 / 4; justify-content: flex-end; margin-block-start: 0; }
  }
  /* Narrow (a tablet): the actions go under the words, which keep the width. */
  @media (width >= 48rem) and (width < 64rem) {
    .mp-calendar__item .mp-calendar__ev-top { grid-row: 1 / span 2; align-self: start; }
    .mp-calendar__item-actions { grid-area: 2 / 2 / 3 / -1; justify-content: flex-start; }
  }

  .mp-calendar__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-2xs) var(--mp-space-m); color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  .mp-calendar__keys { display: flex; flex-wrap: wrap; gap: var(--mp-space-2xs) var(--mp-space-s); }
  .mp-calendar__keys li { display: inline-flex; align-items: center; gap: var(--mp-space-2xs); }
  .mp-calendar__key { inline-size: 1em; block-size: 1em; border-radius: var(--mp-radius-xs); background-color: var(--mp-color-surface-2); }
  .mp-calendar__key--open { background-color: var(--mp-color-accent-soft); }
  .mp-calendar__key--camp { background-color: var(--mp-color-accent); }
  .mp-calendar__key--proposed { background-color: var(--mp-color-surface); outline: var(--mp-border) dashed var(--mp-color-accent); outline-offset: calc(-1 * var(--mp-border)); }
  .mp-calendar__note { max-inline-size: var(--mp-measure); }

  /* ---- The chips, with no script ----
     Races or Camps: the cards and chips of the other groups fade, each on its own, and open
     days go plain; Open days: every card goes plain (its title and chips leave, its feet stay).
     In the agenda (events only) the others leave; there is no Open days chip on a phone. */
  .mp-calendar:has([name="mp-cal-type"][value="race"]:checked) :is(.mp-calendar__event, .mp-calendar__also, .mp-calendar__item):not([data-group="race"]),
  .mp-calendar:has([name="mp-cal-type"][value="camp"]:checked) :is(.mp-calendar__event, .mp-calendar__also, .mp-calendar__item):not([data-group="camp"]) {
    opacity: .25;
    filter: grayscale(1);
  }
  .mp-calendar:has([name="mp-cal-type"][value="race"]:checked) .mp-calendar__item:not([data-group="race"]),
  .mp-calendar:has([name="mp-cal-type"][value="camp"]:checked) .mp-calendar__item:not([data-group="camp"]),
  .mp-calendar:has([name="mp-cal-type"][value="open"]:checked) :is(.mp-calendar__event-body, .mp-calendar__event-img),
  .mp-calendar:has([name="mp-cal-type"][value="open"]:checked) .mp-calendar__event::after,
  .mp-calendar:has([name="mp-cal-type"][value="race"]:checked) .mp-calendar__dot:not([data-group="race"]),
  .mp-calendar:has([name="mp-cal-type"][value="camp"]:checked) .mp-calendar__dot:not([data-group="camp"]),
  .mp-calendar:has([name="mp-cal-type"][value="open"]:checked) .mp-calendar__dot {
    display: none;
  }
  .mp-calendar:has([name="mp-cal-type"][value="open"]:checked) .mp-calendar__event {
    outline: none;
    background-color: var(--_plain) !important; /* check-allow: important — a scheme always wins its own element's background */
  }
  .mp-calendar:has([name="mp-cal-type"][value="open"]:checked) .mp-calendar__event > :is(.mp-calendar__num, .mp-calendar__foot:not(.mp-calendar__foot--open)) { color: var(--_plain-text); }
  .mp-calendar:has([name="mp-cal-type"]:is([value="race"], [value="camp"]):checked) :is(.mp-calendar__cell--open, .mp-calendar__pick--open:not(.mp-calendar__pick--sel)) { background-color: var(--mp-color-surface-2); color: var(--mp-color-text-2); }
  .mp-calendar:has([name="mp-cal-type"]:is([value="race"], [value="camp"]):checked) .mp-calendar__cell--open .mp-calendar__hours { color: inherit; }
}