/* Sign-in screen (hosted build only): a Notino poster and the code gate side by side, stacked on a phone.
   Token block (everything below comes from it; colours only through design-system tokens):
     colour  poster      --nt-brand-pastel-violine  the one bold surface, a Notino secondary colour, both themes
             on poster   --nt-brand-black            10.9 : 1 on the poster
             panel       --nt-card, text --nt-ink / --nt-ink-2 / --nt-muted, rules --nt-line(-strong)
             action      .nt-btn--primary (ink on card), focus --nt-focus, notes --nt-soft / --nt-warn-bg
     type    Roboto, the system's 1.25 scale: caption .75 · small .875 · body 1 · lead 1.25 · h2 2 · h1 2.5 ·
             display 3.5, plus two steps above it for the poster title only: 4.375 and 5.46875rem (3.5 × 1.25, × 1.25²)
     space   --nt-space-* only; radius --nt-radius-xs on controls, none on the poster; no shadows
   Motion: the form fades in when its step changes; nothing moves on its own; none with reduced motion. */
.gate-on #view { max-width: none; padding: 0; }
.gate {
  --gate-title: clamp(var(--nt-text-h1), 1.5rem + 4vw, 5.46875rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - var(--nt-appbar-h)); min-height: calc(100dvh - var(--nt-appbar-h));
  background: var(--nt-card);
}
@media (min-width: 960px) { .gate { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* the poster: a flat brand colour and type set the way Notino's own posters are, nothing generated */
.gate__poster {
  background: var(--nt-brand-pastel-violine); color: var(--nt-brand-black);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--nt-space-6);
  padding: var(--nt-space-12) var(--nt-gutter-mobile) var(--nt-space-8); min-width: 0;
}
@media (min-width: 960px) { .gate__poster { padding: var(--nt-space-16) var(--nt-space-12) var(--nt-space-12); } }
.gate__title {
  /* 1.32: the web Roboto files (300, 400, 700) have a 1.319 em content area; any tighter line box lets it spill out
     of the element. The title is one line where it fits, so the loose leading only shows if it ever wraps. */
  margin: 0; font-size: var(--gate-title); line-height: 1.32; font-weight: var(--nt-weight-light); text-wrap: balance;
  letter-spacing: var(--nt-text-display-tracking); color: inherit; overflow-wrap: anywhere;
}
.gate__lead {
  margin: 0; max-width: 32ch; font-size: var(--nt-text-lead); line-height: var(--nt-text-lead-lh);
  font-weight: var(--nt-text-lead-weight); color: inherit;
}

/* the panel: one column of controls; stacked, it starts on the poster's left edge; side by side, centred on its half */
.gate__panel {
  display: grid; align-content: start; justify-items: start; min-width: 0;
  padding: var(--nt-space-10) var(--nt-gutter-mobile) var(--nt-space-12);
}
@media (min-width: 960px) { .gate__panel { align-content: center; justify-items: center; padding: var(--nt-space-16) var(--nt-space-12); } }
/* minmax(0, 1fr): the column never grows to an input's natural width (the code field's wide monospace did, 22 px past the card at 375 px) */
.signin {
  width: 100%; max-width: 24rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nt-space-5);
  animation: gate-step var(--nt-dur-slow) var(--nt-ease);
}
@keyframes gate-step { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .signin { animation: none; } }
.signin__title {
  margin: 0; font-size: var(--nt-text-h2); line-height: 1.32; font-weight: var(--nt-weight-light);
  letter-spacing: var(--nt-text-h2-tracking); color: var(--nt-ink); text-wrap: balance;
}
.signin__lead { margin: 0; font-size: var(--nt-text-body); line-height: var(--nt-text-body-lh); color: var(--nt-ink-2); overflow-wrap: anywhere; }
.signin__lead strong { color: var(--nt-ink); }
.signin__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nt-space-2); margin-top: var(--nt-space-2); }
.signin__label { font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); font-weight: var(--nt-weight-medium); color: var(--nt-ink); }
.signin__input {
  font: inherit; font-size: var(--nt-text-body); color: var(--nt-ink); background: var(--nt-card);
  border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius-xs);
  min-height: 48px; min-width: 0; padding: 0 var(--nt-space-4);
}
.signin__input:focus { outline: 2px solid var(--nt-focus); outline-offset: 1px; border-color: var(--nt-ink); }
.signin__input[aria-invalid="true"] { border-color: var(--nt-down); }
.signin__input:disabled { opacity: .55; }
/* the code field: six digit places drawn under one input (one control, so paste, autofill and screen readers work) */
.signin__input--code {
  --cell: 1.6ch; /* one digit: 1ch glyph + .6ch letter spacing, so the six underlines sit under the six digits */
  justify-self: start; width: calc(6 * var(--cell) + 2 * var(--nt-space-4));
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace;
  font-size: var(--nt-text-h2); letter-spacing: .6ch; min-height: 64px;
  background-image: repeating-linear-gradient(90deg, var(--nt-line-strong) 0 1ch, transparent 1ch var(--cell));
  background-repeat: no-repeat; background-size: calc(6 * var(--cell)) 2px;
  background-position: var(--nt-space-4) calc(100% - var(--nt-space-3));
}
.signin__input--code:focus { background-image: repeating-linear-gradient(90deg, var(--nt-ink) 0 1ch, transparent 1ch var(--cell)); }
.signin__form .nt-btn { min-height: 48px; margin-top: var(--nt-space-2); font-weight: var(--nt-weight-medium); }
.signin__actions { display: flex; flex-wrap: wrap; gap: var(--nt-space-2) var(--nt-space-5); }
.signin__link {
  font: inherit; font-size: var(--nt-text-small); color: var(--nt-ink); background: none; border: 0;
  padding: var(--nt-space-1) 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  justify-self: start; min-height: 24px;
}
.signin__link:disabled { color: var(--nt-muted); text-decoration: none; cursor: default; }
.signin__note { margin: 0; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); color: var(--nt-ink); background: var(--nt-soft); padding: var(--nt-space-3) var(--nt-space-4); border-radius: var(--nt-radius-xs); }
.signin__note--warn { background: var(--nt-warn-bg); color: var(--nt-warn-ink); }
.signin__error { margin: 0; min-height: 1.25em; font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); color: var(--nt-down); }
.signin__access { margin: var(--nt-space-3) 0 0; padding-top: var(--nt-space-4); border-top: 1px solid var(--nt-line); font-size: var(--nt-text-small); line-height: var(--nt-text-small-lh); color: var(--nt-muted); overflow-wrap: anywhere; }
.signin__access a { color: var(--nt-ink); text-underline-offset: 3px; }
[hidden] { display: none !important; }
/* Load and failure panels after sign-in: the title is the h1 of the page, styled like the panel's bold line. */
.nt-state__title { margin: 0; font: inherit; font-weight: 700; color: inherit; }