/* Class registration modal
   Blades/Pico already styles dialog > article, header, footer, inputs and buttons.
   This only adds what they don't cover. No classes needed. */

/* Lock page scroll while any modal dialog is open.
   Tied directly to dialog[open], so Escape/close can never leave the page stuck.
   scrollbar-gutter keeps the page from shifting sideways when the scrollbar disappears. */
html:has(dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Policy text scrolls inside its own box (both modals) */
dialog section {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: var(--pico-spacing);
  padding: var(--pico-spacing);
  border: var(--pico-border-width) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}

/* Agreement form (Classes page): cap the box so the name fields,
   checkbox, and button stay in view. */
dialog form > section {
  max-height: 40vh;
  max-height: 40dvh;
}

/* Read-only viewer (registration page): no form below the text, so the box
   gets all the room between the header and the Close button. The modal is only
   as tall as its content, up to the screen height (dvh accounts for mobile
   browser toolbars; the vh line is a fallback for older browsers). */
dialog > article:has(> section) {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--pico-spacing) * 2);
  max-height: calc(100dvh - var(--pico-spacing) * 2);
}
dialog > article > section {
  flex: 1 1 auto;
  min-height: 0; /* lets the box shrink and scroll instead of overflowing */
}
dialog > article:has(> section) > footer {
  border-top: 0; /* removes the divider line Blades adds above modal footers */
}
dialog > article:has(> section) > footer button {
  width: 100%; /* matches the full-width "Continue to payment" button */
}

/* First / last name side by side, stacking on narrow phones */
dialog form > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap: var(--pico-spacing);
}

/* Keep the X above the heading so it always receives clicks.
   (Dimension's heading styles were sitting on top of it.) */
dialog > article > header > button[rel="prev"] {
  position: relative;
  z-index: 1;
}

/* Error message */
dialog [role="alert"] {
  color: var(--pico-del-color);
}
dialog [hidden] {
  display: none;
}