/* FamilyLine Help Pages */

body { background: #f0f2f5; }

.help-container {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* Header */
.help-header {
  background: #fff;
  border-radius: 10px;
  padding: 28px 28px 20px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.help-header h1 { margin: 0 0 6px; font-size: 1.6rem; color: #1a1a1a; }
.help-header .subtitle { margin: 0; color: #666; font-size: .95rem; }
.help-header .version-badge {
  display: inline-block; margin-top: 12px;
  background: #e8f4fd; color: #0056b3;
  padding: 3px 10px; border-radius: 12px; font-size: .82rem; font-weight: 500;
}

/* TOC */
.toc {
  background: #fff;
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.toc h2 { margin: 0 0 12px; font-size: 1rem; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 6px; }
.toc a { color: #007bff; text-decoration: none; font-size: .95rem; }
.toc a:hover { text-decoration: underline; }

/* Sections */
.help-section {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.help-section h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  color: #1a1a1a;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f2f5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #007bff; color: #fff; font-size: .85rem; font-weight: 700;
  flex-shrink: 0;
}
.help-section h3 { font-size: 1rem; color: #333; margin: 20px 0 10px; }
.help-section p { margin: 0 0 12px; color: #444; }
.help-section ul, .help-section ol { padding-left: 20px; margin: 0 0 12px; color: #444; }
.help-section li { margin-bottom: 6px; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 12px 0; counter-reset: step-counter; }
.steps li {
  counter-increment: step-counter;
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 14px;
}
.steps li::before {
  content: counter(step-counter);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #e8f4fd; color: #0056b3;
  font-size: .8rem; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}

/* Note / Warning / Tip boxes */
.note, .warn, .tip {
  border-radius: 6px; padding: 12px 16px; margin: 12px 0;
  font-size: .92rem; display: flex; gap: 10px; align-items: flex-start;
}
.note { background: #e8f4fd; border-left: 4px solid #007bff; color: #004085; }
.warn { background: #fff3cd; border-left: 4px solid #ffc107; color: #6d4c00; }
.tip  { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.note-icon { font-size: 1.1rem; flex-shrink: 0; }

/* Tables */
.help-section table { font-size: .92rem; }
.help-section th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.help-section code {
  background: #f0f2f5; padding: 2px 6px; border-radius: 4px;
  font-family: monospace; font-size: .9em;
}

/* Status pills */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: .82rem; font-weight: 600;
}
.pill-green { background: #d4edda; color: #155724; }
.pill-grey  { background: #e9ecef; color: #495057; }
.pill-blue  { background: #cce5ff; color: #004085; }
.pill-yellow{ background: #fff3cd; color: #856404; }

/* Back link */
.back-link { display: inline-block; margin-bottom: 16px; color: #007bff; text-decoration: none; font-size: .9rem; }
.back-link:hover { text-decoration: underline; }

/* Footer */
.help-footer { text-align: center; color: #aaa; font-size: .82rem; margin-top: 24px; }

@media (max-width: 600px) {
  .help-section { padding: 18px 16px; }
  .help-header  { padding: 20px 16px 16px; }
  .toc          { padding: 14px 16px; }
  .help-header h1 { font-size: 1.3rem; }
}