/* What /signup and /oauth/authorize add to the sign-in page's Lantern look (login-lantern.css, which they load first and which draws the header, the stage,
   the gate card, the headline, the labels, the buttons, the code cells and the focus ring): the painted field behind the page, text fields as the same round pills as
   the e-mail field, the quiet outline button, the small note and the state mark. Round 3 (2026-10-19): this file replaced the old login.css, which only these two pages still loaded. */

/* the painted field (atmosphere.js) behind the whole page, the card and the words above it */
.lantern .scene .atmo { position: fixed; inset: 0; z-index: 0; }
.lantern .top { z-index: 3; }
.lantern .scene, .lantern .gate { position: relative; z-index: 1; }
.lantern .scene .promise { position: relative; }

/* text fields: /login's pill, 56 px tall, 16 px text */
.lantern input[type="email"], .lantern input[type="text"] { text-overflow: ellipsis; }
.lantern input[type="text"] {
  width: 100%;
  height: 3.5rem;
  padding: 0 1.4rem;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line-input);
  border-radius: 999px;
  font: 400 1rem var(--sans);
}
.lantern input[type="text"]:focus-visible { border-radius: 999px; }
.lantern input[type="text"][aria-invalid="true"] { border-color: var(--stop); }
.lantern input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px var(--field) inset; caret-color: var(--ink); }

.lantern .pilot-big { width: 72px; height: 72px; margin: 0 0 1.2rem -0.35rem; }
.lantern .pilot-big.arrive { animation: arrive 220ms var(--ease) both; }

.lantern .hint { margin-top: 0.6rem; max-width: 40ch; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.5; text-wrap: pretty; }
.lantern .fine[hidden], .lantern .hint[hidden] { display: none; }

/* the quiet button: an outline, never green (a lone step button is green; this one beside it is not) */
.lantern .go-quiet, .lantern .go-solo.go-quiet {
  background: transparent;
  border-color: var(--line-input);
  color: var(--ink);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .lantern .go-quiet:hover, .lantern .go-solo.go-quiet:hover { background: var(--surface-3); border-color: var(--blue-lit); }
}
.lantern .go:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; }
.lantern .go[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* the language of the account: two pills, one real radio each; the chosen one is blue with white text, like the LT/EN switch in the header */
.lantern fieldset.pick { min-width: 0; margin: 1.15rem 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lantern fieldset.pick legend { flex: 0 0 100%; margin-bottom: 0.55rem; padding: 0; font: 500 0.78rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.lantern .pick-opt { position: relative; display: block; flex: 1 1 0; margin: 0; font: inherit; letter-spacing: 0; text-transform: none; }
.lantern .pick-opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lantern .pick-opt span {
  display: grid;
  place-items: center;
  min-width: 7rem;
  height: 3.5rem;
  padding: 0 1.2rem;
  background: var(--field);
  border: 1px solid var(--line-input);
  border-radius: 999px;
  color: var(--ink-dim);
  font: 600 0.95rem var(--sans);
  transition: transform 120ms var(--ease);
}
.lantern .pick-opt input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--on-blue); box-shadow: 0 6px 18px rgba(59, 100, 232, 0.35); }
.lantern .pick-opt input:active + span { transform: scale(0.97); }
.lantern .pick-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .lantern .pick-opt input:not(:checked):hover + span { border-color: var(--blue-lit); background: var(--surface-3); color: var(--ink); }
}
.lantern fieldset.pick .hint { flex: 0 0 100%; margin-top: 0.1rem; }