/* ==========================================================================
   Sign-in page
   --------------------------------------------------------------------------
   The door. Everything else in this app is behind it, so it is the one page
   that must render when nothing else works: no bundle, no jQuery, no
   Bootstrap, no icon font, no JavaScript of any kind. Two stylesheets and the
   browser's own form handling are the whole dependency list, which is why this
   file is linked directly rather than pulled through a webpack entry — a build
   that breaks the cover bundle must not also lock everyone out.

   This is a CLOSED instance for one lab. Nobody arriving needs persuading, so
   there is no marketing here — a card, a wordmark, and the two ways in.

   Every colour, space, radius and font below is a token. Read tokens.css
   first; a literal value here re-creates exactly the coupling that file
   exists to remove.
   ========================================================================== */

/* No Bootstrap underneath any more, so the handful of resets it used to supply
   have to be stated. Scoped to this page only: the stylesheet is loaded on the
   signed-out landing page and nowhere else. */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--bg-canvas); }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  -webkit-font-smoothing: antialiased;
  /* iOS bumps the font size of text in "small" pages when the phone is turned
     to landscape, which would take the card's type off its scale. */
  -webkit-text-size-adjust: 100%;
}

.sn-page {
  min-height: 100vh;
  /* dvh, with vh above as the fallback: mobile browser chrome eats into the
     viewport, and 100vh centres the card against a taller box than the one the
     user can see — the card sits low and the Register button lands under the
     address bar. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
}

.sn-card {
  width: 100%;
  /* Narrower than --measure because nothing here is prose: it is a wordmark,
     two buttons and two fields, and a wider card only spreads them out. */
  max-width: 360px;
  padding: var(--space-9) var(--space-8) var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* ----------------------------- Wordmark ----------------------------- */

/* The same pairing the workspace top bar uses (lab mark + "Notes"), so the
   thing you sign in to is visibly the thing you signed in from. It is an <h1>:
   it is the only heading here, and a page whose sole landmark is a form needs
   one for anything navigating by structure. */
.sn-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-9);
}
/* THE MARK GETS A DARK GROUND, and the palette change is why it needs one now.
 * The logo is one blue (#36A0F3): 6.25:1 on the dark page, 2.30:1 on the light
 * parchment this page is painted with since the SSLab palette landed. It sat on
 * the bare page before and was legible only because that page used to be near
 * white-blue. The website has never relied on that — its navbar is black in both
 * themes and the mark lives there — so this is the same answer, not a new one.
 * --logo-ground (tokens.css) is that value and is deliberately not themed. */
.sn-brand-mark {
  height: 26px;
  width: auto;
  flex: 0 0 auto;
  background: var(--logo-ground);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}
.sn-brand-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

/* ----------------------------- Flash ----------------------------- */

/* req.flash carries two kinds: 'info' after a successful registration, 'error'
   after a rejected sign-in. Both land back on this page via a redirect, so
   they are the only feedback a failed login produces. */
.sn-flash {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.sn-flash-info {
  background: var(--accent-subtle-bg);
  border-color: var(--accent-border);
  color: var(--fg);
}
.sn-flash-error {
  background: var(--danger-subtle-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* ----------------------------- Buttons ----------------------------- */

/* Padding-driven rather than a fixed height, matching .hd-ws-btn in the
   workspace. A step up from the shell's --space-3/--text-base because this is
   a phone target as often as a pointer one, and it is the only control on the
   page. */
.sn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  /* Snug, not tight, so a 14px button and a 16px field come out the same height
     once both have --space-4 above and below. Stacked full-width controls that
     differ by 2px are the sort of thing you cannot un-see. */
  line-height: var(--leading-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sn-btn:hover { background: var(--bg-hover); }
.sn-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
}

/* GitLab is how the lab actually signs in; the email form below the divider is
   the fallback for accounts GitLab does not cover. Hence the accent fill here
   and an outline on the form's own button — the alternative, GitLab's brand
   orange, cannot carry white text at 4.5:1 and there is no second accent in
   this palette to spend on it. The tanuki silhouette does the recognising. */
.sn-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.sn-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.sn-btn-icon { flex: 0 0 auto; }

/* Registration is open but it is not what anyone is here to do. */
.sn-linkbtn {
  display: block;
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.sn-linkbtn:hover {
  color: var(--accent-fg);
  text-decoration: underline;
}
.sn-linkbtn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  color: var(--fg);
}

/* ----------------------------- Divider ----------------------------- */

.sn-divider {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-7) 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.sn-divider::before,
.sn-divider::after {
  content: '';
  flex: 1 1 auto;
  border-top: 1px solid var(--border-subtle);
}

/* ----------------------------- Form ----------------------------- */

.sn-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sn-field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--fg-secondary);
}
.sn-input {
  width: 100%;
  /* min-width:0 as well as width:100%: a flex item will not shrink below the
     input's default intrinsic width (~180px plus padding), so on a 320px phone
     the field pushes the card wider than the viewport and the page scrolls
     sideways. Width alone does not stop that. */
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  color: var(--fg);
  font-family: var(--font-ui);
  /* Deliberately larger than the rest of the card — see --text-field. */
  font-size: var(--text-field);
  line-height: var(--leading-tight);
}
.sn-input::placeholder { color: var(--fg-muted); }
.sn-input:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Phones. The card keeps its shape — 360px is already inside a 390px screen —
   but its inner padding comes down, because 24px of air either side of a 360px
   card is a seventh of the width, and narrower phones than this exist. */
@media (max-width: 400px) {
  .sn-page { padding: var(--space-6) var(--space-4); }
  .sn-card { padding: var(--space-8) var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .sn-btn { transition: none; }
}