/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* Copyright (C) 2025-2026 Kaspar Bredahl Rasmussen */
/* This file is part of Canvas Designer. See LICENSE.md for terms. */
/* app-kit/app-kit.css: the app kit's two pages, on the tokens in site-pages.css */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.container { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.site-footer .container, .site-header .container { max-width: 1100px; }
.lang-toggle a { padding: 6px 2px 4px; border-bottom: 2px solid transparent; color: inherit; text-decoration: none; }
.lang-toggle a:hover { color: var(--ui-ink); }
.lang-toggle [aria-current] { padding: 6px 2px 4px; border-bottom: 2px solid var(--ui-red); color: var(--ui-ink); }

.kit-download { margin: 32px 0 8px; text-align: center; }
.kit-download__button {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--ui-radius);
    background: var(--ui-red);
    color: var(--ui-white);
    font-weight: 600;
    text-decoration: none;
}
.kit-download__button:hover { background: var(--ui-red-deep); }
.kit-download__meta { margin-top: 10px; font-size: 0.88em; color: var(--ui-ink-soft); }

.kit-content { padding-top: 16px; padding-bottom: 56px; }
.kit-content section { margin-top: 40px; }
.kit-content h2 { margin-bottom: 10px; font: 600 1.6em/1.2 var(--ui-serif); color: var(--ui-ink); }
.kit-content p { margin-bottom: 12px; }
.kit-content ul, .kit-content ol { margin: 0 0 12px 0; padding-left: 22px; }
.kit-content li { margin-bottom: 6px; }
.kit-content a { color: var(--ui-red-deep); text-underline-offset: 2px; }
.kit-content code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ui-paper-deep);
    font: 0.88em var(--ui-mono);
    overflow-wrap: anywhere;
}
.kit-table-wrap { overflow-x: auto; }
.kit-table { width: 100%; border-collapse: collapse; }
.kit-table th, .kit-table td { padding: 10px 12px; border-bottom: 1px solid var(--ui-rule); text-align: left; vertical-align: top; }
.kit-table th { font-weight: 600; }
.kit-note {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--ui-red);
    background: var(--ui-white);
}
.kit-note p:last-child { margin-bottom: 0; }