/*
    THE CUSTOMER HELP CENTRE'S OWN STYLESHEET.

    Everything /help draws and nothing else. Its consumers are Components/Pages/Help/HelpHub.razor,
    HelpSection.razor and HelpArticle.razor, which each link it: the public shell carries the site's
    own chrome and three hundred lines of help furniture is not part of it.

    THE TABLE OF CONTENTS IS THE FULL CATALOGUE, with the active section expanded underneath. The
    flat "every section except this one" list it replaces was unreadable by the time the catalogue
    had a dozen sections.

    WHAT IT DOES NOT OWN. The page hero at the top of the hub is public-site.css's, and
    .sv-container, .sv-section and .sv-lead are shared with the rest of the public site.
*/

/* Section / article layout */
.sv-help {
  display: grid;
  grid-template-columns: minmax(15.5rem, 17.5rem) minmax(0, 1fr);
  gap: var(--sv-space-6);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sv-space-6) var(--sv-space-5) var(--sv-space-7);
  align-items: start;
}

/* Sticky TOC panel */
.sv-help__sidebar {
  position: sticky;
  top: calc(var(--sv-space-5) + 3.25rem);
  max-height: calc(100vh - 6.5rem);
  overflow: auto;
  padding: var(--sv-space-3);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-panel);
  background: var(--sv-bg-raised);
  min-width: 0;
}

.sv-help__sidebar-home {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  font: 500 12px/1.3 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  padding: var(--sv-space-1) var(--sv-space-2);
  margin: 0 0 var(--sv-space-3);
  border-radius: var(--sv-radius-control);
}

.sv-help__sidebar-home:hover {
  color: var(--sv-text);
  text-decoration: none;
  background: var(--sv-bg-overlay);
}

.sv-help__sidebar-home-arrow {
  font-family: var(--sv-font-mono);
  opacity: 0.7;
}

.sv-help__toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--sv-border-subtle);
  padding-top: var(--sv-space-3);
}

.sv-help__toc-group {
  min-width: 0;
}

.sv-help__toc-group.is-active {
  margin-bottom: var(--sv-space-2);
}

.sv-help__toc-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-2);
  font: 500 13px/1.35 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  padding: 7px 10px;
  border-radius: var(--sv-radius-control);
  text-decoration: none;
  min-width: 0;
}

.sv-help__toc-section:hover {
  color: var(--sv-text);
  text-decoration: none;
  background: var(--sv-bg-overlay);
}

.sv-help__toc-section.is-active {
  color: var(--sv-text);
  background: var(--sv-accent-wash);
}

.sv-help__toc-count {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sv-text-faint);
}

.sv-help__toc-section.is-active .sv-help__toc-count {
  color: var(--sv-accent);
}

.sv-help__toc-articles {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 2px solid var(--sv-border-subtle);
  margin-left: 10px;
}

.sv-help__toc-group.is-active .sv-help__toc-articles {
  border-left-color: var(--sv-accent-fill);
}

.sv-help__toc-article {
  display: block;
  font: 400 12.5px/1.4 var(--sv-font-sans);
  color: var(--sv-text-tertiary);
  padding: 5px 10px;
  border-radius: var(--sv-radius-control);
  text-decoration: none;
}

.sv-help__toc-article:hover {
  color: var(--sv-text);
  text-decoration: none;
  background: var(--sv-bg-overlay);
}

.sv-help__toc-article.is-active {
  color: var(--sv-accent);
  font-weight: 500;
  background: var(--sv-accent-wash);
}

.sv-help__main {
  min-width: 0;
  max-width: 44rem;
}

/* ── The step from one block of a help page to the next ───────────────────────
   THREE SCREENS DRAW ONE COLUMN - a back link, the page's title, the line under
   it, then what the page actually is - and each stated the same steps in its
   markup, nineteen inline margins across the three. They differ by pair because
   the relationships differ: a title stands off the chrome above it, its summary
   sits close under it, and the body stands well clear of both. The blocks
   themselves - the article list, the routes panel, the body, the pager - carry
   their own step in their own rule above.
   ------------------------------------------------------------------------ */

/* Whatever this page calls itself, it stands off the way back. */
.sv-help__main > .sv-back + * {
  margin-top: var(--sv-space-4);
}

/* The line under the title, on the section page and on the article. */
.sv-help__main > h1 + p,
.sv-help-title-row + p {
  margin-top: var(--sv-space-3);
}

/* The hub's eyebrow over the heading it introduces. */
.sv-label + .sv-h2 {
  margin-top: var(--sv-space-2);
}

/* The wireframe panel says what it is, then why it is empty. */
.sv-help-wireframe > p + p {
  margin-top: var(--sv-space-2);
}

.sv-help-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sv-space-2) var(--sv-space-3);
}

.sv-help-section-grid {
  margin-top: var(--sv-space-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--sv-space-4);
}

/* THE CARD'S THREE LINES: what the section is called, what is in it, and how many articles it
   holds. Spans rather than paragraphs because the whole card is one link, so making them blocks is
   this file's job - `display: block` written in the markup next to a margin is how one card's
   three lines came to be stated per instance. */
.sv-help-section-card > span {
  display: block;
}

.sv-help-section-card > .sv-ui {
  margin-top: var(--sv-space-2);
}

.sv-help-section-card > .sv-small {
  margin-top: var(--sv-space-3);
}

.sv-help-section-card {
  display: block;
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-panel);
  background: var(--sv-bg-raised);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: border-color 120ms ease;
}

.sv-help-section-card:hover {
  border-color: var(--sv-border-strong);
  text-decoration: none;
  color: inherit;
}

.sv-help-article-list {
  list-style: none;
  margin: var(--sv-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-2);
}

.sv-help-article-link {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-raised);
  color: inherit;
  text-decoration: none;
}

.sv-help-article-link:hover {
  border-color: var(--sv-border-strong);
  text-decoration: none;
  color: inherit;
}

.sv-help-article-link__title {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  flex-wrap: wrap;
  font: 500 15px/1.3 var(--sv-font-sans);
}

.sv-help-meta {
  margin-top: var(--sv-space-4);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-control);
  background: var(--sv-bg-raised);
}

.sv-help-covers {
  list-style: none;
  margin: var(--sv-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sv-help-wireframe {
  border-style: dashed;
}

.sv-help-body {
  margin-top: var(--sv-space-6);
  font: 400 15px/1.65 var(--sv-font-sans);
  color: var(--sv-text-secondary);
}

.sv-help-body h2 {
  font: 600 1.15rem/1.3 var(--sv-font-sans);
  color: var(--sv-text);
  margin: var(--sv-space-6) 0 var(--sv-space-3);
}

.sv-help-body h3 {
  font: 600 1rem/1.3 var(--sv-font-sans);
  color: var(--sv-text);
  margin: var(--sv-space-5) 0 var(--sv-space-2);
}

.sv-help-body p {
  margin: 0 0 var(--sv-space-3);
}

.sv-help-body ul,
.sv-help-body ol {
  margin: 0 0 var(--sv-space-3);
  padding-left: 1.25rem;
}

.sv-help-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-control);
  margin: var(--sv-space-3) 0;
}

.sv-help-body a {
  color: var(--sv-accent);
}

.sv-help-pager {
  margin-top: var(--sv-space-7);
  display: flex;
  justify-content: space-between;
  gap: var(--sv-space-4);
  padding-top: var(--sv-space-5);
  border-top: 1px solid var(--sv-border-subtle);
}

.sv-help-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 45%;
  color: inherit;
  text-decoration: none;
}

.sv-help-pager__link:hover {
  text-decoration: none;
  color: var(--sv-text);
}

.sv-help-pager__link--next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 860px) {
  .sv-help {
    grid-template-columns: 1fr;
  }

  .sv-help__sidebar {
    position: static;
    max-height: none;
  }

  /* On small screens keep the active section's articles; collapse the long section list. */
  .sv-help__toc-group:not(.is-active) {
    display: none;
  }
}