/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

html {
  font-size: 120%;
  -webkit-text-size-adjust: 120%;
  -ms-text-size-adjust: 120%;
}

.summary-container h1 {
  font-size: 1.5em;
  font-weight: 600;
}

.summary-container h2 {
  font-size: 1.3em;
}

/* Each line of the simplifier's output is rendered as its own small Markdown
   document so it can stay paired with its translation. A side effect is that
   consecutive bullets become separate <ul> elements and consecutive paragraphs
   separate <p> elements, which would stack up default block margins. Collapse
   them so a run of bullets reads as one list. */
.md-line > ul,
.md-line > ol,
.md-line > p {
  margin-top: 0;
  margin-bottom: 0;
}

.md-line > h1,
.md-line > h2,
.md-line > h3,
.md-line > h4 {
  margin-top: 0.75em;
  margin-bottom: 0.25em;
}

/* One tutor lesson, rendered from the model's Markdown into an episode's table.

   The headings arrive as <h2> and <h3>, which Bootstrap sizes for a page title:
   a lesson's "1. Direct translation" then rendered larger than the episode's own
   heading and several times the size of the table row it belongs to. These sizes
   are relative to the table rather than to the document, and the measure is
   capped because the row it sits under spans the full window -- prose set to a
   1900px line is unreadable no matter what size it is. */
.lesson {
  max-width: 46rem;
  font-size: 0.925rem;
}

.lesson h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.lesson h2:first-child {
  margin-top: 0.25rem;
}

.lesson h3 {
  font-size: 0.925rem;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
  color: var(--bs-secondary-color);
}

.lesson p,
.lesson ul,
.lesson ol {
  margin-bottom: 0.5rem;
}

.lesson li {
  margin-bottom: 0.15rem;
}

/* The direct translation is quoted. Bootstrap leaves blockquote unstyled. */
.lesson blockquote {
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--bs-border-color);
}

/* The favorites list: one saved sentence per row, ruled rather than boxed.

   Each row is three lines -- the sentence with its pinyin, the English, and a
   line of controls -- and the rules between them are the only separation, so a
   screen holds several rows instead of two and a half cards. */
.favorites .favorite {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.favorites .favorite:first-child {
  border-top: 1px solid var(--bs-border-color);
}

/* The controls line. Closed, each <details> is only as wide as its summary and
   sits beside the other; opened, it claims the whole row so the analysis is not
   squeezed into half the width by its neighbour.

   The order matters as much as the width. An opened lesson runs for several
   screens, and without `order` the chip that had been sharing its line wraps
   underneath all of it -- open one analysis and the other appears to be gone.
   Opened panels sort after everything else instead, which keeps both controls
   together on the first line whatever is expanded. */
.favorite-tools > details {
  flex: 0 1 auto;
}

.favorite-tools > details[open] {
  flex: 1 0 100%;
  order: 1;
}

/* Both summaries and the two run buttons sit on this line, so the pointer has
   to say which of them are pressable. */
.favorite-tools summary {
  cursor: pointer;
}