@layer component{.accordion{--accordion-padding: var(--s-card-pad-md, var(--s-space-md));--accordion-gap: var(--s-card-gap-sm, var(--s-stack-2xs));--accordion-toggle-pad-y: var(--s-atom-pad-y, var(--s-space-2xs));--accordion-toggle-min: 3rem;--accordion-content-gap: var(--s-stack-xs, var(--s-space-sm));--accordion-icon-box: 1.25rem;--accordion-icon-size: 1.25rem;--accordion-icon-bg: var(--s-accent);--accordion-icon-color: var(--s-text-inv);--accordion-radius: var(--s-radius-lg, 12px);--acc-pad: var(--accordion-padding);--acc-gap: var(--accordion-gap);--acc-bg-hover: var(--sf-bg-hover, var(--s-overlay-10));--acc-ring: var(--focus-ring, var(--s-accent));--acc-ring-offset: 3px;--acc-icon-box: var(--accordion-icon-box);--acc-icon-size: var(--accordion-icon-size);--acc-icon-bg: var(--accordion-icon-bg);--acc-icon-color: var(--accordion-icon-color);--acc-toggle-gap: var(--s-atom-gap, var(--s-inline-xs, var(--s-space-xs)));--accordion-content-gap: var(--s-card-gap-md, var(--s-stack-xs, var(--s-space-sm)));color:var(--sf-text, var(--surface-text));background:var(--sf-bg, var(--s-overlay-5));border:1px solid var(--sf-bd, var(--s-overlay-25));border-radius:var(--sf-radius, var(--accordion-radius));box-shadow:var(--sf-shadow, none);backdrop-filter:blur(var(--sf-blur, 3px)) saturate(var(--sf-sat, 120%));-webkit-backdrop-filter:blur(var(--sf-blur, 3px)) saturate(var(--sf-sat, 120%));background-clip:padding-box;padding:var(--acc-pad);display:flex;flex-direction:column;gap:var(--acc-gap);width:100%;min-width:0;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.accordion{backdrop-filter:none;-webkit-backdrop-filter:none}}@media (hover:hover){.accordion:hover{background-color:var(--acc-bg-hover)}}.accordion:focus-within{border-color:var(--acc-ring)}.accordion-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:0;cursor:pointer;padding:var(--accordion-toggle-pad-y) 0;min-height:var(--accordion-toggle-min);gap:var(--acc-toggle-gap);color:inherit;font:inherit;border-radius:inherit;-webkit-tap-highlight-color:transparent}.accordion-toggle:focus:not(:focus-visible){outline:none}.accordion-toggle:focus-visible{outline:2px solid var(--acc-ring);outline-offset:var(--acc-ring-offset)}@supports selector(:has(*)){.accordion:has(.accordion-toggle:focus-visible){border-color:var(--acc-ring)}}.accordion-title{flex:1;min-width:0;text-align:left;overflow-wrap:anywhere;transition:transform .25s ease}@media (hover:hover){.accordion:hover .accordion-title{transform:translate(8px)}}.accordion-icon{width:var(--acc-icon-box);height:var(--acc-icon-box);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--s-radius-2xl);background-color:var(--acc-icon-bg);color:var(--acc-icon-color);flex:0 0 auto}.accordion-icon svg{width:var(--acc-icon-size);height:var(--acc-icon-size);display:block;transition:transform .2s ease}.accordion-toggle[aria-expanded=true] .accordion-icon svg{transform:rotate(180deg)}.accordion-content{color:inherit;opacity:.85;line-height:var(--lh-relaxed, 1.6);padding-top:var(--acc-content-gap)}.accordion .accordion-content[hidden]{display:none}@media (prefers-reduced-motion: reduce){.accordion,.accordion-title,.accordion-icon svg{transition:none!important;transform:none!important}}}@layer component{.b-accordion{--b-max: 72rem;--b-px: var(--s-section-pad-x, var(--s-space-xl));--b-gap: var(--s-block-gap-lg, var(--s-stack-lg));--b-items-gap: var(--s-block-gap-md, var(--s-stack-md));--b-header-gap: var(--s-stack-2xs, var(--s-space-2xs));--b-icon-size: 20px;--b-py: 0;padding-block:var(--b-py);min-width:0}.b-accordion__inner{width:100%;max-width:var(--b-max);margin-inline:auto;padding-inline:var(--b-px);box-sizing:border-box;min-width:0}.b-accordion__head{display:flex;flex-direction:column;align-items:var(--b-head-align, center);text-align:var(--b-head-text, center);gap:var(--b-header-gap);margin:0;min-width:0;overflow-wrap:anywhere}.b-accordion__head:empty{display:none}.b-accordion__group{display:flex;flex-direction:column;gap:var(--b-gap);min-width:0}.b-accordion__group [data-accordion-items]{display:grid;gap:var(--b-items-gap);min-width:0}.b-accordion__group [data-accordion-items][data-items-mode=stack]{gap:0}.b-accordion[data-width=wide]{--b-max: 80rem}.b-accordion[data-width=normal]{--b-max: 72rem}.b-accordion[data-width=narrow]{--b-max: 60rem}.b-accordion[data-width=full]{--b-max: none}.b-accordion[data-align=left]{--b-head-align: flex-start;--b-head-text: left}.b-accordion[data-align=center]{--b-head-align: center;--b-head-text: center}.b-accordion[data-align=right]{--b-head-align: flex-end;--b-head-text: right}.b-accordion[data-padding=none]{--b-py: 0}.b-accordion[data-padding=sm]{--b-py: var(--s-stack-lg, var(--s-space-2xl))}.b-accordion[data-padding=md]{--b-py: var(--s-section-pad-y, var(--s-space-fluid-lg))}.b-accordion[data-padding=lg]{--b-py: var(--s-space-fluid-4xl, var(--s-space-3xl))}.b-accordion[data-gap=none]{--b-gap: 0}.b-accordion[data-gap=sm]{--b-gap: var(--s-block-gap-sm, var(--s-stack-sm))}.b-accordion[data-gap=md]{--b-gap: var(--s-block-gap-md, var(--s-stack-md))}.b-accordion[data-gap=lg]{--b-gap: var(--s-block-gap-lg, var(--s-stack-lg))}@media (max-width: 40rem){.b-accordion{--b-px: var(--s-inline-sm, var(--s-space-sm));--b-gap: var(--s-stack-xl, var(--s-space-xl))}}}
