.ml-map-page, .blog-sidebar { min-width: 0; }
.ml-map-page a { color: color-mix(in srgb, var(--brand), var(--ink) 25%); text-underline-offset: .15em; }
.ml-map { margin: 1.5rem 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ml-map figcaption { margin-bottom: 1.2rem; color: var(--ink-muted); font-size: .9rem; }
.ml-map-layer + .ml-map-layer { margin-top: 1.1rem; }
.ml-map-layer-label { display: block; margin-bottom: .5rem; color: var(--ink-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.ml-map-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .65rem; }
.ml-map-node { min-width: 0; display: flex; flex-direction: column; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ml-map-node.is-required { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.ml-map-node.is-selected { outline: 2px solid var(--brand); outline-offset: 2px; }
.ml-map-node button { width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; font-weight: 800; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; }
.ml-map-node button:focus-visible, .ml-route button:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.ml-map-node p { margin: .5rem 0 .7rem; font-size: .77rem; line-height: 1.5; color: var(--ink-muted); }
.ml-map-node a { margin-top: auto; font-size: .78rem; }
.ml-route { padding: 1rem 1.2rem; border-left: 3px solid var(--brand); background: var(--surface); border-radius: 0 12px 12px 0; }
.ml-route-heading { margin-top: 0; font-size: 1.1rem; }
.ml-route li { margin-bottom: .8rem; }
.ml-route li p { margin: .2rem 0 0; color: var(--ink-muted); font-size: .9rem; }
.ml-route button { padding: .55rem .8rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; font: inherit; cursor: pointer; }
.ml-start-routes { display: grid; gap: 1rem; }
.ml-start-routes section { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
.ml-start-routes h3 { margin-top: 0; }
.ml-start-routes ol { margin-bottom: 0; }
.ml-start-routes li { margin: .65rem 0; }
@media (max-width: 520px) {
  .ml-map { padding: .8rem; }
  .ml-map-nodes { grid-template-columns: 1fr; }
  .ml-map-node button { font-size: 1rem; }
  .ml-map-node p, .ml-map-node a { font-size: .85rem; }
  .ml-start-routes section { padding: .85rem; }
}