/* tokens: light and dark (data-bs-theme on <html>, set before the first paint in layouts/template.php) */
:root,
[data-bs-theme=light] {
  --otw-bg: #f5f5f5;
  --otw-surface: #fff;
  --otw-soft: #f4f8fc;
  --otw-soft-hover: #e6eef7;
  --otw-text: #484c4d;
  --otw-text-p: #555a5b;
  --otw-muted: #686c6d;
  --otw-strong: #212529;
  --otw-faint: #adb5bd;
  --otw-border: #dee2e6;
  --otw-line: #e9ecef;
  --otw-nav: #555555;
  --otw-nav-hover: #5f5f5f;
  --otw-gold-soft: #fff8e1;
  --otw-gold-border: #ffe08a;
  --otw-live: rgb(85, 136, 34);
  --otw-up: #198754;
  --otw-down: #dc3545;
  --otw-new: #0d6efd;
  --otw-shadow: rgba(0, 0, 0, 0.08);
  --otw-tint: 8%;
}
[data-bs-theme=dark] {
  --otw-bg: #16191c;
  --otw-surface: #212529;
  --otw-soft: #2b3035;
  --otw-soft-hover: #343a40;
  --otw-text: #dee2e6;
  --otw-text-p: #c4c9ce;
  --otw-muted: #9ba3ab;
  --otw-strong: #f8f9fa;
  --otw-faint: #6c757d;
  --otw-border: #3b4148;
  --otw-line: #343a40;
  --otw-nav: #2b2f33;
  --otw-nav-hover: #3a3f44;
  --otw-gold-soft: #3a3220;
  --otw-gold-border: #6b5a26;
  --otw-live: #8cc152;
  --otw-up: #75b798;
  --otw-down: #ea868f;
  --otw-new: #6ea8fe;
  --otw-shadow: rgba(0, 0, 0, 0.4);
  --otw-tint: 18%;
}

/*
 * zone colour: --zone-color is set on <html> per zone subdomain (OgImage::ZONE_COLORS) and per tile on home;
 * fills (buttons, bars, nav stripe) use it as is, text and lines use --zone-text, lightened in dark mode
 */
:root {
  --zone-color: #555555;
}
:root,
.zone-tile {
  --zone-text: var(--zone-color);
}
[data-bs-theme=dark],
[data-bs-theme=dark] .zone-tile {
  --zone-text: color-mix(in srgb, var(--zone-color) 45%, #fff);
}

body {
  background: var(--otw-bg);
  color: var(--otw-text);
}

h2, .h2 {
  font-size: calc(1.225rem + 0.5vw);
}

p {
  font-size: 1rem;
  color: var(--otw-text-p);
  letter-spacing: 0.03rem;
  margin-bottom: 10px;
}

b, strong {
  font-weight: 700 !important;
}

/* nav */
.navbar,
.navbar ul.dropdown-menu {
  color: #fff;
  background-color: var(--otw-nav);
}

.navbar {
  border-bottom: 3px solid var(--zone-color);
}

/* sponsor of the list (docs/SPONSORS.md): always labelled, never styled like content */
.sponsor-strip {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.sponsor-strip .sponsor-label {
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sponsor-strip .sponsor-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--bs-body-color);
}

/* logos are made for a light background: a white tile keeps them readable in dark mode */
.sponsor-logo {
  max-width: 160px;
  object-fit: contain;
  padding: 2px 6px;
  background: #fff;
  border-radius: 4px;
}

.sponsor-strip .sponsor-policy {
  color: var(--bs-secondary-color);
}

.navbar li.nav-item a,
.navbar li.nav-item a.active,
.navbar li.nav-item a.navbar-brand,
.navbar .dropdown-item,
.navbar .theme-switch .dropdown-toggle,
#nav-search-button {
  color: #fff;
}

.navbar li.nav-item a:hover,
.navbar ul.dropdown-menu a:hover,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #fff;
  background-color: var(--otw-nav-hover);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--zone-color);
}

#nav-search-button {
  line-height: 1.5;
  padding: 0 0.375rem;
}

#nav-search-button .icon {
  width: 18px;
  height: 18px;
}

.theme-switch .dropdown-toggle {
  border: 0;
}

.theme-switch .icon {
  width: 16px;
  height: 16px;
}

/* button: the zone colour */
.btn-primary {
  --bs-btn-bg: var(--zone-color);
  --bs-btn-border-color: var(--zone-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--zone-color) 85%, #fff);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--zone-color) 85%, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--zone-color) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--zone-color) 85%, #000);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--zone-color) 60%, #888);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--zone-color) 60%, #888);
}
.bg-primary {
  background-color: rgb(85, 136, 34) !important;
}

/* pagination */
.pagination {
  --bs-pagination-color: var(--otw-strong);
  --bs-pagination-active-bg: var(--zone-color);
  --bs-pagination-active-border-color: var(--zone-color);
}

/* accordion */
.accordion-button {
  --bs-accordion-active-bg: var(--otw-soft);
  --bs-accordion-active-color: var(--otw-strong);
}

/* home */
.home {
  max-width: 960px;
}

.home-info {
  font-size: 1.2rem;
}
.home-list-title {
  font-size: 1.4rem;
  font-weight: 450;
  letter-spacing: .1rem;
}
td.min {
  width: 1%;
  white-space: nowrap;
}

/* search table */
.trumbowyg-box {
  border-radius: 0.375rem;
}
.trumbowyg-editor-box {
  background-color: var(--otw-surface);
}

.details-box {
  margin: 15px 0;
  background-color: var(--otw-surface);
  padding: 30px 40px;
  border-radius: 5px;
}

.details-box dt {
  color: var(--otw-muted);
  letter-spacing: 0.03rem;
}

.details-box dd {
  color: var(--otw-muted);
}

.details-box p {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.accordion-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* img */

.img-thumbnail {
  width: 102px;
  height: 102px;
  min-width: 102px;
  min-height: 102px;
  padding: 0;
}

/* item images and the zone pictograms (black on transparent) get a light backing in dark mode */
[data-bs-theme=dark] :is(.img-thumbnail, .list-card-image img, .zone-tile-image, .item-vote-logo, .related-item img,
    .my-votes-logo, .winners-logo, .predict-logo, .country-logo, .predict-reveal-list img, .duel-image-icon) {
  background-color: #fff;
}

/* a */

ul a {
  text-decoration: none;
  color: var(--otw-strong);
}

/*
 * icons: one set (Bootstrap Icons; Tumblr from Simple Icons, which Bootstrap Icons lacks), drawn as a mask in
 * currentColor so they follow the text colour and the theme; the element itself stays a normal box (focus ring)
 */
.icon {
  display: inline-flex;
  align-items: stretch; /* Bootstrap's own .icon-link centres, which would leave .icon-link::before 0px high */
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
}
.icon::before {
  content: "";
  flex: 1;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-facebook { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/></svg>'); }
.icon-twitter { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>'); }
.icon-pinterest { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0"/></svg>'); }
.icon-whatsapp { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/></svg>'); }
.icon-telegram { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/></svg>'); }
.icon-tumblr { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"/></svg>'); }
.icon-reddit { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z"/><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165"/></svg>'); }
.icon-discord { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/></svg>'); }
.icon-mail { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg>'); }
.icon-link { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>'); }
.icon-share { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"/></svg>'); }
.icon-search { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>'); }
.icon-theme-auto { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/></svg>'); }
.icon-theme-light { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/></svg>'); }
.icon-theme-dark { --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></svg>'); }

/* share buttons: a row of round icon buttons (item page, country page, vote modal) */
.share-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.25rem;
}
.share-icons .icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  color: var(--otw-strong);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.share-icons .icon:hover,
.share-icons .icon:focus-visible {
  color: var(--zone-text);
  background-color: var(--otw-soft);
}
.share-icons .icon:focus-visible {
  outline: 2px solid var(--zone-text);
  outline-offset: 1px;
}

.share-menu .dropdown-item .icon {
  height: 18px;
  width: 18px;
  pointer-events: none;
}

.share-toggle .icon {
  width: 16px;
  height: 16px;
}


/* map */
#map {
  width: 100%;
  height: 400px;
}

.map-box {
  background-color: var(--otw-surface);
  padding: 5px;
  border-radius: 5px;
}

/* popups in the page colours (dark mode); the map tiles stay as they are */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: var(--otw-surface);
  color: var(--otw-text);
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--otw-muted);
}

/* map page: whole zone on one map */
.map-page #map {
  height: 70vh;
  min-height: 400px;
}

.map-popup {
  min-width: 160px;
}

.map-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}

.map-dot-top3 { background-color: #e0a800; }
.map-dot-top10 { background-color: #0d6efd; }
.map-dot-other { background-color: #6c757d; }
.map-dot-none { background-color: #adb5bd; }

/* countries page: choropleth without tiles, the sea is the background */
.choropleth #map {
  aspect-ratio: 2 / 1;
  min-height: 240px;
  max-height: 70vh;
  background-color: var(--otw-soft);
}

.choropleth-leader { background-color: #e0a800; }
.choropleth-none { background-color: #e9ecef; border: 1px solid #ced4da; }

.choropleth-ramp {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 4px;
}

.choropleth-ramp span {
  width: 18px;
  height: 12px;
}

.choropleth-1 { background-color: #cfe2ff; }
.choropleth-2 { background-color: #9ec5fe; }
.choropleth-3 { background-color: #6ea8fe; }
.choropleth-4 { background-color: #3d8bfd; }
.choropleth-5 { background-color: #0a58ca; }

.choropleth-table {
  max-width: 720px;
  margin: 0 auto;
}

/* country page */
.country-summary {
  max-width: 720px;
  margin: 0 auto;
}

.country-zone .country-logo {
  width: 64px;
}

/* home: countdown to the end of the voting week */
.home-countdown {
  padding: 1.25rem 1rem;
  background-color: var(--otw-surface);
  border: 1px solid var(--otw-border);
  border-radius: 0.5rem;
}
.home-countdown-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--otw-muted);
}
.home-countdown-time {
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--otw-live);
  font-variant-numeric: tabular-nums;
}
.home-countdown-week {
  font-size: 0.9rem;
  color: var(--otw-muted);
  margin-top: 0.25rem;
}

/* home: "This week live" — pulsing dot */
.live-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  margin-right: 0.25em;
  background-color: #dc3545;
  vertical-align: 0.1em;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
  100% { box-shadow: 0 0 0 0.6em rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* home: zone tiles in the zone colour (--zone-color set per tile) with the live leader */
.zone-tile {
  border-top: 4px solid var(--zone-color);
  overflow: hidden;
}
.zone-tile-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  color: var(--zone-text);
  background-color: color-mix(in srgb, var(--zone-color) var(--otw-tint), var(--otw-surface));
  text-decoration: none;
}
.zone-tile-head h3 {
  font-weight: 700;
  color: inherit;
}
.zone-tile-head:hover h3 {
  text-decoration: underline;
}
.zone-tile-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 2px solid var(--zone-color);
  border-radius: 50%;
}
.zone-tile-icon img {
  width: 24px;
  height: 24px;
}
.zone-tile-leader {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.zone-tile-image {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.375rem;
}
.zone-tile-body {
  min-width: 0;
}
.zone-tile-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--zone-text);
}
.zone-tile-name {
  display: block;
  font-weight: 600;
  line-height: 1.25;
  color: var(--otw-strong);
  text-decoration: none;
  overflow-wrap: break-word;
}
.zone-tile-name:hover {
  text-decoration: underline;
}
.zone-tile-votes,
.zone-tile-last {
  font-size: 0.85rem;
  color: var(--otw-muted);
}
.zone-tile-last {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--otw-line);
}
.zone-tile-last a {
  color: var(--otw-text);
}
.zone-tile-empty {
  color: var(--otw-muted);
}

/* countdown */
.voting-closes {
  color: var(--otw-text-p);
}

/* verified tick: item title, list rows, claim box */
.verified {
  color: rgb(29, 155, 240);
  vertical-align: -0.125em;
}

/* list: live place and trend against last week */
.rank-cell {
  width: 1%;
  white-space: nowrap;
}
.rank-place {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--otw-strong);
}
.rank-none {
  color: var(--otw-faint);
}
.trend {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.trend-up { color: var(--otw-up); }
.trend-down { color: var(--otw-down); }
.trend-same { color: var(--otw-muted); }
.trend-new {
  color: var(--otw-new);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* list: card rows — rank, image, name + votes + bar to the leader, vote and share; mobile first */
.list-cards {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.list-card {
  display: grid;
  grid-template-columns: 2.5rem 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background-color: var(--otw-surface);
  border: 1px solid var(--otw-border);
  border-radius: 0.5rem;
}
.list-card-rank {
  text-align: center;
  white-space: nowrap;
}
.list-card-image img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 0.375rem;
}
.list-card-name {
  display: block;
  font-weight: 600;
  line-height: 1.25;
  color: var(--otw-strong);
  text-decoration: none;
  overflow-wrap: break-word;
}
.list-card-name:hover {
  text-decoration: underline;
}
.list-card-meta {
  font-size: 0.8rem;
  color: var(--otw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-card-votes {
  font-size: 0.85rem;
  color: var(--otw-text-p);
  margin-top: 0.25rem;
}
.list-card-votes span {
  font-weight: 600;
  color: var(--otw-strong);
}
.list-card-progress {
  height: 6px;
  margin-top: 0.25rem;
}
/* the leader's bar stays green (.bg-success) */
.list-card-progress .progress-bar {
  background-color: var(--zone-text);
}
.list-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
}
.list-card-actions .vote {
  min-width: 5.5rem;
  min-height: 44px;
  font-weight: 600;
}
.list-card-actions .share-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}
.list-card-actions .share-label {
  /* icon only on phones, the text is for screen readers */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* narrow phones: vote and share go under the name, side by side */
@media (max-width: 399.98px) {
  .list-card {
    grid-template-columns: 2.25rem 48px minmax(0, 1fr);
    grid-template-areas: "rank image body" "rank image actions";
    gap: 0.5rem 0.625rem;
    padding: 0.625rem;
  }
  .list-card-rank { grid-area: rank; }
  .list-card-image { grid-area: image; align-self: start; }
  .list-card-image img {
    width: 48px;
    height: 48px;
  }
  .list-card-body { grid-area: body; }
  .list-card-actions {
    grid-area: actions;
    flex-direction: row;
  }
  .list-card-actions .vote {
    flex: 1;
  }
  .list-card-actions .share-toggle {
    width: 44px;
    height: 44px;
  }
}
@media (min-width: 576px) {
  .list-card {
    grid-template-columns: 3rem 80px minmax(0, 1fr) auto;
    gap: 1rem;
  }
  .list-card-image img {
    width: 80px;
    height: 80px;
  }
  .list-card-name {
    font-size: 1.1rem;
  }
  .list-card-actions {
    flex-direction: row;
    align-items: center;
  }
  .list-card-actions .vote {
    min-width: 7rem;
  }
  .list-card-actions .share-toggle {
    width: auto;
    min-height: 44px;
  }
  .list-card-actions .share-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* item page: rank + trend at the top */
.item-rank {
  padding: 20px 24px;
}
.item-rank-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.item-rank-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
  white-space: nowrap;
}
.item-rank-place .rank-place {
  font-size: 2.25rem;
  line-height: 1.1;
}
.item-rank-place .trend {
  font-size: 0.9rem;
}
.item-rank-votes {
  font-size: 0.9rem;
  color: var(--otw-text-p);
}
.item-rank-votes span {
  font-weight: 600;
  color: var(--otw-strong);
}
.details-box .item-rank-status {
  padding-bottom: 0;
  color: var(--otw-strong);
}
.item-rank-weeks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--otw-line);
  font-size: 0.85rem;
  color: var(--otw-muted);
}
.item-rank-weeks strong {
  color: var(--otw-strong);
}

/* item page: the one vote button — bottom bar on phones, sticky at the top from 768px */
.item-vote-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
  background-color: var(--otw-surface);
  border-top: 1px solid var(--otw-border);
  box-shadow: 0 -2px 8px var(--otw-shadow);
}
.item-vote-logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 0.375rem;
}
.item-vote-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-vote-bar .vote {
  flex: none;
  min-width: 8rem;
  min-height: 48px;
  font-weight: 600;
}
/* room under the page for the bar, toasts above it */
body:has(.item-vote-bar) {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
body:has(.item-vote-bar) .toast-container {
  bottom: calc(4rem + env(safe-area-inset-bottom)) !important;
}
@media (min-width: 768px) {
  .item-vote-bar {
    position: sticky;
    top: 0.5rem;
    margin: 15px 0;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--otw-border);
    border-radius: 5px;
  }
  .item-vote-bar .vote {
    min-width: 12rem;
  }
  body:has(.item-vote-bar) {
    padding-bottom: 0;
  }
  body:has(.item-vote-bar) .toast-container {
    bottom: 0 !important;
  }
}

/* item page: ranking history */
.history-stat {
  background-color: var(--otw-soft);
  border-radius: 5px;
  padding: 10px 14px;
  height: 100%;
}
.history-stat-label,
.history-stat-note,
.history-caption {
  color: var(--otw-muted);
}
/* photo credit under a gallery image (author / licence / source) */
.image-credit {
  color: var(--otw-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.image-credit a {
  color: inherit;
}
.history-stat-label {
  font-size: 0.875rem;
}
.history-stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--otw-strong);
}
.history-stat-note {
  font-size: 0.75rem;
}
.history-chart {
  position: relative;
  height: 220px;
}
.history-chart svg {
  display: block;
}
.history-band { fill: var(--otw-soft); }
.history-grid { stroke: var(--otw-line); stroke-width: 1; }
.history-axis { fill: var(--otw-muted); font-size: 11px; }
.history-line {
  fill: none;
  stroke: var(--zone-text);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.history-dot { fill: var(--zone-text); stroke: var(--otw-surface); stroke-width: 2; }
.history-dot-win { fill: #e0a800; }
.history-guide { stroke: var(--otw-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.history-tip {
  position: absolute;
  pointer-events: none;
  background-color: var(--otw-surface);
  border: 1px solid var(--otw-border);
  border-radius: 5px;
  box-shadow: 0 2px 6px var(--otw-shadow);
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--otw-strong);
}
.history-table summary {
  color: var(--otw-muted);
  cursor: pointer;
}

/* winners: hall of fame and archive */
.winners-logo {
  width: 72px;
}
.winners-champion th,
.winners-champion td {
  background-color: var(--otw-gold-soft);
}

/* my votes: streak and the items voted for from this browser */
.my-votes-streak {
  background-color: var(--otw-gold-soft);
  border-color: var(--otw-gold-border);
}
.my-votes-flame {
  font-size: 2.25rem;
  line-height: 1;
}
.my-votes-flame-off {
  filter: grayscale(1);
  opacity: 0.5;
}
.my-votes-logo {
  width: 80px;
}
.my-votes-table .vote {
  white-space: nowrap;
}

/* item page: related items */
.related-item {
  background-color: var(--otw-soft);
  border-radius: 5px;
  padding: 8px 10px;
  height: 100%;
  color: var(--otw-strong);
  text-decoration: none;
}
.related-item:hover {
  background-color: var(--otw-soft-hover);
}
.related-item img {
  flex-shrink: 0;
  object-fit: cover;
}
.related-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.related-name {
  font-weight: 600;
}
.related-info,
.related-place {
  font-size: 0.8125rem;
  color: var(--otw-muted);
}
.related-info {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* prediction game */
.predict-col > .details-box:first-child {
  margin-top: 0;
}
.predict-logo {
  width: 64px;
}
.predict-table .btn {
  white-space: nowrap;
}
.predict-offer {
  border: 2px solid var(--zone-text);
}
.predict-reveal-list img {
  flex-shrink: 0;
  object-fit: cover;
  padding: 1px;
}
.predict-board td,
.predict-board th {
  white-space: nowrap;
}
.predict-board .predict-me {
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .predict-col .details-box {
    padding: 20px 16px;
  }
  .predict-offer .d-flex {
    flex-wrap: wrap;
  }
}

/* duel mode "This or That": two cards side by side (also on phones), tap one to vote */
.duel {
  max-width: 720px;
}
.duel-cta {
  margin: -0.25rem 0 1rem;
}
.duel-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}
.duel-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: center;
  color: var(--otw-text);
  background: var(--otw-surface);
  border: 2px solid var(--otw-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px var(--otw-shadow);
  transition: transform 0.15s, border-color 0.15s, opacity 0.2s;
}
.duel-card:hover:not(:disabled) {
  border-color: var(--zone-text);
  transform: translateY(-2px);
}
.duel-card:focus-visible {
  outline: 3px solid var(--zone-text);
  outline-offset: 2px;
}
.duel-card:disabled {
  color: var(--otw-text);
}
.duel-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background-color: var(--otw-soft);
}
.duel-image-icon {
  object-fit: contain;
  padding: 20%;
}
.duel-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  padding: 10px 8px 12px;
}
.duel-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--otw-strong);
  overflow-wrap: anywhere;
}
.duel-info,
.duel-place {
  font-size: 0.8rem;
  color: var(--otw-muted);
}
.duel-result {
  min-height: 1.5em;
  font-weight: 600;
  color: var(--otw-up);
}
.duel-or {
  align-self: center;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--otw-muted);
}
.duel-picked {
  border-color: var(--otw-up);
  transform: scale(1.03);
}
.duel-refused {
  border-color: var(--otw-faint);
}
.duel-refused .duel-result {
  color: var(--otw-muted);
}
.duel-other {
  opacity: 0.45;
}
@keyframes duel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.duel-in .duel-card {
  animation: duel-in 0.25s ease-out;
}
@media (max-width: 399.98px) {
  .duel-pair {
    gap: 4px;
  }
  .duel-or {
    font-size: 0.7rem;
  }
  .duel-name {
    font-size: 0.95rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .duel-card {
    transition: none;
  }
  .duel-in .duel-card {
    animation: none;
  }
}

/* Pro profile (docs/PRO.md): owner's dashboard bars, official box on the item page */
.pro-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  border-bottom: 1px solid var(--otw-border);
}
.pro-bar {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  outline: none;
}
.pro-bar > span {
  display: block;
  width: 100%;
  min-height: 1px;
  background-color: var(--zone-color, #555);
  border-radius: 4px 4px 0 0;
}
.pro-bar:hover > span,
.pro-bar:focus-visible > span {
  opacity: 0.75;
}
.pro-bar:hover::after,
.pro-bar:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background-color: var(--otw-surface);
  color: var(--bs-body-color);
  border: 1px solid var(--otw-border);
  border-radius: 5px;
  box-shadow: 0 2px 6px var(--otw-shadow);
  padding: 4px 8px;
  font-size: 0.8rem;
  white-space: nowrap;
}
.pro-bar:first-child:hover::after,
.pro-bar:first-child:focus-visible::after {
  left: 0;
  transform: none;
}
.pro-bar:last-child:hover::after,
.pro-bar:last-child:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}
.pro-bars-hours {
  height: 80px;
}
.pro-official {
  border-left: 4px solid var(--pro-color, var(--zone-color, #555));
}
.pro-official .pro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}