/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║  KRONOS UI — Shared Design System                            ║
 * ║  Version: 1.0.0                                              ║
 * ║  Served at: https://ui.krisadamstv.com/kronos-ui.css         ║
 * ║                                                              ║
 * ║  Import in any page:                                         ║
 * ║  <link rel="stylesheet"                                      ║
 * ║        href="https://ui.krisadamstv.com/kronos-ui.css">      ║
 * ║  <script src="https://ui.krisadamstv.com/kronos-ui.js"       ║
 * ║          defer></script>                                     ║
 * ╚═══════════════════════════════════════════════════════════════╝
 *
 * Architecture
 * ────────────────────────────────────────────────────────────────
 * 1.  @property — typed custom properties for animation
 * 2.  :root tokens — color, typography, shape, elevation, motion
 * 3.  Reset & base — html, body, selection
 * 4.  Typography — scale classes (.kn-display, .kn-headline-*, etc.)
 * 5.  Layout — .kn-container, .kn-grid, .kn-section
 * 6.  Elevation & surfaces — .kn-surface-*
 * 7.  Components — card, button, badge, callout, nav, table,
 *                  stat, input, tag, divider
 * 8.  Utilities — text, spacing, display, visibility
 * 9.  Scroll-reveal — .kn-reveal (animated by kronos-ui.js)
 * 10. Keyframes
 *
 * Naming: kn- prefix (Kronos UI). Won't clash with existing code.
 * NO Courier New. NO font-size below 0.75rem for anything a user reads.
 */

/* ── Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Inter+Tight:wght@600;700;800&display=swap');


/* ── Typed Custom Properties ────────────────────────────────────── */
@property --glow-alpha {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}
@property --reveal-y {
    syntax: '<length>';
    initial-value: 24px;
    inherits: false;
}
@property --btn-bg {
    syntax: '<color>';
    initial-value: transparent;
    inherits: false;
}


/* ── Design Tokens ──────────────────────────────────────────────── */
:root {

    /* ─── Colour — Backgrounds ─────────────────────────────────── */
    /*
     * Elevation expressed as surface tone, not drop shadow depth.
     * Each step is slightly lighter — distinguishable but not jarring.
     * base → surface → elevated → overlay (0 → 1 → 2 → 3)
     */
    --color-bg-base:       #09090f;   /* page background */
    --color-bg-surface:    #111118;   /* cards, panels */
    --color-bg-elevated:   #18181f;   /* modals, dropdowns */
    --color-bg-overlay:    #22222c;   /* tooltips, top-layer items */
    --color-bg-input:      #141420;   /* form inputs */

    /* ─── Colour — Text ─────────────────────────────────────────── */
    --color-text-primary:   #edeae6;  /* main reading text — warm white */
    --color-text-secondary: #a0a0b0;  /* supporting text */
    --color-text-muted:     #606070;  /* placeholder, disabled label */
    --color-text-on-brand:  #ffffff;  /* text on brand-colour fills */

    /* ─── Colour — Brand ────────────────────────────────────────── */
    --color-brand:         #6c8aff;   /* primary blue */
    --color-brand-dim:     rgba(108, 138, 255, 0.12);
    --color-brand-glow:    rgba(108, 138, 255, 0.22);
    --color-brand-bright:  #8fa8ff;

    /* ─── Colour — Accents ──────────────────────────────────────── */
    --color-purple:        #a78bfa;
    --color-cyan:          #22d3ee;
    --color-amber:         #f59e0b;
    --color-green:         #22c55e;
    --color-red:           #ef4444;
    --color-gold:          #d4a853;

    /* ─── Colour — Semantic (tinted surfaces) ───────────────────── */
    --color-success-bg:    rgba(34, 197, 94, 0.10);
    --color-success-border:rgba(34, 197, 94, 0.25);
    --color-warning-bg:    rgba(245, 158, 11, 0.10);
    --color-warning-border:rgba(245, 158, 11, 0.25);
    --color-danger-bg:     rgba(239, 68, 68, 0.10);
    --color-danger-border: rgba(239, 68, 68, 0.25);
    --color-info-bg:       rgba(108, 138, 255, 0.10);
    --color-info-border:   rgba(108, 138, 255, 0.25);

    /* ─── Colour — Borders ──────────────────────────────────────── */
    --color-border:        rgba(255, 255, 255, 0.07);
    --color-border-subtle: rgba(255, 255, 255, 0.04);
    --color-border-strong: rgba(255, 255, 255, 0.14);

    /* ─── Typography — Scale ────────────────────────────────────── */
    /*
     * Five roles, three sizes each — same vocabulary as Material.
     * display: hero headings, large feature text
     * headline: section headers
     * title: card headers, labels with weight
     * body: reading text — NEVER below 15px (0.9375rem)
     * label: badges, tags, metadata — NEVER below 12px (0.75rem)
     */
    --type-font-base:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --type-font-tight:     'Inter Tight', 'Inter', sans-serif;

    --type-display:        clamp(2.25rem, 5vw, 3.5rem);
    --type-display-weight: 800;
    --type-display-leading:1.1;

    --type-headline-lg:    clamp(1.75rem, 3.5vw, 2.5rem);
    --type-headline-md:    clamp(1.375rem, 2.5vw, 1.875rem);
    --type-headline-sm:    1.25rem;
    --type-headline-weight:700;
    --type-headline-leading:1.2;

    --type-title-lg:       1.125rem;
    --type-title-md:       1rem;
    --type-title-sm:       0.9375rem;
    --type-title-weight:   600;
    --type-title-leading:  1.3;

    --type-body-lg:        1.0625rem;  /* 17px — comfortable long-form */
    --type-body-md:        1rem;       /* 16px */
    --type-body-sm:        0.9375rem;  /* 15px — minimum for body */
    --type-body-weight:    400;
    --type-body-leading:   1.75;

    --type-label-lg:       0.875rem;   /* 14px */
    --type-label-md:       0.8125rem;  /* 13px */
    --type-label-sm:       0.75rem;    /* 12px — hard minimum */
    --type-label-weight:   500;
    --type-label-spacing:  0.03em;

    /* ─── Shape — Scale ─────────────────────────────────────────── */
    /*
     * Graduated corner radii. Use the right size for the element:
     * xs → chips, tags, tight UI controls
     * sm → buttons, inputs, small cards
     * md → standard cards, panels
     * lg → large cards, modals
     * xl → hero panels, feature sections
     * 2xl → ultra-rounded hero blocks
     * full → pills, avatars, progress bars
     */
    --radius-none:  0px;
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   28px;
    --radius-full:  9999px;

    /* ─── Elevation — Shadows ───────────────────────────────────── */
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.3);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:    0 8px 40px rgba(0,0,0,0.5);
    --shadow-glow:  0 0 32px var(--color-brand-glow);
    --shadow-card:  0 2px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);

    /* ─── Motion ────────────────────────────────────────────────── */
    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-base:    250ms;
    --duration-slow:    400ms;
    --duration-enter:   550ms;

    --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
    --ease-decelerate:  cubic-bezier(0, 0, 0, 1);
    --ease-accelerate:  cubic-bezier(0.3, 0, 1, 1);
    --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);

    --spring: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%,
        0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 1.001 48.7%,
        1.008 53.2%, 0.999 60.9%, 1
    );
    --spring-gentle: linear(
        0, 0.009, 0.035 3.1%, 0.141, 0.281 11.4%,
        0.723 20.7%, 0.938 29%, 1.027, 1.063, 1.077,
        1.067, 1.009 62.3%, 1
    );

    /* ─── Layout ────────────────────────────────────────────────── */
    --container-width: 860px;
    --container-wide:  1100px;
    --container-narrow: 660px;
    --page-padding:    clamp(1.25rem, 5vw, 2.5rem);
    --section-gap:     clamp(3rem, 8vw, 6rem);
}


/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    font-family: var(--type-font-base);
    font-size: var(--type-body-lg);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
    color: var(--color-text-primary);
    background: var(--color-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ambient background — subtle gradient wash */
body.kn-page {
    background-image:
        radial-gradient(ellipse at 15% 25%, rgba(108,138,255,0.045) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(167,139,250,0.03) 0%, transparent 45%);
    background-attachment: fixed;
    min-height: 100vh;
}

img, video { max-width: 100%; display: block; }
a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-bright); }

::selection {
    background: var(--color-brand-dim);
    color: var(--color-brand-bright);
}

/* Global scrollbar — thin, branded */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(108,138,255,0.25);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(108,138,255,0.45); }


/* ── Typography Classes ─────────────────────────────────────────── */

.kn-display {
    font-family: var(--type-font-tight);
    font-size: var(--type-display);
    font-weight: var(--type-display-weight);
    line-height: var(--type-display-leading);
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.kn-headline-lg {
    font-family: var(--type-font-tight);
    font-size: var(--type-headline-lg);
    font-weight: var(--type-headline-weight);
    line-height: var(--type-headline-leading);
    letter-spacing: -0.01em;
}

.kn-headline-md {
    font-family: var(--type-font-tight);
    font-size: var(--type-headline-md);
    font-weight: var(--type-headline-weight);
    line-height: var(--type-headline-leading);
    letter-spacing: -0.01em;
}

.kn-headline-sm {
    font-size: var(--type-headline-sm);
    font-weight: var(--type-headline-weight);
    line-height: var(--type-headline-leading);
}

.kn-title-lg { font-size: var(--type-title-lg); font-weight: var(--type-title-weight); line-height: var(--type-title-leading); }
.kn-title-md { font-size: var(--type-title-md); font-weight: var(--type-title-weight); line-height: var(--type-title-leading); }
.kn-title-sm { font-size: var(--type-title-sm); font-weight: var(--type-title-weight); line-height: var(--type-title-leading); }

.kn-body-lg  { font-size: var(--type-body-lg);  line-height: var(--type-body-leading); }
.kn-body-md  { font-size: var(--type-body-md);  line-height: var(--type-body-leading); }
.kn-body-sm  { font-size: var(--type-body-sm);  line-height: 1.6; }

.kn-label-lg { font-size: var(--type-label-lg); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-spacing); }
.kn-label-md { font-size: var(--type-label-md); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-spacing); }
.kn-label-sm { font-size: var(--type-label-sm); font-weight: 600; letter-spacing: 0.05em; }

/* Default heading map — applies to pages that import this file */
h1 { font-family: var(--type-font-tight); font-size: var(--type-headline-lg); font-weight: var(--type-headline-weight); line-height: var(--type-headline-leading); letter-spacing: -0.015em; }
h2 { font-size: var(--type-headline-md); font-weight: var(--type-headline-weight); line-height: var(--type-headline-leading); }
h3 { font-size: var(--type-headline-sm); font-weight: var(--type-headline-weight); }
h4 { font-size: var(--type-title-lg);    font-weight: var(--type-title-weight); }
h5 { font-size: var(--type-title-md);    font-weight: var(--type-title-weight); }
h6 { font-size: var(--type-title-sm);    font-weight: var(--type-title-weight); color: var(--color-text-secondary); }

p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }

/* Inline code — styled, NOT defaulting to Courier New */
code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.875em;
    background: var(--color-bg-elevated);
    color: var(--color-cyan);
    padding: 0.15em 0.45em;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
}

pre {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.875rem;
    line-height: 1.65;
}

pre code {
    background: none;
    padding: 0;
    border: none;
    font-size: inherit;
    color: var(--color-text-primary);
}

/* Text modifiers */
.kn-text-primary   { color: var(--color-text-primary); }
.kn-text-secondary { color: var(--color-text-secondary); }
.kn-text-muted     { color: var(--color-text-muted); }
.kn-text-brand     { color: var(--color-brand); }
.kn-text-green     { color: var(--color-green); }
.kn-text-amber     { color: var(--color-amber); }
.kn-text-red       { color: var(--color-red); }
.kn-text-cyan      { color: var(--color-cyan); }
.kn-text-purple    { color: var(--color-purple); }
.kn-text-gold      { color: var(--color-gold); }


/* ── Layout ─────────────────────────────────────────────────────── */

.kn-container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--page-padding);
}
.kn-container--wide   { max-width: var(--container-wide); }
.kn-container--narrow { max-width: var(--container-narrow); }

.kn-section {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
}

.kn-grid {
    display: grid;
    gap: 1.5rem;
}
.kn-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kn-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kn-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.kn-flex        { display: flex; }
.kn-flex--center { display: flex; align-items: center; justify-content: center; }
.kn-flex--between { display: flex; align-items: center; justify-content: space-between; }
.kn-gap-sm      { gap: 0.5rem; }
.kn-gap-md      { gap: 1rem; }
.kn-gap-lg      { gap: 1.5rem; }


/* ── Surfaces & Cards ───────────────────────────────────────────── */

/* Base surface — any panel/container with elevation */
.kn-surface {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.kn-surface--elevated {
    background: var(--color-bg-elevated);
}
.kn-surface--overlay {
    background: var(--color-bg-overlay);
}

/* Card — standard content block */
.kn-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}
.kn-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-1px);
}

/* Card with accent left border */
.kn-card--accent {
    border-left: 3px solid var(--color-brand);
}

/* Flat card — no hover lift */
.kn-card--flat {
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.kn-card--flat:hover {
    transform: none;
    box-shadow: var(--shadow-card);
}

/* Hero card — large feature block */
.kn-card--hero {
    padding: 2.5rem;
    background:
        linear-gradient(135deg,
            rgba(108,138,255,0.06) 0%,
            transparent 60%),
        var(--color-bg-surface);
    border-radius: var(--radius-xl);
}

.kn-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.kn-card__title {
    font-size: var(--type-title-lg);
    font-weight: var(--type-title-weight);
    color: var(--color-text-primary);
}
.kn-card__subtitle {
    font-size: var(--type-body-sm);
    color: var(--color-text-secondary);
    margin-top: 0.2rem;
}
.kn-card__body {
    font-size: var(--type-body-md);
    color: var(--color-text-secondary);
    line-height: var(--type-body-leading);
}
.kn-card__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


/* ── Buttons ────────────────────────────────────────────────────── */

.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--type-font-base);
    font-size: var(--type-label-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-instant) var(--ease-accelerate);
    white-space: nowrap;
    user-select: none;
}
.kn-btn:active { transform: scale(0.97); }

/* Primary */
.kn-btn--primary {
    background: var(--color-brand);
    color: var(--color-text-on-brand);
    border-color: var(--color-brand);
}
.kn-btn--primary:hover {
    background: var(--color-brand-bright);
    border-color: var(--color-brand-bright);
    box-shadow: 0 0 20px var(--color-brand-glow);
    color: var(--color-text-on-brand);
}

/* Secondary */
.kn-btn--secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}
.kn-btn--secondary:hover {
    background: var(--color-bg-overlay);
    border-color: var(--color-brand);
    color: var(--color-text-primary);
}

/* Ghost */
.kn-btn--ghost {
    background: transparent;
    color: var(--color-brand);
    border-color: transparent;
}
.kn-btn--ghost:hover {
    background: var(--color-brand-dim);
    color: var(--color-brand);
}

/* Danger */
.kn-btn--danger {
    background: var(--color-danger-bg);
    color: var(--color-red);
    border-color: var(--color-danger-border);
}
.kn-btn--danger:hover {
    background: rgba(239,68,68,0.2);
    color: var(--color-red);
}

/* Sizes */
.kn-btn--sm {
    font-size: var(--type-label-sm);
    padding: 0.4rem 0.875rem;
    border-radius: var(--radius-xs);
}
.kn-btn--lg {
    font-size: var(--type-title-sm);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-md);
}

/* Icon button */
.kn-btn--icon {
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
}


/* ── Badges & Tags ──────────────────────────────────────────────── */

.kn-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--type-label-md);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    border: 1px solid;
    line-height: 1;
    white-space: nowrap;
}

.kn-badge--green {
    color: var(--color-green);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}
.kn-badge--amber {
    color: var(--color-amber);
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}
.kn-badge--red {
    color: var(--color-red);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}
.kn-badge--blue {
    color: var(--color-brand);
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}
.kn-badge--purple {
    color: var(--color-purple);
    background: rgba(167,139,250,0.1);
    border-color: rgba(167,139,250,0.25);
}
.kn-badge--cyan {
    color: var(--color-cyan);
    background: rgba(34,211,238,0.1);
    border-color: rgba(34,211,238,0.25);
}
.kn-badge--neutral {
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

/* Live pulse indicator */
.kn-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.kn-badge__dot--pulse {
    animation: kn-pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tag — inline label, less prominent than badge */
.kn-tag {
    display: inline-block;
    font-size: var(--type-label-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    padding: 0.15rem 0.55rem;
    line-height: 1.5;
}


/* ── Callouts ───────────────────────────────────────────────────── */
/*
 * Callout colour semantics (inherited from ideas/style.css):
 *   insight  → purple/blue — AI insight, general emphasis
 *   warning  → amber — failure mode, caveat
 *   tech     → cyan — technical implementation detail
 *   sa       → green — South Africa context
 *   gold     → gold — Kris's own words verbatim
 *   red      → red — must-not-miss (use sparingly, max one per page)
 */

.kn-callout {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid;
    margin-bottom: 1.5rem;
    font-size: var(--type-body-sm);
    line-height: 1.7;
}
.kn-callout__icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.1em; }
.kn-callout__body { flex: 1; }
.kn-callout__body strong { display: block; margin-bottom: 0.25rem; font-size: var(--type-label-lg); }

.kn-callout--insight {
    background: rgba(108,138,255,0.07);
    border-color: rgba(108,138,255,0.2);
    color: #b8c4ff;
}
.kn-callout--warning {
    background: rgba(245,158,11,0.07);
    border-color: rgba(245,158,11,0.2);
    color: #fcd37a;
}
.kn-callout--tech {
    background: rgba(34,211,238,0.07);
    border-color: rgba(34,211,238,0.2);
    color: #86e8f5;
}
.kn-callout--success {
    background: rgba(34,197,94,0.07);
    border-color: rgba(34,197,94,0.2);
    color: #86efac;
}
.kn-callout--gold {
    background: rgba(212,168,83,0.07);
    border-color: rgba(212,168,83,0.25);
    color: #e6c97a;
}
.kn-callout--red {
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.25);
    color: #fca5a5;
}


/* ── Navigation ─────────────────────────────────────────────────── */

.kn-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.875rem var(--page-padding);
    background: rgba(9,9,15,0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--color-border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.kn-nav__brand {
    font-family: var(--type-font-tight);
    font-size: var(--type-title-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}
.kn-nav__brand:hover { color: var(--color-text-primary); }

.kn-nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.kn-nav__link {
    font-size: var(--type-body-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast), background var(--duration-fast);
    text-decoration: none;
}
.kn-nav__link:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
}
.kn-nav__link--active {
    color: var(--color-brand);
    background: var(--color-brand-dim);
}

.kn-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}


/* ── Tables ─────────────────────────────────────────────────────── */

.kn-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.kn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-sm);
    background: var(--color-bg-surface);
}

.kn-table th {
    font-size: var(--type-label-md);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.kn-table td {
    padding: 0.875rem 1.25rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: middle;
}
.kn-table td:first-child { color: var(--color-text-primary); }
.kn-table tr:last-child td { border-bottom: none; }

.kn-table tbody tr {
    transition: background var(--duration-instant);
}
.kn-table tbody tr:hover {
    background: rgba(255,255,255,0.025);
}


/* ── Forms & Inputs ─────────────────────────────────────────────── */

.kn-input {
    display: block;
    width: 100%;
    font-family: var(--type-font-base);
    font-size: var(--type-body-md);
    color: var(--color-text-primary);
    background: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    outline: none;
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}
.kn-input::placeholder { color: var(--color-text-muted); }
.kn-input:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-dim);
}

.kn-label {
    display: block;
    font-size: var(--type-label-lg);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.4rem;
}

.kn-field {
    margin-bottom: 1.25rem;
}


/* ── Stat / Metric display ──────────────────────────────────────── */

.kn-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.kn-stat__label {
    font-size: var(--type-label-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.kn-stat__value {
    font-family: var(--type-font-tight);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.kn-stat__sub {
    font-size: var(--type-label-md);
    color: var(--color-text-muted);
}
.kn-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--type-label-md);
    font-weight: 600;
}
.kn-stat__delta--up   { color: var(--color-green); }
.kn-stat__delta--down { color: var(--color-red); }


/* ── Progress bar ───────────────────────────────────────────────── */

.kn-progress {
    height: 4px;
    background: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.kn-progress__bar {
    height: 100%;
    background: var(--color-brand);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-decelerate);
}


/* ── Divider ────────────────────────────────────────────────────── */

.kn-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2rem 0;
}
.kn-divider--subtle {
    border-color: var(--color-border-subtle);
}


/* ── Status Indicators ──────────────────────────────────────────── */

.kn-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--type-label-lg);
    font-weight: 500;
    color: var(--color-text-secondary);
}
.kn-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kn-status--live .kn-status__dot {
    background: var(--color-green);
    animation: kn-pulse 1.4s infinite;
}
.kn-status--offline .kn-status__dot { background: var(--color-text-muted); }
.kn-status--warning .kn-status__dot { background: var(--color-amber); }
.kn-status--error .kn-status__dot   { background: var(--color-red); }


/* ── Page Header ────────────────────────────────────────────────── */

.kn-page-header {
    padding: 3rem 0 2rem;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 3rem;
}
.kn-page-header__eyebrow {
    font-size: var(--type-label-md);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand);
    margin-bottom: 0.75rem;
}
.kn-page-header__title {
    font-family: var(--type-font-tight);
    font-size: var(--type-headline-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}
.kn-page-header__desc {
    font-size: var(--type-body-lg);
    color: var(--color-text-secondary);
    max-width: 560px;
    line-height: 1.7;
}


/* ── Scroll Reveal ──────────────────────────────────────────────── */
/*
 * Elements with .kn-reveal start hidden and animate in when they
 * enter the viewport. Driven by kronos-ui.js IntersectionObserver.
 * Stagger siblings with data-delay="100" (ms).
 */

.kn-reveal {
    opacity: 0;
    --reveal-y: 24px;
    transform: translateY(var(--reveal-y));
    transition:
        opacity var(--duration-enter) var(--ease-out-expo),
        transform var(--duration-enter) var(--ease-out-expo),
        --reveal-y var(--duration-enter) var(--ease-out-expo);
}
.kn-reveal.is-visible {
    opacity: 1;
    --reveal-y: 0px;
}

/* Fade only (no Y shift) */
.kn-reveal--fade {
    transform: none;
    transition: opacity var(--duration-enter) var(--ease-out-expo);
}

/* Scale in */
.kn-reveal--scale {
    transform: translateY(var(--reveal-y)) scale(0.97);
    transition:
        opacity var(--duration-enter) var(--ease-out-expo),
        transform var(--duration-enter) var(--spring-gentle),
        --reveal-y var(--duration-enter) var(--ease-out-expo);
}
.kn-reveal--scale.is-visible {
    transform: translateY(0) scale(1);
}


/* ── Utility Classes ────────────────────────────────────────────── */

.kn-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Spacing */
.kn-mt-sm  { margin-top: 0.5rem; }
.kn-mt-md  { margin-top: 1rem; }
.kn-mt-lg  { margin-top: 2rem; }
.kn-mb-sm  { margin-bottom: 0.5rem; }
.kn-mb-md  { margin-bottom: 1rem; }
.kn-mb-lg  { margin-bottom: 2rem; }

/* Truncate text */
.kn-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Monospace number — for counters, timestamps */
.kn-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}


/* ── Keyframes ──────────────────────────────────────────────────── */

@keyframes kn-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes kn-spin {
    to { transform: rotate(360deg); }
}

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

@keyframes kn-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kn-glow-pulse {
    0%, 100% { --glow-alpha: 0.08; }
    50%      { --glow-alpha: 0.22; }
}


/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root {
        --page-padding: 1rem;
        --section-gap: 2.5rem;
    }
    .kn-grid--2,
    .kn-grid--3,
    .kn-grid--4 {
        grid-template-columns: 1fr;
    }
    .kn-nav {
        gap: 0.75rem;
        padding: 0.75rem var(--page-padding);
    }
    .kn-nav__links { display: none; }
}