/* Shared secondary navigation directly below the application Header. */
.fc-mode-bar {
  --fc-mode-bar-surface: rgba(241, 238, 231, .96);
  --fc-mode-bar-line: rgba(37, 36, 31, .09);
  position: relative;
  z-index: calc(var(--fc-z-header, 500) - 1);
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--fc-mode-bar-line);
  background: var(--fc-mode-bar-surface);
}

.fc-mode-switch {
  --fc-mode-count: 2;
  --fc-mode-width: 162px;
  --fc-mode-item-color: rgba(58, 55, 50, .72);
  --fc-mode-item-active-color: #fff;
  --fc-mode-item-letter-spacing: .04em;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--fc-mode-count), minmax(0, 1fr));
  width: min(var(--fc-mode-width), calc(100vw - 32px));
  height: 34px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(120, 70, 50, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .82), 0 12px 24px -22px rgba(37, 36, 31, .5);
}

.fc-mode-switch__indicator {
  position: absolute;
  inset-block: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--fc-mode-count));
  border-radius: 999px;
  background: linear-gradient(180deg, #292823 0%, #1e1d19 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 16px rgba(0, 0, 0, .18);
  transform: translateX(0);
  transition: transform var(--fc-motion-fast, 150ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1));
  pointer-events: none;
}

.fc-mode-switch[data-active-index="1"] .fc-mode-switch__indicator { transform: translateX(100%); }
.fc-mode-switch[data-active-index="2"] .fc-mode-switch__indicator { transform: translateX(200%); }

.fc-mode-switch__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fc-mode-item-color);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--fc-mode-item-letter-spacing);
  text-indent: var(--fc-mode-item-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--fc-motion-state, 180ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1)),
    transform var(--fc-motion-fast, 150ms) var(--fc-state-ease, cubic-bezier(.2, 0, 0, 1));
}

.fc-mode-switch__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: var(--fc-touch-target, 44px);
  transform: translateY(-50%);
}

.fc-mode-switch__item:is(:hover, :focus-visible) {
  color: rgba(36, 33, 29, .92);
  outline: none;
}

.fc-mode-switch__item:is([aria-selected="true"], [aria-current="page"], .is-selected) {
  color: var(--fc-mode-item-active-color);
}

.fc-mode-switch__item:is([aria-selected="true"], [aria-current="page"], .is-selected):is(:hover, :focus-visible) {
  color: var(--fc-mode-item-active-color);
}

.fc-mode-switch__item:focus-visible {
  box-shadow: 0 0 0 2px var(--fc-mode-bar-surface), 0 0 0 4px rgba(36, 33, 29, .35);
}

.fc-mode-switch__item:active {
  transform: scale(var(--fc-motion-press-scale, .96));
}

@media (prefers-reduced-motion: reduce) {
  .fc-mode-switch__indicator,
  .fc-mode-switch__item {
    transition-duration: var(--fc-motion-instant, .001ms) !important;
  }
}