/* ===========================================================================
   AUTH PAGES — /login (src/login.js) and /signup (src/signup.js)

   One namespace for both. The pages share every rule here and differ only in
   their copy and in which side the form sits on; the form leads in the markup
   on both, so on a phone it is the first thing under the header rather than
   something you scroll past the artwork to reach.
   =========================================================================== */

.auth-page {
  --auth-form: 30rem; /* the form column, and so the field width */
  --auth-art: 1.15fr; /* the artwork column */
  --auth-gap: clamp(1.5rem, 3vw, 2.5rem);
  --auth-radius: 20px;

  padding: clamp(2rem, 5vw, 4rem) var(--content-pad) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(90% 60% at 100% 0%, rgb(var(--color-tertiary-rgb) / 0.07), transparent 60%),
    var(--surface-page);
}

.auth-wrap {
  display: grid;
  align-items: stretch;
  gap: var(--auth-gap);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  grid-template-columns: minmax(0, var(--auth-form)) minmax(0, var(--auth-art));
}

/* Mirrored on /signup: the artwork leads visually, the form still leads in the
   markup. */
.auth-page--signup .auth-wrap {
  grid-template-columns: minmax(0, var(--auth-art)) minmax(0, var(--auth-form));
}
.auth-page--signup .auth-art {
  order: -1;
}

/* ===========================================================================
   FORM PANEL
   =========================================================================== */

.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--auth-radius);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.05),
    0 24px 48px -28px rgb(0 0 0 / 0.7);
}

.auth-form-inner {
  width: 100%;
}

.auth-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--accent-on-light);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
}
/* The product name stays the same colour as the rest of the line, so the
   heading reads as one phrase rather than a highlighted word. (It was primary
   navy while the page was light; on navy that would be invisible.) */
.auth-title span {
  color: var(--ink);
}

.auth-lede {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* --- Fields ---------------------------------------------------------------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

/* Two fields side by side, collapsing to one column before they get too
   narrow to read — driven by the row, not by a page breakpoint, so it holds
   wherever the row is used. */
.auth-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.05rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.auth-field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.auth-field input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background-color 0.15s;
}
.auth-field input::placeholder {
  color: var(--muted);
}
.auth-field input:hover {
  border-color: var(--neutral-600);
}
.auth-field input:focus {
  outline: none;
  background: var(--surface-raised);
  border-color: var(--accent-on-light);
  box-shadow: 0 0 0 3px rgb(var(--color-tertiary-rgb) / 0.18);
}

/* Only after the browser has judged the value invalid, so a half-typed address
   is not flagged mid-keystroke. */
.auth-field input:user-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgb(255 107 107 / 0.16);
}

/* --- Terms checkbox -------------------------------------------------------- */

.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.15rem 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.auth-check input {
  margin-top: 0.15rem;
  width: 17px;
  height: 17px;
  accent-color: var(--accent-on-light);
  flex-shrink: 0;
  cursor: pointer;
}
.auth-check a {
  color: var(--accent-on-light);
  font-weight: 600;
  text-decoration: none;
}
.auth-check a:hover {
  text-decoration: underline;
}

/* --- Submit ---------------------------------------------------------------- */

.auth-btn {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  min-height: 52px;
  padding: 0 1.4rem;
  background: var(--action-on-light);
  color: var(--text-on-dark);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.auth-btn:hover {
  background: var(--action-on-light-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgb(0 0 0 / 0.65);
}
.auth-btn:focus-visible {
  outline: 3px solid var(--accent-on-light);
  outline-offset: 2px;
}

.auth-alt {
  margin: 1.35rem 0 0;
  font-size: 0.93rem;
  color: var(--muted);
}
.auth-alt a {
  color: var(--accent-on-light);
  font-weight: 600;
  text-decoration: none;
}
.auth-alt a:hover {
  text-decoration: underline;
}

/* ===========================================================================
   ARTWORK PANEL — src/components/auth.js authArt()

   Three rows: copy, figure, flow. The figure takes the slack, so the copy sits
   at the top and the flow strip at the bottom on both pages regardless of how
   long the heading runs or how tall the image is.
   =========================================================================== */

.auth-art {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--auth-radius);
  /* Lifted a step above the page ground and edged in light, the same way the
     form panel is — on a dark page it would otherwise dissolve into it. */
  border: 1px solid var(--line);
  background:
    radial-gradient(110% 130% at 82% 8%, rgb(var(--color-tertiary-rgb) / 0.18), transparent 55%),
    linear-gradient(160deg, var(--neutral-800) 0%, var(--color-neutral) 100%);
  box-shadow: inset 0 1px 0 rgb(var(--color-secondary-rgb) / 0.05);
}

/* Dot field, fading out before it reaches the flow strip. */
.auth-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--color-secondary-rgb) / 0.09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 10%, #000, transparent 75%);
  mask-image: radial-gradient(80% 70% at 70% 10%, #000, transparent 75%);
  pointer-events: none;
}

.auth-art > * {
  position: relative;
  z-index: 1;
}

.auth-art-copy {
  max-width: 34rem;
}
.auth-art-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.auth-art-copy h2 {
  margin: 0 0 0.65rem;
  color: var(--text-on-dark);
  font-size: clamp(1.5rem, 2.9vw, 2.1rem);
  line-height: 1.2;
}
.auth-art-copy h2 span {
  color: var(--accent);
}
.auth-art-copy p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 1rem;
}

.auth-art-figure {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 0;
}
.auth-art-figure img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  /* Never taller than the row it is centred in, so the flow strip below stays
     on screen instead of being pushed off by a tall image. */
  max-height: 46vh;
  object-fit: contain;
}

/* --- Flow strip ------------------------------------------------------------ */

.auth-art-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-art-flow li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgb(var(--color-secondary-rgb) / 0.06);
  border: 1px solid var(--border-on-dark);
  color: var(--text-on-dark-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Every chip carries the arrow, the first one included, so the strip reads as
   one continuous flow rather than starting flat. It is decoration, so it is a
   pseudo-element rather than markup a screen reader would read out. */
.auth-art-flow li::before {
  content: '→';
  margin-right: 0.6rem;
  margin-left: -0.15rem;
  color: var(--accent);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

/* Below the two-column threshold the artwork moves under the form on both
   pages — including /signup, where the desktop order is reversed. */
@media (max-width: 1024px) {
  .auth-wrap,
  .auth-page--signup .auth-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-page--signup .auth-art {
    order: 0;
  }

  .auth-form-panel {
    justify-content: flex-start;
  }
  .auth-form-inner {
    max-width: 34rem;
    margin-inline: auto;
  }

  .auth-art {
    grid-template-rows: auto auto auto;
    text-align: center;
  }
  .auth-art-copy {
    max-width: 40rem;
    margin-inline: auto;
  }
  .auth-art-figure img {
    max-height: none;
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .auth-page {
    --auth-radius: 16px;
    padding-top: clamp(1.25rem, 5vw, 2rem);
  }
  .auth-art-figure img {
    max-width: 100%;
  }
  .auth-art-flow {
    gap: 0.4rem 0.3rem;
  }
  .auth-art-flow li {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* Small phones — the panels give up their side padding and rounded corners
   rather than squeezing the fields. */
@media (max-width: 420px) {
  .auth-page {
    padding-inline: 0;
    --auth-radius: 0px;
  }
  .auth-form-panel,
  .auth-art {
    border-inline: 0;
    padding-inline: 1.15rem;
  }
  .auth-field input {
    height: 46px;
  }
}

/* Short landscape phones — the artwork would otherwise fill the viewport. */
@media (max-height: 560px) and (orientation: landscape) {
  .auth-art-figure img {
    max-height: 40vh;
  }
}

/* Large screens — the form column grows a little with the rail. */
@media (min-width: 1600px) {
  .auth-page {
    --auth-form: 34rem;
  }
  .auth-art-figure img {
    max-width: 720px;
  }
}