/* Publication components shared by every crawler-facing Scribe Origins help document. */
.help-doc-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin: 0 0 var(--space-lg);
  font-size: 0.9rem;
}

.help-doc-breadcrumbs a,
.help-doc-meta a,
.help-doc-authority-note a,
.help-doc-sources a,
.help-doc-related a,
.help-doc-language-card a,
.help-doc-profile a {
  /* --theme-ink is a static per-language value, not a token that flips with light/dark mode. */
  color: var(--text-color);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.help-doc-breadcrumbs [aria-current="page"] {
  font-weight: 700;
}

.help-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: center;
  margin: calc(var(--space-lg) * -1) 0 var(--space-xl);
  padding: var(--space-md) 0;
  border-top: var(--border-soft);
  border-bottom: var(--border-soft);
  font-size: 0.92rem;
}

.help-doc-meta span:not(:last-child)::after {
  content: "•";
  margin-left: var(--space-lg);
  opacity: 0.55;
}

.help-doc-authority-note,
.help-doc-key-points,
.help-doc-sources,
.help-doc-related,
.help-doc-profile {
  margin: 0 0 var(--space-4xl);
  padding: var(--pad-card-xl);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-card-top), var(--surface-card-bottom));
  box-shadow: var(--shadow-soft);
  /* Same reason as the link color below: --theme-ink doesn't flip with this card's background. */
  color: var(--text-color);
}

.help-doc-authority-note {
  border-left: 0.3rem solid var(--theme-accent);
}

.help-doc-authority-note p:last-child,
.help-doc-key-points > :last-child,
.help-doc-sources > :last-child,
.help-doc-related > :last-child,
.help-doc-profile > :last-child {
  margin-bottom: 0;
}

.help-doc-key-points ul,
.help-doc-sources ul,
.help-doc-related ul {
  margin-bottom: 0;
}

.help-doc-sources li + li,
.help-doc-related li + li {
  margin-top: var(--space-sm);
}

.help-doc-sources ul,
.help-doc-related ul {
  padding-inline-start: 1.2em;
}

.help-doc-sources li::marker,
.help-doc-related li::marker {
  color: var(--theme-accent);
}

.help-doc-sources li,
.help-doc-related li {
  line-height: 1.55;
}

/* Bare tables had zero CSS, so columns kept their content's natural width and overflowed mobile. */
.help-doc table,
.help-section-content table {
  width: 100%;
  margin: var(--space-lg) 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.help-doc th,
.help-doc td,
.help-section-content th,
.help-section-content td {
  padding: var(--space-sm);
  border: var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.help-doc thead,
.help-section-content thead {
  font-weight: 700;
}

.help-doc-source-note {
  font-size: 0.92rem;
  opacity: 0.86;
}

.help-doc-language-grid,
.help-doc-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
}

.help-doc-language-card,
.help-doc-profile-card {
  padding: var(--space-lg);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-card-bottom);
}

.help-doc-language-card h3,
.help-doc-profile-card h3 {
  margin-top: 0;
}

.help-doc-language-card p:last-child,
.help-doc-profile-card p:last-child {
  margin-bottom: 0;
}

.help-doc-profile-mark {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-md);
  border: var(--border-soft);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.help-doc-status {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
}

.help-doc [id] {
  scroll-margin-top: var(--space-4xl);
}

.help-doc a:focus-visible {
  outline: 0.16rem solid var(--theme-accent);
  outline-offset: 0.18rem;
  border-radius: var(--radius-sm);
}

/* Back-to-app control in the static help topbar. Each help page's inline style dims every topbar
   link to opacity 0.85, so this needs the extra class specificity to read as the one exit control
   rather than plain text. (2026-07-27) */
.help-doc-topbar a.help_doc_back {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--text-color);
  border-radius: var(--radius-pill);
  font-weight: 700;
  opacity: 1;
}

@media (max-width: 700px) {
  .help-doc-language-grid,
  .help-doc-profile-grid {
    grid-template-columns: 1fr;
  }

  .help-doc-meta {
    display: grid;
    gap: var(--space-xs);
  }

  .help-doc-meta span:not(:last-child)::after {
    content: "";
    margin: 0;
  }

  /* table-layout: fixed splits narrow phones into 4 equal ~90px columns, breaking words mid-word at the base font size. */
  .help-doc th,
  .help-doc td,
  .help-section-content th,
  .help-section-content td {
    padding: var(--space-2xs);
    font-size: 0.8rem;
  }
}

@media print {
  .help-doc-breadcrumbs,
  .help-doc-related,
  .help-doc footer {
    display: none;
  }

  .help-doc-authority-note,
  .help-doc-key-points,
  .help-doc-sources,
  .help-doc-profile {
    box-shadow: none;
    break-inside: avoid;
  }
}