/* The web app's /login look (frontend/src/pages/Login.js, frontend/src/index.css),
   copied value for value. tests/architecture/test_signin_page.py keeps the
   colours equal to the web app's and keeps any other colour out. Always dark,
   like the web app. */
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url(/signin/fonts/inter-300.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/signin/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/signin/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/signin/fonts/plex-mono-400.woff2) format("woff2"); }

:root {
  --background: hsl(0 0% 5%);
  --foreground: hsl(0 0% 92%);
  --card: hsl(0 0% 8%);
  --secondary: hsl(0 0% 12%);
  --muted-foreground: hsl(0 0% 60%);
  --border: hsl(0 0% 18%);
  --input: hsl(0 0% 16%);
  --destructive: hsl(0 60% 48%);
  /* Derived exactly as the web app derives them (.bg-topo, bg-secondary/40, text-muted-foreground/80). */
  --glow-1: hsl(0 0% 14%);
  --glow-2: hsl(0 0% 12%);
  --glow-3: hsl(0 0% 10%);
  --field: hsl(0 0% 12% / 0.4);
  --muted-soft: hsl(0 0% 60% / 0.8);
  --radius: 8px;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body { background: var(--background); color: var(--foreground); font: 16px/24px var(--sans); letter-spacing: -0.005em; }
[hidden] { display: none !important; }

/* Background: gradients, film grain and contour lines (src/topo.js). */
.bg-topo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, var(--glow-1) 0%, transparent 55%),
    radial-gradient(circle at 82% 82%, var(--glow-2) 0%, transparent 60%),
    radial-gradient(circle at 50% -10%, var(--glow-3) 0%, transparent 55%),
    var(--background);
}
.bg-topo::before {
  content: ""; position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}
.topo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo-flow path { animation: topo-pulse 14s ease-in-out infinite alternate; }
@keyframes topo-pulse { 0% { opacity: 0.04; } 100% { opacity: 0.10; } }
@media (prefers-reduced-motion: reduce) { .topo-flow path { animation: none; opacity: 0.07; } }

.shell { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; }

/* Header: logo + wordmark, as on /login (no "New account": people are invited). */
.top { padding: 20px 40px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { font-family: "Inter", sans-serif; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark .name { font-size: 18px; color: var(--foreground); }
.wordmark .version { font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--muted-foreground); margin-top: 4px; }
.dim { color: var(--muted-foreground); }

/* Logo: the image holds the glyph in its top part; show it 1.42x and anchored top (Brand.js). */
.logo { position: relative; display: inline-block; overflow: hidden; border-radius: 6px; background: var(--background); box-shadow: 0 0 0 1px var(--border); vertical-align: middle; flex: none; }
.logo img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-width: none; object-fit: cover; display: block; user-select: none; pointer-events: none; }
.logo-36 { width: 36px; height: 36px; } .logo-36 img { width: 51px; height: 51px; }
.logo-88 { width: 88px; height: 88px; } .logo-88 img { width: 125px; height: 125px; }

main.layout { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 24px 80px; }

.hero { max-width: 576px; display: grid; gap: 32px; }
.est { display: flex; align-items: center; gap: 12px; }
.est .rule { height: 1px; width: 40px; background: var(--border); }
.est .label { font-size: 12px; letter-spacing: 0.36em; color: var(--muted-foreground); }
.hero h1 { font-size: 60px; line-height: 1.05; font-weight: 300; letter-spacing: 0.18em; }
.hero .slogan { font-size: 18px; line-height: 28px; color: var(--muted-foreground); letter-spacing: 0.04em; margin-top: 16px; }
.hero .blurb { font-size: 13px; line-height: 1.625; color: var(--muted-soft); max-width: 448px; margin-top: 16px; }

.side { max-width: 448px; width: 100%; justify-self: end; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; backdrop-filter: blur(4px); }
.eyebrow { font-size: 10px; line-height: 15px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--muted-foreground); margin-bottom: 8px; }
.panel h2 { font-size: 24px; line-height: 32px; font-weight: 300; letter-spacing: -0.025em; margin-bottom: 24px; }
.foot { margin-top: 16px; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--muted-foreground); }

form, .stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
label { display: block; font-size: 11px; line-height: 24px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.inp { position: relative; }
.inp svg { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--muted-foreground); }
input, select {
  width: 100%; height: 36px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--input);
  background: var(--field); color: var(--foreground); font: 14px/20px var(--mono); letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.inp svg + input { padding-left: 32px; }
input.code { text-align: center; letter-spacing: 0.5em; font-size: 18px; }
input[readonly] { color: var(--muted-foreground); text-overflow: ellipsis; }
input::placeholder { color: var(--muted-foreground); }
select option { background: var(--card); color: var(--foreground); }

.btn {
  display: block; width: 100%; height: 36px; padding: 8px 16px; border-radius: 6px; border: 0; cursor: pointer;
  font: 500 14px/20px var(--sans); background: var(--foreground); color: var(--background);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.btn.outline { background: transparent; color: var(--foreground); border: 1px solid var(--input); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--muted-foreground); outline-offset: 2px; }

.or { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-foreground); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.note { font-size: 12px; line-height: 18px; color: var(--muted-foreground); }
.err, .progress { font-size: 12px; line-height: 16px; margin-bottom: 16px; }
.err { color: var(--destructive); }
.progress { color: var(--muted-foreground); }
.message-text { font-size: 14px; line-height: 20px; color: var(--foreground); }
.qr { background: #ffffff; border-radius: 6px; padding: 10px; width: fit-content; margin: 0 auto; }
.qr img { display: block; width: 180px; height: 180px; }
.key { font: 12px/18px var(--mono); color: var(--foreground); word-break: break-all; }

@media (max-width: 1023px) {
  main.layout { grid-template-columns: 1fr; padding: 24px; }
  .side { justify-self: stretch; max-width: none; }
  .top { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 48px; }
  .panel { padding: 28px; }
}
a.link-btn { text-align: center; text-decoration: none; }