/* Creator map viewer: shared by /creator-map (the tool), /maps/<slug> (a
   published map) and the HTML export. */
/* The site's own tokens: constants/theme.ts and design/og-image.html. */
:root {
  --ground: linear-gradient(160deg, #E8F0FB 0%, #EDF1F6 52%, #F5EDE0 100%);
  --card: #ffffff; --soft: #F4F6FA; --ink: #141A26; --slate: #6C7A93; --faint: #94A3B8;
  --line: #DDE6F4; --hair: rgba(10, 15, 30, 0.08);
  --blue: #1D4ED8; --blue-mid: #3B6EF0; --blue-deep: #16358F; --blue-soft: #EFF3FF;
  --ok: #129D61; --warn: #E8A812; --err: #E5484D;
  --lift: 0 4px 0 rgba(30, 58, 138, .07);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #EDF1F6; background-image: var(--ground); background-attachment: fixed; color: var(--ink); font: 14px/1.5 Poppins, system-ui, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.ft-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none !important; }
.ft-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--blue-mid), var(--blue)); display: grid; place-items: center; box-shadow: 0 3px 0 var(--blue-deep); flex: none; }
.ft-word { font: 900 21px/1 Archivo, sans-serif; letter-spacing: -.7px; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 800 14px/1 Archivo, sans-serif; letter-spacing: -.1px; color: #fff !important; text-decoration: none !important;
  padding: 11px 16px; border-radius: 12px; border: 0; border-top: 2px solid rgba(255,255,255,.28); cursor: pointer;
  background: linear-gradient(180deg, var(--blue-mid), var(--blue)); box-shadow: 0 4px 0 var(--blue-deep); transition: transform .08s, box-shadow .08s; }
.ft-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-deep); }

/* ---- Public viewer (also what the export contains) ---- */
.cm { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
.cm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
/* Language picker (maps with translations only): the current flag, a menu of the others. */
.cm-lang { position: relative; margin-left: auto; z-index: 1100; }
.cm-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: 800 13px/1 Archivo, sans-serif; cursor: pointer; }
.cm-lang-btn b { font-size: 10px; opacity: .6; }
.cm-flag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.cm-flag svg { display: block; width: 100%; height: 100%; }
.cm-lang-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; padding: 6px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.cm-lang-menu[hidden] { display: none; }
.cm-lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 700 14px/1 Archivo, sans-serif; text-align: left; cursor: pointer; }
.cm-lang-menu button:hover, .cm-lang-menu button[aria-current="true"] { background: var(--blue-soft); }
body.cm-theme-xmas .cm-lang-btn, body.cm-theme-xmas .cm-lang-menu { border-color: var(--gold); }
@media (max-width: 760px) {
  .cm-lang-btn span { display: none; }
}
.cm-head { display: flex; gap: 16px; align-items: center; margin: 0 20px 14px; padding: 16px 18px; background: var(--card); border: 2px solid var(--line); border-radius: 20px; box-shadow: var(--lift); }
.cm-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: var(--blue-soft); flex: none; border: 2px solid var(--line); }
.cm-avatar-city { display: grid; place-items: center; font-size: 30px; line-height: 1; }
.cm-title { font: 900 24px/1.1 Archivo, sans-serif; letter-spacing: -.8px; margin: 0; }
.cm-title em { font-style: normal; color: var(--blue); }
.cm-sub { color: var(--slate); margin: 4px 0 0; font-size: 13px; }
.cm-stats { margin-left: auto; display: flex; gap: 8px; }
.cm-stat { background: var(--soft); border-radius: 14px; padding: 8px 14px; min-width: 76px; text-align: center; }
.cm-stat b { display: block; font: 900 20px/1.1 Archivo, sans-serif; color: var(--blue); }
.cm-stat span { color: var(--slate); font-size: 11px; font-weight: 500; }
.cm-body { display: grid; grid-template-columns: 350px 1fr; gap: 14px; min-height: 0; padding: 0 20px 20px; }
.cm-list, .cm-map { background: var(--card); border: 2px solid var(--line); border-radius: 20px; box-shadow: var(--lift); overflow: hidden; }
.cm-list { overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(20, 26, 38, .22) transparent; }
/* Older Chrome and Safari: a thin rounded thumb, no grey track or arrows. */
.cm-list::-webkit-scrollbar { width: 8px; }
.cm-list::-webkit-scrollbar-track { background: transparent; }
.cm-list::-webkit-scrollbar-thumb { background: rgba(20, 26, 38, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.cm-map { min-height: 300px; }
.cm-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--card); z-index: 2; }
.cm-chip { border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 4px 11px; font: 500 12px Poppins, sans-serif; cursor: pointer; }
.cm-chip[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.cm-group { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--hair); background: none; cursor: pointer; text-align: left; font: 700 12px Archivo, sans-serif; color: var(--ink); text-transform: uppercase; letter-spacing: 1.1px; }
.cm-group:hover { background: var(--soft); }
.cm-group span:first-child { flex: 1; }
.cm-count { font: 800 12px Archivo, sans-serif; color: var(--blue); background: var(--blue-soft); border-radius: 99px; padding: 2px 9px; letter-spacing: 0; }
.cm-chev { color: var(--slate); font-size: 18px; line-height: 1; transition: transform .15s; }
.cm-group[aria-expanded="true"] .cm-chev { transform: rotate(90deg); }
.cm-place { display: flex; gap: 11px; align-items: center; padding: 8px 16px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; color: inherit; font: inherit; }
.cm-place:hover { background: var(--soft); }
.cm-ico { font-size: 17px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--blue-soft); flex: none; }
.cm-pname { font-weight: 600; }
.cm-pmeta { color: var(--slate); font-size: 12px; }
.cm-foot { padding: 16px; color: var(--slate); font-size: 12px; border-top: 1px solid var(--hair); margin-top: 8px; }
/* Header button on one line; on the narrowest phones the logo mark alone makes room for it. */
.cm-bar .ft-btn { white-space: nowrap; }
@media (max-width: 380px) { .cm-bar .ft-word { display: none; } }
/* "Get the app" card under the list, as on a shared trip. */
.cm-promo { margin: 0 16px 20px; padding: 16px; text-align: center; border-radius: 16px; background: var(--card); border: 2px solid var(--line); }
.cm-promo b { display: block; font: 900 16px/1.2 Archivo, sans-serif; color: var(--ink); }
.cm-promo p { margin: 6px 0 12px; color: var(--slate); font-size: 13px; line-height: 1.4; }
.cm-stores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cm-store span { text-align: left; }
/* A city badge's flag fills the round avatar. */
.cm-avatar-city .cm-flag-round { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.cm-avatar-city .cm-flag-round svg { display: block; width: 100%; height: 100%; }
.cm-store { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff !important; text-decoration: none !important; font: 800 14px/1.1 Archivo, sans-serif; }
.cm-store small { display: block; font: 600 10px/1.2 Archivo, sans-serif; opacity: .8; }
.cm-pin { position: relative; width: 38px; height: 44px; }
.cm-pin svg { position: absolute; inset: 0; z-index: 0; filter: drop-shadow(0 2px 2px rgba(20,26,38,.25)); }
.cm-pin span { z-index: 1; color: var(--ink); position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 16px; line-height: 22px; }
.cm-cluster { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, var(--blue-mid), var(--blue)); color: #fff; font: 800 14px Archivo, sans-serif; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(59,110,240,.28), 0 3px 8px rgba(20,26,38,.25); }
.leaflet-popup-content { font: 13px/1.45 Poppins, system-ui, sans-serif; margin: 14px 16px; }
.leaflet-popup-content-wrapper { border-radius: 16px; }
.pop-name { font: 800 16px/1.2 Archivo, sans-serif; letter-spacing: -.3px; }
.pop-meta { color: var(--slate); margin: 3px 0 8px; font-size: 12px; }
.pop-when { margin: 0 0 10px; display: grid; gap: 2px; font-size: 12.5px; }
.pop-when span { color: var(--slate); }
.pop-note { margin: 0 0 10px; padding: 8px 10px; background: var(--blue-soft); border-radius: 10px; font-size: 12.5px; }
.pop-links { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.pop-remove { margin-top: 10px; padding: 6px 10px; border: 1.5px solid #F3C2C2; border-radius: 99px; background: #FFF5F5; color: #C0392B; font: 600 12px Poppins, sans-serif; cursor: pointer; }
@media (max-width: 760px) {
  .cm-bar { padding: 12px 16px; }
  .cm-head { flex-wrap: wrap; margin: 0 16px 12px; }
  .cm-stats { margin-left: 0; width: 100%; }
  .cm-stat { flex: 1; min-width: 0; }
  /* Capped so a world-wide map can fill the frame and still fit the width. */
  .cm-body { grid-template-columns: 1fr; grid-template-rows: min(55vh, 420px) auto; padding: 0 16px 16px; }
  .cm-map { order: -1; }
  .cm-list { overflow: visible; }
}

/* The Mapbox wordmark, which Mapbox requires on maps drawn with its tiles.
   Taken as is from mapbox-gl's own stylesheet. Hidden when the map falls back
   to OpenFreeMap (cm-viewer.js removes the class). */
.cm-mapbox-logo { display: block; width: 88px; height: 23px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%220.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%220.9%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* ---- Event maps: browse by date (places with segs) ---- */
.cm-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 12px 6px; padding: 4px; background: var(--soft); border-radius: 12px; }
.cm-view { border: 0; background: none; border-radius: 9px; padding: 8px 4px; min-height: 36px; font: 700 12px Archivo, sans-serif; color: var(--slate); cursor: pointer; }
.cm-view[aria-pressed="true"] { background: var(--card); color: var(--blue); box-shadow: 0 1px 3px rgba(20,26,38,.12); }
.cm-dgroup { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 6px; font: 700 11.5px Archivo, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--ink); }
.cm-tag { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 7px; border-radius: 99px; font: 700 10px Poppins, sans-serif; }
.cm-tag-wk { background: #E7F4EC; color: #1F7A4D; }
.cm-tag-tbc { background: #FFF3D6; color: #8A5A00; }
.cm-tag-soon { background: var(--soft); color: var(--slate); }
.cm-none { margin: 4px 16px 8px; color: var(--slate); font-size: 12.5px; }
.cm-daybar { display: flex; align-items: center; gap: 6px; margin: 8px 12px 4px; }
.cm-step { width: 40px; height: 40px; flex: none; border: 2px solid var(--line); background: var(--card); border-radius: 10px; font: 700 20px/1 Archivo, sans-serif; color: var(--ink); cursor: pointer; }
.cm-pick { position: relative; flex: 1; height: 40px; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 10px; font: 800 14px Archivo, sans-serif; color: var(--blue); cursor: pointer; }
.cm-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cm-daychips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 12px 4px; }
.cm-daychips .cm-chip { min-height: 32px; }
.cm-cal { padding: 8px 12px 12px; }
.cm-cal-axis, .cm-cal-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
.cm-cal-months { position: relative; height: 16px; font: 700 10.5px Archivo, sans-serif; color: var(--slate); }
.cm-cal-months span { position: absolute; top: 0; }
.cm-cal-row { width: 100%; border: 0; background: none; padding: 3px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cm-cal-row:hover { background: var(--soft); }
.cm-cal-name { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-cal-lane { position: relative; height: 14px; border-radius: 7px; background: var(--soft); }
.cm-cal-lane em { position: absolute; left: 6px; top: -1px; font-size: 10.5px; font-style: normal; color: var(--slate); }
.cm-span { position: absolute; top: 0; height: 14px; border-radius: 7px; min-width: 4px; }
.cm-span-d { background: #1F8A4C; }
.cm-span-w, .cm-span-x { background: #6BBF8C; border-radius: 3px; }
.cm-span-t { background: repeating-linear-gradient(45deg, #E9B949 0 4px, #FBE7B8 4px 8px); }
.cm-cal-mark, .cm-cal-today { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; }
.cm-cal-mark { background: #C8102E; opacity: .55; }
.cm-cal-today { background: var(--blue); }
.cm-cal-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 11px; color: var(--slate); }
.cm-cal-key i { display: inline-block; width: 16px; height: 8px; border-radius: 4px; margin-right: 4px; vertical-align: 0; }
.cm-cal-key .cm-key-mark { width: 2px; height: 10px; background: #C8102E; }
.cm-cal-key .cm-key-today { width: 2px; height: 10px; background: var(--blue); }

/* ---- Christmas theme (data.theme = 'xmas'): "Pine Night Deluxe" ----
   From the feedtrip xmas kit. A pine-green night, falling snow, a hand-drawn
   garland, an illustrated village behind the header, snow caps and a bow on
   the header card, glass-bauble pins and wreath clusters. The decorations
   (cm-xmas-deco.js) are aria-hidden and click-through; cards stay white and
   the map tiles stay the normal street map. Nothing moves under reduced
   motion. */
html:has(> body.cm-theme-xmas) { background: #0B2419; }
body.cm-theme-xmas {
  --ground: radial-gradient(520px 320px at 86% 4%, rgba(255,236,180,.10), transparent 70%), radial-gradient(1200px 700px at 10% 0, #174A35 0, transparent 65%), linear-gradient(#0A1F16, #0F3022 900px, #0B2419);
  --blue: #C8102E; --blue-mid: #E23A3A; --blue-deep: #8E0B20; --blue-soft: #FBF6E3; --line: #EFE7CC;
  --gold: #D4AF37;
  background-color: #0B2419;
}
body.cm-theme-xmas .cm { position: relative; z-index: 1; grid-template-rows: auto auto auto 1fr; overflow-x: hidden; }
body.cm-theme-xmas .cm-bar { position: relative; z-index: 3; padding-top: 40px; }
body.cm-theme-xmas .ft-word { color: #fff; }
/* The feedtrip mark and the "Make your own map" button keep the brand blue. */
body.cm-theme-xmas .ft-mark { background: linear-gradient(150deg, #3B6EF0, #1D4ED8); box-shadow: 0 3px 0 #16358F, 0 0 0 2px var(--gold); }
body.cm-theme-xmas .ft-btn { background: linear-gradient(180deg, #3B6EF0, #1D4ED8); box-shadow: 0 4px 0 #16358F; }
body.cm-theme-xmas .cm-head, body.cm-theme-xmas .cm-list, body.cm-theme-xmas .cm-map { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(212,175,55,.14), 0 18px 44px rgba(0,0,0,.45); }
body.cm-theme-xmas .cm-body { position: relative; z-index: 2; }
body.cm-theme-xmas .cm-list { scrollbar-color: rgba(212, 175, 55, .7) transparent; }
body.cm-theme-xmas .cm-list::-webkit-scrollbar-thumb { background-color: rgba(212, 175, 55, .7); }

/* Decoration layer: garland across the top, snowy ground at the bottom. */
.cm-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cm-garland2 { position: absolute; left: 0; right: 0; top: 0; height: 64px; }
.cm-ground2 { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; }
.cm-garland2 svg, .cm-ground2 svg, .cm-cap svg, .cm-bow svg, .cm-mapgarland svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes cm-bulb { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes cm-twinkle { 0% { opacity: .15; } 100% { opacity: 1; } }
@keyframes cm-glow { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes cm-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.cm-garland2 .tw, .cm-mapgarland .tw { animation: cm-bulb 2.3s ease-in-out infinite alternate; }
.cm-garland2 .tw:nth-of-type(3n), .cm-mapgarland .tw:nth-of-type(3n) { animation-duration: 3.1s; animation-delay: -1.2s; }
.cm-garland2 .tw:nth-of-type(4n+1), .cm-mapgarland .tw:nth-of-type(4n+1) { animation-duration: 1.9s; animation-delay: -.6s; }
.cm-ground2 .tw { animation: cm-twinkle 2.6s ease-in-out infinite alternate; }

/* Falling snow: irregular flakes in two coprime tiles so no grid shows. */
@keyframes cm-fall-317 { to { transform: translateY(317px); } }
@keyframes cm-fall-431 { to { transform: translateY(431px); } }
body.cm-theme-xmas::before, body.cm-theme-xmas::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
body.cm-theme-xmas::before {
  top: -317px; background-size: 317px 317px; animation: cm-fall-317 27s linear infinite;
  background-image: radial-gradient(circle at 23px 41px, rgba(255,255,255,.95) 0 1.5px, transparent 2.1px), radial-gradient(circle at 97px 188px, rgba(255,255,255,.8) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 151px 72px, rgba(255,255,255,.9) 0 1.8px, transparent 2.4px), radial-gradient(circle at 214px 263px, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 268px 129px, rgba(255,255,255,.9) 0 1.4px, transparent 2px), radial-gradient(circle at 58px 296px, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 189px 9px, rgba(255,255,255,.8) 0 1.1px, transparent 1.7px), radial-gradient(circle at 302px 221px, rgba(255,255,255,.85) 0 1.6px, transparent 2.2px);
}
body.cm-theme-xmas::after {
  top: -431px; background-size: 431px 431px; opacity: .7; filter: blur(.9px); animation: cm-fall-431 43s linear infinite;
  background-image: radial-gradient(circle at 71px 113px, #fff 0 2.4px, transparent 3.2px), radial-gradient(circle at 333px 47px, #fff 0 2px, transparent 2.8px),
    radial-gradient(circle at 196px 291px, #fff 0 2.8px, transparent 3.6px), radial-gradient(circle at 404px 362px, #fff 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 12px 388px, #fff 0 2.2px, transparent 3px), radial-gradient(circle at 262px 176px, #fff 0 1.7px, transparent 2.5px);
}

/* The village behind the header; the header card sits in its snow. */
.cm-scene { position: relative; z-index: 1; height: 200px; margin: -70px 0 -84px; pointer-events: none; }
.cm-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The moon is drawn here rather than in the artwork: the artwork is cropped
   from the top by an amount that grows with the screen width, which cut the
   moon on wide screens. Here it keeps one place, clear of the buttons. The
   artwork's own moon stays for the link preview picture, which shows it whole. */
.cm-scene .cm-moon { display: none; }
.cm-scene::before { content: ''; position: absolute; left: 68%; top: 28px; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #F3E2A8 0 5px, transparent 5.5px), radial-gradient(circle at 63% 66%, #F3E2A8 0 3.5px, transparent 4px), #FFF3C4;
  box-shadow: 0 0 24px 10px rgba(255, 238, 190, .22), 0 0 70px 40px rgba(255, 238, 190, .08); }
/* Wide screens show the artwork larger, roofs higher up: the moon rises above them. */
@media (min-width: 1500px) { .cm-scene::before { top: 4px; } }
.cm-scene .tw { animation: cm-twinkle 2.4s ease-in-out infinite alternate; }
.cm-scene .tw:nth-of-type(3n) { animation-delay: -.9s; animation-duration: 3s; }
.cm-scene .tw:nth-of-type(3n+1) { animation-delay: -1.7s; animation-duration: 2s; }
.cm-scene .star { transform-box: fill-box; transform-origin: center; animation: cm-glow 1.8s ease-in-out infinite alternate; }

/* Header: snow cap, a vertical ribbon with a bow, the last title word in serif italic. */
body.cm-theme-xmas .cm-head { position: relative; z-index: 2; overflow: visible; padding-right: 96px; background: #fff; }
body.cm-theme-xmas .cm-head::after { content: ''; position: absolute; z-index: 0; top: -2px; bottom: -2px; right: 40px; width: 24px; background: linear-gradient(90deg, #D4AF37 0 3px, #C8102E 3px 21px, #D4AF37 21px); }
.cm-cap { position: absolute; z-index: 3; left: 10px; right: 10px; top: -21px; height: 30px; pointer-events: none; overflow: hidden; }
/* The cap's drawing is wider than the card: cut at the card's edges, never past them. */
.cm-cap svg { overflow: hidden; }
.cm-bow { position: absolute; z-index: 4; top: -22px; right: 18px; width: 68px; height: 46px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
body.cm-theme-xmas .cm-stats { position: relative; z-index: 1; }
body.cm-theme-xmas .cm-title { font-size: 30px; }
body.cm-theme-xmas .cm-title em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.12em; letter-spacing: -.01em; padding: 0 .04em; color: #C8102E;
  background: linear-gradient(transparent 78%, rgba(212,175,55,.45) 78% 92%, transparent 92%); }
body.cm-theme-xmas .cm-avatar-city { width: 72px; height: 72px; font-size: 34px; border: 3px solid var(--gold); background: radial-gradient(circle at 40% 35%, #FFFDF2, #FBEFC4);
  box-shadow: 0 0 0 6px rgba(212,175,55,.18), 0 6px 16px rgba(0,0,0,.18); transform-origin: 50% -30%; animation: cm-swing 4.5s ease-in-out infinite; }
body.cm-theme-xmas .cm-stat { background: #FBF6E3; border: 1px solid #EADBA6; }
body.cm-theme-xmas .cm-stat b { color: #1E6B45; }
body.cm-theme-xmas .cm-count { background: #FBF6E3; color: #7A5C0E; }
body.cm-theme-xmas .cm-view[aria-pressed="true"] { background: #1E6B45; color: #fff; }
body.cm-theme-xmas .cm-foot { color: #55625C; }

/* List icons: glass baubles, the colour by area. */
body.cm-theme-xmas .cm-ico { position: relative; background: none; font-size: 0; --ball: #C8102E; --ball-dk: #7E0716; }
body.cm-theme-xmas .cm-ico[data-area="Flanders"] { --ball: #D9AE2B; --ball-dk: #8A6608; }
body.cm-theme-xmas .cm-ico[data-area="Brussels"] { --ball: #2E8B57; --ball-dk: #0F4A2C; }
body.cm-theme-xmas .cm-ico::before { content: ''; width: 26px; height: 26px; margin-top: 6px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 7%, var(--ball) 32%, var(--ball-dk) 100%); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
body.cm-theme-xmas .cm-ico::after { content: ''; position: absolute; top: 4px; left: 50%; width: 9px; height: 6px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, #B8901C, #F3DC8A, #B8901C); }

/* Map pins: baubles with a pointer; clusters: wreaths. */
.cm-bauble { position: relative; width: 30px; height: 40px; --ball: #E8323F; --ball-dk: #7E0716; }
.cm-bauble[data-area="Flanders"] { --ball: #E2BC45; --ball-dk: #8A6608; }
.cm-bauble[data-area="Brussels"] { --ball: #3BA06A; --ball-dk: #0F4A2C; }
.cm-bauble::before { content: ''; position: absolute; left: 1px; right: 1px; top: 5px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  background: radial-gradient(circle at 34% 30%, #fff 0 7%, var(--ball) 30%, var(--ball-dk) 100%); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.cm-bauble::after { content: ''; position: absolute; top: 1px; left: 50%; width: 10px; height: 6px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, #B8901C, #F3DC8A, #B8901C); }
/* The pointer under the bauble, on the marker's anchor. */
.cm-bauble i { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff; }
body.cm-theme-xmas .cm-cluster { box-shadow: none !important; color: #0E3B26; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
  background: radial-gradient(circle at 50% 7%, #E8323F 0 3.5px, transparent 4px), radial-gradient(circle at 92% 52%, #E8323F 0 3.5px, transparent 4px),
    radial-gradient(circle at 16% 80%, #E8323F 0 3.5px, transparent 4px), radial-gradient(circle at 80% 86%, #E2BC45 0 3px, transparent 3.5px),
    radial-gradient(circle at 9% 34%, #E2BC45 0 3px, transparent 3.5px), radial-gradient(circle, #fff 0 46%, transparent 47%),
    repeating-conic-gradient(#1E6B45 0 9deg, #2E8B57 9deg 18deg, #174F33 18deg 27deg);
  border: 0; -webkit-mask: radial-gradient(circle, #000 70%, transparent 71%); mask: radial-gradient(circle, #000 70%, transparent 71%); }

/* The map card: a pine garland on its top edge, the zoom below it. */
.cm-mapgarland { position: absolute; z-index: 450; left: -10px; right: -10px; top: -6px; height: 38px; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
body.cm-theme-xmas .leaflet-top.leaflet-left { top: 24px; }
body.cm-theme-xmas .leaflet-popup-content-wrapper { border-radius: 14px; border-top: 4px solid #C8102E; box-shadow: 0 0 0 2px #D4AF37, 0 14px 34px rgba(0,0,0,.35); }

@media (max-width: 760px) {
  body.cm-theme-xmas .cm-bar { padding-top: 30px; }
  .cm-garland2 { height: 48px; }
  .cm-ground2 { height: 66px; }
  .cm-scene { height: 130px; margin: -40px 0 -52px; }
  .cm-scene::before { left: 8%; top: 18px; width: 34px; height: 34px; }
  body.cm-theme-xmas .cm-head { padding-right: 54px; }
  body.cm-theme-xmas .cm-head::after { right: 20px; width: 18px; background: linear-gradient(90deg, #D4AF37 0 2px, #C8102E 2px 16px, #D4AF37 16px); }
  .cm-bow { width: 52px; height: 36px; right: 3px; top: -18px; }
  .cm-cap { top: -18px; height: 26px; }
  body.cm-theme-xmas .cm-title { font-size: 26px; }
  body.cm-theme-xmas .cm-avatar-city { width: 58px; height: 58px; font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cm-theme-xmas *, body.cm-theme-xmas *::before, body.cm-theme-xmas *::after, body.cm-theme-xmas::before, body.cm-theme-xmas::after { animation: none !important; }
}