/* The server pages (sign-in, two-step verification, consent, errors): a centred white card on the ground, the logo on
   top. Every value comes from tokens.css, linked before this file. Readable from 375px wide, since Claude's phone app
   opens these pages in its own browser. See docs/dev/ui.md. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
p,
ul,
ol {
  margin: 0;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-strong);
}

strong {
  font-weight: 650;
}

/* Header: the logo and the organisation centred above the card, the language switch in the corner. */

.top {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-9) var(--space-4) var(--space-6);
}

.top-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

/* The lockup file at its master size: mark 52px, word 54px (#14). */
.lockup {
  display: block;
  width: auto;
  height: 52px;
}

.org {
  font-size: var(--text-meta);
  color: var(--muted);
}

.lang {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-control);
}

.lang:hover {
  color: var(--ink);
  background: var(--fill-hover);
}

/* The card */

main {
  padding: 0 var(--space-4) var(--space-9);
}

.card {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.card > * + * {
  margin-top: var(--space-4);
}

.card > h1 + * {
  margin-top: var(--space-3);
}

h1 {
  font-size: var(--text-screen-title);
  font-weight: var(--weight-heading);
  line-height: var(--leading-screen-title);
  letter-spacing: var(--tracking-screen-title);
  overflow-wrap: break-word;
}

/* Forms */

form {
  margin-top: var(--space-5);
}

label {
  display: block;
  margin: var(--space-4) 0 6px;
  font-size: var(--text-ui);
  font-weight: 600;
}

form > label:first-of-type {
  margin-top: 0;
}

input {
  display: block;
  width: 100%;
  height: var(--touch-target);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: 16px; /* 16px or more: iOS doesn't zoom in on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
}

input:hover {
  border-color: var(--muted);
}

input.code {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

/* A username only for the password manager (the change-password and new-password pages): never shown. */
input[hidden] {
  display: none;
}

/* An email shown for the password manager, not for editing. */
input[readonly] {
  color: var(--ink-2);
  background: var(--fill-hover);
  border-color: var(--line);
}

/* The help under a field, tied to it with aria-describedby. */
.field-help {
  margin-top: 6px;
  font-size: var(--text-meta);
  color: var(--muted);
}

button,
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:hover,
.button:hover {
  color: var(--on-accent);
  background: var(--accent-strong);
}

button.secondary,
.button.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

button.secondary:hover,
.button.secondary:hover {
  color: var(--ink);
  background: var(--fill-hover);
}

button:disabled {
  color: var(--muted);
  background: var(--fill-hover);
  cursor: default;
}

/* Two answers side by side: the primary one first. */
.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.card > .actions {
  margin-top: var(--space-5);
}

.actions > form {
  margin: 0;
}

.actions button,
.actions .button {
  margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  .button,
  input {
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }
}

/* Messages and small print */

.error,
.info {
  padding: var(--space-3) 14px;
  font-size: var(--text-ui);
  border-radius: var(--radius-control);
}

.error {
  color: var(--danger);
  background: var(--danger-soft);
}

.info {
  color: var(--ink);
  background: var(--fill-hover);
}

.warning {
  font-weight: 600;
}

.help,
.alt {
  font-size: var(--text-ui);
  text-align: center;
}

.card > .help,
.card > .alt {
  margin-top: var(--space-5);
}

.help,
.details {
  color: var(--muted);
}

.details {
  font-size: var(--text-meta);
  overflow-wrap: anywhere;
}

/* Two-step set-up: numbered steps, the QR code and the key. */

.steps {
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  position: relative;
  padding-left: 40px;
  counter-increment: step;
}

.steps > li + li {
  margin-top: var(--space-6);
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--text-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--fill-selected);
  border-radius: var(--radius-pill);
}

.steps form {
  margin-top: var(--space-3);
}

.qr-frame {
  display: inline-block;
  margin: var(--space-3) 0;
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.qr {
  display: block;
  width: 11rem;
  height: 11rem;
}

.key-line {
  font-size: var(--text-ui);
  color: var(--ink-2);
}

code {
  font-family: var(--font-mono);
}

.key {
  padding: 1px 6px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--fill-hover);
  border-radius: var(--radius-key);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Recovery codes */

.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  list-style: none;
  background: var(--surface-hover);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.codes code {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Consent: what the app will be able to do. */

.scopes {
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.scopes li {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-ui);
}

.scopes li + li {
  border-top: 1px solid var(--line-soft);
}

/* Phones */

@media (max-width: 479.98px) {
  /* Below the language switch, which keeps its corner. */
  .top {
    padding-top: calc(var(--space-3) + var(--touch-target) + var(--space-2));
    padding-bottom: var(--space-5);
  }

  main {
    padding: 0 var(--space-3) var(--space-8);
  }

  .card {
    padding: var(--space-6) var(--space-5);
  }

  h1 {
    font-size: 24px;
  }

  .steps > li {
    padding-left: 36px;
  }
}