/* =============================================================================
   chart-view.css — one birth chart, read chapter by chapter
   Built 2026-09-30 for the celebrity charts (10.2); renamed 2026-10-01
   (Zlatan: "This template is going to be for every chart"), so nothing here
   is named after celebrities. Used by celebrity-chart*.html, and by any
   chart page that takes this template later.

   PAGE-SCOPED, like book3d.css. The page also links celeb-wall.css only for
   the same-sign row of photos, which is the wall's own card.
   ============================================================================= */
/* The basics chapter family (chapter hero, _chapter_nav, reading measure,
   pager) with what a person's chart adds. */
/* ---- _chart_view_person: the hero with the person in it ----
   The photo round beside the name, like the saved-chart photo on the old
   chart page; stacked and centred on a phone. */
.chart-view-person {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

@media (min-width:768px) {
    .chart-view-person {
        text-align: left;
        justify-content: center;
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

.chart-view-person__photo {
    flex: 0 0 auto;
    width: 12rem;
    height: 12rem;
    border: 3px solid var(--c-blue-900);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-tight);
}

@media (max-width: 767px) {
    .chart-view-person {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .chart-view-person__photo {
        width: 50vw;
        height: 50vw;
        margin-bottom: var(--space-4);
    }
}

/* ---- the introduction: wheel, signs, chapters ---- */
.chart-view-intro {
    max-width: none;
}

.chart-view-intro__wheel .wheel-drawing {
    display: block;
    width: 100%;
    max-width: 32rem;
    height: auto;
    margin: 0 auto;
    animation: wheel-turn-in 1.2s cubic-bezier(.2, .7, .2, 1) .15s backwards;
}

.chart-view-intro__signs {
    margin-top: var(--space-2);
}

/* On the dark page the sign cards are the chapter cards' kind — dark with
   the drawn seam — not the light cards of the free chart, which sit on
   cream there. Light stays for what needs attention (house style). */
.chart-view-intro__signs .chart-sign {
    background-color: var(--c-blue-850);
    border-top: 7px solid var(--c-blue-700);
    border-radius: 0;
    color: var(--c-white-85);
}

.chart-view-intro__signs .astro-glyph {
    font-size: var(--fs-lg);
}

/* In the chart column the cards go two across at most: the column is
   narrower than the basics list's container. */
@media (min-width: 900px) {
    .chart-view-chapters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* A chapter card whose glyph is the placement (planet + sign). The basics
   cards' drawn icons are a background; here the glyph replaces it. */
.chapter-card--glyph {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    background-image: url('../img/bgr/tile-moon-black-10.webp');
    background-size: cover;

    /* background-image: none */
}

.chapter-card--glyph .chapter-card__glyph {
    font-size: var(--fs-xl);
    color: var(--c-orange-50);
    letter-spacing: 0.2rem;
}

.chapter-card--glyph .chapter-card__title {
    flex-grow: 1;
}

/* ---- the reading ---- */
.chart-view-reading__note {
    padding-left: var(--space-4);
    border-left: 3px solid var(--c-orange);
    font-size: var(--fs-base);
    color: var(--c-white-75);
    font-style: italic;
}

/* Under a heading, the exact position in the icon font: "Sun 26°51′
   Scorpio". Quieter than the title, in the body size. */
.chart-view-reading__position {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--fs-md);
    color: var(--c-orange);
}

/* The heading's own ring glyph only; the position line is plain. */
.chapter-heading--glyph .chart-view-reading__position {
    display: inline-block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-size: var(--fs-lg);
}

.chart-view-reading__aspect {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: space-between;
}

.chart-view-reading__aspect .astro-glyph {
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    color: var(--c-orange);
}

.chart-view-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* ---- _chart_view_same_sign: one row of the wall (.celeb-wall--row in
   celeb-wall.css) ---- */
.chart-view-same-sign {
    background-color: var(--c-blue-950);
}

/* The planets fall as in the overlay (.wheel-panel.open .wheel-fall in
   blocks.css), on the page's own turn-in, which starts at the same .15s. */
.chart-view-intro__wheel .wheel-fall {
    animation: wheel-fall-in .8s calc(.5s + var(--fall-i, 0) * 90ms) backwards;
}

.chart-view-intro__wheel .wheel-fall-late {
    animation: wheel-panel-enter .5s ease-out calc(.5s + var(--fall-n, 0) * 90ms + .5s) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .chart-view-intro__wheel .wheel-drawing,
    .chart-view-intro__wheel .wheel-fall,
    .chart-view-intro__wheel .wheel-fall-late {
        animation: none;
    }
}

/* Moved from blocks.css 2026-10-01 (Zlatan's rules): page-scoped. The
   wheel is a button since the same day, so it shakes off a button's look. */
.chart-view-intro__wheel {
    display: block;
    width: 100%;
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-white-75);
    font-family: var(--font-body);
    cursor: zoom-in;
}

.chart-view-intro__wheel:focus-visible {
    outline: 2px solid var(--c-orange);
    outline-offset: 8px;
}

/* The magnifier line: says the picture opens. Orange on hover, with the
   wheel itself lifting a little. */
.chart-view-intro__open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .15s ease;
}

.chart-view-intro__wheel .wheel-drawing {
    transition: transform .3s ease;
}

@media (hover: hover) {
    .chart-view-intro__wheel:hover .chart-view-intro__open {
        color: var(--c-orange);
    }

    .chart-view-intro__wheel:hover .wheel-drawing {
        transform: scale(1.02);
    }
}

.chapter-position-glyph {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: var(--space-2);

    /* font-size: var(--fs-3xl) */
}