/**
 * Component Group: D1 Account Login
 *
 * Responsibility:
 * - Public account login shell
 * - Login card
 * - Login form
 * - Login input / autofill behavior
 * - Login footer
 *
 * Does NOT own:
 * - Shared account typography primitives
 * - Shared account form messages
 * - Shared alerts
 * - Account header
 * - Billing
 * - Signals
 * - Upgrade
 */

 @layer components {
    html:has(body.d1-controlled-render .d1-account-login-shell),
    body.d1-controlled-render:has(.d1-account-login-shell) {
      width: 100%;
      min-height: 100%;
      margin: 0;
    }
  
    body.d1-controlled-render:has(.d1-account-login-shell) {
      --d1-login-bg-start: var(--dig-color-bg);
      --d1-login-bg-end: var(--dig-color-bg-alt);
  
      --d1-login-panel-bg: color-mix(
        in srgb,
        var(--dig-color-bg) 96%,
        transparent
      );
  
      --d1-login-text: var(--dig-color-primary);
      --d1-login-text-muted: var(--dig-color-text-muted);
  
      --d1-login-border: color-mix(
        in srgb,
        var(--dig-color-border) 82%,
        var(--dig-color-primary)
      );
  
      --d1-login-shadow: color-mix(
        in srgb,
        var(--dig-color-primary) 10%,
        transparent
      );
  
      --d1-login-input-text: var(--dig-color-primary);
  
      color-scheme: light;
      background: var(--d1-login-bg-end);
    }
  
    body.d1-controlled-render:has(.d1-account-login-shell)
      .d1-main.dig-container {
      display: block;
  
      width: 100%;
      max-width: none;
      min-height: 0;
  
      margin: 0;
      padding: 0;
  
      background: transparent;
    }
  
    .d1-account-login-shell {
      box-sizing: border-box;
  
      display: grid;
      place-items: center;
  
      width: 100%;
      height: 100svh;
      min-height: 0;
  
      margin: 0;
  
      padding:
        clamp(1.25rem, 4vh, 3rem)
        clamp(1rem, 3vw, 2rem);
  
      overflow: hidden;
  
      background:
        radial-gradient(
          circle at 26% 16%,
          color-mix(
            in srgb,
            var(--dig-color-secondary) 10%,
            transparent
          ),
          transparent 30%
        ),
        radial-gradient(
          circle at 76% 12%,
          color-mix(
            in srgb,
            var(--dig-color-accent) 7%,
            transparent
          ),
          transparent 26%
        ),
        linear-gradient(
          180deg,
          var(--d1-login-bg-start) 0%,
          var(--d1-login-bg-end) 100%
        );
    }
  
    .d1-account-login-card {
      box-sizing: border-box;
  
      width: min(100%, 32.5rem);
  
      padding: clamp(1.5rem, 3vw, 2rem);
  
      color: var(--d1-login-text);
      background: var(--d1-login-panel-bg);
  
      border: 1px solid var(--d1-login-border);
      border-radius: var(--dig-radius-md);
  
      box-shadow:
        0 1px 2px var(--d1-login-shadow),
        0
          clamp(1rem, 3vw, 2rem)
          clamp(2.5rem, 6vw, 4.5rem)
          var(--d1-login-shadow);
    }
  
    .d1-account-login-card h1 {
      margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
  
      color: var(--d1-login-text);
  
      font-size: clamp(2rem, 3.3vw, 2.75rem);
      font-weight: var(--dig-font-weight-heavy);
      line-height: 1.04;
      letter-spacing: var(--dig-letter-spacing-tight);
  
      text-wrap: balance;
    }
  
    .d1-account-login-card label {
      color: var(--d1-login-text);
  
      font-size: clamp(0.8rem, 0.77rem + 0.1vw, 0.875rem);
      font-weight: var(--dig-font-weight-semibold);
    }
  
    .d1-account-login-card .d1-account-muted {
      margin: 0;
  
      color: var(--d1-login-text-muted);
  
      font-size: clamp(0.875rem, 0.84rem + 0.12vw, 0.95rem);
      line-height: 1.55;
    }
  
    .d1-account-login-card .d1-account-kicker {
      margin: 0 0 clamp(0.75rem, 1.5vw, 0.95rem);
  
      padding-left: 0.75rem;
  
      color: var(--dig-color-secondary-dark);
  
      border-left: 2px solid var(--dig-color-secondary);
  
      font-family: var(--dig-font-mono);
      font-size: clamp(0.65rem, 0.62rem + 0.1vw, 0.72rem);
      font-weight: var(--dig-font-weight-bold);
      line-height: 1.2;
      letter-spacing: var(--dig-letter-spacing-label);
      text-transform: uppercase;
    }
  
    .d1-account-login-form {
      display: grid;
  
      gap: clamp(0.7rem, 1.2vw, 0.85rem);
  
      margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
    }
  
    .d1-account-login-form input {
      box-sizing: border-box;
  
      width: 100%;
      min-height: clamp(2.75rem, 4vw, 2.9rem);
  
      padding: 0.75rem 0.9rem;
  
      color: var(--d1-login-input-text);
      -webkit-text-fill-color: var(--d1-login-input-text);
  
      caret-color: var(--dig-color-secondary);
  
      background: var(--dig-color-bg);
  
      border: 1px solid var(--d1-login-border);
      border-radius: var(--dig-radius-sm);
  
      outline: 0;
  
      font-family: var(--dig-font-primary);
      font-size: clamp(0.85rem, 0.82rem + 0.1vw, 0.925rem);
  
      transition:
        border-color var(--dig-transition-fast),
        box-shadow var(--dig-transition-fast);
    }
  
    .d1-account-login-form input::placeholder {
      color: color-mix(
        in srgb,
        var(--dig-color-text-muted) 68%,
        var(--dig-color-bg)
      );
  
      -webkit-text-fill-color: color-mix(
        in srgb,
        var(--dig-color-text-muted) 68%,
        var(--dig-color-bg)
      );
  
      opacity: 1;
    }
  
    .d1-account-login-form input:focus {
      border-color: var(--dig-color-secondary);
  
      box-shadow:
        0 0 0 3px
        color-mix(
          in srgb,
          var(--dig-color-secondary) 13%,
          transparent
        );
    }
  
    .d1-account-login-form input:-webkit-autofill,
    .d1-account-login-form input:-webkit-autofill:hover,
    .d1-account-login-form input:-webkit-autofill:focus {
      color: var(--d1-login-input-text);
      -webkit-text-fill-color: var(--d1-login-input-text);
  
      caret-color: var(--d1-login-input-text);
  
      box-shadow:
        inset 0 0 0 1000px var(--dig-color-bg);
  
      transition:
        background-color 9999s ease-out 0s;
    }
  
    .d1-account-login-card .dig-btn-primary {
      width: 100%;
      min-height: clamp(2.85rem, 4vw, 3rem);
  
      color: var(--dig-color-white);
  
      background: var(--dig-color-primary);
      border-color: var(--dig-color-primary);
  
      border-radius: var(--dig-radius-sm);
    }
  
    .d1-account-login-card .dig-btn-primary:hover,
    .d1-account-login-card .dig-btn-primary:focus-visible {
      color: var(--dig-color-white);
  
      background: var(--dig-color-primary-light);
      border-color: var(--dig-color-primary-light);
    }
  
    .d1-account-login-footer {
      margin-top: clamp(1.5rem, 3vw, 2rem);
    }
  
    .d1-account-login-footer a {
      color: var(--dig-color-primary);
  
      font-size: clamp(0.82rem, 0.79rem + 0.1vw, 0.9rem);
  
      text-decoration: none;
    }
  
    .d1-account-login-footer a:hover,
    .d1-account-login-footer a:focus-visible {
      color: var(--dig-color-secondary-dark);
    }
  
    @media (min-width: 42.51rem) {
      html:has(body.d1-controlled-render .d1-account-login-shell),
      body.d1-controlled-render:has(.d1-account-login-shell) {
        height: 100%;
        overflow: hidden;
      }
    }
  
    @media (max-width: 42.5rem) {
      html:has(body.d1-controlled-render .d1-account-login-shell),
      body.d1-controlled-render:has(.d1-account-login-shell) {
        min-height: 100%;
  
        overflow-x: hidden;
        overflow-y: auto;
      }
  
      .d1-account-login-shell {
        place-items: start center;
  
        height: auto;
        min-height: 100dvh;
  
        padding:
          clamp(1rem, 5vw, 1.5rem)
          clamp(0.75rem, 4vw, 1rem);
  
        overflow: visible;
      }
  
      .d1-account-login-card {
        padding: clamp(1.25rem, 5vw, 1.5rem);
      }
    }

    .d1-account-billing-note {
        margin: clamp(0.45rem, 0.4rem + 0.15vw, 0.55rem) 0 0;
      
        color: var(--dig-color-text-muted);
      
        font-size: clamp(0.78rem, 0.75rem + 0.08vw, 0.875rem);
        line-height: 1.45;
      }
      
      .d1-account-billing-note.is-warning {
        color: var(--dig-color-warning);
      }
      
      .d1-account-billing-note.is-critical {
        color: var(--dig-color-danger);
      }
      
      .d1-account-billing-note.is-muted {
        color: var(--dig-color-text-muted);
      }
  }