/* Application palettes and Playbook presentation only. Shared appearances live in the UI library.
   Keep specimen components on that shared contract; selectors below style documentation, its canvas,
   and the example host's presentation. */

.playbook[data-appearance="quiet-luxury"] :is(.form-playbook__intro h1, .form-playbook__architecture h2) {
    max-width: 20ch;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.playbook[data-appearance="quiet-luxury"] :is(.form-playbook__controls, .form-playbook__static-form, .form-playbook__receipt, .form-playbook__validated-form) {
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .form-playbook__receipt::before {
    content: none;
}

.playbook.theme-audiogramiq[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#245e61, #9dbfbb);
    --app-quiet-brand-soft: light-dark(#e6efec, #293734);
    --app-quiet-brand-border: light-dark(#a5bdb7, #627f79);
}

.playbook.theme-bafsworkout[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#59446b, #bca9cb);
    --app-quiet-brand-soft: light-dark(#eee8ef, #352e3c);
    --app-quiet-brand-border: light-dark(#b9a9c0, #7d6b8b);
}

.playbook.theme-coekpi[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#355b79, #a5bed1);
    --app-quiet-brand-soft: light-dark(#e7edf1, #2b343c);
    --app-quiet-brand-border: light-dark(#a9bcc9, #657e91);
}

.playbook.theme-ergotrack[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#504b70, #b3afd0);
    --app-quiet-brand-soft: light-dark(#eceaf1, #32303e);
    --app-quiet-brand-border: light-dark(#b1adc5, #77728e);
}

.playbook.theme-mentalinsight[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#80465b, #cda7b5);
    --app-quiet-brand-soft: light-dark(#f1e7e9, #3e2e34);
    --app-quiet-brand-border: light-dark(#c4a8b1, #936c7b);
}

.playbook.theme-healthinsight[data-appearance="quiet-luxury"] {
    --app-quiet-brand: light-dark(#306779, #9abfcb);
    --app-quiet-brand-soft: light-dark(#e5eef0, #29373d);
    --app-quiet-brand-border: light-dark(#a2bdc4, #5e818c);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__lab {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.playbook[data-appearance="quiet-luxury"] .component-detail__preview-frame {
    padding: clamp(var(--app-space-4), 2vw, var(--app-space-6));
    background: var(--app-background);
    border-color: var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .component-detail__controls {
    border: 0;
    border-inline-start: 1px solid var(--app-border);
    border-radius: 0;
    background: transparent;
}

.playbook[data-appearance="quiet-luxury"] .playbook-bar {
    gap: var(--app-space-3);
    padding-block: var(--app-space-2);
    background: var(--app-surface);
    box-shadow: none;
    backdrop-filter: none;
}

.playbook[data-appearance="quiet-luxury"] :is(.demo-overview-card, .playbook-stack) {
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-home__actions a, .playbook-brand span) {
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-control label, .playbook-kicker, .demo-overview-card__index) {
    font-weight: 600;
    letter-spacing: .14em;
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-nav a, .playbook-nav-group > summary) {
    font-weight: 600;
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-home__hero h1, .playbook-intro h1, .demo-overview-card--feature h2,
    .component-detail__hero h1, .component-browser__hero h1, .pattern-browser__hero h1,
    .pattern-detail__hero h1, .foundations-page__hero h1, .guidelines-page__hero h1) {
    font-family: var(--quiet-display-font);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.playbook[data-appearance="quiet-luxury"] :is(.component-browser__hero h1, .pattern-browser__hero h1,
    .pattern-detail__hero h1, .foundations-page__hero h1, .guidelines-page__hero h1) {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-home__dashboard h2, .playbook-home__start h2,
    .playbook-home__contract h2, .playbook-home__path h3, .component-detail__section > header h2,
    .component-specimen__states > header h2, .component-browser__group h2, .pattern-browser__card h2,
    .foundations-page__section > header h2, .guidelines-page__section h2, .pattern-detail__section-heading h2,
    .pattern-detail__ingredient-panel h2) {
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.playbook[data-appearance="quiet-luxury"] :is(.component-detail__section > header h2,
    .component-specimen__states > header h2) {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__breadcrumbs {
    margin-bottom: var(--app-space-4);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__hero {
    gap: var(--app-space-6);
    padding-bottom: var(--app-space-6);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__meta {
    display: flex;
    max-width: 17rem;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--app-space-2);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__meta > :is(span:nth-child(n + 3), a) {
    flex-basis: 100%;
}

.playbook[data-appearance="quiet-luxury"] .component-detail__section {
    padding-block: var(--app-space-8);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__section > header {
    flex-wrap: wrap;
    gap: var(--app-space-3) var(--app-space-6);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__section > header p {
    flex: 1 1 16rem;
}

.playbook[data-appearance="quiet-luxury"] .component-detail__isolated-stage {
    border-radius: var(--app-radius-lg);
    background: var(--app-background);
}

.playbook[data-appearance="quiet-luxury"] .component-detail__isolated-frame {
    border-radius: var(--app-radius-sm);
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__hero h1 {
    max-width: 16ch;
    font-size: clamp(3rem, 6.2vw, 6.5rem);
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__hero h1 em {
    font-style: italic;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__hero::before {
    content: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__signal {
    min-height: auto;
    padding: var(--app-space-6) 0;
    border: 0;
    border-block: 1px solid var(--app-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__preferences {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-home__metrics article, .playbook-home__dashboard-links a,
    .playbook-home__path) {
    border: 0;
    border-block-start: 1px solid var(--app-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__path {
    min-height: 17rem;
    padding-inline: var(--app-space-4);
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-home__path:hover, .playbook-home__path:focus-visible) {
    background: var(--app-surface);
    transform: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__path:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__dashboard-links a:focus-visible {
    outline: 2px solid var(--app-focus-ring);
    outline-offset: 2px;
}

.playbook[data-appearance="quiet-luxury"] :is(.playbook-segment, .component-detail__viewport) {
    border-radius: var(--app-radius-lg);
    background: transparent;
}

.playbook[data-appearance="quiet-luxury"] .playbook-segment button.is-active {
    background: var(--app-accent-soft);
    box-shadow: none;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__signal-orbit {
    border-radius: 0;
    border-color: var(--app-border);
    outline-style: solid;
    outline-offset: .5rem;
    background: transparent;
}

.playbook[data-appearance="quiet-luxury"] .playbook-home__signal-orbit strong {
    width: auto;
    border-radius: 0;
    background: transparent;
    color: var(--app-accent);
    font-family: var(--quiet-display-font);
    font-size: 3.5rem;
    font-weight: 400;
    transform: none;
}

.playbook[data-appearance="quiet-luxury"] .demo-overview-card--feature {
    background: var(--app-brand);
}

.playbook[data-appearance="quiet-luxury"] .demo-overview-metric {
    font-family: var(--quiet-display-font);
    font-weight: 400;
    letter-spacing: -.025em;
}

@media (max-width: 64rem) {
    .playbook[data-appearance="quiet-luxury"] .component-detail__controls {
        border-inline-start: 0;
        border-block-start: 1px solid var(--app-border);
    }
}

@media (max-width: 50rem) {
    .playbook[data-appearance="quiet-luxury"] .playbook-bar {
        position: static;
    }

    .playbook[data-appearance="quiet-luxury"] .component-detail {
        padding-top: var(--app-space-4);
    }

    .playbook[data-appearance="quiet-luxury"] .component-detail__section > header p {
        flex-basis: auto;
    }
}

@media (max-width: 34rem) {
    .playbook[data-appearance="quiet-luxury"] .playbook-bar {
        gap: var(--app-space-2);
    }

    .playbook[data-appearance="quiet-luxury"] .playbook-control {
        gap: var(--app-space-1);
    }

    .playbook[data-appearance="quiet-luxury"] .playbook-control label {
        font-size: .625rem;
        letter-spacing: .1em;
    }

    .playbook[data-appearance="quiet-luxury"] .component-detail__meta {
        max-width: none;
    }

    .playbook[data-appearance="quiet-luxury"] .component-detail__meta > :is(span:nth-child(n + 3), a) {
        flex-basis: auto;
    }
}