/* red's waitlist: RedTheme (ios/Red/Views/Theme.swift), the face (RT Alias Rough, Light; Regular for
   emphasis), ink on a pale page, and nothing red but the dot, which the canvas draws. */
@font-face { font-family: "RT Alias Rough"; src: url(fonts/RTAliasRough-Light.ttf) format("truetype"); font-weight: 300; font-display: block; }
@font-face { font-family: "RT Alias Rough"; src: url(fonts/RTAliasRough-Regular.ttf) format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "RT Alias Rough"; src: url(fonts/RTAliasRough-LightOblique.ttf) format("truetype"); font-weight: 300; font-style: italic; font-display: block; }

:root {
  --page: #F1EDED; --surface: #F8F4F4; --ink: #151515; --secondary: #6F6D68; --bubble: #E4E0E0; --line: #D5D1D0; --dot: #E8382B;
  --scheme: light; color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #171413; --surface: #211E1E; --ink: #EDEBE6; --secondary: #9A978F; --bubble: #2B2828; --line: #3B3838; --dot: #FF4B3A;
  --scheme: dark; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #171413; --surface: #211E1E; --ink: #EDEBE6; --secondary: #9A978F; --bubble: #2B2828; --line: #3B3838; --dot: #FF4B3A;
    --scheme: dark; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--page); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: var(--page); color: var(--ink);
  font: 300 17px/1.6 "RT Alias Rough", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--ink); color: var(--page); }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong, b { font-weight: 400; }

.ember-canvas {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
main, header, footer { position: relative; z-index: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The form: the composer's field (surface, hairline, ink-tinted when focused) and one filled ink button. */
.join { display: grid; width: 100%; max-width: 380px; }
.join .row, .join .done { grid-area: 1 / 1; }
.join .row { display: flex; gap: 8px; }
.join input {
  flex: 1; min-width: 0; height: 50px; padding: 0 20px;
  font: inherit; font-size: 17px; color: var(--ink); caret-color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 25px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.join input::placeholder { color: var(--secondary); opacity: 1; }
.join input:focus, .join.focused input { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
.join button {
  height: 50px; padding: 0 22px; border: 0; border-radius: 25px;
  background: var(--ink); color: var(--page); font: 400 17px/1 "RT Alias Rough", system-ui, sans-serif;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.join button:active { transform: scale(0.97); }
.join button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.join.joined .row { visibility: hidden; }
.join .done { visibility: hidden; opacity: 0; align-self: center; line-height: 1.35; }
.join .done [data-ok] { display: block; font-weight: 400; font-size: 19px; }
.join .done [data-sub] { display: block; color: var(--secondary); font-size: 15px; }
.join .msg { grid-row: 2; min-height: 24px; margin: 8px 0 0 20px; font-size: 15px; color: var(--ink); }

.secondary { color: var(--secondary); }
.foot { color: var(--secondary); font-size: 13px; letter-spacing: 0.02em; }