/* Vocabulary page (SPEC §12.6) — owned by results-vocab. */

.vocab-cta-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand-contrast) 22%, transparent);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Controls ---------- */
.vocab-controls { padding: 0; overflow: visible; }
.vocab-controls .tabs { padding: var(--s-2) var(--s-5) 0; }
.vocab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.vocab-search { flex: 1 1 320px; min-width: 0; }
.vocab-search .input { height: 42px; }
.vocab-search .input::-webkit-search-cancel-button { appearance: none; }
.vocab-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.vocab-tab-short { display: none; }
.vocab-script-opt { display: inline-flex; align-items: center; gap: 6px; }
.vocab-script-opt .jp { font-size: 13px; color: var(--text-muted); }
.segmented-item[aria-checked="true"] .vocab-script-opt .jp { color: inherit; }
.vocab-sort { display: flex; align-items: center; gap: var(--s-2); }
.vocab-sort-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.vocab-sort-label .icon { color: var(--text-muted); }
.vocab-sort-select { width: auto; height: 36px; min-width: 176px; padding-block: 0; font-size: 14px; }

.vocab-status { margin: var(--s-5) 0 var(--s-3); min-height: 20px; color: var(--text-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.vocab-status:empty { margin-bottom: 0; }

/* ---------- Grid & tiles ---------- */
.vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vocab-tile {
  --vt-script: var(--hira);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease;
  animation: hk-rise-in var(--dur-3) var(--ease-out) both;
}
.vocab-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-4);
  height: 40px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--vt-script);
}
.vocab-tile.is-katakana { --vt-script: var(--kata); }
.vocab-tile:not(.is-skeleton):hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.vocab-tile.is-unstarred { opacity: .6; }
.vocab-tile.is-skeleton { min-height: 176px; gap: var(--s-3); animation: none; }
.vocab-tile.is-skeleton::before { display: none; }

.vocab-tile-top { display: flex; align-items: flex-start; gap: var(--s-2); }
.vocab-tile-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1);
  padding: var(--s-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vocab-tile-main:focus-visible { outline: none; box-shadow: var(--ring); }
.vocab-tile-kana { font-size: 28px; line-height: 1.2; color: var(--text-primary); overflow-wrap: anywhere; }
.vocab-tile-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vocab-tile-romaji { color: var(--text-secondary); font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.vocab-tile-kanji { color: var(--text-muted); font-size: 14px; }
.vocab-tile-meaning {
  display: -webkit-box;
  min-height: calc(2 * 1.45em);
  margin-top: var(--s-2);
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vocab-tile-tools { display: flex; flex: none; gap: 2px; margin: -4px -6px 0 0; }
.vocab-star[aria-pressed="true"] { color: var(--warning); }
.vocab-star[aria-pressed="true"]:hover { color: var(--warning); }
.vocab-star[aria-pressed="true"] .icon { animation: hk-pop-in var(--dur-3) var(--ease-spring); }
.vocab-listen.is-speaking { color: var(--brand-text); }

.vocab-mastery { flex: 1; min-width: 0; }
.vocab-mastery-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: 8px; }
.vocab-mastery-head > .chip { flex: none; }
.vocab-mastery-text { min-width: 0; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vocab-mastery-text strong { font-weight: 650; color: var(--text-primary); }
.vocab-mastery { --vm-fill: var(--success); --vm-track: var(--success-soft); }
.vocab-mastery.is-mid { --vm-fill: var(--warning); --vm-track: var(--warning-soft); }
.vocab-mastery.is-low { --vm-fill: var(--danger); --vm-track: var(--danger-soft); }
.vocab-mastery.is-none { --vm-track: var(--surface-3); }
.vocab-mastery-track { height: 6px; border-radius: var(--r-pill); background: var(--vm-track); overflow: hidden; }
.vocab-mastery-fill {
  display: block;
  height: 100%;
  width: calc(var(--meter) * 100%);
  border-radius: var(--r-pill);
  background: var(--vm-fill);
  transform-origin: left center;
  animation: vocab-meter-grow 700ms var(--ease-out) 150ms both;
}
@keyframes vocab-meter-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Detail panel (full grid row under the expanded tile) ---------- */
.vocab-tile.is-expanded { border-color: color-mix(in srgb, var(--vt-script) 55%, transparent); box-shadow: var(--shadow-2); transform: none; }
.vocab-tile.is-expanded::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--s-4) * -1 - 8px);
  width: 14px;
  height: 14px;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
  transform: translateX(-50%) rotate(45deg);
  z-index: 1;
}
.vocab-detail {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr) 32px;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
  animation: hk-rise-in var(--dur-3) var(--ease-out);
}
.vocab-detail-close { margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) 0 0; }
/* The panel is the frame, so the word card sits flat inside it. */
.vocab-word-card.word-card { --wc-kana: 52px; border: 0; box-shadow: none; padding: 0 0 0 var(--s-4); background: none; overflow: visible; }
.vocab-word-card.word-card::before { top: 4px; bottom: 4px; }
.vocab-history { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
.vocab-history-title { margin-bottom: var(--s-2); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.vocab-history-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin: 0; }
.vocab-history-facts dt { font-size: 12px; color: var(--text-muted); }
.vocab-history-facts dd { margin: 0; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vocab-history-result { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }

/* ---------- Load more, empty states ---------- */
.vocab-more { display: flex; justify-content: center; margin-top: var(--s-6); }
.vocab-more[hidden] { display: none; }
.vocab-more-btn { min-width: 200px; }
.vocab-slot:empty { display: none; }
.vocab-empty { margin-top: var(--s-2); }
.vocab-empty .empty-state p { max-width: 46ch; }
.vocab-empty-art { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.vocab-empty-art .kana {
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 30px;
  line-height: 1.2;
  box-shadow: var(--shadow-1);
}
.vocab-empty-art .is-hira { background: var(--hira-soft); color: var(--hira-text); transform: rotate(-4deg); }
.vocab-empty-art .is-kata { background: var(--kata-soft); color: var(--kata-text); transform: rotate(3deg) translateY(6px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .vocab-detail { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .vocab-detail-close { position: absolute; top: var(--s-3); right: var(--s-3); margin: 0; }
  .vocab-word-card .word-card-head { padding-right: 36px; }
}
@media (max-width: 760px) {
  .vocab-page .page-header-actions, .vocab-cta { width: 100%; }
  .vocab-cta { justify-content: center; }
  .vocab-toolbar { padding: var(--s-3) var(--s-4) var(--s-4); }
  .vocab-search { flex-basis: 100%; }
  .vocab-toolbar-filters { width: 100%; justify-content: space-between; }
  .vocab-sort-select { min-width: 0; }
  .vocab-toolbar-filters .segmented { flex: 1 1 auto; }
  .vocab-toolbar-filters .segmented-item { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {
  .vocab-controls .tabs { padding: var(--s-1) var(--s-2) 0; gap: 0; }
  .vocab-controls .tab { padding-inline: 8px; font-size: 13.5px; }
  .vocab-tab-long { display: none; }
  .vocab-tab-short { display: inline; }
  .vocab-sort-label span { display: none; }
  .vocab-sort { flex: 1 1 100%; }
  .vocab-sort-select { flex: 1; }
  .vocab-word-card.word-card { --wc-kana: 34px; }
  .vocab-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .vocab-tile.is-skeleton:nth-child(n + 4) { display: none; }
  .vocab-detail { padding: var(--s-5) var(--s-4) var(--s-4); }
}

/* @@END-OF-FILE */