/* YouthVoice map component. */
.yvm { position: relative; overflow: hidden; background: #E6FBF3; color: #111827; font-family: var(--yv-font-body); }
.yvm-map { position: absolute; inset: 0; }
.yvm .leaflet-tile-pane { filter: none; }
.yvm .leaflet-container { font-family: var(--yv-font-body); }
.yvm.picking .yvm-map { cursor: crosshair; }
.yvm-tools { position: absolute; z-index: 560; top: 12px; left: 56px; right: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yvm-find, .yvm-zip { display: flex; background: #fff; border: 2px solid #111827; border-radius: 999px; overflow: hidden; }
.yvm-find { flex: 1 1 240px; max-width: 360px; }
.yvm-find input, .yvm-zip input { font: inherit; border: 0; padding: 8px 12px; min-width: 0; width: 100%; background: transparent; }
.yvm-zip input { width: 82px; }
.yvm-find input:focus, .yvm-zip input:focus { outline: none; }
.yvm-find button, .yvm-zip button { font: 800 .9rem var(--yv-font-body); border: 0; background: #35D6A0; color: #111827; padding: 0 14px; cursor: pointer; }
.yvm-btn { font: 800 .95rem var(--yv-font-body); border: 2px solid #111827; border-radius: 999px; padding: 8px 14px; background: #fff; color: #111827; cursor: pointer; white-space: nowrap; }
.yvm-btn[aria-pressed="true"], .yvm-btn.main { background: #111827; color: #35D6A0; }
.yvm-drop { margin-left: auto; }
.yvm-msg { position: absolute; z-index: 500; top: 60px; left: 56px; margin: 0; background: #fff; border-radius: 12px; padding: 5px 10px; font-weight: 700; font-size: .9rem; max-width: calc(100% - 70px); }
.yvm-msg:empty { display: none; }
.yvm-places { position: absolute; z-index: 500; left: 12px; bottom: 26px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.yvm-places button { font: 700 .78rem var(--yv-font-body); border: 0; border-radius: 999px; padding: 4px 10px 4px 8px; background: #fff; color: #111827; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; box-shadow: 0 2px 6px rgba(17,24,39,.18); }
.yvm-places i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.yvm-places small { opacity: .6; }
.yvm-places button[aria-pressed="false"] { opacity: .55; }
.yvm-spot { position: absolute; z-index: 600; right: 12px; top: 100px; width: min(310px, calc(100% - 24px)); background: #fff; border: 2px solid #111827; border-radius: 20px; padding: 16px; display: grid; gap: 9px; box-shadow: 0 16px 36px -18px rgba(17,24,39,.6); }
.yvm-spot h3 { margin: 0; font-family: var(--yv-font-display); font-style: italic; font-weight: 900; font-size: 1.55rem; line-height: 1; padding-right: 30px; }
.yvm-k { margin: 0; font-weight: 800; font-size: .8rem; color: #0B7A55; }
.yvm-spot dl { margin: 0; display: grid; gap: 7px; }
.yvm-spot dt { font-size: .78rem; opacity: .7; } .yvm-spot dd { margin: 0; font-weight: 800; } .yvm-spot dd small { font-weight: 500; opacity: .75; }
.yvm-spot .yvm-btn { justify-self: start; }
.yvm-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #111827; background: #fff; font-size: 1.1rem; cursor: pointer; }
.yvm-src { margin: 0; font-size: .72rem; opacity: .65; }
.yvm-panel { position: absolute; z-index: 600; left: 12px; bottom: 70px; width: min(430px, calc(100% - 24px)); background: #fff; border: 2px solid #111827; border-radius: 20px; padding: 16px; display: grid; gap: 10px; }
.yvm-panel h3 { margin: 0; font-family: var(--yv-font-display); font-style: italic; font-weight: 900; font-size: 1.45rem; }
.yvm-panel label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.yvm-panel input { font: inherit; border: 2px solid #DDE3E0; border-radius: 12px; padding: 9px 11px; }
.yvm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.yvm-tags button { font: 700 .86rem var(--yv-font-body); border: 2px solid #DDE3E0; background: #fff; color: #111827; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.yvm-tags button[aria-pressed="true"] { background: #35D6A0; border-color: #111827; }
.yvm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.yvm-pin { width: 34px; height: 34px; background: #111827; border: 3px solid #35D6A0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 6px 12px -6px rgba(17,24,39,.8); }
.yvm-pin span { transform: rotate(45deg); color: #35D6A0; font: 900 .7rem var(--yv-font-body); }
.yvm-pin.mine, .yvm-pin.plused { background: #35D6A0; border-color: #111827; } .yvm-pin.mine span, .yvm-pin.plused span { color: #111827; }
.yvm-note { white-space: nowrap; background: #111827; color: #fff; font: 700 .76rem var(--yv-font-body); border-radius: 999px; padding: 4px 10px; box-shadow: 0 4px 10px -4px rgba(17,24,39,.6); }
.yvm-note b { color: #35D6A0; }
.yvm-you { width: 24px; height: 24px; border-radius: 50%; background: #111827; border: 4px solid #35D6A0; box-shadow: 0 0 0 3px #111827; }
.yvm-pop b { font-family: var(--yv-font-display); font-style: italic; font-size: 1.15rem; }
.yvm-pop .plus { margin-left: 6px; font-weight: 900; background: #35D6A0; border-radius: 999px; padding: 1px 8px; font-size: .82rem; }
.yvm-pop ul { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: .85rem; }
.yvm-pop em { font-style: normal; font-weight: 800; color: #0B7A55; }
.yvm-pop .ask, .yvm-pop .done { margin: 6px 0 4px; font-weight: 700; font-size: .84rem; }
.yvm-pop .pick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.yvm-pop .pick button { font: 700 .75rem var(--yv-font-body); border: 1.5px solid #DDE3E0; background: #fff; border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.yvm-pop .say { font: 800 .84rem var(--yv-font-body); border: 0; border-radius: 999px; padding: 7px 14px; background: #111827; color: #35D6A0; cursor: pointer; }
@media (max-width: 640px) { .yvm-tools { left: 12px; top: 52px; } .yvm-find { max-width: none; flex-basis: 100%; } .yvm-drop { margin-left: 0; } .yvm-msg { top: auto; bottom: 64px; left: 12px; } .yvm-spot { top: auto; bottom: 12px; } .yvm-places { display: none; } }
.yvm [hidden] { display: none !important; }

/* Pin drawer */
.yvm-drawer { position: absolute; z-index: 650; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); overflow-y: auto; background: #fff; border: 2px solid #111827; border-radius: 22px; padding: 18px; display: grid; gap: 14px; align-content: start; box-shadow: 0 20px 40px -20px rgba(17,24,39,.6); }
.yvm-drawer h3 { margin: 0; font-family: var(--yv-font-display); font-style: italic; font-weight: 900; font-size: 1.9rem; line-height: .95; padding-right: 30px; }
.yvm-drawer h4 { margin: 0 0 8px; font-family: var(--yv-font-display); font-style: italic; font-weight: 800; font-size: 1.15rem; }
.yvm-drawer h4 small { font-family: var(--yv-font-body); font-style: normal; font-size: .8rem; background: #E6FBF3; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.yvm-plus { margin: 0; } .yvm-plus b { background: #35D6A0; border-radius: 999px; padding: 2px 10px; font-weight: 900; }
.yvm-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.yvm-reasons li { display: grid; grid-template-columns: 1fr 38px; gap: 2px 8px; font-size: .92rem; font-weight: 600; }
.yvm-reasons i { grid-column: 1; height: 6px; border-radius: 999px; background: #35D6A0; width: var(--w); }
.yvm-reasons em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 900; color: #0B7A55; }
.yvm-voices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yvm-voices li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; background: #F6FAF8; border-radius: 16px; padding: 10px; }
.yvm-voices li.pend { background: #fff; border: 2px dashed #DDE3E0; }
.yvm-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #111827; cursor: pointer; display: grid; place-items: center; }
.yvm-play span { width: 0; height: 0; border-left: 11px solid #35D6A0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.yvm-play.on span { width: 11px; height: 12px; border: 0; border-left: 4px solid #35D6A0; border-right: 4px solid #35D6A0; margin: 0; }
.yvm-vt { margin: 0; font-size: .95rem; line-height: 1.4; }
.yvm-play.on + div .yvm-vt span { opacity: .35; } .yvm-play.on + div .yvm-vt span.on { opacity: 1; }
.yvm-voices small { color: #4B5563; font-weight: 700; font-size: .78rem; }
.yvm-dot { width: 12px; height: 12px; margin: 14px; border-radius: 50%; background: #35D6A0; }
.yvm-note2 { margin: 6px 0 0; font-size: .76rem; color: #4B5563; }
.yvm-agree .pick { display: flex; flex-wrap: wrap; gap: 6px; }
.yvm-agree .pick button { font: 700 .84rem var(--yv-font-body); border: 2px solid #DDE3E0; background: #fff; color: #111827; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.yvm-agree .pick button:hover { border-color: #111827; background: #E6FBF3; }
.yvm-agree .done { margin: 0; font-weight: 800; color: #0B7A55; }
.yvm-add { border-top: 1px solid #E3E8E5; padding-top: 12px; }
.yvm-rec { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.yvm-mic { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #35D6A0; color: #111827; cursor: pointer; display: grid; place-items: center; }
.yvm-mic svg { width: 28px; height: 28px; }
.yvm-mic[aria-pressed="true"] { background: #111827; color: #35D6A0; }
.yvm-rec b { font-family: var(--yv-font-display); font-style: italic; font-weight: 800; font-size: 1.15rem; display: block; }
.yvm-rec small { color: #4B5563; font-size: .82rem; }
.yvm-rec-wave { display: none; width: 100%; height: 44px; margin-top: 8px; --yv-accent: #35D6A0; }
.yvm-rec-wave.on { display: block; }
.yvm-thanks { margin: 0 0 10px; font-weight: 800; background: #E6FBF3; border-radius: 12px; padding: 8px 10px; }
@media (max-width: 640px) { .yvm-drawer { top: auto; height: 72%; left: 8px; right: 8px; width: auto; } }

/* Belonging Index + lit-up voices in the pin drawer */
.yvm-bi { background: #111827; color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.yvm-bi-top { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: center; }
.yvm-bi-dial { width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(#35D6A0 calc(var(--v) * 1%), #2A3242 0); display: grid; place-items: center; align-content: center; position: relative; }
.yvm-bi-dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #111827; }
.yvm-bi-dial b, .yvm-bi-dial small { position: relative; line-height: 1; }
.yvm-bi-dial b { font: italic 900 2rem var(--yv-font-display); color: #35D6A0; }
.yvm-bi-dial small { font-size: .7rem; color: #9CA3AF; font-weight: 700; }
.yvm-bi h4 { color: #35D6A0; margin: 0 0 2px; }
.yvm-bi p { margin: 0; font-size: .9rem; color: #D1D5DB; } .yvm-bi p b { color: #fff; }
.yvm-bi-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.yvm-bi-bars li { display: grid; grid-template-columns: 1fr 44px; gap: 3px 8px; font-size: .84rem; font-weight: 700; }
.yvm-bi-bars i { grid-column: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #35D6A0 var(--w), #2A3242 0); }
.yvm-bi-bars em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-weight: 900; color: #35D6A0; text-align: right; }
.yvm-bi-why { border-top: 1px solid rgba(255,255,255,.14); padding-top: 10px; }
.yvm-voices-box { background: #E6FBF3; border-radius: 18px; padding: 14px; }
.yvm-voices-box .yvm-voices li { background: #fff; box-shadow: 0 6px 16px -12px rgba(17,24,39,.5); }
.yvm-voices-box .yvm-vt { font-size: 1.04rem; font-weight: 600; }
.yvm-note i { font-style: normal; font-weight: 900; background: #35D6A0; color: #111827; border-radius: 999px; padding: 0 6px; margin-right: 6px; }
.yvm-bi-why a { color: #35D6A0; font-weight: 800; }
.yvm-photo { width: calc(100% + 36px); margin: -18px -18px 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px 20px 0 0; display: block; }

/* Cleaner map: Positron tiles with a light mint wash, and nothing but pins until you zoom in */
.yvm .leaflet-tile-pane { filter: grayscale(1) contrast(1.08) brightness(.94); }
.yvm.far .yvm-places { display: none; }
.leaflet-control-zoom a { color: #111827; }

/* The Vibe Check in the drawer: stars, not a dial */
.yvm-bi-top { grid-template-columns: 84px 1fr; }
.yvm-rate { width: 84px; height: 84px; border-radius: 22px; background: #35D6A0; color: #111827; display: grid; place-items: center; align-content: center; }
.yvm-rate b { font: italic 900 2.5rem/1 var(--yv-font-display); }
.yvm-rate small { font-size: .72rem; font-weight: 800; }
.yvm-bi .yv-stars { --off: #4B5563; font-size: 1.25rem; display: block; margin: 2px 0 4px; }
.yvm-bi-bars li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; }
.yvm-bi-bars li span { grid-column: 1 / -1; color: #D1D5DB; font-weight: 600; font-size: .8rem; }
.yvm-bi-bars li .yv-stars { --off: #4B5563; font-size: 1rem; }
.yvm-bi-bars li em { grid-row: auto; grid-column: 2; text-align: right; }

/* Spot card: rating and reasons are already there */
.yvm-spot-rate { display: flex; align-items: center; gap: 8px; }
.yvm-spot-rate b { font: italic 900 1.5rem/1 var(--yv-font-display); }
.yvm-spot-rate small { color: #4B5563; font-weight: 700; }
.yvm-spot-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.yvm-spot-why em { font-style: normal; font-weight: 900; color: #0B7A55; }

/* Search with a list of matches */
.yvm-find, .yvm-pinsearch { position: relative; }
.yvm-find { overflow: visible; }
.yvm-find input { border-radius: 999px 0 0 999px; }
.yvm-find button { border-radius: 0 999px 999px 0; }
.yvm-pinsearch { position: absolute; z-index: 570; top: 12px; left: 56px; width: min(360px, calc(100% - 70px)); display: grid; gap: 4px; }
.yvm.picking .yvm-find { visibility: hidden; }
.yvm-pinsearch input { font: inherit; border: 2px solid #111827; border-radius: 999px; padding: 10px 16px; background: #fff; width: 100%; }
.yvm-pinsearch span { justify-self: start; background: #fff; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 700; }
.yvm-sugg { position: absolute; z-index: 700; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: #fff; border: 2px solid #111827; border-radius: 18px; display: grid; gap: 2px; box-shadow: 0 16px 30px -16px rgba(17,24,39,.5); }
.yvm-pinsearch .yvm-sugg { top: 48px; }
.yvm-sugg button { width: 100%; text-align: left; border: 0; background: none; font: inherit; padding: 8px 10px; border-radius: 12px; cursor: pointer; display: grid; }
.yvm-sugg button:hover, .yvm-sugg button:focus-visible { background: #E6FBF3; }
.yvm-sugg b { font-weight: 800; } .yvm-sugg small { color: #4B5563; }
@media (max-width: 640px) { .yvm-pinsearch { left: 12px; top: 52px; width: calc(100% - 24px); } }