/*
 * Join page styles. Colours, radii and font mirror the app's design tokens (src/ui/tokens.ts,
 * PLAN §2b); join-page/__tests__/join.test.ts keeps the --color-* values in sync with them.
 * Same-origin file only (CSP style-src 'self'): no inline styles, no web fonts.
 */

:root {
  color-scheme: dark light;
  --color-window: #1c1f26;
  --color-card: #262a33;
  --color-card-border: #ffffff0f;
  --color-control: #2f3440;
  --color-control-hover: #383e4c;
  --color-accent: #a9b8f5;
  --color-on-accent: #1c1f26;
  --color-primary: #e8eaf0;
  --color-secondary: #9aa1b0;
  --radius-card: 12px;
  --radius-control: 8px;
  --motion-duration: 150ms;
  --font-sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-window: #eef0f4;
    --color-card: #ffffff;
    --color-card-border: #00000014;
    --color-control: #f0f2f6;
    --color-control-hover: #e4e7ee;
    --color-accent: #3b4fb0;
    --color-on-accent: #ffffff;
    --color-primary: #1a1d24;
    --color-secondary: #555c6a;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-window);
}

body {
  margin: 0;
  background: var(--color-window);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card[hidden],
.note[hidden],
.link[hidden] {
  display: none;
}

h2,
h3 {
  margin: 0;
  font-weight: 600;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
  margin-top: 8px;
}

p {
  margin: 0;
}

.lead {
  font-size: 18px;
  font-weight: 600;
}

.hint,
.note {
  color: var(--color-secondary);
  font-size: 14px;
}

a {
  color: var(--color-accent);
}

.btn {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: filter var(--motion-duration) ease-out;
}

.btn:hover {
  filter: brightness(1.08);
}

.link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
h2:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 8px;
  border-radius: var(--radius-control);
}

code {
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 14px;
  background: var(--color-control);
  padding: 1px 4px;
  border-radius: 4px;
}

.hash {
  display: block;
  padding: 8px;
  overflow-wrap: anywhere;
}