/* ==========================================================================
   Help reference (T8b): the contents tree and the topic column of /help/.
   Spec: doc/website-relaunch/design-system-spec.md §3.11. Loaded after ds.css by
   templates/reference-page.html only; tokens come from ds.css.
   Topic bodies are the product's HTML Help topics, unchanged: the rules below
   only keep their tables, code and inline styles inside the column.
   ========================================================================== */

.help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-m) var(--ds-gap);
  padding-block: var(--ds-space-m) var(--ds-section-y);
  align-items: start;
}

/* Contents ------------------------------------------------------------------ */

.help-nav {
  min-width: 0;
  border-bottom: 1px solid var(--ds-line);
}

.help-contents > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.help-contents > summary::-webkit-details-marker {
  display: none;
}

.help-contents[open] > summary .chevron {
  transform: rotate(180deg);
}

.help-nav__head {
  margin: 0 0 8px;
}

.help-nav__head .kicker {
  margin: 0;
}

.help-nav__overview {
  display: inline-block;
  padding: 4px 0;
  color: var(--ds-ink);
  font-size: 14px;
  font-weight: 600;
}

.help-tree,
.help-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-tree {
  padding-bottom: 12px;
}

.help-tree ul {
  margin-left: 12px;
}

.help-tree a {
  display: block;
  padding: 5px 0 5px 10px;
  border-left: 2px solid transparent;
  color: var(--ds-ink-2);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.help-tree a:hover {
  color: var(--ds-ink);
  text-decoration: underline;
}

.help-tree a[aria-current="page"] {
  border-left-color: var(--ds-link);
  color: var(--ds-ink);
  font-weight: 600;
}

.help-tree summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  color: var(--ds-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.help-tree summary::-webkit-details-marker {
  display: none;
}

.help-tree summary .chevron {
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--ds-ink-3);
  transform: rotate(-90deg);
}

.help-tree details[open] > summary .chevron {
  transform: none;
}

.help-tree summary:focus-visible,
.help-tree a:focus-visible,
.help-contents > summary:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

@media (min-width: 960px) {
  .help-layout {
    grid-template-columns: 280px minmax(0, 72ch);
    gap: var(--ds-gap);
    padding-top: var(--ds-space-xl);
  }

  .help-layout--index {
    grid-template-columns: minmax(0, 72ch);
  }

  .help-nav {
    position: sticky;
    top: calc(var(--ds-header-h) + 16px);
    max-height: calc(100vh - var(--ds-header-h) - 32px);
    overflow-y: auto;
    border-bottom: 0;
    padding-right: 8px;
  }

  /* Open and without a toggle on desktop (ds.js opens it); without scripts the summary stays */
  html:not(.no-js) .help-contents > summary {
    display: none;
  }
}

/* Topic --------------------------------------------------------------------- */

.help-topic {
  min-width: 0;
  overflow-wrap: break-word;
}

.help-topic h1 {
  margin: 0 0 var(--ds-space-m);
}

.help-topic h2 {
  margin-top: 1.6em;
  font-size: var(--ds-fs-h2-3);
  line-height: var(--ds-lh-h2-3);
}

.help-topic h3,
.help-topic h4 {
  margin-top: 1.3em;
  font-size: var(--ds-fs-body);
  line-height: 1.4;
}

/* The product's topics carry inline fonts from the CHM: the column's own type wins */
.help-topic [style*="font-family"],
.help-topic [style*="font-size"] {
  font-family: inherit !important;
  font-size: inherit !important;
}

.help-topic [style*="font-weight: bold"] {
  font-weight: 600;
}

.help-topic p,
.help-topic li {
  max-width: none;
}

.help-topic a {
  color: var(--ds-link);
}

.help-topic code {
  font-family: var(--ds-font-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.help-topic code.nowrap {
  overflow-wrap: normal;
  white-space: nowrap;
}

.help-topic pre {
  margin: 0;
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface);
  font-family: var(--ds-font-mono);
  font-size: 13.5px;
  line-height: 1.55;
}

.help-topic img {
  max-width: 100%;
  height: auto;
}

/* Tables scroll inside their own block, never the page */
.help-topic .table-wrap {
  margin-block: var(--ds-space-s);
}

.help-topic .table-wrap:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.help-topic table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.help-topic th,
.help-topic td {
  padding: 8px 12px;
  border: 1px solid var(--ds-line-strong);
  text-align: left;
  vertical-align: top;
}

.help-topic th {
  background: var(--ds-surface);
  font-weight: 600;
}

@media (max-width: 599px) {
  .help-topic table {
    font-size: 14px;
  }

  .help-topic th,
  .help-topic td {
    padding: 8px;
  }
}

.help-topic td p,
.help-topic td ul,
.help-topic td ol {
  margin: 0;
}

/* Overview page */

.help-overview__lead {
  max-width: var(--ds-measure-lead);
  color: var(--ds-ink-2);
  font-size: var(--ds-fs-lead);
  line-height: var(--ds-lh-lead);
}

.help-overview ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-overview li {
  padding: 3px 0;
}

.help-overview ul ul {
  margin: 4px 0 8px 16px;
}

.help-overview h3 {
  margin: 1.2em 0 0.3em;
  font-size: var(--ds-fs-body);
}