/* The public pages: the start page, the login and the request form from its
   first step to the confirmation. A visitor sees them, and a logged-in
   client who sends another request. The shared pieces they are built from
   (fields, buttons, the error summary, notices, file lists) are styled in
   app.css; here is only what these pages add.

   Everything is one column. On a phone the buttons of a step fill the row,
   so that each is as wide as the screen and easy to press. */

/* The place of a step in the form, inside the heading of the page and
   above its title: whoever jumps to the heading hears it as well. */
.step-of {
  display: block;
  margin-bottom: calc(var(--space) / 2);
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: normal;
}

/* The same as a bar, for the eye only: the text above says it in words. */
.step-progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin: 0 0 calc(var(--space) * 2);
  accent-color: var(--color-primary);
}

/* The questions of a step stand apart from one another; within a question
   the label, the help, the control and "I don't know" stay close. */
.questions { gap: calc(var(--space) * 3); }
.questions .field > label:first-child, .questions legend { font-weight: 600; }
.questions textarea { resize: vertical; }

.required-mark { color: var(--color-muted); font-size: 0.875rem; font-weight: normal; }

/* A question asked only for a certain answer to the one above it. The
   script static/js/intake.js hides it while it does not apply; a field is a
   flexible box, which the hidden attribute alone would not hide. */
.field.dependent { padding-left: calc(var(--space) * 1.5); border-left: 3px solid var(--color-border); }
.field[hidden] { display: none; }

/* The buttons under a step: the one that goes on first, "Back" after it. */
.form-actions { align-items: center; margin-top: calc(var(--space) * 2); }

/* The second form of the materials step, the confirmation, set off from
   the upload above it. */
.materials-confirm {
  margin-top: calc(var(--space) * 3);
  padding-top: calc(var(--space) * 2);
  border-top: 1px solid var(--color-border);
}

/* The review: the name of a step and the link that leads back to it. */
.answers-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 calc(var(--space) * 2);
  margin-top: calc(var(--space) * 3);
  border-bottom: 1px solid var(--color-border);
}

.answers-head h2 { min-width: 0; margin: 0; }
.answers .files { margin-bottom: 0; }

/* A form with one field: the login and the entry of a code. The field is
   as wide as the form, the button as wide as its text. */
.entry > .field { align-self: stretch; }

/* The digits of a code or of the picture, set apart so that they are easy
   to compare with the email or with the picture. */
.code-input { max-width: 14rem; font-family: var(--font-mono); letter-spacing: 0.25em; }

/* The picture with digits of the login, at the size it was drawn and
   smaller only where the screen is. The frame is counted outside the
   picture (content-box, where app.css counts every frame inside): with it
   inside, the 280 pixels of the picture would be drawn on 278, and every
   line of it smeared. The picture brings its own paper and ink, the same
   on the light and on the dark variant of the page; the frame sets it off
   from a dark one. */
.picture {
  box-sizing: content-box;
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* What pow.js says while the browser is being checked. The line is on the
   page from the start, empty: a screen reader announces what appears in a
   status region that was there before. */
.pow-status { margin: 0; color: var(--color-muted); font-size: 0.875rem; }

@media (max-width: 40rem) {
  .form-actions > button, .form-actions > .button,
  .start-actions > .button { flex: 1 1 100%; }
}

/* The link back to a step is pressed with a finger. */
@media (max-width: 40rem), (pointer: coarse) {
  .answers-head a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The page that asks what a request is about: three links, each with a
   sentence under it. A link is as tall as a finger needs. */
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.choices > li { padding: calc(var(--space) * 1.5); border: 1px solid var(--color-border); border-radius: var(--radius); }
.choice { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* The optional questions of a form, folded behind one line. */
.more { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.more > summary { cursor: pointer; padding: 0.75rem 0; font-weight: 600; }
.more[open] > summary { margin-bottom: var(--space); }
.more > .field { margin-bottom: calc(var(--space) * 2); }