/* Map-first presentation. Existing school selection, layers and analysis stay intact.
   These rules activate only after the optional UI controller has created its controls. */
#workspace-explore.manager-map-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 24px;
}
#workspace-explore.manager-map-layout[data-detail-open="true"] {
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 440px);
}
#workspace-explore.manager-map-layout .map-workspace { display: contents; }
#manager-map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 30;
  min-height: 50px;
}
#manager-map-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #d4e5d4;
  border-radius: 11px;
  color: #194f53;
  background: #f3f4e7;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  box-shadow: 0 3px 12px #00000015;
}
#manager-map-controls button:hover { border-color: #a1efdc; background: #e5f4e8; }
#manager-map-controls #manager-school-toggle[aria-expanded="true"] {
  background: #94e9d6;
  border-color: #b3ffea;
  color: #0c4548;
}
#manager-map-controls #manager-detail-reopen { background: #d8eee5; border-color: #9cccb9; }
#manager-map-controls button:focus-visible,
.manager-panel-controls button:focus-visible { outline: 3px solid #44cabb; outline-offset: 4px; }

#workspace-explore.manager-map-layout .map-canvas {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  border-radius: 17px;
}
#workspace-explore.manager-map-layout #school-map {
  height: clamp(480px, calc(100dvh - 220px), 800px);
  min-width: 0;
}
#workspace-explore.manager-map-layout .map-toolbar { min-height: 54px; }

#workspace-explore.manager-map-layout #manager-school-selector {
  display: block;
  position: absolute;
  inset: 64px auto auto 0;
  z-index: 40;
  width: 318px;
  max-width: calc(100% - 16px);
  max-height: min(850px, calc(100dvh - 120px));
  padding: 15px 18px 20px;
  border: 1px solid #9bbeb0;
  border-top: 4px solid #62b49a;
  border-radius: 15px;
  background: #f0f4e9;
  box-shadow: 8px 15px 38px #051b3840, 0 0 0 1px #ffffff80;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#workspace-explore.manager-map-layout #manager-school-selector .school-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#workspace-explore.manager-map-layout #manager-school-selector .map-options { display: block; }
#workspace-explore.manager-map-layout #manager-school-selector .map-options > summary {
  display: list-item;
  min-height: 36px;
  margin-top: 9px;
  color: #285961;
  font-size: 13px;
  font-weight: 650;
}
#workspace-explore.manager-map-layout #manager-school-selector .search-row { display: block; margin-top: 6px; }
#workspace-explore.manager-map-layout #manager-school-selector .resource-row { display: flex; gap: 10px; align-items: center; }
#workspace-explore.manager-map-layout #manager-school-selector .resource-row select { flex: 1; min-width: 0; width: auto; margin: 0; }
#workspace-explore.manager-map-layout #manager-school-selector .map-layer-panel { margin-top: 17px; padding-top: 14px; border-top: 1px solid #c7d8cc; }
#workspace-explore.manager-map-layout #manager-school-selector #map-layer-groups { display: block; }
#workspace-explore.manager-map-layout #manager-school-selector .map-layer-group { margin-block: 9px; }

#workspace-explore.manager-map-layout #manager-school-details {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 18px;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-height: calc(100dvh - 36px);
  padding: 14px 18px 20px;
  border-top: 4px solid #76d2bb;
  border-radius: 17px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #f6f2e9;
}
#workspace-explore.manager-map-layout .manager-panel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: sticky;
  top: -15px;
  z-index: 6;
  margin: -2px 0 7px;
  padding: 3px 0 6px;
  background: inherit;
}
#workspace-explore.manager-map-layout .manager-panel-controls button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #b6ccc1;
  border-radius: 9px;
  color: #315660;
  background: #fffdf5;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
#workspace-explore.manager-map-layout .manager-panel-controls button:hover { background: #e2eee2; border-color: #72a796; }
#workspace-explore.manager-map-layout #manager-school-details > .section-heading { margin-bottom: 14px; }
#workspace-explore.manager-map-layout > .next-actions { grid-column: 1 / -1; grid-row: 3; }
#workspace-explore.manager-map-layout > #error { grid-column: 1 / -1; grid-row: 4; }

/* Visibility is owned by the panel controller, not by school data or filter values. */
#workspace-explore.manager-map-layout[data-selector-open="false"] #manager-school-selector,
#workspace-explore.manager-map-layout[data-detail-open="false"] #manager-school-details { display: none; }
#workspace-explore.manager-map-layout[data-selector-open="true"] #manager-school-selector,
#workspace-explore.manager-map-layout[data-detail-open="true"] #manager-school-details { animation: manager-panel-arrive .2s ease-out; }
@keyframes manager-panel-arrive {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1050px) and (min-width: 781px) {
  #workspace-explore.manager-map-layout[data-detail-open="true"] { grid-template-columns: minmax(0, 1fr) 350px; }
  #workspace-explore.manager-map-layout #manager-school-details { padding-inline: 14px; }
}

@media (max-width: 780px) {
  #workspace-explore.manager-map-layout,
  #workspace-explore.manager-map-layout[data-detail-open="true"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #manager-map-controls { gap: 8px; }
  #manager-map-controls button { flex: 1 1 auto; min-height: 46px; padding: 10px 12px; font-size: 13px; }
  #workspace-explore.manager-map-layout #school-map { height: clamp(420px, calc(100svh - 260px), 620px); }
  #workspace-explore.manager-map-layout #manager-school-selector,
  #workspace-explore.manager-map-layout #manager-school-details {
    position: fixed;
    inset: auto 12px 12px;
    z-index: 80;
    width: auto;
    max-width: none;
    max-height: calc(100svh - 110px);
    padding: 14px 16px 20px;
    border-radius: 20px;
    box-shadow: 0 -12px 60px #061d3866, 0 0 0 1px #c0ded0;
  }
  #workspace-explore.manager-map-layout #manager-school-details { max-height: 72svh; }
  #workspace-explore.manager-map-layout #manager-school-selector .school-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #workspace-explore.manager-map-layout .manager-panel-controls { top: -15px; }
  #workspace-explore.manager-map-layout .manager-panel-controls button { min-height: 40px; }
  #workspace-explore.manager-map-layout .map-toolbar { gap: 8px; }
  #workspace-explore.manager-map-layout[data-selector-open="true"] #manager-school-selector,
  #workspace-explore.manager-map-layout[data-detail-open="true"] #manager-school-details { animation-name: manager-panel-rise; }
  @keyframes manager-panel-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  #workspace-explore.manager-map-layout[data-selector-open="true"] #manager-school-selector,
  #workspace-explore.manager-map-layout[data-detail-open="true"] #manager-school-details { animation: none; }
}
@media print {
  #workspace-explore.manager-map-layout,
  #workspace-explore.manager-map-layout[data-detail-open="true"] { display: block; }
  #workspace-explore.manager-map-layout #manager-map-controls,
  #workspace-explore.manager-map-layout .manager-panel-controls { display: none; }
  #workspace-explore.manager-map-layout #manager-school-selector,
  #workspace-explore.manager-map-layout #manager-school-details {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    animation: none;
  }
}