/**
 * PPF Pro Blueprint LMS v0.3.36, component 2 of 6: Banner + greeting styles.
 *
 * All styles are scoped under .ppfb-scope and reference the locked
 * --ppfb-10k-* tokens only. Tokens are never redefined here.
 * v0.3.56 (seat I): the ceremony surface is Toffee (deep chrome) with Egret
 * text (contract rule 1: no gold text on Toffee). The banner CTA is the
 * primary action: Princess Blue fill, white text (owner scope ruling
 * 2026-09-19: all buttons site-wide).
 * Ceremony surface: Toffee with Egret text.
 */

/* ============ First-run banner ============ */

.ppfb-scope .ppfb-dash-banner {
    background: var(--ppfb-10k-charcoal-900, #0e1116);
    color: var(--ppfb-10k-ink-on-charcoal, #f4f1e8);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(var(--ppfb-10k-space-7, 1.75rem), env(safe-area-inset-top, 0px) + 24px);
    padding-bottom: max(var(--ppfb-10k-space-7, 1.75rem), env(safe-area-inset-bottom, 0px) + 24px);
    padding-left: var(--ppfb-10k-space-5, 1.25rem);
    padding-right: var(--ppfb-10k-space-5, 1.25rem);
    overflow-x: clip;
}

.ppfb-scope .ppfb-dash-banner__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ppfb-10k-space-4, 1rem);
}

.ppfb-scope .ppfb-dash-banner__eyebrow {
    font-family: var(--ppfb-10k-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-micro, 0.75rem);
    font-weight: var(--ppfb-10k-eyebrow-weight, 800);
    letter-spacing: var(--ppfb-10k-eyebrow-tracking, 0.08em);
    text-transform: uppercase;
    color: var(--ppfb-10k-quiet-on-charcoal, #a89f8d);
    margin: 0;
}

.ppfb-scope .ppfb-dash-banner__heading {
    font-family: var(--ppfb-10k-font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
    font-size: var(--ppfb-10k-text-display, 2rem);
    line-height: var(--ppfb-10k-leading-snug, 1.25);
    letter-spacing: var(--ppfb-10k-tracking-h1, -0.005em);
    color: var(--ppfb-10k-ink-on-charcoal, #f4f1e8);
    margin: var(--ppfb-10k-space-4, 1rem) 0 0;
    font-weight: var(--ppfb-10k-weight-regular, 400);
}

.ppfb-scope .ppfb-dash-banner__heading:focus {
    outline: none;
}

.ppfb-scope .ppfb-dash-banner__heading:focus-visible {
    outline: 2px solid var(--course-focus-ring-on-deep);
    outline-offset: 4px;
}

.ppfb-scope .ppfb-dash-banner__sub {
    font-family: var(--ppfb-10k-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-17px, 17px);
    line-height: var(--ppfb-10k-leading-body, 1.65);
    color: var(--ppfb-10k-ink-on-charcoal, #f4f1e8);
    margin: 0;
}

.ppfb-scope .ppfb-dash-banner__meta {
    font-family: var(--ppfb-10k-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-14px, 0.875rem);
    color: var(--ppfb-10k-quiet-on-charcoal, #a89f8d);
    margin: 0;
}

/* The single gold accent line on the ceremony surface (decorative). */
.ppfb-scope .ppfb-dash-banner__rule {
    display: block;
    width: 3.5rem;
    height: 2px;
    background: var(--ppfb-10k-gold-500, #c9a227);
    margin: var(--ppfb-10k-space-4, 1rem) auto 0;
}

/* The primary action: Princess Blue fill, white text (owner scope ruling
   2026-09-19: all buttons site-wide). */
.ppfb-scope .ppfb-dash-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--ppfb-10k-space-3, 0.75rem) var(--ppfb-10k-space-8, 2rem);
    margin-top: var(--ppfb-10k-space-4, 1rem);
    background: var(--course-button-bg);
    color: var(--course-button-text);
    font-family: var(--ppfb-10k-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-ui, 1rem);
    font-weight: var(--ppfb-10k-weight-semibold, 600);
    line-height: var(--ppfb-10k-leading-ui, 1.4);
    text-decoration: none;
    border: 0;
    border-radius: var(--ppfb-10k-radius-card, 8px);
}

.ppfb-scope .ppfb-dash-banner__cta:hover {
    background: var(--course-button-bg-hover);
    color: var(--course-button-text-hover);
}

.ppfb-scope .ppfb-dash-banner__cta:focus-visible {
    outline: 2px solid var(--course-focus-ring-on-deep);
    outline-offset: 3px;
}

/* Quiet skip: text control, no chrome, full 44px target. */
.ppfb-scope .ppfb-dash-banner__skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--ppfb-10k-space-2, 0.5rem) var(--ppfb-10k-space-4, 1rem);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ppfb-10k-quiet-on-charcoal, #a89f8d);
    font-family: var(--ppfb-10k-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-15px, 0.9375rem);
    text-decoration: underline;
    text-underline-offset: var(--ppfb-10k-underline-offset, 2px);
}

.ppfb-scope .ppfb-dash-banner__skip:hover {
    color: var(--ppfb-10k-ink-on-charcoal, #f4f1e8);
}

.ppfb-scope .ppfb-dash-banner__skip:focus-visible {
    outline: 2px solid var(--course-focus-ring-on-deep);
    outline-offset: 3px;
}

/* ============ Greeting header ============ */

.ppfb-scope .ppfb-dash-greeting {
    padding: var(--ppfb-10k-space-6, 1.5rem) var(--ppfb-10k-space-5, 1.25rem) var(--ppfb-10k-space-4, 1rem);
    overflow-x: clip;
}

.ppfb-scope .ppfb-dash-greeting__title {
    font-family: var(--ppfb-10k-font-display, "Source Serif 4", Georgia, "Times New Roman", serif);
    font-size: var(--ppfb-10k-text-2xl, 1.75rem);
    line-height: var(--ppfb-10k-leading-snug, 1.25);
    letter-spacing: var(--ppfb-10k-tracking-h1, -0.005em);
    font-weight: var(--ppfb-10k-weight-regular, 400);
    color: var(--ppfb-10k-ink, #17191c);
    margin: 0;
}

.ppfb-scope .ppfb-dash-greeting__goal,
.ppfb-scope .ppfb-dash-greeting__track {
    font-family: var(--ppfb-10k-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: var(--ppfb-10k-text-15px, 0.9375rem);
    line-height: var(--ppfb-10k-leading-15, 1.5);
    color: var(--ppfb-10k-quiet, #5e5a53);
    margin: var(--ppfb-10k-space-2, 0.5rem) 0 0;
}

/* ============ Reduced motion: instant, complete, fully present ============ */

@media (prefers-reduced-motion: reduce) {
    .ppfb-scope .ppfb-dash-banner *,
    .ppfb-scope .ppfb-dash-greeting * {
        transition: none;
        animation: none;
    }
}