.zm-page { padding-bottom: var(--s-7); }
.zm-tool { margin-top: var(--s-3); }
.zm-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3); background: var(--bg-2); border: 1px solid var(--edge-inner); }
.zm-controls[hidden], .zm-toolbar[hidden], .zm-map-head label[hidden], .zm-results [hidden] { display: none; }
.zm-controls label, .zm-map-head label { display: grid; gap: .25rem; flex: 1 1 9rem; min-width: 0; font: 400 .9rem/1.3 var(--font-ui); color: var(--ink-2); }
.zm-controls .zm-search { flex: 2 1 16rem; }
.zm-filters { flex: 1 1 10rem; min-width: 0; }
.zm-filters summary { min-height: 44px; padding: .5rem; cursor: pointer; font: 400 1rem/1.4 var(--font-ui); }
.zm-filter-fields { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.zm-filter-fields label { flex: 1 1 9rem; }
.zm-controls input, .zm-controls select, .zm-map-head select { width: 100%; min-width: 0; min-height: 44px; padding: .55rem; border: 1px solid var(--line-control); border-radius: 2px; background: var(--bg); color: var(--ink); font: inherit; }
.zm-feedback { margin: var(--s-2) 0; font: 400 .92rem/1.4 var(--font-ui); color: var(--ink-2); min-height: 1.5em; }
.zm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.zm-cartography, .zm-directory { min-width: 0; }
.zm-map-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.zm-map-head h2 { flex: 1 1 10rem; margin: var(--s-2) 0; }
.zm-map-head label { flex: 0 1 14rem; }
.zm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; }
.zm-toolbar .wfg-btn, .zm-result-actions .wfg-btn { min-height: 44px; padding: .55rem .7rem; }
.zm-toolbar output { font: 400 1rem/1.3 var(--font-ui); color: var(--ink); }
.zm-toolbar button:disabled { opacity: .5; cursor: default; }
.zm-viewport { overflow: auto; max-height: 33rem; background: var(--bg); border: 1px solid var(--edge); box-shadow: inset 0 0 0 1px var(--edge-inner); }
.zm-surface { position: relative; width: 100%; line-height: 0; }
.zm-surface img { display: block; width: 100%; height: auto; }
.zm-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); font: 400 1rem/1 var(--font-ui); cursor: pointer; }
.zm-pin span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--edge); pointer-events: none; }
.zm-pin[aria-pressed="true"] span { background: var(--accent); color: var(--bg); }
.zm-map-note { color: var(--ink-2); font-size: .85rem; line-height: 1.5; margin: var(--s-2) 0; }
.zm-detail { padding: var(--s-3); background: var(--bg-2); border: 1px solid var(--edge-inner); margin-top: var(--s-3); }
.zm-detail h2 { margin-top: 0; }
.zm-detail p { margin: var(--s-2) 0; }
.zm-directory h2 { margin: var(--s-2) 0; }
.zm-directory h2 small { font: 400 .85rem/1.4 var(--font-ui); color: var(--ink-3); }
.zm-results { list-style: none; margin: 0; padding: 0; }
.zm-results > li { padding: var(--s-3); border: 1px solid var(--edge-inner); border-bottom: 0; background: var(--bg-2); }
.zm-results > li:last-child { border-bottom: 1px solid var(--edge-inner); }
.zm-results > li[data-selected] { background: color-mix(in srgb, var(--accent) var(--mix-wash), var(--bg-2)); }
.zm-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.zm-result-head h3 { margin: 0; font-size: 1.25rem; }
.zm-results p { margin: .4rem 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.zm-results .zm-result-meta, .zm-results small { color: var(--ink-2); font: 400 .82rem/1.5 var(--font-ui); }
.zm-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-block: var(--s-2); }
.zm-result-actions a, .zm-detail a { display: inline-flex; align-items: center; min-height: 44px; }
.zm-guide { margin-top: var(--s-6); }
@media (min-width: 62rem) { @container page (width >= 61rem) { .zm-layout { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); } .zm-results { max-height: 47rem; overflow-y: auto; } } }
@container page (width < 25rem) { .zm-controls { padding: var(--s-2); } .zm-controls label { flex-basis: 100%; } .zm-map-head label { flex-basis: 100%; } }