/* ── Commonplace ──────────────────────────────────────────────────────────── */

/* ── Intro ────────────────────────────────────────────────────────────────── */

.cp-intro {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* ── View toggle ──────────────────────────────────────────────────────────── */

.cp-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0 2.5rem;
}

.cp-toggle-btn {
    font-family: var(--font-ui);
    font-size: 0.73rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cp-toggle-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.cp-toggle-btn.is-active {
    color: var(--text);
    border-color: var(--text);
}

/* ── Theme sections ───────────────────────────────────────────────────────── */

.cp-theme-heading {
    font-family: var(--font-ui);
    font-size: 0.73rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 400;
    margin: 2.5rem 0 1.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.cp-theme-section:first-child .cp-theme-heading {
    margin-top: 0;
}

/* ── Entry ────────────────────────────────────────────────────────────────── */

.cp-entry {
    margin: 0 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-muted);
}

.cp-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ── Quote block — overrides default #markdownBody blockquote ─────────────── */

#markdownBody .cp-quote {
    background-image: none;
    padding-left: 0;
    color: var(--text);
    margin: 0 0 0.5rem;
}

#markdownBody .cp-quote p {
    margin: 0;
    line-height: 1.75;
}

/* ── Attribution ──────────────────────────────────────────────────────────── */

.cp-attribution {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.cp-attribution a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cp-attribution a:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* ── Commentary ───────────────────────────────────────────────────────────── */

.cp-commentary {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0.7rem 0 0;
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */

.cp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.7rem;
}

.cp-tag {
    font-family: var(--font-ui);
    font-size: 0.67rem;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-muted);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.cp-empty {
    color: var(--text-muted);
    font-style: italic;
}