.guide-article-mode {
  border: 0.05rem solid var(--md-typeset-a-color);
  border-radius: 0.2rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
}

.guide-article-mode__title {
  font-size: 1rem;
  margin: 0;
}

.guide-article-mode__help,
.guide-article-mode__status {
  margin: 0.5rem 0 0;
}

.guide-article-mode__options {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.guide-article-mode__options legend {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.guide-article-mode__option {
  align-items: center;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.15rem;
  cursor: pointer;
  display: inline-flex;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0.45rem 0.7rem;
}

.guide-article-mode__option:focus-within {
  outline: 0.15rem solid var(--md-accent-fg-color);
  outline-offset: 0.15rem;
}

.guide-article-mode__option input {
  accent-color: var(--md-accent-fg-color);
  inline-size: 1.1rem;
  margin: 0;
}

[data-guide-mode-block][hidden] {
  display: none !important;
}

@media screen and (min-width: 861px) {
  .guide-article-mode:not([data-guide-article-mode-ready])
    + [data-guide-article-content] [data-guide-mode-block="phone"] {
    display: none;
  }
}

@media screen and (max-width: 860px) {
  .guide-article-mode:not([data-guide-article-mode-ready])
    + [data-guide-article-content] [data-guide-mode-block="desktop"] {
    display: none;
  }
  .guide-article-mode {
    margin-inline: -0.4rem;
  }

  .guide-article-mode__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-article-mode__option {
    justify-content: center;
    padding-inline: 0.4rem;
  }
}

/* Figures ------------------------------------------------------------------
   Screenshots are captured at the device's own pixel density (desktop 2x, phone
   3x) and cropped to the control an article step is talking about, so they are
   displayed at their CSS size and stay sharp on a retina screen. */

.md-typeset .guide-figure {
  margin: 1.1rem 0 1.6rem;
  text-align: left;
}

.guide-figure img {
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.25rem;
  display: block;
  height: auto;
  /* Never wider than the column, and never wider than the CSS size the figure was
     captured at: `srcset` gives each image an intrinsic size of its pixels divided by
     the capture density, so `max-width: 100%` alone keeps every figure at or above the
     2x/3x it was shot at. Upscaling past that is the pixellation this round exists to
     remove, and an absolute max-width here is what made phone pages side-scroll. */
  max-width: 100%;
}

.guide-figure--phone img {
  /* A phone frame is 390 CSS px wide; stretching it across a desktop column inflates
     every glyph and reads as a mistake. `min()` narrows the container cap instead of
     replacing it — an absolute max-width here made ten of fourteen pages side-scroll
     on a phone, where the column is 370 px. */
  max-width: min(100%, 24rem);
}

/* The legend names what each numbered disc in the image points at. It is not a
   continuation of the step list above the figure, so it never renders as plain
   "1." decimals — it mirrors the markers drawn into the screenshot. */
.guide-figure figcaption ol {
  counter-reset: guide-callout;
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-figure figcaption ol > li {
  counter-increment: guide-callout;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0 0 0.3rem;
  padding-left: 2rem;
  position: relative;
}

.guide-figure figcaption ol > li::before {
  align-items: center;
  background: #1a1830;
  border: 0.1rem solid #ffe155;
  border-radius: 50%;
  color: #fff;
  content: counter(guide-callout);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 700;
  height: 1.35rem;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0.05rem;
  width: 1.35rem;
}