/* The class window (public/includes/class_window.html, js/windows/class-window.js):
   one scheduled class, in the owner's design of 2026-09-29, opened from the
   homepage and the timetable. The head and the foot stay while the middle
   scrolls, so the booking button is always in reach on a phone. The dialog
   has no padding of its own: a click on it that is not on its content is on
   the backdrop. It keeps a ::backdrop (CONVENTIONS 6.14): it opens only on
   the new pages, never on a legacy one. */
.ui-class-window {
  width: min(30rem, calc(100% - 2 * var(--ui-space-4)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--ui-space-5));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-color-surface);
  color: var(--ui-color-ink);
  box-shadow: var(--ui-shadow-raised);
  overflow: hidden;
}

/* A display rule on a closed dialog would show it. */
.ui-class-window[open] {
  display: flex;
  flex-direction: column;
}

.ui-class-window::backdrop {
  background: var(--ui-color-scrim);
}

.ui-class-window:focus-visible {
  outline: none;
}

/* The head: studio, name, subtitle and chips, the close button beside them. */
.ui-class-window__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5) var(--ui-space-4) 0 var(--ui-space-6);
}

.ui-class-window__intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-space-2);
  min-width: 0;
}

.ui-class-window__where {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  color: var(--ui-color-brand);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-2xs);
  font-weight: var(--ui-weight-medium);
  letter-spacing: var(--ui-tracking-eyebrow);
  text-transform: uppercase;
}

/* The studio's colour, as the studio cards wear it: a marker, not a paint.
   The free-place cards name the studio with the same line and dot. */
.ui-class-window__dot {
  display: block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-dot-1);
}

.ui-class-window__dot--2 {
  background: var(--ui-color-dot-2);
}

.ui-class-window__title {
  margin: 0;
}

.ui-class-window__subtitle {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
}

.ui-class-window__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-class-window__close-form {
  flex: none;
  margin: 0;
}

.ui-class-window__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-touch);
  height: var(--ui-touch);
  padding: 0;
  border: 1px solid var(--ui-color-line);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-page);
  color: var(--ui-color-ink-soft);
  cursor: pointer;
}

.ui-class-window__close:hover {
  background: var(--ui-color-offer);
  color: var(--ui-color-ink);
}

.ui-class-window__close:focus-visible,
.ui-class-window__text-button:focus-visible,
.ui-class-window__result:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-class-window__close-icon {
  display: block;
}

.ui-class-window__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-6);
  overflow-y: auto;
}

/* The time panel: when, large, and whether there is a place, beside it. */
.ui-class-window__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-sunken);
}

.ui-class-window__when {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: 0;
}

.ui-class-window__date {
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-medium);
}

.ui-class-window__hours {
  color: var(--ui-color-ink-strong);
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-semibold);
  letter-spacing: var(--ui-tracking-tight);
  line-height: var(--ui-leading-tight);
}

/* Places as words, never a count: the three states the cards know, plus full. */
.ui-class-window__places {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-semibold);
  line-height: var(--ui-leading-snug);
}

.ui-class-window__places--many {
  background: var(--ui-color-tint-1-bg);
  color: var(--ui-color-tint-1-ink);
}

.ui-class-window__places--few {
  background: var(--ui-color-tint-5-bg);
  color: var(--ui-color-tint-5-ink);
}

.ui-class-window__places--full {
  border: 1px solid var(--ui-color-line);
  background: var(--ui-color-surface);
  color: var(--ui-color-ink-soft);
}

.ui-class-window__places-dot {
  display: block;
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--ui-radius-pill);
  background: currentColor;
}

.ui-class-window__facts {
  display: grid;
  gap: var(--ui-space-3);
  margin: var(--ui-space-5) 0 0;
  padding: 0;
  font-size: var(--ui-text-md);
}

.ui-class-window__fact {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-3);
}

.ui-class-window__term {
  margin: 0;
  color: var(--ui-color-ink-muted);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
}

.ui-class-window__value {
  margin: 0;
  line-height: var(--ui-leading-normal);
}

.ui-class-window__muted {
  color: var(--ui-color-ink-muted);
}

/* The trainer: a photo, or the initials in its place; a link to the team page
   when the profile is public. */
.ui-class-window__person {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-3);
  color: var(--ui-color-ink);
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
}

.ui-class-window__person:hover {
  color: var(--ui-color-brand);
}

.ui-class-window__person:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-class-window__photo,
.ui-class-window__initials {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ui-radius-pill);
}

.ui-class-window__photo {
  display: block;
  margin: 0;
  object-fit: cover;
}

.ui-class-window__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-color-tint-2-bg);
  color: var(--ui-color-tint-2-ink);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-bold);
}

.ui-class-window__arrow {
  color: var(--ui-color-ink-muted);
  font-weight: var(--ui-weight-regular);
}

.ui-class-window__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-2);
  margin: var(--ui-space-5) 0 0;
}

.ui-class-window__text {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-md);
  line-height: var(--ui-leading-relaxed);
}

/* Set by the script, and only when the text is longer than two lines. */
.ui-class-window__text--clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The foot: the rule, then the action. */
.ui-class-window__foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4) var(--ui-space-6) var(--ui-space-6);
  border-top: 1px solid var(--ui-color-line);
  background: var(--ui-color-page);
}

.ui-class-window__rule {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
}

.ui-class-window__rule-icon {
  display: block;
  flex: none;
  margin-top: 0.125rem;
  color: var(--ui-color-brand);
}

.ui-class-window__deadline {
  color: var(--ui-color-ink-strong);
  font-weight: var(--ui-weight-semibold);
}

.ui-class-window__form {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  margin: 0;
}

/* The one action that matters, the largest thing to press. */
.ui-class-window__book {
  min-height: 3.125rem;
  font-size: var(--ui-text-base);
}

.ui-class-window__state,
.ui-class-window__result {
  margin: 0;
  font-weight: var(--ui-weight-semibold);
}

.ui-class-window__result {
  color: var(--ui-color-seats-many);
}

.ui-class-window__result--failed {
  color: var(--ui-color-seats-few);
}

.ui-class-window__note {
  margin: 0;
  color: var(--ui-color-ink-soft);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
}

.ui-class-window__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
  cursor: pointer;
}

.ui-class-window__check {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--ui-color-brand);
}

.ui-class-window__link {
  color: var(--ui-color-brand);
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
}

.ui-class-window__link:hover,
.ui-class-window__text-button:hover {
  color: var(--ui-color-brand-hover);
}

.ui-class-window__link:focus-visible {
  outline: 2px solid var(--ui-color-focus);
  outline-offset: 2px;
}

.ui-class-window__text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-color-brand);
  font: inherit;
  font-weight: var(--ui-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}