/* Site-specific styles layered over the apollo theme.
 *
 * Registered via [extra].stylesheets in config.toml, which apollo's
 * header.html turns into a <link> after its own stylesheets — so these rules
 * win on specificity ties without !important.
 */

/* ---------------------------------------------------------------------------
 * Page-kind badges
 *
 * Four content types: post, project, reference, page. The badge carries its
 * type as text, so colour is a redundant second channel rather than the only
 * one — it still reads correctly in monochrome, and for anyone who cannot
 * distinguish the hues.
 *
 * Colours are scoped to :root.light / :root.dark because apollo switches
 * themes by toggling which stylesheet is enabled, not via
 * prefers-color-scheme — a @media query would not follow the theme button.
 * The unscoped block below is the fallback for the instant before the theme
 * script sets the class.
 * ------------------------------------------------------------------------ */

.kind {
    display: inline-block;
    font-family: var(--mono-text-font);
    font-size: 0.72rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding: 0.05em 0.45em;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-1);
    color: var(--text-1);
    white-space: nowrap;
    vertical-align: middle;
}

:root.light .kind-post {
    color: #1d4ed8;
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

:root.light .kind-project {
    color: #b45309;
    background-color: #fffbeb;
    border-color: #fde68a;
}

:root.light .kind-reference {
    color: #0f766e;
    background-color: #f0fdfa;
    border-color: #99f6e4;
}

:root.dark .kind-post {
    color: #93c5fd;
    background-color: rgba(59, 130, 246, 0.14);
    border-color: rgba(147, 197, 253, 0.32);
}

:root.dark .kind-project {
    color: #fcd34d;
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(252, 211, 77, 0.32);
}

:root.dark .kind-reference {
    color: #5eead4;
    background-color: rgba(20, 184, 166, 0.14);
    border-color: rgba(94, 234, 212, 0.32);
}

/* Listing rows: the date already sits in a left gutter column, so the badge
 * stacks under it. The gutter is one grid child, keeping apollo's
 * `auto 1fr` .post-header grid at two children.
 */
.post-list .post-header .post-gutter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

/* Below apollo's 640px breakpoint .post-header stacks into rows, so the
 * gutter goes horizontal to avoid a tall column of two stacked chips.
 */
@media all and (max-width: 640px) {
    .post-list .post-header .post-gutter {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
}

/* On a single page the badge joins the meta line next to the date. */
.title .meta .kind {
    margin-right: 0.35rem;
}

/* On a card the badge sits above the title.
 *
 * .card-content is a flex column, and flex items stretch to the full cross-axis
 * by default — which made the badge span the whole card width regardless of
 * `display: inline-block`. align-self shrinks it back to its content. The
 * card's own `gap: 12px` provides the spacing below, so no margin here.
 */
.card-content > .kind {
    align-self: flex-start;
}