/* Small optional course, using the existing light/Console design tokens. */
.basic-words-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.basic-words-entry h2 { margin-block: .25rem .5rem; }
.basic-words-entry p { margin-block: .25rem; }
.basic-words-entry > div { flex: 1 1 25rem; min-width: 0; }
.basic-words-page { overflow-wrap: anywhere; }
.basic-words-page .esperanto-course-overview { gap: 1.5rem; }
.basic-words-start-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.basic-words-unit { margin-block: 2rem; }
.basic-words-unit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.basic-words-unit__head > div { flex: 1 1 22rem; min-width: 0; }
.basic-words-unit__head h2 { margin-block: .25rem .5rem; }
.basic-words-progress {
  flex: 0 1 18rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
}
.basic-words-progress p { margin-block: .5rem; }
.basic-words-lessons { list-style: none; padding: 0; margin-block: 1.5rem; }
.basic-words-lessons li { margin-block: .6rem; }
.basic-words-lessons a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
  color: inherit;
  text-decoration: none;
}
.basic-words-lessons a:hover { border-color: var(--green-700); }
.basic-words-lessons a:focus-visible,
.basic-words-page button:focus-visible,
.basic-words-page summary:focus-visible {
  outline: 2px solid var(--accent, var(--green-900));
  outline-offset: 3px;
}
.basic-words-number { font-size: 1.3rem; font-weight: 700; color: var(--accent, var(--green-900)); }
.basic-words-summary { display: block; margin-block-start: .35rem; font-size: .9rem; }
.basic-words-meta { font-size: .85rem; text-align: end; white-space: nowrap; }
.basic-words-meta > span { display: block; margin-block-start: .35rem; }
.basic-words-lessons [data-practice-state="practiced"] a,
.basic-words-lessons [data-practice-state="later-reviewed"] a { border-inline-start: 4px solid var(--accent, var(--green-900)); }
.basic-words-authorship { display: block; margin-block-start: .75rem; }
.basic-words-actions {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}
.basic-words-actions > button {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  margin-block: 1rem;
  border: 1px solid var(--green-900);
  border-radius: 7px;
  background: var(--green-900);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.basic-words-dictionary > summary { cursor: pointer; font-weight: 700; }
.basic-words-dictionary__body { padding-block-start: .75rem; min-width: 0; }
.basic-words-dictionary .sense-card { margin-block: 1rem; }
.basic-words-page .basic-words-audio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: .5rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.basic-words-page .basic-words-audio .unmatched-speech-text[hidden] { display: none; }
.basic-words-audio button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
  color: inherit;
  padding: .4rem .7rem;
  font: inherit;
  cursor: pointer;
}
html[data-kajero-theme="console"] .basic-words-progress,
html[data-kajero-theme="console"] .basic-words-lessons a,
html[data-kajero-theme="console"] .basic-words-audio button {
  background: var(--console-raised);
  border-color: var(--console-line);
  color: var(--console-text);
}
html[data-kajero-theme="console"] .basic-words-actions > button {
  background: var(--console-selected);
  color: var(--console-text);
  border-color: var(--console-accent);
}
@media (max-width: 580px) {
  .basic-words-lessons a { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .65rem; padding: .85rem; }
  .basic-words-meta { grid-column: 2; text-align: start; white-space: normal; }
  .basic-words-meta > span { display: inline; margin-inline-start: .75rem; }
}