/*
 * panel.css - the node inspector shared by Code Graph and Code Brain.
 *
 * Both pages carried their own near-identical copy of this and the copies had
 * drifted: one hugged its content, the other stretched to the full height of the
 * stage and left a large empty card under four lines of text. One had a collapse
 * control, the other only a close. This is the single source; the union of both
 * is here, and a rule a page does not use costs it nothing.
 */

.info {
    /* Anchored to the stage rather than the viewport, and sized to its content:
       the panel is a summary, so a full-height card is mostly empty space. */
    position: absolute; z-index: 20; right: 18px; top: 18px;
    max-height: calc(100% - 36px);
    width: 322px; max-width: calc(100% - 36px);
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    background: color-mix(in srgb, var(--bg-secondary, #14100C) 90%, transparent);
    backdrop-filter: blur(22px);
    border: 1px solid var(--border, rgba(255, 240, 228, 0.09));
    border-radius: 18px; padding: 18px; color: var(--text-primary, #F3EBE2);
    transform: translateX(120%); opacity: 0;
    transition: transform .35s var(--ease-silk, cubic-bezier(.2, .8, .2, 1)), opacity .25s;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 240, 228, 0.22) transparent;
}
.info.open { transform: translateX(0); opacity: 1; }
.info::-webkit-scrollbar { width: 8px; }
.info::-webkit-scrollbar-thumb { background: rgba(255, 240, 228, 0.16); border-radius: 8px; }
.info::-webkit-scrollbar-track { background: transparent; }

/* ---- header ------------------------------------------------------------
   The controls were two unlabelled glyphs jammed into the corner, overlapping
   the title on a long repo name. They sit on their own row now. */
.info .pnl-hd {
    /* Sticks while the body scrolls, so close and collapse are always reachable.
       They used to scroll away with the content. The negative offset and padding
       cancel the panel's own padding so the header spans its full width. */
    position: sticky; top: -18px; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    margin: -18px -18px 10px; padding: 14px 18px 10px;
    background: color-mix(in srgb, var(--bg-secondary, #14100C) 96%, transparent);
    border-bottom: 1px solid var(--border, rgba(255, 240, 228, 0.09));
    border-radius: 18px 18px 0 0;
}
.info .kind {
    flex: 1; min-width: 0;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-tertiary, #6B5D51);
}
.info .close, .info .min {
    /* Static, not absolutely positioned: they were pinned over the heading. */
    position: static; flex: none;
    width: 26px; height: 26px; display: inline-flex;
    align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: 8px;
    color: var(--text-tertiary, #6B5D51); font-size: 0.95rem; line-height: 1;
    cursor: pointer;
}
.info .close:hover, .info .min:hover {
    color: var(--text-primary, #F3EBE2);
    border-color: var(--border, rgba(255, 240, 228, 0.09));
}

.info h2 {
    /* Was 1.15rem, which ran a long repo name to three lines. */
    font-size: 1.02rem; line-height: 1.35; margin: 0 0 8px;
    overflow-wrap: anywhere;
}
.info p {
    font-size: 0.84rem; line-height: 1.6;
    color: var(--text-secondary, #A99584); margin: 0 0 12px;
}

/* ---- meta --------------------------------------------------------------
   A flex row orphaned the last item onto its own line. Fixed columns keep the
   pairs together and aligned. */
.info .meta {
    /* auto-fit rather than two fixed columns: a long value like "Jupyter Notebook
       language" was being ellipsised to "Jupyter Notebook la...". Items wrap
       instead of being clipped. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 4px 12px;
    font-size: 0.76rem; color: var(--text-secondary, #A99584); margin-bottom: 12px;
}
.info .meta strong { color: var(--text-primary, #F3EBE2); font-weight: 600; }

.info .links { display: flex; flex-wrap: wrap; gap: 12px; }
.info .links a, .info .links button {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--accent, #C08457); text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.info .links a:hover, .info .links button:hover { color: var(--accent-secondary, #E0521F); }

/* ---- dive controls (Code Brain) ---------------------------------------- */
.info .dive { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255, 240, 228, 0.09)); }
.info .dive .label { font-size: 0.72rem; color: var(--text-secondary, #A99584); margin-bottom: 8px; }
.info .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

.cg-btn.primary {
    background: var(--accent, #C08457); border-color: var(--accent, #C08457);
    color: #1a1008; font-weight: 600;
}
.cg-btn.primary:hover { filter: brightness(1.08); }
.cg-btn.primary:disabled { opacity: 0.6; cursor: default; }

/* Collapsed: shrink to the header so it stops covering the canvas. */
/* Collapsed keeps the header and the name, so a collapsed panel still says what
   it is about. Everything below it goes. */
.info.collapsed { padding-bottom: 14px; }
.info.collapsed h2 { margin-bottom: 0; }
.info.collapsed #i-desc, .info.collapsed #i-meta, .info.collapsed #i-links,
.info.collapsed #i-dive, .info.collapsed #i-findings,
.info.collapsed #i-kin,
/* Code Graph's walk block carries no id, so it is matched by class. */
.info.collapsed .step, .info.collapsed .kin, .info.collapsed .findings { display: none !important; }

/* ---- neighbours and walk (Code Graph) --------------------------------- */
.info .kin:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255, 240, 228, 0.09)); }
.info .kin .label, .info .step .label {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-tertiary, #6B5D51); margin-bottom: 8px;
}
.info .kin button {
    display: flex; justify-content: space-between; gap: 10px; width: 100%;
    text-align: left; background: none; border: 0; cursor: pointer;
    color: var(--text-secondary, #A99584); font-size: 0.82rem; padding: 5px 0;
}
.info .kin button:hover { color: var(--text-primary, #F3EBE2); }
.info .kin .score {
    color: var(--accent, #C08457); font-variant-numeric: tabular-nums; flex: none;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.76rem;
}
.info .step { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255, 240, 228, 0.09)); }

/* ---- findings summary (Code Brain) ------------------------------------
   A summary, not the report: the detail is in the reader. */
.info .findings { margin-top: 12px; }
.info .findings .sev-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 0.7rem; }
.info .findings .pill { padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.info .findings .pill.h { background: rgba(224, 82, 31, 0.16); color: #F08A63; border: 1px solid rgba(224, 82, 31, 0.35); }
.info .findings .pill.m { background: rgba(217, 164, 65, 0.16); color: #D9A441; border: 1px solid rgba(217, 164, 65, 0.35); }
.info .findings .pill.l { background: rgba(127, 166, 184, 0.16); color: #9CC0CF; border: 1px solid rgba(127, 166, 184, 0.3); }
.info .findings .item { padding: 8px 0; border-top: 1px solid var(--border, rgba(255, 240, 228, 0.07)); }
.info .findings .item .ttl { font-size: 0.79rem; color: var(--text-primary, #F3EBE2); display: flex; align-items: baseline; gap: 7px; }
.info .findings .item .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.info .findings .item .dot.h { background: #E0521F; }
.info .findings .item .dot.m { background: #D9A441; }
.info .findings .item .dot.l { background: #7FA6B8; }
.info .findings .item .loc {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.68rem; color: var(--text-tertiary, #6B5D51); margin-top: 2px;
    overflow-wrap: anywhere;
}
.info .findings .scope {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: 0.64rem; color: var(--text-tertiary, #6B5D51); margin-top: 10px;
}

/* The legend clipped its last entries at the rail edge. Wrapping shows all of
   them; the rail scrolls if it needs to. */
.legend { flex-wrap: wrap !important; overflow-x: visible !important; }

@media (prefers-reduced-motion: reduce) { .info { transition: none; } }