/* Vocabulary pages: deck filters, word badges, phrasal-verb index (docs/VOCAB-EXPANSION.md). RTL page, LTR English chunks. */
.vfilter { display: grid; gap: 8px; margin-block-end: 18px; }
.vf-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-overflow-scrolling: touch; }
.vf-row::-webkit-scrollbar { display: none; }
.vf-k { flex: none; font-size: var(--fs-xs); color: var(--ink-3, var(--ink-2)); min-inline-size: 3.2em; }
.vchip { flex: none; display: inline-flex; align-items: center; min-block-size: 36px; padding: 2px 13px; border-radius: 999px; font-size: var(--fs-sm);
  text-decoration: none; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--hair); white-space: nowrap; }
.vchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lvl-chip { direction: ltr; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .vchip:not(.on):hover { color: var(--ink); border-color: var(--ink-3, var(--ink-2)); } }
@media (pointer: coarse) { .vchip { min-block-size: 40px; } }
.vf-foot { margin: 0; }
.vf-search { display: flex; gap: 8px; align-items: center; }
.vf-search input[type=search] { flex: 1; min-inline-size: 0; min-block-size: 40px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font-size: 16px; }
.dg-situations { --h: #0f6d8a; } .dg-ielts { --h: #6b3fa0; } .dg-advanced { --h: #2f4f9f; } .dg-idioms { --h: #a1471d; }

.wmeta { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.rtag { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; font-size: var(--fs-xs); line-height: 1.9; border: 1px solid var(--hair); color: var(--ink-2); background: var(--paper-2); }
.r-informal { color: #9a3b12; border-color: color-mix(in srgb, #9a3b12 35%, var(--hair)); background: color-mix(in srgb, #9a3b12 8%, transparent); }
.r-formal, .r-academic { color: #2f4f9f; border-color: color-mix(in srgb, #2f4f9f 35%, var(--hair)); background: color-mix(in srgb, #2f4f9f 8%, transparent); }
.u-speaking, .u-writing, .u-both { direction: ltr; }
.g-sep, .g-insep, .g-int { color: #07756d; border-color: color-mix(in srgb, #07756d 35%, var(--hair)); background: color-mix(in srgb, #07756d 8%, transparent); }
.wsense { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; }
.wformal { margin: 0; }
.deck-intro { margin-block: 10px 4px; font-size: var(--fs-sm); line-height: 1.9; }
.wc-other { font-size: var(--fs-sm); }
.wc-other summary { cursor: pointer; color: var(--ink-2); min-block-size: 32px; display: flex; align-items: center; }
.wc-other ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.wc-other li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

.pvindex, .pv-senses { list-style: none; margin: 0; padding: 0; }
.pvindex { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.pvrow { padding: 10px 12px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--hair); display: grid; gap: 6px; align-content: start; }
.pv-verb { font-size: var(--fs-lg); }
.pv-senses { display: grid; gap: 4px; }
.pv-sense { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 4px 0; min-block-size: 36px; text-decoration: none; color: inherit; }
.pv-fa { font-weight: 600; color: var(--teal); }
@media (max-width: 480px) { .vf-k { display: none; } }