/* ==========================================================================
   Sign-in, password and first-run pages: a quiet split between a short story
   about the platform and the form. On a phone the form comes first.
   ========================================================================== */

.auth {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ------------------------------------------------------------ the story */

.auth__story {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--ds-space-6);
  padding: var(--ds-space-6) clamp(32px, 5vw, 72px);
  background: var(--ds-surface);
  border-inline-end: 1px solid var(--ds-border);
  overflow: hidden;
}
/* Three hairlines in the colours of the flag, and nothing louder. */
.auth__story::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--ds-ink) 0 33.33%, var(--ds-primary) 33.33% 66.66%, var(--ds-gold) 66.66% 100%);
}

.story { display: grid; gap: var(--ds-space-6); max-width: 520px; }
.story__slides { position: relative; display: grid; min-height: 260px; }
.story__slide {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .5s var(--ds-ease), transform .5s var(--ds-ease), visibility 0s linear .5s;
}
.story__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ds-ease), transform .5s var(--ds-ease); }
.story__step { display: inline-flex; align-items: center; gap: var(--ds-space-3); margin-block-end: var(--ds-space-4); color: var(--ds-gold-dark); font-size: var(--ds-text-small); font-weight: 650; }
.story__step::before { content: ""; width: 28px; height: 1px; background: var(--ds-gold); }
.story__slide h2 { margin: 0 0 var(--ds-space-3); font-size: clamp(27px, 3.1vw, 39px); letter-spacing: -.015em; }
.story__slide p { max-width: 44ch; margin: 0; color: var(--ds-ink-secondary); font-size: 18px; line-height: 1.65; }

.story__figure {
  display: flex; align-items: center; gap: var(--ds-space-3);
  margin-block-start: var(--ds-space-5); padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-muted); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-inner);
  color: var(--ds-ink-secondary); font-size: var(--ds-text-help);
}
.story__figure .icon { color: var(--ds-primary); }

.story__controls { display: flex; align-items: center; gap: var(--ds-space-4); }
.story__dots { display: flex; gap: var(--ds-space-2); }
.story__dot {
  position: relative; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: var(--ds-radius-control);
}
.story__dot::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 28px; height: 3px; border-radius: var(--ds-radius-pill);
  background: var(--ds-border-strong);
  transition: background-color var(--ds-duration) var(--ds-ease);
}
.story__dot[aria-current="true"]::after { background: var(--ds-primary); }
.story__dot:hover::after { background: var(--ds-ink-secondary); }
.story__dot[aria-current="true"]:hover::after { background: var(--ds-primary-hover); }
.story__toggle { color: var(--ds-ink-secondary); }

.auth__legal { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-small); }

/* -------------------------------------------------------------- the form */

.auth__panel { display: grid; place-items: center; padding: var(--ds-space-6) var(--ds-space-5); }
.auth__card { width: min(100%, 440px); }
.auth__card--wide { width: min(100%, 760px); }
.auth__card h1 { margin-block-end: var(--ds-space-2); font-size: clamp(27px, 3.1vw, 34px); }
.auth__lead { margin-block-end: var(--ds-space-6); color: var(--ds-text-muted); }
.auth__brand--compact { display: none; margin-block-end: var(--ds-space-6); }
.auth__form { display: grid; gap: var(--ds-space-1); }
.auth__form .btn-block { margin-block-start: var(--ds-space-2); }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3); margin-block-start: var(--ds-space-5); font-size: var(--ds-text-help); }
.auth__links a { color: var(--ds-primary); font-weight: 600; }
.auth__links a:hover { color: var(--ds-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.auth__notice { margin-block-end: var(--ds-space-5); }

/* A long page (the rules of use) is one centred column. */
.auth--single { grid-template-columns: 1fr; }
.auth--single .auth__panel { align-items: start; padding-block: var(--ds-space-7); }
.auth--single .auth__brand--compact { display: flex; }
.auth--single .auth__card { padding: var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }

/* Error pages share the single column. */
.auth--error .auth__card { text-align: center; }

@media (max-width: 1023px) {
  .auth { grid-template-columns: 1fr; }
  .auth__story { display: none; }
  .auth__panel { align-items: start; padding-block: var(--ds-space-7); }
  .auth__brand--compact { display: flex; }
  .auth__card { padding: var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-small); }
}

@media (max-width: 767px) {
  .auth__panel { padding: var(--ds-space-5) var(--ds-space-4); }
  .auth__card, .auth--single .auth__card { padding: var(--ds-space-5); }
  .auth__brand--compact { margin-block-end: var(--ds-space-5); }
}