/* Colour, and which scheme it is drawn in. #523.
 *
 * Every colour on the site is written as `light-dark(<light>, <dark>)`: the
 * shared ones below, and the one-offs in place in the component that uses
 * them. The light half is always the colour the site was before there was a
 * dark one, so light mode is unchanged by construction rather than by eye.
 *
 * `light-dark()` answers from the element's `color-scheme`, which every
 * element inherits from here. `light dark` means "whichever the system
 * prefers", which is the System setting and the default; `js/theme.js` puts
 * `data-theme` on <html> before the first paint when this browser has chosen
 * Light or Dark instead, and the two rules under this one pin it. The same
 * property is what turns the browser's own drawing dark too — scrollbars, the
 * insides of inputs and selects, a date field's popup — which no rule here
 * could reach.
 *
 * Accent text stays `#0e9ce0` in both: it is 5.73:1 on the dark page, where
 * it was 3.07:1 on white, so the problem #398 had with it is light-only. The
 * same blue under white text is unchanged for the reason it always was, and
 * `#888` and `#999` read at 5:1 and 6:1 on either background. The greys
 * that do change are the ones whose job is to be faint, which on a dark page
 * means darker rather than lighter, and `#555`-`#777`, which would sink.
 *
 * Ratios on the dark page (#18191c), WCAG relative luminance: text 12.18,
 * links 7.27 and 9.28 hovered, muted #9aa0a6 6.66, warning #f0743f 6.09.
*/
:root {
  color-scheme: light dark;

  --page-bg: light-dark(#fff, #18191c);
  --text: light-dark(#333, #d4d7dc);
  /* Whatever sits above the page: a modal, a menu, a notification, a select. */
  --raised-bg: light-dark(#fff, #23252a);
  /* A tint under something hovered or set apart: a table row, a code block. */
  --surface: light-dark(#f5f5f5, #2a2d32);
  --border: light-dark(#ddd, #3c4047);
  --rule: light-dark(#eee, #2e3136);
  --link: light-dark(#0b7cb3, #4fb0e6);
  --link-hover: light-dark(#0b6f9f, #7cc5ef);
  /* The site draws an input's edge as a shadow, which is invisible black on
     black, so in the dark it is a light one. */
  --control-edge: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.3));
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* The base layer, which was Bootstrap's until #269 step 6.
 *
 * The Bootstrap class names the markup carried are replaced further down,
 * under "Layout" and in the two components named there. This first section is the part of that stylesheet with no
 * class names in it at all -- `box-sizing`, the body font and size, the
 * heading scale, the margins on paragraphs, lists and rules -- and it is the
 * part that touched every page, including the ones that never used a
 * Bootstrap class. Dropping the file without writing this down changes the
 * look of the whole site by a little, everywhere, which is the hardest kind of
 * regression to see.
 *
 * So the values here are the ones the site has always rendered at rather than
 * a browser's defaults, and this file is where they are written down now.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--text);
  background: var(--page-bg);
}

/* Form controls inherit neither the document's font nor its colour on their
 * own, and this is the one part of this section that is not a preference:
 * without it every input, select and button on the site falls back to the
 * browser's own 13.33px face and to black instead of #333.
*/
input,
button,
select,
textarea,
optgroup {
  color: inherit;
  font: inherit;
  margin: 0;
}

/* #0b7cb3 was the hover colour until #398, and the resting one was #0e9ce0 --
 * which is 3.07:1 on white and so fails WCAG AA's 4.5:1 for text under
 * 18.66px, which every link on a list is. The compliant version of this blue
 * was therefore already in the palette and was spent on the one state a
 * keyboard or touch reader may never reach, so the two have moved down a
 * step: the hover colour is now the resting colour at 4.62:1, and the hover
 * is a further darkening of it at 5.54:1.
 *
 * Ratios computed with the WCAG relative-luminance formula, on #ffffff:
 * #0e9ce0 3.07 (was, fails), #0b7cb3 4.62, #0b6f9f 5.54, #333333 12.63.
 *
 * Where the two came from, since #269 step 6 wrote it down and the move would
 * otherwise lose it: Bootstrap darkened a hovered link to #23527c, which is
 * its own #337ab7 link colour darkened, and the site had overridden that
 * colour with #0e9ce0 long before -- so every hover landed on a navy
 * belonging to a palette nothing else here uses. #0b7cb3 is that same
 * darkening applied to the blue the links actually were. #0b6f9f is a
 * shorter step again -- about four points of lightness rather than nine,
 * which is enough to read as a state change without the hover looking like
 * a different colour.
 *
 * This moves links only. #0e9ce0 is still the site's blue elsewhere -- the
 * tab and draft-restore backgrounds, the profile's Edit button -- and a
 * background carrying white text is a different contrast question from 14px
 * text on white, so it is deliberately not a find-and-replace.
*/
a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
  margin-bottom: 10px;
}

h1,
h2,
h3 {
  margin-top: 20px;
}

h4,
h5,
h6 {
  margin-top: 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
  margin: 0 0 10px;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 85%;
}

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid var(--rule);
}

img {
  border: 0;
  vertical-align: middle;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

/* `padding: 2px 5px` on the site's own rule below would otherwise inflate a
 * checkbox, and the margin is what lines one up with the text beside it.
*/
input[type="checkbox"],
input[type="radio"] {
  margin: 4px 0 0;
  padding: 0;
  line-height: normal;
}

/* The list tables' search box. Without this the browser draws its own search
 * decoration inside a field the site has already styled.
*/
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}

th {
  text-align: left;
}

td,
th {
  padding: 0;
}

/* Markdown. A comment or a biography can hold any of these, and each of them
 * was drawn by the file that is gone -- so a note with a quotation or a code
 * fence in it is exactly where a missing base layer shows first.
*/
blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid var(--rule);
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
  margin-bottom: 0;
}

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: light-dark(#c7254e, #f08aa5);
  background: light-dark(#f9f2f4, #33242a);
  border-radius: 4px;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: var(--text);
  word-break: break-all;
  overflow-wrap: break-word;
  background: var(--surface);
  border: 1px solid light-dark(#ccc, #3c4047);
  border-radius: 4px;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background: transparent;
  border-radius: 0;
}

/* Layout, which was two `container`, nine `row` and seven `col-*`.
 *
 * Only two places on the site put anything beside anything else -- the menu
 * and the page it points into, and a sublist inset from the edge of a list
 * page -- so what is here is those two, at the widths Bootstrap's twelfths
 * gave them and at the breakpoints its `sm` and `md` prefixes meant. The
 * sublist's half lives beside the rest of its rules in
 * `js/components/list/list.js`, and the menu's in `js/components/ui/menu.js`.
 *
 * Two of the nine `row`s are `.page-body` below and one is the sublist's.
 * The other six had no columns under them at all, and what they were for is
 * `.full-bleed`.
 *
 * `display: flow-root` on these is not decoration. Bootstrap gave `row` and
 * `container` a clearfix, and a clearfix is two in-flow pseudo-elements, which
 * stop a child's top and bottom margins collapsing out through the box. Every
 * heading on the site sits in one of these, so without it the page loses 10px
 * under each and reads a little tighter than it ever has. `flow-root` says
 * that on purpose rather than as a side effect of clearing floats it no longer
 * has to clear.
*/
.page,
.page-body,
.page-main,
.full-bleed {
  display: flow-root;
}

.page {
  padding: 0 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .page { width: 750px; }
}

@media (min-width: 992px) {
  .page { width: 970px; }
}

@media (min-width: 1200px) {
  .page { width: 1170px; }
}

/* The band inside the page. The negative margins take back the gutter `.page`
 * adds, and the padding was an inline `style="padding:20px"` on both of the
 * elements that carry this.
*/
.page-body {
  padding: 20px;
  margin-right: -15px;
  margin-left: -15px;
}

/* A list page has no menu, so only `ui/base.js` puts two things side by side.
 * Below 768px this is not a flex container at all and the two stack, which is
 * what `col-sm-*` meant by only taking effect from there up.
 *
 * The two do not add up to twelve twelfths on a wide screen -- 2 and 9, not 3
 * and 9 -- so there is a gap at the right of every page from 992px. That is
 * how it has always looked and the numbers below say so on purpose.
 *
 * `.page-main` is in the group above because `col-xs-12` floated at every
 * width, and a float holds its children's margins in the same way a flex item
 * does. Below 768px, where there is no flex container, nothing else would.
*/
.page-menu,
.page-main {
  padding: 0 15px;
}

@media (min-width: 768px) {
  .page-columns {
    display: flex;
    align-items: flex-start;
  }
  .page-menu { width: 25%; }
  .page-main { width: 75%; }
}

@media (min-width: 992px) {
  .page-menu { width: 16.66666667%; }
}

/* A block that ignores the 15px gutter of the column it sits in, so it spans
 * the full width rather than the text width. This is all a Bootstrap `row`
 * ever did on the six elements here that had no column under them, and the
 * heading of every page is one of them: a `<hr>` and the block above it start
 * 15px apart, which is small enough to be worth naming rather than losing.
*/
.full-bleed {
  margin-right: -15px;
  margin-left: -15px;
}

span:lang(ja) {
  font-family: sans-serif;
}
span:lang(cn) {
  font-family: sans-serif;
}

/* Styling for images included in comments that resize appropriately.
*/
.responsive-image {
  width: 100%;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Icons.
 *
 * There is no icon font on this page any more. Font Awesome's stylesheet was
 * 73,890 bytes and then fetched the faces the glyphs live in — 158,220 for
 * `fa-solid-900.woff2` and 25,472 for `fa-regular-400.woff2`, both measured
 * on a list page — to draw eighteen glyphs. `js/utils/icons.js` holds the
 * thirteen the markup draws, as inline <svg>; the five below are the ones CSS
 * draws itself, out of `::before` and `::after` content, which cannot be an
 * element. #269.
 *
 * The paths are Font Awesome Free 6.7.2's own, from
 * `@fortawesome/fontawesome-free@6.7.2/svgs/solid/<name>.svg`, so these are
 * the same glyphs the font was drawing rather than something like them.
 * **Font Awesome Free's icons are CC BY 4.0**
 * (https://fontawesome.com/license/free). Attribution: Font Awesome Free
 * 6.7.2 by @fontawesome — https://fontawesome.com.
 *
 * They are masks rather than background images, which is what keeps them
 * inheriting their colour: a mask paints `background-color`, so `currentColor`
 * makes the glyph the colour of the text around it and `.is-collapsed` below
 * can still recolour its arrow by setting `color` alone. A background image
 * would need one copy of the file per colour. `-webkit-mask` is there as well
 * as `mask` because Safari only dropped the prefix in 15.4.
*/
:root {
  --icon-angle-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E");
  --icon-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
  --icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8L32 224c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E");
  --icon-sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E");
  --icon-sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l256 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z'/%3E%3C/svg%3E");
}

/* The shape of an icon, and the whole of what `js/utils/icons.js` leaves to
 * CSS. Font Awesome's em square is 512 units tall, so a 1em height makes the
 * drawn glyph exactly the size the font's was; the width is left to follow
 * from each icon's `viewBox`, which is what the varying widths of the font's
 * glyphs were. `-0.125em` is the 64 units of descent in that square, and is
 * the number Font Awesome's own SVG mode uses for the same reason.
 *
 * `fill: currentColor` and nothing else: an icon takes the colour of the text
 * it sits in, so the rules that used to colour an `<i>` still colour this.
*/
.icon {
  display: inline-block;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  overflow: visible;
}

/* Styling for headers which collapse the subsequent element. It acts like a
 * link, and the arrow saying which way it is folded is one of the masks above.
*/
.collapsible {
  color: #0e9ce0;
  cursor: pointer;
}
.collapsible:before {
  content: "";
  display: inline-block;
  width: 0.8750em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon-angle-up) no-repeat center / contain;
  mask: var(--icon-angle-up) no-repeat center / contain;
  margin-right: 10px;
  top: 2px;
  position: relative;
}
.is-collapsed {
  color: light-dark(#ccc, #555a61);
}
/* `margin-right: 15px` where this was `margin-right: 10px` above plus a
 * `padding-right: 5px` here: the same gap, moved. `box-sizing: border-box` is
 * set on `::before` at the top of this file, so padding on a box that now has
 * a `width` takes 5px off the arrow rather than putting 5px after it — which
 * it did not do when the arrow was a character in a box sized by its font.
 *
 * Worth knowing before reading much into this rule: `components/list/list.js`
 * puts `is-collapsed` on the elements it folds away — the table and the
 * summary line — and not on the `.collapsible` heading above them. So the
 * heading's arrow does not flip today, and what this draws is a `::before` on
 * something that is being slid shut. It is translated rather than corrected
 * here, because which element should carry the class is a question about that
 * file rather than this one.
*/
.is-collapsed:before {
  color: light-dark(#ccc, #555a61);
  -webkit-mask-image: var(--icon-angle-down);
  mask-image: var(--icon-angle-down);
  margin-right: 15px;
}
.collapsible:hover {
  text-decoration: underline;
}
.collapsible:hover::before {
  text-decoration: none !important;
}

.d-none {
  display: none;
}

.edit-button {
  color: #0e9ce0;
  cursor: pointer;
}

/* A `<button>` since #485, drawn as the link it used to be: the site's rule
 * for buttons gives them a border, a radius and padding, and the caret had
 * none of those, only the link blue and its hover.
*/
.detail-icon {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  cursor: pointer;
}

.detail-icon:hover,
.detail-icon:focus {
  color: var(--link-hover);
}

.review {
  max-width: calc(100vw - 60px);
}

.detail-view img {
  max-width: 50%;
  max-height: 200px;
  border-radius: 8px;
  margin: 10px 25px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

.detail-view img:nth-of-type(even) {
  float: right;
}

.detail-view img:nth-of-type(odd) {
  float: left;
}

.mini-thumb {
  vertical-align: middle;
  height: 16px;
  width: 16px;
  object-fit: cover;
  margin-right: 6px;
  border-radius: 50%;
}

.cover-tooltip {
  display: none;
  position: absolute;
  margin-top: 8px;
  margin-left: 8px;
  z-index: 99;
}

.cover-tooltip img {
  max-height: 400px;
  max-width: 200px;
}

.title-with-cover-container {
  position: relative;
}

@media (min-width: 615px) {
  span.title-with-cover:hover + .cover-tooltip {
    display: block;
  }
}

h1 {
  text-align: center;
  padding-bottom: 1px;
}

.summary-stats {
  text-align: center;
  font-size: 11px;
  margin-top: 11px;
}

.summary-stats .icon {
  margin: 0 10px;
  opacity: 0.7;
}

select {
  background: var(--raised-bg);
}

input,
button,
select,
textarea {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px 5px;
  box-shadow: 0px 0px 3px var(--control-edge);
}

button {
  box-shadow: unset;
}

/* The list tables, drawn by `js/utils/table_view.js`.
 *
 * bootstrap-table's stylesheet used to supply the container, the toolbar, the
 * Columns menu and the sort indicator, and #273 wrote those. Bootstrap's own
 * `.table .table-bordered .table-hover` supplied the rest — the borders, the
 * cell padding and the hover — and #269 step 6 is what writes that, so this is
 * now the whole of how every list on the site looks.
 *
 * The child combinators are load-bearing rather than tidy, and they are why
 * Bootstrap wrote its own table rules this way. A comment is markdown and a
 * markdown table draws `<td>`s of its own, inside the detail row of the table
 * these rules are for; a descendant selector would put an 8px cell padding and
 * a grey border on those too.
*/
.entry-table-scroll > table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  border: 1px solid var(--border);
}

.entry-table-scroll > table > thead > tr > th,
.entry-table-scroll > table > tbody > tr > th,
.entry-table-scroll > table > tfoot > tr > th,
.entry-table-scroll > table > thead > tr > td,
.entry-table-scroll > table > tbody > tr > td,
.entry-table-scroll > table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: middle;
  border: 1px solid var(--border);
}

.entry-table-scroll > table > thead > tr > th {
  border-bottom-width: 2px;
}

.entry-table-scroll > table > tbody > tr:hover {
  background: var(--surface);
}

.entry-table-scroll {
  overflow-x: auto;
}

/* Links in a cell are not underlined until hovered or focused, like every
 * other link on the site, and that is a decision rather than an omission.
 * #414 underlined them permanently for WCAG 1.4.1 (#398): colour is all that
 * marks them, and --link is under 3:1 against --text in both schemes (2.74
 * light, 1.68 dark), so the colour alone does not pass. #531 took the
 * underline off again because a table of nothing but underlines is the worse
 * page to read. No blue fixes that in the light scheme: 3:1 against #333
 * and 4.5:1 against white cannot both hold. So re-adding the underline is
 * the only fix if the trade is ever revisited, and it should be argued on
 * #531, not slipped in as a bug fix.
*/

.entry-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 10px 0;
}

.entry-table-search {
  width: 200px;
  max-width: 100%;
}

/* A `<details>`, so the menu opens and closes without a line of JavaScript --
 * which is the point, because Bootstrap's dropdown plugin was the only thing
 * on this page that ever called into `bootstrap.min.js`. The summary is styled
 * like the site's own inputs rather than like a `.btn`, for the same reason.
*/
.entry-table-columns {
  position: relative;
}

.entry-table-columns > summary {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: 0px 0px 3px var(--control-edge);
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}

.entry-table-columns > summary::-webkit-details-marker {
  display: none;
}

.entry-table-columns-menu {
  position: absolute;
  right: 0;
  z-index: 1001;
  min-width: 160px;
  max-height: 300px;
  overflow: auto;
  padding: 5px 0;
  text-align: left;
  background: var(--raised-bg);
  border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.entry-table-columns-menu label {
  display: block;
  margin: 0;
  padding: 3px 20px;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
}

.entry-table-columns-menu label:hover {
  background: var(--surface);
}

.entry-table th.sortable {
  cursor: pointer;
  white-space: nowrap;
}

/* The heading's label is a `<button>` since #484, so that a keyboard can sort,
 * and it should look like the text it replaced: none of the site's button
 * chrome, and the weight and alignment of the `th` it sits in. The sort caret
 * stays on the `th`'s `::after`, which follows the button on the same line.
*/
.entry-table th.sortable > button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
}

/* The arrows are Font Awesome's rather than the three base64 PNGs
 * bootstrap-table shipped for them — three more of the masks at the top of
 * this file. The two sorted states change only the glyph, so the rest of the
 * mask comes from the shorthand below them.
*/
.entry-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0.6250em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--icon-sort) no-repeat center / contain;
  mask: var(--icon-sort) no-repeat center / contain;
  margin-left: 6px;
  opacity: 0.3;
}

.entry-table th.sortable.asc::after {
  -webkit-mask-image: var(--icon-sort-up);
  mask-image: var(--icon-sort-up);
  opacity: 0.8;
}

.entry-table th.sortable.desc::after {
  -webkit-mask-image: var(--icon-sort-down);
  mask-image: var(--icon-sort-down);
  opacity: 0.8;
}

.entry-table .entry-table-caret {
  width: 30px;
}

.entry-table .no-records-found td {
  text-align: center;
}

/* The date picker on the entry form, which is litepicker's and brings its own
 * stylesheet: a white box of #333 text whatever the page is. It reads its
 * colours from custom properties, and the three that matter are exactly the
 * light values of three of ours, so pointing them here changes nothing in
 * light and darkens it with the page. Set on the picker rather than on
 * `:root`, where litepicker sets its own -- its <style> is put in at the top
 * of <head>, and a rule on the element itself does not have to care which
 * came first. #523.
*/
.litepicker {
  --litepicker-container-months-color-bg: var(--raised-bg);
  --litepicker-container-months-box-shadow-color: var(--border);
  --litepicker-month-header-color: var(--text);
  --litepicker-day-color: var(--text);
}