/* ============================================================================ * auth-gate.css — form gating for the ASCI API doc site. * * Every data-entry form region on the module pages is marked * class="requires-key". Forms stay HIDDEN by default (so they never flash * before validation, and never appear at all if JavaScript is disabled) and * are revealed only once auth-gate.js has confirmed a valid tenant ApiKey by * adding the `gate-unlocked` class to . * * Documentation regions ("How it works", "Endpoints") are NOT marked and stay * visible at all times. * ==========================================================================*/ /* Default: gated form regions are hidden. */ .requires-key { display: none !important; } /* Unlocked: a valid key was supplied → reveal the gated regions. The marked * elements are always plain block-level wrappers (cat-header divs + form *
s), so forcing `block` is safe; inner grids/repeaters keep their * own display. */ html.gate-unlocked .requires-key { display: block !important; } /* ---- Locked banner (injected by auth-gate.js where the form would be) ---- */ .gate-banner { border: 1px solid #e8d27a; background: #fff8e1; color: #5b4a14; border-radius: 6px; padding: 16px 18px; margin: 16px 0; font-size: 14px; line-height: 1.5; } .gate-banner.error { border-color: #e0a3a3; background: #fdecec; color: #7a2222; } .gate-banner .gate-banner-title { font-weight: 700; display: block; margin-bottom: 4px; } html.gate-unlocked .gate-banner { display: none; } /* ---- Inline controls added to the Setup/Credentials block ---- */ .gate-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .gate-status { font-size: 13px; font-weight: 600; } .gate-status.ok { color: #1f7a33; } .gate-status.bad { color: #b3261e; } .gate-status.muted { color: #5a6675; font-weight: 500; } .gate-btn { font: inherit; cursor: pointer; border-radius: 4px; padding: 6px 12px; border: 1px solid #1d4e89; background: #1d4e89; color: #fff; } .gate-btn:hover { background: #163d6c; border-color: #163d6c; } .gate-btn.secondary { background: #fff; color: #1d4e89; } .gate-btn.secondary:hover { background: #eef3fa; } .gate-btn:disabled { opacity: .55; cursor: default; }