/* Gate styles — shared by the hub and every demo page.
   Tokens are read with a fallback chain so the same file works on the hub
   (--wr-*) and on the ops-center console (--gf-*). */

html.locked { overflow: hidden; }
html.locked .wr-nav,
html.locked .wr-main,
html.locked .wr-foot,
html.locked .navbar,
html.locked .page { display: none; }

.wr-gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--wr-glow, var(--gf-panel-alt, #1c2025)) 0%, transparent 60%),
    var(--wr-bg, var(--gf-canvas, #0f1113));
  color: var(--wr-ink, var(--gf-text, #e9ebef));
  font-family: var(--wr-sans, var(--gf-sans, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif));
}

.wr-gate-card {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 28px 28px 22px;
  border: 1px solid var(--wr-line, var(--gf-border, #2a2f36));
  border-radius: 10px;
  background: var(--wr-panel, var(--gf-panel, #16191d));
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55);
  display: grid;
  gap: 10px;
}
.wr-gate-card.shake { animation: wr-gate-shake .32s ease-in-out 1; }
@keyframes wr-gate-shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .wr-gate-card.shake { animation: none; }
}

.wr-gate-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--wr-line, var(--gf-border, #2a2f36));
  color: var(--wr-accent, var(--gf-orange, #e2733c));
  background: var(--wr-panel-2, var(--gf-panel-alt, #1c2025));
}

.wr-gate-eyebrow {
  margin: 4px 0 0;
  font: 600 11px/1.4 var(--wr-mono, var(--gf-mono, ui-monospace, Menlo, Consolas, monospace));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wr-ink-3, var(--gf-text-3, rgba(233, 235, 239, .5)));
}

.wr-gate-h {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--wr-ink, var(--gf-text-strong, #e9ebef));
}

.wr-gate-p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-ink-2, var(--gf-text-2, rgba(233, 235, 239, .72)));
}

.wr-gate-field { display: grid; gap: 6px; margin-top: 8px; }
.wr-gate-field label {
  font: 600 11px/1.4 var(--wr-mono, var(--gf-mono, ui-monospace, Menlo, Consolas, monospace));
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wr-ink-3, var(--gf-text-3, rgba(233, 235, 239, .5)));
}
.wr-gate-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: 400 15px/1.3 var(--wr-sans, var(--gf-sans, -apple-system, "Segoe UI", Roboto, sans-serif));
  color: var(--wr-ink, var(--gf-text, #e9ebef));
  background: var(--wr-input-bg, var(--gf-code-bg, rgba(233, 235, 239, .07)));
  border: 1px solid var(--wr-line, var(--gf-border, #2a2f36));
  border-radius: 6px;
  min-height: 44px;
}
.wr-gate-field input:focus-visible {
  outline: 2px solid var(--wr-accent, var(--gf-orange, #e2733c));
  outline-offset: 1px;
}

.wr-gate-actions { display: flex; gap: 8px; margin-top: 4px; }
.wr-gate-btn {
  min-height: 44px;
  padding: 0 18px;
  font: 600 14px/1 var(--wr-sans, var(--gf-sans, -apple-system, "Segoe UI", Roboto, sans-serif));
  color: var(--wr-accent-ink, #fff);
  background: var(--wr-accent, var(--gf-orange, #e2733c));
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.wr-gate-btn:hover { filter: brightness(1.06); }
.wr-gate-btn[disabled] { opacity: .6; cursor: default; }

.wr-gate-err {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--wr-bad, var(--gf-red, #f2495c));
}

.wr-gate-note {
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--wr-line-2, var(--gf-border-quiet, rgba(233, 235, 239, .08)));
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--wr-ink-3, var(--gf-text-3, rgba(233, 235, 239, .5)));
}