/* View Transitions */
@view-transition {
    navigation: auto;
}

.site-nav {
    view-transition-name: site-nav;
}
.repo-header {
    view-transition-name: repo-header;
}
.breadcrumb {
    view-transition-name: breadcrumb;
}

/* ============================================================
   @layer reset
   ============================================================ */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100dvh;
        min-width: 500px;
    }
    img,
    video {
        max-width: 100%;
        height: auto;
    }
    button,
    input,
    textarea,
    select {
        font: inherit;
    }
    a {
        color: inherit;
    }
    ul,
    ol {
        list-style: none;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
        line-height: 1.2;
    }
    pre,
    code {
        font-family: var(--font-mono);
    }
}

/* ============================================================
   @layer tokens
   ============================================================ */
@layer tokens {
    :root {
        /* Colors — light */
        --color-bg: #ffffff;
        --color-bg-subtle: #f6f8fa;
        --color-bg-inset: #eef0f2;
        --color-border: #d0d7de;
        --color-border-muted: #e4e7eb;
        --color-text: #1f2328;
        --color-text-muted: #656d76;
        --color-link: #0969da;
        --color-link-hover: #0550ae;

        --color-accent: #fd7e14;
        --color-accent-bg: #fff3cd;

        --color-success: #1a7f37;
        --color-success-bg: #dafbe1;
        --color-danger: #cf222e;
        --color-danger-bg: #ffebe9;
        --color-warning: #9a6700;
        --color-warning-bg: #fff8c5;
        --color-merged: #8250df;
        --color-merged-bg: #fbefff;

        /* Typography */
        --font-sans:
            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-mono:
            ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;

        /* Spacing */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;

        /* Border radius */
        --radius-sm: 4px;
        --radius-md: 6px;
        --radius-lg: 8px;
        --radius-full: 9999px;

        /* Shadows */
        --shadow-sm: 0 1px 0 rgba(27, 31, 36, 0.04);
        --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
        --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: #0d1117;
            --color-bg-subtle: #161b22;
            --color-bg-inset: #1c2128;
            --color-border: #30363d;
            --color-border-muted: #21262d;
            --color-text: #e6edf3;
            --color-text-muted: #7d8590;
            --color-link: #58a6ff;
            --color-link-hover: #79c0ff;

            --color-accent: #f0883e;
            --color-accent-bg: #3d2f00;

            --color-success: #3fb950;
            --color-success-bg: #0d2b19;
            --color-danger: #f85149;
            --color-danger-bg: #2d1419;
            --color-warning: #d29922;
            --color-warning-bg: #2c2000;
            --color-merged: #bc8cff;
            --color-merged-bg: #1e0b3e;
        }
    }

    /* Explicit theme overrides — applied via data-theme attribute set by cookie */
    :root[data-theme="dark"] {
        --color-bg: #0d1117;
        --color-bg-subtle: #161b22;
        --color-bg-inset: #1c2128;
        --color-border: #30363d;
        --color-border-muted: #21262d;
        --color-text: #e6edf3;
        --color-text-muted: #7d8590;
        --color-link: #58a6ff;
        --color-link-hover: #79c0ff;
        --color-accent: #f0883e;
        --color-accent-bg: #3d2f00;
        --color-success: #3fb950;
        --color-success-bg: #0d2b19;
        --color-danger: #f85149;
        --color-danger-bg: #2d1419;
        --color-warning: #d29922;
        --color-warning-bg: #2c2000;
        --color-merged: #bc8cff;
        --color-merged-bg: #1e0b3e;
    }
    :root[data-theme="light"] {
        --color-bg: #ffffff;
        --color-bg-subtle: #f6f8fa;
        --color-bg-inset: #eef0f2;
        --color-border: #d0d7de;
        --color-border-muted: #e4e7eb;
        --color-text: #1f2328;
        --color-text-muted: #656d76;
        --color-link: #0969da;
        --color-link-hover: #0550ae;
        --color-accent: #fd7e14;
        --color-accent-bg: #fff3cd;
        --color-success: #1a7f37;
        --color-success-bg: #dafbe1;
        --color-danger: #cf222e;
        --color-danger-bg: #ffebe9;
        --color-warning: #9a6700;
        --color-warning-bg: #fff8c5;
        --color-merged: #8250df;
        --color-merged-bg: #fbefff;
    }
}

/* ============================================================
   @layer layout
   ============================================================ */
@layer layout {
    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        color: var(--color-text);
        background: var(--color-bg);
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100dvh;
    }

    .site-header {
        background: var(--color-bg-subtle);
        border-bottom: 1px solid var(--color-border);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .site-nav {
        max-width: 1200px;
        margin: 0 auto;
        padding: var(--space-3) var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .site-logo {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        text-decoration: none;
        font-weight: 700;
        font-size: var(--text-lg);
        color: var(--color-text);
    }

    .logo-icon {
        width: 1.6em;
        height: 1.6em;
        display: block;
        flex-shrink: 0;
    }

    .nav-links {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .site-main {
        padding: var(--space-8) var(--space-4);
        min-width: 0;
    }

    .site-footer {
        text-align: center;
        padding: var(--space-6) var(--space-4);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        border-top: 1px solid var(--color-border);
    }

    .container {
        max-width: 1000px;
        margin: 0 auto;
        overflow-x: clip;
    }

    .container-narrow {
        max-width: 680px;
    }

    .inline-form {
        display: inline;
    }

    /* --- Two-step delete confirmation --- */
    .confirm-details {
        position: relative;
        display: inline-block;
    }
    .confirm-details > summary {
        list-style: none;
    }

    .confirm-popup {
        position: absolute;
        right: 0;
        top: calc(100% + var(--space-1));
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-3) var(--space-4);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        white-space: nowrap;
        z-index: 100;
        font-size: var(--text-sm);
        color: var(--color-text-muted);
    }
}