/* assets/css/components/sections.css — <x-section> family.
   Card surfaces use the Direction C treatment: radius + resting/hover shadow,
   no border (internal hairlines keep var(--border-subtle)). */
.x-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: box-shadow .15s;
    margin-bottom: var(--spacing-5);
    overflow: hidden;
}
.x-section:hover,
.x-section:focus-within { box-shadow: var(--shadow-2); }
.x-section__title {
    display: flex; align-items: center; gap: var(--spacing-2-5);
    font-family: var(--font-family-heading);
    font-weight: 700; font-size: 1.1rem;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.x-section__summary {
    font-weight: 400; font-size: 0.85rem;
    color: var(--text-tertiary);
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-section__chevron {
    margin-left: auto; flex-shrink: 0;
    transition: transform .15s;
}
.x-section[aria-expanded="true"] .x-section__chevron { transform: rotate(180deg); }
.x-section--collapsible > .x-section__title { cursor: pointer; }
.x-section--collapsible:not([aria-expanded="true"]) > .x-section__body { display: none; }
.x-section__body { padding: var(--spacing-5); }