/* The shared Atiom sign-in card: dark gradient ground, white card, indigo CTA.
   Copied from Launch Radar (Directory is the reference) so the gate looks like one
   product across the tools. Don't restyle it here in isolation.
   Meridian tokens and fonts are scoped to #login so they don't touch the dashboard. */

@font-face { font-family: "Mona Sans VF"; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url("../fonts/MonaSansVF.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("../fonts/fraunces-normal-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-style: normal; font-display: swap;
  src: url("../fonts/dmsans-normal-latin.woff2") format("woff2"); }

#login {
  --primary-indigo: #6c4fe0;
  --text-indigo: #4e35b1;
  --charcoal: #2a2622;
  --text-mid: #6b6158;
  --deep: #151020;
  --indigo-dark: #1e1538;
  --error: #c75b4a;
  --font-display: "Fraunces", Georgia, "Garamond", serif;
  --font-structural: "Mona Sans VF", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", "Calibri", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --dur-state: 200ms;

  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(135deg, var(--deep), var(--indigo-dark));
  font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
#login[hidden] { display: none; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 18px;
              padding: 36px 32px; box-shadow: 0 24px 60px rgba(21,16,32,.4); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.login-brand .mark { width: 28px; height: auto; fill: var(--primary-indigo); }
.login-brand span { font-family: var(--font-structural); font-weight: 700; font-size: 18px; color: var(--charcoal); }
.login-card h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2;
                 color: var(--charcoal); margin: 0 0 4px; }
.login-card p.sub { font-family: var(--font-body); font-size: 14px; color: var(--text-mid); margin: 0 0 24px; }
/* Nothing to say: don't hold a line's worth of space above the button. */
.login-err { color: var(--error); font-size: 13.5px; margin: 0 0 14px; min-height: 1em; }
.login-err.is-note { color: var(--text-mid); }
.login-err:empty { min-height: 0; margin: 0; }
/* Primary sign-in. Indigo like every other action — the Google mark keeps its own
   colours, on the white chip its brand guidelines ask for. */
.login-card .btn-google { width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-family: var(--font-structural); font-weight: 700; font-size: 15px; color: #fff;
  background: var(--primary-indigo); border: none; border-radius: 10px; padding: 12px; cursor: pointer;
  transition: background var(--dur-state) var(--ease-out); }
.login-card .btn-google:hover { background: var(--text-indigo); }
.login-card .btn-google:disabled { opacity: .6; cursor: not-allowed; }
.btn__logo { display: inline-flex; align-items: center; justify-content: center; width: 22px;
             height: 22px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.btn__logo svg { width: 14px; height: 14px; display: block; }