/* Plenix master spec · one card layout for every block (loaded after the other spec styles; see spec-layout.js).
   A card: white, a thin gray border, 8px corners, its title inside at the top, content below. Example cards: the title
   on its own line with "Show code" on the right, the product and source file in a small line under it, the example in a
   light well. The page background is unchanged. */
.ds-group,.ds-table-card,.ds-motion-block,.ds-example,.ds-lab-bar,.ds-specimen{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-subtle);border-bottom-left-radius:var(--plx-sys-radius-surface-8px);border-bottom-right-radius:var(--plx-sys-radius-surface-8px);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-subtle);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-subtle);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-subtle);border-top-left-radius:var(--plx-sys-radius-surface-8px);border-top-right-radius:var(--plx-sys-radius-surface-8px);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);box-shadow:none;margin-block-end:var(--plx-ref-space-16px);margin-block-start:0;overflow-x:hidden;overflow-y:hidden;}
.ds-group,.ds-table-card,.ds-motion-block,.ds-specimen{padding-block-end:var(--plx-ref-space-16px);padding-block-start:var(--plx-ref-space-16px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);}
/* card titles: one style everywhere */
.ds-group>h3,.ds-table-card>.ds-table-title,.ds-motion-block>.ds-table-title{color:var(--plx-sys-content-default);font-size:var(--plx-ref-font-size-14);font-weight:var(--plx-ref-font-weight-semibold-600);letter-spacing:0;margin-block-end:var(--plx-ref-space-12px);margin-block-start:0;text-transform:none;}
.ds-motion-block>.ds-motion-lead{margin-block-start:calc(var(--plx-ref-space-8px) * -1);}
/* example cards */
.ds-example{padding-block-end:var(--plx-ref-space-16px);}
.ds-example-head{align-items:center;background-color:transparent;background-image:none;border-bottom-style:none;border-bottom-width:0;column-gap:var(--plx-ref-space-8px);display:flex;flex-wrap:wrap;font-size:var(--plx-ref-font-size-14);font-weight:var(--plx-ref-font-weight-semibold-600);padding-block-end:var(--plx-ref-space-12px);padding-block-start:var(--plx-ref-space-16px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);row-gap:var(--plx-ref-space-4px);}
.ds-example-head::after{content:'';flex-basis:100%;height:0;order:2;}

.ds-example-head .ds-tag{align-items:center;display:inline-flex;font-size:var(--plx-ref-font-size-10);margin-inline-end:0;margin-inline-start:0;min-height:var(--plx-sys-label-height-20px);order:3;padding-block-end:0;padding-block-start:0;padding-inline-end:var(--plx-ref-space-8px);padding-inline-start:var(--plx-ref-space-8px);}
.ds-example-head code{color:var(--plx-sys-content-subtle);font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-11);font-weight:var(--plx-ref-font-weight-regular-400);margin-inline-start:0;order:4;}
.ds-example>.ds-frame,.ds-example>.ds-live,.ds-example>pre.ds-code,.ds-example>.ds-lab-anatomy-body,.ds-example>.ds-lab-css{border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);border-top-left-radius:var(--plx-sys-radius-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);box-sizing:border-box;margin-inline-end:var(--plx-ref-space-16px);margin-inline-start:var(--plx-ref-space-16px);width:calc(100% - var(--plx-ref-space-32px));}
.ds-example>.ds-frame{border-bottom-color:var(--plx-sys-border-subtle);border-bottom-style:var(--plx-ref-border-style-solid);border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-subtle);border-left-style:var(--plx-ref-border-style-solid);border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-subtle);border-right-style:var(--plx-ref-border-style-solid);border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-subtle);border-top-style:var(--plx-ref-border-style-solid);border-top-width:var(--plx-ref-border-width-1px);}
.ds-example>pre.ds-code,.ds-example>.ds-lab-css{margin-block-start:var(--plx-ref-space-12px);}
/* the side-by-side comparison keeps its two columns of cards */
/* tiles inside a card are lighter, so they read as items of the card */
.ds-group .ds-card,.ds-motion-block .ds-motion-card,.ds-motion-block .ds-motion-lanes{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-subtle);border-left-color:var(--plx-sys-border-subtle);border-right-color:var(--plx-sys-border-subtle);border-top-color:var(--plx-sys-border-subtle);}
.ds-motion-block .ds-mk-stage,.ds-motion-block .ds-motion-track{background-color:var(--plx-sys-surface-default);background-image:none;}
.ds-group .ds-space-table{background-color:transparent;background-image:none;}
.ds-lab-bar{padding-block-end:var(--plx-ref-space-12px);padding-block-start:var(--plx-ref-space-12px);padding-inline-end:var(--plx-ref-space-16px);padding-inline-start:var(--plx-ref-space-16px);}
:where(:root[data-plx-mode="dark"]) .ds-group,:where(:root[data-plx-mode="dark"]) .ds-table-card,:where(:root[data-plx-mode="dark"]) .ds-motion-block,:where(:root[data-plx-mode="dark"]) .ds-example,:where(:root[data-plx-mode="dark"]) .ds-lab-bar,:where(:root[data-plx-mode="dark"]) .ds-specimen{background-color:var(--plx-sys-surface-default);border-bottom-color:var(--plx-sys-border-default);border-left-color:var(--plx-sys-border-default);border-right-color:var(--plx-sys-border-default);border-top-color:var(--plx-sys-border-default);}
:where(:root[data-plx-mode="dark"]) .ds-example-head{background-color:transparent;}
:where(:root[data-plx-mode="dark"]) .ds-group>h3,:where(:root[data-plx-mode="dark"]) .ds-table-card>.ds-table-title,:where(:root[data-plx-mode="dark"]) .ds-motion-block>.ds-table-title{color:var(--plx-sys-content-on-media);}
:where(:root[data-plx-mode="dark"]) .ds-example-head code{color:var(--plx-sys-content-muted);}
:where(:root[data-plx-mode="dark"]) .ds-example>.ds-frame,:where(:root[data-plx-mode="dark"]) .ds-example>.ds-live{border-bottom-color:var(--plx-sys-border-default);border-left-color:var(--plx-sys-border-default);border-right-color:var(--plx-sys-border-default);border-top-color:var(--plx-sys-border-default);}
:where(:root[data-plx-mode="dark"]) .ds-group .ds-card,:where(:root[data-plx-mode="dark"]) .ds-motion-block .ds-motion-card,:where(:root[data-plx-mode="dark"]) .ds-motion-block .ds-motion-lanes{background-color:var(--plx-sys-surface-canvas);border-bottom-color:var(--plx-sys-border-default);border-left-color:var(--plx-sys-border-default);border-right-color:var(--plx-sys-border-default);border-top-color:var(--plx-sys-border-default);}
:where(:root[data-plx-mode="dark"]) .ds-motion-block .ds-mk-stage,:where(:root[data-plx-mode="dark"]) .ds-motion-block .ds-motion-track{background-color:var(--plx-sys-surface-default);}
/* an inner card lifted out into its own page card (partsOf in spec.js): the page card is its frame now */
.ds-lifted{background-color:transparent;background-image:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;}
/* the shell header height drawn as a small frame: the header band at its real height above the page */
.ds-shell-mini{border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-surface-4px);border-bottom-right-radius:var(--plx-sys-radius-surface-4px);border-bottom-style:solid;border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-default);border-left-style:solid;border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-default);border-right-style:solid;border-right-width:var(--plx-ref-border-width-1px);border-top-color:var(--plx-sys-border-default);border-top-left-radius:var(--plx-sys-radius-surface-4px);border-top-right-radius:var(--plx-sys-radius-surface-4px);border-top-style:solid;border-top-width:var(--plx-ref-border-width-1px);display:flex;flex-direction:column;inline-size:var(--plx-ref-size-240px);overflow-x:hidden;overflow-y:hidden;}
.ds-shell-mini__head{background-color:var(--plx-sys-accent-surface);flex-shrink:0;}
.ds-shell-mini__body{background-color:var(--plx-sys-surface-sunken);block-size:var(--plx-ref-size-60px);}