/* Standalone login page — a centered, on-brand panel. Only the public
 * login.html links this (alongside tokens + base + the card/button primitives).
 * The login form DOM is built by /js/login.js; the selectors below dress those
 * generated nodes (Bexio link, master-password row, dev form, error note). */

@layer components {
  .login-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    /* Soft dot-cyan wash rising from the top, fading into the white surface, with
       a faint periwinkle house-tint glowing up from the bottom-right for depth.
       Cyan stays the hero; the brand hue is a recessive accent (low-alpha mix). */
    background:
      radial-gradient(120% 100% at 88% 112%,
        color-mix(in srgb, var(--c-brand-periwinkle) 28%, transparent), transparent 60%),
      radial-gradient(140% 120% at 50% -10%, var(--c-accent-glow), transparent 55%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--c-accent) 7%, var(--c-bg)) 0%, var(--c-bg) 45%);
  }

  .login-shell {
    width: 100%;
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .login-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    /* Deeper elevation than --shadow-1 — the login card is the only thing
       floating on a bare page. Token in tokens/spacing.css. */
    box-shadow: var(--shadow-2);
    padding: var(--sp-6);
    text-align: center;
  }

  .login-title {
    margin: 0;
    line-height: 0;
  }

  .login-logo {
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto var(--sp-2);
    display: block;
  }

  .login-subtitle {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin: var(--sp-1) 0 0;
  }

  .login-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    text-align: left;
  }
  .login-options:empty { margin-top: 0; }

  /* Bexio SSO link + dev form button: full-width, comfortable primary actions. */
  .login-options > .btn,
  .login-options > form {
    width: 100%;
  }
  .login-options > .btn,
  .login-options > form .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: var(--sp-3) var(--sp-4);
  }

  /* "oder mit Masterpasswort" — a subtle divider between SSO and the password.
     Muted/small come from the global .note-meta (card.css); only the divider
     layout is login-specific. */
  .login-options > .note-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-1) 0;
  }
  .login-options > .note-meta::before,
  .login-options > .note-meta::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-border);
  }

  /* Master-password input + submit button on one line. */
  .login-options .row {
    gap: var(--sp-2);
  }
  .login-options .row .field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }
  .login-options .row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--sp-2) var(--sp-4);
  }

  /* Error / hint note below the card. */
  .login-error {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-danger) 30%, var(--c-border));
    color: var(--c-danger);
    font-size: var(--fs-sm);
    text-align: center;
  }
  .login-error[hidden] { display: none; }
}