/* Login page — matches the React app's "Clean Humanistic" design
 * (warm cream canvas, Instrument Serif headline, Echo mint accent).
 * Self-contained + CSP-safe: styles here (style-src 'self'), fonts pulled
 * from the app's self-hosted woff2 at /app/fonts (font-src 'self'). */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/app/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/app/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/app/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 300 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  --canvas: #FBFAF7; --paper: #FFFFFF; --bubble: #F1EEE6;
  --ink: #1A1310; --ink-soft: #3D332C; --ink-muted: #847866;
  --line: #E8E2D5; --line2: #D2C9B5;
  --echo: #2DD4BF; --echo-deep: #0F766E;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body.login-page {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  /* Warm base wash; the colorful ambient orbs are animated elements below
     (.login-orbs) so they can slowly drift behind the card's frosted glass. */
  background-image: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, var(--canvas) 55%);
}

/* Ambient brand orbs — soft blurred circles (mint · terracotta · amber) that
   slowly drift behind the frosted card. On a non-scrolling page this is the
   layer backdrop-filter frosts, and the drift makes it feel alive. */
.login-orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* Springy return after a drag jostle (login-orbs.js sets a transform while
     you pull the page; releasing clears it and it bounces back). The back-out
     easing overshoots slightly = a physical "jostle". */
  transform: translate(0, 0);
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
/* While actively dragging, track the finger 1:1 (no lag); the spring only
   plays on release. */
.login-orbs.dragging { transition: none; }
.login-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.55;
  will-change: transform;
}
.login-orbs .orb:nth-child(1) {
  width: 44vmin; height: 44vmin; top: -8vmin; left: -6vmin;
  background: var(--echo);
  animation: orb-drift-a 14s ease-in-out infinite alternate;
}
.login-orbs .orb:nth-child(2) {
  width: 50vmin; height: 50vmin; top: -10vmin; right: -8vmin;
  background: #E2643E;
  animation: orb-drift-b 17s ease-in-out infinite alternate;
}
.login-orbs .orb:nth-child(3) {
  width: 54vmin; height: 54vmin; bottom: -14vmin; right: 6vmin;
  background: #F5C878;
  animation: orb-drift-c 20s ease-in-out infinite alternate;
}
@keyframes orb-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(14vmin, 10vmin) scale(1.12); }
}
@keyframes orb-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12vmin, 14vmin) scale(1.08); }
}
@keyframes orb-drift-c {
  0%   { transform: translate(0, 0) scale(1.05); }
  100% { transform: translate(-10vmin, -12vmin) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .login-orbs .orb { animation: none; }
}

/* The card is a floating frosted-glass panel. backdrop-filter frosts the
   ambient orbs behind it — that's what makes the glass read on a static page. */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 372px;
  text-align: center;
  padding: 40px 30px 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 28px 64px -34px rgba(26, 19, 16, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

/* Progressive enhancement: only lean translucent where the browser can
   actually frost, so no-backdrop-filter browsers still get a solid card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card { background: rgba(255, 255, 255, 0.92); }
}

.login-logo {
  /* the official transparent Echo brand mark (echo-icon.png) — shown plain,
     same as the app's EchoIcon, no card/shadow treatment. */
  width: 64px; height: 64px; display: block; margin: 0 auto;
  object-fit: contain;
}

.login-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 20px 0 10px;
  color: var(--ink);
}
.login-title em { font-style: italic; color: var(--echo-deep); }

.login-lede {
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 auto 28px;
  max-width: 30ch;
}

.providers { display: flex; flex-direction: column; gap: 10px; }

.provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.provider:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -14px rgba(26, 19, 16, 0.5);
}
.provider:active { transform: translateY(0); }
.provider.disabled { opacity: .4; pointer-events: none; }
.provider svg { width: 18px; height: 18px; flex: none; }

.login-foot {
  margin-top: 24px;
  font-size: 12px;
  color: var(--ink-muted);
}
.login-foot .dot { color: var(--echo); }
.login-foot code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bubble); border-radius: 5px; padding: 1px 5px; font-size: 11px;
}

/* --- Access-denied page (shares the sign-in look) --------------------- */
.deny-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 18px auto 0;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: #FBEDE9;                 /* warm terracotta wash */
  color: #B4442A;
  font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
}
.deny-badge .dot { width: 7px; height: 7px; border-radius: 999px; background: #E2643E; }

.deny-email {
  display: inline-block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bubble);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  word-break: break-all;
}

/* the "Try a different account" action reuses .provider, tinted as the accent */
.provider.accent {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
}
.provider.accent:hover { box-shadow: 0 10px 24px -14px rgba(26,19,16,.7); }