/* Auth-screen card layout (login, no-reports). Extracted from auth_base.html's
   inline <style>. Brand tokens/fonts/reset come from _brand_head.html. */

  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
  }
  .card {
    width: 100%;
    max-width: 25rem;
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 2.5rem 2.25rem;
  }
  .wordmark {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding-bottom: 1.75rem; margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .wordmark .lumas { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.02em; }
  .wordmark .sub {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-soft);
  }
  h1 {
    font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
    line-height: 1.2; margin-bottom: 0.5rem;
  }
  .lede { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.75rem; }
  .lede strong { color: var(--ink); font-weight: 500; }
  label {
    display: block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 0.5rem;
  }
  input[type="email"], input[type="text"] {
    width: 100%; padding: 0.7rem 0.85rem;
    background: var(--bone-field); border: 1px solid var(--rule);
    color: var(--ink); outline: none;
  }
  input:focus { border-color: var(--ink); }
  input#code {
    letter-spacing: 0.5em; text-align: center; font-size: 1.4rem; padding-left: 0.85rem;
  }
  button.primary {
    width: 100%; margin-top: 1.5rem; padding: 0.75rem;
    background: var(--ink); color: var(--paper);
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 500;
  }
  button.primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
  .error {
    margin-bottom: 1.25rem; padding: 0.7rem 0.85rem;
    border-left: 3px solid var(--neg); background: color-mix(in srgb, var(--neg) 8%, var(--paper));
    color: var(--neg); font-size: 0.85rem; line-height: 1.4;
  }
  .foot { margin-top: 1.75rem; font-size: 0.8rem; color: var(--ink-faint); }
  .foot a { color: var(--ink-soft); }
  .ms-button {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    width: 100%; padding: 0.75rem;
    border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 500;
  }
  .ms-button:hover { background: var(--bone-field); }
  .divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 1.5rem 0; color: var(--ink-faint);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  }
  .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
  .divider span { flex: none; }