/* Standalone shell for the public demo pages. Everything is scoped under .demo-shell so the rest of the
   app keeps its own layout and look. Palette and type come from the --fd-* variables in app.css. */

.demo-shell {
    background: var(--fd-cream);
    color: var(--fd-ink);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.demo-shell__header {
    align-items: center;
    background: var(--fd-midnight);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
}

.demo-shell__brand {
    align-items: center;
    color: var(--fd-cream);
    display: inline-flex;
    font-weight: 600;
    gap: 0.6rem;
    text-decoration: none;
}

.demo-shell__link {
    color: rgba(244, 237, 228, 0.85);
    font-size: 0.9rem;
    text-decoration: none;
}

.demo-shell__link:hover {
    color: var(--fd-cream);
    text-decoration: underline;
}

.demo-shell__main {
    flex: 1;
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 clamp(1.25rem, 4vw, 3rem) 3rem;
    width: 100%;
}

.demo-shell__footer {
    background: var(--fd-midnight);
    color: rgba(244, 237, 228, 0.72);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 1.5rem;
    padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
}

.demo-shell__footer a {
    color: rgba(244, 237, 228, 0.85);
    text-decoration: none;
}

.demo-shell__footer a:hover {
    color: var(--fd-cream);
    text-decoration: underline;
}

/* Marketing-flavored framing for the pages inside the shell */

.demo-shell .page-header {
    padding: clamp(2rem, 6vh, 3.25rem) 0 1.5rem;
}

.demo-shell .page-kicker {
    color: var(--fd-amber);
}

.demo-shell .demo-tile {
    border-color: rgba(23, 32, 51, 0.16);
    border-radius: 10px;
}

.demo-shell .callout-panel {
    border-color: rgba(23, 32, 51, 0.16);
    border-radius: 10px;
}

.demo-shell .demo-band {
    background: var(--fd-midnight);
    border-radius: 12px;
}

.demo-shell .demo-band .page-kicker {
    color: var(--fd-teal-bright);
}

.demo-shell .demo-band p {
    color: rgba(244, 237, 228, 0.82);
}

/* Platform filter chips */

.demo-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.demo-filter button {
    background: transparent;
    border: 1px solid rgba(23, 32, 51, 0.3);
    border-radius: 999px;
    color: var(--fd-ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.45rem 1.1rem;
}

.demo-filter button:hover {
    border-color: var(--fd-ink);
}

.demo-filter button.is-active {
    background: var(--fd-midnight);
    border-color: var(--fd-midnight);
    color: var(--fd-cream);
}

/* Demo groups */

.demo-group {
    margin-bottom: 2.25rem;
}

.demo-group__title {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}