/* DutchAtlas — map stage (split / swipe), layer composer panel, 3D controls.
   Owned by public/js/composer.js + main.js (mapStage). */

/* ---------- map stage ---------- */
.map-stage { position: relative; flex: 1; min-height: 0; display: flex; }
.map-stage > #map { flex: 1 1 auto; min-width: 0; width: auto; height: auto; }
.map2 { position: absolute; inset: 0; }
.map2[hidden] { display: none; }

/* split: two maps side by side (also on phones, see the media query) */
.map-stage[data-view="split"] > #map { flex: 1 1 50%; border-right: 2px solid #0b1424; }
.map-stage[data-view="split"] > .map2 { position: relative; inset: auto; flex: 1 1 50%; min-width: 0; }

/* swipe: the second map overlays the first and is clipped at the divider;
   pointer events go to the main map (except on the divider itself) */
.map-stage[data-view="swipe"] > .map2 { pointer-events: none; z-index: 2; }
.swipe-divider { position: absolute; top: 0; bottom: 0; width: 28px; margin-left: -14px; z-index: 5;
  cursor: ew-resize; touch-action: none; display: flex; justify-content: center; }
.swipe-divider[hidden] { display: none; }
.swipe-line { width: 3px; height: 100%; background: #e8eef6; box-shadow: 0 0 0 1px rgba(11,20,36,.6); }
.swipe-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #e8eef6; background: #16243a; color: #e8eef6; font-size: 16px; cursor: ew-resize; padding: 0; }
.swipe-handle:focus-visible { outline: 3px solid var(--accent, #4fc3f7); outline-offset: 2px; }
.swipe-divider.dragging .swipe-line { background: var(--accent, #4fc3f7); }

.map-badge { position: absolute; top: 10px; z-index: 6; max-width: 40%; display: none;
  background: rgba(22,36,58,.9); border: 1px solid #2c4470; border-radius: 8px; padding: 3px 8px;
  font-size: 11.5px; color: var(--ink, #e8eef6); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-badge-1 { left: 10px; }
.map-badge-2 { right: 250px; }
.map-stage[data-view="split"] > .map-badge, .map-stage[data-view="swipe"] > .map-badge { display: block; }
.map-stage[data-view="split"] > .map-badge-2 { left: calc(50% + 10px); right: auto; }

/* ---------- composer panel (inside #controls) ---------- */
#composer-panel { border-top: 1px solid #22365a; padding-top: 8px; }
#composer-panel:empty { display: none; }
.composer > summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-dim, #9fb0c8); list-style-position: inside; }
.composer[open] > summary { margin-bottom: 8px; }
.cmp-body { display: flex; flex-direction: column; gap: 8px; }
.cmp-group { display: flex; flex-direction: column; gap: 6px; padding-left: 8px; border-left: 2px solid #2c4470; }
.cmp-group[hidden] { display: none; }
.cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cmp-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cmp-range { display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 2px 6px; font-size: 11.5px; color: var(--ink-dim, #9fb0c8); }
.cmp-range[hidden] { display: none; }
.cmp-range span { grid-column: 1 / -1; }
.cmp-range input { width: 100%; accent-color: var(--accent, #4fc3f7); }
.cmp-range output { font-size: 11.5px; text-align: right; color: var(--ink, #e8eef6); }
.cmp-views { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cmp-view { padding: 5px 4px; background: var(--panel-2, #1c2e4a); color: var(--ink, #e8eef6); border: 1px solid #2c4470;
  border-radius: 6px; font-size: 11.5px; cursor: pointer; }
.cmp-view[aria-checked="true"] { background: #1e4a6b; border-color: var(--accent, #4fc3f7); color: #fff; }
.cmp-view:focus-visible { outline: 2px solid var(--accent, #4fc3f7); outline-offset: 1px; }
.cmp-note { font-size: 11px; color: var(--ink-dim, #9fb0c8); line-height: 1.4; }
.cmp-legend-title { font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.cmp-ramp { display: flex; height: 10px; border-radius: 2px; overflow: hidden; }
.cmp-sw { flex: 1; }
.cmp-ramp-lbl { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-dim, #9fb0c8); }
.bv-wrap { display: flex; align-items: center; gap: 6px; }
.bv-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; color: var(--ink-dim, #9fb0c8); max-height: 72px; overflow: hidden; }
.bv-grid { display: grid; grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 20px); gap: 1px; }
.bv-cell { display: block; }
.bv-x { font-size: 10px; color: var(--ink-dim, #9fb0c8); margin-left: 22px; }

@media (max-width: 720px) {
  /* Portrait phones: the controls sheet covers the lower ~46vh, so split
     stays side by side (a stacked lower map would sit under the sheet) and
     the swipe handle sits in the gap between the legend and the sheet. */
  .map-badge { top: auto; bottom: calc(46vh + 24px); max-width: 45%; }
  .map-badge-2 { right: 10px; }
  .map-stage[data-view="split"] > .map-badge-2 { left: calc(50% + 6px); right: auto; }
  .swipe-handle { top: 40%; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-view, .swipe-line { transition: none; }
}