/* ==========================================================================
   Toolbar cleanup (web branch — direct ship 2026-04-24)
   ==========================================================================
   - .layer-segments         — segmented satellite-layer pill (replaces 3 buttons)
   - .forge-advanced-layers  — collapsed <details> drawer for rare-use overlays
   - .advanced-toggle        — drawer summary styling
   ========================================================================== */

.layer-segments {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border-color, #2a3142);
  vertical-align: middle;
}

.layer-segments .seg {
  padding: 6px 14px;
  background: transparent;
  color: var(--text-muted, #8b95a5);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  font: 600 11px/1 inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.layer-segments .seg:hover {
  background: rgba(255, 210, 74, 0.08);
  color: var(--text-bright, #f0c040);
}

.layer-segments .seg.active,
.layer-segments .seg[aria-pressed="true"] {
  background: var(--accent-gold, #FFD24A);
  color: #0a0e1a;
}

.layer-segments .seg + .seg {
  border-left: 1px solid var(--border-color, #2a3142);
}

/* Advanced Layers drawer — keeps rare-use overlay dropdowns out of the way */
.forge-advanced-layers {
  display: inline-block;
  vertical-align: middle;
}

.forge-advanced-layers > summary.advanced-toggle {
  cursor: pointer;
  padding: 6px 12px;
  user-select: none;
  list-style: none;
  font: 600 11px/1 inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #a09470);
  border: 1px solid var(--border-color, #3a3420);
  border-radius: 4px;
  background: transparent;
  transition: background .15s, color .15s;
}

.forge-advanced-layers > summary.advanced-toggle:hover {
  background: rgba(255, 210, 74, 0.08);
  color: var(--accent-gold, #FFD24A);
  border-color: var(--accent-gold, #FFD24A);
}

.forge-advanced-layers[open] > summary.advanced-toggle {
  background: rgba(255, 210, 74, 0.12);
  color: var(--accent-gold, #FFD24A);
  border-color: var(--accent-gold, #FFD24A);
}

.forge-advanced-layers > summary.advanced-toggle::-webkit-details-marker {
  display: none;
}

.forge-advanced-layers .advanced-layers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed var(--border-color, #3a3420);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   B#11 fix (Tyler reported 2026-04-24) — Advanced Layers dropdown clipping
   --------------------------------------------------------------------------
   Problem: <details class="forge-advanced-layers"> rendered position:static
   inside a toolbar row that has overflow:auto/hidden, so when opened the
   menu items escaped without a container — they appeared as floating labels
   over the map.
   Fix: anchor details w/ position:relative, lift menu into absolute layer
   above the map (z-index 96), force toolbar row to overflow:visible so the
   dropdown actually paints. Pure CSS — no HTML structural changes.
   ========================================================================== */

.forge-advanced-layers {
  position: relative !important;  /* anchor for absolute child */
  z-index: 95;
}

.forge-advanced-layers > summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 6px 12px;
  background: rgba(20, 24, 36, 0.85);
  border: 1px solid rgba(255, 210, 74, 0.25);
  border-radius: 6px;
  color: var(--accent-gold, #f0c040);
  font: 600 11px/1.2 inherit;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}

.forge-advanced-layers > summary:hover {
  background: rgba(40, 48, 68, 0.95);
  border-color: rgba(255, 210, 74, 0.5);
}

.forge-advanced-layers > summary::after {
  content: " ▾";
  font-size: 0.85em;
  margin-left: 2px;
}

.forge-advanced-layers[open] > summary::after {
  content: " ▴";
}

/* The menu — everything inside <details> after <summary> */
.forge-advanced-layers[open] > *:not(summary) {
  position: absolute !important;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(15, 18, 28, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 210, 74, 0.3);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 12px 14px;
  z-index: 96;
  font: 500 12px/1.5 inherit;
  color: #d8dde6;
}

/* Ensure parent toolbar row doesn't clip the open dropdown */
.forge-toolbar.row1 {
  overflow: visible !important;
}

/* Stack inner sub-details cleanly */
.forge-advanced-layers details {
  margin: 4px 0;
}

.forge-advanced-layers details > summary {
  font-weight: 600;
  color: var(--accent-gold, #f0c040);
  margin-bottom: 4px;
}