/* The chosen visual composition stays primary; deeper tools are opt-in. */
.experience-deep-dive { margin-top: 30px; border-block: 1px solid #dce8df; }
.experience-deep-dive > summary { display: flex; align-items: center; gap: 16px; min-height: 82px; padding-block: 21px; color: var(--deep); list-style: none; cursor: pointer; }
.experience-deep-dive > summary::-webkit-details-marker { display: none; }
.experience-deep-dive > summary > span:first-child { font-size: 16px; font-weight: 550; }
.deep-dive-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.experience-deep-dive > summary > svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 220ms ease; }
.experience-deep-dive[open] > summary > svg { transform: rotate(45deg); }
.experience-deep-dive > summary:hover { color: var(--green); }
.deep-dive-content { padding-top: 20px; padding-bottom: 30px; }
@media (max-width: 600px) {
  .experience-deep-dive > summary { gap: 11px; flex-wrap: wrap; position: relative; padding-right: 30px; }
  .experience-deep-dive > summary > span:first-child { flex-basis: 100%; }
  .deep-dive-hint { margin: 0; }
  .experience-deep-dive > summary > svg { position: absolute; right: 0; top: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-deep-dive > summary > svg { transition: none; }
}
@media print {
  .experience-deep-dive::details-content { content-visibility: visible; display: block; }
  .experience-deep-dive > .deep-dive-content { display: block !important; }
}