/*
 * The registration pages on nolabel.no and the set-password page on
 * app.nolabel.no. They share the .nl-public frame with the product page, so
 * every colour here is one of the dashboard's tokens.
 */
.nl-reg {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-6);
}

.nl-reg > * { min-width: 0; }

.nl-reg-column { max-width: 52ch; }

.nl-reg-title {
  margin: 0;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
}

.nl-reg-lead {
  margin: var(--space-3) 0 var(--space-6);
  font-size: 15px;
  color: var(--color-neutral-700);
}

.nl-reg-answer {
  margin: var(--space-3) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 26px);
}

.nl-reg-answer + .nl-reg-lead { margin-top: var(--space-2); }

.nl-dot-danger { color: var(--nl-danger-500); }

/* The trial grid, two by two, against the right edge. */
.nl-reg-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  justify-self: end;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}

.nl-reg-tile { display: grid; place-items: center; }
.nl-reg-circle { width: 62%; aspect-ratio: 1; border-radius: 50%; }

.nl-reg-tile:nth-child(1) { background: var(--scheme-tile-1-bg); color: var(--scheme-tile-1-text); }
.nl-reg-tile:nth-child(1) .nl-reg-circle { background: var(--scheme-tile-1-fg); }
.nl-reg-tile:nth-child(2) { background: var(--scheme-tile-2-bg); color: var(--scheme-tile-2-text); }
.nl-reg-tile:nth-child(2) .nl-reg-circle { background: var(--scheme-tile-2-fg); }
.nl-reg-tile:nth-child(3) { background: var(--scheme-tile-3-bg); color: var(--scheme-tile-3-text); }
.nl-reg-tile:nth-child(3) .nl-reg-circle { background: var(--scheme-tile-3-fg); }
.nl-reg-tile:nth-child(4) { background: var(--scheme-tile-4-bg); color: var(--scheme-tile-4-text); }
.nl-reg-tile:nth-child(4) .nl-reg-circle { background: var(--scheme-tile-4-fg); }
/* Tile 4's ground is the accent in some schemes, which would swallow an
   accent full stop. */
.nl-reg-tile .nl-dot { color: inherit; }

.nl-reg-tile-days {
  font-family: var(--font-heading);
  font-size: clamp(56px, 7vw, 110px);
  line-height: 1;
  font-feature-settings: "tnum";
}

.nl-reg-tile-free {
  padding: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.1;
  text-align: center;
}

.nl-reg-form { display: grid; gap: var(--space-4); }

.nl-field { display: grid; gap: var(--space-1); }

.nl-field label { font-size: 13px; }

.nl-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-neutral-400);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
}

/* The dashboard's text input joins here so a keyboard user sees the same ring
   on both, rather than the browser default on one of them. */
.nl-input:focus-visible,
.dashboard .input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.nl-field-error { margin: 0; font-size: 13px; color: var(--nl-danger-700); }

.nl-reg-hint { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

.nl-reg-hint code { font-family: var(--font-mono); color: var(--color-text); }

/* One panel, three states; without a state it has nothing to say. */
.nl-reg-org {
  padding: var(--space-3) var(--space-4);
  font-size: 14px;
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.nl-reg-org[data-state=""] { display: none; }

.nl-reg-org[data-state="unknown"] { background: var(--nl-danger-100); color: var(--nl-danger-700); }

.nl-reg-org[data-state="unavailable"] { background: var(--color-neutral-200); color: var(--color-neutral-900); }

/* The caption is the register's own name, and a proper noun set in uppercase
   loses the capital that marks it as one. */
.nl-reg-org-caption {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 13px;
}

.nl-reg-org[data-state="found"] .nl-reg-org-message { font-family: var(--font-heading); font-size: 20px; }

@media (max-width: 760px) {
  .nl-reg { grid-template-columns: 1fr; }
  .nl-reg-tiles { justify-self: stretch; }
}