/*
    THE SIGN-IN SHELL'S OWN STYLESHEET.

    One thing one component needs and nothing else does: the split layout Components/Pages/Account/
    Shared/AuthShell.razor draws a sign-in, register, reset or confirmation screen on. Product case
    on the left, the form column on the right.

    IT USED TO CARRY A SECOND VOCABULARY. The scaffolded Identity screens were written in Bootstrap
    class names - .form-control, .btn, .row, .nav-link, .alert - and about two hundred lines here
    dragged those onto this product's surfaces. That is why the file was asked for by route rather
    than linked with the other component stylesheets: names that generic, in front of every page in
    the product, are a collision waiting for the next component that wants to call something a row.
    The screens are written in the product's own vocabulary now, so the reconciliation is gone, the
    route test with it, and this is an ordinary component stylesheet linked once in App.razor.
    AccountVocabularyGuardTests is what keeps the second vocabulary from growing back.

    THE SPLIT IS TWO EQUAL COLUMNS and stacks below 900px. Recovery codes, an authenticator secret
    and a QR do not fit a 380px column, which is what --wide is for.

    WHAT IT DOES NOT OWN. .sv-points is the arrow-led list the landing page uses too, .sv-account and
    .sv-subnav are the signed-in account nav and belong to the application shell, and the toast in
    the corner is status-message.css.
*/

.sv-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.sv-auth__aside {
  background: var(--sv-bg-raised);
  border-right: 1px solid var(--sv-border-subtle);
  padding: var(--sv-space-7) var(--sv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-5);
  justify-content: center;
}

.sv-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-7) var(--sv-space-5);
}

/* THE FORM COLUMN IS THE SCREEN'S RHYTHM, and it states it once. Everything a sign-in, register,
   reset or confirmation page puts here is a block in a column - a status alert, a form, a row of
   alternatives, the way back - so no page states a gap of its own, and one that renders only
   sometimes takes its gap with it rather than leaving the block above it with a margin against
   nothing. */
.sv-auth__form {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-5);
}

/* The line under the heading belongs to the heading, not to the body below it, which is why the two
   are one block rather than the column's first two children. With no line the column's own gap is
   what the screen keeps - the same spacing the shell used to buy with an empty div of a stated
   height, so that a page with a subtitle and a page without began at the same pixel. */
.sv-auth__head {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
}

/* Both columns state their gaps, so a paragraph in either carries none of its own. */
.sv-auth__form > p,
.sv-auth__head > p {
  margin: 0;
}

/* Recovery codes, an authenticator secret and a QR do not fit a 380 px column, and the answer is a
   wider column rather than a page that opts out of the shell. */
.sv-auth__form--wide {
  max-width: 560px;
}

/* THE SPLIT STACKS BELOW 900px, and the rule lives here rather than in a shared responsive block:
   a breakpoint about this layout that this layout's own stylesheet does not carry is a rule nobody
   reading it will find. */
@media (max-width: 900px) {
  .sv-auth {
    grid-template-columns: 1fr;
  }

  .sv-auth__aside {
    border-right: 0;
    border-bottom: 1px solid var(--sv-border-subtle);
  }
}