/* DoveHaVinto: one stylesheet for the map and for the article pages (municipality, info, statistics).
   Type: Fraunces for headlines and amounts, Inter for everything else, both self-hosted so the site makes no external request. */

@font-face {
  font-family: Inter; src: url(/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Fraunces; src: url(/fonts/fraunces-latin.woff2) format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Fraunces; src: url(/fonts/fraunces-latin-ext.woff2) format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #faf8f3;            /* warm paper */
  --surface: #fff;
  --surface-2: #f4f1e9;
  --ink: #1a1714;
  --ink-soft: #4a453e;
  --muted: #7a746c;
  --line: #e9e3d8;
  --line-strong: #dbd3c4;
  --gold-ink: #d9a000;      /* the top rung as type: two steps down from the fill so it can be read on paper,
                               still saturation 100 and value 85, so gold and not the old brown. Night keeps #ffc300. */
  --gold: #ffc300;          /* the 1M+ rung: every accent on the page is the head of the ramp */
  /* Amount ramp: one warm gold sequence, deepest for the biggest wins and paler as the prize falls, so the strongest ink on
     the map belongs to the wins the site is about. Measured against the day basemap (#f8f4f0) the contrast falls in order:
1.47, 1.36, 1.27, 1.19, 1.12. One hue (46-48) at full value throughout: only the saturation falls, 100% at the
     top rung to 46% at the bottom, so the ramp reads as one gold getting paler and never as a second colour. The window
     is narrow because saturated gold is intrinsically light (#ffc300 sits at L 0.60) while the paper is at 0.91: below
     L 0.81 a band stops being visible at all, which is what sets the bottom of the scale.
     rgba(255,195,0) and --gold carry the top rung everywhere else on the page, so every accent echoes the filters.
     Every step sits at hue 41-47, gold rather than orange: the top band used to be hue 36 and the night ramp ended in
     brown (#a9683e, #836048), which read as mud at marker size.
     No purple at the bottom: in Western use violet reads as luxury, and putting it under the millions inverts the meaning. */
  --b1000000: #ffc300; --b500000: #ffce08; --b100000: #ffd83b; --b50000: #ffe066; --b20000: #ffe88a; --muni: #3a8f7a;
  --m1000000: var(--b1000000); --m500000: var(--b500000); --m100000: var(--b100000); --m50000: var(--b50000); --m20000: var(--b20000);
  --on-light: #3a2a05;      /* text on the chips, which always carry the day ramp */
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(26,23,20,.05), 0 1px 3px rgba(26,23,20,.05);
  --shadow-md: 0 6px 20px rgba(26,23,20,.10);
  --shadow-lg: 0 16px 44px rgba(26,23,20,.18);
  --sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: Fraunces, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow-x: hidden; }
body {
  font: 15px/1.5 var(--sans); color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-optical-sizing: auto; }
button, input, select, textarea { font: inherit; }
::selection { background: rgba(255,195,0,.35); }

/* ---- header ------------------------------------------------------------------------------------------------------ */
.top { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.4px; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--gold-ink); }
.top nav { margin-left: auto; display: flex; gap: 14px; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 4px 2px; border-bottom: 2px solid transparent; }
.top nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.search { position: relative; flex: 1; min-width: 0; max-width: 400px; } /* poco oltre la "e" di "regione", senza i puntini di sospensione */
.search input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a746c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px 50%; background-size: 16px;
}
.search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,195,0,.2); }
.suggestions {
  position: absolute; top: 100%; left: 0; right: 0; margin: 6px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 1200;
}
.suggestions li { padding: 8px 12px; cursor: pointer; }
.suggestions li:hover, .suggestions li.active { background: var(--surface-2); }
.suggestions small { color: var(--muted); margin-left: 6px; }

/* ---- hero -------------------------------------------------------------------------------------------------------- */
.hero {
  display: flex; align-items: center; gap: 26px; padding: 13px 18px;
  background: linear-gradient(100deg, #fffdf6 0%, var(--bg) 55%); border-bottom: 1px solid var(--line);
}
.hero h1 { margin: 0; font-size: clamp(17px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.3px; line-height: 1.25; }
.hero h1 b { color: var(--gold-ink); font-weight: 900; }
.hero p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; max-width: 62ch; }
/* the counters are context and never change: one small line each, right-aligned before the fresh win */
.hero-kpis { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
.hero-kpis div { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hero-kpis b { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* the only thing on the page that changes between two visits, so it carries the weight the counters used to have */
.hero-latest {
  display: flex; align-items: center; gap: 12px; padding: 9px 17px 10px; border-radius: 14px; text-align: left; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); color: var(--ink-soft); cursor: pointer;
}
.hero-latest:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,195,0,.28); }
.latest-body { display: flex; flex-direction: column; gap: 1px; }
.latest-label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.latest-amount { font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1.08; letter-spacing: -.4px; color: var(--b1000000); font-variant-numeric: tabular-nums; }
.latest-where { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* the only two pulsing things on the page: the newest big win and the wins of the week just published */
.pulse { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: ripple 2.2s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(3); opacity: 0; } }

/* ---- filters ----------------------------------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.bands { display: flex; gap: 6px; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer; color: var(--muted); transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip[data-band]:not(.on) { border-style: dashed; opacity: .65; }
/* every chip carries the day ramp on dark text: measured contrast 5.05 to 10.58, well over the 4.5 needed */
.chip.on { color: var(--on-light); border-color: transparent; }
.chip.on { box-shadow: inset 0 0 0 1px rgba(58,42,5,.2); }
.chip.band-1000000.on { background: var(--b1000000); box-shadow: inset 0 0 0 1px rgba(58,42,5,.2), 0 2px 10px rgba(255,195,0,.5); }
.chip.band-500000.on { background: var(--b500000); }
.chip.band-100000.on { background: var(--b100000); }
.chip.band-50000.on { background: var(--b50000); }
.chip.band-20000.on { background: var(--b20000); }
.chip.ghost { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.chip.ghost:hover { border-color: var(--gold); color: var(--ink); }
.chip.ghost svg { width: 14px; height: 14px; }
.filters select { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink-soft); }
.filters select:focus { outline: none; border-color: var(--gold); }
.toggle { color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.filters-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.count { color: var(--muted); font-variant-numeric: tabular-nums; }
.legend { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
/* the legend draws the very markers the map draws, in grey: one shape, described in one place, so the two cannot drift
   apart again. The thin outline stands in for the basemap, which on the map is what makes the dashes visible. */
.legend i.win-marker { display: inline-block; width: 12px; height: 12px; --c: var(--muted); opacity: 1;
  box-shadow: 0 0 0 1px var(--line-strong); margin-left: 6px; vertical-align: -2px; }
.legend i.win-marker.noshop { background: transparent; box-shadow: none; }
body.night .legend i.win-marker.noshop { background: transparent; }
/* on ink the grey of the day is darker than the label beside it: the markers take the same grey as the words */
body.night .legend i.win-marker { --c: #a7a29a; box-shadow: 0 0 0 1px #2a2e36; }
body.night .legend i.win-marker.noshop { box-shadow: none; }

/* ---- map and its two side cards ---------------------------------------------------------------------------------- */
.layout { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--surface-2); }

.week {
  position: absolute; top: 12px; left: 12px; z-index: 1000; width: 292px; max-width: calc(100% - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden;
  /* the card never grows past the map: the list gives up the room, so the note at the foot is always readable without
     scrolling the page away from the map */
  display: flex; flex-direction: column; max-height: calc(100% - 24px);
}
.week-body { display: flex; flex-direction: column; min-height: 0; }
.week-head, .week-sum, /* each group of the list says what it is: with one heading only, it looked like a label for everything below it */
.week-group { padding: 7px 13px 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--line); cursor: default; }
.week-list li.week-group:hover { background: var(--surface-2); }
/* the explanation opened on demand: it lives inside the footer and does not push the list */
.week-why { margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.week-foot button { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-ink); cursor: pointer; text-decoration: underline; }
body.night .week-foot button { color: var(--gold); }
.week-foot { flex: none; }
.week-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 13px; border: 0; background: linear-gradient(100deg, #fff9e8, var(--surface));
  cursor: pointer; text-align: left; border-bottom: 1px solid var(--line);
}
.week-head b { font-family: var(--display); font-size: 15px; font-weight: 800; }
.week-head .week-dates { color: var(--muted); font-size: 12px; }
.week-head .caret { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.week.closed .week-head { border-bottom: 0; }
.week.closed .caret { transform: rotate(-90deg); }
.week.closed .week-body { display: none; }
.week-sum { padding: 9px 13px; color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--line); }
.week-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.week-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; max-height: min(46vh, 340px); overflow: auto; }
.week-list li { display: flex; gap: 9px; align-items: baseline; padding: 9px 13px; border-top: 1px solid var(--line); cursor: pointer; }
.week-list li > * { min-width: 0; }
.week-list li:first-child { border-top: 0; }
.week-list li:hover { background: var(--surface-2); }
.week-list .rank { color: var(--muted); font-size: 11px; width: 14px; flex: none; font-variant-numeric: tabular-nums; }
.week-list .amt { flex: none; min-width: 104px; font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--c, var(--ink)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.week-list .place { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.week-list .place small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.week-foot { padding: 9px 13px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); background: var(--surface-2); }
.week-foot button { border: 0; background: none; color: var(--gold-ink); font-weight: 600; cursor: pointer; padding: 0; }

.panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; width: 392px; max-width: calc(100% - 24px); background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 1001; overflow: auto; padding: 20px 20px 26px;
}
.panel .close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.panel .close:hover { color: var(--ink); }
.panel h2 { margin: 2px 0 4px; font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px; }
.panel h2 small { color: var(--muted); font-weight: 600; font-size: 15px; }
.panel h3 { margin: 20px 0 7px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.amount { font-family: var(--display); font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1; color: var(--c, var(--ink)); font-variant-numeric: tabular-nums; }
.lottery { margin-top: 7px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.win-head { padding-bottom: 14px; border-bottom: 2px solid var(--c, var(--line)); margin-bottom: 12px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-2); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.badge.review { background: #fff3cd; color: #7a5b00; }
.badge.exact { background: #e6f4ea; color: #1e6b3a; }
.badge.fresh { background: rgba(255,195,0,.22); color: #7a5b00; }
.shop { font-size: 17px; font-weight: 600; }
.shop .street { color: var(--muted); display: block; font-size: 14.5px; font-weight: 400; }
.sources { list-style: none; padding: 0; margin: 0; }
.sources li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sources li:first-child { border-top: 0; }
.sources .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sources .ok { color: #1e6b3a; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.list li:first-child { border-top: 0; }
.list li:hover .amt { text-decoration: underline; }
.list .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.list small { color: var(--muted); display: block; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.note { color: var(--muted); font-size: 13px; }
.btn {
  display: inline-block; margin-top: 14px; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
}
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; }
form.report label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
form.report input, form.report textarea, form.report select { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 14px; margin-top: 3px; }
form.report textarea { min-height: 70px; }
.ok-msg { background: #e6f4ea; color: #1e6b3a; padding: 10px 12px; border-radius: 9px; margin-top: 12px; }
.err-msg { background: #fdecea; color: #9b1c1c; padding: 10px 12px; border-radius: 9px; margin-top: 12px; }

.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 18px; font-size: 12px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.foot a { color: var(--gold-ink); }

/* ---- markers ----------------------------------------------------------------------------------------------------- */
.win-marker { position: relative; border-radius: 50%; background: var(--c, var(--m1000000)); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; }
.win-marker.approx { border-style: dashed; opacity: .85; }
/* municipality only: a ring in the band colour, the centre stays empty */
.win-marker.noshop { background: rgba(255,255,255,.75); border: 3px solid var(--c); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
body.night .win-marker.noshop { background: rgba(255,206,31,.22); }
/* One million and above: a gold halo, so the wins the site is about are found first. Not called .top: the page header
   is .top too, and `body.night .top` outranks `.win-marker`, which painted these markers with the panel colour and
   `.top`'s flex padding stretched them to 40x24 ovals. */
.win-marker.million { box-shadow: 0 0 0 4px rgba(255,195,0,.38), 0 1px 5px rgba(0,0,0,.4); }
body.night .win-marker.million { box-shadow: 0 0 0 4px rgba(255,206,31,.45), 0 1px 6px rgba(0,0,0,.6); }
/* wins of the week just published: a ripple, the only motion on the map */
/* a position holding several wins: the count is the promise that clicking opens all of them */
.win-marker.multi { display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); }
body.night .win-marker.multi { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.6); }
.win-marker.multi .n { font: 700 10px/1 Inter, system-ui, sans-serif; color: #2a1a00; letter-spacing: -.02em; }
.win-marker.multi.noshop .n { color: var(--c); }
body.night .win-marker.multi:not(.noshop) .n { color: #15181d; }
.shop-link { width: 100%; }

.win-marker.fresh::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--c); animation: ripple-marker 2.2s ease-out infinite; }
@keyframes ripple-marker { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(255,195,0,.34); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--b1000000); color: #3a2a05; font-weight: 700; font-family: var(--sans); }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10.5px; }

/* ---- article pages (municipality, info, statistics) --------------------------------------------------------------- */
.page { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 30px 18px 56px; }
.page h1 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 8px; letter-spacing: -.6px; font-weight: 800; line-height: 1.15; }
.page .lead { color: var(--muted); margin: 0 0 22px; font-size: 16px; max-width: 70ch; }
.page h2 { font-size: 21px; margin: 34px 0 10px; font-weight: 800; letter-spacing: -.2px; }
.page p { line-height: 1.65; }
.page table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.page th, .page td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.page thead th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; border-top: 0; background: var(--surface-2); }
.page tbody tr:hover { background: var(--surface-2); }
.page td.amt { font-family: var(--display); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.page .kpis { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
.page .kpi { flex: 1 1 150px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.page .kpi b { display: block; font-family: var(--display); font-size: clamp(19px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page .kpi span { color: var(--muted); font-size: 13px; }
.page .note { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .pulse::after, .win-marker.fresh::after { animation: none; }
  .chip, .btn { transition: none; }
}

@media (max-width: 900px) {
  .hero-kpis { display: none; }
  .hero { gap: 14px; }
  .panel { width: 360px; }
}
@media (max-width: 1100px) {
  .filters-right .legend { display: none; }
}
@media (max-width: 720px) {
  /* The header wraps instead of hiding the links. They used to be display:none, which on a phone meant the statistics,
     the about page and the widget page could not be reached at all from the map — and the map is where everyone lands.
     Wrapping costs one row and gives the search the full width, which is what it needed to show its own placeholder. */
  .top { gap: 8px 10px; padding: 8px 10px; flex-wrap: wrap; }
  /* Measured at 360px, the narrowest phone still common: brand 137 + links 215 + gap did not fit in 336, and the
     header became three rows. These three numbers are what buys the second row back. */
  .brand { font-size: 18px; }
  .top nav { gap: 9px; }
  .top nav a { font-size: 12.5px; }
  .search { order: 3; flex: 1 0 100%; min-width: 0; }
  .hero { padding: 10px 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero p { display: none; }
  /* Every row of controls is a row of map the phone does not get, and the map is what people came for. */
  .hero-latest { width: 100%; max-width: 100%; justify-content: flex-start; padding: 7px 12px 8px; }
  .latest-amount { font-size: 22px; }
  .latest-where { white-space: normal; line-height: 1.35; }
  .search { max-width: none; }
  .chip { padding: 5px 10px; font-size: 12.5px; }
  .filters select { flex: 1 1 44%; min-width: 0; }
  /* the five bands stay on one line and scroll sideways: on a phone every saved row is map */
  .bands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .bands::-webkit-scrollbar { display: none; }
  .filters { padding: 6px 12px; gap: 5px 8px; }
  .count, .legend { display: none; }
  .foot { font-size: 11px; padding: 7px 12px; }
  .foot span:last-child { display: none; }
  .week { top: 8px; left: 8px; right: 8px; width: auto; max-height: calc(100% - 16px); }
  .week-list { max-height: 34vh; }
  .panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 66%; border-radius: 14px; }
  .page { padding: 22px 14px 40px; }
}

/* ---- night styles of the self-hosted map: the chrome follows the basemap ------------------------------------------ */
body.night {
  background: #14161a; color: #eee;
  --m1000000: #ffce1f; --m500000: #f2c41e; --m100000: #e3b81c; --m50000: #d2aa1a; --m20000: #bd9a18;
}
body.night .top, body.night .filters, body.night .foot, body.night .week, body.night .panel { background: #1b1e24; border-color: #2a2e36; }
body.night .hero { background: linear-gradient(100deg, #20242c, #1b1e24); border-color: #2a2e36; }
body.night .week-head { background: linear-gradient(100deg, #262a33, #1b1e24); border-color: #2a2e36; }
body.night .week-sum, body.night .week-foot { background: #21252c; border-color: #2a2e36; color: #a7a29a; }
/* the two group headings of the list: without this line they kept the light paper of day mode, and on the dark card
   they looked like two bands of light. Same treatment as the summary and the footer, the other bands of the card. */
body.night .week-group, body.night .week-list li.week-group:hover { background: #21252c; border-color: #2a2e36; color: #a7a29a; }
body.night .week-why { color: #a7a29a; }
/* only the neutral pill ("stima"): the others carry a colour that means something and must keep it at night too */
body.night .badge:not(.review):not(.exact):not(.fresh) { background: #2a2e36; color: #a7a29a; }
/* "questa settimana" has the translucent gold background: on light the brown text works, on the dark one it vanished */
body.night .badge.fresh { background: rgba(255,206,31,.18); color: #ffce1f; }
body.night .week-sum b { color: #fff; }
body.night .search input, body.night .filters select, body.night .chip:not(.on), body.night .suggestions, body.night .tag { background: #23272f; color: #eee; border-color: #2a2e36; }
body.night .top nav a, body.night .toggle, body.night .count, body.night .foot, body.night .note, body.night .legend { color: #a7a29a; }
body.night .brand, body.night .panel h2, body.night .week-head b { color: #fff; }
body.night .week-list li, body.night .sources li, body.night .list li { border-color: #2a2e36; }
body.night .week-list li:hover, body.night .suggestions li:hover, body.night .list li:hover { background: #23272f; }
body.night .week-list .place, body.night .sources li { color: #cfcac2; }
body.night { --gold-ink: #ffc300; }   /* on ink the full rung reads fine, so night keeps it */
body.night .hero-latest { background: #23272f; border-color: #2a2e36; color: #cfcac2; }
body.night .hero-latest .latest-where, body.night .shop { color: #e7e2da; }
body.night .latest-amount { color: var(--m1000000); }
body.night .btn { background: #23272f; color: #eee; border-color: #2a2e36; }
body.night .btn.primary { background: var(--gold); color: #1a1714; border-color: var(--gold); }

/* the three geographic levels, so a reader always knows where they are and can climb back up */
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15); }
.crumbs a:hover { color: var(--ink); }
body.night .crumbs a { border-bottom-color: rgba(255,255,255,.2); }

/* the filter of the municipality table: 1.882 rows are too many to scroll by hand */
.table-filter { width: 100%; max-width: 380px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; font-size: 14px; background: var(--surface); color: var(--ink); }

/* index of the statistics page: without it the municipality table is two thousand rows away */
.page-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.page-index a { padding: 5px 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px;
  text-decoration: none; color: var(--ink-soft); background: var(--surface); }
.page-index a:hover { border-color: var(--gold); color: var(--ink); }
.page h2 { scroll-margin-top: 14px; }

/* a call to action inside a sentence: it looks like a link and behaves like a button */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-ink); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--ink); }
body.night .link-btn { color: var(--gold); }

/* Moderation: one win per box, with all the evidence about it inside. */
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px; }
.group h2 { font-size: 16px; margin: 0; }
.group h2 a { text-decoration: none; }
.group table { margin-top: 10px; }
.group .kind { font-size: 11px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; width: 1%; }
.group td:nth-child(2) { width: 18%; }
.group td:last-child { width: 1%; }
.group td:last-child form { display: block; }
.group td:last-child form + form { margin-top: 5px; }
.group td:last-child .btn { display: block; width: 100%; white-space: nowrap; text-align: center; }
.group td .note { margin-top: 2px; word-break: break-word; }

/* a win the press told before any official bulletin listed it: the caveat has to be readable, not decorative */
.note.unconfirmed { border-left: 3px solid var(--warn, #c98a00); padding-left: .6rem; }

/* Reports: one card per report, because the decision needs the checks next to the two buttons and a table row has no
   room for them. The three levels are the same colours the rest of the moderation uses. */
.report-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1rem; background: var(--card); }
.report-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.report-says { margin: .5rem 0; }
.checks { list-style: none; padding: 0; margin: .6rem 0; }
.checks li { padding: .35rem .6rem; border-left: 3px solid var(--line); margin-bottom: .25rem; font-size: .93rem; }
.checks li.ok { border-left-color: #2f7d4f; }
.checks li.warn { border-left-color: #c8931f; }
.checks li.stop { border-left-color: #b3321f; background: rgba(179, 50, 31, .06); }
.decide { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .6rem; }
.decide p { margin: .25rem 0; }
.decide .ask { font-size: 1.02rem; }
.decide .ask a { margin-left: .4rem; }
.decide .yes b { color: #2f7d4f; }
.decide .no b { color: #b3321f; }
body.night .checks li.stop { background: rgba(179, 50, 31, .14); }
body.night .decide .yes b { color: #6fbf8b; }
body.night .decide .no b { color: #e0836f; }

/* The trap of the report form: off screen rather than display:none, because some machines skip what is not displayed.
   No person reaches it — it is out of the tab order and has nothing a screen reader announces. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Second line of a counter, under the label: the visitors of a period next to its visits, without running into them. */
.kpi-note { display: block; margin-top: .15rem; font-size: .85rem; color: var(--muted); }

/* Two previews of the widget side by side on the page a newsroom is sent: what they are about to embed, not a screenshot. */
.widget-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1rem 0; }
.widget-preview iframe { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
pre { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; overflow-x: auto; font-size: .85rem; }