/* 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: #333;
  background: #fff;
}

/* 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;
}

a {
  color: #0e9ce0;
  text-decoration: none;
}

/* The one deliberate difference in this change. Bootstrap darkened a hovered
 * link to #23527c, which is its own #337ab7 link colour darkened -- and the
 * site has overridden that colour with #0e9ce0 since long before this, so
 * every hover was landing on a navy belonging to a palette nothing else here
 * uses. This is the same darkening applied to the colour the links actually
 * are.
*/
a:hover,
a:focus {
  color: #0b7cb3;
  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 #eee;
}

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 #eee;
}

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: #c7254e;
  background: #f9f2f4;
  border-radius: 4px;
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333;
  word-break: break-all;
  overflow-wrap: break-word;
  background: #f5f5f5;
  border: 1px solid #ccc;
  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: #ccc;
}
/* `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: #ccc;
  -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;
}

.detail-icon {
  display: block;
  text-align: center;
}

.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: white;
}

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

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 #ddd;
}

.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 #ddd;
}

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

.entry-table-scroll > table > tbody > tr:hover {
  background: #f5f5f5;
}

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

.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 rgba(0, 0, 0, 0.5);
  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: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  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: #f5f5f5;
}

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

/* 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;
}