/* Help (/help) — only what is specific to this page.
   The shell (top bar, the rail layout, cards, buttons, the footer) is base.css.
   This page has no account menu and no session: the top bar holds two links
   instead, and everything else is reading matter.

   Tokens only, no importance flags, no external URL. */

/* The body colour of a card's prose, as on the charter: DIRECTION.md's #2f2e2a,
   a shade base.css does not name because only the reading pages need it. */
.card-column { --doc-text: #2f2e2a; }

/* ---- page entry -------------------------------------------------------------- */

.rail-layout > nav.rail.enter { animation-delay: .9s; }
.card-column > .card.enter { animation-delay: 1s; }

/* ---- the top bar --------------------------------------------------------------
   Logged out there is nobody to greet, so the right-hand side is "Sign in" and
   the way back, at the account button's height. */

.topbar-right .btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14.5px;
}

.topbar-right .btn:not(.secondary):hover { background: var(--sand); color: var(--ink); }

/* ---- the sections ---------------------------------------------------------------
   One white card each, a heading and prose, 14px apart. */

.card-column > .card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-column > .card > h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.card-column > .card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--doc-text);
  text-wrap: pretty;
}

.card-column > .card ul,
.card-column > .card ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-column > .card li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--doc-text);
  text-wrap: pretty;
}

.card-column code {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--tint-2);
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

/* The one thing on this page that is a warning rather than an instruction. */
.guard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--blush);
}

.guard svg { flex: none; margin-top: 2px; }

.card-column > .card .guard p {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink);
}

/* The last section ends in the one action on the page: write to a human. */
.btn.contact {
  align-self: flex-start;
  margin-top: 4px;
  text-align: left;
  overflow-wrap: anywhere;
}

.btn.contact:hover { background: var(--powder); color: var(--ink); }

@media (max-width: 640px) {
  .topbar-right .btn { padding: 0 14px; font-size: 14px; }
}