/* ============================================================
   LOGIN — white card, navy frame, gold button.
   Loaded only by _head_plain.php, so it touches the sign-in
   and register pages and nothing else. The rest of the app
   keeps whatever theme is set in _head.php.
   ============================================================ */

:root{
  --navy:#0B2545;
  --navy-deep:#07182E;
  --navy-soft:#14345C;
  --gold:#C8A951;
  --gold-bright:#DCC072;
  --gold-dim:#8F7530;
  --paper:#FFFFFF;
  --paper-2:#F4F6F9;
  --navy-ink:#0B2545;
  --navy-ink-2:#43587A;
  --navy-ink-3:#7C8CA6;
}

/* scattered dots (different sizes, uneven spacing on purpose - not
   a repeating pattern) across the navy page background itself, not
   inside the white card. */
body{
  background:
    radial-gradient(circle at 6%  9%,  rgba(200,169,81,.5) 3px, transparent 3.5px),
    radial-gradient(circle at 15% 32%, rgba(200,169,81,.3) 2px, transparent 2.5px),
    radial-gradient(circle at 9%  58%, rgba(200,169,81,.4) 4px, transparent 4.5px),
    radial-gradient(circle at 4%  83%, rgba(200,169,81,.28) 2px, transparent 2.5px),
    radial-gradient(circle at 22% 14%, rgba(20,52,92,.9) 5px, transparent 5.5px),
    radial-gradient(circle at 27% 68%, rgba(200,169,81,.35) 3px, transparent 3.5px),
    radial-gradient(circle at 33% 92%, rgba(200,169,81,.4) 5px, transparent 5.5px),
    radial-gradient(circle at 12% 5%,  rgba(200,169,81,.22) 2px, transparent 2.5px),
    radial-gradient(circle at 91% 12%, rgba(200,169,81,.45) 4px, transparent 4.5px),
    radial-gradient(circle at 85% 38%, rgba(200,169,81,.26) 2px, transparent 2.5px),
    radial-gradient(circle at 94% 60%, rgba(200,169,81,.38) 5px, transparent 5.5px),
    radial-gradient(circle at 78% 85%, rgba(200,169,81,.3) 3px, transparent 3.5px),
    radial-gradient(circle at 96% 90%, rgba(200,169,81,.22) 2px, transparent 2.5px),
    radial-gradient(circle at 88% 6%,  rgba(20,52,92,.9) 4px, transparent 4.5px),
    radial-gradient(circle at 55% 4%,  rgba(200,169,81,.28) 2px, transparent 2.5px),
    radial-gradient(circle at 45% 95%, rgba(200,169,81,.3) 3px, transparent 3.5px),
    radial-gradient(circle at 68% 96%, rgba(200,169,81,.22) 2px, transparent 2.5px),
    radial-gradient(1100px 620px at 50% -8%, var(--navy-soft) 0%, transparent 62%),
    var(--navy-deep);
  color:var(--navy-ink);
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* ---- the frame ---- */
.gate{
  width:100%;
  max-width:430px;
  padding:64px 20px 72px;
}

/* the logo is allowed to be wider than the card below it - centred
   independently of .gate's own (narrower) width, rather than
   stretching the sign-in card to match. */
.gate .brand{
  display:block;
  text-align:center;
  margin-bottom:6px;
  width:min(520px, 90vw);
  margin-left:50%;
  transform:translateX(-50%);
}
.gate .brand img{
  display:block;
  margin:0 auto;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:220px;            /* a tall uploaded picture fits too */
  object-fit:contain;
  border-radius:10px;
}
/* a gold rule under the logo, the width of a signature */
.gate .brand::after{
  content:"";
  display:block;
  width:54px;
  height:2px;
  margin:16px auto 0;
  background:var(--gold);
}

.gate > p.sub{
  text-align:center;
  color:#AFC0D8;
  font-size:14.5px;
  margin:14px 0 26px;
}

/* ---- the card: Option 02, Rounded Soft - a wide gold frame
   instead of the old hairline + navy cap, big soft corners. Plain
   white body - the dot texture lives on the page background
   instead (see body{} above), not inside the dialog. ---- */
.gate .card{
  background:var(--paper);
  border:3px solid var(--gold);
  border-radius:22px;
  box-shadow:0 22px 60px -28px rgba(0,0,0,.85), 0 0 0 5px rgba(200,169,81,.14);
  overflow:hidden;
  margin-bottom:16px;
}
.gate .card .body{padding:28px 26px 22px}
.gate .form{grid-template-columns:1fr;gap:18px}

.gate label{
  color:var(--navy);
  font:700 10.5px/1 var(--f-mono);
  letter-spacing:.13em;
}
.gate input[type=text],
.gate input[type=password]{
  background:var(--paper-2);
  border:1px solid #D3DBE6;
  color:var(--navy-ink);
  padding:11px 12px;
  font-size:15px;
  border-radius:4px;
}
.gate input[type=text]:focus,
.gate input[type=password]:focus{
  border-color:var(--navy);
  background:var(--paper);
  box-shadow:0 0 0 3px rgba(11,37,69,.12);
}
.gate .hint{color:var(--navy-ink-3)}

/* ---- icon inside username / password fields ---- */
.gate .field-ico{position:relative}
.gate .field-ico .ico{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  color:var(--gold-dim);
  pointer-events:none;
}
.gate .field-ico input{padding-left:38px}
.gate .field-ico input:focus ~ .ico,
.gate .field-ico:focus-within .ico{color:var(--gold)}

/* ---- the gold button ---- */
.gate .actions{
  background:var(--paper);
  border-top:1px solid #E4E9F0;
  padding:0 26px 26px;
}
.gate .btn{
  width:100%;
  padding:13px 18px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--navy-deep);
  border:1px solid var(--gold-dim);
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.03em;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s ease, transform .06s ease;
}
.gate .btn svg{width:17px;height:17px;flex:none}
.gate .btn:hover{background:linear-gradient(180deg, var(--gold-bright), var(--gold-bright));filter:none}
.gate .btn:active{transform:translateY(1px)}
.gate .btn.ghost{
  background:transparent;
  color:var(--navy);
  border-color:var(--gold);
  font-weight:600;
  margin-top:10px;
  border-radius:999px;
}
.gate .btn.ghost:hover{background:var(--paper-2)}

/* ---- messages, on the dark ground ---- */
.gate .err{
  background:#3A1D1D;
  border:1px solid #8C4A3A;
  color:#F3C9BC;
  border-radius:5px;
}
.gate .flash{
  background:#12331F;
  border:1px solid #2F6B45;
  color:#B6E3C6;
  border-radius:5px;
}

.gate .foot{
  color:#8FA3BE;
  font-size:13px;
  text-align:center;
  margin-top:20px;
  line-height:1.8;
}
.gate .foot a{color:var(--gold);font-weight:600}
.gate .foot a:hover{color:var(--gold-bright)}

.gate :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* every field the same width - the password box was inheriting
   the browser default and coming out narrower than the rest */
.gate input[type=text],
.gate input[type=password]{width:100%}