/* The one menu of where to go (app-menu.js), the same on every page: the map, the dashboard, the work pages and the
   review page (24 Oct 2026). Only its inside is here: each page keeps its own pill and the panel it opens in. Its
   colours are the page's own (the map's --nm-*, the dashboard's --db-*, the review page's --rv-*), so it follows each
   page's light and dark. */
.am {
  --am-label: var(--nm-label, var(--db-label, var(--rv-label, #1c1c1e)));
  --am-label-2: var(--nm-label-2, var(--db-label-2, var(--rv-label-2, #6e6e73)));
  --am-fill: var(--nm-fill, var(--db-fill, var(--rv-fill, rgba(118, 118, 128, 0.12))));
  --am-sep: var(--nm-sep, var(--db-sep, var(--rv-sep, rgba(60, 60, 67, 0.18))));
  --am-blue: var(--nm-blue-ink, var(--db-blue, var(--rv-blue, #007aff)));
}
.am .am-item {
  position: relative; display: grid; gap: 1px; width: 100%; box-sizing: border-box; padding: 8px 10px 8px 34px; border: 0; border-radius: 9px;
  background: none; color: var(--am-label); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.am .am-item:hover, .am .am-item:focus-visible { background: var(--am-fill); outline: none; }
.am .am-item b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.am .am-item small { font-size: 12.5px; line-height: 1.3; color: var(--am-label-2); }
.am .am-item.is-on b { color: var(--am-blue); }
.am .am-item.is-on::before {
  content: ""; position: absolute; left: 13px; top: 13px; width: 10px; height: 5px;
  border-left: 2px solid var(--am-blue); border-bottom: 2px solid var(--am-blue); transform: rotate(-45deg);
}
.am .am-item[hidden] { display: none; }
.am .am-sep { width: calc(100% - 20px); margin: 4px 10px; border: 0; border-top: 0.5px solid var(--am-sep); }