/* fold v2: plus-minus (2026-10-01) */
/* fold.css: styles for the Loomwest fold standard (fold.js). Colours inherit from the site; override the custom
   properties per site if needed. Open by default; the button reads as part of the heading, with a small "Fold" or
   "Open" hint and a plus or minus at the right.
   v2 (Andre 2026-10-01 morning): the chevron became a plus and minus in a small rounded square, the look of the
   Command Center's "Records out of sync" toggle: a minus while the section is open (the hint reads "Fold"), a plus
   while it is folded (the hint reads "Open"). The button's aria-expanded drives it; the icon itself is aria-hidden. */
.fold-head { margin: 0; }
.fold-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.fold-btn:focus-visible { outline: 3px solid var(--fold-focus, currentColor); outline-offset: 4px; border-radius: 4px; }
.fold-label { flex: 1 1 auto; }
.fold-hint {
  flex: 0 0 auto; font-size: .8rem; font-weight: 600; letter-spacing: .02em; opacity: .75;
  font-family: var(--fold-hint-font, inherit); text-transform: none;
}
/* the plus and minus: a 24px square with a 1px border (so the 22px inside centres a 2px bar on whole pixels) and two
   bars drawn in the icon's own colour; the upright bar is there only while folded */
.fold-icon {
  flex: 0 0 auto; position: relative; box-sizing: border-box; width: 24px; height: 24px; margin-right: 2px;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 55%, transparent); border-radius: 7px;
}
.fold-icon::before, .fold-icon::after {
  content: ""; position: absolute; left: 6px; top: 10px; width: 10px; height: 2px; border-radius: 1px;
  background: currentColor; transition: transform .2s ease;
}
.fold-icon::after { transform: rotate(90deg) scaleX(0); }
.fold-btn[aria-expanded="false"] .fold-icon::after { transform: rotate(90deg); }
.fold-btn:hover .fold-icon { background: color-mix(in srgb, currentColor 10%, transparent); }
.fold-summary { margin: 6px 0 0; opacity: .8; font-size: .95em; }
.fold-all-wrap { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.fold-all {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; border: 1.5px solid currentColor; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600;
}
.fold-all:focus-visible { outline: 3px solid var(--fold-focus, currentColor); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fold-icon::after { transition: none; } }
@media print { .fold-body[hidden] { display: block !important; } .fold-btn .fold-hint, .fold-btn .fold-icon, .fold-all-wrap { display: none; } }
