/* Help: each guide is a little stapled booklet on the shelf, and opens into a
   roomy how-to page with numbered steps. Nothing moves except on hover. */
.booklets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  text-align: left;
}

.booklets > li { display: grid; }

.booklet {
  position: relative;
  padding: 1rem 1.1rem 1rem 1.6rem;
  border: 2px solid var(--line);
  border-left: 0;
  border-radius: 4px var(--radius-soft) var(--radius-soft) 4px;
  background:
    linear-gradient(90deg, var(--accent) 0 0.5rem, transparent 0.5rem),
    var(--surface);
  box-shadow: 0 12px 16px -16px rgb(0 0 0 / 0.6);
  transition: transform 140ms ease;
}

/* Two staples down the spine. */
.booklet::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 0.12rem;
  width: 0.26rem;
  background: linear-gradient(var(--line) 0 0.8rem, transparent 0.8rem calc(100% - 0.8rem), var(--line) 0) no-repeat;
  border-radius: 2px;
}

.booklet:hover { transform: translateY(-2px); }
.booklet:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.booklet__kicker, .guide__kicker {
  margin: 0 0 0.3rem;
  color: var(--accent-deep);
  font: 700 0.7rem/1.3 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booklet__title { margin: 0 0 0.35rem; font-size: 1.15rem; }
.booklet__title a { color: inherit; text-decoration: none; }
.booklet__title a::after { content: ""; position: absolute; inset: 0; }
.booklet__body { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* The guide itself. */
.guide {
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 2px solid var(--line);
  border-top: 0.6rem solid var(--accent);
  border-radius: var(--radius-soft);
  background: var(--surface);
  text-align: left;
}

.guide__title { margin: 0.2rem 0 1.25rem; font-size: clamp(1.8rem, 5vw, 2.5rem); }
.guide__updated { margin: 2rem 0 0; padding-top: 0.75rem; border-top: 2px dashed var(--line); }

.prose { max-width: 68ch; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 1rem; }
.prose h1, .prose h2 { margin: 1.75rem 0 0.6rem; font-size: 1.4rem; }
.prose h3, .prose h4 { margin: 1.4rem 0 0.5rem; font-size: 1.15rem; }
.prose li + li { margin-top: 0.35rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-soft); }
.prose hr { border: 0; border-top: 2px dashed var(--line); margin: 1.75rem 0; }

/* Numbered steps get big round numbers. */
.prose ol { counter-reset: step; list-style: none; padding-left: 2.6rem; }
.prose ol > li { position: relative; counter-increment: step; }
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  left: -2.6rem;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent-pale);
  font: 700 0.9rem/1 var(--font-display);
}
.prose ol > li + li { margin-top: 0.7rem; }

/* A > quote is a tip. */
.prose blockquote {
  padding: 0.75rem 1rem;
  border-left: 0.35rem solid var(--amber);
  border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
  background: var(--amber-pale);
}
.prose blockquote > :last-child { margin-bottom: 0; }

.prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--paper-deep); font-size: 0.9em; }
.prose pre { padding: 0.9rem 1rem; overflow-x: auto; border-radius: var(--radius-soft); background: var(--paper-deep); }
.prose pre code { padding: 0; background: none; }

.prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: 0.4rem 0.75rem; border: 1px solid var(--line); text-align: left; }

.textarea--code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92rem; }

/* A customer's own page. */
.home-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.home-head h1, .home-head p { margin: 0; }
.home-head :is(.figure, .portrait) { width: 72px; height: 72px; flex: none; }

.conversation-row__excerpt { color: var(--ink-soft); font-size: 0.9rem; }

/* Public help pages need room for a guide. */
.public--wide .public__card { width: min(100%, 760px); }
.public--wide .booklets { margin: 1.5rem 0; }
.public__crumbs { text-align: left; }

/* Editing your profile: your photo next to the picker. */
.profile-form__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 0.5rem; }
.profile-form__photo :is(.figure, .portrait) { width: 96px; height: 96px; flex: none; border: 2px solid var(--ink); border-radius: 50%; }
.profile-form__photo .field { flex: 1 1 220px; }
.profile-form__remove { margin-top: 1rem; }