<div class="tt26">
  <nav class="tt26n">
    <span class="tt26pill" aria-hidden="true"></span>
    <button class="tt26b active" data-t>Day</button>
    <button class="tt26b" data-t>Week</button>
    <button class="tt26b" data-t>Month</button>
  </nav>
</div>

.tt26 {
  background: #f2f2f7;
  padding: 32px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt26n {
  position: relative;
  display: flex;
  background: rgba(120, 120, 128, 0.16);
  border-radius: 9px;
  padding: 2px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
}
.tt26pill {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  background: #fff;
  border-radius: 7px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    left 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tt26b {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: 600 13px/1 inherit;
  color: #1c1c1e;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
  white-space: nowrap;
}
.tt26b:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
  border-radius: 7px;
}
@media (prefers-reduced-motion: reduce) {
  .tt26pill {
    transition: none;
  }
}

/* iOS Segmented — toggle .active and slide white pill between tabs.
   Re-positions on viewport resize so the pill stays locked to its segment. */
(function () {
  var nav = document.querySelector(".tt26n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var pill = nav.querySelector(".tt26pill");
  var current = null;

  function reposition() {
    if (!current || !pill) return;
    pill.style.left = current.offsetLeft + "px";
    pill.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();