/* The access gate: the sign-in, waiting and refusal box assets/gate.js draws.
   Moved out of app.css on 4 Nov 2026 (AQ-852) so that pages which do not load
   app.css (Reports) can draw it too. Every page that loads gate.js loads this
   file; publish.sh fails the build when one does not. The variables are
   app.css's; reports.css maps them onto the Reports palette. */
/* A stylesheet in the <head> rather than a <style> built by gate.js, so the gate
   paints on first frame instead of flashing unstyled.

   The gate is OPAQUE, not translucent: var(--bg) and not a blur. A blur would
   imply there is something behind it to reveal, and there is not — the payload
   never reaches the browser until the relay has accepted the key. */
html[data-gated] body { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.gate-box {
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid var(--grid);
  border-radius: 14px; padding: 26px 26px 22px;
  box-shadow: 0 1px 0 var(--grid-soft), 0 24px 64px -32px rgba(0,0,0,.55);
}
.gate-mark {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; color: var(--text-dim); line-height: 1.05;
  display: flex; flex-direction: column; margin-bottom: 20px;
}
.gate-mark span {
  font-size: 17px; letter-spacing: .08em; color: var(--brand);
  text-transform: uppercase;
}
.gate-h {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  margin: 0 0 8px; color: var(--text); letter-spacing: -.01em;
}
.gate-p { font-family: var(--serif); font-size: 15px; line-height: 1.5;
          color: var(--text-dim); margin: 0 0 18px; }
.gate-f { display: flex; gap: 8px; }
.gate-f input {
  flex: 1; min-width: 0; padding: 10px 12px;
  font: 500 14px/1.2 var(--mono); letter-spacing: .04em;
  background: var(--field); border: 1px solid var(--grid);
  border-radius: 8px; color: var(--text);
}
/* A BORDER TINT IS NOT A FOCUS RING. Both gate fields swapped the outline
   for a 1px colour change, which a keyboard reader cannot find on the box and
   which failed the no-data state in CI on every push since the email field
   arrived (the key field only escaped because it is autofocused, so the walk
   started past it). The tint stays for pointer focus; keyboard focus gets
   the site's ring. */
.gate-f input:focus { outline: none; border-color: var(--brand-l); }
.gate-f input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gate-f .btn { min-height: 44px; white-space: nowrap; }
/* The second way in: a rule with the word "or" sitting on it, and a tighter
   lede above the email form. Two doors on one box — a key for an invited
   reader, an emailed link for a subscriber. */
.gate-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.gate-p--tight { margin: 0 0 10px; }
/* AQ-718: Google and Microsoft on the readers' sign-in modal, as on account.html */
.gate-idp { display: grid; gap: 8px; margin: 0 0 14px; }
.gate-idp a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px;
  border: 1px solid var(--grid); border-radius: 6px; color: inherit; text-decoration: none;
  font-size: 13px; font-weight: 600; }
.gate-idp a:hover { border-color: var(--brand-l); }
.gate-idp a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The connecting box a returning reader sees while the relay wakes: a bar
   that says the page is alive, a line that says why it is slow, and TRY
   AGAIN once waiting has stopped being reasonable. See the ladder in gate.js. */
.gate-wait .gate-h { margin-bottom: 14px; }
.gate-bar { height: 3px; border-radius: 2px; background: var(--grid); overflow: hidden; margin: 0 0 14px; }
.gate-bar i {
  display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--brand);
  animation: gate-slide 1.4s ease-in-out infinite;
}
@keyframes gate-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .gate-bar i { animation: none; width: 100%; opacity: .5; } }
.gate-msg--dim { color: var(--text-dim); }
.gate-cta { margin: 14px 0 2px; }
.gate-cta .btn { display: inline-block; width: 100%; text-align: center; }
.gate-cta[hidden] { display: none; }
.gate-msg { font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
            color: var(--down); margin: 12px 0 0; min-height: 1.2em; }
.gate-foot { font-family: var(--serif); font-size: 12.5px; line-height: 1.5;
             color: var(--faint); margin: 16px 0 0; }
.gate-foot a { color: var(--brand-l); text-decoration: none; border-bottom: 1px solid var(--grid); }
.gate-foot a:hover { border-bottom-color: var(--brand-l); }
@media (max-width: 460px) {
  .gate-box { padding: 20px 18px 18px; border-radius: 12px; }
  .gate-f { flex-direction: column; }
  .gate-f input { font-size: 16px; }   /* 16px or iOS zooms the page on focus */
}