/*
The screen: the cover (OURS, `LoginCover.tsx`) beside the form above 960 px and
above it below. The form's side keeps what it always had: the card centred on
`--bg`, the footer under it.
*/
.screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  background: var(--bg);
}
@media (max-width: 960px) {
  .screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
}
.page {
  min-width: 0;
  display: grid;
  place-items: center;
  /* `align-content` as well as `place-items`: with two children (the card and
     the footer), the rows split the height and each ends up centred in ITS half,
     which left 258 px between them. This way the group is centred and the space
     is set by the `gap`. */
  align-content: center;
  gap: var(--s-10);
  background: var(--bg);
  padding: var(--s-11);
}
.card {
  composes: panel from '../ui/Panel.module.css';
  width: 420px;
  max-width: 100%;
  padding: var(--s-11) var(--s-11);
}
/*
The mark is now an `<h1>`, so what the browser gives it for being one has to be
taken back off: an `h1` brings its own size and margins, and without this the
screen grew all at once. The look does not change; the element does, which is
what was missing: it was the only screen in the console with no heading at all.
*/
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  margin: 0 0 var(--s-11);
  font-size: inherit;
  font-weight: inherit;
}
/* Technitium's logo, not an initial of ours. See `app/Shell.module.css`. */
.mark { width: 28px; height: 28px; flex: none; }
.name { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: var(--t-5); }
.form { display: flex; flex-direction: column; gap: var(--s-9); }
.sso { margin-top: var(--s-10); padding-top: var(--s-10); border-top: 1px solid var(--line); }
.ssoLink {
  display: flex; align-items: center; justify-content: center; gap: var(--s-5);
  font-size: var(--t-4); color: var(--mute); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-5);
}
/* "Forgot Password?" is a bare link, not a button with a box: in upstream it
   sits loose above the SSO block (index.html:119). */
.link {
  display: block; width: 100%; text-align: center;
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--t-4); color: var(--mute); cursor: pointer;
}
.link:hover { color: var(--acc-ink); }
.orLogin { margin: var(--s-8) 0 var(--s-7); text-align: center; font-size: var(--t-3); color: var(--faint); }

/* The footer, under the card and centred: it belongs to the page, not the form. */
.footer { font-size: var(--t-3); line-height: 2; text-align: center; }

/* Stacked under the cover, the card goes to the top instead of the middle: the
   cover already took the top of the screen, and centring would push the form
   further down on a phone. */
@media (max-width: 960px) {
  .page { align-content: start; padding: var(--s-11) var(--s-10); }
}