/* ============================================
   coc_character_examples.html — Page-Specific Styles
   ============================================ */

/* --- Skill System --- */
.skill-categories {
  margin: var(--space-md) 0;
}

.skill-category {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* --- Occupation Examples --- */
.occupations-backgrounds,
.occupation-examples {
  margin: var(--space-md) 0;
}

.occupation {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-accent);
}

/* --- Sanity System --- */
.sanity-system,
.sanity-mechanics {
  margin: var(--space-md) 0;
}

.sanity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.sanity-item {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid #f87171;
}

/* --- Investigation Groups --- */
.investigation-groups {
  margin: var(--space-md) 0;
}

.investigation-group {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* --- Character Stats --- */
.character-stats {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

/* --- Combat --- */
.combat-realities,
.combat-survival {
  margin: var(--space-md) 0;
}

.combat-reality {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid #ef4444;
}

/* --- Era Settings --- */
.era-considerations,
.era-settings {
  margin: var(--space-md) 0;
}

.era-setting {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid #8b5cf6;
}

/* --- Group Composition Chart --- */
.group-composition-chart {
  margin: var(--space-lg) 0;
}

/* --- Individual Characters Section --- */
.individual-characters {
  margin: var(--space-md) 0;
}

/* --- Tips --- */
.tips-and-tricks {
  margin: var(--space-md) 0;
}

.tip {
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-left: 4px solid #eab308;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sanity-grid {
    grid-template-columns: 1fr;
  }
}