/* ==========================================================================
   Covio JSR — the sign-in surface.

   A split screen: the brand on the left in --covio-dark, the work on the right
   on --covio-light. Below 900px the brand panel becomes a short header band so
   the form is the first thing on the screen at 390px wide.
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Left — the identity panel.
   -------------------------------------------------------------------------- */

.auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-7) var(--space-6);
  background: var(--covio-dark);
  color: var(--paper-100);
  overflow: hidden;
}

/* A single soft teal wash, low in the panel. Nothing else competes with it. */
.auth__brand::before {
  content: '';
  position: absolute;
  left: -10%;
  bottom: -30%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(63, 224, 197, .10), transparent 62%);
  pointer-events: none;
}

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

.auth__logo {
  width: 176px;
  height: auto;
}

.auth__slogan {
  margin-top: var(--space-3);
  font-family: var(--ff-display);
  font-size: var(--fs-secondary);
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--paper-62);
}

.auth__slogan .hl {
  color: var(--covio-teal);
  font-weight: 600;
}

.auth__lede {
  max-width: 30ch;
  margin: 0;
  font-family: var(--ff-display);
  font-size: 26px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--paper-100);
}

.auth__brand-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1 1 auto;
  justify-content: center;
}

.auth__brand-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--paper-38);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* --------------------------------------------------------------------------
   The route schematic — GATE → LINE → QC → DISPATCH → DOCK.
   One teal dot travels the line on a 13-second loop. Under reduced motion the
   dot parks at the first node and the line stays drawn: the diagram still
   says what it means without moving.
   -------------------------------------------------------------------------- */

.route {
  width: 100%;
  max-width: 520px;
}

.route svg {
  display: block;
  width: 100%;
  height: auto;
}

.route .route__label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .2em;
  fill: rgba(233, 238, 247, .42);
}

.route .route__track {
  stroke: rgba(233, 238, 247, .18);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

.route .route__tick {
  stroke: rgba(233, 238, 247, .22);
  stroke-width: 1.2;
}

.route .route__node {
  fill: var(--covio-dark);
  stroke: rgba(233, 238, 247, .38);
  stroke-width: 1.5;
}

.route .route__node--live {
  fill: var(--covio-teal);
  stroke: var(--covio-teal);
}

.route .route__pulse {
  fill: none;
  stroke: var(--covio-teal);
  stroke-width: 1.2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: covio-route-pulse 3s ease-out infinite;
}

.route .route__mover {
  fill: var(--covio-teal);
  offset-path: path('M 20 62 L 500 62');
  animation: covio-route-travel 13s linear infinite;
}

@keyframes covio-route-pulse {
  0% {
    opacity: .5;
    transform: scale(.4);
  }
  80% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
  }
}

@keyframes covio-route-travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route .route__mover {
    offset-distance: 0%;
  }

  .route .route__pulse {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Right — the work panel.
   -------------------------------------------------------------------------- */

.auth__work {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-7) var(--space-5);
  background: var(--covio-light);
}

.auth__card {
  width: 100%;
  max-width: 420px;
}

.auth__title {
  margin-bottom: var(--space-2);
}

.auth__lede-sm {
  margin-bottom: var(--space-5);
  color: var(--muted-ink);
  font-size: var(--fs-secondary);
  line-height: var(--lh-secondary);
}

.auth__notice {
  margin-bottom: var(--space-4);
}

/* "Forgot password?" reads on the password label's line, where the eye already
   is when the password is the problem — but it is LAST in the DOM, so it never
   sits in the tab order between the username and the password. A grid puts it
   back on the first row visually without moving it in the document. */
.auth__password-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.auth__password-field > .field__label {
  grid-column: 1;
  grid-row: 1;
}

.auth__password-field > .auth__label-link {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.auth__password-field > .field__control,
.auth__password-field > .field__error,
.auth__password-field > .auth__capslock {
  grid-column: 1 / -1;
}

.auth__label-link {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.auth__submit {
  margin-top: var(--space-2);
}

.auth__foot {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  text-align: center;
}

.auth__foot p {
  color: var(--muted-ink);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.auth__foot .mono {
  margin-top: var(--space-2);
  color: rgba(19, 32, 58, .45);
  font-size: 10px;
  letter-spacing: .14em;
}

/* The caps-lock hint appears only while caps lock is on. */
.auth__capslock[hidden] {
  display: none;
}

.auth__capslock {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Narrow — the brand panel folds into a header band above the form.
   -------------------------------------------------------------------------- */

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

  .auth__brand {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-5);
  }

  .auth__brand-head {
    gap: var(--space-3);
  }

  .auth__logo {
    width: 132px;
  }

  .auth__lede {
    font-size: 19px;
    line-height: 27px;
  }

  /* The schematic and the panel footer are atmosphere, not information; on a
     phone the form gets the screen instead. */
  .route,
  .auth__brand-foot {
    display: none;
  }

  .auth__work {
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}

/* A request id is a code to read out or paste into a message, so it is mono,
   selectable, and allowed to break across lines. */
.request-id {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--covio-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  color: var(--covio-ink);
  text-transform: none;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  user-select: all;
}