/* css/vocab-wiki.css — Vocabulary Wiki re-skin (word-card design v2).
 *
 * Shared by the wiki landing (root vocabulary.html) + the per-word article
 * (pages/vocab-article.html). Both now sit under <aver-chrome>, so this file is
 * THEME-AWARE: every colour resolves from --av-* tokens (light + dark), NOT the
 * mockup's raw vars. Jade accent = --av-vocab-jade* (tokens.css); examiner teal =
 * --av-primary; warn callout = --av-warning*. All rules are `.va-*`-scoped so they
 * can't restyle the chrome.
 *
 * Design ref: backend/docs/design/vocab-wordcard-design-v2.html.
 * Fonts (Fraunces / Hanken Grotesk / DM Mono) are linked per-page (additive).
 */

/* Width audit 2026-06-29: single-column vocab article → canonical read width. */
.va-wrap { max-width: var(--av-width-read); margin: 0 auto; padding: var(--av-space-8) var(--av-space-6) var(--av-space-24); }

/* ── Masthead / section labels ─────────────────────────────────────── */
.va-eyebrow {
  font-family: var(--av-font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--av-primary); font-weight: 500;
}
.va-masthead { margin-bottom: var(--av-space-6); }
.va-masthead h1 {
  font-family: var(--av-font-display); font-weight: 500;
  font-size: clamp(26px, 4vw, 34px); margin: var(--av-space-2) 0 0; letter-spacing: -.01em;
  color: var(--av-text-primary);
}
.va-masthead p { color: var(--av-text-muted); font-size: 14px; margin: var(--av-space-2) 0 0; max-width: 62ch; }

.va-section-label {
  font-family: var(--av-font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--av-text-muted);
  margin: var(--av-space-12) 0 var(--av-space-4); display: flex; align-items: center; gap: var(--av-space-3);
}
.va-section-label::after { content: ""; flex: 1; height: 1px; background: var(--av-border-subtle); }

/* ── Search (landing) ──────────────────────────────────────────────── */
.va-search-wrap { position: relative; max-width: 460px; }
.va-search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--av-text-muted); }
.va-search {
  width: 100%; box-sizing: border-box;
  font-family: var(--av-font-sans); font-size: 15px;
  padding: 13px 18px 13px 46px; border-radius: var(--av-radius-pill);
  border: 1px solid var(--av-border-default); background: var(--av-surface-card);
  color: var(--av-text-primary); outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.va-search::placeholder { color: var(--av-text-muted); }
.va-search:focus { border-color: var(--av-vocab-jade); box-shadow: 0 0 0 3px var(--av-vocab-jade-tint); }

/* ── Card shell ────────────────────────────────────────────────────── */
.va-card {
  background: var(--av-surface-card); border: 1px solid var(--av-border-subtle);
  border-radius: var(--av-radius-xl); box-shadow: var(--av-shadow-md); overflow: hidden;
}
.va-detail { max-width: 580px; }
.va-pad { padding: var(--av-space-8); }
.va-rule { height: 1px; background: var(--av-border-subtle); margin: 0 var(--av-space-8); }

.va-eyebrow-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--av-space-6); }
.va-pill {
  font-family: var(--av-font-mono); font-size: 12px; font-weight: 500;
  color: var(--av-text-secondary); border: 1px solid var(--av-border-subtle);
  border-radius: var(--av-radius-pill); padding: 3px 11px; background: var(--av-surface-sunken);
}

.va-head { display: flex; align-items: center; gap: var(--av-space-4); }
.va-headword {
  font-family: var(--av-font-display); font-weight: 500;
  font-size: clamp(40px, 7vw, 56px); line-height: 1; letter-spacing: -.02em; margin: 0;
  color: var(--av-text-primary);
}
.va-pos { font-family: var(--av-font-mono); font-size: 13px; color: var(--av-text-muted); }

/* ▶ play — solid jade circle */
.va-play {
  appearance: none; border: none; cursor: pointer; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--av-vocab-jade); color: var(--av-vocab-jade-ink);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px var(--av-vocab-jade); transition: transform .18s, background .18s;
}
.va-play:hover { background: var(--av-primary); transform: translateY(-1px); }
.va-play svg { width: 18px; height: 18px; margin-left: 2px; }
.va-play.is-playing { animation: va-pulse 1s ease-in-out infinite; }
.va-play.va-small { width: 30px; height: 30px; box-shadow: none; }
.va-play.va-small svg { width: 12px; height: 12px; }
.va-play.va-ghost { background: var(--av-vocab-jade-tint); color: var(--av-vocab-jade); }
.va-play.va-ghost:hover { background: var(--av-vocab-jade-line); color: var(--av-text-primary); }
@keyframes va-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--av-vocab-jade-line); } 50% { box-shadow: 0 0 0 8px transparent; } }

.va-ipa { font-family: var(--av-font-mono); font-size: 16px; color: var(--av-text-secondary); margin: var(--av-space-4) 0 0; }
.va-ipa .va-st { color: var(--av-vocab-jade); font-weight: 600; }   /* idiom: emphasised post-ˈ syllable */

/* signature: stress specimen (IPA syllables; stressed one enlarged + teal) */
.va-stress { display: flex; align-items: baseline; gap: 2px; margin-top: var(--av-space-3); flex-wrap: wrap; }
.va-syl { font-family: var(--av-font-display); font-size: 20px; color: var(--av-text-muted); }
.va-syl + .va-syl::before { content: "·"; color: var(--av-border-strong); margin: 0 7px; }
.va-syl.on { font-size: 28px; color: var(--av-primary); font-weight: 600; }
.va-stress-tag {
  font-family: var(--av-font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--av-text-muted); margin-left: var(--av-space-3); align-self: center;
}

.va-def-en { font-size: 18px; color: var(--av-text-primary); margin: 0; line-height: 1.5; }
.va-def-vi { font-size: 15px; color: var(--av-text-secondary); margin: var(--av-space-2) 0 0; }

.va-use-head { display: flex; align-items: center; gap: var(--av-space-3); margin-bottom: var(--av-space-3); }
.va-use-head .va-eyebrow { color: var(--av-text-muted); }
.va-example {
  font-family: var(--av-font-display); font-style: italic; font-size: 19px; line-height: 1.55;
  color: var(--av-text-primary); margin: 0;
}
.va-example .va-w { font-style: normal; font-weight: 600; color: var(--av-primary); }
.va-colloc { display: flex; flex-wrap: wrap; gap: var(--av-space-2); margin-top: var(--av-space-4); }
.va-chip {
  font-size: 13.5px; color: var(--av-vocab-jade); background: var(--av-vocab-jade-tint);
  border: 1px solid var(--av-vocab-jade-line); border-radius: var(--av-radius-pill);
  padding: 5px 12px; white-space: nowrap;
}

/* word network */
.va-net { display: grid; grid-template-columns: auto 1fr; gap: 7px var(--av-space-4); align-items: baseline; margin: 0; }
.va-net dt { font-family: var(--av-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--av-text-muted); }
.va-net dd { margin: 0; font-size: 15px; color: var(--av-text-secondary); }
.va-net dd b { color: var(--av-text-primary); font-weight: 600; }
.va-sep { color: var(--av-border-strong); margin: 0 7px; }

/* callouts */
.va-callout { display: flex; gap: var(--av-space-3); padding: 14px 16px; border-radius: var(--av-radius-lg); font-size: 14px; line-height: 1.5; }
.va-callout .va-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.va-callout .va-t { font-family: var(--av-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.va-callout b { color: var(--av-text-primary); }
.va-callout em { font-style: italic; }
.va-callout.va-warn { background: var(--av-warning-soft); border: 1px solid var(--av-warning); color: var(--av-text-secondary); }
.va-callout.va-warn .va-t, .va-callout.va-warn .va-ico { color: var(--av-warning); }
.va-callout.va-hook { background: var(--av-vocab-jade-tint); border: 1px solid var(--av-vocab-jade-line); color: var(--av-text-secondary); margin-top: var(--av-space-3); }
.va-callout.va-hook .va-t, .va-callout.va-hook .va-ico { color: var(--av-vocab-jade); }

/* foot */
.va-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--av-space-4); flex-wrap: wrap; background: var(--av-surface-sunken); }
.va-trace { font-family: var(--av-font-mono); font-size: 11.5px; color: var(--av-text-muted); }
.va-trace b { color: var(--av-text-secondary); font-weight: 500; }
.va-add {
  appearance: none; cursor: pointer; font-family: var(--av-font-sans);
  font-weight: 600; font-size: 13.5px; color: var(--av-vocab-jade-ink); background: var(--av-vocab-jade);
  border: none; border-radius: var(--av-radius-pill); padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 7px; transition: background .18s;
}
.va-add:hover { background: var(--av-primary); }
.va-add svg { width: 14px; height: 14px; }

/* ── Mini cards (category browse + search results) ─────────────────── */
.va-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--av-space-4); }
.va-mini {
  background: var(--av-surface-card); border: 1px solid var(--av-border-subtle);
  border-radius: var(--av-radius-lg); padding: var(--av-space-4); box-shadow: var(--av-shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--av-space-2); text-decoration: none;
}
.va-mini:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-lg); border-color: var(--av-vocab-jade-line); }
.va-mini-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--av-space-2); }
.va-mini-word { font-family: var(--av-font-display); font-weight: 500; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; margin: 0; color: var(--av-text-primary); }
.va-mini-pos { font-family: var(--av-font-mono); font-size: 11px; color: var(--av-text-muted); margin-top: 3px; }
.va-mini-ipa { font-family: var(--av-font-mono); font-size: 13px; color: var(--av-text-secondary); }
.va-mini-vi { font-size: 14px; color: var(--av-text-secondary); margin: 0; }
.va-mini-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding-top: var(--av-space-3); border-top: 1px solid var(--av-border-subtle); }
.va-mini-lvl { font-family: var(--av-font-mono); font-size: 11px; color: var(--av-text-muted); letter-spacing: .05em; }
.va-mini-lvl.j { color: var(--av-vocab-jade); }

/* ── Category cards (landing 6-topic grid) ─────────────────────────── */
.va-cat-card {
  display: flex; flex-direction: column; gap: var(--av-space-2);
  background: var(--av-surface-card); border: 1px solid var(--av-border-subtle);
  border-radius: var(--av-radius-lg); padding: var(--av-space-6); box-shadow: var(--av-shadow-sm);
  cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.va-cat-card:hover { transform: translateY(-2px); box-shadow: var(--av-shadow-lg); border-color: var(--av-vocab-jade-line); }
.va-cat-top { display: flex; align-items: flex-start; justify-content: space-between; }
.va-cat-icon { font-size: 26px; line-height: 1; }
.va-cat-count {
  font-family: var(--av-font-mono); font-size: 11px; color: var(--av-vocab-jade);
  background: var(--av-vocab-jade-tint); border: 1px solid var(--av-vocab-jade-line);
  border-radius: var(--av-radius-pill); padding: 2px 9px;
}
.va-cat-title { font-family: var(--av-font-display); font-weight: 600; font-size: 19px; color: var(--av-text-primary); margin: var(--av-space-2) 0 0; }
.va-cat-desc { font-size: 13px; color: var(--av-text-muted); margin: 0; }
.va-cat-words { font-size: 12px; color: var(--av-text-faint); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── States ────────────────────────────────────────────────────────── */
.va-empty { text-align: center; padding: var(--av-space-12); color: var(--av-text-muted); font-family: var(--av-font-sans); }
.va-count { font-family: var(--av-font-mono); font-size: 13px; color: var(--av-text-muted); margin: 0 0 var(--av-space-4); }
.va-cluster-note { font-size: 13px; color: var(--av-text-muted); margin: calc(-1 * var(--av-space-2)) 0 var(--av-space-6); max-width: 64ch; }

@media (prefers-reduced-motion: no-preference) {
  .va-reveal { opacity: 0; transform: translateY(12px); animation: va-rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
  .va-mini, .va-cat-card { opacity: 0; transform: translateY(12px); animation: va-rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes va-rise { to { opacity: 1; transform: none; } }
}
.va-play:focus-visible, .va-add:focus-visible, .va-mini:focus-visible, .va-cat-card:focus-visible {
  outline: 2.5px solid var(--av-vocab-jade); outline-offset: 3px; border-radius: var(--av-radius-md);
}

@media (max-width: 560px) {
  .va-pad { padding: var(--av-space-6); }
  .va-rule { margin: 0 var(--av-space-6); }
  .va-foot { flex-direction: column; align-items: stretch; }
  .va-add { justify-content: center; }
}

/* ── Master-detail browse (/vocabulary.html) ───────────────────────────────── */
.vmd-shell {
  display: grid; grid-template-columns: 330px 1fr; gap: var(--av-space-6);
  align-items: start; max-width: 1100px; margin: 0 auto;
  padding: var(--av-space-6) var(--av-space-4) var(--av-space-16);
}
.vmd-list {
  position: sticky; top: var(--av-space-4); align-self: start;
  max-height: calc(100vh - var(--av-space-8)); display: flex; flex-direction: column;
  background: var(--av-surface-card); border: 1px solid var(--av-border-subtle);
  border-radius: var(--av-radius-lg); box-shadow: var(--av-shadow-sm); overflow: hidden;
}
.vmd-list-head { padding: var(--av-space-4); border-bottom: 1px solid var(--av-border-subtle); }
.vmd-hub-back { display: inline-block; margin-bottom: var(--av-space-2); font-size: 13px;
  font-family: var(--av-font-sans); color: var(--av-vocab-jade); text-decoration: none; }
.vmd-hub-back:hover { text-decoration: underline; }
.vmd-title { font-family: var(--av-font-display); font-weight: 500; font-size: 20px;
  letter-spacing: -.01em; color: var(--av-text-primary); margin: var(--av-space-1) 0 2px; }
.vmd-count { font-family: var(--av-font-mono); font-size: 12px; color: var(--av-text-muted); }
.vmd-search { position: relative; margin-top: var(--av-space-3); }
.vmd-search input {
  width: 100%; box-sizing: border-box; font-family: var(--av-font-sans);
  font-size: 14px; color: var(--av-text-primary); background: var(--av-surface-sunken);
  border: 1px solid var(--av-border-default); border-radius: var(--av-radius-md);
  padding: 9px 12px 9px 34px; outline: none; transition: border-color .15s;
}
.vmd-search input:focus { border-color: var(--av-vocab-jade); }
.vmd-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--av-text-muted); }
.vmd-chips { display: flex; gap: 6px; overflow-x: auto; margin-top: var(--av-space-3); padding-bottom: 2px; }
.vmd-chips::-webkit-scrollbar { height: 5px; }
.vmd-chips::-webkit-scrollbar-thumb { background: var(--av-border-default); border-radius: var(--av-radius-pill); }
.vmd-chip {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  font-family: var(--av-font-sans); font-size: 12.5px;
  padding: 5px 11px; border-radius: var(--av-radius-pill);
  border: 1px solid var(--av-border-default); background: var(--av-surface-card);
  color: var(--av-text-secondary); transition: background .12s, color .12s, border-color .12s;
}
.vmd-chip:hover { border-color: var(--av-vocab-jade); color: var(--av-text-primary); }
.vmd-chip.is-active { background: var(--av-vocab-jade); border-color: var(--av-vocab-jade); color: var(--av-vocab-jade-ink); }
.vmd-rows { overflow-y: auto; flex: 1; padding: var(--av-space-2); }
.vmd-row { display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: var(--av-radius-md); transition: background .12s; }
.vmd-row:hover { background: var(--av-surface-sunken); }
.vmd-row.active { background: var(--av-vocab-jade-tint); }
.vmd-row.active .vmd-rw { color: var(--av-vocab-jade); }
.vmd-row-main { flex: 1; min-width: 0; appearance: none; border: 0; padding: 0;
  background: transparent; color: inherit; text-align: left; cursor: pointer; }
.vmd-row-main:focus-visible { outline: 2.5px solid var(--av-vocab-jade);
  outline-offset: 3px; border-radius: var(--av-radius-md); }
.vmd-rw { font-family: var(--av-font-display); font-weight: 500; font-size: 16px;
  display: block; line-height: 1.2; letter-spacing: -.01em; color: var(--av-text-primary); }
.vmd-rmeta { font-family: var(--av-font-mono); font-size: 11px; color: var(--av-text-muted);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vmd-rlvl { flex: none; font-family: var(--av-font-mono); font-size: 10.5px;
  color: var(--av-text-muted); border: 1px solid var(--av-border-subtle); border-radius: 6px; padding: 1px 6px; }
.vmd-detail { min-width: 0; }
.vmd-detail .va-card { margin: 0 auto; }
.vmd-back { display: none; }

@media (max-width: 860px) {
  .vmd-shell { grid-template-columns: 1fr; }
  .vmd-list { position: static; max-height: none; }
  .vmd-detail {
    position: fixed; inset: 0; z-index: 60; background: var(--av-surface-page);
    overflow-y: auto; padding: var(--av-space-4);
    transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.7,.2,1);
  }
  .vmd-shell.show-detail .vmd-detail { transform: translateX(0); }
  .vmd-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
    color: var(--av-vocab-jade); font-family: var(--av-font-sans);
    font-weight: 600; font-size: 14px; cursor: pointer; margin-bottom: var(--av-space-3);
  }
  .vmd-back svg { width: 16px; height: 16px; }
}

/* ── Per-card flag / report control (audio + content error reporting) ───────── */
.va-eyebrow-row { gap: var(--av-space-3); }
.va-eyebrow-actions { display: flex; align-items: center; gap: var(--av-space-2); position: relative; }
.va-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1; letter-spacing: .04em;
  color: var(--av-text-muted); background: transparent;
  border: 1px solid var(--av-border-subtle); border-radius: var(--av-radius-pill);
  padding: 4px 10px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.va-flag:hover { color: var(--av-warning); border-color: var(--av-warning); }
.va-flag:focus-visible { outline: 2px solid var(--av-vocab-jade); outline-offset: 2px; }
.va-flag-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  display: flex; flex-direction: column; gap: 2px; min-width: 156px;
  padding: 8px; background: var(--av-surface-card);
  border: 1px solid var(--av-border-default); border-radius: var(--av-radius-lg, 12px);
  box-shadow: var(--av-shadow-md);
}
.va-flag-menu[hidden] { display: none; }
.va-flag-q { font-size: 11px; color: var(--av-text-muted); padding: 2px 6px 4px; }
.va-flag-opt {
  text-align: left; font-size: 13px; color: var(--av-text-primary);
  background: transparent; border: 0; border-radius: var(--av-radius-md, 8px);
  padding: 7px 8px; cursor: pointer;
}
.va-flag-opt:hover { background: var(--av-surface-sunken); }
.va-flag-opt:focus-visible { outline: 2px solid var(--av-vocab-jade); outline-offset: -2px; }
.va-flag-done { font-size: 13px; color: var(--av-vocab-jade); padding: 4px 6px; white-space: nowrap; }