/* ═════════════════════════════════════════════════════════════════════════
   COMPACT PANEL PASS

   Loaded after every other sheet so it wins on source order; self-contained,
   so removing its one <link> reverts all of it.

   1. The ruler's unit picker moves up one cell, flush under the 48px top
      bar, filling the clear cell it used to leave above itself.
   2. The side panel (Map Layers) starts 48px from the top - under the top
      bar, never over it - and runs to the bottom of the screen instead of
      stopping at the 45svh cap, so its lists show in full and scroll inside
      the panel rather than being cut off. Its tab menus stay horizontal.
   3. The side panel's header loses its 12px left inset so the collapse
      chevron sits flush in the corner.
   4. Basemaps are a vertical list of 48px rows with a 48x48 thumbnail, under
      a 48x48 search cell that opens the search field when clicked
      (setupBasemapSearch in script.js toggles .js_search_open).
   5. The marker action ring's buttons carry no outline.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Ruler unit picker: one cell up ──────────────────────────────────── */
.cs_crosshair_ruler_unit_bar {
  top: var(--top_bar_height, 48px);
}


/* ── 2. Side panel: under the top bar, down to the bottom of screen ─────── */
.side-panel.active {
  top: var(--top_bar_height, 48px) !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
}
/* collapsed: back to one header cell */
.side-panel.active.state_popup_collapsed {
  bottom: auto !important;
}

/* content fills everything under the header and tabs and scrolls inside
   itself */
.side-panel > .panel-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}
.side-panel > .panel-content > .tab-content.active {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

/* ── 3. Header: no left inset ───────────────────────────────────────────── */
.side-panel > .panel-header {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.side-panel > .panel-header > .cs_popup_collapse_btn {
  margin-left: 0 !important;
}

/* ── 4. Basemaps: 48px rows under a 48x48 search cell ───────────────────── */
#basemap-list {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}
#basemap-list > .basemap-option {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  padding: 0 !important;
  gap: 0;
  text-align: left;
  border: 0 !important;
  border-bottom: var(--ui_border_uniform_width, 1px) solid
    var(--ui_border_visible) !important;
  border-radius: 0 !important;
}
#basemap-list > .basemap-option > .basemap-thumbnail {
  flex: 0 0 48px;
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: var(--ui_border_uniform_width, 1px) solid
    var(--ui_border_visible) !important;
  box-sizing: border-box;
}
#basemap-list > .basemap-option > .basemap-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  text-align: left;
}
#basemap-list .basemap-name,
#basemap-list .basemap-description {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  -webkit-line-clamp: unset;
}

/* the search row collapses to its 48x48 glyph cell; the glyph is the
   toggle, and the field only shows once it has been opened */
#basemap-tab > .search-container .search-icon {
  cursor: pointer;
  border-right: 0 !important;
}
#basemap-tab > .search-container.js_search_open .search-icon {
  border-right: var(--ui_border_uniform_width, 1px) solid
    var(--ui_border_visible) !important;
}
#basemap-tab > .search-container:not(.js_search_open) .search-box {
  display: none;
}
#basemap-tab > .search-container:not(.js_search_open) > div {
  flex: 0 0 48px;
  width: 48px;
  border-right: var(--ui_border_uniform_width, 1px) solid
    var(--ui_border_visible);
  box-sizing: border-box;
}
#basemap-tab > .search-container:not(.js_search_open):focus-within .search-icon {
  background: #000000;
  color: #ffffff;
}
#basemap-tab > .search-container .search-icon:hover,
#basemap-tab > .search-container.js_search_open .search-icon {
  background: #ffffff;
  color: #000000;
}

/* ── 5. Marker action ring: no outlines ───────────────────────────────────
   ui_borders_squared.css gives every 48px disc a white line; the ring's
   buttons drop it so they read as plain filled circles on the map. (The
   outer semi-ring band that used to sit behind them is no longer created -
   see showMarkerEditDeleteButtons in script.js.) */
.cs_marker_button_container .cs_marker_action_button,
.cs_marker_button_container .cs_marker_delete_button,
.cs_marker_button_container .cs_marker_button_visible,
.cs_marker_action_button,
.cs_marker_delete_button,
.cs_marker_button_visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}