/* ANVA exercise library — filter bar + grid. Uses brand tokens from the theme (--anva-*). */

.anva-lib {
  --lib-blue:#3D5CAA; --lib-purple:#A93F94; --lib-grey:#D8E0E3; --lib-dark:#2D3748;
  --lib-head:#EDF1F3; /* light grey card header */
  /* Difficulty scale — light (easiest) → dark (hardest), single indigo family. */
  --diff-beginner:#DCE0EF; --diff-moderate:#A6ACD7; --diff-advanced:#3D5CAA;
  margin-block: 1.5rem;
}

/* ── Filters ── (label on its own row, pills below) */
.anva-lib__filters { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.anva-lib__group { display: grid; gap: .4rem; }
.anva-lib__glabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--lib-purple); }
.anva-lib__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.anva-lib__chip {
  border: 1px solid var(--lib-grey); background: #fff; color: var(--lib-dark);
  border-radius: 999px; padding: .3rem .7rem; font-size: .82rem; font-weight: 500;
  cursor: pointer; line-height: 1; transition: background .12s, border-color .12s, color .12s;
}
.anva-lib__chip:hover { border-color: var(--lib-blue); }
.anva-lib__chip.is-on { background: var(--lib-blue); border-color: var(--lib-blue); color: #fff; }
.anva-lib__count { opacity: .55; font-size: .75em; }
.anva-lib__chip.is-on .anva-lib__count { opacity: .8; }

/* Difficulty chips double as the color legend: a tier swatch always shows, and the
   selected state fills with the tier color (light → dark = easier → harder). */
.anva-lib__chip[data-tax="difficulty"]::before {
  content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  margin-right: .4rem; vertical-align: -1px; border: 1px solid rgba(45,55,72,.15);
}
.anva-lib__chip[data-tax="difficulty"][data-slug="beginner"]::before { background: var(--diff-beginner); }
.anva-lib__chip[data-tax="difficulty"][data-slug="moderate"]::before { background: var(--diff-moderate); }
.anva-lib__chip[data-tax="difficulty"][data-slug="advanced"]::before { background: var(--diff-advanced); }
.anva-lib__chip[data-tax="difficulty"][data-slug="beginner"].is-on { background: var(--diff-beginner); border-color: var(--diff-beginner); color: var(--lib-dark); }
.anva-lib__chip[data-tax="difficulty"][data-slug="moderate"].is-on { background: var(--diff-moderate); border-color: var(--diff-moderate); color: var(--lib-dark); }
.anva-lib__chip[data-tax="difficulty"][data-slug="advanced"].is-on { background: var(--diff-advanced); border-color: var(--diff-advanced); color: #fff; }
.anva-lib__chip[data-tax="difficulty"].is-on::before { border-color: rgba(255,255,255,.6); }

/* ── Toolbar ── */
.anva-lib__toolbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.anva-lib__search { flex: 1 1 220px; min-width: 180px; border: 2px solid #AEB9C0; border-radius: 999px; padding: .55rem 1rem; font: inherit; }
.anva-lib__search:focus { outline: none; border-color: var(--lib-blue); box-shadow: 0 0 0 2px rgba(61,92,170,.25); }
.anva-lib__resultcount { font-size: .85rem; color: var(--lib-dark); opacity: .7; }
.anva-lib__clear { border: 1px solid var(--lib-blue); background: none; color: var(--lib-blue); font-weight: 600; cursor: pointer; padding: .4rem .9rem; border-radius: 999px; transition: background .12s, color .12s; }
.anva-lib__clear:hover { background: var(--lib-blue); color: #fff; }

/* ── Grid ── (3 columns on desktop → 2 on tablet → 1 on phone) */
.anva-lib__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .anva-lib__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .anva-lib__grid { grid-template-columns: 1fr; } }
.anva-lib__empty { text-align: center; padding: 2rem; color: var(--lib-dark); opacity: .7; }

/* ── Card ── */
.anva-xcard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(45,55,72,.07), 0 1px 2px rgba(45,55,72,.08); transition: transform .12s, box-shadow .12s; }
.anva-xcard[hidden] { display: none; }
.anva-xcard:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(45,55,72,.16); }
.anva-xcard__link { display: block; color: inherit; text-decoration: none; height: 100%; }
/* Header: light grey band; mode label carries the color (purple = Flow, blue = Multi).
   Inverting from colored-band/white-text makes the difficulty pill far easier to read. */
.anva-xcard__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .85rem; color: var(--lib-dark); background: var(--lib-head); border-bottom: 1px solid rgba(45,55,72,.07); }
.anva-xcard__mode { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lib-dark); }
.anva-xcard.is-flow  .anva-xcard__mode { color: var(--lib-purple); }
.anva-xcard.is-multi .anva-xcard__mode { color: var(--lib-blue); }
/* Difficulty pill — solid tier color (light→dark = easier→harder); thin border gives it
   definition against the light header. */
.anva-xcard__diff {
  font-size: .7rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--lib-dark); border: 1px solid rgba(45,55,72,.14);
}
.anva-xcard__diff.is-diff-beginner { background: var(--diff-beginner); color: var(--lib-dark); }
.anva-xcard__diff.is-diff-moderate { background: var(--diff-moderate); color: var(--lib-dark); }
.anva-xcard__diff.is-diff-advanced { background: var(--diff-advanced); color: #fff; border-color: var(--diff-advanced); }
.anva-xcard__body { padding: .85rem; display: flex; flex-direction: column; gap: .5rem; }
.anva-xcard__title { margin: 0; font-size: 1.02rem; line-height: 1.25; color: var(--lib-blue); }
.anva-xcard__focus { margin: 0; font-size: .85rem; color: var(--lib-dark); opacity: .85; }
.anva-xcard__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.anva-xtag { font-size: .72rem; background: var(--lib-grey); color: var(--lib-dark); border-radius: 999px; padding: .15rem .55rem; }
.anva-xcard__foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .76rem; color: var(--lib-dark); opacity: .7; margin-top: .15rem; }
.anva-xcard__foot:empty { display: none; }
.anva-xcard__dur { margin-left: auto; } /* keep duration right-aligned even when equipment is hidden */