/**
 * minline.js Landing Page Styles
 * Uses @layer theme to override minline.css defaults
 */

@layer theme {
    /* Font size via CSS variable on :root */
    :root {
        --base-font-size: 16px;
        font-size: var(--base-font-size);
    }

    /* WCAG 2.4.7 Focus Visible - Enhanced focus indicators */
    :focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
    }

    /* Remove default focus for mouse users, keep for keyboard */
    :focus:not(:focus-visible) {
        outline: none;
    }

    /* Accessibility utilities */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--accent);
        color: var(--text-inv);
        padding: 8px 16px;
        z-index: 1000;
        text-decoration: none;
        font-weight: 500;
        border-radius: 0 0 var(--radius) 0;

        &:focus {
            top: 0;
        }
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Header */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--surface);
        box-shadow: 0 2px 8px var(--shadow-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        z-index: 100;

        @media (min-width: 560px) {
            padding: 0 24px;
        }
    }

    .logo {
        font-weight: 600;
        font-size: 1.25rem;
        color: var(--text);
        text-decoration: none;

        span {
            color: var(--brand);
        }
    }

    /* Navigation */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text);

        @media (min-width: 960px) {
            display: none;
        }
    }

    nav {
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        width: 280px;
        background: var(--surface);
        box-shadow: -4px 0 16px var(--shadow-md);
        transform: translateX(100%);
        transition: transform 0.2s ease;
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 8px;
        z-index: 99;

        &.open {
            transform: translateX(0);
        }

        a {
            display: block;
            padding: 12px 16px;
            color: var(--text);
            text-decoration: none;
            border-radius: 8px;

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

        .nav-link {
            display: block;
            margin-top: auto;
            padding: 12px 16px;
            background: var(--accent);
            color: var(--text-inv);
            border: none;
            font: inherit;
            font-weight: 500;
            cursor: pointer;
            text-align: center;
            border-radius: var(--radius);

            &:hover {
                filter: brightness(1.1);
            }
        }

        @media (min-width: 960px) {
            position: static;
            width: auto;
            background: none;
            box-shadow: none;
            transform: none;
            flex-direction: row;
            padding: 0;
            gap: 32px;
            align-items: center;

            a,
            .nav-link {
                padding: 8px 16px;
                white-space: nowrap;
            }
            .nav-link {
                margin-top: 0;
            }
        }
    }

    /* Main content */
    main {
        margin-top: 64px;
    }

    /* Hero */
    .hero {
        text-align: center;

        @media (min-width: 960px) {
            padding: 96px 24px;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.1;

            @media (min-width: 560px) {
                font-size: 3rem;
            }
            @media (min-width: 960px) {
                font-size: 4rem;
            }
        }

        .bytes {
            font-size: 1.25rem;
            color: var(--brand);
            font-weight: 600;
            margin-bottom: 16px;

            @media (min-width: 560px) {
                font-size: 1.5rem;
            }
        }

        .tagline {
            font-size: 1.125rem;
            color: var(--muted);
            margin-bottom: 32px;

            @media (min-width: 560px) {
                font-size: 1.25rem;
            }
        }

        .cta {
            display: inline-flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;

            a {
                display: inline-block;
                padding: 14px 28px;
                background: var(--accent);
                color: var(--text-inv);
                text-decoration: none;
                border-radius: var(--radius);
                font-weight: 500;

                &:hover {
                    filter: brightness(1.1);
                }
                &.secondary {
                    background: var(--control);
                    color: var(--text);
                }
            }
        }
    }

    /* Section base - full width with alternating backgrounds */
    section {
        display: grid;
        justify-items: center;
        padding: 48px 16px;

        @media (min-width: 560px) {
            padding: 64px 24px;
        }

        > * {
            width: 100%;
            max-width: 800px;
        }

        &:nth-of-type(even) {
            background: var(--surface);

            .feature,
            .concept,
            .prefix-row,
            .filter-row:not(.highlight),
            .i18n-method,
            .i18n-usage,
            .security-feature,
            .api-row,
            .css-feature,
            .code-example pre,
            .quick-start pre,
            .download a {
                background: var(--bg);
            }
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 24px;
            text-align: center;

            @media (min-width: 560px) {
                font-size: 1.75rem;
            }
        }
    }

    /* Features */
    .features {
        .grid {
            display: grid;
            gap: 16px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }
        }

        .feature {
            background: var(--surface);
            padding: 24px;
            border-radius: var(--radius);

            h3 {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 8px;
            }

            p {
                font-size: 0.875rem;
                color: var(--muted);
                text-align: left;
                margin: 0;
            }

            code {
                font-family: ui-monospace, monospace;
                font-size: 0.8125rem;
                background: var(--control);
                padding: 2px 6px;
                border-radius: 4px;
            }
        }
    }

    /* Comparison */
    .comparison {
        .bars {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .bar {
            display: flex;
            align-items: center;
            gap: 12px;

            .label {
                width: 80px;
                font-size: 0.875rem;
                text-align: right;
                flex-shrink: 0;
            }

            .track {
                flex: 1;
                height: 24px;
                background: var(--control);
                border-radius: 4px;
                overflow: hidden;
            }

            .fill {
                height: 100%;
                background: var(--accent);
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 8px;
                font-size: 0.75rem;
                color: var(--text-inv);
                font-weight: 500;
            }

            &.highlight .fill {
                background: var(--brand);
            }
        }
    }

    /* Problem / Solution */
    .problem-solution {
        .comparison-grid {
            display: grid;
            gap: 24px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .comparison {
            padding: 24px;
            border-radius: var(--radius);

            &.react {
                background: var(--surface);
            }

            &.htma {
                background: var(--surface);
                border: 2px solid var(--brand);
            }

            h3 {
                font-size: 1.125rem;
                font-weight: 600;
                margin-bottom: 16px;
            }

            ul {
                margin: 0;
                padding-left: 20px;

                li {
                    font-size: 0.875rem;
                    color: var(--muted);
                    margin-bottom: 8px;

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    /* EASL Pattern */
    .easl-section {
        .easl-flow {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;

            @media (min-width: 768px) {
                flex-direction: row;
                justify-content: center;
                gap: 12px;
            }
        }

        .easl-step {
            background: var(--surface);
            padding: 24px;
            border-radius: var(--radius);
            text-align: center;
            min-width: 140px;

            .easl-letter {
                display: block;
                font-size: 2rem;
                font-weight: 700;
                color: var(--brand);
                margin-bottom: 8px;
            }

            h3 {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 8px;
            }

            p {
                font-size: 0.8125rem;
                color: var(--muted);
                margin: 0;
            }
        }

        .easl-arrow {
            font-size: 1.5rem;
            color: var(--muted);
            transform: rotate(90deg);

            @media (min-width: 768px) {
                transform: none;
            }
        }
    }

    /* Code example */
    .code-example {
        .code-grid {
            display: grid;
            gap: 24px;

            @media (min-width: 768px) {
                grid-template-columns: 1fr 1fr;
            }
        }

        .code-block,
        .code-result {
            display: flex;
            flex-direction: column;

            h3 {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 16px;
                text-align: center;
            }

            > pre,
            > .counter-demo {
                flex: 1;
            }
        }

        pre {
            background: var(--surface);
            padding: 24px;
            border-radius: var(--radius);
            overflow-x: auto;
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            line-height: 1.6;

            @media (min-width: 560px) {
                font-size: 0.875rem;
            }
        }

        .comment {
            color: var(--muted);
        }
        .string {
            color: var(--success);
        }
        .keyword {
            color: var(--accent);
        }

        .counter-demo {
            background: var(--surface);
            padding: 48px 24px;
            border-radius: var(--radius);
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h1 {
                font-size: 4rem;
                font-weight: 700;
                margin-bottom: 24px;
            }

            .counter-buttons {
                display: flex;
                gap: 16px;

                button {
                    width: 64px;
                    height: 64px;
                    font-size: 2rem;
                    padding: 0;
                    border-radius: var(--radius);
                }
            }
        }
    }

    /* Section intro text */
    .section-intro {
        text-align: center;
        color: var(--muted);
        margin-bottom: 24px;
        max-width: 600px;
    }

    /* Quick Start */
    .quick-start {
        .steps-grid {
            display: grid;
            gap: 24px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }

            .step:last-child {
                @media (min-width: 560px) {
                    grid-column: span 2;
                }
            }
        }

        .step {
            background: var(--surface);
            padding: 24px;
            border-radius: var(--radius);
            text-align: center;

            .step-number {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: var(--brand);
                color: var(--text-inv);
                border-radius: 50%;
                font-size: 1.25rem;
                font-weight: 700;
                margin-bottom: 16px;
            }

            h3 {
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 16px;
            }

            pre {
                text-align: left;
            }
        }

        pre {
            background: var(--surface);
            padding: 24px;
            border-radius: var(--radius);
            overflow-x: auto;
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            line-height: 1.6;
        }

        .string {
            color: var(--success);
        }
        .keyword {
            color: var(--accent);
        }
    }

    /* Core Concepts */
    .core-concepts {
        .concept-grid {
            display: grid;
            gap: 16px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas:
                    "set def"
                    "html html"
                    "result result";
                gap: 24px;
            }
        }

        .concept {
            background: var(--surface);
            padding: 20px;
            border-radius: var(--radius);

            &:nth-child(1) {
                grid-area: set;
            }
            &:nth-child(2) {
                grid-area: def;
            }
            &:nth-child(3) {
                grid-area: html;
            }
            &:nth-child(4) {
                grid-area: result;
            }

            h3 {
                font-size: 0.9375rem;
                font-weight: 600;
                margin-bottom: 12px;
                color: var(--accent);
            }

            pre {
                font-family: ui-monospace, monospace;
                font-size: 0.75rem;
                line-height: 1.5;
                margin: 0;
                overflow-x: auto;
            }
        }

        .result-output {
            background: var(--bg);
            padding: 16px 20px;
            border-radius: 8px;
            border: 1px dashed var(--border);

            h1 {
                font-size: 1.25rem;
                margin: 0 0 8px;
            }

            nav {
                display: inline-block;
                background: var(--accent);
                color: var(--text-inv);
                padding: 4px 12px;
                border-radius: 4px;
                font-size: 0.875rem;
                margin-bottom: 8px;
            }

            ul {
                margin: 0;
                padding-left: 20px;

                li {
                    font-size: 0.875rem;
                }
            }
        }
    }

    /* Prefixes */
    .prefixes {
        .prefix-table {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .prefix-row {
            display: grid;
            grid-template-columns: 70px 1fr;
            gap: 12px;
            padding: 12px 16px;
            background: var(--surface);
            border-radius: 8px;
            align-items: center;

            @media (min-width: 560px) {
                grid-template-columns: 70px 1fr auto;
            }

            code {
                font-family: ui-monospace, monospace;
                font-size: 0.8125rem;
                color: var(--accent);
                font-weight: 600;
            }

            span {
                font-size: 0.875rem;
                color: var(--text);
            }

            code.example {
                display: none;
                font-size: 0.75rem;
                color: var(--muted);
                font-weight: 400;

                @media (min-width: 560px) {
                    display: block;
                }
            }
        }
    }

    /* Filters */
    .filters {
        .filter-grid {
            display: grid;
            gap: 6px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .filter-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 12px;
            background: var(--surface);
            border-radius: 6px;
            font-size: 0.8125rem;

            code {
                font-family: ui-monospace, monospace;
                color: var(--accent);
                font-weight: 500;
            }

            span {
                color: var(--muted);
                font-family: ui-monospace, monospace;
                font-size: 0.75rem;
            }

            &.highlight {
                background: var(--accent);

                code,
                span {
                    color: var(--text-inv);
                }
            }
        }
    }

    /* i18n Section */
    .i18n-section {
        .i18n-grid {
            display: grid;
            gap: 16px;
            margin-bottom: 24px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .i18n-method {
            background: var(--surface);
            padding: 20px;
            border-radius: var(--radius);

            h3 {
                font-size: 0.875rem;
                font-weight: 600;
                margin-bottom: 12px;
            }

            pre {
                font-family: ui-monospace, monospace;
                font-size: 0.75rem;
                line-height: 1.5;
                margin: 0;
            }
        }

        .i18n-usage {
            background: var(--surface);
            padding: 20px;
            border-radius: var(--radius);
            font-family: ui-monospace, monospace;
            font-size: 0.75rem;
            line-height: 1.6;
            overflow-x: auto;
        }
    }

    /* Security */
    .security {
        .security-grid {
            display: grid;
            gap: 16px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .security-feature {
            background: var(--surface);
            padding: 20px;
            border-radius: var(--radius);

            h3 {
                font-size: 0.875rem;
                font-weight: 600;
                margin-bottom: 12px;
            }

            ul {
                margin: 0;
                padding-left: 20px;

                li {
                    font-size: 0.875rem;
                    color: var(--muted);
                    margin-bottom: 4px;
                }
            }

            pre {
                font-family: ui-monospace, monospace;
                font-size: 0.75rem;
                line-height: 1.5;
                margin: 0;
            }
        }
    }

    /* API Reference */
    .api {
        .api-table {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .api-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            background: var(--surface);
            border-radius: 6px;

            code {
                font-family: ui-monospace, monospace;
                font-size: 0.8125rem;
                color: var(--accent);
            }

            span {
                font-size: 0.8125rem;
                color: var(--muted);
            }
        }
    }

    /* CSS Section */
    .css-section {
        .css-grid {
            display: grid;
            gap: 16px;

            @media (min-width: 560px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .css-feature {
            background: var(--surface);
            padding: 20px;
            border-radius: var(--radius);

            h3 {
                font-size: 0.875rem;
                font-weight: 600;
                margin-bottom: 12px;
                color: var(--brand);
            }

            pre {
                font-family: ui-monospace, monospace;
                font-size: 0.75rem;
                line-height: 1.5;
                margin: 0;
                overflow-x: auto;
            }
        }
    }

    /* Download */
    .download {
        text-align: center;

        .options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-width: 400px;
            margin: 0 auto;

            @media (min-width: 560px) {
                flex-direction: row;
                max-width: none;
                justify-content: center;
            }
        }

        a {
            display: block;
            padding: 16px 24px;
            background: var(--surface);
            color: var(--text);
            text-decoration: none;
            border-radius: var(--radius);
            font-weight: 500;

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

            small {
                display: block;
                font-size: 0.75rem;
                color: var(--muted);
                font-weight: 400;
                margin-top: 4px;
            }
        }
    }

    /* Footer */
    footer {
        padding: 32px 16px;
        text-align: center;
        border-top: 1px solid var(--border);
        margin-top: 48px;

        @media (min-width: 560px) {
            padding: 48px 24px;
        }

        .min2max {
            font-size: 0.875rem;
            color: var(--muted);
            margin-bottom: 8px;

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

        .contact {
            font-size: 0.875rem;
            color: var(--muted);
            a {
                color: var(--muted);
            }
        }

        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 16px 0;
        }

        .badge {
            display: inline-block;
            font-size: 0.6875rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 4px;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .badge-freebsd {
            background: #ab2b28;
        }
        .badge-jails {
            background: #8b4513;
        }
        .badge-caddy {
            background: #22b573;
        }
        .badge-js {
            background: #f7df1e;
            color: #1a1a1a;
        }
        .badge-html {
            background: #e34f26;
        }
        .badge-css {
            background: #1572b6;
        }
        .badge-svg {
            background: #ffb13b;
            color: #1a1a1a;
        }
        .badge-rust {
            background: #dea584;
            color: #1a1a1a;
        }

        .dogfood {
            font-size: 0.75rem;
            color: var(--muted);
            font-style: italic;
            margin: 8px 0 16px;
        }
    }

    /* Wizard Dialog */
    .wizard {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        section {
            min-width: 100%;
            max-width: 100%;
            padding: 40px 24px 32px;
            scroll-snap-align: start;
            scroll-snap-stop: always;

            @media (min-width: 560px) {
                padding: 40px 32px 32px;
            }
        }
    }

    .dialog-footer {
        padding: 0 24px 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        @media (min-width: 560px) {
            padding: 0 32px 32px;
        }
    }

    .dialog-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    /* Lang Switcher */
    nav.lang-switcher {
        display: grid;
        grid-template-columns: auto auto;
        gap: 8px;
        background: var(--surface);
        padding: 8px;
        border-radius: var(--radius);
        box-shadow: 0 4px 16px var(--shadow-md);
        height: fit-content;

        @media (max-width: 559px) {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateX(calc(100% - 24px)) translateY(-50%);
            transition: transform 0.2s ease;
            z-index: 10;
            padding-left: 24px;

            &::before {
                content: "◀";
                position: absolute;
                left: 4px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12px;
                color: var(--muted);
            }

            &.open {
                transform: translateX(0) translateY(-50%);

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

    .lang-col {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .lang-sep {
        border: none;
        border-top: 1px solid var(--border);
        margin: 8px 0;
    }

    .lang-switcher button {
        width: 36px;
        height: 36px;
        padding: 4px;
        background: none;
        border: 2px solid transparent;
        border-radius: 8px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
        }

        &:hover {
            border-color: var(--border);
            filter: none;
        }

        &.active {
            border-color: var(--accent);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .wizard,
        nav,
        .lang-switcher {
            scroll-behavior: auto;
            transition: none;
        }
    }
}