/* Help modal — extracted from inline styles in app/views/help/*.haml,
   following the tools/prompt_rules.css pattern. Everything is scoped to the
   modal (.help-overlay / .help-content), so nothing leaks to other pages. */

/* ── Modal shell (show.html.haml) ──────────────────────────────────────── */

.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem clamp(.75rem, 4vw, 3rem);
  overflow-y: auto;
}

.help-modal {
  background: #fff;
  border-radius: .75rem;
  max-width: min(1100px, 95vw);
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.help-modal__header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.help-modal__header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #111827; }

.help-modal__close {
  padding: .25rem .625rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: .375rem;
  cursor: pointer;
  font-size: .875rem;
}

.help-content { padding: 1.5rem; font-size: .9rem; line-height: 1.7; color: #374151; }

/* ── Headings ──────────────────────────────────────────────────────────── */

.help-content h3 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; color: #111827; }
.help-content h3:has(+ .help-kicker) { margin-bottom: .5rem; }

/* Uppercase subtitle under the h3 (e.g. "Beta · Proof of Concept") */
.help-kicker {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.help-content h4 { margin: 1rem 0 .5rem; font-size: .875rem; font-weight: 600; color: #374151; }

/* Smaller group labels directly above a definition grid (analyze_product_images) */
.help-content h4:has(+ dl),
.help-content h4:has(+ .help-note) { margin-bottom: .25rem; font-size: .8125rem; }

/* Section divider line (tickets_prompt_pipeline) */
.help-content hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.25rem 0 1rem; }
.help-content hr + h4 { margin-top: 0; }

/* ── Text ──────────────────────────────────────────────────────────────── */

.help-content p { margin: 0 0 .75rem; }

/* Bold mini-headline between paragraphs */
.help-sub { margin: .5rem 0 .4rem; font-size: .8125rem; font-weight: 600; color: #374151; }
.help-sub--accent { color: #465A64; margin-bottom: .25rem; }

/* Small gray hint line */
.help-note { margin: 0 0 .25rem; font-size: .8125rem; color: #6B7280; }

/* Inline muted label (e.g. "(Legacy-Referenz)") */
.help-muted { font-weight: 400; color: #9ca3af; }

/* ── Lists ─────────────────────────────────────────────────────────────── */

.help-content ul,
.help-content ol { margin: .25rem 0 .75rem 1.25rem; padding: 0; }
.help-content li { margin-bottom: .4rem; }
.help-content .help-list-sm { font-size: .8125rem; margin-top: .1rem; margin-bottom: .6rem; }

/* Numbered flow with circled digits (beach_deal) */
.help-flow { list-style: none; padding-left: 0; }
.help-flow li { display: flex; gap: .75rem; }
.help-flow__num { font-weight: 700; color: #465A64; min-width: 1.5rem; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.help-content table { width: 100%; font-size: .8125rem; border-collapse: collapse; margin: .25rem 0 .75rem; }
.help-content thead tr { border-bottom: 1px solid #e5e7eb; }
.help-content tbody tr { border-bottom: 1px solid #f3f4f6; }
.help-content tbody tr:last-child { border-bottom: none; }
.help-content th,
.help-content td { text-align: left; padding: .3rem .5rem .3rem 0; }
.help-content th { color: #6b7280; font-weight: 500; white-space: nowrap; }
.help-content td:first-child { font-weight: 500; white-space: nowrap; }
.help-content th.help-right,
.help-content td.help-right { text-align: right; }

/* Key-value table (beach_deal business case) */
.help-kv td:first-child { font-weight: 400; white-space: normal; color: #6b7280; width: 50%; }
.help-kv td:last-child { font-weight: 500; }

/* ── Definition grids (analyze_product_images) ─────────────────────────── */

.help-content dl {
  margin: 0 0 .75rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .75rem;
}
.help-content dt { color: #6B7280; font-size: .8125rem; }
.help-content dd { margin: 0; font-size: .8125rem; }

/* ── Download chips (beach_deal, doc_mixer) ────────────────────────────── */

.help-doclinks { display: flex; gap: .75rem; flex-wrap: wrap; }
.help-doclinks a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: .8125rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
}