/* Kanade 0.5.3 - shared reading surfaces and responsive containment.
 * Loaded last by the public, application, authentication and error layouts.
 * No fixed content heights, hidden text or global overflow-x masking.
 */
:root {
    --reading-radius: 18px;
    --reading-shadow: 0 8px 32px #17366608;
    --reading-code-bg: #f1f5fc;
    --reading-code-text: #263e60;
    --reading-code-line: #d9e3f2;
    --reading-note-bg: #edf3ff;
    --reading-note-text: #355785;
    --reading-note-line: #cfdef7;
}
:root[data-theme=dark] {
    --reading-shadow: 0 12px 36px #02081924;
    --reading-code-bg: #101e34;
    --reading-code-text: #c9daf5;
    --reading-code-line: #334767;
    --reading-note-bg: #1b2d4a;
    --reading-note-text: #b9cdee;
    --reading-note-line: #3a5277;
}

/* Shared structure of public pages. The homepage keeps its own composition. */
.site-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.site-body > main { flex: 1 0 auto; min-width: 0; }
.site-body > .site-footer { margin-top: auto; }
.site-body :is(.page-hero, .article-card, .docs-article, .site-alert, .site-empty) {
    overflow-wrap: anywhere;
}
.site-body .page-hero { padding-block: clamp(40px, 5vw, 68px) clamp(30px, 4vw, 48px); }
.site-body .page-hero h1 { line-height: 1.15; text-wrap: balance; }
.site-body .page-hero > p { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.site-body :is(.article-grid, .contact-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
    align-items: stretch;
    margin-bottom: clamp(36px, 5vw, 64px);
}
.site-body :is(.article-grid, .contact-grid, .feature-grid) > * { min-width: 0; }
.site-body :is(.article-card, .contact-card, .feature-grid > article, .docs-article) {
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--reading-radius);
    background: var(--surface);
    box-shadow: var(--reading-shadow);
    color: var(--text);
    min-width: 0;
}
.site-body :is(.article-card, .contact-card, .feature-grid > article) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.site-body :is(.article-card, .contact-card, .feature-grid > article) .feature-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    margin: 0 0 24px;
    border: 1px solid var(--reading-note-line);
    border-radius: 13px;
    background: var(--reading-note-bg);
    color: var(--blue);
}
.site-body :is(.article-card, .contact-card, .feature-grid > article) :is(h2, h3) {
    color: var(--navy);
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: -.4px;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}
.site-body :is(.article-card, .contact-card, .feature-grid > article) p {
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.85;
    margin: 0 0 16px;
}
.site-body :is(.article-card, .contact-card, .feature-grid > article) > :last-child { margin-bottom: 0; }
.site-body :is(.article-card, .contact-card) > .site-button { margin-top: auto; }
.site-body .k-status-value { font-size: 1.125rem; line-height: 1.55; }

/* Documentation and all three legal pages use the same reading surface. */
.site-body .docs-article {
    max-width: 900px;
    margin-block: 0 clamp(40px, 6vw, 80px);
    font-size: 1rem;
    line-height: 1.85;
}
.site-body .docs-article :is(h2, h3) {
    margin-block: 2em .7em;
    color: var(--navy);
    line-height: 1.35;
    letter-spacing: -.4px;
    scroll-margin-top: 24px;
}
.site-body .docs-article h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.site-body .docs-article h3 { font-size: 1.125rem; }
.site-body .docs-article :is(p, ul, ol, dl) { margin-block: 1em; color: var(--muted); }
.site-body .docs-article :is(ul, ol) { padding-inline-start: 1.5em; }
.site-body .docs-article li + li { margin-top: .5em; }
.site-body .docs-article > :first-child { margin-top: 0; }
.site-body .docs-article > :last-child { margin-bottom: 0; }
.site-body .docs-article :is(strong, b) { color: var(--text); }
.site-body .docs-article a:not(.site-button) {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: .18em;
}
.site-body .legal-copy { color: var(--text); }
.site-body .legal-text { line-height: 1.9; overflow-wrap: anywhere; }
.site-body .site-alert {
    display: block;
    padding: 18px 22px;
    border: 1px solid var(--reading-note-line);
    border-radius: 12px;
    background: var(--reading-note-bg);
    color: var(--reading-note-text);
    font-size: .9375rem;
    line-height: 1.8;
    margin-block: 24px;
}
.site-body .site-alert a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.site-body .site-empty { color: var(--muted); background: var(--surface); }
.site-body .offer-filter { max-width: 100%; flex-wrap: wrap; background: var(--soft); border-color: var(--line); }
.site-body .offer-filter a { white-space: normal; overflow-wrap: anywhere; }
.site-body .offer-filter a.selected { background: #245bff; color: #fff; }
.site-body .ipv6-note { min-width: 0; flex-wrap: wrap; }
.site-body .ipv6-note > div { min-width: 0; flex: 1 1 240px; }
.site-body .ipv6-note p { color: var(--muted); overflow-wrap: anywhere; font-size: .875rem; }
.site-body .site-button { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.site-body :is(.site-cta, .k-footer) > * { min-width: 0; }
.site-body .site-cta { gap: 24px; }
.site-body .site-cta :is(h2, p) { overflow-wrap: anywhere; }
.site-body .k-footer :is(p, small, a) { overflow-wrap: anywhere; }
.site-body :is(.feature-grid, .contact-grid, .article-grid) .site-button > .icon { flex: none; }

/* Code blocks keep their whitespace and scroll inside their own container. */
.site-body .docs-article pre,
body:not(.site-body) .prose pre {
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: clamp(16px, 2vw, 22px);
    margin-block: 22px;
    border: 1px solid var(--reading-code-line);
    border-radius: 12px;
    background: var(--reading-code-bg);
    color: var(--reading-code-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .875rem;
    line-height: 1.8;
    text-align: left;
    white-space: pre;
    overflow: auto;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 4;
    overscroll-behavior-inline: contain;
}
.site-body .docs-article pre code,
body:not(.site-body) .prose pre code {
    display: block;
    min-width: max-content;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    white-space: inherit;
    overflow-wrap: normal;
    word-break: normal;
}
.site-body .docs-article :not(pre) > code {
    padding: .1em .35em;
    border-radius: 4px;
    background: var(--reading-code-bg);
    color: var(--reading-code-text);
    font-size: .9em;
    overflow-wrap: anywhere;
}

/* Application surfaces: keep the existing dashboard, chart and form structure. */
body:not(.site-body) :is(.app-shell, .main, .prose, .panel-body, .form-section,
    .summary-card, .stack, .auth-form, .auth-form-container, .error-card) { min-width: 0; }
body:not(.site-body) :is(.prose, .panel-heading, .form-copy, .preserved-text,
    .summary-details, .error-card, .node-card, .auth-help, .secure-note) { overflow-wrap: anywhere; }
body:not(.site-body) .panel-heading { flex-wrap: wrap; }
body:not(.site-body) .panel-heading > * { min-width: 0; }
body:not(.site-body) .panel-body.prose { padding: clamp(20px, 2.5vw, 28px); }
body:not(.site-body) .prose :is(p, li, dd) { font-size: .875rem; line-height: 1.85; }
body:not(.site-body) .prose h2 { font-size: 1.125rem; line-height: 1.4; }
body:not(.site-body) .prose h3 { font-size: 1rem; line-height: 1.45; margin-top: 26px; }
body:not(.site-body) .prose > :first-child { margin-top: 0; }
body:not(.site-body) .prose > :last-child { margin-bottom: 0; }
body:not(.site-body) .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .18em; }
body:not(.site-body) .notice { display: flow-root; }
body:not(.site-body) .notice > .icon:first-child { float: inline-start; margin-inline-end: 9px; margin-top: .25em; }
body:not(.site-body) .notice :is(strong, a, code, span) { overflow-wrap: anywhere; }
body:not(.site-body) .notice a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
body:not(.site-body) .button-group { flex-wrap: wrap; }
body:not(.site-body) .button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: center; }
body:not(.site-body) .button > .icon { flex: none; }
body:not(.site-body) .inline-form > input { min-width: 0; }
body:not(.site-body) .summary-details > div { min-width: 0; }
body:not(.site-body) .summary-details :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
body:not(.site-body) .table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
body:not(.site-body) .field :is(input, textarea, select) { max-width: 100%; }
body:not(.site-body) .breadcrumbs { min-width: 0; }
body:not(.site-body) .breadcrumbs strong { overflow-wrap: anywhere; line-height: 1.4; }
body:not(.site-body) .topbar { min-height: var(--topbar-height); height: auto; padding-block: 12px; }
body:not(.site-body) .topbar-right { flex: none; }
body:not(.site-body) .error-card { width: 100%; }

@media (max-width: 900px) {
    .site-body .feature-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
    .site-body :is(.article-grid, .contact-grid) { grid-template-columns: minmax(0, 1fr); }
    .site-body .site-cta { align-items: flex-start; }
}
@media (max-width: 430px) {
    .site-body .docs-article { padding: 22px 20px; }
    .site-body .site-alert { padding: 16px; }
    .site-body .site-cta { padding: 26px 22px; }
    body:not(.site-body) .panel-heading { gap: 10px; }
    body:not(.site-body) .error-card { padding: 28px 22px; }
}
@media (forced-colors: active) {
    .site-body :is(.article-card, .docs-article, .contact-card, .feature-grid > article,
        .site-alert, .site-empty, .feature-icon),
    body:not(.site-body) :is(.panel, .notice),
    .site-body .docs-article pre, body:not(.site-body) .prose pre {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
}
@media print {
    .site-body { display: block; background: #fff; color: #000; }
    .site-body :is(.site-header, .site-footer, .site-notice, .site-button, .site-skip) { display: none; }
    .site-body .page-hero { padding-block: 20px; }
    .site-body :is(.docs-article, .article-card) {
        width: 100%; max-width: none; padding: 20px; margin-block: 0 24px;
        box-shadow: none; border-color: #888; background: #fff; color: #000;
    }
    .site-body :is(.docs-article, .article-card, .page-hero) :is(h1, h2, h3, p, strong, a) { color: #000; }
    .site-body .docs-article pre, body:not(.site-body) .prose pre {
        white-space: pre-wrap; overflow: visible; overflow-wrap: anywhere;
        background: #f3f3f3; color: #000; border-color: #888;
    }
    .site-body .docs-article pre code, body:not(.site-body) .prose pre code { min-width: 0; overflow-wrap: anywhere; }
    .site-body .site-alert { background: #fff; color: #000; border-color: #888; }
    body:not(.site-body) .docs-grid .panel { break-inside: auto; }
}