:root {
  --accent: #6ddb62;
  --on-accent: #021c09;
  --bg: #0d100d;
  --bg-top: #0f2a14;
  --fg: #f2f5f2;
  --muted: #9aa39a;
  --surface: #1a1f1a;
  --line: #2c332c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 45%) fixed, var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
main { width: 100%; max-width: 30rem; text-align: center; }
main.doc { text-align: left; }
h1 { margin: 0.25em 0 0.5em; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; }
.kicker, .label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--muted); }
.actions { display: grid; gap: 12px; }
.button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.status { min-height: 1.5em; color: var(--muted); }
.fallback {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--fg);
  font-family: ui-monospace, monospace;
}
.note { color: var(--muted); font-size: 0.9rem; }
/* Solo para lectores de pantalla (S24, IV-06): «Invitación copiada.» se anuncia (role=status) sin verse. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a:not(.button) { color: var(--accent); }

/* hidden debe ganar siempre, también sobre elementos con display propio (.crest, #valid, #phone). */
[hidden] { display: none !important; }

/* Escudo (components.md §5.1): círculo con el color del kit y las iniciales, o la foto. */
.crest {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 8px auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
  color: var(--fg);
}
/* Anillo interior blanco al ~28 % (modo oscuro), por encima de la foto. */
.crest::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.crest-initials { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.02em; }
.crest-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#valid-title strong { color: var(--accent); }

/* Páginas de link /c/ y /m/ (S24 §4.3). Contenido alineado arriba sin tocar la regla body, que también usa
   /delete-account/. Con viewport-fit=cover, el margen lateral respeta la muesca con el teléfono en horizontal.
   Márgenes explícitos: #valid es una columna flex y sus márgenes no colapsan. */
body.link {
  place-items: start center;
  padding-top: 24px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
body.link #valid { display: flex; flex-direction: column; }
#valid-kicker { margin: 0 0 8px; }
/* «Código: {CODE}» (fila 6): cierra el contenido; el margen inferior deja el código fuera del desvanecido de la barra. */
.code-line {
  margin: 16px 0 24px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
/* Un toque selecciona el código entero, para copiarlo a mano. */
#code { -webkit-user-select: all; user-select: all; }
/* Barra del teléfono (filas 7-10) y bloque de computador. Fuera de la media query van en el flujo, bajo el código. */
#phone, #desktop { display: flex; flex-direction: column; gap: 12px; }
#phone .status, #phone .note, #desktop .note { margin: 0; }
#phone .status { min-height: 0; }

/* Teléfono en vertical (IV-20, AP-16): la barra queda pegada abajo con position: sticky y no fixed: sigue en el flujo,
   no hay que reservarle alto y, si se abre el campo de respaldo de la copia, crece sin tapar nada. El contenido largo
   pasa por detrás. En computador, tablet y teléfono en horizontal no aplica: la barra va bajo el código. */
@media (max-width: 40rem) and (min-height: 30rem) {
  body.link {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: 0;
  }
  body.link main,
  body.link #valid { flex: 1; display: flex; flex-direction: column; }
  body.link #phone {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--bg);
    padding: 12px 0 max(16px, env(safe-area-inset-bottom));
  }
  /* Desvanecido de 24 px sobre la barra: el contenido se apaga al pasar por detrás. No recibe toques. */
  body.link #phone::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
  }
}