/* fomo's own typeface. Aeonik ships 400/500/700 and nothing else — asking for
   800 gets you faux-bold mud. Headings here stay at 400: the size does the
   work, not the weight. */
@font-face { font-family: Aeonik; src: url(/fonts/Aeonik-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: Aeonik; src: url(/fonts/Aeonik-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: Aeonik; src: url(/fonts/Aeonik-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap }

:root {
  --paper: #faf9fe;
  --white: #ffffff;
  --ink: #130f1c;
  --ink-2: #56526a;
  --ink-3: #8b8798;
  --line: rgba(19, 15, 28, .09);
  --line-2: rgba(19, 15, 28, .05);
  --wash: #f1effb;
  --accent: #516af6;
  --accent-2: #4157e2;
  --accent-wash: #edf0fe;
  --dark: #060510;
  --dark-2: #12111a;
  --dark-3: #161522;
  --green: #158b45;
  --green-wash: #e7f5ec;
  --amber: #8a6a12;
  --amber-wash: #fdf4e0;
  --red: #c4381a;
  --red-wash: #fdeee9;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Aeonik, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none }
button, input, textarea { font: inherit; color: inherit }
img { max-width: 100%; display: block }

::selection { background: var(--accent); color: #fff }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px }

/* ---------- wordmark ---------- */
.wm { height: 16px; width: auto; color: currentColor; display: block }
.brand { display: inline-flex; align-items: baseline; gap: 0; color: var(--ink) }
/* one word: 'chat' set to the wordmark's own size and butted straight against it */
.brand-sub { font-size: 17px; letter-spacing: -.02em; color: inherit; margin-left: 1px }

/* ---------- pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 40px;
  border: 0; background: var(--ink); color: var(--paper);
  font-size: 14px; letter-spacing: .002em; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.btn:hover { background: #2a2438 }
.btn[disabled] { opacity: .4; cursor: not-allowed }
.btn.ghost { background: rgba(19,15,28,.05); color: var(--ink) }
.btn.ghost:hover { background: rgba(19,15,28,.09) }
.btn.accent { background: var(--accent); color: #fff }
.btn.accent:hover { background: #4157e2 }
.btn.sm { height: 38px; padding: 0 16px; font-size: 13.5px }
.on-dark .btn, .btn.on-dark { background: var(--paper); color: var(--dark) }
.on-dark .btn:hover { background: #fff }
.on-dark .btn.ghost { background: rgba(255,255,255,.09); color: var(--paper) }
.on-dark .btn.ghost:hover { background: rgba(255,255,255,.16) }

/* ---------- fields ---------- */
.field {
  width: 100%; height: 50px; padding: 0 18px;
  background: var(--white); border: 0; border-radius: 40px;
  color: var(--ink); font-size: 15.5px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .16s ease;
}
.field::placeholder { color: var(--ink-3) }
.field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent) }

.mono { font-family: var(--mono); font-size: 12.5px }

/* ---------- avatars ---------- */
.av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--wash); display: grid; place-items: center;
  color: var(--ink-3); font-size: 15px;
}
.av img { width: 100%; height: 100%; object-fit: cover }
.av.lg { width: 52px; height: 52px; font-size: 19px }
.av.sm { width: 28px; height: 28px; font-size: 12px }

.spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(19,15,28,.18); border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
.on-dark .spin, .btn .spin { border-color: rgba(255,255,255,.3); border-top-color: #fff }
@keyframes spin { to { transform: rotate(360deg) } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- fomo's night sky ----------
   Stars as texture, not scenery: a handful of dots and one blue glow, drawn in
   CSS so there is no photograph to load and nothing to look like stock art.
   Used behind the dark band on the landing and behind the gate in the app. */
.nightsky { position: relative; background: var(--dark) }
.nightsky::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(0.9px 0.9px at 32.7% 16.5%, rgba(255,255,255,0.29), transparent 100%),
    radial-gradient(0.9px 0.9px at 53.5% 37.1%, rgba(255,255,255,0.75), transparent 100%),
    radial-gradient(1.3px 1.3px at 22.0% 10.3%, rgba(255,255,255,0.29), transparent 100%),
    radial-gradient(1.6px 1.6px at 9.9% 42.8%, rgba(255,255,255,0.32), transparent 100%),
    radial-gradient(0.9px 0.9px at 22.9% 62.2%, rgba(255,255,255,0.57), transparent 100%),
    radial-gradient(0.9px 0.9px at 39.9% 95.7%, rgba(255,255,255,0.56), transparent 100%),
    radial-gradient(1.6px 1.6px at 14.1% 42.2%, rgba(255,255,255,0.31), transparent 100%),
    radial-gradient(1.0px 1.0px at 31.2% 80.3%, rgba(255,255,255,0.31), transparent 100%),
    radial-gradient(0.9px 0.9px at 57.0% 20.0%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(1.0px 1.0px at 7.2% 7.7%, rgba(255,255,255,0.52), transparent 100%),
    radial-gradient(1.3px 1.3px at 53.1% 76.6%, rgba(255,255,255,0.57), transparent 100%),
    radial-gradient(1.0px 1.0px at 45.4% 30.8%, rgba(255,255,255,0.63), transparent 100%),
    radial-gradient(1.6px 1.6px at 24.9% 57.1%, rgba(255,255,255,0.52), transparent 100%),
    radial-gradient(1.6px 1.6px at 34.7% 45.1%, rgba(255,255,255,0.79), transparent 100%),
    radial-gradient(1.1px 1.1px at 12.6% 42.1%, rgba(255,255,255,0.33), transparent 100%),
    radial-gradient(0.9px 0.9px at 48.9% 5.8%, rgba(255,255,255,0.67), transparent 100%),
    radial-gradient(1.1px 1.1px at 57.2% 86.0%, rgba(255,255,255,0.44), transparent 100%),
    radial-gradient(1.3px 1.3px at 35.3% 49.7%, rgba(255,255,255,0.29), transparent 100%),
    radial-gradient(0.9px 0.9px at 10.2% 27.9%, rgba(255,255,255,0.28), transparent 100%),
    radial-gradient(1.3px 1.3px at 69.7% 64.1%, rgba(255,255,255,0.41), transparent 100%),
    radial-gradient(0.9px 0.9px at 38.8% 66.2%, rgba(255,255,255,0.77), transparent 100%),
    radial-gradient(1.3px 1.3px at 35.8% 60.6%, rgba(255,255,255,0.28), transparent 100%),
    radial-gradient(1.0px 1.0px at 76.3% 14.4%, rgba(255,255,255,0.47), transparent 100%),
    radial-gradient(1.0px 1.0px at 90.8% 49.7%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1.3px 1.3px at 54.8% 86.8%, rgba(255,255,255,0.73), transparent 100%),
    radial-gradient(1.1px 1.1px at 28.3% 41.9%, rgba(255,255,255,0.63), transparent 100%),
    radial-gradient(0.9px 0.9px at 38.3% 24.2%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1.3px 1.3px at 23.7% 24.4%, rgba(255,255,255,0.71), transparent 100%),
    radial-gradient(1.0px 1.0px at 18.9% 29.1%, rgba(255,255,255,0.48), transparent 100%),
    radial-gradient(1.0px 1.0px at 37.2% 56.4%, rgba(255,255,255,0.63), transparent 100%),
    radial-gradient(0.9px 0.9px at 51.5% 61.3%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 86.4% 93.4%, rgba(255,255,255,0.47), transparent 100%),
    radial-gradient(1.3px 1.3px at 40.1% 11.9%, rgba(255,255,255,0.28), transparent 100%),
    radial-gradient(1.0px 1.0px at 7.6% 22.0%, rgba(255,255,255,0.31), transparent 100%);
}
.nightsky::after {
  content: ''; position: absolute; left: 50%; top: -320px; transform: translateX(-50%);
  width: min(1100px, 150vw); height: 640px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(81, 106, 246, .22), transparent 70%);
}
.nightsky > * { position: relative; z-index: 1 }

/* the mark, same one the tab and the home screen show */
/* the mark is white artwork on a dark navy square; screen blending drops the
   square out against the page so it reads as the logo, not a tile */
.brand .mk { width: 24px; height: 24px; flex: none; align-self: center; margin-right: 9px; mix-blend-mode: screen }