/* The guides (guides/ and zh/guides/): the legal pages' reading column
   (account.css .legal) plus what a how-to needs: the way back to the index,
   numbered steps, a question under a heading, a command and a screenshot. */
/* Two classes: .legal p (account.css) would otherwise set its size and margin. */
.guide .guide-crumbs {
  margin: 0 0 calc(16 * var(--u));
  color: var(--muted);
  font-size: calc(13 * var(--u));
}
/* The hub's closing line stands apart from the last guide, under the rule
   that opens every section (.legal h2). */
.guide .guide-note {
  margin-top: calc(48 * var(--u));
  padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.guide ol {
  margin: calc(14 * var(--u)) 0 0;
  padding-left: 1.4em;
}
.guide h3 {
  margin: calc(28 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  line-height: 1.5;
}
.guide h3 + p {
  margin-top: calc(6 * var(--u));
}
.guide h2 a {
  text-decoration: none;
}
.guide pre {
  margin: calc(14 * var(--u)) 0 0;
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: calc(13.5 * var(--u));
  line-height: 1.6;
}
.guide code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}
/* A path in running text breaks anywhere rather than run past the column. */
.guide :not(pre) > code {
  overflow-wrap: anywhere;
}
/* The page is a grid (account.css body), and a grid item is at least as wide
   as its widest line: without this, a command in a <pre> would widen the
   whole page on a phone instead of scrolling inside its box. */
.account-main {
  min-width: 0;
}
.guide figure {
  margin: calc(32 * var(--u)) 0 0;
}
/* A screenshot of the app window: the device window's 10px corners, and the
   1px ink-at-8% edge every picture on paper wears. Flat, no shadow. */
.guide-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(10 * var(--u));
}
.guide-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(24 33 38 / 0.08);
  pointer-events: none;
}
.guide-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.guide figcaption {
  margin-top: calc(10 * var(--u));
  color: var(--muted);
  font-size: calc(13 * var(--u));
}
@media (max-width: 760px) {
  .guide-shot {
    border-radius: 6px;
  }
}