/* Layers button and sheet of the map toolbar (assets/js/map-layers-menu.js). */
.map-layers-toggle{display:none}
/* Desktop: the sheet's switches sit in the toolbar row as before. */
.map-layers-sheet{display:contents}

@media(max-width:820px){
  .map-stage .map-toolbar,.map-stage .map-toolbar:has(.road-tools){grid-template-columns:minmax(0,1fr) auto}
  .map-stage .map-toolbar:has(.road-tools) .filters-toggle{grid-column:auto}
  .map-layers-toggle{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid #d8e1e2;background:#fff;color:var(--navy);font:inherit;font-size:.8rem;font-weight:500;cursor:pointer}
  .map-layers-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
  .map-layers-toggle[aria-expanded="true"],.map-layers-toggle.has-active{border-color:#007d78;color:#007d78}
  .map-layers-toggle[aria-expanded="true"]{background:#e9f3f1}
  .map-layers-toggle__count{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#007d78;color:#fff;font-size:.68rem;font-weight:700}
  .map-layers-toggle__count[hidden]{display:none}

  /* The sheet drops under the toolbar and over the map. */
  .map-layers-sheet{position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:10;display:none;
    grid-template-columns:1fr 1fr;gap:10px 8px;max-height:min(68svh,560px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px 12px 14px;background:rgba(246,243,236,.99);border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(0,43,60,.16)}
  .map-toolbar.layers-open .map-layers-sheet{display:grid}
  /* Both switches share the first row; their notes open full width under them. */
  .map-layers-sheet .metro-tools{display:contents}
  .map-layers-sheet .metro-tools[hidden]{display:none}
  .map-layers-sheet .metro-toggle{width:100%;justify-content:center;order:0}
  .map-toolbar .map-layers-sheet .metro-info{grid-column:1 / -1;order:1;position:static;width:auto;max-width:none;margin:0;box-shadow:none}
  .map-toolbar .map-layers-sheet .metro-info[hidden]{display:none}
  .map-layers-sheet .zone-years-panel{grid-column:1 / -1;order:2}
  .map-layers-sheet .zone-years-panel:first-of-type{padding-top:12px}
}

/* Phone status strip: a soft fade on the right while more statuses lie beyond it. */
@media(max-width:820px){
  .map-toolbar .map-status-filters.has-more{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
  }
}