/* HOP — Developer tools: How HOP is built (maps.js, v105) */
.mp-main{ gap:12px; padding-top:14px; }
.mp-lead{ margin:0; font-size:15.5px; line-height:1.45; color:var(--text-muted); }
.mp-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
.mp-seg button{ font:inherit; font-size:15px; font-weight:700; padding:10px 8px; border-radius:10px; border:0; cursor:pointer; background:transparent; color:var(--text-muted); }
.mp-seg button.is-on{ background:var(--refresh-action, var(--accent-500)); color:var(--refresh-action-ink, #fff); }
.mp-gh span{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); margin-left:4px; }
.mp-n{ font-weight:800; font-size:15px; color:var(--accent-600); }
.mp-view{ gap:10px; padding-top:10px; }
.mp-tools{ display:flex; justify-content:flex-end; gap:6px; }
.mp-z{ min-width:44px; height:40px; padding:0 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:18px; font-weight:800; cursor:pointer; }
.mp-z.mp-fit{ font-size:14px; }
/* the pictures are drawn on white, so they sit on a white card in every theme */
.mp-frame{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; overflow:auto; max-height:72vh; -webkit-overflow-scrolling:touch; }
.mp-frame:not(.is-zoomed){ overflow:hidden; max-height:none; }
.mp-img{ display:block; width:100%; height:auto; max-width:100%; }
.mp-pn{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.mp-pn .btn{ flex:1 1 140px; min-width:0; font-size:14.5px; }
.mp-hint{ margin:0; font-size:13.5px; color:var(--text-muted); text-align:center; }