/* Collapsible cards. The heading row is the toggle. Empty sections are closed
   in the HTML (Fold.php) so the first paint is already the right height. */

.panel.fold,
form.panel.fold-shell {
  padding: 0;
}
form.panel.fold-shell > details.fold {
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.mon-menu > .panel.fold {
  padding: 0;
}

details.fold > .fold-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  color: inherit;
  touch-action: manipulation;
}
details.fold > .fold-summary::-webkit-details-marker { display: none; }
details.fold > .fold-summary::marker { content: ""; }
details.fold > .fold-summary:focus { outline: none; }
details.fold > .fold-summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 12px;
}
details.fold > .fold-summary h2,
details.fold > .fold-summary h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.fold-chevron {
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
  translate: 0 -0.12em;
}
details.fold[open] > .fold-summary .fold-chevron {
  transform: rotate(45deg);
  translate: 0 0.08em;
}

details.fold[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
/* Newer browsers wrap everything after <summary> in a ::details-content box,
   which then became one grid item next to the summary: on wide sections (line
   items) the heading was squeezed to 0px and drawn over the first "Item" label.
   display: contents puts the tools and body back on the grid. */
details.fold[open]::details-content { display: contents; }
details.fold[open] > .fold-summary { grid-column: 1; grid-row: 1; }
details.fold[open]:not(:has(.fold-tools)) > .fold-summary { grid-column: 1 / -1; }
details.fold[open] > .fold-tools {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  padding: 8px 16px 8px 0;
}
details.fold[open] > .fold-body {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0 16px 16px;
  min-width: 0;
}
details.fold[open] > .fold-summary { padding-bottom: 8px; }

.fold-tools .button { white-space: nowrap; }
.fold-tools form { margin: 0; }

.fold-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}

/* Hold bodies until the external fold.js has applied the remembered state.
   That script is parser-blocking, right after the page content, and drops
   html.fold-boot before the next paint (in a finally, so a throw still drops it).
   Failsafe: if fold.js never runs (blocked, 404, offline), the bodies show
   anyway after 2s. Opacity, not display, because opacity can be animated in
   every browser; no !important so the animation can win. */
html.fold-boot details.fold > .fold-body,
html.fold-boot details.fold > .fold-tools {
  opacity: 0;
  animation: fold-boot-failsafe 0s linear 2s forwards;
}

@keyframes fold-boot-failsafe {
  to { opacity: 1; }
}

@media (max-width: 640px) {
  details.fold[open]:has(.fold-tools) { grid-template-columns: minmax(0, 1fr); }
  details.fold[open] > .fold-tools {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    padding: 0 16px 8px;
  }
  details.fold[open] > .fold-body { grid-row: 3; }
}

@media (scripting: none) {
  html.fold-boot details.fold > .fold-body,
  html.fold-boot details.fold > .fold-tools {
    opacity: 1 !important;
    animation: none;
  }
}

@media print {
  .fold-toolbar { display: none !important; }
  html.fold-boot details.fold > .fold-body,
  html.fold-boot details.fold > .fold-tools { opacity: 1 !important; animation: none; }
  details.fold,
  details.fold[open] { display: block !important; }
  details.fold > .fold-summary { display: flex !important; }
  html.fold-boot details.fold > .fold-tools,
  html.fold-boot details.fold > .fold-body,
  details.fold > .fold-tools,
  details.fold > .fold-body {
    display: block !important;
    content-visibility: visible !important;
  }
  .fold-chevron { display: none !important; }
}