/* gate.css — lock screen. Visible by default (fail closed): the gate stays up
 * even if gate.js never loads. Unlock removes the element from the DOM.
 * All colors come from theme.css tokens, so the gate follows the light/dark
 * choice. The .gate--light / .gate--dark modifiers are kept so existing page
 * markup does not change; neither changes color now. */
.gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.gate-card {
  width: 100%; max-width: 340px; border-radius: 14px; padding: 28px 26px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}
.gate-brand { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); }
.gate-card h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 22px; font-weight: 400; margin: 10px 0 4px; letter-spacing: 0; color: var(--text);
}
.gate-hint { font-size: 13px; line-height: 1.5; margin: 0 0 18px; color: var(--muted); }
.gate-card label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; color: var(--muted); }
.gate-card input {
  width: 100%; border-radius: 8px; padding: 9px 11px; font-size: 15px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
}
.gate-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.gate-card button {
  width: 100%; margin-top: 12px; border: 0; border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
.gate-card button:active { transform: scale(.985); }
.gate-err { font-size: 12.5px; min-height: 16px; margin-top: 10px; color: var(--err); }