/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.look {
    /* The content-area surface. Page content sits inside a rounded, tinted panel held off the page behind it -- the
       treatment a macOS Finder sidebar gives its list, applied to the application's main region.

       A look owns paint only: fill, border, radius and interior inset. It deliberately sets no height, width or overflow,
       because how a surface is sized and whether it scrolls belong to wherever it is placed, not to the theme -- a look
       that dictated those would impose page-chrome layout on every other use of the component. */

    .rspond-surface-content {
        background: var(--rspond-page-background-primary);
        border: var(--rspond-border-width) solid var(--rspond-border-color);
        border-radius: 10px;
        padding: 16px 20px;
    }
}