:root {
  --bg: #FBF1E6;
  --surface: #FFFFFF;
  --peach: #FF9E6D;
  --peach-deep: #F2723B;
  --ink: #3A2A22;
  --ink-soft: #917C70;
  --green: #5FA86B;
  --blue: #3B82C4;
  --line: #F0E2D5;
  --chip: #FBEFE4;
  --backdrop: #EADBCB;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.serif-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
}

/* Zero-specificity reset: real heading tags (h1-h6) keep their default
   look controlled entirely by their existing classes, not the browser's
   UA stylesheet. Any class selector below still wins over this. */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{left:0;position:absolute;top:0}.mapboxgl-map:-webkit-full-screen{height:100%;width:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.mapboxgl-ctrl-top-left{left:0;top:0}.mapboxgl-ctrl-top-right{right:0;top:0}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-bottom-right{bottom:0;right:0}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{float:left;margin:10px 0 0 10px}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{float:right;margin:10px 10px 0 0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{float:left;margin:0 0 10px 10px}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{float:right;margin:0 10px 10px 0}.mapboxgl-ctrl-group{background:#fff;border-radius:4px}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;overflow:hidden;padding:0;width:29px}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23ccc%27/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23999%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27 viewBox=%270 0 29 29%27%3E%3Cpath d=%27M10.5 14l4-8 4 8h-8z%27/%3E%3Cpath id=%27south%27 d=%27M10.5 16l4 8 4-8h-8z%27 fill=%27%23ccc%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23333%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23aaa%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e58978%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e54e33%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23fff%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23999%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e58978%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%2333b5e5%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23e54e33%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27 display=%27none%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23000%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 display=%27none%27/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%23666%27%3E%3Cpath d=%27M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z%27/%3E%3Ccircle id=%27dot%27 cx=%2710%27 cy=%2710%27 r=%272%27/%3E%3Cpath id=%27stroke%27 d=%27M14 5l1 1-9 9-1-1 9-9z%27 fill=%27%23f00%27/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%270.3%27 stroke=%27%23000%27 stroke-width=%273%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%270.9%27 fill=%27%23fff%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%271%27 stroke=%27%23000%27 stroke-width=%273%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%271%27 fill=%27%23fff%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 fill-rule=%27evenodd%27 viewBox=%270 0 88 23%27%3E%3Cdefs%3E%3Cpath id=%27logo%27 d=%27M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z%27/%3E%3Cpath id=%27text%27 d=%27M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z%27/%3E%3C/defs%3E%3Cmask id=%27clip%27%3E%3Crect x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 fill=%27white%27/%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/mask%3E%3Cg id=%27outline%27 opacity=%271%27 stroke=%27%23fff%27 stroke-width=%273%27 fill=%27%23fff%27%3E%3Ccircle mask=%27url%28%23clip%29%27 cx=%2711.5%27 cy=%2711.5%27 r=%279.25%27/%3E%3Cuse xlink:href=%27%23text%27 mask=%27url%28%23clip%29%27/%3E%3C/g%3E%3Cg id=%27fill%27 opacity=%271%27 fill=%27%23000%27%3E%3Cuse xlink:href=%27%23logo%27/%3E%3Cuse xlink:href=%27%23text%27/%3E%3C/g%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{background-color:#fff;border-radius:12px;box-sizing:content-box;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0;top:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0;top:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27 fill=%27%23fff%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%270 0 20 20%27 xmlns=%27http://www.w3.org/2000/svg%27 fill-rule=%27evenodd%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.mapboxgl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.mapboxgl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.mapboxgl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}.mapboxgl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:10px 10px 15px;pointer-events:auto;position:relative}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{left:0;opacity:1;position:absolute;top:0;transition:opacity .2s;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.mapboxgl-user-location-dot:before{animation:mapboxgl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.mapboxgl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{height:0;width:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-bottom:7.5px solid #4aa1eb;content:"";position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid transparent;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid transparent;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{align-items:center;background:rgba(0,0,0,.7);color:#fff;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:opacity .75s ease-in-out;transition-delay:1s;width:100%}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}
/* src/styles/PecheMap.css */
.peche-map-root {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mapboxgl-user-location-dot {
    background-color:  #ff876c;
}

.mapboxgl-user-location-dot:before {
    background-color:  #ff876c;
}

.mapboxgl-user-location-dot .mapboxgl-user-location-dot:after {
    background-color:  #ff876c;
}

.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before {
    border-bottom: 7.5px solid #ff876c;
}
.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after {
    border-bottom: 7.5px solid #ff876c;
}

/* Desktop-only docked panels. These are two INDEPENDENT panels (list and detail can
   both be open at once - see PecheMap.js), on opposite edges of the map:
   - .map-side-panel (toilet list, left edge): sits below the topbar's quick-filter
     row rather than beside it, so it never needs the topbar to shrink. Its "top" is
     measured from the topbar's rendered height and passed in as an inline style.
   - .map-detail-panel (toilet detail, right edge): full height, beside the topbar
     like the original pre-list-relocation panel - the topbar shrinks to clear it
     (see .map-topbar-narrow in MapTopBar.css) whenever a pin is selected. */
@media (min-width: 900px) {
  .map-side-panel,
  .map-detail-panel {
    position: absolute;
    width: 392px;
    z-index: 22;
    background: var(--surface, #fff);
    border-radius: 22px;
    box-shadow: 0 24px 60px -20px rgba(60, 30, 20, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .map-side-panel {
    top: 90px;
    left: 24px;
    right: auto;
    bottom: 24px;
  }

  .map-detail-panel {
    top: 24px;
    right: 24px;
    bottom: 24px;
  }
}

/* src/styles/ResponsivePanel.css */
.responsive-panel-root {
  position: fixed;
  inset: 0;
}

.responsive-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 14, 0.42);
}

.responsive-panel {
  position: absolute;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.responsive-panel-desktop {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 86vh;
  border-radius: 26px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.45);
}

.responsive-panel-mobile {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 34px -18px rgba(60, 30, 20, 0.4);
  animation: responsive-panel-slide-up 0.28s ease;
}

.responsive-panel-mobile.dragging {
  animation: none;
}

@keyframes responsive-panel-slide-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Drag-to-dismiss handle - see useSheetDrag. touch-action: none stops the
   browser's own scroll/refresh gesture from competing with the drag. */
.responsive-panel-drag-handle {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  touch-action: none;
  cursor: grab;
}

.responsive-panel-drag-handle::after {
  content: '';
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--line, #F0E2D5);
}

/* src/styles/DesignKit.css */
.peach-picker-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.peach-picker-btn:disabled {
  cursor: default;
}

.peach-picker-label {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
  margin-top: 8px;
}

.toggle-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  background: var(--surface, #fff);
  border: 1.5px solid var(--line, #F0E2D5);
}

.toggle-chip-solid {
  border-width: 1px;
  color: var(--ink, #3A2A22);
}

.toggle-chip-outline {
  color: var(--ink-soft, #917C70);
}

.toggle-chip:disabled {
  cursor: default;
  opacity: 0.6;
}

.segmented-control {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--chip, #FBEFE4);
  border-radius: 13px;
  padding: 5px;
}

.segmented-option {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-soft, #917C70);
}

.segmented-option.active {
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  box-shadow: 0 4px 10px -4px rgba(60, 30, 20, 0.3);
}

.switch-track {
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background: #D8C7B7;
  transition: background 0.2s;
  flex: 0 0 auto;
}

.switch-track.on {
  background: var(--peach-deep, #F2723B);
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: left 0.2s;
}

.switch-track.on .switch-knob {
  left: 23px;
}

/* src/styles/ComposeForm.css
   Shared chrome for the "suggest edit" and "create a toilet" panels, matching
   the design's compose/edit overlay treatment. */
.compose-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line, #F0E2D5);
  flex: 0 0 auto;
}

.compose-form-header-spacer {
  width: 34px;
  flex: 0 0 auto;
}

.compose-form-header-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.compose-form-header-title-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
}

.compose-form-cancel {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  cursor: pointer;
  flex: 0 0 auto;
}

.compose-form-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--chip, #FBEFE4);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #3A2A22);
  flex: 0 0 auto;
}

.compose-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
}

.compose-form-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft, #917C70);
  margin-bottom: 8px;
}

.compose-form-label-spaced {
  margin-top: 16px;
}

.compose-form-input {
  width: 100%;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--chip, #FBEFE4);
  border-radius: 13px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink, #3A2A22);
  outline: none;
  box-sizing: border-box;
}

.compose-form-price-input {
  margin-top: 10px;
}

.compose-form-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compose-form-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  background: var(--chip, #FBEFE4);
  border-radius: 15px;
  padding: 14px 16px;
}

.compose-form-switch-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.compose-form-footer {
  padding: 14px 20px 22px;
  border-top: 1px solid var(--line, #F0E2D5);
  flex: 0 0 auto;
}

.compose-form-submit {
  width: 100%;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 26px -10px var(--peach-deep, #F2723B);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compose-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.compose-form-submit-cost {
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.compose-form-map {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line, #F0E2D5);
}

.compose-form-map-locate {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  box-shadow: 0 6px 16px -6px rgba(60, 30, 20, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.compose-form-hint {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  margin-top: 6px;
}

.compose-form-error {
  color: #B23B2E;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.pin-details {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--surface, #fff);
  font-family: 'Hanken Grotesk', sans-serif;
}

.pin-details-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
}

.pin-details-skeleton {
  overflow-y: auto;
}

.pin-detail-skeleton-header {
  position: relative;
  height: 170px;
  flex: 0 0 auto;
  background: linear-gradient(140deg, #F6A17B, #D75E2B);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-detail-skeleton-header .MuiSkeleton-root {
  background-color: rgba(255, 255, 255, 0.45);
}

.pin-detail-skeleton-chips,
.pin-detail-skeleton-actions {
  display: flex;
  gap: 9px;
  margin: 12px 0;
}

.pin-detail-skeleton-actions {
  justify-content: space-between;
}

.pin-details-skeleton .friends-feed-skeleton {
  margin-top: 8px;
}

.close-icon {
  cursor: pointer;
  padding-top: 5px;
  padding-left: 10px;
}

/* ---- header ---- */
.pin-detail-header {
  position: relative;
  height: 170px;
  flex: 0 0 auto;
}

.pin-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #3A2A22;
}

.pin-detail-header-actions {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 8px;
}

.pin-detail-header-actions > button,
.pin-detail-header-actions .MuiButton-root {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #3A2A22 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
}

.pin-detail-header-actions > button:hover,
.pin-detail-header-actions .MuiButton-root:hover {
  background: #fff !important;
}

.pin-detail-pills {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 96px);
  flex-wrap: wrap;
}

.pin-detail-pill {
  background: rgba(255, 255, 255, 0.92);
  color: var(--peach-deep, #F2723B);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 9px;
}

.pin-detail-pill-dark {
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

.pin-detail-reliability-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 9px;
  padding: 5px 10px;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.pin-detail-reliability-badge.grade-a,
.pin-detail-reliability-badge.grade-b { background: #337847; }
.pin-detail-reliability-badge.grade-c { background: #8a7615; }
.pin-detail-reliability-badge.grade-d,
.pin-detail-reliability-badge.grade-e { background: #a94f1f; }
.pin-detail-reliability-badge.grade-f,
.pin-detail-reliability-badge.disputed { background: #9b3029; }
.pin-detail-reliability-badge.loading { background: rgba(58, 42, 34, 0.55); }
.pin-detail-reliability-badge:disabled { cursor: wait; opacity: 0.82; }

.pin-detail-header-icon {
  position: absolute;
  right: 16px;
  bottom: 10px;
  width: 70px;
  height: 70px;
  opacity: 0.3;
}

/* ---- body ---- */
.pin-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
}

.pin-detail-name {
  font-size: 23px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  line-height: 1.1;
}

.pin-detail-visibility-pill {
  display: inline-block;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9px;
  margin-top: 6px;
}

.pin-detail-locinfo {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
  margin-top: 4px;
}

.pin-detail-address {
  margin-top: 6px;
  color: var(--ink-soft, #917C70);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.pin-detail-comments {
  margin-top: 3px;
  color: var(--ink-soft, #917C70);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre-wrap;
}

.pin-detail-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.pin-detail-rating-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.pin-detail-meta {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.pin-detail-checked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.pin-detail-checked-row span {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.pin-detail-checked-row button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--peach-deep, #F2723B);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.pin-detail-checked-row button:disabled {
  color: var(--ink-soft, #917C70);
  cursor: default;
  text-decoration: none;
}

/* Confirm is the affirming/positive action - keep it visually distinct (blue)
   from Suggérer une modification's default peach-deep link color. */
.pin-detail-checked-row .pin-detail-confirm-btn {
  color: var(--blue, #3B82C4);
}

.pin-detail-history-btn {
  display: block;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-top: 6px;
}

.pin-detail-history-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

.pin-detail-reliability-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 15px;
  background: #fffaf6;
  color: var(--ink, #3A2A22);
}

.pin-detail-reliability-heading,
.pin-detail-reliability-stats,
.pin-detail-incident-counts {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pin-detail-reliability-heading span,
.pin-detail-reliability-stats,
.pin-detail-incident-counts {
  color: var(--ink-soft, #917C70);
  font-size: 12px;
  font-weight: 650;
}

.pin-detail-reliability-panel p {
  margin: 8px 0;
  color: var(--ink-soft, #917C70);
  font-size: 12px;
  line-height: 1.4;
}

.pin-detail-disputed {
  margin: 9px 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8d9d5;
  color: #8e2d26;
  font-size: 12px;
  font-weight: 800;
}

.pin-detail-incidents {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line, #F0E2D5);
  font-size: 12px;
}

.pin-detail-incident-counts { margin-top: 6px; }

.pin-detail-incident-timeline {
  height: 32px;
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.pin-detail-incident-timeline span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: #d86b3b;
  opacity: 0.82;
}

.pin-detail-source-row {
  margin-top: 16px;
  text-align: left;
}

.pin-detail-source-row span,
.pin-detail-source-list {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.pin-detail-source-label {
  display: block;
  margin-bottom: 5px;
}

.pin-detail-source-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pin-detail-source-list li {
  line-height: 1.45;
}

.pin-detail-source-attribution {
  display: block;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.pin-detail-source-row a {
  color: var(--peach-deep, #F2723B);
  font-weight: 700;
  text-decoration: underline;
}

.pin-detail-report {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #B23B2E;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
}

.pin-detail-report:disabled {
  cursor: default;
  opacity: 0.7;
}

.pin-detail-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(40, 26, 20, 0.48);
}

.pin-detail-report-modal {
  width: min(430px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(43, 25, 17, 0.28);
}

.pin-detail-report-modal h3 { margin: 0; color: var(--ink, #3A2A22); }
.pin-detail-report-modal p { color: var(--ink-soft, #917C70); font-size: 13px; line-height: 1.45; }
.pin-detail-report-modal label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: var(--ink, #3A2A22); }
.pin-detail-report-modal select,
.pin-detail-report-modal textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 12px;
  padding: 11px 12px;
  background: #fffaf6;
  color: var(--ink, #3A2A22);
  font: inherit;
}
.pin-detail-report-modal textarea { min-height: 90px; resize: vertical; }
.pin-detail-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.pin-detail-modal-actions button { border: 0; border-radius: 11px; padding: 10px 15px; font: inherit; font-weight: 800; cursor: pointer; }
.pin-detail-modal-actions button.primary { background: var(--peach-deep, #F2723B); color: #fff; }
.pin-detail-modal-actions button:disabled { opacity: 0.55; cursor: default; }

.pin-detail-amen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.pin-detail-amen-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--chip, #FBEFE4);
  border-radius: 11px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
}

.pin-detail-amen-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green, #5FA86B);
}

.pin-detail-hours {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
}

.pin-detail-hours h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin: 0 0 8px;
}

.pin-detail-hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pin-detail-hours strong {
  color: var(--ink, #3A2A22);
  font-weight: 700;
}

.pin-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.pin-detail-main-navigation {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.pin-detail-content-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border-radius: 14px;
  background: #f3e8df;
}

.pin-detail-content-tabs button {
  border: 0;
  border-radius: 11px;
  padding: 11px 8px;
  background: transparent;
  color: var(--ink-soft, #917C70);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.pin-detail-content-tabs button.active {
  background: #fff;
  color: var(--ink, #3A2A22);
  box-shadow: 0 2px 9px rgba(75, 45, 31, 0.1);
}

.pin-detail-tab-panel {
  min-width: 0;
  padding-top: 4px;
}

.pin-detail-secondary-btn,
.pin-detail-primary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 15px;
  padding: 14px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
}

.pin-detail-secondary-btn {
  background: var(--chip, #FBEFE4);
  color: var(--ink, #3A2A22);
  border: 1px solid var(--line, #F0E2D5);
}

.pin-detail-primary-btn {
  background: var(--peach-deep, #F2723B);
  color: #fff;
  border: none;
}

.pin-detail-section-title {
  margin-top: 26px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.pin-detail-section-sub {
  font-size: 12.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 12px;
}

.pin-detail-tab-subtitle {
  margin-top: 16px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.pin-detail-ratings-loading {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.pin-detail-empty {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
}

.pin-detail-reviews {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pin-detail-review {
  display: flex;
  gap: 11px;
}

.pin-detail-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

.pin-detail-review-body {
  flex: 1;
  min-width: 0;
}

.pin-detail-review-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.pin-detail-review-author {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.pin-detail-review-friend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
  background: var(--chip, #FBEFE4);
  padding: 2px 7px;
  border-radius: 6px;
}

.pin-detail-review-amis {
  color: var(--ink-soft, #917C70);
  background: var(--bg, #FBF1E6);
}

.pin-detail-review-time {
  font-size: 11.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.pin-detail-review-peaches {
  display: flex;
  gap: 2px;
  margin: 5px 0;
}

.pin-detail-review-text {
  font-size: 13.5px;
  color: var(--ink, #3A2A22);
  font-weight: 500;
  line-height: 1.45;
}

/* ---- inline compose / rate form ---- */
.pin-detail-compose {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #F0E2D5);
}

.pin-detail-compose-title {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  margin-top: 20px;
}

.pin-detail-hint {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  margin-top: 6px;
}

.pin-detail-compose-label {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin-bottom: 8px;
}

.pin-detail-compose-label-first {
  margin-top: 0;
}

.pin-detail-compose-subsection {
  margin-top: 16px;
  padding: 14px;
  background: var(--chip, #FBEFE4);
  border: 1px solid #f2c8ae;
  border-radius: 15px;
}

.pin-detail-compose-subsection .pin-detail-textarea {
  margin-top: 14px;
  background: var(--surface, #fff);
}

.pin-detail-compose-section-hint {
  margin: -3px 0 12px;
  color: var(--ink-soft, #917C70);
  font-size: 12px;
  font-weight: 650;
}

.pin-detail-compose-details-section .peche-attribute-picker:first-of-type {
  margin-top: 12px;
}

.pin-detail-textarea {
  width: 100%;
  min-height: 70px;
  resize: none;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--chip, #FBEFE4);
  border-radius: 15px;
  padding: 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink, #3A2A22);
  outline: none;
  box-sizing: border-box;
}

.pin-detail-error {
  color: #B23B2E;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.pin-detail-publish-btn {
  width: 100%;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 26px -10px var(--peach-deep, #F2723B);
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-detail-publish-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.pin-detail-publish-cost {
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pin-detail-feed-enable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: #3a2a22;
  font-weight: 700;
}
/* Inline account preference shown above the Bristol selector. */
.pin-detail-bristol-preference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7eee7;
  color: #5c4235;
  font-size: 13px;
  font-weight: 700;
}

/* src/styles/PecheReactions.css */
.peche-reactions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.peche-reaction-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.peche-reaction-btn.active {
  background: var(--chip, #FBEFE4);
  border-color: var(--peach-deep, #F2723B);
}

.peche-reaction-emoji {
  font-size: 14px;
}

.peche-reaction-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-soft, #917C70);
}

.rating-reactions {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}

/* src/styles/AuthOverlay.css */
.auth-close-icon {
  display: flex;
  justify-content: flex-end;
  padding: 14px 14px 0;
  cursor: pointer;
  color: var(--ink, #3A2A22);
}

.auth-legal-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--peach-deep, #F2723B);
  cursor: pointer;
  text-decoration: underline;
}

/* src/styles/About.css */
.about-wrap {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.about-inner {
  padding: 20px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 899.98px) {
  .about-inner {
    padding-bottom: 96px;
  }
}

.about-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-back-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.about-title {
  font-size: 28px;
  color: var(--ink, #3A2A22);
}

.about-subtitle {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 20px;
}

.about-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}

.about-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin-bottom: 6px;
}

.about-card-text {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  margin-bottom: 14px;
}

.about-link {
  color: var(--peach-deep, #F2723B);
  font-weight: 700;
  text-decoration: none;
}

.about-row-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--chip, #FBEFE4);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.about-row-link:last-child {
  margin-bottom: 0;
}

.about-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--peach, #FF9E6D);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex: 0 0 auto;
}

.about-row-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.about-row-value {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.about-story-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #3A2A22);
  font-weight: 500;
  margin: 0 0 12px;
}

.about-story-quote {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--peach-deep, #F2723B);
  background: var(--chip, #FBEFE4);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
}

.about-story-more {
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
  cursor: pointer;
}

.about-story-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line, #F0E2D5);
  flex: 0 0 auto;
}

.about-story-modal-title {
  font-size: 18px;
  color: var(--ink, #3A2A22);
}

.about-story-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--chip, #FBEFE4);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #3A2A22);
  flex: 0 0 auto;
}

.about-story-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 18px 20px 22px;
}

.about-story-modal-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #3A2A22);
  font-weight: 500;
  margin: 0 0 14px;
}

.about-story-modal-body .about-story-quote {
  margin: 0 0 14px;
}

.about-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  border-radius: 14px;
  padding: 13px;
  font-size: 14.5px;
  font-weight: 800;
}

.about-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 22px;
}

.about-legal-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.about-version {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
  margin-top: 14px;
}

.about-copyright {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  margin-top: 4px;
}

.ad-unit {
  width: 100%;
  margin: 12px 0;
}

.ad-unit-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #917C70);
  opacity: 0.65;
  margin-bottom: 4px;
}

.ad-unit .adsbygoogle {
  display: block;
  width: 100%;
}

.peche-details {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  font-family: 'Hanken Grotesk', sans-serif;
}

.peche-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 62px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line, #F0E2D5);
}

.peche-detail-details-toggle-row {
  background: var(--surface-alt, #FBEFE4);
  border-radius: 12px;
  padding: 8px 12px;
}

.peche-detail-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--chip, #FBEFE4);
  font-size: 27px;
  cursor: pointer;
}

.peche-detail-place {
  border: 0;
  background: transparent;
  color: var(--peach-deep, #F2723B);
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.peche-detail-private-place {
  color: var(--ink-soft, #917C70);
  font-weight: 700;
}

.peche-detail-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.peche-detail-author-row, .peche-comment {
  display: flex;
  gap: 11px;
}

.peche-detail-avatar, .peche-comment-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.peche-comment-avatar { width: 34px; height: 34px; font-size: 13px; }
.peche-detail-author { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-weight:850; font-size:17px; }
.peche-detail-time, .peche-comment-head span { color: var(--ink-soft, #917C70); font-size: 12px; }
.peche-detail-rating { display: flex; gap: 3px; }
.peche-detail-bristol-illustration {
  align-self: flex-start;
  cursor: default;
}
.peche-detail-text { font-size: 17px; line-height: 1.5; }

.peche-detail-comments-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.peche-detail-comments-title h3 { margin: 0; }
.peche-comment-count { color: var(--ink-soft, #917C70); font-size: 13px; font-weight: 750; }
.peche-detail-comments { display: flex; flex-direction: column; gap: 15px; }
.peche-comment-content { flex: 1; min-width: 0; line-height: 1.4; }
.peche-comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 3px; }
.peche-comment-head button { margin-left: auto; border: 0; background: none; color: #B83B2E; cursor: pointer; font-size: 12px; }

.peche-comment-compose {
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--chip, #FBEFE4);
}

.peche-comment-compose textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 12px;
  padding: 10px;
  font: inherit;
}

.peche-comment-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--ink-soft, #917C70);
  font-size: 12px;
}

.peche-comment-compose-footer button, .peche-detail-load-more {
  border: 0;
  border-radius: 12px;
  padding: 9px 15px;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.peche-comment-compose-footer button:disabled { opacity: .55; cursor: default; }
.peche-detail-load-more { align-self: center; background: var(--chip, #FBEFE4); color: var(--ink, #3A2A22); }
.peche-detail-empty, .peche-detail-error { padding: 18px; text-align: center; color: var(--ink-soft, #917C70); }
.peche-detail-error { color: #B83B2E; }

.friends-feed-card-social,
.pin-detail-peche-social {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.pin-detail-review-clickable {
  cursor: pointer;
  border-radius: 12px;
}

.pin-detail-review-clickable:hover {
  background: var(--chip, #FBEFE4);
}
.peche-subscription-button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--peach-deep, #f2723b);
  font-weight: 700;
  cursor: pointer;
}
.peche-comment-reactions { margin-top: 7px; }

.peche-attributes { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.peche-attribute-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; background:#f4ece5; color:#5c4235; font-size:12px; line-height:1.2; }
.peche-attribute-chip strong { font-weight:700; }
.peche-attribute-tag { color:#9d481f; background:#fff0e7; }
.peche-attribute-color-dot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.18); }
.peche-attribute-picker { margin-top:16px; }
.peche-attribute-picker-heading { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:8px; }
.peche-attribute-picker-heading-actions { display:flex; align-items:center; justify-content:space-between; width:100%; flex-wrap:wrap; gap:8px 12px; }
.peche-attribute-picker-heading-actions .peche-details-toggle-row { width:auto; gap:8px; font-size:12px; }
.peche-attribute-picker-label { color:#4c372d; font-size:13px; font-weight:700; }
.peche-attribute-picker-options { display:flex; flex-wrap:wrap; gap:7px; }
.peche-attribute-option { border:1px solid #d8c7b9; background:#fff; color:#5c4235; padding:7px 10px; border-radius:999px; cursor:pointer; font:inherit; font-size:13px; }
.peche-attribute-option.selected { border-color:#ef6d32; color:#a84318; background:#fff0e7; box-shadow:inset 0 0 0 1px #ef6d32; }
.peche-color-option { width:34px; height:34px; padding:4px; border-radius:50%; border:2px solid transparent; background:#fff; cursor:pointer; }
.peche-color-option span { display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.peche-color-option.selected { border-color:#ef6d32; box-shadow:0 0 0 2px #ffe2d4; }
.bristol-chart-link { border:0; padding:2px 0; background:transparent; color:#b84d20; font:inherit; font-size:12px; font-weight:700; text-decoration:underline; cursor:pointer; }
.bristol-type-option { position:relative; width:72px; min-height:58px; border:1px solid #d8c7b9; border-radius:10px; background:#fff; color:#6a4b3b; padding:5px 5px 3px; cursor:pointer; }
.bristol-type-option img { display:block; width:100%; height:34px; object-fit:contain; }
.bristol-type-option span { display:block; font-size:12px; font-weight:800; }
.bristol-type-option.selected { border-color:#ef6d32; color:#a84318; background:#fff0e7; box-shadow:inset 0 0 0 1px #ef6d32; }
.bristol-modal-backdrop { position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(43,29,23,.65); }
.bristol-modal { width:min(760px,100%); max-height:90vh; overflow:auto; border-radius:16px; padding:16px; background:#fffaf6; box-shadow:0 18px 70px rgba(0,0,0,.35); }
.bristol-modal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.bristol-modal-header h3 { margin:0; color:#3f2d25; }
.bristol-modal-header button { width:36px; height:36px; border:0; border-radius:50%; background:#f1e5dc; color:#52382d; font-size:25px; line-height:1; cursor:pointer; }
.bristol-modal-table { width:100%; border-collapse:collapse; }
.bristol-modal-table td { padding:10px 8px; border-bottom:1px solid #eee0d4; vertical-align:middle; }
.bristol-modal-table tr:last-child td { border-bottom:0; }
.bristol-modal-table-illustration { width:76px; }
.bristol-modal-table-illustration img { display:block; width:68px; height:40px; object-fit:contain; }
.bristol-modal-table-type { width:64px; color:#6a4b3b; font-weight:800; font-size:13px; white-space:nowrap; }
.bristol-modal-table-description { color:#4c372d; font-size:13px; line-height:1.4; }
.peche-attributes-details { margin:18px 0 4px; border:1px solid #eaded4; border-radius:12px; padding:0 12px 14px; }
.peche-attributes-details summary { padding:12px 0; cursor:pointer; color:#7d4a32; font-weight:700; }

.karma-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-alt, #FBEFE4);
  border-radius: 8px;
  padding: 1px 5px;
  vertical-align: middle;
}

.karma-badge-level {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.trophy-badge-list {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.trophy-badge-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.trophy-badge-list-large {
  gap: 3px;
}

.trophy-badge-list-large .trophy-badge-icon {
  width: 23px;
  height: 23px;
}

.peche-details-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #3A2A22);
}

.wallet-modal {
  position: relative;
  padding: 32px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow-y: auto;
}

.wallet-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--surface-alt, #FBEFE4);
  color: var(--ink, #3A2A22);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.wallet-modal-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 12px;
}

.wallet-modal-section {
  flex: 1 1 160px;
  min-width: 150px;
}

.wallet-modal-section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #917C70);
}

.wallet-modal-balance {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin-top: 8px;
}

.wallet-modal-balance-cap {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.wallet-modal-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-alt, #FBEFE4);
  margin-top: 10px;
  overflow: hidden;
}

.wallet-modal-progress-fill {
  height: 100%;
  border-radius: 4px;
}

.wallet-modal-progress-fill.rouleaux {
  background: #D6478A;
}

.wallet-modal-progress-fill.karma {
  background: #E5B93C;
}

.wallet-modal-regen {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--peach-deep, #F2723B);
}

.wallet-modal-rate {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft, #917C70);
}

.wallet-modal-description {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft, #917C70);
}

.wallet-modal-help-link {
  margin-top: 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
  cursor: pointer;
}

/* src/styles/MapTopBar.css */
.map-topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  /* Above the side/detail panels and bottom sheets (z-index: 22 in
     PecheMap.css/NearbyPinsSheet.css/FriendsFeedSheet.css) so the search
     autocomplete dropdown, which lives inside this bar, never renders behind
     them when it expands over their area. Still below app-level modals
     (zIndex 1200+ via ResponsivePanel). */
  z-index: 23;
  font-family: 'Hanken Grotesk', sans-serif;
  transition: right 0.25s ease;
}

@media (min-width: 900px) {
  .map-topbar {
    top: 24px;
    left: 24px;
    right: 24px;
  }

  /* Shrinks to clear the toilet detail panel (.map-detail-panel in PecheMap.css),
     which sits beside the topbar at full height. The toilet list panel doesn't need
     this - it docks on the left, below the topbar instead of beside it. */
  .map-topbar-narrow {
    right: 432px; /* panel's right:24px + width:392px + 16px gap */
  }
}

/* Loading + locate + zoom cluster, bottom-right of the map. When the toilet detail panel
   (.map-detail-panel in PecheMap.css) is open, it shifts left to clear it: on desktop
   that's a fixed CSS offset (the panel's width is a known constant); on mobile the
   panel is a full-width bottom sheet instead, so there's no "beside it" - PecheMap.js
   measures the topbar's actual height and moves the cluster above the sheet via
   inline style instead (see mobileClusterTop). The controls run from loading state
   through location to zoom, so the most immediate map action appears before +/−.
   Their shapes remain deliberately different from the topbar's square "+" add button,
   so the zoom control doesn't read as another "add a spot" affordance. */
.map-controls-cluster {
  position: absolute;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: right 0.25s ease;
}

@media (min-width: 900px) {
  .map-controls-cluster {
    right: 24px;
    bottom: 24px;
  }

  .map-controls-cluster.panel-open {
    right: 432px; /* panel's right:24px + width:392px + 16px gap */
  }
}

.map-zoom-pill {
  display: flex;
  flex-direction: column;
  width: 44px;
  border-radius: 22px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
  overflow: hidden;
}

.map-zoom-pill button {
  border: none;
  background: none;
  color: var(--ink, #3A2A22);
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.map-zoom-pill button:first-child {
  border-bottom: 1px solid var(--line, #F0E2D5);
}

.map-locate-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
  color: var(--ink, #3A2A22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.map-locate-idle {
  color: #8F8179;
}

.map-locate-searching,
.map-locate-background {
  color: var(--peach-deep, #F2723B);
  border-color: var(--peach-deep, #F2723B);
}

.map-locate-searching::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(242, 114, 59, 0.2);
  border-top-color: var(--peach-deep, #F2723B);
  border-radius: 50%;
  animation: map-data-spin 0.8s linear infinite;
}

.map-locate-tracking {
  color: #fff;
  background: var(--peach-deep, #F2723B);
  border-color: var(--peach-deep, #F2723B);
}

.map-locate-error {
  color: #C53B2C;
  border-color: #C53B2C;
}

.map-data-loading {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line, #F0E2D5);
  box-shadow: 0 8px 22px -10px rgba(60, 30, 20, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-data-spinner {
  width: 17px;
  height: 17px;
  box-sizing: border-box;
  border: 2.5px solid rgba(242, 114, 59, 0.24);
  border-top-color: var(--peach-deep, #F2723B);
  border-radius: 50%;
  animation: map-data-spin 0.7s linear infinite;
}

@keyframes map-data-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .map-data-spinner,
  .map-locate-searching::after {
    animation: none;
  }
}

.map-topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Mobile: the brand mark and search input share one continuous bar; the
   wallet chip stays its own separate pill (not merged in). */
.map-search-group {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.map-search-autocomplete {
  position: relative;
  flex: 1;
  min-width: 0;
}

.map-topbar-brand {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.map-search-bar {
  flex: 1;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 0 15px;
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
  border: 1px solid var(--line, #F0E2D5);
}

.map-search-bar.open {
  border-color: rgba(242, 114, 59, 0.62);
}

.map-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(520px, calc(100vh - 100px));
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  box-shadow: 0 18px 42px -18px rgba(60, 30, 20, 0.48);
  padding: 7px;
  z-index: 2;
}

.map-search-section {
  border-top: 1px solid var(--line, #F0E2D5);
  padding-top: 5px;
  margin-top: 5px;
}

.map-search-section-title {
  padding: 7px 10px 4px;
  color: var(--ink-soft, #917C70);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-search-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 11px;
  padding: 9px 10px;
  background: transparent;
  color: var(--ink, #3A2A22);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.map-search-result:hover,
.map-search-result.active {
  background: var(--chip, #FBEFE4);
}

.map-search-nearby {
  color: var(--peach-deep, #F2723B);
}

.map-search-result-icon {
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chip, #FBEFE4);
}

.map-search-result-emoji {
  font-size: 17px;
  line-height: 1;
}

.map-search-result > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-search-result strong,
.map-search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-search-result strong {
  font-size: 14px;
  font-weight: 750;
}

.map-search-result small {
  color: var(--ink-soft, #917C70);
  font-size: 12px;
}

.map-search-status {
  padding: 10px;
  color: var(--ink-soft, #917C70);
  font-size: 13px;
}

.map-search-status.error {
  color: #B24B38;
}

.map-search-attribution {
  padding: 5px 10px 3px;
  color: var(--ink-soft, #917C70);
  font-size: 10px;
  text-align: right;
}

.map-search-attribution a {
  color: inherit;
}

@media (max-width: 899.98px) {
  .map-search-group {
    background: var(--surface, #fff);
    border-radius: 16px;
    box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
    padding: 0 6px 0 12px;
    gap: 8px;
  }

  .map-search-bar {
    background: none;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .map-search-results {
    left: -52px;
  }
}

.map-wallet-chip {
  flex: 0 0 auto;
  height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface, #fff);
  border-radius: 15px;
  padding: 0 12px;
  box-shadow: 0 8px 20px -12px rgba(60, 30, 20, 0.3);
  border: 1px solid var(--line, #F0E2D5);
  font-family: inherit;
  cursor: pointer;
}

.map-wallet-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-wallet-chip-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.map-wallet-chip-divider {
  color: var(--ink-soft, #917C70);
  font-weight: 700;
}

/* Not enough room for both counts on one line - stack rouleaux above karma
   inside the same chip instead, and drop the now-meaningless dot separator. */
@media (max-width: 480px) {
  .map-wallet-chip {
    flex-direction: column;
    justify-content: center;
    height: 44px;
    padding: 3px 10px;
    gap: 1px;
  }

  .map-wallet-chip-divider {
    display: none;
  }

  .map-wallet-chip-value {
    font-size: 12px;
  }
}

.map-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #3A2A22);
}

.map-search-input::placeholder {
  color: var(--ink-soft, #917C70);
}

.map-search-clear {
  flex: 0 0 auto;
  border: none;
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-filter-btn {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #3A2A22);
}

.map-locate-btn {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #3A2A22);
}

.map-locate-btn.active {
  background: var(--chip, #FBEFE4);
  border-color: var(--peach-deep, #F2723B);
  color: var(--peach-deep, #F2723B);
}

.map-filter-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg, #FBF1E6);
}

.map-second-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
}

.map-social-switch {
  flex: 1;
  display: flex;
  gap: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 8px 20px -12px rgba(60, 30, 20, 0.3);
}

.map-social-select {
  display: none;
}

@media (max-width: 899.98px) {
  .map-social-switch {
    display: none;
  }

  .map-social-select {
    display: block;
    flex: 1;
    height: 48px;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid var(--line, #F0E2D5);
    background: var(--surface, #fff);
    box-shadow: 0 8px 20px -12px rgba(60, 30, 20, 0.3);
    padding: 0 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink, #3A2A22);
  }
}

.map-social-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--ink-soft, #917C70);
}

.map-social-tab.active {
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  box-shadow: 0 4px 10px -4px rgba(60, 30, 20, 0.3);
}

.map-social-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.map-actions-row {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.map-quick-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 11px 0 2px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.map-quick-chips::-webkit-scrollbar {
  display: none;
}

.map-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 9px 15px;
  border-radius: 13px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  box-shadow: 0 4px 12px -8px rgba(60, 30, 20, 0.3);
}

.map-chip.active {
  border-color: transparent;
  background: var(--peach-deep, #F2723B);
  color: #fff;
  box-shadow: 0 8px 18px -8px var(--peach-deep, #F2723B);
}

.map-page-heading {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: min(100%, 560px);
  margin: 0;
  padding: 4px 6px 4px 13px;
  border: 1px solid rgba(240, 226, 213, 0.95);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink, #3A2A22);
  box-shadow: 0 7px 18px -12px rgba(60, 30, 20, 0.5);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.map-page-heading-button {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.map-page-heading-button:hover {
  color: var(--peach-deep, #F2723B);
}

.map-page-heading-button:focus-visible {
  outline: 3px solid rgba(242, 114, 59, 0.35);
  outline-offset: 2px;
}

.map-page-heading-info-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 30, 20, 0.08);
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.map-page-heading-info-toggle:hover {
  background: rgba(242, 114, 59, 0.16);
  color: var(--peach-deep, #F2723B);
}

/* Real visible SEO copy for city pages (see PecheMap's pageDescription) -
   collapsed by default so it doesn't eat map space, but present in the DOM
   either way: Google indexes content behind a toggle the same as content
   that's open on load. */
.map-page-description {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(0);
  z-index: 20;
  width: min(100% - 32px, 420px);
  margin: 0 0 8px;
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink, #3A2A22);
  box-shadow: 0 7px 18px -12px rgba(60, 30, 20, 0.5);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  pointer-events: none;
  transition: max-height 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}

.map-page-description.open {
  max-height: 220px;
  margin-bottom: 66px;
  padding: 12px 14px;
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 899.98px) {
  .map-page-heading {
    max-width: calc(100% - 144px);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    font-size: 13.5px;
    text-align: center;
  }

  .map-page-heading-button {
    text-align: center;
  }
}

/* src/styles/NearbyPinsSheet.css */
.nearby-sheet {
  display: flex;
  flex-direction: column;
  font-family: 'Hanken Grotesk', sans-serif;
}

/* Mobile: full-width bottom sheet. Desktop position/appearance instead comes
   entirely from the shared .map-side-panel class (see PecheMap.css) applied
   alongside this one in NearbyPinsSheet.js - kept mobile-only here so the two
   classes' positioning rules never fight over specificity/cascade order. */
@media (max-width: 899.98px) {
  .nearby-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40%;
    z-index: 22;
    background: var(--surface, #fff);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 34px -18px rgba(60, 30, 20, 0.4);
    /* Visible height left when dragged/snapped to the collapsed "peek" state
       (see useSheetDrag) - handle + title row, sort chips hidden below. */
    --sheet-peek-height: 112px;
  }

  .nearby-sheet.dragging {
    box-shadow: 0 -20px 40px -16px rgba(60, 30, 20, 0.5);
  }
}

.nearby-sheet-handle {
  display: none;
  justify-content: center;
  padding: 10px 0 4px;
}

@media (max-width: 899.98px) {
  .nearby-sheet-handle {
    display: flex;
    touch-action: none;
    cursor: grab;
  }

  .nearby-sheet-handle::after {
    content: '';
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--line, #F0E2D5);
  }
}

.nearby-sheet-header {
  padding: 4px 20px 12px;
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .nearby-sheet-header {
    padding: 20px 20px 12px;
  }
}

.nearby-sheet-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nearby-sheet-count {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.nearby-sheet-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nearby-sheet-sub {
  font-size: 14px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.nearby-sheet-sort-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.nearby-sheet-sort-chip {
  border: 1px solid var(--line, #F0E2D5);
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.nearby-sheet-sort-chip.active {
  background: var(--ink, #3A2A22);
  border-color: var(--ink, #3A2A22);
  color: var(--surface, #fff);
}

.nearby-sheet-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nearby-sheet-empty {
  text-align: center;
  padding: 34px 24px;
  font-size: 13px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
}

.nearby-sheet-skeleton {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nearby-pin-row-skeleton {
  cursor: default;
  pointer-events: none;
}

.nearby-skeleton-chips {
  display: flex;
  gap: 7px;
  margin-top: 4px;
}

/* Sized and styled to match .nearby-pin-row so the ad reads as part of the
   list's rhythm instead of a foreign banner. The row's own height comes from
   its content (46px thumb + 13px*2 padding + meta line), so this mirrors
   that instead of hardcoding a number that'd drift if the row layout changes. */
.nearby-pin-ad {
  margin: 0;
  min-height: 97px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 13px;
  background: var(--chip, #FBEFE4);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 18px;
  overflow: hidden;
}

.nearby-pin-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: var(--chip, #FBEFE4);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 18px;
  padding: 13px;
  font-family: inherit;
  cursor: pointer;
}

.nearby-pin-row.selected {
  border-color: var(--peach-deep, #F2723B);
}

.nearby-pin-thumb {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nearby-pin-info {
  flex: 1;
  min-width: 0;
}

.nearby-pin-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nearby-pin-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.nearby-pin-open {
  color: var(--green, #5FA86B);
  font-weight: 800;
}

.nearby-pin-closed {
  color: #C2511F;
  font-weight: 800;
}

.nearby-pin-rating {
  color: var(--peach-deep, #F2723B);
  font-weight: 800;
}

.nearby-pin-amen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.nearby-pin-amen-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 7px;
  padding: 3px 7px;
}

.nearby-pin-price {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-soft, #917C70);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 8px;
  padding: 4px 8px;
}

.nearby-pin-price.free {
  color: var(--green, #5FA86B);
}

/* src/styles/FriendsFeedSheet.css */
.friends-feed-sheet {
  display: flex;
  flex-direction: column;
  font-family: 'Hanken Grotesk', sans-serif;
}

/* Mobile: full-width bottom sheet. Desktop position/appearance comes from the
   shared .map-side-panel class (see PecheMap.css), same split as NearbyPinsSheet. */
@media (max-width: 899.98px) {
  .friends-feed-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40%;
    z-index: 22;
    background: var(--surface, #fff);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 34px -18px rgba(60, 30, 20, 0.4);
    /* Visible height left when dragged/snapped to the collapsed "peek" state
       (see useSheetDrag) - handle + title row, filter/sort chips hidden below. */
    --sheet-peek-height: 112px;
  }

  .friends-feed-sheet.dragging {
    box-shadow: 0 -20px 40px -16px rgba(60, 30, 20, 0.5);
  }
}

.friends-feed-sheet-handle {
  display: none;
  justify-content: center;
  padding: 10px 0 4px;
}

@media (max-width: 899.98px) {
  .friends-feed-sheet-handle {
    display: flex;
    touch-action: none;
    cursor: grab;
  }

  .friends-feed-sheet-handle::after {
    content: '';
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: var(--line, #F0E2D5);
  }
}

.friends-feed-sheet-header {
  padding: 4px 20px 12px;
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .friends-feed-sheet-header {
    padding: 20px 20px 12px;
  }
}

.friends-feed-sheet-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.friends-feed-sheet-title {
  flex: 1;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.friends-feed-sheet-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.friends-feed-sheet-sort-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.friends-feed-sheet-filter-row {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.friends-feed-sheet-filter-chip {
  flex: 1;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  border-radius: 12px;
  padding: 8px 7px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.friends-feed-sheet-filter-chip.active {
  background: var(--peach-deep, #F2723B);
  border-color: var(--peach-deep, #F2723B);
  color: #fff;
}

.friends-feed-sheet-sort-chip {
  border: 1px solid var(--line, #F0E2D5);
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.friends-feed-sheet-sort-chip.active {
  background: var(--ink, #3A2A22);
  border-color: var(--ink, #3A2A22);
  color: var(--surface, #fff);
}

.friends-feed-sheet-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.friends-feed-sheet-empty {
  text-align: center;
  padding: 34px 24px;
  font-size: 13px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
}

.friends-feed-skeleton {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.friends-feed-card-skeleton {
  pointer-events: none;
}

.friends-feed-card {
  box-sizing: border-box;
  display: flex;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 16px;
  background: var(--chip, #FBEFE4);
  padding: 14px;
  font-family: inherit;
}

.friends-feed-card.clickable {
  cursor: pointer;
}

.friends-feed-card.locked {
  opacity: 0.85;
}

.friends-feed-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

.friends-feed-card-body {
  flex: 1;
  min-width: 0;
}

.friends-feed-card-line {
  font-size: 14px;
  color: var(--ink, #3A2A22);
  font-weight: 600;
  line-height: 1.3;
}

.friends-feed-card-author,
.friends-feed-card-place {
  font-weight: 800;
}

.friends-feed-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.friends-feed-card-peaches {
  display: flex;
  gap: 2px;
}

.friends-feed-card-time {
  font-size: 11.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
}

.friends-feed-card-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
  background: var(--bg, #FBF1E6);
  padding: 2px 7px;
  border-radius: 6px;
}

.friends-feed-card-locked-badge {
  color: var(--ink-soft, #917C70);
}

.friends-feed-card-text {
  font-size: 13.5px;
  color: var(--ink, #3A2A22);
  font-weight: 500;
  line-height: 1.45;
  margin-top: 6px;
}
.friends-feed-sheet-enable-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  color: #3a2a22;
  font-weight: 700;
}

/* src/styles/UserProfile.css */
.user-profile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .user-profile-authed {
    /* The scroll container spans the full content area so the scrollbar sits
       at its true edge, not floating next to a centered narrow column - the
       760px centering lives on .user-profile-inner instead. */
    max-width: none;
    margin: 0;
    justify-content: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
    align-items: stretch;
  }

  .user-profile-inner {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    box-sizing: border-box;
  }

  @media (max-width: 899.98px) {
    .user-profile-inner {
      padding-bottom: 96px;
    }
  }

  .profile-header-top {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  .profile-title {
    font-size: 28px;
    color: var(--ink, #3A2A22);
  }

  .profile-back-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line, #F0E2D5);
    background: var(--surface, #fff);
    color: var(--ink, #3A2A22);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .profile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
  }

  .profile-picture img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .profile-picture-letter {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 32px;
  }

  .user-details {
    text-align: center;
    margin-top: 20px;
  }

  .profile-header .user-details {
    text-align: left;
    margin-top: 0;
  }

  .user-details h2 {
    margin: 0;
  }

  .user-details p {
    margin: 5px 0;
  }

  .profile-pseudo-display {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 26px;
    color: var(--ink, #3A2A22);
  }

  .profile-logout-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-soft, #917C70);
    cursor: pointer;
  }

  .profile-pseudo-edit-btn {
    background: var(--chip, #FBEFE4);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft, #917C70);
    cursor: pointer;
    flex: 0 0 auto;
  }

  .profile-pseudo-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .profile-pseudo-input {
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink, #3A2A22);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--line, #F0E2D5);
    background: var(--surface, #fff);
  }

  .profile-pseudo-save,
  .profile-pseudo-cancel {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    border: none;
  }

  .profile-pseudo-save {
    background: var(--peach-deep, #F2723B);
    color: #fff;
  }

  .profile-pseudo-cancel {
    background: var(--chip, #FBEFE4);
    color: var(--ink-soft, #917C70);
  }

  .profile-pseudo-error {
    color: #B23B2E;
    font-size: 12.5px;
    font-weight: 700;
  }

  .profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
  }

  .profile-stat-tile {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #F0E2D5);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
  }

  .profile-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--peach-deep, #F2723B);
  }

  .profile-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-soft, #917C70);
    margin-top: 2px;
  }

  .profile-friends-section {
    margin-top: 24px;
  }

  .profile-friends-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink, #3A2A22);
  }

  .profile-add-friend-btn {
    position: relative;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--peach-deep, #F2723B);
    cursor: pointer;
    padding: 0;
  }

  .profile-request-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #B23B2E;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .profile-friends-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .profile-friends-empty {
    font-size: 13px;
    color: var(--ink-soft, #917C70);
  }

  .profile-friend-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--chip, #FBEFE4);
    border-radius: 12px;
    padding: 6px 10px 6px 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #3A2A22);
  }

  .profile-friend-chip button {
    background: none;
    border: none;
    color: var(--ink-soft, #917C70);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }

  .profile-about-link {
    display: block;
    text-align: center;
    margin-top: 24px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--peach-deep, #F2723B);
    text-decoration: none;
  }
.profile-preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  color: var(--ink, #3a2a22);
}

.profile-preference-status {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.profile-preference-hint {
  margin: -4px 0 6px;
  font-size: 12.5px;
  color: var(--ink-soft, #917C70);
}

.profile-tagline {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft, #917C70);
  margin-top: -2px;
}

.profile-economy-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.profile-economy-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 20px;
  padding: 16px 18px;
  color: var(--ink, #3a2a22);
}

.profile-economy-panel-top {
  flex: 1 1 auto;
}

.profile-economy-panel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #917C70);
}

.profile-economy-panel-value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
}

.profile-economy-panel-value-cap {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.profile-economy-panel-sub {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--peach-deep, #F2723B);
  margin-top: 2px;
}

.profile-economy-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-alt, #FBEFE4);
  margin-top: 12px;
  overflow: hidden;
}

.profile-economy-progress-fill {
  height: 100%;
  border-radius: 4px;
}

.profile-economy-progress-fill.rouleaux {
  background: #D6478A;
}

.profile-economy-progress-fill.karma {
  background: #E5B93C;
}

.profile-economy-panel-hint {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #917C70);
}

.profile-help-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--peach-deep, #F2723B);
  text-decoration: none;
}

.profile-economy-card {
  background: #fff;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 16px;
  padding: 14px 16px;
}

.profile-economy-card-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft, #917C70);
}

.profile-economy-card-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #3a2a22);
  margin-top: 4px;
}

.profile-economy-card-hint {
  font-size: 12.5px;
  color: var(--ink-soft, #917C70);
  margin-top: 6px;
}

.profile-economy-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #3a2a22);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 18px;
  margin-bottom: 8px;
}

.profile-economy-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-economy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #3a2a22);
}

.profile-economy-value {
  font-weight: 800;
  font-size: 13px;
}

.profile-economy-value.positive {
  color: #5FA86B;
}

.profile-economy-value.negative {
  color: #B23B2E;
}

.profile-economy-levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-economy-level-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 14px;
  padding: 10px 14px;
}

.profile-economy-level-row.active {
  box-shadow: 0 0 0 2px var(--peach-deep, #F2723B) inset;
}

.profile-economy-level-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
  background: var(--surface-alt, #FBEFE4);
  color: var(--ink-soft, #917C70);
}

.profile-economy-level-row.active .profile-economy-level-dot {
  background: var(--peach-deep, #F2723B);
  color: #fff;
}

.profile-economy-level-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3a2a22);
}

.profile-economy-level-detail {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  margin-top: 2px;
}

.trophies-card {
  background: #fff;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 20px;
  padding: 16px 18px;
  margin-top: 16px;
}

.trophies-card-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, #3A2A22);
  margin: 0;
}

.trophies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.trophy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.trophy-badge-image {
  width: 54px;
  height: 54px;
  image-rendering: pixelated;
}

.trophy-badge-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
  text-align: center;
  margin-top: 6px;
}

.trophy-badge-ring-locked {
  opacity: 0.45;
}

/* src/styles/AddFriendModal.css */
.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--chip, #FBEFE4);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 9px;
}

.friend-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--peach, #FF9E6D);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex: 0 0 auto;
}

.friend-name {
  flex: 1;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.friend-sent-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.friend-action-decline, .friend-action-accept {
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.friend-action-decline {
  background: none;
  color: var(--ink-soft, #917C70);
  border: 1px solid var(--line, #F0E2D5);
}

.friend-action-accept {
  background: var(--peach-deep, #F2723B);
  color: #fff;
}

.trophy-modal {
  position: relative;
  padding: 32px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.trophy-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: var(--surface-alt, #FBEFE4);
  color: var(--ink, #3A2A22);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.trophy-modal-image-large {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  margin-bottom: 14px;
}

.trophy-modal-image-locked {
  opacity: 0.6;
}

.trophy-modal-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-alt, #FBEFE4);
  overflow: hidden;
}

.trophy-modal-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.trophy-modal-title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink, #3A2A22);
  margin: 14px 0 0;
}

.trophy-modal-tier {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.trophy-modal-count {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin-top: 8px;
}

.trophy-modal-progress-hint {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
}

.trophy-modal-description {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft, #917C70);
}

.progress-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.progress-ring-svg {
  position: absolute;
  top: 0;
  left: 0;
}

.progress-ring-svg circle {
  transition: stroke-dashoffset 0.3s ease;
}

.progress-ring-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trophy-showcase-picker {
  position: relative;
  padding: 24px 20px;
}

.trophy-showcase-picker-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt, #FBEFE4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink, #3A2A22);
}

.trophy-showcase-picker-title {
  font-size: 20px;
  color: var(--ink, #3A2A22);
  margin: 0 0 6px;
}

.trophy-showcase-picker-hint {
  font-size: 13px;
  color: var(--ink-soft, #917C70);
  margin: 0 0 18px;
}

.trophy-showcase-picker-empty {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  text-align: center;
  padding: 20px 0;
}

.trophy-showcase-picker-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 50vh;
  overflow-y: auto;
}

.trophy-showcase-picker-row-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
  margin-bottom: 6px;
}

.trophy-showcase-picker-row-tiers {
  display: flex;
  gap: 8px;
}

.trophy-showcase-picker-tier-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.trophy-showcase-picker-tier-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.trophy-showcase-picker-tier-image {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.trophy-showcase-picker-remove {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line, #F0E2D5);
  background: transparent;
  color: var(--ink-soft, #917C70);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.trophy-showcase {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.trophy-showcase-slot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px dashed var(--line, #F0E2D5);
  background: var(--surface-alt, #FBEFE4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.trophy-showcase-slot-filled {
  border-style: solid;
  border-color: var(--peach-deep, #F2723B);
  background: var(--surface, #fff);
}

.trophy-showcase-slot-empty {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  line-height: 1;
}

.trophy-showcase-slot-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (max-width: 899.98px) {
  .trophy-showcase {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    order: 3;
    flex-basis: 100%;
  }
}

/* src/styles/Help.css */
.help-wrap {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.help-inner {
  padding: 20px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 899.98px) {
  .help-inner {
    padding-bottom: 96px;
  }
}

.help-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-title {
  font-size: 28px;
  color: var(--ink, #3A2A22);
}

.help-subtitle {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 20px;
}

.help-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
}

.help-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
  margin: 0 0 6px;
}

.help-card-text {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 12px;
}

.help-card-note {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  line-height: 1.5;
  margin: 10px 0 0;
}

.help-subsection-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink, #3A2A22);
  margin: 14px 0 8px;
}

.help-status-list, .help-value-list, .help-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.help-status-row, .help-value-row {
  background: var(--surface-alt, #FBEFE4);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #3A2A22);
}

.help-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-value {
  font-weight: 800;
}

.help-value.positive {
  color: #5FA86B;
}

.help-value.negative {
  color: #B23B2E;
}

.help-levels-timeline {
  gap: 0;
}

.help-level-row {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 16px;
}

.help-level-row:last-child {
  padding-bottom: 0;
}

.help-level-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.help-level-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
  background: var(--surface-alt, #FBEFE4);
  border: 2px solid var(--line, #F0E2D5);
  color: var(--ink-soft, #917C70);
}

.help-level-line {
  width: 2px;
  flex: 1 1 auto;
  min-height: 20px;
  margin: 2px 0;
  background: var(--line, #F0E2D5);
}

.help-level-body {
  padding-top: 3px;
  flex: 1;
  min-width: 0;
}

.help-level-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #3A2A22);
}

.help-level-detail {
  font-size: 12px;
  color: var(--ink-soft, #917C70);
  margin-top: 2px;
}

.help-level-row.current .help-level-dot {
  background: var(--peach-deep, #F2723B);
  border-color: var(--peach-deep, #F2723B);
  color: #fff;
}

.help-level-row.current .help-level-name {
  color: var(--peach-deep, #F2723B);
}

.help-level-current-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--peach-deep, #F2723B);
  border-radius: 999px;
  padding: 2px 8px;
}
.help-city-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.help-city-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 12px;
  background: var(--chip, #FBEFE4);
  color: var(--peach-deep, #F2723B);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.help-city-link:hover,
.help-city-link:focus-visible {
  border-color: var(--peach-deep, #F2723B);
}

/* src/styles/Leaderboard.css */
.leaderboard-wrap {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.leaderboard-inner {
  padding: 20px;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 899.98px) {
  .leaderboard-inner {
    padding-bottom: 96px;
  }
}

.leaderboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leaderboard-title {
  font-size: 28px;
  color: var(--ink, #3A2A22);
}

.leaderboard-subtitle {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 20px;
}

.leaderboard-period-row,
.leaderboard-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.leaderboard-chip {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  cursor: pointer;
  font-family: inherit;
}

/* Period and category are two independent selectors - give them distinct
   active colors so it's clear at a glance they aren't the same choice. */
.leaderboard-chip-period.active {
  background: var(--peach-deep, #F2723B);
  border-color: var(--peach-deep, #F2723B);
  color: #fff;
}

.leaderboard-chip-category.active {
  background: #3B82C4;
  border-color: #3B82C4;
  color: #fff;
}

.leaderboard-select {
  width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
  font-family: inherit;
  margin-bottom: 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23917C70%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.leaderboard-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #F0E2D5);
  border-radius: 14px;
  padding: 10px 14px;
}

.leaderboard-rank {
  width: 22px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft, #917C70);
  text-align: center;
  flex: 0 0 auto;
}

.leaderboard-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.leaderboard-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.leaderboard-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.leaderboard-pseudo {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #3A2A22);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-count {
  font-size: 15px;
  font-weight: 800;
  color: var(--peach-deep, #F2723B);
}

.leaderboard-row-skeleton {
  height: 56px;
  background: linear-gradient(90deg, var(--chip, #FBEFE4) 25%, var(--line, #F0E2D5) 50%, var(--chip, #FBEFE4) 75%);
  background-size: 200% 100%;
  animation: leaderboard-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes leaderboard-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.leaderboard-empty {
  font-size: 13.5px;
  color: var(--ink-soft, #917C70);
  text-align: center;
  margin-top: 20px;
}

/* src/styles/Toast.css */
.toast-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--ink, #3A2A22);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop: docked panel, not a modal - same treatment as the map's toilet/pêche
   list sheets (.map-side-panel). Fixed instead of absolute since this renders
   globally, not just within the map's own relative container; positioned at
   the same top/left offset the map topbar itself starts from. No backdrop -
   the rest of the page stays fully interactive while this is open. */
.notification-docked-panel {
  position: fixed;
  top: 24px;
  left: calc(84px + 24px);
  bottom: 24px;
  width: 392px;
  z-index: 60;
  background: var(--surface, #fff);
  border-radius: 22px;
  box-shadow: 0 24px 60px -20px rgba(60, 30, 20, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notification-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

/* Mobile: a bottom sheet sized to its own content, not a fixed near-fullscreen
   height - it hugs the bottom edge and only grows as tall as it needs to
   (capped by max-height, with the list itself scrolling past that). */
.notification-mobile-root {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.notification-mobile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 14, 0.42);
}

.notification-mobile-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 34px -18px rgba(60, 30, 20, 0.4);
  animation: notification-sheet-slide-up 0.22s ease;
}

@keyframes notification-sheet-slide-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  flex: 0 0 auto;
}

.notification-header h2 {
  margin: 0;
  font: 700 22px Georgia, serif;
  color: var(--ink, #3a2a22);
}

.notification-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification-read-all,
.notification-close,
.notification-load-more {
  border: 0;
  background: transparent;
  color: var(--peach-deep, #f2723b);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.notification-close {
  font-size: 26px;
  color: var(--ink-soft, #917c70);
  line-height: 1;
}

.notification-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}

.notification-item {
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  color: var(--ink, #3a2a22);
  cursor: pointer;
  font-family: inherit;
}

.notification-item.unread {
  background: var(--chip, #fff7ef);
}

.notification-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-item-icon-trophy {
  background: var(--surface-alt, #FBEFE4);
}

.notification-trophy-image {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.notification-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.notification-item-text {
  font-size: 14px;
  line-height: 1.35;
}

.notification-item small {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft, #917c70);
  font-size: 12px;
}

.notification-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--peach-deep, #f2723b);
  flex: 0 0 auto;
  margin-top: 5px;
}

.notification-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-soft, #917c70);
}

.notification-skeletons {
  display: grid;
  gap: 10px;
  padding: 0 20px 16px;
}

.notification-load-more {
  padding: 14px;
  flex: 0 0 auto;
}

.sidebar-notification-button {
  position: relative;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.sidebar-notification-badge {
  position: absolute;
  top: 2px;
  right: 7px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9px;
  background: #b23b2e;
  color: #fff;
  border: 2px solid #fff;
  font-size: 9px;
  line-height: 14px;
}

/* src/styles/MainView.css */

/* Set the main container to use flexbox */
html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.main-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.middle-section {
  flex: 1;
  overflow: hidden;
}

.tabs {
  display: flex;
  justify-content: center;
  border: 1px solid #ccc;
  height: 5%
}

.tabs button {
  flex: 1;
  padding: 10px;
  border: none;
  background: white;
  cursor: pointer;
}

.tabs button.active {
  background: #F2723B;
  color: white;
}

.content {
  /*for when we will have tabs : height: 95%*/
  height: 100%;
}

/* Desktop layout: sidebar + content, no top/bottom bars */
.main-view-desktop {
  flex-direction: row;
}

.main-view-desktop .sidebar {
  order: -1;
  flex: 0 0 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  background: var(--surface, #fff);
  border-right: 1px solid var(--line, #F0E2D5);
}

.sidebar-logo {
  width: 3em;
  height: 3em;
  object-fit: contain;
}

.sidebar-close-btn {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--chip, #FBEFE4);
  color: var(--ink, #3A2A22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 26px;
  align-items: center;
  width: 100%;
}

.sidebar-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 10px 4px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}

.sidebar-tab.active {
  color: var(--peach-deep, #F2723B);
  background: var(--chip, #FBEFE4);
}

.sidebar-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

/* SidebarNav's own root - transparent to layout by default so its children
   (logo, nav, bottom) act as direct flex items of whichever shell renders it
   (the desktop .sidebar column, or the mobile floating card below). */
.sidebar-content {
  display: contents;
}

/* Mobile floating-card variant: horizontal icon+label rows instead of the
   desktop's compact icon-over-label tiles. */
.sidebar-content-mobile-card .sidebar-nav {
  align-items: stretch;
  margin-top: 0;
  gap: 2px;
}

.sidebar-content-mobile-card .sidebar-tab,
.sidebar-content-mobile-card .profile-nav-tab {
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 14px;
  padding: 13px 14px;
  font-size: 16px;
  border-radius: 16px;
}

.sidebar-content-mobile-card .sidebar-bottom {
  padding-top: 4px;
}

.sidebar-content-mobile-card .profile-nav-avatar {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.profile-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 8px 4px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft, #917C70);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.profile-nav-tab.active {
  color: var(--peach-deep, #F2723B);
  background: var(--chip, #FBEFE4);
}

.profile-nav-avatar-wrap {
  position: relative;
  display: flex;
}

.profile-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.profile-nav-avatar-guest {
  background: var(--chip, #FBEFE4);
  color: var(--ink-soft, #917C70);
  border: 1.5px dashed var(--line, #F0E2D5);
}

.sidebar-alert-dot {
  position: absolute;
  top: 4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #B23B2E;
  border: 2px solid var(--surface, #fff);
}

.sidebar-alert-dot-mobile {
  top: -2px;
  right: -6px;
}

.main-view-content {
  flex: 1;
  overflow: hidden;
}

/* Mobile: bottom-left action stack - menu trigger, notif bell, back button
   (bottom-to-top). column-reverse so the first DOM child (menu) ends up at
   the bottom and later children stack upward above it. */
.mobile-action-stack {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  z-index: 1210;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

.mobile-menu-toggle,
.mobile-stack-button {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line, #F0E2D5);
  background: var(--surface, #fff);
  color: var(--ink, #3A2A22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 10px 26px -10px rgba(60, 30, 20, 0.34);
}

/* Mobile: the nav overlay - a floating card that opens right above the
   action stack, its "bottom" measured from the stack's own height (see
   MainView.js) so it sits flush above the buttons regardless of how many
   are showing. */
.mobile-sidebar-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.mobile-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 14, 0.42);
}

.mobile-sidebar-panel {
  position: absolute;
  left: calc(16px + env(safe-area-inset-left, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  max-width: 340px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface, #fff);
  border-radius: 24px;
  box-shadow: 0 20px 50px -14px rgba(60, 30, 20, 0.4);
  animation: mobile-sidebar-slide-up 0.18s ease;
}

@keyframes mobile-sidebar-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The global mobile back button (in .mobile-action-stack) replaces these
   per-page in-content back buttons on mobile - desktop still shows them
   inline since there's no equivalent floating chrome there. */
@media (max-width: 899.98px) {
  .page-back-btn,
  .profile-back-btn {
    display: none;
  }
}

/* App.css */
.peach-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

form {
  display: flex;
  flex-direction: column;
}

input[type="text"] {
  margin-bottom: 10px;
}