/* aiforce.army — /enlist/ only: the live strip of figures, the standing notes under the
   registers, and the overlay the application is filed in. The units, the ranks table and
   the roll are system components; the form and the issued certificate are section 16b of
   aiforce.css. Nothing here restyles any of them. */

/* --------------------------------------------------------------------------
   The call to action
   One button, and the small print that belongs to it, on one line where there is room.
   -------------------------------------------------------------------------- */

.en-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.en-cta__btn {
  flex: none;
}

.en-cta__note {
  flex: 1 1 26ch;
  max-width: 52ch;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   The live strip
   One band with the service's two figures in it. Never a row of cards — the page is
   for joining, and the numbers are the smallest thing on it that can be true.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The registers
   The ranks table and the roll are system components. What belongs to this page is
   the standing note filed under each of them and the line a roll prints when it has
   nothing, which sits on the roll's own rules rather than floating above them.
   -------------------------------------------------------------------------- */

.en-note {
  max-width: 88ch;
  margin: var(--s-4) 0 0;
  padding-left: var(--s-3);
  border-left: var(--bw-thick) solid var(--c-line-brass);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--c-muted);
}

/* The rank is the register's key column. The system's own key column is a first-cell
   `td`, which is held on one line; a rank name is two words and has to wrap on a phone,
   so this one is a row header and takes the key column's colour explicitly. */
/* --------------------------------------------------------------------------
   The recruiting overlay
   A real <dialog>, opened with showModal(): the browser keeps focus inside it,
   Escape closes it, and the page behind is inert. The dialog box is exactly its
   scrolling panel, so the only clicks that land on the dialog element itself are
   backdrop clicks — which is how the route closes on one.
   -------------------------------------------------------------------------- */

.en-modal {
  width: min(720px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: min(92dvh, calc(100vh - 2 * var(--s-4)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--c-ink);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-brass);
  border-radius: var(--radius);
}

/* The UA rule that hides a closed dialog is display: none; a display of our own would
   override it and leave the form sitting on the page. Only the open state gets one. */
.en-modal[open] {
  display: flex;
  flex-direction: column;
}

.en-modal::backdrop {
  background: var(--c-scrim);
  backdrop-filter: blur(3px);
}

/* The page behind an open overlay does not scroll under it. */
html:has(.en-modal[open]) {
  overflow: hidden;
}

.en-modal__inner {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(var(--s-4), 4vw, var(--s-6));
}

.en-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.en-modal__title {
  margin: 0;
}

.en-modal__close {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-brass);
  background: transparent;
  border: var(--bw) solid var(--c-line-brass);
  border-radius: var(--radius);
  cursor: pointer;
}

.en-modal__close:hover {
  color: var(--c-brass-bright);
  border-color: var(--c-brass);
}

.en-modal__lede {
  max-width: 60ch;
  margin: var(--s-3) 0 var(--s-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-ink-dim);
}

/* --- Units and ranks, side by side ------------------------------------------
   Two columns from 860px, each a single stack of seven cards; one column below. */
.en-columns {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 860px) {
  .en-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

.en-column__grid {
  grid-template-columns: 1fr;
}