/* Public content pages (/superpowers, /how-it-works, /rules, /glossary).
   A shared stylesheet rather than scoped CSS: these pages are plain server-rendered documents
   with no interactivity, and they share one visual language. Uses the app's existing tokens so
   the reference pages look like the product, not a bolted-on microsite. */

.public-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 4rem;
}

/* ---------- Breadcrumbs ---------- */

.public-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted-current);
}

.public-breadcrumbs a {
    color: var(--secondary-hero-text);
    text-decoration: none;
}

.public-breadcrumbs a:hover {
    text-decoration: underline;
}

/* ---------- Page header ---------- */

.public-header {
    padding: 1rem 0 2.5rem;
    max-width: 46rem;
}

.public-header h1 {
    font-family: 'Bangers', cursive;
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 2px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-hero) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.public-lede {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted-current);
}

/* ---------- Profile filter ---------- */

.profile-filter {
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
}

.profile-filter-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.profile-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-chip {
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    border: 2px solid var(--border-accent-medium);
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base),
                color var(--transition-base);
}

.profile-chip:hover {
    border-color: var(--secondary-hero);
}

.profile-chip.is-active {
    border-color: var(--secondary-hero);
    background: var(--secondary-alpha-10);
    color: var(--secondary-hero-text);
}

.profile-filter-help {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted-current);
}

/* The filter is progressive enhancement — the script adds this class only once it runs, so with
   JavaScript disabled the buttons are simply inert and every card stays visible. */
.profile-filter:not(.is-enhanced) .profile-filter-buttons {
    display: none;
}

/* ---------- Card grid ---------- */

.power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.power-card {
    display: flex;
}

.power-card[hidden] {
    display: none;
}

.power-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 2px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--card-surface-gradient);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition-base), border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.power-card-link:hover,
.power-card-link:focus-visible {
    transform: translateY(-6px);
    border-color: var(--secondary-hero);
    box-shadow: var(--shadow-elevated);
    /* app.css `a:hover` sets a gold colour and blue glow on any anchor; neither belongs on a card. */
    color: inherit;
    text-shadow: none;
}

.power-card-art {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--border-accent-medium);
}

.power-card-body {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.power-card-name {
    font-family: 'Bangers', cursive;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin: 0;
    color: var(--accent-gold-text, var(--accent-gold));
}

.power-card-tagline {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted-current);
    flex: 1;
}

.power-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.power-chip {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.6rem;
    border-radius: 50px;
    border: 1px solid var(--border-accent-medium);
    color: var(--text-muted-current);
}

.power-chip-extreme {
    border-color: var(--primary-hero);
    color: var(--primary-hero-text, var(--primary-hero));
}

/* ---------- Detail page ---------- */

.power-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding: 1rem 0 2.5rem;
}

.power-detail-art {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    border: 2px solid var(--border-accent-medium);
    box-shadow: var(--shadow-elevated);
}

.power-detail-eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted-current);
    margin-bottom: 0.5rem;
}

.power-detail-intro h1 {
    font-family: 'Bangers', cursive;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--primary-hero) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.power-detail-tagline {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.power-facts {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.power-fact {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-accent);
}

.power-fact dt {
    font-weight: 700;
    color: var(--text-muted-current);
}

.power-fact dd {
    margin: 0;
}

.power-fact-note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.88rem;
    color: var(--text-muted-current);
}

.power-prose,
.power-budget-note {
    max-width: 46rem;
    margin-bottom: 2.5rem;
    line-height: 1.75;
}

.power-prose h2,
.power-budget-note h2,
.power-siblings h2,
.public-cta h2 {
    font-family: 'Bangers', cursive;
    font-size: 2rem;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    color: var(--secondary-hero-text);
}

.power-prose h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
}

.power-prose p,
.power-budget-note p {
    margin-bottom: 1rem;
}

.power-prose ul,
.power-prose ol {
    margin: 0 0 1rem 1.4rem;
}

.power-prose li {
    margin-bottom: 0.45rem;
}

.power-prose code {
    font-size: 0.92em;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-chip, 6px);
    background: var(--secondary-alpha-10);
}

/* ---------- Siblings + CTA ---------- */

.power-siblings {
    margin-bottom: 3rem;
}

.power-siblings ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.power-siblings a {
    display: block;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base);
}

.power-siblings a:hover {
    border-color: var(--secondary-hero);
    color: inherit;
    text-shadow: none;
}

.power-sibling-name {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.power-sibling-tagline {
    display: block;
    font-size: 0.88rem;
    color: var(--text-muted-current);
}

.public-cta {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius-card);
    border: 2px solid var(--border-accent-medium);
    background: var(--card-surface-gradient);
}

.public-cta p {
    margin-bottom: 1.5rem;
    color: var(--text-muted-current);
}

/* ---------- How it works: steps, rhythm, profiles, FAQ ---------- */

.how-steps,
.how-rhythm,
.how-profiles,
.how-faq,
.rules-section,
.glossary-section {
    margin-bottom: 3.5rem;
}

.how-steps h2,
.how-rhythm h2,
.how-profiles h2,
.how-faq h2,
.rules-section h2,
.glossary-section h2 {
    font-family: 'Bangers', cursive;
    font-size: 2.25rem;
    letter-spacing: 1.5px;
    margin-bottom: 1.25rem;
    color: var(--secondary-hero-text);
}

.step-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.step-list > li {
    counter-increment: step;
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    border: 1px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
}

.step-list > li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    font-family: 'Bangers', cursive;
    font-size: 1.35rem;
    background: var(--energy-gradient);
    color: #fff;
}

.step-list h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.step-list p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-muted-current);
}

.rhythm-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.rhythm-node {
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--border-accent-medium);
    border-left: 4px solid var(--secondary-hero);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
}

.rhythm-node-highlight {
    border-left-color: var(--accent-gold);
    box-shadow: var(--shadow-elevated);
}

.rhythm-day {
    display: block;
    font-family: 'Bangers', cursive;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.rhythm-time {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted-current);
    margin-bottom: 0.65rem;
}

.rhythm-node p {
    margin: 0;
    line-height: 1.65;
    color: var(--text-muted-current);
}

.rhythm-tag {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
    border: 1px solid var(--primary-hero);
    color: var(--primary-hero-text, var(--primary-hero));
}

.profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.profile-card {
    padding: 1.75rem;
    border: 2px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
}

.profile-card-extreme {
    border-color: var(--primary-hero);
}

.profile-card h3 {
    font-family: 'Bangers', cursive;
    font-size: 2rem;
    letter-spacing: 1.5px;
    margin-bottom: 0.35rem;
}

.profile-card-pitch {
    font-style: italic;
    color: var(--text-muted-current);
    margin-bottom: 1.1rem;
}

.profile-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
}

.profile-card li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-accent);
}

.profile-card li:last-child {
    border-bottom: none;
}

.profile-card-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted-current);
}

.faq-list {
    display: grid;
    gap: 0.75rem;
    max-width: 52rem;
}

.faq-item {
    border: 1px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
    padding: 0 1.25rem;
}

.faq-item summary {
    padding: 1.1rem 0;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}

.faq-item summary:hover {
    color: var(--secondary-hero-text);
}

.faq-item p {
    margin: 0 0 1.1rem;
    line-height: 1.7;
    color: var(--text-muted-current);
}

/* ---------- Rules tables ---------- */

.rules-table-scroll {
    overflow-x: auto;
}

.rules-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 34rem;
}

.rules-table th,
.rules-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-accent);
    vertical-align: top;
}

.rules-table thead th {
    font-family: 'Bangers', cursive;
    font-size: 1.35rem;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--border-accent-medium);
}

.rules-table tbody th {
    font-weight: 700;
    color: var(--text-muted-current);
}

.rules-bullets {
    max-width: 52rem;
    margin: 0;
    padding-left: 1.3rem;
    line-height: 1.75;
}

.rules-bullets li {
    margin-bottom: 0.75rem;
}

/* ---------- Glossary ---------- */

.glossary-list {
    display: grid;
    gap: 1rem;
    max-width: 54rem;
    margin: 0;
}

.glossary-entry {
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--border-accent-medium);
    border-radius: var(--radius-card);
    background: var(--card-surface-gradient);
    /* Anchor links land the heading below the sticky header rather than under it. */
    scroll-margin-top: 5rem;
}

.glossary-entry dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Bangers', cursive;
    font-size: 1.35rem;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
    color: var(--accent-gold-text, var(--accent-gold));
}

.glossary-entry dd {
    margin: 0;
    line-height: 1.7;
    color: var(--text-muted-current);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .power-detail-header {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .power-detail-art {
        max-width: 320px;
    }
}

@media (max-width: 560px) {
    .power-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.1rem;
    }

    .power-fact {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}