/* Believer Certificate (feat/videos follow-up, 2026-08-08): the /certificate
   page + its entry chip on the main page. Same HUD-terminal language as
   hud.css/broadcast.css -- thin green hairline, corner brackets, Space Mono
   caps, near-black card -- so the page reads as another face of the same
   terminal, not a separate product. */

/* ---- the chip (main page, bottom-left column) ----
   Sits exactly where THE BROADCAST chip used to: one chip-height above
   TRANSMISSIONS. An <a>, not a <button> -- it navigates to /certificate. */
.cert-chip {
  position: fixed;
  left: calc(1rem + env(safe-area-inset-left));
  bottom: calc(3.15rem + env(safe-area-inset-bottom));
  z-index: 20;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(184, 214, 46, 0.4);
  background: rgba(5, 6, 3, 0.72);
  color: var(--believe-green, #b8d62e);
  font: 700 0.58rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: color 150ms ease, border-color 150ms ease;
}

.cert-chip:hover,
.cert-chip:focus-visible {
  color: var(--believe-bright, #d4f24b);
  border-color: rgba(212, 242, 75, 0.85);
  outline: none;
}

.cert-chip[hidden] { display: none; }

@media (max-width: 640px) {
  /* Ride above the relocated .tx-chip (transmissions.css moves it to 4.9rem
     to clear the HUD peek bar) -- the slot the broadcast chip vacated. */
  .cert-chip { bottom: calc(7.05rem + env(safe-area-inset-bottom)); }
}

/* ---- the /certificate page shell ---- */

/* base.css locks body overflow for the 3D page; this page is a document. */
body.certpage {
  overflow: auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* Faint green breath rising from below the fold + scanlines -- the
     fallback poster's atmosphere without its imagery. */
  background:
    radial-gradient(ellipse 120% 55% at 50% 108%, rgba(184, 214, 46, 0.13), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 5px),
    #050603;
}

.cp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
}

.cp__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(680px, 94vw);
  padding: 2.2rem 1.8rem 1.2rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: color-mix(in srgb, #050603 90%, var(--believe-green, #b8d62e));
  box-shadow: 0 0 36px rgba(184, 214, 46, 0.14), inset 0 0 26px rgba(184, 214, 46, 0.05);
}

.cp__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  animation: cpCornerDraw 340ms ease-out;
}

@keyframes cpCornerDraw {
  from { width: 0; height: 0; }
}

.cp__corner--tl { top: -1px; left: -1px; border-top: 1px solid var(--believe-green, #b8d62e); border-left: 1px solid var(--believe-green, #b8d62e); }
.cp__corner--tr { top: -1px; right: -1px; border-top: 1px solid var(--believe-green, #b8d62e); border-right: 1px solid var(--believe-green, #b8d62e); }
.cp__corner--bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--believe-green, #b8d62e); border-left: 1px solid var(--believe-green, #b8d62e); }
.cp__corner--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--believe-green, #b8d62e); border-right: 1px solid var(--believe-green, #b8d62e); }

.cp__back {
  align-self: flex-start;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: var(--believe-grey, #8a907c);
  text-decoration: none;
  transition: color 120ms ease;
}

.cp__back:hover,
.cp__back:focus-visible {
  color: var(--believe-green, #b8d62e);
  outline: none;
}

.cp__title {
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--believe-bright, #d4f24b);
}

.cp__sub {
  font-size: 0.62rem;
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: var(--believe-grey, #8a907c);
}

.cp__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.4rem;
}

.cp__label {
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--believe-green, #b8d62e);
}

.cp__row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cp__input {
  flex: 1 1 260px;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 45%, transparent);
  background: rgba(0, 0, 0, 0.45);
  color: var(--believe-bright, #d4f24b);
  font: 400 0.72rem/1.2 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.04em;
}

.cp__input::placeholder {
  color: color-mix(in srgb, var(--believe-grey, #8a907c) 60%, transparent);
}

.cp__input:focus-visible {
  outline: 1px solid var(--believe-green, #b8d62e);
  outline-offset: 2px;
}

.cp__verify {
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: none;
  color: var(--believe-green, #b8d62e);
  font: 700 0.66rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.15em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms ease, background-color 120ms ease;
}

.cp__verify:hover,
.cp__verify:focus-visible {
  color: #050603;
  background: var(--believe-green, #b8d62e);
  outline: none;
}

.cp__verify:disabled {
  opacity: 0.55;
  cursor: wait;
}

.cp__status {
  min-height: 1.2em;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--believe-grey, #8a907c);
}

.cp__status.is-denied { color: #d6743c; }
.cp__status.is-good { color: var(--believe-bright, #d4f24b); }

.cp__result {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.3rem;
}

.cp__result[hidden] { display: none; }

.cp__preview {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 40%, transparent);
}

.cp__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cp__action {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--believe-green, #b8d62e);
  color: var(--believe-green, #b8d62e);
  font: 700 0.66rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.15em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms ease, background-color 120ms ease;
}

.cp__action:hover,
.cp__action:focus-visible {
  color: #050603;
  background: var(--believe-green, #b8d62e);
  outline: none;
}

.cp__footer {
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 35%, transparent);
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  color: var(--believe-grey, #8a907c);
}

/* ---- small screens (mobile pass 2026-08-08) ----
   The flex-wrap layout already reflows; this block fixes what reflow can't:
   iOS Safari zooms the whole page when a focused input's font-size is under
   16px (so the address field gets a true 16px there), VERIFY stretches to a
   full-width thumb row once it has wrapped under the input anyway, action
   buttons get real tap height, and the page padding honors notch/home-bar
   safe areas. */
@media (max-width: 640px) {
  .cp {
    padding: 1.25rem
      max(0.75rem, env(safe-area-inset-right))
      calc(1.25rem + env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
  }

  .cp__frame {
    padding: 1.7rem 1.15rem 1rem;
  }

  .cp__input {
    font-size: 16px; /* the iOS focus-zoom threshold -- not a style choice */
    letter-spacing: 0;
  }

  .cp__verify {
    flex: 1 1 auto;
    padding: 0.85rem 1.2rem;
  }

  .cp__action {
    padding: 0.85rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-chip, .cp__back, .cp__verify, .cp__action {
    transition: none !important;
  }
  .cp__corner { animation: none !important; }
}