/*
 * The indexable content pages: the indicator index, the indicator pages and the
 * guides (indicators.ejs, indicator.ejs, guide.ejs). Chrome comes from base.css;
 * this file only sets the reading layout.
 */

.content-page {
    flex: 1 0 auto;
    padding-block: clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}

/* a comfortable line length for reading, on every screen */
.content-wrap {
    max-width: var(--measure);
}

.breadcrumbs {
    font-size: var(--fs-md);
    color: var(--text-subtle);
    margin-bottom: 1.25rem;
}

.prose {
    overflow-wrap: break-word;
}

.prose h1 {
    font-size: var(--fs-page-title);
    margin-bottom: 1rem;
}

.prose h2 {
    font-size: var(--fs-lg);
    margin: 2rem 0 .6rem;
}

.prose p,
.prose ul,
.prose ol {
    margin: 0 0 .9rem;
}

.prose ul,
.prose ol {
    padding-left: var(--space-5);
}

.prose li + li {
    margin-top: .35rem;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.eyebrow {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.lede {
    font-size: 1.1rem;
}

.score-note {
    margin-top: 2rem;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.score-note h2 {
    margin-top: 0;
    font-size: 1.05rem;
}

.score-note p:last-child {
    margin-bottom: 0;
}

/* one quiet line, not a card: it must not read as part of the explanation */
.heartid-line {
    margin-top: 1.5rem;
    font-size: var(--fs-md-plus);
    color: var(--text-muted);
}

.prose .heartid-line a {
    color: inherit;
}

.prose .heartid-line a:hover {
    color: var(--brand);
}

.indicator-group + .indicator-group {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
}

.not-scored-head {
    margin-bottom: .3rem;
    color: var(--text-muted);
    font-size: var(--fs-md-plus);
}

.not-scored {
    color: var(--text-muted);
    font-size: var(--fs-md-plus);
}

/*
 * The privacy policy and terms of use (privacy.ejs, terms.ejs), sectioned as Vantage's legal pages are
 * (vantage.heartbeat.me/terms): numbered sections, each with a link to itself, and an "On this page" list that sits
 * above them on a narrow screen and beside them, sticky, from 64rem. Both lists are numbered by CSS counters,
 * so a section a switch adds or removes renumbers the list and the headings alike.
 */

.content-wrap.legal-wrap {
    max-width: 56rem;
}

.legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
}

.prose .legal-head h1 {
    margin: 0 0 var(--space-1);
}

.legal-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.legal-lead > p {
    color: var(--text-muted);
}

.legal-lead > :last-child {
    margin-bottom: 0;
}

.legal h3 {
    font-size: var(--fs-md-plus);
    margin: 1.25rem 0 .4rem;
}

/* "On this page": a card on a narrow screen */
.legal-toc {
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.legal-toc-label {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.prose .legal-toc ol {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: legal-toc;
}

.prose .legal-toc li {
    display: flex;
    gap: .35em;
    margin: 0;
    color: var(--brand);
    font-size: var(--fs-md);
    counter-increment: legal-toc;
}

.legal-toc li::before {
    content: counter(legal-toc) ".";
    min-width: 1.4em;
    font-variant-numeric: tabular-nums;
}

.prose .legal-toc a {
    color: inherit;
    text-decoration: none;
}

.prose .legal-toc a:hover {
    text-decoration: underline;
}

.legal-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    counter-reset: legal-section;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-muted);
    counter-increment: legal-section;
    /* the header scrolls away, so a linked section only needs a little air above it */
    scroll-margin-top: var(--space-6);
}

.prose .legal-section > * {
    margin: 0;
}

.prose .legal-section > h3 {
    margin-top: var(--space-2);
    color: var(--text);
}

.legal-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.prose .legal-section-head h2 {
    margin: 0;
    color: var(--text);
}

.legal-section-head h2::before {
    content: counter(legal-section) ". ";
}

/* the link to a section, to copy: a 32px round target */
.prose .legal-anchor {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-top: -.15rem;
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
}

.prose .legal-anchor:hover {
    background: var(--surface-2);
    color: var(--brand);
}

.legal-anchor:focus-visible {
    border-radius: 50%;
}

.legal-section:target {
    padding-left: var(--space-3);
    border-left: 2px solid var(--brand);
}

/* beside the sections, sticky, once there is room for both */
@media (min-width: 64rem) {
    .legal {
        grid-template-columns: 12rem minmax(0, 1fr);
        column-gap: 3rem;
    }

    .legal-head {
        grid-area: 1 / 2;
    }

    .legal-lead {
        grid-area: 2 / 2;
    }

    .legal-sections {
        grid-area: 3 / 2;
    }

    .legal-toc {
        grid-column: 1;
        grid-row: 2 / span 2;
        align-self: start;
        position: sticky;
        top: var(--space-6);
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        /* room for the focus ring inside the scrolling box */
        padding: 3px;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .prose .legal-toc li {
        color: var(--text-muted);
    }

    .prose .legal-toc a:hover {
        color: var(--brand);
    }
}

@supports selector(:has(a)) {
    @media (prefers-reduced-motion: no-preference) {
        html:has(.legal-sections) {
            scroll-behavior: smooth;
        }
    }
}

/* a feature described before it ships */
.legal-status {
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-left: 3px solid var(--border);
    border-radius: var(--radius-sm);
}

/* "Upcoming changes": a scheduled change's sections, shown before it takes effect (lib/policy_changes) */
.legal-upcoming {
    margin: 0 0 1.5rem;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-strong);
    border-radius: var(--radius);
}

.legal-upcoming > h2 {
    margin-top: 0;
}

.legal-upcoming-change + .legal-upcoming-change {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* a fact still to be confirmed, highlighted so a draft never passes for the final text */
.draft-placeholder {
    background: var(--surface-2);
    color: var(--text);
    outline: 1px dashed var(--text-muted);
    padding: 0 .2em;
    font-weight: 600;
}