/* ── What Moments learned (static/inv-taste.js) ──────────────────────
   The panel on /moments (a dark surface) and the Moments section of
   /settings (the page's theme) share these: the tokens take the right
   values in both. */

.taste-label { margin: 0.9rem 0 0.2rem; font-weight: 600; }
.taste-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.4rem; }
.taste-toggle {
  min-height: 2.75rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.taste-toggle:hover { background: var(--tint); }
.taste-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.taste-visit { margin: 0.9rem 0 0.4rem; }
.taste-more > summary, .taste-kind > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 600;
}

.taste-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.9rem; font-size: var(--step--1); }
.taste-table caption { text-align: start; font-weight: 600; padding-bottom: 0.3rem; }
.taste-table th, .taste-table td { padding: 0.3rem 0.5rem 0.3rem 0; text-align: start; border-bottom: 1px solid var(--border); }
.taste-table td { font-variant-numeric: tabular-nums; }
.taste-table thead th { color: var(--text-muted); font-weight: 500; }

.taste-tags { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; display: grid; gap: 0.5rem; }
.taste-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.taste-tag-name { font-weight: 600; }
.taste-tag-counts { flex: 1 1 12rem; color: var(--text-muted); font-size: var(--step--1); }

.taste-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.taste-foot a { color: var(--accent-text); }
.taste-settings { margin: 0.5rem 0 1rem; }