/* SpatialKey Knowledge Base — combined styles (Eleventy build) */
/* Source: Aurora tokens + components, KB styles, app styles — regenerated from live sources */

/* ============================================================================
   Aurora Design System — Insurity
   colors_and_type.css — portable token sheet + fonts + semantic helpers

   Derived verbatim from @insurity/aurora-react dist/styles.css, theme.css,
   fonts.css and the compiled dist/lib/index.js. Drop this into any HTML
   deliverable with:  <link rel="stylesheet" href="colors_and_type.css">
   (or @import "../colors_and_type.css"; — @font-face urls resolve relative
   to THIS file, so fonts/ must sit next to it.)

   Toggle dark mode by adding class="dark" to <html> or any ancestor.
   ============================================================================ */

/* ---------------------------------------------------------------- FONTS --- */
/* Mazzard H — brand / display face (9 weights + italics, .woff) */
@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-thinitalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-extralightitalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-extrabold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-extrabolditalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Mazzard H';
    src: url('fonts/mazzard-h-blackitalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

/* Source Sans 3 — body / UI face (.woff2) */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200;
    src: url('fonts/source-sans-3-200.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/source-sans-3-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-sans-3-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/source-sans-3-italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/source-sans-3-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/source-sans-3-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/source-sans-3-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/source-sans-3-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/source-sans-3-900.woff2') format('woff2');
}

/* --------------------------------------------------------------- TOKENS --- */
:root {
    /* ----- Type stacks ----- */
    --font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-brand: "Mazzard H", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Roboto Mono', 'SF Mono', Monaco, Inconsolata, Consolas, 'Courier New', monospace;
    --font-serif: 'Times New Roman', Times, serif;

    /* ----- Radii ----- */
    --radius: 0.625rem; /* 10px base */
    --radius-sm: calc(var(--radius) - 4px); /* 6px  */
    --radius-md: calc(var(--radius) - 2px); /* 8px — inputs */
    --radius-lg: var(--radius); /* 10px */
    --radius-xl: calc(var(--radius) + 4px); /* 14px — cards */

    /* ----- Aurora custom MAGENTA ramp (the one brand hue) ----- */
    --color-magenta-50: rgb(255, 236, 249);
    --color-magenta-100: rgb(255, 217, 244);
    --color-magenta-200: rgb(255, 179, 232);
    --color-magenta-300: rgb(254, 140, 221);
    --color-magenta-400: rgb(254, 102, 209);
    --color-magenta-500: rgb(254, 64, 197);
    --color-magenta-600: rgb(216, 19, 158); /* ← brand color, light mode */
    --color-magenta-700: rgb(173, 13, 126);
    --color-magenta-800: rgb(126, 19, 95);
    --color-magenta-900: rgb(70, 30, 58);
    --color-magenta-950: rgb(55, 27, 46);

    /* ----- Status hues (Tailwind families used by Badge/Alert) ----- */
    --color-red-50: #fef2f2;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-950: #450a0a;
    --color-green-50: #f0fdf4;
    --color-green-700: #15803d;
    --color-green-950: #052e16;
    --color-yellow-50: #fefce8;
    --color-yellow-700: #a16207;
    --color-yellow-950: #422006;
    --color-blue-50: #eff6ff;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-950: #172554;
    --color-cyan-700: #0e7490;
    --color-purple-600: #9333ea;
    --color-pink-700: #be185d;

    /* ----- Chart palette (light) ----- */
    --chart-1: var(--color-magenta-400);
    --chart-2: rgb(69, 107, 204); /* ultramarine */
    --chart-3: rgb(187, 145, 253); /* lavender    */
    --chart-4: var(--color-magenta-200);
    --chart-5: rgb(146, 242, 242); /* cyan        */

    /* ----- Semantic colors — LIGHT (sRGB equivalents of the OKLCH source) ----- */
    --background: #ffffff;
    --foreground: #242424; /* oklch(0.145 0 0) */
    --card: #ffffff;
    --card-foreground: #242424;
    --popover: #ffffff;
    --popover-foreground: #242424;
    --primary: #343434; /* oklch(0.205 0 0) — near-black */
    --primary-foreground: #fbfbfb; /* oklch(0.985 0 0) */
    --secondary: #f7f7f7; /* oklch(0.97 0 0) */
    --secondary-foreground: #343434;
    --muted: #fbfbfb;
    --muted-foreground: #8c8c8c; /* oklch(0.556 0 0) */
    --accent: #f7f7f7;
    --accent-foreground: #343434;
    --destructive: #d4183d; /* oklch(0.577 0.245 27) ≈ red */
    --border: #ebebeb; /* oklch(0.922 0 0) */
    --input: #ebebeb;
    --ring: #b5b5b5; /* oklch(0.708 0 0) */

    /* ----- Brand bindings — LIGHT ----- */
    --brand-background: var(--color-magenta-600);
    --brand-background-2: var(--color-magenta-700);
    --brand-foreground: var(--color-magenta-600);

    /* ----- The signature Aurora glow — LIGHT -----
     pink on top, cyan below, lavender ambient ring */
    --shadow-brand-strong: 0 4px 6px -4px rgba(0, 0, 0, .05),
    0 -4px 8px 0 #ffecf9, 0 4px 8px 0 rgba(214, 250, 250, .7), 0 0 8px 0 #eee4ff;
    --shadow-brand-subtle: 0 2px 8px -4px rgba(0, 0, 0, .03),
    0 -2px 8px 1px rgba(255, 236, 249, .8), 0 2px 8px 1px rgba(214, 250, 250, .6),
    0 0 8px 1px rgba(238, 228, 255, .8);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08);
}

.dark {
    --background: #242424; /* oklch(0.145 0 0) */
    --foreground: #fbfbfb; /* oklch(0.985 0 0) */
    --card: #343434; /* oklch(0.205 0 0) */
    --card-foreground: #fbfbfb;
    --popover: #343434;
    --popover-foreground: #fbfbfb;
    --primary: #ebebeb; /* oklch(0.922 0 0) — near-white */
    --primary-foreground: #343434;
    --secondary: #434343; /* oklch(0.269 0 0) */
    --secondary-foreground: #fbfbfb;
    --muted: #343434;
    --muted-foreground: #b5b5b5; /* oklch(0.708 0 0) */
    --accent: #434343;
    --accent-foreground: #fbfbfb;
    --destructive: #e7000b;
    --border: rgba(255, 255, 255, .10);
    --input: rgba(255, 255, 255, .15);
    --ring: #8c8c8c;

    /* Brand bindings — DARK (lighter magenta so it glows on black) */
    --brand-background: var(--color-magenta-300);
    --brand-background-2: var(--color-magenta-200);
    --brand-foreground: var(--color-magenta-300);

    /* Chart palette — DARK */
    --chart-1: var(--color-magenta-600);
    --chart-2: rgb(54, 82, 155);
    --chart-3: rgb(137, 82, 225);
    --chart-4: var(--color-magenta-400);
    --chart-5: rgb(74, 234, 234);

    /* Aurora glow — DARK (low-alpha magenta/blue/purple) */
    --shadow-brand-strong: 0 4px 6px -4px rgba(0, 0, 0, .5),
    0 -4px 10px 0 rgba(173, 13, 126, .55), 0 4px 10px 0 rgba(54, 82, 155, .5),
    0 0 10px 0 rgba(137, 82, 225, .5);
    --shadow-brand-subtle: 0 2px 8px -4px rgba(0, 0, 0, .4),
    0 -2px 8px 1px rgba(173, 13, 126, .4), 0 2px 8px 1px rgba(54, 82, 155, .35),
    0 0 8px 1px rgba(137, 82, 225, .35);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px -1px rgba(0, 0, 0, .4);
}

/* ----------------------------------------------------- SEMANTIC HELPERS --- */
/* Base body convention: Source Sans 3, 14px / 20px. */
.aurora-base {
    font-family: var(--font-sans);
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}

/* Headings — font-brand (Mazzard H), bold, leading-normal */
.h1, .heading-xl {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.h2, .heading-lg {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.15;
}

.h3, .heading-md {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1.2;
}

.h4, .heading-sm {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .h1, .heading-xl, .h2, .heading-lg {
        font-size: 1.875rem;
    }
}

/* KPI numeral — the signature thin Mazzard figure */
.kpi {
    font-family: var(--font-brand);
    font-weight: 300;
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--foreground);
}

/* Body + supporting text */
.body {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.body-lg {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5rem;
}

.label {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
}

.muted {
    color: var(--muted-foreground);
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted-foreground);
}

.code, code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* Brand glow utilities */
.shadow-brand-strong {
    box-shadow: var(--shadow-brand-strong);
}

.shadow-brand-subtle {
    box-shadow: var(--shadow-brand-subtle);
}


/* ============================================================================
   Aurora Design System — Insurity
   aurora-components.css — faithful CSS recreations of @insurity/aurora-react
   component looks (class strings transcribed from dist/lib/index.js).
   Requires colors_and_type.css for tokens + fonts. Pair with Lucide for icons.
   ============================================================================ */

/* ----------------------------------------------------------- BUTTONS --- */
.au-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    border-radius: 9999px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .18s ease;
    user-select: none;
    height: 2.25rem;
    padding: 0 1rem; /* size: default h-9 */
}

.au-btn svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.au-btn.sm {
    height: 2rem;
    padding: 0 .75rem;
    gap: .375rem;
}

.au-btn.lg {
    height: 2.5rem;
    padding: 0 1.5rem;
}

.au-btn:disabled, .au-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

.au-btn.primary {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    box-shadow: var(--shadow-brand-strong);
}

.au-btn.primary:hover {
    background: var(--brand-background);
    border-color: var(--brand-background);
}

.au-btn.primary:active {
    background: var(--brand-background-2);
    border-color: var(--brand-background-2);
}

.au-btn.secondary {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-brand-subtle);
}

.au-btn.secondary:hover {
    color: var(--brand-foreground);
}

.au-btn.secondary:active {
    background: var(--secondary);
}

.au-btn.outline {
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.au-btn.outline:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.au-btn.ghost {
    background: transparent;
    color: var(--foreground);
}

.au-btn.ghost:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.au-btn.destructive {
    background: var(--destructive);
    color: #fff;
    border-color: var(--destructive);
}

.au-btn.destructive:hover {
    background: var(--color-red-500);
    border-color: var(--color-red-500);
}

.au-btn.link {
    background: transparent;
    color: var(--primary);
    padding: 0;
    height: auto;
    border: none;
    box-shadow: none;
}

.au-btn.link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.au-btn.icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

/* ----------------------------------------------------------- BADGES --- */
.au-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    height: 1.5rem;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    font-family: var(--font-sans);
    white-space: nowrap;
    width: fit-content;
}

.au-badge svg {
    width: .75rem;
    height: .75rem;
}

.au-badge-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-family: var(--font-sans);
    white-space: nowrap;
    width: fit-content;
    height: fit-content;
}

/* strong (filled) */
.strong {
    background: var(--primary);
    color: var(--primary-foreground);
}

.strong.error {
    background: var(--color-red-600);
    color: #fff;
}

.strong.success {
    background: var(--color-green-700);
    color: #fff;
}

.strong.warning {
    background: var(--color-yellow-700);
    color: #fff;
}

.strong.info {
    background: var(--color-blue-600);
    color: #fff;
}

.strong.magenta {
    background: var(--color-magenta-600);
    color: #fff;
}

.strong.cyan {
    background: var(--color-cyan-700);
    color: #fff;
}

.strong.purple {
    background: var(--color-purple-600);
    color: #fff;
}

.strong.pink {
    background: var(--color-pink-700);
    color: #fff;
}

/* subtle (tinted) */
.subtle {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border-color: #525252;
}

.subtle.error {
    background: var(--color-red-50);
    color: var(--color-red-700);
    border-color: var(--color-red-700);
}

.subtle.success {
    background: var(--color-green-50);
    color: var(--color-green-700);
    border-color: var(--color-green-700);
}

.subtle.warning {
    background: var(--color-yellow-50);
    color: var(--color-yellow-700);
    border-color: var(--color-yellow-700);
}

.subtle.info {
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border-color: var(--color-blue-700);
}

.subtle.magenta {
    background: var(--color-magenta-50);
    color: var(--color-magenta-700);
    border-color: var(--color-magenta-700);
}

.dark .subtle.error {
    background: var(--color-red-950);
    color: #fca5a5;
}

.dark .subtle.success {
    background: var(--color-green-950);
    color: #86efac;
}

.dark .subtle.warning {
    background: var(--color-yellow-950);
    color: #fde047;
}

.dark .subtle.info {
    background: var(--color-blue-950);
    color: #93c5fd;
}

/* ----------------------------------------------------------- INPUTS --- */
.au-input {
    height: 2.25rem;
    width: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--input);
    background: transparent;
    padding: 0 .75rem;
    font-family: var(--font-sans);
    font-size: .875rem;
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .15s, border-color .15s;
    outline: none;
}

.au-input::placeholder {
    color: var(--muted-foreground);
}

.au-input:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

.au-input.invalid {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.au-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.dark .au-input {
    background: rgba(255, 255, 255, .04);
}

textarea.au-input {
    height: auto;
    min-height: 4.5rem;
    padding: .5rem .75rem;
    resize: vertical;
}

.au-label {
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 500;
    color: var(--foreground);
    display: block;
}

/* ----------------------------------------------------------- CARD --- */
.au-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.au-card-title {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.1;
    color: var(--card-foreground);
}

.au-card-desc {
    color: var(--muted-foreground);
    font-size: .875rem;
}

/* ----------------------------------------------------------- STAT --- */
.au-stat-label {
    color: var(--muted-foreground);
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.au-stat-label svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--muted-foreground);
}

.au-stat-value {
    font-family: var(--font-brand);
    font-weight: 300;
    font-size: 2.75rem;
    line-height: 1.1;
    color: var(--foreground);
}

.au-stat-delta {
    color: var(--muted-foreground);
    font-size: .875rem;
}

.au-stat-delta.up {
    color: var(--color-green-700);
}

.au-stat-delta.down {
    color: var(--color-red-600);
}

/* ----------------------------------------------------------- ALERT --- */
.au-alert {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: .25rem .75rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius-lg);
    padding: .875rem 1rem;
}

.au-alert svg {
    width: 1rem;
    height: 1rem;
    margin-top: .15rem;
}

.au-alert-title {
    font-weight: 600;
    grid-column: 2;
}

.au-alert-desc {
    grid-column: 2;
    color: var(--muted-foreground);
    font-size: .875rem;
}

.au-alert > svg {
    grid-row: 1/span 2;
}

.au-alert.destructive, .au-alert.error {
    background: var(--color-red-50);
    border-color: var(--color-red-500);
    color: var(--color-red-700);
}

.au-alert.error .au-alert-desc {
    color: var(--color-red-700);
}

.dark .au-alert.error {
    background: var(--color-red-950);
    color: #fca5a5;
    border-color: var(--color-red-700);
}

.au-alert.warning {
    background: var(--color-yellow-50);
    border-color: var(--color-yellow-700);
    color: var(--color-yellow-700);
}

.au-alert.info {
    background: var(--color-blue-50);
    border-color: var(--color-blue-600);
    color: var(--color-blue-700);
}

.au-alert.success {
    background: var(--color-green-50);
    border-color: var(--color-green-700);
    color: var(--color-green-700);
}

/* ----------------------------------------------------------- CHIP --- */
.au-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--foreground);
    height: 1.75rem;
    padding: 0 .75rem;
    font-size: .8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.au-chip svg {
    width: .875rem;
    height: .875rem;
}

.au-chip:hover {
    background: var(--accent);
}

.au-chip.selected {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* ----------------------------------------------------------- TABS --- */
.au-tabs {
    display: inline-flex;
    gap: .25rem;
    background: var(--secondary);
    padding: .25rem;
    border-radius: var(--radius-lg);
}

.au-tab {
    border: none;
    background: transparent;
    padding: .375rem .75rem;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    cursor: pointer;
}

.au-tab.active {
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

/* ----------------------------------------------------------- TABLE --- */
.au-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: .875rem;
}

.au-table th {
    text-align: left;
    font-weight: 600;
    color: var(--foreground);
    padding: .625rem .75rem;
}

.au-table td {
    padding: .625rem .75rem;
    border-top: 1px solid var(--border);
    color: var(--foreground);
}

.au-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.au-table th.num {
    text-align: right;
}

/* --------------------------------------------------- FORM CONTROLS --- */
.au-check {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
}

.au-check.on {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

.au-check svg {
    width: .75rem;
    height: .75rem;
}

.au-radio {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 1px solid var(--ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.au-radio.on {
    border-color: var(--primary);
}

.au-radio.on::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: var(--primary);
}

.au-switch {
    width: 2rem;
    height: 1.15rem;
    border-radius: 9999px;
    background: var(--input);
    position: relative;
    transition: background .15s;
    flex: none;
}

.au-switch.on {
    background: var(--primary);
}

.au-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--background);
    transition: left .15s;
    box-shadow: var(--shadow-xs);
}

.au-switch.on::after {
    left: calc(100% - 1rem - 2px);
}

.au-slider {
    height: .375rem;
    border-radius: 9999px;
    background: var(--muted);
    position: relative;
}

.au-slider .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 9999px;
    background: var(--primary);
}

.au-slider .thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------- AVATAR --- */
.au-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: .875rem;
    overflow: hidden;
    flex: none;
}

/* --------------------------------------------------- SIDEBAR / NAV --- */
.au-navitem {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: .875rem;
    color: var(--sidebar-foreground, var(--foreground));
    cursor: pointer;
    transition: background .15s;
}

.au-navitem svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.au-navitem:hover {
    background: var(--accent);
}

.au-navitem.active {
    background: var(--accent);
    font-weight: 500;
}

/* ----------------------------------------------------- BRAND MARK --- */
.au-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.au-logo .mark {
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    display: inline-block;
    background-color: var(--foreground);
    -webkit-mask: url(insurity-logomark-black.svg) center/contain no-repeat;
    mask: url(insurity-logomark-black.svg) center/contain no-repeat;
}

/* legacy placeholder tile (kept for any older refs) */
.au-logo .tile {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: var(--brand-background);
    display: inline-block;
    flex: none;
}

.au-logo .word {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--foreground);
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* ----------------------------------------------------------- KBD --- */
.au-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .375rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--secondary);
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--muted-foreground);
}


/* SpatialKey Knowledge Base — approach mockup styles.
   Built on Aurora tokens (ds/colors_and_type.css) + components (ds/aurora-components.css). */

/* ---- SpatialKey brand mark (real logomark, Aurora visual language) ---- */
.sk-logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}

.sk-mark {
    width: 2rem;
    height: 2rem;
    flex: none;
    background-color: var(--foreground);
    -webkit-mask: url(spatialkey-logomark-black.svg) center/contain no-repeat;
    mask: url(spatialkey-logomark-black.svg) center/contain no-repeat;
}

.sk-word {
    font-family: var(--font-brand);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    line-height: 1;
}

.sk-word b {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--foreground);
}

.sk-word .sep {
    color: var(--border);
    font-weight: 300;
}

.sk-word .sub2 {
    font-weight: 500;
    color: var(--muted-foreground);
}

.sk-logo.on-dark .sk-mark {
    background-color: #fff;
}

.sk-logo.on-dark .sk-word b {
    color: #fff;
}

.sk-logo.on-dark .sk-word .sep {
    color: rgba(255, 255, 255, .35);
}

.sk-logo.on-dark .sk-word .sub2 {
    color: rgba(255, 255, 255, .72);
}

/* ---- generic artboard inner reset ---- */
.sk-screen, .sk-screen *, .skC, .skC * {
    box-sizing: border-box;
}

.sk-screen {
    font-family: var(--font-sans);
    color: var(--foreground);
    background: var(--background);
    font-size: 14px;
    line-height: 20px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.sk-screen > * {
    flex: none;
}

.sk-eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.sk-h-brand {
    font-family: var(--font-brand);
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

/* ===================================================================
   APPROACH A — "Ask SpatialKey" answer-first
   =================================================================== */
.skA-hero {
    position: relative;
    overflow: hidden;
    background: #141414;
    color: #fff;
    padding: 30px 56px 64px;
}

.skA-hero .glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 9999px;
    filter: blur(28px);
    background: radial-gradient(circle, rgba(254, 64, 197, .55), transparent 62%);
    top: -160px;
    right: -80px;
}

.skA-hero .glow2 {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 9999px;
    filter: blur(28px);
    background: radial-gradient(circle, rgba(74, 234, 234, .30), transparent 62%);
    bottom: -200px;
    left: 60px;
}

.skA-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.skA-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}

.skA-nav a {
    color: inherit;
    text-decoration: none;
}

.skA-nav a:hover {
    color: #fff;
}

.skA-herocore {
    position: relative;
    max-width: 780px;
    margin: 54px auto 0;
    text-align: center;
}

.skA-herocore h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 46px;
    line-height: 1.08;
    margin: 0 0 14px;
}

.skA-herocore p {
    font-size: 17px;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 30px;
}

.sk-search-xl {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    padding: 0 10px 0 22px;
    background: #fff;
    border-radius: 9999px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
}

.sk-search-xl svg {
    color: var(--muted-foreground);
    width: 22px;
    height: 22px;
    flex: none;
}

.sk-search-xl .ph {
    flex: 1;
    text-align: left;
    color: var(--muted-foreground);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}

.sk-caret {
    display: inline-block;
    width: 2px;
    height: 22px;
    background: var(--brand-background);
    margin-right: 8px;
    flex: none;
    animation: sk-blink 1.1s step-end infinite;
    border-radius: 1px;
}

@keyframes sk-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.skA-trylabel {
    text-align: left;
    max-width: 780px;
    margin: 24px auto 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .02em;
}

.sk-search-xl .go {
    height: 44px;
    padding: 0 22px;
    border-radius: 9999px;
    background: var(--brand-background);
    color: #fff;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-brand-strong);
}

.skA-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    max-width: 780px;
    margin: 0 auto;
}

.skA-chips .c {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 9999px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, .05);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.skA-chips .c svg {
    width: 14px;
    height: 14px;
    opacity: .7;
}

.skA-body {
    padding: 36px 56px 52px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.sk-answer {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-brand-subtle);
    overflow: hidden;
    margin-top: -58px;
    position: relative;
}

.sk-answer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(0deg, var(--card), var(--color-magenta-50));
}

.sk-answer-head .ai {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: var(--brand-background);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sk-answer-head .ai svg {
    width: 16px;
    height: 16px;
}

.sk-answer-head b {
    font-family: var(--font-brand);
    font-size: 15px;
}

.sk-answer-body {
    padding: 20px 22px 8px;
}

.sk-answer-body p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 23px;
    color: var(--foreground);
}

.sk-answer-body .step {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.sk-answer-body .step .n {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--foreground);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-brand);
}

.sk-cites {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 22px 18px;
}

.sk-cite {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 13px;
    background: var(--background);
    min-width: 210px;
}

.sk-cite .ix {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--brand-background);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-brand);
}

.sk-cite small {
    color: var(--muted-foreground);
    display: block;
    font-size: 11px;
}

.sk-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 40px 0 18px;
}

.sk-section-title h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
}

.sk-section-title a {
    color: var(--brand-foreground);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.sk-topics {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 16px;
}

.sk-topic-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-topic-card .ic {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-foreground);
}

.sk-topic-card h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 16px;
    margin: 2px 0 0;
}

.sk-topic-card p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 18px;
}

.sk-topic-card .meta {
    margin-top: auto;
    padding-top: 8px;
    color: var(--muted-foreground);
    font-size: 12px;
    display: flex;
    gap: 12px;
}

.sk-topic-card .meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ===================================================================
   APPROACH B — Role launchpad
   =================================================================== */
.skB-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    border-bottom: 1px solid var(--border);
    background: var(--background);
}

.skB-top .nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    color: var(--muted-foreground);
}

.skB-top .nav a {
    color: inherit;
    text-decoration: none;
}

.skB-top .nav a.active {
    color: var(--foreground);
    font-weight: 600;
}

.skB-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: 13px;
    min-width: 280px;
}

.skB-search svg {
    width: 16px;
    height: 16px;
}

.skB-hero {
    padding: 46px 40px 12px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}

.skB-hero h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 38px;
    margin: 0 0 10px;
}

.skB-hero p {
    color: var(--muted-foreground);
    font-size: 16px;
    margin: 0;
}

.skB-wrap {
    padding: 18px 40px 52px;
    max-width: 1160px;
    margin: 0 auto;
    width: 100%;
}

.skB-rolelabel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 16px;
}

.skB-rolelabel h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.skB-rolelabel .line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.sk-roles {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
}

.sk-role-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow .18s;
}

.sk-role-card.feature {
    box-shadow: var(--shadow-brand-subtle);
    border-color: var(--color-magenta-200);
}

.sk-role-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sk-role-ic {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    color: var(--brand-foreground);
    flex: none;
}

.sk-role-ic.brand {
    background: var(--brand-background);
    color: #fff;
    box-shadow: var(--shadow-brand-subtle);
}

.sk-role-head h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.sk-role-head .sub {
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.sk-role-card .links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sk-role-card .links a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--foreground);
    text-decoration: none;
    font-size: 13.5px;
}

.sk-role-card .links a svg {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    flex: none;
}

.sk-role-card .foot {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--brand-foreground);
    font-weight: 600;
    font-size: 13px;
}

.skB-popular {
    margin-top: 40px;
}

.sk-poprow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    border-top: 1px solid var(--border);
}

.sk-poprow:first-of-type {
    border-top: none;
}

.sk-poprow .ic {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
    flex: none;
}

.sk-poprow .t {
    font-weight: 600;
    font-size: 14px;
}

.sk-poprow .d {
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.sk-poprow .views {
    margin-left: auto;
    color: var(--muted-foreground);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* role detail screen */
.skB-roledetail {
    padding: 0 0 52px;
}

.skB-rolebanner {
    padding: 34px 40px;
    background: linear-gradient(120deg, var(--color-magenta-50), var(--background) 70%);
    border-bottom: 1px solid var(--border);
}

.skB-rolebanner .switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted-foreground);
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 9999px;
    padding: 6px 12px;
    margin-bottom: 16px;
}

.skB-rolebanner h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 32px;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.skB-rolebanner h1 .ic {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-lg);
    background: var(--brand-background);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-brand-subtle);
}

.skB-rolebanner p {
    color: var(--muted-foreground);
    font-size: 15px;
    margin: 0;
    max-width: 620px;
}

.skB-rolegrid {
    display: grid;
    grid-template-columns:1.55fr 1fr;
    gap: 26px;
    padding: 30px 40px 0;
    max-width: 1160px;
    margin: 0 auto;
}

/* ===================================================================
   APPROACH C — Docs library (persistent sidebar)
   =================================================================== */
.skC {
    display: grid;
    grid-template-rows:auto 1fr;
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    color: var(--foreground);
    background: var(--background);
}

.skC-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 22px;
    height: 60px;
    border-bottom: 1px solid var(--border);
}

.skC-top .skB-search {
    flex: 1;
    max-width: 460px;
    margin: 0 auto;
}

.skC-top .right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted-foreground);
}

.skC-iconbtn {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
}

.skC-iconbtn:hover {
    background: var(--accent);
}

.skC-body {
    display: grid;
    grid-template-columns:264px 1fr;
    min-height: 0;
}

.skC-side {
    border-right: 1px solid var(--border);
    background: var(--background);
    padding: 18px 12px;
    overflow: auto;
}

.skC-side .grp {
    margin-bottom: 18px;
}

.skC-side .grp > .lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding: 4px 10px 6px;
}

.skC-nav {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    color: var(--foreground);
    cursor: pointer;
}

.skC-nav svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--muted-foreground);
}

.skC-nav > .skC-navcount {
    margin-left: auto;
}

.skC-navcount {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: 999px;
    padding: 3px 7px;
    min-width: 18px;
    text-align: center;
    opacity: 0;
    transition: opacity .15s;
}

.skC-nav:hover .skC-navcount, .skC-nav.active .skC-navcount {
    opacity: 1;
}

.skC-nav.active .skC-navcount {
    color: var(--brand-foreground);
    background: var(--background);
}

.skC-nav:hover {
    background: var(--accent);
}

.skC-nav.active {
    background: var(--accent);
    font-weight: 600;
}

.skC-nav.active svg {
    color: var(--brand-foreground);
}

.skC-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 2px 18px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.skC-sub a {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
}

.skC-subcount {
    display: none;

    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity .15s;
}

.active .skC-subcount {
    display: block;
}
.skC-subcount:hover {
    display: block;
}

.skC-sub a:hover .skC-subcount, .skC-sub a.active .skC-subcount {
    display: block;
    opacity: 1;
}

.skC-sub a:hover {
    color: var(--foreground);
    background: var(--accent);
}

.skC-sub a.active {
    color: var(--brand-foreground);
    font-weight: 600;
}

/* ── Expandable sidebar tree ─────────────────────────────────────────────── */
.skC-tree {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.skC-treesec {
    margin-bottom: 2px;
}

/* A row = collapse toggle + the section/subsection link, side by side. */
.skC-treerow {
    display: flex;
    align-items: center;
    gap: 2px;
}

.skC-treerow > .skC-nav,
.skC-treerow > .skC-sublabel {
    flex: 1;
    min-width: 0;
}

/* Collapse toggle button (the chevron). */
.skC-tw-toggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.skC-tw-toggle:hover {
    background: var(--accent);
    color: var(--foreground);
}

.skC-tw-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}

/* Rotate the chevron when its branch is open. */
.skC-treesec.open > .skC-treerow > .skC-tw-toggle svg,
.skC-treesub.open > .skC-treerow > .skC-tw-toggle svg {
    transform: rotate(90deg);
}

/* Collapsed by default; the .open class reveals the branch body. The :not(.open)
   guard keeps these ahead of the flex layout rule below on specificity so a
   closed branch stays hidden. */
.skC-treesec:not(.open) > .skC-treebody,
.skC-treesub:not(.open) > .skC-treebody {
    display: none;
}

/* Subsection block sits under a section, indented to align past the chevron. */
.skC-treesub {
    margin-left: 22px;
}

.skC-sublabel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    cursor: pointer;
}

.skC-sublabel .skC-subcount {
    opacity: 1;
}

.skC-sublabel:hover {
    color: var(--foreground);
    background: var(--accent);
}

.skC-sublabel.active {
    color: var(--brand-foreground);
    font-weight: 600;
}

/* Article leaf links. */
.skC-treesec > .skC-treebody > .skC-sub,
.skC-treesub > .skC-treebody {
    margin: 1px 0 3px 22px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.skC-treeart {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
}

/* Title takes the remaining width; shrink it so the video icon always fits. */
.skC-treeart .sk-artrow-title {
    flex: 1;
    min-width: 0;
}

/* Video indicator, pinned to the far right and vertically centered. */
.skC-treeart-video {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--color-magenta-700);
    opacity: .85;
}

.skC-treeart:hover {
    color: var(--foreground);
    background: var(--accent);
}

.skC-treeart.active {
    color: var(--brand-foreground);
    font-weight: 600;
    background: var(--accent);
}

.skC-main {
    overflow: hidden;
    background: var(--background);
    width: 100%;
}

.skC-content {
    padding: 34px 44px 52px;
    margin-inline: auto;
    max-height: 100%;
    overflow: auto;
}

.skC-hubhead {
    margin-bottom: 24px;
}

.skC-hubhead h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 8px;
}

.skC-hubhead p {
    color: var(--muted-foreground);
    font-size: 15px;
    margin: 0;
    max-width: 640px;
}

.skC-hub {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skC-hubcard {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
}

.skC-hubcard .hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.skC-hubcard .hd .ic {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-foreground);
    flex: none;
}

.skC-hubcard .hd h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}

.skC-hubcard .hd .cnt {
    margin-left: auto;
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.skC-hublinks {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 2px 28px;
}

.skC-hublink {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--foreground);
    text-decoration: none;
    border-top: 1px solid var(--border);
}

.skC-hublink svg {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    flex: none;
}

.skC-hublink .vid {
    margin-left: auto;
}

.skC-hublink:hover {
    color: var(--brand-foreground);
}

/* article reading view */
.skC-article {
    margin: auto;
    max-width: 1100px;
    display: grid;
    grid-template-columns:1fr 220px;
    gap: 40px;
}

.skC-bc {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted-foreground);
    margin-bottom: 14px;
}

.skC-bc svg {
    width: 13px;
    height: 13px;
}

.skC-article h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 14px;
    line-height: 1.15;
}

.skC-artmeta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 12.5px;
}

.skC-artmeta span {
    margin-bottom: 18px;
}

.skC-prose p {
    font-size: 15px;
    line-height: 24px;
    margin: 0 0 16px;
    color: var(--foreground);
}

.skC-prose h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 20px;
    margin: 26px 0 12px;
}

.skC-prose ol {
    padding-left: 20px;
    margin: 0 0 16px;
}

.skC-prose li {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 8px;
}

.skC-figure {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--secondary);
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    font-size: 13px;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 20px;
}

.skC-figure svg {
    width: 30px;
    height: 30px;
    opacity: .6;
}

.skC-toc {
    position: sticky;
    top: 0;
    align-self: start;
}

.skC-toc .lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 12px;
}

.skC-toc a {
    display: block;
    font-size: 13px;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 5px 0 5px 12px;
    border-left: 2px solid var(--border);
    cursor: pointer;
    transition: color .15s, border-left-color .15s;
}

.skC-toc a:hover {
    color: var(--foreground);
    border-left-color: var(--muted-foreground);
}

.skC-toc a.active {
    color: var(--brand-foreground);
    border-left-color: var(--brand-background);
    font-weight: 600;
}

.skC-toc a.active:hover {
    color: var(--brand-foreground);
    border-left-color: var(--brand-background);
}

.skC-toc .related {
    margin-top: 24px;
}

.skC-toc .related a {
    border-left: none;
    padding: 6px 0;
    color: var(--foreground);
}

.skC-toc .related a:hover {
    color: var(--brand-foreground);
}

/* small inline badge helper for video */
.sk-vid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-foreground);
    font-size: 11px;
    font-weight: 600;
}

.sk-vid svg {
    width: 12px;
    height: 12px;
}


/* SpatialKey Knowledge Base — interactive prototype styles.
   Layered on top of kb.css (which has the hero, sidebar, hub & article looks). */

html, body {
    margin: 0;
    height: 100%;
    background: var(--background);
}

#root {
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

a {
    color: inherit;
}

.skapp {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    color: var(--foreground);
    background: var(--background);
}

.skapp-main {
    flex: 1;
    min-height: 0;
}

/* fade-in on view change */
.sk-fade {
    animation: sk-fade .28s ease both;
}

@keyframes sk-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ---------- interactive hero search (real input) ---------- */
.skA-hero.live {
    padding-bottom: 74px;
}

.sk-searchwrap {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.sk-search-xl input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--foreground);
    min-width: 0;
}

.sk-search-xl input::placeholder {
    color: var(--muted-foreground);
}

.sk-search-xl .go {
    border: none;
    cursor: pointer;
}

.sk-search-xl .go:disabled {
    opacity: .55;
    cursor: default;
}

/* topbar search (inner pages) — make it a real button/input */
.skC-search {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
}

.skC-search .field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    font-size: 13px;
    cursor: text;
    width: 100%;
}

.skC-search .field svg {
    width: 16px;
    height: 16px;
}

.skC-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--foreground);
}

/* ---------- suggestions dropdown ---------- */
.sk-suggest {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35);
    overflow: hidden;
    z-index: 60;
    text-align: left;
}

.sk-suggest-ask {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(0deg, var(--card), var(--color-magenta-50));
}

.dark .sk-suggest-ask {
    background: var(--card);
}

.sk-suggest-ask .ai {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: var(--brand-background);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sk-suggest-ask b {
    font-family: var(--font-brand);
    font-size: 14px;
}

.sk-suggest-ask .q {
    color: var(--muted-foreground);
    font-size: 13px;
}

.sk-suggest-list {
    max-height: 300px;
    overflow: auto;
    padding: 6px;
}

.sk-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--foreground);
}

.sk-suggest-item:hover, .sk-suggest-item.active {
    background: var(--accent);
}

.sk-suggest-item svg {
    width: 15px;
    height: 15px;
    color: var(--muted-foreground);
    flex: none;
}

.sk-suggest-item .sec {
    margin-left: auto;
    color: var(--muted-foreground);
    font-size: 11px;
    flex: none;
}

.sk-suggest-empty {
    padding: 18px 16px;
    color: var(--muted-foreground);
    font-size: 13px;
}

/* ---------- search / answer page ---------- */
.sk-resultwrap {
    display: grid;
    grid-template-columns:1fr 320px;
    gap: 32px;
    padding: 30px 40px 56px;
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
}

.sk-q-head {
    margin-bottom: 18px;
}

.sk-q-head .lbl {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin-bottom: 6px;
}

.sk-q-head h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 26px;
    margin: 0;
    line-height: 1.2;
}

.sk-answer.live {
    margin-top: 0;
}

.sk-ans-md p {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 23px;
}

.sk-ans-md ol, .sk-ans-md ul {
    margin: 0 0 13px;
    padding-left: 4px;
    list-style: none;
}

.sk-ans-md li .sk-li-body {
    flex: 1;
    min-width: 0;
}

.sk-ans-md li .sk-li-body > .sk-ol, .sk-ans-md li .sk-li-body > .sk-ul {
    margin: 9px 0 2px;
    padding-left: 0;
}

.sk-ans-md li {
    display: flex;
    gap: 11px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 22px;
}

.sk-ans-md li .n {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--foreground);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: var(--font-brand);
    margin-top: 1px;
}

.sk-ans-md li .b {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--brand-background);
    flex: none;
    margin-top: 8px;
}

.sk-ans-md strong {
    font-weight: 700;
}

.sk-ans-md .sk-ans-h {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 15px;
    margin: 2px 0 9px;
}

/* loading shimmer */
.sk-skel {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--secondary) 25%, var(--muted) 37%, var(--secondary) 63%);
    background-size: 400% 100%;
    animation: sk-shim 1.3s ease infinite;
}

@keyframes sk-shim {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.sk-thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted-foreground);
    font-size: 14px;
    padding: 4px 0;
}

.sk-spin {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 2px solid var(--border);
    border-top-color: var(--brand-background);
    animation: sk-rot .7s linear infinite;
}

@keyframes sk-rot {
    to {
        transform: rotate(360deg);
    }
}

/* right rail */
.sk-rail .sk-cite {
    cursor: pointer;
}

.sk-cite.cited {
    border-color: var(--color-magenta-300);
    box-shadow: var(--shadow-brand-subtle);
}

.sk-relq a {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--foreground);
    text-decoration: none;
    cursor: pointer;
}

.sk-relq a:hover {
    color: var(--brand-foreground);
}

.sk-relq a svg {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    flex: none;
    margin-top: 2px;
}

/* ---------- section browse page ---------- */
.sk-secthead {
    margin-bottom: 22px;
}

.sk-secthead h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 30px;
    margin: 0 0 8px;
}

.sk-secthead p {
    color: var(--muted-foreground);
    font-size: 15px;
    margin: 0;
    max-width: 820px;
}

.sk-subgroup {
    margin-bottom: 30px;
}

.sk-subgroup h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.sk-artcard {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    padding: 15px 16px;
    cursor: pointer;
    transition: box-shadow .16s, border-color .16s;
    text-decoration: none;
    color: var(--foreground);
}

.sk-artcard:hover {
    box-shadow: var(--shadow-brand-subtle);
    border-color: var(--color-magenta-200);
}

.sk-artcard .ic {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-foreground);
    flex: none;
}

.sk-artcard h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 14.5px;
    margin: 0 0 3px;
}

.sk-artcard p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 12.5px;
    line-height: 17px;
}

.sk-artcard .row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
    color: var(--muted-foreground);
    font-size: 11px;
}

/* Subsection page card grid: two columns with generous spacing. Compound
   selector raises specificity above the flex-column .sk-artlist base rule,
   which appears later in this file, so it wins regardless of source order. */
.sk-artlist.sk-subcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* ---------- article reader ---------- */
.sk-figph {
    border: 1px dashed var(--input);
    border-radius: var(--radius-lg);
    background: var(--secondary);
    padding: 18px 18px 18px 46px;
    position: relative;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 18px;
    margin: 10px 0 20px;
    min-height: 64px;
    display: flex;
    align-items: center;
}

.sk-figph::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px;
    width: 18px;
    height: 18px;
    background: var(--muted-foreground);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21'/></svg>") center/contain no-repeat;
}

.sk-figph::after {
    content: attr(data-fig);
}

.sk-fig {
    margin: 18px 0 22px;
}

.sk-fig img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--card);
}

.sk-fig figcaption {
    font-size: 13px;
    line-height: 18px;
    color: var(--muted-foreground);
    margin-top: 8px;
}

.sk-prose-live h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 21px;
    margin: 30px 0 12px;
    scroll-margin-top: 80px;
}

.sk-prose-live h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    margin: 22px 0 10px;
    scroll-margin-top: 80px;
}

.sk-prose-live p {
    font-size: 15px;
    line-height: 24px;
    margin: 0 0 15px;
}

.sk-prose-live ul, .sk-prose-live ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.sk-prose-live li {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 7px;
}

.sk-prose-live a {
    color: var(--brand-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sk-prose-live .sk-embed {
    position: relative;
    margin: 18px 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    box-shadow: var(--shadow-sm);
}

.sk-prose-live .sk-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sk-prose-live strong {
    font-weight: 700;
}

/* tables (e.g. permission matrices) */
.sk-prose-live table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 18px 0 22px;
    font-size: 13.5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.sk-prose-live th, .sk-prose-live td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    line-height: 19px;
}

.sk-prose-live thead th, .sk-prose-live th {
    background: var(--secondary);
    font-family: var(--font-brand);
    font-weight: 700;
}

.sk-prose-live th:last-child, .sk-prose-live td:last-child {
    border-right: none;
}

.sk-prose-live tbody tr:last-child td {
    border-bottom: none;
}

.sk-prose-live tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--secondary) 45%, transparent);
}

.sk-permtable th:not(:first-child), .sk-permtable td:not(:first-child) {
    text-align: center;
    white-space: nowrap;
}

.sk-prose-live .yes {
    color: var(--color-green-700);
    font-weight: 700;
}

.sk-prose-live .no {
    color: var(--muted-foreground);
}

.sk-prose-live caption {
    caption-side: top;
    text-align: left;
    font-size: 13px;
    font-style: italic;
    color: var(--muted-foreground);
    margin-bottom: 8px;
}

.sk-prose-live pre {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 0 0 16px;
    white-space: pre;
    tab-size: 2;
}

.sk-prose-live code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
}

.sk-prose-live pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.sk-prose-live a.sk-deadlink {
    color: var(--muted-foreground);
    text-decoration: none;
    cursor: default;
}

.sk-prose-live img {
    max-width: 100% !important;
    height: auto !important;
}

.sk-prose-live figure.sk-fig {
    margin: 18px 0 22px;
}

.sk-prose-live figure.sk-fig img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--card);
}

/* FAQ accordions (native <details>) */
.sk-prose-live details.sk-faq {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-xs);
    margin: 0 0 10px;
    overflow: hidden;
}

.sk-prose-live details.sk-faq > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--foreground);
    transition: background .15s, color .15s;
}

.sk-prose-live details.sk-faq > summary::-webkit-details-marker {
    display: none;
}

.sk-prose-live details.sk-faq > summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: currentColor;
    opacity: .5;
    transition: transform .2s ease, opacity .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sk-prose-live details.sk-faq > summary:hover {
    background: var(--accent);
    color: var(--brand-foreground);
}

.sk-prose-live details.sk-faq > summary:hover::after {
    opacity: .9;
}

.sk-prose-live details.sk-faq[open] > summary {
    border-bottom: 1px solid var(--border);
}

.sk-prose-live details.sk-faq[open] > summary::after {
    transform: rotate(180deg);
}

.sk-prose-live details.sk-faq .sk-faq-body {
    padding: 6px 18px 2px;
}

.sk-prose-live details.sk-faq .sk-faq-body > :first-child {
    margin-top: 12px;
}

.sk-prose-live details.sk-faq .sk-faq-body > :last-child {
    margin-bottom: 14px;
}

.sk-prose-live p.sk-faq-group {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
    margin: 24px 0 10px;
}

@media print {
    .sk-prose-live details.sk-faq .sk-faq-body {
        display: block !important;
    }

    .sk-prose-live details.sk-faq > summary::after {
        display: none;
    }
}

/* video gallery cards (e.g. 101 Demos) */
.sk-vidgrid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 16px;
    margin: 10px 0 20px;
}

.sk-prose-live a.sk-vidcard {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card);
    transition: box-shadow .15s, border-color .15s;
}

.sk-prose-live a.sk-vidcard:hover {
    box-shadow: var(--shadow-brand-subtle);
    border-color: var(--color-magenta-200);
}

.sk-vidcard .thumb {
    aspect-ratio: 16/9;
    background: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-vidcard .thumb .pl {
    width: 50px;
    height: 50px;
    border-radius: 9999px;
    background: var(--brand-background);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    font-size: 17px;
    box-shadow: var(--shadow-brand-subtle);
}

.sk-vidcard .cap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
}

.sk-vidcard .cap .ext {
    margin-left: auto;
    color: var(--muted-foreground);
    font-weight: 400;
    font-size: 12px;
}

.sk-comments {
    margin-top: 26px;
}

.sk-comments h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 14px;
}

/* insights feedback list */
.sk-fbrow {
    display: flex;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
    align-items: flex-start;
}

.sk-fbrow:first-of-type {
    border-top: none;
}

.sk-fbrow .badge-ic {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.sk-fbrow .badge-ic.up {
    background: var(--color-green-50);
    color: var(--color-green-700);
}

.sk-fbrow .badge-ic.down {
    background: var(--color-red-50);
    color: var(--color-red-700);
}

.dark .sk-fbrow .badge-ic.up {
    background: var(--color-green-950);
}

.dark .sk-fbrow .badge-ic.down {
    background: var(--color-red-950);
}

.sk-fbrow .fb-art {
    font-weight: 600;
    font-size: 13px;
}

.sk-fbrow .fb-body {
    font-size: 13.5px;
    line-height: 19px;
    margin-top: 2px;
}

.sk-fbrow .fb-when {
    color: var(--muted-foreground);
    font-size: 11.5px;
    margin-top: 3px;
}

.sk-comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.sk-comment .av {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 13px;
    flex: none;
}

.sk-comment .who {
    font-weight: 600;
    font-size: 13.5px;
}

.sk-comment .when {
    color: var(--muted-foreground);
    font-size: 12px;
    margin-left: 8px;
    font-weight: 400;
}

.sk-comment .body {
    font-size: 14px;
    line-height: 20px;
    margin-top: 3px;
}

.sk-commentform {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.sk-commentform textarea {
    min-height: 72px;
}

/* ---------- insights (maintainer) ---------- */
.sk-insights {
    padding: 30px 40px 56px;
    max-width: 1140px;
    margin: 0 auto;
}

.sk-ins-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sk-ins-2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
}

.sk-statcard {
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

.sk-statcard:hover {
    box-shadow: var(--shadow-brand-subtle);
    border-color: var(--color-magenta-200);
}

.au-card.sk-statcard.active {
    border-color: var(--color-magenta-300);
    box-shadow: var(--shadow-brand-subtle);
}

.sk-stat-cta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--brand-foreground);
    font-weight: 600;
}

/* article editor */
.sk-editor {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-editor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 60px;
    z-index: 33;
    background: var(--card);
}

.sk-editor-body {
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    min-height: 340px;
    box-shadow: var(--shadow-xs);
    outline: none;
    background: var(--background);
}

.sk-editor-body:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
}

.dark .sk-editor-body {
    background: rgba(255, 255, 255, .04);
}

.sk-editor-body > :first-child {
    margin-top: 0;
}

/* editor formatting toolbar + link bar */
.sk-editstack {
    display: flex;
    flex-direction: column;
}

.sk-fmtbar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    padding: 6px;
    border: 1px solid var(--input);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--secondary);
}

.sk-fmtbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    min-width: 30px;
    justify-content: center;
    padding: 0 9px;
    border-radius: var(--radius-sm);
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 13px;
    color: var(--foreground);
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s;
}

.sk-fmtbtn:hover {
    background: var(--accent);
    color: var(--brand-foreground);
}

.sk-fmtdiv {
    width: 1px;
    align-self: stretch;
    margin: 5px 3px;
    background: var(--border);
}

.sk-linkbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--input);
    border-bottom: none;
    background: var(--card);
}

.sk-fmttools {
    position: sticky;
    top: 113px;
    z-index: 31;
    display: flex;
    flex-direction: column;
}

.sk-linkbar .au-input {
    flex: 1;
    height: 34px;
    margin: 0;
}

.sk-linkstack {
    display: flex;
    flex-direction: column;
}

.sk-secpick {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px 11px;
    border: 1px solid var(--input);
    border-top: none;
    border-bottom: none;
    background: var(--card);
}

.sk-secpick .lbl, .sk-artpick .lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
    font-family: var(--font-brand);
    font-weight: 600;
}

.sk-secpick .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sk-artpick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 11px;
    border-left: 1px solid var(--input);
    border-right: 1px solid var(--input);
    border-top: 1px solid var(--border);
    background: var(--card);
}

.sk-artpick .au-input {
    margin: 0;
    height: 34px;
}

.sk-artpick .results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 196px;
    overflow: auto;
}

.sk-artpick .empty {
    font-size: 12.5px;
    color: var(--muted-foreground);
    padding: 5px 3px;
}

.sk-artopt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .12s;
}

.sk-artopt:hover {
    background: var(--accent);
}

.sk-artopt .t {
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-artopt:hover .t {
    color: var(--brand-foreground);
}

.sk-artopt .sec {
    font-size: 11.5px;
    color: var(--muted-foreground);
    flex: none;
    white-space: nowrap;
}

.sk-secchip {
    display: inline-flex;
    align-items: center;
    max-width: 240px;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--background);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--foreground);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .12s, color .12s, border-color .12s;
}

.sk-secchip:hover {
    background: var(--accent);
    color: var(--brand-foreground);
    border-color: var(--brand-foreground);
}

.sk-secchip.sub {
    color: var(--muted-foreground);
}

.sk-editstack .sk-editor-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.sk-editnote {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.sk-editnote p.muted {
    font-size: 12.5px;
    margin: 0;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    max-width: 560px;
    line-height: 1.55;
}

.sk-editnote .au-btn {
    margin-left: auto;
}

.sk-gaprow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.sk-gaprow:first-of-type {
    border-top: none;
}

.sk-gaprow .cnt {
    margin-left: auto;
}

.sk-bar {
    height: 8px;
    border-radius: 9999px;
    background: var(--secondary);
    overflow: hidden;
    flex: 1;
}

.sk-bar > i {
    display: block;
    height: 100%;
    background: var(--brand-background);
    border-radius: 9999px;
}

/* ---------- misc ---------- */
.sk-link {
    color: var(--brand-foreground);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sk-backbar {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-foreground);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 16px;
    width: fit-content;
}

.sk-backbar:hover {
    color: var(--foreground);
}

.skC-iconbtn {
    cursor: pointer;
    background: var(--muted);
}

.skC-iconbtn.activeview {
    background: var(--accent);
    color: var(--brand-foreground);
}

.skA-nav a, .skB-top .nav a, .skC-nav, .skC-sub a, .skC-hublink, .sk-poprow, .sk-cite, .skA-chips .c {
    cursor: pointer;
}

.skA-chips .c:hover {
    background: rgba(255, 255, 255, .12);
}

.sk-poprow {
    border-radius: var(--radius-md);
    padding-left: 8px;
    padding-right: 8px;
    transition: background .15s;
}

.sk-poprow:hover {
    background: var(--accent);
}

.skC-hublink, .skC-sub a, .skC-nav {
    transition: color .15s, background .15s;
}

/* ---------- image edit popup ---------- */
.sk-img-popup {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 48px -8px rgba(0, 0, 0, .28), 0 4px 12px -4px rgba(0, 0, 0, .14);
    padding: 16px;
    width: 316px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-img-popup-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 4px;
}

.sk-img-popup-close {
    margin-left: auto;
    cursor: pointer;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    flex: none;
}

.sk-img-popup-close:hover {
    background: var(--accent);
    color: var(--foreground);
}

.sk-img-popup .au-label {
    margin-top: 2px;
}

.sk-img-sizes {
    display: flex;
    gap: 5px;
    margin-top: 2px;
}

.sk-img-sizebtn {
    flex: 1;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-family: var(--font-brand);
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    color: var(--foreground);
}

.sk-img-sizebtn:hover {
    background: var(--accent);
    border-color: var(--muted-foreground);
}

.sk-img-sizebtn.on {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.sk-img-size-label {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--muted-foreground);
    text-align: center;
}

.sk-img-popup-footer {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.sk-img-remove {
    color: var(--color-red-600) !important;
    border-color: var(--color-red-200) !important;
}

.sk-img-remove:hover {
    background: var(--color-red-50) !important;
}

.dark .sk-img-remove:hover {
    background: var(--color-red-950) !important;
}

/* selected image highlight in editor */
.sk-editor-body img.sk-img-sel {
    outline: 2px solid var(--brand-background);
    outline-offset: 2px;
    border-radius: 3px;
}

.sk-editor-body img {
    cursor: pointer;
}

/* image text wrap (float) */
.sk-editor-body figure.sk-fig[data-imgwrap="left"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"] {
    float: left;
    margin: 0 12px 6px 0;
}

.sk-editor-body figure.sk-fig[data-imgwrap="right"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"] {
    float: right;
    margin: 0 0 6px 12px;
}

.sk-editor-body img[data-imgwrap="left"] {
    float: left;
    margin: 0 12px 6px 0;
}

.sk-editor-body img[data-imgwrap="right"] {
    float: right;
    margin: 0 0 6px 12px;
}

.sk-prose-live img[data-imgwrap="left"] {
    float: left;
    margin: 0 12px 6px 0;
}

.sk-prose-live img[data-imgwrap="right"] {
    float: right;
    margin: 0 0 6px 12px;
}

/* when floating, size the figure (not the img) so % resolves against the prose container */
.sk-editor-body figure.sk-fig[data-imgwrap="left"] img,
.sk-editor-body figure.sk-fig[data-imgwrap="right"] img,
.sk-prose-live figure.sk-fig[data-imgwrap="left"] img,
.sk-prose-live figure.sk-fig[data-imgwrap="right"] img {
    max-width: 100% !important;
    height: auto !important;
}

.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="small"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="small"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="small"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="small"] {
    max-width: 33%;
}

.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="medium"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="medium"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="medium"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="medium"] {
    max-width: 50%;
}

.sk-editor-body figure.sk-fig[data-imgwrap="left"][data-imgsize="large"],
.sk-editor-body figure.sk-fig[data-imgwrap="right"][data-imgsize="large"],
.sk-prose-live figure.sk-fig[data-imgwrap="left"][data-imgsize="large"],
.sk-prose-live figure.sk-fig[data-imgwrap="right"][data-imgsize="large"] {
    max-width: 75%;
}

/* clearfix so content below floated images flows correctly */
.sk-editor-body::after, .sk-prose-live::after {
    content: "";
    display: table;
    clear: both;
}

/* image display sizes — editor + reader (max-width only — never upscale beyond natural size) */
.sk-editor-body img[data-imgsize="small"], .sk-prose-live img[data-imgsize="small"] {
    max-width: 33% !important;
}

.sk-editor-body img[data-imgsize="medium"], .sk-prose-live img[data-imgsize="medium"] {
    max-width: 50% !important;
}

.sk-editor-body img[data-imgsize="large"], .sk-prose-live img[data-imgsize="large"] {
    max-width: 75% !important;
}

.sk-editor-body img[data-imgsize="full"], .sk-prose-live img[data-imgsize="full"] {
    max-width: 100% !important;
}

/* footer */
.sk-foot {
    border-top: 1px solid var(--border);
    padding: 22px 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted-foreground);
    font-size: 12.5px;
    flex-wrap: wrap;
}

.sk-foot .sp {
    flex: 1;
}

.sk-foot a {
    cursor: pointer;
    text-decoration: none;
    color: var(--muted-foreground);
}

.sk-foot a:hover {
    color: var(--foreground);
}

/* ---------- app layout overrides (document scroll + sticky chrome) ---------- */
.skapp .skC {
    height: auto;
}

.skapp .skC-top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--background);
}

.skapp .skC-body {
    min-height: calc(100vh - 60px);
    position: relative;
}

.skapp .skC-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 264px;
    width: 1px;
    background: var(--border);
}

.skapp .skC-side {
    overflow: visible;
    position: sticky;
    top: 60px;
    align-self: start;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    border-right: none;
}

.skapp .skC-main {
    overflow: visible;
}

/* grid column needs min-width:0 so <pre> code blocks don't push beyond the column boundary */
.skC-article > div:first-child {
    min-width: 0;
    overflow-x: hidden;
}

.sk-prose-live pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------- search keyboard hint ---------- */
.sk-kbd {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex: none;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    color: var(--muted-foreground);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}

.skC-search .field:focus-within .sk-kbd {
    opacity: 0;
}

/* ---------- search: no-results empty state ---------- */
.sk-noresults {
    text-align: center;
    padding: 30px 20px 26px;
}

.sk-noresults .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    background: var(--secondary);
    color: var(--muted-foreground);
    margin-bottom: 16px;
}

.sk-noresults h1 {
    font-family: var(--font-brand);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}

.sk-noresults p {
    color: var(--muted-foreground);
    font-size: 15px;
    line-height: 23px;
    max-width: 520px;
    margin: 0 auto 20px;
    text-wrap: pretty;
}

.sk-noresults-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- image lightbox (click-to-zoom screenshots) ---------- */
.sk-prose-live img.sk-zoomable {
    cursor: zoom-in;
    transition: box-shadow .15s ease;
}

.sk-prose-live img.sk-zoomable:hover {
    box-shadow: 0 0 0 2px var(--ring);
}

.sk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(10, 10, 12, .82);
    backdrop-filter: blur(3px);
    cursor: zoom-out;
    animation: sk-lb-in .14s ease;
}

@keyframes sk-lb-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sk-lightbox img {
    max-width: min(1200px, 94vw);
    max-height: 90vh;
    width: auto;
    height: auto;
    cursor: default;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
    background: #fff;
}

.sk-lightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.sk-lightbox-close:hover {
    background: rgba(255, 255, 255, .28);
}

/* responsive */
@media (max-width: 920px) {
    .sk-resultwrap {
        grid-template-columns:1fr;
    }

    .skC-article {
        grid-template-columns:1fr !important;
    }

    .skC-toc {
        display: none;
    }

    .sk-artlist {
        grid-template-columns:1fr;
    }

    .sk-ins-grid {
        grid-template-columns:repeat(2, 1fr);
    }

    .sk-ins-2 {
        grid-template-columns:1fr;
    }

    .skC-body {
        grid-template-columns:1fr !important;
    }

    .skapp .skC-body::before {
        display: none;
    }

    .skC-side {
        display: none;
    }

    .skA-hero {
        padding-left: 24px;
        padding-right: 24px;
    }

    .skA-nav {
        display: none !important;
    }
}


/* ── Eleventy additions ─────────────────────────────────────────────────── */
.skC-top-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.skC-nav-grp {
    margin-bottom: 2px;
}

/* Article row list */
.sk-artlist {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sk-artrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    font-size: 13.5px;
    transition: background .12s;
    border-radius: var(--radius-md);
}

.sk-artrow:hover {
    background: var(--accent);
    color: var(--brand-foreground);
}

.sk-artrow svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.sk-artrow-title {
    flex: 1;
    font-weight: 500;
}

/* App (subsection) icons — invert in dark mode so dark artwork stays visible. */
.dark .sk-app-icon {
    filter: invert(1) hue-rotate(180deg);
}

/* Stacked title + excerpt (section pages) */
.sk-artrow-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sk-artrow-main .sk-artrow-title {
    flex: none;
}

.sk-artrow-excerpt {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-artrow:hover .sk-artrow-excerpt {
    color: var(--muted-foreground);
}

.sk-artrow-date {
    font-size: 12px;
    white-space: nowrap;
}

.sk-artrow-chevron {
    color: var(--muted-foreground);
    opacity: .5;
}

.sk-artrow:hover .sk-artrow-chevron {
    opacity: 1;
    color: var(--brand-foreground);
}

/* Subsection group */
.sk-subgroup {
    margin-bottom: 32px;
}

.sk-subgroup h2 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Section head */
.sk-secthead {
    margin-bottom: 24px;
}

.sk-secthead h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 28px;
    margin: 0 0 8px;
}

.sk-secthead p {
    color: var(--muted-foreground);
    font-size: 15px;
    margin: 0;
    max-width: 640px;
}

/* Article body wrapper */
.sk-article-body {
    min-width: 0;
}

/* Search result mark */
mark {
    background: rgba(254, 64, 197, .18);
    color: inherit;
    border-radius: 2px;
}

/* Footer */
.sk-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--muted-foreground);
}

.sk-foot a {
    color: inherit;
    text-decoration: none;
}

.sk-foot a:hover {
    color: var(--foreground);
}

.sk-foot .sp {
    flex: 1;
}

/* Topbar for inner pages */
.skC-top {
    background: var(--background);
}

/* Article prose additions */
.sk-prose-live table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.sk-prose-live th, .sk-prose-live td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.sk-prose-live th {
    background: var(--secondary);
    font-weight: 600;
}

.sk-prose-live img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

.sk-prose-live details.sk-faq {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 12px 0;
}

.sk-prose-live summary {
    font-weight: 600;
    cursor: pointer;
}

.sk-prose-live pre {
    background: var(--secondary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    overflow: auto;
    font-size: 13px;
}

.sk-prose-live code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--secondary);
    padding: 2px 5px;
    border-radius: 4px;
}

.sk-prose-live pre code {
    background: none;
    padding: 0;
}

.sk-prose-live h3 {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 17px;
    margin: 20px 0 10px;
}

.sk-prose-live ul {
    padding-left: 20px;
    margin: 0 0 16px;
}

.sk-prose-live ul li {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 6px;
}

.sk-prose-live .sk-embed {
    margin: 16px 0;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sk-prose-live .sk-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Hub card section count */
.skC-hubcard .cnt {
    margin-left: auto;
    color: var(--muted-foreground);
    font-size: 12.5px;
}