/* ==========================================================================
   Gas Processing — the treatment switcher

   Loaded by both treatments. It is the only thing added to the approved diagram
   page, so it is deliberately small and quiet.

   Two placements, because the two pages are two kinds of page. The diagram is an
   ordinary document with a hero, where a fixed chip lands on the hero's own
   text — there it sits in the flow, under the hero. The 3D plant is full-bleed,
   where fixed chrome is the convention already.
   ========================================================================== */

.gpx-views {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px;
  width: max-content; max-width: 100%;
  margin: 1.75rem auto 1.25rem;
  padding: 4px; border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(1, 90, 141, .18);
  box-shadow: 0 1px 3px rgba(1, 30, 50, .07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.gpx-views__label { padding: 0 8px 0 10px; color: #7C8B95; }
.gpx-views__item {
  padding: 5px 11px; border-radius: 999px;
  color: #015A8D; text-decoration: none; white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}
a.gpx-views__item:hover { background: rgba(1, 90, 141, .1); color: #013C5E; }
a.gpx-views__item:focus-visible { outline: 2px solid #E0A03C; outline-offset: 2px; }
.gpx-views__item.is-on { background: #015A8D; color: #fff; }

/* --- The full-bleed treatments ------------------------------------------ */

.gpx--scene .gpx-views {
  position: fixed; z-index: 60; margin: 0;
  inset-block-start: 192px; inset-inline-end: clamp(.75rem, 2vw, 1.75rem);
  background: rgba(9, 13, 18, .72);
  border-color: rgba(159, 176, 187, .22);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.gpx--scene .gpx-views__label { color: rgba(159, 176, 187, .62); }
.gpx--scene .gpx-views__item { color: #C7D3DA; }
.gpx--scene a.gpx-views__item:hover { background: rgba(159, 176, 187, .16); color: #fff; }
.gpx--scene .gpx-views__item.is-on { background: #E0A03C; color: #10151B; }

@media (max-width: 860px) {
  /* Top left on the 3D plant: the legend has the top right and the process
     strip has the foot, so this is the corner left over. */
  .gpx--scene .gpx-views {
    inset-block-start: 124px;
    inset-inline-start: clamp(.75rem, 3vw, 1.5rem); inset-inline-end: auto;
    font-size: 9px;
  }
  .gpx-views__label { display: none; }
}

@media print { .gpx-views { display: none; } }