/* Shared by the login, join, privacy, 404 and oauth-missing screens. */

body.centered {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(1.5rem, 5vh, 4rem) var(--gutter);
}

.auth-wrap { width: min(30rem, 100%); }

.auth-card { margin-top: 1.4rem; }

.auth-title {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  text-transform: uppercase;
  margin-top: 0.75rem;
}

.btn.is-disabled { pointer-events: none; opacity: 0.45; }

/* --- notices -------------------------------------------------------------- */
.notice {
  border: 1px solid var(--line-hot);
  border-left-width: 3px;
  background: var(--ink-2);
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--paper-dim);
}
.notice strong { color: var(--paper); display: block; margin-bottom: 0.2rem; }
.notice--bad { border-left-color: var(--tally); }
.notice--warn { border-left-color: var(--amber); }
.notice--ok { border-left-color: var(--mint); }

/* --- permission disclosure ------------------------------------------------ */
.perm-mini { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.perm-mini li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.76rem; color: var(--paper-dim);
}
.perm-mini li::before {
  position: absolute; left: 0; top: -0.05rem; font-size: 0.8rem; font-weight: 500;
}
.perm-mini .yes::before { content: '✓'; color: var(--mint); }
.perm-mini .no::before { content: '✕'; color: var(--tally); }
.perm-mini .no { color: var(--paper-mute); }

/* --- join screen ---------------------------------------------------------- */
.join-card { margin-top: 1.4rem; }

.code-input {
  font-family: var(--display) !important;
  font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.85rem 0.5rem 0.85rem 0.78rem !important;
}

.host-strip {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.host-strip .host-name { font-size: 0.9rem; font-weight: 500; }

/* --- privacy / long-form -------------------------------------------------- */
.doc { width: min(46rem, 100%); }
.doc h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p, .doc li { font-size: 0.85rem; line-height: 1.75; color: var(--paper-dim); }
.doc ul { padding-left: 1.1rem; }
.doc li { margin-bottom: 0.4rem; }

/* --- 404 ------------------------------------------------------------------ */
.big-404 {
  font-family: var(--display); font-weight: 800;
  /* The card is capped at 30rem, so 22vw pushed the digits straight out of it
     on any wide screen. Bounded to what actually fits. */
  font-size: clamp(4rem, 14vw, 9rem); line-height: 0.85;
  color: transparent; -webkit-text-stroke: 2px var(--line-hot);
}