/* The profession list on the home folds on a phone (Oct 16 2026, lane 2, directory Part B item 4).
   Measured Oct 15 on the Modern home at 390 px: the first person started about 2,030 px down an 8,136 px page,
   under a 25-row list of professions. On a phone the list is one line, "All N professions", that opens; from 720 px
   the list is open and the line is hidden. Theme neutral: it uses no colour of its own (currentColor and the
   directory's own tokens). No script is needed to fold; ud-board-fold.js only opens the list when a link points at it. */

.ud-board-fold__details > summary.ud-board-fold__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 4px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    border-top: 1px solid var(--ud-line, currentColor);
    border-bottom: 1px solid var(--ud-line, currentColor);
    background: transparent;
}
.ud-board-fold__details > summary.ud-board-fold__summary::-webkit-details-marker { display: none; }
.ud-board-fold__details > summary.ud-board-fold__summary::after {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s ease;
}
.ud-board-fold__details[open] > summary.ud-board-fold__summary::after { transform: translateY(2px) rotate(-135deg); }
.ud-board-fold__n { font-weight: 400; opacity: 0.8; }
/* The list's own heading repeats the summary on a phone. */
.ud-board-fold__details > h2 { margin-top: 20px; }
@media (max-width: 719px) {
    html .ud-directory__board.ud-board-fold { margin-top: 0; padding: 20px 0 4px; border-top: 0; }
    html .ud-directory__board.ud-board-fold .ud-board { margin-top: 12px; }
    .ud-board-fold__details:not([open]) > h2 { display: none; }
}
/* From 720 px the list is open on its own and the line is not needed. A browser that cannot do this (it has no
   ::details-content) keeps the closed line at every width, which still reaches the list. */
@media (min-width: 720px) {
    @supports selector(::details-content) {
        .ud-board-fold__details > summary.ud-board-fold__summary { display: none; }
        .ud-board-fold__details::details-content { content-visibility: visible; display: block; }
        .ud-board-fold__details > h2 { margin-top: 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .ud-board-fold__details > summary.ud-board-fold__summary::after { transition: none; }
}