/* auth.mojmar.app — the one page between the desktop app and Google.
   Same ground and accent as the app, so the hop to the browser does not feel
   like leaving the product. No web fonts: the CSP allows nothing third-party,
   and Segoe UI Variable is what the Windows app itself renders in. */

:root {
  color-scheme: dark;
  --ground: #0f0f15;
  --ink: #ececf1;
  --muted: #9d9daa;
  --dim: #6c6c78;
  --line: rgba(255, 255, 255, 0.09);
  --mark: #11aa85;
  --error: #f0736a;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  display: grid;
  place-items: center;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

main {
  width: 100%;
  max-width: 380px;
}

/* The mark, and the one moment of motion on the page: while the browser is on
   its way to Google, a ring leaves the tile once a second — the same signal the
   app's capsule gives. It stops the moment there is something to read. */
.mark {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
}
.mark img { width: 56px; height: 56px; display: block; border-radius: 14px; }
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid var(--mark);
  opacity: 0;
}
body[data-state="working"] .mark::after { animation: ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
@keyframes ring {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.45); }
}

h1 {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

p.lede { color: var(--muted); margin-bottom: 28px; max-width: 34ch; }
p.lede.error { color: var(--error); }

/* Google's own button spec: white surface, the four-colour G, "Continue with
   Google". It is the one element people recognise before they read anything. */
.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid #dadce0;
  background: #fff;
  color: #1f1f1f;
  font: 500 15px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.google:hover { background: #f3f4f6; }
.google img { width: 18px; height: 18px; }

.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 500 15px/1 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.secondary:hover { background: rgba(255, 255, 255, 0.04); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

[hidden] { display: none !important; }

footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  body[data-state="working"] .mark::after { animation: none; }
}