/* Eqlat app styles — uses --ctp-* variables from dolfin-suite.css */

.eq-main {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    color: var(--ctp-text);
}

.eq-main h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--ctp-text);
}

.eq-token-gate {
    margin-top: 2rem;
}

.eq-connect-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 480px;
    background: var(--ctp-surface0);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--ctp-surface1);
}

.eq-connect-form label {
    font-weight: 600;
    color: var(--ctp-text);
}

.eq-token-row {
    display: flex;
    gap: 0.5rem;
}

.eq-token-row input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--ctp-surface2);
    background: var(--ctp-base);
    color: var(--ctp-text);
    font-size: 0.95rem;
}

.eq-connected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

/* .btn-secondary moved to the shared dolfin-suite.css */

/* .card / .card-grid moved to the shared dolfin-suite.css */

#sparnatural-container {
    margin-top: 1.5rem;
    border: 1px solid var(--ctp-surface1);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ctp-base);
}

#yasqe-container {
    margin-top: 0.75rem;
    border: 1px solid var(--ctp-surface1);
    border-radius: 8px;
    overflow: hidden;
    height: 220px;
}

#results-container {
    margin-top: 1rem;
}

/* ── Sparnatural Catppuccin theming ──────────────────────────────────────── */

.Sparnatural {
    --primary-color-main:        var(--ctp-blue);
    --primary-color-important:   var(--ctp-sapphire);
    --primary-color-medium:      var(--ctp-surface2);
    --primary-color-light:       var(--ctp-surface0);
    --secondary-color-main:      var(--ctp-green);
    --secondary-color-important: var(--ctp-teal);
    --secondary-color-light:     var(--ctp-surface1);
    --ternary-color-main:        var(--ctp-teal);
    --ternary-color-light:       var(--ctp-surface0);
    --silver-color-main:         var(--ctp-overlay1);
    --silver-color-light:        var(--ctp-surface1);
    --default-text-color:        var(--ctp-subtext1);
    /* Latte: ctp-green = #40a02b → rgb(64,160,43) */
    --bg-red:   64;
    --bg-green: 160;
    --bg-blue:  43;

    background-color: var(--ctp-base);
    color: var(--ctp-text);
}

/* Dark: Macchiato ctp-green = #a6da95 → rgb(166,218,149) */
[data-theme="dark"] .Sparnatural {
    --bg-red:   166;
    --bg-green: 218;
    --bg-blue:  149;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .Sparnatural {
        --bg-red:   166;
        --bg-green: 218;
        --bg-blue:  149;
    }
}

/* ── Class-selector dropdown overflow fix ──────────────────────────────────
   Sparnatural's list widget sets inline JS heights: a fixed height on the
   popup container (.root-display) and an explicit `height` on the active
   <ul>. With many concepts the container clips the list, pushing the <ul>'s
   own scrollbar below the visible edge — the last rows become unreachable.
   Let the popup grow to its content and cap the scrollable list so its
   scrollbar stays inside the popup. !important beats the inline styles. */
.Sparnatural .htmlSelectUiUxLists.root-display {
    height: 170px !important;
}
.Sparnatural .htmlSelectUiUxLists ul {
    height: auto !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}