/*
 * Content of a manual page (.km-article). Loaded by the manual pages AND by the in-app help dialog, so everything here
 * is scoped to .km-article, inherits the surrounding text colour and font, and derives tints from currentColor: it
 * works on the light and dark themes of the app and of the manual without knowing which one is active.
 * Logical properties only (margin-inline-start, …) so Arabic (dir="rtl") needs no extra rule.
 */
.km-article {
  --km-accent: var(--km-brand, #2e2585);
  --km-line: color-mix(in srgb, currentColor 16%, transparent);
  --km-soft: color-mix(in srgb, currentColor 5%, transparent);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.km-article h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.5rem; }
.km-article h2 { font-size: 1.3rem; line-height: 1.3; margin: 2rem 0 0.75rem; scroll-margin-top: 5rem; }
.km-article h3 { font-size: 1.08rem; margin: 1.5rem 0 0.5rem; scroll-margin-top: 5rem; }
.km-article p, .km-article ul, .km-article ol { margin: 0 0 0.9rem; }
.km-article ul, .km-article ol { padding-inline-start: 1.4rem; }
.km-article li + li { margin-top: 0.3rem; }
.km-article a { color: var(--km-accent); text-underline-offset: 2px; }
.km-article code {
  font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--km-soft);
  border: 1px solid var(--km-line);
}
.km-article .km-lead { font-size: 1.08rem; opacity: 0.85; margin-bottom: 1rem; }
.km-article .km-ui {
  font-weight: 600; white-space: nowrap; padding: 0.05em 0.4em; border-radius: 4px;
  border: 1px solid var(--km-line); background: var(--km-soft);
}
.km-article .km-plans { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.9rem; opacity: 0.9; }
.km-article .km-plan {
  font-size: 0.8rem; font-weight: 600; padding: 0.1em 0.6em; border-radius: 999px;
  color: var(--km-accent); border: 1px solid color-mix(in srgb, var(--km-accent) 45%, transparent);
}
.km-article .km-shot { margin: 1rem 0 1.5rem; }
.km-article .km-shot img {
  display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--km-line);
  box-shadow: 0 2px 10px color-mix(in srgb, currentColor 8%, transparent);
}
.km-article .km-shot figcaption { font-size: 0.85rem; opacity: 0.75; margin-top: 0.4rem; }
.km-article .km-table { overflow-x: auto; margin: 0 0 1rem; }
.km-article table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.km-article th, .km-article td { text-align: start; vertical-align: top; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--km-line); }
.km-article th { font-weight: 600; background: var(--km-soft); }
.km-article .km-callout {
  margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid var(--km-line);
  border-inline-start: 4px solid var(--km-callout, var(--km-accent)); background: var(--km-soft);
}
.km-article .km-callout > :last-child { margin-bottom: 0; }
.km-article .km-callout-title { font-weight: 700; margin-bottom: 0.3rem; }
.km-article .km-tip { --km-callout: #1a7f5a; }
.km-article .km-note { --km-callout: #2f6fd1; }
.km-article .km-warning { --km-callout: #c47a00; }
.km-article .km-tax { --km-callout: #7a3fc2; }
.km-article .km-related { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--km-line); }
.km-article .km-related h2 { font-size: 1rem; margin-top: 0; }