/* The few paragraphs at the foot of a page that is mostly an app.

   /bots, /puzzles, /leaderboard and /ranks build nearly everything they show
   from script, so the HTML a search engine reads first said almost nothing:
   30 to 120 words a page, none of them saying what the page is (SEO.md, 3.3).
   This is that text - what the page is and how it works - placed below the
   part people came to use, so nobody has to scroll past it to get there.

   A direct child of <body>, after the page's own container, on all four:
   body already carries the rail's padding, so the column centres in the space
   to the right of the rail without knowing the rail is there.

   Website only. Inside the app these screens are sized to the display (the bots
   roster and the puzzle board both pin to it), and nobody searches into an app. */
.page-notes {
  max-width: 680px;
  margin: 0 auto;
  padding: 36px max(16px, env(safe-area-inset-right))
           calc(56px + env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.65;
}
.page-notes h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
}
.page-notes p,
.page-notes ul { margin: 0 0 12px; }
.page-notes ul { padding-left: 20px; }
.page-notes li { margin: 2px 0; }
.page-notes b { color: var(--color-text-primary); font-weight: 600; }
.page-notes a { color: var(--color-accent); }
.page-notes a:hover { color: var(--color-accent-hover); }

body.has-tabbar .page-notes { display: none; }