/* `dvh` AFTER `vh`, AND BOTH ARE NEEDED. On a phone `100vh` is the height
     of the window with the browser's own bars HIDDEN -- the tallest it ever
     gets -- so a card centred in it sits lower than the middle of what the
     reader can actually see, and the page carries a scrollbar for a screen
     that holds one form. `dvh` is the height as it is right now. The `vh`
     line stays underneath as the fallback for a browser that does not know
     the newer unit; the second declaration simply wins where it is
     understood. */
  .lg-body { min-height: 100vh; min-height: 100dvh; position: relative; }
  .lg-wrap {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center;
    justify-content: center; padding: 1.5rem;
  }
  .lg-card {
    width: 100%; max-width: 23rem; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.9rem 1.75rem 1.5rem; display: flex; flex-direction: column;
    gap: 1rem; box-shadow: var(--shadow-2);
  }
  .lg-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: .2rem; }
  .lg-brand h1 { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
  .lg-brand p { margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
  /* The mark carries its own grey tile, so the slot behind it is empty. */
  .lg-mark {
    line-height: 1; width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
  }
  .lg-field { display: flex; flex-direction: column; gap: .3rem; }
  .lg-field span {
    font-size: var(--fs-2xs); color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .lg-field input { width: 100%; box-sizing: border-box; }
  .lg-field input:disabled { opacity: .5; cursor: not-allowed; }
  .lg-submit {
    font: inherit; font-weight: 700; cursor: pointer; margin-top: .4rem;
    padding: .7rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: var(--accent); color: var(--on-accent);
  }
  .lg-submit:hover { filter: brightness(1.08); }
  .lg-submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }
  .lg-error {
    margin: 0; padding: .65rem .8rem; border-radius: var(--radius-sm);
    background: var(--neg-soft); color: var(--neg);
    font-size: var(--fs-sm); border: 1px solid var(--neg-line);
  }
  .lg-foot { margin: .5rem 0 0; font-size: var(--fs-sm); line-height: 1.6;
    color: var(--muted); font-weight: 400; }
  /* THE WAY OUT OF THE PASSWORD BOX. Quiet -- it is not what somebody who
     came here to sign in is looking for -- but present, because somebody who
     came here by accident has nowhere else to go. */
  .lg-about { display: inline-flex; align-items: center; gap: .3rem;
    margin-top: .1rem; font-size: var(--fs-sm); color: var(--accent);
    text-decoration: none; }
  .lg-about:hover { text-decoration: underline; }