/* Sign up frame: the work on the left, the form on the right. */

/* A fixed height, so the record stream is clipped by the panel rather than stretching it. */
.auth {
  display: grid;
  grid-template-columns: 58fr 42fr;
  height: 100svh;
}

/* Left panel inverts the app palette, so the front door and the product share one language. */
.auth-work {
  --ink: oklch(0.985 0 0);
  --ink-dim: color-mix(in oklch, var(--ink) 45%, transparent);
  --ink-faint: color-mix(in oklch, var(--ink) 14%, transparent);

  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-2);
  background: var(--foreground);
  color: var(--ink);
  overflow: hidden;
}

/* The stream overflows its panel and fades at both ends, because the work never stops. */
.record-stream {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  padding: 0 var(--space-8);
}

.record {
  display: grid;
  grid-template-columns: 9rem 5rem 1fr 6rem;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  color: var(--ink-dim);
  font: var(--type-caption);
}

.record[data-decided] {
  color: var(--ink);
}

.record-id,
.record-week,
.record-distance {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.record-distance {
  text-align: right;
}

.record-defect {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-verdict {
  justify-self: end;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-4xl);
  font: 500 var(--text-2xs) / 1.4 var(--font-sans);
}

.record-verdict[data-verdict="af"] {
  background: color-mix(in oklch, var(--destructive) 22%, transparent);
  color: oklch(0.85 0.09 25);
}

.record-verdict[data-verdict="naf"] {
  background: color-mix(in oklch, var(--green-500) 20%, transparent);
  color: var(--green-200);
}

.auth-statement {
  margin: 0;
  padding: 0 var(--space-8) var(--space-8);
  max-width: 34ch;
  color: var(--ink);
  font: 400 var(--text-xl) / 1.45 var(--font-sans);
  letter-spacing: var(--tracking-tight);
}

.auth-statement span {
  display: block;
  margin-top: var(--space-3);
  max-width: 44ch;
  color: var(--ink-dim);
  font: var(--type-body);
  letter-spacing: normal;
}

/* Right panel holds the form directly, with no card between the page and the fields. */
.auth-form-panel {
  display: flex;
  align-items: center;
  padding: var(--space-10);
  background: var(--background);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 100svh;
  }

  /* The panel collapses to just the mark, because hiding it outright takes the branding with it. */
  .record-stream,
  .auth-statement {
    display: none;
  }

  .auth-form-panel {
    align-items: flex-start;
    padding: var(--space-10) var(--space-6);
  }
}