/*
    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. The search
    box is .sv-search and .sv-input, which every other search in the product wears; what is stated
    here is where it sits and how wide it is, never what a control looks like.

    NOTHING `help-search.js` HIDES MAY BE GIVEN A `display` HERE WITHOUT SAYING `hidden` OUT LOUD
    BESIDE IT. The attribute's own user-agent rule is one selector and loses to any rule in this file
    that sets display, so the element stays on the page with nothing reporting it - a search that has
    swapped the page for its results and left the section grid under them. The elements are
    .sv-help-find, .sv-help-results, .sv-help-results__none, .sv-help__filter, .sv-help__filter-none
    and the two the module toggles by data attribute; none of them is given a display today, which is
    why there is no such rule below.
*/

/* 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: 1200px;
  margin: 0 auto;
  padding: var(--sv-space-6) var(--sv-space-5) var(--sv-space-7);
  align-items: start;
}

/* THE DOCUMENT LEADS WITH THE CONTENT AND THE RAIL FOLLOWS IT, which is the order a phone reads.
   Stacked in source order the full twelve-section table of contents stood between the reader and
   the article they had just tapped - two screens of navigation on a 390px phone before the word
   Designer appeared. Placing the columns explicitly here rather than reordering with `order` keeps
   the document and the page in the same sequence at every width, so a keyboard and a screen reader
   meet the article where the eye does. */
@media (min-width: 861px) {
  .sv-help__sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  .sv-help__main {
    grid-column: 2;
    grid-row: 1;
  }
}

/* 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;
  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;
  cursor: pointer;
  list-style: none;
}

.sv-help__toc-section::-webkit-details-marker {
  display: none;
}

.sv-help__toc-chevron {
  flex: 0 0 auto;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 120ms ease;
}

.sv-help__toc-group[open] > .sv-help__toc-section .sv-help__toc-chevron {
  transform: rotate(45deg);
}

.sv-help__toc-section-title {
  flex: 1 1 auto;
  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);
  text-decoration: none;
}

.sv-help__toc-count:hover {
  color: var(--sv-text);
  text-decoration: none;
}

.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;
  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: 52rem;
}

/* ── 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 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(min(100%, 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.

   THE NAME IS THE HEADING AND IT IS SET AS ONE. Twelve cards whose titles were the eyebrow step -
   ten pixels of uppercase mono in the tertiary grey - and whose summaries were larger and darker
   put the twelve most important words on the page at the bottom of its type hierarchy, and a
   reader scanning for a section had nothing to scan. The step is .sv-h3 on the markup, like every
   other card head in the product; what is stated here is only its ink. */
.sv-help-section-card > span {
  display: block;
}

.sv-help-section-card__title {
  color: var(--sv-text);
}

.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, box-shadow 120ms ease;
}

.sv-help-section-card:hover {
  border-color: var(--sv-accent-fill);
  box-shadow: var(--sv-shadow-sheet);
  text-decoration: none;
  color: inherit;
}

/* THE COUNT AND THE WAY IN, ON ONE LINE. The arrow is what makes a card read as
   somewhere to go rather than a panel of text; it is decoration and the markup
   hides it from a screen reader, which has the link itself. Matched by two
   classes because `.sv-help-section-card > span` is a class and a type and would
   otherwise keep this row `display: block`. */
.sv-help-section-card > .sv-help-section-card__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-3);
  color: var(--sv-text-tertiary);
}

.sv-help-section-card__arrow {
  color: var(--sv-text-faint);
  transition: transform 120ms ease, color 120ms ease;
}

.sv-help-section-card:hover .sv-help-section-card__arrow {
  color: var(--sv-accent);
  transform: translateX(3px);
}

.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-wireframe {
  border-style: dashed;
}

/* Reviewed date sits under the lead, quiet enough not to compete with the title. */
.sv-help-reviewed {
  margin-top: var(--sv-space-2);
  color: var(--sv-text-faint);
}

.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);
  padding-left: var(--sv-space-3);
  border-left: 3px solid var(--sv-accent-fill);
}

.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-4);
  padding-left: 1.25rem;
}

.sv-help-body ol > li + li,
.sv-help-body ul > li + li {
  margin-top: var(--sv-space-2);
}

.sv-help-body ol > li::marker {
  color: var(--sv-accent);
  font-family: var(--sv-font-mono);
  font-weight: 500;
}

/* ── Product captures ─────────────────────────────────────────────────────────
   LIGHT UI ON A LIGHT PAGE WASHES OUT without a frame. The figure is the
   capture's own surface: raised pad, stronger edge, sheet shadow, caption from
   the alt text the loader promotes. A bare img (SVG diagram, older markup) still
   gets the edge so it does not float.
   ------------------------------------------------------------------------ */
.sv-help-figure {
  margin: var(--sv-space-5) 0;
  padding: var(--sv-space-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-overlay);
  box-shadow: var(--sv-shadow-sheet);
}

.sv-help-figure img,
.sv-help-body > p:has(> img:only-child) > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-control);
  background: var(--sv-bg-raised);
}

.sv-help-body > p:has(> img:only-child) {
  margin: var(--sv-space-5) 0;
  padding: var(--sv-space-2);
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-overlay);
  box-shadow: var(--sv-shadow-sheet);
}

.sv-help-figure__caption {
  margin: var(--sv-space-2) var(--sv-space-1) var(--sv-space-1);
  font: 400 12px/1.4 var(--sv-font-sans);
  color: var(--sv-text-tertiary);
}

.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);
}

/* Tips read as a callout, not another plain list under a heading. */
.sv-help-body h2#tips-and-common-mistakes + ul {
  list-style: none;
  margin: 0 0 var(--sv-space-5);
  padding: var(--sv-space-4);
  border: 1px solid var(--sv-border-subtle);
  border-radius: var(--sv-radius-card);
  background: var(--sv-bg-raised);
}

.sv-help-body h2#tips-and-common-mistakes + ul > li {
  position: relative;
  padding-left: var(--sv-space-4);
}

.sv-help-body h2#tips-and-common-mistakes + ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--sv-accent-fill);
}

.sv-help-body h2#tips-and-common-mistakes + ul > li + li {
  margin-top: var(--sv-space-3);
  padding-top: var(--sv-space-3);
  border-top: 1px solid var(--sv-border-subtle);
}

/* Related articles are destinations, so each row is a link surface. */
.sv-help-body h2#related + ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sv-space-2);
}

.sv-help-body h2#related + ul > li {
  margin: 0;
  padding: 0;
}

.sv-help-body h2#related + ul a {
  display: block;
  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: var(--sv-text);
  text-decoration: none;
  transition: border-color 120ms ease;
}

.sv-help-body h2#related + ul a:hover {
  border-color: var(--sv-accent-fill);
  color: var(--sv-text);
  text-decoration: none;
}

.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%;
  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;
  transition: border-color 120ms ease;
}

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

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

/* ── The box that takes the word ──────────────────────────────────────────────
   IN THE HERO, BECAUSE IT IS WHAT THE PAGE IS FOR. A help centre's first
   question is "where is the thing I want", and answering it with twelve boxes
   and no field is how a reader ends up reading section summaries to guess.
   The scrim behind it is dark and the control is the product's ordinary light
   input, so it stands off the photograph without a treatment of its own.

   THE FACE IS THE CONTROL'S AND ONLY THE BOX GROWS. A hero field wants more
   presence than a filter row's; a bigger type size would be this screen setting
   itself differently from every other, so what changes is the padding.
   ------------------------------------------------------------------------ */
.sv-help-find {
  margin-top: var(--sv-space-5);
}

/* MATCHED BY TWO CLASSES, because `.sv-search` and `.sv-input` are SearchBox's own and
   utilities.css declares them. One class here would tie on specificity and lose to the file
   loaded first, and a hero box would silently be the filter row's 320px. */
.sv-help-find .sv-search {
  max-width: 32rem;
  box-shadow: var(--sv-shadow-panel);
}

.sv-help-find .sv-input {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The hub's own step off the hero, stated here rather than inline on the page. */
.sv-help-hub {
  padding-top: var(--sv-space-6);
}

/* Where the browse column resumes after the way in. */
.sv-help-start + .sv-help-hub__browse {
  margin-top: var(--sv-space-7);
}

/* ── The way in ───────────────────────────────────────────────────────────────
   THE ONE WARM BLOCK ON THE PAGE, and it earns that by being the answer to the
   commonest arrival: somebody who has never opened the product and does not yet
   know which of twelve sections they want. Numbered, because the order is the
   content - these four read as a path and not as four more cards.

   TWO COLUMNS RATHER THAN AS MANY AS FIT. The container caps at 1120px, so a
   24rem track resolves to two at every width the panel is drawn at and to one
   below the phone breakpoint - which is what keeps an even list square. Wider
   tracks fitted three across and left the fourth alone on a row of its own,
   which reads as a card that failed to load rather than as the end of a path.

   AND IT FLOORS AT min(100%, 24rem), which is the rule STYLES.md states for any
   track inside a bounded box. A plain minimum demands its 384px whatever the
   container has, so on a 390px phone the panel was 25px wider than the document
   and the whole page - navigation, cards, footer - scrolled sideways behind it.
   ------------------------------------------------------------------------ */
.sv-help-start {
  list-style: none;
  margin: var(--sv-space-5) 0 0;
  padding: var(--sv-space-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 2px;
  border: 1px solid var(--sv-accent-fill);
  border-radius: var(--sv-radius-panel);
  background: var(--sv-accent-wash);
}

.sv-help-start__link {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-3);
  height: 100%;
  padding: var(--sv-space-3);
  border-radius: var(--sv-radius-card);
  color: inherit;
  text-decoration: none;
}

.sv-help-start__link:hover {
  background: var(--sv-bg-raised);
  color: inherit;
  text-decoration: none;
}

.sv-help-start__step {
  flex: 0 0 auto;
  color: var(--sv-accent);
}

.sv-help-start__body {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  min-width: 0;
}

/* ── What a search answered with ──────────────────────────────────────────────
   The results ARE the page while a term is present, so they take the column the
   section grid had rather than hanging over it. Nothing to dismiss, nothing
   layered, and the way back is emptying the box.
   ------------------------------------------------------------------------ */
.sv-help-results__none {
  margin: var(--sv-space-5) 0 0;
  max-width: 62ch;
}

/* Which section a result came out of. It sits under the summary rather than
   beside the title, because the title is what is being scanned and a second
   piece of chrome on that line is what makes a list of results hard to read. */
.sv-help-result__where {
  margin-top: var(--sv-space-1);
  color: var(--sv-text-faint);
}

/* ── The rail's filter ────────────────────────────────────────────────────────
   Narrows the contents where they stand. Full width of the rail, because the
   rail is already the narrow column and a 320px control inside a 250px panel
   would be the one thing on the page that overflows it.
   ------------------------------------------------------------------------ */
.sv-help__filter {
  margin: 0 0 var(--sv-space-3);
}

.sv-help__filter .sv-search {
  max-width: none;
}

.sv-help__filter-none {
  margin: var(--sv-space-3) 0 0;
  padding: 0 var(--sv-space-2);
}

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

  /* Nothing to stick to once it is at the foot of the page, and a panel that scrolls inside a page
     that scrolls is two scrolls under one thumb. Headings stay; each is a disclosure so other
     sections can be opened without leaving. */
  .sv-help__sidebar {
    position: static;
    max-height: none;
    margin-top: var(--sv-space-6);
  }
}

/* ── The phone ────────────────────────────────────────────────────────────────
   TWELVE CARDS STACKED IS TWELVE BORDERS DOWN A PHONE, and a card grid that has
   run out of columns is not a grid any more - it is a list wearing a grid's
   chrome, three metres of white boxes with a stranded arrow on each. Twelve
   rows and a rule between them: the same rows, and the eye is given one edge to
   follow instead of twelve.

   THE DESK IS UNTOUCHED. Every rule here is inside the query, so a phone
   SUBTRACTS the card from the grid rather than the grid being built up from a
   phone.
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .sv-help-section-grid {
    gap: 0;
  }

  /* NO SURFACE AT ALL, RATHER THAN ONE BIG ONE. A raised fill, a bordered box, a card radius and
     `overflow: hidden` written together IS `.sv-card--flush` under another name, and
     `SectionSurfaceGuardTests` is right to refuse it. It is also not what a phone wants: rows on
     the page's own ground, ruled apart and aligned with the heading above them, read as an index -
     a box around them is one more edge inside a screen that is already one column wide. */
  .sv-help-section-card {
    border-width: 0 0 1px;
    border-radius: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .sv-help-section-card:last-child {
    border-bottom-width: 0;
  }

  /* A row is pressed, not hovered. What said "you are on this one" was the border going amber, and
     a row whose only border is the rule under it would say it to the row beneath. */
  .sv-help-section-card:hover {
    border-color: var(--sv-border-subtle);
    background: var(--sv-bg-overlay);
  }

  /* The way in is the whole row on a touch screen, so the arrow is one more thing to look at and
     nothing to press. The count keeps the line to itself. */
  .sv-help-section-card__arrow {
    display: none;
  }

  /* THE SAME DECISION, ON THE OTHER TWO LISTS THIS CENTRE DRAWS: a section's articles, and what a
     search answered with. They are the same rows in the same column at the same width, and a
     screen that ruled one apart and boxed the other would be two answers to one question. */
  .sv-help-article-list {
    gap: 0;
  }

  .sv-help-article-link {
    border-width: 0 0 1px;
    border-radius: 0;
    background: none;
    padding-left: 0;
    padding-right: 0;
  }

  .sv-help-article-list > li:last-child .sv-help-article-link {
    border-bottom-width: 0;
  }

  .sv-help-article-link:hover {
    border-color: var(--sv-border-subtle);
  }
}