/* Goldmine auth styles: the sign-in gate (Google + email/password) and the
   global .hidden utility. Extracted from index.html (pre-draft refactor step 1). */
  /* Sign-in gate */
  .auth-gate {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
  }
  .auth-gate.hidden { display: none; }
  /* Echo the editorial card framing used by .setup-card.primary */
  .auth-card {
    text-align: center;
    width: calc(100% - 3rem);
    max-width: 380px;
    padding: 2.5rem 2.25rem 2.25rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
  }
  .auth-brand {
    display: flex; align-items: center; justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
  }
  .auth-logo { height: 40px; }
  .auth-divider {
    width: 2px; height: 32px; background: #e6e8ee; flex-shrink: 0;
  }
  /* Match the header "Goldmine" wordmark: Lora serif + gold shimmer */
  .auth-word {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #a8821e; /* fallback */
    background: linear-gradient(
      100deg,
      #6e5410 0%,
      #8a6914 35%,
      #c39a2e 50%,
      #8a6914 65%,
      #6e5410 100%
    );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShimmer 10s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-word { animation: none; background-position: 30% 50%; }
  }
  .auth-sub { color: var(--muted); margin: 0.5rem 0 1.75rem; }
  /* Same primary CTA as .card-cta: navy fill, gold hover */
  .auth-btn {
    width: 100%;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.8rem 1.4rem;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    background: var(--brand);
    color: #fff;
    transition: background 0.15s, color 0.15s;
  }
  .auth-btn:hover { background: var(--accent); color: var(--brand); }
  .auth-btn:disabled { opacity: 0.55; cursor: default; }
  .auth-note { margin-top: 1.25rem; font-size: 0.9rem; color: #a14a2a; }
  .auth-note.hidden { display: none; }
  /* Email/password sign-in, stacked under the Google button */
  .auth-or {
    display: flex; align-items: center;
    color: var(--muted); font-size: 0.82rem; margin: 1.1rem 0;
  }
  .auth-or::before, .auth-or::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }
  .auth-or span { padding: 0 0.75rem; }
  .auth-form { display: flex; flex-direction: column; gap: 0.6rem; }
  .auth-input {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 0.92rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: inherit;
  }
  .auth-input::placeholder { color: var(--muted); }
  .auth-input:focus-visible {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  /* Secondary CTA: outlined navy, inverts on hover (distinct from the filled Google button) */
  .auth-btn-secondary { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
  .auth-btn-secondary:hover { background: var(--brand); color: #fff; }
  .auth-toggle { margin-top: 1.1rem; font-size: 0.88rem; color: var(--muted); }
  .auth-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent); text-decoration: underline;
  }
  .auth-link:hover { color: var(--brand); }
  .auth-link.hidden { display: none; }
  #authResendBtn { display: block; margin: 0.75rem auto 0; }

  main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 3.5rem 2.5rem 5rem;
  }

  .grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr);
    gap: 2rem;
    align-items: start;
  }
  @media (max-width: 760px) {
    header { padding: 1rem 1.1rem; }
    main { padding: 1.75rem 1.1rem 3rem; }
    .grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .side { position: static; top: auto; }
    .brand { gap: 0.6rem; }
    .brand .mark { height: 36px; }
    .brand .divider { height: 22px; }
    .brand h1 { font-size: 1.2rem; }
    .header-actions button { font-size: 1.25rem; padding: 0.2rem 0.35rem; }
    .setup-card { padding: 1.25rem 1.25rem 1.1rem; }
    /* iOS Safari zooms inputs under 16px on focus — bump to 16px on mobile */
    .chat-input textarea,
    .modal-body input,
    .modal-body select { font-size: 16px; }
    .modal-body { padding: 1.5rem 1.5rem; width: 100%; max-width: calc(100vw - 2rem); }
    .chat-header { flex-wrap: wrap; gap: 0.5rem; }
    #chat.chat { min-height: 320px; }
  }

  .panel {
    background: var(--bg);
  }

  .hidden { display: none !important; }