/* The map owns the canvas; controls take only the space their content needs. */
.explore-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.explore-page > .site-header, .explore-page > .messages { flex-shrink: 0; }
.explore-page > main { flex: 1; min-height: 0; }
.explorer { position: relative; height: 100%; min-height: 0; overflow: hidden; background: #e9eee6; }
.map-region { position: absolute; inset: 0; min-width: 0; z-index: 0; }
.explore-map { width: 100%; height: 100%; background: #e9eee6; }
.explore-panel { position: absolute; z-index: 500; top: 16px; left: 16px; display: flex; flex-direction: column; width: 350px; max-width: calc(100% - 96px); max-height: calc(100% - 32px); background: #fff; border: 1px solid #c6cfc3; border-radius: 4px; }
.explore-search { padding: 17px 17px 13px; flex-shrink: 0; }
.explore-search h1 { font-size: 23px; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.025em; }
.search-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.explore-search .search-form { height: 44px; }
.explore-search .search-form input { font-size: 15px; min-width: 0; }
.explore-search .search-form input::-webkit-search-cancel-button { display: none; }
.explore-search .search-form button { width: 42px; padding: 10px; }
.explore-search #clear-search { color: var(--muted, #59665d); }
.explore-search #clear-search .icon { width: 17px; height: 17px; }
.use-location { display: flex; width: 100%; min-height: 44px; margin-top: 9px; justify-content: center; font-size: 14px; }
.use-location .icon { width: 19px; height: 19px; }
.filter-row { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 9px; }
.type-filters { flex: 1; min-width: 0; }
.type-filters summary { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.type-filters summary > span:first-child { white-space: nowrap; }
.type-filters summary::-webkit-details-marker { display: none; }
.type-filters summary > .icon { width: 16px; height: 16px; }
.type-filters[open] summary > .icon { transform: rotate(180deg); }
.filter-summary { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; color: var(--muted, #59665d); }
.type-filter-content { position: absolute; z-index: 600; top: calc(100% + 3px); left: -1px; right: -1px; max-height: min(420px, max(80px, calc(100dvh - 260px))); overflow-y: auto; overscroll-behavior: contain; padding: 11px 12px; background: #fff; border: 1px solid #aebdaa; border-radius: 4px; }
.type-filter-content fieldset { padding: 0; border: 0; margin: 0; min-width: 0; }
.type-filter-content fieldset + fieldset { margin-top: 11px; padding-top: 11px; border-top: 1px solid #dce1da; }
.type-filter-content legend { float: left; width: 100%; margin-bottom: 3px; padding: 0; font-size: 13px; line-height: 1.5; font-weight: 600; }
.type-filter-content legend + .filter-options { clear: both; }
.filter-options { display: flex; flex-wrap: wrap; gap: 0 14px; }
.filter-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; cursor: pointer; }
.filter-options input { width: 17px; height: 17px; margin: 0; accent-color: var(--green, #214b3a); cursor: pointer; }
.filter-options label > span { display: inline-flex; align-items: center; }
.filter-options .icon { width: 17px; height: 17px; }
.type-filter-content .text-button { min-height: 40px; font-size: 13px; margin-top: 4px; }
.saved-filter { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 5px 7px; background: none; border: 1px solid transparent; border-radius: 3px; font-size: 14px; color: var(--ink, #25382e); }
.saved-filter .icon { width: 17px; height: 17px; }
.saved-filter:hover { background: #f1f4ee; }
.saved-filter[aria-pressed=true] { background: #edf2e9; border-color: #9dae94; }
.saved-filter[aria-pressed=true] .icon { fill: currentColor; }
.explore-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
#search-context { font-size: 12px; line-height: 1.45; color: var(--muted, #59665d); }
.view-controls { display: inline-flex; margin-left: auto; gap: 0; flex-shrink: 0; }
.view-controls button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; min-height: 40px; padding: 7px 5px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted, #59665d); background: none; font-size: 13px; }
.view-controls button .icon { display: none; }
.view-controls button[aria-pressed=true] { border-bottom-color: var(--green, #214b3a); color: var(--green, #214b3a); font-weight: 600; }
.view-controls button:hover:not(:disabled) { background: #f3f5f0; }
.view-controls button:disabled { cursor: default; opacity: .5; }
.search-status { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted, #59665d); }
.search-status:empty { display: none; }
.explore-noscript { margin-top: 13px; font-size: 14px; }
.explorer-feedback { padding: 16px 17px 18px; border-top: 1px solid #dce1da; flex-shrink: 0; }
.explorer-feedback h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.explorer-feedback p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted, #59665d); }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.feedback-actions .button { min-height: 42px; padding: 9px 12px; font-size: 14px; }
.explore-results { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid #dce1da; }
.explore-results > h2 { padding: 13px 17px 11px; font-size: 16px; letter-spacing: -.01em; flex-shrink: 0; }
.bin-results { overflow-y: auto; overscroll-behavior: contain; min-height: 0; max-height: 40dvh; scrollbar-width: thin; scrollbar-color: #bfcbb9 transparent; }
.bin-result { display: flex; align-items: flex-start; gap: 9px; padding: 13px 12px 13px 15px; border-top: 1px solid #e0e5dd; }
.bin-result:hover { background: #f7f9f5; }
.bin-result.is-selected { background: #edf3e7; outline: 1px solid #839a77; outline-offset: -1px; }
.bin-result-content { min-width: 0; flex: 1; }
.result-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.result-name { color: var(--ink, #25382e); font-size: 14px; line-height: 1.4; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.result-name:hover { text-decoration: underline; }
.result-distance { padding-top: 1px; white-space: nowrap; font-size: 12px; color: var(--muted, #59665d); }
.result-address { margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.45; color: var(--muted, #59665d); }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12px; line-height: 1.5; margin-top: 6px; color: var(--muted, #59665d); }
.result-rating { display: inline-flex; align-items: center; gap: 4px; }
.result-rating .icon { width: 13px; height: 13px; color: #80612c; }
.result-condition::before { content: "·"; margin-right: 8px; }
.result-example { margin-top: 5px; font-size: 12px; line-height: 1.4; color: #746128; }
.result-source { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted, #59665d); overflow-wrap: anywhere; }
.result-source a { color: inherit; text-underline-offset: 2px; }
.result-map-button { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 9px; margin: -5px -3px 0 0; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--muted, #59665d); }
.result-map-button:hover { background: #e8eee2; border-color: #c4d0bc; color: var(--green, #214b3a); }
.result-map-button .icon { width: 18px; height: 18px; }
.map-search-area { position: absolute; z-index: 450; top: 16px; left: calc(50% + 175px); transform: translateX(-50%); min-height: 44px; font-size: 14px; white-space: nowrap; }
.map-service-notice { position: absolute; z-index: 450; right: 16px; bottom: 78px; max-width: 330px; background: #fff; border: 1px solid #b8c6af; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink, #25382e); }
.map-legend { position: absolute; z-index: 450; right: 16px; bottom: 27px; max-width: calc(100% - 400px); background: #fff; border: 1px solid #c6cfc3; border-radius: 3px; }
.map-legend summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 40px; padding: 9px 11px; list-style: none; cursor: pointer; font-size: 13px; line-height: 1.4; }
.map-legend summary::-webkit-details-marker { display: none; }
.map-legend summary > .icon { width: 16px; height: 16px; }
.map-legend[open] summary > .icon { transform: rotate(180deg); }
.map-key-items { position: absolute; right: -1px; bottom: calc(100% + 6px); width: 225px; max-width: calc(100vw - 32px); max-height: min(330px, calc(100dvh - 190px)); overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 9px 12px; background: #fff; border: 1px solid #c6cfc3; border-radius: 3px; }
.map-key-items li { display: flex; align-items: center; gap: 8px; min-height: 29px; font-size: 13px; line-height: 1.45; }
.map-key-items li > span:first-child { display: inline-flex; align-items: center; }
.map-key-items .icon { width: 18px; height: 18px; }
@media (min-width: 1500px) { .explore-panel { width: 380px; } }
@media (max-width: 1000px) and (min-width: 701px) { .explore-panel { width: 330px; } .map-legend { max-width: calc(100% - 380px); } .map-search-area { left: calc(50% + 165px); } }
@media (max-height: 740px) and (min-width: 701px) { .explore-search { padding-top: 14px; padding-bottom: 10px; } .explore-search h1 { margin-bottom: 11px; font-size: 22px; } .use-location { margin-top: 8px; } .filter-row { margin-top: 5px; } .explore-toolbar { margin-top: 0; } .bin-results { max-height: 35dvh; } }
@media (max-height: 560px) and (min-width: 701px) { .explore-panel { overflow-y: auto; overscroll-behavior: contain; } .type-filter-content { position: static; margin-top: 4px; } }
@media (max-width: 700px) {
  .explorer { overflow: hidden; }
  .explore-panel { display: contents; }
  .explore-search { position: absolute; z-index: 500; top: 8px; left: 8px; right: 8px; padding: 8px; background: #fff; border: 1px solid #c6cfc3; border-radius: 4px; }
  .explore-search h1, .search-label, .use-location > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .search-row { display: flex; align-items: center; gap: 6px; }
  #location-search { flex: 1; min-width: 0; }
  .explore-search .search-form { height: 44px; }
  .explore-search .search-form input { font-size: 16px; padding-left: 9px; }
  .explore-search .search-form button { width: 40px; padding: 9px; }
  .use-location { flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; padding: 10px; margin: 0; }
  .use-location .icon { width: 21px; height: 21px; }
  .filter-row { gap: 5px; margin-top: 4px; align-items: center; }
  .type-filters summary { gap: 4px; font-size: 13px; }
  .type-filters summary > .icon { width: 14px; height: 14px; flex-shrink: 0; }
  .filter-summary { font-size: 12px; }
  .type-filter-content { left: 0; right: 0; }
  .filter-options { gap: 0 15px; }
  .saved-filter { min-height: 40px; padding: 4px 5px; gap: 4px; font-size: 13px; }
  .saved-filter .icon { width: 16px; height: 16px; }
  .view-controls { margin-left: 0; }
  .view-controls button { justify-content: center; width: 40px; min-width: 40px; padding: 7px 2px; font-size: 13px; }
  .view-controls button > .icon { display: none; }
  .explore-toolbar { gap: 8px; margin-top: 2px; align-items: baseline; }
  .explore-toolbar:has(#search-context[hidden]):has(.search-status:empty), .explore-toolbar:has(#search-context[hidden]):has(.search-status.is-initial-hint) { display: none; }
  #search-context { flex: 1; min-width: 0; max-width: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.5; }
  .search-status { margin: 0; font-size: 12px; line-height: 1.5; }
  .search-status.is-initial-hint { display: none; }
  .explore-toolbar:has(#search-context:not([hidden])) .search-status { flex-shrink: 0; max-width: 50%; }
  .map-region { position: absolute; inset: 0; min-height: 0; z-index: 0; }
  .explore-map { position: absolute; inset: 0; }
  .map-region .leaflet-top.leaflet-right { top: var(--explore-controls-height, 112px); right: 0; }
  .explorer.is-list-view .map-region { display: none; }
  .explorer-feedback { position: absolute; z-index: 500; left: 8px; right: 8px; bottom: 24px; max-height: min(240px, calc(100% - var(--explore-controls-height, 112px) - 44px)); overflow-y: auto; padding: 11px 12px; background: #fff; border: 1px solid #c6cfc3; border-radius: 4px; }
  .explorer-feedback h2 { font-size: 16px; }
  .explorer-feedback p { margin-top: 5px; font-size: 13px; line-height: 1.45; }
  .feedback-actions { margin-top: 8px; }
  .feedback-actions .button { min-height: 40px; padding: 8px 11px; font-size: 13px; }
  .explore-results { position: absolute; z-index: 1; top: var(--explore-controls-height, 112px); bottom: 0; left: 0; right: 0; min-height: 0; background: #fff; border-top: 1px solid #dce1da; }
  .explore-results > h2 { padding: 10px 14px; }
  .bin-results { flex: 1; max-height: none; }
  .bin-result { padding: 13px 11px 13px 14px; }
  .result-name { font-size: 15px; }
  .result-address { font-size: 13px; }
  .map-search-area { top: calc(var(--explore-controls-height, 112px) + 10px); left: 12px; transform: none; min-height: 40px; padding: 8px 11px; font-size: 13px; }
  .map-legend { right: auto; left: 12px; bottom: 25px; max-width: calc(100% - 24px); }
  .map-key-items { right: auto; left: -1px; max-height: min(300px, max(90px, calc(100dvh - 300px))); }
  .map-service-notice { right: 8px; left: 8px; bottom: 24px; max-width: none; padding: 11px 12px; }
}
@media (max-width: 370px) { .filter-options { gap: 0 12px; } }