/* RallyTrain dialog: the one sheet a form opens in, fleet-wide.

   The Board Portal's rule (Furi, 10-15: every form is a dialog sheet, never an
   inline expansion or a new page) reached the public site on 10-21 (Furi, on
   the sponsor form: "they should be modal dialog forms ... nobody likes
   scrolling or confusing forms and buttons"). Membership join, Trunk or Treat
   and the Boo page each carried their own copy before this; new forms ride
   this one, and those three adopt it as they are next touched.

   A card on a desk, the whole screen on a phone. The head is the site's card
   band (dark strip, brand underline) carrying the title and the X; the body
   scrolls; the foot holds Cancel at the left and the one forward button at
   the right (form-buttons-on-the-right). Without JavaScript a link to the
   dialog's id shows it in the page through :target.

   Markup:
     <dialog class="rt-dialog" id="x" aria-labelledby="x-title">
       <div class="rt-dialog-inner">
         <div class="rt-dialog-head"><h3 class="rt-dialog-title" id="x-title">...</h3>
           <button type="button" class="rt-dialog-x" data-rt-dialog-close aria-label="Close">x</button></div>
         <form ...><div class="rt-dialog-body">fields</div>
           <div class="rt-dialog-foot"><button type="button" class="rt-btn rt-dialog-cancel" data-rt-dialog-close>Cancel</button>
             <button type="submit" class="rt-btn">Send</button></div></form>
       </div>
     </dialog>
   Script: assets/js/dialog.js (window.rtDialog). */

.rt-dialog {
	box-sizing: border-box;
	width: min(760px, calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--rt-ink, #1c1c1c);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	overflow: hidden;
	text-align: left;
}
.rt-dialog:not([open]):not(:target) { display: none; }
.rt-dialog::backdrop { background: rgba(0, 0, 0, .58); backdrop-filter: blur(2px); }
.rt-dialog-inner {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
}
.rt-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	background: var(--rt-black, #1c1c1c);
	color: #fff;
	border-bottom: 3px solid var(--rt-primary-bright, var(--rt-primary, #229ce0));
}
.rt-dialog-title { margin: 0; font-size: 1.2rem; line-height: 1.25; color: #fff; }
.rt-dialog-x {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: inherit;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.rt-dialog-x:hover, .rt-dialog-x:focus-visible { background: var(--rt-primary, #229ce0); }
/* The form between the head and the foot is a flex column too, so the body it
   holds can shrink and scroll. Without this the body only ever grew, and on any
   screen shorter than the form (a phone, a tablet, a small laptop) the dialog's
   overflow clipped the foot with its submit button and nothing scrolled
   (a Henry sponsor, 10-22). */
.rt-dialog-inner > form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}
.rt-dialog-head,
.rt-dialog-foot { flex: 0 0 auto; }
.rt-dialog-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 18px 20px 6px;
}
.rt-dialog-intro { margin: 0 0 16px; color: var(--rt-ink, #1c1c1c); }
.rt-dialog-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--rt-line, #e2e8f0);
	background: #fff;
}
.rt-dialog-foot .rt-btn { margin: 0; white-space: nowrap; }
.rt-dialog-foot > :only-child { margin-left: auto; }
/* Cancel stays quiet in every state; the theme's button hover would paint it. */
.rt-dialog-cancel,
.rt-dialog-cancel:hover,
.rt-dialog-cancel:focus,
.rt-dialog-cancel:active {
	background: #fff !important;
	color: var(--rt-ink, #1c1c1c) !important;
	border: 1px solid var(--rt-line, #cbd5e1) !important;
	box-shadow: none !important;
}
@keyframes rt-dialog-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rt-dialog[open] { animation: rt-dialog-in .24s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .rt-dialog[open] { animation: none; } }
/* The page under an open dialog holds still. */
html.rt-dialog-on { overflow: hidden; }

/* A phone: the whole screen, the foot pinned at the bottom. */
@media (max-width: 720px) {
	.rt-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
	.rt-dialog-inner { height: 100%; max-height: none; }
	.rt-dialog-body { flex: 1 1 auto; padding: 16px 16px 6px; }
	.rt-dialog-foot { padding-left: 16px; padding-right: 16px; }
}

/* No JavaScript: the link's target shows the same form in the page. */
.rt-dialog:target:not([open]) {
	display: block;
	position: static;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 24px auto;
	box-shadow: none;
	border: 1px solid var(--rt-line, #e2e8f0);
}
.rt-dialog:target:not([open]) .rt-dialog-inner { height: auto; max-height: none; }
.rt-dialog:target:not([open]) .rt-dialog-x,
.rt-dialog:target:not([open]) .rt-dialog-cancel { display: none; }