/* ======================
   Fonts
   ====================== */
@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/static/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/static/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/static/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    src: url("/static/fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Custom font for em-dash, so readers know it's not AI :) */
@font-face {
    font-family: "QuirkDash Connected";
    src:
        url("/static/fonts/quirk-dash-connected.woff2") format("woff2"),
        url("/static/fonts/quirk-dash-connected.ttf") format("truetype");
    unicode-range: U+2014; /* EM DASH ONLY */
    font-display: swap;
}

/* ======================
   Design Tokens
   ====================== */
:root {
    /* Color Hues */
    --hue-accent: 30;
    --hue-secondary: calc(var(--hue-accent) + 180); /* Complementary */
    --hue-ink: 270;
    --hue-green: 145;
    --hue-red: 25;
    --hue-yellow: 85;
    --hue-blue: 230;
    --hue-purple: 280;

    /* Light mode */
    --L-bg: 97%;
    --L-surface: 100%;
    --L-ink: 35%;
    --L-muted: 55%;
    --L-accent: 65%;
    --L-accent-soft: 92%;

    /* Computed colors */
    --accent: oklch(var(--L-accent) 0.14 var(--hue-accent));
    --accent-dark: oklch(calc(var(--L-accent) - 10%) 0.16 var(--hue-accent));
    --accent-soft: oklch(var(--L-accent-soft) 0.03 var(--hue-accent));
    --accent-light: oklch(var(--L-accent-soft) 0.03 var(--hue-accent));
    --blob-2: oklch(var(--L-accent-soft) 0.02 var(--hue-secondary));
    --ink: oklch(var(--L-ink) 0.05 var(--hue-ink));
    --muted: oklch(var(--L-muted) 0.03 var(--hue-ink));
    --bg: oklch(var(--L-bg) 0.01 var(--hue-accent));
    --surface: oklch(var(--L-surface) 0 0);
    --success: oklch(65% 0.15 var(--hue-green));
    --error: oklch(55% 0.15 var(--hue-red));
    --warning: oklch(70% 0.15 var(--hue-yellow));
    --info: oklch(60% 0.15 var(--hue-blue));
    --purple: oklch(60% 0.15 var(--hue-purple));

    /* Layout */
    --header-height: 3.5rem;
    --max-width: 48rem;
    --content-padding: clamp(1rem, 5vw, 2rem);

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Typography */
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --line-height: 1.6;

    /* Borders & Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;
    --border-width: 2px;

    /* Shadows */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
    --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.07);
    --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    /* Pico overrides */
    --pico-primary: var(--accent);
    --pico-primary-hover: var(--accent);

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        --L-bg: 18%;
        --L-surface: 24%;
        --L-ink: 92%;
        --L-muted: 65%;
        --L-accent: 72%;
        --L-accent-soft: 30%;
    }
}

/* ======================
   Base Styles
   ====================== */
html {
    font-family: "QuirkDash Connected", "Atkinson Hyperlegible", system-ui, sans-serif;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body {
    background: var(--bg);
    background-image:
        radial-gradient(circle at 20% 80%, var(--accent-light) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, var(--blob-2) 0%, transparent 40%);
    color: var(--ink);
    line-height: var(--line-height);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

::selection {
    background: var(--accent);
    color: var(--surface);
}

/* Links */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    &:focus-visible {
        outline: var(--border-width) solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    color: var(--ink);
    font-weight: 700;
}

/* Code */
code, pre {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
    font-size: 0.9em;
}

code {
    background: var(--accent-soft);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
}

pre {
    background: var(--surface);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow-x: auto;

    & code {
        background: none;
        padding: 0;
    }
}

/* ======================
   Layout: Site Header
   ====================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 2000;
    height: var(--header-height);
    background: oklch(from var(--bg) l c h / 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--accent-soft);

    & nav {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 var(--content-padding);
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-md);
    }

    & .nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;

        & h1 {
            all: unset;
            display: contents;
        }

        & a {
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            font-weight: 500;
            color: var(--ink);
            transition: background var(--transition-fast), color var(--transition-fast);

            &:hover {
                background: var(--accent-soft);
                text-decoration: none;
            }

            &[aria-current="page"] {
                background: var(--accent);
                color: var(--surface);
            }
        }
    }

    /* Search form */
    & #search-form {
        display: flex;
        align-items: center;
        margin: 0;
        flex: 1;
        min-width: 0;
        position: relative;
    }

    & #global-search {
        all: unset;
        box-sizing: border-box;
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid var(--accent-soft);
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--ink);
        font-size: var(--font-size-sm);
        font-family: inherit;
        width: 100%;
        max-width: 20rem;
        height: auto;
        line-height: 1.4;
        transition: border-color var(--transition-fast), background var(--transition-fast);

        &:focus {
            background: var(--surface);
            border-color: var(--accent);
        }

        &::placeholder {
            color: var(--muted);
            opacity: 1;
            transition: opacity var(--transition-fast);
        }

        &:focus::placeholder {
            opacity: 0;
        }

        /* Hide the clear button in WebKit */
        &::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }
    }

    & .nav-auth {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--font-size-sm);

        & .user-url {
            color: var(--muted);
            max-width: 12rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        & a {
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--radius-sm);
            font-weight: 500;

            &.login-link {
                background: var(--accent);
                color: var(--surface);

                &:hover {
                    background: var(--accent-dark);
                    text-decoration: none;
                }
            }

            &.logout-link {
                color: var(--muted);

                &:hover {
                    background: var(--accent-soft);
                    color: var(--ink);
                    text-decoration: none;
                }
            }
        }
    }

    /* Hamburger button - hidden on desktop */
    & .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 2rem;
        height: 2rem;
        padding: var(--space-xs);
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        flex-shrink: 0;

        & span {
            display: block;
            width: 100%;
            height: 2px;
            background: var(--ink);
            border-radius: 1px;
            transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
        }

        &:hover,
        &:active {
            background: var(--accent);

            & span {
                background: var(--surface);
            }
        }
    }

    /* Mobile: hamburger menu */
    @media (max-width: 740px) {
        & .nav-toggle {
            display: flex;
        }

        & .nav-links {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 0;
            background: oklch(from var(--bg) l c h / 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--accent-soft);
            box-shadow: 0 4px 12px oklch(0 0 0 / 0.15);

            & a {
                width: 100%;
                padding: var(--space-sm) var(--content-padding);
                border-radius: 0;

                &:hover {
                    background: var(--accent);
                    color: var(--surface);
                }

                &[aria-current="page"]:hover {
                    background: oklch(from var(--accent) calc(l * 0.85) c h);
                }
            }
        }

        /* Open state */
        &.nav-open {
            & .nav-links {
                display: flex;
            }

            & .nav-toggle span:nth-child(1) {
                transform: rotate(45deg) translate(4px, 4px);
            }

            & .nav-toggle span:nth-child(2) {
                opacity: 0;
            }

            & .nav-toggle span:nth-child(3) {
                transform: rotate(-45deg) translate(4px, -4px);
            }
        }

        & #global-search {
            max-width: none;
        }

        & .nav-auth .user-url {
            display: none;
        }
    }

}

/* ======================
   Layout: Main Content
   ====================== */
main {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--content-padding);
}

/* ======================
   Layout: Site Footer
   ====================== */
.site-footer {
    padding: var(--space-lg) var(--content-padding);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--muted);

    & a {
        color: var(--muted);

        &:hover {
            color: var(--ink);
        }
    }
}

/* ======================
   Component: h-card (Profile Card)
   ====================== */
.h-card {
    text-align: center;
    max-width: 24rem;
    margin: 0 auto;

    & .u-photo {
        width: 8rem;
        height: 8rem;
        border-radius: var(--radius-full);
        object-fit: cover;
        border: var(--border-width) solid var(--ink);
        margin: 0 auto var(--space-lg);
        display: block;
    }

    & .p-name {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        margin: 0 0 var(--space-sm);
        display: inline-block;
        position: relative;

        /* Highlight effect */
        &::after {
            content: "";
            position: absolute;
            inset-inline: -0.2em;
            bottom: 0.1em;
            height: 0.35em;
            background: var(--accent-soft);
            z-index: -1;
            border-radius: var(--radius-sm);
        }
    }

    & .p-note {
        color: var(--muted);
        margin: var(--space-md) 0;
        font-size: var(--font-size-lg);
    }

    & .u-url {
        display: block;
        font-weight: 500;
        margin: var(--space-sm) 0;
    }

    & .u-email,
    & .p-tel {
        display: block;
        color: var(--muted);
        margin: var(--space-xs) 0;

        &::before {
            color: var(--accent);
            font-weight: 700;
            margin-right: var(--space-xs);
        }
    }

    & .u-email::before {
        content: "@";
    }

    & .p-tel::before {
        content: "#";
    }

    & .p-adr {
        font-style: italic;
        color: var(--muted);
        font-size: var(--font-size-sm);
    }

    /* Hide pronunciation in ruby */
    & ruby > rt {
        font-size: 80%;
        color: var(--muted);
    }
}

/* ======================
   Component: Page Title
   ====================== */
main > h1 {
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--space-lg);
}

/* ======================
   Component: h-feed (Entry List)
   ====================== */
.h-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);

    & > .p-name {
        font-size: var(--font-size-xl);
        font-weight: 700;
        margin: 0 0 var(--space-md);
    }
}

/* ======================
   Component: h-entry (Blog Entry)
   ====================== */
article.h-entry {
    background: var(--surface);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

    /* Entry title */
    & > h2 {
        all: unset;
        display: block;
        font-size: var(--font-size-xl);
        font-weight: 700;
        margin: 0 0 var(--space-sm);
        line-height: 1.3;

        &::after {
            display: none; /* No underline effect on entry titles */
        }
    }

    /* Content */
    & .e-content {
        margin: var(--space-md) 0;

        & p {
            margin: var(--space-sm) 0;
        }

        & img {
            max-width: 100%;
            height: auto;
            border-radius: var(--radius-md);
        }

        & blockquote {
            border-left: 3px solid var(--accent);
            padding-left: var(--space-md);
            margin: var(--space-md) 0;
            color: var(--muted);
            font-style: italic;
        }
    }

    /* Dates */
    & .dt-published,
    & .dt-updated {
        display: inline-block;
        font-size: var(--font-size-sm);
        color: var(--muted);
        margin-right: var(--space-sm);
    }

    & .dt-updated::before {
        content: "(updated ";
    }

    & .dt-updated::after {
        content: ")";
    }

    /* Categories/Tags */
    & .p-category {
        display: inline-block;
        font-size: var(--font-size-sm);
        color: var(--accent);
        margin-right: var(--space-sm);

        &::before {
            content: "#";
            opacity: 0.6;
        }
    }

    /* Hide permalink when entry has no name (date becomes the link instead) */
    & > .u-uid:not(.p-name) {
        display: none;
    }

    /* Hide metadata */
    & .p-post-status,
    & .p-visibility,
    & .p-sensitive {
        display: none;
    }

    /* Sensitive content indicator */
    & .p-x-sensitive {
        font-size: 0;
        display: inline-block;

        &::before {
            content: "\26A0\FE0F"; /* ⚠️ */
            font-size: var(--font-size-sm);
        }
    }

    /* Sensitive content blur */
    & .sensitive-wrapper {
        position: relative;
    }

    & .sensitive-blur {
        filter: blur(10px);
        user-select: none;
        pointer-events: none;
        transition: filter var(--transition-base);
    }

    & .sensitive-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: var(--space-sm) var(--space-md);
        background: var(--surface);
        border: 1px solid var(--accent-soft);
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: var(--font-size-sm);
        color: var(--muted);
        transition: background var(--transition-fast), color var(--transition-fast);

        &:hover {
            background: var(--accent);
            color: var(--surface);
        }
    }

    /* ======================
       Entry: Interactions
       ====================== */
    & .u-like-of,
    & .u-bookmark-of,
    & .u-repost-of,
    & .u-in-reply-to,
    & .u-follow-of {
        display: block;
        font-size: var(--font-size-sm);
        padding: var(--space-sm) 0;
        word-break: break-all;

        &::before {
            margin-right: var(--space-sm);
            opacity: 0.8;
        }
    }

    & .u-like-of::before { content: "♥ Liked"; }
    & .u-bookmark-of::before { content: "🔖 Bookmarked"; }
    & .u-repost-of::before { content: "♻ Reposted"; }
    & .u-in-reply-to::before { content: "↩ Replied to"; }
    & .u-follow-of::before { content: "⊕ Followed"; }

    /* ======================
       Entry: Media (Polaroid style)
       Excludes avatar photos inside nested h-card
       ====================== */
    & > .u-photo {
        max-width: min(100%, 20rem);
        height: auto;
        background: var(--surface);
        padding: 0.5rem;
        border: none;
        border-radius: var(--radius-sm);
        margin: var(--space-md) 0;
        box-shadow: var(--shadow-md);

        /* Portrait: thick bottom padding */
        &.portrait {
            padding-bottom: 2rem;
        }

        /* Landscape: thick right padding */
        &.landscape {
            padding-right: 2rem;
        }
    }

    & .u-video,
    & .u-audio {
        max-width: 100%;
        margin: var(--space-md) 0;
    }

    /* ======================
       Entry: Checkin / Location
       ====================== */
    & .p-checkin,
    & .p-location {
        display: block;
        background: var(--accent-soft);
        border-left: 3px solid var(--accent);
        padding: var(--space-md);
        margin: var(--space-md) 0;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;

        &::before {
            content: "📍 ";
        }

        & .checkin-name {
            display: block;
            font-weight: 600;
            margin-bottom: var(--space-sm);
        }

        & .checkin-map {
            display: block;
            width: 100%;
            height: 200px;
            border: 1px solid var(--accent-soft);
            border-radius: var(--radius-md);
        }
    }

    /* ======================
       Entry: Trip Map
       ====================== */
    & .trip-map {
        width: 100%;
        height: 300px;
        border: 1px solid var(--accent-soft);
        border-radius: var(--radius-md);
        margin: var(--space-md) 0;
    }

    /* Leaflet overrides */
    & .leaflet-container {
        & a {
            display: inline;
            padding: 0;
            margin: 0;
            color: var(--info);
        }

        & .leaflet-control-zoom a {
            display: block;
            color: var(--ink);
        }
    }

    /* ======================
       Entry: Transport Mode
       ====================== */
    & .p-transport {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-sm);
        text-transform: capitalize;
        padding: var(--space-xs) var(--space-sm);
        background: var(--accent-soft);
        border-radius: var(--radius-sm);
        margin: var(--space-sm) 0;

        &[data-transport="walk"]::before { content: "🚶"; }
        &[data-transport="run"]::before { content: "🏃"; }
        &[data-transport="bike"]::before { content: "🚴"; }
        &[data-transport="drive"]::before { content: "🚗"; }
        &[data-transport="train"]::before { content: "🚆"; }
        &[data-transport="flight"]::before { content: "✈️"; }
        &[data-transport="boat"]::before { content: "⛵"; }
        &[data-transport="other"]::before { content: "🧭"; }
    }

    /* ======================
       Entry: Status Badges
       ====================== */
    & .p-read-status,
    & .p-rsvp {
        display: inline-block;
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: var(--space-xs) var(--space-sm);
        background: var(--accent-soft);
        border-radius: var(--radius-sm);
    }

    /* ======================
       Entry: Citations (h-cite)
       ====================== */
    & .h-cite {
        display: block;
        background: var(--accent-soft);
        border-left: 3px solid var(--accent);
        padding: var(--space-md);
        margin: var(--space-md) 0;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;

        & .p-name {
            display: block;
            font-weight: 600;
            font-size: var(--font-size-lg);
            margin-bottom: var(--space-xs);
        }

        & .p-author {
            display: block;
            color: var(--muted);

            &::before {
                content: "by ";
            }
        }

        & .p-uid {
            display: block;
            font-size: var(--font-size-sm);
            color: var(--muted);
            margin-top: var(--space-sm);
        }

        & .u-url {
            display: block;
            font-size: var(--font-size-sm);
            margin-top: var(--space-xs);
        }
    }

    /* ======================
       Entry: Nested h-card (Author)
       ====================== */
    & .h-card {
        all: unset;
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-sm);

        & > * {
            display: none;
        }

        & > .u-photo {
            display: block;
            width: 1.5em;
            height: 1.5em;
            border-radius: var(--radius-full);
            margin: 0;
            border: 1px solid var(--ink);
            flex-shrink: 0;
        }

        & h3,
        & .p-name {
            all: unset;
            display: inline;
            font-size: inherit;
            font-weight: 600;
            color: var(--ink);
            margin: 0;
        }

        & a.p-name {
            cursor: pointer;
        }

        & ruby {
            display: contents;
        }

        /* Hide pronunciation */
        & rt,
        & rp,
        & .p-ipa {
            display: none;
        }
    }

    /* ======================
       Entry: Syndication
       ====================== */
    & .u-syndication {
        display: inline-block;
        font-size: var(--font-size-sm);
        color: var(--muted);
        margin-right: var(--space-sm);

        &::before {
            content: "→ ";
        }
    }

    /* ======================
       Entry: Metrics (Health/Nutrition)
       ====================== */
    & .p-weight,
    & .p-bodyfat,
    & .p-calories,
    & .p-proteins,
    & .p-carbs,
    & .p-fat,
    & .p-sleep-score,
    & .p-activity-score,
    & .p-readiness-score,
    & .p-steps,
    & .p-active-calories,
    & .p-total-calories,
    & .p-activity-low,
    & .p-activity-medium,
    & .p-activity-high,
    & .p-resting-heart-rate,
    & .p-hrv-balance,
    & .p-body-temperature,
    & .p-spo2-average,
    & .p-stress-summary,
    & .p-stress-high,
    & .p-recovery-high,
    & .p-workout-type,
    & .p-workout-calories,
    & .p-workout-duration,
    & .p-workout-distance,
    & .p-elevation-gain,
    & .p-session-type,
    & .p-session-mood {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-sm);
        padding: var(--space-xs) var(--space-sm);
        background: var(--accent-soft);
        border-radius: var(--radius-sm);
        margin-right: var(--space-sm);
        margin-bottom: var(--space-xs);
    }

    & .p-weight::before { content: "⚖️"; }
    & .p-calories::before { content: "🔥"; }
    & .p-proteins::before { content: "💪"; }
    & .p-carbs::before { content: "🍞"; }
    & .p-fat::before { content: "🧈"; }
    & .p-sleep-score::before { content: "😴"; }
    & .p-activity-score::before { content: "🏃"; }
    & .p-readiness-score::before { content: "✨"; }
    & .p-steps::before { content: "👟"; }
    & .p-active-calories::before { content: "🔥"; }
    & .p-total-calories::before { content: "🍽️"; }
    & .p-activity-low::before { content: "🚶"; }
    & .p-activity-medium::before { content: "🏃"; }
    & .p-activity-high::before { content: "🏋️"; }
    & .p-resting-heart-rate::before { content: "❤️"; }
    & .p-hrv-balance::before { content: "📊"; }
    & .p-body-temperature::before { content: "🌡️"; }
    & .p-spo2-average::before { content: "🫁"; }
    & .p-stress-summary::before { content: "😤"; }
    & .p-stress-high::before { content: "⚡"; }
    & .p-recovery-high::before { content: "🧘"; }
    & .p-workout-type::before { content: "💪"; }
    & .p-workout-calories::before { content: "🔥"; }
    & .p-workout-duration::before { content: "⏱️"; }
    & .p-workout-distance::before { content: "📏"; }
    & .p-elevation-gain::before { content: "⛰️"; }
    & .p-session-type::before { content: "🧘"; }
    & .p-session-mood::before { content: "🎭"; }

    /* Hide internal IDs */
    & .p-withings-grpid,
    & .p-fat-mass,
    & .p-oura-daily-id,
    & .p-oura-workout-id,
    & .p-oura-session-id,
    & .p-strava-activity-id {
        display: none;
    }

    /* ======================
       Entry: Footer
       ====================== */
    & .entry-footer {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
    }

    & .entry-actions {
        display: flex;
        gap: var(--space-xs);
    }

    & .entry-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        color: var(--muted);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: color var(--transition-fast);

        & svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        &:hover {
            color: var(--accent);
            text-decoration: none;
        }
    }

    & .entry-action-delete:hover {
        color: var(--error);
    }
}

/* ======================
   Component: Entry Navigation
   ====================== */
.entry-nav {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--accent-soft);

    & a {
        font-size: var(--font-size-sm);
        color: var(--muted);

        &:hover {
            color: var(--ink);
        }
    }
}

/* ======================
   Component: Pagination
   ====================== */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--accent-soft);

    & a {
        font-size: var(--font-size-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--surface);
        border: 1px solid var(--accent-soft);
        border-radius: var(--radius-md);
        color: var(--ink);

        &:hover {
            background: var(--accent-soft);
            text-decoration: none;
        }

        /* Push "Older" to the right when it's the only link */
        &[rel="next"] {
            margin-left: auto;
        }
    }
}

/* ======================
   Component: Entries Loading
   ====================== */
.entries-loading {
    text-align: center;
    padding: var(--space-lg);
    color: var(--ink-soft);
    font-size: var(--font-size-sm);
}

.entries-empty {
    text-align: center;
    padding: var(--space-2xl);
    color: var(--ink-soft);
}

/* ======================
   Page: Single Entry
   ====================== */
.single-entry {
    padding-top: var(--space-2xl);
}

/* ======================
   Page: Blogroll
   ====================== */
.blogroll {
    padding-top: var(--space-2xl);
}

.blogroll .h-feed {
    gap: var(--space-2xl);
}

/* h-entry is just a semantic wrapper, no styling */
.blogroll .h-feed > .h-entry {
    all: unset;
    display: contents;
}

.blogroll .h-feed > .h-entry > .h-card {
    all: unset;
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0 var(--space-md);
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

    /* Photo spans both rows */
    & > .u-photo {
        display: block;
        grid-column: 1;
        grid-row: 1 / 3;
        width: 4rem;
        height: 4rem;
        border-radius: var(--radius-full);
        object-fit: cover;
    }

    /* Name/URL */
    & > .p-name,
    & > a.u-url {
        display: block;
        grid-column: 2;
        font-size: var(--font-size-base);
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none;
        color: var(--ink);

        &:hover {
            color: var(--accent);
        }
    }

    /* Bio */
    & > .p-note,
    & > .e-note {
        display: block;
        grid-column: 2;
        font-size: var(--font-size-sm);
        color: var(--muted);
        margin-top: var(--space-xs);

        & a {
            color: var(--accent);
        }
    }

    /* Hide everything else (extra properties, nested h-cards) */
    & > *:not(.u-photo):not(.p-name):not(.u-url):not(.p-note):not(.e-note) {
        display: none;
    }

    & .h-card {
        display: none;
    }
}

/* ======================
   Page: Slashpages (/about, /privacy, /tos)
   ====================== */
.slashpage {
    /* Hide author h-card on slashpages */
    & .h-entry .h-card {
        display: none;
    }
}

/* ======================
   Page: Reading List
   ====================== */
.reading-list {
    padding-top: var(--space-2xl);

    & section {
        margin-bottom: var(--space-2xl);

        & > h2 {
            font-size: var(--font-size-lg);
            margin-bottom: var(--space-lg);
            color: var(--muted);
        }
    }

    & .h-feed {
        gap: var(--space-lg);
    }
}

/* ======================
   Component: Indie Card (Legacy wrapper)
   Keep for backwards compatibility with auth pages
   ====================== */
.indie-card {
    background: var(--surface);
    padding: var(--space-xl);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-lg);
    max-width: 28rem;
    margin: var(--space-xl) auto 0;

    & .client-logo,
    & .u-photo:not(.h-entry .u-photo) {
        width: 6rem;
        height: 6rem;
        border-radius: var(--radius-full);
        object-fit: cover;
        border: var(--border-width) solid var(--ink);
        margin: 0 auto var(--space-lg);
        display: block;
    }

    & .client-name,
    & > .p-name {
        font-size: var(--font-size-xl);
        font-weight: 700;
        margin: 0 0 var(--space-sm);
        text-align: center;
    }
}

/* ======================
   Page: Follow
   ====================== */
.follow-options {
    margin-block-start: 1.5rem;

    & h2 {
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-block: var(--space-md) var(--space-sm);
        padding-block-end: var(--space-xs);
        border-block-end: 1px solid var(--accent-soft);
    }

    & h2:first-of-type {
        margin-block-start: 0;
    }
}

.feed-list {
    list-style: none;
    padding: 0;
    margin: 0;

    & li {
        margin: 0;
    }

    & a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    & a:hover {
        background-color: var(--surface);
    }

    & strong {
        color: var(--accent);
    }

    & span {
        font-family: monospace;
        font-size: var(--font-size-sm);
        color: var(--muted);
    }
}


/* ======================
   Page: Compose
   ====================== */
.compose {
    max-width: var(--max-width);
    font-size: var(--font-size-sm);
}

.compose-form {
    display: grid;
    gap: var(--space-sm);
}

.compose-form select,
.compose-form input,
.compose-form textarea {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

.compose-form select,
.compose-form input:not([type="file"]):not([type="checkbox"]):not([type="hidden"]) {
    padding: var(--space-xs) var(--space-sm);
    height: auto;
}

.compose-form textarea {
    padding: var(--space-xs) var(--space-sm);
}

.compose-form input[type="file"] {
    font-size: var(--font-size-sm);
    padding: var(--space-xs);
}

.compose-form input[type="file"]::file-selector-button {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

.compose-form > textarea {
    min-height: 6rem;
}

.compose-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.compose-actions button {
    font-size: var(--font-size-sm);
    padding: var(--space-sm);
}

.compose-actions button.outline {
    --pico-background-color: var(--accent-soft);
    --pico-border-color: var(--accent-soft);
    --pico-color: var(--ink);
}

.compose-actions button.outline:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

.compose-actions button:not(.outline) {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--surface);
}

.compose-actions button:not(.outline):hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.compose-options {
    font-size: var(--font-size-sm);
}

.compose-options summary {
    cursor: pointer;
    color: var(--muted);
}

.compose-options label {
    display: block;
    margin-top: var(--space-sm);
}

.compose-options select,
.compose-options input[type="file"] {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

.compose-options input[type="checkbox"] {
    width: var(--space-md);
    height: var(--space-md);
}

.photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.photo-preview img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.photo-placeholder {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--muted);
}

.checkin-map {
    height: 200px;
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
}

/* Leaflet overrides for checkin map */
.checkin-map a {
    display: inline;
    padding: 0;
    margin: 0;
}

.checkin-map .leaflet-control-zoom a {
    display: block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    color: var(--ink);
    background: var(--surface);
}

.checkin-map .leaflet-marker-icon {
    background: transparent;
    border: none;
}

/* TipTap editor */
.compose-form .tiptap-editor {
    min-height: 10rem;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--pico-form-element-background-color);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
}

.compose-form .tiptap-editor:focus-within {
    border-color: var(--pico-form-element-active-border-color);
    outline: none;
}

.compose-form .tiptap-content {
    outline: none;
    min-height: 8rem;
}

.compose-form .tiptap-content p {
    margin: 0 0 0.75em 0;
}

.compose-form .tiptap-content p:last-child {
    margin-bottom: 0;
}

.compose-form .tiptap-content h2,
.compose-form .tiptap-content h3,
.compose-form .tiptap-content h4 {
    margin: 1em 0 0.5em 0;
}

.compose-form .tiptap-content ul,
.compose-form .tiptap-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.compose-form .tiptap-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.5em 0;
    padding-left: 1em;
    opacity: 0.8;
}

.compose-form .tiptap-content code {
    background-color: var(--pico-code-background-color);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.compose-form .tiptap-content pre {
    background-color: var(--pico-code-background-color);
    padding: var(--space-sm);
    border-radius: var(--pico-border-radius);
    overflow-x: auto;
}

.compose-form .tiptap-content pre code {
    background: none;
    padding: 0;
}

.compose-form .tiptap-content a {
    color: var(--accent);
}

/* Placeholder (from TipTap Placeholder extension) */
.compose-form .tiptap-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--pico-form-element-placeholder-color);
    pointer-events: none;
    float: left;
    height: 0;
}

/* ======================
   Forms
   ====================== */
.auth-form {
    margin-top: var(--space-lg);

    & label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--space-xs);
    }

    & input:not([type="checkbox"]):not([type="radio"]),
    & select,
    & textarea {
        width: 100%;
        padding: var(--space-sm) var(--space-md);
        border: 1px solid var(--accent-soft);
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--ink);
        font-size: var(--font-size-base);
        margin-bottom: var(--space-md);

        &:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }
    }

    & input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: var(--space-sm);
        flex-shrink: 0;
        cursor: pointer;
    }

    & .scope-group {
        margin-bottom: var(--space-md);
    }

    & .scope-description {
        font-size: var(--font-size-sm);
        color: var(--muted);
        margin: calc(-1 * var(--space-sm)) 0 var(--space-md) var(--space-lg);
    }
}

/* Buttons */
button,
[type="submit"],
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);

    &:hover {
        background: var(--accent-dark);
    }

    &:active {
        transform: scale(0.98);
    }

    &:focus-visible {
        outline: var(--border-width) solid var(--ink);
        outline-offset: 2px;
    }

    &.secondary {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--accent-soft);

        &:hover {
            background: var(--accent-soft);
        }
    }
}

.button-group {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* ======================
   Card Components (Auth pages)
   ====================== */
.card-header {
    text-align: center;
    padding-bottom: var(--space-lg);
    border-bottom: 1px dashed var(--accent-soft);
    margin-bottom: var(--space-lg);
}

.card-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-md);
    background: var(--accent-soft);
    border: var(--border-width) solid var(--ink);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

.card-title {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-sm);
}

.card-message {
    color: var(--muted);
    margin: 0;
}

.card-error {
    background: oklch(from var(--error) l c h / 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    text-align: center;
}

.card-info {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    text-align: center;
}

.card-warning {
    background: oklch(0.9 0.1 85);
    border: 1px solid oklch(0.7 0.15 85);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 0.9em;
    line-height: 1.5;

    @media (prefers-color-scheme: dark) {
        background: oklch(0.3 0.08 85);
        border-color: oklch(0.5 0.1 85);
    }
}

.card-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);

    & form {
        flex: 1;
    }

    & button {
        width: 100%;

        &.confirm {
            background: var(--success);
        }

        &.cancel {
            background: var(--error);
        }
    }
}

.unsupported-scopes {
    background: var(--accent-soft);
    border: 1px dashed var(--ink);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);

    & code {
        background: var(--surface);
        padding: 0.1em 0.3em;
        border-radius: var(--radius-sm);
    }
}

.client-header {
    text-align: center;
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--accent-soft);
    margin-bottom: var(--space-md);
}

.client-url {
    font-size: var(--font-size-sm);
    color: var(--muted);
    word-break: break-all;
}

.auth-message {
    text-align: center;
    color: var(--ink);
    margin-bottom: var(--space-md);

    & strong {
        color: var(--accent);
    }
}

/* Auth Methods (RelMeAuth provider selection) */
.auth-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.auth-method {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    text-decoration: none;
    color: var(--ink);

    &:hover {
        color: var(--accent);
    }

    & svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ======================
   Utility: Container
   ====================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* Centered content (homepage) */
.container--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - var(--header-height) - 8rem);
}

/* ======================
   Utility: Visually Hidden
   ====================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ======================
   SQL
   ====================== */
.sql {
    padding-top: var(--space-2xl);
    max-width: 100%;
}

.sql-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);

    & h2 {
        margin: 0;
    }
}

.query-section {
    margin-bottom: var(--space-xl);

    & label {
        display: block;
        font-weight: var(--font-weight-medium);
        margin-bottom: var(--space-xs);
    }

    & textarea {
        width: 100%;
        font-family: var(--font-mono);
        font-size: var(--font-size-sm);
        resize: vertical;
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--ink);
        padding: var(--space-sm);
        border-radius: var(--radius);
    }
}

.query-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);

    & button {
        padding: var(--space-xs) var(--space-md);
        background: var(--accent);
        color: var(--paper);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: var(--font-size-sm);

        &:hover {
            opacity: 0.9;
        }
    }

    & #query-status {
        font-size: var(--font-size-sm);
        color: var(--muted);
    }
}

.results-section {
    margin-bottom: var(--space-xl);

    & h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-md);
    }

    & .loading {
        color: var(--muted);
        font-style: italic;
    }
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    overflow-x: auto;
    display: block;

    & th,
    & td {
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid var(--border);
        text-align: left;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & th {
        background: var(--card);
        font-weight: var(--font-weight-medium);
        position: sticky;
        top: 0;
    }

    & tr.clickable {
        cursor: pointer;

        &:hover {
            background: var(--card);
        }
    }

    & em {
        color: var(--muted);
    }
}

.edit-section {
    margin-bottom: var(--space-xl);

    & h3 {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-md);
    }

    & .edit-hint {
        color: var(--muted);
        font-style: italic;
    }
}

.edit-meta {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    background: var(--card);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    word-break: break-all;
}

#edit-content {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    resize: vertical;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--ink);
    padding: var(--space-sm);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
}

.edit-fields {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);

    & label {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--font-size-sm);
    }

    & select {
        padding: var(--space-xs) var(--space-sm);
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--ink);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
    }
}

.edit-actions {
    display: flex;
    gap: var(--space-sm);

    & button {
        padding: var(--space-xs) var(--space-md);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: var(--font-size-sm);

        &:hover {
            opacity: 0.9;
        }
    }

    & #save-btn {
        background: var(--accent);
        color: var(--paper);
    }

    & #cancel-btn {
        background: var(--border);
        color: var(--ink);
    }
}

/* ======================
   Sync Status Indicator
   ====================== */
.sync-status {
    color: var(--muted);
    cursor: help;
    transition: color 0.2s;

    & svg {
        width: 1.25rem;
        height: 1.25rem;
        display: block;
    }
}

.sync-status[data-status="online"] { color: var(--success); }
.sync-status[data-status="offline"] { color: var(--warning); }
.sync-status[data-status="error"] { color: var(--error); }
.sync-status[data-status="disconnected"] { color: var(--muted); }

.sync-status[data-status="syncing"] {
    color: var(--info);
    animation: pulse 1s infinite;
}

.sync-status[data-status="connecting"] {
    color: var(--purple);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ======================
   Print Styles
   ====================== */
@media print {
    .site-header,
    .site-footer,
    .entry-nav {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    main {
        max-width: none;
        padding: 0;
    }

    article.h-entry {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}