/* knowledge-graph.css - the semantic map: force-directed graph, the repo rail and the language legend.
 *
 * Extracted from knowledge-graph.html, which was over the 450-line limit almost
 * entirely because of this block and the script beside it. Left inline it was
 * also re-downloaded with every visit to the page and invisible to any tool
 * that reads stylesheets.
 */
        html, body { height: 100%; margin: 0; overflow: hidden; }
        body { background: var(--bg-primary, #06070f); }

        /* Top nav (compact, matches site) */
        nav.cg-nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 30;
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 22px; gap: 16px;
            background: rgba(6,7,15,0.55); backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
        }
        nav.cg-nav .cg-left { display: flex; align-items: center; gap: 18px; }
        nav.cg-nav .nav-logo { font-weight: 800; font-size: 1.1rem; text-decoration: none;
            background: linear-gradient(120deg,var(--accent,#4f7cff),var(--accent-tertiary,#34e0c4));
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        nav.cg-nav .cg-links { display: flex; gap: 14px; }
        nav.cg-nav .cg-links a { color: var(--text-secondary,#9aa4bf); text-decoration: none; font-size: 0.9rem; padding: 6px 10px; border-radius: 8px; transition: .2s; }
        nav.cg-nav .cg-links a:hover { color: var(--text-primary,#fff); background: var(--bg-card,rgba(255,255,255,0.05)); }
        nav.cg-nav .nav-cta { color: #0b0d18; font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 8px 16px; border-radius: 999px;
            background: linear-gradient(120deg,var(--accent,#4f7cff),var(--accent-tertiary,#34e0c4)); }
        @media (max-width: 760px) { nav.cg-nav .cg-links { display: none; } }

        /* Plate layout: a scrolling deck of repo cards beside the live graph, replacing
           the full-bleed canvas with floating controls. The canvas, the dock, the legend
           and the info panel are all the originals, re-parented - no behaviour changed. */
        .plate {
            position: fixed; inset: 56px 0 0 0; display: grid;
            grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
            /* Definite row. Without it the row is sized by content, and the stage's only
               child is absolutely positioned, so the canvas container could collapse to
               zero height and ForceGraph3D would initialise into nothing. */
            grid-template-rows: 100%;
        }
        .rail {
            border-right: 1px solid var(--border,rgba(255,255,255,0.09));
            background: var(--bg-secondary,#14100C);
            display: flex; flex-direction: column; min-height: 0;
        }
        .stage { position: relative; min-height: 0; height: 100%; overflow: hidden; }
        #graph { position: absolute; inset: 0; z-index: 1; }

        .dock .title h1 {
            font-family: var(--font-display, Georgia, serif);
            font-size: 1.42rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
            text-wrap: balance; margin: 0 0 8px;
        }
        .dock .title .sub {
            font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary,#A99584); margin: 0;
        }
        .live-lab {
            display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--text-tertiary,#6B5D51);
        }
        .live-lab i {
            width: 6px; height: 6px; border-radius: 50%; flex: none;
            background: var(--accent-secondary,#E0521F);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-secondary,#E0521F) 22%, transparent);
        }
        @media (prefers-reduced-motion: no-preference) {
            .live-lab i { animation: livepulse 2.6s ease-in-out infinite; }
            @keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
        }

        .ro-lab {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase;
            color: var(--text-tertiary,#6B5D51);
        }
        .readout { border-bottom: 1px solid var(--border,rgba(255,255,255,0.09)); }
        .ro-hd {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 18px; border-bottom: 1px solid var(--border,rgba(255,255,255,0.09));
        }
        .ro-live {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--accent-secondary,#E0521F);
        }
        .ro-figs { display: grid; grid-template-columns: 1fr 1fr; }
        .ro-fig {
            padding: 12px 18px;
            border-right: 1px solid var(--border,rgba(255,255,255,0.09));
            border-bottom: 1px solid var(--border,rgba(255,255,255,0.09));
        }
        .ro-fig:nth-child(2n) { border-right: 0; }
        .ro-fig:nth-last-child(-n+2) { border-bottom: 0; }
        .ro-fig .n {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 1.35rem; font-variant-numeric: tabular-nums;
            letter-spacing: -0.02em; color: var(--accent,#C08457);
        }
        .ro-fig .t {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--text-tertiary,#6B5D51); margin-top: 2px;
        }

        .deck-hd {
            display: flex; justify-content: space-between; padding: 9px 18px;
            border-bottom: 1px solid var(--border,rgba(255,255,255,0.09));
        }
        .deck { overflow-y: auto; flex: 1; min-height: 0; scroll-snap-type: y proximity; }
        .card {
            scroll-snap-align: start; position: relative; cursor: pointer;
            padding: 14px 18px; border-bottom: 1px solid var(--border,rgba(255,255,255,0.09));
        }
        .card::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
            background: transparent;
        }
        .card:hover { background: rgba(192,132,87,0.07); }
        .card[data-active="1"] { background: rgba(224,82,31,0.08); }
        .card[data-active="1"]::before { background: var(--accent-secondary,#E0521F); }
        .card .top { display: flex; align-items: baseline; gap: 8px; }
        .card .idx {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.6rem; color: var(--text-tertiary,#6B5D51);
        }
        .card h3 {
            font-family: var(--font-display, Georgia, serif);
            font-size: 1.02rem; font-weight: 600; margin: 0; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .card .lang {
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.58rem; letter-spacing: 0.05em; padding: 1px 6px;
            border: 1px solid var(--border,rgba(255,255,255,0.12)); border-radius: 3px; flex: none;
        }
        .card p {
            margin: 5px 0 7px; font-size: 0.83rem; color: var(--text-secondary,#A99584);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .card .facts {
            display: flex; gap: 12px; flex-wrap: wrap;
            font-family: var(--font-mono, ui-monospace, Menlo, monospace);
            font-size: 0.62rem; color: var(--text-tertiary,#6B5D51);
        }
        @media (max-width: 980px) {
            .plate { grid-template-columns: 1fr; grid-template-rows: 52vh auto; }
            .rail { border-right: 0; border-top: 1px solid var(--border,rgba(255,255,255,0.09)); order: 2; }
            .stage { order: 1; }
            .deck { max-height: 60vh; }
        }

        /* Control dock - horizontal bar under the nav (leaves the canvas full-width). */
        .dock {
            position: static; display: flex; align-items: flex-start; gap: 12px;
            flex-direction: column; background: transparent; border: 0; border-radius: 0;
            border-bottom: 1px solid var(--border,rgba(255,255,255,0.09));
            padding: 14px 18px; color: var(--text-primary,#fff);
        }
        .dock .title { display: flex; flex-direction: column; gap: 1px; flex: none; }
        .dock h1 { font-size: 0.98rem; margin: 0; }
        .dock .sub { font-size: 0.72rem; color: var(--text-secondary,#9aa4bf); margin: 0; max-width: 320px; }
        .dock .search { display: flex; gap: 8px; flex: none; }
        .dock input {
            width: 200px; background: rgba(255,255,255,0.05); border: 1px solid var(--border,rgba(255,255,255,0.1));
            border-radius: 10px; padding: 8px 12px; color: #fff; font-size: 0.85rem; outline: none;
        }
        .dock input:focus { border-color: var(--accent,#4f7cff); }
        .dock .stats { display: none; gap: 14px; font-size: 0.78rem; color: var(--text-secondary,#9aa4bf); flex-wrap: wrap; flex: none; }
        .dock .stats strong { color: var(--text-primary,#fff); }
        .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
        .cg-btn {
            background: rgba(255,255,255,0.06); border: 1px solid var(--border,rgba(255,255,255,0.1));
            color: var(--text-primary,#fff); border-radius: 10px; padding: 8px 12px; font-size: 0.8rem;
            cursor: pointer; transition: .2s; font-family: inherit;
        }
        .cg-btn:hover { background: var(--accent,#4f7cff); border-color: var(--accent,#4f7cff); }
        .cg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
        /* Pressed state for the semantic-map switch, so the current layout is obvious. */
        .cg-btn[aria-pressed="true"] { background: var(--accent-tertiary,#34e0c4); border-color: var(--accent-tertiary,#34e0c4); color: #0b0d18; font-weight: 600; }
        /* Legend flows horizontally along the bar; scrolls sideways if it overflows. */
        .legend { display: flex; flex-direction: row; gap: 12px; font-size: 0.74rem; color: var(--text-secondary,#9aa4bf);
            flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
        .legend .row { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
        .legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
        .legend::-webkit-scrollbar { height: 6px; }
        .legend::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 8px; }
        @media (max-width: 760px) { .dock .sub { display: none; } .dock input { width: 140px; } }

        .hint {
            position: fixed; z-index: 20; bottom: 18px; left: 50%; transform: translateX(-50%);
            background: rgba(10,12,24,0.72); backdrop-filter: blur(18px);
            border: 1px solid var(--border,rgba(255,255,255,0.08)); border-radius: 999px;
            padding: 8px 18px; font-size: 0.78rem; color: var(--text-secondary,#9aa4bf);
        }
        .hint strong { color: var(--text-primary,#fff); font-weight: 600; }
        .loading-cg { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; color: var(--text-secondary,#9aa4bf); background: var(--bg-primary,#06070f); }
        .spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--accent,#4f7cff); border-radius: 50%; animation: spin 0.9s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }