/* Sample strip on the identify screen.
 *
 * Tokens only — tokens.css is the single source of design tokens and page
 * stylesheets must never declare their own :root values (UI audit 2026-06-11).
 * The thumbnail treatment deliberately matches the identify alt-match cards
 * (2026-07-15) so the strip reads as part of the identify flow rather than a
 * bolted-on promo. */

.sample-strip {
    margin: 1rem 0 0;
}

.sample-strip-heading {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted, #666);
    text-align: center;
}

/* Horizontal scroll rather than wrap: four thumbnails must stay on one line
 * on a narrow phone, and the row scrolls inside itself so the page body never
 * scrolls sideways. */
.sample-strip-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
}

.sample-thumb {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 68px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary, #222);
}

.sample-thumb img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid var(--border-subtle, #e2e2e2);
    background: var(--surface-subtle, #f4f4f4);
    transition: border-color 0.15s ease;
}

.sample-thumb:hover img,
.sample-thumb:focus-visible img {
    border-color: var(--forest-600, #2d5a3d);
}

.sample-thumb-label {
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
    color: var(--text-muted, #666);
    /* Two lines then ellipsis: species common names are long and a ragged
     * strip of different heights looks broken. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Persistent banner on a sample result — the user must never be unclear that
 * this was our photo, not theirs. */
.sample-result-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--surface-subtle, #f4f4f4);
    border: 1px solid var(--border-subtle, #e2e2e2);
    font-size: 0.85rem;
    color: var(--text-muted, #666);
}

/* "Sample" chip on a journal/profile tile. */
.sample-chip {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--surface-subtle, #f4f4f4);
    border: 1px solid var(--border-subtle, #e2e2e2);
    font-size: 0.65rem;
    color: var(--text-muted, #666);
    vertical-align: middle;
}