/* ============================================================
   EU Trade Explorer — standalone Eurostat cross-check page
   Companion to screen.css (which provides the shell, buttons,
   notes, spinner and .data-table). Only what screen.css does NOT
   cover lives here: un-scoped form controls (screen.css styles
   selects/inputs only inside .sidebar), the product typeahead
   dropdown, and the verdict cells.
   ============================================================ */

/* Wider than the standard 46rem prose <article>: the month × (2 flows × 3
   sources) tables would otherwise force horizontal scrolling. Scoped to
   this page so the other prose pages' layout is untouched. */
article.eucheck {
    max-width: 64rem;
}

/* ── Picker form ─────────────────────────────────────────── */

.eucheck-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-end;
    margin: var(--space-4) 0 var(--space-5);
}

.eucheck-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 10rem;
}

.eucheck-field-product {
    position: relative; /* anchors the typeahead dropdown */
    flex: 1 1 100%;
}

.eucheck-field label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text-muted);
}

/* Mirrors .sidebar select / .sidebar input[type="text"] from screen.css —
   deliberately scoped to this page rather than widening those selectors. */
.eucheck select,
.eucheck input[type="text"] {
    font: inherit;
    font-size: var(--text-base);
    color: var(--clr-text);
    padding: var(--space-2) var(--space-3);
    border: var(--micro-1) solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-surface);
    width: 100%;
}

.eucheck select {
    cursor: pointer;
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235c6b88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    background-size: var(--space-3);
}

/* ── Product typeahead ───────────────────────────────────── */

.eucheck-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: var(--micro-2);
    background: var(--clr-surface);
    border: var(--micro-1) solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    max-height: 18rem;
    overflow: auto;
}

.eucheck-result {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--clr-text);
    text-align: left;
    cursor: pointer;
}

.eucheck-result:hover,
.eucheck-result:focus-visible {
    background: var(--clr-accent-light);
}

.eucheck-result-code {
    font-weight: 700;
    color: var(--clr-accent);
    white-space: nowrap;
}

.eucheck-product-label {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

/* ── Status line ─────────────────────────────────────────── */

.eucheck-status {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin: 0 0 var(--space-4);
}

.eucheck-status-error {
    color: var(--clr-error);
    background: var(--clr-error-bg);
    border: var(--micro-1) solid var(--clr-error-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}

/* ── Result tables ───────────────────────────────────────── */

.eucheck-heading {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--clr-text);
    margin: var(--space-4) 0 var(--space-2);
}

.eucheck-verdict-line {
    font-size: var(--text-base);
    margin: 0 0 var(--space-3);
}

.eucheck-table-wrap {
    max-height: none; /* small tables: no inner scroll frame */
    margin-bottom: var(--space-4);
}

.eucheck-subhead {
    font-weight: 400;
    font-size: var(--text-sm);
}

.eucheck-match {
    color: var(--clr-success);
    font-weight: 700;
}

.eucheck-diff {
    color: var(--clr-error);
    font-weight: 700;
    background: var(--clr-error-bg);
}

.eucheck-filtered {
    color: var(--clr-highlight);
    font-weight: 600;
}

.eucheck-notes {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
}

/* ── Narrow screens ──────────────────────────────────────── */

@media (max-width: 40rem) {
    .eucheck-field {
        flex: 1 1 100%;
    }

    .eucheck-field-submit .btn {
        width: 100%;
    }
}