/* accordion.css — uniform collapsible <details>/<summary> component.
 * Reusable across visionary.software pages and imported by styles.css.
 *
 * Design constraints:
 * - 100% em and % centric units — zero px anywhere.
 * - Pure flexbox flow — zero overflow: hidden/auto/scroll hacks.
 * - High-contrast phosphor terminal aesthetic matching the site chrome. */

/* ============================================================================
 * Accordion — <details>/<summary> for collapsible sections and commit logs.
 * Dark phosphor-tinted background for high contrast against light prose.
 * Uses em-based borders and border-radius with matching summary corners
 * so no overflow clipping is required.
 * ========================================================================== */

details {
  margin: 0.8em 0;
  border: 0.08em solid rgba(51, 255, 102, 0.3);
  border-radius: 0.4em;
  background: #161a17;
}

details summary {
  cursor: pointer;
  padding: 0.65em 1em;
  font-weight: 600;
  color: #e4e8e5;
  background: #1e2420;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  border-radius: 0.32em;
  transition: background 0.15s ease, color 0.15s ease;
}

details[open] summary {
  border-radius: 0.32em 0.32em 0 0;
  background: #181d19;
  border-bottom: 0.08em solid rgba(51, 255, 102, 0.2);
}

/* Phosphor triangle — rotates on open */
details summary::before {
  content: '▶';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65em;
  color: #39ff14;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  transform-origin: center;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary:hover {
  background: #27302a;
  color: #5dff8c;
}

details > :not(summary) {
  padding: 0 1em;
}

/* Stat badges (diff-stat, count badges, etc.) right-aligned in summary line */
details summary .diff-stat,
details summary .badge {
  margin-left: auto;
  font-size: 0.78em;
  font-weight: 400;
  opacity: 0.85;
  white-space: nowrap;
}

details summary .diff-stat .add {
  color: #5dff8c;
}

details summary .diff-stat .del {
  color: #ff6b68;
}