/*
  Makes a browser draw the matchup HTML the way Qt's QLabel does on the
  desktop. The HTML itself comes unchanged from counterlock/core/render.py
  (shared with the desktop), which was written for Qt's rich-text subset.

  Differences this evens out:
  - Qt gives blocks no margins except the ones written inline; browsers add
    their own defaults to p, ul and hr.
  - Qt's list indent (-qt-list-indent:1) is 40 px, with a 5 px round bullet
    ending 4 px before the text.
  - Qt draws <hr style="background-color: ..."> as a 1 px line in that colour
    (the theme's rule colour), centred in a block one text line tall. A
    browser would fill the whole block, so the fill is replaced by a line in
    var(--rule), the same colour from theme.json.
  - Qt's "line-height: 132%" means 132% of the font's natural line spacing,
    while a browser means 132% of the font size. js/main.js rewrites those
    values to calc(var(--qt-line) * 1.32), where --qt-line is the content
    font's natural spacing, measured once per font.
  - The content font (Settings > Font) applies to the text; the HTML only sets
    sizes and weights.
*/

.doc {
  font-family: var(--content-font, var(--ui-font));
  line-height: var(--qt-line, 1.2);
  color: var(--text);
  overflow-wrap: break-word;
}
.doc p,
.doc div {
  margin: 0;
}
.doc ul {
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
}
.doc li {
  position: relative;
  margin: 0;
  padding: 0;
}
.doc li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: calc(0.5lh - 3px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
@supports not (top: 1lh) {
  .doc li::before { top: 0.42em; }
}
.doc hr {
  position: relative;
  height: calc(var(--qt-line, 1.2) * 1em);
  margin: 0;
  border: 0;
  overflow: visible;
  background: none !important;  /* the inline colour is drawn as the line below */
}
.doc hr::after {
  /* A border, so the browser snaps it to whole pixels (sharp, like Qt). */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--rule);
}
.doc b {
  font-weight: 700;
}

/* The selection row and the "(optional)" caption use the same HTML subset. */
.selection-row p, .caption p { margin: 0; }