/* Shared request form popup (course waitlist, MVP, CTO, consultation). Uses the page's colour tokens. */
dialog.enroll { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line);
                border-radius: 14px; background: var(--bg); color: var(--fg); overflow: auto; }
dialog.enroll::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.enroll .inner { padding: 28px; }
.enroll .head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 4px; }
.enroll h2 { font-size: 24px; margin: 0; }
.enroll .x { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 32px; height: 32px;
             font: 16px var(--mono); cursor: pointer; flex: none; }
.enroll .x:hover { color: var(--fg); border-color: var(--fg); }
.enroll form { display: grid; gap: 14px; margin-top: 20px; }
.enroll .two { display: grid; gap: 14px; }
@media (min-width: 520px) { .enroll .two { grid-template-columns: 1fr 1fr; } }
.enroll label { display: grid; gap: 6px; font: 12px var(--mono); color: var(--muted); }
.enroll input, .enroll textarea { font: 15px var(--sans); padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
                                  background: var(--bg-2); color: var(--fg); width: 100%; }
.enroll textarea { min-height: 96px; resize: vertical; }
.enroll input::placeholder, .enroll textarea::placeholder { color: var(--muted); opacity: .6; }
.enroll input:focus, .enroll textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.enroll .field { display: grid; gap: 6px; }
.enroll .field > label { font: 12px var(--mono); color: var(--muted); }
.enroll .combo { position: relative; }
.enroll .combo input { padding-right: 34px; }
.enroll .combo::after { content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
                        color: var(--muted); pointer-events: none; font-size: 12px; }
.enroll .combo ul { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px;
                    list-style: none; max-height: 220px; overflow-y: auto; background: var(--bg-2);
                    border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.enroll .combo li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.enroll .combo li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.enroll .combo li.empty { color: var(--muted); cursor: default; }
.enroll .confirm { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0; padding: 14px 16px;
                   border: 1px dashed var(--line); border-radius: 12px; font: 14px/1.5 var(--sans); color: var(--muted); }
.enroll .confirm input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; padding: 0; accent-color: var(--accent); }
.enroll .confirm:has(input:checked) { border-style: solid; border-color: var(--accent); color: var(--fg); }
/* A field filled in wrong (popup.js sets aria-invalid); the shake itself is in site.css. */
.enroll input[aria-invalid="true"], .enroll textarea[aria-invalid="true"] { border-color: var(--warn); }
.enroll input[aria-invalid="true"]:focus, .enroll textarea[aria-invalid="true"]:focus { outline-color: var(--warn); }
.enroll .confirm:has(input[aria-invalid="true"]) { border-style: solid; border-color: var(--warn); }
.enroll .btn { justify-content: center; cursor: pointer; width: 100%; font-size: 15px; }
.enroll .btn[disabled] { opacity: .6; cursor: wait; }
.enroll .btn[hidden] { display: none; } /* .btn's display would beat [hidden]: the Calendly button off consult */
.enroll .err { margin: 0; min-height: 1em; font: 12px var(--mono); color: var(--warn); }
.enroll .done .big { font: 700 40px var(--mono); color: var(--accent); margin-bottom: 8px; }
.enroll .done p { color: var(--muted); margin: 12px 0 20px; }
.enroll .done .actions { display: grid; gap: 10px; }

/* Show / hide with no JS timers (mvp-system-design 14): grows in on open, shrinks out on close. */
dialog.enroll {
  opacity: 0; scale: .96;
  transition: opacity var(--dur-3) var(--ease-in), scale var(--dur-3) var(--ease-in),
              display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
dialog.enroll[open] { opacity: 1; scale: 1; transition-timing-function: var(--ease-out); }
@starting-style { dialog.enroll[open] { opacity: 0; scale: .96; } }
dialog.enroll::backdrop {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete, overlay var(--dur-3) allow-discrete;
}
dialog.enroll[open]::backdrop { opacity: 1; }
@starting-style { dialog.enroll[open]::backdrop { opacity: 0; } }
/* The thank-you view rises in where the form was. */
.enroll .done:not([hidden]) { animation: rise var(--dur-5) var(--ease-smooth) both; }
.enroll .legal { margin: 0; font: 12px var(--mono); color: var(--muted); }
.enroll .legal a { color: var(--muted); }