/* ============================================================
   File:    wwwroot/css/gate.css
   Created: 2026-07-06  |  Author: migration
   Purpose: Standalone stylesheet for GET /gate (the test-site PIN
            gate minimal-API endpoint, src/Web/Shared/WebAuthExtensions.cs).
            Ports the visuals previously in
            Styles/components/_gate.scss (removed alongside the
            retired Gate.razor). Deliberately client-neutral — the
            gate page must not reveal which client's site it is.
   Client:  Shared (all clients)
   Notes:   Documented SCSS-only exception ("Styling note" in
            docs/superpowers/specs/2026-07-06-unified-test-site-gate-design.md,
            Design Revision 2): /gate is served via Results.Content,
            outside the Blazor/SCSS pipeline, so main.{client}.css is
            never loaded on this page — values below are hardcoded
            rather than referencing the shared CSS custom properties.
            The page also has no other stylesheet to supply
            Styles/base/_reset.scss's box-sizing/margin reset, so a
            minimal equivalent is included below — without it, the
            width:100% input's own padding/border pushes past its
            container at narrow viewports (causes horizontal overflow
            at 320px).
            Mobile-first; min-width breakpoints only if ever added.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input,
button {
  font: inherit;
}

.gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 1rem;
  background: #f5f5f7;
}

.gate__box {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.gate__label {
  margin: 0 0 1rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.gate__error {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #dc2626;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  text-align: left;
}

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.gate__input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background: #ffffff;
  color: #111827;
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.25em;
}

.gate__input:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.gate__button {
  width: 100%;
  padding: 0.625rem;
  border: none;
  border-radius: 0.25rem;
  background: #2563eb;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.gate__button:hover {
  filter: brightness(0.95);
}

.gate__button:active {
  filter: brightness(0.9);
}

/* Release-folder display (Design Revision 2, Decision C) — muted so it
   reads as incidental deployment metadata, not a focal element. */
.gate__release {
  margin: 1rem 0 0;
  color: #9ca3af;
  font-size: 0.75rem;
}