/* "Only this resort" (battery saver) and the 3D view (focus.js): the two map controls and the chip under the search bar.
   Colours, type and timing come from design/tokens.css. */

/* The framed-mountain button fills in while the map is limited to one resort */
#focus-toggle[aria-pressed="true"] { background: var(--navy); color: #fff; }
#focus-toggle[aria-pressed="true"]:hover { background: var(--navy); }

/* "3D" and "Photo": text rather than an icon, blue while on */
#terrain-toggle, #photo-toggle { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }
#photo-toggle { font-size: 11px; letter-spacing: 0; }
#terrain-toggle[aria-pressed="true"], #photo-toggle[aria-pressed="true"] { color: var(--accent); }
#terrain-toggle[hidden], #photo-toggle[hidden] { display: none; }

/* "Only Courchevel · Show all" */
.focus-chip[hidden] { display: none; }
.focus-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 12px;
  max-width: 100%;
  color: var(--text);
}
.focus-chip svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.focus-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-chip .focus-off {
  flex: none; height: 28px; padding: 0 11px;
  border: 0; border-radius: 999px;
  background: var(--navy); color: #fff;
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform .12s var(--ease-out);
}
.focus-chip .focus-off:hover { background: var(--map-ink); }
.focus-chip .focus-off:active { transform: scale(.96); }
.focus-chip .focus-off:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }