/* ================================================================== *
 * neighbours.css — Name Neighbour Finder
 * ================================================================== */

/* ── Input row ───────────────────────────────────────────────────── */
.input-box {
    display:     flex;
    align-items: center;
    gap:         var(--space-sm);
    margin-bottom: var(--space-sm);
}

.input-box .ac-wrap input[type="text"] {
    width: 100%;
}

/* ── Status lines ────────────────────────────────────────────────── */
#result {
    min-height:  1.3em;
    font-weight: 600;
    font-size:   var(--text-sm);
    color:       var(--color-ink-2);
    margin:      var(--space-xs) 0 var(--space-xs);
}

/* ── Neighbour list ──────────────────────────────────────────────── */
.name-list {
    list-style: none;
    padding:    0;
    margin:     0 0 var(--space-xl);
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:   hidden;
}

.name-list li {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-sm);
    padding:         9px var(--space-md);
    border-bottom:   1px solid var(--color-bg);
    font-size:       var(--text-base);
}

.name-list li:last-child { border-bottom: none; }

.nb-rank {
    color:     var(--color-ink-3);
    font-size: var(--text-xs);
    min-width: 18px;
    font-variant-numeric: tabular-nums;
}

.nb-name {
    flex:           1;
    font-weight:    600;
    text-transform: capitalize;
}

.nb-score {
    color:     var(--color-ink-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ── Generational bar chart ──────────────────────────────────────── */
.gen-list {
    list-style:     none;
    padding:        var(--space-md) var(--space-lg);
    margin:         0 0 var(--space-xl);
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-lg);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-sm);
}

.gen-bar-item {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    font-size:      var(--text-sm);
}

/* Name (left) + raw % (right) on the same line */
.gen-bar-header {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             var(--space-sm);
}

.gen-bar-label {
    color: var(--color-ink-2);
    /* no truncation — column constraint removed */
}

.gen-bar-pct {
    color:      var(--color-ink-3);
    font-size:  var(--text-xs);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Full-width bar beneath the label row */
.gen-bar-track {
    height:        10px;
    background:    var(--color-bg);
    border-radius: var(--radius);
    overflow:      hidden;
}

.gen-bar-fill {
    height:        100%;
    background:    var(--color-accent);
    border-radius: var(--radius);
    transition:    width 0.45s cubic-bezier(0.25, 1, 0.5, 1);
    min-width:     2px;
}

/* ── Opposite name block ─────────────────────────────────────────── */
.anti-name-block {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-left:   3px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding:       var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
}

.anti-name-label {
    font-size:   var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--color-error);
    margin-bottom: 6px;
}

.anti-name-body {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-sm);
    flex-wrap:   wrap;
}

.anti-name-text {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--color-ink);
}

.anti-name-score {
    font-size:   var(--text-sm);
    color:       var(--color-ink-3);
    font-variant-numeric: tabular-nums;
}

.anti-name-desc {
    font-size:   var(--text-xs);
    color:       var(--color-ink-3);
    margin:      6px 0 0;
}

/* ── Share button ────────────────────────────────────────────────── */
.share-btn {
    width:         100%;
    margin-bottom: var(--space-xl);
    justify-content: center;
}

/* ── Loading state ───────────────────────────────────────────────── */
#findButton:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .input-box {
        flex-wrap: wrap;
    }

    .input-box input[type="text"] {
        min-width: 100%;
    }
}