/* Guest shell (sign in, forgot / reset password) · aligned with tesela-design-system.
   These pages are Jinja, not React, so the DS tokens they need are copied here under their DS
   names: keep them in sync with tesela-design-system/src/styles. Loaded after guest.css, whose
   element selectors it overrides; the other guest layouts (pampooh, invitations) don't load it. */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');

.auth {
  --text-main: rgb(255, 255, 255);
  --text-01: rgb(142, 144, 173);
  --text-02: rgb(152, 166, 249);
  --backgrounds-solid-02: rgb(12, 13, 24);
  --backgrounds-solid-03: rgb(20, 21, 39);
  --backgrounds-solid-04: rgb(26, 27, 51);
  --backgrounds-750: rgb(30, 36, 65);
  --backgrounds-800: rgb(34, 37, 52);
  --backgrounds-borders: rgb(63, 64, 79);
  --backgrounds-borders-dark: rgb(31, 31, 41);
  --backgrounds-input: linear-gradient(180deg, rgb(33, 34, 57) 0%, rgb(26, 27, 43) 100%);
  --interaction-100: rgb(210, 201, 255);
  --interaction-300: rgb(158, 139, 255);
  --interaction-400: rgb(139, 117, 255);
  --interaction-500: rgb(110, 82, 255);
  --status-error-550: rgb(251, 77, 125);
  --shadow-raised: 0 var(--sp3) 1.875rem 0 rgba(0, 0, 0, 0.34);
  --z-toast: 600;
  --interaction-900: rgb(46, 34, 107);
  --status-success-500: rgb(59, 209, 135);
  --status-success-700: rgb(20, 58, 77);
  --gradients-200: linear-gradient(135deg, rgb(110, 82, 255) 0%, rgb(63, 110, 245) 100%);
  --default-gradient-bg: linear-gradient(180deg, var(--backgrounds-solid-04) 0%, var(--backgrounds-solid-03) 100%);
  --gradients-400: linear-gradient(180deg, rgb(114, 89, 255) 0%, rgb(83, 52, 236) 100%);
  --gradients-hover: linear-gradient(180deg, rgb(91, 61, 255) 0%, rgb(41, 0, 241) 100%);
  --main-gradient-bg:
    radial-gradient(76.39% 62.22% at 80% -12%, rgba(90, 61, 240, 0.2) 0%, rgba(90, 61, 240, 0) 62%),
    radial-gradient(48.61% 46.67% at 6% 104%, rgba(63, 110, 245, 0.13) 0%, rgba(63, 110, 245, 0) 60%),
    linear-gradient(180deg, #101124 0%, #0B0C16 100%);

  --font-title: 'Sora', sans-serif;
  --font-body: 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  --typo-title-500-bold: 700 1.5rem/2rem var(--font-title);
  --typo-title-300-bold: 700 1rem/normal var(--font-title);
  --typo-body-400-regular: 400 0.875rem/1.25rem var(--font-body);
  --typo-body-400-bold: 700 0.875rem/1.25rem var(--font-body);
  --typo-body-400-medium: 500 0.875rem/1.25rem var(--font-body);
  --typo-info-600-bold: 700 0.75rem/1.125rem var(--font-body);
  --typo-info-600-medium: 500 0.75rem/1.125rem var(--font-body);
  --typo-info-600-regular: 400 0.75rem/1.125rem var(--font-body);
  --typo-info-500-bold: 700 0.625rem/0.875rem var(--font-body);

  --sp1: 0.25rem;
  --sp2: 0.5rem;
  --sp3: 0.75rem;
  --sp4: 1rem;
  --sp5: 1.25rem;
  --sp6: 1.5rem;
  --sp7: 2rem;
  --sp8: 2.5rem;
  --sp9: 3rem;
  --sp10: 3.5rem;
  --br-md: 0.5rem;
  --br-xl: 1rem;
  --br-round: 1e5px;
  --icon-md: 1rem;
  --duration-fast: 150ms;
  --duration-slow: 450ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* component dimensions: the DS's Size=Big input, and the button matched to it */
  --auth-control-height: 2.5rem;
  --auth-column-width: minmax(24rem, 5fr);
  --auth-form-width: 22.5rem;

  display: grid;
  grid-template-columns: var(--auth-column-width) 6fr;
  min-height: 100dvh;
  box-sizing: border-box;
  /* one surface for form and carousel, with the platform's glows: the locations builder's
     top-right one, its blue counterpart bottom-left, and a halo behind the form */
  background:
    radial-gradient(30% 40% at 22% 45%, color-mix(in srgb, var(--interaction-500) 12%, transparent) 0%, transparent 100%),
    radial-gradient(60% 60% at 85% -10%, rgba(90, 61, 240, 0.2) 0%, rgba(90, 61, 240, 0) 62%),
    radial-gradient(45% 50% at 5% 105%, rgba(63, 110, 245, 0.13) 0%, rgba(63, 110, 245, 0) 60%),
    var(--default-gradient-bg);
  color: var(--text-main);
  /* dark form controls, and the light text Chrome needs to preview an autofill on them */
  color-scheme: dark;
  font: var(--typo-body-400-regular);
}

/* layout.css's `:where(*)` puts Sora on every element, which beats inheritance. <i> keeps Font Awesome's */
.auth :not(i) {
  font-family: var(--font-body);
}

/* ── page: replace the map background and the global logo / terms of _layout.html ── */
body {
  display: block;
  background: rgb(20, 21, 39);
  backdrop-filter: none;
}

body > header,
body > .terms {
  display: none;
}

/* ── left column: logo, form, footer ── */
main.auth-column {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: var(--sp7) var(--sp8);
  box-sizing: border-box;
  align-items: center;
  font-size: inherit;
}

.auth-logo {
  display: block;
  align-self: center;
  height: 2.5rem;
  margin-bottom: var(--sp6);
}

/* "Sign in to" + the logo on one line, the logo sized to read as the heading's last word */
.auth form h1.auth-lockup {
  /* inline, not flex: an inline <img> sits on the text's baseline by its bottom margin edge */
  white-space: nowrap;
}

.auth-lockup img {
  display: inline-block;
  --auth-lockup-logo: 2.75rem;
  height: var(--auth-lockup-logo);
  /* Tesela's logo file has 17% of transparent padding under the wordmark (48px of 284): pull it
     down by that much so the ink, not the file, sits on the baseline. A white-label logo with
     other padding will sit a few px off */
  margin-bottom: calc(var(--auth-lockup-logo) * -0.169);
}

.auth-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: var(--auth-form-width);
  padding: var(--sp9) 0;
  border-radius: 0;
  background: none;
}

.auth-footer {
  display: flex;
  justify-content: center;
}

/* legal small print: present, not competing with the sign-up actions above it */
.auth .auth-footer a {
  color: var(--text-01);
  font: var(--typo-info-600-regular);
}

.auth .auth-footer a:hover {
  color: var(--text-01);
}

/* ── no account yet: the way in for whoever isn't a client ── */
.auth-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp3);
  margin-top: var(--sp8);
  padding-top: var(--sp6);
  border-top: 1px solid var(--backgrounds-borders);
  text-align: center;
}

.auth-cta p {
  margin: 0;
  color: var(--text-main);
  font: var(--typo-body-400-medium);
}

.auth-cta div {
  display: flex;
  gap: var(--sp2);
}

.auth-cta .auth-button {
  flex: 1;
  gap: var(--sp2);
}

/* the DS secondary Button draws its icon in --text-02 */
.auth-button i {
  font-size: var(--icon-md);
  color: var(--text-02);
}

.auth-button:hover i {
  color: var(--interaction-300);
}

/* ── form ── */
.auth form {
  gap: var(--sp5);
}

.auth form h1 {
  margin: 0 0 var(--sp5);
  text-align: center;
  font: var(--typo-title-500-bold);
  font-family: var(--font-title);
  color: var(--text-main);
}

.auth form > section {
  gap: var(--sp2);
  margin: 0;
  color: var(--text-01);
}

.auth label {
  color: var(--text-main);
  font: var(--typo-info-600-bold);
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.auth input:not([type="checkbox"]) {
  width: 100%;
  height: var(--auth-control-height);
  margin: 0;
  padding: 0 var(--sp4);
  box-sizing: border-box;
  border: 1px solid var(--backgrounds-borders);
  border-radius: var(--br-md);
  background: var(--backgrounds-input);
  color: var(--text-main);
  font: var(--typo-body-400-regular);
  transition: border-color var(--duration-fast) linear;
}

.auth input:not([type="checkbox"]):hover {
  border-color: var(--interaction-300);
}

.auth input:not([type="checkbox"]):focus {
  border-color: var(--interaction-400);
  outline: none;
}

/* browser autofill paints its own fill over the input's gradient: cover it with the gradient's
   midpoint, in every state (hover, focus), and keep the text light */
.auth input:-webkit-autofill,
.auth input:-webkit-autofill:hover,
.auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-main);
  -webkit-box-shadow: 0 0 0 100px rgb(30, 31, 50) inset;
  caret-color: var(--text-main);
}

.auth .password {
  display: block;
  position: relative;
}

.auth .password input {
  padding-right: calc(var(--sp4) * 2 + 1rem);
}

.auth .password > i {
  right: var(--sp4);
  color: var(--interaction-300);
}

.auth .password > i:hover {
  color: var(--text-main);
}

/* ── links: the DS Link ── */
.auth a {
  color: var(--text-02);
  font: var(--typo-info-600-medium);
  text-decoration: none;
}

.auth a:hover {
  color: var(--text-02);
  text-decoration: underline;
}

.auth :is(a, button, input):focus-visible {
  outline: 2px solid var(--interaction-300);
  outline-offset: 2px;
}

/* ── buttons: the DS primary / secondary Button, at the input's height ── */
.auth button[type="submit"],
.auth .back-link,
.auth .auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--auth-control-height);
  padding: 0 var(--sp4);
  box-sizing: border-box;
  border-radius: var(--br-md);
  font: var(--typo-body-400-medium);
  white-space: nowrap;
  cursor: pointer;
}

.auth button[type="submit"] {
  width: 100%;
  margin-top: var(--sp2);
  border: none;
  background: var(--gradients-400);
  color: var(--text-main);
}

.auth button[type="submit"]:hover {
  background: var(--gradients-hover);
}

.auth button[type="submit"]:disabled {
  opacity: .5;
}

/* sign in reports on the button itself while busy. Busy is disabled too, but it is a state,
   not an unavailable action, so it keeps full colour */
.auth button[type="submit"][aria-busy="true"] {
  gap: var(--sp2);
  opacity: 1;
  cursor: default;
}

.auth button[type="submit"] .spinner {
  width: var(--sp4);
  height: var(--sp4);
  border-width: 2px;
}

/* sign in's error is the notice below. The form is centred, so a notice popping in would jump
   everything around it: its slot opens to the notice's height instead, and the form glides.
   Closed, the slot cancels the form's gap above it, so it takes no room at all */
.auth .auth-error-slot {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  margin-top: calc(var(--sp5) * -1);
  overflow: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}

.auth .auth-error-slot:has(> .show) {
  grid-template-rows: minmax(0, 1fr);
}

.auth #sign-in-error {
  display: flex;
  min-height: 0;
  margin-top: var(--sp5);
}

/* closed, the notice is still laid out (it's what the slot measures): the border would show */
.auth #sign-in-error:not(.show) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .auth .auth-error-slot {
    transition: none;
  }
}

/* ── message under the form (forgot / reset password): notification.js's markup as the engine's
   inline notice, full form width. Hidden until shown, then it slides in once ── */
.auth #notification {
  width: 100%;
  margin-top: var(--sp5);
}

.auth .notification {
  display: none;
  gap: var(--sp3);
  margin: 0;
  padding: var(--sp3) var(--sp4);
  border: 1px solid color-mix(in srgb, var(--interaction-400) 35%, transparent);
  border-radius: var(--br-md);
  background: color-mix(in srgb, var(--interaction-900) 45%, transparent);
  color: var(--text-main);
  font: var(--typo-body-400-medium);
  opacity: 1;
}

.auth .notification.show {
  display: flex;
  animation: auth-message-in var(--duration-slow) var(--ease-out);
}

@keyframes auth-message-in {
  from { opacity: 0; transform: translateY(calc(var(--sp2) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  .auth .notification.show {
    animation-name: auth-message-fade;
  }

  @keyframes auth-message-fade {
    from { opacity: 0; }
  }
}

.auth .notification[data-type="error"] {
  border-color: color-mix(in srgb, var(--status-error-550) 40%, transparent);
  background: color-mix(in srgb, var(--status-error-550) 10%, transparent);
}

.auth .notification > span {
  gap: var(--sp3);
}

/* the type's icon, drawn with the Font Awesome Pro regular face the page already loads:
   paper plane (sent), exclamation (error), info. A spinner replaces it while sending */
.auth .notification > span::before {
  flex-shrink: 0;
  width: var(--icon-md);
  color: var(--interaction-300);
  font: 400 var(--icon-md) / 1 'Font Awesome 6 Pro', sans-serif;
  text-align: center;
  content: '\f05a';
}

.auth .notification[data-type="success"] > span::before {
  color: var(--status-success-500);
  content: '\f1d8';
}

.auth .notification[data-type="error"] > span::before {
  color: var(--status-error-550);
  content: '\f06a';
}

.auth .notification > span:has(.loader)::before {
  display: none;
}

.auth .notification a {
  color: var(--text-02);
}

/* a message with a title: one run of text, the title in bold and the detail in the quieter colour */
.auth .notification b {
  color: var(--text-main);
  font: var(--typo-body-400-bold);
}

.auth .notification:has(b) > span {
  color: var(--text-01);
  font: var(--typo-body-400-regular);
}

.auth .notification .loader {
  --size: var(--icon-md);
}

/* a notice, not a toast: it stays until the next action replaces it */
.auth .notification > .close-btn {
  display: none;
}

.auth .back-link,
.auth .auth-button {
  width: auto;
  border: 1px solid var(--text-02);
  background: var(--backgrounds-input);
  color: var(--text-main);
  text-decoration: none;
  transition: border-color var(--duration-fast) linear;
}

.auth .back-link:hover,
.auth .auth-button:hover {
  border-color: var(--interaction-300);
  background: var(--interaction-900);
  color: var(--text-main);
  text-decoration: none;
}

.auth form > footer {
  gap: var(--sp2);
  margin-top: var(--sp2);
}

.auth form > footer button[type="submit"] {
  flex: 1;
  margin-top: 0;
}

/* ── right: three slides over the tile map, in the one boxed panel of the page ── */
.auth-panel {
  --auth-cycle: 15s;

  position: relative;
  overflow: hidden;
  margin: var(--sp3);
  border: 1px solid var(--backgrounds-borders-dark);
  border-radius: var(--br-xl);
  background: var(--main-gradient-bg);
}

.auth-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  padding: var(--sp8) var(--sp8) var(--sp10);
  isolation: isolate;
  opacity: 0;
  animation: auth-slide var(--auth-cycle) linear infinite both;
  /* --auth-start shifts the whole rotation's clock: sign-in-panel.js sets it to jump to a step */
  animation-delay: var(--auth-start, 0s);
}

/* each step's state of the same grid; it fades out towards the edges, a window onto a larger map */
.auth-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: center / cover no-repeat;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, black 35%, transparent 100%);
}

.auth-slide.explore::before { background-image: url(images/sign-in-tiles-explore.svg); }
.auth-slide.describe::before { background-image: url(images/sign-in-tiles-predict.svg); }
.auth-slide.share::before   { background-image: url(images/sign-in-tiles-impact.svg); }

.auth-slide.describe { animation-delay: calc(var(--auth-start, 0s) + var(--auth-cycle) / 3); }
.auth-slide.share    { animation-delay: calc(var(--auth-start, 0s) + var(--auth-cycle) * 2 / 3); }

/* hovering the caption strip holds the current step; clicking a bar restarts the clock at another one */
.auth-panel:has(.auth-progress:hover) :is(.auth-slide, .auth-card),
.auth-panel:has(.auth-progress:hover) .auth-progress span::after {
  animation-play-state: paused;
}

.auth-panel.restart :is(.auth-slide, .auth-card),
.auth-panel.restart .auth-progress span::after {
  animation: none;
}

@keyframes auth-slide {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  31%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── the product card floating over the map ── */
.auth-card {
  width: 18rem;
  padding: var(--sp4);
  box-sizing: border-box;
  border: 1px solid var(--backgrounds-borders);
  border-radius: var(--br-xl);
  background: var(--backgrounds-input);
  /* the DS's raised drop: plain black at 34% */
  box-shadow: 0 var(--sp3) 1.875rem 0 rgba(0, 0, 0, 0.34);
  animation: auth-card var(--auth-cycle) var(--ease-out) infinite both;
  animation-delay: inherit;
}

@keyframes auth-card {
  0%   { transform: translateY(var(--sp3)); }
  6%   { transform: none; }
  100% { transform: none; }
}

.auth-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp3);
  font: var(--typo-info-600-bold);
}

.auth-chip {
  padding: var(--sp1) var(--sp2);
  border-radius: var(--br-round);
  background: var(--interaction-900);
  color: var(--interaction-100);
  font: var(--typo-info-500-bold);
}

.auth-chip.ready {
  background: var(--status-success-700);
  color: var(--status-success-500);
}

.auth-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-card li {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp2) 0;
  border-top: 1px solid var(--backgrounds-borders-dark);
  font: var(--typo-info-600-regular);
}

.auth-card li i {
  width: var(--sp4);
  color: var(--interaction-300);
  text-align: center;
}

.auth-card li b {
  margin-left: auto;
  font: var(--typo-info-600-bold);
}

/* Explore data: rows like the engine's layer list */
.auth-layers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-layers li {
  align-items: flex-start;
}

.auth-layers li i {
  margin-top: 0.125rem;
}

.auth-layers div {
  flex: 1;
  min-width: 0;
}

.auth-layers p {
  display: flex;
  align-items: baseline;
  gap: var(--sp1);
  margin: 0;
  font: var(--typo-info-600-bold);
}

.auth-layers p b {
  margin-left: 0;
  color: var(--interaction-300);
}

.auth-layers small {
  margin-left: auto;
  color: var(--text-01);
  font: var(--typo-info-500-bold);
}

.auth-layers span {
  display: block;
  color: var(--text-01);
  font: var(--typo-info-600-regular);
}

/* the DS Switch, at rest: 28×16 track */
.auth-toggle {
  position: relative;
  width: 1.75rem;
  height: 1rem;
  margin-left: auto;
  border-radius: var(--br-round);
  background: var(--backgrounds-borders);
}

.auth-toggle::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--text-main);
}

.auth-toggle.on {
  background: var(--gradients-200);
}

.auth-toggle.on::after {
  left: auto;
  right: 0.125rem;
}

/* AI Filter: the prompt as typed, then what it resolved to */
.auth-prompt {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin-bottom: var(--sp2);
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--interaction-400);
  border-radius: var(--br-md);
  background: var(--backgrounds-solid-03);
  font: var(--typo-info-600-regular);
}

.auth-prompt i {
  color: var(--interaction-300);
}

/* the steps between the prompt and the filters, so the card reads as one sequence */
.auth-step {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin: 0 0 var(--sp2);
  color: var(--text-01);
  font: var(--typo-info-600-regular);
}

.auth-step i {
  color: var(--interaction-300);
}

.auth-prompt + .auth-step {
  margin-top: var(--sp3);
}

.auth-result {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding-top: var(--sp3);
  border-top: 1px solid var(--backgrounds-borders);
  color: var(--text-01);
  font: var(--typo-info-600-regular);
}

.auth-result b {
  margin-left: auto;
  color: var(--text-main);
  font: var(--typo-title-300-bold);
}

.auth-card li .auth-chip {
  margin-left: auto;
}

/* Share analysis: the engine's share dialog, Public selected and the 15-day preset picked */
.auth-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp2);
  margin-bottom: var(--sp3);
}

.auth-options div {
  padding: var(--sp2) var(--sp3);
  border: 1px solid var(--backgrounds-borders);
  border-radius: var(--br-md);
  background: var(--backgrounds-solid-03);
}

.auth-options div.on {
  border-color: var(--interaction-400);
  background: color-mix(in srgb, var(--interaction-900) 60%, transparent);
}

.auth-options b {
  display: block;
  font: var(--typo-info-600-bold);
}

.auth-options span {
  display: block;
  color: var(--text-01);
  font: var(--typo-info-500-bold);
  font-weight: 400;
}

.auth-days {
  display: flex;
  gap: var(--sp1);
  margin-bottom: var(--sp4);
}

.auth-days span {
  flex: 1;
  padding: var(--sp1) 0;
  border: 1px solid var(--backgrounds-borders);
  border-radius: var(--br-round);
  color: var(--text-01);
  font: var(--typo-info-500-bold);
  text-align: center;
}

.auth-days span.on {
  border-color: var(--interaction-400);
  background: var(--interaction-900);
  color: var(--interaction-100);
}

.auth-actions {
  display: flex;
  gap: var(--sp2);
}

/* the DS Button at Size=small: primary, and secondary for the export */
.auth-action {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--sp2);
  height: 1.75rem;
  border-radius: var(--br-md);
  background: var(--gradients-400);
  font: var(--typo-info-600-medium);
}

.auth-action.secondary {
  border: 1px solid var(--text-02);
  background: var(--backgrounds-input);
}

.auth-action i {
  color: var(--text-main);
}

.auth-action.secondary i {
  color: var(--text-02);
}

/* ── caption ── */
.auth-caption {
  max-width: 26rem;
  /* room for a two-line text, so the heading sits at the same height on every slide */
  min-height: 5rem;
  text-align: center;
}

.auth-caption h2 {
  margin: 0 0 var(--sp2);
  font: var(--typo-title-500-bold);
  font-family: var(--font-title);
}

.auth-caption p {
  margin: 0;
  color: var(--text-01);
  font: var(--typo-body-400-regular);
}

/* ── progress: one segment per slide, all reset together when the cycle loops ── */
.auth-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--sp2);
  /* the box is the whole bottom strip, captions included, so it is the hover target for the
     pause; the slide's bottom padding plus the caption's 5rem, and a little air above it */
  padding: calc(var(--sp10) + 5rem + var(--sp4)) var(--sp6) var(--sp6);
}

.auth-progress span {
  position: relative;
  flex: 1;
  height: 0.1875rem;
  border-radius: var(--br-round);
  background: var(--backgrounds-borders);
  cursor: pointer;
}

/* a 3px bar is too thin to aim at: the hit area extends above and below it */
.auth-progress span::before {
  content: '';
  position: absolute;
  inset: calc(var(--sp3) * -1) 0;
}

.auth-progress span:hover {
  background: var(--text-01);
}

.auth-progress span::after {
  content: '';
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--text-main);
  transform-origin: left;
  animation: auth-fill-1 var(--auth-cycle) linear infinite;
  animation-delay: var(--auth-start, 0s);
}

.auth-progress span:nth-child(2)::after { animation-name: auth-fill-2; }
.auth-progress span:nth-child(3)::after { animation-name: auth-fill-3; }

@keyframes auth-fill-1 {
  0%      { transform: scaleX(0); }
  33.33%  { transform: scaleX(1); }
  100%    { transform: scaleX(1); }
}

@keyframes auth-fill-2 {
  0%, 33.33% { transform: scaleX(0); }
  66.66%     { transform: scaleX(1); }
  100%       { transform: scaleX(1); }
}

@keyframes auth-fill-3 {
  0%, 66.66% { transform: scaleX(0); }
  100%       { transform: scaleX(1); }
}

/* no rotation: the first step stays, the bar reads as one of three */
@media (prefers-reduced-motion: reduce) {
  .auth-slide,
  .auth-card,
  .auth-progress span::after {
    animation: none;
  }

  /* the bars still switch steps, without the fade: sign-in-panel.js sets data-step */
  .auth-panel:not([data-step]) .explore,
  .auth-panel[data-step="0"] .explore,
  .auth-panel[data-step="1"] .describe,
  .auth-panel[data-step="2"] .share {
    opacity: 1;
  }

  .auth-progress span::after {
    transform: scaleX(0);
  }

  .auth-panel:not([data-step]) .auth-progress span:nth-child(1)::after,
  .auth-panel[data-step="0"] .auth-progress span:nth-child(1)::after,
  .auth-panel[data-step="1"] .auth-progress span:nth-child(2)::after,
  .auth-panel[data-step="2"] .auth-progress span:nth-child(3)::after {
    transform: none;
  }
}

@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    display: none;
  }

  main.auth-column {
    padding: var(--sp5) var(--sp4);
  }

  .auth-content {
    max-width: none;
  }
}