/* The site-wide sign-in gate. Reads three tokens from whichever page mounts it, so
   it sits correctly on both the dark archive and the light document pages. */

.fv-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--gate-bg, #0F1A17);
  color: var(--gate-fg, #F3EDE0);
}
.fv-gate[hidden] { display: none; }

/* Hide page content while the gate is up, so nothing flashes before the check
   resolves. Belt and braces: the rules deny the data anyway. */
body.fv-gated > *:not(.fv-gate) { visibility: hidden; }

.fv-gate-card { width: 100%; max-width: 380px; text-align: center; }

.fv-gate-mark {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 10.5px; letter-spacing: .2em; opacity: .55; margin-bottom: 26px;
}
.fv-gate-msg {
  font-family: var(--disp, Georgia, serif);
  font-size: 1.35rem; line-height: 1.3; margin-bottom: 24px; text-wrap: balance;
}
.fv-gate-msg.err { color: var(--gate-accent, #E08A70); font-size: 1.05rem; }
.fv-gate-or {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px; letter-spacing: .1em; opacity: .5; margin: 20px 0 12px;
}

.fv-btn {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 13px; padding: 12px 22px; border-radius: 100px; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit;
  margin: 4px;
}
/* Filled: the ground and the text swap, so the label stays readable. */
.fv-btn.primary {
  background: var(--gate-fg, #F3EDE0);
  color: var(--gate-bg, #0F1A17);
  border-color: var(--gate-fg, #F3EDE0);
}
.fv-btn.ghost { opacity: .6; font-size: 11.5px; padding: 8px 16px; }
.fv-btn[hidden] { display: none; }

.fv-gate input {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 13px; padding: 11px 16px; width: 100%; text-align: center;
  border-radius: 100px; margin-bottom: 10px;
  border: 1px solid currentColor; background: transparent; color: inherit;
}
.fv-gate input::placeholder { color: currentColor; opacity: .4; }

.fv-gate :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }