/* Plenix master spec · Layout system sections (see layout-lab.js) */
.ds-lay-lead{color:var(--plx-sys-content-muted);font-size:var(--plx-ref-font-size-12);margin-block-end:var(--plx-ref-space-12px);margin-block-start:calc(var(--plx-ref-space-8px) * -1);max-width:var(--plx-ref-size-720px);}
.ds-lay-table{border-bottom-color:var(--plx-sys-border-default);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-style:solid;border-top-width:var(--plx-ref-border-width-1px);font-size:var(--plx-ref-font-size-12);}
.ds-lay-table td{vertical-align:top;}
.ds-lay-first{font-weight:var(--plx-ref-font-weight-semibold-600);white-space:nowrap;}
.ds-lay-pre{background-color:var(--plx-sys-surface-default);background-image:none;border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);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-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);border-top-style:solid;border-top-width:var(--plx-ref-border-width-1px);color:var(--plx-sys-content-default);font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-11);margin-block-end:var(--plx-ref-space-12px);margin-block-start:0;overflow-x:auto;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);white-space:pre;}
.ds-lay-form{column-gap:var(--plx-ref-space-16px);display:flex;flex-wrap:wrap;margin-block-end:var(--plx-ref-space-12px);row-gap:var(--plx-ref-space-8px);}
.ds-lay-field{align-items:center;column-gap:var(--plx-ref-space-8px);display:flex;font-size:var(--plx-ref-font-size-12);}
.ds-lay-field input{font-family:var(--plx-sys-font-data);width:var(--plx-ref-size-80px);}
.ds-lay-result{font-family:var(--plx-sys-font-data);font-size:var(--plx-ref-font-size-12);margin-block-end:var(--plx-ref-space-8px);margin-block-start:0;}
.ds-lay-cols{column-gap:var(--plx-ref-space-4px);display:grid;height:var(--plx-ref-size-24px);margin-block-start:var(--plx-ref-space-12px);}
.ds-lay-cols span{background-color:var(--plx-sys-feedback-danger-soft);background-image:none;border-bottom-left-radius:var(--plx-ref-radius-0px);border-bottom-right-radius:var(--plx-ref-radius-0px);border-top-left-radius:var(--plx-ref-radius-0px);border-top-right-radius:var(--plx-ref-radius-0px);}
.ds-lay-previews{column-gap:var(--plx-ref-space-16px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--plx-ref-space-16px);}
.ds-lay-preview-title{font-size:var(--plx-ref-font-size-12);font-weight:var(--plx-ref-font-weight-semibold-600);margin-block-end:var(--plx-ref-space-8px);text-transform:capitalize;}
.ds-lay-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);display:block;height:var(--plx-ref-size-300px);width:100%;}
.ds-lay-h4{font-size:var(--plx-ref-font-size-13);margin-block-end:var(--plx-ref-space-4px);margin-block-start:var(--plx-ref-space-12px);}
:where(:root[data-plx-mode="dark"]) .ds-lay-lead{color:var(--plx-sys-content-muted);}
:where(:root[data-plx-mode="dark"]) .ds-lay-pre{background-color:var(--plx-sys-surface-default);color:var(--plx-sys-content-default);}
/* these tables wrap: unlike the spacing table, their second column holds sentences */
.ds-lay-table td:nth-child(2),.ds-lay-table th:nth-child(2){white-space:normal;width:auto;}
.ds-scroll-demo{background-color:var(--plx-sys-surface-default);block-size:var(--plx-ref-size-160px);border-bottom-color:var(--plx-sys-border-default);border-bottom-left-radius:var(--plx-sys-radius-surface-8px);border-bottom-right-radius:var(--plx-sys-radius-surface-8px);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-8px);border-top-right-radius:var(--plx-sys-radius-surface-8px);border-top-style:solid;border-top-width:var(--plx-ref-border-width-1px);inline-size:var(--plx-ref-size-240px);overflow-y:auto;}
.ds-scroll-demo-row{border-bottom-color:var(--plx-sys-border-divider);border-bottom-style:solid;border-bottom-width:var(--plx-ref-border-width-1px);font-size:var(--plx-ref-font-size-12);padding-block-end:var(--plx-ref-space-8px);padding-block-start:var(--plx-ref-space-8px);padding-inline-end:var(--plx-ref-space-12px);padding-inline-start:var(--plx-ref-space-12px);}
/* wireframes: lettered regions (no text inside the drawing) and the legend beside them (wire() in layout-lab.js) */
.ds-wire{align-items:start;column-gap:var(--plx-ref-space-24px);display:grid;grid-template-columns:minmax(0,3fr) minmax(var(--plx-ref-size-240px),2fr);margin-block-end:var(--plx-ref-space-12px);row-gap:var(--plx-ref-space-16px);}
.ds-wire__frame{background-color:var(--plx-sys-surface-sunken);border-bottom-color:var(--plx-sys-border-subtle);border-bottom-left-radius:var(--plx-sys-radius-card-6px);border-bottom-right-radius:var(--plx-sys-radius-card-6px);border-bottom-style:solid;border-bottom-width:var(--plx-ref-border-width-1px);border-left-color:var(--plx-sys-border-subtle);border-left-style:solid;border-left-width:var(--plx-ref-border-width-1px);border-right-color:var(--plx-sys-border-subtle);border-right-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-card-6px);border-top-right-radius:var(--plx-sys-radius-card-6px);border-top-style:solid;border-top-width:var(--plx-ref-border-width-1px);column-gap:var(--plx-ref-space-4px);display:grid;padding-block-end:var(--plx-ref-space-4px);padding-block-start:var(--plx-ref-space-4px);padding-inline-end:var(--plx-ref-space-4px);padding-inline-start:var(--plx-ref-space-4px);row-gap:var(--plx-ref-space-4px);}
.ds-wire__frame--shell{grid-template-areas:"a a a a" "b c d f";grid-template-columns:2fr 2fr 5fr 2fr;grid-template-rows:var(--plx-ref-size-36px) var(--plx-ref-size-200px);}
.ds-wire__frame--areas{grid-template-areas:"a a a" "b d e" "g g g";grid-template-columns:2fr 5fr 2fr;grid-template-rows:var(--plx-ref-size-36px) var(--plx-ref-size-200px) var(--plx-ref-size-36px);}
.ds-wire__box{background-color:var(--plx-sys-surface-default);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;min-inline-size:0;padding-block-end:var(--plx-ref-space-4px);padding-block-start:var(--plx-ref-space-28px);padding-inline-end:var(--plx-ref-space-4px);padding-inline-start:var(--plx-ref-space-4px);position:relative;}
.ds-wire__box--a{grid-area:a;}
.ds-wire__box--b{grid-area:b;}
.ds-wire__box--c{grid-area:c;}
.ds-wire__box--d{grid-area:d;}
.ds-wire__box--e{grid-area:e;}
.ds-wire__box--f{grid-area:f;}
.ds-wire__box--g{grid-area:g;}
.ds-wire__box--grid{background-color:var(--plx-sys-surface-raised);flex-grow:1;}
.ds-wire__box--foot{background-color:var(--plx-sys-surface-raised);block-size:var(--plx-ref-size-28px);margin-block-start:auto;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;}
.ds-wire__cols{column-gap:var(--plx-ref-space-4px);display:grid;flex-grow:1;grid-template-columns:repeat(12,minmax(0,1fr));}
.ds-wire__cols span{background-color:var(--plx-sys-state-selected);}
:where(:root[data-plx-mode="dark"]) .ds-wire__cols span{background-color:var(--plx-sys-state-hover);}
.ds-wire__marker{align-items:center;background-color:var(--plx-sys-surface-inverse);block-size:var(--plx-ref-size-20px);border-bottom-left-radius:var(--plx-ref-radius-pill);border-bottom-right-radius:var(--plx-ref-radius-pill);border-top-left-radius:var(--plx-ref-radius-pill);border-top-right-radius:var(--plx-ref-radius-pill);color:var(--plx-sys-content-inverse);display:inline-flex;flex-shrink:0;font-family:var(--plx-sys-font-label);font-size:var(--plx-ref-font-size-11);font-weight:var(--plx-ref-font-weight-bold-700);inline-size:var(--plx-ref-size-20px);inset-block-start:var(--plx-ref-space-4px);inset-inline-start:var(--plx-ref-space-4px);justify-content:center;line-height:1;position:absolute;}
.ds-wire__marker--key{position:static;}
.ds-wire__legend{align-items:start;column-gap:var(--plx-ref-space-8px);display:grid;font-size:var(--plx-ref-font-size-12);grid-template-columns:auto minmax(0,1fr);margin-block-end:0;margin-block-start:0;row-gap:var(--plx-ref-space-12px);}
.ds-wire__legend dt{margin-block-end:0;margin-block-start:0;}
.ds-wire__legend dd{margin-block-end:0;margin-block-start:0;margin-inline-start:0;}
.ds-wire__term{display:block;font-weight:var(--plx-ref-font-weight-semibold-600);}
.ds-wire__code{display:block;font-family:var(--plx-sys-font-code);font-size:var(--plx-ref-font-size-11);overflow-wrap:anywhere;}
.ds-wire__note{color:var(--plx-sys-content-muted);display:block;}
@media (max-width:900px){.ds-wire{grid-template-columns:minmax(0,1fr);}}