/* The vocab-study page (modules/vocab-study.ts): a vocab list laid out to
 * read — word, definition, examples. */

@import url('page.css');

:root {
  --study-rule: #d8d8d8;
  --study-muted: #666;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --study-rule: #444;
    --study-muted: #aaa;
  }
}

:root[data-theme='dark'] {
  --study-rule: #444;
  --study-muted: #aaa;
}

#vocab-study .intro {
  max-width: 40em;
}

#vocab-study dl.terms {
  max-width: 44em;
  margin: 1.5em 0;
}

#vocab-study dt {
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 1em;
  padding-top: 0.6em;
}

#vocab-study dt:first-child {
  border-top: none;
  padding-top: 0;
}

#vocab-study dd {
  margin: 0.25em 0 0 1.5em;
}

#vocab-study dd p {
  margin: 0.25em 0;
}

#vocab-study .example {
  font-style: italic;
  color: var(--study-muted);
}

#vocab-study .example::before {
  content: 'e.g. ';
  font-style: normal;
}

#vocab-study .definition.undefined {
  color: var(--study-muted);
  font-style: italic;
}

@media print {
  #vocab-study dt {
    break-after: avoid;
  }
  #vocab-study dd {
    break-inside: avoid;
  }
}