/* ==========================================================================
   KnowledgeGraph design system — single file, no build step.
   Organized with native @layer so the cascade is explicit and predictable.
   See DESIGN.md for the rationale behind every decision here.
   ========================================================================== */

@layer tokens, base, components, motion, utilities;

/* ==========================================================================
   @layer tokens — the single source of truth. Markup should reference these
   semantic variables, never raw hex. Light is the :root default; dark is an
   override keyed off the OS preference.
   ========================================================================== */
@layer tokens {
    :root {
        /* Neutrals — monochrome does the hierarchy work (Refactoring UI). */
        --bg: #fbfbfc;
        --surface: #ffffff;
        --surface-2: #f4f4f6;
        --surface-3: #ececef;
        --border: #e7e7ea;
        --border-strong: #d3d3d8;

        --text: #18181b;          /* ink — primary text */
        --text-muted: #5f5f68;    /* secondary text */
        --text-subtle: #8a8a93;   /* tertiary / placeholder */

        /* Ink — the primary action surface (near-black in light). */
        --ink: #18181b;
        --ink-hover: #2c2c31;
        --ink-active: #000000;
        --on-ink: #ffffff;

        /* Accent — ONE functional hue. Focus rings, selection, emphasis only.
           Never a decorative fill, never a gradient. Swap this one token to
           re-key the whole product. */
        --accent: #2563eb;
        --accent-hover: #1d4ed8;
        --accent-quiet: #eff4ff;  /* faint tint for selected rows etc. */
        --focus: color-mix(in srgb, var(--accent) 45%, transparent);

        /* Status — semantic only, always paired with text/icon. */
        --danger: #b42318;
        --danger-quiet: #fef3f2;
        --danger-border: #fbd5d0;
        --success: #157347;
        --success-quiet: #ecfdf3;
        --success-border: #bbe8cc;
        --warning: #b54708;
        --warning-quiet: #fffaeb;
        --warning-border: #fde7ba;

        /* Typography */
        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        --text-xs: 0.75rem;     /* 12 */
        --text-sm: 0.8125rem;   /* 13 */
        --text-base: 0.875rem;  /* 14 — console base */
        --text-md: 1rem;        /* 16 */
        --text-lg: 1.25rem;     /* 20 */
        --text-xl: 1.5rem;      /* 24 */
        --text-2xl: 1.875rem;   /* 30 */
        --weight-normal: 400;
        --weight-medium: 500;
        --weight-semibold: 600;
        --weight-bold: 700;
        --leading-tight: 1.2;
        --leading-normal: 1.5;

        /* Spacing — 4px base scale. */
        --space-1: 0.25rem;  /* 4  */
        --space-2: 0.5rem;   /* 8  */
        --space-3: 0.75rem;  /* 12 */
        --space-4: 1rem;     /* 16 */
        --space-5: 1.25rem;  /* 20 */
        --space-6: 1.5rem;   /* 24 */
        --space-8: 2rem;     /* 32 */
        --space-10: 2.5rem;  /* 40 */
        --space-12: 3rem;    /* 48 */
        --space-16: 4rem;    /* 64 */

        /* Radius — child radius never exceeds parent. */
        --radius-sm: 6px;
        --radius: 8px;
        --radius-lg: 12px;
        --radius-full: 999px;

        /* Elevation — borders first; shadows only for true overlays,
           layered (ambient + direct) per Vercel guidance. */
        --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
        --shadow-md: 0 1px 2px rgba(24, 24, 27, 0.08),
                     0 4px 12px rgba(24, 24, 27, 0.08);
        --shadow-lg: 0 2px 4px rgba(24, 24, 27, 0.08),
                     0 12px 32px rgba(24, 24, 27, 0.14);

        /* Layout */
        --container: 1080px;
        --container-prose: 640px;

        /* Motion */
        --dur-fast: 120ms;
        --dur: 200ms;
        --dur-slow: 320ms;
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
        --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

        color-scheme: light dark;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --bg: #0a0a0b;
            --surface: #141417;
            --surface-2: #1b1b1f;
            --surface-3: #232328;
            --border: #27272c;
            --border-strong: #3a3a42;

            --text: #f4f4f5;
            --text-muted: #a1a1aa;
            --text-subtle: #71717a;

            --ink: #fafafa;       /* near-white primary in dark */
            --ink-hover: #e4e4e7;
            --ink-active: #ffffff;
            --on-ink: #0a0a0b;

            --accent: #3b82f6;
            --accent-hover: #60a5fa;
            --accent-quiet: #16213a;
            --focus: color-mix(in srgb, var(--accent) 55%, transparent);

            --danger: #f97066;
            --danger-quiet: #2a1512;
            --danger-border: #5a241d;
            --success: #4ade80;
            --success-quiet: #11231a;
            --success-border: #1f4a32;
            --warning: #fdb022;
            --warning-quiet: #2a1f0a;
            --warning-border: #573a12;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
            --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5),
                         0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5),
                         0 12px 32px rgba(0, 0, 0, 0.6);
        }
    }
}

/* ==========================================================================
   @layer base — element defaults. No classes; just sane, designed primitives.
   ========================================================================== */
@layer base {
    * { box-sizing: border-box; }

    html { color-scheme: light dark; }

    body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
        background: var(--bg);
        color: var(--text);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3 {
        line-height: var(--leading-tight);
        font-weight: var(--weight-semibold);
        margin: 0;
        letter-spacing: 0;
    }
    h1 { font-size: var(--text-xl); }
    h2 { font-size: var(--text-lg); }
    h3 { font-size: var(--text-md); }

    p { margin: 0; }

    a {
        color: var(--text);
        text-decoration: none;
    }
    a:hover { text-decoration: underline; text-underline-offset: 2px; }

    code, pre, kbd, samp { font-family: var(--font-mono); }

    /* Numeric columns line up; comparisons read cleanly. */
    table, .tabular { font-variant-numeric: tabular-nums; }

    /* One focus treatment, everywhere. Keyboard-only via :focus-visible. */
    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }
    :focus:not(:focus-visible) { outline: none; }

    ::selection { background: var(--accent-quiet); }
}

/* ==========================================================================
   @layer components — the named vocabulary. Existing class names from the
   app are preserved so current pages keep working as we roll out.
   ========================================================================== */
@layer components {

    /* ---- App frame ------------------------------------------------------ */
    header.site {
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        -webkit-backdrop-filter: saturate(1.4);
        backdrop-filter: saturate(1.4);
        border-bottom: 1px solid var(--border);
        padding: var(--space-3) var(--space-6);
        display: flex;
        align-items: center;
        gap: var(--space-4);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    header.site a.brand {
        font-weight: var(--weight-bold);
        font-size: var(--text-md);
        color: var(--text);
        letter-spacing: 0;
    }
    header.site a.brand:hover { text-decoration: none; }
    header.site nav {
        display: flex;
        gap: var(--space-1);
        margin-left: auto;
        align-items: center;
    }
    header.site nav a {
        color: var(--text-muted);
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-sm);
        font-weight: var(--weight-medium);
        transition: color var(--dur-fast) var(--ease-out),
                    background-color var(--dur-fast) var(--ease-out);
    }
    header.site nav a:hover {
        color: var(--text);
        background: var(--surface-2);
        text-decoration: none;
    }
    header.site nav a[aria-current="page"] {
        color: var(--text);
        background: var(--accent-quiet);
    }

    main {
        max-width: var(--container);
        margin: var(--space-8) auto;
        padding: 0 var(--space-6);
    }
    main.prose { max-width: var(--container-prose); }

    .skip-link {
        position: absolute;
        left: var(--space-3);
        top: -3rem;
        background: var(--ink);
        color: var(--on-ink);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
        z-index: 100;
        transition: top var(--dur) var(--ease-out);
    }
    .skip-link:focus { top: var(--space-3); text-decoration: none; }

    /* ---- Page header ---------------------------------------------------- */
    .page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-6);
    }
    .page-header h1 { font-size: var(--text-2xl); }
    .page-header .subtitle { color: var(--text-muted); margin-top: var(--space-1); }

    /* ---- Panel / card --------------------------------------------------- */
    .panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        margin-bottom: var(--space-5);
    }
    .panel > h2:first-child,
    .panel > h3:first-child { margin-bottom: var(--space-4); }
    .panel-quiet { background: var(--surface-2); }
    .section-heading { margin-bottom: var(--space-4); }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-5);
    }
    .stat {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--space-4);
    }
    .stat span {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0;
        margin-bottom: var(--space-2);
    }
    .stat strong {
        display: block;
        font-size: var(--text-xl);
        line-height: var(--leading-tight);
        font-weight: var(--weight-semibold);
        font-variant-numeric: tabular-nums;
    }

    /* ---- Buttons -------------------------------------------------------- */
    button, .btn {
        --_bg: var(--ink);
        --_fg: var(--on-ink);
        --_bd: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: 2.25rem;        /* 36px hit target; 44px on coarse below */
        padding: 0 var(--space-4);
        background: var(--_bg);
        color: var(--_fg);
        border: 1px solid var(--_bd);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: var(--text-base);
        font-weight: var(--weight-medium);
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out),
                    opacity var(--dur-fast) var(--ease-out);
    }
    button:hover, .btn:hover { --_bg: var(--ink-hover); text-decoration: none; }
    button:active, .btn:active { --_bg: var(--ink-active); transform: translateY(0.5px); }
    button:disabled, .btn:disabled,
    button[aria-busy="true"], .btn[aria-busy="true"] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* Secondary — neutral, bordered. */
    button.secondary, .btn.secondary {
        --_bg: var(--surface);
        --_fg: var(--text);
        --_bd: var(--border-strong);
    }
    button.secondary:hover, .btn.secondary:hover { --_bg: var(--surface-2); }

    /* Ghost — text only, for low-emphasis inline actions. */
    button.ghost, .btn.ghost {
        --_bg: transparent;
        --_fg: var(--text-muted);
    }
    button.ghost:hover, .btn.ghost:hover { --_bg: var(--surface-2); --_fg: var(--text); }

    /* Destructive / positive — semantic, used sparingly. */
    button.danger, .btn.danger { --_bg: var(--danger); --_fg: #fff; }
    button.danger:hover, .btn.danger:hover {
        --_bg: color-mix(in srgb, var(--danger) 86%, #000);
    }
    button.ok, .btn.ok { --_bg: var(--success); --_fg: #fff; }
    button.ok:hover, .btn.ok:hover {
        --_bg: color-mix(in srgb, var(--success) 86%, #000);
    }

    .btn-sm { min-height: 1.75rem; padding: 0 var(--space-3); font-size: var(--text-sm); }

    /* Spinner shown while a submit is in flight (set by kg-ui.js). */
    [aria-busy="true"] .spinner,
    .btn .spinner { display: inline-block; }
    .spinner {
        display: none;
        width: 0.85em;
        height: 0.85em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: kg-spin 0.6s linear infinite;
    }

    /* ---- Forms ---------------------------------------------------------- */
    .field { margin-bottom: var(--space-4); }
    label {
        display: block;
        font-weight: var(--weight-medium);
        font-size: var(--text-sm);
        color: var(--text);
        margin-bottom: var(--space-2);
    }
    .hint { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

    input[type=text], input[type=email], input[type=password],
    input[type=datetime-local], input[type=search], input[type=number],
    select, textarea {
        width: 100%;
        padding: var(--space-2) var(--space-3);
        min-height: 2.25rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: var(--text-md);   /* ≥16px to avoid iOS zoom */
        color: var(--text);
        background: var(--surface);
        accent-color: var(--accent);
        color-scheme: light dark;
        transition: border-color var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out);
    }

    /* Custom select chevron so dropdowns match themed text inputs exactly
       (native appearance differs per-OS and breaks dark mode). */
    select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: var(--space-8);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3) center;
        background-size: 1rem;
    }
    @media (min-width: 640px) {
        input[type=text], input[type=email], input[type=password],
        input[type=datetime-local], input[type=search], input[type=number],
        select, textarea { font-size: var(--text-base); }
    }
    textarea { min-height: 6rem; resize: vertical; line-height: var(--leading-normal); }
    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--focus);
    }
    input::placeholder, textarea::placeholder { color: var(--text-subtle); }
    input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

    .inline-form { display: inline; margin: 0; }
    .inline-form button { margin: 0; }
    .form-actions { display: flex; align-items: end; padding-bottom: var(--space-4); }
    .query-grid {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) minmax(9rem, 12rem) minmax(9rem, 12rem) auto;
        gap: var(--space-3);
        align-items: end;
    }
    .sentence-form {
        display: grid;
        grid-template-columns: minmax(16rem, 1fr) minmax(10rem, 18rem) auto;
        gap: var(--space-3);
        align-items: end;
    }
    .sentence-form textarea { min-height: 4.75rem; }

    /* ---- Tables --------------------------------------------------------- */
    table { width: 100%; border-collapse: collapse; }
    th, td {
        text-align: left;
        padding: var(--space-3);
        border-bottom: 1px solid var(--border);
        vertical-align: top;
    }
    thead th {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0;
    }
    tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
    tbody tr:hover { background: var(--surface-2); }
    tbody tr:last-child td { border-bottom: none; }
    .sentence-table td:first-child { min-width: min(34rem, 52vw); }
    .sentence-table textarea { min-height: 4rem; }

    /* ---- Alerts (inline) ------------------------------------------------ */
    .error, .notice, .alert {
        display: flex;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius);
        border: 1px solid var(--border);
        margin-bottom: var(--space-4);
        font-size: var(--text-base);
    }
    .error  { background: var(--danger-quiet);  border-color: var(--danger-border);  color: var(--danger); }
    .notice { background: var(--success-quiet); border-color: var(--success-border); color: var(--success); }
    .alert.warning { background: var(--warning-quiet); border-color: var(--warning-border); color: var(--warning); }

    /* ---- Badges --------------------------------------------------------- */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        padding: 0.1rem var(--space-2);
        border-radius: var(--radius-full);
        background: var(--surface-3);
        color: var(--text-muted);
        border: 1px solid var(--border);
    }
    .badge.active   { background: var(--success-quiet); color: var(--success); border-color: var(--success-border); }
    .badge.inactive { background: var(--danger-quiet);  color: var(--danger);  border-color: var(--danger-border); }
    /* Color is never the only signal — pair with a dot or text in markup. */
    .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

    /* ---- Keyboard key --------------------------------------------------- */
    kbd, .kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        padding: 0.1rem var(--space-2);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        line-height: 1.4;
        color: var(--text-muted);
        background: var(--surface-2);
        border: 1px solid var(--border-strong);
        border-bottom-width: 2px;
        border-radius: var(--radius-sm);
    }

    /* ---- Secret / code blob (API keys) ---------------------------------- */
    .rawkey {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-family: var(--font-mono);
        font-size: var(--text-base);
        background: var(--surface-2);
        border: 1px solid var(--border);
        color: var(--text);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius);
        word-break: break-all;
        margin-top: var(--space-2);
    }
    .rawkey code { flex: 1; }

    /* ---- Empty state ---------------------------------------------------- */
    .empty-state {
        text-align: center;
        padding: var(--space-10) var(--space-6);
        color: var(--text-muted);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-lg);
    }
    .empty-state h3 { color: var(--text); margin-bottom: var(--space-2); }
    .empty-state p { margin: 0 auto var(--space-4); max-width: 36ch; }
    .results-list {
        display: grid;
        gap: var(--space-3);
        margin-top: var(--space-4);
    }
    .result-row {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--space-4);
        background: var(--surface-2);
        display: grid;
        gap: var(--space-3);
    }

    /* ---- Dialog (native <dialog>, free focus-trap + Esc) ---------------- */
    dialog {
        margin: auto;
        width: min(28rem, calc(100vw - 2rem));
        padding: var(--space-6);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--shadow-lg);
    }
    dialog::backdrop { background: rgba(9, 9, 11, 0.5); }
    dialog h2 { margin-bottom: var(--space-2); }
    dialog .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        margin-top: var(--space-6);
    }

    /* ---- Toasts (aria-live region lives in _Layout) --------------------- */
    .toast-region {
        position: fixed;
        bottom: var(--space-4);
        right: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        z-index: 1000;
        pointer-events: none;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .toast {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 16rem;
        max-width: 24rem;
        padding: var(--space-3) var(--space-4);
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        border-left: 3px solid var(--text-subtle);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        font-size: var(--text-base);
    }
    .toast.success { border-left-color: var(--success); }
    .toast.error   { border-left-color: var(--danger); }
    .toast.warning { border-left-color: var(--warning); }

    .muted { color: var(--text-muted); }
    a.cardlink { color: var(--text); font-weight: var(--weight-medium); }
    a.cardlink:hover { color: var(--accent); }

    /* ---- Home / landing route ------------------------------------------ */
    .kg-home {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .kg-home-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
        gap: var(--space-6);
        align-items: stretch;
        padding: var(--space-8);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }

    .kg-home-intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 22rem;
    }

    .kg-home-kicker {
        margin-bottom: var(--space-3);
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .kg-home h1 {
        max-width: 13ch;
        font-size: 3.75rem;
        line-height: 0.96;
        letter-spacing: 0;
    }

    .kg-home-lede {
        max-width: 42rem;
        margin-top: var(--space-5);
        color: var(--text-muted);
        font-size: var(--text-md);
    }

    .kg-home-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-6);
    }

    .kg-home-session {
        margin-top: var(--space-4);
        color: var(--text-subtle);
        font-size: var(--text-sm);
    }
    .kg-home-session span {
        color: var(--text-muted);
        font-family: var(--font-mono);
    }

    .kg-home-console {
        display: flex;
        flex-direction: column;
        min-height: 22rem;
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .kg-console-bar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 2.5rem;
        padding: 0 var(--space-4);
        border-bottom: 1px solid var(--border);
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-family: var(--font-mono);
    }
    .kg-console-bar span {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: var(--radius-full);
        background: var(--border-strong);
    }
    .kg-console-bar strong {
        margin-left: var(--space-2);
        font-weight: var(--weight-medium);
    }

    .kg-console-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 0;
        border-bottom: 1px solid var(--border);
    }
    .kg-console-stats div {
        padding: var(--space-4);
        border-right: 1px solid var(--border);
    }
    .kg-console-stats div:last-child { border-right: 0; }
    .kg-console-stats dt {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0;
    }
    .kg-console-stats dd {
        margin: var(--space-2) 0 0;
        font-size: var(--text-2xl);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        font-variant-numeric: tabular-nums;
    }

    .kg-console-flow {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        padding: var(--space-4);
        margin-top: auto;
    }
    .kg-console-flow div {
        min-height: 5.75rem;
        padding: var(--space-3);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }
    .kg-console-flow span {
        display: block;
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0;
    }
    .kg-console-flow code {
        display: block;
        margin-top: var(--space-4);
        color: var(--text);
        font-size: var(--text-sm);
    }

    .kg-public-terminal {
        display: grid;
        gap: var(--space-2);
        align-content: center;
        flex: 1;
        padding: var(--space-4);
    }
    .kg-public-terminal p {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: var(--space-2);
        align-items: start;
        min-width: 0;
        padding: var(--space-2);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }
    .kg-public-terminal span {
        color: var(--text-subtle);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
    }
    .kg-public-terminal code {
        white-space: normal;
        word-break: break-word;
        color: var(--text);
        font-size: var(--text-sm);
    }

    .kg-home-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: hidden;
    }

    .kg-home-link {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        min-height: 8rem;
        padding: var(--space-5);
        border-right: 1px solid var(--border);
        transition: background-color var(--dur-fast) var(--ease-out);
    }
    .kg-home-link:last-child { border-right: 0; }
    .kg-home-link:hover {
        background: var(--surface-2);
        text-decoration: none;
    }
    .kg-home-link span {
        color: var(--text-muted);
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .kg-home-link strong {
        max-width: 24rem;
        font-size: var(--text-md);
        font-weight: var(--weight-medium);
        line-height: var(--leading-normal);
    }

    .kg-home-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--space-5);
        align-items: start;
    }

    .kg-home-teams .row-between {
        margin-bottom: var(--space-4);
    }
    .kg-home-teams .row-between p {
        margin-top: var(--space-1);
        max-width: 44rem;
    }
    .kg-home-table .badge {
        text-transform: none;
    }
    .kg-home-empty {
        margin-top: var(--space-4);
    }

    .kg-home-aside {
        position: sticky;
        top: calc(3.75rem + var(--space-4));
    }

    .kg-home-steps {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding: 0;
        margin: var(--space-4) 0 0;
        list-style: none;
    }
    .kg-home-steps li {
        display: grid;
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: var(--space-3);
    }
    .kg-home-steps li > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        color: var(--text-muted);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        font-family: var(--font-mono);
        font-size: var(--text-xs);
    }
    .kg-home-steps strong {
        display: block;
        font-weight: var(--weight-semibold);
    }
    .kg-home-steps p {
        margin-top: var(--space-1);
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .kg-home-public .kg-home h1,
    .kg-home-public h1 {
        max-width: 14ch;
    }
    .kg-public-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .kg-public-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--space-5);
        align-items: start;
    }
    .kg-public-section-head {
        align-items: flex-start;
        margin-bottom: var(--space-4);
    }
    .kg-public-section-head p {
        margin-top: var(--space-1);
        max-width: 42rem;
    }
    .kg-install-list {
        display: grid;
        gap: var(--space-3);
    }
    .kg-install-list div {
        display: grid;
        grid-template-columns: auto minmax(10rem, 0.7fr) minmax(12rem, 1fr);
        gap: var(--space-3);
        align-items: center;
        padding: var(--space-4);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .kg-install-list strong {
        font-weight: var(--weight-semibold);
    }
    .kg-install-list code {
        min-width: 0;
        padding: var(--space-2) var(--space-3);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        font-size: var(--text-sm);
        white-space: normal;
        word-break: break-word;
    }

    /* ---- Install route -------------------------------------------------- */
    .kg-install-page {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .kg-install-sheet {
        display: grid;
        gap: var(--space-6);
    }

    .kg-install-sheet h1 {
        max-width: none;
        font-size: var(--text-2xl);
        line-height: var(--leading-tight);
    }

    .kg-install-section {
        display: grid;
        gap: var(--space-3);
        padding-top: var(--space-5);
        border-top: 1px solid var(--border);
    }

    .kg-install-section h2 {
        font-size: var(--text-md);
    }

    .kg-install-section-head {
        align-items: center;
    }

    .kg-auth-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .kg-auth-options > div {
        display: grid;
        align-content: start;
        gap: var(--space-3);
        padding: var(--space-4);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .kg-auth-options strong {
        font-size: var(--text-md);
        font-weight: var(--weight-semibold);
    }

    .kg-auth-options p {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .kg-agent-guides {
        display: grid;
        gap: var(--space-3);
    }

    .kg-agent-guides details {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .kg-agent-guides summary {
        cursor: pointer;
        padding: var(--space-4);
        font-weight: var(--weight-semibold);
    }

    .kg-agent-guide-body {
        display: grid;
        gap: var(--space-3);
        padding: 0 var(--space-4) var(--space-4);
    }

    .kg-code-block {
        position: relative;
        min-width: 0;
    }

    .kg-code-block button {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }

    .kg-code-block pre {
        margin: 0;
        min-height: 10rem;
        overflow-x: auto;
        padding: var(--space-5);
        padding-top: var(--space-10);
        background: var(--surface-2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .kg-code-block code {
        color: var(--text);
        font-size: var(--text-sm);
        line-height: 1.55;
    }

    .kg-custom-instructions-block pre {
        min-height: 16rem;
        max-height: 32rem;
        white-space: pre-wrap;
    }

    @media (max-width: 900px) {
        .kg-home-hero,
        .kg-home-grid,
        .kg-public-grid,
        .kg-auth-options {
            grid-template-columns: 1fr;
        }
        .kg-home-intro,
        .kg-home-console {
            min-height: auto;
        }
        .kg-home h1 {
            max-width: 16ch;
            font-size: 3rem;
        }
        .kg-home-aside {
            position: static;
        }
    }

    @media (max-width: 700px) {
        .kg-home-hero {
            padding: var(--space-5);
        }
        .kg-home h1 {
            font-size: var(--text-2xl);
            line-height: var(--leading-tight);
        }
        .kg-home-rail,
        .kg-public-rail,
        .kg-console-stats,
        .kg-console-flow {
            grid-template-columns: 1fr;
        }
        .kg-home-link,
        .kg-console-stats div {
            border-right: 0;
            border-bottom: 1px solid var(--border);
        }
        .kg-home-link:last-child,
        .kg-console-stats div:last-child {
            border-bottom: 0;
        }
        .kg-home-teams .row-between {
            align-items: flex-start;
            flex-direction: column;
        }
        .kg-home-table {
            min-width: 38rem;
        }
        .kg-home-teams {
            overflow-x: auto;
        }
        .kg-install-list div {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 760px) {
        header.site {
            flex-wrap: wrap;
            align-items: flex-start;
            gap: var(--space-2);
            padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right))
                     var(--space-2) max(var(--space-3), env(safe-area-inset-left));
        }
        header.site nav {
            width: 100%;
            margin-left: 0;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            padding-bottom: 1px;
            -webkit-overflow-scrolling: touch;
        }
        header.site nav::-webkit-scrollbar { display: none; }
        header.site nav a,
        header.site nav .inline-form,
        header.site nav button {
            flex: 0 0 auto;
        }

        main {
            margin: var(--space-5) auto;
            padding: 0 max(var(--space-3), env(safe-area-inset-right))
                     0 max(var(--space-3), env(safe-area-inset-left));
        }

        .page-header {
            flex-direction: column;
            gap: var(--space-3);
            margin-bottom: var(--space-5);
        }
        .page-header h1 { font-size: var(--text-xl); }
        .page-header > .cluster,
        .page-header > .btn {
            width: 100%;
        }
        .page-header > .cluster .btn,
        .page-header > .btn {
            flex: 1 1 auto;
        }

        .panel {
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .panel > h2:first-child,
        .panel > h3:first-child { margin-bottom: var(--space-3); }

        .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-2);
            margin-bottom: var(--space-4);
        }
        .stat {
            padding: var(--space-3);
        }
        .stat strong {
            font-size: var(--text-lg);
        }

        .query-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .query-grid .field:first-of-type,
        .query-grid .form-actions {
            grid-column: 1 / -1;
        }
        .form-actions {
            padding-bottom: 0;
        }
        .form-actions button,
        .sentence-form button {
            width: 100%;
        }
        .sentence-form {
            grid-template-columns: 1fr;
        }

        th, td {
            padding: var(--space-2) var(--space-3);
        }
        table {
            min-width: 34rem;
        }
        .sentence-table {
            min-width: 48rem;
        }
        .sentence-table td:first-child {
            min-width: 22rem;
        }

        .rawkey {
            align-items: stretch;
            flex-direction: column;
            gap: var(--space-2);
            padding: var(--space-3);
        }
        .rawkey button {
            width: 100%;
        }

        .empty-state {
            padding: var(--space-6) var(--space-4);
        }

        .kg-home {
            gap: var(--space-4);
        }
        .kg-home-hero {
            gap: var(--space-4);
            padding: var(--space-4);
        }
        .kg-home-lede {
            margin-top: var(--space-4);
            font-size: var(--text-base);
        }
        .kg-home-actions {
            width: 100%;
            margin-top: var(--space-5);
        }
        .kg-home-actions .btn {
            flex: 1 1 auto;
        }
        .kg-home-console {
            min-height: 0;
        }
        .kg-console-bar {
            min-height: 2rem;
            padding: 0 var(--space-3);
        }
        .kg-public-terminal {
            padding: var(--space-3);
        }
        .kg-home-link {
            min-height: auto;
            padding: var(--space-4);
        }
        .kg-home-steps {
            gap: var(--space-3);
        }
    }

    @media (max-width: 480px) {
        main {
            margin-top: var(--space-4);
            padding-left: max(var(--space-2), env(safe-area-inset-left));
            padding-right: max(var(--space-2), env(safe-area-inset-right));
        }
        .panel {
            padding: var(--space-3);
            border-radius: var(--radius);
        }
        .query-grid {
            grid-template-columns: 1fr;
        }
        .kg-home-hero {
            padding: var(--space-3);
        }
        .kg-home h1 {
            max-width: none;
            font-size: var(--text-xl);
        }
        .kg-public-terminal p {
            grid-template-columns: 1.25rem minmax(0, 1fr);
            padding: var(--space-2);
        }
        .toast-region {
            right: var(--space-2);
            left: var(--space-2);
        }
        .toast {
            min-width: 0;
            max-width: none;
            width: 100%;
        }
    }
}

/* ==========================================================================
   @layer motion — all movement. Compositor-only (transform/opacity), never
   `transition: all`, and entirely gated behind prefers-reduced-motion.
   ========================================================================== */
@layer motion {
    @keyframes kg-spin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: no-preference) {
        @keyframes kg-fade-in {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes kg-slide-up-in {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes kg-pop {
            from { opacity: 0; transform: scale(0.96); }
            to   { opacity: 1; transform: scale(1); }
        }

        .animate-in      { animation: kg-fade-in var(--dur) var(--ease-out) both; }
        .animate-slide   { animation: kg-slide-up-in var(--dur) var(--ease-out) both; }
        .animate-pop     { animation: kg-pop var(--dur-fast) var(--ease-emphasized) both; }

        /* Toast enter/exit with zero JS timers via discrete transitions. */
        .toast {
            transition: opacity var(--dur) var(--ease-out),
                        transform var(--dur) var(--ease-out);
        }
        .toast[data-leaving] { opacity: 0; transform: translateX(8px); }
        @starting-style {
            .toast { opacity: 0; transform: translateX(12px); }
        }

        dialog[open] { animation: kg-pop var(--dur) var(--ease-emphasized) both; }
        dialog::backdrop { transition: opacity var(--dur) var(--ease-out); }

        /* Cross-document view transitions can flash the browser default
           background between Razor pages, so keep MPA navigation immediate. */
        @view-transition { navigation: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        @view-transition { navigation: none; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ==========================================================================
   @layer utilities — small, composable layout helpers. Used sparingly; the
   components above carry most of the weight.
   ========================================================================== */
@layer utilities {
    .stack    { display: flex; flex-direction: column; gap: var(--space-4); }
    .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
    .cluster  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .grid-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: var(--space-4);
    }
    .text-muted  { color: var(--text-muted); }
    .text-subtle { color: var(--text-subtle); }
    .text-sm { font-size: var(--text-sm); }
    .mono { font-family: var(--font-mono); }
    .grow { flex: 1; }
    .visually-hidden {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    @media (max-width: 760px) {
        .row-between {
            align-items: flex-start;
            flex-wrap: wrap;
        }
        .cluster {
            gap: var(--space-2);
        }
    }

    /* Coarse pointers (touch) get the 44px target Vercel recommends. */
    @media (pointer: coarse) {
        button, .btn { min-height: 2.75rem; }
    }
}