/* Site-only additions on top of the design's landing.css. Kept separate so design/ stays
   the single source for the look, and so this file can be deleted when the app absorbs it.
   Logical properties throughout, because right-to-left locales are coming. */

/* The struck-through "off" and the "on" that replaces it must never land on separate lines —
   split across a line break the joke stops reading as a correction. */
.swap {
  white-space: nowrap;
}

/* Break the heading into even lines rather than leaving one word stranded.
   Unsupported browsers just wrap normally. */
#signup-title {
  text-wrap: balance;
}

/* Visible to screen readers only. Same treatment as the honeypot, different purpose. */
.sr-only,
.hp-field {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  margin-block: 0.75rem 0;
  font-size: 0.9rem;
  min-block-size: 1.2em;
}

.form-status[data-state="error"] {
  color: var(--accent, #e0245e);
}

.form-fineprint {
  margin-block: 0.5rem 0;
  font-size: 0.8rem;
  opacity: 0.75;
  max-inline-size: 46ch;
}

.examples-note {
  margin-block-start: 1rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* The example cards and the leaderboard are illustrations until the site opens, so their
   controls are disabled rather than looking clickable and doing nothing. */
.post-actions button[disabled],
.board-tabs button[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* Skeleton widths live here rather than inline, so the page needs no style-src 'unsafe-inline'. */
.sk-l1 { inline-size: 170px; }
.sk-l2 { inline-size: 130px; }
.sk-l3 { inline-size: 190px; }
.sk-l4 { inline-size: 110px; }
.sk-l5 { inline-size: 150px; }
.sk-b1 { inline-size: 92%; }
.sk-b2 { inline-size: 74%; }
.sk-b3 { inline-size: 58%; }
.sk-b4 { inline-size: 43%; }
.sk-b5 { inline-size: 30%; }

/* Plain prose pages: privacy, terms, contact, and the post-signup page. */
.prose {
  max-inline-size: 68ch;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 3rem 5rem;
}

.prose h1 {
  margin-block-end: 0.25rem;
}

.prose .updated {
  opacity: 0.7;
  font-size: 0.9rem;
  margin-block-start: 0;
}

.prose h2 {
  margin-block-start: 2.5rem;
}

.prose li {
  margin-block-end: 0.4rem;
}

.prose .back {
  display: inline-block;
  margin-block-start: 3rem;
}