/* help.css — the Help panel (web/help.js) and the "#help" answer chip / note
 * (app.js addHelpGuideChip). Theme tokens only (web/style.css). */

.help-btn { font-weight: 700; }

/* Appended to <body> after app.js's modals: stacks above Manage / Job settings. */
.help-backdrop { z-index: 60; }
.help-modal { max-width: 820px; height: 84vh; }
.help-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.help-list-view, .help-guide-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.help-list-view[hidden], .help-guide-view[hidden] { display: none; }

.help-search {
  margin: 12px 16px 6px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px;
}
.help-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.help-empty { padding: 18px 2px; color: var(--text-dim); font-size: 13px; }
.help-cat { margin-top: 12px; }
.help-cat-title {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-faint);
}
.help-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.help-item {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer;
}
.help-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.help-item-title { font-size: 13.5px; font-weight: 600; }
.help-item-summary { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

.help-guide-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.help-guide-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 20px;
  font-size: 13.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere;
}
.help-guide-summary { color: var(--text-dim); font-style: italic; }
.help-guide-body p { margin: 0 0 10px; }
.help-guide-body h2 { font-size: 1.12em; margin: 18px 0 8px; line-height: 1.3; }
.help-guide-body h3 { font-size: 1.02em; margin: 14px 0 6px; }
.help-guide-body ul, .help-guide-body ol { margin: 0 0 10px; padding-left: 22px; }
.help-guide-body li { margin-bottom: 4px; }
.help-guide-body a { color: var(--accent); text-underline-offset: 2px; }
.help-guide-body table { border-collapse: collapse; margin: 10px 0; font-size: 12.5px; display: block; overflow-x: auto; }
.help-guide-body th, .help-guide-body td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.help-guide-body th { background: var(--surface-2); }
.help-guide-body code:not(pre code) {
  background: var(--surface-2); border: 1px solid var(--border-soft); padding: 1px 5px; border-radius: 5px;
  font-size: 0.88em; font-family: var(--font-mono);
}

/* The answer's "Guide: <title>" chip (a button) and the "No guide used" note. */
.help-guide-chip { cursor: pointer; border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); font: inherit; font-size: 11.5px; }
.help-guide-chip:hover { filter: brightness(1.1); }
.help-guide-note { font-size: 11.5px; color: var(--text-faint); font-style: italic; align-self: center; }

@media (max-width: 640px) {
  .help-backdrop { padding: 0; }
  .help-modal { max-width: none; height: 100%; max-height: none; border-radius: 0; border: none; }
  .help-search { margin: 10px 12px 4px; }
  .help-list { padding: 4px 12px 14px; }
  .help-guide-bar { padding: 8px 12px; }
  .help-guide-body { padding: 12px 14px 18px; }
}