/* Help (js/views/help.js, #/help and #/help/<article>): the help center built from
   js/docs-content.js. Shared tokens and components are in /styles.css (docs/ui-notes-v2.md).
   Every class made here starts with "help-"; none of them is in the interim block of
   styles.css. Plain ASCII only. */

/* ------------------------------------------------------------------ the index */
/* One column below 1200 px, in the order a newcomer needs it: In an emergency, Start here, the
   search and the articles, then the tour and the common questions. From 1200 px, two columns:
   Start here beside the emergency, then the articles beside the tour and the questions. */
.help-center { min-width: 0; }
.help-grid { display: grid; gap: 16px; }
.help-grid > .panel + .panel { margin-top: 0; }
@media (min-width: 720px) { .help-grid { gap: 24px; } }
@media (min-width: 1200px) {
  .help-grid {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    grid-template-areas: "start stop" "library side";
    align-items: start;
  }
  .help-start { grid-area: start; align-self: stretch; }
  .help-stop { grid-area: stop; align-self: stretch; }
  .help-library { grid-area: library; }
  .help-side { grid-area: side; }
}
.help-side { min-width: 0; }

/* Start here: five lines, each with a mark for what it is about. They are not a sequence, so
   they have no numbers. The colour line shows the four lamps it names. */
.help-start-list { margin: 0; padding: 0; list-style: none; }
.help-start-line { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--rule); }
.help-start-line:first-child { padding-top: 0; border-top: 0; }
.help-start-text { max-width: 40em; }
.help-start-mark { display: inline-flex; justify-content: center; padding-top: 2px; color: var(--slate); }
.help-start-stop .help-start-mark { color: var(--bad); }
.help-lamps { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; padding-top: 3px; }
.help-lamps .lamp { width: 13px; height: 13px; }
.help-start .actions { margin-top: 12px; }

/* Search. */
.help-search { margin: 0 0 16px; }
.help-search > label { display: block; margin: 0 0 4px; font-weight: 700; }
.help-search > .hint { max-width: 40em; }
.help-search input[type="search"] { max-width: 36em; }
.help-results:focus { outline: none; }
.help-count { margin: 0 0 4px; color: var(--slate); font-size: 14px; }
.help-count:empty { display: none; }

/* What a glossary term means, above the list while searching. */
.help-answers { max-width: 44em; margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: var(--accent-tint); }
.help-answer + .help-answer { margin-top: 10px; }
.help-answers dt { font-weight: 700; }
.help-answers dd { margin: 2px 0 0; }

/* A list of articles: the title as the link, the summary or the line that matched under it. */
.help-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.help-list > li { border-bottom: 1px solid var(--rule); }
.help-list > li:last-child { border-bottom: 0; }
.help-item { display: grid; gap: 2px; min-height: var(--tap); padding: 12px 0; color: var(--ink); text-decoration: none; }
.help-item:hover { color: var(--ink); text-decoration: none; }
.help-item-title { color: var(--accent); font-size: 17px; font-weight: 700; line-height: 1.35; }
.help-item:hover .help-item-title { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.help-item-text { max-width: 44em; color: var(--slate); font-size: 14px; }
.help-item-where { color: var(--ink); font-weight: 700; }
.help-mark { padding: 0 1px; border-radius: 3px; background: var(--accent-tint); color: inherit; font-weight: 700; }

/* Side panels. */
.actions.help-buttons { flex-direction: column; align-items: stretch; }
@media (min-width: 720px) and (max-width: 1199px) { .actions.help-buttons { flex-direction: row; align-items: center; } }
.help-stop p + p { margin-top: 8px; }

/* Questions that open one answer at a time. */
.help-faq { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.help-faq > li { border-bottom: 1px solid var(--rule); }
.help-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tap);
  padding: 10px 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}
.help-q > summary::-webkit-details-marker { display: none; }
.help-q > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
}
.help-q[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.help-q > summary:hover { color: var(--accent); }
.help-q > summary:hover::after { border-color: var(--accent); }
.help-q > p { max-width: 44em; margin: 0 0 14px; }
.help-questions .actions { margin-top: 16px; }

/* ------------------------------------------------------------------ an article */
/* The article on a white panel; on wide screens the list of its headings stays beside it. */
.help-doc { display: grid; gap: 16px; }
@media (min-width: 1200px) { .help-doc-toc { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; } }
.panel.help-article { padding: 20px 16px 24px; }
@media (min-width: 720px) { .panel.help-article { padding: 28px 32px 32px; } }

.help-toc { display: none; }
.help-toc-title { margin: 4px 0 6px 14px; color: var(--slate); font-size: 13px; font-weight: 700; }
.help-toc .help-toc-list { margin: 0; padding: 0; list-style: none; }
.help-toc-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.help-toc-link:hover { background: var(--hover); color: var(--accent); }
.help-toc-phone { margin: -4px 0 16px; }
.help-toc-phone .help-toc-list { list-style: none; }
@media (min-width: 1200px) {
  .help-toc { position: sticky; top: 96px; display: block; }
  .help-toc-phone { display: none; }
}

/* Sections. Their headings are moved to from the list, so they clear the sticky top bar. */
.help-sec { max-width: 44em; scroll-margin-top: 76px; }
@media (min-width: 960px) { .help-sec { scroll-margin-top: 96px; } }
.help-sec + .help-sec { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.help-sec > h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.help-sec > p { margin: 0 0 12px; }
.help-sec > :last-child { margin-bottom: 0; }

/* Steps that are a real sequence, numbered like keypad keys (as in the Overview welcome). */
.help-steps { display: grid; gap: 12px; margin: 4px 0 16px; padding: 0; list-style: none; }
.help-steps > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.help-step-n {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.help-steps p { margin: 3px 0 0; }
.help-step-text { min-width: 0; }

/* A command to type: its own box, words never split at a hyphen (a long one scrolls inside the
   box), and a Copy button. The body face, as everywhere else. */
.help-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--mist); }
.help-code-text { flex: 1 1 16em; min-width: 0; margin: 0; overflow-x: auto; overflow-wrap: normal; font-size: 15px; font-weight: 700; }
.help-copy { flex: none; }

/* A worked example, set apart from the text around it. */
.help-example { margin: 4px 0 12px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--mist); }
.help-example-title { margin: 0 0 4px; color: var(--slate); font-size: 14px; font-weight: 700; }
.help-example p:last-child { margin: 0; }

.help-related { max-width: 44em; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.help-related > h2 { margin: 0 0 8px; font-size: 18px; }

/* The Glossary: term and meaning, side by side where there is room. */
.help-terms { margin: 0; border-top: 1px solid var(--rule); }
.help-term { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.help-term:last-child { border-bottom: 0; }
.help-term dt { font-weight: 700; }
.help-term dd { max-width: 44em; margin: 2px 0 0; }
@media (min-width: 720px) {
  .help-term { display: grid; grid-template-columns: minmax(150px, 28%) minmax(0, 1fr); gap: 0 24px; }
  .help-term dd { margin: 0; }
}
.help-article-faq .help-faq { max-width: 52em; border-top: 0; }

.help-missing { margin: 0; }

/* ---------------------------------------------------------------- the full tour (js/tour.js) */
/* The card is a .tour (styles.css: its edge, its pointer and where it sits) with a chapter line,
   "Step 12 of 58", Chapters, Skip, Back and Next. With no element to point at it sits in the
   middle of the window, and the ring only dims the page. */
.tour.gt { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 16px); overflow: auto; }
.tour.gt:focus { outline: none; }
.tour.gt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour.gt.is-centre::before { display: none; }
.tour-ring.is-empty { box-shadow: 0 0 0 9999px var(--tour-dim); }
.gt-where { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.gt-chapter { color: var(--accent); }
.gt-count { color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour.gt h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.tour.gt p#gt-text { line-height: 1.5; }
.gt-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 14px; }
.gt-links, .gt-moves { display: flex; align-items: center; gap: 12px; }
.gt-moves { gap: 8px; margin-left: auto; }
.gt-moves .btn { min-width: 76px; }

/* The chapters, opened from the card. */
.gt-list { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.gt-list-head { margin: 0 0 6px; color: var(--slate); font-size: 13px; font-weight: 700; }
.gt-list ol { display: grid; gap: 2px; max-height: 42vh; margin: 0; padding: 0; overflow: auto; list-style: none; }
.gt-ch {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 4px 8px;
  border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; text-align: left;
}
.gt-ch:hover { background: var(--hover); }
.gt-ch[aria-current="step"] { background: var(--accent-tint); color: var(--accent); font-weight: 700; }
.gt-ch-n {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 4px; background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 700;
}
.gt-ch-name { flex: 1; min-width: 0; }
.gt-ch-size { flex: none; color: var(--slate); font-size: 12px; font-weight: 400; }

/* Help: the tour, its chapters and Resume. */
.help-tour-lead { margin: 0 0 12px; }
.help-resume { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--accent-edge, var(--accent)); border-radius: 6px; background: var(--accent-tint); }
.help-resume p { margin: 0 0 8px; }
.help-chapters { display: grid; gap: 2px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); list-style: none; }
.help-chapters-head { margin: 16px 0 0; font-weight: 700; }
.help-chapters + .actions { margin-top: 12px; }
.help-chapter {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 4px 8px;
  border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; text-align: left;
}
.help-chapter:hover { background: var(--hover); }
.help-chapter-n {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 4px; background: var(--mist); font-size: 12px; font-weight: 700;
}
.help-chapter-name { flex: 1; min-width: 0; font-weight: 700; }
.help-chapter-size { flex: none; color: var(--slate); font-size: 13px; }

/* Overview: the tour, offered once. */
.tour-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 16px; }
.tour-offer h2 { margin: 0 0 4px; font-size: 18px; }
.tour-offer p { margin: 0; max-width: 40em; color: var(--slate); }
.tour-offer .actions { margin: 0; }