@layer components {
/* Stack — vertical wrap for arbitrary children, with an optional dividers
   mode. Rendered via the handler.wrap() + {% apply %} pattern:

       {% apply handler.wrap("stack") %}
           <div>Row A</div>
           <div>Row B</div>
       {% end %}

       {% apply handler.wrap("stack", show_dividers=True) %}
           <div>Row A</div>
           <div>Row B</div>
           <div>Row C</div>
       {% end %}

       {% apply handler.wrap("stack", show_dividers=True, spacing="loose") %}
           <div>Row A</div>
           <div>Row B</div>
       {% end %}

   Distinct from `.o-stack`, the no-props CSS-only layout primitive in
   objects/. psw-stack is the wrap-style component you reach for when you
   want a hairline between rows (settings lists, transaction history, etc.). */

.psw-stack {
    --psw-stack-gap: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--psw-stack-gap);
}

.psw-stack--dense {
    --psw-stack-gap: var(--space-3);
}

.psw-stack--loose {
    --psw-stack-gap: var(--space-6);
}

/* Dividers mode: replace the flexbox `gap` with explicit margin+padding+
   border on every non-first child so the 1px line sits centered in the
   selected spacing rhythm. Using gap alone would leave the line flush
   against the next child's top edge rather than centered. */
.psw-stack--with-dividers {
    gap: 0;
}
.psw-stack--with-dividers > * + * {
    margin-top: var(--psw-stack-gap);
    padding-top: var(--psw-stack-gap);
    border-top: 1px solid var(--color-gray-200);
}
}