/* ==========================================================================
   Account — sign in / create account / guest
   ========================================================================== */
.page--account { background: var(--paper); }
.auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); }
.auth__art {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 26px; justify-content: center;
  padding: clamp(32px, 5vw, 72px);
  background-image: var(--bricks-ink);
}
.auth__art .eyebrow { color: var(--lime); }
.auth__title { font-size: clamp(56px, 7vw, 116px); }
.auth__title span { color: var(--lime); }
.auth__points { display: grid; gap: 12px; max-width: 46ch; color: var(--on-ink-2); font-size: 16px; }
.auth__points li { display: flex; gap: 10px; align-items: flex-start; }
.auth__points .i { flex: none; color: var(--ink); background: var(--lime); border-radius: 50%; padding: 2px; width: 20px; height: 20px; margin-top: 2px; }
.auth__bricks { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin-top: 10px; }
.auth-brick {
  padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid var(--line-ink-strong);
  font-size: 14px; color: var(--on-ink-2);
  animation: brick-drift 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
.auth-brick.is-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 700; }
@keyframes brick-drift { 50% { transform: translateY(-6px) rotate(-1deg); } }

.auth__panel { display: flex; flex-direction: column; gap: 18px; justify-content: center; padding: clamp(24px, 4vw, 56px); border-left: var(--bw) solid var(--ink); }
.auth__signed { align-items: center; }
.auth__viewport { overflow: hidden; margin: 0 -10px; padding: 6px 10px 10px; }
.auth__track {
  display: grid; grid-template-columns: 100% 100%;
  gap: 20px;
  transition: transform .75s var(--ease-spring-soft);
}
.auth__track[data-mode="signup"] { transform: translateX(calc(-100% - 20px)); }
.auth__form { display: grid; gap: 16px; align-content: start; transition: opacity .35s; }
.auth__form[inert] { opacity: 0; }
.auth__form h2 { font-size: 44px; }
.auth__forgot { justify-self: center; font-size: 14px; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -6px; }
.strength i { height: 6px; border-radius: 4px; background: var(--paper-3); transform-origin: left; transition: background-color .3s, transform .5s var(--ease-spring); }
.strength span { font: 600 11.5px var(--font-mono); margin-left: 6px; min-width: 9ch; }
.strength[data-strength="1"] i:nth-child(-n+1),
.strength[data-strength="2"] i:nth-child(-n+2),
.strength[data-strength="3"] i:nth-child(-n+3),
.strength[data-strength="4"] i:nth-child(-n+4) { background: var(--ink); }
.strength[data-strength="4"] i { background: var(--lime) !important; box-shadow: inset 0 0 0 1.5px var(--ink); }
.check.has-error .check__box { border-style: dashed; animation: shake .45s var(--ease-out); }
.auth__guest { display: grid; gap: 8px; }
.auth__guest p { font-size: 13.5px; color: var(--text-2); text-align: center; }
.auth__proto { font-size: 11.5px; color: var(--text-2); padding: 10px 12px; border: 1.5px dashed var(--line-strong); border-radius: 12px; }

@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__art { padding: 32px var(--gutter); }
  .auth__bricks { display: none; }
  /* phones/tablets: the form comes first, the explanation follows */
  .auth__panel { order: -1; border-left: 0; border-bottom: var(--bw) solid var(--ink); padding: 28px var(--gutter) 40px; }
}
@media (max-width: 560px) {
  .auth__title { font-size: 48px; }
  .auth__form h2 { font-size: 38px; }
}