/* Vocabulary Chart (/vocabulary/chart) — sibling to css/kanji-chart.css.
   Same card/label/jump language as the Kanji Chart so the three chart pages
   (kana, kanji, vocabulary) read as one family. The cells are wider and
   fewer-per-row than the kanji ones because each carries four lines of text
   rather than a glyph and a gloss.

   Variable names match chart.css / kanji-chart.css on purpose — site.css
   defines that family, and --accent resolves to the site's blue. */

.vchart-page { width: 100%; }

/* ── Group labels ─────────────────────────────────────────────
   Identical to .grammar-idx__section-title in site.css (the "BASIC GRAMMAR"
   kicker on /grammar) and to .kchart-group-title. The 22px top margin is what
   separates each group from the block above it. */
.vchart-group-title {
  margin: 22px 0 12px; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .10em; color: var(--accent-light); text-transform: uppercase;
}

/* ── Child-page cards (Library / Decks) ───────────────────── */
.vchart-children {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0;
}
.vchart-child {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  transition: border-color .15s, transform .1s;
}
@media (hover: hover) {
  .vchart-child:hover { border-color: var(--accent, #20507e); transform: translateY(-1px); }
}
.vchart-child-title { font-weight: 700; color: var(--text, #1f1a1a); font-size: .98rem; }
.vchart-child-sub { font-size: .8rem; color: var(--text-muted, #54403a); line-height: 1.4; }

/* ── Jump strip ──────────────────────────────────────────────
   Theme names rather than numbers — "Greetings" is a more useful target than
   "3", and 13 of them still fit on two lines. */
.vchart-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 10px 12px; margin: 0 0 18px; border-radius: 12px;
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
.vchart-jump a {
  padding: 4px 9px; border-radius: 999px;
  text-decoration: none; font-size: .76rem; font-weight: 600;
  color: var(--text-muted, #54403a);
  background: var(--bg-outer, #f4ede0);
  border: 1px solid var(--container-border, #d9cdb4);
}
@media (hover: hover) {
  .vchart-jump a:hover { border-color: var(--accent, #20507e); color: var(--accent, #20507e); }
}

/* ── Theme sections ──────────────────────────────────────── */
.vchart-section { width: 100%; margin: 0 0 16px; scroll-margin-top: 70px; }
.vchart-section > h3 {
  font-size: 1.05rem; color: var(--text, #1f1a1a); margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.vchart-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: #fff;
  background: var(--accent, #20507e);
}
.vchart-title { font-weight: 700; }
.vchart-count {
  font-size: .72rem; font-weight: 600; color: var(--text-faint, #7a6260);
  margin-left: auto;
}

.vchart-card {
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 12px; padding: 10px;
}
.vchart-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}

.vchart-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 34px 9px 11px;   /* right padding clears the audio button */
  border-radius: 9px;
  background: var(--bg-outer, #f4ede0);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
.vchart-jp { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vchart-word {
  font-family: 'Noto Sans JP', sans-serif; font-size: 1.18rem; line-height: 1.25;
  color: var(--text, #1f1a1a);
}
.vchart-reading {
  font-family: 'Noto Sans JP', sans-serif; font-size: .74rem;
  color: var(--text-faint, #7a6260);
}
.vchart-romaji {
  font-size: .72rem; font-weight: 600; color: var(--accent, #20507e);
  letter-spacing: .01em;
}
.vchart-meaning {
  font-size: .74rem; line-height: 1.3; color: var(--text-muted, #54403a);
}

.vchart-audio {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; cursor: pointer;
  color: var(--accent, #20507e);
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) {
  .vchart-audio:hover {
    background: var(--accent, #20507e); border-color: var(--accent, #20507e); color: #fff;
  }
}

/* The promo lives in the shared .layout-with-rail (site.css): already sticky,
   already collapses when there's nothing to show. */
.vchart-page .layout-with-rail { margin-top: 0; }

/* These cells carry four lines of text, so unlike the kanji chart they can't
   just get narrower: beside a 300px rail, four across leaves ~145px of content
   width and meanings wrap badly. Drop to three. Bounded to the desktop range
   because below 900px the rail stacks and the width is back — and because the
   :has() selector would otherwise out-specify the phone breakpoints below. */
@media (min-width: 1101px) {
  .vchart-page .layout-with-rail:has(.store-promo) .vchart-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The shared rail stacks at 900px, but three text-heavy cells plus a 300px
   rail get cramped below ~1100px (167px cells at 950px). Stack it earlier and
   let the chart have the full width back. */
@media (max-width: 1100px) {
  .vchart-page .layout-with-rail { grid-template-columns: 1fr; }
  .vchart-page .layout-with-rail__main,
  .vchart-page .layout-with-rail__rail { min-width: 0; }
  .vchart-page .layout-with-rail__rail { position: static; align-items: center; }
}

@media (max-width: 1000px) {
  .vchart-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .vchart-children { grid-template-columns: 1fr; }
  .vchart-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  /* One column on a small phone — two cells of four text lines each end up
     too narrow to keep a meaning on one line. */
  .vchart-grid { grid-template-columns: 1fr; }
}