/*
 * apply.css -- the application's own layout.
 *
 * The fourth stylesheet, and the fourth audience. The split in this section
 * is by who sees a thing, not by tidiness:
 *
 *   headroom.css   what every page under /headroom/ presents identically --
 *                  tokens, fonts, buttons, the nav and footer this page does
 *                  not render, .final-cta which fifty pages do.
 *   index.css      the landing page's own furniture.
 *   player.css     the video player, wherever one appears.
 *   concepts.css   the glossary's layout.
 *   this file      the application and its confirmation page.
 *
 * Loaded by _layouts/headroom.html on any page with `apply: true`, which is
 * both /headroom/apply/ and /headroom/apply/done/. Bump its ?v= there in the
 * same commit as any change here.
 *
 * WHY THERE IS SO LITTLE IN HERE
 *
 * The buttons, the type, the colours and the focus ring all come from
 * headroom.css already. What is left is the one thing this page does that no
 * other page does: show one question at a time, centred in a column, with
 * nothing else on screen. Most of the file is that column and the options in
 * it.
 */

/* The page has no nav, so nothing is holding the content down from the top of
   the viewport and nothing is painting the strip behind an iPhone's status
   bar except body. --bg is what headroom.css already sets there; this is here
   to say that the absence of .sheet on this page is deliberate and does not
   leave a colour unclaimed. See the note above .site-nav in headroom.css. */
.apply {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The safe-area insets do real work here in landscape, where the notch
     becomes a side inset -- the same reason the layout asks for
     viewport-fit=cover. */
  padding: 2.5em max(1.5em, env(safe-area-inset-right)) 3em max(1.5em, env(safe-area-inset-left));
  gap: 1.75em;
}

/* ---------- Masthead ---------- */

.apply-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
}

/* The mark over the wordmark. This used to be the word set as text in the
   same face as the hero, on the reasoning that the two were one mark
   rendered twice rather than a logo and a heading resembling each other.
   The hero is the drawn wordmark now, so the same reasoning points the
   other way and this is the drawn one too.

   Still a link home, which is the exit somebody reaches for before they
   find the one at the bottom. */
.apply-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The same 0.35em .apply-head uses between the mark and the kicker, so the
     masthead is one evenly spaced stack rather than a lockup with a caption
     under it. */
  gap: 0.35em;
  text-decoration: none;
}

/* Heights, with width auto: the attributes reserve the right shape before
   the files load, and after that these decide. The mark is square and the
   wordmark is roughly 3.7:1, so they are sized to look balanced stacked
   rather than to any shared number. */
.apply-mark-glyph {
  display: block;
  width: auto;
  height: 36px;
}

.apply-mark-word {
  display: block;
  width: auto;
  height: 40px;
}

.apply-kicker {
  font-size: 0.8em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Progress ---------- */

/* Both halves of the same fact: the bar for a glance, the count for anyone
   who wants the number -- and for a screen reader, which is why the bar is
   aria-hidden and the count is a live region. Announcing both would say the
   same thing twice on every advance. */
.apply-progress {
  width: 100%;
  max-width: 34em;
  height: 2px;
  background: var(--border);
  overflow: hidden;
}

.apply-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 320ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .apply-progress-bar {
    transition: none;
  }
}

/* .apply-count carries .sr-only and has no presentation of its own. See the
   note beside it in index.html for why it is still written to. */

/* ---------- The question ---------- */

.apply-form {
  width: 100%;
  max-width: min(34em, 100%);
  /* The column does not resize as the panels change height. Without this a
     five-option question followed by a four-option one pulls the whole page
     up mid-tap, and on a phone the second tap lands on whatever moved into
     that spot. Tall enough for the longest panel; the flex centring keeps
     shorter ones from sitting at the top of a hole. */
  min-height: 26em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The panels are <section>s, and headroom.css gives every section 3.75em of
   vertical padding, 2em of horizontal, and a 960px cap -- sensible for the
   bands on the landing page and wrong for a panel that is already sitting in
   a 34em column with its own spacing. Reset rather than renamed: a question
   IS a section of this page, and the element is the right one. */
.apply-panel {
  display: flex;
  flex-direction: column;
  /* Named because .apply-status has to cancel exactly one of these when it is
     empty, and two copies of the number would drift. */
  --panel-gap: 1.1em;
  gap: var(--panel-gap);
  padding: 0;
  max-width: none;
  margin: 0;
}

/* Required, and the bug it fixes is not obvious.
   `[hidden] { display: none }` lives in the browser's own stylesheet, and any
   author rule beats it at equal specificity -- so the `display: flex` above
   silently un-hides every panel, and the page renders all seven questions
   stacked. The attribute is still the state; this is what makes it mean
   something. */
.apply-panel[hidden] {
  display: none;
}

/* Every panel's heading is an h1: only one panel is ever visible, and the
   other six are `hidden`, which takes them out of the accessibility tree
   entirely. One document, one heading, as far as anything reading it knows. */
.apply-q {
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

/* apply.js moves focus here on every advance so a screen reader reads the new
   question, and headroom.css draws an orange ring on anything focused. On a
   control that ring is the affordance; on a heading nobody can interact with
   it is an error state flashing once per question. The heading stays
   focusable -- that is the part that matters -- and simply does not announce
   it visually. */
.apply-q:focus,
.apply-q:focus-visible {
  outline: none;
}

/* What a question needs to be answerable, under the heading rather than
   inside it. The schedule was in the h1 and made it four lines of display
   type, which reads as a paragraph somebody set too large rather than as a
   question. Body size, and slightly quiet: it is the premise, not the ask. */
.apply-context {
  font-size: 1em;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: -0.4em;
}

.apply-options {
  display: grid;
  gap: 0.5em;
}

/* Deliberately not .btn-primary. These are not the action of the page -- they
   are the page -- and five filled accent buttons in a stack would leave
   nothing for the submit button at the end to be. Quiet until touched. */
.apply-option {
  font-family: inherit;
  font-size: 1em;
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 0.6em;
  padding: 0.85em 1.1em;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), transform 140ms var(--ease);
}

@media (hover: hover) {
  .apply-option:hover {
    border-color: var(--accent);
    background: rgba(146, 7, 195, 0.12);
  }
}

.apply-option:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* The answer, held for the moment between the tap and the next question, so
   the advance reads as a consequence of the tap rather than as the page
   changing on its own. apply.js sets this and waits out the same beat. */
.apply-option.is-chosen {
  border-color: var(--accent);
  background: rgba(146, 7, 195, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .apply-option:active {
    transform: scale(0.99);
  }
}

/* ---------- Free text ---------- */

.apply-panel textarea {
  font-family: inherit;
  font-size: 1em;
  line-height: 1.55;
  color: var(--text);
  background: rgba(10, 10, 15, 0.75);
  border: 1px solid var(--border);
  border-radius: 0.6em;
  padding: 0.85em 1.1em;
  resize: vertical;
  min-width: 0;
}

.apply-panel textarea::placeholder {
  color: var(--text-muted);
}

/* Every complaint in this form, in one colour, under the thing it is about.
   On the contact screen there is one per field; on the free-text panel there
   is one under the box. */
.apply-error {
  font-size: 0.85em;
  line-height: 1.5;
  color: #ff8a6b;
}

/* The free-text panel's copy is a direct child of the panel, so it pays the
   panel's gap on the way in. Tucked up by half of it, the same way the hint
   above it is, so the message reads as attached to the box rather than as the
   next thing down the page. Errors inside .apply-field need no such thing --
   the group's own gap is already tight. */
.apply-panel > .apply-error {
  margin-top: -0.5em;
}

.apply-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* After :focus, and stated for the focused case too.
   Both selectors are 0,2,1, so order alone decides -- and this one has to
   win, because the field is focused BY the validation that flagged it. Left
   above, the red border was set and immediately overridden by the accent
   ring, every time, and the only red anybody saw was the message. */
.apply-panel textarea.is-invalid,
.apply-panel textarea.is-invalid:focus {
  border-color: #ff8a6b;
  box-shadow: 0 0 0 3px rgba(255, 138, 107, 0.25);
}

/* Quiet, and under the thing it is about in both places it appears -- the
   prompts below the box, and the reason for the phone number below that
   field. */
.apply-hint {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: -0.5em;
}

/* ---------- Contact ---------- */

/* A grid of field groups, not a grid of labels and inputs. Each group owns
   its label, its input and its message, so a message can sit under the field
   it belongs to instead of at the foot of the panel -- and so the spacing
   between groups is one number rather than a margin hung off the input. */
.apply-fields {
  display: grid;
  gap: 0.9em;
}

.apply-field {
  display: grid;
  gap: 0.35em;
}

.apply-fields label {
  font-size: 0.85em;
  color: var(--text-muted);
}

.apply-fields input {
  font-family: inherit;
  font-size: 1em;
  padding: 0.75em 1.1em;
  border-radius: 0.6em;
  border: 1px solid var(--border);
  background: rgba(10, 10, 15, 0.75);
  color: var(--text);
  min-width: 0;
}

.apply-fields input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* The field a validation error landed on -- and stated for the focused case
   as well, for the reason given above the textarea's copy of this: fieldOk()
   focuses the field it just flagged, so a rule that loses to :focus is a rule
   that never applies. The message itself is in the status line, where a
   screen reader will hear it. */
.apply-fields input.is-invalid,
.apply-fields input.is-invalid:focus {
  border-color: #ff8a6b;
  box-shadow: 0 0 0 3px rgba(255, 138, 107, 0.25);
}

.apply-hint-phone {
  margin-top: 0;
  margin-bottom: 0.25em;
}

/* Left, not centred. It sat under a full-width button and was centred to
   match it; it now sits in the column with the fields and the fineprint, all
   of which start at the same edge. */
.apply-status {
  font-size: 0.95em;
  min-height: 1.5em;
}

/* Empty, this is still a flex item, so it takes a slot in the column and the
   panel's gap is paid on BOTH sides of it -- twice the space between the
   phone field and the disclosure, around an element with no height.
   min-height: 0 fixes the height and not the gaps.

   display: none would fix both and is the wrong tool: this is an aria-live
   region, and a region that is display:none when the text arrives is one some
   screen readers never announce. It has to stay rendered, so the extra gap is
   cancelled instead. */
.apply-status:empty {
  min-height: 0;
  margin-top: calc(-1 * var(--panel-gap));
}

.apply-status.err {
  color: #ff8a6b;
}

.apply-fineprint {
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--text-muted);
}

.apply-fineprint a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.apply-fineprint a:hover {
  color: var(--text);
}

/* Honeypot: hidden from people, tempting to bots. */
.apply-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Back and exit ---------- */

/* One row under the panel, holding both controls. They are the same size and
   centred against each other, so they read as a pair of navigation controls
   rather than as two unrelated things that happened to land near each other.

   Back sits at the column's left edge -- flush with the option boxes and the
   question above them -- and Next is pushed to the right edge by its own auto
   margin rather than by space-between, so Back stays put on the panels where
   Next is hidden. */
.apply-controls {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 1.25em;
  min-height: 2.4em;
}

/* Text, not a button, on purpose. Back is the way out of a mistake and Next
   is the way on; if both were buttons the eye would have to read them to tell
   which was which. No horizontal padding, so the label starts on the same
   edge as everything above it. */
.apply-back {
  font-family: inherit;
  font-size: 0.9em;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0.4em 0;
  cursor: pointer;
}

/* Sized to its label, not to the column. It was .btn-primary, which is the
   hero's button -- 1.1em and 2.5em of side padding, full width in a grid --
   and at the foot of one optional question it read as the most important
   thing on the page. It is a step, and it should look like the smallest
   thing that still looks pressable.

   Same font-size as Back, which is what lets `align-items: center` line the
   two labels up rather than merely stacking their boxes. */
/* Next and Submit are the same control in two places: the way on from this
   panel. They are never both visible, so they share the auto margin that puts
   them at the right of the row.

   Deliberately not .btn-primary.btn-comet, which the submit button wore. That
   is the hero's treatment -- a black face, an accent ring and a light going
   round it -- and it is the loudest thing the site owns. It is right on a
   page whose job is to get somebody to press one button. At the end of a form
   somebody has already spent two minutes on, the decision is made; what is
   left is the last step, and it should look like the step after the one
   before it. */
.apply-next,
.apply-submit {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--text);
  background: rgba(146, 7, 195, 0.22);
  border: 1px solid var(--accent);
  border-radius: 2em;
  padding: 0.5em 1.4em;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
    color 140ms var(--ease);
}

/* Working. Grey rather than a faded purple: opacity alone reads as the same
   button behind a veil, which is what "disabled because you may not" looks
   like. This is not that -- the press landed and the thing is running -- so it
   changes into a different, quieter control rather than dimming.

   cursor is default and not not-allowed for the same reason. not-allowed says
   you did something wrong; nothing here is wrong, it is just busy.

   Applies to both buttons in this row, so a Next that ever has to wait gets
   the state by having been written here. */
.apply-next[disabled],
.apply-submit[disabled] {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  cursor: default;
}

@media (hover: hover) {
  .apply-next:hover,
  .apply-submit:hover:not([disabled]) {
    background: rgba(146, 7, 195, 0.38);
  }
}

.apply-next:focus-visible,
.apply-submit:focus-visible,
.apply-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-radius: 2em;
}

/* Only the exit link now, at the foot of the page and deliberately far from
   Back: one is a step inside the form and the other leaves it. */
.apply-nav {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 2em;
}

.apply-back:hover {
  color: var(--text);
}

.apply-back:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-radius: 0.4em;
}

.apply-exit {
  font-size: 0.8em;
  color: var(--text-muted);
  text-decoration: none;
}

.apply-exit:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- No JavaScript ---------- */

.apply-noscript {
  max-width: 34em;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.apply-noscript h1 {
  font-size: 1.3em;
}

.apply-noscript a {
  color: var(--text);
}

/* ---------- Confirmation ---------- */

/* No chrome here either, so this page paints its own ground the way .apply
   does -- there is no .sheet around it to do that, and a body left to show
   through is the bug that put the hero's purple on forty-three glossary
   pages. */
.done {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  max-width: 44em;
  margin: 0 auto;
  padding: 3.5em max(1.5em, env(safe-area-inset-right)) 3em max(1.5em, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

/* Centred, and so is the sentence under it. There is one thing on this page
   above the film, it is two lines long, and a left edge with nothing to line
   up against is just an edge. */
.done h1 {
  font-size: 2em;
  text-align: center;
  text-wrap: balance;
}

.done-lead {
  font-size: 1.15em;
  color: var(--text);
  text-align: center;
  text-wrap: pretty;
}

.done-video {
  margin-top: 1em;
}

@media (max-width: 40em) {
  .apply-q {
    font-size: 1.25em;
  }

  .apply-form {
    min-height: 24em;
  }

  .done h1 {
    font-size: 1.6em;
  }

  .done {
    padding-top: 2.5em;
  }
}