/* Anime Compass — about.css. The editorial layer over tokens.css and the shared
   chrome in shell.css. Region colour: the four principle cards take the accents
   in declaration order (aqua, pink, spring green, yellow), the ratings block
   takes curator tangerine as it does everywhere else in the product, and the
   prose panels stay neutral so the coloured islands inside them read. */

.about-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-3) var(--space-8);
}

/* ── Glass panels ─────────────────────────────────────────────────────────── */
/* Islands on the canvas: the gap between them is the page's structure. */
.philosophy-section,
.ratings-section,
.contact-section {
    background: var(--panel-fill);
    backdrop-filter: blur(var(--panel-blur));
    -webkit-backdrop-filter: blur(var(--panel-blur));
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--panel-lift), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.contact-section {
    margin-bottom: 0;
    text-align: center;
}

/* ── Prose ────────────────────────────────────────────────────────────────── */
/* Hierarchy from size and weight; the colour on this page belongs to the
   regions that carry meaning, not to every heading. */
.section-title {
    color: var(--text-primary);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.philosophy-section p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: var(--space-2);
    max-width: 68ch;
}

.philosophy-section p:last-of-type {
    margin-bottom: 0;
}

/* The one keyboard shortcut the prose names. Sized down so it sits on the
   text baseline rather than pushing the line height around. */
.philosophy-section kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--text-primary);
    background: var(--panel-fill-sunken);
    border: var(--border) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.45em;
}

/* ── Principle cards ──────────────────────────────────────────────────────── */
.principle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Recessed into the panel: darker than its host, tighter radius, no lift at
   rest. --region is the card's own hue, set by the nth-child rules below. */
.principle-card {
    --region: var(--accent-primary);
    background: var(--panel-fill-sunken);
    border: var(--border) solid color-mix(in srgb, var(--region) 38%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard);
}

.principle-card:nth-child(1) { --region: var(--accent-primary); }
.principle-card:nth-child(2) { --region: var(--accent-secondary); }
.principle-card:nth-child(3) { --region: var(--accent-tertiary); }
.principle-card:nth-child(4) { --region: var(--accent-quaternary); }

/* The hue is already on the border and title at rest (so it survives touch);
   hover blooms it and lifts the card off the panel. */
.principle-card:hover {
    border-color: var(--region);
    background: color-mix(in srgb, var(--region) 7%, var(--panel-fill-sunken));
    box-shadow: var(--panel-lift-high),
        0 0 26px color-mix(in srgb, var(--region) 32%, transparent);
    transform: translateY(-3px);
}

.principle-title {
    color: var(--region);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-1);
}

.principle-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ── Ratings: the curator region ──────────────────────────────────────────── */
.ratings-section {
    border-color: color-mix(in srgb, var(--accent-curator) 34%, var(--panel-border));
}

.ratings-title {
    color: var(--accent-curator);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-2);
}

.ratings-description {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 68ch;
    margin-bottom: var(--space-2);
}

.ratings-description:last-of-type {
    margin-bottom: 0;
}

.rating-stars {
    color: var(--accent-curator);
    white-space: nowrap;
    letter-spacing: 0.06em;
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-title {
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-1);
}

.contact-description {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

/* The page's one primary action, so it takes the primary accent it takes
   everywhere else. #3DE0E8 on canvas clears the legibility floor at 12.9:1. */
.contact-email {
    display: inline-block;
    background: var(--panel-fill-sunken);
    color: var(--accent-primary);
    text-decoration: none;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 1.05rem;
    border: var(--border) solid color-mix(in srgb, var(--accent-primary) 55%, transparent);
    transition: transform var(--motion-hover) var(--ease-standard),
        box-shadow var(--motion-hover) var(--ease-standard),
        border-color var(--motion-hover) var(--ease-standard),
        background-color var(--motion-hover) var(--ease-standard),
        color var(--motion-hover) var(--ease-standard);
}

.contact-email:hover {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
    box-shadow: var(--panel-lift-high), 0 0 24px rgba(61, 224, 232, 0.4);
    transform: translateY(-2px);
}

.contact-email:active {
    transform: translateY(0) scale(0.985);
    box-shadow: var(--panel-lift);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Changelog: build_changelog.py writes the entries between the changelog
   markers, one <details> per run, newest first and only the newest open, so a
   week with a long re-rating pass folds away. The same block is on all four
   sites. */
.changelog-section {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.changelog-entry {
    border-top: var(--border) solid var(--panel-border);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
}

.changelog-entry summary {
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
}

.changelog-entry summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.changelog-groups {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.7;
    margin-top: var(--space-1);
    padding-left: var(--space-3);
}

.changelog-groups ul {
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--space-1);
    padding-left: var(--space-3);
}

.changelog-empty {
    font-style: italic;
}

@media (max-width: 768px) {
    .about-container {
        padding: 0 var(--space-2) var(--space-6);
    }

    .philosophy-section,
    .ratings-section,
    .contact-section {
        padding: var(--space-3);
    }

    .section-title {
        font-size: 1.45rem;
    }

    .principle-grid {
        grid-template-columns: 1fr;
    }
}