/* static/css/login.css
   ===========================================================================
   THE SIGN-IN SCREEN.

   Loaded by accounts/login.html and by nothing else.

   ---- Why the classes are signIn* and not login* ----

   app.css already owns a .login* set, and templates/admin/login.html still uses
   it. Two of those names collided with the ones this page first used, and both
   collisions were invisible in the markup and fatal in the layout:

     .loginBody   app.css makes it `display: grid; place-items: center`, for a
                  centred card. That turned this page's full-bleed <main> into a
                  centred grid ITEM, which shrink-wraps to its content: the page
                  drew as a narrow column with white either side.
     .loginBrand  app.css makes it `display: flex`, it is the brand ROW inside
                  that card, not a panel, so the photograph column became a flex
                  container and collapsed.

   Overriding both would have worked and would have left two names meaning two
   different things depending on which stylesheet won. Renaming is the fix that
   holds: signIn* is this page's alone, app.css is untouched, and the admin login
   keeps everything it had.

   ---- The photograph is vendored, not fetched ----

   static/images/heroes/valletta-fort-st-elmo-aerial.jpg. Nothing is downloaded and
   nothing is loaded from a CDN; the path is written with a relative ../ from this
   file rather than through {% static %}, because a stylesheet cannot run template
   tags: the browser resolves it against this file's own URL, which is
   /static/css/.

   The panel keeps a navy background-color underneath, so if the file is ever
   missing the page shows a plain deep-navy column rather than a broken frame.
   =========================================================================== */

.signInBody {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background: #fff;
}

/* Two panels. The photograph takes the larger share because it is the thing that
   makes the screen feel like Malta rather than like a form; the form column is
   fixed-ish so the fields never stretch to an unreadable width on a wide monitor. */
.signInSplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  min-height: 100vh;
}

/* ---- The photograph ---- */
.signInHero { position: relative; overflow: hidden; background: #0B1B33; }
.signInHero__figure {
  position: absolute; inset: 0;
  /* ---- The file this expects ----
     static/images/heroes/grand-harbour-boats.jpg

     Vendored (CLAUDE.md: no CDNs) and used by this page alone, which is why it is
     a login-* file rather than one of the shared briefing heroes beside it. The
     two-layer fallback that stood here while the file was missing is gone: a
     fallback whose only job was to cover an absent asset is dead weight once the
     asset exists, and it would have quietly hidden the day someone renamed this
     one. Navy still sits underneath. */
  background-image: url("../images/heroes/grand-harbour-boats.jpg");
  /* 50% 38%, not centre. The panel is a TALL column, so `cover` crops the sides
     and shows a vertical slice of a landscape photograph. Centred, that slice puts
     the fort's lower ramparts and open sea in frame; lifting the focal point keeps
     the fortifications and the city skyline in it, which is the half of the picture
     worth showing. */
  background-position: 50% 38%;
  background-size: cover;
  background-repeat: no-repeat;
  /* And navy under both, so a panel with no photograph at all is still a designed
     surface rather than a broken frame. */
  background-color: #0B1B33;
}
/* The scrim. Weighted to the BOTTOM, where the wordmark sits, so the sky and the
   floodlit bastions keep their contrast while the type below stays legible: a
   flat overlay across the whole frame would have dulled the picture to protect
   two lines of text. */
.signInHero__figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(11, 27, 51, .28) 0%,
              rgba(11, 27, 51, .14) 32%,
              rgba(11, 27, 51, .62) 68%,
              rgba(11, 27, 51, .88) 100%);
}
.signInHero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 100%; padding: 40px; text-align: center;
}
.signInHero__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1; color: #fff;
  /* A soft shadow rather than a heavier scrim: it buys the type its contrast
     locally, over whatever part of the photograph happens to sit behind it. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.signInHero__sub {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.4vw, 18px); font-weight: 700;
  letter-spacing: .04em; color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

/* ---- The form ---- */
.signInForm { display: grid; place-items: center; padding: 40px 34px; background: #fff; }
.signInForm__inner { width: 100%; max-width: 340px; }
.signInForm__title {
  margin: 0; font-family: var(--font-head);
  font-size: 30px; color: var(--text, #0B0C2A);
}
.signInForm__sub {
  margin: 6px 0 26px;
  font-size: 13px; font-weight: 650; color: var(--navy2, #2B35FF);
}

.signInAlert {
  margin-bottom: 18px; padding: 11px 13px;
  border: 1px solid #F1C9C9; border-radius: 9px;
  background: #FEF3F3; color: #A11B1B;
  font-size: 13px; line-height: 1.45;
}

.signInFields { display: grid; gap: 16px; }
.signInField { display: grid; gap: 6px; }
.signInField__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.signInField__label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--navy2, #2B35FF);
}
.signInField__aside {
  font-size: 11.5px; font-weight: 650; color: var(--navy2, #2B35FF);
  cursor: help;
}

/* The field is the BOX; the input inside it is borderless. That is what lets the
   icon and the reveal button sit inside one continuous control rather than beside
   a bordered rectangle. */
.signInField__box {
  display: flex; align-items: center; gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--line, #E4E6EF); border-radius: 9px;
  background: #F7F8FB;
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.signInField__box:focus-within {
  border-color: var(--navy2, #2B35FF);
  background: #fff;
  box-shadow: 0 0 0 3px var(--blue-light, #EEF0FF);
}
.signInField__icon { display: grid; place-items: center; color: #98A0B5; flex: none; }
.signInField__input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 14px; color: var(--text, #0B0C2A);
}
.signInField__input::placeholder { color: #A8AEC0; }

/* ---- Autofill ----
   The banded look this fixes: Chrome and Safari paint their OWN background on an
   autofilled input (a light blue, #E8F0FE), and it covers only the <input>: not
   the icon beside it and not the reveal button, so a saved password drew the
   field in three colours.

   It cannot be undone with `background-color`: the UA rule wins. An inset
   box-shadow large enough to fill the box is the standard way round it, because
   the shadow paints over the UA background. -webkit-text-fill-color is needed for
   the same reason, since `color` is overridden too.

   The absurd transition delay is the second half of the trick: WebKit re-applies
   the autofill background on interaction, and a background-color transition long
   enough never to arrive keeps it from flashing back.

   Two states, because the box turns white on focus and the fill has to follow it:
   otherwise clicking into a saved field turns it grey inside a white box. */
.signInField__input:-webkit-autofill,
.signInField__input:-webkit-autofill:hover,
.signInField__input:-webkit-autofill:focus,
.signInField__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px #F7F8FB inset;
  box-shadow: 0 0 0 100px #F7F8FB inset;
  -webkit-text-fill-color: var(--text, #0B0C2A);
  caret-color: var(--text, #0B0C2A);
  transition: background-color 600000s 0s;
}
.signInField__box:focus-within .signInField__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #fff inset;
  box-shadow: 0 0 0 100px #fff inset;
}
/* Firefox, which implements the standard pseudo-class and does honour a
   background. Harmless where :-webkit-autofill already did the work. */
.signInField__input:autofill { background-color: transparent; }

.signInField__reveal {
  flex: none; display: grid; place-items: center;
  padding: 4px; border: 0; border-radius: 6px;
  background: none; color: #98A0B5; cursor: pointer;
}
.signInField__reveal:hover { color: var(--navy2, #2B35FF); }
.signInField__reveal--on { color: var(--navy2, #2B35FF); }
.signInField__reveal:focus-visible { outline: 2px solid var(--navy2, #2B35FF); outline-offset: 1px; }

.signInSubmit {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 6px; padding: 12px 18px;
  border: 0; border-radius: 9px;
  background: var(--navy2, #2B35FF); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .13s ease;
}
.signInSubmit:hover { background: #1F27CC; }
.signInSubmit:focus-visible { outline: 2px solid var(--navy2, #2B35FF); outline-offset: 3px; }

/* ---- The foot ----
   The honesty label, then the supplier's mark. In that order on purpose: what the
   data IS matters more to someone signing in than who built the thing. */
.signInFoot {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line, #E4E6EF);
  text-align: center;
}
.signInFoot__note { margin: 0; font-size: 12px; font-style: italic; color: var(--muted, #6B7280); }
.signInFoot__by { margin: 14px 0 0; }
.signInFoot__mark { height: 24px; width: auto; opacity: .55; }

/* ---- Narrow screens ----
   The photograph becomes a BAND above the form rather than a column beside it, and
   keeps enough height to still read as Valletta. Below that it goes entirely: on a
   short phone in landscape a decorative band would push the password field off the
   screen, and signing in is the only thing this page is for. */
@media (max-width: 860px) {
  .signInSplit { grid-template-columns: minmax(0, 1fr); }
  .signInHero { min-height: 210px; }
  .signInHero__inner { padding: 26px; }
  .signInForm { padding: 30px 22px 40px; align-items: start; }
}
@media (max-height: 460px) and (max-width: 860px) {
  .signInHero { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .signInField__box, .signInSubmit { transition: none; }
}