/* finds.css — thumb pairs and the lighter-neighbours row (task-056).
   Consumed by what-we-eat/single and what-we-eat/list; tokens only
   (check:tokens scans this directory — no raw palette hex, ever). */

/* --- The find card (layouts/partials/find-card.html, tasks 056/062) ---
   Shared by the finds-shelf partial (what-we-eat pages) and the /finds
   front door; the shelf's in-card background variants stay in the
   partial's own style block. */
.finds-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.find-card { display: flex; gap: var(--space-3); background: var(--ui-paper); border: 1px solid var(--ui-border); padding: var(--space-3); clip-path: var(--chamfer-container-sm); }
.find-thumb { flex-shrink: 0; width: 56px; }
.find-thumb-img { width: 56px; height: 56px; object-fit: cover; clip-path: var(--chamfer-container-sm); }
.find-thumb-ph { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--ui-bg); border: 1px solid var(--ui-border); clip-path: var(--chamfer-container-sm); }
.find-thumb-letter { font-size: 1.4rem; color: var(--color-ink-faded); font-weight: 600; }
.find-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.find-title { font-weight: 600; color: var(--ui-logo); text-decoration: none; overflow-wrap: anywhere; }
.find-title:hover { text-decoration: underline; }
.find-author { font-size: 0.8125rem; }
.find-line { font-size: 0.875rem; color: var(--ui-text); margin: 0; line-height: 1.4; }
.find-credit { margin-top: var(--space-1); }
.find-thumbs { display: flex; align-items: center; gap: var(--space-2); min-height: 0; }

/* --- The thumb pair (static/js/thumbs.js renders into [data-thumbs]) --- */
.thumb-btn {
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: 1rem;
    line-height: 1;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    cursor: pointer;
    clip-path: var(--chamfer-affordance-sm);
}
.thumb-btn:hover { border-color: var(--ui-logo); }
.thumb-btn.is-on {
    background: var(--color-brand-pine);
    border-color: var(--color-brand-pine);
    color: var(--ui-on-brand);
}
.thumb-pair, [data-thumbs] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.thumb-note { font-size: 0.8125rem; color: var(--color-ink-faded); line-height: 1.4; }
.thumb-note a { color: var(--ui-logo); font-weight: 600; }

/* --- Lighter neighbours (static/js/swaps.js renders into the mount) --- */
.swap-card { display: flex; flex-direction: column; gap: var(--space-3); }
.swap-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.swap-head .card-label { margin: 0; }
.swap-quiet-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-ink-faded);
    text-decoration: underline;
    cursor: pointer;
    clip-path: none;
    font-weight: 400;
}
.swap-quiet-btn:hover { color: var(--ui-text); }
.swap-head .swap-quiet-btn:last-child { margin-left: auto; }
.swap-chips { align-items: stretch; }
.swap-chip {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: relative;
    padding-right: var(--space-5);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-3);
    clip-path: var(--chamfer-container-sm);
}
.swap-chip .chip { border: none; background: none; padding: 0; color: var(--ui-logo); }
.swap-why { color: var(--color-ink-faded); }
.swap-dismiss {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    background: none;
    border: none;
    padding: 0 var(--space-1);
    margin: 0;
    color: var(--color-ink-faded);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    clip-path: none;
}
.swap-dismiss:hover { color: var(--color-action-terracotta); }
.swap-why-panel { margin: 0; max-width: 640px; }