/* FOMO Buster appendix: plain list rendering inside <details class="app">.
   The theme styles every .page-content ol as a numbered section grid
   (3.25rem counter gutter + content column). That rule also matched the
   appendix's ol.raw-list, dropping each item's .raw-meta div into the
   narrow gutter so words broke mid-word. These unlayered rules beat the
   theme's @layer overrides and scope the fix to the appendix only. */

.page-content details.app {
  margin-bottom: 0.75rem;
}

.page-content details.app > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: 0.35rem 0;
}

.page-content details.app > summary::-webkit-details-marker {
  display: none;
}

.page-content details.app > summary::before {
  content: "+ ";
  color: var(--amber);
  font-weight: 700;
}

.page-content details.app[open] > summary::before {
  content: "\2013  ";
}

.page-content details.app .app-title {
  font-weight: 600;
}

.page-content details.app .app-count {
  font-size: 0.85rem;
  color: var(--foreground2);
  font-weight: 400;
}

.page-content details.app ol.raw-list {
  display: block;
  list-style: none;
  margin: 0.25rem 0 1rem;
  padding: 0;
  counter-reset: none;
}

.page-content details.app ol.raw-list > li {
  display: block;
  padding: 0.6rem 0;
  border-top: 1px solid var(--background3);
  counter-increment: none;
}

.page-content details.app ol.raw-list > li::before {
  content: none;
}

.page-content details.app ol.raw-list > li:first-child {
  border-top: none;
}

.page-content details.app ol.raw-list > li:last-child {
  border-bottom: none;
}

.page-content details.app .raw-meta {
  font-size: 0.85rem;
  color: var(--foreground2);
}