/* Explore: the map screen. Layout from design_system.md, section 5. */
.explore { background: var(--space); overflow: hidden; }
.app { position: relative; height: 100vh; min-height: 560px; }
.globe { position: absolute; inset: 0; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__over { cursor: grab; touch-action: none; }
.globe__over:active { cursor: grabbing; }
.globe__over.is-target { cursor: pointer; }
.globe__over:focus-visible { outline-offset: -4px; }

.explore .head { padding: 0 24px; }
.explore .head::before { content: ''; position: absolute; inset: 0 0 -110px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), var(--scrim) 35%, transparent); }   /* keeps the header readable over a bright globe */
.path { display: flex; align-items: center; gap: 8px; margin-left: 24px; }
.path .chip { text-decoration: none; }
.path__sep { color: var(--on-surface-2); }
.head__switch { margin-left: auto; }
.chip--on { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }

.title { font: 400 22px/1.3 var(--f-sans); margin: 0; }
.body { font: 400 14px/1.45 var(--f-sans); color: var(--on-surface-2); }
.panel { background: var(--surface-1); border-radius: var(--r-l); box-shadow: var(--shadow-3); padding: 16px; }
.side { position: absolute; z-index: 11; left: var(--edge); top: var(--head-h); bottom: var(--edge); width: 360px; display: flex; flex-direction: column; gap: 12px; }
.targets { list-style: none; margin: 4px -4px 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
.row { width: 100%; min-height: 52px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 6px 12px;
  border-radius: var(--r-m); text-align: left; font: 500 15px/1.3 var(--f-sans); transition: background-color var(--t-fast) var(--ease); }
.row:hover, .row.is-hover { background: var(--surface-3); }
.row[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); }
.row__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-s); border: 1px solid var(--outline-2); font: 500 12px/1 var(--f-mono); }
.row[aria-pressed="true"] .row__n { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.row .value { color: var(--on-surface-2); }
.row[aria-pressed="true"] .value { color: inherit; }

.side__foot { border-top: 1px solid var(--outline-2); padding-top: 12px; display: grid; gap: 10px; }
.chosen { font: 400 14px/1.45 var(--f-sans); color: var(--on-surface-2); min-height: 2.9em; }
.chosen b { font-weight: 500; color: var(--on-surface); }
.chosen .value { color: var(--on-surface-2); }
.side__go { width: 100%; height: 48px; font-size: 15px; }

.mapbtns { position: absolute; z-index: 5; right: var(--edge); bottom: 40px; display: grid; gap: 8px; }
.fab { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-3); color: var(--on-surface); box-shadow: var(--shadow-2);
  transition: background-color var(--t-fast) var(--ease); }
.fab:hover { background: var(--surface-4); }
.fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.status { position: absolute; z-index: 4; left: calc(var(--edge) + 360px + 16px); right: 72px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font: 400 12px/1.3 var(--f-mono); color: var(--on-surface-2); pointer-events: none; }
.status > span { padding: 6px 12px; border-radius: var(--r-full); background: var(--scrim); }
.status__scale { display: inline-flex; align-items: center; gap: 8px; }
.status__scale i { display: block; height: 6px; border: 1px solid var(--on-surface-2); border-top: 0; }

/* Buttons on the map screen: white and rectangular, like the two "Explore" buttons on the home page (design_system.md, section 6). */
.explore .btn { border-radius: 3px; background: var(--white); color: var(--space); font-weight: 450; filter: none; box-shadow: none; }
.explore .btn:hover { background: var(--on-surface); filter: none; box-shadow: none; }
.explore .btn[disabled] { background: rgba(255, 255, 255, 0.14); color: rgba(227, 227, 227, 0.45); cursor: default; }
.explore .head__switch { height: 36px; padding: 0 16px; }
.explore .fab { border-radius: 3px; background: var(--white); color: var(--space); }
.explore .fab:hover { background: var(--on-surface); }

/* Corners on the map screen: everything is rectangular (3 px), like the white buttons: the panel, the rows, the chips, the number badges, the status line. */
.explore .panel, .explore .row, .explore .row__n, .explore .chip, .explore .status > span { border-radius: 3px; }