/* Practice planning. All dates and hours remain server-rendered from shared records. */
@layer components {
  .mp-ride-plan { display: grid; gap: var(--mp-space-m); align-items: start; }
  .mp-ride-plan p, .mp-ride-plan h3, .mp-ride-plan h4 { margin: 0; }
  .mp-ride-plan h3 { font-size: var(--mp-fs-display-xs); }
  .mp-ride-plan h4 { font: var(--mp-weight-ui) var(--mp-fs-base) / var(--mp-lh-snug) var(--mp-font-body); text-transform: none; letter-spacing: normal; }
  .mp-ride-plan .mp-eyebrow { margin-block-end: var(--mp-space-2xs); }
  .mp-ride-plan__overview { display: grid; gap: var(--mp-space-m); align-items: start; }
  .mp-ride-plan__hours, .mp-ride-plan__today, .mp-ride-plan__closures { min-inline-size: 0; padding: var(--mp-space-m); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-lg); background: var(--mp-color-surface-2); }
  .mp-ride-plan__today .mp-today { gap: var(--mp-space-s); }
  .mp-ride-plan__today .mp-today__title { font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); }
  .mp-ride-plan__today .mp-stat__value { font-size: var(--mp-fs-display-m); }
  .mp-ride-plan__today .mp-facts { grid-template-columns: minmax(0, 1fr); margin: 0; border-block: var(--mp-border) solid var(--mp-color-line); padding-block: var(--mp-space-s); }
  .mp-ride-plan__today .mp-facts .mp-facts__item { padding: 0; border-radius: 0; background: none; }
  .mp-ride-plan__today .mp-facts__item + .mp-facts__item { margin-block-start: var(--mp-space-xs); }
  .mp-ride-plan__today .mp-today__actions { gap: var(--mp-space-s); }
  .mp-ride-plan__hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-xs) var(--mp-space-l); padding-block-end: var(--mp-space-m); }
  .mp-ride-plan__hours-head > a { display: inline-flex; align-items: center; gap: var(--mp-space-xs); min-block-size: var(--mp-tap); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); }
  .mp-ride-plan__seasons { list-style: none; padding: 0; margin: 0; }
  .mp-ride-plan__seasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mp-space-2xs) var(--mp-space-s); padding-block: var(--mp-space-s); border-block-start: var(--mp-border) solid var(--mp-color-line); align-items: baseline; }
  .mp-ride-plan__time { font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-tight) var(--mp-font-display); white-space: nowrap; }
  .mp-ride-plan__days { grid-column: 1 / -1; color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-ride-plan__season-note { padding-block: var(--mp-space-s); border-block-start: var(--mp-border) solid var(--mp-color-line); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-ride-plan__exception { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-s); margin-block-start: var(--mp-space-s); }
  .mp-ride-plan__exception > p:last-child { margin-block-start: var(--mp-space-2xs); font-size: var(--mp-fs-sm); }
  /* Use the site's white cards and neutral light grey; closure text stays fully readable. */
  .mp-ride-plan__closures { --_closure-card: var(--mp-grey); --mp-color-text: var(--mp-ink-2); --mp-color-text-2: var(--mp-ink-2); --mp-color-accent-text: var(--mp-ink-2); color: var(--mp-color-text); }
  .mp-ride-plan__closures-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--mp-space-s); }
  .mp-ride-plan__closures-head .mp-ride__link { gap: var(--mp-space-xs); font-size: var(--mp-fs-sm); }
  .mp-ride-plan .mp-ride-plan__closure-note { margin-block: var(--mp-space-s) var(--mp-space-m); max-inline-size: 50em; color: var(--mp-color-text-2); }
  .mp-ride-plan__events { display: grid; gap: var(--mp-space-xs); list-style: none; margin: 0; padding: 0; }
  .mp-ride-plan__events > li { display: flex; min-inline-size: 0; }
  .mp-ride-plan__event { display: flex; align-items: center; gap: var(--mp-space-s); inline-size: 100%; padding: var(--mp-space-s); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-md); background: var(--_closure-card); color: var(--mp-color-text); text-decoration: none; }
  .mp-ride-plan__event:hover { border-color: var(--mp-color-accent-text); }
  .mp-ride-plan__date-badge { flex: 0 0 var(--mp-space-2xl); display: grid; gap: var(--mp-space-3xs); justify-items: center; align-content: center; min-block-size: var(--mp-space-2xl); padding: var(--mp-space-2xs) var(--mp-space-3xs); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-sm); }
  .mp-ride-plan__date-badge > span { font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-ride-plan__date-badge > strong { white-space: nowrap; font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-tight) var(--mp-font-display); }
  .mp-ride-plan__event-copy { display: grid; justify-items: start; gap: var(--mp-space-3xs); min-inline-size: 0; }
  .mp-ride-plan__date { font-size: var(--mp-fs-xs); color: var(--mp-color-text-2); }
  .mp-ride-plan__event-name { font-weight: var(--mp-weight-ui); font-size: var(--mp-fs-sm); line-height: var(--mp-lh-snug); }
  .mp-ride-plan__arrow { margin-inline-start: auto; color: var(--mp-color-accent-text); }
  .mp-ride-plan__tag { font-size: var(--mp-fs-xs); padding: var(--mp-space-3xs) var(--mp-space-2xs); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-sm); }
  .mp-ride-plan__minis { margin-block-start: var(--mp-space-m); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-lg); background: var(--_closure-card); }
  .mp-ride-plan__minis summary { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-s); padding: var(--mp-space-m); cursor: pointer; list-style: none; }
  .mp-ride-plan__minis summary::-webkit-details-marker { display: none; }
  .mp-ride-plan__mini-title { display: block; font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-tight) var(--mp-font-display); text-transform: uppercase; }
  .mp-ride-plan__mini-note { display: block; margin-block-start: var(--mp-space-2xs); color: var(--mp-color-accent-text); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); }
  .mp-ride-plan__expand { flex: 0 0 auto; font-size: var(--mp-fs-display-xs); }
  .mp-ride-plan__minis[open] .mp-ride-plan__expand { transform: rotate(45deg); }
  .mp-ride-plan__mini-body { padding: 0 var(--mp-space-m) var(--mp-space-m); font-size: var(--mp-fs-sm); }
  .mp-ride-plan__mini-list { list-style: none; padding: 0; margin: var(--mp-space-s) 0 0; display: grid; }
  .mp-ride-plan__mini-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2xs); padding-block: var(--mp-space-xs); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-ride-plan__mini-list a { display: inline-flex; align-items: center; min-block-size: var(--mp-tap); font-weight: var(--mp-weight-ui); }
  .mp-ride-plan__notice { padding: var(--mp-space-m); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-md); }
  @media (width >= 48rem) {
    .mp-ride-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .mp-ride-plan__hours, .mp-ride-plan__today, .mp-ride-plan__closures { padding: var(--mp-space-l); }
  }
}