/* ==========================================================================
   Knowledge graph page (custom-graph.hbs)
   ========================================================================== */

.graph-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 0px);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
    gap: var(--spacing-md);
}

.graph-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md) var(--spacing-xl);
}
.graph-title { font-size: 1.5rem; letter-spacing: -0.02em; }
.graph-intro { margin-top: var(--spacing-xs); color: var(--color-text-secondary); max-width: 60ch; }

.graph-stats { display: flex; gap: var(--spacing-lg); margin: 0; }
.graph-stats div { display: flex; flex-direction: column; gap: 2px; }
.graph-stats dt { font-size: 0.7rem; }
.graph-stats dd { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Toolbar */
.graph-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md) var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
.graph-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.graph-filters label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.graph-filters input { accent-color: var(--color-accent); }

.graph-timelapse { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; min-width: 240px; }
.graph-timelapse input[type="range"] { flex: 1; accent-color: var(--color-accent); }
.graph-date { min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.graph-speed {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.graph-zoom { display: flex; gap: 4px; margin-left: auto; }
.graph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-mono);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.graph-btn:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-strong); }
#graphPlay .icon-pause { display: none; }
#graphPlay.is-playing .icon-play { display: none; }
#graphPlay.is-playing .icon-pause { display: block; }

/* Stage */
.graph-stage {
    position: relative;
    flex: 1;
    min-height: 520px;
    height: calc(100vh - 260px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 70%, transparent) 1px, transparent 0) 0 0 / 24px 24px,
        var(--color-bg);
    overflow: hidden;
    touch-action: none;
    user-select: none;
}
.graph-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-canvas.is-dragging { cursor: grabbing; }
.graph-canvas.is-hovering { cursor: pointer; }

.graph-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.graph-stage.is-ready .graph-loading { display: none; }
.graph-stage.is-error .graph-loading { color: #d64545; }

.graph-legend {
    position: absolute;
    left: var(--spacing-md);
    bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    pointer-events: none;
}
.graph-legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: var(--color-text-muted); vertical-align: -1px; }
.graph-legend-cat { width: 12px; height: 12px; }
.graph-legend-tag { width: 9px; height: 9px; opacity: 0.8; }
.graph-legend-post { width: 7px; height: 7px; opacity: 0.6; }

/* Info panel */
.graph-panel {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: min(320px, calc(100% - 2 * var(--spacing-md)));
    max-height: calc(100% - 2 * var(--spacing-md));
    overflow: auto;
    padding: var(--spacing-md);
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--cat-color, var(--color-accent));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
}
.graph-panel-kind { display: block; margin-bottom: var(--spacing-xs); color: var(--cat-color, var(--color-text-muted)); }
.graph-panel-title { font-size: 1rem; line-height: 1.35; margin-bottom: var(--spacing-sm); }
.graph-panel-title a { color: var(--color-text); }
.graph-panel-title a:hover { color: var(--color-accent); }
.graph-panel-excerpt { color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.graph-panel-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-md); margin-bottom: var(--spacing-sm); }
.graph-panel-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--spacing-sm); }
.graph-chip { padding: 2px 8px; border-radius: 999px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-secondary); }
.graph-panel-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
.graph-panel-list li { padding: 3px 0; border-top: 1px solid var(--color-border); }
.graph-panel-list a { color: var(--color-text-secondary); }
.graph-panel-list a:hover { color: var(--color-text); }
.graph-panel-close { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: var(--radius-md); color: var(--color-text-muted); }
.graph-panel-close:hover { background: var(--color-bg-tertiary); color: var(--color-text); }
.graph-panel-open { display: inline-block; margin-top: var(--spacing-xs); font-weight: 500; }

.graph-notes { max-width: var(--content-max-width); margin: var(--spacing-xl) auto 0; }

@media (max-width: 1024px) {
    .graph-page { padding: var(--spacing-md); }
    .graph-stage { height: calc(100vh - 320px); min-height: 420px; }
    .graph-zoom { margin-left: 0; }
}
@media (max-width: 640px) {
    .graph-stats { gap: var(--spacing-md); }
    .graph-panel { top: auto; bottom: var(--spacing-sm); right: var(--spacing-sm); left: var(--spacing-sm); width: auto; max-height: 45%; }
    .graph-legend { display: none; }
}