/* Shared styles for the standing pages: /terms/, /privacy/ and /contact/.
   Layers on top of styles.css, reusing its tokens, masthead and footer. */

/* ---------- Back to the front pages ----------

   Every standing page replaces the site title in its masthead with its own
   heading, which left the footer as the only way back. This is the way back,
   in the masthead, where a reader looks for it first. */

.masthead__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.masthead__back:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff;
}

/* The arrow is the whole point of the control, so it is set at nearly twice the
   label's size and given its own optical weight. At 0.95em in a 0.8rem link it
   was a punctuation mark, and readers were finding their way home through the
   footer instead. */
.masthead__back::before {
  content: "←";
  font-size: 1.5em;
  line-height: 0.8;
  font-weight: 400;
  margin-top: -0.05em;
}

.masthead__back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

.page__section {
  margin-top: 2.25rem;
}

.page__heading {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 680;
  letter-spacing: -0.012em;
}

.page__subheading {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 660;
}

.page p,
.page li {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.62;
}

.page p {
  margin: 0 0 0.85rem;
  max-width: 74ch;
}

.page ul,
.page ol {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
  max-width: 74ch;
}

.page li {
  margin-bottom: 0.35rem;
}

.page strong {
  color: var(--text);
}

.page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page code {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.32em;
  font-size: 0.88em;
}

.page__meta {
  font-size: 0.78rem;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

/* Table of contents on the longer documents. */
.toc {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.75rem;
}

.toc__title {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc ol {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 2rem;
}

.toc li {
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}

/* ---------- Notices ---------- */

.notice {
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.86rem;
  line-height: 1.55;
  max-width: 74ch;
}

.notice strong {
  color: inherit;
}

.notice--info {
  border: 1px solid #c8a24a;
  background: #fdf5e3;
  color: #7a5310;
}

/* ---------- Form ---------- */

.form {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  max-width: 46rem;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 1.1rem;
}

.form__row {
  margin-bottom: 1.15rem;
}

.form__label {
  display: block;
  margin-bottom: 0.32rem;
  font-size: 0.82rem;
  font-weight: 640;
  color: var(--text);
}

.form__optional {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.form__control {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
}

.form__control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form__control::placeholder {
  color: var(--text-faint);
}

.form__control--textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.55;
}

select.form__control {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right 0.72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form__help {
  margin: 0.32rem 0 0;
  font-size: 0.76rem;
  color: var(--text-faint);
  max-width: 68ch;
}

.form__help a {
  color: var(--accent);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.25rem;
}

.button {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-sunken);
  color: var(--text-muted);
  cursor: pointer;
}

.button:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.button--primary:hover {
  background: #1642b0;
  border-color: #1642b0;
  color: #fff;
}

.form__result {
  margin-top: 1rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.55;
}

.form__result--info {
  background: #fdf5e3;
  border: 1px solid #c8a24a;
  color: #7a5310;
}

.form__result--error {
  background: #fbe7e5;
  border: 1px solid #d68b80;
  color: #8f2d20;
}

/* Honeypot. Positioned off-screen rather than `display: none`, because a fair
   number of form-filling bots skip inputs they can tell are hidden and almost
   none check whether an input is merely parked at -9999px. `aria-hidden` and
   `tabindex="-1"` on the markup keep it away from anyone using the page. */
.form__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- FAQ ---------- */

.faq {
  margin: 0;
  max-width: 74ch;
}

.faq dt {
  font-weight: 650;
  color: var(--text);
  font-size: 0.88rem;
  margin-top: 1rem;
}

.faq dd {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 34rem) {
  .page {
    padding-inline: 1rem;
  }

  .toc ol {
    columns: 1;
  }

  .form {
    padding: 1rem;
  }
}