.seccol > .seccol__d { margin: 0; }
.seccol__sum {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 12px;
cursor: pointer;
list-style: none;
border-radius: 10px;
margin: -4px;
padding: 4px;
transition: background 0.14s ease;
}
.seccol__sum::-webkit-details-marker { display: none; }
.seccol__sum::marker { content: ""; }
@media (hover: hover) and (pointer: fine) {
.seccol__sum:hover { background: rgba(10, 132, 255, 0.05); }
}
.seccol__sum:focus-visible {
outline: 2px solid rgba(10, 132, 255, 0.7);
outline-offset: 2px;
}
.seccol__sum > .section-label { grid-column: 1; margin: 0 0 2px; }
.seccol__sum > h3 { grid-column: 1; margin: 0; }
.seccol__chev {
grid-column: 2;
grid-row: 1 / span 2;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
background: #fff;
color: #5b6b86;
font-size: 13px;
line-height: 1;
transition: transform 0.18s ease, border-color 0.14s ease;
}
@media (hover: hover) and (pointer: fine) {
.seccol__sum:hover .seccol__chev { border-color: rgba(10, 132, 255, 0.45); }
}
.seccol__d[open] .seccol__chev { transform: rotate(180deg); }
.seccol__d:not([open]) .seccol__sum::after {
content: "Show";
grid-column: 2;
grid-row: 1 / span 2;
justify-self: end;
margin-right: 34px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8a93a0;
}
.seccol__body { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
.seccol__sum, .seccol__chev { transition: none; }
}