/* ================================================================== *
 * path_finder.css — Name Path (Hop) Finder
 * ================================================================== */

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

.input-box .ac-wrap {
    min-width: 110px;
}

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

.arrow-sep {
    color:      var(--color-ink-3);
    font-size:  1rem;
    flex-shrink: 0;
    user-select: none;
}

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

/* ── Section header ──────────────────────────────────────────────── */
.hop-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   var(--text-sm);
    color:       var(--color-ink-3);
    margin-left: var(--space-sm);
}

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

.hop-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-md);
    padding:     10px var(--space-md);
    border-bottom: 1px solid var(--color-bg);
    font-size:   var(--text-base);
}

.hop-item:last-child { border-bottom: none; }

.hop-number {
    width:           26px;
    height:          26px;
    background:      var(--color-bg);
    border:          1.5px solid var(--color-border);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-xs);
    font-weight:     700;
    color:           var(--color-ink-2);
    flex-shrink:     0;
}

/* Start and end get accent colours */
.hop-item:first-child .hop-number {
    background:   #e8f5e9;
    border-color: #a5d6a7;
    color:        var(--color-success);
}

.hop-item:last-child .hop-number {
    background:   #fce4ec;
    border-color: #f48fb1;
    color:        var(--color-error);
}

.hop-name {
    flex:           1;
    font-weight:    600;
    text-transform: capitalize;
    color:          var(--color-ink);
}

.hop-label {
    font-size:      var(--text-xs);
    color:          var(--color-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Connector arrow between hops */
.hop-arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1px var(--space-md);
    color:           var(--color-border);
    font-size:       0.8rem;
    user-select:     none;
    border-bottom:   1px solid var(--color-bg);
}

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

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

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] .hop-item:first-child .hop-number {
    background:   #0a2016;
    border-color: #185030;
    color:        var(--color-success);
}

[data-theme="dark"] .hop-item:last-child .hop-number {
    background:   #280e1a;
    border-color: #5c1e30;
    color:        var(--color-error);
}