/* Help page. Uses the app's theme variables so it looks like the same tool. */

/* The app's .layout is a two-column grid for the tool itself. Help stacks:
   the ask panel spans the width, the contents and body split below it. */
.help-layout-page {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px 64px;
}
.help-layout-page .app-header { margin-bottom: 20px; }

/* --- Ask panel ---------------------------------------------------------- */
.help-ask { padding: 18px 20px; margin-bottom: 22px; }
.help-ask-head h2 { margin: 0 0 2px; font-size: 15px; }
.help-ask-head .subtitle { margin: 0 0 12px; }
.help-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.help-chat:empty { display: none; }
.help-q, .help-a { font-size: 13.5px; line-height: 1.55; }
.help-q { font-weight: 600; }
.help-q::before { content: "Q. "; color: var(--accent); }
.help-a { color: var(--muted); white-space: pre-wrap; }
.help-a a { color: var(--accent); }
.help-a.is-error { color: var(--danger); }
.help-tries { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.help-try {
  padding: 5px 10px; font-size: 12px; line-height: 1.3;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); cursor: pointer;
}
.help-try:hover { color: var(--text); border-color: var(--muted); }
.help-ask-form { display: flex; gap: 8px; }
.help-ask-form .url-field { flex: 1; }
.help-ask-form button { flex: none; }
.help-ask-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* --- Layout ------------------------------------------------------------- */
.help-layout { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .help-layout { grid-template-columns: 15rem 1fr; } }

.help-toc {
  position: sticky; top: 20px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; min-height: 0;
}
@media (max-width: 999px) { .help-toc { position: static; max-height: none; } }
/* Search box. The magnifier is inline SVG rather than a background image so it
   takes currentColor and stays right in every theme. */
.help-search-wrap { position: relative; margin-bottom: 10px; }
.help-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted); pointer-events: none;
}
/* Two classes plus the element, because the base rule reaches this field as
   input[type="search"] - an attribute selector, which outranks a lone class and
   would put the padding back to 11px with the magnifier sitting under the text. */
.help-search-wrap input.help-search { padding-left: 32px; padding-right: 58px; }
.help-search-wrap:focus-within .help-search-icon { color: var(--accent); }

/* Matching sections, so a search that narrows to one says so instead of
   leaving you to count the contents list. */
.help-search-count {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.help-search-count:empty { display: none; }

/* The native clear button is a dark glyph, invisible on a dark ground. Masking
   it with a colour from the theme keeps the affordance and makes it visible. */
.help-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 12px; height: 12px; cursor: pointer;
  background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center / contain no-repeat;
}
.help-search::-webkit-search-cancel-button:hover { background-color: var(--text); }
.help-toc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 999px) { .help-toc-list { max-height: 20rem; } }

.help-toc-group { margin-bottom: 12px; }
.help-toc-group[hidden] { display: none; }
.help-toc-group-label {
  display: block; padding: 0 8px 5px;
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.help-toc-sub { display: flex; flex-direction: column; gap: 1px; }
.help-toc-link {
  display: block; padding: 5px 9px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.35; color: var(--muted); text-decoration: none;
}
.help-toc-link:hover { color: var(--text); background: var(--panel-2); }
.help-toc-link.on { color: var(--accent-text); background: var(--accent); font-weight: 600; }
.help-toc-link[hidden] { display: none; }
.help-toc-empty { padding: 8px 9px; font-size: 12px; color: var(--muted); }

/* --- Sections ----------------------------------------------------------- */
.help-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.help-section { padding: 20px 22px; scroll-margin-top: 18px; }
.help-section[hidden] { display: none; }
.help-h2 { margin: 0 0 4px; font-size: 16px; }
.help-blurb { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.help-p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.62; }
.help-list, .help-steps { margin: 0 0 11px; padding-left: 20px; font-size: 13.5px; line-height: 1.62; }
.help-list li, .help-steps li { margin-bottom: 5px; }
.help-p:last-child, .help-list:last-child, .help-steps:last-child { margin-bottom: 0; }
.help-note {
  margin: 0 0 11px; padding: 9px 12px;
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
  background: var(--panel-2); font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.help-note:last-child { margin-bottom: 0; }
.help-table-wrap { overflow-x: auto; margin: 0 0 11px; }
.help-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.help-table th, .help-table td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.help-table th {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.help-table code { font-size: 12px; }
.help-empty { padding: 18px 4px; color: var(--muted); font-size: 13.5px; }

/* A search hit, so the word you typed is findable in a long section. */
.help-hit { background: var(--accent); color: var(--accent-text); border-radius: 3px; padding: 0 2px; }