/* Sprint 079 / #309 — the mobile, step-wise public guest sheet.
 *
 * WHY THIS FILE IS NOT IN project.scss
 * ------------------------------------
 * project.css is inherited by every page in the product, public and
 * authenticated. This stylesheet is loaded by exactly two templates, and only
 * when ``guest_sheet_mobile.active`` is true — that is, only for an object whose
 * tenant opted in while the feature is switched on. Folding it into the bundle
 * would ship it to every guest on the legacy sheet and to every operator page,
 * and would make "the flag-off page is unchanged" false in a way no test of the
 * flag itself would notice. It is therefore hand-written CSS with no build step,
 * which is also why it uses no variables, no nesting and no @use.
 *
 * MOBILE FIRST, AND MEANT LITERALLY
 * ---------------------------------
 * project.scss is desktop-first: its breakpoints are ``max-width`` queries, so
 * the phone is the exception being corrected. Here the base rules ARE the phone
 * (320–767 px) and every media query is ``min-width``. The five widths in the
 * sprint's Definition of Done — 320, 390, 768, 1024, 1440 — map onto three
 * rules and two additions:
 *
 *   320 / 390   the base rules. One column, full-bleed controls, nothing that
 *               can overflow: no fixed widths, no horizontal padding pair that
 *               exceeds the viewport, `min-width: 0` on the flex children that
 *               Bootstrap 4 otherwise lets grow past their parent.
 *   768         the entry-path cards go side by side, the sheet gains a
 *               comfortable measure and stops running the full tablet width.
 *   1024        the measure is capped so a line of German never exceeds roughly
 *               75 characters, which is where a legal text stops being readable.
 *   1440        padding and the measure grow once more; the card stays centred
 *               rather than stretching, because a 1440 px wide form field is not
 *               a better form field.
 *
 * ACCESSIBILITY DECISIONS THAT ARE IN HERE RATHER THAN IN THE MARKUP
 * ------------------------------------------------------------------
 * * 16px input font size. Below 16px, iOS Safari zooms on focus and the guest
 *   loses their place — the single most common way a mobile form is abandoned.
 * * 44x44 CSS px minimum for every control, matching the QA-UI-003 rule
 *   project.scss already applies to the rest of the product; here it is
 *   unconditional rather than phone-only, because a 44px target is not worse on
 *   a desktop.
 * * A visible focus ring that is NOT `outline: none`. The step rail is a list of
 *   links and is navigated by keyboard first.
 * * `scroll-margin-top` on each step, so following a rail link does not leave
 *   the legend hidden under the sticky progress bar.
 * * No colour-only state. A completed step is not communicated by colour here at
 *   all — the count is written out in words in the markup.
 * * `prefers-reduced-motion` respected: the only transition in the file is the
 *   progress bar's width, and it is removed rather than shortened.
 */

/* -- the sheet card -------------------------------------------------------- */

.guest-sheet-mobile {
  /* Bootstrap 4 flex children default to min-width:auto, which lets a long
   * unbroken value (an e-mail address, a document number) push the whole card
   * wider than the viewport. This is the fix, applied once. */
  min-width: 0;
}

.guest-sheet-mobile .form-group {
  margin-bottom: 1.25rem;
}

.guest-sheet-mobile label,
.guest-sheet-mobile .create-label {
  display: block;
  width: auto;
  max-width: 100%;
  padding: 0 0 0.25rem 0;
  text-align: left;
  font-weight: 600;
  overflow-wrap: break-word;
}

.guest-sheet-mobile .form-control,
.guest-sheet-mobile input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.guest-sheet-mobile select,
.guest-sheet-mobile textarea {
  width: 100%;
  min-height: 44px;
  /* 16px exactly: see the header. */
  font-size: 16px;
}

.guest-sheet-mobile .btn {
  min-height: 44px;
  min-width: 44px;
}

.guest-sheet-mobile input[type="checkbox"],
.guest-sheet-mobile input[type="radio"] {
  /* The box itself stays its native size; the *target* is the padded label. */
  margin-right: 0.5rem;
}

.guest-sheet-mobile .form-check,
.guest-sheet-mobile .checkbox {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.guest-sheet-mobile a:focus,
.guest-sheet-mobile .btn:focus,
.guest-sheet-mobile .form-control:focus,
.guest-sheet-entry-paths a:focus,
.guest-sheet-progress a:focus {
  outline: 3px solid #05396b;
  outline-offset: 2px;
}

/* -- one step -------------------------------------------------------------- */

.guest-sheet-step {
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 1.25rem 0;
  /* Sprint 090 / #338 — AT-06. A step had a border and no background, so on an
   * object with a configured `custom_background_color` it inherited the tint
   * from the card and the step's own frame stopped reading as a frame. The
   * white is stated here rather than left to the parent: this fieldset is also
   * rendered inside templates that do not carry `.guest-sheet-panel`, and a
   * step that is legible only because of who its parent happens to be is a step
   * that will be illegible the next time it is reused. */
  background-color: #ffffff;
  /* Clears the sticky progress bar when the rail links here. */
  scroll-margin-top: 5.5rem;
}

.guest-sheet-step > legend {
  /* A <legend> is the accessible name of the group. It is styled as a heading
   * but deliberately remains a legend: replacing it with an <h3> would lose the
   * grouping a screen reader announces. */
  float: none;
  width: auto;
  padding: 0 0 0.5rem 0;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #05396b;
  border-bottom: 2px solid #eef1f4;
}

.guest-sheet-step-hint {
  margin: 0.5rem 0 1rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #4a5560;
}

/* -- the two equivalent entry paths --------------------------------------- */

.guest-sheet-entry-paths {
  margin: 0 0 1.5rem 0;
}

.guest-sheet-entry-path-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.guest-sheet-entry-path {
  /* Identical in every respect for both paths — see the template comment. The
   * equivalence the sprint contract asks for is lost the moment one of these
   * gets its own rule. */
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: 1rem;
  background: #fbfcfd;
}

.guest-sheet-entry-path-title {
  margin: 0 0 0.375rem 0;
}

.guest-sheet-entry-path-text {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* -- the progress rail ----------------------------------------------------- */

.guest-sheet-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.75rem 0;
  /* Sprint 090 / #338 — AT-06. The rail had no top margin at all: it began
   * flush against the accommodation block above it and, once a coloured
   * background made the blocks visually distinct, it read as part of whichever
   * one it happened to be touching. There is real room on both sides now.
   *
   * Margin, not padding, and margin-TOP specifically: `top: 0` positions the
   * element against the viewport once it sticks, which is independent of its
   * margin, so the sticky behaviour is unaffected. Its height is also unchanged,
   * so `.guest-sheet-step`'s `scroll-margin-top: 5.5rem` still clears it by the
   * same amount when the rail links to a step.
   *
   * The responsive overrides below (768 / 1024 / 1440) set `margin-left` and
   * `margin-right` as LONGHANDS, not the shorthand, so they centre the rail
   * without resetting these two values. */
  margin: 1.5rem 0 1.75rem 0;
  background: #ffffff;
  border-bottom: 1px solid #e6eaee;
}

.guest-sheet-progress-bar {
  height: 0.5rem;
  margin: 0.25rem 0;
}

.guest-sheet-progress-bar .progress-bar {
  background-color: #05396b;
  transition: width 240ms ease-out;
}

.guest-sheet-progress-text {
  margin: 0.25rem 0 0.5rem 0;
  font-size: 0.875rem;
  color: #4a5560;
}

.guest-sheet-step-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.875rem;
}

.guest-sheet-step-link {
  margin: 0.125rem 0;
}

.guest-sheet-step-link a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

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

/* -- 768: tablet ----------------------------------------------------------- */

@media (min-width: 768px) {
  .guest-sheet-entry-path-list {
    flex-direction: row;
  }

  .guest-sheet-mobile,
  .guest-sheet-entry-paths,
  .guest-sheet-progress {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  .guest-sheet-step {
    padding: 1.25rem 1.5rem;
  }

  .guest-sheet-step-list {
    /* The rail is a horizontal strip from here up: at this width it fits on one
     * or two lines and stops pushing the first field below the fold. */
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    padding-left: 0;
    list-style: none;
  }
}

/* -- 1024: laptop ---------------------------------------------------------- */

@media (min-width: 1024px) {
  .guest-sheet-mobile,
  .guest-sheet-entry-paths,
  .guest-sheet-progress {
    max-width: 46rem;
  }

  .guest-sheet-step > legend {
    font-size: 1.25rem;
  }
}

/* -- 1440: desktop --------------------------------------------------------- */

@media (min-width: 1440px) {
  .guest-sheet-mobile,
  .guest-sheet-entry-paths,
  .guest-sheet-progress {
    /* Capped, not stretched. A 1440 px wide input is not a better input, and a
     * legal paragraph set across the full width stops being readable. */
    max-width: 50rem;
  }

  .guest-sheet-step {
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
  }
}

/* -- print ----------------------------------------------------------------- */

@media print {
  .guest-sheet-progress,
  .guest-sheet-entry-paths {
    display: none;
  }

  .guest-sheet-step {
    border: 1px solid #000000;
    break-inside: avoid;
  }
}