/* ==========================================================================
   LEECOI — Register, thank-you, and sign-in
   ==========================================================================

   One stylesheet across the three pages, because they share the step list and
   the narrow centred layout, and splitting them would mean maintaining the same
   `.step` rules twice.

   Page hero, form fields, buttons and notices all come from components.css.
   ========================================================================== */

/* ==========================================================================
   REGISTER LAYOUT
   --------------------------------------------------------------------------
   Form and explanation side by side on wide screens. The explanation comes
   SECOND in the DOM, so tab order and screen-reader order both reach the form
   first: it is what the page is for.
   ========================================================================== */

.register {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 60rem) {
  .register {
    /* The form is the wider column. The aside supports it, not the reverse. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-4xl);
  }
}

.register__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);

  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

@media (min-width: 40rem) {
  .register__form {
    padding: var(--space-2xl);
  }
}

.register__fineprint {
  color: var(--muted);
  text-wrap: pretty;
}

.register__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 60rem) {
  /* Nudged down to sit level with the first field rather than the form's top
     edge, which reads as two columns starting together rather than one
     floating above the other. */
  .register__aside {
    padding-block-start: var(--space-md);
  }
}

/* ==========================================================================
   STEPS
   --------------------------------------------------------------------------
   An <ol>, and numbered, because these genuinely happen in order. The index is
   a real step number, not decoration, which is the test this site applies
   before numbering anything.
   ========================================================================== */

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.step__index {
  font-size: var(--step-micro);
  line-height: 1.7;
  letter-spacing: var(--step-micro-ls);
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.step__text {
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.65;
}

/* ==========================================================================
   THANK-YOU AND SIGN-IN
   ========================================================================== */

.thanks {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* These pages have no page-hero, so main starts under the fixed header. */
  padding-block-start: calc(var(--header-h) + clamp(3rem, 8vh, 5rem));
}

.thanks__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.thanks__title {
  font-size: var(--step-d2);
  line-height: var(--step-d2-lh);
  letter-spacing: var(--step-d2-ls);
  font-weight: var(--weight-bold);
  max-width: 20ch;
}

.thanks__lead {
  font-size: var(--step-lead);
  line-height: var(--step-lead-lh);
  letter-spacing: var(--step-lead-ls);
  color: var(--muted);
}

.thanks__steps {
  inline-size: 100%;
  padding-block: var(--space-lg);
  border-block: 1px solid var(--line);
}

.thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (max-width: 26rem) {
  .thanks__actions {
    inline-size: 100%;
  }

  .thanks__actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   SELECT
   --------------------------------------------------------------------------
   `.field__input` covers text inputs and textareas. A select additionally needs
   its native arrow suppressed and one drawn back in, or the control renders
   with platform chrome that ignores the type scale entirely.
   ========================================================================== */

select.field__input {
  -webkit-appearance: none;
  appearance: none;

  /* Room for the chevron, which is drawn as a background image so the control
     stays a single element rather than a wrapper plus an icon. */
  padding-inline-end: var(--space-2xl);

  /* currentColor cannot be used inside a data URI, so the stroke is the muted
     token's literal value. Both light and dark resolutions are declared, with
     the light one scoped below. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 0.875rem;
}

.surface-light select.field__input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23545c6b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
}

/* The placeholder option is disabled, so it only shows before a choice is made.
   Styling it as muted stops an unanswered select looking answered. */
select.field__input:has(option[value='']:checked) {
  color: var(--muted);
}