/* ================================================================== *
 * tsne_map.css — t-SNE Name Map Explorer
 * (uses page-wrap--wide to exceed the 680px default column width)
 * ================================================================== */

/* ── Main layout ─────────────────────────────────────────────────── */
.map-layout {
    display:     flex;
    gap:         var(--space-xl);
    align-items: flex-start;
}

/* ── Left controls panel ─────────────────────────────────────────── */
.controls-panel {
    width:        260px;
    flex-shrink:  0;
    display:      flex;
    flex-direction: column;
    gap:          var(--space-xs);
}

.top-controls {
    padding-bottom: var(--space-md);
    border-bottom:  1px solid var(--color-border);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
}

#selectAllBtn {
    width: 100%;
}

.ctrl-label {
    display:     block;
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-ink-2);
}

.ctrl-label input[type="checkbox"] {
    margin-right: var(--space-xs);
    accent-color: var(--color-accent);
}

.search-status {
    font-size:  var(--text-xs);
    min-height: 1.2em;
    margin:     0;
    color:      var(--color-error);
}

#searchResults {
    list-style: none;
    padding:    0;
    margin:     0;
    font-size:  var(--text-sm);
    color:      var(--color-ink-2);
}

/* Cluster section */
#controls {
    max-height: 520px;
    overflow-y: auto;
    padding-top: var(--space-sm);
}

.ctrl-section-label {
    font-size:      var(--text-xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--color-ink-3);
    margin:         0 0 var(--space-sm);
}

/* Cluster accordion */
details {
    margin-bottom: 3px;
}

details summary {
    cursor:      pointer;
    font-size:   var(--text-sm);
    padding:     3px 0;
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         var(--space-xs);
    user-select: none;
    color:       var(--color-ink-2);
}

details summary:hover { color: var(--color-ink); }

details summary::-webkit-details-marker { display: none; }

details > div label {
    display:   block;
    font-size: var(--text-xs);
    color:     var(--color-ink-2);
    padding:   2px 0;
}

details > div label input[type="checkbox"] {
    accent-color: var(--color-accent);
    margin-right: 4px;
}

/* ── Canvas wrapper + tooltip ────────────────────────────────────── */
.canvas-wrap {
    position: relative;
    flex:     1;
}

#tsneCanvas {
    display:       block;
    width:         100%;
    height:        auto;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:    var(--color-surface);
    cursor:        grab;
}

#tsneCanvas.is-dragging {
    cursor: grabbing;
}

.map-reset-btn {
    position:   absolute;
    top:        10px;
    right:      10px;
    font-size:  var(--text-xs);
    padding:    5px 10px;
    opacity:    0.85;
    z-index:    5;
}

.map-reset-btn:hover { opacity: 1; }

.map-tooltip {
    position:        absolute;
    pointer-events:  none;
    background:      rgba(22, 22, 26, 0.88);
    color:           #ffffff;
    font-size:       var(--text-xs);
    font-family:     var(--font-body);
    padding:         5px 10px;
    border-radius:   var(--radius);
    white-space:     nowrap;
    transform:       translate(14px, -50%);
    z-index:         10;
    line-height:     1.5;
    box-shadow:      0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ── Mobile fallback ─────────────────────────────────────────────── */
@media (max-width: 860px) {
    .map-layout {
        flex-direction: column;
    }

    .controls-panel {
        width: 100%;
    }

    #controls {
        max-height: 220px;
    }
}

/* ── Dark mode ───────────────────────────────────────────────────── */
/* Canvas bg is set by the CSS background property (clearRect reveals it) */
[data-theme="dark"] #tsneCanvas {
    background:   var(--color-surface);
    border-color: var(--color-border);
}