/* Word list pages — dark navy base, language accent from data/menu.json. */
.word-list {
  --wl-card: #253352;
  --wl-text: #F4F6F9;
  --wl-muted: #a8b3c4;
  max-width: 760px;
  margin: 0 auto 40px;
  color: var(--wl-text);
}

.wl-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--wl-muted);
  margin: 10px 0 12px;
}

.wl-count {
  margin-left: auto;
}

.wl-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.wl-toc a {
  padding: 6px 10px;
  border: 1px solid #475569;
  border-radius: 999px;
  color: var(--wl-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.wl-toc a:hover,
.wl-toc a:focus-visible {
  border-color: var(--wl-accent);
}

.word-list h2 {
  margin: 28px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--wl-accent);
  font-size: 1.3rem;
}

.wl-items {
  display: grid;
  gap: 10px;
}

.wl-item {
  background: var(--wl-card);
  border-radius: 10px;
  padding: 12px 14px;
}

.wl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.wl-play {
  align-self: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #475569;
  background: #1e293b;
  color: var(--wl-text);
  cursor: pointer;
  font-size: 1rem;
}

.wl-play:hover,
.wl-play:focus-visible,
.wl-play.is-playing {
  border-color: var(--wl-accent);
  color: var(--wl-accent);
}

.wl-play--small {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

.wl-word {
  font-size: 1.6rem;
  line-height: 1.3;
}

.wl-read {
  font-size: 1rem;
  color: var(--wl-muted);
}

.wl-rom {
  color: var(--wl-accent);
  font-size: 0.95rem;
}

.wl-en {
  margin-left: auto;
  font-size: 1rem;
}

.wl-note {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--wl-muted);
}

.wl-ex {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #334155;
}

.wl-ex p {
  margin: 0 0 2px;
}

.wl-ex-text {
  font-size: 1.1rem;
}

.wl-ex-en {
  color: var(--wl-muted);
  font-size: 0.9rem;
}

/* hint toggles */
.wl-no-rom .wl-rom,
.wl-no-read .wl-read {
  display: none;
}

.wl-foot {
  margin-top: 24px;
  font-size: 0.8rem;
  color: var(--wl-muted);
}

@media (max-width: 480px) {
  .wl-en {
    margin-left: 0;
    flex-basis: 100%;
  }

  .wl-count {
    margin-left: 0;
  }
}

/* style.css の汎用 article ルール（最大幅600px・中央寄せ）を単語カードには使わない */
.word-list .wl-item {
  max-width: none;
  margin: 0;
  line-height: 1.5;
}

.word-list .wl-toc a {
  color: var(--wl-text);
  text-decoration: none;
}

.wl-legend {
  font-size: 0.85rem;
  color: var(--wl-muted);
  margin: 0 0 14px;
}

/* search */
.wl-search {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 8px;
  background: #19233D;
}

.wl-search-label {
  font-size: 0.9rem;
  color: var(--wl-muted);
}

.wl-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #1e293b;
  color: var(--wl-text);
}

.wl-search input:focus {
  outline: 2px solid var(--wl-accent);
  outline-offset: 1px;
}

.wl-search-count {
  font-size: 0.85rem;
  color: var(--wl-muted);
  white-space: nowrap;
}

.word-list [hidden] {
  display: none !important;
}

/* results under the search box */
.wl-results {
  position: sticky;
  top: 62px;
  z-index: 4;
  max-height: 55vh;
  overflow-y: auto;
  margin: -4px 0 14px;
  padding: 6px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
}

.wl-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid #334155;
}

.wl-result:last-child {
  border-bottom: 0;
}

.wl-result-go {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wl-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wl-result-go:hover,
.wl-result-go:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.wl-result-word {
  font-size: 1.2rem;
}

.wl-result-en {
  margin-left: auto;
  color: var(--wl-muted);
}

.wl-result-none {
  margin: 6px;
  color: var(--wl-muted);
}

.wl-item.is-found {
  animation: wl-found 1.6s ease;
}

@keyframes wl-found {
  0%, 40% { box-shadow: 0 0 0 3px var(--wl-accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* the example sentence with furigana */
.wl-ex-text ruby rt {
  font-size: 0.55em;
  color: var(--wl-muted);
}

.wl-no-read ruby rt {
  display: none;
}

/* words in this sentence (fold-out panel) — reading and meaning 1.5× larger, more space between them */
.wl-words {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #1a2540;
}

.wl-words div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
}

.wl-words dt {
  min-width: 5em;
  font-size: 1.25rem;
  font-weight: 600;
}

.wl-words dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  font-size: 1.3rem;
}

.wl-words .wl-mean {
  color: var(--wl-text);
}

/* grammar box (like the verb flashcards: level, label, English and Japanese explanation) */
.wl-grammar {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid var(--wl-accent);
  border-radius: 6px;
  background: #1a2540;
  font-size: 0.9rem;
}

.wl-grammar p {
  margin: 0 0 6px;
}

.wl-grammar p:last-child {
  margin-bottom: 0;
}

.wl-grammar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wl-grammar-level {
  padding: 1px 6px;
  border-radius: 4px;
  background: #334155;
  font-size: 0.75rem;
}

.wl-grammar-tag {
  padding: 1px 8px;
  border-radius: 4px;
  background: #89BDD6;
  color: #19233D;
  font-size: 0.78rem;
  font-weight: 600;
}

.wl-grammar-en {
  color: var(--wl-text);
}

.wl-ji {
  font-weight: 600;
}

.wl-ri {
  color: var(--wl-accent);
}

.wl-grammar-ja {
  color: var(--wl-muted);
}

.wl-no-rom .wl-ri {
  display: none;
}

/* Words ▾ / Grammar ▾ buttons */
.wl-more {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.wl-more-btn {
  font: inherit;
  font-size: 0.9rem;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #475569;
  background: #1e293b;
  color: var(--wl-text);
  cursor: pointer;
}

.wl-more-btn[aria-expanded="true"] {
  border-color: var(--wl-accent);
  color: var(--wl-accent);
}

/* explanations: English by default, Japanese when chosen (falls back to English if not written) */
.wl-grammar-ja {
  display: none;
}

.wl-exp-ja .wl-grammar-ja {
  display: block;
  color: var(--wl-text);
}

.wl-exp-ja .wl-grammar:has(.wl-grammar-ja) .wl-grammar-en {
  display: none;
}

.wl-tools--2 {
  justify-content: space-between;
}

.wl-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-seg-btn,
.wl-playall {
  font: inherit;
  font-size: 0.9rem;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #1e293b;
  color: var(--wl-text);
  cursor: pointer;
}

.wl-seg-btn[aria-pressed="true"],
.wl-playall.is-on {
  border-color: var(--wl-accent);
  color: var(--wl-accent);
}

.wl-playall-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wl-playall--topic {
  margin-left: 10px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.8rem;
  vertical-align: middle;
}

.wl-item.is-current {
  box-shadow: 0 0 0 3px var(--wl-accent);
}

.wl-words .wl-rom {
  font-size: inherit;
}

/* Words: two aligned columns (word | reading + meaning) */
.wl-words div {
  display: grid;
  grid-template-columns: minmax(4.5em, max-content) 1fr;
  gap: 4px 16px;
}

.wl-words dt {
  min-width: 0;
}