@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-latin-700.woff2") format("woff2"); }

:root {
  --bg: #ffffff; --fg: #1b2528; --muted: #5b6a6f; --line: #dbe3e5; --surface: #ffffff;
  --brand: #0e7c86;           /* « Sambre » blue-green */
  --danger: #cf332c;          /* SIGNALER, same in both themes */
  --shadow: 0 2px 12px rgb(0 0 0 / .25);
  --field-line: #8a999d;     /* form borders: 3:1 against the page */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11181a; --fg: #e8eef0; --muted: #9db0b5; --line: #2a373b; --surface: #182225; --field-line: #5b6d72; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; background: var(--bg); color: var(--fg); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

:root {
  /* marker colours: shape AND colour carry the category */
  --c-assault: #c2185b; --c-theft: #f28c28; --c-vandalism: #f2c200; --c-harassment: #7b3fb5; --c-alert: #4b5563; --c-traffic: #1d6fd6; --c-drugs: #2e7d32;
}

/* report markers and list icons: circle, triangle, square, diamond */
.pin { display: block; width: 26px; height: 26px; background: var(--c-alert); border: 0; padding: 0; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
.pin[data-family="assault"] { background: var(--c-assault); border-radius: 50%; }
.pin[data-family="theft"] { background: var(--c-theft); clip-path: polygon(50% 4%, 98% 92%, 2% 92%); }
.pin[data-family="vandalism"] { background: var(--c-vandalism); border-radius: 3px; }
.pin[data-family="harassment"] { background: var(--c-harassment); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* quick alert: octagon with an exclamation mark */
.pin[data-family="alert"] { background: var(--c-alert); display: grid; place-items: center; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.pin[data-family="alert"]::after { content: "!"; color: #fff; font-weight: 700; font-size: 16px; line-height: 1; }
.pin.small[data-family="alert"]::after { font-size: 13px; }
.pin[data-family="traffic"] { background: var(--c-traffic); clip-path: inset(19% 0 19% 0 round 45%); }
.pin[data-family="drugs"] { background: var(--c-drugs); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.pin.mine { outline: 3px solid var(--brand); outline-offset: 2px; }
.pin.small { width: 20px; height: 20px; flex: none; filter: none; }