/* Monarch v0.8.3.6 token-clean shared component style vocabulary */
.component-demo{padding:var(--space-lg);border:1px solid var(--site-color-stroke);border-radius:var(--radius-lg);background:var(--site-color-background)}
.component-demo__meta{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center;margin-block-end:var(--space-md)}
.component-demo__stage{padding:var(--space-lg);background:color-mix(in srgb,var(--site-color-background) 94%,var(--site-color-primary));border-radius:var(--radius-md)}
.component-default{background:var(--site-color-background);color:var(--site-color-text);border:1px solid var(--site-color-stroke);padding:var(--space-md);border-radius:var(--radius-md)}
.component-minimal{background:transparent;border:0;padding:var(--space-sm)}
.component-outlined{background:transparent;border:2px solid var(--site-color-primary);padding:var(--space-md);border-radius:var(--radius-md)}
.component-soft{background:color-mix(in srgb,var(--site-color-primary) 8%,var(--site-color-background));padding:var(--space-md);border-radius:var(--radius-lg)}
.component-elevated{background:var(--site-color-background);padding:var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.component-compact{padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm)}
.component-spacious{padding:var(--space-xl);line-height:1.8}
.component-inline{display:inline-flex;align-items:center;gap:var(--space-xs);padding:.3em .7em}
.component-stacked{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-lg)}
.component-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg);padding:var(--space-lg);border:1px solid var(--site-color-stroke)}
.component-accent-border{padding:var(--space-lg);border-inline-start:.4rem solid var(--site-color-accent);background:var(--site-color-background)}
.component-highlight{padding:var(--space-lg);background:color-mix(in srgb,var(--site-color-secondary) 18%,var(--site-color-background));border-radius:var(--radius-md)}
.component-feature{padding:var(--space-xl);border:2px solid var(--site-color-primary);border-radius:var(--radius-lg);font-size:1.08em}
.component-showcase{padding:var(--space-xl);background:color-mix(in srgb,var(--site-color-accent) 14%,var(--site-color-background));border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.component-signature{padding:var(--space-lg);border-block:3px double var(--site-color-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--site-color-primary) 10%,var(--site-color-background)),var(--site-color-background))}
.component-editorial{padding:var(--space-lg);font-family:var(--font-text);max-inline-size:70ch;border-inline-start:2px solid var(--site-color-stroke)}
.component-corporate{padding:var(--space-lg);border:1px solid var(--site-color-stroke);border-radius:var(--radius-sm);background:var(--site-color-background)}
.component-marketing{padding:var(--space-xl);text-align:center;background:color-mix(in srgb,var(--site-color-secondary) 12%,var(--site-color-background));border-radius:var(--radius-xl)}
.component-commerce{padding:var(--space-lg);border-block-start:.35rem solid var(--site-color-secondary);box-shadow:var(--shadow-sm);background:var(--site-color-background)}
.component-dashboard{padding:var(--space-md);border:1px solid var(--site-color-stroke);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--site-color-text) 3%,var(--site-color-background))}
.component-community{padding:var(--space-lg);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--site-color-accent) 9%,var(--site-color-background))}
.component-entertainment{padding:var(--space-lg);border-radius:var(--radius-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--site-color-primary) 18%,var(--site-color-background)),color-mix(in srgb,var(--site-color-accent) 16%,var(--site-color-background)))}
.component-utility{padding:var(--space-md);border:1px dashed var(--site-color-stroke);font-family:var(--font-secondary);background:var(--site-color-background)}
.component-info,.component-success,.component-warning,.component-danger,.component-pending,.component-neutral{padding:var(--space-lg);border-inline-start:.4rem solid currentColor;border-radius:var(--radius-sm)}
.component-info{color:var(--semantic-information);background:var(--semantic-information-surface)}
.component-success{color:var(--semantic-success);background:var(--semantic-success-surface)}
.component-warning{color:var(--semantic-warning);background:var(--semantic-warning-surface)}
.component-danger{color:var(--semantic-danger);background:var(--semantic-danger-surface)}
.component-pending{color:var(--semantic-pending);background:var(--semantic-pending-surface)}
.component-neutral{color:var(--semantic-neutral);background:var(--semantic-neutral-surface)}
.component-muted{padding:var(--space-md);opacity:.72;background:color-mix(in srgb,var(--site-color-text) 4%,var(--site-color-background))}
.component-gradient{padding:var(--space-lg);color:var(--site-color-background);background:linear-gradient(135deg,var(--site-color-primary),var(--site-color-accent));border-radius:var(--radius-lg)}
.component-inverse{padding:var(--space-lg);color:var(--site-color-background);background:var(--site-color-text);border-radius:var(--radius-lg)}
.badge,.label{display:inline-flex;align-items:center;justify-content:center;max-width:max-content;font-family:var(--font-primary);font-weight:var(--fw-bold);line-height:1}.badge{border-radius:999px}.statistic .component-value{display:block;font:var(--fw-bold) var(--fs-xxl)/1 var(--font-secondary)}.component-icon{font-size:3rem}

/* Library pages: thirty examples arranged as a centered 3 x 10 desktop grid. */
.component-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);align-items:stretch}
.component-library-example{display:flex;min-width:0;min-height:100%;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center}
.component-library-example>.component-demo{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.component-library-example .component-demo__meta{justify-content:center}
.component-library-example .component-demo__stage{width:100%;display:flex;align-items:center;justify-content:center;flex:1;text-align:center}
.component-library-example .component-demo__stage>*{margin-inline:auto}
.component-library-example details{width:100%;text-align:left}
@media(max-width:64rem){.component-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:40rem){.component-library-grid{grid-template-columns:1fr}}
@media(max-width:48rem){.component-split{grid-template-columns:1fr}.component-demo__stage{padding:var(--space-md)}}


/* v0.8.3.4.1 Page Composition additions */
.universal-brand__mark{overflow:hidden;padding:0;background:transparent}
.universal-brand__mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.component-explorer{display:grid;gap:var(--space-lg)}
.component-explorer__controls{display:grid;grid-template-columns:minmax(14rem,2fr) repeat(2,minmax(10rem,1fr));gap:var(--space-md);align-items:end}
.component-explorer__results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}
.component-library-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:18rem}
.component-library-card[hidden]{display:none}
.component-library-card .button{margin-top:auto}
.code-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);margin-block:var(--space-md)}
.copy-feedback{min-height:1.5em;font-size:var(--fs-sm);color:var(--semantic-success)}
.component-form-control{display:grid;gap:var(--space-xs);width:min(100%,32rem);text-align:left}
.component-form-control input,.component-form-control textarea,.component-form-control select{width:100%}
.component-choice{display:inline-flex;align-items:center;gap:var(--space-sm)}
.component-switch input{inline-size:2.75rem;block-size:1.5rem}
.component-media{max-width:100%;margin-inline:auto}
.component-media img,.component-media video{display:block;max-width:100%;height:auto;border-radius:var(--radius-md)}
.component-avatar img{width:5rem;height:5rem;object-fit:cover;border-radius:50%}
.component-icon-sample{display:grid;place-items:center;width:4rem;height:4rem;border-radius:var(--radius-md);font-size:2rem}
.component-navbar ul,.component-menu ul,.component-sidebar-nav ul,.component-pagination ul,.component-tabs ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm);padding:0;list-style:none}
.component-sidebar-nav ul{flex-direction:column;align-items:stretch}
.component-breadcrumb ol{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs);padding:0;list-style:none}
.component-breadcrumb li+li::before{content:'/';margin-inline-end:var(--space-xs);opacity:.6}
.admin-search-results{display:grid;gap:var(--space-md)}
.admin-search-results article{padding:var(--space-md);border:1px solid var(--site-color-stroke);border-radius:var(--radius-md)}
@media(max-width:64rem){.component-explorer__results{grid-template-columns:repeat(2,minmax(0,1fr))}.component-explorer__controls{grid-template-columns:1fr 1fr}}
@media(max-width:40rem){.component-explorer__results,.component-explorer__controls{grid-template-columns:1fr}}

/* v0.8.3.6 official semantic alert wrapper */
.component-alert{padding:var(--space-lg);border-inline-start:var(--border-width-thick) solid currentColor;border-radius:var(--radius-sm)}