/* The map's toolbar (U7a): the search, then Filters · Layers · More, each one panel (web/map-tools.js). */
.mt-bar { position: relative; }
.mt-groups { display: inline-flex; gap: 6px; align-items: center; }
.mt-btn { gap: 6px; }
.mt-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#mt-more-btn .mt-ico { fill: currentColor; stroke: none; }
.mt-sheet { flex-direction: column; gap: 10px; min-width: 300px; max-width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 640px); overflow-y: auto; padding: 12px; }
.mt-menu .mt-sheet { left: auto; right: 0; }      /* each opens leftward from its button: the toolbar sits at the right */
.mt-head { font-weight: 700; font-size: 14px; }
.mt-sec { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); min-width: 0; }
.mt-sec .menu-label { margin: 0; }
.mt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.mt-row input[type=text] { flex: 1 1 160px; min-width: 0; }
.mt-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-acts { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.mt-sheet .map-legend { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.mt-sheet .nl-chips { margin: 0; }
.mt-boards { font-weight: 600; }
/* The parcel filters, in the panel: no collapse toggle and no second Clear (the panel's Clear does both). */
#mt-site-filters .dfm-rail { margin: 0; border: 0; padding: 0; background: none; }
#mt-site-filters .dfm-toggle, #mt-site-filters .dfm-actions { display: none; }
#mt-site-filters #dfm-bodywrap { display: block !important; }
#mt-site-filters .dfm-sel { max-width: 100%; }
#mt-site-filters:has(.dfm-rail:not([style*="none"])) .mt-empty { display: none; }
/* The grouped layers, in the panel: the list itself, always open, not a control floating on the map. */
#mt-layer-groups:empty { display: none; }
#mt-layer-groups .ml-box { position: static; box-shadow: none; border: 0; margin: 0; background: none; }
#mt-layer-groups .ml-toggle { display: none; }
#mt-layer-groups .ml-panel { position: static; max-height: none; width: auto; box-shadow: none; border: 0; padding: 0; }

@media (max-width: 760px) {
  /* The map fills the screen under the header: the search on its own row, then the three groups as icons. */
  #view-opportunities > .view-head h1 { display: none; }
  #view-opportunities .split-2col { display: flex; flex-direction: column; }
  #view-opportunities .split-right { order: -1; }
  #view-opportunities .split-2col > * { width: 100%; max-width: 100%; min-width: 0; }
  #view-opportunities .split-right #map { height: var(--mt-map-h, 70vh); }
  .mt-bar #map-geo-q { flex: 1 1 auto; min-width: 0; }
  .mt-groups { flex: 1 1 100%; justify-content: space-between; }
  .mt-groups .mt-menu { flex: 1; position: static; }
  .mt-groups .mt-btn { width: 100%; justify-content: center; }
  .mt-lbl { display: none; }
  .mt-ico { width: 20px; height: 20px; }
  .mt-sheet, .mt-menu:last-child .mt-sheet { left: 0; right: 0; min-width: 0; max-width: none; }
  /* The parcel sheet carries "Screening tool, not legal advice" (U1); the page's footer stays off the map screen. */
  body:has(#view-opportunities.active) .foot { display: none; }
}

/* U7b: the list behind List, and its row controls behind Select. */
#mt-list-btn[aria-pressed="true"], #opp-select[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--black, #111); }
#view-opportunities:not(.mt-selecting) #opp-promote,
#view-opportunities:not(.mt-selecting) #opp-results .graded-tbl tr > :first-child,
#view-opportunities:not(.mt-selecting) #opp-results .graded-tbl tr > :last-child { display: none; }
@media (min-width: 761px) {
  #view-opportunities.mt-list-shut .split-2col { grid-template-columns: minmax(0, 1fr) !important; }
  #view-opportunities.mt-list-shut .split-left, #view-opportunities.mt-list-shut .split-gutter { display: none; }
}
@media (max-width: 760px) {
  #view-opportunities.mt-list-shut .split-left { display: none; }
  #view-opportunities.mt-list-open .split-right #map { display: none; }
}

/* Grades shown (UI-4, #506): the approved Map design's A–F toggles. On: the grade's tint with its -ink letter (4.5:1).
   Off: white, dashed and struck through, so off never relies on color alone. */
.mt-grades { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.mt-grades-k { font-size: 13px; font-weight: 600; color: var(--muted-ink); margin-right: 4px; }
.mt-grade { font: inherit; font-weight: 700; width: 44px; min-height: 44px; border-radius: 8px; cursor: pointer;
  background: var(--panel); color: var(--muted-ink); border: 1px dashed #b8bec7; text-decoration: line-through; }
.mt-grade[aria-pressed="true"] { text-decoration: none; border-style: solid; border-width: 2px; }
.mt-grade.grade-a[aria-pressed="true"], .mt-grade.grade-b[aria-pressed="true"] { background: var(--go-bg); color: var(--go-ink); border-color: var(--go-ink); }
.mt-grade.grade-c[aria-pressed="true"] { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.mt-grade.grade-d[aria-pressed="true"], .mt-grade.grade-f[aria-pressed="true"] { background: var(--no-bg); color: var(--no); border-color: var(--no); }
.mt-grade:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }