/* Approve a sign-in: the language's one card (styles.css .approve). At its head the code to compare, in the largest
   figures the console sets (the one place type goes above a page title: it is what the person reads against their
   terminal, letter by letter), the text face with its tabular figures, quiet once the sign-in has ended; who asks as
   the card's facts; what it may do on a hairline of its own; Deny and Approve at its foot. Typed, the code is the
   same figures on a line to write on. Every rule is under the page, so nothing here reaches another page or a
   dialog. Tokens from styles.css only. */

.page[data-page="device"] .device-code {
  font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: .045em; font-variant-numeric: tabular-nums;
  color: var(--ink); overflow-wrap: anywhere;
}
.page[data-page="device"] .device-code[data-ended] { color: var(--ink-3); }  /* over: nothing to compare any more */
.page[data-page="device"] .device-code-dash { margin: 0 .02em; color: var(--ink-3); font-weight: 500; }
.page[data-page="device"] .device-hint { text-wrap: pretty; }

/* what it may do: a part of the card of its own, on a hairline, as the facts are. Its legend floats, so it is a line
   of the group under the hairline rather than a caption cut into it. */
.page[data-page="device"] .device-scopes { padding-top: 16px; border-top: 1px solid var(--rule); }
.page[data-page="device"] .device-scopes > legend { float: left; width: 100%; margin: 0; }
.page[data-page="device"] .device-scopes .help { margin: -6px 0 2px; }
.page[data-page="device"] .device-next:empty { display: none; }
/* an expired terminal's sign-in starts again with a command, its own line introducing it */
.page[data-page="device"] .device-again { display: grid; gap: 6px; }
.page[data-page="device"] .device-again > p { color: var(--ink-2); }

/* the code, typed: the figures it is shown in, on the line a field is */
.page[data-page="device"] .device-input {
  height: 48px; padding: 0 2px; font-size: 24px; font-weight: 600; letter-spacing: .045em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.page[data-page="device"] .device-input::placeholder { font-weight: 500; text-transform: none; }

@media (max-width: 599px) {
  .page[data-page="device"] .device-code { font-size: 32px; }
}