/* Page styles for base/templates/base/login.html.
   Moved out of the template unchanged; linked from the same point in the
   page, so these rules still resolve in exactly the order they used to. */

/* --- the form's own layout ------------------------------------------------
   Was Tailwind: `space-y-4` on the form and `block text-sm font-medium` on
   each label. Those particular utilities carried no colour and were not the
   problem, but leaving them meant the page's spacing lived in the markup while
   its colour lived here, and the next person to adjust one would not find the
   other. */
.login-page { padding-top: 0.5rem; }

/* The wordmark in the card's head band. Sized by HEIGHT with width auto, like
   the navbar's copy of it: the mark is ~3.2:1, so letting width lead is what
   makes it collide with the 640px card's padding on a narrow screen. `block`
   plus `margin: auto` because .header-bar centres with `text-align`, which an
   inline-block image obeys only until it is the sole thing on the line and
   picks up a descender's worth of space under it.

   Bigger than the navbar's 46px: this is the front door and the card has the
   room, whereas the bar is a fixed 85px that the rest of the site measures
   against. The file is stored at 92px tall, so both draw it at or under 1:1. */
.login-wordmark { line-height: 0; }
.login-wordmark img {
  display: block;
  margin: 0 auto;
  height: 58px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 640px) {
  .login-wordmark img { height: 44px; }
}
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-field label { font-size: 0.875rem; font-weight: 600; }

/* Django renders the auth inputs without width classes — make them fill the
   card and stay comfortable on phones. */
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
}
.password-field-container { width: 100%; }
.password-field-container input { flex: 1 1 auto; min-width: 0; }
.password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 1rem;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.password-toggle:hover { color: var(--ink-2); background-color: var(--surface-2); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dark-mode .password-toggle { color: var(--ink-3); }
.dark-mode .password-toggle:hover { color: var(--ink); background-color: var(--surface-2); }
@media (max-width: 640px) {
  .login-container { margin-top: 90px; padding: 20px; }
}

/* A submit control that reads as a text link. The guest sign-in must be a
   POST (a GET login is prefetchable and cross-site forgeable), which forces a
   <button>; this makes that requirement invisible, so it can sit inline with
   the "Forgot your password?" / "Create one" links instead of becoming a
   block-level button competing with the real Login action.
   `font: inherit` is the load-bearing part — a bare <button> otherwise picks
   up the browser's own control font and size and looks nothing like the
   anchors beside it. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--link);
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
/* The dark-mode override here was a hard #93c5fd. --link is the same idea from
   the token layer, and it flips itself, so one declaration serves both. */

/* A group's own mark on its branded sign-in page (login.html, site_login_mark_url).
   Uploads come in every proportion, so it is boxed by height like the
   deployment's wordmark and capped in width so a wide banner cannot push the
   card open. */
.login-wordmark__group { height: 72px; max-width: 100%; object-fit: contain; }
@media (max-width: 480px) { .login-wordmark__group { height: 56px; } }