/* Zperiod's segmented control — the one design for every tab switcher on the site
   (top navigation, Settings, element and ion dialogs, Orbital Atlas, Balance,
   Worksheet, Flame Studio, Molecular Shapes …).

   Markup:  <div class="global-nav-pill">
              <button class="nav-pill-btn active">…</button> <button class="nav-pill-btn">…</button>
            </div>
   The sliding .nav-pill-slider is added and moved by /shared/segmented-control.js.
   Pages may override the --segment-* colour tokens (e.g. over a dark 3D stage),
   never the rules below. */

:root {
  --segment-track-bg: rgba(0, 0, 0, 0.04);
  --segment-active-bg: #ffffff;
  --segment-text: #444444;
  --segment-text-hover: #000000;
  --segment-text-active: #1d1d1f;
  --segment-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --segment-padding: calc(4px * var(--global-nav-scale, 1));
  --segment-radius: calc(22px * var(--global-nav-scale, 1));
  --segment-btn-radius: calc(18px * var(--global-nav-scale, 1));
  --segment-btn-height: calc(36px * var(--global-nav-scale, 1));
  --segment-btn-min-width: calc(74px * var(--global-nav-scale, 1));
  --segment-btn-padding: calc(8px * var(--global-nav-scale, 1)) calc(20px * var(--global-nav-scale, 1));
  --segment-font-size: calc(0.9rem * var(--global-nav-scale, 1));
  --segment-font-weight: 600;
  --segment-font: var(--font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif);
  --segment-slide: transform var(--dur-normal, 280ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), width var(--dur-normal, 280ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  --segment-feedback: color var(--dur-fast, 180ms) var(--ease-snappy, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--dur-fast, 180ms) var(--ease-snappy, cubic-bezier(0.22, 1, 0.36, 1));
  --segment-press-scale: var(--press-scale, 0.97);
}

html.dark-theme {
  --segment-track-bg: rgba(255, 255, 255, 0.06);
  --segment-active-bg: rgba(255, 255, 255, 0.12);
  --segment-text: #888888;
  --segment-text-hover: #cccccc;
  --segment-text-active: #ffffff;
  --segment-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.global-nav-pill {
  display: flex;
  justify-content: center;
  gap: var(--segment-padding);
  background: var(--segment-track-bg);
  padding: var(--segment-padding);
  border-radius: var(--segment-radius);
  flex-shrink: 0;
  position: relative;
}

.global-nav-pill[hidden] {
  display: none;
}

/* Sliding pill indicator */
.nav-pill-slider {
  position: absolute;
  top: var(--segment-padding);
  left: 0;
  height: calc(100% - 2 * var(--segment-padding));
  border-radius: var(--segment-btn-radius);
  background: var(--segment-active-bg);
  box-shadow: var(--segment-active-shadow);
  transition: var(--segment-slide);
  z-index: 0;
  pointer-events: none;
}

.nav-pill-btn {
  padding: var(--segment-btn-padding);
  border: none;
  border-radius: var(--segment-btn-radius);
  background: transparent;
  color: var(--segment-text);
  font-family: var(--segment-font);
  font-size: var(--segment-font-size);
  font-weight: var(--segment-font-weight);
  letter-spacing: normal;
  line-height: 1.05;
  cursor: pointer;
  transition: var(--segment-feedback);
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--segment-btn-height);
  min-width: var(--segment-btn-min-width);
  text-align: center;
  z-index: 1;
}

.nav-pill-btn:hover:not(.active) {
  color: var(--segment-text-hover);
}

.nav-pill-btn.active {
  color: var(--segment-text-active);
}

.nav-pill-btn:active {
  transform: scale(var(--segment-press-scale));
}

/* Keyboard focus: a ring inside the button, only for keyboard users. */
.nav-pill-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--segment-text-active) 55%, transparent);
  outline-offset: -2px;
}