/* Integration only. The original info presentation lives in main.css. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--primary);
  border-radius: 4px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* This one is invisible until it has focus, so appearing at all is how it
   shows it -- the ring below would only draw a second green frame around a
   green frame. */
.app-shell .skip-link:focus-visible { outline: none; }
/* Links and buttons get the site's own ring. Fields do not appear here: they
   mark focus by turning their border green, next to each field definition. */
.app-shell :is(a, button, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* `tabindex="-1"` marks an element the page focuses on the reader's behalf:
   the article heading after following an anchor, or <main> after the skip
   link. It moves the screen reader's position, it is not something the reader
   aimed at, so it draws no ring. Without this, arriving at a chapter by
   keyboard put a black box around its heading. */
.app-shell [tabindex="-1"]:focus,
.app-shell [tabindex="-1"]:focus-visible {
  outline: none;
}

/* The brand must not shrink when the search field beside it flexes.
   The field itself is defined with the header in main.css. */
.site-header .brand { flex-shrink: 0; white-space: nowrap; }

/* Markdown sections add wrappers; keep the original heading rules across them. */
.help-main { overflow-wrap: anywhere; }
.help-main > .lead > p { margin: 0; }
.help-generated > section + section > div > h2:first-of-type {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.help-generated > section > div > h3 {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 24px;
}
.help-generated > section > div > h3:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 14px;
}
.help-generated pre, .help-generated table { max-width: 100%; overflow-x: auto; }
.help-generated table { display: block; }
.help-generated img { max-width: 100%; height: auto; }
.help-main :is(h1, h2, h3)[id] {
  scroll-margin-top: max(70px, calc(var(--info-header-height, 56px) + 12px));
}
.help-toc-sticky {
  top: max(70px, calc(var(--info-header-height, 56px) + 12px));
  max-height: calc(100dvh - max(90px, var(--info-header-height, 56px) + 32px));
}
.guide-prompt-downloads { margin-top: 16px; }
/* ---------- Links that leave the guide ----------
   A link into the app, or off the site, was drawn exactly like a link to the
   next chapter -- the one thing it is not. The reader clicks expecting more
   reading and lands in the app instead. The arrow marks the difference. */
.help-main a[href^="/app"]::after,
.help-main a[href^="http"]::after {
  font-family: 'AppIcons';
  content: '\EA99';
  display: inline-block;
  margin-left: 4px;
  font-size: 0.86em;
  vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
}

/* A line whose whole content is "open the app" is not prose, it is the button
   at the end of an instruction, so it is drawn as one. */
.help-main p:has(> a[href^="/app"]:only-child) {
  margin: 20px 0;
}

.help-main p > a[href^="/app"]:only-child {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  border-bottom: none;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

.help-main p > a[href^="/app"]:only-child:hover {
  background: var(--primary-light);
  border-bottom: none;
}

.guide-loading { color: var(--text-muted); }
.guide-error > h2 { margin-top: 0; }
.guide-error .action-row { margin-bottom: 0; }

/* Narrow widths: the contents come from the floating button (.help-toc-fab),
   which shares the site's mobile FAB and side sheet with the changelog. Only
   the parts that differ from a version list are set here. */
@media (max-width: 760px) {
  /* The label is where the reader is now, and a chapter title can be long, so
     it gets a third of the screen and an ellipsis after that. The button has
     to stay a button, not grow into a bar across the page. */
  .help-toc-fab .help-toc-fab-here {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw / 3);
  }

  .help-toc-sheet .help-toc-sheet-list ul { list-style: none; margin: 0; padding: 6px 0; }
  .help-toc-sheet .help-toc-sheet-list li { margin: 0; }
  .help-toc-sheet .help-toc-sheet-list a {
    display: block;
    padding: 10px 18px;
    color: var(--text);
    font-size: 0.95em;
    line-height: 1.5;
    border-bottom: none;
  }
  .help-toc-sheet .help-toc-sheet-list a.toc-h3 { padding-left: 34px; font-size: 0.9em; }
  .help-toc-sheet .help-toc-sheet-list a:hover { color: var(--primary); }
  .help-toc-sheet .help-toc-sheet-list a.active {
    color: var(--primary);
    background: var(--primary-bg);
    font-weight: 500;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}