/**
 * Monarch Design System v0.7.8
 * Page-level layouts only. Global structure remains in layout.css.
 */
.page-tools main {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-2xl);
    max-width: 1100px;
    margin-inline: auto;
}

.page-branding-demo {
    min-height: 100vh;
}

.page-branding-demo main {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.branding-demo-card {
    max-width: 900px;
    margin-inline: auto;
}

.branding-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.branding-preview-grid article {
    padding: var(--space-lg);
    border: 3px solid var(--color-stroke);
    border-radius: var(--radius-lg);
}

.branding-preview-grid img {
    display: block;
    margin-inline: auto;
}

@media (max-width: 700px) {
    .branding-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* #####################################################################
   Monarch v0.8.3.4.1 — Page Composition
   ##################################################################### */
.card,
.card-body,
.composition-card {
    text-align: center;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card > *, .card-body > * { max-inline-size: 100%; }
.card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-title,
.card p,
.card li,
.card blockquote { text-align: center; }
.card .button-row,
.card .button-group { justify-content: center; }
.card-align-start,
.card-align-start .card-body { align-items: stretch; text-align: start; }
.card-align-start .card-title,
.card-align-start p,
.card-align-start li,
.card-align-start blockquote { text-align: start; }

.page-composition { padding-block: var(--space-xl) var(--space-3xl); }
.composition-section { margin-block: var(--space-2xl); }
.composition-section > .section-heading { text-align: center; margin-bottom: var(--space-lg); }
.composition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); }
.composition-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.composition-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.composition-card { border:3px solid var(--color-border-light); border-radius:var(--radius-lg); background:var(--surface-soft); padding:var(--space-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-sm); }
.composition-card > * { margin-block:0; }
.composition-icon { inline-size:3.25rem; block-size:3.25rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--site-color-primary); color:var(--site-color-background); font-family:var(--font-accent); font-size:1.4rem; font-weight:700; line-height:1; text-align:center; padding-block-start:.06em; flex:0 0 auto; }
.composition-meta { display:flex; flex-wrap:wrap; gap:var(--space-xs); justify-content:center; align-items:center; }
.composition-kicker { font-family:var(--font-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.composition-list { display:grid; gap:var(--space-sm); padding:0; margin:0; list-style:none; width:100%; }
.composition-list li { border-bottom:1px solid var(--color-border-light); padding-block:var(--space-sm); text-align:center; }
.composition-price { font-family:var(--font-secondary); font-size:clamp(2rem,5vw,3.5rem); color:var(--site-color-accent); line-height:1; }
.composition-stat { font-family:var(--font-secondary); font-size:2.25rem; color:var(--site-color-primary); line-height:1; }
.composition-media { aspect-ratio:16/9; width:100%; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--site-color-primary),var(--site-color-secondary),var(--site-color-accent)); display:grid; place-items:center; color:var(--site-color-background); font-family:var(--font-accent); font-size:1.25rem; }
.composition-callout { border-inline-start:.45rem solid var(--site-color-accent); padding:var(--space-lg); border-radius:var(--radius-md); background:var(--surface-soft); text-align:center; }
.composition-toolbar { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:var(--space-lg); align-items:end; padding:var(--space-lg); border:2px solid var(--color-border-light); border-radius:var(--radius-lg); background:var(--surface-soft); }
.composition-toolbar > * { min-inline-size:0; }
.composition-toolbar .form-field { display:grid; gap:var(--space-xs); text-align:start; }
.composition-toolbar .form-label { display:block; color:var(--site-color-accent); font-family:var(--font-primary); font-weight:var(--fw-bold); }
.composition-toolbar .form-control { width:100%; min-height:3.25rem; padding:var(--space-sm) var(--space-md); border:1px solid var(--color-border-light); border-radius:var(--radius-md); color:var(--site-color-text); background:var(--surface-medium); font:inherit; }
.composition-toolbar .form-control:focus { outline:3px solid var(--site-color-accent); outline-offset:2px; border-color:var(--site-color-accent); }
.composition-toolbar .form-action { display:flex; align-items:end; justify-content:center; }
.composition-toolbar .form-action .button { width:100%; min-height:3.25rem; margin:0; }
.composition-result { padding:var(--space-lg); border-bottom:2px solid var(--color-border-light); text-align:start; }
.composition-result h2,.composition-result p { text-align:start; }
.composition-article { max-inline-size:75ch; margin-inline:auto; }
.composition-article figure { margin-inline:0; }
.composition-toc { position:sticky; top:var(--space-lg); }
.composition-rating { letter-spacing:.18em; color:var(--semantic-warning); font-size:1.25rem; }
.composition-avatar { inline-size:6rem; block-size:6rem; border-radius:50%; background:linear-gradient(135deg,var(--site-color-secondary),var(--site-color-accent)); display:grid; place-items:center; color:var(--site-color-background); font-family:var(--font-accent); font-size:2rem; border:3px solid var(--color-border-light); }


/* v0.8.3.7.1: Universal Website image integration */
.composition-image-band { max-inline-size:58rem; margin-inline:auto; }
.composition-image-band .image-frame { box-shadow:var(--shadow-md); }
.composition-card .image-frame { margin-block-end:var(--space-sm); }
.composition-card.card-align-start .image-frame { align-self:stretch; }
.composition-result { display:grid; grid-template-columns:minmax(7rem,10rem) minmax(0,1fr); gap:var(--space-md); align-items:center; }
.composition-result .image-frame { margin:0; }
.composition-result__body { min-inline-size:0; }
@media (max-width:42rem){ .composition-result { grid-template-columns:1fr; } }

@media (max-width: 64rem) {
  .composition-grid,.composition-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 42rem) {
  .composition-grid,.composition-grid--2,.composition-grid--4 { grid-template-columns:1fr; }
  .composition-toolbar { align-items:stretch; }
}

/* #####################################################################
   Monarch v0.8.3.6 — Developer Experience Dashboard and explorer helpers
   ##################################################################### */
.admin-dashboard .composition-stat {
    margin-block: var(--space-xs);
}
.page-developer-experience details {
    width: 100%;
}
.page-developer-experience summary {
    cursor: pointer;
    color: var(--site-color-accent);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
}
.description-list {
    display: grid;
    gap: var(--space-xs);
    margin-block: var(--space-md);
}
.description-list dt {
    color: var(--site-color-accent);
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
}
.description-list dd {
    margin: 0;
}

/* v0.8.3.7.3 — Responsive Spacing Calibration.
   Preserve the comfortable mobile rhythm; tighten tablet and desktop density. */
@media (min-width: 48rem) {
    .page-composition { padding-block: var(--space-lg) var(--space-2xl); }
    .composition-section { margin-block: var(--space-xl); }
    .composition-section > .section-heading { margin-bottom: var(--space-md); }
    .composition-grid,
    .composition-grid--2,
    .composition-grid--4,
    .pattern-stat-grid,
    .component-grid,
    .image-mask-grid,
    .dashboard-grid,
    .token-grid,
    .paired-grid,
    .style-grid,
    .branding-preview-grid {
        gap: var(--space-md);
    }
    .pattern-section,
    .section { padding-block: var(--space-lg); }
    .pattern-cta { margin-block: var(--space-xl); padding: var(--space-lg); }
    .pattern-page-header { padding-block: var(--space-lg); }
    .pattern-page-header__media { margin-block-start: var(--space-md); }
}
@media (min-width: 64rem) {
    .page-composition { padding-block: var(--space-md) var(--space-xl); }
    .composition-section { margin-block: var(--space-lg); }
    .composition-card,
    .composition-callout,
    .composition-toolbar,
    .composition-result,
    .pattern-stat,
    .pattern-timeline li,
    .style-section,
    .paired-panel,
    .token-card,
    .image-mask-card {
        padding: var(--space-md);
    }
    .hero { padding-block: clamp(2.5rem, 5vw, 5rem); }
    .hero__inner { gap: var(--space-lg); }
    .pattern-page-header--large { padding-block: clamp(2.5rem, 5vw, 4.75rem); }
    .universal-footer { margin-top: var(--space-xl); padding-block: var(--space-xl) var(--space-md); }
    .universal-footer__grid { gap: var(--space-lg); }
}