/* lists without the browser's indent (Bootstrap sets their margins) */
ol, ul {
    padding: 0;
}

/* the galleries and the large views: the grey behind photos, in either mode (theme.css) */
body.gallery {
    background-color: var(--wlx-image-bg);
}

/* the navbar's links a little apart, and the page's own tab (ownTabs) or menu item marked
   with a background */
.navbar .navbar-nav .nav-link {
    padding-left: .6rem;
    padding-right: .6rem;
}
.navbar .navbar-nav .nav-link.active {
    background-color: var(--wlx-nav-active-bg);
    border-radius: var(--bs-border-radius);
}
/* the navbar's selected and rejected tabs (navbar.scala.html ownTabs) */
.navbar .nav-item.vote-selected > .nav-link {
    color: var(--wlx-selected);
}
.navbar .nav-item.vote-rejected > .nav-link {
    color: var(--wlx-rejected);
}

.region-menu-list>li.region-nomination>a {
    font-style: italic;
}


ul.gallery {
    margin: 2px;
    padding: 2px;
    display: block;
}

li.gallerybox {
    vertical-align: top;
    display: inline-block;
}

li.gallerybox div.thumb {
    text-align: center;
    margin: 5px;
    width: 305px;
    height: 205px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

li.gallerybox div.thumb_small {
      text-align: center;
      margin: 5px;
      width: 160px;
      height: 120px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
  }

img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* the contests table's add row (contests.scala.html): a source wide enough for its placeholder
   in every language ("Категорія або сторінка"), a year of four digits narrow */
.wlx-contests-table .wlx-source-input { min-width: 15rem; }
.wlx-contests-table .wlx-year-input { width: 6rem; }

/* the large view's comments (large/commentsView.scala.html): the column's width up to a
   readable line, starting where the image does (no .large-box padding on the left); the box is
   Bootstrap's form-control, the button below it; a comment keeps its own line breaks */
.large-comments {
    max-width: 40rem;
}
/* both classes: .large-box's padding (below) would otherwise win */
.large-box.large-comments {
    padding-left: 0;
}

.large-comments .msg {
    padding: .5rem .75rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    white-space: pre-line;
}

.imageComment {
    resize: vertical;
}

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--bs-border-color);
    border-left-width: 5px;
    border-radius: 3px;
}
.bs-callout .h4 {
    margin-top: 0;
    margin-bottom: 5px;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout-info {
    border-left-color: var(--bs-info);
}
.bs-callout-info .h4 {
    color: var(--bs-info-text-emphasis);
}

/* A gallery tile whose thumbnail failed to load (a file deleted or renamed on Commons):
   unitegallery.js marks it, sized from the image's data-width/height. A plain grey tile
   instead of the browser's broken-image icon; hovering still shows the file's title. */
.ug-thumb-wrapper.wlx-thumb-failed {
    background-color: var(--wlx-thumb-failed-bg);
}
.ug-thumb-wrapper.wlx-thumb-failed img.ug-thumb-image {
    visibility: hidden;
}
/* The large view's image that failed to load from Wikimedia and from this server (a file
   deleted on Commons): large.scala.html marks its link. The same grey box. */
a.wlx-large-failed {
    display: inline-block;
    position: relative;
    width: 640px;
    max-width: 100%;
    height: 480px;
    background-color: var(--wlx-thumb-failed-bg);
}
a.wlx-large-failed img {
    display: none;
}
/* A file deleted on Commons, in the contest files' gallery (unitegallery.js marks its tile,
   data-deleted) and in its large view's thumbnails: a red frame. The tile's mark links the
   file's page on Commons, above the tile, which opens the large view. */
.ug-thumb-wrapper.ug-tile.wlx-deleted::before, div.thumb_small.wlx-deleted::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid var(--wlx-deleted);
    z-index: 4;
    pointer-events: none;
}
.ug-thumb-wrapper.ug-tile a.wlx-deleted-label {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 7;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
/* A binary round's vote on the juror's own gallery tiles (tile-votes.js), from the file's
   stored vote at load: a frame over the tile's edge, so that no tile or image moves when a
   vote changes it; none unrated. Saturated colours (theme.css --wlx-vote-*) with an inner line
   that parts the frame from a photo as dark or as bright as it is. The thumb of the vote the
   file has (aria-pressed) is ringed in its colour: a click on it undoes the vote. */
.ug-thumb-wrapper.ug-tile.wlx-tile-selected::before, .ug-thumb-wrapper.ug-tile.wlx-tile-rejected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid var(--wlx-vote-selected);
    box-shadow: inset 0 0 0 1px var(--wlx-vote-line);
    z-index: 4;
    pointer-events: none;
}
.ug-thumb-wrapper.ug-tile.wlx-tile-rejected::before {
    border-color: var(--wlx-vote-rejected);
}
.ug-thumb-wrapper.ug-tile .ug-tile-icon[aria-pressed=true] {
    border-radius: 6px;
    background-color: rgba(var(--bs-body-bg-rgb), .85);
    box-shadow: 0 0 0 3px var(--wlx-vote-selected);
}
.ug-thumb-wrapper.ug-tile .ug-tile-icon.ug-icon-reject[aria-pressed=true] {
    box-shadow: 0 0 0 3px var(--wlx-vote-rejected);
}
/* A thumb with the keyboard focus (tile-votes.js): the focus ring outside the pressed one. */
.ug-thumb-wrapper.ug-tile .ug-tile-icon[tabindex]:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: 4px;
}
/* The read-only large view's thumbnails (large/contestFile.scala.html): the link fills the
   box, so a thumbnail that failed to load, hidden, still opens its file; that one is the
   same grey box. */
div.thumb_small a.wlx-box-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
div.thumb_small.wlx-thumb-failed {
    background-color: var(--wlx-thumb-failed-bg);
}
div.thumb_small.wlx-thumb-failed img {
    visibility: hidden;
}
.ug-thumb-wrapper.wlx-thumb-failed::after, a.wlx-large-failed::after, div.thumb_small.wlx-thumb-failed::after {
    content: "\2298";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: var(--wlx-thumb-failed-mark);
    pointer-events: none;
}

/* A POST form in a dropdown menu (sign out, switch contest): its button is a dropdown-item */
.dropdown-menu .navbar-menu-form {
    margin: 0;
}

/* A gallery's region or country menu in the navbar (regionMenu.scala.html): a long list scrolls */
.region-menu .region-menu-list { min-width: 240px; max-height: 70vh; overflow-y: auto; }
.region-menu-status { color: var(--bs-secondary-color); white-space: normal; }
.region-menu-status:empty { display: none; }

/* The pager's page box (pageLinks.scala.html), in a dropdown of the items shown */
/* the box opens under it from its left edge, as wide as its contents (pager-jump.js opens it
   leftwards only if it would leave the window) */
.pagination > .pager-jump-menu { position: relative; }
.dropdown-menu.pager-jump-box { padding: 8px 12px; min-width: 0; }
.pager-jump { white-space: nowrap; }
.pager-jump label { font-weight: normal; margin: 0 6px 0 0; }
/* the number, as wide as its page's digits (pageLinks.scala.html), without the browser's up and
   down arrows: Bootstrap stretches them past the box, which cut off the up one at some zooms;
   the Up and Down keys still step it, and the pager's links step a page */
.pager-jump input[type=number] { display: inline-block; padding: 2px 6px; margin: 0 4px;
    -moz-appearance: textfield; appearance: textfield; }
.pager-jump input[type=number]::-webkit-inner-spin-button,
.pager-jump input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The round form's multiple selects (multi-select.js, Tom Select): the control sums up the
   selection, as bootstrap-multiselect's button did, instead of listing each item */
.wlx-multi .ts-control > .item { display: none; }
.wlx-multi .ts-control { min-height: calc(1.5em + .75rem + 2px); }
.wlx-multi .wlx-select-all { padding: .375rem .75rem; }
.wlx-multi .ts-dropdown .option .tomselect-checkbox { margin-right: .5rem; }
/* Tom Select's Bootstrap 5 theme takes its backgrounds from Bootstrap's variables but keeps a
   few light mode colours (text, the typed text's row, the match highlight, the spinner): the
   mode's own. :root outweighs its rules, which the admin pages load after this file */
:root .ts-dropdown, :root .ts-control, :root .ts-control input { color: var(--bs-body-color); }
:root .ts-dropdown .create { color: var(--bs-secondary-color); }
:root .ts-dropdown .active.create { color: var(--bs-body-color); }
:root .ts-dropdown [data-selectable] .highlight { background: var(--bs-warning-bg-subtle); }
:root .ts-dropdown .spinner::after { border-color: var(--bs-border-color) transparent; }
/* the category fields (category-suggest.js): a text field, without a select's arrow and its room */
:root .wlx-category-suggest.single { --ts-pr-caret: 0px; }
:root .wlx-category-suggest.single .ts-control, :root .wlx-category-suggest.single .ts-control input { cursor: text; }

/* a button inside a link (round stat tables): no underline under the spaces around it */
/* stylelint-disable-next-line plugin/no-unsupported-browser-features -- cosmetic: Firefox 115-120
   drop the rule and underline the spaces; the floor's cosmetic issues aren't fixed (UI §6.1a) */
a:has(> .btn) { text-decoration: none; }


/* unitegallery's tiles preloader is a dark grey spinner: light on the dark grey */
[data-bs-theme=dark] .ug-gallery-wrapper .ug-preloader-trans { filter: invert(1); }

/* a file's rank and rate above its thumbnail (galleryByRate, galleryByRateRegions, showRate),
   in the page's text colour */
.rank-line { margin-bottom: 10px; }

/* the large views (large/large.scala.html, large/contestFile.scala.html): a side column with
   the buttons, stars, the file's details and the files after it, and the image beside it */
.large-view { padding-left: 5px; }
.large-side { min-width: 220px; }
.large-main { margin-left: 5px; margin-top: 10px; }
.large-nav { margin: 10px; }
/* a box in the side column (author, monument, deleted file, comments), and a line (full
   resolution, the jurors' votes, the file's title) */
.large-box, .large-line { margin-right: 5px; padding: 5px; }
.large-box { margin-top: 10px; }
.large-line { margin-top: 5px; }
/* a collapsible section of the side column (large/sideSection.scala.html): its heading, a
   button in the page's text colour, its chevron turned while the section is closed */
.large-section { margin-top: 10px; }
.large-section-toggle {
    display: flex; align-items: center; gap: 4px; width: calc(100% - 5px); padding: 2px 5px;
    border: 0; border-radius: var(--bs-border-radius-sm); background: none;
    color: var(--bs-body-color); font-size: .875rem; font-weight: 600; text-align: start;
}
.large-section-toggle:hover { background-color: var(--wlx-nav-active-bg); }
.large-section-toggle:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 1px; }
.large-section-toggle .bi { transition: transform .2s; }
.large-section-toggle.collapsed .bi { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .large-section-toggle .bi { transition: none; } }

/* raty's stars (large/raty.scala.html) and the static ones (showStar): Bootstrap Icons in the
   mode's star colour. Ten and the cancel icon fit one line of the side column; more (a 1-11 ..
   1-20 round without half stars) wrap onto a second line inside it, as raty adds no spaces
   to break at. scripts/ui-shots.py's large-rated shots check both. */
.large-stars { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.wlx-star { color: var(--wlx-star); font-size: 1rem; line-height: 1; }
.large-stars .wlx-star { margin-right: 1px; }
.large-stars .raty-cancel { color: var(--bs-secondary-color); font-size: 1rem; line-height: 1; margin-right: 2px; }
.large-stars .raty-cancel.bi-x-circle-fill { color: var(--bs-danger); }
/* the number above the stars (large/navigationButtons): the rate, or a hovered star's. On a line
   of its own, as ten stars and the cancel icon fill the column's line; a fixed width, so that a
   longer number while hovering moves nothing. */
.large-rate { margin-top: 10px; line-height: 1.2; }
.large-rate + .large-stars { margin-top: 2px; }
.large-rate-number { display: inline-block; min-width: 4ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.rate-stars { margin-left: 5px; margin-right: 10px; }
/* a rated round's stars on the juror's own gallery tiles (tile-votes.js): a strip at the
   tile's foot in the page's colour, so the stars read on any photo and in both modes. Each
   star and the cancel icon is 1em wide (raty finds a half star by the icon's font size): as
   large as one line of them fits the tile (--wlx-tile-stars: the stars and the cancel icon),
   from 11px to 16px; on a narrower tile they wrap onto a second line. Above the tile's hover
   overlay and its zoom icon. */
.ug-thumb-wrapper.ug-tile .wlx-tile-stars {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3px 4px;
    background-color: rgba(var(--bs-body-bg-rgb), .85);
    cursor: default;
}
.wlx-tile-stars .wlx-star, .wlx-tile-stars .raty-cancel {
    width: 1em;
    font-size: 14px;
    font-size: clamp(11px, calc((100cqw - 8px) / var(--wlx-tile-stars, 11)), 16px);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.wlx-tile-stars .raty-cancel { color: var(--bs-secondary-color); }
.wlx-tile-stars .raty-cancel.bi-x-circle-fill { color: var(--bs-danger); }
/* a rated round's worst mark (✗, tile-votes.js): its button after the stars, as wide as a star,
   red when the file has it; and the ✗ beside a score or a juror's vote */
.wlx-tile-stars .wlx-tile-worst {
    width: 1em;
    font-size: clamp(11px, calc((100cqw - 8px) / var(--wlx-tile-stars, 11)), 16px);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    color: var(--bs-secondary-color);
    margin-left: 2px;
}
.wlx-byrate-stars .wlx-tile-stars .wlx-tile-worst { font-size: 1rem; }
.wlx-tile-stars .wlx-tile-worst.wlx-tile-worst-on { color: var(--bs-danger); }
/* a worst mark (rate -1) where results show it: the vote controls' icon (bi-x-lg), and with a
   count of them beside it, on one line */
.wlx-worst-mark, .wlx-worst-marks { color: var(--bs-danger-text-emphasis); }
.wlx-worst-marks { white-space: nowrap; }
/* the same stars in the juror's own by-rate list (galleryByRate.scala.html), in the line of
   the rank and the rate text, at the static stars' size; a file whose rate changed keeps its
   place until a reload, its rank greyed and dotted (its title says why) */
.wlx-byrate-stars .wlx-tile-stars { display: inline-flex; vertical-align: text-bottom; }
.wlx-byrate-stars .wlx-tile-stars .wlx-star,
.wlx-byrate-stars .wlx-tile-stars .raty-cancel { font-size: 1rem; }
.wlx-rate-changed .rank-line b {
    color: var(--bs-secondary-color);
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the shorthand's line
       and style work in every supported browser; caniuse's "partial" is about thickness and skip */
    text-decoration: underline dotted;
}
/* a binary round's result (binaryVote, binaryTally): a juror's vote, or all the jurors'
   approvals and rejections, in the colours of the navbar's selected and rejected tabs; a vote
   yet to come as a dot in the secondary text colour */
.wlx-vote-selected { color: var(--wlx-selected); }
.wlx-vote-rejected { color: var(--wlx-rejected); }
.wlx-vote-unrated { color: var(--bs-secondary-color); font-weight: bold; }
/* all the jurors' votes on an organiser's tile (tile-votes.js addTally): on the page's colours
   over the photo, at the tile's foot, under the tile's click, which opens the large view */
.ug-thumb-wrapper.ug-tile .wlx-tile-tally {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 6;
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-body-bg-rgb), .85);
    font-weight: normal;
    pointer-events: none;
}

/* the round and user forms' Save and Cancel (snippets/submit, snippets/button) */
.form-action-wide { width: 25%; }

/* a table directly in a .row (admin pages, round statistics): in line with the headings above
   it. Bootstrap's gutter padding for a row's children doesn't apply to a table with collapsed
   borders, so the row's negative margin took it to the page's edge */
.row > .table {
    margin-left: calc(var(--bs-gutter-x) * .5);
    margin-right: calc(var(--bs-gutter-x) * .5);
    width: calc(100% - var(--bs-gutter-x));
}