/*
 * The invitation page. The app's own dark ground and its parchment; the system's font, a placeholder
 * like every font in the app. No font, image or anything else from another address — the page's
 * content security policy refuses one anyway.
 */

/* Safari on an iPhone sizes this to the phone's own text size, as the app follows it; elsewhere
   the declaration is unknown and the browser's default stands. Text grows in rem; the headings stop
   growing past the body's size, the code stops where it would leave the screen, and spaces stop
   growing at a few points, so the largest sizes are words, not gaps. */
html {
  font: -apple-system-body;
  -webkit-text-size-adjust: 100%;
}

:root {
  --ground: #000000;
  --parchment: #e8dbc2;   /* RevealView's parchment */
  --cream: #f4c58e;       /* StoryShare's glyph colour */
  --ink: #342010;         /* PopOutPieces' ink */
  --quiet: #b3a68f;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--parchment);
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.4;
}

main,
footer {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 16px;
}

main {
  padding-top: min(1.5rem, 28px);
}

.letter {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 auto min(1.25rem, 24px);
}

h1 {
  font-size: max(1rem, min(1.5rem, 28px));
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  margin: 0 0 min(1.5rem, 28px);
}

h2 {
  font-size: max(1rem, min(1.15rem, 22px));
  font-weight: 600;
  margin: min(2rem, 36px) 0 min(0.5rem, 10px);
}

p {
  margin: 0 0 min(0.75rem, 14px);
}

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

/* The code is small, under "Already have the app?" (Todd, 28 October 2026): the page leads with getting
   the app, and the code is for the friend who has it and is reading this in a browser. */
.code-box {
  margin: 0 0 min(0.75rem, 14px);
}

.code-box[hidden],
.help[hidden] {
  display: none;
}

.label {
  color: var(--quiet);
  font-size: 0.9rem;
  margin: 0 0 4px;
}

/* The whole code selects as one piece: half a code opens nothing. Always on one line. Small: no larger
   than the headings. */
.code {
  font-size: max(1rem, min(1.15rem, 22px));
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
  margin: 0 0 min(0.75rem, 14px);
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  min-width: min(8rem, 100%);
  max-width: 100%;
  padding: min(0.5rem, 10px) min(1.5rem, 24px);
  cursor: pointer;
}

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

.copied {
  min-height: 1.4em;
  color: var(--quiet);
  font-size: 0.9rem;
  margin: min(0.5rem, 8px) 0 0;
}

.help {
  color: var(--parchment);
}

footer {
  color: var(--quiet);
  font-size: 0.8rem;
  text-align: center;
  padding-top: min(2.5rem, 40px);
  padding-bottom: min(2rem, 32px);
}